/*
 * Discovloer — hoofdstylesheet
 *
 * Alle kleuren, fontgroottes en spacing komen uit theme.json. WordPress zet die
 * automatisch om in --wp--preset--*-variabelen. Die zijn alleen wat lang, dus
 * hieronder krijgen ze een korte alias. Eén bron van waarheid blijft theme.json:
 * een kleur wijzig je daar, niet hier.
 */

:root {
	--dvv-night:      var(--wp--preset--color--night);
	--dvv-night-deep: var(--wp--preset--color--night-deep);
	--dvv-panel:      var(--wp--preset--color--panel);
	--dvv-neon:       var(--wp--preset--color--neon);
	--dvv-neon-soft:  var(--wp--preset--color--neon-soft);
	--dvv-magenta:    var(--wp--preset--color--magenta);
	--dvv-cyan:       var(--wp--preset--color--cyan);
	--dvv-lime:       var(--wp--preset--color--lime);
	--dvv-amber:      var(--wp--preset--color--amber);
	--dvv-white:      var(--wp--preset--color--white);
	--dvv-muted:      var(--wp--preset--color--muted);

	--dvv-display: var(--wp--preset--font-family--display);
	--dvv-body:    var(--wp--preset--font-family--body);
	--dvv-pixel:   var(--wp--preset--font-family--pixel);

	/* Knoppen en kaarten: kleine radius, in lijn met de vierkante tegels. */
	--dvv-radius:      6px;
	--dvv-radius-lg:   10px;
	--dvv-rand:        color-mix(in srgb, var(--dvv-white) 12%, transparent);
	--dvv-gloed-neon:  0 0 0 1px color-mix(in srgb, var(--dvv-neon) 55%, transparent),
	                   0 6px 24px -6px color-mix(in srgb, var(--dvv-neon) 65%, transparent);

	--dvv-inhoud: 720px;
	--dvv-breed:  1200px;

	/*
	 * DE RUIMTEMAAT — vier waarden, meer niet.
	 *
	 * Een pagina ziet er strak uit als de afstanden zich herhalen. Zodra elke
	 * sectie zijn eigen marges kiest, ziet het oog geen ritme meer en leest het
	 * geheel als los zand — ook al klopt elke sectie op zichzelf. Vandaar vier
	 * waarden voor de hele site: tussen secties, binnen een sectie, onder een
	 * kop, en tussen kaarten. Wie een vijfde nodig denkt te hebben, heeft
	 * meestal een structuurprobleem en geen ruimteprobleem.
	 */
	--dvv-ruimte-sectie: clamp(4rem, 2rem + 7vw, 7.5rem);
	--dvv-ruimte-blok:   clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
	--dvv-ruimte-kop:    clamp(1.75rem, 1rem + 2vw, 2.75rem);
	--dvv-ruimte-klein:  1rem;

	/*
	 * Hoogte van de plakkende header. Nodig voor alles wat zelf ook plakt of
	 * waar naartoe gesprongen wordt: zonder deze marge schuift de header over
	 * de kop die je net had aangeklikt.
	 */
	--dvv-kophoogte: 76px;

	/*
	 * DE ACHT KLEUREN VAN DE VLOER.
	 *
	 * Deze staan bewust niét in theme.json en verwijzen bewust niet naar de
	 * merkkleuren. Het merkpalet is gemaakt om leesbaar te zijn op een donkere
	 * pagina en is daarom wat zachter; de vloer op het logo is dat niet, die is
	 * volledig verzadigd. Met --dvv-magenta en --dvv-lime erin werd de vloer
	 * pastel, en dan lijkt hij op een mozaïek in plaats van op een scherm.
	 *
	 * Het zijn dus geen designtokens maar productkleuren: dit is wat de panelen
	 * dóen. Ze mogen alleen voorkomen in dingen die de vloer voorstellen — het
	 * grote raster, de minivloertjes op de kaarten, de scheidingsstrip. Nooit
	 * als opmaakkleur, precies zoals de briefing het bedoelt met "het
	 * regenboogpalet is de inhoud van de vloer, niet de decoratie van de
	 * pagina".
	 *
	 * Ze staan hier in :root en niet meer op .dvv-vloer, omdat inmiddels drie
	 * componenten ze nodig hebben en een tweede kopie gegarandeerd uit de pas
	 * gaat lopen met de eerste.
	 */
	--dvv-t1: #FF2E9A; /* magenta */
	--dvv-t2: #FF5A1F; /* oranjerood */
	--dvv-t3: #FFB01F; /* amber */
	--dvv-t4: #22E06B; /* groen */
	--dvv-t5: #12D4F0; /* cyaan */
	--dvv-t6: #2E6BFF; /* blauw */
	--dvv-t7: #A93CFF; /* paars */
	--dvv-t8: #FF1F5A; /* rood */
}

/* ---------------------------------------------------------------- basis -- */

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

/*
 * De clip staat op html én op body. Alleen op body werkt niet: overflow op
 * body wordt naar het venster doorgegeven, en clip doet in die doorgifte niet
 * mee — de pagina bleef gewoon 78 pixels opzij schuiven. Op html hakt hij wel.
 */
html {
	-webkit-text-size-adjust: 100%;
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--dvv-night);
	color: var(--dvv-white);
	font-family: var(--dvv-body);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

	/*
	 * De gloed van de vloer steekt met opzet buiten zijn eigen kader — zo
	 * gedraagt licht zich, en zonder die overloop plakt de lichtplas tegen een
	 * onzichtbare rand. Maar de browser telt die overloop mee voor de
	 * paginabreedte: de homepage kon 78 pixels opzij schuiven terwijl geen
	 * enkel élement te breed was, want het zat allemaal in een ::before.
	 *
	 * clip en niet hidden. Hidden maakt van body een scrollcontainer en breekt
	 * daarmee position: sticky verderop; clip snijdt alleen af.
	 */
	overflow-x: clip;
}

/*
 * Space Grotesk voor de koppen.
 *
 * Gekozen omdat de vorm past bij wat we verkopen: rechte stammen, vierkante
 * punten en een paar eigenzinnige letters (de a, de g) die het net geen
 * standaard-grotesk maken. Het heeft de technische inslag van een LED-display
 * zonder de goedkope science-fictionsfeer van de gebruikelijke "techno"-fonts,
 * en het blijft leesbaar op een donkere achtergrond — waar dunne schreven en
 * hoog contrast juist gaan trillen.
 *
 * Geen font-stretch: Space Grotesk heeft geen breedte-as. De breedte zit al in
 * het ontwerp.
 */
h1, h2, h3, h4 {
	font-family: var(--dvv-display);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 { font-size: var(--wp--preset--font-size--3xl); }
h2 { font-size: var(--wp--preset--font-size--2xl); }
h3 { font-size: var(--wp--preset--font-size--xl); font-weight: 700; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--dvv-cyan); text-underline-offset: 0.18em; }
a:hover { color: var(--dvv-neon-soft); }

img, video, svg { max-width: 100%; height: auto; }

/* Toetsenbordnavigatie moet altijd zichtbaar zijn. */
:focus-visible {
	outline: 3px solid var(--dvv-cyan);
	outline-offset: 3px;
	border-radius: 2px;
}

.dvv-alleen-schermlezer {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Skiplink: verschijnt pas bij tabben. */
.dvv-skip {
	position: absolute;
	top: -100px; left: 8px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--dvv-neon);
	color: var(--dvv-white);
	border-radius: var(--dvv-radius);
	text-decoration: none;
}
.dvv-skip:focus { top: 8px; }

/* --------------------------------------------------------------- layout -- */

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

/* ===================================================================== *
 *  SECTIES: EIGEN KLEUR, ZICHTBARE SCHEIDING
 *
 *  Eerste poging was een haarlijn van één pixel plus een minimaal verschil
 *  in donkerblauw. Op mijn scherm zag ik dat; op een telefoon bij daglicht
 *  zie je het niet, en dan is er geen scheiding — alleen de bewéring dat er
 *  een scheiding is. Terecht afgekeurd.
 *
 *  Wat er nu staat, van boven naar beneden per sectie:
 *
 *  1. EEN RIJ LED-TEGELS OP DE NAAD. Zes pixels hoog, over de volle breedte,
 *     in de kleur van die sectie, met een gloed eronder. Geen streepje maar
 *     een lichtbalk: het is letterlijk de rand van een dansvloer. Dit is het
 *     tegelmotief uit de briefing, ingezet waar het werk doet.
 *
 *  2. EEN EIGEN KLEUR. Elke sectie heeft zijn eigen --dvv-accent, en die
 *     kleur komt terug op precies drie plekken: de tegelrand, het nummer in
 *     de kop en de lijn naast dat nummer. De kleuren zijn niet verzonnen —
 *     het zijn de acht kleuren van de vloer zelf, in de volgorde waarin ze
 *     over de tegels rollen. De pagina loopt dus door het kleurverloop van
 *     het product. Dat heeft geen enkele concurrent, en het is het enige
 *     soort "uniek" dat niet na een half jaar gedateerd oogt.
 *
 *  3. EEN ZWEEM VAN DIE KLEUR IN DE ACHTERGROND. Vijf procent, meer niet.
 *     Genoeg om twee secties naast elkaar uit elkaar te houden, weinig
 *     genoeg om de tekst leesbaar te laten en de vloer het felste ding op
 *     het scherm te laten blijven.
 *
 *  Waarom géén volvlakken in kleur, hoe hard daar ook om gevraagd wordt:
 *  een oranje of groen vlak van een half scherm hoog wint het optisch van de
 *  LED-vloer, en dan verkoopt de pagina zichzelf in plaats van het product.
 *  Bovendien haalt witte tekst op verzadigd oranje de AA-contrastnorm niet.
 *  De kleur zit dus in de rand, het cijfer en de zweem — daar is hij
 *  onmiskenbaar én blijft alles leesbaar.
 *
 *  Het licht-donker om en om blijft eronder liggen, zodat de scheiding ook
 *  klopt als iemand later de kleuren omzet. nth-of-type telt alleen wat er
 *  écht staat, dus secties die zichzelf verbergen laten geen gat vallen.
 * ===================================================================== */

main { counter-reset: dvv-sectie; }

.dvv-sectie {
	--dvv-accent: var(--dvv-neon);

	position: relative;
	padding-block: var(--dvv-ruimte-sectie);
	counter-increment: dvv-sectie;
	background:
		linear-gradient(
			color-mix(in srgb, var(--dvv-accent) 5%, transparent),
			transparent 40%
		),
		var(--dvv-night);
}

.dvv-sectie:nth-of-type(even) {
	background:
		linear-gradient(
			color-mix(in srgb, var(--dvv-accent) 6%, transparent),
			transparent 40%
		),
		var(--dvv-night-deep);
}

/*
 * De tegelrand. Blokjes van 20 px met 6 px zwart ertussen — dezelfde
 * verhouding als de voeg tussen twee echte panelen van 60 cm. Hij loopt van
 * rand tot rand: een scheiding die aan de zijkant ophoudt, scheidt niet.
 */
.dvv-sectie::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: repeating-linear-gradient(
		90deg,
		var(--dvv-accent) 0 20px,
		transparent 20px 26px
	);
	box-shadow: 0 6px 22px -6px color-mix(in srgb, var(--dvv-accent) 75%, transparent);
	pointer-events: none;
	z-index: 2;
}

/*
 * DE KLEUREN VAN DE VLOER, IN DE VOLGORDE VAN DE PAGINA.
 *
 * Per sectie vastgelegd en niet via nth-of-type. Een sectie hoort altijd
 * dezelfde kleur te hebben, ook als de sectie erboven zichzelf verbergt
 * omdat er nog geen foto's zijn — anders verschiet de halve pagina zodra je
 * één veld invult.
 */
.dvv-uitleg      { --dvv-accent: var(--dvv-t1); }  /* roze   */
.dvv-maatkiezer  { --dvv-accent: var(--dvv-t5); }  /* cyaan  */
.dvv-stappen     { --dvv-accent: var(--dvv-t4); }  /* groen  */
.dvv-reviews     { --dvv-accent: var(--dvv-t3); }  /* amber  */
.dvv-galerij { --dvv-accent: var(--dvv-t7); }  /* paars  */

/*
 * De FAQ krijgt blauw en niet paars, ook al zou paars daar in de reeks volgen.
 * De FAQ grenst altijd aan het slot, en het slot is neonpaars. Twee bijna
 * gelijke paarse randen onder elkaar lezen als één sectie — en dat is precies
 * de scheiding die hier het hardst nodig is, want daar valt de beslissing.
 */
.dvv-faq         { --dvv-accent: var(--dvv-t6); }  /* blauw  */
.dvv-slot        { --dvv-accent: var(--dvv-neon); }

/* Ook de secties die nu uit de volgorde staan, voor als ze terugkomen. */
.dvv-inclusief   { --dvv-accent: var(--dvv-t4); }
.dvv-feesten     { --dvv-accent: var(--dvv-t2); }
.dvv-specs       { --dvv-accent: var(--dvv-t5); }
.dvv-pakketten   { --dvv-accent: var(--dvv-t3); }
.dvv-prijsgrid   { --dvv-accent: var(--dvv-t3); }

.dvv-sectie--smal > * { max-width: var(--dvv-inhoud); }

/* ------------------------------------------------------------ typografie -- */

/* Het pixelfont blijft klein en spaarzaam: labels, badges, cijfers. Groter
   gebruiken maakt de tekst onleesbaar en de site goedkoop. */
.dvv-pixel {
	font-family: var(--dvv-pixel);
	font-size: clamp(0.625rem, 0.5rem + 0.4vw, 0.8125rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
}

.dvv-eyebrow {
	font-family: var(--dvv-pixel);
	font-size: clamp(0.625rem, 0.5rem + 0.4vw, 0.75rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dvv-neon-soft);
	display: block;
	margin-bottom: 0.75rem;
}

.dvv-lead { font-size: var(--wp--preset--font-size--lg); color: var(--dvv-muted); }

.dvv-gedempt { color: var(--dvv-muted); }


/*
 * Tekst die alleen voor schermlezers bedoeld is.
 *
 * Deze klasse werd op vier plekken gebruikt zonder dat hij ooit gedefinieerd
 * was, waardoor er letterlijk "Menu sluiten" naast het kruisje stond. WordPress
 * levert deze regel zelf mee in sommige thema's, maar niet in een eigen thema
 * zoals dit.
 *
 * Niet display:none of visibility:hidden: dan slaat een schermlezer de tekst
 * ook over, en dan is een knop met alleen een kruisje een knop zonder naam.
 * Dit haalt hem uit beeld terwijl hij voorleesbaar blijft.
 */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Behalve als je er met het toetsenbord naartoe springt: dan hoort hij zichtbaar
   te zijn, anders weet niemand waar de focus staat. */
.screen-reader-text:focus {
	position: fixed !important;
	top: 1rem;
	inset-inline-start: 1rem;
	z-index: 200;
	width: auto;
	height: auto;
	padding: 0.75rem 1.1rem;
	clip-path: none;
	background: var(--dvv-panel);
	border: 1px solid var(--dvv-neon);
	border-radius: var(--dvv-radius);
	color: var(--dvv-white);
}

/* --------------------------------------------------------------- knoppen -- */

/*
 * De knoppen.
 *
 * Twee vormen die je niet met elkaar kunt verwarren, ook niet in je ooghoek:
 * de primaire is een massief neonblok met een lichtveeg die er bij hover
 * overheen loopt, de secundaire is een glasplaat met een neonrand die zich
 * vult. Verschil in kleur alleen is niet genoeg — dat mist iedereen die
 * kleurenblind is, en dat is één op de twaalf mannen.
 */

.dvv-knop {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.95rem 1.65rem;
	border: 1px solid transparent;
	border-radius: var(--dvv-radius);
	font-family: var(--dvv-body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.18s ease, box-shadow 0.22s ease,
	            border-color 0.18s ease, background-color 0.18s ease;
}

.dvv-knop:active { transform: translateY(1px) scale(0.995); }

/* Het pijltje schuift mee. Puur CSS, en het staat in een eigen span zodat de
   schermlezer er niets van merkt. */
.dvv-knop__pijl {
	display: inline-block;
	transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.dvv-knop:hover .dvv-knop__pijl { transform: translateX(4px); }

/* ---- primair: massief neon met lichtveeg ---- */

.dvv-knop--primair {
	background: linear-gradient(
		135deg,
		var(--dvv-neon) 0%,
		color-mix(in srgb, var(--dvv-neon) 70%, var(--dvv-magenta)) 100%
	);
	color: var(--dvv-white);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--dvv-neon-soft) 60%, transparent),
		0 10px 30px -10px color-mix(in srgb, var(--dvv-neon) 90%, transparent),
		inset 0 1px 0 color-mix(in srgb, white 28%, transparent);
}

/*
 * De veeg. Staat standaard links buiten beeld en loopt bij hover door de knop.
 * Geen animation-loop: een knop die uit zichzelf blijft glimmen is een knop die
 * je na tien seconden wegkijkt.
 */
.dvv-knop--primair::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		transparent 20%,
		color-mix(in srgb, white 38%, transparent) 50%,
		transparent 80%
	);
	transform: translateX(-110%);
	transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.dvv-knop--primair:hover {
	color: var(--dvv-white);
	transform: translateY(-2px);
	box-shadow:
		0 0 0 1px var(--dvv-neon-soft),
		0 16px 40px -12px var(--dvv-neon),
		inset 0 1px 0 color-mix(in srgb, white 40%, transparent);
}
.dvv-knop--primair:hover::before { transform: translateX(110%); }

/* ---- secundair: glasplaat met neonrand die zich vult ---- */

.dvv-knop--secundair {
	background: color-mix(in srgb, var(--dvv-white) 6%, transparent);
	color: var(--dvv-white);
	border-color: color-mix(in srgb, var(--dvv-white) 22%, transparent);
	backdrop-filter: blur(6px);
}
.dvv-knop--secundair::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--dvv-cyan) 22%, transparent),
		color-mix(in srgb, var(--dvv-neon) 22%, transparent)
	);
	opacity: 0;
	transition: opacity 0.22s ease;
}
.dvv-knop--secundair:hover {
	color: var(--dvv-white);
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--dvv-cyan) 70%, transparent);
	box-shadow: 0 10px 30px -14px var(--dvv-cyan);
}
.dvv-knop--secundair:hover::before { opacity: 1; }

/* ---- maten ---- */

.dvv-knop--groot {
	padding: 1.1rem 2rem;
	font-size: var(--wp--preset--font-size--lg);
}
.dvv-knop--breed { width: 100%; }

/* Wie beweging liever niet ziet, krijgt de kleurwissel wel en de verschuiving
   niet. De knop blijft daarmee net zo duidelijk. */
@media (prefers-reduced-motion: reduce) {
	.dvv-knop:hover { transform: none; }
	.dvv-knop--primair::before { display: none; }
	.dvv-knop:hover .dvv-knop__pijl { transform: none; }
}

/* --------------------------------------------------------------- kaarten -- */

.dvv-kaart {
	position: relative;
	background: var(--dvv-panel);
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius-lg);
	padding: var(--wp--preset--spacing--30);
	overflow: hidden;
}

/* Het tegelmotief keert subtiel terug als hover-effect op kaarten. */
.dvv-kaart--tegel::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(color-mix(in srgb, var(--dvv-white) 5%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--dvv-white) 5%, transparent) 1px, transparent 1px);
	background-size: 28px 28px;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
.dvv-kaart--tegel:hover::before { opacity: 1; }

.dvv-raster {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* ---------------------------------------------------- formuliervelden ---- */

.dvv-veld {
	display: block;
	width: 100%;
	padding: 0.8rem 1rem;
	background: var(--dvv-night-deep);
	color: var(--dvv-white);
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius);
	font-family: var(--dvv-body);
	font-size: var(--wp--preset--font-size--base);
}
.dvv-veld::placeholder { color: color-mix(in srgb, var(--dvv-muted) 70%, transparent); }
.dvv-veld:focus {
	border-color: var(--dvv-neon);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dvv-neon) 25%, transparent);
	outline: none;
}

