* { box-sizing: border-box; }
[hidden], .verborgen { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.noot { margin: 0.25rem 0 0; color: var(--tekst2); }

/* menuknop (hamburger) voor smalle schermen; de bovenbalk zelf staat in huisstijl.css */
.menu-knop { display: none; }
.menu-knop .streep { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 48rem) {
  .js .topbalk { position: relative; }
  .js .menu-knop {
    display: inline-flex; align-items: center; gap: 0.4rem; flex: none; order: -1; margin: 0 0.25rem 0 -0.35rem; min-height: 40px; padding: 0 0.8rem;
    border: 1px solid var(--brand-lijn); border-radius: var(--radius-pill); background: transparent; color: var(--brand); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  }
  .js .menu-open .menu-knop { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
  .js .topbalk-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 60; flex-direction: column; gap: 0; margin: 0;
    padding: 0.25rem 1rem 0.75rem; background: var(--card); border-bottom: 1px solid var(--line);
  }
  .js .menu-open .topbalk-nav { display: flex; }
  .js .topbalk-link { display: block; padding: 0.8rem 0.25rem; border-bottom: 1px solid var(--line); font-size: 17px; text-decoration: none; }
  .js .topbalk-link:last-child { border-bottom: 0; }
  .js .topbalk-link[aria-current="page"] { border-bottom-color: var(--line); color: var(--ink); }
  .js .topbalk-link[aria-current="page"]::before { content: "● "; color: var(--brand); font-size: 0.7em; vertical-align: 0.15em; }
}

/* ---------- Indeling: tabel links, filters rechts ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15.5rem;
  gap: 1.25rem;
  padding: 1rem 1.25rem 0;
  align-items: start;
}

.resultaat-kop h1 { margin: 0; font-size: 24px; line-height: 30px; }
.legenda-tekst .blok { display: inline-block; width: 12px; height: 12px; margin: 0 0.25rem 0 0.5rem; border-radius: 3px; vertical-align: -1px; }
.legenda-tekst .blok:first-child { margin-left: 0; }
.blok.kleur { background: linear-gradient(90deg, var(--stroom) 33%, var(--gas) 33% 66%, var(--brand) 66%); }
.blok.grijs { background: var(--muted-licht); }

/* ---------- Filters ---------- */
.filters {
  position: sticky;
  top: 1rem;
  background: var(--card);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 1rem;
}
.filters-knop { display: none; }
.filters-inhoud { display: grid; gap: 1.1rem; }

label, legend { font-weight: 600; font-size: 0.875rem; }
.keuze { border: 0; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.keuze legend { margin-bottom: 0.4rem; }
.keuze label {
  display: flex; align-items: center; gap: 0.5rem; min-height: 40px;
  padding: 0.3rem 0.75rem; border: 1px solid var(--lijn); border-radius: 8px; font-weight: 500; cursor: pointer;
}
.keuze label:has(input:checked) { border-color: var(--accent); background: var(--tint-brand); }
.keuze input { width: 16px; height: 16px; accent-color: var(--accent); }

.veld { display: grid; gap: 0.3rem; }
.veld input[type=range] { width: 100%; accent-color: var(--accent); height: 28px; }
.getal { display: flex; align-items: center; gap: 0.4rem; color: var(--tekst2); font-size: 0.875rem; }
.getal input, .invoer {
  min-height: 40px; padding: 0 0.6rem; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; color: var(--inkt); background: var(--card);
}
.getal input { width: 100%; }
.invoer { width: 100%; }

/* ---------- Tabel ---------- */
.tabel-wrap {
  margin-top: 0.6rem;
  overflow: auto;
  max-height: calc(100vh - var(--top) - 6.5rem);
  background: var(--card);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
}

.tabel { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.tabel th, .tabel td {
  padding: 0.4rem 0.45rem;
  border-bottom: 1px solid var(--lijn);
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
  background: var(--card);
}
.tabel small { display: block; font-size: var(--klein); font-weight: 400; color: var(--tekst2); white-space: normal; }

.tabel thead th {
  position: sticky; top: 0; z-index: 2;
  vertical-align: bottom; font-weight: 700;
  border-bottom: 2px solid var(--inkt);
}
.tabel thead .stip { display: inline-block; width: 9px; height: 9px; margin-right: 0.3rem; border-radius: 50%; }
.tabel thead .soort { display: none; }

.tabel .vast-kol { position: sticky; left: 0; z-index: 1; text-align: left; border-right: 1px solid var(--lijn); }
.tabel thead .vast-kol { z-index: 3; }
.tabel tbody th.vast-kol { display: flex; align-items: center; gap: 0.5rem; min-width: 9rem; font-weight: 600; }

.tabel .plek {
  flex: none; width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--vlak); font-size: var(--klein);
}
.tabel .naam { white-space: normal; line-height: 1.3; }
.tabel .naam a { color: var(--inkt); text-decoration: none; }
.tabel .naam a:hover { color: var(--accent); text-decoration: underline; }
.tabel .naam a span { color: var(--accent); font-size: 0.8em; }

.tabel tr.beste th, .tabel tr.beste td { background: var(--tint-eerlijk); }
.tabel tr.beste .plek { background: var(--eerlijk); color: var(--on-brand); }
.tabel td.gelijk { background: var(--surface); color: var(--tekst2); }
.tabel tr.beste td.gelijk { background: color-mix(in srgb, var(--eerlijk) 6%, var(--card)); }
.tabel thead th.gelijk { color: var(--tekst2); }
.tabel td.min { color: var(--eerlijk); }
.tabel .totaal-kol { position: sticky; right: 0; z-index: 1; border-left: 2px solid var(--inkt); } /* totaal blijft in beeld als de tabel scrollt */
.tabel thead .totaal-kol { z-index: 3; }
.tabel td.totaal-kol strong { font-size: 17px; font-weight: 800; }
.tabel tbody tr:hover th, .tabel tbody tr:hover td { background: var(--tint-brand); }

.sorteer {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 0.25em;
}

.tag { display: block; width: fit-content; margin-top: 0.15rem; padding: 0 0.4rem; border-radius: 999px; background: var(--vlak); color: var(--tekst2); font-size: var(--klein); font-weight: 500; }

.tabel .vergelijk { background: var(--card); }
.duurder { color: var(--nadeel); font-weight: 600; }
.goedkoper { color: var(--eerlijk); font-weight: 600; }

.melding {
  margin: 0.5rem 0 0; padding: 0.55rem 0.75rem; font-size: var(--klein);
  background: var(--tint-brand); border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
}

/* ---------- Let op, opbouw en vergelijken ---------- */
.let-op {
  display: inline-grid; place-items: center; flex: none; width: 1.1rem; height: 1.1rem; margin-left: 0.3rem;
  border-radius: 50%; background: var(--stroom); color: var(--card); font-size: var(--klein); font-weight: 800; line-height: 1; vertical-align: 0.1em;
}
.let-op-tekst {
  display: flex; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0.6rem 0.75rem; font-size: var(--klein); line-height: 1.45;
  background: var(--tint-stroom); border: 1px solid var(--stroom-lijn); border-radius: 8px; white-space: normal; text-align: left;
}
.let-op-tekst .let-op { margin: 0.1rem 0 0; }
.info-tekst { margin: 0 0 0.75rem; padding: 0.55rem 0.75rem; font-size: var(--klein); line-height: 1.45; background: var(--card); border: 1px solid var(--lijn); border-radius: 8px; white-space: normal; text-align: left; }

.tabel tr.rij { cursor: pointer; }
.open-knop {
  display: block; margin: 0.3rem 0 0 auto; padding: 0.15rem 0.55rem; border: 1px solid var(--lijn); border-radius: 999px;
  background: var(--card); font: inherit; font-size: var(--klein); font-weight: 600; color: var(--accent); cursor: pointer;
}
.open-knop::after { content: " ▾"; }
.knoppen { display: flex; gap: 0.35rem; justify-content: flex-end; margin-top: 0.3rem; }
.knoppen .open-knop { margin: 0; }
.vergelijk-knop {
  padding: 0.15rem 0.6rem; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent);
  font: inherit; font-size: var(--klein); font-weight: 600; color: var(--on-brand); cursor: pointer;
}
.vergelijk-blok { margin-top: 0.9rem; padding: 0.75rem 0.85rem; background: var(--tint-brand); border: 1px solid var(--brand-lijn); border-radius: var(--radius-sm); }
.vergelijk-blok .vergelijk-keuze { margin-top: 0.4rem; }
.vergelijk-wrap { overflow-x: auto; }
.vergelijk-tabel thead th { position: relative; }
.vergelijk-tabel .kol-naam { display: block; margin-bottom: 0.3rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.vergelijk-tabel thead select { min-height: 32px; font-size: var(--klein); font-weight: 400; color: var(--accent); }
.vergelijk-tabel .weg { position: absolute; top: 0.1rem; right: 0.1rem; width: 28px; height: 28px; border: 0; background: none; font-size: 1.1rem; color: var(--tekst2); cursor: pointer; }
.vergelijk-tabel:not(.kol-2) thead th:not(:first-child) { padding-top: 1.6rem; }
.vergelijk-tabel .tag.oud { display: block; width: fit-content; margin: 0.25rem 0 0 auto; }
.toevoegen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--accent); }
.toevoegen select { min-height: 40px; padding: 0.3rem 0.5rem; border: 1px solid var(--lijn); border-radius: 8px; background: var(--card); font: inherit; }
.open-knop[aria-expanded="true"]::after { content: " ▴"; }
.tabel tr.detail-rij td { padding: 0; text-align: left; white-space: normal; background: var(--vlak); }
.tabel tr.detail-rij:hover td { background: var(--vlak); }
.tabel .opbouw { position: sticky; left: 0; max-width: 46rem; padding: 0.9rem 1rem 1rem; }

