/**
 * VoorWerk — archief, lezer en aanmeldblok.
 *
 * De kleuren en maten komen uit het thema. Staat dat er niet, dan vallen
 * ze terug op de ABU-huisstijl zoals die hieronder staat, zodat de plugin
 * ook los van het thema toonbaar is.
 */

.vw-archief,
.vw-lezer,
.vw-uitgelicht,
.vw-aanmelden,
.vw-pagina,
.vw-nav,
.vw-nummer,
.vw-kaarten,
.vw-leesbalk,
.vw-verder,
.vw-blader,
.vw-inhoudsopgave,
.vw-citaat,
.vw-kader,
/*
 * Ook los meegeven aan de knoppen en de knoppenrij zelf: die staan soms in een
 * blok van het thema (zoals de coverkop) en zouden anders zonder kleuren
 * vallen — met een onleesbare witte knop tot gevolg.
 */
.vw-acties,
.vw-knop,
.vw-tekstlink,
.vw-portret,
.vw-terug,
.vw-bijschrift {
	--vw-inkt: var(--abu-inkt, #222222);
	--vw-zacht: var(--abu-zacht, #5b6470);
	--vw-oranje: var(--abu-oranje, #f06021);
	--vw-oranje-link: var(--abu-oranje-link, #c9501c);
	--vw-oranje-diep: var(--abu-oranje-diep, #a84317);
	--vw-geel: var(--abu-geel, #ffb31c);
	--vw-blauw: var(--abu-blauw, #eff6ff);
	--vw-zand: var(--abu-zand, #deddd7);
	--vw-lijn: var(--abu-lijn, #d7dde8);
	--vw-rond: var(--abu-rond, 15px);

	color: var(--vw-inkt);
}

.vw-pagina {
	max-width: var(--abu-breed, 1100px);
	margin-inline: auto;
	padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem) clamp(3rem, 7vw, 5rem);
}

/* ------------------------------------------------------------------
 * Knoppen
 * ---------------------------------------------------------------- */

.vw-knop {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border-radius: 999px;
	padding: .8rem 1.75rem;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
}

.vw-knop--vol { background: var(--vw-oranje); border-color: var(--vw-oranje); color: #fff; }
.vw-knop--rand { background: transparent; border-color: var(--vw-inkt); color: var(--vw-inkt); }

.vw-knop--vol:hover { background: var(--vw-oranje-diep); border-color: var(--vw-oranje-diep); }
.vw-knop--rand:hover { background: var(--vw-inkt); color: #fff; }

.vw-knop:focus-visible,
.vw-filter__knop:focus-visible,
.vw-schakel__knop:focus-visible,
.vw-kaart__link:focus-visible,
.vw-nav__link:focus-visible {
	outline: 3px solid var(--vw-oranje);
	outline-offset: 3px;
}

.vw-acties { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 0; }

/*
 * De zachte tweede keuze naast een knop: wel duidelijk aanklikbaar, maar het
 * trekt de aandacht niet weg bij de hoofdknop ernaast.
 */
.vw-tekstlink {
	font-weight: 600;
	color: var(--vw-zacht);
	text-decoration: underline;
	text-underline-offset: .22em;
	text-decoration-thickness: 1px;
}

.vw-tekstlink:hover { color: var(--vw-inkt); }

.vw-tekstlink:focus-visible {
	outline: 3px solid var(--vw-oranje);
	outline-offset: 3px;
	border-radius: 4px;
}

.vw-oog {
	margin: 0 0 .6rem;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--vw-oranje);
}

/* ------------------------------------------------------------------
 * Uitgelicht nummer
 * ---------------------------------------------------------------- */

.vw-uitgelicht {
	display: grid;
	gap: clamp(1.75rem, 5vw, 3.5rem);
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	align-items: center;
}

.vw-uitgelicht__cover { display: block; text-decoration: none; }

/* De cover is het mooiste beeld dat we hebben; die mag opvallen. */
.vw-uitgelicht__cover .vw-cover {
	border-radius: 3px;
	box-shadow: 0 22px 44px -18px rgba(20, 24, 32, .45);
}

.vw-uitgelicht__cover:hover .vw-cover,
.vw-uitgelicht__cover:focus-visible .vw-cover {
	transform: translateY(-4px);
	box-shadow: 0 28px 52px -18px rgba(20, 24, 32, .5);
}

.vw-uitgelicht__titel {
	margin: 0 0 .6rem;
	font-size: clamp(1.6rem, 3.4vw, 2.25rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.vw-uitgelicht__titel a { text-decoration: none; }

.vw-uitgelicht__titel a:hover {
	text-decoration: underline;
	text-underline-offset: .12em;
}

.vw-uitgelicht__lood {
	margin: 0 0 1.15rem;
	max-width: 52ch;
	color: var(--vw-zacht);
}

/*
 * De regel onder de knop. Geen lijstje maar een zin, zodat er wel drie koppen
 * op de voorpagina staan zonder dat er een blok bij komt.
 */
.vw-uitgelicht__verder {
	margin: 1rem 0 0;
	max-width: 52ch;
	font-size: .95rem;
	line-height: 1.7;
	color: var(--vw-zacht);
}

.vw-uitgelicht__label { font-weight: 700; color: var(--vw-inkt); }

/*
 * Precies de "link in lopende tekst" van /styleguide/: vet, inktkleur,
 * onderstreept met 6 px eronder, en bij hover naar het diepere oranje.
 */
.vw-uitgelicht__verder a {
	font-weight: 700;
	color: var(--vw-inkt);
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: auto;
	text-underline-offset: 6px;
	transition: color .15s ease;
}

.vw-uitgelicht__verder a:hover { color: var(--vw-oranje-link); }

.vw-uitgelicht__verder a:focus-visible {
	color: var(--vw-oranje-link);
	outline: 3px solid var(--vw-oranje);
	outline-offset: 3px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.vw-uitgelicht__verder a { transition: none; }
}

/* Het pijltje loopt mee met de knop, net als op abu.nl. */
.vw-knop__pijl { flex: none; transition: transform .2s ease; }
.vw-knop:hover .vw-knop__pijl { transform: translateX(3px); }

/*
 * Op een laag scherm — een laptop van 13 duim zit al onder de 700 px
 * kijkhoogte — moet het hele blok tot en met de knop boven de vouw passen.
 * Dus: kleinere omslag, kleinere kop, minder lucht.
 */
/*
 * Zonder de verhalenlijst past het blok ruim boven de vouw; op een laag scherm
 * hoeft alleen de omslag nog een maat kleiner.
 */
@media (min-width: 861px) and (max-height: 760px) {
	.vw-uitgelicht {
		grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
		gap: 2.5rem;
	}
}

@media (max-width: 860px) {
	.vw-uitgelicht {
		grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
		gap: 2rem;
	}
}

@media (max-width: 700px) {
	.vw-uitgelicht {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.4rem;
	}

	/*
	 * Op een telefoon staat de omslag boven de tekst en duwt hij alles omlaag.
	 * Kleiner dus, anders staat de knop veel te ver onder de vouw.
	 */
	.vw-uitgelicht__cover { max-width: 155px; }
	.vw-uitgelicht__titel { font-size: clamp(1.45rem, 6.2vw, 1.8rem); }
	.vw-uitgelicht__lood { margin-bottom: 1rem; }
}

/* Op een smal scherm valt het oogje anders over twee regels. */
@media (max-width: 480px) {
	.vw-oog__aantal { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vw-knop__pijl,
	.vw-uitgelicht__cover .vw-cover { transition: none; }
	.vw-knop:hover .vw-knop__pijl { transform: none; }
	.vw-uitgelicht__cover:hover .vw-cover { transform: none; }
}

/* ------------------------------------------------------------------
 * Archief
 * ---------------------------------------------------------------- */

.vw-kop { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.vw-kop__titel {
	margin: 0 0 .5rem;
	font-size: clamp(1.9rem, 4.5vw, 2.8rem);
	line-height: 1.12;
	letter-spacing: -.02em;
}

.vw-kop__intro { max-width: 62ch; }
.vw-kop__intro p:last-child { margin-bottom: 0; }

.vw-balk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: var(--vw-blauw);
	border-radius: var(--vw-rond);
	padding: 1rem 1.35rem;
	margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

.vw-telling { margin: 0; font-size: .95rem; }

.vw-filter { display: flex; flex-wrap: wrap; gap: .4rem; }

.vw-filter__knop {
	appearance: none;
	border: 1px solid var(--vw-lijn);
	background: #fff;
	color: var(--vw-zacht);
	font: inherit;
	font-size: .88rem;
	line-height: 1;
	padding: .55rem 1rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.vw-filter__knop:hover { border-color: var(--vw-inkt); color: var(--vw-inkt); }

.vw-filter__knop.is-aan {
	background: var(--vw-oranje);
	border-color: var(--vw-oranje);
	color: #fff;
	font-weight: 600;
}

.vw-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1.5rem, 3.5vw, 2.5rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 620px) {
	.vw-archief[data-kolommen="3"] .vw-grid,
	.vw-archief[data-kolommen="4"] .vw-grid,
	.vw-archief[data-kolommen="5"] .vw-grid,
	.vw-archief[data-kolommen="6"] .vw-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 940px) {
	.vw-archief[data-kolommen="4"] .vw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.vw-archief[data-kolommen="5"] .vw-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.vw-archief[data-kolommen="6"] .vw-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.vw-kaart { margin: 0; }
.vw-kaart[hidden] { display: none; }

.vw-kaart__link { display: block; text-decoration: none; color: inherit; }

.vw-cover {
	position: relative;
	display: block;
	aspect-ratio: var(--abu-cover, 1 / 1.32);
	border-radius: var(--vw-rond);
	overflow: hidden;
	background: var(--vw-zand);
	transition: transform .25s ease, box-shadow .25s ease;
}

.vw-cover__beeld,
.vw-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vw-cover__geen {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	text-align: center;
	font-size: .9rem;
	color: var(--vw-zacht);
}

.vw-kaart__link:hover .vw-cover,
.vw-kaart__link:focus-visible .vw-cover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(20, 24, 32, .16);
}

.vw-vlag {
	/* Rechtsboven, zodat het label het logo op de cover niet afdekt. */
	position: absolute;
	top: .7rem;
	right: .7rem;
	z-index: 1;
	background: var(--vw-geel);
	color: var(--vw-inkt);
	font-size: .74rem;
	font-weight: 600;
	padding: .25rem .75rem;
	border-radius: 999px;
}

.vw-kaart__tekst { display: block; margin-top: .9rem; }

.vw-kaart__meta {
	display: block;
	font-size: .89rem;
	line-height: 1.75;
	color: var(--vw-zacht);
	margin-bottom: .1rem;
}

.vw-kaart__titel {
	display: block;
	font-size: clamp(1.15rem, 1.6vw, 1.45rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.015em;
}

.vw-geen,
.vw-leeg { color: var(--vw-zacht); }

/* ------------------------------------------------------------------
 * Lezer
 * ---------------------------------------------------------------- */

/*
 * De terugknop zoals op abu.nl: een open rondje met een oranje pijl erin en
 * de tekst er in gewone zinsvorm naast. Het rondje is een ::before en geen
 * los teken, want een pijl uit de tekstset heeft de dikte van de letter en
 * dat is een ander streepje dan het ABU-pijltje. Op abu.nl is dit een icoon
 * uit Font Awesome Pro; die licentie hebben we hier niet, dus staat dezelfde
 * pijl als svg in het stijlblad zelf.
 */
.vw-terug {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding-left: 60px;
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--vw-inkt);
	text-decoration: none;
	margin-bottom: 1.5rem;
}

.vw-terug::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border: 1px solid var(--vw-inkt);
	border-radius: 999px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f06021' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12H3.5'/%3E%3Cpath d='M10.5 5 3.5 12l7 7'/%3E%3C/svg%3E");
	transition: background-color .18s ease, border-color .18s ease;
}

@media (min-width: 960px) {
	.vw-terug { min-height: 52px; padding-left: 66px; font-size: 1.15rem; }
	.vw-terug::before { width: 52px; height: 52px; }
}

.vw-terug:hover,
.vw-terug:focus-visible { color: var(--vw-inkt); text-decoration: underline; }

.vw-terug:hover::before,
.vw-terug:focus-visible::before {
	background-color: var(--vw-oranje);
	border-color: var(--vw-oranje);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12H3.5'/%3E%3Cpath d='M10.5 5 3.5 12l7 7'/%3E%3C/svg%3E");
}

.vw-editiekop { margin-bottom: 1.5rem; }

.vw-editiekop__meta { margin: 0 0 .35rem; font-size: .9rem; color: var(--vw-zacht); }

.vw-editiekop__titel {
	margin: 0;
	font-size: clamp(1.6rem, 3.6vw, 2.4rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.vw-schakel {
	display: inline-flex;
	gap: 3px;
	padding: 4px;
	background: var(--vw-blauw);
	border-radius: 999px;
	margin-bottom: 1rem;
}

.vw-schakel__knop {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--vw-zacht);
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	padding: .55rem 1.15rem;
	border-radius: 999px;
	cursor: pointer;
}

.vw-schakel__knop.is-aan { background: var(--vw-oranje); color: #fff; }

/* Het kader achter de bladerversie stond op een eigen bijna-zwart (#23262b).
   Dat is nu de inkt uit de huisstijl, zodat kader en leesvlak één kleur zijn. */
.vw-lezer__kader {
	position: relative;
	width: 100%;
	background: var(--vw-inkt, #222222);
	border-radius: var(--vw-rond);
	overflow: hidden;
	aspect-ratio: 3 / 4;

	/*
	 * Op een telefoon is driekwart van de schermbreedte veel te weinig om
	 * een tijdschriftpagina op te kunnen lezen. Daarom vullen we daar de
	 * hoogte van het scherm. In svh, zodat de lezer niet verspringt als de
	 * adresbalk van de browser tijdens het scrollen in- of uitschuift.
	 */
	min-height: min(78vh, 720px);
	min-height: min(78svh, 720px);
}

/*
 * De liggende lezer alleen op een scherm dat zelf ook liggend is. Een tablet
 * die rechtop wordt gehouden is breed genoeg voor de oude 768px-grens, maar
 * daar hoort een staande lezer — anders krijg je een brievenbus van 432 pixels
 * hoog op een scherm van 1024. De maximumhoogte zorgt dat de lezer op een
 * laag scherm niet buiten beeld valt.
 */
@media (min-width: 768px) and (min-aspect-ratio: 1 / 1) {
	.vw-lezer__kader {
		aspect-ratio: 16 / 10;
		min-height: 0;
		max-height: 88vh;
		max-height: 88svh;
	}
}

.vw-lezer[data-actief="mobiel"] .vw-lezer__kader {
	aspect-ratio: 3 / 4;
	max-width: 480px;
	margin-inline: auto;
}

.vw-lezer__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.vw-lezer__kader:fullscreen {
	aspect-ratio: auto;
	max-width: none;
	border-radius: 0;
}

.vw-lezer__onder { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }

.vw-lezer--leeg {
	background: var(--vw-blauw);
	border-radius: var(--vw-rond);
	padding: 2rem;
	color: var(--vw-zacht);
}

.vw-inhoud { max-width: 65ch; margin: clamp(2rem, 5vw, 3rem) 0 0; }

.vw-inhoud h2 { font-size: 1.3rem; margin-top: 0; }

/* ------------------------------------------------------------------
 * Vorige en volgende
 * ---------------------------------------------------------------- */

.vw-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	margin-top: clamp(2.5rem, 6vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--vw-lijn);
}

.vw-nav__link { text-decoration: none; color: inherit; }
.vw-nav__link--rechts { text-align: right; }

.vw-nav__label {
	display: block;
	font-size: .74rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vw-zacht);
}

.vw-nav__titel { display: block; font-weight: 700; margin-top: .15rem; }

.vw-nav__alle { font-size: .9rem; color: var(--vw-zacht); text-decoration: none; white-space: nowrap; }
.vw-nav__alle:hover { color: var(--vw-inkt); }

@media (max-width: 560px) {
	.vw-nav { grid-template-columns: 1fr 1fr; }
	.vw-nav__alle { grid-column: 1 / -1; grid-row: 1; text-align: center; margin-bottom: .5rem; }
}

/* ------------------------------------------------------------------
 * Aanmelden
 * ---------------------------------------------------------------- */

.vw-aanmelden { max-width: 560px; }

.vw-aanmeldblok {
	display: grid;
	gap: clamp(1.75rem, 5vw, 3.5rem);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	align-items: start;
}

.vw-aanmeldblok__titel {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
	line-height: 1.2;
}

.vw-aanmeldblok__lood { max-width: 50ch; }
.vw-aanmeldblok__lood p:last-child { margin-bottom: 0; }

/* Op het gele vlak moeten de invoervelden wit blijven. */
.vlak--geel .vw-aanmelden input[type="text"],
.vlak--geel .vw-aanmelden input[type="email"],
.vlak--geel .vw-aanmelden input[type="tel"],
.vlak--geel .vw-aanmelden select {
	background: #fff;
	border: 1px solid rgba(34, 34, 34, .18);
	border-radius: 999px;
	padding: .7rem 1.1rem;
	font: inherit;
	width: 100%;
}

.vlak--geel .vw-aanmelden button,
.vlak--geel .vw-aanmelden input[type="submit"] {
	background: #fff;
	color: var(--vw-inkt);
	border: 1px solid #fff;
	border-radius: 999px;
	padding: .8rem 1.75rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ------------------------------------------------------------------
 * Fluent Forms in ABU-stijl
 *
 * Tijdelijk: dit formulier gaat eruit zodra de insluitcode van Dynamics
 * er is. Tot die tijd moet het er wel uitzien alsof het erbij hoort.
 * Alles staat binnen .vw-aanmelden, dus buiten dit blok verandert er niets.
 * ---------------------------------------------------------------- */

.vw-aanmelden .fluentform { max-width: none; }

.vw-aanmelden .fluentform .ff-el-group { margin-bottom: 1.1rem; }
.vw-aanmelden .fluentform .ff-el-group:last-of-type { margin-bottom: 0; }

.vw-aanmelden .fluentform .ff-el-input--label label {
	font-weight: 600;
	font-size: .95rem;
	margin-bottom: .35rem;
	color: var(--vw-inkt);
}

.vw-aanmelden .fluentform .ff-el-is-required.asterisk-right label:after,
.vw-aanmelden .fluentform .ff-el-is-required.asterisk-left label:before { color: var(--vw-oranje); }

.vw-aanmelden .fluentform .ff-el-form-control {
	width: 100%;
	background: #fff;
	border: 1px solid rgba(34, 34, 34, .18);
	border-radius: 999px;
	padding: .7rem 1.1rem;
	font: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--vw-inkt);
	height: auto;
	box-shadow: none;
	transition: border-color .15s ease;
}

.vw-aanmelden .fluentform .ff-el-form-control::placeholder { color: rgba(34, 34, 34, .45); }

.vw-aanmelden .fluentform .ff-el-form-control:focus {
	border-color: var(--vw-inkt);
	outline: 3px solid var(--vw-oranje);
	outline-offset: 2px;
	box-shadow: none;
}

/*
 * Het akkoordvakje. Fluent Forms zet het vakje ín het label, dus daar moet
 * de uitlijning gebeuren: vakje links, tekst ernaast, en de hele regel
 * aanklikbaar zodat het op een telefoon ook te raken is.
 */
.vw-aanmelden .fluentform .ff-el-form-check { margin-bottom: 0; }

.vw-aanmelden .fluentform .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	padding-left: 0;
	font-size: .92rem;
	line-height: 1.45;
	font-weight: 400;
	cursor: pointer;
}

.vw-aanmelden .fluentform .ff-el-form-check-label input[type="checkbox"] {
	position: static;
	width: 1.15rem;
	height: 1.15rem;
	margin: .15rem 0 0;
	accent-color: var(--vw-oranje);
	flex: none;
}

.vw-aanmelden .fluentform .ff-el-form-check-label > span { display: inline; }
.vw-aanmelden .fluentform .ff-el-form-check-label a { color: inherit; }

.vw-aanmelden .fluentform .ff_submit_btn_wrapper { margin-top: 1.4rem; }

.vw-aanmelden .fluentform .ff-btn-submit,
.vw-aanmelden .fluentform .ff-btn.ff-btn-submit {
	background: var(--vw-oranje);
	border: 1px solid var(--vw-oranje);
	color: #fff;
	border-radius: 999px;
	padding: .8rem 1.9rem;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.vw-aanmelden .fluentform .ff-btn-submit:hover,
.vw-aanmelden .fluentform .ff-btn.ff-btn-submit:hover {
	background: var(--vw-oranje-diep);
	border-color: var(--vw-oranje-diep);
	color: #fff;
}

.vw-aanmelden .fluentform .ff-el-is-error .ff-el-form-control { border-color: #c0392b; }

.vw-aanmelden .fluentform .error.text-danger,
.vw-aanmelden .fluentform .ff-el-is-error .text-danger {
	font-size: .88rem;
	color: #c0392b;
	margin-top: .3rem;
}

.vw-aanmelden .fluentform .ff-message-success {
	background: #fff;
	border: 0;
	border-left: 3px solid var(--vw-oranje);
	border-radius: 0;
	padding: 1rem 1.2rem;
	color: var(--vw-inkt);
}

.vw-aanmelden .fluentform .ff-message-success p:last-child { margin-bottom: 0; }

/* Op het gele vlak mogen de randen wat zachter. */
.vlak--geel .vw-aanmelden .fluentform .ff-el-form-control { border-color: rgba(34, 34, 34, .14); }

.vw-aanmelden__terug,
.vw-melding {
	background: #fff;
	border-left: 3px solid var(--vw-oranje);
	padding: .9rem 1.1rem;
	margin: 0;
	font-size: .95rem;
}

@media (prefers-reduced-motion: reduce) {
	.vw-cover,
	.vw-filter__knop { transition: none; }
}

/* ------------------------------------------------------------------
 * Inhoudsopgave bij een editie
 * ---------------------------------------------------------------- */

.vw-inhoudsopgave {
	margin-top: clamp(2.5rem, 6vw, 4rem);
}

.vw-inhoudsopgave__titel {
	margin: 0 0 1rem;
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--vw-oranje);
}

.vw-inhoudsopgave__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 46rem;
}

.vw-inhoudsopgave__item { border-top: 1px solid var(--vw-lijn); }
.vw-inhoudsopgave__item:last-child { border-bottom: 1px solid var(--vw-lijn); }

.vw-inhoudsopgave__link {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .15rem .9rem;
	align-items: baseline;
	padding-block: .9rem;
	text-decoration: none;
	color: inherit;
}

.vw-inhoudsopgave__cat {
	grid-column: 1 / -1;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vw-zacht);
}

.vw-inhoudsopgave__kop { font-weight: 600; line-height: 1.35; }

.vw-inhoudsopgave__tijd {
	color: var(--vw-zacht);
	font-size: .82rem;
	white-space: nowrap;
}

.vw-inhoudsopgave__link:hover .vw-inhoudsopgave__kop { color: var(--vw-oranje); }

/* ------------------------------------------------------------------
 * Portretjes en onderschriften
 *
 * In het blad staat bij de mensen die aan het woord komen een klein
 * portret met hun naam ernaast. Op het web laten we dat meelopen met de
 * tekst: zo zie je wie er praat zonder dat het de lezing onderbreekt.
 * ---------------------------------------------------------------- */

.vw-portret {
	float: right;
	width: min(40%, 10.5rem);
	margin: .35rem 0 1.25rem 1.75rem;
}

.vw-portret img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--vw-rond);
}

.vw-portret figcaption {
	margin-top: .55rem;
	font-size: .7rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vw-oranje);
}

.vw-portret figcaption span {
	display: block;
	margin-top: .15rem;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--vw-zacht);
}

.vw-bijschrift {
	margin-top: .7rem;
	font-size: .82rem;
	color: var(--vw-zacht);
}

@media (max-width: 620px) {
	.vw-portret {
		float: none;
		width: min(58%, 9rem);
		margin: 1.75rem 0;
	}
}

/* ------------------------------------------------------------------
 * Citaat en kader in de tekst van een artikel
 * ---------------------------------------------------------------- */

.vw-citaat {
	margin: clamp(1.75rem, 4vw, 2.5rem) 0;
	padding-left: 1.2rem;
	border-left: 4px solid var(--vw-oranje);
}

/*
 * De algemene tekstopmaak geeft elke blockquote al een oranje streepje aan de
 * linkerkant. Het citaatblok heeft er zelf ook een, en dan staan er dus twee.
 * Deze selector is een tandje specifieker dan die algemene regel, zodat het
 * streepje van de blockquote hier hoe dan ook verdwijnt.
 */
.rijke-tekst .vw-citaat blockquote,
.vw-citaat blockquote {
	margin: 0;
	padding: 0;
	padding-left: 0;
	border: 0;
	border-left: 0;
	font-size: clamp(1.2rem, 2.6vw, 1.5rem);
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -.01em;
}

.vw-citaat figcaption {
	margin-top: .6rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vw-zacht);
}

.vw-kader {
	background: var(--vw-blauw);
	border-radius: var(--vw-rond);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	margin: clamp(1.75rem, 4vw, 2.5rem) 0;
}

.vw-kader__wie {
	margin: 0 0 .35rem;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vw-oranje);
}

/*
 * De kop van een kader is een h2, en de algemene tekstopmaak van het thema geeft
 * elke h2 in een artikel het formaat van een tussenkop met een flinke marge
 * erboven. In een kader is dat te veel: het kader heeft zelf al lucht rondom, en
 * de kop hoort er kleiner in te staan dan een kop in de lopende tekst — anders
 * concurreert hij met de artikelkop. Deze selector is daarom een tandje
 * specifieker dan die van het thema, zodat de volgorde van de stylesheets niet
 * uitmaakt.
 */
.rijke-tekst .vw-kader__titel,
.vw-kader__titel {
	margin: 0 0 .9rem;
	font-size: clamp(1.1rem, 2.4vw, 1.35rem);
	line-height: 1.25;
	font-weight: 800;
}

.vw-kader p { font-size: .97rem; }
.vw-kader > *:last-child { margin-bottom: 0; }

.rijke-tekst .vw-kader h3,
.vw-kader h3 {
	font-size: .88rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vw-oranje);
	margin: 1.5rem 0 .5rem;
}

/* ------------------------------------------------------------------
 * Het nummer: inhoud als beeldkaarten
 * ---------------------------------------------------------------- */

.vw-nummer { margin-top: clamp(2.5rem, 6vw, 4rem); }

.vw-nummer__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	border-top: 3px solid var(--vw-inkt);
	padding-top: 1rem;
}

.vw-nummer__titel {
	margin: 0;
	font-size: clamp(1.4rem, 3.2vw, 2rem);
	line-height: 1.15;
}

.vw-nummer__tel { margin: 0; color: var(--vw-zacht); font-size: .9rem; }

/*
 * Het vlaggetje op het eerste verhaal. Dat vervangt de tweede startknop: het
 * wijst het beginpunt aan zonder er nog een keuze naast te zetten.
 */
.vw-kaarten__begin {
	position: absolute;
	z-index: 2;
	top: .6rem;
	left: .6rem;
	padding: .3rem .7rem;
	border-radius: 999px;
	background: var(--vw-oranje);
	color: #fff;
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	box-shadow: 0 2px 8px rgba(20, 24, 32, .22);
}

.vw-kaarten {
	list-style: none;
	margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
	padding: 0;
	display: grid;
	gap: clamp(1.5rem, 3.5vw, 2.25rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.vw-kaarten__link {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: .9rem;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.vw-kaarten__beeld {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--vw-rond);
	background: var(--vw-blauw);
}

.vw-kaarten__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}

.vw-kaarten__link:hover .vw-kaarten__beeld img { transform: scale(1.04); }

.vw-kaarten__leeg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.4rem;
	font-weight: 800;
	color: var(--vw-oranje);
	opacity: .3;
}

.vw-kaarten__tekst { display: block; }

.vw-kaarten__cat {
	display: block;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vw-oranje);
	margin-bottom: .3rem;
}

.vw-kaarten__kop {
	display: block;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	margin-bottom: .4rem;
}

.vw-kaarten__link:hover .vw-kaarten__kop { color: var(--vw-oranje); }

.vw-kaarten__lood {
	display: block;
	font-size: .92rem;
	line-height: 1.55;
	color: var(--vw-zacht);
	margin-bottom: .5rem;
}

.vw-kaarten__tijd {
	display: block;
	font-size: .74rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vw-zacht);
}

/* ------------------------------------------------------------------
 * De balk boven een artikel
 * ---------------------------------------------------------------- */

.vw-leesbalk {
	/* Eén maat voor de zijmarge, zodat de balk en het streepje erboven precies
	   op dezelfde lijn beginnen en eindigen. */
	--vw-leesbalk-zij: clamp(1rem, 4vw, 2rem);
	position: sticky;
	top: 0;
	z-index: 30;
	background: color-mix(in srgb, var(--vw-blauw) 92%, #fff);
	border-bottom: 1px solid var(--vw-lijn);
	backdrop-filter: saturate(1.4) blur(6px);
}

/*
 * De voortgangsbalk hangt aan de ónderrand van de leesbalk, niet erboven.
 * Boven de regel met VoorWerk 11A zweefde hij tussen de kopbalk en de leesbalk
 * in, met wit eromheen — dan lijkt het een streep die er per ongeluk staat.
 * Onderaan is hij de rand van het blauwe blok zelf, en daarom loopt hij ook van
 * rand tot rand: een rand die halverwege ophoudt is geen rand.
 *
 * Hij ligt één punt lager dan de balk, zodat hij het grijze lijntje eronder
 * bedekt in plaats van er een tweede streep naast te zetten.
 *
 * Op een breed scherm is hij dikker. Drie punten over 1440 leest als een
 * haarlijn, terwijl diezelfde drie punten op een telefoon precies goed zijn.
 */
.vw-leesbalk__voortgang {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	/* Het spoor is donker genoeg om te zien dát er een balk is, ook als je nog
	   bijna niets gelezen hebt. */
	background: rgba(34, 34, 34, .12);
}

@media (min-width: 900px) {
	.vw-leesbalk__voortgang { height: 5px; }
}

.vw-leesbalk__gevuld {
	display: block;
	height: 100%;
	width: 0;
	background: var(--vw-oranje);
	transition: width .12s linear;
}

.vw-leesbalk__binnen {
	max-width: var(--abu-breed, 1100px);
	margin-inline: auto;
	padding: .55rem var(--vw-leesbalk-zij);
	display: flex;
	align-items: center;
	gap: 1rem;
}

.vw-leesbalk__blad {
	display: inline-flex;
	align-items: baseline;
	gap: .4rem;
	text-decoration: none;
	color: inherit;
}

.vw-leesbalk__naam { font-family: var(--abu-blad, Georgia, serif); font-style: normal; font-size: 1.05rem; }
.vw-leesbalk__naam .blad__voor { font-style: italic; }

/* Het blad heet *Voor*Werk. Allebei de helften krijgen hun stand expliciet mee,
   zodat het ook klopt in tekst die zelf al cursief staat. */
.blad__voor { font-style: italic; }
.blad__werk { font-style: normal; }
.vw-leesbalk__nr { font-size: .8rem; font-weight: 700; color: var(--vw-oranje); }

.vw-leesbalk__plek {
	margin: 0 0 0 auto;
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vw-zacht);
}

.vw-leesbalk__knop {
	appearance: none;
	border: 1px solid var(--vw-lijn);
	background: #fff;
	border-radius: 999px;
	padding: .35rem .9rem;
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
}

.vw-leesbalk__knop:hover { border-color: var(--vw-inkt); }
.vw-leesbalk__knop[aria-expanded="true"] { background: var(--vw-inkt); color: #fff; border-color: var(--vw-inkt); }

.vw-paneel {
	border-top: 1px solid var(--vw-lijn);
	background: #fff;
	max-height: min(70vh, 34rem);
	overflow-y: auto;
}

.vw-inhoud {
	list-style: none;
	margin: 0 auto;
	padding: .5rem clamp(1rem, 4vw, 2rem) 1.25rem;
	max-width: var(--abu-breed, 1100px);
	counter-reset: none;
}

.vw-inhoud__link {
	display: grid;
	grid-template-columns: 1.6rem 1fr auto;
	gap: .1rem .8rem;
	align-items: baseline;
	padding-block: .7rem;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid var(--vw-lijn);
}

.vw-inhoud__nr { font-size: .8rem; color: var(--vw-zacht); font-variant-numeric: tabular-nums; }
.vw-inhoud__tekst { display: block; }

.vw-inhoud__cat {
	display: block;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vw-zacht);
}

.vw-inhoud__kop { display: block; font-weight: 600; line-height: 1.3; }
.vw-inhoud__tijd { font-size: .78rem; color: var(--vw-zacht); white-space: nowrap; }

.vw-inhoud__item.is-hier .vw-inhoud__kop { color: var(--vw-oranje); }
.vw-inhoud__item.is-hier .vw-inhoud__nr { color: var(--vw-oranje); font-weight: 700; }
.vw-inhoud__link:hover .vw-inhoud__kop { color: var(--vw-oranje); }

/* ------------------------------------------------------------------
 * Omslaan naar het volgende verhaal
 * ---------------------------------------------------------------- */

.vw-verder {
	margin: clamp(2.5rem, 6vw, 4rem) 0 0;
	padding-top: clamp(1.25rem, 3vw, 1.75rem);
	border-top: 3px solid var(--vw-inkt);
}

/* Het kopje boven het blok: waar zit je ook alweer. */
.vw-verder__oog {
	margin: 0 0 clamp(1rem, 3vw, 1.5rem);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vw-zacht);
}

