/* =========================================================================
   BeBusy Master – Lokale vakman · basis
   Structuur en componenten. Uiterlijk (fonts, afronding, tinten) komt uit stijl-*.css.
   Kleuren van de klant: --klant-primair (donker) en --klant-accent (knoppen).
   Mobile first: 375 → 768 → 1280.
   ========================================================================= */

:root {
	--klant-primair: #2E3A33;
	--klant-accent: #B4582B;
	/* Accentkleur als tekst: iets donkerder, zodat kleine tekst WCAG AA haalt op lichte tinten */
	--bb-accent-tekst: color-mix(in srgb, var(--klant-accent) 78%, #000);

	/* Tokens die stijl-*.css overschrijft */
	--bb-font-kop: Georgia, serif;
	--bb-font-body: system-ui, sans-serif;
	--bb-kop-gewicht: 600;
	--bb-kop-transform: none;
	--bb-kop-spatie: -0.01em;
	--bb-eyebrow-transform: none;
	--bb-eyebrow-spatie: 0.02em;
	--bb-radius: 8px;
	--bb-radius-klein: 6px;
	--bb-radius-knop: 6px;
	--bb-radius-foto: 8px;
	--bb-knop-gewicht: 600;
	--bb-knop-transform: none;
	--bb-foto-filter: none;

	--bb-bg: #F9F7F3;
	--bb-tint-bg: #EFE9DF;
	--bb-tint-tekst: var(--bb-tekst);
	--bb-tint-muted: var(--bb-muted);
	--bb-kaart-bg: #FFFDF9;
	--bb-tekst: #24211E;
	--bb-muted: #5F5952;
	--bb-rand: #E2DACD;
	--bb-licht: #FBFAF7; /* gebroken wit voor tekst op donker */
	--bb-schaduw: 0 1px 2px rgb(36 33 30 / 6%), 0 6px 20px rgb(36 33 30 / 7%);

	--bb-breedte: 1180px;
	--bb-tekstbreedte: 68ch;
	--bb-gutter: 16px;
	--bb-sectie-ruimte: clamp(48px, 8vw, 104px);
	--bb-header-hoogte: 68px;
}

/* ---------------------------------------------------------------- Basis */

body {
	background: var(--bb-bg);
	color: var(--bb-tekst);
	font-family: var(--bb-font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.bb-heeft-mobiele-balk { padding-bottom: 76px; }
@media (min-width: 1000px) { body.bb-heeft-mobiele-balk { padding-bottom: 0; } }

.bb-pagina h1, .bb-pagina h2, .bb-pagina h3, .bb-pagina h4,
.bb-footer h2 {
	font-family: var(--bb-font-kop);
	font-weight: var(--bb-kop-gewicht);
	letter-spacing: var(--bb-kop-spatie);
	text-transform: var(--bb-kop-transform);
	line-height: 1.15;
	color: inherit;
	margin-top: 0;
	text-wrap: balance;
}
.bb-pagina h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); margin-bottom: 0.45em; }
.bb-pagina h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 0.6em; }
.bb-pagina h3, .bb-pagina .bb-h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); margin-bottom: 0.4em; line-height: 1.25; }
.bb-pagina p { margin: 0 0 1em; }
.bb-pagina a { color: inherit; text-underline-offset: 0.18em; }
.bb-pagina img { max-width: 100%; height: auto; }

:is(.bb-pagina, .bb-header, .bb-footer, .bb-mobiele-balk, .bb-planningsbalk) :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--klant-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.bb-lead { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--bb-muted); max-width: 60ch; }
.bb-eyebrow {
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: var(--bb-eyebrow-spatie);
	text-transform: var(--bb-eyebrow-transform);
	color: var(--bb-accent-tekst);
	margin-bottom: 0.6em !important;
	display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap;
}
.bb-leeg { color: var(--bb-muted); font-style: italic; }

/* Voorbeeldteksten {{…}}: geel gemarkeerd voor ingelogde teamleden, niet voor bezoekers. */
body.logged-in .bb-todo,
body.logged-in .bb-todo li {
	background: linear-gradient(transparent 55%, rgb(255 222 89 / 55%) 55%);
}

/* Blocksy: ruimte en breedte van de content-container neutraliseren op onze sjablonen */
.page-template-bb-volle-breedte #main,
.single-project #main { padding: 0 !important; }
.page-template-bb-volle-breedte .ct-container-full,
.single-project .ct-container-full { padding: 0 !important; max-width: none; }
.bb-pagina { overflow-x: clip; }
.bb-pagina > .entry-content, .bb-pagina .entry-content { max-width: none; }

/* ---------------------------------------------------------------- Secties */

.bb-sectie {
	padding: var(--bb-sectie-ruimte) var(--bb-gutter);
	margin: 0 !important;
	position: relative;
}
.bb-sectie > * { max-width: var(--bb-breedte); margin-left: auto !important; margin-right: auto !important; }
.bb-sectie > p, .bb-sectie > .bb-lead { max-width: var(--bb-breedte); }
.bb-sectie--licht { background: var(--bb-bg); }
.bb-sectie--tint { background: var(--bb-tint-bg); color: var(--bb-tint-tekst); }
.bb-sectie--tint .bb-lead { color: var(--bb-tint-muted); }
.bb-sectie--strak { padding-top: 0; }
/* Twee secties met dezelfde achtergrond na elkaar: geen dubbele witruimte */
.bb-sectie--licht + .bb-sectie--licht,
.bb-sectie--tint + .bb-sectie--tint,
.bb-sectie--tint + .bb-planningsblok { padding-top: 0; }
.bb-sectie--smal { padding-top: 28px; padding-bottom: 28px; }
.bb-sectie--smal-onder { padding-bottom: 0; }
.bb-sectie--hero-kort { padding-top: clamp(36px, 6vw, 72px); padding-bottom: clamp(36px, 6vw, 72px); background: var(--bb-tint-bg); color: var(--bb-tint-tekst); }
.bb-sectie--accent { background: var(--klant-primair); color: var(--bb-licht); }
.bb-sectie--accent a:not(.wp-block-button__link):not(.bb-knop) { color: var(--bb-licht); }

