/*
 * Aanvullingen op de opmaak van de nieuwe stijl.
 *
 * Dit bestand staat los van `q-nieuw.css`, en dat is met opzet: dat bestand is de
 * ONGEWIJZIGDE bouwuitvoer van de bronsite. Zodra daar een nieuwe versie van komt, wordt
 * die er zo overheen gezet — en dan mag er niets van ons in verdwijnen.
 *
 * Alles hieronder is dus een bewuste afwijking van de bron, met de reden erbij.
 *
 * Let op de laagloze opzet: deze regels staan buiten `@layer` en winnen daarom van de
 * Tailwind-lagen in q-nieuw.css. Precies de bedoeling — maar wees er zuinig mee, want het
 * is dezelfde bijl waarmee een oud themabestand de hele vormgeving kon overstemmen.
 */

/* ------------------------------------------------------------------ logowand */

/*
 * De klantlogo's zijn merklogo's in hun eigen kleuren: een donkergrijze letter, een zwarte
 * naam naast een gekleurd beeldmerk. Op de lichte achtergrond leest dat prima, maar in de
 * donkere weergave valt de helft weg — op de bronsite net zo goed als hier.
 *
 * Inverteren is geen optie: dan wordt het oranje van FC Volendam blauw, en een merklogo
 * verkleuren is erger dan het niet tonen.
 *
 * Daarom krijgt elk logo in de donkere weergave een licht vlak onder zich. Het logo houdt
 * zijn eigen kleuren, en het vlak is afgerond en zacht genoeg om niet als plakker te lezen.
 *
 * Wie een logo heeft dat WEL goed werkt op donker, kan er onder Logo's een aparte versie
 * voor de donkere weergave bij zetten; dan vervalt het vlak voor dat ene logo.
 */
[data-theme-status='dark'] .logo-wall__logo-target:not(.heeft-donkere-versie) {
	background-color: #f4f2f4;
	border-radius: var(--radius-qz, 6px);
	padding: 10px 14px;
	/* Iets ruimer dan het logo zelf, zodat het niet tegen de rand plakt. */
	box-sizing: border-box;
}

[data-theme-status='dark'] .logo-wall__logo-target:not(.heeft-donkere-versie) .logo-wall__logo-img {
	/* Op een licht vlak mag het logo op volle sterkte staan; de 0.7 uit de bron is
	   afgestemd op een lichte pagina-achtergrond. */
	opacity: 0.85;
}

/* Een aangeleverde donkere-weergaveversie heeft het vlak niet nodig. */
[data-theme-status='dark'] .logo-wall__logo-target.heeft-donkere-versie .logo-wall__logo-img {
	opacity: 0.85;
}

/* -------------------------------------------------------------- mobiel menu */

/*
 * Het menu moet kunnen scrollen.
 *
 * Klap je onder Expertises de lijst open, dan is het menu langer dan het scherm en zijn de
 * onderste knoppen — de contactgegevens en de weergaveschakelaar — niet meer te bereiken.
 * Er is dan niets aan te doen: de pagina eronder staat vast zolang het menu open is, en het
 * menu zelf schuift niet.
 *
 * `data-lenis-prevent` staat in de HTML: dat vertelt het soepel-scrollen dat het hier van
 * het gewone scrollen van de browser af moet blijven. Zonder dat vangt Lenis de beweging
 * op en gebeurt er alsnog niets.
 */
