/*
  SALESPAGINA — de opmaak van de secties op deze ene pagina.

  Wat op meerdere pagina's terugkomt hoort niet hier maar in components.css.
  Deze secties zijn stuk voor stuk eenmalig, dus ze staan bewust apart en
  worden alleen op deze pagina ingeladen.
*/

/* ==========================================================================
   NAVIGATIE
   Een pil van wit glas die over de pagina zweeft. Glas in plaats van een
   dicht vlak, zodat de pagina er zacht doorheen schemert. Hij blijft leesbaar
   boven donkere secties doordat het glas voor driekwart wit is.
   ========================================================================== */

.dp-nav {
	position: fixed;
	inset-block-start: clamp(0.6rem, 0.3rem + 0.9vw, 1rem);
	inset-inline: 0;
	z-index: 100;
	padding-inline: var(--dp-gutter);
}

.dp-nav__bar {
	display: flex;
	align-items: center;
	gap: var(--dp-space-m);
	/* Zo breed als de inhoud: een compacte pil in het midden, geen balk. */
	width: max-content;
	max-width: var(--dp-container-wide);
	min-height: 3.6rem;
	margin-inline: auto;
	padding: 0.4rem 0.4rem 0.4rem 1.3rem;
	border: var(--dp-border) solid rgb(255 255 255 / 0.7);
	border-radius: var(--dp-radius-pill);
	background: rgb(255 255 255 / 0.72);
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	box-shadow:
		0 1px 0 rgb(255 255 255 / 0.8) inset,
		0 14px 34px -16px rgb(18 43 7 / 0.35);
}

.dp-nav__logo {
	display: flex;
	flex: none;
	align-items: center;
}

.dp-nav__logo img {
	width: auto;
	height: 2.1rem;
}

/* De knop sluit aan op het menu, met dezelfde ruimte als tussen de
   menu-items onderling (de balk zet zelf een grotere tussenruimte). */
.dp-nav__menu {
	margin-inline: 0.5rem calc(0.25rem - var(--dp-space-m));
}

.dp-nav__menu ul {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

/* Bij hover een zacht vlakje achter het woord, geen streep eronder. */
.dp-nav__menu a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: var(--dp-radius-pill);
	color: var(--dp-text-strong);
	font-size: 0.92rem;
	font-weight: var(--dp-weight-medium);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--dp-transition);
}

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

/* De knop in de balk: rustiger dan de knoppen op de pagina. Geen harde
   schaduwrand, iets kleiner. */
.dp-nav__cta.dp-btn {
	flex: none;
	padding: 0.6em 1.05em;
	font-size: 0.85rem;
	box-shadow: none;
}

.dp-nav__cta.dp-btn:hover {
	box-shadow: none;
	transform: none;
	filter: brightness(0.97);
}

.dp-nav__toggle {
	display: none;
	flex: none;
	/* 46px en een blokje van 10px hoog: de streepjes vallen precies op hele
	   pixels, anders leek de ene dikker dan de andere. */
	width: 2.875rem;
	height: 2.875rem;
	padding: 0;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: 50%;
	background: transparent;
	color: var(--dp-forest);
	cursor: pointer;
}

.dp-nav__toggle-lijnen {
	display: grid;
	gap: 6px;
	justify-items: center;
}

.dp-nav__toggle-lijnen span {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentcolor;
	transition: transform var(--dp-transition);
}

.dp-nav__toggle[aria-expanded="true"] .dp-nav__toggle-lijnen span:first-child {
	transform: translateY(4px) rotate(45deg);
}

.dp-nav__toggle[aria-expanded="true"] .dp-nav__toggle-lijnen span:last-child {
	transform: translateY(-4px) rotate(-45deg);
}

.dp-nav__mobiel {
	max-width: var(--dp-container-wide);
	margin: 0.5rem auto 0;
	padding: var(--dp-space-s);
	border: var(--dp-border) solid rgb(255 255 255 / 0.7);
	border-radius: var(--dp-radius-l);
	background: rgb(255 255 255 / 0.92);
	backdrop-filter: blur(16px);
	box-shadow: var(--dp-shadow-l);
}

.dp-nav__mobiel ul {
	display: grid;
	margin-bottom: var(--dp-space-s);
}

.dp-nav__mobiel a {
	display: block;
	padding: 0.7rem 0.4rem;
	color: var(--dp-text-strong);
	text-decoration: none;
}

.dp-nav__mobiel li + li a {
	border-top: var(--dp-border) solid var(--dp-line);
}

@media (width < 62rem) {
	.dp-nav__menu,
	.dp-nav__cta {
		display: none;
	}

	.dp-nav__bar {
		width: auto;
		justify-content: space-between;
		padding-inline: 1.2rem 0.5rem;
	}

	.dp-nav__toggle {
		display: grid;
		place-items: center;
	}
}

@media (width >= 62rem) {
	.dp-nav__mobiel {
		display: none;
	}
}

/* ==========================================================================
   HERO

   De maatvoering komt uit Simones eigen voorbeeld (digitalepootjes.nl/
   ffws-hero-voorbeeld/), opgemeten op 1440px breed:

     handschrift  42px
     kop          52px, regelafstand 1.0, over 880px breed, vier regels
     inleiding    18px / 27px, over 912px breed, drie regels
     knop         18px, 18px/26px binnenruimte, één knop
     laptop       575px breed
     klantscherm  449px breed, 3:2

   De verticale tussenruimtes zijn krapper dan bij haar: zo staat de laptop
   voor vier vijfde binnen het eerste scherm in plaats van voor de helft.
   ========================================================================== */

/*
  De schermen onderaan de hero vallen over de bovenkant van het donkere blok
  eronder. Dat werkt zo: de hero ligt een laag hoger dan de volgende sectie,
  die sectie schuift er een stuk onder (--dp-hero-overlap), en de achtergrond
  van de hero houdt precies op die hoogte op. Wat daaronder zichtbaar is, is
  dus al het donkergroen, met zijn ronde bovenhoeken.
*/
/* Op de pagina zelf, zodat de hero en de sectie eronder dezelfde maat lezen. */
.dp-salespagina {
	--dp-hero-overlap: clamp(6rem, 3rem + 8vw, 11rem);
}

.dp-hero {
	position: relative;
	z-index: 2;
	padding-block: clamp(7.5rem, 6.5rem + 2.5vw, 9rem) 0;
	background: linear-gradient(
		to bottom,
		var(--dp-bg) calc(100% - var(--dp-hero-overlap)),
		transparent calc(100% - var(--dp-hero-overlap))
	);
	overflow: hidden;
}

.dp-salespagina > .dp-hero + .dp-section {
	margin-top: calc(-1 * var(--dp-hero-overlap));
	padding-top: calc(var(--dp-section-y) + var(--dp-hero-overlap));
}

.dp-hero__tekst {
	max-width: 62rem;
	text-align: center;
}

/*
  De enige handgeschreven regel van de pagina. Hij staat hier los van
  .dp-eyebrow: die is Figtree in kapitalen, en dat is precies wat dit niet is.
*/
.dp-hero__script {
	margin: 0 0 0.6rem;
	max-width: none;
	font-family: var(--dp-font-hand);
	font-size: clamp(1.75rem, 1.2rem + 2.3vw, 2.625rem);
	font-weight: 400;
	line-height: 1;
	color: var(--dp-text-strong);

	/* Andersom gekanteld dan het handschrift zelf al helt: zo leest het als een
	   los briefje boven de kop in plaats van als een schuine regel. */
	display: block;
	width: fit-content;
	margin-inline: auto;
	rotate: -3deg;
}

.dp-hero__titel {
	max-width: 55rem;
	margin-inline: auto;
	font-size: clamp(1.95rem, 1.07rem + 3.75vw, 3.25rem);
	line-height: 1.05;
	letter-spacing: -0.02em;

	/*
	   Uit: de kop is zo geschreven dat de regels vanzelf goed vallen, en
	   text-wrap: balance zou de vierde regel juist korter maken dan bedoeld.
	*/
	text-wrap: initial;
}

.dp-hero__lead {
	max-width: 48rem;
	margin: 1.1rem auto 0;
	font-size: clamp(1rem, 0.93rem + 0.3vw, 1.125rem);
	line-height: 1.5;
}

.dp-hero__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dp-space-xs);
	justify-content: center;
	margin-top: 2rem;
}

/* --- De balk met beoordelingen -------------------------------------------
   De avatars staan naast de sterren, en de tekst eronder. Dat is compacter dan
   alles op één regel, en het leest als één blokje in plaats van als drie
   losse dingen.
*/

.dp-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	margin-top: 1.75rem;
}

.dp-trust__avatars {
	display: flex;
}

.dp-trust__avatars img {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--dp-paper);
}

.dp-trust__avatars img + img {
	margin-inline-start: -0.7rem;
}

.dp-trust__tekst {
	display: grid;
	gap: 0.1rem;
	justify-items: start;
	margin: 0;
	max-width: none;
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
	text-align: start;
}

/* --- Het podium: twee rijen schermen met de laptop erover ----------------
   De laptop steekt boven de rijen uit en valt met zijn onderste deel over de
   eerste rij heen. De ruimte die hij daarboven nodig heeft is uitgerekend uit
   zijn eigen breedte, zodat de verhouding op elk scherm hetzelfde blijft.
*/

.dp-hero__podium {
	--dp-laptop-breedte: clamp(17rem, 40vw, 36rem);

	position: relative;
	margin-top: 2.25rem;
	padding-top: calc(var(--dp-laptop-breedte) * 0.365);
}

.dp-marquee {
	--dp-marquee-gap: clamp(0.5rem, 0.35rem + 0.6vw, 0.75rem);

	display: grid;
	gap: var(--dp-marquee-gap);
}

.dp-marquee__spoor {
	display: flex;
	gap: var(--dp-marquee-gap);
	width: max-content;

	/*
	   De rij staat twee keer in de HTML. Door precies één rij plus één tussen-
	   ruimte op te schuiven begint de animatie weer op een plek die er exact
	   hetzelfde uitziet, en zie je de sprong niet.
	*/
	animation: dp-schuif 80s linear infinite;
}

.dp-marquee__spoor--rechts {
	animation-direction: reverse;
	animation-duration: 95s;
}

.dp-marquee__rij {
	display: flex;
	flex: none;
	gap: var(--dp-marquee-gap);
}

.dp-marquee__rij img {
	width: clamp(13rem, 31vw, 29rem);
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: top center;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-m);
	background: #fff;
}

@keyframes dp-schuif {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(calc(-50% - var(--dp-marquee-gap) / 2), 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dp-marquee__spoor {
		animation: none;
	}
}

/* --- De laptop ------------------------------------------------------------
   Helemaal in CSS getekend, zodat hij op elk scherm scherp blijft en we geen
   mockup-plaatje van een paar honderd kilobyte hoeven mee te sturen. Het
   scherm is één stilstaande afbeelding: meescrollen vond Simone te heftig.
*/

.dp-laptop {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	z-index: 2;
	width: var(--dp-laptop-breedte);
	transform: translateX(-50%);
}

.dp-laptop__deksel {
	padding: 0.75% 0.75% 1%;
	border: 1px solid rgb(231 238 221 / 0.1);
	border-radius: clamp(8px, 1.6vw, 16px) clamp(8px, 1.6vw, 16px) 4px 4px;
	background: linear-gradient(165deg, #35422f 0%, #1b2617 42%, #0f180c 100%);
	box-shadow: var(--dp-shadow-l);
}

.dp-laptop__scherm {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: clamp(4px, 0.9vw, 8px);
	background: #0f180c;
}

.dp-laptop__scherm .dp-schermwissel,
.dp-laptop__scherm img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/* De glans over het scherm. Subtiel: het moet een scherm zijn, geen spiegel. */
.dp-laptop__scherm::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgb(255 255 255 / 0.12) 0%, rgb(255 255 255 / 0) 38%);
	pointer-events: none;
}

.dp-laptop__voet {
	position: relative;
	inset-inline-start: 50%;
	width: 113%;
	height: clamp(9px, 1.5vw, 15px);
	transform: translateX(-50%);
	background: linear-gradient(180deg, #d5dacd 0%, #a7b19e 55%, #7c8873 100%);
	border-radius: 0 0 clamp(5px, 0.9vw, 9px) clamp(5px, 0.9vw, 9px);
	clip-path: polygon(1.2% 0, 98.8% 0, 100% 100%, 0 100%);
	box-shadow: 0 16px 28px -14px rgb(18 43 7 / 0.55);
}

/* Het uitsparinkje waar je de laptop mee openklapt. */
.dp-laptop__voet::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	width: 11%;
	height: 38%;
	transform: translateX(-50%);
	border-radius: 0 0 99px 99px;
	background: rgb(18 43 7 / 0.22);
}

/* ==========================================================================
   HERKENBAAR?

   Geen kaarten. De drie zinnen zijn samen één verhaal, dus ze staan ook als
   tekst onder elkaar, groot genoeg om te lezen zonder de uitleg eronder. Bij
   het scrollen licht de zin op die je nu leest, en de andere blijven gedimd.
   Links blijft de kop met de foto staan zolang je door die zinnen scrolt.
   ========================================================================== */

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

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

.dp-probleem__kop {
	font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
	line-height: 1.08;
}

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

.dp-probleem__foto {
	margin: var(--dp-space-s) 0 0;
	overflow: hidden;
	border: var(--dp-border) solid var(--dp-line-on-dark);
	border-radius: var(--dp-radius-l);
}

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

/* --- Het verhaal --------------------------------------------------------- */

.dp-verhaal {
	display: grid;

	/* Ruimte boven en onder, zodat de eerste en laatste zin ook echt in het
	   midden van het scherm kunnen komen te staan terwijl de kop links blijft. */
	padding-block: 2rem 4rem;
}

.dp-verhaal__regel {
	display: grid;
	grid-template-columns: 3rem 1fr;
	column-gap: var(--dp-space-s);
	padding-block: clamp(2rem, 1.2rem + 3vw, 3.75rem);
	border-top: var(--dp-border) solid var(--dp-line-on-dark);
}

/* Geen streep boven de eerste en onder de laatste: alleen de lijntjes ertussen
   zijn nodig om de drie regels uit elkaar te houden. */
.dp-verhaal__regel:first-child {
	border-top: 0;
}

.dp-verhaal__nummer {
	grid-row: span 2;
	padding-top: 0.55em;
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	letter-spacing: 0.14em;
	color: var(--dp-peach);
}

.dp-verhaal__zin {
	font-size: clamp(1.35rem, 1rem + 1.5vw, 2.05rem);
	line-height: 1.12;
	color: var(--dp-paper);
}

.dp-verhaal__zin em {
	color: var(--dp-orange);
}

.dp-verhaal__uitleg {
	max-width: 34rem;
	margin-top: var(--dp-space-s);
	color: var(--dp-text-on-dark-muted);
}

/*
  Het oplichten. Elke zin heeft zijn eigen tijdlijn: gedimd zolang hij onder in
  beeld staat, helder zodra hij rond het midden komt. Browsers zonder scroll-
  animaties tonen gewoon alle zinnen helder.
*/
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.dp-verhaal__regel {
			animation: dp-oplichten linear both;
			animation-timeline: view();
			animation-range: entry 20% cover 45%;
		}
	}
}

@keyframes dp-oplichten {
	from {
		opacity: 0.2;
	}

	to {
		opacity: 1;
	}
}

/* --- De conclusie -------------------------------------------------------- */

/* Het slot en de review van Margot staan naast elkaar: het gevolg links, het
   bewijs dat het ook anders kan rechts. */
.dp-probleem__slotrij {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: clamp(2rem, 1.2rem + 3vw, 4rem);
	align-items: center;
	margin-top: var(--dp-space-xl);
}

.dp-probleem__slot {
	max-width: none;
	margin: 0;
}

.dp-probleem__review {
	margin: 0;
}

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

.dp-probleem__slot p {
	max-width: none;
	font-family: var(--dp-font-display);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem);
	font-weight: 400;
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1.35;
	color: var(--dp-paper);
	text-wrap: balance;
}

.dp-probleem__slot em {
	color: var(--dp-orange);
}

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

	.dp-probleem__vast {
		position: static;
	}

	.dp-probleem__foto img {
		aspect-ratio: 16 / 9;
	}

	.dp-verhaal {
		padding-block: 0;
	}

	.dp-verhaal__regel {
		grid-template-columns: 2.25rem 1fr;
	}
}

/* ==========================================================================
   MISSIE
   ========================================================================== */

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

.dp-missie__tekst {
	--dp-flow: 1.1rem;
}

/* Tussen kop en eerste alinea wat meer lucht dan tussen de alinea's. */
.dp-missie__tekst > .dp-missie__eerste {
	margin-top: var(--dp-space-m);
}

.dp-missie__tekst > .dp-missie__tussenkop {
	margin-top: var(--dp-space-l);
	font-size: var(--dp-size-h4);
	max-width: 24ch;
}

/* De tussenkop hoort bij de alinea eronder: die staat er dicht onder. */
.dp-missie__tekst > .dp-missie__tussenkop + p {
	margin-top: 0.45rem;
}

.dp-missie__beeld {
	position: relative;

	/* Ruimte onderaan voor de reviewkaart die over de rand hangt. */
	margin-bottom: 6rem;
}

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

	/* Uitsnede aan de onderkant, zodat Simone hoger in beeld staat en de
	   honden onderaan niet wegvallen. */
	object-position: 50% 92%;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-section);
}

/*
  De foto opent zich van boven naar beneden terwijl hij in beeld schuift.
  Alleen in browsers die scroll-animaties kennen; de rest ziet hem gewoon.
*/
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.dp-missie__foto {
			animation: dp-onthul linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 80%;
		}
	}
}

@keyframes dp-onthul {
	from {
		clip-path: inset(0 0 100% 0 round var(--dp-radius-section));
	}

	to {
		clip-path: inset(0 0 0 0 round var(--dp-radius-section));
	}
}

/*
  De kaart van Margot. Het is de gewone reviewkaart; alleen de plek is anders:
  hij valt linksonder over de rand van de foto, met een diepe zachte schaduw
  zodat hij er echt boven ligt. De plek (de div eromheen) zweeft omhoog in
  beeld zodra je bij de foto bent; de kaart zelf houdt zijn hover-beweging.
*/
.dp-missie__review {
	position: absolute;
	inset-inline-start: -4rem;
	inset-block-end: -6rem;
	width: min(25rem, 88%);
}

.dp-missie__review .dp-review {
	margin: 0;
	box-shadow: 0 34px 50px -30px rgb(18 43 7 / 0.6);
}

.dp-heeft-reveal .dp-missie__review[data-dp-reveal] {
	transform: translateY(70px) rotate(-2deg);
	transition:
		opacity 900ms var(--dp-ease-out),
		transform 1200ms cubic-bezier(0.22, 1.2, 0.36, 1);
	transition-delay: var(--dp-delay, 0ms);
}

.dp-heeft-reveal .dp-missie__review[data-dp-reveal].is-zichtbaar {
	transform: none;
}

.dp-missie__review blockquote {
	margin: 0;
}

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

	.dp-missie__beeld {
		max-width: 30rem;
		margin-inline: auto;
		margin-bottom: 0;
	}

	/* Op smal scherm schuift de kaart onder de foto, met een klein stukje overlap. */
	.dp-missie__review {
		position: relative;
		inset: auto;
		width: auto;
		margin: -2rem 0.75rem 0;
	}
}

/* ==========================================================================
   STEL JE VOOR — de brug
   Foto links, vraag en lijstje rechts. Wit, zodat hij loskomt van de missie
   (paper) erboven en de drie wegen (moss) eronder.
   ========================================================================== */

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

/* Een browservenster met een complete templatepagina erin, die langzaam van
   boven naar beneden scrolt. Beter dan een foto van een mockup: je ziet een
   echte pagina uit de set, en meteen hoeveel erin zit. */
.dp-brug__beeld {
	position: relative;
}

.dp-brug__venster {
	overflow: hidden;
	border-radius: 0.6rem;
	background: #fff;
	box-shadow: 0 40px 60px -35px rgb(18 43 7 / 0.55);
	rotate: -1.5deg;
}

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

/* Het bijschrift in handschrift, maar dan groot genoeg om te lezen: over twee
   regels en licht omhoog gekanteld. */
.dp-brug__krabbel {
	max-width: none;
	margin: var(--dp-space-m) 0 0;
	font-family: var(--dp-font-hand);
	font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
	line-height: 1.1;
	color: var(--dp-forest);
	text-align: center;
	rotate: -3deg;
}

/* Sleutelzinnen in de lopende tekst, net als op de homepage. */
.dp-brug__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;
}

