/*
 * informatie.css — de klantenservice, de onderwerpen en de voorwaarden
 * (baserules regel 8). Eén bestand voor het overzicht en de pagina's eronder:
 * ze gebruiken hetzelfde sjabloon, informatie.php.
 *
 * ── Het idee ──────────────────────────────────────────────────────────────
 *
 * Een rustige balie. Bovenaan dezelfde nacht als de winkel en het blog, met
 * dezelfde bolling — maar lager, want wie hier komt wil een antwoord en geen
 * sfeer. Over de bolling valt een witte kaart met "In het kort": de drie of
 * vier dingen die je moet weten, zodat niemand de algemene voorwaarden hoeft
 * te lezen om te weten hoeveel dagen bedenktijd hij heeft. Daaronder het
 * papier met de volledige tekst, als een goed gezet document: een
 * inhoudsopgave die meeloopt, artikelnummers als label boven de kop,
 * genummerde leden in een rondje. Onderaan een donkere kaart die de footer
 * in loopt: als het antwoord er niet tussen stond, wie je dan spreekt.
 *
 * De kleuren, lettertypes en de vloeiende schaal staan in main.css en komen
 * van dekbedgekte.nl (assets/css/BRONWAARDEN.md). Hier komt niets bij, behalve
 * de afronding en de ruimte van dit sjabloon, als token hieronder.
 *
 * ── Wat er waar staat ─────────────────────────────────────────────────────
 *
 *   1. de tokens
 *   2. de kop: de nacht, de titel, het zoekveld, de feiten
 *   3. in het kort, en de beloftes
 *   4. de indeling: naast en hoofd
 *   5. de inhoudsopgave en het menu
 *   6. de tekst
 *   7. de vragen
 *   8. het overzicht: de onderwerpen en het beleid
 *   9. hulp nodig
 *  10. smallere schermen
 *  11. op papier
 */

/* ==========================================================================
   1. De tokens
   ========================================================================== */

.informatie {
	--ifRonding: 24px;
	--ifRondingKlein: 16px;
	--ifSectie: clamp(3rem, 6vw, 5rem);
	--ifKaartSchaduw: 0 1px 2px rgb(21 10 61 / 6%), 0 24px 60px rgb(21 10 61 / 12%);
	--ifKopRuimte: 7.5rem;

	/* Hoe hoog de kolom naast de tekst mag worden. Als token, want een calc()
	   met een variabele erin kan de CSS-validator niet lezen (regel 12). */
	--ifNaastHoogte: calc(100vh - 9rem);

	background-color: var(--kleurPapier);
}

/* ==========================================================================
   2. De kop
   ========================================================================== */

