/* ==========================================================================
   diy-gids.nl
   Werkplaats en blauwdruk: neutrale ondergrond, materiaalkleur als accent.
   Alles wat kleur nodig heeft haalt die uit --cluster, zodat een component
   zich vanzelf voegt naar het onderwerp waar de bezoeker in zit.
   ========================================================================== */

@font-face {
	font-family: "Inter";
	src: url("../fonts/InterVariable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-display: swap;
	font-style: normal;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--papier);
	color: var(--inkt);
	font-family: var(--tekst);
	font-size: var(--t-m);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "cv05" 1, "ss03" 1;
}

h1, h2, h3, h4 {
	font-family: var(--kop);
	line-height: 1.18;
	letter-spacing: -0.024em;
	margin: 0 0 var(--r-3);
	font-weight: 800;
	text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, var(--t-4xl)); }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.2vw, var(--t-2xl)); margin-top: var(--r-7); }
h3 { font-size: var(--t-xl); margin-top: var(--r-5); font-weight: 700; }
h4 { font-size: var(--t-l); margin-top: var(--r-4); font-weight: 700; }

p, ul, ol, table, figure { margin: 0 0 var(--r-4); }

a {
	color: var(--primair);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	transition: color var(--soepel);
}
a:hover { color: var(--primair-donker); }

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

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

hr { border: 0; border-top: 1px solid var(--lijn); margin: var(--r-6) 0; }

strong { font-weight: 650; }

/* Skiplink */
.dg-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--inkt);
	color: var(--papier);
	padding: var(--r-3) var(--r-4);
	z-index: 200;
	border-radius: 0 0 var(--rond-s) 0;
}
.dg-skip:focus { left: 0; }

/* Layout ------------------------------------------------------------------ */

.dg-omhulsel {
	width: min(100% - 2.5rem, var(--breedte));
	margin-inline: auto;
}

@media (max-width: 640px) {
	.dg-omhulsel { width: min(100% - 1.75rem, var(--breedte)); }
}

.dg-sectie { padding-block: var(--r-8); }
.dg-sectie--strak { padding-block: var(--r-7); }
.dg-sectie--gedempt { background: var(--papier-2); }

.dg-sectiekop {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--r-4);
	margin-bottom: var(--r-6);
}
.dg-sectiekop h2 { margin: 0; }
.dg-sectiekop p {
	margin: var(--r-2) 0 0;
	color: var(--inkt-zacht);
	max-width: 56ch;
}
.dg-sectiekop__meer {
	font-family: var(--kop);
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
}
.dg-sectiekop__meer::after { content: " →"; }

/* Blauwdrukraster: het speelse fundament onder hero's en accentblokken. */
.dg-raster {
	position: relative;
	isolation: isolate;
}
.dg-raster::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--cluster) 16%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--cluster) 16%, transparent) 1px, transparent 1px);
	background-size: 34px 34px;
	mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 78%);
	opacity: 0.45;
	pointer-events: none;
}

/* Knoppen ----------------------------------------------------------------- */

.dg-knop {
	display: inline-flex;
	align-items: center;
	gap: var(--r-2);
	padding: 0.68rem 1.2rem;
	border-radius: var(--rond-s);
	border: 2px solid transparent;
	font-family: var(--kop);
	font-weight: 700;
	font-size: var(--t-s);
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--soepel), background var(--soepel), border-color var(--soepel);
}
.dg-knop:active { transform: translateY(1px); }

.dg-knop--primair {
	background: var(--primair);
	color: #fff;
}
.dg-knop--primair:hover { background: var(--primair-donker); color: #fff; }

.dg-knop--rand {
	background: transparent;
	border-color: var(--lijn-sterk);
	color: var(--inkt);
}
.dg-knop--rand:hover { border-color: var(--cluster); color: var(--inkt); }

/*
 * De knopkleuren staan expliciet ook op :hover en :focus. Zonder dat wint
 * `a:hover` hierboven, want een pseudoklasse plus element telt zwaarder dan
 * een enkele klasse, en dan verspringt witte knoptekst naar donkerblauw
 * zodra de muis erover gaat.
 */
.dg-knop--cluster,
.dg-knop--cluster:hover,
.dg-knop--cluster:focus {
	background: var(--cluster);
	color: #fff;
}
.dg-knop--cluster:hover { background: color-mix(in srgb, var(--cluster) 86%, #000); }

.dg-knop--zacht,
.dg-knop--zacht:hover,
.dg-knop--zacht:focus {
	background: var(--cluster-zacht);
	color: var(--inkt);
}

/* Stickerlabels: licht geroteerd, alsof ze erop geplakt zijn. */
.dg-sticker {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.28rem 0.7rem;
	border-radius: 6px;
	background: var(--cluster-zacht);
	color: var(--inkt);
	font-family: var(--kop);
	font-weight: 800;
	font-size: var(--t-xs);
	line-height: 1.3;
	border: 1.5px solid color-mix(in srgb, var(--cluster) 45%, transparent);
}

.dg-chip {
	display: inline-block;
	padding: 0.35rem 0;
	color: var(--inkt);
	font-size: var(--t-s);
	font-weight: 550;
	text-decoration: none;
	border-bottom: 2px solid var(--cluster);
	transition: color var(--soepel), background var(--soepel);
}
.dg-chip + .dg-chip { position: relative; }
.dg-chip:hover { color: var(--cluster); }

/* Header ------------------------------------------------------------------ */

.dg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--papier) 88%, transparent);
	backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid var(--lijn);
}

.dg-header__balk {
	display: flex;
	align-items: center;
	gap: var(--r-4);
	min-height: 68px;
}

