/* ==========================================================================
   De gedeelde onderdelen van een vergelijkpagina: de opening, de stappen en
   de resultaatregel. Drie sites, een opbouw.

   Heette opening.css toen er alleen de opening in stond. Nu de stappen en de
   lijstweergave erbij komen dekt die naam de lading niet meer, en een bestand
   waarvan de naam iets anders belooft dan wat erin staat is precies hoe je
   over een half jaar iets op de verkeerde plek zet.

   De opening

   Wat er was
   ----------
   Een kleurvlak van 441 px (batterijmaatje), 468 px (warmtepompmaatje) en
   528 px (zonnestroommaatje): witte tekst op een verloop, de drie feiten als
   donkere pillen, en twee tot vier gevulde knoppen eronder. Mooi om naar te
   kijken, maar het duurde tot ruim 1.300 pixels voordat het eerste product in
   beeld kwam - en daarvoor komt iedereen.

   Wat het is geworden
   -------------------
   De pagina opent als een naslagwerk in plaats van als een folder: opschrift,
   kop, uitleg, de cijfers waar het om gaat, en dan de lijst. De merkkleur is
   niet verdwenen maar verplaatst - naar de rail bovenaan, het opschrift, de
   knop en de data. Een kleur die overal ligt zegt niets meer; een kleur die
   op drie plekken ligt wijst ergens naar.

   Wat dit niet oplost
   -------------------
   Het scrollen. Gemeten na afloop staat het eerste product op 1.278 px in
   plaats van 1.301 - dat is 23 pixels, geen doorbraak. De opening bleek maar
   een derde van de aanloop te zijn; op batterijmaatje ligt de rest bij de
   drie stappenkaarten (188 px), de salderingsbalk (78), de losse zoekbalk
   (52) en vooral het filterblok (292). Zolang die blijven staan zoals ze
   staan, verschuift het eerste product nauwelijks. Dat is een eigen stap, en
   die staat hier bewust niet in: er is om een andere opening gevraagd, niet
   om een andere pagina.

   Waarom dit in kern/ staat en niet drie keer in style.css: de regels
   hieronder zijn op de drie sites letterlijk gelijk. Ze verwijzen alleen naar
   --kleur-primair, --kleur-inkt en --kleur-accent, en die betekenen op elke
   site iets anders. Dat is precies de bedoeling: een opbouw, drie kleuren.

   Alle maten komen uit maatlat.css.
   ========================================================================== */

/* -- De rail --------------------------------------------------------------
   Vier pixels merk bovenaan elke pagina. Dit is wat er overblijft van het
   kleurvlak, en het is genoeg: je weet in een oogopslag op welke van de drie
   sites je bent, zonder dat het een halve schermhoogte kost. */
.site-header { position: relative; }

.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--kleur-inkt), var(--kleur-primair) 55%, var(--kleur-accent));
}

/* -- De opening ------------------------------------------------------------ */
.hero {
  background: var(--kleur-wit);
  color: var(--kleur-tekst);
  border-bottom: 1px solid var(--kleur-rand);
  padding: var(--ruimte-28) 0 var(--ruimte-20);
}

.hero h1 {
  margin: 0 0 var(--ruimte-14);
  font-size: clamp(var(--tekst-28), 4.6vw, var(--tekst-46));
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.hero p {
  margin: 0;
  max-width: 62ch;
  font-size: var(--tekst-19);
  color: var(--kleur-tekst-licht);
}

.hero p b { color: var(--kleur-tekst); }

.hero-meer > summary { color: var(--kleur-primair); font-size: var(--tekst-15); }

/* -- De drie feiten --------------------------------------------------------
   Stonden als donkere pillen naast elkaar, wat op wit niet werkt en op de
   donkere ondergrond toch al meer opviel dan de kop erboven. Nu een regel met
   haarlijnen ertussen: kleiner, rustiger, en het getal is het eerste dat je
   ziet in plaats van het label. */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: var(--ruimte-20);
  padding-top: var(--ruimte-14);
  border-top: 1px solid var(--kleur-rand);
}

.hero .update-info {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-6);
  margin: 0 var(--ruimte-20) 0 0;
  padding: 0 var(--ruimte-20) 0 0;
  border-right: 1px solid var(--kleur-rand);
  background: none;
  border-radius: 0;
  font-size: var(--tekst-15);
  color: var(--kleur-tekst-licht);
}

.hero .update-info:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}

.hero .update-info b { color: var(--kleur-tekst); }
.hero .update-info .icoon { color: var(--kleur-primair); }

/* -- De knoppen ------------------------------------------------------------
   Een gevulde knop in de merkkleur, een omlijnde ernaast, en al het andere
   als link. Er stonden er twee tot vier naast elkaar; bij vier weet niemand
   meer welke de hoofdweg is. Op warmtepompmaatje kwam daar nog bij dat de
   oranje knop op de oranje ondergrond stond - juist daar viel de hoofdknop
   het minst op. */
.hero-acties {
  margin-top: var(--ruimte-20);
  display: flex;
  align-items: center;
  gap: var(--ruimte-20);
  flex-wrap: wrap;
}

.hero-acties .knop[data-nadruk="primair"] {
  background: var(--kleur-primair);
  color: var(--kleur-wit);
  border: 0;
  box-shadow: var(--schaduw);
}

