/* Het Nieuwslicht — stijlblad */

:root{
  --bg:#fbf9f5;
  --bg-2:#ffffff;
  --rand:#e8e2d8;
  --tekst:#1e1c19;
  --zacht:#6d6659;
  --accent:#e0921a;
  --accent-diep:#b26f0c;
  --hero-1:#fff4de;
  --hero-2:#fdf0f0;
  --schaduw:0 1px 2px rgba(30,28,25,.05), 0 8px 24px -12px rgba(30,28,25,.18);
  --radius:14px;
  --breed:1180px;
}
:root[data-thema="donker"]{
  --bg:#12131a;
  --bg-2:#191b24;
  --rand:#272a36;
  --tekst:#eceef4;
  --zacht:#9aa0b2;
  --accent:#f0a83a;
  --accent-diep:#f6c471;
  --hero-1:#1c1e2a;
  --hero-2:#221d22;
  --schaduw:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--tekst);
  font:16px/1.6 ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--breed);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--accent);color:#fff;padding:10px 14px;border-radius:8px;z-index:99}

/* ---- kop ---- */
.kop{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);
     backdrop-filter:blur(12px);border-bottom:1px solid var(--rand)}
.kop-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.merk{display:flex;align-items:center;gap:11px;text-decoration:none}
.zon{width:30px;height:30px;fill:var(--accent);stroke:var(--accent);flex:0 0 auto}
.zon .stralen{stroke-width:3.4;stroke-linecap:round;fill:none}
.merk-tekst{display:flex;flex-direction:column;line-height:1.15}
.merk-tekst strong{font-size:19px;letter-spacing:-.015em}
.merk-tekst em{font-style:normal;font-size:11.5px;color:var(--zacht);letter-spacing:.01em}
.kop-acties{display:flex;gap:8px}
.knop-icoon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;
  border:1px solid var(--rand);background:var(--bg-2);color:var(--zacht);cursor:pointer;padding:0}
.knop-icoon svg{width:18px;height:18px;fill:currentColor;stroke:currentColor}
.knop-icoon:hover{color:var(--accent);border-color:var(--accent)}
.ic-zon{display:none}
:root[data-thema="donker"] .ic-maan{display:none}
:root[data-thema="donker"] .ic-zon{display:block}

/* ---- hero ---- */
.hero{background:linear-gradient(150deg,var(--hero-1),var(--hero-2));border-bottom:1px solid var(--rand);
      padding:52px 0 44px}
.datum{margin:0 0 12px;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-diep);font-weight:600}
.hero-titel{
  margin:0 0 14px;font-size:clamp(30px,5.4vw,52px);line-height:1.08;letter-spacing:-.03em;
  font-family:ui-serif,Georgia,"Times New Roman",serif;font-weight:600;
}
.hero-sub{margin:0;max-width:60ch;color:var(--zacht);font-size:17px}
.cijfers{display:flex;flex-wrap:wrap;gap:26px;margin-top:26px}
.cijfer b{display:block;font-size:26px;font-family:ui-serif,Georgia,serif;line-height:1.1}
.cijfer span{font-size:12.5px;color:var(--zacht)}

/* ---- uitgelicht ---- */
.uitgelicht{margin:30px 0 6px}
.groot{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:var(--bg-2);
  border:1px solid var(--rand);border-radius:var(--radius);overflow:hidden;box-shadow:var(--schaduw)}
.groot .beeld{min-height:280px;background-size:cover;background-position:center}
.groot.geen-beeld{grid-template-columns:1fr}
.groot.geen-beeld .inhoud{padding:34px 34px 32px}
.groot .badge{position:static;align-self:flex-start}
.groot .inhoud{padding:28px 30px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.groot h2{margin:0;font-size:clamp(21px,2.4vw,29px);line-height:1.22;letter-spacing:-.02em;
  font-family:ui-serif,Georgia,serif;font-weight:600}
.groot h2 a{text-decoration:none}
.groot h2 a:hover{color:var(--accent-diep)}
.groot p{margin:0;color:var(--zacht);font-size:15.5px}

/* ---- filterbalk ---- */
.balk{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
      margin:34px 0 20px;padding-top:6px;scroll-margin-top:80px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--rand);background:var(--bg-2);color:var(--zacht);
  padding:7px 13px;border-radius:999px;font-size:13.5px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;font-family:inherit}
