/* =============================================================
   ComfortGids — designsysteem v2 "Helder"
   Richting: 1KOMMA5°-achtig maar licht, met het ComfortGids-groen.
   Eén lettertype (Barlow), lichte secties, groen als merktoon
   (woordaccent in koppen, CTA's, chips), donkere fotohero.
   Sinds 1 oktober 2026 met de kleuren van het logo voor diepte: teal
   en blauw in verloop en schaduw, oranje als warme gloed. Regels in
   docs/designsysteem.md, "Kleur en diepte".
   ============================================================= */

:root {
	/* Tekst is zacht donkergroen-grijs, geen hard zwart (2 okt 2026). */
	--cg-ink: #22302b;
	--cg-ink-2: hsl(158, 7%, 37%);
	--cg-ink-3: hsl(158, 6%, 51%);
	/* Het ComfortGids-merkgroen van comfortgids.nl: #11B96C (rgb 17 185 108).
	   Als gradiëntfamilie toegepast; tinten gekozen zodat tekst op wit én
	   op donker aan de contrastnorm blijft voldoen. */
	--cg-merkgroen: #11b96c;
	--cg-accent: #098151;                   /* links en kleine accenten op wit (4,9:1 op wit) */
	--cg-accent-fel: #5fe3a8;               /* accent op donkere foto */
	--cg-groen-zacht: rgba(17, 185, 108, 0.1);
	/* De andere kleuren van het logo. Teal en blauw geven het groen diepte
	   (verloop, gloed, schaduw). Oranje en geel zijn de warmte: altijd als
	   gloed of klein accent naast het blauw, nooit als vlak. */
	--cg-teal: #07908a;
	--cg-blauw: #178fd4;
	--cg-oranje: #fb8119;
	--cg-geel: #ffd345;
	/* Stops voor een radiale gloed. Vloeiend: oranje, goud, en dan in kleine
	   stappen via lichtgroen weg, zodat er geen rand of vlek ontstaat en het
	   nergens grauw wordt. */
	--cg-gloed-warm: hsla(30, 100%, 60%, 0.95) 0%, hsla(38, 98%, 62%, 0.82) 16%, hsla(52, 88%, 64%, 0.6) 32%, hsla(84, 66%, 66%, 0.4) 48%, hsla(130, 55%, 64%, 0.22) 64%, hsla(160, 58%, 60%, 0.08) 80%, hsla(170, 60%, 58%, 0) 100%;
	--cg-grad-merk: linear-gradient(105deg, #0ea86b 0%, #09958c 50%, #178fd4 100%);
	/* Het woordaccent in koppen: het knopgroen, vrijwel effen. */
	--cg-grad-tekst: linear-gradient(100deg, #31bc87 0%, #2bb07d 100%);
	--cg-grad-tekst-donker: linear-gradient(100deg, #6ceab1 0%, #58dba0 100%);
	/* De knop: #31BC87 met een nauwelijks zichtbaar verloop naar iets
	   donkerder groen, zoals de knop van 1KOMMA5° in zijn eigen kleur. Geen
	   wit in het verloop. De hover verandert het verloop niet. */
	--cg-knop: #31bc87;
	--cg-grad-knop: linear-gradient(100deg, #33bf89 0%, #2aad7b 100%);
	--cg-grad-knop-hover: var(--cg-grad-knop);
	--cg-amber-text: hsl(30, 85%, 32%);
	--cg-amber-zacht: hsl(38, 75%, 92%);
	--cg-blauw-text: hsl(215, 45%, 34%);
	--cg-blauw-zacht: hsl(215, 50%, 93%);
	--cg-wit: #fff;
	--cg-grijs: hsl(150, 10%, 97%);
	--cg-gebroken: #f2f8f5;                 /* zacht groen-wit, om en om met wit op de pagina */
	--cg-rand: hsl(220, 14%, 90%);
	--cg-hairline: hsl(220, 12%, 92%);
	--cg-donker: hsl(200, 25%, 8%);
	--cg-donker-tekst: hsl(210, 12%, 72%);

	--cg-r: 16px;
	--cg-r-knop: 999px;                     /* knoppen, velden en kickers: de pil */
	--cg-r-kaart: 10px;                     /* kaarten, panelen en foto's */
	--cg-schaduw: 0 1px 2px hsla(175, 40%, 12%, 0.05), 0 26px 50px -28px hsla(178, 70%, 24%, 0.38);   /* schaduw met kleur, niet grijs */

	--cg-font: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--cg-header-h: 76px;
	/* Ruim maar niet uitgerekt: de inhoud loopt mee tot 1440 px. Foto's en
	   vlakken mogen van rand tot rand; tekst en rasters blijven binnen deze
	   maat. */
	--cg-container: 1440px;
	--cg-gutter: clamp(20px, 4.5vw, 56px);
}

/* ---------- basis ---------- */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	font-family: var(--cg-font);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--cg-ink);
	background: var(--cg-wit);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cg-font);
	color: var(--cg-ink);
	text-wrap: balance;
	margin: 0 0 0.5em;
}
h1 {
	font-size: clamp(2.6rem, 5.2vw, 4.4rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.045em;
}
h2 {
	font-size: clamp(1.95rem, 2.9vw, 3.6rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.035em;
}
h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }

/* Het 1KOMMA5°-woordaccent: één woordgroep per kop in het merkgroen,
   als gradiënt over de letters (met kleur-fallback eronder). */
.cg-groen {
	color: var(--cg-accent);
	background: var(--cg-grad-tekst);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

a { color: var(--cg-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--cg-ink); }

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

::selection { background: var(--cg-groen-zacht); }

.cg-container {
	max-width: var(--cg-container);
	margin-inline: auto;
	padding-inline: var(--cg-gutter);
}
.cg-container--smal { max-width: 760px; }
/* De inhoud begint direct onder de menubalk; WordPress zet er anders 20 px
   wit tussen, en dan sluit een foto van rand tot rand niet aan. */
.wp-site-blocks > .cg-main { margin-block-start: 0; }

.cg-skiplink {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 200;
	background: var(--cg-ink);
	color: #fff;
	padding: 0.6rem 1.1rem;
	border-radius: var(--cg-r-knop);
	text-decoration: none;
	transition: top 0.2s ease;
}
.cg-skiplink:focus-visible { top: 12px; color: #fff; }

.cg-main { overflow-x: clip; }
.wp-block-template-part { display: contents; }

/* ---------- sectiekoppen ---------- */

.cg-streep { display: none; }

/* Kickers als chips, zoals de 1KOMMA5°-sectielabels ("Slim kiezen"). */
.cg-kicker {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--cg-accent);
	background: var(--cg-groen-zacht);
	border-radius: var(--cg-r-knop);
	padding: 0.35rem 0.9rem;
	margin: 0 0 1.1rem;
}

.cg-sectiekop { max-width: 40em; margin: 0 0 clamp(2.25rem, 4.5vw, 3.75rem); }
.cg-sectiekop--midden { margin-inline: auto; text-align: center; }
.cg-lede {
	font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
	line-height: 1.6;
	color: var(--cg-ink-2);
	margin: 0.5rem 0 0;
	max-width: 36em;
}
.cg-sectiekop--midden .cg-lede { margin-inline: auto; }

.cg-hoofdstuk { padding-block: clamp(4rem, 8.5vw, 7.5rem); }
.cg-hoofdstuk--mint { background: var(--cg-grijs); }
/* Om en om met wit, te beginnen bij de hero: rustiger dan alles wit, en elke
   sectie is zonder lijnen of kaders van de volgende te onderscheiden. */
.cg-hoofdstuk--gebroken { background: var(--cg-gebroken); }
/* Op gebroken wit haalt het accentgroen in de kickerchip de AA-norm net niet
   (4,2:1 op 13px); een tint dieper wel. */
.cg-hoofdstuk--gebroken .cg-kicker { color: #076a42; }

.cg-pijllink {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45rem;
	font-weight: 650;
	color: var(--cg-accent);
	text-decoration: none;
}
.cg-pijllink::after { content: "\2192"; transition: transform 0.2s ease; }
.cg-pijllink:hover::after { transform: translateX(4px); }
.cg-pijllink:hover { color: var(--cg-ink); }

/* ---------- knoppen ---------- */

.cg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	font-family: var(--cg-font);
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	border-radius: var(--cg-r-knop);
	padding: 0.95rem 1.8rem;
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
/* De primaire knop: effen #31BC87 met een nauwelijks zichtbaar verloop naar
   iets donkerder groen, en een pijl. Bij hover schuift de pijl op en komt
   de knop iets omhoog; het verloop blijft gelijk. */
.cg-btn--primair { background: var(--cg-grad-knop); background-origin: border-box; color: #fff; font-weight: 600; box-shadow: 0 12px 26px -14px hsla(157, 59%, 36%, 0.7); }
.cg-btn--primair::after { content: ""; flex: none; width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16M14 6l6 6-6 6"/></svg>') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16M14 6l6 6-6 6"/></svg>') center / contain no-repeat; transition: transform 0.25s ease; }
.cg-btn--primair:hover { background: var(--cg-grad-knop-hover); background-origin: border-box; color: #fff; transform: translateY(-1px); filter: brightness(1.03); box-shadow: 0 18px 30px -14px hsla(157, 59%, 36%, 0.75); }
.cg-btn--primair:hover::after { transform: translateX(3px); }
/* In de smalle menubalk is geen plaats voor de pijl. */
@media (max-width: 899px) { .cg-header .cg-btn--primair::after { display: none; } }
.cg-btn--secundair { background: transparent; color: var(--cg-ink); border-color: var(--cg-rand); }
.cg-btn--secundair:hover { border-color: var(--cg-ink); }
.cg-btn--groot { font-size: 1.0625rem; padding: 1.1rem 2.2rem; }
.cg-btn--klein { font-size: 0.9375rem; padding: 0.6rem 1.35rem; }
.cg-btn__kort { display: none; }
/* Telefoon (20 okt 2026): een knop is nooit breder dan zijn plek. Past de
   tekst niet op één regel, dan loopt hij netjes over twee regels in plaats
   van over de rand. */
@media (max-width: 479px) {
	.cg-btn { max-width: 100%; white-space: normal; text-wrap: balance; }
}

/* ---------- header ---------- */

.cg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: hsla(0, 0%, 100%, 0.92);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--cg-hairline);
	transition: transform 0.25s ease;
}
.cg-header.is-verborgen { transform: translateY(-100%); }
.admin-bar .cg-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .cg-header { top: 46px; }
}

.cg-header__in {
	display: flex;
	align-items: center;
	gap: 2rem;
	min-height: var(--cg-header-h);
}

.cg-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	text-decoration: none;
	margin-right: auto;
}
/* Hover op het logo: rustig en klein, zoals op een luxe site. Het beeldmerk
   draait een klein stukje en komt iets naar voren; de naam kleurt langzaam
   naar het merkgroen en krijgt een fractie meer lucht tussen de letters.
   Lange, zachte overgang; geen hele draai meer (12 okt 2026, Gideon: "niet
   zo snel en overdreven"). */
.cg-brand__logo { width: 36px; height: 36px; transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.cg-brand:hover .cg-brand__logo,
.cg-brand:focus-visible .cg-brand__logo { transform: rotate(14deg) scale(1.05); }
.cg-brand__naam {
	font-size: 1.1875rem;
	font-weight: 650;
	letter-spacing: -0.02em;
	color: var(--cg-ink);
	transition: color 0.8s cubic-bezier(0.22, 1, 0.36, 1), letter-spacing 1.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.cg-brand:hover .cg-brand__naam,
.cg-brand:focus-visible .cg-brand__naam { color: #1f8f66; letter-spacing: -0.008em; }
@media (prefers-reduced-motion: reduce) {
	.cg-brand__logo, .cg-brand__naam { transition: none; }
	.cg-brand:hover .cg-brand__logo,
	.cg-brand:focus-visible .cg-brand__logo { transform: none; }
	.cg-brand:hover .cg-brand__naam,
	.cg-brand:focus-visible .cg-brand__naam { letter-spacing: -0.02em; }
}

.cg-nav__lijst {
	display: flex;
	align-items: center;
	gap: clamp(1.1rem, 1.9vw, 1.9rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.cg-nav__lijst > li > a {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--cg-ink-2);
	text-decoration: none;
	padding: 0.4rem 0;
}
.cg-nav__lijst > li > a:hover { color: var(--cg-ink); }
.cg-nav__lijst > li > a[aria-current="page"] { color: var(--cg-ink); }

/* ---------- uitklapvakken in het hoofdmenu (17 okt 2026) ----------
   Onderwerpen en Rekentools openen een rustig vak met de pagina's die er
   zijn. Op desktop zweeft het vak onder de knop; op een telefoon klapt het
   open in het menu. Script: main.js (data-cg-menu). */
.cg-nav__item { position: relative; }
.cg-nav__knop { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0; border: 0; background: none; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--cg-ink-2); cursor: pointer; transition: color 0.2s ease; }
.cg-nav__knop::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform 0.25s ease; }
.cg-nav__knop:hover, .cg-nav__knop[aria-expanded="true"], .cg-nav__knop[data-cg-hier] { color: var(--cg-ink); }
.cg-nav__knop[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
.cg-nav__knop:focus-visible { outline: 2px solid #31bc87; outline-offset: 4px; border-radius: 4px; }

/* Het vak begint links onder zijn knop, zodat het ook op een laptop van 1024 breed binnen beeld blijft. */
.cg-menu { position: absolute; top: calc(100% + 18px); left: -1.25rem; z-index: 60; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); width: 640px; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px hsla(160, 25%, 30%, 0.08), 0 30px 60px -24px hsla(160, 30%, 14%, 0.3); animation: cg-menu-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both; }
.cg-menu[hidden] { display: none; }
/* Een brug tussen knop en vak, zodat het vak niet sluit als je er met de muis naartoe gaat. */
.cg-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
@keyframes cg-menu-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cg-menu__kol { display: flex; flex-direction: column; padding: 1.25rem 1.25rem 1.1rem; }
.cg-menu__kol--zacht { background: #f4f8f6; }
.cg-menu__kop { margin: 0 0 0.6rem 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #1f8f66; }
.cg-menu__lijst { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.cg-menu__link { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 0.8rem; padding: 0.45rem 0.5rem; border-radius: 12px; text-decoration: none; color: var(--cg-ink); transition: background-color 0.2s ease; }
a.cg-menu__link:hover { background: #f1f7f4; }
.cg-menu__beeld { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #eef5f1; overflow: hidden; }
.cg-menu__beeld img { width: 84%; height: 84%; object-fit: contain; }
.cg-menu__tekst { display: grid; gap: 0.05rem; min-width: 0; }
.cg-menu__tekst b { font-size: 0.9875rem; font-weight: 600; }
.cg-menu__tekst small { font-size: 0.8125rem; line-height: 1.35; color: var(--cg-ink-2); }
.is-binnenkort .cg-menu__link { opacity: 0.55; cursor: default; }
.is-binnenkort .cg-menu__beeld img { filter: grayscale(1); }
.cg-menu__lijst--tekst a { display: block; padding: 0.45rem 0.5rem; border-radius: 10px; font-size: 0.9375rem; font-weight: 500; color: var(--cg-ink); text-decoration: none; transition: background-color 0.2s ease; }
.cg-menu__lijst--tekst a:hover { background: #fff; }
.cg-menu__alles { align-self: flex-start; margin: auto 0 0; padding: 0.9rem 0.5rem 0.1rem; font-size: 0.9375rem; font-weight: 600; color: #1f8f66; text-decoration: none; }
.cg-menu__alles::after { content: " \2192"; }
.cg-menu__alles:hover { text-decoration: underline; text-underline-offset: 4px; }
.cg-menu a:focus-visible { outline: 2px solid #31bc87; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cg-menu { animation: none; } }

.cg-header__acties { display: flex; align-items: center; gap: 0.9rem; }

.cg-navtoggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: 1px solid var(--cg-rand);
	border-radius: var(--cg-r-knop);
	padding: 0.5rem 1rem;
	font-family: var(--cg-font);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--cg-ink);
	cursor: pointer;
}
.cg-navtoggle__icoon { display: inline-flex; flex-direction: column; gap: 4px; }
.cg-navtoggle__icoon i {
	display: block;
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: var(--cg-ink);
	transition: transform 0.2s ease;
}
.cg-navopen .cg-navtoggle__icoon i:first-child { transform: translateY(3px) rotate(45deg); }
.cg-navopen .cg-navtoggle__icoon i:last-child { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 1023px) {
	:root { --cg-header-h: 62px; }
	.cg-navtoggle { display: inline-flex; }
	.cg-nav {
		position: fixed;
		inset: var(--cg-header-h) 0 auto 0;
		background: var(--cg-wit);
		border-bottom: 1px solid var(--cg-hairline);
		box-shadow: 0 24px 40px -24px hsla(220, 20%, 10%, 0.25);
		padding: 0.75rem var(--cg-gutter) 1.5rem;
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}
	.cg-navopen .cg-nav { transform: none; opacity: 1; visibility: visible; }
	.cg-nav__lijst { flex-direction: column; align-items: stretch; gap: 0; }
	.cg-nav__lijst > li { border-bottom: 1px solid var(--cg-hairline); }
	.cg-nav__lijst > li:last-child { border-bottom: 0; }
	.cg-nav__lijst > li > a, .cg-nav__knop { display: flex; justify-content: space-between; width: 100%; padding: 1rem 0.25rem; color: var(--cg-ink); font-weight: 700; font-size: 1.125rem; }
	/* Telefoon en tablet: het menu scrolt als het langer is dan het scherm; een vak klapt open onder zijn knop. */
	.cg-nav { max-height: calc(100dvh - var(--cg-header-h)); overflow-y: auto; overscroll-behavior: contain; }
	.cg-menu { position: static; display: grid; grid-template-columns: minmax(0, 1fr); width: auto; margin: 0 0 0.75rem; border-radius: 16px; box-shadow: none; background: #f7faf8; transform: none; animation: none; }
	.cg-menu::before { display: none; }
	.cg-menu__kol { padding: 0.75rem 0.5rem 0.6rem; }
	.cg-menu__kol--zacht { background: none; border-top: 1px solid var(--cg-hairline); }
	.cg-menu__lijst--tekst a:hover { background: #eef5f1; }
}
@media (max-width: 480px) {
	.cg-navtoggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.cg-navtoggle { padding: 0.5rem 0.7rem; }
	.cg-brand__naam { font-size: 1.0625rem; }
	.cg-brand__logo { width: 30px; height: 30px; }
	.cg-header__in { gap: 0.75rem; }
	.cg-header__acties { gap: 0.5rem; }
	.cg-header .cg-btn__lang { display: none; }
	.cg-header .cg-btn__kort { display: inline; }
	/* De merknaam wijkt als de CTA breed wordt; hij mag er nooit overheen lopen. */
	.cg-brand { min-width: 0; }
	.cg-brand__naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	/* De knop in de menubalk blijft altijd op één regel. */
	.cg-header .cg-btn { flex: none; white-space: nowrap; }
}
@media (max-width: 374px) {
	/* Heel smalle telefoon (320 tot 374 px): alles in de menubalk iets compacter, zodat de merknaam heel blijft. */
	.cg-header__in { gap: 0.5rem; }
	.cg-header__acties { gap: 0.35rem; }
	.cg-brand { gap: 0.45rem; }
	.cg-brand__logo { width: 26px; height: 26px; }
	.cg-brand__naam { font-size: 1rem; }
	.cg-header .cg-btn--klein { padding: 0.5rem 0.85rem; font-size: 0.875rem; }
	.cg-navtoggle { padding: 0.45rem 0.55rem; }
}

/* ---------- hero: bento met fotokaart (Energie Morgen-patroon) ---------- */

.cg-hero {
	background: var(--cg-gebroken);
	padding-block: clamp(1.1rem, 2.2vw, 1.75rem) clamp(2.75rem, 5.5vw, 4.5rem);
}
.cg-hero h1 {
	font-size: clamp(2.1rem, 3.8vw, 3.3rem);
	color: #fff;
}
.cg-hero .cg-groen {
	color: var(--cg-accent-fel);
	background: var(--cg-grad-tekst-donker);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.cg-hero__zij {
	display: flex;
	flex-direction: column;
	gap: clamp(0.9rem, 1.6vw, 1.25rem);
}
.cg-hero__zijknop {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 0.9688rem;
	color: var(--cg-accent);
}
.cg-hero__zijknop::after { content: "\2192"; transition: transform 0.2s ease; }

/* ---------- regels veranderen ---------- */
.cg-regel {
	background: var(--cg-grijs);
	border-radius: var(--cg-r);
	padding: 1.5rem 1.6rem 1.4rem;
}
.cg-regel h3 { font-size: 1.0625rem; margin-bottom: 0.35rem; }
.cg-regel p { margin: 0; color: var(--cg-ink-2); font-size: 0.9375rem; line-height: 1.6; }
/* ---------- werkwijze ---------- */

.cg-werkwijze__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}
.cg-werkwijze__figuur { margin: 0; }
/* Foto's bij werkwijze en vragen: een zachte schaduw, geen gekleurde gloed. */
.cg-werkwijze__figuur img { box-shadow: 0 30px 60px -36px hsla(160, 30%, 14%, 0.4); }
.cg-werkwijze__figuur img {
	width: 100%;
	aspect-ratio: 4 / 3.6;
	object-fit: cover;
	object-position: 58% 40%;
	border-radius: var(--cg-r-kaart);
}
.cg-stappen { list-style: none; margin: 1.5rem 0 1.9rem; padding: 0; }
.cg-stappen li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.1rem;
	padding: 1.05rem 0;
	border-top: 1px solid var(--cg-hairline);
}
.cg-stappen__nr {
	font-weight: 800;
	font-size: 1rem;
	color: var(--cg-accent);
	background: var(--cg-grad-tekst);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.6;
}
.cg-stappen h3 { font-size: 1.0625rem; margin-bottom: 0.2rem; }
.cg-stappen p { margin: 0; color: var(--cg-ink-2); font-size: 0.9375rem; line-height: 1.6; max-width: 38em; }

/* ---------- faq ---------- */
.cg-faq__lijst { border-top: 1px solid var(--cg-hairline); }
.cg-vraag { border-bottom: 1px solid var(--cg-hairline); }
.cg-vraag summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0.1rem;
	font-weight: 600;
	font-size: 1.0313rem;
	cursor: pointer;
	list-style: none;
}
.cg-vraag summary::-webkit-details-marker { display: none; }
.cg-vraag summary::after {
	content: "+";
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--cg-groen-zacht);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--cg-accent);
	transition: transform 0.2s ease;
}
.cg-vraag[open] summary::after { transform: rotate(45deg); }
.cg-vraag p {
	margin: 0;
	padding: 0 0.1rem 1.15rem;
	color: var(--cg-ink-2);
	font-size: 0.9688rem;
	line-height: 1.65;
	max-width: 44em;
}

/* ---------- kennisbank ---------- */

.cg-index { border-top: 1px solid var(--cg-hairline); }
.cg-index__rij {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: baseline;
	gap: 0.35rem 2rem;
	padding: 1.25rem 0.25rem;
	border-bottom: 1px solid var(--cg-hairline);
	text-decoration: none;
	color: var(--cg-ink);
	transition: background-color 0.2s ease;
}
.cg-index__rij:hover { background: var(--cg-grijs); }
.cg-index__titel {
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
	margin: 0;
}
.cg-index__meta {
	font-size: 0.8125rem;
	color: var(--cg-ink-3);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.cg-index__pijl { color: var(--cg-accent); font-weight: 700; transition: transform 0.2s ease; }
.cg-index__rij:hover .cg-index__pijl { transform: translateX(3px); }
.cg-kennisbank__meer { margin: 1.6rem 0 0; }

/* De voet is diep groen in plaats van zwart. Bovenaan ligt een lichte band
   (--cg-footer-band, in de kleur --cg-footer-bandkleur van de sectie
   erboven) waar het slotvlak half op ligt; zonder slot is de band nul. */
.cg-footer {
	--cg-footer-band: 11rem;
	--cg-footer-bandkleur: var(--cg-gebroken);
	padding-top: clamp(1rem, 3vw, 2.5rem);
	background:
		linear-gradient(180deg, var(--cg-footer-bandkleur) 0, var(--cg-footer-bandkleur) var(--cg-footer-band), transparent var(--cg-footer-band)),
		#16241f;
	color: hsl(172, 12%, 72%);
	font-size: 0.9375rem;
}
.cg-footer a { color: hsl(170, 22%, 86%); text-decoration: none; }
.cg-footer a:hover { color: #fff; text-decoration: underline; }

/* Het slot: effen knopgroen met een nauwelijks zichtbaar verloop, tekst in
   het midden. */
.cg-finale {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: min(100% - 2 * var(--cg-gutter), var(--cg-container) - 2 * var(--cg-gutter));
	padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 5rem);
	border-radius: 28px;
	background: linear-gradient(100deg, #33bf89 0%, #26a474 100%);
	box-shadow: 0 50px 80px -50px hsla(157, 59%, 30%, 0.8);
	text-align: center;
}
.cg-finale__kop {
	font-size: clamp(2.1rem, 4vw, 3.4rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: #fff;
	max-width: 16em;
	margin: 0 auto 0.5em;
	text-wrap: balance;
}
.cg-finale__sub {
	font-size: 1.0625rem;
	font-weight: 500;
	color: #fff;
	margin: 0 auto 2rem;
	max-width: 34em;
}
.cg-finale__acties { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
/* Op het verloop is de knop wit; de warme gloed zit in zijn schaduw. */
.cg-finale .cg-btn--primair,
.cg-finale .cg-btn--primair:hover { background: #fff; color: hsl(165, 45%, 11%); text-shadow: none; box-shadow: 0 18px 36px -18px hsla(160, 60%, 12%, 0.6); }

.cg-footer__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr);
	gap: 2rem 3rem;
	padding-block: clamp(2.5rem, 5vw, 3.75rem);
}
.cg-footer__kop {
	font-size: 0.75rem;
	font-weight: 750;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: hsl(172, 30%, 62%);
	margin: 0 0 1rem;
}
.cg-footer__kolom ul { list-style: none; margin: 0; padding: 0; }
.cg-footer__kolom li { margin-bottom: 0.55rem; }
.cg-footer__verdienmodel {
	font-size: 0.84375rem;
	line-height: 1.65;
	color: hsl(172, 12%, 64%);
	margin: 0.75rem 0 0;
}
.cg-footer__onder {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-block: 1.5rem 1.9rem;
	border-top: 1px solid hsla(172, 40%, 70%, 0.16);
}
.cg-footer__merk {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	font-size: 0.9688rem;
	font-weight: 600;
	color: hsl(220, 15%, 85%);
}
.cg-footer__merk img { width: 24px; height: 24px; border-radius: 50%; background: #fff; }
.cg-footer__copy { margin: 0; font-size: 0.8125rem; color: hsl(172, 12%, 58%); }

/* ---------- subpagina's ---------- */

.cg-pagina .cg-hoofdstuk,
.cg-pagina .cg-section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.cg-pagina h1 { font-size: clamp(2rem, 4vw, 3rem); }
/* De woningscan heeft twee kolommen nodig en past niet in de leeskolom. */
.cg-pagina--breed .cg-section > .cg-container { max-width: var(--cg-container); }
.cg-pagina--breed h1 { margin-bottom: 0.3em; }
/* De globale h2 is geschaald voor homepagesecties. Op een tekstpagina staat hij
   vlak onder de h1 en moet hij een duidelijke trap lager zitten. */
.cg-pagina h2 {
	font-size: clamp(1.4rem, 2.1vw, 1.75rem);
	letter-spacing: -0.022em;
	margin-top: 2.9rem;
}
.cg-pagina h2:first-child { margin-top: 0; }
.cg-pagina .cg-lede { margin-bottom: 1.4rem; }

/* ---------- aannames-paneel: het transparantiepatroon ----------
   Masterplan h5/h9. Overal waar een bedrag staat. Rustig van vorm, met het
   groene merkteken als herkenningspunt. Geen tweede variant maken. */

.cg-aannames {
	background: var(--cg-wit);
	border: 1px solid var(--cg-rand);
	border-radius: 14px;
}
.cg-aannames__knop {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.8rem 1.05rem;
	font-size: 0.9063rem;
	font-weight: 650;
	color: var(--cg-ink);
	cursor: pointer;
	list-style: none;
}
.cg-aannames__knop::-webkit-details-marker { display: none; }
.cg-aannames__knop:hover { color: var(--cg-accent); }
.cg-aannames__merk {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: var(--cg-grad-tekst);
	transition: transform 0.25s ease;
}
.cg-aannames__label { flex: 1 1 auto; }
.cg-aannames__knop::after {
	content: "+";
	flex: none;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1;
	color: var(--cg-accent);
	transition: transform 0.2s ease;
}
.cg-aannames[open] .cg-aannames__merk { transform: rotate(45deg); }
.cg-aannames[open] .cg-aannames__knop::after { transform: rotate(45deg); }
.cg-aannames__body {
	padding: 0 1.05rem 1rem;
	border-top: 1px solid var(--cg-hairline);
}
.cg-aannames__intro {
	margin: 0.8rem 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--cg-ink-2);
}
.cg-aannames__kop {
	margin: 0.95rem 0 0.25rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	/* ink-2 in plaats van ink-3: bij 11px haalt ink-3 de AA-norm niet. */
	color: var(--cg-ink-2);
}
.cg-aannames__lijst { margin: 0; }
.cg-aannames__rij {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 1rem;
	padding: 0.42rem 0;
	border-bottom: 1px solid var(--cg-hairline);
	font-size: 0.875rem;
}
.cg-aannames__rij:last-child { border-bottom: none; }
.cg-aannames__rij dt { margin: 0; color: var(--cg-ink-2); }
.cg-aannames__rij dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.cg-aannames__bronnen {
	margin: 0;
	padding-left: 1.05rem;
	font-size: 0.8438rem;
	line-height: 1.6;
	color: var(--cg-ink-2);
}
.cg-aannames__bronnen li { margin-bottom: 0.2rem; }
.cg-aannames__voet {
	margin: 0.85rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--cg-ink-3);
}

/* ---------- zo werkt comfortgids ---------- */

.cg-diensten {
	margin: 0;
	border-top: 1px solid var(--cg-hairline);
}
.cg-dienst {
	padding: 1.35rem 0;
	border-bottom: 1px solid var(--cg-hairline);
}
.cg-dienst h3 { font-size: 1.0938rem; margin-bottom: 0.3rem; }
.cg-dienst p {
	margin: 0;
	color: var(--cg-ink-2);
	font-size: 0.9375rem;
	line-height: 1.65;
	max-width: 46em;
}
.cg-verwachting__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-top: 1.6rem;
}
.cg-verwachting h3 {
	font-size: 1.0313rem;
	margin-bottom: 0.65rem;
}
.cg-verwachting ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--cg-ink-2);
}
.cg-verwachting li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.6rem;
}
.cg-verwachting li::before {
	position: absolute;
	left: 0;
	top: -0.02em;
	font-weight: 700;
}
.cg-verwachting--wel li::before {
	content: "\2713";
	color: var(--cg-accent);
}
.cg-verwachting--niet li::before {
	content: "\2013";
	color: var(--cg-ink-3);
}
.cg-uitleg__blok { max-width: 46em; }
.cg-uitleg__blok p {
	color: var(--cg-ink-2);
	font-size: 0.9688rem;
	line-height: 1.7;
}
.cg-uitleg__blok .cg-aannames { margin-top: 1.2rem; }

/* ---------- adresinvoer in de hero ---------- */

.cg-adres {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	align-items: stretch;
}
.cg-adres label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: hsla(0, 0%, 100%, 0.78);
	margin: 0 0 0.3rem 0.2rem;
}
.cg-adres input {
	width: 100%;
	font: inherit;
	font-size: 1.0625rem;
	padding: 0.9rem 1rem;
	border-radius: var(--cg-r-knop);
	border: 1px solid hsla(0, 0%, 100%, 0.42);
	background: hsla(0, 0%, 100%, 0.16);
	color: #fff;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.cg-adres input::placeholder { color: hsla(0, 0%, 100%, 0.6); }
.cg-adres input:focus { outline: 2px solid var(--cg-accent-fel); outline-offset: 2px; }
.cg-adres .cg-btn { align-self: flex-end; }

/* ---------- onderwerpen ---------- */
.cg-onderwerp {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, hsl(152, 40%, 96.5%) 0%, hsl(160, 14%, 97%) 100%);
	border-radius: var(--cg-r-kaart);
	overflow: hidden;
	text-decoration: none;
	color: var(--cg-ink);
	min-height: 660px;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cg-onderwerp:hover { color: var(--cg-ink); transform: translateY(-2px); box-shadow: var(--cg-schaduw); }
/* Een lichtvlek achter het product: het staat in het licht, niet op een vlak. */
.cg-onderwerp::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 8%;
	right: 8%;
	top: 0;
	height: 380px;
	background: radial-gradient(50% 52% at 50% 46%, #fff 0%, hsla(0, 0%, 100%, 0) 100%);
	pointer-events: none;
}
/* Elke kaart een zweem van een logokleur: groen, warm, blauw, teal. */
.cg-onderwerp:nth-child(3) { background: linear-gradient(180deg, hsl(40, 85%, 95.5%) 0%, hsl(50, 14%, 97%) 100%); }
.cg-onderwerp:nth-child(4) { background: linear-gradient(180deg, hsl(198, 70%, 96.5%) 0%, hsl(200, 16%, 97%) 100%); }
.cg-onderwerp:nth-child(5) { background: linear-gradient(180deg, hsl(176, 45%, 95.5%) 0%, hsl(176, 14%, 97%) 100%); }
.cg-onderwerp h3 { font-size: 1.75rem; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 0.6rem; }
.cg-onderwerp p { font-size: 1.125rem; line-height: 1.55; color: var(--cg-ink-2); margin: 0 0 1.6rem; max-width: 30em; }

/* ---------- woningscan ---------- */

.cg-scan { margin: 0 0 1rem; }

.cg-scan .cg-aannames { margin-top: 1.4rem; }

/* ---------- responsive ---------- */

@media (max-width: 1023px) {
	.cg-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
	.cg-werkwijze__grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
	.cg-werkwijze__figuur img { aspect-ratio: 3 / 2; }
	.cg-adres .cg-btn { width: 100%; }
	.cg-onderwerp { min-height: 0; flex-direction: column; align-items: stretch; }
	.cg-onderwerp h3 { font-size: 1.5rem; }
	.cg-onderwerp p { font-size: 1rem; }
	.cg-onderwerp::before { height: 300px; }
	.cg-finale { border-radius: 22px; }
	.cg-verwachting__grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
	.cg-aannames__rij { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
	.cg-finale__acties .cg-btn { width: 100%; }
	.cg-index__rij { grid-template-columns: minmax(0, 1fr) auto; }
	.cg-index__meta { grid-column: 1; order: 3; }
}

@media (max-width: 560px) {
	.cg-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
}

/* ---------- onthulling bij scroll ---------- */

@media (prefers-reduced-motion: no-preference) {
	.cg-js [data-cg-reveal] {
		opacity: 0;
		transform: translateY(10px);
		transition: opacity 0.5s ease, transform 0.5s ease;
	}
	.cg-js [data-cg-reveal].is-zichtbaar { opacity: 1; transform: none; }
}

/* ---------- print ---------- */

@media print {
	.cg-header, .cg-navtoggle, .cg-skiplink { display: none; }
}

/* ---------- woningscan: invoer, cijfers en maatregelen ---------- */

.cg-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* De i-knop bij een veld: de uitleg staat er pas als je erom vraagt. */
.cg-info {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid var(--cg-rand);
	background: var(--cg-wit);
	color: var(--cg-ink-2);
	font-family: var(--cg-font);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.cg-info:hover { border-color: var(--cg-accent); color: var(--cg-accent); }
.cg-info[aria-expanded="true"] { background: var(--cg-accent); border-color: var(--cg-accent); color: #fff; }
.cg-vinkje {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.875rem;
	color: var(--cg-ink);
	background: var(--cg-wit);
	border: 1px solid var(--cg-rand);
	border-radius: var(--cg-r-knop);
	padding: 0.45rem 0.9rem;
	cursor: pointer;
}
.cg-vinkje:has(input:checked) { border-color: var(--cg-merkgroen); background: var(--cg-groen-zacht); color: var(--cg-accent); }
.cg-vinkje input { accent-color: var(--cg-merkgroen); margin: 0; }
.cg-stap { margin-bottom: 0.55rem; }

	/* Een eigen display-waarde wint van [hidden] uit het browserstijlblad. */
	.cg-subsidie [hidden] { display: none !important; }

	/* ---------- de kaart ---------- */

	.cg-kaart { position: relative; width: 100%; max-width: 620px; justify-self: center; perspective: 1600px; }
	.cg-kaart__vlak {
		position: relative;
		aspect-ratio: 1000 / 1167;
		margin-block: -8% -10%;
		transform: rotateX(46deg) rotateZ(-16deg) scale(1.16);
		transform-style: preserve-3d;
	}
	.cg-kaart__vlak::before {
		content: "";
		position: absolute;
		inset: 24% 18% 10% 20%;
		transform: translateZ(-24px);
		border-radius: 50%;
		background: hsla(180, 70%, 22%, 0.22);
		filter: blur(34px);
	}
	.cg-kaart__sokkel {
		position: absolute;
		inset: 0;
		transform: translateZ(-1px);
	}
	.cg-kaart__sokkel svg { width: 100%; height: 100%; display: block; }
	.cg-kaart__sokkel path { fill: #c2dfd8; }
	.cg-kaart__prov {
		position: absolute;
		inset: 0;
		pointer-events: none;
		transform-style: preserve-3d;
		transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.cg-kaart__prov svg { width: 100%; height: 100%; overflow: visible; display: block; }
	/* Rust: het hele land in het lichtste merkgroen. */
	.cg-kaart__top {
		fill: #e4f6ef;
		stroke: hsla(172, 45%, 30%, 0.26);
		stroke-width: 1.4;
		transition: fill 0.35s ease, stroke 0.35s ease;
	}
	.cg-kaart__zij use { fill: #b3dcd0; transition: fill 0.35s ease; }

	/* Gekozen: dezelfde kleur, een paar tinten dieper. */
	.cg-kaart__prov.is-gekozen { transform: translateZ(54px); z-index: 3; }
	.cg-kaart__prov.is-gekozen .cg-kaart__top { fill: #35b394; stroke: hsla(172, 60%, 22%, 0.55); }
	.cg-kaart__prov.is-gekozen .cg-kaart__zij use { fill: #0b8a80; }

	.cg-kaart__pinlaag {
		position: absolute;
		inset: 0;
		pointer-events: none;
		transform-style: preserve-3d;
		transform: translateZ(54px);
		z-index: 4;
	}
	.cg-kaart__pin {
		position: absolute;
		width: 26px;
		height: 46px;
		margin: -46px 0 0 -13px;
		transform-origin: 50% 100%;
		transform: translateZ(3px) rotateZ(16deg) rotateX(-46deg);
	}
	/* De zwaai zit op een eigen laag, zodat hij niet vecht met de transform
	   die de pin rechtop naar de kijker zet. */
	.cg-kaart__pinzwaai {
		display: block;
		width: 100%;
		height: 100%;
		transform-origin: 50% 100%;
		animation: cg-pin-neer 1s cubic-bezier(0.3, 0.9, 0.4, 1);
		filter: drop-shadow(0 3px 5px hsla(160, 40%, 10%, 0.35));
	}
	.cg-kaart__pin svg { width: 100%; height: 100%; display: block; }
	.cg-kaart__naald { fill: #333a42; }
	/* De speld in het oranje van het logo. */
	.cg-kaart__kop { fill: var(--cg-oranje); stroke: #fff; stroke-width: 1.6; }

	/* Vallen en uitzwaaien, zoals een speld die je in een kaart prikt. */
	@keyframes cg-pin-neer {
		0%   { opacity: 0; transform: translateY(-34px) rotate(0deg); }
		42%  { opacity: 1; transform: translateY(0) rotate(0deg); }
		56%  { transform: translateY(0) rotate(12deg); }
		69%  { transform: translateY(0) rotate(-8deg); }
		80%  { transform: translateY(0) rotate(4.5deg); }
		90%  { transform: translateY(0) rotate(-2deg); }
		100% { transform: translateY(0) rotate(0deg); }
	}

	@media (prefers-reduced-motion: reduce) {
		.cg-kaart__prov { transition: none; }
		.cg-kaart__pinzwaai { animation: none; }
	}

	/* ---------- het paneel ---------- */

	.cg-subsidie__grid {
		display: grid;
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		gap: clamp(2rem, 5vw, 4rem);
		align-items: center;
	}
	.cg-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

	.cg-veld { margin-top: 1.5rem; position: relative; }
	.cg-veld > label {
		display: block;
		font-size: 0.8125rem;
		font-weight: 600;
		color: var(--cg-ink-2);
		margin: 0 0 0.35rem 0.2rem;
	}
	.cg-zoek { position: relative; }
	.cg-zoek input {
		width: 100%;
		font: inherit;
		font-size: 1rem;
		padding: 0.85rem 2.6rem 0.85rem 1rem;
		border-radius: var(--cg-r-knop);
		border: 1px solid hsla(170, 25%, 40%, 0.2);
		background: var(--cg-wit);
		box-shadow: 0 1px 2px hsla(175, 40%, 12%, 0.04), 0 22px 40px -26px hsla(178, 70%, 24%, 0.45);
		color: var(--cg-ink);
	}
	.cg-zoek input:focus { outline: 2px solid var(--cg-merkgroen); outline-offset: 2px; }
	.cg-zoek__wis {
		position: absolute;
		right: 0.5rem;
		top: 50%;
		transform: translateY(-50%);
		width: 30px;
		height: 30px;
		border: 0;
		border-radius: 50%;
		background: var(--cg-grijs);
		color: var(--cg-ink-2);
		font-size: 1rem;
		line-height: 1;
		cursor: pointer;
	}
	.cg-zoek__wis:hover { background: var(--cg-rand); }

	.cg-tips {
		position: absolute;
		z-index: 20;
		left: 0;
		right: 0;
		top: calc(100% + 0.4rem);
		margin: 0;
		padding: 0.35rem;
		list-style: none;
		background: var(--cg-wit);
		border: 1px solid var(--cg-rand);
		border-radius: var(--cg-r-knop);
		box-shadow: var(--cg-schaduw);
		max-height: 17rem;
		overflow-y: auto;
	}
	.cg-tips li {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 0.8rem;
		padding: 0.55rem 0.8rem;
		border-radius: 12px;
		cursor: pointer;
		font-size: 0.9375rem;
	}
	.cg-tips li span { font-size: 0.8125rem; color: var(--cg-ink-2); }
	.cg-tips li[aria-selected="true"], .cg-tips li:hover { background: var(--cg-groen-zacht); }
	.cg-tips li[aria-selected="true"] strong, .cg-tips li:hover strong { color: var(--cg-accent); }
	.cg-tips strong { font-weight: 600; }

	.cg-keuzes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
	.cg-keuze {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.9375rem;
		font-weight: 600;
		color: var(--cg-ink);
		background: var(--cg-wit);
		border: 1px solid var(--cg-rand);
		border-radius: var(--cg-r-knop);
		padding: 0.55rem 1.1rem;
		cursor: pointer;
		transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
	}
	.cg-keuze input { accent-color: var(--cg-merkgroen); margin: 0; }
	.cg-keuze:has(input:checked) { border-color: var(--cg-merkgroen); background: var(--cg-groen-zacht); color: var(--cg-accent); }

	/* ---------- het kaartje ---------- */

	.cg-subsidie__zij { min-width: 0; max-width: 46rem; }

	.cg-blokje {
		background: var(--cg-wit);
		border: 1px solid var(--cg-rand);
		border-radius: var(--cg-r-kaart);
		box-shadow: var(--cg-schaduw);
		padding: clamp(1.4rem, 2.6vw, 2rem);
		animation: cg-blokje-op 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	}
	@keyframes cg-blokje-op {
		from { opacity: 0; transform: translateY(10px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	.cg-blokje__kop {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1rem;
		margin-bottom: 1.2rem;
	}
	.cg-blokje__kop .cg-kicker { margin-bottom: 0.5rem; }
	.cg-blokje__titel { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; }
	.cg-blokje__sluit {
		flex: 0 0 auto;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		border: 1px solid var(--cg-rand);
		background: var(--cg-wit);
		color: var(--cg-ink-2);
		font-size: 1.25rem;
		line-height: 1;
		cursor: pointer;
		transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
	}
	.cg-blokje__sluit:hover { border-color: var(--cg-ink); color: var(--cg-ink); background: var(--cg-grijs); }

	/* De lades: hoogstens een open, zodat er nooit meer dan een toelichting in beeld staat. */
	.cg-lades { list-style: none; margin: 0; padding: 0; }
	.cg-lade { border-top: 1px solid var(--cg-hairline); }
	.cg-lade:last-child { border-bottom: 1px solid var(--cg-hairline); }
	.cg-lade__knop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		gap: 1rem;
		padding: 0.95rem 0.2rem;
		border: 0;
		background: none;
		font: inherit;
		font-size: 1.0625rem;
		font-weight: 600;
		color: var(--cg-ink);
		text-align: left;
		cursor: pointer;
	}
	.cg-lade__knop::after {
		content: "+";
		flex: 0 0 auto;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		border: 1px solid var(--cg-rand);
		color: var(--cg-ink-2);
		font-size: 0.875rem;
		line-height: 20px;
		text-align: center;
	}
	.cg-lade.is-open .cg-lade__knop::after { content: "\2013"; border-color: var(--cg-ink); color: var(--cg-ink); }
	.cg-lade__inhoud { padding: 0 0.2rem 1rem; }
	.cg-lade__inhoud p { margin: 0 0 0.6rem; font-size: 0.9375rem; line-height: 1.6; color: var(--cg-ink-2); }
	.cg-lade:not(.is-open) .cg-lade__inhoud { display: none; }
	.cg-blokje__gemeente { margin: 1.3rem 0 0; }
	/* De pijllink is een flexbox; een ingevulde naam erin mag geen los item worden. */
	.cg-blokje .cg-pijllink span { display: contents; }

	.cg-leeg { margin: 1.5rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--cg-ink-2); }

	@media (max-width: 899px) {
		.cg-subsidie__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
		.cg-kaart { order: -1; width: min(100%, 20rem); justify-self: center; }
		.cg-kaart__vlak { margin-block: -4% -6%; transform: rotateX(46deg) rotateZ(-16deg) scale(1.04); }
	}

/* ---------- onderwerp-hub ----------
   Pijlerpagina per onderwerp (inc/hub.php). Bouwt op de homepage-secties;
   alleen wat een hub extra nodig heeft staat hier: kruimelpad, kop met
   productbeeld, inhoudsnavigatie, drie uitkomsten en de tabel. */

.cg-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.cg-kruimels ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 clamp(1.5rem, 3.5vw, 2.75rem);
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--cg-ink-2);
}
.cg-kruimels li + li::before { content: "/"; margin-right: 0.4rem; color: var(--cg-ink-3); }
.cg-kruimels a { color: var(--cg-ink-2); text-decoration: none; }
.cg-kruimels a:hover { color: var(--cg-ink); }

/* Ankers landen onder de vaste header. */
.cg-hub [id] { scroll-margin-top: calc(var(--cg-header-h) + 1rem); }

/* De tabel: informatie in typografie, geen kaarten. */
.cg-tabel {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	margin: 0 0 1.25rem;
}
.cg-tabel th,
.cg-tabel td {
	text-align: left;
	vertical-align: top;
	padding: 1rem 1.25rem 1rem 0;
	border-bottom: 1px solid var(--cg-hairline);
}
.cg-tabel thead th {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--cg-ink-2);
	padding-block: 0 0.75rem;
	border-bottom-color: var(--cg-rand);
}
.cg-tabel tbody th { font-weight: 600; }
.cg-tabel--vergelijk td { color: var(--cg-ink-2); }
.cg-tabel--vergelijk tbody th { width: 26%; }

/* Drie scenario's in de DOM, alleen het gekozen scenario in beeld. */
.cg-bereik [data-s] { display: none; }
.cg-bereik[data-scenario="mee"] [data-s="mee"],
.cg-bereik[data-scenario="midden"] [data-s="midden"],
.cg-bereik[data-scenario="tegen"] [data-s="tegen"] { display: inline; }

/* Smal: elke rij wordt een blokje met het label voor de waarde. */
@media (max-width: 719px) {
	.cg-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.cg-tabel,
	.cg-tabel tbody,
	.cg-tabel tr,
	.cg-tabel th,
	.cg-tabel td { display: block; width: auto; }
	.cg-tabel tr { padding: 0.9rem 0; border-bottom: 1px solid var(--cg-hairline); }
	.cg-tabel th,
	.cg-tabel td { border: 0; padding: 0.2rem 0; }
	.cg-tabel tbody th { font-size: 1.0625rem; margin-bottom: 0.3rem; }
	.cg-tabel td[data-label] {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
	}
	.cg-tabel td[data-label]::before {
		content: attr(data-label);
		color: var(--cg-ink-2);
		font-weight: 400;
	}
	.cg-tabel--vergelijk tbody th { width: auto; }
	.cg-tabel--vergelijk td[data-label] { display: block; }
	.cg-tabel--vergelijk td[data-label]::before { display: block; font-size: 0.8125rem; }
}

/* ---------- tools op de hub en de kindpagina's ---------- */
.cg-kind .cg-check {
	background: var(--cg-grijs);
	border-radius: var(--cg-r-kaart);
	padding: clamp(1.2rem, 2.4vw, 1.75rem);
	margin: 1.25rem 0 1.75rem;
}
.cg-check .cg-aannames { margin-top: 0.75rem; }

/* Twee knoppen in het adresformulier: primair en secundair naast elkaar. */
.cg-adres .cg-btn--secundair { align-self: flex-end; }

/* ---------- kindpagina's ---------- */

.cg-kind .cg-kruimels ol { margin-bottom: 1rem; }
.cg-kind h1 { margin-bottom: 0.5em; }
.cg-kind .cg-stappen { margin-top: 0.5rem; }
.cg-kind .cg-tabel { margin: 1rem 0 1.25rem; }
.cg-kind .cg-bereik { margin: 1rem 0 1.5rem; }
.cg-verder { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.cg-verder h2 { margin-bottom: 0.75rem; }
.cg-verder__terug { margin: 1.5rem 0 0; }

/* ---------- hub ----------
   Dezelfde bouwstenen als de homepage: bento-hero, productkaart, secties met
   beeld, deuren. */
.cg-deuren {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.cg-deur {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "titel pijl" "kort pijl" "meta pijl";
	column-gap: 0.75rem;
	align-items: center;
	background: var(--cg-wit);
	border: 1px solid var(--cg-rand);
	border-radius: var(--cg-r-kaart);
	padding: 1.2rem 1.3rem;
	text-decoration: none;
	color: var(--cg-ink);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cg-hoofdstuk:not(.cg-hoofdstuk--gebroken) .cg-deur { background: var(--cg-grijs); border-color: transparent; }
.cg-deur:hover { transform: translateY(-2px); box-shadow: var(--cg-schaduw); color: var(--cg-ink); border-color: hsl(220, 14%, 82%); }

/* ---------- velden in tools ----------
   Label bovenaan, eventueel met een merkje dat zegt waar het getal vandaan
   komt (gemiddelde, voorbeeld). In het veld alleen het getal, licht, zodat
   je ziet dat je het mag vervangen; de eenheid staat rechts in het veld. */
.cg-veld { min-width: 0; }

/* Chips: keuzes zonder zichtbaar selectievakje. Het vakje zit onzichtbaar in
   de chip, zodat toetsenbord en schermlezer gewoon werken. */
.cg-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cg-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.5rem 1rem 0.5rem 0.6rem;
	border-radius: var(--cg-r-knop);
	border: 1px solid var(--cg-rand);
	background: var(--cg-wit);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--cg-ink);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.cg-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.cg-chip:hover { border-color: hsl(220, 12%, 72%); }
.cg-chip:has(input:checked) { background: var(--cg-accent); border-color: var(--cg-accent); color: #fff; }
.cg-chip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--cg-groen-zacht); }
.cg-uitkomst { margin-top: 1.5rem; padding: clamp(1.25rem, 2.4vw, 1.75rem); border-radius: var(--cg-r-kaart); background: var(--cg-grijs); }
.cg-uitkomst .cg-aannames { background: var(--cg-wit); }
.cg-isde .cg-aannames { margin-top: 1.1rem; }
.cg-prijs {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	align-items: center;
	gap: 1rem 1.5rem;
	padding: 1.3rem 0;
	border-bottom: 1px solid var(--cg-hairline);
}
@keyframes cg-eq { 0%, 100% { height: 5px; } 50% { height: 16px; } }

@media (max-width: 1023px) {
	.cg-deuren { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
	.cg-prijs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1rem; }
}
@media (max-width: 599px) {
	.cg-deuren { grid-template-columns: minmax(0, 1fr); }
}