/*
 * Discovloer, homepage v3
 *
 * Los van main.css en home.css, want dit is geen aanpassing maar een andere
 * richting. De oude opzet zet de hele site op nachtblauw met neon eroverheen;
 * hier is de basis licht en is paars het accent. Die twee door elkaar heen
 * laden geeft alleen maar gevechten over wie wint.
 *
 * Eén voorvoegsel: pv- (paars-versie). Zo kan dit bestand naast de oude CSS
 * bestaan zonder dat er ook maar één klasse botst.
 *
 * DE KLEURREGEL
 *
 * #B14CFF is de kleur uit het logo. Op wit haalt die maar 3,9:1 en dat is te
 * weinig voor lopende tekst. Daarom twee paarsen: de logo-kleur voor dingen
 * zónder tekst (lijntjes, bolletjes, randen, gloed) en op donkere vlakken, en
 * een diepere variant voor knoppen en links op licht. Zelfde familie, zelfde
 * tint, alleen donkerder gedraaid.
 */

/*
 * Poppins staat in theme.json en niet hier.
 *
 * Dit bestand laadt alleen op de omgezette pagina's, en de rest van de
 * site zet zijn koppen in hetzelfde lettertype. Stond de @font-face hier,
 * dan had de halve site een lettertype dat nergens wordt binnengehaald.
 *
 * Lokaal en niet via Google: dan gaat het IP-adres van elke bezoeker naar
 * Google voordat hij iets heeft aangeklikt, terwijl de cookiebanner zegt
 * dat er niets gebeurt zonder toestemming.
 */

:root {
	--pv-paars:        #B14CFF; /* logo. Accenten, nooit tekst op wit.      */
	--pv-paars-cta:    #7317CE; /* knoppen en links op licht. 7,7:1 op wit. */
	--pv-paars-hover:  #5A11A8;
	--pv-paars-diep:   #3B0F7A; /* de belangrijke secties.                  */
	--pv-paars-mist:   #F3EBFF; /* zacht vlak achter een accent.            */

	/*
	 * Oranje doet de actie, paars doet het merk. Twee kleuren die elkaar niet
	 * in de weg zitten: een paarse knop op een paarse sectie verdwijnt, een
	 * oranje knop nooit. Dit is dezelfde oranje die al als tegelkleur in het
	 * palet zat (#FF5A1F), dus het merk krijgt er geen kleur bij.
	 *
	 * Wit op deze oranje haalt 3,1:1. Dat is onder de norm van 4,5:1 voor
	 * gewone tekst; de knoptekst is daarom vet en minstens 16px, en bij
	 * twijfel kan --pv-oranje een tint donkerder.
	 */
	--pv-oranje:       #FF5A1F;
	--pv-oranje-hover: #E2440C;

	/*
	 * Goud, en alleen voor recensiesterren. Oranje is op deze pagina de kleur
	 * van "doe dit"; sterren zijn geen knop maar een cijfer. En iedereen kent
	 * gouden sterren, dus je leest ze zonder erbij na te denken. Ze hebben een
	 * tekstversie ernaast voor wie de pagina laat voorlezen, dus het lage
	 * contrast van goud op wit is hier geen bezwaar.
	 */
	/* Alleen het vinkje in de vergelijking. Donker genoeg om op wit en op het
	   lichtgroene rondje leesbaar te blijven: 5,0:1 en 4,4:1. */
	--pv-groen:      #15803D;
	--pv-groen-mist: #DCFCE7;

	--pv-goud:         #F5B301;

	--pv-inkt:         #141021; /* koppen en donkere secties.               */
	--pv-inkt-zacht:   #241C38;
	--pv-grijs:        #5A5568; /* lopende tekst. 7,2:1 op wit.             */
	--pv-grijs-licht:  #8B8698;

	--pv-wit:          #FFFFFF;
	/*
	 * Een tint dieper dan het eerste grijs. Op een scherm met weinig licht was
	 * #F6F5F9 niet van wit te onderscheiden, en dan valt de hele afwisseling
	 * tussen de secties weg terwijl hij wel in de code staat.
	 */
	--pv-mist:         #F3F1F7; /* de lichtgrijze secties.                  */
	--pv-rand:         #E6E3EE;

	/* Eén bron: staat in theme.json, zodat de hele site hetzelfde kopfont
	   heeft en een wissel daar ook hier aankomt. */
	--pv-display: var(--wp--preset--font-family--display);
	--pv-body:    var(--wp--preset--font-family--body);

	--pv-radius:    10px;
	--pv-radius-lg: 18px;
	--pv-radius-xl: 26px;

	/*
	 * Vier afstanden voor de hele pagina. Zodra elke sectie zijn eigen marge
	 * kiest ziet het oog geen ritme meer, ook al klopt elke sectie los van
	 * elkaar.
	 */
	/*
	 * Stond op maximaal 8rem. Dat is 128px boven én onder, dus 256px lucht
	 * tussen twee secties op een breed scherm: je scrollt dan langs een leeg
	 * scherm voordat de volgende kop begint. Nu maximaal 5,25rem, wat neerkomt
	 * op zo'n 170px ertussen. Genoeg om secties uit elkaar te houden, te weinig
	 * om een gat te zijn.
	 */
	--pv-sectie: clamp(3rem, 1.9rem + 3.4vw, 5.25rem);
	--pv-blok:   clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
	--pv-kop:    clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
	--pv-klein:  1rem;

	--pv-breed:  1240px;
	--pv-kop-h:  76px;
}

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

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

body.pv {
	margin: 0;
	background: var(--pv-wit);
	color: var(--pv-grijs);
	font-family: var(--pv-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

.pv h1, .pv h2, .pv h3, .pv h4 {
	font-family: var(--pv-display);
	color: var(--pv-inkt);
	line-height: 1.12;
	letter-spacing: -0.025em;
	margin: 0;
	font-weight: 700;
}

.pv h1 { font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.25rem); }
.pv h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); }
.pv h3 { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); }

.pv p { margin: 0; }
.pv img { max-width: 100%; height: auto; display: block; }

/*
 * Alleen losse links in lopende tekst. Eerst stond hier een kale `.pv a`, en
 * die won het van `.pv-knop--primair`: witte knoptekst werd paars op paars, en
 * de knoppen zagen eruit als lege pillen. Componenten bepalen hun eigen kleur,
 * dus die selector mag hier niet overheen kunnen walsen.
 *
 * `li > a` stond hier ook, en dat was de volgende versie van dezelfde fout: de
 * menu-items en de footerlinks zijn ook li > a, en die zijn zo maandenlang
 * paars geweest op een donkere balk. Een selector die op "alle links ergens in
 * een lijst" mikt, raakt altijd meer dan je bedoelt.
 */
.pv p > a,
.pv summary a { color: var(--pv-paars-cta); }

/*
 * Het vangnet. Een link zonder eigen klasse valt anders terug op het blauw van
 * de browser, en dat is precies wat er in de matentabel gebeurde: de maten
 * stonden er cyaan en onderstreept bij.
 *
 * Met :where() telt deze regel niet mee voor de specificiteit, dus elk
 * component dat zijn links zelf kleurt wint hier hoe dan ook van. Dat is het
 * verschil met de vorige poging, die juist overal overheen walste.
 */
:where(.pv-sectie, .pv-paginakop, .pv-hero) a:not([class]) {
	color: var(--pv-paars-cta);
}

/* Eén maat voor de inhoud, met een gutter die op elke breedte blijft staan. */
.pv-omhulsel {
	width: min(100% - 2.5rem, var(--pv-breed));
	margin-inline: auto;
}

@media (max-width: 480px) {
	.pv-omhulsel { width: min(100% - 2rem, var(--pv-breed)); }
}

.pv-sectie { padding-block: var(--pv-sectie); }
.pv-sectie--wit  { background: var(--pv-wit); }
.pv-sectie--mist { background: var(--pv-mist); }

/*
 * De twee zware secties. Die zijn paars omdat ze dat verdienen, niet omdat
 * paars leuk is: hier staat wat de bezoeker moet onthouden en wat hij moet
 * doen. Zet je er vier, dan valt geen van de vier meer op.
 */
/*
 * Het paarse vlak loopt van paars naar zwart.
 *
 * Eerst was het één effen paars met twee gloedjes eroverheen. Dat gaf wel
 * diepte maar bleef overal even paars, en dan blijft het een blok verf. Nu
 * loopt het vlak diagonaal weg: warm paars in de rechterbovenhoek, via een
 * dieper paars naar bijna zwart linksonder.
 *
 * Twee dingen winnen daarbij. De witte kaarten komen los van de achtergrond,
 * want ze staan grotendeels op het donkere deel. En de kop linksboven staat op
 * diep paars in plaats van op de lichte kern, waar het oranje labeltje eerder
 * wegviel; daar haalt het nu 5,3:1.
 */