.chip:hover{border-color:var(--accent)}
.chip[aria-selected="true"]{background:var(--tekst);color:var(--bg);border-color:var(--tekst)}
.chip .n{opacity:.6;font-size:12px}
.zoek{position:relative;flex:0 1 240px}
.zoek svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;
  stroke:var(--zacht);pointer-events:none}
.zoek input{width:100%;padding:9px 12px 9px 34px;border-radius:999px;border:1px solid var(--rand);
  background:var(--bg-2);color:var(--tekst);font-size:14px;font-family:inherit}
.zoek input:focus{outline:2px solid var(--accent);outline-offset:1px}

/* ---- grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.kaart{background:var(--bg-2);border:1px solid var(--rand);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--schaduw);
  transition:transform .18s ease, box-shadow .18s ease}
.kaart:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(30,28,25,.06),0 16px 32px -16px rgba(30,28,25,.3)}
.kaart .beeld{aspect-ratio:16/9;background-size:cover;background-position:center;position:relative}
.kaart .beeld.leeg{display:grid;place-items:center;font-size:40px}
.badge{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.94);color:#1e1c19;
  font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:999px;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:5px}
.kaart .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.kaart h3{margin:0;font-size:17.5px;line-height:1.32;letter-spacing:-.012em;font-weight:600}
.kaart h3 a{text-decoration:none}
.kaart h3 a:hover{color:var(--accent-diep)}
.kaart p{margin:0;color:var(--zacht);font-size:14.5px;flex:1}
.voetregel{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--zacht);
  border-top:1px solid var(--rand);padding-top:11px;margin-top:2px}
.voetregel .bron{font-weight:600;color:var(--tekst)}
.stip{opacity:.45}
.taalvlag{margin-left:auto;font-size:11px;border:1px solid var(--rand);border-radius:5px;padding:1px 5px}

.leeg{text-align:center;color:var(--zacht);padding:40px 0}
.meer-wrap{display:flex;justify-content:center;margin:34px 0 60px}
.meer{border:1px solid var(--rand);background:var(--bg-2);color:var(--tekst);padding:12px 26px;
  border-radius:999px;font-size:15px;cursor:pointer;font-family:inherit}
.meer:hover{border-color:var(--accent);color:var(--accent-diep)}

/* ---- voet ---- */
.voet{border-top:1px solid var(--rand);background:var(--bg-2);padding:36px 0;margin-top:auto}
.voet-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;font-size:14px}
.voet p{margin:7px 0 0;color:var(--zacht)}
.voet a{color:var(--accent-diep)}

@media (max-width:760px){
  .hero{padding:40px 0 34px}
  .groot{grid-template-columns:1fr}
  .groot .beeld{min-height:190px}
  .groot .inhoud{padding:22px}
  .balk{gap:12px}
  .zoek{flex:1 1 100%}
  .chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch;
    min-width:0;max-width:100%;flex:1 1 100%}
  .grid{grid-template-columns:1fr;gap:18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ================= gedeelde secties ================= */
.sectiekop{margin:0 0 18px}
.sectiekop h2{margin:0 0 4px;font-family:ui-serif,Georgia,serif;font-size:clamp(21px,2.6vw,27px);
  letter-spacing:-.02em;font-weight:600}
.sectiekop p{margin:0;color:var(--zacht);font-size:15px}
.klein{font-size:12.5px;color:var(--zacht);line-height:1.5}
.vw{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- stroomprijzen ---- */
.prijzen-vak{margin:36px auto 10px;padding-top:8px}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:22px}
.kpi .tegel{background:var(--bg-2);border:1px solid var(--rand);border-radius:12px;padding:14px 16px}
.kpi .tegel b{display:block;font-family:ui-serif,Georgia,serif;font-size:23px;line-height:1.15;letter-spacing:-.01em}
.kpi .tegel span{display:block;font-size:12.5px;color:var(--zacht);margin-top:3px}
.kpi .tegel .bijschrift{font-size:11.5px;color:var(--zacht);opacity:.85}

.staafjes{margin:0;background:var(--bg-2);border:1px solid var(--rand);border-radius:12px;padding:26px 16px 12px;
  overflow-x:auto}
.staven{display:flex;align-items:flex-end;gap:2px;height:150px;min-width:520px}
.staaf{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;
  border:0;background:none;padding:0;cursor:default}
.staaf i{display:block;background:var(--reeks);border-radius:4px 4px 0 0;min-height:2px;
  transition:filter .15s ease}
.staaf:hover i,.staaf:focus-visible i{filter:brightness(1.18)}
.staaf.nu i{box-shadow:0 0 0 2px var(--bg-2),0 0 0 4px var(--reeks)}
.staaf .waarde{position:absolute;left:50%;transform:translateX(-50%);font-size:11px;
  color:var(--tekst);white-space:nowrap;font-variant-numeric:tabular-nums}
.staaf .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--tekst);color:var(--bg);font-size:12px;padding:6px 9px;border-radius:7px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:5}
.staaf:hover .tip,.staaf:focus-visible .tip{opacity:1}
.asrij{display:flex;gap:2px;min-width:520px;margin-top:7px;font-size:11px;color:var(--zacht)}
.asrij span{flex:1;text-align:center;font-variant-numeric:tabular-nums}
.tabel-schakel{margin:12px 0 0}
.tabel-schakel button{background:none;border:0;color:var(--accent-diep);font:inherit;font-size:13.5px;
  cursor:pointer;padding:0;text-decoration:underline}
