/*
  PAGINAS — de opmaak van home, over mij, het zorgplan en contact.

  Deze pagina's hergebruiken zoveel mogelijk blokken van de salespagina
  (reviews, getallen, de FAQ als gesprek, het slotblok, de carrousel, de
  beloftekaarten). Hier staat alleen wat nieuw is, en de onderdelen die op
  meerdere van deze pagina's terugkomen: de kop, de zwevende kaartjes, de
  tegels en de tijdlijn.

  Breekpunten, net als in de rest van het thema: 62rem (tablet) en 36rem
  (telefoon).
*/

/* ==========================================================================
   SITEMENU EN FOOTER
   ========================================================================== */

/* De pagina waar je bent, in het menu. */
.dp-nav__menu a[aria-current="page"] {
	background: rgb(18 43 7 / 0.08);
}

/* In het mobiele menu niet vet: dat las als een los kopje. */
.dp-nav__mobiel a[aria-current="page"] {
	font-weight: inherit;
}

/* Inloggen, helemaal rechts in de balk na de knop: een rustige link met
   een poppetje, zodat de knop de enige knop blijft. */
.dp-nav__login {
	display: inline-flex;
	flex: none;
	/* Rechts van de knop, er dicht tegenaan: van de grote tussenruimte van
	   de balk blijft een klein stukje over. */
	margin-inline: calc(0.35rem - var(--dp-space-m)) 0;
	gap: 0.4rem;
	align-items: center;
	padding: 0.5rem 0.75rem;
	border-radius: var(--dp-radius-pill);
	font-size: 0.92rem;
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-strong);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--dp-transition);
}

.dp-nav__login:hover {
	background: rgb(18 43 7 / 0.07);
}

.dp-nav__login svg {
	width: 1.15rem;
	height: 1.15rem;
}

/* Op de smalste laptops alleen het poppetje, anders past de balk niet. */
@media (width < 75rem) {
	.dp-nav__login span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Op tablet en telefoon staat inloggen in het volledige-scherm-menu. */
@media (width < 62rem) {
	.dp-nav__login {
		display: none;
	}
}

.dp-footer--site {
	padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) var(--dp-space-m);
	border-start-start-radius: var(--dp-radius-section);
	border-start-end-radius: var(--dp-radius-section);
	margin-top: calc(-1 * var(--dp-radius-section));
}

.dp-footer__raster {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
	gap: var(--dp-space-l);
	padding-bottom: var(--dp-space-l);
}

.dp-footer__wie {
	display: grid;
	gap: var(--dp-space-s);
	justify-items: start;
	max-width: 24rem;
}

.dp-footer__wie p {
	font-size: var(--dp-size-small);
	line-height: 1.6;
}

.dp-footer__trust {
	display: inline-flex;
	gap: 0.6rem;
	align-items: center;
	font-size: var(--dp-size-small);
	color: var(--dp-text-on-dark);
	text-decoration: none;
}

.dp-footer__trust:hover {
	color: var(--dp-lime);
}

.dp-footer__kop {
	margin-bottom: 0.9rem;
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	letter-spacing: var(--dp-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--dp-leaf); /* zelfde zachte groen als alle andere eyebrows */
}

.dp-footer__kolom ul {
	display: grid;
	gap: 0.55rem;
}

.dp-footer__kolom a,
.dp-footer__klein a {
	font-size: var(--dp-size-small);
	color: var(--dp-text-on-dark);
	text-decoration: none;
	transition: color var(--dp-transition);
}

.dp-footer__kolom a:hover,
.dp-footer__klein a:hover {
	color: var(--dp-lime);
}

.dp-footer--site .dp-footer__klein {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
}

.dp-footer__klein a {
	font-size: inherit;
}

/* De kale footer van de salespagina. */
.dp-footer--kaal .dp-footer__klein {
	flex-basis: auto;
	padding-top: 0;
	border-top: 0;
}

@media (width < 62rem) {
	.dp-footer__raster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.dp-footer__wie {
		grid-column: 1 / -1;
	}
}

@media (width < 36rem) {
	.dp-footer__raster {
		grid-template-columns: 1fr 1fr;
	}
}

/* ==========================================================================
   DE KOP — bovenaan elke pagina
   Tekst links, beeld rechts. Het beeld heeft kaartjes die er licht zwevend
   overheen liggen (.dp-zweef). Op smalle schermen komt het beeld eronder.
   ========================================================================== */

.dp-kop {
	padding-top: clamp(8rem, 6.5rem + 4vw, 10.5rem);
	background:
		radial-gradient(45% 55% at 88% 12%, rgb(207 222 124 / 0.35), transparent 70%),
		radial-gradient(35% 40% at 0% 100%, rgb(254 161 117 / 0.14), transparent 70%),
		var(--dp-paper);
	overflow-x: clip;
}

.dp-kop__grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(3rem, 1.5rem + 5vw, 6.5rem);
	align-items: center;
}

.dp-kop__tekst {
	display: grid;
	gap: var(--dp-space-s);
	justify-items: start;
}

.dp-kop__titel {
	font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.75rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.dp-kop__tekst .dp-lead {
	margin-top: 0.3rem;
}

.dp-kop__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
	align-items: center;
	margin-top: var(--dp-space-s);
}

/* De tweede keuze: geen tweede knop, maar een rustige link met een streep. */
.dp-kop__tweede {
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
	text-decoration: underline;
	text-decoration-color: var(--dp-leaf);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
	transition: text-decoration-color var(--dp-transition);
}

.dp-kop__tweede:hover {
	text-decoration-color: var(--dp-forest);
}

.dp-kop__klein {
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
}

.dp-trust--links {
	justify-content: flex-start;
	margin-top: var(--dp-space-s);
}

.dp-kop__beeld {
	position: relative;
	margin-block: 1.5rem 2.5rem;
}

.dp-kop__foto {
	overflow: hidden;
	border-radius: var(--dp-radius-section);
	box-shadow: 0 40px 70px -40px rgb(18 43 7 / 0.55);
}

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

.dp-kop--home .dp-kop__foto img {
	object-position: 28% 50%;
}

.dp-kop__beeld--staand .dp-kop__foto img {
	object-position: 50% 30%;
}

/* Bij het laden schuift de foto zacht omhoog en zoomt hij een fractie uit. */
@media (prefers-reduced-motion: no-preference) {
	.dp-kop__foto img {
		animation: dp-kop-foto 1.4s var(--dp-ease-out) both;
	}
}

@keyframes dp-kop-foto {
	from {
		opacity: 0;
		transform: scale(1.08);
	}
}

@media (width < 62rem) {
	.dp-kop__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.dp-kop__beeld {
		width: min(100%, 30rem);
		margin-inline: auto;
	}
}

/* --- Zwevende kaartjes ----------------------------------------------------- */

.dp-zweef {
	position: absolute;
	z-index: 2;
	margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.dp-zweef {
		animation:
			dp-zweef-in 900ms var(--dp-ease-out) both,
			dp-zweef 8s ease-in-out 1s infinite;
	}

	.dp-zweef--sticker { animation-delay: 250ms, 1.5s; }
	.dp-zweef--review,
	.dp-zweef--mail { animation-delay: 450ms, 2.2s; }
	.dp-zweef--polaroid { animation-delay: 350ms, 1.8s; }
}

@keyframes dp-zweef-in {
	from {
		opacity: 0;
		translate: 0 30px;
	}
}

/* Een klantsite in een klein browservenster, linksboven over de foto. */
.dp-zweef--venster {
	inset-block-start: 9%;
	inset-inline-start: -16%;
	width: 48%;
	overflow: hidden;
	border-radius: 0.45rem;
	background: #fff;
	box-shadow: 0 30px 50px -25px rgb(18 43 7 / 0.55);
	rotate: -4deg;
}

/* De browserbalk is wit, niet grijsgroen: zo steekt het venster af tegen de
   achtergrond van de sectie in plaats van ermee te versmelten. Een haarlijntje
   houdt de balk los van de schermafbeelding eronder. */
.dp-zweef__balk {
	display: flex;
	gap: 0.25rem;
	padding: 0.45rem 0.6rem;
	border-bottom: var(--dp-border) solid rgb(18 43 7 / 0.08);
	background: #fff;
}

.dp-zweef__balk span {
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: rgb(18 43 7 / 0.2);
}

/* ==========================================================================
   WISSELENDE SCHERMEN IN DE HOMEKOP
   Drie klantsites in één venster, die elkaar met een gewone fade aflossen:
   elke site staat vier seconden stil en lost dan op in de volgende. Beide
   vensters draaien even snel, maar het rechter loopt twee seconden achter,
   zodat ze nooit tegelijk wisselen. De eerste afbeelding bepaalt de hoogte,
   de rest ligt eroverheen.

   Let op: dit heet met opzet niet .dp-wissel. Die naam is al bezet door de
   wisselende sets in aanbodvariant C, en die wil je hier niet erven.
   ========================================================================== */

.dp-schermwissel {
	position: relative;
	display: block;
}

.dp-schermwissel img {
	display: block;
	width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.dp-schermwissel img:not(:first-child) {
		position: absolute;
		inset: 0;
		height: 100%;
		object-fit: cover;
	}

	.dp-schermwissel img {
		animation: dp-schermwissel 12s linear infinite;
	}

	.dp-schermwissel img:nth-child(2) { animation-delay: -8s; }
	.dp-schermwissel img:nth-child(3) { animation-delay: -4s; }

	.dp-schermwissel--na img:nth-child(1) { animation-delay: -2s; }
	.dp-schermwissel--na img:nth-child(2) { animation-delay: -10s; }
	.dp-schermwissel--na img:nth-child(3) { animation-delay: -6s; }
}

@keyframes dp-schermwissel {
	0%,
	28% { opacity: 1; }
	33%,
	95% { opacity: 0; }
	100% { opacity: 1; }
}

/* Een ronde sticker in blad, rechtsboven. */
.dp-zweef--sticker {
	inset-block-start: -1.75rem;
	inset-inline-end: -1.5rem;
	display: grid;
	place-content: center;
	width: 8.5rem;
	aspect-ratio: 1;
	padding: 1rem;
	border-radius: 50%;
	background: var(--dp-leaf);
	color: var(--dp-forest);
	text-align: center;
	rotate: 10deg;
	box-shadow: 0 20px 36px -18px rgb(18 43 7 / 0.5);
}

.dp-zweef--sticker strong {
	font-family: var(--dp-font-display);
	font-size: 2.1rem;
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1;
}

.dp-zweef--sticker span {
	font-size: 0.72rem;
	font-weight: var(--dp-weight-bold);
	line-height: 1.25;
}

/* Een review, linksonder over de rand. */
.dp-zweef--review {
	inset-block-end: -2.5rem;
	inset-inline-start: -12%;
	display: grid;
	gap: 0.5rem;
	width: min(20rem, 78%);
	padding: 1rem 1.15rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	box-shadow: 0 30px 50px -28px rgb(18 43 7 / 0.55);
}

.dp-zweef--review blockquote {
	margin: 0;
	font-size: var(--dp-size-small);
	line-height: 1.45;
	color: var(--dp-text);
}

.dp-zweef--review strong {
	color: var(--dp-text-strong);
}

.dp-zweef--review figcaption {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	font-size: var(--dp-size-xs);
	color: var(--dp-text-muted);
}

.dp-zweef--review figcaption img {
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	object-fit: cover;
}

.dp-zweef--review a {
	color: inherit;
}

/* Een polaroid met tape, linksonder. */
.dp-zweef--polaroid {
	inset-block-end: -2.5rem;
	inset-inline-start: -14%;
	width: 44%;
	padding: 0.6rem 0.6rem 0;
	background: #fff;
	box-shadow: 0 30px 50px -25px rgb(18 43 7 / 0.55);
	rotate: -6deg;
}

.dp-zweef--polaroid > img:first-child {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.dp-zweef--polaroid figcaption {
	padding: 0.55rem 0 0.7rem;
	font-family: var(--dp-font-display);
	font-style: italic;
	font-variation-settings: var(--dp-fraunces-axes);
	color: var(--dp-forest);
	text-align: center;
}

.dp-zweef__tape {
	position: absolute;
	inset-block-start: -1.3rem;
	inset-inline-start: 50%;
	width: 4.2rem;
	translate: -50% 0;
}

/* Een mailtje van Simone, onder de statuskaart. */
.dp-zweef--mail {
	inset-block-end: -2rem;
	inset-inline-start: -10%;
	display: flex;
	gap: 0.7rem;
	align-items: center;
	max-width: 19rem;
	padding: 0.75rem 1rem 0.75rem 0.75rem;
	border-radius: 1.4rem 1.4rem 1.4rem 0.35rem;
	background: var(--dp-forest);
	color: var(--dp-paper);
	box-shadow: 0 26px 44px -24px rgb(18 43 7 / 0.6);
	font-size: var(--dp-size-small);
	line-height: 1.4;
}

.dp-zweef--mail img {
	flex: none;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	object-fit: cover;
}

.dp-zweef--mail p {
	margin: 0;
}

.dp-zweef--mail strong {
	display: block;
	font-size: var(--dp-size-xs);
	color: var(--dp-leaf);
}

/* Lichte variant: op een lichte sectie steekt een donkere bubbel te hard af
   tegen de statuskaart ernaast. Wit met een dun randje doet het rustiger.
   Deze zweeft ook niet: hij komt één keer van onderen in beeld en blijft dan
   gewoon staan, zoals een berichtje dat binnenkomt. */
.dp-zweef--mail-licht {
	border: var(--dp-border) solid var(--dp-line);
	background: #fff;
	color: var(--dp-text);
	box-shadow: 0 26px 44px -26px rgb(18 43 7 / 0.35);
}

.dp-zweef--mail-licht strong {
	color: var(--dp-text-muted);
}

@media (prefers-reduced-motion: no-preference) {
	.dp-zweef--mail-licht {
		animation: dp-bericht-in 700ms var(--dp-ease-out) 2100ms both;
	}
}

@keyframes dp-bericht-in {
	from {
		transform: translateY(1.75rem);
		opacity: 0;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

@media (width < 62rem) {
	.dp-zweef--venster {
		inset-inline-start: -6%;
		width: 44%;
	}

	.dp-zweef--review,
	.dp-zweef--polaroid,
	.dp-zweef--mail {
		inset-inline-start: -4%;
	}

	.dp-zweef--sticker {
		inset-inline-end: -0.5rem;
		width: 7rem;
	}
}

@media (width < 36rem) {
	.dp-zweef--sticker {
		width: 6rem;
		inset-block-start: -1.25rem;
	}

	.dp-zweef--sticker strong {
		font-size: 1.6rem;
	}

	.dp-zweef--sticker span {
		font-size: 0.62rem;
	}

	.dp-zweef--review {
		width: 88%;
	}
}

/* ==========================================================================
   HOME — HERKENBAAR, met de zoekopdracht in Google
   ========================================================================== */

/* --- Variant A en B: twee kolommen -------------------------------------- */

.dp-herkenbaar__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	align-items: center;
}

/* B zet Google links en de tekst rechts. */
.dp-herkenbaar__grid--om {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

.dp-herkenbaar h2 {
	font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem);
}

.dp-herkenbaar h2 em {
	text-decoration: none;
}

/* Sleutelzinnen in de lopende tekst zijn vet en onderstreept met een dikke
   groene lijn. Zo kun je de alinea scannen zonder hem helemaal te lezen, en
   blijft het toch lopende tekst in plaats van een lijstje met balkjes. */
.dp-herkenbaar__tekst b {
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
	text-decoration: underline;
	text-decoration-color: var(--dp-leaf);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.22em;
	text-decoration-skip-ink: none;
}

/* De handgeschreven regel onder de tekst, licht gekanteld. */
.dp-herkenbaar__hand {
	max-width: none !important;
	margin-top: var(--dp-space-s) !important;
	font-family: var(--dp-font-hand);
	font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
	line-height: 1;
	color: var(--dp-forest);
	rotate: -2deg;
}

/* De zoekwoorden als pillen: leest in één oogopslag, en zet precies de
   woorden op de pagina waarop baasjes zoeken. */
.dp-zoekwoorden {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	max-width: none;
}

.dp-zoekwoorden li {
	padding: 0.45em 1em 0.45em 2.1em;
	border: var(--dp-border) solid var(--dp-pil-rand);
	border-radius: var(--dp-radius-pill);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e6b57' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E")
			no-repeat left 0.85em center / 0.85rem,
		#fff;
	font-size: var(--dp-size-small);
	color: var(--dp-text);
}

/* --- Variant C: foto naast het zoekscherm ------------------------------- */

.dp-herkenbaar__duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
	align-items: center;
}

.dp-herkenbaar__foto {
	position: relative;
	margin: 0;
}

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

.dp-herkenbaar__foto figcaption {
	position: absolute;
	inset-block-end: -1.5rem;
	inset-inline-start: 1.5rem;
}

@media (width < 62rem) {
	.dp-herkenbaar__grid,
	.dp-herkenbaar__grid--om,
	.dp-herkenbaar__duo {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Op smal komt de tekst altijd eerst, ook in variant B. */
	.dp-herkenbaar__grid--om .dp-serp-plek {
		order: 2;
	}
}

.dp-knipoog {
	font-style: italic;
	color: var(--dp-text-muted);
}

.dp-herkenbaar__slot {
	max-width: 30ch;
	margin-top: var(--dp-space-m) !important;
	font-family: var(--dp-font-display);
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1.25;
	color: var(--dp-text-strong);
}

.dp-herkenbaar__slot em {
	color: var(--dp-text-strong);
	background: linear-gradient(transparent 60%, var(--dp-leaf) 60% 90%, transparent 90%);
}

/* Boven de zoekresultaten, in handschrift: "dit is wat ik voor jou wil",
   met een getekend pijltje naar de kaart. */
.dp-serp-plek {
	position: relative;
	width: 100%;
	padding-top: 5rem;
}

/* In variant C staat het zoekscherm naast een foto en heeft het geen
   handgeschreven regel erboven nodig. */
.dp-herkenbaar__duo .dp-serp-plek {
	padding-top: 0;
}

.dp-krabbeltekst {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 8%;
	display: flex;
	gap: 0.2rem;
	align-items: flex-start;
	max-width: none;
	margin: 0;
	font-family: var(--dp-font-hand);
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
	line-height: 1;
	color: var(--dp-forest);
	rotate: -4deg;
}

.dp-krabbeltekst svg {
	width: 3.4rem;
	height: 3.9rem;
	margin-top: 0.5rem;
	overflow: visible;
}

.dp-krabbeltekst path {
	fill: none;
	stroke: var(--dp-forest);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- De zoekresultaten -----------------------------------------------------
   Elk resultaat heeft een vaste hoogte en een plek (data-plek). De bovenkant
   wordt uit die plek berekend, zodat het script alleen de plek hoeft te
   wisselen en de browser de beweging doet. Plek 3 staat op pagina 2.
*/

.dp-serp {
	--dp-serp-h: 4.6rem;
	--dp-serp-gat: 0.5rem;
	--dp-serp-scheiding: 2.6rem;

	padding: 1rem;
	border-radius: var(--dp-radius-l);
	background: #fff;
	color: var(--dp-text);
	box-shadow: 0 26px 50px -32px rgb(18 43 7 / 0.4);
}

.dp-serp__balk {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	margin-bottom: 0.9rem;
	padding: 0.65rem 1rem;
	border: var(--dp-border) solid var(--dp-pil-rand);
	border-radius: var(--dp-radius-pill);
	background: #f1f3ee;
	font-size: var(--dp-size-small);
	color: var(--dp-text-strong);
}

.dp-serp__loep {
	display: grid;
	color: var(--dp-text-muted);
}

.dp-serp__loep svg {
	width: 1.05rem;
	height: 1.05rem;
	stroke-width: 2.2;
}

.dp-serp__lijst {
	position: relative;
	height: calc(4 * var(--dp-serp-h) + 3 * var(--dp-serp-gat) + var(--dp-serp-scheiding));
}

.dp-serp__item {
	position: absolute;
	inset-inline: 0;
	display: grid;
	grid-template-columns: 2rem 1fr;
	gap: 0.7rem;
	align-items: center;
	height: var(--dp-serp-h);
	padding: 0.6rem 0.75rem;
	border-radius: var(--dp-radius-s);
	transition:
		top 1100ms cubic-bezier(0.6, 0, 0.2, 1),
		opacity 700ms var(--dp-ease),
		background-color 700ms var(--dp-ease);
}

.dp-serp__item[data-plek="0"] { top: 0; }
.dp-serp__item[data-plek="1"] { top: calc(var(--dp-serp-h) + var(--dp-serp-gat)); }
.dp-serp__item[data-plek="2"] { top: calc(2 * (var(--dp-serp-h) + var(--dp-serp-gat))); }

.dp-serp__item[data-plek="3"] {
	top: calc(3 * (var(--dp-serp-h) + var(--dp-serp-gat)) + var(--dp-serp-scheiding));
	opacity: 0.45;
}

.dp-serp__item--jij[data-plek="0"] {
	background: var(--dp-leaf-soft);
	box-shadow: 0 0 0 1.5px rgb(78 122 23 / 0.35);
}

.dp-serp__icoon {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: var(--dp-border) solid var(--dp-pil-rand);
	border-radius: 50%;
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-muted);
}

.dp-serp__icoon--jij {
	border-color: transparent;
	background: var(--dp-forest);
	color: var(--dp-paper);
}

.dp-serp__tekst {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
	line-height: 1.3;
}

.dp-serp__url {
	font-size: var(--dp-size-xs);
	color: var(--dp-text-muted);
}

.dp-serp__titel {
	overflow: hidden;
	font-size: 0.98rem;
	font-weight: var(--dp-weight-bold);
	color: #1f4d8c;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* De streep tussen pagina 1 en pagina 2. */
.dp-serp__pagina {
	position: absolute;
	inset-inline: 0;
	top: calc(3 * (var(--dp-serp-h) + var(--dp-serp-gat)));
	height: var(--dp-serp-scheiding);
}

.dp-serp__pagina span {
	position: absolute;
	inset-block-start: 50%;
	inset-inline: 0;
	display: flex;
	gap: 0.8rem;
	align-items: center;
	translate: 0 -50%;
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	letter-spacing: var(--dp-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--dp-text-muted);
}

.dp-serp__pagina span::before,
.dp-serp__pagina span::after {
	content: "";
	flex: 1;
	border-top: 1.5px dashed var(--dp-line-strong);
}

@media (width < 36rem) {
	.dp-serp {
		--dp-serp-h: 4.2rem;

		padding: 0.7rem;
	}

	.dp-serp__titel {
		font-size: 0.88rem;
	}
}

/* ==========================================================================
   TEGELS — het aanbod als klikbare kaarten (home, contact)
   ========================================================================== */

.dp-aanbod__raster {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--dp-space-m);
}

.dp-tegel--groot {
	grid-row: span 2;
}

.dp-tegel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.8rem;
	overflow: hidden;
	padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	color: var(--dp-text);
	text-decoration: none;
	transition:
		transform 500ms var(--dp-ease-out),
		box-shadow 500ms var(--dp-ease-out),
		border-color 500ms var(--dp-ease);
}

.dp-tegel:hover {
	transform: translateY(-6px);
	border-color: var(--dp-line-strong);
	box-shadow: var(--dp-shadow-l);
}

.dp-tegel__label {
	padding: 0.3em 0.8em;
	border: var(--dp-border) solid transparent;
	border-radius: var(--dp-radius-pill);
	background: var(--dp-leaf-soft);
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

.dp-tegel__titel {
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
	line-height: 1.1;
}

.dp-tegel__tekst {
	max-width: 34rem;
	color: var(--dp-text-muted);
}

.dp-tegel__prijs {
	font-family: var(--dp-font-display);
	font-size: var(--dp-size-h4);
	font-variation-settings: var(--dp-fraunces-axes);
	color: var(--dp-text-strong);
}

.dp-tegel__punten {
	display: grid;
	gap: 0.45rem;
}

.dp-tegel__punten li {
	display: flex;
	gap: 0.55rem;
	align-items: center;
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-medium);
}

.dp-tegel__punten svg {
	flex: none;
	width: 1.2rem;
	height: 1.2rem;
	color: var(--dp-leaf);
	fill: none;
	stroke-width: 2.2;
}

/* "Bekijk …" onderaan, met een pijl in een rondje die bij hover opschuift. */
.dp-tegel__meer {
	display: inline-flex;
	gap: 0.6rem;
	align-items: center;
	margin-top: auto;
	padding-top: 0.6rem;
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

/* Een omcirkelde pijl: alleen een rondje eromheen, geen gevuld vlak. Zo valt
   hij overal goed uit, ook op een gekleurde kaart, en is hij familie van de
   ronde carrouselknoppen (.dp-rond). Pas bij hover loopt hij vol. */
.dp-tegel__pijl {
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	transition:
		transform 450ms var(--dp-ease-out),
		border-color 450ms var(--dp-ease),
		background-color 450ms var(--dp-ease),
		color 450ms var(--dp-ease);
}

.dp-tegel__pijl svg {
	width: 1rem;
	height: 1rem;
	stroke-width: 2.2;
}

.dp-tegel:hover .dp-tegel__pijl,
.dp-luik:hover .dp-tegel__pijl {
	transform: translateX(5px) rotate(-12deg);
	border-color: var(--dp-lime);
	background: var(--dp-lime);
	color: var(--dp-forest);
}

/* De grote: donker, met de laptop die rechtsonder uit de kaart steekt. */
.dp-tegel--groot {
	min-height: 34rem;
	border-color: var(--dp-forest);
	background:
		radial-gradient(60% 60% at 90% 100%, rgb(207 222 124 / 0.25), transparent 70%),
		var(--dp-forest);
	color: var(--dp-text-on-dark);
}

.dp-tegel--groot .dp-tegel__label {
	border-color: rgb(231 238 221 / 0.25);
	background: rgb(231 238 221 / 0.08);
	color: var(--dp-leaf);
}

.dp-tegel--groot .dp-tegel__titel,
.dp-tegel--groot .dp-tegel__meer {
	color: var(--dp-paper);
}

.dp-tegel--groot .dp-tegel__tekst {
	max-width: 26rem;
	color: var(--dp-text-on-dark-muted);
}

.dp-tegel--groot .dp-tegel__pijl {
	background: var(--dp-paper);
	color: var(--dp-forest);
}

.dp-tegel__beeld {
	position: absolute;
	inset-block-end: -4%;
	inset-inline-end: -16%;
	z-index: 0;
	width: 80%;
	filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.45));
	pointer-events: none;
	transition: transform 700ms var(--dp-ease-out);
}

