/* /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/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/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/diensten.css */
/* SG-09 optie 1 "Precies De Bresser" (db, 25-09-2026). Het blok #diensten van de Bresser-home (Arnas, e0 25-09) met
   de maten van daar en de kleuren, fonts en .wrap/.eyebrow van Solar Green (assets/css/style.css). Alles onder sgd1-.
   Sinds 26-9 de opmaak van het vaste blok _blokken/diensten.html (R3; was _varianten/diensten/optie-1.css).
   - Lichte band (--zon-zacht, keuze Shahab 25-9 21:33 via c7; was --green-soft) met de randvormen van De Bresser:
     een V bovenaan, een schuine punt onderaan. Label in ink (16,9:1). Het merkteken (.sgd1-deco) is weg
     (Shahab 25-9 21:57: artifacts later via een plaatser).
   - Witte kaarten met de kleine hoek (4px). Raster 3 plus 3 (zes kolommen, elke kaart twee breed; sinds SG-15 zes
     diensten met Bedrijven). Telefoon: twee kolommen.
   - Foto-pop zonder JS, zoals .sb-dpop daar: de foto in een raam dat op het kader afsnijdt, de uitsnede (zelfde maat
     en plek) in een strook boven het kader. 100cqw = breedte van het fotovak; --fa kader, --p uitsteek, --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), uit pop.json.
   - De hele kaart is klikbaar via het ::after-vlak van de titellink; de strook heeft pointer-events:none. */
.sgd1{position:relative;background:var(--zon-zacht);padding:clamp(2.5rem,4vw,3.5rem) 0 clamp(1.75rem,2.8vw,2.25rem)}
.sgd1::before,.sgd1::after{content:"";position:absolute;left:0;right:0;height:calc(clamp(12px,2.2vw,30px) + 1px);
  background:inherit;pointer-events:none}
.sgd1::before{bottom:calc(100% - 1px);clip-path:polygon(0 0,50% 100%,100% 0,100% 100%,0 100%)}
.sgd1::after{top:calc(100% - 1px);clip-path:polygon(0 0,100% 0,40% 100%,0 100%);z-index:1}

.sgd1-head .eyebrow{display:flex;margin:0 0 1.1rem;color:var(--ink)}
.sgd1-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin:0 0 .6em;color:var(--ink)}
.sgd1-intro{font-size:1.05rem;line-height:1.72;margin:.45rem 0 1.15em;color:var(--muted)}

/* ruimte voor wat uitsteekt: boven de eerste rij en tussen de rijen de uitsteek (30px) plus lucht */
.sgd1-grid{list-style:none;margin:calc(30px + .35rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:calc(30px + .35rem) .9rem}
.sgd1-grid>li{grid-column:span 2}

.sgd1-kaart{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--white);border-radius:4px;
  box-shadow:0 0 0 1px rgba(16,20,19,.07),0 1px 2px rgba(16,20,19,.08),0 16px 32px -20px rgba(16,20,19,.4)}
.sgd1-kaart:focus-within{outline:3px solid var(--green-deep);outline-offset:3px}
.sgd1-kaart h3 a:focus-visible{outline:none}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .sgd1-kaart{transition:opacity .55s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
  .sgd1-kaart:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
  .sgd1-kaart:hover .sgd1-pijl{background:var(--green-deep);color:var(--white)}
}

/* het fotovak: kader 3,15:1, op de telefoon 2:1 */
.sgd1-beeld{position:relative;border-radius:4px 4px 0 0}
.sgd1-pop{--fa:3.15;--d0:0;--mid:.5;--ar:1.5;container-type:inline-size;aspect-ratio:var(--fa);
  --p:clamp(30px,100cqw / var(--fa) * .16,40px);
  --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)}
