/*
 * 50 — Componenten
 *
 * Herbruikbare klassen, overgezet uit de oude database-CSS.
 *
 * LET OP — NIETS HERNOEMEN. Deze klassenamen zijn met de hand ingetypt in het
 * "CSS Class"-veld van Divi-modules, verspreid over tientallen paginas:
 *   .cta-row 52 · .secundairy-btn 52 · .dark-block 46 · .campagne-dark-textblock 33
 *   .cta-block 14 · .cta-block-btn 14 · .home-cta-block 13 · .usp-block 9
 *   .pricelist 6 · .title-row 5 · .header-home 4 · .dienst-block 4 · .subtekst 4
 *   .dienst-list 3 · .info-block 2 · .btn-light 2 · .primairy-btn 1
 * Hernoemen breekt die paginas zonder enige foutmelding. De spelfouten in
 * .primairy-btn en .secundairy-btn zijn dus opzettelijk — laten staan.
 *
 * Responsive regels staan bij hun basisregel, niet in één blok achteraan.
 * 980px is Divi's eigen breekpunt; daarom houden we dat aan.
 *
 * ── Waarom staan sommige oude klassen er dubbel in? ──
 * `.header-home.header-home h1`, `.cta-block.cta-block h2`, `.cta-row.cta-row h2`,
 * `.dienst-block.dienst-block h3`, `.dienst-header…`, `.diensten-header…`.
 * Dat is géén tikfout en géén hernoeming: de klasse blijft precies hetzelfde,
 * de selector wordt alleen (0,2,1) in plaats van (0,1,1). Nodig sinds
 * 10-base.css Divi's kolomverkleining uitzet met een regel van (0,1,2) — zonder
 * die verdubbeling zouden deze koppen in een 1/3- of 1/4-kolom hun oude maat
 * verliezen en meebewegen met de nieuwe schaal. Deze blokken horen juist
 * ONgewijzigd te blijven tot de herbouw bij hun pagina is.
 */

/* ── Header-home ────────────────────────────────────────────────────────── */

.header-home .et_pb_row,
.header-home {
	padding-bottom: 0px !important;
}

.header-home.header-home h1 {
	font-size: 36px;
}

.header-home .et_pb_column:first-child {
	display: flex;
	align-items: center;
}

@media only screen and (max-width: 500px) {
	.header-home img {
		width: 50% !important;
	}
}

span.subtekst {
	color: #2f2736;
	font-size: 24px;
	font-weight: 600;
}

span.linktekst {
	margin-top: 30px;
	display: block;
	color: #000000;
}

.linktekst a {
	color: #000000;
	text-decoration: underline;
}

/* ── Blokken ────────────────────────────────────────────────────────────── */

/* Was paars (#2F2736); nu taupe en afgerond, zoals .home-cta-block en de
 * CTA-balk. De maat (30px, geen brede clamp) blijft: dit blok staat in een
 * smalle kolom. */
.cta-block {
	padding: 30px;
	border-radius: var(--kdm-radius-md);
	background-color: var(--kdm-cta-bg);
}

.cta-block.cta-block h2 {
	color: white;
	font-size: 19px;
	text-transform: none;
}

.cta-block p {
	color: white;
}

@media only screen and (max-width: 980px) {
	.cta-block {
		margin-bottom: 30px !important;
	}
}

.dark-block {
	background-color: var(--kdm-cream);
}

/* Op sommige paginas heeft de rij zelf nog het oude paars (#2f2736) in de
 * module-instellingen; Divi print dat als `.et_pb_row_N` (0,1,0) op wp_head 99,
 * ná ons. Twee klassen (0,2,0) winnen op specificiteit, ongeacht volgorde. */
.dark-block .et_pb_row {
	background-color: transparent;
}

.dark-block p {
	color: var(--kdm-ink);
}

.dark-block i,
.dark-block h2 {
	color: var(--kdm-ink);
	display: inline-block;
}

.dark-block a {
	color: var(--kdm-ink) !important;
}

.dark-block ul {
	margin-top: 30px;
}

.dark-block li {
	color: var(--kdm-ink);
}

/* Zelfde uiterlijk als .kdm-cta-band (CTA-balk verderop): taupe, afgerond,
 * witte tekst, lichte pil als knop. Dit is een losse <div> in een tekstmodule
 * (13 paginas), geen rij — de flexlayout van de balk hoort hier dus niet bij. */
.home-cta-block {
	padding: var(--kdm-s-7) clamp(var(--kdm-s-5), 4vw, var(--kdm-s-8));
	border-radius: var(--kdm-radius-md);
	background-color: var(--kdm-cta-bg);
}

.home-cta-block strong {
	margin-bottom: -10px;
	color: #ffffff;
}

.home-cta-block p {
	color: #ffffff;
}

/* De knop erin (a.cta-block-btn) is verderop bij "Knoppen" als lichte pil
 * gestyled — dat geldt hier én in .cta-block. */

/* .campagne-dark-textblock
 *
 * Stond hier oorspronkelijk als `.campagne-dark-textblock ul, li { ... }`.
 * Door die komma was `li` een losse selector en kreeg ELKE <li> op de site
 * color:#fff !important — geverifieerd: alle 148 op een willekeurige pagina.
 * Dat viel niet op omdat de meeste lijstitems menu-items op een donkere balk
 * waren, maar de items in het cookievoorkeuren-venster van Moove stonden er
 * wit-op-wit door, dus onzichtbaar zodra dat venster openging.
 *
 * In fase 3 bewust laten staan (een verplaatsing hoort niets te veranderen),
 * want het oude hoofdmenu leunde erop: zonder deze regel vielen de menulinks
 * terug op Divi's menu_link (#dbdbdb). Sinds fase 5 heeft de navigatie eigen
 * kleuren in 30-header.css en is die afhankelijkheid weg, dus nu gescoped
 * zoals altijd de bedoeling was. */
.campagne-dark-textblock p {
	color: var(--kdm-ink) !important;
}

.campagne-dark-textblock h2 {
	color: var(--kdm-ink) !important;
}

.campagne-dark-textblock a {
	color: var(--kdm-ink);
	font-weight: bold;
}

.campagne-dark-textblock ul,
.campagne-dark-textblock li {
	color: var(--kdm-ink) !important;
}

/* Inline perzikkleur in de content zelf: <span style="color: #f1c0ae;">, op 24
 * pagina's ingetypt in de editor. Een inline style verliest alleen van
 * !important; de attribuutselector pakt precies die kleur en niets anders,
 * zodat iconen en andere gekleurde spans ongemoeid blijven. De `i`-vlag maakt
 * de match hoofdletterongevoelig (#f1c0ae en #F1C0AE komen beide voor). */
[style*="#f1c0ae" i] {
	color: var(--kdm-ink) !important;
}

/* ── Rijen en titels ────────────────────────────────────────────────────── */

.title-row {
	padding-bottom: 10px !important;
}

.title-row + .et_pb_row {
	padding-top: 0px !important;
}

.title-row i {
	font-size: 22px;
	margin-right: 20px;
}

.cta-row {
	margin-top: 28px;
	margin-bottom: 28px;
	background-position: bottom;
}