.dp-tegel:hover .dp-tegel__beeld {
	transform: translate(-3%, -3%) rotate(-2deg);
}

.dp-tegel--groot > :not(.dp-tegel__beeld, .dp-sets) {
	position: relative;
	z-index: 1;
}

.dp-tegel--zorg {
	border-color: transparent;
	background: var(--dp-leaf-soft);
}

.dp-tegel--hulp {
	border-color: transparent;
	background: var(--dp-peach-soft);
}

@media (width < 62rem) {
	.dp-aanbod__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.dp-tegel--groot {
		grid-row: auto;
		min-height: 0;
		padding-bottom: clamp(12rem, 40vw, 18rem);
	}

	.dp-tegel__beeld {
		inset-inline-end: -8%;
		width: 70%;
	}
}

/* ==========================================================================
   HOME — REVIEWS OP EEN RIJ
   ========================================================================== */

.dp-reviewrij__kaarten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dp-space-m);
	align-items: start;
}

.dp-reviewrij__kaarten .dp-review {
	margin: 0;
}

/* De middelste staat een stukje lager: dat oogt minder als een tabel. */
.dp-reviewrij__kaarten > :nth-child(2) {
	margin-top: 2.5rem;
}

.dp-reviewrij__trustpilot {
	display: inline-flex;
	gap: 0.7rem;
	align-items: center;
	padding: 0.65rem 0.7rem 0.65rem 1.1rem;
	border: var(--dp-border) solid var(--dp-pil-rand);
	border-radius: var(--dp-radius-pill);
	background: #fff;
	font-size: var(--dp-size-small);
	color: var(--dp-text-strong);
	text-decoration: none;
	transition:
		transform var(--dp-transition),
		box-shadow var(--dp-transition);
}

.dp-reviewrij__trustpilot:hover {
	transform: translateY(-2px);
	box-shadow: var(--dp-shadow-m);
}

.dp-reviewrij__pijl {
	display: grid;
	place-items: center;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: var(--dp-forest);
	color: var(--dp-paper);
}

.dp-reviewrij__pijl svg {
	width: 0.9rem;
	height: 0.9rem;
	stroke-width: 2.2;
}

@media (width < 62rem) {
	.dp-reviewrij__kaarten {
		grid-template-columns: minmax(0, 1fr);
		max-width: 34rem;
	}

	.dp-reviewrij__kaarten > :nth-child(2) {
		margin-top: 0;
	}
}

/* ==========================================================================
   HOME — IK BEN SIMONE (het blok "Over Simone" met een andere foto)
   ========================================================================== */

/* Op deze foto zit Simone links, dus hier staat de kaart rechts. */
.dp-over--home .dp-over__foto img {
	object-position: 20% 85%; /* Simone en de hond hoger in beeld, boven de cijferbalk uit */
}

.dp-over--home .dp-over__foto::after {
	background: linear-gradient(270deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.25) 45%, transparent 70%);
}

.dp-over--home .dp-over__tekst {
	margin-inline-start: auto;
}

.dp-over__knop {
	margin-top: var(--dp-space-m) !important;
}

/* Op het zorgplan staat Simone verder naar links in beeld, zodat de tekstkaart
   rechts genoeg ruimte heeft en niet over haar gezicht valt. De foto beweegt
   hier ook duidelijker mee tijdens het scrollen. */
/* Op deze foto zit Simone rechts en klein in beeld, dus de tekstkaart staat
   links (de standaardvorm van .dp-over). De fotolaag is breder dan de sectie
   en steekt rechts uit beeld, zodat ze nog wat verder naar rechts opschuift en
   de kaart haar niet raakt. Een andere object-position helpt hier nauwelijks:
   de foto is breder dan hoog en wordt vooral verticaal bijgesneden. */
.dp-over--zorg .dp-over__foto {
	inset-block: -14%;
	inset-inline: 0 -10%;
}

.dp-over--zorg .dp-over__foto img {
	object-position: 0% 42%;
}

/* Op een telefoon is de foto hoger dan breed: dan Simone in beeld, niet de
   lege stoelen links. */
@media (width < 48rem) {
	/* De verschuiving voor het parallax-effect hoort bij desktop; op een
	   telefoon schoof de foto daardoor omhoog en viel haar hoofd eraf. */
	.dp-over--zorg .dp-over__foto {
		inset: auto;
	}

	.dp-over--zorg .dp-over__foto img {
		object-position: 64% 40%;
	}

	/* "Goed om te weten": de kop links, net als het lijstje eronder. */
	.dp-plannen .dp-kleintjes {
		justify-items: start;
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.dp-over--zorg .dp-over__foto {
			animation-name: dp-parallax-sterk;
		}
	}
}

/* Tussen "Zo begint het" en de plannen mag wat minder lucht: het zijn twee
   lichte blokken achter elkaar en die liepen te ver uit elkaar. */
.dp-route-start {
	padding-bottom: var(--dp-section-y-tight);
}

.dp-plannen {
	padding-top: var(--dp-section-y-tight);
}

/* ==========================================================================
   HOME — BLOGS
   ========================================================================== */

/* Bij een blogkaart is het pijltje los, zonder rondje: de hele kaart is al een
   knop, dus een tweede knopvorm erin is er één te veel. */
.dp-blog__lees .dp-tegel__pijl {
	width: auto;
	height: auto;
	border: 0;
	background: none;
}

.dp-blogs__kop {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dp-space-m);
	align-items: end;
	justify-content: space-between;
	margin-bottom: var(--dp-space-l);
}

.dp-blogs__lijst {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dp-space-m);
}

.dp-blog {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.7rem;
	height: 100%;
	color: var(--dp-text);
	text-decoration: none;
}

.dp-blog__foto {
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: var(--dp-radius-l);
}

.dp-blog__foto img {
	width: 100%;
	aspect-ratio: 4 / 5; /* staand, zoals een Instagram-post */
	object-fit: cover;
	transition: transform 900ms var(--dp-ease-out);
}

.dp-blog:hover .dp-blog__foto img {
	transform: scale(1.06);
}

.dp-blog__cat {
	margin-top: 1rem;
	padding: 0.3em 0.8em;
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
}

.dp-blog__titel {
	font-family: var(--dp-font-display);
	font-size: var(--dp-size-h4);
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1.2;
	color: var(--dp-text-strong);
}

.dp-blog__lees {
	display: inline-flex;
	gap: 0.6rem;
	align-items: center;
	margin-top: auto;
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

.dp-blog__lees .dp-tegel__pijl,
.dp-blog:hover .dp-blog__lees .dp-tegel__pijl {
	width: auto;
	height: auto;
	background: none;
	color: var(--dp-forest);
}

.dp-blog:hover .dp-blog__lees .dp-tegel__pijl {
	transform: translateX(5px);
}

@media (width < 62rem) {
	.dp-blogs__lijst {
		grid-template-columns: 1fr 1fr;
	}
}

@media (width < 36rem) {
	.dp-blogs__lijst {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Het slotblok kan meerdere knoppen hebben. De rij is een <p>, en erfde
   daardoor de leesbreedte van een alinea (62 tekens): drie knoppen pasten
   daarom nooit op één rij. */
.dp-slot__knop {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	align-items: center;
	max-width: none;
}

.dp-pagina-over-mij .dp-slot__inhoud {
	max-width: 76rem;
}

.dp-slot__klein a {
	color: var(--dp-paper);
}

/* ==========================================================================
   OVER MIJ — HET IDEE
   ========================================================================== */

/* Het missieblok: links het verhaal, rechts hetzelfde zoekscherm als op de
   homepage. Het citaat dat hier eerst stond is opgegaan in de lopende tekst. */
.dp-idee__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	align-items: center;
}

.dp-idee__tekst > p {
	font-size: var(--dp-size-body);
}

.dp-idee__tekst b {
	font-weight: var(--dp-weight-bold);
	color: var(--dp-paper);
	text-decoration: underline;
	text-decoration-color: var(--dp-leaf);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.22em;
	text-decoration-skip-ink: none;
}

/* Op donker is de handgeschreven krabbel boven het zoekscherm licht. */
.dp-idee .dp-krabbeltekst {
	color: var(--dp-paper);
}

.dp-idee .dp-krabbeltekst path {
	stroke: var(--dp-paper);
}

@media (width < 62rem) {
	.dp-idee__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   DE TIJDLIJN — "Hoe het begon" (over mij) en "Het ritme" (zorgplan)
   In het midden een lijn die zich tijdens het scrollen vult. De momenten
   staan er om en om links en rechts van, elk met een bolletje op de lijn.
   Op smalle schermen staat de lijn links en alles eronder.
   ========================================================================== */

.dp-tijdlijn {
	--dp-lijn-x: 50%;

	position: relative;
	display: grid;
	gap: var(--dp-space-m);
	max-width: 58rem;
	margin-inline: auto;
	padding-block: 1rem;
	view-timeline: --dp-tijdlijn block;
}

/* De lege lijn, en daaroverheen de gevulde. */
.dp-tijdlijn::before,
.dp-tijdlijn::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: var(--dp-lijn-x);
	width: 3px;
	margin-inline-start: -1.5px;
	border-radius: 3px;
	background: rgb(18 43 7 / 0.12);
}

.dp-tijdlijn::after {
	background: var(--dp-forest);
	transform-origin: 50% 0;
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.dp-tijdlijn::after {
			animation: dp-lijn-vul linear both;
			animation-timeline: --dp-tijdlijn;
			animation-range: entry 40% exit 60%;
		}
	}
}

@keyframes dp-lijn-vul {
	from {
		transform: scaleY(0);
	}

	to {
		transform: scaleY(1);
	}
}

.dp-moment {
	position: relative;
	width: calc(50% - 2.75rem);
	padding: 1.3rem 1.5rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
}

/* Om en om, en in elkaar geschoven: zo wordt het een zigzag, geen trap. */
.dp-moment + .dp-moment {
	margin-top: -4.5rem;
}

.dp-moment:nth-child(odd) {
	justify-self: start;
}

.dp-moment:nth-child(even) {
	justify-self: end;
}

/* Het bolletje op de lijn. */
.dp-moment::before {
	content: "";
	position: absolute;
	inset-block-start: 1.6rem;
	width: 1.1rem;
	height: 1.1rem;
	border: 3px solid var(--dp-moss);
	border-radius: 50%;
	background: var(--dp-forest);
	box-shadow: 0 0 0 1px rgb(18 43 7 / 0.2);
}

.dp-moment:nth-child(odd)::before {
	inset-inline-end: calc(-2.75rem - 0.55rem);
}

.dp-moment:nth-child(even)::before {
	inset-inline-start: calc(-2.75rem - 0.55rem);
}

.dp-moment__wanneer {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 0.5rem;
	padding: 0.25em 0.75em;
	border-radius: var(--dp-radius-pill);
	background: var(--dp-leaf);
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-forest);
}

.dp-moment__wanneer b {
	padding: 0.1em 0.55em;
	border-radius: var(--dp-radius-pill);
	background: var(--dp-forest);
	color: var(--dp-paper);
	font-size: 0.85em;
}

.dp-moment__titel {
	margin-bottom: 0.35rem;
	font-size: var(--dp-size-h4);
	line-height: 1.2;
}

.dp-moment p {
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
}

/* Het moment van het idee licht op. */
.dp-moment--licht {
	border-color: transparent;
	background: var(--dp-lime-soft);
}

/* Het moment waarop het kwartje viel, mag eruit springen: een kaart die zacht
   op en neer deint en een fractie scheef hangt, met een lamp die erboven
   uitsteekt en pulseert. */
.dp-moment--idee {
	position: relative;
	background:
		radial-gradient(70% 60% at 20% 0%, rgb(230 255 86 / 0.75), transparent 70%),
		linear-gradient(160deg, #f6ffc4 0%, #e6ff56 100%);
	box-shadow: 0 26px 50px -24px rgb(18 43 7 / 0.45);
}

.dp-moment__lamp {
	position: absolute;
	inset-block-start: -1.4rem;
	inset-inline-end: -0.9rem;
	display: grid;
	place-items: center;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 10px 22px -10px rgb(18 43 7 / 0.5);
	font-size: 1.6rem;
	line-height: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.dp-moment--idee {
		animation: dp-idee-zweef 5s ease-in-out infinite alternate;
	}

	.dp-moment__lamp {
		animation: dp-idee-lamp 2.6s ease-in-out infinite;
	}
}

@keyframes dp-idee-zweef {
	from {
		transform: translateY(0) rotate(-0.8deg);
	}

	to {
		transform: translateY(-10px) rotate(0.8deg);
	}
}

@keyframes dp-idee-lamp {
	0%,
	100% {
		transform: scale(1) rotate(-6deg);
	}

	50% {
		transform: scale(1.12) rotate(6deg);
	}
}

.dp-moment--plus .dp-moment__wanneer {
	background: var(--dp-peach-soft);
}

@media (width < 48rem) {
	.dp-tijdlijn {
		--dp-lijn-x: 0.75rem;
	}

	.dp-moment,
	.dp-moment:nth-child(odd),
	.dp-moment:nth-child(even) {
		justify-self: stretch;
		width: auto;
		margin-inline-start: 2.25rem;
	}

	.dp-moment + .dp-moment {
		margin-top: 0;
	}

	.dp-moment:nth-child(odd)::before,
	.dp-moment:nth-child(even)::before {
		inset-inline: calc(-2.25rem + 0.2rem) auto;
	}
}

/* ==========================================================================
   OVER MIJ — ANDERS
   ========================================================================== */

.dp-anders__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2.5rem, 1rem + 5vw, 6rem);
	align-items: center;
}

.dp-anders h2 {
	font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem);
}

.dp-frustraties {
	display: grid;
	gap: 0.7rem;
}

/* Sleutelzinnen dik en onderstreept, net als elders op de site. */
.dp-frustraties b {
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
	text-decoration: underline;
	text-decoration-color: var(--dp-leaf);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.22em;
	text-decoration-skip-ink: none;
}

.dp-frustraties li {
	position: relative;
	padding-inline-start: 2.2rem;
	line-height: 1.5;
}

/* Een koraal kruisje, zonder vlak eromheen: dit zijn de dingen die je niet
   wil. Het kruisje zelf is genoeg; een gekleurde schijf werd te zwaar. */
.dp-frustraties li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.1rem;
	inset-block-start: 0.28em;
	width: 1rem;
	height: 1rem;
	background:
		linear-gradient(45deg, transparent 43%, var(--dp-orange) 43% 57%, transparent 57%),
		linear-gradient(-45deg, transparent 43%, var(--dp-orange) 43% 57%, transparent 57%);
}

/* Het briefje: "je wil gewoon een website die…", een tikje schuin. */
/* Op dit witte blaadje mag het zachte bladgroen wél: dat valt alleen weg op
   een lichtgroen vlak. */
.dp-gewoon .dp-checklist svg {
	color: var(--dp-leaf);
}

/* Een blaadje uit een blok gescheurd: rechte hoeken en onderaan een
   afgescheurde rand van kleine driehoekjes, net als het bonnetje op de
   salespagina. */
.dp-gewoon {
	position: relative;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border-radius: 0.25rem 0.25rem 0 0;
	background: #fff;
	box-shadow: var(--dp-shadow-l);
	rotate: 1.5deg;
}

.dp-gewoon::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100% - 1px);
	height: 12px;
	background:
		linear-gradient(135deg, #fff 50%, transparent 50%) 0 0 / 16px 12px repeat-x,
		linear-gradient(-135deg, #fff 50%, transparent 50%) 0 0 / 16px 12px repeat-x;
}

.dp-gewoon__kop {
	margin-bottom: 1rem;
	font-family: var(--dp-font-display);
	font-weight: var(--dp-weight-display);
	font-size: var(--dp-size-h4);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1.25;
	color: var(--dp-text-strong);
}

.dp-gewoon__voet {
	margin-top: 1rem;
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

/* De twee knoppen onder de drie kaarten. Ook hier geen leesbreedte: het is
   een rij knoppen, geen alinea. */
.dp-anders__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	max-width: none;
	margin-top: var(--dp-space-xl);
}

/* Even groot als de kop van dit blok, anders lezen ze als twee niveaus. */
.dp-anders__tussenkop {
	margin: var(--dp-space-2xl) 0 var(--dp-space-l);
	font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.8rem);
	text-align: center;
}

@media (width < 62rem) {
	.dp-anders__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.dp-gewoon {
		max-width: 30rem;
		rotate: 0deg;
	}
}

/* ==========================================================================
   OVER MIJ — DE HONDEN
   ========================================================================== */

.dp-honden {
	background:
		radial-gradient(55% 65% at 50% 0%, rgb(255 255 255 / 0.6), transparent 70%),
		linear-gradient(180deg, var(--dp-moss) 0%, var(--dp-leaf-soft) 100%);
}

.dp-honden__rij {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
	margin-top: var(--dp-space-l);
}

.dp-hond {
	display: grid;
	gap: 0.6rem;
	align-content: start;
}

.dp-hond__polaroid {
	position: relative;
	margin: 0 0 var(--dp-space-m);
	padding: 0.75rem 0.75rem 0;
	background: #fff;
	box-shadow: 0 30px 50px -30px rgb(18 43 7 / 0.55);
	rotate: -3deg;
	transition:
		rotate 600ms var(--dp-ease-out),
		transform 600ms var(--dp-ease-out),
		box-shadow 600ms var(--dp-ease-out);
}

.dp-hond:nth-child(2) .dp-hond__polaroid {
	rotate: 2.5deg;
}

.dp-hond:nth-child(3) .dp-hond__polaroid {
	rotate: -1.5deg;
}

.dp-hond:hover .dp-hond__polaroid {
	rotate: 0deg;
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 40px 60px -30px rgb(18 43 7 / 0.6);
}

.dp-hond__polaroid > img:not(.dp-hond__tape) {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.dp-hond__polaroid figcaption {
	padding: 0.7rem 0 0.9rem;
	font-family: var(--dp-font-display);
	font-size: 1.35rem;
	font-style: italic;
	font-variation-settings: var(--dp-fraunces-axes);
	color: var(--dp-forest);
	text-align: center;
}

.dp-hond__polaroid figcaption span {
	font-size: 0.8em;
	color: var(--dp-text-muted);
}

/* Het plakbandje plakt de polaroid echt vast: het ligt half op de foto en
   half op de achtergrond, en hangt een tikje scheef. */
.dp-hond__tape {
	position: absolute;
	z-index: 1;
	inset-block-start: -2.2rem;
	inset-inline-start: 50%;
	width: 8.5rem;
	translate: -50% 0;
	rotate: -4deg;
}

.dp-hond:nth-child(2) .dp-hond__tape {
	rotate: 5deg;
}

.dp-hond:nth-child(3) .dp-hond__tape {
	rotate: -2deg;
}

/* Het jaartal staat in de polaroid, onder de naam: dat hoort bij het kiekje
   en niet bij het verhaaltje eronder. */
.dp-hond__polaroid figcaption small {
	display: block;
	margin-top: 0.15rem;
	font-family: var(--dp-font-body);
	font-size: var(--dp-size-xs);
	font-style: normal;
	font-weight: var(--dp-weight-bold);
	letter-spacing: var(--dp-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--dp-text-muted);
}

/* Het verhaaltje eronder staat gecentreerd onder de polaroid, en niet zo
   breed: dan leest het als bijschrift bij de foto. */
.dp-hond p {
	max-width: 32ch;
	margin-inline: auto;
	color: var(--dp-text);
	text-align: center;
}

@media (width < 62rem) {
	.dp-honden__rij {
		grid-template-columns: minmax(0, 1fr);
		max-width: 26rem;
		margin-inline: auto;
		gap: var(--dp-space-xl);
	}
}

/* ==========================================================================
   ZORGPLAN — DE STATUSKAART
   ========================================================================== */

.dp-kop__beeld--status {
	padding: 1.5rem 0 2rem;
}

.dp-status {
	position: relative;
	padding: clamp(1.1rem, 0.8rem + 1vw, 1.6rem);
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-section);
	background: #fff;
	box-shadow: 0 40px 70px -40px rgb(18 43 7 / 0.55);
	rotate: 1.5deg;
}

.dp-status__kop {
	display: flex;
	gap: 0.8rem;
	align-items: center;
	padding-bottom: 1rem;
	border-bottom: 2px dashed var(--dp-line);
}

.dp-status__favicon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: var(--dp-radius-s);
	background: var(--dp-forest);
	font-family: var(--dp-font-display);
	font-size: 1.2rem;
	color: var(--dp-paper);
}

.dp-status__site {
	display: grid;
	flex: 1;
	min-width: 0;
	line-height: 1.3;
}

.dp-status__site strong {
	color: var(--dp-text-strong);
}

.dp-status__site span {
	font-size: var(--dp-size-xs);
	color: var(--dp-text-muted);
}

/* Een groen lampje dat zacht pulseert. */
.dp-status__lampje {
	display: inline-flex;
	flex: none;
	gap: 0.45rem;
	align-items: center;
	padding: 0.35em 0.8em;
	border-radius: var(--dp-radius-pill);
	background: var(--dp-leaf-soft);
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-forest);
	white-space: nowrap;
}

.dp-status__lampje::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #5f9a1c;
	box-shadow: 0 0 0 0 rgb(95 154 28 / 0.5);
}

@media (prefers-reduced-motion: no-preference) {
	.dp-status__lampje::before {
		animation: dp-puls 2.2s ease-out infinite;
	}
}

@keyframes dp-puls {
	70% {
		box-shadow: 0 0 0 7px rgb(95 154 28 / 0);
	}
}

.dp-status__lijst {
	display: grid;
	gap: 0.3rem;
	padding-block: 0.8rem;
}

.dp-status__lijst li {
	display: grid;
	grid-template-columns: 1.6rem 1fr auto;
	gap: 0.7rem;
	align-items: center;
	padding: 0.55rem 0.4rem;
	border-radius: var(--dp-radius-s);
}

.dp-status__lijst svg {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--dp-leaf);
	fill: none;
	stroke-width: 2.2;
}

.dp-status__lijst span {
	display: grid;
	line-height: 1.3;
}

.dp-status__lijst strong {
	font-size: var(--dp-size-small);
	color: var(--dp-text-strong);
}

.dp-status__lijst small {
	font-size: var(--dp-size-xs);
	color: var(--dp-text-muted);
}

.dp-status__lijst em {
	font-size: var(--dp-size-xs);
	font-style: normal;
	color: var(--dp-text-muted);
	white-space: nowrap;
}

/* De vinkjes gaan bij het laden één voor één aan. */
@media (prefers-reduced-motion: no-preference) {
	.dp-status__lijst li {
		animation: dp-status-regel 700ms var(--dp-ease-out) both;
	}

	.dp-status__lijst li:nth-child(1) { animation-delay: 500ms; }
	.dp-status__lijst li:nth-child(2) { animation-delay: 750ms; }
	.dp-status__lijst li:nth-child(3) { animation-delay: 1000ms; }
	.dp-status__lijst li:nth-child(4) { animation-delay: 1250ms; }

	.dp-status__lijst li svg {
		animation: dp-vinkje-aan 500ms var(--dp-ease-out) both;
		animation-delay: inherit;
	}
}

@keyframes dp-status-regel {
	from {
		opacity: 0;
		transform: translateX(14px);
		background: var(--dp-leaf-soft);
	}

	60% {
		opacity: 1;
		background: var(--dp-leaf-soft);
	}
}

@keyframes dp-vinkje-aan {
	from {
		transform: scale(0.4);
		opacity: 0;
	}

	70% {
		transform: scale(1.2);
	}
}

.dp-status__grafiek {
	display: grid;
	gap: 0.5rem;
	padding-top: 0.9rem;
	border-top: 2px dashed var(--dp-line);
	font-size: var(--dp-size-xs);
	color: var(--dp-text-muted);
}

.dp-status__balkjes {
	display: grid;
	grid-template-columns: repeat(30, 1fr);
	gap: 3px;
	height: 1.9rem;
}

.dp-status__balkjes i {
	border-radius: 3px;
	background: var(--dp-leaf);
}

.dp-status__balkjes i:nth-child(7n + 3) {
	background: #b3cb6e;
}

@media (width < 36rem) {
	.dp-status {
		rotate: 0deg;
	}

	.dp-status__lijst em {
		display: none;
	}

	.dp-status__lijst li {
		grid-template-columns: 1.6rem 1fr;
	}
}

/* ==========================================================================
   ZORGPLAN — HET FOUTSCHERM
   ========================================================================== */

.dp-fout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(3rem, 1.5rem + 5vw, 6rem);
	align-items: center;
}

.dp-fout h2 {
	font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem);
}

/* Het omslagpunt in hetzelfde blok: van "dit gaat er mis" naar "dit krijg je
   ervoor terug". Ruim boven, zodat het als een nieuw hoofdstuk leest. */
.dp-fout__omslag {
	margin-top: var(--dp-space-2xl);
}



.dp-fout h2 em {
	color: var(--dp-peach);
}

