/*
 * Discovloer — homepage
 *
 * Alles op de homepage staat hier. Kleuren, fonts en de vier ruimtematen komen
 * uit main.css en theme.json; dit bestand voegt alleen de opbouw toe.
 *
 * Alle klassen beginnen met .hp-. Dat is geen stijlvoorkeur maar een afspraak:
 * de homepage is de enige pagina die zo vaak verbouwd wordt, en met een eigen
 * voorvoegsel kun je dit bestand weggooien zonder dat er ergens anders iets
 * omvalt.
 */

/* ================================================================ ritme == */

/*
 * DE ACHTERGRONDLADDER.
 *
 * Twaalf secties onder elkaar in exact dezelfde kleur lezen als één eindeloze
 * lap. Twaalf verschillende kleuren lezen als een kermis. Daarom drie tinten
 * die elkaar afwisselen, met steeds maar een paar procent verschil — genoeg om
 * te zien dat er een nieuwe sectie begint, te weinig om als "gestreept" op te
 * vallen. De vierde variant (neon) is er precies één keer, onderaan.
 */
.hp-sectie {
	position: relative;
	padding-block: var(--dvv-ruimte-sectie);
}

.hp-sectie--nacht  { background: var(--dvv-night); }
.hp-sectie--diep   { background: var(--dvv-night-deep); }

.hp-sectie--paneel {
	background:
		radial-gradient(120% 80% at 50% 0%,
			color-mix(in srgb, var(--dvv-panel) 85%, transparent) 0%,
			transparent 70%),
		var(--dvv-night);
}

/*
 * De scheidingslijn. Eén haarlijn die in het midden oplicht en naar de randen
 * wegvalt, zodat de lijn niet als een harde streep over de volle breedte
 * hangt. Op de eerste sectie na de hero blijft hij weg.
 */
.hp-sectie + .hp-sectie::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent,
		color-mix(in srgb, var(--dvv-white) 14%, transparent) 25%,
		color-mix(in srgb, var(--dvv-neon) 45%, transparent) 50%,
		color-mix(in srgb, var(--dvv-white) 14%, transparent) 75%,
		transparent);
}

/*
 * De tegelscheiding. Zwaardere variant voor de twee plekken waar de pagina
 * echt van onderwerp wisselt: een strook LED-tegels in de kleuren van de
 * vloer. Spaarzaam gebruiken — het is een accent, geen sjabloon.
 */
.hp-sectie--tegelrand::before {
	height: 6px;
	background: repeating-linear-gradient(90deg,
		var(--dvv-t1) 0 22px, transparent 22px 30px,
		var(--dvv-t3) 30px 52px, transparent 52px 60px,
		var(--dvv-t5) 60px 82px, transparent 82px 90px,
		var(--dvv-t7) 90px 112px, transparent 112px 120px);
	opacity: 0.7;
}

.hp-binnen {
	width: 100%;
	max-width: var(--dvv-breed);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
}

/* ============================================================ koptekst == */

.hp-kop {
	max-width: 46rem;
	margin-bottom: var(--dvv-ruimte-kop);
}

.hp-kop--midden {
	margin-inline: auto;
	text-align: center;
}

.hp-eyebrow {
	display: inline-block;
	font-family: var(--dvv-pixel);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dvv-cyan);
	margin-bottom: 0.9rem;
}

.hp-kop h2 {
	font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
	margin-bottom: 0.6rem;
}

.hp-intro {
	color: var(--dvv-muted);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	line-height: 1.65;
	margin: 0;
}

/* ============================================================== knoppen == */

/*
 * Twee knoppen die je nooit met elkaar verwart, ook niet in je ooghoek: de
 * primaire is massief en licht op, de secundaire is een glasplaat met een
 * randje. Vorm doet hier het werk, niet alleen kleur — dat is ook de reden dat
 * dit onderscheid overeind blijft voor wie kleuren slecht onderscheidt.
 */