.dp-brug__tekst em {
	font-style: normal;
	color: var(--dp-text-strong);
	text-decoration: underline;
	text-decoration-color: var(--dp-line-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.dp-brug__tekst h2 em {
	text-decoration: none;
	font-style: italic;
}

/* De kop nam met deze regelafstand te veel ruimte in. Iets kleiner en
   strakker, en alle alinea's eronder even groot: anders oogt het rommelig. */
.dp-brug__tekst h2 {
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
	line-height: 1.08;
}

.dp-brug__tekst > p {
	font-size: var(--dp-size-lead);
	line-height: var(--dp-leading-body);
}

.dp-brug__slot {
	max-width: none !important;
	margin-top: var(--dp-space-m) !important;
	font-family: var(--dp-font-display);
	font-size: clamp(1.25rem, 1rem + 0.9vw, 1.65rem);
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1.3;
	color: var(--dp-text-strong);
}

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

.dp-brug__tekst h2 {
	font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
	line-height: 1.15;
}

/* Onder "minstens € 3.000" twee losse penstreken in blad, als een krabbel. */
.dp-brug__streep {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.dp-brug__streep svg {
	position: absolute;
	inset-inline: -0.15em;
	inset-block-start: 88%;
	width: calc(100% + 0.3em);
	height: 0.4em;
	overflow: visible;
}

.dp-brug__streep path {
	fill: none;
	stroke: #9fb83a;
	stroke-width: 3;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 320;
	stroke-dashoffset: 0;
}

.dp-heeft-reveal .dp-brug__tekst h2 .dp-brug__streep path {
	stroke-dashoffset: 320;
	transition: stroke-dashoffset 900ms var(--dp-ease-out) 600ms;
}

.dp-heeft-reveal .dp-brug__tekst h2 .dp-brug__streep path + path {
	transition-delay: 900ms;
}

.dp-heeft-reveal .dp-brug__tekst h2.is-zichtbaar .dp-brug__streep path {
	stroke-dashoffset: 0;
}

.dp-brug__tekst .dp-lead {
	margin-top: var(--dp-space-m);
}

.dp-brug__lijst {
	display: grid;
	gap: 0.85rem;
	margin-top: var(--dp-space-s);
}

.dp-brug__lijst li {
	display: grid;
	grid-template-columns: 1.3rem 1fr;
	gap: 0.8rem;
	align-items: start;
	font-size: var(--dp-size-lead);
	line-height: 1.45;
	color: var(--dp-text);
}

.dp-brug__lijst svg {
	width: 1.2rem;
	height: 1.2rem;
	margin-top: 0.2em;
	color: #7d9a22;
	stroke-width: 2.4;
}

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

	.dp-brug__beeld {
		max-width: 28rem;
	}
}

/* ==========================================================================
   TUSSENWEG — drie wegen

   Drie kaarten met een emoji, een titel en tags. De twee buitenste zijn zacht
   perzik: dat zijn de wegen die je niet wilt. De middelste is licht, frosted
   glas, en heeft een krabbel onder zijn titel.

   Bij het scrollen:
   - komen de kaarten van onderen omhoog, de buitenste een tikje gekanteld;
   - komt de middelste verder omhoog dan de andere twee, zodat hij er aan het
     eind bovenuit steekt;
   - ploppen de tags er één voor één in;
   - tekent de krabbel zichzelf.
   ========================================================================== */

/* Minder lucht onder de inleiding: de kaarten horen bij deze tekst. */
.dp-wegen__kop {
	max-width: 50rem;
	margin-bottom: var(--dp-space-m);
}

/* Een zacht verloop van papier naar mos in plaats van één vlakke kleur: het
   blok erboven is ook licht, en zo lopen ze niet in elkaar over. */
.dp-tussenweg {
	background: linear-gradient(180deg, var(--dp-paper) 0%, var(--dp-moss) 65%);
}

.dp-wegen {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 0.5rem + 1.6vw, 2rem);

	/* De middelste kaart groeit voorbij de twee ernaast en blijft daarbij
	   verticaal in het midden staan, in plaats van onderaan uit te lijnen. */
	align-items: center;

	/* Ruimte boven en onder voor die groei, anders schuift hij over de tekst. */
	padding-block: 2rem 4rem;
}

.dp-weg__schuif {
	position: relative;
	z-index: 1;
}

.dp-weg__schuif {
	display: flex;
}

.dp-weg {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	padding: clamp(2rem, 1.5rem + 2vw, 3.25rem) clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	text-align: center;
}

.dp-weg--zij {
	background: linear-gradient(160deg, #ffe7da 0%, #ffd2bb 55%, #ffc4a6 100%);
	border-color: rgb(254 161 117 / 0.45);
}

/* De middelste kaart is hoger dan de twee ernaast en steekt er boven en onder
   uit, zoals in Simones eigen ontwerp. Zacht groen verloop met een vleugje
   van de CTA-kleur bovenin. */
.dp-weg--midden {
	padding-block: calc(clamp(1.75rem, 1.2rem + 2vw, 2.75rem) + 2.5rem);
	border-color: rgb(18 43 7 / 0.12);
	background:
		radial-gradient(80% 45% at 50% 0%, rgb(230 255 86 / 0.45), transparent 70%),
		linear-gradient(180deg, #fbfdf1 0%, #eef6d7 60%, #e3efbf 100%);
	box-shadow:
		0 30px 60px -30px rgb(18 43 7 / 0.35),
		0 0 0 6px rgb(255 255 255 / 0.5);
}

.dp-weg__emoji {
	font-size: clamp(2.2rem, 1.8rem + 1.2vw, 2.9rem);
	line-height: 1;
}

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

/* --- De tags --------------------------------------------------------------- */

.dp-weg__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
}

.dp-weg__tags li {
	padding: 0.4em 0.85em;
	border: var(--dp-border) solid var(--dp-pil-rand);
	border-radius: var(--dp-radius-s);
	background: rgb(255 255 255 / 0.72);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-medium);
	line-height: 1.25;
	color: var(--dp-text-strong);
}

.dp-weg--midden .dp-weg__tags li {
	background: #fff;
}

/* Een tag komt er met een klein sprongetje in, in plaats van omhoog te glijden. */
.dp-heeft-reveal .dp-weg__tags [data-dp-reveal] {
	transform: translateY(10px) scale(0.9);
	transition:
		opacity 400ms var(--dp-ease-out),
		transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
	transition-delay: var(--dp-delay, 0ms);
}

/* --- De scrollbeweging ---------------------------------------------------- */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.dp-weg__schuif {
			animation: dp-weg-zij linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 45%;
		}

		.dp-weg__schuif--links {
			--dp-kanteling: -3deg;
		}

		.dp-weg__schuif--rechts {
			--dp-kanteling: 3deg;
		}

		.dp-weg__schuif--midden {
			z-index: 1;
			animation-name: dp-weg-midden;
			animation-range: entry 0% cover 50%;
		}

	}
}

@keyframes dp-weg-zij {
	from {
		transform: translateY(90px) rotate(var(--dp-kanteling, 0deg));
		opacity: 0.4;
	}

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

/* De middelste komt verder omhoog en groeit door tot over de twee ernaast:
   hij is de weg die je wil, dus hij mag ze letterlijk overschaduwen. */
@keyframes dp-weg-midden {
	from {
		transform: translateY(120px) scale(0.94);
		opacity: 0.4;
	}

	to {
		transform: scale(1.06);
		opacity: 1;
	}
}


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

/* ==========================================================================
   DE VIER STAPPEN
   Een stappenspeler: links de stappen, rechts het beeld en een review die
   erbij horen. Hij loopt vanzelf door (het balkje onder de actieve stap laat
   zien hoe lang nog) en staat stil zodra je er met de muis of het toetsenbord
   in zit.

   De overgangen:
   - een wit vlak glijdt achter de stappen mee naar de actieve stap;
   - de uitleg van die stap schuift open, die van de vorige schuift dicht;
   - het nieuwe beeld veegt van rechts over het vorige heen;
   - de review wisselt met een zachte fade.
   ========================================================================== */

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

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

/* --- De lijst met stappen ------------------------------------------------ */

.dp-stapper__lijst {
	position: relative;
	display: grid;
	gap: 0.4rem;
	margin-top: var(--dp-space-l);
}

/*
  Het witte vlak achter de actieve stap. Het script zet zijn hoogte en positie;
  CSS laat het er soepel naartoe glijden. Zonder script bestaat het niet en
  krijgt de actieve stap zelf de witte achtergrond.
*/
.dp-stapper__glijder {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 0;
	display: none;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-m);
	background: #fff;
	box-shadow: var(--dp-shadow-m);
	transition:
		transform 550ms var(--dp-ease-out),
		height 550ms var(--dp-ease-out);
	pointer-events: none;
}

.dp-stapper__lijst.is-actief .dp-stapper__glijder {
	display: block;
}

.dp-stapper__tab {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 2.4rem 1fr;
	gap: 1rem;
	align-items: start;
	width: 100%;
	padding: 1rem 1.1rem;
	overflow: hidden;
	border: var(--dp-border) solid transparent;
	border-radius: var(--dp-radius-m);
	background: transparent;
	color: var(--dp-text);
	text-align: start;
	cursor: pointer;
	transition: background-color var(--dp-transition);
}

.dp-stapper__tab[aria-selected="false"]:hover {
	background: rgb(255 255 255 / 0.4);
}

.dp-stapper__lijst:not(.is-actief) .dp-stapper__tab[aria-selected="true"] {
	border-color: var(--dp-line);
	background: #fff;
}

.dp-stapper__nummer {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: #fff;
	font-family: var(--dp-font-display);
	font-weight: var(--dp-weight-display);
	color: var(--dp-forest);
	transition: background-color 400ms var(--dp-ease);
}

.dp-stapper__tab[aria-selected="true"] .dp-stapper__nummer {
	background: var(--dp-leaf);
}

.dp-stapper__tekst {
	display: grid;
	padding-top: 0.35rem;
}

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

/*
  De uitleg schuift open en dicht via grid-template-rows (van 0fr naar 1fr):
  zo animeert de hoogte zonder dat je die hoeft te weten.
*/
.dp-stapper__meer {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition:
		grid-template-rows 550ms var(--dp-ease-out),
		opacity 400ms var(--dp-ease);
}

.dp-stapper__uitleg {
	min-height: 0;
	overflow: hidden;
	padding-top: 0.3rem;
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
}

.dp-stapper__lijst:not(.is-actief) .dp-stapper__meer,
.dp-stapper__tab[aria-selected="true"] .dp-stapper__meer {
	grid-template-rows: 1fr;
	opacity: 1;
}

/* Het voortgangsbalkje. Als het vol is, springt het script naar de volgende stap. */
.dp-stapper__tab::after {
	content: "";
	position: absolute;
	inset-inline: 1.1rem;
	inset-block-end: 0.35rem;
	height: 2px;
	border-radius: 2px;
	background: var(--dp-forest);
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0.8;
}

@media (prefers-reduced-motion: no-preference) {
	.dp-stapper__lijst.is-actief.is-in-beeld .dp-stapper__tab[aria-selected="true"]::after {
		animation: dp-voortgang 7s linear forwards;
	}

	.dp-stappen:hover .dp-stapper__tab::after,
	.dp-stappen:focus-within .dp-stapper__tab::after {
		animation-play-state: paused;
	}
}

@keyframes dp-voortgang {
	to {
		transform: scaleX(1);
	}
}

/* --- Het beeld ----------------------------------------------------------- */

.dp-stapper__beeld {
	position: relative;
	aspect-ratio: 8 / 5;
	overflow: hidden;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: var(--dp-forest);
	box-shadow: var(--dp-shadow-l);
}

.dp-stapper__paneel {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

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

/*
  Met script staan alle panelen klaar en is alleen het actieve zichtbaar.
  Het nieuwe paneel ligt bovenop en komt rustig op (een fade) over het
  vorige heen. Het vorige blijft eronder staan tot het bedekt is, en
  verdwijnt dan pas.
*/
.dp-stapper__beeld.is-actief .dp-stapper__paneel {
	visibility: hidden;
	transition: visibility 0s 600ms;
}

.dp-stapper__beeld.is-actief .dp-stapper__paneel.is-zichtbaar {
	z-index: 2;
	visibility: visible;
	transition: none;
}

.dp-stapper__beeld.is-actief .dp-stapper__paneel.is-vorige {
	z-index: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
	.dp-stapper__beeld.is-actief .dp-stapper__paneel.is-zichtbaar {
		animation: dp-vervaag 600ms var(--dp-ease) both;
	}
}

@keyframes dp-vervaag {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* De Schrijfkit is een productplaatje, geen scherm: die staat vrij in het vlak. */
.dp-stapper__paneel--product {
	background: var(--dp-leaf-soft);
}

.dp-stapper__paneel--product img {
	padding: 6% 10%;
	object-fit: contain;
}

/* --- De review bij de stap ------------------------------------------------
   Alle vier liggen op dezelfde plek in één rastercel. Zo is het blok altijd
   zo hoog als de langste review en springt de pagina niet bij het wisselen.
   Iets smaller dan het beeld, zodat hij er als een kaartje onder hangt.
*/

/* De kaarten liggen op elkaar, maar alleen de zichtbare staat in de flow.
   Daardoor is het vak precies zo hoog als de review die je leest, in plaats
   van zo hoog als de langste van de vier. */
.dp-stapper__reviews {
	position: relative;
	width: 90%;
	margin: calc(-1 * var(--dp-space-m)) auto 0;
	z-index: 3;
}

.dp-stapper__review {
	margin: 0;
	box-shadow: var(--dp-shadow-m);
}

/* Geen hover-lift: deze kaart hangt vast onder het beeld. */
.dp-stapper__review:hover {
	transform: none;
	box-shadow: var(--dp-shadow-m);
}

.dp-stapper__reviews.is-actief .dp-stapper__review {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	display: flex;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity 400ms var(--dp-ease),
		transform 500ms var(--dp-ease-out),
		visibility 0s 400ms;
}

.dp-stapper__reviews.is-actief .dp-stapper__review.is-zichtbaar {
	position: relative;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity 500ms var(--dp-ease) 250ms,
		transform 600ms var(--dp-ease-out) 250ms,
		visibility 0s;
}

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

/* ==========================================================================
   TEMPLATE-ONTHULLING
   ========================================================================== */

/*
  De onthulling: een bundel van alle sets. De laptop staat in het midden, de
  tablets liggen er schuin achter. Bij het scrollen vliegen die van links en
  rechts binnen en de laptop komt omhoog. Zonder scroll-animaties staat de
  bundel gewoon in zijn eindstand.

  Daaronder de tekst, die over de bovenkant van set 1 valt: set 1 staat
  verticaal gecentreerd in zijn scherm en heeft bovenin toch lege ruimte.
*/
.dp-templates {
	z-index: 2;
	padding-bottom: 0;
	overflow-x: clip;
}

.dp-onthul {
	position: relative;
	width: min(100%, 62rem);
	aspect-ratio: 16 / 10; /* hoog genoeg voor de langwerpige pagina's */
	margin-inline: auto;
}

.dp-onthul__gloed {
	position: absolute;
	inset: 10% 15% 0;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(207 222 124 / 0.28), transparent);
	filter: blur(20px);
}

/* De laptop staat in het midden, en daarachter vandaan vouwen zes langwerpige
   templatepagina's open: drie per kant. Ze liggen bij het begin op elkaar
   achter de laptop, recht en zonder draaiing, en klappen tijdens het scrollen
   uit elkaar als een waaier kaarten. Ze zijn de hele tijd volledig
   ondoorzichtig; het is de laptop die ze verbergt, geen doorzichtigheid.

   --dp-uit  = precies de afstand tussen de eindplek van een pagina en het
               midden van de houder, zodat ze aan het begin allemaal op één
               gecentreerde stapel liggen en pas daarna uit elkaar vouwen
   --dp-draai = de stand waarin hij eindigt
   ========================================================================== */
.dp-onthul__laptop {
	position: absolute;
	z-index: 5;
	inset-inline-start: 50%;
	inset-block-end: 14%;
	display: grid;
	justify-items: center;
	width: 40%;
	translate: -50% 0;
	filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.5));
}

/* Het scherm van de laptop: een donkere rand met daarin klantsites die elkaar
   afwisselen, net als in de homekop. */
.dp-onthul__scherm {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 0.5rem solid #1b1d1a;
	border-block-end-width: 0.75rem;
	border-radius: 0.7rem 0.7rem 0 0;
	background: #1b1d1a;
}

.dp-onthul__scherm .dp-schermwissel,
.dp-onthul__scherm .dp-schermwissel img {
	height: 100%;
	object-fit: cover;

	/* Vanaf de bovenkant uitlijnen: zo staat de menubalk van de template
	   altijd vol in beeld in plaats van half weggesneden. */
	object-position: 50% 0;
}

.dp-onthul__voet {
	width: 118%;
	height: 0.8rem;
	border-radius: 0 0 0.7rem 0.7rem;
	background: linear-gradient(180deg, #33362f, #17190f);
}

.dp-onthul__pagina {
	position: absolute;
	width: 20%;
	aspect-ratio: 480 / 1020;
	object-fit: cover;
	object-position: 50% 0;
	border-radius: var(--dp-radius-s);
	rotate: var(--dp-draai);
	filter: drop-shadow(0 26px 36px rgb(0 0 0 / 0.5));
	transform-origin: 50% 50%;
}

.dp-onthul__pagina--l1 {
	--dp-uit: 90%;
	--dp-zak: 2%;
	--dp-draai: -4deg;

	z-index: 4;
	inset-inline-start: 22%;
	inset-block-end: 2%;
}

.dp-onthul__pagina--l2 {
	--dp-uit: 160%;
	--dp-zak: 7%;
	--dp-draai: -9deg;

	z-index: 3;
	inset-inline-start: 8%;
	inset-block-end: 5%;
}

.dp-onthul__pagina--l3 {
	--dp-uit: 220%;
	--dp-zak: 12%;
	--dp-draai: -14deg;

	z-index: 2;
	inset-inline-start: -4%;
	inset-block-end: 8%;
}

.dp-onthul__pagina--r1 {
	--dp-uit: 90%;
	--dp-zak: 2%;
	--dp-draai: 4deg;

	z-index: 4;
	inset-inline-end: 22%;
	inset-block-end: 2%;
}

.dp-onthul__pagina--r2 {
	--dp-uit: 160%;
	--dp-zak: 7%;
	--dp-draai: 9deg;

	z-index: 3;
	inset-inline-end: 8%;
	inset-block-end: 5%;
}

.dp-onthul__pagina--r3 {
	--dp-uit: 220%;
	--dp-zak: 12%;
	--dp-draai: 14deg;

	z-index: 2;
	inset-inline-end: -4%;
	inset-block-end: 8%;
}

/* Op een smal scherm mag de waaier breder zijn dan de pagina: de buitenste
   pagina's vallen dan buiten beeld, maar de rest is veel beter te zien. De
   sectie eromheen snijdt het af, dus er ontstaat geen horizontale schuifbalk.
   De randen van de laptop worden meegeschaald, anders zijn ze daar zo dik dat
   het scherm bijna wegvalt. */
@media (width < 48rem) {
	.dp-onthul {
		width: 150%;
		margin-inline-start: -25%;
	}

	.dp-onthul__scherm {
		border-width: 0.25rem;
		border-block-end-width: 0.35rem;
		border-radius: 0.4rem 0.4rem 0 0;
	}

	.dp-onthul__voet {
		height: 0.4rem;
		border-radius: 0 0 0.35rem 0.35rem;
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.dp-onthul {
			view-timeline: --dp-onthul block;
		}

		.dp-onthul__pagina,
		.dp-onthul__gloed {
			animation: linear both;
			animation-timeline: --dp-onthul;
			animation-range: entry 25% cover 42%;
		}

		:is(.dp-onthul__pagina--l1, .dp-onthul__pagina--l2, .dp-onthul__pagina--l3) {
			animation-name: dp-onthul-links;
		}

		:is(.dp-onthul__pagina--r1, .dp-onthul__pagina--r2, .dp-onthul__pagina--r3) {
			animation-name: dp-onthul-rechts;
		}

		/* Hoe verder naar buiten, hoe later hij op zijn plek is. */
		.dp-onthul__pagina--l2,
		.dp-onthul__pagina--r2 {
			animation-range: entry 33% cover 50%;
		}

		.dp-onthul__pagina--l3,
		.dp-onthul__pagina--r3 {
			animation-range: entry 42% cover 58%;
		}



		.dp-onthul__gloed {
			animation-name: dp-onthul-gloed;
		}
	}
}

/* Aan het begin liggen alle zes de pagina's klein en recht op elkaar, precies
   binnen het scherm van de laptop: naar het midden geschoven, iets omlaag
   gezakt, teruggedraaid naar nul en op 45%. De laptop ligt eroverheen, dus je
   ziet ze niet. Tijdens het scrollen groeien ze en vouwen ze naar buiten.

   De percentages in translate gaan altijd over de eigen, ongeschaalde maat van
   het element, dus de schaal verstoort het uitrekenen van het midden niet. */
@keyframes dp-onthul-links {
	from {
		transform:
			translate(var(--dp-uit, 120%), var(--dp-zak, 6%))
			rotate(calc(-1 * var(--dp-draai)))
			scale(0.45);
	}

	to {
		transform: none;
	}
}

@keyframes dp-onthul-rechts {
	from {
		transform:
			translate(calc(-1 * var(--dp-uit, 120%)), var(--dp-zak, 6%))
			rotate(calc(-1 * var(--dp-draai)))
			scale(0.45);
	}

	to {
		transform: none;
	}
}

@keyframes dp-onthul-gloed {
	from {
		opacity: 0;
		transform: scale(0.6);
	}

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

.dp-onthul__tekst {
	position: relative;
	z-index: 4;
	max-width: 46rem;

	/* Ruim onder de mockups, en daarna strak tegen de eerste set aan: die
	   begint met een leeg stuk omdat de scene een heel scherm hoog is. */
	margin: var(--dp-space-xl) auto -7rem;
	text-align: center;
}

/* De eerste set begon veel te laag onder de inleiding. */
.dp-templates {
	padding-bottom: 0;
}

.dp-onthul__tekst h2 {
	font-size: clamp(2.2rem, 1.4rem + 3vw, 3.75rem);
	line-height: 1.05;
}

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

.dp-onthul__sets {
	max-width: 46rem;
	margin-inline: auto;
	font-size: var(--dp-size-lead);
	color: var(--dp-text-on-dark-muted);
}

/* Sleutelzinnen dik en onderstreept, net als elders op de site. Op donker in
   het zachte blad. */
.dp-wegen__kop b,
.dp-onthul__tekst b {
	font-weight: var(--dp-weight-bold);
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.22em;
	text-decoration-skip-ink: none;
}

.dp-wegen__kop b {
	color: var(--dp-text-strong);
	text-decoration-color: var(--dp-leaf);
}

.dp-onthul__tekst b {
	color: var(--dp-paper);
	text-decoration-color: var(--dp-leaf);
}

.dp-onthul__sets strong {
	color: var(--dp-paper);
}

.dp-onthul__tekst .dp-templates__sets {
	justify-content: center;
}

.dp-templates__sets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.dp-templates__sets a {
	text-decoration: none;
	transition: transform var(--dp-transition);
}

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


.dp-tpl {
	position: relative;
	z-index: 1;
}

.dp-tpl__anker {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;

	/*
	   De ankers moeten precies landen op het moment dat een set helemaal in
	   beeld is. De rest van de pagina houdt bij ankerlinks ruimte aan voor de
	   zwevende navigatie (scroll-padding op html); die trekken we hier weer af.
	   Anders land je bij set 2 en 3 midden in de overgang.
	*/
	scroll-margin-top: calc(-1 * var(--dp-anker-ruimte));
}

/* --- Eén set ------------------------------------------------------------- */

.dp-scene {
	--dp-scene-tekst: var(--dp-forest);
	--dp-scene-vink: var(--dp-leaf);

	position: relative;
	padding-block: var(--dp-section-y);
	border-start-start-radius: var(--dp-radius-section);
	border-start-end-radius: var(--dp-radius-section);
	color: var(--dp-scene-tekst);
	overflow: hidden;

	/*
	   Elke set is zijn eigen stapel. Zonder dit prikt de tablet van set 1, die
	   binnen zijn set een eigen laag heeft, dwars door set 2 en 3 heen.
	*/
	isolation: isolate;
}

.dp-scene + .dp-scene {
	margin-top: calc(-1 * var(--dp-radius-section));
}

/*
  Elke set heeft zijn eigen ondergrond met een zacht verloop, maar alleen in
  de accentkleuren. De eerste is donker, de andere twee licht, zodat de
  overgang van set 1 naar set 2 echt voelbaar is.
*/
/*
  Set 1 sluit direct aan op de donkere inleiding "Het pakket", in dezelfde
  kleur. Daarom zit de gloed hier niet bovenin maar achter de mockups: een
  lichte rand vlak onder de inleiding zou als een naad tussen twee vlakken
  ogen, terwijl het één doorlopend donker blok hoort te zijn.
*/
.dp-scene--1 {
	--dp-scene-tekst: var(--dp-paper);
	--dp-scene-vink: var(--dp-leaf);

	background:
		radial-gradient(45% 55% at 72% 58%, rgb(207 222 124 / 0.16), transparent 70%),
		var(--dp-forest);
}

/* Op de lichte sets valt bladgroen weg; daar worden de vinkjes donkergroen. */
.dp-scene--2,
.dp-scene--3 {
	--dp-scene-vink: var(--dp-forest);
}

.dp-scene--2 {
	background:
		radial-gradient(70% 90% at 88% 8%, rgb(207 222 124 / 0.4), transparent 62%),
		radial-gradient(60% 70% at 0% 100%, rgb(255 255 255 / 0.55), transparent 60%),
		var(--dp-sand);
}

.dp-scene--3 {
	background:
		radial-gradient(70% 90% at 88% 8%, rgb(254 161 117 / 0.35), transparent 62%),
		radial-gradient(60% 70% at 0% 100%, rgb(255 255 255 / 0.6), transparent 60%),
		var(--dp-peach-soft);
}

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

/* Dezelfde knopjes als bij "een kijkje in de templates": drie even brede
   knoppen in een pill, met een zachtgroen vlakje dat naar de gekozen set
   schuift. Eén vorm voor dezelfde handeling op de hele pagina. */
.dp-scene__nav {
	position: relative;

	/* Flex met flex-basis 0, niet grid: bij grid krijgt elke kolom minstens de
	   breedte van zijn eigen tekst, en dan zijn de drie knoppen ongelijk en
	   klopt het schuivende vlakje niet meer. */
	display: flex;
	width: fit-content;
	max-width: 100%;
	margin-bottom: var(--dp-space-m);
	padding: 0.3rem;
	border: var(--dp-border) solid var(--dp-pil-rand);
	border-radius: var(--dp-radius-pill);
	background: #fff;
}

.dp-scene--1 .dp-scene__nav {
	border-color: var(--dp-line-on-dark);
	background: rgb(255 255 255 / 0.08);
}

.dp-scene__nav::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset-block: 0.3rem;
	inset-inline-start: 0.3rem;
	width: calc((100% - 0.6rem) / 3);
	border-radius: var(--dp-radius-pill);
	background: var(--dp-leaf-soft);
	transition: translate 400ms var(--dp-ease-out);
}

.dp-scene__nav:has(a:nth-child(2)[aria-current])::before {
	translate: 100% 0;
}

.dp-scene__nav:has(a:nth-child(3)[aria-current])::before {
	translate: 200% 0;
}

.dp-scene__nav a {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	padding: 0.55rem 1rem;
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	opacity: 0.6;
	transition:
		opacity var(--dp-transition),
		color var(--dp-transition);
}

.dp-scene__nav a:hover {
	opacity: 1;
}

.dp-scene__nav a[aria-current] {
	opacity: 1;
	color: var(--dp-text-strong);
}

@media (width < 36rem) {
	.dp-scene__nav a {
		padding-inline: 0.5rem;
		letter-spacing: 0.02em;
	}
}

.dp-scene__titel {
	margin-bottom: var(--dp-space-s);
	font-size: clamp(3rem, 1.6rem + 6vw, 6.25rem);
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: inherit;
}

.dp-scene--1 .dp-scene__titel {
	color: var(--dp-paper);
}

.dp-scene__lead {
	max-width: 30rem;
	font-size: var(--dp-size-lead);
	line-height: 1.5;
	opacity: 0.85;
}

.dp-scene__past {
	margin-top: var(--dp-space-m);
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	letter-spacing: var(--dp-tracking-eyebrow);
	text-transform: uppercase;
	opacity: 0.7;
}

.dp-scene__lijst {
	gap: 0.45rem;
	margin-top: 0.7rem;
}

.dp-scene__lijst svg {
	color: var(--dp-scene-vink);
}

/* Op de donkere set erft dikgedrukte tekst de donkergroene kleur en valt hij
   weg. De toelichting achter een vinkje mag daar de tekstkleur van de set. */
.dp-scene__lijst b {
	font-weight: var(--dp-weight-medium);
	color: inherit;
	opacity: 0.75;
}

.dp-scene__knop {
	margin-top: var(--dp-space-m);
}

/* --- De beelden per set --------------------------------------------------
   Bij alle drie de sets dezelfde compositie, zodat je ze eerlijk naast elkaar
   kunt leggen: links een browservenster met de complete homepage die langzaam
   omlaag en weer omhoog schuift, rechts ervoor de set op tablet en telefoon.
*/

.dp-scene__beeld {
	position: relative;
	height: clamp(20rem, 12rem + 24vw, 36rem);
}

.dp-scene__venster {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 4%;
	width: 42%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--dp-border) solid rgb(18 43 7 / 0.25);
	border-radius: var(--dp-radius-m);
	background: #fff;
	box-shadow: 0 40px 60px -30px rgb(0 0 0 / 0.45);
}

