/**
 * dualband Media
 *
 * Alles staat achter .db-media, zodat de plugin nooit buiten de eigen
 * templates iets overschrijft.
 *
 * ── Huisstijl ────────────────────────────────────────────────────────────
 * De kleuren komen overeen met de --ct-variabelen van de dealpagina's
 * (deal-grid-builder, assets/ct-deal.css), zodat foto's en deals dezelfde
 * visuele taal spreken.
 *
 * Die --ct-variabelen staan daar op .ct-deal-wrap en zijn dus niet globaal
 * beschikbaar; daarom staan de waarden hier nog een keer. Wijzig je ze daar,
 * pas ze dan hier ook aan.
 */

.db-media {
	/* Gelijk aan --ct-brand / --ct-brand-dark */
	--db-blauw: #1a56db;
	--db-blauw-donker: #1040b0;
	--db-blauw-tekst: #dbe4f8;
	--db-blauw-muted: #a9bff0;

	/* Gelijk aan --ct-accent */
	--db-oranje: #f97316;
	--db-oranje-donker: #ea580c;

	/* Gelijk aan --ct-surface / --ct-border / --ct-text / --ct-text-muted */
	--db-pagina: #f8fafc;
	--db-kaart: #ffffff;
	--db-tekst: #0f172a;
	--db-body: #334155;
	--db-muted: #64748b;
	--db-rand: #e2e8f0;
	--db-rand-sterk: #cbd5e1;

	/* Gelijk aan --ct-green, voor de licentievinkjes */
	--db-groen: #16a34a;

	/* Gelijk aan --ct-radius / --ct-shadow */
	--db-radius: 8px;
	--db-radius-kaart: 14px;
	--db-schaduw: 0 4px 24px rgba(15, 23, 42, 0.08);

	/* Zelfde tekstbreedte als .ct-deal-page op de dealpagina's. */
	--db-breedte: 860px;

	color: var(--db-tekst);
	line-height: 1.6;
}

/*
 * Bewust géén achtergrondkleur op .db-media, net als .ct-deal-wrap: het thema
 * levert de paginaachtergrond al. Een eigen achtergrond geeft een zichtbaar
 * blok binnen het blok. --db-pagina wordt nog wel gebruikt voor het
 * snippet-vlak en de kaartbeelden.
 */

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

/*
 * Zelfde tekstbreedte als de dealpagina's. Wil je de volle themacontainer,
 * zet --db-breedte dan op none.
 */
.db-wrap {
	max-width: var(--db-breedte);
	margin: 0 auto;
	padding: 0 0 48px;
}

/* Het overzicht mag breder: een raster van vier heeft meer ruimte nodig dan
   een leeskolom. */
.db-wrap--breed {
	max-width: 1180px;
}

.db-media .db-overzicht__pagina-inhoud {
	margin: 0 0 16px;
	font-size: 15px;
	color: var(--db-body);
}



/*
 * Thema's zetten geregeld text-transform of letter-spacing op koppen en
 * knoppen. De titel hoort te staan zoals hij is ingevoerd.
 */
.db-media h1,
.db-media h2,
.db-media h3,
.db-media .db-knop,
.db-media .db-pil {
	text-transform: none;
	letter-spacing: normal;
	font-style: normal;
}

/* The7 kleurt koppen in de content blauw; hier hoort de inktkleur. */
.db-media h1,
.db-media h2,
.db-media h3 {
	color: var(--db-tekst);
}

/* ── Broodkruimel ──────────────────────────────────────────────────────── */

.db-kruimel {
	font-size: 12px;
	color: var(--db-muted);
	margin-bottom: 12px;
}

.db-kruimel a {
	color: var(--db-muted);
	text-decoration: none;
}

.db-kruimel a:hover,
.db-kruimel a:focus {
	text-decoration: underline;
}

/*
 * Het laatste niveau is de fototitel, en die kan lang zijn. Met flex krimpt
 * alleen dat laatste stuk; de rest van het pad blijft heel. De volledige titel
 * blijft in de HTML staan — schermlezers en zoekmachines krijgen hem compleet,
 * alleen in beeld kapt hij af.
 */