.hp-knop {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.6rem;
	border-radius: var(--dvv-radius);
	font-family: var(--dvv-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.hp-knop--primair {
	background: linear-gradient(135deg, var(--dvv-neon), var(--dvv-magenta));
	color: #fff;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--dvv-neon-soft) 40%, transparent),
		0 10px 30px -8px color-mix(in srgb, var(--dvv-neon) 75%, transparent);
}

.hp-knop--primair:hover {
	transform: translateY(-2px);
	box-shadow:
		0 0 0 1px var(--dvv-neon-soft),
		0 16px 40px -10px color-mix(in srgb, var(--dvv-magenta) 85%, transparent);
	color: #fff;
}

.hp-knop--secundair {
	background: color-mix(in srgb, var(--dvv-white) 6%, transparent);
	border-color: var(--dvv-rand);
	color: var(--dvv-white);
	backdrop-filter: blur(6px);
}

.hp-knop--secundair:hover {
	border-color: color-mix(in srgb, var(--dvv-cyan) 60%, transparent);
	color: var(--dvv-white);
	transform: translateY(-2px);
}

.hp-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: var(--dvv-ruimte-klein);
}

/* ================================================================= hero == */

.hp-hero {
	position: relative;
	overflow: hidden;
	background: var(--dvv-night-deep);
	padding-block: clamp(3.5rem, 2rem + 8vw, 7rem);
}

/*
 * De gloed achter de tekst. Twee zachte vlekken in plaats van één, zodat het
 * licht van links komt en niet als een symmetrische halo achter de kop hangt.
 */
.hp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 60% at 15% 15%,
			color-mix(in srgb, var(--dvv-neon) 28%, transparent), transparent 70%),
		radial-gradient(50% 50% at 85% 30%,
			color-mix(in srgb, var(--dvv-cyan) 14%, transparent), transparent 70%);
	pointer-events: none;
}

.hp-hero__binnen {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dvv-ruimte-blok);
	align-items: center;
}

@media (min-width: 62rem) {
	.hp-hero__binnen { grid-template-columns: 1.05fr 0.95fr; }
}

.hp-hero h1 {
	font-size: clamp(2.1rem, 1.1rem + 4.2vw, 3.9rem);
	margin-bottom: 0.75rem;
}

.hp-hero__tagline {
	display: block;
	color: var(--dvv-neon-soft);
}

/*
 * Het oplichtende deel van de kop.
 *
 * Cyaan en niet paars: paars is de kleur van de knop, en als de kop dezelfde
 * kleur krijgt als het enige element dat aangeklikt moet worden, verliest die
 * knop precies datgene wat hem eruit laat springen. Cyaan komt uit dezelfde
 * vloer, botst nergens mee en heeft op deze donkere achtergrond het hoogste
 * contrast van het hele palet.
 *
 * De gloed is bewust ruim en zwak: dat leest als licht dat van de letters af
 * komt. Een harde schaduw eronder zou juist als een goedkoop reliëf lezen.
 */
.hp-hero__accent {
	color: var(--dvv-cyan);
	text-shadow:
		0 0 28px color-mix(in srgb, var(--dvv-cyan) 55%, transparent),
		0 0 60px color-mix(in srgb, var(--dvv-cyan) 30%, transparent);
}

.hp-hero__sub {
	color: var(--dvv-muted);
	font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
	line-height: 1.65;
	max-width: 34rem;
	margin: 0 0 1.4rem;
}

/* De vier korte usp's onder de knoppen — geen bullets, maar vinkjes. */
.hp-hero__usps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.4rem;
	margin: 1.6rem 0 0;
	padding: 0;
	list-style: none;
}

.hp-hero__usps li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: var(--dvv-white);
}

.hp-vink {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	color: var(--dvv-lime);
}

/* -------- het beeld in de hero -------- */

/*
 * DE FOTO NAAST DE TEKST.
 *
 * Boogvorm: bovenaan rond, onderaan recht. Dat is de vorm van een danstent en
 * van een podiumboog, en het breekt het rechthoekige raster van de rest van de
 * pagina zonder dat de foto zelf wordt aangesneden.
 *
 * De gloed eromheen komt uit twee gedraaide vlakken in de vloerkleuren, zwaar
 * geblurd. Dat leest als licht dat van de vloer af komt in plaats van als een
 * gekleurd kader. Alles staat achter de foto, dus het kost geen leesbaarheid.
 */