.dvv-label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--dvv-white);
}

/* ------------------------------------------------------- de LED-tegels --- */

/*
 * Het handelsmerk van de site.
 *
 * Wat hier eerst stond was technisch een vloer — een raster van gekleurde
 * rechthoekjes in perspectief — maar het gedroeg zich niet als licht. Op het
 * scherm las het als mozaïek. Juist het ene element dat ons van elke
 * concurrent onderscheidt, zei dus niets.
 *
 * Deze versie is nagetekend naar twee bronnen die allebei van de klant komen:
 *
 *   - het logo. Daarin heeft élke tegel een fijn ledraster met zwarte voegen
 *     ertussen, staan er sterretjes op een paar tegels, en loopt er een paarse
 *     neonrand om de hele vloer. Dat is het merk; dat hoort de site te zijn.
 *   - de foto van de echte panelen. Die zijn fel, verzadigd, en geven hun
 *     kleur af aan de ruimte eromheen.
 *
 * Vier dingen doen het werk:
 *   1. het ledraster in de tegel. Zonder de zwarte matrix tussen de dioden is
 *      het een gekleurd vlak; mét die matrix is het een scherm.
 *   2. de gloed valt búiten de tegel, dus het licht komt van de vloer af.
 *   3. de kleurband en de lichtgolf lopen in fase, waardoor er een regenboog
 *      overheen rolt zoals bij een echt paneel dat een chase draait.
 *   4. de neonrand en de sterretjes uit het logo.
 *
 * Alles wat beweegt is opacity, en niets anders. Dat is de enige eigenschap
 * die de browser op de GPU kan afhandelen; background of box-shadow animeren
 * betekent bij tweehonderd tegels tweehonderd hertekeningen per frame.
 *
 * --dvv-kolommen en --dvv-rijen worden door de maatkiezer gezet, zodat de
 * vloer meegroeit met het gekozen formaat.
 */

/*
 * De houder staat rechtop terwijl de vloer gekanteld is. Daar hoort de
 * lichtplas: dat is het licht dát de vloer de zaal in stuurt, en dat ligt niet
 * plat op de grond. Drie radiale verlopen kosten niets. Hetzelfde effect met
 * filter: blur over het hele raster zou elk frame opnieuw geblurd worden.
 */
.dvv-vloerhouder {
	position: relative;
	display: flex;
	width: 100%;
	justify-content: center;
	isolation: isolate;
}

/*
 * De lichtplas stond op 32% neonpaars en dat was te veel: op de maatkiezer werd
 * een half scherm paars, en dan is paars geen merkkleur meer maar behang. De
 * merkkleur moet blijven waar hij iets bétekent — de primaire knop en het logo.
 *
 * Terug naar 16%, en de drie kleuren nu even zwaar. Een vloer die alle kleuren
 * kan tonen hoort geen paarse schaduw te werpen.
 */
.dvv-vloerhouder::before {
	content: "";
	position: absolute;
	inset: -22% -14% -30%;
	z-index: -1;
	background:
		radial-gradient(56% 44% at 50% 60%, color-mix(in srgb, var(--dvv-neon) 16%, transparent) 0%, transparent 72%),
		radial-gradient(40% 30% at 28% 70%, color-mix(in srgb, var(--dvv-cyan) 16%, transparent) 0%, transparent 72%),
		radial-gradient(40% 30% at 72% 70%, color-mix(in srgb, var(--dvv-magenta) 14%, transparent) 0%, transparent 72%);
	pointer-events: none;
}

.dvv-vloer {
	--dvv-kolommen: 6;
	--dvv-rijen: 4;

	/*
	 * Tegelgrootte met een bovengrens én een rem aan de breedte.
	 *
	 * De grootste vloer is 12 tegels breed. Op een vaste 46 px werd die 566 px
	 * plus het stuk dat het perspectief er vooraan bij optelt, en dat paste op
	 * geen enkele telefoon. Door de tegel ook aan de vensterbreedte te hangen
	 * krimpt de vloer vanzelf mee met het aantal kolommen: hij blijft altijd
	 * heel, en op een ruim scherm haalt hij gewoon de 46 px.
	 */
	--dvv-tegel: min(46px, calc(52vw / var(--dvv-kolommen)));

	/*
	 * Leds per tegelrand. Een paneel van 60 cm heeft er in het echt veel meer,
	 * maar onder de tien pixels per led slibt het raster dicht en zie je alleen
	 * nog moiré. De ondergrens van 4 px houdt dat ook op mobiel weg.
	 */
	--dvv-led: max(5px, calc(var(--dvv-tegel) / 8));

	--dvv-voeg: 2px;
	--dvv-kanteling: 58deg;

	display: grid;
	grid-template-columns: repeat(var(--dvv-kolommen), var(--dvv-tegel));
	grid-template-rows: repeat(var(--dvv-rijen), var(--dvv-tegel));
	gap: var(--dvv-voeg);
	padding: 5px;
	justify-content: center;
	margin-inline: auto;

	/*
	 * De neonrand uit het logo. Hij kantelt mee met de vloer en tekent daardoor
	 * vanzelf hetzelfde trapezium als in de tekening — geen los randje eromheen
	 * maar de omtrek van de vloer zelf.
	 */
	border: 2px solid color-mix(in srgb, var(--dvv-neon) 82%, transparent);
	border-radius: 4px;
	background: #04050d;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--dvv-neon-soft) 28%, transparent),
		0 0 26px -2px color-mix(in srgb, var(--dvv-neon) 55%, transparent),
		inset 0 0 34px color-mix(in srgb, var(--dvv-neon) 16%, transparent);

	/*
	 * Dieper gekanteld dan eerst en met het vluchtpunt lager, zodat de verre
	 * rand echt smaller wordt. Op 52° met het draaipunt in het midden bleef de
	 * vloer een parallellogram; het logo laat een duidelijk trapezium zien.
	 */
	/*
	 * De kijkafstand schaalt mee met de vloer. Op een vaste 760 px kreeg een
	 * vloer van vier rijen nauwelijks diepte en eentje van twaalf rijen zo veel
	 * dat de voorrand anderhalf keer zo breed werd als de doos eromheen — en
	 * dan snijdt de paneelrand er dwars doorheen. Zo staat de kijker altijd op
	 * dezelfde afstand ten opzichte van de vloer, en is de vervorming
	 * voorspelbaar.
	 *
	 * De translateY haalt de vloer terug naar het midden. Het perspectief
	 * vergroot de voorrand meer dan het de achterrand verkleint, waardoor het
	 * beeld als geheel omlaag schuift; zonder deze correctie raakte hij de
	 * onderrand van het paneel terwijl er bovenin ruimte over was.
	 */
	transform: perspective(calc(var(--dvv-vloerhoogte) * 2.4)) translateY(-6%) rotateX(var(--dvv-kanteling));
	/*
	 * Draaipunt in het midden, niet lager. Lager gaf een fraaier trapezium maar
	 * zette de vloer buiten het midden van zijn eigen doos, en dan klopt de
	 * hoogtecorrectie hieronder niet meer: hij zakte door de onderrand heen.
	 * De versmalling naar achteren komt van perspective(), niet van het
	 * draaipunt, dus daar verandert niets aan.
	 */
	transform-origin: 50% 50%;
	transition: grid-template-columns 0.4s ease, grid-template-rows 0.4s ease;

	/*
	 * Een gekantelde vloer neemt in de opmaak nog steeds de hoogte in die hij
	 * vóór het kantelen had — transform verplaatst pixels, geen ruimte. Bij een
	 * vloer van tien rijen zat er daardoor vierhonderd pixel lucht boven het
	 * beeld, en dat zag eruit als een fout.
	 *
	 * De negatieve marge haalt precies het verschil weg: van een vlak dat onder
	 * hoek X ligt zie je nog cos(X) van de hoogte. Omdat de hoek in een
	 * variabele staat klopt dit ook waar hij overschreven wordt.
	 *
	 * Browsers zonder cos() in calc() negeren de hele regel en krijgen de oude
	 * situatie: te veel lucht, maar niets kapot.
	 */
	--dvv-vloerhoogte: calc(
		var(--dvv-rijen) * var(--dvv-tegel) + (var(--dvv-rijen) - 1) * var(--dvv-voeg) + 14px
	);
	margin-block: calc((cos(var(--dvv-kanteling)) * 1.12 - 1) * var(--dvv-vloerhoogte) / 2);
}

/*
 * Een paneel dat uit staat is niet zwart: je ziet de dioden nog als een dof
 * raster. Dat detail is klein maar het is het verschil tussen een uitgezet
 * scherm en een gat in de vloer.
 */
.dvv-tegel {
	position: relative;
	border-radius: 1px;
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px var(--dvv-led)),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px var(--dvv-led)),
		#0A0C1C;
}

/*
 * De kleurlaag. Dit is het enige wat beweegt, en alleen in opacity.
 *
 * De zwarte lijnen liggen bovenóp de kleur, niet eronder: bij een echt paneel
 * kijk je door de matrix heen naar de dioden. Het lichte verloop erachter
 * maakt de bovenkant van de tegel feller dan de onderkant, wat de indruk geeft
 * dat je onder een hoek naar een lichtbak kijkt in plaats van naar een vlak.
 */
.dvv-tegel::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0 1px, transparent 1px var(--dvv-led)),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0 1px, transparent 1px var(--dvv-led)),
		radial-gradient(
			130% 110% at 50% 18%,
			color-mix(in srgb, var(--dvv-kleur, var(--dvv-neon)) 90%, white) 0%,
			var(--dvv-kleur, var(--dvv-neon)) 46%,
			color-mix(in srgb, var(--dvv-kleur, var(--dvv-neon)) 84%, black) 100%
		);
	box-shadow:
		0 0 12px -1px var(--dvv-kleur, var(--dvv-neon)),
		0 0 34px -6px var(--dvv-kleur, var(--dvv-neon)),
		inset 0 0 0 1px color-mix(in srgb, white 14%, transparent);
	opacity: 0.62;
	animation: dvv-golf 4.4s ease-in-out infinite;
	animation-delay: var(--dvv-vertraging, 0s);
}

/*
 * De golf gaat van "aan" naar "feller", niet van "uit" naar "aan".
 *
 * De eerste versie zakte terug naar 0,16 en dan is op elk moment het grootste
 * deel van de vloer donker — je ziet een raster met een lichtstreep erin, geen
 * dansvloer. Op het logo branden álle tegels; de golf hoort daar bovenop te
 * komen, niet in de plaats van.
 */
@keyframes dvv-golf {
	0%, 100% { opacity: 0.5; }
	42%      { opacity: 1; }
	72%      { opacity: 0.72; }
}

/*
 * De sterretjes van het logo. In de tekening zitten er een stuk of tien op de
 * vloer, en ze zijn het detail waaraan je het logo herkent. Vier armen die
 * naar buiten uitdoven — het masker doet dat, zodat de armen geen zichtbaar
 * eindpunt hebben.
 */
.dvv-tegel--ster::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--dvv-tegel) * 1.15);
	height: calc(var(--dvv-tegel) * 1.15);
	transform: translate(-50%, -50%);
	z-index: 2;
	pointer-events: none;
	background:
		radial-gradient(closest-side, rgba(255, 255, 255, 0.95) 0 9%, transparent 42%),
		linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, 0.9) 50%, transparent 54%),
		linear-gradient(0deg, transparent 46%, rgba(255, 255, 255, 0.9) 50%, transparent 54%);
	-webkit-mask-image: radial-gradient(closest-side, #000 0 12%, transparent 88%);
	mask-image: radial-gradient(closest-side, #000 0 12%, transparent 88%);
	opacity: 0;
	animation: dvv-fonkel 5.6s ease-in-out infinite;
	animation-delay: var(--dvv-vertraging, 0s);
}

@keyframes dvv-fonkel {
	0%, 62%, 100% { opacity: 0; }
	72%           { opacity: 1; }
	86%           { opacity: 0.25; }
}

/*
 * Wie bewegende beelden liever niet ziet, krijgt een stilstaande vloer die
 * volop brandt. Dat is geen uitgeklede versie: alle tegels staan aan, de
 * sterretjes staan er, alleen de golf loopt niet.
 */
@media (prefers-reduced-motion: reduce) {
	.dvv-tegel::after {
		animation: none;
		opacity: 0.9;
	}

	.dvv-tegel--ster::before {
		animation: none;
		opacity: 0.85;
	}

	* { transition-duration: 0.01ms !important; }
}

/* Op smalle schermen kleinere tegels, anders loopt de vloer buiten beeld. */
@media (max-width: 640px) {
	.dvv-vloer { --dvv-tegel: min(30px, calc(66vw / var(--dvv-kolommen))); }
}

/* --------------------------------------------------- WhatsApp-knop ------- */

/*
 * Linksonder, niet rechtsonder.
 *
 * Rechtsonder is de drukste hoek van het web: daar zitten cookiebanners,
 * chatwidgets en op iOS de veegzone. Links staat hij alleen, en bij
 * rechtshandig telefoongebruik ligt hij nog altijd binnen duimbereik.
 *
 * WhatsApp-groen en niet neon-paars: die bel is een merk dat mensen in een
 * fractie van een seconde herkennen. Hem naar de huisstijl trekken kost meer
 * herkenning dan het aan samenhang oplevert.
 */
.dvv-whatsapp {
	position: fixed;
	/* Rechts, want linksonder staan de cookiebanner en het cookieknopje. */
	right: 18px;
	bottom: max(18px, env(safe-area-inset-bottom));
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.7rem 1.15rem 0.7rem 0.85rem;
	border-radius: 999px;
	background: #25D366;
	color: #04301A;
	font-family: var(--dvv-body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 8px 28px -8px rgb(0 0 0 / 0.65),
	            0 0 0 1px color-mix(in srgb, #25D366 60%, transparent);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dvv-whatsapp:hover,
.dvv-whatsapp:focus-visible {
	color: #04301A;
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.7),
	            0 0 0 2px color-mix(in srgb, #25D366 80%, transparent);
}
.dvv-whatsapp svg { width: 24px; height: 24px; fill: currentColor; flex: none; }

/*
 * Op de telefoon terug naar een ronde bel. Daar telt elke pixel leesbreedte,
 * en juist daar herkent iedereen het icoon al zonder bijschrift.
 */
@media (max-width: 640px) {
	.dvv-whatsapp {
		right: 14px;
		width: 54px;
		height: 54px;
		padding: 0;
		justify-content: center;
		border-radius: 50%;
	}
	.dvv-whatsapp__tekst {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}

/* ---------------------------------------------------------- topbalk --- */

/*
 * DE TOPBALK.
 *
 * Amber, want dat is de enige kleur uit het palet die niet met de knop
 * concurreert: de knop is paars-roze, de vloer is regenboog, en amber staat
 * daar los van. Donkere tekst op amber in plaats van wit — dat haalt een
 * contrastratio ruim boven de norm, terwijl wit op amber daar juist onder zakt.
 *
 * De balk plakt niet. Twee plakkende balken eten op een telefoon een derde van
 * het scherm, en een aanbieding hoeft maar één keer gelezen te worden.
 */
.dvv-topbalk {
	background: linear-gradient(90deg, var(--dvv-amber), #FFB01F 60%, var(--dvv-amber));
	color: var(--dvv-night-deep);
}

.dvv-topbalk__binnen {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.4rem;
	padding-block: 0.45rem;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	text-wrap: balance;
}

.dvv-topbalk__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: inherit;
	text-decoration: none;
}

.dvv-topbalk__link:hover { color: inherit; text-decoration: underline; }

.dvv-topbalk__pijl { transition: transform 0.18s ease; }
.dvv-topbalk__link:hover .dvv-topbalk__pijl { transform: translateX(3px); }

@media (max-width: 30rem) {
	.dvv-topbalk__binnen { font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
	.dvv-topbalk__pijl { transition: none; }
	.dvv-topbalk__link:hover .dvv-topbalk__pijl { transform: none; }
}

/* ---------------------------------------------------- header en footer --- */

/*
 * DE HEADER.
 *
 * Plakt bovenaan en wordt bij het scrollen compacter en donkerder. Die tweede
 * staat komt van een klasse die JavaScript zet op basis van de scrollpositie,
 * en niet van een tweede header die eroverheen fadet: twee headers laten
 * wisselen geeft altijd een sprong op het moment van wisselen.
 *
 * De hoogte staat in een custom property, zodat het mobiele paneel er precies
 * onder begint zonder dat er twee getallen zijn die uit de pas kunnen lopen.
 */
.dvv-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: color-mix(in srgb, var(--dvv-night) 82%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid transparent;
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.dvv-header.is-gescrold {
	background: color-mix(in srgb, var(--dvv-night-deep) 94%, transparent);
	border-bottom-color: var(--dvv-rand);
	box-shadow: 0 10px 30px -20px #000;
}

.dvv-header__binnen {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding-block: 0.85rem;
	transition: padding-block 0.25s ease;
	/*
	 * Zonder deze twee duwt de inhoud de balk breder dan het scherm en valt de
	 * hamburger buiten beeld. Een flexkind mag standaard niet kleiner worden
	 * dan zijn inhoud, en een logo van 175 pixels naast een knop van 160 past
	 * simpelweg niet op een telefoon van 360.
	 */
	min-width: 0;
	flex-wrap: nowrap;
	/* Logo links, knop en hamburger rechts, en de ruimte ertussen. */
	justify-content: space-between;
	width: 100%;
}

.dvv-header.is-gescrold .dvv-header__binnen { padding-block: 0.55rem; }

.dvv-logo {
	flex: 0 1 auto;
	min-width: 0;
}

.dvv-logo img { max-width: 100%; }

.dvv-logo img {
	display: block;
	height: 46px;
	width: auto;
	transition: height 0.25s ease;
}

.dvv-header.is-gescrold .dvv-logo img { height: 38px; }

.dvv-logo__tekst {
	font-family: var(--dvv-display);
	font-weight: 700;
	color: var(--dvv-white);
	text-decoration: none;
}

/* Het menu duwt zichzelf naar rechts, de acties komen erachteraan. */
.dvv-menu {
	margin-inline-start: auto;
	display: none;
}

.dvv-menu ul {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 0.3rem + 1vw, 1.6rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.dvv-menu a {
	position: relative;
	display: block;
	padding-block: 0.35rem;
	color: var(--dvv-muted);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9rem;
	white-space: nowrap;
	transition: color 0.18s ease;
}

/*
 * HET STREEPJE ONDER EEN MENU-ITEM.
 *
 * Groeit vanuit het midden open bij hover, met een korte neongloed eronder —
 * alsof er een ledstrip aangaat. Dat past bij wat we verkopen, en het geeft de
 * beweging een richting waardoor een rij links als losse knoppen leest in
 * plaats van als een blok tekst.
 *
 * Nadrukkelijk alleen bij hover en focus, niet in rust. Eerder stond dit
 * streepje permanent onder bijna elk item omdat WordPress alle ankerlinks als
 * huidige pagina markeerde; toen was de balk één en al accent. De huidige
 * pagina krijgt daarom kleur en geen streep.
 *
 * scaleX in plaats van de breedte animeren: breedte laat de browser bij elke
 * frame opnieuw rekenen aan de layout, een transform niet.
 */
.dvv-menu a::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--dvv-cyan), var(--dvv-neon));
	box-shadow: 0 0 10px color-mix(in srgb, var(--dvv-neon) 75%, transparent);
	opacity: 0;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease;
}

.dvv-menu a:hover,
.dvv-menu a:focus-visible { color: var(--dvv-white); }

.dvv-menu a:hover::after,
.dvv-menu a:focus-visible::after {
	opacity: 1;
	transform: scaleX(1);
}

.dvv-menu .current-menu-item > a { color: var(--dvv-white); }

/* Wie beweging liever niet ziet, krijgt het streepje wel — alleen zonder groei. */
@media (prefers-reduced-motion: reduce) {
	.dvv-menu a::after { transition: none; transform: scaleX(1); }
	.dvv-menu a:hover::after,
	.dvv-menu a:focus-visible::after { transform: scaleX(1); }
}

.dvv-header__acties {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	/* De hamburger krimpt nooit; de knop ernaast mag dat wel. */
	flex: 0 0 auto;
}

.dvv-menu + .dvv-header__acties { margin-inline-start: 0; }

/* ---- de knop in de header ---- */

.dvv-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.65rem 1.05rem;
	border-radius: var(--dvv-radius);
	background: linear-gradient(135deg, var(--dvv-neon), var(--dvv-magenta));
	color: #fff;
	font-family: var(--dvv-display);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--dvv-neon) 70%, transparent);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dvv-header__cta:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--dvv-magenta) 90%, transparent);
}