.db-media .db-kruimel {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

.db-media .db-kruimel > * {
	flex: 0 0 auto;
}

.db-media .db-kruimel [aria-current="page"] {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ── Kop: broodkruimel links, taalschakelaar rechts ────────────────────── */

.db-media .db-kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 12px;
}

.db-media .db-kop .db-kruimel {
	margin-bottom: 0;
}

.db-media .db-taal {
	flex-shrink: 0;
}

.db-media .db-taal__knop {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border: 1px solid var(--db-rand);
	border-radius: 999px;
	background: var(--db-kaart);
	color: var(--db-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.db-media .db-taal__knop:hover,
.db-media .db-taal__knop:focus {
	border-color: var(--db-rand-sterk);
	color: var(--db-blauw);
	text-decoration: none;
}

.db-media .db-taal__knop svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	opacity: 0.55;
}

/* ── Kaart ─────────────────────────────────────────────────────────────── */

/*
 * De pagina van het thema is wit en de kaart ook, dus de rand doet het werk.
 * De schaduw geeft alleen diepte; zonder rand blijft de kaart te vaag.
 */
.db-kaart {
	background: var(--db-kaart);
	border: 1px solid var(--db-rand);
	border-radius: var(--db-radius-kaart);
	box-shadow: var(--db-schaduw);
	padding: 24px;
	margin-bottom: 16px;
}

.db-kaart h1 {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 12px;
}

.db-intro {
	font-size: 16px;
	color: var(--db-body);
}

.db-kaart h2 {
	font-size: 19px;
	font-weight: 600;
	margin: 0 0 14px;
}

.db-kaart p {
	font-size: 15px;
	color: var(--db-body);
	margin: 0 0 12px;
}

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

.db-kaart ul,
.db-kaart ol {
	margin: 0 0 12px;
	padding-left: 20px;
	font-size: 15px;
	color: var(--db-body);
}

.db-kaart li {
	margin-bottom: 6px;
}

/* ── Kop van het overzicht ─────────────────────────────────────────────── */

/*
 * Geen blok om de kop: op een fotobibliotheek horen de foto's bovenaan. De
 * introtekst is naar het eerste contentblok onder het raster verhuisd.
 */
.db-media .db-overzicht__kop {
	margin: 0 0 16px;
}

.db-media .db-overzicht__kop h1 {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

/* Eigen kaart boven het raster: filteren is gereedschap, geen inleiding. */
.db-media .db-filterkaart {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	flex-wrap: wrap;
	background: var(--db-kaart);
	border: 1px solid var(--db-rand);
	border-radius: var(--db-radius-kaart);
	box-shadow: var(--db-schaduw);
	padding: 16px 20px;
	margin: 0 0 4px;
}

.db-media .db-overzicht__meta {
	font-size: 13px;
	color: var(--db-muted);
	margin: 0;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/*
 * Smalle leeskolom onder een breed raster. De kaart is even breed als zijn
 * tekst; een brede kaart met smalle tekst laat een gat vallen.
 */
.db-media .db-overzicht__onder {
	margin-top: 34px;
}

.db-media .db-overzicht__inhoud {
	max-width: 820px;
	min-width: 0;
}

/* Met zijbalk bepaalt het raster de breedte van de leeskolom. */
.db-media .db-overzicht__onder--zijbalk {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 28px;
	align-items: start;
}

.db-media .db-overzicht__onder--zijbalk .db-overzicht__inhoud {
	max-width: none;
}

/* ── De zijbalk ────────────────────────────────────────────────────────── */

/*
 * Sticky breekt zodra een voorouder overflow heeft, en thema's zetten dat
 * geregeld op hun containers. Hieronder maken we alleen de voorouders van
 * deze sectie weer doorzichtig voor scroll — de rest van het thema blijft
 * ongemoeid.
 *
 * html en body zijn bewust uitgesloten: daar staat vaak overflow-x: hidden
 * om horizontaal scrollen tegen te gaan, en dat willen we niet weghalen.
 */
:not(html):not(body):has(> .db-media--overzicht),
:not(html):not(body):has(> * > .db-media--overzicht),
:not(html):not(body):has(> * > * > .db-media--overzicht),
:not(html):not(body):has(> * > * > * > .db-media--overzicht) {
	overflow: visible;
}

.db-media .db-zijbalk {
	position: sticky;
	top: 24px;
	display: grid;
	gap: 16px;
	min-width: 0;
	/* Is de zijbalk hoger dan het scherm, dan scrollt hij zelf mee in plaats
	   van vast te lopen. */
	max-height: calc(100vh - 48px);
	overflow-y: auto;
}

.db-media .db-zijblok {
	padding: 20px;
	margin: 0;
}

.db-media .db-zijblok h2 {
	font-size: 15px;
	margin: 0 0 14px;
}

/* Zo werkt het */
.db-media .db-stappen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	counter-reset: none;
}

.db-media .db-stappen li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--db-body);
}

.db-media .db-stappen__nr {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--db-oranje);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	margin-top: 1px;
}