.dg-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	text-decoration: none;
	color: var(--inkt);
	font-family: var(--kop);
	font-weight: 800;
	font-size: 1.22rem;
	letter-spacing: -0.03em;
	flex-shrink: 0;
}
.dg-logo__punt { color: var(--primair); }
.dg-logo svg { flex-shrink: 0; }

.dg-nav {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	flex: 1 1 auto;
}

.dg-nav__knop {
	appearance: none;
	background: none;
	border: 0;
	padding: 0.55rem 0.7rem;
	border-radius: var(--rond-s);
	font-family: var(--kop);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--inkt);
	cursor: pointer;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	position: relative;
	transition: background var(--soepel);
}
.dg-nav__knop::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	opacity: 0.55;
	transition: transform var(--soepel);
}
.dg-nav__knop:hover { background: var(--papier-2); }
.dg-nav__knop[aria-expanded="true"] { background: var(--papier-2); }
.dg-nav__knop[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }

.dg-nav__knop[data-actief="1"]::before {
	content: "";
	position: absolute;
	left: 0.7rem;
	right: 0.7rem;
	bottom: 0.1rem;
	height: 3px;
	border-radius: 2px;
	background: var(--cluster);
}

/* Mega-menu */
.dg-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--papier);
	border-bottom: 1px solid var(--lijn);
	box-shadow: var(--schaduw-l);
	display: none;
	animation: dg-open 160ms cubic-bezier(0.32, 0.72, 0, 1);
}
.dg-mega[data-open="1"] { display: block; }

@keyframes dg-open {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

.dg-mega__binnen {
	display: grid;
	grid-template-columns: 1fr 288px;
	gap: var(--r-6);
	padding-block: var(--r-6) var(--r-7);
	align-items: start;
}

.dg-mega__kolommen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
	gap: var(--r-5) var(--r-6);
}

.dg-mega__segment > a.dg-mega__kop {
	display: block;
	font-family: var(--kop);
	font-size: var(--t-xs);
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cluster);
	text-decoration: none;
	margin-bottom: var(--r-3);
	padding-bottom: var(--r-2);
	border-bottom: 2px solid var(--cluster-zacht);
}
.dg-mega__segment > a.dg-mega__kop:hover { border-bottom-color: var(--cluster); }

/* Een segment met maar een onderwerp is een enkele klikbare regel. */
.dg-mega__segment > a.dg-mega__kop--enkel {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--r-3);
}

.dg-mega__lijst { list-style: none; margin: 0; padding: 0; }
.dg-mega__lijst li + li { margin-top: 1px; }
.dg-mega__lijst a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--r-2);
	padding: 0.32rem 0.5rem;
	margin-inline: -0.5rem;
	border-radius: var(--rond-s);
	color: var(--inkt-zacht);
	text-decoration: none;
	font-size: 0.92rem;
	transition: background var(--soepel), color var(--soepel);
}
.dg-mega__lijst a:hover {
	background: var(--cluster-zacht);
	color: var(--inkt);
}
.dg-mega__aantal {
	font-size: var(--t-xs);
	color: var(--inkt-licht);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}
.dg-mega__alles {
	display: inline-block;
	margin-top: var(--r-2);
	font-size: var(--t-s);
	font-weight: 650;
	text-decoration: none;
}
.dg-mega__alles::after { content: " →"; }

.dg-mega__kaart {
	background: var(--cluster-zacht);
	border: 1.5px solid color-mix(in srgb, var(--cluster) 30%, transparent);
	border-radius: var(--rond-l);
	padding: var(--r-5);
	position: relative;
	overflow: hidden;
}
.dg-mega__kaart h3 {
	margin: 0 0 var(--r-2);
	font-size: var(--t-l);
}
.dg-mega__kaart p {
	margin: 0 0 var(--r-4);
	color: var(--inkt-zacht);
	font-size: var(--t-s);
}
.dg-mega__kaart__icoon {
	position: absolute;
	right: -18px;
	bottom: -18px;
	color: var(--cluster);
	opacity: 0.22;
	transform: rotate(-12deg);
	pointer-events: none;
}

/* Zoek in de header */
.dg-zoek {
	position: relative;
	flex: 0 1 260px;
	min-width: 150px;
}
.dg-zoek input {
	width: 100%;
	padding: 0.55rem 0.9rem 0.55rem 2.2rem;
	border-radius: var(--rond-s);
	border: 1.5px solid var(--lijn);
	background: var(--papier-2);
	color: var(--inkt);
	font: inherit;
	font-size: var(--t-s);
}
.dg-zoek input:focus { border-color: var(--primair); background: var(--papier); }
.dg-zoek__icoon {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--inkt-licht);
	pointer-events: none;
}
.dg-zoek__resultaten {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--papier);
	border: 1px solid var(--lijn);
	border-radius: var(--rond-m);
	box-shadow: var(--schaduw-l);
	list-style: none;
	margin: 0;
	padding: var(--r-2);
	max-height: 60vh;
	overflow-y: auto;
	display: none;
	z-index: 120;
}
.dg-zoek__resultaten[data-open="1"] { display: block; }
.dg-zoek__resultaten a {
	display: block;
	padding: 0.45rem 0.6rem;
	border-radius: var(--rond-s);
	text-decoration: none;
	color: var(--inkt);
	font-size: var(--t-s);
}
.dg-zoek__resultaten a:hover,
.dg-zoek__resultaten li[aria-selected="true"] a { background: var(--papier-2); }
.dg-zoek__resultaten small { display: block; color: var(--inkt-licht); font-size: var(--t-xs); }

.dg-header__cta { flex-shrink: 0; }

