/* ══════════════════════════════════════════════════════════════════════════
   De opmaak van de website, overgenomen uit het ontwerp.

   Dit bestand is niet met de hand geschreven. Het is de stylesheet zoals
   index.dc.html hem oplevert, aangevuld met de hover-regels die het
   ontwerpgereedschap tijdens het renderen in de pagina spuit, en met de
   vervanging van het beeldvak-element.

   Verander hier niets op gevoel. Wijkt de site af van het ontwerp, dan ligt
   dat aan wat er hier staat en hoort het in het ontwerp te worden opgelost.
   ══════════════════════════════════════════════════════════════════════════ */


*{box-sizing:border-box}
body{margin: var(--mw-ruimte-0);font-family:'Google Sans Flex','Space Grotesk',sans-serif;font-size:1rem;font-weight: var(--mw-gewicht-kop);line-height: var(--mw-regel);letter-spacing:normal;color:var(--mw-primair, var(--mw-donkergroen));background:var(--mw-pagina);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5,h6,p,ul,dl,dd{margin: var(--mw-ruimte-0)}
h1,h2,h3,h4,h5,h6{font-weight: var(--mw-gewicht-kop);line-height: var(--mw-regel-kop)}
ul{padding: var(--mw-ruimte-0);list-style:none}
button{font-family:inherit;font-weight: var(--mw-gewicht-kop);letter-spacing: var(--mw-spatie);cursor:pointer}
table{border-collapse:collapse}
a{color:var(--mw-primair, var(--mw-donkergroen));text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--mw-donkergroen-diep)}
:focus-visible{outline:2px solid var(--mw-primair, var(--mw-donkergroen));outline-offset:3px}
[data-on-dark] :focus-visible{outline-color:var(--mw-accent, var(--mw-felgroen))}
[data-scroller]::-webkit-scrollbar{display:none}
@keyframes softIn{from{opacity:0}to{opacity:1}}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes panelIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes slowZoom{from{transform:scale(1)}to{transform:scale(1.12)}}
@keyframes dropIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes revealUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes inkFill{from{color: rgba(var(--mw-primair-rgb, 3, 73, 63),.12)}to{color:var(--mw-primair, var(--mw-donkergroen))}}
@keyframes inkFillLight{from{color:var(--mw-rand-op-donker-zacht)}to{color:var(--mw-vlak)}}
[data-reveal]{animation:revealUp linear both;animation-timeline:view();animation-range:entry 5% cover 30%}
[data-ink]{animation:inkFill linear both;animation-timeline:view();animation-range:entry 10% cover 38%}
[data-ink-light]{animation:inkFillLight linear both;animation-timeline:view();animation-range:entry 10% cover 38%}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@keyframes mmIn{0%{opacity:0;transform:translateY(-26px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes mmOut{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-18px) scale(.97)}}
@keyframes mmItem{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}}
[data-show-m]{display:none}
[data-show-m][aria-controls="mobile-menu"]{display:none!important}
[data-mega-a],[data-mega-b]{transition:transform .45s cubic-bezier(.625,.05,0,1),opacity .25s}
[data-mega-b]{opacity:0;transform:translateX(-140%)}
[data-mega-link]:hover [data-mega-pijl],[data-mega-link]:focus-visible [data-mega-pijl]{background:var(--mw-accent, var(--mw-felgroen))}
[data-mega-link]:hover [data-mega-a],[data-mega-link]:focus-visible [data-mega-a]{transform:translateX(140%);opacity:0}
[data-mega-link]:hover [data-mega-b],[data-mega-link]:focus-visible [data-mega-b]{transform:translateX(0);opacity:1}
[data-swipe-hint]{display:none}
@media (max-width:1100px){
[data-show-m][aria-controls="mobile-menu"]{display:inline-flex!important;margin-left:auto;flex:0 0 auto}
header > div > div:first-child > div:first-child{height:64px!important;padding: var(--mw-ruimte-0) var(--mw-ruimte-3) var(--mw-ruimte-0) var(--mw-ruimte-10)!important;gap: var(--mw-ruimte-6)!important}

[data-swipe-hint]{display:flex;align-items:center;gap: var(--mw-ruimte-5);margin: var(--mw-ruimte-14) var(--mw-ruimte-0) var(--mw-ruimte-5);font-size: var(--mw-label);color:var(--mw-grijs-zacht)}
[data-swipe-hint] span{width:26px;height:26px;border-radius:50%;background:rgba(var(--mw-accent-rgb, 151, 255, 120),.45);color:var(--mw-primair, var(--mw-donkergroen));display:inline-flex;align-items:center;justify-content:center;font-size: var(--mw-maat-200);font-weight: var(--mw-gewicht-merk);animation:swipeWink 1.8s cubic-bezier(.625,.05,0,1) infinite}
[data-on-dark] [data-swipe-hint]{color:var(--mw-tekst-op-donker-zacht)}
[data-on-dark] [data-swipe-hint] span{background:rgba(var(--mw-accent-rgb, 151, 255, 120),.3);color:var(--mw-accent, var(--mw-felgroen))}
[data-swipe-hint] + [data-swipe]{margin-top: var(--mw-ruimte-0)!important}
[data-swipe]{display:flex!important;grid-template-columns:none!important;overflow-x:auto!important;overflow-y:visible!important;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom: var(--mw-ruimte-2)}
[data-swipe]::-webkit-scrollbar{display:none}
[data-swipe] > *{flex:0 0 82%;scroll-snap-align:start;min-width:0}
}
@keyframes swipeWink{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){[data-swipe-hint] span{animation:none}}
/* De tekst van een knop wipt bij hover omhoog en komt van onderaf terug. De
   reis is precies zo hoog als de tekst: het label klemt op zijn eigen hoogte
   en de laag erbinnen schuift. Zonder masker legde de tekst de hele hoogte van
   de knop af voordat hij uit beeld was, en dat oogt traag. De laag erbinnen
   wordt in voet.php toegevoegd, zodat de opgeslagen HTML er niets van hoeft
   te weten. */
