/* ==========================================================================
   Ik leer tajwīd
   --------------------------------------------------------------------------
   Poppins voor het Nederlands, KFGQPC Uthmanic Script HAFS voor het Arabisch.
   Allebei zelf gehost; geen enkel verzoek naar een ander domein.

   Het groen (#1f5b54, uit boek/css/boek.css) is een ACCENT, geen vlak. De
   bladzijde staat op wit; groen zit in knoppen, in de nummerschijfjes, in de
   bovenkopjes en in de lijn onder een kop. Geen paginabrede groene banen —
   die maakten de site te groen.

   Eén regel is een constructie in plaats van een controle: Arabisch met
   tashkīl staat altijd op --ar-schaal (1,8) maal de omringende tekst. Er staat
   nergens een losse Arabische font-size, dus de regel is niet te schenden.
   ========================================================================== */

/* --- Lettertypen ---------------------------------------------------------- */

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins-400-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins-500-latin.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins-600-latin.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins-700-latin.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* Qur'ānisch schrift. Bewust niet gesubset: bij dit font hangen de
   klinkertekens aan opzoektabellen die een subset stilzwijgend kan breken. */
@font-face {
	font-family: 'KFGQPC HAFS';
	src: url('../fonts/kfgqpc-hafs.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'KFGQPC Naskh';
	src: url('../fonts/kfgqpc-naskh.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Arabic Honorifics';
	src: url('../fonts/arabic-honorifics.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* --- Kleuren en maten ----------------------------------------------------- */

:root {
	/* Het groen van het boek, alleen als accent. */
	--groen:      #1f5b54;
	--groen-diep: #14403b;
	--groen-was:  #f2f7f6;   /* nauwelijks getint, voor een enkel vlak */
	/* Tekst OP een groen vlak. In de donkere stand wordt het groen licht, en
	   dan zakt witte tekst erop naar 2,2 : 1 — ruim onder de 4,5 die WCAG
	   vraagt. Daarom is dit een token en geen vaste #fff. */
	--op-groen:   #ffffff;

	/* Neutralen zonder groenzweem, zodat de bladzijde niet meegroent. */
	--grond:      #ffffff;
	--vlak:       #ffffff;
	--rand:       #e3e6e8;
	--rand-sterk: #cdd3d6;
	--inkt:       #1c2226;
	--inkt-zacht: #5b656c;

	--rood:       #941719;   /* de aanwijskleur uit het boek */

	--schaduw:    0 1px 2px rgb(28 34 38 / 5%), 0 6px 18px rgb(28 34 38 / 5%);
	--schaduw-op: 0 2px 4px rgb(28 34 38 / 7%), 0 12px 28px rgb(28 34 38 / 10%);

	--ronding:    14px;
	--ronding-s:  10px;
	--breedte:    70rem;
	--leesbreedte: 38rem;

	/* Arabisch staat altijd 1,8× de omringende tekst. Zie de kop van dit
	   bestand: dit is de enige plek waar die verhouding staat. */
	--ar-schaal: 1.8;

	/* Poppins loopt breed en heeft korte staartletters; iets kleiner en met
	   meer regelafstand dan een humanistische schreefloze. */
	--basis: 1rem;
}

/* Grotere tekst, aan te zetten in de kop. Alle verhoudingen blijven staan
   omdat elke maat van --basis afhangt. */
:root[data-tekstmaat='groot'] { --basis: 1.25rem; }

/* --- Grondslag ------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--grond);
	color: var(--inkt);
	font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: var(--basis);
	line-height: 1.7;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	line-height: 1.2;
	text-wrap: balance;
	margin: 0;
	font-weight: 600;
	letter-spacing: -0.02em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--groen); text-underline-offset: 0.18em; }
a:hover { color: var(--groen-diep); }

:focus-visible {
	outline: 3px solid var(--groen);
	outline-offset: 2px;
	border-radius: 3px;
}

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

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

.overslaan {
	position: absolute;
	left: 0.5rem;
	top: -4rem;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--groen);
	color: var(--op-groen);
	border-radius: 0 0 var(--ronding-s) var(--ronding-s);
	text-decoration: none;
	transition: top 0.15s ease;
}
.overslaan:focus { top: 0; color: var(--op-groen); }

.omhulsel {
	width: min(100% - 2.5rem, var(--breedte));
	margin-inline: auto;
}

/* Het bovenkopje boven een kop: het enige groen in lopende tekst. */
.aanloop {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--groen);
	margin: 0 0 0.5rem;
}

/* --- Arabisch ------------------------------------------------------------- */

/* Elk Arabisch fragment erft de omringende maat en vermenigvuldigt die met
   --ar-schaal. Nooit een absolute px-waarde: die zou de 1,8-regel breken. */
[lang='ar'], .ar {
	font-family: 'KFGQPC HAFS', 'KFGQPC Naskh', 'Arabic Honorifics', 'Traditional Arabic', serif;
	font-size: calc(1em * var(--ar-schaal) * var(--ar-extra, 1));
	line-height: 2;
	direction: rtl;
	unicode-bidi: isolate;
	font-feature-settings: 'liga' 1, 'calt' 1;
	font-weight: 400;
}

/* De aanwijzing uit het boek: markeer() kleurt letters in tabellen en
   leesregels. Kleur alleen is niet genoeg (WCAG 1.4.1), dus er komt een
   onderstreping bij die ruim onder de tashkīl door loopt. */
.wijs {
	color: var(--rood);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
	text-decoration-skip-ink: none;
}

/* --- Kop ------------------------------------------------------------------ */

.kop {
	background: var(--vlak);
	border-bottom: 1px solid var(--rand);
	position: sticky;
	top: 0;
	z-index: 20;
}

.kop__binnen {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 4.25rem;
}

.merk {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	text-decoration: none;
	color: var(--inkt);
	font-weight: 600;
	margin-inline-end: 2rem;
}
/* Een klein groen merkteken in plaats van Arabisch sierschrift: de interface
   is volledig Poppins, en Poppins heeft geen Arabische glyphs. */
.merk__teken {
	width: 0.55rem;
	height: 1.5rem;
	border-radius: 3px;
	background: var(--groen);
	flex: 0 0 auto;
}
.merk__nl { letter-spacing: -0.015em; }

/* De navigatie staat naast het logo en niet aan de rechterrand: alles in de
   kop begint aan dezelfde linkerlijn als de inhoud eronder. De auto-marge zit
   hier, zodat de tekstmaatknop wel rechts blijft. */
.nav {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-inline-end: auto;
}
.nav a {
	text-decoration: none;
	color: var(--inkt-zacht);
	font-weight: 500;
	font-size: 0.9375rem;
	padding: 0.5rem 0.125rem;
	min-height: 2.25rem;
	display: inline-flex;
	align-items: center;
	border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--groen); border-bottom-color: var(--groen); }

.tekstmaat {
	min-width: 2.75rem;
	min-height: 2.75rem;
	border: 1px solid var(--rand-sterk);
	background: var(--vlak);
	color: var(--inkt-zacht);
	border-radius: var(--ronding-s);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
}
.tekstmaat:hover { border-color: var(--groen); color: var(--groen); }
.tekstmaat[aria-pressed='true'] {
	background: var(--groen);
	border-color: var(--groen);
	color: var(--op-groen);
}

@media (max-width: 46rem) {
	.kop__binnen { flex-wrap: wrap; min-height: 0; padding-block: 0.75rem; gap: 0.75rem 1rem; }
	.nav { order: 3; width: 100%; gap: 1.25rem; }
}

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

.knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.875rem;
	padding: 0.6rem 1.5rem;
	border-radius: 999px;
	font-weight: 500;
	font-size: 0.9375rem;
	text-decoration: none;
	border: 1.5px solid transparent;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.knop:hover { transform: translateY(-1px); }

.knop--vol { background: var(--groen); color: var(--op-groen); box-shadow: var(--schaduw); }
.knop--vol:hover { background: var(--groen-diep); color: var(--op-groen); box-shadow: var(--schaduw-op); }

.knop--rand { border-color: var(--rand-sterk); color: var(--inkt); background: var(--vlak); }
.knop--rand:hover { border-color: var(--groen); color: var(--groen); }

/* --- Held ----------------------------------------------------------------- */

/* Wit, niet groen. De enige kleurvlakken zijn de knop en het bovenkopje. */
.held {
	background: var(--grond);
	border-bottom: 1px solid var(--rand);
	padding-block: clamp(2.75rem, 7vw, 5rem);
}

/* De kolom blijft zoals .omhulsel hem zet; de leesbreedte hangt aan de
   tekst erbinnen. Zet je de max-width op dit element, dan versmal je de
   kolom zelf en centreert die, en staat de kop niet meer op één lijn met
   het logo en de kaarten eronder. */
.held__binnen > * { max-width: 44rem; }

.held__aanloop {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--groen);
	margin-bottom: 0.85rem;
}

.held__titel {
	font-size: clamp(1.9rem, 5vw, 3rem);
	margin-bottom: 1rem;
}

.held__tekst {
	font-size: clamp(1rem, 1.6vw, 1.1875rem);
	color: var(--inkt-zacht);
	max-width: 33rem;
	margin-bottom: 2rem;
}

.held__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 2.5rem;
}

