/* Aircobrabant – site.css
   Eén stylesheet. Huisstijl als tokens bovenaan; daaronder basis, onderdelen, pagina's. */

/* ---------- Lettertypes (lokaal, variabel, alleen latin) ---------- */
@font-face { font-family: "Sora"; src: url("../fonts/sora.woff2") format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
	--blauw: #00558e;
	--blauw-licht: #3093d6;
	--blauw-zacht: #e8f2fa;
	--tekst: #0b1220;
	--tekst-licht: #4a5366;
	--rood: #eb302d;
	--rood-donker: #c9221f;
	--groen: #16a34a;
	--geel: #f8cb4f;
	--wit: #fff;
	--achtergrond: #f8f9fc;
	--lijn: #e3e7ef;
	--donker: #0b1220;

	--font-kop: "Sora", system-ui, sans-serif;
	--font-tekst: "Manrope", system-ui, sans-serif;

	--breedte: 1270px;
	--rand: clamp(16px, 4vw, 32px);
	--kop-hoogte: 84px;
	--radius: 16px;
	--radius-knop: 100px;
	--schaduw: 0 10px 30px rgba(11, 18, 32, .08);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kop-hoogte) + 16px); }
body { margin: 0; font-family: var(--font-tekst); font-size: 17px; line-height: 1.55; color: var(--tekst); background: var(--wit); -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--blauw); }
.icoon { flex: none; vertical-align: middle; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skiplink { position: absolute; left: 8px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--tekst); color: var(--wit); border-radius: 8px; }
.skiplink:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--blauw-licht); outline-offset: 2px; }
.wrap { width: 100%; max-width: calc(var(--breedte) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }

/* ---------- Knoppen ---------- */
.knop[class] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: var(--radius-knop); border: 2px solid transparent; font: 600 15px/1.2 var(--font-tekst); text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.knop .icoon { width: 18px; height: 18px; }
.knop.knop--blauw { background: var(--blauw); color: var(--wit); }
.knop.knop--blauw:hover { background: #00466f; }
.knop.knop--rood { background: var(--rood); color: var(--wit); }
.knop.knop--rood:hover { background: var(--rood-donker); }
.knop.knop--rand { border-color: var(--lijn); color: var(--tekst); background: var(--wit); }
.knop.knop--rand:hover { border-color: var(--blauw); color: var(--blauw); }

/* ---------- Header ---------- */
.kop { position: sticky; top: 0; z-index: 100; background: var(--wit); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.admin-bar .kop { top: var(--wp-admin--admin-bar--height, 0px); }
.kop.is-gescrold { border-bottom-color: var(--lijn); box-shadow: 0 4px 20px rgba(11, 18, 32, .06); }
.kop__binnen { display: flex; align-items: center; gap: 24px; min-height: var(--kop-hoogte); }
.kop__logo { display: block; flex: none; }
.kop__logo img { display: block; width: 180px; height: auto; }
.kop__acties { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.kop__taal { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--blauw); text-decoration: none; padding: 7px 12px; border: 1px solid var(--blauw-zacht); border-radius: var(--radius-knop); background: var(--blauw-zacht); letter-spacing: .04em; } /* W73: beter zichtbaar */
.kop__taal .icoon { width: 16px; height: 16px; }
.kop__taal:hover { border-color: var(--blauw); }
.kop__tel { display: inline-flex; align-items: center; gap: 6px; color: var(--tekst); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.kop__tel .icoon { width: 16px; height: 16px; color: var(--blauw); }
.kop .kop__burger { display: none; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: var(--achtergrond); color: var(--tekst); cursor: pointer; }
.kop__burger > span { display: inline-flex; }
.kop__burger[aria-expanded="true"] .kop__burger-open, .kop__burger[aria-expanded="false"] .kop__burger-dicht { display: none; }

.hoofdmenu { margin-left: auto; }
.hoofdmenu__lijst { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.hoofdmenu__item { position: static; display: flex; align-items: center; }
.hoofdmenu__link { display: block; padding: 10px 12px; color: var(--tekst); font-weight: 500; font-size: 16px; text-decoration: none; border-radius: 10px; white-space: nowrap; }
.hoofdmenu__link:hover, .hoofdmenu__link[aria-current] { color: var(--blauw); }
/* .kop-prefix: wint van de globale button-stijl van Elementor zolang die nog draait. */
.kop .hoofdmenu__open { display: inline-flex; margin-left: -10px; padding: 6px; border: 0; border-radius: 8px; background: none; color: var(--tekst); cursor: pointer; }
.kop .hoofdmenu__open:hover { background: var(--achtergrond); color: var(--blauw); }
.hoofdmenu__open .icoon { width: 16px; height: 16px; transition: transform .2s; }
.heeft-mega.is-open .hoofdmenu__open .icoon { transform: rotate(180deg); }

/* Mega-menu */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--wit); border-top: 1px solid var(--lijn); box-shadow: 0 24px 40px rgba(11, 18, 32, .10); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility 0s .15s; }
.heeft-mega.is-open .mega { visibility: visible; opacity: 1; transform: none; transition: opacity .15s, transform .15s; }
@media (hover: hover) and (min-width: 1101px) {
	.heeft-mega:hover .mega { visibility: visible; opacity: 1; transform: none; transition: opacity .15s .08s, transform .15s .08s; }
}
.mega__binnen { display: grid; grid-template-columns: repeat(4, 1fr) 1.6fr; gap: 32px; padding-block: 32px 28px; }
.mega__kop { margin: 0 0 10px; font: 700 13px/1.4 var(--font-kop); text-transform: uppercase; letter-spacing: 1px; color: var(--tekst-licht); }
.mega ul { margin: 0; padding: 0; list-style: none; }
.mega__groep--breed ul { display: grid; grid-template-columns: repeat(var(--kol, 1), 1fr); column-gap: 16px; }
.mega li a { display: block; padding: 5px 0; color: var(--tekst); text-decoration: none; font-size: 15px; }
.mega li a:hover { color: var(--blauw); }
.mega__alles { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding-top: 16px; border-top: 1px solid var(--lijn); width: 100%; font-weight: 600; text-decoration: none; }

/* Mobiel menu */
.mobielmenu { position: absolute; left: 0; right: 0; top: 100%; height: calc(100dvh - var(--kop-hoogte)); border-top: 1px solid var(--lijn); background: var(--wit); overflow-y: auto; overscroll-behavior: contain; }
.mobielmenu nav { padding: 8px var(--rand) 24px; }
.mobielmenu__lijst { margin: 0; padding: 0; list-style: none; }
.mobielmenu__lijst > li { border-bottom: 1px solid var(--lijn); }
.mobielmenu__lijst > li > a, .mobielmenu summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; color: var(--tekst); font: 600 18px/1.3 var(--font-kop); text-decoration: none; cursor: pointer; list-style: none; }
.mobielmenu summary::-webkit-details-marker { display: none; }
.mobielmenu details[open] summary .icoon { transform: rotate(180deg); }
.mobielmenu__alles { display: block; margin-bottom: 8px; font-weight: 600; }
.mobielmenu__kop { margin: 14px 0 4px; font: 700 12px/1.4 var(--font-kop); text-transform: uppercase; letter-spacing: 1px; color: var(--tekst-licht); }
.mobielmenu__sub { margin: 0 0 8px; padding: 0; list-style: none; }
.mobielmenu__sub--kort { display: grid; grid-template-columns: repeat(3, 1fr); }
.mobielmenu__sub a { display: block; padding: 7px 0; color: var(--tekst); text-decoration: none; }
.mobielmenu__acties { display: grid; gap: 10px; margin-top: 20px; }

/* Menu altijd op één regel (Pieter 20-10): compacter tussen burger en breed scherm, telefoon dan als icoon. */
.kop__offerte { white-space: nowrap; }
@media (max-width: 1400px) {
	.kop__binnen { gap: 16px; }
	.kop__acties { gap: 10px; }
	.hoofdmenu__link { padding-inline: 9px; font-size: 15px; }
	.kop__tel span { display: none; }
	.kop__tel { width: 44px; height: 44px; justify-content: center; border-radius: 12px; background: var(--achtergrond); }
}
@media (max-width: 1180px) {
	.hoofdmenu, .kop__tel span { display: none; }
	.kop .kop__burger { display: inline-flex; }
	.kop__tel { width: 44px; height: 44px; justify-content: center; border-radius: 12px; background: var(--achtergrond); }
}
@media (max-width: 560px) {
	:root { --kop-hoogte: 68px; }
	.kop__binnen { gap: 12px; }
	.kop__logo img { width: 150px; }
	.kop .kop__offerte { display: none; }
}
body.menu-open { overflow: hidden; }

/* ---------- Footer ---------- */
.voet { margin-top: 0; background: var(--donker); color: #c4cad6; font-size: 15px; }
.voet a { color: #c4cad6; text-decoration: none; }
.voet a:hover { color: var(--wit); }
.voet__binnen { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; padding-block: 64px 48px; }
.voet__merk img { display: block; width: 180px; height: auto; margin-bottom: 16px; }
.voet__merk p { margin: 0 0 16px; max-width: 34ch; }
.voet__reviews { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.voet__reviews strong { color: var(--wit); }
.sterren { display: inline-flex; color: var(--geel); }
.sterren .icoon { width: 16px; height: 16px; }
.voet__kop { margin: 0 0 14px; color: var(--wit); font: 700 13px/1.4 var(--font-kop); text-transform: uppercase; letter-spacing: 1px; }
.voet ul { margin: 0; padding: 0; list-style: none; }
.voet li a { display: inline-block; padding: 5px 0; }
.voet address { display: grid; gap: 8px; margin-bottom: 20px; font-style: normal; }
.voet address a { display: inline-flex; align-items: center; gap: 8px; }
.voet address .icoon { width: 16px; height: 16px; }
.voet__onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 20px 28px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; }
.voet__onder ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
@media (max-width: 900px) {
	.voet__binnen { grid-template-columns: 1fr 1fr; }
	.voet__merk { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	.voet__binnen { grid-template-columns: 1fr; gap: 32px; padding-block: 48px 32px; }
}

/* ---------- Tekstpagina's (niet-Elementor) ---------- */
.tekst { padding-block: 48px 72px; max-width: calc(820px + 2 * var(--rand)); }
.tekst h1, .tekst h2, .tekst h3 { font-family: var(--font-kop); line-height: 1.15; letter-spacing: -.02em; }
.tekst h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 800; margin: 0 0 24px; }
.tekst h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin: 40px 0 12px; }
.tekst h3 { font-size: 20px; font-weight: 700; margin: 28px 0 8px; }
.lijst { padding-left: 20px; }
.lijst li { margin: 6px 0; }

/* ---------- Gedeelde bouwstenen ---------- */
.wrap--smal { max-width: calc(880px + 2 * var(--rand)); }
.bovenkop { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 13px/1.4 var(--font-tekst); text-transform: uppercase; letter-spacing: 1px; color: var(--tekst-licht); }
.bovenkop::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rood); }
.knop.knop--klein { padding: 10px 16px; font-size: 14px; }
.knop.knop--groot { padding: 16px 26px; font-size: 16px; width: 100%; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.vinkjes { margin: 16px 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.vinkjes li { position: relative; padding-left: 28px; }
.vinkjes li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: var(--groen); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
h1, h2, h3 { font-family: var(--font-kop); color: var(--tekst); letter-spacing: -.02em; }
.opmaak h3 { font-size: 20px; margin: 0 0 8px; }
.opmaak p, .opmaak ul, .opmaak ol { margin: 0 0 14px; color: var(--tekst-licht); }
.opmaak ul { padding-left: 20px; }
.opmaak li { margin: 4px 0; }
.opmaak strong { color: var(--tekst); }
.sectiekop { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.sectiekop h2 { margin: 0; font-size: clamp(26px, 3.4vw, 40px); }

.kruimelpad ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; font-size: 14px; color: var(--tekst-licht); }
.kruimelpad li + li::before { content: "›"; margin-right: 6px; }
.kruimelpad a { color: var(--tekst-licht); text-decoration: none; }
.kruimelpad a:hover { color: var(--blauw); }

.reviewbadge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--wit); }
.reviewbadge p { margin: 0; }
.reviewbadge__score { display: flex; align-items: center; gap: 6px; font-size: 18px; }
.reviewbadge__tekst { font-size: 13px; color: var(--tekst-licht); }

/* ---------- Catalogus ---------- */
.cat-kop { padding-block: 28px 32px; }
.cat-kop__grid { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.cat-kop h1 { margin: 0 0 12px; font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; line-height: 1.08; }
.cat-kop__intro { margin: 0; max-width: 70ch; color: var(--tekst-licht); }
@media (max-width: 800px) { .cat-kop__grid { grid-template-columns: 1fr; gap: 16px; } .cat-kop .reviewbadge { justify-self: start; } }

.catalogus { padding-block: 32px 64px; background: var(--achtergrond); }
.catalogus__grid { display: grid; grid-template-columns: 270px 1fr; gap: 32px; align-items: start; }
.catalogus.is-laden .resultaten { opacity: .5; transition: opacity .15s; }

.filters { position: sticky; top: calc(var(--kop-hoogte) + 16px); max-height: calc(100vh - var(--kop-hoogte) - 32px); overflow-y: auto; padding: 20px; border-radius: var(--radius); background: var(--wit); }
.filters__kop { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.filters__titel { margin: 0; font: 700 18px/1.2 var(--font-kop); }
.filters__wis { margin-left: auto; font-size: 14px; }
.filters .filters__sluit, .filters .filters__toon { display: none; }
.filter { margin: 0; padding: 14px 0; border: 0; border-top: 1px solid var(--lijn); }
.filter legend { padding: 0 0 8px; font-weight: 700; font-size: 15px; float: left; width: 100%; }
.filter__opties { clear: both; display: grid; gap: 2px; }
.filter__optie { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 15px; cursor: pointer; }
.filter__optie input { width: 18px; height: 18px; margin: 0; accent-color: var(--blauw); }
.filter__optie small { margin-left: auto; color: var(--tekst-licht); font-size: 13px; }
.filter__optie.is-leeg { opacity: .45; }
.filter__opties--chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter__opties--chips .filter__optie { padding: 0; }
.filter__opties--chips input { position: absolute; opacity: 0; pointer-events: none; }
.filter__opties--chips span { display: inline-block; padding: 6px 10px; border: 1px solid var(--lijn); border-radius: 100px; font-size: 14px; }
.filter__opties--chips input:checked + span { background: var(--blauw); border-color: var(--blauw); color: var(--wit); }
.filter__opties--chips input:focus-visible + span { outline: 3px solid var(--blauw-licht); outline-offset: 2px; }
.filters__hulp { margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--blauw-zacht); font-size: 14px; }
.filters__hulp p { margin: 0 0 8px; }
.filters__hulp a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.filters__hulp .icoon { width: 16px; height: 16px; }

.resultaten__balk { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.resultaten__aantal { margin: 0; }
.resultaten__sorteer { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 14px; color: var(--tekst-licht); }
.resultaten__sorteer select { padding: 9px 32px 9px 12px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--wit); font: inherit; color: var(--tekst); }
.resultaten__filterknop { display: none; }
.resultaten__actief { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.resultaten__actief a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 14px; border-radius: 100px; background: var(--blauw); color: var(--wit); font-size: 14px; text-decoration: none; }
.resultaten__actief .icoon { width: 14px; height: 14px; }
.resultaten__leeg { padding: 32px; border-radius: var(--radius); background: var(--wit); }

.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kaarten--4 { grid-template-columns: repeat(4, 1fr); }
.kaarten--2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; } /* /bedrijfshal-verwarmen/ */
.kaart { display: flex; flex-direction: column; border-radius: var(--radius); background: var(--wit); overflow: hidden; border: 1px solid var(--lijn); transition: box-shadow .2s, transform .2s; }
.kaart:hover { box-shadow: var(--schaduw); transform: translateY(-2px); }
.kaart__foto { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--wit); }
.kaart__foto img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.kaart__labels { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 100px; background: var(--groen); color: var(--wit); font-size: 12px; font-weight: 700; }
.kaart__badge { position: absolute; right: 12px; top: 12px; padding: 4px 10px; border-radius: 100px; background: var(--geel); color: var(--tekst); font-size: 12px; font-weight: 700; }
.kaart__tekst { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px 18px 20px; border-top: 1px solid var(--lijn); }
.kaart__titel { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
.kaart__titel a { color: var(--tekst); text-decoration: none; }
.kaart__titel a::after { content: ""; position: absolute; inset: 0; }
.kaart { position: relative; }
.kaart__specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kaart__specs li { padding: 3px 8px; border-radius: 6px; background: var(--achtergrond); font-size: 13px; color: var(--tekst-licht); }
.kaart__prijs { margin: auto 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.kaart__prijs strong { font: 800 22px/1 var(--font-kop); color: var(--tekst); }
.kaart__prijs span { font-size: 13px; color: var(--tekst-licht); }
.kaart .knop { position: relative; z-index: 1; align-self: flex-start; }

.paginering { display: flex; justify-content: center; gap: 6px; margin-top: 32px; }
.paginering a, .paginering span { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 8px; border-radius: 10px; background: var(--wit); border: 1px solid var(--lijn); color: var(--tekst); text-decoration: none; font-weight: 600; }
.paginering span[aria-current] { background: var(--blauw); border-color: var(--blauw); color: var(--wit); }

@media (max-width: 1100px) { .kaarten, .kaarten--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
	.catalogus__grid { grid-template-columns: 1fr; }
	.resultaten__filterknop { display: inline-flex; }
	.filters { position: fixed; inset: 0; z-index: 200; max-height: none; border-radius: 0; padding: 20px var(--rand) 100px; transform: translateX(-100%); transition: transform .25s; }
	.filters.is-open { transform: none; }
	.filters button.filters__sluit { display: inline-flex; margin-left: 8px; padding: 8px; border: 0; background: var(--achtergrond); border-radius: 10px; color: var(--tekst); }
	.filters.is-open .filters__toon { display: flex; position: fixed; left: var(--rand); right: var(--rand); bottom: 16px; z-index: 2; }
}
@media (max-width: 560px) {
	.kaarten, .kaarten--4, .kaarten--2 { grid-template-columns: 1fr; }
	.resultaten__balk { flex-wrap: wrap; }
	.resultaten__sorteer span { display: none; }
}

/* Uitleg + FAQ */
.uitleg { padding-block: 64px 24px; }
.uitleg__kop { max-width: 760px; margin-bottom: 32px; }
.uitleg__kop h2 { margin: 0 0 12px; font-size: clamp(26px, 3.4vw, 40px); }
.uitleg__kop p { margin: 0; color: var(--tekst-licht); }
.uitleg__blokken { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.uitleg__blok { padding: 28px; border-radius: var(--radius); background: var(--achtergrond); }
@media (max-width: 800px) { .uitleg__blokken { grid-template-columns: 1fr; } }

.faq { padding-block: 48px 64px; }
.faq h2 { margin: 0 0 20px; font-size: clamp(26px, 3.4vw, 40px); }
.faq__lijst { display: grid; gap: 10px; }
.faq__item { border: 1px solid var(--lijn); border-radius: 14px; background: var(--wit); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-weight: 700; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icoon { transition: transform .2s; }
.faq__item[open] summary .icoon { transform: rotate(180deg); }
.faq__antwoord { padding: 0 20px 18px; color: var(--tekst-licht); }
.faq__antwoord p { margin: 0 0 10px; }

/* Showroom-blok */
.showroom { padding-block: 32px 80px; }
.showroom__kaart { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 40px; border-radius: 24px; background: var(--achtergrond); }
.showroom h2 { margin: 0 0 12px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; }
.showroom__tekst > p { color: var(--tekst-licht); }
.showroom__foto img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 900px) { .showroom__kaart { grid-template-columns: 1fr; padding: 24px; } }

/* ---------- Airco-pagina ---------- */
.airco { padding-top: 24px; }
.airco__boven { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; padding-bottom: 48px; }
.airco__fotos { position: sticky; top: calc(var(--kop-hoogte) + 16px); }
.airco__foto { display: none; margin: 0; aspect-ratio: 1 / 1; border-radius: var(--radius); border: 1px solid var(--lijn); background: var(--wit); }
.airco__foto.is-actief { display: block; }
.airco__foto img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.airco__duimen { display: flex; gap: 10px; margin-top: 12px; }
.airco .airco__duimen button { width: 80px; height: 80px; padding: 6px; border: 2px solid var(--lijn); border-radius: 12px; background: var(--wit); cursor: pointer; }
.airco .airco__duimen button[aria-current] { border-color: var(--blauw); }
.airco__duimen img { width: 100%; height: 100%; object-fit: contain; }
.airco__info h1 { margin: 0 0 8px; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; font-weight: 800; }
.airco__ondertitel { margin: 0 0 16px; color: var(--tekst-licht); font-size: 18px; }
.airco__kenmerken { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; padding: 0; list-style: none; }
.airco__kenmerken li { padding: 12px 14px; border-radius: 12px; background: var(--achtergrond); }
.airco__kenmerken span { display: block; font-size: 13px; color: var(--tekst-licht); }
.airco__kenmerken strong { font-family: var(--font-kop); }
.airco__prijsblok { padding: 24px; border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw); }
.airco__prijs { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.airco__prijs strong { font: 800 40px/1 var(--font-kop); }
.airco__prijs span { color: var(--tekst-licht); }
.airco__montage { display: flex; align-items: center; gap: 6px; margin: 8px 0 18px; color: var(--groen); font-weight: 600; font-size: 15px; }
.airco__montage .icoon { width: 18px; height: 18px; }
.airco__montage--let, .kaart__montage--let { color: var(--tekst-licht); font-weight: 500; font-size: 14px; } /* kanaalmodellen: roosters niet inbegrepen */
.airco__montage--let { margin-top: -12px; }
.airco__contact { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 14px; }
.airco__contact a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 16px; color: var(--tekst); text-decoration: none; }
.airco__contact span { display: block; color: var(--tekst-licht); }
.airco__contactfoto { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: top; }
.airco__klein { margin: 12px 0 0; font-size: 13px; color: var(--tekst-licht); text-align: center; }
.airco__stappen { margin: 24px 0 0; padding: 0; list-style: none; counter-reset: stap; display: grid; gap: 8px; font-size: 15px; }
.airco__stappen li { counter-increment: stap; display: flex; align-items: center; gap: 10px; }
.airco__stappen li::before { content: counter(stap); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blauw-zacht); color: var(--blauw); font-weight: 700; font-size: 13px; }
.airco__details { padding-block: 56px; background: var(--achtergrond); }
.airco__details-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; margin-bottom: 40px; }
.airco__details h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 16px; }
.airco__inbegrepen { padding: 24px; border-radius: var(--radius); background: var(--wit); }
.airco__inbegrepen h2 { font-size: 20px; }
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; }
.specs__tabel { width: 100%; border-collapse: collapse; background: var(--wit); border-radius: var(--radius); overflow: hidden; font-size: 15px; }
.specs__tabel caption { padding: 0 0 8px; text-align: left; font-weight: 700; font-family: var(--font-kop); }
.specs__tabel th, .specs__tabel td { padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--lijn); }
.specs__tabel th { font-weight: 500; color: var(--tekst-licht); }
.vergelijkbaar { padding-block: 64px 16px; }
@media (max-width: 1000px) {
	.airco__boven, .airco__details-grid { grid-template-columns: 1fr; gap: 28px; }
	.airco__fotos { position: static; }
	.specs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .airco__kenmerken { grid-template-columns: 1fr 1fr; } .sectiekop { flex-direction: column; align-items: start; } }

