/* =========================================================================
   Weboptimal – Yatek Interieurmaker
   Palet herleid uit het logo (inktblauw), de trapfoto's (eiken, kalkwit)
   en het zwarte betondecor. Eén accent: eiken.
   ========================================================================= */

/* Lettertypes zitten in het thema zelf: geen verbinding met Google (AVG) en
   LiteSpeed kan ze voor bezoekers niet wegoptimaliseren. */
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-var.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/plexsans-var.woff2") format("woff2");
	font-weight: 100 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--inkt: #101a24;
	--inkt-diep: #0c141c;
	--inkt-zacht: #24313e;
	--kalk: #f5f4f1;
	--wit: #ffffff;
	--eiken: #a8916f;
	--eiken-diep: #6e5a42;
	--eiken-licht: #e9e0d0;
	--lijn: #e3ded5;
	--tekst: #232a33;
	--tekst-zacht: #59616b;
	--goed: #2e6b3f;
	--fout: #9c3a2e;
	--wa: #1faa53;

	--font-kop: "Archivo", "Arial Narrow", sans-serif;
	--font-body: "IBM Plex Sans", "Segoe UI", sans-serif;

	--maat-1: 0.25rem;
	--maat-2: 0.5rem;
	--maat-3: 0.75rem;
	--maat-4: 1rem;
	--maat-5: 1.5rem;
	--maat-6: 2rem;
	--maat-7: 3rem;
	--maat-8: 4rem;

	--rond-klein: 8px;
	--rond: 14px;
	--rond-groot: 20px;
	--schaduw: 0 10px 30px rgba(16, 26, 36, 0.10);
	--schaduw-klein: 0 3px 12px rgba(16, 26, 36, 0.10);
}

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

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--tekst);
	background: var(--kalk);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/* Grid- en flexkinderen mogen nooit breder duwen dan hun kolom
   (min-width:auto zou de stalenstrook anders de pagina laten oprekken). */
.hero__binnen > *,
.kiezerproef__raster > *,
.kiezer > *,
.tweekolom > *,
.reviews__raster > *,
.kostenteaser__binnen > *,
.slotcta__binnen > *,
.productblok > *,
.contactraster > *,
.vakgebieden__raster > * {
	min-width: 0;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--inkt);
}

a:hover {
	color: var(--eiken-diep);
}

:focus-visible {
	outline: 3px solid var(--eiken);
	outline-offset: 2px;
	border-radius: 4px;
}

h1,
h2,
h3 {
	font-family: var(--font-kop);
	font-stretch: 112%;
	font-weight: 700;
	line-height: 1.12;
	color: var(--inkt);
	margin: 0 0 var(--maat-4);
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.1rem, 4.6vw, 3.3rem);
	letter-spacing: -0.01em;
}

h2 {
	font-size: clamp(1.55rem, 3vw, 2.2rem);
}

h3 {
	font-size: 1.15rem;
	margin-bottom: var(--maat-2);
}

p {
	margin: 0 0 var(--maat-4);
}

ul {
	padding-left: 1.2rem;
}

.binnen {
	width: min(1160px, 100% - 2rem);
	margin-inline: auto;
}

.binnen--smal {
	width: min(760px, 100% - 2rem);
}

.sectie {
	padding-block: var(--maat-8);
}

.sectie--zacht {
	background: var(--wit);
}

.sectie--kiezer {
	padding-top: var(--maat-6);
}

.schermlezer {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.spring {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--inkt);
	color: var(--wit);
	padding: 0.6rem 1rem;
	z-index: 99;
}

.spring:focus {
	left: 8px;
	top: 8px;
	color: var(--wit);
}

/* Sectielabel: klein en breed gespatieerd — familie van de subregels in
   het Yatek-logo. */
.sectielabel {
	font-family: var(--font-kop);
	font-stretch: 118%;
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--eiken-diep);
	margin: 0 0 var(--maat-3);
}

.sectiekop-rij {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--maat-4);
	flex-wrap: wrap;
	margin-bottom: var(--maat-5);
}

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

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

.knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-kop);
	font-stretch: 108%;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.2;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: 999px;
	padding: 0.7rem 1.4rem;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.knop svg {
	width: 1.05em;
	height: 1.05em;
	flex: none;
}

.knop--groot {
	padding: 0.9rem 1.8rem;
	font-size: 1.02rem;
}

.knop--hoofd {
	background: var(--inkt);
	color: var(--wit);
}

.knop--hoofd:hover {
	background: var(--inkt-zacht);
	color: var(--wit);
	transform: translateY(-1px);
}

.knop--rand {
	border-color: var(--inkt);
	color: var(--inkt);
	background: transparent;
}

.knop--rand:hover {
	background: var(--inkt);
	color: var(--wit);
}

.knop--licht {
	background: var(--kalk);
	color: var(--inkt);
}

.knop--licht:hover {
	background: var(--wit);
	color: var(--inkt);
	transform: translateY(-1px);
}

.knop--rand-licht {
	border-color: rgba(245, 244, 241, 0.55);
	color: var(--wit);
	background: transparent;
}

.knop--rand-licht:hover {
	border-color: var(--wit);
	background: rgba(255, 255, 255, 0.08);
	color: var(--wit);
}

.pijllink {
	font-family: var(--font-kop);
	font-stretch: 108%;
	font-weight: 600;
	text-decoration: none;
	color: var(--inkt);
	border-bottom: 2px solid var(--eiken);
	padding-bottom: 2px;
}

.pijllink:hover {
	color: var(--eiken-diep);
}

/* ---------- Kop ---------- */

/* Let op: geen backdrop-filter op de kop — dat zou de kop het referentiekader
   maken voor het position:fixed menu-overlay, dat dan onzichtbaar blijft. */
.kop {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(245, 244, 241, 0.97);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.kop.is-gescrold {
	border-bottom-color: var(--lijn);
}

.kop__binnen {
	width: min(1240px, 100% - 2rem);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--maat-4);
	padding-block: 0.6rem;
}

.merk {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	position: relative;
	z-index: 60;
}

.merk__embleem {
	width: 46px;
	height: 46px;
	flex: none;
}

.merk__naam {
	display: block;
	font-family: var(--font-kop);
	font-stretch: 122%;
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.34em;
	color: var(--inkt);
	line-height: 1;
}

.merk__sub {
	display: block;
	font-family: var(--font-kop);
	font-stretch: 112%;
	font-size: 0.66rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tekst-zacht);
	margin-top: 0.3rem;
}

.kop__nav {
	display: flex;
	align-items: center;
	gap: var(--maat-5);
}

.menu {
	list-style: none;
	display: flex;
	gap: 1.1rem;
	margin: 0;
	padding: 0;
}

.menu a {
	font-family: var(--font-kop);
	font-stretch: 106%;
	font-weight: 600;
	font-size: 0.9rem;
	white-space: nowrap;
	text-decoration: none;
	color: var(--tekst);
	padding-block: 0.4rem;
	border-bottom: 2px solid transparent;
}

.menu a:hover {
	color: var(--inkt);
	border-bottom-color: var(--eiken-licht);
}

.menu a.actief {
	color: var(--inkt);
	border-bottom-color: var(--eiken);
}

.kop__nav-acties {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.kop__nav-acties .knop {
	padding: 0.55rem 1.1rem;
	font-size: 0.9rem;
	white-space: nowrap;
}

.menuknop {
	display: none;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--font-kop);
	font-weight: 600;
	font-size: 0.95rem;
	background: var(--kalk);
	border: 2px solid var(--inkt);
	border-radius: 999px;
	padding: 0.5rem 1rem;
	color: var(--inkt);
	cursor: pointer;
	position: relative;
	z-index: 60;
}

.menuknop__lijnen {
	position: relative;
	width: 18px;
	height: 2px;
	background: currentColor;
	display: inline-block;
}

.menuknop__lijnen::before,
.menuknop__lijnen::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
}

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

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

/* ---------- Hero: tekst links, foto tot de schermrand rechts ---------- */

.hero {
	background:
		radial-gradient(60rem 30rem at 8% 110%, rgba(168, 145, 111, 0.16), transparent 60%),
		var(--kalk);
	overflow: hidden;
}

.hero__binnen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
	gap: clamp(var(--maat-5), 4.5vw, var(--maat-8));
	align-items: center;
	padding-left: max(1rem, calc((100vw - 1240px) / 2));
}

.hero__tekst {
	padding-block: var(--maat-6) var(--maat-7);
	max-width: 33rem;
}

.hero__tekst h1 {
	font-size: clamp(2.4rem, 4.8vw, 3.7rem);
	letter-spacing: -0.02em;
}

.hero__intro {
	font-size: 1.13rem;
	color: var(--tekst-zacht);
	max-width: 32rem;
}

.hero__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-block: var(--maat-5);
}

.hero__bewijs {
	color: var(--tekst-zacht);
	font-size: 0.95rem;
	margin: 0;
}

.hero__sterren {
	color: var(--eiken);
	letter-spacing: 0.08em;
	margin-right: 0.2rem;
}

.hero__beeld {
	position: relative;
	align-self: stretch;
	min-height: min(68vh, 620px);
	border-radius: 36px 0 0 36px;
	overflow: hidden;
	box-shadow: var(--schaduw);
}

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

.hero__badge {
	position: absolute;
	left: 1.4rem;
	bottom: 1.3rem;
	margin: 0;
	background: rgba(255, 255, 255, 0.96);
	color: var(--inkt);
	font-family: var(--font-kop);
	font-size: 0.95rem;
	border-radius: 999px;
	padding: 0.55rem 1.15rem;
	box-shadow: var(--schaduw-klein);
}

