/* /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/blokken/dienst.css */
/* Dienstpagina's (SG-32, stijlleider 5f, 25-09-2026). Gedeelde opmaak voor /zonnepanelen-kopen/,
   /thuisbatterij-kopen/, /warmtepomp-kopen/ en de volgende. Een pagina haalt dit binnen met <!-- blok:dienst -->
   bovenaan; wat per pagina afwijkt staat in css/pages/<slug>.css. Klasseprefix sgdp-.
   Besluit Shahab 25-9 20:21: de goedgekeurde blokken van pro (prijzen, voorraad met calculator, product) in de
   nieuwe stijl en kleuren, met uitstekende elementen zoals in het dienstenblok.
   Kleuren: groen van pro, --lime en --zon alleen als vlak met zwarte tekst (12,3:1 en 10,0:1), --zon-zacht als
   lichte band (zwarte tekst 16,9:1). Geen schaduw op een uitsnede boven een lichte band: dat leest als een slechte
   uitsnede. Op donker groen mag een zachte schaduw wel. */

/* ---------- Secties en koppen ---------- */
.sgdp-sectie{padding-block:clamp(3rem,6vw,5rem)}
.sgdp-sectie--zacht{background:var(--zon-zacht)}
.sgdp-sectie--groen{background:var(--green-soft)}
.sgdp-sectie--donker{background:var(--ink);color:#fff}
/* twee banden van dezelfde kleur na elkaar lopen door zonder dubbele witruimte */
.sgdp-sectie--zacht+.sgdp-sectie--zacht{padding-top:0}
.sgdp-kop{max-width:46rem}
.sgdp-kop .eyebrow{display:flex;margin:0 0 .9rem}
.sgdp-kop h2{font-size:clamp(1.9rem,3.6vw,2.8rem);color:var(--ink)}
.sgdp-kop__sub{margin:.8rem 0 0;color:var(--muted);font-size:1.05rem;line-height:1.7}
.sgdp-kop__sub a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}
.sgdp-acties{display:flex;flex-wrap:wrap;gap:.7rem}
.sgdp-sectie .sgdp-acties{margin-top:1.5rem}
/* op de telefoon vullen knoppen de breedte en mag een lange tekst omslaan */
@media (max-width:480px){.sgdp-acties .btn,.sgdp-calc__uit .btn{width:100%;white-space:normal;line-height:1.25;text-align:center}}

/* ---------- Uitsteekfoto: foto in een raam, uitsnede in een strook erboven (zoals het dienstenblok) ----------
   100cqw = breedte van het fotovak; --fa kader, --p uitsteek tot --pmax, --ph/--pw maat en --pt/--pl plek van de
   foto. Per foto --d0 (bovenkant van mens of ding, deel van de hoogte), --mid (hun midden, deel van de breedte) en
   --ar (verhouding van het bestand) in css/pages/<slug>.css op .sgdp-pop--NAAM. Zonder uitsnede geen uitsteek. */
.sgdp-pop{--fa:1.5;--d0:0;--mid:.5;--ar:1.5;--pmax:48px;position:relative;container-type:inline-size;
  aspect-ratio:var(--fa);border-radius:var(--radius);
  --p:clamp(24px,100cqw / var(--fa) * .16,var(--pmax));
  --ph:max((100cqw / var(--fa) + var(--p)) / (1 - var(--d0)),100cqw / var(--ar));
  --pw:calc(var(--ph) * var(--ar));
  --pt:calc(-1 * (var(--d0) * var(--ph) + var(--p)));
  --pl:clamp(100cqw - var(--pw),50cqw - var(--mid) * var(--pw),0px)}
.sgdp-pop:not(:has(.sgdp-pop__boven)){--p:0px}
/* --raam: kleurvlak achter een uitsnede zonder eigen fotoachtergrond (zelfde png in __raam en __boven) */
.sgdp-pop__raam{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:var(--raam,none)}
.sgdp-pop__boven{position:absolute;left:0;right:0;bottom:100%;height:calc(var(--p) + 40px);overflow:hidden;pointer-events:none}
.sgdp-pop__foto,.sgdp-pop__boven>img{position:absolute;left:var(--pl);width:var(--pw);height:var(--ph);max-width:none;object-fit:fill}
.sgdp-pop__foto{top:var(--pt)}
/* zonder uitsnede vult de foto gewoon het kader */
.sgdp-pop:not(:has(.sgdp-pop__boven)) .sgdp-pop__foto{inset:0;width:100%;height:100%;object-fit:cover}
.sgdp-pop__boven>img{top:calc(var(--pt) + var(--p) + 40px)}

/* ---------- Losse figuur (uitsnede met transparante achtergrond) die boven een kaart uitsteekt ----------
   Staat op de onderrand van zijn vak; --uit is hoeveel hij boven het vak uitkomt. */
.sgdp-figuur{position:absolute;bottom:0;right:0;z-index:2;height:calc(100% + var(--uit,4rem));width:auto;max-width:none;
  pointer-events:none;user-select:none}

/* ---------- Hero en kerncijferkaart: sinds 25-9 in css/blokken/paginahero.css (<!-- blok:paginahero -->) ---------- */

/* ---------- 1. Prijzen (pro section.prijzen) ---------- */
.sgdp-prijzen__kaart{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  margin-top:clamp(4.2rem,6vw,5.2rem);background:var(--white);border-radius:var(--radius);
  box-shadow:0 0 0 1px rgba(16,20,19,.06),0 24px 48px -30px rgba(16,20,19,.45)}
.sgdp-prijzen__body{padding:clamp(1.3rem,3vw,2.2rem)}
/* Compacte rijen (Shahab 25-9 via c7, eerst door db op thuisbatterij): rij 72 in plaats van 83px op 1440, de prijskaart
   wordt lager en het hoofd van de monteur steekt net boven de kaart uit. */