.dg-hamburger {
	display: none;
	appearance: none;
	background: none;
	border: 1.5px solid var(--lijn);
	border-radius: var(--rond-s);
	width: 42px;
	height: 42px;
	cursor: pointer;
	color: var(--inkt);
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}

@media (max-width: 1120px) {
	.dg-nav, .dg-header__cta { display: none; }
	.dg-hamburger { display: inline-flex; }
	.dg-zoek { flex: 1 1 auto; }
}

/* Mobiel menu */
.dg-mobiel {
	position: fixed;
	inset: 68px 0 0;
	background: var(--papier);
	overflow-y: auto;
	padding: var(--r-5) 0 var(--r-8);
	z-index: 90;
	display: none;
}
.dg-mobiel[data-open="1"] { display: block; }
.dg-mobiel details {
	border-bottom: 1px solid var(--lijn);
}
.dg-mobiel summary {
	padding: var(--r-4) 0;
	font-family: var(--kop);
	font-weight: 800;
	font-size: var(--t-l);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.dg-mobiel summary::-webkit-details-marker { display: none; }
.dg-mobiel summary::after {
	content: "";
	width: 8px; height: 8px;
	border-right: 2px solid var(--inkt-licht);
	border-bottom: 2px solid var(--inkt-licht);
	transform: rotate(45deg);
}
.dg-mobiel details[open] summary::after { transform: rotate(-135deg); }
.dg-mobiel__segment { padding: 0 0 var(--r-4); }
.dg-mobiel__segment h3 {
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--cluster);
	margin: var(--r-3) 0 var(--r-2);
}
.dg-mobiel__segment ul { list-style: none; margin: 0; padding: 0; }
.dg-mobiel__segment a {
	display: block;
	padding: 0.4rem 0;
	color: var(--inkt-zacht);
	text-decoration: none;
}

/* Kruimelpad -------------------------------------------------------------- */

.dg-kruimels { padding-block: var(--r-4) 0; }
.dg-kruimels ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	font-size: var(--t-s);
	color: var(--inkt-licht);
}
.dg-kruimels li { display: flex; align-items: center; gap: 0.35rem; }
.dg-kruimels li + li::before {
	content: "";
	width: 5px; height: 5px;
	border-right: 1.5px solid var(--lijn-sterk);
	border-top: 1.5px solid var(--lijn-sterk);
	transform: rotate(45deg);
}
.dg-kruimels a { color: var(--inkt-zacht); text-decoration: none; }
.dg-kruimels a:hover { color: var(--cluster); text-decoration: underline; }
.dg-kruimels [aria-current] { color: var(--inkt); font-weight: 550; }

/* Homepage ---------------------------------------------------------------- */

.dg-hero {
	padding-block: var(--r-8) var(--r-7);
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--lijn);
}
.dg-hero h1 {
	font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem);
	margin-bottom: var(--r-4);
}
.dg-hero__intro {
	font-size: var(--t-l);
	color: var(--inkt-zacht);
	max-width: 58ch;
	margin: 0 0 var(--r-6);
}
.dg-hero__zoek {
	max-width: 620px;
	margin: 0 0 var(--r-5);
	position: relative;
}
.dg-hero__zoek input {
	width: 100%;
	padding: 1.05rem 1.4rem 1.05rem 3.2rem;
	border-radius: var(--rond-m);
	border: 2px solid var(--lijn-sterk);
	background: var(--papier);
	font: inherit;
	font-size: var(--t-l);
	box-shadow: var(--schaduw-m);
}
.dg-hero__zoek input:focus { border-color: var(--primair); }
.dg-hero__zoek .dg-zoek__icoon { left: 1.25rem; }
/* Veelgezochte klussen als tekstregel met scheidingslijntjes, niet als
   rij pillen. Leest als een register en niet als een filterbalk. */
.dg-hero__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--r-3);
	max-width: 860px;
}
.dg-hero__chips::before {
	content: "Veelgezocht";
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--inkt-licht);
	margin-right: var(--r-2);
}

/* Drie ingangen */
.dg-ingangen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--r-4);
}
.dg-ingang {
	display: block;
	position: relative;
	padding: var(--r-5) var(--r-5) var(--r-5) 0;
	border-top: 3px solid var(--cluster);
	text-decoration: none;
	color: var(--inkt);
	transition: border-color var(--soepel);
}
.dg-ingang:hover { color: var(--inkt); }
.dg-ingang:hover h3 { color: var(--cluster); }
.dg-ingang h3 {
	margin: var(--r-3) 0 var(--r-2);
	font-size: var(--t-l);
	transition: color var(--soepel);
}
.dg-ingang p { margin: 0; color: var(--inkt-zacht); font-size: var(--t-s); max-width: 40ch; }
.dg-ingang__icoon { display: none; }
.dg-ingang__pijl {
	display: inline-block;
	margin-top: var(--r-3);
	font-family: var(--kop);
	font-weight: 800;
	font-size: var(--t-s);
	color: var(--cluster);
}

/* Werkwijze: drie genummerde kolommen, redactioneel in plaats van drie
   gekleurde vakjes met een icoontje erin. */
.dg-werkwijze {
	list-style: none;
	counter-reset: werkwijze;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--r-6);
}
.dg-werkwijze li {
	counter-increment: werkwijze;
	border-top: 2px solid var(--inkt);
	padding-top: var(--r-4);
}
.dg-werkwijze li::before {
	content: counter(werkwijze, decimal-leading-zero);
	display: block;
	font-size: var(--t-s);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.14em;
	color: var(--accent);
	margin-bottom: var(--r-3);
}
.dg-werkwijze h3 { margin: 0 0 var(--r-2); font-size: var(--t-l); }
.dg-werkwijze p { margin: 0; color: var(--inkt-zacht); }