.dvv-header__cta--breed { width: 100%; padding-block: 0.95rem; font-size: 1rem; }

/* ---- hamburger ---- */

/*
 * Drie streepjes die bij openen een kruis worden: het middelste vervaagt, de
 * buitenste draaien naar elkaar toe. Een vierkante knop van 44 pixels, want
 * dat is de maat waarop een duim betrouwbaar raak tikt.
 */
.dvv-burger {
	flex: none;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: color-mix(in srgb, var(--dvv-white) 6%, transparent);
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius);
	color: var(--dvv-white);
	cursor: pointer;
}

.dvv-burger__streep {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.24s ease, opacity 0.18s ease;
}

/* Het middelste streepje verdwijnt, de andere twee vormen het kruis. Met 5px
   tussenruimte en 2px dikte liggen de buitenste 7px van het midden. */
.dvv-burger[aria-expanded="true"] .dvv-burger__streep:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dvv-burger[aria-expanded="true"] .dvv-burger__streep:nth-child(2) { opacity: 0; }
.dvv-burger[aria-expanded="true"] .dvv-burger__streep:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.dvv-burger__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- mobiel paneel ---- */

.dvv-sluier {
	position: fixed;
	inset: 0;
	z-index: 95;
	background: color-mix(in srgb, #000 62%, transparent);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.dvv-sluier.is-open { opacity: 1; }

.dvv-mobiel {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 100;
	width: min(88vw, 380px);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 1.1rem 1.4rem 1.6rem;
	background: var(--dvv-night-deep);
	border-inline-start: 1px solid var(--dvv-rand);
	box-shadow: -30px 0 60px -30px #000;
	transform: translateX(100%);
	transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.dvv-mobiel.is-open { transform: translateX(0); }

.dvv-mobiel__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--dvv-rand);
}

.dvv-mobiel__sluit {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--dvv-white) 6%, transparent);
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius);
	color: var(--dvv-white);
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

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

.dvv-mobiel__menu a {
	display: block;
	padding: 0.9rem 0.6rem;
	border-radius: var(--dvv-radius);
	color: var(--dvv-white);
	text-decoration: none;
	font-family: var(--dvv-display);
	font-weight: 700;
	font-size: 1.125rem;
}

.dvv-mobiel__menu a:hover,
.dvv-mobiel__menu .current-menu-item > a {
	background: color-mix(in srgb, var(--dvv-neon) 16%, transparent);
	color: var(--dvv-neon-soft);
}

/* De knop plakt onderaan het paneel: dat is waar je duim is. */
.dvv-mobiel__voet { margin-block-start: auto; }

/* ---- vanaf tablet: menu zichtbaar, hamburger weg ---- */

@media (min-width: 62rem) {
	/*
	 * Drie kolommen in plaats van een rij die zichzelf naar rechts duwt.
	 * De buitenste twee zijn even breed (1fr), dus de middelste kolom staat
	 * gecentreerd ten opzichte van de páginabreedte en niet ten opzichte van
	 * de ruimte die logo en knop toevallig overlaten. Dat verschil zie je
	 * meteen zodra er een menu-item bijkomt: bij de flex-variant schuift het
	 * menu dan mee, bij deze blijft het staan.
	 */
	.dvv-header__binnen {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.dvv-menu {
		display: block;
		justify-self: center;
		margin-inline-start: 0;
	}

	.dvv-header__acties,
	.dvv-menu + .dvv-header__acties {
		justify-self: end;
		margin-inline-start: 0;
	}

	.dvv-burger { display: none; }
	.dvv-sluier, .dvv-mobiel { display: none; }
}

/*
 * Op smalle schermen krimpt eerst het logo en de knop mee. Blijft er te weinig
 * over, dan verdwijnt de knop: die staat onderaan het uitschuifmenu ook, en
 * een hamburger die je niet kunt indrukken is erger dan een knop minder.
 */
@media (max-width: 62rem) {
	.dvv-logo img { height: 38px; }
	.dvv-header.is-gescrold .dvv-logo img { height: 32px; }

	.dvv-header__cta {
		padding: 0.6rem 0.9rem;
		font-size: 0.8125rem;
	}

	.dvv-header__binnen { gap: 0.6rem; }
}

/*
 * Onder 480 pixels blijft alles staan, maar dan wel een maat kleiner. De knop
 * is het belangrijkste element van de balk en verdwijnt dus niet; er wordt
 * ruimte gemaakt door het logo en de tussenruimte te verkleinen.
 */
@media (max-width: 30rem) {
	.dvv-logo img { height: 30px; }
	.dvv-header.is-gescrold .dvv-logo img { height: 27px; }

	.dvv-header__cta {
		padding: 0.55rem 0.75rem;
		font-size: 0.75rem;
	}

	.dvv-header__binnen { gap: 0.5rem; }
	.dvv-header .dvv-omhulsel { padding-inline: 0.85rem; }
	.dvv-burger { padding: 0.5rem 0.6rem; }
}

/* Zolang het paneel open is mag de pagina eronder niet meescrollen. */
html.dvv-menu-open, body.dvv-menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.dvv-header, .dvv-header__binnen, .dvv-logo img,
	.dvv-mobiel, .dvv-sluier, .dvv-burger__streep, .dvv-menu a::after { transition: none; }
}

/*
 * DE PAGINAVOET.
 *
 * Vier kolommen boven, een smalle balk onder. De merkkolom is breder dan de
 * rest: die draagt het logo en de zin waarmee iemand die hier voor het eerst
 * belandt alsnog begrijpt wat we doen.
 *
 * De kolommen vouwen op mobiel naar twee en daarna naar één. Bewust niet
 * meteen naar één: vier korte linklijstjes onder elkaar maken van de voet een
 * tweede pagina.
 */
.dvv-footer {
	background: var(--dvv-night-deep);
	border-top: 1px solid var(--dvv-rand);
	color: var(--dvv-muted);
	font-size: 0.9375rem;
}

.dvv-footer__binnen {
	display: grid;
	gap: clamp(1.75rem, 1rem + 3vw, 3rem);
	grid-template-columns: 1fr;
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}

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

@media (min-width: 64rem) {
	.dvv-footer__binnen { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
}

.dvv-footer__logo img { height: 44px; width: auto; }

.dvv-footer__naam {
	font-family: var(--dvv-display);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--dvv-white);
	margin: 0 0 0.6rem;
}

.dvv-footer__over {
	margin: 1rem 0 1.25rem;
	max-width: 34ch;
	line-height: 1.65;
}

.dvv-footer__wa {
	display: inline-flex;
	align-items: center;
	padding: 0.7rem 1.2rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--dvv-lime) 45%, transparent);
	background: color-mix(in srgb, var(--dvv-lime) 10%, transparent);
	color: var(--dvv-lime);
	font-family: var(--dvv-display);
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.dvv-footer__wa:hover {
	background: color-mix(in srgb, var(--dvv-lime) 20%, transparent);
	color: var(--dvv-lime);
}

.dvv-footer__kop {
	font-family: var(--dvv-pixel);
	font-size: 0.625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dvv-cyan);
	margin: 0 0 1rem;
}

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

.dvv-footer a {
	color: var(--dvv-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

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

.dvv-footer__contact li { line-height: 1.5; }

/* De regiolijst wordt lang; die mag in twee kolommen. */
.dvv-footer__regios { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- de balk onderaan ---- */

.dvv-footer__balk {
	border-top: 1px solid var(--dvv-rand);
	background: color-mix(in srgb, #000 30%, var(--dvv-night-deep));
}

.dvv-footer__balk-binnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 1.75rem;
	padding-block: 1.1rem;
	font-size: 0.8125rem;
}

/* Op smalle schermen alles links uitlijnen in plaats van uit elkaar trekken. */
@media (max-width: 48rem) {
	.dvv-footer__balk-binnen { justify-content: flex-start; }
}

.dvv-footer__rechten { margin: 0; }

/*
 * De juridische links horizontaal. De selector is bewust specifieker dan
 * .dvv-footer ul: die zet alle lijsten in de voet op grid met één kolom, en
 * won het hier van een losse klasse. Vandaar dat deze drie links onder elkaar
 * stonden.
 */
.dvv-footer .dvv-footer__juridisch {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
}

.dvv-footer__maker { margin: 0; }

.dvv-footer__maker a {
	color: var(--dvv-white);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--dvv-neon) 55%, transparent);
}

.dvv-footer__maker a:hover { color: var(--dvv-neon-soft); border-bottom-color: var(--dvv-neon-soft); }

.dvv-footer__hart { color: var(--dvv-magenta); }

@media (prefers-reduced-motion: reduce) {
	.dvv-footer a, .dvv-footer__wa { transition: none; }
}

/* ==========================================================================
   Homepage
   ==========================================================================
   Alles hieronder hoort bij de secties in template-parts/home/. De volgorde is
   dezelfde als op het scherm, zodat je hier van boven naar beneden meeleest met
   de pagina.
*/

/* ------------------------------------------------- gedeelde onderdelen --- */

/*
 * Het vinkje: een CSS-vorm en geen icoonfont of SVG-sprite. Twee lijnen die
 * samen een haakje vormen kosten nul extra bytes over de lijn.
 */
.dvv-vink {
	flex: none;
	position: relative;
	width: 1.35rem;
	height: 1.35rem;
	margin-top: 0.15rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--dvv-lime) 16%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dvv-lime) 45%, transparent);
}
.dvv-vink::after {
	content: "";
	position: absolute;
	left: 0.45rem;
	top: 0.28rem;
	width: 0.32rem;
	height: 0.6rem;
	border: solid var(--dvv-lime);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.dvv-vinklijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}
.dvv-vinklijst li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.dvv-tabel {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
}
.dvv-tabel th,
.dvv-tabel td {
	padding: 0.7rem 0.9rem;
	text-align: left;
	border-bottom: 1px solid var(--dvv-rand);
}
.dvv-tabel th {
	font-family: var(--dvv-pixel);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dvv-muted);
	font-weight: 400;
}
.dvv-tabel tr:last-child td { border-bottom: 0; }

/* Cijfers in tabellen onder elkaar uitlijnen, anders dansen de kolommen. */
.dvv-tabel td { font-variant-numeric: tabular-nums; }

.dvv-bedrag {
	font-family: var(--dvv-display);
	font-size: var(--wp--preset--font-size--2xl);
	line-height: 1;
	color: var(--dvv-white);
}

/*
 * Beheerdersnotitie: alleen zichtbaar voor ingelogde redacteuren. Amber, want
 * het is een aandachtspunt en geen fout — er ontbreken nog gegevens.
 */
.dvv-notitie {
	margin: 0;
	padding: 0.85rem 1.1rem;
	border-radius: var(--dvv-radius);
	border: 1px dashed color-mix(in srgb, var(--dvv-amber) 55%, transparent);
	background: color-mix(in srgb, var(--dvv-amber) 8%, transparent);
	color: var(--dvv-white);
	font-size: var(--wp--preset--font-size--sm);
}
.dvv-notitie strong { color: var(--dvv-amber); }

/* ------------------------------------------------------------------ hero -- */

.dvv-hero {
	position: relative;
	padding-block: clamp(2.5rem, 1rem + 7vw, 5.5rem);
	overflow: hidden;
}

/* Eén gloed achter de hero, niet op elke sectie: één neon-accent per scherm. */
.dvv-hero::before {
	content: "";
	position: absolute;
	inset: -30% -10% auto;
	height: 70vh;
	background: radial-gradient(
		ellipse at 70% 30%,
		color-mix(in srgb, var(--dvv-neon) 22%, transparent),
		transparent 62%
	);
	pointer-events: none;
}

.dvv-hero__binnen {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

.dvv-hero__tekst h1 { margin-bottom: 0.4em; }

.dvv-hero__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--30);
}

.dvv-hero__voet {
	margin-top: 1.25rem;
	color: var(--dvv-muted);
}

/* De vloer in de hero mag ruimte pakken; hij is het argument. */
.dvv-hero__vloer {
	display: grid;
	place-items: center;
	min-height: 260px;
}

@media (min-width: 900px) {
	.dvv-hero__binnen { grid-template-columns: 1.05fr 0.95fr; }
}

/* --------------------------------------------------------- vertrouwen ---- */

.dvv-vertrouwen {
	border-block: 1px solid var(--dvv-rand);
	background: var(--dvv-night-deep);
	padding-block: var(--wp--preset--spacing--40);
}

.dvv-vertrouwen__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.dvv-vertrouwen__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}
.dvv-vertrouwen__item strong { display: block; }
.dvv-vertrouwen__item .dvv-gedempt { display: block; }

/* --------------------------------------------------------- maatkiezer ---- */

/*
 * De vloer boven, de drie kaarten eronder — niet naast elkaar.
 *
 * Naast elkaar kreeg de vloer een halve kolom en de kaarten een smalle strook,
 * en dan is de vloer te klein om indruk te maken en de kaart te smal om te
 * vergelijken. Boven elkaar krijgt de vloer de volle breedte (dat is het
 * handelsmerk) en staan de drie kaarten op gelijke voet naast elkaar, wat het
 * enige is waar je ze voor nodig hebt.
 */
.dvv-maatkiezer__binnen {
	display: grid;
	gap: var(--dvv-ruimte-blok);
	margin-top: var(--dvv-ruimte-kop);
}

/*
 * De vloerhouder heeft een vaste hoogte. Zonder dat springt de hele pagina bij
 * elke formaatwissel, en dat kost precies de CLS die we onder 0,05 willen
 * houden.
 */
.dvv-maatkiezer__vloerhouder {
	display: grid;
	place-items: center;
	min-height: 320px;
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--dvv-radius-lg);
	/* De gloed volgt de kleur van de sectie in plaats van altijd paars te zijn.
	   Hier was het paarse vlak het grootst, en juist hier hoort de vloer zelf
	   het felste ding op het scherm te zijn. */
	background:
		radial-gradient(ellipse at 50% 65%,
			color-mix(in srgb, var(--dvv-accent) 9%, transparent), transparent 65%),
		var(--dvv-night-deep);
	border: 1px solid color-mix(in srgb, var(--dvv-accent) 22%, transparent);
	overflow: hidden;
}

.dvv-maatkiezer__dansers {
	margin: 1rem 0 0;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.5rem;
}
.dvv-maatkiezer__dansers strong {
	font-family: var(--dvv-display);
	font-size: var(--wp--preset--font-size--xl);
	color: var(--dvv-cyan);
	font-variant-numeric: tabular-nums;
}

/*
 * DRIE KAARTEN, DIE TEGELIJK DE KEUZEKNOP ZIJN.
 *
 * Hier stonden acht smalle knopjes, en verderop op de pagina stonden diezelfde
 * acht maten nog eens als prijskaarten. Nu is de kaart de knop: één rij van
 * drie, allemaal even breed, zodat het oog ze verticaal kan aflopen en de
 * bedragen onder elkaar staan. Vergelijken is de enige taak van dit blok en
 * uitlijning is het enige wat daarbij helpt.
 */
.dvv-formaten {
	display: grid;
	gap: var(--dvv-ruimte-klein);
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	align-items: stretch;
}

.dvv-formaat {
	position: relative;
	display: grid;
	/* Vaste rijen: minivloer, maat, m², dansers, prijs. Zo staan de bedragen op
	   alle drie de kaarten op precies dezelfde hoogte, ook als de ene label over
	   twee regels loopt en de andere niet. */
	grid-template-rows: auto auto auto auto 1fr;
	gap: 0.3rem;
	padding: 1.15rem 1.15rem 1.25rem;
	text-align: left;
	background: var(--dvv-panel);
	color: var(--dvv-white);
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius);
	font-family: var(--dvv-body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.18s ease, background-color 0.18s ease,
		box-shadow 0.18s ease, transform 0.18s ease;
}

/*
 * De lichtstreep langs de bovenrand — de bovenkant van een LED-paneel, waar
 * het licht onder de rand vandaan komt. Dit is het detail dat elke kaart op de
 * site tot hetzelfde soort object maakt en tegelijk het merk draagt.
 */
.dvv-formaat::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--dvv-neon), transparent);
	opacity: 0;
	transition: opacity 0.18s ease;
}

.dvv-formaat:hover {
	border-color: color-mix(in srgb, var(--dvv-neon) 50%, transparent);
	transform: translateY(-2px);
}
.dvv-formaat:hover::before { opacity: 0.6; }

.dvv-formaat.is-actief {
	border-color: var(--dvv-neon);
	background: color-mix(in srgb, var(--dvv-neon) 12%, var(--dvv-panel));
	box-shadow: var(--dvv-gloed-neon);
}
.dvv-formaat.is-actief::before { opacity: 1; }

/* De vlag steekt door de bovenrand heen: hij hoort bij de kaart en niet erin. */
.dvv-formaat__vlag {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.3rem 0.6rem;
	background: var(--dvv-neon);
	color: var(--dvv-white);
	border-bottom-left-radius: var(--dvv-radius);
	font-size: 0.5625rem;
	letter-spacing: 0.06em;
}

/*
 * De minivloer op de kaart, in de échte verhouding.
 *
 * Hij stond op width: 100% met een maximumhoogte, en daardoor was elke vloer
 * een liggende rechthoek — ook de vierkante. Een plaatje dat de vorm verkeerd
 * weergeeft is erger dan geen plaatje: de bezoeker denkt dat hij het weet.
 *
 * Nu bepaalt de hoogte de maat en volgt de breedte uit kolommen ÷ rijen. Een
 * vierkante vloer is vierkant, 3,6 × 6 m is zichtbaar langwerpig. Dat de twee
 * vierkanten daardoor even groot ogen is geen verlies: het verschil tussen 13
 * en 52 m² zit in de tegeldichtheid — zes lijnen tegenover twaalf — en staat er
 * bovendien in cijfers naast.
 */
