/* ==========================================================================
   Boerboom Gevelrenovatie & Bestrating, Duiven
   Palet uit de bus en het logo: lak-zwart, BB-rood, wit en een licht voeg-grijs.
   Koppen in Montserrat (het woordmerk op de bus), body in Source Sans 3.
   Signatuur: de steenstrip, een stukje metselverband uit het logo.
   ========================================================================== */

:root {
	--kleur-lak: #1b1a1a;
	--kleur-bb: #d8452f;
	--kleur-bb-donker: #b7371f;
	--kleur-wit: #ffffff;
	--kleur-voeg: #f3f2ef;
	--kleur-lijn: #e4e2dd;
	--kleur-tekst: #1f1e1e;
	--kleur-grijs: #5d5a57;
	--kleur-ster: #f4b400;
	--kleur-wa: #25d366;

	--font-kop: "Montserrat", "Arial Black", Arial, sans-serif;
	--font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;

	--radius: 8px;
	--schaduw: 0 10px 30px rgba(27, 26, 26, 0.08);
	--omhulsel: 1200px;
	--sectie: clamp(3.5rem, 7vw, 5.5rem);
}

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

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--kleur-tekst);
	background: var(--kleur-wit);
	-webkit-font-smoothing: antialiased;
}

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

img {
	height: auto;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-kop);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 0.6em;
	color: var(--kleur-lak);
	overflow-wrap: anywhere;
}

h3 {
	font-size: 1.2rem;
	font-weight: 700;
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--kleur-bb-donker);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--kleur-bb);
}

ul[role="list"],
ol[role="list"] {
	list-style: none;
	margin: 0;
	padding: 0;
}

b,
strong {
	font-weight: 700;
}

:focus-visible {
	outline: 3px solid var(--kleur-bb);
	outline-offset: 3px;
}

.omhulsel {
	width: min(100% - 2.5rem, var(--omhulsel));
	margin-inline: auto;
}

.overslaan {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--kleur-lak);
	color: var(--kleur-wit);
	padding: 0.75rem 1rem;
	z-index: 100;
}

.overslaan:focus {
	left: 1rem;
	top: 1rem;
}

.rood {
	color: var(--kleur-bb);
}

.verborgen {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* --------------------------------------------------------------------------
   Signatuur: de steenstrip
   -------------------------------------------------------------------------- */

.steenstrip {
	color: var(--kleur-bb);
	width: 66px;
	height: 11px;
	margin-bottom: 0.9rem;
}

.steenstrip--rood {
	color: var(--kleur-bb);
}

.kicker {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.1rem;
	font-family: var(--font-kop);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kleur-grijs);
}

.kicker .steenstrip {
	margin: 0;
	width: 44px;
	height: 8px;
}

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

.knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8rem 1.35rem;
	border-radius: 6px;
	border: 2px solid transparent;
	font-family: var(--font-kop);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.knop:hover {
	transform: translateY(-1px);
}

.knop--groot {
	padding: 1rem 1.6rem;
	font-size: 1.05rem;
}

.knop--hoofd {
	background: var(--kleur-bb);
	border-color: var(--kleur-bb);
	color: var(--kleur-wit);
}

.knop--hoofd:hover {
	background: var(--kleur-bb-donker);
	border-color: var(--kleur-bb-donker);
	color: var(--kleur-wit);
}

.knop--lijn {
	background: transparent;
	border-color: var(--kleur-lak);
	color: var(--kleur-lak);
}

.knop--lijn:hover {
	background: var(--kleur-lak);
	color: var(--kleur-wit);
}

.knop--zwart {
	background: var(--kleur-lak);
	border-color: var(--kleur-lak);
	color: var(--kleur-wit);
}

.knop--zwart:hover {
	background: #000;
	color: var(--kleur-wit);
}

.knop--wit {
	background: var(--kleur-wit);
	border-color: var(--kleur-wit);
	color: var(--kleur-lak);
}

.knop--wit:hover {
	background: var(--kleur-voeg);
	border-color: var(--kleur-voeg);
	color: var(--kleur-lak);
}

.tekstlink {
	font-family: var(--font-kop);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--kleur-lak);
	text-decoration: none;
	border-bottom: 2px solid var(--kleur-bb);
	padding-bottom: 2px;
}

.tekstlink:hover {
	color: var(--kleur-bb);
}

/* --------------------------------------------------------------------------
   Sterren en vinkjes
   -------------------------------------------------------------------------- */

.sterren {
	display: inline-flex;
	gap: 1px;
	color: var(--kleur-ster);
	vertical-align: middle;
}

.sterren svg {
	width: 16px;
	height: 16px;
}

.sterren--groot svg {
	width: 22px;
	height: 22px;
}

.vinklijst li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.55rem;
}

.vinklijst .vink {
	position: absolute;
	left: 0;
	top: 0.3em;
	color: var(--kleur-bb);
}

.vinklijst--twee {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.5rem;
}

/* --------------------------------------------------------------------------
   Topbalk en kop
   -------------------------------------------------------------------------- */

.topbalk {
	background: var(--kleur-lak);
	color: #cfcac6;
	font-size: 0.875rem;
}

.topbalk__binnen {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: 2.4rem;
}

.topbalk__gebied {
	margin: 0;
}

.topbalk__rechts {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.topbalk a {
	color: var(--kleur-wit);
	text-decoration: none;
}

.topbalk a:hover {
	color: var(--kleur-bb);
}

.topbalk__score {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.topbalk__score b {
	color: var(--kleur-wit);
}

.kop {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--kleur-wit);
	border-bottom: 1px solid var(--kleur-lijn);
}

.kop__binnen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 5rem;
}

.merk {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	text-decoration: none;
	color: var(--kleur-lak);
	flex-shrink: 0;
}

.merk__bb {
	width: 44px;
	height: auto;
}

.merk__eigen {
	max-height: 56px;
	width: auto;
}