/* Het volgende verhaal, groot — dit is de hoofdroute. */
.vw-verder__kaart {
	display: grid;
	grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 1.75rem);
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.vw-verder__kaart--einde {
	grid-template-columns: minmax(0, 1fr);
	padding: clamp(1.25rem, 4vw, 2rem);
	background: var(--vw-blauw);
	border-radius: var(--vw-rond);
}

.vw-verder__beeld {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--vw-rond);
	background: var(--vw-blauw);
}

.vw-verder__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vw-verder__label {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vw-oranje);
	margin-bottom: .45rem;
}

.vw-verder__pijl {
	display: inline-block;
	transition: transform .18s ease;
}

.vw-verder__cat {
	display: block;
	font-size: .74rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vw-zacht);
	margin-bottom: .2rem;
}

.vw-verder__kop {
	display: block;
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.015em;
}

.vw-verder__lood {
	display: block;
	margin-top: .5rem;
	color: var(--vw-zacht);
	font-size: .95rem;
	max-width: 52ch;
}

.vw-verder__tijd {
	display: block;
	margin-top: .6rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vw-zacht);
}

.vw-verder__acties { margin-top: 1.1rem; }

a.vw-verder__kaart:hover .vw-verder__kop { color: var(--vw-oranje); }
a.vw-verder__kaart:hover .vw-verder__pijl { transform: translateX(4px); }