.hp-hero__beeld {
	position: relative;
	display: grid;
	place-items: center;
	isolation: isolate;
}

.hp-hero__beeld::before,
.hp-hero__beeld::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 6% 4%;
	border-radius: 50% 50% 42% 42%;
	filter: blur(46px);
	opacity: 0.55;
}

.hp-hero__beeld::before {
	background: linear-gradient(135deg, var(--dvv-neon), var(--dvv-magenta) 55%, transparent);
	transform: rotate(-8deg) translate(-4%, -3%);
}

.hp-hero__beeld::after {
	background: linear-gradient(215deg, var(--dvv-cyan), var(--dvv-lime) 60%, transparent);
	transform: rotate(10deg) translate(5%, 4%);
	opacity: 0.4;
}

.hp-hero__foto {
	display: block;
	width: 100%;
	max-width: 30rem;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	/* De boog: bovenhoeken ver afgerond, onderhoeken licht. */
	border-radius: 15rem 15rem var(--dvv-radius-lg) var(--dvv-radius-lg);
	border: 1px solid color-mix(in srgb, var(--dvv-white) 16%, transparent);
	box-shadow:
		0 30px 60px -30px #000,
		0 0 0 8px color-mix(in srgb, var(--dvv-white) 4%, transparent);
}

@media (min-width: 62rem) {
	.hp-hero__foto { aspect-ratio: 3 / 4; }
}

/* -------- de LED-vloer in de hero -------- */

.hp-vloer {
	--tegel: 42px;
	display: grid;
	grid-template-columns: repeat(8, var(--tegel));
	gap: 4px;
	justify-content: center;
	transform: perspective(900px) rotateX(52deg) rotateZ(-45deg);
	transform-style: preserve-3d;
	margin-inline: auto;
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
}

.hp-vloer__tegel {
	aspect-ratio: 1;
	border-radius: 2px;
	background: color-mix(in srgb, var(--dvv-panel) 80%, #000);
	animation: hp-puls 6s ease-in-out infinite;
}

@keyframes hp-puls {
	0%, 100% { opacity: 0.28; }
	50%      { opacity: 1; box-shadow: 0 0 14px currentColor; }
}

/* ============================================================ usp-balk == */

.hp-usps {
	display: grid;
	gap: 1px;
	background: var(--dvv-rand);
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius-lg);
	overflow: hidden;
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) { .hp-usps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .hp-usps { grid-template-columns: repeat(4, 1fr); } }

.hp-usp {
	background: var(--dvv-night);
	padding: 1.6rem 1.4rem;
	transition: background-color 0.2s ease;
}

.hp-usp:hover { background: var(--dvv-panel); }

.hp-usp__icoon {
	width: 1.6rem;
	height: 1.6rem;
	color: var(--dvv-neon-soft);
	margin-bottom: 0.85rem;
}

.hp-usp h3 {
	font-size: 1.0625rem;
	margin-bottom: 0.35rem;
}

.hp-usp p {
	color: var(--dvv-muted);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0;
}

/* ============================================== kaarten: formaten enz. == */

.hp-raster {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.hp-raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

.hp-kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--dvv-panel);
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius-lg);
	padding: 1.5rem;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hp-kaart:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--dvv-neon) 45%, transparent);
	box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--dvv-neon) 80%, transparent);
}

.hp-kaart h3 {
	font-size: 1.25rem;
	margin-bottom: 0.3rem;
}