.opbouw-tabel { width: 100%; border-collapse: collapse; font-size: var(--klein); font-variant-numeric: tabular-nums; }
.opbouw-tabel th, .opbouw-tabel td { padding: 0.35rem 0; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: top; white-space: normal; background: transparent; }
.opbouw-tabel td { text-align: right; white-space: nowrap; padding-left: 0.75rem; font-weight: 600; }
.opbouw-tabel th { font-weight: 600; }
.opbouw-tabel th small { display: block; font-weight: 400; color: var(--tekst2); font-size: var(--klein); }
.opbouw-tabel .som th, .opbouw-tabel .som td { border-bottom: 0; border-top: 2px solid var(--inkt); font-weight: 800; }
.tabel .opbouw-tabel th, .tabel .opbouw-tabel td { background: transparent !important; }
.tabel .opbouw-tabel td { padding-left: 0.75rem; }
.opbouw .noot { margin-top: 0.5rem; }
.opbouw .opbouw-intro { margin: 0 0 0.5rem; }
.vergelijk-keuze { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.875rem; font-weight: 600; }
.vergelijk-keuze select, .vergelijk-tabel select {
  min-height: 40px; padding: 0.3rem 0.5rem; border: 1px solid var(--lijn); border-radius: 8px; background: var(--card); font: inherit; font-weight: 600;
}