.sgd1-pop__raam{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.sgd1-pop__boven{position:absolute;left:0;right:0;bottom:100%;height:calc(var(--p) + 40px);overflow:hidden;pointer-events:none}
.sgd1-foto,.sgd1-pop__boven>img{position:absolute;left:var(--pl);width:var(--pw);height:var(--ph);max-width:none;object-fit:fill}
.sgd1-foto{top:var(--pt)}
.sgd1-pop__boven>img{top:calc(var(--pt) + var(--p) + 40px);
  filter:drop-shadow(0 10px 12px rgba(16,20,19,.3)) drop-shadow(0 2px 3px rgba(16,20,19,.22))}
/* per foto uit assets/img/diensten/pop.json (9f, SG-15) */
.sgd1-pop--thuisbatterij{--d0:0.081;--mid:0.627;--ar:1.5}
.sgd1-pop--zonnepanelen{--d0:0.081;--mid:0.31;--ar:1.5}
.sgd1-pop--warmtepompen{--d0:0.092;--mid:0.342;--ar:1.5}
.sgd1-pop--airco{--d0:0.08;--mid:0.54;--ar:1.5}
.sgd1-pop--vve{--d0:0.081;--mid:0.579;--ar:1.5}
.sgd1-pop--bedrijven{--d0:0.081;--mid:0.561;--ar:1.5}

/* Clay-element vrij over de onderrand van de foto, zonder wit vlakje (64, Shahab 25-9 via c7); beelden in assets/img/3d/. */
.sgd1-ico{position:absolute;right:.6rem;bottom:-1.3rem;width:3.2rem;height:3.2rem;filter:drop-shadow(0 6px 8px rgba(16,20,19,.22))}
.sgd1-ico img{width:100%;height:100%;max-width:none}

.sgd1-tekst{display:flex;flex:1;flex-direction:column;padding:.75rem 3.2rem .8rem 1.1rem}
.sgd1-kaart h3{font-size:1.05rem;font-weight:600;line-height:1.25;letter-spacing:0;margin:0 0 .25rem;color:var(--ink)}
.sgd1-kaart h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.sgd1-kaart p{margin:0;font-size:.88rem;line-height:1.5;color:var(--muted)}
.sgd1-pijl{position:absolute;right:.9rem;bottom:.9rem;width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;
  background:var(--green-soft);color:var(--green-deep)}
.sgd1-pijl svg{width:16px;height:16px}
.sgd1-nieuw{display:inline-block;margin-left:.35rem;padding:.2rem .45rem;border-radius:5px;background:var(--green-light);
  color:var(--ink);font:600 .66rem/1 "Kanit","Kanit Fallback",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}

/* verwijzende zin onder het raster, links zoals elders op de site (groen-diep, onderstreept) */
.sgd1-meer{margin:1.6rem 0 0;font-size:.98rem;line-height:1.6;color:var(--ink)}
.sgd1-meer a{color:var(--green-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}

@media(max-width:620px){
  .sgd1-head h2{font-size:1.75rem}
  .sgd1-intro{display:none}
  .sgd1-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(30px + .45rem) .55rem;margin-top:calc(30px + .45rem)}
  .sgd1-grid>li{grid-column:auto}
  .sgd1-pop{--fa:2}
  .sgd1-ico,.sgd1-pijl{display:none}
  .sgd1-tekst{padding:.55rem .7rem .65rem}
  .sgd1-kaart h3{font-size:.93rem;margin:0}
  .sgd1-kaart p{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}

/* /assets/css/blokken/prijzen.css */
/* Prijzenblok op de homepage (GO SG-11). Opbouw van het prijzenblok van Draagbalken
   (#prijzen): een witte kaart met links de prijsrijen en rechts een foto met badge.
   Eigen prefix sgpr-, want style.css van pro heeft al .prijs, .prijzen en .prijsblok.
   Kleuren: bedragen in --green-deep (5,7:1 op wit), op de donkere badge --green-light.
   Compacter (Shahab 25-9 via c7, 15 tot 20% kleiner): kaart max 960 breed (was 1180), minder binnenruimte, kleinere
   kop, lead, rijen, chips en slottekst, fotokolom .75fr.
   Breder (Shahab 25-9 21:41 via c7): de kaart loopt over de volle .wrap, zoals de dienstkaarten; vanaf 1100 gaat die
   breedte naar minder hoogte (zie de media-query "Breed" onderaan). */
/* Boven extra ruimte voor de hoofden die boven de kaart uitsteken (desktop tot 76px, gestapeld ongeveer 9vw). */
.sgpr{padding-block:clamp(5.8rem,7.5vw,6.4rem) clamp(2.2rem,4vw,3.4rem);background:var(--paper-2)}
.sgpr__kaart{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  background:#fff;border-radius:24px;box-shadow:var(--shadow)}
/* Dunne groene lijn om de hele kaart, zoals .ob__kaart::before in offerteblok.css (Shahab 25-9, via c7).
   Hier ::after met z-index 2, zodat de lijn over de badge loopt; over de foto tekent .sgpr__raam::after hem
   (het fotovak is een container en daarmee een eigen laag). */
.sgpr__kaart::after{content:"";position:absolute;inset:0;z-index:2;border:1px solid var(--green);border-radius:inherit;pointer-events:none}
.sgpr__body{padding:clamp(1.4rem,2.6vw,2.2rem)}
.sgpr__body h2{font-size:clamp(1.35rem,2.3vw,1.8rem);margin-top:.5rem}
.sgpr__intro{margin-top:.6rem;color:var(--muted);max-width:56ch;font-size:.92rem;line-height:1.55}

.sgpr__rijen{margin-top:clamp(.9rem,1.8vw,1.3rem);display:grid;gap:.45rem}
.sgpr-rij{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:.6rem .95rem;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease}
/* Oplichten (Shahab 25-9 21:48 via c7): hover, focus en tik krijgen dezelfde uitlichting als Thuisbatterij. De tweede
   pixel rand is een inset-schaduw, zodat de rij niet verspringt. Wijst de bezoeker een andere rij aan, dan dooft
   Thuisbatterij: er licht steeds maar een rij op, dat oogt rustiger dan twee tegelijk. */
.sgpr-rij--uitgelicht,.sgpr-rij:hover,.sgpr-rij:focus-visible,.sgpr-rij:active{border-color:var(--green);
  background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green)}
.sgpr__rijen:has(.sgpr-rij:hover,.sgpr-rij:focus-visible) .sgpr-rij--uitgelicht:not(:hover,:focus-visible){
  border-color:var(--line);background:none;box-shadow:none}
.sgpr-rij:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .sgpr-rij:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--green),0 12px 22px -16px rgba(16,20,19,.4)}
}
.sgpr-rij h3{font-family:"Poppins","Poppins Fallback",system-ui,sans-serif;font-size:.95rem;letter-spacing:0;line-height:1.3}
.sgpr-rij p{color:var(--muted);font-size:.8rem;line-height:1.4;margin-top:.1rem}
.sgpr-rij__bedrag{flex:none;text-align:right;white-space:nowrap;
  font-family:"Kanit","Kanit Fallback",system-ui,sans-serif;font-weight:700;font-size:clamp(1.15rem,1.7vw,1.45rem);
  line-height:1.1;color:var(--green-deep)}
.sgpr-rij__bedrag i{font-style:normal;font-family:"Poppins","Poppins Fallback",system-ui,sans-serif;font-size:.74rem;
  font-weight:600;color:var(--muted);margin-right:.3rem}
/* Voorwaarde direct onder het bedrag: "per paneel", "netto na subsidie". */
.sgpr-rij__bedrag small{display:block;margin-top:.15rem;font-family:"Poppins","Poppins Fallback",system-ui,sans-serif;
  font-size:.7rem;font-weight:600;color:var(--muted)}