.cta-row .et_pb_text_inner {
	display: flex;
	justify-content: space-between;
	padding: 0 30px;
}

.cta-row.cta-row h2 {
	color: #2F2736;
	font-weight: bold;
	font-size: 20px;
	display: flex;
	align-items: center;
	padding-bottom: 0px;
}

.cta-dark h2 {
	color: white;
}

/* De donkere variant krijgt het uiterlijk van .kdm-cta-band (zie CTA-balk
 * verderop): taupe, afgerond, zonder foto. De rij heeft in de builder nog een
 * achtergrondfoto met blend-modus en paars (#564168) ingesteld; Divi print die
 * als `.et_pb_row_6 { … }` (0,1,0) op wp_head 99+. Drie klassen (0,3,0) winnen
 * daar ongeacht volgorde van. Ook de kop moet hier: `.cta-row.cta-row h2`
 * hierboven (0,2,1) sloeg `.cta-dark h2` (0,1,1) en zette hem donker. */
.et_pb_row.cta-row.cta-dark {
	width: 90%;
	max-width: var(--kdm-container-grid);
	margin-top: var(--kdm-s-9);
	padding: var(--kdm-s-7) clamp(var(--kdm-s-5), 4vw, var(--kdm-s-8));
	border-radius: var(--kdm-radius-md);
	background-color: var(--kdm-cta-bg);
	background-image: none;
	background-blend-mode: normal;
}

.cta-row.cta-dark h2 {
	color: #fff;
}

/* De knop in die balk krijgt het uiterlijk van de lichte pil (.kdm-pill--light
 * op body .et_pb_button.et_pb_button in 60-modules.css): lichte pil met
 * donkere tekst, zodat hij op de taupe balk staat zoals in .kdm-cta-band.
 * Bewust alleen binnen .cta-dark: a.secundairy-btn staat op 52 modules, ook op
 * crème, en daar zou een lichte knop wegvallen. (0,3,1) wint van
 * a.secundairy-btn (0,1,1), van de opacity-hover en van `p a` in 10-base.css. */
.cta-row.cta-dark a.secundairy-btn {
	padding: 13px 30px;
	border: 0;
	border-radius: var(--kdm-radius-pill);
	background-color: var(--kdm-shell);
	color: var(--kdm-on-light-cta);
	font-family: var(--kdm-font-ui);
	font-size: 14px;
	font-weight: 600; /* Poppins is alleen als SemiBold (600) geladen, zie 00-tokens.css */
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	opacity: 1;
	transition: background-color var(--kdm-t-base) var(--kdm-ease);
}

.cta-row.cta-dark a.secundairy-btn:hover {
	background-color: #fff;
	opacity: 1;
}

/* Het pijltje (<i class="fad fa-arrow-right">) staat in de content; de pil
 * heeft er geen, dus weg ermee. */
.cta-row.cta-dark a.secundairy-btn i {
	display: none;
}

@media only screen and (max-width: 980px) {
	.cta-row .et_pb_text_inner {
		flex-direction: column;
	}

	.cta-row a.secundairy-btn {
		margin-top: 30px;
	}
}

/* .behandeling-row
 *
 * Stond als `.behandeling-row { padding: 14px }` in de database en printte daar
 * op wp_head 101, ná Divi, waardoor hij won van Divi's eigen .et_pb_row-padding
 * — beide (0,1,0), dus de volgorde besliste. Vanuit css/ printen we op
 * wp_head 8 en verloor de regel.
 *
 * Opgelost met specificiteit in plaats van volgorde: de klasse zit altijd op
 * een .et_pb_row (geverifieerd in de DOM), dus (0,2,0) wint ongeacht wie eerst
 * print. Robuuster dan de regel naar 90-late-overrides.css schuiven. */
.et_pb_row.behandeling-row {
	padding: 14px;
}

/* ── Knoppen ────────────────────────────────────────────────────────────── */

a.primairy-btn {
	padding: 15px 30px;
	color: #2f2736;
	background-color: white;
	display: inline-flex;
	margin-top: 20px;
	align-items: center;
	display: inline-block;
	transition: 0.3s;
}

/* Was de oude paarse knop (#2f2736). Nu de taupe pil, gelijk aan de
 * standaardknop (body .et_pb_button.et_pb_button in 60-modules.css) — dit
 * zijn losse <a>'s in tekstmodules, dus die regel raakt ze niet vanzelf.
 * Binnen .cta-row.cta-dark wint de lichte variant hierboven (0,3,1). */
a.secundairy-btn {
	padding: 13px 30px;
	display: inline-block;
	border-radius: var(--kdm-radius-pill);
	background-color: var(--kdm-cta-bg);
	color: var(--kdm-on-cta);
	font-family: var(--kdm-font-ui);
	font-size: 14px;
	font-weight: 600; /* Poppins is alleen als SemiBold (600) geladen, zie 00-tokens.css */
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	transition: background-color var(--kdm-t-base) var(--kdm-ease);
}

a.secundairy-btn:hover {
	background-color: var(--kdm-cta-bg-hover);
	opacity: 1; /* wint van de gedeelde opacity-hover hieronder */
}

/* De pil heeft geen pijltje; het <i class="fad fa-arrow-right"> zit in de
 * content van de modules, dus hier verbergen (net als in .cta-dark). */
a.secundairy-btn i {
	display: none;
}

/* Was grijs (#aaa); nu de taupe pil, gelijk aan a.secundairy-btn hierboven.
 * De content heeft een inline <span style="color: #ffffff">, die klopt op
 * taupe gewoon. */
a.btn-light {
	padding: 13px 30px;
	display: inline-block;
	border-radius: var(--kdm-radius-pill);
	background-color: var(--kdm-cta-bg);
	color: var(--kdm-on-cta);
	font-family: var(--kdm-font-ui);
	font-size: 14px;
	font-weight: 600; /* Poppins is alleen als SemiBold (600) geladen, zie 00-tokens.css */
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	transition: background-color var(--kdm-t-base) var(--kdm-ease);
}

a.btn-light:hover {
	background-color: var(--kdm-cta-bg-hover);
	opacity: 1;
}

/* De pil heeft geen pijltje; het <i class="fad fa-arrow-right"> zit in de
 * content, dus verbergen. */
a.btn-light i {
	display: none;
}

a.primairy-btn:hover {
	opacity: 0.8;
}

a.primairy-btn i {
	margin-left: 15px;
	font-size: 12px;
}

/* Was wit-op-paars; nu de lichte pil (zoals .kdm-pill--light). De knop staat
 * altijd op een taupe vlak: in .cta-block en in .home-cta-block. */
a.cta-block-btn {
	padding: 13px 30px;
	display: inline-block;
	border-radius: var(--kdm-radius-pill);
	background-color: var(--kdm-shell);
	color: var(--kdm-on-light-cta);
	font-family: var(--kdm-font-ui);
	font-size: 14px;
	font-weight: 600; /* Poppins is alleen als SemiBold (600) geladen, zie 00-tokens.css */
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	transition: background-color var(--kdm-t-base) var(--kdm-ease);
}

