/*
Theme Name: Logocheck
Theme URI: https://www.logocheck.nl/
Author: Tref
Author URI: https://www.trefreclame.nl/
Description: Thema voor Logocheck.nl: voorpagina met beeld of video in de hero, bestelpagina's met samenvatting, blog. Beeld en video instellen via Weergave > Customizer > Beeld en video op de voorpagina.
Version: 2.4.0
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: logocheck
*/

/* ==========================================================================
   Inhoud
   01 Lettertypen
   02 Variabelen
   03 Basis
   04 Typografie
   05 Layout en secties
   06 Knoppen
   07 Kopbalk
   08 Hero (tekst, video, vertrouwen)
   09 Weten waar je staat
   10 Hoe het werkt
   11 Kies je Logocheck
   12 Veelgestelde vragen
   13 Afsluiter (CTA)
   14 Footer
   15 Pagina's en tekstopmaak (.entry)
   16 Bestelpagina
   17 Mollie Forms
   18 Contact Form 7
   19 Blogoverzicht
   20 Losse blog
   21 404
   22 Animaties
   23 Hulpklassen en iconfont
   24 Samsung Internet
   25 Print
   ========================================================================== */


/* ---------------------------------------------------------------- 01 ---- */
/* Lettertypen: Inter (variabel, 400-800), zelf gehost                      */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
	     url("fonts/inter-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"),
	     url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---------------------------------------------------------------- 02 ---- */
/* Variabelen                                                                */

:root {
	color-scheme: light;

	/* kleuren */
	--inkt: #111111;              /* tekst */
	--inkt-zacht: #555a57;        /* secundaire tekst (7:1 op wit) */
	--inkt-licht: #6b706d;
	--wit: #ffffff;
	--groen: #00b76c;             /* logo-groen: vinkjes, lijnen, accenten */
	--groen-groot: #009a5a;       /* groene koptekst (>= 3:1, ook op de gloed) */
	--groen-tekst: #007a47;       /* groene tekst en links (>= 4.5:1) */
	--groen-diep: #0e3b27;        /* monogram, donkere blokken */
	--groen-fel: #3ddc97;         /* groen op donker */
	--mint-bg: #f5faf7;           /* lichte sectie-achtergrond */
	--creme: #fbf8f1;             /* "na"-paneel */
	--rand: rgba(18, 40, 28, 0.1);
	--rand-sterk: rgba(17, 17, 17, 0.16);
	--fout: #c0283f;
	--waarschuwing: #9a5b00;
	--focus: #007a47;

	/* gloed (rgb-waarden, zodat de dekking per plek kan verschillen) */
	--lila: 185, 140, 255;
	--mint: 55, 235, 180;
	--lichtgroen: 150, 240, 190;

	--verloop: linear-gradient(90deg, #71f3ff 0%, #4adfcc 50%, #02b86d 100%);
	--verloop-schuin: linear-gradient(135deg, #71f3ff 0%, #4adfcc 45%, #02b86d 100%);
	--korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");

	/* vormen */
	--radius-s: 10px;
	--radius-m: 18px;
	--radius-l: 26px;
	--schaduw-kaart: 0 24px 50px -36px rgba(17, 40, 28, 0.4);
	--schaduw-zacht: 0 14px 30px -24px rgba(17, 40, 28, 0.35);

	/* maten */
	--fontsize: 18px;
	--kop-h: 76px;
	--breedte: 1296px;
	--gutter: clamp(20px, 5vw, 72px);
	--sectie: clamp(76px, 8.4vw, 124px);

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 860px) {
	:root {
		--kop-h: 64px;
	}
}

@media (max-width: 480px) {
	:root {
		--fontsize: 17px;
	}
}


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

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

html {
	font-size: var(--fontsize);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* ankers en toetsenbordfocus niet onder de vaste kopbalk laten vallen */
html {
	scroll-padding-top: calc(var(--kop-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background: var(--wit);
	color: var(--inkt);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

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

img,
video {
	height: auto;
}

a {
	color: inherit;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

::selection {
	background: #c4f3dc;
	color: var(--inkt);
}

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

.skiplink {
	position: absolute;
	left: 12px;
	top: -200px;
	z-index: 300;
	padding: 12px 18px;
	background: var(--inkt);
	color: var(--wit);
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--radius-s);
}

.skiplink:focus {
	top: 12px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}


/* ---------------------------------------------------------------- 04 ---- */
/* Typografie                                                                */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

p {
	margin: 0;
	text-wrap: pretty;
}

strong,
b {
	font-weight: 700;
}

.subkleur {
	color: var(--groen-groot);
}

.lichtekleur {
	color: var(--inkt-zacht);
}

.contentgroot {
	font-size: 1.15em;
}

/* Sectiekoppen met de korte merkstreep (echo van het vinkje) */
.sectiekop {
	font-size: clamp(32px, 3.1vw + 11px, 56px);
	line-height: 1.02;
	letter-spacing: -0.04em;
}

.sectiekop::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin-top: 20px;
	border-radius: 2px;
	background: var(--verloop);
}

.sectiekop--midden {
	text-align: center;
}

.sectiekop--midden::after {
	margin-left: auto;
	margin-right: auto;
}


/* ---------------------------------------------------------------- 05 ---- */
/* Layout en secties                                                         */

.container {
	width: 100%;
	max-width: calc(var(--breedte) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container-smal {
	max-width: calc(760px + 2 * var(--gutter));
}

.container-midden {
	max-width: calc(960px + 2 * var(--gutter));
}

.sectie {
	position: relative;
	padding-block: var(--sectie);
}

.sectie-mint {
	background: var(--mint-bg);
}

.sectie-verloop {
	background: linear-gradient(180deg, var(--wit) 0%, var(--mint-bg) 100%);
}

/* Hoe het werkt en Kies je Logocheck lopen in elkaar over (beide wit) */
#hoehetwerkt + .sectie-verloop {
	padding-top: calc(var(--sectie) * 0.45);
}


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

.knop,
.knop2,
.entry .wp-block-button__link,
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 26px;
	border: 1.5px solid transparent;
	border-radius: var(--radius-s);
	background: var(--inkt);
	color: var(--wit);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 10px 24px -12px rgba(0, 184, 107, 0.6);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease), box-shadow 0.2s ease;
}

.knop .icoon {
	width: 18px;
	height: 18px;
	flex: none;
	transition: transform 0.25s var(--ease);
}

.knop:hover,
.knop:focus-visible,
.knop2:hover,
.knop2:focus-visible,
.entry .wp-block-button__link:hover,
.entry .wp-block-button__link:focus-visible {
	background: var(--groen-tekst);
	color: var(--wit);
	box-shadow: 0 14px 28px -12px rgba(0, 122, 71, 0.6);
}

.knop:hover .icoon {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: no-preference) {
	.knop:hover,
	.entry .wp-block-button__link:hover {
		transform: translateY(-2px);
	}
}

@media (max-width: 360px) {
	.knop,
	.knop-groot {
		padding: 0 16px;
	}
}

.knop-groot {
	min-height: 60px;
	padding: 0 30px;
	font-size: 17px;
}

.knop-klein {
	min-height: 44px;
	padding: 0 18px;
	font-size: 15px;
	box-shadow: none;
}

.knop-omlijnd {
	background: var(--wit);
	color: var(--inkt);
	border-color: var(--inkt);
	box-shadow: none;
}

.knop-omlijnd:hover,
.knop-omlijnd:focus-visible {
	background: var(--inkt);
	color: var(--wit);
	border-color: var(--inkt);
}

.knop-licht {
	background: var(--wit);
	color: var(--inkt);
	box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.6);
}

.knop-licht:hover,
.knop-licht:focus-visible {
	background: #e8fbf1;
	color: var(--groen-diep);
}

.knop-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 16px;
	font-weight: 700;
	color: var(--inkt);
	text-decoration: none;
	transition: color 0.2s ease;
}

.knop-link .icoon {
	width: 18px;
	height: 18px;
	transition: transform 0.25s var(--ease);
}

.knop-link:hover {
	color: var(--groen-tekst);
}

.knop-link:hover .icoon {
	transform: translateY(3px);
}


/* ---------------------------------------------------------------- 07 ---- */
/* Kopbalk                                                                   */

.kop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	transition: transform 0.35s var(--ease), background-color 0.25s ease, box-shadow 0.25s ease;
}

.admin-bar .kop {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .kop {
		top: 0;
	}
}

.kop--gescrold,
.kop--open {
	background: rgba(255, 255, 255, 0.86);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	box-shadow: 0 1px 0 rgba(17, 17, 17, 0.06), 0 10px 30px -22px rgba(17, 40, 28, 0.4);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.kop--gescrold,
	.kop--open {
		background: rgba(255, 255, 255, 0.97);
	}
}

.kop--verborgen {
	transform: translateY(-110%);
}

@media (prefers-reduced-motion: reduce) {
	.kop {
		transition: none;
	}
}

.kop-binnen {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--kop-h);
}

.kop-logo {
	display: block;
	width: 152px;
	color: var(--inkt);
	flex: none;
}

.kop-logo svg {
	width: 100%;
	height: auto;
}

.kop-nav {
	display: flex;
	align-items: center;
	gap: 34px;
}

.kop-nav a:not(.knop) {
	font-size: 15px;
	font-weight: 600;
	color: var(--inkt);
	text-decoration: none;
	transition: color 0.2s ease;
}

.kop-nav a:not(.knop):hover {
	color: var(--groen-tekst);
}

.kop-menuknop {
	display: none;
}

/* bestelpagina: kopbalk even breed als de inhoud eronder */
.kop--bestel .kop-binnen {
	max-width: calc(1180px + 2 * var(--gutter));
}

.kop-veilig {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--inkt-zacht);
}

.kop-veilig .icoon {
	width: 20px;
	height: 20px;
	color: var(--groen-tekst);
}