/* Spectra-containers: de tussenruimte komt uit de container (gap), dus geen eigen marges op de kinderen */
.bb-pagina .wp-block-uagb-container > *,
.bb-pagina .uagb-container-inner-blocks-wrap > * { margin-block: 0 !important; }
.bb-sectie.uagb-is-root-container { padding-left: var(--bb-gutter); padding-right: var(--bb-gutter); }
.bb-sectie > .uagb-container-inner-blocks-wrap { width: 100%; }

/* ---------------------------------------------------------------- Knoppen */

.bb-pagina .wp-block-buttons { gap: 12px; margin: 1.4em 0 1.2em; }
.bb-pagina .wp-block-button__link,
.bb-knop {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	min-height: 48px;
	padding: 0.75em 1.35em;
	border-radius: var(--bb-radius-knop);
	border: 2px solid var(--klant-accent);
	background: var(--klant-accent);
	color: var(--bb-knop-tekst, var(--bb-licht));
	font-family: var(--bb-font-body);
	font-size: 1rem;
	font-weight: var(--bb-knop-gewicht);
	text-transform: var(--bb-knop-transform);
	line-height: 1.2;
	text-decoration: none;
	transition: filter .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
	cursor: pointer;
}
.bb-pagina .wp-block-button__link:hover, .bb-knop:hover { filter: brightness(0.92); color: var(--bb-knop-tekst, var(--bb-licht)); }
body .bb-pagina .wp-block-button.is-style-outline > .wp-block-button__link,
.bb-knop--outline {
	background: transparent;
	color: var(--bb-tekst);
	border-color: currentColor;
}
body .bb-pagina .wp-block-button.is-style-outline > .wp-block-button__link:hover, .bb-knop--outline:hover {
	filter: none; background: var(--bb-tekst); color: var(--bb-bg); border-color: var(--bb-tekst);
}
body .bb-pagina .bb-sectie--accent .wp-block-button.is-style-outline > .wp-block-button__link,
.bb-sectie--accent .bb-knop--outline { color: var(--bb-licht); }
body .bb-pagina .bb-sectie--accent .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.bb-sectie--accent .bb-knop--outline:hover { background: var(--bb-licht); color: var(--klant-primair); border-color: var(--bb-licht); }
.bb-knop .bb-icoon, .wp-block-button__link .bb-icoon { width: 20px; height: 20px; }
.bb-knop-whatsapp .wp-block-button__link { background: #1F7A4D; border-color: #1F7A4D; }

.bb-pijllink a, a.bb-pijllink {
	font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4em;
	border-bottom: 2px solid var(--klant-accent); padding-bottom: 2px;
}
.bb-pijllink a::after { content: "→"; transition: transform .15s ease; }
.bb-pijllink a:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------- Iconen, sterren, chips, vinkjes */

.bb-icoon { width: 22px; height: 22px; flex: none; vertical-align: middle; }
.bb-sterren { display: inline-flex; gap: 2px; vertical-align: -2px; }
.bb-ster { width: 17px; height: 17px; fill: var(--bb-rand); }
.bb-ster.is-vol { fill: #E2A400; }

.bb-chips, .bb-chips-lijst, .bb-keurmerken, .bb-vertrouwen, .bb-gegevensrij, .bb-locaties, .bb-linklijst, .bb-diensten, .bb-fotoraster {
	list-style: none; padding: 0; margin: 0;
}
.bb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0.5em 0 1.5em; }
.bb-chip, .bb-chips-lijst li {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px; border-radius: 999px;
	background: var(--bb-kaart-bg); border: 1px solid var(--bb-rand);
	color: var(--bb-tekst); font-weight: 600; font-size: 0.95rem; text-decoration: none;
}
.bb-chip .bb-icoon { width: 18px; height: 18px; color: var(--klant-accent); }
a.bb-chip:hover { border-color: var(--klant-accent); }
.bb-chips-lijst { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.2em; }

.bb-vinkjes, .bb-stappenlijst { list-style: none; padding: 0; margin: 0 0 1.2em; }
.bb-vinkjes li { position: relative; padding-left: 34px; margin-bottom: 0.55em; }
.bb-vinkjes li::before {
	content: ""; position: absolute; left: 0; top: 0.2em; width: 22px; height: 22px; border-radius: 50%;
	background: var(--klant-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.bb-vinkjes li::after {
	content: ""; position: absolute; left: 6px; top: calc(0.2em + 5px); width: 10px; height: 6px;
	border-left: 2.5px solid var(--bb-licht); border-bottom: 2.5px solid var(--bb-licht); transform: rotate(-45deg);
}
.bb-stappenlijst { counter-reset: stap; }
.bb-stappenlijst li { counter-increment: stap; position: relative; padding-left: 46px; margin-bottom: 0.9em; }
.bb-stappenlijst li::before {
	content: counter(stap); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%;
	display: grid; place-items: center; background: var(--klant-primair); color: var(--bb-primair-tekst, var(--bb-licht)); font-weight: 700; font-size: 0.95rem;
}

.bb-vertrouwen { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 1.4em; font-size: 0.95rem; color: var(--bb-muted); }
.bb-vertrouwen li { display: flex; align-items: center; gap: 8px; }
.bb-vertrouwen .bb-icoon { color: var(--klant-accent); width: 20px; height: 20px; }
.bb-vertrouwen strong { color: var(--bb-tekst); }

.bb-keurmerken { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; }
.bb-keurmerken li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.bb-keurmerken .bb-icoon { color: var(--klant-accent); width: 26px; height: 26px; }
.bb-keurmerkenbalk { background: var(--bb-kaart-bg); border-block: 1px solid var(--bb-rand); }

/* ---------------------------------------------------------------- Kaarten */

.bb-kaart, .wp-block-column.bb-kaart {
	background: var(--bb-kaart-bg); color: var(--bb-tekst);
	border: 1px solid var(--bb-rand); border-radius: var(--bb-radius);
	padding: clamp(20px, 3vw, 32px);
	box-shadow: var(--bb-schaduw);
}
.bb-kaart > :last-child { margin-bottom: 0; }
.bb-kaart--accent { border-color: var(--klant-accent); }
.bb-kaart__icoon { color: var(--klant-accent); margin-bottom: 0.4em !important; }
.bb-kaart__icoon .bb-icoon { width: 32px; height: 32px; }
/* Kaart als enige inhoud van een rasterkolom vult de hele hoogte */
.bb-raster > .bb-kol > .bb-kaart:only-child { flex: 1 1 auto; }

/* ---------------------------------------------------------------- Hero */

.bb-hero { background: var(--bb-tint-bg); color: var(--bb-tint-tekst); padding-top: clamp(32px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 88px); }
.bb-hero h1 { max-width: 16ch; }
.bb-hero__tekst { font-size: clamp(1.1rem, 1.6vw, 1.25rem); max-width: 52ch; }
.bb-hero__foto { position: relative; }
.bb-portret-figuur { margin: 0; position: relative; }
.bb-portret-figuur img, .bb-portret {
	display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
	border-radius: var(--bb-radius-foto); filter: var(--bb-foto-filter);
}
.bb-portret-figuur figcaption {
	position: absolute; left: 14px; bottom: 14px; right: 14px; width: fit-content;
	background: var(--bb-kaart-bg); color: var(--bb-tekst); border-radius: var(--bb-radius-klein);
	padding: 8px 14px; font-size: 0.9rem; font-weight: 600; box-shadow: var(--bb-schaduw);
}
.bb-hero__portret { max-height: 640px; }
@media (max-width: 1024px) {
	.bb-hero__foto .bb-portret { aspect-ratio: 5 / 4; max-height: 340px; object-position: 50% 25%; }
}

/* ---------------------------------------------------------------- Diensten */

.bb-diensten { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .bb-diensten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bb-diensten { grid-template-columns: repeat(5, 1fr); } }
.bb-dienst a {
	display: flex; flex-direction: column; gap: 8px; height: 100%;
	padding: 22px; border-radius: var(--bb-radius);
	background: var(--bb-kaart-bg); border: 1px solid var(--bb-rand); color: var(--bb-tekst);
	text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.bb-dienst a:hover { border-color: var(--klant-accent); transform: translateY(-2px); box-shadow: var(--bb-schaduw); }
.bb-dienst__icoon {
	width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--bb-radius-klein);
	background: color-mix(in srgb, var(--klant-accent) 12%, transparent); color: var(--klant-accent);
}
.bb-dienst__icoon .bb-icoon { width: 26px; height: 26px; }
.bb-dienst__naam { font-family: var(--bb-font-kop); font-weight: var(--bb-kop-gewicht); font-size: 1.15rem; line-height: 1.25; text-transform: var(--bb-kop-transform); }
.bb-dienst__zin { color: var(--bb-muted); font-size: 0.95rem; flex: 1; }
.bb-dienst__meer { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 6px; color: var(--bb-accent-tekst); }
.bb-dienst__meer .bb-icoon { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- Voor & na */

.bb-voorna { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-radius: var(--bb-radius-foto); overflow: hidden; }
.bb-voorna__laag { position: relative; margin: 0; }
.bb-voorna__laag img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: var(--bb-foto-filter); }
.bb-voorna__label {
	position: absolute; top: 12px; padding: 4px 12px; border-radius: 999px;
	background: rgb(20 18 16 / 72%); color: var(--bb-licht); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
	pointer-events: none;
}
.bb-voorna__laag--voor .bb-voorna__label { left: 12px; }
.bb-voorna__laag--na .bb-voorna__label { right: 12px; }

/* Met JS: schuifregelaar. De klasse bb-js staat al vóór de eerste weergave op <html>,
   zodat de indeling niet verspringt als bb.js de schuif toevoegt (geen CLS). */
.bb-js .bb-voorna { display: block; gap: 0; --pos: 50%; touch-action: pan-y; }
.bb-js .bb-voorna .bb-voorna__laag--na { position: relative; }
.bb-js .bb-voorna .bb-voorna__laag--voor { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.bb-voorna__lijn {
	position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 3px; margin-left: -1.5px;
	background: var(--bb-licht); pointer-events: none; box-shadow: 0 0 0 1px rgb(0 0 0 / 15%);
}
.bb-voorna__greep {
	position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
	background: var(--bb-licht); color: var(--bb-tekst); display: grid; place-items: center; box-shadow: 0 2px 10px rgb(0 0 0 / 30%);
}
.bb-voorna__greep::before { content: "‹ ›"; font-weight: 700; font-size: 1.05rem; letter-spacing: 2px; }
.bb-voorna__schuif {
	position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
	-webkit-appearance: none; appearance: none; background: transparent;
}
.bb-voorna__schuif:focus-visible ~ .bb-voorna__lijn .bb-voorna__greep { outline: 3px solid var(--klant-accent); outline-offset: 3px; }

.bb-vn-uitgelicht { display: grid; gap: 20px; }
.bb-vn-uitgelicht__groot { margin: 0; }
.bb-vn-uitgelicht__groot figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 12px; }
.bb-vn-uitgelicht__groot figcaption a { font-family: var(--bb-font-kop); font-weight: var(--bb-kop-gewicht); font-size: 1.2rem; text-decoration: none; }
.bb-vn-uitgelicht__groot figcaption span { color: var(--bb-muted); }

.bb-vn-raster { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .bb-vn-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bb-vn-raster { grid-template-columns: repeat(3, 1fr); } }
.bb-vn-kaart {
	background: var(--bb-kaart-bg); color: var(--bb-tekst); border: 1px solid var(--bb-rand);
	border-radius: var(--bb-radius); overflow: hidden; display: flex; flex-direction: column; position: relative;
}
.bb-vn-kaart[hidden] { display: none; }
.bb-vn-kaart__media .bb-voorna { border-radius: 0; }
.bb-vn-kaart__media > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: var(--bb-foto-filter); }
.bb-vn-kaart__tekst { padding: 16px 18px 20px; }
.bb-vn-kaart__meta { font-size: 0.85rem; color: var(--bb-muted); margin: 0 0 4px !important; }
.bb-vn-kaart__titel { font-size: 1.1rem !important; margin: 0 !important; }
.bb-vn-kaart__titel a { text-decoration: none; }
/* Kaart zonder slider: hele kaart klikbaar. Met slider blijft de slider zelf bedienbaar. */
.bb-vn-raster--klein .bb-vn-kaart__titel a::after { content: ""; position: absolute; inset: 0; }
.bb-vn-kaart:hover { border-color: var(--klant-accent); }
.bb-vn-kaart__tekst { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.bb-vn-kaart__vergroot {
	margin-top: 10px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
	font-size: 0.9rem; font-weight: 600; text-decoration: none; color: var(--bb-accent-tekst);
}
.bb-vn-kaart__vergroot .bb-icoon { width: 18px; height: 18px; }

/* Galerij-filter */
.bb-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px !important; }
.bb-filter__knop {
	min-height: 44px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
	background: var(--bb-kaart-bg); color: var(--bb-tekst); border: 1px solid var(--bb-rand);
	font: 600 0.95rem/1 var(--bb-font-body);
}
.bb-filter__knop[aria-pressed="true"] { background: var(--klant-primair); color: var(--bb-primair-tekst, var(--bb-licht)); border-color: var(--klant-primair); }

/* Voor & na-item */
.bb-kruimel { margin-bottom: 1em !important; font-size: 0.95rem; }
.bb-kruimel a { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.bb-kruimel .bb-icoon { width: 18px; height: 18px; }
.bb-gegevensrij { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--bb-muted); }
.bb-gegevensrij li { display: flex; align-items: center; gap: 6px; }
.bb-gegevensrij .bb-icoon { color: var(--klant-accent); width: 20px; height: 20px; }
.bb-vn-item .bb-sectie--hero-kort { padding-bottom: 32px; margin-bottom: 0; }
.bb-vn-item .bb-sectie--hero-kort + .bb-sectie--strak { padding-top: 0; background: linear-gradient(var(--bb-tint-bg) 120px, var(--bb-bg) 120px); }
.bb-vn-item__tekst { max-width: var(--bb-tekstbreedte); }
.bb-fotoraster { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 782px) { .bb-fotoraster { grid-template-columns: repeat(3, 1fr); } }
.bb-fotoraster a { display: block; border-radius: var(--bb-radius-klein); overflow: hidden; }
.bb-fotoraster img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s ease; filter: var(--bb-foto-filter); }
.bb-fotoraster a:hover img { transform: scale(1.03); }
.bb-vorige-volgende { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 32px; padding-bottom: 32px; }
.bb-vorige-volgende > a { display: flex; align-items: center; gap: 10px; text-decoration: none; max-width: 46%; }
.bb-vorige-volgende small { display: block; color: var(--bb-muted); }
.bb-volgende { margin-left: auto !important; text-align: right; }

/* ---------------------------------------------------------------- Reviews */

.bb-reviews { display: grid; gap: 18px; grid-template-columns: 1fr; margin-bottom: 1.4em !important; }
@media (min-width: 782px) { .bb-reviews { grid-template-columns: repeat(3, 1fr); } }
.bb-reviews--alle { align-items: start; }
@media (min-width: 782px) { .bb-reviews--alle { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bb-reviews--alle { grid-template-columns: repeat(3, 1fr); } }
.bb-review {
	margin: 0; background: var(--bb-kaart-bg); color: var(--bb-tekst);
	border: 1px solid var(--bb-rand); border-radius: var(--bb-radius); overflow: hidden;
	display: flex; flex-direction: column;
}
.bb-review__foto img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: var(--bb-foto-filter); }
.bb-review__tekst { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bb-review blockquote { margin: 0; padding: 0; border: 0; font-size: 1.02rem; flex: 1; quotes: none; }
.bb-review blockquote p { margin: 0 0 0.5em; }
.bb-review blockquote p:last-child { margin: 0; }
.bb-review figcaption { display: flex; flex-direction: column; font-size: 0.92rem; }
.bb-review figcaption span { color: var(--bb-muted); }
.bb-review--los { max-width: var(--bb-tekstbreedte); margin-top: 28px !important; border-left: 4px solid var(--klant-accent); }
.bb-score-groot { display: flex; align-items: center; gap: 18px; margin: 0.4em 0 0.6em; }
.bb-score-groot__getal { font-family: var(--bb-font-kop); font-weight: 700; font-size: clamp(3rem, 8vw, 4.5rem); line-height: 1; color: var(--klant-primair); }
.bb-score-groot__rest { display: flex; flex-direction: column; gap: 4px; }
.bb-score-groot .bb-ster { width: 24px; height: 24px; }
.bb-review-oproep { max-width: 760px; text-align: center; }
.bb-review-oproep .wp-block-buttons { justify-content: center; }

/* ---------------------------------------------------------------- Maak kennis, stappen, planning */

.bb-maak-kennis__foto .bb-portret { max-height: 560px; }
.bb-intro { font-size: 1.15rem; font-style: italic; }
.bb-stappen { counter-reset: stap; }
.bb-stap { background: var(--bb-kaart-bg); color: var(--bb-tekst); border-radius: var(--bb-radius); padding: 26px; border: 1px solid var(--bb-rand); }
.bb-stap > :last-child { margin-bottom: 0; }
.bb-stap__nr {
	width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px !important;
	background: var(--klant-accent); color: var(--bb-knop-tekst, var(--bb-licht)); font-weight: 700; font-family: var(--bb-font-kop); font-size: 1.15rem;
}

.bb-planningsblok { padding-top: 0; padding-bottom: var(--bb-sectie-ruimte); background: var(--bb-tint-bg); }
.bb-sectie--tint + .bb-planningsblok, .bb-sectie--tint + * > .bb-planningsblok { padding-top: 0; }
.bb-planningsblok__kaart {
	border-radius: var(--bb-radius); padding: clamp(24px, 4vw, 44px);
	background: var(--bb-kaart-bg); border: 2px dashed color-mix(in srgb, var(--klant-accent) 55%, transparent);
	text-align: center;
}
.bb-planningsblok__kaart h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.bb-planningsblok__kaart .wp-block-buttons { justify-content: center; margin-bottom: 0; }

.bb-werkgebied .bb-chips { margin-top: 1em; }

/* FAQ */
.bb-faq { max-width: 860px; margin-bottom: 1.2em !important; }
.bb-faq__vraag {
	background: var(--bb-kaart-bg); color: var(--bb-tekst); border: 1px solid var(--bb-rand); border-radius: var(--bb-radius-klein);
	margin: 0 0 10px !important; padding: 0;
}
.bb-faq__vraag summary {
	cursor: pointer; padding: 16px 52px 16px 20px; font-weight: 600; font-size: 1.05rem; list-style: none; position: relative; min-height: 48px;
}
.bb-faq__vraag summary::-webkit-details-marker { display: none; }
.bb-faq__vraag summary::after {
	content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
	width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
	background: color-mix(in srgb, var(--klant-accent) 14%, transparent); color: var(--klant-accent); font-size: 1.2rem; font-weight: 700;
}
.bb-faq__vraag[open] summary::after { content: "–"; }
.bb-faq__vraag > :not(summary) { padding: 0 20px; }
.bb-faq__vraag > p:last-child { padding-bottom: 18px; margin: 0; }

/* Slot-CTA */
.bb-slot-cta { text-align: center; }
.bb-slot-cta h2 { color: var(--bb-licht); }
.bb-slot-cta p { max-width: 56ch; margin-left: auto; margin-right: auto; opacity: 0.92; }
.bb-slot-cta .wp-block-buttons, .bb-slot-cta .bb-knoppen { justify-content: center; }
.bb-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.2em; }

/* ---------------------------------------------------------------- Over, team, werkgebied */

.bb-teamfoto img { border-radius: var(--bb-radius-foto); aspect-ratio: 4 / 3; object-fit: cover; filter: var(--bb-foto-filter); width: 100%; }
.bb-team__lid { text-align: center; }
.bb-team__foto img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; width: 160px; height: 160px; margin: 0 auto; display: block; filter: var(--bb-foto-filter); }
.bb-team__foto { margin-bottom: 14px; }