.dp-scene__balk {
	display: flex;
	flex: none;
	gap: 0.3rem;
	padding: 0.55rem 0.7rem;
	border-bottom: var(--dp-border) solid rgb(18 43 7 / 0.1);
	background: #f3f5ef;
}

.dp-scene__balk span {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: rgb(18 43 7 / 0.18);
}

.dp-scene__pagina {
	flex: 1;
	overflow: hidden;
	container-type: size;
}

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

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

@keyframes dp-pagina {
	0%,
	6% {
		transform: translateY(0);
	}

	94%,
	100% {
		transform: translateY(calc(-100% + 100cqh));
	}
}

.dp-scene__toestel {
	position: absolute;
	z-index: 2;
	inset-inline-end: 0;
	inset-block-end: -2%;
	width: 56%;
	filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.3));
}

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

@keyframes dp-zweef {
	50% {
		translate: 0 -10px;
	}
}

/*
  Per set een review, als kaartje dat onder het venster uitsteekt. Klein en
  compact: het beeld blijft de hoofdzaak.
*/
.dp-scene__review {
	position: absolute;
	z-index: 3;
	inset-inline-start: 12%;
	inset-block-end: -2.5rem;
	width: min(20rem, 52%);
	margin: 0;
	padding: 1rem 1.15rem;
	gap: 0.55rem;
	box-shadow: 0 30px 50px -28px rgb(0 0 0 / 0.55);
}

.dp-scene__review .dp-review__text {
	font-size: var(--dp-size-small);
	line-height: 1.45;
}

.dp-scene__review .dp-review__avatar {
	width: 2rem;
	height: 2rem;
	font-size: 0.95rem;
}

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

	.dp-scene__beeld {
		width: 100%;
		max-width: 36rem;
		margin-inline: auto;
	}
}

/* --- De vastgezette onthulling --------------------------------------------
   Alleen op brede schermen met genoeg hoogte, in browsers die scroll-
   animaties kennen, en voor wie beweging niet heeft uitgezet. Anders blijven
   de sets gewoon onder elkaar staan, zoals hierboven.

   Hoe het werkt: .dp-tpl is vier schermen hoog. Het podium daarin blijft
   stilstaan terwijl je door die vier schermen scrolt. Set 2 en 3 liggen erop
   en worden van onderen af onthuld (clip-path), op een vast punt in die
   scrollafstand. De ankers staan op 34% en 64% van de hoogte: precies waar
   set 2 en set 3 helemaal in beeld zijn.
*/

@supports (animation-timeline: view()) {
	@media (width >= 62rem) and (height >= 40rem) and (prefers-reduced-motion: no-preference) {
		.dp-tpl {
			height: 400vh;
			view-timeline: --dp-tpl block;
		}

		.dp-tpl__anker--2 {
			inset-block-start: 34%;
		}

		.dp-tpl__anker--3 {
			inset-block-start: 64%;
		}

		.dp-tpl__podium {
			position: sticky;
			inset-block-start: 0;
			height: 100vh;
			overflow: hidden;
			border-start-start-radius: var(--dp-radius-section);
			border-start-end-radius: var(--dp-radius-section);
		}

		.dp-scene {
			position: absolute;
			inset: 0;
			display: grid;
			align-items: center;
			margin: 0;
			padding: 5rem 0 2rem;
		}

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

		.dp-scene__beeld {
			height: min(36rem, 62vh);
		}

		.dp-scene--2,
		.dp-scene--3 {
			clip-path: inset(100% 0 0 0 round var(--dp-radius-section) var(--dp-radius-section) 0 0);
			animation: dp-scene-in linear both;
			animation-timeline: --dp-tpl;
		}

		.dp-scene--2 {
			animation-range: cover 34% cover 47%;
		}

		.dp-scene--3 {
			animation-range: cover 57% cover 70%;
		}

		.dp-scene--2 .dp-scene__grid,
		.dp-scene--3 .dp-scene__grid {
			animation: dp-scene-op linear both;
			animation-timeline: --dp-tpl;
		}

		.dp-scene--2 .dp-scene__grid {
			animation-range: cover 36% cover 49%;
		}

		.dp-scene--3 .dp-scene__grid {
			animation-range: cover 59% cover 72%;
		}
	}
}

@keyframes dp-scene-in {
	from {
		clip-path: inset(100% 0 0 0 round var(--dp-radius-section) var(--dp-radius-section) 0 0);
	}

	to {
		clip-path: inset(0 0 0 0 round var(--dp-radius-section) var(--dp-radius-section) 0 0);
	}
}

@keyframes dp-scene-op {
	from {
		opacity: 0;
		transform: translateY(70px);
	}

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

/* ==========================================================================
   ALLES IN ÉÉN PAKKET
   ========================================================================== */

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

/*
  De foto blijft staan terwijl je rechts door de onderdelen gaat. Er ligt
  telkens een beeld overheen dat past bij wat er open staat (zie de lagen
  hieronder).
*/
.dp-pakket__beeld {
	position: sticky;
	inset-block-start: 7rem;
	padding-bottom: 5.5rem;
}

/*
  De foto is iets ingezoomd vanaf de onderkant. Daardoor valt de kroonluchter
  weg en komt Simones gezicht in het bovenste derde, en de lagen onderaan
  blijven ruim onder haar gezicht.
*/
.dp-pakket__fotoraam {
	overflow: hidden;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-section);
}

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

/*
  De lagen over de foto. Er is er altijd één zichtbaar: die van het onderdeel
  dat rechts open staat. De vorige zakt weg en vervaagt, de nieuwe komt met
  een klein veertje omhoog. Alles hangt onderaan de foto of steekt er net
  onder uit, zodat Simones gezicht altijd vrij blijft.
*/
.dp-pakket__laag {
	position: absolute;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	transform: translateY(24px) scale(0.96);
	transition:
		opacity 350ms var(--dp-ease),
		transform 450ms var(--dp-ease-out),
		visibility 0s 450ms;
	pointer-events: none;
}

.dp-pakket__beeld[data-actief="1"] [data-laag="1"],
.dp-pakket__beeld[data-actief="2"] [data-laag="2"],
.dp-pakket__beeld[data-actief="3"] [data-laag="3"],
.dp-pakket__beeld[data-actief="4"] [data-laag="4"],
.dp-pakket__beeld[data-actief="5"] [data-laag="5"] {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity 450ms var(--dp-ease) 150ms,
		transform 650ms cubic-bezier(0.34, 1.4, 0.64, 1) 150ms,
		visibility 0s;
}

/* 1. De drie sets als waaier onder de foto. */
.dp-pakket__laag--sets {
	inset-inline: 4% -6%;
	inset-block-end: 0;
	height: 16rem;
}

.dp-pakket__laag--sets img {
	position: absolute;
	inset-block-end: 0;
	width: 40%;
	filter: drop-shadow(0 22px 26px rgb(18 43 7 / 0.3));
	transition: transform 700ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.dp-pakket__laag--sets img:nth-child(1) {
	inset-inline-start: 0;
	transform: rotate(-9deg) translateY(10px);
}

.dp-pakket__laag--sets img:nth-child(2) {
	z-index: 2;
	inset-inline-start: 30%;
	width: 44%;
}

.dp-pakket__laag--sets img:nth-child(3) {
	inset-inline-end: 0;
	transform: rotate(9deg) translateY(10px);
}

/* Bij het tevoorschijn komen staan ze eerst op een kluitje en waaieren ze uit. */
.dp-pakket__beeld:not([data-actief="1"]) .dp-pakket__laag--sets img {
	transform: none;
}

/* 2. De training op laptop en tablet. */
.dp-pakket__laag--training {
	inset-inline-end: -2.5rem;
	inset-block-end: 0;
	width: 80%;
}

.dp-pakket__laag--training img {
	width: 100%;
	filter: drop-shadow(0 26px 30px rgb(18 43 7 / 0.3));
}

/* 3, 4 en 5: kleine kaartjes rechtsonder over de rand van de foto. */
.dp-pakket__laag--kaart {
	inset-inline-end: -2.5rem;
	inset-block-end: 1.5rem;
	width: min(21rem, 80%);
}

.dp-minikaart {
	display: grid;
	gap: 0.6rem;
	padding: 1.1rem 1.25rem;
	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);
	font-size: var(--dp-size-small);
	color: var(--dp-text);
}

.dp-minikaart strong {
	font-family: var(--dp-font-display);
	font-size: var(--dp-size-h5);
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1.2;
}

/* Lifetime: groot oneindig-teken naast de tekst. */
.dp-minikaart--altijd {
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 1rem;
}

.dp-minikaart--altijd > span:last-child {
	display: grid;
	gap: 0.15rem;
	color: var(--dp-text-muted);
}

.dp-minikaart__groot {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--dp-leaf);
	font-family: var(--dp-font-display);
	font-size: 2rem;
	line-height: 1;
	color: var(--dp-forest);
}

/* Hulp: twee berichtjes, het antwoord komt net na de vraag. */
.dp-minikaart--gesprek {
	gap: 0.7rem;
	background: rgb(255 255 255 / 0.95);
}

.dp-bericht {
	max-width: 88%;
	margin: 0;
	padding: 0.6rem 0.85rem;
	border-radius: 1rem;
	line-height: 1.4;
}

.dp-bericht--klant {
	justify-self: start;
	border-end-start-radius: 0.3rem;
	background: var(--dp-sand);
}

.dp-bericht--simone {
	display: grid;
	grid-template-columns: 2rem 1fr;
	gap: 0.55rem;
	align-items: start;
	justify-self: end;
	border-end-end-radius: 0.3rem;
	background: var(--dp-leaf-soft);
}

.dp-bericht--simone img {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	object-fit: cover;
}

.dp-pakket__beeld[data-actief="4"] .dp-bericht--simone {
	animation: dp-bericht 500ms var(--dp-ease-out) 700ms both;
}

@keyframes dp-bericht {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

/* Checklist: de vinkjes gaan één voor één aan. */
.dp-minikaart--lijst ul {
	display: grid;
	gap: 0.45rem;
}

.dp-minikaart--lijst li {
	display: grid;
	grid-template-columns: 1.2rem 1fr;
	gap: 0.55rem;
	align-items: center;
}

.dp-minikaart--lijst svg {
	width: 1.2rem;
	height: 1.2rem;
	color: var(--dp-text-muted);
	opacity: 0.35;
}

.dp-pakket__beeld[data-actief="5"] .dp-minikaart--lijst svg {
	animation: dp-vinkje 350ms var(--dp-ease-out) both;
}

.dp-pakket__beeld[data-actief="5"] .dp-minikaart--lijst li:nth-child(1) svg { animation-delay: 500ms; }
.dp-pakket__beeld[data-actief="5"] .dp-minikaart--lijst li:nth-child(2) svg { animation-delay: 800ms; }
.dp-pakket__beeld[data-actief="5"] .dp-minikaart--lijst li:nth-child(3) svg { animation-delay: 1100ms; }
.dp-pakket__beeld[data-actief="5"] .dp-minikaart--lijst li:nth-child(4) svg { animation-delay: 1400ms; }

@keyframes dp-vinkje {
	from {
		opacity: 0.35;
		color: var(--dp-text-muted);
		transform: scale(0.8);
	}

	60% {
		transform: scale(1.25);
	}

	to {
		opacity: 1;
		color: var(--dp-forest);
		transform: scale(1);
	}
}

/* --- De onderdelen ------------------------------------------------------- */

.dp-pakket__lijst {
	display: grid;
	gap: 0.75rem;
}

.dp-onderdeel {
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	transition:
		border-color var(--dp-transition),
		box-shadow var(--dp-transition);
}

.dp-onderdeel:hover,
.dp-onderdeel[open] {
	border-color: var(--dp-line-strong);
	box-shadow: var(--dp-shadow-m);
}

.dp-onderdeel__kop {
	display: grid;
	grid-template-columns: 2.9rem 1fr auto 1.6rem;
	gap: 1.1rem;
	align-items: center;
	padding: 1.35rem 1.5rem;
	list-style: none;
	cursor: pointer;
}

/* Het standaard driehoekje van de browser weg: we hebben ons eigen plusje. */
.dp-onderdeel__kop::-webkit-details-marker {
	display: none;
}

.dp-onderdeel__kop:focus-visible {
	border-radius: var(--dp-radius-l);
}

/* Gekleurde bolletjes zonder rand, afwisselend in de accentkleuren. */
.dp-onderdeel__nummer {
	display: grid;
	place-items: center;
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 50%;
	background: var(--dp-leaf);
	font-family: var(--dp-font-display);
	font-size: 1.1rem;
	font-weight: var(--dp-weight-display);
	color: var(--dp-forest);
}

.dp-onderdeel:nth-child(2) .dp-onderdeel__nummer {
	background: var(--dp-peach-soft);
}

/* Zacht, in de lichte CTA-tint: geen hard donker bolletje tussen de rest. */
.dp-onderdeel:nth-child(3) .dp-onderdeel__nummer {
	background: var(--dp-lime-soft);
}

/* Een diepere groene tint uit de blad-familie. */
.dp-onderdeel:nth-child(4) .dp-onderdeel__nummer {
	background: #b3cb6e;
}

.dp-onderdeel:nth-child(5) .dp-onderdeel__nummer {
	background: var(--dp-leaf-soft);
}

.dp-onderdeel__titels {
	display: grid;
	gap: 0.1rem;
}

.dp-onderdeel__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-onderdeel__sub {
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
}

.dp-onderdeel__waarde {
	padding: 0.35em 0.8em;
	border: var(--dp-border) solid var(--dp-pil-rand);
	border-radius: var(--dp-radius-pill);
	background: var(--dp-paper);
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
	white-space: nowrap;
}

/*
  Een los plusje, dik genoeg om op zichzelf te staan: geen rondje, geen rand,
  zodat het niet concurreert met de gekleurde nummers links. Open draait het
  een achtste slag en wordt het een kruisje.
*/
.dp-onderdeel__plus {
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	color: var(--dp-forest);
	transition: transform 400ms var(--dp-ease-out);
}

.dp-onderdeel__plus svg {
	width: 1.6rem;
	height: 1.6rem;
	stroke-width: 2.6;
}

.dp-onderdeel[open] .dp-onderdeel__plus {
	transform: rotate(135deg);
}

.dp-onderdeel__inhoud {
	--dp-flow: 0.8rem;

	padding: 0 1.75rem 1.6rem calc(1.5rem + 2.9rem + 1.1rem);
	color: var(--dp-text-muted);
}

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

/*
  Soepel open- en dichtklappen. Browsers die dit kennen animeren de hoogte;
  de rest klapt direct open, wat ook prima werkt.
*/
@supports (interpolate-size: allow-keywords) {
	.dp-pakket {
		interpolate-size: allow-keywords;
	}

	.dp-onderdeel::details-content {
		height: 0;
		overflow: clip;
		opacity: 0;
		transition:
			height 500ms var(--dp-ease-out),
			opacity 400ms var(--dp-ease),
			content-visibility 500ms allow-discrete;
	}

	.dp-onderdeel[open]::details-content {
		height: auto;
		opacity: 1;
	}
}

@media (width < 62rem) {
	/* minmax(0, 1fr): een gewone 1fr wordt minstens zo breed als de breedste
	   regel erin, en dan loopt het pakket op een telefoon uit beeld. */
	.dp-pakket__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.dp-pakket__beeld {
		position: relative;
		inset-block-start: auto;
		max-width: 30rem;
	}
}

/* ==========================================================================
   7b. WAT ER IN DE TEMPLATES ZIT
   ========================================================================== */

/* Een plek waar nog een getal of tekst van Simone moet komen. */
.dp-placeholder {
	padding: 0 0.3em;
	border-radius: 0.3em;
	background: var(--dp-peach-soft);
	color: var(--dp-text-strong);
	font-weight: var(--dp-weight-bold);
}

/* De tabjes: een pill met drie standen, zoals een schakelaar in een app. */
.dp-settabs {
	position: relative;
	display: flex;
	width: max-content;
	max-width: 100%;
	margin: 0 auto var(--dp-space-l);
	padding: 0.3rem;
	border: var(--dp-border) solid var(--dp-pil-rand);
	border-radius: var(--dp-radius-pill);
	background: #fff;
}

/* Het zachtgroene vlakje achter de gekozen set schuift van links naar rechts
   in plaats van te verspringen. Daarom zijn de drie knoppen precies even
   breed: dan is het vlakje exact een derde en klopt de verschuiving altijd. */
.dp-settabs::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset-block: 0.3rem;
	inset-inline-start: 0.3rem;
	width: calc((100% - 0.6rem) / 3);
	border-radius: var(--dp-radius-pill);
	background: var(--dp-leaf-soft);
	transition: translate 400ms var(--dp-ease-out);
}

.dp-settabs:has(.dp-settabs__tab:nth-child(2)[aria-selected="true"])::before {
	translate: 100% 0;
}

.dp-settabs:has(.dp-settabs__tab:nth-child(3)[aria-selected="true"])::before {
	translate: 200% 0;
}

.dp-settabs__tab {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	padding: 0.6rem 1.2rem;
	border: 0;
	border-radius: var(--dp-radius-pill);
	background: transparent;
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-muted);
	white-space: nowrap;
	cursor: pointer;
	transition: color 350ms var(--dp-ease);
}

.dp-settabs__tab:hover {
	color: var(--dp-forest);
}

.dp-settabs__tab[aria-selected="true"] {
	color: var(--dp-text-strong);
}

.dp-schermen__rij {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1.25rem, 0.8rem + 1.5vw, 2.25rem);
	padding-block: 1rem 0.5rem;
}

/*
  Wisselen van set: de kaarten van de nieuwe set komen één voor één omhoog.
  Zo voelt het als een overgang, en niet alsof de pagina springt.
*/
@media (prefers-reduced-motion: no-preference) {
	.dp-schermen:not([hidden]) .dp-duo {
		animation: dp-kaart-op 600ms var(--dp-ease-out) both;
	}

	.dp-schermen:not([hidden]) .dp-duo:nth-child(2) { animation-delay: 60ms; }
	.dp-schermen:not([hidden]) .dp-duo:nth-child(3) { animation-delay: 120ms; }
	.dp-schermen:not([hidden]) .dp-duo:nth-child(4) { animation-delay: 180ms; }
	.dp-schermen:not([hidden]) .dp-duo:nth-child(5) { animation-delay: 240ms; }
}

@keyframes dp-kaart-op {
	from {
		opacity: 0;
		transform: translateY(24px) scale(0.97);
	}
}

/* --- Twee varianten als gestapelde kaarten -----------------------------------
   Variant 2 ligt schuin achter variant 1. Bij hover schuiven ze uit elkaar tot
   ze netjes naast elkaar staan, en komt dit paginatype boven de rest te liggen.
*/