/* Nieuwste foto's */
.db-media .db-nieuwste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.db-media .db-nieuwste li {
	margin: 0;
}

.db-media .db-nieuwste a {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--db-tekst);
}

.db-media .db-nieuwste__beeld {
	flex: 0 0 auto;
	width: 76px;
	aspect-ratio: 4 / 3;
	border-radius: var(--db-radius);
	overflow: hidden;
	background: var(--db-pagina);
	line-height: 0;
}

.db-media .db-nieuwste__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.db-media .db-nieuwste__titel {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

.db-media .db-nieuwste a:hover .db-nieuwste__titel {
	color: var(--db-oranje);
}

/* Zelfde streep als het bronvermeldingsblok op de fotopagina: hier valt iets
   te doen. */
.db-media .db-slot {
	border-left: 3px solid var(--db-oranje);
}

.db-media .db-slot a {
	color: var(--db-oranje);
	font-weight: 600;
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.db-media .db-faq h3 {
	font-size: 15px;
	font-weight: 600;
	margin: 20px 0 6px;
	color: var(--db-tekst);
}

.db-media .db-faq h3:first-of-type {
	margin-top: 0;
}

.db-media .db-faq p {
	font-size: 14px;
	margin: 0;
}

/* ── Filterbalk als werkbalk ───────────────────────────────────────────── */

/*
 * Bewust geen kaart eromheen: dit is gereedschap, geen inhoud. Een hairline
 * scheidt hem van het raster.
 */
.db-media .db-filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.db-media .db-pil {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 100px;
	border: 1px solid var(--db-rand-sterk);
	color: var(--db-body);
	background: none;
	cursor: pointer;
}

.db-media .db-pil:hover {
	border-color: var(--db-muted);
}

/* Het aantal laat zien dat er wat te halen valt. */
.db-media .db-pil__aantal {
	font-size: 11px;
	font-weight: 700;
	color: var(--db-muted);
	background: var(--db-pagina);
	border-radius: 100px;
	padding: 2px 7px;
}

.db-media .db-pil.is-actief {
	background: var(--db-oranje);
	border-color: var(--db-oranje);
	color: #fff;
}

.db-media .db-pil.is-actief .db-pil__aantal {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

.db-media .db-filter-status {
	font-size: 13px;
	color: var(--db-muted);
	margin: 14px 0 0;
}

.db-media .db-filter-status:empty {
	display: none;
}

/* ── Het raster ────────────────────────────────────────────────────────── */

/*
 * Metselwerk met kolommen: elke foto houdt zijn eigen verhouding. Bij een
 * fotobibliotheek is de vorm van de opname informatie, geen ruis.
 *
 * Het aantal kolommen wordt begrensd door het aantal foto's, anders verdeelt
 * de browser bijvoorbeeld vier foto's over drie kolommen als 2+2+0.
 */
.db-media .db-raster {
	columns: 4 240px;
	column-gap: 16px;
	margin: 22px 0 0;
}

.db-media .db-raster--kolommen-1 {
	columns: 1;
	max-width: 420px;
}

.db-media .db-raster--kolommen-2 {
	columns: 2 240px;
	max-width: 720px;
}

.db-media .db-raster--kolommen-3 {
	columns: 3 240px;
	max-width: 1080px;
}

/* ── De fotokaart ──────────────────────────────────────────────────────── */

.db-media .db-kaart-foto {
	position: relative;
	display: block;
	break-inside: avoid;
	margin: 0 0 16px;
	border-radius: var(--db-radius-kaart);
	overflow: hidden;
	background: var(--db-pagina);
	line-height: 0;
	transition: transform .25s ease, box-shadow .25s ease;
}

.db-media .db-kaart-foto:hover,
.db-media .db-kaart-foto:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(15, 23, 42, .20);
}

.db-media .db-kaart-foto__link {
	display: block;
	line-height: 0;
}

.db-media .db-kaart-foto img {
	width: 100%;
	height: auto;
	display: block;
	/* Traag en met een zachte curve: een snelle zoom oogt nerveus. */
	transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}

.db-media .db-kaart-foto:hover img,
.db-media .db-kaart-foto:focus-within img {
	transform: scale(1.06);
}

/*
 * De overlay laat kliks door naar de fotopagina; alleen de knop vangt ze af.
 * Zonder dat zou de hele tegel niet meer klikbaar zijn.
 */
.db-media .db-kaart-foto__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 14px 16px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .22s ease;
	background: linear-gradient(to top, rgba(15, 23, 42, .78) 0%, rgba(15, 23, 42, .38) 40%, rgba(15, 23, 42, 0) 68%);
}

.db-media .db-kaart-foto:hover .db-kaart-foto__overlay,
.db-media .db-kaart-foto:focus-within .db-kaart-foto__overlay {
	opacity: 1;
}

/* Volle breedte: de knop staat boven, dus hier is niets meer in de weg. */
.db-media .db-kaart-foto__titel {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	text-shadow: 0 1px 4px rgba(15, 23, 42, .55);
	transform: translateY(6px);
	transition: transform .22s ease;
}

.db-media .db-kaart-foto:hover .db-kaart-foto__titel,
.db-media .db-kaart-foto:focus-within .db-kaart-foto__titel {
	transform: translateY(0);
}

.db-media .db-kaart-foto__knop {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--db-radius);
	background: rgba(255, 255, 255, .95);
	color: var(--db-tekst);
	text-decoration: none;
	box-shadow: 0 1px 6px rgba(15, 23, 42, .22);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .22s ease, transform .22s ease, background-color .15s ease, color .15s ease;
}