a.cta-block-btn:hover {
	background-color: #fff;
}

/* De pil heeft geen pijltje; het <i class="fad fa-arrow-right"> zit in de
 * content, dus verbergen. */
a.cta-block-btn i {
	display: none;
}

/* Was de oude paarse knop (#2F2736); nu de taupe pil, gelijk aan
 * a.secundairy-btn hierboven. */
a.cta-block-btn-dark {
	padding: 13px 30px;
	display: inline-block;
	border-radius: var(--kdm-radius-pill);
	background-color: var(--kdm-cta-bg);
	color: var(--kdm-on-cta);
	font-family: var(--kdm-font-ui);
	font-size: 14px;
	font-weight: 600; /* Poppins is alleen als SemiBold (600) geladen, zie 00-tokens.css */
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	transition: background-color var(--kdm-t-base) var(--kdm-ease);
}

a.cta-block-btn-dark:hover {
	background-color: var(--kdm-cta-bg-hover);
}

/* De pil heeft geen pijltje; het <i class="fad fa-arrow-right"> zit in de
 * content, dus verbergen. */
a.cta-block-btn-dark i {
	display: none;
}

/* ── Diensten ───────────────────────────────────────────────────────────── */

.dienst-block .et_pb_text_inner {
	display: flex;
	justify-content: center;
	padding: 50px 0;
	color: #2f2736;
}

.dienst-block .et_pb_text_inner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background-color: #ffffffc4;
	display: block;
	width: 100%;
	height: 100%;
	transition: 0.8s;
}

.dienst-block:hover .et_pb_text_inner::before {
	background-color: #857F739E; /* --kdm-taupe met alpha; hex met alpha ipv token omdat de doorzicht hier de maat is */
	transition: 0.3s;
}

.dienst-block.dienst-block h3 {
	z-index: 9;
	min-height: 75px;
	display: flex;
	align-items: center;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	line-height: 1.4em;
}

.dienst-block:hover h3 {
	color: white;
	transition: 0.3s;
}

.dienst-list p {
	display: flex;
	justify-content: space-between;
	color: white;
	border-bottom: 1px solid white;
	padding: 20px 0 !important;
}

.dienst-list a {
	font-weight: bold;
	color: #f1c0ae;
}

@media only screen and (max-width: 980px) {
	.dienst-list p:first-child {
		padding-top: 0px !important;
	}
}

.dienst-header {
	padding: 0 !important;
}

/* De foto zit als achtergrond in de sectie-instellingen van tientallen
 * paginas; hier onderdrukken ipv overal weghalen. Divi print die met
 * !important op `div.et_pb_section.et_pb_section_N` (0,2,1), dus drie
 * klassen (0,3,0) om óók binnen !important te winnen. */
.et_pb_section.dienst-header.dienst-header {
	background-image: none !important;
}

.dienst-header.dienst-header h1 {
	text-align: center;
	font-weight: normal;
	color: var(--kdm-ink) !important; /* !important: redacteuren hebben op sommige pagina's een kopkleur in de module gezet, die print Divi later */
	display: inline-block;
}

.dienst-header .et_pb_text_inner {
	display: flex;
	justify-content: center;
}

.dienst-header img {
	max-width: 120px !important;
}

@media only screen and (max-width: 980px) {
	.dienst-header {
		margin-top: 0px !important;
		padding: 0 !important;
	}
}

/* De h1 zit in een tekstmodule met klasse .diensten-header (mét "en"), altijd
 * binnen een .dienst-header-sectie (60 paginas geteld, geen uitzonderingen).
 * Zwart, net als de sectieregel hierboven — de achtergrondfoto is weg. */
.diensten-header.diensten-header h1 {
	color: var(--kdm-ink) !important;
}

/* Redacteuren hebben in de kop soms een <span style="color: #f1c0ae"> gezet.
 * De attribuutselector `[style*="#f1c0ae" i]` hierboven maakt die inkt; hier
 * volgt hij de kop. Allebei !important, dus specificiteit beslist: (0,2,2)
 * tegen (0,1,0). */
.dienst-header.dienst-header h1 span,
.diensten-header.diensten-header h1 span {
	color: var(--kdm-ink) !important;
}

/* ── Info- en contactblokken ────────────────────────────────────────────── */

.info-block span.et_pb_image_wrap {
	max-height: 350px;
	overflow: hidden;
}

.info-block span.et_pb_image_wrap img {
	object-fit: fill;
}

.info-block .et_pb_blurb_content {
	background-color: var(--kdm-taupe);
	color: #fff;
}

/* Divi zet `h1…h6 { color: #333 }` op het kopelement zelf; geërfde kleur van
 * de wrapper verliest daar altijd van, dus de kop apart benoemen. */
.info-block .et_pb_blurb_content :is(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

.info-block .et_pb_blurb_container {
	padding: 50px;
}

.info-block .et_pb_main_blurb_image {
	margin-bottom: 0px;
}

@media only screen and (max-width: 980px) {
	.info-block .et_pb_blurb_content {
		max-width: unset;
	}

	.info-block span.et_pb_image_wrap {
		max-height: 300px !important;
		overflow: hidden;
	}
}

.contact-block i {
	color: #2f2736;
	margin-right: 10px;
	font-size: 14px;
}

.usp-block strong {
	display: block;
	margin-bottom: 10px;
}

.usp-block i {
	margin-right: 10px;
}

@media only screen and (max-width: 980px) {
	.usp-block {
		margin-bottom: 20px !important;
	}
}

/* ── Secties en media ───────────────────────────────────────────────────── */

.tekst-section h2,
.tekst-section p {
	margin-bottom: 10px;
}

.maps-section iframe {
	margin-bottom: -9px;
}

.image-small img {
	max-height: 350px;
}

.img-300 img {
	min-width: 260px;
}

.three-img div {
	width: 200px;
	height: auto;
}

.chantal-foto-container img {
	width: 75% !important;
}

@media only screen and (max-width: 980px) {
	.intro-section .et_pb_row {
		display: flex;
		flex-direction: column-reverse;
	}

	.tp-intro {
		display: flex;
		flex-direction: column-reverse;
	}
}

/* ── Lijsten ────────────────────────────────────────────────────────────── */

.wratten-lijst li {
	color: #666666 !important;
}

.recente-berichten li {
	font-weight: bold;
	padding-bottom: 10px;
}

/* ── Prijslijst ─────────────────────────────────────────────────────────── */

/* De responsive weergave hiervan leunt op de data-th attributen die
 * js/tables.js op de tabelcellen zet (in fase 4 uit footer.php gehaald). */
.pricelist thead {
	color: var(--kdm-on-cta);
	background: var(--kdm-cta-bg);
	font-weight: bold;
}

/* In oude tabellen staat het paars als inline style op de <th> zelf
 * (style="background: #2F2736; color: #fff"), en een inline style verliest
 * alleen van !important. Die tabellen heten `prijs` in plaats van `pricelist`
 * en hebben geen <thead> — de th-rij zit gewoon in de tbody. */
.pricelist th,
.prijs th {
	background: var(--kdm-cta-bg) !important;
	color: var(--kdm-on-cta) !important;
}

.pricelist tbody tr:nth-child(odd) {
	color: #666;
	background: #eee;
}

.pricelist tbody tr:nth-child(even) {
	color: #666;
	background: #fff;
}

.pricelist tbody tr td:nth-child(1),
.pricelist thead tr td:nth-child(1) {
	min-width: 0px;
}

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

/* Bedoeld voor een Divi-sectie met de klasse .kdm-hero. In de builder zet je
 * alleen de achtergrondafbeelding (Achtergrond → Afbeelding, formaat "cover",
 * positie "midden"); alle typografie, kleur en ruimte komt hieronder vandaan,
 * zodat de hero in git staat en niet in de moduleinstellingen.
 *
 * De sectie krijgt geen eigen padding van Divi meer — die zetten we hier — dus
 * laat "Aangepaste opvulling" in de builder leeg. */
/* Het tekstblok staat onderin, niet gecentreerd: op de foto ligt links
 * onderin de rustigste hoek, en zo krijgt het gezicht rechtsboven de ruimte.
 * De 70px eronder is een vaste maat uit het ontwerp en bewust geen token —
 * hij hoort bij deze foto, niet bij de ruimteschaal van de site. */
.et_pb_section.kdm-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(72vh, 640px);
	padding: var(--kdm-s-9) 0 70px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Verloop van links, zodat de witte tekst leesbaar blijft over een foto die
 * links licht kan uitvallen. Onder ::before, want Divi's eigen overlay zit al
 * op de sectie zelf. */
.et_pb_section.kdm-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgb(42 41 37 / 0.72) 0%,
		rgb(42 41 37 / 0.45) 38%,
		rgb(42 41 37 / 0) 68%
	);
	pointer-events: none;
}