.dp-duo {
	position: relative;
	display: grid;
	gap: 0.9rem;
	width: clamp(9.5rem, 6rem + 5.5vw, 12.5rem);
}

.dp-duo:hover {
	z-index: 5;
}

.dp-duo__stapel {
	position: relative;
	aspect-ratio: 5 / 7;
}

.dp-duo__kaart {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-m);
	background: #fff;
	box-shadow: var(--dp-shadow-m);
	transition:
		transform 650ms var(--dp-ease-out),
		box-shadow 650ms var(--dp-ease-out);
}

.dp-duo__kaart--a {
	z-index: 2;
	transform: rotate(-2deg);
}

.dp-duo__kaart--b {
	transform: translate(10%, -5%) rotate(6deg);
}

.dp-duo:hover .dp-duo__kaart--a {
	transform: translateX(-54%) rotate(0deg);
	box-shadow: var(--dp-shadow-l);
}

.dp-duo:hover .dp-duo__kaart--b {
	transform: translateX(54%) rotate(0deg);
	box-shadow: var(--dp-shadow-l);
}

.dp-duo__balk {
	display: flex;
	flex: none;
	gap: 0.22rem;
	padding: 0.4rem 0.55rem;
	border-bottom: var(--dp-border) solid var(--dp-line);
	background: #f3f5ef;
}

.dp-duo__balk span {
	width: 0.35rem;
	height: 0.35rem;
	border-radius: 50%;
	background: rgb(18 43 7 / 0.18);
}

.dp-duo__pagina {
	flex: 1;
	overflow: hidden;
}

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

/* Een placeholder voor een screenshot die nog komt. */
.dp-duo__kaart--leeg .dp-duo__pagina {
	display: grid;
	place-items: center;
	background:
		repeating-linear-gradient(135deg, transparent 0 10px, rgb(18 43 7 / 0.04) 10px 20px),
		var(--dp-leaf-soft);
}

.dp-duo__kaart--b.dp-duo__kaart--leeg .dp-duo__pagina {
	background:
		repeating-linear-gradient(135deg, transparent 0 10px, rgb(18 43 7 / 0.04) 10px 20px),
		var(--dp-peach-soft);
}

.dp-duo__leeg {
	font-family: var(--dp-font-display);
	font-size: 1rem;
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1.3;
	color: var(--dp-forest);
	text-align: center;
}

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

.dp-duo__soort {
	max-width: none;
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
	text-align: center;
}

.dp-duo__soort span {
	display: block;
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-body);
	color: var(--dp-text-muted);
}

/* --- Wat er meekomt ------------------------------------------------------- */

.dp-meekomt {
	display: grid;
	gap: var(--dp-space-xl);
	margin-top: var(--dp-space-2xl);
}

.dp-meekomt__blok h3 {
	margin-bottom: var(--dp-space-m);
	font-size: var(--dp-size-h3);
	text-align: center;
}

/* Het knipoogje onder de kop, in Figtree. De kop schuift er dichter op. */
.dp-meekomt__blok h3:has(+ .dp-meekomt__sub) {
	margin-bottom: 0.3rem;
}

.dp-meekomt__sub {
	max-width: none;
	margin-bottom: var(--dp-space-m);
	color: var(--dp-text-muted);
	text-align: center;
}

.dp-meekomt__bubbels {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.55rem;
	max-width: 50rem;
	margin-inline: auto;
}

/* Dezelfde pill als elders: iets kleiner, iets steviger. */
.dp-meekomt__bubbels .dp-bubble {
	padding: 0.5em 1em;
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
}

/* Lange, rustige kaarten met een icoon, zonder uitleg. */
.dp-functies {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
}

.dp-functie {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	padding: 0.95rem 1.1rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-m);
	background: #fff;
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-strong);
	transition:
		transform 400ms var(--dp-ease-out),
		box-shadow 400ms var(--dp-ease-out),
		border-color 400ms var(--dp-ease);
}

/* Bij hover tilt de kaart op en draait het icoontje een tikje, in blad. */
.dp-functie:hover {
	transform: translateY(-3px);
	border-color: var(--dp-line-strong);
	box-shadow: var(--dp-shadow-m);
}

.dp-functie__icoon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: var(--dp-radius-s);
	background: var(--dp-paper);
	color: var(--dp-forest);
	transition:
		background-color 400ms var(--dp-ease),
		transform 400ms var(--dp-ease-out);
}

.dp-functie:hover .dp-functie__icoon {
	background: var(--dp-leaf);
	transform: rotate(-8deg) scale(1.08);
}

.dp-functie__icoon svg {
	width: 1.25rem;
	height: 1.25rem;
}

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

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

/* ==========================================================================
   BONUSSEN
   ========================================================================== */

/* Een zachte gloed bovenin, zodat het donkergroen niet vlak oogt. */
.dp-bonussen {
	background:
		radial-gradient(60% 40% at 50% 0%, rgb(207 222 124 / 0.12), transparent 70%),
		var(--dp-forest);
}

/*
  De stapel. Beide kaarten plakken bovenin het scherm vast (sticky), de tweede
  een stukje lager dan de eerste. De ruimte tussen de kaarten bepaalt hoe lang
  je scrolt voordat bonus 2 over bonus 1 heen schuift.
*/
.dp-bonussen__stapel {
	display: grid;
	gap: 22vh;
	timeline-scope: --dp-bonus-2;

	/* Even vasthouden als de stapel compleet is, voor hij doorscrolt. */
	padding-bottom: 12vh;
}

.dp-bonus {
	position: sticky;
	inset-block-start: 7rem;
	display: grid;
	grid-template-columns: minmax(0, 11fr) minmax(0, 12fr);
	gap: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
	padding: 0.75rem;
	border-radius: var(--dp-radius-section);
	background: #fff;
	color: var(--dp-text);
	box-shadow:
		0 1px 0 rgb(255 255 255 / 0.6) inset,
		0 40px 80px -40px rgb(0 0 0 / 0.7);
	transform-origin: 50% 0;
}

.dp-bonus--2 {
	inset-block-start: 8.5rem;
	view-timeline: --dp-bonus-2 block;
}

/*
  Terwijl bonus 2 omhoog schuift, zakt bonus 1 iets achteruit: een fractie
  kleiner en een tikje donkerder. Zo voelt het als een echte stapel.
*/
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.dp-bonus--1 {
			animation: dp-achteruit linear both;
			animation-timeline: --dp-bonus-2;
			animation-range: entry 0% contain 0%;
		}
	}
}

@keyframes dp-achteruit {
	to {
		transform: scale(0.95);
		filter: brightness(0.8);
	}
}

/* --- Het beeldvlak -------------------------------------------------------- */

.dp-bonus__vlak {
	position: relative;
	min-height: 26rem;
	overflow: hidden;
	border-radius: calc(var(--dp-radius-section) - 0.5rem);
}

.dp-bonus--1 .dp-bonus__vlak {
	background:
		radial-gradient(90% 70% at 20% 10%, rgb(255 255 255 / 0.55), transparent 60%),
		linear-gradient(160deg, #eef5cf 0%, var(--dp-leaf) 100%);
}

.dp-bonus--2 .dp-bonus__vlak {
	background:
		radial-gradient(90% 70% at 20% 10%, rgb(255 255 255 / 0.6), transparent 60%),
		linear-gradient(160deg, #ffe9dc 0%, var(--dp-peach) 100%);
}

.dp-bonus__mockup {
	position: absolute;
	inset-inline-end: 6%;
	inset-block-end: 6%;
	width: min(400px, 72%);
	filter: drop-shadow(0 26px 30px rgb(18 43 7 / 0.3));
}

/* De Google-bundel is groot genoeg om uit het vlak te steken. */
.dp-bonus__mockup--groot {
	inset-inline-end: -14%;
	inset-block-end: -10%;
	width: 108%;
	max-width: none;
}

/* Bonus 1: een schrijftip als briefje, schuin op het vlak geplakt. */
.dp-bonus__briefje {
	position: absolute;
	z-index: 2;
	inset-block-start: 8%;
	inset-inline-start: 7%;
	display: grid;
	gap: 0.35rem;
	width: min(17rem, 62%);
	padding: 0.9rem 1rem;
	border-radius: var(--dp-radius-s);
	background: #fff;
	box-shadow: 0 16px 30px -18px rgb(18 43 7 / 0.5);
	font-size: var(--dp-size-small);
	line-height: 1.4;
	color: var(--dp-text);
	transform: rotate(-3deg);
}

.dp-bonus__briefje s {
	color: var(--dp-text-muted);
	text-decoration-color: var(--dp-peach);
	text-decoration-thickness: 2px;
}

.dp-bonus__briefje strong {
	color: var(--dp-forest);
}

.dp-bonus__briefje-label {
	font-family: var(--dp-font-body);
	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);
}

/* De drie pagina's waar de Schrijfkit bij helpt, als tabjes. */
.dp-bonus__paginas {
	position: absolute;
	z-index: 2;
	inset-block-start: 9%;
	inset-inline-end: 7%;
	display: grid;
	gap: 0.35rem;
}

.dp-bonus__paginas li {
	padding: 0.3em 0.8em;
	border: var(--dp-border) solid var(--dp-pil-rand);
	border-radius: var(--dp-radius-pill);
	background: rgb(255 255 255 / 0.75);
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-forest);
	text-align: center;
}

/*
  Bonus 2: een zoekopdracht in Google. Bij het scrollen zakt de trainer met de
  achterhaalde methodes naar beneden en schuift jouw praktijk erboven. We
  beloven geen plek 1, alleen dat je boven die ander komt te staan.
*/
.dp-zoek {
	position: absolute;
	z-index: 2;
	inset-block-start: 7%;
	inset-inline: 6% 9%;
	display: grid;
	gap: 0.75rem;
	padding: 0.9rem;
	border-radius: var(--dp-radius-m);
	background: #fff;
	box-shadow: 0 20px 36px -20px rgb(18 43 7 / 0.5);
}

.dp-zoek__balk {
	display: flex;
	gap: 0.55rem;
	align-items: center;
	padding: 0.55rem 0.95rem;
	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-zoek__loep {
	display: grid;
	flex: none;
	color: var(--dp-text-muted);
}

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

/*
  Beide resultaten zijn even hoog (1fr), zodat ze precies één rij hoeven op te
  schuiven om van plek te wisselen.
*/
.dp-zoek__resultaten {
	--dp-zoek-gat: 0.5rem;

	display: grid;
	grid-auto-rows: 1fr;
	gap: var(--dp-zoek-gat);
}

.dp-zoek__resultaat {
	display: grid;
	grid-template-columns: 1.9rem 1fr;
	gap: 0.65rem;
	align-items: start;
	padding: 0.55rem 0.6rem;
	border-radius: var(--dp-radius-s);
}

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

.dp-zoek__resultaat--fout {
	opacity: 0.5;
}

.dp-zoek__icoon {
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	border: var(--dp-border) solid var(--dp-pil-rand);
	border-radius: 50%;
	background: #fff;
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	line-height: 1;
	color: var(--dp-text-muted);
}

.dp-zoek__icoon--goed {
	background: var(--dp-forest);
	color: var(--dp-paper);
}

.dp-zoek__tekst {
	display: grid;
	gap: 0.05rem;
	line-height: 1.3;
}

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

.dp-zoek__titel {
	font-size: 0.98rem;
	font-weight: var(--dp-weight-bold);
	color: #1f4d8c; /* het bekende blauw van een zoekresultaat */
}

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

/*
  De wissel. Het eindbeeld (jouw praktijk boven) is de gewone opmaak; de
  animatie begint vanuit de omgekeerde volgorde. Zo ziet iemand zonder
  scroll-animaties meteen het goede eindbeeld.
*/
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.dp-zoek__resultaat--goed,
		.dp-zoek__resultaat--fout {
			animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
			animation-fill-mode: both;
			animation-timeline: --dp-bonus-2;
			animation-range: contain 5% contain 50%;
		}

		.dp-zoek__resultaat--goed {
			animation-name: dp-zoek-omhoog;
		}

		.dp-zoek__resultaat--fout {
			animation-name: dp-zoek-omlaag;
		}
	}
}

@keyframes dp-zoek-omhoog {
	from {
		transform: translateY(calc(100% + var(--dp-zoek-gat)));
		background: transparent;
	}

	to {
		transform: none;
	}
}

@keyframes dp-zoek-omlaag {
	from {
		transform: translateY(calc(-100% - var(--dp-zoek-gat)));
		opacity: 1;
	}

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

/* --- De tekst -------------------------------------------------------------- */

.dp-bonus__tekst {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem) clamp(1rem, 0.5rem + 1.5vw, 2.25rem) clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem) 0;
}

.dp-bonus__boven {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	align-self: stretch;
	margin-bottom: var(--dp-space-s);
}

.dp-bonus__label {
	margin: 0;
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	letter-spacing: var(--dp-tracking-eyebrow);
	text-transform: uppercase;
	color: rgb(78 122 23 / 0.75);
}

.dp-bonus__titel {
	margin-top: 0.5rem;
	font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
	line-height: 1.08;
}

.dp-bonus__uitleg {
	margin-top: 0.8rem;
	color: var(--dp-text-muted);
}

/* De vinkjes onder "Hiermee ga je" poppen één voor één op zodra het blok in
   beeld komt, net als in de statuskaart op het zorgplan. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.dp-bonus__lijst svg {
			animation: dp-vink-pop 600ms var(--dp-ease-out) both;
			animation-timeline: view();
			animation-range: entry 30% entry 85%;
		}

		.dp-bonus__lijst li:nth-child(2) svg { animation-range: entry 38% entry 92%; }
		.dp-bonus__lijst li:nth-child(3) svg { animation-range: entry 46% entry 100%; }
		.dp-bonus__lijst li:nth-child(4) svg { animation-range: entry 54% cover 8%; }
	}
}

.dp-bonus__hulp-kop {
	margin-top: var(--dp-space-m);
	padding-top: var(--dp-space-s);
	align-self: stretch;
	border-top: var(--dp-border) solid var(--dp-line);
	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-bonus__lijst {
	margin-top: 0.7rem;
}

/*
  De sectie is donker, maar de kaarten zijn wit. De regels die koppen en
  vinkjes in donkere secties licht maken, zetten we hier terug naar donker.
*/
.dp-bonus .dp-bonus__titel {
	color: var(--dp-forest);
}

.dp-bonus .dp-checklist svg {
	fill: none;
	stroke-width: 2.2;
}

@media (width < 62rem) {
	.dp-bonussen__stapel {
		gap: var(--dp-space-m);
		padding-bottom: 0;
	}

	.dp-bonus {
		position: relative;
		inset-block-start: auto;
		grid-template-columns: minmax(0, 1fr);
	}

	.dp-bonus__tekst {
		padding: 0 1rem 1.5rem;
	}
}

/* ==========================================================================
   BONNETJE
   ========================================================================== */

/*
  Bijna zwart in plaats van donkergroen: zo is dit blok te onderscheiden van
  de bonussen erboven, terwijl het in dezelfde donkere familie blijft.
*/
.dp-bon-sectie {
	background:
		radial-gradient(50% 45% at 50% 30%, rgb(207 222 124 / 0.1), transparent 70%),
		var(--dp-ink);
}

/* --- De printer ---------------------------------------------------------- */

.dp-printer {
	position: relative;
	display: grid;
	justify-items: center;
	view-timeline: --dp-printer block;
}

.dp-printer__kast {
	position: relative;
	z-index: 2;
	width: min(36rem, 100%);
	height: 2.1rem;
	border: var(--dp-border) solid var(--dp-line-on-dark);
	border-radius: var(--dp-radius-m) var(--dp-radius-m) 0.6rem 0.6rem;
	background: linear-gradient(180deg, #2a3824 0%, #172112 100%);
	box-shadow: 0 16px 24px -10px rgb(0 0 0 / 0.7);
}

/* De sleuf waar de bon uitkomt, en een groen lampje dat laat zien dat hij aan staat. */
.dp-printer__kast::after {
	content: "";
	position: absolute;
	inset-inline: calc(50% - min(15.6rem, 47%));
	inset-block-end: 0.5rem;
	height: 4px;
	border-radius: 4px;
	background: #050904;
	box-shadow: 0 1px 0 rgb(255 255 255 / 0.08);
}

.dp-printer__lampje {
	position: absolute;
	inset-block-start: 0.55rem;
	inset-inline-end: 1rem;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--dp-leaf);
	box-shadow: 0 0 8px var(--dp-leaf);
}

/*
  Het stuk onder de sleuf. Het begint precies bij de zwarte sleuf en ligt vóór
  de onderrand van de printer: zo komt de bon echt uit die sleuf. Alles wat
  nog "in de printer" zit, valt erboven weg. De schaduw volgt de kartelrand
  (drop-shadow), zodat er geen rechte rand onder de driehoekjes doorloopt.
*/
.dp-printer__uitvoer {
	position: relative;
	z-index: 3;
	width: min(30rem, 92%);
	margin-top: calc(-0.5rem - 2px);
	overflow: hidden;
	padding-bottom: 2.5rem;
	filter: drop-shadow(0 22px 22px rgb(0 0 0 / 0.5));
}

/* Een zweem schaduw vlak onder de sleuf, alsof het papier eruit krult. */
.dp-printer__uitvoer::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset-inline: 0;
	inset-block-start: 0;
	height: 10px;
	background: linear-gradient(rgb(0 0 0 / 0.28), transparent);
	pointer-events: none;
}

/* --- De bon zelf ----------------------------------------------------------- */

.dp-bon {
	position: relative;
	padding: 2.25rem 2rem 2rem;
	background: #fbfbf6;
	color: var(--dp-forest);
}

/*
  De afgescheurde onderrand: een rij kleine driehoekjes. Hij overlapt de bon
  een pixel, anders schemert er tijdens het bewegen een haarlijntje tussen.
*/
.dp-bon::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100% - 1px);
	height: 12px;

	/* Een haarlijn extra overlap: op sommige schermen bleef er anders een dun
	   randje van de bon onder de driehoekjes zichtbaar. */
	margin-top: -1px;
	background:
		linear-gradient(135deg, #fbfbf6 50%, transparent 50%) 0 0 / 16px 12px repeat-x,
		linear-gradient(-135deg, #fbfbf6 50%, transparent 50%) 0 0 / 16px 12px repeat-x;
}

/*
  Het printen. Terwijl je naar de printer scrolt, schuift de bon omlaag uit de
  sleuf. Browsers zonder scroll-animaties laten hem gewoon helemaal zien.
*/
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.dp-bon {
			animation: dp-printen linear both;
			animation-timeline: --dp-printer;
			animation-range: entry 25% cover 50%;
		}
	}
}

@keyframes dp-printen {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: none;
	}
}

.dp-bon__kop {
	display: grid;
	justify-items: center;
	gap: 0.85rem;
	padding-bottom: 1.25rem;
	border-bottom: 2px dashed rgb(18 43 7 / 0.2);
	text-align: center;
}

.dp-bon__kop img {
	width: auto;
	height: 2.4rem;
}

.dp-bon__kop p {
	font-size: var(--dp-size-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dp-text-muted);
}

.dp-bon__regels {
	display: grid;
	gap: 0.9rem;
	padding-block: 1.4rem;
	border-bottom: 2px dashed rgb(18 43 7 / 0.2);
}

.dp-bon__regel {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.5rem;
	align-items: end;
	font-size: var(--dp-size-small);
}

.dp-bon__naam {
	display: grid;
	font-weight: var(--dp-weight-medium);
	line-height: 1.3;
}

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

.dp-bon__regel--bonus .dp-bon__naam {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	align-items: center;
}

/* Kapitalen hebben geen staartletters, dus de tekst zit in de bovenste helft
   van de regel en oogt te hoog in de pill. Iets meer lucht boven dan onder
   zet hem optisch weer in het midden. */
.dp-bon__tag {
	padding: 0.32em 0.6em 0.2em;
	font-size: 0.7rem;
	font-weight: var(--dp-weight-bold);
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
}

.dp-bon__stippels {
	margin-bottom: 0.35em;
	border-bottom: 2px dotted rgb(18 43 7 / 0.25);
}

.dp-bon__bedrag {
	font-weight: var(--dp-weight-bold);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Het subtotaal op de bon, onder de regels, zoals op een echte kassabon. */
.dp-bon__totaal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-block: 1.1rem;
	border-bottom: 2px dashed rgb(18 43 7 / 0.2);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.dp-bon__totaal-bedrag {
	font-family: var(--dp-font-display);
	font-size: 1.6rem;
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	text-transform: none;
}

.dp-bon__voet {
	margin: 1.1rem auto 0;
	font-size: var(--dp-size-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	color: var(--dp-text-muted);
}

/* Een streepjescode als afsluiter. Alleen decoratie. */
.dp-bon__streepjes {
	display: block;
	width: 42%;
	height: 2.4rem;
	margin: 1.1rem auto 0;
	background: repeating-linear-gradient(
		90deg,
		var(--dp-forest) 0 2px,
		transparent 2px 4px,
		var(--dp-forest) 4px 5px,
		transparent 5px 8px,
		var(--dp-forest) 8px 11px,
		transparent 11px 13px
	);
	opacity: 0.8;
}

/* --- Het zegel ------------------------------------------------------------
   Draaiende tekst rondom, en in het midden een klein lime rondje met een
   klein donker vinkje. Geen rand, geen vlak eromheen.
*/

.dp-zegel {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: clamp(8.5rem, 7rem + 4vw, 11rem);
	aspect-ratio: 1;
}

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

.dp-zegel__tekst text {
	fill: var(--dp-lime);
	font-family: var(--dp-font-body);
	font-size: 13px;
	font-weight: var(--dp-weight-bold);
	letter-spacing: 0.12em;
}

@media (prefers-reduced-motion: no-preference) {
	.dp-zegel__tekst {
		animation: dp-draaien 24s linear infinite;
	}
}

@keyframes dp-draaien {
	to {
		transform: rotate(1turn);
	}
}

.dp-zegel__vink {
	display: grid;
	place-items: center;
	width: 40%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--dp-lime);
	color: var(--dp-forest);
	box-shadow: 0 0 30px rgb(230 255 86 / 0.35);
}

.dp-zegel__vink svg {
	width: 45%;
	height: 45%;
	stroke-width: 2.8;
}


/* ==========================================================================
   PRIJS — het afrekenscherm
   Loopt door op de ondergrond van het bonnetje. Eén glazen paneel, daaronder
   twee reviews als losse citaten en de garantie als eigen moment.
   ========================================================================== */

/* Een avatar met een letter, voor wie (nog) geen foto heeft. */
.dp-review__avatar--letter {
	display: grid;
	place-items: center;
	flex: none;
	background: var(--dp-leaf);
	font-family: var(--dp-font-display);
	font-weight: var(--dp-weight-display);
	color: var(--dp-forest);
}

/*
  Precies dezelfde kleur als de onderkant van het bonnetje, zonder eigen gloed:
  zo is er geen naad te zien en loopt het als één geheel door. Weinig ruimte
  boven (het hoort bij de bon), meer ruimte onder (naar de garantie).
*/
.dp-prijsB {
	padding-block: calc(var(--dp-section-y) * 0.35) calc(var(--dp-section-y) * 1.3);
	background: var(--dp-ink);
}

.dp-bon-sectie {
	padding-bottom: calc(var(--dp-section-y) * 0.6);
}

/*
  Het paneel links, de reviews rechts. Zo staan er na het gecentreerde
  bonnetje niet nog eens drie gecentreerde blokken onder elkaar.
*/
.dp-prijs__raster {
	display: grid;
	grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
	gap: clamp(2.5rem, 1rem + 5vw, 6rem);
	align-items: center;
	max-width: 62rem;
	margin-inline: auto;
}

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

/*
  Het paneel. Een zacht verloop van blad naar perzik, een rand die van lime
  naar perzik verloopt, en bij hover tilt het op: de rand licht op en er
  glijdt een glans overheen. Geen backdrop-filter: die gaf bij het scrollen
  een rare gloed aan de rand.
*/
.dp-kassa {
	position: relative;
	isolation: isolate;
	display: grid;
	gap: var(--dp-space-s);
	width: 100%;
	max-width: 30rem;
	padding: clamp(1.75rem, 1rem + 3vw, 2.75rem);
	border-radius: var(--dp-radius-section);
	background:
		radial-gradient(90% 60% at 50% 0%, rgb(207 222 124 / 0.16), transparent 70%),
		linear-gradient(165deg, rgb(231 238 221 / 0.07), rgb(231 238 221 / 0.02) 55%, rgb(254 161 117 / 0.08));
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.08),
		0 40px 80px -40px rgb(0 0 0 / 0.8);
	text-align: center;
	transition:
		transform 600ms var(--dp-ease-out),
		box-shadow 600ms var(--dp-ease-out);
}