.dp-fout .dp-flow > p:not(.dp-eyebrow):not(.dp-lead) {
	color: var(--dp-text-on-dark-muted);
}

.dp-foutscherm {
	position: relative;
	overflow: visible;
	border-radius: var(--dp-radius-m);
	background: #f0f0f1;
	box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.8);
	rotate: -1.5deg;
}

.dp-foutscherm__balk {
	display: flex;
	gap: 0.3rem;
	align-items: center;
	padding: 0.6rem 0.8rem;
	border-radius: var(--dp-radius-m) var(--dp-radius-m) 0 0;
	background: #fff;
}

.dp-foutscherm__balk span {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: rgb(18 43 7 / 0.2);
}

.dp-foutscherm__balk em {
	margin-inline-start: 0.6rem;
	padding: 0.15rem 0.8rem;
	border-radius: var(--dp-radius-pill);
	background: #f1f3ee;
	font-size: 0.75rem;
	font-style: normal;
	color: var(--dp-text-muted);
}

/* Zo ziet de echte foutmelding van WordPress eruit: grijs, wit vak, klein lettertype. */
.dp-foutscherm__inhoud {
	margin: clamp(1.5rem, 1rem + 3vw, 3.5rem) clamp(1rem, 0.5rem + 3vw, 3rem) clamp(2.5rem, 1.5rem + 4vw, 5rem);
	padding: 1.5rem 1.6rem;
	border: 1px solid #c3c4c7;
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #3c434a;
}

.dp-foutscherm__melding {
	max-width: none;
	font-size: 1rem;
	line-height: 1.5;
}

.dp-foutscherm__klein {
	margin-top: 0.8rem;
	font-size: 0.85rem;
	color: #2271b1;
	text-decoration: underline;
}

.dp-foutscherm__baasje {
	position: absolute;
	inset-block-end: -1.25rem;
	inset-inline-end: -1rem;
	max-width: 16rem;
	padding: 0.7rem 1rem;
	border-radius: 1.2rem 1.2rem 0.3rem 1.2rem;

	/* Het koraal uit het palet, met witte letters. De zachte perzik met
	   donkergroene letters was op het lichte foutscherm niet te lezen. */
	background: var(--dp-orange);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	line-height: 1.35;
	color: #fff;
	rotate: 2deg;
	box-shadow: 0 20px 36px -20px rgb(0 0 0 / 0.6);
}

/* Als het scherm in beeld komt, trilt het heel even. */
@media (prefers-reduced-motion: no-preference) {
	.dp-foutscherm.is-zichtbaar .dp-foutscherm__inhoud {
		animation: dp-tril 500ms ease-in-out 700ms both;
	}
}

@keyframes dp-tril {
	20%,
	60% {
		transform: translateX(-6px);
	}

	40%,
	80% {
		transform: translateX(6px);
	}
}

@media (width < 62rem) {
	.dp-fout__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.dp-foutscherm__baasje {
		inset-inline-end: 0.5rem;
	}
}

/* De inleiding onder de kop mag breder dan standaard: anders valt er één woord
   alleen op de laatste regel. De titel houdt zijn eigen, smallere breedte,
   want die moet over drie regels lopen. */
.dp-route-start__kop {
	max-width: 54rem;
}

.dp-route-start__kop h2 {
	max-width: 54rem;
	margin-inline: auto;
}

/* De foto onder de social-knoppen: je ziet meteen wie je gaat mailen. Precies
   even breed als het kaartje erboven, zodat de kolom één lijn houdt. */
.dp-contact__foto {
	width: 100%;
	margin: var(--dp-space-l) 0 0;
}

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

/* ==========================================================================
   ZORGPLAN — DE PLANNEN
   ========================================================================== */

.dp-plannen__raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--dp-space-m);
	align-items: center;
	max-width: 58rem;
	margin-inline: auto;
}

.dp-plan {
	display: grid;
	gap: 0.9rem;
	align-content: start;
	padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-section);
	background: #fff;
	transition:
		transform 500ms var(--dp-ease-out),
		box-shadow 500ms var(--dp-ease-out);
}

.dp-plan:hover {
	transform: translateY(-5px);
	box-shadow: var(--dp-shadow-l);
}

.dp-plan__naam {
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	letter-spacing: var(--dp-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--dp-text-muted);
}

.dp-plan__prijs {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	color: var(--dp-text-muted);
}

.dp-plan__prijs span {
	font-family: var(--dp-font-display);
	font-size: clamp(2.8rem, 2rem + 2.5vw, 3.75rem);
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1;
	color: var(--dp-text-strong);
}

.dp-plan__voor {
	padding-bottom: 1rem;
	border-bottom: 2px dashed var(--dp-line);
	color: var(--dp-text-muted);
}

.dp-plan__alles {
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

.dp-plan__lijst {
	display: grid;
	gap: 0.7rem;
	margin-bottom: 0.8rem;
}

.dp-plan__lijst li {
	display: grid;
	grid-template-columns: 1.3rem 1fr;
	gap: 0.65rem;
	align-items: start;
	font-size: var(--dp-size-small);
	line-height: 1.5;
}

.dp-plan__lijst svg {
	width: 1.3rem;
	height: 1.3rem;
	margin-top: 0.05rem;
	color: var(--dp-leaf);
	fill: none;
	stroke-width: 2.2;
}

.dp-plan__lijst strong {
	color: var(--dp-text-strong);
}

/* Plus: donker, en een stukje hoger. */
.dp-plan--plus {
	position: relative;
	border-color: var(--dp-forest);
	background:
		radial-gradient(70% 50% at 100% 0%, rgb(207 222 124 / 0.2), transparent 70%),
		var(--dp-forest);
	color: var(--dp-text-on-dark);
	box-shadow: 0 40px 70px -40px rgb(18 43 7 / 0.7);
	translate: 0 -1rem;
}

.dp-plan--plus .dp-plan__naam,
.dp-plan--plus .dp-plan__prijs,
.dp-plan--plus .dp-plan__voor {
	color: var(--dp-text-on-dark-muted);
}

.dp-plan--plus .dp-plan__prijs span,
.dp-plan--plus .dp-plan__alles,
.dp-plan--plus .dp-plan__lijst strong {
	color: var(--dp-paper);
}

.dp-plan--plus .dp-plan__voor {
	border-color: var(--dp-line-on-dark);
}

.dp-plan__label {
	position: absolute;
	inset-block-start: -0.9rem;
	inset-inline-end: 1.5rem;
	padding: 0.35em 0.9em;
	border-radius: var(--dp-radius-pill);
	background: var(--dp-leaf);
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-forest);
	rotate: 3deg;
}

.dp-kleintjes {
	display: grid;
	gap: 0.8rem;
	justify-items: center;
	margin-top: var(--dp-space-xl);
}

.dp-kleintjes__kop {
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	letter-spacing: var(--dp-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--dp-text-muted);
}

.dp-kleintjes ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	max-width: 50rem;
}

.dp-kleintjes li {
	padding: 0.45em 0.95em;
	border: var(--dp-border) solid var(--dp-pil-rand);
	border-radius: var(--dp-radius-pill);
	background: #fff;
	font-size: var(--dp-size-small);
	color: var(--dp-text);
}

@media (width < 62rem) {
	.dp-plannen__raster {
		grid-template-columns: minmax(0, 1fr);
		max-width: 32rem;
	}

	.dp-plan--plus {
		translate: 0 0;
		margin-top: 1rem;
	}
}

/* ==========================================================================
   ZORGPLAN — ZO BEGINT HET
   ========================================================================== */

.dp-start__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 1rem + 5vw, 6rem);
	align-items: start;
}

.dp-start h2 {
	font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem);
}

/* Het kaartje van Simone, blijft staan terwijl je de stappen leest. */
.dp-hee {
	position: sticky;
	inset-block-start: 7rem;
	overflow: hidden;
	border-radius: var(--dp-radius-l);
	background: var(--dp-moss);
}

.dp-hee__foto {
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	object-position: 50% 20%;
}

.dp-hee__tekst {
	display: grid;
	gap: 0.8rem;
	padding: 1.5rem 1.6rem 1.75rem;
	font-size: var(--dp-size-small);
}

.dp-hee__hoi {
	font-family: var(--dp-font-display);
	font-size: var(--dp-size-h3);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1.1;
	color: var(--dp-text-strong);
}

@media (width < 62rem) {
	.dp-start__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Eerst de stappen, dan pas het kaartje van Simone. */
	.dp-hee {
		order: 2;
		position: static;
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		max-width: 40rem;
	}

	.dp-hee__foto {
		height: 100%;
		aspect-ratio: auto;
	}
}

@media (width < 36rem) {
	.dp-stapjes {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.dp-hee__foto {
		aspect-ratio: 5 / 4;
	}
}

/* ==========================================================================
   FAQ ZONDER FILTERS (zorgplan, contact)
   ========================================================================== */

.dp-faq__intro {
	color: var(--dp-text-muted);
}

.dp-faq--kort .dp-faq__links h2 {
	font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem);
}

/* Zonder onderwerp-pill heeft de vraag maar twee kolommen. */
.dp-faq--kort .dp-vraag__kop {
	grid-template-columns: 1fr 1.4rem;
}


/* ==========================================================================
   CONTACT
   ========================================================================== */

.dp-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2.5rem, 1rem + 5vw, 6rem);
	align-items: start;
}

.dp-contact__wie {
	display: grid;
	gap: var(--dp-space-s);
	justify-items: start;
	padding-top: 1rem;
}

.dp-contact__kaartje {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-top: var(--dp-space-s);
	padding: 0.8rem 1.4rem 0.8rem 0.8rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-pill);
	background: #fff;
	box-shadow: var(--dp-shadow-m);
}

.dp-contact__kaartje img {
	flex: none;
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 50%;
	object-fit: cover;
}

.dp-contact__kaartje p {
	margin: 0;
	font-size: var(--dp-size-small);
	line-height: 1.45;
}

.dp-contact__kaartje strong {
	display: block;
	color: var(--dp-text-strong);
}

.dp-contact__kaartje mark {
	padding: 0 0.25em;
	border-radius: 0.25em;
	background: var(--dp-leaf-soft);
	color: var(--dp-text-strong);
	font-weight: var(--dp-weight-bold);
}

.dp-contact__of {
	margin-top: var(--dp-space-s);
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	letter-spacing: var(--dp-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--dp-text-muted);
}

.dp-contact__sociaal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
	align-items: center;
}

.dp-contact__sociaal a {
	display: inline-flex;
	gap: 0.55rem;
	align-items: center;
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-strong);
	text-decoration: none;
}

.dp-contact__sociaal .dp-bubble {
	padding: 0.45em 0.95em;
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	transition: transform var(--dp-transition);
}

.dp-contact__sociaal a:hover .dp-bubble {
	transform: translateY(-2px);
}

/* --- Het formulier -------------------------------------------------------- */

.dp-formulier {
	scroll-margin-top: 7rem;
	padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-section);
	background: #fff;
	box-shadow: 0 40px 70px -45px rgb(18 43 7 / 0.5);
}

.dp-formulier__form {
	display: grid;
	gap: 1.25rem;
}

.dp-formulier__kop {
	font-size: var(--dp-size-h3);
}

.dp-formulier__onderwerp {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.dp-formulier__onderwerp legend {
	width: 100%;
	margin-bottom: 0.55rem;
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

.dp-formulier__onderwerp label {
	position: relative;
	cursor: pointer;
}

.dp-formulier__onderwerp input {
	position: absolute;
	opacity: 0;
}

.dp-formulier__onderwerp span {
	display: block;
	padding: 0.55em 1.05em;
	border: var(--dp-border) solid transparent;
	border-radius: var(--dp-radius-pill);
	/* Mosgroen, niet de kleur van de invulvelden: anders lijkt het alsof je
	   er tekst in moet typen. */
	background: var(--dp-moss);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text);
	transition:
		background-color var(--dp-transition),
		color var(--dp-transition),
		border-color var(--dp-transition);
}

.dp-formulier__onderwerp label:hover span {
	border-color: var(--dp-leaf);
	color: var(--dp-text-strong);
}

/* Het gekozen onderwerp krijgt een zacht groen vlak. Donkergroen was te
   nadrukkelijk voor een veld dat niet eens verplicht is. */
.dp-formulier__onderwerp input:checked + span {
	border-color: var(--dp-leaf);
	background: var(--dp-leaf);
	color: var(--dp-text-strong);
}

.dp-formulier__onderwerp input:focus-visible + span {
	outline: var(--dp-focus-width) solid var(--dp-focus);
	outline-offset: 2px;
}

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

.dp-veld {
	display: grid;
	gap: 0.4rem;
}

/* display: grid wint het van de standaardregel voor [hidden], dus die moet
   hier expliciet staan — anders blijft een verborgen veld toch zichtbaar. */
.dp-veld[hidden] {
	display: none;
}

.dp-veld > span {
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

.dp-veld input,
.dp-veld textarea,
.dp-veld select {
	width: 100%;
	padding: 0.85rem 1rem;
	border: var(--dp-border) solid var(--dp-line-strong);
	border-radius: var(--dp-radius-m);
	background: var(--dp-paper);
	font: inherit;
	color: var(--dp-text-strong);
	transition:
		border-color var(--dp-transition),
		background-color var(--dp-transition),
		box-shadow var(--dp-transition);
}

.dp-veld textarea {
	resize: vertical;
	min-height: 6.5rem; /* het formulier is langer geworden; dit vak hoeft niet te domineren */
}

/* Het uitklapmenu krijgt hetzelfde jasje als de invoervelden, met een eigen
   pijltje (want het standaardpijltje van de browser past er niet bij). */
.dp-veld select {
	appearance: none;
	padding-inline-end: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122b07' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1.1rem;
	cursor: pointer;
}

/* Het label "(niet verplicht)" en "(als je die hebt)" mag zachter dan de rest. */
.dp-veld > span b {
	font-weight: var(--dp-weight-body);
	color: var(--dp-text-muted);
}

.dp-veld input:hover,
.dp-veld textarea:hover,
.dp-veld select:hover {
	border-color: var(--dp-forest);
}

.dp-veld input:focus,
.dp-veld textarea:focus,
.dp-veld select:focus {
	outline: none;
	border-color: var(--dp-forest);
	background: #fff;
	box-shadow: 0 0 0 4px rgb(207 222 124 / 0.55);
}

.dp-veld textarea::placeholder {
	color: rgb(94 107 87 / 0.7);
}

.dp-formulier__voet {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: center;
}

.dp-formulier__voet p {
	flex: 1 1 14rem;
	font-size: var(--dp-size-xs);
	color: var(--dp-text-muted);
}

.dp-formulier__voet a {
	color: inherit;
}

.dp-formulier__melding {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	max-width: none;
	margin-bottom: 1.25rem;
	padding: 1rem 1.2rem;
	border-radius: var(--dp-radius-m);
	font-size: var(--dp-size-small);
}

.dp-formulier__melding[hidden] {
	display: none;
}

/* Het vinkje in de bevestiging: donkergroen, net als alle andere vinkjes. Op
   het lichtgroene vlak van de melding valt bladgroen weg. */
.dp-formulier__melding svg {
	flex: none;
	width: 1.3rem;
	height: 1.3rem;
	margin-top: 0.1em;
	color: var(--dp-forest);
	fill: none;
	stroke-width: 2.2;
}

/* Na "Versturen": een draaiend rondje in plaats van het pijltje, en de knop
   doet even niets meer. Zo zie je dat hij bezig is en klik je niet twee keer. */
.dp-formulier__form button[aria-busy="true"] {
	cursor: progress;
	opacity: 0.85;
}

.dp-formulier__form button[aria-busy="true"] .dp-btn__icon svg {
	display: none;
}

.dp-formulier__form button[aria-busy="true"] .dp-btn__icon {
	display: inline-grid;
	place-items: center;
}

.dp-formulier__form button[aria-busy="true"] .dp-btn__icon::before {
	content: "";
	width: 1rem;
	height: 1rem;
	border: 2px solid currentcolor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: dp-draai 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.dp-formulier__form button[aria-busy="true"] .dp-btn__icon::before {
		animation-duration: 2s;
	}
}

.dp-formulier__melding--goed {
	background: var(--dp-leaf-soft);
}

.dp-formulier__melding--fout {
	background: var(--dp-peach-soft);
}

.dp-formulier__melding strong {
	display: block;
	color: var(--dp-text-strong);
}

@media (width < 62rem) {
	.dp-contact__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (width < 36rem) {
	.dp-formulier__rij {
		grid-template-columns: minmax(0, 1fr);
	}

	.dp-contact__kaartje {
		border-radius: var(--dp-radius-l);
	}
}

/* --- Zoek je iets anders? ------------------------------------------------- */

.dp-route__raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dp-space-m);
}

.dp-tegel--licht {
	background: var(--dp-paper);
}

/* Tegels op een donker blok: dezelfde kaart, maar dan doorzichtig wit met een
   licht randje. Precies zoals de reviewkaarten in het templateblok. */
.dp-section--dark .dp-tegel {
	border-color: var(--dp-line-on-dark);
	background: rgb(255 255 255 / 0.04);
	color: var(--dp-text-on-dark);
}

.dp-section--dark .dp-tegel:hover {
	border-color: var(--dp-leaf);
	background: rgb(255 255 255 / 0.07);
}

.dp-section--dark .dp-tegel__label {
	border-color: rgb(231 238 221 / 0.25);
	background: rgb(231 238 221 / 0.08);
	color: var(--dp-leaf);
}

.dp-section--dark .dp-tegel__titel,
.dp-section--dark .dp-tegel__meer {
	color: var(--dp-paper);
}

.dp-section--dark .dp-tegel__tekst {
	color: var(--dp-text-on-dark-muted);
}

@media (width < 62rem) {
	.dp-route__raster {
		grid-template-columns: minmax(0, 1fr);
		max-width: 34rem;
	}
}

/* ==========================================================================
   HOMEKOP — VARIANTEN
   A: foto met drie klantsites · B: foto in een boog met een waaier en een
   zegel · C: eerst de websites · D: collage. De tekst is bij alle vier
   hetzelfde (bouw/blokken/home-kop-tekst.html).
   ========================================================================== */

/* --- A: drie vensters om de foto heen ----------------------------------- */

.dp-kop--a .dp-kop__foto img {
	object-position: 50% 55%; /* op Simone */
}

.dp-zweef--v1 {
	inset-block-start: 6%;
	inset-inline-start: -20%;
	width: 50%;
	rotate: -5deg;
}

.dp-zweef--v2 {
	inset-block-start: 40%;
	inset-inline: auto -14%;
	width: 44%;
	rotate: 4deg;
	animation-delay: 300ms, 2s;
}

.dp-zweef--v3 {
	inset-block: auto -2.5rem;
	inset-inline-start: -8%;
	width: 48%;
	rotate: -2deg;
	animation-delay: 550ms, 2.6s;
}

@media (width < 62rem) {
	.dp-zweef--v1 { inset-inline-start: -6%; }
	.dp-zweef--v2 { inset-inline-end: -5%; }
	.dp-zweef--v3 { inset-inline-start: -3%; }
}

/* --- B: de boog met de waaier ------------------------------------------- */

.dp-boog {
	margin-block: 2rem 3rem;
}

.dp-boog__foto {
	position: relative;
	z-index: 2;
	overflow: hidden;
	width: 82%;
	margin-inline: auto;
	border-radius: 999px 999px var(--dp-radius-section) var(--dp-radius-section);
	box-shadow: 0 40px 70px -40px rgb(18 43 7 / 0.6);
}

.dp-boog__foto img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: 50% 55%;
}

.dp-boog__waaier {
	position: absolute;
	z-index: 1;
	inset: 22% 0 auto;
	height: 55%;
}

.dp-boog__scherm {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 0;
	width: 58%;
	overflow: hidden;
	border: 5px solid #fff;
	border-radius: var(--dp-radius-m);
	background: #fff;
	box-shadow: 0 26px 44px -24px rgb(18 43 7 / 0.55);
	translate: -50% 0;
	transform-origin: 50% 120%;
}

.dp-boog__scherm img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: top;
}

.dp-boog__scherm--1 { transform: translateX(-52%) rotate(-14deg); }
.dp-boog__scherm--2 { transform: translateY(-80%) scale(0.9); }
.dp-boog__scherm--3 { transform: translateX(52%) rotate(14deg); }

/* Bij het laden liggen ze nog op een stapel achter de foto, en waaieren dan uit. */
@media (prefers-reduced-motion: no-preference) {
	.dp-boog__scherm {
		animation: dp-waaier-uit 1.1s var(--dp-ease-out) 400ms both;
	}

	.dp-boog__scherm--2 { animation-delay: 550ms; }
	.dp-boog__scherm--3 { animation-delay: 700ms; }
}

@keyframes dp-waaier-uit {
	from {
		transform: none;
		opacity: 0;
	}
}

/* De zegel: tekst die langzaam rond een groot "170+" draait. */
.dp-zegel-rond {
	position: absolute;
	z-index: 3;
	inset-block-end: 8%;
	inset-inline-start: -4%;
	display: grid;
	place-items: center;
	width: 9rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--dp-forest);
	color: var(--dp-paper);
	box-shadow: 0 24px 40px -20px rgb(18 43 7 / 0.6);
}

.dp-zegel-rond svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.dp-zegel-rond text {
	fill: var(--dp-leaf);
	font-family: var(--dp-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
	.dp-zegel-rond svg {
		animation: dp-draai 22s linear infinite;
	}
}

@keyframes dp-draai {
	to {
		rotate: 360deg;
	}
}

.dp-zegel-rond strong {
	color: var(--dp-paper);
	font-family: var(--dp-font-display);
	font-size: 2rem;
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1;
}

/* --- C: eerst de websites ----------------------------------------------- */

.dp-kop--c {
	padding-bottom: 0;
	overflow: clip;
}

.dp-kop--c__tekst .dp-kop__tekst {
	justify-items: center;
	max-width: 52rem;
	margin-inline: auto;
	text-align: center;
}

.dp-kop--c__tekst .dp-kop__knoppen,
.dp-kop--c__tekst .dp-trust--links {
	justify-content: center;
}

.dp-schermrij {
	position: relative;
	display: grid;
	gap: 1.25rem;
	margin-top: var(--dp-space-xl);
	padding-bottom: var(--dp-section-y);
	perspective: 1400px;
}

.dp-schermrij__spoor {
	display: flex;
	width: max-content;
	transform: rotateX(18deg) rotateZ(-3deg);
}

.dp-schermrij__rij {
	display: flex;
	flex: none;
	gap: 1.25rem;
	padding-inline-end: 1.25rem;
}

.dp-schermrij__rij img {
	width: clamp(15rem, 10rem + 12vw, 22rem);
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: top;
	border: 5px solid #fff;
	border-radius: var(--dp-radius-m);
	box-shadow: 0 24px 40px -24px rgb(18 43 7 / 0.5);
}

@media (prefers-reduced-motion: no-preference) {
	.dp-schermrij__spoor {
		animation: dp-rij-links 60s linear infinite;
	}

	.dp-schermrij__spoor--terug {
		animation-name: dp-rij-rechts;
	}
}

@keyframes dp-rij-links {
	from { translate: 0 0; }
	to { translate: -50% 0; }
}

@keyframes dp-rij-rechts {
	from { translate: -50% 0; }
	to { translate: 0 0; }
}

/* Simone zit ertussen: een rond fotootje met een tekstballon. */
.dp-hoi {
	position: absolute;
	z-index: 2;
	inset-block-start: 38%;
	inset-inline-start: 50%;
	display: flex;
	gap: 0.9rem;
	align-items: center;
	padding: 0.6rem 1.4rem 0.6rem 0.6rem;
	border-radius: var(--dp-radius-pill);
	background: #fff;
	box-shadow: 0 30px 50px -24px rgb(18 43 7 / 0.55);
	translate: -50% -50%;
	white-space: nowrap;
}

.dp-hoi img {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	object-fit: cover;
}

.dp-hoi p {
	margin: 0;
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

@media (width < 48rem) {
	.dp-hoi {
		white-space: normal;
		width: min(88%, 22rem);
		border-radius: var(--dp-radius-l);
	}
}

/* --- D: de collage ------------------------------------------------------ */

.dp-collage {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	gap: 0.9rem;
}

.dp-collage__foto {
	grid-row: span 2;
	overflow: hidden;
	border-radius: var(--dp-radius-l);
}

.dp-collage__foto img {
	width: 100%;
	height: 100%;
	min-height: 22rem;
	object-fit: cover;
	object-position: 50% 55%;
}

.dp-collage__venster {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--dp-radius-m);
	background: #fff;
	box-shadow: 0 20px 36px -24px rgb(18 43 7 / 0.5);
}

.dp-collage__pagina {
	height: clamp(9rem, 6rem + 6vw, 12.5rem);
	overflow: hidden;
	container-type: size;
}

.dp-collage__pagina img {
	width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.dp-collage__pagina img {
		animation: dp-pagina 18s ease-in-out infinite alternate;
	}

	.dp-collage__venster--2 .dp-collage__pagina img {
		animation-duration: 22s;
		animation-delay: -6s;
	}
}

.dp-collage__tegel {
	grid-column: 1 / -1;
	display: flex;
	gap: 1rem;
	align-items: center;
	margin: 0;
	padding: 1rem 1.3rem;
	border-radius: var(--dp-radius-l);
	background: var(--dp-forest);
	color: var(--dp-text-on-dark);
}

.dp-collage__tegel strong {
	font-family: var(--dp-font-display);
	font-size: 2.4rem;
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1;
	color: var(--dp-leaf);
}

.dp-collage__tegel span {
	font-size: var(--dp-size-small);
}

@media (width < 62rem) {
	.dp-collage {
		width: min(100%, 32rem);
		margin-inline: auto;
	}
}

/* ==========================================================================
   AANBOD — VARIANTEN
   ========================================================================== */

/* De derde tegel: "Website laten maken", met een foto die in de tegel valt. */
.dp-tegel--maken {
	border-color: transparent;
	background: var(--dp-peach-soft);
	padding-inline-end: 38%;
}

.dp-tegel__foto {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 34%;
}

.dp-tegel__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
	transition: transform 800ms var(--dp-ease-out);
}