/* Clustertegels */
.dg-tegels {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
	gap: var(--r-4);
}
.dg-tegel {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--r-5) var(--r-4);
	background: var(--papier);
	border: 1px solid var(--lijn);
	overflow: hidden;
	transition: border-color var(--soepel);
}
.dg-tegel:hover { border-color: var(--cluster); }
.dg-tegel:hover .dg-tegel__titel a { color: var(--cluster); }
.dg-tegel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--cluster);
}
.dg-tegel__kop {
	display: flex;
	align-items: center;
	gap: var(--r-3);
	margin-bottom: var(--r-3);
}
.dg-tegel__icoon {
	flex-shrink: 0;
	color: var(--cluster);
	margin-top: 2px;
}
.dg-tegel__titel { margin: 0; font-size: var(--t-l); }
.dg-tegel__titel a { color: inherit; text-decoration: none; }
.dg-tegel__titel a::after { content: ""; position: absolute; inset: 0; }
.dg-tegel__meta {
	font-size: var(--t-xs);
	color: var(--inkt-licht);
	font-variant-numeric: tabular-nums;
}
.dg-tegel__links {
	list-style: none;
	margin: var(--r-3) 0 0;
	padding: 0;
	position: relative;
	z-index: 1;
}
.dg-tegel__links li + li { margin-top: 2px; }
.dg-tegel__links a {
	color: var(--inkt-zacht);
	text-decoration: none;
	font-size: 0.9rem;
	display: inline-flex;
	gap: 0.4rem;
}
.dg-tegel__links a::before { content: "›"; color: var(--cluster); font-weight: 700; }
.dg-tegel__links a:hover { color: var(--cluster); text-decoration: underline; }

/* Gidskaarten */
.dg-kaarten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: var(--r-4);
}
.dg-kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--papier);
	border: 1px solid var(--lijn);
	transition: border-color var(--soepel);
}
.dg-kaart:hover { border-color: var(--cluster); }
.dg-kaart:hover .dg-kaart__titel a { color: var(--cluster); }
.dg-kaart__beeld { aspect-ratio: 1200 / 630; overflow: hidden; background: var(--cluster-zacht); }
.dg-kaart__beeld svg { width: 100%; height: 100%; }
.dg-kaart__body { padding: var(--r-4); display: flex; flex-direction: column; gap: var(--r-2); flex: 1; }
.dg-kaart__hub {
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--cluster);
}
.dg-kaart__titel { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.dg-kaart__titel a { color: inherit; text-decoration: none; }
.dg-kaart__titel a::after { content: ""; position: absolute; inset: 0; }
.dg-kaart__meta {
	margin-top: auto;
	font-size: var(--t-xs);
	color: var(--inkt-licht);
	display: flex;
	gap: var(--r-3);
	flex-wrap: wrap;
}

/* Artikel ----------------------------------------------------------------- */

.dg-artikel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 306px;
	gap: var(--r-7);
	align-items: start;
	padding-block: var(--r-5) var(--r-8);
}

@media (max-width: 1040px) {
	.dg-artikel { grid-template-columns: 1fr; gap: var(--r-6); }
}

.dg-artikel__kop { margin-bottom: var(--r-5); }
.dg-artikel__kop h1 { margin-bottom: var(--r-3); }

.dg-artikel__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--r-3);
	color: var(--inkt-licht);
	font-size: var(--t-s);
	margin-bottom: var(--r-4);
}
.dg-artikel__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }

.dg-hero-beeld {
	width: 100%;
	border-radius: var(--rond-l);
	overflow: hidden;
	margin-bottom: var(--r-5);
	box-shadow: var(--schaduw-s);
}

.dg-lead {
	font-size: var(--t-l);
	color: var(--inkt-zacht);
	line-height: 1.6;
	padding-left: var(--r-4);
	border-left: 4px solid var(--cluster);
	margin-bottom: var(--r-5);
}

.dg-inhoud { max-width: var(--breedte-tekst); }
.dg-inhoud > * { max-width: 100%; }
.dg-inhoud h2 {
	scroll-margin-top: 90px;
	padding-top: var(--r-2);
}
.dg-inhoud h2::before {
	content: "";
	display: block;
	width: 42px;
	height: 4px;
	border-radius: 2px;
	background: var(--cluster);
	margin-bottom: var(--r-3);
}
.dg-inhoud h3 { scroll-margin-top: 90px; }
.dg-inhoud ul, .dg-inhoud ol { padding-left: 1.35rem; }
.dg-inhoud li { margin-bottom: 0.45rem; }
.dg-inhoud li::marker { color: var(--cluster); font-weight: 700; }

/* Voortgangsbalk */
.dg-voortgang {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--cluster);
	z-index: 150;
	transition: width 80ms linear;
}