.pv-sectie--paars {
	background:
		/* De lichte kern rechtsboven. */
		radial-gradient(125% 145% at 90% -22%,
			color-mix(in srgb, var(--pv-paars) 52%, transparent) 0%,
			color-mix(in srgb, var(--pv-paars) 14%, transparent) 42%,
			transparent 72%),
		/* En daaronder het verloop van paars naar zwart. */
		linear-gradient(205deg,
			var(--pv-paars-diep) 0%,
			#2C0A5C 34%,
			#150432 66%,
			#070113 100%);
	color: rgba(255, 255, 255, 0.78);
}

.pv-sectie--paars h2,
.pv-sectie--paars h3 { color: #fff; }

.pv-sectie--inkt {
	background: var(--pv-inkt);
	color: rgba(255, 255, 255, 0.72);
}

.pv-sectie--inkt h2,
.pv-sectie--inkt h3 { color: #fff; }

/* ---------------------------------------------------- kop van een blok -- */

/*
 * Het streepje vóór het labeltje. Dat ene lijntje is het enige wat elke
 * sectie met elkaar deelt, en daarom het goedkoopste stukje samenhang op de
 * hele pagina.
 */
.pv-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-family: var(--pv-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pv-paars-cta);
	margin-bottom: 1.1rem;
}

.pv-eyebrow::before {
	content: "";
	width: 2.25rem;
	height: 2px;
	background: var(--pv-paars);
	flex: none;
}

.pv-sectie--paars .pv-eyebrow,
.pv-sectie--inkt .pv-eyebrow { color: var(--pv-paars); }

.pv-sectie--paars .pv-eyebrow::before,
.pv-sectie--inkt .pv-eyebrow::before { background: var(--pv-paars); }

.pv-blokkop { max-width: 46rem; margin-bottom: var(--pv-kop); }
.pv-blokkop p { margin-top: 1.1rem; font-size: 1.0625rem; }

/* Eén woord in de kop gekleurd en schuin. Meer dan één en het valt niet meer op. */
.pv-accent {
	color: var(--pv-paars-cta);
	font-style: italic;
}

.pv-sectie--paars .pv-accent,
.pv-sectie--inkt .pv-accent { color: var(--pv-paars); }

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

.pv-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 1rem 1.75rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font-family: var(--pv-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease,
	            border-color 0.18s ease, transform 0.18s ease;
}

.pv-knop:hover { transform: translateY(-1px); }

.pv .pv-knop--primair {
	background: var(--pv-oranje);
	color: #fff;
}

.pv .pv-knop--primair:hover { background: var(--pv-oranje-hover); color: #fff; }

.pv .pv-knop--rand {
	background: transparent;
	border-color: var(--pv-rand);
	color: var(--pv-inkt);
}

.pv .pv-knop--rand:hover { border-color: var(--pv-paars); color: var(--pv-paars-cta); }

/* Op donkere vlakken draait de omgekeerde knop om: wit vlak, donkere tekst. */
.pv-sectie--paars .pv-knop--rand,
.pv-sectie--inkt .pv-knop--rand,
.pv-hero .pv-knop--rand {
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

.pv-sectie--paars .pv-knop--rand:hover,
.pv-sectie--inkt .pv-knop--rand:hover,
.pv-hero .pv-knop--rand:hover {
	border-color: #fff;
	background: #fff;
	color: var(--pv-inkt);
}

.pv-knop__pijl { font-size: 1.05em; line-height: 0; }

.pv-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

/* Een tekstlink die zich als een knop gedraagt, zonder het gewicht ervan. */
.pv .pv-tekstlink {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--pv-display);
	font-weight: 700;
	color: var(--pv-paars-cta);
	text-decoration: none;
}

.pv .pv-tekstlink:hover { text-decoration: underline; text-underline-offset: 4px; }

.pv-sectie--paars .pv-tekstlink,
.pv-sectie--inkt .pv-tekstlink { color: #fff; }

/* ============================================================ topbalk == */

/*
 * Het strookje boven de header.
 *
 * Dezelfde inkt als de balk eronder, maar met een paarse gloed die van
 * bovenaf naar binnen valt. Zonder die gloed worden het samen één hoge
 * zwarte band en verdwijnt het verschil tussen de actie en de navigatie.
 * De gloed is ook precies het paars van de homepage, dus het strookje
 * hoort er meteen bij in plaats van erboven te liggen.
 *
 * Hij plakt niet mee naar beneden: een actie lees je één keer, en de
 * header eronder heeft de schermruimte harder nodig.
 */
/*
 * Een wit strookje. Geen rand eronder: de header is donker, dus de
 * scheiding tekent zichzelf al.
 */
.pv-topbalk {
	position: relative;
	background: var(--pv-wit);
}

/*
 * De berichten liggen op elkaar in één vak van het raster, niet absoluut
 * gepositioneerd. Zo bepaalt het langste bericht de hoogte en verspringt de
 * pagina niet bij elke wissel.
 *
 * De marge staat hier met de hand op auto. Het omhulsel doet dat zelf ook,
 * maar een eigen margin-regel hieronder zou die stilletjes overschrijven en
 * dan staat de balk zestien pixels naar links.
 */
.pv-topbalk__spoor {
	display: grid;
	margin-block: 0;
	margin-inline: auto;
	padding-block: 0.7rem;
}

/*
 * Geen flexvak maar gewone tekst. Als flexvak werden het blad, het bedrag
 * en de losse woorden elk een eigen blokje, en op een smalle telefoon
 * brak de zin dan op drie plekken tegelijk af.
 */
.pv-topbalk__bericht {
	grid-area: 1 / 1;
	align-self: center;
	font-family: var(--pv-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	text-wrap: balance;
	line-height: 1.35;
	color: var(--pv-inkt);
	opacity: 0;
	transform: translateY(5px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none;
}

.pv-topbalk__bericht.is-actief {
	opacity: 1;
	transform: none;
}

/* Het bedrag zwart met een streep eronder. De streep doet het werk dat de
   kleur eerst deed. Hij staat een paar pixels lager dan normaal, anders
   raakt hij de poot van de 5 in dit formaat. */
.pv-topbalk__nadruk {
	color: var(--pv-inkt);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Wie beweging heeft uitgezet krijgt de wissel zonder schuif. De berichten
   wisselen dan nog wel: het is informatie, geen versiering. */
@media (prefers-reduced-motion: reduce) {
	.pv-topbalk__bericht { transform: none; transition: opacity 0.2s ease; }
}

@media (max-width: 560px) {
	.pv-topbalk__spoor { padding-block: 0.6rem; }
	.pv-topbalk__bericht {
		font-size: 0.6875rem;
		letter-spacing: 0.1em;
	}
}

/* ============================================================== header == */

.pv-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--pv-inkt);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pv-header__binnen {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--pv-kop-h);
}

.pv-logo img { height: 42px; width: auto; }

.pv-nav { margin-left: auto; }

.pv-nav ul {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Vol wit en niet op 82 procent. Dat laatste is bedoeld als rangorde, maar in
 * een balk waar alleen menu-items staan is er niets om rang aan te ontlenen:
 * het leest gewoon als grijzige tekst. De hover doet het werk nu met een
 * lijntje in plaats van met kleur.
 */
.pv-nav a {
	color: #fff;
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
	padding-block: 0.15rem;
	border-bottom: 2px solid transparent;
	transition: border-color 0.18s ease;
}

.pv-nav a:hover,
.pv-nav .current-menu-item > a { border-bottom-color: var(--pv-oranje); }

.pv-header__acties {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
}

.pv-nav + .pv-header__acties { margin-left: 0; }

.pv-header .pv-knop { padding: 0.75rem 1.35rem; font-size: 0.9375rem; }

.pv-burger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--pv-radius);
	background: transparent;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.pv-burger span {
	display: block;
	width: 18px;
	height: 2px;
	background: #fff;
}

@media (max-width: 1000px) {
	.pv-nav { display: none; }
	.pv-burger { display: flex; }

	/*
	 * En de knoppen weer helemaal naar rechts.
	 *
	 * Op een breed scherm duwt het menu zichzelf naar rechts en gaan de
	 * knoppen daar netjes achteraan; daarom staat hun eigen marge hierboven
	 * op nul. Maar het menu is hier verborgen en niet weg, dus die regel gold
	 * nog steeds en plakten de knoppen tegen het logo aan.
	 */
	.pv-nav + .pv-header__acties { margin-left: auto; }
}

/*
 * Op een telefoon blijft Reserveren gewoon in de balk staan.
 *
 * Hij stond hier eerst op display: none, omdat logo plus knop plus
 * menuknopje niet op 375 pixels leken te passen. Dat lost zich op door de
 * knop kleiner te maken in plaats van hem weg te halen: reserveren is het
 * enige dat iemand op deze site komt doen, dus die knop hoort in beeld.
 */
@media (max-width: 560px) {
	.pv-logo img { height: 30px; }
	.pv-header__binnen { gap: 0.6rem; }
	.pv-header__acties { gap: 0.5rem; }
	.pv-header .pv-knop {
		padding: 0.6rem 1rem;
		font-size: 0.875rem;
		white-space: nowrap;
	}
	.pv-burger { width: 40px; height: 40px; }
}

/* Het mobiele paneel hergebruikt menu.js, dus de data-attributen blijven. */
.pv-sluier {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: rgba(10, 8, 20, 0.6);
	opacity: 0;
	transition: opacity 0.28s ease;
}

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

.pv-paneel {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 80;
	width: min(88vw, 360px);
	padding: 1.25rem 1.5rem 2rem;
	background: var(--pv-inkt);
	transform: translateX(100%);
	transition: transform 0.28s ease;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	overflow-y: auto;
}

.pv-paneel.is-open { transform: none; }

.pv-paneel__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pv-paneel__sluit {
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--pv-radius);
	background: transparent;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.pv-paneel ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.pv-paneel nav a {
	display: block;
	padding: 0.8rem 0;
	color: #fff;
	text-decoration: none;
	font-family: var(--pv-display);
	font-size: 1.25rem;
	font-weight: 700;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/*
 * De twee knoppen onderin het menu, allebei over de volle breedte.
 *
 * Op een telefoon staat Reserveren niet in de balk bovenin: daar is geen
 * ruimte naast het logo en het menuknopje. Dit is dus de enige plek waar
 * iemand vanuit de navigatie naar de aanvraag kan, en dan moet hij niet
 * bescheiden in een hoek staan.
 */
.pv-paneel__voet {
	margin-top: auto;
	display: grid;
	gap: 0.75rem;
}

.pv-paneel__voet .pv-knop {
	width: 100%;
	justify-content: center;
}

/*
 * De knop met de rand is gemaakt voor een lichte ondergrond: zwarte tekst,
 * grijze rand. Het menupaneel is donker, dus stond het telefoonnummer daar
 * zwart op zwart en zag je een lege pil. Zelfde ingreep als bij de paarse
 * secties, waar dezelfde knop ook al een eigen kleur krijgt.
 */
.pv .pv-paneel .pv-knop--rand {
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.pv .pv-paneel .pv-knop--rand:hover {
	border-color: var(--pv-oranje);
	color: #fff;
}

html.dvv-menu-open, body.dvv-menu-open { overflow: hidden; }

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

.pv-hero {
	position: relative;
	background: var(--pv-inkt);
	color: rgba(255, 255, 255, 0.78);
	overflow: hidden;
	padding-block: clamp(3.5rem, 2rem + 7vw, 6.5rem);
}

/*
 * De foto is achtergrond en geen illustratie naast de tekst. Dat is wat een
 * hero professioneel maakt: één beeld, één boodschap, geen concurrentie om
 * de aandacht. Het verloop eroverheen bestaat niet om het mooi te maken maar
 * om de tekst leesbaar te houden op elk beeld.
 */
.pv-hero__beeld {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.pv-hero__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

.pv-hero__beeld::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg,
			rgba(20, 16, 33, 0.97) 0%,
			rgba(20, 16, 33, 0.92) 38%,
			rgba(20, 16, 33, 0.55) 68%,
			rgba(20, 16, 33, 0.35) 100%),
		/* Onderlangs extra donker: daar liggen de maatpillen en de cijfers,
		   en juist daar is de vloer op de foto op zijn felst. */
		linear-gradient(0deg,
			rgba(20, 16, 33, 0.92) 0%,
			rgba(20, 16, 33, 0.55) 22%,
			rgba(20, 16, 33, 0) 52%),
		linear-gradient(180deg, rgba(20, 16, 33, 0.5) 0%, rgba(20, 16, 33, 0) 35%);
}

.pv-hero__binnen { position: relative; z-index: 1; }
.pv-hero__tekst { max-width: 40rem; }

/*
 * De H1 is het labeltje en niet de grote zin. Dat is bewust: "LED dansvloer
 * huren in heel Nederland" is waar iemand op zoekt, de grote zin is waar hij
 * op blijft hangen. Een H1 hoeft niet het grootste op het scherm te zijn,
 * alleen het belangrijkste.
 *
 * Alle koppen krijgen via .pv h1 het displayfont en de inktkleur mee, en die
 * selector is specifieker dan .pv-eyebrow. Daarom staat hier alles opnieuw.
 */
.pv .pv-hero__label {
	font-family: var(--pv-body);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pv-oranje);
}

.pv .pv-hero__label::before { background: var(--pv-oranje); }

/* De zin eronder: wel de grootste tekst, geen kop. */
.pv-hero__zin {
	margin-top: 1.25rem;
	font-family: var(--pv-display);
	font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: #fff;
}

.pv-hero__lead {
	/*
	 * Meegroeiend met de kop. De kop loopt tot 4rem op een breed scherm; een
	 * vaste marge van 24px daaronder is dan een kier, terwijl diezelfde 24px
	 * op een telefoon juist ruim is. Daarom een clamp: de witruimte volgt de
	 * tekstgrootte in plaats van dat je hem per breedte bijstelt.
	 */
	margin-top: clamp(1.6rem, 1rem + 2vw, 2.75rem);
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
	color: rgba(255, 255, 255, 0.78);
	max-width: 34rem;
}

.pv-hero .pv-knoppen { margin-top: 2.25rem; }

/*
 * De drie punten onder de hero. Dezelfde plek als waar veel sites een
 * cijferstrip zetten, maar dan met beloftes in plaats van afgeleide getallen:
 * de prijs en de maten staan een schermhoogte lager toch al.
 *
 * Het vinkje is oranje, want oranje is op deze pagina de kleur van "dit is
 * voor jou geregeld".
 */
.pv-hero__punten {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem clamp(1.5rem, 1rem + 3vw, 3rem);
	margin: clamp(2.5rem, 1.5rem + 3vw, 3.75rem) 0 0;
	padding: clamp(1.75rem, 1rem + 2vw, 2.25rem) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	list-style: none;
}

.pv-hero__punten li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
}

.pv-hero__punten svg {
	flex: none;
	width: 19px;
	height: 19px;
	color: var(--pv-oranje);
}

/* =========================================================== logobalk == */

/*
 * Een smalle strook tussen de hero en de prijzen. Grijstinten met een lage
 * dekking: acht huisstijlen in vol ornaat naast elkaar vechten met de pagina
 * en met elkaar, en dan wint geen van de acht. Bij aanwijzen komt de kleur
 * terug, zodat wie er echt naar kijkt het logo gewoon ziet.
 */
.pv-logobalk {
	background: var(--pv-wit);
	border-bottom: 1px solid var(--pv-rand);
	padding-block: clamp(1.75rem, 1rem + 2vw, 2.5rem);
}

.pv-logobalk__binnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem clamp(1.5rem, 1rem + 2vw, 3rem);
}

.pv-logobalk__kop {
	flex: none;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pv-grijs-licht);
}

.pv-logobalk__rij {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem clamp(1.5rem, 1rem + 2.5vw, 3rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pv-logobalk__rij img {
	height: clamp(26px, 20px + 1.2vw, 38px);
	width: auto;
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.pv-logobalk__rij img:hover {
	filter: none;
	opacity: 1;
}

/* ============================================================ formaten == */

.pv-formaten__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--pv-klein);
	margin-bottom: var(--pv-kop);
}

.pv-formaten__kop .pv-blokkop { margin-bottom: 0; }

/* ------------------------------------------------------ gastenkiezer -- */

/*
 * Hier stond een kadertje dat uitlegde dat je een halve vierkante meter per
 * gast moet rekenen. Dat is huiswerk voor de bezoeker, en dezelfde uitleg
 * staat al bij de veelgestelde vragen. Hij weet één getal zeker, namelijk
 * hoeveel mensen er komen; dit schuifje rekent dat voor hem om naar een vloer
 * en een prijs.
 *
 * Boven de kaarten en niet ernaast: de kaarten tonen er drie, de kiezer kent
 * ze alle acht. Wie zestig gasten heeft krijgt zo de vloer die past, ook als
 * die hieronder niet staat.
 */
.pv-kiezer {
	display: grid;
	gap: 1.25rem clamp(1.5rem, 1rem + 2vw, 2.5rem);
	grid-template-columns: minmax(0, 1fr) minmax(min(100%, 17rem), 21rem);
	align-items: center;
	margin-bottom: var(--pv-blok);
	padding: 1.4rem 1.5rem;
	border: 1px solid var(--pv-rand);
	border-radius: var(--pv-radius-lg);
	background: var(--pv-wit);
	box-shadow: 0 18px 40px -34px rgba(20, 16, 33, 0.85);
}

@media (max-width: 760px) {
	.pv-kiezer { grid-template-columns: 1fr; }
}

.pv-kiezer__vraag {
	display: block;
	font-family: var(--pv-display);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--pv-inkt);
}

.pv-kiezer__schuif {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-top: 1rem;
}

.pv-kiezer__getal {
	flex: none;
	min-width: 4.5rem;
	text-align: right;
	line-height: 1.1;
}

.pv-kiezer__getal strong {
	display: block;
	font-family: var(--pv-display);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--pv-inkt);
	font-variant-numeric: tabular-nums;
}

.pv-kiezer__getal span {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pv-grijs-licht);
}