/* De hero loopt breder dan de rest van de site: 1340px in plaats van de 1140px
 * die Divi's content_width aan elke .et_pb_row geeft. Die instelling zelf
 * blijft met rust — hij geldt globaal en zou alle andere paginas meeslepen.
 *
 * Divi print `.et_pb_row { max-width: 1140px }` op wp_head 99, ná ons; met
 * (0,3,0) tegen zijn (0,1,0) wint dit op specificiteit. De `width` moet mee,
 * anders houdt Divi's eigen 80% de rij op ~1130px en zie je van de extra
 * breedte niets terug. */
.et_pb_section.kdm-hero > .et_pb_row {
	position: relative;  /* boven het verloop */
	z-index: 1;
	width: 90%;
	max-width: var(--kdm-container-wide);
	/* Divi geeft elke rij `padding: 2% 0`. Dat is een percentage van de
	 * containerbreedte, dus het groeit mee met het scherm — op 1440px komt er
	 * zo'n 27px onder de knop bij en klopt de 70px uit het ontwerp niet meer.
	 * De ruimte hoort hier bij de sectie, niet bij de rij. */
	padding: 0;
	/* !! Deze marge is wat het blok onderin houdt, niet align-items !!
	 * Divi zet `margin: auto` op elke rij, voor het horizontaal centreren. In
	 * een flexcontainer pakt een auto-marge de vrije ruimte in BEIDE richtingen,
	 * dus `margin-top: auto` en `margin-bottom: auto` centreerden het blok
	 * verticaal — en auto-marges gaan vóór align-items, dus dat had geen effect.
	 *
	 * `auto auto 0` = boven auto (duwt het blok omlaag), links/rechts auto
	 * (centreren blijft), onder 0 (de 70px komt van de sectie). */
	margin: auto auto 0;
}

/* Eén tekstkolom, links, ongeveer de helft van de containerbreedte. Op mobiel
 * loopt hij vol, want dan is er geen ruimte om de foto naast de tekst te
 * laten zien. */
.kdm-hero__content {
	max-width: 34rem;
	color: #fff;
}

/* Grootte, gewicht en regelafstand komen van de koppenschaal in 10-base.css;
 * hier staat alleen wat in de hero anders is. */
.kdm-hero__content h1 {
	margin-bottom: var(--kdm-s-5);
	padding-bottom: 0;
	color: #fff;
	letter-spacing: var(--kdm-ls-tight);
}

.kdm-hero__content p {
	/* margin-bottom: var(--kdm-s-6); */
	color: #fff;
	font-size: var(--kdm-size-lg);
	line-height: var(--kdm-lh-body);
}

.kdm-hero__content p:last-child {
	margin-bottom: 0;
}

@media only screen and (max-width: 980px) {
	.et_pb_section.kdm-hero {
		min-height: 0;
		padding: var(--kdm-s-8) 0;
	}

	.kdm-hero__content {
		max-width: none;
	}
}

/* ── Knop op de hero ────────────────────────────────────────────────────── */

/* De vorm van de knop (pil, taupe, 16px) is de standaard en staat in
 * 60-modules.css. Hier staat alleen wat de hero anders doet: op de foto moet
 * de knop juist licht zijn.
 *
 * Dit bestand print vóór 60-modules.css, maar wint op specificiteit:
 * (0,3,0) tegen de (0,2,1) van de standaardknop. */
.et_pb_button.kdm-pill--light.kdm-pill--light,
.et_pb_button.kdm-pill--light.kdm-pill--light:hover {
	background-color: var(--kdm-shell);
	color: var(--kdm-on-light-cta);
}

.et_pb_button.kdm-pill--light.kdm-pill--light:hover {
	background-color: #fff;
}

/* De focusring uit 10-base.css is donker; op de lichte knop op de hero-foto
 * valt die weg tegen het beeld. Alleen daar dus wit. */
.kdm-hero .et_pb_button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: var(--kdm-ring-offset);
}

/* ── Introsectie ────────────────────────────────────────────────────────── */

/* Gecentreerd tekstblok op de crèmegrond, direct onder de hero: een citaat,
 * daaronder een vraag met een regel eronder, en een knop. */
.et_pb_section.kdm-intro {
	padding: var(--kdm-s-9) 0;
	background-color: var(--kdm-cream);
	text-align: center;
}

/* Het citaat. Groter dan de body maar kleiner dan een h2 — het is geen kop,
 * dus het staat bewust niet op --kdm-size-h2.
 *
 * De maximumbreedte is krapper dan de rij (ongeveer 62 tekens per regel). Dat
 * is de reden dat dit blok bestaat: zonder grens loopt het citaat over de
 * volle 1140px en wordt het onleesbaar. */
.kdm-intro__quote {
	max-width: 42rem;
	margin: 0 auto;
	color: var(--kdm-ink);
	font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
	line-height: 1.5;
}

.kdm-intro__quote strong {
	font-weight: 600;
}

/* Het blok onder het citaat: vraag (nadruk) + antwoordregel (rustiger). */
.kdm-intro__cta {
	margin-top: var(--kdm-s-7);
}

.kdm-intro__cta p {
	margin: 0;
	font-size: var(--kdm-size-base);
	line-height: var(--kdm-lh-body);
}

.kdm-intro__cta strong {
	font-weight: 600;
}

/* De tweede regel rustiger dan de eerste. Op de klasse en niet op
 * `p:last-child`, zodat er een derde regel bij kan zonder dat de nadruk
 * verspringt. */
