/* =============================================================
   De bouwblokken van de richting die Gideon op 2 oktober 2026 koos
   (eerst gebouwd voor de homepage, patterns/home.php). Geladen op elke
   pagina die ermee gebouwd is (cg_blokken_actief in functions.php).
   Body-klassen: cg-blokken (de pagina gebruikt deze blokken) en
   cg-kop-foto (de menubalk ligt doorzichtig op een foto bovenaan).
   Regel: geen twee pagina's met dezelfde opbouw; de blokken zijn gedeeld,
   de volgorde en de vorm per pagina niet.

   Eén ding per scherm, tekst in het midden, en op elk scherm iets dat
   beweegt of reageert. Palet: wit, één zacht groen-wit, het knopgroen
   #31BC87 en zacht donkere tekst. Geen gloed, geen kleurvlekken; diepte
   komt van foto's, grote ronde vlakken en zachte schaduw.
   ============================================================= */

.cg-blokken {
	--hp-groen: #31bc87;
	--hp-groen-diep: #1f8f66;
	--hp-zacht: #f2f8f5;
	--hp-lijn: #e2ebe6;
	--hp-r: 28px;
}

/* ---------- menubalk: doorzichtig op de foto, wit zodra je scrolt ---------- */
.cg-kop-foto .cg-header { position: fixed; left: 0; right: 0; transition: transform 0.25s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.cg-kop-foto .cg-header:not(.is-gescrold):not(.cg-navopen) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
.cg-kop-foto .cg-header:not(.is-gescrold):not(.cg-navopen) .cg-brand__naam,
.cg-kop-foto .cg-header:not(.is-gescrold):not(.cg-navopen) .cg-nav__lijst > li > a,
.cg-kop-foto .cg-header:not(.is-gescrold):not(.cg-navopen) .cg-nav__knop { color: #fff; }
.cg-kop-foto .cg-header:not(.is-gescrold):not(.cg-navopen) .cg-navtoggle { background: hsla(0, 0%, 100%, 0.14); border-color: hsla(0, 0%, 100%, 0.4); color: #fff; }
.cg-kop-foto .cg-header:not(.is-gescrold):not(.cg-navopen) .cg-navtoggle__icoon i { background: #fff; }
/* Op de foto blijft de naam wit; bij hover wordt hij een fractie zachter. */
.cg-kop-foto .cg-header:not(.is-gescrold):not(.cg-navopen) .cg-brand:hover .cg-brand__naam,
.cg-kop-foto .cg-header:not(.is-gescrold):not(.cg-navopen) .cg-brand:focus-visible .cg-brand__naam { color: #fff; opacity: 0.82; }
.cg-kop-foto .cg-header.is-gescrold { box-shadow: 0 10px 30px -22px hsla(160, 30%, 14%, 0.45); }
.cg-blokken .cg-nav__lijst > li > a { position: relative; }
.cg-blokken .cg-nav__lijst > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--hp-groen); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.cg-blokken .cg-nav__lijst > li > a:hover::after, .cg-blokken .cg-nav__lijst > li > a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- algemeen ---------- */
.hp-sectie { padding-block: clamp(4.5rem, 9vw, 8rem); }
.hp-sectie--zacht { background: var(--hp-zacht); }
.hp-sectie--strak { padding-block: 0 clamp(4.5rem, 9vw, 8rem); }
.hp-sectie--zacht + .hp-sectie--strak { padding-top: clamp(4.5rem, 9vw, 8rem); }
.hp-kop { max-width: 52rem; margin: 0 auto clamp(2rem, 4vw, 3.25rem); text-align: center; }
.hp-kop h2 { margin: 0; font-size: clamp(2.1rem, 4.2vw, 3.6rem); letter-spacing: -0.04em; line-height: 1.04; }

/* ---------- kop ---------- */
.hp-hero { position: relative; isolation: isolate; display: grid; overflow: hidden; min-height: clamp(600px, 92vh, 880px); color: #fff; }
.hp-hero__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; animation: hp-zweef 24s ease-in-out infinite alternate; }
@keyframes hp-zweef { from { transform: scale(1); } to { transform: scale(1.07); } }
.hp-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 62% at 50% 56%, hsla(162, 38%, 8%, 0.62) 0%, hsla(162, 38%, 8%, 0.34) 100%), linear-gradient(180deg, hsla(162, 38%, 8%, 0.55) 0%, hsla(162, 38%, 8%, 0) 26%); }
.hp-hero__in { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: calc(var(--cg-header-h) + 2.5rem) clamp(3rem, 7vw, 5.5rem); text-align: center; }
.hp-hero__label { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 1.4rem; padding: 0.45rem 1rem; border-radius: 999px; background: hsla(0, 0%, 100%, 0.14); border: 1px solid hsla(0, 0%, 100%, 0.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 0.9375rem; font-weight: 600; color: #fff; }
.hp-hero__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6ceab1; box-shadow: 0 0 0 4px hsla(153, 76%, 67%, 0.25); }
.hp-hero h1 { max-width: 12em; margin: 0; font-size: clamp(2.8rem, 7vw, 6rem); font-weight: 600; letter-spacing: -0.045em; line-height: 0.98; color: #fff; }
.hp-hero h1 span { color: #6ceab1; }
.hp-hero__zin { max-width: 26em; margin: 1.5rem 0 0; font-size: clamp(1.125rem, 1.6vw, 1.4375rem); line-height: 1.45; color: hsla(0, 0%, 100%, 0.92); }

/* Het adres als één witte balk: het grootste object van het scherm. */
.hp-adres { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) auto; align-items: stretch; width: min(100%, 640px); margin-top: 2.4rem; padding: 8px; border-radius: 999px; background: #fff; box-shadow: 0 30px 70px -30px hsla(162, 50%, 6%, 0.8); text-align: left; transition: box-shadow 0.25s ease, transform 0.25s ease; }
.hp-adres:focus-within { box-shadow: 0 0 0 4px hsla(157, 59%, 46%, 0.45), 0 30px 70px -30px hsla(162, 50%, 6%, 0.8); }
.hp-adres__veld { position: relative; display: block; padding: 0.5rem 1.4rem 0.45rem; cursor: text; }
.hp-adres__veld + .hp-adres__veld::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: var(--hp-lijn); }
.hp-adres__veld span { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; color: var(--cg-ink-3); }
.hp-adres__veld input { width: 100%; padding: 0; border: 0; background: transparent; font: inherit; font-size: 1.1875rem; font-weight: 600; line-height: 1.35; color: var(--cg-ink); }
.hp-adres__veld input::placeholder { color: #b3c1bb; opacity: 1; }
.hp-adres__veld input:focus { outline: none; }
.hp-adres__knop { padding-inline: 1.6rem; font-size: 1.0625rem; }

/* ---------- lopende band ---------- */
.hp-band { display: flex; overflow: hidden; border-bottom: 1px solid var(--hp-lijn); background: #fff; -webkit-mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.hp-band__rij { display: flex; flex: none; align-items: center; gap: clamp(2rem, 4vw, 3.5rem); margin: 0; padding: 1.35rem clamp(1rem, 2vw, 1.75rem); list-style: none; font-size: 1rem; font-weight: 600; color: var(--cg-ink); white-space: nowrap; animation: hp-band 80s linear infinite; }
.hp-band__rij li { display: inline-flex; align-items: center; gap: 0.6rem; }
.hp-band__rij svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: hsla(157, 59%, 46%, 0.14); color: var(--hp-groen-diep); }
.hp-band:hover .hp-band__rij { animation-play-state: paused; }
@keyframes hp-band { to { transform: translateX(-100%); } }

/* ---------- onderwerpen: één tegelijk ---------- */
.hp-kiezer__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.hp-tab { position: relative; overflow: hidden; padding: 0.8rem 1.35rem; border: 0; border-radius: 999px; background: var(--hp-zacht); font: inherit; font-size: 1rem; font-weight: 650; color: var(--cg-ink-2); cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease; }
.hp-tab span { position: relative; z-index: 1; }
.hp-tab:hover { background: #e6f2ec; color: var(--cg-ink); transform: translateY(-1px); }
.hp-tab[aria-selected="true"] { background: var(--cg-ink); color: #fff; }
.hp-tab i { position: absolute; inset: 0; background: hsla(0, 0%, 100%, 0.16); transform: scaleX(0); transform-origin: left; }
.is-loopt .hp-tab[aria-selected="true"] i { animation: hp-vul var(--hp-duur, 6s) linear forwards; }
@keyframes hp-vul { to { transform: scaleX(1); } }
.hp-tab:focus-visible, .hp-stap:focus-visible, .hp-paneel:focus-visible, .hp-offerte:focus-visible, .hp-pijlen button:focus-visible, .hp-baan:focus-visible { outline: 2px solid var(--hp-groen); outline-offset: 3px; }

.hp-kiezer__podium { display: grid; }
.hp-paneel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(1rem, 3vw, 3rem); min-height: clamp(420px, 40vw, 540px); padding: clamp(2rem, 4.5vw, 4.5rem); overflow: hidden; border-radius: var(--hp-r); background: var(--hp-zacht); text-decoration: none; color: var(--cg-ink); opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s, box-shadow 0.3s ease; }
.hp-paneel.is-aan { opacity: 1; visibility: visible; transition: opacity 0.5s ease, visibility 0s, box-shadow 0.3s ease; }
.hp-paneel--thuisbatterij { background: #f1f6fb; }
.hp-paneel--zonnepanelen { background: #fbf7ee; }
.hp-paneel--isolatie { background: #f7f4f0; }
.hp-paneel--pakket { background: #eef6f6; }
.hp-paneel:hover { color: var(--cg-ink); box-shadow: 0 40px 70px -50px hsla(160, 30%, 14%, 0.5); }
.hp-paneel__tekst > * { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hp-paneel.is-aan .hp-paneel__tekst > * { opacity: 1; transform: none; }
.hp-paneel.is-aan .hp-paneel__tekst > :nth-child(2) { transition-delay: 0.06s; }
.hp-paneel.is-aan .hp-paneel__tekst > :nth-child(3) { transition-delay: 0.12s; }
.hp-paneel.is-aan .hp-paneel__tekst > :nth-child(4) { transition-delay: 0.18s; }
.hp-paneel__naam { margin: 0 0 0.9rem; font-size: 1rem; font-weight: 700; color: var(--hp-groen-diep); }
.hp-paneel h3 { margin: 0; font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; }
.hp-paneel__zin { max-width: 22em; margin: 1.1rem 0 0; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--cg-ink-2); }
.hp-paneel__knop { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2rem; padding: 0.95rem 1.5rem; border-radius: 999px; background: #fff; font-weight: 650; color: var(--cg-ink); box-shadow: 0 10px 24px -14px hsla(160, 30%, 14%, 0.45); transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
.hp-paneel__knop svg { transition: transform 0.25s ease; }
.hp-paneel:hover .hp-paneel__knop { background: var(--hp-groen); color: #fff; box-shadow: 0 14px 28px -14px hsla(157, 59%, 36%, 0.75); }
.hp-paneel:hover .hp-paneel__knop svg { transform: translateX(4px); }
.hp-paneel__beeld { display: grid; place-items: center; min-width: 0; }
.hp-paneel__beeld img { width: auto; max-width: 100%; height: auto; max-height: clamp(220px, 25vw, 350px); object-fit: contain; filter: drop-shadow(0 34px 30px hsla(160, 30%, 12%, 0.26)); opacity: 0; transform: translateY(26px) scale(0.96); transition: opacity 0.6s ease 0.08s, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.08s, filter 0.5s ease; }
.hp-paneel.is-aan .hp-paneel__beeld img { opacity: 1; transform: none; }
.hp-paneel.is-aan:hover .hp-paneel__beeld img { transform: translateY(-10px) scale(1.03); filter: drop-shadow(0 46px 36px hsla(160, 30%, 12%, 0.3)); }

/* ---------- zo werkt het: de foto wisselt met de stap ---------- */
.hp-werk { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.hp-werk__beelden { position: relative; display: grid; overflow: hidden; border-radius: var(--hp-r); box-shadow: 0 50px 80px -50px hsla(160, 30%, 14%, 0.55); }
.hp-werk__foto { grid-area: 1 / 1; width: 100%; aspect-ratio: 1 / 0.86; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 0.7s ease, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hp-werk__foto.is-aan { opacity: 1; transform: none; }
.hp-werk__stappen { margin: 0; padding: 0; list-style: none; }
.hp-stap { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; width: 100%; padding: clamp(1.25rem, 2.2vw, 1.75rem) 0 clamp(1.25rem, 2.2vw, 1.75rem) 0.25rem; border: 0; border-top: 1px solid hsla(160, 20%, 20%, 0.12); background: none; font: inherit; color: var(--cg-ink); text-align: left; cursor: pointer; opacity: 0.5; transition: opacity 0.3s ease; }
li:last-child > .hp-stap { border-bottom: 1px solid hsla(160, 20%, 20%, 0.12); }
.hp-stap:hover, .hp-stap[aria-selected="true"] { opacity: 1; }
.hp-stap__nr { font-size: 1rem; font-weight: 800; line-height: 1.9; color: var(--hp-groen-diep); }
.hp-stap__tekst b { display: block; font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.hp-stap__tekst > span { display: block; max-height: 0; overflow: hidden; margin-top: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--cg-ink-2); opacity: 0; transition: max-height 0.45s ease, margin-top 0.45s ease, opacity 0.35s ease; }
.hp-stap[aria-selected="true"] .hp-stap__tekst > span { max-height: 6em; margin-top: 0.5rem; opacity: 1; }
.hp-stap i { position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--hp-groen); transform: scaleX(0); transform-origin: left; }
.hp-stap[aria-selected="true"] i { transform: scaleX(1); }
.is-loopt .hp-stap[aria-selected="true"] i { transform: scaleX(0); animation: hp-vul var(--hp-duur, 6s) linear forwards; }

/* ---------- offerte laten nakijken: één brede foto ---------- */
.hp-offerte { position: relative; isolation: isolate; display: flex; align-items: center; overflow: hidden; min-height: clamp(380px, 38vw, 520px); padding: clamp(2rem, 5vw, 5rem); border-radius: var(--hp-r); text-decoration: none; color: #fff; }
.hp-offerte img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hp-offerte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, hsla(162, 40%, 9%, 0.86) 0%, hsla(162, 40%, 9%, 0.62) 42%, hsla(162, 40%, 9%, 0.08) 78%); }
.hp-offerte:hover { color: #fff; }
.hp-offerte:hover img { transform: scale(1.04); }
.hp-offerte__tekst { max-width: 30rem; }
.hp-offerte__label { margin: 0 0 0.9rem; font-size: 1rem; font-weight: 700; color: #6ceab1; }
.hp-offerte h2 { margin: 0; font-size: clamp(2rem, 3.8vw, 3.25rem); letter-spacing: -0.04em; line-height: 1.04; color: #fff; }
.hp-offerte__tekst > p:not(.hp-offerte__label) { margin: 1.1rem 0 0; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; color: hsla(0, 0%, 100%, 0.9); }
.hp-offerte__knop { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2rem; padding: 0.95rem 1.5rem; border-radius: 999px; background: #fff; font-weight: 650; color: var(--cg-ink); transition: background-color 0.25s ease, color 0.25s ease; }
.hp-offerte__knop svg { transition: transform 0.25s ease; }
.hp-offerte:hover .hp-offerte__knop { background: var(--hp-groen); color: #fff; }
.hp-offerte:hover .hp-offerte__knop svg { transform: translateX(4px); }

/* ---------- subsidie: de bestaande kaart, in het nieuwe palet ---------- */
.cg-blokken .cg-subsidie h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); letter-spacing: -0.04em; line-height: 1.04; }

/* ---------- vragen: kaarten waar je doorheen schuift ---------- */
.hp-vragen { overflow: hidden; }
.hp-pijlen { display: flex; justify-content: center; gap: 0.5rem; }
.hp-werk__actie { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.hp-pijlen button { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--hp-lijn); border-radius: 50%; background: #fff; color: var(--cg-ink); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease; }
.hp-pijlen button:first-child svg { transform: rotate(180deg); }
.hp-pijlen button:hover:not(:disabled) { background: var(--cg-ink); border-color: var(--cg-ink); color: #fff; transform: translateY(-1px); }
.hp-pijlen button:disabled { opacity: 0.35; cursor: default; }
.hp-baan { --hp-rand: max(var(--cg-gutter), (100vw - var(--cg-container)) / 2 + var(--cg-gutter)); display: flex; gap: clamp(0.75rem, 1.4vw, 1.25rem); margin: 0; padding: 0.5rem var(--hp-rand) 2rem; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hp-rand); scrollbar-width: none; }
.hp-baan::-webkit-scrollbar { display: none; }
@media (hover: hover) { .hp-baan { cursor: grab; } .hp-baan.is-sleept { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; } }
.hp-vraag { flex: none; display: flex; flex-direction: column; width: min(82vw, 400px); min-height: 270px; padding: clamp(1.5rem, 2.4vw, 2.25rem); border-radius: var(--hp-r); background: var(--hp-zacht); scroll-snap-align: start; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; }
.hp-vraag h3 { margin: 0; font-size: clamp(1.5rem, 2.1vw, 1.875rem); letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; transition: color 0.3s ease; }
.hp-vraag p { margin: auto 0 0; padding-top: 1.5rem; font-size: 1.0625rem; line-height: 1.5; color: var(--cg-ink-2); transition: color 0.3s ease; }
.hp-vraag:hover { background: var(--cg-ink); transform: translateY(-4px); }
.hp-vraag:hover h3 { color: #fff; }
.hp-vraag:hover p { color: hsla(0, 0%, 100%, 0.82); }

/* ---------- smaller ---------- */
@media (max-width: 899px) {
	.hp-paneel { grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 0; padding-bottom: 0; }
	.hp-paneel__beeld { padding-block: 1.5rem 2rem; }
	.hp-paneel__beeld img { max-height: 240px; }
	/* Op een telefoon staat alles in beeld: de tabs lopen door op een tweede
	   regel, er schuift niets opzij zonder knop. */
	.hp-kiezer__tabs { gap: 0.4rem; }
	.hp-tab { padding: 0.7rem 1.1rem; font-size: 0.9375rem; }
	.hp-werk { grid-template-columns: minmax(0, 1fr); }
	.hp-offerte { align-items: flex-end; min-height: 480px; }
	.hp-offerte::before { background: linear-gradient(180deg, hsla(162, 40%, 9%, 0.1) 0%, hsla(162, 40%, 9%, 0.6) 45%, hsla(162, 40%, 9%, 0.9) 100%); }
	.hp-offerte img { object-position: 50% 20%; }
}
@media (max-width: 599px) {
	.hp-hero { min-height: clamp(560px, 88vh, 760px); }
	.hp-adres { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); border-radius: 26px; }
	.hp-adres__veld { padding-inline: 1rem; }
	.hp-adres__knop { grid-column: 1 / -1; margin-top: 6px; }
	.hp-pijlen button { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
	.hp-hero__foto, .hp-band__rij, .hp-tab i, .hp-stap i { animation: none !important; }
	.hp-band { flex-wrap: wrap; justify-content: center; -webkit-mask: none; mask: none; }
	.hp-band__rij { flex-wrap: wrap; justify-content: center; white-space: normal; }
	.hp-band__rij[aria-hidden] { display: none; }
	.hp-paneel, .hp-paneel *, .hp-werk__foto, .hp-vraag, .hp-offerte img { transition: none !important; }
}

/* De homepage eindigt op wit; de band boven de voet dus ook. */
.cg-home .cg-footer { --cg-footer-bandkleur: #fff; }

/* ---------- de vier vragen: de foto waar je op staat schuift open ---------- */
.hw-vier { --hp-rand: max(var(--cg-gutter), (100vw - var(--cg-container)) / 2 + var(--cg-gutter)); display: flex; gap: clamp(0.6rem, 1vw, 0.9rem); height: clamp(440px, 40vw, 560px); padding-inline: var(--hp-rand); }
.hw-vier__paneel { position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--hp-r); color: #fff; text-decoration: none; transition: flex-grow 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease; }
.hw-vier__paneel.is-aan { flex-grow: 3.2; box-shadow: 0 40px 70px -46px hsla(160, 30%, 14%, 0.7); }
.hw-vier__paneel:hover { color: #fff; }
.hw-vier__paneel img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hw-vier__paneel.is-aan img { transform: scale(1.04); }
.hw-vier__paneel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, hsla(162, 40%, 9%, 0) 34%, hsla(162, 40%, 9%, 0.84) 100%); }
.hw-vier h3 { margin: 0.6rem 0 0; font-size: clamp(1.625rem, 2.6vw, 2.375rem); letter-spacing: -0.035em; line-height: 1.06; color: #fff; text-wrap: balance; }
.hw-vier__paneel:focus-visible { outline: 3px solid var(--hp-groen); outline-offset: 3px; }

/* ---------- wat het is: het product groot, de som in cijfers ---------- */
.hw-label { margin: 0 0 0.9rem; font-size: 1rem; font-weight: 700; color: var(--hp-groen-diep); }

/* ---------- offerte laten nakijken: één rustig vlak ---------- */
.hw-nakijken { display: flex; flex-direction: column; align-items: center; padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 5rem); border-radius: var(--hp-r); background: var(--hp-zacht); text-align: center; }
.hw-nakijken img { width: 84px; height: 84px; margin-bottom: 1.5rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--hp-groen), 0 18px 30px -16px hsla(160, 30%, 14%, 0.5); }
.hw-nakijken h2 { max-width: 14em; margin: 0; font-size: clamp(2rem, 3.8vw, 3.25rem); letter-spacing: -0.04em; line-height: 1.04; }
.hw-nakijken > p:not(.hw-label) { max-width: 26em; margin: 1.1rem 0 0; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--cg-ink-2); }
.hw-nakijken .cg-btn { margin-top: 2rem; }

/* ---------- vragen als uitklaplijst ---------- */
.hw-faq { max-width: 860px; margin-inline: auto; }
.hw-faq .cg-faq__lijst { border-top: 0; }
.hw-faq .cg-vraag { margin-bottom: 0.6rem; border: 0; border-radius: 20px; background: var(--hp-zacht); transition: background-color 0.25s ease; }
.hw-faq .cg-vraag:hover, .hw-faq .cg-vraag[open] { background: #e9f3ee; }
.hw-faq .cg-vraag summary { padding: 1.3rem 1.5rem; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); letter-spacing: -0.01em; }
.hw-faq .cg-vraag summary::after { width: 36px; height: 36px; background: #fff; color: var(--cg-ink); }
.hw-faq .cg-vraag p { max-width: 44em; padding: 0 1.5rem 1.4rem; font-size: 1.0625rem; line-height: 1.6; }

/* ---------- alle onderwerpen ---------- */
@media (max-width: 899px) {
	/* Op een telefoon staan de vier vragen onder elkaar, elk open. */
	.hw-vier { flex-direction: column; height: auto; }
	.hw-vier__paneel, .hw-vier__paneel.is-aan { flex: none; height: clamp(300px, 84vw, 380px); box-shadow: none; }
	@media (min-width: 600px) {
		.hw-vier { flex-direction: row; flex-wrap: wrap; }
		.hw-vier__paneel, .hw-vier__paneel.is-aan { width: calc(50% - 0.45rem); height: 380px; }
	}
	.hw-vier__paneel img, .hw-vier__paneel.is-aan img { transform: none; }
	.hw-vier__paneel::before { background: linear-gradient(180deg, hsla(162, 40%, 9%, 0.05) 0%, hsla(162, 40%, 9%, 0.55) 42%, hsla(162, 40%, 9%, 0.9) 100%); }
}
@media (max-width: 599px) {
	.hw-faq .cg-vraag summary { padding: 1.1rem 1.15rem; }
	.hw-faq .cg-vraag p { padding: 0 1.15rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
	.hw-vier__paneel, .hw-vier__paneel img { transition: none !important; }
}

/* ---------- kop ----------
   Desktop (vanaf 1200 px): de foto staat rechts (70 %), links een donker
   vlak waar de tekst staat. De bewoner zit links van het midden van de
   foto en het product rechts; met de tekst in het linker vlak loopt de kop
   nooit door een gezicht. Tablet en telefoon: de foto bovenaan, helemaal
   in beeld, de tekst eronder op wit. */
.hn-hero { min-height: clamp(520px, 72vh, 700px); background: hsl(162, 38%, 10%); }
.hn-hero .hp-hero__foto { left: 30%; width: 70%; object-position: 60% 40%; }
.hn-hero::before { background: linear-gradient(90deg, hsl(162, 38%, 10%) 0%, hsl(162, 38%, 10%) 28%, hsla(162, 38%, 10%, 0.72) 40%, hsla(162, 38%, 8%, 0.14) 62%, hsla(162, 38%, 8%, 0.1) 100%), linear-gradient(180deg, hsla(162, 38%, 8%, 0.5) 0%, hsla(162, 38%, 8%, 0) 24%); }
.hn-hero__in { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-block: calc(var(--cg-header-h) + 2.5rem) clamp(3.5rem, 7vw, 6rem); padding-right: 56%; text-align: left; }
.hn-hero h1 { max-width: 8em; font-size: clamp(2.6rem, 4.4vw, 4.5rem); }
.hn-hero .hp-hero__zin { max-width: 26em; }
@media (max-width: 1199px) {
	.hn-hero { display: block; min-height: 0; background: #fff; color: var(--cg-ink); }
	.hn-hero .hp-hero__foto { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-position: 50% 30%; animation: none; }
	/* De donkere rand voor de menubalk alleen over de foto, niet over de tekst. */
	.hn-hero::before { bottom: auto; height: 56.25vw; background: linear-gradient(180deg, hsla(162, 38%, 8%, 0.65) 0%, hsla(162, 38%, 8%, 0) 38%); }
	.hn-hero__in { padding-block: clamp(1.75rem, 4vw, 2.5rem) clamp(0.5rem, 2vw, 1rem); padding-right: var(--cg-gutter); }
	.hn-hero .hp-hero__label { border-color: transparent; background: var(--hp-zacht); color: var(--hp-groen-diep); -webkit-backdrop-filter: none; backdrop-filter: none; }
	.hn-hero h1 { color: var(--cg-ink); }
	.hn-hero h1 span { color: var(--hp-groen); }
	.hn-hero .hp-hero__zin { color: var(--cg-ink-2); }
}
@media (max-width: 639px) {
	.hn-hero .hp-hero__foto { aspect-ratio: 4 / 3; }
	.hn-hero::before { height: 75vw; }
}

/* ---------- twee keuzes onder de kop: rustige vlakken, geen grote knoppen ---------- */
.hn-keuzes { padding-block: clamp(1.25rem, 2.6vw, 2rem) 0; }
.hn-keuzes__rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.25rem); }
.hn-keuze { position: relative; display: flex; flex-direction: column; gap: 0.35rem; padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(4.25rem, 7vw, 6rem) clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.5rem, 2.6vw, 2.25rem); border-radius: var(--hp-r); background: var(--hp-zacht); color: var(--cg-ink); text-decoration: none; transition: background-color 0.3s ease; }
.hn-keuze:hover { background: #e9f3ee; color: var(--cg-ink); }
.hn-keuze:focus-visible { outline: 3px solid var(--hp-groen); outline-offset: 3px; }
.hn-keuze__label { font-size: 0.9375rem; font-weight: 700; color: var(--hp-groen-diep); }
.hn-keuze__titel { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.hn-keuze__zin { max-width: 26em; margin-top: 0.3rem; font-size: 1.0625rem; line-height: 1.5; color: var(--cg-ink-2); }
.hn-keuze__pijl { position: absolute; top: 50%; right: clamp(1.5rem, 2.6vw, 2.25rem); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--cg-ink); transform: translateY(-50%); transition: background-color 0.25s ease, color 0.25s ease; }
.hn-keuze__pijl svg { transition: transform 0.25s ease; }
.hn-keuze:hover .hn-keuze__pijl { background: var(--hp-groen); color: #fff; }
.hn-keuze:hover .hn-keuze__pijl svg { transform: translateX(3px); }

/* ---------- de route: compact, vijf kleine stappen op één rij ---------- */
.hn-route-sectie { padding-block: clamp(3.5rem, 7vw, 6rem); }
.hn-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(1.75rem, 3.4vw, 2.75rem); }
.hn-kop h2 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.035em; line-height: 1.06; }
.hn-kop__zin { margin: 0.6rem 0 0; font-size: 1.0625rem; line-height: 1.5; color: var(--cg-ink-2); }
.hn-kop__link { display: inline-flex; align-items: center; gap: 0.45rem; flex: none; padding-bottom: 0.2rem; font-size: 0.9375rem; font-weight: 650; color: var(--hp-groen-diep); text-decoration: none; white-space: nowrap; }
.hn-kop__link svg { width: 18px; height: 18px; transition: transform 0.25s ease; }
.hn-kop__link:hover { color: var(--hp-groen-diep); text-decoration: underline; text-underline-offset: 4px; }
.hn-kop__link:hover svg { transform: translateX(3px); }
.hn-route { display: grid; grid-template-columns: repeat(var(--hn-stappen, 5), minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.hn-route__stap { position: relative; display: flex; }
/* Een subtiel pijltje tussen de stappen. */
.hn-route__stap + .hn-route__stap::before { content: ""; position: absolute; left: -5px; top: calc(0.75rem + 22px); width: 9px; height: 9px; border-top: 1.5px solid #b9cbc3; border-right: 1.5px solid #b9cbc3; transform: translateY(-50%) rotate(45deg); }
.hn-stap { display: flex; flex-direction: column; gap: 1rem; width: 100%; padding: 0.75rem clamp(1rem, 1.8vw, 1.5rem); border-radius: var(--cg-r); color: var(--cg-ink); text-decoration: none; transition: background-color 0.25s ease; }
.hn-stap:hover { background: var(--hp-zacht); color: var(--cg-ink); }
.hn-stap:focus-visible { outline: 3px solid var(--hp-groen); outline-offset: 2px; }
.hn-stap__icoon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--hp-zacht); color: var(--hp-groen-diep); transition: background-color 0.25s ease, color 0.25s ease; }
.hn-stap:hover .hn-stap__icoon { background: var(--hp-groen); color: #fff; }
.hn-stap__tekst b { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.hn-stap__tekst > span { display: block; margin-top: 0.3rem; font-size: 0.9375rem; line-height: 1.45; color: var(--cg-ink-2); }

/* ---------- de onderwerpkaarten: dunne rand, kleine hoek, hele kaart klikbaar ---------- */
.hn-kaarten { --hn-gap: clamp(0.9rem, 1.4vw, 1.25rem); display: grid; gap: var(--hn-gap); margin: 0; padding: 0; list-style: none; }
.hn-kaarten--groot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hn-kaarten--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--hn-gap); }
.hn-kaarten li { display: flex; min-width: 0; }
.hn-kaart { display: flex; flex-direction: column; width: 100%; overflow: hidden; border: 1px solid var(--hp-lijn); border-radius: var(--cg-r); background: #fff; color: var(--cg-ink); text-decoration: none; transition: border-color 0.25s ease, box-shadow 0.3s ease; }
.hn-kaart:hover { color: var(--cg-ink); border-color: #cfdcd5; box-shadow: 0 18px 40px -32px hsla(160, 30%, 14%, 0.35); }
.hn-kaart:focus-visible { outline: 3px solid var(--hp-groen); outline-offset: 3px; }
.hn-kaart__beeld { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hp-zacht); }
.hn-kaart--groot .hn-kaart__beeld { aspect-ratio: 16 / 10; }
.hn-kaart__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hn-kaart:hover .hn-kaart__beeld img { transform: scale(1.03); }
/* Het echte product los op een zacht vlak. */
.hn-kaart__beeld--product { display: grid; place-items: center; }
.hn-kaart__beeld--product img { width: 66%; height: auto; object-fit: contain; filter: drop-shadow(0 18px 18px hsla(160, 30%, 12%, 0.2)); transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hn-kaart:hover .hn-kaart__beeld--product img { transform: translateY(-4px) scale(1.02); }
.hn-kaart__tekst { display: flex; flex-direction: column; flex: 1; padding: clamp(1.1rem, 1.6vw, 1.4rem) clamp(1.1rem, 1.6vw, 1.4rem) clamp(1.2rem, 1.8vw, 1.5rem); }
.hn-kaart__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.hn-kaart h3 { margin: 0; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.hn-kaart--groot h3 { font-size: 1.375rem; }
.hn-kaart__kop svg { flex: none; margin-top: 0.1rem; color: var(--hp-groen-diep); transition: transform 0.25s ease; }
.hn-kaart:hover .hn-kaart__kop svg { transform: translateX(4px); }
.hn-kaart p { margin: 0.45rem 0 0; font-size: 0.9875rem; line-height: 1.5; color: var(--cg-ink-2); }

/* ---------- onderaan: één rustig conversievlak met het echte product ---------- */
.hn-slot { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(2rem, 4.5vw, 4rem) clamp(1.5rem, 5vw, 5rem); border-radius: var(--hp-r); background: var(--hp-zacht); }
.hn-slot__product { width: 100%; max-width: 360px; height: auto; margin-inline: auto; filter: drop-shadow(0 30px 28px hsla(160, 30%, 12%, 0.24)); }
.hn-slot h2 { max-width: 14em; margin: 0; font-size: clamp(1.875rem, 3.4vw, 2.75rem); letter-spacing: -0.035em; line-height: 1.06; }
.hn-slot__tekst > p:not(.hn-slot__check) { max-width: 28em; margin: 1rem 0 0; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.5; color: var(--cg-ink-2); }
.hn-slot__knop { margin-top: 1.75rem; min-height: 58px; padding-inline: 1.8rem; font-size: 1.0625rem; }
.hn-slot__check { margin: 1.1rem 0 0; font-size: 0.9875rem; color: var(--cg-ink-2); }
.hn-slot__check a { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 650; color: var(--hp-groen-diep); text-decoration: none; }
.hn-slot__check a svg { width: 16px; height: 16px; }
.hn-slot__check a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1023px) {
	.hn-route { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
	.hn-route__stap + .hn-route__stap::before { display: none; }
	.hn-route__stap:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.hn-kaarten--groot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hn-kaarten--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hn-slot { grid-template-columns: minmax(0, 1fr); text-align: center; }
	.hn-slot h2, .hn-slot__tekst > p { margin-inline: auto; }
	.hn-slot__product { max-width: 260px; }
}
@media (max-width: 639px) {
	/* Telefoon: de keuzes onder elkaar, de route verticaal, kaarten in één kolom. */
	.hn-keuzes__rij { grid-template-columns: minmax(0, 1fr); }
	.hn-kop { flex-direction: column; align-items: flex-start; }
	.hn-route { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
	.hn-stap { flex-direction: row; align-items: center; gap: 1rem; padding: 0.75rem 0.75rem; }
	.hn-stap__icoon { flex: none; }
	.hn-kaarten--groot, .hn-kaarten--compact { grid-template-columns: minmax(0, 1fr); }
	.hn-kaart--groot .hn-kaart__beeld, .hn-kaart__beeld { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
	.hn-kaart, .hn-kaart__beeld img, .hn-kaart__beeld--product img, .hn-keuze__pijl svg, .hn-kaart__kop svg, .hn-kop__link svg { transition: none !important; }
}

/* ---------- de routebalk: vast onderaan het scherm (cg_hb_routebalk, 23 okt 2026) ----------
   Rustig en altijd in beeld: wit met een zachte vervaging, een dunne
   voortgangslijn bovenaan, links terug, in het midden de stap, rechts
   de volgende. De voet krijgt extra ruimte, zodat er niets onder valt. */
.hp-routebalk { --routebalk-h: 68px; position: fixed; right: 0; bottom: 0; left: 0; z-index: 40; background: hsla(0, 0%, 100%, 0.9); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 -1px 0 var(--hp-lijn), 0 -12px 30px -24px hsla(160, 30%, 14%, 0.35); padding-bottom: env(safe-area-inset-bottom); animation: hp-routebalk-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes hp-routebalk-in { from { transform: translateY(100%); } to { transform: none; } }
.hp-routebalk__lijn { position: absolute; top: 0; left: 0; height: 2px; width: var(--voortgang, 0%); background: var(--hp-groen); }
.hp-routebalk__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; min-height: var(--routebalk-h); }
.hp-routebalk__vorige { display: inline-flex; align-items: center; gap: 0.45rem; justify-self: start; min-height: 44px; font-size: 0.9375rem; color: var(--cg-ink-2); text-decoration: none; }
.hp-routebalk__vorige svg { flex: none; width: 16px; height: 16px; transform: rotate(180deg); transition: transform 0.25s ease; }
.hp-routebalk__vorige:hover { color: var(--cg-ink); }
.hp-routebalk__vorige:hover svg { transform: rotate(180deg) translateX(3px); }
.hp-routebalk__stand { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--hp-groen-diep); white-space: nowrap; }
.hp-routebalk__stand span { font-weight: 400; color: var(--cg-ink-2); }
.hp-routebalk__volgende { display: inline-flex; align-items: center; gap: 0.75rem; justify-self: end; min-width: 0; max-width: 100%; min-height: 48px; padding: 0.35rem 1.1rem 0.35rem 1.25rem; border-radius: 999px; background: var(--hp-groen); color: #fff; line-height: 1.2; text-decoration: none; transition: background-color 0.25s ease; }
.hp-routebalk__volgende > span { display: grid; min-width: 0; }
.hp-routebalk__volgende small { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.85; }
.hp-routebalk__volgende b { overflow: hidden; font-size: 0.9375rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.hp-routebalk__volgende svg { flex: none; width: 18px; height: 18px; transition: transform 0.25s ease; }
.hp-routebalk__volgende:hover { background: var(--hp-groen-diep); color: #fff; }
.hp-routebalk__volgende:hover svg { transform: translateX(3px); }
.hp-routebalk a:focus-visible { outline: 3px solid var(--hp-groen); outline-offset: 2px; border-radius: 999px; }
/* Ruimte onder de voet, zodat het balkje niets afdekt. */
body:has(.hp-routebalk) .cg-footer::after { content: ""; display: block; height: calc(var(--routebalk-h, 68px) + env(safe-area-inset-bottom)); }
.hp-routebalk__kort { display: none; }
@media (max-width: 1023px) {
	/* Smaller: de stapnaam in het midden valt weg, en de volgende stap krijgt zijn korte naam ("Geschiktheid"). */
	.hp-routebalk__stand span { display: none; }
	.hp-routebalk__lang { display: none; }
	.hp-routebalk__kort { display: inline; }
}
@media (max-width: 639px) {
	.hp-routebalk { --routebalk-h: 62px; }
	.hp-routebalk__in { grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; }
	/* Telefoon: terug als rond pijltje, de stand klein boven de knop. */
	.hp-routebalk__vorige { justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--hp-zacht); }
	.hp-routebalk__vorige span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.hp-routebalk__stand { display: none; }
	.hp-routebalk__volgende { justify-self: stretch; justify-content: space-between; min-height: 46px; }
	.hp-routebalk__volgende small::after { content: " · " attr(data-stand); }
}
@media (prefers-reduced-motion: reduce) {
	.hp-routebalk { animation: none; }
}

/* ---------- subsidie: de bewoner met zijn rekening staat in het midden van de foto ---------- */
section.hs-kop { background: hsl(162, 38%, 10%); }
section.hs-kop .hs-kop__foto { left: 40%; width: 60%; object-position: 50% 30%; }
section.hs-kop::before { background: linear-gradient(90deg, hsl(162, 38%, 10%) 0%, hsl(162, 38%, 10%) 38%, hsla(162, 38%, 10%, 0.72) 50%, hsla(162, 38%, 8%, 0.14) 70%, hsla(162, 38%, 8%, 0.1) 100%), linear-gradient(180deg, hsla(162, 38%, 8%, 0.5) 0%, hsla(162, 38%, 8%, 0) 26%); }
section.hs-kop .hs-kop__in { padding-right: 50%; }
section.hs-kop h1 { max-width: 9em; font-size: clamp(2.6rem, 4.4vw, 4.5rem); }
@media (max-width: 1199px) {
	section.hs-kop { background: #fff; color: var(--cg-ink); }
	section.hs-kop .hs-kop__foto { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-position: 50% 24%; animation: none; }
	section.hs-kop::before { bottom: auto; height: 62.5vw; background: linear-gradient(180deg, hsla(162, 38%, 8%, 0.72) 0%, hsla(162, 38%, 8%, 0) 40%); }
	section.hs-kop .hs-kop__in { min-height: 0; padding-block: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem); padding-right: var(--cg-gutter); }
	section.hs-kop .hs-kop__terug { border-color: transparent; background: var(--hp-zacht); color: var(--hp-groen-diep); -webkit-backdrop-filter: none; backdrop-filter: none; }
	section.hs-kop .hs-kop__terug::before { color: var(--hp-groen-diep); }
	section.hs-kop h1 { color: var(--cg-ink); }
	section.hs-kop h1 span { color: var(--hp-groen); }
	section.hs-kop .hs-kop__zin { color: var(--cg-ink-2); }
}
@media (max-width: 639px) {
	section.hs-kop .hs-kop__foto { aspect-ratio: 4 / 3; }
	section.hs-kop::before { height: 75vw; }
}

/* ---------- hybride of all-electric, telefoon: de tekst onder de foto, niet erover ---------- */
@media (max-width: 899px) {
	section.hv-kop .hv-kop__foto { height: calc(var(--cg-header-h) + 72vw); }
	section.hv-kop::before { height: calc(var(--cg-header-h) + 72vw + 2px); background: linear-gradient(180deg, hsla(158, 30%, 11%, 0.5) 0%, hsla(158, 30%, 11%, 0.05) 25%, hsla(158, 30%, 11%, 0.35) 70%, #1c372d 100%); }
	section.hv-kop .hv-kop__in { padding-top: calc(var(--cg-header-h) + 72vw + 1.25rem); }
}

/* ---------- kop: de vraag in het midden, de vragenlijst eronder ---------- */
.hk-terug { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; padding: 0.45rem 1rem 0.45rem 0.8rem; border-radius: 999px; background: #fff; font-size: 0.9375rem; font-weight: 650; color: var(--cg-ink); text-decoration: none; box-shadow: 0 6px 16px -10px hsla(160, 30%, 14%, 0.4); transition: color 0.2s ease, transform 0.2s ease; }
.hk-terug::before { content: "\2190"; color: var(--hp-groen-diep); transition: transform 0.2s ease; }
.hk-terug:hover { color: var(--hp-groen-diep); }
.hk-terug:hover::before { transform: translateX(-3px); }

/* ---------- waarom je huis de prijs bepaalt: kop blijft staan ---------- */
.hk-prijs { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: clamp(2rem, 6vw, 6rem); }
.hk-prijs__kop { position: sticky; top: calc(var(--cg-header-h) + 2.5rem); }
.hk-prijs__kop h2 { margin: 0; font-size: clamp(2.1rem, 4.2vw, 3.6rem); letter-spacing: -0.04em; line-height: 1.04; }
.hk-prijs .hb-stappen { grid-template-columns: minmax(0, 1fr); gap: 0; }
.hk-prijs .hb-stappen li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1.25rem, 3vw, 2.5rem); padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; border-top: 1px solid var(--hp-lijn); }
.hk-prijs .hb-stappen li:last-child { border-bottom: 1px solid var(--hp-lijn); }
.hk-prijs .hb-stappen span { grid-row: 1 / span 2; min-width: clamp(4rem, 7vw, 6.5rem); font-size: clamp(2.5rem, 5vw, 4.25rem); font-weight: 600; letter-spacing: -0.05em; line-height: 0.9; color: var(--hp-groen); }
.hk-prijs .hb-stappen b { margin: 0; font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.hk-prijs .hb-stappen p { margin-top: 0.5rem; font-size: 1.0625rem; line-height: 1.5; }

/* ---------- wat er soms bij komt: drie tegels met een plus ---------- */
.hk-erbij .hb-stappen { gap: clamp(0.75rem, 1.4vw, 1.25rem); }
.hk-erbij .hb-stappen li, .hp-sectie--zacht .hk-erbij .hb-stappen--kaarten li { display: flex; flex-direction: column; padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.75rem, 3vw, 2.75rem); border-radius: var(--hp-r); background: #fff; transition: background-color 0.3s ease, transform 0.3s ease; }
.hk-erbij .hb-stappen span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: hsla(157, 59%, 46%, 0.14); font-size: 0; letter-spacing: 0; transition: background-color 0.3s ease; }
.hk-erbij .hb-stappen span::before { content: "+"; font-size: 1.5rem; font-weight: 600; line-height: 1; color: var(--hp-groen-diep); transition: color 0.3s ease; }
.hk-erbij .hb-stappen b { margin: clamp(2rem, 4vw, 3.25rem) 0 0; font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; transition: color 0.3s ease; }
.hk-erbij .hb-stappen p { margin-top: 0.6rem; font-size: 1.0625rem; line-height: 1.5; transition: color 0.3s ease; }
.hk-erbij .hb-stappen li:hover { background: var(--cg-ink); transform: translateY(-4px); }
.hk-erbij .hb-stappen li:hover b { color: #fff; }
.hk-erbij .hb-stappen li:hover p { color: hsla(0, 0%, 100%, 0.82); }
.hk-erbij .hb-stappen li:hover span { background: var(--hp-groen); }
.hk-erbij .hb-stappen li:hover span::before { color: #fff; }

/* ---------- wat je terugkrijgt: brede regels waar je op klikt ---------- */
.hk-regels .hb-begin { grid-template-columns: minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--hp-lijn); }
.hk-regels .hb-begin__kaart { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto; align-items: center; gap: clamp(1rem, 3vw, 3rem); padding: clamp(1.5rem, 3vw, 2.25rem) clamp(0.5rem, 2vw, 1.5rem); border-top: 1px solid var(--hp-lijn); border-radius: 0; background: transparent; transition: background-color 0.25s ease, padding-left 0.3s ease; }
.hk-regels .hb-begin__kaart:hover { transform: none; box-shadow: none; background: var(--hp-zacht); padding-left: clamp(1rem, 3vw, 2.5rem); }
.hk-regels .hb-begin__kaart b { font-size: clamp(1.5rem, 2.8vw, 2.375rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; }
.hk-regels .hb-begin__kaart span { margin: 0; font-size: 1.0625rem; }
.hk-regels .hb-begin__kaart em { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.8rem 1.25rem; border-radius: 999px; background: var(--hp-zacht); font-weight: 650; color: var(--cg-ink); white-space: nowrap; transition: background-color 0.25s ease, color 0.25s ease; }
.hk-regels .hb-begin__kaart:hover em { background: var(--hp-groen); color: #fff; }

/* ---------- lees ook ---------- */
.hk-verder .hb-begin { gap: clamp(0.75rem, 1.4vw, 1.25rem); }
.hk-verder .hb-begin__kaart, .hp-sectie--zacht .hk-verder .hb-begin__kaart { min-height: 230px; padding: clamp(1.5rem, 2.4vw, 2.25rem); border-radius: var(--hp-r); background: #fff; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hk-verder .hb-begin__kaart:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -46px hsla(160, 30%, 14%, 0.5); }
.hk-verder .hb-begin__kaart b { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; }
.hk-verder .hb-begin__kaart span { font-size: 1.0625rem; }
.hk-verder .hb-begin__kaart em { color: var(--hp-groen-diep); }
.hk-verder .hb-verder__terug { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

@media (max-width: 899px) {
	.hk-prijs { grid-template-columns: minmax(0, 1fr); }
	.hk-prijs__kop { position: static; text-align: center; }
	/* Op een telefoon staan de drie tegels onder elkaar: plus links, tekst
	   rechts. */
	.hk-erbij .hb-stappen { grid-template-columns: minmax(0, 1fr); }
	.hk-erbij .hb-stappen li, .hp-sectie--zacht .hk-erbij .hb-stappen--kaarten li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: start; padding: 1.25rem 1.25rem 1.4rem; border-radius: 22px; }
	.hk-erbij .hb-stappen span { grid-row: 1 / span 2; width: 40px; height: 40px; }
	.hk-erbij .hb-stappen b { margin: 0.35rem 0 0; font-size: 1.25rem; }
	.hk-erbij .hb-stappen p { margin-top: 0.35rem; }
	.hk-regels .hb-begin__kaart { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; justify-items: start; }
	.hk-regels .hb-begin__kaart em { margin-top: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.hk-erbij .hb-stappen li, .hk-regels .hb-begin__kaart, .hk-verder .hb-begin__kaart { transition: none !important; }
}

/* ---------- kop: foto als band, de vraag links ---------- */
.hs-kop { position: relative; isolation: isolate; overflow: hidden; color: #fff; }
.hs-kop__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; animation: hp-zweef 24s ease-in-out infinite alternate; }
.hs-kop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, hsla(162, 38%, 8%, 0.82) 0%, hsla(162, 38%, 8%, 0.55) 45%, hsla(162, 38%, 8%, 0.2) 100%), linear-gradient(180deg, hsla(162, 38%, 8%, 0.5) 0%, hsla(162, 38%, 8%, 0) 26%); }
.hs-kop__in { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: clamp(520px, 74vh, 700px); padding-block: calc(var(--cg-header-h) + 2rem) clamp(9rem, 15vw, 12rem); }
.hs-kop__terug { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.4rem; padding: 0.45rem 1rem 0.45rem 0.85rem; border: 1px solid hsla(0, 0%, 100%, 0.3); border-radius: 999px; background: hsla(0, 0%, 100%, 0.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 0.9375rem; font-weight: 500; color: #fff; text-decoration: none; transition: background-color 0.2s ease; }
.hs-kop__terug::before { content: "\2190"; transition: transform 0.2s ease; }
.hs-kop__terug:hover { background: hsla(0, 0%, 100%, 0.24); color: #fff; }
.hs-kop__terug:hover::before { transform: translateX(-3px); }
.hs-kop h1 { max-width: 11em; margin: 0; font-size: clamp(2.6rem, 5.6vw, 4.9rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: #fff; }
.hs-kop h1 span { color: #6ceab1; }
.hs-kop__zin { max-width: 26em; margin: 1.4rem 0 0; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.5; color: hsla(0, 0%, 100%, 0.9); }
/* Om te lezen, zonder check eronder (23 okt 2026): geen ruimte meer onderaan voor de check die over de foto viel. */
@media (min-width: 1200px) {
	section.hs-kop--lees .hs-kop__in { padding-bottom: clamp(3.5rem, 6vw, 5rem); }
}

/* De pagina eindigt wit, dus de band achter het groene slotvlak ook. */
.cg-blokken:has(.hs-verder) .cg-footer,
.cg-blokken:has(.gc-verder) .cg-footer { --cg-footer-bandkleur: #fff; }

/* ---------- kom je in aanmerking: aantikken ---------- */
.hs-voorwaarden { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.hs-voorwaarden__kop h2 { margin: 0; font-size: clamp(2.1rem, 4.2vw, 3.6rem); letter-spacing: -0.04em; line-height: 1.04; }
.hs-voorwaarden__ja { animation: cs-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hs-voorwaarden__zin { margin: 1rem 0 0; font-size: 1.125rem; line-height: 1.5; color: var(--cg-ink-2); }
.hs-voorwaarden__lijst { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.hs-vink { display: flex; align-items: center; gap: 1.1rem; width: 100%; padding: 1.25rem 1.4rem; border: 1.5px solid var(--hp-lijn); border-radius: 20px; background: #fff; font: inherit; color: var(--cg-ink); text-align: left; cursor: pointer; transition: border-color 0.2s ease, background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }
.hs-vink i { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #b9cbc3; transition: background-color 0.25s ease, box-shadow 0.25s ease; }
.hs-vink i::after { content: ""; position: absolute; inset: 0; background: center / 14px no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4.5 10.5l3.4 3.4 7.6-8" fill="none" stroke="white" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>'); opacity: 0; transform: scale(0.6); transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }
.hs-vink b { display: block; font-size: clamp(1.1875rem, 1.6vw, 1.375rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
.hs-vink small { display: block; margin-top: 0.25rem; font-size: 1rem; font-weight: 400; line-height: 1.45; color: var(--cg-ink-2); }
.hs-vink:hover { border-color: var(--hp-groen); transform: translateY(-2px); box-shadow: 0 18px 30px -20px hsla(160, 40%, 20%, 0.45); }
.hs-vink:focus-visible { outline: 2px solid var(--hp-groen); outline-offset: 3px; }
.hs-vink[aria-pressed="true"] { border-color: var(--hp-groen); background: #f3faf6; }
.hs-vink[aria-pressed="true"] i { background: var(--hp-groen); box-shadow: none; }
.hs-vink[aria-pressed="true"] i::after { opacity: 1; transform: none; }

/* ---------- de aanvraag als lijn ---------- */
.hs-lijn { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 2rem); margin: 0; padding: 0; list-style: none; counter-reset: lijn; }
.hs-lijn::before, .hs-lijn::after { content: ""; position: absolute; left: 22px; right: calc(25% - 22px); top: 21px; height: 2px; border-radius: 2px; background: #d2e2da; }
.hs-lijn::after { background: var(--hp-groen); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(0.3, 0.6, 0.2, 1) 0.2s; }
.hs-lijn.is-zichtbaar::after { transform: scaleX(1); }
.hs-lijn li { position: relative; display: flex; flex-direction: column; }
.hs-lijn__nr { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1.25rem; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #d2e2da; font-size: 1.0625rem; font-weight: 500; color: var(--cg-ink-2); transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease; }
.hs-lijn.is-zichtbaar .hs-lijn__nr { background: var(--hp-groen); box-shadow: none; color: #fff; }
.hs-lijn.is-zichtbaar li:nth-child(2) .hs-lijn__nr { transition-delay: 0.6s; }
.hs-lijn.is-zichtbaar li:nth-child(3) .hs-lijn__nr { transition-delay: 1.1s; }
.hs-lijn.is-zichtbaar li:nth-child(4) .hs-lijn__nr { transition-delay: 1.6s; }
.hs-lijn b { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.hs-lijn li > p { margin: 0.5rem 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--cg-ink-2); }
.hs-lijn li > p.hs-lijn__let { margin-top: auto; padding: 0.9rem 1rem; border-radius: 16px; background: #fff; font-size: 0.9375rem; line-height: 1.5; color: var(--cg-ink); }
.hs-lijn li > p + p.hs-lijn__let { margin-top: 1.25rem; }
.hs-lijn__let span { display: block; margin-bottom: 0.2rem; font-size: 0.8125rem; font-weight: 500; color: var(--cg-amber-text); }

/* ---------- de meldcode op je offerte ---------- */
.hs-meldcode { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border-radius: var(--hp-r); background: var(--hp-zacht); text-decoration: none; color: var(--cg-ink); transition: box-shadow 0.3s ease; }
.hs-meldcode:hover { color: var(--cg-ink); box-shadow: 0 40px 70px -46px hsla(160, 30%, 14%, 0.5); }
.hs-meldcode__foto { position: relative; display: block; min-height: 340px; overflow: hidden; }
.hs-meldcode__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hs-meldcode:hover .hs-meldcode__foto img { transform: scale(1.04); }
.hs-meldcode__tekst { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(2rem, 5vw, 4.5rem); }
.hs-meldcode h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.04em; line-height: 1.05; }
.hs-meldcode__zin { margin-top: 1rem; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--cg-ink-2); }
.hs-meldcode__knop { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2rem; padding: 0.95rem 1.5rem; border-radius: 999px; background: #fff; font-weight: 500; color: var(--cg-ink); box-shadow: 0 10px 24px -14px hsla(160, 30%, 14%, 0.45); transition: background-color 0.25s ease, color 0.25s ease; }
.hs-meldcode__knop svg { transition: transform 0.25s ease; }
.hs-meldcode:hover .hs-meldcode__knop { background: var(--hp-groen); color: #fff; }
.hs-meldcode:hover .hs-meldcode__knop svg { transform: translateX(4px); }

/* ---------- naast de ISDE: drie kolommen ---------- */
.hs-naast { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hp-lijn); border-bottom: 1px solid var(--hp-lijn); }
.hs-naast li + li { border-left: 1px solid var(--hp-lijn); }
.hs-naast a { display: flex; flex-direction: column; height: 100%; padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.6vw, 2.25rem); text-decoration: none; color: var(--cg-ink); transition: background-color 0.25s ease; }
.hs-naast a:hover { background: var(--hp-zacht); color: var(--cg-ink); }
.hs-naast b { font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; }
.hs-naast span { margin: 0.6rem 0 1.75rem; font-size: 1.0625rem; line-height: 1.55; color: var(--cg-ink-2); }
.hs-naast em { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; font-style: normal; font-weight: 500; color: var(--hp-groen-diep); }
.hs-naast em svg { transition: transform 0.25s ease; }
.hs-naast a:hover em svg { transform: translateX(4px); }

/* ---------- vragen: links de vraag, rechts het antwoord ---------- */
.hs-vragen { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-auto-rows: auto; column-gap: clamp(1.5rem, 4vw, 4rem); margin: 0; padding: 0; list-style: none; }
.hs-vragen li { display: contents; }
.hs-vragen__vraag { grid-column: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.25rem 1.4rem; border: 0; border-radius: 18px; background: transparent; font: inherit; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); font-weight: 400; line-height: 1.35; color: var(--cg-ink-2); text-align: left; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.hs-vragen__vraag i { flex: none; width: 10px; height: 10px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.4; transition: transform 0.25s ease, opacity 0.2s ease; }
.hs-vragen__vraag:hover { color: var(--cg-ink); background: hsla(0, 0%, 100%, 0.6); }
.hs-vragen__vraag[aria-expanded="true"] { background: #fff; color: var(--cg-ink); font-weight: 500; box-shadow: 0 14px 28px -20px hsla(160, 30%, 14%, 0.4); }
.hs-vragen__vraag[aria-expanded="true"] i { opacity: 1; color: var(--hp-groen-diep); transform: rotate(45deg) translate(2px, -2px); }
.hs-vragen__vraag:focus-visible { outline: 2px solid var(--hp-groen); outline-offset: 2px; }
.hs-vragen__antwoord { grid-column: 2; grid-row: 1 / span 6; align-self: start; padding: clamp(1.75rem, 3vw, 2.5rem); border-radius: var(--hp-r); background: #fff; animation: cs-in 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hs-vragen__antwoord p { margin: 0; font-size: 1.125rem; line-height: 1.65; color: var(--cg-ink-2); }
.hs-vragen__antwoord p.hs-vragen__kop { margin-bottom: 0.9rem; font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; color: var(--cg-ink); }

/* ---------- lees ook: regels ---------- */
.hs-verder .hb-begin { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--hp-lijn); }
.hs-verder .hb-begin__kaart { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1.5rem; padding: 1.5rem 0.5rem; border-bottom: 1px solid var(--hp-lijn); border-radius: 0; background: transparent; transition: padding-left 0.3s ease, background-color 0.25s ease; }
.hs-verder .hb-begin__kaart:hover { transform: none; box-shadow: none; padding-left: 1.25rem; background: var(--hp-zacht); }
.hs-verder .hb-begin__kaart b { grid-column: 1; font-size: clamp(1.25rem, 1.9vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; }
.hs-verder .hb-begin__kaart span { grid-column: 1; margin: 0.35rem 0 0; font-size: 1rem; }
.hs-verder .hb-begin__kaart em { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-weight: 500; color: var(--hp-groen-diep); white-space: nowrap; }
.hs-verder .hb-verder__terug { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

@media (max-width: 899px) {
	.hs-kop__in { min-height: clamp(460px, 70vh, 600px); padding-bottom: 7rem; }
	.hs-voorwaarden { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
	.hs-voorwaarden__kop { text-align: center; }
	/* De lijn staat op een smal scherm rechtop. */
	.hs-lijn { grid-template-columns: minmax(0, 1fr); gap: 0; }
	/* Rechtop loopt de lijn per stap van bolletje naar bolletje. */
	.hs-lijn::before, .hs-lijn::after { display: none; }
	.hs-lijn li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: #d2e2da; transition: background-color 0.4s ease; }
	.hs-lijn.is-zichtbaar li:not(:last-child)::before { background: var(--hp-groen); }
	.hs-lijn.is-zichtbaar li:nth-child(2)::before { transition-delay: 0.6s; }
	.hs-lijn.is-zichtbaar li:nth-child(3)::before { transition-delay: 1.1s; }
	.hs-lijn li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 1.1rem; padding-bottom: 1.75rem; }
	.hs-lijn li:last-child { padding-bottom: 0; }
	.hs-lijn__nr { grid-row: 1 / span 3; margin: 0; }
	.hs-lijn b, .hs-lijn li > p { grid-column: 2; }
	.hs-lijn b { padding-top: 0.55rem; }
	.hs-lijn li > p.hs-lijn__let, .hs-lijn li > p + p.hs-lijn__let { margin-top: 0.9rem; }
	.hs-meldcode { grid-template-columns: minmax(0, 1fr); }
	.hs-meldcode__foto { min-height: 240px; }
	.hs-naast { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
	.hs-naast li { border-bottom: 1px solid var(--hp-lijn); }
	.hs-naast li + li { border-left: 0; }
	.hs-naast a { padding-inline: 0.25rem; }
	/* Vragen op een smal scherm: het antwoord onder zijn vraag. */
	.hs-vragen { grid-template-columns: minmax(0, 1fr); row-gap: 0.4rem; }
	.hs-vragen li { display: block; }
	.hs-vragen__vraag[aria-expanded="true"] i { transform: rotate(135deg); }
	.hs-vragen__antwoord { margin-top: 0.4rem; padding: 1.25rem 1.4rem; border-radius: 18px; animation: none; }
	.hs-vragen__antwoord p.hs-vragen__kop { display: none; }
}
@media (max-width: 599px) {
	.hs-verder .hb-begin__kaart { grid-template-columns: minmax(0, 1fr); }
	.hs-verder .hb-begin__kaart em { grid-column: 1; grid-row: auto; margin-top: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
	.hs-kop__foto { animation: none; }
	.hs-lijn::after, .hs-lijn__nr, .hs-vink, .hs-vink i, .hs-vink i::after { transition: none !important; }
	.hs-voorwaarden__ja, .hs-vragen__antwoord { animation: none; }
}

/* ---------- het knopje terug naar de hub ---------- */
.gc-terug { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; padding: 0.45rem 1rem 0.45rem 0.85rem; border-radius: 999px; background: #fff; font-size: 0.9375rem; font-weight: 500; color: var(--cg-ink); text-decoration: none; box-shadow: 0 0 0 1px var(--hp-lijn), 0 6px 16px -10px hsla(160, 30%, 14%, 0.35); transition: color 0.2s ease; }
.gc-terug::before { content: "\2190"; color: var(--hp-groen-diep); transition: transform 0.2s ease; }
.gc-terug:hover { color: var(--hp-groen-diep); }
.gc-terug:hover::before { transform: translateX(-3px); }

/* ---------- de drie antwoorden als schaal ---------- */
.gc-schaal { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.gc-schaal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; border-radius: 10px; background: linear-gradient(90deg, #f6c98a 0%, #9edcb9 45%, var(--hp-groen) 75%, var(--hp-groen-diep) 100%); transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(0.3, 0.6, 0.2, 1) 0.15s; }
.gc-schaal.is-zichtbaar::before { transform: scaleX(1); }
.gc-schaal li { display: flex; padding-top: 2.25rem; }
.gc-schaal a { position: relative; display: flex; flex-direction: column; width: 100%; padding: clamp(1.5rem, 2.6vw, 2.25rem); border-radius: var(--hp-r); background: var(--hp-zacht); text-decoration: none; color: var(--cg-ink); transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; }
.gc-schaal__stip { position: absolute; top: calc(-2.25rem - 9px); left: clamp(1.5rem, 2.6vw, 2.25rem); width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--hp-lijn), 0 6px 14px -6px hsla(160, 30%, 14%, 0.35); transition: transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }
.gc-schaal__stip::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--hp-groen); }
.gc-schaal li:first-child .gc-schaal__stip::after { background: #f0a948; }
.gc-schaal li:nth-child(2) .gc-schaal__stip::after { background: #7fd1a8; }
.gc-schaal small { font-size: 0.9375rem; color: var(--cg-ink-2); }
.gc-schaal b { margin-top: 0.4rem; font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; }
.gc-schaal__zin { margin: 0.75rem 0 1.75rem; font-size: 1.0625rem; line-height: 1.55; color: var(--cg-ink-2); }
.gc-schaal em { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; font-style: normal; font-weight: 500; color: var(--hp-groen-diep); }
.gc-schaal em svg { transition: transform 0.25s ease; }
.gc-schaal a:hover { background: #fff; color: var(--cg-ink); transform: translateY(-3px); box-shadow: 0 0 0 1px var(--hp-lijn), 0 30px 50px -34px hsla(160, 30%, 14%, 0.5); }
.gc-schaal a:hover .gc-schaal__stip { transform: scale(1.18); }
.gc-schaal a:hover em svg { transform: translateX(4px); }

/* ---------- wat telt ---------- */
.gc-telt { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.gc-telt__kop { grid-column: 1 / -1; max-width: 14em; margin: 0 0 clamp(1.25rem, 3vw, 2.25rem); font-size: clamp(2.1rem, 4.4vw, 3.75rem); letter-spacing: -0.045em; line-height: 1.02; }
.gc-telt__vlak { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(340px, 34vw, 480px); overflow: hidden; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--hp-r); }
.gc-telt__vlak b { display: block; font-size: clamp(1.5rem, 2.4vw, 2.125rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.gc-telt__vlak p { max-width: 24em; margin: 0.6rem 0 0; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.5; }
.gc-telt__vlak--foto { color: #fff; isolation: isolate; }
.gc-telt__vlak--foto img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.gc-telt__vlak--foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, hsla(162, 38%, 8%, 0) 35%, hsla(162, 38%, 8%, 0.78) 100%); }
.gc-telt__vlak--foto:hover img { transform: scale(1.04); }
.gc-telt__vlak--foto p { color: hsla(0, 0%, 100%, 0.9); }
.gc-telt__vlak--graden { justify-content: space-between; background: linear-gradient(160deg, #e9f7f0 0%, #d3f0e2 100%); }
.gc-telt__vlak--graden p { color: var(--cg-ink-2); }
.gc-telt__getal { font-size: clamp(6rem, 12vw, 10.5rem); font-weight: 500; letter-spacing: -0.06em; line-height: 0.85; color: var(--hp-groen-diep); }
.gc-telt__getal sup { font-size: 0.45em; vertical-align: 0.9em; }

/* ---------- de Verwarmingstest als meter ---------- */
.gc-test { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.gc-meter { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--hp-lijn), 0 0 0 14px hsla(0, 0%, 100%, 0.6), 0 50px 90px -50px hsla(160, 35%, 16%, 0.5); }
.gc-meter svg { position: absolute; inset: 7%; width: 86%; height: 86%; transform: rotate(-90deg); }
.gc-meter__baan, .gc-meter__boog { fill: none; stroke-width: 10; }
.gc-meter__baan { stroke: #e6efea; }
.gc-meter__boog { stroke-linecap: round; stroke-dasharray: 50 100; transition: stroke-dasharray 0.2s linear; }
.gc-meter__tekst { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; }
.gc-meter__tekst b { font-size: clamp(4rem, 8vw, 6.5rem); font-weight: 500; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.gc-meter__tekst > span { margin-top: 0.4rem; font-size: 1.0625rem; color: var(--cg-ink-2); }
.gc-label { margin: 0 0 1rem; font-size: 0.9375rem; font-weight: 500; color: var(--hp-groen-diep); }
.gc-test h2 { margin: 0; font-size: clamp(2.1rem, 4vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.04; }
.gc-test__stappen { display: grid; gap: 0.6rem; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; list-style: none; counter-reset: test; }
.gc-test__stappen li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 20px; background: #fff; counter-increment: test; }
.gc-test__stappen li::before { content: counter(test); grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--hp-zacht); font-weight: 500; color: var(--hp-groen-diep); }
.gc-test__stappen b { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }
.gc-test__stappen span { margin-top: 0.2rem; font-size: 1rem; line-height: 1.5; color: var(--cg-ink-2); }

/* ---------- een adviseur als band van rand tot rand ---------- */
.gc-band { position: relative; isolation: isolate; overflow: hidden; color: #fff; }
/* Geen witte naad van de blokmarge van WordPress boven en onder de band. */
section.gc-band, section.gc-band + section { margin-block-start: 0; }
.gc-band__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.gc-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, hsla(162, 38%, 8%, 0.86) 0%, hsla(162, 38%, 8%, 0.6) 42%, hsla(162, 38%, 8%, 0) 75%); }
.gc-band__in { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: clamp(440px, 46vw, 620px); padding-block: clamp(4rem, 8vw, 6rem); }
.gc-band h2 { max-width: 11em; margin: 0; font-size: clamp(2.2rem, 4.4vw, 3.75rem); letter-spacing: -0.045em; line-height: 1.02; color: #fff; }
.gc-band h2 span { color: #6ceab1; }
.gc-band p { max-width: 24em; margin: 1rem 0 0; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; color: hsla(0, 0%, 100%, 0.88); }
.gc-band__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin-top: 2rem; }
.gc-band__link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; color: #fff; text-decoration: none; }
.gc-band__link svg { transition: transform 0.25s ease; }
.gc-band__link:hover { color: #fff; }
.gc-band__link:hover svg { transform: translateX(4px); }

/* ---------- vragen in één oogopslag ---------- */
.gc-vragen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.gc-vragen li { grid-column: span 2; padding: clamp(1.5rem, 2.4vw, 2rem); border-radius: 24px; background: #fff; }
.gc-vragen li:nth-child(n+4) { grid-column: span 3; }
.gc-vragen b { display: block; font-size: clamp(1.1875rem, 1.6vw, 1.375rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.gc-vragen p { margin: 0.6rem 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--cg-ink-2); }

/* ---------- lees ook: drie genummerde kolommen ---------- */
.gc-verder .hb-begin { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); counter-reset: verder; }
.gc-verder .hb-begin__kaart { display: flex; flex-direction: column; padding: 1.5rem 0 0; border-top: 2px solid var(--hp-lijn); border-radius: 0; background: transparent; box-shadow: none; counter-increment: verder; transition: border-color 0.3s ease; }
.gc-verder .hb-begin__kaart::before { content: "0" counter(verder); margin-bottom: 1.25rem; font-size: 1rem; font-weight: 500; color: var(--hp-groen-diep); }
.gc-verder .hb-begin__kaart:hover { transform: none; box-shadow: none; border-color: var(--hp-groen); }
.gc-verder .hb-begin__kaart b { font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.gc-verder .hb-begin__kaart span { margin: 0.6rem 0 1.25rem; font-size: 1.0625rem; line-height: 1.55; }
.gc-verder .hb-begin__kaart em { margin-top: auto; font-weight: 500; color: var(--hp-groen-diep); }
.gc-verder .hb-verder__terug { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }

@media (max-width: 899px) {
	/* De schaal staat rechtop: de balk links, de antwoorden eronder. */
	.gc-schaal { grid-template-columns: minmax(0, 1fr); padding-left: 2.25rem; }
	.gc-schaal::before { left: 0; right: auto; top: 0; bottom: 0; width: 10px; height: auto; background: linear-gradient(180deg, #f6c98a 0%, #9edcb9 45%, var(--hp-groen) 75%, var(--hp-groen-diep) 100%); transform: scaleY(0); transform-origin: top; }
	.gc-schaal.is-zichtbaar::before { transform: scaleY(1); }
	.gc-schaal li { padding-top: 0; }
	.gc-schaal__stip { top: clamp(1.5rem, 2.6vw, 2.25rem); left: calc(-2.25rem - 9px); }
	.gc-telt { grid-template-columns: minmax(0, 1fr); }
	.gc-telt__vlak { min-height: 320px; }
	.gc-telt__vlak--graden { min-height: 0; gap: 1.5rem; }
	.gc-test { grid-template-columns: minmax(0, 1fr); }
	.gc-meter { width: min(80%, 320px); }
	.gc-band::before { background: linear-gradient(180deg, hsla(162, 38%, 8%, 0.2) 0%, hsla(162, 38%, 8%, 0.88) 60%); }
	.gc-band__in { justify-content: flex-end; min-height: 560px; padding-block: 3rem; }
	.gc-band__foto { object-position: 72% 0%; height: 60%; }
	.gc-band { background: hsl(162, 38%, 8%); }
	.gc-vragen { grid-template-columns: minmax(0, 1fr); }
	.gc-vragen li, .gc-vragen li:nth-child(n+4) { grid-column: auto; }
	.gc-verder .hb-begin { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.gc-schaal::before, .gc-meter__boog { transition: none; }
}

/* ---------- kop: de foto als kaart, de check eroverheen (gekozen 3 okt) ---------- */
.gk2 h1 { margin: 0; font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; }
.gk2 { padding-block: clamp(1rem, 2.5vw, 2rem) clamp(3rem, 6vw, 5rem); background: linear-gradient(180deg, #fff 0%, var(--hp-zacht) 100%); }
.gk2__veld { position: relative; display: flex; flex-direction: column; }
.gk2__kaart { position: relative; overflow: hidden; height: clamp(560px, 74vh, 720px); border-radius: 32px; }
.gk2__kaart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
.gk2__kaart::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, hsla(162, 38%, 8%, 0.78) 0%, hsla(162, 38%, 8%, 0.4) 40%, hsla(162, 38%, 8%, 0) 65%); }
.gk2__tekst { position: absolute; top: 0; left: var(--cg-gutter); z-index: 2; max-width: 34rem; padding: clamp(2rem, 4.5vw, 4rem); color: #fff; }
.gk2__tekst .gc-terug { margin-bottom: 1.25rem; background: hsla(0, 0%, 100%, 0.14); box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.3); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gk2__tekst .gc-terug::before { color: #fff; }
.gk2 h1 { font-size: clamp(2.4rem, 4.4vw, 4rem); color: #fff; }
.gk2 h1 span { color: #6ceab1; }
.gk2__zin { max-width: 26em; margin: 1rem 0 0; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; color: hsla(0, 0%, 100%, 0.88); }

@media (max-width: 1199px) {
	/* Smal: de vraag boven de foto, de check over de onderrand van de foto. */
	.gk2__tekst { position: static; order: -1; max-width: 40rem; padding: 0 0 1.5rem; color: var(--cg-ink); }
	.gk2__tekst .gc-terug { background: #fff; box-shadow: 0 0 0 1px var(--hp-lijn), 0 6px 16px -10px hsla(160, 30%, 14%, 0.35); color: var(--cg-ink); }
	.gk2__tekst .gc-terug::before { color: var(--hp-groen-diep); }
	.gk2 h1 { font-size: clamp(2.1rem, 5.6vw, 3.5rem); color: var(--cg-ink); }
	.gk2 h1 span { color: var(--hp-groen); }
	.gk2__zin { color: var(--cg-ink-2); }
	.gk2__kaart { height: clamp(240px, 52vw, 440px); border-radius: 26px; }
	.gk2__kaart::before { display: none; }
}

/* =============================================================
   Wat is het en hoe werkt het? (23 okt 2026; patterns/wp-wat-is-*.php)
   De kop van "geschikt" zonder check, drie genummerde stappen en een
   rustig voorbeeld met twee getallen. Klassen ww-.
   ============================================================= */
.ww-kop .gk2__kaart { height: clamp(460px, 62vh, 620px); }
.ww-kop h1 { font-size: clamp(2.25rem, 3.6vw, 3.25rem); }
/* Vier vragen: twee rijen van twee, nooit één kaart alleen. */
.gc-vragen.ww-vragen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gc-vragen.ww-vragen li, .gc-vragen.ww-vragen li:nth-child(n+4) { grid-column: auto; }
.ww-stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.25rem); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ww-stappen li { display: flex; flex-direction: column; padding: clamp(1.5rem, 2.6vw, 2.25rem); border: 1px solid var(--hp-lijn); border-radius: var(--cg-r); background: #fff; }
.ww-stappen__nr { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1.25rem; border-radius: 50%; background: var(--hp-zacht); font-size: 1.0625rem; font-weight: 600; color: var(--hp-groen-diep); }
.ww-stappen b { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.ww-stappen p { margin: 0.5rem 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--cg-ink-2); }
@media (max-width: 899px) {
	.ww-stappen { grid-template-columns: minmax(0, 1fr); }
	.ww-stappen li { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 1rem; }
	.ww-stappen__nr { margin-bottom: 0; }
	.ww-stappen b { flex: 1; min-width: 0; }
	.ww-stappen p { flex-basis: 100%; }
	.gc-vragen.ww-vragen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1199px) {
	.ww-kop .gk2__kaart { height: clamp(240px, 52vw, 440px); }
}

/* ---------- kop: de bewoner links, vraag en check rechts op de foto ---------- */
.hv-kop { position: relative; isolation: isolate; overflow: hidden; background: #1c372d; color: #fff; }
/* Is het venster hoger dan de kop (een heel groot scherm), dan houdt de foto
   op waar de kop ophoudt en loopt hij ook daar over in het groen. */
.hv-kop__foto { position: absolute; left: 0; top: 0; z-index: -2; width: 58%; height: 100vh; height: min(100svh, 100%); object-fit: cover; object-position: var(--hv-fx, 28%) var(--hv-fy, 28%); }
.hv-kop::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: calc(100vh + 2px); height: min(calc(100svh + 2px), 100%); background: linear-gradient(180deg, hsla(158, 30%, 11%, 0.45) 0%, hsla(158, 30%, 11%, 0) 20%, hsla(158, 30%, 11%, 0) 52%, #1c372d 90%, #1c372d 100%), linear-gradient(90deg, hsla(158, 32%, 16%, 0) 0%, hsla(158, 32%, 16%, 0) 34%, hsla(158, 32%, 16%, 0.75) 48%, #1c372d 58.5%, #1c372d 100%); }
.hv-kop__in { display: flex; justify-content: flex-end; padding-block: calc(var(--cg-header-h) + clamp(2rem, 5vw, 4rem)) clamp(3rem, 6vw, 5rem); }
.hv-kop__kolom { display: flex; flex-direction: column; align-items: flex-start; width: 60%; }
.hv-kop .hs-kop__terug { margin-bottom: 1.25rem; }
.hv-kop h1 { margin: 0; font-size: clamp(2.4rem, 5.2vw, 4.75rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; color: #fff; }
.hv-kop h1 span { color: #6ceab1; }
.hv-kop__zin { max-width: 34em; text-wrap: balance; margin: 1rem 0 0; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.5; color: hsla(0, 0%, 100%, 0.88); }
/* Om te lezen, zonder check (23 okt 2026): de kop houdt de hoogte van het eerste scherm, de vraag in het midden. */
@media (min-width: 900px) {
	.hv-kop--lees .hv-kop__in { align-items: center; min-height: min(100svh, 820px); }
	/* De tekst in het groen, naast de foto: nooit over de bewoner of zijn laptop. */
	.hv-kop--lees .hv-kop__kolom { width: 46%; }
}

/* ---------- twee deuren, elk met één groot getal ---------- */
.hv-deuren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.hv-deur { display: flex; flex-direction: column; align-items: flex-start; min-height: clamp(380px, 34vw, 480px); padding: clamp(1.75rem, 3.4vw, 3rem); border-radius: var(--hp-r); background: var(--hp-zacht); color: var(--cg-ink); text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hv-deur:hover { color: var(--cg-ink); transform: translateY(-4px); box-shadow: 0 40px 60px -40px hsla(160, 30%, 14%, 0.5); }
.hv-deur small { font-size: 1.0625rem; color: var(--cg-ink-2); }
.hv-deur__getal { display: flex; align-items: baseline; gap: 0.12em; margin-top: 1.25rem; font-size: clamp(4.5rem, 10vw, 9rem); font-weight: 500; letter-spacing: -0.06em; line-height: 0.9; color: var(--hp-groen-diep); font-variant-numeric: tabular-nums; }
.hv-deur__getal i { margin-inline: 0.5em; font-size: 0.22em; font-style: normal; font-weight: 400; letter-spacing: 0; color: var(--cg-ink-2); }
.hv-deur__getal sup { align-self: flex-start; margin-top: 0.3em; font-size: 0.36em; letter-spacing: 0; }
.hv-deur__wat { margin-top: 0.9rem; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.4; color: var(--cg-ink-2); }
.hv-deur__naam { margin-top: auto; padding-top: 2.5rem; font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; }
.hv-deur em { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; font-style: normal; font-weight: 500; color: var(--hp-groen-diep); }
.hv-deur em svg { transition: transform 0.25s ease; }
.hv-deur:hover em svg { transform: translateX(4px); }
.hv-deur--groen { background: linear-gradient(150deg, #33bf89 0%, #1f8f66 100%); color: #fff; }
.hv-deur--groen:hover { color: #fff; }
.hv-deur--groen small, .hv-deur--groen .hv-deur__wat { color: hsla(0, 0%, 100%, 0.88); }
.hv-deur--groen .hv-deur__getal, .hv-deur--groen em { color: #fff; }

/* ---------- de uitleg: één onderwerp tegelijk, de rest als stapel erachter ---------- */
.hv-uitleg { max-width: 1120px; margin-inline: auto; --hv-rand: clamp(1.75rem, 4vw, 3.5rem); }
.hv-uitleg__soort { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: min(100%, 420px); margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); padding: 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--hp-lijn), 0 14px 30px -22px hsla(160, 30%, 14%, 0.4); }
.hv-uitleg__soort button { min-height: 52px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 1.0625rem; font-weight: 500; color: var(--cg-ink-2); cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; }
.hv-uitleg__soort button:hover { color: var(--cg-ink); }
.hv-uitleg__soort button[aria-pressed="true"] { background: var(--hp-groen); color: #fff; }
.hv-uitleg__soort button:focus-visible, .hv-uitleg__pijl:focus-visible, .hv-uitleg__voortgang button:focus-visible { outline: 2px solid var(--hp-groen-diep); outline-offset: 2px; }

/* Een echte stapel kaarten. Elk onderwerp is een kaart op dezelfde plek
   (het blok houdt zo de maat van de hoogste); data-plek zegt waar hij
   ligt: 0 vooraan, 1 en 2 eronder met alleen de onderrand in beeld, x
   helemaal onderop. De voorste veeg je weg, of je tikt op de pijl: hij
   schuift opzij en gaat onder de stapel; terug komt de onderste er weer
   bovenop. Zonder script staan de kaarten onder elkaar. */
.hv-uitleg__stappen { display: grid; margin: 0; padding: 0 0 32px; list-style: none; isolation: isolate; }
.hv-uitleg__stap { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); min-height: clamp(400px, 36vw, 470px); overflow: hidden; border-radius: 32px; background: #fff; box-shadow: 0 0 0 1px hsla(160, 25%, 30%, 0.07), 0 40px 80px -48px hsla(160, 35%, 14%, 0.45); }
html:not(.cg-js) .hv-uitleg__stap + .hv-uitleg__stap { margin-top: 1rem; }
.cg-js .hv-uitleg__stap { grid-area: 1 / 1; z-index: 0; opacity: 0; transform: translateY(32px) scale(0.88); transform-origin: 50% 100%; touch-action: pan-y; transition: transform 0.42s cubic-bezier(0.22, 0.8, 0.26, 1), opacity 0.25s ease, box-shadow 0.3s ease; will-change: transform; }
.cg-js .hv-uitleg__stap[data-plek="0"] { z-index: 3; opacity: 1; transform: none; cursor: grab; }
/* De kaarten eronder groeien mee met de veeg: --hv-p loopt van 0 naar 1
   terwijl je de voorste wegtrekt. Elke kaart toont altijd zijn inhoud. */
.cg-js .hv-uitleg__stap[data-plek="1"] { z-index: 2; opacity: 1; transform: translateY(calc(16px * (1 - var(--hv-p, 0)))) scale(calc(0.94 + 0.06 * var(--hv-p, 0))); box-shadow: 0 0 0 1px hsla(160, 25%, 30%, 0.08), 0 20px 34px -24px hsla(160, 35%, 14%, 0.35); }
.cg-js .hv-uitleg__stap[data-plek="2"] { z-index: 1; opacity: 1; transform: translateY(calc(32px - 16px * var(--hv-p, 0))) scale(calc(0.88 + 0.06 * var(--hv-p, 0))); box-shadow: 0 0 0 1px hsla(160, 25%, 30%, 0.07), 0 16px 28px -22px hsla(160, 35%, 14%, 0.28); }
.cg-js .hv-uitleg.is-bezig .hv-uitleg__stap { transition: none; }
.cg-js .hv-uitleg__stap.is-sleept { cursor: grabbing; user-select: none; -webkit-user-select: none; }
/* De kaart die onder de stapel gaat of er weer bovenop komt, wordt door het
   script bewogen (blokken.js); hier blijft hij alleen zichtbaar. */
.cg-js .hv-uitleg__stap.is-onder, .cg-js .hv-uitleg__stap.is-boven { opacity: 1; transition: none; }
/* Een weggetrokken kaart mag buiten het vlak vallen zonder dat de pagina
   opzij gaat schuiven. */
#vergelijk { overflow-x: clip; }
.hv-uitleg__beeld { position: relative; overflow: hidden; }
.hv-uitleg__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; -webkit-user-drag: none; }
.hv-uitleg__tekst { display: flex; flex-direction: column; justify-content: center; padding: var(--hv-rand); }
.hv-uitleg__label { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1rem; font-size: 0.9375rem; color: var(--cg-ink-2); }
.hv-uitleg__label span { padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--hp-zacht); font-weight: 500; color: var(--hp-groen-diep); font-variant-numeric: tabular-nums; }
.hv-uitleg h3 { margin: 0; font-size: clamp(1.625rem, 2.6vw, 2.25rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; text-wrap: balance; }
/* De uitleg van de gekozen soort. Beide uitleggen liggen op dezelfde plek,
   zodat de kaart de maat van de langste houdt en er bij het wisselen niets
   verspringt; de andere is onzichtbaar en vervaagt in bij een wissel. */
.hv-uitleg__antwoorden { display: grid; margin-top: clamp(1.1rem, 2vw, 1.5rem); padding-top: clamp(1.1rem, 2vw, 1.5rem); border-top: 1px solid var(--hp-lijn); }
.hv-uitleg__antwoord { grid-area: 1 / 1; max-width: 34em; margin: 0; font-size: clamp(1.0625rem, 1.25vw, 1.125rem); line-height: 1.65; color: var(--cg-ink-2); visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.hv-uitleg__antwoord small { display: block; margin-bottom: 0.45rem; font-size: 0.875rem; font-weight: 500; line-height: 1.3; color: var(--hp-groen-diep); }
.hv-uitleg[data-toon="hybride"] .hv-uitleg__antwoord[data-soort="hybride"], .hv-uitleg[data-toon="volledig"] .hv-uitleg__antwoord[data-soort="volledig"] { visibility: visible; opacity: 1; transition: opacity 0.3s ease; }
.hv-heel { white-space: nowrap; }
.hv-uitleg__dek { position: relative; }
/* De veeghint staat alleen op een telefoon (zie onderaan dit deel). */
.hv-uitleg__veeg { display: none; }
html:not(.cg-js) .hv-uitleg__antwoorden { gap: 1rem; }
html:not(.cg-js) .hv-uitleg__antwoord { grid-area: auto; visibility: visible; opacity: 1; }

.hv-uitleg__bediening { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.25rem; padding-inline: clamp(0.25rem, 2vw, 1.5rem); }
html:not(.cg-js) .hv-uitleg__bediening { display: none; }
.hv-uitleg__voortgang { display: flex; align-items: center; gap: 6px; margin-right: auto; }
.hv-uitleg__voortgang button { position: relative; width: 22px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hv-uitleg__voortgang button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: #d2e2da; transition: background-color 0.3s ease; }
.hv-uitleg__voortgang button:hover::before { background: #a9c9bb; }
.hv-uitleg__voortgang button[aria-current="true"] { width: 44px; }
.hv-uitleg__voortgang button[aria-current="true"]::before { background: var(--hp-groen); }
.hv-uitleg__pijl { display: grid; place-items: center; flex: none; width: 56px; height: 56px; padding: 0; border: 1.5px solid var(--hp-lijn); border-radius: 50%; background: #fff; color: var(--cg-ink); cursor: pointer; transition: transform 0.25s ease, border-color 0.2s ease, opacity 0.25s ease, box-shadow 0.25s ease; }
.hv-uitleg__pijl[data-hv-vorige] svg { transform: rotate(180deg); }
.hv-uitleg__pijl--verder { border-color: transparent; background: var(--cg-grad-knop); color: #fff; box-shadow: 0 12px 26px -14px hsla(157, 59%, 36%, 0.7); }
.hv-uitleg__pijl:not(:disabled):hover { transform: translateY(-2px); border-color: var(--hp-groen); }
.hv-uitleg__pijl--verder:not(:disabled):hover { border-color: transparent; box-shadow: 0 18px 30px -14px hsla(157, 59%, 36%, 0.75); }
.hv-uitleg__pijl:disabled { opacity: 0.32; box-shadow: none; cursor: default; }

/* ---------- de band: de adviseur staat links, dus de tekst rechts ---------- */
.hv-band .gc-band__foto { object-position: 50% 22%; }
.hv-band::before { background: linear-gradient(270deg, hsla(162, 38%, 8%, 0.98) 0%, hsla(162, 38%, 8%, 0.97) 42%, hsla(162, 38%, 8%, 0.5) 54%, hsla(162, 38%, 8%, 0) 68%); }
.hv-band .gc-band__in { align-items: flex-end; }
.hv-band__tekst { width: min(100%, 34rem); }

@media (max-width: 899px) {
	.hv-kop__foto { width: 100%; height: calc(var(--cg-header-h) + 100vw); object-position: 50% var(--hv-fy-smal, 15%); }
	.hv-kop::before { height: calc(var(--cg-header-h) + 100vw + 2px); background: linear-gradient(180deg, hsla(158, 30%, 11%, 0.5) 0%, hsla(158, 30%, 11%, 0.1) 25%, hsla(158, 30%, 11%, 0.55) 65%, #1c372d 100%); }
	.hv-kop__in { padding-top: calc(var(--cg-header-h) + 56vw); }
	.hv-kop__kolom { width: 100%; }
	.hv-deuren { grid-template-columns: minmax(0, 1fr); }
	.hv-deur { min-height: 0; }
	.hv-deur__getal { font-size: clamp(4rem, 20vw, 6.5rem); }
	.hv-deur__naam { padding-top: 2rem; }
	/* Smal: de foto boven, de uitleg eronder, de bediening onder de stapel. */
	.hv-uitleg { --hv-rand: 1.5rem; }
	.hv-uitleg__stap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 0; border-radius: 26px; }
	.hv-uitleg__beeld { width: 100%; height: clamp(200px, 54vw, 340px); }
	.hv-uitleg__tekst { justify-content: flex-start; padding-top: 1.4rem; }
	.hv-uitleg h3 { font-size: 1.5rem; }
	.hv-uitleg__bediening { gap: 0.5rem; margin-top: 1rem; }
	.hv-uitleg__pijl { width: 52px; height: 52px; }
	.hv-band .gc-band__foto { object-position: 30% 8%; }
	.hv-band::before { background: linear-gradient(180deg, hsla(162, 38%, 8%, 0.2) 0%, hsla(162, 38%, 8%, 0.88) 60%); }
	.hv-band .gc-band__in { align-items: flex-start; }
}
/* De uitleg op een telefoon. De hele module (schakelaar, kaart, voortgang en
   pijlen) past in één scherm: de foto is een band die meegroeit met de
   hoogte van het scherm (--hv-foto). De kaarten eronder steken rechts uit in
   plaats van onder, en over de foto staat even een veeghint: zo zie je dat
   je opzij veegt. De eerste zin van de uitleg is de kern en staat groter. */
@media (max-width: 699px) {
	.hv-uitleg { --hv-rand: 1.25rem; --hv-foto: clamp(104px, calc(100svh - 620px), 210px); }
	.hv-uitleg__soort { margin-bottom: 0.875rem; padding: 5px; }
	.hv-uitleg__soort button { min-height: 44px; font-size: 1rem; }

	.hv-uitleg__stappen { padding: 0; }
	.hv-uitleg__stap { position: relative; border-radius: 24px; }
	.cg-js .hv-uitleg__stap { transform: translateX(18px) scale(0.9); transform-origin: 100% 50%; }
	.cg-js .hv-uitleg__stap[data-plek="1"] { transform: translateX(calc(9px * (1 - var(--hv-p, 0)))) scale(calc(0.95 + 0.05 * var(--hv-p, 0))); }
	.cg-js .hv-uitleg__stap[data-plek="2"] { transform: translateX(calc(18px - 9px * var(--hv-p, 0))) scale(calc(0.9 + 0.05 * var(--hv-p, 0))); }

	.hv-uitleg__beeld { height: var(--hv-foto); }
	.hv-uitleg__tekst { padding: 1.1rem var(--hv-rand) 1.25rem; }
	/* Waar je bent staat als etiket op de foto. */
	.hv-uitleg__label { position: absolute; left: 12px; top: calc(var(--hv-foto) - 42px); gap: 0.5rem; margin: 0; padding: 4px 12px 4px 4px; border-radius: 999px; background: hsla(0, 0%, 100%, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 0.8125rem; line-height: 1.2; color: var(--cg-ink); box-shadow: 0 6px 16px -10px hsla(160, 30%, 14%, 0.5); }
	.hv-uitleg__label span { padding: 0.25rem 0.55rem; }
	.hv-uitleg h3 { font-size: 1.375rem; line-height: 1.15; }
	.hv-uitleg__antwoorden { margin-top: 0.7rem; padding-top: 0; border-top: 0; }
	.hv-uitleg__antwoord { font-size: 0.96875rem; line-height: 1.55; }
	.hv-uitleg__antwoord small { display: none; }
	.hv-uitleg__kern { display: block; margin-bottom: 0.45rem; font-size: 1.0625rem; line-height: 1.42; color: var(--cg-ink); }

	.hv-uitleg__bediening { margin-top: 0.75rem; padding-inline: 0.25rem; }
	.hv-uitleg__pijl { width: 46px; height: 46px; }

	/* De veeghint: lichtgrijs, rechtsboven op de foto. De pijl beweegt een
	   paar keer zacht naar links zodra de module in beeld is, en de hint
	   verdwijnt na de eerste keer bladeren. */
	.cg-js .hv-uitleg__veeg { position: absolute; z-index: 2; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem 0.35rem 0.6rem; border-radius: 999px; background: hsla(150, 12%, 96%, 0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 0.8125rem; font-weight: 500; line-height: 1.2; color: #56665f; pointer-events: none; transition: opacity 0.4s ease, transform 0.4s ease; }
	.hv-uitleg.is-inbeeld .hv-uitleg__veeg svg { animation: hv-veeg 1.5s ease-in-out 0.9s 3; }
	.hv-uitleg.is-gebruikt .hv-uitleg__veeg { opacity: 0; transform: translateX(-8px); }
}
@keyframes hv-veeg {
	0%, 100% { transform: none; }
	45% { transform: translateX(-5px); }
}
@media (prefers-reduced-motion: reduce) {
	.hv-uitleg.is-inbeeld .hv-uitleg__veeg svg { animation: none; }
	.cg-js .hv-uitleg__stap, .hv-uitleg__antwoord { transition: none; }
}

/* ---------- de norm in cijfers, de erfgrenscheck ernaast ---------- */
.gl-norm { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.gl-norm h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing: -0.04em; line-height: 1.05; }
.gl-norm__cijfers { display: grid; gap: 1.5rem; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; }
.gl-norm__cijfers dt { display: flex; align-items: baseline; gap: 0.5rem; font-size: clamp(3.5rem, 6.4vw, 5.5rem); font-weight: 500; letter-spacing: -0.05em; line-height: 0.95; color: var(--hp-groen-diep); font-variant-numeric: tabular-nums; }
.gl-norm__cijfers dt small { font-size: 0.26em; font-weight: 500; letter-spacing: 0; color: var(--cg-ink-2); }
.gl-norm__cijfers div + div dt { font-size: clamp(2.25rem, 3.6vw, 3rem); color: var(--cg-ink); }
.gl-norm__cijfers div + div dt small { font-size: 0.4em; }
.gl-norm__cijfers dd { max-width: 20em; margin: 0.6rem 0 0; font-size: 1.0625rem; line-height: 1.5; color: var(--cg-ink-2); }
/* Hoe ver van de erfgrens, per plek (23 okt 2026; de check staat nu in de warmtepomptool). */
.gl-afstand__kop { max-width: 32em; margin: 0 0 1.25rem; font-size: 1.125rem; line-height: 1.5; color: var(--cg-ink-2); }
.gl-afstand__lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.gl-afstand__lijst li { display: flex; flex-direction: column; padding: clamp(1.4rem, 2.4vw, 2rem); border: 1px solid var(--hp-lijn); border-radius: var(--cg-r); background: #fff; }
.gl-afstand__plek { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--cg-ink); }
.gl-afstand__lijst b { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.9rem; font-size: clamp(2.5rem, 4vw, 3.25rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--hp-groen-diep); font-variant-numeric: tabular-nums; }
.gl-afstand__lijst b small { font-size: 0.34em; font-weight: 500; letter-spacing: 0; color: var(--cg-ink-2); }
.gl-afstand__lijst p { margin: 0.9rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--cg-ink-2); }
@media (max-width: 899px) {
	.gl-afstand__lijst { grid-template-columns: minmax(0, 1fr); }
	.gl-afstand__lijst li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 1rem; }
	.gl-afstand__lijst b { margin-top: 0; }
	.gl-afstand__lijst p { grid-column: 1 / -1; }
}

/* ---------- drie dingen die helpen ---------- */
.gl-helpt { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(2rem, 6vw, 6rem); }
.gl-helpt__kop { position: sticky; top: calc(var(--cg-header-h) + 2rem); margin: 0; font-size: clamp(2.1rem, 4.2vw, 3.6rem); letter-spacing: -0.04em; line-height: 1.04; }
.gl-helpt__kop span { display: block; }
.gl-helpt__lijst { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hp-lijn); }
.gl-helpt__lijst a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.75rem); padding: clamp(1.4rem, 2.6vw, 2rem) 0.5rem; border-bottom: 1px solid var(--hp-lijn); color: var(--cg-ink); text-decoration: none; transition: padding-left 0.3s ease, background-color 0.25s ease; }
.gl-helpt__lijst a:hover { padding-left: 1.25rem; background: var(--hp-zacht); color: var(--cg-ink); }
.gl-helpt__nr { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--hp-zacht); font-size: 1.0625rem; font-weight: 500; color: var(--hp-groen-diep); transition: background-color 0.25s ease, color 0.25s ease; }
.gl-helpt__lijst a:hover .gl-helpt__nr { background: var(--hp-groen); color: #fff; }
.gl-helpt__tekst { display: grid; }
.gl-helpt__tekst b { font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.gl-helpt__tekst > span { max-width: 30em; margin-top: 0.5rem; font-size: 1.0625rem; line-height: 1.55; color: var(--cg-ink-2); }
.gl-helpt__tekst em { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; font-style: normal; font-weight: 500; color: var(--hp-groen-diep); }
.gl-helpt__tekst em svg { transition: transform 0.25s ease; }
.gl-helpt__lijst a:hover em svg { transform: translateX(4px); }

@media (max-width: 1199px) {
	.gl-norm { grid-template-columns: minmax(0, 1fr); }
	.gl-norm__cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
}
@media (max-width: 899px) {
	.gl-helpt { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
	.gl-helpt__kop { position: static; }
}
@media (max-width: 479px) {
	.gl-norm__cijfers { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- de vraag, de zin, het speelteken ---------- */
.gla h1 { margin: 0; font-size: clamp(2.2rem, 4.6vw, 4.25rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; }
.gla h1 span { display: block; color: var(--hp-groen); }
.gl-zin { max-width: 24em; margin: 0.9rem 0 0; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--cg-ink-2); text-wrap: balance; }
.gla .gc-terug { margin-bottom: 1.1rem; }
.gl-ic--pauze { display: none; }
[aria-pressed="true"] > * > .gl-ic--play { display: none; }
[aria-pressed="true"] > * > .gl-ic--pauze { display: block; }
/* De meter: twintig streepjes die oplopen; het script zet is-aan. */
.gla__balkjes { display: flex; align-items: flex-end; gap: 2px; }
.gla__balkjes i { flex: 1; height: 30%; border-radius: 2px; background: #dfe8e3; transition: background-color 0.18s ease; }
.gla__balkjes i:nth-child(n+6) { height: 50%; }
.gla__balkjes i:nth-child(n+11) { height: 72%; }
.gla__balkjes i:nth-child(n+16) { height: 100%; }
.gla__balkjes i.is-aan { background: var(--hp-groen); }
.gla__balkjes i.is-aan.is-midden { background: #f0a948; }
.gla__balkjes i.is-aan.is-hoog { background: #e8763a; }

/* ---------- één knop: luisteren op de foto ---------- */
.gla { padding-block: clamp(1.25rem, 2.5vw, 2rem) clamp(3rem, 6vw, 5rem); }
.gla__in { display: flex; flex-direction: column; }
.gla__tekst { padding-bottom: 1.4rem; }
.gla__kaart { position: relative; overflow: hidden; height: clamp(330px, min(96vw, 58svh), 520px); border-radius: 28px; isolation: isolate; }
.gla__foto img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.gla__kaart::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, hsla(162, 38%, 8%, 0) 50%, hsla(162, 38%, 8%, 0.5) 100%); }
.gla__speel { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr) 56px; align-items: center; gap: 0.85rem; padding: 0.6rem 1rem 0.6rem 0.6rem; border: 0; border-radius: 999px; background: hsla(0, 0%, 100%, 0.95); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font: inherit; color: var(--cg-ink); text-align: left; cursor: pointer; box-shadow: 0 18px 40px -18px hsla(162, 40%, 8%, 0.6); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.gla__speel:hover { transform: translateY(-2px); box-shadow: 0 24px 46px -18px hsla(162, 40%, 8%, 0.65); }
.gla__speel:focus-visible, .gla-chip:focus-visible { outline: 2px solid var(--hp-groen-diep); outline-offset: 3px; }
.gla__rond { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--cg-grad-knop); color: #fff; box-shadow: 0 10px 22px -10px hsla(157, 59%, 30%, 0.8); }
.gla__rond svg { width: 22px; height: 22px; }
/* Twee zachte ringen rond de knop zolang er niets speelt: hier kun je op tikken. */
.gla__rond::before, .gla__rond::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px hsla(157, 59%, 46%, 0.55); opacity: 0; animation: gl-ring 2.6s ease-out infinite; }
.gla__rond::after { animation-delay: 1.3s; }
.is-actief .gla__rond::before, .is-actief .gla__rond::after { animation: none; }
@keyframes gl-ring {
	0% { opacity: 0.9; transform: scale(1); }
	70%, 100% { opacity: 0; transform: scale(1.55); }
}
.gla__wat { display: grid; min-width: 0; }
.gla__wat b { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.gla__wat span { font-size: 0.875rem; line-height: 1.35; color: var(--cg-ink-2); }
.gla__nu, .is-actief .gla__rust { display: none; }
.is-actief .gla__nu { display: block; }
.is-actief b.gla__nu { font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.gla__balkjes { height: 26px; }
.gla__vergelijk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1rem; }
.gla__label { grid-column: 1 / -1; margin: 0 0 0.1rem 0.25rem; font-size: 0.875rem; font-weight: 500; color: var(--cg-ink-2); }
.gla-chip { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.6rem; min-height: 56px; padding: 0.45rem 0.75rem 0.45rem 0.45rem; border: 1.5px solid var(--hp-lijn); border-radius: 999px; background: #fff; font: inherit; color: var(--cg-ink); text-align: left; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.25s ease; }
.gla-chip__speel { grid-row: 1 / span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--hp-zacht); color: var(--hp-groen-diep); transition: background-color 0.2s ease, color 0.2s ease; }
.gla-chip__naam { font-size: 0.9375rem; font-weight: 500; line-height: 1.2; }
.gla-chip__db { font-size: 0.8125rem; line-height: 1.25; color: var(--cg-ink-2); font-variant-numeric: tabular-nums; }
.gla-chip:hover { border-color: var(--hp-groen); transform: translateY(-2px); }
.gla-chip[aria-pressed="true"] { border-color: var(--hp-groen); background: #eaf6f0; }
.gla-chip[aria-pressed="true"] .gla-chip__speel { background: var(--hp-groen); color: #fff; }

@media (min-width: 700px) {
	.gla__vergelijk { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	/* De vraag en de knop liggen in de foto; vergelijken rechtsonder. */
	.gla__in { display: grid; }
	.gla__tekst, .gla__kaart, .gla__vergelijk { grid-area: 1 / 1; }
	.gla__kaart { height: clamp(560px, 76vh, 720px); border-radius: 32px; }
	.gla__foto img { object-position: 78% 28%; }
	.gla__kaart::after { background: linear-gradient(100deg, hsla(162, 38%, 8%, 0.8) 0%, hsla(162, 38%, 8%, 0.45) 38%, hsla(162, 38%, 8%, 0) 62%), linear-gradient(180deg, hsla(162, 38%, 8%, 0) 55%, hsla(162, 38%, 8%, 0.5) 100%); }
	.gla__tekst { position: relative; z-index: 1; align-self: start; max-width: 46rem; padding: clamp(2rem, 4.5vw, 4rem); }
	.gla h1 { color: #fff; }
	.gla h1 span { color: #6ceab1; }
	.gla .gl-zin { color: hsla(0, 0%, 100%, 0.88); }
	.gla .gc-terug { background: hsla(0, 0%, 100%, 0.14); box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.3); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
	.gla .gc-terug::before { color: #fff; }
	.gla__speel { left: clamp(1.25rem, 3vw, 2.5rem); right: auto; bottom: clamp(1.25rem, 3vw, 2.5rem); width: 480px; grid-template-columns: auto minmax(0, 1fr) 72px; padding: 0.75rem 1.5rem 0.75rem 0.75rem; }
	.gla__rond { width: 68px; height: 68px; }
	.gla__rond svg { width: 26px; height: 26px; }
	.gla__wat b { font-size: 1.1875rem; }
	.gla__vergelijk { position: relative; z-index: 1; align-self: end; justify-self: end; grid-template-columns: repeat(4, auto); margin: clamp(1.25rem, 3vw, 2.5rem); }
	.gla__label { color: #fff; }
	.gla-chip { border-color: transparent; background: hsla(0, 0%, 100%, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 30px -18px hsla(162, 40%, 8%, 0.6); }
}
@media (min-width: 900px) and (max-width: 1239px) {
	/* Op een middelbreed scherm is naast de luisterknop in de foto geen
	   plek voor vier geluiden, dus die staan eronder. */
	.gla__vergelijk { grid-area: 2 / 1; align-self: auto; justify-self: stretch; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1rem 0 0; }
	.gla__label { color: var(--cg-ink-2); }
	.gla-chip { border-color: var(--hp-lijn); background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
}
@media (max-width: 359px) {
	/* Heel smalle telefoon: de geluidsknoppen iets compacter, zodat "Stadsverkeer" binnen de pil blijft. */
	.gla-chip { column-gap: 0.4rem; padding: 0.4rem 0.55rem 0.4rem 0.35rem; }
	.gla-chip__speel { width: 28px; height: 28px; }
	.gla-chip__naam { font-size: 0.8125rem; }
	.gla-chip__db { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
	.gla__rond::before, .gla__rond::after { animation: none; }
	.gla__speel, .gla-chip { transition: none; }
}

/* =============================================================
   Offertes aanvragen (patterns/offertes-aanvragen.php). Twee foto's naast
   elkaar, de bewoner en de adviseur aan de lijn, met de aanvraag er half
   overheen; daarna drie stappen naast elkaar, de vragen als FAQ en "al
   een offerte". De aanvraag is de widget van hub.css.
   ============================================================= */

.of-kop { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); background: linear-gradient(180deg, var(--hp-zacht) 0%, var(--hp-zacht) 60%, #fff 100%); text-align: center; }
.of-kop h1 { margin: 0; font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.of-kop__zin { max-width: 26em; margin: 1.2rem auto 0; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.45; color: var(--cg-ink-2); }

/* ---------- de drie stappen, naast elkaar ---------- */
.of-stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); margin: 0; padding: 0; list-style: none; text-align: center; }
.of-stappen__nr { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 1.25rem; border-radius: 50%; background: var(--hp-zacht); font-size: 1.125rem; font-weight: 500; color: var(--hp-groen-diep); }
.of-stappen b { display: block; font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.of-stappen p { max-width: 18em; margin: 0.5rem auto 0; font-size: 1.0625rem; line-height: 1.55; color: var(--cg-ink-2); }
/* De FAQ van de hub op een zacht vlak: de vragen zijn dan wit. */
.hp-sectie--zacht .hw-faq .cg-vraag, .hp-sectie--zacht .hw-faq .cg-vraag:hover, .hp-sectie--zacht .hw-faq .cg-vraag[open] { background: #fff; }
.hp-sectie--zacht .hw-faq .cg-vraag summary::after { background: var(--hp-zacht); }

/* ---------- de kop: jij en de adviseur, twee foto's met de aanvraag eroverheen ---------- */
.of-duo { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.6rem, 1.6vw, 1.25rem); max-width: 1020px; margin: clamp(1.75rem, 4vw, 3rem) auto 0; }
.of-duo__foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--hp-r); }
.of-duo__foto--bewoner { object-position: 52% 18%; }
.of-duo__foto--adviseur { object-position: 36% 20%; }
.of-duo__lijn { position: absolute; left: 50%; top: 34%; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--hp-groen-diep); box-shadow: 0 0 0 6px hsla(0, 0%, 100%, 0.55), 0 16px 30px -14px hsla(160, 30%, 14%, 0.5); transform: translate(-50%, -50%); }
.of-kop__widget { position: relative; z-index: 2; max-width: 1020px; margin: -2.25rem auto 0; padding-inline: clamp(8px, 2.5vw, 1.5rem); scroll-margin-top: calc(var(--cg-header-h) + 1rem); text-align: left; }
.of-kop__widget .hb-check.cs { max-width: none; margin: 0; }
@media (min-width: 700px) {
	.of-duo__foto { aspect-ratio: 16 / 11; }
	.of-kop__widget { margin-top: -6.5rem; padding-inline: clamp(1.5rem, 5vw, 4rem); }
}
@media (max-width: 699px) {
	/* Op de telefoon staan de stappen onder elkaar, het nummer links. */
	.of-stappen { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--hp-lijn); text-align: left; }
	.of-stappen li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--hp-lijn); }
	.of-stappen__nr { grid-row: 1 / span 2; margin: 0; }
	.of-stappen p { max-width: none; margin-inline: 0; }
}

/* =============================================================
   Offerte laten nakijken (patterns/offerte-checken.php). Een foto van de
   adviseur en de bewoner aan tafel naast de vraag en de check; daarna
   drie dingen die we nakijken, de stappen als regels, de FAQ en de weg
   naar offertes aanvragen. De check is de widget van hub.css.
   ============================================================= */

.on-kop { padding-block: clamp(0.75rem, 3vw, 3rem) clamp(3rem, 6vw, 5rem); }
.on-kop h1 { margin: 0; font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.on-kop__zin { max-width: 26em; margin: 1.2rem 0 0; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.45; color: var(--cg-ink-2); }
.on-kop__widget { margin-top: clamp(1.5rem, 3vw, 2.25rem); scroll-margin-top: calc(var(--cg-header-h) + 1rem); text-align: left; }
.on-kop__widget .hb-check.cs { max-width: none; margin: 0; }

/* ---------- een genummerde lijst: naast elkaar of als regels ---------- */
.on-lijst { margin: 0; padding: 0; list-style: none; }
.on-lijst__nr { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--hp-zacht); font-size: 1.125rem; font-weight: 500; color: var(--hp-groen-diep); }
.hp-sectie--zacht .on-lijst__nr { background: #fff; }
.on-lijst b { display: block; font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.on-lijst p { margin: 0.5rem 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--cg-ink-2); }
.on-lijst--rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); text-align: center; }
.on-lijst--rij .on-lijst__nr { margin: 0 auto 1.25rem; }
.on-lijst--rij p { max-width: 20em; margin-inline: auto; }
.on-lijst--regels { border-top: 1px solid var(--hp-lijn); }
.on-lijst--regels li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1rem, 2vw, 1.75rem); padding: clamp(1.25rem, 2.4vw, 1.75rem) 0.25rem; border-bottom: 1px solid var(--hp-lijn); }
.on-lijst--regels .on-lijst__nr { grid-row: 1 / span 2; }

/* ---------- de kop: samen aan tafel, de foto naast de vraag en de check ---------- */
.on-tafel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.on-tafel__beeld { margin: 0; }
/* Op de telefoon een liggende uitsnede waarin beide mensen in beeld blijven. */
.on-tafel__beeld img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 28%; border-radius: var(--hp-r); }
@media (min-width: 900px) {
	.on-tafel { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(2rem, 4vw, 4rem); }
	/* Op een groot scherm de hele foto, zonder uitsnede; hij blijft staan naast de check. */
	.on-tafel__beeld { position: sticky; top: calc(var(--cg-header-h) + 1.5rem); }
	.on-tafel__beeld img { aspect-ratio: 1 / 1; }
	.on-tafel__tekst { padding-top: 1rem; }
}

@media (max-width: 699px) {
	.on-lijst--rij { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--hp-lijn); text-align: left; }
	.on-lijst--rij li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--hp-lijn); }
	.on-lijst--rij .on-lijst__nr { grid-row: 1 / span 2; margin: 0; }
	.on-lijst--rij p { max-width: none; margin-inline: 0; }
}

/* =============================================================
   Rekentools (inc/rekentools.php, 13 okt 2026). Het overzicht
   (patterns/rekentools.php, klassen rt-): drie kaarten, elk met een rustige
   productfoto op een zacht vlak. De toolpagina's (klassen rk-): dezelfde kop
   met de link terug, de vraag, de wisselknoppen en de widget.
   ============================================================= */
.rt { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3.5rem, 7vw, 6rem); background: linear-gradient(180deg, var(--hp-zacht) 0%, var(--hp-zacht) 55%, #fff 100%); text-align: center; }
.rt h1 { margin: 0; font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.rt__zin { margin: 1.2rem auto 0; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.45; color: var(--cg-ink-2); }
.rt__keuzes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.5rem); max-width: 1120px; margin: clamp(1.75rem, 3.5vw, 2.75rem) auto 0; text-align: left; }
.rt-kaart { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: clamp(26px, 3vw, 36px); background: #fff; color: var(--cg-ink); text-decoration: none; box-shadow: 0 0 0 1px hsla(160, 25%, 30%, 0.06), 0 0 0 6px hsla(0, 0%, 100%, 0.55), 0 30px 60px -24px hsla(160, 30%, 14%, 0.22), 0 60px 90px -50px hsla(160, 35%, 16%, 0.38); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.rt-kaart:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px hsla(160, 25%, 30%, 0.08), 0 0 0 6px hsla(0, 0%, 100%, 0.55), 0 40px 70px -26px hsla(160, 30%, 14%, 0.3), 0 70px 100px -50px hsla(160, 35%, 16%, 0.42); }
.rt-kaart:focus-visible { outline: 2px solid var(--hp-groen); outline-offset: 4px; }
/* De foto ligt los in het vlak, zodat een hoog en een breed product hetzelfde vlak krijgen en de titels op één lijn staan. */
.rt-kaart__beeld { --rt-rand: clamp(1.5rem, 4vw, 3rem); position: relative; display: block; aspect-ratio: 4 / 3; background: linear-gradient(160deg, #eef6f2 0%, #f7faf8 100%); }
.rt-kaart__beeld img { position: absolute; inset: var(--rt-rand); width: calc(100% - 2 * var(--rt-rand)); height: calc(100% - 2 * var(--rt-rand)); object-fit: contain; filter: drop-shadow(0 24px 26px hsla(160, 30%, 14%, 0.22)); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.rt-kaart:hover .rt-kaart__beeld img { transform: scale(1.03); }
.rt-kaart__tekst { display: grid; gap: 0.35rem; padding: clamp(1.25rem, 2.6vw, 2rem); padding-right: 4.5rem; }
.rt-kaart__tekst b { font-size: clamp(1.5rem, 2.8vw, 2.25rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; }
.rt-kaart__tekst span { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.45; color: var(--cg-ink-2); }
.rt-kaart__pijl { position: absolute; right: clamp(1.1rem, 2.4vw, 1.75rem); bottom: clamp(1.25rem, 2.6vw, 2rem); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--hp-groen); color: #fff; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.rt-kaart__pijl::before { content: "\2192"; font-size: 1.25rem; font-style: normal; line-height: 1; }
.rt-kaart:hover .rt-kaart__pijl { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
	.rt-kaart, .rt-kaart__beeld img, .rt-kaart__pijl { transition: none; }
	.rt-kaart:hover { transform: none; }
}

/* ---------- de kop van een toolpagina ---------- */
.rk-kop { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); background: linear-gradient(180deg, var(--hp-zacht) 0%, var(--hp-zacht) 45%, #fff 100%); text-align: center; }
.rk-kop h1 { max-width: 12em; margin: 0 auto; font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.rk-kop__zin { max-width: 26em; margin: 1.2rem auto 0; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.45; color: var(--cg-ink-2); }
/* Wisselen tussen de tools: een rij knoppen op één wit vlak, de huidige groen. */
.rk-wissel { display: inline-flex; gap: 4px; max-width: 100%; margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: 4px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px hsla(160, 25%, 30%, 0.06), 0 14px 30px -20px hsla(160, 30%, 14%, 0.4); }
.rk-wissel__item { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 52px; padding: 0 1.25rem 0 0.6rem; border-radius: 999px; color: var(--cg-ink); font-size: 1rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color 0.25s ease, color 0.25s ease; }
.rk-wissel__item:hover { background: var(--hp-zacht); }
.rk-wissel__item:focus-visible { outline: 2px solid var(--hp-groen); outline-offset: 2px; }
.rk-wissel__item[aria-current="page"] { background: var(--hp-groen); color: #fff; }
.rk-wissel__foto { flex: none; width: 40px; height: 40px; object-fit: contain; border-radius: 50%; padding: 5px; background: var(--hp-zacht); }
.rk-wissel__item[aria-current="page"] .rk-wissel__foto { background: hsla(0, 0%, 100%, 0.88); }
.rk-kop__widget { max-width: 1020px; margin: clamp(1.75rem, 3.5vw, 2.75rem) auto 0; text-align: left; scroll-margin-top: calc(var(--cg-header-h, 76px) + 1rem); }
.rk-kop__widget .hb-check.cs { max-width: none; margin: 0; }
/* Een tool die er nog niet is: de widget in zijn vaste vorm, met de weg naar de woningscan. */
.rk-straks .cs__podium { min-height: 320px; }
.rk-straks__acties { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.rk-straks__acties .cg-btn { min-height: 60px; padding-inline: 2.25rem; }
@media (max-width: 599px) {
	.rk-wissel { display: flex; width: 100%; }
	.rk-wissel__item { flex: 1 1 0; justify-content: center; min-height: 48px; padding: 0 0.5rem; font-size: 0.9375rem; }
	.rk-wissel__foto { display: none; }
}
/* Geen algemene band uit de footer: op een toolpagina reken je al. De pagina sluit zelf af (.rk-slot). */
.cg-blokken:has(.rk-slot) .cg-finale { display: none; }
.cg-blokken:has(.rk-slot) .cg-footer { --cg-footer-band: 0rem; padding-top: clamp(2.5rem, 5vw, 4rem); }
/* De afsluiting: een donkere band met de drie stappen naar een offerte. */
.rk-slot__in { text-align: center; }
.rk-slot h2 { max-width: 18em; margin: 0 auto; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.rk-slot__acties { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem 1.75rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.rk-slot__acties .cg-btn { min-height: 58px; padding-inline: 2rem; }
.rk-slot--donker { padding-block: clamp(3.5rem, 7vw, 6rem); background: hsl(162, 38%, 10%); color: #fff; }
.rk-slot--donker h2 { color: #fff; }
.rk-slot--donker h2 span { color: #6ceab1; }
.rk-stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.5rem); max-width: 1020px; margin: clamp(2rem, 4vw, 3rem) auto 0; padding: 0; list-style: none; counter-reset: rk; text-align: left; }
.rk-stappen li { padding: clamp(1.25rem, 2.4vw, 1.75rem); border-radius: var(--cg-r); background: hsla(0, 0%, 100%, 0.06); box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.1); counter-increment: rk; }
.rk-stappen li::before { content: counter(rk); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 1rem; border-radius: 50%; background: hsla(0, 0%, 100%, 0.12); font-weight: 600; color: #6ceab1; }
.rk-stappen b { display: block; font-size: 1.1875rem; font-weight: 600; }
.rk-stappen span { display: block; margin-top: 0.35rem; font-size: 1rem; line-height: 1.5; color: hsla(0, 0%, 100%, 0.78); }
.rk-slot__link { padding: 0; border: 0; background: none; font: inherit; font-size: 1.0625rem; color: #fff; text-decoration: underline; text-decoration-color: hsla(0, 0%, 100%, 0.4); text-underline-offset: 5px; cursor: pointer; }
.rk-slot__link:hover { text-decoration-color: currentColor; }
/* Twee tools op één plek: de schakelaar boven de tool. */
.rk-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 30rem; margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem); scroll-margin-top: calc(var(--cg-header-h, 76px) + 1rem); }
@media (max-width: 899px) {
	.rk-stappen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
	.rk-tabs button { padding-inline: 0.5rem; font-size: 0.9375rem; line-height: 1.2; }
}
@media (max-width: 759px) {
	.rt__keuzes { grid-template-columns: minmax(0, 1fr); }
	.rt-kaart { flex-direction: row; align-items: stretch; }
	.rt-kaart__beeld { --rt-rand: 1rem; flex: none; width: 38%; min-height: 168px; aspect-ratio: auto; }
	.rt-kaart__tekst { align-content: center; padding: 1.1rem 1rem 3.4rem 1.1rem; }
	.rt-kaart__pijl { width: 40px; height: 40px; right: 1rem; bottom: 1rem; }
}

/* =============================================================
   Thuisbatterij-hub (25 okt 2026, optie 1; patterns/hub-thuisbatterij.php).
   De blokken van de warmtepomp-hub (hn-) en de adviseursband (gc-band).
   ============================================================= */
.tb-hero .hp-hero__foto { object-position: 45% 30%; }
button.gc-band__link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }

/* =============================================================
   Wat is een thuisbatterij? (25 okt 2026, patterns/tb-wat-is-een-
   thuisbatterij.php: optie 1 met het gesprek uit optie 3). Klassen tb-.
   ============================================================= */
/* De kop als kaart, de foto rechts: de vraag loopt nooit over een gezicht. */
@media (min-width: 1200px) {
	.gk2--rechts .gk2__kaart { background: hsl(162, 38%, 10%); }
	.gk2--rechts .gk2__kaart img { left: 36%; width: 64%; object-position: 50% 30%; }
	.gk2--rechts .gk2__kaart::before { background: linear-gradient(90deg, hsl(162, 38%, 10%) 0%, hsl(162, 38%, 10%) 36%, hsla(162, 38%, 10%, 0.55) 46%, hsla(162, 38%, 10%, 0) 62%); }
}

/* De band met de adviseur links: de foto beslaat alleen de linkerkant. */
@media (min-width: 900px) {
	.tb-band--links { background: hsl(162, 38%, 10%); }
	.tb-band--links .gc-band__foto { width: 58%; object-position: 35% 20%; }
}

/* De kop met de tekst links en de foto rechts (salderen, optie 2). */
.tb-kop { padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); background: linear-gradient(180deg, #fff 0%, var(--hp-zacht) 100%); }
.tb-kop__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.tb-kop .gc-terug { margin-bottom: 1.25rem; }
.tb-kop h1 { margin: 0; font-size: clamp(2.4rem, 4.6vw, 4.25rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; color: var(--cg-ink); }
.tb-kop h1 span { color: var(--hp-groen); }
.tb-kop__zin { max-width: 30em; margin: 1rem 0 0; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--cg-ink-2); }
.tb-kop__foto { overflow: hidden; aspect-ratio: 4 / 5; border-radius: 32px; }
.tb-kop__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* Nu en vanaf 2027 naast elkaar (salderen, optie 2). */
.tb-vergelijk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.25rem); }
.tb-vergelijk__kolom { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 28px; background: var(--hp-zacht); }
.tb-vergelijk__kolom--straks { background: hsl(162, 38%, 10%); color: #fff; }
.tb-vergelijk__kop { margin: 0 0 1rem; font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 600; letter-spacing: -0.03em; }
.tb-vergelijk__kolom--straks .tb-vergelijk__kop { color: #6ceab1; }
.tb-vergelijk dl { display: grid; margin: 0; }
.tb-vergelijk dl div { padding: 1rem 0; border-top: 1px solid var(--hp-lijn); }
.tb-vergelijk__kolom--straks dl div { border-top-color: hsla(0, 0%, 100%, 0.14); }
.tb-vergelijk dt { font-size: 0.9375rem; font-weight: 500; color: var(--hp-groen-diep); }
.tb-vergelijk__kolom--straks dt { color: hsla(0, 0%, 100%, 0.66); }
.tb-vergelijk dd { margin: 0.3rem 0 0; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.45; color: var(--cg-ink); }
.tb-vergelijk__kolom--straks dd { color: #fff; }

/* Wat betekent dit voor mij? Drie vragen en een antwoord (salderen). */
.tb-voormij { max-width: 960px; margin-inline: auto; padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: 32px; background: #fff; box-shadow: 0 0 0 1px var(--hp-lijn), 0 30px 60px -40px hsla(160, 30%, 14%, 0.35); }
.tb-voormij--stappen { max-width: 720px; }
.tb-voormij__vraag + .tb-voormij__vraag { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hp-lijn); }
.tb-voormij--stappen .tb-voormij__vraag + .tb-voormij__vraag { margin-top: 0; padding-top: 0; border-top: 0; }
.tb-voormij__label { margin: 0 0 0.85rem; font-size: clamp(1.1875rem, 1.8vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; color: var(--cg-ink); }
.tb-voormij__knoppen { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tb-keuze { min-height: 52px; padding: 0 1.4rem; border: 0; border-radius: 999px; background: var(--hp-zacht); box-shadow: inset 0 0 0 1px var(--hp-lijn); font: inherit; font-weight: 500; color: var(--cg-ink); cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; }
.tb-keuze:hover { box-shadow: inset 0 0 0 1px var(--hp-groen); }
.tb-keuze[aria-pressed="true"] { background: var(--hp-groen); box-shadow: none; color: #fff; }
.tb-voormij__stand { margin: 0 0 1rem; font-size: 0.9375rem; font-weight: 500; color: var(--hp-groen-diep); }
.tb-voormij__verder { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.tb-voormij__verder .cg-btn { margin-left: auto; }
.tb-voormij__verder .cg-btn:disabled { opacity: 0.45; cursor: default; }
.tb-voormij__verder [hidden] { display: none; }
.tb-voormij__terug { padding: 0; border: 0; background: none; font: inherit; color: var(--cg-ink-2); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.tb-voormij__uitkomst { margin-top: 1.75rem; padding: clamp(1.4rem, 3vw, 2.25rem); border-radius: 24px; background: hsl(162, 38%, 10%); color: #fff; animation: tb-in 0.35s ease; }
.tb-voormij--stappen .tb-voormij__uitkomst { margin-top: 0; }
.tb-voormij__leeg { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: hsla(0, 0%, 100%, 0.72); }
.tb-voormij__conclusie { margin: 0; font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; color: #fff; }
.tb-voormij__regels { display: grid; gap: 0.6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.tb-voormij__regels li { position: relative; padding-left: 1.6rem; font-size: 1.0625rem; line-height: 1.5; color: hsla(0, 0%, 100%, 0.84); }
.tb-voormij__regels li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 50%; background: #6ceab1; }
.tb-voormij__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.5rem; }
.tb-voormij__link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 52px; padding: 0 1.5rem; border-radius: 999px; background: var(--hp-groen); font-weight: 500; color: #fff; text-decoration: none; transition: background-color 0.2s ease; }
.tb-voormij__link:hover { background: #45c897; color: #fff; }
.tb-voormij__bel { padding: 0; border: 0; background: none; font: inherit; color: #fff; text-decoration: underline; text-decoration-color: hsla(0, 0%, 100%, 0.4); text-underline-offset: 4px; cursor: pointer; }
.tb-voormij__uitkomst .tb-voormij__terug { margin-top: 1.25rem; color: hsla(0, 0%, 100%, 0.72); }
@media (max-width: 599px) {
	.tb-voormij { padding: 1.25rem; border-radius: 24px; }
	.tb-voormij__knoppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tb-keuze { padding-inline: 0.75rem; }
	.tb-voormij__link { width: 100%; justify-content: space-between; }
	.tb-voormij__link { padding-inline: 1.1rem; }
	.tb-voormij__uitkomst { padding: 1.25rem; }
	.tb-voormij--stappen { padding: 0.75rem; }
	.tb-voormij--stappen .tb-voormij__vragen { padding: 0.5rem; }
}

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

/* Wat erin zit: drie delen. */
.tb-delen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.tb-delen li { padding: clamp(1.4rem, 2.6vw, 2rem); border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--hp-lijn); }
.tb-delen__icoon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1.1rem; border-radius: 50%; background: var(--hp-zacht); color: var(--hp-groen-diep); }
.tb-delen b { display: block; font-size: clamp(1.1875rem, 1.6vw, 1.375rem); font-weight: 500; letter-spacing: -0.02em; color: var(--cg-ink); }
.tb-delen p { margin: 0.5rem 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--cg-ink-2); }
/* Past hij bij mij? Wanneer past hij: drie antwoorden in één strook (tweede ronde). */
.tb-past { padding: clamp(1.25rem, 2.6vw, 2rem); border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--hp-lijn), 0 24px 48px -36px hsla(160, 30%, 14%, 0.3); }
.tb-past__balk { height: 6px; margin-bottom: clamp(1rem, 2vw, 1.5rem); border-radius: 6px; background: linear-gradient(90deg, #f6b25c 0%, #9fdcc0 50%, var(--hp-groen) 100%); }
.tb-past__lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); margin: 0; padding: 0; list-style: none; }
.tb-past__stap a { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.25rem; align-items: baseline; color: inherit; text-decoration: none; }
.tb-past__stip { width: 12px; height: 12px; border-radius: 50%; background: var(--hp-groen); }
.tb-past__stap--niet .tb-past__stip { background: #f6b25c; }
.tb-past__stap--narekenen .tb-past__stip { background: #9fdcc0; }
.tb-past__stap b { font-size: clamp(1.1875rem, 1.7vw, 1.4375rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: var(--cg-ink); }
.tb-past__wie, .tb-past__stap em { grid-column: 2; }
.tb-past__wie { font-size: 1rem; line-height: 1.45; color: var(--cg-ink-2); }
.tb-past__stap em { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; font-size: 0.9375rem; font-style: normal; font-weight: 500; color: var(--hp-groen-diep); }
.tb-past__stap em svg { transition: transform 0.25s ease; }
.tb-past__stap a:hover em svg { transform: translateX(4px); }
.tb-past__jouw { display: none; margin-left: 0.35rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--hp-groen); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; vertical-align: middle; color: #fff; }
.tb-past.heeft-uitslag .tb-past__stap { opacity: 0.4; transition: opacity 0.3s ease; }
.tb-past.heeft-uitslag .tb-past__stap.is-jouw { opacity: 1; }
.tb-past__stap.is-jouw .tb-past__jouw { display: inline-block; }

/* Past hij bij mij? De korte check boven de strook (derde ronde). */
.tb-check { display: grid; gap: 1.25rem; max-width: 1020px; margin-inline: auto; }
.tb-check__vragen { width: 100%; max-width: 720px; margin-inline: auto; }
.tb-check--aantikken .tb-check__vragen { padding: clamp(0.75rem, 2vw, 1.25rem); }
.tb-check--stappen .tb-voormij__verder .tb-voormij__terug[data-tb-opnieuw] { margin-right: auto; }

/* Past hij bij mij? De uitleg in vier rustige vlakken (optie 1). */
.tb-uitleg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.tb-uitleg li { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--hp-lijn); }
.tb-uitleg h3 { margin: 0; font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; color: var(--cg-ink); }
.tb-uitleg p { max-width: 34em; margin: 0.75rem 0 0; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.6; color: var(--cg-ink-2); }


/* De twee getallen op elke offerte. */
.tb-getallen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.25rem); }
.tb-getal { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 28px; background: var(--hp-zacht); }
.tb-getal__eenheid { display: block; margin-bottom: 0.75rem; font-size: clamp(3rem, 6vw, 5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--hp-groen); }
.tb-getal b { display: block; font-size: clamp(1.1875rem, 1.6vw, 1.375rem); font-weight: 500; letter-spacing: -0.02em; color: var(--cg-ink); }
.tb-getal p { margin: 0.5rem 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--cg-ink-2); }

/* Een adviseur legt het uit: de vraag rechts, het antwoord links. */
.tb-gesprek { display: grid; gap: clamp(1.75rem, 3.4vw, 2.75rem); max-width: 960px; margin: 0 auto; padding: 0; list-style: none; }
.tb-gesprek li { display: grid; gap: 0.75rem; }
.tb-gesprek__vraag { justify-self: end; max-width: 80%; margin: 0; padding: 1.1rem 1.5rem; border-radius: 26px 26px 8px 26px; background: var(--hp-groen-diep); font-size: clamp(1.125rem, 1.7vw, 1.4375rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; color: #fff; }
.tb-gesprek__antwoord { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 1rem; align-items: end; max-width: 88%; }
.tb-gesprek__antwoord img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.tb-gesprek__antwoord p { margin: 0; padding: 1.25rem 1.5rem; border-radius: 26px 26px 26px 8px; background: #fff; box-shadow: 0 0 0 1px var(--hp-lijn), 0 18px 36px -28px hsla(160, 30%, 14%, 0.35); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--cg-ink-2); }

@media (max-width: 899px) {
	.tb-kop__in { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.tb-kop__foto { order: -1; aspect-ratio: 16 / 10; border-radius: 26px; }
	.tb-vergelijk { grid-template-columns: minmax(0, 1fr); }
	.tb-delen, .tb-getallen { grid-template-columns: minmax(0, 1fr); }
	.tb-past__lijst { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
	.tb-past__balk { display: none; }
	.tb-uitleg { grid-template-columns: minmax(0, 1fr); }
	.tb-gesprek__vraag { max-width: 90%; }
	.tb-gesprek__antwoord { max-width: 100%; grid-template-columns: 40px minmax(0, 1fr); }
	.tb-gesprek__antwoord img { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.tb-voormij__uitkomst { animation: none; }
}

/* =============================================================
   Wat kost een thuisbatterij (25 okt 2026, vierde ronde,
   patterns/onderdelen/tb-kosten-basis.php). Een echte kopfoto met de tekst
   erop, de widget die zelf de uitkomst wordt (tw-), en minder rond
   (Gideon: "maak alles minder rond"). Klassen tk- en tw-.
   ============================================================= */
.tk-held .hp-hero__label { text-decoration: none; }
.tk-held .hp-hero__label::before { content: "\2190"; width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; font-weight: 500; color: #6ceab1; }
.tk-held .hp-hero__label, .tk-hoekig, .tk-held .cg-btn { border-radius: 10px; }
.hn-hero.tk-held h1 { max-width: 11em; }
.tk-hero { min-height: clamp(560px, 80vh, 760px); background: hsl(162, 38%, 10%); }
.tk-hero .hp-hero__foto { animation: none; }
.tk-hero--onder .hp-hero__foto { object-position: 50% 25%; }
.tk-hero--onder::before { background: linear-gradient(0deg, hsla(162, 38%, 8%, 0.92) 0%, hsla(162, 38%, 8%, 0.55) 34%, hsla(162, 38%, 8%, 0) 62%), linear-gradient(90deg, hsla(162, 38%, 8%, 0.5) 0%, hsla(162, 38%, 8%, 0) 55%), linear-gradient(180deg, hsla(162, 38%, 8%, 0.5) 0%, hsla(162, 38%, 8%, 0) 22%); }
.tk-hero--links .hp-hero__foto { object-position: 50% 20%; }
.tk-hero--links::before { background: linear-gradient(90deg, hsl(162, 38%, 10%) 0%, hsla(162, 38%, 10%, 0.88) 30%, hsla(162, 38%, 10%, 0.25) 55%, hsla(162, 38%, 10%, 0) 72%), linear-gradient(180deg, hsla(162, 38%, 8%, 0.5) 0%, hsla(162, 38%, 8%, 0) 22%); }
.tk-hero__in { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; justify-self: stretch; padding-block: calc(var(--cg-header-h) + 2.5rem) clamp(3.5rem, 7vw, 6rem); text-align: left; }
.tk-hero--onder .tk-hero__in { justify-content: flex-end; }
.tk-hero h1 { max-width: 9em; font-size: clamp(2.6rem, 4.6vw, 4.75rem); }
.tk-hero .hp-hero__zin { max-width: 24em; }
.tk-hero--links .hp-hero__zin { max-width: 19em; }
.tk-hero--onder .hp-hero__zin { max-width: 20em; }
.tk-hero--onder h1 { max-width: 8.5em; }
.tk-hero .hp-hero__zin { max-width: 26em; }
.tk-tool { margin-top: clamp(1.75rem, 3vw, 2.5rem); text-align: center; }
.tk-kolommen { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.tk-kolommen li { padding-inline: clamp(1rem, 2vw, 1.75rem); border-left: 1px solid #cddcd4; }
.tk-kolommen li:first-child { padding-left: 0; border-left: 0; }
.tk-kolommen b { display: block; font-size: clamp(1.1875rem, 1.6vw, 1.375rem); font-weight: 500; letter-spacing: -0.02em; color: var(--cg-ink); }
.tk-kolommen p { margin: 0.6rem 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--cg-ink-2); }
@media (min-width: 900px) and (max-width: 1439px) {
	.tk-kolommen[style*="--n: 5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.75rem; }
	.tk-kolommen[style*="--n: 5"] li:nth-child(4) { padding-left: 0; border-left: 0; }
}
@media (min-width: 900px) and (max-width: 1199px) {
	.tk-kolommen[style*="--n: 4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }
	.tk-kolommen[style*="--n: 4"] li:nth-child(3) { padding-left: 0; border-left: 0; }
}
.tb-vergelijk.tk-hoekig .tb-vergelijk__kolom { border-radius: 14px; }

/* De widget "past het bij jou?": vragen en uitkomst in hetzelfde vlak. */
.tw { max-width: 1020px; margin-inline: auto; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--hp-lijn), 0 30px 60px -44px hsla(160, 30%, 14%, 0.35); }
.tw--kaart, .tw--donker { max-width: 760px; }
.tw--wijzer { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); }
.tw__wijzer { display: grid; align-content: start; gap: 0.35rem; margin: 0; padding: clamp(1.5rem, 3vw, 2.25rem); list-style: none; background: var(--hp-zacht); }
.tw__wijzer li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; gap: 0.75rem; padding: 0.7rem 0.75rem; border-radius: 8px; font-size: 1.0625rem; font-weight: 500; color: #8a9a93; }
.tw__wijzer i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px #c3d3cb; color: transparent; }
.tw__wijzer small { display: block; margin-top: 0.15rem; font-size: 0.875rem; font-weight: 400; color: var(--cg-ink-2); }
.tw__wijzer li.is-nu { background: #fff; color: var(--cg-ink); box-shadow: 0 0 0 1px var(--hp-lijn); }
.tw__wijzer li.is-nu i { box-shadow: inset 0 0 0 2px var(--hp-groen); }
.tw__wijzer li.is-klaar { color: var(--cg-ink); }
.tw__wijzer li.is-klaar i { background: var(--hp-groen); box-shadow: none; color: #fff; }
.tw__hoofd { padding: clamp(1.5rem, 3.4vw, 2.75rem); }
.tw__stand { margin: 0 0 1rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; color: var(--hp-groen-diep); }
.tw__label { margin: 0 0 1.25rem; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; color: var(--cg-ink); }
.tw__knoppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; max-width: 420px; }
.tw__keuze { min-height: 56px; border: 1px solid #c9d8d0; border-radius: 10px; background: #fff; font: inherit; font-size: 1.0625rem; font-weight: 500; color: var(--cg-ink); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.tw__keuze:hover { border-color: var(--hp-groen-diep); }
.tw__keuze[aria-pressed="true"] { border-color: var(--hp-groen); background: var(--hp-groen); color: #fff; }
.tw__verder { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.tw__verder .cg-btn { margin-left: auto; }
.tw__verder [hidden] { display: none; }
.tw .cg-btn { border-radius: 10px; }
.tw .cg-btn:disabled { opacity: 0.45; cursor: default; }
.tw__terug { padding: 0; border: 0; background: none; font: inherit; color: var(--cg-ink-2); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.tw__uitkomst { animation: tb-in 0.35s ease; }
.tw__titel { margin: 0; font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; color: var(--cg-ink); }
.tw__zin { max-width: 32em; margin: 0.75rem 0 0; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--cg-ink-2); }
.tw__overzicht { display: grid; gap: 0.5rem; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--hp-lijn); list-style: none; }
.tw__overzicht li { position: relative; padding-left: 1.6rem; font-size: 1.0625rem; color: var(--cg-ink); }
.tw__overzicht li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 10px; height: 10px; border-radius: 3px; background: var(--hp-groen); }
.tw__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.75rem; }
.tw__link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--hp-groen-diep); text-decoration: none; }
.tw__link svg { transition: transform 0.25s ease; }
.tw__link:hover svg { transform: translateX(4px); }
.tw__uitkomst .tw__terug { margin-top: 1.5rem; }
/* Donker: dezelfde kaart, de vragen en de uitkomst op donker. */
.tw--donker { background: hsl(162, 38%, 10%); box-shadow: none; }
.tw--donker .tw__stand { color: #6ceab1; }
.tw--donker .tw__label, .tw--donker .tw__titel, .tw--donker .tw__overzicht li { color: #fff; }
.tw--donker .tw__zin { color: hsla(0, 0%, 100%, 0.78); }
.tw--donker .tw__keuze { border-color: hsla(0, 0%, 100%, 0.25); background: transparent; color: #fff; }
.tw--donker .tw__keuze:hover { border-color: #6ceab1; }
.tw--donker .tw__keuze[aria-pressed="true"] { border-color: #6ceab1; background: #6ceab1; color: hsl(162, 38%, 10%); }
.tw--donker .tw__terug { color: hsla(0, 0%, 100%, 0.72); }
.tw--donker .tw__overzicht { border-top-color: hsla(0, 0%, 100%, 0.14); }
.tw--donker .tw__overzicht li::before { background: #6ceab1; }
.tw--donker .tw__link { color: #6ceab1; }
.tw--kaart.is-uitkomst { box-shadow: 0 0 0 1px var(--hp-lijn), inset 6px 0 0 var(--hp-groen), 0 30px 60px -44px hsla(160, 30%, 14%, 0.35); }

@media (max-width: 1199px) {
	.tk-hero { display: block; min-height: 0; background: #fff; color: var(--cg-ink); }
	.tk-hero .hp-hero__foto { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
	.tk-hero::before { bottom: auto; height: 56.25vw; background: linear-gradient(180deg, hsla(162, 38%, 8%, 0.65) 0%, hsla(162, 38%, 8%, 0) 38%); }
	.tk-hero__in { padding-block: clamp(1.75rem, 4vw, 2.5rem) clamp(0.5rem, 2vw, 1rem); }
	.tk-hero .hp-hero__label { border-color: transparent; background: var(--hp-zacht); color: var(--hp-groen-diep); -webkit-backdrop-filter: none; backdrop-filter: none; }
	.tk-held .hp-hero__label::before { color: var(--hp-groen-diep); }
	.tk-hero h1 { color: var(--cg-ink); }
	.tk-hero h1 span { color: var(--hp-groen); }
	.tk-hero .hp-hero__zin { color: var(--cg-ink-2); }
	.tk-hero--links .hp-hero__zin { max-width: 26em; }
	.tk-hero--onder .hp-hero__zin, .tk-hero--onder h1 { max-width: none; }
}
@media (max-width: 899px) {
	.tw--wijzer { grid-template-columns: minmax(0, 1fr); }
	.tw__wijzer { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; padding: 0.75rem; }
	.tw__wijzer li { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0.35rem; padding: 0.5rem 0.25rem; font-size: 0.8125rem; text-align: center; }
	.tw__wijzer span { overflow-wrap: anywhere; hyphens: auto; }
	.tw__wijzer small { display: none; }
}
@media (max-width: 639px) {
	.tk-hero .hp-hero__foto { aspect-ratio: 4 / 3; }
	.tk-hero::before { height: 75vw; }
	.tw__knoppen { max-width: none; }
	.tw__acties .cg-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.tw__uitkomst { animation: none; }
}

/* =============================================================
   Welk energiecontract past bij een thuisbatterij? (25 okt 2026,
   patterns/onderdelen/tb-contract-basis.php). De opbouw van "hybride of
   all-electric" (hv-): drie vlakken in plaats van twee, en een schakelaar
   met drie soorten. Minder rond. Klassen tc-.
   ============================================================= */
.tc-deuren { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tc-deuren.tk-twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tc-deuren .hv-deur { min-height: clamp(280px, 24vw, 360px); border-radius: 14px; }
.tc-deuren .hv-deur:hover { transform: none; box-shadow: none; }
.tc-deuren .tc-deur__naam { margin-top: 1rem; padding-top: 0; font-size: clamp(2.4rem, 4.4vw, 4rem); font-weight: 500; letter-spacing: -0.05em; line-height: 1; color: var(--hp-groen-diep); }
.tc-deuren .hv-deur--groen .tc-deur__naam { color: #fff; }
.tc-deuren .hv-deur__wat { margin-top: auto; padding-top: 2rem; }
.tc-uitleg__soort { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 540px); border-radius: 12px; }
.tc-uitleg__soort button { border-radius: 8px; }
.tc-uitleg .hv-uitleg__label span { border-radius: 6px; }
.hv-uitleg[data-toon="een"] .hv-uitleg__antwoord[data-soort="een"], .hv-uitleg[data-toon="vast"] .hv-uitleg__antwoord[data-soort="vast"], .hv-uitleg[data-toon="variabel"] .hv-uitleg__antwoord[data-soort="variabel"], .hv-uitleg[data-toon="dynamisch"] .hv-uitleg__antwoord[data-soort="dynamisch"] { visibility: visible; opacity: 1; transition: opacity 0.3s ease 0.05s, visibility 0s; }
@media (max-width: 899px) {
	.tc-deuren { grid-template-columns: minmax(0, 1fr); }
	.tc-deuren.tk-twee { grid-template-columns: minmax(0, 1fr); }
	.tc-deuren .hv-deur { min-height: 0; }
	.tc-deuren .hv-deur__wat { padding-top: 1rem; }
}

/* =============================================================
   Hoeveel kWh heb ik nodig? (25 okt 2026, patterns/onderdelen/tb-kwh-basis.php).
   Minder rond, de verwijzing naar de tool, en de vorm met een staande foto.
   ============================================================= */
.tk-sectie .gc-telt__vlak, .tk-sectie .ww-stappen li, .tk-sectie .tb-getal, .tk-sectie .tb-uitleg li { border-radius: 14px; }
.tk-sectie .ww-stappen__nr, .tk-sectie .tb-delen__icoon { border-radius: 10px; }
.tk-sectie .gc-schaal a, .tk-sectie .hw-nakijken, .tk-sectie .gc-vragen li { border-radius: 14px; }
.gc-vragen.tk-vragen4 li { grid-column: span 3; }
@media (max-width: 899px) {
	.gc-vragen.tk-vragen4 li { grid-column: auto; }
}
.ww-stappen.tk-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tk-naartool { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem 3rem; padding: clamp(1.75rem, 4vw, 3rem); border-radius: 14px; background: var(--hp-zacht); }
.tk-naartool h2 { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.tk-naartool p { max-width: 34em; margin: 0.75rem 0 0; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--cg-ink-2); }
.tk-naartool .cg-btn { border-radius: 10px; }
@media (min-width: 900px) and (max-width: 1199px) {
	.ww-stappen.tk-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
	.ww-stappen.tk-vier { grid-template-columns: minmax(0, 1fr); }
	.tk-naartool { grid-template-columns: minmax(0, 1fr); }
	.tk-naartool .cg-btn { width: 100%; }
}

/* =============================================================
   Binnenkort (26 okt 2026, patterns/binnenkort.php en varianten/binnenkort-N.php).
   Voor onderwerpen die nog in de maak zijn. Rustig, hoekig, een beetje beweging.
   Klassen bk-.
   ============================================================= */
@keyframes bk-puls { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.9); opacity: 0.35; } }
.bk-klaar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.1rem); margin: 0; padding: 0; list-style: none; }
.bk-klaar a { display: flex; flex-direction: column; height: 100%; padding: clamp(1.4rem, 2.6vw, 2rem); border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--hp-lijn); color: inherit; text-decoration: none; transition: box-shadow 0.25s ease, transform 0.25s ease; }
.bk-klaar a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--hp-groen), 0 24px 40px -30px hsla(160, 30%, 14%, 0.5); }
.bk-klaar b { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; color: var(--cg-ink); }
.bk-klaar span { margin-top: 0.6rem; font-size: 1.0625rem; line-height: 1.5; color: var(--cg-ink-2); }
.bk-klaar em { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 1.25rem; font-style: normal; font-weight: 500; color: var(--hp-groen-diep); }
.bk-klaar em svg { transition: transform 0.25s ease; }
.bk-klaar a:hover em svg { transform: translateX(4px); }
.bk-licht { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); background: linear-gradient(180deg, #fff 0%, var(--hp-zacht) 100%); }
.bk-licht__label { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 1.25rem; font-size: 1rem; font-weight: 600; color: var(--hp-groen-diep); }
.bk-licht__label span { width: 10px; height: 10px; border-radius: 3px; background: var(--hp-groen); animation: bk-puls 2.4s ease-in-out infinite; }
.bk-licht h1 { max-width: 11em; margin: 0; font-size: clamp(2.8rem, 7vw, 6rem); font-weight: 600; letter-spacing: -0.05em; line-height: 0.98; color: var(--cg-ink); }
.bk-licht h1 span { color: var(--hp-groen); }
.bk-licht__zin { max-width: 30em; margin: 1.25rem 0 0; font-size: clamp(1.125rem, 1.6vw, 1.4375rem); line-height: 1.5; color: var(--cg-ink-2); }
.bk-bezig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin: 1.75rem 0 0; padding: 0.9rem 1.1rem; width: fit-content; max-width: 100%; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--hp-lijn); font-size: 1.0625rem; }
.bk-bezig__kop { font-weight: 600; color: var(--hp-groen-diep); }
.bk-bezig__regels { display: grid; }
.bk-bezig__regels span { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s ease; color: var(--cg-ink); }
.bk-bezig__regels span.is-nu { opacity: 1; transform: none; }
.bk-vragen { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hp-lijn); }
.bk-vragen li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: baseline; gap: 1rem; padding-block: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--hp-lijn); }
.bk-vragen span { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 600; letter-spacing: -0.04em; color: var(--hp-groen); }
.bk-vragen b { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; color: var(--cg-ink); }
@media (max-width: 899px) {
	.bk-klaar { grid-template-columns: minmax(0, 1fr); }
	.bk-vragen li { grid-template-columns: 2.75rem minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.bk-licht__label span { animation: none; }
}

/* =============================================================
   Hoekiger beeld (Gideon, 25 okt 2026: "de afbeeldingen mogen iets hoekiger
   over de hele website"). Alle vlakken met een foto krijgen dezelfde, kleinere
   hoek; kaarten, knoppen en velden houden hun eigen ronding.
   ============================================================= */
:root { --cg-r-beeld: 14px; }
.hp-paneel, .hp-werk__beelden, .hp-offerte, .hn-kaart, .gk2__kaart, .gc-telt__vlak--foto,
.hv-uitleg__stap, .gla__kaart, .of-duo__foto, .on-tafel__beeld, .on-tafel__beeld img,
.hs-meldcode, .tb-kop__foto, .rt-kaart { border-radius: var(--cg-r-beeld); }
@media (max-width: 899px) {
	:root { --cg-r-beeld: 12px; }
}

/* ---------- juridische pagina's (26 okt 2026): één rustige template, wit, tekst links ---------- */
.jv-kop { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem); background: #fff; }
.jv-kop h1 { max-width: 16em; margin: 0; font-size: clamp(1.9rem, 5vw, 3.25rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; overflow-wrap: break-word; color: var(--cg-ink); }
.jv-versie { margin: 0.9rem 0 0; font-size: 1rem; color: var(--cg-ink-3); }
.jv-inleiding { max-width: 42rem; margin-top: clamp(1.5rem, 3vw, 2rem); }
.jv-inleiding p { margin: 0 0 1rem; font-size: 1.125rem; line-height: 1.65; color: var(--cg-ink-2); }
.jv-inleiding p:last-child { margin-bottom: 0; }
.jv-inhoud { margin-top: clamp(2rem, 4vw, 2.75rem); padding: clamp(1.1rem, 2.5vw, 1.75rem) clamp(1.1rem, 3vw, 2rem); border-radius: var(--cg-r-beeld, 14px); background: var(--hp-zacht); }
.jv-inhoud ol { margin: 0; padding: 0; list-style: none; counter-reset: jv; columns: 1; column-gap: 3rem; }
.jv-inhoud li { counter-increment: jv; break-inside: avoid; margin: 0; }
.jv-inhoud a { display: flex; gap: 0.6rem; padding: 0.3rem 0; font-size: 1rem; line-height: 1.4; color: var(--cg-ink); text-decoration: none; }
.jv-inhoud a::before { content: counter(jv) "."; flex: none; min-width: 1.6rem; color: var(--hp-groen-diep); font-weight: 600; }
.jv-inhoud a:hover, .jv-inhoud a:focus-visible { color: var(--hp-groen-diep); }
@media (min-width: 720px) { .jv-inhoud ol { columns: 2; } }
@media (min-width: 1100px) { .jv-inhoud ol { columns: 3; } }

.jv-tekst { padding-block: 0 clamp(4rem, 8vw, 6rem); }
.jv-artikel { max-width: 44rem; padding-block: clamp(2rem, 4.5vw, 3rem); border-top: 1px solid var(--cg-rand); scroll-margin-top: 6rem; }
.jv-artikel h2 { margin: 0 0 1.1rem; font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; color: var(--cg-ink); }
.jv-nr { color: var(--hp-groen-diep); }
.jv-artikel__tekst p { margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.7; color: var(--cg-ink); }
.jv-artikel__tekst p:last-child, .jv-artikel__tekst ul:last-child { margin-bottom: 0; }
.jv-artikel__tekst ul { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.jv-artikel__tekst li { position: relative; margin: 0 0 0.4rem; padding-left: 1.4rem; font-size: 1.0625rem; line-height: 1.6; color: var(--cg-ink); }
.jv-artikel__tekst li::before { content: ""; position: absolute; left: 0.2rem; top: 0.68em; width: 6px; height: 6px; border-radius: 50%; background: var(--hp-groen); }
.jv-artikel__tekst a { color: var(--hp-groen-diep); text-decoration: underline; text-underline-offset: 3px; }
.jv-artikel__tekst h3 { margin: 1.75rem 0 0.75rem; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--cg-ink); }
.jv-artikel__tekst h3:first-child { margin-top: 0; }
.jv-contact { margin-top: 1.5rem; }
.jv-contact__naam { font-weight: 600; margin-bottom: 0.5rem !important; }
.jv-contact ul { margin-bottom: 0; }
.jv-kop--kort { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.jv-tekst--kort { padding-block: 0 clamp(4rem, 8vw, 6rem); }
.jv-tekst--kort .jv-artikel__tekst { max-width: 44rem; }