/* ==========================================================================
   dehuisgids.nl - richting Bouwtekening
   Een site die leest als een goede bouwtekening: bijna-zwarte inkt op wit,
   bouwtekeningblauw als dragende kleur, oker als enige luide kleur die altijd
   naar iets wijst wat je kunt doen. Rechte hoeken en haarlijnen in plaats van
   afgeronde kaartjes met schaduw. Alles wat kleur nodig heeft haalt die uit
   --cluster, zodat een onderdeel zich vanzelf voegt naar het vakgebied waar
   de bezoeker in zit. De kleuren zelf komen uit build/maak-tokens.py.
   ========================================================================== */

/* Zelf gehost, in twee latijnse subsets. Geen verzoek naar een externe dienst
   voor iets zo basaals als de letter waarin de site staat. */
@font-face {
	font-family: "Space Grotesk";
	src: url("../fonts/SpaceGrotesk-latin.woff2") format("woff2");
	font-weight: 300 700;
	font-display: swap;
	font-style: normal;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Space Grotesk";
	src: url("../fonts/SpaceGrotesk-latin-ext.woff2") format("woff2");
	font-weight: 300 700;
	font-display: swap;
	font-style: normal;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/IBMPlexSans-latin.woff2") format("woff2");
	font-weight: 400 600;
	font-display: swap;
	font-style: normal;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/IBMPlexSans-latin-ext.woff2") format("woff2");
	font-weight: 400 600;
	font-display: swap;
	font-style: normal;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*,
*::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: "ss01" 1;
}

h1, h2, h3, h4 {
	font-family: var(--kop);
	line-height: 1.16;
	letter-spacing: -0.021em;
	margin: 0 0 var(--r-3);
	font-weight: 600;
	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(--accent);
	outline-offset: 2px;
	border-radius: 0;
}

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 */
.hg-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--inkt);
	color: var(--papier);
	padding: var(--r-3) var(--r-4);
	z-index: 200;
}
.hg-skip:focus { left: 0; }

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

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

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

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

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

/* Plattegrondraster: het speelse fundament onder hero's en accentblokken.
   Dunne lijnen op de maat van een bouwtekening, met een dubbele "muurlijn"
   per grote cel, zodat het naar een woningplattegrond verwijst en niet naar
   ruitjespapier. */
.hg-raster {
	position: relative;
	isolation: isolate;
}
.hg-raster::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--primair) 30%, transparent) 1.5px, transparent 1.5px),
		linear-gradient(to bottom, color-mix(in srgb, var(--primair) 30%, transparent) 1.5px, transparent 1.5px),
		linear-gradient(to right, color-mix(in srgb, var(--primair) 14%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--primair) 14%, transparent) 1px, transparent 1px);
	background-size: 168px 168px, 168px 168px, 42px 42px, 42px 42px;
	mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
	opacity: 0.42;
	pointer-events: none;
}


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

.hg-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(--ui);
	font-weight: 650;
	font-size: var(--t-s);
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--soepel), background var(--soepel), border-color var(--soepel);
}
.hg-knop:active { transform: translateY(1px); }

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

.hg-knop--rand {
	background: transparent;
	border-color: var(--lijn-sterk);
	color: var(--inkt);
}
.hg-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.
 */
.hg-knop--cluster,
.hg-knop--cluster:hover,
.hg-knop--cluster:focus {
	background: var(--cluster);
	color: #fff;
}
.hg-knop--cluster:hover { background: color-mix(in srgb, var(--cluster) 86%, #000); }

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

/* Stickerlabels: licht geroteerd, alsof ze erop geplakt zijn. */
.hg-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(--ui);
	font-weight: 700;
	font-size: var(--t-xs);
	line-height: 1.3;
	border: 1.5px solid color-mix(in srgb, var(--cluster) 45%, transparent);
}

.hg-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);
}
.hg-chip + .hg-chip { position: relative; }
.hg-chip:hover { color: var(--cluster); }

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

.hg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--papier);
	border-bottom: 1px solid var(--lijn);
}

.hg-header__balk {
	display: flex;
	align-items: center;
	gap: var(--r-3);
	min-height: 66px;
	width: min(100% - 2.5rem, 1440px);
}

.hg-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--inkt);
	font-family: var(--kop);
	font-weight: 700;
	font-size: 1.14rem;
	letter-spacing: -0.04em;
	flex-shrink: 0;
}
.hg-logo__punt { color: var(--primair); }
.hg-logo svg { flex-shrink: 0; }

.hg-nav {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 0 1 auto;
	min-width: 0;
}

.hg-nav__knop {
	appearance: none;
	background: none;
	border: 0;
	padding: 0.5rem 0.42rem;
	border-radius: 0;
	font-family: var(--kop);
	font-weight: 500;
	font-size: 0.855rem;
	letter-spacing: -0.014em;
	color: var(--inkt);
	cursor: pointer;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 0.22rem;
	position: relative;
	transition: background var(--soepel);
}
.hg-nav__knop::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	opacity: 0.55;
	transition: transform var(--soepel);
}
.hg-nav__knop:hover { background: var(--papier-2); }
.hg-nav__knop[aria-expanded="true"] { background: var(--papier-2); }
.hg-nav__knop[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }

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

/* Mega-menu */
.hg-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: hg-open 160ms cubic-bezier(0.32, 0.72, 0, 1);
}
.hg-mega[data-open="1"] { display: block; }

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

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

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

.hg-mega__segment > a.hg-mega__kop {
	display: block;
	font-family: var(--ui);
	font-size: var(--t-xs);
	font-weight: 700;
	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);
}
.hg-mega__segment > a.hg-mega__kop:hover { border-bottom-color: var(--cluster); }

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