.sgdp-staffel{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.sgdp-staffel__rij{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.2rem;
  border-radius:var(--radius-sm);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.sgdp-staffel__wat{font-weight:600;color:var(--ink)}
.sgdp-staffel__bedrag{display:flex;flex-direction:column;align-items:flex-end;text-align:right;white-space:nowrap}
.sgdp-staffel__bedrag b{font-family:"Kanit","Kanit Fallback",system-ui,sans-serif;font-weight:700;font-size:clamp(1.45rem,2.4vw,1.85rem);
  line-height:1;color:var(--green-deep)}
.sgdp-staffel__bedrag small{margin-top:.05rem;font-size:.76rem;color:var(--muted)}
/* uitgelichte rij (bij zonnepanelen de laagste prijs per paneel): vlak in --lime */
.sgdp-staffel__rij--uitgelicht{background:var(--lime);box-shadow:none}
.sgdp-staffel__rij--uitgelicht .sgdp-staffel__bedrag b,
.sgdp-staffel__rij--uitgelicht .sgdp-staffel__bedrag small{color:var(--ink)}
/* groepskop boven een staffel, als een prijskaart meer productgroepen heeft: <h3 class="sgdp-staffel__groep"><span>1</span>..</h3> */
.sgdp-staffel__groep{display:flex;align-items:center;gap:.6rem;margin:0 0 .7rem;font-size:1.08rem;line-height:1.25;color:var(--ink)}
.sgdp-staffel+.sgdp-staffel__groep{margin-top:1.1rem}
.sgdp-staffel__groep>span{display:grid;place-items:center;flex:none;width:1.75rem;height:1.75rem;border-radius:50%;
  background:var(--lime);color:var(--ink);font-family:"Kanit","Kanit Fallback",system-ui,sans-serif;font-size:.92rem;line-height:1}
/* smal: aantal en bedrag op een regel, "per paneel, incl. btw" eronder */
@media (max-width:520px){
  .sgdp-staffel__rij{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:0 .8rem;padding:.7rem 1rem}
  .sgdp-staffel__bedrag{display:contents}
  .sgdp-staffel__bedrag b{justify-self:end}
  .sgdp-staffel__bedrag small{grid-column:1/-1;margin-top:.05rem}
}
.sgdp-prijzen__voet{margin:1rem 0 0;font-size:.9rem;color:var(--muted)}
.sgdp-prijzen__media{position:relative;min-height:16rem;margin:.6rem .6rem .6rem 0}
/* Een pop MET uitsnede is 100cqw/--fa hoog en vult een hoge prijskaart dus niet: zet dan op de pagina
   bottom:auto;aspect-ratio:var(--fa) (warmtepomp-kopen.css). Een hoge sgdp-figuur schaal je op de pagina op
   breedte in cqw (thuisbatterij-kopen.css). Bewust niet hier: de twee pagina's lossen het verschillend op. */
.sgdp-prijzen__media>.sgdp-pop{position:absolute;inset:0;aspect-ratio:auto;border-radius:calc(var(--radius) - 6px)}
.sgdp-prijzen__media .sgdp-figuur{right:6%;bottom:-.6rem;height:calc(100% + .6rem + var(--uit,4.4rem))}
.sgdp-korting{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;margin:1.2rem 0 0;padding:1rem 1.3rem;
  border-radius:var(--radius-sm);background:var(--zon);color:var(--ink)}
.sgdp-korting b{font-family:"Kanit","Kanit Fallback",system-ui,sans-serif;font-size:1.25rem;line-height:1.1}
@media (max-width:860px){
  .sgdp-prijzen__kaart{grid-template-columns:minmax(0,1fr)}
  .sgdp-prijzen__media{order:-1;min-height:0;height:clamp(12rem,42vw,17rem);margin:.6rem .6rem 0}
  .sgdp-prijzen__media .sgdp-figuur{bottom:0;height:calc(100% + var(--uit,3.4rem))}
}

/* ---------- 2a. Voorraad (pro section.voorraad) ---------- */
.sgdp-voorraad__kaart{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  margin-top:clamp(3.5rem,5vw,4.5rem);background:var(--green-fill);color:#fff;border-radius:var(--radius);
  box-shadow:0 24px 48px -28px rgba(16,20,19,.55)}
.sgdp-voorraad__body{padding:clamp(1.6rem,4vw,3rem)}
/* Focusring wit op de groene kaart, zoals in de hero (8f, B1-3). */
.sgdp-voorraad__kaart :focus-visible{outline-color:#fff}
.sgdp-voorraad .eyebrow{color:#fff}
.sgdp-voorraad .eyebrow::before{background:var(--lime)}
.sgdp-voorraad h2{margin-top:.8rem;color:#fff;font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.08}
.sgdp-voorraad p{margin:.9rem 0 0;color:rgba(255,255,255,.92);line-height:1.7;max-width:52ch}
.sgdp-voorraad__media{position:relative;min-height:17rem}
/* de voeten staan op de onderrand van de kaart (de uitsnede heeft 2,2% lucht onder de voeten) */
.sgdp-voorraad__media .sgdp-figuur{right:4%;height:calc(100% + var(--uit,5rem));transform:translateY(2.2%);
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.25))}
.sgdp-badge{position:absolute;left:0;bottom:1.4rem;z-index:3;display:inline-flex;align-items:center;gap:.55rem;
  padding:.55rem 1rem .55rem .55rem;border-radius:999px;background:var(--lime);color:var(--ink);font-weight:700;
  font-size:.95rem;box-shadow:0 12px 26px -12px rgba(0,0,0,.5)}
.sgdp-badge__ic{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--ink);
  color:var(--lime);font-size:.85rem}
@media (max-width:860px){
  .sgdp-voorraad__kaart{grid-template-columns:minmax(0,1fr);margin-top:clamp(9rem,40vw,13rem)}
  .sgdp-voorraad__media{order:-1;min-height:0;height:clamp(5rem,16vw,7rem)}
  .sgdp-voorraad__media .sgdp-figuur{right:50%;translate:50% 0;height:calc(100% + clamp(9rem,40vw,13rem))}
  .sgdp-badge{left:auto;right:1rem;bottom:.6rem}
}

/* ---------- 2b. Calculator (pro section.calc) ---------- */
.sgdp-calc__kaart{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  grid-template-areas:"intro uit" "velden uit" "extras uit";gap:1.2rem clamp(1.4rem,4vw,2.8rem);
  padding:clamp(1.3rem,3vw,2.2rem);background:var(--white);border-radius:var(--radius);
  box-shadow:0 0 0 1px rgba(16,20,19,.06),0 24px 48px -30px rgba(16,20,19,.4)}
.sgdp-calc__intro{grid-area:intro}
.sgdp-calc__intro h3{font-size:clamp(1.4rem,2.4vw,1.8rem);color:var(--ink)}
.sgdp-calc__intro p{margin:.5rem 0 0;color:var(--muted);line-height:1.6}
.sgdp-calc__velden{grid-area:velden;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.sgdp-calc__veld{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.sgdp-calc__veld>span,.sgdp-calc__extras legend{font-size:.74rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2)}
.sgdp-calc__veld select{width:100%;min-width:0;padding:.75rem 2.2rem .75rem .85rem;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23101413' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .85rem center/12px no-repeat;
  font-weight:600;font-size:1rem;line-height:1.2;font-family:inherit;color:var(--ink);-webkit-appearance:none;appearance:none;cursor:pointer}
.sgdp-calc__veld select:focus-visible{outline:3px solid var(--green);outline-offset:1px}
.sgdp-calc__extras{grid-area:extras;margin:0;padding:0;border:0;min-width:0;display:flex;flex-wrap:wrap;gap:.5rem}
.sgdp-calc__extras legend{margin-bottom:.45rem;padding:0}
.sgdp-calc__extras label{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-radius:999px;
  box-shadow:inset 0 0 0 1.5px var(--line);font-size:.92rem;font-weight:600;color:var(--ink);cursor:pointer}
.sgdp-calc__extras input{width:1.05rem;height:1.05rem;margin:0;accent-color:var(--green-deep)}
.sgdp-calc__extras label:has(input:checked){background:var(--green-soft);box-shadow:inset 0 0 0 1.5px var(--green)}
.sgdp-calc__uit{grid-area:uit;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;padding:clamp(1.3rem,3vw,1.9rem);
  border-radius:var(--radius);background:var(--zon);color:var(--ink)}
/* Zongeel met inkt in plaats van zwart met wit (Shahab 25-9 via c7: geen zwarte blokken, alleen huisstijlkleuren behalve groen). */
.sgdp-calc__label{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sgdp-calc__getal{font-family:"Kanit","Kanit Fallback",system-ui,sans-serif;font-weight:700;font-size:clamp(2.4rem,4.5vw,3.2rem);line-height:1;
  color:var(--ink);background:var(--lime);padding:.12em .3em;border-radius:.2em}
.sgdp-calc__bereik{font-weight:700;font-size:1.05rem}
.sgdp-calc__detail{font-size:.88rem;line-height:1.55;color:var(--ink-2);margin-bottom:.6rem}
.sgdp-calc__uit .btn{margin-top:auto}
.sgdp-calc__bel{display:inline-flex;align-items:center;gap:.45rem;margin-top:.3rem;font-size:.9rem;font-weight:600;color:var(--ink)}
.sgdp-calc__bel svg{width:16px;height:16px}
.sgdp-calc__bel:hover{text-decoration:underline}
/* De groene focusring van style.css haalt op zongeel geen 3:1, inkt wel. */
.sgdp-calc__uit :focus-visible{outline-color:var(--ink)}
@media (max-width:980px){
  .sgdp-calc__kaart{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "velden" "extras" "uit"}
}
@media (max-width:620px){.sgdp-calc__velden{grid-template-columns:minmax(0,1fr)}}

/* ---------- 2c. Voorraad en calculator als één kaart (db, besluit Shahab 25-9 21:38) ----------
   Staat de calculator direct onder het voorraadblok, dan lopen ze door zonder tussenruimte: groen alleen boven
   afgerond, de calculator alleen onder. De schaduw zit per kaart op een pseudo-element dat 6rem over de naad
   doorloopt, en elke kaart knipt met clip-path af wat aan de overkant van de naad valt. Zo lopen de zijschaduwen
   met volle sterkte over de naad (een eigen schaduw per kaart dunt bij de hoeken uit) en valt er niets op de naad:
   geen eigen schaduw, geen schaduw van de voeten of het label. De monteurs steken bovenaan vrij uit (-100rem).
   Alleen vervagen bij het inschuiven, anders gaapt de naad tijdens het schuiven. */
.sgdp-voorraad:has(+.sgdp-calc){padding-bottom:0}
.sgdp-voorraad+.sgdp-calc{padding-top:0}
.sgdp-voorraad:has(+.sgdp-calc) .sgdp-voorraad__kaart,.sgdp-voorraad+.sgdp-calc .sgdp-calc__kaart{position:relative;
  isolation:isolate;box-shadow:none;transform:none}
.sgdp-voorraad:has(+.sgdp-calc) .sgdp-voorraad__kaart{border-radius:var(--radius) var(--radius) 0 0;clip-path:inset(-100rem -100rem 0)}
.sgdp-voorraad+.sgdp-calc .sgdp-calc__kaart{border-radius:0 0 var(--radius) var(--radius);clip-path:inset(0 -100rem -100rem)}
.sgdp-voorraad:has(+.sgdp-calc) .sgdp-voorraad__kaart::after,.sgdp-voorraad+.sgdp-calc .sgdp-calc__kaart::before{content:"";
  position:absolute;z-index:-1;left:0;right:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 44px -18px rgba(16,20,19,.32)}
.sgdp-voorraad:has(+.sgdp-calc) .sgdp-voorraad__kaart::after{top:0;bottom:-6rem}
.sgdp-voorraad+.sgdp-calc .sgdp-calc__kaart::before{top:-6rem;bottom:0;
  box-shadow:0 0 0 1px rgba(16,20,19,.06),0 0 44px -18px rgba(16,20,19,.32),0 24px 48px -30px rgba(16,20,19,.4)}

/* ---------- 3. Product (pro section.paneel) ---------- */
.sgdp-product__kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.8rem,5vw,4rem);align-items:center}
.sgdp-product__tekst h2{margin-top:.8rem;font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--ink)}
.sgdp-product__tekst .eyebrow{display:flex}
.sgdp-product__tekst p{margin:.9rem 0 0;color:var(--ink-2);line-height:1.7}
.sgdp-product__media{position:relative;margin-bottom:1.4rem}
.sgdp-product__media>.sgdp-pop{--fa:1.49;box-shadow:0 24px 48px -28px rgba(16,20,19,.5)}
/* de merkbadge steekt links onder buiten het fotokader */
.sgdp-product__badge{position:absolute;left:-1.2rem;bottom:-1.4rem;z-index:2;display:grid;grid-template-columns:auto auto;
  align-items:center;column-gap:.8rem;padding:.8rem 1.1rem;border-radius:var(--radius-sm);background:var(--white);
  box-shadow:0 0 0 1px rgba(16,20,19,.06),0 18px 34px -16px rgba(16,20,19,.45)}
.sgdp-product__badge img{grid-column:1/-1;width:auto;height:20px;margin-bottom:.45rem}
.sgdp-product__badge b{font-family:"Kanit","Kanit Fallback",system-ui,sans-serif;font-size:2rem;line-height:1;color:var(--ink)}
.sgdp-product__badge b i{font-style:normal;font-size:.55em;margin-left:.1em;color:var(--green-deep)}
.sgdp-product__badge span{padding:.3rem .6rem;border-radius:999px;background:var(--ink);color:#fff;font-size:.78rem;font-weight:700}
.sgdp-product__body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:1.2rem;margin-top:clamp(2.4rem,4vw,3.2rem)}
.sgdp-product__opbouw,.sgdp-product__specblok{padding:clamp(1.2rem,2.6vw,1.8rem);border-radius:var(--radius);background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line)}
.sgdp-product__body>:only-of-type,.sgdp-product__specblok:first-child{grid-column:1/-1}
.sgdp-product__kolomkop{margin:0 0 1rem;font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--green-deep)}
.sgdp-lagen{display:grid;gap:.35rem}
.sgdp-laag{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;border-radius:10px;
  background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font-weight:600;font-size:.94rem;color:var(--ink)}