.ifKop {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(0.5rem, 1.5vw, 1.25rem) clamp(6.5rem, 10vw, 8.5rem);
	background-color: var(--kleurNacht);
	background-image:
		radial-gradient(90% 110% at 85% 0%, rgb(83 70 128 / 50%) 0%, rgb(83 70 128 / 0%) 62%),
		linear-gradient(172deg, #07021B 0%, #150A3D 58%, #2A1A63 100%);
	color: var(--kleurWit);
}

.ifKop--zonderKort {
	padding-block-end: clamp(3.5rem, 6vw, 5rem);
}

/* Waar de nacht licht wordt: dezelfde bolling als onder de kop van de winkel. */
.ifKop::after {
	content: "";
	position: absolute;
	inset-block-end: -1px;
	inset-inline: -12%;
	z-index: 1;
	block-size: clamp(40px, 5.5vw, 80px);
	background-color: var(--kleurPapier);
	border-start-start-radius: 50% 100%;
	border-start-end-radius: 50% 100%;
}

.ifKop__nacht {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.ifKop__maan {
	position: absolute;
	inset-block-start: -38%;
	inset-inline-end: -8%;
	inline-size: clamp(240px, 32vw, 460px);
	aspect-ratio: 1;
	border-radius: 50%;
	background-image: radial-gradient(
		circle at 34% 32%,
		rgb(255 255 255 / 17%) 0%,
		rgb(201 195 220 / 8%) 44%,
		rgb(201 195 220 / 0%) 70%
	);
}

/* Een handvol sterren. Achtergronden en geen elementen: het is sfeer, geen
   inhoud, en zo staat er niets van in de opmaak. */
.ifKop__sterren {
	position: absolute;
	inset: 0;
	opacity: 0.75;
	background-image:
		radial-gradient(1.5px 1.5px at 12% 22%, rgb(255 255 255 / 80%) 50%, transparent 51%),
		radial-gradient(1px 1px at 24% 64%, rgb(255 255 255 / 60%) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 38% 16%, rgb(255 255 255 / 70%) 50%, transparent 51%),
		radial-gradient(1px 1px at 52% 44%, rgb(255 255 255 / 55%) 50%, transparent 51%),
		radial-gradient(2px 2px at 66% 28%, rgb(255 188 125 / 70%) 50%, transparent 51%),
		radial-gradient(1px 1px at 74% 70%, rgb(255 255 255 / 55%) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 88% 52%, rgb(255 255 255 / 70%) 50%, transparent 51%),
		radial-gradient(1px 1px at 94% 14%, rgb(255 255 255 / 60%) 50%, transparent 51%);
}

.ifKop__gloed {
	position: absolute;
	inset-block-end: -45%;
	inset-inline-start: 5%;
	inline-size: clamp(320px, 50vw, 720px);
	aspect-ratio: 2 / 1;
	background-image: radial-gradient(ellipse at center, rgb(255 188 125 / 14%) 0%, rgb(255 188 125 / 0%) 68%);
}

.ifKop__inhoud {
	position: relative;
	z-index: 2;
}

/* Het kruimelpad op een donkere ondergrond, net als in de kop van het blog. */
.ifKop .esseoBreadcrumbs {
	padding-block: var(--ruimte3) var(--ruimte6);
	color: rgb(255 255 255 / 52%);
	font-size: var(--vloeiendLabel);
}

.ifKop .esseoBreadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.45rem;
	align-items: center;
}

.ifKop .esseoBreadcrumbs li {
	display: inline-flex;
	gap: 0.45rem;
	align-items: center;
}

.ifKop .esseoBreadcrumbs a {
	color: rgb(255 255 255 / 72%);
}

.ifKop .esseoBreadcrumbs a:hover {
	color: var(--kleurWit);
}

.ifKop .esseoBreadcrumbs [aria-current] {
	color: rgb(255 255 255 / 52%);
}

.ifKop__titelRij {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 2vw, 1.4rem);
}

.ifKop__icoon {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: clamp(3rem, 2.4rem + 2vw, 4rem);
	block-size: clamp(3rem, 2.4rem + 2vw, 4rem);
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: 30%;
	background-color: rgb(255 255 255 / 7%);
	color: var(--kleurDageraad);
}

.ifKop__teken {
	inline-size: 45%;
	block-size: 45%;
}

.ifKop__titel {
	font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.9rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.02;
	overflow-wrap: anywhere;
}

/* Het overzicht is een voorkant, net als die van het blog: groot en kapitaal. */
.ifKop--overzicht .ifKop__titel {
	font-size: clamp(2.8rem, 1.3rem + 5.4vw, 5.8rem);
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 0.94;
	text-transform: uppercase;
}

.ifKop__geschreven {
	display: block;
	margin-block-start: 0.4rem;
	color: var(--kleurDageraad);
	font-family: var(--letterGeschreven);
	font-size: clamp(1.5rem, 0.9rem + 2vw, 2.4rem);
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.1;
	text-transform: none;
}

.ifKop__intro {
	max-inline-size: 40rem;
	margin-block-start: 1.1rem;
	color: rgb(255 255 255 / 74%);
	font-size: var(--vloeiendLopend);
	line-height: 1.65;
}

.ifKop__intro p + p {
	margin-block-start: var(--ruimte3);
}

/* Het zoekveld: één pil met het vergrootglas en de knop erin, net als in de
   header — maar groot, want hier is het de hoofdzaak. */
.ifZoek {
	display: flex;
	align-items: center;
	max-inline-size: 40rem;
	margin-block-start: var(--ruimte6);
	padding: 6px;
	border-radius: var(--rondingPil);
	background-color: var(--kleurWit);
	box-shadow: 0 20px 44px rgb(0 0 0 / 30%);
	transition: box-shadow var(--duurKort) var(--soepel);
}

.ifZoek:focus-within {
	box-shadow: 0 0 0 4px rgb(255 188 125 / 45%), 0 20px 44px rgb(0 0 0 / 30%);
}

.ifZoek__teken {
	margin-inline-start: 0.9rem;
	color: var(--kleurPrimair);
}

