/* ═══════════════════════════════════════════════════════════════════════════
   Codemark — hoofdstyling
   Gebaseerd op het ontwerp "1A: warm & redactioneel".
   Alle vaste waarden uit het ontwerp staan als token in :root.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	/* Kleuren */
	--papier: #FBF8F4;
	--zand: #F3F0EA;
	--wit: #FFFFFF;
	--donker: #131320;
	--tekst: #5C5C74;
	--tekst-zacht: #7C7C90;
	--meta: #8A8598;
	--mono-kleur: #9A968C;
	--accent: #B4472F;
	--accent-op-donker: #FF8A7D;
	--koraal: #FF6B5B;
	--koraal-donker: #E2503F;
	--zonlicht: #FFCC70;
	--foto: #EDEAE4;
	--foto-diep: #E6E2DA;
	--kruimel-scheiding: #C6C0B6;

	--rand-zacht: rgba(19, 19, 32, 0.06);
	--rand: rgba(19, 19, 32, 0.14);
	--lijn: rgba(19, 19, 32, 0.07);
	--lijn-sterk: rgba(19, 19, 32, 0.10);
	--op-donker: rgba(255, 255, 255, 0.62);
	--op-donker-zacht: rgba(255, 255, 255, 0.45);
	--rand-licht: rgba(255, 255, 255, 0.20);

	--verloop: linear-gradient(135deg, #FF6B5B, #FFB088, #FFCC70);
	--gloed-achtergrond:
		radial-gradient(circle at 30% 60%, rgba(255, 107, 91, 0.20) 0%, transparent 55%),
		radial-gradient(circle at 72% 30%, rgba(255, 204, 112, 0.14) 0%, transparent 50%);
	--streep: repeating-linear-gradient(135deg, #EDEAE4 0 8px, #F5F3EF 8px 16px);

	/* Typografie */
	--kop: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
	--body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
	--mono: ui-monospace, Menlo, Monaco, 'Courier New', monospace;

	/* Maatvoering */
	--marge: 56px;
	--breedte: 1280px;
	--sectie: 96px;
	--gap-raster: 20px;
	--gap-kolom: 56px;

	/* Radii */
	--r-blok: 18px;
	--r-kaart: 16px;
	--r-cta: 20px;
	--r-media: 14px;
	--r-veld: 12px;
	--r-pil: 60px;
	--r-chip: 40px;
	--r-boog: 200px 200px 20px 20px;

	/* Schaduwen */
	--schaduw-mega: 0 30px 80px rgba(19, 19, 32, 0.16);
	--schaduw-formulier: 0 20px 60px rgba(19, 19, 32, 0.07);
	--schaduw-zwever: 0 18px 50px rgba(19, 19, 32, 0.14);
	--schaduw-project: 0 12px 40px rgba(19, 19, 32, 0.07);

	--overgang: 0.2s ease;
}

/* ── Basis ───────────────────────────────────────────────────────────────── */

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

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

body {
	margin: 0;
	background: var(--papier);
	color: var(--tekst);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--koraal); text-decoration: none; }
a:hover { color: var(--koraal-donker); }

button { font: inherit; }

h1, h2, h3, h4 {
	font-family: var(--kop);
	color: var(--donker);
	margin: 0;
	text-wrap: pretty;
}

h1 {
	font-size: clamp(2.5rem, 4.6vw, 3.75rem);
	line-height: 1.03;
	letter-spacing: -0.045em;
	font-weight: 800;
}

h2 {
	font-size: clamp(2rem, 3.4vw, 2.75rem);
	line-height: 1.08;
	letter-spacing: -0.035em;
	font-weight: 700;
}

h3 {
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	font-weight: 700;
}

p { margin: 0; }

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

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

.overslaan {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--donker);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 8px 0;
}

.overslaan:focus { left: 0; color: #fff; }

/* ── Layout ──────────────────────────────────────────────────────────────── */

.wrap {
	max-width: var(--breedte);
	margin-inline: auto;
	padding-inline: var(--marge);
}

.wrap--smal { max-width: 872px; }

.blok { padding-block: var(--sectie); }
.blok.bg-papier { background: var(--papier); }
.blok.bg-zand { background: var(--zand); }
.blok.bg-donker { background: var(--donker); color: var(--op-donker); }

/* Twee blokken met dezelfde achtergrond onder elkaar: geen dubbele lucht.
   De smalle banden (logobalk, argumentenbalk) hebben zelf geen verticale
   ruimte en tellen daarom niet mee als voorganger — anders zou de sectie
   erna zijn eigen padding kwijtraken. */
.bg-papier:not(.logobalk):not(.argumenten) + .bg-papier,
.bg-zand:not(.logobalk):not(.argumenten) + .bg-zand { padding-top: 0; }

/* Het oproepblok volgt op een zandsectie met 56px lucht, zoals in het ontwerp. */
.bg-zand + .cta { padding-top: 56px; }

.raster {
	display: grid;
	gap: var(--gap-raster);
}

.raster--2 { grid-template-columns: repeat(2, 1fr); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }
.raster--top { align-items: start; }

/* ── Kleine bouwstenen ───────────────────────────────────────────────────── */

.label {
	font-family: var(--kop);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 14px;
}

.mono {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mono-kleur);
	margin: 0;
}