.sgdp-laag__maat{flex:none;white-space:nowrap;font-size:.8rem;font-weight:700;padding:.2rem .55rem;border-radius:999px;background:rgba(16,20,19,.08)}
.sgdp-laag--glas{background:linear-gradient(180deg,#F4FAFD,#DDEEF6);box-shadow:inset 0 0 0 1px #C9E0EA}
.sgdp-laag--eva{padding-block:.35rem;font-size:.82rem;color:var(--ink-2);background:var(--zon-zacht);box-shadow:inset 0 0 0 1px #F0DFA9}
.sgdp-laag--cel{padding-block:1rem;color:#fff;background:repeating-linear-gradient(90deg,#1A2230 0 22px,#232D3D 22px 24px);box-shadow:none}
.sgdp-laag--cel .sgdp-laag__maat{background:var(--lime);color:var(--ink)}
.sgdp-laag--module{background:var(--green-soft);box-shadow:inset 0 0 0 1px #CFE9DA}
.sgdp-laag--omvormer{color:#fff;background:var(--ink);box-shadow:none}
.sgdp-laag--omvormer .sgdp-laag__maat{background:var(--lime);color:var(--ink)}
/* lege plek voor uitbreiding (bijvoorbeeld extra batterijmodules) */
.sgdp-laag--bij{background:none;box-shadow:inset 0 0 0 1.5px transparent;border:1.5px dashed #AEB8B2;font-weight:500;color:var(--muted)}
.sgdp-product__frame{margin:.9rem 0 0;font-size:.88rem;color:var(--muted)}
.sgdp-specs{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.4rem}
.sgdp-specs>div{display:flex;justify-content:space-between;gap:1rem;padding:.62rem 0;border-bottom:1px solid var(--line)}
.sgdp-specs dt{color:var(--muted);font-size:.9rem}
.sgdp-specs dd{margin:0;font-weight:700;font-size:.92rem;color:var(--ink);text-align:right}
.sgdp-product__voet{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;
  padding:1.1rem 1.3rem;border-radius:var(--radius);background:var(--zon)}
/* Balk in zongeel (Shahab 25-9 via c7, "dit ook die oranje", door e5): inkt op --zon 10,0:1; de knop blijft
   .btn--primary, wit op --green-fill 5,1:1. */
.sgdp-product__bron{margin:0;max-width:70ch;font-size:.92rem;line-height:1.6;color:var(--ink)}
@media (max-width:980px){
  .sgdp-product__kop,.sgdp-product__body{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .sgdp-specs{grid-template-columns:minmax(0,1fr)}
  .sgdp-product__badge{left:.8rem}
}

/* ---------- Aanvulling uit de oude site: uitleg, voordelen, projectfoto's ---------- */
.sgdp-tekst__rij{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,5vw,4rem);align-items:end}
.sgdp-tekst__body{padding:clamp(1.3rem,3vw,2rem);border-radius:var(--radius);background:var(--white);
  box-shadow:0 0 0 1px rgba(16,20,19,.05)}
.sgdp-tekst__body h3{font-size:1.35rem;color:var(--ink)}
.sgdp-tekst__body p{margin:.6rem 0 0;color:var(--ink-2);line-height:1.75}
.sgdp-tekst__tussenkop{margin-top:clamp(2.6rem,5vw,3.6rem);font-size:clamp(1.4rem,2.4vw,1.8rem);color:var(--ink)}
/* grid-auto-rows:1fr: alle kaarten even hoog, ook over de rijen heen (Shahab 25-9 21:39 via c7). */
.sgdp-kaarten{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:1fr;gap:1rem}
.sgdp-kaart{display:flex;flex-direction:column;padding:1.5rem;border-radius:var(--radius);background:var(--white);
  box-shadow:0 0 0 1px rgba(16,20,19,.05),0 14px 30px -24px rgba(16,20,19,.45)}
.sgdp-kaart__ic{display:grid;place-items:center;width:3rem;height:3rem;border-radius:var(--radius-sm);background:var(--green-soft)}
.sgdp-kaart__ic svg{width:1.6rem;height:1.6rem}
/* 3D-element in clay-stijl in plaats van het lijnicoon (Shahab koos stijl 01, 25-9 via c7); beelden in assets/img/3d/ */
.sgdp-kaart__3d{display:block;width:88px;height:88px;margin:-.4rem 0 0 -.4rem}
@media (max-width:600px){.sgdp-kaart__3d{width:72px;height:72px}}
.sgdp-kaart h3{margin-top:1rem;font-size:1.18rem;line-height:1.2;color:var(--ink)}
.sgdp-kaart p{margin:.45rem 0 0;font-size:.96rem;line-height:1.6;color:var(--muted)}
.sgdp-kaart a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}
/* Lime met inkt in plaats van zwart (Shahab 25-9 via c7: geen zwarte blokken, alleen huisstijlkleuren behalve groen). */
.sgdp-kaart--uitgelicht{background:var(--lime)}
.sgdp-kaart--uitgelicht .sgdp-kaart__ic{background:#fff}
.sgdp-kaart--uitgelicht h3{color:var(--ink)}
.sgdp-kaart--uitgelicht p{color:var(--ink-2)}
.sgdp-kaart--uitgelicht a{color:var(--ink)}
.sgdp-kaart--uitgelicht :focus-visible{outline-color:var(--ink)}
@media (min-width:981px){.sgdp-kaart--uitgelicht:last-child:nth-child(3n+1){grid-column:1/-1}}
/* Stappen (Shahab 25-9 via c7): kaarten in de stijl van het dienstenblok op de home. Bovenaan een vlak met een echte
   uitgeknipte monteur die er met zijn hoofd boven uitsteekt, dan de kop en de tekst; de pil met het stapnummer staat
   linksboven op het vlak. Een bron voor /bedrijven/, /vve/ en /onze-werkwijze/ (eerst .vve-stappen van 8f, met clay).
   Markup per stap: <li class="sgdp-kaart sgdp-stap"><div class="sgdp-stap__beeld"><img class="sgdp-stap__figuur"
   src="..." width="..." height="..." alt="" loading="lazy" decoding="async"></div><span class="sgdp-stap__no">Stap 1</span>
   <h3>...</h3><p>...</p></li>. Uitsnedes uit assets/img/personeel/ en paginahero/*-figuur: plat afgesneden op de
   dijen, dus de onderrand van de figuur staat op de onderrand van het vlak. --fa: verhouding van het vlak; --uit: hoever
   het hoofd boven de kaart uitsteekt (ook de ruimte boven de rijen). Het vlak in zon-zacht met een zonnig verloop: zo
   komt de kaart los van de groene sectie en staan de groene polo's er goed op. Wit op --green-fill: 5,1:1. */
.sgdp-stappen{--uit:2.4rem;list-style:none;margin:calc(1.6rem + var(--uit)) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--uit) + 1rem) 1rem}
.sgdp-stap{position:relative;padding:0 1.3rem 1.4rem}
.sgdp-stap__beeld{--fa:1.7;position:relative;aspect-ratio:var(--fa);margin:0 -1.3rem;border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(165deg,var(--zon-zacht) 30%,rgba(245,178,27,.32))}
.sgdp-stap__figuur{position:absolute;bottom:0;right:10%;width:auto;height:calc(100% + var(--uit));max-width:none;
  filter:drop-shadow(0 10px 12px rgba(16,20,19,.22)) drop-shadow(0 2px 3px rgba(16,20,19,.16))}
.sgdp-stap__no{position:absolute;top:1rem;left:1rem;z-index:1;padding:.4rem .8rem;border-radius:999px;background:var(--green-fill);
  color:#fff;font:700 .78rem/1 "Poppins","Poppins Fallback",sans-serif;white-space:nowrap}
/* Clay-icoon per stap (A-03, Shahab 28-9 via fb, door 62): op de onderrand van het vlak, zoals .sgd1-ico in het
   dienstenblok, maar links (A-06, Shahab: "links hier, is hier meer ruimte"). Rechts staat de monteur tot aan de rand;
   daar bedekte het icoon benen of hand. Links uitgelijnd met de kop (binnenmarge 1.3rem); het steekt .5rem onder het vlak
   uit en blijft zo vrij van de kop (die begint 1rem onder het vlak), ook bij de vergroting op hover.
   De img heeft de klasse sg-klei; zweven en vergroten bij hover komen uit de gedeelde regel in www.css. */
.sgdp-stap__ico{position:absolute;left:1.3rem;bottom:-.5rem;z-index:1;width:3.2rem;height:3.2rem;
  filter:drop-shadow(0 6px 8px rgba(16,20,19,.22))}
.sgdp-stap__ico img{width:100%;height:100%;max-width:none}
@media (max-width:980px){.sgdp-stappen{grid-template-columns:repeat(2,minmax(0,1fr))}.sgdp-stap__beeld{--fa:2.4}}
@media (max-width:600px){.sgdp-stappen{grid-template-columns:minmax(0,1fr)}.sgdp-stap__beeld{--fa:2}}
/* Brede kaart met knoppen (all-electric op /warmtepomp-kopen/, Shahab 25-9 via c7, door e5): altijd een eigen rij.
   Vanaf 1101px element, tekst en knoppen naast elkaar; daaronder tekst en knoppen onder elkaar naast het element,
   tot 600px alles onder elkaar. De drie gewone kaarten erboven blijven vanaf 700px op een rij. Op lime: inkt 12,3:1,
   de lijnknop inkt, wit op --green-fill 5,1:1. De kaartlinkregels (groen en onderstreept) gelden niet voor knoppen. */
.sgdp-kaart--breed{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"el tekst" "el knoppen";
  align-items:center;column-gap:clamp(1.2rem,3vw,2.4rem);row-gap:1rem}
.sgdp-kaart--breed .sgdp-kaart__3d{grid-area:el;width:104px;height:104px;margin:0}
.sgdp-kaart__tekst{grid-area:tekst}
.sgdp-kaart--breed h3{margin-top:0}
.sgdp-kaart__knoppen{grid-area:knoppen;display:flex;flex-wrap:wrap;gap:.7rem}
.sgdp-kaart .btn{color:var(--fg);text-decoration:none}
.sgdp-kaart__bel{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.sgdp-kaart__bel svg{color:var(--green-deep)}
.sgdp-kaart__bel:hover{background:rgba(16,20,19,.08)}
@media (min-width:1101px){
  .sgdp-kaart--breed{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"el tekst knoppen"}
  .sgdp-kaart--breed .sgdp-kaart__3d{width:120px;height:120px}
  .sgdp-kaart__knoppen{flex-direction:column}
}
@media (min-width:700px) and (max-width:980px){.sgdp-kaarten:has(.sgdp-kaart--breed){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:699px){.sgdp-kaarten:has(.sgdp-kaart--breed){grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}}
@media (max-width:600px){
  .sgdp-kaart--breed{grid-template-columns:minmax(0,1fr);grid-template-areas:"el" "tekst" "knoppen"}
  .sgdp-kaart--breed .sgdp-kaart__3d{width:88px;height:88px}
  .sgdp-kaart__knoppen{flex-direction:column}
}
@media (max-width:980px){
  .sgdp-tekst__rij{grid-template-columns:minmax(0,1fr);align-items:start}
  .sgdp-kaarten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){.sgdp-kaarten{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}}
.sgdp-galerij{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.sgdp-galerij img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm)}
@media (max-width:760px){.sgdp-galerij{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}}
.sgdp-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.4rem;font-weight:700;color:var(--green-deep)}
.sgdp-link svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.sgdp-link:hover svg{transform:translateX(3px)}

/* ---------- FAQ ---------- */
.sgdp-faq__rij{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,5vw,4rem);align-items:start}
@media (min-width:981px){.sgdp-faq .sgdp-kop{position:sticky;top:calc(var(--balk-h,88px) + 1.5rem)}}
.sgdp-faq__lijst{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}
.sgdp-vraag{border-radius:var(--radius-sm);background:var(--white);box-shadow:0 0 0 1px rgba(16,20,19,.07)}
.sgdp-vraag summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.3rem;
  list-style:none;cursor:pointer;font-weight:700;font-size:1.02rem;color:var(--ink)}
.sgdp-vraag summary::-webkit-details-marker{display:none}
.sgdp-vraag summary::after{content:"";flex:none;width:1.9rem;height:1.9rem;border-radius:50%;
  background:var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v9M1.5 6h9' stroke='%23101413' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;
  transition:transform .25s var(--ease),background-color .25s var(--ease)}
.sgdp-vraag[open] summary::after{background-color:var(--lime);transform:rotate(45deg)}
.sgdp-vraag summary:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:var(--radius-sm)}
.sgdp-vraag__antwoord{padding:0 1.3rem 1.2rem;color:var(--ink-2);line-height:1.7}
.sgdp-vraag__antwoord p{margin:0}
.sgdp-vraag__antwoord p+p{margin-top:.7rem}
.sgdp-vraag__antwoord a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}
/* Knop onder elke FAQ naar /veelgestelde-vragen/#<onderwerp> (Shahab 25-9 via c7, door e5): inkt-lijnknop zoals in de
   opslagkaart; inkt op zon-zacht 16,9:1, het groene pijltje 5,2:1. */
/* Mag alleen afbreken als hij niet past: "Meer vragen over warmtepompen" is op 360 breder dan de kolom (db [8a0ff1]). */
.sgdp-faq__meer{justify-self:start;max-width:100%;white-space:normal;margin-top:.5rem;--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.sgdp-faq__meer svg{color:var(--green-deep)}
.sgdp-faq__meer:hover{background:rgba(16,20,19,.08)}
@media (max-width:980px){.sgdp-faq__rij{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){
  .sgdp-vraag summary::after,.sgdp-link svg{transition:none}
}

/* /assets/css/blokken/team.css */
/* Team (db [8a0ff1], 25-9-2026, Shahab via c7): gedeeld blok op /vve/ en /bedrijven/, tussen "Zo werkt het"
   (sgdp-sectie--groen, --green-soft) en de voordelen (sgdp-sectie--zacht, --zon-zacht). Prefix sgteam-. Zelfde
   opbouw en maten als de open sollicitatie op /vacatures/ (css/pages/vacatures.css, sgv-), die zijn eigen versie
   houdt. Het blok staat op --paper, zonder eigen vlak, zodat er geen twee zachte vlakken tegen elkaar komen; ruimte
   en kop zoals sgdp-sectie en sgdp-kop, de feiten als sgdp-kaart. Geen zwarte vlakken. Contrast: muted op --paper
   6,0:1 en op wit 6,4:1, ink op --zon 10,0:1. */
.sgteam{padding-block:clamp(3rem,6vw,5rem)}
.sgteam__kop{max-width:46rem}
.sgteam__kop .eyebrow{display:flex;margin:0 0 .9rem}
.sgteam h2{font-size:clamp(1.9rem,3.6vw,2.8rem);color:var(--ink);text-wrap:balance}
.sgteam__lead{margin-top:.8rem;color:var(--muted);font-size:1.05rem;line-height:1.7}
/* 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. */
.sgteam__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)}
.sgteam__feiten{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:.9rem}
.sgteam__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:#fff;box-shadow:0 0 0 1px rgba(16,20,19,.05),0 14px 30px -24px rgba(16,20,19,.45)}
.sgteam__feiten img{grid-row:span 2;width:56px;height:56px}
.sgteam__feiten h3{align-self:end;font-size:1.15rem;line-height:1.2}
.sgteam__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 (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 begint op 23% van de beeldhoogte, dus daarboven steken de hoofden uit. Op 98% van de breedte
   blijven de benen binnen de afgeronde hoeken. */
.sgteam__podium{position:relative;align-self:end;padding-right:1.68rem;isolation:isolate}
.sgteam__stapel{--v:1.68rem;position:absolute;z-index:0;left:0;right:1.68rem;top:23%;bottom:0}
.sgteam__stapel::before,.sgteam__stapel::after{content:"";position:absolute;inset:0;border-radius:var(--radius);transition:transform .6s var(--ease)}
.sgteam__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)}
.sgteam__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)}
.sgteam__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){
  .sgteam__podium:hover .sgteam__stapel{--v:2.17rem}
  .sgteam__podium:hover .sgteam__team{transform:scale(1.03)}
}