.bb-locaties { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.bb-locatie {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; height: 100%;
	padding: 14px 16px; border-radius: var(--bb-radius-klein);
	background: var(--bb-kaart-bg); border: 1px solid var(--bb-rand); color: var(--bb-tekst); text-decoration: none; font-weight: 600;
}
.bb-locatie .bb-icoon { color: var(--klant-accent); }
.bb-locatie small { flex-basis: 100%; font-weight: 400; color: var(--bb-accent-tekst); display: flex; align-items: center; gap: 4px; }
.bb-locatie small .bb-icoon { width: 16px; height: 16px; }
a.bb-locatie:hover { border-color: var(--klant-accent); }
.bb-werkgebied-kaart img, .bb-contact-kaart img { border-radius: var(--bb-radius); width: 100%; height: auto; }

/* ---------------------------------------------------------------- Offerte en contact */

.bb-whatsapp-blok {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px;
	padding: 18px 22px; margin-bottom: 26px !important; border-radius: var(--bb-radius);
	background: #E7F4EC; color: #12321F; border: 2px solid #1F7A4D;
}
.bb-whatsapp-blok > * { margin: 0 !important; }
.bb-whatsapp-blok__tekst { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.bb-whatsapp-blok__tekst .bb-icoon { color: #1F7A4D; width: 28px; height: 28px; }
.bb-offerte__zijkant { align-self: flex-start; }
@media (min-width: 782px) { .bb-offerte__zijkant { position: sticky; top: calc(var(--bb-header-hoogte) + 24px); } }
.bb-offerte__zijkant .bb-portret { aspect-ratio: 1; max-width: 180px; border-radius: 50%; }
.bb-offerte__planning { display: flex; gap: 8px; align-items: center; color: var(--bb-tekst); background: color-mix(in srgb, var(--klant-accent) 10%, transparent); padding: 10px 14px; border-radius: var(--bb-radius-klein); }
.bb-offerte__planning .bb-icoon { color: var(--klant-accent); }

/* WPForms (Lite) in de huisstijl */
.bb-pagina .wpforms-container { margin: 0 !important; }
.bb-pagina .wpforms-container .wpforms-field { padding: 0 0 18px !important; }
.bb-pagina .wpforms-container .wpforms-field-label { font-weight: 600 !important; font-size: 1rem !important; color: var(--bb-tekst) !important; margin-bottom: 6px !important; }
.bb-pagina .wpforms-container input[type="text"],
.bb-pagina .wpforms-container input[type="email"],
.bb-pagina .wpforms-container select,
.bb-pagina .wpforms-container textarea {
	max-width: 100% !important; width: 100% !important; min-height: 48px; font-size: 1rem !important;
	border: 1px solid var(--bb-rand) !important; border-radius: var(--bb-radius-klein) !important; background: var(--bb-kaart-bg) !important; color: var(--bb-tekst) !important;
	padding: 10px 14px !important;
}
.bb-pagina .wpforms-container input:focus, .bb-pagina .wpforms-container select:focus, .bb-pagina .wpforms-container textarea:focus {
	border-color: var(--klant-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--klant-accent) 25%, transparent) !important; outline: none;
}
/* Keuzelijsten (checkbox/AVG): WPForms laadt alleen de basisstijl, dus lijstopmaak hier zelf neutraliseren */
.bb-pagina .wpforms-container .wpforms-field ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.bb-pagina .wpforms-container .wpforms-field li { display: flex !important; align-items: flex-start; gap: 10px; margin: 0 0 6px !important; padding: 0 !important; list-style: none !important; }
.bb-pagina .wpforms-container .wpforms-field li::marker { content: none; }
.bb-pagina .wpforms-container input[type="checkbox"] {
	-webkit-appearance: auto !important; appearance: auto !important; opacity: 1 !important; position: static !important;
	width: 20px !important; height: 20px !important; margin: 3px 0 0 !important; flex: none; accent-color: var(--klant-accent);
}
.bb-pagina .wpforms-container .wpforms-field li label { margin: 0 !important; font-size: 1rem !important; color: var(--bb-tekst) !important; }
.bb-pagina .wpforms-container .wpforms-field-description { font-size: 0.88rem !important; color: var(--bb-muted) !important; margin-top: 6px !important; }
.bb-pagina .wpforms-container .wpforms-error, .bb-pagina .wpforms-container label.wpforms-error { color: #B42318 !important; font-size: 0.9rem !important; }
.bb-pagina .wpforms-container button[type="submit"] {
	background: var(--klant-accent) !important; color: var(--bb-knop-tekst, var(--bb-licht)) !important; border: 0 !important; border-radius: var(--bb-radius-knop) !important;
	min-height: 52px !important; padding: 0 28px !important; font: var(--bb-knop-gewicht) 1.05rem var(--bb-font-body) !important; text-transform: var(--bb-knop-transform);
}

/* ---------------------------------------------------------------- Bedankt, tekstpagina's */

.bb-bedankt .bb-portret { max-width: 320px; margin: 0 auto; }
.bb-tekstpagina h2 { font-size: 1.4rem; margin-top: 1.4em; }

/* ---------------------------------------------------------------- Planningsbalk */

.bb-planningsbalk {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	padding: 8px var(--bb-gutter); font-size: 0.92rem; line-height: 1.3; text-align: center;
	background: color-mix(in srgb, var(--klant-primair) 9%, var(--bb-bg)); color: var(--bb-tekst);
	border-bottom: 1px solid var(--bb-rand);
}
.bb-planningsbalk__icoon { color: var(--klant-accent); width: 20px; height: 20px; }

/* ---------------------------------------------------------------- Header */

#header:has(.bb-header) { position: sticky; top: 0; z-index: 50; }
.admin-bar #header:has(.bb-header) { top: var(--wp-admin--admin-bar--height, 32px); }
.bb-header { background: var(--bb-bg); border-bottom: 1px solid var(--bb-rand); } /* geen backdrop-filter: dat breekt het vaste mobiele menupaneel */
.bb-header__binnen {
	max-width: calc(var(--bb-breedte) + 2 * var(--bb-gutter)); margin: 0 auto; padding: 0 var(--bb-gutter);
	min-height: var(--bb-header-hoogte); display: flex; align-items: center; gap: 20px;
}
.bb-header__logo { margin-right: auto; }
@media (min-width: 1000px) {
	.bb-header__logo { margin-right: 0; }
	.bb-nav { flex: 1; }
	.bb-nav__lijst { justify-content: center; }
}
.bb-header__logo img { max-height: 48px; width: auto; }
.bb-logo-tekst { display: flex; flex-direction: column; text-decoration: none; color: var(--bb-tekst); line-height: 1.1; }
.bb-logo-tekst__naam { font-family: var(--bb-font-kop); font-weight: var(--bb-kop-gewicht); font-size: 1.22rem; text-transform: var(--bb-kop-transform); }
.bb-logo-tekst__sub { font-size: 0.8rem; color: var(--bb-muted); }
.bb-footer .bb-logo-tekst { color: var(--bb-licht); }
.bb-footer .bb-logo-tekst__sub { color: inherit; opacity: 0.75; }

.bb-header__menuknop {
	display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--bb-radius-klein);
	background: transparent; border: 1px solid var(--bb-rand); color: var(--bb-tekst); cursor: pointer; padding: 0;
}
.bb-header__menuknop .bb-dicht, .bb-header__menuknop[aria-expanded="true"] .bb-open { display: none; }
.bb-header__menuknop[aria-expanded="true"] .bb-dicht { display: block; }
.bb-header__cta { display: none; }

.bb-nav {
	position: fixed; inset: var(--bb-nav-top, 68px) 0 0 0; z-index: 60; overflow-y: auto;
	background: var(--bb-bg); padding: 16px var(--bb-gutter) 32px; display: none;
}
.bb-nav.is-open { display: block; }
.bb-nav__lijst, .bb-nav__lijst .sub-menu { list-style: none; margin: 0; padding: 0; }
.bb-nav__lijst > li { border-bottom: 1px solid var(--bb-rand); position: relative; display: flex; flex-wrap: wrap; align-items: center; }
.bb-nav__lijst a { display: block; padding: 14px 4px; color: var(--bb-tekst); text-decoration: none; font-weight: 600; font-size: 1.1rem; flex: 1; }
.bb-nav__lijst .current-menu-item > a, .bb-nav__lijst .current-menu-ancestor > a { color: var(--bb-accent-tekst); }
.bb-nav__sub-knop { width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 0; color: var(--bb-tekst); cursor: pointer; }
.bb-nav__sub-knop .bb-icoon { transition: transform .15s ease; }
.bb-nav__sub-knop[aria-expanded="true"] .bb-icoon { transform: rotate(90deg); }
.bb-nav__lijst .sub-menu { flex-basis: 100%; display: none; padding: 0 0 10px 12px; }
.bb-nav__lijst .sub-menu.is-open { display: block; }
.bb-nav__lijst .sub-menu a { font-weight: 400; font-size: 1rem; padding: 10px 4px; }
.bb-nav__cta-mobiel { margin-top: 20px; width: 100%; }

@media (min-width: 1000px) {
	.bb-header__menuknop, .bb-nav__cta-mobiel { display: none !important; }
	.bb-header__cta { display: inline-flex; }
	.bb-nav { position: static; display: block; padding: 0; background: none; overflow: visible; }
	.bb-nav__lijst { display: flex; gap: 4px; }
	.bb-nav__lijst > li { border: 0; flex-wrap: nowrap; }
	.bb-nav__lijst a { font-size: 1rem; padding: 10px 12px; border-radius: var(--bb-radius-klein); }
	.bb-nav__lijst > li > a:hover { background: color-mix(in srgb, var(--klant-primair) 7%, transparent); }
	.bb-nav__sub-knop { width: 24px; height: 40px; margin-left: -8px; }
	.bb-nav__sub-knop .bb-icoon { transform: rotate(90deg); width: 16px; height: 16px; }
	.bb-nav__lijst .sub-menu {
		position: absolute; top: 100%; left: 0; min-width: 260px; padding: 8px;
		background: var(--bb-kaart-bg); border: 1px solid var(--bb-rand); border-radius: var(--bb-radius); box-shadow: var(--bb-schaduw);
	}
	.bb-nav__lijst li:hover > .sub-menu, .bb-nav__lijst li:focus-within > .sub-menu, .bb-nav__lijst .sub-menu.is-open { display: block; }
	.bb-nav__lijst .sub-menu a { padding: 10px 12px; }
	.bb-nav__lijst .sub-menu a:hover { background: color-mix(in srgb, var(--klant-primair) 7%, transparent); }
}

/* ---------------------------------------------------------------- Mobiele balk */

.bb-mobiele-balk {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
	padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--bb-kaart-bg); border-top: 1px solid var(--bb-rand);
	box-shadow: 0 -4px 18px rgb(0 0 0 / 8%);
}
.bb-mobiele-balk__knop {
	display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: var(--bb-radius-knop);
	font-weight: 700; text-decoration: none; font-family: var(--bb-font-body); text-transform: var(--bb-knop-transform);
	border: 2px solid var(--klant-primair); color: var(--klant-primair); background: var(--bb-kaart-bg);
}
.bb-mobiele-balk__knop--primair { background: var(--klant-accent); border-color: var(--klant-accent); color: var(--bb-knop-tekst, var(--bb-licht)); }
.bb-mobiele-balk__knop--whatsapp { border-color: #1F7A4D; color: #1F7A4D; }
@media (min-width: 1000px) { .bb-mobiele-balk { display: none; } }

/* ---------------------------------------------------------------- Footer */

#footer:has(.bb-footer) { background: var(--klant-primair); }
.bb-footer { color: color-mix(in srgb, var(--bb-licht) 86%, transparent); font-size: 0.97rem; }
.bb-footer a { color: var(--bb-licht); }
.bb-footer__kolommen {
	max-width: var(--bb-breedte); margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--bb-gutter) 32px;
	display: grid; gap: 32px; grid-template-columns: 1fr;
}
@media (min-width: 700px) { .bb-footer__kolommen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .bb-footer__kolommen { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; } }
.bb-footer__kop { font-size: 1.1rem !important; color: var(--bb-licht); margin-bottom: 0.8em !important; }
.bb-footer__persoon { display: flex; gap: 14px; align-items: flex-start; margin: 16px 0; }
.bb-footer__portret { width: 64px !important; height: 64px !important; aspect-ratio: 1 !important; border-radius: 50% !important; object-fit: cover; flex: none; border: 2px solid color-mix(in srgb, var(--bb-licht) 40%, transparent); }
.bb-footer__persoon p { margin: 0; }
.bb-footer__score { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bb-footer .bb-linklijst li { margin-bottom: 6px; }
.bb-footer .bb-linklijst a, .bb-footer .bb-pijllink { text-decoration: none; }
.bb-footer .bb-linklijst a:hover { text-decoration: underline; }
.bb-footer .bb-pijllink { border-color: var(--klant-accent); }
.bb-footer .bb-pijllink .bb-icoon { width: 18px; height: 18px; }
.bb-footer address { font-style: normal; line-height: 1.9; }
.bb-footer address .bb-icoon { width: 18px; height: 18px; margin-right: 6px; opacity: 0.85; }
.bb-footer__klein { font-size: 0.88rem; opacity: 0.85; margin-top: 10px; }
.bb-footer__onder {
	max-width: var(--bb-breedte); margin: 0 auto; padding: 18px var(--bb-gutter) 24px; border-top: 1px solid color-mix(in srgb, var(--bb-licht) 18%, transparent);
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-size: 0.88rem;
}
.bb-footer__onder p { margin: 0; }
.bb-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.bb-footer__links a { text-decoration: none; }
.bb-footer__links a:hover { text-decoration: underline; }
.bb-credit { margin-left: auto; color: color-mix(in srgb, var(--bb-licht) 62%, transparent) !important; text-decoration: none; font-size: 0.82rem; }
.bb-credit:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Lightbox */

.bb-lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; }
.bb-lightbox::backdrop { background: rgb(14 13 12 / 92%); }
.bb-lightbox[open] { display: grid; place-items: center; }
.bb-lightbox__figuur { margin: 0; max-width: min(1200px, 92vw); text-align: center; color: var(--bb-licht); }
.bb-lightbox__figuur img { max-width: 100%; max-height: 80vh; width: auto; height: auto; border-radius: 6px; }
.bb-lightbox__figuur figcaption { margin-top: 10px; font-size: 0.95rem; }
.bb-lightbox__knop {
	position: fixed; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
	display: grid; place-items: center; background: rgb(255 255 255 / 14%); color: var(--bb-licht);
}
.bb-lightbox__knop:hover { background: rgb(255 255 255 / 26%); }
.bb-lightbox__knop:focus-visible { outline: 3px solid var(--bb-licht); outline-offset: 2px; }
.bb-lightbox__sluit { top: 16px; right: 16px; }
.bb-lightbox__vorige { left: 12px; top: 50%; transform: translateY(-50%); }
.bb-lightbox__volgende { right: 12px; top: 50%; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}
.bb-vn-uitgelicht__groot .bb-voorna__laag img { aspect-ratio: 16 / 9; }

/* Smalle tekstblokken links uitlijnen met de koppen (niet centreren) */
.bb-sectie > .bb-vn-item__tekst,
.bb-sectie > .bb-review--los {
	margin-left: max(0px, calc((100% - var(--bb-breedte)) / 2)) !important;
	margin-right: auto !important;
}
.bb-verhaal p, .bb-tekstpagina .uagb-container-inner-blocks-wrap > * { max-width: var(--bb-tekstbreedte); }
.bb-offerte__planning { display: block; position: relative; padding-left: 44px !important; }
.bb-offerte__planning .bb-icoon { position: absolute; left: 14px; top: 11px; }

/* Mobiel: offerteknop boven de vouw houden */
@media (max-width: 781px) {
	.bb-hero { padding-top: 20px; }
	.bb-hero__foto .bb-portret-figuur { max-width: none !important; transform: none !important; }
	.bb-hero__foto .bb-portret { aspect-ratio: 16 / 9 !important; max-height: 190px !important; object-position: 50% 30%; }
	.bb-hero h1 { font-size: 2rem; }
	.bb-hero__tekst { font-size: 1.05rem; }
	.bb-planningsbalk { font-size: 0.85rem; padding-top: 6px; padding-bottom: 6px; }
}

/* Focusring op donkere vlakken: licht, zodat hij minstens 3:1 contrast haalt */
:is(.bb-footer, .bb-sectie--accent) :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible,
.bb-stijl-robuust :is(.bb-hero, .bb-sectie--tint, .bb-sectie--hero-kort) :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline-color: var(--bb-licht); }

