/*
 * faq.css — het overzicht van de veelgestelde vragen en elk onderwerp
 * (baserules regel 8).
 *
 * Eén bestand voor allebei: ze gebruiken hetzelfde sjabloon, faq.php (zie
 * inc/dekbedgekteFaqWeergave.php). Het teken (de maan als vraagteken) en het
 * contactblok onderaan staan in main.css, want die staan ook op één vraag.
 *
 * ── Het idee ──────────────────────────────────────────────────────────────
 *
 * Wakker liggen van een vraag. De kop is dezelfde nacht als het blog en de
 * winkel, maar hij begint met een zoekveld in plaats van met een lijst: wie
 * hier komt, zit ergens mee en wil het antwoord, niet een inhoudsopgave. Onder
 * de kop de onderwerpen als kaarten die over de rand van de nacht vallen, en
 * daaronder op papier de vragen als uitklappers — genummerd, met het korte
 * antwoord erin en de doorklik naar het hele antwoord.
 *
 * ── Wat er waar staat ─────────────────────────────────────────────────────
 *
 *   1. de tokens
 *   2. de kop: de nacht, de titel, het zoekveld, veel gevraagd
 *   3. de onderwerpen als kaarten
 *   4. de inhoud: het raster en de wijzer
 *   5. de lijst: de status, een onderwerp, een vraag
 *   6. niets gevonden
 *   7. smallere schermen
 */

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