.dp-tegel:hover .dp-tegel__foto img {
	transform: scale(1.05);
}

.dp-tegel__label b,
.dp-luik__binnenkort {
	margin-inline-start: 0.35rem;
	padding: 0.1em 0.55em;
	border-radius: var(--dp-radius-pill);
	background: var(--dp-forest);
	font-size: 0.9em;
	color: var(--dp-paper);
}

/* Een mini-statuskaart, dezelfde vinkjes als op de zorgplanpagina. */
.dp-ministatus {
	display: grid;
	gap: 0.35rem;
	width: 100%;
	max-width: 22rem;
	padding: 0.7rem;
	border-radius: var(--dp-radius-m);
	background: #fff;
	box-shadow: 0 16px 30px -22px rgb(18 43 7 / 0.45);
}

.dp-ministatus span {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.3rem 0.4rem;
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

.dp-ministatus svg {
	width: 1.2rem;
	height: 1.2rem;
	color: var(--dp-leaf);
	stroke-width: 2.2;
	transition:
		color 250ms var(--dp-ease),
		scale 350ms var(--dp-ease-out);
}

/* Houd je de muis op de kaart, dan lopen de vinkjes van boven naar beneden
   even op en worden ze donkergroen: alsof de controle op dat moment draait.
   Elke regel start iets later dan de vorige. */
.dp-luik:hover .dp-ministatus svg,
.dp-luik:focus-visible .dp-ministatus svg {
	color: var(--dp-forest);
	animation: dp-vink-pop 600ms var(--dp-ease-out) both;
}

.dp-luik:hover .dp-ministatus span:nth-child(2) svg { animation-delay: 120ms; }
.dp-luik:hover .dp-ministatus span:nth-child(3) svg { animation-delay: 240ms; }
.dp-luik:hover .dp-ministatus span:nth-child(4) svg { animation-delay: 360ms; }

@keyframes dp-vink-pop {
	0% { scale: 1; }
	45% { scale: 1.45; }
	100% { scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.dp-luik:hover .dp-ministatus svg {
		animation: none;
	}
}

.dp-ministatus em {
	margin-inline-start: auto;
	font-size: var(--dp-size-xs);
	font-style: normal;
	font-weight: var(--dp-weight-body);
	color: var(--dp-text-muted);
}

/* De drie sets als tablets op een stapel. Bij hover, en tijdens het
   scrollen, waaieren ze uit en verschijnen hun namen. */
.dp-sets {
	position: absolute;
	inset-block-end: 6%;
	inset-inline-end: 4%;
	width: 52%;
	aspect-ratio: 1.2;
	pointer-events: none;
}

.dp-sets__kaart {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 50%;
	width: 48%;
	translate: -50% 0;
	transition: transform 800ms var(--dp-ease-out);
	transform-origin: 50% 100%;
}

.dp-sets__kaart img {
	width: 100%;
	filter: drop-shadow(0 24px 30px rgb(0 0 0 / 0.45));
}

.dp-sets__kaart em {
	position: absolute;
	inset-block-start: -1.8rem;
	inset-inline-start: 50%;
	padding: 0.25em 0.8em;
	border-radius: var(--dp-radius-pill);
	background: var(--dp-paper);
	font-size: var(--dp-size-xs);
	font-style: normal;
	font-weight: var(--dp-weight-bold);
	color: var(--dp-forest);
	white-space: nowrap;
	translate: -50% 6px;
	opacity: 0;
	transition:
		opacity 400ms var(--dp-ease),
		translate 500ms var(--dp-ease-out);
}

.dp-sets__kaart--1 { transform: rotate(-4deg); z-index: 1; }
.dp-sets__kaart--2 { transform: rotate(2deg); z-index: 3; }
.dp-sets__kaart--3 { transform: rotate(6deg); z-index: 2; }

.dp-tegel--sets:hover .dp-sets__kaart--1,
.dp-sets.is-open .dp-sets__kaart--1 {
	transform: translateX(-72%) rotate(-10deg);
}

.dp-tegel--sets:hover .dp-sets__kaart--2,
.dp-sets.is-open .dp-sets__kaart--2 {
	transform: translateY(-10%) rotate(0deg);
}

.dp-tegel--sets:hover .dp-sets__kaart--3,
.dp-sets.is-open .dp-sets__kaart--3 {
	transform: translateX(72%) rotate(10deg);
}

.dp-tegel--sets:hover .dp-sets__kaart em,
.dp-sets.is-open .dp-sets__kaart em {
	opacity: 1;
	translate: -50% 0;
}

.dp-tegel--sets .dp-tegel__tekst {
	max-width: 22rem;
}

@media (width < 62rem) {
	.dp-sets {
		width: 70%;
		inset-inline-end: 15%;
	}

	.dp-tegel--maken {
		padding-inline-end: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
		padding-top: 15rem;
	}

	.dp-tegel__foto {
		inset: 0 0 auto;
		width: 100%;
		height: 13rem;
	}
}

/* --- B: drie kolommen met een beeld bovenin ------------------------------ */

.dp-luik .dp-tegel__titel {
	font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem);
}

.dp-drieluik {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dp-space-m);
}

.dp-luik {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.75rem 0.75rem clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	color: var(--dp-text);
	text-decoration: none;
	transition:
		transform 500ms var(--dp-ease-out),
		box-shadow 500ms var(--dp-ease-out);
}

.dp-luik > :not(.dp-luik__beeld) {
	margin-inline: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
}

.dp-luik:hover {
	transform: translateY(-6px);
	box-shadow: var(--dp-shadow-l);
}

.dp-luik:hover .dp-tegel__pijl {
	transform: translateX(5px) rotate(-12deg);
	background: var(--dp-lime);
	color: var(--dp-forest);
}

.dp-luik__beeld {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 5 / 4;
	margin-bottom: 0.5rem;
	overflow: hidden;
	border-radius: calc(var(--dp-radius-l) - 0.4rem);
}

.dp-luik__beeld--templates {
	background:
		radial-gradient(70% 70% at 50% 100%, rgb(207 222 124 / 0.35), transparent 70%),
		var(--dp-forest);
}

.dp-luik__beeld--zorg {
	padding: 1.25rem;
	background:
		radial-gradient(70% 70% at 50% 100%, rgb(255 217 196 / 0.6), transparent 70%),
		linear-gradient(160deg, #f7b08c, var(--dp-peach) 60%, #f08f63);
}

.dp-luik__beeld--foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 35%; /* altijd op Simone */
	transition: transform 800ms var(--dp-ease-out);
}

.dp-luik:hover .dp-luik__beeld--foto img {
	transform: scale(1.05);
}

.dp-luik__binnenkort {
	position: absolute;
	inset-block-start: 0.9rem;
	inset-inline-start: 0.9rem;
	margin: 0;
	padding: 0.35em 0.9em;
	font-size: var(--dp-size-xs);
}

.dp-luik__hint {
	position: absolute;
	inset-block-end: 0.7rem;
	inset-inline: 0;
	text-align: center;
	font-size: var(--dp-size-xs);
	color: rgb(245 249 237 / 0.6);
	transition: opacity var(--dp-transition);
}

.dp-luik:hover .dp-luik__hint {
	opacity: 0;
}

/* Een getekende laptop met een complete homepage erin, die bij hover van
   boven naar beneden scrolt. */
.dp-minilaptop {
	display: grid;
	justify-items: center;
	width: 78%;
	margin-top: 8%;
}

.dp-minilaptop__scherm {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	container-type: size;
	border: 6px solid #1b1d1a;
	border-radius: 0.6rem 0.6rem 0 0;
	background: #fff;
}

.dp-minilaptop__scherm img {
	width: 100%;
	transition: transform 5s ease-in-out;
}

.dp-luik:hover .dp-minilaptop__scherm img {
	transform: translateY(calc(-100% + 100cqh));
}

/* Zonder muis (telefoon, tablet) scrolt de pagina vanzelf, en is de hint weg. */
@media (hover: none) {
	.dp-luik__hint {
		display: none;
	}

	.dp-minilaptop__scherm img {
		transition: none;
		animation: dp-pagina 16s ease-in-out infinite alternate;
	}
}

.dp-minilaptop__voet {
	width: 116%;
	height: 0.7rem;
	border-radius: 0 0 0.6rem 0.6rem;
	background: linear-gradient(#d5d8d2, #a9ada6);
}

.dp-ministatus--groot span {
	padding-block: 0.45rem;
}

@media (width < 62rem) {
	.dp-drieluik {
		grid-template-columns: minmax(0, 1fr);
		max-width: 30rem;
		margin-inline: auto;
	}
}

/* --- C: de stapel ------------------------------------------------------- */

.dp-stapel {
	display: grid;
	gap: 14vh;
	padding-bottom: 8vh;
}

.dp-stapelkaart {
	position: sticky;
	inset-block-start: 7rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--dp-space-l);
	align-items: center;
	min-height: 24rem;
	padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	border-radius: var(--dp-radius-section);
	color: var(--dp-text);
	text-decoration: none;
	box-shadow: 0 -10px 40px -20px rgb(18 43 7 / 0.35);
}

.dp-stapelkaart--templates {
	background: var(--dp-forest);
	color: var(--dp-text-on-dark);
}

.dp-stapelkaart--zorg {
	inset-block-start: 8rem;
	background: var(--dp-leaf-soft);
}

.dp-stapelkaart--maken {
	inset-block-start: 9rem;
	background: var(--dp-peach-soft);
}

.dp-stapelkaart__tekst {
	display: grid;
	gap: 0.85rem;
	justify-items: start;
}

.dp-stapelkaart__nr {
	font-family: var(--dp-font-display);
	font-size: 1rem;
	font-variation-settings: var(--dp-fraunces-axes);
	opacity: 0.6;
}

.dp-stapelkaart .dp-tegel__titel {
	font-family: var(--dp-font-display);
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	color: var(--dp-text-strong);
}

.dp-stapelkaart--templates .dp-tegel__titel,
.dp-stapelkaart--templates .dp-tegel__meer {
	color: var(--dp-paper);
}

.dp-stapelkaart--templates .dp-tegel__tekst {
	color: var(--dp-text-on-dark-muted);
}

.dp-stapelkaart--templates .dp-tegel__label {
	border-color: rgb(231 238 221 / 0.25);
	background: rgb(231 238 221 / 0.08);
	color: var(--dp-leaf);
}

.dp-stapelkaart--templates .dp-tegel__pijl {
	background: var(--dp-paper);
	color: var(--dp-forest);
}

.dp-stapelkaart:hover .dp-tegel__pijl {
	transform: translateX(5px) rotate(-12deg);
	background: var(--dp-lime);
	color: var(--dp-forest);
}

.dp-stapelkaart__beeld {
	display: grid;
	place-items: center;
	min-height: 18rem;
}

.dp-stapelkaart__beeld--foto {
	overflow: hidden;
	border-radius: var(--dp-radius-l);
}

.dp-stapelkaart__beeld--foto img {
	width: 100%;
	height: 100%;
	max-height: 22rem;
	object-fit: cover;
	object-position: 50% 40%;
}

/* De drie sets die elkaar afwisselen: de ene vervaagt, de volgende komt op. */
.dp-wissel {
	display: grid;
	width: min(100%, 16rem);
}

.dp-wissel img {
	grid-area: 1 / 1;
	width: 100%;
	filter: drop-shadow(0 26px 34px rgb(0 0 0 / 0.45));
}

@media (prefers-reduced-motion: no-preference) {
	.dp-wissel img {
		animation: dp-wissel 9s ease-in-out infinite both;
	}

	.dp-wissel img:nth-child(2) { animation-delay: 3s; }
	.dp-wissel img:nth-child(3) { animation-delay: 6s; }
}

@keyframes dp-wissel {
	0%, 5% {
		opacity: 0;
		transform: translateY(20px) rotate(-3deg);
	}

	12%, 30% {
		opacity: 1;
		transform: none;
	}

	38%, 100% {
		opacity: 0;
		transform: translateY(-14px) rotate(3deg);
	}
}

@media (width < 62rem) {
	.dp-stapelkaart {
		grid-template-columns: minmax(0, 1fr);
	}

	.dp-stapelkaart__beeld {
		min-height: 12rem;
	}
}

/* ==========================================================================
   REVIEWS — VARIANTEN
   ========================================================================== */

.dp-reviewrij .dp-review {
	margin: 0;
}

/* In de muur (metselwerk) wel ruimte onder elke kaart. */
.dp-reviewrij .dp-muur > * {
	margin: 0 0 var(--dp-space-m);
}

/* --- A: metselwerk ------------------------------------------------------ */

.dp-metsel {
	columns: 3 18rem;
	column-gap: var(--dp-space-m);
}

.dp-metsel > .dp-review {
	break-inside: avoid;
	margin-bottom: var(--dp-space-m);
}

.dp-metsel > .dp-review--featured .dp-review__text {
	font-size: var(--dp-size-h4);
}

/* --- B: carrousel ------------------------------------------------------- */

.dp-schuif__spoor {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--dp-space-m)) / 3);
	gap: var(--dp-space-m);
	overflow-x: auto;
	padding: 0.5rem 0.25rem 1.5rem;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.dp-schuif__spoor::-webkit-scrollbar {
	display: none;
}

.dp-schuif__item {
	scroll-snap-align: start;
}

.dp-schuif__item .dp-review {
	height: 100%;
}

.dp-schuif__bediening {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	margin-top: var(--dp-space-s);
}

.dp-schuif__balk {
	flex: 1;
	height: 3px;
	margin-inline-end: 1rem;
	border-radius: 3px;
	background: rgb(18 43 7 / 0.12);
	overflow: hidden;
}

.dp-schuif__balk span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 3px;
	background: var(--dp-forest);
	transition: width 300ms var(--dp-ease-out);
}

.dp-rond--licht {
	border-color: var(--dp-line-strong);
	color: var(--dp-forest);
}

.dp-rond--licht:hover {
	border-color: var(--dp-forest);
	background: var(--dp-forest);
	color: var(--dp-paper);
}

@media (width < 62rem) {
	.dp-schuif__spoor {
		grid-auto-columns: 78%;
	}
}

/* --- C: bewegende muur -------------------------------------------------- */

.dp-lopendemuur {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dp-space-m);
	height: 38rem;
	overflow: hidden;
	mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}

.dp-muurkolom__spoor,
.dp-muurkolom__kopie {
	display: grid;
	gap: var(--dp-space-m);
}

.dp-muurkolom__kopie {
	padding-top: var(--dp-space-m);
}

@media (prefers-reduced-motion: no-preference) {
	.dp-muurkolom__spoor {
		animation: dp-muur-op 45s linear infinite;
	}

	.dp-muurkolom--terug .dp-muurkolom__spoor {
		animation-name: dp-muur-neer;
		animation-duration: 55s;
	}

	.dp-lopendemuur:hover .dp-muurkolom__spoor {
		animation-play-state: paused;
	}
}

@keyframes dp-muur-op {
	to { transform: translateY(-50%); }
}

@keyframes dp-muur-neer {
	from { transform: translateY(-50%); }
	to { transform: none; }
}

@media (width < 62rem) {
	.dp-lopendemuur {
		grid-template-columns: 1fr 1fr;
	}

	.dp-muurkolom:nth-child(3) {
		display: none;
	}
}

@media (width < 36rem) {
	.dp-lopendemuur {
		grid-template-columns: minmax(0, 1fr);
	}

	.dp-muurkolom:nth-child(2) {
		display: none;
	}
}

/* --- D: over twee kolommen ---------------------------------------------- */

.dp-tweeluik {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: start;
}

.dp-tweeluik__links {
	position: sticky;
	inset-block-start: 7rem;
	display: grid;
	gap: var(--dp-space-l);
}

.dp-tweeluik__links .dp-reviews__kop {
	display: grid;
	gap: var(--dp-space-s);
	justify-items: start;
}

.dp-review--groot-uitgelicht {
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.dp-review--groot-uitgelicht .dp-review__text {
	font-size: var(--dp-size-h3);
	line-height: 1.3;
}

.dp-tweeluik__rechts {
	columns: 2 15rem;
	column-gap: var(--dp-space-m);
}

.dp-tweeluik__rechts > .dp-review {
	break-inside: avoid;
	margin-bottom: var(--dp-space-m);
}

@media (width < 62rem) {
	.dp-tweeluik {
		grid-template-columns: minmax(0, 1fr);
	}

	.dp-tweeluik__links {
		position: static;
	}
}

/* ==========================================================================
   OVER MIJ — FEITJES ALS DRAAIKAARTEN
   Voorkant: een vraag. Achterkant: het antwoord. De kaart draait in 3D om.
   Met een muis bij hover, en altijd bij klikken of tikken (site-script zet
   aria-pressed).
   ========================================================================== */

/* Geen wit vlak: een zacht verloop laat de kaarten beter uitkomen. */
.dp-feitjes {
	background: linear-gradient(180deg, var(--dp-paper) 0%, var(--dp-moss) 100%);
}

.dp-feiten {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
	margin-top: var(--dp-space-l);
}

.dp-feit {
	perspective: 1200px;
}

/* Om en om een tikje scheef, zoals kaarten die je op tafel legt. */
.dp-feit:nth-child(odd) { rotate: -1.5deg; }
.dp-feit:nth-child(even) { rotate: 1.5deg; translate: 0 1rem; }

.dp-feit__kaart {
	position: relative;
	display: grid;
	width: 100%;
	aspect-ratio: 3 / 4;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: start;
	cursor: pointer;
	transform-style: preserve-3d;
	transition: transform 800ms cubic-bezier(0.3, 1.3, 0.5, 1);
}

.dp-feit__kaart[aria-pressed="true"] {
	transform: rotateY(180deg);
}

@media (hover: hover) {
	.dp-feit:hover .dp-feit__kaart,
	.dp-feit:focus-within .dp-feit__kaart {
		transform: rotateY(180deg);
	}
}

.dp-feit__voor,
.dp-feit__achter {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: clamp(1rem, 0.7rem + 1vw, 1.5rem);
	border-radius: var(--dp-radius-l);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow: 0 24px 40px -28px rgb(18 43 7 / 0.5);
}

/* Elke kaart een eigen zacht verloop uit het palet, zodat het een setje
   speelkaarten wordt in plaats van vijf dezelfde. */
.dp-feit__voor {
	--dp-feit-bol: var(--dp-leaf);

	border: var(--dp-border) solid var(--dp-line);
	background:
		radial-gradient(85% 65% at 100% 0%, rgb(207 222 124 / 0.55), transparent 72%),
		#fff;
}

.dp-feit:nth-child(2) .dp-feit__voor {
	--dp-feit-bol: var(--dp-peach);

	background:
		radial-gradient(85% 65% at 100% 0%, rgb(254 161 117 / 0.45), transparent 72%),
		#fff;
}

.dp-feit:nth-child(3) .dp-feit__voor {
	--dp-feit-bol: var(--dp-lime);

	background:
		radial-gradient(85% 65% at 100% 0%, rgb(230 255 86 / 0.55), transparent 72%),
		#fff;
}

.dp-feit:nth-child(4) .dp-feit__voor {
	--dp-feit-bol: var(--dp-sand);

	background:
		radial-gradient(85% 65% at 100% 0%, rgb(236 229 216 / 0.9), transparent 72%),
		#fff;
}

.dp-feit:nth-child(5) .dp-feit__voor {
	--dp-feit-bol: var(--dp-moss);

	background:
		radial-gradient(85% 65% at 100% 0%, rgb(232 243 211 / 0.9), transparent 72%),
		#fff;
}

/* Het nummer in een gekleurd bolletje, in de kleur van die kaart. */
.dp-feit__nr {
	display: grid;
	place-items: center;
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 50%;
	background: var(--dp-feit-bol);
	font-family: var(--dp-font-display);
	font-size: 1.6rem;
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1;
	color: var(--dp-forest);
}

.dp-feit__vraag {
	font-family: var(--dp-font-display);
	font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.4rem);
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1.2;
	color: var(--dp-text-strong);
}

.dp-feit__draai {
	margin-top: auto;
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-muted);
}

.dp-feit__achter {
	justify-content: center;
	background: var(--dp-forest);
	color: var(--dp-text-on-dark);
	font-size: var(--dp-size-small);
	line-height: 1.5;
	transform: rotateY(180deg);
}

.dp-feit__emoji {
	font-size: 2rem;
	line-height: 1;
}

.dp-feit__achter--foto {
	justify-content: flex-start;
	overflow: hidden;
	padding: 0 0 1.1rem;
	gap: 0.6rem;
}

/* De foto neemt hooguit de helft van de kaart; de rest is voor de tekst.
   Anders loopt een wat langere tekst onderuit de kaart. */
.dp-feit__achter--foto img {
	flex: none;
	width: 100%;
	max-height: 45%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.dp-feit__achter--foto span {
	padding-inline: clamp(1rem, 0.7rem + 1vw, 1.5rem);
	overflow-y: auto;
	font-size: var(--dp-size-xs);
	line-height: 1.45;
}

@media (width < 62rem) {
	.dp-feiten {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (width < 36rem) {
	.dp-feiten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dp-feit:nth-child(even) {
		translate: 0 0;
	}

	.dp-feit__achter {
		font-size: var(--dp-size-xs);
	}
}

/* ==========================================================================
   ZORGPLAN — ZO BEGINT HET: de route
   Vier haltes op een lijn. De stippellijn vult zich tijdens het scrollen;
   elke halte heeft een klein, levend beeldje.
   ========================================================================== */

.dp-haltes {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--dp-space-m);
	margin-top: var(--dp-space-l);
	padding-top: 1.2rem;
	view-timeline: --dp-haltes block;
}

/* De lijn door de nummers: eerst gestippeld, daaroverheen de gevulde lijn. */
.dp-haltes::before,
.dp-haltes::after {
	content: "";
	position: absolute;
	inset-block-start: calc(1.2rem + 1.3rem - 1.5px);
	inset-inline: 12.5%;
	height: 3px;
	border-radius: 3px;
}

.dp-haltes::before {
	background: repeating-linear-gradient(90deg, rgb(18 43 7 / 0.2) 0 8px, transparent 8px 16px);
}

.dp-haltes::after {
	background: var(--dp-forest);
	transform-origin: 0 50%;
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.dp-haltes::after {
			animation: dp-lijn-breed linear both;
			animation-timeline: --dp-haltes;
			animation-range: entry 60% cover 55%;
		}
	}
}

@keyframes dp-lijn-breed {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.dp-halte {
	position: relative;
	min-width: 0;
	display: grid;
	gap: 0.6rem;
	align-content: start;
	justify-items: center;
	text-align: center;
}

.dp-halte__nr {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 4px solid #fff;
	border-radius: 50%;
	background: var(--dp-forest);
	font-family: var(--dp-font-display);
	font-size: 1.05rem;
	color: var(--dp-paper);
}

.dp-halte h3 {
	font-size: var(--dp-size-h4);
	line-height: 1.2;
}

.dp-halte p {
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
}

.dp-halte__beeld {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 5 / 4;
	margin-block: 0.6rem 0.4rem;
	padding: 1rem;
	border-radius: var(--dp-radius-l);
	background: var(--dp-moss);
}

.dp-halte:nth-child(even) .dp-halte__beeld {
	background: var(--dp-peach-soft);
}

/* De mini-beeldjes: kleine witte kaartjes. */
.dp-mini {
	position: relative;
	width: 100%;
	padding: 0.8rem;
	border-radius: var(--dp-radius-m);
	background: #fff;
	box-shadow: 0 16px 28px -20px rgb(18 43 7 / 0.5);
	font-size: 0.72rem;
	color: var(--dp-text);
	text-align: start;
}

.dp-mini p {
	max-width: none;
	margin: 0;
	font-size: inherit;
	color: inherit;
}

/* 1. Basic of Plus, en een muis die op Plus klikt. */
.dp-mini--keuze {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.4rem;
	padding: 0.4rem;
	border-radius: var(--dp-radius-pill);
}

.dp-mini--keuze span {
	display: flex;
	gap: 0.3rem;
	align-items: center;
	justify-content: center;
	padding: 0.55rem;
	border-radius: var(--dp-radius-pill);
	font-size: 0.85rem;
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-muted);
}

.dp-mini--keuze .is-gekozen {
	background: var(--dp-forest);
	color: var(--dp-paper);
}

.dp-mini--keuze svg {
	width: 0.95rem;
	height: 0.95rem;
	color: var(--dp-leaf);
	stroke-width: 2.4;
}

.dp-mini__cursor {
	position: absolute;
	inset-block-end: -0.9rem;
	inset-inline-end: 18%;
	width: 1.1rem;
	height: 1.4rem;
	background: var(--dp-forest);
	clip-path: polygon(0 0, 100% 70%, 55% 72%, 70% 100%, 52% 100%, 38% 76%, 0 95%);
}

@media (prefers-reduced-motion: no-preference) {
	.dp-mini__cursor {
		animation: dp-klik 2.4s ease-in-out infinite;
	}
}

@keyframes dp-klik {
	0%, 100% { translate: 1.4rem 0.8rem; }
	45%, 60% { translate: 0 0; }
	52% { scale: 0.85; }
}

/* 2. Het mailtje. */
.dp-mini--mail {
	display: grid;
	gap: 0.35rem;
}

.dp-mini__van {
	display: flex;
	gap: 0.35rem;
	align-items: center;
	color: var(--dp-text-muted) !important;
}

.dp-mini__van img {
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	object-fit: cover;
}

.dp-mini__onderwerp {
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong) !important;
}

