/*
	Juncta - hoofdstijl.
	Uitgangspunten: grote foto's van mensen, vette koppen, veel lucht,
	forse klikvlakken en tekst die ook zonder bril te lezen is.

	Nunito Sans wordt lokaal geserveerd vanuit inc/FONTS, niet via Google.
	Het is de variabele versie, dus twee bestanden dekken 400 tot 800.
*/

@font-face {
	font-family: "Nunito Sans";
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 100%;
	font-display: swap;
	src: url("/inc/FONTS/nunito-sans-latin.woff2") format("woff2");
	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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Nunito Sans";
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 100%;
	font-display: swap;
	src: url("/inc/FONTS/nunito-sans-latin-ext.woff2") format("woff2");
	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: "Quando";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/inc/FONTS/quando-latin.woff2") format("woff2");
	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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Quando";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/inc/FONTS/quando-latin-ext.woff2") format("woff2");
	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;
}

:root {
	--kop-letter: "Quando", Georgia, "Times New Roman", serif;
	--groen: #12796c;
	--groen-licht: #22a08c;
	--groen-diep: #0b5a51;
	--mint: #eaf5f2;
	--mint-diep: #d6ebe5;
	--oranje: #ef6f4a;
	--oranje-licht: #f6a072;
	--oranje-diep: #d95a35;
	--oranje-tekst: #c0502c;
	--room: #fcfaf7;
	--room-diep: #f3ede5;
	--inkt: #14201e;
	--grijs: #5d6a67;
	--lijn: #e7e0d6;
	--wit: #ffffff;
	--goed: #1d6f4f;
	--fout: #b0342a;
	--letop: #8a5a12;

	/*
		Het merkverloop. Overal waar Juncta zelf spreekt, spreekt dit verloop:
		knoppen, brede banen, de logo-accenten. Dat geeft samenhang zonder
		dat er een vlak dichtgesmeerd hoeft te worden met een enkele kleur.
	*/
	--verloop: linear-gradient(135deg, #0b5a51 0%, #12796c 42%, #24a892 100%);
	--verloop-warm: linear-gradient(135deg, #ef6f4a 0%, #f6a072 100%);
	--verloop-zacht: linear-gradient(180deg, #ffffff 0%, #eaf5f2 100%);

	--rond: 22px;
	--rond-klein: 12px;
	--schaduw: 0 2px 4px rgba(11, 90, 81, 0.04), 0 12px 32px rgba(11, 90, 81, 0.07);
	--schaduw-hoog: 0 4px 8px rgba(11, 90, 81, 0.06), 0 22px 48px rgba(11, 90, 81, 0.12);
	--breedte: 1180px;
	--basis: 17px;
}

html {
	font-size: var(--basis);
	scroll-behavior: smooth;
	/*
		Ruimte voor de schuifbalk blijft altijd gereserveerd. Anders springt
		de hele pagina opzij zodra het scrollen wordt geblokkeerd, bijvoorbeeld
		als het zijpaneel opengaat.
	*/
	scrollbar-gutter: stable;
}

* {
	box-sizing: border-box;
}

button, input, select, textarea {
	font-family: inherit;
}

body {
	margin: 0;
	background: var(--room);
	color: var(--inkt);
	font-family: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--groen);
	text-underline-offset: 3px;
}

a:hover {
	color: var(--oranje);
}

/*
	Koppen staan in Quando. Die letter bestaat alleen in gewoon gewicht,
	dus geen 800 erop zetten: de browser maakt er dan een nagemaakte vetjes
	van die er rommelig uitziet. De kracht komt hier uit de grootte en de
	rustige regelafstand.
*/
h1, h2, h3, h4 {
	font-family: var(--kop-letter);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -0.005em;
	margin: 0 0 0.5em;
}

h1 {
	font-size: clamp(2rem, 4.6vw, 3.1rem);
}

h2 {
	font-size: clamp(1.5rem, 2.9vw, 2.1rem);
}

h3 {
	font-size: 1.2rem;
}

p {
	margin: 0 0 1em;
}

.verborgen-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.overslaan {
	position: absolute;
	left: -9999px;
	background: var(--groen);
	color: var(--wit);
	padding: 1rem;
	z-index: 100;
}

.overslaan:focus {
	left: 1rem;
	top: 1rem;
}

:focus-visible {
	outline: 3px solid var(--oranje);
	outline-offset: 3px;
}

/* Kop */

.kop {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(252, 250, 246, 0.94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--lijn);
}

.kop-binnen {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	max-width: var(--breedte);
	margin: 0 auto;
	padding: 0.7rem 1.2rem;
}

.logo {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--kop-letter);
	font-size: 1.45rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-decoration: none;
	color: var(--groen);
	flex: 0 0 auto;
}

/*
	Het menu mag krimpen, maar de woorden erin niet afbreken. Zonder
	min-width raakt een flexvak niet kleiner dan zijn inhoud en duwt hij de
	knoppen rechts van de balk af.
*/
.menu {
	flex: 1 1 auto;
	min-width: 0;
}

.menu ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.2rem 0.3rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0.6rem 0.75rem;
	border-radius: var(--rond-klein);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.menu a:hover, .menu a.actief {
	background: var(--mint);
}

.kop-acties {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 0 0 auto;
}

.kop-ik {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	text-decoration: none;
	padding: 0.3rem 0.7rem 0.3rem 0.3rem;
	border-radius: 999px;
}

.kop-ik:hover {
	background: var(--mint);
}

/*
	Ongelezen berichten als bolletje op je eigen foto. De losse link naar de
	berichten is uit de balk gehaald, maar het seintje mag niet verdwijnen.
*/
.kop-teller {
	position: absolute;
	top: 0;
	left: 1.7rem;
	min-width: 1.35rem;
	padding: 0.05rem 0.3rem;
	border-radius: 999px;
	background: var(--oranje);
	color: var(--wit);
	font-size: 0.7rem;
	font-weight: 800;
	line-height: 1.5;
	text-align: center;
	border: 2px solid var(--room);
}

.kop-ik img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

.kop-uit {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--grijs);
	text-decoration: none;
	padding: 0.5rem 0.7rem;
	border-radius: var(--rond-klein);
	white-space: nowrap;
}

.kop-uit:hover {
	background: var(--mint);
	color: var(--groen-diep);
}

.kop-berichten {
	position: relative;
	font-weight: 700;
	text-decoration: none;
	padding: 0.5rem 0.4rem;
}

.teller {
	display: inline-block;
	min-width: 1.5em;
	margin-left: 0.3em;
	padding: 0.1em 0.35em;
	border-radius: 999px;
	background: var(--oranje);
	color: var(--wit);
	font-size: 0.75rem;
	text-align: center;
}

.menu-knop {
	display: none;
	align-items: center;
	gap: 0.55rem;
	margin-left: auto;
	border: 2px solid var(--groen);
	background: transparent;
	color: var(--groen);
	font-weight: 800;
	border-radius: 999px;
	padding: 0.5rem 1rem;
	cursor: pointer;
}

/* Drie streepjes, getekend met randen en een verloop in de tekstkleur. */
.menu-knop::before {
	content: "";
	width: 18px;
	height: 14px;
	border-top: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	background: linear-gradient(currentColor, currentColor) center / 100% 2.5px no-repeat;
}

/* Knoppen */

/*
	Inline-flex met de inhoud in het midden. Staan er knoppen van
	verschillende hoogte naast elkaar in een flexrij, dan worden de kleine
	uitgerekt tot de hoogte van de grootste; met inline-block blijft het
	woord dan bovenin hangen in plaats van in het midden te staan.
*/
.knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
	background: var(--verloop);
	background-size: 160% 160%;
	background-position: 0% 50%;
	color: var(--wit);
	font-weight: 800;
	text-decoration: none;
	padding: 0.8rem 1.6rem;
	border: 2px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	font-size: 1rem;
	letter-spacing: -0.01em;
	box-shadow: 0 6px 18px rgba(11, 90, 81, 0.22);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-position 0.4s ease;
}

.knop:hover {
	color: var(--wit);
	background-position: 100% 50%;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(11, 90, 81, 0.28);
}

/*
	Een knop die nog niet mag. Grijs en zonder schaduw, zodat je ziet dat er
	eerst iets anders moet gebeuren. Hij blijft wel leesbaar: dichtdraaien tot
	hij bijna verdwijnt maakt onduidelijk wat er te doen valt.
*/
.knop:disabled, .knop[disabled] {
	background: var(--lijn);
	color: var(--grijs);
	box-shadow: none;
	cursor: not-allowed;
}

.knop:disabled:hover, .knop[disabled]:hover {
	color: var(--grijs);
	transform: none;
	box-shadow: none;
	background-position: 0% 50%;
}

.knop-groot {
	padding: 1rem 2rem;
	font-size: 1.12rem;
}

.knop-licht {
	background: transparent;
	color: var(--groen);
	border-color: var(--mint-diep);
	box-shadow: none;
}

.knop-licht:hover {
	background: var(--mint);
	color: var(--groen-diep);
	border-color: var(--groen-licht);
	box-shadow: none;
}

.knop-oranje {
	background: var(--verloop-warm);
	background-size: 160% 160%;
	box-shadow: 0 6px 18px rgba(217, 90, 53, 0.28);
}

.knop-oranje:hover {
	box-shadow: 0 10px 26px rgba(217, 90, 53, 0.34);
}