.sgteam__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}
.sgteam__cta h2{font-size:clamp(1.6rem,3vw,2.3rem)}
.sgteam__cta p{margin-top:.5rem;font-size:1.05rem;font-weight:600;line-height:1.5;text-wrap:balance}
.sgteam__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. */
.sgteam__cta :focus-visible{outline-color:var(--ink)}

/* Tot 1000px onder elkaar: kop, de kaarten op hun eigen hoogte, dan het podium met de kleinere verschuiving van het
   scoreblok op de telefoon. */
@media(max-width:1000px){
  .sgteam__rij{grid-template-columns:minmax(0,1fr)}
  .sgteam__feiten{grid-template-rows:none}
  .sgteam__podium{align-self:auto;width:min(100%,36rem);margin-inline:auto;padding-right:1.19rem}
  .sgteam__stapel{--v:1.19rem;right:1.19rem}
}
@media(max-width:520px){.sgteam__knoppen .btn{width:100%}}

/* /assets/css/blokken/reviews.css */
/* Reviewblok van de homepage (SG-12, eigenaar db; opzet c7). Overgezet van het reviewblok van Brocken (b-stemmen,
   ~/brocken/site/_werk/blokken/stemmen.css) naar de tokens van Solar Green. HTML: _blokken/reviews.html, gegenereerd
   door _blokken/reviews.py. reviews.js zet knoppen, voortgang, "Lees verder" en de vergroting van de foto's erbij;
   zonder JS scrollt de rail gewoon en staat elke tekst er helemaal.
   - De sectie staat op --paper-2, zodat de grijze band van de kerncijferbalk doorloopt.
   - Links het scorepodium, sinds 25-9 40% groter dan bij Brocken (Shahab): twee verschoven vlakken (groen verloop
     achter, --green-soft voor), de persoon en de boog ervoor. Zolang er geen uitsnede van een persoon is
     (sgr__podium--zonder), staat alleen de boog er, in het midden, zoals bij Brocken.
   - Rechts de rail met kaarten; hij loopt rechts door tot de schermrand, zodat de volgende kaart piept. */