.hero-acties .knop[data-nadruk="primair"]:hover {
  background: var(--kleur-primair-donker);
  color: var(--kleur-wit);
}

.hero-acties .knop[data-nadruk="secundair"] {
  background: none;
  border: 1.5px solid var(--kleur-rand);
  color: var(--kleur-tekst);
}

.hero-acties .knop[data-nadruk="secundair"]:hover {
  background: var(--kleur-achtergrond);
  color: var(--kleur-tekst);
  border-color: var(--kleur-primair);
}

/* De derde en vierde weg zijn geen knop meer maar een link. */
.hero .hero-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-6);
  min-height: 24px;
  font-size: var(--tekst-15);
  font-weight: 700;
  color: var(--kleur-primair);
  text-decoration: none;
}

.hero .hero-link:hover,
.hero .hero-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 700px) {
  .hero { padding: var(--ruimte-28) 0 var(--ruimte-20); }
  .hero p { font-size: var(--tekst-17); }
  .hero-badges { margin-top: var(--ruimte-20); }

  /* Naast elkaar passen er op een telefoon geen drie; onder elkaar met een
     lijn ertussen leest het net zo goed. */
  .hero .update-info {
    width: 100%;
    margin: 0;
    padding: var(--ruimte-4) 0;
    border-right: 0;
  }

  .hero-acties { gap: var(--ruimte-14); }
  .hero-acties .knop { width: 100%; }
}

/* -- De drie stappen -------------------------------------------------------
   Stonden als drie omlijnde kaarten van samen 188 px onder de opening. Dat is
   veel gewicht voor een uitleg die je een keer leest en daarna nooit meer, en
   het duwt de lijst waarvoor je komt naar beneden.

   Nu een regel: nummer in een open cirkel, kop, en de uitleg eronder. Geen
   kader, geen vulling, geen schaduw. De inhoud blijft woord voor woord gelijk;
   alleen het gewicht gaat eraf.

   Bewust op .stappen gescoped: .icoon-kaart wordt op de uitlegpagina ook
   gebruikt, en daar is de kaartvorm wel op zijn plaats.
   -------------------------------------------------------------------------- */
/* Het raster stond op drie sites op drie maten: minmax(220px) op
   batterijmaatje en zonnestroommaatje, minmax(270px) op warmtepompmaatje. Dat
   viel niet op zolang de tussenruimte klein was, maar met meer lucht ertussen
   paste de vierde stap van warmtepompmaatje ineens niet meer op een regel en
   werd het blok 330 px in plaats van 165. Nu een maat, en die past op drie
   stappen en op vier. */
.stappen .icoon-kaarten {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--ruimte-20) var(--ruimte-28);
  margin: 0;
}

.stappen .icoon-kaart {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: var(--ruimte-10);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.stappen .icoon-kaart b {
  margin: 0;
  align-self: center;
  font-size: var(--tekst-15);
  color: var(--kleur-tekst);
}

.stappen .icoon-kaart > :last-child {
  grid-column: 2;
  margin-top: var(--ruimte-2);
}

/* Open cirkel in plaats van een gevulde: een genummerde stap is een wegwijzer,
   geen knop. */
.stappen .stap-nummer {
  width: 1.6rem;
  height: 1.6rem;
  background: none;
  border: 1.5px solid var(--kleur-primair);
  color: var(--kleur-primair);
  font-size: var(--tekst-12);
}

@media (max-width: 700px) {
  .stappen .icoon-kaarten { gap: var(--ruimte-14); }
}

/* ==========================================================================
   De resultaatregel

   Naast de kaarten en de tabel. Een kaart is ruim 1.100 px hoog, dus op een
   scherm passen er drie; wie twintig producten tegen elkaar houdt scrollt zich
   suf en moet onthouden wat er drie schermen hoger stond. In een regel staan
   de getallen onder elkaar uitgelijnd en zie je er vijf tegelijk.

   De tabel kon dat al, maar die vraagt een schakelaar en leest als een
   spreadsheet. De regel zit ertussenin: kolommen om te vergelijken, en per
   regel genoeg lucht en een knop om er ook echt iets mee te doen.

   Zelfde indeling op de drie sites; alleen de kolomnamen verschillen.
   ========================================================================== */

.resultaat-lijst {
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  overflow: hidden;
}

.resultaat-regel {
  display: grid;
  /* De naamkolom is breed omdat er een foto naast de naam staat; zonder die
     ruimte liepen namen over drie of vier regels. */
  /* Acht kolommen sinds de prijsgrafiek erbij kwam (oktober 2026); de naam
     staat een fractie in, de grafiek krijgt de ruimte van een kolom en een half. */
  grid-template-columns: 34px minmax(0, 2.6fr) repeat(3, minmax(0, 0.8fr)) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--ruimte-14);
  align-items: center;
  padding: var(--ruimte-14);
  border-bottom: 1px solid var(--kleur-rand);
}

.resultaat-regel:last-child { border-bottom: 0; }

/* De kolomnamen staan een keer bovenaan; in de regels zelf zijn ze verborgen
   tot het scherm smal wordt en de regel een kaart wordt. */