.mono--accent { color: var(--accent); letter-spacing: 0.08em; }
.mono--zand { color: var(--mono-kleur); white-space: nowrap; }
.mono--zonlicht { color: var(--zonlicht); letter-spacing: 0.14em; }

.nummer {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--accent);
	margin: 0;
}

.kaart--donker .nummer,
.lijstitem .nummer { color: var(--accent); }
.kaart--donker .nummer { color: var(--zonlicht); }

.lead {
	font-size: 19px;
	line-height: 1.65;
	color: var(--tekst);
	max-width: 460px;
}

.lead + .lead { margin-top: 14px; }

.badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--kop);
	font-size: 13px;
	font-weight: 600;
	color: var(--accent);
	background: rgba(255, 107, 91, 0.10);
	padding: 8px 16px;
	border-radius: var(--r-pil);
	margin-bottom: 22px;
}

.badge__stip {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: linear-gradient(135deg, #FF6B5B, #FFCC70);
	flex: none;
}

.knoppen {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 34px;
}

.knoppen--midden { justify-content: center; }

.knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--kop);
	font-size: 16px;
	font-weight: 600;
	padding: 16px 30px;
	border-radius: var(--r-pil);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background-color var(--overgang), color var(--overgang), border-color var(--overgang), transform var(--overgang);
}

.knop--vol { width: 100%; padding-block: 14px; }

.knop--donker { background: var(--donker); color: #fff; }
.knop--donker:hover { background: #22223A; color: #fff; transform: translateY(-1px); }

.knop--rand { color: var(--donker); border-color: var(--rand); background: transparent; }
.knop--rand:hover { color: var(--donker); border-color: rgba(19, 19, 32, 0.30); transform: translateY(-1px); }

.knop--verloop { background: var(--verloop); color: var(--donker); }
.knop--verloop:hover { color: var(--donker); filter: brightness(0.96); transform: translateY(-1px); }

.knop--rand-licht { color: #fff; border-color: var(--rand-licht); background: transparent; }
.knop--rand-licht:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); transform: translateY(-1px); }

.tekstlink {
	display: inline-block;
	font-family: var(--kop);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--donker);
	border-bottom: 1.5px solid rgba(19, 19, 32, 0.18);
	padding-bottom: 2px;
	transition: color var(--overgang), border-color var(--overgang);
}

.tekstlink:hover { color: var(--accent); border-color: var(--accent); }

.sectiekop--met-link .tekstlink { font-size: 15px; border-bottom-width: 1.5px; padding-bottom: 3px; }

.kaart--donker .tekstlink { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.kaart--donker .tekstlink:hover { color: var(--zonlicht); border-color: var(--zonlicht); }

.kaarten__onder { margin-top: 32px; }

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 18px;
}

.chip {
	font-size: 12.5px;
	line-height: 1.4;
	padding: 6px 12px;
	border-radius: var(--r-chip);
	background: rgba(255, 107, 91, 0.09);
	color: var(--accent);
}

.kaart--donker .chip {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.72);
}

.pillen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pil {
	font-size: 15px;
	padding: 11px 20px;
	border-radius: var(--r-chip);
	background: var(--wit);
	border: 1px solid var(--rand-zacht);
	color: var(--tekst);
	transition: border-color var(--overgang), color var(--overgang), transform var(--overgang);
}

.pil:hover { color: var(--donker); border-color: var(--rand); transform: translateY(-2px); }
.pil.is-actief { background: var(--donker); border-color: var(--donker); color: #fff; }

.pijlknop {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--rand-zacht);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--donker);
	font-size: 16px;
	flex: none;
}

.pijlknop--verloop { background: var(--verloop); }

.gloed {
	position: absolute;
	inset: 0;
	background: var(--gloed-achtergrond);
	pointer-events: none;
}

/* Fotovlakken: de placeholder laat in de editor zien waar beeld hoort. */
.fotovlak {
	position: relative;
	overflow: hidden;
	background: var(--foto);
	border-radius: var(--r-blok);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
}

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

.fotovlak__leeg {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	color: #8A8579;
	background: var(--streep);
	width: 100%;
	height: 100%;
	min-height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fotovlak--boog { aspect-ratio: 4 / 5; border-radius: var(--r-boog); }
.fotovlak--staand { aspect-ratio: 3 / 4; border-radius: var(--r-media); background: var(--foto-diep); }
.fotovlak--versprongen { margin-top: 36px; }
.fotovlak--enkel { aspect-ratio: 4 / 5; border-radius: var(--r-kaart); background: var(--foto-diep); }
.fotovlak--cel { align-self: stretch; min-height: 280px; }
.fotovlak--groot { min-height: 340px; background: var(--foto-diep); }
.fotovlak--citaat { aspect-ratio: 4 / 3; }
.fotovlak--project { aspect-ratio: 16 / 11; border-radius: 8px; }
.fotovlak--thumb { aspect-ratio: 4 / 3; border-radius: 10px; margin-bottom: 10px; }
.fotovlak--bericht { aspect-ratio: 4 / 3; border-radius: var(--r-media); margin-bottom: 16px; }
.fotovlak--artikel { aspect-ratio: 16 / 9; border-radius: var(--r-blok); margin-block: 28px; }

/* Sectiekop */
.sectiekop {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	margin-bottom: 44px;
}

.sectiekop__intro {
	font-size: 17px;
	line-height: 1.65;
	color: var(--tekst);
	max-width: 380px;
	margin-bottom: 6px;
}

.sectiekop--midden {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
}

.sectiekop--midden .sectiekop__intro { max-width: 520px; margin-bottom: 0; }

.sectiekop--kolom { flex-direction: column; align-items: flex-start; gap: 18px; }

.sectiekop--met-link { margin-bottom: 36px; }

/* ── Kruimelpad ──────────────────────────────────────────────────────────── */

.kruimels { margin-bottom: 26px; }

.kruimels ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--meta);
}