/*
 * De schuifbalk met de hand opgemaakt, want de standaardversie is per browser
 * anders en in Safari ronduit lelijk. De gevulde kant komt uit een variabele
 * die het script bijwerkt; zonder script staat de startstand er al in.
 */
.pv-kiezer input[type="range"] {
	flex: 1;
	min-width: 0;
	height: 6px;
	margin: 0;
	padding: 0;
	border-radius: 999px;
	appearance: none;
	-webkit-appearance: none;
	background:
		linear-gradient(90deg, var(--pv-oranje) 0 var(--pv-vulling, 50%),
		color-mix(in srgb, var(--pv-inkt) 10%, transparent) var(--pv-vulling, 50%) 100%);
	cursor: pointer;
}

.pv-kiezer input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--pv-oranje);
	box-shadow: 0 2px 8px -1px rgba(20, 16, 33, 0.45);
	cursor: grab;
}

.pv-kiezer input[type="range"]::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--pv-oranje);
	box-shadow: 0 2px 8px -1px rgba(20, 16, 33, 0.45);
	cursor: grab;
}

.pv-kiezer input[type="range"]:focus-visible {
	outline: 2px solid var(--pv-oranje);
	outline-offset: 4px;
}

/* De uitslag is meteen de link naar die maat: wie hem ziet is klaar met kiezen. */
.pv .pv-kiezer__uitslag {
	position: relative;
	display: block;
	padding: 0.95rem 2.5rem 0.95rem 1.1rem;
	border-radius: var(--pv-radius);
	background: var(--pv-paars-diep);
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	transition: background-color 0.18s ease;
}

.pv .pv-kiezer__uitslag:hover { background: var(--pv-inkt); }

.pv-kiezer__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pv-oranje);
}

.pv-kiezer__uitslag strong {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--pv-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
}

.pv-kiezer__regel {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.875rem;
}

.pv-kiezer__pijl {
	position: absolute;
	top: 50%;
	right: 1.1rem;
	transform: translateY(-50%);
	color: var(--pv-oranje);
	font-size: 1.1rem;
	line-height: 1;
}

/*
 * De regel over méér gasten verschijnt pas als iemand aan het einde van de
 * schaal zit. Altijd tonen zou bij twintig gasten een probleem aankondigen dat
 * hij niet heeft.
 */
.pv-kiezer__vol {
	display: none;
	margin-top: 0.85rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--pv-grijs);
}

.pv-kiezer.is-vol .pv-kiezer__vol { display: block; }

@media (max-width: 420px) {
	.pv-kiezer__schuif { flex-wrap: wrap; }
	.pv-kiezer__getal { min-width: 0; text-align: left; order: -1; }
	.pv-kiezer input[type="range"] { flex-basis: 100%; }
}

/* ---------------------------------------------------- de drie kaarten -- */

/*
 * Alles staat op de kaart: maat, gasten, prijs en wat je krijgt. Niets
 * uitklappen, niets doorklikken. Wie moet klikken om te zien of opbouw
 * inbegrepen is, klikt net zo makkelijk weg.
 */
/*
 * Twee kaarten per rij, de derde eronder.
 *
 * grid-auto-rows: 1fr geeft elke rij dezelfde hoogte, zodat alle kaarten even
 * groot zijn ook als de ene wat meer tekst heeft dan de andere. Met
 * align-items: start werden ze zo hoog als hun eigen inhoud, en dan staat er
 * een kaart van vier regels naast een van zes.
 */
.pv-formaatkaarten {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	align-items: stretch;
}

@media (max-width: 46rem) {
	.pv-formaatkaarten {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}
}

.pv-fkaart {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.9rem 1.75rem;
	border: 1px solid var(--pv-rand);
	border-radius: var(--pv-radius-lg);
	background: var(--pv-wit);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pv-fkaart:hover {
	transform: translateY(-3px);
	border-color: var(--pv-oranje);
	box-shadow: 0 22px 44px -28px rgba(20, 16, 33, 0.65);
}

/*
 * De meest gekozen maat krijgt een oranje rand en een streep bovenlangs. Geen
 * grotere kaart en geen andere achtergrond: dat verspringt de hoogte van de
 * rij en maakt de andere twee onbedoeld tweederangs.
 */
.pv-fkaart--uit {
	border-color: var(--pv-oranje);
	box-shadow: inset 0 3px 0 var(--pv-oranje);
}

.pv-fkaart__vlag {
	position: absolute;
	top: -0.72rem;
	left: 1.75rem;
	padding: 0.32rem 0.8rem;
	border-radius: 999px;
	background: var(--pv-oranje);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pv-fkaart h3 { margin-bottom: 0.3rem; }

.pv-fkaart__regel {
	font-size: 0.9375rem;
	color: var(--pv-grijs);
}

.pv-fkaart .pv-maatbalk { margin-top: 0.9rem; width: 100%; }

.pv-fkaart__prijs {
	margin-top: 1.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--pv-rand);
}

/*
 * De oude prijs bóven het bedrag en niet ernaast. Naast elkaar lezen twee
 * bedragen als een bereik in plaats van als een verlaging.
 */
.pv-fkaart__prijs s {
	display: block;
	font-size: 1rem;
	color: var(--pv-grijs-licht);
	text-decoration-thickness: 2px;
}

.pv-fkaart__prijs strong {
	display: block;
	margin-top: 0.1rem;
	font-family: var(--pv-display);
	font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--pv-inkt);
}

.pv-fkaart__btw {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.8125rem;
	color: var(--pv-grijs-licht);
}

/*
 * Het kortingslabel in de merkkleur en niet in groen. Groen zou een derde
 * kleur zijn op een pagina die er met opzet twee heeft, en het verschil tussen
 * "dit is voordelig" en "dit is gelukt" is hier niet nodig.
 */
.pv-fkaart__korting {
	display: inline-block;
	margin-top: 0.85rem;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	background: var(--pv-paars-mist);
	color: var(--pv-paars-cta);
	font-size: 0.8125rem;
	font-style: normal;
	font-weight: 600;
}




.pv-fkaart__link {
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.pv-fkaart__link:focus-visible {
	outline: 2px solid var(--pv-oranje);
	outline-offset: 3px;
}

/* Het maatbalkje: hoe groot is deze vloer ten opzichte van de grootste die we
   hebben. Vierkante meters zeggen de meeste mensen weinig, een lengte zie je
   in één oogopslag. */
.pv-maatbalk {
	display: block;
	width: min(100%, 190px);
	height: 4px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--pv-inkt) 9%, transparent);
	overflow: hidden;
}

.pv-maatbalk > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--pv-paars-cta), var(--pv-paars));
}

.pv-fkaart--uit .pv-maatbalk > span {
	background: linear-gradient(90deg, var(--pv-oranje-hover), var(--pv-oranje));
}

/* ============================================================== waarom == */

.pv-split {
	display: grid;
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

/*
 * Geen vaste verhouding. Die stond op 4:3 en sneed van elke staande foto de
 * boven- en onderkant af, precies waar bij deze foto de vloer en de
 * verlichting zitten. De foto houdt nu zijn eigen vorm.
 *
 * Erachter ligt een dunne oranje lijst, een stukje verschoven. Dat geeft de
 * foto een plek op de pagina in plaats van dat hij er los op zweeft, en het
 * kost geen extra element: het is een pseudo-element op de houder.
 */
.pv-split__beeld {
	position: relative;
	width: 100%;
}

/*
 * Op een breed scherm kreeg de foto de halve pagina en werd hij bijna
 * zevenhonderd pixels hoog. Een staande foto die meegroeit met een kolom van
 * zeshonderd pixels is geen beeld meer maar een poster: hij duwt de tekst
 * ernaast naar boven en het oog weet niet meer waar te beginnen.
 *
 * Dus een kop eraan: de tekstkolom krijgt iets meer ruimte en de foto stopt
 * bij vierhonderd pixels, tegen de rechterrand aan. Daarmee blijft hij binnen
 * dezelfde hoogte als het tekstblok ernaast.
 */
@media (min-width: 900px) {
	.pv-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }

	.pv-split__beeld {
		max-width: 400px;
		margin-inline-start: auto;
	}
}

.pv-split__beeld::after {
	content: "";
	position: absolute;
	inset: 1.1rem -1.1rem -1.1rem 1.1rem;
	z-index: 0;
	border: 1px solid color-mix(in srgb, var(--pv-oranje) 55%, transparent);
	border-radius: var(--pv-radius-xl);
	pointer-events: none;
}

.pv-split__beeld img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	border-radius: var(--pv-radius-xl);
	box-shadow: 0 30px 60px -40px rgba(20, 16, 33, 0.9);
}

/* Onder de 1100px staat de foto onder de tekst en zou de lijst buiten de
   pagina steken. */
@media (max-width: 1100px) {
	.pv-split__beeld::after { inset: 0.8rem -0.35rem -0.8rem 0.8rem; }
}

/*
 * De vier punten, twee bij twee.
 *
 * Eerst stonden ze op auto-fit, en dan vallen ze bij deze breedte uiteen in
 * drie plus één. Die vierde ziet er dan uit alsof hij is overgebleven in
 * plaats van dat hij erbij hoort. Vier dingen horen in een vierkant.
 */
.pv-punten {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: var(--pv-blok);
}

@media (max-width: 720px) {
	.pv-punten { grid-template-columns: 1fr; }
}

/*
 * Een oranje kant met een vleugje kleur dat naar rechts wegloopt.
 *
 * Het bolletje dat hier stond deed niets: het wees naar een kop die er toch al
 * stond. Een rand aan de zijkant hoort bij de kaart zelf in plaats van bij één
 * woord erin, en het verloop maakt van een vlak wit vakje iets dat iemand
 * ontworpen heeft. Twee laagjes achtergrond, geen extra element.
 */
.pv-punt {
	padding: 1.6rem 1.75rem;
	border: 1px solid var(--pv-rand);
	border-left: 3px solid var(--pv-oranje);
	border-radius: var(--pv-radius);
	background:
		linear-gradient(90deg,
			color-mix(in srgb, var(--pv-oranje) 9%, transparent) 0,
			transparent 160px),
		var(--pv-wit);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pv-punt:hover {
	transform: translateY(-2px);
	border-color: var(--pv-oranje);
	box-shadow: 0 18px 38px -28px rgba(20, 16, 33, 0.6);
}

.pv-punt h3 {
	margin-bottom: 0.5rem;
	font-size: 1.125rem;
}

.pv-punt p { font-size: 0.9375rem; line-height: 1.6; }

/* ========================================================= inbegrepen == */

/*
 * De vierde prijskaart: wat er bij elke maat in zit.
 *
 * Hij deelt .pv-fkaart met de maten, dus rand, hoek en witruimte kloppen
 * vanzelf. Alleen de achtergrond is mist in plaats van wit: zo zie je meteen
 * dat dit geen vierde maat is die je kunt aanklikken.
 */
.pv-fkaart--prijs {
	background: color-mix(in srgb, var(--pv-wit) 55%, var(--pv-mist));
	cursor: default;
}

/*
 * Naast of boven. De kaart staat rechts van de prijzen, maar onder 46rem valt
 * het raster terug naar één kolom en staan de prijzen erboven. Dezelfde grens
 * als het raster zelf, anders klopt het woord precies op de verkeerde breedte.
 */
.pv-boven { display: none; }

@media (max-width: 46rem) {
	.pv-naast { display: none; }
	.pv-boven { display: inline; }
}
.pv-fkaart--prijs:hover {
	transform: none;
	box-shadow: none;
}

/*
 * De punten onder elkaar, niet in kolommen. In een kaart van deze breedte
 * zouden twee kolommen de regels halverwege afbreken.
 */
.pv-prijslijst {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
}

.pv-prijslijst li {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--pv-inkt);
}

.pv-prijslijst svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	color: var(--pv-paars-cta);
}

/*
 * De huurperiode hoort bij alle vier de kaarten, dus staat hij eronder.
 *
 * De .pv ervoor is nodig: .pv p zet elke alinea op margin 0 en is met een
 * klasse plus een element specifieker dan deze klasse alleen. Zonder dat
 * voorvoegsel plakt deze regel tegen de kaarten en tegen de knop.
 */
.pv .pv-formaten__voet {
	margin: 2rem 0 0;
	font-size: 0.875rem;
	color: var(--pv-grijs);
}