.dvv-formaat__vloer {
	display: block;
	height: 76px;
	width: auto;
	aspect-ratio: var(--dvv-kolommen, 6) / var(--dvv-rijen, 4);
	max-width: 100%;
	margin-bottom: 0.5rem;
	justify-self: start;
	border-radius: 2px;
	border: 1px solid color-mix(in srgb, var(--dvv-neon) 45%, transparent);
	background:
		repeating-linear-gradient(90deg,
			rgba(0, 0, 0, 0.55) 0 1px,
			transparent 1px calc(100% / var(--dvv-kolommen, 6))),
		repeating-linear-gradient(0deg,
			rgba(0, 0, 0, 0.55) 0 1px,
			transparent 1px calc(100% / var(--dvv-rijen, 4))),
		linear-gradient(115deg,
			var(--dvv-t1, #FF2E9A), var(--dvv-t3, #FFB01F), var(--dvv-t4, #22E06B),
			var(--dvv-t5, #12D4F0), var(--dvv-t7, #A93CFF));
	opacity: 0.55;
	transition: opacity 0.18s ease, box-shadow 0.18s ease;
}
.dvv-formaat:hover .dvv-formaat__vloer { opacity: 0.8; }
.dvv-formaat.is-actief .dvv-formaat__vloer {
	opacity: 1;
	box-shadow: 0 0 18px -4px var(--dvv-neon);
}

.dvv-formaat__label {
	font-family: var(--dvv-display);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.1;
	letter-spacing: -0.01em;
	word-spacing: 0.1em;
}

.dvv-formaat__m2 { color: var(--dvv-muted); font-weight: 400; }
.dvv-formaat.is-actief .dvv-formaat__m2 { color: var(--dvv-neon-soft); }

/* Het dansersaantal mag klein: wie al weet dat hij 23 m² wil, heeft het niet
   nodig. Wie dat niet weet, leest juist hier. */
.dvv-formaat__gasten {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	line-height: 1.3;
	color: var(--dvv-muted);
}

/* De prijs staat onderaan en is met afstand het grootste op de kaart — dat is
   de vraag waarmee vrijwel iedereen binnenkomt. */
.dvv-formaat__prijs {
	display: block;
	align-self: end;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--dvv-rand);
}
.dvv-formaat__prijs .dvv-bedrag {
	display: block;
	font-family: var(--dvv-display);
	font-size: var(--wp--preset--font-size--2xl);
	line-height: 1;
	color: var(--dvv-white);
	font-variant-numeric: tabular-nums;
}
.dvv-formaat.is-actief .dvv-formaat__prijs .dvv-bedrag { color: var(--dvv-neon-soft); }

.dvv-formaat__btw {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.3;
}

.dvv-maatkiezer__gasten {
	margin: 0.15rem 0 0;
	font-size: var(--wp--preset--font-size--sm);
}
.dvv-maatkiezer__gasten strong { color: var(--dvv-white); }

/* ------------------------------------------------- maatkiezer: de voet --- */

.dvv-maatkiezer__voet {
	margin-top: var(--dvv-ruimte-blok);
	padding-top: var(--dvv-ruimte-blok);
	border-top: 1px solid var(--dvv-rand);
	display: grid;
	gap: 0.9rem;
	max-width: 62rem;
}

.dvv-maatkiezer__inbegrepen {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	font-weight: 600;
}

.dvv-maatkiezer__reis {
	margin: 0;
	color: var(--dvv-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
}
.dvv-maatkiezer__reis .dvv-label { display: block; margin-bottom: 0.25rem; }

.dvv-maatkiezer__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0.35rem 0 0;
}

/* De vuistregeltabel staat dicht, want hij is voor wie twijfelt — niet voor
   iedereen. */
.dvv-vuistregel {
	margin-top: var(--wp--preset--spacing--40);
	max-width: var(--dvv-inhoud);
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius-lg);
	background: var(--dvv-panel);
	padding: 0.35rem 1.15rem;
}
.dvv-vuistregel summary {
	cursor: pointer;
	padding: 0.85rem 0;
	font-weight: 600;
	list-style-position: outside;
}
.dvv-vuistregel summary::marker { color: var(--dvv-neon); }
.dvv-vuistregel[open] summary { border-bottom: 1px solid var(--dvv-rand); }
.dvv-vuistregel > *:last-child { margin-bottom: 1rem; }

/* --------------------------------------------------------- inclusief ----- */

.dvv-inclusief__binnen {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

@media (min-width: 860px) {
	.dvv-inclusief__binnen { grid-template-columns: 1.15fr 0.85fr; }
}

.dvv-inclusief__zelf h3 {
	margin-bottom: 0.9rem;
	color: var(--dvv-amber);
	font-family: var(--dvv-pixel);
	font-weight: 400;
}
.dvv-inclusief__zelf p { color: var(--dvv-muted); }

/* ----------------------------------------------------------- feesten ----- */

.dvv-feesten__raster { margin-top: var(--wp--preset--spacing--30); }

.dvv-feest {
	display: block;
	text-decoration: none;
	color: var(--dvv-white);
	transition: border-color 0.2s ease, transform 0.2s ease;
}
a.dvv-feest:hover {
	color: var(--dvv-white);
	border-color: color-mix(in srgb, var(--dvv-neon) 50%, transparent);
	transform: translateY(-2px);
}
.dvv-feest h3 { font-size: var(--wp--preset--font-size--lg); margin-bottom: 0.4rem; }
.dvv-feest p { font-size: var(--wp--preset--font-size--sm); }

.dvv-pijl {
	display: inline-block;
	margin-top: 0.9rem;
	color: var(--dvv-neon-soft);
	transition: transform 0.2s ease;
}
a.dvv-feest:hover .dvv-pijl { transform: translateX(4px); }

/* -------------------------------------------------------------- specs ---- */

.dvv-specs__lijst {
	margin: var(--wp--preset--spacing--30) 0 0;
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	background: var(--dvv-rand);
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius-lg);
	overflow: hidden;
}

.dvv-spec {
	background: var(--dvv-panel);
	padding: var(--wp--preset--spacing--30);
}
.dvv-spec dt { margin-bottom: 0.4rem; }
.dvv-spec dd {
	margin: 0;
	font-family: var(--dvv-display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
}

/* -------------------------------------------------------- voorbeelden ---- */

.dvv-galerij {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.dvv-galerij__item {
	border-radius: var(--dvv-radius-lg);
	overflow: hidden;
	border: 1px solid var(--dvv-rand);
	background: var(--dvv-panel);
}
.dvv-galerij__beeld {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.dvv-voorbeelden__meer { margin-top: var(--wp--preset--spacing--30); }

/* ------------------------------------------------------------ stappen ---- */

.dvv-stappen__lijst {
	list-style: none;
	counter-reset: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

.dvv-stap { position: relative; padding-top: 2.6rem; }

.dvv-stap__nummer {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--dvv-radius);
	background: color-mix(in srgb, var(--dvv-neon) 18%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dvv-neon) 50%, transparent);
	color: var(--dvv-neon-soft);
}

.dvv-stap h3 { font-size: var(--wp--preset--font-size--lg); }
.dvv-stap p { font-size: var(--wp--preset--font-size--sm); }

/* ---------------------------------------------------------------- faq ---- */

.dvv-faq__lijst {
	display: grid;
	gap: 0.6rem;
	margin-top: var(--wp--preset--spacing--30);
}

.dvv-faq__item {
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius);
	background: var(--dvv-panel);
	padding: 0 1.15rem;
}
.dvv-faq__item summary {
	cursor: pointer;
	padding: 0.95rem 0;
	font-weight: 600;
}
.dvv-faq__item summary::marker { color: var(--dvv-neon); }
.dvv-faq__antwoord {
	padding-bottom: 1.1rem;
	color: var(--dvv-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.dvv-faq__meer { margin-top: var(--wp--preset--spacing--30); }

/* --------------------------------------------------------------- slot ---- */

/*
 * Het slot krijgt géén nummer. De genummerde koppen zijn hoofdstukken van het
 * verhaal; dit is de afsluiting eronder. Hier komt het paars wél terug, want
 * hier staat de knop waar de hele pagina naartoe werkt — dát is waar de
 * merkkleur voor bedoeld is.
 *
 * De gloed zit in de achtergrond en niet in een ::before. Dat pseudo-element is
 * bezet door de tegelrand van .dvv-sectie, en twee regels met dezelfde
 * specificiteit betekent dat de laatste wint: het slot verloor daarmee precies
 * de scheiding waar deze hele ronde om begonnen is. Bijkomend voordeel: de oude
 * gloed stak 10% buiten de sectie en dat soort uitstekende pseudo-elementen is
 * onzichtbaar voor getBoundingClientRect() — de lastigste bron van horizontale
 * scroll die er is.
 *
 * De dubbele klasse overstemt het licht-donker om en om, zodat de afsluiting
 * altijd op de donkerste kleur staat.
 */
.dvv-sectie.dvv-slot {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(
			120% 90% at 50% 112%,
			color-mix(in srgb, var(--dvv-neon) 22%, transparent),
			transparent 62%
		),
		var(--dvv-night-deep);
}

.dvv-slot__binnen {
	position: relative;
	max-width: var(--dvv-inhoud);
	text-align: center;
}

.dvv-slot__knoppen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--30);
}

/* ========================================================================== */
/*  Herontwerp homepage: hero met sociaal bewijs, uitleg, pakketten, reviews   */
/* ========================================================================== */

/* --------------------------------------------------------- sectiekoppen --- */

/*
 * DE SECTIEKOP — genummerd, links uitgelijnd, op één lijn met de rest.
 *
 * Hij stond gecentreerd. Gecentreerde koppen boven links uitgelijnde inhoud
 * zijn de tweede reden dat deze pagina niet strak oogde: er is dan geen enkele
 * verticale lijn die de hele pagina doorloopt, en zonder die lijn heeft het oog
 * niets om zich aan vast te houden. Nu begint álles — kop, tekst, kaarten,
 * knoppen — op dezelfde x.
 *
 * Het nummer komt uit een CSS-teller en niet uit PHP. Verbergt een sectie
 * zichzelf omdat zijn velden nog leeg zijn, dan telt de browser gewoon door en
 * blijft de reeks sluitend. Met een handmatig nummer stond er vroeg of laat
 * 01, 02, 04.
 *
 * De lijn die van het nummer naar de rechterrand loopt is de scheiding die
 * hiervoor een streepje van 44 px was. Over de volle breedte doet hij wat een
 * scheiding hoort te doen: hij snijdt de pagina door.
 */
/*
 * De kop zelf is zo breed als het omhulsel; alleen de tékst is smal. Dat is
 * geen detail: de scheidingslijn hangt aan de rechterrand van deze kop, en die
 * rand moet de rand van de pagina zijn. Zou de kop op 46rem eindigen, dan zou
 * de lijn met een vaste breedte tot buiten het omhulsel steken en op smalle
 * schermen de pagina zijwaarts laten schuiven.
 */
.dvv-sectiekop {
	position: relative;
	margin-inline: 0;
	margin-bottom: var(--dvv-ruimte-kop);
	padding-top: 2.4rem;
	text-align: left;
}

.dvv-sectiekop > h2,
.dvv-sectiekop > h3,
.dvv-sectiekop > p {
	max-width: 46rem;
}

.dvv-sectiekop::before {
	content: counter(dvv-sectie, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--dvv-pixel);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	padding: 0.25rem 0.5rem;
	border-radius: 3px;
	line-height: 1;

	/*
	 * Het cijfer krijgt de kleur van zijn sectie, maar altijd opgelicht met wit.
	 * Puur --dvv-accent zou bij het blauw en het groen onder de AA-grens duiken;
	 * met wit erbij haalt élke kleur uit het palet de norm, zonder dat je de
	 * kleur nog kunt verwarren met die van de sectie ernaast.
	 */
	color: color-mix(in srgb, var(--dvv-accent) 45%, var(--dvv-white));
	border: 1px solid color-mix(in srgb, var(--dvv-accent) 55%, transparent);
	background: color-mix(in srgb, var(--dvv-accent) 14%, transparent);
}

/* De lijn loopt van het nummer tot de rechterrand van het omhulsel. */
.dvv-sectiekop::after {
	content: "";
	position: absolute;
	top: 0.75rem;
	left: 3.1rem;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--dvv-accent) 70%, transparent),
		color-mix(in srgb, var(--dvv-white) 10%, transparent) 40%,
		transparent 92%);
	pointer-events: none;
}

.dvv-sectiekop > :last-child { margin-bottom: 0; }
.dvv-sectiekop .dvv-lead { max-width: 52ch; }

/* -------------------------------------------------- hero: sociaal bewijs -- */

.dvv-hero__beeld {
	position: relative;
	display: grid;
	place-items: center;
}

/*
 * "Al 240 feesten verzorgd", met drie gestileerde koppen ervoor. Geen echte
 * portretfoto's: die zouden van klanten moeten zijn, en daar hebben we geen
 * toestemming voor. Abstracte vormen beloven niets wat we niet waarmaken.
 */
.dvv-hero__geboekt {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--dvv-muted);
}

.dvv-koppen {
	display: flex;
	flex: none;
}
.dvv-kop {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	border: 2px solid var(--dvv-night);
	background: linear-gradient(
		140deg,
		var(--dvv-neon),
		color-mix(in srgb, var(--dvv-neon) 45%, var(--dvv-magenta))
	);
}
.dvv-kop + .dvv-kop { margin-left: -0.6rem; }
.dvv-kop:nth-child(2) {
	background: linear-gradient(140deg, var(--dvv-cyan), var(--dvv-neon));
}
.dvv-kop:nth-child(3) {
	background: linear-gradient(140deg, var(--dvv-amber), var(--dvv-magenta));
}

/* ------------------------------------------------------ Google-badge ----- */

/*
 * De badge zweeft over de rechteronderhoek van de vloer. Op smalle schermen
 * gaat hij eronder staan: overlappen op 360 px maakt allebei onleesbaar.
 */
.dvv-google {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1rem;
	padding: 0.7rem 1rem;
	border-radius: var(--dvv-radius-lg);
	border: 1px solid var(--dvv-rand);
	background: color-mix(in srgb, var(--dvv-panel) 88%, transparent);
	backdrop-filter: blur(10px);
	color: var(--dvv-white);
	text-decoration: none;
	box-shadow: 0 14px 40px -18px rgb(0 0 0 / 85%);
}

a.dvv-google { transition: transform 0.2s ease, border-color 0.2s ease; }
a.dvv-google:hover,
a.dvv-google:focus-visible {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--dvv-neon-soft) 55%, transparent);
}

.dvv-google__logo { display: grid; place-items: center; }

.dvv-google__cijfers {
	display: grid;
	gap: 0.15rem;
	line-height: 1.2;
}
.dvv-google__regel {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}
.dvv-google__regel strong {
	font-size: 0.9375rem;
	color: var(--dvv-white);
}
.dvv-google__aantal {
	font-size: 0.75rem;
	color: var(--dvv-muted);
}

/*
 * Sterren met een halve stand. Twee lagen tekst over elkaar: de onderste grijs,
 * de bovenste amber en afgeknipt op het percentage. Zo klopt 4,6 ook echt,
 * zonder icoonfont en zonder afronden naar boven.
 */
.dvv-sterren {
	position: relative;
	display: inline-block;
	font-size: 0.9rem;
	letter-spacing: 0.05em;
	line-height: 1;
}
.dvv-sterren__leeg { color: color-mix(in srgb, var(--dvv-muted) 55%, transparent); }
.dvv-sterren__vol {
	position: absolute;
	inset: 0;
	overflow: hidden;
	width: var(--dvv-vulling, 100%);
	color: var(--dvv-amber);
	white-space: nowrap;
}

@media (min-width: 900px) {
	.dvv-hero__beeld { display: block; }
	.dvv-google {
		position: absolute;
		right: 0;
		bottom: 0;
		margin-top: 0;
		transform: translate(8%, 20%);
	}
}

/* ---------------------------------------------------------- over de vloer - */

/*
 * De twee kolommen beginnen bovenaan, niet in het midden.
 *
 * Met align-items: center werd het beeld verticaal uitgemiddeld tegen een
 * tekstkolom die twee keer zo hoog is. Het hing daardoor halverwege in het
 * niets, met een gat erboven én eronder. Dat gat was een van de dingen die deze
 * pagina slordig maakten.
 */
.dvv-uitleg__binnen {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.dvv-uitleg__foto {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--dvv-radius-lg);
	border: 1px solid var(--dvv-rand);
}

.dvv-uitleg__vloer {
	display: grid;
	place-items: center;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--dvv-radius-lg);
	border: 1px solid var(--dvv-rand);
	background: var(--dvv-panel);
}

.dvv-uitleg__tekst > :first-child { margin-top: 0; }

.dvv-uitleg__punten {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}
.dvv-uitleg__punten li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}
.dvv-uitleg__punten strong { display: block; }
.dvv-uitleg__punten .dvv-gedempt {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
}

/* De specs staan hier als voetnoot bij de uitleg, niet als eigen hoofdstuk. */
.dvv-uitleg__specs {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--dvv-rand);
}
.dvv-uitleg__specs h3 {
	margin: 0 0 0.9rem;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 400;
}

@media (min-width: 900px) {
	.dvv-uitleg__binnen { grid-template-columns: 0.95fr 1.05fr; }

	/*
	 * Het beeld loopt mee terwijl je de tekst leest. De tekstkolom is hier ruim
	 * twee keer zo hoog als het beeld; blijft dat beeld bovenaan plakken, dan
	 * lees je de onderste helft van de uitleg naast een lege kolom. Sticky kost
	 * geen JavaScript en valt op smalle schermen vanzelf weg, want daar staan de
	 * twee onder elkaar.
	 */
	.dvv-uitleg__beeld {
		position: sticky;
		top: calc(var(--dvv-kophoogte) + var(--dvv-ruimte-klein));
	}
}

/* --------------------------------------------------------------- pakketten */

.dvv-pakketten__rij {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	align-items: start;
}

.dvv-pakket {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--dvv-radius-lg);
	border: 1px solid var(--dvv-rand);
	background: var(--dvv-panel);
}

/*
 * Het aanbevolen pakket springt eruit met een rand en een gloed, niet met een
 * afwijkende achtergrondkleur. Kleur alleen is geen verschil voor wie
 * kleurenblind is; een lichtere rand plus het label erboven wel.
 */
.dvv-pakket--populair {
	border-color: color-mix(in srgb, var(--dvv-neon) 60%, transparent);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--dvv-neon) 25%, transparent),
	            0 24px 60px -30px color-mix(in srgb, var(--dvv-neon) 90%, transparent);
}

.dvv-pakket__vlag {
	position: absolute;
	top: 0;
	left: var(--wp--preset--spacing--40);
	transform: translateY(-50%);
	padding: 0.3rem 0.6rem;
	border-radius: var(--dvv-radius);
	background: var(--dvv-neon);
	color: #fff;
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.dvv-pakket__naam {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
}
.dvv-pakket__regel {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
}

.dvv-pakket__prijs {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	flex-wrap: wrap;
	margin: 0.35rem 0 0;
}
.dvv-pakket__suffix { font-size: var(--wp--preset--font-size--sm); }

.dvv-pakket__lijst {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
	font-size: var(--wp--preset--font-size--sm);
}
.dvv-pakket__lijst li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}
/* Kleiner vinkje binnen een pakket: het is opsomming, geen keurmerk. */
.dvv-pakket__lijst .dvv-vink {
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.1rem;
}
.dvv-pakket__lijst .dvv-vink::after {
	left: 0.36rem;
	top: 0.2rem;
	width: 0.26rem;
	height: 0.5rem;
}

/* De knop naar onderen duwen zodat alle drie de knoppen op één lijn staan. */
.dvv-pakket .dvv-knop { margin-top: auto; }

.dvv-pakketten__voet {
	margin: var(--wp--preset--spacing--40) 0 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--sm);
}

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

.dvv-reviews__rij {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}

.dvv-review {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--dvv-radius-lg);
	border: 1px solid var(--dvv-rand);
	background: var(--dvv-panel);
}

.dvv-review__sterren {
	margin: 0;
	color: var(--dvv-amber);
	letter-spacing: 0.08em;
}

.dvv-review__tekst {
	margin: 0;
	border: 0;
	padding: 0;
	flex: 1;
}
.dvv-review__tekst p { margin: 0; }

.dvv-review__wie {
	display: grid;
	gap: 0.15rem;
	font-size: var(--wp--preset--font-size--sm);
}
.dvv-review__naam { font-weight: 600; color: var(--dvv-white); }

.dvv-reviews__link {
	margin: var(--wp--preset--spacing--40) 0 0;
	text-align: center;
}

/* ============================================================== prijsgrid == */

/*
 * Alle vloermaten met hun prijs, direct zichtbaar.
 *
 * De bezoeker komt met één vraag binnen — wat kost dat — en die vraag hoort
 * niet achter een offerteformulier te zitten. Acht kaarten, elk met de maat,
 * het bedrag incl. en excl. btw, en een minivloer die op schaal groeit.
 *
 * Die schaal is het punt. Zet je de vloertjes allemaal even groot, dan is het
 * een lijstje getallen; laat je ze meegroeien, dan zie je in één oogopslag dat
 * 7,2 × 7,2 vier keer de vloer van 3,6 × 3,6 is. Dat is dezelfde truc als de
 * maatkiezer hierboven, maar dan achtvoudig en in één beeld.
 */