.regel-kop {
  padding-top: var(--ruimte-10);
  padding-bottom: var(--ruimte-10);
  background: var(--kleur-achtergrond);
  border-bottom: 1px solid var(--kleur-rand-hard, var(--kleur-rand));
  font-size: var(--tekst-15);
  font-weight: 600;
  color: var(--kleur-tekst-licht);
}

.regel-kop span:last-child { text-align: right; }

.regel-plek {
  font-size: var(--tekst-15);
  font-weight: 800;
  color: var(--kleur-tekst-licht);
  text-align: center;
}

/* Merk en model als één naam ("Marstek Venus E 3.0"). Het merk stond als
   kopje in hoofdletters boven de naam, en dat is een vorm uit het sjabloon. */
.regel-merk { display: inline; }

/* 19 px tekst op regelafstand 1,2 geeft een link van 23 px hoog: net een
   pixel onder de 24 die WCAG 2.5.8 vraagt. Een productnaam is geen link in
   een lopende zin - dit is de weg naar de productpagina - dus die
   uitzondering geldt hier niet.

   Regelafstand op de h3 helpt niet: het vak van een inline-element volgt de
   letterhoogte en niet de regel. De link zelf moet dus een blokje worden. */
.regel-naam h3 { margin: var(--ruimte-2) 0 0; font-size: var(--tekst-19); line-height: 1.3; }

/* De modelnaam is de enige route naar onze eigen pagina over dit product, en
   hij zag er niet uit als een link: kleur van de tekst eromheen, geen streep,
   en pas onderstreept bij hover. Op een telefoon bestaat hover niet, dus daar
   was er geen enkel signaal - terwijl de knop ernaast wél opvalt en de site
   uit leidt. Nu draagt de naam de linkkleur, zoals elke andere link hier. */
.regel-naam .kop-link {
  display: inline-block;
  min-height: 24px;
  color: var(--kleur-primair-donker);
  text-decoration: none;
}
.regel-naam .kop-link:hover,
.regel-naam .kop-link:focus-visible { text-decoration: underline; }

/* Waar de prijs vandaan komt. Een vergelijker die een bedrag toont zonder de
   winkel erbij, vraagt vertrouwen zonder het te verdienen - en de bezoeker
   weet pas waar hij heen ging nadat hij geklikt heeft. */
.regel-winkel {
  display: block;
  font-size: var(--tekst-12);
  color: var(--kleur-tekst-licht);
}

/* Vergelijken: een vinkje met een woord, geen pil. */
.regel-vergelijk {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-4);
  font-size: var(--tekst-15);
  color: var(--kleur-tekst-licht);
  cursor: pointer;
}

.regel-waarde { font-size: var(--tekst-17); font-weight: 700; }
.regel-van { font-size: var(--tekst-12); color: var(--kleur-tekst-licht); font-weight: 600; }

/* Het label hoort bij de smalle weergave; op een breed scherm staat het al
   boven de kolom. */
.regel-label { display: none; }

.regel-baan {
  display: block;
  height: 5px;
  margin-top: var(--ruimte-4);
  border-radius: var(--radius-pil);
  background: var(--kleur-rand);
  overflow: hidden;
}

.regel-vul { display: block; height: 100%; background: var(--kleur-primair); }

.regel-slot { text-align: right; }
.regel-bedrag { display: block; font-size: var(--tekst-22); font-weight: 800; letter-spacing: -0.02em; }
.regel-per { display: block; font-size: var(--tekst-12); color: var(--kleur-tekst-licht); font-weight: 600; }
/* De prijs is de link naar de winkel. Onder elke regel stond een gevulde
   knop "Naar de winkel", tientallen keren onder elkaar: dat las als een
   verkooppagina. Een prijsoverzicht linkt het bedrag. */
