/* /assets/css/fonts.css */
/* Lettertypen zelf geserveerd (regie, 25-9): dezelfde woff2-bestanden als Google Fonts (css2, display=swap),
   alleen de subsets latin en latin-ext. Zo haalt de browser niets op bij Google en gaat er geen IP-adres naar
   Google (LG München 2022). Licentie: SIL Open Font License, zie assets/fonts/OFL-*.txt. */
@font-face{font-family:'Kanit';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/kanit-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Kanit';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/kanit-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Kanit';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/kanit-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Kanit';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/kanit-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Kanit';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/kanit-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Kanit';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/kanit-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/poppins-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/poppins-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/poppins-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/poppins-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* CLS-01 (4c, 28-9): terugvallettertype op maat. Tot Kanit en Poppins geladen zijn, tekent de browser Arial, geschaald naar
   de breedte en de regelhoogte van het echte lettertype (size-adjust en ascent-, descent- en line-gap-override), zodat
   regels niet omspringen als de woff2 binnenkomt. Maten met fontTools uit de woff2-bestanden en Arial: gemiddelde
   tekenbreedte over de tekst van de home, en de typo-metrieken; per gewicht een vlak (tot 549 Arial, daarboven Arial Bold).
   Kanit staat 2 procent smaller, zodat een kop op de grens (de herotitel) niet eerder breekt dan met het echte lettertype;
   Poppins staat op de berekende maat, anders past de chiprij in het scanvak eerst wel en breekt ze na het wisselen.
   Zonder Arial op het apparaat valt local() weg en geldt de rest van de stapel, zoals voorheen. */
@font-face{font-family:'Kanit Fallback';font-weight:100 549;src:local('Arial'),local('ArialMT');size-adjust:99.82%;ascent-override:110.20%;descent-override:39.57%;line-gap-override:0.00%}
@font-face{font-family:'Kanit Fallback';font-weight:550 650;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:94.76%;ascent-override:116.09%;descent-override:41.69%;line-gap-override:0.00%}
@font-face{font-family:'Kanit Fallback';font-weight:651 1000;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:96.00%;ascent-override:114.58%;descent-override:41.15%;line-gap-override:0.00%}
@font-face{font-family:'Poppins Fallback';font-weight:100 549;src:local('Arial'),local('ArialMT');size-adjust:111.68%;ascent-override:94.02%;descent-override:31.34%;line-gap-override:8.95%}
@font-face{font-family:'Poppins Fallback';font-weight:550 650;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:106.43%;ascent-override:98.66%;descent-override:32.89%;line-gap-override:9.40%}
@font-face{font-family:'Poppins Fallback';font-weight:651 750;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:107.26%;ascent-override:97.89%;descent-override:32.63%;line-gap-override:9.32%}
@font-face{font-family:'Poppins Fallback';font-weight:751 1000;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:108.00%;ascent-override:97.22%;descent-override:32.41%;line-gap-override:9.26%}

/* /assets/css/style.css */
/* Solar Green - advertentie-landingspagina
   Huisstijl overgenomen van solargreen.nl: merkgroen #25955B (logo en Elementor-kit)
   op off-white #FCFCFD met bijna-zwart #101413. Het merkgroen haalt op wit maar 3,8:1,
   dus net als bij de eerdere landers drie varianten in :root: --green alleen voor
   vlakken, iconen en grote cijfers, --green-deep (5,7:1) voor kleine groene tekst op
   wit en --green-fill (5,1:1) voor vlakken waar witte tekst op komt.
   Type: Kanit (koppen) + Poppins (body), dezelfde combinatie als solargreen.nl.
   Layout is de bewezen Feitsma/Draagkracht-DNA, inhoud en huisstijl vervangen. */

:root{
  --green:#25955B;
  --green-deep:#1B7546;
  --green-fill:#1D7E4A;
  --green-soft:#E9F6EF;
  --green-light:#7FD6A4;  /* groen dat leesbaar blijft op de donkere vlakken (8,5:1) */
  --ink:#101413;
  --ink-2:#232A26;
  --paper:#F7F7F7;
  --paper-2:#EFEFEF;
  --line:#E3E3E3;
  --white:#fff;
  --muted:#5F5F5F;
  --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:"Poppins","Poppins Fallback",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:"Kanit","Kanit Fallback",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(--green);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(--green-deep);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--green);border-radius:2px}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--green-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(--green-fill)}