.dvv-prijsgrid__rij {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

.dvv-prijskaart { display: flex; }

/*
 * De hele kaart is de link, niet een knopje onderin. Op een telefoon is dat het
 * verschil tussen raak en mis, en het scheelt acht knoppen die allemaal
 * hetzelfde roepen.
 */
.dvv-prijskaart__link {
	position: relative;
	display: grid;
	gap: 0.35rem;
	width: 100%;
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--dvv-radius-lg);
	border: 1px solid var(--dvv-rand);
	background: var(--dvv-panel);
	color: var(--dvv-white);
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dvv-prijskaart__link:hover,
.dvv-prijskaart__link:focus-visible {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--dvv-neon-soft) 55%, transparent);
	box-shadow: 0 26px 60px -28px color-mix(in srgb, var(--dvv-neon) 90%, transparent);
}

/* Het aanbevolen formaat springt eruit met rand én label, niet met kleur
   alleen — kleur alleen is geen verschil voor wie kleurenblind is. */
.dvv-prijskaart--populair .dvv-prijskaart__link {
	border-color: color-mix(in srgb, var(--dvv-neon) 60%, transparent);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--dvv-neon) 25%, transparent),
	            0 24px 60px -30px color-mix(in srgb, var(--dvv-neon) 90%, transparent);
}

.dvv-prijskaart__vlag {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.3rem 0.55rem;
	border-bottom-left-radius: var(--dvv-radius);
	background: var(--dvv-neon);
	color: #fff;
	font-size: 0.5625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --- de minivloer --- */

.dvv-prijskaart__vloerhouder {
	display: grid;
	place-items: end center;
	height: 92px;
	margin-bottom: 0.4rem;
}

/*
 * Geen raster van losse tegels maar één vlak met twee verlopen eroverheen: acht
 * kaarten met echte tegels zijn ruim zeshonderd extra elementen in de pagina, en
 * op deze grootte ziet niemand het verschil. De tegelverdeling klopt wél — de
 * lijnen worden per kaart uitgerekend uit het aantal kolommen en rijen.
 */
.dvv-prijskaart__vloer {
	display: block;
	width: calc(var(--dvv-kolommen) * 7px);
	height: calc(var(--dvv-rijen) * 7px);
	border-radius: 2px;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--dvv-night-deep) 70%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--dvv-night-deep) 70%, transparent) 1px, transparent 1px),
		linear-gradient(135deg, var(--dvv-magenta), var(--dvv-neon) 45%, var(--dvv-cyan));
	background-size:
		calc(100% / var(--dvv-kolommen)) 100%,
		100% calc(100% / var(--dvv-rijen)),
		100% 100%;
	box-shadow: 0 0 22px -6px color-mix(in srgb, var(--dvv-neon) 80%, transparent);
	transition: box-shadow 0.25s ease, filter 0.25s ease;
}

.dvv-prijskaart__link:hover .dvv-prijskaart__vloer,
.dvv-prijskaart__link:focus-visible .dvv-prijskaart__vloer {
	filter: saturate(1.25) brightness(1.12);
	box-shadow: 0 0 34px -4px color-mix(in srgb, var(--dvv-neon) 95%, transparent);
}

/* --- de gegevens --- */

.dvv-prijskaart__maat {
	font-family: var(--dvv-display);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.15;
}

.dvv-prijskaart__m2 {
	color: var(--dvv-cyan);
	font-size: 0.6875rem;
}

.dvv-prijskaart__prijs {
	display: grid;
	gap: 0.1rem;
	margin-top: 0.5rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--dvv-rand);
}

/* Het bedrag is het antwoord op de vraag waarmee de bezoeker kwam; het mag het
   grootste op de kaart zijn, groter dan de maat erboven. */
.dvv-prijskaart__prijs .dvv-bedrag {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.1;
	color: var(--dvv-white);
}

/*
 * Beide bedragen, net als bij lichtgeluidhuren.nl. De particulier leest het
 * eerste getal, de zakelijke huurder het tweede, en niemand hoeft te rekenen of
 * te mailen met de vraag of de btw er nog bij komt.
 */
.dvv-prijskaart__btw { font-size: 0.75rem; }

.dvv-prijskaart__gasten {
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--dvv-muted);
}

.dvv-prijskaart__kies {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.7rem;
	color: var(--dvv-neon-soft);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}
.dvv-prijskaart__link:hover .dvv-knop__pijl,
.dvv-prijskaart__link:focus-visible .dvv-knop__pijl { transform: translateX(4px); }

/* --- onder het grid --- */

.dvv-prijsgrid__voet {
	max-width: 46rem;
	margin: var(--wp--preset--spacing--40) auto 0;
	display: grid;
	gap: 1rem;
	text-align: center;
}

.dvv-prijsgrid__inbegrepen {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0.6rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
}

/*
 * De reiskosten staan ná de prijs, in een eigen kader. Concurrenten schrijven
 * "reiskosten in overleg" en dat is precies de zin waarop iemand afhaakt: het
 * kan alles betekenen. Hier staat de som uitgeschreven, en dat mag opvallen.
 */
.dvv-prijsgrid__reis {
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--dvv-radius-lg);
	border: 1px solid var(--dvv-rand);
	background: color-mix(in srgb, var(--dvv-panel) 60%, transparent);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--dvv-muted);
}
.dvv-prijsgrid__reis .dvv-label { display: block; margin-bottom: 0.3rem; }
.dvv-prijsgrid__reis a { margin-left: 0.35rem; }

.dvv-prijsgrid__klein { margin: 0; font-size: var(--wp--preset--font-size--xs); }

@media (max-width: 600px) {
	/* Twee kaarten naast elkaar blijft op 360 px leesbaar en scheelt vier
	   schermen scrollen ten opzichte van één kolom. */
	.dvv-prijsgrid__rij { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
	.dvv-prijskaart__link { padding: 0.9rem; }
	.dvv-prijskaart__vloerhouder { height: 62px; }
	.dvv-prijskaart__vloer {
		width: calc(var(--dvv-kolommen) * 4.5px);
		height: calc(var(--dvv-rijen) * 4.5px);
	}
	.dvv-prijskaart__maat { font-size: var(--wp--preset--font-size--base); }
	.dvv-prijskaart__prijs .dvv-bedrag { font-size: var(--wp--preset--font-size--lg); }
	.dvv-prijskaart__gasten,
	.dvv-prijskaart__kies { font-size: var(--wp--preset--font-size--xs); }
}

/* =========================================================== productpagina = */

/*
 * De kop van /led-dansvloer-huren/. Compacter dan de hero op de homepage: wie
 * hier binnenkomt weet al dát hij een vloer wil en zoekt de maat en het bedrag.
 * Eén scherm overtuigen is genoeg, daarna moet het prijsoverzicht in beeld.
 */

.dvv-prodkop {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2rem, 1rem + 5vw, 4rem);
}

.dvv-prodkop::before {
	content: "";
	position: absolute;
	inset: -40% -10% auto;
	height: 60vh;
	background: radial-gradient(
		ellipse at 65% 35%,
		color-mix(in srgb, var(--dvv-neon) 20%, transparent),
		transparent 62%
	);
	pointer-events: none;
}

.dvv-prodkop__binnen {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
}

.dvv-prodkop__tekst h1 { margin-bottom: 0.4em; }

.dvv-prodkop__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--30);
}

.dvv-prodkop__vanaf { margin-top: 1.15rem; color: var(--dvv-muted); }

.dvv-prodkop__beeld { display: grid; place-items: center; min-height: 220px; }

@media (min-width: 900px) {
	.dvv-prodkop__binnen { grid-template-columns: 1.05fr 0.95fr; }
}

/* --- inbegrepen en specificaties, naast elkaar --- */

.dvv-proddetails__binnen {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

.dvv-proddetails__blok h2 {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--xl);
}

@media (min-width: 900px) {
	.dvv-proddetails__binnen { grid-template-columns: 1fr 1fr; }
}

/*
 * De specificaties als naam-waardeparen met een stippellijn ertussen. Dat leest
 * als een technisch blad en niet als marketing, en dat is precies de bedoeling:
 * dit is het blok waar de zakelijke huurder naar zoekt en waar de meeste
 * concurrenten blijven steken bij "hoge kwaliteit".
 */
.dvv-speclijst { margin: 0; display: grid; gap: 0.15rem; }

.dvv-speclijst__rij {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--dvv-rand);
}
.dvv-speclijst__rij:last-child { border-bottom: 0; }

.dvv-speclijst dt {
	flex: 1 1 8rem;
	color: var(--dvv-muted);
	font-size: var(--wp--preset--font-size--sm);
}
.dvv-speclijst dd {
	flex: 1 1 10rem;
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.dvv-prodtekst > :first-child { margin-top: 0; }

/* ------------------------------------------------------------- rustiger --- */

@media (prefers-reduced-motion: reduce) {
	a.dvv-google:hover,
	a.dvv-google:focus-visible { transform: none; }

	.dvv-prijskaart__link:hover,
	.dvv-prijskaart__link:focus-visible { transform: none; }
	.dvv-prijskaart__link:hover .dvv-knop__pijl,
	.dvv-prijskaart__link:focus-visible .dvv-knop__pijl { transform: none; }
}

/* ============================================================================
   Huisstijl, opgeschaald
   ----------------------------------------------------------------------------
   De pagina was correct maar tam: alles op dezelfde toon, niets dat een
   bezoeker vasthoudt. Dit blok doet vier dingen, en met opzet niet meer:

     1. De H1 wordt fors groter en krijgt een gloed. Eén element mag domineren.
     2. De prijs krijgt een eigen vlag, in neon, boven de vouw.
     3. De hero-vloer wordt groter en krijgt een lichtplas eronder — hij ziet
        er nu uit alsof hij aanstaat in plaats van alsof hij getekend is.
     4. Koppen krijgen een neonstreepje, zodat secties beginnen in plaats van
        doorlopen.

   Wat er níet gebeurt: meer kleuren, meer gloed op meer plekken, of animaties
   die om aandacht vragen. De regel uit de briefing blijft staan — één
   neon-accent per scherm. Wow ontstaat door contrast, en contrast verdwijnt
   zodra alles glimt.
   ========================================================================= */

/* ------------------------------------------------------------------ kop --- */

/*
 * Een hero-H1 op dezelfde grootte als elke andere H1 verspilt de enige plek
 * waar typografie nog iets kan doen. Deze loopt door tot 4,5 rem op een breed
 * scherm en zakt op een telefoon netjes terug naar 2,4 rem.
 */
.dvv-hero__tekst h1,
.dvv-prodkop__tekst h1 {
	font-size: clamp(2.4rem, 1.1rem + 5vw, 4.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.02;
	text-shadow: 0 0 60px color-mix(in srgb, var(--dvv-neon) 45%, transparent);
}

/*
 * Het eyebrow was losse tekst en zweefde. Als pilletje met een brandend
 * lampje ervoor leest het als een statusmelding: dit bedrijf doet dit, nu.
 *
 * Alleen in de twee heroes. Een pulserend lampje naast "404" of naast
 * "Ontwerpsysteem" op de stijlgids is hetzelfde element in een context waar
 * het niets betekent — en dan is het versiering.
 */
.dvv-hero__tekst .dvv-eyebrow,
.dvv-prodkop__tekst .dvv-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid color-mix(in srgb, var(--dvv-neon) 40%, transparent);
	border-radius: 100px;
	background: color-mix(in srgb, var(--dvv-neon) 10%, transparent);
	color: var(--dvv-neon-soft);
}

.dvv-hero__tekst .dvv-eyebrow::before,
.dvv-prodkop__tekst .dvv-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--dvv-lime);
	box-shadow: 0 0 8px var(--dvv-lime);
	animation: dvv-pulse 2.4s ease-in-out infinite;
}

@keyframes dvv-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.35; }
}

/* ------------------------------------------------------------ prijsvlag --- */

/*
 * Het bedrag boven de vouw. Geen kaart met een rand eromheen — dat maakt er
 * een blokje van dat je kunt overslaan. Dit is een regel tekst waarvan één
 * woord toevallig heel groot is, en dat leest het oog als onderdeel van de
 * belofte in plaats van als reclame.
 */
.dvv-prijsvlag {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	column-gap: 0.9rem;
	row-gap: 0.35rem;
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--dvv-rand);
}

.dvv-prijsvlag__label {
	grid-column: 1;
	color: var(--dvv-muted);
	align-self: center;
}

.dvv-prijsvlag__bedrag {
	grid-column: 1;
	grid-row: 2;
	font-family: var(--dvv-display);
	font-size: clamp(2.6rem, 1.4rem + 4vw, 3.75rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--dvv-white);
	white-space: nowrap;
	text-shadow: 0 0 34px color-mix(in srgb, var(--dvv-magenta) 55%, transparent);
}

.dvv-prijsvlag__uitleg {
	grid-column: 2;
	grid-row: 2;
	align-self: center;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.45;
	color: var(--dvv-muted);
	text-wrap: pretty;
}

/* Zonder doorgerekende prijzen staat er alleen het handmatige zinnetje. */
.dvv-prijsvlag--tekst { grid-template-columns: 1fr; }
.dvv-prijsvlag--tekst .dvv-prijsvlag__bedrag {
	grid-row: 1;
	font-size: var(--wp--preset--font-size--lg);
	white-space: normal;
	text-shadow: none;
}

@media (max-width: 560px) {
	.dvv-prijsvlag { grid-template-columns: 1fr; }
	.dvv-prijsvlag__uitleg { grid-column: 1; grid-row: 3; }
}

/* --------------------------------------------------------- hero-vloer ----- */

/*
 * De vloer is het handelsmerk en stond te bescheiden in de hoek.
 *
 * De lichtplas die hier stond is weg: die zit nu in .dvv-vloerhouder, zodat
 * élke vloer op de site hem heeft en niet alleen deze. Dat scheelde meteen een
 * filter: blur(24px) over een vlak van ruim 400 px breed — het duurste ding op
 * de pagina, en het deed hetzelfde als drie radiale verlopen die niets kosten.
 */
.dvv-hero__vloer {
	position: relative;
	min-height: clamp(260px, 26vw, 380px);
	display: flex;
	align-items: center;
}

@media (min-width: 900px) {
	.dvv-hero__vloer .dvv-vloer { --dvv-tegel: 58px; }
}

/* ------------------------------------------------------------- rustiger --- */

@media (prefers-reduced-motion: reduce) {
	.dvv-hero__tekst .dvv-eyebrow::before,
	.dvv-prodkop__tekst .dvv-eyebrow::before { animation: none; }
}

/* ------------------------------------------------------- paginakop --- */

/*
 * DE KOP VAN EEN BINNENPAGINA.
 *
 * Dezelfde donkere basis als de hero, maar lager en zonder beeld: een
 * binnenpagina hoeft niet te verleiden, die moet oriënteren. Het kruimelpad
 * staat bóven de titel en niet eronder, omdat het antwoord geeft op "waar ben
 * ik" voordat de titel antwoord geeft op "wat is dit".
 */
.dvv-paginakop {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(70% 120% at 12% 0%,
			color-mix(in srgb, var(--dvv-neon) 24%, transparent), transparent 70%),
		var(--dvv-night-deep);
	border-bottom: 1px solid var(--dvv-rand);
}

.dvv-paginakop__binnen {
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.dvv-paginakop__titel {
	font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem);
	margin: 0.35em 0 0;
	max-width: 22ch;
}

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

/* ---- kruimelpad ---- */

.dvv-kruimels {
	font-size: 0.8125rem;
	color: var(--dvv-muted);
}

.dvv-kruimels a {
	color: var(--dvv-muted);
	text-decoration: none;
}

.dvv-kruimels a:hover {
	color: var(--dvv-cyan);
	text-decoration: underline;
}

/* Rank Math zet er zelf een scheidingsteken tussen; die krijgt wat lucht. */
.dvv-kruimels .separator,
.dvv-kruimels__scheiding {
	margin-inline: 0.45rem;
	opacity: 0.6;
}

.dvv-kruimels .last,
.dvv-kruimels [aria-current="page"] { color: var(--dvv-white); }

/*
 * Wikkel voor de inhoud van een binnenpagina.
 *
 * Bewust géén .dvv-sectie: die klasse hoort bij de opgemaakte secties van de
 * homepage en brengt een eigen achtergrondverloop en een strook tegelblokjes
 * mee. Op een contactpagina wil je alleen de verticale ruimte, en niet de
 * versiering die daar per ongeluk bij kwam.
 */
.dvv-paginainhoud {
	padding-block: var(--dvv-ruimte-sectie);
}

/* --------------------------------------------------------- contact --- */

.dvv-contact {
	display: grid;
	gap: clamp(2rem, 1rem + 3vw, 3.5rem);
	grid-template-columns: 1fr;
	align-items: start;
}

/*
 * Het formulier krijgt ruim anderhalf keer zoveel breedte als de gegevens.
 * Een gelijke verdeling maakt de invoervelden onnodig smal, en juist daar zit
 * het werk voor de bezoeker.
 */
@media (min-width: 56rem) {
	.dvv-contact { grid-template-columns: 1.45fr 0.55fr; }
}

/* ---- de kaart met het formulier ---- */

/*
 * DE KAART OM HET FORMULIER.
 *
 * Hier stond een verspringende gekleurde plaat onder de kaart, gemaakt met een
 * pseudo-element op z-index -1. Dat werkt niet: een negatieve z-index plaatst
 * een element wel achter de inhoud, maar nog altijd vóór de achtergrond van
 * zijn eigen ouder. Het gevolg was een knalpaars vlak over de hele kaart in
 * plaats van een randje eronderuit.
 *
 * Nu is het een gewone kaart in de stijl van de rest van de site: donker
 * paneel, dunne rand, diepe zachte schaduw. Het enige accent is een haarlijn
 * bovenlangs die in het midden oplicht, hetzelfde motief als de
 * sectiescheidingen op de homepage. Eén accent per vlak, meer heeft het niet
 * nodig.
 */
.dvv-contact__kaart {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--dvv-panel) 92%, var(--dvv-neon)),
		var(--dvv-panel) 45%);
	border: 1px solid var(--dvv-rand);
	border-radius: 18px;
	padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
	box-shadow: 0 40px 70px -50px #000;
}

.dvv-contact__kaart::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2px;
	background: linear-gradient(90deg,
		transparent,
		color-mix(in srgb, var(--dvv-neon) 70%, transparent) 35%,
		var(--dvv-cyan) 50%,
		color-mix(in srgb, var(--dvv-neon) 70%, transparent) 65%,
		transparent);
}

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

.dvv-contact__kaart h2 {
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
	margin-bottom: 0.4rem;
}

.dvv-contact__intro {
	color: var(--dvv-muted);
	margin-bottom: 1.75rem;
}

/* ---- rechterkolom ---- */

.dvv-contact__zijtekst {
	color: var(--dvv-muted);
	font-size: 1rem;
	line-height: 1.65;
	margin: 0 0 1.5rem;
}

.dvv-wa {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.5rem;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--dvv-neon), var(--dvv-magenta));
	color: #fff;
	font-family: var(--dvv-display);
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--dvv-neon) 85%, transparent);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dvv-wa:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--dvv-magenta) 90%, transparent);
}

.dvv-wa__pijl { transition: transform 0.18s ease; }
.dvv-wa:hover .dvv-wa__pijl { transform: translate(2px, -2px); }

.dvv-zijlabel {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 2.25rem 0 1.1rem;
	font-family: var(--dvv-pixel);
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dvv-muted);
}

.dvv-zijlabel__streep {
	width: 1.4rem;
	height: 2px;
	border-radius: 2px;
	background: var(--dvv-neon);
}