@keyframes labelFlip{
  0%{transform:translateY(0)}
  44%{transform:translateY(-100%)}
  45%{transform:translateY(100%)}
  100%{transform:translateY(0)}
}
[data-fx="label"]{overflow:hidden}
[data-fx="tekst"]{display:block;will-change:transform}
a:hover [data-fx="tekst"],button:hover [data-fx="tekst"],
a:focus-visible [data-fx="tekst"],button:focus-visible [data-fx="tekst"]{
  animation:labelFlip .42s cubic-bezier(.625,.05,0,1);
}
[data-cta-a],[data-cta-b]{transition:transform .55s cubic-bezier(.625,.05,0,1),opacity .25s}
[data-cta-b]{opacity:0;transform:translate(-18px,18px)}
a:hover [data-cta-a],button:hover [data-cta-a],a:focus-visible [data-cta-a],button:focus-visible [data-cta-a]{transform:translate(18px,-18px);opacity:0}
a:hover [data-cta-b],button:hover [data-cta-b],a:focus-visible [data-cta-b],button:focus-visible [data-cta-b]{transform:translate(0,0);opacity:1}
[data-mega-wrap]{pointer-events:none}
[data-mega]{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);transition:opacity .2s ease,transform .25s cubic-bezier(.625,.05,0,1),visibility .2s}
[data-sub]:hover [data-mega],[data-sub]:focus-within [data-mega],[data-mega][data-sub-open="true"]{opacity:1;visibility:visible;pointer-events:auto;transform:none}
[data-sub-panel]{opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .25s cubic-bezier(.625,.05,0,1),visibility .2s}
[data-sub]:hover [data-sub-panel],[data-sub]:focus-within [data-sub-panel],[data-sub-panel][data-sub-open="true"]{opacity:1;visibility:visible;transform:none}
image-slot{min-width:0;max-width:100%;animation:softIn .8s ease both}
[data-zoom]{animation:slowZoom linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
[data-overlay]{animation:overlayIn .25s ease both}
[data-panel]{animation:panelIn .45s cubic-bezier(.625,.05,0,1) both}
[data-lift]{transition:transform .35s cubic-bezier(.625,.05,0,1),background .3s,opacity .35s}
[data-lift]:hover{transform:translateY(-3px)}
@media (max-width:1100px){
[data-actions]{margin-left:auto}
header a[aria-label^="mywatt"]{width:auto!important}
[data-nav-links]{display:none!important}
[data-show-m]{display:flex}
#mobile-menu{padding:16px var(--g) var(--g)!important}
#mobile-menu nav{margin-top: var(--mw-ruimte-12)!important;padding-bottom: var(--mw-ruimte-8)!important}
#mobile-menu nav > a,#mobile-menu nav button{font-size: var(--mw-titel)!important;padding: var(--mw-ruimte-4) var(--mw-ruimte-0)!important}
#mobile-menu nav a[style*="padding-left"]{font-size: var(--mw-intro)!important;padding: var(--mw-ruimte-3) var(--mw-ruimte-0) var(--mw-ruimte-3) var(--mw-ruimte-8)!important}
#mobile-menu nav p{padding: var(--mw-ruimte-5) var(--mw-ruimte-0) var(--mw-ruimte-1)!important}
/* Het menu past op een scherm: de ingangen erin, de knoppen eronder. Alleen
   wat uitgeklapt is mag schuiven. */
#mobile-menu{overscroll-behavior:contain}
#mobile-menu nav{overflow-y:auto}
#mobile-menu [data-mm-acties] > *{height:52px!important;font-size: var(--mw-tekst)!important}
[data-hide-t]{display:none!important}
/* Elk raster met meer dan een kolom wordt er een. Alles wat hier niet in
   staat blijft naast elkaar staan en duwt de pagina breder dan het scherm; dat
   is wat de site op mobiel liet schuiven. */
[data-col-2],[data-col-3],[data-col-4],[data-split-3070],[data-split-5050],
[data-cols2],[data-velden],[data-split],[data-mv-row],[data-contact-grid],[data-of-3],
[data-of-kolommen],[data-solutions],[data-eco-panels],[data-cta-split],
[data-team]:not([data-swipe]),[data-grid]:not([data-swipe]){grid-template-columns:minmax(0,1fr)!important}
[data-doc]{grid-template-columns:minmax(0,1fr)!important}
[data-toc]{position:static!important;flex-direction:row!important;overflow-x:auto;gap: var(--mw-ruimte-4)!important}
[data-toc] a{flex:0 0 auto}
[data-toc-line]{display:none!important}
[data-solutions]{grid-template-columns:minmax(0,1fr)!important}
[data-eco-panels]{position:static!important;width:auto!important;margin-top: var(--mw-ruimte-8)}
/* De panelen liggen op desktop over de foto en zijn daarom wit op glas. Onder
   de foto is er geen foto meer om op te liggen: dan wit op lichtgrijs, en dat
   is niet te lezen. Vandaar hier een lichte kaart met donkere tekst. */
[data-eco-panels] > div{background:var(--mw-vlak)!important;border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.12)!important;backdrop-filter:none!important}
[data-eco-panels] button{color:var(--mw-primair, var(--mw-donkergroen))!important}
[data-eco-panels] button > span:last-child{border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.25)!important;color:var(--mw-primair, var(--mw-donkergroen))!important}
[data-eco-panels] [id^="eco-panel"] div > div{color:var(--mw-grijs-tekst)!important}
/* Een raster dat is gemarkeerd om te stapelen blijft een raster van een kolom,
   ook al draagt het data-swipe. Drie korte kaarten naast elkaar schuiven leest
   slechter dan ze onder elkaar over de volle breedte. */
[data-stapel]{display:grid!important;grid-template-columns:minmax(0,1fr)!important;overflow:visible!important}
[data-stapel] > *{flex:none!important;width:auto!important}
[data-stapel] + [data-swipe-hint],[data-swipe-hint]:has(+ [data-stapel]){display:none!important}
[data-eco-media]{height:clamp(280px,52vw,420px)!important}
[data-sticky]{position:static!important}
[data-cta-portrait]{margin-top: var(--mw-ruimte-0)!important;height:clamp(300px,60vw,420px)!important}
[data-cta-split]{padding: var(--mw-ruimte-15) var(--mw-ruimte-10)!important;gap: var(--mw-ruimte-12)!important}
/* De lichte hero houdt zijn tekst op 70 procent; op een telefoon is dat een
   kolom van 200 pixels waarin elke kop in stukken valt. */
[data-hero-copy]{max-width:100%!important}
/* De filterbalk van de kennisbank staat naast elkaar met een zoekveld van 300
   pixels erin. Onder elkaar past het wel. */
[data-toolbar]{flex-direction:column!important;align-items:stretch!important}
[data-toolbar-right]{max-width:100%!important;justify-content:flex-start!important}
[data-toolbar] fieldset{min-width:0}
[data-search]{width:100%}
#zoek{width:100%!important}
/* De module met de dagverklaring heeft zijn eigen raster. */
[data-ed],[data-ed-grid]{max-width:100%!important;overflow-x:auto}
/* Een tabel met vier kolommen past hier niet meer: de laatste kolom valt
   buiten het scherm en de tekst erin is dan half weg. Dezelfde rijen staan
   als kaarten in data-tabel-m, net als op de offerte. */