.kruimels li { display: flex; align-items: center; gap: 8px; }
.kruimels a { color: var(--meta); }
.kruimels a:hover { color: var(--donker); }
.kruimels [aria-current] { color: var(--donker); font-weight: 500; }
.kruimels__scheiding { color: var(--kruimel-scheiding); }

/* ── Kopbalk en navigatie ────────────────────────────────────────────────── */

.balk {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(251, 248, 244, 0.94);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.balk__binnen {
	max-width: var(--breedte);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 24px var(--marge);
}

.logo { display: block; flex: none; }
.logo__beeld { width: auto; }
.logo--26 .logo__beeld { height: 26px; }
.logo--24 .logo__beeld { height: 24px; }

.hoofdmenu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 32px;
	font-family: var(--kop);
	font-size: 15px;
	font-weight: 500;
}

.hoofdmenu__item { position: static; }

.hoofdmenu__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #2D2D44;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: color var(--overgang);
}

.hoofdmenu__link:hover,
.hoofdmenu__item.is-actief > .hoofdmenu__link { color: var(--donker); }

.hoofdmenu__item.is-knop > .hoofdmenu__link {
	background: var(--donker);
	color: #fff;
	padding: 11px 22px;
	border-radius: var(--r-pil);
	font-weight: 600;
}

.hoofdmenu__item.is-knop > .hoofdmenu__link:hover { background: #22223A; color: #fff; }

.caret {
	display: inline-block;
	font-size: 10px;
	transition: transform 0.25s ease;
}

.mega-knop[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* Megamenu */
.mega {
	position: absolute;
	top: 100%;
	left: var(--marge);
	right: var(--marge);
	background: var(--wit);
	border: 1px solid var(--rand-zacht);
	border-radius: var(--r-cta);
	padding: 40px;
	box-shadow: var(--schaduw-mega);
	display: grid;
	grid-template-columns: 1fr 0.9fr;
	gap: 40px;
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
	z-index: 20;
}

.mega:not([hidden]) { display: grid; }
.mega:not(.mega--met-promo) { grid-template-columns: 1fr; }

.mega.is-open {
	opacity: 1;
	transform: translateY(10px);
	pointer-events: auto;
}

.mega__kolommen {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.mega__kolom { display: flex; flex-direction: column; gap: 22px; }
.mega__kolom .mono { margin-bottom: 0; }

.mega__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.mega__lijst a { display: block; color: inherit; }

.mega__titel {
	display: block;
	font-family: var(--kop);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--donker);
	transition: color var(--overgang);
}

.mega__lijst a:hover .mega__titel { color: var(--accent); }

.mega__omschrijving {
	display: block;
	font-size: 14.5px;
	color: var(--meta);
	margin-top: 3px;
}

.mega__promo {
	position: relative;
	overflow: hidden;
	background: var(--donker);
	border-radius: var(--r-kaart);
	padding: 26px;
	min-height: 230px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: #fff;
}

.mega__promo .gloed {
	background:
		radial-gradient(circle at 78% 88%, rgba(255, 107, 91, 0.42) 0%, transparent 58%),
		radial-gradient(circle at 95% 12%, rgba(255, 204, 112, 0.16) 0%, transparent 55%);
}

.mega__promo-binnen { position: relative; }

.mega__promo-titel {
	font-family: var(--kop);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.2;
	color: #fff;
	margin-top: 12px;
}

.mega__promo-tekst {
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.58);
	margin-top: 6px;
}

.mega__promo .pijlknop { margin-top: 18px; }

/* Hamburger en mobiel paneel */
.hamburger {
	display: none;
	align-items: center;
	gap: 10px;
	background: none;
	border: 1.5px solid var(--rand);
	border-radius: var(--r-pil);
	padding: 10px 18px;
	font-family: var(--kop);
	font-weight: 600;
	font-size: 15px;
	color: var(--donker);
	cursor: pointer;
	min-height: 44px;
}

.hamburger__streep,
.hamburger__streep::before,
.hamburger__streep::after {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--donker);
	border-radius: 2px;
	transition: transform var(--overgang), opacity var(--overgang);
}

.hamburger__streep { position: relative; }
.hamburger__streep::before,
.hamburger__streep::after { content: ""; position: absolute; left: 0; }
.hamburger__streep::before { top: -6px; }
.hamburger__streep::after { top: 6px; }