@media (max-width: 860px) {

	.kop-logo {
		width: 124px;
	}

	.kop-menuknop {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 48px;
		height: 48px;
		margin-right: -10px;
		padding: 0;
		border: 0;
		border-radius: var(--radius-s);
		background: transparent;
		cursor: pointer;
	}

	.kop-menuknop span {
		display: block;
		width: 22px;
		height: 2px;
		border-radius: 2px;
		background: var(--inkt);
		transition: transform 0.25s var(--ease), opacity 0.2s ease;
	}

	.kop--open .kop-menuknop span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.kop--open .kop-menuknop span:nth-child(2) {
		opacity: 0;
	}

	.kop--open .kop-menuknop span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* zonder JavaScript: geen menuknop, alleen "Kies je Logocheck" */
	html:not(.js) .kop-menuknop,
	html:not(.js) .kop-nav a:not(.knop) {
		display: none;
	}

	html:not(.js) .kop-nav .knop {
		margin-top: 0;
		min-height: 44px;
		font-size: 15px;
	}

	.js .kop-nav {
		position: absolute;
		top: calc(100% + 4px);
		left: var(--gutter);
		right: var(--gutter);
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding: 10px;
		background: var(--wit);
		border: 1px solid var(--rand);
		border-radius: var(--radius-m);
		box-shadow: 0 24px 50px -24px rgba(17, 40, 28, 0.45);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.25s var(--ease), visibility 0s linear 0.25s;
	}

	.js .kop--open .kop-nav {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 0.2s ease, transform 0.25s var(--ease), visibility 0s;
	}

	.js .kop-nav a:not(.knop) {
		padding: 14px 16px;
		font-size: 17px;
		border-radius: var(--radius-s);
	}

	.js .kop-nav a:not(.knop):hover {
		background: var(--mint-bg);
	}

	.js .kop-nav .knop {
		margin-top: 8px;
		min-height: 54px;
		font-size: 16px;
	}

	.kop-veilig span {
		font-size: 13px;
	}
}

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


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

.hero {
	position: relative;
	padding-top: calc(var(--kop-h) + clamp(28px, 4vw, 52px));
}

/* achtergrond: lila links, mint rechts, lichtgroen achter de video */
.hero-gloed {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: linear-gradient(180deg, var(--wit) 0%, var(--wit) 76%, var(--mint-bg) 100%);
}

/* korrel over de gloed; loopt onderaan weg */
.hero-gloed::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background-image: var(--korrel);
	opacity: 0.55;
	-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}

/* naadloze overgang naar de volgende (mint) sectie */
.hero-gloed::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 180px;
	background: linear-gradient(180deg, rgba(245, 250, 247, 0) 0%, var(--mint-bg) 100%);
}

.hero-gloed span {
	position: absolute;
	border-radius: 50%;
	will-change: transform;
}

.hero-gloed span:nth-child(1) {
	width: min(900px, 120vw);
	aspect-ratio: 1;
	left: max(-260px, -40vw);
	top: -220px;
	background: radial-gradient(closest-side, rgba(var(--lila), 0.42), rgba(var(--lila), 0));
}

.hero-gloed span:nth-child(2) {
	width: min(900px, 120vw);
	aspect-ratio: 1;
	right: max(-320px, -44vw);
	top: -260px;
	background: radial-gradient(closest-side, rgba(var(--mint), 0.4), rgba(var(--mint), 0));
}

.hero-gloed span:nth-child(3) {
	width: min(1100px, 150vw);
	height: 680px;
	left: 50%;
	bottom: -120px;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(var(--lichtgroen), 0.55), rgba(var(--lichtgroen), 0));
}

@media (prefers-reduced-motion: no-preference) {
	.hero-gloed span:nth-child(1) {
		animation: gloedLinks 16s ease-in-out infinite alternate;
	}

	.hero-gloed span:nth-child(2) {
		animation: gloedRechts 19s ease-in-out infinite alternate;
	}
}

@keyframes gloedLinks {
	to {
		transform: translate(7%, 9%) scale(1.08);
	}
}

@keyframes gloedRechts {
	to {
		transform: translate(-8%, 7%) scale(1.1);
	}
}

.hero-tekst {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.hero h1 {
	font-size: clamp(44px, 5.2vw + 12px, 88px);
	line-height: 0.98;
	letter-spacing: -0.04em;
	color: var(--inkt);
}

.hero h1 .subkleur {
	white-space: nowrap;
}

.checkdraw {
	display: inline-block;
	width: 0.52em;
	height: 0.54em;
	margin-left: 0.14em;
	vertical-align: baseline;
	color: var(--groen);
}

.hero h2 {
	text-wrap: pretty;
	margin-top: clamp(18px, 2vw, 26px);
	font-size: clamp(17px, 0.45vw + 14.5px, 21px);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -0.01em;
}

.hero-tekst > p {
	margin-top: 12px;
	font-size: clamp(14.5px, 0.2vw + 13.8px, 16px);
	color: var(--inkt-zacht);
}

.hero-knoppen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 28px;
	margin-top: clamp(22px, 2.4vw, 30px);
}

.hero-media {
	position: relative;
	z-index: 1;
	max-width: calc(var(--breedte) + 2 * var(--gutter));
	margin-top: clamp(36px, 4.6vw, 64px);
}

/* Het kader (16:9) is even breed als de container, maar nooit hoger dan het
   scherm min 48px (de witte rand van 2 x 9px plus wat lucht). Zo is het na
   scrollen altijd helemaal te zien. Omdat de hoogte uit de breedte volgt,
   wordt de breedte begrensd: (schermhoogte - 48px) x 16/9. svh = de hoogte
   met de adresbalk zichtbaar; browsers zonder svh gebruiken de vh-regel.
   Niet op mobiel (afbeeldingen onder elkaar) en niet op een liggende
   telefoon (lager dan 500px), anders worden de afbeeldingen te klein. */
@media (min-width: 641px) and (min-height: 500px) {
	.hero-media .video {
		max-width: calc((100vh - 48px) * 16 / 9);
		max-width: calc((100svh - 48px) * 16 / 9);
		margin-inline: auto;
	}
}

@media (max-width: 640px) {
	.hero-knoppen {
		align-self: stretch;
	}

	.hero-knoppen .knop {
		width: 100%;
	}

	.hero-knoppen .knop-link {
		display: none;
	}
}

/* ---- videoplek 16:9 ---- */

.video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-l);
	overflow: hidden;
	background: var(--wit);
	box-shadow:
		0 0 0 8px rgba(255, 255, 255, 0.6),
		0 0 0 9px rgba(17, 17, 17, 0.06),
		0 60px 110px -40px rgba(20, 70, 45, 0.45);
	container-type: inline-size;
	isolation: isolate;
}

.video-poster,
.video-poster-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.video-poster-img {
	object-fit: cover;
}

/* twee afbeeldingen naast elkaar (samen 16:9); zonder video op mobiel onder
   elkaar, zodat ze groot genoeg blijven om te lezen */
.video.met-duo {
	background: var(--wit);
}

.beeld-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	height: 100%;
}

.beeld-enkel .beeld-duo {
	grid-template-columns: minmax(0, 1fr);
}

.beeld-paneel {
	position: relative;
	min-width: 0;
	overflow: hidden;
	container-type: inline-size;
}

/* zonder video: witte achtergrond achter de afbeelding. Het papier, de
   korrel en de kleur horen in de afbeelding zelf (upload bij voorkeur een
   JPG of WEBP met achtergrond, geen transparante PNG). */
.zonder-video .beeld-paneel {
	background: var(--wit);
}

/* label bovenaan de afbeelding (alleen zonder video), als scherpe tekst.
   Hoofdletters zoals ingetypt in de Customizer. Langere tekst loopt door
   over meerdere regels: het label wordt dan hoger, niet afgekapt. */
.beeld-label {
	position: absolute;
	top: 6.5cqw;
	left: 50%;
	z-index: 2;
	width: max-content;
	max-width: calc(100% - 24px);
	padding: 0.62em 1.05em;
	border: 1px solid rgba(17, 17, 17, 0.12);
	border-radius: 1.25em;
	background: var(--wit);
	color: var(--inkt);
	font-size: clamp(10px, 2.625cqw, 15px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-align: center;
	text-wrap: balance;
	overflow-wrap: anywhere;
	transform: translateX(-50%);
}

/* scheidingslijn tussen de twee afbeeldingen */
.beeld-paneel + .beeld-paneel::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	width: 1px;
	background: rgba(59, 56, 51, 0.16);
}

.beeld-img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 640px) {
	.zonder-video.met-duo {
		aspect-ratio: auto;
	}

	.zonder-video.met-duo .video-poster {
		position: static;
	}

	.zonder-video.met-duo .beeld-duo {
		grid-template-columns: minmax(0, 1fr);
		height: auto;
	}

	.zonder-video.met-duo .beeld-img {
		height: auto;
	}

	.zonder-video.met-duo .beeld-paneel + .beeld-paneel::after {
		right: 0;
		bottom: auto;
		width: auto;
		height: 1px;
	}
}

/* afspeelknop (alleen als er een video is ingesteld) */
.video-knop {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.video-knop-rondje {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 104px;
	width: clamp(58px, 10.4cqw, 104px);
	height: clamp(58px, 10.4cqw, 104px);
	border-radius: 50%;
	background: var(--wit);
	color: var(--inkt);
	box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.35), 0 20px 40px -10px rgba(17, 17, 17, 0.45);
	transition: transform 0.3s var(--ease), box-shadow 0.3s ease, color 0.2s ease;
}

.video-knop-rondje .icoon {
	width: 35%;
	height: 35%;
	margin-left: 5%;
}

.video-knop:hover .video-knop-rondje {
	transform: scale(1.06);
	color: var(--groen-tekst);
	box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.4), 0 24px 48px -12px rgba(17, 17, 17, 0.5);
}

.video-knop:focus-visible {
	outline: none;
}

.video-knop:focus-visible .video-knop-rondje {
	outline: 3px solid var(--focus);
	outline-offset: 6px;
}

.video-duur,
.video-hint {
	position: absolute;
	left: 22px;
	bottom: 20px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(17, 17, 17, 0.6);
	color: var(--wit);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.video-duur .icoon,
.video-hint .icoon {
	width: 16px;
	height: 16px;
}

@container (max-width: 640px) {
	.video-duur,
	.video-hint {
		left: 12px;
		bottom: 10px;
		padding: 5px 10px;
		font-size: 11.5px;
	}
}

/* tijdens het afspelen */
.video-speler {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	border: 0;
	background: #0b1510;
	object-fit: contain;
}

.video.speelt .video-knop,
.video.speelt .video-duur {
	display: none;
}

@media (max-width: 640px) {
	.video {
		border-radius: var(--radius-m);
		box-shadow:
			0 0 0 5px rgba(255, 255, 255, 0.7),
			0 0 0 6px rgba(17, 17, 17, 0.06),
			0 30px 60px -24px rgba(20, 70, 45, 0.5);
	}
}

/* ---- vertrouwenspunten ---- */

.vertrouwen {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vertrouwen li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.monogram {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--groen-diep);
	color: var(--wit);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

/* foto in plaats van het monogram (Customizer > Foto bij de vertrouwenspunten) */
img.monogram-foto {
	display: block;
	object-fit: cover;
}

.vertrouwen-icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--groen-tekst);
}

.vertrouwen-icoon .icoon {
	width: 22px;
	height: 22px;
}

/* tweede regel onder een punt (bijv. "Ontwerper met ruim 20 jaar ervaring") */
.vertrouwen-sub {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--inkt-zacht);
}