.db-media .db-kaart-foto:hover .db-kaart-foto__knop,
.db-media .db-kaart-foto:focus-within .db-kaart-foto__knop {
	opacity: 1;
	transform: translateY(0);
}

.db-media .db-kaart-foto__knop:hover,
.db-media .db-kaart-foto__knop:focus {
	background: var(--db-oranje);
	color: #fff;
}

.db-media .db-kaart-foto__knop svg {
	width: 16px;
	height: 16px;
}

.db-media .db-kaart-foto[hidden] {
	display: none;
}

/* Gerelateerde foto's onder aan de fotopagina: wel bijgesneden, anders wordt
   die ene rij rommelig. */
.db-media .db-grid--klein {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
}

.db-media .db-grid--klein .db-kaart-foto {
	margin: 0;
}

.db-media .db-kaart-foto--compact .db-kaart-foto__link {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.db-media .db-kaart-foto--compact img {
	height: 100%;
	object-fit: cover;
}

/* ── De foto op de detailpagina ────────────────────────────────────────── */

/*
 * De foto is het onderwerp: geen kaart eromheen, wel dezelfde rand en radius
 * als de rest, zodat hij als los element op de pagina ligt.
 */
.db-foto {
	position: relative;
	margin: 0 0 14px;
	border: 1px solid var(--db-rand);
	border-radius: var(--db-radius-kaart);
	overflow: hidden;
	background: var(--db-pagina);
	box-shadow: var(--db-schaduw);
	line-height: 0;
}

.db-foto__afbeelding {
	width: 100%;
	height: auto;
	display: block;
}

/*
 * Het label ligt op de foto en niet naast de downloadknop: naast die knop
 * leest het als een tweede knop en concurreert het met de enige actie die
 * telt.
 */
.db-foto__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, .95);
	color: var(--db-tekst);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 8px 13px;
	border-radius: 100px;
	box-shadow: 0 1px 8px rgba(15, 23, 42, .16);
}