[data-tabel]{display:none!important}
[data-tabel-m]{display:grid!important}
}
/* Op een tablet is een kaart van 82 procent van het scherm zonde van de
   ruimte: daar passen er twee naast elkaar. Onder de 768 wordt het er een. */
@media (min-width:768px) and (max-width:1100px){
[data-swipe] > *{flex:0 0 46%!important}
[data-stapel]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
[data-col-3],[data-col-4],[data-cols2],[data-velden],[data-split],[data-mv-row],[data-of-3]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:768px){
[data-hero-full]{margin:0 0 var(--g)!important;border-radius: var(--mw-straal-0)!important}
[data-hero-full] > div[style*="padding:var(--mw-ruimte-24)"]{padding-top: var(--mw-ruimte-22)!important}
[data-actions]{display:none!important}
header > div > div:first-child > div:first-child{height:60px!important;padding: var(--mw-ruimte-0) var(--mw-ruimte-3) var(--mw-ruimte-0) var(--mw-ruimte-9)!important;gap: var(--mw-ruimte-6)!important}
[data-actions] [data-fx="label"]{display:none!important}
[data-actions] a{padding: var(--mw-ruimte-0) var(--mw-ruimte-4)!important;gap: var(--mw-ruimte-0)!important}
/* Het logo in de mobiele balk. Hier stond twee keer een breedte voor het
   beeldmerk, 26 en daarna 30 pixels, uit de tijd dat de afbeelding alleen
   het beeldmerk was en het woord "mywatt" er in levende letters naast
   stond. De afbeelding is nu de hele tekening, dus perste die regel het
   complete logo in 30 pixels: 8 pixels hoog, woordmerk onleesbaar.
   83 pixels is hetzelfde beeldmerk van 26 breed, nu gerekend over de hele
   tekening (26 / (124,425 / 399,219)). Het logo is dan 22 pixels hoog,
   de maat uit de afspraken. */
header a[aria-label^="mywatt"]{width:auto!important;font-size: var(--mw-titel)!important}
header a[aria-label^="mywatt"] img{width:83px!important}
[data-gutter]{--g:24px!important}
[data-h1]{font-size: var(--mw-h1)!important;letter-spacing: var(--mw-spatie-3)!important}
[data-h2]{font-size: var(--mw-h3)!important;letter-spacing: var(--mw-spatie-3)!important}
[data-h3]{font-size:27px!important}
[data-h4]{font-size: var(--mw-titel)!important}
/* Een vlak van 48 pixels binnenmarge op een scherm van 390 laat 262 pixels
   over voor de inhoud. Op mobiel dus smaller, zodat de kaarten erin ruimte
   houden. */
[data-pad-lg]{padding: var(--mw-ruimte-14) var(--mw-ruimte-10)!important}
/* Kaarten in een raster: op mobiel minder binnenmarge, anders blijft er van
   een kaart van 300 pixels nauwelijks tekstbreedte over. */
[data-col-2] > *,[data-col-3] > *,[data-col-4] > *,[data-cols2] > *,[data-swipe] > *{padding-left: var(--mw-ruimte-12)!important;padding-right: var(--mw-ruimte-12)!important}
[data-col-2] > [style*="padding: var(--mw-ruimte-15)"],[data-col-3] > [style*="padding: var(--mw-ruimte-15)"],[data-col-4] > [style*="padding: var(--mw-ruimte-15)"],[data-swipe] > [style*="padding: var(--mw-ruimte-15)"]{padding-top: var(--mw-ruimte-13)!important;padding-bottom: var(--mw-ruimte-13)!important}
/* En ze mogen breder: 82 procent laat te veel wit staan op een telefoon. */
[data-swipe] > *{flex:0 0 88%!important}
[data-btn-row]{flex-direction:column;align-items:stretch!important}
[data-btn-row] > *{width:100%;justify-content:center}
}
@media (max-width:480px){
[data-gutter]{--g:16px!important}
[data-pad-lg]{padding: var(--mw-ruimte-13) var(--mw-ruimte-8)!important}
[data-col-2] > *,[data-col-3] > *,[data-col-4] > *,[data-cols2] > *,[data-swipe] > *{padding-left: var(--mw-ruimte-10)!important;padding-right: var(--mw-ruimte-10)!important}
[data-swipe] > *{flex:0 0 92%!important}
[data-hero]:not(:has(img[data-hero-mark])){min-height:100svh!important}
[data-footer-cols]{grid-template-columns:minmax(0,1fr)!important}
}

/* De hover-regels die het ontwerpgereedschap tijdens het renderen inspoot.
   Overgenomen uit document.styleSheets van de gerenderde pagina. */
.scp0:hover{color:var(--mw-primair, var(--mw-donkergroen))!important}
.scp1:hover{background:var(--mw-mint)!important}
.scp2:hover{opacity:.92!important}
.scp3:hover{background:var(--mw-vlak-op-donker)!important}
.scp4:hover{background:var(--mw-accent, var(--mw-felgroen))!important;color:var(--mw-primair, var(--mw-donkergroen))!important;border-color:var(--mw-accent, var(--mw-felgroen))!important}
.scp5:hover{background:var(--mw-primair, var(--mw-donkergroen))!important;color:var(--mw-accent, var(--mw-felgroen))!important;border-color:var(--mw-primair, var(--mw-donkergroen))!important}
.scp6:hover{background:var(--mw-pagina)!important}
.scp7:hover{opacity:.6!important}
.scp8:hover{background:var(--mw-accent, var(--mw-felgroen))!important}

/* <image-slot> was in het ontwerp een custom element met slepen, bijsnijden
   en een sidecar: 65 kB gereedschap dat op een publieke site niets te zoeken
   heeft. De huls blijft staan omdat de opmaak van de pagina erop mikt; er zit
   nu gewoon een <img> in. De maten komen uit :host van het origineel. */
image-slot{display:block;position:relative;width:100%;height:100%;aspect-ratio:3/2;
  overflow:hidden;background:var(--mw-vlak-grijs)}
image-slot[shape="rounded"]{border-radius: var(--mw-straal-kaart)}
image-slot[shape="circle"]{border-radius:50%}
image-slot[shape="pill"]{border-radius: var(--mw-straal-rond)}
image-slot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
image-slot[fit="contain"] > img{object-fit:contain}
image-slot[data-leeg]{display:flex;align-items:center;justify-content:center;text-align:center;
  padding:var(--mw-ruimte-6);font-size: var(--mw-klein);color:inherit;opacity:.75}

/* De onderdelen die het ontwerp als tekstspan rendert. */
.sc-interp{display:contents}

/* Het mobiele menu en de merkmodal dragen in het ontwerp een inline
   display:flex. Die wint van het hidden-attribuut, waardoor een verborgen
   paneel toch over de pagina komt te liggen. Daarom hier expliciet. */