.hg-mega__lijst { list-style: none; margin: 0; padding: 0; }
.hg-mega__lijst li + li { margin-top: 1px; }
.hg-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);
}
.hg-mega__lijst a:hover {
	background: var(--cluster-zacht);
	color: var(--inkt);
}
.hg-mega__aantal {
	font-size: var(--t-xs);
	color: var(--inkt-licht);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}
/* De gidsen onder een onderwerp in het mega-menu. Kleiner en ingesprongen,
   zodat het onderwerp de regel blijft die je scant en de gidsen de snelkoppeling
   zijn voor wie al weet wat hij zoekt. */
.hg-mega__gidsen {
	list-style: none;
	margin: 0.1rem 0 0.5rem;
	padding: 0 0 0 0.7rem;
	border-left: 1px solid var(--lijn);
}
.hg-mega__gidsen li + li { margin-top: 0; }
.hg-mega__gidsen a {
	display: block;
	padding: 0.18rem 0.4rem;
	margin-inline: -0.4rem;
	border-radius: var(--rond-s);
	font-size: 0.84rem;
	color: var(--inkt-licht);
	text-decoration: none;
	line-height: 1.35;
}
.hg-mega__gidsen a:hover {
	background: var(--cluster-zacht);
	color: var(--inkt);
}
.hg-mega__lijst--diep > li { margin-bottom: 0.35rem; }

/* Met de gidsen erbij worden de kolommen langer, dus mag het paneel breder
   uitwaaieren en zo nodig zelf schuiven in plaats van het scherm uit te lopen. */
.hg-mega__kolommen {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.hg-mega__binnen {
	max-height: min(74vh, 720px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.hg-mega__alles {
	display: inline-block;
	margin-top: var(--r-2);
	font-size: var(--t-s);
	font-weight: 650;
	text-decoration: none;
}
.hg-mega__alles::after { content: " →"; }

.hg-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;
}
.hg-mega__kaart h3 {
	margin: 0 0 var(--r-2);
	font-size: var(--t-l);
}
.hg-mega__kaart p {
	margin: 0 0 var(--r-4);
	color: var(--inkt-zacht);
	font-size: var(--t-s);
}
.hg-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 */
.hg-zoek {
	position: relative;
	flex: 0 1 260px;
	min-width: 150px;
}
.hg-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);
}
.hg-zoek input:focus { border-color: var(--primair); background: var(--papier); }
.hg-zoek__icoon {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--inkt-licht);
	pointer-events: none;
}
.hg-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;
}
.hg-zoek__resultaten[data-open="1"] { display: block; }
.hg-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);
}
.hg-zoek__resultaten a:hover,
.hg-zoek__resultaten li[aria-selected="true"] a { background: var(--papier-2); }
.hg-zoek__resultaten small { display: block; color: var(--inkt-licht); font-size: var(--t-xs); }

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

/* Het zoekveld is het onderdeel dat mag inleveren als de balk vol raakt. */
.hg-header__balk .hg-zoek { flex: 1 1 130px; min-width: 0; }

/* Het zoekveld is het eerste dat inlevert als de balk vol raakt: de
   homepage en /zoeken/ hebben allebei een eigen, groter veld. */
@media (max-width: 1400px) {
	.hg-header__balk .hg-zoek { display: none; }
}

.hg-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;
}

/* Zeven menu-items met uitgeschreven namen hebben samen 1193 pixels nodig,
   plus logo en knop. Daaronder past de rij niet meer en gaat hij over het
   zoekveld en de knop heen staan; vanaf hier dus het hamburgermenu. */
@media (max-width: 1260px) {
	.hg-nav, .hg-header__cta { display: none; }
	.hg-hamburger { display: inline-flex; }
	.hg-zoek { flex: 1 1 auto; }
}

/* Mobiel menu */
.hg-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;
}
.hg-mobiel[data-open="1"] { display: block; }
.hg-mobiel details {
	border-bottom: 1px solid var(--lijn);
}
.hg-mobiel summary {
	padding: var(--r-4) 0;
	font-family: var(--kop);
	font-weight: 640;
	font-size: var(--t-l);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.hg-mobiel summary::-webkit-details-marker { display: none; }
.hg-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);
}
.hg-mobiel details[open] summary::after { transform: rotate(-135deg); }
.hg-mobiel__segment { padding: 0 0 var(--r-4); }
.hg-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);
}
.hg-mobiel__segment ul { list-style: none; margin: 0; padding: 0; }
.hg-mobiel__segment a {
	display: block;
	padding: 0.4rem 0;
	color: var(--inkt-zacht);
	text-decoration: none;
}

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

.hg-kruimels { padding-block: var(--r-4) 0; }
.hg-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);
}
.hg-kruimels li { display: flex; align-items: center; gap: 0.35rem; }
.hg-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);
}
.hg-kruimels a { color: var(--inkt-zacht); text-decoration: none; }
.hg-kruimels a:hover { color: var(--cluster); text-decoration: underline; }
.hg-kruimels [aria-current] { color: var(--inkt); font-weight: 550; }

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

.hg-hero {
	padding-block: var(--r-7) var(--r-7);
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--lijn);
	background: var(--primair-zacht);
}
.hg-hero__binnen {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	gap: var(--r-8);
	align-items: center;
}
@media (max-width: 940px) {
	.hg-hero__binnen { grid-template-columns: 1fr; gap: var(--r-6); }
	.hg-hero__tekening { display: none; }
}
.hg-hero__maatregel {
	display: block;
	font-family: var(--kop);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--inkt-licht);
	font-variant-numeric: tabular-nums;
	margin-bottom: var(--r-4);
}
.hg-hero h1 {
	font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.4rem);
	margin-bottom: var(--r-4);
}
/* Eén woord onderstreept in oker. Oker betekent op deze site altijd
   hetzelfde, ook hier: dit is waar het over gaat. */