.dialoog { width: min(40rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); padding: 0; border: 0; border-radius: var(--radius); }
.dialoog::backdrop { background: color-mix(in srgb, var(--ink) 55%, transparent); }
.dialoog-kop { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: var(--card); color: var(--ink); border-bottom: 1px solid var(--line); }
.dialoog-kop h2 { margin: 0; font-size: 19px; line-height: 26px; }
.sluit { width: 44px; height: 44px; margin: -0.5rem -0.5rem -0.5rem 0; border: 0; background: none; color: var(--ink); font-size: 1.75rem; line-height: 1; cursor: pointer; }
#vergelijk-inhoud { padding: 0.75rem 1rem 1rem; }
.vergelijk-tabel { width: 100%; margin-top: 0.5rem; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; table-layout: fixed; }
.vergelijk-tabel th, .vergelijk-tabel td { padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--lijn); text-align: right; vertical-align: top; }
.vergelijk-tabel thead th { vertical-align: bottom; border-bottom: 2px solid var(--inkt); }
.vergelijk-tabel thead th:first-child, .vergelijk-tabel tbody th { width: 28%; text-align: left; font-weight: 600; }
.vergelijk-tabel select { width: 100%; }
.vergelijk-tabel small { display: block; font-size: var(--klein); color: var(--tekst2); font-weight: 400; }
.vergelijk-tabel td.beter { color: var(--eerlijk); font-weight: 700; background: var(--tint-eerlijk); }
.vergelijk-tabel .som th, .vergelijk-tabel .som td { border-top: 2px solid var(--inkt); border-bottom: 0; font-size: 1rem; }
.conclusie { margin: 0.9rem 0 0; padding: 0.65rem 0.8rem; background: var(--vlak); border-radius: 8px; }