.bottom-nav__panel {
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Ruimte onderaan, zodat het laatste item niet tegen de rand van het scherm plakt. */
.bottom-nav__voet {
	padding-bottom: 8px;
}

/* ------------------------------------------------------- oplichtende zin */

/*
 * De woorden van de openingszin.
 *
 * Op de bronsite zijn dit `<div>`s met een inline stijl, door React toegevoegd nadat de
 * pagina is ingelezen. Wij sturen de HTML vanaf de server mee, en dan kan dat niet: een
 * `<div>` binnen een `<p>` laat de browser de alinea sluiten en de zin valt uit zijn
 * opmaak. Vandaar spans — met dezelfde eigenschappen die daar inline stonden.
 */
.qz-intro__woord {
	position: relative;
	display: inline-block;
}

/* --------------------------------------------------------------------------
   De planner in de nieuwe stijl

   De plugin `qstylez-planner` heeft een eigen, losstaande vormgeving: hij moet ook bij een
   klant werken die ons thema niet heeft. Alles wat kleur, rand of ruimte bepaalt staat daar
   in variabelen, en die worden hier omgezet naar de tokens van de nieuwe stijl.

   Zo blijft de plugin ongewijzigd, past de planner zich vanzelf aan de lichte én de donkere
   weergave aan, en blijft er één plek waar de kleuren van de site staan.
   -------------------------------------------------------------------------- */

.qz-planner .qsp {
	--qsp-accent: var(--color-qz-actie);
	--qsp-accent-hover: var(--color-qz-actie-hover);
	--qsp-inkt: var(--color-qz-text);
	--qsp-grijs: var(--color-qz-text-zacht);
	--qsp-rand: var(--color-qz-lijn);
	--qsp-rand-sterk: var(--color-qz-lijn-actief);
	--qsp-vlak: var(--color-qz-vlak);
	--qsp-zacht: var(--color-qz-vlak-zacht);
	--qsp-straal: var(--radius-qz);
	--qsp-straal-klein: var(--radius-qz);

	/* De planner staat in de tekstkolom van de pagina en loopt met de container mee. */
	max-width: none;
}

/* Dezelfde ruimte in de kaart als in het ontwerp: 32 px, niet 24. */
.qz-planner .qsp-kaart {
	padding: 2rem;
}

/*
 * De drie kaarten naast elkaar vanaf een breed scherm, in hetzelfde raster als het ontwerp:
 * gelijke kolommen met 24 px ertussen. De plugin gebruikt een auto-fit-raster, en dat legt
 * bij een brede container een vierde kolom aan die leeg blijft.
 */
@media (min-width: 64rem) {
	.qz-planner .qsp-kaarten {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Een laag die aansluit op de laag erboven

   In het ontwerp staan sommige blokken in dezelfde sectie als wat erboven staat: op
   /plan-een-afspraak/ hoort "Liever meteen iemand spreken?" bij de afspraakvormen, met 56 px
   ertussen en niet de volle 224 px van twee sectieranden.

   In de pagebuilder zijn het twee lagen, en de bovenste is al weggeschreven op het moment
   dat de onderste rendert. Vandaar `:has()`: de sectie die een aansluitende laag als
   volgende buur heeft, laat zijn onderruimte weg.
   -------------------------------------------------------------------------- */

.qz-sectie:has(+ .qz-sectie--aansluitend) {
	padding-bottom: 0;
}

.qz-sectie--aansluitend {
	padding-top: 0;
}

/* --------------------------------------------------------------------------
   Gravity Forms in de nieuwe stijl

   De plugin brengt een complete eigen vormgeving mee ("gravity-theme"), en die wint het van
   de opmaak van de site: het is losse plugin-CSS en die staat niet in een `@layer`. Alles
   wat je hier ziet is dus geen versiering maar een terugzetting naar de waarden van het
   ontwerp, gemeten op de bronsite:

     veldruimte 24 px  ·  label 1rem/600 met 8 px eronder  ·  invoer 50 px hoog met
     12/16 padding  ·  tekstvak 170 px  ·  keuzes in twee kolommen  ·  knop 14/28

   Alleen binnen `.qz-formulier`, zodat de formulieren op de rest van de site hun eigen
   weergave houden. De site staat op de "legacy markup" van Gravity Forms — de wrapper heet
   dus `gform_legacy_markup_wrapper` en niet `gravity-theme`, en de plugin-CSS wordt hier
   helemaal niet geladen. Alles wat je hieronder ziet is dus de enige opmaak die er is.
   -------------------------------------------------------------------------- */

/*
 * Gravity Forms zet 16 px boven en onder het hele formulier. De ruimte eromheen bepaalt de
 * pagina al; hier zou hij er alleen bovenop komen.
 */
.qz-formulier .gform_wrapper {
	margin: 0;
}

.qz-formulier .gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

/*
 * Een veld over de volle breedte: de keuzelijst en het tekstvak.
 *
 * Ook de marge eraf. Gravity Forms zet 16 px boven elk veld, en in een raster komt die
 * bovenop de 24 px veldruimte — vier rijen lang, dus het formulier werd er 64 px hoger van.
 */
.qz-formulier .gform_wrapper .gfield {
	grid-column: span 2;
	margin: 0;
	padding: 0;
}

.qz-formulier .gform_wrapper .gfield--width-half {
	grid-column: span 1;
}

@media (max-width: 40rem) {
	.qz-formulier .gform_wrapper .gfield--width-half {
		grid-column: span 2;
	}
}

/* Overal `.gfield` ertussen: de regels van Gravity Forms hebben er ook drie klassen voor
   staan, en zonder deze schakel wint de plugin. */
.qz-formulier .gform_wrapper .gfield .gfield_label,
.qz-formulier .gform_wrapper .gfield legend.gfield_label,
.qz-formulier .gform_wrapper .gfield > .gfield_label {
	display: block;
	margin: 0 0 0.5rem;
	color: var(--color-qz-text);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.6;
}

/*
 * Gravity Forms zet nog 8 px boven het invoerveld, bovenop de 8 px onder het label. Samen 16,
 * en dan staat elk veld 5 px hoger dan in het ontwerp.
 */
.qz-formulier .gform_wrapper .gfield .ginput_container {
	margin: 0;
	padding: 0;
}

/* "(niet verplicht)" staat er lichter en grijzer achter, niet als tweede regel eronder. */
.qz-formulier .qz-form__erbij {
	margin-left: 0.375rem;
	color: var(--color-qz-text-zacht);
	font-weight: 400;
}

.qz-formulier .gform_wrapper .gfield_description {
	margin: 0 0 0.75rem;
	padding: 0;
	color: var(--color-qz-text-zacht);
	font-size: 0.875rem;
	line-height: 1.4286;
}

/*
 * De lange rij `:not()` is geen sierlijkheid maar noodzaak. Gravity Forms stuurt zijn
 * invoervelden met precies deze vorm aan, en elke `:not()` telt mee voor het gewicht van de
 * selector. Een nette korte regel als `.qz-formulier input[type="text"]` verliest daarvan,
 * en dan blijven de velden 36 px hoog met 5 px ruimte erin. Door dezelfde vorm over te nemen
 * en er de eigen klassen voor te zetten, is het onmiskenbaar de zwaarste — en is meteen te
 * zien tegen welke regel hij het opneemt.
 */
.qz-formulier .gform_wrapper .ginput_container input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
.qz-formulier .gform_wrapper .ginput_container select,
.qz-formulier .gform_wrapper .ginput_container textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-qz-lijn);
	border-radius: var(--radius-qz);
	background: var(--color-qz-vlak);
	color: var(--color-qz-text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

.qz-formulier .gform_wrapper .ginput_container .ginput_container textarea,
.qz-formulier .gform_wrapper .gfield .ginput_container textarea {
	height: 170px;
	resize: vertical;
}

.qz-formulier .gform_wrapper .ginput_container input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):focus-visible,
.qz-formulier .gform_wrapper .ginput_container select:focus-visible,
.qz-formulier .gform_wrapper .ginput_container textarea:focus-visible {
	border-color: var(--color-qz-lijn-actief);
	outline: 2px solid var(--color-qz-actie);
	outline-offset: 2px;
}

/* De keuzes in twee kolommen, met het vinkje op de regel van zijn tekst. */
.qz-formulier .gform_wrapper .gfield_checkbox,
.qz-formulier .gform_wrapper .gfield_radio {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.25rem 1.5rem;
}

@media (max-width: 40rem) {
	.qz-formulier .gform_wrapper .gfield_checkbox,
	.qz-formulier .gform_wrapper .gfield_radio {
		grid-template-columns: minmax(0, 1fr);
	}
}

.qz-formulier .gform_wrapper .gfield .gfield_checkbox,
.qz-formulier .gform_wrapper .gfield .gfield_radio {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qz-formulier .gform_wrapper .gchoice {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2.25rem;
	margin: 0;
}

.qz-formulier .gform_wrapper .gfield .gchoice input {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	accent-color: var(--color-qz-merk);
}

.qz-formulier .gform_wrapper .gfield .gchoice label {
	margin: 0;
	padding: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
}

/* De knop, in de vorm van de gevulde knop van de site. */
.qz-formulier .gform_wrapper .gform_footer {
	margin: 2rem 0 0;
	padding: 0;
}

.qz-formulier .gform_wrapper .gform_button {
	padding: 0.875rem 1.75rem;
	border: 0;
	border-radius: var(--radius-qz);
	background: var(--color-qz-merk);
	color: var(--color-qz-op-merk);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.qz-formulier .gform_wrapper .gform_button:hover {
	background: var(--color-qz-actie);
	color: var(--color-qz-op-actie);
}

/*
 * reCAPTCHA (27-10-2026): het zwevende logo rechtsonder weg, de verplichte zin onder de knop
 * (die zet q-nieuw-formulier.php erbij). `visibility` en niet `display: none`: dat laatste
 * schakelt de onzichtbare reCAPTCHA zelf ook uit.
 */
.grecaptcha-badge {
	visibility: hidden;
}

/* Het lege captchaveld neemt geen plek in het raster; anders komt er 24 px bij boven de knop. */
.qz-formulier .gform_wrapper .gfield--captcha-invisible {
	position: absolute;
}

.qz-formulier .gform_wrapper .qz-form__recaptcha {
	margin: 1rem 0 0;
	padding: 0;
	color: var(--color-qz-text-zacht);
	font-size: 0.875rem;
	line-height: 1.5;
}

.qz-formulier .gform_wrapper .qz-form__recaptcha a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Een foutmelding vertelt wat je moet doen; hij mag opvallen maar niet schreeuwen. */
.qz-formulier .gform_wrapper .gfield_validation_message,
.qz-formulier .gform_wrapper .validation_message {
	margin: 0.5rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-qz-fout);
	font-size: 0.875rem;
}

.qz-formulier .gform_wrapper .gform_validation_errors {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--color-qz-fout);
	border-radius: var(--radius-qz);
	background: var(--color-qz-fout-vlak);
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   Het dekvlak bij de opening

   Ligt over de pagina tot het eerste beeld van de opening klaar is om te tonen. Zonder dit
   zie je in die paar honderdsten de hero al staan, en springt de opening er dan overheen.

   Het staat in de HTML zelf en niet pas in het script: op het moment dat het script draait
   is de hero al geschilderd, en dan is het te laat.
   -------------------------------------------------------------------------- */

#qz-dek {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--color-qz-vlak);
}

/*
 * Zolang de opening loopt staat de pagina eronder stil. Dat gebeurt ook met `overflow` op
 * `<body>` in het script, maar een vaste regel hier vangt het geval af waarin het script
 * halverwege struikelt: dan is de pagina in elk geval weer te bedienen zodra het attribuut
 * eraf is.
 */
html[data-qz-opening] {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Koppen in een artikel

   De tekst van een inzicht komt uit de tekstverwerker, en die levert een kale `<h2>` zonder
   klasse. In de bron staat daar `qz-h2 mt-12` op, want daar wordt elke kop met de hand
   geplaatst. Een redacteur hoort geen klassen te hoeven typen, dus die maat komt hier.
   -------------------------------------------------------------------------- */

.qz-leeskolom h2 {
	margin-top: 3rem;
	font-family: var(--font-qz-kop);
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
}

.qz-leeskolom h3 {
	margin-top: 2.5rem;
	font-family: var(--font-qz-kop);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

/* De eerste kop staat direct onder de sectierand; die heeft die ruimte niet nodig. */
.qz-leeskolom > h2:first-child,
.qz-leeskolom > h3:first-child {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Tekst op een casetegel blijft wit

   Een casetegel is een foto met een donkere sluier eroverheen. Die sluier verandert niet mee
   met de lichte of donkere weergave — hij is altijd donker, want hij moet de foto temmen.

   De bedrijfsnaam erop stond in `--color-qz-vlak`, en dat is de achtergrondkleur van de
   site: wit overdag, bijna zwart 's avonds. In de donkere weergave werd de naam op de tegel
   dus zwart op een donkere foto. Dat is ook op de ontwerpsite zo; hier niet.

   De tegel zet `text-white` op zijn inhoud. Alles daarbinnen erft die kleur nu, in plaats van
   er zijn eigen themakleur overheen te zetten.
   -------------------------------------------------------------------------- */

.text-white .qz-pijllink--licht,
.op-donker .qz-pijllink--licht {
	color: inherit;
}

/* --------------------------------------------------------------------------
   Het woord dat oplicht

   Om de zoveel tijd veegt er een blauwe en dan een rode band door één woord van de
   openingszin. Overgenomen van qstylez.nl, waar het in de sectie "Laat ambitie geen droom
   blijven" staat.

   Hoe het werkt: het woord krijgt een verloop van vier banden als achtergrond, vier keer zo
   breed als het woord zelf. `background-clip: text` laat die achtergrond alleen binnen de
   letters zien. Door de achtergrond van rechts naar links te schuiven trekt eerst het blauw
   en dan het rood door het woord, en eindigt het weer op de gewone tekstkleur.

   De tekstkleur staat aan beide uiteinden van het verloop. Zo begint en eindigt het woord in
   de kleur die het toch al had, en zie je alleen de kleuren voorbijkomen — geen sprong.
   -------------------------------------------------------------------------- */

.qz-oplicht {
	background-image: none;
	background-size: 400% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat;
}

.qz-oplicht.is-actief {
	background-image: linear-gradient(
		90deg,
		var(--color-qz-text) 0%,
		var(--color-qz-text) 25%,
		#0e81ff 25%,
		#0e81ff 50%,
		var(--color-qz-accent, #ff2e57) 50%,
		var(--color-qz-accent, #ff2e57) 75%,
		var(--color-qz-text) 75%,
		var(--color-qz-text) 100%
	);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	transition: background-position 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.qz-oplicht.is-actief.is-weg {
	background-position: 0 0;
}

/* Wie minder beweging heeft ingesteld, ziet het woord gewoon staan. */
@media (prefers-reduced-motion: reduce) {
	.qz-oplicht.is-actief {
		background-image: none;
		-webkit-text-fill-color: currentColor;
		color: inherit;
		transition: none;
	}
}

/* ------------------------------------------------------- de vragen open en dicht */

/*
 * `<details>` van de browser zelf klapt om zonder overgang: de tekst staat er, of hij staat
 * er niet. Het plusje ernaast draait wél netjes in 300ms, en juist daardoor viel de sprong
 * van de tekst op — twee dingen die tegelijk gebeuren, waarvan er één schokt.
 *
 * LET OP: dit is de TERUGVAL. Het open- en dichtklappen wordt normaal gedaan door
 * `startVragen()` in q-beweging.js, met GSAP. Zodra dat script draait zet het
 * `data-qz-soepel` op de vraag en stapt alles hieronder opzij — anders animeren er twee
 * dingen tegelijk aan dezelfde hoogte, en dan schokt het juist.
 *
 * Deze regels gelden dus alleen waar GSAP niet draait. Zonder JavaScript te meten:
 *   - `::details-content` is het vak met het antwoord erin, sinds kort apart te benaderen;
 *   - `interpolate-size: allow-keywords` maakt dat je naar `auto` kunt animeren, zodat de
 *     hoogte niet vooraf bekend hoeft te zijn;
 *   - `transition-behavior: allow-discrete` zorgt dat het dichtklappen óók loopt. Zonder dat
 *     verdwijnt de inhoud meteen en zie je alleen het openen soepel gaan.
 *
 * De `@supports` eromheen is geen nettigheid maar noodzaak. Kent een browser
 * `::details-content` niet, dan negeert hij die regel — maar `block-size: 0` zou hij wél
 * toepassen als het ergens anders stond, en dan waren alle antwoorden onzichtbaar. Binnen
 * de @supports gebeurt er in zo'n browser niets: die klapt om zoals voorheen.
 */

@supports selector(::details-content) {
	.qz-vragen details:not([data-qz-soepel]) {
		interpolate-size: allow-keywords;
	}

	.qz-vragen details:not([data-qz-soepel])::details-content {
		block-size: 0;
		overflow: hidden;
		opacity: 0;
		transition:
			block-size .34s cubic-bezier(.32, .72, 0, 1),
			opacity .26s ease,
			content-visibility .34s allow-discrete;
	}

	.qz-vragen details:not([data-qz-soepel])[open]::details-content {
		block-size: auto;
		opacity: 1;
	}

	/* Wie minder beweging heeft ingesteld, krijgt het oude gedrag: meteen open, meteen dicht. */
	@media (prefers-reduced-motion: reduce) {
		.qz-vragen details::details-content,
		.qz-vragen details:not([data-qz-soepel])[open]::details-content {
			transition: none;
		}
	}
}

/* ------------------------------------------------- de grote afbeelding wat hoger

   `.qz-casebeeld img` heeft `aspect-ratio: 16/10` én `max-height: 36rem`. Bij een beeld in
   de leeskolom (1120px) botst dat net niet, maar op de volle containerbreedte wel: 1328px
   bij 16:10 zou 830px hoog zijn, en dan kapt die 36rem hem af op 576. Het beeld werd dus
   breder zonder hoger te worden, en oogde daardoor als een streep.

   Alleen voor de losse variant opgehoogd naar 42rem. Beelden binnen de leeskolom blijven
   zoals ze waren — daar is 36rem juist de goede maat.

   Let op: dit is een MAXIMUM, geen vaste hoogte. Op een smal scherm bepaalt de verhouding
   nog steeds de hoogte en raakt deze regel niets. */

.qz-casebeeld--vol img {
	max-height: 42rem;
}

/* --------------------------------------- lucht tussen een los beeld en de tekst eronder

   Staat het beeld bóven de tekst, dan wikkelt het sjabloon alles eronder in `.qz-blokonder`
   en die geeft 56px lucht. Maar bij "los" staat de figuur buiten de leeskolom, dus die
   wikkel wordt niet gebruikt — en dan plakte de kop tegen de onderkant van het beeld.

   Andersom was het net zo mis: als twee losse LAGEN boven elkaar stonden (beeld, dan tekst)
   kreeg je 224px, want dan telt de sectiepadding twee keer. Dat las als twee losse blokken
   terwijl het beeld bij die tekst hoort.

   De maat: 56px was te krap onder een beeld van deze omvang — dat werkt bij een beeld in de
   leeskolom, niet bij een beeld dat over de volle breedte loopt. De site hanteert de reeks
   56, 64, 72, 88 en daarboven de sectiepadding van 112. 88px is de ruimste stap die nog
   binnen één blok valt: duidelijk lucht, maar niet zoveel dat het twee losse onderwerpen
   worden. Twee secties op elkaar geven 224px, en dát las juist als los zand. */

.qz-casebeeld--vol + .qz-caselijf {
	margin-top: 88px;
}


/* ------------------------------- een beeldband hoort bij de tekst die eronder komt

   Een laag met alléén een beeld erin krijgt de klasse `--beeldband`. Zo'n band is geen
   onderwerp op zichzelf: hij zet de sfeer voor de tekst eronder. Zonder deze regels staat
   ertussen 224px — 112 onderpadding plus 112 bovenpadding — en dat is de afstand die de site
   gebruikt tussen twee LOSSE onderwerpen. Het beeld kwam daardoor los te staan van waar het
   bij hoorde.

   Nu: geen onderpadding op de band, en 88px boven wat erop volgt. Dezelfde 88 als binnen één
   blok, zodat het niet uitmaakt of iets in één laag of in twee lagen is opgebouwd. */

.qz-sectie--beeldband {
	padding-bottom: 0;
}

.qz-sectie--beeldband + .qz-sectie {
	padding-top: 88px;
}


/* ------------------------------- het laatste blok in een sectie voegt geen ruimte meer toe

   `.qz-beeldkop` houdt 40px onder zich (48 op een groot scherm) om los te staan van het blok
   dat erna komt. Komt er niets meer, dan telt die ruimte gewoon op bij de onderpadding van de
   sectie. Gemeten op /e-commerce/: 88px boven de kop, 160px onder de laatste regel.

   Jos zag dat aan de laag "Wat is e-commerce?", met een donkere sectie eronder — dan is de
   onderrand van de laag zichtbaar en valt het verschil meteen op. Hij had het eerder ook al
   aangewezen op de merkstrategiepagina; toen heb ik de padding rechtgezet maar deze marge
   over het hoofd gezien, dus kwam het terug.

   Regel: scheidingsruimte hoort TUSSEN blokken, nooit onder het laatste.

   Let op de selector. Eerst stond hier alleen `.qz-beeldkop:last-child`, en dat was te ruim:
   in de beeldsliderlaag is de kop het laatste blokje in ZIJN container, maar de slider staat
   daarbuiten en komt er nog achteraan. Die verloor zo zijn 40px en plakte tegen de tekst.
   Daarom kijken we nu of de kop ook echt onderaan de SECTIE staat. */

.qz-sectie > .qz-beeldkop:last-child,
.qz-sectie > :last-child .qz-beeldkop:last-child {
	margin-bottom: 0;
}


/* En dan de sectie zelf. Een tekstlaag onder een volle-breedte beeld heeft 88px boven (de
   afstand tot dat beeld, hierboven vastgelegd) en 112px onder. Zolang de laag eronder dezelfde
   achtergrond heeft valt dat niet op, maar zodra die een andere kleur krijgt is de onderrand
   zichtbaar en staat de tekst niet meer gecentreerd in zijn eigen vlak. Even veel boven als
   onder, dus. */

.qz-sectie--beeldband + .qz-sectie {
	padding-bottom: 88px;
}


/* ------------------------------- een discipline-tag die doorlinkt

   De labels op een case ("UX Design", "SEA") wijzen nu naar de expertisepagina die erover gaat.

   Twee dingen moeten kloppen:

   1. Op een casekaart is de TITEL de link, en die rekt zich met `after:inset-0` over de hele
      kaart uit. Alles wat daarna komt ligt eronder en is dus niet aan te klikken. Met
      `position: relative` plus een z-index komt de tag daar weer bovenop.
   2. Het label mag er niet anders uit gaan zien dan het al deed: geen blauwe linkkleur, geen
      streep. Pas bij hover of toetsenbordfocus laat hij zien dat je erop kunt klikken. */

.qz-taglink {
	position: relative;
	z-index: 2;
	color: inherit;
	text-decoration: none;
}

.qz-taglink:hover,
.qz-taglink:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ------------------------------- het vakje van een keuzeveld staat 3px te laag

   Gemeten op /contact/, bij "Waar gaat het over?": de regel is 36px hoog en staat op
   `align-items: center`, maar het vakje zat op 1214 terwijl het label op 1211 stond.

   De oorzaak is een browser-specifieke regel uit de LEGACY-opmaak van Gravity Forms:
   `.gform_legacy_markup_wrapper.gf_browser_chrome .gfield_checkbox li input { margin-top: 6px }`.
   Die 6px bovenmarge is bedoeld voor de oude opmaak waarin het vakje náást tekst zweeft; in een
   flex-regel die zelf al centreert duwt hij het vakje omlaag.

   Wij zetten de marge al op 0, maar via `.gchoice input`, en dat verliest.

   Hun volledige regel staat in `gravityforms/legacy/css/browsers.min.css`:

       .gform_legacy_markup_wrapper.gf_browser_chrome .gfield_checkbox li input[type=checkbox]

   Dat zijn vier klassen (de laatste is het attribuut) en twee elementen. Onze eerste twee
   pogingen kwamen op precies datzelfde gewicht uit, en dan beslist de volgorde — hun blad laadt
   ná het onze, dus bleef het vakje op 3px staan. Met `.gchoice` én het type erbij zijn het er
   vijf tegen vier, en is er geen `!important` nodig. */

.qz-formulier .gform_legacy_markup_wrapper .gfield_checkbox li.gchoice input[type="checkbox"],
.qz-formulier .gform_legacy_markup_wrapper .gfield_radio li.gchoice input[type="radio"] {
	margin: 0;
}


/* ------------------------------- een vraag laat zien dat je erop kunt klikken

   De veelgestelde vragen hadden alleen een `cursor: pointer` en verder geen enkele reactie.

   De andere uitklapper van het ontwerp heeft die wél: `.qz-vouw__kop:hover { color:
   var(--color-qz-actie) }`. Diezelfde beweging nemen we hier over, zodat het over de site heen
   hetzelfde aanvoelt in plaats van dat elke uitklapper zijn eigen ding doet.

   Eén regel is genoeg: `.qz-h4` zet zelf geen kleur en het plusje tekent met `currentColor`,
   dus tekst en teken kleuren allebei mee. De kleur volgt vanzelf de lichte of donkere weergave,
   want `--color-qz-actie` is daar al op ingericht. */

.qz-vragen summary {
	transition: color var(--qz-snel, 0.2s ease);
}

.qz-vragen summary:hover,
.qz-vragen summary:focus-visible {
	color: var(--color-qz-actie);
}

/* Alleen de tekst laten verkleuren bleef te stil. Het vlakje met het plusje kleurt daarom mee:
   een tweede, groter aanknopingspunt, maar nog steeds een tint en geen vlak.

   `color-mix` in plaats van een vaste kleur, zodat het in de donkere weergave meebeweegt — daar
   is `--color-qz-actie` een lichtroze en zou een vaste donkere tint niet werken. */
.qz-vragen summary > span:last-child {
	transition: background-color var(--qz-snel, 0.2s ease);
}

.qz-vragen summary:hover > span:last-child,
.qz-vragen summary:focus-visible > span:last-child {
	background-color: color-mix(in srgb, var(--color-qz-actie) 15%, transparent);
}


/* ------------------------------- foutmeldingen in een formulier, in de stijl van de site

   Verstuur je het contactformulier leeg, dan kwam de opmaak van Gravity Forms zelf tevoorschijn:
   elk fout veld kreeg een roze vlak met een haarlijn erboven en eronder, waardoor het formulier
   in strepen uiteenviel. Het veld zelf veranderde niet, dus je zag wél dat er iets mis was maar
   niet in welk vakje je moest zijn.

   Het lettertype klopte overigens wel: "Source Sans 3" ís de tekstletter van de site.

   Over de kleur: het merkrood #ff2e57 haalt op wit maar 3,63:1 en is dus te licht voor een regel
   tekst. #c81b3d is de donkere tint van datzelfde rood (de "active"-stand uit de basistheme) en
   komt op 5,71:1. Daarmee hoort het bij de huisstijl én is het leesbaar. */

.qz-formulier .gform_wrapper {
	--qz-fout: #c81b3d;
	--qz-fout-vlak: rgb(200 27 61 / 6%);
	--qz-fout-rand: rgb(200 27 61 / 30%);
}

/* De melding bovenaan: een rustig kader in plaats van een roze balk. */
.qz-formulier .gform_wrapper .gform_validation_errors {
	background: var(--qz-fout-vlak);
	border: 1px solid var(--qz-fout-rand);
	border-radius: var(--radius-qz);
	box-shadow: none;
	margin: 0 0 2rem;
	padding: 1rem 1.25rem;
}

.qz-formulier .gform_wrapper .gform_validation_errors h2 {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	/* Met terugval: `--color-qz-tekst` bestaat niet op deze site, en zonder terugval valt de
	   hele regel weg — dan blijft het donkerrood van Gravity Forms staan. */
	color: var(--color-qz-tekst, #222);
	font-family: var(--font-qz-tekst);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
}

.qz-formulier .gform_wrapper .gform_validation_errors h2 .gform-icon {
	color: var(--qz-fout);
}

/* Geen vlak en geen streepjes meer om een fout veld. */
.qz-formulier .gform_wrapper .gfield.gfield_error {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
}

/* Wél het veld zelf: daar moet je naartoe. */
/* Let op de vorm: onze eigen veldregel hierboven telt zes `:not()`-clausules mee en weegt
   daardoor zwaar. Een korte regel als `.gfield_error input[type="text"]` verliest daarvan —
   gemeten bleef de rand gewoon grijs. Daarom hier dezelfde opbouw, met `.gfield_error` erbij. */
.qz-formulier .gform_wrapper .gfield_error .ginput_container input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
.qz-formulier .gform_wrapper .gfield.gfield_error .ginput_container select,
.qz-formulier .gform_wrapper .gfield.gfield_error .ginput_container textarea {
	border-color: var(--qz-fout);
}

/* De regel eronder: dezelfde maat als de andere hulptekst, niet vet. */
.qz-formulier .gform_wrapper .gfield_validation_message,
.qz-formulier .gform_wrapper .gfield_error .gfield_validation_message {
	background: transparent;
	border: 0;
	color: var(--qz-fout);
	font-size: 0.875rem;
	font-weight: 500;
	padding: 0.375rem 0 0;
}


/* ------------------------------- de kop boven de tijdlijn ("Hoe we hier kwamen")

   Gemeten op /ons-verhaal/: de kop staat op de linkerrand van de leeskolom (160px), maar de
   tijdlijn eronder is `max-width: 50em` met `margin-inline: auto` en begint dus pas op 320px.
   De kop hangt daardoor 160px links buiten het blok waar hij bij hoort.

   Dat is zo in het ontwerp — daar staan kop en tijdlijn ook in dezelfde kolom met alleen de
   tijdlijn versmald. Op verzoek van Jos wijken we hier bewust van af: de kop gaat boven de
   tijdlijn staan in plaats van ernaast te hangen. Beide zijn gecentreerd op dezelfde as, dus
   ze staan nu recht boven elkaar.

   De regel hangt aan de sectie die een tijdlijn bevat, niet aan de pagina. Wordt de laag ooit
   ergens anders gebruikt, dan klopt het daar ook. */

.qz-sectie:has(.step-timeline) .qz-beeldkop {
	text-align: center;
}


/* De stille pauzeknop onder de beloftekaarten.

   Zelfde uiterlijk als `.qz-sec__pauze` van het ontwerp, maar met een eigen naam: die klasse
   draagt gedrag met zich mee (het script van de expertise-carrousel zoekt hem op) en dat wil
   je hier niet aan je been hebben. Het omhulsel zet zelf al 32px ruimte erboven. */
.qz-pauzeknop {
	background: none;
	border: 0;
	padding: 6px 0;
	color: var(--color-qz-text-zacht);
	font-family: var(--font-qz-tekst);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
	transition: color var(--qz-snel, 0.2s ease);
}

.qz-pauzeknop:hover,
.qz-pauzeknop:focus-visible {
	color: var(--color-qz-actie);
}


/* ------------------------------- het ankertje mag de hero niet omlaag duwen

   Het ontwerp haalt de bovenruimte onder de navbar weg zodra de hero het EERSTE kind is:

       .qz-hoofd:has(> .qz-videohero:first-child) { padding-top: 0 }

   De bewerkknop-ankertjes staan vóór elke laag, dus op een pagina die met een hero begint is
   het eerste kind ineens zo'n ankertje en gaat die regel niet meer op. Gevolg: 136px witruimte
   tussen de navbar en de foto — maar alléén als je ingelogd bent, want dan pas staan die
   ankertjes er. Gemeten op /expertises/: padding 136px, hero begon op 168 in plaats van 0.

   Hieronder dezelfde regel, maar dan voor "de hero is het eerste kind, op een verborgen
   ankertje na". Pagina's die niet met een hero beginnen (de bedankt-pagina's bijvoorbeeld)
   houden hun bovenruimte gewoon. */

.qz-hoofd:has(> .qz-laag-anker[hidden]:first-child + .qz-videohero) {
	padding-top: 0;
}


/* ------------------------------- kaartjes verdelen over volle rijen

   `.qz-doelgroep` staat vanaf 1100px op vijf kolommen. Bij zes kaartjes gaf dat 5+1, met een
   verweesd kaartje op de tweede rij. Het sjabloon rekent nu uit hoeveel kolommen er nodig zijn
   voor volle rijen en zet dat in `--qz-kolommen`; staat die er niet, dan blijft het vijf. */

@media (width >= 1100px) {
	.qz-doelgroep[style*="--qz-kolommen"] {
		grid-template-columns: repeat(var(--qz-kolommen), minmax(0, 1fr));
	}
}


/* ------------------------------- de kop van de aanpak links, net als de stappen eronder

   Het hoofdstuklabel staat gecentreerd (`.qz-hoofdstuk__top`), maar de genummerde stappen
   eronder zijn links uitgelijnd. Bij de andere lagen op zo'n pagina valt dat niet op, omdat
   daar een raster onder staat dat de volle breedte vult. Hier wel.

   Alleen voor secties met een stappenlijst; de rest van de pagina houdt zijn gecentreerde kop. */

.qz-sectie:has(.qz-punten) .qz-hoofdstuk__top {
	align-items: flex-start;
	text-align: left;
}


/* ------------------------------- mensen centreren als de rij niet vol is

   `.qz-mensen` staat vanaf 1100px op zes kolommen. Zijn er vier collega's, dan staan die links
   met twee lege plekken rechts — dat oogt als een fout in plaats van als een keuze.

   Met flex houden de kaartjes exact dezelfde breedte als in het raster (die rekenen we uit met
   het aantal kolommen), maar wordt een niet-volle rij gecentreerd. */

.qz-mensen {
	--qz-mensen-kolommen: 2;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

@media (width >= 768px) {
	.qz-mensen {
		--qz-mensen-kolommen: 3;
	}
}

@media (width >= 1100px) {
	.qz-mensen {
		--qz-mensen-kolommen: 6;
	}
}

.qz-mensen__persoon {
	flex: 0 0 calc((100% - (var(--qz-mensen-kolommen) - 1) * 16px) / var(--qz-mensen-kolommen));
}


/* ------------------------------- de pijlen van de beeldslider naast de titel

   Ze stonden onder het spoor, uitgelijnd op de rand van de tekstkolom (70rem). Het spoor
   loopt alleen door tot de schermrand, dus die kolomrand is daar nergens te zien: de knoppen
   hingen midden onder een kaart en lijnden met niets. Gemeten op /cases/voorbeeld/: knop op
   x=1232-1280, terwijl de beelden doorlopen tot 1440.

   Naast de titel hebben ze wel een lijn — dezelfde rechterkant als de tekst eronder — en
   verdwijnt de lege strook onder de beelden. */

.qz-beeldkop__regel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* De titel mag krimpen, de knoppen niet: die hebben een vaste maat en zijn rond. */
.qz-beeldkop__regel > :first-child {
	min-width: 0;
	margin: 0;
}

.qz-beeldslider__knoppen {
	display: flex;
	flex: none;
	gap: 8px;
}

/* Zonder titel staan ze alsnog onder het spoor; `__voet` regelt daar de uitlijning. */
.qz-beeldslider__voet .qz-beeldslider__knoppen {
	margin-left: auto;
}

/* Op een smal scherm is er naast de titel geen ruimte voor twee knoppen van 48px.

   Ze onder de titel zetten hielp niet: dan stonden ze tussen de titel en de tekst in en braken
   ze de kop doormidden. Ze horen na de tekst, vlak boven de beelden waar ze bij horen.

   De titel en de knoppen zitten samen in `__regel` en de tekst staat daarbuiten, dus met
   `flex-direction` alleen kom je er niet. `display: contents` laat die tussenlaag hier weg: de
   titel en de knoppen worden dan zelf vakjes van `.qz-beeldkop` — een grid — en met `order`
   zet je ze in de volgorde die je wilt. */

@media (width < 640px) {
	/*
	 * `.qz-beeldkop` is pas vanaf 768px een grid; daaronder is het een gewone block en doet
	 * `order` niets. Hier zetten we het grid dus zelf aan — alleen in een sectie met een
	 * slider, zodat de koppen van alle andere lagen blijven zoals ze zijn.
	 */
	.qz-sectie:has(.qz-beeldslider) .qz-beeldkop {
		display: grid;
		gap: 20px;
	}

	.qz-beeldkop__regel {
		display: contents;
	}

	.qz-beeldkop__regel > :first-child {
		order: 1;
	}

	/*
	 * De tekst heeft zelf 20px marge boven. In een block-opmaak was dat de hele afstand tot de
	 * titel; in een grid komt hij bovenop de gap en wordt het 40px, twee keer zo veel als bij
	 * elke andere kop op de pagina. De gap doet het werk, dus de marge kan eruit.
	 */
	.qz-sectie:has(.qz-beeldslider) .qz-beeldkop__tekst {
		order: 2;
		margin-top: 0;
	}

	.qz-beeldslider__knoppen {
		order: 3;
	}
}

/* ----------------------------------------------------------------------------
   Kop met tekst en beeld: "beeld boven de tekst" zonder twee kolommen.

   De bron zet de tekst onder een beeld altijd in twee kolommen. Bij een korte tekst staat die
   dan op halve breedte. Twee kolommen is nu een eigen schakelaar (qz-blokonder--kolommen);
   zonder die schakelaar houdt de tekst dezelfde breedte als zonder beeld erboven.
   ---------------------------------------------------------------------------- */
.qz-blokonder:not(.qz-blokonder--kolommen) .qz-beeldkop__tekst {
	columns: auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: none;
}

.qz-blokonder:not(.qz-blokonder--kolommen) .qz-beeldkop__tekst p {
	margin-bottom: 0;
}


/* ----------------------------------------------------------------------------
   Kop met tekst en beeld als volledig contentblok (18-09-2026).

   - De tekst vult het blok: geen grens van 47,5rem meer, de kop staat boven de tekst.
   - Tekst uit de tekstverwerker: tussenkopjes, opsommingen, links en citaten krijgen opmaak
     (de reset van de bouwuitvoer haalt die anders weg).
   - Labeltje boven de kop en knoppen onder de tekst.
   - Beeld naast de tekst (links of rechts), op een telefoon erboven.
   Alles onder .qz-beeldkop--laag, zodat andere lagen met .qz-beeldkop niet meeveranderen.
   ---------------------------------------------------------------------------- */
.qz-beeldkop--laag {
	display: block;
}

.qz-beeldkop--laag > * + * {
	margin-top: 20px;
}

.qz-beeldkop--laag > .qz-beeldkop__label + .qz-h2 {
	margin-top: 8px;
}

.qz-beeldkop--laag .qz-beeldkop__tekst {
	max-width: none;
}

.qz-beeldkop__tekst :where(h2, h3, h4) {
	font-family: var(--font-qz-kop);
	font-weight: 700;
	line-height: 1.2;
	margin: 12px 0 0;
}

.qz-beeldkop__tekst h2 { font-size: 1.5rem; }
.qz-beeldkop__tekst h3 { font-size: 1.25rem; }
.qz-beeldkop__tekst h4 { font-size: 1.0625rem; }

.qz-beeldkop__tekst ul,
.qz-beeldkop__tekst ol {
	margin: 0;
	padding-left: 1.3em;
}

.qz-beeldkop__tekst ul { list-style: disc; }
.qz-beeldkop__tekst ol { list-style: decimal; }

.qz-beeldkop__tekst li + li {
	margin-top: 6px;
}

.qz-beeldkop__tekst li::marker {
	color: var(--color-qz-actie);
}

.qz-beeldkop__tekst a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.qz-beeldkop__tekst blockquote {
	border-left: 3px solid var(--color-qz-actie);
	margin: 0;
	padding-left: 20px;
	font-style: italic;
}

.qz-beeldkop__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px !important;
}

/* Twee kolommen ook als het beeld onder de tekst staat. */
@media (width >= 992px) {
	.qz-blokonder--kolommen .qz-beeldkop__tekst {
		columns: 2;
		column-gap: 5rem;
		display: block;
		max-width: none;
	}

	.qz-blokonder--kolommen .qz-beeldkop__tekst > * {
		break-inside: avoid;
		margin-bottom: 20px;
	}
}

/* Beeld naast de tekst. */
.qz-beeldnaast {
	display: grid;
	gap: 32px;
}

.qz-beeldnaast .qz-beeldkop {
	margin-bottom: 0;
}

.qz-beeldnaast .qz-casebeeld img {
	aspect-ratio: 4 / 3;
	max-height: none;
}

@media (width >= 992px) {
	.qz-beeldnaast {
		align-items: center;
		gap: 80px;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.qz-beeldnaast--rechts > .qz-casebeeld {
		order: 2;
	}

	/*
	 * De kolom is sinds 18-09-2026 de halve container (ruim 750 px). Over die hele breedte
	 * worden de regels te lang om prettig te lezen, dus breekt de tekst eerder af.
	 */
	.qz-beeldnaast__tekst .qz-beeldkop__tekst,
	.qz-beeldnaast__tekst .qz-h2 {
		max-width: 36rem;
	}
}

/* ----------------------------------------------------------------------------
   Contentblok zonder foto (21-09-2026).
   Een pagina zonder beeld hoeft niet saai te zijn. Drie vormen geven een
   tekstblok een eigen ritme, zonder dat er een foto bij hoeft.
   ---------------------------------------------------------------------------- */

/* 1. Kop naast de tekst: kop links, tekst rechts, met een streep erboven. */
.qz-beeldkop--split > .qz-beeldkop__kopdeel {
	padding-top: 20px;
	border-top: 2px solid var(--color-qz-actie);
}

.qz-beeldkop--split .qz-beeldkop__label {
	margin-bottom: 8px;
}

@media (width >= 992px) {
	.qz-beeldkop--split {
		display: grid;
		gap: 80px;
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		align-items: start;
	}

	/* De kop blijft staan terwijl je langs een lange tekst scrollt. */
	.qz-beeldkop--split > .qz-beeldkop__kopdeel {
		position: sticky;
		top: 120px;
	}

	.qz-beeldkop--split > * + * {
		margin-top: 0;
	}

	.qz-beeldkop--split .qz-beeldkop__tekst {
		max-width: 40rem;
	}
}

/* 2. In een kader: de tekst op een zacht vlak, met een accentstreep links. */
.qz-beeldkop--kader {
	position: relative;
	padding: clamp(28px, 3.5vw, 48px);
	padding-left: clamp(28px, 3.5vw, 48px);
	border-radius: var(--radius-qz);
	background: var(--color-qz-vlak-zacht);
	overflow: hidden;
}

.qz-beeldkop--kader::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--color-qz-actie);
}

.qz-sectie--zacht .qz-beeldkop--kader {
	background: var(--color-qz-vlak);
}

/* 3. Statement: één korte tekst, groot gezet. Voor een opening of een conclusie. */
.qz-beeldkop--statement .qz-h2 {
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
	max-width: 20ch;
}

.qz-beeldkop--statement .qz-beeldkop__tekst {
	max-width: 44rem;
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
	line-height: 1.55;
}

.qz-beeldkop--statement .qz-beeldkop__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.qz-beeldkop--statement .qz-beeldkop__label::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--color-qz-actie);
}


/* ------------------------------------------- een video in plaats van het beeld

   Zelfde maat als het beeld (zie hierboven), zodat een video en een beeld naast elkaar
   in een blok even hoog zijn. De video in de casekop valt onder .qz-caseheld en krijgt zijn
   maat van daar. */
.qz-casebeeld video{aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-qz);background-color:var(--color-qz-vlak-zacht);width:100%;height:auto;max-height:36rem;display:block}
.qz-casebeeld--vol video{max-height:42rem}
.qz-caseheld video{aspect-ratio:auto;max-height:none}
/* Een video in de laag Kop met tekst en beeld houdt zijn eigen verhouding (een vierkante video blijft
   vierkant, 09-10-2026). Een foto wordt nog wel bijgesneden zoals hierboven. */
.qz-sectie .qz-casebeeld video.qz-casevideo{aspect-ratio:auto;max-height:none}

/* ------------------------------------------- beelden over de volle breedte

   Laag beelden_breed: zo breed als het eerste beeld van een case (de container, niet de
   leeskolom). Eén beeld krijgt de verhouding van het casebeeld (16:9, vanaf 992px 21:9).
   Meer naast elkaar: 4:3. Op een telefoon onder elkaar, vier als twee bij twee. */
.qz-beeldbreed{display:grid;gap:24px}
.qz-beeldbreed figure{margin:0}
.qz-beeldbreed img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-qz);background-color:var(--color-qz-vlak-zacht)}
.qz-beeldbreed--1 img{aspect-ratio:16/9}
.qz-beeldbreed--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (width>=768px){
	.qz-beeldbreed--2{grid-template-columns:repeat(2,minmax(0,1fr))}
	.qz-beeldbreed--3{grid-template-columns:repeat(3,minmax(0,1fr))}
	.qz-beeldbreed--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
}
@media (width>=992px){
	.qz-beeldbreed--1 img{aspect-ratio:21/9}
}


/* ------------------------------------------- menu: beeld van de expertise (08-10-2026)

   De derde kolom onder Expertises toonde de onderdelen; die hebben geen pagina meer. Nu staat
   daar het beeld van de expertise waar de muis op staat. Alle beelden liggen op elkaar en het
   script zet er één zichtbaar, dus de kolom springt niet. Zonder beeld blijft het vlak leeg. */
.qz-nav__beelden{position:relative;flex:1;min-height:16rem;border-radius:var(--radius-qz);overflow:hidden;background-color:var(--color-qz-vlak-zacht)}
.qz-nav__beeld{position:absolute;inset:0;opacity:0;transition:opacity .25s}
.qz-nav__beeld.is-actief{opacity:1}
.qz-nav__beeld img{display:block;width:100%;height:100%;object-fit:cover}

/* ------------------------------------------- glascarousel met expertises (08-10-2026)

   Laag intro_expertises. Gebaseerd op Osmo's Liquid Glass Carousel (js/nieuw/q-glascarousel.js).
   Het canvas ligt over het vak; de lijst eronder blijft voor schermlezers. Zonder WebGL of met
   "minder beweging" is de lijst een gewone rij om opzij te schuiven. */
/* Hoogte = een casetegel (halve containerbreedte, 4:3, zie measurePanel) plus 2 x 120px voor de
   titel en de teller. */
.qz-glas{position:relative;overflow:clip;height:calc((min(100vw, var(--qz-container)) - 2 * var(--qz-kantlijn) - 24px) * .375 + 240px);margin-top:56px}
@media (width<768px){.qz-glas{height:calc((min(100vw, var(--qz-container)) - 2 * var(--qz-kantlijn)) * .75 + 200px)}}
/* Van rand tot rand: de laag zet de carousel buiten de container. Vijf tegels tegelijk; de
   maat van de middelste tegel zet het script in --qz-glas-tegel-b en --qz-glas-tegel-h. */
.qz-glas__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.qz-glas[data-glass-carousel-wheel="all"] canvas{touch-action:none}
.qz-glas[data-glass-carousel-pointer="grab"] canvas{cursor:grab}
.qz-glas[data-glass-carousel-pointer="grabbing"] canvas{cursor:grabbing}
.qz-glas__lijst{position:absolute;inset:0;display:flex;align-items:center;gap:24px;margin:0;padding:0 2em;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory}
.qz-glas[data-glass-carousel="canvas"] .qz-glas__lijst{width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.qz-glas__item{flex:none;scroll-snap-align:center}
.qz-glas__link{display:flex;flex-direction:column;gap:12px;color:inherit;text-decoration:none}
.qz-glas__beeld{display:block;width:auto;height:clamp(14rem,40svh,24rem);object-fit:cover;border-radius:var(--radius-qz)}
.qz-glas__naam{display:block;font-family:var(--font-qz-kop);font-weight:700;font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.2;color:var(--color-qz-text)}
.qz-glas__zin{display:block;max-width:36rem;margin-top:6px;font-size:.9375rem;line-height:1.5;color:var(--color-qz-text-zacht);white-space:normal}
/* Het onderschrift staat boven de tegels, in het midden. (Op 08-10-2026 kort ín de tegel gezet,
   maar bij het doorklikken zag dat er vreemd uit.) */
.qz-glas__onderschrift{position:absolute;bottom:calc(50% + var(--qz-glas-tegel-h,20rem) / 2 + 20px);left:50%;width:min(40rem,90%);padding:0 1em;text-align:center;transform:translate(-50%);pointer-events:none}
.qz-glas__onderschrift .qz-glas__naam{font-size:clamp(1.125rem,.95rem + .7vw,1.5rem)}
.qz-glas__onderschrift .qz-glas__zin{margin-inline:auto;margin-top:4px;font-size:.875rem;line-height:1.4}
/* Onder de tegels: teller en de link naar de middelste expertise, naast elkaar. */
.qz-glas__onder{position:absolute;top:calc(50% + var(--qz-glas-tegel-h,20rem) / 2 + 24px);left:50%;display:flex;align-items:center;gap:20px;white-space:nowrap;transform:translate(-50%)}
.qz-glas:not([data-glass-carousel="canvas"]) .qz-glas__onder{display:none}
.qz-glas__teller{min-width:5em;padding:.5em 1em;border-radius:.25em;background-color:#0000000f;font-size:.875rem;font-variant-numeric:tabular-nums;text-align:center;pointer-events:none}
.qz-glas[data-glass-carousel-pointer="pointer"] canvas{cursor:pointer}
.qz-glas__teller:empty,.qz-glas__onderschrift:empty{display:none}
/* Geen flits van de gewone rij bij het laden. Zolang het canvas nog niet klaar is, blijft de rij
   onzichtbaar. Lukt het canvas niet (geen WebGL, Three.js niet te laden), dan zet het script
   .is-terugval en verschijnt de rij meteen. Laadt het script helemaal niet, dan na 4 seconden.
   Met "minder beweging" start het canvas nooit, dus daar staat de rij gewoon. */
@media (prefers-reduced-motion:no-preference){
	.qz-glas:not([data-glass-carousel="canvas"]):not(.is-terugval) .qz-glas__lijst{opacity:0;animation:qz-glas-toon 0s 4s forwards}
	.qz-glas__canvas{opacity:0;transition:opacity .5s}
	.qz-glas[data-glass-carousel="canvas"] .qz-glas__canvas{opacity:1}
}
@keyframes qz-glas-toon{to{opacity:1}}
/* De regel eronder dichter op de link: onder de tegels is evenveel ruimte gereserveerd als erboven
   (voor de titel), en dat was hier te veel. Boven het canvas leggen, anders dekt het wit hem af. */
.qz-glas + .qz-container{position:relative;z-index:1}
.qz-glas__maand{max-width:48rem;margin:-28px auto 0;text-align:center}
@media (width<768px){.qz-glas__maand{margin-top:-8px}}


/* ------------------------------------------- expertises als lijst met tekst links (09-10-2026)

   Laag intro_expertises, weergave "Lijst met tekst links" (naar brndz.nl/expertise). Links een
   korte tekst, een kleine foto en een knop; die kolom blijft staan tijdens het scrollen. Rechts
   de expertises onder elkaar: naam, pijl, uittreksel, en een lijn ertussen. */
.qz-exlijst{display:grid;gap:48px;margin-top:80px}
@media (width>=992px){.qz-exlijst{margin-top:112px}}
@media (width>=992px){.qz-exlijst{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px}}
@media (width>=992px){.qz-exlijst__plak{position:sticky;top:120px}}
.qz-exlijst__intro{max-width:32rem;margin:0;font-size:clamp(1.125rem,1rem + .45vw,1.3125rem);line-height:1.45;color:var(--color-qz-text)}
.qz-exlijst__actie{display:flex;align-items:center;gap:12px;margin-top:32px}
.qz-exlijst__foto{flex:none;width:56px;height:56px;border-radius:var(--radius-qz);object-fit:cover;object-position:center top;background-color:var(--color-qz-vlak-zacht)}
.qz-exlijst__lijst{margin:0;padding:0;list-style:none}
.qz-exlijst__rij{display:block;padding:32px 0;border-bottom:var(--qz-lijn-dun) solid var(--color-qz-lijn);color:inherit;text-decoration:none}
.qz-exlijst__lijst > li:first-child .qz-exlijst__rij{padding-top:0}
.qz-exlijst__kop{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.qz-exlijst__naam{font-family:var(--font-qz-kop);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);font-weight:700;line-height:1.15;color:var(--color-qz-text);transition:color .2s}
.qz-exlijst__rij:hover .qz-exlijst__naam,.qz-exlijst__rij:focus-visible .qz-exlijst__naam{color:var(--color-qz-actie)}
.qz-exlijst__tekst{display:block;max-width:38rem;margin-top:12px;font-size:1rem;line-height:1.6;color:var(--color-qz-text-zacht)}
.qz-exlijst__maand{margin-top:32px;font-size:.9375rem;color:var(--color-qz-text-zacht)}

/* Vimeo-video in de hero en de opening: de speler vult het blok zoals object-fit:cover dat bij een videobestand doet (16:9, overloop wordt afgesneden). */
.qz-vimeo-vlak{overflow:hidden;pointer-events:none;container-type:size}
.willem__vimeo{opacity:0;transition:opacity .4s}
.willem__vimeo[data-speelt=true]{opacity:1}
.qz-vimeo-vlak iframe{position:absolute;top:50%;left:50%;width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);border:0;transform:translate(-50%,-50%)}
/* Expertisekop met een Vimeo-video: de speler ligt over de foto en verschijnt pas als hij speelt. */
.qz-caseheld--vlak{position:relative}
.qz-vimeo-vlak--los{position:absolute;inset:0;opacity:0;transition:opacity .6s}
.qz-vimeo-vlak--los[data-speelt=true]{opacity:1}/* Klikbaar keurmerk in de voet: zelfde trage kromme als de voetlinks, het logo licht op bij aanwijzen. */
.qz-voet__keurmerk{display:inline-flex;opacity:.85;transition:opacity var(--qz-traag)}
.qz-voet__keurmerk:hover,.qz-voet__keurmerk:focus-visible{opacity:1}
.qz-voet__keurmerk:focus-visible{outline:1px solid currentColor;outline-offset:4px}


/* ==========================================================================
   Juridische documenten van Complianz (/cookies/ en /privacybeleid/), 27-10-2026
   - Complianz' document.min.css zet 14px tekst, 22px koppen en grijze balken.
     #cmplz-document.cmplz-document (1,1,x) wint daarvan zonder !important.
   - 'cmplz-document' is ook een body-class: altijd via de id selecteren.
   - Kleuren via de themavariabelen, zodat de donkere modus vanzelf klopt.
   ========================================================================== */

/* Tekst alleen voor schermlezers (WordPress-standaard; het thema had hem nog niet). */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

#cmplz-document.cmplz-document {
	max-width: 800px;
	font-family: var(--font-qz-tekst);
	font-size: 18px;
	line-height: 1.65;
	color: var(--color-qz-text);
	text-align: left;
}

#cmplz-document.cmplz-document p,
#cmplz-document.cmplz-document li,
#cmplz-document.cmplz-document td {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

#cmplz-document.cmplz-document > p { margin: 0 0 1em; }
#cmplz-document.cmplz-document > p:empty { display: none; }

/* De regel "laatst bijgewerkt op ..." bovenaan */
#cmplz-document.cmplz-document > p:first-child {
	font-size: 16px;
	color: var(--color-qz-text-zacht);
	margin-bottom: 1.5em;
}

#cmplz-document.cmplz-document h2 {
	font-family: var(--font-qz-kop);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-qz-text);
	margin: 1.6em 0 .55em;
	padding: 0;
}