.knop-wit {
	background: var(--wit);
	color: var(--groen-diep);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.knop-wit:hover {
	background: var(--wit);
	color: var(--groen-diep);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.knop-klein {
	padding: 0.45rem 0.9rem;
	font-size: 0.88rem;
}

/* Opbouw */

/*
	Alleen links en rechts, nooit de verticale ruimte overschrijven.
	Anders verliest een <section class="binnen"> de padding van section
	en plakt de laatste knop tegen het volgende blok aan.
*/
.binnen {
	max-width: var(--breedte);
	margin: 0 auto;
	padding-left: 1.2rem;
	padding-right: 1.2rem;
}

section.binnen {
	padding-top: 4.5rem;
	padding-bottom: 4.5rem;
}

/* Een losse knop of alinea onderaan een blok heeft altijd lucht nodig. */
section > .knop, section > p:last-child, .binnen > .knop {
	margin-top: 2rem;
}

.smal {
	max-width: 720px;
	margin: 0 auto;
	padding: 3rem 1.2rem;
}

section {
	padding: 3.5rem 0;
}

.melding {
	max-width: 720px;
	margin: 1.2rem auto 2.2rem;
	padding: 1rem 1.2rem;
	border-radius: var(--rond-klein);
	font-weight: 700;
	border-left: 6px solid var(--goed);
	background: #e8f4ee;
	color: #12402d;
}

.melding-fout {
	border-left-color: var(--fout);
	background: #fbe9e7;
	color: #6d1c15;
}

.melding-let-op {
	border-left-color: var(--letop);
	background: #fdf2dd;
	color: #5b3c07;
}

/* Held: beeldvullende foto */

.held {
	position: relative;
	min-height: min(88vh, 780px);
	display: flex;
	align-items: flex-end;
	color: var(--wit);
	background: var(--groen-diep);
	overflow: hidden;
}

.held img.achtergrond {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

/*
	Twee lagen over de foto: een kleurlaag die het beeld naar het merk toe
	trekt, en daarboven een donkerteverloop dat alleen onderin knijpt zodat
	de tekst leesbaar is en de foto bovenin vrij blijft.
*/
.held::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(9, 46, 42, 0) 0%, rgba(9, 46, 42, 0.28) 48%, rgba(7, 40, 36, 0.86) 100%),
		linear-gradient(115deg, rgba(11, 90, 81, 0.42) 0%, rgba(11, 90, 81, 0) 45%, rgba(239, 111, 74, 0.18) 100%);
}

.held-tekst {
	position: relative;
	z-index: 2;
	max-width: var(--breedte);
	margin: 0 auto;
	padding: 3rem 1.2rem 4rem;
	width: 100%;
}

.held h1 {
	font-size: clamp(2.2rem, 5.6vw, 4rem);
	max-width: 16em;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.held .onderkop {
	font-size: clamp(1.05rem, 1.8vw, 1.3rem);
	font-weight: 600;
	max-width: 32em;
	margin-bottom: 1.8rem;
}

.held-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.held-cijfers {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin-top: 2.5rem;
	font-weight: 800;
}

.held-cijfers strong {
	display: block;
	font-size: 2rem;
	line-height: 1;
}

.held-cijfers span {
	font-weight: 600;
	opacity: 0.85;
}

/* Bandjes met foto en tekst */

.band {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 0;
}

.band .beeld {
	min-height: 460px;
	position: relative;
}

.band .beeld img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.band .woord {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4rem clamp(1.5rem, 5vw, 4.5rem);
}

.band .woord p {
	font-size: 1.12rem;
	max-width: 34em;
}

.band-groen {
	background: var(--verloop);
	color: var(--wit);
}

.band-groen a:not(.knop) {
	color: #ffd9c9;
}

.band-om .beeld {
	order: 2;
}

.opening {
	font-size: 1.3rem;
	font-weight: 700;
	max-width: 30em;
}

.kop-klein {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--oranje-tekst);
	margin-bottom: 0.9rem;
}

.kop-klein::before {
	content: "";
	width: 2.2rem;
	height: 3px;
	border-radius: 3px;
	background: var(--verloop-warm);
	flex: 0 0 auto;
}

.band-groen .kop-klein, .held .kop-klein {
	color: #ffc4ad;
}

/* Rasters */

.raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

.raster-2 {
	grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}

.kaart {
	background: var(--wit);
	border: 1px solid rgba(11, 90, 81, 0.07);
	border-radius: var(--rond);
	overflow: hidden;
	box-shadow: var(--schaduw);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.kaart:hover {
	transform: translateY(-4px);
	box-shadow: var(--schaduw-hoog);
	color: inherit;
}

.kaart .beeld {
	aspect-ratio: 3 / 2;
	position: relative;
	background: var(--room-diep);
}

.kaart .beeld img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kaart .tekst {
	padding: 1.3rem 1.4rem 1.5rem;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/*
	Het onderwerplabel is een flex-item in .tekst. Zonder deze regel rekt
	het over de volle breedte en plakt de kop er direct tegenaan.
*/
.kaart .tekst .label {
	align-self: flex-start;
	margin-bottom: 1rem;
}

.kaart h3 {
	font-size: 1.35rem;
	margin-bottom: 0.5rem;
}

.kaart .meta {
	margin-top: auto;
	padding-top: 0.8rem;
	color: var(--grijs);
	font-size: 0.88rem;
	font-weight: 700;
}

/* Categoriekaart met beeldvullende foto */

.cat-kaart {
	position: relative;
	min-height: 300px;
	display: flex;
	align-items: flex-end;
	border-radius: var(--rond);
	overflow: hidden;
	color: var(--wit);
	text-decoration: none;
	background: var(--groen);
}

.cat-kaart img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.cat-kaart:hover img {
	transform: scale(1.05);
}

.cat-kaart::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(9, 46, 42, 0) 28%, rgba(7, 40, 36, 0.88) 100%),
		linear-gradient(140deg, rgba(11, 90, 81, 0.34) 0%, rgba(11, 90, 81, 0) 55%);
}

.cat-kaart .tekst {
	position: relative;
	z-index: 2;
	padding: 1.5rem;
	color: var(--wit);
}

.cat-kaart h3 {
	font-size: 1.6rem;
	margin-bottom: 0.2rem;
}

.cat-kaart p {
	margin: 0;
	font-weight: 600;
	opacity: 0.9;
}

/* Mensen */

.mens {
	position: relative;
	border-radius: var(--rond);
	overflow: hidden;
	background: var(--wit);
	border: 1px solid rgba(11, 90, 81, 0.07);
	box-shadow: var(--schaduw);
	text-decoration: none;
	color: inherit;
	display: block;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mens:hover {
	transform: translateY(-4px);
	box-shadow: var(--schaduw-hoog);
	color: inherit;
}

.mens .beeld {
	aspect-ratio: 4 / 5;
	position: relative;
	background: var(--room-diep);
}

.mens .beeld img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mens .tekst {
	padding: 1rem 1.2rem 1.3rem;
}

.mens h3 {
	margin-bottom: 0.1rem;
	font-size: 1.2rem;
}

.mens .plaats {
	color: var(--grijs);
	font-weight: 700;
	font-size: 0.9rem;
	margin: 0;
}

.vlag {
	position: absolute;
	top: 0.8rem;
	left: 0.8rem;
	z-index: 3;
	background: var(--oranje);
	color: var(--wit);
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
}

.vlag-groen {
	background: var(--goed);
}

.hartje {
	display: inline-block;
	color: var(--oranje);
	font-size: 0.85em;
	vertical-align: 0.08em;
	margin-left: 0.15em;
	cursor: help;
}

.held .hartje, .profielkop .hartje {
	color: #ffb08c;
}

.stip {
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background: var(--goed);
	margin-right: 0.35em;
}

/*
	Eigen uitlegballonnetje. De standaardtekst van de browser verschijnt pas
	na een seconde, is niet te vormgeven en doet het niet op een telefoon.
	Dit balonnetje hoort bij de site en verschijnt meteen.

	Gebruik: data-tip="korte uitleg" op het element. Zet het niet op iets dat
	zelf al een ::before of ::after gebruikt.
*/
/*
	Het ballonnetje is een los element aan het einde van de pagina, geen
	pseudo-element op de knop zelf. Alleen zo kan de JavaScript meten hoe
	groot het is en het binnen het scherm houden: boven het element als daar
	plek is, anders eronder, en nooit voorbij de linker- of rechterrand.
*/
.tip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 300;
	max-width: min(18rem, calc(100vw - 2rem));
	padding: 0.5rem 0.75rem;
	border-radius: 10px;
	background: var(--groen-diep);
	color: var(--wit);
	font-family: "Nunito Sans", sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	box-shadow: 0 8px 22px rgba(11, 90, 81, 0.28);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s;
	pointer-events: none;
}

.tip.open {
	opacity: 1;
	visibility: visible;
}

/* Het pijltje wijst naar het midden van het element waar de tekst bij hoort. */
.tip::after {
	content: "";
	position: absolute;
	left: var(--pijl, 50%);
	margin-left: -6px;
	border: 6px solid transparent;
}

.tip.boven::after {
	top: 100%;
	border-top-color: var(--groen-diep);
}

.tip.onder::after {
	bottom: 100%;
	border-bottom-color: var(--groen-diep);
}

/*
	Op een aanraakscherm bestaat zweven niet, dus daar heeft een ballonnetje
	geen zin. De keurmerken tonen daar hun tekst gewoon naast het icoon.
*/
@media (hover: none) {

	.voet .voet-keur li {
		width: auto;
		height: auto;
		gap: 0.45rem;
		padding: 0.4rem 0.85rem;
		border-radius: 999px;
		font-size: 0.72rem;
		font-weight: 700;
		color: var(--groen-diep);
	}

	.voet-keur .verborgen-label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}

}

/* Labels */

.labels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
}

.labels li, .label {
	background: var(--mint);
	border-radius: 999px;
	padding: 0.3rem 0.8rem;
	font-size: 0.85rem;
	font-weight: 700;
}

/*
	Verhalen die nog op hun eerste reactie wachten. Bewust opvallend: dit is
	de plek waar een bezoeker met weinig moeite het meeste doet.
*/
.wacht-blok {
	background: var(--mint);
	border-top: 1px solid var(--mint-diep);
	border-bottom: 1px solid var(--mint-diep);
}