.naar-uitleg {
  display: grid; gap: 0.2rem; padding: 1.1rem 1.25rem; border-radius: var(--radius); background: var(--card); color: var(--inkt);
  border: 1px solid var(--lijn); border-left: 4px solid var(--accent); text-decoration: none;
}
.naar-uitleg strong { font-size: 1.1rem; }
.naar-uitleg:hover { border-color: var(--accent); }

/* ---------- Hulp en uitleg ---------- */
.hulp { margin-top: 0.4rem; font-size: var(--klein); }
.hulp summary, .wat summary { cursor: pointer; color: var(--accent); font-weight: 600; width: fit-content; }
.hulp summary { min-height: 32px; display: flex; align-items: center; }
.hulp p, .hulp li { margin: 0.35rem 0 0; color: var(--inkt); line-height: 1.45; }
.hulp ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.hulp[open] { padding: 0 0.6rem 0.6rem; background: var(--vlak); border-radius: 8px; }
.opbouw-tabel .post { display: inline-flex; align-items: center; gap: 0.35rem; }
.info {
  display: inline-grid; place-items: center; flex: none; width: 1.15rem; height: 1.15rem; padding: 0;
  border: 1.5px solid var(--accent); border-radius: 50%; background: var(--card); color: var(--accent);
  font: italic 800 12px/1 var(--font-sans); cursor: pointer; position: relative;
}
.info::before { content: ""; position: absolute; inset: -0.6rem; } /* groter tikvlak, zelfde tekening */
.info[aria-expanded="true"] { background: var(--accent); color: var(--on-brand); }
.info-voorbeeld { vertical-align: -0.2em; cursor: default; }
.uitleg-tekst p { margin: 0; }
.uitleg-tekst a { display: inline-block; margin-top: 0.4rem; font-weight: 600; }
.uitleg-tekst, .wat p { font-weight: 400; margin: 0.3rem 0 0.2rem; padding: 0.5rem 0.65rem; background: var(--card); border: 1px solid var(--lijn); border-radius: var(--radius-sm); font-size: var(--klein); line-height: 1.45; color: var(--inkt); }
.let-op-klein { display: flex; gap: 0.35rem; align-items: flex-start; margin-top: 0.2rem; font-size: var(--klein); font-weight: 400; color: var(--stroom-ink); }
.let-op-klein .let-op { margin: 0; width: 0.95rem; height: 0.95rem; font-size: 11px; }
.postcode-melding, .leeg-melding { background: var(--tint-stroom); border-left-color: var(--stroom); }
.link-knop { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--accent); text-decoration: underline; cursor: pointer; }
.keuze.veld { margin-top: 0; }
details.gelijk-blok > summary { cursor: pointer; list-style: none; }
details.gelijk-blok > summary::-webkit-details-marker { display: none; }
details.gelijk-blok > summary .noot { display: block; }
details.gelijk-blok .opbouw-tabel { margin-top: 0.5rem; }

.tabel tr.scheiding td { padding: 0; background: var(--tint-stroom); text-align: left; white-space: normal; }
.tabel tr.scheiding p, li.scheiding p { position: sticky; left: 0; max-width: 46rem; margin: 0; padding: 0.7rem 1rem; font-size: var(--klein); line-height: 1.45; }
li.scheiding { list-style: none; background: var(--tint-stroom); border: 1px solid var(--stroom-lijn); border-radius: var(--radius); }
li.scheiding p { position: static; }
.tabel tr.verouderd th, .tabel tr.verouderd td, .kaart.verouderd { opacity: 0.7; }
.tag.oud { background: var(--tint-stroom); color: var(--stroom-ink); }

