/* Benelux Keukens, ads-lander.
Re-skin van de Solar Green-lander (die zelf een re-skin van Feitsma is): zelfde
layout-DNA, andere huisstijl en inhoud.
Merkgoud #D4AF37 haalt op wit maar 2,1:1, dus net als bij de eerdere landers drie
varianten in :root: --goud alleen voor vlakken, iconen en grote cijfers, --goud-deep
(4,9:1) voor kleine gouden tekst op wit, en --goud-fill voor vlakken waar witte tekst
op komt. Dat laatste is bij dit merk NAVY en geen goud, want wit op goud haalt geen
enkele drempel. --goud-light is het goud dat op de donkere vlakken leesbaar blijft.
Type: Montserrat (koppen) + Source Sans 3 (body), dezelfde combinatie als
beneluxkeukens.com zelf gebruikt. */
:root{
--goud:#D4AF37;
--goud-deep:#8A6D1B;
--goud-fill:#14213D;
--goud-soft:#FBF5E4;
--goud-light:#E8CE79; /* goud dat leesbaar blijft op de donkere vlakken (11,4:1) */
--ink:#12182A;
--ink-2:#1E2740;
--paper:#F7F7F7;
--paper-2:#EFEFEF;
--line:#E3E3E3;
--white:#fff;
--muted:#5A6070;
--radius:18px;
--radius-sm:12px;
--shadow-sm:0 2px 10px rgba(20,20,20,.06);
--shadow:0 18px 50px -22px rgba(20,20,20,.35);
--shadow-lg:0 40px 90px -40px rgba(20,20,20,.55);
--maxw:1180px;
--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;touch-action:manipulation;-ms-touch-action:manipulation}
body{
margin:0;
font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
color:var(--ink);
background:var(--paper);
font-size:clamp(15.5px,.4vw + 14.5px,17px);
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Montserrat",system-ui,sans-serif;font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--goud);outline-offset:2px}
.wrap{width:min(100% - 2.4rem,var(--maxw));margin-inline:auto}
.eyebrow{
display:inline-flex;align-items:center;gap:.55rem;
font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--goud-deep);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--goud);border-radius:2px}
/* ---------- Buttons ---------- */
.btn{
--bg:var(--goud-fill);--fg:#fff;
display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
padding:.85rem 1.4rem;border-radius:999px;border:0;cursor:pointer;
font-family:inherit;font-weight:700;font-size:.96rem;line-height:1;
background:var(--bg);color:var(--fg);
box-shadow:0 12px 26px -12px color-mix(in srgb,var(--bg) 75%,#000);
transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s;
white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{--bg:var(--goud-fill)}
.btn--primary:hover{background:var(--goud-deep)}
/* De witte pil. Heette alleen .btn--bel omdat hij als bel-knop begon, maar hij wordt
inmiddels overal gebruikt waar een gevulde knop wegvalt tegen een groen vlak.
.btn--wit is dezelfde knop onder een naam die klopt; beide blijven werken. */
.btn--bel,.btn--wit{
background:#fff;color:var(--ink);
box-shadow:inset 0 0 0 1.5px rgba(42,22,13,.14),0 12px 26px -16px rgba(20,20,20,.5);
}
.btn--bel svg,.btn--wit svg{color:var(--goud-deep)}
.btn--bel:hover,.btn--wit:hover{background:#000;color:#fff}
.btn--bel:hover svg,.btn--wit:hover svg{color:var(--goud-light)}
.btn--ink{--bg:#12182A}
/* Witte pil met WhatsApp-groen glyph, zelfde idioom als de oude bel-knop. Groen
vullen kon niet: dan staan er twee bijna gelijke groenen naast elkaar in de
topbalk en verdwijnt de hierarchie met "Gratis scan".
Het glyph-groen is NIET het merk-#25D366: wit daarop haalt 1,98:1 en zakt door
WCAG. #188841 geeft 4,53:1, ook bij de omgekeerde hover. */
.btn--wa{
background:#fff;color:var(--ink);
box-shadow:inset 0 0 0 1.5px rgba(42,22,13,.14),0 12px 26px -16px rgba(20,20,20,.5);
}
/* Groter dan de standaard 18px: het WhatsApp-bolletje vult zijn viewBox niet,
dus op 18px is het optisch een stipje naast de vette knoptekst. Op 22px weegt
het even zwaar. De translateY corrigeert de staart linksonder, die het silhouet
optisch omlaag trekt. */
.btn.btn--wa svg{color:#188841;width:22px;height:22px;transform:translateY(-.5px);
margin-block:-2px} /* negatieve marge: het glyph mag 22px zijn zonder de knop hoger
te maken dan zijn buren in de topbalk (bleef anders 49 i.p.v. 45) */
.btn--wa{gap:.6rem}
.btn--wa:hover{background:#188841;color:#fff}
.btn.btn--wa:hover svg{color:#fff}
.btn--lg{padding:1.02rem 1.7rem;font-size:1.02rem}
.btn svg{width:18px;height:18px;flex:none}
/* Korte variant van een knoplabel, staat standaard uit. Wordt onder 620px omgewisseld
met .lbl, zie de responsive-sectie onderaan. */
.lbl-kort{display:none}
/* ---------- Topbar ---------- */
.topbar{
position:fixed;inset:0 0 auto 0;z-index:50;
display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:.9rem 0;
transition:background .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:min(100% - 2.4rem,var(--maxw))}
.topbar__logo{position:relative;display:flex;align-items:center;gap:.7rem}
/* Twee logovarianten over elkaar: witte versie boven de video, donkere zodra de
balk vastplakt. Het groene "Green" blijft in beide standen groen. */
.topbar__logo img{height:70px;width:auto;transition:opacity .35s var(--ease),height .35s var(--ease)}
.topbar__logo img+img{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
.topbar.is-stuck .topbar__logo img{opacity:0}
.topbar.is-stuck .topbar__logo img+img{opacity:1}
.topbar__actions{display:flex;align-items:center;gap:.7rem}
.topbar__tel{
display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:#fff;
padding:.5rem .4rem;font-size:.95rem;white-space:nowrap;transition:color .35s var(--ease)
}
/* Onder 780px wrapt het nummer naast het brede logo; dan liever weg, de
bel-knop ernaast dekt de belfunctie. */
@media (max-width:779.98px){.topbar__tel{display:none}}
.topbar__tel svg{width:17px;height:17px}
.topbar.is-stuck{background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(12px);box-shadow:var(--shadow-sm);padding:.55rem 0}
.topbar.is-stuck .topbar__logo img,
.topbar.is-stuck .topbar__logo img+img{height:60px}
.topbar.is-stuck .topbar__tel{color:var(--ink)}
/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(92vh,860px);display:grid;align-items:end;overflow:hidden;isolation:isolate;
background:#0B1020 url("../img/hero-keuken.webp") center 42%/cover no-repeat}
/* Op telefoons vangt de rechterrand van de crop nog net de arm van de linker
monteur uit de teamfoto rechts in beeld; focuspunt naar links zodat het team
buiten beeld valt (de foto schuift visueel naar rechts). */
@media(max-width:640px){.hero{background-position:32% 42%}}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.hero__veil{
position:absolute;inset:0;z-index:-2;pointer-events:none;
background:
radial-gradient(120% 90% at 70% 18%,rgba(20,20,20,0) 30%,rgba(20,20,20,.55) 100%),
linear-gradient(180deg,rgba(20,20,20,.55) 0%,rgba(20,20,20,.12) 26%,rgba(20,20,20,.22) 58%,rgba(12,12,12,.92) 100%);
}
.hero__grain{position:absolute;inset:0;z-index:-1;opacity:.05;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* Rechterrand van de figuur ligt vast op de rechterrand van de contentkolom (--maxw),
niet op een percentage van het venster. Excellent gebruikt left:72,5%, maar dat is
viewport-relatief en dan wandelt de foto zichtbaar mee bij resizen of zoomen.
Hoogte in px met een procentuele bovengrens die pas ingrijpt op erg lage vensters,
zodat ook het formaat niet meebeweegt.
De onderrand duikt bewust achter de offertebalk: .of-wrap schuift
clamp(56px,7.5vw,104px) omhoog over de hero heen, en 26px daaronder valt de snede weg. */
/* Op verzoek (2-aug) staat de figuur ALLEEN op mobiel. Op desktop staan de drie
collega's rechts in de foto zelf, daar zou de uitgesneden man bovenop vallen.
Onder 1080px klapt de hero om, komt de foto boven de tekst en staat de figuur
in de flow; daar mag hij juist wel en 25% groter dan voorheen. */
.hero__pic{display:none}
.hero__person{position:absolute;z-index:0;left:auto;transform:none;
right:max(0px,calc((100% - var(--maxw)) / 2));
bottom:calc(clamp(56px,7.5vw,104px) - 26px);height:min(476px,74%);width:auto;
pointer-events:none;filter:drop-shadow(0 12px 22px rgba(0,0,0,.30))}
/* Witte tegenhanger van .reasons__mark. Op de donkere video mag hij zwakker staan dan de
rode in de lichte sectie, anders vecht hij met de kop. */
/* Merkteken. Stond rechtsboven in wit, maar daar valt het nu over de drie collega's.
Sinds 2-aug in GOUD, in de rustige band tussen de knoppen en de offertebalk.
Bodem gespiegeld aan .of-wrap, die clamp(56px,7.5vw,104px) omhoog schuift. */
.hero__mark{position:absolute;z-index:0;pointer-events:none;
right:max(1.2rem,calc((100% - var(--maxw)) / 2));
top:auto;left:auto;
bottom:calc(clamp(56px,7.5vw,104px) + 1.1rem);
width:clamp(115px,12.5vw,185px);height:auto;opacity:.85;
filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
/* Op mobiel stond de mark klein rechtsBOVEN, waar hij met de eyebrow en de kop vocht.
Op verzoek (2-aug) net als op desktop rechtsONDER, in de band boven de offertebalk,
en fors groter zodat het merkteken meedoet in plaats van weg te vallen.
De z-index op .hero__person is nodig: die is hier position:static, en statische
elementen schilderen ONDER een absoluut gepositioneerde mark met z-index 0. Zonder
deze regel valt het merkteken VOOR de monteur in plaats van erachter. */
@media(max-width:1080px){
.hero__mark{top:auto;left:auto;
right:clamp(.5rem,3vw,1.5rem);
bottom:calc(clamp(56px,7.5vw,104px) + .8rem);
width:clamp(150px,38vw,240px);opacity:.5}
.hero__person{position:relative;z-index:1}
}
@media(max-width:620px){.hero__mark{width:clamp(150px,44vw,215px);opacity:.45}}
/* Onder 1240px past de brede kop niet meer naast de figuur: de titel liep door
de adviseur heen. Figuur naar de rechterrand en kleiner. */
@media(max-width:1240px){
.hero__person{right:1.2rem;height:min(340px,60%)}
}
/* Onder 1080px overloopt de titel zijn eigen container, dus naast elkaar botsen ze.
Daarom klapt de hero hier om, hetzelfde patroon als bij Feitsma, SpeedyService en
Mejan: tekst boven, figuur eronder in de flow, kleiner, en de offertebalk trekt er
weer overheen zodat de snede onder de heup achter de balk wegvalt. De figuur blijft
dus staan op mobiel, hij mag nooit verdwijnen.
De picture-wrapper is het flex-kind, niet de img, vandaar de order op .hero__pic. */
@media(max-width:1080px){
/* align-items MOET mee terug naar stretch: de basisregel zet hem op end, en in een
kolom-flexbox is dat de horizontale as, dus dan schrompelt de figuur naar rechts. */
.hero{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;
min-height:min(84vh,760px)}
.hero .wrap{order:1}
.hero__pic{order:2;display:block}
.hero__content{padding-block:6.5rem 1.2rem}
/* 300px is de mobiele maat van SpeedyService en Excellent; boven ~880px venster mag
hij meegroeien, anders staat hij verloren in een hero die dan nog 1000px breed is. */
.hero__person{position:static;right:auto;bottom:auto;display:block;
height:auto;max-height:clamp(375px,42.5vw,450px);max-width:86%;margin:0 auto}
}
.hero__content{position:relative;z-index:1;padding-block:6rem clamp(9rem,7rem + 18vh,18rem);max-width:48rem;color:#fff}
/* Groter en met schaduw dan elders: hij staat op bewegend videobeeld dat
plaatselijk licht is, daar valt de standaardmaat van .eyebrow tegen weg. */
.hero .eyebrow{color:var(--goud-light);font-size:.98rem;font-weight:800;letter-spacing:.11em;
text-shadow:0 2px 12px rgba(0,0,0,.55)}
.hero .eyebrow::before{background:var(--goud-light);width:32px;height:3px}
@media(max-width:560px){.hero .eyebrow{font-size:.88rem}}
.hero__title{font-size:clamp(2.5rem,6.2vw,4.5rem);text-shadow:0 4px 30px rgba(0,0,0,.35);text-wrap:balance}
/* Hier stond white-space:nowrap op de em, met een uitzondering onder 430px. Dat kwam
uit een ander sjabloon waar de em "zonder aanbetaling" was. Deze em is "voor de
eerlijkste prijs", zes tekens langer en op 2,5rem ruim 550px breed. Gevolg: vanaf
430px (precies een iPhone Pro Max) gaf de nowrap het blok een min-content breedte
van 550px, waardoor niet alleen de kop maar de HELE pagina breder werd dan het
scherm; ook de subtekst en de Offerte-knop in de topbalk vielen eraf.
Een vaste pixelgrens is hier sowieso verkeerd, want die hangt af van de zinslengte.
text-wrap:balance verdeelt de regels netjes zonder ooit te overflowen. */
.hero__title em{font-style:normal;color:#fff;background:linear-gradient(180deg,transparent 74%,rgba(212,175,55,.95) 74%);padding-inline:.06em}
.hero__sub{margin-top:1.1rem;font-size:clamp(1.05rem,1.4vw,1.28rem);max-width:34rem;color:rgba(255,255,255,.92);text-shadow:0 2px 14px rgba(0,0,0,.4)}
/* reveal */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
/* De hero is een uitzondering en dat is geen smaakkwestie. De h1 is het LCP-element,
en met opacity:0 telt hij pas als "geschilderd" zodra de IntersectionObserver hem
vrijgeeft. Lighthouse mat daardoor op mobiel 3,0 s element-render-delay bij een
time-to-first-byte van 0,12 s: de server was snel, de tekst stond alleen te wachten
op JavaScript. LCP kwam daarmee op 3,8 tot 4,5 s over alle zes de landers.
Hier blijft opacity dus 1 en schuift alleen de transform. Het element wordt meteen
geschilderd, de beweging blijft, en de inline transition-delay doet nog steeds de
stagger. Valt JS uit, dan staat de hero gewoon 14px lager in plaats van onzichtbaar. */
.hero [data-reveal]{opacity:1;transform:translateY(14px)}
.hero [data-reveal].in{transform:none}
/* Groepen komen element voor element binnen in plaats van als een blok. De
beginstand staat in CSS, niet in JS, anders flitsen ze eerst zichtbaar voorbij
voordat het script ze verbergt. */
[data-reveal-groep] > *{opacity:0;transform:translateY(16px);
transition:opacity .55s var(--ease),transform .55s var(--ease)}
[data-reveal-groep] > *.in{opacity:1;transform:none}
.hero [data-reveal]{transition-duration:.85s}
/* ---------- Offerte-balk ---------- */
.offerte-overlay{position:relative;margin-top:0;z-index:6;padding:0 clamp(16px,4vw,40px) 60px;background:var(--paper-2);display:flow-root}
.of-wrap{position:relative;max-width:1280px;margin:clamp(-104px,-7.5vw,-56px) auto 0}
.of-box{position:relative;z-index:2;background:var(--goud-fill);color:#fff;border-radius:28px;padding:clamp(28px,3.4vw,44px) clamp(28px,4vw,52px);box-shadow:0 24px 60px -10px rgba(23,102,61,.42)}
.of-trust{position:absolute;top:20px;right:24px;z-index:5}
/* ---------- Keurmerken en merkenchips ----------
Google en de partnerlogo's (DMEGC, Sigenergy, Enphase, SolarEdge, Daikin)
zijn merken van derden: hun kleuren mogen niet hertint worden. Daarom staan
ze altijd op een witte chip, los van het groen en bijna-zwart van Solar
Green. Per logo een eigen hoogte, want ze verschillen sterk in verhouding
en moeten optisch even zwaar wegen. */
.keurmerken{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Alle chips exact even groot. De logo's verschillen sterk in verhouding,
dus schalen ze met object-fit binnen dezelfde doos. De max-height per logo
is de optische correctie: zonder dat oogt een breed liggend logo veel
kleiner dan een staand. */
.keurmerk{width:98px;height:60px;padding:9px;flex:none;
display:grid;place-items:center;background:#fff;border-radius:10px;
box-shadow:0 4px 14px -4px rgba(0,0,0,.18);
transition:transform .2s ease,box-shadow .2s ease}
a.keurmerk:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(0,0,0,.25)}
.keurmerk img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.keurmerk--google img{max-height:23px}
/* Chips met reviewcijfer: logo boven, cijfer eronder; Klantenvertellen heeft een
vierkant beeldmerk en krijgt het cijfer ernaast. */
.keurmerk--score{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.keurmerk__cijfer{font-weight:800;font-size:1.02rem;line-height:1;color:var(--ink)}
.keurmerk--score.keurmerk--google img{max-height:19px}
@media(max-width:560px){
.keurmerken{gap:6px}
.keurmerk{width:78px;height:48px;padding:6px;border-radius:8px}
.keurmerk--google img{max-height:17px}
.keurmerk--score.keurmerk--google img{max-height:14px}
.keurmerk__cijfer{font-size:.88rem}
}
.of-title{font-family:"Montserrat",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.05;font-size:clamp(24px,2.4vw,34px);margin:0 0 6px;color:#fff}
.of-sub{font-family:"Source Sans 3",sans-serif;font-size:14px;color:#fff;margin:0 0 22px}
.of-form{margin:0}
.of-pill{display:grid;grid-template-columns:1.25fr 1px 1.15fr auto;align-items:stretch;gap:0;background:#fff;border-radius:999px;overflow:hidden;padding:8px;box-shadow:0 8px 24px rgba(20,20,20,.18)}
.of-field{display:flex;flex-direction:column;justify-content:center;padding:8px 18px;min-width:0;cursor:text}
.of-field span{font-family:"Source Sans 3",sans-serif;font-size:11px;font-weight:700;color:var(--ink);letter-spacing:.02em;line-height:1;margin:0 0 4px;text-transform:uppercase;opacity:.78}
.of-field input,.of-field select{border:none;outline:none;background:none;font-family:"Source Sans 3",sans-serif;font-size:16px;color:var(--ink);width:100%;padding:0;line-height:1.4;-webkit-appearance:none;appearance:none}
.of-field input::placeholder{color:#9b9b9b}
.of-field select{cursor:pointer;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 0 center;padding-right:18px}
.of-field input[type="date"]{font-family:"Source Sans 3",sans-serif;color:var(--ink)}
.of-field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.15);cursor:pointer;opacity:.7}
.of-divider{background:rgba(20,20,20,.12);width:1px;align-self:center;height:38px}
/* outline:none op de pill-velden schakelt ook :focus-visible uit; hier een
eigen donkere ring, want de globale groene ring valt weg op de witte pill
en op de groene kaart eromheen. */
.of-field input:focus-visible,.of-field select:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:6px}
/* Op de groene vlakken haalt de merkgroene focusring geen 3:1; wit wel (5,1:1). */
.of-box :focus-visible{outline-color:#fff}
.leadblock__panel :focus-visible{outline-color:var(--ink)}
.of-cta{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border:none;border-radius:999px;padding:14px 24px;font-family:"Source Sans 3",sans-serif;font-weight:700;font-size:15px;letter-spacing:.005em;cursor:pointer;transition:background .2s ease,transform .2s ease,box-shadow .2s ease;box-shadow:0 6px 16px -4px rgba(10,15,12,.45);white-space:nowrap}
.of-cta:hover{background:#000;color:var(--goud-light);transform:translateY(-1px);box-shadow:0 10px 22px -4px rgba(10,15,12,.6)}
.of-cta svg{width:16px;height:16px}
@media(max-width:880px){.of-trust{position:static;justify-content:flex-start;flex-wrap:wrap;margin-bottom:14px}}
@media(max-width:760px){
.offerte-overlay{padding-bottom:48px}
.of-wrap{margin-top:-48px}
.of-pill{grid-template-columns:1fr;border-radius:18px;padding:8px;gap:6px}
.of-divider{display:none}
.of-field{padding:10px 16px;border-bottom:1px solid rgba(20,20,20,.08)}
.of-cta{justify-content:center;border-radius:14px;padding:14px 20px}
}
/* ---------- Reviews - trust statement + review marquee ---------- */
.rev{position:relative;background:var(--paper);padding-block:clamp(3rem,6vw,5rem);overflow:hidden}
.rev__orb{position:absolute;z-index:0;right:-12%;top:-12%;width:min(620px,60vw);aspect-ratio:1;
background:radial-gradient(circle,rgba(212,175,55,.16),transparent 62%);pointer-events:none}
.rev__mark{position:absolute;z-index:0;pointer-events:none;right:2%;top:34%;transform:translateY(-50%);
width:min(300px,26vw);aspect-ratio:1;opacity:.14;
background:url("../img/mark-goud.webp") center/contain no-repeat}
.rev__top{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.rev__intro .eyebrow{margin-bottom:.8rem}
.rev__title{font-size:clamp(1.9rem,3.8vw,2.9rem)}
.rev__title em{font-style:normal;color:var(--goud)}
.rev__lead{margin-top:1rem;color:var(--muted);max-width:44ch}
.rev__src{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.7rem}
.rev__score{position:relative;color:#fff;border-radius:24px;padding:clamp(1.8rem,3vw,2.8rem);text-align:center;overflow:hidden;box-shadow:var(--shadow);background:#12182A url("../img/score-bg.webp") center/cover no-repeat}
.rev__score::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(12,48,29,.42) 0%,rgba(10,42,26,.72) 52%,rgba(7,32,19,.90) 100%)}
.rev__scoreglow{position:absolute;inset:0;background:none;pointer-events:none}
.rev__num{position:relative;font-family:"Montserrat",system-ui,sans-serif;font-weight:700;line-height:.88;font-size:clamp(4.4rem,12vw,7.5rem);letter-spacing:-.03em}
.rev__stars{position:relative;color:#FBBC05;font-size:1.55rem;letter-spacing:.14em;margin-top:.25rem}
.rev__count{position:relative;margin-top:.7rem;color:rgba(255,255,255,.8);font-size:1.04rem}
.rev__count strong{color:#fff;font-weight:800}
.rev__grid{position:relative;z-index:1;margin-top:clamp(2rem,4vw,3rem);
display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.rcard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
padding:1.5rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.75rem;margin:0}
.rcard__stars{color:#FBBC05;font-size:.95rem;letter-spacing:.12em}
.rcard blockquote{margin:0;font-size:1.04rem;line-height:1.5;color:var(--ink)}
.rcard figcaption{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:.86rem;color:var(--muted)}
.rcard figcaption b{color:var(--ink);font-weight:700}
.rcard__src{display:inline-flex;align-items:center;gap:.4rem;font-weight:700}
.rcard__src .dot{width:8px;height:8px;border-radius:50%;background:var(--goud-deep)}
.rev__cta{position:relative;z-index:1;margin-top:clamp(2rem,4vw,3rem);display:flex;justify-content:center}
@media (max-width:860px){.rev__top{grid-template-columns:1fr}.rev__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.rev__grid{grid-template-columns:1fr}}
/* ---------- Story - fotoblokken met tekst ---------- */
.story{padding-block:clamp(2.6rem,6vw,4.5rem);background:var(--paper)}
/* Zelfde regel als bij .reasons__grid: foto even lang als de tekst ernaast. */
.story__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4.5vw,3.8rem);align-items:stretch}
.story__row + .story__row{margin-top:clamp(2.6rem,5vw,4.5rem)}
/* Startpunt van de afwisseling omgedraaid (verzoek 2-aug): het eerste blok heeft de
FOTO RECHTS en de tekst links. Een tweede blok wisselt daar vanzelf weer op terug. */
.story__row:nth-child(odd) .story__media{order:2}
.story__media{position:relative;isolation:isolate}
.story__media::before{content:"";position:absolute;inset:0;background:var(--goud);
border-radius:calc(var(--radius) + 12px);transform:rotate(-4deg) translate(-14px,14px);z-index:-1}
.story__photo{border-radius:calc(var(--radius) + 4px);overflow:hidden;height:100%;min-height:320px;box-shadow:var(--shadow);transform:rotate(1deg)}
.story__photo img{width:100%;height:100%;object-fit:cover}
.story__body .eyebrow{margin-bottom:.8rem}
.story__body h2{font-size:clamp(1.6rem,3vw,2.3rem);max-width:18ch}
.story__body p{margin-top:1.1rem;color:var(--muted);font-size:1.05rem;line-height:1.65;max-width:46ch}
.story__cta{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.7rem}
@media (max-width:860px){
.story__row{grid-template-columns:1fr;gap:1.6rem}
/* Gestapeld staat de foto altijd boven, ongeacht de afwisseling op desktop.
Reset daarom ALLE rijen, niet alleen de even; anders zakt de foto onder de tekst
zodra het startpunt van de afwisseling verandert. */
.story__row .story__media{order:0}
.story__media{max-width:32rem}
/* Gestapeld staat er geen tekstkolom meer naast, dus is er ook geen hoogte om
over te nemen. Zonder dit klapt height:100% dicht tot de min-height. */
.story__photo{aspect-ratio:4/3;height:auto;min-height:0}
}
/* ---------- Geen aanbetaling / voorraad ----------
Rode kaart met tekst links en de foto rechts vol in de kolom. De foto bloedt
tot aan de kaartrand, vandaar overflow:hidden op de kaart zelf. */
/* padding-bottom is 0: de calculator sluit er direct op aan en levert de
onderruimte van het geheel. */
.voorraad{padding:clamp(2.6rem,5vw,4.2rem) 0 0;background:var(--paper)}
.voorraad__card{position:relative;isolation:isolate;overflow:hidden;
display:grid;grid-template-columns:1.18fr .82fr;
background:var(--goud-fill);color:#fff;border-radius:28px 28px 0 0;box-shadow:var(--shadow)}
/* Merkteken als watermerk, net als in de reasons-sectie. */
.voorraad__card::before{content:"";position:absolute;z-index:0;pointer-events:none;
right:36%;top:50%;transform:translateY(-50%);width:min(300px,24%);aspect-ratio:1;opacity:.07;
background:url("../img/mark-wit.webp") center/contain no-repeat}
.voorraad__body{position:relative;z-index:1;padding:clamp(1.6rem,2.8vw,2.4rem) clamp(1.6rem,3vw,2.6rem)}
.voorraad__body .eyebrow{color:#fff;margin-bottom:.6rem}
.voorraad__body .eyebrow::before{background:rgba(255,255,255,.75)}
.voorraad__body h2{font-size:clamp(1.45rem,2.5vw,1.95rem);max-width:20ch}
.voorraad__body p{margin-top:.7rem;color:rgba(255,255,255,.92);max-width:54ch;font-size:.95rem}
.voorraad__media{position:relative;min-height:100%}
.voorraad__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
/* Top-zware foto's: bedieningskop van de unit en het gezicht van de monteur zitten
allebei bovenin en er zit geen ruimte boven zijn hoofd. Op mobiel is dit blok een
band van 260px, en dan snijdt 35% net door zijn haar. Bovenlangs uitsnijden dus;
op desktop verandert er niets, daar loopt de foto over de breedte over. */
.voorraad__media img.is-topzwaar{object-position:center top}
@media (max-width:860px){
.voorraad__card{grid-template-columns:1fr}
.voorraad__card::before{right:6%;top:auto;bottom:34%;transform:none;width:min(200px,38%)}
.voorraad__media{min-height:260px;order:-1}
.voorraad__media img{position:static;height:260px}
}
/* ---------- Zonnepanelen-calculator ----------
Zit met margin-top:0 en vierkante bovenhoeken tegen .voorraad__card aan, samen
vormen ze een blok. Alleen de buitenhoeken zijn rond. */
.calc{padding:0 0 clamp(2.6rem,5vw,4.2rem);background:var(--paper)}
.calc__card{background:#fff;border-radius:0 0 28px 28px;box-shadow:var(--shadow);
padding:clamp(1.4rem,2.6vw,2.1rem) clamp(1.6rem,3vw,2.6rem);
display:grid;grid-template-columns:1fr auto;gap:clamp(1.2rem,2.6vw,2.4rem);
align-items:start;column-gap:clamp(1.4rem,3vw,3rem)}
.calc__intro{grid-column:1}
.calc__intro h3{font-size:clamp(1.1rem,1.7vw,1.35rem)}
.calc__intro p{margin-top:.35rem;color:var(--muted);font-size:.92rem;max-width:56ch}
.calc__velden{grid-column:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.calc__veld{display:flex;flex-direction:column;gap:.25rem;position:relative}
.calc__veld>span{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.calc__veld input,.calc__veld select{
font-family:inherit;font-size:1rem;font-weight:700;color:var(--ink);
border:1px solid var(--line);border-radius:12px;padding:.6rem .7rem;width:100%;
background:var(--paper);-webkit-appearance:none;appearance:none}
.calc__veld input:focus,.calc__veld select:focus{outline:2px solid var(--goud);outline-offset:1px}
.calc__veld i{position:absolute;right:.7rem;bottom:.72rem;font-style:normal;font-size:.82rem;color:var(--muted);pointer-events:none}
.calc__veld--sel{position:relative}
.calc__veld--sel select{padding-right:2rem}
.calc__veld--sel::after{content:"";position:absolute;right:.95rem;bottom:1.05rem;width:7px;height:7px;
border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);pointer-events:none}
.calc__extras{grid-column:1;border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.calc__extras legend{float:left;width:100%;font-size:.7rem;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.calc__extras label{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
border:1px solid var(--line);border-radius:999px;padding:.42rem .8rem;font-size:.88rem;font-weight:700;
transition:border-color .2s ease,background .2s ease}
.calc__extras label:has(input:checked){border-color:var(--goud);background:var(--goud-soft);color:var(--goud-deep)}
.calc__extras input{accent-color:var(--goud-fill);width:15px;height:15px;margin:0}
/* Uitkomstpaneel rechts, over alle rijen heen. */
.calc__uit{grid-column:2;grid-row:1 / span 3;align-self:stretch;
display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.15rem;
background:var(--ink);color:#fff;border-radius:18px;padding:clamp(1.1rem,2vw,1.6rem);min-width:15rem}
.calc__label{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.calc__getal{font-family:"Montserrat",system-ui,sans-serif;font-weight:700;font-size:clamp(2.2rem,4vw,3rem);line-height:1}
.calc__bereik{font-size:.9rem;color:rgba(255,255,255,.75)}
.calc__detail{font-size:.82rem;color:rgba(255,255,255,.6);margin-top:.35rem;max-width:22ch}
.calc__uit .btn{margin-top:.9rem;width:100%}
/* Tweede route naast de offerteknop, bewust een link en geen tweede knop:
in dit smalle paneel gaan twee knoppen boven elkaar overheersen. */
.calc__bel{display:inline-flex;align-items:center;gap:.45rem;margin-top:.3rem;
padding-block:.3rem;
font-size:.82rem;font-weight:700;color:rgba(255,255,255,.72);text-decoration:underline;
text-underline-offset:3px}
.calc__bel:hover{color:#fff}
.calc__bel svg{width:15px;height:15px;flex:none}
@media (max-width:860px){
.calc__card{grid-template-columns:1fr}
.calc__uit{grid-column:1;grid-row:auto;min-width:0}
.calc__velden{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){.calc__velden{grid-template-columns:1fr}}
/* ---------- 50-GRADENCHECK ----------
Zelfde plek en dezelfde kaart als de panelencalculator hiernaast, maar de
uitkomst kan hier niet in een smalle rechterkolom staan. De panelenversie
toonde een getal van twee woorden; deze geeft een advies van vier tot zes
zinnen, inclusief kanttekeningen over de VvE en de plek van de buitenunit.
Daarom liggen de velden boven en gaat de uitkomst over de volle breedte, met
het advies links en de uitleg rechts. Op mobiel valt dat vanzelf onder elkaar.
De knop staat TUSSEN het getal en de uitleg en niet eronder: op een telefoon
zakt hij anders onder vijf zinnen weg en ziet niemand hem meer. */
.wpc__card{background:#fff;border-radius:0 0 28px 28px;box-shadow:var(--shadow);
padding:clamp(1.2rem,2.6vw,1.9rem) clamp(1.1rem,3vw,2.2rem) clamp(1.4rem,3vw,2rem);
display:grid;gap:clamp(.9rem,2vw,1.3rem)}
.wpc__intro h3{font-size:clamp(1.1rem,1.7vw,1.35rem);margin:0}
.wpc__intro p{margin:.35rem 0 0;color:var(--muted);font-size:.92rem;max-width:62ch}
.wpc__velden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem .8rem}
.wpc__veld{display:flex;flex-direction:column;gap:.25rem;position:relative;min-width:0}
.wpc__veld>span{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* Pijltje als achtergrond OP de select en niet als ::after op de wrapper: twee
van de vijf velden hebben een hintregel eronder, en een pseudo-element dat op
de wrapper staat zakt dan onder het veld uit. */
.wpc__veld select{
appearance:none;-webkit-appearance:none;width:100%;min-width:0;
padding:.72rem 2.1rem .72rem .8rem;border:1px solid var(--line);border-radius:12px;
font:inherit;font-size:.94rem;color:var(--ink);cursor:pointer;
background-color:var(--paper);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235F5F5F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right .85rem center;background-size:11px 7px}
.wpc__veld select:focus{outline:2px solid var(--goud);outline-offset:1px}
/* Hint onder de select en niet in het label: een dichtgeklapte select kapt een
lang label af, en juist bij deze twee velden zit de uitleg die het veld
invulbaar maakt. */
.wpc__hint{margin:.3rem 0 0;font-size:.76rem;line-height:1.4;color:var(--muted)}
.wpc__uit{background:var(--ink);color:#fff;border-radius:var(--radius);
padding:clamp(1.1rem,2.4vw,1.5rem) clamp(1.1rem,2.6vw,1.6rem);
display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
gap:clamp(.9rem,2.4vw,1.8rem);align-items:start}
.wpc__kop{display:block;font-family:"Montserrat",system-ui,sans-serif;font-weight:600;
font-size:clamp(1.05rem,1.9vw,1.28rem);line-height:1.25;color:var(--goud-light)}
.wpc__getal{display:block;margin-top:.5rem;font-family:"Montserrat",system-ui,sans-serif;font-weight:700;
font-size:clamp(1.35rem,2.6vw,1.85rem);line-height:1.15}
.wpc__sub{display:block;margin-top:.2rem;font-size:.87rem;color:rgba(255,255,255,.75)}
/* Deze knop is volle breedte in een smalle kolom en heeft een lang label. De
globale .btn staat op white-space:nowrap, dus zonder deze uitzondering loopt
de tekst op een telefoon buiten de pil. Alleen hier omkeren, met een ruimere
regelafstand omdat .btn op line-height:1 staat. */
.wpc__uit .btn{margin-top:.9rem;width:100%;white-space:normal;line-height:1.3;text-align:center}
.wpc__detail{margin:0;font-size:.85rem;line-height:1.6;color:rgba(255,255,255,.72)}
.wpc__bel{display:inline-flex;align-items:center;gap:.45rem;margin-top:.6rem;
color:rgba(255,255,255,.72);font-size:.82rem;font-weight:600;text-decoration:none}
.wpc__bel:hover{color:#fff}
.wpc__bel svg{width:15px;height:15px;flex:none}
.wpc__bron{margin:0;font-size:.76rem;line-height:1.5;color:var(--muted)}
/* Zonder gasaansluiting valt er niets te rekenen. Dan verdwijnt de lege
getalregel en wordt bellen de eerste actie in plaats van de derde. */
.wpc__card.is-bel .wpc__getal,
.wpc__card.is-bel .wpc__sub{display:none}
.wpc__card.is-bel .wpc__uit .btn{margin-top:.6rem}
@media (max-width:860px){
.wpc__uit{grid-template-columns:minmax(0,1fr)}
.wpc__velden{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:460px){.wpc__velden{grid-template-columns:1fr}}
/* ---------- Waarom - split (grote aerial + oranje uitgeknipte iconen) ---------- */
.waarom{background:#12182A;color:#fff;padding-block:clamp(3rem,6vw,5rem)}
.waarom__grid{display:grid;grid-template-columns:1.32fr .8fr;gap:clamp(1.4rem,3vw,3rem);align-items:stretch}
.waarom__photo{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);min-height:clamp(380px,42vw,580px)}
.waarom__photo img{width:100%;height:100%;object-fit:cover;object-position:22% center;display:block}
.waarom__head .eyebrow{color:#E8CE79}
.waarom__head .eyebrow::before{background:#E8CE79}
.waarom__head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-top:.6rem}
.waarom__list{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1.4rem}
/* Bel-knop hier als witte pill (.btn--bel): .btn--ink is #12182A en dat is
precies de achtergrond van deze sectie, dus die zou onzichtbaar worden. */
.waarom__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
/* Beide knoppen even groot, ook wanneer ze onder elkaar wrappen. */
.waarom__cta .btn{flex:1 1 0;min-width:max-content}
.wmini{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1rem;transition:transform .3s var(--ease),background .3s,border-color .3s}
.wmini:hover{transform:translateY(-3px);background:rgba(255,255,255,.08);border-color:rgba(127,214,164,.4)}
.wmini h3{font-family:"Montserrat",system-ui,sans-serif;font-size:1.05rem;margin:0 0 .25rem;display:flex;align-items:center;gap:.55rem}
.wmini h3 img{width:30px;height:30px;flex:none}
.wmini p{color:rgba(255,255,255,.7);font-size:.9rem;margin:0}
@media(max-width:880px){.waarom__grid{grid-template-columns:1fr}}
@media(max-width:560px){.waarom__list{grid-template-columns:1fr}}
/* ---------- Ons paneel - doorsnede plus specblad ----------
Groene kopbalk met dakfoto rechts (zelfde patroon als .voorraad__card),
daaronder vastgeplakt de witte kaart met links de doorsnede en rechts de
specs. De doorsnede is met CSS-lagen getekend, geen plaatje: schaalt mee en
kan niet verouderen. Het merkvlak is wit omdat het DMEGC-logo rood op
donkerblauw is en dat op het merkgroen vloekt. */
.paneel{padding:clamp(2.6rem,5vw,4.2rem) 0 0;background:var(--paper)}
.paneel__kop{position:relative;isolation:isolate;overflow:hidden;
display:grid;grid-template-columns:1.18fr .82fr;
background:var(--goud-fill);color:#fff;border-radius:28px 28px 0 0;box-shadow:var(--shadow)}
.paneel__kop::before{content:"";position:absolute;z-index:0;pointer-events:none;
right:36%;top:50%;transform:translateY(-50%);width:min(300px,24%);aspect-ratio:1;opacity:.07;
background:url("../img/mark-wit.webp") center/contain no-repeat}
.paneel__kopt{position:relative;z-index:1;padding:clamp(1.6rem,2.8vw,2.4rem) clamp(1.6rem,3vw,2.6rem)}
.paneel__kopt .eyebrow{color:#fff;margin-bottom:.6rem}
.paneel__kopt .eyebrow::before{background:rgba(255,255,255,.75)}
.paneel__kopt h2{font-size:clamp(1.45rem,2.5vw,1.95rem);max-width:22ch}
.paneel__kopt p{margin-top:.7rem;color:rgba(255,255,255,.92);max-width:54ch;font-size:.95rem}
.paneel__media{position:relative;min-height:100%}
.paneel__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
/* Merkbadge op de foto, zelfde plek en gedrag als .reasons__badge. */
.paneel__badge{position:absolute;right:16px;bottom:16px;z-index:1;
background:#fff;border-radius:14px;padding:.7rem 1rem;box-shadow:var(--shadow-sm);
display:grid;justify-items:center;gap:.1rem;text-align:center}
.paneel__badge>img{height:22px;width:auto;object-fit:contain;margin-bottom:.35rem}
.paneel__badge b{font-family:"Montserrat",system-ui,sans-serif;font-size:1.45rem;line-height:1;color:var(--goud-deep)}
.paneel__badge b i{font-style:normal;font-size:.45em;margin-left:.1em}
.paneel__badge>span{font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* Links de doorsnede, rechts het specblad in twee smalle kolommen. De
verhouding is bewust scheef: de tekening heeft weinig breedte nodig, de
speclijst juist veel, anders vallen waarden als "1762 x 1134 mm" over twee
regels. Het blok is expres kort gehouden. */
.paneel__body{background:#fff;border-radius:0 0 28px 28px;box-shadow:var(--shadow);
padding:clamp(1.4rem,2.6vw,2.1rem) clamp(1.6rem,3vw,2.6rem) clamp(1.6rem,3vw,2.4rem);
display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(1.4rem,3.4vw,3rem);align-items:start}
.paneel__kolomkop{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);margin:0 0 .9rem}
/* Doorsnede: gestapelde lagen in een zwart "frame". */
.paneel__stack{display:grid;gap:6px;border:3px solid #1a1a1a;border-radius:10px;padding:7px;background:#1a1a1a}
.paneel__laag{position:relative;min-width:0;overflow:hidden;border-radius:4px;
display:flex;align-items:center;padding:0 .8rem;font-size:.76rem;font-weight:700}
.paneel__laag--glas{height:34px;background:linear-gradient(100deg,#dbeaf3 0%,#f4fafd 42%,#cfe3ee 100%);color:#33556a}
.paneel__laag--eva{height:16px;background:#f2f2ef;color:#8a8a82;font-size:.68rem;font-weight:600}
.paneel__laag--cel{height:56px;background:linear-gradient(135deg,#14181c 0%,#232a31 50%,#14181c 100%);color:#cfe3ee}
.paneel__laag--cel::after{content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;
background:repeating-linear-gradient(90deg,transparent 0 26px,rgba(255,255,255,.07) 26px 27px)}
.paneel__lmaat{margin-left:auto;padding-left:.6rem;font-weight:800;opacity:.75}
.paneel__frame{margin-top:.55rem;font-size:.74rem;color:var(--muted);text-align:center}
/* min-width:0 op dt en dd: zonder dat houdt flex de regels op hun
min-content-breedte en wordt de kaart op smal scherm breder dan het scherm. */
.paneel__specs{margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
column-gap:clamp(1rem,2.4vw,2rem)}
.paneel__specs>div{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
padding:.58rem .15rem;border-bottom:1px solid var(--line);font-size:.87rem}
.paneel__specs dt{color:var(--muted);min-width:0}
.paneel__specs dd{margin:0;font-weight:800;text-align:right;min-width:0}
.paneel__voet{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
margin-top:.6rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.paneel__bron{flex:1 1 22rem;color:var(--muted);font-size:.82rem;line-height:1.5;margin:0}
.paneel__voet .btn{flex:none}
@media (max-width:900px){
.paneel__kop{grid-template-columns:1fr}
.paneel__kop::before{right:6%;top:auto;bottom:34%;transform:none;width:min(200px,38%)}
.paneel__media{order:-1;min-height:260px}
.paneel__media>img{position:static;height:260px}
.paneel__body{grid-template-columns:minmax(0,1fr)}
/* Eén kolom, maar label en waarde blijven naast elkaar: de waarden zijn kort
genoeg en label-boven-waarde maakte het blok op mobiel ruim 300px langer. */
.paneel__specs{grid-template-columns:minmax(0,1fr)}
.paneel__laag{font-size:.7rem;padding:0 .55rem}
}
/* ---------- ONZE WARMTEPOMPEN ----------
Waar de zonnepanelenpagina één paneel toont met een doorsnede ernaast, staan
hier vier producten. Ze vallen uiteen in twee groepen die de bezoeker eerst
moet kiezen (hybride naast de ketel, of volledig elektrisch), en pas daarna in
twee merken. Die volgorde zit in de opmaak: eerst een groepskop over de volle
breedte, daaronder de twee merken naast elkaar.
De vier productrenders zijn vrijstaande PNG's van de fabrikanten zelf, dus met
alpha. Ze zijn allemaal donker (Quatt antraciet met koper, DeWarmte zwart met
brons), daarom staat er een lichte mintvlak achter in plaats van wit: op wit
valt een zwarte unit uit elkaar, op mint blijft hij één vorm. */
.wpomp__body{grid-template-columns:minmax(0,1fr);gap:clamp(1.6rem,3vw,2.4rem)}
.wpomp__groep{display:grid;gap:.9rem}
.wpomp__groepkop{display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem;margin:0}
.wpomp__groepkop b{font-family:"Montserrat",system-ui,sans-serif;font-weight:600;
font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--ink)}
.wpomp__groepkop span{color:var(--muted);font-size:.86rem}
.wpomp__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,1.8vw,1.2rem)}
.wpomp{display:flex;flex-direction:column;min-width:0;
background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.wpomp__beeld{position:relative;aspect-ratio:16/10;display:grid;place-items:center;padding:.9rem;
background:radial-gradient(120% 100% at 50% 12%,#FCF8EC 0%,var(--goud-soft) 100%)}
/* Absoluut, want in de flow bepaalt de intrinsieke maat van de render de rijhoogte en
doet de aspect-ratio hierboven niets: max-height:100% is dan circulair. De staande
beelden (678x678, 770x878) duwden de kaart zo 200 px open.
inset:0 + margin:auto centreert; de max-maten geven elke render dezelfde lucht,
of hij nu liggend (526x331) of vierkant (678x678) is. Vul je de box wel helemaal,
dan staat het product juist groter en benauwder dan voor het inkorten. */
.wpomp__beeld img{position:absolute;inset:0;margin:auto;width:auto;height:auto;
max-width:80%;max-height:74%;object-fit:contain}
/* Woordmerk op de kaart, niet op de foto: de renders hebben het merk er al op
staan, maar te klein om op kaartformaat te lezen. */
/* z-index moet, anders schildert het absoluut geplaatste beeld hierboven over de
badge heen: het staat later in de DOM en beide zijn positioned. */
.wpomp__merk{position:absolute;left:12px;top:12px;z-index:1;
background:#fff;border-radius:9px;padding:.3rem .55rem;box-shadow:var(--shadow-sm);
font-family:"Montserrat",system-ui,sans-serif;font-weight:600;font-size:.76rem;color:var(--ink);line-height:1}
.wpomp__in{display:flex;flex-direction:column;flex:1;gap:.55rem;padding:clamp(.9rem,2vw,1.2rem)}
.wpomp__in h3{margin:0;font-size:1.02rem;line-height:1.3}
.wpomp__in>p{margin:0;color:var(--muted);font-size:.87rem;line-height:1.55}
.wpomp__specs{margin:.15rem 0 0;display:grid}
.wpomp__specs>div{display:flex;justify-content:space-between;align-items:baseline;gap:.7rem;
padding:.44rem .1rem;border-bottom:1px solid var(--line);font-size:.83rem}
.wpomp__specs>div:last-child{border-bottom:0}
.wpomp__specs dt{color:var(--muted);min-width:0}
.wpomp__specs dd{margin:0;font-weight:800;text-align:right;min-width:0}
/* Blijft onderaan hangen, ook als de ene kaart een specregel minder heeft dan
de andere. Zonder de auto-marge staan de twee zinnen op verschillende hoogte. */
.wpomp__voor{display:flex;align-items:flex-start;gap:.45rem;margin:auto 0 0;padding-top:.7rem;
color:var(--goud-deep);font-size:.83rem;font-weight:600;line-height:1.45}
.wpomp__voor svg{width:16px;height:16px;flex:none;margin-top:.14rem}
@media (max-width:760px){
.wpomp__grid{grid-template-columns:minmax(0,1fr)}
}
/* ---------- SigenStor-stapel (alleen thuisbatterij.html) ----------
Zelfde tekentruc als de paneeldoorsnede hierboven, maar nu staand opgebouwd
zoals het apparaat zelf: de Energy Controller bovenop, de accumodules eronder.
De onderste laag is gestippeld en dat is geen versiering: dat is de ruimte die
vrij blijft voor de modules die er later bij kunnen. Daarmee vertelt de
tekening het verhaal dat het tekstblok ernaast ook vertelt. */
/* Op de zonnepanelenlander staat hier een dronefoto en die mag links uitgelijnd
staan (object-position 22%). Op de batterijpagina staan de monteur en de
omvormer naast elkaar in het kader; met 22% schuift het venster naar links en
valt de omvormer er rechts af. Vandaar deze modifier, alleen daar. */
.waarom__photo--bat img{object-position:center}
.paneel__stack--accu{border-color:#C9CEDA;background:#C9CEDA;gap:5px}
.paneel__laag--ec{height:46px;color:#DFE9EE;
background:linear-gradient(135deg,#1E2740 0%,#333C44 55%,#1E2740 100%)}
.paneel__laag--mod{height:38px;color:#4A534F;border-left:3px solid #86D2C9;
background:linear-gradient(180deg,#FDFDFD 0%,#EEF0F5 100%)}
.paneel__laag--bij{height:32px;background:transparent;border:1px dashed #909D98;
color:#69756F;font-weight:600;font-size:.68rem;justify-content:center}
/* ---------- FAQ ---------- */
/* Lichtere band tussen story en lead-blok, zodat de FAQ optisch losstaat van het
formulier eronder. Werkt op native , dus zonder JavaScript. */
.faq{padding-block:clamp(3rem,6vw,5rem);background:var(--paper-2)}
.faq__head{max-width:42rem;margin:0 0 clamp(1.5rem,3vw,2.2rem)}
.faq__head .eyebrow{margin-bottom:.7rem}
.faq__head h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.faq__list{display:grid;gap:.7rem}
.faq__item{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-sm);
transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.faq__item:hover{box-shadow:var(--shadow)}
.faq__item[open]{border-color:var(--goud)}
.faq__item summary{
display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:clamp(1rem,1.8vw,1.25rem) clamp(1.1rem,2.2vw,1.55rem);
cursor:pointer;list-style:none;
font-family:"Montserrat",system-ui,sans-serif;font-weight:700;
font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.3;
transition:color .2s var(--ease);
}
/* Safari toont anders nog een eigen driehoekje naast onze plus. */
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--goud-deep)}
.faq__item summary:focus-visible{outline:3px solid var(--goud);outline-offset:-3px;border-radius:var(--radius)}
/* Plus die een min wordt: het verticale streepje klapt weg bij open. */
.faq__sign{
position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:50%;
background:var(--goud-soft);transition:background .25s var(--ease);
}
.faq__sign::before,.faq__sign::after{
content:"";position:absolute;top:50%;left:50%;background:var(--goud-deep);border-radius:2px;
}
.faq__sign::before{width:13px;height:2px;transform:translate(-50%,-50%)}
.faq__sign::after{width:2px;height:13px;transform:translate(-50%,-50%);transition:transform .25s var(--ease)}
.faq__item[open] .faq__sign{background:var(--goud-fill)}
.faq__item[open] .faq__sign::before,
.faq__item[open] .faq__sign::after{background:#fff}
.faq__item[open] .faq__sign::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__answer{
padding:0 clamp(1.1rem,2.2vw,1.55rem) clamp(1.1rem,2vw,1.35rem);
max-width:52rem;color:var(--muted);
}
.faq__answer p+p{margin-top:.7rem}
.faq__answer a{color:var(--goud-deep);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:620px){
.faq__item summary{font-size:1rem;gap:.7rem}
.faq__sign{width:24px;height:24px}
}
/* ---------- Lead-blok: foto + offerteformulier (liggend) ---------- */
.leadblock{padding-block:clamp(3rem,6vw,5rem)}
.leadblock__card{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
border-radius:28px;overflow:hidden;box-shadow:var(--shadow);background:#12182A}
/* De medewerkster is uitgesneden (transparante webp), dus haar hoogte en positie zijn
nu vrij te kiezen. Ze hing te laag omdat de oude foto de achtergrond ingebakken had
en het lege verloop bovenin gewoon meeschaalde. Nu staat ze op de bodem verankerd
en bepaalt --persoon-h hoe groot ze in het vlak staat. */
/* Achter haar het eigen dronebeeld van een wijk met panelen, met een groene sluier
eroverheen zodat het merk blijft kloppen en zij er los van blijft staan. Daarvoor
zat hier een vlak verloop, en dat oogde leeg. */
.leadblock__media{position:relative;min-height:480px;overflow:hidden;
background:linear-gradient(180deg,rgba(15,23,42,.58),rgba(15,23,42,.92)),
url("../img/keukens/hacker-eiland.webp") center/cover no-repeat}
/* Schalen op de BREEDTE van de kolom, niet op de hoogte van de kaart: het formulier
ernaast bepaalt die hoogte, en bij een lang formulier liep ze anders links en rechts
buiten beeld. max-height vangt het omgekeerde geval (korte, brede kolom op mobiel). */
.leadblock__persoon{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
width:100%;height:auto;max-width:100%;max-height:100%;
object-fit:contain;object-position:bottom center;z-index:2}
.leadblock__chips{position:absolute;inset:auto auto 0 0;z-index:3;width:100%;
display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
padding:clamp(1rem,2vw,1.4rem)}
.lbchip{display:flex;flex-direction:column;line-height:1.25;
background:rgba(255,255,255,.94);color:var(--ink);border-radius:14px;
padding:.5rem .8rem;font-size:.76rem;box-shadow:0 10px 24px -14px rgba(0,0,0,.6);
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.lbchip b{font-size:.98rem;font-weight:800;color:var(--goud-deep)}
/* Egaal merkgoud met navy tekst: wit op dit goud haalt geen enkele contrastdrempel
(zie :root), dus alle tekst in dit paneel is omgekeerd naar ink. */
.leadblock__panel{position:relative;color:var(--ink);padding:clamp(1.8rem,3.4vw,3rem);
background:var(--goud)}
.leadblock__panel .eyebrow{color:var(--ink)}
.leadblock__panel .eyebrow::before{background:var(--ink)}
.leadblock__panel h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-top:.55rem}
.leadblock__panel .lead-p{margin-top:.7rem;color:#2A3450;max-width:46ch}
/* Uitwijk boven het formulier voor wie liever appt. Wit op het donkere paneel, net
als .lead-google hieronder; de groene variant zou hier met het paneel vechten. */
.lf__wa{margin-top:1.1rem}
.lead-google{display:inline-flex;align-items:center;gap:8px;margin-top:1.1rem;background:#fff;color:var(--ink);border-radius:999px;padding:8px 14px;font-family:"Source Sans 3",sans-serif;font-size:13px;font-weight:600;box-shadow:0 6px 16px -6px rgba(0,0,0,.3)}
.lead-google__logo{height:14px;width:auto;flex-shrink:0}
.lead-google__stars{color:#FBBC05;letter-spacing:.05em;font-size:12px;line-height:1}
.lead-google strong{font-weight:800}
.lead-google__cnt{color:var(--muted);font-weight:600}
.lf{margin-top:1.4rem;display:flex;flex-direction:column;gap:.8rem}
/* align-items:start, anders rekken de kolommen mee met de hoogste. Het datumveld
werd hoger door het vinkje eronder, waardoor de pijl van "Type woning" (die aan
de onderkant hangt) los onder het invulveld kwam te zweven. */
.lf__row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;align-items:start}
.lf__field{display:flex;flex-direction:column;gap:.32rem;min-width:0}
.lf__field>span{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.lf__field input:not([type=checkbox]),.lf__field select,.lf__field textarea{border:0;border-radius:12px;background:#fff;color:var(--ink);
font-family:inherit;font-size:1rem;font-weight:600;padding:.72rem .85rem;width:100%;-webkit-appearance:none;appearance:none;
box-shadow:inset 0 0 0 1px rgba(18,24,42,.08),0 1.5px 4px rgba(10,15,30,.08)}
.lf__field textarea{font-weight:500;line-height:1.5;min-height:96px;resize:vertical}
.lf__field input:not([type=checkbox])::placeholder,.lf__field textarea::placeholder{color:#9b9b9b;font-weight:500}
.lf__field--sel{position:relative}
.lf__field--sel::after{content:"";position:absolute;right:.9rem;bottom:1rem;width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);pointer-events:none}
.lf__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.45rem}
.leadblock .btn--ink{--bg:#12182A}
@media(max-width:820px){
.leadblock__card{grid-template-columns:1fr}
/* Geen 16/10: dat is te laag voor een staand persoon, zij werd op borsthoogte
afgesneden en de drie chips vielen over haar heen. Een hogere strook plus de
chips naast elkaar in plaats van gestapeld. */
.leadblock__media{min-height:clamp(300px,74vw,380px);aspect-ratio:auto}
.leadblock__chips{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:.4rem}
.lbchip{font-size:.7rem;padding:.4rem .6rem;border-radius:12px}
.lbchip b{font-size:.86rem}
.lbchip--wijd{flex-basis:100%}
}
@media(max-width:460px){
.lf__row{grid-template-columns:1fr}
}
/* ---------- Footer (archieffilm + donkere overlay) ----------
De poster is de vaste ondergrond: staat er meteen, en blijft staan als de
video niet laadt, op mobiel, of bij reduced-motion. De donkere laag zit in
.foot__veil in plaats van in de achtergrond van .foot zelf, want die zou
onder de video vallen in plaats van erover. */
.foot{position:relative;color:#fff;overflow:hidden;isolation:isolate;
padding-block:clamp(3rem,6vw,5rem) 0;
background:#0B1020 url("../img/hero-achtergrond.webp") center 55%/cover no-repeat}
.foot__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:center 40%;z-index:-3;opacity:0;transition:opacity .9s ease}
.foot__video.is-playing{opacity:1}
.foot__veil{position:absolute;inset:0;z-index:-2;pointer-events:none;
background:linear-gradient(180deg,rgba(30,30,30,.86) 0%,rgba(18,18,18,.93) 100%)}
.foot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(70% 60% at 12% 0%,rgba(212,175,55,.24),transparent 58%)}
.foot__top{display:grid;grid-template-columns:1.7fr 1fr 1.35fr;gap:clamp(1.6rem,3.4vw,3rem)}
.foot__logo{width:clamp(180px,16vw,224px);height:auto}
.foot__tag{margin-top:1.1rem;color:rgba(255,255,255,.78);font-size:.97rem;line-height:1.6;max-width:42ch}
.foot__trust{margin-top:1.4rem}
.foot__col{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.foot__col h3{font-family:"Montserrat",system-ui,sans-serif;font-weight:700;font-size:1.06rem;margin-bottom:.9rem;color:#fff}
.foot__col a{color:rgba(255,255,255,.76);font-size:.96rem;display:inline-flex;align-items:center;gap:.55rem;
transition:color .2s var(--ease),transform .2s var(--ease)}
.foot__col a:not(.foot__cta):hover{color:var(--goud);transform:translateX(3px)}
.foot__col a svg{width:16px;height:16px;flex:none;color:var(--goud)}
.foot__cta{margin-bottom:.5rem;background:var(--goud);color:#fff;border-radius:999px;padding:.72rem 1.15rem;font-weight:700;
box-shadow:0 14px 30px -14px rgba(212,175,55,.9);transition:background .2s,transform .2s var(--ease)}
.foot__cta svg{color:#fff}
.foot__cta:hover{background:var(--goud-deep);transform:translateY(-2px)}
.foot__area{color:rgba(255,255,255,.58);font-size:.9rem;margin-top:.2rem}
.foot__bottom{margin-top:clamp(2rem,4vw,3.2rem);border-top:1px solid rgba(255,255,255,.14);padding-block:1.4rem;
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem}
.foot__bottom small{color:rgba(255,255,255,.6)}
.foot__legal{display:flex;gap:1.3rem}
.foot__legal a{color:rgba(255,255,255,.6);font-size:.88rem;transition:color .2s var(--ease)}
.foot__legal a:hover{color:var(--goud)}
@media (max-width:860px){
.foot__top{grid-template-columns:1fr 1fr}
.foot__brand{grid-column:1 / -1}
}
@media (max-width:560px){
.foot__top{grid-template-columns:1fr}
.foot__bottom{flex-direction:column;align-items:flex-start}
}
/* ---------- Responsive ---------- */
@media (max-width:880px){
}
@media (max-width:620px){
/* De app-knop wordt icoon-only en "Showroomafspraak" wordt "Afspraak". Met drie
items in de balk en dat lange woord erbij werd het logo op 390px van 106 naar
25px platgedrukt; zo staat het op 390px weer op ware breedte.
(.btn--bel staat er nog uit het sjabloon; die knop staat hier niet in de balk.) */
.topbar .btn--bel span.lbl,
.topbar .btn--wa span.lbl{display:none}
.topbar .btn--primary .lbl{display:none}
.topbar .btn--primary .lbl-kort{display:inline}
.topbar .btn{padding:.7rem .85rem}
/* Het logo is een brede lockup: op smalle schermen terugbrengen, anders
duwt het de app- en offerteknop van het scherm af. */
.topbar__logo img,
.topbar__logo img+img,
.topbar.is-stuck .topbar__logo img,
.topbar.is-stuck .topbar__logo img+img{height:48px} /* was 38px, +25% op verzoek 2-aug */
/* Liggende video in een staande hero wordt anders een uitvergrote sliver. */
.hero{min-height:min(76vh,600px)}
.hero__content{padding-block:6rem 5.5rem}
}
@media (prefers-reduced-motion:reduce){
/* .hero [data-reveal] staat er expliciet bij: die selector is specifieker dan
[data-reveal] alleen en zou anders de verschuiving van 14px laten staan. */
[data-reveal],.hero [data-reveal],[data-reveal-groep] > *{opacity:1;transform:none;transition:none}
}
/* Bij afdrukken staat er geen scroll, dus alles gewoon tonen. */
@media print{
[data-reveal],[data-reveal-groep] > *{opacity:1;transform:none;transition:none}
.hero__video{display:none}
}
/* ---------- Wat we doen - 4 blokken ---------- */
.services{padding-block:clamp(3.4rem,7vw,5.5rem)}
.services__head{max-width:42rem;margin:0 0 2.2rem}
.services__head .eyebrow{margin-bottom:.7rem}
.services__head h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.services__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.svc{border-radius:var(--radius);padding:1.7rem 1.5rem;color:#fff;display:flex;flex-direction:column;
transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.svc--ink{background:var(--ink)}
/* Echt goud, om en om met de donkere kaart. Wit op goud haalt 2,1:1, dus op deze kaart
draait de tekst om naar --ink: kop 8,4:1 en body 6,0:1. */
.svc--goud{background:var(--goud);color:var(--ink)}
.svc__ic{width:46px;height:46px;margin-bottom:1.1rem}
.svc__ic svg{width:100%;height:100%}
.svc--ink .svc__ic{color:var(--goud-light)}
.svc--goud .svc__ic{color:var(--ink)}
.svc h3{font-size:1.22rem;margin-bottom:.5rem}
.svc p{font-size:.95rem;line-height:1.55}
.svc--ink p{color:rgba(255,255,255,.74)}
.svc--goud p{color:rgba(18,24,42,.82)}
/* ---------- Werkwijze - 4 stappen ---------- */
/* Volle-breedte merkgroene band, tegenhanger van de zwarte .waarom-band. De
sectie is block-level, dus de achtergrond loopt vanzelf van rand tot rand.
--goud-fill en niet --goud: dat is per brandbook de variant die witte tekst
mag dragen (wit haalt hier 5,08:1, het merkgroen zelf maar 3,8:1). */
.werkwijze{padding-block:clamp(3.4rem,7vw,5.5rem);background:var(--goud-fill);color:#fff}
.werkwijze .eyebrow{color:#fff}
.werkwijze .eyebrow::before{background:#fff}
.werkwijze__head h2{color:#fff}
/* Het accent kan hier geen groen zijn, dat verdwijnt in de ondergrond
(--goud-light haalt maar 2,92:1). Bleek mint houdt 4,30:1 en dat volstaat
voor deze kopgrootte, die ruim boven de grens voor grote tekst zit. */
.werkwijze__head h2 em{font-style:normal;color:#D6F3E3}
.werkwijze__head{max-width:42rem;margin:0 0 2.2rem}
.werkwijze__head .eyebrow{margin-bottom:.7rem}
.werkwijze__head h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.werkwijze__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
/* Knoppen onder de kaarten, gecentreerd zoals in de werkwijze-sectie op
solargreen.nl. --primary kan hier niet: dat is dezelfde groentint als de band
en zou erin wegvallen. Vandaar --ink (sluit aan op de kaarten) naast de
bestaande witte bel-knop. */
.werkwijze__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;
margin-top:clamp(1.6rem,3vw,2.3rem)}
/* Knoprijen in de blokken die er nog geen hadden. Zelfde idioom als
.waarom__cta: links uitgelijnd op de tekstkolom, wrappend op smal. */
.hero__cta,.services__cta,.voorraad__cta,.faq__cta-knoppen{
display:flex;flex-wrap:wrap;gap:.8rem}
.hero__cta{margin-top:clamp(1.2rem,2.4vw,1.8rem)}
.services__cta{margin-top:clamp(1.6rem,3vw,2.2rem);justify-content:center}
.voorraad__cta{margin-top:1.3rem}
/* De hero-knoppen staan op de video: wit en WhatsApp-groen houden daar hun
contrast, de donkere --ink zou wegvallen in het beeld. */
.hero__cta .btn--wa{background:#188841;color:#fff;box-shadow:0 12px 26px -14px rgba(0,0,0,.6)}
.hero__cta .btn.btn--wa svg{color:#fff}
.hero__cta .btn--wa:hover{background:#7A5F14}
.faq__cta{margin-top:clamp(1.6rem,3vw,2.2rem);display:flex;flex-wrap:wrap;align-items:center;
gap:.9rem 1.2rem;justify-content:center;text-align:center}
.faq__cta-tekst{font-weight:600;color:var(--muted)}
/* Stapkaart naar het model van de werkwijze-sectie op solargreen.nl: foto als
achtergrond, verloop eroverheen zodat de witte tekst leesbaar blijft, groen
icoonvlak linksboven en een pil met het stapnummer rechtsonder.
isolation:isolate houdt de z-index van de foto binnen de kaart. */
.stap{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius);
min-height:clamp(15rem,22vw,17.5rem);display:flex;
transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.stap:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.stap__foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
/* Stap 1 is op alle zes pagina's het staande portret (12-portret-kastenwand,
gezicht in de bovenste 30%). In de brede lage kaart op mobiel/tablet snijdt
de center-crop het hoofd eraf; 12% houdt het hele hoofd in beeld, ook op de
laagste kaart (min-height 13.5rem onder 560px). */
.stap:first-child .stap__foto{object-position:50% 12%}
/* Twee stops onderin: de tekst staat op het donkerste deel, de foto blijft
bovenin herkenbaar. Gemeten op de vier foto's: wit haalt hier ruim AA. */
.stap::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(16,20,19,.30) 0%,rgba(16,20,19,.72) 52%,rgba(16,20,19,.92) 100%)}
/* padding-bottom reserveert de band waar de stap-pil in staat, zodat lange
tekst er nooit onderdoor loopt. Dat werkt beter dan padding-right: de pil
staat rechtsonder, maar de tekst loopt over de volle breedte. */
.stap__in{position:relative;display:flex;flex-direction:column;width:100%;
padding:1.25rem 1.3rem 3.5rem;color:#fff}
.stap__ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;
background:var(--goud-fill);color:#fff;margin-bottom:auto}
.stap__ic svg{width:21px;height:21px}
.stap h3{font-size:1.14rem;line-height:1.25;margin:1.4rem 0 .4rem}
.stap p{font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.86)}
.stap__no{position:absolute;right:1.3rem;bottom:1.25rem;
border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:.4rem .85rem;
font-family:"Source Sans 3",sans-serif;font-weight:700;font-size:.78rem;line-height:1;white-space:nowrap}
.stap:first-child .stap__no{background:var(--goud-fill);border-color:transparent}
@media(max-width:1080px){.werkwijze__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.werkwijze__grid{grid-template-columns:1fr}.stap{min-height:13.5rem}}
/* ---------- Waarom - 5 redenen ---------- */
.reasons{position:relative;overflow-x:clip;padding-block:clamp(3.4rem,7vw,5.5rem);background:var(--paper-2)}
/* Merkteken als watermerk rechtsboven. SVG (potrace van het logo), dus scherp
op elk formaat. De right-waarde lijnt hem uit op de contentkolom zolang die
smaller is dan het scherm, en valt daarna terug op een marge van 1,2rem. */
.reasons__mark{position:absolute;z-index:0;pointer-events:none;
top:clamp(.2rem,1vw,1rem);
right:clamp(.5rem,2.5vw,2.5rem);
width:min(360px,28vw);height:auto;opacity:.12}
@media (max-width:860px){.reasons__mark{width:min(220px,34vw);opacity:.10}}
/* Onder 720px stapelt de sectie en schuift de fotokaart eroverheen,
dan blijft er alleen een half afgedekte boog over. Liever weg. */
@media (max-width:720px){.reasons__mark{display:none}}
/* stretch en niet center: de foto moet even lang zijn als de tekstkolom
ernaast, anders valt het blok visueel uit elkaar. Staande huisregel voor de
pro-landers. De vaste aspect-ratio op .reasons__photo is daarom weg en komt
pas terug in de gestapelde breakpoint, want zonder kolom ernaast is er geen
hoogte om over te nemen en klapt height:100% dicht. */
.reasons__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,4vw,4rem);align-items:stretch}
.reasons__media{position:relative;isolation:isolate}
.reasons__media::before{content:"";position:absolute;inset:0;background:var(--goud);
border-radius:calc(var(--radius) + 14px);transform:rotate(-5deg) translate(-16px,16px);z-index:-1}
.reasons__photo{border-radius:calc(var(--radius) + 4px);overflow:hidden;height:100%;min-height:420px;box-shadow:var(--shadow);transform:rotate(1deg)}
.reasons__photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.reasons__badge{position:absolute;right:-10px;bottom:-20px;background:#12182A;color:#fff;
border-radius:16px;padding:.95rem 1.15rem;box-shadow:var(--shadow);z-index:2}
.reasons__ab{display:block;font-family:"Montserrat",system-ui,sans-serif;font-weight:700;font-size:1.5rem;line-height:1;color:var(--goud)}
.reasons__abk{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:.4rem}
.reasons__body .eyebrow{margin-bottom:.8rem}
.reasons__body h2{font-size:clamp(1.8rem,3.4vw,2.6rem);max-width:14ch}
/* h3 en p onder elkaar in kolom 2, nummer ervoor: zo start alle tekst op
dezelfde lijn, ongeacht hoe breed het kopje is */
.reasons__list{list-style:none;margin:1.5rem 0 0;padding:0;counter-reset:reden}
.reasons__list li{display:grid;grid-template-columns:2.1rem 1fr;column-gap:.9rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.reasons__list li:first-child{border-top:1px solid var(--line)}
.reasons__list li::before{counter-increment:reden;content:counter(reden,decimal-leading-zero);grid-row:1/span 2;font-family:"Montserrat",system-ui,sans-serif;font-weight:700;font-size:1rem;line-height:1.45;color:var(--goud-deep)}
.reasons__list h3{font-size:1.02rem;line-height:1.45}
.reasons__list p{grid-column:2;margin:.2rem 0 0;font-size:.95rem;color:var(--muted)}
.reasons__num{min-width:1.7rem;flex:none;margin-top:.1rem}
.reasons__num svg{width:20px;height:20px;color:var(--goud)}
.reasons__stats{display:flex;gap:clamp(1.4rem,4vw,2.6rem);margin-top:1.8rem}
.reasons__cta{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.7rem}
.reasons__stat b{display:inline-flex;align-items:center;gap:.18em;font-family:"Montserrat",system-ui,sans-serif;font-weight:700;font-size:1.7rem;line-height:1}
.reasons__stat small{display:block;margin-top:.3rem;color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.reasons__cta{margin-top:1.8rem}
/* Gespiegelde variant: tekst links, foto rechts, blauwe achtergrondkaart */
.reasons--alt{background:var(--paper)}
.reasons--alt .reasons__grid{grid-template-columns:1.05fr 1fr}
.reasons--alt .reasons__media{order:2}
.reasons--alt .reasons__media::before{background:#12182A;transform:rotate(5deg) translate(16px,16px)}
.reasons--alt .reasons__photo{transform:rotate(-1deg)}
.reasons--alt .reasons__badge{right:auto;left:-10px;background:var(--goud)}
.reasons--alt .reasons__ab{font-size:1.7rem;color:#fff}
@media (max-width:880px){
.reasons--alt .reasons__grid{grid-template-columns:1fr}
.reasons--alt .reasons__media{order:0}
}
/* Story: tweede kaart blauw i.p.v. oranje */
.story__row:nth-child(2) .story__media::before{background:#12182A}
/* Keurmerk-badge (het element uit de redenen-sectie) herhaald op de overige
fotoblokken. Op de blauwe story-kaart in het rood; in containers met
overflow:hidden (waarom, voorraad) niet uitstekend maar op de rand van de foto. */
.story__row:nth-child(2) .reasons__badge{right:auto;left:-10px;background:var(--goud)}
.story__row:nth-child(2) .reasons__ab{color:#fff}
.waarom__photo .reasons__badge{right:16px;bottom:16px}
.voorraad__media .reasons__badge{right:16px;bottom:16px}
/* Op smalle schermen dekt de badge te veel van de foto af. */
@media(max-width:760px){.waarom__photo .reasons__badge{display:none}}
@media (max-width:980px){.services__grid{grid-template-columns:1fr 1fr}}
@media (max-width:880px){
.reasons__grid{grid-template-columns:1fr}
/* width:100% erbij: zonder die regel is het blok 0x0 zolang de lazy foto nog
niet binnen is (shrink-to-fit op een lege aspect-ratio-box) en springt de
hele sectie omhoog zodra hij laadt. */
.reasons__media{width:100%;max-width:24rem;margin-inline:auto}
/* Zie de story-breakpoint: gestapeld bepaalt de verhouding de hoogte weer. */
.reasons__photo{aspect-ratio:4/5;height:auto;min-height:0}
}
@media (max-width:520px){.services__grid{grid-template-columns:1fr}}
.foot__social{display:flex;gap:.6rem;margin-top:1.2rem}.foot__social a{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;transition:background .2s ease,transform .2s ease}.foot__social a:hover{background:var(--goud);border-color:var(--goud);transform:translateY(-2px)}.foot__social svg{width:18px;height:18px}
/* ---------- Zwevende bel-knop ----------
1-op-1 van oranjelift.nl: ronde knop rechtsonder met een ring die van 1 naar 1,5
schaalt terwijl hij vervaagt. Op mobiel staat hij hier wel (op verzoek), maar dan
als mini-versie. Kan hier ook veilig: deze pagina heeft geen vaste onderbalk waar
hij overheen zou vallen. */
/* Witte ring is hier geen versiering maar noodzaak: de knop zweeft over de hele
pagina en botst onder meer op de groene werkwijze-band, waar groen-op-groen
vrijwel onzichtbaar is. De ring geeft hem op elke ondergrond een eigen rand.
isolation:isolate houdt de pulsring (z-index:-1) binnen de knop, anders kan
die achter de pagina-achtergrond zakken. */
.bel-float{
position:fixed;right:24px;bottom:24px;z-index:998;isolation:isolate;
width:68px;height:68px;border-radius:50%;
display:grid;place-items:center;
background:#188841;color:#fff;
box-shadow:0 0 0 3px #fff,0 6px 18px rgba(0,0,0,.28);
transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s ease;
}
.bel-float svg{width:34px;height:34px;fill:currentColor;position:relative;z-index:1}
.bel-float:hover{background:#7A5F14;transform:scale(1.08);box-shadow:0 0 0 3px #fff,0 10px 26px rgba(0,0,0,.34)}
.bel-float:active{transform:scale(.96)}
.bel-float::after{
content:"";position:absolute;inset:0;border-radius:50%;
background:#188841;z-index:-1;
animation:bel-puls 2s ease-out infinite;
}
@keyframes bel-puls{
0% {transform:scale(1); opacity:.32}
100%{transform:scale(1.5); opacity:0}
}
/* Onder 768px kleiner en dichter op de hoek, zodat hij zo min mogelijk content afdekt.
De env() houdt hem op een iPhone vrij van de home-indicator; die is 0 zolang de
Safari-onderbalk zichtbaar is, dus dan blijft het gewoon 16px. */
/* Op zeer smalle schermen is de langste knoptekst breder dan het scherm;
dan liever twee regels dan een afgeknipte pijl. */
@media (max-width:359.98px){.btn{white-space:normal;text-align:center}}
@media (max-width:767.98px){
.bel-float{right:16px;bottom:max(16px,env(safe-area-inset-bottom));width:50px;height:50px}
.bel-float svg{width:26px;height:26px}
}
/* De ring is puur decoratief, dus uit bij bewegingsgevoeligheid. */
@media (prefers-reduced-motion:reduce){.bel-float::after{animation:none;opacity:0}}
/* ---------- Dozenschatting in het offerteformulier ----------
Uitklapper op het rode paneel. doet het open en dicht zelf, dus geen
extra JS en het werkt ook zonder toetsenbordgedoe. */
.lfcalc{margin-top:.2rem;border:1px solid rgba(255,255,255,.3);border-radius:14px;
background:rgba(255,255,255,.10);overflow:hidden}
.lfcalc__knop{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
gap:.8rem;padding:.7rem .9rem;font-size:.88rem;font-weight:800;color:#fff}
.lfcalc__knop::-webkit-details-marker{display:none}
.lfcalc__knop:hover{background:rgba(255,255,255,.06)}
.lfcalc__chev{width:8px;height:8px;flex:none;border-right:2px solid #fff;border-bottom:2px solid #fff;
transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s var(--ease)}
.lfcalc[open] .lfcalc__chev{transform:rotate(225deg) translate(-2px,-2px)}
.lfcalc__paneel{padding:0 .9rem .9rem;display:grid;gap:.8rem}
.lfcalc__velden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.lfcalc__velden .lf__field>span{font-size:.66rem}
.lfcalc__velden input,.lfcalc__velden select{padding:.6rem .7rem;font-size:.95rem}
.lfcalc__velden .lf__field--sel::after{bottom:.85rem;right:.75rem}
.lfcalc__extras{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.lfcalc__extras legend{float:left;width:100%;font-size:.66rem;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;color:rgba(255,255,255,.92);margin-bottom:.4rem}
.lfcalc__extras label{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.32rem .7rem;
font-size:.82rem;font-weight:700;color:#fff;transition:background .2s ease,border-color .2s ease}
.lfcalc__extras label:has(input:checked){background:#fff;color:var(--goud-deep);border-color:#fff}
.lfcalc__extras input{accent-color:#fff;width:14px;height:14px;margin:0}
.lfcalc__uit{font-size:.85rem;line-height:1.5;color:#fff;
background:rgba(0,0,0,.22);border-radius:10px;padding:.6rem .75rem}
.lfcalc__uit strong{font-weight:800}
@media (max-width:620px){.lfcalc__velden{grid-template-columns:1fr 1fr}}
.lfcalc__acties{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.lfcalc__ok{font-family:inherit;font-weight:800;font-size:.86rem;cursor:pointer;
border:0;border-radius:999px;padding:.6rem 1.1rem;background:#fff;color:var(--goud-deep);
transition:transform .2s var(--ease),background .2s ease}
.lfcalc__ok:hover{transform:translateY(-1px);background:#FBF6E6}
.lfcalc__wis{font-family:inherit;font-weight:700;font-size:.82rem;cursor:pointer;
border:0;background:none;color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px;padding:.5rem .4rem}
.lfcalc__wis:hover{color:#fff}
/* Toegevoegd: de kop krijgt een vinkje en de knop bevestigt dat hij bijgewerkt is. */
.lfcalc.is-toegevoegd{border-color:#fff;background:rgba(255,255,255,.18)}
.lfcalc.is-toegevoegd .lfcalc__titel::before{content:"\2713";margin-right:.45rem;font-weight:800}
.lfcalc.is-toegevoegd .lfcalc__ok{background:rgba(255,255,255,.22);color:#fff;cursor:default}
.lfcalc.is-toegevoegd .lfcalc__ok:hover{transform:none;background:rgba(255,255,255,.22)}
/* ---------- Solar Green-specifiek ----------
Tekst-chips in de trust-hoek: zelfde witte chip als de keurmerken, maar met
een cijferclaim van de site zelf (1.000+ klanten, 10+ jaar). */
.keurmerk--txt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.keurmerk--txt b{font-family:"Montserrat",system-ui,sans-serif;font-weight:600;font-size:1.05rem;line-height:1;color:var(--goud-deep)}
.keurmerk--txt small{font-size:.56rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.15}
@media(max-width:560px){.keurmerk--txt b{font-size:.92rem}.keurmerk--txt small{font-size:.5rem}}
/* Merkenchips (DMEGC, Sigenergy, Enphase, SolarEdge, Daikin): logo's van derden,
dus nooit hertint, altijd op de witte chip. Wordmerken zijn breed en liggen
lager dan de reviewlogo's. */
.keurmerk--merk img{max-height:20px}
@media(max-width:560px){.keurmerk--merk img{max-height:16px}}
/* DeWarmte publiceert zijn wordmerk uitsluitend in wit en zet het zelf altijd op
zwart of op de teal van hun app-icoon. Hertinten mag niet, dus de chip krijgt
die teal in plaats van wit. Het is bovendien een gestapeld lockup, teken boven
het woord, en op 20px valt het woord dan weg: vandaar de eigen maat. */
.keurmerk--dewarmte{background:#7AB4A8}
.keurmerk--dewarmte img{max-height:38px}
@media(max-width:560px){.keurmerk--dewarmte img{max-height:30px}}
/* Score-kaart met een woord in plaats van een cijfer: de Google-widget op
solargreen.nl toont "UITSTEKEND" met vijf sterren, geen los cijfer. */
.rev__num--woord{font-size:clamp(2.3rem,6vw,3.6rem);letter-spacing:.02em;text-transform:uppercase}
/* Iconen in de waarom-minis: inline SVG in plaats van PNG's. */
.wmini h3 svg{width:26px;height:26px;flex:none;color:var(--goud-light)}
/* "Uitstekend" is breder dan een cijfer: de score-chip groeit mee met het woord. */
.keurmerk--score{width:auto;min-width:98px;padding-inline:12px}
@media(max-width:560px){
.keurmerk--score{min-width:78px;padding-inline:9px}
.keurmerk--score .keurmerk__cijfer{font-size:.8rem}
}
/* Adres-opzoeken: één regel onder de velden. Op de groene scanbalk wit, in het
witte formulier gedempt. min-height houdt de hoogte stabiel zodat er niets
verspringt zodra de tekst verschijnt. */
.of-adres{margin:12px 0 0;font-family:"Source Sans 3",sans-serif;font-size:13px;line-height:1.4;
color:rgba(255,255,255,.82);min-height:1.4em}
.of-adres.is-goed{color:#fff;font-weight:600}
.of-adres.is-bezig{opacity:.7}
.lf__adres{margin:.4rem 0 0;font-family:"Source Sans 3",sans-serif;font-size:13px;line-height:1.4;
color:var(--muted);min-height:1.4em}
.lf__adres.is-goed{color:var(--goud-deep);font-weight:600}
.lf__adres.is-bezig{opacity:.7}
/* ---------- KEUKENS OP VOORRAAD ----------
Nieuw blok voor deze lander, in hetzelfde idioom als .svc en .stap: zelfde radius,
zelfde hover-lift, zelfde schaduwtrap. Goud is hier alleen rand, label en prijs;
de knop blijft --goud-fill (navy) want wit op goud haalt geen enkele drempel. */
.keukens{padding-block:clamp(3.4rem,7vw,5.5rem);background:var(--goud-soft)}
.keukens__lead{margin:.9rem 0 0;color:var(--muted);font-size:1.02rem;max-width:36rem}
.keukens__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.2rem}
.kk{background:#fff;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.kk:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.kk__beeld{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.kk__beeld img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.kk:hover .kk__beeld img{transform:scale(1.045)}
.kk__merk{position:absolute;left:0;top:1rem;background:var(--ink);color:var(--goud-light);
font-family:"Montserrat",system-ui,sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.14em;
text-transform:uppercase;padding:.42rem .9rem;border-radius:0 999px 999px 0}
.kk__body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.kk__body h3{font-size:1.14rem;line-height:1.2;margin-bottom:.85rem}
.kk__specs{display:grid;grid-template-columns:auto 1fr;gap:.34rem .9rem;margin:0 0 1.2rem;font-size:.92rem}
.kk__specs dt{color:var(--muted)}
.kk__specs dd{margin:0;text-align:right;font-weight:600;color:var(--ink)}
.kk__voet{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.kk__prijs{font-family:"Montserrat",system-ui,sans-serif;font-weight:800;font-size:1.6rem;line-height:1;margin:0;color:var(--ink)}
.kk__prijs small{display:block;font-family:"Source Sans 3",sans-serif;font-weight:700;font-size:.68rem;
letter-spacing:.11em;text-transform:uppercase;color:var(--goud-deep);margin-bottom:.3rem}
.kk .btn{padding:.7rem 1.15rem;font-size:.88rem}
/* Kolom: de voorraadregel staat boven de knoppen. Daaronder sinds 13-aug-2026 weer een
rij met twee knoppen: links de hoofdsite-link (klantwens), rechts WhatsApp. */
.keukens__meer{margin-top:2.2rem;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.keukens__knoppen{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem}
/* Onder ~420px past "Zie alle keukens op voorraad" niet op een regel in de pil. */
@media (max-width:420px){.keukens__knoppen .btn{white-space:normal;line-height:1.3;text-align:center}}
.keukens__voorraad{margin:0;max-width:34rem;text-align:center;color:var(--muted)}
.keukens__voorraad b{color:var(--goud-deep)}
/* formuliernoot onder de verzendknop */
/* Groene CTA in het gouden paneel, zelfde toegankelijke groen als de WA-knoppen (4,5:1). */
.lf__send{--bg:#188841;width:100%;justify-content:center;margin-top:.4rem}
.lf__send:hover{background:#0F5B2E}
.lf__note{margin:.9rem 0 0;font-size:.88rem;color:#2A3450;text-align:center}
.lf__note--let{color:#6E1414;font-weight:700}
@media(max-width:1000px){.keukens__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){
.keukens__grid{grid-template-columns:1fr}
.kk__voet{flex-direction:column;align-items:flex-start}
.kk .btn{width:100%;justify-content:center}
}
/* ============ TEKSTPAGINA'S (privacy, cookies, toegankelijkheid) ============
Eén smalle leeskolom van 72ch. Geen eigen kleuren of typografie: alles komt uit
:root, zodat deze pagina's meebewegen als het merk verandert. */
.subtop{background:var(--ink);padding:1rem 0}
.subtop .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.subtop__logo img{height:36px;width:auto;display:block}
.subtop__terug{
display:inline-flex;align-items:center;gap:.5rem;
color:var(--goud-light);font-weight:600;text-decoration:none /* 11,4:1 op --ink */
}
.subtop__terug:hover,.subtop__terug:focus-visible{text-decoration:underline}
.subtop__terug svg{width:20px;height:20px;transform:rotate(180deg)}
.legal{background:var(--paper);padding:3.4rem 0 4.4rem}
.legal__kolom{width:min(100% - 2.4rem,72ch);margin-inline:auto}
.legal h1{font-size:clamp(1.9rem,4.2vw,2.5rem);line-height:1.16;margin:0 0 .5rem}
.legal__datum{margin:0 0 2.2rem;color:var(--muted);font-size:.94rem}
.legal h2{font-size:1.28rem;line-height:1.3;margin:2.5rem 0 .7rem}
.legal h3{font-size:1.04rem;margin:1.7rem 0 .45rem}
.legal p,.legal li{color:var(--ink-2);line-height:1.7}
.legal p{margin:0 0 1rem}
.legal ul{margin:0 0 1rem;padding-left:1.25rem}
.legal li{margin-bottom:.4rem}
.legal a{color:var(--goud-deep)} /* 4,9:1 op --paper */
.legal a:hover,.legal a:focus-visible{text-decoration:none}
.legal__kader{
background:var(--white);border:1px solid var(--line);border-left:4px solid var(--goud);
border-radius:var(--radius-sm);padding:1.1rem 1.3rem;margin:1.6rem 0;box-shadow:var(--shadow-sm)
}
.legal__kader p:last-child{margin-bottom:0}
.legal__tabelwrap{overflow-x:auto;margin:0 0 1.4rem} /* tabel scrollt zelf, body nooit */
.legal table{width:100%;border-collapse:collapse;font-size:.94rem}
.legal th,.legal td{padding:.6rem .7rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.legal th{color:var(--ink);font-weight:700}
/* ---------- Footer-credit ----------
Stond zonder eigen regel in .foot__legal: "Gemaakt door" kreeg daardoor de volle witte
footerkleur en de link ernaast de 60% van .foot__legal a. Twee tinten in één zin.
Nu leest het als één geheel, gescheiden van de beleidslinks door een haarlijn.
De sluier onderin de footer is rgba(18,18,18,.93), dus zelfs met een lichte foto
eronder haalt wit 60% nog 6,5:1. */
.foot__legal{flex-wrap:wrap;gap:.5rem 1.25rem}
.foot__credit{
display:inline-flex;align-items:center;
color:rgba(255,255,255,.6);font-size:.84rem;
padding-left:1.25rem;border-left:1px solid rgba(255,255,255,.16)
}
.foot__credit a{
color:inherit;font-size:inherit;
text-decoration:underline;text-underline-offset:.18em;
text-decoration-color:rgba(255,255,255,.32);transition:color .2s var(--ease)
}
.foot__credit a:hover,.foot__credit a:focus-visible{
color:var(--goud-light);text-decoration-color:currentColor
}
/* Op smal valt de balk in kolommen; een haarlijn vooraan een regel oogt dan als een fout. */
@media (max-width:560px){
.foot__credit{padding-left:0;border-left:0}
}
/* ---------- Reviews (Google + Trustpilot) ----------
Kleurkeuze: de logo's houden hun exacte merkkleur (#4285F4 e.d. en #00B67A). Logotypes
zijn onder WCAG 1.4.11 vrijgesteld van de 3:1-eis. De STERREN zijn dat niet, want die
dragen de beoordeling. Merkgoud #D4AF37 haalt op wit 2,10:1 en Trustpilot-groen 2,63:1,
allebei te laag. Vandaar twee iets diepere varianten, alleen voor de sterren:
#A8811A geeft 3,61:1 op wit en 3,37:1 op --paper, #00A06B geeft 3,37:1.
Het cijfer staat bovendien als tekst naast de sterren, dus de score is nooit
alleen via kleur af te lezen. */
.reviews{background:var(--paper);padding-block:clamp(3rem,6vw,5rem)}
/* De max-width hoort op de h2 zelf. Op .reviews__head rekent ch in de body-fontgrootte
(16px) in plaats van die van de kop (40px), waardoor de kolom veel te smal werd en de
kop over vijf regels brak. Zelfde patroon als .story__body h2. */
.reviews__head{text-align:center}
.reviews__head h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin:.6rem auto 0;max-width:26ch}
.reviews__badges{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-top:1.8rem}
.pbadge{
display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;
background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);
padding:.7rem 1.1rem;box-shadow:var(--shadow-sm);
transition:transform .25s var(--ease),box-shadow .25s var(--ease)
}
.pbadge:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.pbadge__mark{width:26px;height:26px;flex:none}
.pbadge__body{display:flex;flex-direction:column;gap:.1rem}
.pbadge__top{display:flex;align-items:center;gap:.5rem}
.pbadge__score{font-family:"Montserrat",system-ui,sans-serif;font-size:1.15rem;color:var(--ink)}
.pbadge__meta{color:var(--muted);font-size:.8rem} /* 5,6:1 */
/* Sterren: gemaskerde vorm, zodat halve sterren met een gradient kunnen. */
.sterren{
--ster:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
--ster-kleur:#A8811A; --ster-leeg:rgba(18,24,42,.2);
display:inline-flex;gap:.1rem;vertical-align:middle
}
.sterren--tp{--ster-kleur:#00A06B}
.sterren i{
width:1em;height:1em;display:block;background:var(--ster-kleur);
-webkit-mask:var(--ster) center/contain no-repeat;mask:var(--ster) center/contain no-repeat
}
.sterren i.leeg{background:var(--ster-leeg)}
.sterren i.half{background:linear-gradient(90deg,var(--ster-kleur) 50%,var(--ster-leeg) 50%)}
.reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.rev{
background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
padding:1.2rem 1.3rem;box-shadow:var(--shadow-sm);
transition:transform .3s var(--ease),box-shadow .3s var(--ease)
}
.rev:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.rev__kop{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem}
.rev__av{
width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
background:var(--goud-fill);color:var(--white); /* wit op #14213D = 14,3:1 */
font-family:"Montserrat",system-ui,sans-serif;font-weight:700
}
.rev__wie{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.rev__wie b{font-size:.95rem;color:var(--ink)}
.rev__wie small{color:var(--muted);font-size:.78rem}
.rev__bron{width:16px;height:16px;flex:none;margin-left:auto;border-radius:3px}
.rev__bron--g{background:conic-gradient(#EA4335 0 25%,#FBBC05 0 50%,#34A853 0 75%,#4285F4 0)}
.rev__bron--tp{background:#00B67A}
.rev p{margin:.55rem 0 0;color:var(--ink-2);font-size:.94rem;line-height:1.6}
.reviews__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:2rem}
@media(max-width:980px){.reviews__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){
.reviews__grid{grid-template-columns:1fr}
.pbadge{flex:1 1 100%;justify-content:center}
}
/* ---------- Google-badge in de hero ----------
Hier mag het merkgoud wel voor de sterren: op de donkere hero-sluier haalt #D4AF37
ruim 8:1, terwijl het op wit maar 2,10:1 zou halen. Daarom een eigen variant in
plaats van de diepere tint die de sterren in de lichte reviewsectie gebruiken.
Het G-logo krijgt een witte schijf eronder, anders verdwijnt het blauw in het donker. */
.sterren--licht{--ster-kleur:var(--goud);--ster-leeg:rgba(255,255,255,.32)}
.hero__reviews{
display:inline-flex;align-items:center;gap:.55rem;margin-top:1.3rem;
padding:.5rem .9rem;border-radius:999px;text-decoration:none;color:#fff;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)
}
.hero__reviews:hover,.hero__reviews:focus-visible{
background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.4);transform:translateY(-2px)
}
.hero__reviews-g{width:20px;height:20px;flex:none;background:#fff;border-radius:50%;padding:2px}
.hero__reviews b{font-family:"Montserrat",system-ui,sans-serif;font-size:.98rem}
.hero__reviews small{color:rgba(255,255,255,.8);font-size:.82rem} /* 9,4:1 op de sluier */
@media(max-width:420px){.hero__reviews small{display:none}}