/* =============================================================================
   Natuurwaardenkaart
   =============================================================================

   De vormgeving komt uit het onderwerp zelf. Twee dingen dragen alles:

   1. De waardeladder. De kleuren zijn de legenda van een natuurwaardenkaart -
      van zandkleur (weinig) naar diep groenblauw (veel). Dat is meteen het
      kleurenschema van de site, zodat de vormgeving hetzelfde zegt als de kaart.

   2. Het raster van vijftig meter. Terugkerend als achtergrondpatroon en als
      beeldmerk, met css getekend zodat er geen plaatje voor nodig is.

   Bewust één lichte weergave en geen donkere variant: dit is een zakelijke site
   met een vaste huisstijl, geen leesomgeving. Alle kleuren staan daarom expliciet.
   ========================================================================== */

/* VERBERGEN MOET VERBERGEN BLIJVEN
   Het attribuut hidden werkt via display:none uit de browserstijl, en die
   verliest van elke eigen regel die display zet. De balk in het gebiedspaneel
   staat op display:flex en bleef daardoor staan terwijl hij verborgen was. Een
   keer hier afdwingen is beter dan het per element onthouden. */
[hidden] { display: none !important; }

:root {
	/* de ladder, van laag naar hoog */
	--waarde-1: #EFE4CB;
	--waarde-2: #CBD3A0;
	--waarde-3: #94B589;
	--waarde-4: #4E8C6B;
	--waarde-5: #1B5D4C;

	--inkt:        #0F211D;
	--inkt-zacht:  #4C6058;
	--inkt-licht:  #7A8C84;

	--grond:       #FBFCFB;
	--vlak:        #FFFFFF;
	--vlak-zacht:  #F1F5F1;
	--diep:        #12302A;

	--lijn:        #DEE6E0;
	--lijn-hard:   #C3D0C7;

	--primair:     #1B5D4C;
	--primair-op:  #164C3E;
	/* De tekstkleur op de primaire kleur. Staat apart omdat een gemeente een
	   lichte huisstijlkleur kan hebben, en dan is wit onleesbaar. Thema.php
	   rekent hem uit de luminantie. */
	--primair-tekst: #FFFFFF;

	--ruimte:      clamp(1.25rem, 4vw, 2.5rem);
	--schaduw:     0 1px 2px rgba(15, 33, 29, .06), 0 8px 24px -16px rgba(15, 33, 29, .25);
	--rond:        10px;
}

@font-face {
	font-family: 'Inter';
	src: url('/assets/fonts/inter-latin.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
	               U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
	               U+2212, U+2215, U+FEFF, U+FFFD;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--grond);
	color: var(--inkt);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	margin: 0;
	line-height: 1.15;
	letter-spacing: -.02em;
	text-wrap: balance;
	font-weight: 650;
}

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

a { color: var(--primair); }
a:hover { color: var(--primair-op); }

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

.overslaan {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--vlak);
	padding: .6rem 1rem;
	z-index: 1200;   /* boven de kop, anders is hij niet te zien als hij focus krijgt */
}
.overslaan:focus { left: 0; }

.omhulsel {
	max-width: 1120px;
	margin: 0 auto;
	padding-inline: var(--ruimte);
}
.omhulsel.smal { max-width: 720px; }

/* ---------------------------------------------------------------- beeldmerk */
/* Het raster in het klein: negen vakjes, waarvan er een paar gevuld zijn. Dat
   is precies wat een natuurwaardenkaart is, en het kost geen enkel bestand. */
.merk {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	text-decoration: none;
	color: inherit;
	font-weight: 650;
	letter-spacing: -.01em;
}
.merk__raster {
	width: 26px;
	height: 26px;
	flex: none;
	border-radius: 4px;
	background:
		linear-gradient(var(--waarde-5) 0 0) 0 0 / 33.34% 33.34% no-repeat,
		linear-gradient(var(--waarde-3) 0 0) 100% 0 / 33.34% 33.34% no-repeat,
		linear-gradient(var(--waarde-4) 0 0) 50% 50% / 33.34% 33.34% no-repeat,
		linear-gradient(var(--waarde-2) 0 0) 0 100% / 33.34% 33.34% no-repeat,
		linear-gradient(var(--waarde-1) 0 0) 100% 100% / 33.34% 33.34% no-repeat,
		var(--vlak-zacht);
	box-shadow: inset 0 0 0 1px var(--lijn-hard);
}
.merk__naam { font-size: 1.0625rem; }

/* --------------------------------------------------------------------- kop */
.kop {
	position: sticky;
	top: 0;
	/* Boven Leaflet uit. Die zet zijn bedieningselementen op z-index 1000 en zijn
	   lagen op 400; met de tien die hier stond schoof de hele kaart bij het
	   scrollen over de menubalk heen. */
	z-index: 1100;
	background: var(--grond);
	border-bottom: 1px solid var(--lijn);
}