.kdm-intro__cta .kdm-intro__sub {
	color: var(--kdm-ink-soft);
}

/* Divi geeft elke module 30px ondermarge; de knop hangt daardoor los van de
 * tekst erboven. Hier bepaalt de sectie de ruimte.
 *
 * De text-align moet erbij, en met een dubbele klasse. De sectie staat op
 * `text-align: center`, maar Divi zet op de knopwikkel zelf
 * `.et_pb_button_module_wrapper.et_pb_button_alignment_left { text-align: left }`
 * — en een regel die het element zélf raakt wint altijd van een geërfde
 * waarde, hoe specifiek die erfenis ook is. Gelijke specificiteit (0,2,0)
 * verliezen we bovendien op volgorde, dus (0,3,0).
 *
 * Kan ook zonder CSS: knopmodule → Ontwerp → Uitlijning op "Gecentreerd". Dan
 * ruilt Divi de klasse om naar _center. Het staat hier omdat de hele sectie
 * gecentreerd is en dat niet per module ingesteld hoeft te worden. */
.kdm-intro .et_pb_button_module_wrapper.et_pb_button_module_wrapper {
	margin-top: var(--kdm-s-5);
	text-align: center;
}

@media only screen and (max-width: 980px) {
	.et_pb_section.kdm-intro {
		padding: var(--kdm-s-8) 0;
	}
}

/* ── Split content ──────────────────────────────────────────────────────── */

/* Beeld naast tekst. Twee varianten:
 *   .kdm-split            beeld links, tekst rechts
 *   .kdm-split--reverse   tekst links, beeld rechts
 *
 * De variant zegt alleen wélke kolom breed is; de volgorde bepaal je in de
 * builder door de modules in de juiste kolom te zetten. Geen `direction: rtl`
 * of `order`, want dat haalt de voorleesvolgorde uit elkaar: een schermlezer
 * en het toetsenbord volgen de DOM, niet de weergave.
 *
 * De verhouding 8:11 komt uit het ontwerp (kolommen van het 24-koloms
 * raster). Ik heb er fr-eenheden van gemaakt in plaats van een raster van 24
 * kolommen: in het ontwerp loopt dat raster over het hele scherm, terwijl deze
 * sectie op 1200px zit — 8 en 11 van die kolommen passen dus niet één op één
 * binnen de container. De verhouding klopt zo wél, en de tussenruimte is een
 * echte maat in plaats van "wat er overblijft". */
.et_pb_section.kdm-split,
.et_pb_section.kdm-split--reverse {
	/* Bewust geen achtergrondkleur: die wordt per sectie in de builder gezet. */
	padding: var(--kdm-s-9) 0;
}

.kdm-split > .et_pb_row,
.kdm-split--reverse > .et_pb_row {
	display: grid;
	align-items: center;
	width: 90%;
	max-width: var(--kdm-container-grid);
	padding: 0;
	column-gap: clamp(2rem, 4vw, 4.5rem);
}

.kdm-split > .et_pb_row {
	grid-template-columns: 8fr 11fr;  /* beeld · tekst */
}

.kdm-split--reverse > .et_pb_row {
	grid-template-columns: 11fr 8fr;  /* tekst · beeld */
}

/* Divi geeft kolommen een breedte in procenten plus `margin-right: 5.5%` voor
 * de goot. Binnen een grid botst dat met grid-template-columns en column-gap:
 * de kolom wordt dan smaller dan zijn rastervak en de tekst valt naar links
 * weg. Allebei terugzetten en het raster doet het werk. */
.kdm-split .et_pb_column,
.kdm-split--reverse .et_pb_column {
	width: auto;
	margin: 0;
}

/* Divi zet 30px ondermarge onder elke module. In de grid-kolom is dat de enige
 * bron van ruimte tussen de foto en de tekstblokken, dus die blijft — behalve
 * onder de laatste, anders staat de kolom scheef ten opzichte van het beeld. */
.kdm-split .et_pb_column > .et_pb_module:last-child,
.kdm-split--reverse .et_pb_column > .et_pb_module:last-child {
	margin-bottom: 0;
}

/* Grootte en gewicht: koppenschaal in 10-base.css. */
.kdm-split__content h2 {
	margin-bottom: var(--kdm-s-6);
	padding-bottom: 0;
}

.kdm-split__content p,
.kdm-split__content ul,
.kdm-split__content ol { 
	color: var(--kdm-ink);
	font-size: var(--kdm-size-base);
	line-height: var(--kdm-lh-body);
} 

/* Het beeld vult zijn kolom. `display: block` haalt de paar pixels weg die een
 * inline afbeelding onderaan overhoudt voor de regelbasislijn. */
.kdm-split__image img,
.kdm-split--reverse .kdm-split__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--kdm-radius-md);
}

/* Onder 980px stapelt Divi de kolommen. Het raster moet dan ook stapelen,
 * anders blijven het twee kokers van 8fr en 11fr naast elkaar. */
@media only screen and (max-width: 980px) {
	.et_pb_section.kdm-split,
	.et_pb_section.kdm-split--reverse {
		padding: var(--kdm-s-8) 0;
	}

	.kdm-split > .et_pb_row,
	.kdm-split--reverse > .et_pb_row {
		grid-template-columns: 1fr;
		row-gap: var(--kdm-s-6);
	}

	/* De ondermarge van Divi zou boven op de row-gap komen. */
	.kdm-split .et_pb_column > .et_pb_module:last-child,
	.kdm-split--reverse .et_pb_column > .et_pb_module:last-child {
		margin-bottom: 0;
	}

	/* Gestapeld staat het beeld altijd bovenaan, ook in de reverse-variant waar
	 * de tekst in de eerste kolom zit.
	 *
	 * !! Dit is de enige plek in dit bestand waar de weergave afwijkt van de
	 * DOM-volgorde !! Bewust gekozen: op een telefoon opent de sectie met het
	 * beeld, zoals in het ontwerp. De prijs is dat een schermlezer en de
	 * toetsenbordvolgorde hier eerst de tekst nemen en dan pas het beeld —
	 * omgekeerd aan wat je ziet. Voor een foto naast zijn eigen kop is dat te
	 * verdedigen; doe dit niet met iets waar een knop of een link in zit, want
	 * dan springt de focus zichtbaar terug.
	 *
	 * order werkt op de kolom, niet op de module: de rij is het raster, dus de
	 * kolommen zijn de rasteritems. Vandaar :has() — "de kolom waar het beeld
	 * in zit" — in plaats van :last-child, dat stilzwijgend iets anders gaat
	 * betekenen zodra er een kolom bij komt. */
	.kdm-split--reverse > .et_pb_row > .et_pb_column:has(.kdm-split__image) {
		order: -1;
	}
}