.vinkje { display: flex; align-items: center; gap: 0.5rem; min-height: 40px; font-weight: 600; cursor: pointer; }
.vinkje input { width: 1.2rem; height: 1.2rem; }
#zon-velden { display: grid; gap: 0.3rem; margin-top: 0.3rem; }

/* ---------- Onder de tabel ---------- */
.onder { max-width: 72rem; padding: 2.5rem 1.25rem 3rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.onder h2 { margin: 0; }
.soorten { margin-bottom: 2.5rem; }
.soorten-wrap { max-height: none; margin-top: 1rem; }
.soorten-tabel { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.875rem; }
.soorten-tabel th, .soorten-tabel td { padding: 0.6rem 0.75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lijn); }
.soorten-tabel thead th { border-bottom: 2px solid var(--inkt); }
.soorten-tabel tbody tr:last-child th, .soorten-tabel tbody tr:last-child td { border-bottom: 0; }
.soorten-tabel tbody th { width: 7rem; color: var(--tekst2); font-weight: 600; }
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.85rem; margin-top: 1rem; }
.uitlegkaart { padding: 1.1rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--lijn); border-top: 4px solid var(--muted-licht); }
.uitlegkaart.verschilt { border-top-color: var(--accent); }
.uitlegkaart h3 { margin: 0.25rem 0 0.4rem; }
.uitlegkaart p { margin: 0; font-size: 0.9rem; }
.label { margin: 0; font-size: var(--klein); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst2); }
.verantwoording { margin-top: 2.5rem; font-size: 0.875rem; color: var(--tekst2); }
.verantwoording h2 { margin-top: 1rem; font-size: 19px; line-height: 26px; color: var(--inkt); }
.verantwoording li { margin-bottom: 0.35rem; }

/* ---------- Smal scherm: filters als compacte regel boven de tabel ---------- */
@media (max-width: 60rem) {
  .layout { grid-template-columns: minmax(0, 1fr); padding-top: 0.75rem; gap: 0.75rem; }
  .filters { order: -1; position: static; padding: 0; }
  .filters-knop {
    display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.1rem;
    min-height: 48px; padding: 0.6rem 2.5rem 0.6rem 0.9rem; border: 0; background: none;
    font: inherit; font-weight: 700; text-align: left; color: var(--inkt); cursor: pointer; position: relative;
  }
  .filters-knop::after {
    content: ""; position: absolute; right: 1rem; top: 50%; width: 9px; height: 9px;
    border-right: 2px solid var(--inkt); border-bottom: 2px solid var(--inkt); transform: translateY(-70%) rotate(45deg);
  }
  .filters-knop[aria-expanded="true"]::after { transform: translateY(-20%) rotate(-135deg); }
  .samenvatting { font-weight: 400; font-size: var(--klein); color: var(--tekst2); }
  .filters-inhoud { display: none; padding: 0 0.9rem 0.9rem; }
  .filters.open .filters-inhoud { display: grid; }
  .tabel-wrap { max-height: calc(100vh - var(--top) - 9rem); }
  .resultaat-kop h1 { font-size: 20px; line-height: 26px; }
}

.tabel .logo { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 2px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--logo-vlak); }
.tabel .logo img { width: 26px; height: 26px; object-fit: contain; display: block; }
.tabel .logo.leeg { border-style: dashed; }
.tabel .logo:hover { border-color: var(--accent); }

/* ---------- Mobiele kaartweergave ---------- */
.mobiel { display: none; }