.held__cijfers {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin: 0;
	font-size: 0.875rem;
	color: var(--inkt-zacht);
}
.held__cijfers strong {
	display: block;
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--groen);
	font-variant-numeric: tabular-nums;
}

/* --- Secties -------------------------------------------------------------- */

.lessen, .boekblok { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.boekblok { background: var(--groen-was); border-top: 1px solid var(--rand); }

.sectiekop {
	font-size: clamp(1.375rem, 2.6vw, 1.75rem);
	margin-bottom: 0.5rem;
}
.sectieuitleg {
	color: var(--inkt-zacht);
	max-width: var(--leesbreedte);
	margin-bottom: 2rem;
}

/* --- Leskaarten ----------------------------------------------------------- */

.leskaarten {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.leskaart__link {
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 100%;
	padding: 1.125rem 1.25rem;
	background: var(--vlak);
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	text-decoration: none;
	color: var(--inkt);
	transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.leskaart__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--schaduw-op);
	border-color: var(--groen);
	color: var(--inkt);
}

.leskaart__nr {
	flex: 0 0 auto;
	width: 2.375rem;
	height: 2.375rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--groen);
	color: var(--op-groen);
	font-weight: 600;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.leskaart__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.leskaart__titel { font-weight: 500; font-size: 1rem; line-height: 1.35; }

/* Een les zonder video krijgt een grijs cijfer in plaats van een groen.
   Geen tekst erbij: het is een hint, geen mededeling. */
.leskaart--binnenkort .leskaart__nr { background: var(--rand); color: var(--inkt-zacht); }


/* --- Lestop en letterkop -------------------------------------------------- */

/* Ook wit. De les onderscheidt zich met een groene lijn, niet met een vlak. */
.lestop, .lettertop {
	background: var(--grond);
	border-bottom: 1px solid var(--rand);
	padding-block: clamp(1.75rem, 4.5vw, 3rem);
}
.lestop__binnen > *,
.lettertop__binnen > * { max-width: 44rem; }

.lestop__aanloop, .lettertop__aanloop {
	font-size: 0.8125rem;
	color: var(--inkt-zacht);
	margin-bottom: 0.75rem;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: center;
}
/* Minstens 24x24, anders is het geen tikdoel maar een kansspel (WCAG 2.5.8). */
.lestop__aanloop a, .lettertop__aanloop a {
	color: var(--groen);
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	padding-block: 0.15rem;
}

.lestop__titel {
	font-size: clamp(1.625rem, 4vw, 2.5rem);
	padding-bottom: 0.75rem;
	border-bottom: 3px solid var(--groen);
	display: inline-block;
}
.lestop__inleiding { margin-top: 1rem; color: var(--inkt-zacht); max-width: 33rem; }

.lettertop__glyph {
	--ar-extra: 2.4;
	margin: 0.5rem 0 0.25rem;
	line-height: 1.25;
	color: var(--groen);
}
.lettertop__naam { font-size: clamp(1.375rem, 3.5vw, 2rem); }

/* --- Lesbody -------------------------------------------------------------- */

.lesbody, .letterbody {
	padding-block: clamp(2rem, 5vw, 3.25rem);
	max-width: var(--breedte);
}
.lesbody > p, .letterbody > p { max-width: var(--leesbreedte); }

/* --- Letterrooster -------------------------------------------------------- */

.letterrooster { margin-bottom: 2.5rem; }
.letterrooster__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
}
.letterrooster__lijst a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 0.9rem 0.5rem;
	min-height: 5.75rem;
	background: var(--vlak);
	border: 1px solid var(--rand);
	border-radius: var(--ronding-s);
	text-decoration: none;
	color: var(--inkt);
	transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.letterrooster__lijst a:hover {
	border-color: var(--groen);
	transform: translateY(-2px);
	box-shadow: var(--schaduw);
	color: var(--inkt);
}
.letterrooster__ar { line-height: 1.4; color: var(--inkt); }
.letterrooster__naam { font-size: 0.75rem; color: var(--inkt-zacht); }