/* Leeshulp: luisteren, inhoudsopgave, leestijd */
.dg-leeshulp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--r-2);
	padding: var(--r-3);
	border-radius: var(--rond-m);
	background: var(--papier-2);
	border: 1px solid var(--lijn);
	margin-bottom: var(--r-5);
}
.dg-luister {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: var(--rond-s);
	border: 1.5px solid var(--cluster);
	background: var(--cluster-zacht);
	color: var(--inkt);
	font-family: var(--kop);
	font-weight: 700;
	font-size: var(--t-s);
	cursor: pointer;
}
.dg-luister[hidden] { display: none; }
.dg-luister__balkjes { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.dg-luister__balkjes i {
	width: 3px;
	background: var(--cluster);
	border-radius: 2px;
	height: 5px;
	display: block;
}
.dg-luister[data-status="speelt"] .dg-luister__balkjes i {
	animation: dg-golf 900ms ease-in-out infinite;
}
.dg-luister[data-status="speelt"] .dg-luister__balkjes i:nth-child(2) { animation-delay: 140ms; }
.dg-luister[data-status="speelt"] .dg-luister__balkjes i:nth-child(3) { animation-delay: 280ms; }
@keyframes dg-golf {
	0%, 100% { height: 5px; }
	50% { height: 14px; }
}
.dg-luister__voortgang {
	font-variant-numeric: tabular-nums;
	font-size: var(--t-xs);
	color: var(--inkt-licht);
}

/* Inhoudsopgave */
.dg-inhoudsopgave {
	border: 1px solid var(--lijn);
	border-radius: var(--rond-m);
	background: var(--papier);
	padding: var(--r-4);
	margin-bottom: var(--r-6);
}
.dg-inhoudsopgave > p {
	font-family: var(--kop);
	font-weight: 800;
	font-size: var(--t-s);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--inkt-licht);
	margin: 0 0 var(--r-3);
}
.dg-inhoudsopgave ol { list-style: none; margin: 0; padding: 0; counter-reset: io; }
.dg-inhoudsopgave li { counter-increment: io; margin-bottom: 0.15rem; }
.dg-inhoudsopgave a {
	display: flex;
	gap: 0.6rem;
	padding: 0.32rem 0.5rem;
	margin-inline: -0.5rem;
	border-radius: var(--rond-s);
	color: var(--inkt-zacht);
	text-decoration: none;
	font-size: 0.93rem;
}
.dg-inhoudsopgave a::before {
	content: counter(io);
	font-variant-numeric: tabular-nums;
	color: var(--cluster);
	font-weight: 700;
	flex-shrink: 0;
}
.dg-inhoudsopgave a:hover { background: var(--cluster-zacht); color: var(--inkt); }
.dg-inhoudsopgave a[data-actief="1"] {
	background: var(--cluster-zacht);
	color: var(--inkt);
	font-weight: 600;
}

/* Benodigdheden */
.dg-benodigd {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--r-4);
	padding: var(--r-5);
	border-radius: var(--rond-l);
	background: var(--cluster-zacht);
	border: 1.5px solid color-mix(in srgb, var(--cluster) 26%, transparent);
	margin-bottom: var(--r-6);
}
.dg-benodigd h2 {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--t-l);
}
.dg-benodigd h2::before { display: none; }
.dg-benodigd__stickers { grid-column: 1 / -1; display: flex; gap: var(--r-2); flex-wrap: wrap; }
.dg-benodigd h3 {
	margin: 0 0 var(--r-2);
	font-size: var(--t-s);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--inkt-licht);
}
.dg-benodigd ul { list-style: none; margin: 0; padding: 0; font-size: 0.93rem; }
.dg-benodigd li {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.3rem;
}
.dg-benodigd li::before {
	content: "";
	width: 6px; height: 6px;
	margin-top: 0.55rem;
	border-radius: 2px;
	background: var(--cluster);
	flex-shrink: 0;
	transform: rotate(45deg);
}

/* Stappenplan met stippellijn-connector */
.dg-stappen { counter-reset: stap; list-style: none; padding: 0; margin: 0 0 var(--r-6); }
.dg-stap {
	counter-increment: stap;
	position: relative;
	padding-left: 3.4rem;
	padding-bottom: var(--r-5);
}
.dg-stap::before {
	content: counter(stap);
	position: absolute;
	left: 0;
	top: 0;
	width: 38px;
	height: 38px;
	border-radius: var(--rond-s);
	background: var(--cluster);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--kop);
	font-weight: 800;
	font-size: var(--t-m);
}
.dg-stap::after {
	content: "";
	position: absolute;
	left: 18px;
	top: 44px;
	bottom: 6px;
	border-left: 2.5px dotted color-mix(in srgb, var(--cluster) 55%, transparent);
}
.dg-stap:last-child::after { display: none; }
.dg-stap h3 { margin: 0.3rem 0 var(--r-2); font-size: var(--t-l); }
.dg-stap p:last-child { margin-bottom: 0; }

/* Praktijkcase met tape-accent */
.dg-praktijk {
	position: relative;
	background: var(--papier-2);
	border: 1px solid var(--lijn);
	border-radius: var(--rond-m);
	padding: var(--r-4) var(--r-5);
	margin: var(--r-5) 0;
}
.dg-praktijk::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--accent);
}
.dg-praktijk h3 {
	margin: 0 0 var(--r-2);
	font-size: var(--t-l);
}
.dg-praktijk p:last-child { margin-bottom: 0; }
.dg-praktijk__label {
	display: inline-block;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--inkt-licht);
	margin-bottom: var(--r-2);
}

/* Let-op-blok */
/* Let op: afzetlint langs de linkerrand. Dat is de taal van een bouwplaats en
   niet van een interface, en het valt op zonder een rode driehoek nodig te
   hebben die op elke website staat. */
.dg-attentie {
	display: flex;
	gap: var(--r-4);
	padding: var(--r-4) var(--r-4) var(--r-4) var(--r-5);
	background: var(--let-op-zacht);
	margin: var(--r-5) 0;
	position: relative;
}
.dg-attentie::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 10px;
	background: repeating-linear-gradient(
		-45deg,
		var(--let-op) 0 7px,
		transparent 7px 14px
	);
	background-color: color-mix(in srgb, var(--let-op) 18%, transparent);
}
.dg-attentie svg { flex-shrink: 0; color: var(--let-op); margin-top: 2px; }
.dg-attentie p:last-child { margin-bottom: 0; }
.dg-attentie strong { color: var(--let-op); }