.hero__werklabel {
	position: absolute;
	right: 1.2rem;
	top: 1.2rem;
	margin: 0;
	background: rgba(12, 20, 28, 0.72);
	color: var(--kalk);
	font-family: var(--font-kop);
	font-stretch: 110%;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 0.4rem 0.95rem;
}

/* ---------- Decorkiezer-proeverij op de homepage ---------- */

.kiezerproef__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(var(--maat-5), 4vw, var(--maat-8));
	align-items: center;
}

.kiezerproef .kiezer--compact {
	box-shadow: var(--schaduw);
}

/* ---------- Decorkiezer ---------- */

.kiezer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(var(--maat-5), 3vw, var(--maat-7));
	align-items: start;
}

.kiezer__beeld {
	position: relative;
	margin: 0;
	border-radius: var(--rond-groot);
	overflow: hidden;
	box-shadow: var(--schaduw);
	aspect-ratio: 3 / 4;
	background: var(--eiken-licht);
}

.kiezer__laag {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.32s ease;
	background-size: cover;
	background-position: center;
}

.kiezer__laag.is-actief {
	opacity: 1;
}

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

.kiezer__laag--vlak {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: var(--maat-5);
}

.kiezer__voorbeeldlabel {
	background: rgba(16, 26, 36, 0.78);
	color: var(--wit);
	font-size: 0.82rem;
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	position: absolute;
	bottom: 4.2rem;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
}

.kiezer__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--maat-3);
	padding: 0.8rem 1.1rem;
	background: linear-gradient(transparent, rgba(12, 20, 28, 0.82) 42%);
	color: var(--wit);
	z-index: 2;
}

.kiezer__decornaam {
	font-family: var(--font-kop);
	font-stretch: 110%;
	font-weight: 700;
	font-size: 1.05rem;
}

.kiezer__bron {
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

.kiezer__uitleg {
	font-weight: 500;
	color: var(--tekst);
	margin-bottom: var(--maat-3);
}

.kiezer__stalen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 0.7rem;
}

/* De staal: een fysiek staaltje uit de waaier. Het signatuur-element. */
.staal {
	appearance: none;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--rond-klein);
	padding: 0.35rem 0.35rem 0.45rem;
	cursor: pointer;
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
	box-shadow: var(--schaduw-klein);
}

.staal:hover {
	transform: translateY(-2px) rotate(-0.6deg);
	border-color: var(--eiken);
}

.staal[aria-pressed="true"] {
	border: 2px solid var(--inkt);
	box-shadow: 0 0 0 3px var(--eiken-licht);
}

.staal__vlak {
	position: relative;
	display: block;
	height: 58px;
	border-radius: 5px;
	background-size: cover;
	background-position: center;
}

.staal__foto-tag {
	position: absolute;
	top: 4px;
	right: 4px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--inkt);
	font-family: var(--font-kop);
	font-weight: 600;
	font-size: 0.6rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 4px;
	padding: 0.1rem 0.3rem;
}

.staal__naam {
	display: block;
	font-family: var(--font-kop);
	font-stretch: 105%;
	font-weight: 600;
	font-size: 0.74rem;
	color: var(--tekst);
	margin-top: 0.35rem;
	line-height: 1.25;
}

.kiezer__actie {
	margin-top: var(--maat-5);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--maat-4);
}

.kiezer__gekozen {
	margin: 0;
	color: var(--tekst-zacht);
}

.kiezer__gekozen output {
	font-weight: 600;
	color: var(--inkt);
}

.kiezer__voetnoot {
	margin-top: var(--maat-4);
	color: var(--tekst-zacht);
	font-size: 0.95rem;
	border-left: 3px solid var(--eiken-licht);
	padding-left: 0.9rem;
}

.kiezer__disclaimer {
	margin-top: var(--maat-5);
	color: var(--tekst-zacht);
	font-size: 0.88rem;
	max-width: 46rem;
}

/* Compacte kiezer in de hero */
.kiezer--compact {
	grid-template-columns: 1fr;
	background: var(--wit);
	border-radius: var(--rond-groot);
	padding: var(--maat-4);
	box-shadow: var(--schaduw);
}

.kiezer--compact .kiezer__beeld {
	aspect-ratio: 4 / 5;
	border-radius: var(--rond);
	box-shadow: none;
}

.kiezer--compact .kiezer__uitleg {
	margin-top: var(--maat-3);
	font-size: 0.95rem;
}

.kiezer__stalen--strook {
	display: flex;
	max-width: 100%;
	overflow-x: auto;
	padding-bottom: 0.4rem;
	scrollbar-width: thin;
}

.kiezer__stalen--strook .staal {
	flex: 0 0 92px;
}

.kiezer--compact .pijllink {
	display: inline-block;
	margin-top: var(--maat-3);
}

/* ---------- Vakgebieden (home) ---------- */

.vakgebieden__raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.vak {
	position: relative;
	display: block;
	border-radius: var(--rond-groot);
	overflow: hidden;
	text-decoration: none;
	min-height: 250px;
	box-shadow: var(--schaduw-klein);
}

.vak--groot {
	grid-row: span 2;
	min-height: 520px;
}

.vak img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.vak:hover img {
	transform: scale(1.03);
}

.vak__inhoud {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.3rem 1.4rem;
	background: linear-gradient(transparent, rgba(12, 20, 28, 0.88) 55%);
	color: var(--wit);
	display: grid;
	gap: 0.3rem;
}

.vak__inhoud strong {
	font-family: var(--font-kop);
	font-stretch: 112%;
	font-size: 1.35rem;
	font-weight: 700;
}

.vak__inhoud > span {
	font-size: 0.95rem;
	opacity: 0.92;
	max-width: 30rem;
}

.vak__stalen {
	display: flex;
	gap: 0.4rem;
	margin-top: 0.5rem;
}

.vak__staal {
	width: 34px;
	height: 26px;
	border-radius: 4px;
	border: 2px solid rgba(255, 255, 255, 0.85);
	background-size: cover;
	background-position: center;
}

/* ---------- Werkwijze ---------- */

.werkwijze {
	background: var(--inkt);
	border-radius: 36px;
	margin-inline: clamp(0.75rem, 2vw, 2rem);
}

.werkwijze .sectielabel {
	color: var(--eiken);
}

.werkwijze h2 {
	color: var(--wit);
	max-width: 36rem;
}

.stappen {
	list-style: none;
	margin: var(--maat-6) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--maat-5);
	counter-reset: stap;
}

.stap {
	border-top: 2px solid rgba(168, 145, 111, 0.5);
	padding-top: var(--maat-4);
}

.stap__nummer {
	font-family: var(--font-kop);
	font-stretch: 120%;
	font-weight: 800;
	font-size: 2rem;
	color: var(--eiken);
	display: block;
	margin-bottom: var(--maat-2);
}

.werkwijze .stap h3 {
	color: var(--wit);
}

.werkwijze .stap p {
	color: rgba(245, 244, 241, 0.78);
	margin: 0;
}

.stappen--smal {
	grid-template-columns: 1fr;
}

.sectie--zacht .stap,
.sectie .binnen--smal .stap {
	border-top-color: var(--eiken-licht);
}

.binnen--smal .stap h3 {
	color: var(--inkt);
}

/* ---------- Recent werk ---------- */

.recentwerk__strook {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 300px);
	gap: var(--maat-4);
	overflow-x: auto;
	padding: 0.2rem max(1rem, calc((100vw - 1160px) / 2)) var(--maat-3);
	scrollbar-width: thin;
}

.werkkaart {
	position: relative;
	border-radius: var(--rond);
	overflow: hidden;
	text-decoration: none;
	box-shadow: var(--schaduw-klein);
	aspect-ratio: 3 / 4;
}

.werkkaart img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.werkkaart:hover img {
	transform: scale(1.04);
}

.werkkaart__info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.9rem 1rem;
	background: linear-gradient(transparent, rgba(12, 20, 28, 0.85) 55%);
	color: var(--wit);
	display: grid;
	gap: 0.1rem;
}

.werkkaart__info strong {
	font-family: var(--font-kop);
	font-weight: 700;
}

.werkkaart__info span:last-child {
	font-size: 0.86rem;
	opacity: 0.9;
}

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

.reviews__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--maat-5);
	align-items: stretch;
}

.review {
	margin: 0;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	padding: var(--maat-5);
}

.review--groot {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-left: 4px solid var(--eiken);
}

.review--groot p:not(.review__sterren) {
	font-size: 1.25rem;
	line-height: 1.55;
	color: var(--inkt);
}

.reviews__kolom {
	display: grid;
	gap: var(--maat-4);
}

.review__sterren {
	color: var(--eiken);
	letter-spacing: 0.12em;
	margin-bottom: var(--maat-3);
}

.review__ster-leeg {
	color: var(--lijn);
}

.review footer {
	font-family: var(--font-kop);
	font-weight: 600;
	color: var(--inkt);
	margin-top: var(--maat-2);
}

.review footer span {
	color: var(--tekst-zacht);
	font-weight: 400;
	font-family: var(--font-body);
	font-size: 0.9rem;
}

.reviews__bron {
	margin-top: var(--maat-5);
	color: var(--tekst-zacht);
}

/* ---------- Kostenteaser ---------- */

.kostenteaser__binnen {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--maat-6);
	align-items: center;
}