a.regel-bedrag { color: var(--kleur-primair-donker); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.regel-bedrag:hover { text-decoration-thickness: 2px; }
.regel-details { display: inline-block; min-height: 24px; line-height: 24px; font-size: var(--tekst-15); }

/* Prijsverloop. In de lijst een eigen kolom met 30 dagen (regelGrafiek in
   assets/prijsgrafiek.js), op de productpagina een grotere grafiek. De lijn
   draagt de merkkleur; het punt van vandaag ook, met een ring in de
   achtergrondkleur zodat het los van de lijn leesbaar blijft. */
.regel-verloop { min-width: 0; }
.rg { position: relative; height: 44px; }
.rg svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rg-lijn { fill: none; stroke: var(--kleur-primair); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rg-punt { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--kleur-primair); box-shadow: 0 0 0 2px var(--kleur-wit); transform: translate(-50%, -50%); }
.rg-onder, .rg-leeg { display: block; margin-top: var(--ruimte-4); font-size: var(--tekst-12); font-weight: 600; color: var(--kleur-tekst-licht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.prijsgrafiek { margin: var(--ruimte-20) 0 var(--ruimte-28); }
.pg-cijfers { display: flex; flex-wrap: wrap; gap: var(--ruimte-10) var(--ruimte-28); margin: 0 0 var(--ruimte-20); }
.pg-cijfers dt { font-size: var(--tekst-12); font-weight: 700; color: var(--kleur-tekst-licht); }
.pg-cijfers dd { margin: 0; font-size: var(--tekst-19); font-weight: 800; }
.pg-cijfers dd small { font-size: var(--tekst-12); font-weight: 600; color: var(--kleur-tekst-licht); }
.pg-vlak { padding-left: 64px; }
.pg-plot { position: relative; height: 180px; touch-action: pan-y; }
.pg-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pg-raster line { stroke: var(--kleur-rand); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pg-lijn { fill: none; stroke: var(--kleur-primair); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pg-y { position: absolute; right: calc(100% + var(--ruimte-10)); transform: translateY(-50%); font-size: var(--tekst-12); color: var(--kleur-tekst-licht); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-xas { position: relative; height: 28px; }
.pg-x { position: absolute; top: var(--ruimte-6); transform: translateX(-50%); font-size: var(--tekst-12); color: var(--kleur-tekst-licht); white-space: nowrap; }
.pg-x-begin { transform: none; }
.pg-x-eind { transform: translateX(-100%); }
.pg-punt { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--kleur-primair); box-shadow: 0 0 0 2px var(--kleur-wit); transform: translate(-50%, -50%); pointer-events: none; }
.pg-label { position: absolute; transform: translate(-50%, var(--ruimte-10)); font-size: var(--tekst-12); font-weight: 700; color: var(--kleur-tekst); white-space: nowrap; pointer-events: none; }
.pg-label-links { transform: translate(-6px, var(--ruimte-10)); }
.pg-label-rechts { transform: translate(calc(-100% + 6px), var(--ruimte-10)); }
.pg-kruis { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--kleur-tekst-licht); pointer-events: none; }
.pg-tip { position: absolute; top: var(--ruimte-4); padding: var(--ruimte-6) var(--ruimte-10); background: var(--kleur-wit); border: 1px solid var(--kleur-rand); border-radius: var(--radius-klein); font-size: var(--tekst-12); white-space: nowrap; pointer-events: none; }
.pg-tip b { display: block; font-size: var(--tekst-15); }
.pg-kruis[hidden], .pg-tip[hidden] { display: none; }
.prijsgrafiek figcaption { margin-top: var(--ruimte-6); font-size: var(--tekst-15); color: var(--kleur-tekst-licht); }
.pg-tabel { margin-top: var(--ruimte-10); }
.pg-tabel summary { cursor: pointer; min-height: 24px; font-size: var(--tekst-15); }

/* Prijzen per winkel, onder de grafiek. Eigen opmaak en niet .data-tabel,
   want warmtepompmaatje heeft die niet; zo ziet de tabel er op alle drie de
   sites hetzelfde uit. De bedragen staan rechts, onder elkaar te vergelijken. */
.wt-blok { overflow-x: auto; margin: var(--ruimte-14) 0 var(--ruimte-28); background: var(--kleur-wit); border: 1px solid var(--kleur-rand); border-radius: var(--radius); }
.wt-tabel { width: 100%; border-collapse: collapse; font-size: var(--tekst-15); }
.wt-tabel caption { caption-side: bottom; padding: var(--ruimte-10) var(--ruimte-14); text-align: left; color: var(--kleur-tekst-licht); border-top: 1px solid var(--kleur-rand); }
.wt-tabel th, .wt-tabel td { padding: var(--ruimte-10) var(--ruimte-14); text-align: left; vertical-align: top; }
.wt-tabel th { background: var(--kleur-achtergrond); white-space: nowrap; }
.wt-tabel tbody td { border-top: 1px solid var(--kleur-rand); }
.wt-tabel th:nth-child(2), .wt-tabel td.cijfer { text-align: right; }
.wt-tabel td.cijfer { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wt-tabel small { display: block; font-size: var(--tekst-12); color: var(--kleur-tekst-licht); }
.wt-tabel .wt-niet td { color: var(--kleur-tekst-licht); }
/* Op een telefoon passen de kolommen niet naast elkaar. Elke winkel wordt
   dan een blokje: de naam over de volle breedte, de twee waarden eronder met
   hun eigen label, zodat er niets opzij hoeft te schuiven. */
@media (max-width: 560px) {
  .wt-tabel thead { display: none; }
  .wt-tabel tbody, .wt-tabel tr { display: block; }
  .wt-tabel tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ruimte-6) var(--ruimte-10); padding: var(--ruimte-10) var(--ruimte-14); border-top: 1px solid var(--kleur-rand); }
  .wt-tabel tbody td { padding: 0; border-top: 0; }
  .wt-tabel td:first-child { grid-column: 1 / -1; font-weight: 700; }
  .wt-tabel td.cijfer { text-align: left; white-space: normal; }
  .wt-tabel td:empty { display: none; }
  .wt-tabel td[data-naam]::before { content: attr(data-naam); display: block; font-size: var(--tekst-12); font-weight: 700; color: var(--kleur-tekst-licht); }
}

/* Foto en kenmerken in de regel. Zonder foto's en zonder pillen was de lijst
   een bord met cijfers in twee kleuren. Wat erbij komt draagt elk iets: de
   foto laat zien wat voor ding het is, en een kenmerk staat er alleen als
   het iets zegt over de keuze. */
.regel-naam { display: flex; gap: var(--ruimte-14); align-items: flex-start; }
.regel-naam-tekst { min-width: 0; }
.regel-foto {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 66px;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-mini);
  background: var(--kleur-wit);
  overflow: hidden;
}
.regel-foto img { width: 100%; height: 100%; object-fit: contain; }
.regel-foto.leeg { background: var(--kleur-achtergrond); }

.regel-onder { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-4) var(--ruimte-10); margin-top: var(--ruimte-4); }
.regel-kenmerken { display: inline-flex; flex-wrap: wrap; gap: var(--ruimte-4); }
.kenmerk {
  padding: 1px var(--ruimte-6);
  border-radius: var(--radius-mini);
  font-size: var(--tekst-12);
  font-weight: 600;
}
/* Elke kleur betekent iets: groen is iets wat het apparaat kan, amber iets
   van de winkel op dit moment, de huiskleur een plek in deze lijst. */
.kenmerk-kan { background: var(--kleur-groen-licht); color: var(--kleur-groen-donker); }
.kenmerk-actie { background: var(--kleur-accent-licht); color: #92400e; }
.kenmerk-prijs { background: var(--kleur-primair-licht); color: var(--kleur-primair-donker); }

/* Tussenkop per score, bij de sortering op die score. */
.regel-groep {
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-10);
  padding: var(--ruimte-10) var(--ruimte-14);
  background: var(--kleur-primair-licht);
  border-bottom: 1px solid var(--kleur-rand);
  color: var(--kleur-primair-donker);
  font-size: var(--tekst-15);
}
.regel-groep span { color: var(--kleur-tekst-licht); }

/* De Koppel-score uitgesplitst: drie onderdelen met naam. Drie streepjes
   zonder namen zeiden niet welk streepje Homey was, en een leeg vak in het
   midden las als een weergavefout. */
.koppel-delen { list-style: none; margin: var(--ruimte-4) 0 0; padding: 0; font-size: var(--tekst-12); font-weight: 600; line-height: 1.5; }
.koppel-deel { display: flex; align-items: center; gap: var(--ruimte-4); white-space: nowrap; }
.koppel-deel .icoon { width: 1.1em; height: 1.1em; }
/* Groen en niet de huiskleur: op warmtepompmaatje is die oranje, en dan
   waren volledig en deels nauwelijks uit elkaar te houden. */
.koppel-deel.deel-2 { color: var(--kleur-groen-donker); }
.koppel-deel.deel-1 { color: #92400e; }
.koppel-deel.deel-0 { color: var(--kleur-tekst-licht); }
.koppel-deel.deel-0 span:first-of-type { text-decoration: line-through; text-decoration-color: var(--kleur-rand); }

/* -- Op de telefoon --------------------------------------------------------
   Zeven kolommen passen niet. De regel kantelt naar een kaart met de vier
   feiten in een blokje van twee bij twee; het kolomlabel dat op een breed
   scherm bovenaan staat komt dan bij de waarde zelf te staan. */
@media (max-width: 760px) {
  .resultaat-lijst { border: 0; background: none; border-radius: 0; }

  /* Bovenaan uitlijnen, niet in het midden. Twee vakjes naast elkaar zijn
     zelden even hoog (de Koppel-score heeft drie regels, het vermogen een),
     en gecentreerd stonden hun scheidingslijnen dan op verschillende hoogtes. */
  .resultaat-regel {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--ruimte-10);
    background: var(--kleur-wit);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    margin-bottom: var(--ruimte-10);
  }

  .regel-kop { display: none; }

  .regel-plek {
    grid-column: 1 / -1;
    text-align: left;
    font-size: var(--tekst-12);
  }

  .regel-plek::before { content: "Nr. "; }
  .regel-naam { grid-column: 1 / -1; }

  .regel-waarde {
    border-top: 1px solid var(--kleur-rand);
    padding-top: var(--ruimte-6);
  }

  /* Op een telefoon over de volle breedte van de kaart: een grafiek in een
     half vakje is te smal om er iets aan af te lezen. */
  .regel-verloop {
    grid-column: 1 / -1;
    order: 1;
    border-top: 1px solid var(--kleur-rand);
    padding-top: var(--ruimte-6);
  }
  .regel-verloop .rg { height: 32px; }

  .regel-label {
    display: block;
    font-size: var(--tekst-12);
    font-weight: 700;
    color: var(--kleur-tekst-licht);
  }

  /* Na de grafiek, die onder de vier eigenschappen staat (order: 1). */
  .regel-slot {
    grid-column: 1 / -1;
    order: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    text-align: left;
    border-top: 1px solid var(--kleur-rand);
    padding-top: var(--ruimte-10);
  }

  .regel-groep { margin: var(--ruimte-14) 0 var(--ruimte-6); background: none; border: 0; padding: 0; }
}

/* ==========================================================================
   Het filterpaneel

   Stond op de drie sites in drie opbouwen: 307, 150 en 241 px hoog voor
   hetzelfde ding. Batterijmaatje had de zoekbalk los boven het paneel,
   warmtepompmaatje zette "Toon alleen" naast de vinkjes zonder groep eromheen,
   zonnestroommaatje liet "Sorteren op" op een eigen regel achterblijven. De
   groep heette ook nog eens drie dingen: "Moet werken met", "Toon alleen",
   "TOON ALLEEN".

   Grappig genoeg waren de losse regels wél identiek - ze zijn jarenlang met de
   hand gelijk gehouden in drie bestanden. Nu staan ze hier, een keer.

   Twee zones:
     1. Zoeken en verfijnen in een raster met gelijke kolommen. Het zoekveld
        krijgt er twee, want een merk typen vraagt meer ruimte dan kiezen.
     2. Een haarlijn, en daaronder "Toon alleen" met de schakelaars en het
        wissen.

   Sorteren staat er niet in. Dat verandert niet wát je ziet maar in welke
   volgorde, en het hoort dus bij de resultatenbalk. Het scheelde ook de enige
   maat die niet paste: met zes bedieningen op 1136 px worden de kolommen
   153 px en heeft elke keuzelijst er minstens 168 nodig - dan wordt overal
   tekst afgekapt.
   ========================================================================== */

.filterbalk {
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  padding: var(--ruimte-14);
  margin: var(--ruimte-20) 0;
  box-shadow: var(--schaduw);
}

/* Oktober 2026, eerste ronde: het paneel was een rij keuzelijsten met daaronder
   een strook vinkjes die over twee regels brak. Dat werd drie lagen met
   benoemde groepen, en het oogde rustig, maar het was 420 px hoog: drie
   keuzelijsten onder elkaar in de eerste groep, en de vergelijker zelf
   begon pas onder de vouw.

   Tweede ronde, compacter. Twee rijen:
     1. zoeken en de keuzelijsten naast elkaar, met het label erboven;
     2. de vinkjes als knopjes per groep, en rechts op dezelfde regel hoeveel
        filters er aan staan en het wissen.
   De groepsnaam blijft erboven staan, want "Homey" naast "Noodstroom"
   zonder kopje is weer de ratjetoe van het begin. */
.filter-rij {
  display: grid;
  /* auto-fit heeft een vaste ondergrens nodig; met minmax(0, 1fr) kan de
     browser het aantal kolommen niet uitrekenen en valt alles in een kolom. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--ruimte-10) var(--ruimte-14);
  align-items: end;
}
.filter-zoek { display: flex; flex-direction: column; gap: var(--ruimte-4); grid-column: span 2; }

.filter-groep { display: flex; flex-direction: column; gap: var(--ruimte-4); min-width: 0; }

.filter-zoek > label,
.filter-groep > label {
  font-size: var(--tekst-12);
  font-weight: 700;
  color: var(--kleur-tekst-licht);
}

.filter-zoek input,
.filter-groep select {
  font: inherit;
  font-size: var(--tekst-15);
  padding: var(--ruimte-6) var(--ruimte-10);
  min-height: 40px;
  width: 100%;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-klein);
  background: var(--kleur-wit);
  color: var(--kleur-tekst);
}

.filter-keuzes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ruimte-10) var(--ruimte-28);
  margin-top: var(--ruimte-14);
  padding-top: var(--ruimte-14);
  border-top: 1px solid var(--kleur-rand);
}
.filter-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.filter-set legend { padding: 0; margin-bottom: var(--ruimte-6); font-size: var(--tekst-12); font-weight: 700; color: var(--kleur-tekst-licht); }

/* De vinkjes als knopjes naast elkaar. Het vinkje zelf blijft staan: een
   knopje dat alleen van kleur verandert, zegt niets aan wie kleuren slecht
   ziet. */
.checkbox-groep { display: flex; flex-wrap: wrap; gap: var(--ruimte-6); }

.checkbox-groep label {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-6);
  min-height: 32px;
  padding: 0 var(--ruimte-10);
  font-size: var(--tekst-15);
  font-weight: 500;
  color: var(--kleur-tekst);
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-klein);
  cursor: pointer;
}
.checkbox-groep label:hover { border-color: var(--kleur-primair); }
.checkbox-groep label:has(input:checked) { font-weight: 600; color: var(--kleur-primair-donker); background: var(--kleur-primair-licht); border-color: var(--kleur-primair); }
.checkbox-groep label:has(input:focus-visible) { outline: 2px solid var(--kleur-primair); outline-offset: 2px; }