.faq {
	--omhulselBreedte: 1200px;

	/* Waar de wijzer blijft hangen, en waar een anker onder de header landt.
	   De header is dan al ingeklapt (isKlein): ongeveer 7 rem. */
	--faqPlakt: 8.5rem;

	/* Hoeveel de kaarten over de onderkant van de kop vallen. */
	--faqOverlap: clamp(3.5rem, 7vw, 5.5rem);

	/* De dageraad is op papier te licht om te lezen; dit is dezelfde tint, donker
	   genoeg voor tekst (4,6:1) — dezelfde waarde als in single.css. */
	--faqOchtendDiep: #A2551B;

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

@media (max-width: 1024px) {
	.faq {
		--omhulselBreedte: 748px;
	}
}

@media (max-width: 767px) {
	.faq {
		--omhulselBreedte: none;
		--faqPlakt: 5.5rem;
	}
}

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

.faqKop {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(0.5rem, 1.5vw, 1.25rem) calc(var(--faqOverlap) + clamp(2rem, 4vw, 3rem));
	background-color: var(--kleurNacht);
	background-image:
		radial-gradient(90% 90% at 85% 10%, rgb(83 70 128 / 55%) 0%, rgb(83 70 128 / 0%) 60%),
		linear-gradient(170deg, #07021B 0%, #150A3D 55%, #2A1A63 100%);
	color: var(--kleurWit);
}

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

.faqKop__gloed {
	position: absolute;
	inset-block-end: -45%;
	inset-inline-start: 50%;
	inline-size: clamp(420px, 80vw, 1100px);
	aspect-ratio: 2 / 1;
	background-image: radial-gradient(ellipse at center, rgb(255 188 125 / 17%) 0%, rgb(255 188 125 / 0%) 66%);
	transform: translateX(-50%);
}

.faqKop__inhoud {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

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

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

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

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

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

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

.faqKop__titel {
	font-size: clamp(2.6rem, 1.2rem + 5vw, 5.4rem);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 0.95;
}

.faqKop__geschreven {
	display: block;
	margin-block-start: 0.4rem;
	color: var(--kleurDageraad);
	font-family: var(--letterGeschreven);
	font-size: clamp(1.6rem, 0.9rem + 2.2vw, 2.6rem);
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.1;
}

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

.faqKop__maan {
	max-inline-size: 17rem;
	justify-self: end;
	filter: drop-shadow(0 0 40px rgb(201 195 220 / 25%));
	animation: faqZweven 7s ease-in-out infinite;
}

@keyframes faqZweven {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}

	50% {
		transform: translateY(-12px) rotate(-2deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.faqKop__maan {
		animation: none;
	}
}

/*
 * Het zoekveld: één pil, met het vergrootglas en de knop erin. De rand zit op
 * het omhulsel en niet op het veld, net als in de header: anders staat er bij
 * focus een lijn binnen een lijn.
 */
.faqZoek {
	max-inline-size: 40rem;
	margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
}

.faqZoek__veldje {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.45rem 0.45rem 1.25rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurWit);
	box-shadow:
		0 0 0 6px rgb(255 255 255 / 8%),
		0 18px 50px rgb(7 2 27 / 45%);
	transition: box-shadow var(--duurMiddel) var(--soepel);
}

.faqZoek__veldje:focus-within {
	box-shadow:
		0 0 0 6px rgb(255 188 125 / 38%),
		0 18px 50px rgb(7 2 27 / 45%);
}

.faqZoek__icoon {
	flex: none;
	inline-size: 1.35rem;
	block-size: 1.35rem;
	color: var(--kleurPrimair);
}

.faqZoek__veld {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding-block: 0.75rem;
	border: 0;
	background: transparent;
	color: var(--kleurTekst);
	font-size: 1.0625rem;
	font-weight: 500;
	outline: none;
}

.faqZoek__veld::placeholder {
	color: #75728A;
	font-weight: 400;
}

.faqZoek__knop {
	flex: none;
	padding: 0.85rem 1.4rem;
	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;
	cursor: pointer;
	transition: transform var(--duurMiddel) var(--soepel);
}

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

/* Veel gevraagd: de snelkoppelingen onder het zoekveld, als ruitjes glas. */
.faqPopulair {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 0.9rem;
	margin-block-start: 1.25rem;
}

.faqPopulair__kop {
	color: var(--kleurLilaLicht);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

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

.faqPopulair__vraag {
	display: inline-flex;
	padding: 0.45rem 0.9rem;
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: var(--rondingPil);
	background-color: rgb(255 255 255 / 6%);
	color: var(--kleurWit);
	font-size: var(--vloeiendKlein);
	font-weight: 500;
	line-height: 1.35;
	transition:
		background-color var(--duurKort) var(--soepel),
		border-color var(--duurKort) var(--soepel);
}

.faqPopulair__vraag:hover {
	border-color: rgb(255 188 125 / 55%);
	background-color: rgb(255 188 125 / 12%);
	color: var(--kleurWit);
	text-decoration: none;
}

/* ==========================================================================
   3. De onderwerpen als kaarten
   ========================================================================== */

.faqOnderwerpen {
	position: relative;
	z-index: 2;
	margin-block-start: calc(var(--faqOverlap) * -1);
}

.faqOnderwerpen__lijst {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.9rem;
}

.faqOnderwerp {
	display: flex;
	align-items: center;
	gap: 1rem;
	block-size: 100%;
	padding: 1.1rem 1.2rem;
	border-radius: 22px;
	background-color: var(--kleurWit);
	color: var(--kleurTekst);
	box-shadow:
		0 1px 2px rgb(16 5 77 / 6%),
		0 14px 36px rgb(16 5 77 / 12%);
	transition:
		transform var(--duurMiddel) var(--soepel),
		box-shadow var(--duurMiddel) var(--soepel),
		background-color var(--duurMiddel) var(--soepel);
}

.faqOnderwerp:hover {
	color: var(--kleurTekst);
	text-decoration: none;
	transform: translateY(-3px);
	box-shadow:
		0 1px 2px rgb(16 5 77 / 6%),
		0 22px 44px rgb(16 5 77 / 18%);
}

.faqOnderwerp__icoon {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: 16px;
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
	transition:
		background-color var(--duurMiddel) var(--soepel),
		color var(--duurMiddel) var(--soepel);
}

.faqOnderwerp:hover .faqOnderwerp__icoon {
	background-color: var(--kleurPrimair);
	color: var(--kleurWit);
}

.faqOnderwerp__tekst {
	display: grid;
	flex: 1 1 auto;
	gap: 0.1rem;
	min-inline-size: 0;
}

.faqOnderwerp__naam {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
}

.faqOnderwerp__aantal {
	color: var(--kleurSecundair);
	font-size: var(--vloeiendKlein);
}

.faqOnderwerp__pijl {
	flex: none;
	inline-size: 1.1rem;
	block-size: 1.1rem;
	color: var(--kleurPrimair);
	opacity: 0.45;
	transition:
		transform var(--duurMiddel) var(--soepel),
		opacity var(--duurMiddel) var(--soepel);
}

.faqOnderwerp:hover .faqOnderwerp__pijl {
	opacity: 1;
	transform: translateX(4px);
}

/* Op een onderwerp: die van hier is de nacht zelf. */
.faqOnderwerp.isHier {
	background-color: var(--kleurPrimair);
	background-image: linear-gradient(135deg, #6B59A8 0%, #534680 55%, #3B2F63 100%);
	color: var(--kleurWit);
}

.faqOnderwerp.isHier .faqOnderwerp__icoon {
	background-color: rgb(255 255 255 / 14%);
	color: var(--kleurDageraad);
}

.faqOnderwerp.isHier .faqOnderwerp__aantal,
.faqOnderwerp.isHier .faqOnderwerp__pijl {
	color: rgb(255 255 255 / 75%);
}

.faqOnderwerp--alles {
	background-color: var(--kleurMist);
	box-shadow: none;
}

/* ==========================================================================
   4. De inhoud: het raster en de wijzer
   ========================================================================== */

.faqInhoud {
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}

.faqInhoud__raster {
	display: grid;
	grid-template-columns: 15.5rem minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

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

/* Eén kolom leest prettiger smal. Als token en alleen op desktop: daaronder
   heeft het omhulsel zijn eigen, smallere breedte, en die moet blijven. */
@media (min-width: 1025px) {
	.faqInhoud__raster--enkel {
		--omhulselBreedte: 54rem;
	}
}

.faqWijzer__plak {
	position: sticky;
	inset-block-start: var(--faqPlakt);
	display: grid;
	gap: 0.35rem;
}

.faqWijzer__kop {
	margin-block-end: 0.35rem;
	padding-inline: 0.75rem;
	color: var(--kleurPrimair);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

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

.faqWijzer__link {
	position: relative;
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.65rem;
	padding: 0.65rem 0.75rem;
	border-radius: 14px;
	color: var(--kleurSecundair);
	font-size: 0.9375rem;
	font-weight: 600;
	transition:
		background-color var(--duurKort) var(--soepel),
		color var(--duurKort) var(--soepel);
}

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

/* Het onderwerp dat in beeld is: een streep dageraad ervoor, zoals een
   nachtlampje dat aan staat. */
.faqWijzer__link.isHier {
	background-color: var(--kleurWit);
	color: var(--kleurPrimair);
	box-shadow: 0 6px 18px rgb(16 5 77 / 8%);
}

.faqWijzer__link.isHier::before {
	content: "";
	position: absolute;
	inset-block: 0.6rem;
	inset-inline-start: 0;
	inline-size: 3px;
	border-radius: 3px;
	background-color: var(--kleurDageraad);
}

.faqWijzer__icoon {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

.faqWijzer__aantal {
	min-inline-size: 1.6rem;
	padding: 0.1rem 0.4rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurMist);
	color: var(--kleurSecundair);
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.faqWijzer__mens {
	display: grid;
	gap: 0.25rem;
	margin-block-start: 1rem;
	padding: 1rem 0.75rem 0;
	border-block-start: 1px solid var(--kleurLijn);
	color: var(--kleurSecundair);
	font-size: var(--vloeiendKlein);
}

.faqWijzer__mens a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--kleurPrimair);
	font-size: 1rem;
	font-weight: 700;
}

.faqWijzer__belIcoon {
	inline-size: 1.1rem;
	block-size: 1.1rem;
}

/* ==========================================================================
   5. De lijst
   ========================================================================== */

.faqLijst {
	display: grid;
	gap: clamp(2.5rem, 5vw, 3.5rem);
	min-inline-size: 0;
}

.faqLijst__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: 0.9rem 1.2rem;
	border-radius: 16px;
	background-color: var(--kleurMist);
	color: var(--kleurTekst);
	font-size: 0.9375rem;
	font-weight: 600;
}

.faqLijst__status[hidden] {
	display: none;
}

.faqLijst__wissen {
	color: var(--kleurPrimair);
	font-size: var(--vloeiendKlein);
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

/* Een onderwerp. */
.faqSectie {
	scroll-margin-block-start: var(--faqPlakt);
}

.faqSectie[hidden] {
	display: none;
}

.faqSectie__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 0.9rem;
	margin-block-end: 1.1rem;
}

.faqSectie__icoon {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 14px;
	background-color: var(--kleurNacht2);
	color: var(--kleurDageraad);
}

.faqSectie__titel {
	font-size: var(--vloeiendMidden);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.faqSectie__aantal {
	padding: 0.2rem 0.6rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurMist);
	color: var(--kleurSecundair);
	font-size: 0.75rem;
	font-weight: 700;
}

.faqSectie__los {
	margin-inline-start: auto;
	color: var(--kleurPrimair);
	font-size: var(--vloeiendKlein);
	font-weight: 600;
}

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

/*
 * Een vraag: een wit vak met een nummer, de vraag en een plus die een min
 * wordt. Open wordt het vak een tikje nacht aan de linkerkant — zo zie je bij
 * drie open vragen onder elkaar waar de ene ophoudt en de volgende begint.
 */
.faqVraag {
	border: 1px solid var(--kleurLijn);
	border-radius: 18px;
	background-color: var(--kleurWit);
	scroll-margin-block-start: var(--faqPlakt);
	transition:
		border-color var(--duurMiddel) var(--soepel),
		box-shadow var(--duurMiddel) var(--soepel);
}

.faqVraag[hidden] {
	display: none;
}

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

.faqVraag[open] {
	border-color: rgb(83 70 128 / 30%);
	box-shadow:
		inset 3px 0 0 var(--kleurPrimair),
		0 14px 34px rgb(16 5 77 / 8%);
}

.faqVraag__kop {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) 2.25rem;
	align-items: center;
	gap: 0.85rem;
	padding: 1.05rem 1.1rem 1.05rem 1.25rem;
	border-radius: 18px;
	cursor: pointer;
	list-style: none;
}

/* Safari tekent het driehoekje nog met dit pseudo-element en niet met
   list-style. Een waarschuwing in de CSS-validator, geen fout — net als de
   pijltjes van het getalveld in single-product.css. */
.faqVraag__kop::-webkit-details-marker {
	display: none;
}

.faqVraag__kop:focus-visible {
	outline: 2px solid var(--kleurPrimair);
	outline-offset: 2px;
}

.faqVraag__nummer {
	color: var(--faqOchtendDiep);
	font-size: 0.8125rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
}

.faqVraag__titel {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
}

.faqVraag__titel mark {
	padding-inline: 0.1em;
	border-radius: 3px;
	background-color: rgb(255 188 125 / 45%);
	color: inherit;
}

.faqVraag__teken {
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	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);
}

.faqVraag__plus {
	inline-size: 1.1rem;
	block-size: 1.1rem;
}

.faqVraag:hover .faqVraag__teken {
	background-color: rgb(83 70 128 / 14%);
}

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

.faqVraag__antwoord {
	display: grid;
	gap: 1rem;
	padding: 0 1.25rem 1.35rem calc(1.25rem + 2rem + 0.85rem);
}

.faqVraag__kort {
	max-inline-size: 62ch;
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLopend);
	line-height: 1.65;
}

.faqVraag__verder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.25rem;
}

.faqVraag__lees {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--kleurPrimair);
	font-size: 0.9375rem;
	font-weight: 700;
}