.hamburger[aria-expanded="true"] .hamburger__streep { background: transparent; }
.hamburger[aria-expanded="true"] .hamburger__streep::before { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__streep::after { transform: translateY(-6px) rotate(-45deg); }

.mobiel {
	border-top: 1px solid var(--lijn);
	background: var(--papier);
	padding: 12px var(--marge) 28px;
	max-height: calc(100dvh - 86px);
	overflow-y: auto;
}

.mobielmenu,
.mobielmenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobielmenu__item { border-bottom: 1px solid var(--lijn); }

.mobielmenu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 12px;
	padding: 16px 0;
	min-height: 44px;
	font-family: var(--kop);
	font-size: 18px;
	font-weight: 600;
	color: var(--donker);
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
}

.mobielmenu__paneel { padding-bottom: 12px; }
.mobielmenu__paneel ul { display: flex; flex-direction: column; gap: 2px; }

.mobielmenu__paneel a {
	display: block;
	padding: 10px 0 10px 14px;
	min-height: 44px;
	font-size: 16px;
	color: var(--tekst);
}

.mobielmenu__paneel a:hover { color: var(--donker); }
.mobielmenu__groep { padding-top: 12px; }
.mobielmenu__groep > .mono { padding-left: 14px; margin-bottom: 4px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { padding-block: 52px 88px; }

.hero__raster {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--gap-kolom);
	align-items: center;
}

.hero--zonder-beeld .hero__raster { grid-template-columns: 1fr; max-width: 760px; }

.hero__tekst h1 { margin-bottom: 22px; }
.hero__tekst .label + h1 { margin-top: 0; }
.hero__beeld { position: relative; }

.zwever {
	position: absolute;
	bottom: -26px;
	left: -34px;
	width: 224px;
	background: var(--wit);
	border-radius: var(--r-kaart);
	padding: 16px;
	box-shadow: var(--schaduw-zwever);
	animation: floaty 7s ease-in-out infinite;
}

.zwever--media { width: 210px; padding: 14px; }

.zwever__titel {
	font-family: var(--kop);
	font-size: 13px;
	font-weight: 600;
	color: var(--donker);
}

.zwever__regel { font-size: 12.5px; color: var(--meta); margin-top: 6px; }
.zwever--media .zwever__regel { font-size: 12px; margin-top: 2px; }

.zwever__cijfer {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 10px;
}

.zwever__waarde {
	font-family: var(--kop);
	font-size: 38px;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--donker);
	line-height: 1;
}

.zwever__eenheid { font-size: 13px; color: var(--meta); }

@keyframes floaty {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}

/* ── Paginakop ───────────────────────────────────────────────────────────── */

.paginakop { padding-block: 52px 56px; }
.paginakop__tekst { max-width: 820px; }
.paginakop__tekst .lead { max-width: 620px; margin-top: 20px; }
.paginakop .knoppen { margin-top: 28px; }
.zoek-404 { margin-top: 32px; max-width: 520px; }

/* ── Logobalk en argumentenbalk ──────────────────────────────────────────── */

.logobalk,
.argumenten {
	padding-block: 0;
}

.logobalk__binnen,
.argumenten__binnen {
	border-top: 1px solid var(--lijn);
	border-bottom: 1px solid var(--lijn);
	display: grid;
	align-items: start;
	gap: 40px;
}

.logobalk__binnen {
	grid-template-columns: auto 1fr;
	align-items: center;
	padding-block: 36px;
}

.argumenten__binnen {
	grid-template-columns: auto 1fr;
	padding-block: 40px;
}

.argumenten__binnen > .mono { padding-top: 4px; }

.logobalk__raster {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

.logobalk__cel {
	height: 38px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.logobalk__beeld { max-height: 38px; width: auto; object-fit: contain; }

.logobalk__leeg {
	width: 100%;
	height: 100%;
	background: var(--streep);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 500;
	color: #8A8579;
	text-transform: uppercase;
}

.argumenten__raster {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.argument__titel {
	font-family: var(--kop);
	font-size: 16px;
	font-weight: 700;
	color: var(--donker);
	margin-bottom: 6px;
}

.argument__tekst { font-size: 14.5px; line-height: 1.6; color: var(--tekst-zacht); }

/* ── Kaarten ─────────────────────────────────────────────────────────────── */

.kaarten__met-beeld {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--gap-raster);
}

.kaarten__stapel {
	display: flex;
	flex-direction: column;
	gap: var(--gap-raster);
}

.kaarten__stapel .kaart:last-child { flex: 1; }

.kaart {
	background: var(--wit);
	border: 1px solid var(--rand-zacht);
	border-radius: var(--r-blok);
	padding: 34px;
	transition: border-color var(--overgang), transform var(--overgang);
}

.bg-zand .kaart { background: var(--papier); }

.kaart--donker {
	background: var(--donker);
	border-color: var(--donker);
	color: var(--op-donker);
}

.bg-zand .kaart--donker { background: var(--donker); }

.kaart--donker .kaart__titel,
.kaart--donker h3 { color: #fff; }

.kaart--stap { padding: 30px; }

.kaart:hover { border-color: var(--rand); transform: translateY(-2px); }
.kaart--donker:hover { border-color: var(--donker); }

.kaart__titel {
	font-family: var(--kop);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--donker);
	margin-bottom: 12px;
}

.kaart__titel--klein { font-size: 19px; }

.kaart .nummer + .kaart__titel,
.kaart .mono + .kaart__titel { margin-top: 14px; }

.kaart__tekst { font-size: 15px; line-height: 1.65; color: var(--tekst); }
.kaart__tekst + .kaart__tekst { margin-top: 12px; }
.kaart__tekst--klein { font-size: 14.5px; line-height: 1.6; color: var(--tekst-zacht); }
.kaart--donker .kaart__tekst { color: var(--op-donker); }

.kaart .tekstlink { margin-top: 18px; }

.stap__duur {
	display: block;
	font-size: 13px;
	color: var(--mono-kleur);
	margin-top: 14px;
}

.kaart--donker .stap__duur { color: var(--op-donker-zacht); }

.gegevens { margin: 0; }

.gegevens__rij {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 15px;
	color: var(--tekst);
}

.gegevens__rij + .gegevens__rij { margin-top: 11px; }
.gegevens dt { margin: 0; }
.gegevens dd { margin: 0; color: var(--donker); font-weight: 500; }

/* ── Cijfers ─────────────────────────────────────────────────────────────── */

.cijfers { padding-block: 56px; }

.cijfers__raster {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	margin: 0;
}

.cijfer__waarde {
	font-family: var(--kop);
	font-size: 46px;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--donker);
	line-height: 1;
}

.cijfer__tekst {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--tekst-zacht);
	margin: 8px 0 0;
}