.checkbox-groep input { margin: 0; accent-color: var(--kleur-primair); width: 16px; height: 16px; }

/* "Alleen officiële ondersteuning" verscherpt de knopjes ervoor en doet in
   zijn eentje niets. Hij verschijnt pas als er iets te verscherpen is, met
   een gestippelde rand: een verfijning, geen filter van zichzelf. */
.checkbox-groep label.filter-sub { border-style: dashed; color: var(--kleur-tekst-licht); }
.checkbox-groep label.filter-sub[hidden] { display: none; }

.filter-voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-6) var(--ruimte-14);
  margin-left: auto;
  min-height: 32px;
}
.filter-actief { font-size: var(--tekst-15); color: var(--kleur-tekst-licht); }

.filter-reset {
  flex: none;
  padding: var(--ruimte-4) 0;
  min-height: 32px;
  background: none;
  border: 0;
  color: var(--kleur-primair);
  font: inherit;
  font-size: var(--tekst-15);
  font-weight: 700;
  cursor: pointer;
}
.filter-reset[hidden] { display: none; }

@media (max-width: 520px) {
  .filter-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-zoek { grid-column: 1 / -1; }
  .filter-voet { margin-left: 0; }
}

/* Sorteren, in de resultatenbalk naast het aantal en de weergaveknoppen. */
.sorteer-keuze { display: inline-flex; align-items: center; gap: var(--ruimte-6); }
.sorteer-keuze > span { font-size: var(--tekst-15); color: var(--kleur-tekst-licht); }