.dg-tip {
	display: flex;
	gap: var(--r-4);
	padding: var(--r-4);
	background: var(--goed-zacht);
	border-left: 3px solid var(--goed);
	margin: var(--r-5) 0;
}
.dg-tip svg { flex-shrink: 0; color: var(--goed); margin-top: 2px; }
.dg-tip p:last-child { margin-bottom: 0; }

/* Checklist */
.dg-checklist { list-style: none; padding: 0; margin: 0 0 var(--r-5); }
.dg-checklist li {
	display: flex;
	gap: var(--r-3);
	padding: 0.6rem 0;
	border-bottom: 1px dashed var(--lijn);
}
.dg-checklist li:last-child { border-bottom: 0; }
.dg-checklist input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--cluster);
	flex-shrink: 0;
	cursor: pointer;
}
.dg-checklist label { cursor: pointer; }
.dg-checklist input:checked + label { color: var(--inkt-licht); text-decoration: line-through; }

/* Tabellen */
.dg-tabelhouder { overflow-x: auto; margin-bottom: var(--r-5); border-radius: var(--rond-m); border: 1px solid var(--lijn); }
.dg-tabel {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
	margin: 0;
	background: var(--papier);
}
.dg-tabel th, .dg-tabel td {
	padding: 0.65rem 0.9rem;
	text-align: left;
	border-bottom: 1px solid var(--lijn);
	vertical-align: top;
}
.dg-tabel th {
	background: var(--cluster-zacht);
	font-family: var(--kop);
	font-weight: 800;
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	/* De kolomkop blijft staan tijdens het scrollen, maar moet onder de
	   plakkende sitekop blijven. Binnen een ingebedde tabel met eigen
	   schuifbalk hoort hij juist bovenaan die houder. */
	position: sticky;
	top: 68px;
	z-index: 1;
}
.dg-tool--compact .dg-tabel th { top: 0; }
.dg-tabel tbody tr:nth-child(even) { background: color-mix(in srgb, var(--papier-2) 60%, transparent); }
.dg-tabel tbody tr:hover { background: var(--cluster-zacht); }
.dg-tabel tr:last-child td { border-bottom: 0; }

/* Vragen */
.dg-vragen { margin-bottom: var(--r-6); }
.dg-vraag {
	border: 1px solid var(--lijn);
	border-radius: var(--rond-m);
	margin-bottom: var(--r-2);
	background: var(--papier);
	overflow: hidden;
}
.dg-vraag summary {
	padding: var(--r-4);
	cursor: pointer;
	font-family: var(--kop);
	font-weight: 700;
	font-size: 1.02rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: var(--r-3);
	align-items: center;
}
.dg-vraag summary::-webkit-details-marker { display: none; }
.dg-vraag summary::after {
	content: "+";
	font-size: 1.4rem;
	color: var(--cluster);
	flex-shrink: 0;
	line-height: 1;
}
.dg-vraag[open] summary::after { content: "−"; }
.dg-vraag[open] summary { border-bottom: 1px solid var(--lijn); }
.dg-vraag__antwoord { padding: var(--r-4); }
.dg-vraag__antwoord p:last-child { margin-bottom: 0; }

/* Sidebar ----------------------------------------------------------------- */

.dg-zijbalk {
	position: sticky;
	top: 88px;
	display: flex;
	flex-direction: column;
	gap: var(--r-4);
	font-size: var(--t-s);
}

@media (max-width: 1040px) {
	.dg-zijbalk { position: static; }
}