.ifZoek__veld {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding: 0.85rem 0.9rem;
	border: 0;
	background-color: transparent;
	color: var(--kleurTekst);
	font-size: 1rem;
	font-weight: 500;
}

.ifZoek__veld:focus {
	outline: none;
}

.ifZoek__veld::placeholder {
	color: var(--kleurSecundair);
	opacity: 0.7;
}

.ifZoek__knop {
	flex: none;
	padding: 0.85rem 1.5rem;
	border-radius: var(--rondingPil);
	background-image: linear-gradient(135deg, #6B59A8 0%, #534680 55%, #3B2F63 100%);
	color: var(--kleurWit);
	font-size: 0.9375rem;
	font-weight: 700;
	transition: transform var(--duurKort) var(--soepel);
}

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

.ifPopulair {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-block-start: var(--ruimte4);
}

.ifPopulair__kop {
	color: rgb(255 255 255 / 52%);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ifPopulair__lijst {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ifPopulair__vraag {
	display: inline-block;
	padding: 0.4rem 0.85rem;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: var(--rondingPil);
	color: rgb(255 255 255 / 86%);
	font-size: 0.8125rem;
	font-weight: 500;
	transition:
		background-color var(--duurKort) var(--soepel),
		border-color var(--duurKort) var(--soepel);
}

.ifPopulair__vraag:hover {
	border-color: rgb(255 255 255 / 40%);
	background-color: rgb(255 255 255 / 8%);
	color: var(--kleurWit);
	text-decoration: none;
}

/* De feiten van een lange tekst: leestijd, datum, afdrukken. */
.ifFeiten {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: var(--ruimte5);
}

.ifFeiten__feit {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.85rem;
	border-radius: var(--rondingPil);
	background-color: rgb(255 255 255 / 7%);
	color: rgb(255 255 255 / 78%);
	font-size: 0.8125rem;
	font-weight: 500;
}

/* `hidden` tot het script er is: zonder script doet de knop niets. */
.ifFeiten__feit[hidden] {
	display: none;
}

.ifFeiten__feit--knop {
	padding: 0;
}

.ifFeiten__knop {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.85rem;
	border-radius: var(--rondingPil);
	color: var(--kleurWit);
	font-size: inherit;
	font-weight: 600;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 22%);
	transition: background-color var(--duurKort) var(--soepel);
}

.ifFeiten__knop:hover {
	background-color: rgb(255 255 255 / 12%);
}

.ifFeiten__icoon {
	inline-size: 1rem;
	block-size: 1rem;
	color: var(--kleurDageraad);
}

/* ==========================================================================
   3. In het kort, en de beloftes
   ========================================================================== */

.ifKort {
	position: relative;
	z-index: 3;
	margin-block-start: calc(-1 * clamp(4.5rem, 7.5vw, 6rem));
}

.ifKort__kaart {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--ruimte5) clamp(1.5rem, 3vw, 2.75rem);
	padding: clamp(1.25rem, 2.6vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
	border-radius: var(--ifRonding);
	background-color: var(--kleurWit);
	box-shadow: var(--ifKaartSchaduw);
}

.ifKort__kop {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
	color: var(--kleurDiep);
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
	white-space: nowrap;
}

.ifKort__kopTeken {
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0.5rem;
	border-radius: 50%;
	background-color: rgb(36 163 14 / 12%);
	color: var(--kleurGroen);
}

.ifKort__lijst {
	display: grid;
	grid-template-columns: repeat(var(--aantal, 3), minmax(0, 1fr));
}

.ifKort__punt {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	padding-inline: clamp(0.9rem, 1.8vw, 1.5rem);
	border-inline-start: 1px solid var(--kleurLijn);
}

.ifKort__icoon {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 2.6rem;
	block-size: 2.6rem;
	border-radius: 30%;
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
}

.ifKort__icoon .icoon {
	inline-size: 1.3rem;
	block-size: 1.3rem;
}

.ifKort__tekst {
	display: grid;
	gap: 0.2rem;
	padding-block-start: 0.15rem;
}

.ifKort__titel {
	color: var(--kleurTekst);
	font-size: 0.975rem;
	font-weight: 700;
	line-height: 1.3;
}

.ifKort__uitleg {
	color: var(--kleurSecundair);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* De beloftes op het overzicht: geen kop ervoor, alleen de rij. */
.ifKort--beloftes .ifKort__kaart {
	grid-template-columns: minmax(0, 1fr);
}

.ifKort--beloftes .ifKort__punt:first-child {
	border-inline-start: 0;
	padding-inline-start: 0;
}

/* ==========================================================================
   4. De indeling
   ========================================================================== */

.ifRaster {
	display: grid;
	grid-template-columns: 16.5rem minmax(0, 1fr);
	align-items: start;
	gap: clamp(2rem, 5vw, 4.5rem);
	padding-block: var(--ifSectie);
}

.ifNaast {
	position: sticky;
	inset-block-start: var(--ifKopRuimte);
	display: grid;
	gap: var(--ruimte6);
	max-block-size: var(--ifNaastHoogte);
	overflow-y: auto;
	padding-block-end: var(--ruimte4);
	scrollbar-width: thin;
}

.ifNaast__kop {
	margin-block-end: 0.6rem;
	color: var(--kleurLila);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ifHoofd {
	min-inline-size: 0;
	max-inline-size: 47rem;
}

/* ==========================================================================
   5. De inhoudsopgave en het menu
   ========================================================================== */

.ifOpgave__lijst {
	position: relative;
	display: grid;
	border-inline-start: 2px solid var(--kleurLijn);
}

.ifOpgave__link {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	padding: 0.38rem 0 0.38rem 1rem;
	color: var(--kleurSecundair);
	font-size: 0.875rem;
	line-height: 1.35;
	transition: color var(--duurKort) var(--soepel);
}

/* De streep op de lijn: waar je bent (het script zet isActief). */
.ifOpgave__link::before {
	content: "";
	position: absolute;
	inset-block: 0.25rem;
	inset-inline-start: -2px;
	inline-size: 2px;
	border-radius: 2px;
	background-color: var(--kleurPrimair);
	transform: scaleY(0);
	transition: transform var(--duurMiddel) var(--soepel);
}

.ifOpgave__link:hover,
.ifOpgave__link.isActief {
	color: var(--kleurPrimair);
	text-decoration: none;
}

.ifOpgave__link.isActief {
	font-weight: 600;
}

.ifOpgave__link.isActief::before {
	transform: scaleY(1);
}

.ifOpgave__nummer {
	flex: none;
	min-inline-size: 1.5rem;
	color: var(--kleurLila);
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Op een telefoon: dicht, boven de tekst. */
.ifOpgave--uitklap {
	margin-block-end: var(--ruimte6);
	border: 1px solid var(--kleurLijn);
	border-radius: var(--ifRondingKlein);
	background-color: var(--kleurWit);
}

.ifOpgave__kop {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.1rem;
	color: var(--kleurTekst);
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.ifOpgave__kop::-webkit-details-marker {
	display: none;
}

.ifOpgave__aantal {
	display: grid;
	place-items: center;
	min-inline-size: 1.5rem;
	block-size: 1.5rem;
	padding-inline: 0.35rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
	font-size: 0.75rem;
}

.ifOpgave__chevron {
	inline-size: 1.1rem;
	block-size: 1.1rem;
	margin-inline-start: auto;
	transition: transform var(--duurKort) var(--soepel);
}

.ifOpgave--uitklap[open] .ifOpgave__chevron {
	transform: rotate(180deg);
}

.ifOpgave--uitklap .ifOpgave__lijst {
	margin: 0 1.1rem 1rem;
}

/* Het menu: de onderwerpen en het beleid. */
.ifMenu {
	display: grid;
	gap: 0.2rem;
}

.ifMenu__lijst {
	display: grid;
	gap: 0.15rem;
}

.ifMenu__lijst + .ifNaast__kop {
	margin-block-start: var(--ruimte5);
}

.ifMenu__link {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.5rem 0.7rem;
	border-radius: 12px;
	color: var(--kleurTekst);
	font-size: 0.9rem;
	font-weight: 500;
	transition:
		background-color var(--duurKort) var(--soepel),
		color var(--duurKort) var(--soepel);
}

.ifMenu__link:hover {
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
	text-decoration: none;
}

.ifMenu__link.isHier {
	background-color: var(--kleurWit);
	color: var(--kleurPrimair);
	font-weight: 700;
	box-shadow: 0 1px 2px rgb(21 10 61 / 6%), 0 6px 18px rgb(21 10 61 / 8%);
}

.ifMenu__icoon {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	color: var(--kleurLila);
}

.ifMenu__link.isHier .ifMenu__icoon,
.ifMenu__link:hover .ifMenu__icoon {
	color: var(--kleurPrimair);
}

.ifMenu__terug {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-block-start: var(--ruimte4);
	padding-inline: 0.7rem;
	color: var(--kleurPrimair);
	font-size: 0.875rem;
	font-weight: 700;
}

/* Onder de tekst, op een telefoon: in een vlak, zodat het geen tweede
   paginatekst lijkt. */
.ifMenu--onder {
	margin-block-end: var(--ifSectie);
	padding: var(--ruimte5);
	border-radius: var(--ifRonding);
	background-color: var(--kleurMist);
}

/* ==========================================================================
   6. De tekst
   ========================================================================== */

.ifTekst {
	color: #3A3A3A;
	font-size: var(--vloeiendLopend);
	line-height: 1.75;
}

.ifTekst > :first-child {
	margin-block-start: 0;
}

.ifTekst h2 {
	margin-block-start: var(--ruimte7);
	color: var(--kleurTekst);
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	scroll-margin-block-start: var(--ifKopRuimte);
}

/* In een document: een haarlijn boven elk artikel, zodat je in één oogopslag
   ziet waar het ene ophoudt en het volgende begint. */
.informatie--document .ifTekst h2 {
	padding-block-start: var(--ruimte6);
	border-block-start: 1px solid var(--kleurLijn);
}

.informatie--document .ifTekst > h2:first-child {
	padding-block-start: 0;
	border-block-start: 0;
}

/* "Artikel 6" als label boven "Herroepingsrecht". */
.ifKopNummer {
	display: block;
	margin-block-end: 0.35rem;
	color: var(--kleurPrimair);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ifTekst h3 {
	margin-block-start: var(--ruimte5);
	color: var(--kleurTekst);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
}

.ifTekst h2 + *,
.ifTekst h3 + * {
	margin-block-start: var(--ruimte3);
}

.ifTekst strong {
	color: var(--kleurTekst);
}

.ifTekst a {
	color: var(--kleurPrimair);
	font-weight: 500;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

.ifTekst a:hover {
	text-decoration-thickness: 2px;
}

/* Een opsomming: een lila stip in plaats van het zwarte bolletje. */
.ifTekst ul {
	padding-inline-start: 0;
	list-style: none;
}

.ifTekst ul > li {
	position: relative;
	padding-inline-start: 1.5rem;
}

.ifTekst ul > li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.72em;
	inset-inline-start: 0.35rem;
	inline-size: 0.4rem;
	block-size: 0.4rem;
	border-radius: 50%;
	background-color: var(--kleurLila);
}

/* De leden van een artikel: het nummer in een rondje, zoals in een goed
   gezet contract. */
.ifTekst ol {
	padding-inline-start: 0;
	list-style: none;
	counter-reset: lid;
}

.ifTekst ol > li {
	position: relative;
	padding-inline-start: 2.4rem;
	counter-increment: lid;
}

.ifTekst ol > li::before {
	content: counter(lid);
	position: absolute;
	inset-block-start: 0.2em;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	border-radius: 50%;
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.ifTekst li > ol,
.ifTekst li > ul {
	margin-block-start: var(--ruimte2);
}

/* ==========================================================================
   7. De vragen
   ========================================================================== */

.ifVragen {
	margin-block-start: var(--ruimte7);
}

.ifTekst + .ifVragen {
	padding-block-start: var(--ruimte6);
	border-block-start: 1px solid var(--kleurLijn);
}

.ifHoofd > .ifVragen:first-child {
	margin-block-start: 0;
}

.ifVragen__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ruimte2) var(--ruimte4);
	margin-block-end: var(--ruimte5);
}

.ifVragen__titel {
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.ifVragen__titel::first-letter {
	text-transform: uppercase;
}

.ifVragen__aantal {
	padding: 0.3rem 0.75rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
	font-size: 0.8125rem;
	font-weight: 700;
}

.ifVragen__lijst {
	display: grid;
	gap: 0.7rem;
}

.ifVraag {
	border: 1px solid var(--kleurLijn);
	border-radius: var(--ifRondingKlein);
	background-color: var(--kleurWit);
	scroll-margin-block-start: var(--ifKopRuimte);
	transition:
		border-color var(--duurMiddel) var(--soepel),
		box-shadow var(--duurMiddel) var(--soepel);
}

.ifVraag:hover {
	border-color: rgb(83 70 128 / 30%);
}

.ifVraag[open] {
	border-color: rgb(83 70 128 / 30%);
	box-shadow: 0 1px 2px rgb(21 10 61 / 5%), 0 14px 34px rgb(21 10 61 / 9%);
}

.ifVraag__vraag {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding: 1.05rem 1.15rem;
	color: var(--kleurTekst);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.ifVraag__vraag::-webkit-details-marker {
	display: none;
}

.ifVraag__nummer {
	color: var(--kleurLila);
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ifVraag__teken {
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
	transition:
		background-color var(--duurMiddel) var(--soepel),
		color var(--duurMiddel) var(--soepel),
		transform var(--duurMiddel) var(--soepel);
}

.ifVraag__plus {
	inline-size: 1rem;
	block-size: 1rem;
}

.ifVraag[open] .ifVraag__teken {
	background-color: var(--kleurPrimair);
	color: var(--kleurWit);
	transform: rotate(45deg);
}

.ifVraag__antwoord {
	display: grid;
	gap: var(--ruimte4);
	padding: 0 1.15rem 1.25rem calc(1.15rem + 1rem + 1.5rem);
	color: #3A3A3A;
	font-size: 0.975rem;
	line-height: 1.7;
}

.ifVraag__antwoord ul {
	padding-inline-start: 1.1rem;
	list-style: disc;
}

.ifVraag__antwoord ol {
	padding-inline-start: 1.25rem;
	list-style: decimal;
}

.ifVraag__antwoord li + li {
	margin-block-start: 0.25rem;
}

.ifVraag__los {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 0.4rem;
	color: var(--kleurPrimair);
	font-size: 0.8125rem;
	font-weight: 600;
}

.ifVraag__losIcoon {
	inline-size: 0.95rem;
	block-size: 0.95rem;
}

/* ==========================================================================
   8. Het overzicht: de onderwerpen en het beleid
   ========================================================================== */

.ifSectieKop {
	max-inline-size: 38rem;
	margin-block-end: var(--ruimte6);
}

.ifSectieKop__titel {
	font-size: var(--vloeiendGroot);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
}

.ifSectieKop__tekst {
	margin-block-start: var(--ruimte3);
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLopend);
	line-height: 1.6;
}

.ifOnderwerpen {
	padding-block: var(--ifSectie);
}

.ifOnderwerpen__raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: clamp(0.9rem, 1.6vw, 1.25rem);
}

/* Een onderwerp. De hele kaart is klikbaar via de link in de titel; de
   vragen liggen er met z-index bovenop. */
.ifOnderwerp {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: clamp(1.25rem, 2vw, 1.6rem);
	border: 1px solid var(--kleurLijn);
	border-radius: var(--ifRonding);
	background-color: var(--kleurWit);
	transition:
		transform var(--duurMiddel) var(--soepel),
		box-shadow var(--duurMiddel) var(--soepel),
		border-color var(--duurMiddel) var(--soepel);
}

.ifOnderwerp:hover {
	border-color: rgb(83 70 128 / 25%);
	box-shadow: var(--ifKaartSchaduw);
	transform: translateY(-3px);
}

.ifOnderwerp:focus-within {
	border-color: var(--kleurPrimair);
}

.ifOnderwerp__kop {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-block-end: 0.3rem;
}

/* Het icoon in een stukje nacht, met de dageraad erin. */
.ifOnderwerp__icoon {
	display: grid;
	place-items: center;
	inline-size: 3.1rem;
	block-size: 3.1rem;
	border-radius: 30%;
	background-image: linear-gradient(150deg, #2A1A63 0%, #10054D 100%);
	color: var(--kleurDageraad);
	box-shadow: 0 10px 20px rgb(16 5 77 / 22%);
	transition: transform var(--duurMiddel) var(--soepel);
}

.ifOnderwerp:hover .ifOnderwerp__icoon {
	transform: rotate(-6deg) scale(1.04);
}

.ifOnderwerp__nummer {
	color: var(--kleurLijn);
	font-size: 1.6rem;
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
}

.ifOnderwerp__titel {
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

.ifOnderwerp__link {
	color: var(--kleurTekst);
}

.ifOnderwerp__link:hover {
	text-decoration: none;
}

.ifOnderwerp__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.ifOnderwerp__omschrijving {
	color: var(--kleurSecundair);
	font-size: 0.9rem;
	line-height: 1.55;
}

.ifOnderwerp__vragen {
	display: grid;
	gap: 0.1rem;
	margin-block-start: 0.2rem;
	padding-block-start: 0.7rem;
	border-block-start: 1px dashed var(--kleurLijn);
}

.ifOnderwerp__vraag {
	position: relative;
	z-index: 1;
	display: block;
	padding-block: 0.28rem;
	padding-inline-start: 1.1rem;
	color: var(--kleurTekst);
	font-size: 0.875rem;
	line-height: 1.4;
}

.ifOnderwerp__vraag::before {
	content: "";
	position: absolute;
	inset-block-start: 0.82em;
	inset-inline-start: 0.1rem;
	inline-size: 0.35rem;
	block-size: 0.35rem;
	border-radius: 50%;
	background-color: var(--kleurLila);
}

.ifOnderwerp__vraag:hover {
	color: var(--kleurPrimair);
}

.ifOnderwerp__voet {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-start: auto;
	padding-block-start: 0.6rem;
	color: var(--kleurPrimair);
	font-size: 0.875rem;
	font-weight: 700;
}

.ifOnderwerp__pijl {
	transition: transform var(--duurMiddel) var(--soepel);
}

.ifOnderwerp:hover .ifOnderwerp__pijl {
	transform: translateX(4px);
}

/* Het beleid: een vlak in de mist, met de documenten als rijen. */
.ifBeleid {
	padding-block: var(--ifSectie);
	background-color: var(--kleurMist);
}

.ifBeleid__inhoud {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	align-items: start;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.ifBeleid__lijst {
	display: grid;
	gap: 0.6rem;
}

.ifDocument {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.2rem;
	border-radius: var(--ifRondingKlein);
	background-color: var(--kleurWit);
	color: var(--kleurTekst);
	box-shadow: 0 1px 2px rgb(21 10 61 / 5%);
	transition:
		box-shadow var(--duurMiddel) var(--soepel),
		transform var(--duurMiddel) var(--soepel);
}

.ifDocument:hover {
	box-shadow: 0 1px 2px rgb(21 10 61 / 5%), 0 14px 30px rgb(21 10 61 / 10%);
	transform: translateX(4px);
	text-decoration: none;
}

.ifDocument__icoon {
	display: grid;
	place-items: center;
	inline-size: 2.6rem;
	block-size: 2.6rem;
	border-radius: 30%;
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
}

.ifDocument__icoon .icoon {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

.ifDocument__tekst {
	display: grid;
	gap: 0.15rem;
}

.ifDocument__titel {
	font-size: 1rem;
	font-weight: 700;
}

.ifDocument__omschrijving {
	color: var(--kleurSecundair);
	font-size: 0.85rem;
	line-height: 1.45;
}

.ifDocument__pijl {
	color: var(--kleurPrimair);
}

/* ==========================================================================
   9. Hulp nodig
   ========================================================================== */

.ifHulp {
	padding-block: var(--ifSectie) 0;
}

/* Het beleid is mist; dan begint de hulp daar, zonder witte strook ertussen. */
.ifBeleid + .ifHulp {
	background-image: linear-gradient(var(--kleurMist) 50%, var(--kleurPapier) 50%);
	padding-block-start: 0;
}

.ifHulp__kaart {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	padding: clamp(1.75rem, 4vw, 3.25rem);
	border-radius: var(--ifRonding);
	background-color: var(--kleurNacht);
	background-image: linear-gradient(160deg, #150A3D 0%, #07021B 100%);
	color: var(--kleurWit);
}

.ifHulp__nacht {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.ifHulp__maan {
	position: absolute;
	inset-block-end: -55%;
	inset-inline-start: -10%;
	inline-size: clamp(260px, 34vw, 480px);
	aspect-ratio: 1;
	border-radius: 50%;
	background-image: radial-gradient(circle, rgb(255 188 125 / 16%) 0%, rgb(255 188 125 / 0%) 65%);
}

.ifHulp__titel {
	font-size: var(--vloeiendGroot);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
}

.ifHulp__uitleg {
	max-inline-size: 30rem;
	margin-block-start: var(--ruimte3);
	color: rgb(255 255 255 / 72%);
	font-size: var(--vloeiendLopend);
	line-height: 1.6;
}

.ifHulp__faq {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-block-start: var(--ruimte5);
	color: var(--kleurDageraad);
	font-size: 0.9375rem;
	font-weight: 700;
}

.ifHulp__kanalen {
	display: grid;
	gap: 0.6rem;
}

.ifKanaal {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.95rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: var(--ifRondingKlein);
	background-color: rgb(255 255 255 / 5%);
	color: var(--kleurWit);
	transition:
		background-color var(--duurKort) var(--soepel),
		border-color var(--duurKort) var(--soepel);
}

.ifKanaal:hover {
	border-color: rgb(255 255 255 / 28%);
	background-color: rgb(255 255 255 / 10%);
	color: var(--kleurWit);
	text-decoration: none;
}

.ifKanaal__icoon {
	display: grid;
	place-items: center;
	inline-size: 2.6rem;
	block-size: 2.6rem;
	border-radius: 50%;
	background-color: var(--kleurDageraad);
	color: var(--kleurDiep);
}

.ifKanaal__icoon .icoon {
	inline-size: 1.2rem;
	block-size: 1.2rem;
}

.ifKanaal__tekst {
	display: grid;
	gap: 0.1rem;
	min-inline-size: 0;
}

.ifKanaal__titel {
	font-size: 1rem;
	font-weight: 700;
}

.ifKanaal__uitleg {
	overflow: hidden;
	color: rgb(255 255 255 / 66%);
	font-size: 0.875rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ifKanaal__pijl {
	color: rgb(255 255 255 / 55%);
	transition: transform var(--duurKort) var(--soepel);
}

.ifKanaal:hover .ifKanaal__pijl {
	transform: translateX(3px);
	color: var(--kleurWit);
}

/* ==========================================================================
   10. Smallere schermen
   ========================================================================== */

@media (max-width: 1024px) {
	.ifKort__kaart {
		grid-template-columns: minmax(0, 1fr);
	}

	.ifKort__lijst {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ruimte5) 0;
	}

	.ifKort__punt:nth-child(odd) {
		border-inline-start: 0;
		padding-inline-start: 0;
	}

	.ifKort__kop {
		flex-direction: row;
		align-items: center;
	}

	.ifRaster {
		grid-template-columns: 14rem minmax(0, 1fr);
	}

	.ifBeleid__inhoud,
	.ifHulp__kaart {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Op een telefoon staat er geen kolom naast de tekst (de server laat hem weg),
   dus is het raster één kolom. */
@media (max-width: 767px) {
	.ifKop {
		padding-block-end: clamp(5.5rem, 20vw, 6.5rem);
	}

	.ifKop--zonderKort {
		padding-block-end: 3.5rem;
	}

	.ifZoek__knop {
		padding-inline: 1.1rem;
	}

	.ifKort__lijst {
		grid-template-columns: minmax(0, 1fr);
	}

	.ifKort__punt {
		border-inline-start: 0;
		padding-inline: 0;
	}

	.ifRaster {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Het nummer kost op een telefoon de ruimte die de vraag nodig heeft. */
	.ifVraag__vraag {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.7rem;
		padding: 0.95rem 1rem;
		font-size: 0.975rem;
	}

	.ifVraag__nummer {
		display: none;
	}

	.ifVraag__antwoord {
		padding-inline: 1rem;
	}

	.ifDocument {
		padding: 0.9rem 1rem;
	}
}

/* ==========================================================================
   11. Op papier
   --------------------------------------------------------------------------
   De voorwaarden moet je kunnen bewaren. Op papier (of als pdf) staat alleen
   de tekst: geen nacht, geen menu, geen knoppen.
   ========================================================================== */

@media print {
	.siteKop,
	.siteVoet,
	.ifKop__nacht,
	.ifKop::after,
	.ifKop .esseoBreadcrumbs,
	.ifFeiten__feit[data-afdrukken],
	.ifNaast,
	.ifMenu,
	.ifHulp,
	.ifVraag__los,
	.naarInhoud {
		display: none;
	}

	.informatie,
	.ifKop {
		background: none;
		color: #000;
	}

	.ifKop {
		padding-block: 0 1rem;
	}

	.ifKop__intro,
	.ifFeiten__feit {
		color: #000;
		background: none;
	}

	.ifKop__icoon {
		display: none;
	}

	.ifKort {
		margin-block-start: 0;
	}

	.ifKort__kaart {
		box-shadow: none;
		border: 1px solid #CCC;
	}

	.ifRaster {
		display: block;
		padding-block: 1rem 0;
	}

	.ifHoofd {
		max-inline-size: none;
	}

	.ifTekst h2 {
		break-after: avoid;
	}

	.ifTekst li {
		break-inside: avoid;
	}
}