/* ── Hulpklasse: beeld eerst op mobiel ──────────────────────────────────────
 *
 * Voor gewone Divi-rijen van twee kolommen met de tekst links en het beeld
 * rechts. Onder 980px stapelt Divi in DOM-volgorde, dus opent de sectie op een
 * telefoon met een lap tekst. Deze klasse zet het beeld bovenaan.
 *
 * Waar te typen: op de RIJ, via Geavanceerd → CSS-klasse. Niet op de sectie en
 * niet op een module.
 *
 * Bedoeld voor twee kolommen. Bij drie of meer keert de hele rij om, want
 * column-reverse werkt op alle kolommen tegelijk.
 *
 * Wil je ook de 11:8-verhouding en de typografie van het ontwerp, gebruik dan
 * .kdm-split--reverse hierboven; die heeft dit gedrag al ingebouwd. Deze klasse
 * doet uitsluitend de volgorde en laat de rij op desktop met rust.
 *
 * Zelfde kanttekening als bij .kdm-split--reverse: de weergave wijkt hier af
 * van de DOM-volgorde, dus een schermlezer en de toetsenbordvolgorde nemen nog
 * steeds eerst de tekst en dan pas het beeld. Voor een foto is dat te
 * verdedigen; zet deze klasse niet op een rij waarvan de tweede kolom knoppen
 * of links bevat, want dan springt de focus zichtbaar terug. */
@media only screen and (max-width: 980px) {
	.et_pb_row.kdm-image-first {
		display: flex;
		flex-direction: column-reverse;
		gap: var(--kdm-s-6);
		/* Divi geeft élke rij onder 980px `padding: 30px 0` (zijn eigen
		 * dynamische CSS: `.et_pb_column .et_pb_row_inner, .et_pb_row`). Boven
		 * het beeld is dat een gat waar de sectie zijn eigen padding al levert.
		 * Alleen de bovenkant weg; de onderkant scheidt de rij nog van wat
		 * eronder komt. Twee klassen tegen Divi's ene: die regel print later,
		 * dus dit moet op specificiteit gewonnen worden, niet op volgorde. */
		padding-top: 0;
	}

	/* Divi's clearfix (`.et_pb_row::after { content: "" }`) telt in een
	 * flexcontainer mee als flexitem. Omgekeerd komt dat lege item bovenaan te
	 * staan en zet de gap er 32px onder: precies het gat boven het beeld waar
	 * geen enkele instelling in de builder bij kan. In een flexrij valt er
	 * niets te clearen, dus weg ermee. */
	.et_pb_row.kdm-image-first::after {
		content: none;
	}

	/* Divi zet de stapelruimte als ondermarge op de kolom en haalt die weg bij
	 * de laatste. Omgekeerd staat die laatste kolom bovenaan: dan zit er niets
	 * tussen beeld en tekst en blijft er onderaan de rij een gat over. De gap
	 * hierboven neemt die ruimte over, dus de kolommarge kan weg. De marges
	 * tússen modules in dezelfde kolom blijven staan. */
	.et_pb_row.kdm-image-first > .et_pb_column {
		margin-bottom: 0;
	}
}

/* ── Tegels ─────────────────────────────────────────────────────────────── */

/* Rij kaarten die elk naar een detailpagina linken. De kaart zelf is een
 * Divi-kolom met .kdm-tile; het raster zit op de rij. */
.et_pb_section.kdm-tiles {
	padding: var(--kdm-s-9) 0;
	background-color: var(--kdm-cream);
}

/* Alle rijen in deze sectie lijnen links uit op dezelfde lijn: de kop, de
 * tegels, de "of bekijk"-regel en de CTA-balk. Vandaar één breedte op rijniveau
 * in plaats van per rij. */
.kdm-tiles > .et_pb_row {
	width: 90%;
	max-width: var(--kdm-container-grid);
	padding: 0;
}

/* Grootte en gewicht: koppenschaal in 10-base.css. */
.kdm-tiles__title h2 {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Het raster. Divi's eigen kolombreedtes en goot moeten eruit, anders telt hij
 * zijn procenten bij de gap op en vallen de tegels uit het raster. */
.kdm-tiles__grid.et_pb_row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--kdm-s-5);
	margin-top: var(--kdm-s-7);
}

/* ── De kaart ── */

/* Elke kolom in dit raster ís een kaart — géén eigen klasse per kolom.
 * Kolominstellingen zitten in Divi diep weggestopt (via het kolom-icoon in de
 * balk van de rij), en een klasse die je vier keer met de hand moet intypen is
 * vier kansen op een tikfout. De rij weet al dat het tegels zijn.
 *
 * position: relative is dragend, niet cosmetisch: de "Lees meer"-link spant er
 * met ::after een onzichtbaar vlak overheen zodat de hele kaart klikbaar is.
 * Haal je dit weg, dan spant dat vlak over de dichtstbijzijnde andere
 * voorouder met een position — in de praktijk de sectie — en is de halve
 * pagina één link.
 *
 * Dubbele klassen voor de specificiteit. Divi print in zijn dynamische CSS
 * `.et_pb_row_4col > .et_pb_column.et_pb_column_1_4 { width: 47.25%;
 * margin-right: 5.5% }` (0,3,0) en dat is méér dan
 * `.kdm-tiles__grid > .et_pb_column` (0,2,0) — de tegel bleef daardoor op de
 * helft van zijn rastervak staan. Verdubbeld is het (0,4,0) en wint width:auto,
 * zodat de kaart zijn hele 1fr vult. */
.kdm-tiles__grid.kdm-tiles__grid > .et_pb_column.et_pb_column {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	/* overflow: hidden snijdt de foto mee af op de ronding. Zonder dat blijft
	 * het beeld vierkant en steekt het door de afgeronde hoek heen — de kaart
	 * heeft de ronding, de <img> erbinnen weet daar niets van. */
	overflow: hidden;
	border-radius: var(--kdm-radius-md);
	background-color: var(--kdm-surface);
}

/* Divi zet ruimte onder elke module; binnen de kaart bepaalt de padding de
 * ruimte, niet de module. Ook hier dubbele klassen: Divi's gootregel
 * `.et_pb_gutters2 .et_pb_column .et_pb_module` is (0,3,0). */
.kdm-tiles__grid.kdm-tiles__grid .et_pb_module.et_pb_module {
	margin-bottom: 0;
}

/* Vaste beeldverhouding, zodat vier foto's van verschillend formaat toch een
 * rechte lijn onder het beeld geven. object-fit snijdt bij in plaats van te
 * vervormen. */
.kdm-tile__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.kdm-tile__body {
	padding: var(--kdm-s-5); 
}

/* De tegelkop is 28px en halfvet — allebei afwijkend van de schaal (h3 = 24px,
 * gewicht 400), dus allebei hier.
 *
 * Dubbele klasse: de kaart is een 1/4-kolom, en de regel in 10-base.css die
 * Divi's kolomverkleining uitzet is (0,1,2). Enkel .kdm-tile__body h3 (0,1,1)
 * zou daarvan verliezen en de kop op 24px zetten. */
.kdm-tile__body.kdm-tile__body h3 {
	margin-bottom: var(--kdm-s-3);
	padding-bottom: 0;
	font-size: var(--kdm-size-tile);
	font-weight: 600;
}

/* 16px met 24px regelafstand komt uit het ontwerp; vandaar hier een vaste
 * maat in plaats van --kdm-size-base (18px) en --kdm-lh-body. */