.hg-hero h1 em {
	font-style: normal;
	box-shadow: inset 0 -0.3em 0 var(--accent-zacht), inset 0 -0.34em 0 var(--accent);
}
.hg-hero__intro {
	font-size: var(--t-l);
	color: var(--inkt-zacht);
	max-width: 54ch;
	margin: 0 0 var(--r-5);
}
.hg-hero__zoek {
	max-width: 620px;
	margin: 0 0 var(--r-4);
	position: relative;
}
.hg-hero__zoek input {
	width: 100%;
	padding: 0.95rem 1.3rem 0.95rem 3.1rem;
	border-radius: 0;
	border: 1.5px solid var(--inkt);
	background: var(--papier);
	font: inherit;
	font-size: var(--t-l);
}
.hg-hero__zoek input:focus { border-color: var(--primair); }
.hg-hero__zoek .hg-zoek__icoon { left: 1.2rem; }
.hg-hero__tekening {
	border: 1px solid var(--lijn);
	background: var(--papier);
	padding: var(--r-4);
}
.hg-hero__tekening svg { width: 100%; height: auto; }

/* Veelgezochte klussen als tekstregel met scheidingslijntjes, niet als
   rij pillen. Leest als een register en niet als een filterbalk. */
.hg-hero__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--r-3);
	max-width: 860px;
}
.hg-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 */
.hg-ingangen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--r-4);
}
.hg-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);
}
.hg-ingang:hover { color: var(--inkt); }
.hg-ingang:hover h3 { color: var(--cluster); }
.hg-ingang h3 {
	margin: var(--r-3) 0 var(--r-2);
	font-size: var(--t-l);
	transition: color var(--soepel);
}
.hg-ingang p { margin: 0; color: var(--inkt-zacht); font-size: var(--t-s); max-width: 40ch; }
.hg-ingang__icoon { display: none; }
.hg-ingang__pijl {
	display: inline-block;
	margin-top: var(--r-3);
	font-family: var(--ui);
	font-weight: 700;
	font-size: var(--t-s);
	color: var(--cluster);
}

/* Werkwijze: drie genummerde kolommen, redactioneel in plaats van drie
   gekleurde vakjes met een icoontje erin. */
.hg-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);
}
.hg-werkwijze li {
	counter-increment: werkwijze;
	border-top: 2px solid var(--inkt);
	padding-top: var(--r-4);
}
.hg-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);
}
.hg-werkwijze h3 { margin: 0 0 var(--r-2); font-size: var(--t-l); }
.hg-werkwijze p { margin: 0; color: var(--inkt-zacht); }

/* Register: de vakgebieden als index, niet als kaartjes -------------------- */
/*
 * Een bouwtekening heeft geen kaartjes met een kleurstreepje en een icoontje
 * in een vakje; een bouwtekening heeft een legenda. Een gekleurd vierkantje,
 * een naam, een aantal, en eronder waar het over gaat. Dat is hier de vorm.
 * Het scheelt ruimte, er past meer op een scherm, en het is precies wat
 * iemand doet die zoekt: een lijst aflopen.
 */
.hg-register {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	column-gap: var(--r-8);
}
.hg-register > li {
	border-bottom: 1px solid var(--lijn);
	transition: background var(--soepel);
}
.hg-register > li:hover { background: var(--cluster-zacht); }

.hg-register__kop {
	display: flex;
	align-items: baseline;
	gap: var(--r-3);
	text-decoration: none;
	color: inherit;
	padding: var(--r-4) var(--r-3) var(--r-1);
}
.hg-register__sleutel {
	width: 11px;
	height: 11px;
	flex-shrink: 0;
	background: var(--cluster);
	align-self: center;
	transition: box-shadow var(--soepel);
}
.hg-register > li:hover .hg-register__sleutel { box-shadow: 0 0 0 3px var(--papier), 0 0 0 4px var(--cluster); }
.hg-register__naam {
	font-family: var(--kop);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.018em;
	color: var(--inkt);
}
.hg-register > li:hover .hg-register__naam { color: var(--cluster); }
.hg-register__leiding {
	flex: 1 1 1.5rem;
	min-width: 1.5rem;
	align-self: center;
	border-bottom: 1px dotted var(--lijn-sterk);
	height: 1px;
}
.hg-register__aantal {
	font-family: var(--kop);
	font-size: var(--t-xs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--inkt-licht);
	white-space: nowrap;
}
.hg-register__onder {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0 var(--r-3) var(--r-4) calc(11px + var(--r-3) + var(--r-3));
	font-size: var(--t-s);
}
.hg-register__onder li { display: inline-flex; }
.hg-register__onder li + li::before {
	content: "\00b7";
	color: var(--lijn-sterk);
	margin: 0 0.5rem;
}
.hg-register__onder a { color: var(--inkt-zacht); text-decoration: none; }
.hg-register__onder a:hover { color: var(--cluster); text-decoration: underline; }

@media (max-width: 720px) {
	.hg-register { grid-template-columns: 1fr; }
}

/* Rekenrijen: een rekenhulp verkoopt zichzelf met de uitkomst -------------- */
/*
 * Niet de naam van de tool is interessant maar wat eruit komt. Daarom staat
 * het voorbeeld met het echte bedrag op de regel zelf. De okeren knop is de
 * enige luide kleur op de pagina en betekent altijd hetzelfde: hier kun je
 * iets doen.
 */