/* ---------- Paginakop, inhoud, waarom ---------- */
.paginakop { padding-block: 28px 48px; background: linear-gradient(180deg, var(--blauw-zacht), var(--wit)); }
.paginakop__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.paginakop--foto .paginakop__grid { grid-template-columns: 1.1fr 1fr; }
.paginakop h1 { margin: 0 0 16px; font-size: clamp(32px, 5vw, 56px); font-weight: 800; line-height: 1.06; max-width: 20ch; }
.paginakop__intro { margin: 0 0 24px; max-width: 64ch; font-size: 18px; color: var(--tekst-licht); }
.paginakop__foto img { width: 100%; border-radius: 20px; object-fit: cover; aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .paginakop--foto .paginakop__grid { grid-template-columns: 1fr; } }

.inhoud { padding-block: 40px 16px; }
.inhoud__tekst h2 { font-size: clamp(24px, 3vw, 32px); margin: 36px 0 12px; line-height: 1.2; }
.inhoud__tekst h3 { margin-top: 24px; }
.inhoud__tekst p, .inhoud__tekst li { font-size: 17px; }
.inhoud__tekst img { border-radius: 12px; }
.inhoud__tekst table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.inhoud__tekst th, .inhoud__tekst td { padding: 10px 12px; border-bottom: 1px solid var(--lijn); text-align: left; }

