/*
* CV Chauffagist (Vlaanderen) — hoofdstylesheet. Zelfde designsysteem als de NL-variant.
* 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 */
--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); 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); border-color: var(--cv-groen); color: #fff; }
.cv-btn--whatsapp:hover { background: #3d9142; border-color: #3d9142; 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-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; }
}
.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; }
/* "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 20px;
border-top: 1px solid var(--cv-rand); background-color: var(--cv-lichtblauw);
}
.cv-site-header__reviews-strook .cv-trustindex { display: inline-flex; }
/* 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 10px !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 (die gaf op sommige toestellen een
submenu dat maar half zo breed als het menu werd) — de 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; gap: .85rem; 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; }
.cv-site-header__nav .cv-menu > li > a::before {
content: ""; width: 21px; height: 21px; flex: none; background: var(--cv-donkerblauw); opacity: .8;
-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--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 , 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
die focus krijgt triggert :focus-within op de , 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: block; white-space: normal; }
.cv-site-header__nav .cv-menu .menu-item-has-children.is-open > .sub-menu { display: block; }
/* Los overheen (position:absolute t.o.v. de ) 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. */
.cv-site-header__nav .cv-submenu-toggle {
display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 48px;
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);
}
.cv-site-header__nav .cv-menu .is-open > .cv-submenu-toggle::before { transform: rotate(-135deg); margin-top: -3px; }
.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;
}
.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; }
}
@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 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);
}
@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; }
/* =====================================================================
* 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; }
}
.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); }
/* =====================================================================
* 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;
}
/* =====================================================================
* 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; }
.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; }
/* =====================================================================
* 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 { 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: flex-start; gap: .35rem; }
.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;
}
.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. */
.cv-site-footer { padding-bottom: 88px; }
}
/* 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; }
@media (min-width: 768px) {
.cv-alleen-mobiel { display: none !important; }
.cv-alleen-desktop { display: inline-flex; }
}
/* =====================================================================
* 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
* ================================================================== */
/* "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; }
/* =====================================================================
* 27. Over ons — kerncijfers, werkwijze, projectgalerij
* ================================================================== */
/* 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; }
/* =====================================================================
* 30. Cookie Consent-widget (losse plugin) — huisstijlkleur + op mobiel
* boven de sticky bel-balk, zodat die elkaar nooit overlappen.
* ================================================================== */
.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; }
}
/* =====================================================================
* 31. Vlaamse SEA-variant — nieuwe componenten
* (hulpkeuze, formulieren, storingssectie, onderhoudsregels, advieswizard,
* werkgebied). Zelfde tokens, kaarten en knoppen als de rest van de site.
* ================================================================== */
/* Het hidden-attribuut moet altijd winnen van display-regels (knoppen zijn inline-flex,
wizardstappen/meldingen worden via JS verborgen). */
.cv-lead-form [hidden], .cv-lead-form[hidden], .cv-lead-form__bedankt[hidden], .cv-wizard [hidden] { display: none !important; }
/* Derde, subtiele CTA onder de hero-knoppen (bijv. "WhatsApp" of "Probleem doorgeven") */
.cv-hero__cta-subtiel { margin: .85rem 0 0; }
.cv-cta-subtiel {
display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
font-weight: 600; color: var(--cv-blauw); text-decoration: underline; text-underline-offset: 3px;
}
.cv-cta-subtiel:hover { color: var(--cv-blauw-donker); }
.cv-btn--whatsapp-outline .cv-wa-icoon { background-color: var(--cv-groen); }
@media (max-width: 519px) {
.cv-hero__cta-subtiel { text-align: center; }
}
/* ---------- Hulpkeuze: "Waarmee kunnen wij u helpen?" ---------- */
.cv-hulpkeuze { background: var(--cv-wit); }
.cv-hulpkeuze__lijst {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 12px; grid-template-columns: 1fr;
}
@media (min-width: 560px) { .cv-hulpkeuze__lijst { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .cv-hulpkeuze__lijst { grid-template-columns: repeat(4, 1fr); } }
.cv-hulpkeuze__knop {
display: flex; align-items: center; gap: .8rem; min-height: 60px; height: 100%;
padding: .95rem 1.1rem; background: #fff; color: var(--cv-donkerblauw);
border: 1px solid var(--cv-rand); border-radius: var(--cv-radius-kaart); box-shadow: var(--cv-schaduw-kaart);
font-weight: 650; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cv-hulpkeuze__knop:hover { border-color: var(--cv-blauw); box-shadow: var(--cv-schaduw-hover); transform: translateY(-1px); text-decoration: none; }
.cv-hulpkeuze__icoon {
flex: none; width: 42px; height: 42px; padding: 8px; border-radius: 10px;
background: var(--cv-lichtblauw); color: var(--cv-blauw);
}
.cv-hulpkeuze__label { flex: 1; line-height: 1.3; }
.cv-hulpkeuze__pijl { color: var(--cv-blauw); font-weight: 700; }
/* Mobiel: compacte 2-koloms tegels (icoon boven label) i.p.v. zeven lange rijen. */
@media (max-width: 559px) {
.cv-hulpkeuze__lijst { grid-template-columns: 1fr 1fr; gap: 10px; }
.cv-hulpkeuze__knop { flex-direction: column; align-items: flex-start; gap: .55rem; padding: .85rem .9rem; font-size: .95rem; }
.cv-hulpkeuze__icoon { width: 38px; height: 38px; padding: 7px; }
.cv-hulpkeuze__pijl { display: none; }
}
/* ---------- Formuliersectie: tekst + acties links, formulierkaart rechts ---------- */
.cv-formsectie { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .cv-formsectie { grid-template-columns: 1fr 1.05fr; gap: 3rem; } }
.cv-formsectie--zonder-form { grid-template-columns: 1fr; max-width: 52rem; }
.cv-formsectie__tekst h2 { margin-bottom: .5rem; }
.cv-formsectie__tekst > p { color: var(--cv-tekst-licht); }
.cv-formsectie__punten { margin: 1.1rem 0 1.5rem; font-size: .95rem; }
.cv-formsectie__acties { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
@media (max-width: 519px) {
.cv-formsectie__acties .cv-btn { width: 100%; }
}
.cv-formkaart__titel { font-weight: 700; font-size: 1.15rem; color: var(--cv-donkerblauw); margin: 0 0 1rem; }
@media (max-width: 599px) {
.cv-formkaart { padding: 1.25rem; }
}
/* ---------- Formuliervelden (eigen formulieren, zelfde look als voorheen Gravity Forms) ---------- */
.cv-lead-form__velden { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) {
.cv-lead-form__velden { grid-template-columns: 1fr 1fr; }
.cv-veld--breed, .cv-veld--textarea, .cv-veld--file { grid-column: 1 / -1; }
}
.cv-veld { display: flex; flex-direction: column; min-width: 0; }
.cv-veld label { display: block; font-weight: 600; font-size: .92rem; color: var(--cv-donkerblauw); margin-bottom: .35rem; }
.cv-veld__verplicht { color: var(--cv-oranje-donker); margin-left: .15em; }
.cv-veld input[type="text"],
.cv-veld input[type="tel"],
.cv-veld input[type="email"],
.cv-veld select,
.cv-veld textarea {
width: 100%; min-height: 50px; font: inherit; font-size: 1rem;
padding: .75em .9em; border: 1px solid var(--cv-rand-donker); border-radius: var(--cv-radius);
background: #fff; color: var(--cv-tekst); line-height: 1.4;
-webkit-appearance: none; appearance: none;
}
.cv-veld select {
padding-right: 2.4em; cursor: pointer;
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");
background-repeat: no-repeat; background-position: right .8em center; background-size: 1.05em;
}
.cv-veld textarea { min-height: 96px; resize: vertical; }
.cv-veld input:focus, .cv-veld select:focus, .cv-veld textarea:focus {
border-color: var(--cv-blauw); outline: 2px solid color-mix(in srgb, var(--cv-blauw) 30%, transparent); outline-offset: 1px;
}
.cv-veld input[type="file"] {
width: 100%; font: inherit; font-size: .92rem; padding: .7rem; min-height: 50px;
border: 1.5px dashed var(--cv-rand-donker); border-radius: var(--cv-radius); background: var(--cv-grijs); cursor: pointer;
}
.cv-veld input[type="file"]::file-selector-button {
font: inherit; font-weight: 600; margin-right: .8rem; padding: .5rem .9rem; cursor: pointer;
border: 1px solid var(--cv-rand-donker); border-radius: 8px; background: #fff; color: var(--cv-donkerblauw);
}
.cv-veld__hulp { display: block; margin-top: .35rem; font-size: .84rem; color: var(--cv-tekst-licht); }
.cv-veld.is-fout input, .cv-veld.is-fout select, .cv-veld.is-fout textarea { border-color: #b3261e; }
.cv-veld__fout { margin: .35rem 0 0; font-size: .86rem; font-weight: 600; color: #b3261e; }
.cv-veld__fout::before { content: "! "; }
.cv-lead-form__knop { width: 100%; margin-top: 1.25rem; min-height: 54px; }
.cv-lead-form__knop[disabled] { opacity: .7; cursor: progress; }
.cv-lead-form__privacy { margin: .7rem 0 0; font-size: .84rem; color: var(--cv-tekst-licht); text-align: center; }
.cv-lead-form__melding { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: var(--cv-radius); font-weight: 600; font-size: .92rem; }
.cv-lead-form__melding.is-fout { background: #fdecea; border: 1px solid #f3c2bd; color: #8c1d18; }
.cv-lead-form__melding.is-ok { background: var(--cv-lichtgroen); border: 1px solid #cfe6d0; color: #2f6b33; margin: 0 0 1rem; }
.cv-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cv-lead-form__bedankt { text-align: center; padding: 1rem .5rem; outline: 0; }
.cv-lead-form__bedankt .cv-bedankt__vink { margin: 0 auto 1rem; display: flex; }
.cv-lead-form__bedankt-titel { font-weight: 700; font-size: 1.2rem; color: var(--cv-donkerblauw); margin: 0 0 .4rem; }
.cv-lead-form__bedankt p { color: var(--cv-tekst-licht); }
.cv-bedankt__belofte { font-weight: 700; color: var(--cv-groen); margin: .8rem 0 0; }
/* ---------- Onderhoudsblok: Vlaamse onderhoudsregels ---------- */
.cv-onderhoudsregels {
margin: 1.5rem 0; padding: 1.25rem 1.35rem;
background: var(--cv-lichtblauw); border: 1px solid #d5e6f2; border-radius: var(--cv-radius-kaart);
}
.cv-onderhoudsregels__kop { font-weight: 650; color: var(--cv-donkerblauw); margin: 0 0 .75rem; }
.cv-onderhoudsregels__lijst { margin: 0; display: grid; gap: .5rem; }
.cv-onderhoudsregels__lijst div {
display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
padding: .55rem .8rem; background: #fff; border-radius: 8px; border: 1px solid #dbe8f2;
}
.cv-onderhoudsregels__lijst dt { font-weight: 600; margin: 0; }
.cv-onderhoudsregels__lijst dd { margin: 0; font-weight: 700; color: var(--cv-blauw); white-space: nowrap; }
.cv-onderhoudsregels__noot { margin: .85rem 0 0; font-size: .9rem; color: var(--cv-tekst-licht); }
.cv-onderhoud-prijzen { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.cv-onderhoud-prijzen li {
display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
padding: .7rem 0; border-bottom: 1px solid var(--cv-rand);
}
.cv-onderhoud-prijzen strong { color: var(--cv-donkerblauw); }
/* ---------- Advieswizard (vervanging) ---------- */
.cv-advies__kop { text-align: center; max-width: 44rem; margin: 0 auto 1.75rem; }
.cv-advies__kop p { color: var(--cv-tekst-licht); margin: 0; }
.cv-advies__eyebrow {
display: inline-block; margin: 0 0 .6rem !important; padding: .3em .9em; border-radius: 999px;
background: var(--cv-blauw); color: #fff !important; font-weight: 700; font-size: .78rem;
text-transform: uppercase; letter-spacing: .06em;
}
.cv-advies__kaart { max-width: 44rem; margin: 0 auto; }
.cv-advies__bel { text-align: center; margin: 1.25rem 0 0; color: var(--cv-tekst-licht); }
.cv-wizard__kop { margin-bottom: 1.1rem; }
.cv-wizard__voortgang { height: 6px; border-radius: 999px; background: var(--cv-grijs); overflow: hidden; }
.cv-wizard__balk { display: block; height: 100%; width: 0; background: var(--cv-blauw); transition: width .25s ease; }
.cv-wizard__teller { font-size: .8rem; color: var(--cv-tekst-licht); margin: .6rem 0 0; text-transform: uppercase; letter-spacing: .04em; }
.cv-wizard__stap { border: 0; margin: 0 0 1.5rem; padding: 0; min-width: 0; }
.cv-wizard.is-actief .cv-wizard__stap { margin-bottom: 0; }
.cv-wizard__vraag { font-size: 1.2rem; font-weight: 700; color: var(--cv-donkerblauw); margin: 0 0 1rem; padding: 0; line-height: 1.3; }
.cv-wizard__nr { display: block; font-size: .78rem; font-weight: 700; color: var(--cv-blauw); letter-spacing: .04em; margin-bottom: .2rem; }
.cv-wizard.is-actief .cv-wizard__nr { display: none; }
.cv-wizard__opties { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 520px) { .cv-wizard__opties { grid-template-columns: 1fr 1fr; } }
.cv-wizard__opties--raster { grid-template-columns: repeat(5, 1fr) !important; }
.cv-wizard__optie { position: relative; display: block; cursor: pointer; }
.cv-wizard__optie input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cv-wizard__optie span {
display: flex; align-items: center; min-height: 54px; height: 100%;
padding: .8rem 1rem; border: 1.5px solid var(--cv-rand); border-radius: var(--cv-radius);
background: #fff; color: var(--cv-donkerblauw); font-weight: 600; line-height: 1.3;
transition: border-color .12s ease, background .12s ease;
}
.cv-wizard__opties--raster .cv-wizard__optie span { justify-content: center; font-size: 1.1rem; }
.cv-wizard__optie:hover span { border-color: var(--cv-blauw); background: var(--cv-lichtblauw); }
.cv-wizard__optie input:checked + span { border-color: var(--cv-blauw); background: var(--cv-lichtblauw); box-shadow: inset 0 0 0 1px var(--cv-blauw); }
.cv-wizard__optie input:focus-visible + span { outline: var(--cv-focus); outline-offset: 2px; }
.cv-wizard__volgende { margin-top: 1rem; width: 100%; }
.cv-wizard__terug {
margin-top: 1rem; min-height: 44px; background: none; border: 0; color: var(--cv-blauw);
font: inherit; font-weight: 600; cursor: pointer; padding: .3rem 0;
}
.cv-wizard__terug:hover { text-decoration: underline; }
.cv-wizard__resultaat {
margin: 0 0 1.25rem; padding: 1rem 1.15rem;
background: var(--cv-lichtgroen); border: 1px solid #cfe6d0; border-radius: var(--cv-radius);
}
.cv-wizard__resultaat-titel { font-weight: 700; color: var(--cv-donkerblauw); margin: 0 0 .3rem; }
.cv-wizard__resultaat p:last-child { margin: 0; color: var(--cv-tekst); font-size: .95rem; }
/* ---------- Dienst-items, tarieven, werkgebied, merken ---------- */
.cv-dienst-items__lijst { margin-top: 1rem; }
@media (min-width: 720px) { .cv-dienst-items__lijst { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.cv-verwachten__prijs { font-weight: 700; color: var(--cv-donkerblauw) !important; font-size: 1.05rem !important; margin: 0 0 .3rem !important; }
.cv-werkgebied { background: var(--cv-lichtgroen); }
.cv-werkgebied__inner { display: flex; gap: 1.1rem; align-items: flex-start; }
.cv-werkgebied__icoon { flex: none; color: var(--cv-donkerblauw); margin-top: .2rem; }
@media (max-width: 559px) { .cv-werkgebied__icoon { display: none; } }
.cv-werkgebied h2 { margin-bottom: .35rem; }
.cv-werkgebied p { color: var(--cv-tekst-licht); margin: 0; }
.cv-werkgebied__lijst { list-style: none; padding: 0; margin: .9rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.cv-werkgebied__lijst li {
padding: .35rem .8rem; background: #fff; border: 1px solid var(--cv-rand); border-radius: 999px;
font-size: .9rem; font-weight: 600; color: var(--cv-donkerblauw);
}
.cv-merkenstrip > .cv-container > h2 + p { margin-left: auto; margin-right: auto; }
/* Werkwijze is nu een genummerde (4 stappen) */
ol.cv-werkwijze__grid { list-style: none; margin: 1.75rem 0 0; padding: 0; }
@media (min-width: 1000px) { ol.cv-werkwijze__grid { grid-template-columns: repeat(4, 1fr); } }
/* Sticky balk: altijd ruime touch targets; donkere tweede knop */
.cv-mobiele-cta__knoppen a { min-height: 50px; }
.cv-mobiele-cta__knoppen .cv-btn--donker { box-shadow: 0 4px 14px rgba(11, 49, 88, .3); }
@media (max-width: 380px) {
.cv-mobiele-cta__knoppen a { font-size: .95rem; padding-left: .3em; padding-right: .3em; }
}
/* Ankers onder de sticky header niet laten wegvallen */
#cv-probleem, #cv-onderhoud, #cv-advies, #cv-contactformulier, #cv-hulpkeuze { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: reduce) {
.cv-hulpkeuze__knop, .cv-wizard__balk, .cv-wizard__optie span { transition: none; }
html { scroll-behavior: auto; }
}