.dg-blok {
	border: 1px solid var(--lijn);
	border-radius: var(--rond-l);
	background: var(--papier);
	padding: var(--r-4);
	overflow: hidden;
}
.dg-blok--cluster {
	background: var(--cluster-zacht);
	border-color: color-mix(in srgb, var(--cluster) 26%, transparent);
}
.dg-blok__kop {
	display: flex;
	align-items: center;
	gap: var(--r-2);
	font-family: var(--kop);
	font-weight: 800;
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--inkt-licht);
	margin: 0 0 var(--r-3);
}
.dg-blok__kop svg { color: var(--cluster); }
.dg-blok ul { list-style: none; margin: 0; padding: 0; }
.dg-blok li + li { margin-top: 1px; }
.dg-blok li a {
	display: flex;
	justify-content: space-between;
	gap: var(--r-2);
	align-items: baseline;
	padding: 0.36rem 0.5rem;
	margin-inline: -0.5rem;
	border-radius: var(--rond-s);
	color: var(--inkt-zacht);
	text-decoration: none;
	line-height: 1.4;
}
.dg-blok li a:hover { background: color-mix(in srgb, var(--cluster) 12%, transparent); color: var(--inkt); }
.dg-blok li a[aria-current] {
	background: var(--cluster);
	color: #fff;
	font-weight: 600;
}
.dg-blok__aantal { font-size: var(--t-xs); color: var(--inkt-licht); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.dg-blok li a[aria-current] .dg-blok__aantal { color: rgb(255 255 255 / 0.8); }
.dg-blok__voet { margin-top: var(--r-3); padding-top: var(--r-3); border-top: 1px dashed var(--lijn); }
.dg-blok__voet a { font-weight: 650; text-decoration: none; }
.dg-blok__voet a::after { content: " →"; }

/* Clusterkaart: de topical authority zichtbaar maken */
.dg-clusterkaart__pad {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--t-xs);
	color: var(--inkt-licht);
	margin-bottom: var(--r-3);
	flex-wrap: wrap;
}
.dg-clusterkaart__pad a { color: var(--cluster); text-decoration: none; font-weight: 600; }
.dg-clusterkaart__hub {
	display: flex;
	align-items: center;
	gap: var(--r-3);
	padding: var(--r-3);
	margin: calc(var(--r-4) * -1) calc(var(--r-4) * -1) var(--r-3);
	background: var(--cluster);
	color: #fff;
}
.dg-clusterkaart__hub svg { flex-shrink: 0; }
.dg-clusterkaart__hub a { color: #fff; text-decoration: none; font-family: var(--kop); font-weight: 800; }
.dg-clusterkaart__hub small { display: block; opacity: 0.82; font-weight: 400; font-size: var(--t-xs); }

.dg-zijtool {
	border-radius: var(--rond-m);
	background: var(--papier-2);
	border: 1px dashed var(--lijn-sterk);
	padding: var(--r-3);
}
.dg-zijtool a {
	display: flex;
	align-items: center;
	gap: var(--r-2);
	text-decoration: none;
	color: var(--inkt);
	font-weight: 600;
}
.dg-zijtool a svg { color: var(--cluster); flex-shrink: 0; }
.dg-zijtool + .dg-zijtool { margin-top: var(--r-2); }

/* Verwante gidsen onderaan */
.dg-verwant { margin-top: var(--r-7); padding-top: var(--r-6); border-top: 2px solid var(--lijn); }

/* Tools ------------------------------------------------------------------- */

.dg-tool {
	border: 1.5px solid color-mix(in srgb, var(--cluster) 30%, transparent);
	border-radius: var(--rond-l);
	background: var(--papier);
	overflow: hidden;
	margin-bottom: var(--r-6);
}
.dg-tool__kop {
	display: flex;
	gap: var(--r-3);
	padding: var(--r-4) var(--r-5);
	background: var(--cluster-zacht);
	border-bottom: 1px solid color-mix(in srgb, var(--cluster) 22%, transparent);
}
.dg-tool__icoon { color: var(--cluster); flex-shrink: 0; }
.dg-tool__label {
	margin: 0 0 0.15rem;
	font-family: var(--kop);
	font-weight: 800;
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cluster);
}
.dg-tool__titel { margin: 0 0 0.2rem; font-size: var(--t-l); }
.dg-tool__intro { margin: 0; color: var(--inkt-zacht); font-size: var(--t-s); }
.dg-tool__body {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--r-5);
	padding: var(--r-5);
}
@media (max-width: 720px) {
	.dg-tool__body { grid-template-columns: 1fr; }
}
.dg-tool__velden { display: grid; gap: var(--r-3); align-content: start; }
.dg-tool__zoek {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--r-3);
	padding: var(--r-4) var(--r-5);
}
@media (max-width: 560px) { .dg-tool__zoek { grid-template-columns: 1fr; } }
/* Op de toolpagina zelf loopt de tabel gewoon door. Een eigen schuifbalk vangt
   daar het muiswiel op, waardoor de pagina niet meer beweegt en de tabel lijkt
   vast te zitten. Alleen ingebed in een gids beperken we de hoogte, want daar
   mag de tabel de rest van het artikel niet wegdrukken. Zijwaarts schuiven
   blijft overal nodig voor smalle schermen. */