/* --- Video ---------------------------------------------------------------- */

.video { max-width: 46rem; margin: 0 0 2rem; }

.video__start {
	position: relative;
	display: grid;
	place-items: center;
	gap: 0.75rem;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	background: var(--groen-was);
	color: var(--inkt);
	font: inherit;
	font-weight: 500;
	font-size: 0.9375rem;
	cursor: pointer;
	padding: 1rem;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.video__start:hover { border-color: var(--groen); box-shadow: var(--schaduw-op); }

.video__driehoek {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--groen);
	display: grid;
	place-items: center;
}
.video__driehoek::after {
	content: '';
	border-style: solid;
	border-width: 0.7rem 0 0.7rem 1.2rem;
	border-color: transparent transparent transparent var(--op-groen);
	margin-left: 0.28rem;
}
.video__label { max-width: 22rem; text-align: center; }
.video__bron { font-size: 0.8125rem; color: var(--inkt-zacht); margin-top: 0.75rem; text-align: center; }

.video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--ronding);
	display: block;
}

/* --- Nieuwsbrief ---------------------------------------------------------- */

.nieuwsbrief {
	background: var(--groen-was);
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	padding: clamp(1.375rem, 3.5vw, 2rem);
	max-width: var(--leesbreedte);
}
.nieuwsbrief--voet {
	max-width: none;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--rand);
	border-radius: 0;
	padding-inline: 0;
	padding-top: 0;
}
.nieuwsbrief--les { margin-block: 3rem; }
.nieuwsbrief__titel { font-size: 1.125rem; margin-bottom: 0.4rem; }
.nieuwsbrief__uitleg { color: var(--inkt-zacht); max-width: 33rem; font-size: 0.9375rem; }
.nieuwsbrief__nog-niet {
	font-size: 0.875rem;
	color: var(--inkt-zacht);
	font-style: italic;
	margin: 0;
}