.hg-rekenrijen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	column-gap: var(--r-8);
}
.hg-rekenrij {
	display: grid;
	grid-template-columns: 11px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--r-3);
	padding: var(--r-4) var(--r-3);
	border-bottom: 1px solid var(--lijn);
	text-decoration: none;
	color: inherit;
	transition: background var(--soepel);
}
.hg-rekenrij:hover { background: var(--cluster-zacht); }
.hg-rekenrij__sleutel { width: 11px; height: 11px; background: var(--cluster); }
.hg-rekenrij__naam {
	display: block;
	font-family: var(--kop);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.018em;
	color: var(--inkt);
}
.hg-rekenrij:hover .hg-rekenrij__naam { color: var(--cluster); }
.hg-rekenrij__voorbeeld {
	display: block;
	margin-top: 2px;
	font-size: var(--t-s);
	color: var(--inkt-zacht);
	font-variant-numeric: tabular-nums;
}
.hg-rekenrij__voorbeeld b { color: var(--inkt); font-weight: 600; }
.hg-rekenrij__actie {
	font-family: var(--kop);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--inkt);
	background: var(--accent);
	padding: 0.4rem 0.75rem;
	white-space: nowrap;
	transition: background var(--soepel), color var(--soepel);
}
.hg-rekenrij:hover .hg-rekenrij__actie { background: var(--inkt); color: var(--papier); }

@media (max-width: 720px) {
	.hg-rekenrijen { grid-template-columns: 1fr; }
}

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

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

.hg-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) {
	.hg-artikel { grid-template-columns: minmax(0, 1fr); gap: var(--r-6); }
}

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

.hg-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);
}
.hg-artikel__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }

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

.hg-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);
}

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

/* Voortgangsbalk */
.hg-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 */
.hg-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);
}
.hg-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(--ui);
	font-weight: 650;
	font-size: var(--t-s);
	cursor: pointer;
}
.hg-luister[hidden] { display: none; }
.hg-luister__balkjes { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.hg-luister__balkjes i {
	width: 3px;
	background: var(--cluster);
	border-radius: 2px;
	height: 5px;
	display: block;
}
.hg-luister[data-status="speelt"] .hg-luister__balkjes i {
	animation: hg-golf 900ms ease-in-out infinite;
}
.hg-luister[data-status="speelt"] .hg-luister__balkjes i:nth-child(2) { animation-delay: 140ms; }
.hg-luister[data-status="speelt"] .hg-luister__balkjes i:nth-child(3) { animation-delay: 280ms; }
@keyframes hg-golf {
	0%, 100% { height: 5px; }
	50% { height: 14px; }
}
.hg-luister__voortgang {
	font-variant-numeric: tabular-nums;
	font-size: var(--t-xs);
	color: var(--inkt-licht);
}

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

/* Benodigdheden */
.hg-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);
}
.hg-benodigd h2 {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--t-l);
}
.hg-benodigd h2::before { display: none; }
.hg-benodigd__stickers { grid-column: 1 / -1; display: flex; gap: var(--r-2); flex-wrap: wrap; }
.hg-benodigd h3 {
	margin: 0 0 var(--r-2);
	font-size: var(--t-s);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--inkt-licht);
}
.hg-benodigd ul { list-style: none; margin: 0; padding: 0; font-size: 0.93rem; }
.hg-benodigd li {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.3rem;
}
.hg-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 */
.hg-stappen { counter-reset: stap; list-style: none; padding: 0; margin: 0 0 var(--r-6); }
.hg-stap {
	counter-increment: stap;
	position: relative;
	padding-left: 3.4rem;
	padding-bottom: var(--r-5);
}
.hg-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(--ui);
	font-weight: 800;
	font-size: var(--t-m);
}
.hg-stap::after {
	content: "";
	position: absolute;
	left: 18px;
	top: 44px;
	bottom: 6px;
	border-left: 2.5px dotted color-mix(in srgb, var(--cluster) 55%, transparent);
}
.hg-stap:last-child::after { display: none; }
.hg-stap h3 { margin: 0.3rem 0 var(--r-2); font-size: var(--t-l); }
.hg-stap p:last-child { margin-bottom: 0; }

/* Praktijkcase met tape-accent */
.hg-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;
}
.hg-praktijk::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--accent);
}
.hg-praktijk h3 {
	margin: 0 0 var(--r-2);
	font-size: var(--t-l);
}
.hg-praktijk p:last-child { margin-bottom: 0; }
.hg-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. */
.hg-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;
}
.hg-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);
}
.hg-attentie svg { flex-shrink: 0; color: var(--let-op); margin-top: 2px; }
.hg-attentie p:last-child { margin-bottom: 0; }
.hg-attentie strong { color: var(--let-op); }

.hg-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;
}
.hg-tip svg { flex-shrink: 0; color: var(--goed); margin-top: 2px; }
.hg-tip p:last-child { margin-bottom: 0; }

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

/* Tabellen */
.hg-tabelhouder { overflow-x: auto; margin-bottom: var(--r-5); border-radius: var(--rond-m); border: 1px solid var(--lijn); }
.hg-tabel {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
	margin: 0;
	background: var(--papier);
}
.hg-tabel th, .hg-tabel td {
	padding: 0.65rem 0.9rem;
	text-align: left;
	border-bottom: 1px solid var(--lijn);
	vertical-align: top;
}
.hg-tabel th {
	background: var(--cluster-zacht);
	font-family: var(--ui);
	font-weight: 700;
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/*
 * De kolomkop blijft alleen staan binnen een tabel die zelf schuift, dus in een
 * ingebedde rekenhulp. Op een gewone pagina hoort hij gewoon mee te scrollen.
 *
 * Waarom: een houder met overflow wordt het referentiekader voor position
 * sticky. De kop bleef dan halverwege de tabel hangen en schoof over de rijen
 * heen, precies zoals op een gewone pagina te zien was.
 */
.hg-tool--compact .hg-tabel th {
	position: sticky;
	top: 0;
	z-index: 1;
}
.hg-tabel tbody tr:nth-child(even) { background: color-mix(in srgb, var(--papier-2) 60%, transparent); }
.hg-tabel tbody tr:hover { background: var(--cluster-zacht); }
.hg-tabel tr:last-child td { border-bottom: 0; }

/* Vragen */
.hg-vragen { margin-bottom: var(--r-6); }
.hg-vraag {
	border: 1px solid var(--lijn);
	border-radius: var(--rond-m);
	margin-bottom: var(--r-2);
	background: var(--papier);
	overflow: hidden;
}
.hg-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;
}
.hg-vraag summary::-webkit-details-marker { display: none; }
.hg-vraag summary::after {
	content: "+";
	font-size: 1.4rem;
	color: var(--cluster);
	flex-shrink: 0;
	line-height: 1;
}
.hg-vraag[open] summary::after { content: "−"; }
.hg-vraag[open] summary { border-bottom: 1px solid var(--lijn); }
.hg-vraag__antwoord { padding: var(--r-4); }
.hg-vraag__antwoord p:last-child { margin-bottom: 0; }

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

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

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