[hidden]{display:none!important}

/* ── Letterafstand in lopende tekst ────────────────────────────────────────
   Het ontwerp zet de letters in de tekst dichter op elkaar: -.5px op body en
   tot -1px op alinea's van 18 pixels. Op de koppen hoort dat, in lopende tekst
   leest het slechter. Alles tot en met 18 pixels staat daarom op normaal; de
   koppen en de grote intro's houden hun spatiëring, want die zijn beeld.
   ------------------------------------------------------------------------ */

[style*="font-size: var(--mw-label)"][style*="letter-spacing: var(--mw-spatie)"],
[style*="font-size: var(--mw-tekst)"][style*="letter-spacing: var(--mw-spatie)"],
[style*="font-size: var(--mw-tekst)"][style*="letter-spacing: var(--mw-spatie)"],
[style*="font-size: var(--mw-intro)"][style*="letter-spacing: var(--mw-spatie)"],
[style*="font-size: var(--mw-intro)"][style*="letter-spacing: var(--mw-spatie)"],
[style*="font-size: var(--mw-intro)"][style*="letter-spacing: var(--mw-spatie)"],
[style*="font-size: var(--mw-intro)"][style*="letter-spacing: var(--mw-spatie)"],
[style*="font-size: var(--mw-intro)"][style*="letter-spacing: var(--mw-spatie-2)"],
[style*="font-size: var(--mw-intro)"][style*="letter-spacing: var(--mw-spatie-2)"],
[style*="font-size: var(--mw-intro)"][style*="letter-spacing: var(--mw-spatie-2)"]{letter-spacing:normal!important}

input,textarea,select,button[type="submit"]{letter-spacing:normal}

/* ── Contrast ─────────────────────────────────────────────────────────────
   Huisregel: 4,5:1 voor tekst en 3:1 voor koppen. Een paar kleuren uit het
   ontwerp zitten daar net onder. Ze staan als inline stijl in de markup, dus
   ze worden hier op naam overschreven in plaats van in de HTML aangepast: zo
   blijft de markup die van het ontwerp.
   ------------------------------------------------------------------------ */

/* Wit op 55 procent haalt 4,29 op donkergroen. Op 65 procent is het 5,1. */
[style*="color: rgba(255, 255, 255, 0.55)"]{color:var(--mw-tekst-op-donker-flauw)!important}

/* Donkergroen op 68 en 72 procent haalt 4,26 en 4,44 op wit en op grijs. */
[style*="color: rgba(var(--mw-primair-rgb, 3, 73, 63), 0.68)"]{color:var(--mw-grijs-tekst)!important}
[style*="color: rgba(var(--mw-primair-rgb, 3, 73, 63), 0.72)"]{color:var(--mw-grijs-tekst)!important}

/* Het cijfer in het rondje op een donkere kaart was fel groen op lichtgroen
   van 45 procent: 3,3. Wit haalt daar 4,1, ook te weinig. Het rondje wordt
   daarom vol fel groen met donkergroene tekst, hetzelfde paar als in de knop:
   7,4 en het valt beter op tegen het donkere vlak. */
[data-on-dark] span[style*="background: rgba(var(--mw-accent-rgb, 151, 255, 120), 0.45)"][style*="color: var(--mw-accent, var(--mw-felgroen))"]{
  background:var(--mw-accent, var(--mw-felgroen))!important;
  color:var(--mw-primair, var(--mw-donkergroen))!important;
}

/* De plekhouder in een leeg beeldvak erft de tekstkleur van de pagina. In een
   donker vlak is dat donkergroen op donkergroen. */
[data-on-dark] image-slot[data-leeg],
[data-hero] image-slot[data-leeg]{color:var(--mw-tekst-op-donker-zacht)!important}

/* ── De secundaire knop ───────────────────────────────────────────────────
   In rust: op donker een witte rand, op licht een donkergroene. Bij hover
   keert de knop om in plaats van alleen te vullen, zodat de rand nooit met de
   vulling vloekt.

     op donker  ->  lichtgroen vlak met donkergroene tekst
     op licht   ->  donkergroen vlak met lichtgroene tekst
   ------------------------------------------------------------------------ */

.scp4,[data-on-dark] .scp5{border-color:var(--mw-rand-donker)!important}

.scp4:hover,.scp4:focus-visible{
  background:var(--mw-accent, var(--mw-felgroen))!important;color:var(--mw-primair, var(--mw-donkergroen))!important;border-color:var(--mw-accent, var(--mw-felgroen))!important;
}
.scp5:hover,.scp5:focus-visible{
  background:var(--mw-primair, var(--mw-donkergroen))!important;color:var(--mw-accent, var(--mw-felgroen))!important;border-color:var(--mw-primair, var(--mw-donkergroen))!important;
}
.scp5:hover [data-fx="label"],.scp5:focus-visible [data-fx="label"]{color:var(--mw-accent, var(--mw-felgroen))}

/* Een leeg beeldvak in een rondje van 56 pixels krijgt de plekhouder niet
   kwijt: "Portret contactpersoon" loopt over de rand. Het rondje zelf laat al
   zien dat er een portret hoort; de tekst kan daar weg. */
image-slot[data-leeg][shape="circle"] > span{display:none}
image-slot[data-leeg][shape="circle"]{background:rgba(var(--mw-primair-rgb, 3, 73, 63),.12)}
[data-on-dark] image-slot[data-leeg][shape="circle"]{background:var(--mw-rand-op-donker-zacht)}

/* De vorm van de knoppen staat niet hier maar in
   includes/mw2026/vormgeving.php: die kent de keuze uit het CMS en schrijft
   de regels in de kop van de pagina. Eén plek, en dan ook echt één plek. */

/* De tekening staat midden in het vlak en erft de kleur van de knop. */
svg[data-pijl]{flex:0 0 auto}
[data-fx="a"],[data-fx="b"],[data-cta-a],[data-cta-b]{
  display:flex!important;align-items:center;justify-content:center;
}

/* ── Juridische pagina's ───────────────────────────────────────────────────
   De voorwaarden en de privacyverklaring: een inhoudsopgave die meeloopt en
   daarnaast lopende tekst. De opmaak volgt hoofdstuk 13, dus een leesregel
   van hooguit 70 tekens en lijsten met een bolletje. */

[data-juridisch-tekst] > p,
[data-juridisch-tekst] .vw-art > p {
  margin-top: var(--mw-ruimte-6);
  max-width: 70ch;
  line-height: var(--mw-regel-lees);
  color: var(--mw-grijs-tekst);
}

[data-juridisch-tekst] > ul,
[data-juridisch-tekst] > ol,
[data-juridisch-tekst] .vw-art > ul,
[data-juridisch-tekst] .vw-art > ol {
  margin-top: var(--mw-ruimte-6);
  padding-left: var(--mw-ruimte-11);
  max-width: 70ch;
  color: var(--mw-grijs-tekst);
  list-style: disc;
}