.kdm-tile__body p {
	/* margin-bottom: var(--kdm-s-4); */
	color: var(--kdm-ink-muted);
	font-size: var(--kdm-size-base);
	line-height: 1.25;
}

/* display: inline-block is nodig voor de marge: een <a> is van zichzelf inline
 * en negeert margin-top volledig. */
.kdm-tile__body a {
	display: inline-block;
	margin-top: 14px;
	color: var(--kdm-link-soft);
	font-weight: 600;
	text-decoration: none;
}

/* Het klikvlak over de hele kaart.
 *
 * !! Dit is expres géén <a> om de hele kaart heen !!
 * Zo staat er één link in de tabvolgorde in plaats van drie (beeld, titel,
 * "Lees meer"), houdt een schermlezer "Lees meer" als linktekst, en blijft de
 * tekst in de kaart gewoon selecteerbaar. */
.kdm-tile__body a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Alleen onderstrepen op hover: de linkkleur blijft goud, zodat de kaart niet
 * van kleur wisselt zodra de muis erlangs gaat. */
.kdm-tiles__grid > .et_pb_column:hover .kdm-tile__body a,
.kdm-tiles__grid > .et_pb_column:focus-within .kdm-tile__body a {
	text-decoration: underline;
}

/* De focusring hoort om de hele kaart, niet om het onzichtbare vlak. */
.kdm-tiles__grid > .et_pb_column:focus-within {
	outline: var(--kdm-ring);
	outline-offset: var(--kdm-ring-offset);
}

.kdm-tile__body a:focus-visible {
	outline: none;
}

/* De regel onder de tegels. */
.kdm-tiles__more {
	/* margin-top: var(--kdm-s-5); */
}

.kdm-tiles__more p {
	margin-bottom: 0;
	color: var(--kdm-ink-soft);
	font-size: var(--kdm-size-sm);
}

.kdm-tiles__more a {
	color: var(--kdm-ink);
	text-decoration: underline;
}

@media only screen and (max-width: 980px) {
	.et_pb_section.kdm-tiles {
		padding: var(--kdm-s-8) 0;
	}

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

@media only screen and (max-width: 640px) {
	.kdm-tiles__grid.et_pb_row {
		grid-template-columns: 1fr;
	}
}

/* ── Tegels — variant "indicaties" ──────────────────────────────────────── */

/* De sectie "Waar stoor jij je aan?". Dezelfde kaarten als hierboven, maar
 * korter: alleen een titel en een link, geen lopende tekst.
 *
 * Dit is een MODIFIER, geen losse component: zet in Divi bij de sectie
 * Geavanceerd → CSS-klasse allebei de klassen —
 *
 *     kdm-tiles kdm-tiles--indicaties
 *
 * — dan blijven het raster en de kaart uit .kdm-tiles gelden en staat hier
 * alleen wat afwijkt. De klassen binnen de kaart (.kdm-tile__image,
 * .kdm-tile__body) blijven dus precies hetzelfde; niets extra intypen per
 * kolom.
 *
 * De titel is hier 20px in plaats van de 28px van --kdm-size-tile: de namen van
 * indicaties zijn langer ("Afhangende mondhoeken") en moeten op één regel
 * passen. Dat is --kdm-size-h4, dus de schaal levert hem gewoon.
 *
 * De klasse .kdm-tile__body staat er dubbel in om dezelfde reden als bij de
 * gewone tegelkop: (0,3,1) tegen de (0,2,1) daar en de (0,1,2) in 10-base.css. */
.kdm-tiles--indicaties .kdm-tile__body.kdm-tile__body h3 {
	font-size: var(--kdm-size-h4);
}

/* ── CTA-balk ───────────────────────────────────────────────────────────── */

/* Taupe balk met een bovenregel, een kop en een knop rechts. Staat op een RIJ
 * en niet op een sectie: zo blijft de crèmegrond eromheen zichtbaar en kun je
 * hem onder elke sectie hangen.
 *
 * Bedoeld om als globale sectie in de Divi-bibliotheek te staan — hij komt op
 * meerdere paginas terug en moet op één plek te wijzigen zijn. */
.et_pb_row.kdm-cta-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kdm-s-6);
	width: 90%;
	max-width: var(--kdm-container-grid);
	margin-top: var(--kdm-s-9);
	padding: var(--kdm-s-7) clamp(var(--kdm-s-5), 4vw, var(--kdm-s-8));
	border-radius: var(--kdm-radius-md);
	background-color: var(--kdm-cta-bg);
}

.kdm-cta-band .et_pb_column {
	width: auto;
	margin: 0;
}

.kdm-cta-band .et_pb_module {
	margin-bottom: -4px !important;
}

/* De tekstkolom mag krimpen maar niet onder de leesbare breedte; de knopkolom
 * houdt zijn eigen maat. */
.kdm-cta-band .et_pb_column:first-child {
	flex: 1 1 20rem;
}

.kdm-cta-band .et_pb_column:last-child {
	flex: 0 0 auto;
}

/* Alle tekst in de balk is wit.
 *
 * De koppen moeten apart genoemd worden: Divi zet `h1…h6 { color: #333 }`
 * rechtstreeks op het kopelement, en een regel die het element zélf raakt wint
 * altijd van een kleur die het van een voorouder zou erven — hoe specifiek die
 * voorouder ook is. Een `color: #fff` op de module alleen doet dus niets voor
 * de kop erin.
 *
 * De knop valt hier niet onder: .kdm-pill--light heeft (0,3,0) en houdt zijn
 * donkere tekst vast. */
.et_pb_row.kdm-cta-band :is(h1, h2, h3, h4, h5, h6),
.et_pb_row.kdm-cta-band p {
	color: #fff;
}

.kdm-cta-band__eyebrow p {
	margin-bottom: var(--kdm-s-3);
	font-size: var(--kdm-size-xs);
	letter-spacing: var(--kdm-ls-caps);
	text-transform: uppercase;
}

/* Elk kopniveau krijgt hier de h2-maat: welk niveau een redacteur kiest is een
 * kwestie van documentstructuur, niet van formaat. Gewicht en regelafstand
 * komen van de koppenschaal in 10-base.css. */
.kdm-cta-band__title :is(h1, h2, h3, h4, h5, h6) {
	margin-bottom: 0;
	padding-bottom: 0;
	font-size: var(--kdm-size-h2);
}

@media only screen and (max-width: 980px) {
	.et_pb_row.kdm-cta-band {
		margin-top: var(--kdm-s-8);
		padding: var(--kdm-s-6) var(--kdm-s-5);
	}
}

/* ── Locatie ────────────────────────────────────────────────────────────── */

/* De sectie "Modern, warm en sfeervol.": tekst links, tekening van het pand
 * rechts, met daaronder twee kolommen adres- en contactgegevens.
 *
 * Waarom niet .kdm-split hergebruikt? Die zet beeld en tekst elk in een eigen
 * Divi-kolom en heeft geen plek voor het blok met gegevens eronder. Hier zit
 * álle tekst in één kolom en maakt de gegevensmodule zijn eigen twee kolommen
 * met grid — zonder geneste rij, want die kent Divi niet.
 *
 * Achtergrondkleur staat hier bewust niet in: die zet je per sectie in de
 * builder, net als bij .kdm-split. */