.merk__tekst {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.merk__naam {
	font-family: var(--font-kop);
	font-weight: 800;
	font-size: 1.35rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.merk__sub {
	font-size: 0.78rem;
	color: var(--kleur-grijs);
	margin-top: 0.3rem;
	letter-spacing: 0.02em;
}

.hoofdnav .menu {
	display: flex;
	gap: 0.15rem;
}

.hoofdnav .menu a {
	display: block;
	padding: 0.55rem 0.7rem;
	font-family: var(--font-kop);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--kleur-lak);
	text-decoration: none;
	border-radius: 4px;
	white-space: nowrap;
}

.hoofdnav .menu a:hover {
	background: var(--kleur-voeg);
	color: var(--kleur-lak);
}

.hoofdnav .menu .current-menu-item > a,
.hoofdnav .menu .current_page_item > a,
.hoofdnav .menu a.actief {
	color: var(--kleur-bb);
}

.hoofdnav__extra {
	display: none;
}

.kop__acties {
	display: flex;
	gap: 0.6rem;
	flex-shrink: 0;
}

/* Op telefoon staan de belknop en de menuknop naast elkaar in de kop.
   De kop is sticky, dus bellen is overal op de site één tik. */
.kop__mobiel {
	display: none;
	align-items: center;
	gap: 0.5rem;
}

.belknop {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: var(--kleur-bb);
	color: var(--kleur-wit);
	border-radius: 6px;
	padding: 0.6rem 0.9rem;
	font-family: var(--font-kop);
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.belknop:hover,
.belknop:active {
	background: var(--kleur-bb-donker);
	color: var(--kleur-wit);
}

.belknop svg {
	width: 18px;
	height: 18px;
}

.menuknop {
	display: none;
	align-items: center;
	gap: 0.6rem;
	background: var(--kleur-lak);
	color: var(--kleur-wit);
	border: 0;
	border-radius: 6px;
	padding: 0.6rem 0.9rem;
	font-family: var(--font-kop);
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.menuknop__streep {
	position: relative;
	width: 20px;
	height: 2px;
	background: currentColor;
}

.menuknop__streep::before,
.menuknop__streep::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease;
}

.menuknop__streep::before {
	top: -6px;
}

.menuknop__streep::after {
	top: 6px;
}

.menuknop[aria-expanded="true"] .menuknop__streep {
	background: transparent;
}

.menuknop[aria-expanded="true"] .menuknop__streep::before {
	transform: translateY(6px) rotate(45deg);
}

.menuknop[aria-expanded="true"] .menuknop__streep::after {
	transform: translateY(-6px) rotate(-45deg);
}

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

.hero {
	padding: clamp(2.5rem, 5vw, 4.5rem) 0 var(--sectie);
	background:
		linear-gradient(90deg, var(--kleur-wit) 0 50%, var(--kleur-voeg) 50% 100%);
}

.hero__binnen {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}

.hero__kop {
	font-size: clamp(2.1rem, 4.4vw, 3.5rem);
	line-height: 1.06;
	margin-bottom: 1.1rem;
}

.hero__kop .rood {
	display: block;
}

.hero__intro {
	font-size: 1.15rem;
	color: var(--kleur-grijs);
	max-width: 34rem;
	margin-bottom: 1.6rem;
}

.hero__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.8rem;
}

.hero__feiten {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
	font-size: 0.95rem;
	color: var(--kleur-grijs);
}

.hero__feiten li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.hero__feiten b {
	color: var(--kleur-lak);
	margin-right: 0.15rem;
}

.hero__feiten .vink {
	color: var(--kleur-bb);
}

.hero__beeld .werkbeeld {
	aspect-ratio: 4 / 5;
	box-shadow: var(--schaduw);
}

/* De foto van Jeroen bij de bus staat liggend in de hero, met het BB-logo
   en de belettering van de bus volledig in beeld. */
.hero__foto {
	margin: 0;
}

.hero__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--schaduw);
}

/* Werkbeeld: foto met bouwbord-label ---------------------------------- */

/* De foto vult het kader altijd, ook als de verhouding van de foto niet
   gelijk is aan die van het kader. Het kader krijgt zijn hoogte van
   aspect-ratio; de foto ligt er absoluut in en snijdt bij met object-fit. */
.werkbeeld {
	position: relative;
	aspect-ratio: 4 / 5;
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--kleur-voeg);
}

.werkbeeld img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bord {
	position: absolute;
	left: 0;
	bottom: 1.25rem;
	background: var(--kleur-lak);
	color: var(--kleur-wit);
	padding: 0.7rem 1rem 0.75rem 1.1rem;
	border-radius: 0 6px 6px 0;
	display: grid;
	gap: 0.1rem;
	max-width: 85%;
}

.bord .steenstrip {
	width: 40px;
	height: 7px;
	margin-bottom: 0.35rem;
}

.bord__werk {
	font-family: var(--font-kop);
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.25;
}

.bord__plaats {
	font-size: 0.82rem;
	color: #cfcac6;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Busstrook: de belettering van de Vivaro
   -------------------------------------------------------------------------- */

.busstrook {
	background: var(--kleur-lak);
	color: var(--kleur-wit);
	padding: 1.1rem 0;
}

.busstrook__lijst {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem 0;
	font-family: var(--font-kop);
	font-weight: 700;
	font-size: clamp(0.85rem, 1.4vw, 1.05rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.busstrook__lijst li {
	display: inline-flex;
	align-items: center;
}

.busstrook__lijst li::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--kleur-bb);
	margin: 0 1.4rem 0 1.4rem;
}

/* --------------------------------------------------------------------------
   Secties, algemeen
   -------------------------------------------------------------------------- */

.sectiekop {
	font-size: clamp(1.65rem, 3vw, 2.35rem);
	margin-bottom: 0.5rem;
}

.sectie-intro {
	color: var(--kleur-grijs);
	font-size: 1.1rem;
	max-width: 36rem;
	margin: 0;
}

.sectiekop-rij {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 1.5rem 3rem;
	align-items: end;
	margin-bottom: 2.25rem;
}

.sectiekop-rij .sectiekop {
	margin-bottom: 0;
}

.sectie-voet {
	margin: 2.25rem 0 0;
	text-align: center;
}

.panelen-blok,
.stappen-blok,
.werk-blok,
.diensten-blok,
.over-blok,
.tekstbeeld,
.contact-blok,
.kaart-blok,
.feiten-blok,
.tekstpagina {
	padding: var(--sectie) 0;
}

.panelen-blok,
.werk-blok--licht,
.reviews-blok,
.tekstbeeld--licht {
	background: var(--kleur-voeg);
}

/* --------------------------------------------------------------------------
   Panelen: Gevel en Bestrating
   -------------------------------------------------------------------------- */

.panelen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.75rem;
}