.sorteer-keuze select {
  font: inherit;
  font-size: var(--tekst-15);
  padding: var(--ruimte-4) var(--ruimte-10);
  min-height: 40px;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-klein);
  background: var(--kleur-wit);
  color: var(--kleur-tekst);
}

@media (max-width: 700px) {
  .sorteer-keuze { width: 100%; }
  /* min-width: 0 hoort er met opzet bij. Een flex-item krimpt niet onder zijn
     min-content-breedte, en bij een <select> is dat de langste optie in de
     lijst - "Sorteer op prijs per kWh" bijvoorbeeld. Zonder dit stak de
     sorteerkeuze op een telefoon van 320 pixels buiten de pagina: 21 pixels bij
     zonnestroommaatje, 38 bij batterijmaatje, 56 bij warmtepompmaatje, en je
     kon de hele pagina horizontaal heen en weer schuiven. De keuzelijst zelf
     kort nu de zichtbare tekst in, wat een browser netjes zelf doet. */
  .sorteer-keuze select { flex: 1; min-width: 0; max-width: 100%; }
}

/* ==========================================================================
   Aanraakvlak van losstaande links

   WCAG 2.5.8 (AA) vraagt 24 bij 24 pixels, met een uitzondering voor een link
   in een lopende zin: die kun je niet vergroten zonder de regelafstand te
   slopen. Een link die in zijn eentje een blok vult valt niet onder die
   uitzondering - een losse "Alle batterijen vergelijken", een productnaam in
   een kop of in een tabelcel. Die waren 18 tot 20 px hoog.

   Waarom :only-child en niet gewoon alle links: een inline-block breekt niet
   meer netjes over twee regels. Bij een link die alleen in zijn blok staat
   maakt dat niet uit; midden in een zin wel.
   ========================================================================== */