.dvv-gegevens { display: grid; gap: 1.15rem; }

.dvv-gegeven { display: flex; align-items: flex-start; gap: 0.85rem; }

.dvv-gegeven__icoon {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 10px;
	background: var(--dvv-panel);
	border: 1px solid var(--dvv-rand);
	color: var(--dvv-neon-soft);
}

.dvv-gegeven__icoon svg { width: 1.15rem; height: 1.15rem; }

.dvv-gegeven__label {
	display: block;
	font-family: var(--dvv-pixel);
	font-size: 0.5625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dvv-muted);
	margin-bottom: 0.2rem;
}

.dvv-gegeven__waarde {
	display: block;
	color: var(--dvv-white);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.dvv-gegeven__waarde a { color: var(--dvv-white); text-decoration: none; }
.dvv-gegeven__waarde a:hover { color: var(--dvv-cyan); text-decoration: underline; }

/* Ontbrekende gegevens vallen op voor de beheerder, niet voor de bezoeker. */
.dvv-gegeven__waarde.is-leeg { color: var(--dvv-amber); font-size: 0.875rem; }

.dvv-deal {
	display: inline-block;
	margin-top: 2rem;
	padding: 0.75rem 1.15rem;
	border: 1px dashed color-mix(in srgb, var(--dvv-amber) 55%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--dvv-amber) 10%, transparent);
	color: var(--dvv-amber);
	font-size: 0.875rem;
	font-weight: 600;
}

/* ---- Fluent Forms op een donkere achtergrond ---- */

/*
 * De plugin gaat uit van een lichte pagina: witte velden, grijze randen,
 * donkere tekst. Hieronder alleen wat nodig is om de velden bij de rest te
 * laten horen. De velden staan in twee kolommen; alles wat geen .dvv-half
 * heeft loopt over de volle breedte.
 */
/*
 * Het grid staat op de fieldset en niet op het formulier.
 *
 * Fluent Forms zet om alle velden een fieldset met een verborgen legend, voor
 * schermlezers. De veldgroepen zijn dus kleinkinderen van het formulier, en een
 * grid op <form> deed daardoor niets: die legde alleen de fieldset zelf uit.
 * Vandaar dat voornaam en achternaam bleven stapelen.
 *
 * De :not(:has(fieldset))-regel vangt oudere versies van de plugin op, die de
 * velden rechtstreeks in het formulier zetten.
 */
.fluentform .frm-fluent-form > fieldset,
.fluentform .frm-fluent-form:not(:has(> fieldset)) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1rem;
	border: 0;
	margin: 0;
	padding: 0;
	min-inline-size: 100%;
}

.fluentform .ff-el-group { grid-column: 1 / -1; margin-bottom: 1.05rem; }
.fluentform .ff-el-group.dvv-half { grid-column: span 1; }

/* De verborgen legend en de nonce-velden mogen geen rasterplek innemen. */
.fluentform .frm-fluent-form > fieldset > legend,
.fluentform .frm-fluent-form input[type="hidden"] {
	grid-column: 1 / -1;
	display: none;
}

@media (max-width: 34rem) {
	.fluentform .ff-el-group.dvv-half { grid-column: 1 / -1; }
}

.fluentform .ff-el-input--label label {
	color: var(--dvv-white);
	font-weight: 600;
	font-size: 0.9375rem;
	margin-bottom: 0.4rem;
}

.fluentform .ff-el-input--label .ff-el-is-required.asterisk-right:after { color: var(--dvv-magenta); }

.fluentform .ff-el-form-control {
	width: 100%;
	padding: 0.85rem 1rem;
	background: color-mix(in srgb, var(--dvv-night-deep) 65%, transparent);
	border: 1px solid var(--dvv-rand);
	border-radius: 10px;
	color: var(--dvv-white);
	font-family: var(--dvv-body);
	font-size: 1rem;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.fluentform .ff-el-form-control::placeholder { color: color-mix(in srgb, var(--dvv-muted) 75%, transparent); }

.fluentform .ff-el-form-control:focus {
	outline: none;
	border-color: var(--dvv-neon);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dvv-neon) 28%, transparent);
}

.fluentform textarea.ff-el-form-control { min-height: 8rem; resize: vertical; }

/* De knop krijgt dezelfde verspringende plaat als de kaart. */
.fluentform .ff-el-group.ff_submit_btn_wrapper { margin-top: 0.5rem; }

.fluentform .ff-btn-submit {
	position: relative;
	padding: 0.95rem 1.75rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--dvv-neon), var(--dvv-magenta));
	color: #fff;
	font-family: var(--dvv-display);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--dvv-neon) 85%, transparent);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.fluentform .ff-btn-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--dvv-magenta) 90%, transparent);
}

.fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--dvv-magenta); }
.fluentform .error-text,
.fluentform .text-danger { color: var(--dvv-magenta); font-size: 0.8125rem; }

.ff-message-success {
	padding: 1.1rem 1.3rem;
	border: 1px solid color-mix(in srgb, var(--dvv-lime) 45%, transparent);
	border-radius: 12px;
	background: color-mix(in srgb, var(--dvv-lime) 12%, transparent);
	color: var(--dvv-white);
}

@media (prefers-reduced-motion: reduce) {
	.dvv-wa, .dvv-wa__pijl, .fluentform .ff-btn-submit { transition: none; }
	.dvv-wa:hover, .fluentform .ff-btn-submit:hover { transform: none; }
	.dvv-wa:hover .dvv-wa__pijl { transform: none; }
}

/* ------------------------------------------------------------- faq --- */

.dvv-faq {
	display: grid;
	gap: clamp(2rem, 1rem + 3vw, 4rem);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 62rem) {
	.dvv-faq { grid-template-columns: 0.34fr 0.66fr; }

	/*
	 * De zijbalk loopt mee bij het scrollen. Bij dertig vragen is een
	 * inhoudsopgave die na twee schermen uit beeld verdwijnt geen
	 * inhoudsopgave meer.
	 */
	.dvv-faq__zij {
		position: sticky;
		top: calc(var(--dvv-kophoogte) + 1.5rem);
	}
}

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

.dvv-faq__intro {
	color: var(--dvv-muted);
	line-height: 1.7;
	margin: 0 0 1.75rem;
}

.dvv-faq__sprong ul {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	gap: 0.15rem;
}

.dvv-faq__sprong a {
	display: block;
	padding: 0.55rem 0.7rem;
	border-radius: var(--dvv-radius);
	color: var(--dvv-white);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.dvv-faq__sprong a:hover {
	background: color-mix(in srgb, var(--dvv-neon) 16%, transparent);
	color: var(--dvv-neon-soft);
}

/* ---- de onderwerpen ---- */

.dvv-faq__groep {
	margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	scroll-margin-top: calc(var(--dvv-kophoogte) + 1.5rem);
}

.dvv-faq__groepkop {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
	margin-bottom: 1.25rem;
}

.dvv-faq__streep {
	flex: none;
	width: 1.75rem;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--dvv-neon), var(--dvv-cyan));
}

/*
 * De vragen staan in één kaart met haarlijnen ertussen, en niet als losse
 * kaartjes. Losse kaartjes met tussenruimte lezen als losse onderwerpen,
 * terwijl dit één lijst is die je van boven naar beneden afgaat.
 */
.dvv-faq__kaart {
	background: var(--dvv-panel);
	border: 1px solid var(--dvv-rand);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 30px 60px -45px #000;
}

.dvv-faq__item + .dvv-faq__item { border-top: 1px solid var(--dvv-rand); }

.dvv-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.1rem 1.35rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--dvv-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--dvv-white);
	transition: background-color 0.16s ease;
}

.dvv-faq__item summary::-webkit-details-marker { display: none; }
.dvv-faq__item summary:hover { background: color-mix(in srgb, var(--dvv-white) 4%, transparent); }

.dvv-faq__item summary:focus-visible {
	outline: 2px solid var(--dvv-neon);
	outline-offset: -2px;
}

/* Het rondje met het plusteken. Twee streepjes, waarvan er één wegdraait. */
.dvv-faq__toggle {
	position: relative;
	flex: none;
	width: 1.85rem;
	height: 1.85rem;
	border: 1px solid var(--dvv-rand);
	border-radius: 999px;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.dvv-faq__toggle::before,
.dvv-faq__toggle::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 0.7rem;
	height: 2px;
	border-radius: 2px;
	background: var(--dvv-neon-soft);
	transform: translate(-50%, -50%);
	transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.18s ease;
}

.dvv-faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }

.dvv-faq__item[open] .dvv-faq__toggle {
	border-color: color-mix(in srgb, var(--dvv-neon) 60%, transparent);
	background: color-mix(in srgb, var(--dvv-neon) 18%, transparent);
}

.dvv-faq__item[open] .dvv-faq__toggle::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.dvv-faq__antwoord {
	padding: 0 1.35rem 1.3rem;
	color: var(--dvv-muted);
	line-height: 1.7;
}

.dvv-faq__antwoord p { margin: 0 0 0.9em; }
.dvv-faq__antwoord p:last-child { margin-bottom: 0; }

/* ---- slot ---- */

.dvv-faq__slot {
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border: 1px solid var(--dvv-rand);
	border-radius: 14px;
	background:
		radial-gradient(90% 130% at 0% 0%,
			color-mix(in srgb, var(--dvv-neon) 18%, transparent), transparent 65%),
		var(--dvv-panel);
}

.dvv-faq__slot h2 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.dvv-faq__slot p { color: var(--dvv-muted); margin-bottom: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
	.dvv-faq__sprong a,
	.dvv-faq__item summary,
	.dvv-faq__toggle,
	.dvv-faq__toggle::before,
	.dvv-faq__toggle::after { transition: none; }
}

/* --------------------------------------------------------- over ons --- */

/*
 * Blokken op binnenpagina's. Zelfde ritme als de homepage: afwisselende
 * achtergronden met een paar procent verschil, genoeg om te zien dat er een
 * sectie begint en te weinig om als strepen op te vallen.
 */
.dvv-blok {
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
	background: var(--dvv-night);
}

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

.dvv-blok--missie { background: var(--dvv-night-deep); }
.dvv-blok--slot   { background: var(--dvv-night-deep); }

.dvv-blok + .dvv-blok { border-top: 1px solid var(--dvv-rand); }

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

.dvv-blok__intro {
	color: var(--dvv-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
	margin: 0.6rem 0 0;
}

.dvv-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.8rem;
}

/* ---- foto met tekst ---- */

.dvv-over {
	display: grid;
	gap: clamp(2rem, 1rem + 3vw, 4rem);
	grid-template-columns: 1fr;
	align-items: center;
}

/*
 * De foto krijgt minder ruimte dan de tekst. Op een over-ons-pagina is het
 * verhaal het onderwerp; het beeld is er om te laten zien wát we verhuren, en
 * dat lukt met een klein, scherp beeld beter dan met een halve pagina vol
 * tegels waarin je het patroon niet meer herkent.
 */
@media (min-width: 56rem) {
	.dvv-over { grid-template-columns: 0.62fr 1.38fr; }
}

/*
 * DE GLOED ACHTER DE FOTO.
 *
 * Twee gedraaide, zwaar geblurde kleurvlakken achter het beeld, in de kleuren
 * van de vloer zelf. Dat leest als licht dat van de tegels af komt, en het
 * maakt dat een klein beeld toch opvalt. Op z-index -1 binnen een eigen
 * stapelcontext, zodat de gloed nooit over de foto heen valt.
 */
.dvv-over__beeld {
	position: relative;
	display: grid;
	place-items: center;
	isolation: isolate;
}

.dvv-over__beeld::before,
.dvv-over__beeld::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 8% 2%;
	border-radius: 50% 50% 42% 42%;
	filter: blur(52px);
}

.dvv-over__beeld::before {
	background: linear-gradient(135deg, var(--dvv-cyan), var(--dvv-neon) 60%, transparent);
	transform: rotate(-10deg) translate(-5%, -4%);
	opacity: 0.55;
}

.dvv-over__beeld::after {
	background: linear-gradient(210deg, var(--dvv-magenta), var(--dvv-lime) 65%, transparent);
	transform: rotate(12deg) translate(6%, 5%);
	opacity: 0.35;
}

.dvv-over__foto {
	display: block;
	width: 100%;
	max-width: 20rem;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 11rem 11rem var(--dvv-radius-lg) var(--dvv-radius-lg);
	border: 1px solid color-mix(in srgb, var(--dvv-white) 18%, transparent);
	box-shadow:
		0 26px 55px -28px #000,
		0 0 0 7px color-mix(in srgb, var(--dvv-white) 4%, transparent);
}

.dvv-over__foto--leeg {
	display: grid;
	place-items: center;
	padding: 2rem;
	text-align: center;
	color: var(--dvv-muted);
	font-size: 0.875rem;
	background: var(--dvv-panel);
}

.dvv-over__cijfers {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	margin-top: 1.5rem;
}

.dvv-cijfer__getal {
	display: block;
	font-family: var(--dvv-display);
	font-weight: 700;
	font-size: 1.75rem;
	color: var(--dvv-white);
	line-height: 1.1;
}

.dvv-cijfer__label {
	display: block;
	font-size: 0.8125rem;
	color: var(--dvv-muted);
	margin-top: 0.15rem;
}

.dvv-over__tekst h2 {
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	margin-bottom: 0.8rem;
}

.dvv-over__tekst p {
	color: var(--dvv-muted);
	line-height: 1.75;
	max-width: 46rem;
}

/* ---- waarom klanten ons kiezen ---- */

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

.dvv-reden {
	padding: 1.6rem 1.5rem;
	background: var(--dvv-panel);
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius-lg);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.dvv-reden:hover {
	border-color: color-mix(in srgb, var(--dvv-neon) 45%, transparent);
	transform: translateY(-3px);
}

.dvv-reden__nummer {
	display: block;
	font-family: var(--dvv-display);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 0.8rem;
	color: transparent;
	-webkit-text-stroke: 1px color-mix(in srgb, var(--dvv-neon) 70%, transparent);
}

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

/* ---- missie ---- */

.dvv-missie {
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}

.dvv-missie h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); margin-bottom: 0.9rem; }

.dvv-missie p {
	color: var(--dvv-white);
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.75;
	margin: 0;
}

/* ---- bezorggebied ---- */

.dvv-regios {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.dvv-regios li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 1.1rem;
	background: var(--dvv-panel);
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius);
}

.dvv-regio__naam { color: var(--dvv-white); font-weight: 600; font-size: 0.9375rem; }
.dvv-regio__afstand { color: var(--dvv-muted); font-size: 0.8125rem; white-space: nowrap; }

/* ---- slot-cta, ook bruikbaar op andere pagina's ---- */

.dvv-slotcta {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
	padding: clamp(1.75rem, 1rem + 2.5vw, 3rem);
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius-lg);
	background:
		radial-gradient(80% 130% at 50% 0%,
			color-mix(in srgb, var(--dvv-neon) 26%, transparent), transparent 70%),
		var(--dvv-panel);
}

.dvv-slotcta h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: 0.5rem; }
.dvv-slotcta p  { color: var(--dvv-muted); margin-bottom: 1.5rem; }

.dvv-slotcta__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	justify-content: center;
}

.dvv-slotcta__tweede {
	display: inline-flex;
	align-items: center;
	padding: 0.65rem 1.05rem;
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius);
	background: color-mix(in srgb, var(--dvv-white) 6%, transparent);
	color: var(--dvv-white);
	font-family: var(--dvv-display);
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
}

.dvv-slotcta__tweede:hover { color: var(--dvv-white); border-color: color-mix(in srgb, var(--dvv-cyan) 55%, transparent); }

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

/* ------------------------------------------------------ voorbeelden --- */

/*
 * Eén raster in plaats van kaarten met een detailpagina erachter. De eerste
 * foto krijgt vier vakken en staande foto's er twee onder elkaar, zodat het
 * geen blokjespatroon wordt.
 */
.dvv-galerij {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 11rem;
	/* Dense vult de gaten die een grote of hoge tegel achterlaat. */
	grid-auto-flow: dense;
	gap: 0.9rem;
}

.dvv-galerij__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 14px;
	border: 1px solid var(--dvv-rand);
	background: var(--dvv-panel);
	text-decoration: none;
	color: inherit;
	cursor: zoom-in;
}

.dvv-galerij__item--groot { grid-column: span 2; grid-row: span 2; }
.dvv-galerij__item--hoog  { grid-row: span 2; }

.dvv-galerij__beeld {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.5s ease;
}

.dvv-galerij__item:hover .dvv-galerij__beeld,
.dvv-galerij__item:focus-visible .dvv-galerij__beeld { transform: scale(1.06); }

.dvv-galerij__item--hoog .dvv-galerij__beeld { object-position: center 60%; }

.dvv-galerij__soort {
	position: absolute;
	inset-block-start: 0.7rem;
	inset-inline-start: 0.7rem;
	z-index: 2;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	background: color-mix(in srgb, #000 58%, transparent);
	backdrop-filter: blur(6px);
	border: 1px solid color-mix(in srgb, var(--dvv-white) 18%, transparent);
	font-size: 0.72rem;
	font-weight: 600;
}

.dvv-galerij__vergroot {
	position: absolute;
	inset-block-start: 0.7rem;
	inset-inline-end: 0.7rem;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 9px;
	background: color-mix(in srgb, #000 58%, transparent);
	border: 1px solid color-mix(in srgb, var(--dvv-white) 18%, transparent);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.dvv-galerij__item:hover .dvv-galerij__vergroot,
.dvv-galerij__item:focus-visible .dvv-galerij__vergroot { opacity: 1; }

.dvv-galerij__bij {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 2.2rem 0.9rem 0.85rem;
	background: linear-gradient(transparent, color-mix(in srgb, var(--dvv-night-deep) 94%, transparent));
	font-size: 0.85rem;
}

.dvv-galerij__bij strong { display: block; font-weight: 600; }

.dvv-galerij__bij span {
	display: block;
	margin-block-start: 0.15rem;
	color: var(--dvv-muted);
	font-size: 0.78rem;
}

/* --- de lightbox --- */

.dvv-galerij__licht {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 1.5rem;
	background: color-mix(in srgb, var(--dvv-night-deep) 95%, transparent);
	backdrop-filter: blur(8px);
}

.dvv-galerij__licht[hidden] { display: none; }

.dvv-galerij__licht figure { margin: 0; text-align: center; }

.dvv-galerij__licht img {
	max-width: min(60rem, 92vw);
	max-height: 74vh;
	border-radius: 12px;
	display: block;
}

.dvv-galerij__licht figcaption {
	margin-block-start: 0.9rem;
	font-size: 0.95rem;
	font-weight: 600;
}

.dvv-galerij__licht figcaption span {
	display: block;
	margin-block-start: 0.2rem;
	color: var(--dvv-muted);
	font-size: 0.85rem;
	font-weight: 400;
}

.dvv-galerij__sluit,
.dvv-galerij__pijl {
	position: absolute;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--dvv-rand);
	background: color-mix(in srgb, var(--dvv-white) 8%, transparent);
	color: var(--dvv-white);
	cursor: pointer;
	line-height: 1;
	transition: background 0.2s ease;
}

.dvv-galerij__sluit:hover,
.dvv-galerij__pijl:hover { background: color-mix(in srgb, var(--dvv-white) 16%, transparent); }

.dvv-galerij__sluit {
	inset-block-start: 1.35rem;
	inset-inline-end: 1.5rem;
	width: 2.6rem;
	height: 2.6rem;
	font-size: 1.4rem;
}

.dvv-galerij__pijl {
	inset-block-start: 50%;
	transform: translateY(-50%);
	width: 2.9rem;
	height: 2.9rem;
	font-size: 1.3rem;
}

.dvv-galerij__pijl--vorige   { inset-inline-start: 1.5rem; }
.dvv-galerij__pijl--volgende { inset-inline-end: 1.5rem; }

@media (max-width: 60rem) {
	.dvv-galerij { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 9rem; }
	.dvv-galerij__pijl { width: 2.4rem; height: 2.4rem; }
	.dvv-galerij__pijl--vorige   { inset-inline-start: 0.5rem; }
	.dvv-galerij__pijl--volgende { inset-inline-end: 0.5rem; }
	.dvv-galerij__licht { padding: 4rem 0.75rem 2rem; }
}

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

/* ---- één voorbeeld ---- */

.dvv-vb {
	display: grid;
	gap: clamp(1.75rem, 1rem + 3vw, 3rem);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 56rem) {
	.dvv-vb { grid-template-columns: 1.3fr 0.7fr; }
}

.dvv-vb__foto {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 14px;
	border: 1px solid var(--dvv-rand);
	box-shadow: 0 40px 70px -50px #000;
}

.dvv-vb__foto--leeg {
	display: grid;
	place-items: center;
	background: var(--dvv-panel);
	color: var(--dvv-muted);
	font-size: 0.875rem;
}

.dvv-vb__gegevens {
	margin: 0 0 1.5rem;
	display: grid;
	gap: 0.9rem;
	padding: 1.25rem;
	background: var(--dvv-panel);
	border: 1px solid var(--dvv-rand);
	border-radius: 14px;
}

.dvv-vb__gegevens dt {
	font-family: var(--dvv-pixel);
	font-size: 0.5625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dvv-cyan);
	margin-bottom: 0.15rem;
}

.dvv-vb__gegevens dd {
	margin: 0;
	color: var(--dvv-white);
	font-size: 0.9375rem;
}

.dvv-vb__tekst { color: var(--dvv-muted); line-height: 1.7; margin-bottom: 1.5rem; }
.dvv-vb__tekst p:last-child { margin-bottom: 0; }

/* ---- sfeerbeelden ---- */

.dvv-sfeer {
	display: grid;
	gap: 0.85rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.dvv-sfeer__item {
	margin: 0;
	aspect-ratio: 4 / 5;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--dvv-rand);
	display: grid;
}

.dvv-sfeer__item img {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.dvv-sfeer__item:hover img { transform: scale(1.03); }

/* ---- paginering ---- */

.pagination, .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--dvv-ruimte-blok);
}