.dp-mini--mail ul {
	display: grid;
	gap: 0.25rem;
}

.dp-mini--mail li {
	display: flex;
	gap: 0.4rem;
	align-items: center;
}

.dp-mini--mail li i {
	width: 0.8rem;
	height: 0.8rem;
	border: 1.5px solid var(--dp-line-strong);
	border-radius: 0.2rem;
}

/* 3. De voortgangsbalken, die vollopen zodra de halte in beeld komt. */
.dp-mini--balken {
	display: grid;
	gap: 0.55rem;
}

.dp-mini--balken p {
	display: grid;
	gap: 0.2rem;
}

.dp-mini--balken b {
	position: relative;
	height: 0.4rem;
	border-radius: 0.4rem;
	background: rgb(18 43 7 / 0.1);
	overflow: hidden;
}

.dp-mini--balken b::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--dp-vol);
	border-radius: inherit;
	background: var(--dp-leaf);
	transform-origin: 0 50%;
}

@media (prefers-reduced-motion: no-preference) {
	.dp-heeft-reveal .dp-halte:not(.is-zichtbaar) .dp-mini--balken b::after {
		transform: scaleX(0);
	}

	.dp-mini--balken b::after {
		transition: transform 1.4s var(--dp-ease-out) 500ms;
	}

	.dp-mini--balken p:nth-child(2) b::after { transition-delay: 700ms; }
	.dp-mini--balken p:nth-child(3) b::after { transition-delay: 900ms; }
	.dp-mini--balken p:nth-child(4) b::after { transition-delay: 1100ms; }
}

/* 4. De week, elke dag een groen bolletje. */
.dp-mini--week {
	display: grid;
	gap: 0.5rem;
}

.dp-mini--week > p {
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

.dp-mini--week ul {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.2rem;
	text-align: center;
}

.dp-mini--week li {
	display: grid;
	gap: 0.25rem;
	justify-items: center;
	font-size: 0.62rem;
	color: var(--dp-text-muted);
}

.dp-mini--week i {
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
	background: var(--dp-leaf);
}

.dp-mini--week > span {
	display: flex;
	gap: 0.3rem;
	align-items: center;
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

.dp-mini--week svg {
	width: 0.95rem;
	height: 0.95rem;
	color: var(--dp-leaf);
	stroke-width: 2.4;
}

/* De afspraken eronder: drie rustige kaartjes. */
.dp-afspraken {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dp-space-m);
	margin-top: var(--dp-space-xl);
	padding-top: var(--dp-space-l);
	border-top: 2px dashed var(--dp-line);
}

.dp-afspraak {
	display: grid;
	gap: 0.5rem;
	align-content: start;
}

.dp-afspraak__kop {
	font-family: var(--dp-font-display);
	font-size: var(--dp-size-h4);
	font-variation-settings: var(--dp-fraunces-axes);
	color: var(--dp-text-strong);
}

.dp-afspraak p:not(.dp-afspraak__kop) {
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
}

@media (width < 62rem) {
	.dp-haltes {
		grid-template-columns: 1fr 1fr;
		row-gap: var(--dp-space-l);
	}

	.dp-haltes::before,
	.dp-haltes::after {
		display: none;
	}

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

@media (width < 36rem) {
	.dp-haltes {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Het kleine kaartje van Simone, links in de vragen. */
.dp-hee--klein {
	position: static;
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: 0.9rem;
	align-items: start;
	margin-top: var(--dp-space-m);
	padding: 1.1rem;
	border-radius: var(--dp-radius-l);
	background: #fff;
	border: var(--dp-border) solid var(--dp-line);
}

.dp-hee--klein .dp-hee__foto {
	width: 3.5rem;
	height: 3.5rem;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
}

.dp-hee--klein .dp-hee__tekst {
	gap: 0.5rem;
	padding: 0;
}

.dp-hee--klein .dp-hee__hoi {
	font-size: var(--dp-size-h4);
}

/* A2: Charlotte linksboven iets verder de foto in, Sabine rechts op de
   hoogte van Simones gezicht, net onder de zegel. */
.dp-zweef--a2-links {
	inset-block: auto -2.5rem;
	inset-inline-start: -12%;
	rotate: -3deg;
}

.dp-zweef--a2-rechts {
	inset-block-start: 28%;
	inset-inline: auto -15%;
	width: 46%;
	rotate: 4deg;
	animation-delay: 300ms, 2s;
}

@media (width < 62rem) {
	.dp-zweef--a2-links { inset-inline-start: -5%; }
	.dp-zweef--a2-rechts { inset-inline-end: -5%; }
}

/* A2: de zegel rechtsboven, over de hoek van de foto. */
.dp-zegel-rond--a2 {
	inset-block: -2rem auto;
	inset-inline: auto -2rem;
}

@media (width < 36rem) {
	/* Iets lager dan op desktop: anders raakt hij de tekst van de trustbalk. */
	.dp-zegel-rond--a2 {
		width: 7rem;
		inset-block-start: -1rem;
		inset-inline-end: -0.5rem;
	}
}

/* ==========================================================================
   HOME — HET TEMPLATEBLOK (uitleg, reviews, voorbeelden, knop)
   ========================================================================== */

.dp-promo__kop {
	max-width: 50rem;
	margin: 0 auto var(--dp-kopruimte);
	text-align: center;
}

.dp-promo__kop .dp-lead {
	margin-inline: auto;
}

/* Ruim onder de waaier: de drie voordelen moeten eronder los staan, niet
   eraan vastplakken. */
.dp-promo .dp-onthul {
	margin-bottom: var(--dp-space-2xl);
}

.dp-promo__punten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
	max-width: 62rem;
	margin: 0 auto var(--dp-space-2xl);
	text-align: center;
}

.dp-promo__punten li {
	display: grid;
	gap: 0.6rem;
	justify-items: center;
}

.dp-promo__icoon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--dp-radius-m);
	background: rgb(207 222 124 / 0.15);
	color: var(--dp-leaf);
}

.dp-promo__icoon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.dp-promo__punten h3 {
	font-size: var(--dp-size-h4);
}

.dp-promo__punten p {
	font-size: var(--dp-size-small);
	color: var(--dp-text-on-dark-muted);
}

/* Drie korte reviews naast elkaar, elk in een donkere kaart met een randje:
   dezelfde kaartvorm als de rest van de donkere blokken. Geen lijntjes boven
   en onder de rij meer, die sneden het blok onnodig door. */
.dp-promo__stemmen {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dp-space-m);
	margin-bottom: var(--dp-space-2xl);
}

.dp-promo__stemmen .dp-stem {
	padding: var(--dp-space-m);
	border: var(--dp-border) solid var(--dp-line-on-dark);
	border-radius: var(--dp-radius-l);
	background: rgb(255 255 255 / 0.04);
}

.dp-promo__tussenkop {
	font-size: var(--dp-size-h2);
	color: var(--dp-paper);
}

.dp-promo__tussenkop em {
	color: var(--dp-leaf);
}

.dp-promo__cta {
	display: grid;
	gap: 0.8rem;
	justify-items: center;
	margin-top: var(--dp-space-l);
	text-align: center;
}

@media (width < 62rem) {
	.dp-promo__punten,
	.dp-promo__stemmen {
		grid-template-columns: minmax(0, 1fr);
		max-width: 32rem;
		margin-inline: auto;
	}
}

/* ==========================================================================
   HOME — DE GETALLEN ALS BALK
   Half over het fotoblok erboven, half over de blog eronder. De blokken
   krijgen daar extra ruimte voor.
   ========================================================================== */

.dp-cijferbalk {
	--dp-balk-half: 4.75rem;

	/* De balk hangt precies op de naad tussen twee secties. De houder zelf is
	   nul hoog en staat dus exact op die naad; de balk wordt daarna een halve
	   eigen hoogte omhoog getrokken. Zo klopt het midden altijd, ook als de
	   balk een regel hoger of lager wordt. */
	position: relative;
	z-index: 3;
	height: 0;
}

/* Op over mij staat de balk op een donker blok. Dan is dezelfde donkergroene
   vulling niet te zien, dus daar wordt hij bijna zwart, met accenten in het
   lichtere blad zodat ze op die tint blijven kloppen. */
.dp-pagina-over-mij .dp-cijferbalk__balk {
	background:
		radial-gradient(60% 120% at 0% 0%, rgb(207 222 124 / 0.16), transparent 70%),
		var(--dp-ink);
	border-color: rgb(231 238 221 / 0.22);
}

.dp-cijferbalk__balk {
	/* De sectie hieronder kruipt met de hoekradius over zijn voorganger heen,
	   dus de echte naad ligt een radius hoger dan deze houder. Vandaar dat de
	   balk niet alleen de helft van zichzelf, maar ook die radius omhoog gaat. */
	translate: 0 calc(-50% - var(--dp-radius-section));
	max-width: 58rem;
	margin-inline: auto;
	padding: 0.6rem clamp(1.25rem, 0.5rem + 3vw, 3rem);
	border: var(--dp-border) solid var(--dp-line-on-dark);
	border-radius: var(--dp-radius-l);
	background:
		radial-gradient(60% 120% at 0% 0%, rgb(207 222 124 / 0.12), transparent 70%),
		var(--dp-forest);
	color: var(--dp-text-on-dark);
	box-shadow: 0 40px 70px -35px rgb(0 0 0 / 0.55);
}

.dp-cijferbalk .dp-getallen {
	margin-block: 0 !important;
	border-block: 0;
}

.dp-section:has(+ .dp-cijferbalk) {
	padding-bottom: calc(clamp(6rem, 4rem + 7vw, 10rem) + var(--dp-balk-half, 4.75rem));
}

.dp-cijferbalk + .dp-section {
	padding-top: calc(var(--dp-section-y) + 4.75rem);
}

/* ==========================================================================
   BLOG — OVERZICHT, ARTIKEL EN LOSSE TEKSTPAGINA'S
   Het overzicht gebruikt dezelfde kaarten als de homepage (.dp-blog), dus
   hier staat alleen wat daar nog omheen komt: de kop, de filters, de
   paginering en de opmaak van lopende tekst.
   ========================================================================== */

/* Kop en overzicht zitten in één sectie, met één doorlopend verloop. Waren het
   twee secties, dan liep er een streep door het verloop: elke sectie kruipt
   met zijn ronde hoek over de vorige heen. */
.dp-kop--blog {
	padding-bottom: var(--dp-section-y-tight);
	background: linear-gradient(180deg, var(--dp-paper) 0%, var(--dp-moss) 100%);
}

/* De categorieën als rij pillen. Geen zijbalk: op een telefoon wordt dat toch
   een rij, en zo staat het op elk scherm hetzelfde. */
.dp-blogfilters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: var(--dp-space-m);
}

.dp-blogfilters a {
	text-decoration: none;
	transition:
		border-color var(--dp-transition),
		background-color var(--dp-transition);
}

.dp-blogfilters a:hover {
	border-color: var(--dp-forest);
}

/* De categorie waar je nu op staat: omgekeerd, zodat je hem er meteen uit pikt. */
.dp-bubble--actief {
	border-color: var(--dp-forest);
	background: var(--dp-forest);
	color: var(--dp-paper);
}

.dp-blogs--overzicht {
	margin-top: var(--dp-space-l);
}

/* Het overzicht toont er drie per rij; de homepage doet dat ook, maar daar
   zijn het er altijd precies drie. Hier kunnen het er meer zijn. */
.dp-blogs--overzicht .dp-blogs__lijst {
	row-gap: var(--dp-space-l);
}

/* Een blog zonder uitgelichte afbeelding zakt niet in: het vlak blijft staan. */
.dp-blog__leeg {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(60% 80% at 30% 20%, rgb(207 222 124 / 0.5), transparent 70%),
		var(--dp-moss);
}

.dp-paginering {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	margin-top: var(--dp-space-xl);
}

.dp-paginering a,
.dp-paginering span {
	display: grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: 0.9rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-pill);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
	text-decoration: none;
	transition:
		border-color var(--dp-transition),
		background-color var(--dp-transition);
}

.dp-paginering a:hover {
	border-color: var(--dp-forest);
	background: rgb(18 43 7 / 0.05);
}

.dp-paginering .current {
	border-color: var(--dp-forest);
	background: var(--dp-forest);
	color: var(--dp-paper);
}

.dp-leeg {
	max-width: none;
	text-align: center;
	color: var(--dp-text-muted);
}

.dp-zoekveld {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	margin-top: var(--dp-space-m);
}

.dp-zoekveld input {
	flex: 1 1 18rem;
	max-width: 26rem;
	padding: 0.85rem 1.2rem;
	border: var(--dp-border) solid var(--dp-line-strong);
	border-radius: var(--dp-radius-pill);
	background: #fff;
	font: inherit;
	color: var(--dp-text-strong);
}

.dp-zoekveld input:focus {
	outline: none;
	border-color: var(--dp-forest);
	box-shadow: 0 0 0 4px rgb(207 222 124 / 0.55);
}

/* --- Eén blog, en losse tekstpagina's -----------------------------------
   De kop is gecentreerd, net als elke andere sectiekop op de site, en het
   beeld staat in diezelfde sectie. Zou het beeld in een eigen blok staan, dan
   leest het als een nieuwe sectie die tegen de rand aan begint.
*/

.dp-artikel__kop {
	/* Geen eigen laag (dp-section zet z-index 1): anders schuift de inhoud
	   eronder niet over het groene vlak, en lijkt het beeld erop te staan in
	   plaats van half over de rand te vallen. */
	z-index: auto;
	padding-bottom: 0;
	background: linear-gradient(180deg, var(--dp-paper) 0%, var(--dp-moss) 100%);
}

.dp-artikel__intro {
	display: grid;
	justify-items: center;
	gap: var(--dp-space-s);
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.dp-artikel__cat {
	text-decoration: none;
}

.dp-artikel__titel {
	max-width: 20ch;
	margin: 0;
	font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.75rem);
	line-height: 1.06;
}

.dp-artikel__inleiding {
	max-width: 52ch;
	margin: 0;
	font-size: var(--dp-size-lead);
	color: var(--dp-text-muted);
}

/* Wie het schreef, wanneer, en hoe lang je erover doet. Geen streep erboven:
   de witruimte doet het werk al. */
.dp-artikel__balk {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem var(--dp-space-s);
	align-items: center;
	justify-content: center;
	margin-top: var(--dp-space-xs);
}

.dp-artikel__meta {
	display: flex;
	gap: 0.7rem;
	align-items: center;
	max-width: none;
	margin: 0;
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
	text-align: start;
}

.dp-artikel__meta img {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	object-fit: cover;
}

.dp-artikel__meta strong {
	display: block;
	color: var(--dp-text-strong);
}

.dp-artikel__stip {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--dp-line-strong);
}

.dp-artikel__leestijd {
	display: flex;
	gap: 0.45rem;
	align-items: center;
	max-width: none;
	margin: 0;
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
}

.dp-artikel__leestijd svg {
	width: 1.05rem;
	height: 1.05rem;
	stroke-width: 1.8;
}

/* Het beeld staat binnen de sectie, dus met lucht eromheen. Een rustige
   verhouding: over de volle breedte werd het een poster in plaats van een
   blog. */
/* Het beeld valt half over de naad met de tekst eronder. De sectie heeft
   onderaan een ronde hoek, dus daar mag het beeld overheen: zo blijft de
   tabvorm zichtbaar die we overal gebruiken. */
/* Het beeld valt half over de naad met de tekst eronder, zodat de ronde
   bovenkant van dat blok er als een tab achter vandaan komt.

   De truc met de negatieve ondermarge: de foto is 3:2, dus de helft van zijn
   hoogte is precies een derde van zijn breedte. Procenten in een marge rekenen
   met de breedte van de container, net als de breedte van de foto zelf, dus dit
   klopt op elk schermformaat. */
.dp-artikel__beeld {
	position: relative;
	z-index: 2;
	width: min(100%, 52rem);
	margin: var(--dp-space-m) auto calc(min(100%, 52rem) / -3);
}

.dp-artikel__beeld img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--dp-radius-l);
	box-shadow: var(--dp-shadow-l);
}

/* De sectie eronder maakt ruimte voor het stukje beeld dat eroverheen valt. */
.dp-artikel__inhoud {
	position: relative;
	z-index: 1;
	margin-top: calc(-1 * var(--dp-radius-section));
	padding-top: var(--dp-radius-section);
	border-start-start-radius: var(--dp-radius-section);
	border-start-end-radius: var(--dp-radius-section);
	background: var(--dp-bg);
}

.dp-artikel__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 18rem;
	gap: clamp(2rem, 1.2rem + 3vw, 4rem);
	align-items: start;

	/* De andere helft van de foto, plus lucht voordat de tekst begint. */
	padding-top: calc(min(100%, 52rem) / 3 + var(--dp-space-xl));
}

.dp-artikel__tekst {
	max-width: 44rem;
	margin-inline: 0;
}

/* --- De zijbalk ---------------------------------------------------------- */

.dp-zijbalk {
	position: sticky;
	inset-block-start: var(--dp-anker-ruimte);
	display: grid;
	gap: var(--dp-space-m);
}

.dp-inhoudsopgave {
	padding: var(--dp-space-s);
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	box-shadow: var(--dp-shadow-m);
}

.dp-inhoudsopgave__kop {
	margin: 0.25rem 0.6rem 0.5rem;
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	letter-spacing: var(--dp-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--dp-text-muted);
}

.dp-inhoudsopgave ol {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Elke kop een rustige regel. De kop waar je bent krijgt een zachtgroen vlak;
   de letterdikte blijft gelijk, zodat de tekst niet ineens anders afbreekt.
   (.dp-zijbalk erbij: anders wint de groene linkkleur uit base.css.) */
.dp-zijbalk .dp-inhoudsopgave a {
	display: block;
	padding: 0.45rem 0.6rem;
	border-radius: var(--dp-radius-s);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-medium);
	line-height: 1.35;
	color: var(--dp-text);
	text-decoration: none;
	transition:
		background-color var(--dp-transition),
		color var(--dp-transition);
}

.dp-zijbalk .dp-inhoudsopgave a:hover {
	background: var(--dp-moss);
	color: var(--dp-text-strong);
}

/* De kop die je aan het lezen bent. */
.dp-zijbalk .dp-inhoudsopgave a.is-hier {
	background: var(--dp-leaf-soft);
	color: var(--dp-text-strong);
}

/* Het kaartje over Simone in de zijbalk. */
.dp-zijkaart {
	display: grid;
	gap: 0.8rem;
	justify-items: center;
	padding: var(--dp-space-m);
	text-align: center;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background:
		radial-gradient(85% 60% at 100% 0%, rgb(207 222 124 / 0.45), transparent 72%),
		#fff;
}

.dp-zijkaart__foto {
	width: 6.5rem;
	height: 6.5rem;
	border-radius: 50%;
	object-fit: cover;
}

/* Het handschrift moet groot genoeg zijn om te lezen: klein is Chelsie
   onleesbaar. Hij vult de kaart en helt licht omhoog. */
.dp-zijkaart .dp-zijkaart__hoi {
	margin-bottom: 0.2rem;
	font-family: var(--dp-font-hand);
	font-size: clamp(1.9rem, 1.6rem + 0.9vw, 2.4rem);
	line-height: 1;
	color: var(--dp-forest);
	rotate: -3deg;
}

.dp-zijkaart p {
	max-width: none;
	margin-bottom: var(--dp-space-xs);
	font-size: var(--dp-size-small);
	color: var(--dp-text);
}

.dp-zijkaart .dp-btn {
	margin-top: 0.2rem;
}

.dp-zijkaart__tweede {
	margin-top: 0.2rem;
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

/* --- Het blok onder een blog ---------------------------------------------
   Geen auteursbio maar een uitnodiging: dit kan ik voor je doen. Zelfde
   kaartvorm en dezelfde tekstkleuren als de rest van de site.
*/

.dp-aanbieding {
	display: flex;
	gap: var(--dp-space-m);
	align-items: flex-start;
	margin: var(--dp-space-xl) 0 var(--dp-section-y-tight);
	padding: var(--dp-space-l);
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background:
		radial-gradient(60% 80% at 0% 0%, rgb(207 222 124 / 0.4), transparent 70%),
		#fff;
	box-shadow: var(--dp-shadow-m);
}

.dp-aanbieding__foto {
	flex: none;
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	object-fit: cover;
}

.dp-aanbieding__kop {
	margin: 0.4rem 0 0.5rem;
	font-family: var(--dp-font-display);
	font-size: var(--dp-size-h4);
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	color: var(--dp-text-strong);
}

.dp-aanbieding__tekst p {
	max-width: 52ch;
	color: var(--dp-text);
}

.dp-aanbieding__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-top: var(--dp-space-s);
}

@media (width < 36rem) {
	.dp-aanbieding {
		flex-direction: column;
		padding: var(--dp-space-m);
	}
}

/* --- Hoe ver je bent met lezen -------------------------------------------
   Een dunne lijn bovenin die meegroeit met de scrollpositie. Zonder script:
   de animatie hangt aan de scrollbalk van de pagina zelf. Browsers die dat
   niet kennen zien geen balk, en missen niets.
*/

.dp-leesbalk {
	position: fixed;
	z-index: 60;
	inset-block-start: 0;
	inset-inline: 0;
	height: 4px;
	background: var(--dp-forest);
	scale: 0 1;
	transform-origin: 0 50%;
	pointer-events: none;
}

/* De balk hangt aan het artikel zelf, niet aan de hele pagina: hij is dus vol
   als je de blog uit hebt, en niet pas onderaan de footer. timeline-scope
   maakt de tijdlijn van het artikel bruikbaar buiten dat artikel. */
@supports (animation-timeline: view()) {
	.dp-pagina-blog {
		timeline-scope: --dp-blog;
	}

	.dp-artikel {
		view-timeline: --dp-blog block;
	}

	.dp-leesbalk {
		animation: dp-lezen linear;
		animation-timeline: --dp-blog;
		animation-range: contain 0% exit 0%;
	}
}

@keyframes dp-lezen {
	from {
		scale: 0 1;
	}

	to {
		scale: 1 1;
	}
}

@media (width < 62rem) {
	.dp-artikel__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.dp-zijbalk {
		position: static;
		max-width: 44rem;
	}
}

@media (width < 36rem) {
	.dp-auteur {
		flex-direction: column;
		padding: var(--dp-space-m);
	}
}

/* --- Lopende tekst uit WordPress ---------------------------------------
   Alles wat Simone in de editor typt komt hier terecht: koppen, alinea's,
   lijsten, citaten, afbeeldingen en tabellen. Deze regels zorgen dat dat
   dezelfde typografie krijgt als de rest van de site, zonder dat ze in de
   editor iets hoeft in te stellen.
*/

.dp-prose {
	--dp-flow: var(--dp-space-s);
}

.dp-prose > * + * {
	margin-top: var(--dp-flow);
}

.dp-prose :is(h2, h3, h4) {
	margin-top: var(--dp-space-l);
}

.dp-prose h2 {
	font-size: var(--dp-size-h3);
}

.dp-prose h3 {
	font-size: var(--dp-size-h4);
}

.dp-prose h4 {
	font-size: var(--dp-size-h5);
}

.dp-prose p,
.dp-prose li {
	max-width: none;
}

.dp-prose :is(ul, ol) {
	display: grid;
	gap: 0.4rem;
	padding-inline-start: 1.4rem;
	list-style: revert;
}

.dp-prose li::marker {
	color: var(--dp-text-muted);
}

.dp-prose a:not([class]) {
	color: var(--dp-link);
	text-decoration-color: rgb(67 112 31 / 0.4);
}

/* Een afbeelding mag breder dan de tekstkolom: dat geeft lucht in een lang
   stuk. Op smal blijft hij netjes binnen de kolom. */
.dp-prose :is(img, iframe, video) {
	max-width: 100%;
	height: auto;
	border-radius: var(--dp-radius-m);
}

@media (width >= 62rem) {
	.dp-artikel__tekst :is(figure, img, iframe, video) {
		width: calc(100% + 6rem);
		max-width: none;
		margin-inline: -3rem;
	}

	.dp-artikel__tekst figure img {
		width: 100%;
		margin-inline: 0;
	}
}

.dp-prose figure {
	margin: var(--dp-space-l) 0;
}

.dp-prose figcaption {
	margin-top: 0.6rem;
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
}

.dp-prose blockquote {
	margin: var(--dp-space-l) 0;
	padding: var(--dp-space-m);
	border-inline-start: 4px solid var(--dp-leaf);
	border-radius: 0 var(--dp-radius-m) var(--dp-radius-m) 0;
	background: var(--dp-moss);
	font-family: var(--dp-font-display);
	font-size: var(--dp-size-lead);
	font-variation-settings: var(--dp-fraunces-axes);
	color: var(--dp-text-strong);
}

.dp-prose blockquote p {
	margin: 0;
}

.dp-prose hr {
	margin: var(--dp-space-l) 0;
	border: 0;
	border-top: var(--dp-border) solid var(--dp-line);
}

.dp-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--dp-size-small);
}

.dp-prose :is(th, td) {
	padding: 0.7rem 0.9rem;
	border-bottom: var(--dp-border) solid var(--dp-line);
	text-align: start;
}