[data-juridisch-tekst] li { margin-top: var(--mw-ruimte-4); line-height: var(--mw-regel-lees); }
[data-juridisch-tekst] li::marker { color: rgba(var(--mw-primair-rgb), .45); }

/* Een kop in de lopende tekst. Stond er zonder ruimte en zonder maat, waardoor
   hij niet van de alinea erboven te onderscheiden was. */
[data-juridisch-tekst] h3 {
  margin-top: var(--mw-ruimte-12);
  font-size: var(--mw-titel);
  font-weight: var(--mw-gewicht-titel);
  letter-spacing: var(--mw-spatie-2);
  line-height: var(--mw-regel);
  color: var(--mw-donkergroen);
  text-wrap: pretty;
}

[data-juridisch-tekst] h3:first-child { margin-top: var(--mw-ruimte-0); }

/* Een genummerd of benoemd onderdeel: een stap in de privacyverklaring, een
   artikel in de voorwaarden. */
[data-juridisch-tekst] .vw-art { margin-top: var(--mw-ruimte-14); }
[data-juridisch-tekst] .vw-art:first-child { margin-top: var(--mw-ruimte-6); }

[data-juridisch-tekst] .vw-art-nr {
  display: block;
  margin-bottom: var(--mw-ruimte-3);
  font-size: var(--mw-label);
  color: var(--mw-grijs-tekst);
}

/* De tweekolomstabellen: links waar het over gaat, rechts de uitleg. */
[data-juridisch-tekst] .vw-tabel {
  width: 100%;
  margin-top: var(--mw-ruimte-10);
  border-collapse: collapse;
  font-size: var(--mw-tekst);
  line-height: var(--mw-regel-lees);
}

[data-juridisch-tekst] .vw-tabel td {
  padding: var(--mw-ruimte-7) var(--mw-ruimte-0);
  border-top: 1px solid var(--mw-rand);
  vertical-align: top;
  color: var(--mw-grijs-tekst);
}

[data-juridisch-tekst] .vw-tabel tr:last-child td { border-bottom: 1px solid var(--mw-rand); }

[data-juridisch-tekst] .vw-tabel td:first-child {
  width: 34%;
  padding-right: var(--mw-ruimte-12);
  color: var(--mw-donkergroen);
}

[data-juridisch-tekst] strong { font-weight: var(--mw-gewicht-merk); color: var(--mw-primair, var(--mw-donkergroen)); }

[data-juridisch-tekst] a {
  color: var(--mw-primair, var(--mw-donkergroen));
  text-underline-offset: 3px;
}

[data-juridisch-tekst] code {
  padding: var(--mw-ruimte-1) var(--mw-ruimte-3);
  border-radius: var(--mw-straal-veld);
  background: var(--mw-vlak-grijs);
  font-size: var(--mw-label);
}

/* Op een smal scherm staat de uitleg onder het onderwerp in plaats van ernaast:
   twee kolommen van 34 en 66 procent worden daar twee woorden per regel. */
@media (max-width: 600px) {
  [data-juridisch-tekst] .vw-tabel,
  [data-juridisch-tekst] .vw-tabel tbody,
  [data-juridisch-tekst] .vw-tabel tr,
  [data-juridisch-tekst] .vw-tabel td { display: block; width: auto; }

  [data-juridisch-tekst] .vw-tabel tr { padding: var(--mw-ruimte-7) var(--mw-ruimte-0); border-top: 1px solid var(--mw-rand); }
  [data-juridisch-tekst] .vw-tabel td { padding: var(--mw-ruimte-0); border: 0; }
  [data-juridisch-tekst] .vw-tabel td:first-child { padding-right: var(--mw-ruimte-0); margin-bottom: var(--mw-ruimte-2); }
  [data-juridisch-tekst] .vw-tabel tr:last-child td { border-bottom: 0; }
}

/* Een plekhouder blijft zichtbaar tot iemand hem invult. */
.vw-open {
  display: inline;
  padding: var(--mw-ruimte-1) var(--mw-ruimte-4);
  border: 1px solid var(--mw-fout-rand);
  border-radius: var(--mw-straal-veld);
  background: var(--mw-fout-vlak);
  color: var(--mw-fout);
  font-size: .92em;
}

[data-toc] a:hover { background: var(--mw-tekst-op-donker-flauw); }
[data-toc]::-webkit-scrollbar { width: 0; height: 0; }