.waarom { padding-block: 56px; }
.waarom__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.waarom__foto img { width: 100%; border-radius: 20px; object-fit: cover; aspect-ratio: 4 / 3; }
.waarom h2 { margin: 0 0 12px; font-size: clamp(28px, 3.6vw, 44px); }
.waarom__tekst > p { color: var(--tekst-licht); }
@media (max-width: 900px) { .waarom__grid { grid-template-columns: 1fr; gap: 24px; } }

.werkgebieden { padding-block: 32px 24px; }
.werkgebieden h2 { margin: 0 0 16px; font-size: 24px; }
.werkgebieden__lijst { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.werkgebieden__lijst a { display: inline-block; padding: 7px 14px; border: 1px solid var(--lijn); border-radius: 100px; color: var(--tekst); text-decoration: none; font-size: 15px; }
.werkgebieden__lijst a:hover, .werkgebieden__lijst a[aria-current] { border-color: var(--blauw); color: var(--blauw); }

/* Tekstpagina, blog, project, vacature */
.tekstpagina, .blogbericht { padding-block: 28px 32px; }
.tekstpagina h1, .blogbericht h1, .projectpagina h1, .vacaturepagina h1 { margin: 0 0 16px; font-size: clamp(30px, 4.4vw, 48px); font-weight: 800; line-height: 1.1; }
.blogbericht__intro { font-size: 20px; color: var(--tekst-licht); margin: 0 0 8px; }
.blogbericht__meta { font-size: 14px; color: var(--tekst-licht); }
.blogbericht__foto { margin-block: 24px 8px; }
.blogbericht__foto img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 20px; }
.overzicht { padding-block: 40px 24px; }
.kaart--bericht .kaart__beeld { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.kaart--bericht .kaart__beeld img { width: 100%; height: 100%; object-fit: cover; }
.kaart__samenvatting { margin: 0; color: var(--tekst-licht); font-size: 15px; }
.kaart__lees { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--blauw); font-weight: 600; font-size: 15px; }
.kaart__lees .icoon { width: 16px; height: 16px; }
.overzicht .nav-links { display: flex; gap: 8px; justify-content: center; margin-top: 32px; }
.overzicht .page-numbers { padding: 8px 14px; border: 1px solid var(--lijn); border-radius: 10px; text-decoration: none; color: var(--tekst); }
.overzicht .page-numbers.current { background: var(--blauw); color: var(--wit); border-color: var(--blauw); }

.projectpagina, .vacaturepagina { padding-block: 28px 48px; }
.projectpagina__grid, .vacaturepagina__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }
.feiten { margin: 0; padding: 24px; border-radius: var(--radius); background: var(--achtergrond); display: grid; gap: 14px; }
.feiten dt { font-size: 13px; color: var(--tekst-licht); }
.feiten dd { margin: 0; font-weight: 700; }
.fotoraster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
.fotoraster figure { margin: 0; }
.fotoraster img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; aspect-ratio: 4 / 3; }
.vacaturepagina__zij { display: grid; gap: 20px; }
.vacaturepagina__contact { padding: 24px; border-radius: var(--radius); background: var(--achtergrond); }
.vacaturepagina__contact img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: top; }
.vacaturepagina__form { padding: 24px; border-radius: var(--radius); border: 1px solid var(--lijn); }
.vacaturepagina__form h2 { margin: 0 0 12px; }
@media (max-width: 900px) { .projectpagina__grid, .vacaturepagina__grid { grid-template-columns: 1fr; } .fotoraster { grid-template-columns: 1fr; } }

/* ---------- Secties (home en eenmalige pagina's) ---------- */
.sectie-intro { max-width: 760px; margin-bottom: 32px; }
.sectie-intro p { color: var(--tekst-licht); margin: 0; }
.sectie-titel { margin: 0 0 12px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; }
.bovenkop--licht { color: rgba(255, 255, 255, .85); }
.h3 { font-size: 20px; }

.held { padding-block: 48px 64px; background: linear-gradient(135deg, var(--blauw) 0%, var(--blauw-licht) 100%); color: var(--wit); }
.held__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.held h1 { margin: 0 0 20px; color: var(--wit); font-size: clamp(40px, 6vw, 68px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
.held__intro { margin: 0 0 20px; max-width: 52ch; font-size: 18px; color: rgba(255, 255, 255, .9); }
.held__usps { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 28px; padding: 0; list-style: none; font-weight: 600; }
.held__usps li { display: inline-flex; align-items: center; gap: 6px; }
.held__usps .icoon { width: 18px; height: 18px; color: #7ee2a0; }
.held__form { padding: 24px; border-radius: 20px; background: var(--wit); color: var(--tekst); box-shadow: 0 20px 50px rgba(0, 0, 0, .15); }
.held__form h2 { margin: 0 0 6px; font-size: 22px; }
.held__form > p { margin: 0 0 16px; color: var(--tekst-licht); font-size: 15px; }
.held__foto img { width: 100%; border-radius: 24px; object-fit: cover; aspect-ratio: 5 / 4; }
@media (max-width: 900px) { .held__grid { grid-template-columns: 1fr; } .held__foto { display: none; } }

.postcodeform__velden { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 10px; margin-bottom: 14px; }
.veld { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.veld abbr { color: var(--rood); text-decoration: none; }
.veld input, .veld select, .veld textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: 10px; font: 500 16px/1.3 var(--font-tekst); color: var(--tekst); background: var(--wit); }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: 2px solid var(--blauw-licht); border-color: var(--blauw-licht); }
.veld input:user-invalid { border-color: var(--rood); }
@media (max-width: 420px) { .postcodeform__velden { grid-template-columns: 1fr 1fr; } .veld--postcode { grid-column: 1 / -1; } }

.usps { padding-block: 72px; }
.usps__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.usps__raster li { padding: 28px; border-radius: var(--radius); background: var(--achtergrond); }
.usps__raster h3 { margin: 12px 0 6px; font-size: 20px; }
.usps__raster p { margin: 0; color: var(--tekst-licht); }
.stap__nr { font: 800 14px/1 var(--font-kop); color: var(--blauw); letter-spacing: .5px; }
@media (max-width: 900px) { .usps__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .usps__raster { grid-template-columns: 1fr; } }

.stappen { padding-block: 72px; background: var(--achtergrond); }
.stappen__lijst { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.stap { padding: 24px; border-radius: var(--radius); background: var(--wit); }
.stap h3 { margin: 10px 0 6px; font-size: 19px; }
.stap p { margin: 0; color: var(--tekst-licht); font-size: 15px; }
.stap__foto { margin: -24px -24px 16px; }
.stap__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
.stappen__start { padding-block: 0 32px; margin-top: -40px; text-align: center; background: var(--achtergrond); max-width: none; }
@media (max-width: 900px) { .stappen__lijst { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stappen__lijst { grid-template-columns: 1fr; } }

.tegels { padding-block: 64px 24px; }
.tegels__raster { display: grid; grid-template-columns: repeat(var(--kol, 3), 1fr); gap: 20px; }
.tegel { position: relative; display: block; overflow: hidden; border-radius: 20px; color: var(--wit); text-decoration: none; aspect-ratio: 4 / 3; background: var(--donker); }
.tegel img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tegel:hover img { transform: scale(1.04); }
.tegel__tekst { position: absolute; inset: auto 0 0 0; display: grid; gap: 6px; padding: 60px 22px 20px; background: linear-gradient(transparent, rgba(11, 18, 32, .85)); }
.tegel__tekst strong { display: inline-flex; align-items: center; gap: 8px; font: 700 21px/1.2 var(--font-kop); }
.tegel__tekst span { font-size: 14px; color: rgba(255, 255, 255, .85); }
@media (max-width: 900px) { .tegels__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tegels__raster { grid-template-columns: 1fr; } }

.voordelen { padding-block: 48px; }
.voordelen__intro { max-width: 820px; margin-bottom: 28px; }
.voordelen__lijst { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.voordelen__lijst li { padding: 24px; border: 1px solid var(--lijn); border-radius: var(--radius); }
.voordelen__icoon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--blauw-zacht); color: var(--blauw); }
.voordelen__icoon img { width: 28px; height: 28px; object-fit: contain; }
.voordelen__lijst h3 { margin: 14px 0 6px; font-size: 19px; }
.voordelen__lijst p { margin: 0; color: var(--tekst-licht); font-size: 15px; }
@media (max-width: 800px) { .voordelen__lijst { grid-template-columns: 1fr; } }

.prijzen { padding-block: 64px; }
.prijzen__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.prijzen__grid > div > p { color: var(--tekst-licht); }
.prijstabel { width: 100%; border-collapse: collapse; border-radius: var(--radius); overflow: hidden; background: var(--achtergrond); }
.prijstabel th, .prijstabel td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--lijn); }
.prijstabel th { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--tekst-licht); }
.prijstabel td:last-child { text-align: right; white-space: nowrap; }
.prijzen__voetnoot { font-size: 14px; color: var(--tekst-licht); }
@media (max-width: 900px) { .prijzen__grid { grid-template-columns: 1fr; gap: 24px; } }