.kostenteaser__factoren {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.kostenteaser__factoren li {
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: 999px;
	padding: 0.55rem 1.1rem;
	font-family: var(--font-kop);
	font-weight: 600;
	font-size: 0.95rem;
	width: fit-content;
}

.kostenteaser__factoren li:nth-child(even) {
	margin-left: 1.4rem;
}

/* ---------- Slot-CTA ---------- */

.slotcta {
	background:
		radial-gradient(46rem 24rem at -10% 120%, rgba(168, 145, 111, 0.22), transparent 60%),
		var(--inkt-diep);
	border-radius: 36px;
	margin: 0 clamp(0.75rem, 2vw, 2rem) var(--maat-6);
}

.slotcta__binnen {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: var(--maat-6);
	align-items: center;
}

.slotcta h2 {
	color: var(--wit);
}

.slotcta p {
	color: rgba(245, 244, 241, 0.8);
	margin: 0;
}

.slotcta__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	justify-content: flex-end;
}

/* ---------- Paginakop ---------- */

.paginakop {
	padding: var(--maat-6) 0 var(--maat-6);
	background:
		radial-gradient(50rem 22rem at 110% -40%, rgba(168, 145, 111, 0.13), transparent 60%),
		var(--kalk);
}

.kruimel {
	font-size: 0.85rem;
	color: var(--tekst-zacht);
	display: flex;
	gap: 0.5rem;
	margin-bottom: var(--maat-4);
}

.kruimel a {
	color: var(--tekst-zacht);
	text-decoration: none;
}

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

.paginakop__intro {
	font-size: 1.1rem;
	color: var(--tekst-zacht);
	max-width: 46rem;
	margin: 0;
}

/* ---------- Productenlijst (traprenovatie-overzicht) ---------- */

.productenlijst {
	display: grid;
	gap: var(--maat-6);
}

.productblok {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: var(--maat-6);
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--rond-groot);
	overflow: hidden;
}

.productblok:nth-child(even) {
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

.productblok:nth-child(even) .productblok__foto {
	order: 2;
}

.productblok__foto {
	display: block;
	min-height: 300px;
	position: relative;
}

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

.productblok__inhoud {
	padding: var(--maat-6) var(--maat-6) var(--maat-6) 0;
	align-self: center;
}

.productblok:nth-child(even) .productblok__inhoud {
	padding: var(--maat-6) 0 var(--maat-6) var(--maat-6);
}

.productblok h2 {
	font-size: 1.6rem;
}

.productblok h2 a {
	text-decoration: none;
	color: inherit;
}

.productblok__stalen {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: var(--maat-4) 0 var(--maat-2);
}

.productblok__staal {
	width: 44px;
	height: 34px;
	border-radius: 6px;
	border: 2px solid var(--wit);
	box-shadow: var(--schaduw-klein);
	background-size: cover;
	background-position: center;
}

.productblok__meer {
	font-family: var(--font-kop);
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--tekst-zacht);
}

.productblok__meta {
	color: var(--tekst-zacht);
	font-size: 0.92rem;
	margin-bottom: var(--maat-4);
}

/* ---------- Tweekolom, foto's, lijsten ---------- */

.tweekolom {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--maat-7);
	align-items: start;
}

.kaderfoto {
	margin: 0;
	border-radius: var(--rond-groot);
	overflow: hidden;
	box-shadow: var(--schaduw);
	position: relative;
}

.kaderfoto img {
	width: 100%;
}

.kaderfoto figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 0.7rem 1.1rem;
	background: linear-gradient(transparent, rgba(12, 20, 28, 0.8));
	color: var(--wit);
	font-size: 0.88rem;
}

.vinkjes {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--maat-4);
	display: grid;
	gap: 0.55rem;
}

.vinkjes li {
	padding-left: 1.7rem;
	position: relative;
}

.vinkjes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 0.95em;
	height: 0.5em;
	border-left: 2.5px solid var(--eiken-diep);
	border-bottom: 2.5px solid var(--eiken-diep);
	transform: rotate(-45deg);
}

/* ---------- Product: kleine kaarten andere producten ---------- */

.productrij {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--maat-4);
}

.productkaart {
	display: flex;
	align-items: center;
	gap: var(--maat-4);
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	padding: var(--maat-4);
	text-decoration: none;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.productkaart:hover {
	border-color: var(--eiken);
	transform: translateY(-2px);
}

.productkaart__stalen {
	display: flex;
	flex: none;
}

.productkaart__staal {
	width: 34px;
	height: 44px;
	border-radius: 5px;
	border: 2px solid var(--wit);
	box-shadow: var(--schaduw-klein);
	background-size: cover;
	margin-left: -10px;
}

.productkaart__staal:first-child {
	margin-left: 0;
}

.productkaart__tekst {
	display: grid;
}

.productkaart__tekst strong {
	font-family: var(--font-kop);
	color: var(--inkt);
}

.productkaart__tekst span {
	color: var(--tekst-zacht);
	font-size: 0.88rem;
}

/* ---------- Dienstenraster / redenen / factoren ---------- */

.dienstenraster,
.redenen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--maat-4);
}

.redenen {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dienstkaart,
.reden {
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	padding: var(--maat-5);
}

.sectie--zacht .dienstkaart,
.sectie--zacht .reden {
	background: var(--kalk);
	border-color: transparent;
}

.dienstkaart p,
.reden p {
	margin: 0;
	color: var(--tekst-zacht);
}

.factoren {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--maat-4);
}

.factor {
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-left: 4px solid var(--eiken);
	border-radius: var(--rond-klein);
	padding: var(--maat-5);
}

.factor p {
	margin: 0;
	color: var(--tekst-zacht);
	font-size: 0.97rem;
}

.kostenkader {
	background: var(--inkt);
	border-radius: var(--rond-groot);
	padding: var(--maat-6);
	color: var(--wit);
}

.kostenkader h3 {
	color: var(--wit);
	font-size: 1.35rem;
}

.kostenkader p {
	color: rgba(245, 244, 241, 0.82);
}

.kostenkader .knop {
	width: 100%;
	margin-bottom: var(--maat-2);
}

.kostenkader .knop--hoofd {
	background: var(--kalk);
	color: var(--inkt);
}

.kostenkader .knop--rand {
	border-color: rgba(245, 244, 241, 0.5);
	color: var(--wit);
}

.kostenkader .knop--rand:hover {
	background: rgba(255, 255, 255, 0.1);
}

.kostenkader__of {
	text-align: center;
	font-size: 0.88rem;
	margin-block: var(--maat-2);
}

.feitenkader {
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--rond-groot);
	padding: var(--maat-6);
}

.feitenkader ul {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--maat-4);
	display: grid;
	gap: 0.5rem;
}

.meldingskader {
	background: var(--eiken-licht);
	border-radius: var(--rond-groot);
	padding: var(--maat-6);
	display: grid;
	gap: var(--maat-4);
	max-width: 46rem;
	margin-inline: auto;
}

.meldingskader p {
	margin: 0;
}

.meldingskader__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

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

.projectraster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--maat-4);
}

.projectraster--twee {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.projectkaart {
	margin: 0;
	border-radius: var(--rond);
	overflow: hidden;
	position: relative;
	box-shadow: var(--schaduw-klein);
	background: var(--wit);
}

.projectkaart img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.projectraster--twee .projectkaart img {
	aspect-ratio: 4 / 3;
}

.projectkaart figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2rem 1rem 0.9rem;
	background: linear-gradient(transparent, rgba(12, 20, 28, 0.88) 60%);
	color: var(--wit);
	display: grid;
	gap: 0.15rem;
	font-size: 0.88rem;
}

.projectkaart figcaption strong {
	font-family: var(--font-kop);
	font-size: 1rem;
}

.projectkaart__decor {
	color: var(--eiken-licht);
	font-size: 0.8rem;
}

.projecten__meer {
	margin-top: var(--maat-5);
}

.fotoraster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--maat-4);
}

.fotoraster figure {
	margin: 0;
	position: relative;
	border-radius: var(--rond);
	overflow: hidden;
	box-shadow: var(--schaduw-klein);
	background: var(--wit);
}

.fotoraster img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.fotoraster figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.8rem 1rem 0.8rem;
	background: linear-gradient(transparent, rgba(12, 20, 28, 0.85) 60%);
	color: var(--wit);
	font-size: 0.88rem;
}

.voorna {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--maat-4);
}

.voorna__deel {
	margin: 0;
	position: relative;
	border-radius: var(--rond);
	overflow: hidden;
	box-shadow: var(--schaduw-klein);
}

.voorna__deel img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.voorna__tag {
	position: absolute;
	top: 0.8rem;
	left: 0.8rem;
	background: rgba(12, 20, 28, 0.85);
	color: var(--wit);
	font-family: var(--font-kop);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	z-index: 2;
}

.voorna__tag--na {
	background: var(--eiken-diep);
}

.voorna__uitleg {
	margin-top: var(--maat-4);
	color: var(--tekst-zacht);
	max-width: 40rem;
}

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

.contactraster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--maat-4);
}

.contactkaart {
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--rond-groot);
	padding: var(--maat-6);
	display: flex;
	flex-direction: column;
	gap: var(--maat-3);
}

.contactkaart--bel {
	background: var(--inkt);
	border-color: var(--inkt);
	color: var(--wit);
}

.contactkaart--bel h2 {
	color: var(--wit);
}

.contactkaart--bel p {
	color: rgba(245, 244, 241, 0.82);
	margin: 0;
}

.contactkaart--bel .knop--hoofd {
	background: var(--kalk);
	color: var(--inkt);
}

.contactkaart--bel .knop--rand {
	border-color: rgba(245, 244, 241, 0.5);
	color: var(--wit);
}

.contactkaart--bel .knop--rand:hover {
	background: rgba(255, 255, 255, 0.08);
}

.contactkaart__tip {
	font-size: 0.9rem;
}

