/* Thuisbatterij Installaties — editorial gids */
:root{--paper:#F6F2EA;--paper-2:#EDE6D8;--ink:#161512;--ink-2:#3A3731;--muted:#6B655A;--rule:#D6CDBB;--green:#1F5E3B;--green-2:#2E7A51;--red:#A63A24}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.7 "IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--green)}
h1,h2,h3{font-family:"Newsreader",Georgia,serif;font-weight:500;letter-spacing:-.015em;line-height:1.08;margin:0}
h2{font-size:clamp(34px,4.2vw,54px);margin-bottom:22px}
h3{font-size:24px}
p{margin:0 0 1.1em}
.mono{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.wrap{width:min(1180px,100% - 40px);margin:0 auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;z-index:99;background:#fff;padding:8px}
.kicker{font:600 13px "IBM Plex Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin:0 0 14px}
.kicker.light{color:#A9D8B8}

.masthead{background:var(--paper);border-bottom:3px double var(--ink);position:sticky;top:0;z-index:40}
.mast-top{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--rule);color:var(--muted)}
.mast-top a{color:var(--ink);text-decoration:none}
.mast-main{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.title{font:500 30px "Newsreader",serif;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.title i{color:var(--green)}
.title.small{font-size:24px;display:block;margin-bottom:10px;color:#fff}
.title.small i{color:#A9D8B8}
.toc{display:flex;align-items:center;gap:22px}
.toc a{text-decoration:none;color:var(--ink-2);font-size:15px;font-weight:500}
.toc a span{font-family:"Newsreader",serif;font-style:italic;color:var(--green);margin-right:3px}
.toc a:hover{color:var(--green)}
.toc .toc-cta{background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:2px}
.toc .toc-cta:hover{background:var(--green);color:#fff}
.menu-btn{display:none;background:none;border:1px solid var(--ink);padding:8px 14px;font:600 14px "IBM Plex Sans";border-radius:2px}

.cover{padding:64px 0 80px;border-bottom:1px solid var(--rule)}
.cover-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}
.cover h1{font-size:clamp(46px,6.2vw,88px);font-weight:500;margin-bottom:26px}
.cover h1 em{display:block;font-style:italic;color:var(--green)}
.standfirst{font:400 22px/1.55 "Newsreader",serif;color:var(--ink-2);max-width:560px}
.byline{color:var(--muted);border-top:1px solid var(--rule);padding-top:14px;margin-top:26px}
.cover-fig{margin:0}
.cover-fig img{aspect-ratio:4/5;object-fit:cover;width:100%;filter:saturate(.85) contrast(1.02)}
figcaption{color:var(--muted);margin-top:10px}

.chapter{padding:90px 0;border-bottom:1px solid var(--rule)}
.chapter.alt{background:var(--paper-2)}
.ch-grid{display:grid;grid-template-columns:200px minmax(0,760px);gap:40px;justify-content:center}
.ch-num{font:400 160px/0.8 "Newsreader",serif;font-style:italic;color:transparent;-webkit-text-stroke:1.5px var(--green);position:sticky;top:180px;align-self:start;text-align:right}
.ch-body>p,.ch-body li{color:var(--ink-2)}
.drop::first-letter{float:left;font:500 86px/0.82 "Newsreader",serif;color:var(--green);margin:6px 12px 0 0}
blockquote{margin:34px 0;padding:6px 0 6px 28px;border-left:4px solid var(--green);font:italic 400 30px/1.3 "Newsreader",serif;color:var(--ink)}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);margin-top:30px}
.timeline div{padding:16px 16px 0 0}
.timeline div p{font-size:16px;margin:6px 0 0}
.timeline .now span{background:var(--green);color:#fff;padding:3px 8px}

.ledger{background:#FFFDF8;border:1px solid var(--rule);box-shadow:6px 6px 0 var(--ink);padding:26px;margin-top:30px}
.ledger-head{border-bottom:1px solid var(--ink);padding-bottom:10px;margin-bottom:18px}
.ledger-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px 18px}
label{display:block;font-weight:600;font-size:15px;color:var(--ink)}
.ledger label span{display:block;font:500 11.5px "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
input,select,textarea{width:100%;margin-top:6px;padding:12px 12px;border:0;border-bottom:2px solid var(--ink);background:transparent;font:500 17px "IBM Plex Sans",sans-serif;color:var(--ink);border-radius:0}
textarea{border:1px solid var(--rule);border-bottom:2px solid var(--ink);background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--green);background:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border:0;border-radius:2px;background:var(--ink);color:var(--paper);font:600 16px "IBM Plex Sans",sans-serif;cursor:pointer;margin-top:20px;text-decoration:none}
.btn:hover{background:var(--green);color:#fff}
.btn-light{background:#fff;color:var(--ink)}
.ledger-out{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:24px;border-top:2px solid var(--ink)}
.ledger-out div{padding:14px 14px 14px 0;border-bottom:1px solid var(--rule)}
.ledger-out strong{display:block;font:500 36px "Newsreader",serif}
.ledger-out .neg strong{color:var(--red)}.ledger-out .pos strong{color:var(--green)}
.ledger-out p{grid-column:1/-1;font-size:15.5px;color:var(--ink-2);margin:14px 0 0}
.footnote{font-size:13px;color:var(--muted);margin:18px 0 0;border-top:1px solid var(--rule);padding-top:12px}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin:10px 0 30px}
.two-col h3{border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:12px}
.two-col div:last-child h3{color:var(--red);border-color:var(--red)}
.plain{list-style:none;padding:0;margin:0}
.plain li{padding:10px 0;border-bottom:1px solid var(--rule);font-size:16.5px}
.inline-fig{margin:10px 0 30px}
.inline-fig img{aspect-ratio:16/8;object-fit:cover;width:100%;filter:saturate(.85)}

.regions{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:2px solid var(--ink);margin:26px 0 16px}
.regions div{padding:18px 18px 18px 0;border-bottom:1px solid var(--rule)}
.regions div:nth-child(odd){border-right:1px solid var(--rule)}
.regions div:nth-child(even){padding-left:18px}
.regions h3{font-size:22px;margin-bottom:6px}
.regions p{font-size:15.5px;color:var(--muted);margin:0}
.aside-note{font-style:italic;font-family:"Newsreader",serif;font-size:19px;color:var(--ink-2)}

.checklist{counter-reset:c;list-style:none;padding:0;margin:0 0 34px}
.checklist li{counter-increment:c;display:grid;grid-template-columns:56px 1fr;gap:10px;padding:16px 0;border-bottom:1px solid var(--rule)}
.checklist li::before{content:counter(c,upper-roman);font:italic 500 28px/1 "Newsreader",serif;color:var(--green)}
.faq details{border-top:1px solid var(--ink)}
.faq details:last-child{border-bottom:1px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font:500 22px "Newsreader",serif;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font:300 30px "IBM Plex Sans";color:var(--green)}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--ink-2);font-size:16.5px;margin:0 0 18px}

.advies{background:var(--green);color:#EAF4EC;padding:100px 0}
.advies-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.advies h2{color:#fff}
.cb-form{display:grid;gap:12px;margin-top:24px}
.cb-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cb-form input,.cb-form select{background:transparent;color:#fff;border-bottom-color:#A9D8B8}
.cb-form input::placeholder{color:#C9E3D0}
.cb-form select option{color:var(--ink)}
.cb-form .check{color:#DCEFE1}.cb-form .check a{color:#fff}
.letter .check{color:var(--ink-2)}.letter .check a{color:var(--green)}
.letter input,.letter textarea{color:var(--ink)}
.letter{background:#FFFDF8;color:var(--ink);padding:30px;box-shadow:8px 8px 0 #0E3A23;display:grid;gap:14px;background-image:repeating-linear-gradient(transparent 0 33px,rgba(214,205,187,.45) 33px 34px)}
.letter-head{border-bottom:1px solid var(--ink);padding-bottom:10px;margin:0;color:var(--muted)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex!important;gap:10px;align-items:flex-start;font-weight:400!important;font-size:14px!important;line-height:1.5}
.check input{width:18px;height:18px;margin:3px 0 0;flex:none;accent-color:var(--green)}
.calc-box{background:var(--paper-2);padding:10px 12px;font-size:14px}
.calc-box strong{display:block}
.hp{position:absolute;left:-9999px}
.form-msg{margin:0;padding:12px 14px;font-weight:600;font-size:15px}
.form-msg.is-ok{background:#DDEFE3;color:#14532D}.form-msg.is-err{background:#F6DCD5;color:#7F1D1D}

.foot{background:var(--ink);color:#B9B3A6;padding:56px 0 24px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot h3{color:#A9D8B8;margin-bottom:12px}
.foot a{color:#fff;text-decoration:none}
.foot-bottom{display:flex;justify-content:space-between;margin-top:34px;padding-top:16px;border-top:1px solid #3A3731}
.m-bar{display:none}

[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

@media (max-width:1050px){
  .toc{gap:14px}.toc a{font-size:14px}
  .ch-grid{grid-template-columns:110px minmax(0,1fr);gap:24px}
  .ch-num{font-size:96px}
}
@media (max-width:900px){
  .menu-btn{display:block}
  .toc{position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:6px 20px 18px;border-bottom:3px double var(--ink);display:none}
  .toc.is-open{display:flex}
  .toc a{padding:13px 0;border-bottom:1px solid var(--rule);font-size:16px}
  .toc .toc-cta{text-align:center;margin-top:12px}
  .cover-grid,.advies-grid{grid-template-columns:1fr;gap:36px}
  .cover-fig img{aspect-ratio:16/11}
  .ch-grid{grid-template-columns:1fr}
  .ch-num{position:static;text-align:left;font-size:72px;margin-bottom:-10px}
}
@media (max-width:640px){
  body{font-size:17px}
  .mast-top span{display:none}.mast-top{justify-content:flex-end}
  .title{font-size:24px}
  .chapter{padding:64px 0}
  .ledger-grid,.ledger-out,.two-col,.regions,.row,.cb-row,.timeline{grid-template-columns:1fr}
  .regions div:nth-child(odd){border-right:0}.regions div:nth-child(even){padding-left:0}
  blockquote{font-size:24px}
  .foot-grid{grid-template-columns:1fr}.foot-bottom{flex-direction:column;gap:8px}
  .m-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;justify-content:center;align-items:center;gap:6px;min-height:58px;background:var(--ink);color:var(--paper);font-weight:600;text-decoration:none;border-top:3px double var(--paper)}
  .m-bar span{opacity:.7;font-weight:400}
  body{padding-bottom:58px}
}