/* ── Tekst met beeld ─────────────────────────────────────────────────────── */

.tekst-media__raster {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap-kolom);
	align-items: center;
}

.tekst-media--beeld-links .tekst-media__tekst { order: 2; }
.tekst-media--beeld-links.tekst-media--een .tekst-media__raster { grid-template-columns: 0.8fr 1.2fr; }

.tekst-media__tekst h2 {
	font-size: clamp(1.9rem, 3.1vw, 2.5rem);
	line-height: 1.1;
	margin-bottom: 20px;
}

.tekst-media__ondertitel {
	font-family: var(--kop);
	font-size: 18px;
	font-weight: 600;
	color: var(--accent);
	margin-bottom: 20px;
}

.tekst-media__tekst h2 + .tekst-media__ondertitel { margin-top: -8px; }

.tekst-media__tekst p { max-width: 520px; font-size: 17px; line-height: 1.7; }
.tekst-media__tekst p + p { margin-top: 18px; }

.tekst-media__beeld--twee {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	align-items: start;
}

.sublijst {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 520px;
	margin-top: 26px;
}

.sublijst__titel {
	font-family: var(--kop);
	font-size: 15px;
	font-weight: 700;
	color: var(--donker);
}

.sublijst__tekst {
	font-size: 14px;
	line-height: 1.5;
	color: var(--tekst-zacht);
	margin-top: 4px;
}

/* De rollenlijst op Over ons staat onder een scheidingslijn. */
.tekst-media__tekst .sublijst {
	padding-top: 26px;
	border-top: 1px solid var(--lijn-sterk);
}

/* ── Investering en prijzen ──────────────────────────────────────────────── */

.investering__raster {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap-kolom);
	align-items: center;
}

.investering__tekst h2 {
	font-size: clamp(1.9rem, 3.1vw, 2.5rem);
	line-height: 1.1;
	margin-bottom: 20px;
}

.investering__tekst p { max-width: 520px; font-size: 17px; line-height: 1.7; }
.investering__tekst p + p { margin-top: 18px; }

.prijskaart {
	background: var(--wit);
	border: 1px solid var(--rand-zacht);
	border-radius: var(--r-blok);
	padding: 38px;
}

.bg-zand .prijskaart { background: var(--papier); }
.prijskaart--tabel { padding: 34px; }

.prijs {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
}

.prijs__vanaf {
	font-family: var(--kop);
	font-size: 15px;
	font-weight: 600;
	color: var(--accent);
}

.prijs__valuta {
	font-family: var(--kop);
	font-size: 20px;
	font-weight: 700;
	color: var(--donker);
}

.prijs__bedrag {
	font-family: var(--kop);
	font-size: 52px;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--donker);
	line-height: 1;
}

.prijs__toelichting,
.prijs__periode { font-size: 15px; color: var(--tekst-zacht); }

.prijskaart__intro {
	font-size: 14.5px;
	color: var(--tekst-zacht);
	margin: 20px 0 26px;
}

.inbegrepen {
	list-style: none;
	margin: 0 0 26px;
	padding: 0 0 26px;
	border-bottom: 1px solid rgba(19, 19, 32, 0.08);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 24px;
	font-size: 14.5px;
	color: var(--tekst);
}

.prijskaart__voet {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 14.5px;
	color: var(--tekst);
}

.prijskaart__voet strong {
	font-family: var(--kop);
	font-weight: 700;
	color: var(--donker);
}

.prijsrijen { margin: 18px 0 0; }

.prijsrijen__rij {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(19, 19, 32, 0.08);
}

.prijsrijen__rij:last-child { border-bottom: 0; }
.prijsrijen dt { margin: 0; font-size: 15.5px; color: var(--tekst); }

.prijsrijen dd {
	margin: 0;
	font-family: var(--kop);
	font-size: 17px;
	font-weight: 700;
	color: var(--donker);
	white-space: nowrap;
}

.prijskaart__voetnoot {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--meta);
	margin-top: 18px;
}

/* ── Pakketten ───────────────────────────────────────────────────────────── */