.contactkaart h2 {
	font-size: 1.3rem;
	margin: 0;
}

.contactkaart address {
	font-style: normal;
}

.contactkaart p {
	margin: 0;
	color: var(--tekst-zacht);
}

.contactkaart__meta {
	list-style: none;
	padding: 0;
	margin: 0;
	color: var(--tekst-zacht);
	font-size: 0.92rem;
	display: grid;
	gap: 0.3rem;
}

.plaatsen {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.plaatsen li {
	background: var(--kalk);
	border: 1px solid var(--lijn);
	border-radius: 999px;
	padding: 0.35rem 0.9rem;
	font-family: var(--font-kop);
	font-weight: 600;
	font-size: 0.88rem;
}

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

.formulier {
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--rond-groot);
	padding: clamp(var(--maat-5), 3vw, var(--maat-6));
	display: grid;
	gap: var(--maat-5);
}

.sectie--zacht .formulier {
	background: var(--kalk);
	border-color: transparent;
}

.formulier__groep {
	border: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--maat-4);
}

.formulier legend {
	font-family: var(--font-kop);
	font-stretch: 112%;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--inkt);
	margin-bottom: var(--maat-3);
	padding: 0;
}

.velden-rij {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--maat-4);
}

.veld {
	display: grid;
	gap: 0.35rem;
}

.veld label {
	font-family: var(--font-kop);
	font-weight: 600;
	font-size: 0.92rem;
}

.veld__optioneel {
	color: var(--tekst-zacht);
	font-weight: 400;
	font-family: var(--font-body);
}

.ster {
	color: var(--fout);
}

.veld input,
.veld select,
.veld textarea {
	font: inherit;
	padding: 0.7rem 0.9rem;
	border: 1.5px solid var(--lijn);
	border-radius: var(--rond-klein);
	background: var(--wit);
	color: var(--tekst);
	width: 100%;
}

.veld input:focus,
.veld select:focus,
.veld textarea:focus {
	outline: none;
	border-color: var(--inkt);
	box-shadow: 0 0 0 3px var(--eiken-licht);
}

.veld__uitleg {
	font-size: 0.88rem;
	color: var(--tekst-zacht);
	margin: 0;
}

.formulier__voet {
	display: grid;
	gap: var(--maat-3);
	justify-items: start;
}

.zacht {
	color: var(--tekst-zacht);
	font-size: 0.88rem;
	margin: 0;
}

.verborgen-veld {
	position: absolute;
	left: -9999px;
}

.melding {
	border-radius: var(--rond);
	padding: var(--maat-5);
	margin-bottom: var(--maat-5);
}

.melding--goed {
	background: #ecf4ee;
	border: 1px solid var(--goed);
}

.melding--goed h2 {
	color: var(--goed);
	font-size: 1.2rem;
	margin-bottom: var(--maat-2);
}

.melding--fout {
	background: #f9eeec;
	border: 1px solid var(--fout);
}

.melding p {
	margin: 0;
}

.gekozen-decor {
	display: flex;
	align-items: center;
	gap: var(--maat-4);
	background: var(--eiken-licht);
	border-radius: var(--rond);
	padding: var(--maat-4) var(--maat-5);
	margin-bottom: var(--maat-5);
}

.gekozen-decor__staal {
	flex: none;
	width: 64px;
	height: 48px;
	border-radius: 6px;
	border: 3px solid var(--wit);
	box-shadow: var(--schaduw-klein);
	background-size: cover;
}

.gekozen-decor p {
	margin: 0;
}

/* ---------- Zoekvorm / 404 ---------- */

.zoekvorm {
	display: flex;
	gap: 0.6rem;
	margin-block: var(--maat-4);
}

.zoekvorm input {
	flex: 1;
	font: inherit;
	padding: 0.7rem 1rem;
	border: 1.5px solid var(--lijn);
	border-radius: 999px;
}

.nietgevonden__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: var(--maat-5);
}

.resultaten {
	display: grid;
	gap: 0.6rem;
}

/* ---------- Juridisch ---------- */

.juridisch h2 {
	font-size: 1.25rem;
	margin-top: var(--maat-6);
}

/* ---------- WhatsApp-zwever ---------- */

.wa-zweef {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 60;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--wa);
	color: var(--wit);
	display: grid;
	place-items: center;
	box-shadow: 0 6px 20px rgba(16, 26, 36, 0.3);
	transition: transform 0.18s ease;
}

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

.wa-zweef svg {
	width: 28px;
	height: 28px;
}

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

.voet {
	background: var(--inkt-diep);
	color: rgba(245, 244, 241, 0.78);
	padding-top: var(--maat-7);
}

.voet a {
	color: var(--kalk);
}

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

.voet__binnen {
	width: min(1160px, 100% - 2rem);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: var(--maat-6);
	padding-bottom: var(--maat-6);
}

.voet__blok ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.45rem;
}

.voet__blok a {
	text-decoration: none;
}

.voet__kop {
	font-family: var(--font-kop);
	font-stretch: 115%;
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--eiken);
	margin: 0 0 var(--maat-3);
}

.merk__embleem--voet {
	width: 52px;
	height: 52px;
	margin-bottom: var(--maat-3);
}

.voet__naam {
	font-family: var(--font-kop);
	font-stretch: 118%;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--kalk);
	margin-bottom: var(--maat-1);
}

.voet__merk p {
	margin: 0 0 var(--maat-1);
}

.voet__insta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--maat-3);
	text-decoration: none;
}

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

.voet__contact li {
	line-height: 1.5;
}

.voet__onder {
	border-top: 1px solid rgba(245, 244, 241, 0.14);
	padding: var(--maat-4) 0;
}

.voet__onder p {
	width: min(1160px, 100% - 2rem);
	margin-inline: auto;
	margin-block: 0.2rem;
	font-size: 0.85rem;
}

/* =========================================================================
   Responsief
   ========================================================================= */

@media (max-width: 1020px) {
	.projectraster,
	.fotoraster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.factoren,
	.redenen,
	.productrij {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.reviews__raster,
	.kostenteaser__binnen,
	.slotcta__binnen {
		grid-template-columns: 1fr;
	}

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

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

	.kop__nav {
		display: none;
		position: fixed;
		inset: 0;
		top: 0;
		padding: 6rem 1.5rem 2rem;
		background: var(--kalk);
		z-index: 40;
		overflow: auto;
	}

	.kop__nav.is-open {
		display: block;
	}

	body.menu-open {
		overflow: hidden;
	}

	.menu {
		flex-direction: column;
		gap: 0.4rem;
	}

	.menu a {
		display: block;
		font-size: 1.25rem;
		white-space: normal;
		padding: 0.55rem 0;
		border-bottom: 1px solid var(--lijn);
	}

	.kop__nav-acties {
		margin-top: var(--maat-5);
		flex-direction: column;
		align-items: stretch;
	}

	.kop__nav-acties .knop {
		padding: 0.85rem 1.4rem;
		font-size: 1rem;
	}

	body.menu-open .menuknop__lijnen {
		background: transparent;
	}

	body.menu-open .menuknop__lijnen::before {
		top: 0;
		transform: rotate(45deg);
	}

	body.menu-open .menuknop__lijnen::after {
		top: 0;
		transform: rotate(-45deg);
	}

	/* Onder de menugrens ook de hero stapelen: naast elkaar wordt het te krap. */
	.hero__binnen {
		grid-template-columns: 1fr;
		gap: 0;
		padding-inline: 1rem;
	}

	.hero__tekst {
		padding-block: var(--maat-5) var(--maat-5);
		max-width: 40rem;
	}

	.hero__beeld {
		min-height: 0;
		aspect-ratio: 4 / 5;
		max-height: 62vh;
		width: 100%;
		border-radius: 28px;
		margin-bottom: var(--maat-6);
	}
}

@media (max-width: 880px) {
	.sectie {
		padding-block: var(--maat-7);
	}

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

	.kiezer__beeld {
		max-width: 460px;
	}

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

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

	.vak--groot {
		min-height: 420px;
	}

	.stappen {
		grid-template-columns: 1fr;
		gap: var(--maat-4);
	}

	.tweekolom {
		grid-template-columns: 1fr;
		gap: var(--maat-5);
	}

	.productblok,
	.productblok:nth-child(even) {
		grid-template-columns: 1fr;
	}

	.productblok:nth-child(even) .productblok__foto {
		order: 0;
	}

	.productblok__foto {
		min-height: 240px;
	}

	.productblok__inhoud,
	.productblok:nth-child(even) .productblok__inhoud {
		padding: 0 var(--maat-5) var(--maat-5);
	}

	.productblok__foto + .productblok__inhoud {
		padding-top: var(--maat-5);
	}

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

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

@media (max-width: 560px) {
	.projectraster,
	.projectraster--twee,
	.fotoraster,
	.factoren,
	.redenen,
	.productrij,
	.dienstenraster,
	.velden-rij {
		grid-template-columns: 1fr;
	}

	.kiezer__stalen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hero__acties .knop {
		width: 100%;
	}

	.recentwerk__strook {
		grid-auto-columns: minmax(200px, 240px);
	}

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

	.merk__sub {
		display: none;
	}
}

/* ---------- Rustig aan met bewegen ---------- */

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

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

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

@media print {
	.kop,
	.voet,
	.wa-zweef,
	.slotcta {
		display: none;
	}
}

/* ---------- Diensten als drie losse keuzekaarten ---------- */

.diensten__raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: var(--maat-5);
}

.dienstkaart--foto {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--rond-groot);
	box-shadow: var(--schaduw-klein);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dienstkaart--foto:hover {
	transform: translateY(-3px);
	box-shadow: var(--schaduw);
}

.dienstkaart__foto {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.dienstkaart__body {
	flex: 1;
	padding: 1.35rem 1.5rem 1.5rem;
	display: grid;
	gap: 0.65rem;
	align-content: start;
}

.dienstkaart__body h3 {
	font-size: 1.35rem;
	margin: 0;
}

.dienstkaart__body p {
	margin: 0;
	color: var(--tekst-zacht);
}

.dienstkaart__stalen {
	display: flex;
	gap: 0.35rem;
}

.dienstkaart__staal {
	width: 32px;
	height: 24px;
	border-radius: 4px;
	border: 2px solid var(--wit);
	box-shadow: var(--schaduw-klein);
	background-size: cover;
	background-position: center;
}

.dienstkaart__body .knop {
	justify-self: start;
	margin-top: 0.35rem;
}

/* ---------- Google-reviews ---------- */

.reviews__kop {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--maat-4);
	flex-wrap: wrap;
	margin-bottom: var(--maat-5);
}

.reviews__kop h2 {
	margin-bottom: 0;
}

.google-score {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	text-decoration: none;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	padding: 0.75rem 1.1rem;
	color: var(--tekst);
	box-shadow: var(--schaduw-klein);
}

.google-score:hover {
	border-color: var(--eiken);
	color: var(--tekst);
}

.google-score svg {
	width: 34px;
	height: 34px;
	flex: none;
}

.google-score__tekst {
	display: grid;
	line-height: 1.2;
}

.google-score strong {
	font-family: var(--font-kop);
	font-stretch: 112%;
	font-size: 1.5rem;
	color: var(--inkt);
	margin-right: 0.45rem;
}

.google-score small {
	color: var(--tekst-zacht);
	font-size: 0.8rem;
}

.sterren-g {
	color: #fbbc04;
	letter-spacing: 0.06em;
	font-size: 1.05rem;
	margin: 0;
}

.sterren-g .leeg {
	color: var(--lijn);
}

.reviews__kaarten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-bottom: var(--maat-5);
}