/* De verlooprand: een laagje van 1px, uitgeknipt met een masker. */
.dp-kassa::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(140deg, rgb(230 255 86 / 0.55), rgb(207 222 124 / 0.12) 35%, rgb(231 238 221 / 0.08) 65%, rgb(254 161 117 / 0.45));
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0.7;
	transition: opacity 600ms var(--dp-ease);
	pointer-events: none;
}

/* De glans die bij hover van links naar rechts over het paneel glijdt. */
.dp-kassa::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / 0.07) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat;
	transition: background-position 1200ms var(--dp-ease-out);
	pointer-events: none;
}

.dp-kassa:hover {
	transform: translateY(-5px);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.1),
		0 50px 90px -40px rgb(0 0 0 / 0.9),
		0 0 70px -20px rgb(207 222 124 / 0.25);
}

.dp-kassa:hover::before {
	opacity: 1;
}

.dp-kassa:hover::after {
	background-position: -30% 0;
}

.dp-kassa__regel {
	display: flex;
	justify-content: space-between;
	padding-bottom: var(--dp-space-s);
	border-bottom: 2px dashed var(--dp-line-on-dark);
	font-size: var(--dp-size-small);
	color: var(--dp-text-on-dark-muted);
}

/*
  De keuze als schakelaar met twee standen. Het zijn gewone radioknoppen,
  dus met het toetsenbord en een schermlezer werkt het vanzelf.
*/
.dp-kassa__keuze {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: var(--dp-space-s) 0 0;
	padding: 0.3rem;
	border: var(--dp-border) solid var(--dp-line-on-dark);
	border-radius: var(--dp-radius-pill);
}

/* Het lichte vlakje achter de gekozen termijn schuift van links naar rechts,
   net als bij de templatesets. De twee knoppen zijn even breed, dus het
   vlakje is precies de helft. */
.dp-kassa__keuze::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset-block: 0.3rem;
	inset-inline-start: 0.3rem;
	width: calc((100% - 0.6rem) / 2);
	border-radius: var(--dp-radius-pill);
	background: var(--dp-paper);
	transition: translate 400ms var(--dp-ease-out);
}

.dp-kassa__keuze:has(.dp-kassa__optie:nth-of-type(2) input:checked)::before {
	translate: 100% 0;
}

.dp-kassa__optie {
	position: relative;
	z-index: 1;
	cursor: pointer;
}

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

.dp-kassa__optie span {
	display: block;
	padding: 0.6rem 0.8rem;
	border-radius: var(--dp-radius-pill);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-on-dark-muted);
	transition:
		background-color var(--dp-transition),
		color var(--dp-transition);
}

.dp-kassa__optie input:checked + span {
	color: var(--dp-forest);
}

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

/* De twee standen liggen op dezelfde plek; alleen de gekozen is zichtbaar. */
.dp-kassa__uitkomst {
	display: grid;
	margin-block: var(--dp-space-s);
}

.dp-kassa__stand {
	grid-area: 1 / 1;
	transition:
		opacity 300ms var(--dp-ease),
		transform 400ms var(--dp-ease-out);
}

.dp-kassa[data-keuze="1"] [data-stand="2"],
.dp-kassa[data-keuze="2"] [data-stand="1"],
.dp-kassa:not([data-keuze]) [data-stand="2"] {
	opacity: 0;
	transform: translateY(8px);
	visibility: hidden;
}

.dp-kassa__bedrag {
	max-width: none;
	font-family: var(--dp-font-display);
	font-size: clamp(3.25rem, 2.3rem + 4vw, 5rem);
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--dp-paper);
}

.dp-kassa__sub {
	margin: 0.5rem auto 0;
	font-size: var(--dp-size-small);
	color: var(--dp-text-on-dark-muted);
}

/* Direct onder de knop: de geruststelling op het moment van twijfel. */
.dp-kassa__zeker {
	display: flex;
	gap: 0.45rem;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	font-size: var(--dp-size-small);
	color: var(--dp-text-on-dark-muted);
}

.dp-kassa__zeker svg {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--dp-lime);
}

/* --- De reviews als losse citaten -------------------------------------------
   Geen kaarten en geen randen: gewoon twee stemmen naast elkaar, in witte
   letters op het donker. Zo blijft het geheel luchtig.
*/
.dp-stemmen {
	display: grid;
	gap: var(--dp-space-m);
}

/* Een dun lijntje tussen de twee reviews, verder niets. */
.dp-stem + .dp-stem {
	padding-top: var(--dp-space-m);
	border-top: var(--dp-border) solid var(--dp-line-on-dark);
}

.dp-stem {
	display: grid;
	gap: 1rem;
	align-content: start;
	margin: 0;
}

.dp-stem__tekst {
	margin: 0;
}

.dp-stem__tekst p {
	max-width: none;
	font-family: var(--dp-font-display);
	font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
	font-weight: 400;
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1.4;
	color: var(--dp-paper);
}

.dp-stem__wie {
	display: flex;
	gap: 0.7rem;
	align-items: center;
}

.dp-stem__wie .dp-review__avatar {
	border-color: var(--dp-line-on-dark);
}

.dp-stem__wie .dp-review__name {
	color: var(--dp-text-on-dark-muted);
}

.dp-stem__wie .dp-review__role {
	color: var(--dp-text-on-dark-muted);
}


/* ==========================================================================
   GARANTIE
   ========================================================================== */

/*
  Diep roodbruin, zoals in Simones eigen garantieblok. Warm, en duidelijk iets
  anders dan het groen en zwart van de secties ervoor.
*/
.dp-garantie {
	background:
		radial-gradient(45% 60% at 20% 40%, rgb(254 161 117 / 0.12), transparent 70%),
		var(--dp-bast);
}

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

.dp-garantie__beeld {
	position: relative;
	max-width: 30rem;
}

.dp-garantie__foto {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--dp-radius-section);
}

/* Het zegel valt over de rechterbovenhoek van de foto. */
.dp-garantie__zegel {
	position: absolute;
	z-index: 2;
	inset-block-start: -3rem;
	inset-inline-end: -3rem;
}

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

	display: grid;
	gap: var(--dp-space-s);
	justify-items: start;
	color: var(--dp-text-on-dark);
}

/* Het cursieve deel van de kop in lime, zoals in het origineel. */
.dp-garantie__tekst h2 em {
	color: var(--dp-lime);
}

.dp-garantie__tekst h2 {
	font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.5rem);
	line-height: 1.02;
}

.dp-garantie__tekst .dp-lead {
	color: var(--dp-paper);
}

/* Dikke, onderstreepte sleutelzinnen in de lopende tekst: zo kun je de
   belofte scannen zonder hem helemaal te lezen. Zelfde stijl als op de
   homepage en in het brugblok. */
.dp-garantie__tekst b,
.dp-nodig .dp-lead b {
	font-weight: var(--dp-weight-bold);
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.22em;
	text-decoration-skip-ink: none;
}

.dp-garantie__tekst b {
	color: var(--dp-paper);
	text-decoration-color: var(--dp-peach);
}

.dp-nodig .dp-lead b {
	color: var(--dp-text-strong);
	text-decoration-color: var(--dp-leaf);
}

/* Alleen de onderstreepte zin is vet; de hele alinea vet maken maakt niets
   meer belangrijk. */
.dp-garantie__belofte {
	color: var(--dp-paper);
}

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

	.dp-garantie__zegel {
		inset-block-start: -2rem;
		inset-inline-end: -1rem;
	}
}

/* ==========================================================================
   12. WAT JE NODIG HEBT
   Links uitklapbare kaarten, rechts een klein bonnetje dat meeloopt.
   ========================================================================== */

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

.dp-nodig__kaarten {
	display: grid;
	/* Niet breder dan het vak, ook niet door een lange prijs. */
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

.dp-ding {
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	transition:
		border-color 350ms var(--dp-ease),
		box-shadow 350ms var(--dp-ease),
		transform 350ms var(--dp-ease-out);
}

.dp-ding:hover {
	border-color: var(--dp-line-strong);
	box-shadow: var(--dp-shadow-m);
	transform: translateY(-2px);
}

.dp-ding[open] {
	border-color: var(--dp-line-strong);
	box-shadow: var(--dp-shadow-m);
	transform: none;
}

.dp-ding__kop {
	display: grid;
	grid-template-columns: 3.4rem 1fr auto 1.6rem;
	gap: 1.1rem;
	align-items: center;
	padding: 1.2rem 1.4rem;
	list-style: none;
	cursor: pointer;
}

.dp-ding__kop::-webkit-details-marker {
	display: none;
}

/* De logotegel: een zacht gekleurd vierkant met het icoon erin. */
.dp-ding__logo {
	display: grid;
	place-items: center;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: var(--dp-radius-m);
	color: var(--dp-forest);
	transition: transform 400ms var(--dp-ease-out);
}

.dp-ding__logo svg {
	width: 1.7rem;
	height: 1.7rem;
}

.dp-ding:hover .dp-ding__logo,
.dp-ding[open] .dp-ding__logo {
	transform: rotate(-6deg) scale(1.05);
}

.dp-ding__logo--wp {
	background: var(--dp-leaf);
}

.dp-ding__logo--hosting {
	background: var(--dp-peach);
}

.dp-ding__logo--elementor {
	background: var(--dp-forest);
	color: var(--dp-paper);
}

.dp-ding__titels {
	display: grid;
	gap: 0.1rem;
}

.dp-ding__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: 1.2;
	color: var(--dp-text-strong);
}

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

.dp-ding__prijs {
	padding: 0.3em 0.85em;
	border: var(--dp-border) solid var(--dp-pil-rand);
	border-radius: var(--dp-radius-pill);
	background: var(--dp-paper);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
	white-space: nowrap;
}

.dp-ding__plus {
	display: grid;
	place-items: center;
	color: var(--dp-forest);
	transition: transform 400ms var(--dp-ease-out);
}

.dp-ding__plus svg {
	width: 1.5rem;
	height: 1.5rem;
	stroke-width: 2.6;
}

.dp-ding[open] .dp-ding__plus {
	transform: rotate(135deg);
}

.dp-ding__uitleg {
	display: grid;
	gap: 0.8rem;
	padding: 0 1.6rem 1.6rem calc(1.4rem + 3.4rem + 1.1rem);
	color: var(--dp-text-muted);
}

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

/* Het "let op" bij WordPress: een licht vlakje, zodat het niet overgelezen wordt. */
.dp-ding__let-op {
	padding: 0.75rem 1rem;
	border-radius: var(--dp-radius-s);
	background: var(--dp-leaf-soft);
	font-size: var(--dp-size-small);
	line-height: 1.5;
	color: var(--dp-text);
}

/* De link naar Theory7, met de affiliatenoot er direct naast. */
.dp-ding__link {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
	align-items: center;
	max-width: none;
	margin-top: 0.3rem;
}

.dp-ding__noot {
	flex: 1 1 14rem;
	font-size: var(--dp-size-xs);
	line-height: 1.45;
	color: var(--dp-text-muted);
}

@supports (interpolate-size: allow-keywords) {
	.dp-nodig {
		interpolate-size: allow-keywords;
	}

	.dp-ding::details-content {
		height: 0;
		overflow: clip;
		opacity: 0;
		transition:
			height 500ms var(--dp-ease-out),
			opacity 400ms var(--dp-ease),
			content-visibility 500ms allow-discrete;
	}

	.dp-ding[open]::details-content {
		height: auto;
		opacity: 1;
	}
}

/* --- Het kleine bonnetje ------------------------------------------------- */

.dp-jaarbon {
	position: sticky;
	inset-block-start: 7rem;
	padding: 1.75rem 1.6rem 1.5rem;
	background: #fbfbf6;
	box-shadow: var(--dp-shadow-l);
	color: var(--dp-forest);
	transform: rotate(1.5deg);
}

/* Dezelfde gekartelde onderrand als het grote bonnetje. */
.dp-jaarbon::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	height: 10px;
	background:
		linear-gradient(135deg, #fbfbf6 50%, transparent 50%) 0 0 / 14px 10px repeat-x,
		linear-gradient(-135deg, #fbfbf6 50%, transparent 50%) 0 0 / 14px 10px repeat-x;
}

.dp-jaarbon__kop {
	padding-bottom: 0.9rem;
	border-bottom: 2px dashed rgb(18 43 7 / 0.2);
	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-jaarbon__regels {
	display: grid;
	gap: 0.3rem;
	padding-block: 0.9rem;
	border-bottom: 2px dashed rgb(18 43 7 / 0.2);
}

.dp-jaarbon__regels li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.4rem 0.6rem;
	margin-inline: -0.6rem;
	border-radius: var(--dp-radius-s);
	font-size: var(--dp-size-small);
	font-variant-numeric: tabular-nums;
	transition: background-color 350ms var(--dp-ease);
}

.dp-jaarbon__regels li span:last-child {
	font-weight: var(--dp-weight-bold);
	white-space: nowrap;
}

/* De regel van de kaart die open staat licht op. */
.dp-jaarbon__regels li.is-actief {
	background: var(--dp-leaf-soft);
}

.dp-jaarbon__totaal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	max-width: none;
	padding-top: 0.9rem;
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.dp-jaarbon__totaal span:last-child {
	font-family: var(--dp-font-display);
	font-size: 1.5rem;
	font-variation-settings: var(--dp-fraunces-axes);
	text-transform: none;
	letter-spacing: 0;
}

.dp-jaarbon__noot {
	margin-top: 0.7rem;
	font-size: var(--dp-size-xs);
	line-height: 1.45;
	color: var(--dp-text-muted);
}

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

	.dp-jaarbon {
		position: static;
		max-width: 24rem;
	}

	.dp-ding__kop {
		grid-template-columns: 3rem minmax(0, 1fr) 1.4rem;
	}

	/* Onder de titel mag een lange prijs ("optioneel, vanaf € 37 per maand")
	   over twee regels, anders duwt hij de kaart buiten het scherm. */
	.dp-ding__prijs {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		white-space: normal;
	}

	.dp-ding__uitleg {
		padding-inline-start: 1.4rem;
	}
}

/* ==========================================================================
   13. INBEGREPEN
   ========================================================================== */

/* --- De drie beloftes ------------------------------------------------------ */

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

.dp-belofte {
	display: grid;
	align-content: start;
	gap: 0.8rem;
	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;
	transition:
		transform 450ms var(--dp-ease-out),
		box-shadow 450ms var(--dp-ease-out),
		border-color 450ms var(--dp-ease);
}

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

.dp-belofte__icoon {
	transition: transform 450ms var(--dp-ease-out);
}

.dp-belofte:hover .dp-belofte__icoon {
	transform: rotate(-8deg) scale(1.06);
}

.dp-belofte__icoon {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 0.4rem;
	border-radius: var(--dp-radius-m);
	color: var(--dp-forest);
}

.dp-belofte__icoon svg {
	width: 1.6rem;
	height: 1.6rem;
}

.dp-belofte--leaf .dp-belofte__icoon {
	background: var(--dp-leaf);
}

.dp-belofte--peach .dp-belofte__icoon {
	background: var(--dp-peach);
}

.dp-belofte--shell .dp-belofte__icoon {
	background: var(--dp-moss);
}

/* De kaart zet zijn eigen tekstkleur: hij is wit en kan dus ook op een donker
   blok staan, zonder dat de titel de lichte kleur van dat blok erft. */
.dp-belofte {
	color: var(--dp-text);
}

.dp-belofte__titel {
	font-size: var(--dp-size-h4);
	line-height: 1.15;
	color: var(--dp-text-strong);
}

/* Op een donker blok is de kaart niet wit maar doorzichtig wit met een licht
   randje, net als de andere kaarten daar (tegels, reviewkaarten). */
.dp-section--dark .dp-belofte {
	border-color: var(--dp-line-on-dark);
	background: rgb(255 255 255 / 0.04);
	color: var(--dp-text-on-dark);
}

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

.dp-section--dark .dp-belofte__titel {
	color: var(--dp-paper);
}

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

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

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

/* ==========================================================================
   14. ZELF GEBOUWD — de carrousel
   ========================================================================== */

.dp-galerij {
	overflow: clip; /* niet hidden: dan werken scrolleffecten erin niet */
	background:
		radial-gradient(40% 50% at 85% 20%, rgb(207 222 124 / 0.14), transparent 70%),
		radial-gradient(40% 50% at 10% 90%, rgb(254 161 117 / 0.1), transparent 70%),
		var(--dp-forest);
}

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

.dp-galerij__kop header {
	max-width: 40rem;
}

.dp-galerij__knoppen {
	display: flex;
	gap: 0.6rem;
}

/* Ronde knop met een pijl, voor de carrousel. */
.dp-rond {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	border: var(--dp-border) solid var(--dp-line-on-dark);
	border-radius: 50%;
	background: transparent;
	color: var(--dp-paper);
	cursor: pointer;
	transition:
		background-color var(--dp-transition),
		color var(--dp-transition),
		border-color var(--dp-transition);
}

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

.dp-rond svg {
	width: 1.2rem;
	height: 1.2rem;
}

.dp-carrousel {
	overflow: hidden;
	margin-inline: -0.5rem;
	padding: 0.5rem;
}

/*
  Het spoor schuift per drie sites opzij. Het script zet --dp-pagina en
  regelt de pijlen en bolletjes. Op smalle schermen staat er één site per
  keer in beeld, met een stukje van de volgende ernaast.
*/
.dp-carrousel__spoor {
	--dp-per-keer: 3;
	--dp-gat: clamp(1rem, 0.5rem + 1.5vw, 2rem);

	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--dp-per-keer) - 1) * var(--dp-gat)) / var(--dp-per-keer));
	gap: var(--dp-gat);
	transform: translateX(calc(var(--dp-pagina, 0) * -1 * (100% + var(--dp-gat))));
	transition: transform 700ms var(--dp-ease-out);
}

/* Bovenaan uitlijnen: anders rekt het venster op als een buurman een hogere
   onderregel heeft, en zie je een witte balk onder de pagina. */
.dp-klant {
	display: grid;
	align-content: start;
	gap: 0.9rem;
}

.dp-klant__venster {
	overflow: hidden;
	border-radius: var(--dp-radius-m);
	background: #fff;
	box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7);
	transition: transform 400ms var(--dp-ease-out);
}

.dp-klant__venster:hover {
	transform: translateY(-6px);
}

.dp-klant__balk {
	display: flex;
	gap: 0.3rem;
	align-items: center;
	padding: 0.55rem 0.75rem;
	background: #eef1e8;
}

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

