/*
 * CV Monteur — hoofdstylesheet.
 * Rustig, professioneel, conversiegericht. Eén overzichtelijk bestand, geen framework.
 * Huisstijlkleuren komen uit de logo-analyse / Instellingen → CV Monteur en worden
 * als CSS-variabelen ná dit bestand ingeladen (zie inc/class-huisstijl.php).
 */

/* =====================================================================
 * 1. Designtokens
 * ================================================================== */
:root {
	/* Merkkleuren — spaarzaam gebruiken. Overschreven door de huisstijl-injectie. */
	--cv-donkerblauw: #0b3158;   /* koppen, navigatie, footer, donkere CTA, primaire iconen */
	--cv-blauw: #1685c5;         /* links, secundaire iconen, storing-/technische accenten */
	--cv-oranje: #f36b21;        /* alleen de belangrijkste commerciële actie */
	--cv-oranje-donker: #d95c15;
	--cv-groen: #4aa64f;         /* vinkjes, beschikbaarheid, WhatsApp, positieve status */

	/* Toegankelijke, donkerdere WhatsApp-knopvariant (wit-op-#4aa64f haalt maar 3,1:1
	   contrast, ruim onder de WCAG AA-eis van 4,5:1). De oranje tegenhanger hiervan
	   (--cv-oranje-btn) is op uitdrukkelijk verzoek weer teruggedraaid naar de
	   originele --cv-oranje — de knoppen oogden daarmee "te bruin". Blijft
	   automatisch kloppen als een klant via de huisstijl-customizer een andere
	   --cv-groen instelt (color-mix() herberekent dan mee); de losse hex ervoor is de
	   fallback voor browsers zonder color-mix()-ondersteuning. */
	--cv-groen-btn: #377c3b;
	--cv-groen-btn: color-mix(in srgb, var(--cv-groen) 75%, black);
	--cv-groen-btn-hover: #306b33;
	--cv-groen-btn-hover: color-mix(in srgb, var(--cv-groen) 60%, black);

	/* Standaard inline-linkkleur (op wit) haalt met --cv-blauw zelf maar 4,04:1 — net
	   onder de WCAG AA-eis van 4,5:1. Aparte, iets donkerdere tekstvariant i.p.v.
	   --cv-blauw zelf aanpassen (dat wordt ook voor iconen/accenten/een knopkleur
	   gebruikt, waar deze striktere eis niet gold). */
	--cv-blauw-tekst: #1271a7;
	--cv-blauw-tekst: color-mix(in srgb, var(--cv-blauw) 85%, black);
	--cv-blauw-donker: #0f6ba0;  /* hover van --cv-blauw */
	--cv-accent-licht: #dcecf6;

	/* Tekst */
	--cv-tekst: #26313d;
	--cv-tekst-licht: #5b6b7b;

	/* Achtergronden — pagina-secties krijgen een zacht gebroken wit (#fafafa) i.p.v.
	   zuiver wit, zodat kaarten/blokken (die wél #fff blijven) zich subtiel aftekenen. */
	--cv-wit: #fafafa;
	--cv-grijs: #eef2f7;
	--cv-lichtblauw: #e7eff7;
	--cv-lichtgroen: #eef5ec;

	--cv-rand: #dbe3ec;
	--cv-rand-donker: #d3dce4;

	--cv-radius: 10px;
	--cv-radius-kaart: 14px;
	--cv-schaduw-kaart: 0 6px 22px rgba(11, 49, 88, .055);
	--cv-schaduw-hover: 0 12px 30px rgba(11, 49, 88, .09);

	--cv-max-breedte: 1200px;
	--cv-sectie: 88px;
	--cv-sectie-compact: 64px;

	--cv-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--cv-font-kop: var(--cv-font);
	--cv-focus: 3px solid var(--cv-blauw);

	/* WhatsApp-glyph (als mask-image, kleurt mee met background-color) */
	--cv-wa-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.21c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm0 18.15c-1.52 0-3.01-.41-4.31-1.18l-.31-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.36c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.7 8.24-8.24 8.24zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.16.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.42h-.47c-.16 0-.43.06-.66.31-.23.25-.87.85-.87 2.07s.89 2.4 1.02 2.56c.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29z'/%3E%3C/svg%3E");
	--cv-vink-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234aa64f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	--cv-vink-glyph-oranje: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f36b21' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	--cv-info-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231685c5'%3E%3Ccircle cx='8' cy='3.9' r='1.15'/%3E%3Crect x='6.95' y='6.4' width='2.1' height='6' rx='1'/%3E%3C/svg%3E");
	--cv-chat-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4 3h16a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2zm3 6h10v-2H7v2zm0 4h7v-2H7v2z'/%3E%3C/svg%3E");
	--cv-icon-bel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1L6.6 10.8z'/%3E%3C/svg%3E");
	--cv-icon-afspraak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a2 2 0 0 1 2 2v1H2V6a2 2 0 0 1 2-2h1V3a1 1 0 0 1 1-1zM2 10h20v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-9z'/%3E%3C/svg%3E");
	--cv-icon-storing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.1-2.1 2.7-2.6z'/%3E%3C/svg%3E");
	--cv-icon-vervangen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 7h10l-2.5-2.5L16 3l5 5-5 5-1.5-1.5L17 9H7v4H4V9a2 2 0 0 1 2-2h1zm10 10H7l2.5 2.5L8 21l-5-5 5-5 1.5 1.5L7 15h10v-4h3v4a2 2 0 0 1-2 2h-1z'/%3E%3C/svg%3E");
	--cv-icon-onderhoud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='6' y='4.5' width='12' height='16.5' rx='1.6'/%3E%3Cpath d='M9.2 4.5V3.9A1.4 1.4 0 0 1 10.6 2.5h2.8a1.4 1.4 0 0 1 1.4 1.4v.6z'/%3E%3Cpath d='M8.8 10.8l1.5 1.5 2.6-2.8M8.8 15.6l1.5 1.5 2.6-2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--cv-icon-huis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7M6 10v10h12V10'/%3E%3C/svg%3E");
	--cv-icon-mensen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Ccircle cx='17.5' cy='9' r='2.4'/%3E%3Cpath d='M15.7 14.2c2.6.4 4.3 2.6 4.3 5.3'/%3E%3C/svg%3E");
	--cv-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E");
	--cv-icon-diensten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M14.7 6.3a4 4 0 0 1-5.4 5.4L4 17v3h3l5.3-5.3a4 4 0 0 0 5.4-5.4l-2.3 2.3-2-2z'/%3E%3C/svg%3E");
	--cv-icon-locatie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
	--cv-icon-waarschuwing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3L22 20H2L12 3ZM11 9H13V15H11V9ZM11 17H13V19H11V17Z'/%3E%3C/svg%3E");
	--cv-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M11 4H13V11H20V13H13V20H11V13H4V11H11V4Z'/%3E%3C/svg%3E");
}

/* =====================================================================
 * 2. Basis
 * ================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	font-family: var(--cv-font);
	font-size: 17px;
	line-height: 1.62;
	color: var(--cv-tekst);
	background: var(--cv-wit);
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--cv-blauw-tekst); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
	font-family: var(--cv-font-kop);
	color: var(--cv-donkerblauw);
	line-height: 1.2;
	margin: 0 0 .5em;
	font-weight: 700;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.25rem, 4.4vw, 3.25rem); font-weight: 750; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.3rem, 1.6vw, 1.45rem); font-weight: 650; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 650; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 0; left: 0; z-index: 999;
	background: var(--cv-donkerblauw); color: #fff; padding: .75em 1em; clip: auto; width: auto; height: auto;
}

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
	outline: var(--cv-focus); outline-offset: 2px; border-radius: 3px;
}
.cv-site-footer a:focus-visible,
.cv-cta-bar--donker a:focus-visible { outline-color: #fff; }

/* =====================================================================
 * 3. Layout
 * ================================================================== */
.cv-container {
	max-width: var(--cv-max-breedte);
	margin: 0 auto;
	padding: 0 24px;
}
.cv-main { overflow-x: clip; }

.cv-section { padding: var(--cv-sectie) 0; }
.cv-section--compact { padding: var(--cv-sectie-compact) 0; }
.cv-section--grijs { background: var(--cv-grijs); }
.cv-section--blauw { background: var(--cv-lichtblauw); }
.cv-section--groen { background: var(--cv-lichtgroen); }

/* Achtergrondritme: witte en getinte secties wisselen elkaar af zodat de pagina
 * niet één witte vlakte is. */