.sgr{position:relative;background:var(--paper-2);color:var(--ink);overflow-x:clip;
  padding:clamp(1.5rem,.5rem + 3vw,3rem) 0 clamp(3.5rem,2.4rem + 4vw,6rem)}
/* --sgr-boven en --sgr-onder: de ruimte in de rail boven en onder de kaarten (padding van de lijst; onder ook de
   navigatie, .1rem marge plus knoppen van 48px). Het podium lijnt er op desktop mee uit: stapel even hoog als de kaart. */
.sgr__in{--sgr-boven:.9rem;--sgr-onder:calc(1.4rem + .1rem + 48px);display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);
  grid-template-areas:"kop kop" "score rail";column-gap:clamp(2rem,.6rem + 3.6vw,4.75rem);align-items:stretch}
/* ruimer onder de kop: het hoofd van de persoon steekt boven de kaarten uit */
.sgr__kopgroep{grid-area:kop;max-width:46rem;margin-bottom:clamp(3.5rem,2.6rem + 2vw,4.5rem)}
.sgr__kopgroep .eyebrow{display:flex;margin:0 0 1.1rem}
.sgr__kop{font-size:clamp(1.9rem,3.6vw,2.8rem);text-wrap:balance}
.sgr__kop em{font-style:normal;color:var(--green)}
.sgr__lead{margin:1.1rem 0 0;max-width:58ch;font-size:clamp(1rem,.95rem + .25vw,1.12rem);line-height:1.62;color:var(--muted);text-wrap:pretty}
.sgr__score{grid-area:score;position:relative;display:grid;justify-items:start;gap:.9rem}
.sgr__rail{grid-area:rail;position:relative;min-width:0}
.sgr__vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- podium: verschoven stapel (achter), persoon (midden, zodra er een uitsnede is), boog (voor). Op desktop even
   hoog als de rail naast de kaarten (Shahab, 25-9): de achterste plaat begint op de bovenkant van de kaart, de voorste
   eindigt op de onderkant; de persoon staat op die onderrand en is iets hoger dan het podium. */