/* naam als link naar de pagina over Martijn (niet op de bestelpagina's) */
.vertrouwen-tekst a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-decoration-color: rgba(0, 122, 71, 0.35);
	text-underline-offset: 3px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.vertrouwen-tekst a:hover {
	color: var(--groen-tekst);
	text-decoration-color: currentColor;
}

/* strip onder de video: ligt half over de rand met de volgende sectie */
.vertrouwen-strip {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	width: fit-content;
	max-width: 100%;
	margin: 40px auto 0;
	padding: 12px 22px 12px 14px;
	background: var(--wit);
	border: 1px solid rgba(17, 17, 17, 0.08);
	border-radius: 999px;
	box-shadow: 0 12px 30px -20px rgba(17, 40, 28, 0.35);
	transform: translateY(50%);
}

/* Op één regel zolang het past. Wordt een tekst te lang, dan loopt hij
   binnen de pil over twee regels door in plaats van eruit te steken. */
.vertrouwen-strip li {
	flex: 0 1 auto;
	min-width: 0;
	font-size: 14px;
}

.vertrouwen-strip li + li {
	margin-left: 18px;
	padding-left: 18px;
	border-left: 1px solid rgba(17, 17, 17, 0.12);
}

.vertrouwen-strip li:first-child {
	gap: 12px;
}

@media (max-width: 1120px) {
	.vertrouwen-strip {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin-top: 28px;
		padding: 18px 22px;
		border-radius: var(--radius-m);
		transform: none;
	}

	.vertrouwen-strip li {
		white-space: normal;
		flex: initial;
	}

	#intro {
		padding-top: var(--sectie);
	}

	.vertrouwen-strip li + li {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}

	.vertrouwen-strip .vertrouwen-icoon {
		width: 38px;
	}

	.vertrouwen li {
		font-size: 14.5px;
	}
}


/* ---------------------------------------------------------------- 09 ---- */
/* Weten waar je staat                                                       */

#intro {
	padding-top: calc(var(--sectie) + 36px);
}

.intro-raster {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	grid-template-areas:
		"kop   lijst"
		"lead  lijst"
		"slot  lijst";
	grid-template-rows: auto auto 1fr;
	column-gap: clamp(40px, 8vw, 128px);
	align-items: start;
}

.intro-raster .sectiekop {
	grid-area: kop;
}

.intro-lead {
	grid-area: lead;
	margin-top: 32px;
	font-size: clamp(19px, 0.6vw + 15px, 22px);
	line-height: 1.5;
	letter-spacing: -0.01em;
}

.intro-slot {
	grid-area: slot;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
	font-size: 18px;
	line-height: 1.5;
	color: var(--inkt-zacht);
}

.intro-slot .icoon {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--groen);
	stroke-width: 2.2;
}

.uitkomsten {
	grid-area: lijst;
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.uitkomst {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 22px 28px;
	background: var(--wit);
	border: 1px solid var(--rand);
	border-radius: var(--radius-m);
	box-shadow: var(--schaduw-zacht);
	font-size: clamp(17px, 0.3vw + 15.5px, 19px);
	font-weight: 600;
	line-height: 1.45;
}

.uitkomst-icoon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: 1px solid rgba(0, 184, 107, 0.18);
}

.uitkomst-icoon .icoon {
	width: 26px;
	height: 26px;
}

.uitkomst-icoon--groen {
	background: linear-gradient(90deg, rgba(var(--lichtgroen), 0) 0%, rgba(var(--lichtgroen), 0.45) 100%);
	color: var(--groen-tekst);
}

.uitkomst-icoon--lila {
	background: linear-gradient(90deg, rgba(var(--lila), 0) 0%, rgba(var(--lila), 0.35) 100%);
	border-color: rgba(140, 100, 230, 0.2);
	color: #5b3fc4;
}

.uitkomst-icoon--mint {
	background: linear-gradient(90deg, rgba(var(--mint), 0) 0%, rgba(var(--mint), 0.4) 100%);
	color: var(--groen);
}

.uitkomst-vink {
	width: 24px;
	height: 24px;
}

@media (max-width: 860px) {
	.intro-raster {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"kop"
			"lead"
			"lijst"
			"slot";
		grid-template-rows: auto;
	}

	.uitkomsten {
		margin-top: 32px;
	}

	.uitkomst {
		gap: 16px;
		padding: 16px 18px;
	}

	.uitkomst-icoon {
		width: 48px;
		height: 48px;
	}

	.uitkomst-icoon .icoon {
		width: 22px;
		height: 22px;
	}
}


/* ---------------------------------------------------------------- 10 ---- */
/* Hoe het werkt                                                             */

.stappen {
	--bol: 88px;
	--stap-gap: 40px;
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--stap-gap);
	margin: clamp(48px, 5vw, 64px) auto 0;
	padding: 0;
	max-width: 1120px;
	list-style: none;
}

.stap {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* verbindingslijn van bol naar bol */
.stap:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(var(--bol) / 2 - 1px);
	left: calc(50% + var(--bol) / 2 + 14px);
	width: calc(100% + var(--stap-gap) - var(--bol) - 28px);
	height: 2px;
	border-radius: 2px;
	background: var(--verloop);
	opacity: 0.6;
}

.bol {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--bol);
	height: var(--bol);
	border-radius: 50%;
	background-color: var(--wit);
	background-image: linear-gradient(90deg, rgba(var(--lichtgroen), 0) 0%, rgba(var(--lichtgroen), 0.4) 100%);
	border: 1px solid rgba(18, 40, 28, 0.1);
	color: var(--groen-groot);
	font-size: calc(var(--bol) * 0.43);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.stap h3 {
	margin-top: 30px;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.stap p {
	max-width: 300px;
	margin-top: 10px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--inkt-zacht);
}

@media (max-width: 860px) {
	.stappen {
		--bol: 60px;
		--stap-gap: 34px;
		grid-template-columns: minmax(0, 1fr);
		max-width: 560px;
	}

	.stap {
		flex-direction: row;
		align-items: flex-start;
		gap: 20px;
		text-align: left;
	}

	.stap:not(:last-child)::after {
		top: calc(var(--bol) + 10px);
		left: calc(var(--bol) / 2 - 1px);
		width: 2px;
		height: calc(100% - var(--bol) - 20px + var(--stap-gap));
		background: linear-gradient(180deg, #71f3ff 0%, #4adfcc 50%, #02b86d 100%);
	}

	.stap h3 {
		margin-top: 12px;
		font-size: 19px;
	}

	.stap p {
		margin-top: 6px;
		font-size: 16.5px;
	}
}


/* ---------------------------------------------------------------- 11 ---- */
/* Kies je Logocheck                                                         */

.tiers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	max-width: 1000px;
	margin: clamp(44px, 4.6vw, 60px) auto 0;
	align-items: stretch;
}

.tier-kolom {
	display: flex;
}

.tier {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--wit);
	border: 1px solid rgba(18, 40, 28, 0.1);
	border-radius: 20px;
	box-shadow: var(--schaduw-kaart);
}

.tier-binnen {
	display: flex;
	flex-direction: column;
	flex: 1;
	border-radius: inherit;
	overflow: hidden;
	background: var(--wit);
}

.tier-aanbevolen {
	padding: 2px;
	border: 0;
	border-radius: 22px;
	background: var(--verloop-schuin);
	box-shadow: 0 30px 60px -34px rgba(0, 135, 79, 0.55);
}

.tier-aanbevolen .tier-binnen {
	border-radius: 20px;
}

.tierhead {
	position: relative;
	padding: 34px 36px 30px;
	background-color: var(--wit);
	background-image:
		radial-gradient(55% 75% at 5% 25%, rgba(var(--lila), 0.3) 0%, rgba(var(--lila), 0) 60%),
		radial-gradient(55% 80% at 98% 30%, rgba(var(--mint), 0.3) 0%, rgba(var(--mint), 0) 60%),
		radial-gradient(70% 60% at 50% 100%, rgba(var(--lichtgroen), 0.35) 0%, rgba(var(--lichtgroen), 0) 65%);
}

.tier-naam {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

.tierhead p {
	margin-top: 6px;
	font-size: 16px;
	line-height: 1.5;
	color: #444946;
}

.tiercontent {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 28px 36px 36px;
}

.prijs {
	display: flex;
	align-items: flex-start;
	margin: 0;
	font-size: 64px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.045em;
	font-variant-numeric: lining-nums;
}

.prijs strong {
	font-weight: 800;
}

.prijs-valuta {
	margin: 0.1em 0.06em 0 0;
	font-size: 0.5em;
	letter-spacing: 0;
}

.vinklijst {
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin: 26px 0 32px;
	padding: 0;
	list-style: none;
}

.vinklijst li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	font-size: 17px;
	line-height: 1.4;
}

.li-check {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--groen);
}

.tiercontent .knop {
	width: 100%;
	min-height: 58px;
	margin-top: auto;
}

.tierbadge {
	position: absolute;
	right: 26px;
	top: -15px;
	z-index: 2;
	padding: 8px 14px;
	border-radius: 999px;
	background: linear-gradient(90deg, #71f3ff 0%, #63eded 25%, #4adfcc 50%, #2acda0 75%, #02b86d 100%);
	color: #06301e;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 6px 14px -6px rgba(0, 135, 79, 0.6);
}

.uitwerken {
	display: flex;
	align-items: center;
	gap: 22px;
	max-width: 1000px;
	margin: 32px auto 0;
	padding: 26px 32px;
	background: var(--wit);
	border: 1px solid rgba(18, 40, 28, 0.1);
	border-radius: var(--radius-m);
}

.uitwerken-icoon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-image: linear-gradient(90deg, rgba(var(--lichtgroen), 0) 0%, rgba(var(--lichtgroen), 0.45) 100%);
	border: 1px solid rgba(0, 184, 107, 0.18);
	color: var(--groen-tekst);
}

.uitwerken-icoon .icoon {
	width: 22px;
	height: 22px;
	stroke-width: 1.9;
}

.uitwerken-tekst h3 {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.uitwerken-tekst p {
	margin-top: 4px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--inkt-zacht);
}

@media (max-width: 960px) {
	.tiers {
		gap: 20px;
	}

	.tierhead {
		padding: 28px 26px 24px;
	}

	.tiercontent {
		padding: 24px 26px 28px;
	}

	.prijs {
		font-size: 56px;
	}

	.uitwerken {
		align-items: flex-start;
		padding: 22px;
		gap: 16px;
	}
}

@media (max-width: 700px) {
	.tiers {
		grid-template-columns: minmax(0, 1fr);
		max-width: 520px;
		gap: 36px;
	}

	.uitwerken {
		max-width: 520px;
	}
}


/* ---------------------------------------------------------------- 12 ---- */
/* Veelgestelde vragen                                                       */

.faq-raster {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: start;
}

.faq-kop {
	position: sticky;
	top: calc(var(--kop-h) + 32px);
}