.cv-diensten { background: var(--cv-grijs); }
.cv-home-over-ons { background: var(--cv-wit); }
.cv-merkenstrip { background: var(--cv-wit); }
.cv-projectstrip { background: var(--cv-lichtgroen); }
.cv-reviews { background: var(--cv-wit); }
.cv-section--donkerblauw { background: var(--cv-donkerblauw); color: #fff; }
.cv-section--donkerblauw h2, .cv-section--donkerblauw h3 { color: #fff; }

/* Sectiekop: H2 + korte intro met vaste ritmes */
.cv-section > .cv-container > h2 { margin-bottom: .35rem; }
.cv-section > .cv-container > h2 + p { color: var(--cv-tekst-licht); max-width: 46rem; margin-bottom: 2.5rem; }

@media (max-width: 768px) {
	:root { --cv-sectie: 54px; --cv-sectie-compact: 40px; }
	.cv-container { padding: 0 22px; }
	body { font-size: 16px; }
}

/* =====================================================================
 * 4. Knoppen
 * ================================================================== */
.cv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .82em 1.5em;
	border-radius: var(--cv-radius);
	border: 1.5px solid transparent;
	font: inherit;
	font-weight: 600;
	line-height: 1.15;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.cv-btn:hover { text-decoration: none; }
.cv-btn--lg { padding: 1em 1.8em; font-size: 1.05rem; }

.cv-btn--primary, .cv-btn--bel { background: var(--cv-oranje); border-color: var(--cv-oranje); color: #fff; }
.cv-btn--primary:hover, .cv-btn--bel:hover { background: var(--cv-oranje-donker); border-color: var(--cv-oranje-donker); color: #fff; }

.cv-btn--secondary {
	background: #fff;
	border-color: var(--cv-rand-donker);
	color: var(--cv-donkerblauw);
}
.cv-btn--secondary:hover { background: var(--cv-grijs); color: var(--cv-donkerblauw); }

.cv-btn--wit, .cv-btn--whatsapp-outline { background: #fff; border-color: var(--cv-rand-donker); color: var(--cv-donkerblauw); }
.cv-btn--wit:hover, .cv-btn--whatsapp-outline:hover { background: var(--cv-grijs); color: var(--cv-donkerblauw); }

.cv-btn--whatsapp { background: var(--cv-groen-btn); border-color: var(--cv-groen-btn); color: #fff; }
.cv-btn--whatsapp:hover { background: var(--cv-groen-btn-hover); border-color: var(--cv-groen-btn-hover); color: #fff; }

.cv-btn--donker { background: var(--cv-donkerblauw); border-color: var(--cv-donkerblauw); color: #fff; }
.cv-btn--donker:hover { background: #0a253f; color: #fff; }

.cv-tel-link__icoon { flex: none; }
.cv-wa-icoon {
	flex: none; width: 1.2em; height: 1.2em;
	background-color: var(--cv-groen);
	-webkit-mask: var(--cv-wa-glyph) center / contain no-repeat;
	mask: var(--cv-wa-glyph) center / contain no-repeat;
}
.cv-btn--whatsapp .cv-wa-icoon { background-color: #fff; }
.cv-tel-icoon {
	flex: none; width: 1.1em; height: 1.1em;
	background-color: var(--cv-oranje);
	-webkit-mask: var(--cv-icon-bel) center / contain no-repeat;
	mask: var(--cv-icon-bel) center / contain no-repeat;
}
.cv-btn--primary .cv-tel-icoon { background-color: #fff; }
.cv-mail-icoon {
	flex: none; width: 1.15em; height: 1.15em; background-color: currentColor;
	-webkit-mask: var(--cv-icon-mail) center / contain no-repeat;
	mask: var(--cv-icon-mail) center / contain no-repeat;
}

/* Mail-cta-knoppen (bijv. "Meld uw cv-storing") met een klein regeltje eronder
   in de knop zelf, zoals "Binnen één werkdag reactie" — geeft net dat beetje
   extra vertrouwen om het formulier te gebruiken i.p.v. te bellen. */
.cv-btn--met-sub { align-items: center; text-align: left; padding-top: .65em; padding-bottom: .65em; }
.cv-btn--met-sub .cv-mail-icoon { width: 1.3em; height: 1.3em; }
.cv-btn__tekst { display: flex; flex-direction: column; gap: .05rem; line-height: 1.25; }
.cv-btn__sub { font-size: .78em; font-weight: 500; opacity: .8; }

/* =====================================================================
 * 5. Kaart-basis
 * ================================================================== */
.cv-kaart-basis,
.cv-dienst-kaart,
.cv-kaart,
.cv-prijskaart,
.cv-formkaart,
.cv-foutcode-card {
	background: #fff;
	border: 1px solid var(--cv-rand);
	border-radius: var(--cv-radius-kaart);
	box-shadow: var(--cv-schaduw-kaart);
}
a.cv-dienst-kaart:hover,
a.cv-foutcode-card:hover,
.cv-foutcode-card:hover {
	border-color: var(--cv-rand-donker);
	box-shadow: var(--cv-schaduw-hover);
	transform: translateY(-2px);
	text-decoration: none;
}
.cv-dienst-kaart, .cv-foutcode-card { transition: border-color .15s, box-shadow .15s, transform .15s; }

/* =====================================================================
 * 6. Header
 * ================================================================== */
.cv-site-header {
	background: #fff;
	border-bottom: 1px solid var(--cv-rand);
	position: sticky; top: 0; z-index: 60;
}
.cv-site-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 80px;
	padding: .6rem 24px;
}
.cv-site-header__logo { flex: none; display: flex; align-items: center; font-weight: 800; font-size: 1.15rem; color: var(--cv-donkerblauw); }
.cv-site-header__logo--image img, .cv-site-header__logo img { max-height: 52px; width: auto; }

.cv-site-header__nav { margin: 0 auto; }
.cv-menu { list-style: none; display: flex; align-items: center; gap: 1.2rem; margin: 0; padding: 0; }
.cv-menu > li { position: relative; }
.cv-menu a { color: var(--cv-donkerblauw); font-weight: 500; font-size: .98rem; padding: .35rem 0; display: inline-block; }
.cv-menu a:hover { color: var(--cv-blauw); text-decoration: none; }
.cv-menu .menu-item-has-children > a::after {
	content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .45em;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg);
}
/* "Meer diensten" is en blijft één menu-item/label (geen dubbele link in de HTML) —
   op desktop tonen we alleen "Meer" door het " diensten"-staartje te verbergen; op
   mobiel (zelfde omslagpunt als het hamburgermenu hierboven) blijft de volledige
   tekst gewoon staan. Zie de "Meer diensten"-menu-item-filter in functions.php. */
@media (min-width: 1041px) {
	.cv-menu-meer-suffix { display: none; }
}
/* De letterlijke spatie vóór "diensten" (in de HTML-string in functions.php)
   wordt op mobiel onbetrouwbaar: zodra de menu-<a> display:flex krijgt, wordt
   deze <span> zijn eigen flex-item en collabeert de browser de spatie die nu
   aan het BEGIN van dat item staat (zelfde soort gedrag als bij een gewoon
   blok-element) — "Meer" en "diensten" plakten daardoor aan elkaar. Een
   marge i.p.v. het letterlijke teken is hier betrouwbaar, ongeacht flex. */
.cv-menu-meer-suffix { margin-left: .3em; }

.cv-menu .sub-menu {
	list-style: none; margin: 0; padding: .4rem 0;
	position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
	min-width: 220px; background: #fff; border: 1px solid var(--cv-rand);
	border-radius: var(--cv-radius); box-shadow: var(--cv-schaduw-hover);
	opacity: 0; visibility: hidden; transition: opacity .14s, transform .14s, visibility .14s;
}
.cv-menu .menu-item-has-children:hover > .sub-menu,
.cv-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.cv-menu .sub-menu a { display: block; padding: .55rem 1.1rem; font-weight: 400; }
.cv-menu .sub-menu a:hover { background: var(--cv-grijs); }
.cv-submenu-toggle { display: none; }

.cv-site-header__cta { flex: none; display: flex; align-items: center; gap: .2rem; margin-left: auto; }
.cv-site-header__bel .cv-btn--bel { padding: .62em 1.25em; font-size: 1rem; }
/* "Nu bereikbaar" is hier het groene bolletje vóór het belicoontje (zie
   status="ja" bij [cv_tel_link] in header.php) i.p.v. een los tekstregeltje. */
.cv-site-header__bereik { font-size: .8rem; color: var(--cv-tekst-licht); display: inline-flex; align-items: center; gap: .4rem; }
.cv-status-dot {
	width: .5rem; height: .5rem; border-radius: 50%; background: var(--cv-groen); flex: none; position: relative;
}
.cv-status-dot::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--cv-groen);
	animation: cv-status-pulse 2s ease-out infinite;
}
@keyframes cv-status-pulse {
	0% { transform: scale(1); opacity: .6; }
	100% { transform: scale(3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cv-status-dot::after { animation: none; } }
.cv-site-header__plaats { display: none; }
.cv-site-header__cta > .cv-btn--whatsapp { display: none; }

/* Hamburger — drie nette, gecentreerde streepjes die bij openen naar een kruisje draaien. */
.cv-menu-toggle {
	display: none; flex: none; width: 44px; height: 44px;
	border: 1px solid var(--cv-rand); border-radius: var(--cv-radius);
	background: #fff; cursor: pointer; position: relative;
}
.cv-menu-toggle__lijn {
	position: absolute; left: 50%; top: 50%; width: 20px; height: 2px;
	background: var(--cv-donkerblauw); transform: translate(-50%, -50%);
	transition: background .15s;
}
.cv-menu-toggle__lijn::before, .cv-menu-toggle__lijn::after {
	content: ""; position: absolute; left: 0; width: 20px; height: 2px;
	background: var(--cv-donkerblauw); transition: top .18s ease, transform .18s ease;
}
.cv-menu-toggle__lijn::before { top: -6px; }
.cv-menu-toggle__lijn::after { top: 6px; }
body.cv-nav-open .cv-menu-toggle__lijn { background: transparent; }
body.cv-nav-open .cv-menu-toggle__lijn::before { top: 0; transform: rotate(45deg); }
body.cv-nav-open .cv-menu-toggle__lijn::after { top: 0; transform: rotate(-45deg); }

/* Reviewbadge-strook: alleen op mobiel, vast onder de header (scrollt niet mee weg
   omdat de hele header sticky is). Op desktop staat de badge al in de hero. */
.cv-site-header__reviews-strook { display: none; }

/* Op smalle telefoons (≤ 380px) past de badge op één regel niet meer op ware grootte:
   hij schaalt dan stapsgewijs mee (het logo en de sterren hebben vaste pixelmaten
   uit de widget zelf, dus alleen schalen kan). De stappen zijn bewust aan de ruime
   kant, zodat ook een iets bredere widget (meer recensies = langer getal) past. */
@media (max-width: 380px) { .cv-site-header__reviews-strook .cv-trustindex { zoom: .96; } }
@media (max-width: 360px) { .cv-site-header__reviews-strook .cv-trustindex { zoom: .9; } }
@media (max-width: 340px) { .cv-site-header__reviews-strook .cv-trustindex { zoom: .84; } }
@media (max-width: 320px) { .cv-site-header__reviews-strook .cv-trustindex { zoom: .78; } }
@media (max-width: 300px) { .cv-site-header__reviews-strook .cv-trustindex { zoom: .72; } }

/* "Bel nu"-blok onderin de mobiele menu-overlay: alleen zichtbaar op mobiel. */
.cv-site-header__nav-onderaan { display: none; }

@media (max-width: 1040px) {
	/* Header blijft boven de menu-overlay hangen (mobiel alleen), zodat sluiten
	   altijd bereikbaar blijft terwijl het menu open staat. */
	.cv-site-header { position: sticky; top: 0; z-index: 96; }
	.cv-site-header__inner { min-height: 64px; }
	.cv-menu-toggle { display: block; margin-left: auto; }

	/* Op mobiel alleen logo + hamburger in de balk — bellen en reviews staan elders. */
	.cv-site-header__cta { display: none; }

	.cv-site-header__reviews-strook {
		display: flex; justify-content: center; padding: .55rem 12px;
		border-top: 1px solid var(--cv-rand); background-color: var(--cv-lichtblauw);
	}
	.cv-site-header__reviews-strook .cv-trustindex { display: inline-flex; }
	/* Hele strook klikbaar (link naar de reviewsectie, zie header.php). */
	.cv-site-header__reviews-strook { position: relative; }
	.cv-site-header__reviews-link { position: absolute; inset: 0; z-index: 2; }
	.cv-site-header__reviews-link:focus-visible { outline: 2px solid var(--cv-blauw); outline-offset: -3px; }
	/* Sticky header (64px) dekt anders de kop van de sectie af na een anker-klik. */
	.cv-reviews, .cv-contact-preview { scroll-margin-top: 4.5rem; }
	/* Verbergen zolang het menu open staat, zodat de overlay er niet gedeeltelijk onder zit. */
	body.cv-nav-open .cv-site-header__reviews-strook { display: none; }

	/* Trustindex zet de sterren/logo en het cijfer standaard als twee grid-rijen onder
	   elkaar (bedoeld voor een bredere badge) — in deze smalle strook oogt dat rommelig.
	   Op één regel zetten, met de flinke standaardpadding teruggebracht. */
	.cv-site-header__reviews-strook .ti-header-grid {
		display: flex !important; align-items: center !important; justify-content: center !important;
		gap: .5rem !important; padding: 4px 6px !important;
	}
	/* Altijd één regel: Trustindex laat logo, sterren en "4.8 | 100 recensies" standaard
	   op een nieuwe regel doorlopen zodra het niet meer past. */
	.cv-site-header__reviews-strook .ti-header-grid,
	.cv-site-header__reviews-strook .ti-fade-container { flex-wrap: nowrap !important; }
	.cv-site-header__reviews-strook .ti-widget,
	.cv-site-header__reviews-strook .ti-widget * { white-space: nowrap !important; }

	/* Trustindex-widget (Google reviews) gebruikt standaard een donkere kaartstijl —
	   past niet bij de lichtblauwe strook. Neutraliseert de donkere variant zodat
	   hij netjes meekleurt met de rest van de header. */
	.cv-site-header__reviews-strook .ti-widget[data-layout-id='30'][data-set-id='dark-background'] .ti-header {
		background-color: transparent !important;
		background-image: none !important;
		border-color: var(--cv-rand) !important;
		border-style: solid !important;
		border-radius: 12px !important;
		color: var(--cv-donkerblauw) !important;
		padding-bottom: 0 !important;
		padding-top: 5px !important;
		transition: transform .3s ease-in-out !important;
		text-align: center !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
	}

	/* Volledig scherm overlay i.p.v. een smal dropdownstrookje. Begint direct onder
	   de header-balk (die dankzij position:sticky + hoger z-index zichtbaar blijft
	   erboven) — top gekoppeld aan de header-hoogte, geen geraden padding, dus geen
	   losse witruimte. */
	.cv-site-header__nav {
		margin: 0; display: none;
		position: fixed; left: 0; right: 0; top: 64px; bottom: 0;
		background: #fff; z-index: 95; overflow-y: auto; overflow-x: hidden;
		padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px));
	}
	.cv-site-header__nav.is-open { display: block; }
	body.cv-nav-open { overflow: hidden; }

	/* Let op: scoped op .cv-site-header__nav .cv-menu, want de footer gebruikt
	   ook de class "cv-menu" (cv-menu--footer) en mag deze stijlen niet erven. */
	.cv-site-header__nav .cv-menu {
		flex-direction: column; align-items: stretch; gap: 0; width: 100%; box-sizing: border-box;
		background: #fff; border: 1px solid var(--cv-rand); border-radius: var(--cv-radius-kaart);
		overflow: hidden;
	}
	/* Bewust GEEN flex-layout voor de <li> (die gaf op sommige toestellen een
	   submenu dat maar half zo breed als het menu werd) — de <li> is een simpel
	   blok, de sluitknop hangt er los overheen via position:absolute, en het
	   submenu is daardoor gewoon een blok-element dat automatisch de volle
	   breedte krijgt, zonder flex-rekenwerk. */
	.cv-site-header__nav .cv-menu > li { position: relative; border-bottom: 1px solid var(--cv-rand); }
	.cv-site-header__nav .cv-menu > li:last-child { border-bottom: 0; }
	.cv-site-header__nav .cv-menu > li > a {
		display: flex; align-items: center; font-weight: 600;
		padding: 1rem .9rem; box-sizing: border-box;
	}
	.cv-site-header__nav .cv-menu .menu-item-has-children > a { padding-right: 3.4rem; }
	/* Marge op het icoon zelf i.p.v. "gap" op de flex-container: "Meer diensten"
	   bestaat uit 2 losse tekstnodes ("Meer" + een <span> met " diensten"), en
	   "gap" op de <a> zou dan ONGEWENST óók een extra rand-tot-rand ruimte tussen
	   die twee tekststukken invoegen (elke flex-child, ook tekstnodes, krijgt een
	   gap) — leek daardoor op dubbele spaties tussen "Meer" en "diensten". */
	.cv-site-header__nav .cv-menu > li > a::before {
		content: ""; width: 21px; height: 21px; flex: none; background: var(--cv-donkerblauw); opacity: .8;
		margin-right: .85rem;
		-webkit-mask: var(--cv-menu-icoon, var(--cv-icon-huis)) center/contain no-repeat;
		mask: var(--cv-menu-icoon, var(--cv-icon-huis)) center/contain no-repeat;
	}
	.cv-site-header__nav .cv-menu > li > a.cv-menu-icoon--storing { --cv-menu-icoon: var(--cv-icon-storing); }
	.cv-site-header__nav .cv-menu > li > a.cv-menu-icoon--waarschuwing { --cv-menu-icoon: var(--cv-icon-waarschuwing); }
	.cv-site-header__nav .cv-menu > li > a.cv-menu-icoon--onderhoud { --cv-menu-icoon: var(--cv-icon-onderhoud); }
	.cv-site-header__nav .cv-menu > li > a.cv-menu-icoon--vervangen { --cv-menu-icoon: var(--cv-icon-vervangen); }
	.cv-site-header__nav .cv-menu > li > a.cv-menu-icoon--diensten { --cv-menu-icoon: var(--cv-icon-diensten); }
	.cv-site-header__nav .cv-menu > li > a.cv-menu-icoon--overons { --cv-menu-icoon: var(--cv-icon-mensen); }
	.cv-site-header__nav .cv-menu > li > a.cv-menu-icoon--contact { --cv-menu-icoon: var(--cv-icon-mail); }
	.cv-site-header__nav .cv-menu > li > a::after {
		content: ""; width: .5em; height: .5em; margin-left: auto; flex: none;
		border-right: 2px solid var(--cv-rand-donker); border-bottom: 2px solid var(--cv-rand-donker);
		transform: rotate(-45deg);
	}
	.cv-site-header__nav .cv-menu .menu-item-has-children > a::after { display: none; }
	/* Gewoon een blok-element (geen flex-item) — krijgt daardoor altijd automatisch
	   de volle breedte van de <li>, ongeacht de sluitknop ernaast.
	   !important op transform: de desktop-dropdownregel hieronder (":hover"/
	   ":focus-within" > .sub-menu, specificiteit 0,0,4,0) wint anders van deze
	   mobiele regel (0,0,3,0) zodra iemand de uitklapknop tikt — een <button>
	   die focus krijgt triggert :focus-within op de <li>, en "transform" werkt
	   nog gewoon door bij position:static. Gevolg: het submenu schoof 50% van
	   zijn eigen breedte naar links (de knop die dit destijds voor de desktop-
	   hover-dropdown deed) en leek daardoor half afgesneden. */
	.cv-site-header__nav .cv-menu .sub-menu {
		position: static; transform: none !important; opacity: 1; visibility: visible; box-shadow: none;
		border: 0; border-radius: 0; width: 100%; box-sizing: border-box;
		display: none; padding: .2rem 1rem .6rem 2.6rem; background: var(--cv-grijs);
	}
	.cv-site-header__nav .cv-menu .sub-menu a {
		display: flex; align-items: center; justify-content: space-between; gap: .5rem; white-space: normal;
	}
	/* Pijltje per subdienst, zelfde vorm als de hoofdmenu-chevron, zodat ook hier
	   duidelijk is dat het aparte, klikbare navigatielinks zijn. */
	.cv-site-header__nav .cv-menu .sub-menu a::after {
		content: ""; width: .45em; height: .45em; flex: none;
		border-right: 2px solid var(--cv-rand-donker); border-bottom: 2px solid var(--cv-rand-donker);
		transform: rotate(-45deg);
	}
	.cv-site-header__nav .cv-menu .menu-item-has-children.is-open > .sub-menu { display: block; }
	/* Los overheen (position:absolute t.o.v. de <li>) i.p.v. als flex-sibling naast
	   de link — zo heeft die geen enkele invloed meer op de breedte van de link of
	   het submenu eronder. */
	/* Vaste hoogte i.p.v. top:0+bottom:0 (dat liet de knop meestrekken tot de
	   ONDERKANT van de <li> — en die wordt, zodra het submenu openklapt, veel
	   verder naar beneden geduwd. Gevolg: de knop (en dus het icoontje, dat via
	   top:50% t.o.v. déze knop centreert) werd zo hoog als rij+submenu samen,
	   waardoor het icoontje leek te "springen" naar het midden van dat hele
	   uitgeklapte blok i.p.v. gewoon op de rij te blijven staan. */
	.cv-site-header__nav .cv-submenu-toggle {
		display: block; position: absolute; top: 0; right: 0; width: 48px; height: 3.5rem;
		border: 0; background: transparent; cursor: pointer;
	}
	.cv-site-header__nav .cv-submenu-toggle::before {
		content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
		margin: -6px 0 0 -6px;
		border-right: 2px solid var(--cv-donkerblauw); border-bottom: 2px solid var(--cv-donkerblauw); transform: rotate(45deg);
	}
	/* Bewust GEEN margin-aanpassing hier (was: margin-top: -3px) — dat verschoof het
	   icoontje een paar pixels t.o.v. de dichtgeklapte stand, waardoor het leek te
	   "springen" i.p.v. gewoon op dezelfde plek van uitklap- naar inklap-vorm te
	   draaien. De rotatie alleen is genoeg; de basis-centrering (top:50%/left:50%
	   + margin:-6px 0 0 -6px hierboven) blijft in beide standen identiek. */
	.cv-site-header__nav .cv-menu .is-open > .cv-submenu-toggle::before { transform: rotate(-135deg); }

	.cv-site-header__nav-onderaan {
		display: flex; flex-direction: column; align-items: center; gap: .6rem;
		margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cv-rand); text-align: center;
	}
	.cv-site-header__nav-onderaan .cv-btn { width: 100%; }
	.cv-site-header__nav-onderaan .cv-site-header__bereik { font-size: .85rem; color: var(--cv-tekst-licht); display: inline-flex; align-items: center; gap: .4rem; }
}

/* =====================================================================
 * 7. Breadcrumb
 * ================================================================== */
.cv-kruimels { background: var(--cv-wit); font-size: .85rem; color: var(--cv-tekst-licht); padding-top: 1.4rem; }
.cv-kruimels a { color: var(--cv-tekst-licht); }
.cv-kruimels a:hover { color: var(--cv-blauw); }
.cv-kruimels span[aria-current] { color: var(--cv-tekst); }
.cv-kruimels span[aria-hidden] { margin: 0 .1rem; }

/* =====================================================================
 * 8. Hero (dienstpagina's + home)
 * ================================================================== */
.cv-hero { background: var(--cv-wit); padding: clamp(26px, 3vw, 42px) 0; }
.cv-hero--klein { padding: 44px 0 40px; }
.cv-kruimels + .cv-hero, .cv-kruimels + .cv-main .cv-hero { padding-top: 20px; }

.cv-hero__inner { display: grid; grid-template-columns: 1fr; gap: 2.25rem; align-items: center; }
@media (min-width: 940px) {
	.cv-hero--foto .cv-hero__inner {
		grid-template-columns: minmax(0, 53%) minmax(0, 47%);
		gap: 2.25rem; align-items: start;
	}
}
.cv-hero--klein .cv-hero__inner { display: block; }

.cv-hero__eyebrow {
	text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
	font-size: .82rem; color: var(--cv-groen); margin: 0 0 .6rem;
}
.cv-hero__titel { margin-bottom: .4rem; font-size: clamp(1.95rem, 3vw, 2.5rem); line-height: 1.1; }
.cv-hero__subtitel { font-size: 1.02rem; color: var(--cv-tekst-licht); max-width: 34em; margin: .65rem 0 0; }

/* Bedankt-pagina (na het contactformulier) */
.cv-bedankt-hero .cv-hero__inner { text-align: center; }
.cv-bedankt-hero .cv-hero__subtitel { margin-left: auto; margin-right: auto; }
.cv-bedankt-hero .cv-hero__cta { justify-content: center; margin-top: 1.4rem; }
.cv-bedankt__vink {
	display: inline-flex; width: 3.5rem; height: 3.5rem; margin-bottom: 1.1rem;
	border-radius: 999px; background-color: var(--cv-lichtgroen); border: 1px solid #cfe6d0;
	background-image: var(--cv-vink-glyph); background-repeat: no-repeat; background-position: center; background-size: 1.7rem;
}

/* Compactere hero op mobiel: geen eyebrow-tekst, en een korte generieke titel
   i.p.v. de volledige, pagina-specifieke titel (die blijft op desktop staan). */
.cv-hero__titel-desktop { display: none; }
@media (max-width: 639px) {
	.cv-hero__eyebrow { display: none; }
}
@media (min-width: 640px) {
	.cv-hero__titel-mobiel { display: none; }
	.cv-hero__titel-desktop { display: inline; }
}

.cv-hero__bullets { list-style: none; padding: 0; margin: 1.05rem 0 0; display: grid; gap: .5rem; }
.cv-hero__bullets li { position: relative; padding-left: 1.95rem; }
.cv-hero__bullets li::before {
	content: ""; position: absolute; left: 0; top: .1em; width: 1.35rem; height: 1.35rem;
	border-radius: 999px; background-color: var(--cv-lichtgroen); border: 1px solid #cfe6d0;
	background-image: var(--cv-vink-glyph); background-repeat: no-repeat;
	background-position: center; background-size: .78rem;
}

/* Dienstkaarten in de home-hero (vervangen de vinkjes-USP's): vier compacte, volledig klikbare
   kaarten — lichtgroen icoon links, oranje pijltje rechts, donkerblauwe titel + grijze actietekst. */
.cv-hero__diensten { list-style: none; padding: 0; margin: 1.15rem 0 0; display: grid; gap: .5rem; max-width: 42rem; }
.cv-hero-dienst {
	display: flex; align-items: center; gap: .85rem; min-height: 3.5rem;
	padding: .5rem .95rem .5rem .55rem;
	background: #fff; border: 1px solid var(--cv-rand); border-radius: 12px;
	color: inherit; text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cv-hero-dienst__icoon {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 2.4rem; height: 2.4rem; border-radius: 10px;
	background: var(--cv-lichtgroen); color: var(--cv-groen-btn);
}
.cv-hero-dienst__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.cv-hero-dienst__titel { display: block; color: var(--cv-donkerblauw); font-weight: 700; font-size: 1rem; line-height: 1.25; }
.cv-hero-dienst__actie { display: block; color: var(--cv-tekst-licht); font-size: .9rem; line-height: 1.3; }
.cv-hero-dienst__pijl { flex: none; color: var(--cv-oranje); transition: transform .15s ease; }
.cv-hero-dienst:hover, .cv-hero-dienst:focus-visible {
	border-color: var(--cv-oranje); box-shadow: var(--cv-schaduw-hover); transform: translateY(-1px);
	text-decoration: none; /* de algemene a:hover onderstreept anders de hele kaart */
}
.cv-hero-dienst:hover .cv-hero-dienst__pijl, .cv-hero-dienst:focus-visible .cv-hero-dienst__pijl { transform: translateX(3px); }
.cv-hero-dienst:focus-visible { outline: var(--cv-focus); outline-offset: 2px; border-radius: 12px; } /* de algemene a:focus-visible zet 3px */
@media (max-width: 519px) {
	.cv-hero__diensten { margin-top: 1rem; gap: .45rem; }
	.cv-hero-dienst { gap: .7rem; min-height: 3.25rem; padding: .45rem .8rem .45rem .5rem; }
	.cv-hero-dienst__icoon { width: 2.2rem; height: 2.2rem; }
	.cv-hero-dienst__titel { font-size: .95rem; }
	.cv-hero-dienst__actie { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
	.cv-hero-dienst, .cv-hero-dienst__pijl { transition: none; }
	.cv-hero-dienst:hover, .cv-hero-dienst:focus-visible, .cv-hero-dienst:hover .cv-hero-dienst__pijl, .cv-hero-dienst:focus-visible .cv-hero-dienst__pijl { transform: none; }
}

.cv-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.25rem; }
.cv-hero__cta .cv-btn { white-space: nowrap; }
.cv-hero__cta-item { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
/* Mobiel: simpel "Nu bereikbaar"-regeltje boven de belknop. */
.cv-hero__bereik-mobiel {
	margin: 0; font-size: .85rem; font-weight: 600; color: var(--cv-tekst-licht);
	display: inline-flex; align-items: center; gap: .4rem; padding-left: .1rem;
}
/* Desktop: handgeschreven cta-annotatie (pijl + tekst) vlak onder de knop, als
   één los, compact geheel — mag niet los van de knop lijken te zweven. */
.cta-annotation {
	display: flex; align-items: center; gap: 4px;
	font-family: 'Annie Use Your Telescope', cursive; font-size: 1.15rem; line-height: 1.1; font-weight: 400;
}
.cta-annotation__arrow { flex: none; margin-top: -12px; }
.cta-annotation__text { display: inline-flex; align-items: center; gap: .3rem; }
.cta-annotation .cv-status-dot { margin-bottom: .1em; }
/* Bij "Nu bereikbaar" is de pijl zelf oranje (volgt de belknop), de tekst groen
   (status-kleur); bij "Binnen 1 werkdag reactie" horen pijl en tekst allebei bij
   dezelfde (blauwe) knop, dus daar is verder geen onderscheid nodig. */
.cta-annotation--phone { color: var(--cv-oranje); }
.cta-annotation--phone .cta-annotation__text { color: var(--cv-groen); }
.cta-annotation--mail { color: var(--cv-blauw); }
@media (max-width: 519px) {
	/* Op mobiel altijd even breed en de volledige breedte, netjes onder elkaar. */
	.cv-hero__cta { flex-direction: column; }
	.cv-hero__cta .cv-btn { width: 100%; }
	.cv-hero__cta-item { align-items: center; width: 100%; }
	.cv-hero__bereik-mobiel { justify-content: center; }

	/* Zelfde behandeling voor elke andere plek met een bel-/WhatsApp-knoppenpaar
	   (foutcode-detailpagina, de gedeelde cta-bar, "niet zeker welk merk" en het
	   contact-/terugbelblok) — stonden hier nog los naast elkaar, half zo breed. */
	.cv-foutcode-detail__acties,
	.cv-cta-bar__acties,
	.cv-niet-zeker__acties { flex-direction: column; }
	.cv-foutcode-detail__acties .cv-btn,
	.cv-cta-bar__acties .cv-btn,
	.cv-niet-zeker__acties .cv-btn,
	.cv-contact-preview__tekst .cv-btn { width: 100%; }
}
@media (min-width: 520px) {
	.cv-hero__cta { flex-wrap: nowrap; align-items: flex-start; }
	.cv-hero__cta .cv-btn { padding-left: 1.15em; padding-right: 1.15em; }
	/* Knop en annotatie dicht bij elkaar houden (max. enkele pixels ruimte). */
	.cv-hero__cta-item { gap: 4px; }
	.cv-hero__cta .cv-btn--lg { padding-top: .95em; padding-bottom: .95em; }
}

/* Reviews-badge in de hero — badge + "Bekijk alle reviews"-link samen in één witte kaart */
.cv-hero__reviews { margin-top: 1.1rem; }
.cv-hero__reviews-kaart {
	display: inline-block; background: #fff; border: 1px solid var(--cv-rand);
	border-radius: 16px; padding: 6px 14px; margin-top: 22px; margin-left: -18px;
	box-shadow: var(--cv-schaduw-hover);
}
.cv-hero__reviews-kaart .cv-trustindex {
	display: block; background: none !important; border: 0 !important;
	box-shadow: none !important; border-radius: 0 !important; padding: 0 !important;
}
.cv-hero__reviews-kaart .cv-trustindex, .cv-hero__reviews-kaart .cv-trustindex * { text-align: left !important; }
/* Trustindex geeft de header van z'n widget standaard 20px padding rondom
   (bedoeld voor een grote promo-badge) — voor onze kleine kaart drukken we
   dat samen, anders blijft er veel witruimte boven/onder de sterren staan. */
.cv-hero__reviews-kaart .ti-header-grid { padding: 2px 0 !important; }
.cv-hero__reviews-link {
	display: block; margin-top: 1px; font-size: .72rem; line-height: 1.3;
	color: var(--cv-oranje); text-decoration: underline;
}
.cv-hero__reviews-link:hover { color: var(--cv-oranje-donker); }

/* Zwevende variant: boven de hero-foto */
.cv-hero__reviews--zwevend { margin: 0 0 1rem; }
@media (min-width: 940px) {
	/* left iets ruimer dan de standaard 16px, anders schuurt de pill tegen de
	   afgeronde hoek (18px) van de foto aan i.p.v. er duidelijk binnen te vallen. */
	.cv-hero__reviews--zwevend { position: absolute; top: -16px; left: 28px; z-index: 3; margin: 0; }
}
/* Op mobiel staat de reviewbadge al bovenaan het uitklapmenu — niet dubbel tonen in de hero. */
@media (max-width: 1039px) {
	.cv-hero__reviews { display: none; }
}

.cv-hero__beeld { position: relative; }
.cv-hero--vlak .cv-hero__beeld:empty { display: none; }
.cv-hero__foto {
	width: 100%; border-radius: 18px; object-fit: cover; aspect-ratio: 4 / 3.1;
	display: block;
}
@media (min-width: 940px) {
	.cv-hero--foto .cv-hero__foto { aspect-ratio: 4 / 3; }
}

/* Certificeringskaart over de rechteronderhoek van de foto — compact */
.cv-hero__badge {
	background: #fff; border: 1px solid var(--cv-rand); border-radius: 16px;
	box-shadow: var(--cv-schaduw-hover); padding: .8rem .95rem;
}
@media (min-width: 940px) {
	.cv-hero--foto .cv-hero__beeld { margin-bottom: 1.5rem; }
	.cv-hero--foto .cv-hero__badge { position: absolute; left: 32%; right: -1.25rem; bottom: -1.4rem; }
}
.cv-hero__badge-titel { font-weight: 700; font-size: .82rem; margin: 0 0 .4rem; color: var(--cv-donkerblauw); }
.cv-hero__badge-logos {
	list-style: none; padding: 0; margin: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem;
}
.cv-hero__badge-logos li {
	position: relative;
	border: 1px solid var(--cv-rand); border-radius: 8px; min-height: 60px; padding: .35rem;
	display: flex; align-items: center; justify-content: center;
}
.cv-hero__badge-logos img { max-height: 47px; max-width: 100%; width: auto; }
/* Let op: expliciete class i.p.v. een kale "span"-selector — .cv-keurmerk-uitleg
   is óók een <span> binnen dezelfde li, en een kale selector zou daar met hogere
   specificiteit overheen winnen dan zijn eigen (witte) tekstkleur hieronder. */
.cv-hero__badge-logos__naam { font-size: .66rem; font-weight: 700; color: var(--cv-tekst-licht); text-align: center; }
.cv-hero__badge-punten {
	margin: .45rem 0 0; padding-top: .4rem; border-top: 1px solid var(--cv-rand);
	font-size: .74rem; color: var(--cv-tekst-licht);
}

/* Alleen het CO-keurmerk ingesteld: de badge draait om dat certificaat — groot logo, "CO-vrij
   gecertificeerd" met schildje, de wettelijke context en een voetregel met de bedrijfsnaam. */
.cv-hero__badge--co { padding: 1rem 1.15rem .8rem; }
/* Op desktop ligt de kaart over de foto: compact houden, zodat de foto zelf zichtbaar blijft
   (afgedekt ≈ 15% i.p.v. ≈ 29%). Op mobiel staat hij onder de foto, daar mag hij ruim zijn. */
@media (min-width: 940px) {
	.cv-hero--foto .cv-hero__badge--co { left: 40%; padding: .75rem .9rem .6rem; }
	.cv-hero__badge--co .cv-hero__badge-co { gap: .75rem; }
	.cv-hero__badge--co .cv-hero__badge-co-logo { width: 62px; height: 62px; border-radius: 10px; }
	.cv-hero__badge--co .cv-hero__badge-co-titel { font-size: .95rem; gap: .4rem; margin-bottom: .2rem; }
	.cv-hero__badge--co .cv-hero__badge-co-schild { width: 22px; height: 22px; }
	.cv-hero__badge--co .cv-hero__badge-co-sub { font-size: .8rem; line-height: 1.3; }
	.cv-hero__badge--co .cv-hero__badge-co-voet { margin-top: .5rem; padding-top: .4rem; font-size: .75rem; }
}
.cv-hero__badge-co { display: flex; align-items: center; gap: 1rem; }
.cv-hero__badge-co-logo { flex: none; width: 92px; height: 92px; object-fit: contain; border-radius: 14px; }
.cv-hero__badge-co-tekst { min-width: 0; }
.cv-hero__badge-co-titel {
	display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem;
	font-weight: 800; font-size: 1.08rem; line-height: 1.2; color: var(--cv-donkerblauw);
}
.cv-hero__badge-co-schild { flex: none; width: 28px; height: 28px; }
.cv-hero__badge-co-schild .s1 { fill: var(--cv-groen-btn); }
.cv-hero__badge-co-schild .s2 { fill: var(--cv-groen); }
.cv-hero__badge-co-schild .s3 { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cv-hero__badge-co-sub { margin: 0; font-size: .92rem; font-weight: 600; line-height: 1.35; color: var(--cv-blauw-tekst); }
.cv-hero__badge-co-voet {
	margin: .75rem 0 0; padding-top: .6rem; border-top: 1px solid var(--cv-rand);
	font-size: .84rem; text-align: center; color: var(--cv-tekst-licht);
}

@media (max-width: 939px) {
	/* Mobiel: tekst (incl. buttons + review) eerst, foto + badge daaronder */
	.cv-hero--foto .cv-hero__inner { display: flex; flex-direction: column; }
	.cv-hero--foto .cv-hero__tekst { order: 1; }
	.cv-hero--foto .cv-hero__beeld { order: 2; }
	.cv-hero__foto { aspect-ratio: 16 / 10; }
	.cv-hero__badge { margin: 1.25rem 0 0; }
}

/* =====================================================================
 * 9. USP / trust-strip (geen cards)
 * ================================================================== */
.cv-trustbalk { background: var(--cv-lichtgroen); border-top: 1px solid var(--cv-rand); border-bottom: 1px solid var(--cv-rand); }
.cv-trustbalk__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem 2rem; padding: 2rem 24px;
}
.cv-trustbalk__item { display: flex; gap: .85rem; align-items: flex-start; }
.cv-trustbalk__icoon { flex: none; width: 1.7rem; height: 1.7rem; color: var(--cv-donkerblauw); margin-top: 1px; }
.cv-trustbalk__icoon::after { content: none; }
.cv-trustbalk__tekst { display: flex; flex-direction: column; }
.cv-trustbalk__tekst strong { font-size: .98rem; color: var(--cv-donkerblauw); }
.cv-trustbalk__tekst span { font-size: .87rem; color: var(--cv-tekst-licht); margin-top: .1rem; }

/* =====================================================================
 * 10. Diensten-raster (home)
 * ================================================================== */
.cv-diensten__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 22px; margin-top: 0;
}
.cv-dienst-kaart { display: flex; flex-direction: column; gap: .5rem; padding: 1.6rem; color: var(--cv-tekst); }
.cv-dienst-kaart__icoon { color: var(--cv-blauw); }
.cv-dienst-kaart h3 { margin: .3rem 0 0; }
.cv-dienst-kaart p { margin: 0; color: var(--cv-tekst-licht); font-size: .96rem; flex: 1; }
.cv-dienst-kaart__link { color: var(--cv-blauw); font-weight: 600; font-size: .92rem; }

.cv-diensten__meer { margin-top: 2.25rem; }
.cv-diensten__meer-kop { font-weight: 700; color: var(--cv-donkerblauw); margin: 0 0 .85rem; }
.cv-diensten__meer-lijst { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .cv-diensten__meer-lijst { grid-template-columns: 1fr 1fr; } }
.cv-diensten__meer-item {
	display: flex; align-items: center; gap: .85rem;
	padding: 1rem 1.15rem; border: 1px solid var(--cv-rand); border-radius: var(--cv-radius);
	background: var(--cv-grijs); color: var(--cv-donkerblauw);
}
.cv-diensten__meer-item:hover { border-color: var(--cv-blauw); background: #fff; text-decoration: none; }
.cv-diensten__meer-icoon { color: var(--cv-blauw); flex: none; }
.cv-diensten__meer-tekst { display: flex; flex-direction: column; line-height: 1.3; }
.cv-diensten__meer-tekst strong { font-weight: 650; }
.cv-diensten__meer-tekst span { font-size: .88rem; color: var(--cv-tekst-licht); }
.cv-diensten__meer-pijl { margin-left: auto; color: var(--cv-blauw); font-weight: 700; }
.cv-diensten__fallback {
	margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--cv-rand);
	text-align: center; color: var(--cv-tekst-licht);
}
.cv-diensten__fallback a, .cv-diensten__fallback .cv-tel-link { font-weight: 700; color: var(--cv-blauw); }

/* =====================================================================
 * 11. Reviews
 * ================================================================== */
.cv-reviews { text-align: center; }
.cv-reviews > .cv-container > h2 { margin-bottom: .5rem; }
.cv-reviews__widget { margin-top: 1.75rem; }

/* =====================================================================
 * 12. Storing-zoekblok (home / cv-storing)
 * ================================================================== */
.cv-zoekblok { background: var(--cv-lichtblauw); }
.cv-zoekblok__inner { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .cv-zoekblok__inner { grid-template-columns: 3fr 2fr; } }
.cv-zoekblok__tekst h2 { margin-bottom: .4rem; }
.cv-zoekblok__tekst p { color: var(--cv-tekst-licht); margin: 0; }
.cv-zoekblok__form {
	background: #fff; border: 1px solid var(--cv-rand); border-radius: var(--cv-radius-kaart);
	box-shadow: var(--cv-schaduw-kaart); padding: 1.5rem;
}
.cv-storing-zoekbalk {
	display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0;
	padding: 1.25rem; border: 1px solid var(--cv-rand); border-radius: var(--cv-radius-kaart);
	background: #fff; box-shadow: var(--cv-schaduw-kaart);
}
.cv-zoekblok__form .cv-storing-zoekbalk { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.cv-storing-zoekbalk input, .cv-storing-zoekbalk select {
	padding: .72em .9em; border: 1px solid var(--cv-rand-donker); border-radius: var(--cv-radius);
	font: inherit; font-size: 1rem; background: #fff; color: var(--cv-tekst);
}
.cv-storing-zoekbalk__veld { flex: 1 1 240px; position: relative; display: flex; }
.cv-zoekblok--breed .cv-storing-zoekbalk__veld { flex: 1 1 320px; }
.cv-storing-zoekbalk__veld input { width: 100%; }
.cv-storing-zoekbalk select { flex: 0 1 180px; }

/* Zoeksuggesties (autocomplete) */
.cv-zoek-suggesties {
	position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
	list-style: none; margin: 0; padding: .3rem; max-height: 320px; overflow-y: auto;
	background: #fff; border: 1px solid var(--cv-rand-donker); border-radius: var(--cv-radius);
	box-shadow: var(--cv-schaduw-hover);
}
.cv-zoek-suggesties li {
	padding: .55rem .7rem; border-radius: 8px; cursor: pointer; font-size: .95rem;
	color: var(--cv-tekst); line-height: 1.3;
}
.cv-zoek-suggesties li strong { color: var(--cv-donkerblauw); font-weight: 700; }
.cv-zoek-suggesties li.is-actief, .cv-zoek-suggesties li:hover { background: var(--cv-lichtblauw); }
.cv-storing-zoekbalk button {
	flex: 1 1 100%; background: var(--cv-blauw); color: #fff; border: 0; border-radius: var(--cv-radius);
	padding: .78em 1.4em; font: inherit; font-weight: 600; cursor: pointer;
}
.cv-storing-zoekbalk button:hover { background: var(--cv-blauw-donker); }
.cv-zoekblok__merken { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0 0; font-size: .88rem; }
.cv-zoekblok__merken span { color: var(--cv-tekst-licht); }
.cv-zoekblok__merken a {
	background: var(--cv-lichtblauw); color: var(--cv-donkerblauw);
	padding: .3em .8em; border-radius: 999px; border: 1px solid var(--cv-rand);
}
.cv-zoekblok__merken a:hover { background: #e4eef6; text-decoration: none; }

/* =====================================================================
 * 13. Certificering-showcase
 * ================================================================== */
.cv-keurmerk-showcase { background: var(--cv-grijs); }
.cv-keurmerk-showcase__inner { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 860px) {
	.cv-keurmerk-showcase--met-extra .cv-keurmerk-showcase__inner { grid-template-columns: 1fr 1.05fr; }
}
/* Standalone (volle breedte, geen 'extra_kolom') is dit blok zelf 2 kolommen op
   desktop: tekst links, logo's rechts. Op home staat dit blok al in een kolom die
   zelf maar 50% van de rij is (naast de storingzoeker, zie '--met-extra' hierboven)
   — daar zou een tweede interne kolomsplitsing veel te smal worden, dus blijven
   tekst en logo's daar gewoon onder elkaar staan. */
.cv-keurmerk-showcase__erkend { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 560px) {
	.cv-keurmerk-showcase__erkend { grid-template-columns: 1.1fr 1fr; }
	.cv-keurmerk-showcase--met-extra .cv-keurmerk-showcase__erkend { grid-template-columns: 1fr; }
}
.cv-keurmerk-showcase__tekst h2 { margin-bottom: .5rem; }
.cv-keurmerk-showcase__extra .cv-stappen { margin-top: 0; }
.cv-keurmerk-showcase__extra .cv-stappen h2 { margin-bottom: 1.25rem; }
.cv-keurmerk-showcase__extra .cv-zoekblok__inner--kaal { display: block; }
.cv-keurmerk-showcase__extra .cv-zoekblok__tekst h2 { margin-bottom: .5rem; }
.cv-keurmerk-showcase__tekst p { color: var(--cv-tekst-licht); }
.cv-keurmerk-showcase__logos .cv-keurmerken__lijst { gap: 1.5rem 1.75rem; }
.cv-keurmerk-showcase__logos .cv-keurmerken__item img { max-height: 122px; }
@media (max-width: 599px) {
	.cv-keurmerk-showcase__logos .cv-keurmerken__lijst { flex-wrap: nowrap; gap: .6rem; justify-content: space-between; }
	.cv-keurmerk-showcase__logos .cv-keurmerken__item { flex: 1 1 0; min-width: 0; text-align: center; }
	.cv-keurmerk-showcase__logos .cv-keurmerken__item img { max-height: 56px; width: auto; max-width: 100%; margin: 0 auto; }
}

/* Eén keurmerk in de showcase: groot en prominent in plaats van een klein logo in een halflege kolom. */
.cv-keurmerk-showcase__logos .cv-keurmerken--enkel .cv-keurmerken__lijst { justify-content: center; }
.cv-keurmerk-showcase__logos .cv-keurmerken--enkel .cv-keurmerken__item img {
	height: clamp(140px, 16vw, 200px); max-height: none; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain;
}
.cv-keurmerk-showcase__extra .cv-cokeur__inner--kaal { align-items: flex-start; }

.cv-keurmerken__titel { font-weight: 700; color: var(--cv-donkerblauw); margin: 0 0 .5rem; }
.cv-keurmerken__lijst { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.cv-keurmerken--compact .cv-keurmerken__lijst { gap: .8rem 1rem; }
.cv-keurmerken__item { position: relative; }
.cv-keurmerken__item img { max-height: 44px; width: auto; display: block; }
.cv-keurmerken--compact .cv-keurmerken__item img { max-height: 34px; }
.cv-keurmerken__naam {
	font-size: .8rem; font-weight: 700; color: var(--cv-tekst-licht);
	border: 1px solid var(--cv-rand); border-radius: var(--cv-radius); padding: .25em .6em;
}

/* "i"-knop met korte uitleg per keurmerk */
.cv-keurmerk-info {
	position: absolute; top: -9px; right: -9px; width: 20px; height: 20px; padding: 0;
	border-radius: 999px; border: 1px solid var(--cv-rand); background-color: #fff;
	background-image: var(--cv-info-glyph); background-repeat: no-repeat;
	background-position: center; background-size: 12px;
	font-size: 0; color: transparent; line-height: 0;
	cursor: pointer; box-shadow: var(--cv-schaduw-kaart);
}
.cv-keurmerk-info:hover { border-color: var(--cv-blauw); }
.cv-keurmerk-uitleg {
	position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
	width: max-content; max-width: 220px; z-index: 5;
	background: var(--cv-donkerblauw); color: #fff; font-size: .8rem; line-height: 1.35;
	padding: .6rem .75rem; border-radius: 8px; box-shadow: var(--cv-schaduw-hover);
}
/* De badge is maar zo'n 300px breed met 3 logo's op een rij — een tooltip die
   steeds onder het midden van zijn eigen icoontje centreert, valt bij het eerste
   en laatste logo al snel links/rechts buiten de kaart (of het scherm). Bij die
   twee de tooltip daarom tegen de rand van de kaart uitlijnen i.p.v. centreren. */
.cv-hero__badge-logos li:first-child .cv-keurmerk-uitleg { left: 0; transform: none; }
.cv-hero__badge-logos li:first-child .cv-keurmerk-uitleg::before { left: 16px; transform: none; }
.cv-hero__badge-logos li:last-child .cv-keurmerk-uitleg { left: auto; right: 0; transform: none; }
.cv-hero__badge-logos li:last-child .cv-keurmerk-uitleg::before { left: auto; right: 16px; transform: none; }
.cv-keurmerk-uitleg::before {
	content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
	border: 6px solid transparent; border-bottom-color: var(--cv-donkerblauw);
}
.cv-keurmerk-showcase__logos .cv-keurmerken__item { margin: 4px 6px; }

/* Checklist (herbruikbaar) */
.cv-checklist { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .55rem; }
.cv-checklist li { position: relative; padding-left: 1.9rem; }
.cv-checklist li::before {
	content: ""; position: absolute; left: 0; top: .08em; width: 1.3rem; height: 1.3rem;
	border-radius: 999px; background-color: var(--cv-lichtgroen); border: 1px solid #cfe6d0;
	background-image: var(--cv-vink-glyph); background-repeat: no-repeat;
	background-position: center; background-size: .78rem;
}

/* =====================================================================
 * 14. Merken-strip
 * ================================================================== */
.cv-merkenstrip { text-align: center; }
.cv-merkenstrip__lijst {
	list-style: none; padding: 0; margin: 1.75rem 0 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 14px; align-items: stretch;
}
.cv-merkenstrip__item {
	border: 1px solid var(--cv-rand); border-radius: var(--cv-radius);
	display: flex; align-items: center; justify-content: center; padding: 1rem; min-height: 84px; background: #fff;
}
.cv-merkenstrip__item a { display: flex; align-items: center; justify-content: center; width: 100%; }
.cv-merkenstrip__item img { max-height: 44px; width: auto; }
.cv-merkenstrip__naam { font-weight: 700; color: var(--cv-donkerblauw); }

/* Merken-overzicht (cv-storing pagina) — 7 tegels met aantal */
.cv-merken-overzicht .cv-merken-lijst {
	list-style: none; padding: 0; margin: 1.75rem 0 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px;
}
.cv-merken-lijst li {
	border: 1px solid var(--cv-rand); border-radius: var(--cv-radius-kaart); background: #fff;
	padding: 1.2rem 1rem; text-align: center; box-shadow: var(--cv-schaduw-kaart);
}
.cv-merken-lijst li a { font-weight: 700; color: var(--cv-donkerblauw); font-size: 1.05rem; }
.cv-merken-lijst__count { display: block; color: var(--cv-tekst-licht); font-size: .85rem; margin-top: .3rem; }

/* =====================================================================
 * 15. Contact / terugbelblok
 * ================================================================== */
.cv-contact-preview__inner { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 880px) { .cv-contact-preview__inner { grid-template-columns: 1fr 1.1fr; } }
.cv-contact-preview__tekst h2 { margin-bottom: .5rem; }
.cv-contact-preview__tekst p { color: var(--cv-tekst-licht); }

.cv-formkaart { padding: 1.9rem; }
.cv-form-placeholder {
	background: var(--cv-grijs); border: 1px dashed var(--cv-rand-donker); border-radius: var(--cv-radius);
	padding: 1.5rem; color: var(--cv-tekst-licht);
}

/* De heroblok van deze pagina eindigt al met eigen padding — een volle sectie
   erboven gaf een dubbel gat vóór het formulier. */
.cv-contact-sectie { padding-top: 2rem; }

.cv-contact-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 820px) { .cv-contact-grid { grid-template-columns: 3fr 2fr; } }
.cv-contact-grid__info {
	background: var(--cv-grijs); border: 1px solid var(--cv-rand); border-radius: var(--cv-radius-kaart);
	padding: 1.9rem; display: flex; flex-direction: column; align-items: flex-start; gap: .9rem;
}
.cv-contact-grid__info h2 { margin: 0; }
.cv-contact-grid__info h3 { margin: 1.4rem 0 .3rem; font-size: 1.05rem; }
.cv-contact-grid__info .cv-btn { width: 100%; }
.cv-contact-grid__bereik {
	margin: -.3rem 0 0; color: var(--cv-groen); font-weight: 600; font-size: .92rem;
	display: inline-flex; align-items: center; gap: .4rem;
}
.cv-contact-grid__lijst {
	list-style: none; margin: .2rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--cv-rand);
	display: grid; gap: .55rem; font-size: .92rem; color: var(--cv-tekst-licht); width: 100%;
}
.cv-contact-grid__lijst li { display: flex; align-items: center; gap: .55rem; }
.cv-contact-grid__icoon {
	flex: none; width: 1.1em; height: 1.1em; background-color: var(--cv-tekst-licht);
	-webkit-mask: var(--cv-icon-locatie) center / contain no-repeat;
	mask: var(--cv-icon-locatie) center / contain no-repeat;
}

/* =====================================================================
 * 16. Gravity Forms
 * ================================================================== */
.gform_wrapper .gform_fields { display: grid; gap: 1rem; }
.gform_wrapper .gfield_label { display: block; font-weight: 600; font-size: .92rem; color: var(--cv-donkerblauw); margin-bottom: .35rem; }
.gform_wrapper .gfield_required { color: var(--cv-oranje); margin-left: .15em; }
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
	width: 100% !important; font: inherit !important; font-size: 1rem !important;
	padding: .78em .9em !important; border: 1px solid var(--cv-rand-donker) !important;
	border-radius: var(--cv-radius) !important; background: #fff !important; color: var(--cv-tekst) !important;
	line-height: 1.4 !important;
}
.gform_wrapper input:focus, .gform_wrapper textarea:focus, .gform_wrapper select:focus {
	border-color: var(--cv-blauw) !important; outline: 2px solid color-mix(in srgb, var(--cv-blauw) 30%, transparent) !important; outline-offset: 1px !important;
}
.gform_wrapper textarea { min-height: 120px !important; }
/* Gravity Forms 3 geeft eenregelige velden een vaste hoogte (38px). Samen met onze padding
   blijft er dan maar ~11px voor de tekst over (regelhoogte 22px): de tekst in een dropdown
   werd onderaan afgekapt. Hoogte laten volgen uit padding + regelhoogte (≈49px). */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper select {
	block-size: auto !important; height: auto !important; min-block-size: 0 !important;
}
/* Dropdown: de .gform_wrapper-regel hierboven zet `background: #fff !important`, waardoor
   het pijltje van Gravity Forms verdween — zonder pijltje lijkt het een gewoon tekstveld. */
.gform_wrapper select:not([multiple]) {
	-webkit-appearance: none !important; appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important; background-position: right .9em center !important; background-size: 1.1em !important;
	padding-right: 2.8em !important; text-overflow: ellipsis; cursor: pointer;
}
.gform_wrapper .gfield_description, .gform_wrapper .instruction { color: var(--cv-tekst-licht); font-size: .85rem; }
.gform_wrapper .gform_validation_errors { display: none; }
.gform_wrapper .validation_message, .gform_wrapper .gfield_validation_message {
	color: #b3261e; font-size: .85rem; margin-top: .3rem; background: none; border: 0; padding: 0;
}
.gform_wrapper .gform_footer { margin-top: 1.25rem !important; padding: 0 !important; }
.gform_wrapper .gform_button {
	width: 100% !important; background: var(--cv-oranje) !important; color: #fff !important;
	border: 0 !important; border-radius: var(--cv-radius) !important;
	padding: .9em 1.8em !important; font: inherit !important; font-weight: 600 !important; font-size: 1.02rem !important; cursor: pointer !important;
}
.gform_wrapper .gform_button:hover { background: var(--cv-oranje-donker) !important; }
.gform_confirmation_message {
	background: var(--cv-lichtgroen); border: 1px solid #cfe6d0; color: #2f6b33;
	border-radius: var(--cv-radius); padding: 1rem 1.25rem;
}

/* =====================================================================
 * 17. CTA-balk
 * ================================================================== */
.cv-cta-bar { padding: 2.25rem 0; }
.cv-cta-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cv-cta-bar__tekst { margin: 0; max-width: 42em; }
.cv-cta-bar__tekst strong { display: block; font-size: 1.3rem; color: inherit; margin-bottom: .15rem; }
.cv-cta-bar__acties { display: flex; gap: .75rem; flex-wrap: wrap; }

.cv-cta-bar--licht { background: var(--cv-lichtgroen); border-top: 1px solid var(--cv-rand); border-bottom: 1px solid var(--cv-rand); color: var(--cv-tekst); }
.cv-cta-bar--licht .cv-cta-bar__tekst strong { color: var(--cv-donkerblauw); }

.cv-cta-bar--donker { background: var(--cv-donkerblauw); color: #fff; }
.cv-cta-bar--donker .cv-cta-bar__tekst strong { color: #fff; }
.cv-cta-bar--donker .cv-btn--secondary { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.cv-cta-bar--donker .cv-btn--secondary:hover { background: #fff; color: var(--cv-donkerblauw); }

/* =====================================================================
 * 18. FAQ
 * ================================================================== */
.cv-faq__lijst { margin-top: 1.75rem; display: grid; gap: .75rem; }
@media (min-width: 820px) { .cv-faq__lijst { grid-template-columns: 1fr 1fr; } }
.cv-faq__item { border: 1px solid var(--cv-rand); border-radius: var(--cv-radius); background: #fff; }
.cv-faq__vraag {
	cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; color: var(--cv-donkerblauw);
	list-style: none; position: relative; padding-right: 2.75rem;
}
.cv-faq__vraag::-webkit-details-marker { display: none; }
.cv-faq__vraag::after {
	content: ""; position: absolute; right: 1.25rem; top: 1.15rem; width: .55rem; height: .55rem;
	border-right: 2px solid var(--cv-tekst-licht); border-bottom: 2px solid var(--cv-tekst-licht);
	transform: rotate(45deg); transition: transform .2s;
}
.cv-faq__item[open] .cv-faq__vraag::after { transform: rotate(-135deg); }
.cv-faq__antwoord { padding: 0 1.25rem 1.1rem; color: var(--cv-tekst); }
.cv-faq__antwoord p { margin: 0 0 .5rem; }

/* =====================================================================
 * 19. Content-shortcodes (stappen / kaarten / prijzen)
 * ================================================================== */
.cv-page-content { }
.cv-page-content > .cv-container > h2 { margin-top: 2.75rem; }
.cv-page-content > .cv-container > *:first-child { margin-top: 0; }
.cv-page-content ul:not([class]) { padding-left: 1.25rem; }
.cv-page-content ul:not([class]) li { margin: .35rem 0; }

.cv-stappen { margin: 2.5rem 0 0; }
.cv-stappen__lijst {
	list-style: none; padding: 0; margin: 1.5rem 0 0;
	display: grid; gap: 1.25rem;
}
@media (min-width: 760px) { .cv-stappen__lijst { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); position: relative; } }
.cv-stap { display: flex; gap: .85rem; align-items: flex-start; }
.cv-stap__nr {
	flex: none; width: 2.1rem; height: 2.1rem; border-radius: 999px;
	background: var(--cv-donkerblauw); color: #fff; font-weight: 700; font-size: .95rem;
	display: flex; align-items: center; justify-content: center;
}
.cv-stap__tekst { display: flex; flex-direction: column; gap: .15rem; }
.cv-stap__tekst strong { color: var(--cv-donkerblauw); }
.cv-stap__tekst span { color: var(--cv-tekst-licht); font-size: .9rem; }

.cv-kaarten { margin: 2.5rem 0 0; }
.cv-kaarten__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 1.5rem;
}
.cv-kaart { padding: 1.5rem; }
.cv-kaart__icoon { color: var(--cv-blauw); margin-bottom: .6rem; }
.cv-kaart h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.cv-kaart p { margin: 0; color: var(--cv-tekst-licht); font-size: .93rem; }
/* Alleen op desktop: op mobiel staat de sticky bel/formulier-balk al onderin beeld. */
.cv-kaarten__cta { display: none; }
@media (min-width: 768px) {
	.cv-kaarten__cta { display: flex; gap: .8rem; margin: 1.5rem 0 0; }
}

/* Twee routes: 2 duidelijke keuzes (aanleg vs. storing/onderhoud) */
.cv-routes { display: grid; gap: 20px; margin: 2.5rem 0 0; grid-template-columns: 1fr; }
@media (min-width: 720px) { .cv-routes { grid-template-columns: 1fr 1fr; } }
.cv-route {
	background: #fff; border: 1px solid var(--cv-rand); border-radius: var(--cv-radius-kaart);
	padding: 1.75rem; display: flex; flex-direction: column; gap: .75rem;
}
.cv-route h3 { margin: 0; font-size: 1.15rem; }
.cv-route p { margin: 0; color: var(--cv-tekst-licht); flex: 1; }
.cv-route .cv-btn { align-self: flex-start; margin-top: .25rem; }

/* Oorzaken-strip: horizontale lichte sectie, iconen één kleur */
.cv-oorzaken { background: var(--cv-grijs); border-radius: var(--cv-radius-kaart); padding: 1.75rem; margin: 2.5rem 0 0; }
.cv-oorzaken__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.25rem 1rem; margin-top: 1rem; }
.cv-oorzaken__item { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; }
.cv-oorzaken__item svg { flex: none; color: var(--cv-blauw); margin-top: 1px; }

/* Prijskaarten */
.cv-prijskaarten__grid { display: grid; gap: 24px; margin-top: 1.75rem; }
@media (min-width: 720px) {
	.cv-prijskaarten__grid--2 { grid-template-columns: 1fr 1fr; }
	.cv-prijskaarten__grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.cv-prijskaarten__grid--1 { max-width: 34rem; }
.cv-prijskaart { padding: 1.8rem; display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.cv-prijskaart--uitgelicht { border-color: var(--cv-blauw); }
.cv-prijskaart__icoon {
	display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem;
	border-radius: 999px; background: var(--cv-lichtblauw); color: var(--cv-blauw);
}
.cv-prijskaart__titel { margin: 0; }
.cv-prijskaart__omschrijving { margin: 0; color: var(--cv-tekst-licht); }
.cv-prijskaart__lijst { list-style: none; padding: 0; margin: .25rem 0; display: grid; gap: .45rem; width: 100%; }
.cv-prijskaart__lijst li { position: relative; padding-left: 1.6rem; }
.cv-prijskaart__lijst li::before {
	content: ""; position: absolute; left: 0; top: .32em; width: .72rem; height: .4rem;
	border-left: 2px solid var(--cv-groen); border-bottom: 2px solid var(--cv-groen); transform: rotate(-45deg);
}
.cv-prijskaart__prijs { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 .25rem; }
.cv-prijskaart__prijs span { font-size: .9rem; color: var(--cv-tekst-licht); }
.cv-prijskaart__prijs strong { font-size: 1.7rem; color: var(--cv-oranje); }
.cv-prijskaart .cv-btn { align-self: stretch; background: #fff; color: var(--cv-blauw); border-color: var(--cv-blauw); }
.cv-prijskaart .cv-btn:hover { background: var(--cv-blauw); color: #fff; }
.cv-prijskaarten__voetnoot { font-size: .82rem; color: var(--cv-tekst-licht); margin-top: 1rem; }

/* Eén aanbod (geen abonnement): één brede kaart — links prijs en knop, rechts wat erin zit. */
.cv-prijskaart__lijst-kop { margin: 0; font-weight: 700; color: var(--cv-donkerblauw); }
@media (min-width: 820px) {
	.cv-prijskaarten__grid--breed { max-width: none; }
	.cv-prijskaart--breed {
		display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 3rem; row-gap: .6rem; align-items: start; padding: 2.2rem 2.4rem;
		grid-template-areas: "icoon lijstkop" "titel lijst" "omschrijving lijst" "prijs lijst" "knop lijst";
	}
	.cv-prijskaart--breed .cv-prijskaart__icoon { grid-area: icoon; }
	.cv-prijskaart--breed .cv-prijskaart__titel { grid-area: titel; font-size: 1.5rem; }
	.cv-prijskaart--breed .cv-prijskaart__omschrijving { grid-area: omschrijving; }
	.cv-prijskaart--breed .cv-prijskaart__prijs { grid-area: prijs; margin: .9rem 0 .4rem; }
	.cv-prijskaart--breed .cv-prijskaart__prijs strong { font-size: 2.1rem; }
	.cv-prijskaart--breed .cv-btn { grid-area: knop; justify-self: start; align-self: start; min-width: 17rem; }
	.cv-prijskaart--breed .cv-prijskaart__lijst-kop { grid-area: lijstkop; align-self: end; padding-left: 1.6rem; }
	.cv-prijskaart--breed .cv-prijskaart__lijst {
		grid-area: lijst; align-self: stretch; align-content: center; gap: .85rem; margin: 0; padding: 1.5rem 1.7rem;
		background: var(--cv-lichtgroen); border-radius: var(--cv-radius-kaart); font-size: 1.05rem;
	}
	.cv-prijskaart--breed .cv-prijskaart__lijst li { padding-left: 1.8rem; }
}
@media (max-width: 819px) {
	.cv-prijskaarten__grid--breed { max-width: 34rem; }
	.cv-prijskaart__lijst-kop { margin-top: .4rem; }
}

/* "Waarom een onderhoudsabonnement?" onder de prijskaarten. */
.cv-abo-voordelen { margin-top: 2.5rem; background: var(--cv-lichtgroen); border-radius: var(--cv-radius-kaart); padding: 2rem 2.2rem; }
.cv-abo-voordelen__kop { margin: 0 0 .4rem; }
.cv-abo-voordelen__intro { margin: 0 0 1.4rem; color: var(--cv-tekst-licht); }
.cv-abo-voordelen__lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem 2rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.cv-abo-voordelen__item { display: flex; gap: .9rem; align-items: flex-start; }
.cv-abo-voordelen__icoon {
	flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem;
	border-radius: 999px; background: #fff; color: var(--cv-groen-btn);
}
.cv-abo-voordelen__item h4 { margin: 0 0 .2rem; font-size: 1rem; color: var(--cv-donkerblauw); }
.cv-abo-voordelen__item p { margin: 0; font-size: .93rem; color: var(--cv-tekst-licht); line-height: 1.5; }
.cv-abo-voordelen__noot { margin: 1.4rem 0 0; font-size: .9rem; font-style: italic; color: var(--cv-tekst-licht); }
@media (max-width: 599px) {
	.cv-abo-voordelen { padding: 1.5rem 1.25rem; }
}

.cv-warmtepomp-advies { background: var(--cv-lichtgroen); border-radius: var(--cv-radius-kaart); padding: 1.75rem; margin: 2.5rem 0 0; }

.cv-usps { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .6rem 1.5rem; }
.cv-usps li { position: relative; padding-left: 1.75rem; }
.cv-usps li::before {
	content: ""; position: absolute; left: 0; top: .05em; width: 1.25rem; height: 1.25rem;
	border-radius: 999px; background-color: var(--cv-lichtgroen); border: 1px solid #cfe6d0;
	background-image: var(--cv-vink-glyph); background-repeat: no-repeat;
	background-position: center; background-size: .72rem;
}
.cv-openingstijden { list-style: none; padding: 0; margin: .5rem 0 0; }
.cv-openingstijden li { padding: .2rem 0; border-bottom: 1px solid var(--cv-rand); }
.cv-openingstijden li:last-child { border-bottom: 0; }

/* =====================================================================
 * 20. Storing hub — overzicht / archief / zoekresultaten
 * ================================================================== */
.cv-resultaten-telling { color: var(--cv-tekst-licht); margin: 1.25rem 0; }
.cv-foutcode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 1rem; }
@media (min-width: 720px) { .cv-foutcode-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cv-foutcode-grid { grid-template-columns: repeat(3, 1fr); } }
.cv-foutcode-card__link { display: block; padding: 1.2rem; color: var(--cv-tekst); }
.cv-foutcode-card__merk {
	display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
	color: var(--cv-blauw); font-weight: 700; margin-bottom: .4rem;
}
.cv-foutcode-card__titel { margin: 0 0 .3rem; font-size: 1.02rem; color: var(--cv-donkerblauw); }
.cv-foutcode-card__model { color: var(--cv-tekst-licht); font-size: .88rem; margin: 0 0 .5rem; }
.cv-foutcode-card__betrouwbaarheid { display: inline-block; font-size: .72rem; padding: .15em .6em; border-radius: 999px; font-weight: 600; }
.is-hoog { background: #dcfce7; color: #166534; }
.is-middel { background: #fef9c3; color: #854d0e; }
.is-laag { background: #fee2e2; color: #991b1b; }
.is-status, .is-onbekend { background: #eef2f6; color: #374151; }

.cv-paginering { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.cv-paginering .page-numbers {
	display: inline-block; padding: .45em .85em; border: 1px solid var(--cv-rand); border-radius: var(--cv-radius); color: var(--cv-tekst);
}
.cv-paginering .page-numbers.current { background: var(--cv-blauw); color: #fff; border-color: var(--cv-blauw); }
.cv-paginering a.page-numbers:hover { border-color: var(--cv-blauw); text-decoration: none; }
.cv-geen-resultaten { padding: 2rem; text-align: center; color: var(--cv-tekst-licht); }
.cv-geen-resultaten__cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1rem; }

/* =====================================================================
 * 21. Foutcode-detailpagina
 * ================================================================== */
.cv-foutcode-detail { padding: 2.5rem 0 var(--cv-sectie); }
.cv-foutcode-detail__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 980px) { .cv-foutcode-detail__grid { grid-template-columns: minmax(0, 60%) minmax(0, 1fr); } }
.cv-foutcode-detail__hoofd { min-width: 0; }
.cv-foutcode-detail__tags { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .6rem; }
.cv-foutcode-detail__tags .cv-foutcode-card__merk { margin: 0; }
.cv-foutcode-detail__betrouwbaarheid { display: inline-block; font-size: .78rem; padding: .25em .8em; border-radius: 999px; font-weight: 600; }
.cv-foutcode-detail h1 { margin-bottom: .5rem; font-size: clamp(1.6rem, 3vw, 2.15rem); overflow-wrap: anywhere; }
.cv-foutcode-detail__modellen { color: var(--cv-tekst-licht); font-size: .9rem; margin: 0 0 1.5rem; }

.cv-foutcode-detail__betekenis { margin-bottom: 1.75rem; }
.cv-foutcode-detail__betekenis h2 { overflow-wrap: anywhere; }
.cv-foutcode-detail__betekenis p { margin: .5rem 0 0; }

.cv-foutcode-detail__kolommen { display: grid; gap: 1.75rem 2.5rem; }
.cv-foutcode-detail__kolom { min-width: 0; }
.cv-foutcode-detail__kolom h2 { overflow-wrap: anywhere; }
.cv-foutcode-detail__form h2 { overflow-wrap: anywhere; }
@media (min-width: 620px) { .cv-foutcode-detail__kolommen { grid-template-columns: 1fr 1fr; } }

.cv-foutcode-detail__oorzaken { margin: .5rem 0 .75rem; padding-left: 1.1rem; }
.cv-foutcode-detail__oorzaken li { margin: .3rem 0; color: var(--cv-tekst); }
.cv-foutcode-detail__mini { font-size: .85rem; color: var(--cv-tekst-licht); margin: 0; }

/* Gedeeld blok "Hoe wij verhelpen" + "Wanneer u belt" — twee kolommen */
.cv-foutcode-hulp__grid { display: grid; gap: 2rem 3rem; }
@media (min-width: 860px) { .cv-foutcode-hulp__grid { grid-template-columns: 1fr 1fr; } }
.cv-foutcode-hulp__grid > div > h2 { font-size: 1.3rem; }

/* "Hoe wij X verhelpen" — stappen */
.cv-hoe-verhelpen__stappen {
	list-style: none; counter-reset: hv; padding: 0; margin: 1.25rem 0 0;
	display: grid; gap: .9rem; max-width: 46rem;
}
.cv-hoe-verhelpen__stappen li { position: relative; padding-left: 2.6rem; counter-increment: hv; color: var(--cv-tekst-licht); }
.cv-hoe-verhelpen__stappen li::before {
	content: counter(hv); position: absolute; left: 0; top: -.1em;
	width: 1.8rem; height: 1.8rem; border-radius: 999px;
	background: var(--cv-lichtblauw); color: var(--cv-blauw); font-weight: 700; font-size: .9rem;
	display: flex; align-items: center; justify-content: center;
}
.cv-hoe-verhelpen__stappen strong { color: var(--cv-donkerblauw); }
.cv-foutcode-detail__kolom h2 { font-size: 1.15rem; }
.cv-foutcode-detail__opmerking { color: var(--cv-tekst-licht); }
.cv-foutcode-detail__variant {
	background: var(--cv-lichtblauw); border: 1px solid #d5e6f2; border-radius: var(--cv-radius);
	padding: .7rem .9rem; font-size: .92rem; margin: .75rem 0 0;
}
.cv-foutcode-detail__let-op {
	background: #fff7ed; border: 1px solid var(--cv-oranje); border-left-width: 3px;
	border-radius: var(--cv-radius); padding: .95rem 1.15rem; font-size: .9rem; margin-top: 1rem;
}
.cv-foutcode-detail__acties { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 .5rem; }
.cv-foutcode-detail__form { padding: 1.6rem; position: sticky; top: 96px; }
.cv-foutcode-detail__form h2 { font-size: 1.2rem; margin-bottom: .25rem; }
.cv-foutcode-detail__form > p { color: var(--cv-tekst-licht); font-size: .92rem; margin-top: 0; }
@media (max-width: 979px) { .cv-foutcode-detail__form { position: static; } }

/* Google/Trustindex review-badge onder de actieknoppen: links uitlijnen (i.p.v. gecentreerd) */
.cv-foutcode-detail__hoofd .cv-trustindex--badge { margin-top: 1rem; text-align: left; }
.cv-foutcode-detail__hoofd .cv-trustindex--badge,
.cv-foutcode-detail__hoofd .cv-trustindex--badge * { text-align: left !important; justify-content: flex-start; }
@media (max-width: 1040px) {
	/* Zelfde "op één regel"-fix als de reviewbadge onder de header
	   (.cv-site-header__reviews-strook hierboven) — Trustindex zet sterren/logo
	   en het cijfer standaard als twee grid-rijen onder elkaar, wat hier op
	   mobiel onder de actieknoppen net zo rommelig oogt. */
	.cv-foutcode-detail__hoofd .cv-trustindex--badge .ti-header-grid {
		display: flex !important; align-items: center !important; justify-content: flex-start !important;
		gap: .5rem !important; padding: 4px 10px !important;
	}
	.cv-foutcode-detail__hoofd .cv-trustindex--badge .ti-widget[data-layout-id='30'][data-set-id='dark-background'] .ti-header {
		background-color: transparent !important;
		background-image: none !important;
		border-color: var(--cv-rand) !important;
		border-style: solid !important;
		border-radius: 12px !important;
		color: var(--cv-donkerblauw) !important;
		padding-bottom: 0 !important;
		padding-top: 5px !important;
		transition: transform .3s ease-in-out !important;
		text-align: left !important;
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
	}
}

/* Automatisch ingevuld "Foutcode"-veld in het contactformulier: als vaste, niet-wijzigbare regel tonen */
.cv-gf-foutcode input[readonly],
.cv-gf-foutcode input:read-only {
	background: var(--cv-grijs);
	color: var(--cv-donkerblauw);
	font-weight: 600;
	cursor: default;
	border-style: dashed;
}
.cv-gf-foutcode input[readonly]:focus,
.cv-gf-foutcode input:read-only:focus { box-shadow: none; outline: none; }

.cv-andere-codes { padding: var(--cv-sectie-compact) 0; }
.cv-andere-codes__lijst { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.cv-andere-codes__lijst a {
	display: inline-block; padding: .4em .9em; background: #fff; border: 1px solid var(--cv-rand);
	border-radius: var(--cv-radius); color: var(--cv-donkerblauw); font-weight: 600; font-size: .9rem;
}
.cv-andere-codes__lijst a:hover { border-color: var(--cv-blauw); color: var(--cv-blauw); text-decoration: none; }
.cv-andere-codes__alle a { background: var(--cv-lichtblauw); }

/* =====================================================================
 * 21b. CO-keurmerksticker-blok (onderhoudspagina)
 * ================================================================== */
.cv-cokeur__inner { display: flex; align-items: center; gap: 1.5rem; }
.cv-cokeur__icoon {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; border-radius: 999px;
	background: var(--cv-lichtgroen); color: var(--cv-groen);
}
.cv-cokeur__tekst h2 { margin: 0 0 .5rem; }
.cv-cokeur__tekst p { margin: 0 0 .6rem; color: var(--cv-tekst-licht); }
.cv-cokeur__tekst p:last-child { margin-bottom: 0; }
.cv-cokeur__tekst .cv-cokeur__sub { font-weight: 650; color: var(--cv-donkerblauw); font-size: .93rem; }
@media (max-width: 599px) {
	.cv-cokeur__inner { flex-direction: column; text-align: center; gap: 1rem; }
}

/* =====================================================================
 * 22. Over ons
 * ================================================================== */
/* De heroblok erboven eindigt al met eigen padding — minder eigen top-padding
   hier voorkomt een dubbel gat tussen de intro en de eerste tekst. */
.cv-over .cv-container { padding-top: 2rem; padding-bottom: var(--cv-sectie-compact); }
.cv-over__grid { display: grid; gap: 2.5rem; align-items: start; }
.cv-over__grid--met-foto { grid-template-columns: 1fr; }
@media (min-width: 860px) { .cv-over__grid--met-foto { grid-template-columns: 1.3fr 1fr; } }
.cv-over__foto { margin: 0; }
.cv-over__foto img { border-radius: var(--cv-radius-kaart); border: 1px solid var(--cv-rand); }

/* Korte "over ons"-sectie op de home (tekst + USP's + twee foto's) */
.cv-home-over-ons__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 860px) { .cv-home-over-ons__grid--met-fotos { grid-template-columns: 1.1fr 1fr; } }
.cv-home-over-ons__tekst > p { color: var(--cv-tekst-licht); margin: 0 0 1.25rem; }
.cv-home-over-ons__usps { margin-top: 1.05rem; margin-bottom: 1.75rem; }
.cv-home-over-ons__fotos {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.cv-home-over-ons__foto {
	/* Zelfde verhouding als de "cv-card"-crop (480x320) waarmee ze worden ingeladen,
	   zodat object-fit:cover alleen schaalt en niet nóg eens gaat bijsnijden. */
	width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
	border-radius: var(--cv-radius-kaart); border: 1px solid var(--cv-rand);
}
.cv-home-over-ons__foto--busje { margin-top: 1.75rem; }
@media (max-width: 599px) {
	.cv-home-over-ons__fotos { grid-template-columns: 1fr; }
	.cv-home-over-ons__foto--busje { margin-top: 0; }
}

/* =====================================================================
 * 23. Footer
 * ================================================================== */
.cv-site-footer { background: var(--cv-donkerblauw); color: #b9c6d4; padding: var(--cv-sectie) 0 0; }
.cv-site-footer__inner {
	display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem;
}
@media (max-width: 860px) { .cv-site-footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px) { .cv-site-footer__inner { grid-template-columns: 1fr; } }
.cv-site-footer a { color: #b9c6d4; }
.cv-site-footer a:hover { color: #fff; }
.cv-site-footer__logo img { max-height: 48px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
.cv-site-footer__title { color: #fff; font-weight: 700; font-size: 1.15rem; margin: 0 0 .75rem; }
.cv-site-footer__pitch { font-size: .92rem; line-height: 1.65; max-width: 26rem; margin: .75rem 0 0; }
.cv-site-footer__koptekst { color: #fff; font-weight: 700; font-size: .95rem; margin: 0 0 1rem; }
.cv-site-footer .cv-menu--footer { flex-direction: column; align-items: stretch; gap: .55rem; }
.cv-site-footer .cv-menu--footer a {
	font-weight: 400; font-size: .92rem;
	display: flex; align-items: center; justify-content: space-between; gap: .6rem;
}
.cv-site-footer .cv-menu--footer a::after {
	content: ""; flex: none; width: .45em; height: .45em; opacity: .65;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}
.cv-site-footer .cv-menu--footer::after { content: none; }
.cv-site-footer__contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; font-size: .92rem; }
.cv-site-footer__contact li { display: flex; align-items: center; gap: .55rem; }
.cv-site-footer__contact a { display: inline-flex; align-items: center; gap: .55rem; }
.cv-site-footer__contact .cv-wa-icoon { background-color: var(--cv-groen); }
.cv-site-footer__contact-icoon {
	flex: none; width: 1.1em; height: 1.1em; background-color: #b9c6d4;
	-webkit-mask: var(--cv-icon-locatie) center / contain no-repeat;
	mask: var(--cv-icon-locatie) center / contain no-repeat;
}
.cv-site-footer__adres { color: #93a4b6; }
.cv-site-footer__col--keur .cv-keurmerken__lijst { gap: .8rem; }
.cv-site-footer__col--keur .cv-keurmerken__item img { max-height: 100px; background: #fff; padding: 8px 10px; border-radius: 8px; }
.cv-site-footer__col--keur .cv-keurmerken__naam { color: #b9c6d4; border-color: #2b4a68; }
.cv-site-footer__bottom { border-top: 1px solid #1c3f60; }
.cv-site-footer__bottom-inner {
	display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
	padding: 1.2rem 0; font-size: .84rem; color: #93a4b6;
}
.cv-site-footer__bottom-inner p { margin: 0; }
@media (max-width: 599px) {
	.cv-site-footer__inner { padding-bottom: 2rem; }
	.cv-site-footer__contact { font-size: .95rem; }
	.cv-site-footer__bottom-inner { flex-direction: column; align-items: center; gap: .35rem; text-align: center; }
	.cv-site-footer__bottom-adres { display: block; margin: .15rem 0 0; }
}
.footer-widget { margin-bottom: 1rem; }
.footer-widget__title { color: #fff; font-size: .95rem; }

/* =====================================================================
 * 24. Mobiele sticky CTA-balk
 * ================================================================== */
.cv-mobiele-cta {
	display: none;
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
	background: #fff; border-top: 1px solid var(--cv-rand);
	padding: .5rem .6rem .6rem; gap: .35rem;
	box-shadow: 0 -6px 20px rgba(11, 49, 88, .12);
}
.cv-mobiele-cta__status {
	margin: 0; padding: 0 .2rem; font-size: 15px; font-weight: 600; color: #393939;
	display: flex; align-items: center; justify-content: center; gap: .4rem;
}
/* Uitdrukkelijk NAAST elkaar (gebruiker koos dit expliciet terug na een
   eerdere, ongewenste stack-poging) — anders dan de knoppenparen elders op
   de site, die wél onder elkaar horen te staan. */
.cv-mobiele-cta__knoppen { display: flex; gap: .6rem; }
/* Iets steviger dan een standaard .cv-btn, zodat de balk er niet "vlak" uitziet:
   groter, ronder en met een duidelijke schaduw die de eigen knopkleur volgt. */
.cv-mobiele-cta__knoppen a {
	flex: 1; padding: .85em .5em; font-size: 1.02rem; font-weight: 700;
	border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
}
.cv-mobiele-cta__knoppen .cv-btn--primary { box-shadow: 0 4px 14px rgba(243, 107, 33, .38); }
.cv-mobiele-cta__knoppen .cv-btn--whatsapp { box-shadow: 0 4px 14px rgba(74, 166, 79, .35); }
@media (max-width: 768px) {
	.cv-mobiele-cta {
		display: flex; flex-direction: column;
		transform: translateY(0); transition: transform .22s ease;
	}
	/* Toegevoegd door JS zodra de eigen cta-knoppen in de hero nog in beeld zijn —
	   voorkomt dubbele bel/WhatsApp-knoppen boven elkaar vlak na het laden. Zonder
	   JS (of zonder hero-cta op de pagina) blijft de balk gewoon zichtbaar. */
	.cv-mobiele-cta.cv-mobiele-cta--verborgen { transform: translateY(100%); }
	/* De ruimte voor de sticky balk hoort helemaal onderaan de pagina thuis (na de
	   footer), niet op .cv-main — anders ontstaat er een wit gat tussen de laatste
	   sectie en de (donkere) footer, en blijft de subfooter juist onder de balk zitten.
	   88px hield alleen rekening met de sticky cta-balk zelf (~97px) — de zwevende
	   chat-bubble + cookie-icoon zweven DAARBOVEN nog tot ~157px vanaf de onderkant
	   (live gemeten: chat/cookie top=655px/662px op een 812px-hoog scherm), en
	   overlapten daardoor nog steeds de laatste footerregels/-links (Privacybeleid/
	   Cookiebeleid waren met een tik nauwelijks meer te raken). 172px geeft ruim
	   genoeg lucht boven beide lagen. */
	.cv-site-footer { padding-bottom: 172px; }
}

/* Mobiel/desktop-wissel voor contact-CTA's: op desktop staat WhatsApp meestal niet
   open, dus tonen we daar een formulierlink in plaats van de WhatsApp-knop. */
.cv-alleen-desktop { display: none; }
/* "Nu bereikbaar"/"Binnen 1 werkdag reactie"-regeltje onder een pill (contact_antwoord()) —
   op mobiel bewust weggelaten (blijft de compacte, smalle pill uit de horizontale rij);
   pas op desktop zichtbaar, samen met de grotere pill-variant hieronder bij de 768px-wissel.
   Moet hier staan (vóór die media query): zelfde specificiteit als de "show"-regel erin,
   dus bij gelijke specificiteit wint anders de latere regel in bronvolgorde, ook op desktop. */
.cv-chat__reply-sub { display: none; }
@media (min-width: 768px) {
	.cv-alleen-mobiel { display: none !important; }
	.cv-alleen-desktop { display: inline-flex; }

	/* Contactkeuze (contact_antwoord()) mag op desktop best opvallen: grotere pills
	   met een extra stimulans-regeltje eronder ("Nu bereikbaar" / "Binnen 1 werkdag
	   reactie"). Op mobiel blijft de compacte, smalle pill ongewijzigd. */
	.cv-chat__reply--groot { padding: .75rem 1.3rem; font-size: 1.02rem; gap: .65rem; }
	.cv-chat__reply--groot .cv-chat__reply-icoon { width: 19px; height: 19px; }
	.cv-chat__reply-tekst { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
	.cv-chat__reply-label { font-weight: 700; }
	.cv-chat__reply-sub {
		display: inline-flex; align-items: center; gap: .35rem;
		font-size: .74em; font-weight: 500; opacity: .85;
	}
}

/* =====================================================================
 * 25. Admin: huisstijl-swatches (instellingenpagina)
 * ================================================================== */
.cv-swatch { display: inline-block; width: 20px; height: 20px; border-radius: 4px; border: 1px solid rgba(0,0,0,.2); vertical-align: middle; margin-right: .3rem; }
.cv-huisstijl-kandidaten { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.cv-swatch--btn { width: 52px; height: 34px; overflow: hidden; display: inline-flex; }
.cv-swatch--btn button { flex: 1; border: 0; background: rgba(255,255,255,.85); cursor: pointer; font-weight: 700; font-size: 11px; color: #111; }
.cv-swatch--btn button:hover { background: #fff; }

/* =====================================================================
 * 26. Fase 3 — conversiepagina-onderdelen
 * ================================================================== */

/* Storingzoeker volledige breedte (cv-storing) */
.cv-zoekblok--breed .cv-zoekblok__inner { display: block; }
.cv-zoekblok--breed .cv-zoekblok__tekst { max-width: 40rem; margin-bottom: 1.5rem; }
.cv-zoekblok--breed .cv-zoekblok__form { max-width: none; }

/* "Wat kunt u verwachten?" / "Wat bepaalt de prijs?" — rustige kaartjes */
.cv-verwachten__grid {
	display: grid; gap: 1rem; margin-top: 2rem;
	grid-template-columns: 1fr;
}
@media (min-width: 560px) { .cv-verwachten__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .cv-verwachten__grid { grid-template-columns: repeat(3, 1fr); } }
.cv-verwachten__item {
	background: #fff; border: 1px solid var(--cv-rand); border-radius: var(--cv-radius-kaart);
	box-shadow: var(--cv-schaduw-kaart); padding: 1.3rem 1.4rem;
}
.cv-verwachten__item h3 { font-size: 1.02rem; margin: 0 0 .35rem; color: var(--cv-donkerblauw); }
.cv-verwachten__item p { margin: 0; color: var(--cv-tekst-licht); font-size: .92rem; line-height: 1.55; }

/* Merken-tegels met logo */
.cv-merken-lijst li a { display: flex; align-items: center; justify-content: center; min-height: 44px; }
.cv-merken-lijst li img { max-height: 40px; width: auto; }
.cv-merken-overzicht__alle { margin-top: 1.75rem; }

/* Wanneer bellen (foutcode) */
.cv-wanneer-bellen__lijst { max-width: 40rem; }
.cv-wanneer-bellen__lijst li::before {
	background-color: #fff7ed; border-color: #fac89a;
	background-image: var(--cv-vink-glyph-oranje);
}

/* Niet zeker van uw code? — lichtblauwe box */
.cv-niet-zeker__box {
	background: var(--cv-lichtblauw); border: 1px solid #d5e6f2; border-radius: var(--cv-radius-kaart);
	padding: 1.75rem; display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between;
}
.cv-niet-zeker__box h2 { font-size: 1.3rem; margin: 0 0 .3rem; }
.cv-niet-zeker__box p { margin: 0; color: var(--cv-tekst-licht); }
.cv-niet-zeker__acties { display: flex; gap: .6rem; flex-wrap: wrap; }


/* Warmtepomp-adviesblok compacter */
.cv-warmtepomp-advies h2 { font-size: 1.4rem; }

/* =====================================================================
 * 27. Fase 4 — storing hub / merkpagina
 * ================================================================== */
.cv-merk-hero__logo {
	max-height: 52px; width: auto; margin-bottom: 1.1rem;
}
.cv-merk-hero .cv-hero__subtitel { margin-bottom: 0; }

/* Merkpagina-hero: tekst links, zoekkaart rechts */
.cv-merk-hero__inner { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .cv-merk-hero__inner { grid-template-columns: 1.1fr .9fr; } }
.cv-merk-hero__zoek {
	background: #fff; border: 1px solid var(--cv-rand); border-radius: var(--cv-radius-kaart);
	padding: 1.5rem 1.5rem 1.6rem; box-shadow: var(--cv-schaduw-kaart);
}
.cv-merk-hero__zoek-titel { font-weight: 700; font-size: 1.1rem; color: var(--cv-donkerblauw); margin: 0 0 .3rem; }
.cv-merk-hero__zoek-tekst { color: var(--cv-tekst-licht); font-size: .92rem; margin: 0 0 1rem; }
.cv-merk-hero__zoek .cv-storing-zoekbalk { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; flex-wrap: wrap; }
.cv-merk-hero__zoek .cv-storing-zoekbalk__veld { flex: 1 1 100%; }
.cv-merk-hero__zoek .cv-storing-zoekbalk button { flex: 1 1 100%; }

/* Vast-merk-zoekbalk: het merk als label vóór het invoerveld */
.cv-storing-zoekbalk--merk .cv-storing-zoekbalk__veld { align-items: stretch; }
.cv-storing-zoekbalk__merk {
	display: inline-flex; align-items: center; padding: 0 .8rem; flex: none;
	background: var(--cv-lichtblauw); border: 1px solid var(--cv-rand); border-right: 0;
	border-radius: var(--cv-radius) 0 0 var(--cv-radius); font-weight: 700; color: var(--cv-donkerblauw);
	font-size: .9rem; white-space: nowrap;
}
.cv-storing-zoekbalk--merk .cv-storing-zoekbalk__veld input { border-radius: 0 var(--cv-radius) var(--cv-radius) 0; }

/* Veelvoorkomende storingen per merk */
.cv-merk-vv__lijst {
	list-style: none; padding: 0; margin: 1.5rem 0 0;
	display: grid; gap: 12px; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cv-merk-vv__lijst { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .cv-merk-vv__lijst { grid-template-columns: 1fr 1fr 1fr; } }
.cv-merk-vv__lijst a {
	display: block; height: 100%; padding: 1rem 1.15rem;
	background: #fff; border: 1px solid var(--cv-rand); border-radius: var(--cv-radius); color: var(--cv-tekst);
}
.cv-merk-vv__lijst a:hover { border-color: var(--cv-blauw); text-decoration: none; }
.cv-merk-vv__lijst strong { display: block; color: var(--cv-donkerblauw); margin-bottom: .2rem; }
.cv-merk-vv__lijst span { font-size: .86rem; color: var(--cv-tekst-licht); }

.cv-paginering .page-numbers.dots { border: 0; background: none; }

/* Over ons — kerncijfers */
.cv-kerncijfers__lijst {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); text-align: center;
}
@media (min-width: 760px) { .cv-kerncijfers__lijst { grid-template-columns: repeat(4, 1fr); } }
.cv-kerncijfers__getal {
	display: block; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800;
	line-height: 1.1; color: #fff;
}
.cv-kerncijfers__label { display: block; margin-top: .4rem; font-size: .95rem; color: rgba(255,255,255,.8); }

/* Over ons — werkwijze: eigen achtergrondkleur zodat de sectie duidelijk
   afgebakend is van het "Over ons"-blok erboven. */
.cv-werkwijze { background: var(--cv-lichtblauw); }
.cv-werkwijze__grid {
	display: grid; gap: 1.75rem 2.5rem; margin-top: 2rem;
	grid-template-columns: 1fr;
}
@media (min-width: 720px) { .cv-werkwijze__grid { grid-template-columns: repeat(2, 1fr); } }
.cv-werkwijze__nr {
	display: inline-block; font-size: .85rem; font-weight: 700; letter-spacing: .06em;
	color: var(--cv-blauw); margin-bottom: .4rem;
}
.cv-werkwijze__item h3 { font-size: 1.1rem; margin: 0 0 .35rem; }
.cv-werkwijze__item p { margin: 0; color: var(--cv-tekst-licht); }

/* Projectfoto-galerij */
.cv-projectgalerij { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.cv-projectgalerij li { margin: 0; }
.cv-projectgalerij img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	border-radius: var(--cv-radius); border: 1px solid var(--cv-rand);
}

/* Volledige galerij (pagina Projecten) — raster */
.cv-projectgalerij--vol { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .cv-projectgalerij--vol { grid-template-columns: repeat(3, 1fr); } }
.cv-projectgalerij--vol li { aspect-ratio: 4 / 3; }

/* Strook = horizontale carousel met grote foto's */
.cv-projectstrip__kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cv-projectstrip__kop h2 { margin: 0; }
.cv-projectgalerij--carousel {
	display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px;
}
.cv-projectgalerij--carousel::-webkit-scrollbar { display: none; }
.cv-projectgalerij--carousel li {
	flex: 0 0 clamp(260px, 40vw, 380px); scroll-snap-align: start; aspect-ratio: 4 / 3;
}

.cv-carousel__nav { display: flex; gap: .5rem; }
.cv-carousel__knop {
	width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--cv-rand);
	background: #fff; color: var(--cv-donkerblauw); font-size: 1.1rem; cursor: pointer;
	display: flex; align-items: center; justify-content: center; line-height: 1;
}
.cv-carousel__knop:hover { border-color: var(--cv-blauw); color: var(--cv-blauw); }
.cv-carousel__knop:disabled { opacity: .35; cursor: default; }
@media (max-width: 600px) { .cv-carousel__nav { display: none; } }

.cv-projectstrip__meer { margin-top: 1.5rem; }

/* Veelgezochte codes — chips */
.cv-code-chips { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.cv-code-chips a {
	display: inline-block; padding: .5rem .9rem; background: #fff;
	border: 1px solid var(--cv-rand); border-radius: 999px;
	font-size: .9rem; font-weight: 600; color: var(--cv-donkerblauw);
}
.cv-code-chips a:hover { border-color: var(--cv-blauw); color: var(--cv-blauw); text-decoration: none; }

/* =====================================================================
 * 28. Cv-ketel keuzehulp (wizard op /cv-vervangen/)
 * ================================================================== */
.cv-keuzetool { margin: 1.5rem 0; }
.cv-keuzetool__kaart {
	background: #fff; border: 1px solid var(--cv-rand); border-radius: var(--cv-radius-kaart);
	box-shadow: var(--cv-schaduw-kaart); padding: 1.75rem; max-width: 40rem; margin: 0 auto;
}
.cv-keuzetool__voortgang { height: 6px; border-radius: 999px; background: var(--cv-grijs); overflow: hidden; }
.cv-keuzetool__balk { height: 100%; background: var(--cv-blauw); transition: width .25s ease; }
.cv-keuzetool__teller { font-size: .8rem; color: var(--cv-tekst-licht); margin: .7rem 0 0; text-transform: uppercase; letter-spacing: .04em; }
.cv-keuzetool__vraag { font-size: 1.3rem; margin: .4rem 0 .3rem; color: var(--cv-donkerblauw); }
.cv-keuzetool__uitleg { color: var(--cv-tekst-licht); margin: 0 0 1rem; font-size: .95rem; }
.cv-keuzetool__opties { display: grid; gap: .6rem; margin-top: 1rem; }
.cv-keuzetool__optie {
	display: flex; flex-direction: column; gap: .15rem; text-align: left; width: 100%;
	padding: .95rem 1.1rem; border: 1.5px solid var(--cv-rand); border-radius: var(--cv-radius);
	background: #fff; cursor: pointer; font: inherit; color: var(--cv-donkerblauw);
	transition: border-color .12s ease, background .12s ease;
}
.cv-keuzetool__optie:hover { border-color: var(--cv-blauw); background: var(--cv-lichtblauw); }
.cv-keuzetool__optie.is-gekozen { border-color: var(--cv-blauw); background: var(--cv-lichtblauw); }
.cv-keuzetool__optie-label { font-weight: 600; }
.cv-keuzetool__optie-sub { font-size: .85rem; color: var(--cv-tekst-licht); font-weight: 400; }
.cv-keuzetool__terug {
	margin-top: 1.1rem; background: none; border: 0; color: var(--cv-blauw);
	font: inherit; font-weight: 600; cursor: pointer; padding: .3rem 0;
}
.cv-keuzetool__terug:hover { text-decoration: underline; }

.cv-keuzetool__laden { text-align: center; padding: 3rem 1rem; color: var(--cv-tekst-licht); }
.cv-keuzetool__spinner {
	display: inline-block; width: 34px; height: 34px; margin-bottom: 1rem;
	border: 3px solid var(--cv-rand); border-top-color: var(--cv-blauw); border-radius: 999px;
	animation: cv-kt-spin .8s linear infinite;
}
@keyframes cv-kt-spin { to { transform: rotate(360deg); } }

.cv-keuzetool__resultaatkop { text-align: center; max-width: 42rem; margin: 0 auto 1.5rem; }
.cv-keuzetool__resultaatkop h3 { font-size: 1.5rem; margin: 0 0 .4rem; }
.cv-keuzetool__resultaatkop p { color: var(--cv-tekst-licht); margin: 0; }
.cv-keuzetool__resultaten { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .cv-keuzetool__resultaten { grid-template-columns: repeat(3, 1fr); align-items: start; } }
/* Minder dan drie kaarten: niet links in een raster met lege kolommen, maar gecentreerd. */
@media (min-width: 820px) {
	.cv-keuzetool__resultaten--2 { grid-template-columns: repeat(2, 1fr); max-width: 52rem; margin-inline: auto; }
	.cv-keuzetool__resultaten--1 { grid-template-columns: minmax(0, 26rem); justify-content: center; }
}
.cv-keuzetool__resultaat {
	background: #fff; border: 1px solid var(--cv-rand); border-radius: var(--cv-radius-kaart);
	box-shadow: var(--cv-schaduw-kaart); padding: 1.4rem; display: flex; flex-direction: column;
}
.cv-keuzetool__resultaat.is-aanbevolen { border-color: var(--cv-blauw); box-shadow: var(--cv-schaduw-hover); }
.cv-keuzetool__badge {
	align-self: flex-start; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	padding: .25em .7em; border-radius: 999px; background: var(--cv-grijs); color: var(--cv-donkerblauw);
}
.cv-keuzetool__resultaat.is-aanbevolen .cv-keuzetool__badge { background: var(--cv-blauw); color: #fff; }
.cv-keuzetool__resultaat-sub { font-size: .82rem; color: var(--cv-tekst-licht); margin: .5rem 0 0; }
.cv-keuzetool__resultaat-merk { font-weight: 700; color: var(--cv-blauw); margin: .8rem 0 .1rem; text-transform: uppercase; font-size: .8rem; letter-spacing: .03em; }
.cv-keuzetool__resultaat-titel { font-size: 1.1rem; margin: 0 0 .5rem; color: var(--cv-donkerblauw); }
.cv-keuzetool__prijsklasse { margin: 0 0 .8rem; font-size: .85rem; color: var(--cv-tekst-licht); }
.cv-keuzetool__prijsklasse strong { color: var(--cv-donkerblauw); font-size: 1rem; }
.cv-keuzetool__specs { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .3rem; }
.cv-keuzetool__specs li { position: relative; padding-left: 1.4rem; font-size: .9rem; color: var(--cv-tekst); }
.cv-keuzetool__specs li::before { content: ""; position: absolute; left: 0; top: .35em; width: .85rem; height: .85rem; background: var(--cv-vink-glyph, none) center/contain no-repeat; }
.cv-keuzetool__reden { font-size: .88rem; color: var(--cv-tekst-licht); margin: 0 0 .5rem; }
.cv-keuzetool__ook-als { font-size: .8rem; color: var(--cv-tekst-licht); margin: .2rem 0 .6rem; font-style: italic; }
.cv-keuzetool__offerte { margin-top: auto; width: 100%; }
.cv-keuzetool__disclaimer { font-size: .82rem; color: var(--cv-tekst-licht); max-width: 42rem; margin: 1.5rem auto 0; text-align: center; }
.cv-keuzetool__slotadvies {
	max-width: 34rem; margin: 1.75rem auto 0; padding: .9rem 1.2rem; text-align: center;
	background: var(--cv-lichtgroen); border: 1px solid #cfe6d0; border-radius: var(--cv-radius);
	font-weight: 600; color: var(--cv-donkerblauw); font-size: .92rem;
}

.cv-keuzetool__persoonlijk {
	background: #fff; border: 1px solid var(--cv-rand); border-radius: var(--cv-radius-kaart);
	box-shadow: var(--cv-schaduw-kaart); padding: 1.75rem; max-width: 40rem; margin: 0 auto; text-align: center;
}
.cv-keuzetool__persoonlijk h3 { margin: 0 0 .5rem; }
.cv-keuzetool__persoonlijk p { color: var(--cv-tekst-licht); margin: 0 0 1.2rem; }
.cv-keuzetool__acties { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.5rem; }
.cv-keuzetool__opnieuw {
	background: none; border: 1px solid var(--cv-rand); border-radius: 999px; padding: .6rem 1.2rem;
	font: inherit; font-weight: 600; color: var(--cv-donkerblauw); cursor: pointer;
}
.cv-keuzetool__opnieuw:hover { border-color: var(--cv-blauw); color: var(--cv-blauw); }
.cv-keuzetool__fout { text-align: center; color: var(--cv-oranje-donker); font-weight: 600; }

/* Read-only "Gewenste ketel"-veld in het GF-formulier */
.cv-gf-ketel input[readonly], .cv-gf-ketel input:read-only {
	background: var(--cv-grijs); color: var(--cv-donkerblauw); font-weight: 600; border-style: dashed;
}
.cv-keuzetool-sectie {
	margin: 2.5rem 0; padding: 2.5rem 1.75rem;
	background: linear-gradient(180deg, var(--cv-lichtblauw), #fff 55%);
	border: 1px solid var(--cv-rand); border-radius: var(--cv-radius-kaart);
}
.cv-keuzetool-sectie__kop { text-align: center; max-width: 44rem; margin: 0 auto 2rem; }
.cv-keuzetool-sectie__eyebrow {
	display: inline-block; margin: 0 0 .6rem; padding: .3em .9em; border-radius: 999px;
	background: var(--cv-blauw); color: #fff; font-weight: 700; font-size: .78rem;
	text-transform: uppercase; letter-spacing: .06em;
}
.cv-keuzetool-sectie__titel { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 0 0 .5rem; }
.cv-keuzetool-sectie__intro { color: var(--cv-tekst-licht); margin: 0 auto; }
@media (max-width: 599px) {
	.cv-keuzetool-sectie { padding: 1.75rem 1.1rem; }
}

/* =====================================================================
 * 29. Chat-vraagbaak
 * ================================================================== */
/* z-index altijd hoger dan de mobiele menu-overlay (95) en sticky header (96),
   anders kan de chat niet meer gesloten worden terwijl het menu openstaat. */
.cv-chat { position: fixed; right: 20px; bottom: 20px; z-index: 120; }
.cv-chat[hidden] { display: none !important; }
.cv-chat__paneel[hidden] { display: none !important; }
.cv-chat__peek[hidden] { display: none !important; }

/* Gesloten knop */
.cv-chat__knop {
	position: relative;
	display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
	border: 0; border-radius: 999px; padding: .85rem 1.35rem;
	background: var(--cv-donkerblauw); color: #fff; font: inherit; font-weight: 700; font-size: .95rem;
	box-shadow: 0 10px 28px rgba(11, 49, 88, .3);
}
.cv-chat__knop:hover { background: #0e3a68; }
.cv-chat__knop-icoon {
	width: 20px; height: 20px; flex: none; background: currentColor;
	-webkit-mask: var(--cv-chat-glyph) center/contain no-repeat; mask: var(--cv-chat-glyph) center/contain no-repeat;
}
.cv-chat__knop.is-open { display: none; }
.cv-chat__pulse {
	position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 999px;
	background: var(--cv-groen); box-shadow: 0 0 0 3px var(--cv-donkerblauw);
}
.cv-chat__pulse::after {
	content: ""; position: absolute; inset: 0; border-radius: 999px;
	background: var(--cv-groen); animation: cv-chat-pulse 2s ease-out infinite;
}
@keyframes cv-chat-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cv-chat__pulse::after { animation: none; } }

/* Tekstballon naast de knop */
.cv-chat__peek {
	position: absolute; right: 0; bottom: calc(100% + 10px); width: max-content; max-width: 220px;
	background: #fff; color: var(--cv-donkerblauw); border: 1px solid var(--cv-rand);
	border-radius: 14px 14px 4px 14px; box-shadow: var(--cv-schaduw-hover);
	padding: .6rem 2rem .6rem .85rem; font-size: .88rem; font-weight: 600; line-height: 1.4;
	animation: cv-chat-in .2s ease-out;
}
.cv-chat__peek button {
	position: absolute; top: .2rem; right: .3rem; background: none; border: 0; font-size: 1.1rem;
	line-height: 1; color: var(--cv-tekst-licht); cursor: pointer;
}
@keyframes cv-chat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Paneel */
.cv-chat__paneel {
	position: absolute; right: 0; bottom: 0;
	width: min(384px, calc(100vw - 32px)); height: min(580px, calc(100vh - 110px));
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--cv-rand); border-radius: var(--cv-radius-kaart);
	box-shadow: 0 20px 52px rgba(11, 49, 88, .3); overflow: hidden;
}
.cv-chat__kop {
	display: flex; align-items: center; gap: .7rem;
	padding: .85rem 1rem; background: var(--cv-donkerblauw); color: #fff;
}
.cv-chat__avatar { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; flex: none; background: rgba(255,255,255,.15); }
.cv-chat__avatar--icoon { position: relative; }
.cv-chat__avatar--icoon::after {
	content: ""; position: absolute; inset: 9px; background: #fff;
	-webkit-mask: var(--cv-chat-glyph) center/contain no-repeat; mask: var(--cv-chat-glyph) center/contain no-repeat;
}
.cv-chat__kop-tekst { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.cv-chat__kop-naam { font-weight: 700; font-size: .98rem; }
.cv-chat__kop-sub { font-size: .78rem; opacity: .85; display: flex; align-items: center; gap: .35rem; }
.cv-chat__online { width: 7px; height: 7px; border-radius: 999px; background: var(--cv-groen); flex: none; }
.cv-chat__sluit { background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .1rem; }

.cv-chat__lijst { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; background: var(--cv-grijs); }
.cv-chat__bericht { display: flex; align-items: flex-end; gap: .4rem; }
.cv-chat__bericht.is-gebruiker { justify-content: flex-end; }
.cv-chat__bericht-avatar { width: 24px; height: 24px; border-radius: 999px; object-fit: cover; flex: none; }
.cv-chat__ballon {
	max-width: 82%; padding: .6rem .85rem; border-radius: 14px; font-size: .92rem; line-height: 1.5;
	background: #fff; border: 1px solid var(--cv-rand); color: var(--cv-tekst);
}
.cv-chat__ballon p { margin: 0; }
.cv-chat__ballon p + p { margin-top: .5rem; }
.cv-chat__bericht.is-gebruiker .cv-chat__ballon { background: var(--cv-blauw); border-color: var(--cv-blauw); color: #fff; }

.cv-chat__kaart { margin-top: .55rem; padding: .7rem .8rem; border: 1px solid var(--cv-rand); border-radius: 10px; background: var(--cv-lichtblauw); }
.cv-chat__kaart strong { display: block; color: var(--cv-donkerblauw); }
.cv-chat__kaart p { margin: .3rem 0 0; font-size: .88rem; }
.cv-chat__kaart-zelf { color: var(--cv-tekst-licht); }
.cv-chat__kaart-link { display: inline-block; margin-top: .5rem; font-weight: 600; font-size: .88rem; }

/* Alleen zichtbaar op mobiel (zie media query onderaan) — op desktop wrapt de
   rij gewoon, daar is niets te scrollen. */
.cv-chat__replies-nav { display: none; }
.cv-chat__replies { display: flex; flex-wrap: wrap; gap: .45rem; padding: .55rem 1rem .65rem; background: var(--cv-grijs); }
.cv-chat__reply {
	display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
	border: 1.5px solid var(--cv-blauw); color: var(--cv-blauw); background: #fff;
	border-radius: 999px; padding: .42rem .9rem; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.cv-chat__reply:hover { background: var(--cv-lichtblauw); }
.cv-chat__reply-icoon {
	width: 15px; height: 15px; flex: none; background: currentColor;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-size: contain; mask-size: contain;
}
.cv-chat__reply-icoon--bel { -webkit-mask-image: var(--cv-icon-bel); mask-image: var(--cv-icon-bel); }
.cv-chat__reply-icoon--wa { -webkit-mask-image: var(--cv-wa-glyph); mask-image: var(--cv-wa-glyph); }
.cv-chat__reply-icoon--afspraak { -webkit-mask-image: var(--cv-icon-afspraak); mask-image: var(--cv-icon-afspraak); }
.cv-chat__reply-icoon--storing { -webkit-mask-image: var(--cv-icon-storing); mask-image: var(--cv-icon-storing); }
.cv-chat__reply-icoon--vervangen { -webkit-mask-image: var(--cv-icon-vervangen); mask-image: var(--cv-icon-vervangen); }
.cv-chat__reply-icoon--onderhoud { -webkit-mask-image: var(--cv-chat-glyph); mask-image: var(--cv-chat-glyph); }
.cv-chat__reply-icoon--diensten { -webkit-mask-image: var(--cv-icon-plus); mask-image: var(--cv-icon-plus); }
.cv-chat__reply-icoon--waarschuwing { -webkit-mask-image: var(--cv-icon-waarschuwing); mask-image: var(--cv-icon-waarschuwing); }
.cv-chat__reply-icoon--mail { -webkit-mask-image: var(--cv-icon-mail); mask-image: var(--cv-icon-mail); }

/* Kleurvarianten — de gewenste vervolgstap moet opvallen. */
.cv-chat__reply--oranje { border-color: var(--cv-oranje); color: #fff; background: var(--cv-oranje); }
.cv-chat__reply--oranje:hover { background: var(--cv-oranje-donker); }
.cv-chat__reply--blauw { border-color: var(--cv-blauw); color: #fff; background: var(--cv-blauw); }
.cv-chat__reply--blauw:hover { background: var(--cv-blauw-donker); }
.cv-chat__reply--groen { border-color: var(--cv-groen-btn); color: #fff; background: var(--cv-groen-btn); }
.cv-chat__reply--groen:hover { filter: brightness(.92); }
.cv-chat__reply--rood { border-color: #c0392b; color: #fff; background: #c0392b; }
.cv-chat__reply--rood:hover { background: #a93226; }
.cv-chat__reply--donkerblauw { border-color: var(--cv-donkerblauw); color: #fff; background: var(--cv-donkerblauw); }
.cv-chat__reply--donkerblauw:hover { filter: brightness(1.15); }
/* achterwaarts compatibel */
.cv-chat__reply--actie { border-color: var(--cv-oranje); color: #fff; background: var(--cv-oranje); }
.cv-chat__reply--actie:hover { background: var(--cv-oranje-donker); }

.cv-chat__invoer { display: flex; gap: .4rem; padding: .7rem; border-top: 1px solid var(--cv-rand); background: #fff; }
.cv-chat__invoer input[name="bericht"] {
	flex: 1; border: 1px solid var(--cv-rand); border-radius: 999px; padding: .55rem .9rem; font: inherit; font-size: .92rem;
}
.cv-chat__invoer button[type="submit"] {
	flex: none; width: 40px; border: 0; border-radius: 999px; background: var(--cv-oranje); color: #fff; font-size: 1rem; cursor: pointer;
}
.cv-chat__invoer button[type="submit"]:hover { background: var(--cv-oranje-donker); }
.cv-chat__hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }

.cv-chat__typen .cv-chat__ballon { display: flex; gap: 4px; }
.cv-chat__typen span { width: 7px; height: 7px; border-radius: 999px; background: var(--cv-tekst-licht); animation: cv-chat-bounce 1s infinite; }
.cv-chat__typen span:nth-child(2) { animation-delay: .15s; }
.cv-chat__typen span:nth-child(3) { animation-delay: .3s; }
@keyframes cv-chat-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* =====================================================================
 * 30. Cookie Consent-widget (losse plugin) — huisstijlkleur + op mobiel
 *     dezelfde ruimte voor de sticky bel/formulier-balk als het chat-icoon.
 * ================================================================== */
.ccc-reopen {
	--ccc-btn-primary-bg: var(--cv-oranje);
	background: var(--cv-oranje);
}
@media (max-width: 768px) {
	.ccc-reopen {
		left: 14px; bottom: 108px; width: 42px; height: 42px; font-size: 18px;
		transition: bottom .22s ease;
	}
	body.cv-mobiele-cta-verborgen .ccc-reopen { bottom: 20px; }
}

@media (max-width: 768px) {
	.cv-chat { right: 12px; bottom: 108px; transition: bottom .22s ease; }
	/* Zolang de sticky bel-balk (nog) niet zichtbaar is (bovenaan de pagina, zie
	   .cv-mobiele-cta--verborgen in main.js) hoeft de chatknop er niet boven te
	   zweven en mag hij gewoon laag zitten. */
	body.cv-mobiele-cta-verborgen .cv-chat { bottom: 20px; }
	.cv-chat__paneel { height: min(72vh, 540px); }
	.cv-chat__knop-tekst { display: none; }
	.cv-chat__knop { padding: .9rem; }
	.cv-chat__peek { max-width: 180px; }
	/* Vaste keuzes als één swipebare rij i.p.v. uitwaaierend over meerdere regels —
	   dat laatste duwde de berichtenlijst erboven bijna helemaal uit beeld zodra er
	   een paar pills bij kwamen. */
	.cv-chat__replies {
		flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}
	.cv-chat__reply { flex: none; white-space: nowrap; scroll-snap-align: start; }
	/* Pijltjes boven de rij, zodat meteen duidelijk is dat er meer keuzes zijn
	   dan wat er nu in beeld staat — swipen alleen is niet altijd voor de hand
	   liggend. */
	.cv-chat__replies-nav {
		display: flex; justify-content: flex-end; gap: .4rem;
		padding: .5rem 1rem 0; background: var(--cv-grijs);
	}
	.cv-chat__replies-pijl {
		width: 26px; height: 26px; border-radius: 999px; flex: none;
		border: 1.5px solid var(--cv-rand-donker); background: #fff; color: var(--cv-donkerblauw);
		font-size: .85rem; line-height: 1; cursor: pointer;
	}
	.cv-chat__replies-pijl:disabled { opacity: .35; cursor: default; }
}

/* De cookie-plugin's eigen herstelknop (linksonder, hoge z-index) mag niet over
   het geopende chatpaneel heen blijven staan — zolang de chat open is, verbergen
   we 'm (zie body.cv-chat-open, geregeld in chat.js). */
body.cv-chat-open .ccc-reopen { display: none; }