.pagination .page-numbers,
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius);
	color: var(--dvv-muted);
	text-decoration: none;
}

.pagination .page-numbers.current,
.nav-links .page-numbers.current {
	background: color-mix(in srgb, var(--dvv-neon) 22%, transparent);
	border-color: color-mix(in srgb, var(--dvv-neon) 55%, transparent);
	color: var(--dvv-white);
}

@media (prefers-reduced-motion: reduce) {
	.dvv-sfeer__item img { transition: none; }
	.dvv-sfeer__item:hover img { transform: none; }
}

/* -------------------------------------------------------- provincies --- */

.dvv-regio {
	display: grid;
	gap: clamp(2rem, 1rem + 3vw, 3.5rem);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 56rem) {
	.dvv-regio { grid-template-columns: 1.4fr 0.6fr; }

	.dvv-regio__zij {
		position: sticky;
		top: calc(var(--dvv-kophoogte) + 1.5rem);
	}
}

.dvv-regio__tekst { max-width: 46rem; color: var(--dvv-muted); line-height: 1.75; }
.dvv-regio__tekst h2 { color: var(--dvv-white); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin: 2rem 0 0.7rem; }
.dvv-regio__tekst h3 { color: var(--dvv-white); font-size: 1.125rem; margin: 1.5rem 0 0.5rem; }
.dvv-regio__tekst p  { margin-bottom: 1.1em; }
.dvv-regio__tekst ul { margin: 0 0 1.2em 1.1em; display: grid; gap: 0.4rem; }

.dvv-regio__kaart {
	padding: 1.4rem;
	background: var(--dvv-panel);
	border: 1px solid var(--dvv-rand);
	border-radius: 14px;
}

.dvv-regio__kaart .dvv-zijlabel { margin-top: 0; }
.dvv-regio__kaart .dvv-vb__gegevens { background: none; border: 0; padding: 0; margin-bottom: 1.25rem; }

/* ---- doorlinken naar andere provincies ---- */

.dvv-buren {
	display: grid;
	gap: 0.85rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.dvv-buur {
	display: block;
	padding: 1.1rem 1.25rem;
	background: var(--dvv-panel);
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius-lg);
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

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

.dvv-buur__naam {
	display: block;
	font-family: var(--dvv-display);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--dvv-white);
}

.dvv-buur__meta { display: block; color: var(--dvv-muted); font-size: 0.8125rem; margin-top: 0.15rem; }

.dvv-buur--alle {
	background:
		radial-gradient(120% 140% at 0% 0%,
			color-mix(in srgb, var(--dvv-neon) 22%, transparent), transparent 70%),
		var(--dvv-panel);
}

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

/* -------------------------------------------------- hero provincie --- */

/*
 * De provinciepagina krijgt een eigen kop en niet de gewone paginakop. Iemand
 * die via Google op "dansvloer huren gelderland" binnenkomt heeft drie vragen:
 * komen jullie hier, wat kost het rijden en hoe snel kan het. Die staan hier
 * boven de vouw in plaats van halverwege de tekst.
 */
.dvv-regiohero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(70% 90% at 8% 0%,
			color-mix(in srgb, var(--dvv-neon) 30%, transparent), transparent 65%),
		radial-gradient(60% 80% at 92% 30%,
			color-mix(in srgb, var(--dvv-cyan) 16%, transparent), transparent 70%),
		var(--dvv-night-deep);
	border-bottom: 1px solid var(--dvv-rand);
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0;
}

.dvv-regiohero__binnen {
	display: grid;
	gap: clamp(2rem, 1rem + 3vw, 3rem);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 62rem) {
	.dvv-regiohero__binnen { grid-template-columns: 1.25fr 0.75fr; }
}

.dvv-regiohero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--dvv-cyan) 40%, transparent);
	background: color-mix(in srgb, var(--dvv-cyan) 10%, transparent);
	font-family: var(--dvv-pixel);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dvv-cyan);
	margin-bottom: 1rem;
}

.dvv-regiohero h1 {
	font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.25rem);
	margin-bottom: 0.6rem;
	max-width: 18ch;
}

.dvv-regiohero__intro {
	color: var(--dvv-muted);
	font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
	line-height: 1.7;
	max-width: 46rem;
	margin: 0 0 1.5rem;
}

.dvv-regiohero__knoppen { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Een klein stukje vloer in perspectief, kleiner dan op de homepage zodat de
   twee pagina's niet hetzelfde beeld gebruiken. */
.dvv-regiohero__vloer {
	display: none;
	grid-template-columns: repeat(6, 38px);
	gap: 4px;
	justify-content: center;
	transform: perspective(800px) rotateX(54deg) rotateZ(-42deg);
	filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.55));
}

@media (min-width: 62rem) { .dvv-regiohero__vloer { display: grid; } }

.dvv-regiohero__vloer span {
	aspect-ratio: 1;
	border-radius: 2px;
	animation: hp-puls 6s ease-in-out infinite;
	opacity: 0.35;
}

@keyframes hp-puls {
	0%, 100% { opacity: 0.28; }
	50%      { opacity: 1; }
}

/* ---- de feitenbalk onder de hero ---- */

.dvv-regiohero__feiten {
	display: grid;
	gap: 1px;
	margin: clamp(1.75rem, 1rem + 2vw, 2.75rem) 0 0;
	background: var(--dvv-rand);
	border: 1px solid var(--dvv-rand);
	border-radius: var(--dvv-radius-lg) var(--dvv-radius-lg) 0 0;
	border-bottom: 0;
	overflow: hidden;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.dvv-regiohero__feiten > div {
	background: var(--dvv-night);
	padding: 1rem 1.15rem;
}

.dvv-regiohero__feiten dt {
	font-family: var(--dvv-pixel);
	font-size: 0.5625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dvv-cyan);
	margin-bottom: 0.25rem;
}

.dvv-regiohero__feiten dd {
	margin: 0;
	color: var(--dvv-white);
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* ---- plaatsen als pillen ---- */

.dvv-plaatsen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.dvv-plaatsen li {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	border-radius: 999px;
	background: var(--dvv-panel);
	border: 1px solid var(--dvv-rand);
}

.dvv-plaatsen .dvv-regio__naam { color: var(--dvv-white); font-weight: 600; font-size: 0.9375rem; }
.dvv-plaatsen .dvv-regio__afstand { color: var(--dvv-muted); font-size: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
	.dvv-regiohero__vloer span { animation: none; opacity: 0.6; }
}

/* De vragenkaart op een provinciepagina blijft smaller dan de tekstkolom,
   zodat een uitgeklapt antwoord niet over de volle breedte gaat lopen. */
.dvv-faq__kaart--smal { max-width: 48rem; }

/* ----------------------------------------------------------- funnel --- */

.dvv-funnel {
	display: grid;
	gap: clamp(2rem, 1rem + 3vw, 3rem);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 62rem) {
	.dvv-funnel { grid-template-columns: 1.5fr 0.5fr; }

	.dvv-funnel__zij {
		position: sticky;
		top: calc(var(--dvv-kophoogte) + 1.5rem);
	}
}

.dvv-stap h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin-bottom: 0.4rem; }
.dvv-stap__uitleg { color: var(--dvv-muted); margin-bottom: 1.5rem; max-width: 44rem; }

/* ---- keuzekaarten ---- */

.dvv-keuzes {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.dvv-keuze {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	background: var(--dvv-panel);
	border: 1px solid var(--dvv-rand);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.dvv-keuze:hover { border-color: color-mix(in srgb, var(--dvv-neon) 40%, transparent); }

.dvv-keuze.is-gekozen {
	border-color: var(--dvv-neon);
	background: color-mix(in srgb, var(--dvv-neon) 12%, var(--dvv-panel));
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--dvv-neon) 45%, transparent);
}

/* Het invoerveld zelf is onzichtbaar maar wel bereikbaar met het toetsenbord:
   de kaart eromheen is het klikbare vlak. */
.dvv-keuze input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.dvv-keuze:has( input:focus-visible ) {
	outline: 2px solid var(--dvv-neon);
	outline-offset: 2px;
}

.dvv-keuze__tekst { display: grid; gap: 0.2rem; }
.dvv-keuze__tekst strong { font-family: var(--dvv-display); font-size: 1rem; color: var(--dvv-white); }
.dvv-keuze__tekst > span { color: var(--dvv-muted); font-size: 0.875rem; line-height: 1.5; }

.dvv-keuze__tekst ul {
	list-style: none;
	margin: 0.4rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.2rem;
	color: var(--dvv-muted);
	font-size: 0.8125rem;
}

.dvv-keuze__tekst li::before { content: "✓ "; color: var(--dvv-lime); }

.dvv-keuze__prijs {
	flex: none;
	font-family: var(--dvv-display);
	font-weight: 700;
	color: var(--dvv-white);
	font-size: 0.9375rem;
	white-space: nowrap;
}

/* ---- velden ---- */

/*
 * Deze wikkel heet bewust .dvv-invoer en niet .dvv-veld. Die laatste bestond
 * al in dit thema en stijlt het invoerveld zelf: achtergrond, rand, padding.
 * Door dezelfde naam te gebruiken kreeg het omhulsel om label plus veld die
 * opmaak, en zat elk veld in een tweede donkere kaart.
 *
 * De opmaak volgt de contactpagina: label erboven, veld eronder, verder niets.
 */
.dvv-velden {
	display: grid;
	gap: 1.05rem 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dvv-invoer {
	grid-column: 1 / -1;
	display: grid;
	gap: 0.4rem;
	background: none;
	border: 0;
	padding: 0;
}

@media (min-width: 34rem) { .dvv-invoer--half { grid-column: span 1; } }

.dvv-invoer > span {
	color: var(--dvv-white);
	font-weight: 600;
	font-size: 0.9375rem;
}

.dvv-invoer em { color: var(--dvv-magenta); font-style: normal; }

.dvv-invoer input,
.dvv-invoer textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	background: color-mix(in srgb, var(--dvv-night-deep) 65%, transparent);
	border: 1px solid var(--dvv-rand);
	border-radius: 10px;
	color: var(--dvv-white);
	font-family: var(--dvv-body);
	font-size: 1rem;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.dvv-invoer input::placeholder,
.dvv-invoer textarea::placeholder { color: color-mix(in srgb, var(--dvv-muted) 75%, transparent); }

.dvv-invoer input:focus,
.dvv-invoer textarea:focus {
	outline: none;
	border-color: var(--dvv-neon);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dvv-neon) 25%, transparent);
}

.dvv-invoer textarea { min-height: 7rem; resize: vertical; }

/* De datumkiezer van de browser is standaard zwart op zwart. */
.dvv-invoer input[type="date"] { color-scheme: dark; }

.dvv-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.dvv-afstandsmelding {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.875rem;
	color: var(--dvv-muted);
	min-height: 1.2em;
}

.dvv-afstandsmelding.is-goed { color: var(--dvv-lime); }
.dvv-afstandsmelding.is-fout { color: var(--dvv-amber); }

/* ---- knoppen en meldingen ---- */

.dvv-funnel__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--dvv-ruimte-blok);
}

.dvv-funnel__fout {
	margin: 1rem 0 0;
	padding: 0.8rem 1rem;
	border: 1px solid color-mix(in srgb, var(--dvv-magenta) 45%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, var(--dvv-magenta) 10%, transparent);
	color: var(--dvv-white);
	font-size: 0.9375rem;
}

.dvv-funnel__klaar {
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border: 1px solid color-mix(in srgb, var(--dvv-lime) 40%, transparent);
	border-radius: 14px;
	background: color-mix(in srgb, var(--dvv-lime) 8%, transparent);
}

.dvv-funnel__klaar h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.dvv-funnel__klaar p { color: var(--dvv-muted); margin-bottom: 1.25rem; }

/* ---- overzicht ---- */

.dvv-overzicht {
	padding: 1.4rem;
	background: var(--dvv-panel);
	border: 1px solid var(--dvv-rand);
	border-radius: 14px;
}

.dvv-overzicht .dvv-zijlabel { margin-top: 0; }

.dvv-overzicht__regels { margin: 0 0 1rem; display: grid; gap: 0.6rem; }

.dvv-overzicht__regels > div {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.875rem;
}

.dvv-overzicht__regels dt { color: var(--dvv-muted); margin: 0; }
.dvv-overzicht__regels dd { color: var(--dvv-white); margin: 0; white-space: nowrap; }
.dvv-overzicht__leeg { color: var(--dvv-muted); font-size: 0.875rem; }

.dvv-overzicht__totaal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--dvv-rand);
	color: var(--dvv-white);
}

.dvv-overzicht__totaal strong { font-family: var(--dvv-display); font-size: 1.4rem; }
.dvv-overzicht__btw { margin: 0.25rem 0 0; color: var(--dvv-muted); font-size: 0.75rem; }

.dvv-overzicht__klein {
	margin: 1rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--dvv-rand);
	color: var(--dvv-muted);
	font-size: 0.75rem;
	line-height: 1.5;
}

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

/* ------------------------------------------------- kale kop en voet --- */

.dvv-kaalkop {
	border-bottom: 1px solid var(--dvv-rand);
	background: color-mix(in srgb, var(--dvv-night-deep) 92%, transparent);
	backdrop-filter: blur(10px);
	position: sticky;
	top: 0;
	z-index: 90;
}

.dvv-kaalkop__binnen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.8rem;
}

.dvv-kaalkop__terug {
	color: var(--dvv-muted);
	text-decoration: none;
	font-size: 0.875rem;
}

.dvv-kaalkop__terug:hover { color: var(--dvv-white); }

.dvv-kaalvoet {
	border-top: 1px solid var(--dvv-rand);
	background: var(--dvv-night-deep);
	margin-top: var(--dvv-ruimte-sectie);
}

.dvv-kaalvoet__binnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding-block: 1.25rem;
	color: var(--dvv-muted);
	font-size: 0.8125rem;
}

.dvv-kaalvoet p { margin: 0; }
.dvv-kaalvoet a { color: var(--dvv-white); text-decoration: none; }
.dvv-kaalvoet a:hover { color: var(--dvv-cyan); }

.dvv-kaalvoet__rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }

.dvv-kaalvoet__juridisch {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- eigen hero van de boekingspagina ---- */

.dvv-boekhero {
	background:
		radial-gradient(60% 100% at 50% 0%,
			color-mix(in srgb, var(--dvv-neon) 26%, transparent), transparent 70%),
		var(--dvv-night-deep);
	border-bottom: 1px solid var(--dvv-rand);
	text-align: center;
}

.dvv-boekhero__binnen { padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); }

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

.dvv-boekhero h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem); margin-bottom: 0.2rem; }

.dvv-boekhero__tagline {
	margin: 0;
	font-family: var(--dvv-display);
	font-weight: 700;
	font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.5rem);
	color: var(--dvv-neon-soft);
}

/* ---- stappen onder elkaar, elk in een eigen container ---- */

/*
 * Elke stap is een kaart. Bij een gesloten stap dimmen we alleen de inhoud en
 * niet de hele kaart: een half doorzichtig blok leest als iets dat stuk is,
 * terwijl een volle kaart met een grijze inhoud leest als iets dat straks aan
 * de beurt is. Dat verschil bepaalt of iemand doorgaat of wegklikt.
 */
.dvv-stap {
	position: relative;
	overflow: hidden;
	margin-bottom: 1rem;
	padding: clamp(1.25rem, 1rem + 1.5vw, 1.9rem);
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--dvv-panel) 96%, var(--dvv-white)),
		var(--dvv-panel) 60%);
	border: 1px solid var(--dvv-rand);
	border-radius: 16px;
	box-shadow: 0 24px 48px -40px #000;
	scroll-margin-top: 5.5rem;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Een haarlijn bovenlangs markeert de stap die aan de beurt is. Subtieler dan
   een gekleurde rand rondom, en het houdt de kaarten onderling rustig. */
.dvv-stap::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--dvv-neon), var(--dvv-cyan), transparent);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.dvv-stap.is-open:not(.is-af)::before { opacity: 0.9; }

.dvv-stap.is-open:not(.is-af) {
	border-color: color-mix(in srgb, var(--dvv-neon) 30%, transparent);
	box-shadow: 0 24px 48px -36px color-mix(in srgb, var(--dvv-neon) 70%, transparent);
}

.dvv-stap.is-af { border-color: color-mix(in srgb, var(--dvv-lime) 28%, transparent); }

.dvv-stap.is-slot { box-shadow: none; }

.dvv-stap__kop {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding-bottom: 1.1rem;
	margin-bottom: 1.35rem;
	border-bottom: 1px solid var(--dvv-rand);
}

.dvv-stap__nummer {
	flex: none;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	border: 1px solid var(--dvv-rand);
	font-family: var(--dvv-pixel);
	font-size: 0.6875rem;
	color: var(--dvv-muted);
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.dvv-stap.is-open:not(.is-af) .dvv-stap__nummer {
	background: linear-gradient(135deg, var(--dvv-neon), var(--dvv-magenta));
	border-color: transparent;
	color: #fff;
}

.dvv-stap.is-af .dvv-stap__nummer {
	border-color: color-mix(in srgb, var(--dvv-lime) 55%, transparent);
	color: var(--dvv-lime);
	font-size: 0;
}

.dvv-stap.is-af .dvv-stap__nummer::before { content: "✓"; font-size: 0.95rem; }

.dvv-stap__kop h2 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); margin-bottom: 0.2rem; }
.dvv-stap__uitleg { color: var(--dvv-muted); margin: 0; font-size: 0.9375rem; line-height: 1.55; }