.btn--primary:hover{background:var(--green-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(--green-deep)}
.btn--bel:hover,.btn--wit:hover{background:#000;color:#fff}
.btn--bel:hover svg,.btn--wit:hover svg{color:var(--green-light)}
.btn--ink{--bg:#101413}
/* 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}

/* ---------- 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:56px;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:48px}
.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:#0C120F url("/assets/video/hero-poster.webp") center/cover no-repeat}
.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. */
.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. */
.hero__mark{position:absolute;z-index:-1;pointer-events:none;
  top:clamp(5rem,9vw,8rem);right:clamp(.5rem,2.5vw,2.5rem);
  width:min(360px,28vw);height:auto;opacity:.135}
@media(max-width:860px){.hero__mark{width:min(230px,34vw);opacity:.105}}
@media(max-width:620px){.hero__mark{display:none}}
/* 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(300px,34vw,360px);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(--green-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(--green-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)}
/* nowrap houdt "zonder aanbetaling" op een regel zolang dat past; onder 430px
   is de markering breder dan het scherm en moet hij gewoon meebreken, anders
   knipt overflow:hidden de kern-USP af. De gradient loopt per regelfragment door. */
.hero__title em{font-style:normal;white-space:nowrap;color:#fff;background:linear-gradient(180deg,transparent 62%,rgba(37,149,91,.95) 62%);padding-inline:.06em}
@media(max-width:429.98px){.hero__title em{white-space:normal}}
.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}
/* 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(--green-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:"Kanit","Kanit Fallback",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:"Poppins","Poppins Fallback",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:"Poppins","Poppins Fallback",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:"Poppins","Poppins Fallback",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,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23101413' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 0 center;padding-right:18px}
.of-field input[type="date"]{font-family:"Poppins","Poppins Fallback",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,.leadblock__panel :focus-visible{outline-color:#fff}
.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:"Poppins","Poppins Fallback",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(--green-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(37,149,91,.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("/assets/img/mark-solargreen-green.png") 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(--green)}
.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:#101413 url("/assets/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:"Kanit","Kanit Fallback",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:#1F7A3D}
.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)}
.story__row:nth-child(even) .story__media{order:2}
.story__media{position:relative;isolation:isolate}
.story__media::before{content:"";position:absolute;inset:0;background:var(--green);
  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}
  .story__row:nth-child(even) .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(--green-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("/assets/img/mark-solargreen-white.png") 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(--green);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(--green);background:var(--green-soft);color:var(--green-deep)}
.calc__extras input{accent-color:var(--green-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:"Kanit","Kanit Fallback",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(--green);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:"Kanit","Kanit Fallback",system-ui,sans-serif;font-weight:600;
  font-size:clamp(1.05rem,1.9vw,1.28rem);line-height:1.25;color:var(--green-light)}
.wpc__getal{display:block;margin-top:.5rem;font-family:"Kanit","Kanit Fallback",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:#101413;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:#7FD6A4}
.waarom__head .eyebrow::before{background:#7FD6A4}
.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 #101413 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:"Kanit","Kanit Fallback",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(--green-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("/assets/img/mark-solargreen-white.png") 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:"Kanit","Kanit Fallback",system-ui,sans-serif;font-size:1.45rem;line-height:1;color:var(--green-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:"Kanit","Kanit Fallback",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%,#F2FBF6 0%,var(--green-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:"Kanit","Kanit Fallback",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(--green-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:#C7CFCB;background:#C7CFCB;gap:5px}
.paneel__laag--ec{height:46px;color:#DFE9EE;
  background:linear-gradient(135deg,#1E242A 0%,#333C44 55%,#1E242A 100%)}
.paneel__laag--mod{height:38px;color:#4A534F;border-left:3px solid #86D2C9;
  background:linear-gradient(180deg,#FDFDFD 0%,#EFF2F1 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 <details>, 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(--green)}
.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:"Kanit","Kanit Fallback",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(--green-deep)}
.faq__item summary:focus-visible{outline:3px solid var(--green);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(--green-soft);transition:background .25s var(--ease);
}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--green-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(--green-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(--green-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:#101413}
/* 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(12,40,26,.55),rgba(12,40,26,.9)),
             url("/assets/img/voorraad-dak.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(--green-deep)}

.leadblock__panel{position:relative;color:#fff;padding:clamp(1.8rem,3.4vw,3rem);
  background:linear-gradient(140deg,#27A063 0%,#1D7E4A 55%,#17663D 100%)}
.leadblock__panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 80% at 95% 0%,rgba(255,255,255,.16),transparent 55%)}
.leadblock__panel>*{position:relative}
.leadblock__panel .eyebrow{color:#fff}
.leadblock__panel .eyebrow::before{background:rgba(255,255,255,.75)}
.leadblock__panel h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-top:.55rem}
.leadblock__panel .lead-p{margin-top:.7rem;color:rgba(255,255,255,.92);max-width:46ch}
.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:"Poppins","Poppins Fallback",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:rgba(255,255,255,.92)}
.lf__field input:not([type=checkbox]),.lf__field select{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}
.lf__field input:not([type=checkbox])::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:#101413}
@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:#0C120F url("/assets/img/foot-bg.webp") center 40%/cover no-repeat}
@media (max-width:820px){.foot{background-image:url("/assets/img/foot-bg-smal-640.webp")}}
.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(37,149,91,.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:"Kanit","Kanit Fallback",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(--green);transform:translateX(3px)}
.foot__col a svg{width:16px;height:16px;flex:none;color:var(--green)}
.foot__cta{margin-bottom:.5rem;background:var(--green);color:#fff;border-radius:999px;padding:.72rem 1.15rem;font-weight:700;
  box-shadow:0 14px 30px -14px rgba(37,149,91,.9);transition:background .2s,transform .2s var(--ease)}
.foot__cta svg{color:#fff}
.foot__cta:hover{background:var(--green-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(--green)}
@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){
  /* Alleen de bel-knop wordt icoon-only; "Gratis scan" blijft leesbaar. */
  .topbar .btn--bel span.lbl{display:none}
  .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:38px}
  /* 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){
  [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)}
.svc--green{background:var(--green-fill)}
.svc__ic{width:46px;height:46px;margin-bottom:1.1rem}
.svc__ic svg{width:100%;height:100%}
.svc--ink .svc__ic{color:var(--green-light)}
.svc--green .svc__ic{color:#fff}
.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--green p{color:rgba(255,255,255,.92)}

/* ---------- 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.
   --green-fill en niet --green: 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(--green-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
   (--green-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:#147237}
.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}
/* 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(--green-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:"Poppins","Poppins Fallback",sans-serif;font-weight:700;font-size:.78rem;line-height:1;white-space:nowrap}
.stap:first-child .stap__no{background:var(--green-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(--green);
  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:#101413;color:#fff;
  border-radius:16px;padding:.95rem 1.15rem;box-shadow:var(--shadow);z-index:2}
.reasons__ab{display:block;font-family:"Kanit","Kanit Fallback",system-ui,sans-serif;font-weight:700;font-size:1.5rem;line-height:1;color:var(--green)}
.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}
.reasons__list{list-style:none;margin:1.5rem 0 0;padding:0}
.reasons__list li{display:flex;gap:1rem;align-items:flex-start;padding:.8rem 0;border-bottom:1px solid var(--line)}
.reasons__list li:first-child{border-top:1px solid var(--line)}
.reasons__num{min-width:1.7rem;flex:none;margin-top:.1rem}
.reasons__num svg{width:20px;height:20px;color:var(--green)}
.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:"Kanit","Kanit Fallback",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:#101413;transform:rotate(5deg) translate(16px,16px)}
.reasons--alt .reasons__photo{transform:rotate(-1deg)}
.reasons--alt .reasons__badge{right:auto;left:-10px;background:var(--green)}
.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:#101413}

/* 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(--green)}
.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(--green);border-color:var(--green);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:#147237;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. <details> 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(--green-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(--green-deep);
  transition:transform .2s var(--ease),background .2s ease}
.lfcalc__ok:hover{transform:translateY(-1px);background:#F0FAF4}
.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:"Kanit","Kanit Fallback",system-ui,sans-serif;font-weight:600;font-size:1.05rem;line-height:1;color:var(--green-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(--green-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:"Poppins","Poppins Fallback",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:"Poppins","Poppins Fallback",sans-serif;font-size:13px;line-height:1.4;
  color:var(--muted);min-height:1.4em}
.lf__adres.is-goed{color:var(--green-deep);font-weight:600}
.lf__adres.is-bezig{opacity:.7}

/* ---------- Prijzen - het prijsblad van Solar Green als tekst ----------
   Bewust geen afbeelding van het prijsblad: elk bedrag, elke maat en elke zin
   staat als losse tekst in de HTML zodat Google ze kan lezen. De kaarten volgen
   de indeling van het blad (links de naam en de prijs, rechts de opbouw), niet
   de pixels. Groen: het grote getal mag --green (3,8:1 is genoeg voor grote
   tekst), de kleine "Netto prijs"-regel krijgt --green-deep (5,7:1). */
.prijs{padding-block:clamp(3rem,6vw,4.6rem);background:var(--paper)}
.prijs__kop{max-width:46rem;margin:0 0 clamp(1.6rem,3vw,2.4rem)}
.prijs__kop .eyebrow{margin-bottom:.7rem}
.prijs__kop h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.prijs__kop p{margin-top:.9rem;color:var(--muted);font-size:1rem;line-height:1.65}
.prijs__blok+.prijs__blok{margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.prijs__blok h3{font-size:clamp(1.5rem,2.8vw,2.1rem)}
.prijs__claim{margin-top:.35rem;color:var(--green-deep);font-weight:700}
.prijs__lead{margin-top:.25rem;color:var(--muted);max-width:60ch}

/* Hybride: links naam, prijs en foto, rechts de vinkjes met daaronder de opbouw. */
.prijs__hyb{margin-top:1.3rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto auto;gap:clamp(1.2rem,3vw,2.2rem);
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.2rem,2.6vw,2rem);box-shadow:var(--shadow-sm)}
.prijs__hybkop{grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;min-width:0}
.prijs__type{color:var(--muted);font-size:.92rem}
.prijs__hybkop h4{font-family:"Kanit","Kanit Fallback",system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;
  line-height:1.05;font-size:clamp(1.5rem,2.6vw,2rem);margin:.2rem 0 0}
.prijs__vanaf{margin-top:.35rem;font-family:"Kanit","Kanit Fallback",system-ui,sans-serif;font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2rem);line-height:1;color:var(--green)}
.prijs__hybkop img{width:min(100%,320px);height:auto;margin-top:auto;padding-top:1.4rem}
.prijs__checks{grid-column:2;grid-row:1;list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.prijs__checks li{display:flex;align-items:flex-start;gap:.65rem;font-size:.95rem;line-height:1.5}
.prijs__checks svg{width:22px;height:22px;flex:none;margin-top:.1rem;padding:4px;
  border-radius:50%;background:var(--ink);color:#fff}
.prijs__hyb .ptab{grid-column:2;grid-row:2;align-self:end}

/* Opbouw prijs, subsidie, netto prijs. */
.ptab{margin:0;display:grid;gap:.4rem;background:var(--paper);border-radius:var(--radius-sm);padding:.9rem 1rem}
.ptab>div{display:flex;justify-content:space-between;align-items:baseline;gap:.9rem;font-size:.92rem}
.ptab dt{min-width:0}
.ptab dd{margin:0;font-weight:700;text-align:right;white-space:nowrap}
.ptab__sub dt,.ptab__sub dd{color:var(--muted)}
.ptab__netto{border-top:1px dashed #C9C9C9;padding-top:.55rem;margin-top:.15rem}
.ptab__netto dt{font-weight:800}
.ptab__netto dd{color:var(--green-deep);font-weight:800}

/* Full electric: zes voordelen in twee kolommen, daaronder de drie maten. */
.prijs__punten{list-style:none;margin:1rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem clamp(1.2rem,3vw,2.6rem)}
.prijs__punten li{position:relative;padding-left:1.15rem;font-size:.95rem;line-height:1.5}
.prijs__punten li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--green)}
.prijs__punten .is-accent{color:var(--green-deep);font-weight:600}
.prijs__grid{margin-top:clamp(1.3rem,3vw,2rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.pkaart{display:flex;flex-direction:column;min-width:0;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.1rem,2.2vw,1.5rem);
  box-shadow:var(--shadow-sm)}
.pkaart__vat{color:var(--muted);font-size:.85rem}
.pkaart h4{font-family:"Kanit","Kanit Fallback",system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;
  line-height:1.05;font-size:1.45rem;margin:.15rem 0 0}
.pkaart__prijs{margin-top:.2rem;font-family:"Kanit","Kanit Fallback",system-ui,sans-serif;font-weight:700;
  font-size:1.6rem;line-height:1;color:var(--green)}
.pkaart__voor{margin-top:.45rem;font-weight:700;font-size:.92rem}
.pkaart__spec{margin-top:.15rem;color:var(--muted);font-size:.86rem;line-height:1.5}
.pkaart__optie{margin-top:.9rem;border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:var(--radius-sm);padding:.85rem .9rem}
.pkaart__optie--duo{background:var(--paper)}
.pkaart__optie--duo .ptab{background:transparent;padding:0}
.pkaart__optie .ptab{background:transparent;padding:0}
.pkaart__optiekop{font-weight:800;font-size:.85rem;line-height:1.35;margin-bottom:.5rem}

.prijs__voet{margin-top:clamp(1.4rem,3vw,2rem);display:flex;flex-wrap:wrap;align-items:center;
  gap:1rem clamp(1.2rem,3vw,2rem)}
.prijs__klein{flex:1 1 26rem;color:var(--muted);font-size:.82rem;line-height:1.5}
.prijs__cta{display:flex;flex-wrap:wrap;gap:.7rem}

@media (max-width:900px){
  .prijs__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:780px){
  .prijs__hyb{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
  .prijs__hybkop,.prijs__checks,.prijs__hyb .ptab{grid-column:1;grid-row:auto}
  .prijs__hybkop img{margin-top:1rem;padding-top:0}
}
@media (max-width:560px){
  .prijs__punten{grid-template-columns:minmax(0,1fr)}
}

/* ---- PRIJZEN ----------------------------------------------------------
   Prijskaart uit de folder, als tekst. Kleurregel van dit project: groene
   TEKST op wit is altijd --green-deep (--green haalt op wit maar 3,8:1), een
   groen VLAK met witte tekst is --green-fill. De staffelrand mag wel --green
   zijn, dat is een vlak en geen tekst. */
.prijzen{padding-block:clamp(3.4rem,7vw,5.5rem);background:var(--white)}
.prijzen__head{max-width:42rem;margin:0 0 clamp(1.6rem,3vw,2.2rem)}
.prijzen__head .eyebrow{margin-bottom:.7rem}
.prijzen__head .prijsblok__sub{margin-top:.5rem}

.prijsblok{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,3vw,2.2rem)}
.prijsblok__titel{font-size:clamp(1.5rem,3.2vw,2.15rem);line-height:1.08}
.prijsblok__sub{margin-top:.35rem;color:var(--green-deep);font-weight:600;font-size:.95rem}
.prijsblok__voet{margin-top:1rem;font-size:.82rem;color:var(--muted)}

/* De foto vult de hoogte van de tekstkolom: absoluut binnen een gestrekt
   grid-item, dezelfde constructie als .voorraad__media. De min-height geldt
   alleen mobiel, waar de figure zelf de rijhoogte bepaalt. */
.prijsblok__media{position:relative;margin:0;min-height:230px;overflow:hidden;
  border-radius:var(--radius);box-shadow:var(--shadow)}
.prijsblok__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.prijsstaffel{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.65rem}
.prijsstaffel__rij{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:var(--radius-sm);padding:.9rem 1.15rem}
.prijsstaffel__wat{font-weight:700}
.prijsstaffel__bedrag{flex:none;text-align:right}
.prijsstaffel__bedrag b{display:block;font-family:"Kanit","Kanit Fallback",system-ui,sans-serif;
  font-size:1.3rem;line-height:1;color:var(--green-deep)}
.prijsstaffel__bedrag small{display:block;margin-top:.2rem;font-size:.7rem;color:var(--muted)}

.prijskorting{max-width:44rem;margin:clamp(1.6rem,3.5vw,2.6rem) auto;text-align:center;
  background:var(--green-fill);color:#fff;border-radius:999px;
  padding:clamp(.9rem,2vw,1.15rem) clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow-sm)}
.prijskorting b{display:block;font-family:"Kanit","Kanit Fallback",system-ui,sans-serif;
  font-size:clamp(1.1rem,2.6vw,1.5rem);line-height:1.1}
.prijskorting span{display:block;margin-top:.2rem;font-size:.85rem;color:rgba(255,255,255,.92)}

.prijsgroep{display:flex;align-items:center;gap:.6rem;margin:1.5rem 0 .1rem;
  font-family:"Poppins","Poppins Fallback",sans-serif;font-size:.76rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink)}
.prijsgroep__nr{display:grid;place-items:center;flex:none;width:24px;height:24px;
  border-radius:50%;background:var(--green-fill);color:#fff;font-size:.78rem;letter-spacing:0}
.prijstabel{list-style:none;margin:0;padding:0}
.prijstabel li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.72rem 0;border-bottom:1px solid var(--line)}
.prijstabel li:last-child{border-bottom:0}
.prijstabel b{flex:none;font-family:"Kanit","Kanit Fallback",system-ui,sans-serif;font-size:1.1rem;color:var(--green-deep)}

.prijzen__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.6rem,3vw,2.2rem)}

@media(min-width:861px){
  .prijsblok{grid-template-columns:1.05fr .95fr;align-items:stretch}
}

/* De drie tekeningen uit het prijsblad van Solar Green, deterministisch uit de
   folder geknipt en 2x geschaald (geen AI: het zijn machines met Quatt-opdruk).
   De creme achtergrond komt uit de folder zelf, vandaar geen wit vlak eronder. */