.eigenaar { padding-block: 72px; }
.eigenaar__grid { display: grid; grid-template-columns: 420px 1fr; gap: 56px; align-items: center; }
.eigenaar__foto { position: relative; }
.eigenaar__foto img { width: 100%; border-radius: 24px; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; background: var(--blauw-zacht); }
.eigenaar__naam { position: absolute; left: 16px; bottom: 16px; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--wit); font-size: 14px; }
.cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.cijfers div { padding: 16px; border-radius: 14px; background: var(--achtergrond); }
.cijfers dt { font: 800 28px/1 var(--font-kop); color: var(--blauw); }
.cijfers dd { margin: 6px 0 0; font-size: 14px; color: var(--tekst-licht); overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 480px) { .cijfers { gap: 8px; } .cijfers div { padding: 12px 10px; } .cijfers dt { font-size: 22px; } .cijfers dd { font-size: 13px; } }
@media (max-width: 900px) { .eigenaar__grid { grid-template-columns: 1fr; gap: 28px; } .eigenaar__foto { max-width: 360px; } }

.adviesblok { padding-block: 72px; background: var(--blauw-zacht); scroll-margin-top: var(--kop-hoogte); }
.adviesblok__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.adviesblok h2 { margin: 0 0 12px; font-size: clamp(28px, 3.6vw, 40px); }
.adviesblok__tekst > p { color: var(--tekst-licht); }
.adviesblok__reviews { display: flex; align-items: center; gap: 6px; }
.adviesblok__kaart { padding: 28px; border-radius: 20px; background: var(--wit); box-shadow: var(--schaduw); }
.adviesblok__kaart h3, .adviesblok__kaart .h3 { margin: 0 0 12px; }
.adviesblok__bel { margin: 14px 0 0; font-size: 14px; color: var(--tekst-licht); text-align: center; }
.ministappen { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: mini; display: grid; gap: 14px; }
.ministappen li { counter-increment: mini; display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; }
.ministappen li::before { content: counter(mini); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blauw); color: var(--wit); font-weight: 700; }
.ministappen span { color: var(--tekst-licht); font-size: 14px; }
@media (max-width: 900px) { .adviesblok__grid { grid-template-columns: 1fr; gap: 28px; } }

.reviewsblok { padding-block: 56px; }
.reviewsblok__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.reviewsblok h2 { margin: 0 0 8px; font-size: clamp(26px, 3.2vw, 36px); }
.reviewsblok p { color: var(--tekst-licht); }
.reviewsblok__score { display: grid; justify-items: start; gap: 6px; padding: 28px; border-radius: 20px; border: 1px solid var(--lijn); color: var(--tekst); text-decoration: none; }
.reviewsblok__score:hover { border-color: var(--blauw); }
.reviewsblok__getal { font: 800 56px/1 var(--font-kop); }
.reviewsblok__score .sterren .icoon { width: 22px; height: 22px; }
.reviewsblok__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--blauw); font-weight: 600; }
@media (max-width: 800px) { .reviewsblok__grid { grid-template-columns: 1fr; } }

.team { padding-block: 64px 32px; }
.team__raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.teamlid__foto { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 5; background: var(--achtergrond); }
.teamlid__foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.teamlid__hover { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; }
.teamlid:hover .teamlid__hover { opacity: 1; }
.teamlid h3 { margin: 12px 0 2px; font-size: 18px; }
.teamlid p { margin: 0; color: var(--tekst-licht); font-size: 15px; }
@media (max-width: 900px) { .team__raster { grid-template-columns: repeat(2, 1fr); } }
.missie { padding-block: 32px; }
.missie__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.missie__grid > div { padding: 28px; border-radius: var(--radius); background: var(--achtergrond); }
.missie h2 { margin: 0 0 10px; font-size: 24px; }
.missie p { margin: 0; color: var(--tekst-licht); }
@media (max-width: 800px) { .missie__grid { grid-template-columns: 1fr; } }

.contact { padding-block: 16px 72px; }
.contact__tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 40px; padding: 0; list-style: none; }
.contact__tegels a { display: grid; gap: 4px; padding: 22px; border: 1px solid var(--lijn); border-radius: var(--radius); color: var(--tekst); text-decoration: none; }
.contact__tegels a:hover { border-color: var(--blauw); }
.contact__tegels .icoon { color: var(--blauw); margin-bottom: 6px; }
.contact__tegels span { color: var(--tekst-licht); font-size: 14px; }
.contact__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.contact__form { padding: 28px; border-radius: 20px; background: var(--achtergrond); }
.contact__form h2, .contact__info h2 { margin: 0 0 16px; font-size: 26px; }
.contact__info img { width: 100%; max-height: 320px; object-fit: cover; object-position: top; border-radius: 20px; margin-bottom: 20px; }
.contact__info > p { color: var(--tekst-licht); }
.contact__gegevens { display: grid; gap: 12px; margin: 20px 0 0; }
.contact__gegevens dt { font-size: 13px; color: var(--tekst-licht); }
.contact__gegevens dd { margin: 0; font-weight: 600; }
@media (max-width: 900px) { .contact__tegels, .contact__grid { grid-template-columns: 1fr; } }

.offertekop { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.offertekop h1 { margin: 0 0 16px; font-size: clamp(32px, 5vw, 52px); font-weight: 800; line-height: 1.06; }
.offertekop__model { padding: 12px 16px; border-radius: 12px; background: var(--wit); border: 1px solid var(--lijn); }
.actieblok { margin-top: 20px; padding: 20px 22px; border-radius: 16px; background: var(--wit); border: 2px dashed var(--blauw-licht); }
.actieblok h2 { margin: 0 0 6px; font-size: 20px; }
.actieblok p { margin: 0; color: var(--tekst-licht); }
@media (max-width: 900px) { .offertekop { grid-template-columns: 1fr; } }

/* ---------- Formulieren (plugin airco-formulieren) ---------- */
.formulier__velden { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.formulier__velden .veld { grid-column: 1 / -1; }
.formulier__velden .veld--half { grid-column: auto; }
.veld--vink { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; font-size: 15px; }
.veld--vink input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blauw); flex: none; }
.veld input[type="file"] { padding: 10px; background: var(--wit); }
.formulier__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulier__fout { padding: 12px 16px; border-radius: 10px; background: #fdecec; color: #8a1c1a; font-weight: 600; }
.formulier__let-op { margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; background: #fff4d6; color: #5c4400; font-weight: 600; }
.formulier__klaar { padding: 20px; border-radius: 14px; background: #e8f7ee; color: #14532d; }
.formulier__klaar:focus { outline: none; }
.contact__tip { margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: var(--blauw-zacht); font-size: 15px; }
@media (max-width: 560px) { .formulier__velden .veld--half { grid-column: 1 / -1; } }

/* ---------- Lijstweergave (W24) + keuzehulp-knop (W25) ---------- */
.keuzehulp-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding: 18px 20px; border-radius: var(--radius); background: var(--blauw); color: var(--wit); text-decoration: none; }
.keuzehulp-cta__tekst { font-size: 16px; }
.keuzehulp-cta__tekst strong { display: block; font: 700 19px/1.3 var(--font-kop); }
.keuzehulp-cta .knop { flex: none; }
@media (max-width: 640px) { .keuzehulp-cta { flex-direction: column; align-items: stretch; } }
.weergave { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--wit); border: 1px solid var(--lijn); }
.weergave a { padding: 7px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--tekst-licht); text-decoration: none; }
.weergave a[aria-current] { background: var(--blauw); color: var(--wit); }
.resultaten__balk .weergave { margin-left: auto; }
.resultaten__balk .weergave + .resultaten__sorteer { margin-left: 0; }