@media (max-width: 60rem) {
  .tabel-wrap, .legenda-tekst { display: none; }
  .mobiel { display: block; margin-top: 0.6rem; }

  .gelijk-blok { padding: 0.75rem 0.9rem; background: var(--card); border: 1px solid var(--lijn); border-left: 4px solid var(--muted-licht); border-radius: var(--radius); }
  .gelijk-blok p { margin: 0; font-size: 0.9rem; }

  .chips { display: flex; gap: 0.4rem; overflow-x: auto; margin: 0.75rem 0 0.25rem; padding-bottom: 0.25rem; }
  .chip { flex: none; min-height: 40px; padding: 0.35rem 0.9rem; border: 1px solid var(--lijn); border-radius: 999px; background: var(--card); font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--inkt); cursor: pointer; }
  .chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

  .kaarten-lijst { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
  .kaart { padding: 0.75rem 0.85rem; background: var(--card); border: 1px solid var(--lijn); border-radius: var(--radius); }
  .kaart.beste { background: var(--tint-eerlijk); border-color: var(--eerlijk); }
  .kaart-kop { display: flex; align-items: center; gap: 0.5rem; }
  .kaart .plek { flex: none; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--vlak); font-size: var(--klein); font-weight: 700; }
  .kaart.beste .plek { background: var(--eerlijk); color: var(--on-brand); }
  .kaart .logo { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 2px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--logo-vlak); }
  .kaart .logo img { width: 26px; height: 26px; object-fit: contain; }
  .kaart { cursor: pointer; }
  .kaart-naam { flex: 1; min-width: 0; font-weight: 600; line-height: 1.25; }
  .kaart-naam a { color: var(--inkt); text-decoration: none; }
  .kaart-naam a span { color: var(--accent); font-size: 0.8em; }
  .kaart .knoppen { margin-top: 0.6rem; }
  .kaart .knoppen button { flex: 1; min-height: 40px; font-size: var(--klein); }
  .vergelijk-tabel.kol-3 { font-size: var(--klein); }
  .vergelijk-tabel.kol-3 thead th:first-child, .vergelijk-tabel.kol-3 tbody th { width: 22%; }
  .kaart .opbouw { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--lijn); cursor: auto; }
  .dialoog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; }
  .kaart-prijs { text-align: right; white-space: nowrap; font-size: var(--klein); color: var(--tekst2); }
  .kaart-prijs strong { font-size: 28px; line-height: 32px; font-weight: 800; color: var(--inkt); }
  .kaart-prijs small { display: block; font-size: var(--klein); }
  .kaart-balk { display: block; height: 8px; margin: 0.6rem 0 0.5rem; border-radius: 4px; overflow: hidden; background: var(--vlak); }
  .kaart-balk { width: 100%; }
  .kaart-posten { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; font-size: var(--klein); }
  .kaart-posten div { display: flex; gap: 0.35rem; align-items: baseline; }
  .kaart-posten dt { color: var(--tekst2); }
  .kaart-posten dt i { display: inline-block; width: 8px; height: 8px; margin-right: 0.25rem; border-radius: 50%; }
  .kaart-posten dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
  .kaart-posten dd small { display: none; }
}