.hg-blok {
	border: 1px solid var(--lijn);
	border-radius: var(--rond-l);
	background: var(--papier);
	padding: var(--r-4);
	overflow: hidden;
}
.hg-blok--cluster {
	background: var(--cluster-zacht);
	border-color: color-mix(in srgb, var(--cluster) 26%, transparent);
}
.hg-blok__kop {
	display: flex;
	align-items: center;
	gap: var(--r-2);
	font-family: var(--ui);
	font-weight: 700;
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--inkt-licht);
	margin: 0 0 var(--r-3);
}
.hg-blok__kop svg { color: var(--cluster); }
.hg-blok ul { list-style: none; margin: 0; padding: 0; }
.hg-blok li + li { margin-top: 1px; }
.hg-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;
}
.hg-blok li a:hover { background: color-mix(in srgb, var(--cluster) 12%, transparent); color: var(--inkt); }
.hg-blok li a[aria-current] {
	background: var(--cluster);
	color: #fff;
	font-weight: 600;
}
.hg-blok__aantal { font-size: var(--t-xs); color: var(--inkt-licht); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.hg-blok li a[aria-current] .hg-blok__aantal { color: rgb(255 255 255 / 0.8); }
.hg-blok__voet { margin-top: var(--r-3); padding-top: var(--r-3); border-top: 1px dashed var(--lijn); }
.hg-blok__voet a { font-weight: 650; text-decoration: none; }
.hg-blok__voet a::after { content: " →"; }

/* Clusterkaart: de topical authority zichtbaar maken */
.hg-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;
}
.hg-clusterkaart__pad a { color: var(--cluster); text-decoration: none; font-weight: 600; }
.hg-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;
}
.hg-clusterkaart__hub svg { flex-shrink: 0; }
.hg-clusterkaart__hub a { color: #fff; text-decoration: none; font-family: var(--kop); font-weight: 800; }
.hg-clusterkaart__hub small { display: block; opacity: 0.82; font-weight: 400; font-size: var(--t-xs); }

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

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

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

.hg-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);
}
.hg-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);
}
.hg-tool__icoon { color: var(--cluster); flex-shrink: 0; }
.hg-tool__label {
	margin: 0 0 0.15rem;
	font-family: var(--ui);
	font-weight: 700;
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cluster);
}
.hg-tool__titel { margin: 0 0 0.2rem; font-size: var(--t-l); }
.hg-tool__intro { margin: 0; color: var(--inkt-zacht); font-size: var(--t-s); }
.hg-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) {
	.hg-tool__body { grid-template-columns: minmax(0, 1fr); }
}
.hg-tool__velden { display: grid; gap: var(--r-3); align-content: start; }
.hg-tool__zoek {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--r-3);
	padding: var(--r-4) var(--r-5);
}
@media (max-width: 560px) { .hg-tool__zoek { grid-template-columns: minmax(0, 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. */
.hg-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;
}
.hg-tool--compact .hg-tool__tabelhouder {
	max-height: 460px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.hg-tool__leeg { padding: var(--r-4); color: var(--inkt-licht); text-align: center; }
.hg-tool__voet {
	padding: var(--r-3) var(--r-5);
	border-top: 1px dashed var(--lijn);
	background: var(--papier-2);
}
.hg-tool__aannames { margin: 0; font-size: var(--t-xs); color: var(--inkt-licht); }
.hg-tool--compact { margin-block: var(--r-6); }

.hg-veld { display: grid; gap: 0.3rem; }
.hg-veld__label { font-size: var(--t-s); font-weight: 600; color: var(--inkt-zacht); }
.hg-veld input, .hg-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);
}
.hg-veld input:focus, .hg-veld select:focus { border-color: var(--cluster); }
.hg-veld__rij { display: flex; gap: var(--r-2); align-items: center; }
.hg-veld__eenheid { font-size: var(--t-xs); color: var(--inkt-licht); white-space: nowrap; }

.hg-tool__uitkomst {
	background: var(--cluster-zacht);
	border-radius: var(--rond-m);
	padding: var(--r-4);
	align-self: start;
}
.hg-uitkomst__hoofd {
	font-family: var(--kop);
	font-weight: 660;
	font-size: var(--t-2xl);
	line-height: 1.15;
	color: var(--inkt);
	margin: 0 0 var(--r-1);
}
.hg-uitkomst__onder { margin: 0 0 var(--r-3); color: var(--inkt-zacht); font-size: var(--t-s); }
.hg-uitkomst__lijst { list-style: none; margin: 0; padding: 0; font-size: var(--t-s); }
.hg-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);
}
.hg-uitkomst__lijst li:last-child { border-bottom: 0; }
.hg-uitkomst__lijst b { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Apparaten- en lagenlijst in de tools */
.hg-rijen { display: grid; gap: var(--r-2); }
.hg-rij {
	display: grid;
	grid-template-columns: 1fr 90px 32px;
	gap: var(--r-2);
	align-items: center;
}
.hg-rij select, .hg-rij input { padding: 0.45rem 0.6rem; font-size: var(--t-s); }
.hg-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;
}
.hg-rij__weg:hover { border-color: var(--let-op); color: var(--let-op); }
.hg-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);
}
.hg-toevoegen:hover { border-color: var(--cluster); background: var(--cluster-zacht); }

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