.prijslijst { display: grid; gap: 20px; }
.serie { display: grid; grid-template-columns: minmax(200px, 30%) 1fr; border-radius: var(--radius); background: var(--wit); border: 1px solid var(--lijn); overflow: hidden; }
.serie__foto { display: grid; place-items: center; padding: 24px; background: var(--achtergrond); }
.serie__foto img { width: 100%; max-width: 240px; height: auto; max-height: 260px; object-fit: contain; }
.serie__inhoud { padding: 28px 32px; }
.serie__label { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 100px; background: var(--blauw-zacht); color: var(--blauw); font-size: 13px; font-weight: 700; }
.serie__titel { margin: 0 0 8px; font-size: 26px; line-height: 1.2; }
.serie__tekst { margin: 0 0 10px; color: var(--tekst-licht); font-size: 15px; max-width: 60ch; }
.serie__vanaf { margin: 0 0 14px; font-size: 14px; color: var(--tekst-licht); }
.serie__vanaf strong { font: 800 20px/1 var(--font-kop); color: var(--tekst); }
.serie__klein { margin: 12px 0 0; font-size: 13px; color: var(--tekst-licht); }
.serie__modellen { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lijn); }
.serie__modellen li { border-bottom: 1px solid var(--lijn); }
.model { display: grid; grid-template-columns: 110px 1fr auto 18px; align-items: center; gap: 16px; padding: 13px 6px; color: var(--tekst); text-decoration: none; }
.model--multi { grid-template-columns: 1fr auto auto 18px; }
.model:hover { background: var(--achtergrond); }
.model__kw { font-weight: 700; font-size: 15px; }
.model--multi .model__kw { color: var(--blauw); font-size: 14px; }
.model__m2 { font-size: 14px; color: var(--tekst-licht); }
.model__prijs { font: 800 18px/1 var(--font-kop); white-space: nowrap; text-align: right; }
.model .icoon { width: 16px; height: 16px; color: var(--tekst-licht); }
@media (max-width: 900px) { .serie { grid-template-columns: 1fr; } .serie__foto { padding: 16px; } .serie__foto img { max-width: 180px; max-height: 160px; } .serie__inhoud { padding: 20px; } }
@media (max-width: 480px) { .model { grid-template-columns: 64px 1fr auto; gap: 10px; } .model--multi { grid-template-columns: 1fr auto; } .model--multi .model__m2 { grid-column: 1; } .model .icoon { display: none; } .serie__titel { font-size: 22px; } }

/* ---------- Catalogus in lijstweergave: geen filterkolom ---------- */
.catalogus--lijst .catalogus__grid { grid-template-columns: 1fr; }