@media (max-width: 60rem) { #aannames { display: none; } }

@media (max-width: 30rem) {
  .topbalk .badge { display: none; }
  .topbalk { padding: 0 1rem; font-size: 0.875rem; }
  .topbalk .merk { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* zonder JavaScript: de pagina's op een tweede regel */
  :root:not(.js) { --top: 4.6rem; }
  :root:not(.js) .topbalk { height: auto; min-height: var(--top); flex-wrap: wrap; align-content: center; gap: 0.2rem 0.6rem; padding: 0.35rem 1rem; }
  :root:not(.js) .topbalk .merk { flex: 1 0 100%; }
  :root:not(.js) .topbalk-nav { margin-left: 0; flex-wrap: wrap; gap: 0.2rem 0.9rem; }
  :root:not(.js) .topbalk-link { white-space: nowrap; font-size: var(--klein); }
}

/* kleuren per onderdeel (gelijk aan POSTEN in app.js); als klasse omdat style-attributen geblokkeerd worden */
.k-levering { background: var(--stroom); fill: var(--stroom); } .k-gasLevering { background: var(--gas); fill: var(--gas); } .k-vast { background: var(--brand); fill: var(--brand); }
.k-netbeheer { background: var(--muted); fill: var(--muted); } .k-belasting { background: var(--muted-licht); fill: var(--muted-licht); } .k-terug { background: var(--stroom-ink); fill: var(--stroom-ink); }
.k-korting { background: var(--eerlijk); fill: var(--eerlijk); } .k-gelijk { fill: var(--line); }

/* zonnepanelen: tot en vanaf 2027 naast elkaar */
.zon-vergelijk { margin-top: 0.75rem; padding: 0.75rem 0.85rem; background: var(--tint-stroom); border: 1px solid var(--stroom-lijn); border-radius: var(--radius-sm); font-size: var(--klein); line-height: 1.45; }
.zon-vergelijk h4 { margin: 0 0 0.25rem; font-size: 17px; }
.zon-vergelijk p { margin: 0.35rem 0; }
.zon-tabel-wrap { overflow-x: auto; }
.zon-tabel { width: 100%; border-collapse: collapse; margin: 0.4rem 0; }
.zon-tabel th, .zon-tabel td { padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--stroom-lijn); text-align: right; vertical-align: top; }
.zon-tabel th[scope="row"], .zon-tabel thead th:first-child { text-align: left; font-weight: 600; }
.zon-tabel thead th { border-bottom: 2px solid var(--inkt); white-space: nowrap; }
.zon-tabel small { display: block; font-weight: 400; color: var(--tekst2); font-size: var(--klein); }
.zon-tabel tfoot th, .zon-tabel tfoot td { border-top: 2px solid var(--inkt); border-bottom: 0; font-weight: 700; }
.zon-tabel td { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 30rem) { .zon-tabel td small { white-space: normal; } .zon-tabel th, .zon-tabel td { padding: 0.4rem 0.25rem; } }

/* controle-uitkomst in de opbouw (vergelijking en teruglevering) */
.label-status { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; color: var(--on-brand); font-size: var(--klein); font-weight: 700; white-space: nowrap; }
.st-ok { background: var(--ok); } .st-gewijzigd { background: var(--gewijzigd); } .st-let-op { background: var(--let-op-kleur); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st-let-op { color: #10232A; } }
:root[data-theme="dark"] .st-let-op { color: #10232A; }
.st-fout { background: var(--fout); } .st-let-op { color: var(--on-brand); } .st-geen { background: var(--geen); color: var(--inkt); }
.controle-uitkomst { margin-top: 0.75rem; padding: 0.65rem 0.8rem; background: var(--card); border: 1px solid var(--lijn); border-radius: var(--radius-sm); font-size: var(--klein); }
.controle-regel { margin-top: 0.35rem; }
.controle-regel > span:not(.label-status) { color: var(--tekst2); }
.controle-uitkomst a { overflow-wrap: anywhere; }

/* looptijd onder 'Vast': 1, 2 of 3 jaar */
.looptijd { display: flex; gap: 0.35rem; margin: -0.1rem 0 0.1rem 0.5rem; }
.looptijd label { flex: 1; justify-content: center; min-height: 36px; padding: 0.2rem 0.3rem; border-radius: var(--radius-pill); font-size: 14px; white-space: nowrap; gap: 0.3rem; }
.looptijd input { width: 14px; height: 14px; }


/* voorwaarden in de opbouw */
.voorwaarden-blok { margin-top: 0.9rem; padding: 0.65rem 0.8rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--klein); }
.voorwaarden-blok dl { margin: 0.4rem 0 0.2rem; display: grid; gap: 0.35rem; }
.voorwaarden-blok dl > div { display: grid; grid-template-columns: minmax(7rem, 28%) 1fr; gap: 0.6rem; }
.voorwaarden-blok dt { font-weight: 600; }
.voorwaarden-blok dd { margin: 0; }
@media (max-width: 40rem) { .voorwaarden-blok dl > div { grid-template-columns: 1fr; gap: 0; } }


/* welk product: eigen product of modelcontract */
.tag.model { background: var(--tint-brand); color: var(--brand); }

/* voorwaarden in 'Naast elkaar' */
.vergelijk-tabel .kop-rij th { padding-top: 1rem; border-bottom: 2px solid var(--inkt); text-align: left; font-size: 1rem; }
.vergelijk-tabel .tekst-rij td { font-size: var(--klein); text-align: left; }
.vergelijk-tabel .tekst-rij.anders td { background: var(--tint-stroom); }
.vergelijk-tabel .verschil-label { color: var(--stroom-ink); font-weight: 600; }
.vergelijk-tabel td.leeg { color: var(--tekst2); }
.vergelijk-tabel thead select + select { margin-top: 0.25rem; }

/* vergelijken: knoppen in de opbouw en in 'Naast elkaar' */
.vergelijk-actie { display: inline-flex; align-items: center; min-height: 40px; margin-top: 0.5rem; padding: 0.35rem 0.9rem; border: 1px solid var(--brand); border-radius: var(--radius-pill); background: var(--card); color: var(--brand); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.vergelijk-actie:hover { background: var(--tint-brand); }
.vergelijk-blok .noot { margin: 0.3rem 0 0; }
.vergelijk-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
.vergelijk-acties .toevoegen { margin-top: 0.5rem; }
.vergelijk-tabel .kol-naam small { display: block; color: var(--tekst2); font-weight: 600; }
.vergelijk-tabel .groep-rij th, .vergelijk-tabel .groep-rij td { color: var(--tekst2); background: var(--vlak); }
.vergelijk-tabel .klap { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 32px; padding: 0; border: 0; background: none; color: var(--brand); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.vergelijk-tabel .klap::after { content: "▾"; transition: transform 0.15s; }
.vergelijk-tabel .klap[aria-expanded="true"]::after { transform: rotate(180deg); }
.vergelijk-tabel tr[hidden] { display: none; }
.vergelijk-tabel .gelijk-rij th, .vergelijk-tabel .gelijk-rij td { color: var(--tekst2); }
.vergelijk-tabel .let-op { margin-left: 0.2rem; }
.na-keuze { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; margin-left: 0.6rem; vertical-align: middle; font-size: 14px; font-weight: 500; }
.na-keuze label { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 32px; padding: 0.1rem 0.6rem; border: 1px solid var(--lijn); border-radius: var(--radius-pill); cursor: pointer; }
.na-keuze label:has(input:checked) { border-color: var(--accent); background: var(--tint-brand); }
.na-keuze input { width: 14px; height: 14px; accent-color: var(--accent); }
.aannames { margin-top: 0.9rem; padding: 0.65rem 0.8rem; border: 1px solid var(--lijn); border-radius: 8px; font-size: var(--klein); }
.aannames summary { font-weight: 700; cursor: pointer; }
.aannames ul { margin: 0.4rem 0 0.3rem; padding-left: 1.1rem; }
.aannames li { margin-bottom: 0.25rem; }
/* meer kolommen: breder venster, en op een smal scherm opzij scrollen met de namen van de posten vast */
@media (min-width: 60.01rem) {
  .dialoog:has(.vergelijk-tabel.kol-3) { width: min(52rem, calc(100% - 2rem)); }
  .dialoog:has(.vergelijk-tabel.kol-4), .dialoog:has(.vergelijk-tabel.kol-5) { width: min(68rem, calc(100% - 2rem)); }
}
.vergelijk-tabel.kol-4 { min-width: 44rem; }
.vergelijk-tabel.kol-5 { min-width: 52rem; }
.vergelijk-tabel.kol-4 tbody th, .vergelijk-tabel.kol-5 tbody th { position: sticky; left: 0; z-index: 1; background: var(--card); }
.vergelijk-tabel.kol-4 thead th:first-child, .vergelijk-tabel.kol-5 thead th:first-child { width: 20%; }
@media (max-width: 40rem) {
  .vergelijk-tabel.kol-3 { min-width: 28rem; }
  .vergelijk-tabel.kol-4 { min-width: 34rem; }
  .vergelijk-tabel.kol-5 { min-width: 41rem; }
  .vergelijk-tabel:not(.kol-2) thead th:first-child, .vergelijk-tabel:not(.kol-2) tbody th { width: 7.5rem; }
  .vergelijk-tabel.kol-3 tbody th, .vergelijk-tabel.kol-4 tbody th, .vergelijk-tabel.kol-5 tbody th { position: sticky; left: 0; z-index: 1; background: var(--card); }
  .vergelijk-tabel .kop-rij th { position: static; }
}