.faq-lijst {
	border-top: 1px solid var(--rand);
}

.faq-item {
	border-bottom: 1px solid var(--rand);
}

.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	list-style: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

/* plus die een min wordt */
.faq-item summary::after {
	content: "";
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid rgba(17, 17, 17, 0.14);
	background:
		linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
	transition: background-size 0.25s var(--ease), border-color 0.2s ease, background-color 0.2s ease, transform 0.3s var(--ease);
}

.faq-item[open] summary::after {
	background-size: 14px 2px, 2px 0;
	border-color: var(--groen);
	background-color: rgba(var(--lichtgroen), 0.3);
	transform: rotate(180deg);
}

.faq-item summary:hover {
	color: var(--groen-tekst);
}

.faq-item summary:hover::after {
	border-color: var(--groen);
}

.faq-item summary:focus-visible {
	outline-offset: 6px;
	border-radius: 6px;
}

.question {
	font-size: clamp(17px, 0.35vw + 15.5px, 20px);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.015em;
}

.answer {
	max-width: 64ch;
	padding: 0 60px 28px 0;
	font-size: 17px;
	line-height: 1.7;
	color: #2b2f2d;
}

.answer p + p,
.answer p + ul,
.answer ul + p {
	margin-top: 0.8em;
}

.answer ul {
	margin: 0.6em 0 0;
	padding: 0;
	list-style: none;
}

.answer li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 22px;
}

.answer li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 0.68em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--groen);
}

.answer a {
	color: var(--groen-tekst);
	font-weight: 600;
	text-underline-offset: 3px;
}

/* soepel open- en dichtklappen (nieuwe browsers) */
@supports (interpolate-size: allow-keywords) {
	@media (prefers-reduced-motion: no-preference) {
		.faq-item {
			interpolate-size: allow-keywords;
		}

		.faq-item::details-content {
			height: 0;
			overflow: clip;
			transition: height 0.35s var(--ease), content-visibility 0.35s allow-discrete;
		}

		.faq-item[open]::details-content {
			height: auto;
		}
	}
}

@media (max-width: 860px) {
	.faq-raster {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.faq-kop {
		position: static;
	}

	.faq-item summary {
		padding: 20px 0;
	}

	.faq-item summary::after {
		width: 34px;
		height: 34px;
	}

	.answer {
		padding-right: 0;
		font-size: 16.5px;
	}
}


/* ---------------------------------------------------------------- 13 ---- */
/* Afsluiter (CTA) onderaan de voorpagina                                    */

.slot-cta {
	padding-bottom: var(--sectie);
}

.slot-cta-kaart {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(56px, 7vw, 100px) clamp(22px, 4vw, 64px);
	border-radius: 32px;
	background: var(--groen-diep);
	color: var(--wit);
	text-align: center;
}

.slot-cta-gloed,
.artikel-cta-gloed {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		radial-gradient(45% 75% at 0% 0%, rgba(113, 243, 255, 0.2) 0%, rgba(113, 243, 255, 0) 70%),
		radial-gradient(50% 80% at 100% 0%, rgba(var(--mint), 0.26) 0%, rgba(var(--mint), 0) 70%),
		radial-gradient(60% 60% at 50% 125%, rgba(var(--lichtgroen), 0.26) 0%, rgba(var(--lichtgroen), 0) 70%);
}

.slot-cta-gloed::after,
.artikel-cta-gloed::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--korrel);
	opacity: 0.7;
	mix-blend-mode: overlay;
}

.slot-cta-kop {
	font-size: clamp(38px, 4.4vw + 12px, 72px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.slot-cta .subkleur,
.artikel-cta .subkleur {
	color: var(--groen-fel);
	white-space: nowrap;
}

.checkdraw-klein {
	display: inline-block;
	width: 0.52em;
	height: 0.54em;
	margin-left: 0.14em;
	vertical-align: baseline;
	color: currentColor;
}

.slot-cta-sub {
	margin-top: 20px;
	font-size: clamp(15px, 0.3vw + 14px, 17px);
	color: rgba(255, 255, 255, 0.8);
}

.slot-cta .knop {
	margin-top: 30px;
}

.slot-cta :focus-visible,
.artikel-cta :focus-visible {
	outline-color: var(--wit);
}

@media (max-width: 640px) {
	.slot-cta-kaart {
		border-radius: 24px;
	}

	.slot-cta .knop {
		width: 100%;
	}
}


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

.voet {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: 64px 0 28px;
	border-top: 1px solid var(--rand);
	background: var(--wit);
	font-size: 16px;
}

.voet-gloed {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		radial-gradient(60% 80% at 8% 30%, rgba(var(--lila), 0.22) 0%, rgba(var(--lila), 0) 60%),
		radial-gradient(60% 85% at 95% 35%, rgba(var(--mint), 0.22) 0%, rgba(var(--mint), 0) 60%),
		radial-gradient(60% 55% at 50% 115%, rgba(var(--lichtgroen), 0.25) 0%, rgba(var(--lichtgroen), 0) 65%);
}

.voet-raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 40px;
	align-items: start;
}

.voet-logo {
	display: block;
	width: 150px;
	color: var(--inkt);
}

.voet-logo svg {
	width: 100%;
	height: auto;
}

.footer-credit {
	margin-top: 20px;
	color: var(--inkt-zacht);
}

.footer-credit a {
	color: var(--inkt);
	font-weight: 600;
	text-underline-offset: 3px;
}

.footer-credit a:hover {
	color: var(--groen-tekst);
}

.voet-mail {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.voet-mail .icoon {
	width: 18px;
	height: 18px;
	color: var(--groen-tekst);
}

.voet-mail a {
	color: var(--inkt);
	font-weight: 600;
	text-decoration: none;
}

.voet-mail a:hover {
	color: var(--groen-tekst);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.voet-nav ul {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.voet-nav a {
	display: inline-block;
	padding: 2px 0;
	color: var(--inkt);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease, transform 0.25s var(--ease);
}

.voet-nav a:hover {
	color: var(--groen-tekst);
	transform: translateX(-4px);
}

.voet-nav .current-menu-item > a {
	color: var(--groen-tekst);
}

.voet-onder {
	margin-top: 48px;
}

#footerabsolute {
	padding-top: 22px;
	border-top: 1px solid var(--rand);
	font-size: 14px;
	color: var(--inkt-zacht);
}

#footerabsolute a {
	color: var(--inkt-zacht);
	text-underline-offset: 3px;
}

#footerabsolute a:hover {
	color: var(--groen-tekst);
}

#footerabsolute .sep {
	margin: 0 4px;
	color: rgba(17, 17, 17, 0.25);
}

#footerabsolute .heel {
	white-space: nowrap;
}