.reviewkaart-g {
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	padding: 1.3rem 1.4rem 1.4rem;
	display: grid;
	gap: 0.55rem;
	align-content: start;
}

.reviewkaart-g__kop {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.reviewkaart-g__kop > svg {
	width: 22px;
	height: 22px;
	margin-left: auto;
	flex: none;
}

.reviewkaart-g__avatar {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--inkt);
	color: var(--wit);
	display: grid;
	place-items: center;
	font-family: var(--font-kop);
	font-weight: 700;
	font-size: 1.1rem;
}

.reviewkaart-g__naam {
	display: block;
	font-family: var(--font-kop);
	font-weight: 600;
	color: var(--inkt);
	line-height: 1.2;
}

.reviewkaart-g__bron {
	display: block;
	font-size: 0.8rem;
	color: var(--tekst-zacht);
}

.reviewkaart-g__tekst {
	margin: 0;
	color: var(--tekst);
	line-height: 1.55;
}

/* Yatek-logo: liggend in de header (het huisje uit zijn logo + naam),
   vrijstaand zonder cirkel in de footer. */
.merk {
	gap: 0.8rem;
}

.merk__huis {
	width: 50px;
	height: 29px;
	flex: none;
}

.merk__naam {
	font-weight: 500;
	font-stretch: 125%;
	font-size: 1.55rem;
	letter-spacing: 0.24em;
	line-height: 1;
	color: var(--inkt);
}

.merk__sub {
	font-weight: 600;
	font-stretch: 112%;
	font-size: 0.56rem;
	letter-spacing: 0.36em;
	color: var(--eiken-diep);
	margin-top: 6px;
}

.logo-rond--voet {
	display: block;
	width: 170px;
	height: auto;
	margin-bottom: var(--maat-4);
}

@media (max-width: 560px) {
	.merk__huis {
		width: 40px;
		height: 23px;
	}

	.merk__naam {
		font-size: 1.25rem;
	}

	.merk__sub {
		display: block;
		font-size: 0.48rem;
		letter-spacing: 0.3em;
	}
}

@media (max-width: 1020px) {
	.reviews__kaarten {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 880px) {
	.diensten__raster {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.reviews__kaarten {
		grid-template-columns: 1fr;
	}
}

/* ---------- Hoofdmenu: rustig, met uitklapmenu onder Traprenovatie ---------- */

.kop__nav {
	gap: 2.2rem;
}

.menu {
	gap: 1.8rem;
	align-items: center;
}

.menu > li {
	position: relative;
}

.menu > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 500;
	font-stretch: 102%;
	font-size: 0.96rem;
	color: #2c343d;
	padding: 0.55rem 0;
	border-bottom: 0;
}

.menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.15rem;
	height: 2px;
	border-radius: 2px;
	background: var(--eiken);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.menu > li > a:hover,
.menu > li > a.actief {
	color: var(--inkt);
}

.menu > li > a:hover::after,
.menu > li > a.actief::after {
	transform: scaleX(1);
}

.menu__pijl {
	width: 10px;
	height: 10px;
	opacity: 0.6;
	transition: transform 0.2s ease;
}

.menu__item--sub:hover .menu__pijl,
.menu__item--sub:focus-within .menu__pijl {
	transform: rotate(180deg);
}

/* Brug zodat het menu open blijft als de muis naar beneden gaat. */
.menu__item--sub::before {
	content: "";
	position: absolute;
	left: -1rem;
	right: -1rem;
	top: 100%;
	height: 0.8rem;
}

.submenu {
	position: absolute;
	top: calc(100% + 0.55rem);
	left: -1.1rem;
	z-index: 70;
	min-width: 272px;
	list-style: none;
	margin: 0;
	padding: 0.45rem;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(16, 26, 36, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.menu__item--sub:hover .submenu,
.menu__item--sub:focus-within .submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.menu .submenu a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.55rem 0.7rem;
	border: 0;
	border-radius: 10px;
	font-weight: 500;
	font-stretch: 102%;
	font-size: 0.93rem;
	color: var(--inkt);
	white-space: nowrap;
}

.menu .submenu a:hover,
.menu .submenu a.actief {
	background: var(--kalk);
	color: var(--inkt);
}

.submenu__staal {
	width: 26px;
	height: 20px;
	flex: none;
	border-radius: 5px;
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 1px rgba(16, 26, 36, 0.08);
}

.submenu__scheiding {
	border-top: 1px solid var(--lijn);
	margin-top: 0.35rem;
	padding-top: 0.35rem;
}

.kop__nav-acties {
	gap: 1.1rem;
}

.kop__tel {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--font-kop);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--inkt);
	text-decoration: none;
	white-space: nowrap;
}

.kop__tel:hover {
	color: var(--eiken-diep);
}

.kop__tel-icoon {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	background: var(--eiken-licht);
	color: var(--eiken-diep);
	display: grid;
	place-items: center;
}

.kop__tel-icoon svg {
	width: 16px;
	height: 16px;
}

.kop__nav-acties .knop {
	white-space: nowrap;
	padding: 0.62rem 1.25rem;
	font-size: 0.93rem;
}

@media (max-width: 1320px) {
	.kop__nav {
		gap: 1.6rem;
	}

	.menu {
		gap: 1.35rem;
	}

	.kop__tel-nummer {
		display: none;
	}
}

@media (max-width: 1180px) {
	.menu {
		gap: 0.2rem;
		align-items: stretch;
	}

	.menu > li > a {
		display: flex;
		justify-content: space-between;
		font-size: 1.25rem;
		padding: 0.6rem 0;
		border-bottom: 1px solid var(--lijn);
		color: var(--tekst);
	}

	.menu > li > a::after,
	.menu__pijl,
	.menu__item--sub::before {
		display: none;
	}

	.submenu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		padding: 0.25rem 0 0.5rem 0.9rem;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.menu .submenu a {
		font-size: 1.02rem;
		padding: 0.45rem 0.2rem;
		white-space: normal;
	}

	.submenu__scheiding {
		border-top: 0;
		margin-top: 0;
		padding-top: 0;
	}

	.kop__tel {
		justify-content: center;
		border: 2px solid var(--inkt);
		border-radius: 999px;
		padding: 0.55rem 1.2rem;
	}

	.kop__tel-nummer {
		display: inline;
	}

	.kop__nav-acties .knop {
		padding: 0.85rem 1.4rem;
		font-size: 1rem;
	}
}

/* =========================================================================
   Luxe-laag (1.3.0): meer rust en ruimte, foto's binnen de marges,
   bijschriften onder de foto in plaats van erop.
   ========================================================================= */

h1,
h2 {
	font-weight: 600;
}

@media (min-width: 1024px) {
	.sectie {
		padding-block: 5.5rem;
	}
}

/* ---------- Hero: foto binnen het raster, geen tekst op de foto ---------- */

.hero {
	background: var(--kalk);
	overflow: visible;
	padding-block: clamp(3rem, 7vh, 5.5rem) clamp(4rem, 9vh, 6.5rem);
}

.hero__binnen {
	width: min(1160px, 100% - 2rem);
	margin-inline: auto;
	padding: 0;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
}

.hero__tekst {
	padding-block: 0;
	max-width: 35rem;
}