.pkaart__beeld{width:100%;height:auto;border-radius:var(--radius-sm);background:#F3F2EC;margin-bottom:.85rem}

/* /assets/css/www.css */
/* Gedeelde regels die alleen voor de nieuwe website gelden. Eigenaar: de regie.
   style.css is een ongewijzigde kopie van pro.solargreen.nl en blijft dat; wat
   daarvan moet afwijken staat hier, in nav.css of in css/pages/<slug>.css. */

/* Extra merkkleuren, goedgekeurd door Shahab op 25-9 (keuze uit /_varianten/kleuren/).
   --lime alleen als vlak of op donker: zwarte tekst erop 12,3:1, witte tekst maar 1,5:1.
   --zon-zacht voor een lichte band of kaart: zwarte tekst erop 16,9:1.
   --zon (Shahab 25-9, 20:04) alleen als vlak met zwarte tekst (10,0:1) of als streep zonder tekst
   erop (onder het productwoord in de dienst-hero, blokken/dienst.css); nooit wit erop (1,9:1) en
   nooit als tekstkleur op wit. */
:root{--lime:#C3DE5E;--zon-zacht:#FFF4D6;--zon:#F5B21B}

/* Pagina's zonder hero: de vaste topbalk ligt over de inhoud. --balk-h zet
   nav.css, die kent de hoogte van de balk per schermbreedte. */
body.sub main{padding-top:var(--balk-h,88px)}

/* Voorlopig lege pagina's: alleen de paginanaam. */
.leeg{padding-block:clamp(2.5rem,6vw,5rem)}
.leeg h1{font-size:clamp(2rem,4.5vw,3.2rem)}

/* Tijdelijk, tot Shahab kiest: label boven elke ontwerpoptie die op een pagina staat
   (build.py punt 9). Weg zodra er per blok nog maar een optie over is. */
.optie-label{position:relative;z-index:3;padding:.6rem 1.2rem;background:var(--ink);color:#fff;font:600 .95rem/1.4 "Poppins","Poppins Fallback",sans-serif}

/* Zonder JavaScript blijft niets onzichtbaar: style.css zet [data-reveal] en de kinderen van [data-reveal-groep]
   op opacity 0 tot site.js ze toont (P4, voorstel db [9ddbd5] via c7). */
@media (scripting:none){[data-reveal],[data-reveal-groep] > *{opacity:1;transform:none;transition:none}}
/* Bij verminderde beweging geen zachte scroll naar ankers; style.css zet die altijd aan (B6-1, voorstel 8f via c7). */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Focus- en ankersprongen landen onder de vaste topbalk en niet eronder (WCAG 2.4.11; B1-4, voorstel 8f via c7). */
html{scroll-padding-top:calc(var(--balk-h,88px) + 12px)}
/* Safari tot en met 17 kent alleen de voorvoegselversie; zelfde waarde als style.css r.128 (WebKit-pass 2c via c7). */
.topbar.is-stuck{-webkit-backdrop-filter:saturate(1.4) blur(12px)}

/* A-01 en A-02 (Shahab 28-9, B-246 tot en met B-248): een dunne rand die oplicht bij hover en focus, en
   rustig zwevende clay-iconen. Een gedeelde regel voor de hele site; de lijst per soort, met wat bewust
   niet is meegenomen, staat in _qa/aanpassingen-20260928/A-01-LIJST.md.
   De rand is een box-shadow van 1px: de opmaak verspringt niet, en hij tekent onder de inhoud, zodat een
   uitstekende figuur heel blijft. De blokbestanden staan later in de bundel; "html body" wint van hun
   box-shadow. --sg-diep is de schaduw die de soort al had, --sg-diep-aan die bij hover. */
:root{--sg-rand:rgba(37,149,91,.42);--sg-rand-aan:var(--green);--sg-gloed:rgba(37,149,91,.65)}
.sgdp-kaart,.sgteam__feiten li{--sg-diep:0 14px 30px -24px rgba(16,20,19,.45)}
.sgc-kaart,.sgd1-kaart,.sgdh-kaart,.dz-kaart{--sg-diep:0 1px 2px rgba(16,20,19,.08),0 16px 32px -20px rgba(16,20,19,.4)}
.sgd1-kaart,.sgdh-kaart,.dz-kaart{--sg-diep-aan:var(--shadow)}
.sgz__tegel{--sg-diep:var(--shadow-sm)}
.sgm__doos{--sg-diep:var(--shadow)}
.sgr__kaart{--sg-diep:0 1px 2px rgba(16,20,19,.05),0 14px 28px -22px rgba(16,20,19,.3)}
.swp-pomp{--sg-diep:0 18px 36px -24px rgba(16,20,19,.35)}
/* Waarom-tegels: per ondergrond een rand die er zichtbaar op staat en oplicht (groen: lime; lime en zongeel:
   donkergroen; creme: merkgroen). */
.sgw-tegel:nth-child(1){--sg-rand:rgba(195,222,94,.6);--sg-rand-aan:var(--lime);--sg-gloed:rgba(195,222,94,.85)}
.sgw-tegel:nth-child(2),.sgw-tegel:nth-child(4){--sg-rand:rgba(27,117,70,.5);--sg-rand-aan:var(--green-deep);--sg-gloed:rgba(27,117,70,.65)}
html body :is(.sgdp-kaart,.sgw-tegel,.sgd1-kaart,.sgdh-kaart,.dz-kaart,.sgz__tegel,.sgc-kaart,.sgm__doos,.sgteam__feiten li,
  .sgoo-feiten li,.sgv__feiten li,.sgdp-vraag,.sgr__kaart,.swp-pomp){box-shadow:0 0 0 1px var(--sg-rand),var(--sg-diep,0 0 #0000)}
html body :is(.sgdp-kaart,.sgw-tegel,.sgz__tegel,.sgc-kaart,.sgm__doos,.sgteam__feiten li,.sgoo-feiten li,.sgv__feiten li,
  .sgdp-vraag,.swp-pomp){transition:box-shadow .3s ease}
html body .sgr__kaart{transition:transform .45s var(--ease),box-shadow .3s ease}
html body :is(.sgdp-kaart,.sgw-tegel,.sgd1-kaart,.sgdh-kaart,.dz-kaart,.sgz__tegel,.sgc-kaart,.sgteam__feiten li,.sgoo-feiten li,
  .sgv__feiten li,.sgdp-vraag,.sgr__kaart,.swp-pomp):focus-within,
html body .sgm__kaart:focus-within .sgm__doos{
  box-shadow:0 0 0 1px var(--sg-rand-aan),0 0 22px -2px var(--sg-gloed),var(--sg-diep-aan,var(--sg-diep,0 0 #0000))}
/* Prijsregels (A-02): geen link, dus geen optillen of wijzende cursor; alleen rand en een zachte groene waas. */
html body .sgdp-staffel__rij{box-shadow:inset 0 0 0 1px var(--sg-rand);transition:background-color .3s ease,box-shadow .3s ease}
html body .sgdp-staffel__rij--uitgelicht{box-shadow:inset 0 0 0 1px rgba(27,117,70,.5)}
/* Soorten met een eigen rand of scheidingslijn: die lijn wordt groen in rust, de eigen hover blijft (geen dubbele lijn). */
html body .kerncijfers__rij{box-shadow:0 0 0 1px var(--sg-rand),0 1px 2px rgba(20,20,20,.05),0 18px 40px -24px rgba(20,20,20,.32)}
html body .kerncijfer{border-color:var(--sg-rand)}
html body .sgct-kaart{border-top-color:var(--sg-rand);border-right-color:var(--sg-rand);border-left-color:var(--sg-rand)}
html body .sgfaq-snel a{box-shadow:0 0 0 1px var(--sg-rand),0 14px 30px -24px rgba(16,20,19,.45)}
html body :is(.sgpr-rij,.sgvm__kaart){border-color:var(--sg-rand)}
@media (hover:hover){
  html body :is(.sgdp-kaart,.sgw-tegel,.sgd1-kaart,.sgdh-kaart,.dz-kaart,.sgz__tegel,.sgc-kaart,.sgteam__feiten li,.sgoo-feiten li,
    .sgv__feiten li,.sgdp-vraag,.sgr__kaart,.swp-pomp):hover,
  html body .sgm__kaart:hover .sgm__doos{
    box-shadow:0 0 0 1px var(--sg-rand-aan),0 0 22px -2px var(--sg-gloed),var(--sg-diep-aan,var(--sg-diep,0 0 #0000))}
  html body .sgdp-staffel__rij:hover{background-color:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green),0 0 20px -3px var(--sg-gloed)}
  html body .sgdp-staffel__rij--uitgelicht:hover{background-color:var(--lime);box-shadow:inset 0 0 0 1px var(--green-deep),0 0 20px -3px var(--sg-gloed)}
}
/* Clay-iconen zweven en kantelen licht, alleen met translate en rotate (los van een transform die er al staat).
   De vertraging verspringt per kaart, dus niet alles tegelijk; bij hover op de kaart wordt het icoon iets groter.
   Bij verminderde beweging staat alles stil; de rand blijft. */
@keyframes sg-zweef{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -8px;rotate:-5deg}}
@media (prefers-reduced-motion:no-preference){
  :is(.kerncijfer__ic,.sgdp-kaart__3d,.sgz__3d,.sgw-tegel__3d,.sgd1-ico img,.sgdh-ico img,.dz-ic img,.sgm__3d,.sgteam__feiten img,
    .sgoo-feiten img,.sgv__feiten img,.sgvm__kolom img,.sgct-kaart__icoon img,.sgfaq-kop__3d,.sgfaq-snel img,.pj-groep__3d,.sg-klei){
    animation:sg-zweef 3.5s ease-in-out infinite;transition:scale .35s ease}
  :is(.kerncijfer,.sgdp-kaart,.sgz__tegel,.sgw-tegel,.sgd1-kaart,.sgdh-kaart,.dz-kaart,.sgm__kaart,.sgteam__feiten li,.sgoo-feiten li,
    .sgv__feiten li,.sgvm__kolom,.sgct__kaarten li,.sgfaq-snel li,.sgdp-stap):nth-child(4n+2) :is(img,.sg-klei){animation-delay:-.875s}
  :is(.kerncijfer,.sgdp-kaart,.sgz__tegel,.sgw-tegel,.sgd1-kaart,.sgdh-kaart,.dz-kaart,.sgm__kaart,.sgteam__feiten li,.sgoo-feiten li,
    .sgv__feiten li,.sgvm__kolom,.sgct__kaarten li,.sgfaq-snel li,.sgdp-stap):nth-child(4n+3) :is(img,.sg-klei){animation-delay:-1.75s}
  :is(.kerncijfer,.sgdp-kaart,.sgz__tegel,.sgw-tegel,.sgd1-kaart,.sgdh-kaart,.dz-kaart,.sgm__kaart,.sgteam__feiten li,.sgoo-feiten li,
    .sgv__feiten li,.sgvm__kolom,.sgct__kaarten li,.sgfaq-snel li,.sgdp-stap):nth-child(4n) :is(img,.sg-klei){animation-delay:-2.625s}
}
/* OPT-01 (8f, AANGEPAST 28-9): op aanraakschermen zweeft het icoon drie keer en blijft dan in de ruststand staan, dat spaart
   de batterij. De keyframes beginnen en eindigen op de ruststand, dus er is geen sprong. Met een muis blijft het doorlopen. */
@media (hover:none) and (prefers-reduced-motion:no-preference){
  :is(.kerncijfer__ic,.sgdp-kaart__3d,.sgz__3d,.sgw-tegel__3d,.sgd1-ico img,.sgdh-ico img,.dz-ic img,.sgm__3d,.sgteam__feiten img,
    .sgoo-feiten img,.sgv__feiten img,.sgvm__kolom img,.sgct-kaart__icoon img,.sgfaq-kop__3d,.sgfaq-snel img,.pj-groep__3d,.sg-klei){
    animation-iteration-count:3}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  :is(.kerncijfer,.sgdp-kaart,.sgz__tegel,.sgw-tegel,.sgd1-kaart,.sgdh-kaart,.dz-kaart,.sgm__kaart,.sgteam__feiten li,.sgoo-feiten li,
    .sgv__feiten li,.sgvm__kolom,.sgct-kaart,.sgfaq-snel a,.sgdp-stap):hover :is(.kerncijfer__ic,.sgdp-kaart__3d,.sgz__3d,.sgw-tegel__3d,
    .sgd1-ico img,.sgdh-ico img,.dz-ic img,.sgm__3d,.sgteam__feiten img,.sgoo-feiten img,.sgv__feiten img,.sgvm__kolom img,
    .sgct-kaart__icoon img,.sgfaq-snel img,.sg-klei){scale:1.15}
}
/* S-03 (4c, 28-9): de icoonsprite staat met een klasse buiten beeld in plaats van met een style-attribuut, zodat de CSP geen 'unsafe-inline' nodig heeft. */
.sg-sprite{position:absolute}
/* A-04 (Shahab 28-9): een link met een tekstfragment (#:~:text=) kleurt de tekst niet met de paarse browsermarkering. */
::target-text{background:transparent;color:inherit}

/* /assets/css/nav.css */
/* Hoofdmenu van de nieuwe website. Eigenaar: de nav-terminal (5f), zie WERKAFSPRAKEN.md.
   De topbalk zelf staat in style.css (kopie van pro.solargreen.nl); hier alleen wat het
   menu erbij vraagt. Drie standen, gekozen op de gemeten breedtes (logo 272px, menu
   ongeveer 500px, telefoonnummer 138px, Gratis scan 162px, balk hooguit 1180px):
   - vanaf 1240px: menu in de balk tussen logo en knoppen, de groepen klappen uit als kaart;
   - 780 tot 1240px: hamburger rechts, het menu als kaart onder de balk;
   - onder 780px: bellen ook als rond knopje, Gratis scan staat dan onderin het menu.
   Appen is op elke breedte een rond knopje: met het menu erbij past het label "App ons"
   niet meer naast het telefoonnummer, en dat nummer moet op een computer leesbaar zijn.
   nav.js zet aria-expanded; deze CSS toont alleen wat daar staat. */

/* Hoogte van de vaste balk in de solide stand: .55rem padding boven en onder plus het
   hoogste kind (het logo van 48px, tot 620px de ronde knopjes). www.css gebruikt dit als
   ruimte boven de inhoud van pagina's zonder hero. */
:root{--balk-h:calc(48px + 1.1rem)}

.hoofdnav__lijst,.hoofdnav__sub{list-style:none;margin:0;padding:0}
.hoofdnav__knop{border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.hoofdnav__pijl{flex:none;transition:transform .25s var(--ease)}
.hoofdnav__knop[aria-expanded="true"] .hoofdnav__pijl{transform:rotate(180deg)}
/* Skiplink "Naar de inhoud" (Shahab 25-9 via c7): verborgen boven het scherm tot hij focus krijgt, dan een groene
   pil zoals .btn linksboven, boven de vaste balk (z-index 50). Focusrand zoals elders op de site (3px --green,
   2px los) met een witte naad ertussen, zodat hij leesbaar blijft op de witte balk en op de donkere herofoto. */
.skiplink{position:fixed;top:.75rem;left:.75rem;z-index:60;padding:.85rem 1.4rem;border-radius:999px;
  background:var(--green-fill);color:#fff;font-weight:700;font-size:.96rem;line-height:1;white-space:nowrap;
  transform:translateY(calc(-100% - 1.5rem))}
.skiplink:focus{transform:none;outline:3px solid var(--green);outline-offset:2px;
  box-shadow:0 0 0 2px #fff,0 12px 26px -12px rgba(16,20,19,.55)}
/* Het logo nooit platdrukken; de standen hieronder zorgen dat alles past. */
.topbar__logo{flex:none}
.hoofdnav__cta{display:none}

/* ---------- Ronde knopjes: appen, de hamburger en (onder 780px) bellen ---------- */
.topbar .btn--wa{width:2.8rem;height:2.8rem;padding:0;border-radius:50%}
.topbar .btn--wa .lbl{display:none}
.topbar__menu{display:none;align-items:center;justify-content:center;flex:none;width:2.8rem;height:2.8rem;padding:0;
  border:0;border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;
  box-shadow:inset 0 0 0 1.5px rgba(42,22,13,.14),0 12px 26px -16px rgba(20,20,20,.5);transition:background .2s var(--ease)}
.topbar__menu:hover{background:var(--green-soft)}
.topbar__menu span,.topbar__menu span::before,.topbar__menu span::after{display:block;width:18px;height:2px;border-radius:2px;
  background:currentColor;transition:transform .25s var(--ease),background-color .2s}
.topbar__menu span{position:relative}
.topbar__menu span::before,.topbar__menu span::after{content:"";position:absolute;left:0}
.topbar__menu span::before{top:-6px}
.topbar__menu span::after{top:6px}
.topbar__menu[aria-expanded="true"] span{background-color:transparent}
.topbar__menu[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.topbar__menu[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- Breed: menu in de balk ---------- */
@media (min-width:1240px){
  .hoofdnav{color:#fff;transition:color .35s var(--ease)}
  .topbar.is-stuck .hoofdnav{color:var(--ink)}
  .hoofdnav__lijst{display:flex;align-items:center;gap:.1rem}
  .hoofdnav__item--sub{position:relative}
  .hoofdnav__lijst>li>a,
  .hoofdnav__knop{position:relative;display:inline-flex;align-items:center;gap:.35rem;padding:.6rem .7rem;border-radius:10px;
    font-weight:600;font-size:.95rem;line-height:1.2;white-space:nowrap}
  /* Streep onder de tekst: bij hover en open in de tekstkleur, bij de huidige pagina groen.
     Staat de huidige pagina in een groep, dan krijgt de groepsknop hem ook. */
  .hoofdnav__lijst>li>a::after,
  .hoofdnav__knop::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.3rem;height:2px;border-radius:2px;
    background:currentColor;transform:scaleX(0);transition:transform .25s var(--ease)}
  .hoofdnav__knop::after{right:calc(.7rem + 12px + .35rem)}
  .hoofdnav__lijst>li>a:hover::after,
  .hoofdnav__knop:hover::after,
  .hoofdnav__knop[aria-expanded="true"]::after{transform:scaleX(1)}
  .hoofdnav__lijst>li>a[aria-current="page"]::after,
  .hoofdnav__item--sub:has(a[aria-current="page"])>.hoofdnav__knop::after{transform:scaleX(1);background:var(--green-light)}
  .topbar.is-stuck .hoofdnav__lijst>li>a[aria-current="page"]::after,
  .topbar.is-stuck .hoofdnav__item--sub:has(a[aria-current="page"])>.hoofdnav__knop::after{background:var(--green)}
  /* Diensten (db, besluit Shahab 25-9 21:46): het woord is een link naar /diensten/, het pijltje een eigen
     knop. Samen staan ze als de oude groepsknop; de streep komt onder het woord. De ruimte ertussen houdt
     de focusringen (3px plus 2px offset) van link en knop los van elkaars tekst en pijltje. */
  .hoofdnav__item--link{display:flex}
  .hoofdnav__item--link>.hoofdnav__link{padding-right:.3rem}
  .hoofdnav__item--link>.hoofdnav__link::after{right:.3rem}
  .hoofdnav__item--link>.hoofdnav__knop{padding-left:.25rem}
  .hoofdnav__item--link>.hoofdnav__knop::after{content:none}
  .hoofdnav__item--link:hover>.hoofdnav__link::after,
  .hoofdnav__item--link:has(.hoofdnav__knop[aria-expanded="true"])>.hoofdnav__link::after{transform:scaleX(1)}
  .hoofdnav__item--link:has(a[aria-current="page"])>.hoofdnav__link::after{transform:scaleX(1);background:var(--green-light)}
  .topbar.is-stuck .hoofdnav__item--link:has(a[aria-current="page"])>.hoofdnav__link::after{background:var(--green)}

  /* Uitklapkaart onder een groep */
  .hoofdnav__sub{position:absolute;top:100%;left:0;min-width:14rem;margin-top:.75rem;padding:.4rem;
    background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow);color:var(--ink);
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s}
  /* Brug over de marge, zodat de muis onderweg naar de kaart binnen het item blijft. */
  .hoofdnav__sub::before{content:"";position:absolute;left:0;right:0;top:-.75rem;height:.75rem}
  .hoofdnav__knop[aria-expanded="true"]+.hoofdnav__sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .hoofdnav__sub a{display:block;padding:.55rem .8rem;border-radius:8px;font-weight:600;font-size:.95rem;white-space:nowrap;
    transition:background .2s var(--ease),color .2s var(--ease)}
  .hoofdnav__sub a:hover,
  .hoofdnav__sub a[aria-current="page"]{background:var(--green-soft);color:var(--green-deep)}
}

/* ---------- Smal: hamburger ---------- */
@media (max-width:1239.98px){
  .topbar .wrap{gap:.7rem}
  .topbar__actions{margin-left:auto}
  /* In de broncode staat de hamburger voor het menu, zodat Tab na het openen meteen
     het menu in gaat; hier komt hij rechts van de knoppen. */
  .topbar__menu{display:inline-flex;order:1}

  /* Het menu als kaart onder de balk, rechts gelijk met de inhoud. */
  .hoofdnav{position:absolute;top:100%;right:max(1.2rem,(100% - var(--maxw)) / 2);width:min(24rem,100% - 2.4rem);margin-top:.5rem;
    max-height:calc(100vh - 6.5rem);max-height:calc(100dvh - 6.5rem);overflow-y:auto;overscroll-behavior:contain;
    padding:.5rem;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);color:var(--ink);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s}
  .topbar__menu[aria-expanded="true"]+.hoofdnav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .hoofdnav__lijst>li+li{border-top:1px solid var(--line)}
  .hoofdnav__lijst>li>a,
  .hoofdnav__knop{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:.8rem .9rem;border-radius:12px;
    font-weight:600;font-size:1.02rem;line-height:1.3;text-align:left;transition:background .2s var(--ease),color .2s var(--ease)}
  .hoofdnav__sub{display:none;margin:0 0 .5rem .9rem;padding-left:.6rem;border-left:2px solid var(--green-soft)}
  .hoofdnav__knop[aria-expanded="true"]+.hoofdnav__sub{display:block}
  /* Diensten (db, besluit Shahab 25-9 21:46): de link vult de rij, rechts ervan een eigen pijlknop
     (44px breed) die de subitems uitklapt. Een kort streepje scheidt de twee; hover en de huidige
     pagina kleuren ze samen als een rij. */
  .hoofdnav__item--link{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .hoofdnav__item--link>.hoofdnav__sub{grid-column:1/-1}
  .hoofdnav__item--link>.hoofdnav__link{border-radius:12px 0 0 12px}
  .hoofdnav__item--link>.hoofdnav__knop{width:auto;padding:.8rem .9rem .8rem 1.1rem;border-radius:0 12px 12px 0;
    background:linear-gradient(var(--line),var(--line)) left center/1px 1.5rem no-repeat}
  .hoofdnav__item--link:has(a[aria-current="page"])>.hoofdnav__link{background:var(--green-soft);color:var(--green-deep)}
  .hoofdnav__sub a{display:block;padding:.6rem .8rem;border-radius:10px;font-weight:600;font-size:.96rem;color:var(--ink-2);
    transition:background .2s var(--ease),color .2s var(--ease)}
  .hoofdnav__lijst>li>a:hover,.hoofdnav__knop:hover,.hoofdnav__sub a:hover{background:var(--paper)}
  .hoofdnav__lijst>li>a[aria-current="page"],
  .hoofdnav__item--sub:has(a[aria-current="page"])>.hoofdnav__knop,
  .hoofdnav__sub a[aria-current="page"]{background:var(--green-soft);color:var(--green-deep)}
}

/* ---------- Onder 780px: bellen als rond knopje, Gratis scan onderin het menu ---------- */
/* style.css verbergt het telefoonnummer hier; het knopje houdt de belfunctie in de balk. */
@media (max-width:779.98px){
  .topbar .topbar__actions>.topbar__tel{display:inline-flex;justify-content:center;flex:none;width:2.8rem;height:2.8rem;padding:0;
    border-radius:50%;background:#fff;color:var(--green-deep);
    box-shadow:inset 0 0 0 1.5px rgba(42,22,13,.14),0 12px 26px -16px rgba(20,20,20,.5);transition:background .2s var(--ease)}
  .topbar .topbar__actions>.topbar__tel:hover{background:var(--green-soft)}
  .topbar__tel .lbl{display:none}
  .topbar__actions>.btn--primary{display:none}
  .hoofdnav__cta{display:flex;margin:.5rem .2rem .2rem}
}

/* ---------- Telefoon ---------- */
@media (max-width:620px){
  :root{--balk-h:calc(2.5rem + 1.1rem)}
  .topbar .wrap,.topbar__actions{gap:.5rem}
  .topbar .topbar__actions>.topbar__tel,.topbar .btn--wa,.topbar__menu{width:2.5rem;height:2.5rem}
  /* style.css zet het logo hier op 38px; dat past niet naast drie knopjes op de
     smalste telefoons, dus meeschalen met de breedte (390px: 37px, 320px: 30px). */
  .topbar__logo img,
  .topbar__logo img+img,
  .topbar.is-stuck .topbar__logo img,
  .topbar.is-stuck .topbar__logo img+img{height:clamp(26px,9.5vw,38px)}
}
@media (max-width:359.98px){
  :root{--balk-h:calc(2.25rem + 1.1rem)}
  .topbar .wrap,.topbar__actions{gap:.4rem}
  .topbar .topbar__actions>.topbar__tel,.topbar .btn--wa,.topbar__menu{width:2.25rem;height:2.25rem}
}

@media (prefers-reduced-motion:reduce){
  .hoofdnav,.hoofdnav__sub,.hoofdnav__pijl,.hoofdnav__lijst>li>a::after,.hoofdnav__knop::after,
  .topbar__menu span,.topbar__menu span::before,.topbar__menu span::after{transition:none}
}

/* ---------- Zwevende WhatsApp-knop (Shahab 26-9 via c7) ----------
   Rond, rechtsonder, 56px (52px onder 768px), WhatsApp-groen #188841 met een wit icoon (4,5:1). De witte ring is
   nodig op de groene banden, waar groen op groen vrijwel wegvalt; pro doet hetzelfde bij .bel-float. z-index 45:
   boven het offerteblok en de footer, onder de vaste balk (50), zodat het uitgeklapte mobiele menu eroverheen valt.
   Lightboxen en dialogen staan in de top layer en dus altijd erboven. Er is geen vaste onderbalk op mobiel.
   Focus: een donkere ring tussen twee witte, zichtbaar op elke ondergrond. De env() houdt hem op een iPhone vrij
   van de home-indicator. */
.wa-zweef{position:fixed;right:24px;bottom:24px;z-index:45;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:#188841;color:#fff;
  box-shadow:0 0 0 3px #fff,0 6px 18px rgba(16,20,19,.24);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s}
.wa-zweef svg{width:30px;height:30px}
.wa-zweef:hover{background:#147237;transform:scale(1.06);box-shadow:0 0 0 3px #fff,0 10px 24px rgba(16,20,19,.3)}
.wa-zweef:focus-visible{outline:2px solid transparent;
  box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink),0 0 0 8px #fff,0 6px 18px rgba(16,20,19,.24)}
@media (max-width:767.98px){
  .wa-zweef{right:16px;bottom:max(16px,env(safe-area-inset-bottom));width:52px;height:52px}
  .wa-zweef svg{width:28px;height:28px}
}
@media (prefers-reduced-motion:reduce){.wa-zweef{transition:none}.wa-zweef:hover{transform:none}}

/* "Gratis offerte" (Shahab 26-9 via c7, was "Gratis scan") is drie tekens langer: onder 340 brak de limeknop op de home
   in twee regels. Hier op een regel met iets minder zijpadding; de rij houdt zijn 16px rechts. */
@media (max-width:339.98px){.topbar .topbar__actions>.btn--primary{white-space:nowrap;padding:0 .4rem}}

/* /assets/css/offerteblok.css */
/* Offerteblok boven de footer (SG-08). Eigenaar: e5, zie WERKAFSPRAKEN.md.
   Opbouw zoals het offerteblok van De Bresser (sb-ob), in Solar Green-huisstijl: een witte kaart met
   een dunne groene rand, links een groen paneel met een uitgeknipte figuur die 44px boven de kaart
   uitsteekt, rechts het formulier. Lagen in de kaart: de rand (0) onder de figuur (1), het groene
   vlak (2) over de onderkant van de figuur. Het groen blijft 1px van de kaartrand, zodat de rand er
   langs doorloopt. Contrast: wit op --green-fill 5,1:1, foutrood #B42318 op wit 6,6:1. */
.ob{padding-block:clamp(3.5rem,7vw,6rem) clamp(3rem,6vw,5rem)}
#offerte{scroll-margin-top:var(--balk-h,88px)}
.ob__kaart{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  margin-top:44px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}
.ob__kaart::before{content:"";position:absolute;inset:0;z-index:0;border:1px solid var(--green);border-radius:inherit;pointer-events:none}

/* ---------- Paneel met figuur ---------- */
.ob__zij{position:relative;display:flex;flex-direction:column;min-width:0}
.ob__beeld{position:relative;flex:1 0 auto;min-height:330px}
/* left: + 10% van .ob__beeld schuift de figuur naar rechts (Shahab 25-9, via c7; 9f). */
.ob__fig{position:absolute;z-index:1;left:calc(34px + 10%);top:-44px;height:calc(100% + 58px);width:auto;max-width:none;
  pointer-events:none;user-select:none}
.ob__paneel{position:relative;z-index:2;padding:26px 44px 44px;color:#fff}
.ob__paneel::before{content:"";position:absolute;z-index:-1;left:1px;right:0;bottom:1px;top:-60px;background:var(--green-fill);
  border-radius:0 0 0 calc(var(--radius) - 1px);clip-path:polygon(0 60px,58% 60px,100% 0,100% 100%,0 100%)}
.ob__label{display:inline-flex;align-items:center;gap:.75rem;margin:0;
  font:700 .76rem/1.3 "Kanit","Kanit Fallback",system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.ob__label::before{content:"";width:2rem;height:1px;background:currentColor;flex:none}
.ob__kop{margin:14px 0 22px;color:#fff;font-size:clamp(1.9rem,2.7vw,2.4rem);line-height:1.1}
.ob__kop span{display:block;text-decoration:underline;text-decoration-color:var(--green-light);
  text-decoration-thickness:.12em;text-underline-offset:.16em}
.ob__stappen{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:16px}
.ob__stappen li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;align-items:start}
.ob__stappen li:not(:last-child)::after{content:"";position:absolute;left:16px;top:40px;bottom:-12px;width:2px;background:rgba(255,255,255,.6)}
.ob__nr{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;
  color:var(--green-deep);font:700 1rem/1 "Kanit","Kanit Fallback",system-ui,sans-serif}
.ob__stappen strong{font:600 1.05rem/1.35 "Kanit","Kanit Fallback",system-ui,sans-serif;text-wrap:balance}
.ob__stappen span:not(.ob__nr){font-size:.92rem;line-height:1.5;text-wrap:pretty}
.ob__belzin{margin:0 0 10px;font-size:.95rem;font-weight:600;line-height:1.4}
.ob__bel{display:inline-flex;align-items:center;gap:12px;min-height:64px;padding:10px 22px 10px 10px;border-radius:var(--radius-sm);
  background:#fff;color:var(--ink);font:700 1.45rem/1 "Kanit","Kanit Fallback",system-ui,sans-serif;white-space:nowrap;transition:background .2s var(--ease)}
.ob__bel:hover{background:var(--green-soft)}
.ob__bel:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ob__belico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--green-soft);color:var(--green-deep);flex:none}
.ob__belico svg{width:22px;height:22px}

/* ---------- Formulier ---------- */
.ob__form{position:relative;min-width:0;margin:0;padding:40px 44px}
.ob__verborgen{display:none}
.ob__intro{margin:0 0 22px;max-width:62ch;color:var(--muted);font-size:1rem;line-height:1.6}
/* Drie kolommen (Shahab 26-9 via c7, db [8a0ff1]): het adres lang (twee derde) naast soort pand, daaronder naam,
   telefoon en e-mail even breed. In de uitklapper blijven het er twee. Tot 620px alles onder elkaar (zie onderaan). */
.ob__velden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px}
.ob__meer>.ob__velden{grid-template-columns:repeat(2,minmax(0,1fr))}
.ob__veld--adres{grid-column:span 2}
.ob__diensten,.ob__veld--breed,.ob__verstuur{grid-column:1/-1}
/* Naast het paneel is het formulier tussen 901 en ca. 1200px maar 470 tot 580px breed: daar kapte een derde kolom
   "Kies soort pand" af. Dan twee kolommen, met het adres over de hele rij. */
.ob__form{container-type:inline-size}
@container (max-width:580px){
  .ob__velden{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ob__veld--adres{grid-column:1/-1}
}
.ob__diensten{min-width:0;margin:0;padding:0;border:0}
.ob__diensten legend,.ob__veld>label{padding:0;color:var(--ink);font-size:.9rem;font-weight:600;line-height:1.3}
.ob__diensten legend{margin-bottom:8px}
.ob__opt{color:var(--muted);font-weight:400}
.ob__keuzes{display:flex;flex-wrap:wrap;gap:8px}
.ob__keuze{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:8px 14px;border:1px solid #7D8783;border-radius:999px;
  background:#fff;color:var(--ink);font-size:.95rem;font-weight:600;line-height:1.2;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease)}
.ob__keuze:hover{border-color:var(--green-deep)}
.ob__keuze input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--green-fill)}
.ob__keuze input:focus-visible{outline:0}
.ob__keuze:has(input:focus-visible){outline:3px solid var(--green);outline-offset:2px}
.ob__keuze:has(input:checked){background:var(--green-soft);border-color:var(--green-fill);color:var(--green-deep)}
.ob__diensten.is-fout .ob__keuze{border-color:#B42318}
.ob__veld{display:flex;flex-direction:column;gap:6px;min-width:0}
.ob__veld input,.ob__veld select,.ob__veld textarea{width:100%;min-height:48px;margin:0;padding:11px 14px;border:1px solid #7D8783;
  border-radius:var(--radius-sm);background:#fff;color:var(--ink);font:500 1rem/1.3 "Poppins","Poppins Fallback",system-ui,sans-serif}
.ob__veld textarea{min-height:92px;resize:vertical;line-height:1.45}
.ob__veld select{-webkit-appearance:none;appearance:none;padding-right:42px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23101413' d='M5.5 8.5l6.5 7 6.5-7z'/%3E%3C/svg%3E") no-repeat right 14px center/16px}
.ob__veld [aria-invalid="true"]{border-color:#B42318;box-shadow:0 0 0 1px #B42318}
.ob__form ::placeholder{color:#6B7470;opacity:1}
.ob__fout{margin:0;color:#B42318;font-size:.85rem;font-weight:600;line-height:1.4}
.ob__diensten .ob__fout{margin-top:8px}
/* Gevonden adres onder het adresveld (PDOK): muted 6,4:1 en green-deep 5,7:1 op wit. */
.ob__adres{margin:0;color:var(--muted);font-size:.85rem;line-height:1.4}
.ob__adres:empty{display:none}
.ob__adres.is-goed{color:var(--green-deep);font-weight:600}

/* Optionele velden achter een uitklapper: Shahab wil het formulier compact. */
.ob__meer{padding-top:6px;border-top:1px solid var(--line)}
.ob__meer summary{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;color:var(--green-deep);font-weight:600;cursor:pointer;list-style:none}
.ob__meer summary::-webkit-details-marker{display:none}
.ob__meer summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease)}
.ob__meer[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.ob__meer>.ob__velden{margin-top:8px}

.ob__verstuur{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:4px}
.ob__verstuur p{flex:1 1 220px;margin:0;color:var(--muted);font-size:.8rem;line-height:1.5}
.ob__verstuur a{color:var(--green-deep);font-weight:600;text-decoration:underline}
.ob__verstuur .btn[disabled]{opacity:.75;cursor:progress;transform:none}

/* Status onder de knop: controlefout, testmodus, bedankt of het vangnet naar bellen en mailen. */
.ob__melding{margin-top:16px;padding:1rem 1.2rem;border-radius:var(--radius-sm);line-height:1.55}
.ob__melding:empty{margin:0;padding:0}
.ob__melding:focus{outline:0}
.ob__melding a{color:inherit;font-weight:700;text-decoration:underline}
.ob__melding--ok{background:var(--green-soft);border:1px solid #BFE5CE;color:#14532D}
.ob__melding--fout,.ob__melding--controle{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.ob__melding--test{background:#FFF7E0;border:1px solid #F2D27A;color:#5C4400;font-weight:600}

@media (max-width:900px){
  .ob__kaart{grid-template-columns:minmax(0,1fr)}
  .ob__beeld{min-height:230px}
  .ob__fig{left:calc(22px + 10%)}
  .ob__paneel{padding:26px 24px 32px}
  /* Hier raakt het groen de linker- en rechterrand; de onderkant grenst aan het formulier. */
  .ob__paneel::before{left:1px;right:1px;bottom:0;border-radius:0}
  .ob__kop{font-size:clamp(1.75rem,7.4vw,2.2rem)}
  .ob__form{padding:28px 20px}
}
@media (max-width:620px){
  .ob__velden,.ob__meer>.ob__velden{grid-template-columns:minmax(0,1fr)}
  .ob__veld--adres{grid-column:auto}
  /* Iets smaller, zodat de zes keuzes op 390px in drie rijen passen in plaats van vier. */
  .ob__keuze{padding:8px 11px;gap:7px;font-size:.9rem}
  .ob__verstuur .btn{width:100%}
  .ob__bel{width:100%;max-width:23rem}
}

/* /assets/css/footer.css */
/* Footer. Eigenaar: de hero-terminal (fb). De footerstijl zelf staat in style.css (pro);
   hier alleen wat op de nieuwe site afwijkt. */

/* Pro had drie kolommen (merk, diensten, contact); hier komt de kolom Solar Green erbij.
   Omdat deze regels na style.css laden, staan de smallere stappen van pro hieronder
   opnieuw, anders zou de vierkolomsregel ook op mobiel gelden. */
.foot__top{grid-template-columns:1.5fr 1fr 1fr 1.3fr}
@media(max-width:1100px){
  .foot__top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__brand{grid-column:1 / -1}
}
@media(max-width:860px){.foot__top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot__top{grid-template-columns:1fr}}

/* "Gemaakt door" stond als losse tekst in de flexrij en kreeg zo de gewone tekstmaat en
   -kleur, groter en feller dan de links ernaast; op 390px brak het ook nog over twee
   regels (zo ook op pro). Nu een eigen stuk in de rij, in de maat en kleur van de links,
   en de rij mag omslaan. */
.foot__legal{flex-wrap:wrap;column-gap:1.3rem;row-gap:.4rem}
.foot__credit{color:#fff;font-size:.88rem;white-space:nowrap}

/* Vol wit (Shahab 26-9 via c7: "die wit zou hier feller worden toch"; eerst 25-9 .94 en .82). style.css blijft een
   ongewijzigde kopie van pro, dus de nieuwe waarden staan hier. Alle tekst in de footer is #fff: intro, links,
   adres, de copyrightregel met credit en de juridische links; alleen de puntjes (.foot__punt) blijven zachter. Het
   onderscheid zit nu alleen in maat en gewicht. Video en sluier blijven zoals ze waren: wit haalt daarop overal
   ruim AA (gemeten 26-9 door 8f). De knop Vraag je gratis scan aan kreeg via .foot__col a ook .76; nu weer wit, zoals bedoeld,
   en op --green-fill zoals .btn--primary (wit haalt daarop 5,1:1, op --green maar 3,8:1). Hover blijft --green-deep. */
.foot__tag{color:#fff}
.foot__col a:not(.foot__cta){color:#fff}
.foot__col .foot__cta{color:#fff}
/* De pijl in de knop werd via .foot__col a svg (style.css) groen op groen; .foot__cta svg{color:#fff} verloor op
   specificiteit. */
.foot__col .foot__cta svg{color:#fff}
.foot__cta{background:var(--green-fill)}
.foot__area,.foot__bottom small,.foot__legal a{color:#fff}

/* Onderregel zoals bij OranjeLift (8f, 25-9-2026, Shahab via c7): twee gecentreerde regels, eerst copyright, datum,
   KvK, btw en credit, dan de zeven juridische pagina's, telkens met puntjes ertussen. Elk stuk breekt als geheel
   (nowrap), zodat een datum of nummer nooit over twee regels valt. Wit op donker, zoals de rest van de footer. */
.foot__bottom{flex-direction:column;align-items:center;justify-content:center;gap:.55rem;text-align:center}
.foot__regel{font-size:.84rem;line-height:1.7}
.foot__regel .foot__credit{font-size:inherit}
/* De creditlink is net zo wit als "Gemaakt door"; de streep laat zien dat het een link is (WCAG 1.4.1, 8f 26-9). */
.foot__credit a{text-decoration:underline;text-underline-offset:2px}
.foot__regel > span,.foot__legal a{white-space:nowrap}
.foot__punt{color:rgba(255,255,255,.5)}
.foot__legal{align-items:baseline;justify-content:center;column-gap:.45rem;row-gap:.2rem;line-height:1.7}
.foot__legal a,.foot__legal .foot__punt{font-size:.84rem}
/* Zodra de regels omslaan (onder 900px), zou een puntje los aan het begin of eind van een regel hangen. Dan geen
   puntjes, maar ruimte tussen de stukken. */
@media (max-width:900px){
  .foot__regel{display:flex;flex-wrap:wrap;justify-content:center;column-gap:1rem}
  .foot__legal{column-gap:1rem}
  .foot__punt{display:none}
}
@media (max-width:560px){.foot__bottom{align-items:center}}
/* Klikvlak (M-01 en M-03 van 19, c7 26-9): groter zonder dat de footer hoger wordt. Padding met een even grote
   negatieve marge vult de ruimte tussen de links, maar schuift niets op: menulinks worden 36 in plaats van 25 hoog
   (gap .7rem), juridische links 26 in plaats van 23 (row-gap .2rem). De credit is inline, dus padding raakt de regel
   niet. Instagram blijft 38 groot en krijgt een onzichtbare rand tot 48x48. Een klikvlak van 48 voor de gestapelde
   links kan alleen als de footer hoger wordt; die keus ligt bij c7. */
.foot__col a:not(.foot__cta){padding-block:.35rem;margin-block:-.35rem}
.foot__legal a{padding-block:.1rem;margin-block:-.1rem}
.foot__credit a{padding-block:.12rem}
.foot__social a{position:relative}
.foot__social a::after{content:"";position:absolute;inset:-5px}
/* Onderruimte voor de zwevende WhatsApp-knop (.wa-zweef in nav.css, 5f): 56px op 24px van de hoek, onder 768px 52px op
   16px. Zo eindigt de laatste regel boven de knop en dekt hij geen link af (5f, 26-9, Shahab via c7).
   Alleen tot 1240px: breder blijft er met de gewone 1.4rem minstens 20px tussen de gecentreerde regels en de knop.
   Smaller raakt de knop anders een link, op /contact/ (langere creditregel) al vanaf ongeveer 1180px (gemeten door
   fb, 26-9, Shahab via c7). */
@media (max-width:1240px){.foot__bottom{padding-bottom:90px}}
@media (max-width:767.98px){.foot__bottom{padding-bottom:calc(78px + env(safe-area-inset-bottom))}}

/* /assets/css/blokken/paginahero.css */
/* Paginahero (5f, 25-09-2026): de kop van de dienstpagina's, sinds 25-9 herbruikbaar voor elke pagina (Shahab via
   c7: "voor elke pagina dezelfde hero maken als diensten"). Een pagina laadt dit met <!-- blok:paginahero -->.
   Klassenamen sgdp-hero (en sgdp-kruim) zijn gebleven van de dienstpagina's.
   Markup (kruimelpad, eyebrow, lead en knoppen zoals op de dienstpagina's; foto en figuur elk in een <picture> met
   <source media="(max-width:860px)" srcset="(gif van 1 px)">, zie _pages/zonnepanelen-kopen.html):
     <!-- blok:paginahero -->
     <section class="sgdp-hero" aria-labelledby="ID">
       <div class="sgdp-hero__band">
         <picture>...<img class="sgdp-hero__foto" src="/assets/img/paginahero/SLUG-foto.webp" ... sizes="50vw"></picture>
         <picture>...<img class="sgdp-hero__figuur" src="/assets/img/paginahero/SLUG-figuur.webp" ...></picture>
         <div class="wrap sgdp-hero__tekst">
           <nav class="sgdp-kruim" aria-label="Kruimelpad"><ol><li><a href="/">Home</a></li><li><span aria-current="page">NAAM</span></li></ol></nav>
           <span class="eyebrow">...</span>
           <h1 id="ID"><span>aanloop</span> <em>accentwoord</em> <span>vervolg, mag weg</span></h1>
           <p class="sgdp-hero__lead">...</p>
           <div class="sgdp-acties">(btn btn--wit, btn btn--ink)</div>
         </div>
       </div>
     </section>
     <!-- blok:scanvak -->   (direct na de sectie; afspraak e5, WERKAFSPRAKEN)
     <!-- blok:kerncijfers -->
   Knoppen: de basis van .sgdp-acties staat ook hier, zodat een pagina zonder dienst.css hem niet mist. */
.sgdp-hero .sgdp-acties{display:flex;flex-wrap:wrap;gap:.7rem}
@media (max-width:480px){.sgdp-hero .sgdp-acties .btn{width:100%;white-space:normal;line-height:1.25;text-align:center}}

/* ---------- Hero met kruimelpad ----------
   Optie 4 van db [9ddbd5], gekozen door Shahab 25-9 21:48 (via c7): band in green-fill (wit 5,1:1), rechts de foto
   als paneel met een schuine rand tot de schermrand en de monteur op de naad. Het kopaccent is de maat: aanloop
   klein, productwoord groot op een eigen regel. Scanknop wit, belknop ink. Aanpassing van Shahab: de naad begint
   direct rechts van de tekstkolom, halverwege .wrap, op elke pagina op dezelfde plek. Daarom heeft de tekstkolom een
   vaste breedte (--tk van .wrap) en hangt de naad alleen af van de vensterbreedte, niet van kop of lead.
   De band is sinds 21:31 ongeveer 25% lager, vooral uit de padding.
   Markup: h1 = <span>aanloop</span> <em>productwoord</em>, eventueel met een <span>vervolg</span> erachter.
   Foto en monteur staan elk in een <picture> met <source media="(max-width:860px)" srcset="(gif van 1 px)">,
   zodat de telefoon ze niet laadt. De monteur is img.sgdp-hero__figuur met loading="eager". Een persoon op de foto
   naast de monteur leest als dubbel: kies voor het paneel een foto zonder mensen.
   --over: hoever het scanvak over de band valt (tot 25-9 de puntenbalk, die is weg). --naad: linkeronderhoek van het fotopaneel,
   gemeten vanaf de linkerrand van de band; de bovenhoek ligt --schuin verder naar rechts. */
.sgdp-hero{--over:clamp(1.8rem,4vw,3.2rem);background:var(--paper)}
/* Lucht (Shahab 25-9 via c7: "dit oogt te druk, de hero mag iets langer worden, 20%" en "zodat dit niet zo geklemd
   voelt"): boven 860 is de band ongeveer 20% hoger, met meer ruimte boven de eyebrow, tussen de regels en tussen de
   knoppen en het scanvak dat over de onderrand valt (--onder); op de telefoon alleen iets meer. */
.sgdp-hero__band{position:relative;overflow:hidden;background:var(--green-fill);--boven:1.2rem;--onder:1.2rem;
  padding-block:var(--boven) calc(var(--over) + var(--onder));
  --tk:.5;--gat:2rem;--schuin:6rem;
  --naad:calc(max(1.2rem,(100% - var(--maxw)) / 2) + min(100% - 2.4rem,var(--maxw)) * var(--tk) + var(--gat))}
.sgdp-hero__foto,.sgdp-hero__figuur{display:none}
/* Vaste minimale hoogte (Shahab 25-9 via c7: "die maat van thuisbatterij is perfect, mag overal"). De band is
   minstens zo hoog als op /thuisbatterij-kopen/ (aanloop, woord, vervolg, lead en knoppen), per breedte gemeten en
   daartussen rechtlijnig: 440 px tot 480 breed, 514 op 861, 469 op 1024, 523 op 1280, 535 op 1440 en 537 vanaf
   ongeveer 1470. Een kortere kop staat verticaal in het midden, zodat het scanvak overal op dezelfde hoogte begint;
   een langere kop maakt de band hoger. Tussen 481 en 860 geen vaste hoogte: daar staan de knoppen naast elkaar en
   verschilt de lengte van de lead te veel. */
.sgdp-hero__band{display:flex;flex-direction:column;justify-content:center}
@media (max-width:480px){.sgdp-hero__band{min-height:27.55rem}}
@media (min-width:861px) and (max-width:1023.98px){.sgdp-hero__band{min-height:calc(47rem - 27.6vw)}}
@media (min-width:1024px) and (max-width:1279.98px){.sgdp-hero__band{min-height:calc(15.8rem + 21.1vw)}}
@media (min-width:1280px){.sgdp-hero__band{min-height:min(26.69rem + 7.5vw,33.56rem)}}
.sgdp-hero__tekst{position:relative;z-index:1;color:#fff}
/* Focusring wit: de groene ring uit style.css haalt op --green-fill maar 1,3:1, wit 5,1:1 (8f, B1-2). */
.sgdp-hero__band :focus-visible{outline-color:#fff}
.sgdp-kruim{font-size:.82rem;margin-bottom:.5rem}
.sgdp-kruim ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.sgdp-kruim li+li::before{content:"/";margin-right:.4rem;opacity:.6}
/* wit op 92% haalt op green-fill 4,6:1 (80% was 3,9:1) */
.sgdp-kruim a,.sgdp-kruim span{color:rgba(255,255,255,.92)}
.sgdp-kruim a:hover{color:#fff;text-decoration:underline}
.sgdp-hero .eyebrow{color:#fff}
.sgdp-hero .eyebrow::before{background:var(--lime)}
.sgdp-hero h1{margin-top:.7rem;color:#fff;font-size:clamp(2rem,3.7vw,2.9rem);line-height:1.08}
.sgdp-hero h1 span{display:block;font-size:.56em;line-height:1.2;font-weight:600;letter-spacing:-.01em}
/* Het productwoord; min() houdt het lange "thuisbatterij" op 320 breed binnen de kolom. Wit op het groen (5,1:1) met
   een dikke zongele streep net onder de basislijn: optie 4 van _varianten/productwoord, gekozen door Shahab 25-9
   (via c7). De streep wijkt bij elk woord vanzelf uit rond onderstokken zoals p, j en g (skip-ink). Hij hangt 0,22em
   onder de basislijn, dus buiten de regel; margin-bottom houdt afstand tot een aanloopregel eronder (bij de lead valt
   die marge weg in diens eigen marge). */
.sgdp-hero h1 em{display:block;margin:.06em 0 .2em;font-style:normal;font-size:min(1.3em,12vw);line-height:1;
  text-decoration:underline var(--zon);text-decoration-thickness:.12em;text-underline-offset:.1em;
  text-decoration-skip-ink:auto}
.sgdp-hero__lead{margin:.8rem 0 0;max-width:34em;color:rgba(255,255,255,.92);font-size:clamp(1rem,1.2vw,1.05rem);line-height:1.6}
.sgdp-hero .sgdp-acties{margin-top:1.4rem}
/* Boven 860: tekstkolom vast op --tk van .wrap, daarnaast de foto als schuin paneel tot de schermrand en de monteur
   op de naad. De monteur staat op de onderrand van de band en valt daar weg achter het scanvak; zijn hoogte
   volgt de band, dus het hoofd blijft binnen beeld. */
@media (min-width:861px){
  .sgdp-hero__band{--boven:clamp(1.6rem,3vw,2.8rem);--onder:clamp(1.6rem,4vw,3.4rem)}
  .sgdp-hero h1{margin-top:.9rem}
  .sgdp-hero h1 em{margin:.1em 0 .26em}
  .sgdp-hero__lead{margin-top:1rem}
  .sgdp-hero .sgdp-acties{margin-top:1.8rem}
  .sgdp-hero__tekst>*{max-width:calc(var(--tk) * 100%)}
  .sgdp-hero__tekst>.sgdp-hero__lead{max-width:min(34em,calc(var(--tk) * 100%))}
  .sgdp-hero__foto{display:block;position:absolute;top:0;left:var(--naad);width:calc(100% - var(--naad));height:100%;
    object-fit:cover;object-position:50% 45%;clip-path:polygon(var(--schuin) 0,100% 0,100% 100%,0 100%)}
  .sgdp-hero__figuur{display:block;position:absolute;z-index:1;bottom:0;left:calc(var(--naad) - 1.5rem);
    height:calc(100% - clamp(.8rem,1.6vw,1.3rem));width:auto;max-width:none;pointer-events:none;user-select:none;
    filter:drop-shadow(0 14px 24px rgba(0,0,0,.35))}
}
/* Op de telefoon: geen foto en geen monteur (zie de source hierboven), geen kruimelpad (logo en menu staan erboven)
   en een compactere inleiding en knoppen. */
@media (max-width:760px){
  .sgdp-kruim{display:none}
  .sgdp-hero__lead{line-height:1.5}
  .sgdp-hero .sgdp-acties .btn{padding-block:.72rem}
}
/* De puntenbalk (.sgdp-punten) is sinds 25-9 weg: de kerncijferbalk onder het scanvak zegt hetzelfde (Shahab via c7). */

/* /assets/css/blokken/scanvak.css */
/* Scanvak (e5): optie 1 van _varianten/scanvak/, als gedeeld blok op elke pagina direct onder de hero.
   Shahab 25-9 (via c7): compacter, de kaart in --zon-zacht met een dunne groene rand (2px --green-fill), de logo's in
   kleur op losse witte tegels, twee witte velden in een pil en de knop in --green-fill. Daarna, eerst als proef op de
   home en toen overal ("die lichte kleur omdraaien weer en verticale lengte weer iets smaller maken van heel het
   blok"): de pil in --lime en het blok ruim 10% lager (minder padding en minder ruimte tussen kop, chips en pil).
   Contrast: inkt op zon-zacht 16,9:1, --muted op zon-zacht 5,8:1 en op wit 6,4:1, --green-deep op wit 5,7:1 en op
   zon-zacht 5,2:1, wit op --green-fill 5,1:1 (hover --green-deep 5,7:1), de knop tegen de lime pil 3,4:1. Wit op lime
   is maar 1,5:1, dus de velden hebben een rand #5B6560: 6,0:1 tegen het wit en 4,0:1 tegen de pil. Focusring inkt: op
   zon-zacht 16,9:1, op lime 12,3:1. Eigen prefix sv-: de oude .of-regels in style.css raken dit blok niet. */
/* Even breed als de inhoud van de pagina (.wrap); alleen op de home 1300 zoals De Bresser (19). */
.scanvak{padding-block:clamp(1.5rem,3vw,2.5rem);display:flow-root}
.sv-wrap{width:min(100% - 2.4rem,var(--maxw));margin-inline:auto}
.sv-kaart{padding:clamp(18px,2vw,28px) clamp(18px,3vw,40px) 34px;border:2px solid var(--green-fill);
  border-radius:28px;background:var(--zon-zacht);box-shadow:0 24px 56px -28px rgba(23,102,61,.35)}

/* Aansluiting op de hero. Home: de kaart valt over de onderrand van de video, net als het oude scanvak
   (.hero__person duikt daar in style.css op rekenend achter), in de grijze band van de kerncijfers eronder.
   Alle andere pagina's: de regel staat direct na section.sgdp-hero en de kaart valt over de onderrand van de band.
   Sinds 25-9 is de puntenbalk (.sgdp-punten) overal weg (Shahab via c7), en daarmee de variant met het scanvak binnen
   de sectie. Daaronder volgt overal de kerncijferbalk; de ruimte tussen scanvak en balk regelt kerncijfers.css van 5f. */
.hero + .scanvak{position:relative;z-index:6;padding:0 clamp(16px,4vw,40px) clamp(2rem,3vw,2.6rem);background:var(--paper-2)}
.hero + .scanvak .sv-wrap{width:auto;max-width:1300px;margin-top:clamp(-104px,-7.5vw,-56px)}
/* --over staat op .sgdp-hero (paginahero.css) en erft hier niet (het scanvak staat na de sectie), dus dezelfde waarde. */
.sgdp-hero + .scanvak{position:relative;z-index:2;padding-top:0}
.sgdp-hero + .scanvak .sv-wrap{margin-top:calc(-1 * clamp(1.8rem,4vw,3.2rem))}

/* Kop links, logo's strak rechtsboven (Shahab 25-9 via c7: "die icoontjes kunnen meer rechts boven"): de bovenkant
   van de tegels ligt gelijk met de bovenkant van de kop. Past het niet naast elkaar, dan staan de logo's rechts BOVEN
   de kop: wrap-reverse legt de tweede rij bovenop, en daarin is flex-end de bovenkant. */
.sv-kop{display:flex;flex-wrap:wrap-reverse;align-items:flex-end;justify-content:space-between;gap:14px 24px;margin-bottom:12px}
/* Basis 400, niet 420 (CLS-01): bij 1440 passen tekst en logo's met Poppins precies naast elkaar; met het terugvallettertype
   zijn de logo's 11px breder en brak de rij tot het lettertype er was. De tekst groeit toch tot de vrije ruimte. */
.sv-tekst{flex:1 1 400px;min-width:0}
.scanvak h2{margin:0 0 4px;color:var(--ink);font:700 clamp(24px,2.4vw,34px)/1.05 "Kanit","Kanit Fallback",system-ui,sans-serif;letter-spacing:-.02em;text-wrap:balance}
.sv-tekst p{margin:0;color:var(--muted);font-size:15px;line-height:1.45}

.sv-logos{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-left:auto}
.sv-logo{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 12px;min-width:0;
  border:1px solid rgba(16,20,19,.08);border-radius:12px;background:#fff;color:var(--ink);box-shadow:0 6px 14px -8px rgba(16,20,19,.25)}
.sv-logo--stapel{flex-direction:column;gap:4px;min-width:74px;text-align:center}
.sv-logo b{font:700 .95rem/1 "Kanit","Kanit Fallback",system-ui,sans-serif;letter-spacing:.03em}
.sv-logo small{color:var(--muted);font:600 .66rem/1.15 "Poppins","Poppins Fallback",sans-serif;white-space:nowrap}
.sv-g{flex:none;width:26px;height:26px}
.sv-score{display:flex;flex-direction:column;gap:5px}
.sv-regel{font:600 .8rem/1 "Poppins","Poppins Fallback",sans-serif;white-space:nowrap}
.sv-regel b{font-size:1.1rem}
.sv-sterren{display:flex;gap:1px;color:#FBBC05}
.sv-sterren svg{width:12px;height:12px;fill:currentColor}
.sv-iq{display:block;width:auto;height:32px}
.sv-stek,.sv-nen{display:block;width:auto;height:19px}

/* ---------- Formulier ---------- */
.sv-form{position:relative;margin:0}
.sv-keuze{min-width:0;margin:0 0 10px;padding:0;border:0}
.sv-keuze legend{float:left;margin:0 12px 0 0;padding:0;color:var(--ink);font:700 14px/40px "Poppins","Poppins Fallback",sans-serif}
.sv-chips{display:flex;flex-wrap:wrap;gap:6px}
.sv-chip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 12px;border:1px solid rgba(16,20,19,.3);
  border-radius:999px;background:rgba(255,255,255,.6);color:var(--ink);font:500 14px/1.2 "Poppins","Poppins Fallback",sans-serif;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.sv-chip:hover{border-color:var(--green-deep)}
.sv-chip input{flex:none;width:16px;height:16px;margin:0;accent-color:var(--green-deep)}
.sv-chip input:focus-visible{outline:0}
.sv-chip:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:2px}
.sv-chip:has(input:checked){border-color:var(--green-deep);background:#fff;color:var(--green-deep);font-weight:600}
/* CLS-02 (8f, 28-9): met het terugvallettertype is elke chip en de legenda een paar px anders breed dan in Poppins
   (Warmtepomp 5,6 smaller, VvE 4,2 breder, legenda 2,3 smaller). Op zo'n 50 breedtes tussen 334 en 1075 brak de chiprij
   daardoor anders tot Poppins er was, en sprong een chip naar een andere regel. Met een min-width gelijk aan de grootste
   van de twee breedtes (Chrome en WebKit, naar boven afgerond) is elke chip in beide lettertypes even breed, dus breekt de rij
   overal gelijk. Op waarde, niet op volgorde: een nieuwe chip krijgt gewoon geen min-width. */
.sv-keuze legend{min-width:134px}
.sv-chip:has([value="Zonnepanelen"]){min-width:150px}
.sv-chip:has([value="Thuisbatterij"]){min-width:136px}
.sv-chip:has([value="Warmtepomp"]){min-width:148px}
.sv-chip:has([value="Airco"]){min-width:85px}
.sv-chip:has([value="VvE"]){min-width:78px}
.sv-chip:has([value="Weet ik nog niet"]){min-width:161px}

.sv-pil{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.15fr) auto;gap:6px;padding:6px;
  border-radius:999px;background:var(--lime);box-shadow:0 14px 28px -14px rgba(60,90,20,.45)}
.sv-veld{display:flex;flex-direction:column;justify-content:center;min-width:0;margin:0;padding:6px 24px;border:1px solid #5B6560;
  border-radius:999px;background:#fff;cursor:text}
.sv-veld:focus-within{outline:3px solid var(--ink);outline-offset:2px}
.sv-veld span{margin:0 0 4px;color:var(--ink);font:700 11px/1 "Poppins","Poppins Fallback",sans-serif;letter-spacing:.02em;text-transform:uppercase;opacity:.78}
.sv-veld input,.sv-veld select{width:100%;margin:0;padding:0;border:0;outline:0;background:none;color:var(--ink);
  font:400 16px/1.4 "Poppins","Poppins Fallback",sans-serif;-webkit-appearance:none;appearance:none}
.sv-veld input::placeholder{color:#767676;opacity:1}
.sv-veld select{padding-right:18px;cursor:pointer;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23101413' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right center}
.sv-knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 28px;border:0;
  border-radius:999px;background:var(--green-fill);color:#fff;font:700 15px/1 "Poppins","Poppins Fallback",sans-serif;white-space:nowrap;cursor:pointer;
  box-shadow:0 8px 16px -6px rgba(23,70,40,.55);transition:background .2s,transform .2s}
.sv-knop:hover{background:var(--green-deep);transform:translateY(-2px)}
.sv-knop:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.sv-knop svg{width:16px;height:16px}

/* Gevonden adres: in de onderpadding van de kaart, zodat er niets verspringt als het verschijnt (geen CLS). */
.sv-adres{position:absolute;left:0;right:0;top:100%;margin:6px 0 0;color:var(--muted);font:400 13px/1.4 "Poppins","Poppins Fallback",sans-serif}
.sv-adres.is-goed{color:var(--green-deep);font-weight:600}

@media(max-width:760px){
  .hero + .scanvak .sv-wrap{margin-top:-48px}
  .sv-keuze legend{float:none;margin:0 0 6px;line-height:1.3}
  .sv-pil{grid-template-columns:minmax(0,1fr);border-radius:24px}
  .sv-veld{padding:6px 18px;border-radius:16px}
  .sv-knop{border-radius:16px}
}
/* FB-01 (8f, 28-9): de rij logo's is 650px breed en past tot 760px niet (547 tot 650px ruimte); zonder dit zakte alleen het
   NEN-logo naar een tweede rij. Nu breekt het bewust zoals op mobiel: Google over de volle breedte, de vier certificeringen
   in vier gelijke kolommen eronder. Tot en met 800px, niet 760: bij 768 is er maar 7px speling, en dan breekt de rij in het
   terugvallettertype wel en na het laden van Poppins niet, een verschuiving bij het laden (CLS-01). */
@media(max-width:800px){
  .sv-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%}
  .sv-logo--google{grid-column:1/-1}
  .sv-logo--stapel{min-width:0}
}
/* Mobiel: kleinere tegels (Google over de volle breedte met de vier certificeringen eronder staat al bij 760px). De melding "Dit adres vinden we niet..."
   loopt hier over twee regels; daarvoor is de onderpadding hoger. */
@media(max-width:640px){
  .sv-kop{row-gap:10px}
  .sv-logo{height:42px;padding:0 4px}
  .sv-logo--google{height:40px}
  .sv-iq{height:26px}
  .sv-stek{height:16px}
  .sv-nen{height:15px}
  .sv-logo b{font-size:.82rem}
  .sv-punt{display:block;font-size:0}
  .sv-chip{min-height:34px;padding:5px 10px;font-size:13px}
  .sv-chip:has([value="Zonnepanelen"]){min-width:139px}
  .sv-chip:has([value="Thuisbatterij"]){min-width:126px}
  .sv-chip:has([value="Warmtepomp"]){min-width:137px}
  .sv-chip:has([value="Airco"]){min-width:79px}
  .sv-chip:has([value="VvE"]){min-width:72px}
  .sv-chip:has([value="Weet ik nog niet"]){min-width:149px}
}
@media(max-width:560px){.sv-kaart{padding-top:18px;padding-bottom:44px}}

/* /assets/css/blokken/kerncijfers.css */
/* Kerncijferbalk (5f, 25-9; Shahab via c7: "op ELKE pagina, direct onder het scanvak"). Tot 25-9 in css/pages/index.css;
   de home ziet er precies zo uit als daarvoor. Opbouw van de Bresser-balk #kerncijfers (variant 8): witte balk met vier
   punten, even breed als het formulier van het scanvak erboven: op de home 1300 (.hero + .scanvak), elders de breedte
   van .wrap (--maxw, 1180).
   Afstanden (Shahab via c7: "rustig en gelijk"): tussen scanvak en balk overal de tussenruimte van de home, dus het
   scanvak houdt onderaan geen eigen ruimte. Onder de balk: op de home de onderruimte van pro (60px, 48px op mobiel) in
   de grijze band van de scanbalk, elders de onderruimte die het scanvak had. De puntenbalk van de dienstpagina's die
   hier eerst onder stond, is weg (Shahab 25-9 via c7: dubbel met deze balk). */
section.scanvak:has(+ .kerncijfers){padding-bottom:0}
.kerncijfers{padding:clamp(2rem,3vw,2.6rem) 0 clamp(1.5rem,3vw,2.5rem)}
.kerncijfers__rij{list-style:none;margin:0 auto;padding:0;width:min(100% - 2.4rem,var(--maxw));
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 1px 2px rgba(20,20,20,.05),0 18px 40px -24px rgba(20,20,20,.32)}
.hero + .scanvak + .kerncijfers{background:var(--paper-2);padding-inline:clamp(16px,4vw,40px);padding-bottom:60px}
.hero + .scanvak + .kerncijfers .kerncijfers__rij{width:auto;max-width:1300px}
/* 20px binnenruimte (Bresser: 20 tot 32px): dan past de langste kop, "Binnen 2 weken
   geïnstalleerd" (218px), vanaf ca. 1400px op een regel; smaller breekt hij gebalanceerd. */
.kerncijfer{display:flex;align-items:center;gap:.8rem;margin:0;padding:1.15rem 20px;color:var(--muted)}
.kerncijfer + .kerncijfer{border-left:1px solid var(--line)}
/* Clay-element in plaats van het lijnicoon (Shahab 25-9 via c7); beelden in assets/img/3d/. Negatieve marge boven en
   onder: de balk wordt er niet hoger van dan met het icoon van 40px. */
.kerncijfer__ic{flex:none;width:52px;height:52px;max-width:none;margin:-6px 0}
.kerncijfer p{margin:0;font-size:.94rem;line-height:1.4;text-wrap:balance}
.kerncijfer b{display:block;margin-bottom:.15rem;color:var(--ink);font:700 1rem/1.25 "Kanit","Kanit Fallback",system-ui,sans-serif;text-wrap:balance}
@media(max-width:1100px){
  .kerncijfers__rij{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kerncijfer:nth-child(odd){border-left:0}
  .kerncijfer:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:760px){.hero + .scanvak + .kerncijfers{padding-bottom:48px}}
@media(max-width:560px){
  .kerncijfers__rij{grid-template-columns:minmax(0,1fr)}
  .kerncijfer{padding:.85rem 1rem;gap:.75rem}
  .kerncijfer + .kerncijfer{border-left:0;border-top:1px solid var(--line)}
  .kerncijfer__ic{width:44px;height:44px;margin:-4px 0}
  .kerncijfer p{font-size:.9rem}
}

/* /assets/css/pages/vacatures.css */
/* /vacatures/ onder de hero en het scanvak: een open sollicitatie (db [8a0ff1], Shahab 25-9 via c7). Prefix sgv-.
   Wit vlak tussen de vacature en het offerteblok (die staan op --paper). Bovenaan kop en inleiding, daaronder links
   drie feiten als kaarten met een clay-icoon (stijl 01, assets/img/3d/), rechts het team op een podium; onderaan een
   zongele kaart met de knoppen om te solliciteren. Geen zwarte vlakken. Contrast: muted op wit 6,4:1 en op --paper
   6,0:1, ink op --zon 10,0:1. */
.sgv{padding-block:clamp(3rem,6vw,4.6rem);background:#fff}
.sgv h2{margin-top:.7rem;font-size:clamp(1.9rem,3.6vw,2.8rem)}
.sgv__lead{margin-top:.9rem;max-width:34em;color:var(--muted);font-size:1.05rem;line-height:1.65}
.sgv__lead a{color:var(--green-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* De rij: links de drie feiten, rechts het podium. De breedte van het podium bepaalt zijn hoogte, en de drie kaarten
   rekken samen precies tot die hoogte (drie gelijke rijen). Zo ligt de bovenkant van de eerste kaart gelijk met de
   kruin van de langste man en de onderkant van de laatste met de onderrand van het vlak (Shahab 25-9 via c7: "precies
   even hoog, boven en onder gelijk"). Dat houdt zolang de kaarten zonder rekken lager zijn dan het podium: daarom
   een regel tekst per kaart en naast elkaar pas boven 1000px. Zelfde maten als het teamblok (css/blokken/team.css). */
.sgv__rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.sgv__feiten{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:.9rem}
.sgv__feiten li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:1rem;align-content:center;align-items:center;
  padding:.9rem 1.2rem;border-radius:var(--radius);background:var(--paper);box-shadow:0 0 0 1px rgba(16,20,19,.05)}
.sgv__feiten img{grid-row:span 2;width:56px;height:56px}
.sgv__feiten h3{align-self:end;font-size:1.15rem;line-height:1.2}
.sgv__feiten p{align-self:start;margin-top:.2rem;color:var(--muted);font-size:.95rem;line-height:1.5}
/* Het team op het podium van het scoreblok in de reviews (Shahab 25-9 via c7; opbouw en maten uit reviews.css,
   .sgr__stapel en .sgr__persoon): achter een groen verloop dat --v naar rechtsboven is verschoven, voor --green-soft,
   beide met --radius. De vijf mannen (team-podium, 1200x772, onderrand = vlakke snede door de benen) staan op de
   onderrand van het voorste vlak. Dat vlak begint op 23% van de beeldhoogte, dus daarboven steken de hoofden uit. Op
   98% van de breedte blijven de benen binnen de afgeronde hoeken. */
.sgv__podium{position:relative;align-self:end;padding-right:1.68rem;isolation:isolate}
.sgv__stapel{--v:1.68rem;position:absolute;z-index:0;left:0;right:1.68rem;top:23%;bottom:0}
.sgv__stapel::before,.sgv__stapel::after{content:"";position:absolute;inset:0;border-radius:var(--radius);transition:transform .6s var(--ease)}
.sgv__stapel::before{background:linear-gradient(150deg,var(--green),var(--green-deep));transform:translate(var(--v),calc(-1*var(--v)));
  box-shadow:0 18px 34px -20px rgba(16,58,36,.55)}
.sgv__stapel::after{background:var(--green-soft);box-shadow:0 1px 2px rgba(16,20,19,.06),0 16px 30px -18px rgba(16,58,36,.4)}
.sgv__team{position:relative;z-index:1;display:block;width:98%;height:auto;margin-inline:auto;transform-origin:50% 100%;
  filter:drop-shadow(0 12px 14px rgba(16,20,19,.3));transition:transform .6s var(--ease)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .sgv__podium:hover .sgv__stapel{--v:2.17rem}
  .sgv__podium:hover .sgv__team{transform:scale(1.03)}
}

/* Gecentreerd: links uitgelijnd liet op brede schermen de rechterhelft van de kaart leeg. */
.sgv__cta{margin-top:clamp(2.4rem,5vw,3.6rem);padding:clamp(1.5rem,4vw,2.6rem) clamp(1.4rem,4.5vw,3.2rem);
  border-radius:28px;background:var(--zon);color:var(--ink);box-shadow:var(--shadow);text-align:center}
.sgv__cta h2{margin-top:0;font-size:clamp(1.6rem,3vw,2.3rem);text-wrap:balance}
.sgv__cta p{margin-top:.5rem;font-size:1.05rem;font-weight:600;line-height:1.5;text-wrap:balance}
.sgv__knoppen{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:1.4rem}
/* De groene focusring van style.css haalt op --zon geen 3:1, inkt wel (zoals Toen/nu). */
.sgv__cta :focus-visible{outline-color:var(--ink)}

/* Tot 1000px onder elkaar (c7: "op 390 mag het vlak onder de tekst"): kop, de kaarten op hun eigen hoogte, dan het
   podium met de kleinere verschuiving van het scoreblok op de telefoon. */
@media(max-width:1000px){
  .sgv__rij{grid-template-columns:minmax(0,1fr)}
  .sgv__feiten{grid-template-rows:none}
  .sgv__podium{align-self:auto;width:min(100%,36rem);margin-inline:auto;padding-right:1.19rem}
  .sgv__stapel{--v:1.19rem;right:1.19rem}
}
@media(max-width:520px){.sgv__knoppen .btn{width:100%}}

/* ---------- Vacature ervaren monteur (19, 25-9, Shahab via c7). Prefix sgvm-, los van de sgv__-regels van db
   hierboven. De sectie staat op de body (--paper, geen eigen achtergrond), zodat hij niet overloopt in de witte sgv
   eronder; daarin een witte kaart. Kolommen met een clay-icoon (inhoud); vinkjes en knoppen zijn svg (UI).
   Solliciteerbalk op --green-soft met inkt. Geen zwarte vlakken. ---------- */
.sgvm{padding-block:clamp(3rem,6vw,4.6rem)}
.sgvm__kaart{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm);overflow:hidden}
.sgvm__kop{padding:clamp(1.6rem,4vw,2.8rem) clamp(1.4rem,4.5vw,3.2rem) 0}
.sgvm h2{margin-top:.7rem;font-size:clamp(1.9rem,3.6vw,2.8rem)}
.sgvm__labels{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.sgvm__labels li{padding:.45rem .9rem;border-radius:999px;background:var(--green-soft);color:var(--ink);font-size:.92rem;font-weight:600;line-height:1.2}
.sgvm__lead{margin-top:1rem;max-width:44em;color:var(--muted);font-size:1.05rem;line-height:1.65}
.sgvm__kolommen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem clamp(1.4rem,3vw,2.4rem);
  padding:clamp(1.6rem,3.5vw,2.4rem) clamp(1.4rem,4.5vw,3.2rem) clamp(1.8rem,4vw,2.8rem)}
.sgvm__kolom img{width:56px;height:56px}
.sgvm__kolom h3{margin-top:.7rem;font-size:1.15rem;line-height:1.2}
.sgvm__lijst{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.55rem}
.sgvm__lijst li{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:.6rem;align-items:start;color:var(--ink-2);font-size:.98rem;line-height:1.5}
.sgvm__lijst svg{width:20px;height:20px;margin-top:.1rem;color:var(--green-fill)}
/* Certificaatnamen niet op hun koppelteken of spatie afbreken ("F- / gassen"). */
.sgvm__heel{white-space:nowrap}
.sgvm__solliciteer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;
  padding:clamp(1.4rem,3vw,2rem) clamp(1.4rem,4.5vw,3.2rem);background:var(--green-soft);color:var(--ink)}
.sgvm__solliciteer h3{font-size:1.25rem;line-height:1.2}
.sgvm__solliciteer p{margin-top:.35rem;max-width:34em;line-height:1.5}
.sgvm__solliciteer p a{color:var(--green-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.sgvm__knoppen{display:flex;flex-wrap:wrap;gap:.7rem}
@media(max-width:820px){.sgvm__kolommen{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.sgvm__knoppen,.sgvm__knoppen .btn{width:100%}}