@media (max-width: 640px) {
	.voet {
		padding-top: 48px;
	}

	.voet-raster {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.voet-nav ul {
		align-items: flex-start;
	}

	.voet-nav a:hover {
		transform: translateX(4px);
	}

	.voet-onder {
		margin-top: 36px;
	}
}


/* ---------------------------------------------------------------- 15 ---- */
/* Pagina's en tekstopmaak                                                   */

.pagina-kop {
	position: relative;
	isolation: isolate;
	padding: calc(var(--kop-h) + clamp(40px, 5vw, 72px)) 0 clamp(28px, 3vw, 40px);
}

.pagina-kop--gloed::before {
	content: "";
	position: absolute;
	inset: 0 0 -80px;
	z-index: -1;
	background-image:
		radial-gradient(40% 90% at 0% 0%, rgba(var(--lila), 0.26) 0%, rgba(var(--lila), 0) 70%),
		radial-gradient(40% 90% at 100% 0%, rgba(var(--mint), 0.26) 0%, rgba(var(--mint), 0) 70%);
	pointer-events: none;
}

.page-title {
	font-size: clamp(36px, 2.8vw + 20px, 60px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.pagina .entry {
	padding-bottom: var(--sectie);
}

.entry {
	font-size: 1rem;
	line-height: 1.72;
}

.entry > * {
	margin-top: 0;
	margin-bottom: 0;
}

.entry > * + * {
	margin-top: 1.15em;
}

.entry h2,
.entry h3,
.entry h4 {
	margin-top: 1.9em;
	line-height: 1.2;
}

.entry h2 {
	font-size: clamp(25px, 1.2vw + 18px, 34px);
	letter-spacing: -0.03em;
}

.entry h3 {
	font-size: clamp(20px, 0.6vw + 16px, 24px);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.entry h4 {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.entry h2 + *,
.entry h3 + *,
.entry h4 + * {
	margin-top: 0.6em;
}

.entry a:not(.knop):not(.wp-block-button__link) {
	color: var(--groen-tekst);
	font-weight: 600;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.entry a:not(.knop):not(.wp-block-button__link):hover {
	color: var(--inkt);
}

.entry ul,
.entry ol {
	padding-left: 0;
	list-style: none;
}

.entry li {
	position: relative;
	padding-left: 28px;
}

.entry li + li {
	margin-top: 0.45em;
}

.entry ul > li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 0.72em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--groen);
}

.entry ol {
	counter-reset: lijst;
}

.entry ol > li {
	counter-increment: lijst;
}

.entry ol > li::before {
	content: counter(lijst) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 800;
	color: var(--groen-tekst);
	font-variant-numeric: tabular-nums;
}

.entry blockquote,
.entry .wp-block-quote {
	position: relative;
	margin-left: 0;
	margin-right: 0;
	padding: 4px 0 4px 26px;
	border: 0;
	font-size: clamp(19px, 0.6vw + 16px, 23px);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.012em;
}

.entry blockquote::before,
.entry .wp-block-quote::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	border-radius: 2px;
	background: linear-gradient(180deg, #71f3ff 0%, #4adfcc 50%, #02b86d 100%);
}

.entry blockquote p + p {
	margin-top: 0.6em;
}

.entry blockquote cite {
	display: block;
	margin-top: 10px;
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	color: var(--inkt-zacht);
}

.entry img {
	border-radius: 14px;
}

/* afbeelding met de blokstijl "Afgerond" */
.is-style-rounded img {
	border-radius: 50%;
}

/* kolommen: binnen een kolom hetzelfde ritme als in de tekst, zonder
   extra marge bovenaan (bijv. een kop als eerste in een kolom) */
.entry .wp-block-columns {
	margin-bottom: 0;
}

.entry .wp-block-column > * {
	margin-top: 0;
	margin-bottom: 0;
}

.entry .wp-block-column > * + * {
	margin-top: 1.15em;
}

.entry .wp-block-column > * + :is(h2, h3, h4) {
	margin-top: 1.9em;
}

.entry .wp-block-column > :is(h2, h3, h4) + * {
	margin-top: 0.6em;
}

/* Begint een kolom met een kop, dan krijgt het hele kolommenblok de ruimte
   die een kop ook in de tekst heeft (1.9 x de maat van .entry h2). Zo staat
   een afbeelding in de kolom ernaast mooi in het midden van de tekst. */
.entry > * + .wp-block-columns:has(> .wp-block-column > h2:first-child) {
	margin-top: calc(1.9 * clamp(25px, 1.2vw + 18px, 34px));
}

.entry figure {
	margin-left: 0;
	margin-right: 0;
}

.entry figcaption,
.entry .wp-element-caption {
	margin-top: 10px;
	font-size: 14px;
	color: var(--inkt-zacht);
	text-align: center;
}

.entry hr,
.entry .wp-block-separator {
	height: 1px;
	margin-block: 2.2em;
	border: 0;
	background: var(--rand);
}

.entry table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.entry th,
.entry td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--rand);
	text-align: left;
	vertical-align: top;
}

.entry th {
	font-weight: 700;
	background: var(--mint-bg);
}

.entry .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.entry .alignwide {
	margin-inline: calc(-1 * min(120px, 8vw));
	max-width: none;
}

.entry .alignfull {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.entry .alignleft {
	float: left;
	margin: 0.4em 1.4em 1em 0;
}

.entry .alignright {
	float: right;
	margin: 0.4em 0 1em 1.4em;
}

.entry .aligncenter {
	margin-inline: auto;
}

.entry::after {
	content: "";
	display: table;
	clear: both;
}

.entry iframe {
	max-width: 100%;
}

.entry code {
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--mint-bg);
	font-size: 0.9em;
}

.entry .knop {
	margin-top: 0.4em;
}


/* ---------------------------------------------------------------- 16 ---- */
/* Bestelpagina                                                              */

.bestel {
	position: relative;
	isolation: isolate;
	padding: calc(var(--kop-h) + clamp(32px, 4vw, 56px)) 0 var(--sectie);
}

.bestel-gloed {
	position: absolute;
	inset: 0 0 auto;
	height: 560px;
	z-index: -1;
	background-image:
		radial-gradient(40% 70% at 0% 0%, rgba(var(--lila), 0.26) 0%, rgba(var(--lila), 0) 70%),
		radial-gradient(40% 70% at 100% 0%, rgba(var(--mint), 0.26) 0%, rgba(var(--mint), 0) 70%);
	pointer-events: none;
}

.bestel-raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
	grid-template-rows: auto auto 1fr;
	grid-template-areas:
		"titel  zij"
		"inhoud zij"
		"extra  zij";
	column-gap: clamp(32px, 5vw, 80px);
	max-width: calc(1180px + 2 * var(--gutter));
}

.bestel-titel {
	grid-area: titel;
	font-size: clamp(34px, 2.4vw + 18px, 54px);
}

.bestel-inhoud {
	grid-area: inhoud;
	margin-top: 22px;
	font-size: 17.5px;
	color: #2b2f2d;
}

.bestel-inhoud > p {
	max-width: 62ch;
}

.bestel-zij {
	grid-area: zij;
}

.bestel-zij-plak {
	position: sticky;
	top: calc(var(--kop-h) + 24px);
}

.bestel-extra {
	grid-area: extra;
	display: none;
}

/* samenvatting van het pakket */
.samenvatting {
	overflow: hidden;
	background: var(--wit);
	border: 1px solid var(--rand);
	border-radius: 20px;
	box-shadow: var(--schaduw-kaart);
}

.samenvatting-aanbevolen {
	border: 2px solid transparent;
	background:
		linear-gradient(var(--wit), var(--wit)) padding-box,
		var(--verloop-schuin) border-box;
	box-shadow: 0 30px 60px -38px rgba(0, 135, 79, 0.55);
}

.samenvatting .tierhead {
	padding: 26px 28px 22px;
}

.samenvatting .tierbadge {
	position: static;
	display: inline-block;
	margin-bottom: 12px;
	padding: 6px 12px;
	font-size: 11px;
	box-shadow: none;
}

.samenvatting .tier-naam {
	font-size: 24px;
}

.samenvatting .tiercontent {
	padding: 22px 28px 6px;
}

.samenvatting .prijs {
	font-size: 52px;
}

.samenvatting .vinklijst {
	margin: 20px 0 22px;
	gap: 11px;
}

.samenvatting .vinklijst li {
	font-size: 16px;
}

.vertrouwen-lijst {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vertrouwen-lijst .vertrouwen-icoon {
	width: 38px;
}

.samenvatting-vertrouwen {
	margin: 0 28px;
	padding: 20px 0 24px;
	border-top: 1px solid var(--rand);
}

.samenvatting-vertrouwen li {
	font-size: 14.5px;
}

.samenvatting-vertrouwen .monogram {
	width: 34px;
	height: 34px;
	font-size: 12px;
}

.samenvatting-vertrouwen .vertrouwen-sub {
	font-size: 12.5px;
}

.samenvatting-vertrouwen .vertrouwen-icoon {
	width: 34px;
}

/* wisselen naar het andere pakket */
.wissel {
	display: grid;
	gap: 4px;
	margin-top: 16px;
	padding: 18px 22px;
	border: 1.5px dashed rgba(0, 122, 71, 0.3);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.72);
	color: var(--inkt);
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.25s var(--ease);
}

.wissel:hover {
	border-style: solid;
	border-color: var(--groen);
	background: var(--wit);
}

.wissel-kop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.wissel-prijs {
	color: var(--groen-tekst);
}

.wissel-intro {
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--inkt-zacht);
}

.wissel-knop {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--groen-tekst);
}

.wissel-knop .icoon {
	width: 16px;
	height: 16px;
	transition: transform 0.25s var(--ease);
}

.wissel:hover .wissel-knop .icoon {
	transform: translateX(3px);
}

@media (max-width: 960px) {
	.bestel-raster {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas:
			"titel"
			"zij"
			"inhoud"
			"extra";
		max-width: calc(680px + 2 * var(--gutter));
	}

	.bestel-zij {
		margin-top: 22px;
	}

	.bestel-zij-plak {
		position: static;
	}

	.bestel-zij-wissel,
	.samenvatting-vertrouwen {
		display: none;
	}

	.bestel-extra {
		display: block;
		margin-top: 28px;
	}

	.bestel-extra .vertrouwen-lijst {
		padding: 4px 4px 0;
	}

	/* compacte samenvatting: naam en prijs naast elkaar */
	.samenvatting {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"kop   prijs"
			"lijst lijst";
		align-items: center;
		column-gap: 16px;
	}

	.samenvatting .tierhead {
		grid-area: kop;
		align-self: stretch;
		padding: 20px 0 16px 20px;
		background: none;
	}

	.samenvatting {
		background-image:
			radial-gradient(55% 75% at 5% 25%, rgba(var(--lila), 0.22) 0%, rgba(var(--lila), 0) 60%),
			radial-gradient(55% 80% at 98% 30%, rgba(var(--mint), 0.22) 0%, rgba(var(--mint), 0) 60%);
	}

	.samenvatting-aanbevolen {
		background:
			radial-gradient(55% 75% at 5% 25%, rgba(var(--lila), 0.22) 0%, rgba(var(--lila), 0) 60%) padding-box,
			radial-gradient(55% 80% at 98% 30%, rgba(var(--mint), 0.22) 0%, rgba(var(--mint), 0) 60%) padding-box,
			linear-gradient(var(--wit), var(--wit)) padding-box,
			var(--verloop-schuin) border-box;
	}

	.samenvatting .tiercontent {
		display: contents;
	}

	.samenvatting .prijs {
		grid-area: prijs;
		padding-right: 20px;
		font-size: 44px;
	}

	.samenvatting .vinklijst {
		grid-area: lijst;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px 18px;
		margin: 0;
		padding: 14px 20px 18px;
		border-top: 1px solid var(--rand);
	}

	.samenvatting .vinklijst li {
		font-size: 14.5px;
		gap: 8px;
	}

	.samenvatting .li-check {
		width: 13px;
		height: 13px;
	}

	.samenvatting .tier-naam {
		font-size: 20px;
	}

	.samenvatting .tierhead p {
		font-size: 14.5px;
	}
}


/* ---------------------------------------------------------------- 17 ---- */
/* Mollie Forms                                                              */
/* Mollie Forms rendert een eigen <form data-mollie-forms> met inline       */
/* marges. We selecteren op [data-mollie-forms], zodat het voor elk          */
/* formulier werkt (ook de Plus-versie), ongeacht het form-ID.               */

form[data-mollie-forms] {
	position: relative;
	margin: 28px 0 0;
	padding: clamp(20px, 3vw, 34px);
	background: var(--wit);
	border: 1px solid var(--rand);
	border-radius: 22px;
	box-shadow: 0 30px 60px -44px rgba(17, 40, 28, 0.45);
}

.entry form[data-mollie-forms] > * + * {
	margin-top: 0;
}

form[data-mollie-forms] .mollie_forms_field_row {
	position: relative;
	margin: 0 0 14px !important;
}

form[data-mollie-forms] .mollie_forms_field_row:empty {
	display: none;
}

form[data-mollie-forms] .mollie_forms_field_row > br {
	display: none;
}

form[data-mollie-forms] .rij-verstuur {
	margin-bottom: 0 !important;
}

form[data-mollie-forms] .rij-keuze {
	margin-top: 22px !important;
}

form[data-mollie-forms] .rij-pakket + .rij-betaal {
	margin-top: 0 !important;
}