#cmplz-document.cmplz-document .cmplz-subtitle,
#cmplz-document.cmplz-document > h3 {
	font-family: var(--font-qz-kop);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-qz-text);
	margin: 1.5em 0 .35em;
	padding: 0;
}

#cmplz-document.cmplz-document h4 {
	font-family: var(--font-qz-kop);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	margin: 1.2em 0 .3em;
}

#cmplz-document.cmplz-document ul,
#cmplz-document.cmplz-document ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}
#cmplz-document.cmplz-document ul { list-style: disc; }
#cmplz-document.cmplz-document ol { list-style: decimal; }
#cmplz-document.cmplz-document li { margin: .3em 0; }

#cmplz-document.cmplz-document a {
	color: var(--color-qz-actie);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}
#cmplz-document.cmplz-document a:hover { text-decoration-thickness: 2px; }

/* Geen pijltje-plaatje achter externe links */
#cmplz-document.cmplz-document a[target=_blank]::after { content: none; }

/* --- Cookielijst ("Geplaatste cookies") --- */
#cmplz-document.cmplz-document .cmplz-dropdown {
	background: var(--color-qz-vlak-zacht);
	border: 1px solid var(--color-qz-lijn);
	border-radius: 12px;
	margin: 0 0 12px;
	overflow: hidden;
}