.pakket {
	position: relative;
	background: var(--wit);
	border: 1px solid rgba(19, 19, 32, 0.08);
	border-radius: var(--r-blok);
	padding: 34px;
	display: flex;
	flex-direction: column;
}

.bg-zand .pakket { background: var(--papier); }

.pakket--uitgelicht {
	background: var(--donker);
	border-color: var(--donker);
	color: var(--op-donker);
}

.pakket__badge {
	position: absolute;
	top: -11px;
	left: 34px;
	background: var(--verloop);
	color: var(--donker);
	font-family: var(--kop);
	font-size: 12px;
	font-weight: 700;
	padding: 5px 14px;
	border-radius: var(--r-chip);
}

.pakket__soort {
	font-family: var(--kop);
	font-size: 14px;
	font-weight: 600;
	color: var(--accent);
}

.pakket--uitgelicht .pakket__soort { color: var(--accent-op-donker); }

.pakket__naam {
	font-family: var(--kop);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--donker);
	margin: 4px 0;
}

.pakket--uitgelicht .pakket__naam { color: #fff; }

.pakket__omschrijving { font-size: 14.5px; color: var(--tekst-zacht); margin-bottom: 22px; }
.pakket--uitgelicht .pakket__omschrijving { color: rgba(255, 255, 255, 0.55); }

.pakket .prijs { margin-bottom: 24px; }
.pakket--uitgelicht .prijs__valuta,
.pakket--uitgelicht .prijs__bedrag { color: #fff; }
.pakket--uitgelicht .prijs__periode { color: rgba(255, 255, 255, 0.5); }

.pakket__kenmerken {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-size: 14.5px;
	color: var(--tekst);
	flex: 1;
}

.pakket--uitgelicht .pakket__kenmerken { color: rgba(255, 255, 255, 0.7); }

/* ── Projecten ───────────────────────────────────────────────────────────── */

.project { display: block; color: inherit; }

.browser {
	background: var(--wit);
	border-radius: var(--r-media);
	padding: 10px;
	box-shadow: var(--schaduw-project);
	transition: transform var(--overgang), box-shadow var(--overgang);
}

.project:hover .browser {
	transform: translateY(-2px);
	box-shadow: 0 16px 46px rgba(19, 19, 32, 0.10);
}

.browser__balk { display: flex; gap: 5px; padding: 4px 6px 10px; }

.browser__stip {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #E4E0D8;
}

.browser--groot { padding: 14px; }

.project__tekst { padding: 18px 4px 0; }

.project__titel {
	font-family: var(--kop);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--donker);
	margin-top: 6px;
	transition: color var(--overgang);
}

.project:hover .project__titel { color: var(--accent); }

.project__regel {
	font-size: 14px;
	line-height: 1.55;
	color: var(--tekst-zacht);
	margin-top: 5px;
}

.projectbeeld { padding-block: 0 var(--sectie); }
.filterbalk { padding-block: 0 32px; }

/* ── Genummerde lijst ────────────────────────────────────────────────────── */

.lijst__raster {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: var(--gap-kolom);
	align-items: start;
}

.lijst__kop h2 {
	font-size: clamp(1.9rem, 3.1vw, 2.5rem);
	line-height: 1.1;
	margin-bottom: 18px;
}

.lijst__intro {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--tekst);
	max-width: 330px;
}

.lijst__items { display: flex; flex-direction: column; }

.lijstitem {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 24px;
	padding: 26px 0;
	border-top: 1px solid var(--lijn-sterk);
}

.lijstitem:last-child { border-bottom: 1px solid var(--lijn-sterk); }
.lijstitem .nummer { padding-top: 5px; }

.lijstitem__tekst h3 {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 8px;
}

.lijstitem__tekst p { font-size: 15.5px; line-height: 1.7; color: var(--tekst); }
.lijstitem__tekst p + p { margin-top: 12px; }

/* ── Citaat ──────────────────────────────────────────────────────────────── */

.citaat__raster {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: var(--gap-kolom);
	align-items: center;
}

.citaat__inhoud { margin: 0; }

.citaat__inhoud blockquote {
	font-family: var(--kop);
	font-size: 30px;
	line-height: 1.3;
	letter-spacing: -0.03em;
	font-weight: 600;
	color: var(--donker);
	margin: 20px 0 24px;
	text-wrap: pretty;
}

.citaat__inhoud blockquote::before { content: "\201C"; }
.citaat__inhoud blockquote::after { content: "\201D"; }

.citaat__bron { display: flex; align-items: center; gap: 14px; }

.avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--streep);
	flex: none;
	display: block;
}

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

.citaat__naam {
	display: block;
	font-family: var(--kop);
	font-size: 15px;
	font-weight: 700;
	color: var(--donker);
}

.citaat__functie { display: block; font-size: 14px; color: var(--meta); }

/* ── Contactblok en formulierkaart ───────────────────────────────────────── */

.contact { padding-block: 52px var(--sectie); }

.contact__raster {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: var(--gap-kolom);
	align-items: start;
}

.contact__tekst .lead { max-width: 420px; margin-bottom: 36px; }

.contactkaarten {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 420px;
}

.contactkaart {
	position: relative;
	overflow: hidden;
	background: var(--wit);
	border: 1px solid var(--rand-zacht);
	border-radius: var(--r-kaart);
	padding: 22px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	color: inherit;
	transition: border-color var(--overgang), transform var(--overgang);
}