/* De doorschijnende balk met vervaging alleen waar de vervaging er ook echt is.
   Op Android wordt backdrop-filter geregeld genegeerd, en dan blijft er een balk
   over die voor negentig procent dekt: de kop van de pagina schemert er dan
   doorheen en het ziet eruit alsof de tekst dubbel staat. */
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
	.kop {
		background: rgba(251, 252, 251, .9);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
}
.kop__binnen {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 66px;
}
.kop__nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 2vw, 1.5rem);
	font-size: .9375rem;
}
.kop__nav a { text-decoration: none; color: var(--inkt-zacht); }
.kop__nav a:hover { color: var(--inkt); }
.kop__nav .knop { color: #fff; }
.kop__uit { font-size: .875rem; }

@media (max-width: 640px) {
	.kop__nav a:not(.knop):not(.kop__uit) { display: none; }
}

/* ------------------------------------------------------------------ knoppen */
.knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .7rem 1.25rem;
	border: 1px solid var(--primair);
	border-radius: 8px;
	background: var(--primair);
	color: var(--primair-tekst);
	font: inherit;
	font-weight: 600;
	font-size: .9375rem;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.knop:hover { background: var(--primair-op); border-color: var(--primair-op); color: var(--primair-tekst); }
.knop--klein { padding: .45rem .9rem; font-size: .875rem; }
.knop--breed { width: 100%; padding: .8rem 1rem; }
.knop--rustig {
	background: transparent;
	color: var(--primair);
	border-color: var(--lijn-hard);
}
.knop--rustig:hover { background: var(--vlak-zacht); color: var(--primair-op); border-color: var(--lijn-hard); }

/* -------------------------------------------------------------------- held */
.held {
	position: relative;
	overflow: hidden;
	background: var(--vlak);
	border-bottom: 1px solid var(--lijn);
}

/* Het raster van vijftig meter, als achtergrond. Vervaagt naar onderen zodat de
   tekst er niet mee hoeft te concurreren. */
.held__raster {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, var(--lijn) 1px, transparent 1px),
		linear-gradient(to bottom, var(--lijn) 1px, transparent 1px);
	background-size: 50px 50px;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 78%);
	mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 78%);
	pointer-events: none;
}

.held__binnen {
	position: relative;
	padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4rem);
}

.bovenregel {
	margin: 0 0 1rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--inkt-licht);
}

.held h1 {
	font-size: clamp(2.1rem, 5.5vw, 3.6rem);
	max-width: 18ch;
}
.held__lead {
	margin-top: 1.4rem;
	max-width: 60ch;
	font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
	color: var(--inkt-zacht);
}
.held__acties {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 2rem;
}