/* De zijwegen: terug, de inhoud, of het hele blad. */
.vw-verder__onder {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: .75rem;
	margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.vw-verder__zij {
	display: block;
	padding: .85rem 1.05rem;
	border: 1px solid var(--vw-lijn);
	border-radius: var(--vw-rond);
	text-decoration: none;
	color: inherit;
	transition: border-color .18s ease;
}

.vw-verder__zij:hover { border-color: var(--vw-inkt); }
.vw-verder__zij:hover .vw-verder__zijkop { color: var(--vw-oranje); }
.vw-verder__zij--vorig:hover .vw-verder__pijl { transform: translateX(-4px); }

.vw-verder__zijlabel {
	display: flex;
	align-items: center;
	gap: .35rem;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vw-zacht);
	margin-bottom: .3rem;
}

.vw-verder__zijkop {
	display: block;
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.25;
}

/* ------------------------------------------------------------------
 * De blader-pdf, pas op verzoek
 * ---------------------------------------------------------------- */

.vw-blader {
	display: grid;
	grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
	gap: clamp(1.25rem, 4vw, 2.25rem);
	align-items: center;
	margin-top: clamp(2.5rem, 6vw, 4rem);
	padding: clamp(1.25rem, 4vw, 2rem);
	background: var(--vw-blauw);
	border-radius: var(--vw-rond);
}