#cmplz-document.cmplz-document .cmplz-dropdown summary {
	background: transparent;
	margin: 0;
	padding: 18px 20px;
}

#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div {
	display: flex;
	align-items: center;
	gap: 16px;
}

#cmplz-document.cmplz-document .cmplz-dropdown summary div h3 {
	flex: 1 1 auto;
	font-family: var(--font-qz-kop);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	padding: 0;
}

#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div p {
	flex: 0 1 auto;
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--color-qz-text-zacht);
	text-align: right;
}

/* Het label van de toestemmingsschakelaar per dienst: hier geen schakelaar, dus weg */
#cmplz-document.cmplz-document .cmplz_consent_per_service_label { display: none; }

#cmplz-document.cmplz-document .cmplz-dropdown summary div::after { flex: 0 0 auto; }

/* Het pijltje is een zwart plaatje van Complianz: in de donkere weergave omdraaien naar wit. */
[data-theme-status=dark] #cmplz-document.cmplz-document .cmplz-dropdown summary div::after { filter: invert(1); }

#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-service-description,
#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-sharing-data {
	padding: 2px 20px 4px;
}

#cmplz-document.cmplz-document .cmplz-dropdown h4 {
	font-size: 16px;
	margin: 14px 0 4px;
}

/* Complianz geeft p/h4/ul in het uitklapblok een eigen inspringing; alles op één lijn. */
#cmplz-document.cmplz-document .cmplz-dropdown p,
#cmplz-document.cmplz-document .cmplz-dropdown h4,
#cmplz-document.cmplz-document .cmplz-dropdown ul {
	padding-left: 0;
	padding-right: 0;
}