.hero__tekst h1 {
	font-weight: 600;
	font-size: clamp(2.5rem, 4.4vw, 3.6rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
}

.hero__intro {
	font-size: 1.12rem;
	max-width: 31rem;
}

.hero__vertrouwen {
	list-style: none;
	margin: 2.4rem 0 0;
	padding: 1.4rem 0 0;
	border-top: 1px solid var(--lijn);
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem 2.2rem;
	font-size: 0.93rem;
	color: var(--tekst-zacht);
}

.hero__vertrouwen li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.hero__vertrouwen svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.hero__vertrouwen strong {
	font-family: var(--font-kop);
	color: var(--inkt);
}

.hero__sterren-g {
	color: #fbbc04;
	letter-spacing: 0.06em;
}

.hero__beeld {
	position: relative;
	margin: 0;
	justify-self: end;
	width: 100%;
	max-width: 480px;
	min-height: 0;
	aspect-ratio: 4 / 5;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}

/* Dun eikenkleurig lijstje achter de foto. */
.hero__beeld::before {
	content: "";
	position: absolute;
	inset: 1.5rem -1.5rem -1.5rem 1.5rem;
	border: 1px solid var(--eiken);
	border-radius: 28px;
}

.hero__beeld img {
	position: relative;
	inset: auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: 28px;
	box-shadow: 0 30px 60px rgba(16, 26, 36, 0.16);
}

/* ---------- Diensten: lichtere knoppen ---------- */

.dienstkaart__body .knop {
	background: transparent;
	color: var(--inkt);
	border-color: var(--inkt);
}

.dienstkaart__body .knop:hover {
	background: var(--inkt);
	color: var(--wit);
}

/* ---------- Bijschriften onder de foto, nooit erop ---------- */

.projectkaart,
.fotoraster figure,
.kaderfoto,
.werkkaart {
	background: none;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}

.projectkaart img,
.fotoraster img,
.werkkaart img {
	border-radius: var(--rond);
	box-shadow: var(--schaduw-klein);
}

.kaderfoto img {
	border-radius: var(--rond-groot);
	box-shadow: var(--schaduw);
}

.projectkaart figcaption,
.fotoraster figcaption,
.kaderfoto figcaption,
.werkkaart__info {
	position: static;
	background: none;
	color: var(--tekst-zacht);
	padding: 0.8rem 0.15rem 0;
	font-size: 0.9rem;
}

.projectkaart figcaption strong,
.werkkaart__info strong {
	color: var(--inkt);
	font-size: 0.98rem;
}

.werkkaart {
	display: block;
	aspect-ratio: auto;
}

.werkkaart img {
	position: static;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: opacity 0.2s ease;
}

.werkkaart:hover img {
	transform: none;
	opacity: 0.92;
}

.werkkaart__info span:last-child {
	opacity: 1;
	font-size: 0.88rem;
}

/* Decorkiezer: decornaam onder de foto. */
.kiezer__figuur {
	margin: 0;
}

.kiezer__label {
	position: static;
	background: none;
	color: var(--tekst);
	padding: 0.85rem 0.2rem 0;
}

.kiezer__decornaam {
	color: var(--inkt);
}

.kiezer__bron {
	color: var(--tekst-zacht);
	opacity: 1;
}

.kiezer__voorbeeldlabel {
	bottom: 1rem;
}

@media (max-width: 1180px) {
	.hero__binnen {
		grid-template-columns: 1fr;
		gap: 3rem;
		padding: 0;
	}

	.hero__tekst {
		padding-block: 0;
	}

	.hero__beeld {
		justify-self: start;
		width: calc(100% - 1.2rem);
		max-width: 460px;
		max-height: none;
		margin-bottom: 1.5rem;
		border-radius: 0;
	}

	.hero__beeld::before {
		inset: 1rem -1rem -1rem 1rem;
		border-radius: 24px;
	}

	.hero__beeld img {
		border-radius: 24px;
	}
}

/* =========================================================================
   Afwerking (1.3.0): lijstje van de hero binnen het raster, gelijke
   dienstkaarten, rustige decorproef, prijsfactoren als lijst en op de
   telefoon veegkaarten met stipjes.
   ========================================================================= */

/* Het eikenlijstje valt binnen de kolom en raakt nooit de schermrand. */
@media (min-width: 1181px) {
	.hero__beeld {
		margin-right: 1.5rem;
	}
}

/* Dienstkaarten: knoppen op één lijn, ook als één kaart stalen toont. */
.dienstkaart__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.7rem;
}

.dienstkaart__body .knop {
	margin-top: auto;
}

.dienstkaart__body p {
	margin-bottom: 0.45rem;
}

/* Decorproef op home: liggend beeld en zes stalen op één rij. */
.kiezer--compact {
	gap: 0.2rem;
}

.kiezer--compact .kiezer__beeld {
	aspect-ratio: 4 / 3;
}

.kiezer--compact .kiezer__stalen--strook {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0.55rem;
	overflow: visible;
	padding-bottom: 0;
}

.kiezer--compact .staal__vlak {
	height: 48px;
}

.kiezer--compact .staal__naam {
	font-size: 0.7rem;
}

/* Prijsfactoren: genummerde lijst op een kaart in plaats van losse pillen. */
.kostenteaser__kaart {
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--rond-groot);
	padding: 1.7rem 2rem 0.9rem;
	box-shadow: var(--schaduw-klein);
}

.kostenteaser__kaartkop {
	font-family: var(--font-kop);
	font-stretch: 118%;
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--eiken-diep);
	margin: 0 0 0.4rem;
}

.kostenteaser__factoren {
	display: block;
	counter-reset: factor;
}

.kostenteaser__factoren li {
	counter-increment: factor;
	display: flex;
	align-items: baseline;
	gap: 1.1rem;
	width: auto;
	margin: 0;
	padding: 0.95rem 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: 1.02rem;
	color: var(--inkt);
}

.kostenteaser__factoren li:nth-child(even) {
	margin-left: 0;
}

.kostenteaser__factoren li + li {
	border-top: 1px solid var(--lijn);
}

.kostenteaser__factoren li::before {
	content: counter(factor, decimal-leading-zero);
	min-width: 1.6rem;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
	color: var(--eiken);
}

/* Slotband: offerte als hoofdknop, bellen en appen er netjes onder. */
.slotcta__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	width: 100%;
	max-width: 26rem;
	justify-self: end;
}

.slotcta__acties .knop {
	flex: 1 1 auto;
}

.slotcta__acties .knop:first-child {
	flex-basis: 100%;
}

@media (max-width: 1020px) {
	.slotcta__acties {
		justify-self: start;
	}
}

/* Stipjes onder veegrijen: alleen op de telefoon. */
.veegstipjes {
	display: none;
}

@media (max-width: 760px) {
	/* Hero: eerst de foto, dan de kop; knoppen onder elkaar op eigen breedte. */
	.hero {
		padding-block: 1.25rem 3.5rem;
	}

	.hero__binnen {
		gap: 2.25rem;
	}

	.hero__beeld {
		order: -1;
		width: calc(100% - 0.9rem);
		max-width: none;
		aspect-ratio: 1 / 1;
		margin-bottom: 0.9rem;
	}

	.hero__beeld::before {
		inset: 0.9rem -0.9rem -0.9rem 0.9rem;
		border-radius: 22px;
	}

	.hero__beeld img {
		border-radius: 22px;
		object-position: 50% 55%;
	}

	.hero__tekst h1 {
		font-size: clamp(2.1rem, 9.4vw, 2.5rem);
	}

	.hero__intro {
		font-size: 1.05rem;
	}

	.hero__acties {
		flex-direction: column;
		align-items: flex-start;
	}

	.hero__acties .knop {
		width: auto;
	}

	.hero__vertrouwen {
		margin-top: 1.9rem;
	}

	.hero__vertrouwen li + li {
		display: none;
	}

	/* Diensten en reviews als veegkaarten; recent werk klikt per kaart vast. */
	.diensten__raster,
	.reviews__kaarten {
		display: flex;
		gap: 0.9rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 1rem;
		scrollbar-width: none;
		margin-inline: -1rem;
		padding: 0.25rem 1rem 0.6rem;
	}

	.diensten__raster::-webkit-scrollbar,
	.reviews__kaarten::-webkit-scrollbar,
	.recentwerk__strook::-webkit-scrollbar {
		display: none;
	}

	.diensten__raster > *,
	.reviews__kaarten > * {
		flex: 0 0 84%;
		scroll-snap-align: start;
	}

	.dienstkaart--foto:hover {
		transform: none;
	}

	.reviews__kaarten {
		margin-bottom: 0;
	}

	.recentwerk__strook {
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 1rem;
		scrollbar-width: none;
	}

	.recentwerk__strook > * {
		scroll-snap-align: start;
	}

	.veegstipjes {
		display: flex;
		justify-content: center;
		gap: 0.45rem;
		margin: 0.9rem 0 0;
	}

	.veegstipjes span {
		width: 7px;
		height: 7px;
		border-radius: 999px;
		background: #cfc7b9;
		transition: width 0.2s ease, background-color 0.2s ease;
	}

	.veegstipjes span.is-actief {
		width: 20px;
		background: var(--inkt);
	}

	.reviews .veegstipjes {
		margin-bottom: var(--maat-5);
	}

	.kostenteaser__kaart {
		padding: 1.4rem 1.4rem 0.7rem;
	}
}