.vw-blader__beeld img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 12px 30px rgba(20, 24, 32, .18);
}

.vw-blader__oog {
	margin: 0 0 .3rem;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vw-oranje);
}

.vw-blader__titel {
	margin: 0 0 .5rem;
	font-size: clamp(1.25rem, 3vw, 1.7rem);
	line-height: 1.2;
}

.vw-blader__lood { margin: 0 0 1.1rem; color: var(--vw-zacht); max-width: 46ch; }

@media (max-width: 620px) {
	.vw-blader { grid-template-columns: minmax(0, 1fr); }
	.vw-blader__beeld { max-width: 9rem; }
	.vw-verder__kaart { grid-template-columns: minmax(0, 1fr); }
	.vw-verder__beeld { max-width: 10rem; aspect-ratio: 3 / 2; }
}

/*
 * Het hidden-attribuut zet display:none, maar een eigen display-regel wint
 * daarvan. Zonder deze twee regels blijft het aankondigingsblok staan als de
 * lezer opengeklapt is.
 */
.vw-lezer__doos[hidden],
.vw-blader[hidden] { display: none; }

/* -----------------------------------------------------------------
 * De openingsfoto van een artikel
 *
 * Het beeld uit een blad is zelden groot: de drukpdf die wij krijgen is een
 * webversie van rond de honderd punten per inch, en een foto die daar een
 * kwart pagina vult is dan een jpeg van driehonderd punten breed. Zet je die
 * met width:100% boven een artikel, dan wordt hij tot zes keer opgeblazen en
 * ziet hij eruit als een vlek. Daarom staat hier geen breedte maar een
 * maximum: het beeld wordt nooit groter getoond dan het is, en nooit breder
 * dan de leeskolom aankan.
 *
 * Deze regels staan in de plugin en niet alleen in het thema, zodat ze
 * meeverhuizen met de plugin. De selector is een tandje specifieker dan die
 * van het thema, zodat de volgorde van de stylesheets niet uitmaakt.
 * -------------------------------------------------------------- */
