/* =============================================================
   ComfortGids — onderwerp-hub (warmtepomp)
   Rustig, ruim, weinig woorden. Bouwt op de tokens in main.css.
   Drie uitwerkingen naast elkaar tijdens de keuze: body.cg-stijl-1/2/3.
   ============================================================= */

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

/* ---------- check ---------- */

.hb-check { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 3vw, 3rem); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--cg-r-kaart); background: var(--cg-wit); border: 1px solid var(--cg-rand); box-shadow: var(--cg-schaduw); }
.hb-check__vragen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; align-content: start; }
.hb-veld { min-width: 0; }
.hb-veld label { display: block; margin: 0 0 0.45rem; font-size: 0.875rem; font-weight: 600; color: var(--cg-ink); }
.hb-veld label em { font-style: normal; font-weight: 500; color: var(--cg-ink-3); margin-left: 0.4rem; }
.hb-veld__in { position: relative; }
.hb-veld__in input,
.hb-veld__in select { width: 100%; font: inherit; font-size: 1.0625rem; line-height: 1.3; padding: 0.85rem 1.05rem; border-radius: var(--cg-r-knop); border: 1px solid var(--cg-rand); background: var(--cg-wit); color: var(--cg-ink); appearance: none; -webkit-appearance: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.hb-veld__in input:hover, .hb-veld__in select:hover { border-color: hsl(220, 12%, 78%); }
.hb-veld__in input:focus, .hb-veld__in select:focus { outline: none; border-color: var(--cg-merkgroen); box-shadow: 0 0 0 3px var(--cg-groen-zacht); }
.hb-veld__in input::placeholder { color: var(--cg-ink-3); opacity: 1; }
.hb-veld__in input[type="number"]::-webkit-outer-spin-button, .hb-veld__in input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hb-veld__in input[type="number"] { -moz-appearance: textfield; }
.hb-veld__in--keuze select { padding-right: 2.6rem; cursor: pointer; }
.hb-veld__in--keuze::after { content: ""; position: absolute; right: 1.05rem; top: 50%; width: 10px; height: 10px; transform: translateY(-50%); background: var(--cg-ink-2); pointer-events: none; -webkit-mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 15.5 4.5 8l1.4-1.4L12 12.7l6.1-6.1L19.5 8z"/></svg>'); mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 15.5 4.5 8l1.4-1.4L12 12.7l6.1-6.1L19.5 8z"/></svg>'); }
.hb-check { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin-inline: auto; }
.hb-check__actie { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 0.75rem; }

/* ---------- pop-ups ---------- */

.hb-dialog { width: min(92vw, 640px); max-height: min(90vh, 900px); padding: clamp(1.5rem, 3vw, 2.25rem); border: 0; border-radius: var(--cg-r-kaart); background: var(--cg-wit); color: var(--cg-ink); box-shadow: 0 40px 80px -30px hsla(220, 20%, 10%, 0.4); overflow: auto; }
.hb-dialog::backdrop { background: hsla(220, 20%, 10%, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hb-dialog__kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.hb-dialog__kop h2 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.hb-dialog__sluit { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--cg-rand); background: var(--cg-wit); color: var(--cg-ink); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.hb-dialog__sluit:hover { border-color: var(--cg-ink); background: var(--cg-grijs); }
.hb-modal__kop { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cg-accent); }
.hb-modal__titel { display: block; margin: 0.25rem 0 0.4rem; font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.hb-modal__uitleg { margin: 0 0 1.25rem; color: var(--cg-ink-2); }

/* Begin hier: drie vragen als deuren. */
.hb-begin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.hb-begin__kaart { display: flex; flex-direction: column; padding: clamp(1.4rem, 2.6vw, 2rem); border-radius: var(--cg-r-kaart); background: var(--cg-grijs); text-decoration: none; color: var(--cg-ink); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hb-begin__kaart:hover { transform: translateY(-2px); box-shadow: var(--cg-schaduw); color: var(--cg-ink); }
.hb-begin__kaart b { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.hb-begin__kaart span { margin: 0.6rem 0 1.25rem; color: var(--cg-ink-2); line-height: 1.5; }
.hb-begin__kaart em { margin-top: auto; font-style: normal; font-weight: 650; color: var(--cg-accent); }
.hb-begin__kaart em::after { content: " \2192"; }

/* ---------- geluidstest (van de oude site) ---------- */

.hb-gt { padding: clamp(1.5rem, 3vw, 2.75rem); border-radius: var(--cg-r-kaart); background: var(--cg-wit); border: 1px solid var(--cg-rand); box-shadow: var(--cg-schaduw); }
@keyframes hb-gt-golf { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* ---------- stappen ---------- */

.hb-stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.hb-stappen li { padding-top: 1.25rem; border-top: 2px solid var(--cg-accent); }
.hb-stappen span { display: block; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; color: var(--cg-accent); }
.hb-stappen b { display: block; margin: 0.6rem 0 0.4rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; }
.hb-stappen p { margin: 0; color: var(--cg-ink-2); }
.cg-werkwijze__grid .hb-stappen { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.cg-werkwijze__grid .hb-stappen li { border-top: 1px solid var(--cg-hairline); padding-top: 1rem; }

/* ---------- vragen ---------- */
.hb-vragen { border-top: 1px solid var(--cg-rand); }

/* ---------- kindpagina's ---------- */
.hb-begin--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hb-stappen--kaarten li { padding: clamp(1.4rem, 2.6vw, 2rem); border-top: 0; border-radius: var(--cg-r-kaart); background: var(--cg-grijs); }
.hb-verder__terug { margin: 1.75rem 0 0; text-align: center; }

/* Vragenlijst: één vraag per slide, voortgang bovenin. */
.hb-vragen { display: block; }
.hb-vragen__balk { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.hb-vragen__balk i { display: block; height: 4px; border-radius: 2px; background: var(--cg-grijs); transition: background-color 0.2s ease; }
.hb-vragen__balk i.is-af, .hb-vragen__balk i.is-nu { background: var(--cg-accent); }
.hb-vragen__balk i.is-nu { opacity: 0.55; }
@keyframes hb-slide-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- advies naar offerte (16 sep 2026) ---------- */

.hb-knoplink { padding: 0; font: inherit; font-weight: 650; background: none; border: 0; cursor: pointer; }
.hb-melding { margin: 0.75rem 0 0; font-size: 0.9375rem; font-weight: 600; color: hsl(6, 72%, 42%); }
.hb-weg { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* De aanvraag-pop-up. */
.hb-aanvraag__velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; margin: 1.25rem 0 0; }
.hb-veld--breed { grid-column: 1 / -1; }
.hb-aanvraag__keuze { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hb-aanvraag__keuze legend { width: 100%; margin: 0 0 0.45rem; padding: 0; font-size: 0.875rem; font-weight: 600; }
.hb-aanvraag__knop { margin-top: 1.5rem; }
.hb-aanvraag__klaar { outline: none; }
.hb-aanvraag__stappen { margin: 0.75rem 0 1.5rem; padding-left: 1.25rem; color: var(--cg-ink-2); line-height: 1.7; }

/* ---------- de hub als centraal punt (ronde 4) ---------- */
.hb-veld__in textarea { width: 100%; font: inherit; font-size: 1.0625rem; line-height: 1.45; padding: 0.85rem 1.05rem; border-radius: var(--cg-r-kaart); border: 1px solid var(--cg-rand); background: var(--cg-wit); color: var(--cg-ink); resize: vertical; }
.hb-veld__in textarea:focus { outline: none; border-color: var(--cg-merkgroen); box-shadow: 0 0 0 3px var(--cg-groen-zacht); }
/* De check als paneel: links je adres, rechts de vragen. */
.hb-check--paneel { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0; max-width: 1040px; padding: 0; overflow: hidden; box-shadow: 0 30px 60px -30px hsla(200, 25%, 12%, 0.25), 0 2px 6px hsla(200, 25%, 12%, 0.06); }
.hb-check__zij { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.5rem, 3vw, 2.5rem); background: linear-gradient(170deg, var(--cg-groen-zacht) 0%, hsl(152, 46%, 93%) 100%); }
.hb-check__zij .cg-kicker { margin-bottom: 0.9rem; color: #076a42; }
.hb-check__zijtitel { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.hb-check__zijzin { margin: 0.6rem 0 clamp(1.25rem, 2.5vw, 1.75rem); font-size: 0.9375rem; line-height: 1.55; color: var(--cg-ink-2); }
.hb-check__hoofd { padding: clamp(1.5rem, 3vw, 2.5rem); }
.hb-check__kop { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); padding-bottom: 1rem; border-bottom: 1px solid var(--cg-hairline); }
.hb-check__kop b { display: block; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.hb-check__kop span { display: block; margin-top: 0.3rem; font-size: 0.9375rem; color: var(--cg-ink-2); }
.hb-check--paneel .hb-check__actie { justify-content: flex-start; margin-top: 1.25rem; }
@media (max-width: 899px) {
	.hb-check--paneel { grid-template-columns: minmax(0, 1fr); }
	.hb-check--paneel .hb-check__actie .cg-btn { width: 100%; }
}

/* Offertecheck: het formulier in het checkpaneel en het kenmerk erna. */
.hb-check__vragen .hb-veld--breed { grid-column: 1 / -1; }
.hb-check__klaar { padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: var(--cg-r-kaart); background: var(--cg-groen-zacht); }
.hb-check__klaar:focus { outline: none; }
.hb-check__klaar p { margin: 0.6rem 0 0; color: var(--cg-ink-2); }
.hb-check__kenmerk { display: inline-block; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: 0.02em; color: #076a42; }

/* ---------- finetune (19 sep 2026) ---------- */
@media (max-width: 599px) {
	.hb-aanvraag__velden { grid-template-columns: minmax(0, 1fr); }
	.hb-aanvraag__knop { width: 100%; }
}

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
	.hb-begin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
	.hb-begin, .hb-begin--drie { grid-template-columns: minmax(0, 1fr); }
	.hb-stappen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
	.hb-check__vragen { grid-template-columns: minmax(0, 1fr); }
	.hb-check__actie .cg-btn { width: 100%; }
}

/* =============================================================
   Productfamilie (plan finetune 2, sectie 4): elke tool heeft een naam,
   een stand, een eigen vlak, keuzes als knoppen en een uitkomst die in de
   plaats van de vragen komt. Licht (wit) of donker (diepgroen).
   ============================================================= */

.cg-product { position: relative; border-radius: var(--cg-r-kaart); overflow: hidden; background: var(--cg-wit); color: var(--cg-ink); box-shadow: 0 30px 60px -30px hsla(200, 25%, 12%, 0.3), 0 2px 6px hsla(200, 25%, 12%, 0.06); }
.cg-product--donker { background: linear-gradient(135deg, hsl(158, 45%, 12%) 0%, var(--cg-donker) 100%); color: var(--cg-donker-tekst); }
.cg-product__kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1.25rem, 2.5vw, 2rem); border-bottom: 1px solid var(--cg-hairline); }
.cg-product--donker .cg-product__kop { border-bottom-color: hsla(0, 0%, 100%, 0.12); }
.cg-product__naam { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: var(--cg-ink); }
.cg-product--donker .cg-product__naam { color: #fff; }
.cg-product__naam::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 999px; background: var(--cg-merkgroen); box-shadow: 0 0 0 4px var(--cg-groen-zacht); }
.cg-product--donker .cg-product__naam::before { box-shadow: 0 0 0 4px hsla(150, 80%, 60%, 0.2); }
.cg-product__stand { font-size: 0.875rem; font-weight: 600; color: var(--cg-ink-3); }
.cg-product--donker .cg-product__stand { color: var(--cg-donker-tekst); }
.cg-product__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; }
.cg-product__adres { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 0.75rem; align-items: end; }
.cg-product__adres .cg-btn { grid-column: 1 / -1; }
.cg-product--donker .hb-veld label { color: #fff; }
.cg-product--donker .hb-veld label em { color: hsla(0, 0%, 100%, 0.55); }
.cg-product--donker .hb-veld__in input, .cg-product--donker .hb-veld__in select { background: hsla(0, 0%, 100%, 0.08); border-color: hsla(0, 0%, 100%, 0.18); color: #fff; }
.cg-product--donker .hb-veld__in input:hover, .cg-product--donker .hb-veld__in select:hover { border-color: hsla(0, 0%, 100%, 0.4); }
.cg-product--donker .hb-veld__in input:focus, .cg-product--donker .hb-veld__in select:focus { border-color: var(--cg-accent-fel); box-shadow: 0 0 0 3px hsla(150, 80%, 60%, 0.2); }
.cg-product--donker .hb-veld__in input::placeholder { color: hsla(0, 0%, 100%, 0.5); }
.cg-product--donker .hb-veld__in--keuze::after { background: hsla(0, 0%, 100%, 0.7); }
.cg-product--donker .hb-veld__in select option { color: var(--cg-ink); }
.cg-product--donker .cg-btn--secundair { color: #fff; border-color: hsla(0, 0%, 100%, 0.35); }
.cg-product--donker .cg-btn--secundair:hover { border-color: #fff; }
.cg-product__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.cg-product__chips li { padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--cg-groen-zacht); color: var(--cg-accent); font-size: 0.875rem; font-weight: 700; animation: cg-chip 0.35s ease both; }
.cg-product__chips li:nth-child(2) { animation-delay: 0.08s; }
.cg-product__chips li:nth-child(3) { animation-delay: 0.16s; }
.cg-product--donker .cg-product__chips li { background: hsla(0, 0%, 100%, 0.12); color: var(--cg-accent-fel); }
@keyframes cg-chip { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cg-product__chips li { animation: none; } }
.cg-product__gevonden { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--cg-ink-2); }
.cg-product__gevonden.is-fout { color: var(--cg-amber-text); }
.cg-product--donker .cg-product__gevonden { color: var(--cg-donker-tekst); }
.cg-product--donker .cg-product__gevonden.is-fout { color: #f3c98b; }
.cg-product__vraag + .cg-product__vraag { margin-top: 1.1rem; }
.cg-keuzerij { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cg-keuze { font: inherit; font-size: 0.9375rem; font-weight: 600; padding: 0.65rem 1.05rem; border-radius: 999px; border: 1px solid var(--cg-rand); background: var(--cg-wit); color: var(--cg-ink); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; }
.cg-keuze:hover { border-color: var(--cg-ink); }
.cg-keuze[aria-pressed="true"] { background: var(--cg-accent); border-color: var(--cg-accent); color: #fff; }
.cg-product--donker .cg-keuze { background: hsla(0, 0%, 100%, 0.06); border-color: hsla(0, 0%, 100%, 0.2); color: #fff; }
.cg-product--donker .cg-keuze:hover { border-color: #fff; }
.cg-product--donker .cg-keuze[aria-pressed="true"] { background: var(--cg-merkgroen); border-color: var(--cg-merkgroen); color: var(--cg-donker); }
.cg-product__uit { padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem); }
.cg-product__uit:focus { outline: none; }
.cg-product__uit .cg-kicker { margin-bottom: 0.9rem; }
.cg-product--donker .cg-kicker { background: hsla(0, 0%, 100%, 0.1); color: var(--cg-accent-fel); }
.cg-product__titel { display: block; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--cg-ink); }
.cg-product--donker .cg-product__titel { color: #fff; }
.cg-product--donker .hb-knoplink { color: var(--cg-accent-fel); }
.cg-product__uit .cg-aannames { margin-top: 1.5rem; }
.cg-product--donker .cg-aannames, .cg-product--donker .cg-aannames__label { color: var(--cg-donker-tekst); }
@media (max-width: 899px) {
	.cg-product__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
	.cg-product__adres { grid-template-columns: minmax(0, 1fr); }
	.cg-product__kop { flex-wrap: wrap; }
}

/* =============================================================
   Homepage in drie richtingen (plan finetune 2, 20 sep 2026)
   ============================================================= */
.is-layout-flow > .cg-hoofdstuk { margin-block: 0; }

/* De widgets in stappen: één vraag tegelijk. */
.cg-product [hidden] { display: none !important; }
.cg-product__voortgang { height: 3px; background: var(--cg-hairline); }
.cg-product__voortgang span { display: block; height: 100%; background: var(--cg-merkgroen); transition: width 0.3s ease; }
.cg-product--stappen .cg-product__in { display: block; }
.cg-product--stappen .cg-product__stappen { max-width: 40rem; margin-inline: auto; padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem); }
.cg-product__stap { min-height: 15rem; }
.cg-product__vraagkop { margin: 0 0 0.5rem; font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.cg-product__hint { margin: 0 0 1.25rem; font-size: 0.9375rem; line-height: 1.55; color: var(--cg-ink-2); }
.cg-keuzerij--kolom { display: grid; gap: 0.6rem; margin-bottom: 0.9rem; }
.cg-keuzerij--kolom + .cg-product__hint { margin-top: 0.25rem; margin-bottom: 0; }
.cg-keuze--groot { text-align: left; padding: 1rem 1.35rem; font-size: 1.0625rem; border-radius: var(--cg-r-kaart); }
.cg-keuze--groot::after { content: "\2192"; float: right; opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease; transform: translateX(-4px); }
.cg-keuze--groot:hover::after { opacity: 1; transform: none; }
.cg-keuze--groot[aria-pressed="true"]::after { content: "\2713"; opacity: 1; transform: none; }
.cg-product--stappen .cg-product__adres { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.cg-product--stappen .cg-product__adres .cg-product__chips, .cg-product--stappen .cg-product__adres .cg-product__gevonden { grid-column: 1 / -1; margin-top: 0.25rem; }
.cg-product--stappen .cg-product__adres .cg-product__chips { margin-top: 0.9rem; }
.cg-product__na { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin-top: 1.25rem; }
.cg-product__voet { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--cg-hairline); }
.cg-product__terug::before { content: "\2190"; margin-right: 0.4rem; }
.cg-product__terug::after { display: none; }
.cg-product--gesprek .cg-product__in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.cg-product--gesprek .cg-product__stappen { max-width: none; margin: 0; }
.cg-product--smal { max-width: 680px; margin-inline: auto; }
@media (max-width: 899px) {
	.cg-product--gesprek .cg-product__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
	.cg-product--stappen .cg-product__adres { grid-template-columns: minmax(0, 1fr); }
	.cg-product__na .cg-btn { width: 100%; }
}
/* Zonder "vorige vraag" (op de eerste vraag) geen lege voetregel. */
.cg-product__voet:has(> [data-cg-terug][hidden]) { display: none; }

/* Offertes aanvragen in stappen (24 sep 2026). */
.cg-product__spiegel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; margin: 0 0 0.5rem; }
.cg-product__spiegel div { padding: 0.75rem 0; border-top: 1px solid var(--cg-rand); }
.cg-product__spiegel dt { font-size: 0.8125rem; font-weight: 600; color: var(--cg-ink-3); }
.cg-product__spiegel dd { margin: 0.15rem 0 0; font-size: 1.0625rem; font-weight: 600; color: var(--cg-ink); }
.cg-product__gegevens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.cg-product__gegevens .hb-veld--breed { grid-column: 1 / -1; }
.cg-product__gegevens textarea { width: 100%; font: inherit; font-size: 1.0625rem; padding: 0.85rem 1.05rem; border-radius: var(--cg-r-kaart); border: 1px solid var(--cg-rand); resize: vertical; }
.cg-product__gegevens textarea:focus { outline: none; border-color: var(--cg-merkgroen); box-shadow: 0 0 0 3px var(--cg-groen-zacht); }
.cg-product--aanvraag .hb-melding:not([hidden]) { margin: 0.9rem 0 0; color: var(--cg-amber-text); font-weight: 600; }
.cg-product--aanvraag .cg-product__hint a { color: var(--cg-accent); font-weight: 600; }
.cg-product--waarom .cg-product__in { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
.cg-product--waarom .cg-product__stappen { max-width: none; margin: 0; }
.cg-product__waarom { padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem); background: linear-gradient(160deg, hsl(158, 45%, 14%) 0%, var(--cg-donker) 100%); color: var(--cg-donker-tekst); }
.cg-product__waarom .cg-kicker { background: hsla(0, 0%, 100%, 0.1); color: var(--cg-accent-fel); }
.cg-product__zegt { margin: 1.1rem 0 0; font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.5; color: #fff; }
.cg-product__daarna { margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; padding: 0; list-style: none; counter-reset: daarna; }
.cg-product__daarna li { position: relative; padding: 0.9rem 0 0.9rem 3rem; border-top: 1px solid var(--cg-hairline); color: var(--cg-ink-2); counter-increment: daarna; }
.cg-product__daarna li::before { content: counter(daarna); position: absolute; left: 0; top: 0.85rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--cg-accent); color: #fff; font-weight: 700; font-size: 0.875rem; }
.cg-product__daarna b { display: block; color: var(--cg-ink); }
@media (max-width: 899px) {
	.cg-product--waarom .cg-product__in { grid-template-columns: minmax(0, 1fr); }
	.cg-product__waarom { padding-block: 1.25rem; }
	.cg-product__zegt { margin-top: 0.75rem; font-size: 1.0625rem; }
}
@media (max-width: 599px) {
	.cg-product__spiegel, .cg-product__gegevens { grid-template-columns: minmax(0, 1fr); }
}

/* Offertes aanvragen, ronde 2 (24 sep 2026): drie richtingen. */
.cg-product__intro { padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem) 0; }
.cg-product__intro h1 { margin: 0.6rem 0 0; font-size: clamp(2rem, 3.4vw, 2.9rem); letter-spacing: -0.035em; }
.cg-product__intro p:not(.cg-kicker) { margin: 0.75rem 0 0; max-width: 34em; font-size: 1.0625rem; line-height: 1.55; color: var(--cg-ink-2); }
.cg-product--aanvraag .cg-product__hint a { color: var(--cg-accent); font-weight: 600; }
.cg-product--paneel .cg-product__kop { border-top: 1px solid var(--cg-hairline); }
.cg-product--paneel .cg-product__stappen { max-width: none; }
.oa-rail { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem clamp(1rem, 3vw, 2.5rem); margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0; list-style: none; font-size: 0.9375rem; font-weight: 600; color: var(--cg-ink-3); counter-reset: rail; }
.oa-rail li { display: inline-flex; align-items: center; gap: 0.6rem; counter-increment: rail; }
.oa-rail li span { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 2px solid var(--cg-rand); font-size: 0.8125rem; }
.oa-rail li span::before { content: counter(rail); }
.oa-rail li.is-nu { color: var(--cg-ink); }
.oa-rail li.is-nu span { border-color: var(--cg-accent); background: var(--cg-accent); color: #fff; }
.oa-rail li.is-af { color: var(--cg-accent); }
.oa-rail li.is-af span { border-color: var(--cg-accent); color: var(--cg-accent); }
.oa-rail li.is-af span::before { content: "\2713"; }
.cg-product--scene { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.cg-product--scene .cg-product__stappen { max-width: 64rem; padding-inline: 0; }
.cg-product--scene .cg-product__stap { text-align: center; }
.cg-product--scene .cg-product__vraagkop { font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: -0.035em; margin-bottom: 0.75rem; }
.cg-product--scene .cg-product__hint { max-width: 36em; margin-inline: auto; }
.cg-keuzerij--tegels { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: clamp(1.5rem, 3vw, 2.25rem) 0 1rem; }
.cg-keuze--tegel { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.9rem; min-height: 220px; padding: 1.25rem 1rem; text-align: center; background: var(--cg-wit); border: 1px solid var(--cg-rand); border-radius: var(--cg-r-kaart); font-size: 1.0625rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.15s ease; }
.cg-keuze--tegel::after { display: none; }
.cg-keuze--tegel img { width: 100%; max-width: 140px; height: 110px; object-fit: contain; filter: drop-shadow(0 14px 14px hsla(150, 20%, 10%, 0.16)); transition: transform 0.25s ease; }
.cg-keuze--tegel:hover { transform: translateY(-3px); box-shadow: var(--cg-schaduw); border-color: var(--cg-rand); }
.cg-keuze--tegel:hover img { transform: translateY(-3px); }
.cg-keuze--tegel[aria-pressed="true"] { background: var(--cg-wit); color: var(--cg-ink); border-color: var(--cg-accent); box-shadow: 0 0 0 3px var(--cg-groen-zacht); }
.cg-keuze--tegel span { font-weight: 700; }
.cg-product--scene .cg-product__stap[data-cg-stap="wanneer"] .cg-keuzerij--kolom { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 48rem; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; }
.cg-product--scene .cg-product__stap[data-cg-stap="wanneer"] .cg-keuze--groot { min-height: 6rem; text-align: center; display: grid; place-items: center; font-size: 1.125rem; }
.cg-product--scene .cg-product__stap[data-cg-stap="wanneer"] .cg-keuze--groot::after { display: none; }
.cg-product--scene .cg-product__adres, .cg-product--scene .cg-product__gegevens, .cg-product--scene .cg-product__spiegel { max-width: 40rem; margin-inline: auto; text-align: left; }
.cg-product--scene .cg-product__adres { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.cg-product--scene .cg-product__adres .cg-btn { grid-column: 1 / -1; }
.cg-product--scene .cg-product__na { justify-content: center; }
.cg-product--scene .cg-product__voet { max-width: 40rem; margin-inline: auto; text-align: center; border-top: 0; }
.cg-product--scene .cg-product__uit { max-width: 40rem; margin-inline: auto; padding-inline: 0; }
.cg-product--scene .cg-product__uit .cg-kicker { align-self: flex-start; }

/* Een pagina in preview: zonder de oude slotband, die uit het plan gaat. */
.cg-preview-variant:not(.cg-blokken) .cg-finale { display: none; }
.cg-preview-variant:not(.cg-blokken) .cg-footer { --cg-footer-band: 0rem; padding-top: 0; }

@media (max-width: 1023px) {
	.cg-keuzerij--tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
	.cg-product--scene .cg-product__stap[data-cg-stap="wanneer"] .cg-keuzerij--kolom { grid-template-columns: minmax(0, 1fr); }
	.cg-product--scene .cg-product__stap[data-cg-stap="wanneer"] .cg-keuze--groot { min-height: 0; }
	.oa-rail { justify-content: flex-start; gap: 0.5rem 1rem; font-size: 0.875rem; }
}
@media (max-width: 599px) {
	.cg-keuzerij--tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
	.cg-keuze--tegel { min-height: 0; padding: 1rem 0.75rem; }
	.cg-keuze--tegel img { height: 72px; }
	.cg-product__intro h1 { font-size: 1.9rem; }
}

/* =============================================================
   De widget (patterns/onderdelen/widget-check.php): de standaard voor alle
   widgets, gekozen op 2 oktober 2026. Eén ding tegelijk. De widget houdt
   zijn maat: een volgende stap schuift op dezelfde plek in beeld, hij wordt
   niet langer. Links een wijzer met de stappen, rechts de vraag; in een
   smalle plek vervalt de wijzer en staat er een dunne voortgangsbalk.

   Wat de widgets van EnergieMorgen en 1KOMMA5° prettig maakt, gemeten op
   hun sites, en hier overgenomen in onze kleuren:
   - lichte letters: lopende tekst op gewicht 400 en 18 tot 20 px met een
     regelhoogte van 1,5 tot 1,8; alleen de vraag is zwaarder (500);
   - hoge bedieningsvlakken (64 tot 72 px) met veel lucht eromheen;
   - één vraag en één handeling per scherm;
   - diepte uit lagen: een witte kaart met een zachte rand en een diepe,
     zachte schaduw, en velden die oplichten als je ze aanraakt.
   ============================================================= */

.hb-check.cs {
	--cs-inkt: #22302b;
	--cs-inkt-2: #56665f;
	--cs-inkt-3: #84948d;
	--cs-zacht: #f4f8f6;
	--cs-lijn: #dfe8e3;
	--cs-groen: #31bc87;
	--cs-groen-diep: #1f8f66;
	--cs-hoog: 400px;                 /* de vaste maat van het podium */
	display: block;
	margin-inline: auto;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 32px;
	background: #fff;
	/* Lagen: een dunne rand, een halfdoorzichtige ring en een diepe schaduw. */
	box-shadow: 0 0 0 1px hsla(160, 25%, 30%, 0.06), 0 0 0 9px hsla(0, 0%, 100%, 0.55), 0 3px 8px hsla(160, 30%, 14%, 0.04), 0 30px 60px -20px hsla(160, 30%, 14%, 0.16), 0 70px 110px -50px hsla(160, 35%, 16%, 0.38);
	color: var(--cs-inkt);
	font-weight: 400;
	text-align: left;
}
.cs [hidden] { display: none !important; }
.cs__hoofd { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.75rem, 3.6vw, 3rem) clamp(1.5rem, 4vw, 3.25rem) clamp(1.75rem, 3.6vw, 2.75rem); }
.cs__kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cs__naam { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; color: var(--cs-inkt-2); }
.cs__naam i { width: 8px; height: 8px; border-radius: 50%; background: var(--cs-groen); box-shadow: 0 0 0 4px hsla(157, 59%, 46%, 0.16); }
.cs__stand { font-size: 0.9375rem; font-weight: 400; color: var(--cs-inkt-3); white-space: nowrap; }
.cs__voortgang { height: 3px; margin-top: 1.1rem; border-radius: 3px; background: var(--cs-lijn); overflow: hidden; }
.cs__voortgang span { display: block; height: 100%; border-radius: 3px; background: var(--cs-groen); transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* Het podium: altijd even hoog, de stappen schuiven erin. */
.cs__podium { position: relative; display: flex; flex-direction: column; min-height: var(--cs-hoog); margin-top: clamp(1.75rem, 3.4vw, 2.75rem); overflow-x: clip; }
.cs__vragen { display: flex; flex-direction: column; flex: 1; margin: 0; }
.cs__stap, .cs__uit { animation: cs-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.cs.is-terug .cs__stap { animation-name: cs-terug; }
@keyframes cs-in { from { opacity: 0; transform: translateX(40px); } }
@keyframes cs-terug { from { opacity: 0; transform: translateX(-40px); } }
.cs__vraag { margin: 0; font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--cs-inkt); text-wrap: balance; }
.cs__zin { margin: 0.7rem 0 0; font-size: 1.125rem; font-weight: 400; line-height: 1.6; color: var(--cs-inkt-2); }
.cs__vraag + .cs__adres, .cs__vraag + .cs__keuzes, .cs__zin + .cs__adres, .cs__zin + .cs__gas { margin-top: clamp(1.4rem, 2.6vw, 2rem); }

/* ---------- stap 1: het adres ---------- */
.cs__zoek { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 0.75rem 0; }
.cs__zoekveld { position: relative; display: block; min-width: 0; padding: 0.85rem 1.25rem 0.8rem; border: 1.5px solid var(--cs-lijn); background: #fff; cursor: text; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.cs__zoekveld:first-child { border-radius: 18px 0 0 18px; }
.cs__zoekveld + .cs__zoekveld { margin-left: -1.5px; border-radius: 0 18px 18px 0; }
.cs__zoekveld:hover { border-color: #c5d6ce; z-index: 1; }
.cs__zoekveld:focus-within { z-index: 2; border-color: var(--cs-groen); box-shadow: 0 0 0 4px hsla(157, 59%, 46%, 0.14); }
.cs__zoekveld span { display: block; font-size: 0.8125rem; font-weight: 400; line-height: 1.4; color: var(--cs-inkt-3); }
/* Heel smalle telefoon (20 okt 2026): minder binnenruimte, zodat "Huisnummer" in zijn veld past. */
@container widget (max-width: 380px) {
	.cs__zoekveld { padding-inline: 0.8rem; }
}
.cs__zoekveld input { width: 100%; padding: 0; border: 0; background: transparent; font: inherit; font-size: 1.3125rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; color: var(--cs-inkt); }
.cs__zoekveld input::placeholder { color: #bccac4; font-weight: 400; opacity: 1; }
.cs__zoekveld input:focus { outline: none; }
.cs .cg-btn { font-size: 1.125rem; font-weight: 500; letter-spacing: 0.005em; }
.cs__zoekknop { grid-column: 1 / -1; min-height: 64px; }
.cs__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cs__chips li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem 0.7rem 0.95rem; border: 1.5px solid var(--cs-lijn); border-radius: 999px; background: #fff; font-size: 1.0625rem; font-weight: 500; animation: cs-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.cs__chips li:nth-child(2) { animation-delay: 0.08s; }
.cs__chips li:nth-child(3) { animation-delay: 0.16s; }
.cs__chips li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cs-groen); }
.cs__gevonden { margin: 1rem 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--cs-inkt-2); }
.cs__gevonden.is-fout { margin-top: 0.85rem; color: var(--cg-amber-text); }
.cs__na { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.75rem; margin-top: 1.75rem; }
.cs__na .cg-btn { min-height: 60px; padding-inline: 2rem; }
/* Zelf invullen komt in de plaats van het adres, niet eronder. */
.cs__stap--adres:has(details[open]) .cs__adres, .cs__stap--adres:has(details[open]) .cs__na, .cs__stap--adres:has(details[open]) .cs__zin { display: none; }
.cs__zelf { margin-top: 1.25rem; }
.cs__zelf summary, .cs__link, .cs__terug { display: inline-block; padding: 0; border: 0; background: none; font: inherit; font-size: 1rem; font-weight: 400; color: var(--cs-inkt-2); text-decoration: underline; text-decoration-color: hsla(158, 9%, 37%, 0.3); text-underline-offset: 5px; cursor: pointer; list-style: none; transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.cs__zelf summary::-webkit-details-marker { display: none; }
.cs__zelf summary:hover, .cs__link:hover, .cs__terug:hover { color: var(--cs-inkt); text-decoration-color: currentColor; }
.cs__zelf[open] { margin-top: clamp(1.4rem, 2.6vw, 2rem); }
.cs__zelf[open] summary { display: none; }
/* Geavanceerd in de warmtepompcheck (23 okt 2026): open blijft het kopje staan, zodat je het weer dichtklapt. */
.cs__geavanceerd { margin-top: 1.1rem; }
.cs__geavanceerd[open] { margin-top: 1.1rem; }
.cs__geavanceerd summary::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 0.5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 0.2s ease; }
.cs__geavanceerd[open] summary { display: inline-block; margin-bottom: 0.75rem; }
.cs__geavanceerd[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.cs__geavanceerd .cs__zelfvelden > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.cs__zelfvelden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.cs__zelfvelden .cg-btn { justify-self: start; align-self: center; min-height: 60px; padding-inline: 2rem; }

/* ---------- velden: het label in het veld ---------- */
.cs-veld { position: relative; display: block; min-width: 0; padding: 0.85rem 1.25rem 0.8rem; border: 1.5px solid var(--cs-lijn); border-radius: 18px; background: #fff; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.cs-veld:hover { border-color: #c5d6ce; }
.cs-veld:focus-within { border-color: var(--cs-groen); box-shadow: 0 0 0 4px hsla(157, 59%, 46%, 0.14); }
.cs-veld span { display: block; font-size: 0.8125rem; font-weight: 400; line-height: 1.4; color: var(--cs-inkt-3); }
.cs-veld select, .cs-veld input { width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; font: inherit; font-size: 1.1875rem; font-weight: 500; line-height: 1.4; color: var(--cs-inkt); -webkit-appearance: none; appearance: none; }
.cs-veld select { cursor: pointer; }
.cs-veld select:focus, .cs-veld input:focus { outline: none; }
.cs-veld input::placeholder { color: #bccac4; font-weight: 400; opacity: 1; }
.cs-veld input[type="number"]::-webkit-outer-spin-button, .cs-veld input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs-veld input[type="number"] { -moz-appearance: textfield; }
.cs-veld--groot { padding-block: 1rem 0.9rem; }
.cs-veld--groot input { font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -0.02em; line-height: 1.25; }

/* ---------- antwoorden: hoge, lichte rijen ---------- */
.cs__keuzes { display: grid; gap: 0.7rem; }
.cs .cs-keuze { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 68px; padding: 0.9rem 1.35rem; border: 1.5px solid var(--cs-lijn); border-radius: 18px; background: #fff; box-shadow: none; font: inherit; font-size: 1.1875rem; font-weight: 400; line-height: 1.3; color: var(--cs-inkt); text-align: left; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease, transform 0.25s ease; }
.cs .cs-keuze i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #b9cbc3; transition: box-shadow 0.2s ease, background-color 0.2s ease; }
.cs .cs-keuze::after { content: "\2192"; margin-left: auto; font-size: 1.25rem; color: var(--cs-groen-diep); opacity: 0; transform: translateX(-8px); transition: opacity 0.2s ease, transform 0.25s ease; }
.cs .cs-keuze:hover { background: #fff; border-color: var(--cs-groen); color: var(--cs-inkt); transform: translateY(-2px); box-shadow: 0 18px 30px -20px hsla(160, 40%, 20%, 0.45); }
.cs .cs-keuze:hover i { box-shadow: inset 0 0 0 1.5px var(--cs-groen); }
.cs .cs-keuze:hover::after { opacity: 1; transform: none; }
.cs .cs-keuze:focus-visible { outline: 2px solid var(--cs-groen); outline-offset: 3px; }
.cs .cs-keuze[aria-pressed="true"] { background: #fff; border-color: var(--cs-lijn); color: var(--cs-inkt); }
.cs .cs-keuze[aria-pressed="true"] i { background: var(--cs-groen); box-shadow: inset 0 0 0 5px #fff, 0 0 0 1.5px var(--cs-groen); }

/* ---------- gas ---------- */
.cs__gas { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.cs__gas .cs-veld { flex: 1 1 100%; }
.cs__gas .cg-btn { min-height: 60px; padding-inline: 2rem; }

/* ---------- vorige ---------- */
.cs__terug { align-self: flex-start; margin-top: auto; padding-top: 1.5rem; }
.cs__terug::before { content: "\2190\00a0\00a0"; }

/* ---------- de uitkomst, op dezelfde plek ---------- */
.cs__uit { display: flex; flex-direction: column; flex: 1; outline: none; }
.cs__label { margin: 0 0 0.7rem; font-size: 0.9375rem; font-weight: 500; color: var(--cs-groen-diep); }
.cs__titel { display: block; font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.cs__uitleg { margin: 0.7rem 0 0; font-size: 1.125rem; line-height: 1.6; color: var(--cs-inkt-2); }
.cs__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.75rem; margin-top: auto; padding-top: 1.5rem; }
.cs__acties .cg-btn { min-height: 60px; padding-inline: 2rem; }
.cs__aannames[open] { flex: 1 1 100%; }
.cs__aannames summary { display: inline-block; cursor: pointer; list-style: none; font-size: 0.9375rem; font-weight: 400; color: var(--cs-inkt-3); text-decoration: underline; text-decoration-color: hsla(158, 8%, 51%, 0.4); text-underline-offset: 5px; }
.cs__aannames summary::-webkit-details-marker { display: none; }
.cs__aannames-in { margin-top: 0.9rem; font-size: 1rem; line-height: 1.6; color: var(--cs-inkt-2); }
.cs__aannames-in .cg-aannames__kop { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 500; color: var(--cs-inkt); }
.cs__aannames-in .cg-aannames__lijst { margin: 0; }
.cs__aannames-in .cg-aannames__rij { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--cs-lijn); }
.cs__aannames-in dt { font-weight: 500; color: var(--cs-inkt); }
.cs__aannames-in dd { margin: 0; }
.cs__aannames-in .cg-aannames__voet { margin: 0.7rem 0 0; font-size: 0.875rem; }

/* Een vraag als fieldset met legend (de vragenlijsten): zelfde beeld. */
fieldset.cs__stap { min-width: 0; margin: 0; padding: 0; border: 0; }
legend.cs__vraag { display: block; float: left; width: 100%; padding: 0; margin-bottom: clamp(1.4rem, 2.6vw, 2rem); }
legend.cs__vraag + * { clear: both; margin-top: 0; }
legend.cs__vraag:has(+ .cs__zin) { margin-bottom: 0.7rem; }
legend.cs__vraag + .cs__zin { margin: 0 0 clamp(1.4rem, 2.6vw, 2rem); }
legend.cs__vraag + .cs__zin + .cs__gas { margin-top: 0; }
div.cs__vragen > .cs__terug { margin-top: auto; }

/* ---------- de wijzer links, de vraag rechts ---------- */
.hb-check.cs { max-width: 1020px; container-type: inline-size; container-name: widget; }
.cs__in { display: grid; grid-template-columns: minmax(0, 1fr); }
.cs__zij { position: relative; display: none; flex-direction: column; overflow: hidden; padding: clamp(1.75rem, 3.6vw, 3rem); background: linear-gradient(180deg, #eaf5ef 0%, #f4faf7 100%); }
.cs__wijzer { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cs__wijzer li { position: relative; display: flex; align-items: center; gap: 0.9rem; padding: 0.5rem 0; font-size: 1.125rem; font-weight: 400; color: var(--cs-inkt-3); transition: color 0.3s ease; }
.cs__wijzer i { position: relative; z-index: 1; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #c3d5cd; transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.cs__wijzer li + li::before { content: ""; position: absolute; left: 11px; top: -1.05rem; width: 1.5px; height: 1.6rem; background: #c3d5cd; transition: background-color 0.3s ease; }
.cs__wijzer li.is-nu { color: var(--cs-inkt); font-weight: 500; }
.cs__wijzer li.is-nu i { box-shadow: inset 0 0 0 7px var(--cs-groen); }
.cs__wijzer li.is-af { color: var(--cs-inkt-2); }
.cs__wijzer li.is-af i { background: var(--cs-groen) center / 12px 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>'); box-shadow: none; }
.cs__wijzer li.is-af::before, .cs__wijzer li.is-nu::before { background: var(--cs-groen); }
.cs__product { display: block; width: 82%; max-width: 270px; height: auto; margin: auto auto 0; padding-top: 2rem; filter: drop-shadow(0 28px 24px hsla(160, 30%, 12%, 0.24)); }
/* Zonder wijzer: de stand staat in de kop en er loopt een balk mee. */
.cs__stand { display: none; }
/* Is de plek breed genoeg, dan staat de wijzer links en vervalt de balk. */
@container widget (min-width: 780px) {
	.cs__in { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
	.cs__zij { display: flex; }
	.cs__voortgang { display: none; }
}
/* In een smalle plek is de kaart zelf ook smaller. */
@container widget (max-width: 779px) {
	.cs__hoofd { padding: clamp(1.5rem, 6cqw, 2.5rem) clamp(1.25rem, 6cqw, 2.5rem); }
	.cs__podium { min-height: calc(var(--cs-hoog) + 12px); }
	.cs__vraag, .cs__titel { font-size: clamp(1.625rem, 6.4cqw, 2.25rem); }
}
@container widget (max-width: 520px) {
	.cs__zelfvelden { grid-template-columns: minmax(0, 1fr); }
	.cs__na .cg-btn, .cs__gas .cg-btn, .cs__acties .cg-btn, .cs__zelfvelden .cg-btn { width: 100%; }
	.cs .cs-keuze { min-height: 62px; padding-inline: 1.1rem; font-size: 1.125rem; }
	.cs__keuzes { gap: 0.6rem; }
	.cs__zin, .cs__uitleg { font-size: 1.0625rem; }
}

@media (max-width: 899px) {
	.hb-check.cs { max-width: 640px; }
}
@media (max-width: 599px) {
	.hb-check.cs { --cs-hoog: 456px; border-radius: 26px; 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); }
}
@media (prefers-reduced-motion: reduce) {
	.cs__stap, .cs__uit, .cs__chips li { animation: none; }
	.cs__voortgang span, .cs .cs-keuze { transition: none; }
}

/* =============================================================
   De uitkomst van een tool, in de widget zelf (patterns/onderdelen/
   widget-uitkomst.php). Gekozen op 9 oktober 2026 uit drie vormen: de
   uitkomst komt op de plek van de vragen en de widget houdt zijn maat.
   Eén ding tegelijk: de som en het mailen zijn elk een eigen beeld dat
   op dezelfde plek in beeld schuift.
   ============================================================= */

.cs__uit.uk { animation: none; }
.uk__beeld { display: flex; flex-direction: column; flex: 1; animation: cs-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.cs__kop .uk__pasaan { font-size: 0.9375rem; color: var(--cs-inkt-3); white-space: nowrap; }

/* ---------- het eerste beeld: bedrag of zin, schakelaar, de stap erna ---------- */
.uk__label { margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.4; color: var(--cs-groen-diep); }
.uk[data-stand="niet"] .uk__label { color: var(--cg-amber-text); }
.uk__bedrag { display: block; margin-top: 0.15rem; font-size: clamp(3.25rem, 14cqw, 4.5rem); font-weight: 500; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--cs-inkt); }
.uk__titel { display: block; margin-top: 0.45rem; font-size: clamp(1.75rem, 6.6cqw, 2.5rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--cs-inkt); text-wrap: balance; }
.uk__zin { margin: 0.8rem 0 0; font-size: 1.125rem; line-height: 1.55; color: var(--cs-inkt-2); text-wrap: pretty; }
/* Vorige en Volgende staan vast onderin het vak, op één regel; de vraag houdt ruimte vrij. */
.cs--wp .cs__vragen { position: relative; }
.cs--wp .cs__stap { padding-bottom: 5rem; }
/* Een schuivende vraag (transform) zou de knop aan de vraag vastmaken in plaats van aan het vak: hier alleen vervagen. */
.cs--wp .cs__stap, .cs--wp.is-terug .cs__stap { animation-name: cs-wp-in; }
@keyframes cs-wp-in { from { opacity: 0; } to { opacity: 1; } }
.cs--wp .cs__verder { position: absolute; right: 0; bottom: 0; }
.cs--wp .cs__verder .cg-btn { min-height: 56px; padding-inline: 2rem; }
.cs--wp .cs__verder .cg-btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.cs--wp div.cs__vragen > .cs__terug { position: absolute; left: 0; bottom: 1.05rem; margin: 0; padding: 0; }
.cs--wp .cs-keuze { min-height: 58px; padding-block: 0.6rem; font-size: 1.0625rem; }
.cs--wp .cs__keuzes { gap: 0.55rem; }
.cs--wp .cs__vraag + .cs__keuzes, .cs--wp .cs__zin + .cs__keuzes, .cs--wp .cs__zin + .cs__getal, .cs--wp .cs__vraag + .cs__zin + .cs__getal { margin-top: 1.2rem; }
.cs--wp .cs__zin + .cs__keuzes { margin-top: 1rem; }
/* Meerdere antwoorden: een vierkant vinkje. */
.cs .cs-keuze--vink i { border-radius: 6px; }
.cs .cs-keuze--vink[aria-pressed="true"] { border-color: var(--cs-groen); background: #f1faf6; }
.cs .cs-keuze--vink[aria-pressed="true"] i { background: var(--cs-groen) center / 12px 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>'); box-shadow: none; }
.cs--wp .cs-keuze[aria-pressed="true"] { border-color: var(--cs-groen); background: #f1faf6; }
.cs--wp .cs-keuze::after { display: none; }
/* Het aantal personen: vijf knoppen op een rij. */
.cs__keuzes--rij { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* De prijsvraag (23 okt 2026): onze schatting of je eigen offerte, met de vervolgvraag welke soort. */
.cs__vervolgvraag { margin: 0 0 0.7rem; font-size: 1.0625rem; font-weight: 500; color: var(--cs-inkt); }
.cs__keuzes--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs .cs__keuzes--twee .cs-keuze { justify-content: center; min-height: 56px; padding-inline: 0.75rem; text-align: center; white-space: nowrap; }
.cs .cs__keuzes--twee .cs-keuze[aria-pressed="true"] { border-color: var(--cs-groen); }
.cs__prijswissel { margin-top: 1.1rem; }
.cs__offerte { margin-top: 1.2rem; }
.cs__offerte .cs__vervolgvraag { margin-top: 1.1rem; }
.cs__offerte .cs__keuzes { margin-top: 0; }
.cs__prijswissel button { padding-inline: 0.75rem; white-space: nowrap; }
@container widget (max-width: 460px) {
	.cs__prijswissel button { padding-inline: 0.5rem; font-size: 0.9375rem; line-height: 1.2; white-space: normal; }
}
/* Mailen staat onderaan de berekening. */
.uk__mailen { margin-top: 1rem; }
/* Laatste knop: op een smalle widget een kortere tekst, zodat hij niet over "Vorige" valt. */
.cs__verder .cs__kort { display: none; }
@container widget (max-width: 460px) {
	.cs__verder .cs__lang { display: none; }
	.cs__verder .cs__kort { display: inline; }
	.cs--wp .cs__verder .cg-btn { padding-inline: 1.25rem; }
}.cs .cs__keuzes--rij .cs-keuze { justify-content: center; min-height: 64px; padding-inline: 0.5rem; font-size: 1.375rem; font-weight: 500; }
/* Een getal met "Weet ik niet" ernaast. */
.cs__getal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.cs__getal { flex-wrap: nowrap; }
.cs__getal .cs-veld { flex: 1 1 auto; }
.cs-pil { flex: none; min-height: 48px; margin-top: 0.75rem; padding: 0 1.15rem; border: 1.5px solid var(--cs-lijn); border-radius: 999px; background: #fff; font: inherit; font-size: 1rem; color: var(--cs-inkt-2); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
.cs__getal .cs-pil { margin-top: 0; }
.cs-pil:hover { border-color: #b9d3c7; color: var(--cs-inkt); }
.cs-pil[aria-pressed="true"] { border-color: var(--cs-groen); background: #f1faf6; color: var(--cs-inkt); font-weight: 500; }
.cs-pil:focus-visible { outline: 2px solid var(--cs-groen); outline-offset: 3px; }
.cs--wp .cs__tarieven { margin-top: 1.1rem; }
.cs--wp .cs__tarieven + .cs-pil { align-self: flex-start; }
@container widget (max-width: 520px) {
	.cs--wp .cs__zelfvelden.cs__tarieven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cs .cs__keuzes--rij .cs-keuze { min-height: 56px; font-size: 1.25rem; }
	/* Twee kolommen alleen als elk antwoord ruim past (20 okt 2026); op een telefoon één kolom. */
	.cs--wp .cs__keuzes--veel { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }
	.cs--wp .cs__verder .cg-btn { width: auto; }
}

/* Drie korte cijfers onder het bedrag (17 okt 2026): vermogen, netto investering, terugverdientijd. Alleen een dunne lijn ertussen. */
.uk__regels { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin: 1rem 0 0; }
.uk__regels > div { display: grid; padding: 0 clamp(0.75rem, 3cqw, 1.25rem); border-left: 1px solid var(--cs-lijn); }
.uk__regels > div:first-child { padding-left: 0; border-left: 0; }
.uk__regels dd { margin: 0; font-size: clamp(1rem, 3.6cqw, 1.1875rem); font-weight: 600; line-height: 1.25; white-space: nowrap; color: var(--cs-inkt); font-variant-numeric: tabular-nums; }
.uk__regels dt { margin-top: 0.15rem; font-size: 0.8125rem; color: var(--cs-inkt-3); }
/* Vier cijfers (warmtepompcheck, 23 okt 2026): voor en na subsidie naast elkaar, vermogen en terugverdientijd eronder. */
.uk__regels--vier { grid-template-columns: repeat(2, auto); gap: 0.75rem 0; }
.uk__regels--vier > div:nth-child(odd) { padding-left: 0; border-left: 0; }
@container widget (max-width: 460px) {
	/* Smalle widget: de drie cijfers onder elkaar in twee kolommen. */
	.uk__regels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 0; }
	.uk__regels > div:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
	.uk__regels--vier > div:nth-child(3) { grid-column: auto; }
}
.uk__wissel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; max-width: 26rem; margin-top: 1.4rem; padding: 4px; border-radius: 999px; background: #edf3f0; }
.uk__wissel button { min-height: 48px; padding: 0 1rem; border: 0; border-radius: 999px; background: transparent; box-shadow: none; font: inherit; font-size: 1.0625rem; font-weight: 500; color: var(--cs-inkt-2); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.uk__wissel button:hover { color: var(--cs-inkt); }
.uk__wissel button.is-aan { background: #fff; color: var(--cs-inkt); box-shadow: 0 1px 2px hsla(160, 30%, 14%, 0.08), 0 8px 16px -10px hsla(160, 30%, 14%, 0.35); }
.uk__wissel button:focus-visible { outline: 2px solid var(--cs-groen); outline-offset: 2px; }
.uk__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin-top: 1.6rem; }
.uk__acties .cg-btn { min-height: 60px; padding-inline: 2rem; text-align: center; }
.uk__onder { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.75rem; margin-top: auto; padding-top: 1.4rem; }
.uk__onder .cs__link, .uk__meer .cs__link, .uk__meer .cs__aannames summary { font-size: 0.9375rem; color: var(--cs-inkt-3); }

/* ---------- het tweede beeld: de regels van de som ---------- */
.uk__kopje { display: block; margin: 0 0 0.6rem; font-size: clamp(1.5rem, 5.6cqw, 1.875rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.uk__lijst { margin: 0; }
.uk__lijst div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--cs-lijn); font-size: 1.0625rem; line-height: 1.4; color: var(--cs-inkt-2); }
.uk__lijst div:first-child { border-top: 0; }
.uk__lijst dt, .uk__lijst dd { margin: 0; }
.uk__lijst dt span { display: block; margin-top: 0.1rem; font-size: 0.875rem; color: var(--cs-inkt-3); }
.uk__lijst dd { font-weight: 500; color: var(--cs-inkt); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.uk__lijst .is-kern dt { font-weight: 500; color: var(--cs-inkt); }
.uk__lijst .is-kern dt span { font-weight: 400; }
.uk__lijst .is-kern dd { font-size: 1.25rem; letter-spacing: -0.02em; }
.uk__lijst .is-totaal { padding-top: 0.95rem; border-top: 1.5px solid var(--cs-inkt); font-weight: 500; color: var(--cs-inkt); }
.uk__lijst .is-totaal dd { font-size: 1.375rem; letter-spacing: -0.02em; }
.uk__meer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.75rem; margin-top: 1rem; }
.uk .cg-aannames__rij { border-bottom: 0; }
.uk .cg-aannames__rij dd { font-weight: 400; color: var(--cs-inkt-2); }

/* ---------- het derde beeld: mailen ---------- */
.uk__bewaar { display: grid; gap: 0.75rem; max-width: 30rem; margin-top: 0.6rem; }
.uk__bewaar .cg-btn { justify-self: start; min-height: 56px; padding-inline: 2rem; }
.uk__bewaar .hb-melding { margin: 0; }
.uk__vink { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 1rem; line-height: 1.5; color: var(--cs-inkt-2); cursor: pointer; }
.uk__vink input { flex: none; width: 20px; height: 20px; margin: 0.15rem 0 0; accent-color: var(--cs-groen); }
.uk__bewaard { margin: 0.6rem 0 0; font-size: 1.0625rem; line-height: 1.5; color: var(--cs-groen-diep); }

/* ---------- het adres: is het huis gevonden, dan vraagt de widget of het klopt ---------- */
.cs__vraag-klopt { display: none; }
.cs--aanvraag .cs__stap--adres:has([data-cg-chips]:not([hidden])) .cs__vraag-zoek { display: none; }
.cs--aanvraag .cs__stap--adres:has([data-cg-chips]:not([hidden])) .cs__vraag-klopt { display: inline; }

/* ---------- een getal vragen: verplicht invullen, of "Weet ik niet" en dan
   de vraag of het gemiddelde goed is (11 okt 2026, "knop ernaast", in
   patterns/onderdelen/widget-scan.php; komt daarna in elke widget) ---------- */
.cs-veld.is-fout { border-color: #d9822b; box-shadow: 0 0 0 4px hsla(30, 70%, 51%, 0.16); }
[data-cg-sw-dia] .cs__vraag:focus { outline: 0; }
/* Waar je bent: "Stroom · 2 van 4", rechts in de kop. */
.cs__stand { font-size: 0.9375rem; color: var(--cs-inkt-3); white-space: nowrap; }
/* Meer keuzes tegelijk: wat aan staat is groen omlijnd, en "Verder" eronder. */
.cs .cs__keuzes--veel .cs-keuze[aria-pressed="true"] { border-color: var(--cs-groen); }
@keyframes cs-leeg { 0%, 100% { border-color: var(--cs-lijn); } 40% { border-color: #d9822b; box-shadow: 0 0 0 4px hsla(30, 70%, 51%, 0.16); } }
@container widget (min-width: 521px) {
	/* Vier of meer keuzes staan in twee kolommen, zodat de widget zijn maat houdt; maar alleen als elk antwoord ruim past. */
	.cs__keuzes--veel { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }
	.cs__keuzes--veel .cs-keuze:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- de aanvraag als widget (patterns/onderdelen/widget-aanvraag.php) ---------- */
.cs__gegevens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin-top: clamp(1.2rem, 2.4vw, 1.75rem); }
.cs-veld--breed { grid-column: 1 / -1; }
.cs__stap--gegevens .cs__na { margin-top: 1.1rem; }
.cs__spiegel { display: grid; gap: 0; margin: clamp(1.2rem, 2.4vw, 1.75rem) 0 0; }
.cs__spiegel div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--cs-lijn); font-size: 1.0625rem; color: var(--cs-inkt-2); }
.cs__spiegel div:first-child { border-top: 0; }
.cs__spiegel dt, .cs__spiegel dd { margin: 0; }
.cs__spiegel dd { font-weight: 500; color: var(--cs-inkt); text-align: right; }
.cs__daarna { display: grid; gap: 0; margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: daarna; }
.cs__daarna li { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 0; border-top: 1px solid var(--cs-lijn); font-size: 1.0625rem; line-height: 1.4; counter-increment: daarna; }
.cs__daarna li:first-child { border-top: 0; }
.cs__daarna li::before { content: counter(daarna); flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cs-zacht); font-size: 0.9375rem; font-weight: 500; color: var(--cs-groen-diep); }
.cs__daarna b { font-weight: 400; }
/* De offertecheck: na het versturen staat het kenmerk groot in beeld. */
.cs__kenmerk { display: block; font-size: clamp(2.5rem, 12cqw, 4rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--cs-inkt); }
/* Verstuurd: alle stappen in de wijzer zijn af. */
.cs:has(.cs__verstuurd:not([hidden])) .cs__wijzer li { color: var(--cs-inkt-2); font-weight: 400; }
.cs:has(.cs__verstuurd:not([hidden])) .cs__wijzer li i { background: var(--cs-groen) center / 12px 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>'); box-shadow: none; }
.cs:has(.cs__verstuurd:not([hidden])) .cs__wijzer li::before { background: var(--cs-groen); }
/* Het adres: is het huis gevonden, dan maakt de zoekbalk plaats voor wat we
   vonden; is het niet gevonden, dan blijft de zoekbalk staan en is verder
   gaan een rustige link. Zo houdt de widget zijn maat. */
.cs--aanvraag .cs__stap--adres:has([data-cg-chips]:not([hidden])) .cs__zoek,
.cs--aanvraag .cs__stap--adres:has([data-cg-chips]:not([hidden])) .cs__zin,
.cs--aanvraag .cs__stap--adres:has(.cs__gevonden.is-fout:not([hidden])) .cs__zin,
.cs--aanvraag .cs__stap--adres:has(.cs__gevonden.is-fout:not([hidden])) [data-cg-ander-adres] { display: none; }
.cs--aanvraag .cs__stap--adres:has(.cs__gevonden.is-fout:not([hidden])) .cs__na { margin-top: 0.9rem; }
.cs--aanvraag .cs__stap--adres:has(.cs__gevonden.is-fout:not([hidden])) .cs__na .cg-btn { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 1rem; font-weight: 400; color: var(--cs-inkt-2); text-decoration: underline; text-decoration-color: hsla(158, 9%, 37%, 0.3); text-underline-offset: 5px; }
.cs--aanvraag .cs__stap--adres:has(.cs__gevonden.is-fout:not([hidden])) .cs__na .cg-btn::after { content: none; }
/* Vijf onderwerpen passen naast elkaar in twee kolommen als er ruimte is. */
@container widget (min-width: 521px) {
	.cs--aanvraag [data-cg-keuzerij="onderwerp"], .cs--offertecheck [data-cg-keuzerij="vraag"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cs--aanvraag [data-cg-keuzerij="onderwerp"] .cs-keuze:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* De melding bij je gegevens staat naast de knop, zodat de widget niet langer wordt. */
.cs__stap--gegevens .cs__na .hb-melding { flex: 1 1 11rem; margin: 0; }
@container widget (max-width: 520px) {
	.cs__gegevens { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; margin-top: 1rem; }
	.cs__stap--gegevens .cs-veld { padding-block: 0.6rem 0.55rem; }
	.cs__stap--gegevens .cs__na { margin-top: 0.8rem; }
	.cs--aanvraag [data-cg-keuzerij="onderwerp"] .cs-keuze { min-height: 56px; }
	.cs--aanvraag [data-cg-keuzerij="onderwerp"] { gap: 0.5rem; }
}
/* Een smalle plek op een groot scherm (de widget naast een foto): naam en
   telefoon blijven naast elkaar, anders past de melding er niet meer bij. */
@container widget (min-width: 400px) and (max-width: 520px) {
	.cs__gegevens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container widget (max-width: 520px) {
	/* Iets minder lucht, zodat ook de langste uitkomst in de vaste maat past. */
	.uk__wissel { margin-top: 1.1rem; }
	.uk__acties { justify-content: center; margin-top: 1.3rem; }
	.uk__onder { padding-top: 1rem; }
	/* Een lange knoptekst mag hier over twee regels lopen. */
	.uk .cg-btn { width: 100%; padding: 0.7rem 1.25rem; line-height: 1.25; white-space: normal; text-wrap: balance; }
}
@media (prefers-reduced-motion: reduce) {
	.uk__beeld { animation: none; }
	.uk__wissel button { transition: none; }
}

/* =============================================================
   De melding bij een huurwoning (20 okt 2026, assets/js/huurwoning.js):
   één venster voor alle woningtools, in de vorm van de pop-up met
   gemiddelden uit de scan. Op een telefoon een paneel van onder.
   ============================================================= */
.cg-huur { width: min(500px, calc(100vw - 2rem)); max-width: none; margin: auto; padding: 0; border: 0; border-radius: 28px; background: #fff; color: #22302b; box-shadow: 0 40px 90px -30px hsla(160, 30%, 10%, 0.5); }
.cg-huur[open] { animation: cg-huur-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.cg-huur::backdrop { background: hsla(165, 20%, 10%, 0.42); }
@keyframes cg-huur-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes cg-huur-op { from { transform: translateY(100%); } to { transform: none; } }
.cg-huur__in { position: relative; padding: clamp(1.5rem, 4vw, 2.25rem); }
.cg-huur__deel[hidden] { display: none; }
.cg-huur__dicht { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 6px 16px -8px hsla(160, 30%, 14%, 0.5); transition: background-color 0.2s ease; }
.cg-huur__dicht::before, .cg-huur__dicht::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 1.6px; background: #22302b; transform: translate(-50%, -50%) rotate(45deg); }
.cg-huur__dicht::after { transform: translate(-50%, -50%) rotate(-45deg); }
.cg-huur__dicht:hover { background: #f4f8f6; }
.cg-huur__dicht:focus-visible { outline: 2px solid #31bc87; outline-offset: 2px; }
.cg-huur__titel { margin: 0 2.75rem 0 0; font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.18; text-wrap: balance; }
.cg-huur__titel:focus { outline: 0; }
.cg-huur__zin { margin: 0.85rem 0 0; font-size: 1.0625rem; line-height: 1.5; color: #56665f; }
.cg-huur__acties { display: grid; gap: 0.5rem; margin-top: 1.5rem; }
.cg-huur__acties .cg-btn { width: 100%; min-height: 52px; justify-content: center; }
.cg-huur__tweede { min-height: 48px; padding: 0 1rem; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 1rem; color: #56665f; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.cg-huur__tweede:hover { background: #f4f8f6; color: #22302b; }
.cg-huur__tweede:focus-visible { outline: 2px solid #31bc87; outline-offset: 2px; }
@media (max-width: 699px) {
	.cg-huur { width: 100%; max-height: 92vh; margin: auto 0 0; border-radius: 24px 24px 0 0; overflow: auto; }
	.cg-huur[open] { animation: cg-huur-op 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
	.cg-huur__in { padding: 1.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
	.cg-huur[open] { animation: none; }
}

/* Terug naar het overzicht van de woningscan, boven een rekentool (assets/js/hub-tools.js, 24 okt 2026). */
.cg-scanterug { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0.9rem; font-size: 0.9375rem; font-weight: 500; color: var(--cs-groen-diep, #1f8f66); text-decoration: none; }
.cg-scanterug::before { content: "\2190"; transition: transform 0.25s ease; }
.cg-scanterug:hover::before { transform: translateX(-3px); }

/* =============================================================
   Sticky naar de rekentool (23 okt 2026; cg_hb_rekenhulp in
   inc/hub-secties.php, gedrag in assets/js/hub-ui.js). Desktop een kleine
   kaart rechtsonder, telefoon een smalle kaart onderaan; boven de
   routebalk als die er is. Dicht: een groen tabje aan de rechterkant.
   ============================================================= */
.cg-rekenhulp { --rh-onder: 24px; position: fixed; right: 24px; bottom: var(--rh-onder); z-index: 39; transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
body:has(.hp-routebalk) .cg-rekenhulp { --rh-onder: calc(68px + env(safe-area-inset-bottom) + 16px); }
.cg-rekenhulp.is-klaar:not(.is-zichtbaar) { visibility: hidden; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; }
.cg-rekenhulp__kaart { position: relative; display: grid; gap: 0.9rem; width: 372px; padding: 1.1rem 1.15rem 1.15rem 1.25rem; border: 1px solid var(--cg-hairline); border-radius: 20px; background: #fff; box-shadow: 0 1px 2px hsla(160, 30%, 14%, 0.06), 0 26px 50px -26px hsla(160, 35%, 14%, 0.38); }
.cg-rekenhulp__tekst { display: grid; gap: 0.2rem; margin: 0; padding-right: 2rem; }
.cg-rekenhulp__tekst b { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--cg-ink); }
.cg-rekenhulp__tekst small { font-size: 0.9375rem; line-height: 1.4; color: hsl(158, 8%, 40%); }
.cg-rekenhulp__knop { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 46px; padding: 0 1.05rem 0 1.25rem; border-radius: 999px; background: var(--cg-grad-knop); color: #fff; font-size: 1rem; font-weight: 600; text-decoration: none; box-shadow: 0 12px 26px -14px hsla(157, 59%, 36%, 0.7); transition: transform 0.2s ease, filter 0.2s ease; }
.cg-rekenhulp__knop:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.03); }
.cg-rekenhulp__knop svg, .cg-rekenhulp__tab svg { flex: none; transition: transform 0.2s ease; }
.cg-rekenhulp__knop:hover svg, .cg-rekenhulp__tab:hover svg { transform: translateX(3px); }
.cg-rekenhulp__sluit { position: absolute; top: 0.55rem; right: 0.55rem; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: hsl(158, 8%, 45%); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.cg-rekenhulp__sluit:hover { background: var(--cg-gebroken); color: var(--cg-ink); }
.cg-rekenhulp__tab { display: none; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0 0.85rem 0 0.4rem; border: 0; border-radius: 999px 0 0 999px; background: var(--cg-grad-knop); color: #fff; font: inherit; font-size: 0.9375rem; font-weight: 600; box-shadow: 0 12px 26px -14px hsla(157, 59%, 36%, 0.7); cursor: pointer; }
.cg-rekenhulp__tab i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: hsla(0, 0%, 100%, 0.22); font-style: normal; font-weight: 600; }
.cg-rekenhulp[data-stand="dicht"] { right: 0; }
.cg-rekenhulp[data-stand="dicht"] .cg-rekenhulp__kaart { display: none; }
.cg-rekenhulp[data-stand="dicht"] .cg-rekenhulp__tab { display: inline-flex; }
.cg-rekenhulp a:focus-visible, .cg-rekenhulp button:focus-visible { outline: 3px solid var(--cg-knop); outline-offset: 2px; }
@media (max-width: 639px) {
	/* Telefoon: één regel tekst met een rond pijltje, zo min mogelijk over de pagina. */
	.cg-rekenhulp { --rh-onder: 12px; right: 12px; left: 12px; }
	body:has(.hp-routebalk) .cg-rekenhulp { --rh-onder: calc(62px + env(safe-area-inset-bottom) + 10px); }
	.cg-rekenhulp__kaart { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; width: auto; padding: 0.6rem 0.6rem 0.6rem 1rem; border-radius: 18px; }
	.cg-rekenhulp__tekst { padding-right: 0; }
	.cg-rekenhulp__tekst b { font-size: 0.9375rem; }
	.cg-rekenhulp__tekst small { font-size: 0.8125rem; }
	.cg-rekenhulp__knop { justify-content: center; width: 46px; padding: 0; }
	.cg-rekenhulp__knop span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.cg-rekenhulp__sluit { top: -12px; right: -6px; width: 28px; height: 28px; background: #fff; box-shadow: 0 0 0 1px var(--cg-hairline), 0 4px 10px -4px hsla(160, 30%, 14%, 0.3); }
	.cg-rekenhulp__sluit::before { content: ""; position: absolute; inset: -8px; }
	.cg-rekenhulp[data-stand="dicht"] { left: auto; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.cg-rekenhulp, .cg-rekenhulp.is-klaar:not(.is-zichtbaar), .cg-rekenhulp__knop, .cg-rekenhulp__knop svg, .cg-rekenhulp__tab svg { transition: none; }
}
@media print { .cg-rekenhulp { display: none; } }