.hp-kaart p {
	color: var(--dvv-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.hp-kaart__prijs {
	font-family: var(--dvv-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--dvv-white);
	margin-top: auto;
	padding-top: 1rem;
}

.hp-kaart__prijs small {
	display: block;
	font-family: var(--dvv-body);
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--dvv-muted);
	margin-top: 0.2rem;
}

.hp-label {
	display: inline-block;
	font-family: var(--dvv-pixel);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.3rem 0.5rem;
	border-radius: 3px;
	background: color-mix(in srgb, var(--dvv-amber) 18%, transparent);
	color: var(--dvv-amber);
	border: 1px solid color-mix(in srgb, var(--dvv-amber) 35%, transparent);
}

/*
 * Placeholder-markering. Zolang de echte maten en prijzen er niet zijn, moet
 * onmiskenbaar zijn dat dit voorbeeldgegevens zijn — anders staat er over drie
 * weken een verzonnen prijs online omdat niemand het nog wist.
 */
.hp-placeholder {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.2rem;
	padding: 0.7rem 0.9rem;
	border: 1px dashed color-mix(in srgb, var(--dvv-amber) 50%, transparent);
	border-radius: var(--dvv-radius);
	background: color-mix(in srgb, var(--dvv-amber) 8%, transparent);
	color: var(--dvv-amber);
	font-size: 0.8125rem;
}

/* -------- mini-vloertje op de formaatkaart -------- */

.hp-mini {
	display: grid;
	gap: 2px;
	width: fit-content;
	margin-bottom: 1rem;
	padding: 6px;
	border-radius: 4px;
	background: color-mix(in srgb, #000 35%, transparent);
}

.hp-mini span {
	width: 9px;
	height: 9px;
	border-radius: 1px;
	opacity: 0.85;
}

/* -------- pakketten: de middelste springt eruit -------- */

.hp-kaart--uitgelicht {
	border-color: color-mix(in srgb, var(--dvv-neon) 60%, transparent);
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--dvv-neon) 12%, var(--dvv-panel)),
		var(--dvv-panel));
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--dvv-neon) 30%, transparent);
}

.hp-kaart__vlag {
	position: absolute;
	inset-block-start: -0.75rem;
	inset-inline-start: 1.5rem;
	padding: 0.35rem 0.7rem;
	border-radius: 3px;
	background: var(--dvv-neon);
	color: #fff;
	font-family: var(--dvv-pixel);
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hp-lijst {
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.hp-lijst li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.9375rem;
	color: var(--dvv-white);
	line-height: 1.5;
}

/* ============================================================= stappen == */

.hp-stappen {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	counter-reset: stap;
}

.hp-stap { position: relative; padding-top: 3.2rem; }

.hp-stap::before {
	counter-increment: stap;
	content: counter(stap, decimal-leading-zero);
	position: absolute;
	inset-block-start: 0;
	font-family: var(--dvv-display);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px color-mix(in srgb, var(--dvv-neon) 70%, transparent);
}

.hp-stap h3 { font-size: 1.0625rem; margin-bottom: 0.35rem; }
.hp-stap p  { color: var(--dvv-muted); font-size: 0.9375rem; line-height: 1.6; margin: 0; }

/* ============================================================= reviews == */

.hp-review {
	background: var(--dvv-panel);
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius-lg);
	padding: 1.5rem;
}

.hp-sterren { color: var(--dvv-amber); font-size: 1rem; letter-spacing: 0.1em; margin-bottom: 0.8rem; }

.hp-review blockquote {
	margin: 0 0 1rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--dvv-white);
}

.hp-review figcaption { color: var(--dvv-muted); font-size: 0.875rem; }

/* ============================================================= galerij == */

/*
 * DE GALERIJ.
 *
 * Losjes gekantelde kaarten, elk een paar graden gedraaid en op een andere
 * hoogte, met een gekleurde gloed eronder uit de vloerkleuren. Alsof iemand
 * foto's op tafel heeft neergelegd, in dezelfde geest als het beeld op de
 * over-ons-pagina.
 *
 * Flexbox en geen grid, om één reden: bij een grid staat een onvolledige
 * laatste rij links uitgelijnd, met een gat rechts. Met flex en
 * justify-content: center komt die rij netjes in het midden. Bij vijf foto's
 * op een driekolomsscherm scheelt dat het verschil tussen slordig en bedoeld.
 *
 * De kantelingen herhalen zich per vijf, dus een zesde en zevende foto vallen
 * vanzelf in hetzelfde ritme.
 */