/*
 * De knop staat gecentreerd en niet links, omdat de kaarten erboven over de
 * volle breedte lopen. Links uitgelijnd zou hij aan één kolom vastplakken.
 */
.pv .pv-formaten__knop {
	margin: 2.5rem 0 0;
	text-align: center;
}
.pv-lijst {
	display: grid;
	gap: 1.25rem 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.pv-lijst li {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--pv-rand);
	font-size: 1rem;
	color: var(--pv-inkt);
}

.pv-vink {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border-radius: 999px;
	background: var(--pv-paars-mist);
	color: var(--pv-paars-cta);
	display: grid;
	place-items: center;
}

.pv-vink svg { width: 12px; height: 12px; }

/* ========================================================== inbegrepen == */

/*
 * Wat je bij elke maat krijgt, als kaarten met een icoon.
 *
 * Het was een lijst met vinkjes en een streepje onder elke regel. Zes regels
 * met streepjes leest als een tabel die stuk is: je ziet zes hokjes, geen zes
 * dingen die je krijgt. Met een icoon ernaast wordt elk punt een ding op zich,
 * en dat is precies wat het is.
 *
 * Drie kolommen en niet vier: bij vier breekt elke tweede tekst af op een
 * ongelukkig woord, en dan gaat het er weer uitzien als een lijst.
 */
.pv-inbegrepen {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 900px) {
	.pv-inbegrepen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.pv-inbegrepen { grid-template-columns: 1fr; }
}

.pv-inbegrepen li {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.15rem 1.3rem;
	border: 1px solid var(--pv-rand);
	border-radius: var(--pv-radius-lg);
	background:
		linear-gradient(90deg,
			color-mix(in srgb, var(--pv-oranje) 7%, transparent) 0,
			transparent 150px),
		var(--pv-wit);
	font-size: 1rem;
	line-height: 1.45;
	color: var(--pv-inkt);
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pv-inbegrepen li:hover {
	transform: translateY(-2px);
	border-color: var(--pv-oranje);
	box-shadow: 0 18px 38px -28px rgba(20, 16, 33, 0.55);
}

/* Het icoon in een eigen tegel, zodat de regels links netjes uitlijnen ook als
   de ene tekst één regel is en de andere twee. */
.pv-inbegrepen__icoon {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--pv-radius);
	background: color-mix(in srgb, var(--pv-oranje) 13%, transparent);
	color: var(--pv-oranje-hover);
}

.pv-inbegrepen__icoon svg { width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) {
	.pv-inbegrepen li:hover { transform: none; }
}

/* =========================================================== werkwijze == */

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

/*
 * Witte kaarten op het paarse vlak, geen doorschijnende.
 *
 * Een kaart van zes procent wit op een donkere ondergrond is geen kaart maar
 * een vlek: je ziet de rand alleen als je ernaar zoekt, en de tekst erin heeft
 * precies dezelfde kleur als de tekst eromheen. Wit erop geeft de stappen een
 * eigen vlak, en het verschil tussen "dit is de uitleg" en "dit is een stap"
 * wordt meteen zichtbaar.
 */
.pv-stap {
	padding: 1.75rem;
	border-radius: var(--pv-radius-lg);
	background: var(--pv-wit);
	border: 1px solid transparent;
}

.pv-stap__nr {
	display: block;
	font-family: var(--pv-display);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--pv-oranje);
	margin-bottom: 1.1rem;
	font-variant-numeric: tabular-nums;
}

/*
 * De sectiekleuren gelden voor alles in het paarse vlak, en die selector is
 * specifieker dan .pv-stap h3. Vandaar dat de kaartkleuren hier opnieuw staan
 * en niet alleen op de kaart zelf.
 */
.pv-sectie--paars .pv-stap h3 { color: var(--pv-inkt); }

.pv-stap h3 { margin-bottom: 0.5rem; }
.pv-stap p { font-size: 0.9375rem; line-height: 1.6; color: var(--pv-grijs); }

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

/*
 * Acht kaarten in vaste kolommen en niet op auto-fit.
 *
 * Met auto-fit vielen ze op een laptop uiteen in drie plus drie plus twee, en
 * dan bungelen er twee onderaan alsof ze zijn overgebleven. Acht deelt netjes
 * door vier en door twee, dus nemen we die en houdt elke rij zich vol.
 */
.pv-feesten {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1000px) {
	.pv-feesten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
	.pv-feesten { grid-template-columns: 1fr; }
}

/*
 * Een oranje gloed uit de rechterbovenhoek, die oplicht als je de kaart
 * aanwijst.
 *
 * Familie van de vier punten hierboven, maar niet hetzelfde: daar staat de
 * kleur als een rand aan de zijkant, hier komt hij als licht de hoek in. Zo
 * hoort het bij elkaar zonder dat het twee keer dezelfde kaart is.
 *
 * De gloed zit in een pseudo-element en niet in de achtergrond zelf, want een
 * verloop laat zich niet vloeiend overgaan. Een laagje waarvan alleen de
 * dekking verandert wel.
 */
.pv .pv-feest {
	position: relative;
	overflow: hidden;
	display: block;
	padding: 1.5rem;
	border-radius: var(--pv-radius-lg);
	border: 1px solid var(--pv-rand);
	background: var(--pv-wit);
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pv .pv-feest::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(85% 78% at 100% 0%,
		color-mix(in srgb, var(--pv-oranje) 32%, transparent) 0%,
		transparent 64%);
	opacity: 0.45;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.pv .pv-feest:hover {
	transform: translateY(-3px);
	border-color: var(--pv-oranje);
	box-shadow: 0 20px 42px -26px color-mix(in srgb, var(--pv-oranje) 75%, transparent);
}

.pv .pv-feest:hover::before { opacity: 1; }

/* De inhoud boven de gloed, anders verdwijnt de tekst eronder. */
.pv-feest h3,
.pv-feest p,
.pv-feest__pijl { position: relative; z-index: 1; }

.pv-feest h3 { font-size: 1.0625rem; margin-bottom: 0.35rem; }
.pv-feest p { font-size: 0.9375rem; line-height: 1.55; color: var(--pv-grijs); }

.pv-feest__pijl {
	display: inline-block;
	margin-top: 0.85rem;
	font-family: var(--pv-display);
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--pv-paars-cta);
}

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

/*
 * Een fotostrook, geen raster.
 *
 * De foto's lopen van 0,56 tot 1,55 in verhouding: drie staande, een vierkante
 * en twee liggende. In een raster valt bij elke foto iets anders af, en bij de
 * staande is dat precies de vloer. Naast elkaar op gelijke hoogte houdt ieder
 * zijn eigen vorm: de staande worden smal, de liggende breed, en niets wordt
 * bijgesneden.
 *
 * De volgende foto steekt bewust net in beeld. Dat is het enige wat een
 * bezoeker hoeft te zien om te snappen dat hij verder kan; een rij bolletjes
 * of een tekst "schuif opzij" is daarna overbodig.
 */
.pv-strip {
	position: relative;
	margin-top: var(--pv-kop);
}

.pv-galerij {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-inline-start: 0;
	padding-block-end: 0.75rem;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--pv-inkt) 25%, transparent) transparent;
}

.pv-galerij:focus-visible {
	outline: 2px solid var(--pv-oranje);
	outline-offset: 4px;
	border-radius: var(--pv-radius);
}

.pv-galerij::-webkit-scrollbar { height: 6px; }
.pv-galerij::-webkit-scrollbar-track { background: transparent; }

.pv-galerij::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: color-mix(in srgb, var(--pv-inkt) 22%, transparent);
}

/*
 * De hoogte staat vast en de breedte volgt de foto. Andersom, zoals in een
 * raster, zou betekenen dat elke foto in dezelfde vorm geduwd wordt.
 */
.pv-galerij__kaart {
	position: relative;
	flex: 0 0 auto;
	height: clamp(14rem, 26vw, 24rem);
	margin: 0;
	overflow: hidden;
	border-radius: var(--pv-radius-lg);
	background: var(--pv-inkt);
	scroll-snap-align: start;
	box-shadow: 0 20px 44px -34px rgba(20, 16, 33, 0.9);
}

.pv-galerij__kaart img {
	display: block;
	width: auto;
	max-width: none;
	height: 100%;
	transition: transform 0.45s ease;
}

.pv-galerij__kaart::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 2px transparent;
	transition: box-shadow 0.25s ease;
	pointer-events: none;
}

.pv-galerij__kaart:hover img { transform: scale(1.045); }

.pv-galerij__kaart:hover::after {
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pv-oranje) 85%, transparent);
}

/* -------------------------------------------------------- de pijltjes -- */

/*
 * Ze zweven over de strook en niet eronder: onderaan verdwijnen ze uit beeld
 * zodra de strook hoger is dan het scherm, en dan zoek je de bediening bij een
 * onderdeel dat je al voorbij bent.
 */
.pv-strip__knop {
	position: absolute;
	top: calc(50% - 0.375rem);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid var(--pv-rand);
	border-radius: 999px;
	background: var(--pv-wit);
	color: var(--pv-inkt);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 10px 26px -12px rgba(20, 16, 33, 0.55);
	transition: background-color 0.18s ease, color 0.18s ease,
	            border-color 0.18s ease, opacity 0.18s ease;
}

.pv-strip__knop:hover:not(:disabled) {
	background: var(--pv-oranje);
	border-color: var(--pv-oranje);
	color: #fff;
}

.pv-strip__knop:focus-visible {
	outline: 2px solid var(--pv-oranje);
	outline-offset: 3px;
}

/*
 * Aan het einde van de strook blijft de knop staan maar wordt hij bleek. Hem
 * weghalen laat de andere knop verspringen, en dan klik je net mis.
 */
.pv-strip__knop:disabled {
	opacity: 0.35;
	cursor: default;
}

.pv-strip__knop--terug  { inset-inline-start: -0.75rem; }
.pv-strip__knop--verder { inset-inline-end: -0.75rem; }

@media (max-width: 640px) {
	/* Op een telefoon veegt iedereen; daar zijn de knoppen alleen in de weg. */
	.pv-strip__knop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pv-galerij__kaart:hover img { transform: none; }
	.pv-galerij { scroll-behavior: auto; }
}

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

/*
 * Een carrousel, net als bij de foto's.
 *
 * Er stonden drie kaarten naast elkaar in een raster, en die werden zo hoog
 * als hun eigen tekst: een review van twee regels naast een van tien gaf drie
 * kaarten van drie verschillende hoogtes. In een rij zijn ze allemaal zo hoog
 * als de langste, want dat is wat flexbox standaard doet. Daarmee is het ook
 * meteen opgelost.
 *
 * En er passen nu alle beoordelingen in in plaats van drie: doorklikken is
 * precies waar een carrousel voor is.
 */
.pv-reviews {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-block-end: 0.75rem;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.pv-reviews:focus-visible {
	outline: 2px solid var(--pv-oranje);
	outline-offset: 4px;
	border-radius: var(--pv-radius);
}

.pv-reviews::-webkit-scrollbar { height: 6px; }
.pv-reviews::-webkit-scrollbar-track { background: transparent; }

.pv-reviews::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.3);
}

/* Wit op het paarse vlak, net als de stappen: geen doorschijnende kaarten. */
.pv-review {
	position: relative;
	flex: 0 0 min(82%, 19.5rem);
	scroll-snap-align: start;
	background: var(--pv-wit);
	border: 1px solid transparent;
	border-radius: var(--pv-radius-lg);
	padding: 1.4rem;
	display: flex;
	flex-direction: column;
}

/*
 * De kop van de kaart: wie het zegt, wanneer, en waar het vandaan komt.
 *
 * Stond eerst onderaan. Dan lees je eerst een uitspraak en pas daarna van wie
 * hij is, en dat is precies de volgorde van een verzonnen quote. Google zet de
 * naam er zelf ook boven, en iemand die beide naast elkaar ziet herkent dat.
 */
.pv-review__kop {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.9rem;
}

.pv-review__wie {
	min-width: 0;
	line-height: 1.3;
}

.pv-review__wie strong {
	display: block;
	font-family: var(--pv-display);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--pv-inkt);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pv-review__wie > span {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.8125rem;
	color: var(--pv-grijs-licht);
}

/*
 * De initiaal in plaats van de profielfoto van Google. Rustiger dan een
 * handvol willekeurige pasfoto's van wisselende kwaliteit, en er laadt niets
 * meer van een vreemd domein.
 */
.pv-review__letter {
	flex: none;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: var(--pv-paars-mist);
	color: var(--pv-paars-cta);
	font-family: var(--pv-display);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
}

/* Het merkteken helemaal rechts, op dezelfde regel als de naam. */
.pv-review__bron {
	flex: none;
	margin-inline-start: auto;
	display: grid;
	place-items: center;
	line-height: 0;
}

.pv-sterren {
	color: var(--pv-goud);
	letter-spacing: 0.12em;
	font-size: 0.9375rem;
	margin-bottom: 0.6rem;
}