.pagina--artikel .artikel__beeld {
	width: fit-content;
	max-width: min(100%, 46rem);
	overflow: hidden;
}

.pagina--artikel .artikel__beeld img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}

/* Blijft de figure leeg omdat het beeld te klein was, dan hoort ook de
   witruimte eromheen weg te vallen. */
.artikel__beeld:not(:has(img)) { display: none; }

/* ------------------------------------------------------------------
 * De eigen bladerversie
 *
 * Draait op paginabeelden die uit de drukpdf zijn gerenderd en staat in
 * .vw-lezer__kader, dat zijn hoogte al vastlegt. Dat is hier geen detail:
 * een maximale hoogte in procenten op een flex-element zonder vaste hoogte
 * doet niets, en daarom is het leesvlak absoluut gepositioneerd. Zo staat de
 * hoogte vast en voegen de bladzijden zich daarnaar.
 *
 * De achtergrond was het indigo van de omslag (#2e2758). Dat staat niet in de
 * ABU-huisstijl: de palet-kleuren zijn oranje, het lichte blauw en de inkt
 * #222222 — een paars of indigo komt er niet in voor. Het vlak is nu de inkt
 * zelf, met de balk eronder een schaduw donkerder. De bladzijden zijn dan het
 * enige gekleurde op het scherm, en dat is precies de bedoeling.
 * ---------------------------------------------------------------- */