@media (max-width: 900px) {
  [data-doc] { grid-template-columns: minmax(0, 1fr) !important; gap: var(--mw-ruimte-13) !important; }
  [data-toc] {
    position: static !important;
    flex-direction: row !important;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  [data-toc] a { flex: 0 0 auto; scroll-snap-align: start; }
  [data-toc-line] { display: none; }
  [data-juridisch] dl > div { grid-template-columns: minmax(0, 1fr) !important; gap: var(--mw-ruimte-2) !important; }
}

/* ── Sectienavigatie blijft onder de header hangen ─────────────────────────
   De header krimpt bij het scrollen van 84 naar 64 pixels hoog en schuift
   dan omhoog. De balk volgt die twee standen, zodat er altijd twaalf pixels
   lucht tussen zit en niet zestig. */
[data-sectienav] { top: 132px !important; }
body:has(header[data-gescrold]) [data-sectienav] { top: 68px !important; }

@media (max-width: 1100px) {
  [data-sectienav] { top: 100px !important; }
  body:has(header[data-gescrold]) [data-sectienav] { top: 64px !important; }
}

/* De lichte hero staat op mobiel niet op een halfleeg scherm te wachten: de
   200 pixels lucht van het ontwerp horen bij een breed vlak, niet bij 390. */
@media (max-width: 768px) {
  [data-hero-full]:has(img[data-hero-mark]) { padding: 116px 24px 40px !important; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  [data-hero-full]:has(img[data-hero-mark]) { padding: 148px 32px 48px !important; }
}

/* ── Artikeltekst ──────────────────────────────────────────────────────────
   Hoofdstuk 13: lopende tekst op een leesbreedte, tussenkoppen die rust
   geven, opsommingen met een bolletje en een citaat met een groene lijn.
   De tekst komt uit de kennisbank en draagt geen eigen opmaak; die staat
   hier, zodat een artikel van twee jaar oud de huisstijl van vandaag heeft. */

[data-artikeltekst] { font-size: var(--mw-intro); line-height: var(--mw-regel-lees); color:var(--mw-grijs-tekst); }
[data-artikeltekst] > * + * { margin-top: var(--mw-ruimte-10); }

[data-artikeltekst] h2 {
  margin-top: var(--mw-ruimte-16);
  font-size: var(--mw-h3);
  font-weight: var(--mw-gewicht-kop);
  letter-spacing: var(--mw-spatie-3);
  line-height: var(--mw-regel-kop);
  color: var(--mw-primair, var(--mw-donkergroen));
  text-wrap: pretty;
  scroll-margin-top: var(--mw-anker-marge);
}
[data-artikeltekst] h3 {
  margin-top: var(--mw-ruimte-15);
  font-size: var(--mw-maat-800);
  font-weight: var(--mw-gewicht-titel);
  letter-spacing: var(--mw-spatie);
  color: var(--mw-primair, var(--mw-donkergroen));
}
[data-artikeltekst] h4 { margin-top: var(--mw-ruimte-13); font-size: var(--mw-intro); font-weight: var(--mw-gewicht-merk); }

[data-artikeltekst] p { max-width: 70ch; }
[data-artikeltekst] strong { font-weight: var(--mw-gewicht-merk); color: var(--mw-primair, var(--mw-donkergroen)); }
[data-artikeltekst] a { color: var(--mw-primair, var(--mw-donkergroen)); text-underline-offset: 3px; }

[data-artikeltekst] ul, [data-artikeltekst] ol { max-width: 70ch; padding-left: var(--mw-ruimte-0); list-style: none; }
[data-artikeltekst] ol { counter-reset: mw-tel; }
[data-artikeltekst] li { position: relative; padding-left: var(--mw-ruimte-14); margin-top: var(--mw-ruimte-5); }
[data-artikeltekst] ul > li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(var(--mw-accent-rgb, 151, 255, 120), .45);
  box-shadow: 0 0 0 1px rgba(var(--mw-primair-rgb, 3, 73, 63), .1) inset;
}
[data-artikeltekst] ol > li { counter-increment: mw-tel; }
[data-artikeltekst] ol > li::before {
  content: counter(mw-tel); position: absolute; left: 0; top: .1em;
  font-size: var(--mw-maat-400); color:var(--mw-grijs-zacht);
}

[data-artikeltekst] blockquote {
  margin-left: var(--mw-ruimte-0);
  padding: var(--mw-ruimte-2) 0 var(--mw-ruimte-2) var(--mw-ruimte-12);
  border-left: 2px solid var(--mw-accent, var(--mw-felgroen));
  font-size: var(--mw-intro);
  line-height: var(--mw-regelhoogte-3);
  color: var(--mw-primair, var(--mw-donkergroen));
}
[data-artikeltekst] img, [data-artikeltekst] video {
  max-width: 100%; height: auto; border-radius: var(--mw-straal-sectie, 16px);
}
[data-artikeltekst] hr {
  border: 0; height: 1px; margin: var(--mw-ruimte-15) var(--mw-ruimte-0);
  background: rgba(var(--mw-primair-rgb, 3, 73, 63), .1);
}
[data-artikeltekst] table {
  width: 100%; border-collapse: collapse; font-size: var(--mw-tekst);
  background: var(--mw-vlak, var(--mw-vlak)); border-radius: var(--mw-straal-sectie, 16px); overflow: hidden;
}
[data-artikeltekst] th, [data-artikeltekst] td {
  padding: var(--mw-ruimte-7) var(--mw-ruimte-9); text-align: left;
  border-bottom: 1px solid rgba(var(--mw-primair-rgb, 3, 73, 63), .1);
}
[data-artikeltekst] th { font-weight: var(--mw-gewicht-titel); color:var(--mw-grijs-zacht); }

@media (max-width: 768px) {
  [data-artikeltekst] { font-size: var(--mw-intro); }
  [data-artikeltekst] table { display: block; overflow-x: auto; }
}

/* ── De sectiebalk ─────────────────────────────────────────────────────────
   De witte pil zit op de sectie waar je bent, en volgt je terwijl je scrolt.
   Wijs je een ander onderdeel aan, dan schuift hij daar vast alvast heen, zodat
   de balk aanvoelt als een schakelaar en niet als een rij losse links. */
.mw-sectienav-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--mw-ruimte-4);
  min-height: 36px;
  padding: 0 var(--mw-ruimte-7);
  border-radius: var(--mw-straal-vol);
  background: transparent;
  color:var(--mw-grijs-zacht);
  font-size: var(--mw-maat-400);
  letter-spacing: var(--mw-spatie);
  text-decoration: none;
  white-space: nowrap;
  transition: background .3s var(--mw-easing), color .3s var(--mw-easing);
}

.mw-sectienav-stip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--mw-primair-rgb, 3, 73, 63), .2);
  transition: background .3s var(--mw-easing);
}

.mw-sectienav-link[aria-current="location"],
.mw-sectienav-link:hover,
.mw-sectienav-link:focus-visible {
  background: var(--mw-vlak, var(--mw-vlak));
  color: var(--mw-primair, var(--mw-donkergroen));
}

.mw-sectienav-link[aria-current="location"] .mw-sectienav-stip,
.mw-sectienav-link:hover .mw-sectienav-stip,
.mw-sectienav-link:focus-visible .mw-sectienav-stip {
  background: var(--mw-accent, var(--mw-felgroen));
}

/* Wijs je iets anders aan, dan laat de actieve zijn vulling los: er hoort er
   maar één wit te zijn. */
[data-sectienav] [data-scroller]:hover .mw-sectienav-link[aria-current="location"]:not(:hover) {
  background: transparent;
  color:var(--mw-grijs-zacht);
}

[data-sectienav] [data-scroller]:hover .mw-sectienav-link[aria-current="location"]:not(:hover) .mw-sectienav-stip {
  background: rgba(var(--mw-primair-rgb, 3, 73, 63), .2);
}

/* ── De onderste regel van de footer ─────────────────────────────────────── */
/* Copyright, "website door" en de juridische links komen als HTML uit het CMS.
   Een link die daar getypt wordt heeft geen kleur mee, en werd dus donkergroen
   op het donkergroene vlak: onleesbaar. De kleur hoort hier, niet in de tekst. */