/* invoervelden */
form[data-mollie-forms] input[type="text"],
form[data-mollie-forms] input[type="email"],
form[data-mollie-forms] input[type="tel"],
form[data-mollie-forms] input[type="url"],
form[data-mollie-forms] input[type="date"],
form[data-mollie-forms] input[type="number"],
form[data-mollie-forms] select,
form[data-mollie-forms] textarea {
	display: block;
	width: 100%;
	max-width: none;
	height: 60px;
	margin: 0;
	padding: 0 18px;
	border: 1.5px solid var(--rand-sterk);
	border-radius: 12px;
	background: var(--wit);
	color: var(--inkt);
	font-size: 17px;
	line-height: 1.3;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

form[data-mollie-forms] textarea {
	height: auto;
	min-height: 140px;
	padding-top: 16px;
}

form[data-mollie-forms] input::placeholder,
form[data-mollie-forms] textarea::placeholder {
	color: var(--inkt-licht);
	opacity: 1;
}

form[data-mollie-forms] input:hover,
form[data-mollie-forms] textarea:hover {
	border-color: rgba(17, 17, 17, 0.3);
}

form[data-mollie-forms] input:focus,
form[data-mollie-forms] textarea:focus,
form[data-mollie-forms] select:focus {
	outline: none;
	border-color: var(--groen-tekst);
	box-shadow: 0 0 0 4px rgba(0, 183, 108, 0.16);
}

form[data-mollie-forms] input.is-fout {
	border-color: var(--fout);
}

/* zwevende labels (js/formulieren.js) */
.zweef-rij .zweef-label {
	position: absolute;
	left: 19px;
	top: 30px;
	max-width: calc(100% - 38px);
	overflow: hidden;
	color: var(--inkt-licht);
	font-size: 17px;
	line-height: 1.2;
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
	transform: translateY(-50%);
	transition: top 0.16s ease, font-size 0.16s ease, color 0.16s ease;
}

form[data-mollie-forms] .zweef-rij input {
	padding-top: 20px;
}

form[data-mollie-forms] .zweef-rij textarea {
	padding-top: 30px;
}

form[data-mollie-forms] select {
	padding-right: 48px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 16px center;
	background-size: 20px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.zweef-rij input:focus + .zweef-label,
.zweef-rij input:not(:placeholder-shown) + .zweef-label,
.zweef-rij textarea:focus + .zweef-label,
.zweef-rij textarea:not(:placeholder-shown) + .zweef-label {
	top: 17px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--inkt-zacht);
}

.zweef-rij input:focus + .zweef-label {
	color: var(--groen-tekst);
}

.zweef-rij input:-webkit-autofill + .zweef-label {
	top: 17px;
	font-size: 12.5px;
	font-weight: 600;
}

/* uploadvlak: vervangt het standaard bestandsveld */
form[data-mollie-forms] input[type="file"].is-vervangen {
	position: absolute;
	left: 50%;
	top: 30px;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
	opacity: 0;
}

.upload-knop {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	min-height: 96px;
	padding: 18px 20px;
	border: 2px dashed rgba(0, 122, 71, 0.34);
	border-radius: 16px;
	background: var(--mint-bg);
	color: var(--inkt);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s var(--ease);
}

.upload-knop:hover {
	border-color: var(--groen-tekst);
	background: #ecf8f1;
}

/* toetsenbordfocus op het (verborgen) bestandsveld tonen op het uploadvlak */
form[data-mollie-forms] input[type="file"].is-vervangen:focus-visible + .upload-knop {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

.upload-knop.is-sleep {
	border-style: solid;
	border-color: var(--groen);
	background: #e1f6ea;
	transform: scale(1.01);
}

.upload-knop.is-gekozen {
	border-style: solid;
	border-color: var(--groen-tekst);
	background: #effbf5;
}

.upload-knop.is-fout {
	border-color: var(--fout);
	background: #fff5f6;
}

.upload-icoon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--wit);
	color: var(--groen-tekst);
	box-shadow: 0 8px 18px -12px rgba(0, 122, 71, 0.7);
	transition: transform 0.25s var(--ease);
}

.upload-icoon svg {
	width: 24px;
	height: 24px;
}

.upload-knop:hover .upload-icoon {
	transform: translateY(-2px);
}

.upload-tekst {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.upload-titel {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.upload-sub {
	font-size: 14px;
	line-height: 1.35;
	color: var(--inkt-zacht);
}

@media (hover: none) {
	.upload-sub {
		display: none;
	}
}

.upload-voorbeeld {
	display: none;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border: 1px solid var(--rand);
	border-radius: 12px;
	background:
		repeating-conic-gradient(#f1f3f2 0% 25%, #fff 0% 50%) 50% / 12px 12px;
	color: var(--groen-tekst);
}

.upload-voorbeeld img {
	width: 100%;
	height: 100%;
	padding: 6px;
	object-fit: contain;
}

.upload-voorbeeld svg {
	width: 28px;
	height: 28px;
}

.is-gekozen .upload-voorbeeld {
	display: flex;
}

/* meldingen onder upload en e-mail */
.upload-melding {
	display: none;
	margin-top: 8px;
	padding-left: 2px;
	font-size: 14.5px;
	line-height: 1.4;
}

.upload-melding.is-zichtbaar {
	display: block;
}

.upload-melding--ok {
	color: var(--groen-tekst);
	font-weight: 600;
}

.upload-melding--fout {
	color: var(--fout);
	font-weight: 600;
}

.upload-melding--waarschuwing {
	color: var(--waarschuwing);
	font-weight: 600;
}

.upload-melding .email-suggestie {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

/* --- contextblok (js/formulieren.js, stap 0) --- */

/* niet laten verspringen: het formulier verschijnt zodra het script klaar
   is (en anders na 1,5 seconde toch) */
.js form[data-mollie-forms]:not(.lc-klaar) {
	opacity: 0;
	animation: lc-toon 0s linear 1.5s forwards;
}

@keyframes lc-toon {
	to {
		opacity: 1;
	}
}

form[data-mollie-forms] .rij-leeg,
form[data-mollie-forms] .lc-verborgen {
	display: none !important;
}

/* het lichtgroene vlak */
form[data-mollie-forms] .lc-context {
	margin: 6px 0 22px;
	padding: clamp(18px, 2.4vw, 26px);
	border: 1px solid var(--rand);
	border-radius: 18px;
	background: var(--mint-bg);
}

form[data-mollie-forms] .lc-context .mollie_forms_field_row {
	margin: 0 0 18px !important;
}

form[data-mollie-forms] .lc-context > .mollie_forms_field_row:last-child {
	margin-bottom: 0 !important;
}

/* koppen en teksten */
form[data-mollie-forms] .lc-kop {
	margin: 0;
	font-size: clamp(20px, 0.6vw + 16px, 23px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

form[data-mollie-forms] .lc-context .rij-kop {
	margin-bottom: 6px !important;
}

form[data-mollie-forms] .rij-kop--sectie {
	margin: 4px 0 12px !important;
}

form[data-mollie-forms] .rij-kop--sectie .lc-kop {
	font-size: clamp(18px, 0.4vw + 15px, 20px);
}

form[data-mollie-forms] .lc-uitleg,
form[data-mollie-forms] .lc-tekst {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

form[data-mollie-forms] .lc-uitleg {
	color: var(--inkt-zacht);
}

/* vragen boven een veld of boven knopjes */
form[data-mollie-forms] .lc-vraag {
	display: block;
	margin: 0 0 8px;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--inkt);
}

form[data-mollie-forms] .rij-vraag {
	margin-bottom: 0 !important;
}

form[data-mollie-forms] .lc-opt {
	font-weight: 500;
	color: var(--inkt-zacht);
}

form[data-mollie-forms] .lc-context .mollie-forms-required {
	display: none;
}

form[data-mollie-forms] .lc-context textarea {
	min-height: 96px;
	font-size: 16px;
	line-height: 1.45;
}

form[data-mollie-forms] .lc-context input[type="text"],
form[data-mollie-forms] .lc-context input[type="url"],
form[data-mollie-forms] .lc-context input[type="email"],
form[data-mollie-forms] .lc-context input[type="tel"] {
	height: 54px;
	font-size: 16px;
}

/* knopjes */
form[data-mollie-forms] .lc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

form[data-mollie-forms] .lc-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 16px;
	border: 1.5px solid var(--rand-sterk);
	border-radius: 999px;
	background: var(--wit);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

form[data-mollie-forms] .lc-chip:hover {
	border-color: rgba(17, 17, 17, 0.3);
}

form[data-mollie-forms] .lc-chip input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

form[data-mollie-forms] .lc-chip.is-aan {
	border-color: var(--groen-tekst);
	background: #e9f7f0;
	color: var(--groen-tekst);
}

form[data-mollie-forms] .lc-chip.is-aan::before {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132.91 136'%3E%3Cpolygon points='0 78 54 136 132.91 19.22 113 0 53 103 19 55 0 78'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132.91 136'%3E%3Cpolygon points='0 78 54 136 132.91 19.22 113 0 53 103 19 55 0 78'/%3E%3C/svg%3E") center / contain no-repeat;
}

form[data-mollie-forms] .lc-chip:has(input:focus-visible) {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

form[data-mollie-forms] .lc-chip.is-uit {
	opacity: 0.45;
	cursor: default;
}

form[data-mollie-forms] .lc-chip.is-uit:hover {
	border-color: var(--rand-sterk);
}

/* keuzes: pakket en betaalmethode */
form[data-mollie-forms] ul[id^="form_"] {
	display: grid;
	gap: 10px;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}

form[data-mollie-forms] ul[id^="form_"] li,
form[data-mollie-forms] [id^="payment_methods_"] li {
	margin: 0;
	padding: 0;
	line-height: normal;
}

form[data-mollie-forms] li::before {
	content: none;
}

form[data-mollie-forms] ul[id^="form_"] label {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 12px 18px;
	border: 1.5px solid var(--rand-sterk);
	border-radius: 12px;
	background: var(--wit);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

form[data-mollie-forms] ul[id^="form_"] label:hover {
	border-color: rgba(17, 17, 17, 0.3);
}

form[data-mollie-forms] ul[id^="form_"] label:has(input:checked) {
	border-color: var(--groen-tekst);
	background: #f3fbf7;
	box-shadow: 0 0 0 3px rgba(0, 183, 108, 0.12);
}

form[data-mollie-forms] input[type="radio"] {
	display: grid;
	place-content: center;
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 2px solid rgba(17, 17, 17, 0.3);
	border-radius: 50%;
	background: var(--wit);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

form[data-mollie-forms] input[type="radio"]::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--groen-tekst);
	transform: scale(0);
	transition: transform 0.15s var(--ease);
}

form[data-mollie-forms] input[type="radio"]:checked {
	border-color: var(--groen-tekst);
}

form[data-mollie-forms] input[type="radio"]:checked::before {
	transform: scale(1);
}

form[data-mollie-forms] input[type="radio"]:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

form[data-mollie-forms] ul[id^="form_"] img {
	width: auto;
	height: 26px;
	flex: none;
}

form[data-mollie-forms] input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0 10px 0 0;
	accent-color: var(--groen-tekst);
	vertical-align: middle;
}

/* afrekenen */
form[data-mollie-forms] button[type="submit"],
form[data-mollie-forms] button[data-action="submit"] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 62px;
	margin: 22px 0 0;
	padding: 0 24px;
	border: 0;
	border-radius: 12px;
	background: var(--inkt);
	color: var(--wit);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.005em;
	cursor: pointer;
	box-shadow: 0 14px 28px -14px rgba(0, 122, 71, 0.55);
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease, transform 0.2s var(--ease), box-shadow 0.2s ease;
}

/* slotje voor de tekst */
form[data-mollie-forms] button[type="submit"]::before,
form[data-mollie-forms] button[data-action="submit"]::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

form[data-mollie-forms] button[type="submit"]:hover,
form[data-mollie-forms] button[type="submit"]:focus-visible,
form[data-mollie-forms] button[data-action="submit"]:hover,
form[data-mollie-forms] button[data-action="submit"]:focus-visible {
	background: var(--groen-tekst);
	box-shadow: 0 18px 34px -14px rgba(0, 122, 71, 0.65);
}

@media (prefers-reduced-motion: no-preference) {
	form[data-mollie-forms] button[type="submit"]:hover {
		transform: translateY(-1px);
	}
}

/* bezig met doorsturen naar de betaalpagina */
form[data-mollie-forms].is-bezig button[type="submit"],
form[data-mollie-forms].is-bezig button[data-action="submit"] {
	pointer-events: none;
	background: var(--groen-tekst);
}

form[data-mollie-forms].is-bezig button[type="submit"]::before,
form[data-mollie-forms].is-bezig button[data-action="submit"]::before {
	-webkit-mask: none;
	mask: none;
	background: none;
	border: 2.5px solid rgba(255, 255, 255, 0.35);
	border-top-color: var(--wit);
	border-radius: 50%;
	animation: draai 0.8s linear infinite;
}

@keyframes draai {
	to {
		transform: rotate(360deg);
	}
}

/* foutmelding van Mollie Forms zelf */
.entry p[style*="color: red"],
.entry p[style*="color:red"] {
	padding: 14px 16px;
	border: 1px solid #f5c2cb;
	border-radius: 12px;
	background: #fff1f3;
	color: #a61d33 !important;
	font-weight: 600;
}

@media (max-width: 480px) {
	form[data-mollie-forms] {
		margin-inline: calc(-1 * min(8px, var(--gutter)));
		border-radius: 18px;
	}

	.upload-knop {
		min-height: 84px;
		padding: 14px 16px;
		gap: 14px;
	}

	.upload-icoon {
		width: 44px;
		height: 44px;
	}

	.upload-voorbeeld {
		width: 52px;
		height: 52px;
	}
}


/* ---------------------------------------------------------------- 18 ---- */
/* Contact Form 7 (contactformulier.php)                                     */

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

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
	display: block;
	width: 100%;
	min-height: 56px;
	margin-top: 12px;
	padding: 14px 18px;
	border: 1.5px solid var(--rand-sterk);
	border-radius: 12px;
	background: var(--wit);
	font-size: 17px;
}

.wpcf7 textarea {
	min-height: 150px;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--groen-tekst);
	box-shadow: 0 0 0 4px rgba(0, 183, 108, 0.16);
}

.wpcf7 input.wpcf7-submit {
	margin-top: 18px;
	min-height: 56px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--radius-s);
	background: var(--inkt);
	color: var(--wit);
	font-weight: 700;
	cursor: pointer;
}

.wpcf7 input.wpcf7-submit:hover {
	background: var(--groen-tekst);
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 14px;
	color: var(--fout);
}

.wpcf7 .wpcf7-response-output {
	margin: 18px 0 0 !important;
	padding: 12px 16px !important;
	border-radius: 12px;
}


/* ---------------------------------------------------------------- 19 ---- */
/* Blogoverzicht                                                             */

.blog .pagina-kop {
	padding-bottom: clamp(32px, 3.4vw, 48px);
}

.blog-overzicht {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.blog-kaart {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--wit);
	border: 1px solid var(--rand);
	border-radius: 20px;
	box-shadow: 0 18px 40px -36px rgba(17, 40, 28, 0.45);
	transition: transform 0.3s var(--ease), box-shadow 0.3s ease, border-color 0.3s ease;
}

/* zachte gloed in de hoek, kleur wisselt per kaart */
.blog-kaart::before {
	content: "";
	position: absolute;
	right: -90px;
	top: -110px;
	z-index: -1;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(var(--gloed, var(--lila)), 0.3), rgba(var(--gloed, var(--lila)), 0));
	transition: transform 0.5s var(--ease);
}

.blog-kaart:nth-child(3n + 2) {
	--gloed: var(--mint);
}

.blog-kaart:nth-child(3n) {
	--gloed: var(--lichtgroen);
}

.blog-kaart:hover {
	border-color: rgba(0, 122, 71, 0.22);
	box-shadow: 0 26px 50px -32px rgba(17, 40, 28, 0.5);
}

@media (prefers-reduced-motion: no-preference) {
	.blog-kaart:hover {
		transform: translateY(-4px);
	}

	.blog-kaart:hover::before {
		transform: scale(1.25);
	}
}

@supports selector(:has(*)) {
	.blog-kaart:has(.blog-kaart-link:focus-visible) {
		outline: 3px solid var(--focus);
		outline-offset: 3px;
	}

	.blog-kaart-link:focus-visible {
		outline: none;
	}
}

.blog-kaart-beeld {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--mint-bg);
}