.vw-bl {
	--vw-bl-vlak: var(--vw-inkt, #222222);
	--vw-bl-diep: rgba(0, 0, 0, .3);
	--vw-bl-mist: rgba(255, 255, 255, .66);
	--vw-bl-zwak: rgba(255, 255, 255, .34);

	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	background: var(--vw-bl-vlak);
	color: #fff;
	-webkit-font-smoothing: antialiased;
}

.vw-bl__vlak {
	position: relative;
	min-height: 0;
	overflow: hidden;
}

.vw-bl__spread {
	position: absolute;
	inset: clamp(14px, 2.2vw, 34px) clamp(58px, 6vw, 96px);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: opacity .16s linear;
}

.vw-bl__spread.is-wisselt { opacity: .35; }

.vw-bl__blad {
	position: relative;
	height: 100%;
	line-height: 0;
}

.vw-bl__blad img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .4));
}

/* Eén bladzijde: de breedte volgt de hoogte. */
.vw-bl__spread--enkel .vw-bl__blad { max-width: 100%; }
.vw-bl__spread--enkel .vw-bl__blad img { width: auto; max-width: 100%; }

/* Twee bladzijden: elk de helft, tegen elkaar aan geschoven. */
.vw-bl__spread--dubbel .vw-bl__blad { flex: 1 1 0; min-width: 0; }
.vw-bl__spread--dubbel .vw-bl__blad:first-child img { object-position: right center; }
.vw-bl__spread--dubbel .vw-bl__blad:last-child img { object-position: left center; }