.db-foto__badge svg {
	width: 13px;
	height: 13px;
	color: var(--db-groen);
}

/* ── De downloadbalk: het zwaartepunt van de pagina ────────────────────── */

.db-download {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	background: var(--db-kaart);
	border: 1px solid var(--db-rand);
	border-radius: var(--db-radius-kaart);
	box-shadow: var(--db-schaduw);
	padding: 18px 20px;
	margin-bottom: 26px;
}

.db-download__hoofd {
	flex: 1 1 240px;
	min-width: 0;
}

.db-download__titel {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 2px;
}

.db-download__sub {
	font-size: 13px;
	color: var(--db-muted);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* ── Licentievinkjes ───────────────────────────────────────────────────── */

.db-media .db-check {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.db-media .db-check li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--db-body);
	margin: 0;
}

.db-media .db-check svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	margin-top: 4px;
	color: var(--db-groen);
}

/* Vrije tekst onder de vinkjes, met wat lucht ertussen. */
.db-media .db-aanvulling {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--db-rand);
}

.db-media .db-check li.is-niet,
.db-media .db-check li.is-niet svg {
	color: var(--db-muted);
}

/* ── Knoppen ───────────────────────────────────────────────────────────── */

.db-knoppen {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.db-knop {
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	padding: 14px 24px;
	border-radius: var(--db-radius);
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	line-height: 1.2;
}

.db-knop svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
}

/* De gloed maakt dit zichtbaar de primaire actie van de pagina. */
.db-knop--primair {
	background: var(--db-oranje);
	color: #fff;
	box-shadow: 0 2px 12px rgba(249, 115, 22, .38);
}

.db-knop--primair:hover,
.db-knop--primair:focus {
	background: var(--db-oranje-donker);
	color: #fff;
}

.db-knop--secundair {
	background: none;
	border-color: var(--db-rand-sterk);
	color: var(--db-body);
	font-size: 14px;
	padding: 13px 18px;
}

.db-knop--secundair:hover,
.db-knop--secundair:focus {
	border-color: var(--db-muted);
	color: var(--db-tekst);
}

.db-knop--blauw {
	background: var(--db-blauw);
	color: #fff;
	font-size: 13px;
	padding: 10px 18px;
}

.db-knop--blauw:hover,
.db-knop--blauw:focus {
	background: var(--db-blauw-donker);
	color: #fff;
}

.db-knop--klein {
	font-size: 13px;
	padding: 10px 18px;
}

/* ── Bronvermeldingsblok ───────────────────────────────────────────────── */

/*
 * Teruggebracht tot de kern: instructie, regel, kopieerknop. De oranje streep
 * markeert dat hier iets te doen valt, zonder te concurreren met de download.
 */
.db-credit {
	border-left: 3px solid var(--db-oranje);
}

.db-credit__uitleg {
	font-size: 13px;
	color: var(--db-muted);
	margin: 10px 0 0;
}

/*
 * De ruwe HTML tonen we niet — de bezoeker ziet de regel zoals hij eruit komt
 * te zien, met de kopieerknop ernaast. Gekopieerd wordt wel de HTML.
 */
/*
 * De kopieerknop staat tegen de tekst aan in plaats van tegen de rand: zo is
 * meteen duidelijk waar hij bij hoort.
 */