.mw-voet-onder a {
  color: var(--mw-tekst-op-donker-zacht);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mw-voet-onder a:hover,
.mw-voet-onder a:focus-visible {
  color: var(--mw-accent, var(--mw-felgroen));
}

/* ── De merkenbalk onder de hero ─────────────────────────────────────────── */
/* Wijst hij ergens heen, dan hoort dat te merken te zijn zodra je erover gaat. */
.mw-merkenbalk { transition: color .3s; }
.mw-merkenbalk:hover,
.mw-merkenbalk:focus-visible { color: var(--mw-vlak); }
.mw-merkenbalk:hover img,
.mw-merkenbalk:focus-visible img { opacity: 1; }

/* ── De cookiemelding ────────────────────────────────────────────────────── */
/* Links onderin, binnen de paginamarge, niet over de knoppen van de pagina
   heen. Drie keuzes naast elkaar: accepteren, aanpassen en weigeren zijn even
   bereikbaar, want weigeren mag niet moeilijker zijn dan accepteren. */

.mw-cookie {
  position: fixed;
  left: var(--g, 32px);
  right: var(--g, 32px);
  bottom: var(--g, 32px);
  z-index: 90;
  max-width: var(--mw-kolom-m);
  max-height: calc(100vh - (var(--g, 32px) * 2));
  overflow-y: auto;
  background: var(--mw-vlak);
  border: 1px solid rgba(var(--mw-primair-rgb), .1);
  border-radius: var(--mw-straal-3);
  padding: var(--mw-ruimte-12);
  display: grid;
  gap: var(--mw-ruimte-8);
  box-shadow: 0 18px 50px rgba(var(--mw-primair-rgb), .12);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s cubic-bezier(.625, .05, 0, 1),
              transform .3s cubic-bezier(.625, .05, 0, 1);
}

.mw-cookie[data-open] { opacity: 1; transform: none; }

.mw-cookie-kop   { font-size: var(--mw-titel); font-weight: var(--mw-gewicht-titel); letter-spacing: var(--mw-spatie-2); }
.mw-cookie-tekst { font-size: var(--mw-maat-500); line-height: var(--mw-regelhoogte-3); color:var(--mw-grijs-tekst); margin: var(--mw-ruimte-0); }
.mw-cookie-tekst a { color: var(--mw-donkergroen); text-underline-offset: 3px; }

.mw-cookie-soorten { display: grid; gap: var(--mw-ruimte-6); }

.mw-cookie-soort {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--mw-ruimte-6);
  align-items: start;
  padding: var(--mw-ruimte-6) var(--mw-ruimte-7);
  border: 1px solid rgba(var(--mw-primair-rgb), .1);
  border-radius: var(--mw-straal-2);
  cursor: pointer;
}

.mw-cookie-soort input { width: 18px; height: 18px; margin-top: var(--mw-ruimte-1); accent-color: var(--mw-donkergroen); }
.mw-cookie-soort-vast  { background: var(--mw-mint); cursor: default; }
.mw-cookie-soort-titel { display: block; font-size: var(--mw-maat-500); }
.mw-cookie-soort-uitleg{ display: block; margin-top: var(--mw-ruimte-1); font-size: var(--mw-klein); line-height: var(--mw-regelhoogte-3);
                         color:var(--mw-grijs-tekst); }

.mw-cookie-acties { display: flex; flex-wrap: wrap; gap: var(--mw-ruimte-4); }

.mw-cookie-knop {
  min-height: 44px;
  padding: 0 var(--mw-ruimte-9);
  border: 1px solid rgba(var(--mw-primair-rgb), .3);
  border-radius: var(--mw-straal-vol);
  background: transparent;
  color: var(--mw-donkergroen);
  font: inherit;
  font-size: var(--mw-maat-500);
  cursor: pointer;
  transition: background .25s cubic-bezier(.625, .05, 0, 1), border-color .25s;
}

.mw-cookie-knop:hover { background: var(--mw-felgroen); border-color: var(--mw-felgroen); }

.mw-cookie-knop-ja {
  background: var(--mw-felgroen);
  border-color: var(--mw-felgroen);
  font-weight: var(--mw-gewicht-merk);
}

.mw-cookie-knop-ja:hover { background: var(--mw-felgroen-diep); border-color: var(--mw-felgroen-diep); }

/* De link in de voet waarmee je je keuze herziet. */
.mw-cookie-herzien {
  background: none;
  border: 0;
  padding: var(--mw-ruimte-0);
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mw-cookie-herzien:hover, .mw-cookie-herzien:focus-visible { color: var(--mw-felgroen); }

/* Op een telefoon is het een blad onderaan: volle breedte, hoogstens
   driekwart van het scherm, en de knoppen blijven in beeld terwijl de soorten
   eronder doorscrollen. */
@media (max-width: 600px) {
  .mw-cookie {
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    max-height: 78vh;
    border-radius: var(--mw-straal-3) var(--mw-straal-3) 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: var(--mw-ruimte-10) var(--g, 16px) calc(var(--mw-ruimte-10) + env(safe-area-inset-bottom));
    gap: var(--mw-ruimte-7);
  }

  .mw-cookie-kop   { font-size: var(--mw-intro); }
  .mw-cookie-tekst { font-size: var(--mw-label); }
  .mw-cookie-soort { padding: var(--mw-ruimte-5) var(--mw-ruimte-6); }
  .mw-cookie-soort-uitleg { font-size: var(--mw-maat-200); }

  .mw-cookie-acties {
    position: sticky;
    bottom: 0;
    background: var(--mw-vlak);
    padding-top: var(--mw-ruimte-6);
    margin: -var(--mw-ruimte-2) -var(--mw-ruimte-2) 0;
    padding-left: var(--mw-ruimte-2);
    padding-right: var(--mw-ruimte-2);
  }

  .mw-cookie-acties .mw-cookie-knop { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .mw-cookie { transition: none; transform: none; }
}

/* Het merk staat in assets/css/mw/merk.css, want de beheeromgeving en de
   inlogpagina gebruiken hem ook. */

/* Venster met formulier: formulier links, zijkolom rechts. Onder 900 pixels
   stapelt het, met de zijkolom bovenaan: eerst lezen waar je ja tegen zegt,
   dan pas typen. Zie mwsVenster() in includes/mw2026/blokken-site.php. */
[data-venster-raster] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--mw-ruimte-14);
  align-items: start;
}
@media (max-width: 900px) {
  [data-venster-raster] { grid-template-columns: minmax(0, 1fr); gap: var(--mw-ruimte-12); }
  [data-venster-zij] { order: -1; }
}

/* Een invoerveld is geen knop. Het contactformulier droeg de klasse scp5, de
   secundaire knop, en vulde zich daardoor bij hover en focus donkergroen met
   fel groene tekst: precies de actieve staat van een knop, midden in een veld
   waar je net iets intypt.

   De focuskleur komt uit --mw-veld-rand-focus, hetzelfde token dat de velden in
   het CMS gebruiken (assets/css/mw/formulieren.css). De regel staat hier omdat
   de site dat stijlblad niet laadt; de keuze zelf staat maar op een plek. */
/* Wat je intypt is donkergroen, net als alle andere tekst op de site. Zonder
   deze regel neemt het veld de zwarte standaardkleur van de browser. */