/* Introzin bij aanspreekvorm Wij: citaat van de eigenaar */
.bb-intro-citaat { quotes: '“' '”'; font-style: italic; }
.bb-intro-naam { font-style: normal; font-weight: 600; white-space: nowrap; }

/* Galerij: ook de tekst van een kaart opent het item (de slider blijft bedienbaar; 'Bekijk groot' blijft klikbaar) */
.bb-vn-raster--galerij .bb-vn-kaart__tekst { position: relative; }
.bb-vn-raster--galerij .bb-vn-kaart__titel a::after { content: ''; position: absolute; inset: 0; }
.bb-vn-kaart__vergroot { position: relative; z-index: 1; }

/* Chips/filters/labels: afronding per stijl (token) */
.bb-chip, .bb-chips-lijst li, .bb-filter__knop, .bb-voorna__label { border-radius: var(--bb-radius-chip, 999px); }

/* Mobiel menu open: de vaste mobiele balk mag het menupaneel niet afdekken */
html.bb-menu-open .bb-mobiele-balk { display: none; }

/* Spectra rekt kinderen standaard op (align-items: stretch): kleine elementen op hun eigen breedte houden */
.bb-pagina :is(.bb-stap__nr, .bb-kaart__icoon, .bb-eyebrow, .bb-pijllink, .bb-chips-lijst, .bb-offerte__portret, .bb-team__foto) { align-self: flex-start; }
.bb-pagina .bb-slot-cta .uagb-container-inner-blocks-wrap > *, .bb-pagina .bb-team__lid > *, .bb-pagina .bb-planningsblok__kaart > *, .bb-pagina .bb-review-oproep > * { align-self: center; }
.bb-team__foto img { margin-inline: auto; }

/* Spectra zet eigen rand/schaduw op containers: kaarten houden de themastijl */
.bb-pagina .wp-block-uagb-container:is(.bb-kaart, .bb-stap) { border: 1px solid var(--bb-rand) !important; box-shadow: var(--bb-schaduw) !important; border-radius: var(--bb-radius) !important; }
.bb-pagina .wp-block-uagb-container.bb-kaart--accent { border-color: var(--klant-accent) !important; }
.bb-stijl-modern .bb-pagina .wp-block-uagb-container.bb-stap { border-color: transparent !important; }
.bb-stijl-robuust .bb-pagina .wp-block-uagb-container.bb-stap { border-top: 4px solid var(--klant-accent) !important; }
.bb-pagina .wp-block-uagb-container:not(.bb-kaart):not(.bb-stap):not(.bb-planningsblok__kaart):not(.bb-whatsapp-blok) { border: 0; }