/* Zonder aanhalingstekens, net als op Google zelf. */
.pv-review blockquote {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--pv-inkt);
}
.pv-reviews__bron {
	margin-top: var(--pv-kop);
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.6);
}

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

.pv-faq { max-width: 52rem; }

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

.pv-faq summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.4rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--pv-display);
	font-weight: 700;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
	color: var(--pv-inkt);
}

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

.pv-faq summary::after {
	content: "+";
	flex: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--pv-paars-cta);
}

.pv-faq details[open] summary::after { content: "\2212"; }
.pv-faq details p { padding-bottom: 1.5rem; max-width: 46rem; }

/* ================================================================ slot == */

.pv-slot {
	display: grid;
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	align-items: start;
}

.pv-slot__kaarten { display: grid; gap: 1rem; }

/* Zelfde reden als bij de stappen: geen doorschijnende kaarten op donker. */
.pv-slot__kaart {
	padding: 1.6rem;
	border-radius: var(--pv-radius-lg);
	background: var(--pv-wit);
	border: 1px solid transparent;
}

.pv-sectie--paars .pv-slot__kaart h3 { color: var(--pv-inkt); }

/* De link in de kaart is wit zolang hij op paars staat. Op wit moet hij terug
   naar de leeskleur, anders is hij onzichtbaar. */
.pv .pv-slot__kaart .pv-tekstlink { color: var(--pv-paars-cta); }

.pv-slot__kaart h3 { font-size: 1.0625rem; margin-bottom: 0.4rem; }
.pv-slot__kaart p { font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1rem; color: var(--pv-grijs); }

/* ============================================================== cases == */

/*
 * De filterknoppen. Staan op hidden in de HTML en worden door ui.js zichtbaar
 * gemaakt: zonder script filtert er niets, en dan zijn het vijf knoppen die
 * niets doen.
 */
.pv-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-bottom: var(--pv-kop);
}

.pv-filter {
	padding: 0.55rem 1.15rem;
	border: 1px solid var(--pv-rand);
	border-radius: 999px;
	background: var(--pv-wit);
	color: var(--pv-grijs);
	font-family: var(--pv-body);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.pv-filter:hover { border-color: var(--pv-oranje); color: var(--pv-inkt); }

.pv-filter.is-aan {
	background: var(--pv-oranje);
	border-color: var(--pv-oranje);
	color: #fff;
}

.pv-filter:focus-visible { outline: 2px solid var(--pv-oranje); outline-offset: 2px; }

/*
 * De kaarten. Eén vaste vorm voor elke foto, want dit is de pagina waar je
 * overzicht komt halen: acht verschillende hoogtes naast elkaar lezen als
 * rommel, ook al staat er op elke foto iets moois.
 *
 * De uitsnede zit bewust onder het midden. Op vrijwel al deze foto's ligt de
 * vloer in de onderste helft, en dat is nu net het onderwerp.
 */
.pv-cases {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

@media (max-width: 600px) {
	.pv-cases { grid-template-columns: 1fr; }
}

/* Eén of twee foto's: smallere kolommen en in het midden, anders staat er
   een kaart in een hoek met een gat ernaast. */
.pv-cases--weinig {
	grid-template-columns: repeat(auto-fit, minmax(0, 21rem));
	justify-content: center;
}

.pv-case { margin: 0; }

.pv .pv-case__link {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--pv-radius-lg);
	background: var(--pv-inkt);
	text-decoration: none;
	box-shadow: 0 20px 44px -34px rgba(20, 16, 33, 0.9);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pv .pv-case__link:hover {
	transform: translateY(-3px);
	box-shadow: 0 26px 50px -30px rgba(20, 16, 33, 0.75);
}

.pv-case__beeld {
	display: block;
	aspect-ratio: 4 / 5;
}

.pv-case__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 58%;
	transition: transform 0.5s ease;
}

.pv .pv-case__link:hover .pv-case__beeld img { transform: scale(1.05); }

/* De maat als label op de foto: dat is wat iemand hier komt halen. */
.pv-case__maat {
	position: absolute;
	top: 1rem;
	inset-inline-start: 1rem;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	background: var(--pv-oranje);
	color: #fff;
	font-family: var(--pv-display);
	font-size: 0.8125rem;
	font-weight: 700;
}

/*
 * De vierkante meters erachter, met een streepje ertussen. De inleiding van
 * de pagina praat in m² en het labeltje praatte in meters; dan moet de
 * bezoeker zelf gaan rekenen om te zien welke foto bij welk getal hoort.
 */
.pv-case__maat small {
	margin-inline-start: 0.45rem;
	padding-inline-start: 0.5rem;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.45);
	font-size: 0.75rem;
	font-weight: 600;
}

/*
 * De tekst ligt op de foto met een verloop eronder. Een wit blok onder de foto
 * zou van elke kaart twee dingen maken; zo blijft het één beeld met een
 * bijschrift erin.
 */
.pv-case__tekst {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 3.5rem 1.25rem 1.2rem;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(11, 1, 25, 0.55) 45%,
		rgba(11, 1, 25, 0.92) 100%);
	color: #fff;
}

.pv-case__soort {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pv-oranje);
	margin-bottom: 0.3rem;
}

.pv-case__tekst strong {
	display: block;
	font-family: var(--pv-display);
	font-size: 1.125rem;
	line-height: 1.3;
	color: #fff;
}

/* De regel met de pijl schuift pas in beeld bij aanwijzen: op een kaart die
   al een titel en een maat draagt is een derde regel anders alleen ruis. */
.pv-case__actie {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pv-oranje);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.pv .pv-case__link:hover .pv-case__actie,
.pv .pv-case__link:focus-visible .pv-case__actie {
	opacity: 1;
	transform: none;
}

.pv .pv-case__link:focus-visible {
	outline: 2px solid var(--pv-oranje);
	outline-offset: 3px;
}

.pv-cases__leeg {
	margin-top: var(--pv-kop);
	color: var(--pv-grijs);
}

@media (prefers-reduced-motion: reduce) {
	.pv .pv-case__link:hover { transform: none; }
	.pv .pv-case__link:hover .pv-case__beeld img { transform: none; }
	.pv-case__actie { opacity: 1; transform: none; }
}

/* ========================================================== verschil == */

/*
 * Twee kolommen naast elkaar. Niet als tabel: de regels links en rechts horen
 * bij elkaar maar zijn niet even lang, en in een tabel worden ze dan aan
 * elkaar vastgeklonken op de hoogte van de langste. Twee lijsten lezen prima
 * naast elkaar zolang ze dezelfde volgorde aanhouden, en dat doen ze: elke
 * regel draagt het onderwerp waar hij over gaat.
 *
 * Onze kaart staat een stukje hoger dan de andere en heeft als enige kleur.
 * Dat is het verschil al voordat je een woord hebt gelezen. De andere kaart
 * is niet lelijk gemaakt, alleen vlak: hij moet te lezen zijn, geen aandacht
 * trekken.
 */
.pv-verschil {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
	align-items: start;
}

.pv-verschil__kaart {
	overflow: hidden;
	border-radius: var(--pv-radius-lg);
}

.pv-verschil__kaart--ons {
	border: 1px solid color-mix(in srgb, var(--pv-paars) 30%, var(--pv-rand));
	background:
		radial-gradient(90% 150% at 0% 100%, color-mix(in srgb, var(--pv-paars) 10%, transparent) 0%, transparent 62%),
		var(--pv-wit);
	box-shadow: 0 26px 54px -34px rgba(59, 15, 122, 0.55);
}

.pv-verschil__kaart--rest {
	border: 1px solid var(--pv-rand);
	background: color-mix(in srgb, var(--pv-rand) 30%, var(--pv-wit));
}

/* Alleen naast elkaar heeft optillen betekenis. Onder elkaar zou de bovenste
   kaart gewoon een gat naar de volgende krijgen. */
@media (min-width: 900px) {
	.pv-verschil__kaart--ons { transform: translateY(-0.6rem); }
}

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

.pv-verschil__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem clamp(1.25rem, 0.95rem + 1.1vw, 1.75rem);
	font-family: var(--pv-display);
	font-size: 1.0625rem;
	font-weight: 700;
}

.pv-verschil__kaart--ons .pv-verschil__kop {
	background: linear-gradient(115deg, var(--pv-paars-diep) 0%, #4A1394 52%, var(--pv-paars-hover) 100%);
	color: #fff;
}

.pv-verschil__kaart--rest .pv-verschil__kop {
	background: color-mix(in srgb, var(--pv-rand) 62%, var(--pv-wit));
	color: var(--pv-grijs);
}

/* Het groene vlaggetje in de paarse balk: 4,8:1 op die ondergrond. */
.pv-verschil__vlag {
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	background: var(--pv-groen-mist);
	color: #0F5C2E;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ----------------------------------------------------------- de regels -- */

.pv-verschil ul {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Een lijn tussen de regels in plaats van een gat. Vier losse blokjes lezen
 * als vier losse mededelingen; met een lijn ertussen is het één lijst waarin
 * je van boven naar beneden gaat, en loopt hij ook zichtbaar gelijk op met de
 * lijst ernaast.
 */
.pv-verschil li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.8rem;
	align-items: start;
	padding: 1rem clamp(1.25rem, 0.95rem + 1.1vw, 1.75rem);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--pv-grijs);
}

.pv-verschil li + li { border-top: 1px solid var(--pv-rand); }

.pv-verschil__kaart--ons li { color: var(--pv-inkt); }
.pv-verschil__kaart--ons li + li { border-top-color: color-mix(in srgb, var(--pv-paars) 14%, var(--pv-rand)); }

/* Het onderwerp boven de zin, zodat links en rechts op elkaar te leggen zijn. */
.pv-verschil__thema {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pv-grijs-licht);
}

.pv-verschil__kaart--ons .pv-verschil__thema { color: var(--pv-paars-cta); }

/*
 * Het vinkje groen, want dat is wat mensen bij een vinkje verwachten en het
 * zegt "goed" zonder dat er een woord bij hoeft. Het kruisje blijft grijs: de
 * andere kolom is geen waarschuwing, alleen een vergelijking.
 */
.pv-verschil__icoon {
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	margin-top: 0.9rem;
	border-radius: 999px;
}

.pv-verschil__icoon svg { width: 0.95rem; height: 0.95rem; stroke-width: 2.2; }

.pv-verschil__kaart--ons .pv-verschil__icoon {
	background: var(--pv-groen-mist);
	color: var(--pv-groen);
}

.pv-verschil__kaart--rest .pv-verschil__icoon {
	background: color-mix(in srgb, var(--pv-grijs) 12%, transparent);
	color: var(--pv-grijs-licht);
}

@media (prefers-reduced-motion: reduce) {
	.pv-verschil__kaart--ons { transform: none; }
}
/* ======================================================== warm vlak == */

/*
 * Licht gebroken wit met een oranje gloed linksboven en een vleugje paars
 * rechtsonder.
 *
 * Bedoeld voor het ene blok op een pagina dat er persoonlijk uit moet zien
 * zonder dat het meteen een donker vlak wordt. Drie donkere vlakken op één
 * pagina is er één te veel: een donker vlak is een uitroepteken, en als je er
 * drie zet is niets meer het belangrijkste. Hier komt de nadruk van de warmte
 * en niet van het contrast.
 */
.pv-sectie--warm {
	background:
		radial-gradient(85% 115% at 8% 0%, color-mix(in srgb, var(--pv-oranje) 17%, transparent) 0%, transparent 62%),
		radial-gradient(70% 95% at 100% 100%, color-mix(in srgb, var(--pv-paars) 11%, transparent) 0%, transparent 66%),
		#FCF8F5;
}
/* =========================================================== over ons == */

/*
 * De cijferband onder het verhaal.
 *
 * Vier dingen die iemand zelf kan nakijken: op de prijzenpagina, op Google en
 * op de kaart. Geen bordjes met ronde getallen die niemand kan controleren,
 * want zodra er één niet klopt gelooft hij de andere drie ook niet meer.
 *
 * Een lijn erboven en niets eromheen: het zijn geen kaarten maar een voetnoot
 * bij de tekst erboven.
 */
.pv-cijfers {
	display: grid;
	gap: 1.5rem clamp(1.5rem, 1rem + 2vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	margin-top: var(--pv-blok);
	padding-top: var(--pv-kop);
	border-top: 1px solid var(--pv-rand);
}

.pv-cijfer strong {
	display: block;
	font-family: var(--pv-display);
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--pv-paars-cta);
	font-variant-numeric: tabular-nums;
}

.pv-cijfer span {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--pv-grijs);
}

/*
 * Het verhaal als brief.
 *
 * Dit is het enige stuk op de site waar één persoon aan het woord is, en dat
 * moet je kunnen zien voordat je het hebt gelezen. Vandaar geen kolommen en
 * geen kaartenraster maar één vlak met een oranje streep ernaast, smal genoeg
 * om prettig te lezen, met een handtekening eronder.
 */
.pv-brief {
	max-width: 46rem;
	margin-inline: auto;
	padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
	border: 1px solid var(--pv-rand);
	border-inline-start: 3px solid var(--pv-oranje);
	border-radius: var(--pv-radius-lg);
	background: var(--pv-wit);
	box-shadow: 0 26px 54px -40px rgba(20, 16, 33, 0.85);
}