/* Het slotje, alleen zichtbaar zolang de stap dicht is. */
.dvv-stap__slot {
	flex: none;
	width: 1.4rem;
	height: 1.4rem;
	margin-inline-start: auto;
	opacity: 0;
	transition: opacity 0.2s ease;
	background: currentColor;
	color: var(--dvv-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 018 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 018 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dvv-stap.is-slot .dvv-stap__slot { opacity: 1; }

/*
 * Een gesloten stap klapt in tot alleen zijn kop. Eerst dimden we de inhoud,
 * maar dan blijft de pagina even lang en scrol je door zes accessoires die je
 * nog niet mag kiezen. Ingeklapt zie je in één oogopslag hoeveel stappen er
 * zijn en waar je bent.
 */
.dvv-stap.is-slot {
	padding-block: 0.9rem;
	box-shadow: none;
}

.dvv-stap.is-slot .dvv-stap__kop {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
	align-items: center;
}

.dvv-stap.is-slot .dvv-stap__kop h2 { font-size: 1rem; margin-bottom: 0; opacity: 0.75; }

/* De uitleg hoort bij het invullen, niet bij het wachten. */
.dvv-stap.is-slot .dvv-stap__uitleg { display: none; }

.dvv-stap.is-slot .dvv-stap__nummer {
	width: 1.6rem;
	height: 1.6rem;
	font-size: 0.5625rem;
}

.dvv-stap.is-slot .dvv-keuzes,
.dvv-stap.is-slot .dvv-velden,
.dvv-stap.is-slot .dvv-afstandsmelding { display: none; }

.dvv-overzicht__gerust {
	list-style: none;
	margin: 1rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--dvv-rand);
	display: grid;
	gap: 0.45rem;
	font-size: 0.8125rem;
	color: var(--dvv-white);
}

.dvv-overzicht__gerust li { display: flex; align-items: center; gap: 0.45rem; }
.dvv-overzicht__gerust li::before { content: "✓"; color: var(--dvv-lime); }

@media (prefers-reduced-motion: reduce) {
	.dvv-stap, .dvv-stap__slot { transition: none; }
}

/* Waarschuwing bij voorbeeldbedragen. Dezelfde amber als elders op de site,
   zodat het overal hetzelfde signaal is: dit is nog niet definitief. */
.dvv-voorbeeldmelding {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 var(--dvv-ruimte-blok);
	padding: 0.85rem 1.1rem;
	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.875rem;
}

/* "optioneel" achter een label: kleiner en gedempt, zodat het verschil met de
   verplichte velden meteen zichtbaar is zonder een tweede kleur te gebruiken. */
.dvv-invoer > span small {
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--dvv-muted);
}

/* ----------------------------------------------------- bevestiging --- */

.dvv-bevestiging {
	display: grid;
	gap: clamp(1.75rem, 1rem + 3vw, 3rem);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 62rem) {
	.dvv-bevestiging { grid-template-columns: 1.5fr 0.5fr; }
}

.dvv-bevestiging__blok {
	padding: clamp(1.25rem, 1rem + 1.5vw, 1.9rem);
	background: var(--dvv-panel);
	border: 1px solid var(--dvv-rand);
	border-radius: 16px;
	margin-bottom: 1rem;
}

.dvv-bevestiging__blok h2 { font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem); margin-bottom: 1.1rem; }

/* De stappen die nog komen. Genummerd, want dat maakt zichtbaar dat er een
   volgorde in zit en dat wachten iets oplevert. */
.dvv-stappenlijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.1rem;
	counter-reset: stap;
}

.dvv-stappenlijst li {
	position: relative;
	padding-inline-start: 2.6rem;
	counter-increment: stap;
}

.dvv-stappenlijst li::before {
	content: counter( stap );
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	display: grid;
	place-items: center;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--dvv-neon) 50%, transparent);
	background: color-mix(in srgb, var(--dvv-neon) 14%, transparent);
	color: var(--dvv-neon-soft);
	font-family: var(--dvv-pixel);
	font-size: 0.625rem;
}

.dvv-stappenlijst strong { display: block; color: var(--dvv-white); font-size: 1rem; margin-bottom: 0.15rem; }
.dvv-stappenlijst span { color: var(--dvv-muted); font-size: 0.9375rem; line-height: 1.6; }

.dvv-bevestiging__nb {
	margin: 1.5rem 0 0;
	padding: 0.85rem 1.1rem;
	border-radius: var(--dvv-radius);
	background: color-mix(in srgb, var(--dvv-lime) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--dvv-lime) 35%, transparent);
	color: var(--dvv-white);
	font-size: 0.875rem;
}

.dvv-bevestiging__gegevens { margin: 0; display: grid; gap: 0.85rem; }

.dvv-bevestiging__gegevens > div {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.1rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--dvv-rand);
}

@media (min-width: 34rem) {
	.dvv-bevestiging__gegevens > div { grid-template-columns: 11rem 1fr; gap: 1rem; }
}

.dvv-bevestiging__gegevens > div:last-child { border-bottom: 0; padding-bottom: 0; }
.dvv-bevestiging__gegevens dt { color: var(--dvv-muted); font-size: 0.875rem; margin: 0; }
.dvv-bevestiging__gegevens dd { color: var(--dvv-white); margin: 0; font-size: 0.9375rem; }

.dvv-bevestiging__bericht { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--dvv-rand); }
.dvv-bevestiging__bericht h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.dvv-bevestiging__bericht p { color: var(--dvv-muted); line-height: 1.7; margin: 0; }

.dvv-bevestiging__contact {
	margin-top: 1rem;
	padding: 1.25rem 1.4rem;
	background: var(--dvv-panel);
	border: 1px solid var(--dvv-rand);
	border-radius: 14px;
	display: grid;
	gap: 0.4rem;
}

.dvv-bevestiging__contact h3 { font-size: 1rem; margin-bottom: 0.1rem; }
.dvv-bevestiging__contact p { color: var(--dvv-muted); font-size: 0.875rem; margin: 0 0 0.4rem; }
.dvv-bevestiging__contact a { color: var(--dvv-cyan); text-decoration: none; font-size: 0.9375rem; }
.dvv-bevestiging__contact a:hover { text-decoration: underline; }

.dvv-bevestiging__leeg {
	max-width: 40rem;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	background: var(--dvv-panel);
	border: 1px solid var(--dvv-rand);
	border-radius: 16px;
}

.dvv-bevestiging__leeg p { color: var(--dvv-muted); margin-bottom: 1.25rem; }

/* De hero van een feestsoort krijgt cyaan als hoofdaccent in plaats van paars,
   zodat je aan de kleur ziet dat je op een ander soort pagina zit. */
.dvv-regiohero--feest {
	background:
		radial-gradient(70% 90% at 8% 0%,
			color-mix(in srgb, var(--dvv-cyan) 22%, transparent), transparent 65%),
		radial-gradient(60% 80% at 92% 30%,
			color-mix(in srgb, var(--dvv-magenta) 16%, transparent), transparent 70%),
		var(--dvv-night-deep);
}

.dvv-tips { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.9rem; }
.dvv-tips strong { display: block; color: var(--dvv-white); font-size: 0.9375rem; margin-bottom: 0.1rem; }
.dvv-tips span { color: var(--dvv-muted); font-size: 0.875rem; line-height: 1.55; }

/* ------------------------------------------------------- matentabel --- */

/* Een tabel is op mobiel altijd te breed; hij schuift daarom mee in plaats van
   de pagina scheef te trekken. */
.dvv-tabelwikkel { overflow-x: auto; }

.dvv-matentabel {
	width: 100%;
	min-width: 40rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.dvv-matentabel th,
.dvv-matentabel td {
	padding: 0.9rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--dvv-rand);
}

.dvv-matentabel thead th {
	font-family: var(--dvv-pixel);
	font-size: 0.5625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dvv-cyan);
	border-bottom-color: color-mix(in srgb, var(--dvv-cyan) 35%, transparent);
}

.dvv-matentabel tbody th { color: var(--dvv-white); font-weight: 700; font-family: var(--dvv-display); }
.dvv-matentabel td { color: var(--dvv-muted); }
.dvv-matentabel__prijs { color: var(--dvv-white); font-weight: 600; white-space: nowrap; }
.dvv-matentabel__prijs s { color: var(--dvv-muted); font-weight: 400; margin-inline-end: 0.35rem; }

.dvv-matentabel tr.is-uitgelicht { background: color-mix(in srgb, var(--dvv-neon) 10%, transparent); }

.dvv-matentabel__vlag {
	display: inline-block;
	margin-inline-start: 0.5rem;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--dvv-neon) 25%, transparent);
	color: var(--dvv-neon-soft);
	font-family: var(--dvv-body);
	font-size: 0.6875rem;
	font-weight: 600;
	vertical-align: middle;
}

/* ---- wisselende berichten in de topbalk ---- */

/*
 * De berichten liggen op elkaar en schuiven om beurten in beeld. Op elkaar en
 * niet achter elkaar in een rij: dan houdt de balk dezelfde hoogte, ongeacht
 * hoeveel berichten er staan of hoe lang ze zijn.
 */
.dvv-topbalk__spoor {
	position: relative;
	display: inline-block;
	min-height: 1.35em;
	overflow: hidden;
	vertical-align: middle;
}

.dvv-topbalk__bericht {
	display: block;
	transform: translateX(2.5rem);
	opacity: 0;
	transition: transform 0.45s cubic-bezier(0.22, 0.7, 0.2, 1), opacity 0.3s ease;
}

/* Alleen het eerste bericht neemt ruimte in; de rest ligt eroverheen. */
.dvv-topbalk__bericht:not(:first-child) {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
}

.dvv-topbalk__bericht.is-actief { transform: translateX(0); opacity: 1; }
.dvv-topbalk__bericht.is-weg    { transform: translateX(-2.5rem); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.dvv-topbalk__bericht { transition: opacity 0.2s ease; transform: none; }
	.dvv-topbalk__bericht.is-weg { transform: none; }
}

/*
 * De knop onderaan het uitschuifmenu.
 *
 * Die deelt zijn klasse met de knop in de balk, en die wordt op smalle
 * schermen juist kleiner gemaakt om naast het logo te passen. In het paneel is
 * er ruimte zat en is dit het enige waar iemand op moet drukken, dus hier gaat
 * hij een maat omhoog. Deze regels staan achteraan zodat ze de verkleining uit
 * de mediaregels overschrijven.
 */
.dvv-mobiel__voet .dvv-header__cta,
.dvv-header__cta--breed {
	display: flex;
	width: 100%;
	padding: 1.15rem 1.25rem;
	font-size: 1.0625rem;
	letter-spacing: 0.01em;
	border-radius: var(--dvv-radius);
	box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--dvv-neon) 90%, transparent);
}

/* --- Cookietoestemming ---------------------------------------------------- */

.dvv-cookie {
	position: fixed;
	z-index: 9999;
	inset-inline-start: 1.4rem;
	inset-block-end: 1.4rem;
	inline-size: min(35rem, calc(100vw - 2.8rem));
	padding: 1.25rem 1.25rem 1.1rem;
	border: 1px solid var(--dvv-rand);
	border-radius: 1rem;
	background: rgba(11, 14, 40, 0.97);
	box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.55);
	color: var(--dvv-white);
	animation: dvv-cookie-op 0.28s ease both;
}

@keyframes dvv-cookie-op {
	from { opacity: 0; transform: translateY(0.75rem); }
}

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

.dvv-cookie--paneel { inline-size: min(38rem, calc(100vw - 2.8rem)); }

.dvv-cookie__kop {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-block-end: 0.5rem;
}

.dvv-cookie__kop h2 {
	margin: 0;
	font-size: 1rem;
	letter-spacing: -0.01em;
}

.dvv-cookie__tekst {
	margin: 0 0 1rem;
	font-size: 0.845rem;
	color: var(--dvv-muted);
	line-height: 1.55;
}

.dvv-cookie__tekst a {
	color: var(--dvv-neon-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dvv-cookie__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

.dvv-cookie__knoppen--voet { margin-block-start: 1.1rem; }

.dvv-cookie__knop {
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	border-radius: 0.625rem;
	padding: 0.7rem 1.1rem;
	border: 1px solid transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/*
 * Accepteren en weigeren krijgen bewust hetzelfde formaat. Weigeren moet net
 * zo makkelijk zijn als accepteren; een grote gekleurde ja-knop naast een grijs
 * linkje is precies waar de Autoriteit Persoonsgegevens op handhaaft.
 */
.dvv-cookie__knop--ja {
	background: linear-gradient(120deg, var(--dvv-neon), var(--dvv-magenta));
	color: #fff;
}

.dvv-cookie__knop--nee {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--dvv-rand);
	color: var(--dvv-white);
}

.dvv-cookie__knop--tekst {
	background: none;
	color: var(--dvv-muted);
	padding-inline: 0.4rem;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dvv-cookie__knop--tekst:hover { color: var(--dvv-white); }

.dvv-cookie__knop:focus-visible {
	outline: 2px solid var(--dvv-cyan);
	outline-offset: 2px;
}

.dvv-cookie__regel {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
	padding-block: 0.9rem;
	border-block-start: 1px solid var(--dvv-rand);
}

.dvv-cookie__regel:first-of-type { border-block-start: none; }

.dvv-cookie__regeltekst { flex: 1; }

.dvv-cookie__regeltekst strong {
	display: block;
	font-size: 0.9rem;
	margin-block-end: 0.2rem;
}

.dvv-cookie__regeltekst span {
	font-size: 0.8125rem;
	color: var(--dvv-muted);
	line-height: 1.5;
}

.dvv-cookie__regeltekst em {
	display: inline-block;
	margin-block-start: 0.4rem;
	font-style: normal;
	font-size: 0.72rem;
	color: var(--dvv-muted);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--dvv-rand);
	border-radius: 0.375rem;
	padding: 0.1rem 0.5rem;
}

.dvv-cookie__schakel {
	flex: 0 0 auto;
	inline-size: 2.75rem;
	block-size: 1.55rem;
	border-radius: 99px;
	position: relative;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid var(--dvv-rand);
	padding: 0;
}

.dvv-cookie__schakel::after {
	content: "";
	position: absolute;
	inset-block-start: 2px;
	inset-inline-start: 2px;
	inline-size: 1.19rem;
	block-size: 1.19rem;
	border-radius: 50%;
	background: var(--dvv-muted);
	transition: 0.2s ease;
}

.dvv-cookie__schakel--aan {
	background: rgba(77, 227, 138, 0.28);
	border-color: rgba(77, 227, 138, 0.5);
}

.dvv-cookie__schakel--aan::after {
	inset-inline-start: 1.3rem;
	background: var(--dvv-lime);
}

.dvv-cookie__schakel--vast {
	background: rgba(255, 255, 255, 0.06);
	opacity: 0.65;
	cursor: default;
}

.dvv-cookie__schakel--vast::after { inset-inline-start: 1.3rem; }

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

/* Toestemming intrekken moet net zo makkelijk zijn als geven. */
.dvv-cookie__herstel {
	position: fixed;
	z-index: 9998;
	inset-inline-start: 1.1rem;
	inset-block-end: 1.1rem;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	cursor: pointer;
	color: var(--dvv-muted);
	background: rgba(11, 14, 40, 0.95);
	border: 1px solid var(--dvv-rand);
	box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.5);
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.dvv-cookie__herstel:hover,
.dvv-cookie__herstel:focus-visible {
	opacity: 1;
	color: var(--dvv-white);
}

@media (max-width: 40rem) {
	.dvv-cookie {
		inset-inline: 0.9rem;
		inset-block-end: 0.9rem;
		inline-size: auto;
	}

	.dvv-cookie__knop { flex: 1 1 auto; }
	.dvv-cookie__knop--tekst { flex-basis: 100%; }
}

/* --- Akkoord met de voorwaarden ------------------------------------------ */

.dvv-akkoord {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.95rem 1rem;
	border-radius: 0.75rem;
	border: 1px solid var(--dvv-rand);
	background: rgba(255, 255, 255, 0.03);
	margin-block: 1.4rem 1.1rem;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

/* Het echte vakje blijft bereikbaar voor toetsenbord en schermlezer. */
.dvv-akkoord input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.dvv-akkoord__vink {
	flex: 0 0 auto;
	inline-size: 1.375rem;
	block-size: 1.375rem;
	border-radius: 0.375rem;
	border: 1.5px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.04);
	display: grid;
	place-items: center;
	margin-block-start: 1px;
	color: #fff;
	transition: background 0.18s ease, border-color 0.18s ease;
}

.dvv-akkoord__vink svg {
	opacity: 0;
	transition: opacity 0.15s ease;
}

.dvv-akkoord input:checked + .dvv-akkoord__vink {
	background: linear-gradient(120deg, var(--dvv-neon), var(--dvv-magenta));
	border-color: transparent;
}

.dvv-akkoord input:checked + .dvv-akkoord__vink svg { opacity: 1; }

.dvv-akkoord input:focus-visible + .dvv-akkoord__vink {
	outline: 2px solid var(--dvv-cyan);
	outline-offset: 2px;
}

.dvv-akkoord__tekst {
	font-size: 0.875rem;
	line-height: 1.55;
}

.dvv-akkoord__tekst a {
	color: var(--dvv-neon-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dvv-akkoord__tekst small {
	display: block;
	color: var(--dvv-muted);
	font-size: 0.78rem;
	margin-block-start: 0.25rem;
}

/* Rood pas nadat iemand het echt heeft overgeslagen, niet meteen bij binnenkomst. */
.dvv-akkoord--fout {
	border-color: rgba(255, 92, 122, 0.55);
	background: rgba(255, 92, 122, 0.07);
}

/* --- Btw-vermelding bij prijzen ------------------------------------------- */

/*
 * Ondergeschikt aan het bedrag: het bedrag blijft de blikvanger, dit is de
 * verduidelijking eronder. Wettelijk moet een consument de totaalprijs zien,
 * en het voorkomt dat wij duurder lijken dan verhuurders die exclusief btw
 * adverteren.
 */
.dvv-btw {
	display: block;
	font-size: 0.72rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--dvv-muted);
	margin-block-start: 0.15rem;
}

.dvv-btw--kop {
	display: inline;
	margin-inline-start: 0.3rem;
	text-transform: none;
	letter-spacing: normal;
}

.dvv-btw--inline {
	display: inline;
	margin-inline-start: 0.35rem;
	margin-block-start: 0;
}

/* --- Kort antwoord bovenaan een pagina ----------------------------------- */

/*
 * Eén alinea die de vraag beantwoordt waarmee iemand binnenkomt. Google pakt
 * dit soort blokken voor het uitgelichte fragment, en een bezoeker die alleen
 * de prijs wil weten hoeft niet verder te scrollen.
 */

/* --- Doorverwijzingen onder een blok ------------------------------------- */

.dvv-doorlinks {
	max-inline-size: 52rem;
	margin-block: var(--dvv-ruimte-klein);
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--dvv-muted);
}

.dvv-doorlinks strong {
	color: var(--dvv-white);
	display: block;
	margin-block-end: 0.25rem;
}

.dvv-doorlinks a {
	color: var(--dvv-neon-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

/* Fotostrook op de feestsoort- en onderwerppagina's. */
.dvv-blok--fotos .dvv-blok__kop {
	margin-bottom: 1.5rem;
}

.dvv-fotostrook {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
}

.dvv-fotostrook__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 14px;
	text-decoration: none;
	background: rgba(255, 255, 255, .04);
	transition: transform .25s ease, box-shadow .25s ease;
}

.dvv-fotostrook__item:hover,
.dvv-fotostrook__item:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

.dvv-fotostrook__beeld {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.dvv-fotostrook__bij {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	gap: .1rem;
	padding: 1.4rem .9rem .8rem;
	color: #fff;
	font-size: .85rem;
	line-height: 1.3;
	background: linear-gradient(to top, rgba(10, 6, 20, .88), rgba(10, 6, 20, 0));
}

.dvv-fotostrook__bij span {
	opacity: .82;
	font-size: .78rem;
}

.dvv-fotostrook__meer {
	margin: 1.1rem 0 0;
	font-size: .92rem;
}