.wacht-getal {
	background: var(--verloop-warm);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.wacht-vlag {
	color: var(--oranje-tekst);
	font-size: 0.78rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.wacht-vlag strong {
	color: var(--oranje-tekst);
}

/* Forum */

.draden {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.draad-regel {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
	background: var(--wit);
	border-radius: var(--rond);
	padding: 1.2rem 1.4rem;
	box-shadow: var(--schaduw);
	text-decoration: none;
	color: inherit;
}

.draad-regel:hover {
	color: inherit;
	transform: translateY(-2px);
}

.draad-regel img.avatar {
	width: 58px;
	height: 58px;
	min-width: 58px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.draad-regel h3 {
	margin-bottom: 0.2rem;
	font-size: 1.3rem;
}

.draad-regel .meta {
	color: var(--grijs);
	font-weight: 700;
	font-size: 0.88rem;
}

.draad-regel .aantal {
	margin-left: auto;
	text-align: center;
	flex: 0 0 auto;
	font-weight: 800;
	color: var(--groen);
}

.draad-regel .aantal strong {
	display: block;
	font-size: 1.6rem;
	line-height: 1;
}

.bericht {
	display: flex;
	gap: 1.2rem;
	background: var(--wit);
	border-radius: var(--rond);
	padding: 1.5rem;
	box-shadow: var(--schaduw);
	margin-bottom: 1.2rem;
}

/*
	De avatar zit soms in een link naar het profiel. Die link is dan het
	flex-item, en zonder deze regel wordt hij samengeknepen en rekt de
	foto tot een ovaal. Daarom staat de maat vast op de link en op de
	foto zelf.
*/
.bericht > a, .draad-regel > a, .gesprek-lijst a > img {
	flex: 0 0 auto;
}

.bericht img.avatar, .bericht > a img.avatar {
	width: 64px;
	height: 64px;
	min-width: 64px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.bericht .body {
	flex: 1 1 auto;
	min-width: 0;
}

.bericht .body p {
	overflow-wrap: anywhere;
	margin-bottom: 0.85em;
}

.bericht .body p:last-of-type {
	margin-bottom: 0;
}

.bericht .wie {
	font-weight: 800;
	text-decoration: none;
	font-size: 1.05rem;
}

/* Naam en tijd links, de doorverwijzing naar het profiel rechtsboven. */
/*
	De knop naar het profiel is hoger dan de naam ernaast, dus deze regel
	heeft meer lucht eronder nodig dan een gewone naamregel. Anders begint
	het verhaal er direct tegenaan.
*/
.bericht-boven {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem 1rem;
	margin-bottom: 1.1rem;
}

.meer-van {
	margin-left: auto;
	flex: 0 0 auto;
	border: 2px solid var(--mint-diep);
	border-radius: 999px;
	padding: 0.3rem 0.85rem;
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--groen);
	text-decoration: none;
	white-space: nowrap;
}

.meer-van:hover {
	background: var(--mint);
	border-color: var(--groen-licht);
	color: var(--groen-diep);
}

.bericht .wanneer {
	color: var(--grijs);
	font-weight: 700;
	font-size: 0.85rem;
}

.bericht-acties {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	margin-top: 0.6rem;
	flex-wrap: wrap;
}

.steun {
	border: 2px solid var(--lijn);
	background: transparent;
	border-radius: 999px;
	padding: 0.35rem 0.9rem;
	font-weight: 800;
	cursor: pointer;
	color: var(--groen);
	font-size: 0.88rem;
}

.steun.aan {
	background: var(--oranje);
	border-color: var(--oranje);
	color: var(--wit);
}

/*
	Het aantal als telbolletje, zoals bij een app-icoon. Een los getal achter
	het woord leest als onderdeel van de tekst; in een bolletje zie je meteen
	dat het een aantal is.
*/
.steun-teller {
	display: inline-block;
	min-width: 1.6em;
	margin-left: 0.45rem;
	padding: 0.1em 0.4em;
	border-radius: 999px;
	background: var(--mint-diep);
	color: var(--groen-diep);
	font-size: 0.78em;
	font-weight: 800;
	line-height: 1.5;
	text-align: center;
	vertical-align: 0.06em;
}

.steun.aan .steun-teller {
	background: var(--wit);
	color: var(--oranje-diep);
}

/* Nul steuntjes tonen we niet: een leeg bolletje zegt niets. */
.steun-teller.leeg {
	display: none;
}

.klein-link {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--grijs);
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.klein-link:hover {
	color: var(--groen);
}

/*
	Elke laag reacties springt een stukje in, met een lijn ervoor. De eerste
	laag hoort bij het verhaal, de laag daaronder bij de reactie erboven, en
	zo door. Dezelfde sprong op elk niveau, want dan lees je de structuur af
	aan het aantal lijnen links van je.
*/
.reactie-tak {
	position: relative;
	margin-left: 0.6rem;
}

/*
	Het stukje lijn tussen een reactie en de antwoorden eronder. Dat gat is
	de ruimte onder het bericht; zonder dit begint de lijn van de antwoorden
	los in de lucht.
*/
.reactie-tak::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1.2rem;
	width: 2px;
	height: 1.2rem;
	background: var(--lijn);
}

.reactie-tak-wortel {
	margin-top: 0.4rem;
}

.reactie-tak-wortel::before {
	display: none;
}

/*
	De verticale lijn hoort bij de reactie zelf en niet bij de tak eromheen.
	Daardoor kan hij bij de laatste reactie precies bij het bolletje stoppen,
	terwijl hij bij alle andere gewoon doorloopt naar de volgende.

	--mid is de hoogte van het midden van de profielfoto, gerekend vanaf de
	bovenkant van het bericht: de padding plus de helft van de foto. Het
	streepje en het bolletje hangen daaraan, dus ze staan altijd op ooghoogte
	van degene die reageerde.
*/
/*
	flow-root houdt de ondermarge van het bericht binnen de reactie. Zonder
	dat valt die ruimte erbuiten, wordt de reactie korter dan wat je ziet en
	zit er een gaatje in de lijn tussen twee reacties in.
*/
.reactie {
	position: relative;
	display: flow-root;
	padding-left: 1.5rem;
	--mid: calc(1.5rem + 32px);
	background: linear-gradient(var(--lijn), var(--lijn)) 0 0 / 2px 100% no-repeat;
}

.reactie-antwoord {
	--mid: calc(1.1rem + 24px);
}

/* De laatste reactie zonder eigen antwoorden knipt de lijn af bij het bolletje. */
.reactie:last-child:not(:has(.reactie-tak)) {
	background-size: 2px var(--mid);
}

.reactie::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--mid) - 1px);
	width: 1.5rem;
	height: 2px;
	background: var(--lijn);
}

.reactie::after {
	content: "";
	position: absolute;
	left: -6px;
	top: calc(var(--mid) - 7px);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wit);
	border: 2px solid var(--lijn);
}

.reactie-antwoord > .bericht {
	padding: 1.1rem 1.2rem;
}

.reactie-antwoord > .bericht img.avatar,
.reactie-antwoord > .bericht > a img.avatar {
	width: 48px;
	height: 48px;
	min-width: 48px;
}

.antwoord-formulier {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--mint-diep);
}

.antwoord-formulier textarea {
	min-height: 110px;
}

.antwoord-knoppen {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 0.8rem;
}

/* Formulieren */

.formulier {
	display: grid;
	gap: 0.4rem;
}

.formulier label {
	font-weight: 800;
	margin-top: 0.9rem;
}

/*
	Navigatie binnen de eigen omgeving. Altijd op dezelfde plek, altijd in
	dezelfde volgorde, met de pagina waar je bent duidelijk aangezet. Wie
	verdwaalt in een afgeschermd deel komt niet meer terug.
*/
.subnav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 2rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--mint-diep);
}

.subnav a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 1rem;
	border-radius: 999px;
	font-weight: 800;
	font-size: 0.92rem;
	text-decoration: none;
	color: var(--groen-diep);
	background: var(--mint);
}

.subnav a:hover {
	background: var(--mint-diep);
	color: var(--groen-diep);
}

.subnav a.nu {
	background: var(--verloop);
	color: var(--wit);
	box-shadow: 0 4px 12px rgba(11, 90, 81, 0.2);
}

.subnav a.nu .teller {
	background: var(--wit);
	color: var(--oranje-diep);
}

/*
	Alle pagina's van de eigen omgeving zijn even breed, zodat de titel en de
	navigatie overal op dezelfde plek staan. De inhoud eronder blijft wel
	smal: een formulier van elf centimeter breed leest niet.
*/
.mijn-pagina {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

.mijn-inhoud {
	max-width: 720px;
}

/*
	Elk onderwerp in de eigen omgeving staat in zo'n blok. Zonder die
	omkadering lopen vijf kopjes met tekst eronder in elkaar over en lijkt
	het een lange lap; met een kaart eromheen zie je in een oogopslag waar
	het ene onderwerp ophoudt en het volgende begint.

	De ruimte zit in het blok zelf, niet in de losse elementen erbinnen.
	Daarom worden hier alle boven- en ondermarges van het eerste en laatste
	kind weggehaald: anders telt de marge van een kop op bij de padding van
	de kaart en staat elk blok net even anders.
*/
.mijn-blok {
	background: var(--wit);
	border: 1px solid rgba(11, 90, 81, 0.07);
	border-radius: var(--rond);
	padding: 1.6rem;
	box-shadow: var(--schaduw);
	margin: 0 0 1.2rem;
}

.mijn-blok h2 {
	font-size: 1.35rem;
	margin: 0 0 0.7rem;
}

.mijn-blok > *:last-child {
	margin-bottom: 0;
}

.mijn-blok .formulier {
	margin-top: 1rem;
}

/* In een blok is de knop het einde; de kaart zorgt zelf voor de ruimte eronder. */
.mijn-blok .formulier button {
	margin-top: 1.2rem;
	margin-bottom: 0;
}

.mijn-blok .formulier > label:first-of-type, .mijn-blok.formulier > label:first-of-type {
	margin-top: 0;
}

/*
	Een formulier dat over meerdere blokken loopt, zoals het profiel: de
	knop staat dan buiten de blokken en heeft zijn eigen lucht nodig.
*/
.mijn-inhoud > form > button {
	margin: 0.4rem 0 0;
}

.na-knop {
	margin-top: 1.2rem;
}

/*
	Alles in de eigen omgeving houdt dezelfde tussenruimte aan: 1,2rem
	tussen twee blokken. Onderdelen die elders een andere marge hebben
	worden hier op diezelfde maat gezet, anders oogt het rommelig.
*/
.mijn-pagina .tegels {
	margin-bottom: 1.2rem;
}

.mijn-pagina .profiel-inhoud {
	padding: 0;
	gap: 1.2rem;
	align-items: start;
}

.mijn-pagina .zijblok {
	margin-bottom: 1.2rem;
}

.mijn-blok .hint:last-child, .mijn-blok .melding:last-child {
	margin-bottom: 0;
}

/* Een blok dat een waarschuwing is, herken je aan de rand. */
.mijn-blok-let-op {
	border-color: var(--lijn);
}

.mijn-blok-let-op h2 {
	color: var(--grijs);
}

/* Uitloggen staat los aan het eind, want het hoort niet bij de rest. */
.subnav .subnav-uit {
	margin-left: auto;
	background: transparent;
	color: var(--grijs);
	border: 2px solid var(--lijn);
}

.subnav .subnav-uit:hover {
	background: var(--room-diep);
	color: var(--inkt);
}

.terug-link {
	display: inline-block;
	margin-bottom: 0.5rem;
	font-weight: 700;
	text-decoration: none;
}

.terug-link::before {
	content: "\2190";
	margin-right: 0.4rem;
}

/*
	Profielfoto kiezen of ergens naartoe slepen. Het echte bestandsveld van
	de browser is niet vorm te geven, dus dat wordt verstopt en dit vlak
	neemt het werk over.
*/
.fotokiezer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
	margin: 0.6rem 0 0.4rem;
	padding: 1.2rem;
	border: 2px dashed var(--mint-diep);
	border-radius: var(--rond);
	background: var(--wit);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.fotokiezer:hover, .fotokiezer.klaar {
	border-color: var(--groen-licht);
	background: var(--mint);
}

.fotokiezer.sleep {
	border-color: var(--oranje);
	border-style: solid;
	background: #fdf1ec;
}

.fotokiezer img {
	width: 88px;
	height: 88px;
	min-width: 88px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--room-diep);
}