.hp-galerij {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.1rem;
}

.hp-galerij__item {
	position: relative;
	flex: 0 1 calc(50% - 0.55rem);
	aspect-ratio: 4 / 5;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--dvv-rand);
	background: var(--dvv-panel);
	color: var(--dvv-muted);
	font-size: 0.8125rem;
	text-align: center;
	display: grid;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease;
}

@media (min-width: 48rem) { .hp-galerij__item { flex-basis: calc(33.333% - 0.74rem); } }
/* Zes op een rij: met de basis van een vijfde viel de zesde foto alleen op een
   tweede regel. De gaten tellen mee, vandaar het aftrekken van 0.917rem. */
@media (min-width: 64rem) { .hp-galerij__item { flex-basis: calc(16.6667% - 0.917rem); } }

/* De kanteling en de hoogte, per positie en herhalend per vijf. */
.hp-galerij__item:nth-child(5n+1) { transform: rotate(-3deg); }
.hp-galerij__item:nth-child(5n+2) { transform: rotate(2deg) translateY(-1rem); }
.hp-galerij__item:nth-child(5n+3) { transform: rotate(-1.5deg) translateY(0.6rem); }
.hp-galerij__item:nth-child(5n+4) { transform: rotate(3deg) translateY(-0.8rem); }
.hp-galerij__item:nth-child(5n+5) { transform: rotate(-2deg); }

/* De gloed komt uit de kleuren van de vloer en wisselt mee. */
.hp-galerij__item:nth-child(5n+1) { box-shadow: 0 22px 50px -26px color-mix(in srgb, var(--dvv-neon) 95%, transparent); }
.hp-galerij__item:nth-child(5n+2) { box-shadow: 0 22px 50px -26px color-mix(in srgb, var(--dvv-cyan) 95%, transparent); }
.hp-galerij__item:nth-child(5n+3) { box-shadow: 0 22px 50px -26px color-mix(in srgb, var(--dvv-magenta) 95%, transparent); }
.hp-galerij__item:nth-child(5n+4) { box-shadow: 0 22px 50px -26px color-mix(in srgb, var(--dvv-lime) 95%, transparent); }
.hp-galerij__item:nth-child(5n+5) { box-shadow: 0 22px 50px -26px color-mix(in srgb, var(--dvv-amber) 95%, transparent); }

/* Bij hover komt de kaart recht te hangen. Dat leest als oppakken. */
.hp-galerij__item:hover {
	transform: rotate(0deg) translateY(-4px);
	border-color: color-mix(in srgb, var(--dvv-white) 30%, transparent);
}

.hp-galerij__item img {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Iets onder het midden: op deze foto's ligt de vloer in de onderste helft. */
	object-position: center 62%;
}

/*
 * Staande foto's krijgen een langer kader en worden onderaan uitgelijnd.
 *
 * Twee maatregelen die samen werken. Alleen onderaan uitlijnen was niet
 * genoeg: de foto van de achttiende verjaardag is 941 bij 1672 pixels, en in
 * een kader van 4:5 zie je daar maar zeventig procent van, dus bleef er nog
 * altijd een flinke lap plafond staan. Met een kader van 5:8 zie je ruim
 * negentig procent van de foto, en dan staat de vloer er gewoon op.
 *
 * De rij wordt daardoor ongelijk van hoogte, en dat mag hier: bij losjes
 * neergelegde kaarten hoort dat bij het beeld.
 */
.hp-galerij__item.is-staand {
	aspect-ratio: 5 / 8;
}

.hp-galerij__item.is-staand img { object-position: center bottom; }

@media (prefers-reduced-motion: reduce) {
	.hp-galerij__item { transition: none; transform: none; }
	.hp-galerij__item:hover { transform: none; }
}


/* ============================================================= feesten == */