p > a:only-child,
li > a:only-child,
td > a:only-child,
th > a:only-child,
h1 > a:only-child,
h2 > a:only-child,
h3 > a:only-child,
h4 > a:only-child,
/* En drie plekken waar een link naast andere tekst in een cel of regel staat,
   maar er duidelijk los van: een woordenlijstlink in een tabel, en het
   "bekijk" achter een winkelprijs. Ook die zijn geen zin. */
td a.term-link,
th a.term-link,
.winkel-lijst a {
  display: inline-block;
  min-height: 24px;
}

/* ==========================================================================
   Een prijs die er niet is, schreeuwt niet
   ==========================================================================
   "Prijs op aanvraag" stond in dezelfde 28px/800 als een echt bedrag, en omdat
   het drie woorden zijn in plaats van zes tekens was het meteen ook het
   breedste op de kaart. Het product dat je het minst kan vertellen, trok zo
   de meeste aandacht in de rij - en in de lijstweergave gold hetzelfde voor
   "Op aanvraag" naast de bedragen van de buren.

   Het is geen ruis die weg moet: dat een prijs ontbreekt is echte informatie,
   en het staat er bewust. Maar het hoort de rangorde van de pagina niet om te
   draaien. Daarom een maat kleiner, normaal gewicht en de rustige tekstkleur,
   zodat het leest als een mededeling in plaats van als een aanbieding.

   Let op de selector. style.css haalt dit bestand binnen met @import bovenaan
   en zet zijn eigen regels daaronder, dus bij gelijke specificiteit wint
   style.css altijd. ".prijs.prijs-onbekend" is net zo zwaar als
   ".prijs-blok .prijs" en deed daardoor niets; de klasse stond wel in de HTML
   en de 28px bleef staan. Vandaar de derde klasse. */
.prijs-blok .prijs.prijs-onbekend,
.prijs-groot.prijs-onbekend {
  font-size: var(--tekst-19);
  font-weight: 600;
  color: var(--kleur-tekst-licht);
  letter-spacing: 0;
}

.regel-bedrag.bedrag-onbekend {
  font-size: var(--tekst-15);
  font-weight: 600;
  color: var(--kleur-tekst-licht);
  letter-spacing: 0;
}

/* ==========================================================================
   Uitlegpagina: kort antwoord, de markt in cijfers, inhoudsopgave,
   rekenhulp en deelbare links. Zie kern/scripts/uitleg.mjs en
   kern/assets/uitleg.js.
   ========================================================================== */
.bijgewerkt-regel { margin: calc(-1 * var(--ruimte-10)) 0 var(--ruimte-20); font-size: var(--tekst-15); color: var(--kleur-tekst-licht); }

/* Het korte antwoord staat bovenaan een onderwerp. Een lezer die alleen dat
   wil weten, is na drie regels klaar; wie verder wil, leest door. */
.kort-antwoord { margin: var(--ruimte-14) 0 var(--ruimte-20); padding: var(--ruimte-14) var(--ruimte-20); background: var(--kleur-primair-licht); border-left: 4px solid var(--kleur-primair); border-radius: var(--radius); }
.kort-antwoord p { margin: 0; }
.kort-antwoord p + p { margin-top: var(--ruimte-4); }
.kort-antwoord .kort-label { font-size: var(--tekst-15); font-weight: 800; color: var(--kleur-primair-donker); }