.fotokiezer-tekst {
	flex: 1 1 12rem;
}

.fotokiezer-tekst strong {
	display: block;
	font-size: 1.05rem;
	color: var(--groen-diep);
}

.fotokiezer-tekst span {
	display: block;
	color: var(--grijs);
	font-size: 0.88rem;
	font-weight: 600;
	margin-top: 0.2rem;
}

.fotokiezer input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.fotokiezer .knop {
	flex: 0 0 auto;
	pointer-events: none;
}

/* Wachtwoord tonen of verbergen. */
.wachtwoordveld {
	position: relative;
	display: block;
}

.wachtwoordveld input {
	padding-right: 6rem;
}

.wachtwoord-oog {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	transform: translateY(-50%);
	border: none;
	background: var(--mint);
	color: var(--groen-diep);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 800;
	cursor: pointer;
}

.wachtwoord-oog:hover {
	background: var(--mint-diep);
}

/* Foutmelding onder het veld waar hij over gaat. */
.veldfout {
	margin: 0.35rem 0 0;
	color: var(--fout);
	font-size: 0.88rem;
	font-weight: 700;
}

input.fout, textarea.fout, select.fout {
	border-color: var(--fout);
	background: #fdf4f3;
}

.formulier .hint {
	color: var(--grijs);
	font-size: 0.88rem;
	font-weight: 600;
	margin: 0;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], select, textarea {
	width: 100%;
	font: inherit;
	padding: 0.85rem 1rem;
	border: 2px solid var(--lijn);
	border-radius: var(--rond-klein);
	background: var(--wit);
	color: inherit;
}

textarea {
	min-height: 180px;
	resize: vertical;
}

input:focus, select:focus, textarea:focus {
	border-color: var(--groen);
	outline: none;
}

/*
	Een verzendknop is het einde van een blok. Boven lucht om hem los te
	maken van het laatste veld, onder lucht zodat wat erna komt niet
	tegen de knop aan plakt.
*/
.formulier button {
	margin-top: 1.6rem;
	margin-bottom: 2.4rem;
	justify-self: start;
}

.prijs form {
	margin-top: 1rem;
}

.prijs .knop {
	margin-bottom: 0.9rem;
}

.keuzes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.keuzes label {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: var(--wit);
	border: 2px solid var(--lijn);
	border-radius: 999px;
	padding: 0.45rem 0.9rem;
	font-weight: 700;
	cursor: pointer;
}

.keuzes input:checked + span {
	color: var(--groen);
}

.rij {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	align-items: end;
}

/*
	Een rij met twee velden naast elkaar houdt dezelfde afstand tot het veld
	erboven als een los veld. De ruimte zit op de rij zelf, niet op de labels
	erin, anders telt hij dubbel.
*/
.formulier > .rij {
	margin-top: 0.9rem;
}

.formulier .rij label {
	margin-top: 0;
}

/*
	Een knop die naast invulvelden staat moet er precies mee op één lijn
	liggen. Zelfde verticale padding en randdikte als een invoerveld, en
	geen marges van het formulier eromheen.
*/
.rij .knop, .rij button {
	margin: 0;
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
	width: 100%;
}

/* Prijzen */

.prijzen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	align-items: stretch;
}

.prijs {
	position: relative;
	background: var(--wit);
	border-radius: var(--rond);
	padding: 2.2rem 1.9rem;
	box-shadow: var(--schaduw);
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(11, 90, 81, 0.08);
}

.prijs.uitgelicht {
	box-shadow: var(--schaduw-hoog);
	border-color: transparent;
	overflow: hidden;
}

/* Verlooprand voor het uitgelichte pakket, zonder harde oranje kader. */
.prijs.uitgelicht::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: var(--verloop-warm);
}

.prijs .bedrag {
	background: var(--verloop);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.prijs .bedrag {
	font-size: 3rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.prijs .per {
	color: var(--grijs);
	font-weight: 700;
}

.prijs .centen {
	font-size: 1.6rem;
}

.oudeprijs {
	text-decoration: line-through;
	color: var(--grijs);
	margin-right: 0.35rem;
}

/* De teller van de introductieprijs: waar, dus mag opvallen. */
.introbalk {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.9rem;
	background: var(--verloop-warm);
	color: var(--wit);
	border-radius: var(--rond);
	padding: 1rem 1.4rem;
	margin-bottom: 1.8rem;
}

.introbalk strong {
	font-size: 1.1rem;
}

.introbalk span {
	font-weight: 600;
	font-size: 0.92rem;
}

/* Het jaarvoordeel staat apart onder de maandknop, met eigen achtergrond. */
.jaarkeuze {
	margin-top: 1.2rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--mint-diep);
}

/*
	De gratis kaart rekt niet mee met de andere twee. Die hebben onderaan
	nog een jaarblok; zonder dat blok zou de gratis kaart alleen maar witruimte
	bijkrijgen. Nu stopt hij waar zijn knop staat, ongeveer op de scheidingslijn
	van de andere kaarten.
*/
.prijs-gratis {
	align-self: start;
}

/*
	Alle knoppen in een prijskaart zijn even breed en even hoog. Een link en
	een knop gedragen zich in een flexkolom verschillend: een losse link rekt
	uit tot de volle breedte, een knop in een formulier niet. Daarom worden ze
	hier allebei expliciet op dezelfde maat gezet.
*/
.prijs .knop {
	display: block;
	width: 100%;
	text-align: center;
}

.jaarregel {
	margin: 0.7rem 0 0;
	text-align: center;
	font-size: 0.92rem;
	font-weight: 800;
	color: var(--oranje-tekst);
}

/* Geen extra marge, anders loopt de plaatshouder niet gelijk. */
.jaarkeuze form {
	margin-top: 0;
}

.jaarkeuze .knop {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 0.92rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

.prijs ul {
	list-style: none;
	margin: 1.2rem 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
	flex: 1 1 auto;
}

.prijs li::before {
	content: "\2713";
	color: var(--goed);
	font-weight: 800;
	margin-right: 0.5rem;
}

.prijs li.niet {
	color: var(--grijs);
}

.prijs li.niet::before {
	content: "\2013";
	color: var(--grijs);
}

/*
	Veelgestelde vragen. Gebouwd op details en summary, dus het uitklappen
	werkt ook zonder JavaScript en met het toetsenbord. Het driehoekje van
	de browser is vervangen door een eigen plusteken dat een min wordt.
*/
.faq {
	display: grid;
	gap: 0.7rem;
	margin-top: 1.8rem;
}

.faq-item {
	background: var(--wit);
	border: 1px solid rgba(11, 90, 81, 0.09);
	border-radius: var(--rond-klein);
	box-shadow: var(--schaduw);
	overflow: hidden;
}

.faq-item[open] {
	border-color: rgba(11, 90, 81, 0.18);
}

.faq-item summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.05rem 1.3rem;
	font-family: var(--kop-letter);
	font-size: 1.12rem;
	color: var(--groen-diep);
	cursor: pointer;
	list-style: none;
	transition: background 0.15s ease;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary:hover {
	background: var(--mint);
}

/* Het plusteken staat rechts en blijft altijd op dezelfde plek staan. */
.faq-item summary::after {
	content: "";
	flex: 0 0 auto;
	margin-left: auto;
	width: 20px;
	height: 20px;
	background:
		linear-gradient(var(--oranje), var(--oranje)) center / 100% 3px no-repeat,
		linear-gradient(var(--oranje), var(--oranje)) center / 3px 100% no-repeat;
	border-radius: 2px;
	transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
	transform: rotate(90deg);
	background: linear-gradient(var(--oranje), var(--oranje)) center / 100% 3px no-repeat;
}

.faq-antwoord {
	padding: 0 1.3rem 1.3rem;
	border-top: 1px solid var(--mint-diep);
}

.faq-antwoord p {
	margin: 1rem 0 0;
	max-width: 46em;
}

/* Gesprekken */

.gesprek {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 1.5rem;
	align-items: start;
}

/* Een schuifje aan/uit, groot genoeg om met een duim te raken. */
.schuifje {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	cursor: pointer;
	user-select: none;
}

.schuifje input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.schuifje-baan {
	position: relative;
	width: 64px;
	height: 34px;
	min-width: 64px;
	border-radius: 999px;
	background: var(--mint-diep);
	transition: background 0.2s ease;
}

.schuifje-baan::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wit);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease;
}

.schuifje input:checked + .schuifje-baan {
	background: var(--oranje);
}

.schuifje input:checked + .schuifje-baan::after {
	transform: translateX(30px);
}