.hp-feest {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.1rem 1.3rem;
	background: var(--dvv-panel);
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius-lg);
	text-decoration: none;
	color: var(--dvv-white);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.hp-feest:hover {
	border-color: color-mix(in srgb, var(--dvv-cyan) 55%, transparent);
	transform: translateY(-2px);
	color: var(--dvv-white);
}

.hp-feest__punt {
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 1px;
}

.hp-feest strong { font-family: var(--dvv-display); font-size: 1rem; display: block; }
.hp-feest span   { color: var(--dvv-muted); font-size: 0.8125rem; }

/* ============================================================= over ons == */

.hp-over {
	display: grid;
	gap: var(--dvv-ruimte-blok);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 56rem) { .hp-over { grid-template-columns: 0.8fr 1.2fr; } }

/*
 * HET BEELD IN DE OVER-ONS-SECTIE OP DE HOMEPAGE.
 *
 * Bewust anders dan hetzelfde beeld op de over-ons-pagina, waar het in een
 * boog staat met een zachte gloed. Twee pagina's die hetzelfde beeld op precies
 * dezelfde manier tonen laten de site kleiner lijken dan hij is.
 *
 * Hier staat de foto licht gekanteld in een lijst van vier tegels, met een
 * neonrand die er half achter vandaan komt. Het kantelen is minimaal: genoeg om
 * te zien dat het bewust is, te weinig om scheef te lijken.
 */
.hp-over__beeldwikkel {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	padding: 1.1rem;
}

/* De plaat die er schuin achter vandaan komt. Massief, geen schaduw: dit moet
   als een tweede vlak lezen en niet als diepte. */
.hp-over__beeldwikkel::before {
	content: "";
	position: absolute;
	z-index: -2;
	inset: 12% 6% 6% 12%;
	border-radius: var(--dvv-radius-lg);
	background: linear-gradient(135deg, var(--dvv-neon), var(--dvv-cyan));
	transform: rotate(-4deg);
	opacity: 0.9;
}

/* En daaronder de gloed, ruim en zwak, zodat het beeld licht lijkt af te geven. */
.hp-over__beeldwikkel::after {
	content: "";
	position: absolute;
	z-index: -3;
	inset: 4%;
	border-radius: 50%;
	background: radial-gradient(closest-side,
		color-mix(in srgb, var(--dvv-cyan) 55%, transparent),
		transparent 70%);
	filter: blur(46px);
}

.hp-over__foto {
	display: block;
	width: 100%;
	max-width: 21rem;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--dvv-radius-lg);
	border: 1px solid color-mix(in srgb, var(--dvv-white) 20%, transparent);
	box-shadow: 0 30px 55px -30px #000;
	transform: rotate(1.5deg);
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hp-over__foto:hover { transform: rotate(0deg) scale(1.015); }

@media (prefers-reduced-motion: reduce) {
	.hp-over__foto { transition: none; }
	.hp-over__foto:hover { transform: rotate(1.5deg); }
}

/* ================================================================= faq == */

.hp-faq { max-width: 46rem; margin-inline: auto; }

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

.hp-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 0;
	cursor: pointer;
	font-family: var(--dvv-display);
	font-weight: 700;
	font-size: 1.0625rem;
	list-style: none;
}

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

.hp-faq summary::after {
	content: "+";
	flex: none;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--dvv-neon-soft);
	transition: transform 0.2s ease;
}

.hp-faq details[open] summary::after { content: "−"; }

.hp-faq details p {
	margin: 0 0 1.15rem;
	color: var(--dvv-muted);
	line-height: 1.7;
}

/* ============================================================ slot-cta == */

.hp-slot {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(80% 120% at 50% 0%,
			color-mix(in srgb, var(--dvv-neon) 42%, transparent), transparent 70%),
		var(--dvv-night-deep);
	text-align: center;
}

.hp-slot h2 { font-size: clamp(1.9rem, 1.1rem + 3vw, 3rem); }

.hp-slot .hp-knoppen { justify-content: center; }

/* ========================================================== beweging == */

/*
 * Wie beweging liever niet ziet, krijgt een stilstaande maar nog steeds mooi
 * belichte vloer. Niet uitzetten en zwart laten: dan mist die bezoeker het
 * beeld waar de hele pagina om draait.
 */