.dp-klant__balk em {
	margin-inline-start: 0.6rem;
	padding: 0.15rem 0.7rem;
	border-radius: var(--dp-radius-pill);
	background: #fff;
	font-size: 0.72rem;
	font-style: normal;
	color: var(--dp-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Staand, zoals een telefoonscherm: een site lees je van boven naar beneden. */
.dp-klant__pagina {
	height: clamp(26rem, 18rem + 14vw, 36rem);
	overflow: hidden;
	container-type: size;
}

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

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

.dp-klant__onder {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}

.dp-klant__naam {
	min-width: 0;
	overflow: hidden;
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-on-dark);
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Een compacte knop: pijl dicht op de tekst. */
.dp-klant__onder .dp-btn {
	flex: none;
	gap: 0.4rem;
	padding: 0.5rem 0.95rem;
	font-size: var(--dp-size-small);
}

.dp-carrousel__bolletjes {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-top: var(--dp-space-l);
}

.dp-carrousel__bolletjes {
	gap: 0.2rem;
}

/* Klikbaar: het vlak is groter dan het bolletje, zodat je hem makkelijk raakt. */
.dp-carrousel__bolletjes button {
	display: grid;
	place-items: center;
	padding: 0.5rem 0.3rem;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.dp-carrousel__bolletjes button::before {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-radius: var(--dp-radius-pill);
	background: var(--dp-line-on-dark);
	transition:
		width 300ms var(--dp-ease-out),
		background-color 300ms var(--dp-ease);
}

.dp-carrousel__bolletjes button:hover::before {
	background: rgb(231 238 221 / 0.5);
}

.dp-carrousel__bolletjes button.is-actief::before {
	width: 1.6rem;
	background: var(--dp-lime);
}

@media (width < 62rem) {
	.dp-carrousel__spoor {
		--dp-per-keer: 1.15;
	}
}

/* ==========================================================================
   15. REVIEWS — het metselwerk
   ========================================================================== */

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

.dp-reviews__trust {
	margin-top: 0;
	justify-content: flex-start;
}

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

.dp-muur > * {
	margin: 0 0 var(--dp-space-m);
	break-inside: avoid;
}

/* Een Instagram-bericht, als los briefje tussen de reviews. */
/* Een schermafdruk van een Instagram-bericht. Weinig padding: de afdruk heeft
   zijn eigen witruimte al, en zo is het bericht zelf zo groot mogelijk. Er
   staat geen kopje boven — je ziet aan de afdruk zelf dat het Instagram is. */
.dp-dm {
	display: grid;
	gap: 0.6rem;
	padding: 0.85rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	transition:
		transform var(--dp-transition),
		box-shadow var(--dp-transition);
}

.dp-dm:hover {
	transform: translateY(-4px) rotate(-0.6deg);
	box-shadow: var(--dp-shadow-m);
}

/* Het bijschrift onder een DM gebruikt dezelfde onderdelen als een
   reviewkaart (naam boven, site eronder). Alleen geen profielfoto: die staat
   al in de schermafdruk zelf. */
.dp-dm__wie {
	/* Even ver ingesprongen als de tekst in de schermafdruk zelf, zodat naam en
	   site op één lijn staan met het bericht erboven. */
	padding: 0.1rem 0.4rem 0.2rem 3.6rem;
}

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

/* ==========================================================================
   16. VOOR WIE — twee kanten van één blad
   ========================================================================== */

.dp-tweezijden {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	max-width: 66rem;
	margin-inline: auto;
	overflow: hidden;
	border-radius: var(--dp-radius-section);
	box-shadow: var(--dp-shadow-l);
}

.dp-zijde {
	display: grid;
	align-content: start;
	gap: var(--dp-space-s);
	padding: clamp(2rem, 1.2rem + 3vw, 3.75rem);
}

/* Wel is de kant die eruit mag springen: iets voller van kleur dan Niet. */
.dp-zijde--wel {
	background: linear-gradient(160deg, #eef5cf 0%, #dae99a 100%);
}

/* Een witte naad tussen de twee kanten, net als de witte cirkel met "of". */
.dp-zijde--niet {
	border-inline-start: 4px solid #fff;
	background: linear-gradient(160deg, #fff4ec 0%, var(--dp-peach-soft) 100%);
}

/* Het grote woord bovenin: "Wel" en "Niet", cursief. */
.dp-zijde__woord {
	font-family: var(--dp-font-display);
	font-size: clamp(3rem, 2rem + 4vw, 5rem);
	font-style: italic;
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 0.9;
	color: var(--dp-forest);
}

.dp-zijde--niet .dp-zijde__woord {
	color: #b4501f;
}

.dp-zijde h3 {
	font-size: var(--dp-size-h5);
	font-family: var(--dp-font-body);
	font-weight: var(--dp-weight-bold);
	font-variation-settings: normal;
	letter-spacing: 0;
}

.dp-zijde__lijst {
	display: grid;
	gap: 0.85rem;
	margin-top: 0.3rem;
}

.dp-zijde__lijst li {
	display: grid;
	grid-template-columns: 1.3rem 1fr;
	gap: 0.7rem;
	align-items: start;
}

/* Donkergroen: op het lichtgroene vlak valt bladgroen weg. */
.dp-zijde__lijst svg {
	width: 1.3rem;
	height: 1.3rem;
	margin-top: 0.15em;
	color: var(--dp-forest);
}

/* Een paar woorden per regel dik en onderstreept, zodat je de twee lijstjes
   kunt scannen. Niet te veel: dan werkt het niet meer. */
.dp-zijde__lijst b {
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
	text-decoration: underline;
	text-decoration-thickness: 2.5px;
	text-underline-offset: 0.2em;
	text-decoration-skip-ink: none;
	text-decoration-color: var(--dp-lime);
}

.dp-zijde--niet .dp-zijde__lijst b {
	text-decoration-color: rgb(180 80 31 / 0.45);
}

.dp-zijde--niet .dp-zijde__lijst svg {
	color: #b4501f;
}

/* Het "of" in het midden, op de naad tussen de twee kanten. */
.dp-tweezijden__of {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--dp-shadow-m);
	font-family: var(--dp-font-display);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--dp-forest);
	transform: translate(-50%, -50%);
}

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

	.dp-tweezijden__of {
		display: none;
	}
}

/* ==========================================================================
   17. OVER SIMONE
   ========================================================================== */

.dp-over {
	isolation: isolate;
	overflow: clip; /* niet hidden: dan werkt de parallax (view()) niet */
	padding-block: clamp(6rem, 4rem + 7vw, 10rem);
}

/*
  De foto over de hele breedte. Hij is hoger dan de sectie, zodat hij bij het
  scrollen trager mee kan schuiven zonder dat er een rand zichtbaar wordt.
  Links een donker verloop achter de kaart, rechts blijft Simone helder.
*/
/* De fotolaag steekt rechts buiten beeld, zodat Simone verder naar rechts
   opschuift en de glazen kaart links haar niet raakt op een breed scherm. Een
   andere object-position helpt niet: de foto is breder dan hoog en wordt daar
   vooral verticaal bijgesneden. */
.dp-over__foto {
	position: absolute;
	z-index: -1;
	inset-block: -14%;
	inset-inline: 0 -22%;
}

.dp-over__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 30% 40%;
}

.dp-over__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.25) 45%, transparent 70%);
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.dp-over__foto {
			animation: dp-parallax linear both;
			animation-timeline: view();
			animation-range: cover;
		}
	}
}

/* Het slotblok beweegt duidelijker mee dan de rest. */
@keyframes dp-parallax-sterk {
	from {
		transform: translateY(-16%);
	}

	to {
		transform: translateY(16%);
	}
}

@keyframes dp-parallax {
	from {
		transform: translateY(-9%);
	}

	to {
		transform: translateY(9%);
	}
}

/* De kaart van donker glas. */
.dp-over__tekst {
	--dp-flow: var(--dp-space-s);

	max-width: 40rem;
	padding: clamp(1.75rem, 1rem + 2.5vw, 3rem);
	border: var(--dp-border) solid rgb(255 255 255 / 0.14);
	border-radius: var(--dp-radius-l);
	background: rgb(15 24 12 / 0.5);
	backdrop-filter: blur(18px) saturate(1.2);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.7);
}

.dp-over .dp-eyebrow {
	color: rgb(255 255 255 / 0.7);
}

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

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

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

/*
  De drie getallen tellen op zodra ze in beeld komen. Elk getal staat in een
  eigen kolom met een dun lijntje ertussen, en het label eronder.
*/
.dp-getallen {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-block: var(--dp-space-m) !important;
	padding-block: var(--dp-space-m);
	border-block: var(--dp-border) solid var(--dp-line-on-dark);
}

.dp-getal {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	padding-inline: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
}

.dp-getal:first-child {
	padding-inline-start: 0;
}

.dp-getal + .dp-getal {
	border-inline-start: var(--dp-border) solid var(--dp-line-on-dark);
}

.dp-getal dt {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.4rem;
	align-items: baseline;
	font-family: var(--dp-font-display);
	font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.75rem);
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--dp-paper);
}

.dp-getal__plus {
	margin-inline-start: -0.35rem;
	color: var(--dp-leaf);
}

.dp-getal dt small {
	font-size: 0.4em;
	color: var(--dp-leaf);
}

.dp-getal__sterren {
	flex-basis: 100%;
	font-size: 0.9rem;
}

.dp-getal dd {
	margin: 0;
	font-size: var(--dp-size-small);
	line-height: 1.45;
	color: var(--dp-text-on-dark-muted);
}

/* Rustig: de link en de sterren in dezelfde bladkleur als de + en "jaar". */
.dp-getal dd a {
	color: var(--dp-leaf);
	text-decoration-color: rgb(207 222 124 / 0.5);
}

.dp-getal__sterren svg {
	color: var(--dp-leaf);
}



/* ==========================================================================
   18. VEELGESTELDE VRAGEN — als gesprek
   ========================================================================== */

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

/* De kolom links is breed genoeg om de kop op twee regels te houden. */
.dp-faq__links {
	position: sticky;
	inset-block-start: 7rem;
	display: grid;
	gap: var(--dp-space-s);
}

.dp-faq__links h2 {
	font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem);
}

/* --- De onderwerpen: elk een eigen accentkleur ---------------------------- */

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

.dp-onderwerp {
	display: inline-flex;
	gap: 0.45rem;
	align-items: center;
	padding: 0.45em 0.95em;
	border: var(--dp-border) solid var(--dp-pil-rand);
	border-radius: var(--dp-radius-pill);
	background: var(--dp-shell);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	line-height: 1.2;
	color: var(--dp-forest);
	white-space: nowrap;
}

.dp-onderwerp--kosten {
	background: var(--dp-peach);
}

.dp-onderwerp--slag {
	background: var(--dp-leaf);
}

.dp-onderwerp--templates {
	background: #fff;
}

.dp-onderwerp--aankoop {
	background: var(--dp-forest);
	color: var(--dp-paper);
}

.dp-onderwerp--alle {
	background: transparent;
}

.dp-onderwerp span {
	font-size: 0.75em;
	opacity: 0.7;
}

/* Als filterknop: de gekozen staat vol, de rest iets terug. */
button.dp-onderwerp {
	cursor: pointer;
	transition:
		opacity 300ms var(--dp-ease),
		transform 300ms var(--dp-ease-out),
		box-shadow 300ms var(--dp-ease);
}

button.dp-onderwerp[aria-pressed="false"] {
	opacity: 0.55;
}

button.dp-onderwerp:hover {
	opacity: 1;
	transform: translateY(-2px);
}

button.dp-onderwerp[aria-pressed="true"] {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--dp-paper), 0 0 0 3.5px var(--dp-forest);
}

/* Onderaan links: nog een vraag? Met Simones gezicht erbij. */
/* Hetzelfde kaartje als bij "Ik reageer binnen 2 werkdagen" op contact: wit,
   met een dun randje, een zachte schaduw en een ronde foto ervoor. */
.dp-faq__mail {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-top: var(--dp-space-m);
	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);
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
}

.dp-faq__mail img {
	display: block;
	flex: none;
	width: 3.6rem;
	max-width: none;
	height: 3.6rem;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	/* Dubbel zeker rond, ook in Safari. */
	clip-path: circle(50%);
}

@media (width < 36rem) {
	.dp-faq__mail {
		border-radius: var(--dp-radius-l);
	}
}

/* --- De vragen, als chatbubbels ------------------------------------------- */

.dp-faq__vragen {
	display: grid;
	gap: 0.8rem;
}

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

/*
  De vraag: een witte bubbel met een kleine hoek rechtsonder, zoals een
  bericht dat je zelf verstuurt.
*/
.dp-vraag__kop {
	display: grid;
	grid-template-columns: 1fr auto 1.4rem;
	gap: 1rem;
	align-items: center;
	padding: 1.1rem 1.3rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: 1.4rem 1.4rem 0.35rem 1.4rem;
	background: #fff;
	list-style: none;
	cursor: pointer;
	transition:
		border-color 350ms var(--dp-ease),
		box-shadow 350ms var(--dp-ease),
		transform 350ms var(--dp-ease-out);
}

.dp-vraag__kop::-webkit-details-marker {
	display: none;
}

.dp-vraag__kop:hover {
	border-color: var(--dp-line-strong);
	box-shadow: var(--dp-shadow-m);
	transform: translateY(-2px);
}

.dp-vraag[open] .dp-vraag__kop {
	border-color: var(--dp-forest);
	box-shadow: var(--dp-shadow-m);
	transform: none;
}

/* De vraag in Figtree, niet te groot. */
.dp-vraag__tekst {
	font-size: var(--dp-size-body);
	font-weight: var(--dp-weight-bold);
	line-height: 1.35;
	color: var(--dp-text-strong);
}

.dp-vraag__cat {
	padding: 0.3em 0.75em;
	font-size: 0.72rem;
}

.dp-vraag__pijl {
	display: grid;
	place-items: center;
	color: var(--dp-forest);
	transition: transform 400ms var(--dp-ease-out);
}

.dp-vraag__pijl svg {
	width: 1.2rem;
	height: 1.2rem;
	stroke-width: 2.4;
}

.dp-vraag[open] .dp-vraag__pijl {
	transform: rotate(180deg);
}

/* Het antwoord: een witte bubbel die links inspringt, met ruimte over. Daardoor
   leest het als een antwoord in een gesprek: de vraag staat vol in beeld, het
   antwoord eronder en ingesprongen. Op smalle schermen is die ruimte te duur.

   Let op: alle padding staat hier bij elkaar. Zet je de inspringing ergens
   anders neer, dan wist deze korte schrijfwijze hem weer. */
.dp-vraag__antwoord {
	padding: 0.6rem 0 0.3rem 3.75rem;
}

@media (width < 48rem) {
	.dp-vraag__antwoord {
		padding-inline-start: 0;
	}
}

.dp-vraag__bubbel {
	position: relative;
	padding: 1.1rem 1.3rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: 0.35rem 1.4rem 1.4rem 1.4rem;
	background: #fff;
	color: var(--dp-text);
}

.dp-vraag__tekstblok {
	display: grid;
	gap: 0.6rem;
}

/* Het antwoord schuift zacht open. */
@supports (interpolate-size: allow-keywords) {
	.dp-faq {
		interpolate-size: allow-keywords;
	}

	.dp-vraag::details-content {
		height: 0;
		overflow: clip;
		opacity: 0;
		transition:
			height 450ms var(--dp-ease-out),
			opacity 350ms var(--dp-ease),
			content-visibility 450ms allow-discrete;
	}

	.dp-vraag[open]::details-content {
		height: auto;
		opacity: 1;
	}
}

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

	.dp-faq__links {
		position: static;
	}
}

@media (width < 36rem) {
	.dp-vraag__cat {
		display: none;
	}

	.dp-vraag__kop {
		grid-template-columns: 1fr 1.4rem;
	}

}

/* ==========================================================================
   19. SLOT
   ========================================================================== */

.dp-slot {
	overflow: clip; /* niet hidden: dan werkt de parallax (view()) niet */
	isolation: isolate;
	padding-block: clamp(6rem, 4rem + 8vw, 11rem);
	text-align: center;
}

.dp-slot__foto {
	position: absolute;
	inset: -22% 0;
	z-index: -1;
}

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

/* Ken Burns: de foto zoomt heel langzaam in en schuift een fractie op,
   bovenop de parallax van het scrollen. */
@media (prefers-reduced-motion: no-preference) {
	.dp-slot__foto img {
		animation: dp-kenburns 24s ease-in-out infinite alternate;
	}
}

@keyframes dp-kenburns {
	from {
		transform: scale(1) translate(0, 0);
	}

	to {
		transform: scale(1.14) translate(-2%, -1.5%);
	}
}

.dp-slot__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.62));
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.dp-slot__foto {
			animation: dp-parallax-sterk linear both;
			animation-timeline: view();
			animation-range: cover;
		}
	}
}

/*
  Rustig van kleur: alleen de knop en het cursieve woord hebben kleur. De
  rest is wit (of transparant wit), en breed genoeg dat de kop op twee regels
  en de inleiding op één regel past, zonder losse woorden op een nieuwe regel.
*/
.dp-slot__inhoud {
	--dp-flow: var(--dp-space-s);

	max-width: 66rem;
}

.dp-slot .dp-eyebrow {
	color: rgb(255 255 255 / 0.7);
}

.dp-slot .dp-lead,
.dp-slot .dp-slot__klein {
	max-width: none;
	color: #fff;
	text-wrap: balance;
}

.dp-slot .dp-slot__klein {
	color: rgb(255 255 255 / 0.7);
}

.dp-slot__inhoud h2 {
	text-wrap: balance;
}

.dp-slot .dp-btn:not(.dp-btn--ghost-on-dark) {
	color: var(--dp-forest);
}

.dp-slot__inhoud h2 {
	font-size: clamp(2.4rem, 1.5rem + 4vw, 4.75rem);
	line-height: 1.02;
}

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

.dp-slot__inhoud p {
	margin-inline: auto;
}

/* De ruimte boven en onder de inleiding gelijk houden: hij stond veel dichter
   op de kop dan op de knop. */
.dp-slot__knop {
	margin-top: var(--dp-space-m) !important;
}

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

/* ==========================================================================
   FOOTER
   ========================================================================== */

.dp-footer {
	position: relative;
	z-index: 1;
	padding-block: var(--dp-space-l);
	background: var(--dp-ink);
	color: var(--dp-text-on-dark-muted);
}

.dp-footer__binnen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dp-space-m);
	align-items: center;
	justify-content: space-between;
}

.dp-footer__logo img {
	width: auto;
	height: 2.2rem;
}

.dp-footer__menu ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1.5rem;
}

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

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

.dp-footer__klein {
	flex-basis: 100%;
	max-width: none;
	padding-top: var(--dp-space-s);
	border-top: var(--dp-border) solid var(--dp-line-on-dark);
	font-size: var(--dp-size-xs);
}

/* ==========================================================================
   VERSIE 2 (na de CRO-review)
   Alles hieronder hangt aan v2-klassen, zodat het origineel ongewijzigd blijft.
   ========================================================================== */

/* Hero: een gewone eyebrow in plaats van het handschrift, een kortere en
   grotere titel, en meer lucht rond de knop en onder de trust bar. */
.dp-hero--v2 .dp-hero__eyebrow {
	margin: 0 auto 1.1rem;
}

.dp-hero--v2 .dp-hero__titel {
	max-width: 46rem;
	font-size: clamp(2.4rem, 1.2rem + 4.6vw, 4.4rem);
	line-height: 1.02;
}

.dp-hero--v2 .dp-hero__lead {
	max-width: 36rem;
	margin-top: 1.4rem;
}

.dp-hero--v2 .dp-hero__knoppen {
	margin-top: 2.75rem;
}

.dp-hero--v2 .dp-hero__knoppen .dp-btn {
	padding: 1.15rem 1.35rem 1.15rem 2rem;
	font-size: 1.0625rem;
}

.dp-hero--v2 .dp-trust {
	margin-top: 2.5rem;
	margin-bottom: var(--dp-space-l);
}

/* Templates: één keer, gecentreerd, vlak boven het eerste template. */
.dp-tpl__kies {
	max-width: none;
	margin: var(--dp-space-xl) auto 0;
	font-family: var(--dp-font-display);
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1.2;
	text-align: center;
	color: var(--dp-text-on-dark);
}

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

.dp-scene__nr {
	margin-bottom: 0.4rem;
}

/* Pakket: de bonussen zijn een extraatje, en dat moet je zien. */
.dp-onderdeel--bonus .dp-onderdeel__kop {
	border-style: dashed;
	border-color: var(--dp-leaf);
	background: rgb(207 222 124 / 0.14);
}

.dp-onderdeel--bonus .dp-onderdeel__nummer {
	background: var(--dp-lime);
}

.dp-onderdeel__bonus {
	/* Staat in de titel (Fraunces), maar is een label: gewoon de broodletter. */
	font-family: var(--dp-font-body);
	font-variation-settings: normal;
	justify-self: start;
	width: fit-content;
	margin-bottom: 0.2rem;
	padding: 0.1rem 0.6rem;
	border-radius: 999px;
	background: var(--dp-forest);
	color: var(--dp-lime);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dp-pakket__beeld[data-actief="6"] [data-laag="6"],
.dp-pakket__beeld[data-actief="7"] [data-laag="7"] {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity 450ms var(--dp-ease) 150ms,
		transform 650ms cubic-bezier(0.34, 1.4, 0.64, 1) 150ms,
		visibility 0s;
}

.dp-minikaart--tip,
.dp-minikaart--google {
	gap: 0.3rem;
	max-width: 19rem;
}

.dp-minikaart__klein {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dp-text-muted);
}

.dp-minikaart__niet {
	color: var(--dp-text-muted);
	text-decoration: line-through;
}

.dp-minikaart--google strong {
	color: #1a0dab;
}

.dp-minikaart--google > span:last-child {
	color: var(--dp-text-muted);
}

/* Voordelen: zes kaarten, dezelfde als elders op de pagina. */
.dp-voordelen__kaarten {
	margin-top: var(--dp-space-l);
}

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

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

/* Bonnetje: het totaal doorgestreept, en daaronder waar je eigen prijs staat. */
.dp-bon__totaal-bedrag s {
	text-decoration-thickness: 2px;
	opacity: 0.6;
}

.dp-bon__jouwprijs {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding-block: 1rem;
	border-bottom: 2px dashed rgb(18 43 7 / 0.2);
	font-weight: 700;
	color: var(--dp-forest);
	text-decoration: none;
}

.dp-bon__jouwprijs .dp-bon__stippels {
	flex: 1;
}

.dp-bon__verder {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Prijs: in één lijn met het bonnetje erboven, zodat het erin overloopt. */
.dp-prijs__pijl {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin: 0 auto var(--dp-space-m);
	border-radius: 50%;
	background: var(--dp-lime);
	color: var(--dp-forest);
}

.dp-prijs__pijl svg {
	width: 1.3rem;
	height: 1.3rem;
	transform: rotate(90deg);
}

.dp-prijsB--v2 .dp-prijs__raster {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: var(--dp-space-xl);
	max-width: 56rem;
}

.dp-prijsB--v2 .dp-kassa {
	width: min(100%, 30rem);
}

.dp-prijsB--v2 .dp-stemmen {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--dp-space-l);
	width: 100%;
}

.dp-prijsB--v2 .dp-stem + .dp-stem {
	border: 0;
	padding: 0;
}

.dp-prijsB--v2 .dp-stem__tekst {
	font-size: var(--dp-size-small);
}

@media (width < 48rem) {
	.dp-prijsB--v2 .dp-stemmen {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Prijskaart: de vergelijking als eerste blikvanger. */
.dp-kassa--v2 .dp-kassa__was {
	max-width: none;
	margin: 0.5rem auto -0.25rem;
	font-family: var(--dp-font-display);
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	line-height: 1;
	color: var(--dp-text-on-dark-muted);
}

.dp-kassa--v2 .dp-kassa__was s {
	text-decoration-thickness: 2px;
}

.dp-kassa--v2 .dp-kassa__zeker {
	position: relative;
	font-size: var(--dp-size-body);
	font-weight: 600;
	color: var(--dp-text-on-dark);
}

.dp-kassa--v2 .dp-kassa__zeker svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* De garantie in het kort, achter een i. Werkt met muis en toetsenbord. */
.dp-info {
	display: inline-grid;
	place-items: center;
	width: 1.35rem;
	height: 1.35rem;
	margin-left: 0.15rem;
	padding: 0;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	background: none;
	color: var(--dp-text-on-dark-muted);
	font: 700 0.75rem/1 var(--dp-font-body, inherit);
	cursor: help;
}

.dp-info__uitleg {
	position: absolute;
	inset-inline: 0;
	bottom: calc(100% + 0.75rem);
	z-index: 5;
	padding: 1rem 1.2rem;
	border-radius: var(--dp-radius-m);
	background: var(--dp-paper);
	box-shadow: var(--dp-shadow-l);
	color: var(--dp-text);
	font-size: var(--dp-size-small);
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 200ms var(--dp-ease), transform 250ms var(--dp-ease-out), visibility 0s 250ms;
}

.dp-info:hover .dp-info__uitleg,
.dp-info:focus .dp-info__uitleg {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 200ms var(--dp-ease), transform 250ms var(--dp-ease-out), visibility 0s;
}

/* Op een groot scherm staat de uitleg rechts naast de i, buiten de kaart,
   met een puntje naar de i. Zo valt hij niet over de koopknop heen. Op een
   telefoon is daar geen plek en blijft hij boven de knop in de kaart. */
@media (width >= 62rem) {
	.dp-info {
		position: relative;
	}

	.dp-info__uitleg {
		inset: -1rem auto auto calc(100% + 1rem);
		width: 19rem;
		transform: translateX(-6px);
		z-index: 20;
	}

	.dp-info__uitleg::before {
		content: "";
		position: absolute;
		inset-block-start: 1.35rem;
		inset-inline-start: -0.4rem;
		width: 0.8rem;
		height: 0.8rem;
		background: inherit;
		transform: rotate(45deg);
	}
}

/* FAQ: per onderwerp een groep die uitklapt. De eerste staat open, zo zie je
   nooit alle twaalf vragen tegelijk. */
.dp-faq--v2 .dp-faq__vragen {
	gap: 0.9rem;
}

.dp-faqgroep {
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
}

.dp-faqgroep__kop {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1.15rem 1.4rem;
	list-style: none;
	cursor: pointer;
}

.dp-faqgroep__kop::-webkit-details-marker {
	display: none;
}

.dp-faqgroep__naam {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	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-forest);
}

.dp-faqgroep__naam::before {
	content: "";
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--dp-leaf);
}