.dp-prose th {
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

.dp-prose code {
	padding: 0.15em 0.4em;
	border-radius: 0.3rem;
	background: var(--dp-moss);
	font-size: 0.92em;
}

/* De footer van de salespagina: één regel, gecentreerd, en verder zo laag
   mogelijk. Geen menu en geen streep erboven: het is geen sectie maar een
   afsluitregeltje. */
.dp-footer--regel {
	padding-block: 0.9rem;
	border: 0;
	background: var(--dp-forest);
	text-align: center;
}

/* In de grote footer scheidt een streepje deze regel van de kolommen erboven.
   Hier staat hij alleen, dus die streep moet weg. */
.dp-footer--regel .dp-footer__klein {
	max-width: none;
	margin: 0;
	padding-top: 0;
	border-top: 0;
	font-size: var(--dp-size-xs);
}

/* De inleiding boven de knoppen mag niet breder dan de knoppenrij eronder;
   anders steekt die ene regel er raar uit. */
.dp-pagina-over-mij .dp-slot__inhoud .dp-lead {
	max-width: 58rem;
}

/* Een lange kop mag kleiner: op de volle titelmaat werd dit een muur. */
.dp-kop__titel--klein {
	font-size: clamp(1.9rem, 1.25rem + 2.2vw, 2.85rem);
}

/* Een kop met de foto links en de tekst rechts, in plaats van andersom. */
.dp-kop--omgekeerd .dp-kop__tekst {
	order: 2;
}

.dp-kop--omgekeerd .dp-kop__beeld {
	order: 1;
}

/* Op mobiel eerst de tekst en dan de foto, ook bij een omgekeerde kop:
   anders zakt de titel onder de vouw. */
@media (width < 62rem) {
	.dp-kop--omgekeerd .dp-kop__tekst {
		order: 0;
	}

	.dp-kop--omgekeerd .dp-kop__beeld {
		order: 1;
	}
}

@media (width < 36rem) {
	/* Zorgplan-kaartje: het lampje schuift onder de sitenaam in plaats van
	   eroverheen. */
	.dp-status__kop {
		flex-wrap: wrap;
	}

	.dp-status__site {
		flex: 1 1 calc(100% - 3.4rem);
		min-width: 0;
	}

	.dp-status__lampje {
		margin-inline-start: calc(2.6rem + 0.8rem);
	}
}

/* ==========================================================================
   RONDE 8 — MOBIEL, ALLE PAGINA'S
   ========================================================================== */

/* Blogpost: een opsomming kreeg wel de inspringing van een lijst, maar de
   basisstijl haalde de bolletjes weg. Daardoor leek de tekst te verspringen. */
.dp-prose ul > li {
	list-style-type: disc;
}

.dp-prose ol > li {
	list-style-type: decimal;
}

/* Zorgplan: het foutscherm en de koraalkleurige bubbel zweven elk los en
   rustig, met een eigen tempo. */
@media (prefers-reduced-motion: no-preference) {
	.dp-foutscherm {
		animation: dp-zweven 7s ease-in-out infinite alternate;
	}

	.dp-foutscherm__baasje {
		animation: dp-zweven 5.5s ease-in-out -2s infinite alternate;
	}
}

@keyframes dp-zweven {
	from {
		translate: 0 -5px;
	}

	to {
		translate: 0 6px;
	}
}

/* Home: "Alle blogs" staat op desktop naast de kop, op mobiel onderaan. */
.dp-blogs__onder {
	display: none;
}

/* Laten maken: de foto van Simone in de derde kaart. */
.dp-luik__beeld--simone img {
	object-position: 53% 28%;
}

@media (width < 62rem) {
	/* Koppen: minder lucht tussen titel, tekst en knop, en iets meer tussen
	   de knop en de tekstlink eronder. Tekst en beeld dichter op elkaar. */
	.dp-kop__grid {
		gap: var(--dp-space-l);
	}

	.dp-kop__tekst {
		gap: 0.9rem;
	}

	.dp-kop__tekst .dp-lead {
		margin-top: 0;
	}

	.dp-kop__knoppen {
		row-gap: 1.4rem;
		margin-top: 0.4rem;
	}

	/* De trust bar volgt de uitlijning van de kop: links. */
	.dp-kop .dp-trust {
		justify-content: flex-start;
	}

	.dp-kop .dp-trust__tekst {
		justify-items: start;
		text-align: left;
	}

	/* Zorgplan: de melding van Simone rechtsboven over de kaart. */
	.dp-kop--zorg .dp-zweef--mail {
		inset: -1.75rem -0.5rem auto auto;
	}

	/* Zorgplan, vier stappen: het nummer in de gekleurde kaart, en de kaart
	   zo hoog als wat erin staat. */
	.dp-haltes::before,
	.dp-haltes::after {
		display: none;
	}

	.dp-halte {
		position: relative;
	}

	.dp-halte__nr {
		position: absolute;
		inset-block-start: 1.2rem;
		inset-inline-start: 0.75rem;
		width: 2.2rem;
		height: 2.2rem;
		border-width: 3px;
		font-size: 0.95rem;
	}

	.dp-halte__beeld {
		aspect-ratio: auto;
		margin-top: 0;
		padding: 3.25rem 1rem 1.5rem;
	}
}

@media (width < 48rem) {
	/* Minder ruimte tussen het menu en de eerste regel op de pagina. */
	.dp-kop {
		padding-top: 6.25rem;
	}

	/* "Dit is wat ik voor jou wil" met de pijl: alleen op brede schermen. */
	.dp-krabbeltekst {
		display: none;
	}

	/* Home, templateblok: minder lucht tussen de tekst en de onthulling. */
	.dp-promo__kop {
		margin-bottom: var(--dp-space-s);
	}

	.dp-promo__kop + .dp-onthul {
		margin-top: -3rem;
	}

	/* Cijferbalk: licht met donkere tekst. */
	.dp-cijferbalk__balk,
	.dp-pagina-over-mij .dp-cijferbalk__balk {
		border-color: var(--dp-line);
		background:
			radial-gradient(60% 120% at 0% 0%, rgb(207 222 124 / 0.35), transparent 70%),
			var(--dp-paper);
		color: var(--dp-text);
		box-shadow: 0 30px 60px -35px rgb(18 43 7 / 0.45);
	}

	.dp-cijferbalk .dp-getal + .dp-getal {
		border-top-color: var(--dp-line);
	}

	.dp-cijferbalk .dp-getal dt,
	.dp-cijferbalk .dp-getal dd {
		color: var(--dp-text-strong);
	}

	.dp-cijferbalk .dp-getal__plus,
	.dp-cijferbalk .dp-getal dt small {
		color: var(--dp-forest);
	}

	.dp-cijferbalk .dp-getal dd a {
		color: var(--dp-link);
	}

	/* Blogs: foto's minder hoog, meer ruimte tussen de berichten, en de
	   knop "Alle blogs" onderaan. */
	.dp-blog__foto img {
		aspect-ratio: 16 / 15;
	}

	.dp-blogs__lijst {
		row-gap: var(--dp-space-xl);
	}

	.dp-blogs__kop .dp-btn {
		display: none;
	}

	.dp-blogs__onder {
		display: block;
		margin-top: var(--dp-space-l);
	}

	/* Blogoverzicht en blogpost: links uitgelijnd. */
	.dp-kop--blog .dp-section__head {
		justify-items: start;
		margin-inline: 0;
		text-align: left;
	}

	.dp-blogfilters {
		justify-content: flex-start;
	}

	.dp-artikel__intro {
		justify-items: start;
		margin-inline: 0;
		text-align: left;
	}

	.dp-artikel__balk,
	.dp-artikel__meta {
		justify-content: flex-start;
	}

	/* Blogpost: meer ruimte onder het menu, minder tussen foto en tekst. */
	.dp-artikel__kop {
		padding-top: 7.5rem;
	}

	.dp-artikel__grid {
		padding-top: calc(min(100%, 52rem) / 3 + var(--dp-space-m));
	}

	/* Zorgplan: de pillen onderaan breken netjes af. */
	.dp-kleintjes li {
		border-radius: 1.2rem;
		text-align: center;
		text-wrap: balance;
	}
}

/* Home en laten maken: op een scherm zonder muis spelen de animaties in de
   drie kaarten vanzelf zodra een kaart in beeld komt. */
.dp-luik.is-actief .dp-ministatus svg {
	color: var(--dp-forest);
	animation: dp-vink-pop 600ms var(--dp-ease-out) both;
}

.dp-luik.is-actief .dp-ministatus span:nth-child(2) svg { animation-delay: 120ms; }
.dp-luik.is-actief .dp-ministatus span:nth-child(3) svg { animation-delay: 240ms; }
.dp-luik.is-actief .dp-ministatus span:nth-child(4) svg { animation-delay: 360ms; }

.dp-luik.is-actief .dp-minilaptop__scherm img {
	transform: translateY(calc(-100% + 100cqh));
}

.dp-luik.is-actief .dp-luik__beeld--foto img {
	transform: scale(1.05);
}

.dp-luik.is-actief .dp-luik__hint {
	opacity: 0;
}

/* ==========================================================================
   RONDE 9
   ========================================================================== */

/* Losse tekstpagina's (voorwaarden, privacy): de kop loopt zacht over in
   de tekst eronder, en titel en tekst staan in dezelfde leeskolom. */
.dp-pagina-tekst .dp-artikel__kop {
	padding-block: clamp(8rem, 6.5rem + 4vw, 10.5rem) var(--dp-space-l);
	background: linear-gradient(180deg, var(--dp-moss) 0%, var(--dp-paper) 100%);
}

.dp-pagina-tekst .dp-artikel__kop .dp-container,
.dp-pagina-tekst .dp-artikel > .dp-container {
	max-width: calc(48rem + 2 * var(--dp-gutter));
}

.dp-pagina-tekst .dp-artikel__titel {
	max-width: none;
	margin: 0;
	text-align: left;
	font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.5rem);
}

.dp-pagina-tekst .dp-artikel__tekst {
	padding-bottom: var(--dp-section-y);
}

@media (width < 62rem) {
	/* Blokken met een zoekscherm (home 2, over mij 2): de ruimte bovenin
	   was voor het handgeschreven briefje, dat op mobiel weg is. */
	.dp-serp-plek {
		padding-top: 0;
	}

	.dp-herkenbaar__grid {
		gap: var(--dp-space-l);
	}

	/* Koppen: geen extra marge boven het beeld; tekst en beeld sluiten aan. */
	.dp-kop__beeld {
		margin-top: 0;
	}

	/* Zorgplan: de melding van Simone rechtsonder, met net genoeg ruimte. */
	.dp-kop--zorg .dp-zweef--mail {
		inset: auto -0.5rem -1.5rem auto;
	}

	.dp-kop--zorg .dp-kop__beeld {
		margin-bottom: 2.25rem;
	}

	/* Vier stappen: ruimte onder het nummer, alle kaarten even hoog, en meer
	   lucht onderaan de sectie. */
	/* Inhoud bovenaan in de kaart: dan zit er onder het nummer altijd
	   evenveel ruimte, en zijn alle vier de kaarten even hoog. */
	.dp-halte__beeld {
		place-items: start center;
		min-height: 17rem;
		padding-top: 4.75rem;
	}

	.dp-route-start {
		padding-bottom: calc(var(--dp-section-y) + var(--dp-space-l));
	}

	/* Blogpost: het kaartje "Hee, ik ben Simone" herhaalt het blok eronder. */
	.dp-zijkaart {
		display: none;
	}
}

@media (width < 48rem) {
	/* Cijferbalk: wit, zodat hij loskomt van het lichtgroene blok eronder.
	   Op over mij blijft de lichte variant met groene gloed. */
	.dp-cijferbalk__balk {
		background: linear-gradient(180deg, #fff 0%, #fbfcf8 100%);
	}

	.dp-pagina-over-mij .dp-cijferbalk__balk {
		background:
			radial-gradient(60% 120% at 0% 0%, rgb(207 222 124 / 0.35), transparent 70%),
			var(--dp-paper);
	}

	/* Over mij: de foto in de kop minder hoog. */
	.dp-kop__beeld--staand .dp-kop__foto img {
		aspect-ratio: 5 / 4;
		height: auto;
		object-fit: cover;
	}

	/* Zorgplan, "goed om te weten": op mobiel even brede regels onder
	   elkaar in plaats van losse pillen, zodat een lange regel netjes staat. */
	.dp-kleintjes ul {
		display: grid;
		gap: 0.5rem;
		width: 100%;
	}

	.dp-kleintjes li {
		border-radius: var(--dp-radius-m);
		text-align: center;
	}

	/* Blogpost: minder ruimte tussen de foto en de tekst. */
	.dp-artikel__grid {
		padding-top: calc(min(100%, 52rem) / 3 - 0.5rem);
	}
}

/* ==========================================================================
   RONDE 10
   ========================================================================== */

/* Zorgplan, "goed om te weten": vinkjes in plaats van pillen. Op desktop
   naast elkaar over twee regels, op mobiel een lijstje onder elkaar. */
.dp-kleintjes__lijst {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.7rem 1.75rem;
	max-width: 52rem;
}

.dp-kleintjes .dp-kleintjes__lijst li {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	text-align: left;
}

.dp-kleintjes__lijst svg {
	flex: none;
	width: 1.2rem;
	height: 1.2rem;
	color: var(--dp-forest);
}

@media (width < 48rem) {
	.dp-kleintjes .dp-kleintjes__lijst {
		display: grid;
		justify-content: center;
		justify-items: start;
		gap: 0.65rem;
		width: auto;
	}

	.dp-kleintjes .dp-kleintjes__lijst li {
		align-items: start;
	}

	.dp-kleintjes__lijst svg {
		margin-top: 0.15em;
	}
}

@media (width < 62rem) {
	/* Zorgplan, vier stappen: de inhoud weer verticaal in het midden,
	   met evenveel lucht boven als onder (het nummer zit bovenin). */
	.dp-halte__beeld {
		place-items: center;
		min-height: 19rem;
		padding: 4.4rem 1rem;
	}
}

/* ==========================================================================
   FOOTER, AANGEVULD
   Foto naast het logo, een kolom Instagram met de feed en ronde icoontjes.
   ========================================================================== */

.dp-footer--site .dp-footer__raster {
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 1.4fr);
}

.dp-footer__merk {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.dp-footer__foto {
	flex: none;
	width: 4.5rem;
	height: 4.5rem;
	border: 2px solid rgb(231 238 221 / 0.25);
	border-radius: 50%;
	object-fit: cover;
}

.dp-footer__insta {
	display: grid;
	gap: 1rem;
	align-content: start;
}

.dp-footer__insta .dp-footer__kop {
	margin-bottom: 0;
}

/* De feed van Smash Balloon: zonder eigen marges, met afgeronde hoekjes. */
.dp-footer__feed #sb_instagram {
	padding: 0 !important;
}

.dp-footer__feed #sb_instagram #sbi_images {
	padding: 0 !important;
}

.dp-footer__feed #sb_instagram :is(.sbi_photo_wrap, .sbi_photo, .sbi_photo img) {
	overflow: hidden;
	border-radius: 8px !important;
}

.dp-footer__feed #sb_instagram :is(.sbi_follow_btn, #sbi_load, .sb_instagram_header) {
	display: none !important;
}

/* In de preview staat er een raster van lege vakjes op de plek van de feed. */
.dp-footer__ig-voorbeeld {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}

.dp-footer__ig-voorbeeld span {
	aspect-ratio: 1;
	border-radius: var(--dp-radius-s);
	background: rgb(231 238 221 / 0.1);
}

.dp-footer__sociaal {
	display: flex;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dp-footer__sociaal a {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border: var(--dp-border) solid var(--dp-line-on-dark);
	border-radius: 50%;
	color: var(--dp-text-on-dark);
	transition:
		background-color var(--dp-transition),
		color var(--dp-transition),
		border-color var(--dp-transition);
}

.dp-footer__sociaal a:hover {
	border-color: var(--dp-lime);
	background: var(--dp-lime);
	color: var(--dp-forest);
}

.dp-footer__sociaal svg {
	width: 1.2rem;
	height: 1.2rem;
}

@media (width < 62rem) {
	.dp-footer--site .dp-footer__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dp-footer__insta {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   MOBIEL MENU — een volledig scherm
   Opent als een cirkel vanuit de menuknop; de onderdelen komen kort na elkaar
   omhoog in beeld. Bovenaan het aanbod (kopje + titel als knop, met een
   icoon in een gekleurd vierkantje zoals in de kaarten op de site), daaronder
   de rest van de site en onderaan de knop naar de templates.
   ========================================================================== */

.dp-nav__bar {
	position: relative;
	z-index: 2;
}

.dp-nav__mobiel.dp-mobielmenu {
	position: fixed;
	inset: 0;
	z-index: 1;
	overflow-y: auto;
	max-width: none;
	margin: 0;
	padding: 5.5rem var(--dp-gutter) 1.75rem;
	border: 0;
	border-radius: 0;
	background:
		radial-gradient(120% 55% at 100% 0%, rgb(230 255 86 / 0.35), transparent 65%),
		linear-gradient(180deg, var(--dp-moss) 0%, var(--dp-paper) 55%);
	box-shadow: none;
	backdrop-filter: none;
	visibility: hidden;
	clip-path: circle(0% at calc(100% - 2.8rem) 2.6rem);
	transition:
		clip-path 650ms var(--dp-ease),
		visibility 0s linear 650ms;
}

.dp-nav__mobiel.dp-mobielmenu[data-open] {
	visibility: visible;
	clip-path: circle(150% at calc(100% - 2.8rem) 2.6rem);
	transition:
		clip-path 650ms var(--dp-ease),
		visibility 0s;
}

html.dp-menu-open {
	overflow: hidden;
}

.dp-mobielmenu__binnen {
	display: grid;
	gap: 1.5rem;
	max-width: 30rem;
	margin-inline: auto;
}

/* Elk onderdeel komt na het vorige omhoog. */
.dp-mobielmenu [style*="--i"] {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 300ms var(--dp-ease),
		transform 300ms var(--dp-ease);
}

.dp-mobielmenu[data-open] [style*="--i"] {
	opacity: 1;
	transform: none;
	transition:
		opacity 450ms var(--dp-ease) calc(180ms + var(--i) * 55ms),
		transform 450ms var(--dp-ease) calc(180ms + var(--i) * 55ms);
}

/* Het aanbod. */
.dp-mobielmenu__aanbod {
	display: grid;
	gap: 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dp-mobielmenu__aanbod .dp-eyebrow {
	margin: 0 0 0.45rem 0.25rem;
	font-size: 0.7rem;
	color: var(--dp-link);
}

.dp-nav__mobiel.dp-mobielmenu .dp-mobielmenu__optie {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	padding: 0.7rem 1rem 0.7rem 0.7rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	box-shadow: var(--dp-shadow-s);
	color: var(--dp-text-strong);
	text-decoration: none;
	transition:
		border-color var(--dp-transition),
		box-shadow var(--dp-transition),
		transform var(--dp-transition);
}

.dp-nav__mobiel.dp-mobielmenu .dp-mobielmenu__optie:hover,
.dp-nav__mobiel.dp-mobielmenu .dp-mobielmenu__optie:focus-visible {
	border-color: var(--dp-line-strong);
	box-shadow: var(--dp-shadow-m);
}

.dp-nav__mobiel.dp-mobielmenu .dp-mobielmenu__optie:active {
	transform: scale(0.98);
}

.dp-nav__mobiel.dp-mobielmenu .dp-mobielmenu__optie[aria-current="page"] {
	border-color: var(--dp-line-strong);
}

.dp-mobielmenu__icoon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.9rem;
	height: 2.9rem;
	border-radius: var(--dp-radius-s);
	color: var(--dp-forest);
}

.dp-mobielmenu__icoon svg {
	width: 1.35rem;
	height: 1.35rem;
}

.dp-mobielmenu__icoon--blad {
	background: var(--dp-leaf-soft);
}

.dp-mobielmenu__icoon--perzik {
	background: var(--dp-peach-soft);
}

.dp-mobielmenu__icoon--lime {
	background: var(--dp-lime-soft);
}

.dp-mobielmenu__titel {
	flex: 1;
	font-family: var(--dp-font-display);
	font-size: 1.25rem;
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	letter-spacing: var(--dp-tracking-heading);
}

.dp-mobielmenu__pijl {
	display: grid;
	color: var(--dp-link);
	transition: transform var(--dp-transition);
}

.dp-mobielmenu__pijl svg {
	width: 1.1rem;
	height: 1.1rem;
}

.dp-nav__mobiel.dp-mobielmenu .dp-mobielmenu__optie:hover .dp-mobielmenu__pijl {
	transform: translateX(3px);
}

/* De rest van de site: rustige, grote links zonder kopje. */
.dp-mobielmenu__links {
	display: grid;
	margin: 0;
	margin-top: -0.5rem;
	padding: 0;
	list-style: none;
}

.dp-nav__mobiel.dp-mobielmenu .dp-mobielmenu__links a {
	display: block;
	padding: 0.65rem 0.25rem;
	border-top: 0;
	border-bottom: var(--dp-border) solid var(--dp-line);
	font-size: 1.1rem;
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-strong);
	text-decoration: none;
}

/* Onder de laatste link (Contact) geen streep meer. */
.dp-nav__mobiel.dp-mobielmenu .dp-mobielmenu__links li:last-child a {
	border-bottom: 0;
}

.dp-nav__mobiel.dp-mobielmenu .dp-mobielmenu__links a[aria-current="page"] {
	font-weight: var(--dp-weight-medium);
}

.dp-mobielmenu__voet {
	display: grid;
	gap: 1rem;
	justify-items: center;
}

.dp-nav__mobiel.dp-mobielmenu .dp-mobielmenu__login {
	padding: 0;
	border: 0;
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
	.dp-nav__mobiel.dp-mobielmenu,
	.dp-nav__mobiel.dp-mobielmenu[data-open],
	.dp-mobielmenu [style*="--i"],
	.dp-mobielmenu[data-open] [style*="--i"] {
		clip-path: none;
		transition: none;
	}
}

/* Trustbalk in de kop op een telefoon (home, over mij, zorgplan en de
   salespagina): alles op één rij. Drie gezichtjes, sterren dicht op elkaar
   en een kleinere tekst die op één regel naast de gezichtjes past. */
@media (width < 48rem) {
	:is(.dp-kop, .dp-hero--v2) .dp-trust {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 0.6rem;
	}

	:is(.dp-kop, .dp-hero--v2) .dp-trust__avatars img {
		width: 1.65rem;
		height: 1.65rem;
	}

	:is(.dp-kop, .dp-hero--v2) .dp-trust__avatars img + img {
		margin-inline-start: -0.55rem;
	}

	:is(.dp-kop, .dp-hero--v2) .dp-trust__avatars img:nth-child(n + 4) {
		display: none;
	}

	:is(.dp-kop, .dp-hero--v2) .dp-trust__tekst {
		gap: 0.15rem;
		justify-items: start;
		font-size: 0.8rem;
		line-height: 1.25;
		text-align: left;
	}

	:is(.dp-kop, .dp-hero--v2) .dp-stars {
		gap: 0.05em;
		font-size: 0.8rem;
	}

	/* Home: iets minder lucht boven de trustbalk. */
	.dp-kop .dp-trust--links {
		margin-top: 0.5rem;
	}
}

/* ==========================================================================
   WEBSITE LATEN MAKEN
   De meeste blokken zijn hergebruikt (de route, de beloftes, voor wie, de
   vragen). Hieronder alleen wat nieuw is: het venster dat zich in de kop
   opbouwt, de to-do met uitstel, de drie wegen, de mini-beeldjes van de
   route, de editor om te proberen, de werkbon en de aanvraag.
   ========================================================================== */

/* --- Kop: drie feitjes onder de knoppen ------------------------------------ */

.dp-kop__feitjes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.4rem;
	margin-top: var(--dp-space-xs);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text);
}

.dp-kop__feitjes li {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
}

.dp-kop__feitjes svg {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--dp-link);
}

/* --- Kop: het venster dat zich opbouwt --------------------------------------
   De verzonnen hondenschool is wit, met vanuit de bovenkant een hele zachte
   groene gloed (moss). Knoppen en tekst in het eigen donkergroen. */

.dp-kop__beeld--bouw {
	margin-block: 1rem 3rem;
}