/* --- Lesnavigatie --------------------------------------------------------- */

.lesnav {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--rand);
}
.lesnav a {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.9rem 1.25rem;
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	text-decoration: none;
	color: var(--inkt);
	background: var(--vlak);
	min-height: 3rem;
}
.lesnav a:hover { border-color: var(--groen); color: var(--inkt); }
.lesnav__volgende { text-align: right; }
.lesnav__label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	color: var(--groen);
}
.lesnav__titel { font-weight: 500; font-size: 0.9375rem; }

/* --- Voet ----------------------------------------------------------------- */

.voet {
	background: var(--vlak);
	border-top: 1px solid var(--rand);
	margin-top: 4rem;
	padding-block: clamp(2rem, 5vw, 3rem);
}
.voet__onder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	padding-top: 2rem;
}
.voet__merk { font-weight: 600; margin: 0; margin-inline-end: auto; }
.voet__nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.voet__nav a {
	color: var(--inkt-zacht);
	text-decoration: none;
	font-size: 0.9375rem;
	min-height: 2.25rem;
	display: inline-flex;
	align-items: center;
}
.voet__nav a:hover { color: var(--groen); text-decoration: underline; }
.voet__klein {
	width: 100%;
	font-size: 0.8125rem;
	color: var(--inkt-zacht);
	margin: 0;
}


/* --- Het werkboek als download -------------------------------------------- */

/* Ruim opgezet en met een duidelijke scheiding tussen de uitleg en het
   formulier: dit is het enige op de bladzijde waar iemand iets moet invullen. */
.download {
	background: var(--groen-was);
	border: 1px solid var(--rand);
	border-radius: var(--ronding);
	padding: clamp(1.75rem, 4vw, 2.5rem);
	margin: clamp(3rem, 7vw, 4.5rem) 0;
	max-width: 34rem;
}

.download__tekst { margin-bottom: 1.5rem; }
.download__kop { font-size: 1.25rem; margin-bottom: 0.6rem; }
.download__tekst p { color: var(--inkt-zacht); font-size: 0.9375rem; margin: 0; }

.download__uitleg {
	color: var(--inkt-zacht);
	font-size: 0.9375rem;
	margin-bottom: 1.25rem;
}

.download__poort {
	border-top: 1px solid var(--rand);
	padding-top: 1.5rem;
}
.download__poort .aanmeld { margin-top: 0; max-width: none; }

.download__knop { margin: 0; padding-top: 0.25rem; }

.lettertop__klank {
	margin-top: 0.4rem;
	color: var(--inkt-zacht);
	font-size: 0.9375rem;
}