.vw-bl__laden {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 12px;
	line-height: 1.4;
	color: var(--vw-bl-zwak);
}

.vw-bl__blad.is-klaar .vw-bl__laden { display: none; }

/*
 * De tekstlaag van de oude nummers.
 *
 * De beelden uit de FlowPaper-export bevatten geen tekst; die wordt hier
 * overheen getekend. Het vlak wordt door het script op de plek van het beeld
 * gelegd — niet op die van het element, want het beeld staat er met
 * `object-fit: contain` in en schuift bij een dubbele spread naar de goot.
 */
.vw-bl__tekst {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	transition: opacity .12s linear;
}

.vw-bl__tekst.is-klaar { opacity: 1; }

.vw-bl__pijl {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: clamp(40px, 4.4vw, 58px);
	height: clamp(72px, 9vh, 104px);
	display: grid;
	place-items: center;
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	color: var(--vw-bl-zwak);
	cursor: pointer;
	transition: color .15s linear;
}

.vw-bl__pijl:hover:not(:disabled) { color: #fff; }
.vw-bl__pijl:disabled { opacity: 0; pointer-events: none; }
.vw-bl__pijl--vorige { left: 0; }
.vw-bl__pijl--volgende { right: 0; }
.vw-bl__pijl svg { width: 26px; height: 26px; }

.vw-bl__balk {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px;
	padding: 12px clamp(14px, 2.2vw, 28px);
	background: var(--vw-bl-diep);
}

.vw-bl__teller {
	margin: 0;
	font-size: 13px;
	color: var(--vw-bl-mist);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.vw-bl__teller b { color: #fff; font-weight: 600; }

.vw-bl__strip {
	display: flex;
	gap: 5px;
	justify-content: center;
	/* Bij meer duimnagels dan er passen mag het begin niet wegvallen. */
	justify-content: safe center;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding: 3px 0;
}

.vw-bl__strip::-webkit-scrollbar { display: none; }

.vw-bl__duim {
	flex: 0 0 auto;
	width: 26px;
	height: 35px;
	padding: 0;
	appearance: none;
	border: 0;
	border-radius: 1px;
	cursor: pointer;
	background: rgba(255, 255, 255, .12) center / cover no-repeat;
	opacity: .5;
	outline: 1.5px solid transparent;
	outline-offset: 1px;
	transition: opacity .15s linear, outline-color .15s linear;
}

.vw-bl__duim:hover { opacity: .85; }
.vw-bl__duim[aria-current="true"] { opacity: 1; outline-color: var(--vw-oranje, #f06021); }

.vw-bl__knop {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	appearance: none;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	color: var(--vw-bl-mist);
	cursor: pointer;
	transition: color .15s linear;
}

.vw-bl__knop:hover { color: #fff; }
.vw-bl__knop svg { width: 15px; height: 15px; }

.vw-bl :focus-visible { outline: 2px solid var(--vw-oranje, #f06021); outline-offset: 3px; }

@media (max-width: 820px) {
	.vw-bl__strip { display: none; }
	.vw-bl__balk { grid-template-columns: auto auto; justify-content: space-between; }
	.vw-bl__spread { inset: 10px 46px; }
}

@media (prefers-reduced-motion: reduce) {
	.vw-bl__spread,
	.vw-bl__duim,
	.vw-bl__knop,
	.vw-bl__pijl { transition: none; }

	.vw-bl__spread.is-wisselt { opacity: 1; }
}