.schuifje input:focus-visible + .schuifje-baan {
	outline: 3px solid var(--groen);
	outline-offset: 3px;
}

.schuifje-woord {
	font-weight: 800;
}

/* Een kleiner schuifje, voor tussen de zoekvelden. */
.schuifje-klein {
	gap: 0.6rem;
	margin-top: 0.45rem;
}

.schuifje-klein .schuifje-baan {
	width: 50px;
	height: 28px;
	min-width: 50px;
}

.schuifje-klein .schuifje-baan::after {
	width: 20px;
	height: 20px;
}

.schuifje-klein input:checked + .schuifje-baan::after {
	transform: translateX(22px);
}

.schuifje-klein .schuifje-woord {
	font-weight: 700;
	font-size: 0.95rem;
}

/*
	Een schuifje in een formulier staat op zijn eigen regel met wat lucht
	eromheen, anders plakt hij tegen het veld erboven.
*/
.formulier .schuifje {
	margin: 0.6rem 0 0.2rem;
}

.formulier .schuifje-woord {
	font-weight: 700;
}

/*
	Meerdere dingen tegelijk kiezen, zoals waar je van houdt. Een rij
	schuifjes zou daar een muur worden, dus dat zijn knopjes die aan- en
	uitgaan. Het echte vinkje blijft bestaan voor toetsenbord en
	schermlezer, maar is niet te zien.
*/
.keuzes label {
	background: var(--mint);
	border: 2px solid transparent;
	border-radius: 999px;
	padding: 0.5rem 1rem;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.keuzes label input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.keuzes label span {
	font-weight: 700;
}

.keuzes label:hover {
	border-color: var(--mint-diep);
}

.keuzes label:has(input:checked) {
	background: var(--oranje);
	border-color: var(--oranje);
	color: var(--wit);
}

/* Een vinkje ervoor, zodat het niet alleen aan de kleur te zien is. */
.keuzes label:has(input:checked) span::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.85rem;
	margin-right: 0.5rem;
	border: solid currentColor;
	border-width: 0 3px 3px 0;
	transform: translateY(-0.1em) rotate(45deg);
}

.keuzes label:has(input:focus-visible) {
	outline: 3px solid var(--groen);
	outline-offset: 2px;
}

/* De kolom met gesprekken krijgt dezelfde witte kaart als het gesprek zelf. */
.gesprek-kolom {
	background: var(--wit);
	border-radius: var(--rond);
	padding: 1.2rem;
	box-shadow: var(--schaduw);
}

.gesprek-kolom h2 {
	margin-top: 0;
}

.gesprek-kolom .gesprek-lijst a {
	background: var(--mint);
}

.gesprek-kolom .gesprek-lijst a.nu {
	background: var(--groen);
}

.gesprek-lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.gesprek-lijst a {
	display: flex;
	gap: 0.8rem;
	align-items: center;
	background: var(--wit);
	border-radius: var(--rond-klein);
	padding: 0.8rem;
	text-decoration: none;
	color: inherit;
}

.gesprek-lijst a.nu {
	background: var(--groen);
	color: var(--wit);
}

.gesprek-lijst img {
	width: 48px;
	height: 48px;
	min-width: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.gesprek-lijst .naam {
	font-weight: 800;
}

.gesprek-lijst .laatste {
	font-size: 0.85rem;
	opacity: 0.75;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
}

.praat {
	background: var(--wit);
	border-radius: var(--rond);
	padding: 1.5rem;
	box-shadow: var(--schaduw);
}

.praat-lijst {
	display: grid;
	gap: 0.8rem;
	max-height: 60vh;
	overflow-y: auto;
	padding-right: 0.4rem;
}

.praat-regel {
	max-width: 78%;
	padding: 0.85rem 1.1rem;
	border-radius: 18px;
	background: var(--mint);
	overflow-wrap: anywhere;
}

.praat-regel.van-mij {
	margin-left: auto;
	background: var(--groen);
	color: var(--wit);
}

.praat-regel .wanneer {
	display: block;
	font-size: 0.75rem;
	opacity: 0.7;
	margin-top: 0.3rem;
}

/* Profiel */

.profielkop {
	position: relative;
	min-height: 60vh;
	display: flex;
	align-items: flex-end;
	color: var(--wit);
	background: var(--groen-diep);
	overflow: hidden;
}

.profielkop img.achtergrond {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(1.05);
}

.profielkop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 52, 47, 0) 0%, rgba(10, 52, 47, 0.3) 45%, rgba(10, 52, 47, 0.82) 100%);
}

.profielkop .tekst {
	position: relative;
	z-index: 2;
	max-width: var(--breedte);
	margin: 0 auto;
	width: 100%;
	padding: 2.5rem 1.2rem;
}

.profiel-inhoud {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 2.5rem;
	padding: 3rem 0;
}

/*
	Tussenkoppen in een lopend verhaal. Zonder eigen ruimte en kleur
	verdwijnen ze tussen de alinea's en lezen ze als een gewone zin.
*/
.blokkop {
	margin-top: 3rem;
	margin-bottom: 1.1rem;
	padding-top: 1.6rem;
	border-top: 2px solid var(--mint-diep);
	color: var(--groen);
	font-size: 1.45rem;
}

.blokkop::after {
	content: "";
	display: block;
	width: 2.6rem;
	height: 3px;
	margin-top: 0.7rem;
	border-radius: 3px;
	background: var(--verloop-warm);
}

.profiel-inhoud > div > p {
	max-width: 40em;
}

.zijblok {
	background: var(--wit);
	border: 1px solid rgba(11, 90, 81, 0.07);
	border-radius: var(--rond);
	padding: 1.6rem;
	box-shadow: var(--schaduw);
	margin-bottom: 1.2rem;
}

.zijblok h3 {
	margin-bottom: 0.6rem;
}

.gegevens {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.4rem 1rem;
}

.gegevens dt {
	font-weight: 800;
	color: var(--grijs);
}

.gegevens dd {
	margin: 0;
}

/* Regiokringen met hun teller. */
.kringen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.2rem;
	margin-top: 2rem;
}

.kring {
	background: var(--wit);
	border: 1px solid rgba(11, 90, 81, 0.08);
	border-radius: var(--rond);
	box-shadow: var(--schaduw);
	padding: 1.3rem 1.4rem 1.5rem;
	display: flex;
	flex-direction: column;
}

.kring-open {
	border-color: var(--groen-licht);
}

.kring-kop {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.kring h3 {
	margin: 0;
	font-size: 1.2rem;
}

.kring-kop .vlag {
	position: static;
}

.kring-provincie {
	color: var(--grijs);
	font-weight: 700;
	font-size: 0.85rem;
	margin: 0.2rem 0 0.9rem;
}

.balk {
	height: 10px;
	border-radius: 999px;
	background: var(--mint-diep);
	overflow: hidden;
}

.balk span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--verloop-warm);
}

.kring-open .balk span {
	background: var(--verloop);
}

.kring-stand {
	margin: 0.7rem 0 1rem;
	font-size: 0.92rem;
}

.kring form {
	margin-top: auto;
}

.kring .knop {
	width: 100%;
	text-align: center;
}

/* Groepsgesprekken en de wekelijkse koffietafel. */
.koffietafel {
	background: var(--verloop);
	color: var(--wit);
	border-radius: var(--rond);
	padding: 2rem 2.2rem;
}

.koffietafel h2 {
	color: var(--wit);
}

.koffietafel .kop-klein {
	color: #ffc4ad;
}

.koffie-wanneer {
	font-size: 1.15rem;
}

.gesprekken {
	display: grid;
	gap: 1.2rem;
	margin-top: 2rem;
}

.gesprek-kaart {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.2rem 1.5rem;
	background: var(--wit);
	border: 1px solid rgba(11, 90, 81, 0.08);
	border-radius: var(--rond);
	box-shadow: var(--schaduw);
	padding: 1.4rem 1.5rem;
}

.gesprek-kaart.vol {
	opacity: 0.72;
}

.gesprek-wanneer {
	flex: 0 0 auto;
	width: 4.2rem;
	text-align: center;
	background: var(--mint);
	border-radius: var(--rond-klein);
	padding: 0.6rem 0.3rem;
}

.gesprek-wanneer strong {
	display: block;
	font-size: 1.8rem;
	line-height: 1;
	color: var(--groen-diep);
}

.gesprek-wanneer span {
	display: block;
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--grijs);
}

.gesprek-tekst {
	flex: 1 1 18rem;
}

.gesprek-tekst h3 {
	margin-bottom: 0.2rem;
}

.gesprek-tekst .meta {
	color: var(--grijs);
	font-weight: 700;
	font-size: 0.88rem;
	margin-bottom: 0.6rem;
}

.gesprek-plekken {
	margin: 0.6rem 0 0;
	font-size: 0.92rem;
}

.gesprek-plekken .vlag {
	position: static;
	margin-right: 0.4rem;
}

.gesprek-actie {
	flex: 0 0 auto;
	margin-left: auto;
	text-align: center;
}

.gesprek-mee {
	margin: 0 0 0.3rem;
	font-size: 0.9rem;
	color: var(--groen-diep);
}

/* Een taak voor jou: opvallend, maar niet schreeuwerig. */
.taakblok {
	background: var(--wit);
	border: 2px solid var(--oranje);
	border-radius: var(--rond);
	padding: 1.6rem;
	margin-bottom: 1.2rem;
	box-shadow: var(--schaduw);
}

.taakblok h2 {
	font-size: 1.35rem;
	color: var(--oranje-tekst);
}

.taakregel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--mint-diep);
	margin-top: 1rem;
}