.et_pb_section.kdm-locatie {
	padding: var(--kdm-s-9) 0;
}

.kdm-locatie > .et_pb_row {
	display: grid;
	grid-template-columns: 3fr 3fr;  /* tekst · tekening */
	align-items: center;
	width: 90%;
	max-width: var(--kdm-container-grid);
	padding: 0;
	column-gap: clamp(2rem, 5vw, 5.5rem);
}

/* Divi's kolombreedte in procenten plus `margin-right` botst met het raster.
 * Dubbele klassen omdat Divi's eigen regel (0,3,0) is; zie de tegels. */
.kdm-locatie.kdm-locatie > .et_pb_row > .et_pb_column.et_pb_column {
	width: auto;
	margin: 0;
}

/* Grootte en gewicht: koppenschaal in 10-base.css. */
.kdm-locatie__content h2 {
	margin-bottom: var(--kdm-s-6);
	padding-bottom: 0;
}

.kdm-locatie__content p {
	margin-bottom: 0;
	color: var(--kdm-ink);
	font-size: var(--kdm-size-base);
	line-height: var(--kdm-lh-body);
}

/* Het gegevensblok: twee kolommen naast elkaar (Adres · Contact).
 *
 * grid-auto-flow: column met twee rijen vult eerst de kolom naar beneden en
 * dan pas naar rechts. Zo komt kop-tekst, kop-tekst netjes onder elkaar in
 * twee kolommen, terwijl het in de editor gewoon vier blokken achter elkaar
 * zijn. Werkt op precies twee paren; komt er een derde bij, zet dan
 * grid-template-columns op repeat(3, …). */
.kdm-locatie__meta .et_pb_text_inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: auto auto;
	grid-auto-flow: column;
	gap: var(--kdm-s-2) var(--kdm-s-5);
	margin-top: var(--kdm-s-7);
}

/* De labels ADRES en CONTACT. Kleinkapitalen in goud, zoals de eyebrow in de
 * CTA-balk. */
.kdm-locatie__meta :is(h3, h4, h5, h6) {
	margin-bottom: 0;
	padding-bottom: 0;
	color: var(--kdm-link-soft);
	font-size: var(--kdm-size-xs);
	font-weight: 400;
	letter-spacing: var(--kdm-ls-caps);
	line-height: var(--kdm-lh-tight);
	text-transform: uppercase;
}

.kdm-locatie__meta p {
	margin-bottom: 0;
	color: var(--kdm-ink);
	font-size: var(--kdm-size-base);
	line-height: var(--kdm-lh-body);
}

.kdm-locatie__meta a {
	color: var(--kdm-ink);
	text-decoration: none;
}

.kdm-locatie__meta a:hover {
	text-decoration: underline;
}

/* De tekening. display: block haalt de regelbasislijn-ruimte onder een inline
 * afbeelding weg. */
.kdm-locatie__image img {
	display: block;
	width: 100%;
	height: auto;
}

@media only screen and (max-width: 980px) {
	.et_pb_section.kdm-locatie {
		padding: var(--kdm-s-8) 0;
	}

	.kdm-locatie > .et_pb_row {
		grid-template-columns: 1fr;
		row-gap: var(--kdm-s-6);
	}
}

@media only screen and (max-width: 640px) {
	/* Onder elkaar: twee kolommen van een halve telefoonbreedte zijn te smal
	 * voor een straatnaam. */
	.kdm-locatie__meta .et_pb_text_inner {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
		gap: var(--kdm-s-5);
	}
}

/* ── Reviews ────────────────────────────────────────────────────────────── */

/* De sectie met de Google-reviews: de carrousel van de reviewplugin (via een
 * shortcode), daaronder een gecentreerde vraag en een knop.
 *
 * De reviewkaarten zelf stylen we NIET. Die markup komt uit de plugin, staat
 * niet onder onze controle en verandert bij elke update; bovendien is het
 * bewust Google-eigen vormgeving (sterren, logo, avatar) — dat mag er als een
 * Google-blok uitzien. Wij zetten alleen de ruimte eromheen.
 *
 * Achtergrondkleur staat er bewust niet in: die zet je per sectie in de
 * builder, net als bij .kdm-split en .kdm-locatie. */
.et_pb_section.kdm-reviews {
	padding: var(--kdm-s-9) 0;
}

.kdm-reviews > .et_pb_row {
	width: 90%;
	max-width: var(--kdm-container-grid);
	padding: 0;
}

/* De carrousel staat los van de vraag eronder; die afstand is de sprong in het
 * ontwerp tussen de kaarten en de kop. */
.kdm-reviews__feed {
	margin-bottom: var(--kdm-s-9);
}

/* De vraag. Gecentreerd, en de regellengte begrensd zodat hij op twee regels
 * breekt zoals in het ontwerp in plaats van op één lange regel. */
.kdm-reviews__title {
	margin-bottom: var(--kdm-s-6);
	text-align: center;
}

.kdm-reviews__title :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 auto;
	max-width: 600px;
	padding-bottom: 0;
	font-size: var(--kdm-size-h2);
}

/* De knop. Divi zet de knopmodule in een wrapper die de uitlijning bepaalt;
 * text-align op de module zelf doet daar niets. De vorm en kleur komen van de
 * standaardknop in 60-modules.css — hier alleen de plaatsing. */
.kdm-reviews .et_pb_button_module_wrapper {
	text-align: center;
}

@media only screen and (max-width: 980px) {
	.et_pb_section.kdm-reviews {
		padding: var(--kdm-s-8) 0;
	}

	.kdm-reviews__feed {
		margin-bottom: var(--kdm-s-8);
	}
}

/* ── Instagram ──────────────────────────────────────────────────────────── */

/* De sectie met de Instagram-feed: een linksuitgelijnde kop en daaronder de
 * feed van Smash Balloon. De feed zelf (raster, foto's, knoppen) staat in
 * 70-plugins.css, want dat is markup van de plugin.
 *
 * Achtergrondkleur staat er bewust niet in: die zet je per sectie in de
 * builder, net als bij .kdm-split, .kdm-locatie en .kdm-reviews. */
.et_pb_section.kdm-instagram {
	padding: var(--kdm-s-9) 0;
}

.kdm-instagram > .et_pb_row {
	width: 90%;
	max-width: var(--kdm-container-grid);
	padding: 0;
}

/* De kop staat in een eigen rij boven de feed; die rij mag onderin geen ruimte
 * meer opeisen, de marge hieronder bepaalt de afstand tot de foto's. */
.kdm-instagram__title.et_pb_module {
	margin-bottom: var(--kdm-s-7);
}

.kdm-instagram__title :is(h1, h2, h3, h4, h5, h6) {
	margin-bottom: 0;
	padding-bottom: 0;
	font-size: var(--kdm-size-h2);
}

@media only screen and (max-width: 980px) {
	.et_pb_section.kdm-instagram {
		padding: var(--kdm-s-8) 0;
	}

	.kdm-instagram__title.et_pb_module {
		margin-bottom: var(--kdm-s-6);
	}
}