.dp-faqgroep--slag .dp-faqgroep__naam::before { background: var(--dp-peach-soft); }
.dp-faqgroep--templates .dp-faqgroep__naam::before { background: var(--dp-lime); }
.dp-faqgroep--aankoop .dp-faqgroep__naam::before { background: var(--dp-forest); }

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

.dp-faqgroep__pijl {
	display: grid;
	margin-left: auto;
	transition: transform 300ms var(--dp-ease-out);
}

.dp-faqgroep__pijl svg {
	width: 1.1rem;
	height: 1.1rem;
}

.dp-faqgroep[open] > .dp-faqgroep__kop .dp-faqgroep__pijl {
	transform: rotate(180deg);
}

.dp-faqgroep__vragen {
	display: grid;
	gap: 0.7rem;
	padding: 0 1rem 1rem;
}

.dp-faq--v2 .dp-faq__mail {
	justify-self: start;
	margin-top: var(--dp-space-s);
	padding: 0.45rem 1.2rem 0.45rem 0.45rem;
}

.dp-faq--v2 .dp-faq__mail img {
	width: 2.4rem;
	height: 2.4rem;
}

/* De twee reviews onder de prijs klein: ze bevestigen, ze trekken niet de
   aandacht weg van de knop. */
.dp-prijsB--v2 .dp-stem__tekst p {
	font-family: var(--dp-font-body);
	font-size: var(--dp-size-small);
	line-height: 1.55;
}

/* Binnen een onderwerpgroep is het labeltje per vraag dubbel. */
.dp-faqgroep .dp-vraag__cat {
	display: none;
}

/* --- Ronde 3 ----------------------------------------------------------------- */

/* Hero: de knop echt een maat groter. */
.dp-hero--v2 .dp-hero__knoppen .dp-btn {
	padding: 1.05em 1.3em 1.05em 1.9em;
	font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
}

/* Brug: smallere visual, meer ruimte tot de tekst, en de slotzin groter. */
.dp-brug--v2 .dp-brug__grid {
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(4rem, 2rem + 7vw, 8.5rem);
}

.dp-brug--v2 .dp-brug__beeld {
	max-width: 24rem;
	justify-self: center;
	width: 100%;
}

.dp-brug--v2 .dp-brug__slot {
	font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.35rem);
	line-height: 1.2;
}

/* Templates: de kop staat nu boven de laptop. */
.dp-onthul__kop {
	margin-bottom: var(--dp-space-xl);
}

/* Wat zit er in elke set: de onderstreping zoals in het brugblok. */
.dp-onderstreept {
	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;
}

.dp-inhoud--v2 .dp-meekomt__blok h3 {
	max-width: 24ch;
	margin-inline: auto;
	text-wrap: balance;
}

/* Pakket: de bonussen als glanzende groene kaart, zoals de prijskaart. */
.dp-onderdeel--bonus {
	position: relative;
	overflow: hidden;
	border-color: rgb(207 222 124 / 0.35);
	background:
		radial-gradient(120% 140% at 0% 0%, rgb(207 222 124 / 0.32), transparent 55%),
		radial-gradient(90% 120% at 100% 100%, rgb(120 168 64 / 0.4), transparent 60%),
		linear-gradient(135deg, #2e5d1d, #163a0a);
	box-shadow: 0 24px 48px -28px rgb(18 43 7 / 0.75);
	transition:
		transform var(--dp-transition),
		box-shadow var(--dp-transition);
}

.dp-onderdeel--bonus:hover,
.dp-onderdeel--bonus[open] {
	border-color: rgb(207 222 124 / 0.55);
	box-shadow: 0 30px 60px -28px rgb(18 43 7 / 0.85);
}

.dp-onderdeel--bonus:hover {
	transform: translateY(-3px);
}

.dp-onderdeel--bonus .dp-onderdeel__kop {
	border: 0;
	background: none;
}

.dp-onderdeel--bonus .dp-onderdeel__nummer {
	background: var(--dp-lime);
	color: var(--dp-forest);
}

.dp-onderdeel--bonus .dp-onderdeel__bonus {
	background: var(--dp-lime);
	color: var(--dp-forest);
}

.dp-onderdeel--bonus .dp-onderdeel__titel {
	color: var(--dp-paper);
}

.dp-onderdeel--bonus .dp-onderdeel__sub,
.dp-onderdeel--bonus .dp-onderdeel__inhoud {
	color: var(--dp-text-on-dark-muted);
}

.dp-onderdeel--bonus .dp-onderdeel__inhoud strong {
	color: var(--dp-paper);
}

.dp-onderdeel--bonus .dp-onderdeel__waarde {
	border-color: rgb(255 255 255 / 0.25);
	background: rgb(255 255 255 / 0.1);
	color: var(--dp-paper);
}

.dp-onderdeel--bonus .dp-onderdeel__plus {
	color: var(--dp-lime);
}

/* Schrijfkit-beeld: niet met een kruisje, wel met een vinkje. */
.dp-tip {
	display: grid;
	grid-template-columns: 1.3rem 1fr;
	gap: 0.6rem;
	align-items: start;
	margin: 0;
	max-width: none;
}

.dp-tip svg {
	width: 1.3rem;
	height: 1.3rem;
	margin-top: 0.1em;
}

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

.dp-tip--niet svg {
	color: #b4501f;
}

.dp-tip--wel {
	font-family: var(--dp-font-display);
	font-size: var(--dp-size-h5);
	font-weight: var(--dp-weight-display);
	font-variation-settings: var(--dp-fraunces-axes);
	line-height: 1.25;
	color: var(--dp-text-strong);
}

.dp-tip--wel svg {
	color: var(--dp-forest);
}

/* Google-beeld: klein, en de wissel draait elke keer dat je de bonus opent. */
.dp-zoek--klein {
	position: static;
	inset: auto;
	width: 100%;
	gap: 0.55rem;
	padding: 0.75rem;
	box-shadow: 0 30px 50px -28px rgb(18 43 7 / 0.55);
}

.dp-zoek--klein .dp-zoek__titel {
	font-size: 0.85rem;
}

.dp-pakket__laag .dp-zoek__resultaat--goed,
.dp-pakket__laag .dp-zoek__resultaat--fout {
	animation: none;
}

@media (prefers-reduced-motion: no-preference) {
	.dp-pakket__beeld[data-actief="7"] .dp-zoek__resultaat--goed {
		animation: dp-zoek-omhoog 800ms cubic-bezier(0.5, 0, 0.2, 1) 900ms both;
		animation-timeline: auto;
		animation-range: normal;
	}

	.dp-pakket__beeld[data-actief="7"] .dp-zoek__resultaat--fout {
		animation: dp-zoek-omlaag 800ms cubic-bezier(0.5, 0, 0.2, 1) 900ms both;
		animation-timeline: auto;
		animation-range: normal;
	}
}

/* Voordelen: zes kaarten, zes kleuren. */
.dp-belofte--lime .dp-belofte__icoon { background: var(--dp-lime); }
.dp-belofte--sand .dp-belofte__icoon { background: var(--dp-sand); }
.dp-belofte--forest .dp-belofte__icoon { background: var(--dp-forest); color: var(--dp-lime); }

/* Bonnetje: rustiger rond "jouw prijs". */
.dp-bon--v2 .dp-bon__totaal {
	border-bottom: 0;
}

.dp-bon--v2 .dp-bon__jouwprijs {
	justify-content: center;
	gap: 0.75rem;
	padding-block: 0.25rem 0.5rem;
	border-bottom: 0;
}

.dp-bon--v2 .dp-bon__verder {
	text-decoration-color: var(--dp-lime);
	text-decoration-thickness: 3px;
}

.dp-bon--v2 .dp-bon__tag {
	background: var(--dp-forest);
	color: #fff;
}

/* Prijs: een witte, getekende pijl, zonder cirkel. */
.dp-prijsB--v2 .dp-prijs__pijl {
	width: 2.5rem;
	height: 6.5rem;
	border-radius: 0;
	background: none;
	color: var(--dp-paper);
}

.dp-prijsB--v2 .dp-prijs__pijl svg {
	width: 100%;
	height: 100%;
	transform: none;
}

/* Reviews onder de prijs: leesbaar, gecentreerd, namen zoals elders. */
.dp-prijsB--v2 .dp-stem {
	justify-items: center;
	text-align: center;
}

.dp-prijsB--v2 .dp-stem__tekst p {
	font-size: var(--dp-size-body);
}

.dp-prijsB--v2 .dp-stem__wie {
	justify-content: center;
}

.dp-prijsB--v2 .dp-review__name,
.dp-prijsB--v2 .dp-review__role {
	color: var(--dp-text-on-dark-muted);
}

/* FAQ: antwoord op een licht vlak in plaats van met een rand. */
.dp-faqgroep .dp-vraag__bubbel {
	border: 0;
	background: var(--dp-shell);
}

.dp-faq--v2 .dp-faq__mail {
	margin-top: var(--dp-space-s);
}

/* Hero: titel en tekst eronder elk op twee regels. Daarvoor mag het
   tekstvak iets breder dan de 62rem van het origineel. */
.dp-hero--v2.dp-hero .dp-hero__tekst {
	max-width: 70rem;
}

.dp-hero--v2 .dp-hero__titel {
	max-width: 68rem;
}

.dp-hero--v2 .dp-hero__lead {
	max-width: 40rem;
}

/* --- Ronde 4 ----------------------------------------------------------------- */

/* Templates: minder lucht tussen de kop en de onthulling eronder. */
.dp-onthul__kop {
	margin-bottom: 0;
}

.dp-onthul__kop + .dp-onthul {
	margin-top: -4.5rem;
}

/* Op het donkere eerste template leest de eyebrow in bladgroen. */
.dp-scene--1 .dp-scene__nr {
	color: var(--dp-leaf);
}

/* De paginapillen op twee regels in plaats van drie. */
.dp-inhoud--v2 .dp-meekomt__bubbels {
	max-width: 62rem;
}

/* Pakket: dezelfde kleurvolgorde als de icoontjes van de voordelen
   (blad, perzik, mos, lime), zodat de bolletjes niet willekeurig ogen. */
.dp-pakket--v2 .dp-onderdeel:nth-child(1) .dp-onderdeel__nummer { background: var(--dp-leaf); }
.dp-pakket--v2 .dp-onderdeel:nth-child(2) .dp-onderdeel__nummer { background: var(--dp-peach); }
.dp-pakket--v2 .dp-onderdeel:nth-child(3) .dp-onderdeel__nummer { background: var(--dp-moss); }
.dp-pakket--v2 .dp-onderdeel:nth-child(4) .dp-onderdeel__nummer { background: var(--dp-lime); }

/* Bonussen: precies de stijl van de prijskaart, maar op donkergroen. Een
   lichte glans bovenin, een verlooprand, en bij hover glijdt er een
   glans overheen. */
.dp-pakket--v2 .dp-onderdeel--bonus {
	isolation: isolate;
	border: 0;
	background:
		radial-gradient(90% 60% at 50% 0%, rgb(207 222 124 / 0.18), transparent 70%),
		linear-gradient(165deg, rgb(231 238 221 / 0.08), rgb(231 238 221 / 0.02) 55%, rgb(254 161 117 / 0.08)),
		var(--dp-forest);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.08),
		0 30px 60px -32px rgb(0 0 0 / 0.7);
	transition:
		transform 600ms var(--dp-ease-out),
		box-shadow 600ms var(--dp-ease-out);
}

.dp-pakket--v2 .dp-onderdeel--bonus::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(140deg, rgb(230 255 86 / 0.55), rgb(207 222 124 / 0.12) 35%, rgb(231 238 221 / 0.08) 65%, rgb(254 161 117 / 0.45));
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0.7;
	transition: opacity 600ms var(--dp-ease);
	pointer-events: none;
}

.dp-pakket--v2 .dp-onderdeel--bonus::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / 0.09) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat;
	transition: background-position 1200ms var(--dp-ease-out);
	pointer-events: none;
}

.dp-pakket--v2 .dp-onderdeel--bonus:hover {
	transform: translateY(-4px);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.1),
		0 40px 70px -32px rgb(0 0 0 / 0.8),
		0 0 60px -20px rgb(207 222 124 / 0.3);
}

.dp-pakket--v2 .dp-onderdeel--bonus:hover::before {
	opacity: 1;
}

.dp-pakket--v2 .dp-onderdeel--bonus:hover::after {
	background-position: -30% 0;
}

/* Het nummer als glazen bolletje, zoals de schakelaar op de prijskaart. */
.dp-pakket--v2 .dp-onderdeel--bonus .dp-onderdeel__nummer {
	border: 1px solid rgb(230 255 86 / 0.45);
	background: rgb(255 255 255 / 0.08);
	color: var(--dp-lime);
}

/* Reviews onder de prijs: naam en site onder elkaar naast de foto, links
   uitgelijnd, net als in het grote reviewblok. */
.dp-prijsB--v2 .dp-stem__wie .dp-review__wie {
	display: grid;
	gap: 0.1rem;
	text-align: left;
}

/* Voor wie: geen losse Wel/Niet meer, de kop zegt het zelf. */
.dp-voorwie--v2 .dp-zijde h3 {
	font-size: var(--dp-size-h4);
	line-height: 1.3;
}

.dp-zijde__nadruk {
	font-weight: inherit;
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.2em;
	text-decoration-skip-ink: none;
	text-decoration-color: var(--dp-lime);
}

.dp-zijde--niet .dp-zijde__nadruk {
	text-decoration-color: rgb(180 80 31 / 0.45);
}

/* ==========================================================================
   RESPONSIVE (geldt voor beide versies; v2-regels hangen aan v2-klassen)
   ========================================================================== */

@media (width < 48rem) {
	/* Pakket: de kaartjes over de foto steken op desktop rechts uit. Op een
	   telefoon is daar geen ruimte, dus ze blijven binnen de foto. */
	.dp-pakket__laag--kaart,
	.dp-pakket__laag--training {
		inset-inline-end: 0.75rem;
		max-width: calc(100% - 1.5rem);
	}

	.dp-pakket__laag--sets {
		inset-inline: 0;
	}
}

@media (width < 30rem) {
	/* De drie settabs moeten naast elkaar passen op 375 pixels. */
	.dp-settabs {
		width: 100%;
	}

	.dp-settabs__tab {
		padding: 0.55rem 0.5rem;
		font-size: 0.78rem;
	}
}

@media (width < 36rem) {
	/* Pakket: nummer, titel, waarde en plusje passen niet naast elkaar.
	   De waarde schuift onder de titel, en het antwoord springt minder in. */
	.dp-pakket__lijst,
	.dp-pakket__beeld {
		min-width: 0;
	}

	.dp-onderdeel__kop {
		grid-template-columns: 2.4rem minmax(0, 1fr) 1.4rem;
		gap: 0.45rem 0.8rem;
		padding: 1.1rem 1rem;
	}

	.dp-onderdeel__nummer {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: start;
		width: 2.4rem;
		height: 2.4rem;
	}

	.dp-onderdeel__titels {
		grid-column: 2;
		grid-row: 1;
	}

	.dp-onderdeel__waarde {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
	}

	.dp-onderdeel__plus {
		grid-column: 3;
		grid-row: 1;
	}

	.dp-onderdeel__inhoud {
		padding: 0 1rem 1.25rem calc(1rem + 2.4rem + 0.8rem);
	}
}

@media (width < 62rem) {
	/* De v2-regel voor twee kolommen woog zwaarder dan de mobiele regel. */
	.dp-brug--v2 .dp-brug__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dp-space-xl);
	}

	.dp-brug--v2 .dp-brug__beeld {
		max-width: 20rem;
	}
}

@media (width < 36rem) {
	/* Trust bar: valt de tekst onder de foto's, dan ook de sterren centreren. */
	.dp-trust__tekst {
		justify-items: center;
		text-align: center;
	}
}

@media (width < 30rem) {
	/* Templatetabs: alle drie de namen passen naast elkaar op een telefoon. */
	.dp-scene__nav {
		width: 100%;
	}

	.dp-scene__nav a {
		min-width: 0;
		padding-inline: 0.4rem;
		font-size: 0.7rem;
		letter-spacing: 0.02em;
		text-align: center;
	}
}

@media (width < 36rem) {
	/* FAQ-groepen: onderwerp en aantal passen op één regel. */
	.dp-faqgroep__kop {
		gap: 0.6rem;
		padding: 1rem 1.1rem;
	}

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

	.dp-faqgroep__aantal {
		white-space: nowrap;
	}

	.dp-faqgroep__vragen {
		padding: 0 0.6rem 0.6rem;
	}

	/* Garantie onder de knop: kleiner, zodat hij op één regel past. */
	.dp-kassa--v2 .dp-kassa__zeker {
		font-size: var(--dp-size-small);
	}
}

/* --- Ronde 5 (vooral mobiel) --------------------------------------------------- */

/* Bonus: het label staat vóór de titel, op dezelfde regel. */
.dp-onderdeel__titel .dp-onderdeel__bonus {
	display: inline-block;
	margin: 0 0.45rem 0 0;
	vertical-align: 0.3em;
}

/* Bonuskaart: geen grote schaduw in rust; die liep als een grijze band
   over de overgang naar het volgende blok. Bij hover blijft hij. */
.dp-pakket--v2 .dp-onderdeel--bonus {
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.08),
		0 14px 26px -18px rgb(0 0 0 / 0.45);
}

/* Het beeld in het onderdeel zelf is alleen voor mobiel. */
.dp-onderdeel__beeld {
	display: none;
}

/* Templatenamen op één regel, ook op desktop: iets kleiner dan eerst. */
.dp-tpl--v2 .dp-scene__titel {
	font-size: clamp(2.1rem, 0.9rem + 4.2vw, 4.1rem);
	white-space: nowrap;
}

/* Prijsreviews: foto boven de naam, alles gecentreerd, naam en site
   gedempt en de site met een licht lijntje eronder, zoals in het reviewblok. */
.dp-prijsB--v2 .dp-stem__wie {
	flex-direction: column;
	gap: 0.5rem;
}

.dp-prijsB--v2 .dp-stem__wie .dp-review__wie {
	justify-items: center;
	text-align: center;
}

.dp-prijsB--v2 .dp-review__name,
.dp-prijsB--v2 .dp-review__role {
	opacity: 0.75;
}