.blog-kaart-beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.blog-kaart:hover .blog-kaart-beeld img {
	transform: scale(1.03);
}

.blog-kaart-tekst {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 28px 28px 26px;
}

.blog-overzicht-titel {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.02em;
}

.blog-kaart-link {
	color: inherit;
	text-decoration: none;
}

/* hele kaart klikbaar */
.blog-kaart-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.blog-overzicht-intro {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--inkt-zacht);
}

.blog-overzicht-lees {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 22px;
	font-size: 15px;
	font-weight: 700;
	color: var(--groen-tekst);
}

.blog-overzicht-lees .icoon {
	width: 17px;
	height: 17px;
	transition: transform 0.25s var(--ease);
}

.blog-kaart:hover .blog-overzicht-lees .icoon {
	transform: translateX(4px);
}

/* uitgelicht: de nieuwste blog, over de volle breedte */
.blog-kaart--uitgelicht {
	grid-column: 1 / -1;
	min-height: 280px;
	background-color: var(--wit);
	background-image:
		radial-gradient(55% 75% at 5% 25%, rgba(var(--lila), 0.24) 0%, rgba(var(--lila), 0) 60%),
		radial-gradient(55% 80% at 98% 30%, rgba(var(--mint), 0.24) 0%, rgba(var(--mint), 0) 60%),
		radial-gradient(70% 60% at 50% 100%, rgba(var(--lichtgroen), 0.3) 0%, rgba(var(--lichtgroen), 0) 65%);
}

.blog-kaart--uitgelicht::before {
	display: none;
}

.blog-kaart--uitgelicht .blog-kaart-tekst {
	justify-content: center;
	padding: clamp(28px, 4vw, 56px);
	padding-right: clamp(28px, 30%, 400px);
}

.blog-kaart--uitgelicht .blog-overzicht-titel {
	font-size: clamp(24px, 1.8vw + 14px, 40px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

.blog-kaart--uitgelicht .blog-overzicht-intro {
	font-size: 17px;
	max-width: 52ch;
}

.blog-kaart--uitgelicht .blog-overzicht-lees {
	margin-top: 0;
	padding-top: 26px;
}

.blog-kaart-vink {
	position: absolute;
	right: clamp(24px, 8%, 120px);
	top: 50%;
	width: clamp(80px, 13%, 168px);
	color: var(--groen);
	opacity: 0.9;
	transform: translateY(-50%) rotate(-4deg);
	transition: transform 0.5s var(--ease);
}

.blog-kaart-vink svg {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 16px 24px rgba(0, 135, 79, 0.25));
}

.blog-kaart--uitgelicht:hover .blog-kaart-vink {
	transform: translateY(-50%) rotate(0deg) scale(1.04);
}

.blog-kaart--uitgelicht:has(.blog-kaart-beeld) {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.blog-kaart--uitgelicht:has(.blog-kaart-beeld) .blog-kaart-beeld {
	aspect-ratio: auto;
	min-height: 100%;
}

.blog-kaart--uitgelicht:has(.blog-kaart-beeld) .blog-kaart-tekst {
	padding-right: clamp(28px, 3.4vw, 44px);
}

.blog-leeg {
	padding-bottom: var(--sectie);
	color: var(--inkt-zacht);
}

/* paginering */
.pagination {
	margin-top: 44px;
}

.blog .pagination {
	padding-bottom: var(--sectie);
}

.blog .blog-overzicht:last-child {
	margin-bottom: var(--sectie);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	min-height: 46px;
	padding: 0 14px;
	border: 1px solid var(--rand-sterk);
	border-radius: 999px;
	background: var(--wit);
	color: var(--inkt);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.pagination .page-numbers.current {
	border-color: var(--inkt);
	background: var(--inkt);
	color: var(--wit);
}

.pagination a.page-numbers:hover {
	border-color: var(--groen);
	color: var(--groen-tekst);
}

.pagination .dots {
	border-color: transparent;
	background: none;
}

@media (max-width: 1000px) {
	.blog-overzicht {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.blog-overzicht {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.blog-kaart--uitgelicht {
		grid-column: auto;
	}

	.blog-kaart--uitgelicht .blog-kaart-tekst {
		padding-right: 28px;
		padding-top: 96px;
	}

	.blog-kaart-vink {
		top: 28px;
		right: auto;
		left: 28px;
		width: 52px;
		transform: none;
	}

	.blog-kaart--uitgelicht:hover .blog-kaart-vink {
		transform: scale(1.04);
	}

	.blog-kaart--uitgelicht:has(.blog-kaart-beeld) {
		display: flex;
	}

	.blog-kaart-tekst {
		padding: 22px 22px 20px;
	}

	.blog-overzicht-titel {
		font-size: 19px;
	}
}


/* ---------------------------------------------------------------- 20 ---- */
/* Losse blog                                                                */

.artikel-kop {
	padding-bottom: clamp(24px, 3vw, 40px);
}

#breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--inkt-zacht);
}

#breadcrumbs a {
	color: var(--inkt-zacht);
	text-decoration: none;
}

#breadcrumbs a:hover {
	color: var(--groen-tekst);
	text-decoration: underline;
	text-underline-offset: 3px;
}

#breadcrumbs .sep {
	color: rgba(17, 17, 17, 0.3);
}

/* kruimelpad van All in One SEO (als dat in een pagina of blog staat) */
.aioseo-breadcrumbs {
	margin-bottom: 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--inkt-zacht);
}

.aioseo-breadcrumb a {
	color: var(--inkt-zacht);
	text-decoration: none !important;
}

.aioseo-breadcrumb a:hover {
	color: var(--groen-tekst);
}

.aioseo-breadcrumb-separator {
	margin: 0 6px;
	color: rgba(17, 17, 17, 0.3);
}

.artikel .page-title {
	font-size: clamp(34px, 2.6vw + 18px, 56px);
}
.artikel-beeld {
	margin-bottom: clamp(28px, 3vw, 44px);
}

.artikel-beeld img {
	width: 100%;
	border-radius: var(--radius-l);
}

.blog-single-content {
	font-size: 1rem;
	line-height: 1.75;
}

/* eerste alinea van een blog (het korte antwoord): vanzelf iets groter */
.blog-single-content > p:first-child {
	font-size: clamp(18px, 0.35vw + 16px, 20px);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: -0.01em;
}