.faqVraag__pijl {
	inline-size: 1rem;
	block-size: 1rem;
	transition: transform var(--duurMiddel) var(--soepel);
}

.faqVraag__lees:hover .faqVraag__pijl {
	transform: translateX(4px);
}

.faqVraag__knop {
	display: inline-flex;
	padding: 0.45rem 0.95rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
	font-size: var(--vloeiendKlein);
	font-weight: 700;
	transition:
		background-color var(--duurKort) var(--soepel),
		color var(--duurKort) var(--soepel);
}

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

/* ==========================================================================
   6. Niets gevonden
   ========================================================================== */

.faqLeeg {
	display: grid;
	justify-items: center;
	gap: 0.6rem;
	padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
	border: 1px dashed rgb(83 70 128 / 28%);
	border-radius: 22px;
	text-align: center;
}

.faqLeeg[hidden] {
	display: none;
}

.faqLeeg__icoon {
	inline-size: 2.75rem;
	block-size: 2.75rem;
	color: var(--kleurLila);
}

.faqLeeg__titel {
	font-size: var(--vloeiendMidden);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.faqLeeg__tekst {
	max-inline-size: 34rem;
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLopend);
	line-height: 1.6;
}

/* ==========================================================================
   7. Smallere schermen
   ========================================================================== */