.dp-prijsB--v2 .dp-review__role {
	text-decoration: underline;
	text-decoration-color: rgb(255 255 255 / 0.35);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Klonen voor de oneindige reviewcarrousel: alleen op mobiel in gebruik. */
.dp-muur__kloon,
.dp-muur__bediening {
	display: none;
}

@media (width < 62rem) {
	/* Brugblok: eerst de tekst, dan het beeld. */
	.dp-brug--v2 .dp-brug__beeld {
		order: 2;
	}

	/* Templates: minder lucht boven de tabs, en de tabs schuiven mee zolang
	   je in de drie templates bent. Daarvoor mag de tekstkolom geen eigen
	   doos meer zijn: dan zou de balk alleen binnen die kolom blijven staan. */
	.dp-tpl--v2 .dp-scene {
		padding-top: calc(var(--dp-radius-section) + 1.5rem);
		overflow: clip;
	}

	.dp-tpl--v2 .dp-scene__grid {
		display: block;
	}

	.dp-tpl--v2 .dp-scene__tekst {
		display: contents;
	}

	.dp-tpl--v2 .dp-scene__nav {
		position: sticky;
		inset-block-start: 0.75rem;
		z-index: 6;
		box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.35);
	}

	.dp-tpl--v2 .dp-scene--1 .dp-scene__nav {
		background: rgb(22 44 12 / 0.85);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	.dp-tpl--v2 .dp-scene__beeld {
		margin-top: var(--dp-space-xl);
	}

	/* FAQ: het mailtje onder de vragen in plaats van erboven. */
	.dp-faq--v2 .dp-faq__raster {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.dp-faq--v2 .dp-faq__links {
		display: contents;
	}

	.dp-faq--v2 .dp-faq__links .dp-eyebrow {
		margin-bottom: 0.75rem;
	}

	.dp-faq--v2 .dp-faq__vragen {
		order: 1;
		margin-top: var(--dp-space-l);
	}

	.dp-faq--v2 .dp-faq__mail {
		order: 2;
		margin-top: var(--dp-space-m);
	}
}

@media (width < 48rem) {
	/* Geen menubalk bovenin op mobiel: de pagina begint direct met de kop. */
	body:has(.dp-hero--v2) .dp-nav {
		display: none;
	}

	.dp-hero--v2 {
		padding-top: var(--dp-space-l);
	}

	/* Templates: geen review in elk template op mobiel. */
	.dp-tpl--v2 .dp-scene__review {
		display: none;
	}

	/* Een kijkje in de templates: tekst links, de twee varianten gewoon
	   naast elkaar zonder animatie, en de settabs schuiven mee. */
	.dp-inhoud--v2 .dp-section__head {
		text-align: left;
		justify-items: start;
	}

	.dp-inhoud--v2 .dp-settabs {
		position: sticky;
		inset-block-start: 0.75rem;
		z-index: 6;
		box-shadow: 0 10px 24px -14px rgb(18 43 7 / 0.3);
	}

	.dp-inhoud--v2 .dp-duo {
		width: 100%;
	}

	.dp-inhoud--v2 .dp-duo__stapel {
		aspect-ratio: 10 / 7;
	}

	.dp-inhoud--v2 .dp-duo__kaart,
	.dp-inhoud--v2 .dp-duo:hover .dp-duo__kaart--a,
	.dp-inhoud--v2 .dp-duo:hover .dp-duo__kaart--b {
		transform: none;
		transition: none;
	}

	.dp-inhoud--v2 .dp-duo__kaart--a {
		inset: 0 calc(50% + 0.35rem) 0 0;
	}

	.dp-inhoud--v2 .dp-duo__kaart--b {
		inset: 0 0 0 calc(50% + 0.35rem);
	}

	/* Meegeleverde functies: drie rijen pillen die je opzij veegt. */
	.dp-inhoud--v2 .dp-functies {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-template-rows: repeat(3, auto);
		grid-auto-columns: max-content;
		gap: 0.5rem;
		margin-inline: calc(-1 * var(--dp-gutter));
		padding: 0.25rem var(--dp-gutter) 0.75rem;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.dp-inhoud--v2 .dp-functies::-webkit-scrollbar {
		display: none;
	}

	.dp-inhoud--v2 .dp-functie {
		gap: 0.55rem;
		padding: 0.4rem 1rem 0.4rem 0.4rem;
		border-radius: var(--dp-radius-pill);
		font-size: var(--dp-size-small);
		white-space: nowrap;
	}

	.dp-inhoud--v2 .dp-functie__icoon {
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
	}

	.dp-inhoud--v2 .dp-functie__icoon svg {
		width: 1rem;
		height: 1rem;
	}

	/* Stappen: niet zelf doorlopen op mobiel. Het beeld staat daar onder de
	   gekozen stap, en een pagina die vanzelf verspringt leest niet prettig. */
	.dp-stapper__tab::after {
		animation: none !important;
	}

	.dp-stapper__lijst > .dp-stapper__beeld {
		margin-block: 0.25rem 0.75rem;
	}

	/* Pakket: de grote foto weg, het beeld staat in het onderdeel zelf. */
	.dp-pakket--v2 .dp-pakket__beeld {
		display: none;
	}

	.dp-pakket--v2 .dp-onderdeel__beeld {
		display: block;
		max-width: 20rem;
		margin-top: 1rem;
	}

	.dp-onderdeel__beeld > img {
		width: 100%;
		filter: drop-shadow(0 18px 20px rgb(18 43 7 / 0.25));
	}

	.dp-onderdeel__beeld .dp-minikaart {
		box-shadow: 0 16px 28px -20px rgb(18 43 7 / 0.5);
	}

	.dp-onderdeel__beeld .dp-zoek__resultaat--goed,
	.dp-onderdeel__beeld .dp-zoek__resultaat--fout {
		animation: none;
	}

	/* Galerij: de sites schuiven tot de rand van het scherm, niet tot de
	   rand van de inhoud. De actieve site houdt links dezelfde marge. */
	.dp-galerij .dp-carrousel {
		margin-inline: calc(-1 * var(--dp-gutter));
		padding-inline: var(--dp-gutter);
	}

	/* Voor wie: twee losse kaarten onder elkaar, zonder witte naad. */
	.dp-voorwie--v2 .dp-tweezijden {
		gap: var(--dp-space-s);
		overflow: visible;
		border-radius: 0;
		box-shadow: none;
	}

	.dp-voorwie--v2 .dp-zijde {
		border-radius: var(--dp-radius-l);
		box-shadow: var(--dp-shadow-m);
	}

	.dp-voorwie--v2 .dp-zijde--niet {
		border-inline-start: 0;
	}

	.dp-voorwie--v2 .dp-tweezijden__of {
		display: none;
	}

	/* Over mij: de foto als beeld bovenaan, met Simone in het midden, en de
	   tekstkaart er half overheen. Als achtergrond viel ze helemaal weg. */
	.dp-over {
		padding-top: 0;
	}

	.dp-over__foto {
		position: relative;
		inset: auto;
		z-index: 0;
		height: 26rem;
		animation: none !important;
	}

	.dp-over__foto img {
		object-position: 53% 25%;
	}

	.dp-over__foto::after {
		background: linear-gradient(180deg, transparent 50%, var(--dp-forest) 100%);
	}

	.dp-over__foto + .dp-container {
		position: relative;
		z-index: 1;
		margin-top: -5rem;
	}

	/* Reviewblok: de social proof links uitgelijnd, net als de kop. */
	.dp-reviews__trust .dp-trust__tekst {
		justify-items: start;
		text-align: left;
	}

	/* Reviewmuur als carrousel: één kaart tegelijk, vegen, pijltjes en
	   bolletjes. Het script regelt het doorlopen. */
	.dp-muur {
		position: relative;
		display: flex;
		gap: var(--dp-space-s);
		columns: auto;
		margin-inline: calc(-1 * var(--dp-gutter));
		padding: 0.5rem var(--dp-gutter) 1.5rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

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

	.dp-muur > * {
		flex: 0 0 84%;
		margin: 0;
		scroll-snap-align: center;
	}

	.dp-muur__kloon {
		display: block;
	}

	.dp-muur__bediening {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--dp-space-s);
		margin-top: var(--dp-space-s);
	}

	.dp-muur__bolletjes {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.35rem;
		max-width: 12rem;
	}

	.dp-muur__bolletjes button {
		width: 0.5rem;
		height: 0.5rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgb(18 43 7 / 0.2);
		cursor: pointer;
		transition: background var(--dp-transition), transform var(--dp-transition);
	}

	.dp-muur__bolletjes button[aria-current="true"] {
		background: var(--dp-forest);
		transform: scale(1.3);
	}
}

@media (width < 36rem) {
	/* Cijferbalk: de drie getallen onder elkaar, getal links en uitleg
	   rechts. Naast elkaar werd het drie smalle kolommen vol afbrekingen. */
	.dp-cijferbalk .dp-getallen {
		grid-template-columns: minmax(0, 1fr);
	}

	.dp-cijferbalk .dp-getal {
		grid-template-columns: 5.25rem minmax(0, 1fr);
		align-items: center;
		gap: 0.25rem 0.9rem;
		padding: 0.85rem 0;
	}

	.dp-cijferbalk .dp-getal + .dp-getal {
		border-inline-start: 0;
		border-top: var(--dp-border) solid var(--dp-line-on-dark);
	}

	.dp-cijferbalk .dp-getal dt {
		font-size: 2.1rem;
	}

	/* "main" ervoor: paginas.css laadt later en zou anders winnen. */
	main .dp-section:has(+ .dp-cijferbalk) {
		padding-bottom: 14.5rem;
	}

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

@media (width < 48rem) and (prefers-reduced-motion: no-preference) {
	/* Beelden in het pakket: dezelfde animaties als op desktop, maar nu elke
	   keer dat je het onderdeel openklapt. */
	.dp-onderdeel[open] .dp-onderdeel__beeld .dp-minikaart--lijst svg {
		animation: dp-vinkje 350ms var(--dp-ease-out) both;
	}

	.dp-onderdeel[open] .dp-onderdeel__beeld .dp-minikaart--lijst li:nth-child(1) svg { animation-delay: 400ms; }
	.dp-onderdeel[open] .dp-onderdeel__beeld .dp-minikaart--lijst li:nth-child(2) svg { animation-delay: 700ms; }
	.dp-onderdeel[open] .dp-onderdeel__beeld .dp-minikaart--lijst li:nth-child(3) svg { animation-delay: 1000ms; }
	.dp-onderdeel[open] .dp-onderdeel__beeld .dp-minikaart--lijst li:nth-child(4) svg { animation-delay: 1300ms; }

	.dp-onderdeel[open] .dp-onderdeel__beeld .dp-zoek__resultaat--goed {
		animation: dp-zoek-omhoog 800ms cubic-bezier(0.5, 0, 0.2, 1) 700ms both;
		animation-timeline: auto;
		animation-range: normal;
	}

	.dp-onderdeel[open] .dp-onderdeel__beeld .dp-zoek__resultaat--fout {
		animation: dp-zoek-omlaag 800ms cubic-bezier(0.5, 0, 0.2, 1) 700ms both;
		animation-timeline: auto;
		animation-range: normal;
	}
}

/* De pijl tussen bonnetje en prijskaart precies in het midden: de sectie
   begint met veel lucht, dus de pijl schuift iets omhoog en krijgt eronder
   evenveel ruimte als erboven. */
.dp-prijsB--v2 .dp-prijs__pijl {
	width: 3rem;
	height: 7.5rem;
	margin-block: -2.6rem 4.35rem;
}

@media (width < 48rem) {
	.dp-prijsB--v2 .dp-prijs__pijl {
		margin-block: -1rem 2.15rem;
	}

	/* De veegbare rij pillen mag het blok er omheen niet breder maken. */
	.dp-inhoud--v2 .dp-meekomt {
		grid-template-columns: minmax(0, 1fr);
	}

	.dp-inhoud--v2 .dp-meekomt__blok {
		min-width: 0;
	}
}

/* De pijltjes van de reviewcarrousel staan op een licht vlak. */
.dp-muur__bediening .dp-rond {
	border-color: var(--dp-line-strong);
	color: var(--dp-forest);
}

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

/* --- Ronde 6 ------------------------------------------------------------------- */

/* Stappen: een plusje bij de stappen die dicht staan. */
.dp-stapper__tab:has(.dp-stapper__plus) {
	grid-template-columns: 2.4rem minmax(0, 1fr) 1.25rem;
}

.dp-stapper__plus {
	display: grid;
	margin-top: 0.35rem;
	color: var(--dp-forest);
	transition: opacity var(--dp-transition);
}

.dp-stapper__plus svg {
	width: 1.25rem;
	height: 1.25rem;
	stroke-width: 2.4;
}

.dp-stapper__tab[aria-selected="true"] .dp-stapper__plus {
	opacity: 0;
}

/* Functies: op desktop gewoon het raster van drie kolommen. */
.dp-functies__rij,
.dp-functies__rijlijst {
	display: contents;
}

/* Templates: één meeschuivende balk voor alle drie (door het script
   aangemaakt). Alleen op smalle schermen. */
.dp-tpl__balk {
	display: none;
}

/* Reviewcarrousel: kleinere pijltjes, en de donkere hover alleen met een muis. */
.dp-muur__bediening .dp-rond {
	width: 2.4rem;
	height: 2.4rem;
	background: transparent;
	font-size: 1.15rem;
	line-height: 1;
}

.dp-muur__bediening .dp-rond:hover {
	background: transparent;
	color: var(--dp-forest);
}

@media (hover: hover) {
	.dp-muur__bediening .dp-rond:hover {
		background: var(--dp-forest);
		color: var(--dp-paper);
	}
}

@media (width < 62rem) {
	.dp-tpl__balk {
		display: block;
		position: absolute;
		inset: 0 0 auto;
		z-index: 20;
		padding-inline: var(--dp-gutter);
		pointer-events: none;
	}

	.dp-tpl__balk .dp-scene__nav {
		position: sticky;
		inset-block-start: 0.75rem;
		margin: calc(var(--dp-radius-section) + 1.5rem) auto 0;
		max-width: 36rem;
		pointer-events: auto;
		box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.35);
		transition:
			background-color 400ms var(--dp-ease),
			border-color 400ms var(--dp-ease),
			color 400ms var(--dp-ease);
	}

	.dp-tpl__balk[data-scene="1"] .dp-scene__nav {
		border-color: var(--dp-line-on-dark);
		background: rgb(22 44 12 / 0.88);
		color: var(--dp-paper);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	.dp-tpl__balk:not([data-scene="1"]) .dp-scene__nav {
		border-color: var(--dp-pil-rand);
		background: #fff;
		color: var(--dp-forest);
	}

	/* De balken in de sets zelf blijven hun plek innemen, maar je ziet ze
	   niet: de meeschuivende balk ligt er precies overheen. */
	.dp-tpl--v2 .dp-scene .dp-scene__nav {
		visibility: hidden;
	}
}

@media (width < 48rem) {
	/* Functies: drie rijen, elke pil zo breed als zijn tekst. */
	.dp-inhoud--v2 .dp-functies {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.dp-inhoud--v2 .dp-functies__rij {
		display: block;
	}

	.dp-inhoud--v2 .dp-functies__rijlijst {
		display: flex;
		gap: 0.5rem;
		width: max-content;
	}
}

/* Varianten: ze beginnen als stapel en vouwen uit terwijl je erlangs scrolt. */
@supports (animation-timeline: view()) {
	@media (width < 48rem) and (prefers-reduced-motion: no-preference) {
		.dp-inhoud--v2 .dp-duo {
			view-timeline: --dp-duo block;
		}

		.dp-inhoud--v2 .dp-duo__kaart--a {
			animation: dp-duo-a linear both;
			animation-timeline: --dp-duo;
			animation-range: entry 25% cover 45%;
		}

		.dp-inhoud--v2 .dp-duo__kaart--b {
			animation: dp-duo-b linear both;
			animation-timeline: --dp-duo;
			animation-range: entry 25% cover 45%;
		}
	}
}

@keyframes dp-duo-a {
	from {
		transform: translateX(calc(50% + 0.35rem)) rotate(-3deg);
	}

	to {
		transform: none;
	}
}

@keyframes dp-duo-b {
	from {
		transform: translateX(calc(-50% - 0.35rem)) translate(8%, -5%) rotate(5deg);
	}

	to {
		transform: none;
	}
}

@media (width < 48rem) {
	/* Home: op deze foto zit Simone met de hond links onderin. */
	.dp-over--home .dp-over__foto img {
		object-position: 28% 62%;
	}
}

@media (width < 62rem) {
	/* Contact: net als op de salespagina het mailtje onder de vragen. */
	.dp-faq--kort .dp-faq__raster {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.dp-faq--kort .dp-faq__links {
		display: contents;
	}

	.dp-faq--kort .dp-faq__links > * + * {
		margin-top: 0.75rem;
	}

	.dp-faq--kort .dp-faq__vragen {
		order: 1;
		margin-top: var(--dp-space-l);
	}

	.dp-faq--kort .dp-faq__mail {
		order: 2;
		margin-top: var(--dp-space-m);
	}
}

/* --- Ronde 7 ------------------------------------------------------------------- */

/* Templatetabs in dezelfde vorm als de settabs verderop: gewone letters,
   vet, en ruimere pillen. De kleuren blijven per template. */
.dp-tpl--v2 .dp-scene__nav a,
.dp-tpl__balk .dp-scene__nav a {
	padding: 0.6rem 1.2rem;
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	letter-spacing: 0;
	text-transform: none;
}

/* FAQ: een onderwerp klapt net zo zacht open als een vraag. */
@supports (interpolate-size: allow-keywords) {
	.dp-faqgroep::details-content {
		height: 0;
		overflow: clip;
		opacity: 0;
		transition:
			height 450ms var(--dp-ease-out),
			opacity 350ms var(--dp-ease),
			content-visibility 450ms allow-discrete;
	}

	.dp-faqgroep[open]::details-content {
		height: auto;
		opacity: 1;
	}
}

/* Kostenbonnetje: het zorgplan als los regeltje, buiten het totaal. */
.dp-jaarbon__optie {
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px dashed rgb(18 43 7 / 0.2);
}

.dp-jaarbon__optie a {
	color: var(--dp-link);
}

/* Schuifbalkje onder een rij die opzij veegt: laat zien dat er meer is. */
.dp-schuifbalk {
	display: none;
}

/* Zwevende balk: alleen op mobiel. */
.dp-zweefbalk {
	display: none;
}

@media (width < 62rem) {
	/* Meer lucht tussen de onthulling en de balk van het eerste template. */
	.dp-templates {
		padding-bottom: calc(var(--dp-section-y) + 2rem);
	}

	/* Het kostenbonnetje in het midden. */
	.dp-jaarbon {
		justify-self: center;
		width: min(100%, 24rem);
		margin-inline: auto;
	}
}

@media (width < 48rem) {
	.dp-schuifbalk {
		display: block;
		height: 4px;
		margin: 0.4rem auto 0;
		max-width: 12rem;
		overflow: hidden;
		border-radius: 999px;
		background: rgb(18 43 7 / 0.12);
	}

	.dp-section--dark .dp-schuifbalk {
		background: rgb(255 255 255 / 0.15);
	}

	.dp-schuifbalk span {
		display: block;
		width: 8%;
		height: 100%;
		border-radius: inherit;
		background: var(--dp-forest);
		transition: width 150ms linear;
	}

	.dp-section--dark .dp-schuifbalk span {
		background: var(--dp-lime);
	}

	/* Klantvoorbeelden: vegen zoals de reviews, met links en rechts een
	   stukje van de buren in beeld. */
	.dp-galerij .dp-carrousel {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--dp-gutter));
		padding: 0.5rem 0 1rem;
	}

	.dp-galerij .dp-carrousel::-webkit-scrollbar {
		display: none;
	}

	.dp-galerij .dp-carrousel__spoor {
		width: max-content;
		grid-auto-columns: calc(100vw - 5rem);
		gap: 1rem;
		padding-inline: 2.5rem;
		transform: none !important;
		transition: none;
	}

	.dp-galerij .dp-klant {
		scroll-snap-align: center;
	}

	.dp-galerij [data-dp-carrousel-bolletjes] {
		display: none;
	}

	/* De zwevende balk onderin. */
	.dp-zweefbalk {
		position: fixed;
		inset-inline: 0.75rem;
		inset-block-end: 0.75rem;
		z-index: 90;
		display: flex;
		gap: 0.5rem;
		padding: 0.4rem;
		border: var(--dp-border) solid rgb(255 255 255 / 0.7);
		border-radius: var(--dp-radius-pill);
		background: rgb(255 255 255 / 0.85);
		backdrop-filter: blur(16px) saturate(1.4);
		-webkit-backdrop-filter: blur(16px) saturate(1.4);
		box-shadow: 0 16px 36px -18px rgb(18 43 7 / 0.45);
		transform: translateY(160%);
		transition: transform 500ms var(--dp-ease-out);
	}

	.dp-zweefbalk.is-zichtbaar {
		transform: none;
	}

	.dp-zweefbalk__knop {
		flex: 1 1 0;
		justify-content: center;
		padding: 0.75rem 0.6rem;
		font-size: 0.88rem;
		white-space: nowrap;
	}

	body:has(.dp-zweefbalk) {
		padding-bottom: 5rem;
	}
}

@media (width < 30rem) {
	.dp-tpl--v2 .dp-scene__nav a,
	.dp-tpl__balk .dp-scene__nav a {
		padding: 0.55rem 0.5rem;
		font-size: 0.78rem;
	}
}

/* --- Ronde 7: website templates, vooral mobiel -------------------------------- */

/* De korte trusttekst is alleen voor een telefoon. */
.dp-trust__kort {
	display: none;
}

/* Hero: iets minder lucht tussen de tekst en de knop. */
.dp-hero--v2 .dp-hero__knoppen {
	margin-top: 2rem;
}

@media (width < 48rem) {
	/* Hero: alles links uitgelijnd in plaats van gecentreerd. */
	.dp-hero--v2 .dp-hero__tekst {
		text-align: left;
	}

	.dp-hero--v2 :is(.dp-hero__eyebrow, .dp-hero__titel, .dp-hero__lead) {
		margin-inline: 0;
	}

	.dp-hero--v2 .dp-hero__knoppen {
		justify-content: flex-start;
		margin-top: 1.5rem;
	}

	/* Trust bar: alles op één rij. Kleinere gezichtjes, sterren dichter
	   op elkaar en een korte tekst die op één regel past. */
	.dp-hero--v2 .dp-trust {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 0.6rem;
	}

	.dp-hero--v2 .dp-trust__avatars img {
		width: 1.65rem;
		height: 1.65rem;
	}

	.dp-hero--v2 .dp-trust__avatars img + img {
		margin-inline-start: -0.55rem;
	}

	.dp-hero--v2 .dp-trust__tekst {
		gap: 0.15rem;
		justify-items: start;
		font-size: 0.8rem;
		line-height: 1.25;
		text-align: left;
	}

	.dp-hero--v2 .dp-stars {
		gap: 0.05em;
		font-size: 0.8rem;
	}

	.dp-hero--v2 .dp-trust__lang {
		display: none;
	}

	.dp-hero--v2 .dp-trust__kort {
		display: inline;
	}

	/* Drie gezichtjes in plaats van vijf, dan past de tekst ernaast. En
	   minder lucht tussen de knop en de balk. */
	.dp-hero--v2 .dp-trust {
		margin-top: 1.25rem;
	}

	.dp-hero--v2 .dp-trust__avatars img:nth-child(n + 4) {
		display: none;
	}

	/* Templates: minder lucht tussen de onthulling en de templatebalk. */
	.dp-templates {
		padding-bottom: 2.5rem;
	}

	/* "Meegeleverde functies": meer lucht erboven, minder eronder. */
	.dp-inhoud--v2 .dp-meekomt__blok + .dp-meekomt__blok {
		margin-top: 1.5rem;
	}

	.dp-inhoud--v2 {
		padding-bottom: 2.5rem;
	}

	/* Pakket en "waarom dit werkt" hebben dezelfde achtergrond: het gat
	   ertussen hoeft niet zo groot. */
	.dp-voordelen {
		padding-top: 1.5rem;
	}

	/* De pijl onder het bonnetje: boven en onder evenveel lucht. */
	.dp-prijsB--v2 .dp-prijs__pijl {
		margin-block: -2.8rem 2.15rem;
	}

	/* Klantvoorbeelden: het schuifbalkje met ruimte erboven en eronder. */
	.dp-galerij .dp-schuifbalk {
		margin: 1.5rem auto 1rem;
	}

	/* Over mij: de foto iets ingezoomd en omhoog, zodat bovenin niet alleen
	   bomen staan maar Simone meteen in beeld is. */
	.dp-over__foto {
		overflow: hidden;
	}

	.dp-over__foto img {
		height: 130%;
		transform: translateY(-15%);
	}
}

@media (width < 48rem) {
	/* Meegeleverde functies: alleen opzij vegen, niet ook een stukje op en
	   neer (dat maakte het rommelig). */
	.dp-inhoud--v2 .dp-functies {
		overflow-y: hidden;
		overscroll-behavior-x: contain;
	}

	/* Wat je krijgt: op een telefoon staat het beeld in het onderdeel zelf.
	   Klap je er een open, dan spelen dezelfde animaties als op desktop:
	   het antwoord in het gesprek komt na het vraagje, de vinkjes gaan één
	   voor één aan en het zoekresultaat schuift omhoog. */
	.dp-onderdeel[open] .dp-onderdeel__beeld .dp-bericht--simone {
		animation: dp-bericht 500ms var(--dp-ease-out) 700ms both;
	}

	.dp-onderdeel[open] .dp-onderdeel__beeld .dp-minikaart--lijst svg {
		animation: dp-vinkje 350ms var(--dp-ease-out) both;
	}

	.dp-onderdeel[open] .dp-onderdeel__beeld .dp-minikaart--lijst li:nth-child(1) svg { animation-delay: 500ms; }
	.dp-onderdeel[open] .dp-onderdeel__beeld .dp-minikaart--lijst li:nth-child(2) svg { animation-delay: 800ms; }
	.dp-onderdeel[open] .dp-onderdeel__beeld .dp-minikaart--lijst li:nth-child(3) svg { animation-delay: 1100ms; }
	.dp-onderdeel[open] .dp-onderdeel__beeld .dp-minikaart--lijst li:nth-child(4) svg { animation-delay: 1400ms; }
}

@media (width < 48rem) and (prefers-reduced-motion: no-preference) {
	.dp-onderdeel[open] .dp-onderdeel__beeld .dp-zoek__resultaat--goed {
		animation: dp-zoek-omhoog 800ms cubic-bezier(0.5, 0, 0.2, 1) 900ms both;
		animation-timeline: auto;
		animation-range: normal;
	}

	.dp-onderdeel[open] .dp-onderdeel__beeld .dp-zoek__resultaat--fout {
		animation: dp-zoek-omlaag 800ms cubic-bezier(0.5, 0, 0.2, 1) 900ms both;
		animation-timeline: auto;
		animation-range: normal;
	}
}

/* FAQ zonder onderwerpen (zorgplan, contact): de vragen los, zonder kaart
   eromheen, maar de antwoorden in dezelfde stijl als op de salespagina: op
   een licht vlak, zonder rand. */
.dp-faq--kort .dp-vraag__bubbel {
	border: 0;
	background: var(--dp-shell);
}