/* ---------- Keuzehulp (blauw blok, W25) + vergelijker (W13–W15) ---------- */
.kh-sectie { padding-block: 8px 32px; }
.kh { padding: 32px; border-radius: 24px; background: linear-gradient(120deg, #1f5f9c, #3d86c9 60%, #5aa3de); color: var(--wit); }
.kh__kop { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.kh__kop img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: top; border: 3px solid rgba(255, 255, 255, .4); flex: none; }
.kh h2 { margin: 0 0 4px; color: var(--wit); font-size: clamp(22px, 3vw, 28px); }
.kh__sub { margin: 0; color: #cfe3f6; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.kh__tekst { margin: 0 0 18px; max-width: 60ch; color: rgba(255, 255, 255, .9); }
.knop.knop--wit { background: var(--wit); color: var(--blauw); }
.knop.knop--wit:hover { background: var(--blauw-zacht); }
.kh__vraag { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.kh__vraag h3 { margin: 0; color: var(--wit); font-size: 20px; }
.kh__nr { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 10px; font: 700 14px var(--font-kop); }
.kh__waarom { margin: 0 0 14px 54px; font-size: 14px; opacity: .85; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kh__opties { margin-left: 54px; }
.chip { padding: 10px 16px; border: 1.5px solid var(--lijn); border-radius: 100px; background: var(--wit); color: var(--tekst); font: 600 15px/1.2 var(--font-tekst); cursor: pointer; }
.kh .chip { border-color: transparent; }
.chip.is-aan, .chip:hover { background: var(--rood); border-color: var(--rood); color: var(--wit); }
.kh__voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; font-size: 14px; }
.kh .kh__link { border: 0; background: none; color: var(--wit); font: 600 14px var(--font-tekst); cursor: pointer; padding: 0; }
.kh__balk { height: 4px; margin-top: 18px; border-radius: 4px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.kh__balk i { display: block; width: 0; height: 100%; background: var(--wit); transition: width .3s; }
.kh__advieskop { margin: 0 0 14px; color: var(--wit); }
.kh__melding { padding: 16px; border-radius: 14px; background: var(--wit); color: var(--tekst); }
.kh__resultaat { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; color: var(--tekst); }
.rkaart { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: start; padding: 22px; border-radius: 18px; background: var(--wit); }
.rkaart img { width: 140px; height: 105px; object-fit: contain; }
.rkaart--alt { grid-template-columns: 96px 1fr; }
.rkaart--alt img { width: 96px; height: 76px; }
.rkaart h3 { margin: 2px 0 4px; font-size: 20px; }
.rkaart__merk { margin: 8px 0 0; font-size: 13px; color: var(--tekst-licht); }
.rkaart__code { margin: 0; font-size: 14px; color: var(--tekst-licht); }
.rkaart__prijs { margin: 8px 0 0; font: 800 26px/1 var(--font-kop); }
.rkaart__klein, .rkaart__kies { margin: 4px 0 12px; font-size: 13px; color: var(--tekst-licht); }
.kh__badge { display: inline-block; padding: 4px 10px; border-radius: 100px; background: var(--blauw-zacht); color: var(--blauw); font-size: 12px; font-weight: 700; }
.kh__badge--groen { background: #e3f6ea; color: var(--groen); }
@media (max-width: 820px) { .kh__resultaat { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
	.kh { padding: 20px 16px; border-radius: 18px; }
	.kh__kop img { width: 52px; height: 52px; }
	.kh__opties, .kh__waarom { margin-left: 0; }
	.kh__opties { display: grid; grid-template-columns: 1fr 1fr; }
	.kh__opties .chip { border-radius: 12px; min-height: 48px; text-align: center; }
	.rkaart, .rkaart--alt { grid-template-columns: 1fr; }
}

.vergelijk { padding-block: 64px 24px; }
.vergelijk__intro { max-width: 720px; color: var(--tekst-licht); }
.vergelijk__filter { position: sticky; top: var(--kop-hoogte); z-index: 20; padding: 12px 0; background: var(--wit); border-block: 1px solid var(--lijn); }
.vergelijk__filter .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.vergelijk__filter .chip { padding: 7px 14px; font-size: 14px; }
.cmp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.vmodel { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--lijn); border-radius: 20px; background: var(--wit); }
.vmodel.is-uitgelicht { border-color: var(--blauw); box-shadow: 0 0 0 2px var(--blauw), var(--schaduw); }
.vmodel__top { display: flex; justify-content: space-between; gap: 8px; }
.vmodel__foto { display: grid; place-items: center; height: 150px; margin: 8px 0 12px; }
.vmodel__foto img { max-height: 150px; object-fit: contain; }
.vmodel__merk { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--tekst-licht); }
.vmodel h3 { margin: 2px 0 8px; }
.vmodel__pitch { font-size: 15px; color: var(--tekst-licht); }
.vmodel__let { color: #8a6400; font-size: 14px; }
.vmodel__kies { margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--achtergrond); font-size: 14px; }
.vmodel__kies strong { color: var(--blauw); }
.vmodel__feat { margin: 0 0 16px; padding: 0; list-style: none; font-size: 14px; }
.vmodel__feat li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--lijn); }
.vmodel__feat .ja { color: var(--groen); font-weight: 800; }
.vmodel__feat .nee { color: #b6becc; }
.swatches { display: flex; gap: 8px; }
.vmodel .sw { width: 22px; height: 22px; padding: 0; border: 2px solid var(--wit); border-radius: 50%; box-shadow: 0 0 0 1.5px #c9d1dd; cursor: pointer; }
.vmodel .sw.is-aan { box-shadow: 0 0 0 2px var(--blauw); }
.vmodel__nu { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--lijn); }
.vmodel__klein, .vmodel__code { margin: 0; font-size: 13px; color: var(--tekst-licht); }
.vmodel__prijs { margin: 4px 0; font: 800 30px/1 var(--font-kop); }
.vmodel__na { color: #b91c1c; font-weight: 600; }
.vmodel__lijst { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin: 10px 0 14px; font-size: 13px; color: var(--tekst-licht); }
.vmodel__lijst .is-aan { color: var(--tekst); font-weight: 700; }
.vmodel .knop { width: 100%; }
.vergelijk__kop { margin-top: 56px; }
.scroll-x { overflow-x: auto; border: 1px solid var(--lijn); border-radius: 16px; }
.matrix { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--wit); }
.matrix th, .matrix td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--lijn); white-space: nowrap; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix thead th { background: var(--blauw); color: var(--wit); font-size: 13px; font-weight: 600; vertical-align: bottom; }
.matrix tr.is-aan td { background: #eef5fb; font-weight: 700; }
.matrix .best { color: var(--groen); font-weight: 800; }
.matrix .leeg { color: #c3cad6; }
.matrix small { font-weight: 400; color: var(--tekst-licht); }
.merken { padding-block: 64px; background: var(--achtergrond); }
.merken__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.merk { padding: 24px; border-radius: var(--radius); background: var(--wit); }
.merk h3 { margin: 0 0 6px; }
.merk p { color: var(--tekst-licht); }
@media (max-width: 960px) { .cmp, .merken__raster { grid-template-columns: 1fr; } }

/* ---------- App-pagina's (aanvraagflow, opvolging, onderhoud, winkelwagen) ---------- */
.app { min-height: 50vh; }
.app--winkel { padding-block: 32px 64px; }
.app__titel { margin: 0 0 24px; font-size: clamp(28px, 4vw, 40px); }
.kh--compact { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; border-radius: 18px; }
.kh--compact .kh__kop { margin: 0; gap: 14px; }
.kh--compact .kh__kop img { width: 52px; height: 52px; border-width: 2px; }
.kh--compact h2 { font-size: 20px; }
.kh__knoppen { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.kh__lijstlink { color: var(--wit); font-weight: 600; font-size: 15px; }
.kh-sectie { padding-block: 0 24px; }
@media (max-width: 760px) { .kh--compact { flex-direction: column; align-items: stretch; } .kh__knoppen .knop { flex: 1; } }
/* Lijst/tegels: beide in de pagina, de klasse bepaalt wat zichtbaar is. */
.catalogus:not(.catalogus--lijst) .prijslijst { display: none; }
.catalogus--lijst .kaarten, .catalogus--lijst .filters, .catalogus--lijst .resultaten__sorteer, .catalogus--lijst .resultaten__filterknop { display: none; }
.resultaten .resultaten__filterknop { display: none; }
@media (max-width: 900px) { .catalogus:not(.catalogus--lijst) .resultaten .resultaten__filterknop { display: inline-flex; } }

/* USP-balk onder de header (zoals bij Pim) */
.uspbalk { border-top: 1px solid var(--lijn); background: var(--achtergrond); }
.uspbalk ul { display: flex; justify-content: space-between; gap: 16px; margin: 0 auto; padding-block: 9px; list-style: none; font-size: 13px; font-weight: 600; color: var(--tekst-licht); }
.uspbalk li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.uspbalk .icoon { width: 15px; height: 15px; padding: 2px; border-radius: 50%; background: var(--blauw); color: var(--wit); }
@media (max-width: 900px) { .uspbalk ul { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; } }

/* Uitleg in twee kolommen (bv. "Een airco kopen in regio Eindhoven") */
.uitleg__duo { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; }
.uitleg__duo h2 { margin: 0 0 12px; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; }
.uitleg__duo .knoppen { margin-top: 20px; }
.uitleg__kaart { padding: 28px 32px; border-radius: 20px; background: var(--achtergrond); }
.uitleg__kaart p:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .uitleg__duo { grid-template-columns: 1fr; gap: 20px; } .uitleg__kaart { padding: 22px; } }

/* ---------- Homepage in de stijl van Pim ---------- */
/* Airco-kaart zoals bij Pim: lichte kaart, groen vinkje montage, knop over de volle breedte */
.kaart { border: 0; background: var(--achtergrond); }
.kaart__foto { margin: 10px 10px 0; border-radius: 12px; background: var(--wit); }
.kaart__tekst { border-top: 0; gap: 6px; padding: 14px 16px 18px; }
.kaart__titel { font-size: 15px; }
p.kaart__specs { margin: 0; font-size: 13px; color: var(--tekst-licht); }
.kaart__prijs strong { font-size: 22px; }
.kaart__montage { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--groen); }
.kaart__montage .icoon { width: 15px; height: 15px; }
.kaart .knop.kaart__knop { align-self: stretch; padding: 11px 16px; font-size: 14px; }
.catalogus .kaart, .vergelijkbaar .kaart { background: var(--wit); }

/* Voor wie: foto boven, tekst eronder */
.tegels__raster--kaart .tegel { aspect-ratio: auto; background: var(--wit); color: var(--tekst); border-radius: 20px; }
.tegels__raster--kaart .tegel img { aspect-ratio: 16 / 10; border-radius: 20px; }
.tegels__raster--kaart .tegel__tekst { position: static; padding: 18px 4px 4px; background: none; }
.tegels__raster--kaart .tegel__tekst strong { font-size: 24px; }
.tegels__raster--kaart .tegel__tekst span { color: var(--tekst-licht); font-size: 15px; }
.tegels__raster--kaart .tegel:hover img { transform: none; opacity: .92; }

/* USP's: witte kaarten met icoon en nummer */
.usps { background: var(--achtergrond); }
.usps__raster li { position: relative; background: var(--wit); border-radius: 18px; }
.usp__icoon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blauw-zacht); color: var(--blauw); }
.usp__nr { position: absolute; top: 24px; right: 24px; font: 700 13px var(--font-kop); color: #b6becc; }
.usps__raster h3 { margin-top: 18px; }

/* Stappenslider */
.stapslider { padding-block: 72px; background: linear-gradient(135deg, var(--blauw), var(--blauw-licht)); color: var(--wit); overflow: hidden; }
.stapslider__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.stapslider h2 { margin: 0 0 14px; color: var(--wit); font-size: clamp(30px, 4vw, 46px); line-height: 1.08; }
.stapslider__intro { margin: 0 0 28px; max-width: 52ch; color: rgba(255, 255, 255, .88); }
.stapslider__rij { display: flex; gap: 14px; margin: 0; padding: 4px 0 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.stapkaart { flex: 0 0 230px; scroll-snap-align: start; padding: 20px; border-radius: 16px; background: rgba(255, 255, 255, .14); color: var(--wit); cursor: pointer; transition: background .2s, color .2s; }
.stapkaart.is-actief { background: var(--wit); color: var(--tekst); }
.stapkaart__nr { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 100px; background: rgba(255, 255, 255, .2); font: 700 12px var(--font-kop); }
.stapkaart.is-actief .stapkaart__nr { background: var(--blauw-zacht); color: var(--blauw); }
.stapkaart h3 { margin: 0 0 6px; color: inherit; font-size: 18px; }
.stapkaart p { margin: 0; font-size: 14px; opacity: .85; }
.stapslider__nav { display: flex; gap: 10px; margin-top: 16px; }
.stapslider .stapslider__nav button { width: 44px; height: 44px; padding: 0; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 50%; background: none; color: var(--wit); font-size: 18px; cursor: pointer; }
.stapslider__foto { position: relative; aspect-ratio: 4 / 3.4; border-radius: 24px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.stapslider__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.stapslider__foto img.is-actief { opacity: 1; }
@media (max-width: 900px) { .stapslider__grid { grid-template-columns: 1fr; } .stapslider__foto { order: -1; aspect-ratio: 16 / 10; } }

/* Adviesblok blauw (homepage) */
.adviesblok--blauw { background: none; }
.adviesblok--blauw .adviesblok__grid { padding: 48px; border-radius: 28px; background: var(--blauw); color: var(--wit); }
.adviesblok--blauw h2, .adviesblok--blauw .adviesblok__tekst > p { color: var(--wit); }
.adviesblok--blauw .bovenkop { color: rgba(255, 255, 255, .8); }
.adviesblok--blauw .vinkjes li::before { background: #7ee2a0; }
@media (max-width: 700px) { .adviesblok--blauw .adviesblok__grid { padding: 24px; border-radius: 20px; } }

/* FAQ in twee kolommen (homepage) */
.faq-duo { padding-block: 72px 32px; }
.faq-duo__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; }
.faq-duo__grid > div:first-child p { color: var(--tekst-licht); }
.faq-duo .faq { padding: 0; }
@media (max-width: 900px) { .faq-duo__grid { grid-template-columns: 1fr; gap: 20px; } }

/* Plakbalk met postcodeformulier (homepage, na de eerste sectie) */
.plakbalk { position: fixed; left: 0; right: 0; bottom: 16px; z-index: 90; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .3s, transform .3s; }
.plakbalk.is-zichtbaar { opacity: 1; pointer-events: auto; transform: none; }
.plakbalk__binnen { display: flex; align-items: center; gap: 20px; padding: 14px 18px; border-radius: 18px; background: var(--wit); box-shadow: 0 20px 50px rgba(11, 18, 32, .22); max-width: calc(var(--breedte) - 40px); }
.plakbalk__tekst { display: grid; flex: 0 0 300px; font-size: 14px; color: var(--tekst-licht); }
.plakbalk__tekst strong { color: var(--tekst); font: 700 17px var(--font-kop); }
.plakbalk .postcodeform { display: flex; align-items: end; gap: 10px; flex: 1; }
.plakbalk .postcodeform__velden { flex: 1; margin: 0; }
.plakbalk .knop.knop--groot { width: auto; padding: 12px 20px; white-space: nowrap; }
@media (max-width: 900px) { .plakbalk { display: none; } }
.tegels__raster--kaart .tegel { overflow: visible; }
.tegels__raster--kaart .tegel img { height: auto; }
.stapslider__links { min-width: 0; }

/* Contact: blauw blok met Guido (zoals bij Pim) */
.contact__blauw { position: relative; overflow: hidden; padding: 40px; border-radius: 28px; background: var(--blauw); color: var(--wit); min-height: 100%; }
.contact__blauw-tekst { position: relative; z-index: 1; max-width: 62%; }
.contact__blauw h2 { margin: 0 0 14px; color: var(--wit); font-size: clamp(30px, 3.6vw, 44px); }
.contact__blauw-tekst > p { color: rgba(255, 255, 255, .9); }
.contact__blauw .vinkjes li::before { background: #7ee2a0; }
.contact__lijst { display: grid; gap: 12px; margin: 24px 0; padding: 0; list-style: none; font-size: 17px; }
.contact__lijst li { display: flex; align-items: center; gap: 12px; }
.contact__lijst a { color: var(--wit); text-decoration: none; }
.contact__werkgebied { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; }
.contact__werkgebied a { color: var(--wit); }
.contact__guido { position: absolute; right: -10px; bottom: 0; width: 46%; max-width: 360px; height: auto; object-fit: contain; }
@media (max-width: 1100px) { .contact__blauw-tekst { max-width: 100%; } .contact__guido { position: static; display: block; width: 70%; margin: 16px auto -40px; } }

/* Hero homepage, nieuwe indeling: tekst + foto naast elkaar, formulier als brede balk eronder */
.held { padding-block: 40px 0; background: linear-gradient(135deg, var(--blauw) 0%, var(--blauw-licht) 100%); }
.held__grid { align-items: stretch; gap: 48px; }
.held__tekst { align-self: center; padding-block: 16px; }
.held__usps { margin-bottom: 0; }
.held__usps .icoon { color: #7ee2a0; }
.held__usps li:last-child .icoon { color: var(--geel); }
.held__foto { align-self: stretch; }
.held__foto img { height: 100%; min-height: 360px; max-height: 460px; aspect-ratio: auto; }
.held__form { position: relative; display: grid; grid-template-columns: 300px 1fr; align-items: center; gap: 28px; margin-top: 40px; transform: translateY(50%); margin-bottom: 0; padding: 24px 28px; border-radius: 20px; background: var(--wit); color: var(--tekst); box-shadow: 0 20px 50px rgba(11, 18, 32, .15); }
.held__form h2 { margin: 0 0 4px; font-size: 21px; }
.held__formtekst p { margin: 0; color: var(--tekst-licht); font-size: 14px; }
.held__form .postcodeform { display: flex; align-items: end; gap: 12px; }
.held__form .postcodeform__velden { flex: 1; margin: 0; }
.held__form .knop.knop--groot { width: auto; padding: 13px 22px; white-space: nowrap; }
.held + :not(.mobielbalk), .held + .mobielbalk + * { padding-top: 176px; } /* half adresblok (translateY 50%) + lucht. Niet op de mobiele balk die ertussen staat (Pieter 19-10: was krap) */
@media (max-width: 1000px) {
	.held__form { grid-template-columns: 1fr; gap: 14px; transform: none; margin-block: 28px 0; }
	.held { padding-bottom: 32px; }
	.held + :not(.mobielbalk), .held + .mobielbalk + * { padding-top: 72px; }
}
@media (max-width: 900px) {
	.held { padding-top: 24px; }
	.held h1 { font-size: 38px; margin-bottom: 14px; }
	.held__intro { font-size: 16px; margin-bottom: 14px; }
	.held__usps { gap: 6px 14px; font-size: 14px; }
	.held__form { padding: 18px; }
	.held__form .postcodeform { display: block; }
	.held__form .knop.knop--groot { width: 100%; margin-top: 12px; }
}

/* Contact: blauwe kolom breder */
@media (min-width: 1101px) { .contact__grid { grid-template-columns: 1fr 1.15fr; } .contact__blauw-tekst { max-width: 58%; } } /* alleen desktop */

/* Hero: linkerkolom rustiger */
.held h1 { font-size: clamp(38px, 4.3vw, 60px); line-height: 1.04; }
.held h1 span { display: block; white-space: nowrap; }
.held__intro { max-width: 46ch; font-size: 18px; line-height: 1.6; margin-bottom: 22px; }
.held__usps { gap: 8px; }
.held__usps li { padding: 7px 12px; border-radius: 100px; background: rgba(255, 255, 255, .14); font-size: 14px; }
.held .bovenkop { margin-bottom: 16px; }
@media (max-width: 420px) { .held h1 span { white-space: normal; } }
@media (min-width: 1001px) { .held__form { grid-template-columns: 360px 1fr; } } /* alleen desktop: op mobiel onder elkaar */

/* Hero-formulier dat meeschuift (desktop) */
.held__form.is-vast { position: fixed; left: 50%; bottom: 16px; z-index: 90; width: min(calc(100% - 40px), var(--breedte)); transform: translateX(-50%); margin: 0; padding: 14px 20px; animation: inschuif .25s ease-out; }
.held__form.is-vast h2 { font-size: 17px; }
.held__form.is-vast .held__formtekst p { font-size: 13px; }
@keyframes inschuif { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Producttegels (modellen), zoals bij Pim: lichte kaart, product heel in beeld, titel eronder */
.tegels__raster--product .tegel { aspect-ratio: auto; display: grid; justify-items: center; gap: 12px; padding: 28px 24px 24px; border-radius: 20px; background: var(--achtergrond); color: var(--tekst); }
.tegels__raster--product .tegel img { width: 100%; height: 170px; object-fit: contain; transition: transform .3s; }
.tegels__raster--product .tegel:hover img { transform: scale(1.04); }
.tegels__raster--product .tegel__tekst { position: static; padding: 0; background: none; text-align: center; }
.tegels__raster--product .tegel__tekst strong { font-size: 20px; justify-content: center; }
.tegels__raster--product .tegel__tekst .icoon { display: none; }

/* Nieuwsbrief in de footer (W28) */
.voet__nieuwsbrief { margin-top: 24px; }
.voet__nieuwsbrief > p { margin: 0 0 10px; }
.formulier--compact .formulier__velden { display: flex; gap: 8px; margin-bottom: 8px; }
.formulier--compact .formulier__velden .veld:first-child { flex: 1; }
.formulier--compact .veld > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.formulier--compact .veld input[type="email"] { padding: 10px 12px; font-size: 15px; }
.formulier--compact .veld--vink { position: static; width: 100%; font-size: 12px; color: inherit; }
.formulier--compact .veld--vink > span { position: static; width: auto; height: auto; clip: auto; }
.formulier--compact .formulier__velden { flex-wrap: wrap; }
.formulier--compact .formulier__velden .veld--vink { order: 3; }
.formulier--compact .knop { padding: 10px 16px; font-size: 14px; }
.voet .formulier__klaar { background: rgba(255, 255, 255, .1); color: var(--wit); }
.voet .formulier--compact a { text-decoration: underline; }
.levering { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; background: #fff7e6; color: #7a5200; font-size: 13px; line-height: 1.45; }
.levering .icoon { width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* Nieuwsbrief in de footer: minder contrast */
.voet .formulier--compact { position: relative; }
.voet .formulier--compact .veld input[type="email"] { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: var(--wit); border-radius: 100px; padding: 11px 130px 11px 16px; }
.voet .formulier--compact .veld input[type="email"]::placeholder { color: rgba(255, 255, 255, .5); }
.voet .formulier--compact .knop { position: absolute; top: 4px; right: 4px; padding: 8px 16px; }
.voet .formulier--compact .veld--vink { font-size: 12px; color: rgba(255, 255, 255, .6); gap: 8px; }
.voet .formulier--compact .veld--vink input { width: 14px; height: 14px; }
.voet .formulier--compact .veld--vink abbr { display: none; }

/* W41/W37: zwevende balken */
.mobielbalk { display: none; }
.mobielbalk--kh { position: fixed; left: 50%; bottom: 16px; z-index: 80; display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 20px; border-radius: 16px; background: var(--wit); box-shadow: 0 10px 30px rgba(11, 18, 32, .22); transform: translate(-50%, 160%); transition: transform .25s ease; }
.mobielbalk--kh.is-aan { transform: translate(-50%, 0); }
.mobielbalk--kh .mobielbalk__tekst { display: grid; line-height: 1.25; }
.mobielbalk--kh small { font-size: 12px; color: var(--tekst-licht); }
.mobielbalk__sluit { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--tekst-licht); cursor: pointer; }
.mobielbalk__sluit .icoon { width: 16px; height: 16px; }
@media (max-width: 900px) {
	.mobielbalk { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--wit); box-shadow: 0 10px 30px rgba(11, 18, 32, .22); transform: translateY(140%); transition: transform .25s ease; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
	.mobielbalk.is-aan { transform: none; }
	.mobielbalk--kh { left: 10px; right: 10px; bottom: 10px; transform: translateY(160%); gap: 10px; padding-left: 14px; }
	.mobielbalk--kh.is-aan { transform: none; }
	.mobielbalk--kh .knop { padding: 10px 12px; }
	.mobielbalk__tekst { display: grid; line-height: 1.25; }
	.mobielbalk__tekst strong { font-size: 15px; }
	.mobielbalk__tekst small { font-size: 12px; color: var(--tekst-licht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.mobielbalk__tekst { min-width: 0; }
	.mobielbalk .knop { padding: 11px 16px; font-size: 15px; white-space: nowrap; }
}
@media (min-width: 601px) { .alleenmobiel { display: none; } }
@media (max-width: 600px) { .nietmobiel { display: none; } }

/* W36: donkerblauwe paginakop (zoals de homepage) */
.paginakop--blauw { background: linear-gradient(135deg, var(--blauw) 0%, var(--blauw-licht) 100%); color: var(--wit); padding-block: 28px 56px; }
.paginakop--blauw h1, .paginakop--blauw .bovenkop { color: var(--wit); }
.paginakop--blauw .paginakop__intro { color: rgba(255, 255, 255, .9); }
.paginakop--blauw .kruimelpad ol, .paginakop--blauw .kruimelpad a, .paginakop--blauw .kruimelpad li { color: rgba(255, 255, 255, .85); }
.paginakop--blauw .kruimelpad a:hover { color: var(--wit); }
.paginakop--blauw .knop--rand { border-color: rgba(255, 255, 255, .7); color: var(--wit); background: transparent; }
.paginakop--blauw .knop--rand:hover { background: rgba(255, 255, 255, .12); }
.paginakop--blauw .paginakop__foto img { border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, .2); }

/* W38/W42: reviewkaarten en algemene swipe-rij (horizontaal scrollen met snap, zoals in een app) */
.swipe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 16px; margin: 28px 0 0; padding: 0 0 12px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; }
.swipe > * { scroll-snap-align: start; }
@media (min-width: 1001px) { .swipe { grid-auto-columns: calc((100% - 32px) / 3); } }
@media (max-width: 700px) { .swipe { grid-auto-columns: 82%; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; } }
.review { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 16px; background: var(--wit); border: 1px solid var(--lijn); }
.review__tekst { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tekst); flex: 1; }
.review__tekst summary { cursor: pointer; list-style: none; }
.review__tekst summary::-webkit-details-marker { display: none; }
.review__tekst[open] summary .review__kort, .review__tekst[open] summary .review__meer { display: none; }
.review__meer { color: var(--blauw); font-weight: 700; white-space: nowrap; }
.review__tekst p { margin: 0; }
.review__naam { margin: 0; font-size: 13px; color: var(--tekst-licht); }
.review__naam strong { color: var(--tekst); }
.sterren--klein .icoon { width: 16px; height: 16px; }

/* W40: ruimtepagina's – snel kiezen, tips, ingeklapte tekst */
.ruimtekeuze { padding-block: 56px 40px; }
.maten { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; }
.maat { padding: 10px 18px; border: 1.5px solid var(--lijn); border-radius: 100px; background: var(--wit); color: var(--tekst); font: 700 15px var(--font-tekst, inherit); cursor: pointer; }
.maat:hover { border-color: var(--blauw); }
.maat.is-aan { border-color: var(--blauw); background: var(--blauw); color: var(--wit); }
.ruimtekeuze__uitleg { margin: 0; color: var(--tekst-licht); }
.swipe--kaarten { margin-top: 16px; grid-auto-columns: minmax(250px, 1fr); }
@media (min-width: 1001px) { .swipe--kaarten { grid-auto-columns: calc((100% - 48px) / 4); } }
@media (max-width: 700px) { .swipe--kaarten { grid-auto-columns: 78%; } }
.ruimtekeuze__verder { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 18px 0 0; }
.ruimtekeuze__verder a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--blauw); text-decoration: none; }
.ruimtekeuze__verder .icoon { width: 16px; height: 16px; }
.ruimtetips { padding-block: 40px 56px; background: var(--achtergrond); }
.swipe--tips { margin-top: 20px; }
.tip { padding: 22px; border-radius: 16px; background: var(--wit); border: 1px solid var(--lijn); }
.tip__nr { font: 800 14px var(--font-kop); color: var(--rood); }
.tip h3 { margin: 6px 0 6px; font-size: 18px; }
.tip p { margin: 0; color: var(--tekst-licht); font-size: 15px; }
.inhoud--lang { padding-block: 56px; }
.inklap.is-ingeklapt { max-height: 640px; overflow: hidden; position: relative; }
.inklap.is-ingeklapt::after { content: ""; position: absolute; inset: auto 0 0; height: 140px; background: linear-gradient(rgba(255, 255, 255, 0), var(--wit)); }
.inklap__knop { margin-top: 12px; }
@media (max-width: 700px) { .ruimtekeuze { padding-block: 36px 28px; } .maat { padding: 9px 14px; font-size: 14px; } .ruimtetips, .inhoud--lang { padding-block: 32px; } }

/* W42: mobiel compacter (kaarten in swiperijen, reviewblok, koppen) */
@media (max-width: 700px) {
	.swipe .kaart__foto { aspect-ratio: 16 / 10; }
	.swipe .kaart__foto img { padding: 10px; }
	.swipe .kaart__tekst { gap: 6px; padding: 12px 14px 14px; }
	.swipe .kaart__titel { font-size: 15px; }
	.swipe .kaart__prijs strong { font-size: 20px; }
	.swipe .kaart__montage { font-size: 13px; }
	.swipe .kaart .knop { padding: 9px 14px; font-size: 14px; }
	.reviewsblok { padding-block: 36px; }
	.reviewsblok__grid { grid-template-columns: 1fr; gap: 14px; }
	.reviewsblok__grid > div > p:not(.bovenkop) { display: none; }
	.reviewsblok__score { grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; padding: 14px 16px; }
	.reviewsblok__getal { grid-row: span 3; font-size: 40px; }
	.review { padding: 16px; }
	.sectie-titel { font-size: clamp(24px, 7vw, 30px); }
	.tip { padding: 18px; }
}
.adviesblok--blauw .adviesblok__kaart, .adviesblok--blauw .adviesblok__kaart label, .adviesblok--blauw .adviesblok__kaart .veld span { color: var(--tekst); }
@media (max-width: 700px) {
	.adviesblok .vinkjes, .adviesblok__reviews, .adviesblok .ministappen, .adviesblok__kaart > .h3 { display: none; }
	.adviesblok--blauw .adviesblok__grid { padding: 24px 18px; border-radius: 20px; }
	.adviesblok__tekst > p:not(.bovenkop) { font-size: 15px; }
}

/* W42: contact op mobiel – kanalen als compacte rijen */
@media (max-width: 700px) {
	.contact__tegels { gap: 8px; }
	.contact__tegels li > * { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: center; padding: 12px 14px; }
	.contact__tegels .icoon { grid-row: span 2; }
	.contact__tegels small, .contact__tegels span:not(.icoon) { font-size: 12px; }
}

/* Lijstweergave mobiel (feedback Pieter 10-10): compact als prijslijst-app */
.prijslijst__noot { margin: 0; font-size: 13px; color: var(--tekst-licht); }
@media (min-width: 701px) { .prijslijst__noot { display: none; } }
@media (max-width: 700px) {
	.prijslijst { gap: 12px; }
	.serie { grid-template-columns: 76px 1fr; column-gap: 12px; padding: 14px 14px 4px; border-radius: 16px; }
	.serie__inhoud { display: contents; }
	.serie__foto { grid-column: 1; grid-row: 1 / span 3; align-self: start; padding: 6px; border-radius: 12px; width: 76px; height: 76px; }
	.serie__foto img { max-width: 100%; max-height: 100%; }
	.serie__inhoud > * { grid-column: 2; }
	.serie__label { justify-self: start; margin: 0 0 4px; padding: 2px 9px; font-size: 11px; }
	.serie__titel { margin: 0 0 4px; font-size: 19px; }
	.serie__tekst { margin: 0 0 4px; font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.serie__vanaf { margin: 0 0 8px; font-size: 13px; }
	.serie__vanaf strong { font-size: 17px; }
	.serie__inhoud > .serie__modellen { grid-column: 1 / -1; }
	.serie__klein { display: none; }
	.model { grid-template-columns: 62px 1fr auto 14px; gap: 8px; padding: 11px 2px; }
	.model--multi { grid-template-columns: 1fr auto 14px; }
	.model--multi .model__m2 { grid-column: 1; grid-row: 2; }
	.model__kw { font-size: 14px; }
	.model__m2 { font-size: 13px; white-space: nowrap; }
	.model__prijs { font-size: 16px; }
	.model .icoon { display: block; width: 14px; height: 14px; }
	.cat-kop .review-badge, .cat-kop__grid > :last-child:not(:first-child) { display: none; }
	.cat-kop__intro { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; }
	.kh--compact { padding: 16px; }
	.kh--compact .kh__kop img { width: 44px; height: 44px; }
	.kh--compact h2 { font-size: 17px; }
	.kh--compact .kh__knoppen { gap: 8px; }
	.kh--compact .knop { padding: 10px 16px; }
}
@media (max-width: 700px) {
	.kh--compact .kh__lijstlink { display: none; }
	.kh--compact .kh__sub { font-size: 11px; }
	.kh--compact .kh__knoppen .knop { width: auto; align-self: flex-start; }
	.kh-sectie { padding-block: 8px 0; }
}

/* Cookiebanner (Consent Mode v2) */
.toestemming { position: fixed; left: 16px; bottom: 16px; z-index: 9998; width: min(440px, calc(100% - 32px)); padding: 18px 20px; border-radius: 16px; background: var(--wit); color: var(--tekst); box-shadow: 0 16px 48px rgba(11, 18, 32, .25); font-size: 14px; }
.toestemming[hidden] { display: none; }
.toestemming__kop { margin: 0 0 6px; font: 700 16px var(--font-kop); }
.toestemming__tekst { margin: 0 0 12px; color: var(--tekst-licht); line-height: 1.5; }
.toestemming__tekst a { color: var(--blauw); }
.toestemming__keuzes { display: grid; gap: 8px; margin: 0 0 12px; }
.toestemming__keuzes label { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 13px; color: var(--tekst-licht); }
.toestemming__keuzes strong { display: block; color: var(--tekst); font-size: 14px; }
.toestemming__keuzes input { margin-top: 3px; accent-color: var(--blauw); }
.toestemming__knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toestemming__knoppen .knop { padding: 10px 16px; font-size: 14px; }
.toestemming__link { border: 0; background: none; color: var(--tekst-licht); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; padding: 6px 4px; }
@media (max-width: 600px) { .toestemming { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 16px; } .toestemming__knoppen .knop { flex: 1 1 auto; } }
.toestemming [hidden] { display: none !important; }
/* Rond knopje linksonder om de cookiekeuze te wijzigen, zoals op andere sites (Pieter 21-10). Schuift via toestemming.php boven vaste balken onderin uit. */
.cookieknop { position: fixed; left: 16px; bottom: 16px; z-index: 85; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--lijn); border-radius: 50%; background: var(--wit); color: var(--blauw); box-shadow: 0 6px 20px rgba(11, 18, 32, .18); cursor: pointer; transition: bottom .25s ease, transform .2s; }
.cookieknop:hover { transform: scale(1.06); }
.cookieknop[hidden] { display: none; }

/* W46: kleinere productkaarten (homepage) */
.kaarten--klein { gap: 16px; }
.kaarten--klein .kaart__foto { aspect-ratio: 16 / 10; }
.kaarten--klein .kaart__foto img { padding: 14px 20px; }
.kaarten--klein .kaart__tekst { padding: 14px 16px 16px; gap: 8px; }
.kaarten--klein .kaart__titel { font-size: 15px; }
.kaarten--klein .kaart__prijs strong { font-size: 19px; }
.kaarten--klein .kaart .knop { padding: 9px 14px; font-size: 14px; }
@media (max-width: 1100px) and (min-width: 701px) { .kaarten.kaarten--klein { grid-template-columns: repeat(3, 1fr); } .kaarten--klein > :nth-child(4) { display: none; } }
@media (max-width: 700px) { .kaarten.kaarten--klein { grid-template-columns: none; } }
@media (max-width: 700px) {
	.swipe-mobiel { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 0 16px 10px; }
	.swipe-mobiel > * { scroll-snap-align: start; }
}

/* W47: productfoto's met witte achtergrond laten opgaan in de grijze vlakken (wit wordt de achtergrondkleur) */
.serie__foto img, .tegels__raster--product .tegel img { mix-blend-mode: multiply; }

/* Bedrijfshal verwarmen: uitvoeringen met punten, prijs en folder */
.uitvoeringen { padding-block: 56px; }
.uitvoeringen .sectie-intro { margin-inline: auto; text-align: center; }
.kaart__punten { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.kaart__punten li { display: flex; align-items: flex-start; gap: 8px; }
.kaart__punten .icoon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--groen); }
.kaart .knoppen { margin-top: 4px; }
.uitvoeringen .kaart__foto { aspect-ratio: 16 / 11; min-height: 0; overflow: hidden; }
.uitvoeringen .kaart__foto img { position: absolute; inset: 0; }
.uitvoeringen .kaart__titel { font-size: 20px; }

/* Cookiebanner en zwevende balken (Pieter 21-10): zolang onze banner open staat geen mobiele balk of plakbalk eronder. */
body:has(#toestemming:not([hidden])) .mobielbalk,
body:has(#toestemming:not([hidden])) .plakbalk { visibility: hidden; opacity: 0; pointer-events: none; }
/* Noodoplossing: CookieYes laadt nog via GTM (Lars en Dennis halen het eruit). Wij hebben een eigen banner met
   Consent Mode v2, dus de banner en de ronde knop van CookieYes niet tonen. Weg zodra CookieYes uit GTM is. */
.cky-consent-container, .cky-btn-revisit-wrapper, .cky-modal, .cky-overlay, .cky-preference-center { display: none !important; }

/* Drukte-melding bovenaan elke pagina, aan/uit onder Aanvragen › Instellingen (Pieter 21-10). */
.drukte { background: var(--geel); color: var(--tekst); }
.drukte p { margin: 0 auto; padding-block: 10px; font-size: 14px; font-weight: 600; line-height: 1.4; text-align: center; }
@media (max-width: 600px) { .drukte p { font-size: 13px; padding-block: 8px; text-align: left; } }

/* Nieuwe aanvragen dicht (Pieter 21-10): geen knoppen naar offerte of aanvraag, ook niet in de keuzehulp. */
.aanvragen-dicht a[href*="gratis-airco-offerte"], .aanvragen-dicht a[href*="/free-quote"],
.aanvragen-dicht a[href*="/aanvragen"], .aanvragen-dicht a[href*="/request"],
.aanvragen-dicht .mobielbalk:not(.mobielbalk--kh), .aanvragen-dicht .plakbalk { display: none !important; }
.aanvraag-dicht { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.aanvraag-dicht p { flex: 1 1 320px; margin: 0; line-height: 1.5; }
.aanvraag-dicht .knop { flex: none; }
.held__form:has(.aanvraag-dicht) { grid-template-columns: 1fr; padding: 22px 28px; }
.held__form .aanvraag-dicht { gap: 16px 32px; }
.held__form .aanvraag-dicht p { max-width: 760px; font-size: 16px; }
.held__form .aanvraag-dicht strong { display: block; margin-bottom: 2px; font: 700 20px var(--font-kop); }