.hg-footer {
	background: var(--papier-2);
	border-top: 1px solid var(--lijn);
	padding-block: var(--r-7) var(--r-5);
	margin-top: var(--r-8);
}
.hg-footer__kolommen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--r-6);
	margin-bottom: var(--r-6);
}
.hg-footer h2 {
	font-size: var(--t-s);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--inkt-licht);
	margin: 0 0 var(--r-3);
}
.hg-footer ul { list-style: none; margin: 0; padding: 0; }
.hg-footer li { margin-bottom: 0.3rem; }
.hg-footer a { color: var(--inkt-zacht); text-decoration: none; font-size: var(--t-s); }
.hg-footer a:hover { color: var(--primair); text-decoration: underline; }
.hg-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);
}
.hg-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 -------------------------------------- */

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

.hg-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. */
.hg-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);
}
.hg-lijstitem:hover { border-left-color: var(--cluster); }
.hg-lijstitem:hover h3 a { color: var(--cluster); }
.hg-lijstitem__nummer {
	color: var(--inkt-licht);
	font-weight: 700;
	font-size: var(--t-s);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
}
.hg-lijstitem h3 { margin: 0 0 0.2rem; font-size: var(--t-l); }
.hg-lijstitem h3 a { color: inherit; text-decoration: none; }
.hg-lijstitem h3 a::after { content: ""; position: absolute; inset: 0; }
.hg-lijstitem p { margin: 0; color: var(--inkt-zacht); font-size: var(--t-s); }
.hg-lijstitem__meta {
	font-size: var(--t-xs);
	color: var(--inkt-licht);
	text-align: right;
	white-space: nowrap;
}

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

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

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


/* --- Mobiel vangnet -------------------------------------------------------
   Op een telefoon mag niets breder zijn dan het scherm. Een enkele brede tabel
   of een lang woord duwde anders de hele pagina open, waardoor je heen en weer
   kon vegen over lege ruimte. De oorzaak hoort per component opgelost te zijn;
   dit is de laatste zekerheid. */

html {
	overflow-x: hidden;
}

body {
	overflow-x: clip;
	max-width: 100%;
}

.hg-artikel,
.hg-artikel__hoofd,
.hg-inhoud,
.hg-zijbalk,
.hg-omhulsel {
	min-width: 0;
}

.hg-inhoud p,
.hg-inhoud li,
.hg-inhoud h2,
.hg-inhoud h3,
.hg-lijstitem h3,
.hg-kaart__titel {
	overflow-wrap: anywhere;
}

.hg-tabelhouder,
.hg-tool__tabelhouder {
	max-width: 100%;
}

@media (max-width: 640px) {
	/* Tabellen krijgen een vaste minimumbreedte mee, zodat de kolommen leesbaar
	   blijven en de tabel zelf zijwaarts schuift in plaats van de pagina. */
	.hg-tabel {
		min-width: 560px;
	}
	.hg-hero-beeld {
		border-radius: var(--rond-m);
	}
}

/* ==========================================================================
   Woonmap-componenten: het eigen karakter van dehuisgids.nl
   ========================================================================== */

/* Dossier-tabje: kaarten en blokken dragen linksboven een gekleurd tabje in
   de clusterkleur, als tabbladen in een goed georganiseerde map. */
.hg-tabkaart {
	position: relative;
	border: 1px solid var(--lijn);
	border-radius: 0 var(--rond-m) var(--rond-m) var(--rond-m);
	background: var(--kaart, var(--papier));
	margin-top: 1.4rem;
}
.hg-tabkaart::before {
	content: attr(data-tab);
	position: absolute;
	top: -1.4rem;
	left: -1px;
	padding: 0.22rem 0.85rem;
	background: var(--cluster);
	color: #fff;
	font-family: var(--ui);
	font-weight: 700;
	font-size: var(--t-xs);
	letter-spacing: 0.05em;
	border-radius: var(--rond-s) var(--rond-s) 0 0;
	line-height: 1.5;
}

/* Kerngetal-chip: een bedrag of percentage met zijn jaartal eraan vast.
   Nooit een cijfer zonder jaar; het jaartal is onderdeel van het component. */
.hg-kerngetallen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r-3);
	margin: 0 0 var(--r-5);
	padding: 0;
	list-style: none;
}
.hg-kerngetal {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: var(--r-3) var(--r-4);
	background: var(--kaart, var(--papier));
	border: 1px solid var(--lijn);
	border-left: 4px solid var(--cluster);
	border-radius: var(--rond-s);
	min-width: 130px;
}
.hg-kerngetal b {
	font-family: var(--kop);
	font-weight: 660;
	font-size: var(--t-xl);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--inkt);
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
}
.hg-kerngetal b .hg-kerngetal__jaar {
	font-family: var(--ui);
	font-weight: 700;
	font-size: var(--t-xs);
	color: var(--cluster);
	background: var(--cluster-zacht);
	border-radius: 4px;
	padding: 0.1rem 0.4rem;
	letter-spacing: 0.04em;
}
.hg-kerngetal span { font-size: var(--t-xs); color: var(--inkt-zacht); max-width: 24ch; }