.contactkaart:hover { border-color: var(--rand); transform: translateY(-2px); color: inherit; }

.contactkaart--donker { background: var(--donker); border-color: var(--donker); }

.contactkaart__tekst { position: relative; display: block; }
.contactkaart .pijlknop { position: relative; }

.contactkaart__waarde {
	display: block;
	font-family: var(--kop);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--donker);
	margin-top: 7px;
}

.contactkaart--donker .contactkaart__waarde { color: #fff; }

.contactkaart__regel {
	display: block;
	font-size: 14px;
	color: var(--meta);
	margin-top: 3px;
}

.contactkaart--donker .contactkaart__regel { color: rgba(255, 255, 255, 0.55); }
.contactkaart--donker .pijlknop { color: var(--donker); }

.formulierkaart {
	background: var(--wit);
	border: 1px solid var(--rand-zacht);
	border-radius: var(--r-cta);
	padding: 40px;
	box-shadow: var(--schaduw-formulier);
}

.formulierkaart__titel {
	font-family: var(--kop);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--donker);
	margin-bottom: 6px;
}

.formulierkaart__intro {
	font-size: 15px;
	line-height: 1.6;
	color: var(--tekst-zacht);
	margin-bottom: 28px;
}

.formulierkaart__voetnoot {
	font-size: 13.5px;
	color: var(--meta);
	margin-top: 18px;
}

/* ── Plaatsen ────────────────────────────────────────────────────────────── */

.plaatsen { padding-block: 72px var(--sectie); }

.plaatsen__kop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 26px;
}

.plaatsen__titel {
	font-family: var(--kop);
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: var(--donker);
}

.plaatsen__intro { font-size: 15px; color: var(--tekst-zacht); }

/* ── Oproepblok ──────────────────────────────────────────────────────────── */

.cta { padding-block: 0 56px; }

.cta__kaart {
	position: relative;
	overflow: hidden;
	background: var(--donker);
	border-radius: var(--r-cta);
	padding: 80px var(--marge);
	text-align: center;
}

.cta__binnen { position: relative; }
.cta__kaart h2 { color: #fff; font-size: clamp(2rem, 3.3vw, 2.625rem); margin-bottom: 16px; }

.cta__tekst {
	font-size: 17px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.6);
	max-width: 480px;
	margin-inline: auto;
}

.cta__tekst + .cta__tekst { margin-top: 12px; }
.cta .knoppen { margin-top: 32px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer { background: var(--zand); }

.footer__binnen {
	max-width: var(--breedte);
	margin-inline: auto;
	padding: 72px var(--marge) 32px;
}

.footer__raster {
	display: grid;
	grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 56px;
}

.footer__over {
	font-size: 15px;
	line-height: 1.7;
	color: #6E6E86;
	max-width: 280px;
	margin: 18px 0 24px;
}

.footer__gegevens {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 15px;
	color: #6E6E86;
}

.footer__gegevens a { color: #6E6E86; }
.footer__gegevens a:hover { color: var(--donker); }
.footer__plaats { color: var(--meta); }

.footer__sociaal { display: flex; gap: 10px; margin-top: 22px; }

.sociaal {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--rand-zacht);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	color: #5C5C74;
	transition: background-color var(--overgang), color var(--overgang);
}

.sociaal:hover { background: var(--donker); color: #fff; }

.footer__kop {
	font-family: var(--kop);
	font-size: 15px;
	font-weight: 700;
	color: var(--donker);
	margin-bottom: 18px;
}

.footer__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-size: 14.5px;
}

.footer__lijst a { color: #6E6E86; }
.footer__lijst a:hover { color: var(--donker); }

.footer__onder {
	border-top: 1px solid rgba(19, 19, 32, 0.09);
	padding-top: 26px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

.footer__meta,
.footer__juridisch {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13.5px;
	color: var(--meta);
}

.footer__juridisch a { color: var(--meta); }
.footer__juridisch a:hover { color: var(--donker); }

/* ── Kennisbank, archieven en losse tekstpagina's ────────────────────────── */

.bericht__link { display: block; color: inherit; }

.bericht__titel {
	font-family: var(--kop);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--donker);
	margin-top: 8px;
	transition: color var(--overgang);
}

.bericht__link:hover .bericht__titel { color: var(--accent); }

.bericht__regel {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--tekst-zacht);
	margin-top: 6px;
}

.artikel { padding-block: 52px var(--sectie); }
.artikel__titel { margin: 10px 0 20px; font-size: clamp(2.2rem, 4vw, 3rem); }
.artikel .lead { max-width: none; }

.rijketekst { font-size: 17px; line-height: 1.75; }
.rijketekst > * + * { margin-top: 22px; }
.rijketekst h2 { font-size: clamp(1.7rem, 2.6vw, 2.1rem); margin-top: 44px; }
.rijketekst h3 { font-size: 21px; margin-top: 34px; }
.rijketekst ul,
.rijketekst ol { padding-left: 22px; }
.rijketekst li + li { margin-top: 8px; }
.rijketekst img { border-radius: var(--r-media); }

.rijketekst blockquote {
	margin: 0;
	padding-left: 22px;
	border-left: 2px solid var(--accent);
	font-family: var(--kop);
	font-size: 21px;
	font-weight: 600;
	color: var(--donker);
}

.rijketekst table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.rijketekst th,
.rijketekst td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--lijn-sterk); }