#cmplz-document.cmplz-document .cmplz-dropdown p,
#cmplz-document.cmplz-document .cmplz-dropdown a {
	font-size: 16px;
	line-height: 1.55;
}

/* Per doel een kaartje met een tabel: gelijke kolommen, dunne lijnen, geen losse grijze vakjes. */
#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose {
	margin: 16px 20px 20px;
	padding: 0;
	gap: 0;
	background: var(--color-qz-vlak);
	border: 1px solid var(--color-qz-lijn);
	border-radius: 10px;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.45;
}

@media (min-width: 600px) {
	#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose {
		grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.6fr);
	}
}

#cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose div {
	background: transparent;
	padding: 10px 14px;
	border-top: 1px solid var(--color-qz-lijn);
}

#cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose .purpose {
	border-top: 0;
	padding: 12px 14px 10px;
}

#cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose .name-header,
#cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose .retention-header,
#cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose .function-header {
	background: var(--color-qz-vlak-zacht);
}

#cmplz-document.cmplz-document .cookies-per-purpose h5 {
	font-family: var(--font-qz-kop);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--color-qz-text-zacht);
	margin: 0 0 2px;
}

#cmplz-document.cmplz-document .cookies-per-purpose .purpose h4 { margin: 0; font-size: 16px; }
#cmplz-document.cmplz-document .cookies-per-purpose div { overflow-wrap: anywhere; }

@media (max-width: 767px) {
	#cmplz-document.cmplz-document { font-size: 17px; }
	#cmplz-document.cmplz-document h2 { font-size: 23px; }
	#cmplz-document.cmplz-document .cmplz-subtitle,
	#cmplz-document.cmplz-document > h3 { font-size: 19px; }

	#cmplz-document.cmplz-document .cmplz-dropdown summary { padding: 16px; }
	#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div {
		flex-wrap: wrap;
		gap: 4px 12px;
	}
	#cmplz-document.cmplz-document .cmplz-dropdown summary div h3 {
		flex: 1 1 calc(100% - 40px);
		font-size: 18px;
	}
	#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div p {
		order: 3;
		flex-basis: 100%;
		text-align: left;
	}
	#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-service-description,
	#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-sharing-data { padding: 0 16px; }
	#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose { margin: 14px 16px 16px; }
}