.sgpr__incl-kop{margin-top:.9rem;font-weight:700;font-size:.85rem}
.sgpr__pillen{list-style:none;margin:.45rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.sgpr__pillen li{display:inline-flex;align-items:center;gap:.4rem;background:var(--green-soft);
  border:1px solid #CDEBD9;border-radius:999px;padding:.3rem .7rem;font-size:.8rem;font-weight:600;line-height:1.3}
.sgpr__pillen svg{width:14px;height:14px;color:var(--green-deep);flex:none}
.sgpr__voet{margin-top:.75rem;font-size:.8rem;line-height:1.5;color:var(--muted);max-width:62ch}
.sgpr__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}

/* Foto met uitstekende medewerkers, zoals de diensten-pop (sgd3-pop) en zonder JS. Het fotovak (.sgpr__beeld) is de
   container: 100cqw/100cqh is het kader. De foto (1500x908, ar 1.652) wordt zo groot dat rij --top (als fractie van
   de hoogte) precies op de bovenrand van het kader valt en de onderkant op de onderrand; de uitsnede van 64 ligt er
   op dezelfde maat en plek over, in een strook boven het kader. Wat boven --top ligt, steekt dus uit: --p is de
   uitsteek van het hoogste hoofd (--d0 uit de opgave van 64).
   Desktop: alleen de twee rechts (prijzen-team-uit, d0 .199, mid .777). --top .29 = rij 263: de jonge man steekt
   82 bronpixels uit, de man met bril (hoofd op rij 242) 21; bij een kader van 360x600 is dat 76 en 19px, en het
   venster is 387 bronpixels breed (x 971 tot 1358), dus beide hoofden staan er helemaal in.
   Het kader heeft een vaste maat (3:5) en staat bovenaan de fotokolom, daaronder de badge als donker vlak:
   een kader over de hele kaarthoogte werd te smal en te hoog, dan passen de twee mannen er niet naast elkaar in. */
.sgpr__media{position:relative;display:flex;flex-direction:column}
.sgpr__beeld{position:relative;z-index:3;flex:none;aspect-ratio:3/5;container-type:size;
  --top:.29;--d0:.199;--mid:.777;--ar:1.652;
  --ph:max(100cqh / (1 - var(--top)),100cqw / var(--ar));
  --pw:calc(var(--ph) * var(--ar));
  --pt:calc(-1 * var(--top) * var(--ph));
  --pl:clamp(100cqw - var(--pw),50cqw - var(--mid) * var(--pw),0px);
  --p:calc((var(--top) - var(--d0)) * var(--ph))}
.sgpr__raam{position:absolute;inset:0;overflow:hidden;border-radius:0 24px 0 0}
/* De kaartlijn over de foto: boven en rechts, niet op de naad met de tekstkolom. */
.sgpr__raam::after{content:"";position:absolute;inset:0;z-index:1;border:1px solid var(--green);border-left:0;border-bottom:0;
  border-radius:inherit;pointer-events:none}
.sgpr__foto,.sgpr__boven img{position:absolute;left:var(--pl);width:var(--pw);height:var(--ph);max-width:none;object-fit:fill}
.sgpr__foto{top:var(--pt)}
/* De strook loopt 2px het kader in, zodat de hoofden ook over de groene lijn vallen. */
.sgpr__boven{position:absolute;left:0;right:0;bottom:calc(100% - 2px);z-index:2;height:calc(var(--p) + 12px);
  overflow:hidden;pointer-events:none}
.sgpr__boven img{top:calc(var(--pt) + var(--p) + 10px)}

/* Zongeel in plaats van zwart (Shahab 25-9 via c7: geen zwarte blokken, alleen huisstijlkleuren behalve groen). */
.sgpr__badge{flex:1;display:flex;flex-direction:column;justify-content:center;background:var(--zon);color:var(--ink);
  border-radius:0 0 24px 0;padding:1.1rem 1.3rem}
.sgpr__badge b{display:block;font-family:"Kanit","Kanit Fallback",system-ui,sans-serif;font-weight:700;font-size:1.9rem;
  line-height:1;color:var(--ink)}
.sgpr__badge span{display:block;margin-top:.4rem;font-size:.66rem;line-height:1.45;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}

/* Breed (Shahab 25-9 21:41 via c7): rijen 2x2, pillen op een regel, intro en voet over de volle kolom. De fotokolom
   wordt 1fr en het kader vult de kaarthoogte naast de badge, minstens vierkant. Zo blijft het venster in de foto
   tussen ongeveer x 900 en 1440: de man met bril en de jonge man staan er helemaal in, de man in het midden
   (hoofd tot x 825) valt erbuiten, dus geen hoofd dat tegen de bovenrand van het kader wordt afgekapt.
   Pas vanaf 1100: daaronder wordt het kader bij rijen onder elkaar te smal en hoog voor de man met bril. */
@media (min-width:1100px){
  .sgpr__kaart{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .sgpr__intro,.sgpr__voet{max-width:none}
  .sgpr__rijen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sgpr__beeld{flex:1 0 auto;aspect-ratio:1;width:100%}
}
/* Tussen 961 en 1099 is de kaart nu iets breder dan 960, dus steken de hoofden iets hoger uit; meer lucht tot de
   schuine gele dienstenband erboven (was 10px bij 1024). */
@media (min-width:961px) and (max-width:1099.98px){.sgpr{padding-top:6.8rem}}

/* Stapelen vanaf 960 in plaats van 860 (Draagbalken): tussen 860 en 960 werd het fotokader
   1:3 smal en hoog. Gestapeld: foto 3:2 bovenaan met de badge erop, uitsnede met alle vijf
   (prijzen-team-alle-uit, d0 .157) en rechts uitgelijnd (--mid 1). Het venster is dan 1.5 x 640 = 960
   bronpixels breed, vanaf x 540: de man rechts, de man met bril en de man in het midden (hoofden rij 181, 242, 252)
   staan er helemaal in en steken uit, de twee links (hoofden tot x 515) vallen erbuiten. */
@media (max-width:960px){
  /* minmax(0,1fr): anders rekt de langste knop de kaart op 390 breder dan het scherm. */
  .sgpr{padding-top:calc(9.1vw + 1rem)}
  .sgpr__kaart{grid-template-columns:minmax(0,1fr)}
  .sgpr__media{order:-1}
  .sgpr__beeld{aspect-ratio:3/2;--top:.295;--d0:.157;--mid:1}
  .sgpr__raam{border-radius:24px 24px 0 0}
  .sgpr__raam::after{border-left:1px solid var(--green)}
  .sgpr__badge{position:absolute;z-index:4;left:12px;bottom:12px;max-width:13rem;border-radius:16px;
    padding:.7rem .9rem;box-shadow:var(--shadow)}
  .sgpr__badge b{font-size:1.5rem}
}
/* Knoplabels mogen hier wrappen (style.css van pro doet dat pas onder 360). */
@media (max-width:520px){
  .sgpr__cta .btn{flex:1 1 100%;white-space:normal;text-align:center;line-height:1.25}
}

/* /assets/css/blokken/waarom.css */
/* Waarom-blok op de homepage (GO SG-18), naar Bresser #waarom (sb-voordelen): gecentreerde kop, links vier
   gekleurde tegels (icoon naast de kop, tekst eronder), rechts een foto waar de hoofden van de monteurs boven de
   fotorand uitsteken. Prefix sgw-.
   Tegels: --green-fill met wit (5,1:1), --lime met ink (12,3:1), --zon-zacht met ink (16,9:1), --zon met ink (10,0:1).
   Eén blok voor home, duurzaamheid, onze-werkwijze en over-ons (c7 26-9, keuze a): het fotovlak komt uit
   _varianten/waarom/optie-1 (de home), de iconen op de schijf uit de proef van 9f.
   Foto met uitstapper, zoals .sb-pop bij De Bresser: twee lagen met dezelfde maat en plek, onderaan verankerd. Het
   fotovlak is sinds Shahab 25-9 (via c7) precies even hoog als het tegelraster (align-self:stretch, container-type:size),
   dus alles rekent in cqh (hoogte van het vlak) plus cqw voor het midden: de foto is 149.29cqh hoog en 203.67cqh breed,
   rij 242 van 733 valt op de bovenrand van het vlak, x 471 (midden van de monteurs, x 240-703 van 1000) op het midden
   van het vlak. De foto is geknipt op het vlak, de uitsnede alleen daarboven plus 3px, zodat de monteurs over de dunne
   groene rand (::before, tussen de twee lagen) heen liggen; de uitsnede loopt door tot rij 261, dus die 3px zijn beeld.
   Het vlak mag tot 1,9 keer zo breed als hoog worden voordat de foto links tekortschiet; op desktop is het 1,2 tot 1,3.
   overflow-x:clip op de sectie: de laag is breder dan de figure en gaf anders horizontale scroll. */
.sgw{padding-block:clamp(3rem,6vw,4.6rem);background:#fff;overflow-x:clip}
/* 7rem onder de kop: de hoofden steken sinds het hogere fotovlak 70 tot 77px uit (gemeten 1920 tot 1081). */
.sgw-kop{max-width:46rem;margin:0 auto 7rem;text-align:center}
.sgw-kop h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-top:.7rem}
.sgw-kop p{margin-top:.9rem;color:var(--muted);font-size:1.05rem;line-height:1.65}

.sgw-rij{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1rem,2.4vw,1.8rem);align-items:end}

.sgw-tegels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,1fr);gap:1rem;align-self:stretch}
.sgw-tegel{display:grid;grid-template-columns:auto 1fr;align-items:center;align-content:start;column-gap:.8rem;
  padding:clamp(1.25rem,2.2vw,1.6rem);border-radius:var(--radius)}