.sgr__podium{position:absolute;inset:0 0 var(--sgr-onder);isolation:isolate}
.sgr__stapel{--v:1.68rem;position:absolute;z-index:0;top:calc(var(--sgr-boven) + var(--v));right:-.28rem;bottom:0;width:20rem}
.sgr__stapel::before,.sgr__stapel::after{content:"";position:absolute;inset:0;border-radius:var(--radius);transition:transform .6s var(--ease)}
.sgr__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)}
.sgr__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)}
.sgr__persoon{position:absolute;z-index:1;right:-1.26rem;bottom:0;height:calc(100% + 2.5rem);transform-origin:50% 100%;
  filter:drop-shadow(0 12px 14px rgba(16,20,19,.3));transition:transform .6s var(--ease)}
.sgr__persoon img{display:block;width:auto;height:100%;max-width:none}
.sgr__podium>.sgr__boog{position:absolute;z-index:2;left:0;bottom:-1rem}
.sgr__podium--zonder .sgr__stapel{display:none}
.sgr__podium--zonder>.sgr__boog{left:50%;transform:translateX(-50%)}

/* ---- de boog: witte schijf, groene streep over het gemiddelde (bij "Uitstekend" de hele omtrek) */
.sgr__boog{position:relative;display:grid;place-items:center;width:14.7rem;aspect-ratio:1;border-radius:50%;
  background:var(--white);color:var(--ink);box-shadow:var(--shadow);text-align:center}