@media (max-width: 1024px) {
	.faqKop__inhoud {
		grid-template-columns: minmax(0, 1fr) minmax(0, 9rem);
		align-items: start;
	}

	.faqKop__maan {
		margin-block-start: 3.5rem;
	}

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

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

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

	/* Het teken komt klein rechtsboven, naast het kruimelpad: in het midden
	   van een telefoon zou het het zoekveld onder de vouw duwen. */
	.faqKop__maan {
		position: absolute;
		inset-block-start: 1.5rem;
		inset-inline-end: 1rem;
		inline-size: 3.75rem;
		margin: 0;
		opacity: 0.85;
	}

	.faqKop__titel,
	.faqKop .esseoBreadcrumbs {
		padding-inline-end: 4.5rem;
	}

	.faqZoek__veldje {
		padding-inline-start: 1rem;
	}

	.faqZoek__knop {
		padding-inline: 1rem;
	}

	.faqOnderwerpen__lijst {
		gap: 0.6rem;
	}

	.faqOnderwerp {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.7rem;
		padding: 1rem;
		border-radius: 18px;
	}

	.faqOnderwerp__icoon {
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border-radius: 13px;
	}

	.faqOnderwerp__naam {
		font-size: 0.9375rem;
	}

	.faqOnderwerp__pijl {
		display: none;
	}

	.faqSectie__los {
		inline-size: 100%;
		margin-inline-start: 0;
	}

	.faqVraag__kop {
		grid-template-columns: minmax(0, 1fr) 2rem;
		gap: 0.75rem;
		padding: 0.95rem 0.9rem 0.95rem 1rem;
	}

	.faqVraag__nummer {
		display: none;
	}

	.faqVraag__titel {
		font-size: 1rem;
	}

	.faqVraag__teken {
		inline-size: 2rem;
		block-size: 2rem;
	}

	.faqVraag__antwoord {
		padding: 0 1rem 1.15rem;
	}
}