@media (prefers-reduced-motion: reduce) {
	.hp-vloer__tegel { animation: none; opacity: 0.75; }
	.hp-knop, .hp-kaart, .hp-feest { transition: none; }
	.hp-knop:hover, .hp-kaart:hover, .hp-feest:hover { transform: none; }
}

/* De knop onder de FAQ-uitsnede, gecentreerd onder de vragen. */
.hp-faq__meer {
	display: flex;
	justify-content: center;
	margin-top: var(--dvv-ruimte-blok);
}

/* -------- wij tegenover de rest -------- */

/*
 * Twee vakken naast elkaar, waarvan er één duidelijk het onze is: neonrand,
 * lichte gloed, vinkjes in groen. Het andere vak blijft grijs en vlak. Dat
 * verschil in gewicht doet het werk, niet de tekst.
 */
.dvv-vergelijk {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 48rem) {
	.dvv-vergelijk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dvv-vergelijk__vak {
	padding: clamp(1.4rem, 1rem + 1.5vw, 2.1rem);
	border-radius: var(--dvv-radius-lg);
	border: 1px solid var(--dvv-rand);
	background: var(--dvv-panel);
}

.dvv-vergelijk__vak h3 {
	font-size: 1.15rem;
	margin-bottom: 1.1rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--dvv-rand);
}

.dvv-vergelijk__vak ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }

.dvv-vergelijk__vak li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	line-height: 1.55;
	font-size: 0.9375rem;
}

.dvv-vergelijk__vink,
.dvv-vergelijk__kruis { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; }

/* ---- ons vak ---- */

.dvv-vergelijk__vak--wij {
	border-color: color-mix(in srgb, var(--dvv-neon) 55%, transparent);
	background:
		radial-gradient(120% 90% at 0% 0%,
			color-mix(in srgb, var(--dvv-neon) 20%, transparent), transparent 65%),
		var(--dvv-panel);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--dvv-neon) 25%, transparent),
	            0 26px 50px -34px color-mix(in srgb, var(--dvv-neon) 80%, transparent);
}

.dvv-vergelijk__vak--wij li { color: var(--dvv-white); }
.dvv-vergelijk__vink { color: var(--dvv-lime); }

/* ---- het andere vak ---- */

.dvv-vergelijk__vak--anders { background: color-mix(in srgb, var(--dvv-night-deep) 70%, var(--dvv-panel)); }
.dvv-vergelijk__vak--anders h3 { color: var(--dvv-muted); }
.dvv-vergelijk__vak--anders li { color: var(--dvv-muted); }
.dvv-vergelijk__kruis { color: color-mix(in srgb, var(--dvv-magenta) 75%, transparent); }

/*
 * De regel onder de prijs. Groen vinkje, kleine tekst: dit is geen
 * verkoopargument dat schreeuwt, maar een geruststelling op het moment dat
 * iemand naar het bedrag kijkt en zich afvraagt wat er nog bij komt.
 */
.hp-kaart__noot {
	margin: 0.55rem 0 0;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--dvv-muted);
	opacity: 0.85;
}

/* De oude prijs staat boven het bedrag, kleiner en gedempt met een streep
   erdoor. Boven en niet ernaast: naast elkaar lezen twee bedragen als een
   bereik in plaats van als een verlaging. */
.hp-kaart__oud {
	display: block;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--dvv-muted);
	text-decoration: line-through;
	text-decoration-color: color-mix(in srgb, var(--dvv-magenta) 70%, transparent);
	text-decoration-thickness: 2px;
	margin-bottom: 0.1rem;
}

.hp-kaart__voordeel {
	display: inline-block;
	margin-top: 0.35rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--dvv-lime) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--dvv-lime) 40%, transparent);
	color: var(--dvv-lime);
	font-family: var(--dvv-body);
	font-size: 0.75rem;
	font-weight: 600;
}

/* De link naar alle maten, boven de kaarten. */
.hp-allematen { margin: 0 0 var(--dvv-ruimte-klein); }