.sgr__ring{position:absolute;inset:.63rem;width:calc(100% - 1.26rem);height:calc(100% - 1.26rem);transform:rotate(-62deg);overflow:visible}
.sgr__ring circle{fill:none;stroke:var(--green);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1.5s var(--ease)}
.sgr__boog.is-wacht .sgr__ring circle{transition:none}
.sgr__getal{position:relative;margin:0}
.sgr__getal>span[aria-hidden]{display:grid;justify-items:center;gap:.42rem}
.sgr__getal b{font:700 4.34rem/.9 "Kanit","Kanit Fallback",system-ui,sans-serif;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.sgr__getal b.sgr__woord{font-size:2.03rem;line-height:1;letter-spacing:-.02em}
.sgr__gemiddeld{width:7.56rem;height:1.51rem}
/* de ster in de sprite vult met currentColor */
.sgr__gemiddeld-leeg{color:var(--line)}
.sgr__gemiddeld-vol{color:#FBBC05}
.sgr__sub{max-width:9.24rem;font:600 1.04rem/1.25 "Kanit","Kanit Fallback",system-ui,sans-serif;color:var(--muted)}

/* ---- Google-profiel onder het podium; zonder profiel-URL (--stil) alleen het logo met tekst, geen knop */
.sgr__profiel{justify-self:center;display:inline-flex;align-items:center;gap:.8rem;min-height:44px;margin:0;
  padding:.5rem 1rem .5rem .75rem;border-radius:var(--radius-sm);background:var(--white);border:1px solid var(--line);
  color:var(--ink);font:600 .98rem/1.2 "Kanit","Kanit Fallback",system-ui,sans-serif;transition:transform .4s var(--ease)}
.sgr__score>.sgr__profiel{position:absolute;left:0;right:0;bottom:2px;width:fit-content;margin-inline:auto}
.sgr__profiel img{width:auto;height:1.45rem}
.sgr__profiel--stil{background:none;border-color:transparent;font-size:.9rem;color:var(--muted)}
.sgr__nv{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- rail */
.sgr__kaarten{display:flex;align-items:stretch;gap:1.15rem;margin:0;padding:var(--sgr-boven) .25rem 1.4rem;list-style:none;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding-inline:.25rem;overscroll-behavior-x:contain;scrollbar-width:thin;
  scrollbar-color:var(--line) transparent}
.sgr__kaarten:focus-visible{outline:3px solid var(--green-deep);outline-offset:2px;border-radius:var(--radius)}
.sgr__kaarten:has(.is-open){align-items:flex-start}
/* de rail loopt door tot de rechterrand van het scherm: de marge rechts van .wrap erbij */
.sgr .sgr__kaarten{--sgr-rand:max(1.2rem,(100vw - var(--maxw)) / 2);margin-inline-end:calc(-1 * var(--sgr-rand));
  padding-inline-end:var(--sgr-rand)}
.sgr__rail--js .sgr__kaarten{scrollbar-width:none}
.sgr__rail--js .sgr__kaarten::-webkit-scrollbar{display:none}

.sgr__kaart{position:relative;z-index:0;flex:0 0 min(27rem,84%);display:flex;flex-direction:column;scroll-snap-align:start;
  padding:1.35rem 1.45rem 1.25rem;border-radius:var(--radius);background:var(--white);color:var(--ink);
  box-shadow:0 1px 2px rgba(16,20,19,.05),0 14px 28px -22px rgba(16,20,19,.3);transition:transform .45s var(--ease)}
.sgr__kaart::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:0 30px 44px -26px rgba(16,58,36,.45);
  opacity:0;transition:opacity .45s var(--ease)}
.sgr__kaart::before{content:"\201C";content:"\201C" / "";display:block;height:2.2rem;margin:-.35rem 0 .45rem -.15rem;
  font:700 4.6rem/1 "Poppins","Poppins Fallback",system-ui,sans-serif;color:var(--green);transform-origin:20% 60%;transition:transform .45s var(--ease)}
.sgr__tekst{margin:0 0 .9rem}
.sgr__tekst p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.65}
.sgr__rail--js .sgr__tekst:not(.is-open) p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden}
.sgr__lees{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin:-.5rem 0 .5rem;padding:0;border:0;background:none;
  color:var(--green-deep);font:600 .9rem/1.2 "Kanit","Kanit Fallback",system-ui,sans-serif;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.sgr__lees[hidden]{display:none}
.sgr__wie{margin:auto 0 0;padding-top:1rem;border-top:1px solid var(--line);font-size:.85rem;line-height:1.5;color:var(--muted)}
.sgr__wie b{color:var(--ink);font-weight:600}
/* sterrenchip in werkkleding: inkt met limoen zijpanelen (merkkleur voor badges op donker), sterren in Google-geel */
.sgr__cijfer{position:absolute;top:1.3rem;right:1.3rem;display:flex;gap:.12rem;margin:0;padding:.45rem .7rem;border-radius:8px;
  background:var(--ink);box-shadow:inset 5px 0 0 var(--lime,var(--green)),inset -5px 0 0 var(--lime,var(--green))}
.sgr__ster{width:.85rem;height:.85rem;color:#FBBC05}
.sgr__ster--leeg{color:rgba(255,255,255,.28)}

/* ---- foto's bij een review (wens Shahab 25-9): ze vullen de ruimte tussen tekst en naam over de volle breedte. Een
   foto is een vlak, twee of meer zijn twee halve vlakken; vanaf de derde alleen in de vergroting, met "+N" op het
   tweede vlak. Alle kaarten blijven even hoog (de rail rekt ze op); het fotovlak neemt de rest van de hoogte. */
.sgr__fotos{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;min-height:10rem;margin:0 0 .9rem;padding:0;list-style:none}
.sgr__fotos--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sgr__fotos>li:nth-child(n+3){display:none}
.sgr__foto{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:var(--radius-sm);overflow:hidden;
  background:var(--paper-2);cursor:zoom-in}
.sgr__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.sgr__meer{position:absolute;inset:0;display:grid;place-items:center;background:rgba(16,20,19,.55);color:#fff;
  font:700 1.6rem/1 "Kanit","Kanit Fallback",system-ui,sans-serif}
.sgr__foto:focus-visible{outline:3px solid var(--green-deep);outline-offset:2px}

/* ---- navigatie (door JS) */
.sgr__nav{display:flex;align-items:center;gap:.6rem;margin-top:.1rem}
.sgr__nav[hidden]{display:none}
.sgr__knop{display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1.5px solid var(--ink);
  background:transparent;color:var(--ink);cursor:pointer}
.sgr__knop svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .4s var(--ease)}
.sgr__knop--terug svg{transform:scaleX(-1)}
.sgr__knop[aria-disabled="true"]{opacity:.35;cursor:default}
.sgr__voortgang{position:relative;flex:0 1 9rem;height:4px;margin-inline:.4rem;border-radius:4px;background:rgba(16,20,19,.12);overflow:hidden}
.sgr__voortgang i{position:absolute;inset:0 auto 0 0;width:40%;border-radius:inherit;background:var(--green)}

/* ---- de vergroting: een <dialog> die reviews.js aanmaakt; bladeren alleen door de foto's van dezelfde review */
.sgr__vergroting{width:fit-content;max-width:calc(100vw - 9rem);max-height:none;margin:auto;padding:0;border:0;background:transparent;
  color:#fff;overflow:visible}
.sgr__vergroting::backdrop{background:rgba(10,14,12,.88)}
.sgr__vergroting figure{position:relative;margin:0;display:grid;justify-items:center;gap:.75rem}
.sgr__vergroting img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 10rem);border-radius:var(--radius-sm);
  background:#1b1f1d;object-fit:contain}
.sgr__vergroting figcaption{font-size:.9rem;color:rgba(255,255,255,.85);text-align:center}
.sgr__vk{position:absolute;display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;
  background:var(--white);color:var(--ink);cursor:pointer;box-shadow:0 6px 20px -8px rgba(0,0,0,.5)}
.sgr__vk svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sgr__vk--dicht{top:.6rem;right:.6rem}
.sgr__vk--terug,.sgr__vk--verder{top:calc(50% - 1.5rem - 24px)}
.sgr__vk--terug{left:-3.75rem}
.sgr__vk--terug svg{transform:scaleX(-1)}
.sgr__vk--verder{right:-3.75rem}
.sgr__vk[hidden]{display:none}
.sgr__vk:focus-visible{outline:3px solid var(--green-light);outline-offset:3px}
html.sgr-vast{overflow:hidden}

/* ---- hover en focus: alleen transform en opacity */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .sgr__score:hover .sgr__stapel{--v:2.17rem}
}
@media (hover:hover){
  .sgr__kaart:hover{transform:translateY(-6px)}
  .sgr__kaart:hover::after{opacity:1}
  .sgr__kaart:hover::before{transform:translateX(.4rem) rotate(-8deg)}
  .sgr__score:hover .sgr__persoon{transform:scale(1.03)}
  a.sgr__profiel:hover{transform:translateY(-3px)}
  .sgr__foto:hover img{transform:scale(1.04)}
  .sgr__knop:not([aria-disabled="true"]):hover{background:var(--ink);color:#fff}
  .sgr__knop:not([aria-disabled="true"]):hover svg{transform:translateX(3px)}
  .sgr__knop--terug:not([aria-disabled="true"]):hover svg{transform:scaleX(-1) translateX(3px)}
}
.sgr__kaart:focus-within{transform:translateY(-6px)}
.sgr__kaart:focus-within::after{opacity:1}
.sgr__kaart:focus-within::before{transform:translateX(.4rem) rotate(-8deg)}
a.sgr__profiel:focus-visible{transform:translateY(-3px)}

/* ---- smal: score boven de rail, kleiner */
@media (max-width:900px){
  .sgr__in{grid-template-columns:minmax(0,1fr);grid-template-areas:"kop" "score" "rail"}
  .sgr__score{align-items:center;margin-bottom:.6rem}
  .sgr__kopgroep{margin-bottom:clamp(2rem,1.4rem + 2vw,3.25rem)}
  .sgr__score>.sgr__profiel{position:static;width:auto;margin:0}
  /* 40% groter dan bij Brocken (Shahab, 25-9); de stapel staat binnen de 22rem, de boog schuift er half voor */
  .sgr__podium{position:relative;inset:auto;grid-column:1/-1;justify-self:center;width:100%;max-width:22rem;height:20.3rem}
  .sgr__stapel{--v:1.19rem;top:auto;right:1.19rem;bottom:1.26rem;width:12.95rem;height:12.25rem}
  .sgr__persoon{right:.21rem;bottom:1.26rem;height:17.85rem}
  .sgr__podium>.sgr__boog{bottom:.28rem}
  .sgr__boog{width:12.04rem}
  .sgr__getal b{font-size:3.22rem}
  .sgr__getal>span[aria-hidden]{gap:.31rem}
  .sgr__getal b.sgr__woord{font-size:1.68rem}
  .sgr__gemiddeld{width:6.44rem;height:1.29rem}
  .sgr__sub{max-width:7.56rem;font-size:.9rem}
  .sgr__kaart{flex-basis:min(26.4rem,84%)}
  .sgr__podium--zonder{height:12.6rem}
  /* de pijlknoppen naast elkaar in het midden van de vergroting, onder de foto */
  .sgr__vergroting{max-width:calc(100vw - 2rem)}
  .sgr__vk--terug,.sgr__vk--verder{top:auto;bottom:-3.9rem}
  .sgr__vk--terug{left:calc(50% - 56px)}
  .sgr__vk--verder{right:calc(50% - 56px)}
  .sgr__vergroting figcaption{margin-bottom:3.9rem}
}
@media (max-width:420px){
  a.sgr__profiel span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sgr__kaart:hover,.sgr__kaart:focus-within,.sgr__score:hover .sgr__persoon,a.sgr__profiel:hover,a.sgr__profiel:focus-visible,.sgr__foto:hover img{transform:none}
  .sgr__kaart:hover::before,.sgr__kaart:focus-within::before,.sgr__knop:hover svg{transform:none}
  .sgr__knop--terug:hover svg{transform:scaleX(-1)}
  .sgr *,.sgr *::before,.sgr *::after{transition-duration:.001ms!important}
}

/* /assets/css/blokken/duurzaam.css */
/* Duurzaamblok voor de homepage (SG-22, terminal 8f), naar section.duur#duurzaam van
   feitsma.nl: zachte kaart, links label, kop, tekst en een link naar /duurzaamheid/,
   rechts drie witte tegels. Alleen feiten die op pro of bij Shahab vandaan komen, en
   omdat er nog geen tellingen zijn, woorden of vaste getallen in plaats van tellers. */
.sgz{padding-block:clamp(2.2rem,4.5vw,3.4rem);background:#fff}
.sgz__kaart{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:center;
  padding:clamp(1.5rem,3.2vw,2.6rem);border-radius:var(--radius);background:var(--green-soft)}
.sgz__tekst h2{margin-top:.7rem;font-size:clamp(1.5rem,2.8vw,2.1rem)}
.sgz__tekst p{margin-top:.7rem;color:var(--ink-2);max-width:52ch}
.sgz__tekst p a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}
.sgz__link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-weight:800;color:var(--green-deep);
  border-bottom:2px solid transparent}