@media (max-width: 560px) {
	.hero__label-extra {
		display: none;
	}

	.kiezer--compact .kiezer__stalen--strook {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =========================================================================
   Cookies en juridisch (1.4.0): cookiemelding in inkt met eikenaccent,
   linksonder op desktop en als paneel onderaan op de telefoon. Accepteren
   en weigeren zien er precies hetzelfde uit.
   ========================================================================= */

.cookiemelding[hidden],
.cookiemelding [hidden] {
	display: none !important;
}

.cookiemelding {
	position: fixed;
	left: clamp(1rem, 2.4vw, 2rem);
	bottom: clamp(1rem, 2.4vw, 2rem);
	z-index: 90;
	width: min(28rem, calc(100% - 2rem));
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.6rem 1.6rem 1.35rem;
	color: var(--kalk);
	background:
		radial-gradient(24rem 15rem at 115% -15%, rgba(168, 145, 111, 0.3), transparent 65%),
		radial-gradient(18rem 12rem at -20% 120%, rgba(168, 145, 111, 0.12), transparent 70%),
		var(--inkt);
	border: 1px solid rgba(168, 145, 111, 0.38);
	border-radius: 24px;
	box-shadow: 0 30px 70px rgba(8, 14, 20, 0.34), 0 6px 18px rgba(8, 14, 20, 0.18);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookiemelding.is-zichtbaar {
	opacity: 1;
	transform: none;
}

.cookiemelding__kop {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 0.8rem;
}

.cookiemelding__icoon {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	color: #e1cfae;
	background: rgba(168, 145, 111, 0.2);
	box-shadow: inset 0 0 0 1px rgba(225, 207, 174, 0.28);
}

.cookiemelding__icoon svg {
	width: 23px;
	height: 23px;
}

.cookiemelding h2 {
	margin: 0;
	font-size: 1.22rem;
	color: var(--wit);
	outline: none;
}

.cookiemelding__tekst {
	margin: 0 0 1.15rem;
	font-size: 0.93rem;
	line-height: 1.6;
	color: rgba(245, 244, 241, 0.8);
}

.cookiemelding a {
	color: #e8d9bd;
	text-decoration: underline;
	text-decoration-color: rgba(232, 217, 189, 0.5);
	text-underline-offset: 3px;
}

.cookiemelding a:hover {
	color: var(--wit);
	text-decoration-color: var(--wit);
}

.cookiemelding__knoppen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
}

.cookiemelding__knoppen .knop {
	width: 100%;
	padding: 0.78rem 0.9rem;
	font-size: 0.9rem;
	white-space: nowrap;
}

.cookiemelding__instellen {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 1rem 0 0;
	padding: 0.15rem 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.88rem;
	color: #e8d9bd;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: rgba(232, 217, 189, 0.45);
	text-underline-offset: 3px;
}

.cookiemelding__instellen:hover {
	color: var(--wit);
}

.cookiemelding__instellen svg {
	width: 17px;
	height: 17px;
}

.cookiemelding button:focus-visible,
.cookiemelding a:focus-visible {
	outline: 2px solid #e8d9bd;
	outline-offset: 3px;
}

.cookiemelding__keuzes {
	display: grid;
	gap: 0.55rem;
	margin: 0 0 1.15rem;
}

.cookiekeuze {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 0.95rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(245, 244, 241, 0.1);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cookiekeuze:hover {
	border-color: rgba(225, 207, 174, 0.35);
}

.cookiekeuze--vast {
	cursor: default;
}

.cookiekeuze--vast:hover {
	border-color: rgba(245, 244, 241, 0.1);
}

.cookiekeuze__tekst {
	display: grid;
	gap: 0.15rem;
}

.cookiekeuze__tekst strong {
	font-family: var(--font-kop);
	font-weight: 600;
	font-size: 0.93rem;
	color: var(--wit);
}

.cookiekeuze__tekst span {
	font-size: 0.8rem;
	line-height: 1.45;
	color: rgba(245, 244, 241, 0.66);
}

/* Schakelaar: aan = eiken. */
.schakelaar {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: none;
	width: 46px;
	height: 27px;
	margin: 0;
	border-radius: 999px;
	background: rgba(245, 244, 241, 0.2);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.schakelaar::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: var(--wit);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s ease;
}

.schakelaar:checked {
	background: var(--eiken);
}

.schakelaar:checked::before {
	transform: translateX(19px);
}

.schakelaar:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.schakelaar:focus-visible {
	outline: 2px solid #e8d9bd;
	outline-offset: 2px;
}

/* Knop die eruitziet als een link (voet, juridische teksten). */
.tekstknop {
	appearance: none;
	display: inline;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.voet__juridisch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.3rem;
}

.voet__juridisch a,
.voet__juridisch .tekstknop {
	color: rgba(245, 244, 241, 0.86);
}

.voet__juridisch a:hover,
.voet__juridisch .tekstknop:hover {
	color: var(--wit);
}

.voet__juridisch span {
	color: rgba(245, 244, 241, 0.6);
}

/* ---------- Juridische pagina's ---------- */

.juridisch-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2.4rem;
}

.juridisch-nav a,
.juridisch-nav button {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 1.05rem;
	border: 1px solid var(--lijn);
	border-radius: 999px;
	background: var(--wit);
	font-family: var(--font-kop);
	font-stretch: 105%;
	font-weight: 600;
	font-size: 0.86rem;
	line-height: 1.2;
	color: var(--inkt);
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.juridisch-nav a:hover,
.juridisch-nav button:hover {
	border-color: var(--eiken);
}

.juridisch-nav a[aria-current="page"] {
	background: var(--inkt);
	border-color: var(--inkt);
	color: var(--wit);
}

.juridisch-nav button {
	background: transparent;
	border-color: var(--eiken);
	color: var(--eiken-diep);
}

.juridisch-nav svg {
	width: 16px;
	height: 16px;
}

.juridisch h2 {
	margin: 2.4rem 0 0.7rem;
}

.juridisch p,
.juridisch li {
	color: var(--tekst);
}

.juridisch ul {
	margin: 0 0 1.2rem;
	padding-left: 1.2rem;
}

.juridisch li {
	margin-bottom: 0.45rem;
}

.juridisch li::marker {
	color: var(--eiken);
}

.juridisch li strong,
.juridisch p strong {
	color: var(--inkt);
}

.juridisch a {
	color: var(--inkt);
	text-decoration-color: var(--eiken);
	text-underline-offset: 3px;
}

.juridisch .tekstknop {
	color: var(--inkt);
	text-decoration-color: var(--eiken);
}

.juridisch__kort {
	margin: 0 0 1rem;
	padding: 1.5rem 1.7rem 1.1rem;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--rond-groot);
	box-shadow: var(--schaduw-klein);
}

.juridisch .juridisch__kort h2 {
	margin: 0 0 0.7rem;
	font-size: 1.05rem;
}

.juridisch__kort ul {
	margin-bottom: 0.4rem;
}

.juridisch__keuze {
	display: grid;
	justify-items: start;
	gap: 0.2rem;
	padding-bottom: 1.5rem;
}

.juridisch__keuze p {
	margin: 0 0 0.9rem;
}

.juridisch .juridisch__gegevens {
	list-style: none;
	padding: 1.1rem 1.3rem;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
}

.juridisch__gegevens li {
	margin: 0.2rem 0;
}

.juridisch__tabel {
	margin: 0.4rem 0 1.2rem;
	overflow-x: auto;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
}

.juridisch table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.juridisch th,
.juridisch td {
	padding: 0.75rem 0.95rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--lijn);
}

.juridisch tbody tr:last-child td {
	border-bottom: 0;
}

.juridisch th {
	font-family: var(--font-kop);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eiken-diep);
	background: var(--kalk);
}

.juridisch code {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 0.85em;
	color: var(--inkt);
	background: var(--kalk);
	padding: 0.1rem 0.35rem;
	border-radius: 5px;
}

.juridisch .juridisch__datum {
	margin-top: 2.8rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--lijn);
	font-size: 0.86rem;
	color: var(--tekst-zacht);
}

/* Contactpagina: tekst in de donkere belkaart goed leesbaar. */
.contactkaart.contactkaart--bel p {
	color: rgba(245, 244, 241, 0.82);
}

@media (max-width: 760px) {
	.cookiemelding {
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-height: 88vh;
		padding: 1.35rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
		border-width: 1px 0 0;
		border-radius: 24px 24px 0 0;
		box-shadow: 0 -18px 50px rgba(8, 14, 20, 0.3);
	}

	.cookiemelding__tekst {
		font-size: 0.9rem;
	}

	/* De WhatsApp-knop even weg zolang de melding openstaat. */
	.cookiemelding-open .wa-zweef {
		opacity: 0;
		pointer-events: none;
	}

	.juridisch-nav {
		margin-bottom: 1.8rem;
	}

	.juridisch__kort {
		padding: 1.2rem 1.2rem 0.9rem;
	}

	/* Cookietabel als rijtjes onder elkaar. */
	.juridisch__tabel {
		overflow: visible;
	}

	.juridisch table,
	.juridisch tbody,
	.juridisch tr,
	.juridisch td {
		display: block;
	}

	.juridisch thead {
		display: none;
	}

	.juridisch tr {
		padding: 0.6rem 0;
		border-bottom: 1px solid var(--lijn);
	}

	.juridisch tbody tr:last-child {
		border-bottom: 0;
	}

	.juridisch td {
		padding: 0.2rem 1rem;
		border: 0;
	}

	.juridisch td::before {
		content: attr(data-label) ": ";
		font-weight: 600;
		color: var(--inkt);
	}
}

@media (max-width: 360px) {
	.cookiemelding__knoppen {
		grid-template-columns: 1fr;
	}
}