.tekstpagina { padding-block: 0 var(--sectie); }

.resultaten { list-style: none; margin: 32px 0 0; padding: 0; }

.resultaten li { border-top: 1px solid var(--lijn-sterk); }
.resultaten li:last-child { border-bottom: 1px solid var(--lijn-sterk); }
.resultaten a { display: block; padding: 22px 0; color: inherit; }

.resultaten__titel {
	display: block;
	font-family: var(--kop);
	font-size: 19px;
	font-weight: 700;
	color: var(--donker);
	letter-spacing: -0.02em;
}

.resultaten__regel { display: block; font-size: 15px; color: var(--tekst-zacht); margin-top: 4px; }

.zoekformulier { display: flex; gap: 12px; flex-wrap: wrap; }

.zoekformulier input[type="search"] {
	flex: 1;
	min-width: 220px;
	border: 1.5px solid var(--rand);
	border-radius: var(--r-veld);
	padding: 14px 16px;
	font-family: var(--body);
	font-size: 15px;
	background: var(--wit);
	color: var(--donker);
}

.zoekformulier input[type="search"]:focus { outline: 2px solid var(--koraal); outline-offset: 1px; }

.leeg { font-size: 17px; color: var(--tekst-zacht); }
.bewerklink { font-size: 14px; margin-top: 32px; }

.pagination { margin-top: 48px; }

.pagination .nav-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	font-family: var(--kop);
	font-weight: 600;
	font-size: 15px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: var(--r-chip);
	border: 1px solid var(--rand-zacht);
	color: var(--donker);
	background: var(--wit);
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover { background: var(--donker); border-color: var(--donker); color: #fff; }

/* ── Responsief ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
	:root { --marge: 40px; --sectie: 76px; --gap-kolom: 40px; }

	.raster--3,
	.raster--4 { grid-template-columns: repeat(2, 1fr); }
	.logobalk__raster { grid-template-columns: repeat(3, 1fr); }
	.cijfers__raster { grid-template-columns: repeat(2, 1fr); }
	.mega__kolommen { grid-template-columns: repeat(2, 1fr); }
	.footer__raster { grid-template-columns: 1.35fr 1fr 1fr; }
}

@media (max-width: 980px) {
	/* Onder deze breedte past het hoofdmenu niet meer; we gaan naar het paneel. */
	.balk__nav { display: none; }
	.hamburger { display: inline-flex; }
	.balk__binnen { padding-block: 18px; }
}

@media (max-width: 820px) {
	:root {
		--marge: 24px;
		--sectie: 56px;
		--gap-raster: 16px;
		--gap-kolom: 32px;
	}

	h1 { font-size: clamp(2rem, 8vw, 2.5rem); }
	h2 { font-size: clamp(1.75rem, 6.5vw, 2rem); }

	.raster--2,
	.raster--3,
	.raster--4 { grid-template-columns: 1fr; }

	.hero { padding-block: 32px 64px; }
	.hero__raster,
	.tekst-media__raster,
	.investering__raster,
	.lijst__raster,
	.citaat__raster,
	.contact__raster,
	.kaarten__met-beeld { grid-template-columns: 1fr; }

	.tekst-media--beeld-links.tekst-media--een .tekst-media__raster { grid-template-columns: 1fr; }

	/* Het beeld komt onder de tekst, ook wanneer het in het ontwerp links stond. */
	.tekst-media--beeld-links .tekst-media__tekst { order: 0; }
	.hero__beeld { order: 2; }

	.zwever { position: static; width: auto; margin-top: 18px; animation: none; }

	.sectiekop { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
	.sectiekop__intro { max-width: none; margin-bottom: 0; }

	.logobalk__binnen,
	.argumenten__binnen { grid-template-columns: 1fr; gap: 24px; }
	.argumenten__raster { grid-template-columns: 1fr; gap: 24px; }
	.logobalk__raster { grid-template-columns: repeat(2, 1fr); }

	.cijfers__raster { grid-template-columns: 1fr 1fr; gap: 28px; }
	.sublijst { grid-template-columns: 1fr; gap: 16px; }
	.inbegrepen { grid-template-columns: 1fr; }

	.kaart,
	.prijskaart,
	.formulierkaart { padding: 26px; }

	.cta__kaart { padding: 56px 26px; }
	.cta .knoppen { flex-direction: column; align-items: stretch; }
	.cta .knop { width: 100%; }

	.footer__raster { grid-template-columns: 1fr 1fr; gap: 32px; }
	.footer__binnen { padding-block: 56px 24px; }
	.plaatsen__kop { flex-direction: column; gap: 10px; }
	.tekst-media__beeld--twee { grid-template-columns: 1fr 1fr; }
	.fotovlak--versprongen { margin-top: 20px; }
}

@media (max-width: 520px) {
	.footer__raster { grid-template-columns: 1fr; }
	.cijfers__raster { grid-template-columns: 1fr; }
	.knoppen .knop { width: 100%; }
}

/* ── Bewegingsvoorkeur ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.zwever { animation: none; }
}