.dg-tool__tabelhouder {
	overflow-x: auto;
	margin: 0 var(--r-4) var(--r-4);
	border: 1px solid var(--lijn);
	border-radius: var(--rond-m);
	-webkit-overflow-scrolling: touch;
}
.dg-tool--compact .dg-tool__tabelhouder {
	max-height: 460px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.dg-tool__leeg { padding: var(--r-4); color: var(--inkt-licht); text-align: center; }
.dg-tool__voet {
	padding: var(--r-3) var(--r-5);
	border-top: 1px dashed var(--lijn);
	background: var(--papier-2);
}
.dg-tool__aannames { margin: 0; font-size: var(--t-xs); color: var(--inkt-licht); }
.dg-tool--compact { margin-block: var(--r-6); }

.dg-veld { display: grid; gap: 0.3rem; }
.dg-veld__label { font-size: var(--t-s); font-weight: 600; color: var(--inkt-zacht); }
.dg-veld input, .dg-veld select {
	width: 100%;
	padding: 0.55rem 0.75rem;
	border-radius: var(--rond-s);
	border: 1.5px solid var(--lijn);
	background: var(--papier);
	color: var(--inkt);
	font: inherit;
	font-size: var(--t-s);
}
.dg-veld input:focus, .dg-veld select:focus { border-color: var(--cluster); }
.dg-veld__rij { display: flex; gap: var(--r-2); align-items: center; }
.dg-veld__eenheid { font-size: var(--t-xs); color: var(--inkt-licht); white-space: nowrap; }

.dg-tool__uitkomst {
	background: var(--cluster-zacht);
	border-radius: var(--rond-m);
	padding: var(--r-4);
	align-self: start;
}
.dg-uitkomst__hoofd {
	font-family: var(--kop);
	font-weight: 800;
	font-size: var(--t-2xl);
	line-height: 1.15;
	color: var(--inkt);
	margin: 0 0 var(--r-1);
}
.dg-uitkomst__onder { margin: 0 0 var(--r-3); color: var(--inkt-zacht); font-size: var(--t-s); }
.dg-uitkomst__lijst { list-style: none; margin: 0; padding: 0; font-size: var(--t-s); }
.dg-uitkomst__lijst li {
	display: flex;
	justify-content: space-between;
	gap: var(--r-3);
	padding: 0.35rem 0;
	border-bottom: 1px dashed color-mix(in srgb, var(--cluster) 30%, transparent);
}
.dg-uitkomst__lijst li:last-child { border-bottom: 0; }
.dg-uitkomst__lijst b { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Apparaten- en lagenlijst in de tools */
.dg-rijen { display: grid; gap: var(--r-2); }
.dg-rij {
	display: grid;
	grid-template-columns: 1fr 90px 32px;
	gap: var(--r-2);
	align-items: center;
}
.dg-rij select, .dg-rij input { padding: 0.45rem 0.6rem; font-size: var(--t-s); }
.dg-rij__weg {
	appearance: none;
	border: 1.5px solid var(--lijn);
	background: var(--papier);
	border-radius: var(--rond-s);
	width: 32px; height: 32px;
	cursor: pointer;
	color: var(--inkt-licht);
	font-size: 1.1rem;
	line-height: 1;
}
.dg-rij__weg:hover { border-color: var(--let-op); color: var(--let-op); }
.dg-toevoegen {
	appearance: none;
	border: 1.5px dashed var(--lijn-sterk);
	background: transparent;
	border-radius: var(--rond-s);
	padding: 0.45rem;
	cursor: pointer;
	font: inherit;
	font-size: var(--t-s);
	font-weight: 600;
	color: var(--cluster);
}
.dg-toevoegen:hover { border-color: var(--cluster); background: var(--cluster-zacht); }

/* Footer ------------------------------------------------------------------ */

.dg-footer {
	background: var(--papier-2);
	border-top: 1px solid var(--lijn);
	padding-block: var(--r-7) var(--r-5);
	margin-top: var(--r-8);
}
.dg-footer__kolommen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--r-6);
	margin-bottom: var(--r-6);
}
.dg-footer h2 {
	font-size: var(--t-s);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--inkt-licht);
	margin: 0 0 var(--r-3);
}
.dg-footer ul { list-style: none; margin: 0; padding: 0; }
.dg-footer li { margin-bottom: 0.3rem; }
.dg-footer a { color: var(--inkt-zacht); text-decoration: none; font-size: var(--t-s); }
.dg-footer a:hover { color: var(--primair); text-decoration: underline; }
.dg-footer__onder {
	border-top: 1px solid var(--lijn);
	padding-top: var(--r-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--r-3);
	justify-content: space-between;
	align-items: center;
	font-size: var(--t-xs);
	color: var(--inkt-licht);
}
.dg-footer__disclaimer { max-width: 68ch; margin: 0 0 var(--r-3); font-size: var(--t-xs); color: var(--inkt-licht); }

/* Overzichtslijsten op hub en subhub -------------------------------------- */

.dg-hubkop {
	padding-block: var(--r-6) var(--r-5);
	position: relative;
}
.dg-hubkop__binnen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--r-6);
	align-items: center;
}
@media (max-width: 860px) {
	.dg-hubkop__binnen { grid-template-columns: 1fr; }
	.dg-hubkop__cijfers { order: -1; }
}
.dg-hubkop h1 { margin-bottom: var(--r-3); }
.dg-hubkop p { color: var(--inkt-zacht); max-width: 62ch; font-size: var(--t-l); }
.dg-hubkop__cijfers { display: flex; gap: var(--r-4); }
.dg-cijfer {
	padding-left: var(--r-4);
	border-left: 1px solid var(--lijn);
	min-width: 92px;
}
.dg-cijfer:first-child { padding-left: 0; border-left: 0; }
.dg-cijfer b {
	display: block;
	font-family: var(--kop);
	font-size: var(--t-2xl);
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.dg-cijfer span { font-size: var(--t-xs); color: var(--inkt-zacht); }

.dg-lijst { display: grid; border-top: 2px solid var(--inkt); }
/* Gidsen als register-regels: hairline eronder, een kleurbalk links die bij
   hover oplicht. Leest als de inhoudsopgave van een handboek. */
.dg-lijstitem {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	gap: var(--r-4);
	align-items: baseline;
	padding: var(--r-4) var(--r-4) var(--r-4) var(--r-3);
	border-bottom: 1px solid var(--lijn);
	border-left: 3px solid transparent;
	background: var(--papier);
	transition: border-color var(--soepel);
}
.dg-lijstitem:hover { border-left-color: var(--cluster); }
.dg-lijstitem:hover h3 a { color: var(--cluster); }
.dg-lijstitem__nummer {
	color: var(--inkt-licht);
	font-weight: 700;
	font-size: var(--t-s);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
}
.dg-lijstitem h3 { margin: 0 0 0.2rem; font-size: var(--t-l); }
.dg-lijstitem h3 a { color: inherit; text-decoration: none; }
.dg-lijstitem h3 a::after { content: ""; position: absolute; inset: 0; }
.dg-lijstitem p { margin: 0; color: var(--inkt-zacht); font-size: var(--t-s); }
.dg-lijstitem__meta {
	font-size: var(--t-xs);
	color: var(--inkt-licht);
	text-align: right;
	white-space: nowrap;
}

/* Zoekpagina */
.dg-zoekresultaat {
	padding: var(--r-4) 0;
	border-bottom: 1px solid var(--lijn);
}
.dg-zoekresultaat h2 { margin: 0 0 0.2rem; font-size: var(--t-l); }
.dg-zoekresultaat h2::before { display: none; }
.dg-zoekresultaat__pad { font-size: var(--t-xs); color: var(--inkt-licht); }

/* Print ------------------------------------------------------------------- */

@media print {
	.dg-header, .dg-zijbalk, .dg-footer, .dg-leeshulp, .dg-voortgang, .dg-verwant { display: none !important; }
	.dg-artikel { grid-template-columns: 1fr; }
	body { background: #fff; color: #000; }
}