@font-face{font-family:"Plex";src:url(fonts/plex-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/plex-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/plex-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Lora";src:url(fonts/lora.woff) format("woff");font-weight:400 700;font-display:swap}

:root{
  --bg:#ffffff;--tint:#f1f5f4;--ink:#12232e;--ink2:#3d4f5a;--mut:#667882;--line:#d8e1e5;
  --low:#1d9468;--mid:#c99a1c;--high:#d4513a;--neg:#7253d1;--win:rgba(29,148,104,.11);--link:#0f6b8c;
  --serif:"Lora",Georgia,"Times New Roman",serif;--sans:"Plex",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e1a21;--tint:#15242d;--ink:#e6edf0;--ink2:#bfcbd1;--mut:#8b9ca5;--line:#24363f;
  --low:#35b884;--mid:#e0b43c;--high:#ec6b52;--neg:#9a83ee;--win:rgba(53,184,132,.14);--link:#6cc3e0;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);font-variant-numeric:tabular-nums}
a{color:var(--link);text-underline-offset:.15em}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--bg);padding:6px 10px;z-index:9}
.in,.page{max-width:780px;margin:0 auto;padding:0 18px}
.page.wide{max-width:980px}

/* kop */
.top{border-bottom:1px solid var(--line)}
.top .in{display:flex;align-items:center;gap:18px;min-height:58px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font:500 18px/1 var(--sans);letter-spacing:-.01em}
.brand svg{width:28px;height:28px}
.brand b{font-weight:600;color:var(--low)}
nav.main{display:flex;gap:4px;overflow-x:auto;margin-left:auto;scrollbar-width:none}
nav.main a{color:var(--ink2);text-decoration:none;padding:6px 10px;border-radius:6px;white-space:nowrap;font-size:15px}
nav.main a:hover{background:var(--tint)}
nav.main a[aria-current]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--ink);border-radius:0}
@media (max-width:620px){nav.main{margin:0 -18px;padding:0 12px 8px;width:calc(100% + 36px)}}

.crumbs{font-size:14px;color:var(--mut);margin:18px 0 0}
.crumbs a{color:var(--mut)}

/* typografie */
main{padding:8px 0 48px}
h1{font:600 clamp(32px,6vw,46px)/1.1 var(--serif);letter-spacing:-.015em;margin:26px 0 6px}
h2{font:600 26px/1.2 var(--serif);margin:46px 0 10px;letter-spacing:-.01em}
h3{font:600 18px/1.3 var(--sans);margin:26px 0 6px}
p{margin:0 0 14px}
.dateline{color:var(--mut);margin:0 0 18px;font-size:16px}
.lead{font:400 21px/1.5 var(--serif);color:var(--ink);margin:6px 0 22px;max-width:40em}
.lead b{font-weight:600}
.note{font-size:15px;color:var(--mut)}
.src{font-size:14px;color:var(--mut);border-top:1px solid var(--line);padding-top:12px;margin-top:40px}

/* jetzt-anzeige */
.now-box{display:flex;align-items:baseline;gap:14px 22px;flex-wrap:wrap;margin:4px 0 8px}
.now-box[hidden]{display:none}
.now-box .big{font:600 clamp(44px,9vw,64px)/1 var(--serif);letter-spacing:-.02em}
.now-box .big small{font:500 20px var(--sans);letter-spacing:0;margin-left:4px;color:var(--ink2)}
.now-box p{margin:0;color:var(--ink2);max-width:28em}
.stale{background:var(--tint);border-left:3px solid var(--mid);padding:10px 14px;margin:12px 0}
.stale[hidden]{display:none}

/* grafiek */
.chart-wrap{margin:14px 0 6px;position:relative}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart.sm{display:none}
@media (max-width:560px){.chart.lg{display:none}.chart.sm{display:block}}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .grid.zero{stroke:var(--ink2);stroke-width:1.2}
.chart .ylab{fill:var(--mut);font:12px var(--sans);text-anchor:end}
.chart .xlab{fill:var(--mut);font:12px var(--sans);text-anchor:middle}
.chart .bar{fill:var(--mut)}
.chart .bar.low{fill:var(--low)}.chart .bar.mid{fill:var(--mid)}.chart .bar.high{fill:var(--high)}.chart .bar.neg{fill:var(--neg)}
.chart .bar.on{stroke:var(--ink);stroke-width:2}
.chart .win{fill:var(--win)}
.chart .now[hidden]{display:none}
.chart .now{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 3}
.chart .cmp{fill:none;stroke:var(--ink2);stroke-width:1.5;stroke-dasharray:4 3;opacity:.8}
.readout{min-height:1.6em;font-size:15px;color:var(--ink2);margin:0}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px;color:var(--mut);margin:4px 0 0;padding:0;list-style:none}
.legend i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.legend .low{background:var(--low)}.legend .mid{background:var(--mid)}.legend .high{background:var(--high)}.legend .neg{background:var(--neg)}.legend .win{background:var(--win);outline:1px solid var(--low)}

/* kerncijfers: definitielijst, geen kaarten */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin:22px 0 8px;border-top:1px solid var(--line)}
.facts div{padding:12px 14px 12px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:14px;color:var(--mut)}
.facts dd{margin:2px 0 0;font:600 22px/1.25 var(--sans)}
.facts dd small{font-weight:400;font-size:14px;color:var(--mut);display:block}

/* tabellen */
.tw{overflow-x:auto;margin:10px 0 14px}
table{border-collapse:collapse;width:100%;font-size:15.5px}
th,td{text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--ink2);font-size:14px}
td.n,th.n{text-align:right;padding-right:0;padding-left:10px;white-space:nowrap}
tr.hl td{background:var(--win)}
.t-neg{color:var(--neg);font-weight:600}
details.hours{margin:14px 0}
details summary{cursor:pointer;font-weight:600}