/* De eerste tussenkop is de kop van de brief en staat dus bovenaan. */
.pv-brief .pv-prose > h2:first-child { margin-top: 0; }

.pv-brief__onder {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-top: 1.75rem;
	padding-top: 1.35rem;
	border-top: 1px solid var(--pv-rand);
}

.pv-brief__letter {
	flex: none;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	background: var(--pv-paars-mist);
	color: var(--pv-paars-cta);
	font-family: var(--pv-display);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
}

.pv-brief__onder strong {
	display: block;
	font-family: var(--pv-display);
	font-size: 0.9375rem;
	color: var(--pv-inkt);
}

.pv-brief__onder span span {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.8125rem;
	color: var(--pv-grijs-licht);
}

/*
 * De zes redenen.
 *
 * Het nummer staat groot en bijna doorzichtig achter de kop in plaats van er
 * klein boven. Zo telt de kolom zichtbaar door zonder dat het nummer om
 * aandacht vraagt: het zijn zes gelijkwaardige punten en geen volgorde waarin
 * je ze moet afwerken.
 */
.pv-redenen {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.pv-reden {
	position: relative;
	overflow: hidden;
	padding: 1.6rem;
	border: 1px solid var(--pv-rand);
	border-radius: var(--pv-radius-lg);
	background: var(--pv-wit);
	box-shadow: 0 20px 44px -40px rgba(20, 16, 33, 0.85);
}

.pv-reden__nr {
	position: absolute;
	top: 0.4rem;
	inset-inline-end: 0.9rem;
	font-family: var(--pv-display);
	font-size: 3.25rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: color-mix(in srgb, var(--pv-paars) 14%, transparent);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.pv-reden h3 {
	position: relative;
	margin-bottom: 0.5rem;
	font-size: 1.0625rem;
	padding-inline-end: 2.5rem;
}

.pv-reden p {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--pv-grijs);
}

/*
 * De missie op het donkere vlak. Eén uitspraak, gecentreerd, en verder niets:
 * alles wat je ernaast zet maakt er een sectie van in plaats van een
 * standpunt.
 */
.pv-missie {
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}

.pv-missie .pv-eyebrow { justify-content: center; }

.pv-missie p {
	margin-top: 1.25rem;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.65;
}

/*
 * Het bezorggebied. Plaats links, afstand rechts, een lijn ertussen: dat leest
 * als een lijst en niet als losse labeltjes, en de afstanden staan zo onder
 * elkaar zodat je ze kunt vergelijken.
 */
.pv-regios {
	display: grid;
	gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.pv-regios li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--pv-rand);
	font-size: 0.9375rem;
	color: var(--pv-inkt);
}

/*
 * Op het donkere vlak geldt de sectiekleur voor alles wat erin staat, en die
 * weegt zwaarder dan de lijst zelf. Zonder deze regels staat de plaatsnaam
 * zwart op zwart.
 */
.pv-sectie--paars .pv-regios li {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

.pv-sectie--paars .pv-regios small { color: rgba(255, 255, 255, 0.6); }

.pv-regios small {
	flex: none;
	color: var(--pv-grijs-licht);
	font-variant-numeric: tabular-nums;
}
/* ========================================================= faqpagina == */

/*
 * De vragenpagina: inhoudsopgave links, onderwerpen rechts.
 *
 * Twee kolommen en geen doorlopende lijst, omdat dit een naslagwerk is. Je
 * komt hier met één vraag en niet om alles te lezen, dus moet je in één blik
 * zien welke onderwerpen er zijn en waar je nu bent.
 */
.pv-faqpagina {
	display: grid;
	gap: clamp(2rem, 1rem + 3vw, 3.5rem);
	align-items: start;
}

@media (min-width: 900px) {
	.pv-faqpagina { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
}

/* ------------------------------------------------- de inhoudsopgave -- */

/*
 * Meelopend bij het scrollen. Bij tweeëndertig vragen is een inhoudsopgave die
 * uit beeld verdwijnt geen inhoudsopgave meer. Onder de 900px staat hij boven
 * de vragen en hoeft er niets te plakken.
 */
@media (min-width: 900px) {
	.pv-faqindex {
		position: sticky;
		top: 6rem;
	}
}

.pv-faqindex__intro {
	margin-bottom: var(--pv-kop);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--pv-grijs);
}

.pv-faqindex nav ol {
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.pv .pv-faqindex nav a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0.7rem;
	align-items: baseline;
	padding: 0.7rem 0.75rem 0.7rem 0.6rem;
	border-radius: var(--pv-radius);
	border-inline-start: 2px solid transparent;
	color: var(--pv-grijs);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.pv .pv-faqindex nav a:hover {
	background: var(--pv-wit);
	color: var(--pv-inkt);
}

/*
 * Het onderwerp dat in beeld staat. Wordt door ui.js gezet; zonder script is
 * dit gewoon een lijst met links en gaat er niets stuk.
 */
.pv .pv-faqindex nav a.is-hier {
	background: var(--pv-wit);
	border-inline-start-color: var(--pv-oranje);
	color: var(--pv-inkt);
	box-shadow: 0 14px 30px -28px rgba(20, 16, 33, 0.9);
}

.pv-faqindex__nr {
	font-family: var(--pv-display);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--pv-grijs-licht);
	font-variant-numeric: tabular-nums;
}

.pv .pv-faqindex nav a.is-hier .pv-faqindex__nr { color: var(--pv-oranje-hover); }

/* Het aantal vragen erachter: dan weet je of je voor één vraag doorklikt of
   voor zes. */
.pv-faqindex nav small {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--pv-grijs-licht);
	font-variant-numeric: tabular-nums;
}

.pv-faqindex__knop {
	width: 100%;
	justify-content: center;
	margin-top: var(--pv-kop);
}

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

.pv-faqgroepen {
	display: grid;
	gap: var(--pv-blok);
}

/* Anders verdwijnt de kop onder de balk bovenaan zodra je een link volgt. */
.pv-faqgroep { scroll-margin-top: 6rem; }

/* Met .pv ervoor: .pv h2 hierboven zet een eigen grootte en telt een
   element extra mee, dus zonder die klasse wint die regel. */
.pv .pv-faqgroep__kop {
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	margin-bottom: 1.1rem;
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
}

.pv-faqgroep__nr {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--pv-oranje);
	font-variant-numeric: tabular-nums;
}

/*
 * Elk onderwerp in een eigen kaart. Alles in één doorlopende kolom leest als
 * een lange lap; zo zie je waar een onderwerp ophoudt en het volgende begint.
 */
.pv-faqgroep__kaart {
	max-width: none;
	padding: 0.35rem clamp(1.1rem, 0.8rem + 1.2vw, 1.75rem);
	border: 1px solid var(--pv-rand);
	border-radius: var(--pv-radius-lg);
	background: var(--pv-wit);
	box-shadow: 0 20px 44px -42px rgba(20, 16, 33, 0.9);
}

/* De laatste vraag hoeft geen lijn onder zich: daar houdt de kaart al op. */
.pv-faqgroep__kaart details:last-child { border-bottom: 0; }

/*
 * Het antwoord in een eigen blok. De algemene regel zet onder elke alinea
 * ruimte, en bij een antwoord van drie alinea's is dat drie keer te veel.
 */
.pv-faq .pv-antwoord {
	padding-bottom: 1.5rem;
	max-width: 46rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--pv-grijs);
}

.pv-faq .pv-antwoord p { padding-bottom: 0; }
.pv-faq .pv-antwoord p + p { margin-top: 0.9rem; }

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

.pv-faqslot {
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
}

.pv-faqslot p { margin-top: 1rem; }
.pv-faqslot .pv-knoppen { justify-content: center; margin-top: var(--pv-kop); }
/* =========================================================== contact == */

/*
 * Formulier links, de directe wegen rechts. Wie op contact klikt wil meestal
 * iets vragen en niet iets opzoeken, dus het formulier staat als eerste in
 * beeld. Op de telefoon schuift de kolom eronder, om dezelfde reden.
 */
.pv-contact {
	display: grid;
	gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	align-items: start;
}

@media (min-width: 920px) {
	.pv-contact { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); }
}

.pv-formulier {
	padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
	border: 1px solid var(--pv-rand);
	border-radius: var(--pv-radius-lg);
	background: var(--pv-wit);
	box-shadow: 0 26px 54px -42px rgba(20, 16, 33, 0.9);
}

.pv .pv-formulier h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); }

.pv-formulier__intro {
	margin-top: 0.85rem;
	margin-bottom: var(--pv-kop);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--pv-grijs);
}

/* ------------------------------------------- de kolom met de gegevens -- */

.pv-contactzij__tekst {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--pv-grijs);
	margin-bottom: 1.1rem;
}

/*
 * Appen, bellen en mailen als drie kaarten. Dit zijn de dingen die iemand hier
 * komt doen; ze stonden eerst als regeltjes in hetzelfde rijtje als het
 * btw-nummer, en dan lezen ze als administratie.
 */
.pv-directkaarten {
	display: grid;
	gap: 0.7rem;
}

.pv .pv-direct {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0.9rem;
	align-items: center;
	padding: 1rem 1.1rem;
	border: 1px solid var(--pv-rand);
	border-radius: var(--pv-radius-lg);
	background: var(--pv-wit);
	color: var(--pv-inkt);
	text-decoration: none;
	transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.pv .pv-direct:hover {
	border-color: color-mix(in srgb, var(--pv-paars) 40%, var(--pv-rand));
	transform: translateY(-2px);
	box-shadow: 0 20px 40px -34px rgba(20, 16, 33, 0.9);
}

.pv .pv-direct:focus-visible {
	outline: 2px solid var(--pv-oranje);
	outline-offset: 3px;
}

.pv-direct__icoon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: var(--pv-paars-mist);
	color: var(--pv-paars-cta);
}

.pv-direct__icoon svg { width: 1.15rem; height: 1.15rem; }

/* WhatsApp in zijn eigen groen: dat herkent iedereen zonder te lezen. */
.pv-direct__icoon--wa {
	background: color-mix(in srgb, #25D366 18%, transparent);
	color: #0F7A3D;
}

.pv-direct strong {
	display: block;
	font-family: var(--pv-display);
	font-size: 0.9375rem;
	color: var(--pv-inkt);
}

.pv-direct small {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--pv-grijs-licht);
}

.pv-direct__pijl {
	color: var(--pv-oranje);
	font-size: 1.05rem;
}

/*
 * Het werkgebied, het KvK-nummer en het btw-nummer staan in dezelfde kaart
 * als de drie erboven, want ze horen in dezelfde kolom en niet als losse
 * regeltjes eronder. Ze gaan alleen nergens heen: geen pijl, geen hover en
 * geen handje, anders belooft de kaart iets wat er niet is.
 */
.pv-direct--stil { cursor: default; }
.pv-direct--stil:hover { border-color: var(--pv-rand); transform: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
	.pv .pv-direct:hover { transform: none; }
}

/* ------------------------------------- het formulier van Fluent Forms -- */

/*
 * De plug-in levert zijn eigen opmaak mee: velden in een grijs dat nergens op
 * de site voorkomt. Dat valt meteen op als iets wat
 * er niet bij hoort, precies op de plek waar iemand zijn gegevens invult.
 *
 * Alleen de buitenkant wordt overgenomen. De opbouw van het formulier, de
 * velden en de foutmeldingen blijven van de plug-in, zodat een update niets
 * stukmaakt.
 */
.pv-formulier .ff-el-group { margin-bottom: 1.1rem; }

.pv-formulier .ff-el-input--label label {
	font-family: var(--pv-display);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--pv-inkt);
	margin-bottom: 0.4rem;
}

.pv-formulier .ff-el-is-required.asterisk-right label::after { color: var(--pv-oranje); }

.pv-formulier .ff-el-form-control {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--pv-rand);
	border-radius: var(--pv-radius);
	background: var(--pv-wit);
	color: var(--pv-inkt);
	font-family: var(--pv-body);
	font-size: 0.9375rem;
	line-height: 1.5;
	box-shadow: none;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.pv-formulier .ff-el-form-control::placeholder { color: var(--pv-grijs-licht); }

.pv-formulier .ff-el-form-control:focus {
	border-color: var(--pv-paars-cta);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pv-paars) 22%, transparent);
	outline: none;
}

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

/*
 * De vorm van de knop komt hiervandaan, de kleur uit de plug-in zelf. Die
 * zet hem met een regel die zwaarder weegt dan alles wat je hier kunt
 * schrijven, dus staat de actiekleur ingesteld bij het formulier. Eén plek,
 * geen gevecht om voorrang.
 */
.pv-formulier .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 999px;
	color: #fff;
	font-family: var(--pv-display);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

/* Met .pv ervoor: Fluent Forms zet de achtergrondkleur met een eigen
   regel die zwaarder weegt, en die geldt ook tijdens het aanwijzen. */