.taakregel img {
	width: 48px;
	height: 48px;
	min-width: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.taakregel > span {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.taakregel .meta {
	color: var(--grijs);
	font-size: 0.85rem;
	font-weight: 700;
}

/*
	De kaartjes op /kaartje/. Je ziet alle vier de ontwerpen naast elkaar
	met jouw eigen tekst erop, want een kaart kiezen uit een lijstje met
	vier woorden is raden.

	De tekeningen zijn met verlopen gemaakt en niet met foto's: zo blijft
	de pagina licht en klopt wat je ziet met wat er gedrukt wordt. Elke
	kaart heeft drie lagen tekening (het element zelf plus twee schaduw-
	elementen), een halfdoorzichtig schrijfvlak voor de tekst, en een
	glans die met de muis meebeweegt.
*/
/*
	De kaartjespagina is breed, maar de tekst en de velden staan in een
	smalle kolom in het midden: een invulveld van elf centimeter breed
	leest niet. Alleen de kaarten gebruiken de volle breedte, want een
	kaart van tweehonderd pixels laat niet zien wat er op een echte kaart
	past en daar gaat het hier juist om.
*/
.kaart-pagina {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.kaart-kolom {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.postkaarten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: 2.2rem 1.8rem;
	margin: 1.2rem 0 1.8rem;
}

.kaartkeuze {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
	cursor: pointer;

	/* Eigen perspectief per kaart, anders kijkt de buitenste kaart scheef. */
	perspective: 900px;
}

.kaartkeuze input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/*
	De doos kantelt, de kaart erin blijft plat liggen. De schaduw zit op de
	doos zodat hij met de kanteling meedraait; JavaScript zet hier tijdens
	het zweven een eigen transform op, die dan even wint van deze.
*/
.postkaart-doos {
	display: block;
	width: 100%;

	/*
		In rust ligt de kaart recht voor je. Alleen tijdens het zweven
		kantelt hij; laat je los, dan zakt hij hier rustig naar terug.
		De terugweg mag langer duren dan het volgen, dat leest kalmer.
	*/
	transform: rotateY(0deg) rotateX(0deg);
	transform-origin: 50% 50%;
	transform-style: preserve-3d;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s ease;
	filter: drop-shadow(0 12px 18px rgba(11, 90, 81, 0.2));
	will-change: transform;
}

/* De gekozen kaart ligt recht voor je en komt naar voren. */
.kaartkeuze:has(input:checked) .postkaart-doos {
	transform: rotateY(0deg) rotateX(0deg) translateY(-6px) scale(1.03);
	filter: drop-shadow(0 20px 28px rgba(11, 90, 81, 0.32));
}

/*
	Alles op de kaart is uitgedrukt in procenten van de kaartbreedte
	(cqi), niet in vaste pixels. Daardoor klopt de verhouding tussen de
	letter en het papier altijd, hoe groot de kaart op je scherm ook staat.
	Wat hier past, past ook op de gedrukte kaart van 148 bij 105 mm:
	2,15% van 148 mm is ruim 3 mm, ongeveer een letter van 9 punt.
*/
.postkaart {
	display: block;
	position: relative;
	container-type: inline-size;
	aspect-ratio: 148 / 105;
	border-radius: 12px;
	overflow: hidden;
	background: var(--room);
	padding: 5.5cqi 6cqi 11cqi;
	color: #2d3a37;
	text-align: left;
	isolation: isolate;
}

/*
	Papierkorrel en een lichte inval van linksboven, met een dun randje.
	Zonder dit blijft het een gekleurd vlak in plaats van een kaart.
*/
.postkaart::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.09);
	pointer-events: none;
	background:
		repeating-linear-gradient(38deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(128deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 4px),
		linear-gradient(158deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 42%);
}

.postkaart-tekening {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.postkaart-tekening::before, .postkaart-tekening::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* De glans die de muis volgt. Staat uit tot JavaScript hem aanzet. */
.postkaart-glans {
	position: absolute;
	inset: 0;
	z-index: 5;
	border-radius: 12px;
	opacity: 0;
	pointer-events: none;
	mix-blend-mode: soft-light;
	transition: opacity 0.3s ease;
}

/*
	Het schrijfvlak. Halfdoorzichtig, zodat de tekening eromheen en er
	doorheen te zien blijft maar de tekst gewoon leesbaar is.
*/
.postkaart-vel {
	position: relative;
	z-index: 2;
	display: block;
	max-height: 100%;
	overflow: hidden;
	padding: 3.6cqi 4cqi;
	border-radius: 1.4cqi;
	background: rgba(255, 255, 255, 0.84);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.postkaart-woord {
	display: block;
	font-family: var(--kop-letter);
	font-size: 2.15cqi;
	line-height: 1.45;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/*
	Het merk onderaan de kaart: de ringen met de naam ernaast, net als in
	de kop van de site. Klein gehouden, want het is een kaart van de
	afzender en geen reclamedrukwerk.
*/
.postkaart-merk {
	position: absolute;
	right: 5.5cqi;
	bottom: 3.4cqi;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 1.6cqi;
	font-family: var(--kop-letter);
	font-size: 1.75cqi;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.94);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.postkaart-merk img {
	display: block;
	width: 3.1cqi;
	height: 3.1cqi;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
}

.kaartkeuze-naam {
	font-weight: 800;
	color: var(--grijs);
}

.kaartkeuze:has(input:checked) .kaartkeuze-naam {
	color: var(--oranje-tekst);
}

.kaartkeuze:has(input:checked) .kaartkeuze-naam::after {
	content: " (gekozen)";
	font-weight: 700;
}

.kaartkeuze:has(input:focus-visible) .postkaart {
	outline: 3px solid var(--groen);
	outline-offset: 4px;
}

/*
	Bloemen. Zachte aquarelvlekken in de hoeken, daaroverheen bloemen van
	vijf blaadjes met een hart, en wat losse knopjes.
*/
.postkaart-bloemen {
	background:
		radial-gradient(ellipse 70% 60% at 0% 0%, #fbe3d2 0%, transparent 70%),
		radial-gradient(ellipse 80% 70% at 100% 100%, #f7ded0 0%, transparent 72%),
		linear-gradient(150deg, #fefaf5 0%, #fdf2e6 100%);
}

.postkaart-bloemen .postkaart-tekening::before {
	background:
		radial-gradient(circle at 12% 12%, rgba(239, 111, 74, 0.5) 0 13px, transparent 14px),
		radial-gradient(circle at 24% 8%, rgba(246, 160, 114, 0.45) 0 10px, transparent 11px),
		radial-gradient(circle at 6% 26%, rgba(233, 196, 106, 0.45) 0 9px, transparent 10px),
		radial-gradient(circle at 92% 84%, rgba(239, 111, 74, 0.45) 0 14px, transparent 15px),
		radial-gradient(circle at 80% 94%, rgba(246, 160, 114, 0.4) 0 11px, transparent 12px);
	filter: blur(4px);
}

/* De bloemen zelf: vijf blaadjes rond een hart, twee keer. */
.postkaart-bloemen .postkaart-tekening::after {
	background:
		radial-gradient(circle at 16% 15%, #f28e5f 0 4.5px, transparent 5px),
		radial-gradient(circle at 21% 20%, #f28e5f 0 4.5px, transparent 5px),
		radial-gradient(circle at 11% 20%, #f28e5f 0 4.5px, transparent 5px),
		radial-gradient(circle at 13% 26%, #f28e5f 0 4.5px, transparent 5px),
		radial-gradient(circle at 19% 26%, #f28e5f 0 4.5px, transparent 5px),
		radial-gradient(circle at 16% 21%, #e0b64a 0 3.5px, transparent 4px),
		radial-gradient(circle at 86% 80%, #ef6f4a 0 4px, transparent 4.5px),
		radial-gradient(circle at 90% 84%, #ef6f4a 0 4px, transparent 4.5px),
		radial-gradient(circle at 82% 84%, #ef6f4a 0 4px, transparent 4.5px),
		radial-gradient(circle at 84% 89%, #ef6f4a 0 4px, transparent 4.5px),
		radial-gradient(circle at 89% 89%, #ef6f4a 0 4px, transparent 4.5px),
		radial-gradient(circle at 86% 85%, #e0b64a 0 3px, transparent 3.5px),
		radial-gradient(circle at 30% 12%, #7fae90 0 2.5px, transparent 3px),
		radial-gradient(circle at 70% 92%, #7fae90 0 2.5px, transparent 3px);
}

/*
	Zee bij avond. Warme lucht, een zon die in het water zakt, een lichtpad
	op de golven en schuimlijnen dichterbij.
*/
.postkaart-zee {
	background: linear-gradient(180deg, #ffd9a8 0%, #f9b183 32%, #ef8f7a 52%, #2f7383 53%, #1b4b5c 100%);
	color: #1c2f36;
}

.postkaart-zee .postkaart-tekening::before {
	background:
		radial-gradient(circle at 72% 44%, rgba(255, 249, 224, 0.95) 0 11px, rgba(255, 226, 168, 0.65) 12px 20px, transparent 34px),
		radial-gradient(ellipse 46% 30% at 72% 44%, rgba(255, 236, 190, 0.55), transparent 70%);
}

.postkaart-zee .postkaart-tekening::after {
	background:
		radial-gradient(ellipse 10% 2.5% at 72% 62%, rgba(255, 236, 190, 0.75), transparent 70%),
		radial-gradient(ellipse 14% 2.5% at 72% 72%, rgba(255, 236, 190, 0.6), transparent 70%),
		radial-gradient(ellipse 18% 3% at 72% 84%, rgba(255, 236, 190, 0.45), transparent 70%),
		radial-gradient(ellipse 55% 3% at 26% 70%, rgba(255, 255, 255, 0.5), transparent 70%),
		radial-gradient(ellipse 45% 3% at 60% 92%, rgba(255, 255, 255, 0.4), transparent 70%),
		radial-gradient(ellipse 40% 2.5% at 18% 88%, rgba(255, 255, 255, 0.35), transparent 70%);
}

/*
	Bos in de ochtend. Drie rijen sparren, elke rij donkerder en dichterbij,
	met een mistband ertussen zodat je diepte ziet.
*/
.postkaart-bos {
	background: linear-gradient(180deg, #f6f1e4 0%, #e7eee0 44%, #cfe0d2 100%);
	color: #1e3128;
}

/* Verste rij, licht en klein. */
.postkaart-bos .postkaart-tekening::before {
	background:
		conic-gradient(from 180deg at 8% 74%, transparent 0 26deg, #a8c4ad 26deg 34deg, transparent 34deg),
		conic-gradient(from 180deg at 20% 74%, transparent 0 27deg, #b3cbb6 27deg 33deg, transparent 33deg),
		conic-gradient(from 180deg at 33% 74%, transparent 0 26deg, #a8c4ad 26deg 34deg, transparent 34deg),
		conic-gradient(from 180deg at 47% 74%, transparent 0 27deg, #b3cbb6 27deg 33deg, transparent 33deg),
		conic-gradient(from 180deg at 61% 74%, transparent 0 26deg, #a8c4ad 26deg 34deg, transparent 34deg),
		conic-gradient(from 180deg at 75% 74%, transparent 0 27deg, #b3cbb6 27deg 33deg, transparent 33deg),
		conic-gradient(from 180deg at 90% 74%, transparent 0 26deg, #a8c4ad 26deg 34deg, transparent 34deg),
		radial-gradient(circle at 22% 20%, rgba(255, 246, 214, 0.9) 0 16px, transparent 17px);
}

/* Twee rijen dichterbij, met mist eroverheen. */
.postkaart-bos .postkaart-tekening::after {
	background:
		conic-gradient(from 180deg at 14% 100%, transparent 0 24deg, #1f4a37 24deg 36deg, transparent 36deg),
		conic-gradient(from 180deg at 30% 100%, transparent 0 25deg, #2a5f45 25deg 35deg, transparent 35deg),
		conic-gradient(from 180deg at 46% 100%, transparent 0 23deg, #1f4a37 23deg 37deg, transparent 37deg),
		conic-gradient(from 180deg at 64% 100%, transparent 0 25deg, #2a5f45 25deg 35deg, transparent 35deg),
		conic-gradient(from 180deg at 82% 100%, transparent 0 24deg, #1f4a37 24deg 36deg, transparent 36deg),
		conic-gradient(from 180deg at 96% 100%, transparent 0 26deg, #2a5f45 26deg 34deg, transparent 34deg),
		linear-gradient(180deg, transparent 62%, rgba(255, 255, 255, 0.45) 70%, transparent 82%);
}

/*
	Effen. Geen tekening maar papier met een dubbele bies en een hoekje
	kleur: rustig, maar niet kaal.
*/
.postkaart-effen {
	background: linear-gradient(155deg, #fffdf9 0%, #f7f0e6 100%);
}

.postkaart-effen .postkaart-tekening::before {
	inset: 7px;
	border: 2px solid rgba(239, 111, 74, 0.75);
	border-radius: 7px;
}

.postkaart-effen .postkaart-tekening::after {
	inset: 11px;
	border: 1px solid rgba(18, 121, 108, 0.45);
	border-radius: 5px;
	background:
		radial-gradient(circle at 100% 0%, rgba(239, 111, 74, 0.16) 0 34px, transparent 35px),
		radial-gradient(circle at 0% 100%, rgba(18, 121, 108, 0.12) 0 28px, transparent 29px);
}

.postkaart-effen {
	padding: 9cqi 9.5cqi 12cqi;
}

/* Op de lichte kaarten hoeft er geen schaduw onder de letters. */
.postkaart-effen .postkaart-merk, .postkaart-bloemen .postkaart-merk {
	color: rgba(45, 58, 55, 0.62);
	text-shadow: none;
}

.postkaart-effen .postkaart-merk img, .postkaart-bloemen .postkaart-merk img {
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.16));
}

/* Bij de effen kaart staat het merk binnen de bies, niet erop. */
.postkaart-effen .postkaart-merk {
	right: 8cqi;
	bottom: 6cqi;
}

/*
	Wie liever geen bewegende beelden ziet, krijgt de kaarten gewoon recht
	voor zich. Dat is een instelling van het apparaat zelf.
*/
@media (prefers-reduced-motion: reduce) {

	.postkaart-doos {
		transform: none;
		transition: none;
	}

	.kaartkeuze:has(input:checked) .postkaart-doos {
		transform: scale(1.02);
	}

}

@media (max-width: 560px) {

	.postkaarten {
		grid-template-columns: 1fr;
		gap: 1.6rem;
	}

	.postkaart {
		border-radius: 9px;
	}

}

/* De tekst van een besteld kaartje, zoals die op de kaart komt te staan. */
.kaart-tekst {
	background: var(--mint);
	border-radius: var(--rond);
	padding: 1.1rem 1.3rem;
	margin: 1rem 0 1.2rem;
}

.kaart-tekst p:last-child {
	margin-bottom: 0;
}

.ritmeblok {
	background: var(--mint);
	border-radius: var(--rond);
	padding: 1.4rem 1.6rem;
	margin-bottom: 1.2rem;
}

.ritmeblok p {
	margin: 0 0 0.4rem;
}

.ritmeblok p:last-child {
	margin-bottom: 0;
}

/* De grens van drie berichten, op het moment dat je hem raakt. */
.limiet-op {
	background: var(--mint);
	border-radius: var(--rond);
	padding: 1.5rem;
	margin-top: 1.2rem;
	text-align: center;
}

.limiet-op h3 {
	color: var(--groen-diep);
}

.limiet-nog {
	margin: 1rem 0 0;
	padding: 0.6rem 0.9rem;
	background: var(--mint);
	border-radius: var(--rond-klein);
	font-size: 0.9rem;
	font-weight: 600;
}

/* Beheer */

.tabel {
	width: 100%;
	border-collapse: collapse;
	background: var(--wit);
	border-radius: var(--rond);
	overflow: hidden;
	box-shadow: var(--schaduw);
}

.tabel th, .tabel td {
	text-align: left;
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--lijn);
	vertical-align: top;
}

.tabel th {
	background: var(--mint);
	font-weight: 800;
}

.tabel-omhulsel {
	overflow-x: auto;
}

/* De inlognaam onder de weergavenaam: nodig voor beheer, niet de hoofdzaak. */
.tabel-bij {
	color: var(--grijs);
	font-size: 0.8rem;
	font-weight: 600;
}

.tegels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.tegel {
	background: var(--wit);
	border: 1px solid rgba(11, 90, 81, 0.07);
	border-radius: var(--rond);
	padding: 1.4rem;
	box-shadow: var(--schaduw);
}

.tegel strong {
	display: block;
	font-size: 2.2rem;
	line-height: 1;
	letter-spacing: -0.03em;
	background: var(--verloop);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.tegel span {
	color: var(--grijs);
	font-weight: 700;
}

/*
	Besteloverzicht. Bewust rustig: op deze pagina hoort maar een handeling
	thuis en dat is doorgaan of teruggaan.
*/
.bestelling {
	max-width: 640px;
}

.bestelblok {
	background: var(--wit);
	border: 1px solid rgba(11, 90, 81, 0.09);
	border-radius: var(--rond);
	box-shadow: var(--schaduw);
	padding: 0.4rem 1.5rem;
	margin-bottom: 2rem;
}

.bestelregel {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
	justify-content: space-between;
	align-items: baseline;
	padding: 1rem 0;
	border-bottom: 1px solid var(--mint-diep);
}

.bestelregel:last-child {
	border-bottom: none;
}

.bestelregel span {
	color: var(--grijs);
	font-weight: 700;
	flex: 0 0 auto;
}

.bestelregel strong {
	text-align: right;
	flex: 1 1 60%;
}

.bestelregel-totaal {
	font-size: 1.2rem;
}

.bestelregel-totaal strong {
	font-size: 1.5rem;
	background: var(--verloop);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.akkoord {
	display: flex;
	gap: 0.8rem;
	align-items: flex-start;
	background: var(--mint);
	border-radius: var(--rond-klein);
	padding: 1.1rem 1.2rem;
	font-weight: 600;
	margin-top: 0;
	cursor: pointer;
}

.akkoord input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* Ook hier een schuifje, zodat er nergens op de site een kaal vinkje staat. */
.akkoord .schuifje-baan {
	margin-top: 0.1rem;
}

.akkoord input:checked + .schuifje-baan {
	background: var(--oranje);
}

.akkoord input:checked + .schuifje-baan::after {
	transform: translateX(30px);
}

.akkoord input:focus-visible + .schuifje-baan {
	outline: 3px solid var(--groen);
	outline-offset: 3px;
}

.bestel-onder {
	color: var(--grijs);
	font-size: 0.9rem;
}

.voet-kaal {
	margin-top: 3rem;
	padding: 1.5rem 0;
}

.voet-kaal .voet-onder {
	margin-top: 0;
	border-top: none;
	text-align: center;
}

body.kaal .kop-binnen {
	justify-content: space-between;
}

/*
	Zijpaneel voor de huisregels en de voorwaarden. Schuift van rechts in
	beeld zodat je een half ingevuld formulier niet hoeft te verlaten.
*/
.paneel-waas {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(9, 46, 42, 0.45);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s;
}

.paneel-waas.open {
	opacity: 1;
	visibility: visible;
}

.paneel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 201;
	width: min(34rem, 100%);
	overflow-y: auto;
	background: var(--room);
	box-shadow: -12px 0 40px rgba(9, 46, 42, 0.25);
	padding: 4.5rem 2rem 3rem;
	transform: translateX(100%);
	transition: transform 0.28s ease;
}

.paneel.open {
	transform: translateX(0);
}

.paneel h2 {
	margin-top: 0;
}

.paneel h3 {
	margin-top: 1.8rem;
	color: var(--groen);
}

.paneel-dicht {
	position: absolute;
	top: 1.1rem;
	right: 1.3rem;
	border: 2px solid var(--mint-diep);
	background: var(--wit);
	color: var(--groen-diep);
	border-radius: 999px;
	padding: 0.45rem 1.1rem;
	font: inherit;
	font-weight: 800;
	font-size: 0.9rem;
	cursor: pointer;
}

.paneel-dicht:hover {
	background: var(--mint);
	border-color: var(--groen-licht);
}

html.paneel-open, html.paneel-open body {
	overflow: hidden;
}

/*
	De kopbalk plakt normaal bovenaan mee met het scrollen. Zodra scrollen
	geblokkeerd wordt valt hij terug naar zijn plek bovenaan het document, en
	die staat buiten beeld als je al naar beneden was. Hier schuiven we hem
	over precies die afstand terug, zodat hij gewoon blijft staan waar hij
	stond. Hij blijft onder het donkere vlak liggen: zichtbaar, maar even
	niet aan de beurt.
*/
html.paneel-open .kop {
	transform: translateY(var(--kop-verschuiving, 0px));
}

@media (max-width: 700px) {

	.paneel {
		padding: 4.2rem 1.2rem 2.5rem;
	}

}

@media (prefers-reduced-motion: reduce) {

	.paneel {
		transition: none;
	}

}

/* Paginering */

.paginering {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 2rem 0;
}

.paginering a {
	padding: 0.6rem 1rem;
	border-radius: var(--rond-klein);
	background: var(--wit);
	font-weight: 800;
	text-decoration: none;
	box-shadow: var(--schaduw);
}

.paginering a.nu {
	background: var(--groen);
	color: var(--wit);
}

/* Voet */

.voet {
	position: relative;
	background: var(--verloop-zacht);
	color: var(--inkt);
	padding: 4.5rem 0 1.5rem;
	margin-top: 4.5rem;
}

/* Dun merkstreepje boven de voet in plaats van een harde lijn. */
.voet::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--verloop);
}

.voet a {
	color: var(--groen);
	font-weight: 600;
}

.voet a:hover {
	color: var(--oranje-tekst);
}

/*
	De koppen van de kolommen blijven op dezelfde hoogte, ook als er een over
	twee of drie regels loopt. Dat gaat met subgrid: elk blok neemt twee rijen
	van het raster over, dus alle koppen delen dezelfde rijhoogte en alle
	inhoud begint op dezelfde lijn.
*/
.voet-binnen {
	max-width: var(--breedte);
	margin: 0 auto;
	padding: 0 1.2rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	grid-template-rows: auto 1fr;
	gap: 2.5rem;
}

.voet-blok {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	gap: 0;
	align-content: start;
}

.voet-blok > h2, .voet-blok > .logo {
	margin-bottom: 1rem;
	align-self: start;
}

/*
	Oudere browsers kennen subgrid niet. Daar zorgt een minimale hoogte van
	twee regels dat de koppen alsnog gelijk lopen.
*/
@supports not (grid-template-rows: subgrid) {

	.voet-blok {
		display: block;
	}

	.voet-blok > h2 {
		min-height: 2.4em;
	}

}

.voet h2 {
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--oranje-tekst);
}

.voet ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.voet .logo {
	color: var(--groen);
}

.voet .groot {
	font-size: 1.2rem;
	font-weight: 700;
}

.voet-onder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	max-width: var(--breedte);
	margin: 3rem auto 0;
	padding: 1.5rem 1.2rem 0;
	border-top: 1px solid var(--mint-diep);
	font-size: 0.85rem;
	color: var(--grijs);
}

.voet-onder p {
	flex: 0 0 auto;
	margin: 0;
}

/* De juridische links staan in het midden, tussen copyright en iconen in. */
.voet .voet-onder-links {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.4rem 1.4rem;
	flex: 1 1 auto;
	list-style: none;
	margin: 0;
	padding: 0;
}

.voet .voet-onder-links a {
	font-weight: 600;
	color: var(--grijs);
	text-decoration: none;
}

.voet .voet-onder-links a:hover {
	color: var(--groen);
	text-decoration: underline;
}

/*
	Vertrouwensmerken rechtsonder, naast elkaar.
	De selector noemt .voet mee, want de algemene regel .voet ul zet lijsten
	in de voettekst onder elkaar en zou anders winnen.
*/
.voet .voet-keur {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.7rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Alleen het icoon; de tekst zit in de tooltip en in een verborgen label. */
.voet-keur li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background: var(--wit);
	border: 1px solid var(--mint-diep);
	border-radius: 50%;
	color: var(--groen);
	cursor: help;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.voet-keur li:hover {
	border-color: var(--groen-licht);
	color: var(--groen-diep);
}

.voet-keur svg {
	flex: 0 0 auto;
}

@media (max-width: 700px) {

	/* Onder elkaar en gecentreerd: naast elkaar past het niet meer. */
	.voet-onder {
		justify-content: center;
		text-align: center;
	}

	.voet-onder p, .voet .voet-onder-links {
		flex: 1 1 100%;
		justify-content: center;
	}

	.voet .voet-keur {
		order: -1;
		width: 100%;
		justify-content: center;
	}

	.voet-keur li {
		width: 2.3rem;
		height: 2.3rem;
	}

}

/* Smal scherm */

@media (max-width: 900px) {

	/*
		Op een telefoon bestaat de balk uit twee dingen: het logo en een
		menuknop. Al het andere, de menu-items en de knoppen voor inloggen
		en aanmelden, zit in het uitklapvlak eronder. Ze in de balk proppen
		levert een rij minuscule elementen op die niemand kan raken.
	*/
	.kop-binnen {
		flex-wrap: wrap;
		gap: 0.6rem 1rem;
	}

	.menu-knop {
		display: inline-flex;
		order: 2;
	}

	.menu-knop[aria-expanded="true"] {
		background: var(--groen);
		color: var(--wit);
		border-color: var(--groen);
	}

	.menu, .kop-acties {
		display: none;
		flex: 1 1 100%;
		width: 100%;
	}

	.menu {
		order: 3;
	}

	.kop-acties {
		order: 4;
	}

	.kop.open .menu {
		display: block;
		border-top: 1px solid var(--lijn);
		padding-top: 0.6rem;
	}

	.kop.open .kop-acties {
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem;
		margin-left: 0;
		padding-bottom: 0.9rem;
	}

	/* In het uitklapvlak onder elkaar en tegen de linkerkant. */
	.menu ul {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0.15rem;
	}

	.menu a {
		justify-content: flex-start;
		padding: 0.85rem 0.9rem;
		font-size: 1.1rem;
	}

	/* De knoppen in het uitklapvlak samen de volle breedte. */
	.kop-acties .knop {
		flex: 1 1 45%;
		text-align: center;
	}

	.kop-berichten, .kop-ik {
		flex: 1 1 45%;
		padding: 0.7rem 0.9rem;
		border-radius: var(--rond-klein);
		background: var(--mint);
	}

	.kop-uit {
		flex: 1 1 100%;
		text-align: center;
		background: var(--mint);
	}

	.band {
		grid-template-columns: 1fr;
	}

	.band .beeld {
		min-height: 320px;
		order: 1;
	}

	.band .woord {
		order: 2;
		padding: 2.5rem 1.2rem;
	}

	.band-om .beeld {
		order: 1;
	}

	.profiel-inhoud, .gesprek {
		grid-template-columns: 1fr;
	}

	.raster-2 {
		grid-template-columns: 1fr;
	}

	.held {
		min-height: 76vh;
	}

}

@media (max-width: 700px) {

	/*
		Op een telefoon is er geen ruimte voor diep inspringen. De structuur
		blijft zichtbaar via de lijn, maar de kolom blijft leesbaar.
	*/
	.reactie-tak {
		margin-left: 0.35rem;
	}

	.reactie-tak::before {
		width: 2px;
	}

	.reactie, .reactie-antwoord {
		padding-left: 0.9rem;
		--mid: calc(1.1rem + 22px);
		background-size: 2px 100%;
	}

	.reactie:last-child:not(:has(.reactie-tak)) {
		background-size: 2px var(--mid);
	}

	.reactie::before {
		left: 0;
		top: calc(var(--mid) - 1px);
		width: 0.9rem;
		height: 2px;
	}

	.reactie::after {
		left: -4.5px;
		top: calc(var(--mid) - 6.5px);
		width: 9px;
		height: 9px;
		border-width: 2px;
	}

	.held {
		min-height: 68vh;
	}

	.profielkop {
		min-height: 46vh;
	}

	.held-cijfers {
		gap: 1.4rem;
		margin-top: 1.6rem;
	}

	.held-cijfers strong {
		font-size: 1.6rem;
	}

	.smal {
		padding: 2rem 1.1rem;
	}

	.bericht {
		padding: 1.1rem;
		gap: 0.9rem;
	}

	.bericht img.avatar, .bericht > a img.avatar,
	.reactie-antwoord > .bericht img.avatar,
	.reactie-antwoord > .bericht > a img.avatar {
		width: 44px;
		height: 44px;
		min-width: 44px;
	}

	.draad-regel {
		flex-wrap: wrap;
		padding: 1rem 1.1rem;
	}

	.draad-regel .aantal {
		margin-left: 0;
		text-align: left;
		display: flex;
		align-items: baseline;
		gap: 0.35rem;
		font-size: 0.85rem;
	}

	.draad-regel .aantal strong {
		display: inline;
		font-size: 1.1rem;
	}

	.faq-item summary {
		padding: 0.95rem 1rem;
		font-size: 1.05rem;
	}

	.faq-antwoord {
		padding: 0 1rem 1.1rem;
	}

	.tegels {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	}

	.gesprek-lijst .laatste {
		max-width: 100%;
	}

	.praat-regel {
		max-width: 90%;
	}

}

@media (max-width: 520px) {

	/*
		De merknaam blijft staan. Alleen een los ringetje zonder woord zegt
		niets tegen iemand die de site voor het eerst ziet.
	*/
	.logo {
		font-size: 1.25rem;
		gap: 0.45rem;
	}

	.logo img {
		width: 30px;
		height: 30px;
	}

	.menu-knop {
		padding: 0.45rem 0.85rem;
		font-size: 0.95rem;
	}

	.kop-binnen {
		gap: 0.5rem 0.7rem;
		padding: 0.6rem 0.9rem;
	}

	.knop {
		padding: 0.65rem 1.1rem;
	}

	section {
		padding: 2.5rem 0;
	}

	/* Knoppen onder elkaar en over de volle breedte: makkelijker te raken. */
	.held-knoppen {
		flex-direction: column;
		align-items: stretch;
	}

	.held-knoppen .knop {
		width: 100%;
		text-align: center;
	}

	.binnen {
		padding-left: 0.9rem;
		padding-right: 0.9rem;
	}

	.bericht {
		flex-direction: column;
	}

	.bericht-acties {
		gap: 0.5rem 0.8rem;
	}

	.blokkop {
		margin-top: 2.2rem;
		font-size: 1.25rem;
	}

	.prijs {
		padding: 1.6rem 1.3rem;
	}

	.formulier button {
		width: 100%;
	}

}

@media (prefers-reduced-motion: reduce) {

	* {
		transition: none !important;
		scroll-behavior: auto !important;
	}

}