.paneel {
	background: var(--kleur-wit);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--schaduw);
	display: flex;
	flex-direction: column;
}

.paneel__beeld {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.paneel__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.paneel__tekst {
	padding: 1.75rem 1.9rem 2rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.paneel__kop {
	font-size: 1.6rem;
	font-weight: 800;
	margin-bottom: 0.9rem;
	padding-bottom: 0.7rem;
	border-bottom: 3px solid var(--kleur-bb);
	display: inline-block;
	align-self: flex-start;
}

.paneel__links {
	margin-top: auto;
	padding-top: 1.25rem;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Stappen
   -------------------------------------------------------------------------- */

.stappen {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.25rem;
	counter-reset: stap;
}

.stap__beeld {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 0.9rem;
	background: var(--kleur-voeg);
}

.stap__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stap__nummer {
	position: absolute;
	left: 0;
	top: 0;
	width: 2.4rem;
	height: 2.4rem;
	display: grid;
	place-items: center;
	background: var(--kleur-bb);
	color: var(--kleur-wit);
	font-family: var(--font-kop);
	font-weight: 800;
	font-size: 1.05rem;
	border-radius: 0 0 6px 0;
}

.stap__kop {
	font-size: 1.1rem;
	margin-bottom: 0.3rem;
}

.stap p {
	font-size: 0.95rem;
	color: var(--kleur-grijs);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Projecten
   -------------------------------------------------------------------------- */

.projecten {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.project .werkbeeld {
	aspect-ratio: 4 / 5;
}

.project__tekst {
	margin: 0.9rem 0 0;
	font-size: 0.97rem;
	color: var(--kleur-grijs);
}

/* --------------------------------------------------------------------------
   Voor en na: paren van twee vierkante foto's met de borden "Voor" en "Na".
   Op desktop staan de paren naast elkaar met extra ruimte ertussen, zodat
   duidelijk is wat bij elkaar hoort. Een enkel paar wordt niet breder dan 60rem.
   -------------------------------------------------------------------------- */
.voorna {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
	gap: 2.5rem;
}

.voorna__paar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.voorna__paar:only-child {
	max-width: 60rem;
	margin-inline: auto;
	width: 100%;
}

.voorna .werkbeeld {
	aspect-ratio: 1 / 1;
}

@media (max-width: 760px) {
	.voorna {
		gap: 1.5rem;
	}

	.voorna__paar {
		gap: 0.5rem;
	}

	.voorna .bord {
		bottom: 0.6rem;
		padding: 0.45rem 0.6rem 0.5rem 0.65rem;
	}

	.voorna .bord__werk {
		font-size: 0.8rem;
	}
}

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

.reviews-blok {
	padding: var(--sectie) 0;
}

.reviews-blok__kop {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2.5rem;
	align-items: center;
	margin-bottom: 2.25rem;
}

.reviews-blok__score {
	display: grid;
	justify-items: center;
	gap: 0.3rem;
	background: var(--kleur-wit);
	border-radius: var(--radius);
	padding: 1.4rem 1.8rem;
	box-shadow: var(--schaduw);
	min-width: 12rem;
	text-align: center;
}

.reviews-blok__cijfer {
	font-family: var(--font-kop);
	font-weight: 800;
	font-size: 3rem;
	line-height: 1;
	color: var(--kleur-lak);
}

.reviews-blok__aantal {
	font-size: 0.9rem;
	color: var(--kleur-grijs);
}

.reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.review {
	background: var(--kleur-wit);
	border-radius: var(--radius);
	padding: 1.6rem 1.7rem 1.5rem;
	box-shadow: var(--schaduw);
	display: flex;
	flex-direction: column;
	border-top: 4px solid var(--kleur-bb);
}

.review__tekst {
	margin: 0.9rem 0 1.2rem;
	flex: 1;
}

.review__voet {
	display: grid;
	gap: 0.1rem;
	font-size: 0.9rem;
	color: var(--kleur-grijs);
	padding-top: 0.9rem;
	border-top: 1px solid var(--kleur-lijn);
}

.review__voet b {
	color: var(--kleur-lak);
	font-family: var(--font-kop);
	font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Over Jeroen (home) en tekst-beeldblokken
   -------------------------------------------------------------------------- */

.over-blok__binnen,
.tekstbeeld__binnen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

/* Alleen losse foto's, niet de foto binnen een werkbeeld-figuur: die vult
   zijn eigen kader en mag hier geen height:auto terugkrijgen. */
.over-blok__beeld > img,
.tekstbeeld__beeld > img {
	border-radius: var(--radius);
	width: 100%;
	height: auto;
}

.tekstbeeld__binnen {
	grid-template-columns: 1.1fr 0.9fr;
}

.tekstbeeld--omgekeerd .tekstbeeld__binnen {
	grid-template-columns: 0.9fr 1.1fr;
}

.tekstbeeld--omgekeerd .tekstbeeld__beeld {
	order: -1;
}

.tekstbeeld__beeld .werkbeeld {
	aspect-ratio: 4 / 5;
	box-shadow: var(--schaduw);
}

.tekstbeeld__tekst h3 {
	margin-top: 1.4rem;
}

.fotocredit {
	margin: 0.6rem 0 0;
	font-size: 0.8rem;
	color: var(--kleur-grijs);
}

.stappenlijst {
	padding-left: 1.4rem;
	margin: 0;
}

.stappenlijst li {
	margin-bottom: 0.7rem;
	padding-left: 0.3rem;
}

.stappenlijst li::marker {
	font-family: var(--font-kop);
	font-weight: 800;
	color: var(--kleur-bb);
}

/* --------------------------------------------------------------------------
   Zakelijk-strook (home) en feiten (zakelijk)
   -------------------------------------------------------------------------- */

.zakelijk-strook {
	background: var(--kleur-voeg);
	border-top: 1px solid var(--kleur-lijn);
	border-bottom: 1px solid var(--kleur-lijn);
	padding: 2.5rem 0;
}

.zakelijk-strook__binnen {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2rem;
	align-items: center;
	border-left: 6px solid var(--kleur-bb);
	padding-left: 1.75rem;
}

.zakelijk-strook__kop {
	font-size: 1.45rem;
	margin-bottom: 0.35rem;
}

.zakelijk-strook p {
	margin: 0;
	color: var(--kleur-grijs);
	max-width: 44rem;
}

.zakelijk-strook .knop--wit {
	border-color: var(--kleur-lak);
}

.feiten-blok {
	background: var(--kleur-lak);
	color: var(--kleur-wit);
}

.feiten {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

.feit {
	border-top: 4px solid var(--kleur-bb);
	padding-top: 1rem;
}

.feit b {
	display: block;
	font-family: var(--font-kop);
	font-weight: 800;
	font-size: 1.25rem;
	margin-bottom: 0.4rem;
}

.feit p {
	margin: 0;
	color: #cfcac6;
}

/* --------------------------------------------------------------------------
   Diensten (4 kaarten met foto)
   -------------------------------------------------------------------------- */

.diensten {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.dienst img {
	aspect-ratio: 4 / 3;
	width: 100%;
	object-fit: cover;
	border-radius: var(--radius);
	margin-bottom: 1rem;
}

.dienst h3 {
	font-size: 1.1rem;
	margin-bottom: 0.35rem;
}

.dienst p {
	margin: 0;
	font-size: 0.97rem;
	color: var(--kleur-grijs);
}

/* --------------------------------------------------------------------------
   Contactband (rood)
   -------------------------------------------------------------------------- */

.cta {
	background: var(--kleur-bb);
	color: var(--kleur-wit);
	padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.cta__binnen {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 2rem;
	align-items: center;
}

.cta__kop {
	color: var(--kleur-wit);
	font-size: clamp(1.5rem, 2.8vw, 2.1rem);
	margin-bottom: 0.4rem;
}

.cta__tekst p {
	margin: 0;
	color: #fbe4df;
	max-width: 36rem;
}

.cta__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Voet
   -------------------------------------------------------------------------- */

.voet {
	background: var(--kleur-lak);
	color: #cfcac6;
	font-size: 0.95rem;
}

.voet a {
	color: var(--kleur-wit);
	text-decoration: none;
}

.voet a:hover {
	color: var(--kleur-bb);
}

.voet__binnen {
	display: grid;
	grid-template-columns: 1.4fr 0.8fr 1fr 1fr;
	gap: 2.5rem;
	padding: 3.5rem 0 3rem;
}

.voet__merk .merk__bb {
	width: 48px;
	margin-bottom: 0.9rem;
}

.voet__naam {
	font-family: var(--font-kop);
	font-weight: 800;
	font-size: 1.3rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kleur-wit);
	line-height: 1.1;
	margin-bottom: 0.9rem;
}

.voet__naam span {
	display: block;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	text-transform: none;
	color: #cfcac6;
	margin-top: 0.35rem;
}

.voet__socials {
	display: flex;
	gap: 1rem;
}

.voet__socials a {
	border-bottom: 1px solid #4a4744;
}

.voet__kop {
	color: var(--kleur-wit);
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.voet__lijst li {
	margin-bottom: 0.4rem;
}

.voet__adres {
	font-style: normal;
	margin-bottom: 0.9rem;
}

.voet__tijden {
	margin: 0.9rem 0 0;
}

.voet__onder {
	border-top: 1px solid #333030;
	padding: 1.1rem 0;
	font-size: 0.85rem;
}

.voet__onder-binnen {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.voet__onder p {
	margin: 0;
}

/* WhatsApp-rondje ------------------------------------------------------- */

.wa-rondje {
	position: fixed;
	right: 1.1rem;
	bottom: 1.1rem;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--kleur-wa);
	color: var(--kleur-wit);
	display: grid;
	place-items: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	z-index: 40;
	transition: transform 0.15s ease;
}

.wa-rondje:hover {
	transform: scale(1.06);
	color: var(--kleur-wit);
}

.wa-rondje svg {
	width: 30px;
	height: 30px;
}

/* --------------------------------------------------------------------------
   Onderliggende pagina's: zwarte titelband
   -------------------------------------------------------------------------- */

.paginakop {
	background: var(--kleur-lak);
	color: var(--kleur-wit);
	padding: 2.5rem 0 3rem;
}

.kruimel {
	font-size: 0.85rem;
	color: #9d9894;
	margin-bottom: 1.4rem;
	display: flex;
	gap: 0.5rem;
}

.kruimel a {
	color: #cfcac6;
	text-decoration: none;
}

.kruimel a:hover {
	color: var(--kleur-wit);
}

.paginakop__titel {
	color: var(--kleur-wit);
	font-size: clamp(1.9rem, 4vw, 3rem);
	max-width: 20ch;
	margin-bottom: 0.8rem;
}

.paginakop__intro {
	color: #cfcac6;
	font-size: 1.15rem;
	max-width: 40rem;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-blok__binnen {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.contactlijst li {
	display: grid;
	gap: 0.15rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--kleur-lijn);
}

.contactlijst li:first-child {
	padding-top: 0.5rem;
}

.contactlijst__label {
	font-family: var(--font-kop);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kleur-grijs);
}

.contactlijst__groot {
	font-family: var(--font-kop);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--kleur-lak);
	text-decoration: none;
}

.contactlijst__groot:hover {
	color: var(--kleur-bb);
}

.contactlijst__mail {
	font-size: 1.05rem;
	overflow-wrap: anywhere;
}

.contactlijst__sub {
	font-size: 0.92rem;
	color: var(--kleur-grijs);
}

.contactlijst__adres {
	font-style: normal;
}

.contact-blok__beeld {
	margin-top: 1.75rem;
}

.contact-blok__beeld img {
	border-radius: var(--radius);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.contact-blok__formulier {
	background: var(--kleur-voeg);
	border-radius: var(--radius);
	padding: 2rem 2.1rem 2.25rem;
}

.contact-blok__formulier .sectie-intro {
	margin-bottom: 1.4rem;
}

.kaart-blok {
	padding-top: 0;
}

.kaart iframe {
	border-radius: var(--radius);
	display: block;
	filter: grayscale(0.25);
}

/* Zonder toestemming zet Complianz de kaart in een eigen blok met een
   plaatshouder. Dat blok rekt het op naar de verhouding van zijn plaatje
   (1280x920); hier houdt het gewoon de hoogte van de kaart, en de knop krijgt
   de huisstijl. */
.kaart .cmplz-placeholder-parent {
	position: relative;
	height: 380px;
	overflow: hidden;
	border-radius: var(--radius);
	background-size: cover;
	background-position: center;
}

.kaart .cmplz-blocked-content-notice {
	width: calc(100% - 2rem);
	max-width: 22rem;
	padding: 0.85rem 1.25rem;
	border-radius: var(--radius);
	background-color: var(--kleur-lak);
	color: var(--kleur-wit);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	box-shadow: var(--schaduw);
	cursor: pointer;
}

.kaart .cmplz-blocked-content-notice:hover,
.kaart .cmplz-blocked-content-notice:focus-visible {
	background-color: var(--kleur-bb-donker);
}

/* Formulier ------------------------------------------------------------- */

.formulier__rij {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

.veld {
	display: grid;
	gap: 0.3rem;
	margin-bottom: 1rem;
}

.veld label {
	font-weight: 600;
	font-size: 0.95rem;
}

.verplicht {
	color: var(--kleur-bb);
}

.veld input,
.veld select,
.veld textarea {
	font: inherit;
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid #cfcbc5;
	border-radius: 6px;
	background: var(--kleur-wit);
	color: var(--kleur-tekst);
}

.veld input:focus,
.veld select:focus,
.veld textarea:focus {
	outline: 2px solid var(--kleur-bb);
	outline-offset: 1px;
	border-color: var(--kleur-bb);
}

.veld textarea {
	resize: vertical;
	min-height: 7rem;
}

.formulier__honing {
	position: absolute;
	left: -9999px;
}

.formulier__voet {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin: 0.5rem 0 0;
}

.formulier__privacy {
	font-size: 0.85rem;
	color: var(--kleur-grijs);
	max-width: 22rem;
}

.melding {
	padding: 1rem 1.2rem;
	border-radius: 6px;
	margin-bottom: 1.25rem;
	border-left: 4px solid var(--kleur-lak);
	background: var(--kleur-wit);
}

.melding--goed {
	border-left-color: #2e8b57;
}

.melding--fout {
	border-left-color: var(--kleur-bb);
}

/* Fluent Forms in de huisstijl */

.fluentform .ff-el-input--content input,
.fluentform .ff-el-input--content select,
.fluentform .ff-el-input--content textarea {
	border-radius: 6px;
	border-color: #cfcbc5;
	padding: 0.7rem 0.85rem;
}

.fluentform .ff-btn-submit {
	background: var(--kleur-bb);
	border-color: var(--kleur-bb);
	color: var(--kleur-wit);
	font-family: var(--font-kop);
	font-weight: 700;
	border-radius: 6px;
	padding: 0.8rem 1.35rem;
}

/* --------------------------------------------------------------------------
   Tekstpagina, zoeken, 404
   -------------------------------------------------------------------------- */

.tekstpagina__binnen {
	max-width: 46rem;
}

.tekstpagina h2 {
	font-size: 1.4rem;
	margin-top: 1.8rem;
}

.tekstpagina .vinklijst {
	margin-bottom: 1.5rem;
}

.bericht {
	margin-bottom: 2rem;
}

.search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 30rem;
}

.search-form input[type="search"] {
	flex: 1;
	font: inherit;
	padding: 0.7rem 0.85rem;
	border: 1px solid #cfcbc5;
	border-radius: 6px;
}

.search-form button,
.search-form input[type="submit"] {
	font: inherit;
	font-family: var(--font-kop);
	font-weight: 700;
	background: var(--kleur-lak);
	color: var(--kleur-wit);
	border: 0;
	border-radius: 6px;
	padding: 0.7rem 1.1rem;
	cursor: pointer;
}

/* WordPress zet het invoerveld binnen het label; alleen de labeltekst verbergen. */
.search-form label {
	flex: 1;
	display: flex;
}

.search-form label input {
	width: 100%;
}

.search-form .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* --------------------------------------------------------------------------
   Stipjes onder swipebare rijen (alleen telefoon)
   -------------------------------------------------------------------------- */

.swipe-dots {
	display: none;
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.stappen {
		grid-template-columns: repeat(3, 1fr);
	}

	.diensten {
		grid-template-columns: repeat(2, 1fr);
	}

	.voet__binnen {
		grid-template-columns: 1fr 1fr;
	}

	.feiten {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 900px) {
	.kop__mobiel,
	.menuknop {
		display: inline-flex;
	}

	.kop__acties {
		display: none;
	}

	/* Met het menu open hoort alleen het kruisje er nog te staan. */
	body.menu-open .belknop {
		display: none;
	}

	.hoofdnav {
		display: none;
		position: fixed;
		inset: 0;
		background: var(--kleur-lak);
		color: var(--kleur-wit);
		padding: 6rem 1.5rem 2rem;
		overflow-y: auto;
		z-index: 45;
	}

	.hoofdnav.open {
		display: block;
	}

	.kop {
		z-index: 50;
	}

	/* Het menupaneel is een kind van de kop, dus zonder eigen z-index zouden
	   het logo en de knoppen eronder verdwijnen. Dan sluit een tweede tik op
	   de menuknop het menu niet meer. */
	.merk,
	.kop__mobiel {
		position: relative;
		z-index: 46;
	}

	body.menu-open {
		overflow: hidden;
	}

	body.menu-open .kop {
		background: var(--kleur-lak);
		border-bottom-color: #333030;
	}

	body.menu-open .merk {
		color: var(--kleur-wit);
	}

	body.menu-open .merk__sub {
		color: #cfcac6;
	}

	body.menu-open .menuknop {
		background: var(--kleur-bb);
	}

	.hoofdnav .menu {
		flex-direction: column;
		gap: 0;
	}

	.hoofdnav .menu a {
		font-size: 1.5rem;
		padding: 0.75rem 0;
		color: var(--kleur-wit);
		border-bottom: 1px solid #333030;
		border-radius: 0;
		white-space: normal;
	}

	.hoofdnav .menu a:hover {
		background: transparent;
		color: var(--kleur-bb);
	}

	.hoofdnav .menu .current-menu-item > a,
	.hoofdnav .menu a.actief {
		color: var(--kleur-bb);
	}

	.hoofdnav__extra {
		display: grid;
		gap: 0.75rem;
		margin-top: 1.75rem;
	}

	.hoofdnav__tijden {
		color: #cfcac6;
		margin: 0.5rem 0 0;
		font-size: 0.95rem;
	}

	.hero {
		background: var(--kleur-wit);
	}

	.hero__binnen,
	.over-blok__binnen,
	.tekstbeeld__binnen,
	.tekstbeeld--omgekeerd .tekstbeeld__binnen,
	.contact-blok__binnen,
	.cta__binnen {
		grid-template-columns: 1fr;
	}

	.hero__beeld {
		order: -1;
	}

	.hero__beeld .werkbeeld {
		aspect-ratio: 4 / 3;
	}

	.tekstbeeld__beeld .werkbeeld {
		aspect-ratio: 3 / 2;
	}

	.sectiekop-rij,
	.reviews-blok__kop,
	.zakelijk-strook__binnen {
		grid-template-columns: 1fr;
	}

	.reviews-blok__score {
		justify-self: start;
	}

	.cta__knoppen {
		justify-content: flex-start;
	}
}

/* --------------------------------------------------------------------------
   Telefoon
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
	body {
		font-size: 1rem;
	}

	.topbalk__gebied {
		display: none;
	}

	.topbalk__binnen {
		justify-content: center;
	}

	.topbalk__rechts {
		gap: 1rem;
		font-size: 0.82rem;
	}

	.kop__binnen {
		min-height: 4.25rem;
	}

	.merk__bb {
		width: 36px;
	}

	.merk__naam {
		font-size: 1.15rem;
	}

	.hero {
		padding-top: 1.5rem;
	}

	.hero__knoppen .knop {
		flex: 1 1 100%;
	}

	.busstrook__lijst {
		font-size: 0.78rem;
		letter-spacing: 0.1em;
	}

	.busstrook__lijst li::before {
		margin: 0 0.8rem;
	}

	.panelen,
	.projecten,
	.reviews,
	.stappen {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 1rem;
		padding-bottom: 0.5rem;
		margin-inline: calc(50% - 50vw);
		padding-inline: calc(50vw - 50%);
		scrollbar-width: none;
	}

	.panelen::-webkit-scrollbar,
	.projecten::-webkit-scrollbar,
	.reviews::-webkit-scrollbar,
	.stappen::-webkit-scrollbar {
		display: none;
	}

	.panelen > *,
	.projecten > *,
	.reviews > *,
	.stappen > * {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}

	.stappen > * {
		flex-basis: 68%;
	}

	.projecten--alles {
		display: grid;
		grid-template-columns: 1fr;
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}

	.swipe-dots {
		display: flex;
		justify-content: center;
		gap: 0.4rem;
		margin-top: 0.75rem;
	}

	.swipe-dots span {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--kleur-lijn);
	}

	.swipe-dots span.actief {
		background: var(--kleur-bb);
	}

	.diensten {
		grid-template-columns: 1fr;
	}

	.feiten {
		grid-template-columns: 1fr;
	}

	.vinklijst--twee {
		grid-template-columns: 1fr;
	}

	.voet__binnen {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.voet__onder-binnen {
		justify-content: center;
		text-align: center;
	}

	.formulier__rij {
		grid-template-columns: 1fr;
	}

	.contact-blok__formulier {
		padding: 1.5rem 1.25rem 1.75rem;
	}

	.contactlijst__groot {
		font-size: 1.3rem;
	}

	.paginakop__titel {
		max-width: none;
	}

	.wa-rondje {
		right: 0.9rem;
		bottom: 0.9rem;
	}

	/* Het nummer staat nu als belknop in de kop, dus niet ook nog in de
	   topbalk. Daar blijft alleen de Google-score staan. */
	.topbalk__tel {
		display: none;
	}

	/* Op de projectenpagina twee naast elkaar: anders wordt het een
	   eindeloze kolom van bijna beeldvullende foto's. */
	.projecten--alles {
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
	}

	.projecten--alles .project__tekst {
		font-size: 0.85rem;
		margin-top: 0.6rem;
	}

	.projecten--alles .bord {
		bottom: 0.6rem;
		padding: 0.45rem 0.6rem 0.5rem 0.65rem;
	}

	.projecten--alles .bord .steenstrip {
		display: none;
	}

	.projecten--alles .bord__werk {
		font-size: 0.75rem;
	}

	.projecten--alles .bord__plaats {
		font-size: 0.75rem;
	}
}

/* --------------------------------------------------------------------------
   Smalle telefoons: de kop moet passen zonder te schuiven
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.merk {
		gap: 0.6rem;
	}

	.merk__bb {
		width: 32px;
	}

	.merk__naam {
		font-size: 1.05rem;
		letter-spacing: 0.08em;
	}

	.merk__sub {
		font-size: 0.75rem;
		margin-top: 0.25rem;
	}

	/* Alleen het telefoonicoon; het aria-label vertelt schermlezers de rest. */
	.belknop {
		padding: 0.62rem 0.75rem;
	}

	.belknop span {
		display: none;
	}

	.menuknop {
		padding: 0.6rem 0.8rem;
	}
}

@media (max-width: 380px) {
	.menuknop__tekst {
		display: none;
	}

	.merk__sub {
		display: none;
	}

	.menuknop {
		width: 46px;
		padding: 0;
		justify-content: center;
	}
}

/* ==========================================================================
   Telefoon in de stijl van Volmer Tuinen
   Ronder, lichter en rustiger: pilknoppen, afgeronde kaarten met een dunne
   rand, een kicker met streepje, getinte vinkjes, een boog boven de hero-foto
   en kaarten die je zijwaarts veegt. De kleuren blijven die van Boerboom.
   Alleen onder 760 px; desktop blijft zoals hij is.
   ========================================================================== */

.alleen-mobiel {
	display: none;
}

@media (max-width: 760px) {
	:root {
		--radius: 16px;
		--kleur-bb-licht: #fbe7e3;
	}

	body {
		font-size: 1.0625rem;
		line-height: 1.65;
	}

	.alleen-groot {
		display: none;
	}

	.alleen-mobiel {
		display: inline;
	}

	/* Topbalk: score links, nummer rechts */
	.topbalk {
		font-size: 0.8rem;
	}

	.topbalk__binnen {
		min-height: 2.25rem;
	}

	.topbalk__rechts {
		width: 100%;
		justify-content: space-between;
		gap: 0.75rem;
	}

	.topbalk__tel {
		display: inline;
		font-weight: 700;
		white-space: nowrap;
	}

	.topbalk .sterren svg {
		width: 13px;
		height: 13px;
	}

	/* Kop: logo en een omlijnde pilknop "Menu" */
	.kop__binnen {
		min-height: 4.25rem;
	}

	.belknop {
		display: none;
	}

	.menuknop {
		background: var(--kleur-wit);
		color: var(--kleur-lak);
		border: 2px solid var(--kleur-lijn);
		border-radius: 999px;
		padding: 0.5rem 0.95rem;
		-webkit-appearance: none;
		appearance: none;
	}

	body.menu-open .menuknop {
		background: transparent;
		color: var(--kleur-wit);
		border-color: rgba(255, 255, 255, 0.55);
	}

	/* Menupaneel: grote witte links met een pijltje, knoppen onderaan */
	.hoofdnav {
		padding: 6.5rem 1.5rem 2rem;
	}

	.hoofdnav.open {
		display: flex;
		flex-direction: column;
	}

	.hoofdnav .menu li + li {
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}

	.hoofdnav .menu a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 1.35rem;
		padding: 1rem 0.25rem;
		border-bottom: 0;
	}

	.hoofdnav .menu a::after {
		content: "";
		width: 0.6rem;
		height: 0.6rem;
		border-right: 2px solid rgba(255, 255, 255, 0.6);
		border-bottom: 2px solid rgba(255, 255, 255, 0.6);
		transform: rotate(-45deg);
		flex: none;
	}

	.hoofdnav__extra {
		margin-top: auto;
		padding-top: 1.5rem;
	}

	/* Knoppen: pillen */
	.knop,
	.knop--groot {
		border-radius: 999px;
		padding: 0.85rem 1.5rem;
		font-size: 1rem;
	}

	/* Hero */
	.hero {
		padding: 1.25rem 0 3rem;
		background: linear-gradient(180deg, var(--kleur-voeg) 0%, var(--kleur-wit) 70%);
	}

	.hero__binnen {
		gap: 1.75rem;
	}

	.hero__foto img {
		border-radius: 110px 110px var(--radius) var(--radius);
		box-shadow: none;
	}

	.hero__foto .fotocredit {
		font-size: 0.75rem;
	}

	.kicker {
		gap: 0.6rem;
		margin-bottom: 0.75rem;
		font-size: 0.8rem;
		letter-spacing: 0.08em;
		color: var(--kleur-bb);
	}

	.kicker .steenstrip {
		display: none;
	}

	.kicker::before {
		content: "";
		width: 1.6rem;
		height: 3px;
		border-radius: 2px;
		background: var(--kleur-bb);
		flex: none;
	}

	.hero__kop {
		font-size: clamp(2.05rem, 9vw, 2.5rem);
		line-height: 1.08;
		letter-spacing: -0.02em;
	}

	.hero__intro {
		font-size: 1.125rem;
		line-height: 1.6;
		margin-bottom: 1.5rem;
	}

	.hero__knoppen {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
		margin-bottom: 1.5rem;
	}

	.hero__knoppen .knop {
		flex: none;
	}

	/* Alleen de Google-score onder de knoppen; de rest staat verderop. */
	.hero__feiten li:not(:first-child) {
		display: none;
	}

	/* De zwarte band met de busbelettering brak op een telefoon over drie
	   regels. Die diensten staan direct eronder in de twee kaarten. */
	.busstrook {
		display: none;
	}

	/* Secties */
	.panelen-blok,
	.stappen-blok,
	.werk-blok,
	.diensten-blok,
	.over-blok,
	.tekstbeeld,
	.contact-blok,
	.feiten-blok,
	.tekstpagina,
	.reviews-blok {
		padding: 3rem 0;
	}

	.sectiekop-rij {
		gap: 0.75rem;
		margin-bottom: 1.75rem;
	}

	.sectiekop {
		font-size: clamp(1.65rem, 7.2vw, 2rem);
		line-height: 1.12;
		letter-spacing: -0.015em;
	}

	.sectie-intro {
		font-size: 1.0625rem;
	}

	.steenstrip {
		width: 48px;
		height: 8px;
		margin-bottom: 0.75rem;
	}

	/* Kaarten: afgerond, dunne rand, geen zware schaduw */
	.paneel,
	.review {
		border: 1px solid var(--kleur-lijn);
		box-shadow: none;
	}

	.paneel__tekst {
		padding: 1.5rem 1.4rem 1.6rem;
	}

	.paneel__kop {
		font-size: 1.35rem;
		border-bottom: 0;
		padding-bottom: 0;
		margin-bottom: 0.9rem;
	}

	.paneel__links {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.9rem;
	}

	.tekstlink::after {
		content: " \2192";
	}

	.review {
		padding: 1.4rem;
	}

	/* Vinkjes in een getint rondje */
	.vinklijst li {
		padding-left: 1.9rem;
	}

	.vinklijst .vink {
		top: 0.2em;
		width: 1.25rem;
		height: 1.25rem;
		padding: 0.22rem;
		border-radius: 50%;
		background: var(--kleur-bb-licht);
		color: var(--kleur-bb-donker);
	}

	/* Stappen als kaarten */
	.stappen > * {
		flex-basis: 80%;
	}

	.stap {
		background: var(--kleur-voeg);
		border-radius: var(--radius);
		padding: 0.75rem 0.75rem 1.25rem;
	}

	.stap__beeld {
		aspect-ratio: 4 / 3;
		border-radius: 10px;
		margin-bottom: 1rem;
	}

	.stap__nummer {
		left: 0.75rem;
		top: 0.75rem;
		width: 2.3rem;
		height: 2.3rem;
		border-radius: 50%;
	}

	.stap__kop,
	.stap p {
		padding-inline: 0.5rem;
	}

	/* Projectfoto's liggend, met een kleiner bord */
	.project .werkbeeld {
		aspect-ratio: 4 / 3;
	}

	.bord {
		bottom: 0.9rem;
		border-radius: 0 8px 8px 0;
		padding: 0.55rem 0.85rem 0.6rem 0.95rem;
	}

	.bord__werk {
		font-size: 0.85rem;
	}

	.bord__plaats {
		font-size: 0.75rem;
	}

	/* Diensten op de dienstpagina's: kaarten die je veegt */
	.diensten {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 1rem;
		margin-inline: calc(50% - 50vw);
		padding-inline: calc(50vw - 50%);
		padding-bottom: 0.5rem;
		scrollbar-width: none;
	}

	.diensten::-webkit-scrollbar {
		display: none;
	}

	.dienst {
		flex: 0 0 82%;
		scroll-snap-align: start;
		background: var(--kleur-wit);
		border: 1px solid var(--kleur-lijn);
		border-radius: var(--radius);
		overflow: hidden;
		padding-bottom: 1.4rem;
	}

	.dienst img {
		border-radius: 0;
		margin-bottom: 1.1rem;
	}

	.dienst h3,
	.dienst p {
		padding-inline: 1.3rem;
	}

	/* Zonder scroll-padding klikt de eerste kaart tegen de schermrand vast,
	   in plaats van gelijk met de tekst erboven. */
	.panelen,
	.projecten,
	.reviews,
	.stappen,
	.diensten {
		scroll-padding-inline: 1.25rem;
	}

	/* Stipjes onder de veegrijen */
	.swipe-dots {
		gap: 0.4rem;
		margin-top: 1.25rem;
	}

	.swipe-dots span {
		width: 0.5rem;
		height: 0.5rem;
		transition: background-color 0.2s ease, transform 0.2s ease;
	}

	.swipe-dots span.actief {
		transform: scale(1.25);
	}

	/* Reviews: kop eerst, dan de score als een regel met sterren */
	.reviews-blok__kop {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
		margin-bottom: 1.5rem;
	}

	.reviews-blok__score {
		order: 2;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.35rem 0.55rem;
		min-width: 0;
		padding: 0;
		background: none;
		box-shadow: none;
		text-align: left;
	}

	.reviews-blok__cijfer {
		font-size: 1.3rem;
	}

	.sterren--groot svg {
		width: 18px;
		height: 18px;
	}

	.reviews-blok__aantal {
		font-size: 0.95rem;
	}

	/* Over Jeroen */
	.over-blok__binnen {
		gap: 1.75rem;
	}

	.over-blok__beeld > img {
		border-radius: var(--radius);
	}

	/* Strook voor aannemers als kaart */
	.zakelijk-strook {
		padding: 2.5rem 0;
		border: 0;
	}

	.zakelijk-strook__binnen {
		gap: 1.25rem;
		background: var(--kleur-wit);
		border: 1px solid var(--kleur-lijn);
		border-left: 4px solid var(--kleur-bb);
		border-radius: var(--radius);
		padding: 1.5rem 1.25rem;
	}

	.zakelijk-strook__kop {
		font-size: 1.4rem;
	}

	/* Rode contactband: knoppen over de volle breedte */
	.cta {
		padding: 3rem 0;
	}

	.cta__kop {
		font-size: clamp(1.6rem, 7vw, 1.95rem);
	}

	.cta__knoppen {
		flex-direction: column;
		align-items: stretch;
	}

	.cta__knoppen .knop {
		width: 100%;
	}

	/* Titelband op de onderliggende pagina's */
	.paginakop {
		padding: 1.75rem 0 2.25rem;
	}

	.kruimel {
		margin-bottom: 1rem;
		font-size: 0.82rem;
	}

	.paginakop__titel {
		font-size: clamp(1.9rem, 8.2vw, 2.35rem);
		line-height: 1.1;
		letter-spacing: -0.02em;
	}

	.paginakop__intro {
		font-size: 1.0625rem;
	}

	/* Formulier */
	.veld input,
	.veld select,
	.veld textarea {
		border-radius: 10px;
		padding: 0.8rem 0.9rem;
	}

	.formulier__voet .knop {
		width: 100%;
	}

	/* Voet */
	.voet__binnen {
		padding: 3rem 0 2.5rem;
		gap: 2.25rem;
	}

	.voet__lijst li {
		margin-bottom: 0.55rem;
	}

	.voet__onder-binnen {
		flex-direction: column;
		justify-content: flex-start;
		text-align: left;
		gap: 0.35rem;
	}
}

@media (max-width: 760px) {
	/* Tikvlakken van minstens 44px hoog */
	.menuknop {
		min-height: 46px;
	}

	.topbalk__score,
	.topbalk__tel {
		padding-block: 0.55rem;
	}

	.tekstlink {
		display: inline-block;
		padding-top: 0.6rem;
	}

	/* Het e-mailadres paste niet op een regel in de grote letter */
	.contactlijst__groot.contactlijst__mail {
		font-size: 1.05rem;
	}

	/* Op Over ons staat een staande foto van Jeroen liggend in beeld;
	   zonder dit valt zijn hoofd erbuiten. */
	/* Op een klasse, niet op src: LiteSpeed vervangt de src door een placeholder. */
	.werkbeeld img.foto-boven {
		object-position: center 13%;
	}
}

@media (max-width: 380px) {
	/* Op de smalste telefoons past de topbalk anders niet op een regel. */
	.topbalk .sterren {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Minder beweging
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
	.topbalk,
	.kop__acties,
	.menuknop,
	.wa-rondje,
	.cta {
		display: none;
	}
}