.pv .pv-formulier .ff-btn-submit:hover {
	background: var(--pv-oranje-hover);
	color: #fff;
	transform: translateY(-1px);
}

.pv-formulier .ff-btn-submit:focus-visible {
	outline: 2px solid var(--pv-inkt);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	/* Met .pv ervoor: Fluent Forms zet de achtergrondkleur met een eigen
   regel die zwaarder weegt, en die geldt ook tijdens het aanwijzen. */
.pv .pv-formulier .ff-btn-submit:hover { transform: none; }
}
/* ======================================================= gelegenheid == */

/*
 * Het verhaal met het advies ernaast.
 *
 * Twee kolommen en geen kaart bovenaan: de tips gaan over wat er in de tekst
 * staat, dus ze horen ernaast en niet ervoor. De kolom loopt mee tijdens het
 * scrollen, zodat het advies in beeld blijft zolang het verhaal duurt.
 */
.pv-verhaal {
	display: grid;
	gap: clamp(2rem, 1rem + 3vw, 3.5rem);
	align-items: start;
}

@media (min-width: 900px) {
	.pv-verhaal { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
	.pv-tips { position: sticky; top: 6rem; }

	/*
	 * Is de kolom ernaast verborgen, bijvoorbeeld omdat de tekst te weinig
	 * tussenkoppen heeft voor een inhoudsopgave, dan mag hij zijn plek niet
	 * bezet houden. Anders staat de tekst op tweederde met een gat ernaast.
	 */
	.pv-verhaal:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }
}

.pv-tips {
	padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
	border: 1px solid var(--pv-rand);
	border-radius: var(--pv-radius-lg);
	background: var(--pv-wit);
	box-shadow: 0 22px 48px -42px rgba(20, 16, 33, 0.9);
}

.pv-tips ul {
	display: grid;
	gap: 1.1rem;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
}

.pv-tips li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.7rem;
	align-items: start;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--pv-grijs);
}

.pv-tips strong {
	display: block;
	margin-bottom: 0.15rem;
	font-family: var(--pv-display);
	font-size: 0.9375rem;
	color: var(--pv-inkt);
}

/* Het vinkje groen, net als bij de vergelijking: daar betekent het hetzelfde. */
.pv-tips__icoon {
	display: grid;
	place-items: center;
	width: 1.4rem;
	height: 1.4rem;
	margin-top: 0.1rem;
	border-radius: 999px;
	background: var(--pv-groen-mist);
	color: var(--pv-groen);
}

.pv-tips__icoon svg { width: 0.85rem; height: 0.85rem; stroke-width: 2.4; }

/*
 * De foto's van dit soort feest staan op het donkere vlak. Een verlichte vloer
 * op een witte pagina is een foto van een lamp; op zwart zie je waar je voor
 * betaalt. De kaarten zijn dezelfde als op de voorbeeldenpagina.
 */
.pv-sectie--paars .pv-cases__leeg { color: rgba(255, 255, 255, 0.72); }
/* ---------------------------------------------- inhoudsopgave bij een tekst -- */

/*
 * Dezelfde kaart als de tips, andere inhoud. Op een pagina van achthonderd
 * woorden waar iemand met één vraag binnenkomt laat dit meteen zien dat zijn
 * antwoord erbij staat en waar. Hij wordt door ui.js gevuld en pas dan
 * zichtbaar gemaakt.
 */
.pv-inhoudsopgave ol {
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: pv-opgave;
}

.pv-inhoudsopgave li { counter-increment: pv-opgave; }

.pv .pv-inhoudsopgave a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.65rem;
	align-items: baseline;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--pv-rand);
	color: var(--pv-grijs);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.45;
	text-decoration: none;
	transition: color 0.16s ease;
}

.pv .pv-inhoudsopgave li:last-child a { border-bottom: 0; }
.pv .pv-inhoudsopgave a:hover { color: var(--pv-inkt); }

.pv .pv-inhoudsopgave a::before {
	content: counter(pv-opgave, decimal-leading-zero);
	font-family: var(--pv-display);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--pv-oranje);
	font-variant-numeric: tabular-nums;
}

/* Anders verdwijnt de kop onder de balk bovenaan zodra je een link volgt. */
.pv-prose h2 { scroll-margin-top: 6rem; }
/* ========================================================== paginakop == */

/*
 * De kop van elke pagina buiten de homepage. Hetzelfde donkere vlak met de
 * paarse gloed als de zware secties, maar lager: hier staat geen boodschap
 * maar een wegwijzer. De hero mag een half scherm vullen, deze kop niet.
 */