.dp-bouw__site,
.dp-editor__site {
	--s-bg: radial-gradient(120% 90% at 50% 0%, #fff 0%, #fff 35%, var(--dp-moss) 100%);
	--s-inkt: var(--dp-forest);
	--s-accent: var(--dp-link);
	--s-zacht: var(--dp-leaf);
	--s-kaart: #fff;
}

.dp-bouw {
	position: relative;
	border-radius: var(--dp-radius-m);
	background: #fff;
	box-shadow: 0 40px 80px -40px rgb(18 43 7 / 0.55);
	rotate: 1deg;
}

.dp-bouw__balk {
	display: flex;
	gap: 0.3rem;
	align-items: center;
	padding: 0.6rem 0.8rem;
	border-bottom: 1px solid rgb(18 43 7 / 0.08);
}

.dp-bouw__balk span {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: rgb(18 43 7 / 0.2);
}

.dp-bouw__balk em {
	margin-inline-start: 0.6rem;
	padding: 0.15rem 0.8rem;
	border-radius: var(--dp-radius-pill);
	background: #f1f3ee;
	font-size: 0.75rem;
	font-style: normal;
	color: var(--dp-text-muted);
}

.dp-bouw__site {
	display: grid;
	gap: 1.7em;
	padding: 1.4em 1.6em 2.2em;
	border-radius: 0 0 var(--dp-radius-m) var(--dp-radius-m);
	background: var(--s-bg);
	font-size: clamp(10px, 0.35rem + 0.45vw, 13px);
	line-height: 1.4;
	color: var(--s-inkt);
	transition: background-color 600ms var(--dp-ease);
}

.dp-bouw__site p {
	max-width: none;
	margin: 0;
	color: inherit;
}

.dp-bouw__nav {
	display: flex;
	gap: 1.3em;
	align-items: center;
}

.dp-bouw__logo {
	margin-inline-end: auto;
	font-family: var(--dp-font-display);
	font-size: 1.3em;
	font-weight: var(--dp-weight-display);
}

.dp-bouw__links {
	display: flex;
	gap: 1.1em;
	font-size: 0.9em;
}

.dp-bouw__navknop span,
.dp-bouw__knop span {
	display: inline-block;
	padding: 0.5em 1.1em;
	border-radius: var(--dp-radius-pill);
	background: var(--s-accent);
	font-size: 0.85em;
	font-weight: var(--dp-weight-bold);
	color: var(--dp-paper);
}

.dp-bouw__held {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 1.5em;
	align-items: center;
}

.dp-bouw__heldtekst {
	display: grid;
	gap: 0.8em;
	justify-items: start;
}

.dp-bouw__site .dp-bouw__eyebrow {
	font-size: 0.72em;
	font-weight: var(--dp-weight-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--s-accent);
}

.dp-bouw__site .dp-bouw__titel {
	font-family: var(--dp-font-display);
	font-size: 2.1em;
	font-weight: var(--dp-weight-display);
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.dp-bouw__site .dp-bouw__tekst {
	font-size: 0.95em;
	line-height: 1.5;
}

.dp-bouw__site .dp-bouw__knop {
	margin-top: 0.3em;
}

.dp-bouw__site .dp-bouw__knop {
	position: relative;
}

.dp-bouw__knop span {
	padding: 0.75em 1.3em;
	background: var(--dp-peach);
	font-size: 0.9em;
	color: var(--dp-forest);
	transition:
		background-color 500ms var(--dp-ease),
		color 500ms var(--dp-ease);
}

/* Het feedbackbriefje: alleen zichtbaar tijdens de feedbackstap. */
.dp-bouw__pin {
	position: absolute;
	inset-block-start: -2.3em;
	inset-inline-start: 55%;
	padding: 0.4em 0.8em;
	border-radius: 0.8em 0.8em 0.8em 0.2em;
	background: var(--dp-forest);
	font-size: 0.8em;
	font-weight: var(--dp-weight-bold);
	white-space: nowrap;
	color: var(--dp-paper);
	box-shadow: var(--dp-shadow-m);
	opacity: 0;
	rotate: 3deg;
	transition:
		opacity 300ms var(--dp-ease),
		scale 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
	scale: 0.6;
	pointer-events: none;
}

.dp-bouw.is-bouwen:not(.is-af) .dp-bouw__pin.is-klaar {
	opacity: 1;
	scale: 1;
}

.dp-bouw.is-bouwen:not(.is-feedback) .dp-bouw__knop span {
	background: var(--s-inkt);
	color: var(--dp-paper);
}

.dp-bouw__foto {
	overflow: hidden;
	aspect-ratio: 1 / 1.1;
	border-radius: 1.2em 1.2em 4em 1.2em;
	background: var(--s-zacht);
}

.dp-bouw__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 700ms var(--dp-ease);
}

.dp-bouw__kaarten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.8em;
}

.dp-bouw__site .dp-bouw__kaarten p {
	display: flex;
	gap: 0.6em;
	align-items: center;
	padding: 0.9em;
	border-radius: 0.8em;
	background: var(--s-kaart);
	font-size: 0.9em;
	font-weight: var(--dp-weight-bold);
	transition: background-color 500ms var(--dp-ease);
}

.dp-bouw__kaarten i {
	flex: none;
	width: 1.9em;
	height: 1.9em;
	border-radius: 50%;
	background: var(--dp-peach);
	transition: background-color 500ms var(--dp-ease);
}

/* De labeltjes: wat ik op dat moment doe. */
.dp-bouw__label {
	position: absolute;
	display: inline-flex;
	gap: 0.4em;
	align-items: center;
	padding: 0.5em 1em;
	border-radius: var(--dp-radius-pill);
	background: var(--dp-forest);
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	white-space: nowrap;
	color: var(--dp-paper);
	box-shadow: var(--dp-shadow-m);
	transition:
		opacity 400ms var(--dp-ease),
		transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dp-bouw__label svg {
	width: 1.05em;
	height: 1.05em;
	color: var(--dp-leaf);
}

/* Ze hangen net buiten het venster, zodat ze geen tekst bedekken. */
.dp-bouw__label--1 { inset-block-start: -0.9rem; inset-inline-end: 2.5rem; }
.dp-bouw__label--2 { inset-block-start: 38%; inset-inline-start: -4.75rem; }
.dp-bouw__label--3 { inset-block-start: 50%; inset-inline-end: -2.25rem; }
.dp-bouw__label--4 { inset-block-start: 63%; inset-inline-end: -2.75rem; }

/* Onderaan het venster: Simone, en hoe ver ze is. Een gezicht erbij maakt
   duidelijk dat hier een mens aan het werk is. */
.dp-bouw__voortgang {
	position: absolute;
	inset-block-end: -1.4rem;
	inset-inline-end: 1.5rem;
	display: grid;
	grid-template-columns: 2.2rem minmax(0, 1fr);
	gap: 0.3rem 0.6rem;
	align-items: center;
	min-width: 14rem;
	padding: 0.55rem 0.9rem 0.6rem 0.6rem;
	border-radius: var(--dp-radius-s);
	background: #fff;
	box-shadow: var(--dp-shadow-m);
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

.dp-bouw__voortgang img {
	grid-row: span 2;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	object-fit: cover;
}

.dp-bouw__voortgang p {
	max-width: none;
	margin: 0;
	font-size: inherit;
	color: inherit;
}

.dp-bouw__voortgang i {
	display: block;
	height: 5px;
	overflow: hidden;
	border-radius: var(--dp-radius-pill);
	background: var(--dp-moss);
}

.dp-bouw__voortgang b {
	display: block;
	width: var(--dp-bouw-voortgang, 100%);
	height: 100%;
	border-radius: inherit;
	background: var(--dp-link);
	transition: width 800ms var(--dp-ease);
}

.dp-bouw__bezig {
	display: none;
}

.dp-bouw.is-bouwen:not(.is-af) .dp-bouw__bezig {
	display: block;
}

.dp-bouw.is-bouwen:not(.is-af) .dp-bouw__klaar {
	display: none;
}

.dp-bouw__opnieuw {
	display: block;
	margin: 3.25rem 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-link);
	text-decoration: underline;
	text-decoration-color: var(--dp-leaf);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
	cursor: pointer;
}

/* Verborgen houdt hij zijn plek, zodat er niets verspringt. */
.dp-bouw__opnieuw[hidden] {
	display: block;
	visibility: hidden;
}

/*
  Het wireframe. Alleen als het script draait (.is-bouwen): zonder script, of
  met "minder beweging", staat de site er meteen af. Een onderdeel dat nog
  niet klaar is, is een grijs blok; met .is-klaar komt het echte ontwerp.
*/
.dp-bouw.is-bouwen:not(.is-kleur) .dp-bouw__site {
	background: #fff;
}

.dp-bouw.is-bouwen .dp-bouw__site span {
	transition:
		color 500ms var(--dp-ease),
		background-color 500ms var(--dp-ease);
}

.dp-bouw.is-bouwen .dp-bouw__site [data-stap]:not(.is-klaar) span {
	border-radius: 0.3em;
	background: #e4e8de;
	color: transparent;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.dp-bouw.is-bouwen .dp-bouw__foto:not(.is-klaar) {
	background:
		linear-gradient(to top right, transparent calc(50% - 1px), #cfd6c5 50%, transparent calc(50% + 1px)),
		linear-gradient(to top left, transparent calc(50% - 1px), #cfd6c5 50%, transparent calc(50% + 1px)),
		#eef1ea;
}

.dp-bouw.is-bouwen .dp-bouw__foto:not(.is-klaar) img {
	opacity: 0;
}

.dp-bouw.is-bouwen .dp-bouw__kaarten:not(.is-klaar) p {
	background: #f3f5f0;
}

.dp-bouw.is-bouwen .dp-bouw__kaarten:not(.is-klaar) i {
	background: #e4e8de;
}

/* Voor de feedback: de bolletjes nog bladgroen. Na de feedback koraal, en
   de kaartjes stuiteren even. */
.dp-bouw.is-bouwen:not(.is-feedback) .dp-bouw__kaarten.is-klaar i {
	background: var(--s-zacht);
}

.dp-bouw.is-feedback .dp-bouw__kaarten p {
	animation: dp-bouw-plop 600ms var(--dp-ease-out) both;
}

.dp-bouw.is-feedback .dp-bouw__kaarten p:nth-child(2) { animation-delay: 120ms; }
.dp-bouw.is-feedback .dp-bouw__kaarten p:nth-child(3) { animation-delay: 240ms; }

.dp-bouw.is-bouwen .dp-bouw__label:not(.is-klaar) {
	opacity: 0;
	transform: translateY(10px) scale(0.85);
}

/* Een onderdeel dat net klaar is, ploft zacht op zijn plek. */
.dp-bouw.is-bouwen .dp-bouw__site .is-klaar {
	animation: dp-bouw-plop 600ms var(--dp-ease-out);
}

@keyframes dp-bouw-plop {
	from {
		transform: scale(0.97);
		filter: brightness(1.06);
	}
}

/* --- To-do met uitstel ------------------------------------------------------ */

.dp-uitstel {
	justify-self: center;
	width: min(100%, 25rem);
	padding: 1.5rem 1.75rem 1.25rem;
	border-radius: var(--dp-radius-m);
	background: #fbfbf6;
	color: var(--dp-forest);
	box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.8);
	rotate: -2deg;
}

.dp-uitstel .dp-uitstel__kop {
	max-width: none;
	margin-bottom: 0.4rem;
	font-family: var(--dp-font-hand);
	font-size: 2.2rem;
	line-height: 1.2;
	color: var(--dp-forest);
}

.dp-uitstel__lijst li {
	display: flex;
	gap: 0.7rem;
	align-items: center;
	padding: 0.7rem 0;
	border-top: 1px dashed rgb(18 43 7 / 0.18);
	color: var(--dp-forest);
}

.dp-uitstel__lijst svg {
	flex: none;
	width: 1.2rem;
	height: 1.2rem;
	color: var(--dp-link);
}

.dp-uitstel__lijst .is-gedaan span {
	color: var(--dp-text-muted);
	text-decoration: line-through;
	text-decoration-color: rgb(18 43 7 / 0.35);
}

.dp-uitstel__die i {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	border: 2px solid var(--dp-forest);
	border-radius: 4px;
}

.dp-uitstel__die > span {
	font-weight: var(--dp-weight-bold);
}

/* De datum die steeds verder opschuift. Zonder animatie zie je de laatste. */
.dp-uitstel__wanneer {
	display: grid;
	margin-inline-start: auto;
	font-style: normal;
}

.dp-uitstel__wanneer b {
	grid-area: 1 / 1;
	justify-self: end;
	padding: 0.2em 0.75em;
	border-radius: var(--dp-radius-pill);
	background: var(--dp-leaf-soft);
	font-size: var(--dp-size-xs);
	white-space: nowrap;
	opacity: 0;
}

.dp-uitstel__wanneer b:last-child {
	background: var(--dp-peach-soft);
	opacity: 1;
	rotate: -3deg;
}

@media (prefers-reduced-motion: no-preference) {
	.dp-uitstel.is-zichtbaar .dp-uitstel__wanneer b {
		animation: dp-uitstel-flits 1.2s var(--dp-ease) both;
	}

	.dp-uitstel.is-zichtbaar .dp-uitstel__wanneer b:nth-child(1) { animation-delay: 0.6s; }
	.dp-uitstel.is-zichtbaar .dp-uitstel__wanneer b:nth-child(2) { animation-delay: 1.8s; }
	.dp-uitstel.is-zichtbaar .dp-uitstel__wanneer b:nth-child(3) { animation-delay: 3s; }

	.dp-uitstel.is-zichtbaar .dp-uitstel__wanneer b:last-child {
		animation: dp-uitstel-blijf 0.7s 4.2s var(--dp-ease-out) both;
	}
}

@keyframes dp-uitstel-flits {
	0% { opacity: 0; transform: translateY(6px); }
	15%, 80% { opacity: 1; transform: none; }
	100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes dp-uitstel-blijf {
	from { opacity: 0; transform: translateY(6px) scale(0.8); }
	60% { transform: scale(1.12); }
	to { opacity: 1; transform: none; }
}

/* --- Drie wegen ------------------------------------------------------------- */

.dp-manieren__raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dp-space-m);
	align-items: center;
}

.dp-manier {
	display: grid;
	gap: 0.8rem;
	align-content: start;
	height: 100%;
	padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
}

/* Het nummer, net als bij de stappen. */
.dp-manier__nr {
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	margin-bottom: 0.2rem;
	border-radius: 50%;
	background: var(--dp-moss);
	font-family: var(--dp-font-display);
	font-weight: var(--dp-weight-display);
	color: var(--dp-forest);
}

/* Kaart 3: nummer en label samen in één pill, zodat het label geen extra
   hoogte kost. */
.dp-manier .dp-manier__top {
	display: inline-flex;
	gap: 0.55rem;
	align-items: center;
	justify-self: start;
	max-width: none;
	margin-bottom: 0.2rem;
	padding: 0.2rem 1rem 0.2rem 0.2rem;
	border: var(--dp-border) solid rgb(230 255 86 / 0.35);
	border-radius: var(--dp-radius-pill);
	background: rgb(230 255 86 / 0.1);
}

.dp-manier--deze .dp-manier__nr {
	width: 1.9rem;
	height: 1.9rem;
	margin-bottom: 0;
	background: var(--dp-lime);
}

.dp-manier .dp-manier__top .dp-manier__label {
	padding: 0;
	background: none;
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	letter-spacing: 0.04em;
	color: var(--dp-lime);
}

.dp-manier .dp-manier__naam {
	font-family: var(--dp-font-display);
	font-size: var(--dp-size-h4);
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: var(--dp-leading-heading);
	color: var(--dp-text-strong);
}

.dp-manier .dp-manier__voor {
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
}

.dp-manier__lijst {
	display: grid;
	gap: 0.65rem;
	margin: 0.4rem 0 0.6rem;
}

.dp-manier__lijst li {
	display: grid;
	grid-template-columns: 1.2rem minmax(0, 1fr);
	gap: 0.65rem;
	align-items: start;
	font-size: var(--dp-size-small);
	line-height: 1.45;
}

.dp-manier__lijst svg {
	width: 1.2rem;
	height: 1.2rem;
	margin-top: 0.05rem;
}

.dp-manier__lijst .is-plus svg {
	color: var(--dp-link);
}

.dp-manier__lijst .is-min {
	color: var(--dp-text-muted);
}

.dp-manier__lijst .is-min svg {
	color: rgb(18 43 7 / 0.35);
}

.dp-manier__link {
	display: inline-flex;
	gap: 0.4em;
	align-items: center;
	align-self: end;
	font-weight: var(--dp-weight-bold);
	color: var(--dp-link);
	text-decoration: underline;
	text-decoration-color: var(--dp-leaf);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.dp-manier__link svg {
	width: 1em;
	height: 1em;
}

/* De derde kaart: deze dienst. Donker, groter, met een lime gloedrand. Hij
   ploft in beeld net na de andere twee. Show, don't tell. */
.dp-manier--deze {
	position: relative;
	isolation: isolate;
	height: auto;
	padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
	border-color: transparent;
	background:
		radial-gradient(80% 50% at 50% 0%, rgb(230 255 86 / 0.14), transparent 70%),
		var(--dp-forest);
	color: var(--dp-text-on-dark);
	box-shadow:
		0 0 0 2px rgb(230 255 86 / 0.55),
		0 0 60px -12px rgb(230 255 86 / 0.45),
		0 40px 70px -30px rgb(18 43 7 / 0.6);
	scale: 1.05;
}

@media (prefers-reduced-motion: no-preference) {
	.dp-heeft-reveal .dp-manier--deze.is-zichtbaar {
		animation: dp-manier-plop 900ms 450ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
	}
}

@keyframes dp-manier-plop {
	from { scale: 0.92; }
	to { scale: 1.05; }
}

.dp-manier--deze .dp-manier__naam {
	color: var(--dp-paper);
}

.dp-manier--deze .dp-manier__voor,
.dp-manier--deze .dp-manier__lijst li {
	color: var(--dp-text-on-dark-muted);
}

.dp-manier--deze .dp-manier__lijst .is-plus svg {
	color: var(--dp-lime);
}

/* --- Wie je site maakt ------------------------------------------------------ */

/* Simone staat rechts in deze foto, dus de tekstkaart kan links (de gewone
   vorm van .dp-over). De foto is maar 1920 breed: daarom minder ver
   uitvergroot dan de andere. */
.dp-over--maken .dp-over__foto {
	inset-block: -8%;
	inset-inline: 0 -10%;
}

.dp-over--maken .dp-over__foto img {
	object-position: 60% 35%;
}

.dp-over__deze {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.5em 1em;
	border-radius: var(--dp-radius-pill);
	background: rgb(255 255 255 / 0.1);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-on-dark);
}

.dp-over__deze svg {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--dp-lime);
}

/* --- Zo werkt het ------------------------------------------------------------ */

/* Op het zorgplan volgt hierna een blok in dezelfde kleur, dus daar is de
   onderkant krap. Hier volgt de editor: dan de gewone sectieruimte. */
.dp-route-start--maken {
	padding-bottom: var(--dp-section-y);
}

/* --- De mini-beeldjes bij de route -----------------------------------------
   Net als op het zorgplan bewegen ze zodra de stap in beeld komt (onderaan). */

.dp-route-start--maken .dp-mini svg {
	flex: none;
	width: 0.9rem;
	height: 0.9rem;
}

.dp-mini .dp-mini__titel {
	margin-bottom: 0.5rem;
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

.dp-mini--plan {
	display: grid;
	justify-items: center;
}

.dp-mini__home {
	position: relative;
	padding: 0.3em 0.9em;
	border-radius: 6px;
	background: var(--dp-forest);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-paper);
}

/* Een wireframe-boompje: een lijntje omlaag uit Home, een dwarslijn, en
   vanuit die lijn een lijntje omlaag naar elke pagina. */
.dp-mini__home::after {
	content: "";
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: calc(50% - 1px);
	width: 2px;
	height: 0.5rem;
	background: var(--dp-leaf);
}

.dp-mini__takken {
	display: flex;
	gap: 0.4rem;
	margin-top: 1rem;
}

.dp-mini__takken span {
	position: relative;
	padding: 0.3em 0.55em;
	border-radius: 6px;
	background: var(--dp-leaf-soft);
	font-weight: var(--dp-weight-bold);
}

.dp-mini__takken span::before,
.dp-mini__takken span::after {
	content: "";
	position: absolute;
	background: var(--dp-leaf);
}

/* Het lijntje omhoog. */
.dp-mini__takken span::before {
	inset-block-end: 100%;
	inset-inline-start: calc(50% - 1px);
	width: 2px;
	height: 0.5rem;
}

/* De dwarslijn, in stukjes: elk kaartje tekent het stuk boven zich. */
.dp-mini__takken span::after {
	inset-block-start: calc(-0.5rem - 1px);
	inset-inline: -0.2rem;
	height: 2px;
}

.dp-mini__takken span:first-child::after {
	inset-inline-start: 50%;
}

.dp-mini__takken span:last-child::after {
	inset-inline-end: 50%;
}

.dp-mini--map ul {
	display: grid;
	gap: 0.4rem;
}

.dp-mini--map li {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.dp-mini--map i {
	flex: none;
	width: 0.9rem;
	height: 1.1rem;
	border-radius: 3px;
	background: var(--dp-peach-soft);
}

.dp-mini--map i.is-foto {
	background: var(--dp-leaf-soft);
}

.dp-mini--map i.is-logo {
	background: var(--dp-lime-soft);
}

.dp-mini--map b {
	margin-inline-start: auto;
	color: var(--dp-link);
}

.dp-mini--ontwerp {
	display: grid;
	gap: 0.55rem;
}

/* Een mini-ontwerp: menubalk, groot vlak, twee regels tekst. */
.dp-mini__pagina {
	position: relative;
	display: grid;
	gap: 0.3rem;
	padding: 0.45rem;
	border: 1px solid var(--dp-line);
	border-radius: 6px;
	background: var(--dp-paper);
}

.dp-mini__pagina i {
	display: block;
	border-radius: 3px;
	background: var(--dp-leaf-soft);
}

.dp-mini__pagina .dp-mini__balkje {
	height: 0.4rem;
	background: var(--dp-forest);
}

.dp-mini__pagina .dp-mini__vlak {
	height: 1.6rem;
	background: var(--dp-leaf);
}

.dp-mini__pagina .dp-mini__regeltje {
	height: 0.3rem;
}

.dp-mini__pagina .dp-mini__regeltje--kort {
	width: 60%;
}

/* De feedbackbriefjes die op het ontwerp geprikt zitten. */
.dp-mini__pin {
	position: absolute;
	inset-block-start: 0.9rem;
	inset-inline-end: -0.5rem;
	padding: 0.25em 0.6em;
	border-radius: 0.6em 0.6em 0.6em 0.15em;
	background: var(--dp-forest);
	font-size: 0.62rem;
	white-space: nowrap;
	color: var(--dp-paper);
	box-shadow: var(--dp-shadow-m);
	rotate: 3deg;
}

.dp-mini__pin--twee {
	inset-block-start: auto;
	inset-block-end: 0.15rem;
	inset-inline-start: -0.5rem;
	inset-inline-end: auto;
	background: var(--dp-link);
	rotate: -3deg;
}

.dp-mini--ontwerp .dp-mini__pagina {
	padding-block: 0.6rem 1.2rem;
}

.dp-mini .dp-mini__rondes {
	display: flex;
	gap: 0.3rem;
}

.dp-mini__rondes span {
	display: inline-flex;
	flex: 1;
	gap: 0.25rem;
	align-items: center;
	justify-content: center;
	padding: 0.3em 0.4em;
	border-radius: var(--dp-radius-pill);
	background: var(--dp-leaf-soft);
	font-size: 0.65rem;
	font-weight: var(--dp-weight-bold);
	color: var(--dp-forest);
}

.dp-mini__rondes svg {
	color: var(--dp-link);
}

.dp-mini--live {
	display: grid;
	gap: 0.3rem;
}

.dp-mini .dp-mini__url {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	padding: 0.3em 0.7em;
	border-radius: var(--dp-radius-pill);
	background: #f1f3ee;
	color: var(--dp-text-muted);
}

.dp-mini__url i {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #4caf50;
}

.dp-mini .dp-mini__lampje {
	margin: 0.25rem 0 0.1rem;
	font-family: var(--dp-font-display);
	font-size: 1.05rem;
	font-weight: var(--dp-weight-display);
	color: var(--dp-text-strong);
}

.dp-mini__regel {
	display: flex;
	gap: 0.35rem;
	align-items: center;
}

.dp-mini__regel svg {
	color: var(--dp-link);
}

/* --- De Pootjes-editor om te proberen --------------------------------------- */

.dp-editor {
	display: grid;
	grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
	gap: var(--dp-space-l);
	align-items: center;
	max-width: 70rem;
	margin-inline: auto;
}

.dp-editor__paneel {
	display: grid;
	gap: 1rem;
	padding: 1.5rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	box-shadow: var(--dp-shadow-l);
}

.dp-editor .dp-editor__merk {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	max-width: none;
	padding-bottom: 0.9rem;
	border-bottom: 1px dashed var(--dp-line-strong);
}

.dp-editor__merk img {
	width: auto;
	height: 1.7rem;
}

.dp-editor__merk span {
	margin-inline-start: auto;
	padding: 0.25em 0.75em;
	border-radius: var(--dp-radius-pill);
	background: var(--dp-lime-soft);
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-forest);
}

.dp-editor .dp-editor__pagina {
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
}

.dp-editor__veld {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

.dp-editor__veld :is(input[type="text"], textarea) {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: var(--dp-border) solid var(--dp-line-strong);
	border-radius: var(--dp-radius-s);
	background: var(--dp-paper);
	font: inherit;
	font-weight: var(--dp-weight-body);
	color: var(--dp-text);
	resize: vertical;
	transition:
		border-color var(--dp-transition),
		box-shadow var(--dp-transition);
}

.dp-editor__veld :is(input[type="text"], textarea):focus {
	border-color: var(--dp-link);
	box-shadow: 0 0 0 3px var(--dp-leaf-soft);
}

.dp-editor__fotos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.dp-editor__fotos legend {
	margin-bottom: 0.35rem;
	padding: 0;
}

.dp-editor__fotos label {
	position: relative;
	flex: 1;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--dp-radius-s);
	cursor: pointer;
	transition: box-shadow var(--dp-transition);
}

.dp-editor__fotos label:has(input:checked) {
	box-shadow: 0 0 0 3px var(--dp-forest);
}

.dp-editor__fotos label:has(input:focus-visible) {
	outline: var(--dp-focus-width) solid var(--dp-focus);
	outline-offset: 4px;
}

.dp-editor__fotos input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

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

.dp-editor .dp-editor__seintje {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	max-width: none;
	padding: 0.6em 0.9em;
	border-radius: var(--dp-radius-s);
	background: var(--dp-leaf-soft);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-forest);
}

.dp-editor .dp-editor__seintje[hidden] {
	display: none;
}

.dp-editor__seintje svg {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	color: var(--dp-link);
}

.dp-editor__seintje.is-nieuw {
	animation: dp-bouw-plop 500ms var(--dp-ease-out);
}

/* De pagina zelf: dezelfde verzonnen hondenschool als in de kop. */
.dp-editor__voorbeeld {
	position: relative;
	border-radius: var(--dp-radius-m);
	background: #fff;
	box-shadow: 0 40px 80px -40px rgb(18 43 7 / 0.5);
	rotate: 1deg;
}