.db-credit__regel {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--db-pagina);
	border: 1px solid var(--db-rand);
	border-radius: var(--db-radius);
	padding: 10px 12px 10px 16px;
}

.db-credit__tekst {
	flex: 0 1 auto;
	min-width: 0;
	font-size: 14px;
	color: var(--db-body);
	overflow-wrap: anywhere;
}

.db-credit__tekst a {
	color: var(--db-oranje);
	font-weight: 600;
}

.db-credit__kopieer {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--db-rand-sterk);
	border-radius: var(--db-radius);
	background: var(--db-kaart);
	color: var(--db-muted);
	cursor: pointer;
}

.db-credit__kopieer:hover,
.db-credit__kopieer:focus {
	color: var(--db-tekst);
	border-color: var(--db-muted);
}

.db-credit__kopieer.is-gekopieerd {
	color: #fff;
	background: var(--db-oranje);
	border-color: var(--db-oranje);
}

.db-credit__kopieer svg {
	width: 17px;
	height: 17px;
}

.db-credit__melding {
	font-size: 13px;
	color: var(--db-oranje);
	font-weight: 600;
	margin: 10px 0 0;
	min-height: 1.2em;
}

/*
 * Zonder melding neemt de regel geen ruimte in. Hij stond er eerst altijd, om
 * te voorkomen dat de kaart een sprongetje maakt zodra "Gekopieerd" verschijnt
 * — maar dat kostte onderaan elke kaart een strook wit voor een tekst die maar
 * twee seconden te zien is. De knop kleurt bij het kopiëren al oranje, dus de
 * bevestiging is er ook zonder deze regel.
 *
 * Het blijft een aria-live-gebied: een schermlezer leest de melding voor zodra
 * hij verschijnt, en display:none op een leeg element verandert daar niets aan.
 */
.db-credit__melding:empty {
	display: none;
}

/* Verbergt tekst die alleen voor schermlezers is, mocht het thema dit niet al doen. */
.db-media .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── Tabel ─────────────────────────────────────────────────────────────── */

.db-tabel {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.db-tabel td {
	padding: 10px 0;
	border-bottom: 1px solid var(--db-rand);
}

.db-tabel tr:last-child td {
	border-bottom: none;
}

.db-tabel__label {
	color: var(--db-muted);
}

.db-tabel__waarde {
	text-align: right;
}

.db-link {
	color: var(--db-oranje);
	text-decoration: none;
	font-weight: 600;
}

.db-link:hover,
.db-link:focus {
	text-decoration: underline;
}

.db-klein {
	font-size: 11px;
	font-weight: 600;
	color: var(--db-muted);
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--db-rand);
	line-height: 1.55;
}

/* ── Over deze foto ────────────────────────────────────────────────────── */

.db-over a {
	color: var(--db-oranje);
	font-weight: 600;
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.db-faq h3 {
	font-size: 15px;
	font-weight: 600;
	margin: 20px 0 6px;
}

.db-faq h3:first-of-type {
	margin-top: 0;
}

.db-faq p {
	font-size: 14px;
	color: var(--db-body);
	margin: 0;
}

/* ── Terug naar het overzicht ──────────────────────────────────────────── */

.db-terug {
	margin: 24px 0 0;
}

/* ── Toegankelijkheid en klein scherm ──────────────────────────────────── */

.db-media :focus-visible {
	outline: 2px solid var(--db-oranje);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.db-kaart {
		padding: 18px;
	}

	.db-media .db-raster,
	.db-media .db-raster--kolommen-2,
	.db-media .db-raster--kolommen-3 {
		columns: 2 140px;
		column-gap: 12px;
		max-width: none;
	}

	.db-media .db-raster--kolommen-1 {
		max-width: none;
	}

	.db-media .db-kaart-foto {
		margin-bottom: 12px;
	}

	.db-media .db-overzicht__onder--zijbalk {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.db-media .db-zijbalk {
		position: static;
	}

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

@media (prefers-reduced-motion: reduce) {
	.db-media .db-kaart-foto__dl {
		transition: none;
	}
}