.pv-paginakop {
	background:
		radial-gradient(120% 200% at 92% -60%,
			color-mix(in srgb, var(--pv-paars) 45%, transparent) 0%,
			transparent 70%),
		linear-gradient(200deg, var(--pv-paars-diep) 0%, #1A0640 55%, #0B0119 100%);
	color: rgba(255, 255, 255, 0.78);
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.pv-paginakop h1 {
	color: #fff;
	font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
	max-width: 22ch;
}

.pv-paginakop .pv-eyebrow { color: var(--pv-oranje); }
.pv-paginakop .pv-eyebrow::before { background: var(--pv-oranje); }

.pv-paginakop__intro {
	margin-top: 1.1rem;
	max-width: 58ch;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	color: rgba(255, 255, 255, 0.76);
}

/* Het kruimelpad: klein, boven de titel, en nooit belangrijker dan de titel. */
.pv-kruimels {
	margin-bottom: 1rem;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.5);
}

.pv .pv-kruimels a { color: rgba(255, 255, 255, 0.76); text-decoration: none; }
.pv .pv-kruimels a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.pv-kruimels .separator,
.pv-kruimels [aria-hidden="true"] { margin-inline: 0.4rem; color: rgba(255, 255, 255, 0.3); }

/* ============================================================== tekst == */

/*
 * Lopende tekst op een inhoudspagina: de voorwaarden, het privacybeleid, de
 * uitleg op een onderwerppagina. Alles wat de redacteur in de editor typt komt
 * hier binnen, dus het moet kloppen zonder dat iemand er klassen op zet.
 */
.pv-prose {
	max-width: 68ch;
	font-size: 1.0625rem;
	line-height: 1.75;
}

/*
 * Met .pv ervoor, en dat is geen sierselector.
 *
 * Een sterretje telt niet mee voor het gewicht van een selector, dus
 * .pv-prose > * + * weegt net zo licht als .pv-prose zelf, en dat verliest
 * van de .pv p hierboven die alle marges op nul zet. Gevolg: alinea's in
 * lopende tekst plakten aan elkaar. Met .pv erbij telt er een klasse extra
 * mee en wint deze regel wel.
 */
.pv .pv-prose > * + * { margin-top: 1.25rem; }

.pv-prose h2 {
	margin-top: 2.5rem;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.pv-prose h3 {
	margin-top: 2rem;
	font-size: 1.25rem;
}

.pv-prose ul,
.pv-prose ol { padding-inline-start: 1.35rem; display: grid; gap: 0.5rem; }
.pv-prose li::marker { color: var(--pv-oranje); }

.pv-prose a { color: var(--pv-paars-cta); text-underline-offset: 3px; }

.pv-prose blockquote {
	margin-inline: 0;
	padding: 1.1rem 1.35rem;
	border-inline-start: 3px solid var(--pv-oranje);
	border-radius: var(--pv-radius);
	background: var(--pv-mist);
	color: var(--pv-inkt);
}

.pv-prose img { border-radius: var(--pv-radius-lg); }

.pv-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.pv-prose th,
.pv-prose td {
	padding: 0.75rem 0.85rem;
	border-bottom: 1px solid var(--pv-rand);
	text-align: start;
}

.pv-prose th { color: var(--pv-inkt); }

/* ============================================================== tabel == */

/*
 * De vergelijkingstabel met alle maten. Een tabel en geen kaartenraster: acht
 * rijen met dezelfde vier kolommen zijn gemaakt om te vergelijken, en dat is
 * precies waarom iemand deze pagina opent.
 */
.pv-tabelwikkel {
	overflow-x: auto;
	border: 1px solid var(--pv-rand);
	border-radius: var(--pv-radius-lg);
	background: var(--pv-wit);
}

.pv-tabel {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.pv-tabel th,
.pv-tabel td {
	padding: 0.9rem 1.1rem;
	text-align: start;
	border-bottom: 1px solid var(--pv-rand);
}

.pv-tabel thead th {
	font-family: var(--pv-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pv-grijs-licht);
	background: var(--pv-mist);
}

.pv-tabel tbody tr:last-child th,
.pv-tabel tbody tr:last-child td { border-bottom: 0; }

.pv-tabel tbody th {
	font-family: var(--pv-display);
	font-size: 1rem;
	color: var(--pv-inkt);
}

/*
 * De maat is zwart en niet paars of onderstreept. In een tabel waar elke rij
 * over precies die maat gaat, is een gekleurde link geen hulp maar ruis: acht
 * rijen met acht gekleurde woorden leest als een lijst met fouten erin. Dat
 * het een link is blijkt uit de cursor en uit de kleur die hij bij aanwijzen
 * aanneemt.
 */
.pv-tabel tbody th a {
	color: var(--pv-inkt);
	text-decoration: none;
}

.pv-tabel tbody th a:hover {
	color: var(--pv-oranje-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pv-tabel tbody tr:hover { background: color-mix(in srgb, var(--pv-oranje) 5%, transparent); }

/*
 * Een rij die klikt moet dat ook laten zien. De klasse komt van ui.js en
 * alleen als er echt een link in de rij staat; zonder script blijft de rij een
 * gewone rij en belooft de cursor niets wat er niet is.
 */
.pv-tabel tbody tr.is-klikbaar { cursor: pointer; }

.pv-tabel tbody tr.is-klikbaar:hover th a {
	color: var(--pv-oranje-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* De uitgelichte rij krijgt een oranje kant, net als de kaart op de homepage. */
.pv-tabel tr.is-uit th { box-shadow: inset 3px 0 0 var(--pv-oranje); }
.pv-tabel tr.is-uit { background: color-mix(in srgb, var(--pv-oranje) 7%, transparent); }

.pv-tabel__vlag {
	display: inline-block;
	margin-inline-start: 0.5rem;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--pv-oranje) 16%, transparent);
	color: var(--pv-oranje-hover);
	font-family: var(--pv-body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pv-tabel__prijs { white-space: nowrap; }
.pv-tabel__prijs s { color: var(--pv-grijs-licht); margin-inline-end: 0.35rem; }
.pv-tabel__prijs strong { font-family: var(--pv-display); font-size: 1.0625rem; color: var(--pv-inkt); }
.pv-tabel__prijs small { display: block; font-size: 0.75rem; color: var(--pv-grijs-licht); }

/*
 * Op telefoon en tablet geen tabel maar kaartjes, in dezelfde vorm als de
 * maatkeuze in de boekingsfunnel.
 *
 * Vier kolommen passen niet op 375 pixels: de tabel werd 544 breed en je moest
 * opzij vegen om de prijs te zien. Wie dat niet doorheeft, denkt dat er drie
 * kolommen zijn.
 *
 * Eerst stond er per rij een lijstje met vier labels onder elkaar. Dat paste
 * wel, maar het waren vier regels voor drie getallen. Nu dezelfde opbouw als in
 * de funnel: maat en prijs op één regel, en daaronder in één zin wat je ervoor
 * krijgt. Wie van de site naar de aanvraag gaat ziet twee keer hetzelfde blok.
 *
 * Op een laptop blijft het een tabel: daar is naast elkaar vergelijken juist de
 * bedoeling, en dan zijn kolommen sneller dan kaartjes.
 *
 * Het verschil zit niet in de breedte maar in pointer: coarse, oftewel bedien
 * je dit met een vinger of met een muis. Op breedte alleen ging het mis: een
 * laptopvenster dat niet schermvullend staat is zo onder de 1024 pixels, en
 * dan kreeg een laptop de kaartjes van een tablet. Een vinger heeft grotere
 * klikdoelen nodig en kan niet netjes horizontaal scrollen; een muis wel.
 *
 * De tabel blijft een tabel voor een schermlezer: alleen de weergave verandert,
 * de opbouw niet.
 */
@media (max-width: 1024px) and (pointer: coarse) {
	.pv-tabelwikkel {
		overflow-x: visible;
		border: 0;
		background: none;
	}

	.pv-tabel { min-width: 0; }
	.pv-tabel thead { display: none; }
	.pv-tabel tbody { display: block; }

	/*
	 * Vier kolommen in het raster: de maat neemt de eerste drie, de prijs de
	 * vierde over twee regels. Daaronder staan het oppervlak en het aantal
	 * dansers naast elkaar in kolom één en twee.
	 */
	.pv-tabel tbody tr {
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr) auto;
		column-gap: 0.4rem;
		row-gap: 0.2rem;
		align-items: baseline;
		margin-bottom: 0.7rem;
		padding: 1rem 1.15rem;
		border: 1px solid var(--pv-rand);
		border-radius: var(--pv-radius-lg);
		background: var(--pv-wit);
	}

	.pv-tabel tbody tr:last-child { margin-bottom: 0; }
	.pv-tabel tbody tr:hover { background: var(--pv-wit); }

	.pv-tabel tbody th,
	.pv-tabel tbody td {
		display: block;
		padding: 0;
		border: 0;
	}

	.pv-tabel tbody th {
		grid-column: 1 / 4;
		grid-row: 1;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem;
		font-size: 1rem;
	}

	.pv-tabel tbody td.pv-tabel__prijs {
		grid-column: 4;
		grid-row: 1 / 3;
		align-self: center;
		text-align: end;
		white-space: normal;
	}

	.pv-tabel__bedrag { white-space: nowrap; }

	/* Oppervlak en dansers vormen samen de regel eronder. */
	.pv-tabel tbody td:not(.pv-tabel__prijs) {
		grid-row: 2;
		font-size: 0.875rem;
		color: var(--pv-grijs);
	}

	/*
	 * Het oppervlak en het aantal dansers vormen samen één korte regel:
	 * "13 m², ± 25 dansers". Er stond eerst "ruimte voor" tussen, maar dat
	 * zijn twee losse cellen naast elkaar en dan brak die zin midden in het
	 * eerste stuk af: "13 m², ruimte" op de ene regel en "voor" op de andere.
	 * Korter is hier ook duidelijker.
	 */
	.pv-tabel tbody td:not(.pv-tabel__prijs) { white-space: nowrap; }
	.pv-tabel tbody td:not(.pv-tabel__prijs)::before { content: none; }
	.pv-tabel tbody td:first-of-type::after { content: ","; }
	.pv-tabel tbody td:nth-of-type(2)::after { content: " dansers"; }

	/* De uitgelichte maat houdt zijn rand, en het vlaggetje schuift mee. */
	.pv-tabel tr.is-uit { border-color: color-mix(in srgb, var(--pv-oranje) 55%, transparent); }
}

/*
 * Op een tablet twee kaartjes naast elkaar. Eén kaartje over de volle breedte
 * zet de maat en de prijs zo ver uit elkaar dat je oog de regel kwijtraakt.
 */
@media (min-width: 601px) and (max-width: 1024px) and (pointer: coarse) {
	.pv-tabel tbody {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.7rem;
	}

	.pv-tabel tbody tr { margin-bottom: 0; }
}
/* ============================================================== footer == */

/*
 * Vier kolommen boven, twee brede regels met doorverwijzingen daaronder, en
 * pas onderin het kleine grut. Zo loopt het van "wie zijn dit" naar "waar kan
 * ik heen" naar "wat mag ik van jullie verwachten".
 */
.pv-footer {
	background: var(--pv-inkt);
	color: rgba(255, 255, 255, 0.62);
	padding-block: var(--pv-blok) var(--pv-klein);
	font-size: 0.9375rem;
}

.pv-footer__binnen {
	display: grid;
	gap: 2.5rem clamp(1.5rem, 1rem + 2vw, 3.5rem);
	grid-template-columns: 1.5fr 1fr 1fr 1.6fr;
	padding-block-end: var(--pv-blok);
}

@media (max-width: 1000px) {
	.pv-footer__binnen { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.pv-footer__binnen { grid-template-columns: 1fr; }
}

/*
 * De kolomkopjes in de merkkleur. Nu de links vol wit zijn, hebben kopje en
 * link dezelfde kleur en valt de rangorde weg. Oranje zet ze uit elkaar zonder
 * dat er een lijn of een extra witregel bij hoeft, en het rijmt op de labels
 * boven elke sectie hogerop de pagina. Op het donkere vlak haalt het 5,7:1.
 */
.pv-footer h4 {
	color: var(--pv-oranje);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 1.1rem;
	font-family: var(--pv-body);
}

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

.pv .pv-footer a { color: #fff; text-decoration: none; }

/* De hover onderstreept, want wit kan niet witter. */
.pv .pv-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

.pv-footer__logo img { height: 40px; width: auto; margin-bottom: 1.1rem; }
.pv-footer__merk p { line-height: 1.65; }

.pv-footer__adres {
	margin-top: 1.25rem;
	font-style: normal;
	display: grid;
	gap: 0.15rem;
	line-height: 1.5;
}

.pv-footer__adres strong { color: #fff; }

.pv-footer__nummers {
	margin-top: 0.9rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 1rem;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.42);
}

/* Vierkante knoppen met ronde hoeken, zoals in het voorbeeld. */
.pv-footer__socials {
	display: flex !important;
	gap: 0.6rem;
	margin-top: 1.4rem;
}

.pv-footer__socials a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--pv-radius);
	font-weight: 700;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.pv .pv-footer__socials a:hover {
	border-color: var(--pv-oranje);
	background: color-mix(in srgb, var(--pv-oranje) 14%, transparent);
	text-decoration: none;
}

/* ------------------------------------------------------ contactkolom -- */

/*
 * Elk contactgegeven met een icoon en een regel eronder die zegt wat je kunt
 * verwachten. "06 12047582" is een nummer; "bellen of appen, ook in het
 * weekend" is een belofte, en dat tweede is waarom iemand belt.
 */
.pv-contactlijst { gap: 1.1rem !important; }

.pv-contactlijst li {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
}

.pv-contactlijst__icoon {
	flex: none;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--pv-radius);
	color: var(--pv-oranje);
}

.pv-contactlijst a,
.pv-contactlijst strong {
	display: block;
	color: #fff;
	font-size: 1rem;
	line-height: 1.35;
}

.pv-contactlijst small {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.5);
}

.pv .pv-footer__score {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-top: 1.5rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--pv-radius-lg);
	transition: border-color 0.18s ease;
}

/* Het hele vak is de link, dus de onderstreping bij hover hoort er hier niet:
   die zou alleen onder het cijfer verschijnen en niet onder het kader. */
.pv .pv-footer__score,
.pv .pv-footer__score:hover { text-decoration: none; }

.pv .pv-footer__score:hover { border-color: var(--pv-oranje); }

.pv-footer__sterren {
	color: var(--pv-goud);
	letter-spacing: 0.08em;
	font-size: 1rem;
}

.pv-footer__score strong { display: block; color: #fff; }

.pv-footer__score small {
	display: block;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------ de twee brede regels -- */

/*
 * Waar we komen en wat er te lezen valt. Als losse kolom zouden het twaalf
 * provincies onder elkaar worden; op één regel met puntjes ertussen is het een
 * zin die je scant in plaats van een lijst die je overslaat.
 */
.pv-footer__breed {
	display: grid;
	gap: 1.4rem;
	padding-block: var(--pv-blok);
	border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.pv-footer__rij h4 { margin-bottom: 0.7rem; }

.pv-footer__punten {
	display: inline !important;
	gap: 0 !important;
}

.pv-footer__punten li {
	display: inline;
	line-height: 2;
}

.pv .pv-footer__punten a { color: rgba(255, 255, 255, 0.78); }
.pv .pv-footer__punten a:hover { color: #fff; }

.pv-footer__punt {
	margin-inline: 0.45rem;
	color: rgba(255, 255, 255, 0.42);
}

/* Het laatste puntje hoort er niet, want daarna komt de doorlink. */
.pv-footer__punten li:last-child .pv-footer__punt,
.pv-footer__punten > li:last-child > .pv-footer__punt { display: none; }

.pv .pv-footer__meer {
	font-weight: 700;
	white-space: nowrap;
}

.pv .pv-footer__meer::before {
	content: "·";
	margin-inline: 0.45rem;
	color: rgba(255, 255, 255, 0.42);
	font-weight: 400;
}

/* Een knop die als link in een zin staat, bijvoorbeeld in het cookiebeleid. */
.pv-tekstknop {
	appearance: none;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--pv-paars-cta);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pv-tekstknop:hover,
.pv-tekstknop:focus-visible { color: var(--pv-paars-hover); }

/*
 * De ingang naar de cookiekeuze, als tekst tussen de voettekst.
 *
 * Een knop die eruitziet als een knop vraagt om aandacht die hij niet
 * verdient: niemand komt hier om zijn cookies te herzien, maar wie dat wel
 * wil moet het kunnen vinden. Dus dezelfde grootte en kleur als de regel
 * ernaast, met een onderstreping bij hover zodat je ziet dat het klikbaar is.
 */
.pv-footer__cookies {
	appearance: none;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.25);
	text-underline-offset: 3px;
	transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.pv-footer__cookies:hover,
.pv-footer__cookies:focus-visible {
	color: #fff;
	text-decoration-color: currentColor;
}

.pv-footer__balk {
	padding-block: 1.25rem;
	border-block-start: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: space-between;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.42);
}

/* --------------------------------------------------------- hulpmiddelen -- */

.pv-proefbalk {
	background: var(--pv-paars-cta);
	color: #fff;
	text-align: center;
	padding: 0.6rem 1rem;
	font-size: 0.875rem;
}

.pv-proefbalk a { color: #fff; font-weight: 700; }

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

@media (prefers-reduced-motion: reduce) {
	.pv * { transition: none !important; }
	.pv-fkaart:hover, .pv-feest:hover, .pv-knop:hover { transform: none; }
}


/* =================================================== gedeelde onderdelen == */

/*
 * De cookiebanner en de zwevende WhatsApp-knop komen uit de plugin en staan op
 * élke pagina, ook op deze. Hun opmaak stond alleen in main.css, en die laadt
 * hier niet mee: zonder dit blok werd de WhatsApp-knop een beeldvullend zwart
 * icoon en had de cookiebanner helemaal geen opmaak.
 *
 * De regels zijn letterlijk overgenomen uit main.css, inclusief hun
 * --dvv-variabelen; die krijgen hieronder hun waarde. Overtypen zou betekenen
 * dat er twee versies van dezelfde banner ontstaan die uit elkaar gaan lopen.
 * Zodra deze opzet live gaat verhuist dit blok terug naar één plek.
 */
:root {
	--dvv-body:      var(--pv-body);
	--dvv-white:     #F5F2FF;
	--dvv-muted:     #A5A3C4;
	--dvv-neon:      #B14CFF;
	--dvv-neon-soft: #D89CFF;
	--dvv-magenta:   #FF3FA4;
	--dvv-cyan:      #35E0F0;
	--dvv-lime:      #4DE38A;
	--dvv-rand:      color-mix(in srgb, #F5F2FF 12%, transparent);
	--dvv-radius:    6px;
}

/*
 * De zwevende WhatsApp-knop: overal een ronde bel.
 *
 * Er stond "App ons" naast op een breed scherm. Dat is drie keer zo breed
 * voor informatie die het icoon zelf al geeft: iedereen herkent dat groene
 * telefoontje. Zonder tekst ligt hij bovendien rustiger op de foto's, en is
 * hij op elk scherm hetzelfde ding.
 *
 * De tekst blijft wel in de HTML staan, verborgen, zodat een schermlezer
 * hem nog steeds voorleest.
 */
.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;
	justify-content: center;
	width: 58px;
	height: 58px;
	padding: 0;
	border-radius: 50%;
	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 24px -2px color-mix(in srgb, #25D366 50%, transparent),
	            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: 28px; height: 28px; fill: currentColor; flex: none; }

/*
 * De gloed om de belknop.
 *
 * Een ring die rustig uitdijt en vervaagt. Niet om op te vallen als een
 * reclamebanner, maar omdat de knop anders stil op de foto's ligt en pas
 * opvalt als je er toevallig overheen kijkt. Eén ring en geen drie: het moet
 * een hartslag zijn en geen alarm.
 *
 * De ring zit op een pseudo-element en niet op de knop zelf, zodat hij buiten
 * de knop kan groeien zonder de knop te vergroten. Hij vangt geen klikken op.
 */
.dvv-whatsapp::before {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: inherit;
	border: 2px solid color-mix(in srgb, #25D366 60%, transparent);
	opacity: 0;
	pointer-events: none;
	animation: dvv-wa-puls 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

@keyframes dvv-wa-puls {
	0%   { transform: scale(0.94); opacity: 0.6; }
	65%  { transform: scale(1.22); opacity: 0; }
	100% { transform: scale(1.22); opacity: 0; }
}

/* Wie beweging heeft uitgezet krijgt de ring stil te zien: het effect is dan
   een randje en geen hartslag, maar de knop valt nog steeds op. */
@media (prefers-reduced-motion: reduce) {
	.dvv-whatsapp::before { animation: none; opacity: 0.45; transform: none; }
}

/* Alleen voorgelezen, niet getekend. */
.dvv-whatsapp__tekst {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* Op de telefoon een tikje kleiner en dichter op de rand. */
@media (max-width: 640px) {
	.dvv-whatsapp { right: 14px; width: 54px; height: 54px; }
}

/* --- 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%; }
}

/*
 * Staat het menu open, dan gaat de belknop weg.
 *
 * Hij zweeft rechtsonder en ligt daarmee precies over de Reserveren-knop
 * onderin het menu. Wegfaden in plaats van meteen verbergen, anders knippert
 * hij weg terwijl het paneel nog naar binnen schuift.
 */
body.dvv-menu-open .dvv-whatsapp {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}