/* elektriciteit-zelfbouw: enkel wat specifiek is voor deze pagina. Laadt na site.css. */
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
.skip{position:fixed;left:var(--gutter);top:12px;z-index:100;background:var(--white);color:var(--night)!important;padding:12px 18px;border-radius:var(--radius);font:500 14px/1 var(--font-body);transform:translateY(-200%)}
.ph-block{border:1px dashed currentColor;border-radius:var(--radius);padding:16px 18px;font-size:var(--small);line-height:1.5}
.ph-img{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;border:1px dashed currentColor;border-radius:var(--radius);padding:20px;font-size:var(--small);line-height:1.5;overflow:hidden}
.logo{display:flex;align-items:center;min-height:44px;text-decoration:none;padding:6px 0}
.hl.is-on .ln{animation:tl 350ms linear calc(var(--i)*150ms) both}
.hl.is-on .gl{opacity:1;transition-delay:calc(var(--i)*150ms + 250ms)}
.page-hero{padding:calc(var(--hh) + 32px) 0 36px}
.page-hero h1{font:200 clamp(38px,5.4vw,82px)/1.04 var(--font-head);letter-spacing:0;color:var(--white);max-width:20ch;text-wrap:balance}
.page-hero .h1-label{margin-bottom:16px}
.page-hero .hero-sub{margin:18px 0 0;max-width:60ch;font-size:17px}
.page-hero .actions{margin-top:28px}
@media (min-width:1024px){
.page-hero{padding-top:calc(var(--hh) + 40px)}
}
.tag{display:inline-flex;align-items:center;justify-content:center;min-width:62px;height:30px;padding:0 12px;border:1px solid var(--ink);border-radius:var(--radius);font:500 13px/1 var(--font-body);letter-spacing:.02em;flex:none}
.tag.jens{background:var(--ink);color:var(--paper)}
.dark .tag{border-color:var(--white);color:var(--white)}
.dark .tag.jens{background:var(--white);color:var(--night)}
.tag.keur{background:transparent;border-style:dashed;border-color:currentColor}
.kr-panel{position:relative;margin-top:56px;padding:44px 24px 36px;border-radius:var(--radius);overflow:hidden}
@media (min-width:1024px){
.kr-panel{padding:64px 48px 52px}
.kr{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
}
.pl-line line{stroke:var(--ink);stroke-width:1}
.dark .pl-line line{stroke:var(--white)}
.js .pl-line line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 900ms var(--ease)}
.js .pl-line.is-drawn line{stroke-dashoffset:0}
@media (min-width:768px){
.dark .panel:nth-child(2){border-left-color:var(--line-dark)}
}
.light .fl-pts{color:var(--ink)}
.light .fl-pts li::before{background:var(--ink)}
.panel .link{margin-top:20px}
.bs{margin-top:64px;padding-top:32px;border-top:1px solid var(--light)}
.bs-small{margin-top:24px;font-size:var(--small);color:var(--muted);max-width:66ch}
.compact{padding:calc(var(--section)*.75) 0}
.kl-note{margin-top:48px}
.faq.dark .qa,.faq.dark .qa details{border-color:var(--line-dark)}
.faq.dark .pm::before,.faq.dark .pm::after{background:var(--white)}
.faq.dark .ans{color:var(--muted)}
.sw-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-top:0;max-width:520px}
.rich .label{color:var(--stone)}
.rich .ink{position:relative;overflow:hidden;background:var(--ink);color:var(--white);padding:40px 28px 36px;border-radius:var(--radius);box-shadow:0 24px 48px -30px rgba(11,13,16,.6)}
@media (min-width:1024px){
.rich .ink{padding:52px 44px 48px}
}
.rich .ink .label{color:var(--muted)}
.sec-head{max-width:780px}
.light + .light{border-top:var(--hair) solid var(--line-light)}
.dark + .dark{border-top:var(--hair) solid var(--line-dark)}
.tag.both{gap:8px}
.dark .pl-g line{stroke:var(--light);stroke-width:1.5}
.sw-row{display:none}
@media (max-width:1023.98px){
.sw-l{display:flex;align-items:center;min-height:44px}
.sw-l:first-child{justify-content:flex-end}
.sw-l::after{bottom:4px}
}
@media (max-width:599.98px){
.js .sw-bar{padding:10px var(--gutter) 8px}
.js .sw-bar .sw svg{width:88px}
.js .vd-sum{margin-top:2px;line-height:1.4}
}
@media (max-height:500px) and (orientation:landscape){
.js .sw-bar{position:static}
}
.sp{display:grid;gap:56px;margin-top:72px}
.num{font:200 30px/1 var(--font-head);color:var(--stone)}
@media (min-width:1024px){
.sp{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0}
}
.own{display:grid;overflow:hidden;height:30px;align-self:start}
.own>span{grid-area:1/1;display:flex;align-items:center;justify-content:flex-end}
html:not(.js) .own .ot,html:not(.js) .sp-ht .ot{display:none}
.js .own>span,.js .sp-ht>span{transition:transform 320ms var(--ease),opacity 320ms var(--ease)}
@media (min-width:1024px) and (min-height:880px){
.sp-jij{position:sticky}
}
.own--nn{max-width:200px;transition:max-width 0s,max-height 0s,margin 0s}
.js [data-mode="z"] .own--nn{max-width:0;transition:max-width 0s 320ms,max-height 0s 320ms,margin 0s 320ms}
@media (max-width:599.98px){
.sp-l li{grid-template-columns:36px minmax(0,1fr);row-gap:0}
.sp-l li .own{grid-column:2;justify-self:start;margin-top:14px}
.sp-l li .own>span{justify-content:flex-start}
.js [data-mode="z"] .sp-l li .own--nn{max-height:0;margin-top:0}
}
.faq.light .pm::before,.faq.light .pm::after{background:var(--ink)}
@media (max-height:500px) and (orientation:landscape){
.page-hero{min-height:0}
.page-hero h1{font-size:min(clamp(38px,5.4vw,82px),clamp(36px,6vw,56px))}
}

/* Twee kaarten sinds het btw-blok weg is (antwoorden Jens 7/11/2026) */
@media (min-width:1024px){.bs-grid.bs-2{grid-template-columns:repeat(2,minmax(0,1fr))}}