#prijzenTabel table{border-collapse:collapse;width:100%;font-size:13.5px;margin-top:10px}
#prijzenTabel th,#prijzenTabel td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--rand)}
#prijzenTabel td:last-child{text-align:right;font-variant-numeric:tabular-nums}

/* ---- rekenmodule ---- */
.reken-vak{margin:46px auto}
.reken{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:start}
.velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.velden label{display:flex;flex-direction:column;gap:4px;font-size:13.5px;color:var(--zacht)}
.velden label span{font-size:11.5px;opacity:.8}
.velden input{width:100%;min-width:0;padding:10px 12px;border-radius:9px;border:1px solid var(--rand);background:var(--bg-2);
  color:var(--tekst);font:inherit;font-size:15px;font-variant-numeric:tabular-nums}
.velden input:focus{outline:2px solid var(--accent);outline-offset:1px}
.uitkomst{background:var(--bg-2);border:1px solid var(--rand);border-radius:14px;padding:22px}
.groot-getal b{display:block;font-family:ui-serif,Georgia,serif;font-size:38px;line-height:1.05;letter-spacing:-.02em}
.groot-getal span{font-size:13px;color:var(--zacht)}
.uitleg{list-style:none;padding:0;margin:16px 0;font-size:14.5px;color:var(--zacht)}
.uitleg li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--rand)}
.uitleg b{color:var(--tekst);font-variant-numeric:tabular-nums}

/* ---- nieuwsbrief ---- */
.brief-vak{background:var(--hero-1);border-top:1px solid var(--rand);border-bottom:1px solid var(--rand);
  padding:40px 0;margin-top:20px}
.brief{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center}
.brief h2{margin:0 0 6px;font-family:ui-serif,Georgia,serif;font-size:clamp(20px,2.4vw,26px);
  letter-spacing:-.02em;font-weight:600}
.brief p{margin:0;color:var(--zacht)}
.brief-form{display:flex;flex-wrap:wrap;gap:9px}
.brief-form input[type=email]{flex:1 1 220px;padding:12px 14px;border-radius:999px;border:1px solid var(--rand);
  background:var(--bg-2);color:var(--tekst);font:inherit}
.brief-form input[type=email]:focus{outline:2px solid var(--accent);outline-offset:1px}
.brief-form button{padding:12px 24px;border:0;border-radius:999px;background:var(--accent-diep);color:#fff;
  font:inherit;font-weight:600;cursor:pointer}
.brief-form button:hover{filter:brightness(1.08)}
.brief-form .klein{flex:1 1 100%;margin:0}

@media (max-width:760px){
  .reken{grid-template-columns:1fr}
  .velden{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brief{grid-template-columns:1fr}
}

/* gevulde knop leesbaar houden in de donkere modus */
:root[data-thema="donker"] .brief-form button{color:#12131a}

@media (max-width:430px){
  .merk-tekst em{display:none}
  .kpi{grid-template-columns:1fr 1fr}
}