.sgz__link:hover{border-bottom-color:var(--green-deep)}
.sgz__link svg{width:18px;height:18px}
.sgz__tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.sgz__tegel{padding:1.1rem .7rem;text-align:center;background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}
.sgz__tegel img{width:36px;height:36px;margin:0 auto .4rem}
/* clay-element zoals in #voordelen (Shahab 25-9 22:06 via c7); iets kleiner dan daar, de tegels zijn smaller */
.sgz__tegel .sgz__3d{display:block;width:72px;height:72px;margin:-.3rem auto .2rem}
.sgz__tegel b{display:block;font-family:"Kanit","Kanit Fallback",system-ui,sans-serif;font-weight:700;
  font-size:clamp(1.35rem,2.6vw,1.8rem);line-height:1.1;color:var(--green-deep)}
/* Een woord in plaats van een getal breekt op cijfergrootte af, zoals bij Feitsma. */
.sgz__tegel--woord b{font-size:clamp(1.05rem,1.9vw,1.25rem);padding-block:.2rem}
.sgz__tegel small{display:block;margin-top:.25rem;font-size:.78rem;line-height:1.35;color:var(--muted)}
@media (max-width:860px){.sgz__kaart{grid-template-columns:1fr}}
@media (max-width:420px){.sgz__tegels{grid-template-columns:1fr}}