/* de waardeladder als legenda onder de held */
.ladder {
	display: flex;
	list-style: none;
	margin: 3rem 0 0;
	padding: 0;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px var(--lijn-hard);
}
.ladder__stap {
	flex: 1;
	height: 34px;
	display: flex;
	align-items: center;
	padding-inline: .7rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.ladder__stap--1 { background: var(--waarde-1); color: var(--inkt-zacht); }
.ladder__stap--2 { background: var(--waarde-2); }
.ladder__stap--3 { background: var(--waarde-3); }
.ladder__stap--4 { background: var(--waarde-4); }
.ladder__stap--5 { background: var(--waarde-5); color: #fff; justify-content: flex-end; }

/* ------------------------------------------------------------------ blokken */
.blok { padding-block: clamp(3rem, 7vw, 5.5rem); }
.blok--strak { padding-block: clamp(2rem, 5vw, 3.5rem); }

.blok__kop {
	font-size: clamp(1.6rem, 3.4vw, 2.25rem);
	max-width: 24ch;
}
.blok__lead {
	margin-top: 1rem;
	max-width: 62ch;
	color: var(--inkt-zacht);
}

.blok--donker {
	background: var(--diep);
	color: #E8F0EB;
}
.blok--donker .blok__kop { color: #fff; }
.blok--donker p { color: #C6D6CD; }
.blok--donker strong { color: #fff; }

/* ------------------------------------------------------------------ stappen */
.stappen {
	list-style: none;
	counter-reset: stap;
	margin: 2.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.stappen li {
	counter-increment: stap;
	background: var(--vlak);
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	padding: 1.6rem;
	box-shadow: var(--schaduw);
}
.stappen li::before {
	content: counter(stap);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-bottom: 1rem;
	border-radius: 6px;
	background: var(--vlak-zacht);
	box-shadow: inset 0 0 0 1px var(--lijn-hard);
	font-size: .875rem;
	font-weight: 700;
	color: var(--primair);
}
.stappen h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.stappen p { color: var(--inkt-zacht); font-size: .9375rem; }

/* ------------------------------------------------------------------ kaarten */
.tegels {
	margin-top: 2.5rem;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
/* Tegel en niet kaart: op deze site is een kaart een kaart, en .kaart hoort bij
   het kaartvlak zelf. Toen dat allebei zo heette kregen deze blokjes de hoogte
   van een Leaflet-kaart mee - een wit vlak van zeshonderd beeldpunten met drie
   regels tekst erin. */
.tegel {
	border-top: 3px solid var(--waarde-4);
	padding-top: 1.25rem;
}
.tegel h3 { font-size: 1.0625rem; margin-bottom: .5rem; }
.tegel p { color: var(--inkt-zacht); font-size: .9375rem; }

/* ---------------------------------------------------------------- kaartvlak */
/* De plek waar de kaart komt. Nu nog het raster met een tekst erin, zodat de
   pagina niet leeg oogt en de maatvoering al klopt. */
.kaartvlak {
	position: relative;
	margin-top: 2rem;
	min-height: min(60vh, 460px);
	display: grid;
	place-items: center;
	background: var(--vlak);
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	overflow: hidden;
}
.kaartvlak__raster {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, var(--lijn) 1px, transparent 1px),
		linear-gradient(to bottom, var(--lijn) 1px, transparent 1px);
	background-size: 50px 50px;
}
.kaartvlak__tekst {
	position: relative;
	text-align: center;
	color: var(--inkt-licht);
	background: rgba(255, 255, 255, .85);
	padding: 1rem 1.5rem;
	border-radius: 8px;
}

/* -------------------------------------------------------------------- inlog */
body.kaal {
	display: grid;
	place-items: center;
	min-height: 100vh;
	background:
		linear-gradient(to right, var(--lijn) 1px, transparent 1px) 0 0 / 50px 50px,
		linear-gradient(to bottom, var(--lijn) 1px, transparent 1px) 0 0 / 50px 50px,
		var(--grond);
}
.inlog { width: 100%; padding: var(--ruimte); }
.inlog__kaart {
	max-width: 380px;
	margin: 0 auto;
	background: var(--vlak);
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	box-shadow: var(--schaduw);
}
.merk--inlog { margin-bottom: 1.75rem; }
.inlog__formulier { display: grid; gap: .35rem; }
.inlog__formulier label {
	font-size: .8125rem;
	font-weight: 600;
	color: var(--inkt-zacht);
	margin-top: .75rem;
}
.inlog__formulier input {
	font: inherit;
	padding: .65rem .8rem;
	border: 1px solid var(--lijn-hard);
	border-radius: 8px;
	background: var(--vlak);
	color: var(--inkt);
}
.inlog__formulier input:focus-visible { border-color: var(--primair); }
.inlog__formulier .knop { margin-top: 1.5rem; }

/* ---------------------------------------------------------------- meldingen */
.melding {
	padding: .8rem 1rem;
	border-radius: 8px;
	background: var(--vlak-zacht);
	border: 1px solid var(--lijn);
	font-size: .9375rem;
	margin-bottom: 1rem;
}
.melding--fout {
	background: #FBEDE9;
	border-color: #E8C7BC;
	color: #7A2E16;
}

/* ----------------------------------------------------------------- tabellen */
.tabelhoes { overflow-x: auto; margin-top: 1.75rem; border: 1px solid var(--lijn); border-radius: var(--rond); }
.tabel { width: 100%; border-collapse: collapse; font-size: .9375rem; background: var(--vlak); }
.tabel th, .tabel td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--lijn); }
.tabel th {
	background: var(--vlak-zacht);
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--inkt-licht);
	white-space: nowrap;
}
.tabel tbody tr:last-child td { border-bottom: none; }
.cijfer { font-variant-numeric: tabular-nums; }

.chip {
	display: inline-block;
	padding: .15rem .55rem;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 600;
	background: var(--vlak-zacht);
	box-shadow: inset 0 0 0 1px var(--lijn-hard);
}
.chip--besloten      { background: #EDEFF2; color: #3F4A54; }
.chip--openbaar-grof { background: var(--waarde-2); color: #33420F; }
.chip--openbaar      { background: var(--waarde-4); color: #fff; }

.nogtedoen {
	margin-top: 3rem;
	padding: 1.5rem;
	border: 1px dashed var(--lijn-hard);
	border-radius: var(--rond);
	background: var(--vlak-zacht);
}
.nogtedoen h2 { font-size: 1rem; margin-bottom: .5rem; }
.nogtedoen ul { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--inkt-zacht); font-size: .9375rem; }
.nogtedoen li { margin-bottom: .3rem; }

/* -------------------------------------------------------------------- voet */
.voet {
	background: var(--diep);
	color: #C6D6CD;
	padding-top: clamp(2.5rem, 6vw, 4rem);
	margin-top: clamp(3rem, 7vw, 5rem);
}
.voet a { color: #A9D2BF; }
.voet a:hover { color: #fff; }
.voet h2 { font-size: 1rem; color: #fff; margin-bottom: .5rem; }
.voet p { font-size: .9375rem; }

.voet__binnen {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	padding-bottom: 2.5rem;
}
.voet__label {
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #7E9A8C;
	margin-bottom: .9rem;
}
.voet__logos { display: flex; align-items: center; gap: 1rem; }
.voet__logo {
	text-decoration: none;
	color: #C6D6CD;
	font-size: .8125rem;
	line-height: 1.35;
}
.voet__logo strong { display: block; color: #fff; font-size: 1rem; letter-spacing: -.01em; }
.voet__plus { color: #4E7565; font-size: 1.25rem; }

.voet__slot {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-block: 1.25rem;
}
.voet__slot p { font-size: .8125rem; color: #7E9A8C; margin: 0; }

/* ---------------------------------------------------------------- kaartlagen */
/* Vier manieren om naar dezelfde gemeente te kijken. Elk blokje krijgt een
   staaltje van de kleur waarin die laag op de kaart verschijnt, zodat de
   voorpagina alvast de legenda is die je straks in de kaart terugziet. */
.lagen {
	margin-top: 2.5rem;
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.laag h3 {
	font-size: 1.0625rem;
	margin: .9rem 0 .4rem;
	color: #fff;
}
.laag p { font-size: .9375rem; }

.laag__vlak {
	display: block;
	height: 40px;
	border-radius: 6px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.laag__vlak--alles {
	background: linear-gradient(90deg,
		var(--waarde-1), var(--waarde-2), var(--waarde-3), var(--waarde-4), var(--waarde-5));
}
.laag__vlak--rood      { background: linear-gradient(90deg, #F4D9CE, #D98368, #A63A1E); }
.laag__vlak--beschermd { background: linear-gradient(90deg, #D7E2EE, #7FA3C6, #33587F); }
.laag__vlak--groepen {
	background:
		linear-gradient(#7BA05B 0 0) 0    0 / 25% 100% no-repeat,
		linear-gradient(#C9A227 0 0) 25%  0 / 25% 100% no-repeat,
		linear-gradient(#6E8FAF 0 0) 50%  0 / 25% 100% no-repeat,
		linear-gradient(#A2678A 0 0) 75%  0 / 25% 100% no-repeat;
}

/* In het donkere blok mag de lead wat lichter zijn dan de standaardkleur. */
.blok--donker .blok__lead { color: #B9CCC2; }

/* ------------------------------------------------------------------- beheer */
.tussenkop {
	font-size: 1.125rem;
	margin: 2.5rem 0 .75rem;
	padding-bottom: .4rem;
	border-bottom: 1px solid var(--lijn);
}

/* Alleen voor schermlezers: een label dat op het scherm overbodig is omdat de
   kolomkop het al zegt, maar dat een schermlezer wel nodig heeft. */
.verborgen {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.inlijn {
	display: flex;
	align-items: center;
	gap: .4rem;
	flex-wrap: wrap;
}

select {
	font: inherit;
	font-size: .875rem;
	padding: .35rem .5rem;
	border: 1px solid var(--lijn-hard);
	border-radius: 6px;
	background: var(--vlak);
	color: var(--inkt);
	max-width: 100%;
}

.aanmaken {
	display: flex;
	align-items: flex-end;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 1.25rem;
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	background: var(--vlak);
}
.aanmaken__veld { display: grid; gap: .3rem; }
.aanmaken__veld label {
	font-size: .8125rem;
	font-weight: 600;
	color: var(--inkt-zacht);
}
.aanmaken__veld select { font-size: .9375rem; padding: .55rem .6rem; min-width: 16rem; }

.melding--goed {
	background: #E8F2EB;
	border-color: #BBD7C4;
	color: #17513E;
}

/* ------------------------------------------------------------------- kaart */
.kaarthoes {
	margin: 2rem 0 0;
	padding: 1rem;
	background: var(--vlak);
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	box-shadow: var(--schaduw);
}
.cijfers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: 1px;
	margin-top: 1.5rem;
	background: var(--lijn);
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	overflow: hidden;
}
.cijfer__blok { background: var(--vlak); padding: .9rem 1.1rem; }
.cijfer__blok dt {
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--inkt-licht);
	margin-bottom: .25rem;
}
.cijfer__blok dd {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.cijfer__blok dd small { font-size: .875rem; color: var(--inkt-licht); }

.verantwoording {
	margin-top: 1.25rem;
	max-width: 68ch;
	font-size: .875rem;
	color: var(--inkt-zacht);
}

/* --------------------------------------------------------- schuifbare kaart */
.kaart {
	height: min(68vh, 620px);
	border-radius: 8px;
	background: var(--vlak-zacht);
}
.leaflet-container { font: inherit; }
.leaflet-control-layers { border-radius: 8px; border: 1px solid var(--lijn-hard); }
.leaflet-popup-content { font-size: .875rem; }

/* het zoekveld boven de kaart */
.zoek { position: relative; margin-bottom: .75rem; }
.zoek__veld {
	width: 100%;
	font: inherit;
	font-size: .9375rem;
	padding: .6rem .8rem;
	border: 1px solid var(--lijn-hard);
	border-radius: 8px;
	background: var(--vlak);
	color: var(--inkt);
}
.zoek__veld:focus-visible { border-color: var(--primair); }

.zoek__lijst {
	position: absolute;
	z-index: 1050;         /* boven de kaart en zijn knoppen, onder de kop */
	left: 0;
	right: 0;
	top: calc(100% + .25rem);
	background: var(--vlak);
	border: 1px solid var(--lijn-hard);
	border-radius: 8px;
	box-shadow: var(--schaduw);
	overflow: hidden;
}
.zoek__treffer {
	display: block;
	width: 100%;
	text-align: left;
	font: inherit;
	font-size: .9375rem;
	padding: .55rem .8rem;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--lijn);
	cursor: pointer;
	color: var(--inkt);
}
.zoek__treffer:last-child { border-bottom: 0; }
.zoek__treffer:hover { background: var(--vlak-zacht); }

/* Een mislukte inlaadstap in de beheertabel. Rood is hier op zijn plaats: dit
   is een storing en niet een waarde die toevallig hoog is. */
.rij--fout { background: color-mix(in srgb, var(--waarde-1) 22%, transparent); }
.rij--fout td { color: var(--inkt); }

.verantwoording--klein { font-size: .75rem; display: block; margin-top: .2rem; }

/* het gemeentelogo naast ons eigen merk */
.merk__scheiding {
	width: 1px;
	height: 1.5rem;
	background: var(--lijn-hard);
	margin: 0 .1rem 0 .35rem;
}
/* Op hoogte begrenzen en niet op breedte: een gemeentelogo is soms een liggend
   woordmerk en soms een staand wapen, en alleen de hoogte houdt de balk rustig. */
.merk__gemeente {
	height: 1.75rem;
	width: auto;
	max-width: 9rem;
	object-fit: contain;
}
/* Het voorbeeldje in de beheertabel, zodat je ziet wat er is opgeslagen. */
.logovoorbeeld { height: 1.5rem; width: auto; max-width: 6rem; object-fit: contain; }
.veld--klein { font-size: .8125rem; max-width: 11rem; }

@media (max-width: 40rem) {
	/* Op een telefoon is de balk al vol met ons eigen merk en het menu. Het
	   gemeentelogo staat dan op de pagina zelf en niet in de kop. */
	.merk__scheiding, .merk__gemeente { display: none; }
}

/* Een andere vorm dan de knoppen erboven, niet alleen een andere kleur. Deze
   knoppen doen iets anders - ze leggen er iets overheen in plaats van te
   wisselen - en dat verschil moet je kunnen zien zonder de tekst te lezen. */
.laagknop--deel {
	border-radius: 999px;
	border-style: dashed;
}
.laagknop--deel.laagknop--aan { border-style: solid; }

/* Twee legenda's naast elkaar: de natuurwaarde rechts, de deelkaart links. Op
   elkaar zou de ene onvindbaar maken, en je kijkt naar allebei tegelijk. */
.legenda--deel { max-width: 15rem; }
.legenda__eenheid {
	margin-top: .35rem;
	font-size: .75rem;
	color: var(--inkt-zacht);
	line-height: 1.35;
}

@media (max-width: 40rem) {
	/* Op een telefoon passen twee legenda's niet naast elkaar zonder de kaart
	   dicht te leggen. De deelkaartlegenda wordt dan smaller en de tekst kleiner;
	   weglaten kan niet, want zonder legenda zijn de kleuren betekenisloos. */
	.legenda--deel { max-width: 9rem; font-size: .75rem; }
}

/* ------------------------------------------------------- voorbeeld van import */
.voorbeeld {
	padding: 1.5rem;
	border: 2px solid var(--waarde-4);
	border-radius: var(--rond);
	background: var(--vlak);
}
.voorbeeld h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.voorbeeld__bestand { font-size: .9375rem; color: var(--inkt-zacht); }
.voorbeeld .cijfers { margin-top: 1.25rem; }
.voorbeeld__periode { margin-top: 1rem; font-size: .875rem; color: var(--inkt-zacht); }
.voorbeeld__waarschuwing {
	margin-top: 1rem;
	padding: .75rem 1rem;
	border-left: 3px solid var(--waarde-4);
	background: var(--vlak-zacht);
	font-size: .9375rem;
}
.voorbeeld .inlijn { margin-top: 1.25rem; }

input[type="file"] {
	font: inherit;
	font-size: .875rem;
	padding: .5rem;
	border: 1px solid var(--lijn-hard);
	border-radius: 8px;
	background: var(--vlak);
	max-width: 100%;
}

/* -------------------------------------------------------------------- legenda */
/* De legenda staat op de kaart en niet ernaast: wie een vak aanwijst, moet de
   kleur kunnen thuisbrengen zonder zijn blik te verplaatsen. */
.legenda {
	padding: .625rem .75rem;
	border-radius: 8px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 1px 6px rgba(15, 33, 29, .22);
	font-size: .75rem;
	line-height: 1.5;
	color: var(--inkt);
}
.legenda__kop {
	display: block;
	margin-bottom: .375rem;
	font-size: .8125rem;
}
.legenda__regel {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-variant-numeric: tabular-nums;
}
.legenda__vlak {
	flex: 0 0 auto;
	width: 1.125rem;
	height: .875rem;
	border-radius: 2px;
	/* De vakken op de kaart liggen op de topografie, dus de doorzichtigheid van
	   een trede hoort ook in de legenda te staan. Wit eronder, anders wordt de
	   lichtste trede onzichtbaar op het lichte kaartje. */
	box-shadow: inset 0 0 0 1px rgba(15, 33, 29, .12);
	background-color: #fff;
}
.legenda__voet {
	margin-top: .5rem;
	padding-top: .375rem;
	border-top: 1px solid var(--lijn);
	max-width: 11rem;
	font-size: .6875rem;
	color: var(--inkt-zacht);
}

.popup__zacht { color: var(--inkt-zacht); font-size: .8125rem; }

/* ------------------------------------------------------------- laagkeuze */
/* Vier lagen op dezelfde vakken. Knoppen en geen tabbladen: er is er altijd
   precies een actief, en dat moet je kunnen zien zonder te zoeken.

   Niet .laag noemen: dat is op de voorpagina al een van de vier kleurenkaartjes,
   en deze regels wonnen daarvan omdat ze later in het bestand staan. */
.laagkeuze {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	margin-bottom: .75rem;
}
.laagknop {
	font: inherit;
	font-size: .8125rem;
	padding: .4375rem .875rem;
	border: 1px solid var(--lijn-hard);
	border-radius: 999px;
	background: var(--vlak);
	color: var(--inkt-zacht);
	cursor: pointer;
	transition: background .12s, color .12s, border-color .12s;
}
.laagknop:hover { border-color: var(--waarde-4); color: var(--inkt); }
.laagknop--aan,
.laagknop--aan:hover {
	background: var(--waarde-5);
	border-color: var(--waarde-5);
	color: #fff;
}
.laagknop--lijst {
	max-width: 14rem;
	/* De keuzelijst is geen knop; hij mag niet oplichten alsof hij aanstaat,
	   maar hoort er wel bij te horen. */
	cursor: pointer;
}
.laagknop--lijst:focus-visible,
.laagknop:focus-visible { outline: 2px solid var(--waarde-4); outline-offset: 2px; }

/* Tijdens het ophalen van een laag: niet leeg laten vallen, wel laten merken
   dat er iets gebeurt. */
.kaart--bezig { opacity: .55; transition: opacity .15s; }

.kaart__leeg { margin-top: .75rem; }

@media (hover: none) {
	/* Op aanraakschermen blijft :hover na het tikken hangen, en dan lijkt de
	   vorige laag nog half geselecteerd. */
	.laagknop:hover { border-color: var(--lijn-hard); color: var(--inkt-zacht); }
	.laagknop--aan:hover { border-color: var(--waarde-5); color: #fff; }
}

/* ------------------------------------------------------------- icoonsoorten */
/* Vijf soorten met een gezicht. Het accent per kaartje is de kleur van de
   soortgroep op de kaart, dus wie hier de vleermuis in het paars ziet en daarna
   de laag Vleermuizen kiest, ziet dezelfde kleur terug. */
.iconen { margin-top: 2.5rem; }
.iconen__kop { font-size: 1.375rem; letter-spacing: -0.01em; }
.iconen__lead {
	margin-top: .375rem;
	max-width: 60ch;
	color: var(--inkt-zacht);
	font-size: .9375rem;
}
.iconen__rij {
	margin-top: 1.5rem;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.icoon {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	background: var(--vlak);
	box-shadow: var(--schaduw);
}
.icoon__foto {
	display: block;
	width: 100%;
	height: auto;
	/* Vaste verhouding, want het bijsnijden gebeurt al op de server. Bij een
	   foto die niet bijgesneden mocht worden (ND) staat er iets anders in, en
	   dan mag het kaartje meegeven. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--vlak-zacht);
}
.icoon__foto--leeg {
	/* Geen bruikbare foto: dan het rasterpatroon van het beeldmerk in de kleur
	   van de groep, en geen grijs vlak dat op een laadfout lijkt. */
	background-image:
		linear-gradient(45deg, var(--icoonkleur) 25%, transparent 25%, transparent 75%, var(--icoonkleur) 75%),
		linear-gradient(45deg, var(--icoonkleur) 25%, transparent 25%, transparent 75%, var(--icoonkleur) 75%);
	background-size: 24px 24px;
	background-position: 0 0, 12px 12px;
	opacity: .5;
}
.icoon__tekst {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: 1rem 1.125rem 1.125rem;
	border-top: 3px solid var(--icoonkleur);
}
.icoon__groep {
	font-size: .6875rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--inkt-licht);
}
.icoon__naam { font-size: 1.125rem; line-height: 1.25; }
.icoon__wet {
	font-style: italic;
	font-size: .875rem;
	color: var(--inkt-licht);
}
.icoon__omschrijving {
	margin-top: .5rem;
	font-size: .9375rem;
	color: var(--inkt-zacht);
}
.icoon__herkomst {
	margin-top: auto;
	padding-top: .75rem;
	font-size: .6875rem;
	color: var(--inkt-licht);
}

/* De accentkleur per soortgroep. Dezelfde vijf families als de kaartlagen; hier
   telkens de derde trede, want die is verzadigd genoeg voor een lijn van drie
   beeldpunten maar niet zo donker dat hij zwart lijkt. */
.icoon--groen { --icoonkleur: #7BA05B; }
.icoon--goud  { --icoonkleur: #C9A227; }
.icoon--staal { --icoonkleur: #6E8FAF; }
.icoon--paars { --icoonkleur: #A2678A; }
.icoon--grijs { --icoonkleur: #8A8F8B; }

/* De exoten hebben geen soortgroep maar een eigen kleur, dezelfde als hun
   deelkaart. Twee rijen kaarten onder elkaar met dezelfde accenten zouden als
   een vervolg lezen in plaats van als een andere vraag. */
.icoon--rood  { --icoonkleur: #8C2F22; }

/* ------------------------------------------------- icoonsoorten in het beheer */
.icoonbeheer {
	display: grid;
	gap: 1px;
	margin-top: 1.25rem;
	background: var(--lijn);
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	overflow: hidden;
}
.icoonbeheer__rij {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	padding: .875rem 1rem;
	background: var(--vlak);
}
.icoonbeheer__foto {
	flex: 0 0 auto;
	width: 84px;
	height: 63px;
	border-radius: 6px;
	object-fit: cover;
	background: var(--vlak-zacht);
}
.icoonbeheer__foto--leeg { border: 1px dashed var(--lijn-hard); }
.icoonbeheer__wat {
	flex: 1 1 14rem;
	display: flex;
	flex-direction: column;
	gap: .125rem;
}
.icoonbeheer__bij { font-size: .8125rem; color: var(--inkt-licht); }
.icoonbeheer__bij--let { color: #8A5A1E; }
.icoonbeheer__kiezen {
	flex: 1 1 20rem;
	display: flex;
	gap: .5rem;
	align-items: center;
}
.icoonbeheer__kiezen select {
	flex: 1;
	min-width: 0;   /* zonder dit duwt een lange soortnaam de knop van de rij af */
	font-size: .875rem;
	padding: .45rem .5rem;
}

/* -------------------------------------------------- verspreidingskaartjes */
/* Vijf losse kaartjes, hetzelfde kader en dezelfde schaal, alleen de stippen
   verschillen. Zo zijn ze onderling te vergelijken - dat is het hele punt van
   kleine kaartjes naast elkaar. */
.icoon__kaartje {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: .875rem;
	padding: .5rem .625rem;
	border: 1px solid var(--lijn);
	border-radius: 8px;
	background: var(--vlak-zacht);
	color: var(--inkt-zacht);
	text-decoration: none;
	transition: border-color .12s, background .12s;
}
.icoon__kaartje:hover,
.icoon__kaartje:focus-visible {
	border-color: var(--icoonkleur);
	background: var(--vlak);
}
.icoon__kaartjebij { font-size: .75rem; line-height: 1.35; }

.minikaart {
	flex: 0 0 auto;
	width: 76px;
	height: auto;
	max-height: 76px;
	overflow: visible;
}
/* Het silhouet van de gemeente als rustige ondergrond, de grens als dunne lijn
   eroverheen. Zonder die lijn lopen de vakken aan de rand zo de witruimte in. */
.minikaart__gemeente { fill: #DCE2DD; stroke: none; }
.minikaart__rand {
	fill: none;
	stroke: var(--inkt-licht);
	stroke-width: 40;      /* meters, want de tekening staat in RD */
	stroke-linejoin: round;
}

@media (hover: none) {
	/* Anders blijft het kaartje na het tikken opgelicht staan. */
	.icoon__kaartje:hover { border-color: var(--lijn); background: var(--vlak-zacht); }
}

/* ----------------------------------------------------------- wijk en buurt */
/* De tekst bij een gebied staat naast de kaart en niet in een ballonnetje: hij
   is te lang voor een popup en moet te selecteren zijn om in een raadsvoorstel
   of rapport te plakken. */
.gebiedspaneel {
	position: relative;
	margin-top: .875rem;
	padding: 1rem 2.5rem 1rem 1.125rem;
	border: 1px solid var(--lijn);
	border-left: 3px solid var(--waarde-4);
	border-radius: 8px;
	background: var(--vlak);
}
.gebiedspaneel__naam { font-size: 1.0625rem; margin-bottom: .375rem; }
.gebiedspaneel__tekst {
	font-size: .9375rem;
	color: var(--inkt-zacht);
	max-width: 70ch;
}
.gebiedspaneel__dicht {
	position: absolute;
	top: .5rem;
	right: .5rem;
	width: 1.75rem;
	height: 1.75rem;
	border: 0;
	border-radius: 6px;
	background: transparent;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--inkt-licht);
	cursor: pointer;
}
.gebiedspaneel__dicht:hover { background: var(--vlak-zacht); color: var(--inkt); }

/* De verdeling als balk. Drie percentages naast elkaar lezen kost meer moeite
   dan een balk zien; de getallen staan er alleen in als het stuk breed genoeg
   is om ze te bevatten. */
.gebiedspaneel__balk {
	display: flex;
	margin-top: .875rem;
	height: 1.375rem;
	border-radius: 4px;
	overflow: hidden;
	font-size: .6875rem;
	font-variant-numeric: tabular-nums;
}
.gebiedsbalk {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	color: #fff;
	white-space: nowrap;
}
.gebiedsbalk--groen   { background: #4E8C6B; }
.gebiedsbalk--water   { background: #6E8FAF; }
.gebiedsbalk--bebouwd { background: #8C7A6B; }
.gebiedsbalk--verhard { background: #A8A29B; }
.gebiedsbalk--overig  { background: #C9C4BD; color: var(--inkt); }

/* Erf en tuin: een eigen kleur, tussen groen en bebouwd in. De BGT legt niet
   vast of daar beplanting of bestrating ligt, dus het is geen van beide. */
.gebiedsbalk--erf { background: #9FB08A; }

/* De naam van een wijk of buurt, midden op het vlak. Geen kader eromheen: dat
   zou over de buurgrens heen vallen en de kaart onrustig maken. Een donkere gloed
   in plaats daarvan, zodat de naam leesbaar blijft op zand én op donkergroen. */
.leaflet-tooltip.gebiedsnaam {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	font-size: .75rem;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	text-shadow:
		0 0 3px rgba(15, 33, 29, .95),
		0 0 6px rgba(15, 33, 29, .8),
		0 1px 2px rgba(15, 33, 29, .9);
}
.leaflet-tooltip.gebiedsnaam::before { display: none; }   /* het pijltje weg */

/* ------------------------------------------------------- buurten vergeleken */
.vergelijking { margin-top: 2.5rem; }

/* Negen kolommen passen niet op een telefoon en moeten dat ook niet proberen.
   De tabel schuift binnen zijn eigen kader; de pagina zelf blijft staan. */
.vergelijking__rol {
	margin-top: 1.25rem;
	overflow-x: auto;
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
}
.vergelijking__tabel {
	width: 100%;
	border-collapse: collapse;
	font-size: .875rem;
	background: var(--vlak);
}
.vergelijking__tabel th,
.vergelijking__tabel td {
	padding: .5rem .75rem;
	text-align: left;
	white-space: nowrap;
	border-bottom: 1px solid var(--lijn);
}
.vergelijking__tabel thead th {
	font-size: .6875rem;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--inkt-licht);
	vertical-align: bottom;
	background: var(--vlak-zacht);
	position: sticky;
	top: 0;
}
.vergelijking__tabel tbody tr:last-child th,
.vergelijking__tabel tbody tr:last-child td { border-bottom: 0; }
.vergelijking__tabel tbody th { font-weight: 600; }
.vergelijking__tabel .getal {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.vergelijking__tabel .sterk { font-weight: 600; }

/* De groenste buurt eruit lichten. Eén cel, niet de hele rij: het gaat om die
   ene vergelijking en niet om een winnaar over de hele linie. */
.vergelijking__tabel .hoogst {
	background: #E4EFE6;
	font-weight: 600;
	color: #17513E;
}

/* De hoogste drie per kolom, in drie sterktes. Neutraal van kleur en niet groen:
   de markering zegt "hoogste", niet "beste" - bij bebouwd is de hoogste geen
   prestatie. Alleen de koploper wordt vet, anders gaat de hele tabel schreeuwen. */
.vergelijking__tabel .top--1 {
	background: #DCE3DE;
	font-weight: 600;
	color: var(--inkt);
}
.vergelijking__tabel .top--2 { background: #E8EDE9; }
.vergelijking__tabel .top--3 { background: #F2F5F3; }

/* Niets gevonden. Geen treffer, maar wel een antwoord: zonder deze regel klapt
   de lijst dicht en lijkt het zoeken stuk. */
.zoek__niets {
	padding: .75rem .875rem;
	font-size: .875rem;
	color: var(--inkt-zacht);
}

/* ------------------------------------------------------------- bedienpanelen

   Voorheen stonden de kaartlagen als twee rijen losse pillen boven de kaart.
   Functioneel klopte dat, maar er was niet aan te zien dat de bovenste rij het
   onderwerp is en de onderste de context die je erover legt. Met tien
   deelkaarten erbij werd het een lijst van vijftien woorden waar de lezer zelf
   ordening in moest aanbrengen.

   Nu: twee omkaderde panelen met een naam en een zin. Dat kost twee regels en
   het scheelt de lezer een raadsel. */

.paneel {
	border: 1px solid var(--lijn);
	border-radius: .625rem;
	padding: .75rem .875rem .875rem;
	margin-bottom: .75rem;
	background: var(--vlak);
}

/* Het onderste paneel iets ingetogener dan het bovenste: de deelkaarten zijn
   context en geen onderwerp, en dat mag je zien voordat je iets aanklikt. */
.paneel--deel { background: transparent; }

.paneel__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .625rem;
	margin-bottom: .625rem;
}
.paneel__naam {
	font-size: .9375rem;
	font-weight: 600;
	margin: 0;
	color: var(--inkt);
}
.paneel__uitleg {
	font-size: .8125rem;
	color: var(--inkt-zacht);
	margin: 0;
}

.paneel .laagkeuze { margin-bottom: 0; }

/* Het streepje tussen de soortenlagen en het optellen per gebied. */
.laagkeuze__scheiding {
	width: 1px;
	align-self: stretch;
	margin: .125rem .3125rem;
	background: var(--lijn-hard);
}

.deelkeuze {
	display: flex;
	flex-wrap: wrap;
	gap: .875rem 1.5rem;
}
.deelgroep { flex: 1 1 14rem; }
.deelgroep__kop {
	display: block;
	font-size: .6875rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--inkt-zacht);
	margin-bottom: .375rem;
}
.deelgroep__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
}

/* Het kleurstaaltje op een deelkaartknop. Drie streepjes uit het echte palet,
   zodat de lezer de laag terugkent zodra hij hem op de kaart ziet - en vooraf
   weet of hij bij groen of bij rood uitkomt. */
.laagknop--deel {
	display: inline-flex;
	align-items: center;
	gap: .4375rem;
}
.staal {
	display: inline-flex;
	border-radius: 2px;
	overflow: hidden;
	flex: none;
	/* Een lichte rand, anders verdwijnt de lichtste tint van een palet tegen de
	   witte knop en lijkt het staaltje uit twee kleuren te bestaan. */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.staal i {
	display: block;
	width: .3125rem;
	height: .75rem;
}
/* Op een aangeklikte knop is de achtergrond donker; dan hoort de rand licht. */
.laagknop--aan .staal { box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); }

/* De regel onder de knoppen die zegt wat er nu op de kaart staat. Leeg is hij
   onzichtbaar, zodat hij geen ruimte inneemt als er niets te melden valt. */
.watziet {
	font-size: .8125rem;
	color: var(--inkt-zacht);
	margin: 0 0 .5rem;
	min-height: 1.2em;
}
.watziet strong { color: var(--inkt); font-weight: 600; }
.watziet:empty { display: none; }

@media (max-width: 40rem) {
	.deelgroep { flex-basis: 100%; }
	.paneel { padding: .625rem .75rem .75rem; }
}

/* Het kleurstaaltje ook op de voorpagina, groter: daar staat het boven een
   tegel en niet naast een knop, en moet het van verder weg te zien zijn. */
.staal--groot { margin-bottom: .625rem; border-radius: 3px; }
.staal--groot i { width: 1.5rem; height: .5rem; }
.tegel .staal--groot { display: inline-flex; }

/* Een tweede, ondergeschikte link in dezelfde cel. */
.micro { font-size: .8125rem; color: var(--inkt-zacht); }

/* Het merk op de kaart. Linksonder, want rechtsonder staat de verplichte
   vermelding van het Kadaster en die mag niet weggedrukt worden.

   Zacht van kleur en klein: het hoort leesbaar te zijn op een schermafdruk en
   weg te vallen als je naar de kaart kijkt. Geen muisgebeurtenissen, anders
   kun je er niet doorheen klikken op de vakken eronder. */
.kaartmerk {
	background: rgba(255, 255, 255, .72);
	color: #4C5654;
	font-size: .6875rem;
	letter-spacing: .02em;
	padding: .125rem .375rem;
	border-radius: 3px;
	pointer-events: none;
	user-select: none;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}

/* ------------------------------------------------- een andere foto kiezen
   Een raster van kandidaten uit Wikimedia en Naturalis. Vierkante uitsnedes,
   want dat is ook wat er straks op de pagina komt: wie hier een liggend beeld
   kiest omdat het er hier mooi uitziet, krijgt daarna alsnog een uitsnede. */
.fotokeuze { list-style: none; margin: 1.5rem 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.fotokeuze__optie { border: 1px solid var(--lijn); border-radius: .4rem; padding: .5rem;
	display: flex; flex-direction: column; gap: .4rem; }
.fotokeuze__optie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .25rem; }
.fotokeuze__bij { font-size: .75rem; color: var(--zacht); margin: 0; flex: 1; }
.fotokeuze__nu { display: flex; gap: 1rem; align-items: flex-start; margin: 1rem 0; }
.fotokeuze__nu img { border-radius: .25rem; object-fit: cover; }
.fotokeuze__los { margin: 1.5rem 0; }