/* Clay-icoon in plaats van het lijnicoon: eerst door 64 op de home gezet (optie-1, 25-9, dezelfde vier beelden), nu op
   een lichte schijf (44px icoon, 4px rand), zo leest het team-icoon ook op de groene tegel. 52px en niet 58px:
   met 58px past "Rotterdam-Nesselande" op desktop niet meer naast het icoon (breekt dan in 3 regels). */
.sgw-tegel__3d{width:52px;height:52px;padding:4px;box-sizing:border-box;border-radius:50%;background:rgba(255,255,255,.92);
  max-width:none}
.sgw-tegel h3{font-size:1.2rem;line-height:1.15;text-wrap:balance}
.sgw-tegel p{grid-column:1/-1;margin-top:.65rem;font-size:.95rem;line-height:1.55}
/* Tekstlink "Gecertificeerd" naar /certificeringen/ (fb LINKS-EN-ALT, c7 26-9): zelfde kleur als de tegeltekst
   (wit op groen), onderstreept zoals .sgt__lead a; bij hover een dikkere streep, want groen op groen kan niet. */
.sgw-tegel p a{text-decoration:underline;text-underline-offset:3px}
.sgw-tegel p a:hover{text-decoration-thickness:2px}
.sgw-tegel:nth-child(1){background:var(--green-fill);color:#fff}
.sgw-tegel:nth-child(2){background:var(--lime);color:var(--ink)}
.sgw-tegel:nth-child(3){background:var(--zon-zacht);color:var(--ink)}
/* Tegel 4 zongeel met zwarte tekst en icoon (Shahab 25-9, via c7): 10,0:1; wit haalt op zongeel maar 1,9:1. */
.sgw-tegel:nth-child(4){background:var(--zon,#F5B21B);color:var(--ink)}

.sgw-foto{position:relative;margin:0;container-type:size;isolation:isolate;align-self:stretch}
.sgw-foto::before{content:"";position:absolute;inset:0;z-index:1;border:1.5px solid var(--green);border-radius:var(--radius);pointer-events:none}
.sgw-foto img{position:absolute;left:calc(50cqw - 95.93cqh);bottom:0;width:203.67cqh;max-width:none;height:149.29cqh}
.sgw-foto__foto{clip-path:inset(49.29cqh calc(107.74cqh - 50cqw) 0 calc(95.93cqh - 50cqw) round var(--radius))}
.sgw-foto__uit{z-index:2;clip-path:inset(0 calc(107.74cqh - 50cqw) calc(100cqh - 3px) calc(95.93cqh - 50cqw));pointer-events:none}

/* Gestapeld vanaf 1080 (daaronder werden de tegels veel hoger dan het kader): foto boven de tegels (anders vallen de
   hoofden over de tegels), tegels twee naast elkaar, op de telefoon onder elkaar. De kop krijgt dan de uitsteek
   (12.3% van de fotobreedte, max 600px) plus lucht als marge. */
@media(max-width:1080px){
  .sgw-kop{margin-bottom:calc(min(100vw - 2.4rem,600px) * .123 + 1.6rem)}
  .sgw-rij{grid-template-columns:minmax(0,1fr);row-gap:1.4rem}
  .sgw-foto{order:-1;width:min(100%,600px);margin-inline:auto;align-self:start;aspect-ratio:100/73.65}
  .sgw-tegels{grid-template-rows:none}
}
@media(max-width:560px){
  .sgw-tegels{grid-template-columns:minmax(0,1fr);gap:.75rem}
  .sgw-tegel{padding:1.15rem 1.2rem}
  .sgw-tegel h3{font-size:1.1rem}
}

/* /assets/css/blokken/opslag.css */
/* Opslag (GO SG-20). Eigenaar: fb. Opbouw en maten van De Bresser #opslag (sb-opslag, Arnas:
   site/_werk/style.css, r. 669-693, 865-873 en 2342), met het concept van e5 voor band, lijn en kaart,
   in de kleuren van Solar Green. Alles onder sgo-. Lagen: band en lijn (1), duo (2), kaart (4).
   De zongele lijn ligt strak op de bovenrand van de band, niet meer eronder (Shahab 25-9 via c7: "die oranje
   streep is perfect, maar doe hem daarboven"). skewY verschuift alleen in y en hangt dus niet af van de hoogte:
   met dezelfde breedte en hoek sluit de onderkant van de lijn op elke x aan op de bovenkant van de band
   (1px overlap tegen een haarlijn). Kaart en duo liggen over de lijn.
   De band is merkgroen naar --green-deep; wit op --green haalt geen 4,5:1, dus alle tekst staat op de
   kaart. Kaart lime en lijn zongeel in plaats van inkt (Shahab 25-9 via c7: geen zwarte blokken, alleen
   huisstijlkleuren behalve groen); lime omdat de kaarten erboven en eronder zongeel zijn.
   Het merkteken op de band is weg (Shahab 25-9 21:57: artifacts later via een plaatser). */
.sgo{--band-b:115px;--band-h:clamp(300px,19vw,400px);position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(3rem,6vw,5rem)}
.sgo__band{position:absolute;left:0;right:0;bottom:var(--band-b);height:var(--band-h);z-index:1;
  background:linear-gradient(90deg,var(--green),var(--green-deep));transform:skewY(-5deg);backface-visibility:hidden}
.sgo__lijn{position:absolute;left:0;right:0;bottom:calc(var(--band-b) + var(--band-h) - 1px);height:18px;z-index:1;background:var(--zon);
  transform:skewY(-5deg);backface-visibility:hidden}
.sgo__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:end}

.sgo__kaart{position:relative;z-index:4;margin-bottom:150px;padding:clamp(1.4rem,3vw,2.2rem);border-radius:var(--radius);
  background:var(--lime);color:var(--ink);box-shadow:0 24px 50px -28px rgba(16,20,19,.6)}
.sgo .eyebrow{color:var(--ink)}
.sgo .eyebrow::before{background:var(--ink)}
.sgo h2{margin-top:1.1rem;font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.15;color:var(--ink)}
.sgo__kaart p{margin-top:.9rem;line-height:1.7;color:var(--ink-2)}
.sgo__knoppen{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
/* Lijnknop in inkt, zoals .sgt__bel in toennu.css. */
.sgo__bel{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.sgo__bel svg{color:var(--green-deep)}
.sgo__bel:hover{background:rgba(16,20,19,.08)}
/* De groene focusring van style.css haalt op lime geen 3:1, inkt wel (ook op de zongele lijn). */
.sgo :focus-visible{outline-color:var(--ink)}

/* Het duo staat op de band (bottom 123px); p5 en de pallet staan verder naar achteren, hoger op de band. */
.sgo__fig{position:relative;z-index:2;min-height:max(680px,calc(clamp(420px,46vw,620px) + 123px))}
.sgo__duo{position:absolute;left:0;bottom:123px;height:clamp(420px,46vw,620px);width:auto;max-width:none}

@media (min-width:901px) and (max-width:1600px){.sgo__kaart{margin-left:14%}}
@media (max-width:900px){
  .sgo{padding-top:2rem}
  .sgo__in{grid-template-columns:minmax(0,1fr);gap:1rem}
  .sgo__kaart{margin-bottom:0}
  .sgo{--band-b:14px;--band-h:150px}
  .sgo__fig{min-height:calc(clamp(290px,58vw,420px) + 12px)}
  .sgo__duo{left:50%;bottom:12px;height:clamp(290px,58vw,420px);transform:translateX(-50%)}
}
@media (max-width:520px){.sgo__knoppen .btn{width:100%}}

/* /assets/css/blokken/toennu.css */
/* Toen/nu (GO SG-19). Eigenaar: fb. Opbouw en maten van De Bresser #sinds-1923 (sb-toennu, Arnas:
   site/_werk/style.css, r. 2207-2242 en de donkere kaart in r. 3938-3943), in de kleuren en letters
   van Solar Green. Alles onder sgt-. De kaart is zongeel (Shahab 25-9, 21:40, via c7: "liever mooie
   gele kleur in de huisstijl van de home"), met zwart op zon (www.css): inkt 10,0:1; green-deep haalt
   op --zon maar 3,1:1 en staat daarom alleen op iconen. */
.sgt{padding-block:clamp(3rem,6vw,5rem)}
/* Kolommen 3:2 in plaats van 1:1 (db, Shahab 25-9 via c7: "dit mag 20% groter worden en iets meer hoogte
   innemen"). Het fotoduo schaalt met de linkerkolom mee: vanaf ca. 1100px 20% groter, op 1024 ca. 17%. De
   tekstkolom blijft minstens 22rem, zodat de tekst tussen 861 en 1100px niet te smal wordt. */
.sgt__paneel{display:grid;grid-template-columns:minmax(0,3fr) minmax(22rem,2fr);gap:clamp(2rem,5vw,4rem);align-items:center;
  padding:clamp(1.4rem,4.5vw,3.5rem);border-radius:28px;background:var(--zon);color:var(--ink);box-shadow:var(--shadow)}
.sgt__links,.sgt__rechts{min-width:0}
.sgt .eyebrow{color:var(--ink)}
.sgt .eyebrow::before{background:var(--ink)}
.sgt h2{margin-top:1.1rem;font-size:clamp(2rem,3.6vw,2.9rem);color:var(--ink)}

/* Twee gekantelde foto's: het team links, het pand rechts en er een stukje overheen. Het dak steekt
   ca. 11,5% van de kolombreedte boven de foto's uit; de marge groeit daarom mee (een % in margin-top
   is een deel van de breedte), met 1rem lucht tot de kop. */
.sgt__fotos{position:relative;display:flex;align-items:flex-end;margin-top:calc(11.5% + 1rem);padding-bottom:1rem}
.sgt__fotos figure{position:relative;margin:0;padding:8px;background:#fff;border-radius:14px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.sgt__fotos img{display:block;border-radius:8px;object-fit:cover}
.sgt__team{width:46%;transform:rotate(-4deg);z-index:1}
.sgt__team img{width:100%;height:auto;aspect-ratio:4/3.4;object-position:50% 30%}
.sgt__pand{width:62%;margin-left:-10%;transform:rotate(2deg);z-index:2}
/* Het pand (9f, SG-21): foto en uitsnede zijn even groot (1000x667, door fb
   precies gelijk verkleind uit 1536x1024) en liggen op dezelfde plek. Het
   fotovak (16:10) begint op .19 van de fotohoogte, net onder het bord (onderkant .161); wat erboven ligt
   toont alleen de uitsnede, en die steekt boven het vak uit. De foto is 160% van het vak breed en rechts
   uitgelijnd, dus het vak toont .375 tot 1 van de breedte en het hele gebouw (.431 tot 1) valt erbinnen.
   top = -.19 x (1,6 / 1,5) x 1,6 = -32,43% van de vakhoogte; de uitsnede is onder .19 weggeknipt (81%),
   op 2px na: door de kanteling bleef er anders een lichte naad over de ramen (daar zijn de pixels gelijk). */
.sgt__beeld{position:relative}
.sgt__raam{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:8px}
.sgt__pand :is(.sgt__foto,.sgt__uit){position:absolute;left:-60%;top:-32.43%;width:160%;max-width:none;height:auto;border-radius:0}
.sgt__uit{z-index:2;pointer-events:none;clip-path:inset(0 0 calc(81% - 2px) 0);
  filter:drop-shadow(8px 6px 7px rgba(0,0,0,.45)) drop-shadow(1px 1px 2px rgba(0,0,0,.3))}
.sgt__fotos figcaption{position:absolute;left:1rem;bottom:1rem;padding:.25rem .7rem;border-radius:99px;
  background:var(--ink);color:#fff;font:700 .72rem/1.3 "Kanit","Kanit Fallback",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.sgt__team figcaption{top:1rem;bottom:auto}
.sgt__pand figcaption{background:var(--lime);color:var(--ink)}
.sgt__adres{margin-top:.7rem;font-size:.78rem;line-height:1.45;color:rgba(16,20,19,.8)}

.sgt__lead{font-size:1.08rem;font-weight:600;line-height:1.6;color:var(--ink)}
/* Tekstlink naar /certificeringen/ (S2, c7 26-9): inktkleur op de zongele kaart, herkenbaar aan de onderstreping. */
.sgt__lead a{text-decoration:underline;text-underline-offset:3px}
.sgt__lead a:hover{color:var(--green-deep)}
.sgt__rechts p + p{margin-top:1rem}
.sgt__rechts p:not(.sgt__lead){color:rgba(16,20,19,.85)}
.sgt__knoppen{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
/* Lijnknop op zon: inktrand en inkttekst; style.css heeft geen lijnknop. */
.sgt__bel{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.sgt__bel svg{color:var(--green-deep)}
.sgt__bel:hover{background:rgba(16,20,19,.08)}
.sgt__verhaal{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;font-weight:700;color:var(--ink)}
.sgt__verhaal svg{width:16px;height:16px;color:var(--green-deep)}
.sgt__verhaal:hover{text-decoration:underline;text-underline-offset:3px}
/* De groene focusring van style.css haalt op --zon geen 3:1, inkt wel. */
.sgt :focus-visible{outline-color:var(--ink)}

@media(max-width:860px){.sgt__paneel{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.sgt__knoppen .btn{width:100%}}

/* /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}}

/* /assets/css/pages/index.css */
/* Homepage. Eigenaar: de hero-terminal (fb). style.css is een ongewijzigde kopie van
   pro.solargreen.nl; wat daar voor de homepage van moet afwijken staat hier. */

/* ---------- Hero ----------
   Onder 1080px staat de adviseur onder de tekst. In style.css komt de basisregel van
   .hero__content NA het 1080-blok, dus zijn onderpadding voor de scanbalk op desktop
   (9 tot 18rem) won het daar van de bedoelde 1.2rem: 250 tot 288px tussen de knoppen en
   het hoofd van de adviseur. Hier dezelfde 5.5rem als pro onder 620px. */
@media(max-width:1080px){
  .hero__content{padding-bottom:5.5rem}
}
/* Het label loopt op smalle schermen over twee regels. Het streepje hoort dan bij de
   eerste regel en houdt zijn breedte; als flex-item kromp het anders naar ca. 20px. */
.hero .eyebrow{align-items:flex-start}
.hero .eyebrow::before{flex:none;margin-top:calc((1lh - 3px) / 2)}

/* ---------- Hero zoals De Bresser (19, Shahab 25-9 21:50 via c7) ----------
   Maten gemeten op http://127.0.0.1:8972/ (Arnas, 25-9) op 16 breedtes, en hier overgenomen:
   - hero: 664px hoog op 1440x900, meegaand met de schermhoogte (610 op x800, minimaal 560); vanaf 760px
     smaller bepaalt de inhoud de hoogte (407 op 390);
   - kop: gecentreerd, max. 896px breed, clamp(2.2rem,4.4vw,3.35rem) = 53,6px op 1440 en 35,2px op 390,
     gewicht 600, regelhoogte 1.05, letterafstand -.02em; bovenkant op 119px (152 tot 1100, 106 tot 760);
   - subregel: in de kop, .52em, gewicht 600, regelhoogte 1.15, .45rem eronder;
   - trio: 359px hoog (627 breed), onderkant 24px boven de hero-onderrand, zodat de formulierkaart de
     onderste 80px bedekt; tot 760px min(332px,77vw) breed = 172px hoog op 390, op de onderrand;
   - kaart: 104px over de hero (clamp(56px,7.5vw,104px), 48 tot 760, stond al zo in style.css), 1300px breed;
   - balk: 78px hoog (64 tot 760), inhoud max. 1300 breed met clamp(16px,4vw,40px) zijkant, dus het logo
     op x 110 bij 1440; menu .9rem/600, telefoon 1rem/600, knop 40px hoog (38 tot 760).
   Het logo van De Bresser is een wit blok van 147x140; het Solar Green-logo is een brede lockup zonder blok,
   dus het staat op dezelfde plek, zo groot als naast menu en knoppen past (50px hoog, 243 breed).
   index.css laadt alleen op de home, dus de balkregels hieronder raken geen andere pagina. */
.hero{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;min-height:0;
  height:clamp(560px,100vh - 190px,664px);height:clamp(560px,100svh - 190px,664px)}
.hero .wrap{order:1;width:min(100% - 2 * clamp(16px,4vw,40px),var(--maxw))}
.hero__content{max-width:56rem;margin-inline:auto;padding:118.6px 0 6.4px;text-align:center}
.hero__title{font-size:clamp(2.2rem,4.4vw,3.35rem);font-weight:600;line-height:1.05;letter-spacing:-.02em}
/* Donkere band achter kop en balk, zoals de donkere sluier van De Bresser. Zonder band is de lichtste plek in de video
   achter de kop (witte dakkapel, gevels) L 0,75: daar haalt geen lichte kleur 3:1, ook wit niet (1,3:1). Met deze
   band erbij haalt elke woordkleur en het wit op die plek minstens 3,1:1 (zongeel 3,17, lime 3,92, lichtgroen 3,39,
   zon-zacht 5,39, wit 5,90; gemeten door 19 op de poster en 8 videobeelden, 1440 en 390).
   Hij hangt in de sluier (onder het trio), dus de monteurs blijven even licht. --kopband: tot net onder de subregel. */
/* Tot 480px is met cover maar 51 tot 66% van de posterbreedte te zien: dan een middenuitsnede van 896x720
   (61 in plaats van 113 KB, zelfde hoogte; OPT-03: q70, was 76 KB). De preload in index.json volgt dezelfde grens en hetzelfde adres. */
@media(max-width:480px){.hero{background-image:url("/assets/img/hero-poster-mobiel-q70.webp")}}
.hero{--kopband:232px}
.hero__veil::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,12,12,.6) 0,rgba(12,12,12,.6) var(--kopband),rgba(12,12,12,0) calc(var(--kopband) + 90px))}
@media(max-width:1099.98px){.hero{--kopband:255px}}
@media(max-width:760px){.hero{--kopband:300px}}
/* Het wisselwoord (assets/js/pages/index.js), elk woord een eigen huisstijlkleur. Overgang zoals De Bresser. */
.hero__title em{color:var(--lime);background:none;padding:0;white-space:nowrap}
.hero__wissel{display:inline-block;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.hero__wissel.is-weg{opacity:0;transform:translateY(.25em)}
.hero__wissel[data-kleur="1"],.hero__wissel[data-kleur="4"]{color:var(--zon)}
.hero__wissel[data-kleur="2"]{color:var(--green-light)}
.hero__wissel[data-kleur="3"]{color:var(--zon-zacht)}
/* Vaste plek voor het woord, zodat de rest van de kop nooit verschuift: 5.41em (290px bij 53,6px), zo past
   "Start binnen 2 weken met" plus de plek binnen de 896px van De Bresser. Langere woorden (tot "je thuisbatterij",
   354px) lopen rechts over de plek heen; de regel staat daardoor hooguit 35px uit het midden. Alleen met het script
   (is-wissel); zonder script of bij reduced motion staat de kop gewoon gecentreerd met "besparen". */
.is-wissel .hero__wissel{width:5.41em;text-align:left}
/* Punt voor schermlezers tussen kop en subregel. */
.hero__punt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.hero__wissel{transition:none}}
.hero__title__sub{display:block;margin-top:.45rem;font-size:.52em;line-height:1.15;letter-spacing:-.01em}
.hero__pic{order:2;flex:1 1 0;min-height:0;display:flex;justify-content:center;align-items:flex-end;padding-bottom:24px}
.hero__person{position:static;right:auto;bottom:auto;display:block;width:auto;max-width:none;max-height:none;
  height:min(359px,100%);margin:0}
@media(max-width:1099.98px){.hero__content{padding-top:152px}}
@media(max-width:760px){
  .hero{height:auto}
  .hero__content{padding-top:105.6px}
  .hero__pic{flex:none;padding-bottom:0}
  .hero__person{height:calc(min(332px,77vw) / 1.7486)}
}

/* Balk op de hero. Alleen de doorzichtige stand; zodra hij vastplakt (is-stuck) gelden nav.css en style.css. */
.topbar .wrap{width:min(100%,1300px);padding-inline:clamp(16px,4vw,40px)}
.topbar:not(.is-stuck){padding:0;height:78px}
.topbar:not(.is-stuck) .topbar__logo img,
.topbar:not(.is-stuck) .topbar__logo img+img{height:50px}
@media(min-width:1240px){
  .hoofdnav__lijst>li>a,.hoofdnav__knop{font-size:.9rem}
}
/* Focus op de donkere hero wit in plaats van groen; in de uitklapkaart en de vaste witte balk blijft het groen. */
@media(min-width:1240px){
  .topbar:not(.is-stuck) .hoofdnav__lijst>li>a:focus-visible,.topbar:not(.is-stuck) .hoofdnav__knop:focus-visible{outline-color:#fff}
}
.topbar:not(.is-stuck) .topbar__logo:focus-visible,.topbar:not(.is-stuck) .topbar__actions>:focus-visible,
.topbar:not(.is-stuck) .topbar__menu:focus-visible{outline-color:#fff}
/* Google-score in dezelfde vorm en maten als die van e5 in het scanvak (.sv-logo--google; besluit Shahab via de
   regie): de G los in een wit rondje van 26px, "5,0 op Google" en daaronder vijf sterren van 11px in #FBBC05. */
.topbar__google{display:inline-flex;flex:none;align-items:center;gap:10px;padding:0 .25rem;color:#fff;white-space:nowrap;
  transition:color .35s var(--ease)}
.topbar__google-g{flex:none;width:26px;height:26px;padding:4px;border-radius:50%;background:#fff;object-fit:contain}
.topbar__google-score{display:block;line-height:1}
.topbar__google-regel{display:block}
.topbar__google b{font:700 1.05rem/1 "Kanit","Kanit Fallback",system-ui,sans-serif}
.topbar__google-op{font:600 .78rem/1 "Poppins","Poppins Fallback",sans-serif}
.topbar__sterren{display:flex;gap:1px;margin-top:4px;color:#FBBC05}
.topbar__sterren svg{flex:none;width:11px;height:11px}
.topbar.is-stuck .topbar__google{color:var(--ink)}
.topbar.is-stuck .topbar__google-g{box-shadow:0 0 0 1px var(--line)}
/* Bellen en appen als twee ronde icoonknoppen direct links van "Gratis scan", in plaats van het uitgeschreven nummer
   (Shahab 25-9 via c7). Zelfde vorm als de ronde knopjes van nav.css (wit rondje, dun randje), in beide balkstanden;
   40px, even hoog als de knop ernaast. Hover: bellen lichtgroen, appen WhatsApp-groen (style.css). */
.topbar .topbar__actions>.topbar__tel,.topbar .topbar__actions>.btn--wa{display:inline-flex;align-items:center;justify-content:center;
  flex:none;width:40px;height:40px;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__tel .lbl{display:none}
.topbar .topbar__actions>.topbar__tel:hover{background:var(--green-soft)}
/* De opvallende knop: lime met inkt (12,3:1), zoals de felgroene Offerte-knop van De Bresser. */
.topbar__actions>.btn--primary{height:40px;padding:0 1.15rem;background:var(--lime);color:var(--ink);font-size:.9rem;box-shadow:none}
.topbar__actions>.btn--primary svg{color:var(--ink)}
.topbar__actions>.btn--primary:hover{background:#fff}
/* nav.css zet de knop onder 780px in het menu; De Bresser houdt hem op elke breedte in de balk. */
@media(max-width:779.98px){.topbar__actions>.btn--primary{display:inline-flex}}
/* Tot 760px: De Bresser toont hier de score, de knop en het menu. Het ronde belknopje van nav.css blijft staan, net als
   op de andere pagina's (c7 25-9): bellen moet op mobiel bereikbaar blijven. */
@media(max-width:760px){
  .topbar:not(.is-stuck){height:64px}
  .topbar__actions>.btn--primary{display:inline-flex;height:38px;padding:0 .9rem;font-size:.85rem}
  .topbar__actions>.btn--primary svg{display:none}
  /* Smal zoals De Bresser ("9" met een ster): de G, "5,0" en een ster eronder. */
  .topbar__google-op,.topbar__sterren svg+svg{display:none}
  /* In beide standen, anders duwt het hogere logo van nav.css (tot 38px) het menuknopje van het scherm. */
  .topbar:not(.is-stuck) .topbar__logo img,
  .topbar:not(.is-stuck) .topbar__logo img+img,
  .topbar.is-stuck .topbar__logo img,
  .topbar.is-stuck .topbar__logo img+img{height:clamp(20px,6vw,31px)}
}
/* Waar de balk net te vol is (1240-1299 met het menu, 761-829 met de hamburger): logo 42px en de score zonder
   "op Google", zodat de knoppen niet worden samengedrukt of over de rand lopen. */
@media(min-width:1240px) and (max-width:1299.98px),(min-width:761px) and (max-width:829.98px){
  .topbar:not(.is-stuck) .topbar__logo img,.topbar:not(.is-stuck) .topbar__logo img+img,
  .topbar.is-stuck .topbar__logo img,.topbar.is-stuck .topbar__logo img+img{height:42px}
  .topbar__google-op{display:none}
}
/* Onder 540px past de score niet meer naast logo, bellen, appen, knop en menu. Bellen en appen gaan voor; de score
   staat op die breedtes direct eronder bovenaan de scankaart (e5). */
@media(max-width:539.98px){.topbar__google{display:none}}
/* Smalle telefoons: ronde knopjes 36px en 6px tussenruimte, onder 390px een compactere scanknop, zodat appen er
   tot 366px naast past. Nog smaller valt appen weg; bellen, de scanknop en het menu blijven. */
@media(max-width:429.98px){
  .topbar .wrap,.topbar__actions{gap:6px}
  .topbar .topbar__actions>.topbar__tel,.topbar .topbar__actions>.btn--wa,.topbar .topbar__menu{width:36px;height:36px}
}
@media(max-width:389.98px){.topbar__actions>.btn--primary{padding:0 .65rem;font-size:.8rem}}
@media(max-width:365.98px){.topbar .topbar__actions>.btn--wa{display:none}}

/* ---------- Kerncijfers: sinds 25-9 in css/blokken/kerncijfers.css (<!-- blok:kerncijfers -->) ---------- */