.hp-allematen a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--dvv-cyan);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--dvv-cyan) 45%, transparent);
	padding-bottom: 0.1rem;
}

.hp-allematen a:hover { color: var(--dvv-white); border-bottom-color: var(--dvv-white); }
.hp-allematen span { transition: transform 0.18s ease; }
.hp-allematen a:hover span { transform: translateX(3px); }

/* Staat er geen foto ingesteld, dan draagt dezelfde klasse een tekstblok. Dat
   moet niet gekanteld en niet bijgesneden worden, alleen leesbaar zijn. */
.hp-over__foto:not(img) {
	display: grid;
	place-items: center;
	padding: 1.5rem;
	background: var(--dvv-panel);
	color: var(--dvv-muted);
	font-size: 0.8125rem;
	text-align: center;
	transform: none;
	aspect-ratio: 1;
}

/* Zonder foto draagt hetzelfde kader een uitlegtekst; dat heeft wel een
   minimale hoogte nodig, want er is geen beeld dat de hoogte bepaalt. */
.hp-galerij__item:not(:has(img)) {
	display: grid;
	place-items: center;
	min-height: 11rem;
	padding: 1.25rem;
	background:
		repeating-linear-gradient(45deg,
			color-mix(in srgb, var(--dvv-panel) 90%, #000) 0 12px,
			var(--dvv-panel) 12px 24px);
}

@media (prefers-reduced-motion: reduce) {
	.hp-galerij__item { transition: none; }
	.hp-galerij__item:hover { transform: none; }
}

/* --- Google-reviews ------------------------------------------------------ */

.hp-googlecijfer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 var(--dvv-ruimte-klein);
	font-size: 0.95rem;
	color: var(--dvv-muted);
}

.hp-googlecijfer__logo { display: inline-flex; }

.hp-googlecijfer strong {
	color: var(--dvv-white);
	font-size: 1.15rem;
	font-weight: 700;
}

.hp-googlecijfer .hp-sterren { font-size: 0.95rem; }

.hp-googlecijfer a {
	color: var(--dvv-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hp-googlecijfer a:hover { color: var(--dvv-white); }

/* De foto van de recensent hoort bij de verplichte bronvermelding. */
.hp-review__foto {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	object-fit: cover;
	margin-inline-end: 0.55rem;
	vertical-align: middle;
	border: 1px solid var(--dvv-rand);
}

.hp-googlebron {
	margin-block-start: var(--dvv-ruimte-klein);
	text-align: center;
	font-size: 0.8125rem;
	color: var(--dvv-muted);
}

.hp-googlebron a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hp-googlebron a:hover { color: var(--dvv-white); }

/* --- Trustindex-widget --------------------------------------------------- */

/*
 * De widget levert zijn eigen opmaak mee en gaat uit van een lichte pagina.
 * Hier alleen de ruimte eromheen en het inpassen in de donkere sectie; de
 * kaarten zelf laten we met rust, want die worden door de plugin ververst.
 */
.hp-trustindex {
	margin-inline: auto;
	max-width: 68rem;
}

.hp-trustindex .ti-widget {
	margin-block: 0 !important;
}

/* De "Powered by" mag blijven, maar hoeft niet te schreeuwen. */
.hp-trustindex .ti-footer,
.hp-trustindex .ti-widget-container .ti-footer {
	opacity: 0.55;
	font-size: 0.75rem;
}

.hp-trustindex .ti-footer:hover { opacity: 0.85; }

/* Wat er bij de vloer zit, onder de prijs op elke formaatkaart. */
.hp-kaart__lijst {
	display: grid;
	gap: 0.38rem;
	margin: 0.7rem 0 0;
	padding: 0.75rem 0 0;
	border-top: 1px solid var(--dvv-rand);
	list-style: none;
}

.hp-kaart__lijst li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--dvv-muted);
	text-align: left;
}

.hp-kaart__lijst svg {
	flex: none;
	width: 0.95rem;
	height: 0.95rem;
	margin-top: 0.15rem;
	color: var(--dvv-lime);
}