/* Markeerstift: de ene zin per sectie die het antwoord draagt. */
.hg-markeer {
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--cluster) 26%, transparent) 0 42%,
		transparent 42%
	);
	padding-inline: 0.1em;
	border-radius: 2px;
	font-weight: 550;
}

/* Gevelrij: een rij Hollandse geveltjes als sectiescheiding en footerrand.
   Het SVG-silhouet komt uit functions.php; hier alleen maat en kleur. */
.hg-gevelrij {
	display: block;
	width: 100%;
	color: var(--lijn-sterk);
	margin: 0;
	line-height: 0;
}
.hg-gevelrij svg { width: 100%; height: 42px; display: block; }
.hg-gevelrij--cluster { color: color-mix(in srgb, var(--cluster) 38%, transparent); }

/* In de footer is de gevelrij de skyline die boven de footer uitsteekt,
   gevuld in de footerkleur zodat footer en straatje een geheel zijn. */
.hg-footer { position: relative; border-top: 0; }
.hg-footer .hg-gevelrij {
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	color: var(--papier-2);
}

/* Situatiekiezer: zes werkbladen, elk met dezelfde kleursleutel als in het
   register. Geen gekleurd tabje aan de bovenkant en geen icoon in een vakje:
   de kleur staat waar hij hoort, naast de naam van de situatie. */
.hg-situaties {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: var(--r-4);
}
.hg-situatie {
	position: relative;
	display: block;
	padding: var(--r-4);
	background: var(--papier);
	border: 1px solid var(--lijn);
	text-decoration: none;
	color: var(--inkt);
	transition: border-color var(--soepel), background var(--soepel);
}
.hg-situatie::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	background: var(--cluster);
	margin-right: 0.5rem;
	vertical-align: 0.02em;
}
.hg-situatie__tab {
	font-family: var(--kop);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--inkt-licht);
}
.hg-situatie:hover { border-color: var(--inkt); background: var(--cluster-zacht); }
.hg-situatie:hover h3 { color: var(--cluster); }
.hg-situatie h3 { margin: var(--r-2) 0 0.3rem; font-size: var(--t-l); transition: color var(--soepel); }
.hg-situatie p { margin: 0 0 var(--r-3); color: var(--inkt-zacht); font-size: var(--t-s); }
.hg-situatie ul { list-style: none; margin: 0; padding: 0; font-size: var(--t-s); }
.hg-situatie ul a {
	position: relative;
	z-index: 1;
	display: inline-flex;
	gap: 0.4rem;
	padding: 0.14rem 0;
	color: var(--inkt-zacht);
	text-decoration: none;
}
.hg-situatie ul a::before { content: "\2013"; color: var(--lijn-sterk); }
.hg-situatie ul a:hover { color: var(--cluster); text-decoration: underline; }
.hg-situatie > a.hg-situatie__vlak::after { content: ""; position: absolute; inset: 0; }

/* Ruimte boven een rij situaties, want de tabjes steken boven de kaart uit. */
.hg-situaties { padding-top: 1.1rem; }

/* Peildatum-regel onder tabellen en kerngetallen. */
.hg-peildatum {
	font-size: var(--t-xs);
	color: var(--inkt-licht);
	margin: calc(var(--r-4) * -0.5) 0 var(--r-4);
}
.hg-peildatum::before { content: "◷ "; }

/* Lopende tekst op een hubpagina.
   Een hub heeft geen zijbalk, dus een leeskolom die links blijft plakken laat
   het halve scherm leeg. De kolom staat daarom gecentreerd, en tabellen mogen
   erbuiten treden omdat die de breedte wel nodig hebben. */
.hg-hubtekst .hg-inhoud {
	margin-inline: auto;
}
.hg-hubtekst .hg-tabelhouder,
.hg-hubtekst .hg-vragen {
	width: min(100%, 920px);
	max-width: none;
	margin-inline: calc((var(--breedte-tekst) - min(100%, 920px)) / 2);
}

@media (max-width: 1000px) {
	.hg-hubtekst .hg-tabelhouder,
	.hg-hubtekst .hg-vragen {
		width: 100%;
		margin-inline: 0;
	}
}

/* Verantwoording: bronnen en de inhoudelijke controle -------------------- */

/* Het redactionele beleid: een eigen regel onder het controleblok. */
.hg-controle__beleid {
	margin: var(--r-3) 0 0;
	font-size: var(--t-s);
	font-weight: 600;
}

.hg-verantwoording {
	margin-top: var(--r-7);
	padding-top: var(--r-5);
	border-top: 2px solid var(--lijn);
	max-width: var(--breedte-tekst);
}
.hg-verantwoording h2 {
	margin: 0 0 var(--r-4);
	font-size: var(--t-l);
}
.hg-verantwoording h2::before { display: none; }