.dp-editor__site {
	display: grid;
	gap: 2em;
	padding: 1.6em 1.8em 2.6em;
	border-radius: 0 0 var(--dp-radius-m) var(--dp-radius-m);
	background: var(--s-bg);
	font-size: clamp(11px, 0.4rem + 0.5vw, 14px);
	line-height: 1.4;
	color: var(--s-inkt);
}

.dp-editor__site p {
	max-width: none;
	margin: 0;
	color: inherit;
}

.dp-editor__site .dp-editor__nav {
	display: flex;
	gap: 1em;
	align-items: center;
	justify-content: space-between;
	font-size: 0.9em;
}

.dp-editor__nav b {
	font-family: var(--dp-font-display);
	font-size: 1.35em;
	font-weight: var(--dp-weight-display);
}

.dp-editor__held {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 1.6em;
	align-items: center;
}

.dp-editor__heldtekst {
	display: grid;
	gap: 0.9em;
	justify-items: start;
}

.dp-editor__site .dp-editor__eyebrow {
	font-size: 0.72em;
	font-weight: var(--dp-weight-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--s-accent);
}

.dp-editor__site .dp-editor__titel {
	font-family: var(--dp-font-display);
	font-size: 2.3em;
	font-weight: var(--dp-weight-display);
	line-height: 1.08;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
}

.dp-editor__site .dp-editor__tekst {
	font-size: 1em;
	line-height: 1.5;
	overflow-wrap: break-word;
}

.dp-editor__site .dp-editor__knop {
	padding: 0.75em 1.3em;
	border-radius: var(--dp-radius-pill);
	background: var(--s-inkt);
	font-size: 0.9em;
	font-weight: var(--dp-weight-bold);
	color: var(--dp-paper);
}

.dp-editor__foto {
	overflow: hidden;
	aspect-ratio: 1 / 1.1;
	border-radius: 1.2em 1.2em 4em 1.2em;
	background: var(--s-zacht);
}

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

/* Wat je kunt aanpassen: een stippellijn bij hover, een potloodje erbij. */
[data-dp-editor-doel] {
	position: relative;
	outline: 2px dashed transparent;
	outline-offset: 5px;
	cursor: pointer;
	transition:
		outline-color var(--dp-transition),
		background-color 900ms var(--dp-ease);
}

[data-dp-editor-doel]::after {
	content: "✎";
	position: absolute;
	inset-block-start: -0.9em;
	inset-inline-end: -0.9em;
	display: grid;
	place-items: center;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	background: var(--dp-forest);
	font-family: var(--dp-font-body);
	font-size: 0.75rem;
	font-weight: var(--dp-weight-body);
	letter-spacing: 0;
	text-transform: none;
	color: var(--dp-paper);
	opacity: 0;
	transform: scale(0.6);
	transition:
		opacity var(--dp-transition),
		transform var(--dp-transition);
	pointer-events: none;
}

.dp-editor__foto[data-dp-editor-doel] {
	overflow: visible;
}

.dp-editor__foto[data-dp-editor-doel] img {
	border-radius: inherit;
}

.dp-editor__foto[data-dp-editor-doel]::after {
	inset-block-start: 0.6em;
	inset-inline-end: 0.6em;
}

[data-dp-editor-doel]:hover,
[data-dp-editor-doel].is-actief {
	outline-color: rgb(67 112 31 / 0.75);
}

[data-dp-editor-doel]:hover::after,
[data-dp-editor-doel].is-actief::after {
	opacity: 1;
	transform: none;
}

[data-dp-editor-doel].is-gewijzigd {
	animation: dp-editor-flits 900ms var(--dp-ease);
}

@keyframes dp-editor-flits {
	from {
		background-color: var(--dp-lime-soft);
	}
}

.dp-editor .dp-editor__hint {
	position: absolute;
	inset-block-end: -1rem;
	inset-inline-end: 1.5rem;
	max-width: none;
	padding: 0.45em 1em;
	border-radius: var(--dp-radius-pill);
	background: var(--dp-forest);
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-paper);
	box-shadow: var(--dp-shadow-m);
	rotate: -2deg;
}

.dp-editor-sectie .dp-editor__noot {
	max-width: none;
	margin: var(--dp-space-l) auto 0;
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
	text-align: center;
}

/* --- Kassabon en prijs -----------------------------------------------------
   De printer en de bon zelf komen uit salespagina.css; hier alleen wat op
   deze bon anders is: vinkjes in plaats van bedragen. */

.dp-investering__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--dp-space-l);
	align-items: center;
	max-width: 68rem;
	margin-inline: auto;
}

.dp-kassa--maken {
	justify-self: center;
}

/* Pilotactie: een aankondiging boven de titel, en in de kassa de normale
   prijs doorgestreept boven de pilotprijs (zoals op de templatespagina). */
.dp-kop__pilot {
	display: inline-flex;
	gap: 0.6rem;
	align-items: center;
	margin-bottom: var(--dp-space-s);
	padding: 0.3rem 1rem 0.3rem 0.3rem;
	border: var(--dp-border) solid var(--dp-pil-rand);
	border-radius: var(--dp-radius-pill);
	background: var(--dp-shell);
	color: var(--dp-forest);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	text-decoration: none;
	transition: border-color var(--dp-transition);
}

.dp-kop__pilot:hover {
	border-color: var(--dp-line-strong);
}

.dp-kop__pilot .dp-bubble {
	padding: 0.3em 0.8em;
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
}

.dp-kassa--maken .dp-kassa__pilot {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	max-width: none;
	margin: 0.25rem auto 0.75rem;
	font-size: var(--dp-size-small);
	color: var(--dp-text-on-dark-muted);
}

.dp-kassa--maken .dp-kassa__pilot .dp-bubble {
	border-color: transparent;
	font-weight: var(--dp-weight-bold);
}

/* Drie bolletjes: hoeveel pilotplekken er al vergeven zijn (is-bezet). */
.dp-plekken {
	display: inline-flex;
	gap: 0.25rem;
	align-items: center;
}

.dp-plekken i {
	width: 0.6rem;
	height: 0.6rem;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}

.dp-plekken i.is-bezet {
	background: currentColor;
}

.dp-kop__pilot .dp-plekken {
	color: var(--dp-link);
}

.dp-kassa--maken .dp-plekken {
	color: var(--dp-leaf);
}

/* Onder het label: tekst en bolletjes op één regel. */
.dp-kassa__plekken {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	white-space: nowrap;
}

/* Op een telefoon past de aankondiging bovenaan niet op één regel: de
   bolletjes en "van de 3" staan al in de kassa, dus hier laten we ze weg. */
@media (width < 30rem) {
	.dp-kop__pilot {
		gap: 0.45rem;
		font-size: var(--dp-size-xs);
	}

	.dp-kop__pilot .dp-plekken,
	.dp-kop__pilot-extra {
		display: none;
	}
}

.dp-kassa--maken .dp-kassa__was {
	max-width: none;
	margin: 0 auto 0.25rem;
	font-family: var(--dp-font-display);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	line-height: 1;
	color: var(--dp-text-on-dark-muted);
}

.dp-kassa--maken .dp-kassa__was s {
	text-decoration-thickness: 2px;
}

/* Op de bon: de normale prijs klein en doorgestreept, zonder eigen lijn
   eronder; de pilotprijs is het echte totaal. */
.dp-bon--maken .dp-bon__totaal--was {
	padding-bottom: 0;
	border-bottom: 0;
	color: var(--dp-text-muted);
}

.dp-bon--maken .dp-bon__totaal--was .dp-bon__totaal-bedrag {
	font-size: 1.15rem;
	color: var(--dp-text-muted);
}

.dp-bon--maken .dp-bon__bedrag svg {
	width: 1.15rem;
	height: 1.15rem;
	color: var(--dp-link);
	stroke-width: 2.2;
}

.dp-bon--maken .dp-bon__regel--bonus small {
	flex-basis: 100%;
}

.dp-bon--maken .dp-bon__totaal-bedrag small {
	font-family: var(--dp-font-body);
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-muted);
}

.dp-kassa__termijnen {
	display: flex;
	gap: 0.6rem;
	justify-content: center;
	margin-top: 0.5rem;
}

.dp-kassa__termijnen li {
	display: grid;
	gap: 0.1rem;
	min-width: 8rem;
	padding: 0.6em 1em;
	border: var(--dp-border) solid var(--dp-line-on-dark);
	border-radius: var(--dp-radius-m);
	background: rgb(255 255 255 / 0.05);
}

.dp-kassa__termijnen b {
	font-family: var(--dp-font-display);
	font-size: 1.5rem;
	font-weight: var(--dp-weight-display);
	color: var(--dp-paper);
}

.dp-kassa__termijnen span {
	font-size: var(--dp-size-xs);
	color: var(--dp-text-on-dark-muted);
}

.dp-kassa .dp-kassa__meer {
	max-width: none;
	margin: 0 auto 0.4rem;
	font-size: var(--dp-size-small);
	color: var(--dp-text-on-dark-muted);
}

/* "Goed om te weten" op donker: dezelfde vinkjes-regels als op het zorgplan,
   maar dan met lichte tekst. */
.dp-kleintjes--op-donker .dp-kleintjes__kop {
	color: var(--dp-text-on-dark-muted);
}

.dp-kleintjes.dp-kleintjes--op-donker .dp-kleintjes__lijst {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	max-width: 64rem;
}

.dp-kleintjes.dp-kleintjes--op-donker .dp-kleintjes__lijst li {
	padding: 0.45em 1em;
	border: var(--dp-border) solid var(--dp-line-on-dark);
	border-radius: var(--dp-radius-pill);
	background: rgb(255 255 255 / 0.05);
	color: var(--dp-text-on-dark);
}

.dp-kleintjes--op-donker .dp-kleintjes__lijst svg {
	color: var(--dp-lime);
}

/* --- De aanvraag ------------------------------------------------------------ */

.dp-aanvraag__daarna {
	display: grid;
	gap: 1rem;
	margin-block: 0.5rem 0;
}

.dp-aanvraag__daarna li {
	display: grid;
	grid-template-columns: 2.3rem minmax(0, 1fr);
	gap: 0.85rem;
	align-items: start;
}

.dp-aanvraag__daarna b {
	display: grid;
	place-items: center;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 50%;
	background: var(--dp-leaf);
	font-family: var(--dp-font-display);
	font-weight: var(--dp-weight-display);
	color: var(--dp-forest);
}

.dp-aanvraag__daarna span {
	display: grid;
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
}

.dp-aanvraag__daarna strong {
	font-size: var(--dp-size-body);
	color: var(--dp-text-strong);
}

/* --- Smallere schermen (de echte mobiele ronde volgt na akkoord) ------------ */

@media (width < 62rem) {
	.dp-manieren__raster,
	.dp-investering__raster,
	.dp-editor {
		grid-template-columns: minmax(0, 1fr);
		max-width: 34rem;
		margin-inline: auto;
	}

	.dp-editor__voorbeeld {
		order: -1;
	}
}

/* --- De mini-beeldjes laten bewegen ------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	/* 1. Het paginaplan: eerst Home, dan verschijnt de lijn en komen de
	   pagina's eronder een voor een. */
	.dp-mini__takken {
		transition: border-color 600ms var(--dp-ease) 500ms;
	}

	.dp-mini__takken span {
		transition:
			opacity 400ms var(--dp-ease),
			translate 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.dp-mini__takken span:nth-child(1) { transition-delay: 800ms; }
	.dp-mini__takken span:nth-child(2) { transition-delay: 1000ms; }
	.dp-mini__takken span:nth-child(3) { transition-delay: 1200ms; }

	.dp-heeft-reveal .dp-halte:not(.is-zichtbaar) .dp-mini__takken {
		border-color: transparent;
	}

	.dp-heeft-reveal .dp-halte:not(.is-zichtbaar) .dp-mini__takken span {
		opacity: 0;
		translate: 0 -0.4rem;
	}

	/* 2. De map: de bestanden komen binnen, dan gaan de vinkjes aan. */
	.dp-mini--map li,
	.dp-mini--map b {
		transition:
			opacity 400ms var(--dp-ease),
			translate 500ms var(--dp-ease-out),
			scale 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.dp-mini--map li:nth-child(1) { transition-delay: 500ms; }
	.dp-mini--map li:nth-child(2) { transition-delay: 750ms; }
	.dp-mini--map li:nth-child(3) { transition-delay: 1000ms; }
	.dp-mini--map li:nth-child(1) b { transition-delay: 1400ms; }
	.dp-mini--map li:nth-child(2) b { transition-delay: 1600ms; }
	.dp-mini--map li:nth-child(3) b { transition-delay: 1800ms; }

	.dp-heeft-reveal .dp-halte:not(.is-zichtbaar) .dp-mini--map li {
		opacity: 0;
		translate: -0.6rem 0;
	}

	.dp-heeft-reveal .dp-halte:not(.is-zichtbaar) .dp-mini--map b {
		opacity: 0;
		scale: 0.4;
	}

	/* 3. Het ontwerp: het briefje wordt erop geprikt, daarna vinken de twee
	   feedbackrondes af. */
	.dp-mini__pin,
	.dp-mini__rondes span {
		transition:
			opacity 400ms var(--dp-ease),
			translate 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
			scale 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.dp-mini__pin { transition-delay: 600ms; }
	.dp-mini__pin--twee { transition-delay: 1100ms; }

	.dp-heeft-reveal .dp-halte:not(.is-zichtbaar) .dp-mini__pin {
		opacity: 0;
		scale: 0.5;
		translate: 0.5rem -0.5rem;
	}

	.dp-heeft-reveal .dp-halte:not(.is-zichtbaar) .dp-mini__rondes span {
		opacity: 0;
		translate: 0 0.5rem;
	}

	/* 4. Live: het groene lampje knippert zacht, de regels vinken aan. */
	.dp-mini__url i {
		animation: dp-mini-live 1.8s ease-in-out infinite;
	}

	.dp-mini__lampje,
	.dp-mini__regel {
		transition:
			opacity 400ms var(--dp-ease),
			scale 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.dp-mini__lampje { transition-delay: 500ms; }
	.dp-mini--live .dp-mini__regel:nth-of-type(3) { transition-delay: 1000ms; }
	.dp-mini--live .dp-mini__regel:nth-of-type(4) { transition-delay: 1250ms; }

	.dp-heeft-reveal .dp-halte:not(.is-zichtbaar) .dp-mini__lampje,
	.dp-heeft-reveal .dp-halte:not(.is-zichtbaar) .dp-mini__regel {
		opacity: 0;
		scale: 0.8;
	}
}

@keyframes dp-mini-live {
	0%, 100% { box-shadow: 0 0 0 0 rgb(76 175 80 / 0.5); }
	50% { box-shadow: 0 0 0 0.35rem rgb(76 175 80 / 0); }
}

/* --- "Wanneer wil je live?" ---------------------------------------------------
   Het eerste antwoord is een grapje. Kies je "Gisteren", dan verschijnt er
   een bubbel met een knipoog (en een eerlijk antwoord). */

.dp-formulier__planning {
	position: relative;
}

.dp-gisteren__bubbel {
	display: none;
	flex-basis: 100%;
	max-width: 26rem;
	margin: 0.35rem 0 0;
	padding: 0.7rem 0.95rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: 0.35rem 1.4rem 1.4rem 1.4rem;
	background: #fff;
	font-size: var(--dp-size-small);
	line-height: 1.45;
	color: var(--dp-text);
}

.dp-gisteren__bubbel b {
	color: var(--dp-text-strong);
}

.dp-formulier__planning:has(.dp-gisteren input:checked) .dp-gisteren__bubbel {
	display: block;
}

@media (prefers-reduced-motion: no-preference) {
	.dp-formulier__planning:has(.dp-gisteren input:checked) .dp-gisteren__bubbel {
		animation: dp-bouw-plop 450ms var(--dp-ease-out);
	}
}

/* --- Website laten maken op een telefoon -------------------------------------- */

@media (width < 48rem) {
	/* Kop: het venster minder lucht eronder, en de labeltjes binnen het
	   scherm (net over de rand van het venster in plaats van ernaast). */
	.dp-kop__beeld--bouw {
		margin-bottom: 0.5rem;
	}

	.dp-bouw__opnieuw {
		margin-top: 2.5rem;
	}

	.dp-bouw__label--2 { inset-inline-start: -0.6rem; }
	.dp-bouw__label--3,
	.dp-bouw__label--4 { inset-inline-end: -0.6rem; }

	/* Drie manieren: de derde kaart even breed als de andere. */
	.dp-manier--deze {
		scale: 1;
	}

	@media (prefers-reduced-motion: no-preference) {
		.dp-heeft-reveal .dp-manier--deze.is-zichtbaar {
			animation-name: dp-manier-plop-mobiel;
		}
	}

	/* Editor: de kop van de voorbeeldsite iets kleiner, zodat hij niet
	   midden in een woord afbreekt. */
	.dp-editor__site .dp-editor__titel {
		font-size: 1.75em;
	}

	/* Goed om te weten: onder elkaar. */
	.dp-kleintjes.dp-kleintjes--op-donker .dp-kleintjes__lijst {
		display: grid;
	}

	.dp-kleintjes.dp-kleintjes--op-donker .dp-kleintjes__lijst li {
		border-radius: var(--dp-radius-m);
	}
}

@keyframes dp-manier-plop-mobiel {
	from { scale: 0.95; }
	to { scale: 1; }
}

/* ==========================================================================
   MENU: HET AANBOD-PANEEL (desktop)
   "Aanbod" in de balk opent een smal paneel dat er precies zo uitziet als het
   aanbod in het mobiele menu: dezelfde achtergrond, per optie een kopje en
   een wit blokje met icoon, titel en pijl, onder elkaar. site.js zet .is-open.
   ========================================================================== */

.dp-nav__sub {
	position: relative;
}

.dp-nav__subknop {
	display: inline-flex;
	gap: 0.3rem;
	align-items: center;
	padding: 0.5rem 0.75rem;
	border: 0;
	border-radius: var(--dp-radius-pill);
	background: none;
	font: inherit;
	font-size: 0.92rem;
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-strong);
	cursor: pointer;
	transition: background-color var(--dp-transition);
}

.dp-nav__subknop:hover,
.dp-nav__sub.is-open .dp-nav__subknop {
	background: rgb(18 43 7 / 0.07);
}

.dp-nav__subknop svg {
	width: 0.95rem;
	height: 0.95rem;
	transition: rotate var(--dp-transition);
}

.dp-nav__sub.is-open .dp-nav__subknop svg {
	rotate: 180deg;
}

.dp-aanbodmenu {
	position: absolute;
	z-index: 3;
	inset-block-start: calc(100% + 1.1rem);
	inset-inline-start: 50%;
	width: 23.5rem;
	padding: 0.8rem;
	border: var(--dp-border) solid rgb(255 255 255 / 0.8);
	border-radius: var(--dp-radius-l);
	background:
		radial-gradient(120% 60% at 100% 0%, rgb(230 255 86 / 0.35), transparent 65%),
		linear-gradient(180deg, var(--dp-moss) 0%, var(--dp-paper) 70%);
	box-shadow: 0 30px 60px -25px rgb(18 43 7 / 0.45);
	opacity: 0;
	visibility: hidden;
	translate: -50% 0.5rem;
	transition:
		opacity 200ms var(--dp-ease),
		translate 250ms var(--dp-ease-out),
		visibility 0s 250ms;
}

/* Een onzichtbaar bruggetje over de ruimte tussen balk en paneel, zodat het
   paneel niet dichtgaat als je er met de muis naartoe gaat. */
.dp-aanbodmenu::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 100%;
	height: 1.4rem;
}

.dp-nav__sub.is-open .dp-aanbodmenu {
	opacity: 1;
	visibility: visible;
	translate: -50% 0;
	transition:
		opacity 200ms var(--dp-ease),
		translate 250ms var(--dp-ease-out);
}

/* Dezelfde opbouw als .dp-mobielmenu__aanbod. */
.dp-nav__menu .dp-aanbodmenu__lijst {
	display: grid;
	gap: 0.6rem;
}

.dp-aanbodmenu .dp-eyebrow {
	margin: 0 0 0.45rem 0.25rem;
	font-size: 0.7rem;
	color: var(--dp-link);
}

/* Het blokje: een kopie van de optie in het mobiele menu. De extra klassen
   zijn nodig om de gewone menulinks (.dp-nav__menu a) te overstemmen. */
.dp-nav__menu .dp-aanbodmenu .dp-mobielmenu__optie {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	padding: 0.7rem 1rem 0.7rem 0.7rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	box-shadow: var(--dp-shadow-s);
	font-size: inherit;
	white-space: normal;
	color: var(--dp-text-strong);
	transition:
		border-color var(--dp-transition),
		box-shadow var(--dp-transition),
		transform var(--dp-transition);
}

.dp-nav__menu .dp-aanbodmenu .dp-mobielmenu__optie:hover,
.dp-nav__menu .dp-aanbodmenu .dp-mobielmenu__optie:focus-visible,
.dp-nav__menu .dp-aanbodmenu .dp-mobielmenu__optie[aria-current="page"] {
	border-color: var(--dp-line-strong);
	background: #fff;
}

.dp-nav__menu .dp-aanbodmenu .dp-mobielmenu__optie:hover,
.dp-nav__menu .dp-aanbodmenu .dp-mobielmenu__optie:focus-visible {
	box-shadow: var(--dp-shadow-m);
}

.dp-nav__menu .dp-aanbodmenu .dp-mobielmenu__optie:active {
	transform: scale(0.98);
}

.dp-aanbodmenu .dp-mobielmenu__optie:hover .dp-mobielmenu__pijl {
	transform: translateX(3px);
}


/* Menu (desktop): onder elke titel een kort zinnetje wat het is. */
.dp-aanbodmenu__tekst {
	display: grid;
	flex: 1;
	gap: 0;
}

.dp-aanbodmenu__tekst .dp-mobielmenu__titel {
	font-size: 1.15rem;
	line-height: 1.15;
}

.dp-aanbodmenu__zin {
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-body);
	line-height: 1.35;
	color: var(--dp-text-muted);
}


/* ==========================================================================
   DIGITAL PAWS — toevoegingen voor de Engelse site
   ========================================================================== */

/* De andere twee pakketten onder de kassabon: tussenkop met lucht erboven,
   en de prijs als eigen regel onder de titel van de tegel. */
.dp-investering__meer {
	margin-top: var(--dp-space-xl);
	margin-bottom: var(--dp-space-m);
}

.dp-tegel__prijs {
	font-family: var(--dp-font-display);
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
	line-height: 1;
	color: var(--dp-forest);
}

.dp-tegel__prijs small {
	font-family: var(--dp-font-body);
	font-size: 0.95rem;
	font-weight: 500;
	opacity: 0.75;
}

.dp-section--dark .dp-tegel__prijs {
	color: var(--dp-leaf);
}

/* Onder de reviewmuur: eerlijk zeggen dat ze vertaald zijn. */
.dp-reviews__noot {
	margin-top: var(--dp-space-m);
	font-size: 0.9rem;
	text-align: center;
	color: var(--dp-text-muted);
}

/* Home, "What I do": één brede kaart in plaats van drie. Foto links, inhoud
   rechts; op smalle schermen onder elkaar. Zelfde hover als de luiken. */
.dp-luik--breed {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	max-width: 68rem;
	margin-inline: auto;
	padding: 0.75rem clamp(1.5rem, 1rem + 2vw, 3rem) 0.75rem 0.75rem;
}

.dp-luik--breed > :not(.dp-luik__beeld) {
	margin-inline: 0;
}

.dp-luik--breed .dp-luik__beeld {
	aspect-ratio: 4 / 3;
	margin-bottom: 0;
}

.dp-luik__inhoud {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
	padding-block: 1rem;
}

.dp-luik__inhoud .dp-tegel__titel {
	font-family: var(--dp-font-display);
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
	line-height: 1.1;
}

.dp-luik__inhoud .dp-checklist > span {
	display: grid;
	grid-template-columns: 1.15em 1fr;
	gap: 0.7em;
	align-items: start;
}

@media (width < 48rem) {
	.dp-luik--breed {
		grid-template-columns: minmax(0, 1fr);
		padding: 0.75rem 0.75rem 1.5rem;
	}

	.dp-luik--breed .dp-luik__inhoud {
		padding-inline: 0.75rem;
	}
}

/* Prijzen: twee tegels (one-pager en uitbreidingen) in plaats van drie. */
.dp-route__raster--twee {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 56rem;
	margin-inline: auto;
}

@media (width < 62rem) {
	.dp-route__raster--twee {
		grid-template-columns: minmax(0, 1fr);
	}
}

.dp-investering__meer .dp-lead {
	max-width: 44rem;
	margin-inline: auto;
}

.dp-section--dark .dp-investering__meer .dp-lead {
	color: var(--dp-text-on-dark-muted);
}

/* Een lijstje in een tegel, met plusjes. */
.dp-tegel__lijst {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dp-tegel__lijst li {
	display: grid;
	grid-template-columns: 1.1em 1fr;
	gap: 0.6em;
	align-items: start;
}

.dp-tegel__lijst svg {
	width: 1.1em;
	height: 1.1em;
	margin-top: 0.2em;
	stroke-width: 2.2;
	color: var(--dp-forest);
}

.dp-section--dark .dp-tegel__lijst {
	color: var(--dp-text-on-dark-muted);
}

.dp-section--dark .dp-tegel__lijst svg {
	color: var(--dp-leaf);
}

/* Home, bewijsblok: de waaier begon pas zo'n 230px onder de inleiding (de
   pagina's staan laag in hun vak). Optisch strakker onder de tekst. */
.dp-promo .dp-onthul {
	margin-top: -7.5rem;
}

/* De regel onder de reviews: midden onder de muur (hij heeft een maximale
   breedte, dus text-align alleen is niet genoeg). */
.dp-reviews__noot {
	margin-inline: auto;
}