/* afsluitend blok onder een blog */
.artikel-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	margin-top: clamp(48px, 5vw, 72px);
	padding: clamp(32px, 4vw, 48px);
	border-radius: 28px;
	background: var(--groen-diep);
	color: var(--wit);
}

.artikel-cta-kop {
	font-size: clamp(30px, 1.8vw + 20px, 46px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.artikel-cta-sub {
	margin-top: 18px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
}

.artikel-cta-prijs {
	margin-top: 8px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.72);
}

.artikel-cta .knop {
	margin-top: 26px;
}

/* vorige / volgende */
.blog-nav {
	margin-top: clamp(40px, 4vw, 56px);
	padding-bottom: var(--sectie);
}

.blog-nav-paar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.blog-nav-prev,
.blog-nav-next {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	border: 1px solid var(--rand);
	border-radius: 16px;
	background: var(--wit);
	color: var(--inkt);
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.blog-nav-next {
	align-items: flex-end;
	text-align: right;
}

.blog-nav-prev:hover,
.blog-nav-next:hover {
	border-color: rgba(0, 122, 71, 0.3);
	background: var(--mint-bg);
}

.blog-nav-leeg {
	display: block;
}

.blog-nav-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--inkt-zacht);
}

.blog-nav-label .icoon {
	width: 15px;
	height: 15px;
}

.blog-nav-titel {
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.blog-nav-prev:hover .blog-nav-titel,
.blog-nav-next:hover .blog-nav-titel {
	color: var(--groen-tekst);
}

.blog-nav-terug {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
	font-size: 15px;
	font-weight: 700;
	color: var(--inkt);
	text-decoration: none;
}

.blog-nav-terug .icoon {
	width: 17px;
	height: 17px;
	transition: transform 0.25s var(--ease);
}

.blog-nav-terug:hover {
	color: var(--groen-tekst);
}

.blog-nav-terug:hover .icoon {
	transform: translateX(-3px);
}

@media (max-width: 640px) {
	.blog-nav-paar {
		grid-template-columns: minmax(0, 1fr);
	}

	.blog-nav-next {
		align-items: flex-start;
		text-align: left;
	}

	.blog-nav-leeg {
		display: none;
	}
}


/* ---------------------------------------------------------------- 21 ---- */
/* 404                                                                       */

.fout404 {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 72vh;
	padding: calc(var(--kop-h) + clamp(48px, 7vw, 96px)) 0 var(--sectie);
	text-align: center;
}

.fout404-gloed {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		radial-gradient(40% 60% at 10% 10%, rgba(var(--lila), 0.3) 0%, rgba(var(--lila), 0) 70%),
		radial-gradient(40% 60% at 90% 10%, rgba(var(--mint), 0.3) 0%, rgba(var(--mint), 0) 70%);
}

.fout404-code {
	font-size: clamp(110px, 18vw, 220px);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.06em;
	background: var(--verloop);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.fout404-titel {
	margin-top: 18px;
	font-size: clamp(26px, 1.6vw + 18px, 40px);
	letter-spacing: -0.03em;
}

#error-404 .contentgroot {
	margin-top: 22px;
	color: var(--inkt-zacht);
}

.fout404-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.fout404-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 20px;
	border: 1px solid var(--rand-sterk);
	border-radius: 999px;
	background: var(--wit);
	color: var(--inkt);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.fout404-nav a:hover {
	border-color: var(--groen);
	color: var(--groen-tekst);
}


/* ---------------------------------------------------------------- 22 ---- */
/* Animaties                                                                 */
/* Beginstaat alleen op html.reveal-aan (gezet door js/algemeen.js), zodat  */
/* alles zichtbaar blijft als het script niet (of vertraagd) laadt. Het      */
/* script zet .visible zodra een element in beeld komt. Bij                  */
/* prefers-reduced-motion beweegt er niets.                                  */

@media (prefers-reduced-motion: no-preference) {

	.reveal-aan .reveal-from-bottom,
	.reveal-aan .reveal-from-left,
	.reveal-aan .reveal-from-right,
	.reveal-aan .reveal-fade,
	.reveal-aan .reveal-custom {
		opacity: 0;
		transition:
			opacity 0.7s ease,
			transform 0.7s var(--ease);
	}

	.reveal-aan .reveal-from-bottom { transform: translateY(28px); }
	.reveal-aan .reveal-from-left   { transform: translateX(-36px); }
	.reveal-aan .reveal-from-right  { transform: translateX(36px); }

	.reveal-aan .reveal-from-bottom.visible,
	.reveal-aan .reveal-from-left.visible,
	.reveal-aan .reveal-from-right.visible,
	.reveal-aan .reveal-fade.visible,
	.reveal-aan .reveal-custom.visible {
		opacity: 1;
		transform: none;
	}

	/* hero: bij het laden van de pagina */
	.hero-tekst > * {
		animation: heroIn 0.8s var(--ease) both;
	}

	.hero-tekst > h2 { animation-delay: 0.08s; }
	.hero-tekst > p { animation-delay: 0.16s; }
	.hero-tekst > .hero-knoppen { animation-delay: 0.24s; }

	.hero-media {
		animation: heroIn 0.9s var(--ease) 0.3s both;
	}

	/* vinkje tekent zich in beeld nadat de kop is geland */
	.checkdraw {
		animation: checkWipe 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.95s both;
	}

	.visible .checkdraw-klein {
		animation: checkWipe 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.5s both;
	}
}

@media (prefers-reduced-motion: no-preference) and (max-width: 700px) {
	.reveal-aan .reveal-from-left,
	.reveal-aan .reveal-from-right {
		transform: translateY(28px);
	}
}

@keyframes heroIn {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes checkWipe {
	from { clip-path: inset(-5% 105% -5% -5%); }
	to   { clip-path: inset(-5% -5% -5% -5%); }
}


/* ---------------------------------------------------------------- 23 ---- */
/* Hulpklassen en iconfont                                                   */

.verbergen {
	display: none;
}

.no-select {
	-webkit-user-select: none;
	user-select: none;
}

.icoon {
	display: inline-block;
	flex: none;
}

/* Kolommen en blokken uit het vorige thema, voor het geval ze in de
   inhoud van een pagina of blog gebruikt worden. */
.kolommen {
	display: grid;
	gap: 40px;
	margin-block: 60px;
}

.kolommen-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 60px;
}

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

.kolommen23 {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.kolom {
	position: relative;
	display: flex;
	flex-direction: column;
}

.kolom .knop {
	width: fit-content;
	margin: auto auto 0;
}

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

@media (min-width: 1001px) {
	.opvullen {
		grid-template-columns: max-content minmax(0, 1fr);
	}
}

@media (max-width: 768px) {
	.kolommen-2,
	.kolommen-3,
	.kolommen23 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.fullwidth {
	position: relative;
	margin-block: 80px;
}

.bloklichtekleur {
	padding-block: 80px;
	background-color: var(--mint-bg);
}

.subh1 {
	max-width: 90%;
	margin-inline: auto;
	text-align: center;
}

.oranje-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0 26px;
	border-radius: var(--radius-s);
	background: var(--inkt);
	color: var(--wit);
	font-weight: 700;
	text-decoration: none;
}

.oranje-button:hover {
	background: var(--groen-tekst);
}

/* iconfont uit het vorige thema (contact.php); laadt alleen als het
   daadwerkelijk gebruikt wordt */
@font-face {
	font-family: "customfont";
	src: url("fonts/trefcustom.woff?sca3pm") format("woff"),
	     url("fonts/trefcustom.ttf?sca3pm") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

.icon::before {
	font-family: "customfont" !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-external-link::before { content: "\e900"; }
.icon-right-open-big::before { content: "\61"; }
.icon-left-open-big::before { content: "\62"; }
.icon-down-open-big::before { content: "\63"; }
.icon-up-open-big::before { content: "\64"; }
.icon-responsive::before { content: "\65"; }
.icon-vinkje::before { content: "\66"; }
.icon-star::before { content: "\67"; }
.icon-advies::before { content: "\68"; }
.icon-pijl::before { content: "\69"; }
.icon-down-open-mini::before { content: "\6a"; }
.icon-left-open-mini::before { content: "\6b"; }
.icon-up-open-mini::before { content: "\6c"; }
.icon-right-open-mini::before { content: "\6d"; }
.icon-arrow-right2::before { content: "\6e"; }
.icon-twitter::before { content: "\6f"; }
.icon-facebook::before { content: "\70"; }
.icon-instagram::before { content: "\71"; }
.icon-star-o::before { content: "\72"; }
.icon-google-plus::before { content: "\73"; }
.icon-linkedin::before { content: "\74"; }
.icon-behance::before { content: "\75"; }
.icon-ontwerp::before { content: "\76"; }
.icon-whatsapp::before { content: "\77"; }
.icon-phone::before { content: "\78"; }
.icon-envelope-o::before { content: "\79"; }
.icon-oog::before { content: "\e901"; }
.icon-opvallen::before { content: "\e902"; }
.icon-pen2::before { content: "\e903"; }
.icon-website::before { content: "\e904"; }

.contacticons {
	display: flex;
	align-items: center;
	gap: 10px;
}

.footersocial1 {
	display: flex;
	gap: 14px;
	margin-top: 12px;
	font-size: 20px;
}

.footersocial1 a {
	color: var(--inkt);
	text-decoration: none;
}

.footersocial1 a:hover {
	color: var(--groen-tekst);
}


/* ---------------------------------------------------------------- 24 ---- */
/* Samsung Internet (.sb via header.php)                                     */
/* Samsung Internet kan een eigen donkere modus over sites heen leggen. De  */
/* gloed-lagen zijn daarom half doorzichtig op een effen achtergrond; hier  */
/* dempen we ze extra, zodat tekst in beide modi goed leesbaar blijft.      */

.sb .hero-gloed span,
.sb .slot-cta-gloed,
.sb .artikel-cta-gloed,
.sb .voet-gloed,
.sb .bestel-gloed {
	opacity: 0.55;
}

.sb .hero-gloed::after,
.sb .slot-cta-gloed::after,
.sb .artikel-cta-gloed::after {
	display: none;
}


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

@media print {
	.kop,
	.voet,
	.slot-cta,
	.artikel-cta,
	.blog-nav,
	.hero-gloed,
	.video-knop,
	.skiplink {
		display: none !important;
	}

	.hero,
	.pagina-kop,
	.bestel,
	.fout404 {
		padding-top: 0;
	}

	.reveal-aan .reveal-from-bottom,
	.reveal-aan .reveal-from-left,
	.reveal-aan .reveal-from-right,
	.reveal-aan .reveal-fade,
	.reveal-aan .reveal-custom {
		opacity: 1 !important;
		transform: none !important;
	}

	.faq-item::details-content {
		height: auto !important;
		content-visibility: visible !important;
	}
}