/*
 * Energieplatform Vlaanderen — "Kabelmarkering", logo-groen, licht en donker
 * De kabelkleuren blijven betekenen wat ze betekenen: koraalrood = elektriciteit, zonnegeel = gas,
 * groenblauw = negatieve prijs. Het merk is het groen van het logo (#087f5b) met lime (#c5eb70) als accent.
 * Licht: wit op een zacht groenwit vlak, bosgroene tekst. Donker (data-theme="dark", gezet door js/thema.js):
 * het logo-zwartgroen #0e1a16 met lichte tekst. Alle kleuren zijn tokens in :root; JS-grafieken lezen ze via sefKleur().
 * Eén lettertype (Archivo, breedte-as): breed en zwaar voor koppen, normaal voor tekst.
 * Vormtaal: knoppen en chips zijn pillen, panelen ronden 28px af, kaarten 20px, velden 14px.
 */

@font-face {
  font-family: "Archivo SEF";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --lucht: #f3f7f2;
  --wolk: #ffffff;
  --inkt: #10261d;
  --gedempt: #4b6358;

  --merk: #087f5b;
  --merk-diep: #066b4d;
  --merk-vlak: #066b4d;
  --band: #066b4d;
  --merk-tint: #e0f1e8;
  --merk-zacht: #c3e3d3;
  --lime: #c5eb70;
  --blauw: #2f6be0;

  --stroom: #ee5a4b;
  --stroom-zacht: #f7b9b1;
  --stroom-tekst: #c2382a;
  --stroom-tint: #fde3df;
  --gas: #ffc43d;
  --gas-tint: #fff4d1;
  --gas-tekst: #6b4a00;
  --water: #0e7f74;
  --ok: #1f8a57;

  --lijn: rgba(16, 38, 29, .12);
  --lijn-sterk: rgba(16, 38, 29, .28);
  --rand-veld: #7d9488;
  --focus-ring: rgba(8, 127, 91, .24);
  --schaduw: 0 14px 34px -14px rgba(6, 107, 77, .38);
  --nav-h: 5rem;

  --r-pil: 999px;
  --r-paneel: 28px;
  --r-kaart: 20px;
  --r-veld: 14px;

  --bs-body-font-family: "Archivo SEF", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-color: var(--inkt);
  --bs-body-color-rgb: 16, 38, 29;
  --bs-body-bg: var(--lucht);
  --bs-body-line-height: 1.6;
  --bs-secondary-color: var(--gedempt);
  --bs-secondary-rgb: 75, 99, 88;
  --bs-primary-rgb: 8, 127, 91;
  --bs-success-rgb: 31, 138, 87;
  --bs-warning-rgb: 255, 196, 61;
  --bs-danger-rgb: 194, 56, 42;
  --bs-info-rgb: 8, 127, 91;
  --bs-border-color: var(--lijn);
  --bs-border-radius: 12px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: var(--r-kaart);
  --bs-link-color: var(--merk-diep);
  --bs-link-hover-color: var(--merk);
  --bs-link-color-rgb: 6, 107, 77;
  --bs-link-hover-color-rgb: 8, 127, 91;
  --bs-heading-color: var(--inkt);
}

/* Donker: het zwartgroen van het logo. --merk blijft knopgroen (witte tekst erop), --merk-diep wordt de lichte
   groene tekstkleur; --merk-vlak is de donkere hoverkleur van knoppen. */