.mw-siteveld{color:var(--mw-donkergroen)}
/* Vangnet: draagt een veld toch een knopklasse (scp0 tot en met scp8), dan
   volgen zijn achtergrond en tekst die klasse niet. Bij hover verandert er niets
   aan een veld; alleen de focusrand verandert, en die staat hieronder. */
:is(input,textarea,select)[class*="scp"]:is(:hover,:focus-visible){
  background:transparent!important;color:var(--mw-donkergroen)!important;
}
:is(input,textarea,select)[class*="scp"]:hover:not(:focus-visible){
  border-color:var(--mw-grijs-rand)!important;
}
.mw-siteveld::placeholder{color:var(--mw-tekst-plekhouder)}
.mw-siteveld:focus-visible{
  outline:2px solid var(--mw-veld-rand-focus);
  outline-offset:2px;
  border-color:var(--mw-veld-rand-focus)!important;
}
[data-on-dark] .mw-siteveld{
  border-color:var(--mw-rand-donker)!important;
  color:var(--mw-tekst-op-donker)!important;
}
[data-on-dark] .mw-siteveld::placeholder{color:var(--mw-tekst-op-donker-flauw)}

/* ── De sectienavigatie: waar ben ik ────────────────────────────────────────
   De rij met secties boven een offerte en de inhoudsopgave naast een artikel
   markeren waar de lezer is. assets/js/mw/sectienav.js verplaatst die
   markering; hoe hij eruitziet staat hier, en niet in een stijl per link,
   want anders zou elke link zijn eigen staat moeten dragen.

   De regel staat in dit blad en niet in assets/css/mw/navigatie.css omdat de
   site dat stijlblad niet laadt. De keuze zelf staat maar op een plek. */
nav[data-toc] a,
nav[data-of-nav] a{background:transparent;color:var(--mw-grijs-tekst)}

nav[data-toc] a[aria-current="true"],
nav[data-of-nav] a[aria-current="location"],
nav[data-of-nav] a[aria-current="true"]{background:var(--mw-vlak);color:var(--mw-donkergroen)}

nav[data-toc] a > span[aria-hidden],
nav[data-of-nav] a > span[aria-hidden]{
  background:var(--mw-grijs-rand);
  transition:background .3s var(--mw-easing,ease);
}

nav[data-toc] a[aria-current="true"] > span[aria-hidden],
nav[data-of-nav] a[aria-current="location"] > span[aria-hidden],
nav[data-of-nav] a[aria-current="true"] > span[aria-hidden]{background:var(--mw-felgroen)}

/* ── De keuzehulp als venster over de site ─────────────────────────────────
   Joshua wilde dat de site eronder zichtbaar blijft: donkerder en blurry, in
   plaats van een andere pagina. Dat is meer dan smaak. Wie halverwege een
   pagina op "Start de keuzehulp" klikt, hoeft zijn plek niet kwijt te raken.

   De maten volgen de breekpunten uit de lijst: boven 768 een paneel in het
   midden, daaronder schermvullend. Een venster van 600 pixels op een telefoon
   is geen venster maar een kier. */
.kh-venster {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mw-ruimte-12) var(--g);
}
.kh-venster[hidden] { display: none; }

.kh-doek {
  position: absolute;
  inset: 0;
  background: var(--mw-overlay-diep);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 240ms var(--mw-curve);
}
.kh-venster.kh-aan .kh-doek { opacity: 1; }

.kh-paneel {
  position: relative;
  width: 100%;
  max-width: var(--mw-container-lees);
  max-height: 100%;
  display: flex;
  background: var(--mw-vlak);
  border-radius: var(--mw-straal-sectie);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 240ms var(--mw-curve),
              transform 240ms var(--mw-curve);
}
.kh-venster.kh-aan .kh-paneel { opacity: 1; transform: none; }

.kh-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 86vh;
  border: 0;
  display: block;
}

/* De sluitknop staat op het paneel en niet in het venster: in het venster
   scrolt hij mee weg. Een rondje van 44, want dat is het kleinste raakvlak dat
   we aanhouden. */
.kh-sluit {
  position: absolute;
  top: var(--mw-ruimte-7);
  right: var(--mw-ruimte-7);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--mw-grijs-rand);
  background: var(--mw-vlak);
  color: var(--mw-donkergroen);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms var(--mw-curve);
}
.kh-sluit:hover { background: var(--mw-felgroen); }
.kh-sluit:focus-visible {
  outline: 2px solid var(--mw-donkergroen);
  outline-offset: 2px;
}

/* De pagina eronder staat stil zolang het venster openstaat. De body krijgt
   een negatieve top met de scrollhoogte erin, zodat een telefoon niet naar
   boven springt. */
.kh-vast, .kh-vast body {
  overflow: hidden;
}
.kh-vast body {
  position: fixed;
  width: 100%;
}

@media (max-width: 768px) {
  .kh-venster { padding: var(--mw-ruimte-0); }
  .kh-paneel  { max-width: none; border-radius: var(--mw-straal-0); }
  .kh-frame   { height: 100vh; height: 100dvh; }
  .kh-sluit   { top: var(--mw-ruimte-5); right: var(--mw-ruimte-5); }
}

@media (prefers-reduced-motion: reduce) {
  .kh-doek, .kh-paneel { transition: none; }
  .kh-paneel { transform: none; }
}

/* ── Een merklogo in één inkt ──────────────────────────────────────────────
   Op de merkkaarten stond GoodWe in rood en Enphase in oranje, tussen twee
   logo's die wel zwart waren. Dan gaat een kaart over het merk in plaats van
   over de keuze, en het vloekt met een palet dat verder uit twee groenen
   bestaat. De logobalk op donker normaliseert al naar wit; dit is de lichte
   tegenhanger.

   Zwart op 85 procent, en geen donkergroen. Dat laatste kan niet met een
   filter, en met een masker kan het wel maar niet op een img: die tekent zijn
   eigen pixels over de achtergrond heen, dus het logo bleef gewoon rood. Een
   span met een masker zou het oplossen en een leeg vlak opleveren in een
   browser die geen maskers kent. Dit werkt overal en leest op wit als
   dezelfde inkt als de tekst eronder.
*/
.mw-merklogo {
  filter: brightness(0);
  opacity: .85;
}

/* ── Waar een anker landt ─────────────────────────────────────────
   Een klik op een ingang van de sectienavigatie bracht de kop onder de balk,
   en dan lijkt het of er niets gebeurt. De afstand staat nu op de sectie zelf,
   want het script rekent niets meer uit: het leest deze marge. Secties die meer
   ruimte vragen zetten hem zelf hoger, dit is de bodem.

   Deze regel staat ook in basis.css, voor de designpagina's. Die laadt niet op
   de site, en de maat staat op één plek: --mw-anker-marge.
*/
[id] { scroll-margin-top: var(--mw-anker-marge); }