.markt { margin: var(--ruimte-28) 0; padding: var(--ruimte-20); background: var(--kleur-wit); border: 1px solid var(--kleur-rand); border-radius: var(--radius); }
section.markt h2 { margin: 0; }
.markt-stand { margin: var(--ruimte-4) 0 var(--ruimte-14); font-size: var(--tekst-15); color: var(--kleur-tekst-licht); }
.markt-cijfers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ruimte-14) var(--ruimte-20); margin: 0; }
.markt-cijfer { padding-top: var(--ruimte-10); border-top: 1px solid var(--kleur-rand); }
.markt-cijfer dt { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-6); font-size: var(--tekst-15); font-weight: 700; color: var(--kleur-tekst-licht); }
.markt-cijfer dd { margin: var(--ruimte-2) 0 0; }
.markt-getal { display: block; font-size: var(--tekst-22); font-weight: 800; line-height: 1.3; color: var(--kleur-tekst); }
.markt-noot { display: block; font-size: var(--tekst-15); line-height: 1.5; color: var(--kleur-tekst-licht); }
.markt-noot a { display: inline-block; padding: 2px 0; }
.markt-voet { margin: var(--ruimte-14) 0 0; font-size: var(--tekst-15); color: var(--kleur-tekst-licht); }
@media (min-width: 700px) { .markt-cijfers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.inhoud { margin: var(--ruimte-20) 0 var(--ruimte-28); padding: var(--ruimte-14) var(--ruimte-20); border: 1px solid var(--kleur-rand); border-radius: var(--radius); background: var(--kleur-wit); }
.inhoud-kop { margin: 0 0 var(--ruimte-6); font-size: var(--tekst-15); font-weight: 800; color: var(--kleur-tekst-licht); }
/* Eigen nummering: met de standaardnummer en een raster schuift het nummer
   naar de laatste regel zodra een kop over twee regels loopt. */
.inhoud ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--ruimte-4) var(--ruimte-28); margin: 0; padding: 0; list-style: none; counter-reset: inhoud; font-size: var(--tekst-15); line-height: 1.5; }
.inhoud li { display: grid; grid-template-columns: 2em 1fr; counter-increment: inhoud; }
.inhoud li::before { content: counter(inhoud) "."; color: var(--kleur-tekst-licht); }

.rekenhulp { margin: var(--ruimte-20) 0; padding: var(--ruimte-14) var(--ruimte-20); background: var(--kleur-wit); border: 1px solid var(--kleur-rand); border-radius: var(--radius); }
.rekenhulp-kop { margin: 0 0 var(--ruimte-6); font-weight: 800; color: var(--kleur-primair-donker); }
.rekenhulp-veld { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-6) var(--ruimte-10); font-weight: 600; }
.rekenhulp-invoer { display: inline-flex; align-items: center; gap: var(--ruimte-6); font-weight: 400; }
.rekenhulp-invoer input { width: 7em; min-height: 36px; padding: var(--ruimte-4) var(--ruimte-10); font: inherit; border: 1px solid var(--kleur-rand); border-radius: var(--radius-klein); background: var(--kleur-wit); }
.rekenhulp-uitkomst { margin: var(--ruimte-10) 0 0; }
.rekenhulp-veld + .rekenhulp-veld { margin-top: var(--ruimte-6); }
.rekenhulp-veld select { max-width: 100%; min-height: 36px; padding: var(--ruimte-4) var(--ruimte-10); font: inherit; font-weight: 400; border: 1px solid var(--kleur-rand); border-radius: var(--radius-klein); background: var(--kleur-wit); }
.rekenhulp-noot { margin: var(--ruimte-10) 0 0; font-size: var(--tekst-15); color: var(--kleur-tekst-licht); }

/* Het knopje naast een begrip. Klein, want het hoort bij het begrip en niet
   andersom; groot genoeg om op te tikken (24 bij 24). */
.deellink { display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; margin-left: var(--ruimte-6); padding: 0 var(--ruimte-6); font: inherit; font-size: var(--tekst-12); font-weight: 600; color: var(--kleur-primair-donker); background: transparent; border: 1px solid var(--kleur-rand); border-radius: var(--radius-klein); cursor: pointer; vertical-align: middle; }
.deellink:hover, .deellink:focus-visible { border-color: var(--kleur-primair); }
.deellink-melding { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* De keuzehulp voor het eerste antwoord: geen advies op aannames die de
   bezoeker nog niet heeft gezien, wel uitleg en een knop voor wie het
   gemiddelde wil zien. */
.advies-leeg { padding: var(--ruimte-20); background: var(--kleur-achtergrond); border: 1px dashed var(--kleur-rand); border-radius: var(--radius); }
.advies-leeg p { margin: 0 0 var(--ruimte-10); }

/* Lange lijsten: de eerste tien, de rest achter "Toon alle" (zie kaart.js,
   ingeklaptHtml). In de kaartweergave doet de klasse op het raster het werk. */
.kaarten-grid.ingeklapt > :nth-child(n+11) { display: none; }
.toon-alle {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--ruimte-10) var(--ruimte-14);
  background: var(--kleur-wit);
  border: 0;
  border-top: 1px solid var(--kleur-rand);
  color: var(--kleur-primair);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.toon-alle:hover { background: var(--kleur-primair-licht); }
.kaarten-grid + .toon-alle { border: 1px solid var(--kleur-rand); border-radius: var(--radius); margin-bottom: var(--ruimte-40); }