/* horizontale balken */
.hbars{margin:12px 0}
.hb{display:grid;grid-template-columns:minmax(110px,180px) 1fr 84px;gap:10px;align-items:center;padding:4px 0;font-size:15.5px}
.hb-t{height:12px;background:var(--tint);border-radius:2px;position:relative}
.hb-t i{position:absolute;left:0;top:0;bottom:0;background:var(--ink2);border-radius:2px}
.hb-t i.neg{background:var(--neg)}
.hb.me .hb-l{font-weight:600}.hb.me .hb-t i{background:var(--low)}
.hb-v{text-align:right}

/* links naar andere pagina's */
.next{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 24px;margin:16px 0}
.next a{display:block;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.next a b{display:block;font-weight:600}
.next a span{color:var(--mut);font-size:15px}
.next a:hover b{text-decoration:underline}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{font-weight:600;list-style-position:outside}
.faq details p{margin:8px 0 0}

/* mini-grafiek op de startpagina */
.day{border-top:3px solid var(--ink);padding-top:12px;margin-top:30px}
.day h2{margin-top:0}

footer{border-top:1px solid var(--line);background:var(--tint);color:var(--ink2);font-size:15px;padding:24px 0 36px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px}
footer a{color:var(--ink2)}
.prose h2{font-size:22px;margin-top:32px}
.prose ul{padding-left:20px}
@media (prefers-reduced-motion:no-preference){.chart .bar{transition:opacity .15s}}
@media (max-width:560px){
  table{font-size:14px}
  th,td{padding:7px 8px 7px 0}
  .hb{grid-template-columns:110px 1fr 72px;font-size:14px}
  .lead{font-size:19px}
}

/* prijskalender */
.heat{width:100%;height:auto;display:block}
.heat.sm{display:none}
@media (max-width:560px){.heat.lg{display:none}.heat.sm{display:block}}
.heat .xlab,.heat .ylab{fill:var(--mut);font:11px var(--sans)}
.heat .xlab{text-anchor:middle}.heat .ylab{text-anchor:end}
.heat.sm .xlab,.heat.sm .ylab{font-size:9px}
.h0{fill:#1d7a5a;background:#1d7a5a}.h1{fill:#3fae7f;background:#3fae7f}.h2{fill:#a9d28a;background:#a9d28a}
.h3{fill:#f2d27a;background:#f2d27a}.h4{fill:#f0a24b;background:#f0a24b}.h5{fill:#e2643f;background:#e2643f}.h6{fill:#b8322a;background:#b8322a}
.hn{fill:var(--neg);background:var(--neg)}
.heatleg i{width:14px}
/* stroommix */
.stack .wind{fill:#3b82b0}.stack .solar{fill:#f2c14e}.stack .water{fill:#5fb3b3}.stack .bio{fill:#7fa36b}
.stack .gas{fill:#c97b63}.stack .coal{fill:#6b5e57}.stack .rest{fill:#a4b0b6}.stack .hit{fill:transparent}
.legend .wind{background:#3b82b0}.legend .solar{background:#f2c14e}.legend .rest{background:#a4b0b6}
.legend .water{background:#5fb3b3}.legend .bio{background:#7fa36b}.legend .gas{background:#c97b63}.legend .coal{background:#6b5e57}
/* startpagina */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:18px 0 6px}
.duo > div{border-top:3px solid var(--ink);padding-top:10px}
.duo .k{font:600 clamp(30px,6vw,40px)/1.1 var(--serif)}
.duo .k small{font:500 16px var(--sans);color:var(--ink2);margin-left:4px}
.duo p{margin:4px 0 0;color:var(--ink2);font-size:15.5px}
@media (max-width:560px){.duo{grid-template-columns:1fr;gap:18px}}
/* rekenhulp */
.calc{background:var(--tint);padding:18px 18px 8px;margin:18px 0;border-radius:6px}
.calc label{display:block;font-weight:600;margin:0 0 4px}
.calc .row{margin:0 0 14px}
.calc input[type=number]{font:inherit;width:9em;padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink)}
.calc .opt{font-weight:400;display:flex;gap:8px;align-items:center}
.calc .hint{font-size:14px;color:var(--mut);margin:2px 0 0}
.result{margin:16px 0}
.result .k{font:600 clamp(28px,6vw,38px)/1.15 var(--serif)}
.duo h2.h-s{font:600 15px/1.3 var(--sans);margin:0 0 4px;color:var(--ink2)}
.duo .now-box{margin:6px 0 0;gap:8px;align-items:baseline}
.duo .now-box .big{font:600 17px/1.3 var(--sans);letter-spacing:0}
.duo .now-box .big small{font-size:14px}
.duo .now-box .big::before{content:"Jetzt ";font-weight:400;color:var(--ink2)}
/* startzeit-planer */
.calc select{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink);max-width:100%}
.calc .two{display:flex;gap:18px;flex-wrap:wrap}
.pl-bars{display:flex;align-items:flex-end;gap:2px;height:70px;margin:14px 0 4px;border-bottom:1px solid var(--line)}
.pl-bars i{flex:1;background:var(--line);border-radius:2px 2px 0 0;min-width:3px}
.pl-bars i.on{background:var(--low)}
.pl-bars i.neg{background:var(--neg)}
.cta{display:block;background:var(--tint);border-left:3px solid var(--low);padding:12px 16px;margin:18px 0;text-decoration:none;color:var(--ink)}
.cta b{display:block}.cta span{color:var(--ink2);font-size:15px}