/* Genummerde bronnenlijst: leest als een notenapparaat, niet als linkfarm. */
.hg-bronnen {
	list-style: none;
	counter-reset: bron;
	margin: 0 0 var(--r-5);
	padding: 0;
	font-size: var(--t-s);
}
.hg-bronnen li {
	counter-increment: bron;
	position: relative;
	padding: 0.45rem 0 0.45rem 2rem;
	border-bottom: 1px dashed var(--lijn);
	line-height: 1.5;
}
.hg-bronnen li:last-child { border-bottom: 0; }
.hg-bronnen li::before {
	content: counter(bron);
	position: absolute;
	left: 0;
	top: 0.5rem;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: var(--cluster-zacht);
	color: var(--cluster);
	font-size: var(--t-xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	display: grid;
	place-items: center;
}
.hg-bronnen a { color: var(--inkt); text-decoration-color: var(--lijn-sterk); }
.hg-bronnen a:hover { color: var(--cluster); }
.hg-bronnen__uitgever { color: var(--inkt-zacht); }
.hg-bronnen__uitgever::before { content: " · "; color: var(--inkt-licht); }
.hg-bronnen__datum { color: var(--inkt-licht); font-size: var(--t-xs); white-space: nowrap; }
.hg-bronnen__datum::before { content: " · "; }

/* Controleblok: hetzelfde dossier-tabje als de rest van de site. */
.hg-controle {
	position: relative;
	margin-top: 1.4rem;
	padding: var(--r-4);
	background: var(--cluster-zacht);
	border: 1px solid color-mix(in srgb, var(--cluster) 26%, transparent);
	border-radius: 0 var(--rond-m) var(--rond-m) var(--rond-m);
}
.hg-controle::before {
	content: attr(data-tab);
	position: absolute;
	top: -1.4rem;
	left: -1px;
	padding: 0.22rem 0.85rem;
	background: var(--cluster);
	color: #fff;
	font-family: var(--ui);
	font-weight: 700;
	font-size: var(--t-xs);
	letter-spacing: 0.05em;
	border-radius: var(--rond-s) var(--rond-s) 0 0;
	line-height: 1.5;
}
.hg-controle__kop {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 0 0 var(--r-3);
	font-family: var(--kop);
	font-weight: 620;
	font-size: var(--t-l);
	line-height: 1.3;
}
.hg-controle__kop svg { color: var(--cluster); flex-shrink: 0; }
.hg-controle__datum {
	font-family: var(--ui);
	font-weight: 650;
	font-size: var(--t-xs);
	color: var(--cluster);
	background: var(--kaart, #fff);
	border-radius: 4px;
	padding: 0.12rem 0.45rem;
}
.hg-controle__punten {
	list-style: none;
	margin: 0 0 var(--r-3);
	padding: 0;
	font-size: var(--t-s);
}
.hg-controle__punten li {
	display: flex;
	gap: 0.55rem;
	padding: 0.22rem 0;
	color: var(--inkt-zacht);
}
.hg-controle__punten li::before {
	content: "";
	flex-shrink: 0;
	width: 0.5rem;
	height: 0.85rem;
	margin-top: 0.28rem;
	border-right: 2px solid var(--goed);
	border-bottom: 2px solid var(--goed);
	transform: rotate(38deg);
}
.hg-controle__voet {
	margin: 0;
	padding-top: var(--r-3);
	border-top: 1px dashed color-mix(in srgb, var(--cluster) 30%, transparent);
	font-size: var(--t-xs);
	color: var(--inkt-zacht);
}

/* Zijbalk: het vertrouwenssignaal bovenaan.
   Compacte samenvatting van de controle en de bronnen, met een sprong naar de
   volledige verantwoording onder het artikel. Groen omdat het bevestigt. */
.hg-zijcontrole {
	border-color: color-mix(in srgb, var(--goed) 30%, transparent);
	background: var(--goed-zacht);
}
.hg-zijcontrole__kop {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin: 0 0 0.2rem;
	font-family: var(--ui);
	font-weight: 700;
	font-size: var(--t-s);
	line-height: 1.35;
	color: var(--inkt);
}
.hg-zijcontrole__kop svg { color: var(--goed); flex-shrink: 0; margin-top: 1px; }
.hg-zijcontrole__datum,
.hg-zijcontrole__bronnen {
	margin: 0 0 0.3rem;
	font-size: var(--t-xs);
	color: var(--inkt-zacht);
	line-height: 1.45;
}
/* Twee losse regels, niet twee links achter elkaar op één regel: de sprong
   naar de verantwoording en de link naar het beleid zijn verschillende
   dingen en moeten los aanklikbaar zijn. */
.hg-zijcontrole__meer {
	display: block;
	margin-top: var(--r-2);
	font-size: var(--t-xs);
	font-weight: 600;
	text-decoration: none;
	color: var(--primair);
}
.hg-zijcontrole__meer[href^="#"]::after { content: " ↓"; }
.hg-zijcontrole__meer:not([href^="#"])::after { content: " →"; }
.hg-zijcontrole__meer:hover { color: var(--inkt); text-decoration: underline; }

/* De verantwoording krijgt scroll-margin, anders verdwijnt de kop onder de
   plakkende header wanneer je vanuit de zijbalk springt. */
.hg-verantwoording { scroll-margin-top: 90px; }

/* Grafiek: zelfgetekende SVG bij een tabel -------------------------------- */

.hg-grafiek {
	margin: 0 0 var(--r-5);
	padding: var(--r-4);
	background: var(--kaart, var(--papier));
	border: 1px solid var(--lijn);
	border-radius: var(--rond-m);
	color: var(--inkt);
}
.hg-grafiek__titel {
	font-family: var(--kop);
	font-weight: 620;
	font-size: var(--t-l);
	line-height: 1.25;
	margin: 0 0 var(--r-3);
}
.hg-grafiek__doek { width: 100%; }
.hg-grafiek__doek svg { width: 100%; height: auto; display: block; overflow: visible; }
.hg-grafiek__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r-3);
	list-style: none;
	margin: 0 0 var(--r-3);
	padding: 0;
	font-size: var(--t-xs);
	color: var(--inkt-zacht);
}
.hg-grafiek__legenda li { display: flex; align-items: center; gap: 0.4rem; }
.hg-grafiek__legenda span {
	width: 0.85rem;
	height: 0.2rem;
	border-radius: 2px;
	display: inline-block;
}
.hg-grafiek__voet {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--r-3);
	margin: var(--r-3) 0 0;
	padding-top: var(--r-2);
	border-top: 1px dashed var(--lijn);
	font-size: var(--t-xs);
	color: var(--inkt-licht);
}
.hg-grafiek__voet span + span::before { content: "· "; }

@media (max-width: 640px) {
	.hg-grafiek { padding: var(--r-3); }
	.hg-grafiek__doek svg { min-height: 220px; }
}