:root[data-theme="dark"] {
  --lucht: #0e1a16;
  --wolk: #16251f;
  --inkt: #e8f4ee;
  --gedempt: #9db8ab;

  --merk: #0a8c64;
  --merk-diep: #86dcb9;
  --merk-vlak: #066b4d;
  --band: #0b3a2c;
  --merk-tint: #173a2e;
  --merk-zacht: #24533f;
  --blauw: #7aa6ff;

  --stroom: #f06a5c;
  --stroom-zacht: #7a3a35;
  --stroom-tekst: #ff9a8e;
  --stroom-tint: #3b1f1b;
  --gas-tint: #3a3112;
  --gas-tekst: #ffd877;
  --water: #3cc4b4;
  --ok: #4ccb8c;

  --lijn: rgba(232, 244, 238, .14);
  --lijn-sterk: rgba(232, 244, 238, .32);
  --rand-veld: #5d7a6d;
  --focus-ring: rgba(134, 220, 185, .3);
  --schaduw: 0 14px 34px -14px rgba(0, 0, 0, .7);

  --bs-body-color-rgb: 232, 244, 238;
  --bs-secondary-rgb: 157, 184, 171;
  --bs-link-color-rgb: 134, 220, 185;
  --bs-link-hover-color-rgb: 197, 235, 112;
  --bs-link-hover-color: var(--lime);
  --bs-emphasis-color: var(--inkt);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

body {
  background: var(--lucht);
  color: var(--inkt);
  font-family: var(--bs-body-font-family);
  font-optical-sizing: auto;
}

.sef-page { min-height: 100vh; display: flex; flex-direction: column; }
.sef-page > main, .sef-page > .sef-portaal { flex: 1 0 auto; }

/* ---------- typografie ---------- */
h1, .h1, h2, .h2, h3, .h3 {
  font-stretch: 108%;
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h4, .h4, h5, .h5, h6, .h6 {
  font-stretch: 100%;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}
h1, .h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2, .h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3, .h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
h4, .h4 { font-size: 1.3rem; }
h5, .h5 { font-size: 1.12rem; }
h6, .h6 { font-size: 1rem; }
.display-title, .display-5, .display-6 { font-weight: 780 !important; font-stretch: 108%; line-height: 1.08; letter-spacing: -.025em; font-size: clamp(1.9rem, 4vw, 2.9rem); }
.lead { font-size: 1.15rem; font-weight: 400; max-width: 62ch; }
.small, small { font-size: .875rem; }
.fw-bold, .fw-semibold { font-weight: 700 !important; }
p { text-wrap: pretty; }
.muted, .text-secondary { color: var(--gedempt) !important; }
.text-success { color: var(--ok) !important; }
.text-danger { color: var(--stroom-tekst) !important; }

a { text-underline-offset: .22em; text-decoration-thickness: 2px; text-decoration-color: var(--gas); }
a:hover { text-decoration-color: var(--merk); }
.link-sef {
  color: var(--merk-diep); font-weight: 700; text-decoration: underline;
  text-decoration-color: var(--gas); text-decoration-thickness: 3px; text-underline-offset: .2em;
}
.link-sef:hover { color: var(--merk); text-decoration-color: var(--merk); }
.text-sef { color: var(--merk-diep); }

:focus-visible { outline: 3px solid var(--merk-diep); outline-offset: 3px; border-radius: 8px; }
.donker :focus-visible, .proof-dark :focus-visible { outline-color: var(--lime); }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 2000; padding: .6rem 1.2rem;
  background: var(--gas); color: var(--inkt); font-weight: 700; border-radius: var(--r-pil); text-decoration: none;
}
.skip:focus { top: .75rem; }

/* Kleine kop boven een blok: zinsvorm met een afgerond streepje, geen hoofdletters. */
.eyebrow { display: flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 700; color: var(--gedempt); letter-spacing: 0; text-transform: none; }
.eyebrow::before { content: ""; flex: none; width: 1.3rem; height: 4px; border-radius: 2px; background: var(--merk); }
.eyebrow-light { color: var(--lime); }
.eyebrow-light::before { background: var(--lime); }

/* Energiedrager als kleurcode: rood = elektriciteit, geel = gas. */
.energie-punt { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .45rem; vertical-align: .05em; }
.energie-elek { background: var(--stroom); }
.energie-gas { background: var(--gas); box-shadow: 0 0 0 1px var(--lijn-sterk); }

/* ---------- gekleurd vlak (voorheen donker): diepblauwe band met witte tekst ---------- */
.donker, .proof-dark { background: var(--band); color: #fff; --bs-heading-color: #fff; }
.donker .text-secondary, .proof-dark .text-secondary, .text-light-soft { color: rgba(255, 255, 255, .85) !important; }
.donker .btn-sef, .proof-dark .btn-sef { background: var(--lime); border-color: var(--lime); color: #10261d; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-hover-color: #10261d; }
.donker a, .proof-dark a { text-decoration-color: var(--lime); }
.donker .link-sef, .proof-dark .link-sef { color: #fff; }

/* ---------- navigatie: wit, met de twee leidingen als afsluiting ---------- */
.navbar-sef {
  --bs-navbar-color: var(--inkt);
  --bs-navbar-hover-color: var(--merk-diep);
  --bs-navbar-active-color: var(--merk-diep);
  --bs-navbar-brand-color: var(--inkt);
  --bs-navbar-brand-hover-color: var(--inkt);
  --bs-dropdown-bg: var(--wolk);
  --bs-dropdown-color: var(--inkt);
  --bs-dropdown-border-color: var(--lijn);
  --bs-dropdown-link-color: var(--inkt);
  --bs-dropdown-link-hover-color: var(--merk-diep);
  --bs-dropdown-link-hover-bg: var(--merk-tint);
  --bs-dropdown-link-active-bg: var(--merk-tint);
  --bs-dropdown-link-active-color: var(--merk-diep);
  --bs-dropdown-divider-bg: var(--lijn);
  --bs-dropdown-border-radius: var(--r-kaart);
  --bs-dropdown-inner-border-radius: 14px;
  --bs-dropdown-padding-x: .4rem;
  --bs-dropdown-padding-y: .4rem;
  --bs-navbar-toggler-border-color: var(--lijn-sterk);
  background: var(--wolk);
  color: var(--inkt);
  min-height: var(--nav-h);
  padding-bottom: calc(.5rem + 6px);
  border: 0;
  position: sticky;
}
.navbar-sef::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: linear-gradient(var(--stroom) 0 2px, transparent 2px 3px, var(--gas) 3px 6px);
}
.navbar-sef .dropdown-menu { box-shadow: var(--schaduw); border-width: 1px; }
.navbar-sef .nav-link { font-weight: 600; padding: .45rem 1rem; border-radius: var(--r-pil); }
.navbar-sef .nav-link:hover { background: var(--merk-tint); }
.navbar-sef .nav-link.active, .navbar-sef .nav-link.show { background: var(--merk-tint); color: var(--merk-diep); font-weight: 700; }
.navbar-sef .dropdown-item { padding: .5rem 1rem; border-radius: 12px; font-weight: 500; }
.navbar-sef .dropdown-item.active { font-weight: 700; }
.navbar-sef .btn { white-space: nowrap; }
.navbar-sef .btn-link.nav-link { text-decoration: none; }

.navbar-brand img, .footer-merk img { display: block; height: 2.6rem; width: auto; }
.logo-donker { display: none !important; }
:root[data-theme="dark"] .logo-donker { display: block !important; }
:root[data-theme="dark"] .logo-licht { display: none !important; }

/* Themaknop: maan in licht, zon in donker. */
.thema-knop { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; padding: 0 !important; font-size: 1.1rem; }
.thema-knop .bi-sun-fill { display: none; }
:root[data-theme="dark"] .thema-knop .bi-sun-fill { display: inline-block; }
:root[data-theme="dark"] .thema-knop .bi-moon-stars-fill { display: none; }
.footer-merk img { height: 2.4rem; }

/* ---------- knoppen: zachte pillen ---------- */
.btn { font-weight: 700; border-radius: var(--r-pil); letter-spacing: .005em; border-width: 2px; }
.btn-lg { padding: .8rem 1.7rem; font-size: 1.05rem; }
.btn-sef {
  background: var(--merk); border-color: var(--merk); color: #fff;
  --bs-btn-hover-bg: var(--merk-vlak);
  --bs-btn-hover-border-color: var(--merk-vlak);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--merk-vlak);
  --bs-btn-active-border-color: var(--merk-vlak);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--merk);
  --bs-btn-disabled-border-color: var(--merk);
  --bs-btn-disabled-color: #fff;
}
.btn-sef:hover, .btn-sef:focus-visible { background: var(--merk-vlak); border-color: var(--merk-vlak); color: #fff; box-shadow: var(--schaduw); }
.btn-light, .btn-outline-secondary, .btn-outline-dark {
  --bs-btn-color: var(--merk-diep);
  --bs-btn-bg: var(--merk-tint);
  --bs-btn-border-color: var(--merk-tint);
  --bs-btn-hover-color: var(--merk-diep);
  --bs-btn-hover-bg: var(--merk-zacht);
  --bs-btn-hover-border-color: var(--merk-zacht);
  --bs-btn-active-color: var(--merk-diep);
  --bs-btn-active-bg: var(--merk-zacht);
  --bs-btn-active-border-color: var(--merk-zacht);
  --bs-btn-disabled-color: var(--gedempt);
  --bs-btn-disabled-bg: var(--merk-tint);
  --bs-btn-disabled-border-color: var(--merk-tint);
}
.btn.border { border-color: var(--merk-tint) !important; }
.donker .btn-light, .proof-dark .btn-light {
  --bs-btn-color: #fff; --bs-btn-bg: rgba(255, 255, 255, .14); --bs-btn-border-color: rgba(255, 255, 255, .55);
  --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--band); --bs-btn-hover-border-color: #fff;
}
.btn-link { color: var(--merk-diep); text-decoration-color: var(--gas); }
.btn-dag, .btn-check + .btn-outline-secondary { border: 2px solid var(--merk-tint); background: var(--merk-tint); color: var(--merk-diep); }
.btn-dag.active, .btn-dag:hover, .btn-check:checked + .btn-outline-secondary { background: var(--merk); border-color: var(--merk); color: #fff; }
.btn-dag:disabled { border-color: var(--lijn); color: var(--gedempt); background: transparent; }
.btn-close:focus { box-shadow: none; }

.nav-pills { --bs-nav-pills-link-active-bg: var(--merk); --bs-nav-pills-border-radius: var(--r-pil); }
.nav-pills .nav-link { color: var(--merk-diep); background: var(--merk-tint); border: 2px solid var(--merk-tint); font-weight: 700; padding: .45rem 1.15rem; }
.nav-pills .nav-link:hover { background: var(--merk-zacht); border-color: var(--merk-zacht); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--merk); color: #fff; border-color: var(--merk); }

/* ---------- vlakken ---------- */
.soft-card {
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  background: var(--wolk);
  box-shadow: none;
}
.bg-white { background-color: var(--wolk) !important; }
.bg-light, .text-bg-light { background-color: var(--merk-tint) !important; color: var(--inkt) !important; }
.text-bg-dark { background-color: var(--merk) !important; color: #fff !important; }
.bg-mint { background: var(--wolk); }
.border, .border-top, .border-bottom { border-color: var(--lijn) !important; }
.card { --bs-card-bg: var(--wolk); --bs-card-border-color: var(--lijn); --bs-card-border-radius: var(--r-kaart); }
.section-pad { padding: 5.5rem 0; }
.section-pad.pb-0 { padding-bottom: 2rem !important; }
.cta-card { border-radius: var(--r-paneel); background: var(--gas-tint); border-color: rgba(255, 196, 61, .55); }

/* Bouwsteen: kaart met een ronde pictogramknop. */
.module-card { border: 1px solid var(--lijn); border-radius: var(--r-kaart); background: var(--wolk); padding: 1.5rem; }
.module-card h3 { margin-top: .2rem; }
.module-icon {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  font-size: 1.4rem; line-height: 1; margin-bottom: .8rem; color: var(--merk-diep); background: var(--merk-tint);
}
.module-icon i { display: inline-block; }

.stat-value, .metric-value, .sef-kpi-waarde {
  font-stretch: 108%; font-weight: 750; color: var(--inkt); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.stat-value { font-size: 1.75rem; }
.sef-kpi-waarde { font-size: 1.6rem; }

/* ---------- voorpagina: hero met de dagstrook als kaart ---------- */
.hero-pitch { background: var(--lucht); padding: 4rem 0 1.5rem; }
.hero-pitch .display-title {
  font-size: clamp(2.3rem, 5.2vw, 4.3rem); font-stretch: 112%; font-weight: 800 !important; line-height: 1.04; letter-spacing: -.035em;
  margin-bottom: 1.5rem; max-width: 15ch;
}
.hero-pitch .lead { font-size: 1.2rem; margin-bottom: 2rem; }

.dagstrook { background: var(--wolk); border: 1px solid var(--lijn); border-radius: var(--r-paneel); padding: 1.3rem 1.5rem 1.1rem; box-shadow: var(--schaduw); }
.dagstrook-nu { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.dagstrook-prijs { font-stretch: 112%; font-weight: 800; font-size: clamp(2.3rem, 4vw, 3rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dagstrook-prijs .eenheid { font-stretch: 100%; font-weight: 600; font-size: 1rem; letter-spacing: 0; color: var(--gedempt); margin-left: .4rem; }
.dagstrook-titel { font-size: 1.05rem; font-weight: 700; font-stretch: 100%; letter-spacing: 0; margin: 0; }
.badge-live {
  display: inline-flex; align-items: center; gap: .45rem; width: fit-content; padding: .25rem .8rem; border-radius: var(--r-pil);
  font-size: .8rem; font-weight: 700; color: var(--merk-diep); background: var(--merk-tint);
}
.badge-live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--stroom); }

/* 96 kwartieren van vandaag; hoogte en positie zet sef-pitch.js via CSSOM (CSP). */
.strook { display: flex; gap: 2px; height: 5.6rem; position: relative; }
.strook-kol { position: relative; flex: 1 1 0; min-width: 0; }
.strook-kol i { position: absolute; left: 0; right: 0; background: var(--stroom-zacht); border-radius: 3px 3px 0 0; }
.strook-kol i.duur { background: var(--stroom); }
.strook-kol i.negatief { background: var(--water); border-radius: 0 0 3px 3px; }
.strook-kol i.nu { background: var(--inkt); box-shadow: 0 0 0 2px var(--wolk), 0 0 0 4px var(--inkt); z-index: 1; }
.strook-nul { position: absolute; left: 0; right: 0; height: 1px; background: var(--lijn-sterk); pointer-events: none; }
.strook-as { display: flex; justify-content: space-between; margin-top: .5rem; font-size: .8rem; color: var(--gedempt); font-variant-numeric: tabular-nums; }
.strook-leeg { align-self: center; color: var(--gedempt); font-size: .95rem; }
.strook-legende { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: .6rem 0 .7rem; padding: 0; list-style: none; font-size: .78rem; color: var(--gedempt); }
.dagstrook-historiek { border-top: 1px solid var(--lijn); padding-top: .7rem; margin-bottom: .7rem; }
.historiek-mini { position: relative; height: 3.2rem; margin-bottom: .3rem; }
.strook-legende i { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; margin-right: .4rem; vertical-align: -.08rem; }
.strook-legende .l-duur { background: var(--stroom); }
.strook-legende .l-goedkoop { background: var(--stroom-zacht); }
.strook-legende .l-neg { background: var(--water); }
.strook-legende .l-nu { background: var(--inkt); }

/* Simulator-paneel op de voorpagina: zonnig vlak, de stappen als afgeronde rijen. */
.paneel-zon { background: var(--gas-tint); border-radius: var(--r-paneel); }

/* ---------- bewijs, stromen, lijstjes ---------- */
.proof-dark { border-block: 0; }
.proof-stat { border-left: 5px solid var(--lime); border-radius: 3px; padding-left: 1.1rem; height: 100%; }
.proof-number { font-stretch: 112%; font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--lime); line-height: .95; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.proof-label { color: rgba(255, 255, 255, .9); font-size: .92rem; margin-top: .6rem; max-width: 24ch; }
.dark-chip {
  display: flex; align-items: center; gap: .6rem; height: 100%; padding: .8rem 1.1rem; border-radius: var(--r-kaart);
  background: rgba(255, 255, 255, .12); border: 0; color: #fff; font-size: .92rem;
}
.dark-chip i { color: var(--lime); font-size: 1.1rem; }

.roadmap-line { position: relative; padding-left: 1.8rem; border-left: 3px solid var(--merk-zacht); border-radius: 2px; }
.roadmap-step { position: relative; padding: 0 0 2rem; }
.roadmap-step:last-child { padding-bottom: 0; }
.roadmap-step::before {
  content: ""; position: absolute; top: .3rem; left: -2.3rem; width: 15px; height: 15px;
  border: 3px solid var(--lucht); border-radius: 50%; background: var(--merk); box-shadow: 0 0 0 1px var(--merk);
}
.roadmap-step.future::before { background: var(--lucht); }
.roadmap-step .badge { font-weight: 700; }

.team-avatar {
  flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: var(--merk-tint); color: var(--merk-diep); font-stretch: 112%; font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em;
}

.cta-lead { max-width: 640px; }

.flow-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.flow-step {
  display: flex; align-items: center; gap: .5rem; padding: .6rem 1.2rem; border-radius: var(--r-pil);
  background: var(--wolk); border: 1px solid var(--lijn); color: var(--inkt); font-weight: 700; font-size: .95rem;
}
.flow-step i { color: var(--merk); }
.flow-arrow { color: var(--merk-zacht); }
@media (max-width: 767.98px) { .flow-arrow { display: none; } }

.chip-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { padding: .3rem .9rem; border-radius: var(--r-pil); font-size: .88rem; background: var(--merk-tint); border: 0; color: var(--merk-diep); font-weight: 600; }
.chip i { color: var(--merk-diep); }

.invoice > div { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px dashed var(--lijn-sterk); font-size: .95rem; }
.invoice > div span:last-child { font-weight: 800; }
.invoice .invoice-total { border-bottom: 0; border-top: 2px solid var(--merk); margin-top: .3rem; font-weight: 800; }

.scenario-list { list-style: none; counter-reset: stap; padding: 0; margin: 0; }
.scenario-list li {
  counter-increment: stap; position: relative; padding: .9rem 1.1rem .9rem 4rem; margin-bottom: .6rem;
  background: var(--wolk); border: 0; border-radius: var(--r-kaart); display: flex; flex-direction: column;
}
.scenario-list li::before {
  content: counter(stap); position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--merk); color: #fff; font-stretch: 108%; font-weight: 800; font-size: 1rem;
}
.scenario-list li span { color: var(--gedempt); font-size: .88rem; }
.scenario-list li strong, .scenario-list li span { display: block; }

.cycle { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: .6rem; }
.cycle span {
  padding: .5rem 1.3rem; border-radius: var(--r-pil); border: 2px solid rgba(255, 255, 255, .55);
  font-stretch: 108%; font-weight: 800; font-size: clamp(1.2rem, 2.6vw, 1.7rem); line-height: 1.1; letter-spacing: -.02em;
}
.cycle i { color: var(--lime); }
.cycle .cycle-accent { background: var(--lime); color: #10261d; border-color: var(--lime); }

.principle { display: flex; gap: 1rem; height: 100%; }
.principle > i {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--merk-tint); color: var(--merk-diep); font-size: 1.2rem;
}
.principle p { color: var(--gedempt); font-size: .92rem; margin: 0; }

.legal-list { padding-left: 1.1rem; color: var(--gedempt); font-size: .9rem; }
.legal-list li { margin-bottom: .6rem; }
.license-text { white-space: pre-wrap; font-size: .8rem; }

/* ---------- grafieken en tabellen ---------- */
#historiek { scroll-margin-top: 5rem; }
.chart-wrap { position: relative; height: 340px; }
.chart-wrap-klein { height: 230px; }
.chart-wrap-laag { position: relative; height: 260px; }
.sef-grafiek-klein { height: 200px; }
@media (max-width: 575.98px) { .chart-wrap { height: 260px; } .chart-wrap-klein { height: 210px; } }

#dagKeuze { flex-wrap: wrap; gap: .35rem; }
#dagKeuze .btn, #blokKeuze .btn { border-radius: var(--r-pil) !important; }
#blokKeuze { gap: .35rem; }
.kwartier-tabel { font-variant-numeric: tabular-nums; }
.kwartier-tabel td, .kwartier-tabel th { text-align: right; padding: .3rem .5rem; }
.kwartier-tabel th[scope="row"], .kwartier-tabel thead th:first-child { text-align: left; color: var(--gedempt); font-weight: 700; }
.kwartier-tabel .cel-duur { color: var(--stroom-tekst); font-weight: 600; }
.kwartier-tabel .cel-negatief { color: var(--water); font-weight: 800; }
.kwartier-tabel .cel-blok { background: var(--gas-tint); }
.kwartier-tabel .cel-nu { outline: 2px solid var(--merk); outline-offset: -2px; border-radius: 6px; font-weight: 800; }
.legende-blok { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: -.1rem; }
.legende-blok.blok { background: var(--gas); }
.legende-blok.negatief { background: var(--water); }
.legende-blok.duur { background: var(--stroom); }
.legende-blok.nu { background: var(--inkt); }

.status-bol { width: .9rem; height: .9rem; border-radius: 50%; display: inline-block; flex: none; }
.status-groen { background: #2fa36b; }
.status-oranje { background: var(--gas); }
.status-rood { background: #e0574a; }
.status-grijs { background: #a9b7c8; }
.status-klein { width: .6rem; height: .6rem; }

.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--lijn);
  --bs-table-hover-bg: rgba(255, 196, 61, .18);
  --bs-table-striped-bg: rgba(8, 127, 91, .05);
}
.table > thead { border-bottom: 2px solid var(--merk-zacht); }
.table > thead > tr > th { font-weight: 700; color: var(--inkt); border-bottom-width: 0; }
.table-primary { --bs-table-bg: var(--gas-tint); --bs-table-color: var(--inkt); }
.contract-tabel > :not(caption) > * > * { padding: .8rem .75rem; }
.contract-tabel thead th { font-size: .85rem; color: var(--gedempt); font-weight: 700; text-transform: none; letter-spacing: 0; }
.contract-tabel .col-rang { width: 3rem; }
.contract-naam { padding: 0; border: 0; background: none; font-weight: 700; color: var(--merk-diep); text-align: left; text-decoration: underline; text-decoration-color: var(--gas); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.contract-naam:hover { text-decoration-color: var(--merk); }
.contract-rij { cursor: pointer; }
.contract-info > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed var(--lijn-sterk); }
.contract-info dt { font-weight: 400; color: var(--gedempt); }
.contract-info dd { margin: 0; text-align: right; font-weight: 600; }
/* Contractmodal compact: minder lucht, vanaf sm twee kolommen. */
#contractModal .contract-info > div { padding: .25rem 0; }
@media (min-width: 576px) { #contractModal .contract-info { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }

.top3-rij {
  display: flex; align-items: center; gap: .75rem; width: 100%; padding: .65rem .6rem; border: 0; border-radius: 16px;
  background: transparent; color: inherit; text-align: left;
}
.top3-rij:hover, .top3-rij:focus-visible { background: var(--merk-tint); }
.top3-rang {
  flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  font-stretch: 108%; font-weight: 800; font-size: 1rem; background: var(--merk-tint); color: var(--merk-diep);
}
.top3-rij:hover .top3-rang { background: var(--wolk); }
.top3-rang-1 { background: var(--gas) !important; color: var(--inkt); }
.top3-naam, .top3-prijs { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.top3-naam { flex: 1 1 auto; }
.top3-prijs { flex: 0 0 auto; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.top3-naam small { color: var(--gedempt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top3-prijs small { font-size: .78rem; }

/* ---------- formulieren, meldingen, modals ---------- */
.form-control, .form-select {
  color: var(--inkt); background-color: var(--wolk); border: 1.5px solid var(--rand-veld); border-radius: var(--r-veld);
}
.form-control:not(.form-control-sm):not(.form-control-lg) { min-height: 2.75rem; }
.form-control:focus, .form-select:focus {
  color: var(--inkt); background-color: var(--wolk); border-color: var(--merk); box-shadow: 0 0 0 4px var(--focus-ring); outline: 0;
}
.form-control::file-selector-button { background: var(--merk-tint); color: var(--merk-diep); font-weight: 700; border: 0; border-radius: var(--r-pil); padding: .3rem 1rem; margin: -.2rem .8rem -.2rem -.5rem; }
.form-label { font-weight: 700; margin-bottom: .3rem; }
.form-text { color: var(--gedempt); }
.form-check-input { border: 1.5px solid var(--rand-veld); }
.form-check-input:checked { background-color: var(--merk); border-color: var(--merk); }
.form-check-input:focus { border-color: var(--merk); box-shadow: 0 0 0 4px var(--focus-ring); }
.form-range::-webkit-slider-thumb { background: var(--merk); }
.form-range::-moz-range-thumb { background: var(--merk); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--focus-ring); }
.input-group-text { background: var(--merk-tint); border: 1.5px solid var(--rand-veld); color: var(--inkt); }
.container-smal { max-width: 28rem; }
.container-middel { max-width: 44rem; }
.container-breed { max-width: 72rem; }  /* tabellen op een groot scherm, bv. de API-documentatie */
details > summary { cursor: pointer; }

.alert { border-radius: 16px; border-width: 1px; }
.alert-danger { --bs-alert-bg: var(--stroom-tint); --bs-alert-border-color: #f6b9b2; --bs-alert-color: #6f1a12; }
.alert-warning { --bs-alert-bg: var(--gas-tint); --bs-alert-border-color: rgba(255, 196, 61, .55); --bs-alert-color: #4d3a00; }
.alert-success { --bs-alert-bg: #dff3e8; --bs-alert-border-color: #b2dfc6; --bs-alert-color: #14472e; }
.alert-info { --bs-alert-bg: var(--merk-tint); --bs-alert-border-color: var(--merk-zacht); --bs-alert-color: #0b4a37; }
.badge { border-radius: var(--r-pil); font-weight: 700; letter-spacing: 0; padding-inline: .7em; }
.text-bg-warning { color: var(--inkt) !important; }

.modal { --bs-modal-border-radius: var(--r-paneel); --bs-modal-border-color: var(--lijn); --bs-modal-bg: var(--wolk); --bs-modal-header-border-color: var(--lijn); --bs-modal-inner-border-radius: calc(var(--r-paneel) - 1px); }
.modal-content { box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .4); }
.modal-header { border-bottom-width: 1px; padding: 1.25rem 1.5rem; }
.modal-body { padding: 1.25rem 1.5rem; }
.modal-footer { border-top-color: var(--lijn); padding: 1rem 1.5rem; }
.accordion {
  --bs-accordion-border-color: var(--lijn); --bs-accordion-border-radius: var(--r-kaart); --bs-accordion-inner-border-radius: 19px;
  --bs-accordion-active-bg: var(--merk-tint); --bs-accordion-active-color: var(--merk-diep);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 4px var(--focus-ring); --bs-accordion-bg: var(--wolk);
}
.breadcrumb { --bs-breadcrumb-divider-color: var(--gedempt); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--lijn); --bs-list-group-border-radius: var(--r-kaart); }

/* ---------- mobiel: lange reeksen vegen ---------- */
.swipe-hint { display: none; }
@media (max-width: 991.98px) {
  .section-pad { padding: 4rem 0; }
  .hero-pitch { padding: 3rem 0 1rem; }
}
@media (max-width: 767.98px) {
  .swipe-row {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: .75rem; scrollbar-width: thin;
  }
  .swipe-row > [class*="col-"] { flex: 0 0 82%; max-width: 82%; scroll-snap-align: start; }
  .swipe-hint { display: block; color: var(--gedempt); font-size: .85rem; margin-bottom: .75rem; }

  .flow-strip { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .flow-strip::-webkit-scrollbar { display: none; }
  .flow-step { flex: 0 0 auto; }
  .flow-arrow { display: inline; flex: 0 0 auto; }

  .cycle i { display: none; }
  .scenario-list li { padding-left: 3.6rem; }
  .strook { height: 4.4rem; gap: 1px; }
  .historiek-mini { height: 2.6rem; }
  .strook-legende { margin: .4rem 0 .5rem; gap: .2rem 1rem; }
}
@media (max-width: 575.98px) {
  .navbar-brand img { height: 2.1rem; }
  .section-pad { padding: 3.25rem 0; }
  .hero-pitch { padding-top: 2.25rem; }
  .dagstrook { padding: 1.1rem 1rem 1rem; }
}
/* Tussen lg en xl is de navigatie krap: logo iets kleiner. */
@media (min-width: 992px) and (max-width: 1199.98px) { .navbar-brand img { height: 2.2rem; } }

/* ---------- simulator ---------- */
.sef-stand { display: inline-flex; padding: 4px; border-radius: var(--r-pil); background: var(--merk-tint); border: 0; }
.sef-stand-knop { padding: .4rem 1.2rem; border-radius: var(--r-pil); cursor: pointer; color: var(--merk-diep); font-weight: 700; font-size: .92rem; }
.btn-check:checked + .sef-stand-knop { background: var(--merk); color: #fff; }
.btn-check:focus-visible + .sef-stand-knop { outline: 3px solid var(--merk-diep); outline-offset: 3px; }
.sef-gevorderd { border-left: 4px solid var(--gas); border-radius: 2px; padding-left: 1rem; }

.sef-range { --vulling: 0%; height: 1.4rem; background: transparent; position: relative; z-index: 2; }
.sef-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--merk) var(--vulling), var(--merk-zacht) var(--vulling)); }
.sef-range::-moz-range-track { height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--merk) var(--vulling), var(--merk-zacht) var(--vulling)); }
.sef-range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; background: var(--gas); border: 3px solid var(--merk); border-radius: 50%; }
.sef-range::-moz-range-thumb { width: 14px; height: 14px; background: var(--gas); border: 3px solid var(--merk); border-radius: 50%; }
.sef-range:disabled::-webkit-slider-thumb { border-color: var(--lijn-sterk); background: var(--wolk); }
.sef-range:disabled::-moz-range-thumb { border-color: var(--lijn-sterk); background: var(--wolk); }
.sef-ruitjes { position: absolute; left: 8px; right: 8px; top: 50%; height: 0; z-index: 3; pointer-events: none; }
.sef-ruit { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; padding: 0; border-radius: 50%;
  background: var(--wolk); border: 2px solid var(--merk-zacht); pointer-events: auto; cursor: pointer; }
.sef-ruit:nth-child(1) { left: 0; }
.sef-ruit:nth-child(2) { left: 25%; }
.sef-ruit:nth-child(3) { left: 50%; }
.sef-ruit:nth-child(4) { left: 75%; }
.sef-ruit:nth-child(5) { left: 100%; }
.sef-ruit.bereikt { border-color: var(--merk); background: var(--merk); }
.sef-waarde { min-width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700;
  padding: .2rem .8rem; border-radius: var(--r-pil); background: var(--merk-tint); border: 0; color: var(--merk-diep); }
.sef-schuif.is-uit .sef-waarde { color: var(--gedempt); font-weight: 400; }
.sef-schuif.is-uit .sef-ruit { opacity: .4; }

.sef-werkpaneel { max-width: 1760px; padding-inline: clamp(1rem, 3vw, 2.5rem); }
.sef-kaart-kop { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--lijn); }
.sef-kaart-lijf { padding: 1rem 1.1rem; min-width: 0; }
.sef-kaart-lijf[hidden] { display: none; }
.sef-bouwsteen.aan { border-color: var(--merk); box-shadow: 0 0 0 3px var(--merk-tint); }
.sef-bouwsteen:not(.aan) .sef-kaart-kop { border-bottom-color: transparent; }
.sef-steen-icoon, .sef-kpi-icoon { display: grid; place-items: center; flex: none; border-radius: 50%; border: 0; background: var(--merk-tint); color: var(--merk-diep); }
.sef-steen-icoon { width: 34px; height: 34px; }
.sef-kpi-icoon { width: 42px; height: 42px; font-size: 1.2rem; }
.sef-badge-binnenkort { background: var(--gas-tint); color: var(--gas-tekst); border: 1px solid rgba(255, 196, 61, .55); font-weight: 700; }
.sef-keten { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.sef-schakel { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border-radius: var(--r-pil); border: 1px dashed var(--lijn-sterk); color: var(--gedempt); font-size: .85rem; }
.sef-schakel.aan { border: 1px solid var(--merk); background: var(--merk); color: #fff; font-weight: 700; }
.sef-pijl { color: var(--lijn-sterk); }
@media (min-width: 992px) { .sef-plakkend { position: sticky; top: calc(var(--nav-h) + 1.25rem); } }
.sef-naam:focus { box-shadow: none; }
.sef-lijst-item { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid var(--lijn); color: inherit; text-decoration: none; }
.sef-lijst-item:last-child { border-bottom: 0; }
a.sef-lijst-item:hover .fw-semibold { text-decoration: underline; text-decoration-color: var(--gas); text-decoration-thickness: 2px; }
.sef-community { background: var(--gas-tint); border: 1px solid rgba(255, 196, 61, .55); border-radius: var(--r-paneel); }

/* ---------- wiki ---------- */
.wiki-hero { background: var(--wolk); border-bottom: 1px solid var(--lijn); }
.wiki-bliksem { font-size: 4.5rem; color: var(--stroom); display: inline-block; }
.wiki-menu { position: sticky; top: calc(var(--nav-h) + 1.25rem); }
.wiki-menu .nav-link { color: var(--inkt); border-radius: var(--r-pil); padding: .45rem 1rem; font-size: .95rem; }
.wiki-menu .nav-link:hover { background: var(--merk-tint); }
.wiki-menu .nav-link.active { background: var(--merk-tint); color: var(--merk-diep); font-weight: 700; }
.wiki-menu-kop { font-size: .85rem; font-weight: 700; color: var(--gedempt); margin: 1.1rem 1rem .3rem; text-transform: none; letter-spacing: 0; }
.wiki-menu-kop:first-child { margin-top: 0; }
.wiki-menu-groep > summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; border-radius: var(--r-pil); padding: .3rem 1rem; margin: .5rem 0 .2rem; }
.wiki-menu-groep > summary::-webkit-details-marker { display: none; }
.wiki-menu-groep > summary::after { content: "\F282"; font-family: bootstrap-icons; font-size: .8rem; transition: transform .2s; }
.wiki-menu-groep[open] > summary::after { transform: rotate(180deg); }
.wiki-menu-groep > summary:hover { background: var(--merk-tint); color: var(--merk-diep); }
.wiki-menu-groep > summary:focus-visible { outline: 3px solid var(--merk-diep); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .wiki-menu-groep > summary::after { transition: none; } }
.wiki-tekst h2 { font-size: 1.8rem; margin: 2.6rem 0 1rem; }
.wiki-tekst p, .wiki-tekst li { line-height: 1.7; max-width: 70ch; }
.wiki-formule {
  background: var(--wolk); border: 1px solid var(--lijn); border-left: 5px solid var(--merk); border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88rem; white-space: pre-wrap; color: var(--inkt);
}
.wiki-let-op { background: var(--gas-tint); border: 1px solid rgba(255, 196, 61, .55); border-radius: 16px; padding: .9rem 1.1rem; margin-bottom: 1rem; }
.wiki-stap { display: flex; gap: 1rem; align-items: flex-start; }
.wiki-stap-nr {
  flex: 0 0 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--merk); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-stretch: 108%; font-size: 1.05rem;
}
.wiki-balk { display: flex; height: 2.8rem; border-radius: var(--r-pil); overflow: hidden; background: var(--merk-tint); }
.wiki-balk > span { flex: 1; transition: width 1.1s cubic-bezier(.2, .8, .2, 1); display: grid; place-items: center;
  color: #fff; font-size: .82rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.wiki-js .wiki-balk > span { flex: none; width: 0; }
.wiki-kleur-groen { background: var(--ok); }
.wiki-kleur-goud { background: var(--gas); color: var(--inkt) !important; }
.wiki-kleur-blauw { background: var(--blauw); }
.wiki-kleur-rood { background: var(--stroom-tekst); }
.wiki-kleur-grijs { background: #7a8ea6; }
.wiki-tekst .form-range::-webkit-slider-thumb { background: var(--merk); }
.wiki-tekst .form-range::-moz-range-thumb { background: var(--merk); }
.wiki-c1026-rij { cursor: pointer; }
.wiki-c1026-rij:focus-visible { outline: 3px solid var(--merk-diep); outline-offset: -3px; }
.wiki-c1026-rij[aria-expanded="true"] > td { border-bottom-color: transparent; }
.wiki-c1026-detail > td { background: var(--merk-tint); }
.wiki-kaart { border-radius: var(--r-kaart); }
.wiki-kaart:hover { border-color: var(--merk); box-shadow: var(--schaduw); }
@media (prefers-reduced-motion: reduce) { .wiki-balk > span { transition: none; } }
/* Tijdlijn (wiki energiegeschiedenis): verticale lijn met een punt per gebeurtenis, kleur per soort. */
.wiki-tijdlijn { list-style: none; padding: 0 0 0 1.6rem; margin: 0 0 1.5rem; border-left: 3px solid var(--lijn-sterk); }
.wiki-tijdlijn > li { position: relative; padding: 0 0 1.4rem .4rem; }
.wiki-tijdlijn > li::before { content: ""; position: absolute; left: -2.35rem; top: .35rem; width: 1.1rem; height: 1.1rem;
  border-radius: 50%; background: var(--merk); border: 3px solid var(--wolk); }
.wiki-tijdlijn > li.tl-jaar::before { display: none; }
.wiki-tijdlijn > li.tl-gas::before { background: var(--gas); }
.wiki-tijdlijn > li.tl-stroom::before { background: var(--stroom); }
.wiki-tijdlijn > li.tl-beleid::before { background: var(--gedempt); }
.energie-punt.tl-beleid-punt { background: var(--gedempt); }
.wiki-tijdlijn-datum { font-weight: 800; font-stretch: 108%; color: var(--merk-diep); }
.wiki-tijdlijn-jaar { font-size: 1.6rem; font-weight: 800; font-stretch: 108%; margin: 1.2rem 0 .6rem -1.6rem; }

/* ---------- voet: lichtblauw, met dezelfde twee leidingen bovenaan ---------- */
.sef-page > main { padding-bottom: 4rem; }
.sef-page > main:has(> section.bg-mint:last-of-type),
.sef-page > main:has(> section.proof-dark:last-of-type) { padding-bottom: 0; }
.footer-sef { background: var(--merk-tint); color: var(--inkt); font-size: .92rem; padding-top: 3.5rem !important; border-top: 0 !important; position: relative; }
.footer-sef::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(var(--stroom) 0 2px, transparent 2px 3px, var(--gas) 3px 6px);
}
.footer-sef a { color: var(--inkt); text-decoration: none; }
.footer-sef a:hover { color: var(--merk-diep); text-decoration: underline; text-decoration-color: var(--gas); text-decoration-thickness: 2px; }
.footer-sef .border-top { border-color: var(--merk-zacht) !important; }
.footer-merk { color: var(--inkt) !important; }
.footer-kop { font-size: 1.2rem; font-stretch: 108%; font-weight: 750; color: var(--inkt); margin-bottom: .75rem; }
.footer-kop a { color: inherit; }
.footer-rubriek { font-size: .82rem; font-weight: 700; color: var(--merk-diep); margin: .6rem 0 .25rem; }
.footer-groep > summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; margin: .35rem 0; padding: .1rem 0; }
.footer-groep > summary::-webkit-details-marker { display: none; }
.footer-groep > summary::after { content: "\F282"; font-family: bootstrap-icons; font-size: .75rem; transition: transform .2s; }
.footer-groep[open] > summary::after { transform: rotate(180deg); }
.footer-groep > summary:hover { text-decoration: underline; text-decoration-color: var(--gas); text-decoration-thickness: 2px; }
.footer-groep > summary:focus-visible { outline: 3px solid var(--merk-diep); outline-offset: 2px; }
.footer-groep .footer-lijst { margin-bottom: .5rem; }
@media (prefers-reduced-motion: reduce) { .footer-groep > summary::after { transition: none; } }
.footer-lijst li { margin-bottom: .35rem; }

/* ---------- netbeheerders (identiteitskleur per netbeheerder blijft) ---------- */
.nb-FA { --nb: #2a78d6; }
.nb-FHV { --nb: #eb6834; }
.nb-FI { --nb: #1baf7a; }
.nb-FK { --nb: #e87ba4; }
.nb-FL { --nb: #008300; }
.nb-FMV { --nb: #eda100; }
.nb-FW { --nb: #e34948; }
.nb-FZD { --nb: #4a3aa7; }
.nb-geen, .nb-ENEXIS { --nb: var(--lijn-sterk); }
.nb-kaart { display: block; width: 100%; height: auto; }
.nb-kaart .gem { fill: var(--nb); stroke: var(--wolk); stroke-width: .6; transition: opacity .15s; cursor: pointer; }
.nb-kaart .gem.gedimd { opacity: .22; }
.nb-stip { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: -.1rem; background: var(--nb); }
.nb-info { min-height: 3.2rem; }
.nb-legende li { padding: .2rem 0; border-bottom: 1px solid var(--lijn); }

/* ---------- Mijn SEF: zijbalk links, licht ---------- */
.sef-portaal { display: flex; align-items: flex-start; }
.sef-portaal-werk { flex: 1 1 auto; min-width: 0; }
.sef-zijbalk {
  flex: 0 0 248px; position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow-y: auto;
  background: var(--wolk); color: var(--inkt); padding: .5rem .75rem 1.5rem; border-right: 1px solid var(--lijn);
}
.sef-zijbalk-kop { font-size: .88rem; font-weight: 700; color: var(--gedempt); text-transform: none; letter-spacing: 0; padding: 1.2rem .9rem .35rem; }
.sef-zijbalk a {
  display: flex; align-items: center; gap: .7rem; color: var(--inkt); text-decoration: none;
  padding: .55rem .9rem; border-radius: var(--r-pil); font-weight: 500;
}
.sef-zijbalk a:hover, .sef-zijbalk a:focus-visible { background: var(--merk-tint); color: var(--merk-diep); }
.sef-zijbalk a.actief { background: var(--merk-tint); color: var(--merk-diep); font-weight: 700; }
@media (max-width: 991.98px) {
  .sef-portaal { display: block; }
  .sef-zijbalk {
    position: static; height: auto; display: flex; gap: .25rem; overflow-x: auto; padding: .5rem .75rem; white-space: nowrap;
    border-right: 0; border-bottom: 1px solid var(--lijn);
  }
  .sef-zijbalk-kop { display: none; }
  .sef-zijbalk a { padding: .45rem .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- goedkoopste contract uitgelicht (delen/goedkoopste.php) ---------- */
.goedkoopste-kaart {
  background: linear-gradient(135deg, var(--gas-tint), var(--wolk) 60%); border: 1px solid var(--lijn);
  border-left: 6px solid var(--gas); border-radius: 22px; padding: 1.5rem 1.75rem;
}
.goedkoopste-label { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gas-tekst); margin-bottom: .35rem; }
.goedkoopste-naam { font-size: 1.6rem; font-weight: 800; font-stretch: 108%; line-height: 1.15; }
.goedkoopste-prijs { font-size: 2.4rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ok); line-height: 1.1; }
.goedkoopste-verschil li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--lijn); }
.goedkoopste-verschil li:last-child { border-bottom: 0; }
.goedkoopste-verschil strong { color: var(--ok); white-space: nowrap; font-variant-numeric: tabular-nums; }
.goedkoopste-verschil li.is-eigen { font-weight: 600; }

/* Stappenplan "Aan de slag" op Mijn Energieplatform; de breedte van de balk via een klasse (CSP: geen inline style). */
.stappenplan-stap { display: flex; flex-wrap: wrap; column-gap: 1rem; row-gap: .5rem; align-items: flex-start; padding: .75rem 0; border-top: 1px solid var(--lijn); }
.stappenplan-stap:first-child { border-top: 0; padding-top: 0; }
.stappenplan-nr {
  flex: 0 0 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--merk-tint); color: var(--merk-diep);
  display: grid; place-items: center; font-weight: 800;
}
.stappenplan-tekst { flex: 1 1 15rem; min-width: 0; }
@media (max-width: 575.98px) { .stappenplan-tekst { flex-basis: calc(100% - 3.2rem); } .stappenplan-knop { margin-left: 3.2rem; } }
.stappenplan-stap.is-volgende .stappenplan-nr { background: var(--merk); color: #fff; }
.stappenplan-stap.is-klaar .stappenplan-nr { background: var(--ok); color: #fff; }
.stappenplan-stap.is-klaar .fw-semibold { color: var(--gedempt); }
.stappen-0 { width: 0; } .stappen-1 { width: 20%; } .stappen-2 { width: 40%; }
.stappen-3 { width: 60%; } .stappen-4 { width: 80%; } .stappen-5 { width: 100%; }

/* ---------- donker thema: wat de tokens niet vanzelf oplossen ---------- */
:root[data-theme="dark"] .navbar-sef {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28232, 244, 238, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
:root[data-theme="dark"] .alert-danger { --bs-alert-border-color: #6a2f29; --bs-alert-color: #ffc2b9; }
:root[data-theme="dark"] .alert-warning { --bs-alert-border-color: #5e5020; --bs-alert-color: #ffe3a0; }
:root[data-theme="dark"] .alert-success { --bs-alert-bg: #12372a; --bs-alert-border-color: #1f5a43; --bs-alert-color: #b8f0d4; }
:root[data-theme="dark"] .alert-info { --bs-alert-color: var(--inkt); }
:root[data-theme="dark"] .goedkoopste-label { color: var(--gas); }
:root[data-theme="dark"] .modal-content { box-shadow: 0 30px 70px -20px #000; }

/* ---------- contractvergelijker (pagina/leveranciers + delen/marktbeeld); breedtes via js/leveranciers.js ---------- */
.rekenbasis { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.opbouw-balk { display: flex; height: 1.6rem; border-radius: var(--r-pil); overflow: hidden; background: var(--lucht); }
.opbouw-balk > span { flex: 1; }
.balk-js .opbouw-balk > span { flex: none; }
.opbouw-leverancier { background: var(--merk); }
.opbouw-net { background: var(--blauw); }
.opbouw-heffingen { background: var(--gas); }
.opbouw-btw { background: var(--stroom); }
.opbouw-legende { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1rem; }
.opbouw-legende li { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.opbouw-stip { width: .75rem; height: .75rem; border-radius: 50%; flex: none; align-self: center; }
.spreiding-as { position: relative; height: 1rem; border-radius: var(--r-pil); background: var(--lucht); }
.spreiding-band { position: absolute; top: 0; bottom: 0; min-width: .5rem; border-radius: var(--r-pil); left: 0; width: 100%; }
.spreiding-vast { background: var(--merk); }
.spreiding-variabel { background: var(--merk-zacht); }
.spreiding-dynamisch { background: var(--blauw); }
.spreiding-mediaan { position: absolute; top: -.25rem; bottom: -.25rem; width: 3px; margin-left: -1.5px; background: var(--inkt); border-radius: 2px; }
.spreiding-mediaan:not([style]) { display: none; }

/* Vaste maximale breedtes (geen inline style: de CSP laat dat niet toe) */
.breedte-8 { max-width: 8rem; }
.breedte-32 { max-width: 32rem; }

/* Contracttabel: zoeken en sorteren (js/contracttabel.js) */
.contract-zoek { max-width: 18rem; }
.contract-tabel th .sorteer {
  all: unset; cursor: pointer; font-weight: inherit; white-space: nowrap;
}
.contract-tabel th .sorteer:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
.contract-tabel th .sorteer::after { content: " ↕"; opacity: .35; font-size: .85em; }
.contract-tabel th[aria-sort="ascending"] .sorteer::after { content: " ↑"; opacity: 1; }
.contract-tabel th[aria-sort="descending"] .sorteer::after { content: " ↓"; opacity: 1; }