/* Juridische pagina's: kop en tekst in dezelfde smalle kolom, minder lucht ertussen. */
.sectie.sectie--juridisch {
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* =========================================================================
   Telefoon (1.5.0): tikdoelen van minstens 44 px, formulieren zonder
   inzoomen, compacte werkwijze, galerijen in twee kolommen, een decorkiezer
   die foto en stalen samen in beeld houdt, een donker menu en een kortere voet.
   ========================================================================= */

/* Invoervelden op 16 px: kleiner laat iOS inzoomen bij het aantikken. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
	font-size: max(1rem, 16px);
}

a,
button,
label,
.staal {
	-webkit-tap-highlight-color: rgba(168, 145, 111, 0.18);
}

.knop:active {
	transform: scale(0.98);
}

/* Twee donkere banden direct onder elkaar: een smalle kier ertussen. */
.werkwijze + .slotcta {
	margin-top: clamp(0.75rem, 2vw, 1.25rem);
}

/* Stalenwaaier op productpagina's zonder tweede projectfoto. */
.waaier {
	display: grid;
	justify-items: center;
	gap: 1.1rem;
	padding: 2.4rem 1.6rem 1.9rem;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: var(--rond-groot);
	box-shadow: var(--schaduw-klein);
	text-align: center;
}

.waaier__stalen {
	position: relative;
	width: 250px;
	height: 225px;
}

.waaier__staal {
	position: absolute;
	left: calc(50% - 33px);
	bottom: 6px;
	width: 66px;
	height: 205px;
	border-radius: 10px;
	background-size: cover;
	background-position: center;
	box-shadow: 0 8px 18px rgba(16, 26, 36, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
	transform-origin: 50% 92%;
	transform: rotate(calc((var(--i) - 2) * 13deg));
}

.waaier__staal::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 12px;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.75);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.waaier__tekst {
	max-width: 22rem;
	margin: 0;
	color: var(--tekst);
}

.waaier__tekst strong {
	color: var(--inkt);
}

/* ---------- Menu op telefoon en tablet: donker paneel ---------- */

@media (max-width: 1180px) {
	.menuknop {
		min-height: 44px;
		padding: 0.5rem 1.05rem;
	}

	.kop__nav {
		background:
			radial-gradient(32rem 20rem at 110% -8%, rgba(168, 145, 111, 0.24), transparent 60%),
			var(--inkt);
		padding-top: 5.4rem;
	}

	.menu > li > a {
		align-items: center;
		color: var(--wit);
		font-size: 1.28rem;
		padding: 0.68rem 0;
		border-bottom-color: rgba(245, 244, 241, 0.12);
	}

	.menu > li > a.actief {
		color: #e1cfae;
	}

	.menu > li > a::after {
		display: block;
		content: "";
		position: static;
		flex: none;
		width: 1.15rem;
		height: 1.15rem;
		border-radius: 0;
		transform: none;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11m-4-4 4 4-4 4' fill='none' stroke='%23a8916f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	.menu > li > a.actief::after {
		transform: none;
	}

	.menu .submenu a {
		color: rgba(245, 244, 241, 0.86);
		padding: 0.48rem 0.2rem;
	}

	.menu .submenu a.actief {
		color: #e1cfae;
	}

	.submenu__staal {
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
	}

	.kop__tel {
		min-height: 48px;
		color: var(--wit);
		border-color: rgba(245, 244, 241, 0.45);
	}

	.kop__tel:hover {
		color: var(--wit);
	}

	.kop__tel-icoon {
		background: rgba(245, 244, 241, 0.1);
		color: #e1cfae;
	}

	.kop__nav-acties .knop--hoofd {
		min-height: 48px;
		background: var(--kalk);
		border-color: var(--kalk);
		color: var(--inkt);
	}

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

	body.menu-open .merk__sub {
		color: rgba(245, 244, 241, 0.62);
	}

	body.menu-open .menuknop {
		background: transparent;
		border-color: rgba(245, 244, 241, 0.6);
		color: var(--wit);
	}
}

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

@media (max-width: 760px) {
	/* Logo: de ondertitel leesbaar houden. */
	.merk__sub {
		font-size: 0.56rem;
		letter-spacing: 0.26em;
	}

	/* Tikdoelen */
	.pijllink {
		position: relative;
	}

	.pijllink::before {
		content: "";
		position: absolute;
		inset: -0.75rem -0.3rem;
	}

	.juridisch-nav a,
	.juridisch-nav button {
		min-height: 44px;
	}

	/* Werkwijze: nummer in een rondje naast de stap, veel minder hoog. */
	.stappen {
		gap: 0;
		margin-top: 1.5rem;
	}

	.stap {
		display: grid;
		grid-template-columns: 2.5rem minmax(0, 1fr);
		column-gap: 0.95rem;
		align-items: start;
		padding: 1.1rem 0 1.15rem;
		border-top-width: 1px;
	}

	.stap__nummer {
		grid-row: 1 / span 2;
		display: grid;
		place-items: center;
		width: 2.5rem;
		height: 2.5rem;
		margin: 0;
		border-radius: 50%;
		font-size: 1.05rem;
		background: rgba(168, 145, 111, 0.18);
	}

	.werkwijze .stap__nummer {
		color: #e1cfae;
	}

	.stappen--smal .stap__nummer {
		color: var(--eiken-diep);
		background: var(--eiken-licht);
	}

	.stap h3 {
		margin: 0.3rem 0 0.3rem;
		font-size: 1.06rem;
	}

	.stap p {
		margin: 0;
		font-size: 0.95rem;
	}

	/* Galerijen in twee kolommen: overzicht in plaats van eindeloos scrollen. */
	.projectraster,
	.fotoraster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.3rem 0.75rem;
	}

	.projectkaart figcaption,
	.fotoraster figcaption {
		padding-top: 0.5rem;
		font-size: 0.8rem;
		line-height: 1.4;
	}

	.projectkaart figcaption strong {
		font-size: 0.86rem;
		line-height: 1.3;
	}

	/* Decorkiezer: liggende foto die blijft staan terwijl je door de stalen
	   scrolt, en vier stalen per rij. Zo zie je elke keuze meteen. */
	.kiezer:not(.kiezer--compact) .kiezer__figuur {
		position: sticky;
		top: var(--kop-hoogte, 59px);
		z-index: 4;
		margin-inline: -1rem;
		padding: 0.5rem 1rem 0.3rem;
		background: var(--kalk);
	}

	.kiezer:not(.kiezer--compact) .kiezer__beeld {
		aspect-ratio: 4 / 3;
		max-width: none;
	}

	.kiezer:not(.kiezer--compact) .kiezer__label {
		padding-top: 0.55rem;
	}

	.kiezer:not(.kiezer--compact) .kiezer__stalen {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.45rem;
	}

	.kiezer:not(.kiezer--compact) .staal {
		padding: 0.28rem 0.28rem 0.38rem;
	}

	.kiezer:not(.kiezer--compact) .staal__vlak {
		height: 44px;
	}

	.kiezer .staal__naam {
		font-size: 0.75rem;
		line-height: 1.2;
	}

	.staal__foto-tag {
		font-size: 0.6rem;
	}

	/* Foto naast "Wat je krijgt" en op Kasten: liggend, niet schermhoog. */
	.kaderfoto img {
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}

	.waaier {
		padding: 2rem 1.25rem 1.6rem;
	}
}

/* ---------- Voet op de telefoon: twee kolommen, grote tikdoelen ---------- */

@media (max-width: 560px) {
	.voet {
		padding-top: 2.75rem;
	}

	.voet__binnen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem 1.25rem;
		padding-bottom: 2rem;
	}

	.voet__merk,
	.voet__blok:last-child {
		grid-column: 1 / -1;
	}

	.logo-rond--voet {
		width: 128px;
		margin-bottom: 0.9rem;
	}

	.voet__insta {
		min-height: 44px;
		margin-top: 0.3rem;
	}

	.voet__blok ul {
		gap: 0;
	}

	.voet__blok ul a {
		display: block;
		padding: 0.62rem 0;
		font-size: 0.95rem;
		line-height: 1.35;
	}

	.voet__contact {
		display: flex !important;
		flex-wrap: wrap;
		gap: 0.6rem;
	}

	.voet__contact li:nth-child(n+3) {
		flex-basis: 100%;
	}

	.voet__contact li:nth-child(3) {
		margin-top: 0.5rem;
	}

	.voet__contact .voet__knop {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 1.15rem;
		border: 1px solid rgba(245, 244, 241, 0.35);
		border-radius: 999px;
		font-family: var(--font-kop);
		font-weight: 600;
		font-size: 0.92rem;
	}

	.voet__juridisch {
		gap: 0 1.1rem;
	}

	.voet__juridisch a,
	.voet__juridisch .tekstknop {
		display: inline-block;
		padding: 0.5rem 0;
	}
}

@media (max-width: 1180px) {
	:root {
		--kop-hoogte: 64px;
	}
}

/* Stalen die onder de vaste kiezerfoto door schuiven, vervagen zacht. */
@media (max-width: 760px) {
	.kiezer:not(.kiezer--compact) .kiezer__figuur::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: 14px;
		background: linear-gradient(var(--kalk), rgba(245, 244, 241, 0));
		pointer-events: none;
	}
}

/* Foto naast "Wat je krijgt": even hoog als de tekst, niet schermhoog. */
.kaderfoto--product img {
	aspect-ratio: 5 / 4;
	object-fit: cover;
	object-position: 50% 60%;
}

@media (max-width: 760px) {
	.kaderfoto--product img {
		aspect-ratio: 4 / 3;
	}
}

/* Na versturen springt de pagina naar de melding. De vaste kop mag die niet afdekken. */
#formuliermelding {
	scroll-margin-top: 7rem;
}

/* Telefoon: de WhatsApp-knop gaat even weg als de verstuurknop of de onderste footerregel eronder valt. */
@media (max-width: 640px) {
	.wa-zweef {
		transition: transform 0.18s ease, opacity 0.18s ease;
	}

	.wa-weg .wa-zweef {
		opacity: 0;
		pointer-events: none;
	}
}