/* ============================================================================
   wattradar — foundation van de energiecheck (redesign september 2026)
   ============================================================================
   Een laag bóvenop wattradar.css, niet ernaast. Alles hangt onder .ec, zodat
   deze regels geen enkele andere pagina raken zolang alleen /energiecheck de
   klasse draagt. De semantische tokens hieronder verwijzen waar het kan naar
   de bestaande primitives (--brand, --ink, --surface …): dan loopt de
   donkere modus vanzelf mee en blijft het merk één merk.

   Nieuw ten opzichte van wattradar.css:
   - semantische namen (--color-action-*, --color-text-* …) in plaats van
     rolloze kleurnamen, zodat een component zegt wát hij kleurt;
   - een tint-vlak (blauwgroen waas) voor de hero en de wizardachtergrond;
   - een eigen oordeelskleur voor "nu niet interessant": een volwaardige
     uitkomst, geen grijze restcategorie;
   - radius 12/18/24 en een schaal tot 96 px voor de grotere compositie.

   De actiekleur is gereserveerd: een gevuld vlak in --color-action is altijd
   iets om op te drukken. Een gekozen antwoord krijgt een rand en een vinkje,
   geen gevuld actievlak.
   ========================================================================= */

/* ── 1-4. tokens, typografie, iconen, knoppen ─────────────────────────────
   Verhuisd naar site/wattradar.css §15 (Design System 2.0), onder .ec én
   .wr; hier stond tot het herontwerp van de homepage de enige kopie. */

/* ── 5. formulier ────────────────────────────────────────────────────────── */

/* Een vraag: legend + controls + eventueel "waarom". Echte fieldsets, zodat
   een schermlezer de vraag bij de keuzes voorleest. */
.ec-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.ec-q + .ec-q { margin-top: var(--space-6); }
.ec-q__legend {
  padding: 0; margin: 0 0 var(--space-3);
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 650;
  letter-spacing: -.012em; line-height: 1.3; color: var(--color-text-primary);
}
.ec-q__hint { margin: calc(-1 * var(--space-2)) 0 var(--space-3); font-size: var(--fs-small); color: var(--color-text-secondary); }

/* Keuzekaart: een echte radio of checkbox, over de hele kaart gespannen.
   Geen div met een klik-handler: toetsenbord, schermlezer en formulier
   werken zo zonder extra code. */
.ec-choices { display: grid; gap: var(--space-3); container-type: inline-size; }
/* Twee kaarten in een smalle kolom: het icoon wijkt, zodat een lang woord
   ("Thuisbatterij") nooit onder het vinkje schuift. */
@container (max-width: 440px) {
  .ec-choices--2 .ec-choice__icon { display: none; }
  .ec-choices--2 .ec-choice { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--space-4) var(--space-3); }
}
.ec-choices--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .ec-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ec-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ec-choice {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--space-3);
  min-height: 64px; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-4);
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border-default);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out),
              background-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.ec-choice:hover { border-color: var(--color-border-strong); }
.ec-choice__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.ec-choice__icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 10px; background: var(--color-surface-sunken); color: var(--color-text-secondary);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.ec-choice__body { display: grid; gap: 2px; min-width: 0; }
.ec-choice__title { font-size: 1rem; font-weight: 650; line-height: 1.3; color: var(--color-text-primary); }
.ec-choice__hint  { font-size: var(--fs-small); line-height: 1.4; color: var(--color-text-secondary); }

/* Het merkteken rechts: rond voor één keuze, vierkant voor meer. */
.ec-choice__mark {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border: 1.5px solid var(--color-border-strong); border-radius: 50%;
  color: var(--color-action-text);
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.ec-choice--check .ec-choice__mark { border-radius: 6px; }
.ec-choice__mark .ec-icon { width: 14px; height: 14px; stroke-width: 2.2; opacity: 0; transform: scale(.6); transition: opacity var(--dur-1), transform var(--dur-2) var(--ease-out); }

.ec-choice:has(.ec-choice__input:checked) {
  border-color: var(--color-action);
  background: var(--color-action-tint);
  box-shadow: inset 0 0 0 1px var(--color-action);
}
.ec-choice:has(.ec-choice__input:checked) .ec-choice__icon { background: var(--color-surface-raised); color: var(--color-action); }
.ec-choice:has(.ec-choice__input:checked) .ec-choice__mark { background: var(--color-action); border-color: var(--color-action); }
.ec-choice:has(.ec-choice__input:checked) .ec-choice__mark .ec-icon { opacity: 1; transform: none; }
.ec-choice:has(.ec-choice__input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.ec-choice:has(.ec-choice__input:disabled) { opacity: .55; cursor: not-allowed; }

/* Staande variant voor drie naast elkaar op desktop. */
@media (min-width: 640px) {
  .ec-choice--stack {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto;
    align-items: start; gap: var(--space-4) var(--space-3);
    padding: var(--space-5) var(--space-4) var(--space-4) var(--space-5);
    min-height: 148px;
  }
  .ec-choice--stack .ec-choice__icon { grid-column: 1; grid-row: 1; }
  .ec-choice--stack .ec-choice__mark { grid-column: 2; grid-row: 1; }
  .ec-choice--stack .ec-choice__body { grid-column: 1 / -1; grid-row: 2; align-self: end; }
}

/* Gesegmenteerde keuze: korte, geordende antwoorden (1 · 2 · 3 · 4 · 5+). */
.ec-seg {
  display: flex; gap: 4px; padding: 4px;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-control);
}
.ec-seg__opt { position: relative; flex: 1 1 0; min-width: 0; }
.ec-seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ec-seg__opt span {
  display: grid; place-items: center; min-height: 44px; padding: 0 var(--space-2);
  border-radius: 9px; font-size: 1rem; font-weight: 620; color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.ec-seg__opt:hover span { color: var(--color-text-primary); }
.ec-seg__opt input:checked + span {
  background: var(--color-surface-raised); color: var(--color-action);
  box-shadow: 0 1px 2px rgba(14, 28, 27, .1), inset 0 0 0 1.5px var(--color-action);
}
.ec-seg__opt input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 1px; }

/* Keuzelijst: native select, 16 px zodat iOS niet inzoomt. */
.ec-select { position: relative; display: block; }
.ec-select select {
  -webkit-appearance: none; appearance: none; width: 100%;
  min-height: 52px; padding: 0 44px 0 var(--space-4);
  font: inherit; font-size: 1rem; color: var(--color-text-primary);
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border-default); border-radius: var(--radius-control);
  text-overflow: ellipsis; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out);
}
.ec-select select:hover { border-color: var(--color-border-strong); }
.ec-select select:focus-visible { border-color: var(--color-action); outline: 3px solid var(--color-focus); outline-offset: 0; }
.ec-select::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: var(--color-text-secondary); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Stapper: − [getal] +. Het veld blijft typbaar; de knoppen zijn gemak. */
.ec-stepper {
  display: inline-grid; grid-template-columns: 48px minmax(64px, auto) 48px; align-items: stretch;
  border: 1.5px solid var(--color-border-default); border-radius: var(--radius-control);
  background: var(--color-surface-raised); overflow: hidden;
}
.ec-stepper:focus-within { border-color: var(--color-action); outline: 3px solid var(--color-focus); outline-offset: 0; }
.ec-stepper button {
  display: grid; place-items: center; min-height: 52px;
  font: inherit; color: var(--color-text-primary); background: transparent; border: 0; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out);
}
.ec-stepper button:hover { background: var(--color-surface-sunken); }
.ec-stepper button:disabled { color: var(--color-text-tertiary); cursor: not-allowed; background: transparent; }
.ec-stepper button:focus-visible { outline: none; background: var(--color-action-tint); }
.ec-stepper input {
  -moz-appearance: textfield; appearance: textfield;
  width: 100%; min-width: 0; border: 0; border-inline: 1px solid var(--color-border-subtle);
  text-align: center; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--color-text-primary); background: transparent;
}
.ec-stepper input:focus { outline: none; }
.ec-stepper input::-webkit-inner-spin-button, .ec-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ec-stepper__wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.ec-stepper__meta { font-size: var(--fs-small); color: var(--color-text-secondary); }

/* Schakelaar: een checkbox met role="switch". */
.ec-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 56px; cursor: pointer;
}
.ec-toggle__text { display: grid; gap: 2px; }
.ec-toggle__text b { font-weight: 650; }
.ec-toggle__text span { font-size: var(--fs-small); color: var(--color-text-secondary); }
.ec-toggle input {
  -webkit-appearance: none; appearance: none; flex: none; position: relative;
  width: 48px; height: 28px; margin: 0; border-radius: var(--radius-pill);
  background: var(--color-border-default); cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out);
}
.ec-toggle input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform var(--dur-2) var(--ease-out);
}
.ec-toggle input:checked { background: var(--color-action); }
.ec-toggle input:checked::after { transform: translateX(20px); }
.ec-toggle input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* "Waarom vragen we dit?" — secundaire uitleg, standaard dicht. */
.ec-why { margin-top: var(--space-3); }
.ec-why > summary {
  display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
  font-size: var(--fs-small); font-weight: 560; color: var(--color-text-secondary);
  border-radius: 6px; padding: 2px 0;
}
.ec-why > summary::-webkit-details-marker { display: none; }
.ec-why > summary:hover { color: var(--color-text-primary); }
.ec-why > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.ec-why > summary .ec-icon { width: 16px; height: 16px; }
.ec-why__body {
  margin-top: var(--space-2); padding: var(--space-3) var(--space-4);
  background: var(--color-surface-sunken); border-radius: 10px;
  font-size: var(--fs-small); line-height: 1.55; color: var(--color-text-secondary); max-width: 60ch;
}
.ec-why[open] .ec-why__body { animation: ec-in var(--dur-2) var(--ease-out); }

/* Voortgang: tekst draagt de stap, de balk is ondersteuning. */
.ec-progress { display: grid; gap: var(--space-3); }
.ec-progress__label { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; font-size: var(--fs-small); color: var(--color-text-tertiary); }
.ec-progress__label b { font-weight: 650; color: var(--color-text-primary); }
.ec-progress__stap { margin: 0; font-size: var(--fs-small); color: var(--color-text-tertiary); }
.ec-progress__naam {
  margin: calc(-1 * var(--space-3) + 2px) 0 var(--space-1);
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600;
  line-height: 1.12; letter-spacing: -.025em; color: var(--color-text-primary);
}
.ec-progress__naam:focus { outline: none; }
.ec-progress__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.ec-progress__track li {
  height: 4px; border-radius: 2px; background: var(--color-border-subtle);
  position: relative; overflow: hidden;
}
.ec-progress__track li::after {
  content: ""; position: absolute; inset: 0; background: var(--color-action);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}
.ec-progress__track li.is-done::after { transform: scaleX(1); }

/* ── 6. wizardkaart ──────────────────────────────────────────────────────── */

.ec-panel {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-3);
  padding: clamp(var(--space-5), 3.5vw, var(--space-7));
}
.ec-panel { min-width: 0; }
/* De wizard zelf iets minder verticale binnenruimte dan het generieke
   paneel: de volgende-stapknop hoort op 1440 x 900 binnen het scherm. */
.ec-wizard { padding-block: clamp(var(--space-5), 2.6vw, 38px); }
.ec-panel__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4);
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}
/* Terug is een rustige tekstactie, verder de dominante knop die de rest van
   de regel vult. Pas op een heel smal scherm onder elkaar. */
.ec-wizard__terug { color: var(--color-text-secondary); padding-inline: var(--space-3); }
.ec-wizard__terug:hover { color: var(--color-text-primary); background: var(--color-surface-sunken); }
.ec-wizard__verder { margin-left: auto; }
@media (max-width: 560px) { .ec-wizard__verder { flex: 1; } }
@media (max-width: 340px) {
  .ec-panel__foot { flex-direction: column-reverse; align-items: stretch; }
  .ec-wizard__verder { margin-left: 0; }
}
.ec-privacy {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-small); color: var(--color-text-tertiary); margin: 0;
}
.ec-privacy .ec-icon { width: 16px; height: 16px; }

/* ── 7. uitkomsten ───────────────────────────────────────────────────────── */

/* De hoofdkaart: één bedrag, één knop. Het begrip komt vóór de actie. */
.ec-top {
  display: grid; gap: var(--space-5);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-2);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}
@media (min-width: 860px) {
  .ec-top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-7); align-items: end; }
  .ec-top__why { border-left: 1px solid var(--color-border-subtle); padding-left: var(--space-7); }
}
.ec-top__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--color-action); }
.ec-top__eyebrow .ec-label { color: inherit; }
.ec-top__title { margin: 0 0 var(--space-5); }
.ec-top__why p { margin: 0 0 var(--space-5); color: var(--color-text-secondary); line-height: 1.6; max-width: 46ch; }
.ec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
/* De keuze zelf onder de hoofdkans (ecPartnerTopHtml): over de volle breedte
   van de kaart, gescheiden door een lijn, in de opmaak van de top drie op
   /vast-of-dynamisch. */
.ec-partnertop { grid-column: 1 / -1; border-top: 1px solid var(--color-border-subtle); padding-top: var(--space-5); }
.ec-partnertop .vdtop, .ec-partnerkaart .vdtop { margin: 0; }
.ec-partnertop .eyebrow, .ec-partnerkaart .eyebrow { color: var(--color-action); }
/* Dezelfde keuze als eigen kaart, wanneer de contractkans niet bovenaan
   staat (ecPartnerKaartHtml): rustiger dan de hoofdkaart (rand, geen
   schaduw), met het bedrag van de kans erbij zodat de top drie nooit los van
   zijn som staat. */
.ec-partnerkaart {
  display: grid; gap: var(--space-5);
  margin-top: var(--space-5);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-surface);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}
.ec-partnerkaart__kop .ec-h3 { margin: 0 0 var(--space-2); }
.ec-partnerkaart__kop .ec-money { margin: 0 0 var(--space-3); }
@media (min-width: 860px) {
  .ec-partnerkaart { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-7); align-items: start; }
}

/* Vervolgkansen: één lijst met haarlijnen, geen stapel losse kaarten. */
.ec-more {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  margin: 0; padding: 0; list-style: none;
}
/* Volgorde op een smal scherm: titel, bedrag, uitleg, link — het bedrag komt
   vóór de uitleg, net als in de hoofdkaart. Breed schuift het naar rechts. */
.ec-more > li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr);
  grid-template-areas: "rank title" ". value" ". text" ". link";
  gap: var(--space-1) var(--space-4); align-items: start;
  padding: var(--space-5);
}
.ec-more > li + li { border-top: 1px solid var(--color-border-subtle); }
@media (min-width: 720px) {
  .ec-more > li {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-areas: "rank title value" ". text value" ". link value";
    column-gap: var(--space-5);
  }
}
.ec-more .ec-rank { grid-area: rank; }
.ec-more__title { grid-area: title; margin: 0; }
.ec-more__text { grid-area: text; display: grid; gap: var(--space-1); min-width: 0; }
.ec-more__text p { margin: 0; font-size: var(--fs-small); color: var(--color-text-secondary); line-height: 1.5; max-width: 62ch; }
.ec-more > li > .ec-link { grid-area: link; justify-self: start; margin-top: var(--space-2); }
.ec-more__value { grid-area: value; margin: var(--space-1) 0 var(--space-1); }
@media (min-width: 720px) { .ec-more__value { text-align: right; margin: 2px 0 0; } }
.ec-rank {
  display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px;
  border-radius: 50%; background: var(--color-surface-sunken);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: 650;
  color: var(--color-text-secondary); font-variant-numeric: tabular-nums;
}

/* Oordeel: één patroon voor elk soort uitkomst. Kleur + woord (+ teken),
   nooit alleen kleur. Neutraal is "nu niet interessant": een volwaardig
   antwoord in een eigen rustige tint, geen uitgeschakelde kaart. */
.ec-oordeel {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: var(--fs-small); font-weight: 650; line-height: 1.35;
}
.ec-oordeel .ec-icon { width: 16px; height: 16px; }
.ec-oordeel--positief { color: var(--color-positive); }
.ec-oordeel--neutraal { color: var(--color-verdict-no); }
.ec-oordeel--let      { color: var(--color-warning); }
/* De demopagina van fase 2 noemde dit nog .ec-verdict. */
.ec-verdict { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 650; color: var(--color-verdict-no); }
.ec-verdict .ec-icon { width: 16px; height: 16px; }
.ec-fact { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-money-s); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ec-fact small { display: block; font-family: var(--font-text); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0; color: var(--color-text-secondary); }

.ec-no {
  display: grid; gap: var(--space-3);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}
.ec-no h3 { margin: 0; }
.ec-no p { margin: 0; color: var(--color-text-secondary); font-size: var(--fs-small); line-height: 1.55; }

/* Risico: apart van de kansen, want het is geen kans. */
.ec-risk {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-4);
  background: color-mix(in srgb, var(--color-warning) 5%, var(--color-surface-raised));
  border: 1px solid color-mix(in srgb, var(--color-warning) 22%, var(--color-border-subtle));
  border-radius: var(--radius-card);
  padding: var(--space-5);
}
.ec-risk > .ec-icon { color: var(--color-warning); margin-top: 2px; }
.ec-risk h3 { margin: var(--space-1) 0 var(--space-2); }
.ec-risk p { margin: 0 0 var(--space-3); font-size: var(--fs-small); color: var(--color-text-secondary); line-height: 1.55; max-width: 62ch; }

/* Weinig te halen: een volwaardige uitkomst op de plek van de hoofdkaart. */
.ec-low {
  display: grid; gap: var(--space-4);
  background: linear-gradient(180deg, var(--color-surface-tint), var(--color-surface-raised) 70%);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-surface);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}
.ec-low p { margin: 0; color: var(--color-text-secondary); max-width: 58ch; line-height: 1.6; }

/* Terugkerende bezoeker: de situatie in één regel, direct te wijzigen. */
.ec-sum {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
}
.ec-sum__text { display: grid; gap: 2px; min-width: 0; }
.ec-sum__facts { font-weight: 620; color: var(--color-text-primary); }
.ec-sum__acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.ec-sum__facts span + span::before { content: "·"; margin: 0 .5em; color: var(--color-text-tertiary); }

/* Plek vasthouden terwijl de batterij nog rekent: geen verspringende lijst. */
.ec-skel { display: grid; gap: var(--space-2); }
.ec-skel i {
  display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--color-surface-sunken) 0%, var(--color-border-subtle) 50%, var(--color-surface-sunken) 100%);
  background-size: 200% 100%;
  animation: ec-shimmer 1.4s linear infinite;
}
.ec-skel i:nth-child(1) { width: 42%; height: 16px; }
.ec-skel i:nth-child(2) { width: 88%; }
.ec-skel i:nth-child(3) { width: 64%; }

/* ── 8. beweging ─────────────────────────────────────────────────────────── */

@keyframes ec-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ec-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .ec *, .ec *::before, .ec *::after { animation: none !important; transition: none !important; }
}

/* Aanraakschermen: nooit onder de 44 px. */
@media (pointer: coarse) {
  .ec-link { min-height: 44px; }
  .ec-btn--s { --btn-h: 44px; }
}

/* ── 9. de pagina /energiecheck ──────────────────────────────────────────
   Volgorde: waardepropositie, de wizard (die de hero overlapt), de uitkomst,
   vertrouwen, methode, vangnet. Eerst handelen, dan het resultaat, dan het
   bewijs. */

/* Een klasse met een eigen display wint van het hidden-attribuut; hier niet. */
.ec [hidden] { display: none !important; }

.ec { --ec-overlap: 32px; --ec-pad: 20px; }
@media (min-width: 960px) { .ec { --ec-overlap: 124px; --ec-pad: 48px; } }
/* De vaste tabbalk onderin (onder 900 px) mag nooit een knop of veld
   bedekken, ook niet op een toestel met een thuisbalk. */
@media (max-width: 899px) {
  .ec { padding-bottom: env(safe-area-inset-bottom, 0); }
  /* Alles wat je aanraakt of aanspringt: scrollIntoView en focus houden het
     element boven de vaste tabbalk (58 px) plus de thuisbalk. */
  .ec :is(button, a, input, select, summary, label, [tabindex]) {
    scroll-margin-bottom: calc(72px + env(safe-area-inset-bottom, 0));
  }
}

/* Hero: tekst links, beeld rechts, op een rustig blauwgroen vlak. De onderrand
   is extra hoog: daar schuift de wizard overheen. */
.ec-hero {
  display: grid; gap: var(--space-6);
  background: linear-gradient(160deg, var(--color-surface-tint) 0%, var(--color-surface-tint-2) 100%);
  border-radius: var(--radius-surface);
  padding: var(--ec-pad) var(--ec-pad) calc(var(--ec-pad) + var(--ec-overlap));
}
/* Vanaf 960 px één compositie: de tekst in de linkerhelft, de foto draagt
   de rechterhelft over de volle hoogte en wordt door de hero zelf geclipt.
   De wizard valt er onderaan overheen. */
@media (min-width: 960px) {
  .ec-hero {
    position: relative; overflow: hidden;
    grid-template-columns: minmax(0, 46%);
    padding: var(--space-8) var(--space-6) calc(var(--space-7) + var(--ec-overlap)) var(--space-8);
  }
  .ec-hero .ec-display { font-size: clamp(2.5rem, 1rem + 2.6vw, 3rem); max-width: none; }
}
.ec-hero__eyebrow { margin: 0 0 var(--space-3); color: var(--color-action); }
.ec-hero .ec-display { max-width: 15ch; }
.ec-hero__lead { margin-top: var(--space-3); max-width: 34em; }
@media (max-width: 959px) { .ec-hero__lead { font-size: var(--fs-body); line-height: 1.5; } }
.ec-hero__punten {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5);
  margin: var(--space-4) 0 0; padding: 0; list-style: none;
  font-size: var(--fs-small); font-weight: 560; color: var(--color-text-secondary);
}
.ec-hero__punten li { display: inline-flex; align-items: center; gap: 6px; }
.ec-hero__punten .ec-icon { color: var(--color-action); stroke-width: 2; }

/* De foto: de rechterhelft van de hero, van boven tot onder, zonder eigen
   rand, schaduw of radius; de hero clipt hem. Geen kaart in een kaart.
   Onder 960 px geen beeld: daar gaat de eerste vraag voor (en de <picture>
   laadt dan niets). Het vlak achter de foto houdt de maat vast terwijl hij
   laadt: geen verspringing. */
.ec-hero__media { display: none; }
@media (min-width: 960px) {
  /* De foto als achtergrond, met per thema een eigen reeks (image-set kiest
     avif/webp/jpg en 1x/2x). Donker gebruikt een apart gebakken reeks
     waarin de foto verdonkerd is en het verloop naar de donkere vlakkleur
     al ín de pixels zit, in 16 bit berekend: CSS hoeft daar niets meer te
     mengen, dus er kán geen melkband of banding ontstaan. Een achtergrond
     laadt bovendien alleen wanneer deze regels gelden: op mobiel niets. */
  .ec-hero__media {
    display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 51%;
    background-color: color-mix(in srgb, var(--color-action) 8%, var(--color-surface-tint));
    background-image: url("/img/energiecheck-hero-900.jpg");
    background-image: image-set(
      "/img/energiecheck-hero-900.avif" type("image/avif") 1x,
      "/img/energiecheck-hero-1200.avif" type("image/avif") 2x,
      "/img/energiecheck-hero-900.webp" type("image/webp") 1x,
      "/img/energiecheck-hero-1200.webp" type("image/webp") 2x,
      "/img/energiecheck-hero-900.jpg" 1x,
      "/img/energiecheck-hero-1200.jpg" 2x);
    background-size: cover; background-position: 55% 45%; background-repeat: no-repeat;
    /* Licht, zoals goedgekeurd: een maskerverloop van 220 px plus de
       kleurlaag (::after) in de echte vlakkleur eroverheen. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .18) calc(var(--ec-naad) * .27), rgba(0, 0, 0, .55) calc(var(--ec-naad) * .59), rgba(0, 0, 0, .9) calc(var(--ec-naad) * .86), #000 var(--ec-naad));
            mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .18) calc(var(--ec-naad) * .27), rgba(0, 0, 0, .55) calc(var(--ec-naad) * .59), rgba(0, 0, 0, .9) calc(var(--ec-naad) * .86), #000 var(--ec-naad));
    --naadkleur: color-mix(in srgb, var(--color-surface-tint) 55%, var(--color-surface-tint-2));
  }
  .ec-hero__media::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: var(--ec-naad);
    pointer-events: none;
    background: linear-gradient(90deg,
      var(--naadkleur) 0,
      color-mix(in srgb, var(--naadkleur) 62%, transparent) 40%,
      color-mix(in srgb, var(--naadkleur) 30%, transparent) 68%,
      color-mix(in srgb, var(--naadkleur) 10%, transparent) 88%,
      transparent 100%);
  }
}

/* Wizard en samenvatting: over de onderrand van de hero heen. Het loskomen
   zit in de overlap, het witte vlak en de rand; de schaduw doet weinig. */
.ec-wizard, .ec-sum {
  position: relative; z-index: 1;
  width: calc(100% - var(--space-4)); max-width: 880px;
  margin: calc(-1 * var(--ec-overlap)) auto 0;
}
.ec-sum { box-shadow: var(--shadow-2); }
.ec-progress { margin-bottom: var(--space-4); }
.ec-stap > * + * { margin-top: var(--space-5); }
.ec-stap { animation: ec-in var(--dur-2) var(--ease-out); }
.ec-levplek > .ec-lev { margin-top: var(--space-6); }
.ec-q__na { margin-top: var(--space-2); }
.ec-fout { margin: var(--space-2) 0 0; font-size: var(--fs-small); font-weight: 600; color: var(--color-danger); }
.ec-fout:empty { display: none; }
.ec-privacy { justify-content: center; text-align: center; margin: var(--space-4) auto 0; max-width: 880px; }

/* Ja/nee zonder icoon: twee compacte kaarten, niet schermbreed. */
.ec-choices--kort { max-width: 440px; }
.ec-choice:not(:has(.ec-choice__icon)) { grid-template-columns: minmax(0, 1fr) auto; min-height: 56px; padding-block: var(--space-3); }

/* Terugkerende bezoeker: een compacte hero, de situatie en meteen de uitkomst. */
:root.ec-terug .ec .ec-hero__lead,
:root.ec-terug .ec .ec-hero__punten,
:root.ec-terug .ec .ec-hero__media { display: none; }
:root.ec-terug .ec .ec-hero { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--ec-pad) - 12px); padding-bottom: calc(var(--ec-pad) - 12px + var(--ec-overlap)); }
:root.ec-terug .ec { --ec-overlap: 32px; }
@media (min-width: 960px) { :root.ec-terug .ec { --ec-overlap: 56px; } }
:root.ec-terug .ec .ec-display { font-size: var(--fs-h1); max-width: none; }

/* De uitkomst. */
.ec-uitkomst { margin-top: clamp(var(--space-7), 6vw, var(--space-8)); }
.ec-uitkomst__kop { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.ec-uitkomst__kop h2 { scroll-margin-top: calc(var(--hdr, 56px) + var(--space-5)); }
.ec-uitkomst__kop h2:focus { outline: none; }
.ec-top__conclusie .ec-top__title { max-width: 18ch; }
@media (min-width: 860px) { .ec-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.ec-top__why > p:first-child { margin-bottom: var(--space-3); }
.ec-top__why .ec-meer { margin-bottom: var(--space-5); }
.ec-top__why > p:first-child:last-of-type { margin-bottom: var(--space-5); }
.ec-lijstkop {
  margin: var(--space-7) 0 var(--space-3);
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 650; letter-spacing: -.015em;
}
.ec-rank--oordeel { background: var(--color-verdict-no-soft); color: var(--color-verdict-no); }
.ec-rank--leeg { background: var(--color-surface-sunken); }
.ec-more__text .ec-oordeel { margin-bottom: 2px; }
.ec-fact--stil { color: var(--color-text-secondary); }
.ec-meer { margin: var(--space-1) 0 0; }
.ec-meer > summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: var(--fs-small); font-weight: 560; color: var(--color-text-secondary);
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.ec-meer > summary::-webkit-details-marker { display: none; }
.ec-meer > summary:hover { color: var(--color-text-primary); }
.ec-meer > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.ec-meer > p { margin: var(--space-2) 0 0; font-size: var(--fs-small); color: var(--color-text-secondary); line-height: 1.55; max-width: 62ch; }
.ec-risk { margin-top: var(--space-5); }
.ec-risk h3 { margin: var(--space-1) 0 0; }
.ec-risk__waarde { margin: var(--space-2) 0 var(--space-2); }
.ec-risk > div > p:not([class]) { margin: 0 0 var(--space-2); }
.ec-laden {
  display: grid; gap: var(--space-4);
  background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-surface); padding: clamp(var(--space-5), 4vw, var(--space-7));
}

/* Vertrouwen: drie controleerbare eigenschappen, één rustige regel. */
.ec-trust {
  display: grid; gap: var(--space-4);
  margin: clamp(var(--space-7), 6vw, var(--space-8)) 0 0; padding: var(--space-5) 0;
  list-style: none; border-block: 1px solid var(--color-border-subtle);
}
@media (min-width: 760px) { .ec-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.ec-trust li { display: grid; gap: 2px; }
.ec-trust b { font-weight: 650; }
.ec-trust span { font-size: var(--fs-small); color: var(--color-text-secondary); line-height: 1.5; }

.ec-methode { margin-top: var(--space-6); }
/* 5. Het advertentieblok krijgt vaste ademruimte en een vaste minimale
   hoogte: een geladen advertentie schuift zo niet tegen de methode-uitklap
   of het vangnet aan en verschuift de pagina niet. */
.ec .ad { margin-block: var(--space-8) var(--space-7); min-height: 92px; }

/* Vangnet boven de footer (trechterplan, uitgang 3). */
.ec-vangnet {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-7); padding: var(--space-5) var(--space-6);
  background: var(--color-surface-sunken); border-radius: var(--radius-card);
}
.ec-vangnet h2 { margin: 0 0 var(--space-1); }
.ec-vangnet p { max-width: 52ch; }
@media (min-width: 860px) { .ec .ec-top { align-items: center; } }
.ec-more__value .ec-money { flex-wrap: nowrap; white-space: nowrap; }

/* De opbouw per bezoeker, al vóór wattradar.js draait: thema.js zet
   .ec-terug op <html> als de check eerder is afgerond. Daarna houdt
   renderEcWizard() de hidden-attributen en .is-bewerk bij. Zonder
   JavaScript is er alleen de wizard. */
:root:not(.ec-terug) .ec .ec-sum,
:root:not(.ec-terug) .ec .ec-uitkomst { display: none; }
:root.ec-terug .ec:not(.is-bewerk) .ec-wizard,
:root.ec-terug .ec:not(.is-bewerk) .ec-privacy { display: none; }
/* Zolang de uitkomst nog leeg is of rekent, houdt het vak een schermhoogte
   vast: anders staat de vertrouwensstrip eerst in beeld en wordt hij
   weggeduwd zodra de uitkomst er is (gemeten: CLS 0,16 op 390 px). */
:root.ec-terug .ec #ecKansen:empty,
:root.ec-terug .ec #ecKansen:has(> .ec-laden) { min-height: 100svh; }

/* ── polish uit de resultatenreview (fase 6) ────────────────────────────── */

/* 1. De hoofdkaart op desktop een slag compacter: 48 wordt 36 px verticaal. */
@media (min-width: 860px) { .ec .ec-top { padding-block: 36px; } }

/* 2. "Meer uitleg" is de derde stem in de kaart: kleiner en stiller dan de
   knop, die de enige echte actie is. */
.ec-top .ec-meer > summary { font-size: .8125rem; color: var(--color-text-tertiary); }
.ec-top .ec-meer > summary:hover { color: var(--color-text-secondary); }

/* 3. Een kernwaarde bij "nu niet interessant" weegt lichter dan een bedrag
   bij een echte kans: kleiner en in de secundaire kleur, eenheid stiller. */
.ec-rij--nietnu .ec-more__value .ec-money--s,
.ec-rij--nietnu .ec-fact { font-size: 1.125rem; color: var(--color-text-secondary); letter-spacing: -.01em; }
.ec-rij--nietnu .ec-more__value .ec-money__unit,
.ec-rij--nietnu .ec-fact small { color: var(--color-text-tertiary); }

/* 7. Op smal minder lucht per vervolgrij (finalpolish: nog een slag). */
@media (max-width: 719px) {
  .ec .ec-more > li { padding-block: var(--space-3); }
  .ec .ec-more > li > .ec-link { margin-top: var(--space-1); }
}

/* ── finalpolish (fase 7-review) ────────────────────────────────────────── */

/* De verdieping in het vertrouwensblok: een tekstlink, geen knop. */
.ec-trust .ec-link { justify-self: start; margin-top: var(--space-1); }

/* 1. Zolang de wizard actief is, gaat de vaste tabbalk op mobiel opzij: de
   check is dan de enige taak. In de uitkomst (wizard verborgen) en op elke
   andere route staat hij er gewoon. Browsers zonder :has houden de balk. */
@media (max-width: 899px) {
  html:has(#ecWizard:not([hidden])) .tabbar { display: none; }
}

/* 3. Terugkerende bezoeker: de uitkomst dichter op de samenvatting. */
:root.ec-terug .ec .ec-uitkomst { margin-top: clamp(var(--space-5), 3vw, 40px); }

/* ---- één profiel (25-9-2026) ----
   Het eigen tarief en jaarverbruik zijn optionele verfijningen in de wizard:
   een getalveld in dezelfde maat als de keuzelijst, het woord "optioneel"
   stil naast de vraag. De rekenbasis boven en in de uitkomst is uitleg, geen
   conclusie: klein en in de secundaire tekstkleur. */
.ec-q__optioneel { margin-left: var(--space-2); font-size: var(--fs-small); font-weight: 500; color: var(--color-text-secondary); }
.ec-invul { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ec-invul input {
  width: 9.5rem; min-height: 52px; padding: 0 var(--space-4);
  font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--color-text-primary);
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border-default); border-radius: var(--radius-control);
  transition: border-color var(--dur-1) var(--ease-out);
}
.ec-invul input::placeholder { color: var(--color-text-tertiary); }
.ec-invul input:hover { border-color: var(--color-border-strong); }
.ec-invul input:focus-visible { border-color: var(--color-action); outline: 3px solid var(--color-focus); outline-offset: 0; }
.ec-invul span { font-size: var(--fs-small); color: var(--color-text-secondary); }
.ec-lev { margin-top: var(--space-5); }
.ec-basis { margin-top: var(--space-2); max-width: 72ch; }
.ec-kansbasis { margin: var(--space-2) 0 0; color: var(--color-text-secondary); max-width: 60ch; }
.ec-terugnaar { margin: var(--space-3) 0 0; text-align: right; }
.ec-q__na .seg.klein { margin: var(--space-1) 0; vertical-align: middle; }

/* ── 10. Energiecheck 2.0 (8-10-2026): snelle check, verdieping, uitsplitsing ──
   Variant B: twee vragen (contract, zonnepanelen) en meteen de uitkomst; de
   overige vragen als verdieping onder de uitkomst, standaard dicht. In de
   hoofdkaart is de partner de primaire actie en staan de tool, de volledige
   vergelijking, de verdieping en de aannames als tekstlinks eronder. */
.ec-quick__kop { margin-bottom: var(--space-5); }
.ec-quick__kop .ec-label { margin: 0 0 var(--space-2); color: var(--color-text-tertiary); }
.ec-quick__kop .ec-progress__naam { margin: 0; }
.ec-quick .ec-stap + .ec-stap { margin-top: var(--space-5); }
.ec-quick__noot { margin: 0; color: var(--color-text-tertiary); max-width: 54ch; flex: 1 1 18rem; }
/* Onder elkaar: de noot krijgt zijn eigen hoogte. Met flex-basis 18rem in
   een kolom reserveerde hij 288 px hoogte, een leeg vlak onder de knop
   (gevonden bij de herziene invoer, 8-10-2026). */
@media (max-width: 560px) { .ec-quick .ec-panel__foot { flex-direction: column-reverse; align-items: stretch; } .ec-quick__noot { flex: 0 0 auto; } }
/* De snelle check op één scherm (herziene invoer, 8-10-2026). Op een
   telefoon gewoon onder elkaar, in de volgorde van de bron: een vraag die het
   profiel al beantwoordde staat hidden en laat zo geen lege rij achter. Op
   desktop het contract over de volle breedte, daaronder twee kolommen. */
.ec-quick { display: grid; gap: var(--space-5); }
.ec-quick > .ec-quick__kop { margin-bottom: 0; }
.ec-quick > .ec-panel__foot { margin-top: 0; }
.ec-quick > .ec-terugnaar { margin: 0; }
.ec-quick .ec-stap + .ec-stap { margin-top: 0; }
@media (min-width: 960px) {
  .ec-quick {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-7);
    grid-template-areas: 'kop kop' 'bekend bekend' 'contract contract' 'lev lev' 'huis huis' 'zon ev' 'foot foot' 'terug terug';
  }
  .ec-quick > .ec-quick__kop { grid-area: kop; }
  .ec-quick > .ec-bekend { grid-area: bekend; }
  .ec-quick > [data-ecvraag="contract"] { grid-area: contract; }
  .ec-quick > [data-ecvraag="lev"] { grid-area: lev; }
  .ec-quick > [data-ecvraag="huishouden"] { grid-area: huis; }
  .ec-quick > [data-ecvraag="zon"] { grid-area: zon; }
  .ec-quick > [data-ecvraag="ev"] { grid-area: ev; }
  .ec-quick > .ec-panel__foot { grid-area: foot; }
  .ec-quick > .ec-terugnaar { grid-area: terug; }
  .ec-quick > [data-ecvraag="ev"] { border-left: 1px solid var(--color-border-subtle); padding-left: var(--space-7); }
  .ec-quick [data-ecvraag="lev"] .ec-select { max-width: 440px; }
  :root:not(.ec-terug) .ec .ec-hero { padding-top: var(--space-7); padding-bottom: calc(var(--space-6) + var(--ec-overlap)); }
}
.ec-quick .ec-q__legend { font-size: var(--fs-body); font-weight: 650; }

/* De verdieping: een paneel met de vragen die de som nauwkeuriger maken. */
.ec-verfijn { margin-top: var(--space-5); padding: 0; }
.ec-verfijn > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) clamp(var(--space-5), 3.5vw, var(--space-7));
  border-radius: var(--radius-surface);
}
.ec-verfijn > summary::-webkit-details-marker { display: none; }
.ec-verfijn > summary:hover { background: var(--color-surface-sunken); }
.ec-verfijn > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.ec-verfijn__titel { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 650; letter-spacing: -.012em; color: var(--color-text-primary); }
.ec-verfijn__hint { margin: var(--space-1) 0 0; font-size: var(--fs-small); color: var(--color-text-secondary); max-width: 60ch; }
.ec-verfijn > summary .ec-icon { flex: none; width: 20px; height: 20px; color: var(--color-text-secondary); transform: rotate(90deg); transition: transform var(--dur-2) var(--ease-out); }
.ec-verfijn[open] > summary .ec-icon { transform: rotate(-90deg); }
.ec-verfijn[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ec-verfijn__body {
  margin: 0; padding: var(--space-5) clamp(var(--space-5), 3.5vw, var(--space-7)) clamp(var(--space-5), 3.5vw, var(--space-7));
  border-top: 1px solid var(--color-border-subtle);
}
.ec-verfijn__groep > * + * { margin-top: var(--space-5); }
.ec-verfijn__groep + .ec-verfijn__groep { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px dashed var(--color-border-subtle); }
.ec-verfijn .ec-lev { margin-top: 0; }

/* De uitsplitsing onder het bedrag: twee delen en de som, in de tweede stem. */
.ec-splitsing { list-style: none; margin: calc(-1 * var(--space-2)) 0 var(--space-3); padding: 0; display: grid; gap: var(--space-1); max-width: 36ch; }
.ec-splitsing li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: var(--fs-small); color: var(--color-text-secondary); }
.ec-splitsing li b { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--color-text-primary); white-space: nowrap; }
.ec-splitsing__som { border-top: 1px solid var(--color-border-subtle); padding-top: var(--space-1); }
.ec-splitsing__noot { margin: 0 0 var(--space-3); color: var(--color-text-tertiary); max-width: 46ch; }

/* De verdieping in de hoofdkaart: tekstlinks op één rij, over de volle breedte. */
.ec-top__verdieping { grid-column: 1 / -1; border-top: 1px solid var(--color-border-subtle); padding-top: var(--space-4); }
.ec-verdieping__kop { margin: 0 0 var(--space-2); color: var(--color-text-tertiary); }
.ec-verdieping { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.ec-verdieping button.ec-link { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ec-partnertop .zonaanbod, .ec-partnertop .partners { margin-top: var(--space-3); }
.ec-partnertop .vdtop-zin { max-width: 70ch; }

/* Het desktopraster van de hoofdkaart staat sinds UX 3.0 fase 2 in §15
   (.ec-top.ec-advies: conclusie links, actie rechts, verdieping eronder). */
/* Gestapeld (onder 860 px) met een partnerblok: het blok direct onder het
   bedrag en de uitsplitsing, de toelichting en de uitleg erna. Dat is de
   volgorde in de bron (ecHoofdHtml), dus hier is geen order nodig. */
@media (max-width: 859px) {
  /* De samenvatting van de situatie compacter: de feiten kleiner, de twee
     acties naast elkaar. */
  .ec-sum { padding: var(--space-4); }
  .ec-sum__facts { font-size: var(--fs-small); }
  .ec-sum__acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
}
.ec-quick__kop .ec-progress__naam { font-size: var(--fs-h3); }
.ec-quick { gap: var(--space-4); }

/* ── 11. Mobiel: de eerste aanbieder direct bij de conclusie (8-10-2026) ──
   Gemeten op 375 × 812 met een gewoon profiel stond de eerste partnerknop
   1.466 px diep (1,8 scherm). Daarvoor stonden de profielkaart (227 px), de
   toelichting bij de som (105 + 86 px) en een inleiding van 144 px boven de
   aanbieders. Onder 860 px komt de top drie nu direct na het bedrag en de
   uitsplitsing; de toelichting, de uitleg en de verdieping volgen eronder.
   Er verdwijnt niets, alleen de volgorde en de maat veranderen. De volgorde
   zit in de bron (ecHoofdHtml), niet in CSS: schermlezer en tabtoets lopen
   zo hetzelfde pad als het oog. */
.ec-top__toelichting > :first-child { margin-top: 0; }
@media (max-width: 859px) {
  /* Wie terugkomt: de titel van de pagina klein, zonder bovenregel. */
  :root.ec-terug .ec { --ec-overlap: 20px; }
  :root.ec-terug .ec .ec-hero { padding-top: var(--space-4); padding-bottom: calc(var(--space-4) + var(--ec-overlap)); }
  :root.ec-terug .ec .ec-hero__eyebrow { display: none; }
  :root.ec-terug .ec .ec-display { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.012em; }

  /* De profielkaart: label en feiten als één doorlopende regel, de twee
     acties als tekstlinks op één rij. Aanraakdoelen blijven 44 px hoog. */
  .ec-sum { padding: var(--space-3) var(--space-4); gap: 0 var(--space-5); }
  .ec-sum__text { display: block; font-size: .8125rem; line-height: 1.5; }
  .ec-sum__text > .ec-label { display: inline; margin-right: .6em; }
  .ec-sum__facts { display: inline; font-size: inherit; font-weight: 600; }
  .ec-sum__acties { gap: 0 var(--space-3); }
  .ec-sum__acties .ec-btn {
    min-height: 44px; padding: 0; border: 0; background: none; box-shadow: none;
    font-size: .78rem; font-weight: 620; color: var(--color-action);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  }
  .ec-sum__acties .ec-btn:hover { text-decoration-color: currentColor; background: none; }
  .ec-sum__acties .wisknop { min-height: 44px; font-size: .78rem; }

  /* De kop van de uitkomst: kleiner, en de rekenbasis in de kleine maat. */
  :root.ec-terug .ec .ec-uitkomst { margin-top: var(--space-5); }
  .ec-uitkomst__kop { gap: var(--space-1); margin-bottom: var(--space-4); }
  .ec-uitkomst__kop h2 { font-size: var(--fs-h2); }
  .ec-uitkomst__kop .ec-small { font-size: .8125rem; line-height: 1.45; }
}

/* Op een aanraakscherm is elke knop 44 px hoog (wattradar.css §2), ook een
   tekstknop. Midden in een zin rekte die de regel op: de rekenbasis boven de
   uitkomst kreeg zo twee gaten van 23 px. De aanvulacties staan daar nu op een
   eigen rij onder de zin, met dezelfde 44 px als aanraakdoel. */
@media (pointer: coarse) {
  .ec-basis__acties { display: flex; flex-wrap: wrap; column-gap: var(--space-4); }
  .ec-basis__punt { display: none; }
}

/* ── 12. Herziene invoer (8-10-2026): vier contracten, het huishouden, het niveau ──
   Koen: "met de huidige twee vragen te ver doorgeschoten in vereenvoudiging".
   De snelle check vraagt contract (vast, variabel, dynamisch, weet ik niet),
   leverancier, huishoudgrootte en jaarverbruik, zonnepanelen en een auto die
   thuis laadt, op één scherm. De uitkomst zegt op welk niveau hij rekent. */

/* Vier contracten: twee kolommen op een telefoon (het icoon wijkt, de titel
   en de korte uitleg blijven), vier staande kaarten vanaf 640 px. */
.ec-choices--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .ec-choices--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .ec-choices--4 { gap: var(--space-2); }
  .ec-choices--4 .ec-choice { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-2); min-height: 0; padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3); }
  .ec-choices--4 .ec-choice__title { font-size: .9375rem; }
  .ec-choices--4 .ec-choice__icon { display: none; }
  /* Op een telefoon alleen de vier namen, zoals in het concept van Koen; de
     uitleg staat achter "Waarom vragen we dit?". */
  .ec-choices--4 .ec-choice__hint { display: none; }
}

/* Onder 360 px past "Dynamisch" niet naast het vinkje in twee kolommen. */
@media (max-width: 359px) { .ec-choices--4 { grid-template-columns: minmax(0, 1fr); } }

.ec-quick__sub { margin: var(--space-1) 0 0; color: var(--color-text-secondary); }

/* Wat het profiel al weet: één rustige regel, met "Wijzig". */
.ec-bekend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-sunken); border-radius: var(--radius-control);
}
.ec-bekend__tekst { margin: 0; flex: 1 1 16rem; padding-block: var(--space-2); }
.ec-bekend__tekst .ec-label { margin-right: .6em; color: var(--color-text-tertiary); }
.ec-bekend__feiten { font-weight: 600; color: var(--color-text-primary); }
.ec-bekend__feiten span + span::before { content: "·"; margin: 0 .5em; color: var(--color-text-tertiary); }
.ec-bekend .linkbtn { min-height: 44px; }
.ec-quick .ec-lev .ec-q__hint { margin-top: var(--space-2); }

/* Huishoudgrootte en jaarverbruik: onder elkaar op een telefoon, naast
   elkaar zodra er ruimte is (de bron houdt de leesvolgorde: eerst wie er
   wonen, dan het getal dat daar voor gaat). */
.ec-huishouden { display: grid; gap: var(--space-4) var(--space-7); align-content: start; }
.ec-huishouden > * + * { margin-top: 0; }
@media (min-width: 640px) {
  .ec-huishouden { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* Het niveau van de uitkomst: drie streepjes en een naam. De naam draagt de
   betekenis; de kleur van de streepjes is alleen een hulp voor het oog. */
.ec-niveau { display: grid; gap: var(--space-1); }
.ec-niveau > p { margin: 0; }
.ec-niveau__kop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--fs-small); }
.ec-niveau__kop b { font-weight: 650; color: var(--color-text-primary); }
.ec-niveau__stap { color: var(--color-text-tertiary); }
.ec-niveau__balk { display: inline-flex; gap: 3px; }
.ec-niveau__balk i { display: block; width: 16px; height: 6px; border-radius: 3px; background: var(--color-border-default); }
.ec-niveau__balk i.is-aan { background: var(--color-action); }
.ec-niveau__uitleg { color: var(--color-text-secondary); max-width: 72ch; }

/* ── de vergelijking (herontwerp 9-10-2026) ────────────────────────────────
   Eén component op /leveranciers en in de energiecheck (vergelijkingHtml).
   Na Koens review van PR #96: de winnaar als donker merkvlak met logo, groot
   bedrag en kostenbalk; de nummers twee en drie compact ernaast; korte
   notities met een uitklap voor het waarom; ranglijst en rekenwijze onderaan.
   Het merkvlak is in licht en donker hetzelfde diepe teal (wit erop haalt
   ruim 7:1); de rest volgt de tokens en dus vanzelf het thema. Logo's zijn
   tegels van 2,5 : 1 met hun eigen achtergrond (site/img/lev, HERKOMST.md):
   altijd op die verhouding, nooit vervormd. */
.lvx {
  --lvx-win: #0A5A57; --lvx-win-2: #063F3D; --lvx-mint: #9BE7D8; --lvx-amber: #F2C14E; --lvx-koraal: #F2946B;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: var(--shadow); padding: clamp(16px, 2.4vw, 28px);
  display: grid; gap: clamp(14px, 1.8vw, 20px);
}
.lvx-kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; }
.lvx-eyebrow { margin: 0 0 4px; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); }
.lvx[data-modus="voorbeeld"] .lvx-eyebrow { color: var(--signal); }
.lvx-titel { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 650; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.lvx-basis { margin: 6px 0 0; font-size: .9rem; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lvx-profiel {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  font: inherit; font-size: .9rem; font-weight: 650; text-decoration: none; cursor: pointer;
  color: var(--brand); background: transparent; border: 1.5px solid var(--brand-line);
}
.lvx-profiel:hover { border-color: var(--brand); }
.lvx-profiel--sterk { background: var(--brand-soft); border-color: var(--brand); }
.lvx-profiel::after { content: "→"; margin-left: 8px; }
.lvx-niveau {
  display: inline-block; padding: 0 .55em; border: 1px solid var(--line); border-radius: 999px;
  font-size: .72rem; line-height: 1.7; font-weight: 650; color: var(--ink-2); white-space: nowrap;
}
.lvx-niveau[data-niveau="3"] { border-color: var(--brand); color: var(--brand); }

/* Het podium. */
.lvx-podium { display: grid; gap: 16px; }
@media (min-width: 900px) { .lvx-podium { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; } }
.lvx-win {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(155, 231, 216, .22), transparent 55%), linear-gradient(150deg, var(--lvx-win), var(--lvx-win-2));
  border-radius: 18px; padding: clamp(18px, 2.4vw, 28px); display: grid; gap: 14px; align-content: start;
}
.lvx-win__kop { display: flex; align-items: center; gap: 16px; }
.lvx-win__wie { min-width: 0; display: grid; gap: 4px; justify-items: start; }
.lvx-win__naam { margin: 0; font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 650; letter-spacing: -.015em; color: #fff; }
.lvx-win__type { font-size: .85rem; color: rgba(255, 255, 255, .78); }
.lvx-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  background: var(--lvx-mint); color: #053B33; font-size: .72rem; font-weight: 750; letter-spacing: .02em;
}
.lvx-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lvx-win__bedrag { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.lvx-euro { font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 650; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.lvx-euro__unit { font-size: .95rem; color: rgba(255, 255, 255, .8); }
.lvx-chips { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* De aanname achter het verschil met nu (geschatte vaste kosten): klein, maar bij de claim zelf. */
.lvx-aanname { margin: -2px 0 0; font-size: .8rem; line-height: 1.4; color: rgba(255, 255, 255, .78); max-width: 52ch; }
.lvx-chip { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .85rem; font-weight: 650; }
.lvx-chip--plus { background: var(--lvx-mint); color: #053B33; }
.lvx-chip--neutraal { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.lvx-win .lvx-niveau { border-color: rgba(255, 255, 255, .45); color: #fff; }
.lvx-balk { position: relative; display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .14); }
.lvx-balk i { display: block; height: 100%; }
.lvx-balk__afname { background: var(--lvx-mint); }
.lvx-balk__vast { background: var(--lvx-amber); }
.lvx-balk__kosten { background: var(--lvx-koraal); }
.lvx-balk .lvx-balk__terug { position: absolute; right: 0; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(4, 30, 29, .7) 0 4px, rgba(4, 30, 29, .25) 4px 8px); }
.lvx-legenda { list-style: none; margin: -4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .82rem; color: rgba(255, 255, 255, .8); }
.lvx-legenda b { color: #fff; font-weight: 650; font-variant-numeric: tabular-nums; }
.lvx-stip { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.lvx-stip.lvx-balk__terug { background: repeating-linear-gradient(135deg, #fff 0 2px, transparent 2px 4px); border: 1px solid rgba(255, 255, 255, .6); }
.lvx-actie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
.lvx-win .ec-btn--primary, .lvx-win .ec-btn--primary:hover {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: #fff; color: var(--lvx-win-2); border: 1px solid #fff; border-radius: 999px;
  min-height: 48px; padding: 0 24px; font-weight: 700; font-size: 1rem;
}
.lvx-win .ec-btn--primary:hover { box-shadow: 0 0 0 3px rgba(155, 231, 216, .55); }
.lvx-win .vdtop-label { color: rgba(255, 255, 255, .72); font-size: .75rem; }
.lvx-win a:not(.ec-btn) { color: #fff; }
.lvx-nee, .lvx-geenlink { margin: 4px 0 0; font-size: .9rem; color: rgba(255, 255, 255, .9); max-width: 48ch; }

/* Logo's: tegels van 2,5 : 1. */
.lvx-logo { flex: none; display: inline-flex; width: 72px; aspect-ratio: 2.5; border-radius: 7px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.lvx-logo--groot { width: clamp(108px, 12vw, 140px); border-radius: 10px; border-color: transparent; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5); }
.lvx-logo .levlogo { width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; }
.lvx-logo .levmono { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #0E1C1B; background: #fff; }

/* De nummers twee en drie. */
.lvx-runners { display: grid; align-content: start; gap: 10px; }
.lvx-runners__kop { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.lvx-runners ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lvx-run {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "rang logo wie bedrag" "rang logo doen doen";
  align-items: center; gap: 4px 12px; padding: 14px 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
}
.lvx-run__rang { grid-area: rang; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--ink-2); background: var(--surface-2); }
.lvx-run .lvx-logo { grid-area: logo; }
.lvx-run__wie { grid-area: wie; min-width: 0; display: grid; }
.lvx-run__wie b { font-weight: 650; color: var(--ink); }
.lvx-run__wie small, .lvx-run__bedrag small { font-size: .78rem; font-weight: 500; color: var(--ink-3); }
.lvx-run__bedrag { grid-area: bedrag; text-align: right; display: grid; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.lvx-run__doen { grid-area: doen; }
.lvx-runners__voet { margin: 0; }
.lvx-klein { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--ink-3); }

/* Notities: één zin, het waarom in een uitklap. */
.lvx-noten { display: grid; gap: 12px; }
@media (min-width: 720px) { .lvx-noten { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.lvx-noot { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border-left: 3px solid var(--brand-line); display: grid; gap: 4px; align-content: start; }
.lvx-noot--2027 { border-left-color: var(--warning); }
.lvx-noot--timing { border-left-color: var(--positive); }
.lvx-noot--nu { border-left-color: var(--signal); }
.lvx-noot__kop { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.lvx-noot__zin { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ink); }
.lvx-noot__actie { margin: 2px 0 0; }
.lvx-uitklap > summary, .lvx-alle > summary, .lvx-hoe > summary {
  display: inline-flex; align-items: center; min-height: 36px; cursor: pointer; list-style: none;
  font-size: .85rem; font-weight: 650; color: var(--brand); text-decoration: underline; text-underline-offset: 3px;
}
.lvx-uitklap > summary::-webkit-details-marker, .lvx-alle > summary::-webkit-details-marker, .lvx-hoe > summary::-webkit-details-marker { display: none; }
.lvx-uitklap > summary::after, .lvx-alle > summary::after, .lvx-hoe > summary::after { content: "▾"; margin-left: 6px; text-decoration: none; }
.lvx-uitklap[open] > summary::after, .lvx-alle[open] > summary::after, .lvx-hoe[open] > summary::after { content: "▴"; }
.lvx-uitklap p { margin: 4px 0 0; font-size: .85rem; line-height: 1.55; color: var(--ink-2); }
.lvx-wissel { font-size: .85rem; }

/* Onderaan: de ranglijst en de rekenwijze. */
.lvx-voet { display: flex; flex-wrap: wrap; gap: 4px 28px; border-top: 1px solid var(--line); padding-top: 10px; }
.lvx-voet > details[open] { flex: 1 1 100%; }
.lvx-rijen { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; }
.lvx-rijen li {
  display: grid; grid-template-columns: 28px 72px minmax(0, 1.2fr) minmax(0, 1fr) 110px minmax(150px, auto);
  align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line);
}
.lvx-rijen li.is-eerste { background: var(--brand-soft); border-radius: 10px; border-bottom-color: transparent; padding-inline: 8px; }
.lvx-rij__rang { font-weight: 700; color: var(--ink-3); text-align: center; }
.lvx-rij__wie { display: grid; min-width: 0; }
.lvx-rij__wie b { font-weight: 650; color: var(--ink); }
.lvx-rij__wie small { font-size: .78rem; color: var(--ink-3); }
.lvx-rij__balk { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.lvx-rij__balk i { display: block; height: 100%; background: var(--brand-line); border-radius: 4px; }
.lvx-rijen li.is-eerste .lvx-rij__balk i { background: var(--brand); }
.lvx-rij__bedrag { display: grid; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.lvx-rij__bedrag small { font-size: .75rem; font-weight: 500; color: var(--ink-3); }
.lvx-rij__doen { justify-self: end; }
@media (max-width: 719px) {
  .lvx-rijen li { grid-template-columns: 22px 60px minmax(0, 1fr) auto; grid-template-areas: "rang logo wie bedrag" "rang logo doen doen"; row-gap: 6px; }
  .lvx-rij__rang { grid-area: rang; }
  .lvx-rijen .lvx-logo { grid-area: logo; width: 60px; }
  .lvx-rij__wie { grid-area: wie; }
  .lvx-rij__bedrag { grid-area: bedrag; }
  .lvx-rij__doen { grid-area: doen; justify-self: start; }
  .lvx-rij__balk { display: none; }
}
.lvx-punten { margin: 8px 0 10px; padding-left: 1.1em; display: grid; gap: 6px; max-width: 86ch; }
.lvx-punten li { font-size: .85rem; line-height: 1.55; color: var(--ink-2); }
.lvx-punten b { color: var(--ink); font-weight: 650; }
.lvx--laden, .lvx--fout, .lvx--leeg { display: block; }
.lvx--laden .ec-skel { margin: 12px 0; }

/* /leveranciers: compacte kop, de keuzes in één regel, dan de vergelijking. */
#v-leveranciers .lvkop { max-width: none; margin-bottom: 14px; }
#v-leveranciers .lvkop h1 { font-size: clamp(1.7rem, 3vw, 2.25rem); margin-bottom: 4px; }
#v-leveranciers .lvkop .lead { margin: 0; max-width: 70ch; }
.lvbediening { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-bottom: 16px; }
.lvbediening .lvprofiel { margin: 0; flex: 1 1 100%; }
.lvbediening .tweeassen { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 0; }
.lvbediening .tweeassen .as { display: flex; align-items: center; gap: 10px; }
.lvbediening .tweeassen .as > .eyebrow { margin: 0; white-space: nowrap; }
.lvbediening .tweevraag { display: inline-flex; gap: 4px; }
.lvbediening .tweevraag button { min-height: 44px; padding: 6px 16px; }
.lvbediening .tweevraag button span { display: none; }
.lvbediening .mijnhuis { margin: 0 0 0 auto; }
.lvadvies { margin: 0 0 8px; }
.lvdeel-kop { margin: 36px 0 6px; font-size: 1.3rem; }
@media (max-width: 719px) {
  .lvbediening .tweeassen .as { flex-wrap: wrap; }
  .lvbediening .mijnhuis { margin: 0; }
  .lvx-run { padding: 12px; }
  .lvx-run .lvx-logo { width: 60px; }
}
.lvx-noot .linkbtn { justify-self: start; }
.lvx-win .vdtop-label { text-align: left; max-width: 30ch; }
.lvx-voet__markering { flex: 1 1 100%; }
/* Op /leveranciers staat de Mijn-huis-regel als één regel naast de keuzes. */
.lvbediening .mijnhuis .kwaliteit { display: none; }
@media (min-width: 900px) { .lvx-podium { align-items: start; } }
/* Eén notitie over de volle breedte: kop en zin links, de handelingen rechts. */
@media (min-width: 720px) {
  .lvx-noten[data-aantal="1"] .lvx-noot { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; }
  .lvx-noten[data-aantal="1"] .lvx-noot__doen { grid-column: 2; grid-row: 1 / span 2; justify-items: end; }
}
#v-leveranciers.lv-voorbeeld .lvbediening .mijnhuis { display: none; }
.lvx-win > .lvx-badge { justify-self: start; }
.lvx-noot__doen { display: grid; gap: 2px; justify-items: start; }
@media (max-width: 719px) {
  .lvx-win__kop { gap: 12px; }
  .lvx-logo--groot { width: 104px; }
  .lvx-run { grid-template-columns: 60px minmax(0, 1fr) auto; grid-template-areas: "logo wie bedrag" "doen doen doen"; row-gap: 10px; }
  .lvx-run__rang { display: none; }
  .lvx-run__wie small { display: block; }
}
/* De energiecheck voor wie terugkomt: ook op desktop een kleine kop, zodat
   de vergelijking en de eerste aanbieder in het eerste scherm staan
   (herontwerp 9-10-2026; onder 860 px gold dit al sinds 8-10). */
@media (min-width: 860px) {
  :root.ec-terug .ec .ec-hero { padding-top: var(--space-5); padding-bottom: calc(var(--space-5) + var(--ec-overlap, 40px)); }
  :root.ec-terug .ec .ec-hero__eyebrow { display: none; }
  :root.ec-terug .ec .ec-display { font-size: var(--fs-h2); }
  :root.ec-terug .ec .ec-uitkomst { margin-top: var(--space-6); }
}
.lvx-win { gap: 12px; }
@media (min-width: 860px) {
  :root.ec-terug .ec #h-ec-uitkomst { font-size: var(--fs-h2); }
}
@media (max-width: 719px) {
  #v-leveranciers .lvkop .lead { display: none; }
}
.lvx-verder { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-left: auto; font-size: .85rem; }
.lvx-verder .linkbtn { min-height: 36px; }

/* ── 17. Wattradar 4.0 fase 2 (21-10-2026): /eigen-verbruik commercieel ──
   Eén kaart in de opmaak van het adviesoverzicht: links de zelfverbruikskant
   (a) en het verschuifvoordeel (c), rechts het contract (b) met de top drie
   en directe knoppen; de uitgebreide tool als tekstlink. De tool zelf
   (/eigen-verbruik/berekenen) houdt de bestaande opmaak en krijgt alleen
   de weg terug bovenaan. */
#v-eigen .lvkop { max-width: none; margin-bottom: 12px; }
#v-eigen .lvkop .lead { max-width: 64ch; }
.evk { margin: 0 0 12px; }
.evk-kaart .ec-top__title { max-width: 22ch; }
.evk-kaart .ec-top__conclusie > .eyebrow, .evk-kaart .ec-top__actie > .eyebrow, .evk-kaart .ec-top__meer > .eyebrow { margin-bottom: var(--space-2); }
.evk-contract { margin: 0 0 var(--space-3); font-size: 1.05rem; line-height: 1.35; }
.evk-contract .ec-niveau-chip { vertical-align: baseline; }
.evk-nuance { margin: var(--space-2) 0 0; max-width: 60ch; }
.evk-los { margin: var(--space-2) 0 0; max-width: 52ch; }
.evk-extra { margin: 0; max-width: 52ch; font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-secondary); }
.evk-extra b { color: var(--color-text-primary); font-size: 1.05rem; }
.evk-toollink { margin-top: var(--space-3); }
/* De derde post (verschuiven) en de toollink links onder het zelfverbruik, zodat
   de linkerkolom niet leeg blijft naast de top drie (review 21-10-2026). */
.ec-top__meer { min-width: 0; }
@media (min-width: 860px) {
  .ec .ec-top.ec-advies.has-partner.evk-kaart {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: 'conclusie actie' 'meer actie' 'verdieping verdieping';
    grid-template-rows: auto 1fr auto;
  }
  .evk-kaart .ec-top__meer { grid-area: meer; align-self: start; margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
  .evk-kaart .ec-top__conclusie .ec-top__title { max-width: none; }
}
.evk-verdieping { margin-top: 1rem; max-width: 72ch; }
.evk-verdieping h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.evk-verdieping p { margin: 0 0 .6rem; font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.evk-verdieping .fijn { max-width: 72ch; }
.evtool__terug { margin: 0 0 .5rem; }
.evtool__terug .linkbtn { font-size: .9rem; }
@media (max-width: 859px) {
  #v-eigen .lvkop .eyebrow { display: none; }
  #v-eigen .lvkop h1 { font-size: 1.25rem; line-height: 1.2; margin-bottom: 4px; }
  #v-eigen .lvkop .lead { display: none; }
  .ec .ec-top.ec-advies.evk-kaart { padding: var(--space-4) var(--space-4) var(--space-5); row-gap: var(--space-2); grid-template-areas: 'conclusie' 'actie' 'meer' 'verdieping'; }
  .evk-kaart .ec-top__meer { grid-area: meer; }
  .evk-kaart .ec-top__title { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
  .evk-kaart .ec-money { margin-bottom: var(--space-1); }
  .evk-kaart .ec-top__waarom, .evk-nuance { font-size: var(--fs-small); line-height: 1.45; }
  .evk-los, .evk-extra { font-size: .8125rem; }
  /* De eerste aanbodknop binnen 775 px (ontwerp-GO fase 2, acceptatie 2):
     de profielkaart zonder toelichting en strakker op de titel, de top drie
     zonder inleidende zin (het bedrag en de kop erboven zeggen al wat het
     is). Er verdwijnt niets dat de som verandert; alle links blijven. */
  #v-eigen .lvkop { margin-bottom: 4px; }
  #v-eigen .mijnhuis { margin-top: .15rem; }
  .evk-kaart .ec-top__conclusie .ec-top__title { max-width: none; }
  .evk-kaart .ec-money { font-size: 2.25rem; }
  .evk-kaart .ec-money .ec-niveau-chip { margin-left: var(--space-1); }
  .evk-contract { font-size: 1rem; margin-bottom: var(--space-2); }
  .ec .ec-top.ec-advies.evk-kaart { padding-top: var(--space-3); }
  .evk-kaart .ec-top__actie > .eyebrow { margin-bottom: 2px; }
  #v-eigen .mijnhuis { padding-top: 6px; padding-bottom: 6px; }
  /* De toelichting bij de profielkaart alleen als ze iets uitlegt (de ± van een schatting). */
  #v-eigen .mijnhuis .kwaliteit:not(.kwaliteit--schatting) { display: none; }
  .evk-kaart .ec-partnertop--advies .vdtop-zin { display: none; }
  /* Fase 3: de kop "Direct bekijken" boven de kaart herhaalt op een telefoon
     de kop "Contractkosten" erboven; weg, zodat de eerste knop vrij van de
     tabbalk blijft (360 px). */
  .evk-kaart .ec-partnertop--advies .vdtop > .eyebrow { display: none; }
  .evk-kaart .ec-partnertop--advies .vdtop > .eyebrow { margin-bottom: var(--space-2); }
  .evk-nuance { margin-bottom: var(--space-2); }
}

/* ── 14. Intake na de art-direction-review (9-10-2026, PR 96) ──────────────
   "Te veel verticale ruimte, dubbele uitleg, te braaf." De vragen blijven
   dezelfde zes in dezelfde bronvolgorde; wat verandert is de compositie:
   - de kaart zo breed als de inhoudskolom, drie kolommen op desktop: het
     contract over de volle breedte, dan leverancier · huishouden en
     verbruik, dan panelen · auto · de knop (geen losse voetregel meer);
   - de contracten als lage, liggende kaarten in plaats van staande;
   - "Waarom?" als klein uitklapje rechts naast de vraag, de uitleg als
     zwevend vlak, zodat een dichte uitleg geen eigen regel kost;
   - een gekozen antwoord is onmiskenbaar: massief merkteal.
   Lege plekken: de vragen staan op span, niet op vaste vakken, zodat een
   vraag die het profiel al weet (hidden) geen gat achterlaat. */

/* Hero: één zin, compacter, zodat de vragen hoger beginnen. */
@media (min-width: 960px) {
  :root:not(.ec-terug) .ec .ec-hero { padding-top: var(--space-6); padding-bottom: calc(var(--space-5) + var(--ec-overlap)); }
  :root:not(.ec-terug) .ec .ec-hero .ec-display { font-size: clamp(2.25rem, 1rem + 2vw, 2.75rem); }
  :root:not(.ec-terug) .ec .ec-hero__punten { margin-top: var(--space-3); }
}

/* De kaart over de inhoudskolom, met de overlap als inspringing. */
.ec-wizard { max-width: 1040px; }
.ec-privacy { max-width: 1040px; }

/* Liggende contractkaarten: icoon, naam met korte uitleg, het vinkje. */
@media (min-width: 640px) {
  .ec-choice--rij {
    grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    gap: var(--space-3); min-height: 76px; padding: var(--space-3);
  }
  .ec-choice--rij .ec-choice__icon { width: 36px; height: 36px; border-radius: 9px; }
  .ec-choice--rij .ec-choice__hint { font-size: .8125rem; line-height: 1.35; }
}
@media (min-width: 640px) and (max-width: 959px) {
  .ec-choices--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Gekozen: massief merkteal in het icoon en in het segment, met een lichte
   lift. De rand en het vinkje blijven de drager voor wie geen kleur ziet. */
.ec-choice:has(.ec-choice__input:checked) {
  box-shadow: inset 0 0 0 1px var(--color-action), 0 8px 20px -14px color-mix(in srgb, var(--color-action) 80%, transparent);
}
.ec-choice:has(.ec-choice__input:checked) .ec-choice__icon { background: var(--color-action); color: var(--color-action-text); }
.ec-choice:has(.ec-choice__input:checked) .ec-choice__title { color: var(--color-action); }
.ec-seg__opt input:checked + span {
  background: var(--color-action); color: var(--color-action-text);
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--color-action) 80%, transparent);
}

/* "Waarom?" rechts naast de vraag; open zweeft de uitleg eronder. */
.ec-quick .ec-q { position: relative; }
/* Een legend staat in de rand van zijn fieldset, niet in de inhoud: top 0
   viel zo ónder de vraag, in de kaarten. Zwevend gedraagt hij zich als
   gewone inhoud (de bekende fieldset-truc); het volgende element begint
   eronder. */
.ec-quick fieldset.ec-q > legend { float: left; width: 100%; }
.ec-quick fieldset.ec-q > legend + * { clear: both; }
.ec-quick .ec-q:has(> .ec-why) > .ec-q__legend { padding-right: 5.5rem; }
.ec-quick #ecPanelenVeld > .ec-q__legend { padding-right: 8.5rem; }
/* Vragen naast elkaar beginnen op dezelfde hoogte: de oude marges van
   gestapelde vragen (.ec-lev, .ec-q + .ec-q) gelden hier niet; de grid-gap
   doet de afstand. */
.ec-quick .ec-lev, .ec-quick .ec-q + .ec-q, .ec-quick .ec-stap > * + * { margin-top: 0; }
.ec-quick .ec-stap { display: grid; gap: var(--space-4); align-content: start; }
/* De kop van de kaart op één regel: de vraag en de tijd. */
.ec-quick__kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); }
.ec-quick__kop > .ec-label { display: none; }
.ec-quick__kop .ec-quick__sub { margin: 0; color: var(--color-text-tertiary); }
.ec-quick .ec-why { position: absolute; top: 0; right: 0; margin: 0; z-index: 3; }
.ec-quick .ec-why > summary { min-height: 24px; padding: 0; font-size: .8125rem; color: var(--color-text-tertiary); }
.ec-quick .ec-why > summary:hover { color: var(--color-action); }
.ec-quick .ec-why[open] > summary { color: var(--color-action); }
.ec-quick .ec-why__body {
  position: absolute; right: 0; top: calc(100% + 6px);
  width: min(36ch, calc(100vw - 48px)); margin: 0;
  background: var(--color-surface-raised); color: var(--color-text-secondary);
  border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-3);
}

/* De korte regels onder een vraag: één rustige maat. */
.ec-quick .ec-q__na, .ec-quick .ec-q__hint { font-size: .8125rem; line-height: 1.45; color: var(--color-text-tertiary); }
.ec-quick .ec-q__hint { margin: var(--space-2) 0 0; }
.ec-quick .ec-q__na:empty { display: none; }
.ec-quick .ec-invul { display: flex; flex-wrap: nowrap; }
.ec-quick .ec-invul input { flex: 1 1 auto; width: auto; min-width: 0; max-width: 11rem; }
.ec-quick .ec-invul span { white-space: nowrap; }

@media (min-width: 960px) {
  .ec-quick {
    grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: none;
    column-gap: var(--space-6); row-gap: var(--space-6);
  }
  /* De vaste vakken uit §10 los: even specifiek, en later in het bestand. */
  .ec-quick > .ec-quick__kop, .ec-quick > .ec-bekend, .ec-quick > [data-ecvraag], .ec-quick > .ec-panel__foot, .ec-quick > .ec-terugnaar { grid-area: auto; }
  .ec-quick > .ec-quick__kop, .ec-quick > .ec-bekend, .ec-quick > [data-ecvraag="contract"], .ec-quick > .ec-terugnaar { grid-column: 1 / -1; }
  .ec-quick > [data-ecvraag="lev"] { grid-column: span 1; }
  .ec-quick > [data-ecvraag="huishouden"] { grid-column: span 2; column-gap: var(--space-6); }
  .ec-quick > [data-ecvraag="zon"], .ec-quick > [data-ecvraag="ev"] { grid-column: span 1; }
  .ec-quick > [data-ecvraag="ev"] { border-left: 0; padding-left: 0; }
  .ec-quick [data-ecvraag="lev"] .ec-select { max-width: none; }
  .ec-quick .ec-choices--kort { max-width: none; }
  /* De knop in de laatste kolom, op de hoogte van de ja/nee-kaarten ernaast
     (de hoogte van één vraagregel erboven), de noot eronder. Zo blijft hij
     staan als de vraag naar het aantal panelen erbij komt. */
  .ec-quick > .ec-panel__foot {
    grid-column: -2 / -1; align-self: start;
    flex-direction: column-reverse; align-items: stretch; gap: var(--space-3);
    margin: 0; padding: calc(var(--fs-body) * 1.3 + var(--space-3)) 0 0; border: 0;
  }
  .ec-quick > .ec-panel__foot .ec-wizard__verder { margin: 0; width: 100%; justify-content: center; }
  .ec-quick .ec-quick__noot { flex: 0 0 auto; max-width: none; }
}
@media (max-width: 959px) {
  .ec-quick > .ec-panel__foot .ec-wizard__verder { margin-left: 0; width: 100%; justify-content: center; }
}

/* ── 15. UX 3.0, fase 2 (19-10-2026, issue #116): intake in drie lagen, één advies ──
   Echte gebruikers vonden de check te technisch en te tekstzwaar. De intake
   staat nog op één scherm, maar in drie lagen: de twee verplichte vragen
   bovenaan, "Voor een betere schatting" (huishouden, jaarverbruik) eronder,
   en "Meer over mijn situatie" (leverancier, auto) als uitklap in hetzelfde
   scherm. De uitkomst is één kaart (adviesoverzicht, .ec-advies) met titel
   in handelingstaal, één bedrag, het waarom in twee zinnen en één actie;
   eronder hooguit twee adviesregels (.ec-alt__rij), het 2027-risico apart,
   en de volledige contractvergelijking (.lvx) als uitklap. Beide onderdelen
   zijn bedoeld als de gedeelde varianten "adviesoverzicht" en "adviesregel"
   uit het plan, voor hergebruik op de rekentools in fase 4. */

/* De intake: contract, zonnepanelen, de uitklap met de optionele vragen, de knop. */
.ec-meerover { border-top: 1px solid var(--color-border-subtle); padding-top: var(--space-2); }
.ec-meerover > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3);
  min-height: 48px; padding: var(--space-2) 0; border-radius: 10px;
}
.ec-meerover > summary::-webkit-details-marker { display: none; }
.ec-meerover > summary:hover .ec-meerover__titel { color: var(--color-action-hover); }
.ec-meerover > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.ec-meerover__titel { grid-column: 1; font-weight: 650; color: var(--color-action); }
.ec-meerover__hint { grid-column: 1; margin: 0; }
.ec-meerover > summary .ec-icon { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--color-text-secondary); transform: rotate(90deg); transition: transform var(--dur-2) var(--ease-out); }
.ec-meerover[open] > summary .ec-icon { transform: rotate(-90deg); }
.ec-meerover__body { display: grid; gap: var(--space-5); padding-top: var(--space-3); padding-bottom: var(--space-2); }
.ec-meerover__body .ec-huishouden { gap: var(--space-4) var(--space-6); }
.ec-meerover__body .ec-lev { margin-top: 0; }
.ec-meerover__body .ec-stap + .ec-stap { margin-top: 0; }
.ec-quick .ec-stap[hidden] { display: none; }
@media (min-width: 960px) {
  /* Het contract over de volle breedte, de zonnepanelen links met de knop
     eronder, de uitklap (op desktop open bij de eerste tekening) rechts.
     Zet de plaatsing van §14 (drie kolommen, auto) per blok terug. */
  .ec-quick {
    grid-template-areas: 'kop kop' 'bekend bekend' 'contract contract' 'zon foot' 'meer meer' 'terug terug';
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    row-gap: var(--space-5);
  }
  .ec-quick > .ec-quick__kop { grid-area: kop; }
  .ec-quick > .ec-bekend { grid-area: bekend; }
  .ec-quick > [data-ecvraag="contract"] { grid-area: contract; }
  .ec-quick > [data-ecvraag="zon"] { grid-area: zon; }
  .ec-quick > .ec-terugnaar { grid-area: terug; }
  .ec-quick > .ec-meerover { grid-area: meer; }
  .ec-quick > .ec-panel__foot {
    grid-area: foot; grid-column: auto; align-self: start;
    flex-direction: column-reverse; align-items: stretch; gap: var(--space-3);
    /* Op de hoogte van de ja/nee-kaarten ernaast (de legend erboven). */
    margin: 0; padding: calc(var(--fs-body) * 1.3 + var(--space-3)) 0 0; border: 0;
  }
  .ec-quick > .ec-panel__foot .ec-wizard__verder { margin: 0; width: 100%; justify-content: center; }
  .ec-quick .ec-quick__noot { flex: 0 0 auto; max-width: none; }
  .ec-meerover__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-7); }
  .ec-meerover__body .ec-select { max-width: 440px; }
}
/* Op een telefoon een compacte hero voor een nieuwe bezoeker: de titel in de
   H1-maat, één regel lead, de twee vinkjes op één rij. De eerste vraag komt
   zo eerder in beeld (gemeten op 390 × 844, zie docs/ux3/FASE2.md). */
@media (max-width: 959px) {
  /* Nieuwe bezoeker op een telefoon: de titel in de H2-maat en één korte
     lead; de vinkjes staan al op de startpagina. De knop hoort op 390 × 844
     in het eerste zicht (review 20-10-2026). */
  :root:not(.ec-terug) .ec .ec-hero { gap: var(--space-2); padding-top: var(--space-4); }
  :root:not(.ec-terug) .ec .ec-hero .ec-display { font-size: var(--fs-h2); max-width: none; }
  :root:not(.ec-terug) .ec .ec-hero__lead { margin-top: var(--space-1); font-size: var(--fs-small); line-height: 1.45; }
  :root:not(.ec-terug) .ec .ec-hero__punten { display: none; }
  .ec-quick__kop .ec-progress__naam { font-size: var(--fs-h3); }
  .ec-quick__kop .ec-quick__sub { display: none; }
  .ec-quick { gap: var(--space-3); }
  .ec-quick .ec-choices--4 { gap: var(--space-2); }
  .ec-quick .ec-choices--4 .ec-choice { padding-block: var(--space-2); }
  .ec-quick .ec-choice:not(:has(.ec-choice__icon)) { min-height: 48px; padding-block: var(--space-2); }
  .ec-quick .ec-panel__foot { margin-top: 0; padding-top: var(--space-3); }
  .ec-meerover > summary { min-height: 44px; }
}

/* De hoofdkaart (adviesoverzicht). Bronvolgorde: conclusie, actie, verdieping. */
.ec-advies { gap: var(--space-5); }
.ec-advies .ec-top__title { margin: 0 0 var(--space-3); max-width: 20ch; }
.ec-advies .ec-money { margin: 0 0 var(--space-3); }
.ec-top__waarom { margin: 0; color: var(--color-text-secondary); line-height: 1.55; max-width: 52ch; }
.ec-advies .ec-kansbasis { margin-top: var(--space-3); }
.ec-advies .ec-splitsing { margin-bottom: var(--space-4); }
.ec-top__actie { display: grid; gap: var(--space-3); min-width: 0; }
.ec-top__actie .vdtop { margin: 0; }
.ec-top__actie .eyebrow { color: var(--color-action); }
.ec-advies .ec-top__verdieping { grid-column: 1 / -1; display: grid; gap: var(--space-3); border-top: 1px solid var(--color-border-subtle); padding-top: var(--space-4); }
.ec-advies .ec-verdieping { gap: var(--space-2) var(--space-5); }
.ec-top__hoe { margin: 0; }
.ec-top__hoe > summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: var(--fs-small); font-weight: 560; color: var(--color-text-secondary);
  text-decoration: underline dotted; text-underline-offset: 3px; min-height: 28px;
}
.ec-top__hoe > summary::-webkit-details-marker { display: none; }
.ec-top__hoe > summary:hover { color: var(--color-text-primary); }
.ec-top__hoe > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.ec-top__hoe-body { display: grid; gap: var(--space-2); margin-top: var(--space-2); max-width: 70ch; }
.ec-top__hoe-body p { margin: 0; font-size: var(--fs-small); color: var(--color-text-secondary); line-height: 1.55; }
.ec-top__hoe-body .ec-splitsing__noot { margin: 0; }
/* Twee kolommen alleen met een partnerblok of de winnaar van het advies:
   een losse knop staat onder de tekst, niet alleen in een lege kolom. */
@media (min-width: 860px) {
  .ec .ec-top.ec-advies { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'conclusie' 'actie' 'verdieping'; row-gap: var(--space-5); align-items: start; padding-block: 36px; }
  .ec .ec-top.ec-advies .ec-top__conclusie { grid-area: conclusie; }
  .ec .ec-top.ec-advies .ec-top__actie { grid-area: actie; }
  .ec .ec-top.ec-advies .ec-top__verdieping { grid-area: verdieping; }
  .ec .ec-top.ec-advies.has-partner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: 'conclusie actie' 'verdieping verdieping';
    grid-template-rows: auto auto; row-gap: var(--space-5); column-gap: var(--space-7);
    align-items: start; padding-block: 36px;
  }
  .ec .ec-top.ec-advies.has-partner .ec-top__actie { border-left: 1px solid var(--color-border-subtle); padding-left: var(--space-6); }
}

/* Het niveaulabel bij het bedrag en de kwalificatie eronder. */
.ec-niveau-chip {
  display: inline-block; vertical-align: middle; margin-left: var(--space-2); padding: 0 .6em;
  border: 1px solid var(--color-border-default); border-radius: 999px;
  font-family: var(--font-text); font-size: .72rem; line-height: 1.8; font-weight: 650; letter-spacing: 0; color: var(--color-text-secondary); white-space: nowrap;
}
.ec-niveau-chip[data-niveau="3"] { border-color: var(--color-action); color: var(--color-action); }
.ec-top__kwal { margin: calc(-1 * var(--space-2)) 0 var(--space-3); color: var(--color-text-tertiary); max-width: 52ch; }
/* Het zonaanbod als uitklap onder de actie: de vier echte aanbiedingen met hun labels. */
.ec-aanbod { margin-top: var(--space-2); }
.ec-aanbod > summary {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none;
  font-size: var(--fs-small); font-weight: 650; color: var(--color-action); text-decoration: underline; text-underline-offset: 3px;
}
.ec-aanbod > summary::-webkit-details-marker { display: none; }
.ec-aanbod > summary::after { content: "▾"; margin-left: 6px; text-decoration: none; }
.ec-aanbod[open] > summary::after { content: "▴"; }
.ec-aanbod > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.ec-aanbod .ec-partnertop { border-top: 0; padding-top: var(--space-2); }
/* "Waarmee rekenen we?": de grondslag als rustige uitklap onder de hoofdkaart. */
.ec-grond { margin-top: var(--space-3); }
.ec-grond > summary {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; padding: 0 var(--space-2);
  font-size: var(--fs-small); font-weight: 600; color: var(--color-text-secondary); text-decoration: underline dotted; text-underline-offset: 3px;
}
.ec-grond > summary::-webkit-details-marker { display: none; }
.ec-grond > summary::after { content: "▾"; margin-left: 6px; text-decoration: none; }
.ec-grond[open] > summary::after { content: "▴"; }
.ec-grond > summary:hover { color: var(--color-text-primary); }
.ec-grond > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.ec-grond__body { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); background: var(--color-surface-sunken); border-radius: var(--radius-card); }
.ec-grond__body .ec-basis { margin: 0; }
.ec-grond__body .ec-verdieping button.ec-link { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ec-alt__nee { font-size: var(--fs-small); }
.ec-alt__rij .ec-meer { margin-top: var(--space-1); }

/* De winnaar van het contractadvies in de hoofdkaart: logo, naam, bedrag, knop. */
.ec-winnaar { display: grid; gap: var(--space-3); }
.ec-winnaar > .eyebrow { margin: 0; }
.ec-winnaar__wie { display: flex; align-items: center; gap: var(--space-4); }
.ec-winnaar__wie > div { display: grid; gap: 2px; min-width: 0; }
.ec-winnaar__naam { font-family: var(--font-display); font-size: 1.25rem; font-weight: 650; letter-spacing: -.015em; color: var(--color-text-primary); }
.ec-winnaar__type, .ec-winnaar__jaar { font-size: var(--fs-small); color: var(--color-text-secondary); }
.ec-winnaar__jaar { font-variant-numeric: tabular-nums; }
.ec-winnaar__actie { margin-top: var(--space-1); }
.ec-winnaar__actie .vdtop-label { font-size: .75rem; color: var(--color-text-tertiary); }
.ec-winnaar__aanname { max-width: 52ch; }
.ec-winnaar .lvx-logo--groot { width: 108px; }

/* ── P0 #128 (20-10-2026): contract-first, de top drie in de hoofdkaart ──
   De top drie van het contractadvies staat als actie naast de conclusie
   (desktop) of direct eronder (telefoon), in de bestaande vdtop-opmaak: de
   nummer één met de volle knop, twee en drie met een rustige knop. Het
   oordeel bij een nee staat waar anders het bedrag staat. */
.ec-partnertop--advies { border-top: 0; padding-top: 0; display: grid; gap: var(--space-3); }
.ec-partnertop--advies .vdtop-zin { max-width: 60ch; }
.ec-partnertop--advies .ec-winnaar__aanname { margin: 0; }
.ec-partnertop--advies .ec-top__kwal { margin: 0; }
/* Op een telefoon hoort het eerste "Bekijk aanbod" in het eerste scherm
   (review P1 op #142, 20-10-2026): wie terugkomt ziet geen hero-titel meer
   (de situatiekaart zegt waar hij is), de koppen en de kaart zijn compacter. */
@media (max-width: 859px) {
  :root.ec-terug .ec .ec-hero .ec-display { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :root.ec-terug .ec .ec-hero { padding-top: var(--space-2); padding-bottom: calc(var(--space-2) + var(--ec-overlap)); gap: 0; }
  :root.ec-terug .ec .ec-uitkomst { margin-top: var(--space-3); }
  .ec-uitkomst__kop { margin-bottom: var(--space-2); }
  .ec .ec-top.ec-advies[data-sleutel="advies"] { padding: var(--space-4) var(--space-4) var(--space-5); row-gap: var(--space-3); }
  .ec-advies[data-sleutel="advies"] .ec-top__title { margin-bottom: var(--space-2); font-size: var(--fs-h3); }
  .ec-advies[data-sleutel="advies"] .ec-money { margin-bottom: var(--space-2); }
  .ec-advies[data-sleutel="advies"] .ec-top__waarom { font-size: var(--fs-small); line-height: 1.45; }
  .ec-partnertop--advies .vdtop-zin { font-size: var(--fs-small); }
  .ec-partnertop--advies .vdtop > .eyebrow { margin-bottom: var(--space-1); }
}
.ec-top__nee { margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: 1.25rem; font-weight: 650; }
.ec-top__nee .ec-niveau-chip { margin: 0; font-weight: 600; font-size: .8rem; }
@media (min-width: 860px) {
  .ec .ec-top.ec-advies.has-partner[data-sleutel="advies"] { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); }
}

/* De alternatieven (adviesregels): één lijst met haarlijnen, hooguit twee. */
.ec-alt { margin-top: var(--space-6); }
.ec-alt .ec-lijstkop { margin-top: 0; }
.ec-alt__lijst {
  margin: 0; padding: 0; list-style: none;
  background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card);
}
.ec-alt__rij { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); }
.ec-alt__rij + .ec-alt__rij { border-top: 1px solid var(--color-border-subtle); }
.ec-alt__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.ec-alt__titel { margin: 0; }
.ec-alt__waarde { margin: 0; }
.ec-alt__waarde .ec-money { flex-wrap: nowrap; white-space: nowrap; }
.ec-alt__rij--geen .ec-alt__waarde .ec-money--s, .ec-alt__rij--geen .ec-fact { font-size: 1.125rem; color: var(--color-text-secondary); letter-spacing: -.01em; }
.ec-alt__rij--geen .ec-fact small { color: var(--color-text-tertiary); }
.ec-alt__tekst { max-width: 62ch; }
.ec-alt__rij .ec-kansbasis { margin: 0; font-size: .8125rem; }
.ec-alt__rij > .ec-link { justify-self: start; margin-top: var(--space-1); }
.ec-alt__rij button.ec-link, .ec-verdieping button.ec-link { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ec-alt .adv-los { margin-top: var(--space-2); color: var(--color-text-tertiary); }
.ec-alt__rij--fout .ec-alt__titel { color: var(--color-warning); }

/* De uitklappen onder de kaart: meer kansen, en de volledige vergelijking. */
.ec-meer-uitklap, .ec-vergelijk { margin-top: var(--space-5); }
.ec-meer-uitklap > summary, .ec-vergelijk > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  list-style: none; cursor: pointer; min-height: 56px;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card);
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 650; letter-spacing: -.012em; color: var(--color-text-primary);
}
.ec-meer-uitklap > summary::-webkit-details-marker, .ec-vergelijk > summary::-webkit-details-marker { display: none; }
.ec-meer-uitklap > summary::after, .ec-vergelijk > summary::after { content: "▾"; color: var(--color-text-secondary); }
.ec-meer-uitklap[open] > summary::after, .ec-vergelijk[open] > summary::after { content: "▴"; }
.ec-meer-uitklap > summary:hover, .ec-vergelijk > summary:hover { border-color: var(--color-border-strong); }
.ec-meer-uitklap > summary:focus-visible, .ec-vergelijk > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.ec-meer-uitklap[open] > summary, .ec-vergelijk[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ec-meer-uitklap[open] > .ec-alt__lijst { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.ec-vergelijk__body { padding-top: var(--space-3); }
.ec-vergelijk .lvx { border-top-left-radius: 0; border-top-right-radius: 0; }
.ec-vergelijk .lvx-verder { display: none; } /* de verdieping staat al in de hoofdkaart */

/* Het nee en de fouttoestand als hoofdkaart. */
.ec-low h3 { margin: 0; }
.ec-low--fout { background: color-mix(in srgb, var(--color-warning) 5%, var(--color-surface-raised)); }
.ec-low .ec-actions { margin-top: var(--space-2); }

/* Het risico compact: één alinea en een link. */
.ec-risk > div > p:not([class]) { max-width: 62ch; }

/* ── 18. Wattradar 4.0 fase 3 (21-10-2026): de aanbodkaart en de bespaarkansen ──
   De kaart zelf (top3Html met spec.aanbod) staat in wattradar.css
   (.vdtop--aanbod). Hier: hooguit twee bespaarkansen ín de contractkaart
   (desktop links onder het advies, telefoon na de aanbieders), de groepen
   eronder (wat je kunt besparen, waar je rekening mee moet houden, wat nu
   niet rendabel is) en het podium van /leveranciers als aanbodkaart. */
.ec-top__kansen { min-width: 0; }
.ec-top__kansen > .eyebrow { margin-bottom: var(--space-2); color: var(--color-action); }
.ec-top__kansen .ec-alt__lijst--kaart .ec-alt__rij { padding: var(--space-3) var(--space-4); }
.ec-top__kansen .ec-alt__titel { font-size: var(--fs-small); }
.ec-top__kansen .ec-alt__waarde .ec-money--s { font-size: 1.1rem; }
.ec-top__kansen .ec-alt__tekst { font-size: .8125rem; }
.ec-kansen__los { margin: var(--space-2) 0 0; color: var(--color-text-tertiary); font-size: .78rem; }
@media (max-width: 859px) {
  .ec .ec-top.ec-advies.has-partner[data-sleutel="advies"] { grid-template-areas: 'conclusie' 'actie' 'kansen' 'verdieping'; }
  .ec .ec-top.ec-advies .ec-top__kansen { grid-area: kansen; padding-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); }
}
@media (min-width: 860px) {
  .ec .ec-top.ec-advies.has-partner[data-sleutel="advies"] {
    grid-template-areas: 'conclusie actie' 'kansen actie' 'verdieping verdieping';
    grid-template-rows: auto 1fr auto;
  }
  .ec .ec-top.ec-advies .ec-top__kansen { grid-area: kansen; align-self: start; padding-top: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
}
.ec-alt--rekening .ec-risk { margin-top: 0; }
.ec-alt--rekening .ec-risk + .ec-risk { margin-top: var(--space-3); }
.ec-alt--nietnu .ec-alt__lijst { background: var(--surface-2); }
/* /leveranciers: het podium als aanbodkaart, één kolom. */
.lvx-podium--aanbod { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.lvx-podium--aanbod .vdtop { margin: 0; }
.lvx-podium--aanbod .vdtop > .eyebrow { color: var(--brand); }
.lvx-podium--aanbod .lvx-nee { margin: 0; font-size: 1.05rem; }
.lvx-podium--aanbod .lvx-aanname { margin: 0; }
/* /leveranciers op een telefoon met een profiel (productreview op #147,
   21-10-2026): de situatie stond drie keer boven de vergelijking (de
   situatieregel, de profielkaart en de kop van de vergelijking), en de
   eerste aanbodknop viel op 360 px achter de tabbalk. De profielkaart is de
   ene profielweergave; de situatieregel houdt alleen haar knop, de kop van
   de pagina en van de vergelijking worden compacter. Alleen deze route. */
@media (max-width: 719px) {
  #v-leveranciers .lvkop .eyebrow { display: none; }
  #v-leveranciers .lvkop h1 { font-size: 1.35rem; line-height: 1.2; }
  #v-leveranciers .lvkop { margin-bottom: 8px; }
  #v-leveranciers .lvbediening { margin-bottom: 10px; gap: 8px 20px; }
  #v-leveranciers:not(.lv-voorbeeld) .lvprofiel .lvprofiel__zin { display: none; }
  #v-leveranciers:not(.lv-voorbeeld) .lvprofiel { padding: 6px 12px; }
  #v-leveranciers .lvx[data-modus="persoonlijk"] .lvx-eyebrow { display: none; }
}

/* ── 19. V3 /energiecheck (ontwerp ChatGPT, DESIGN-GO Koen 12-11-2026) ─────
   Vervangt de V1-opmaak van PR 2 (28-10-2026). Eén samenhangende pagina op
   de V3-tokens van wattradar.css (--color-*, --v3-*, --radius-*, --shadow-*)
   en de gedeelde knoppen (wr-btn): de hero met de niveaupil, de
   profielstrook, de intake als één kaart, de uitkomst als donkere hoofdkaart
   met de kaart "Jouw huidige contract" ernaast, en de vergelijking als rijen.
   Alles onder .ec.v1; /leveranciers deelt de intake, de rijen en deze
   regels (zijn eigen hero en kop staan in het blok "V1, PR 3" hieronder).
   Eén breedte: die van de pagina (1104 px), zoals de startpagina. */
.ec.v1 {
  margin: 0 auto; padding: 0 0 var(--space-7, 48px);
  color: var(--color-text-primary); font-family: var(--font);
}
.ec.v1 [hidden] { display: none !important; }
.ec.v1 h1, .ec.v1 h2, .ec.v1 h3 { font-family: var(--font-display, var(--disp)); letter-spacing: -.03em; line-height: 1.12; margin: 0; }
.ec.v1 p { margin: 0; }
.ec.v1 .v1-ico { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ec.v1 .v1-ico--s { width: 16px; height: 16px; }
.ec.v1 .v1-eyebrow, .ec.v1 .v1-kicker, .ec.v1 .v1-andere__eyebrow, .ec.v1 .v1-hk__vlag {
  display: block; margin: 0; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 800; color: var(--color-action);
}
.ec.v1 .v1-pil { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid var(--color-border-subtle); border-radius: 999px; background: var(--color-surface-raised); padding: 6px 12px; font-size: .78rem; font-weight: 700; white-space: nowrap; color: var(--color-text-primary); }
.ec.v1 .v1-pil:empty { display: none; }
.ec.v1 .v1-pil--groen { background: var(--color-brand-soft); border-color: transparent; color: var(--brand-deep); }
.ec.v1 .v1-pil--goud { background: var(--gold-bg); border-color: transparent; color: var(--gold-ink); }
.ec.v1 .v1-badge { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--color-brand-soft); color: var(--color-action); }
.ec.v1 .v1-badge--goud { background: var(--gold-bg); color: var(--gold-ink); }
.ec.v1 .v1-badge--klein { width: 36px; height: 36px; border-radius: 10px; }
.ec.v1 .v1-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--color-action);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.ec.v1 .v1-link:hover { text-decoration-color: currentColor; }
.ec.v1 .v1-link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.ec.v1 .v1-geschat { color: var(--gold-ink); font-weight: 700; }
.ec.v1 .v1-hint { font-size: .8125rem; color: var(--color-text-secondary); margin: 6px 0 0; line-height: 1.5; }
.ec.v1 .v1-netbeheer b { color: var(--color-text-primary); font-weight: 720; }
.ec.v1 .v1-netbeheer__keuze { gap: 10px 14px; }
.ec.v1 .v1-netbeheer__deel { display: grid; gap: 4px; font-size: .8125rem; font-weight: 650; color: var(--color-text-secondary); min-width: 0; flex: 1 1 160px; }
.ec.v1 .v1-netbeheer__deel select { width: 100%; }
.ec.v1 .v1-hint .v1-link { display: inline; min-height: 0; font-size: inherit; }
.ec.v1 p.v1-fout { font-size: .8125rem; color: var(--fout); font-weight: 700; margin: 6px 0 0; }
.ec.v1 p.v1-fout:empty { display: none; }
/* De ene knopvorm van de check: de gedeelde wr-btn; de oude .btn-knoppen
   (intake, foutkaart) krijgen dezelfde maat. */
.ec.v1 .v1-btn { min-height: 48px; border-radius: var(--radius-control); font-weight: 700; font-size: .95rem; gap: 10px; padding: 0 20px; }
.ec.v1 .v1-btn--vol { width: 100%; }
.ec.v1 .v1-btn__partner { margin-left: 2px; padding-left: 8px; border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent); font-size: .72rem; font-weight: 600; opacity: .85; }
.ec.v1 .v1-btn__uit { margin-left: 2px; }

/* De hero: eyebrow, kop en één zin; rechts de niveaupil. Geen vlak. */
.ec.v1 .v1-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 30px; flex-wrap: wrap; margin: var(--space-5, 24px) 0 var(--space-4, 16px); }
.ec.v1 .v1-hero__tekst { min-width: 0; flex: 1 1 520px; }
.ec.v1 .v1-hero h1 { margin: 8px 0 10px; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); line-height: 1.05; max-width: 15ch; }
.ec.v1 .v1-lead { color: var(--color-text-secondary); font-size: 1rem; line-height: 1.5; max-width: 40em; }

/* De profielstrook (ontwerppunt 3): jouw situatie in één regel en de ene wijzigactie. */
.ec.v1 .v1-profiel {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
  margin: 0 0 var(--space-5, 24px); padding: 14px 20px;
  background: color-mix(in srgb, var(--color-brand-soft) 55%, var(--color-surface-raised)); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card);
}
.ec.v1 .v1-profiel__tekst { min-width: 0; flex: 1 1 320px; }
.ec.v1 .v1-profiel__kop { display: block; font-weight: 750; font-size: .95rem; }
.ec.v1 .v1-profiel__feiten { margin-top: 3px; font-size: .875rem; line-height: 1.5; color: var(--color-text-secondary); }
.ec.v1 .v1-profiel__feiten > span + span::before { content: ' · '; }
.ec.v1 .v1-profiel__knop {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 750 .95rem/1.2 var(--font); color: var(--color-action);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.ec.v1 .v1-profiel__knop:hover { text-decoration-color: currentColor; }
.ec.v1 .v1-profiel__knop:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
/* De profielchip van /leveranciers (zijn eigen hero, fase C). */
.ec.v1 .v1-chip { position: relative; display: flex; align-items: center; gap: 11px; max-width: 470px; padding: 8px 8px 8px 14px; border-radius: 15px; border: 1px solid var(--color-border-subtle); background: var(--color-surface-raised); flex: none; }
.ec.v1 .v1-chip .v1-badge { width: 34px; height: 34px; border-radius: 11px; }
.ec.v1 .v1-chip__kop { font-size: .9rem; font-weight: 750; letter-spacing: -.01em; min-width: 0; }
.ec.v1 .v1-chip__knop { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--color-action); border-radius: var(--radius-control); background: var(--color-surface-raised); color: var(--color-action); font: 750 .85rem/1 var(--font); white-space: nowrap; cursor: pointer; }
.ec.v1 .v1-chip__knop:hover { background: var(--color-brand-soft); }

/* De intake: één kaart, de vragen in twee kolommen vanaf 960 px; de keuzes
   als losse knoppen zoals op de startpagina. */
.ec.v1 .v1-intake {
  display: block; margin: 0 0 var(--space-5, 24px); padding: 22px 24px 20px;
  background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-surface); box-shadow: var(--shadow-1, none);
}
.ec.v1 .v1-intake__kopregel { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.ec.v1 .v1-intake__kop { font-size: 1.6rem; }
.ec.v1 .v1-intake__kop:focus-visible { outline: none; }
.ec.v1 .v1-voortgang { margin: 0; padding: 5px 12px; border-radius: 999px; background: var(--color-brand-soft); color: var(--brand-deep); font-size: .78rem; font-weight: 750; white-space: nowrap; }
.ec.v1 .v1-intro { font-size: .875rem; color: var(--color-text-secondary); margin: 4px 0 8px; line-height: 1.5; max-width: 72ch; }
.ec.v1 .v1-vraag { border: 0; margin: 0; min-width: 0; padding: 12px 0; }
.ec.v1 .v1-vraag__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0; margin: 0 0 9px; font: 720 1rem/1.3 var(--font); letter-spacing: -.01em; width: 100%; }
.ec.v1 .v1-optioneel { font-size: .72rem; color: var(--color-text-tertiary, var(--muted)); font-weight: 650; white-space: nowrap; margin-left: 6px; }
.ec.v1 .v1-keuze { display: flex; flex-wrap: wrap; gap: 8px; }
.ec.v1 .v1-keuze label {
  position: relative; display: inline-grid; place-items: center; min-height: 44px; min-width: 64px; margin: 0; padding: 0 16px;
  border: 1.5px solid var(--color-border-default); border-radius: var(--radius-control); background: var(--color-surface-raised);
  font-size: .9rem; font-weight: 650; color: var(--color-text-primary); cursor: pointer; text-align: center; line-height: 1.2;
}
.ec.v1 .v1-keuze label:hover { border-color: var(--color-action); }
.ec.v1 .v1-keuze input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.ec.v1 .v1-keuze label:has(input:checked) { border-color: var(--color-action); background: var(--color-brand-soft); color: var(--brand-deep); box-shadow: inset 0 0 0 1px var(--color-action); }
.ec.v1 .v1-keuze label:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.ec.v1 .v1-vervolg { margin: 12px 0 0; padding: 14px 16px; background: var(--color-surface-sunken); border-radius: var(--radius-card); display: grid; gap: 12px; }
.ec.v1 .v1-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Alleen het directe kind is het veldlabel (de keuzes zijn ook labels). */
.ec.v1 .v1-veld > label, .ec.v1 .v1-veld__label { display: block; font-size: .875rem; font-weight: 700; margin: 0 0 6px; }
.ec.v1 .v1-invoer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ec.v1 .v1-invoer input, .ec.v1 .v1-invoer select { font: 600 .95rem/1.2 var(--font); color: var(--color-text-primary); background: var(--color-surface-raised); border: 1.5px solid var(--color-border-default); border-radius: var(--radius-control); padding: 11px 14px; min-height: 46px; width: 160px; }
.ec.v1 .v1-invoer input:focus-visible, .ec.v1 .v1-invoer select:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px; }
.ec.v1 .v1-invoer input:disabled { opacity: .5; }
.ec.v1 .v1-invoer select { width: 100%; max-width: 340px; appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%), linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.ec.v1 .v1-invoer span { font-size: .8125rem; color: var(--color-text-secondary); }
.ec.v1 .v1-aantal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ec.v1 .v1-weetniet { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border: 1.5px solid var(--color-border-default); border-radius: var(--radius-control); background: var(--color-surface-raised); font: 650 .9rem/1 var(--font); color: var(--color-text-primary); cursor: pointer; margin: 0; }
.ec.v1 .v1-weetniet input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.ec.v1 .v1-vink { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid currentColor; display: grid; place-items: center; flex: none; }
.ec.v1 .v1-weetniet:has(input:checked) { background: var(--color-brand-soft); color: var(--brand-deep); border-color: var(--color-action); }
.ec.v1 .v1-weetniet:has(input:checked) .v1-vink::after { content: ''; width: 8px; height: 4px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-1px) rotate(-45deg); }
.ec.v1 .v1-weetniet:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.ec.v1 .v1-verbruikrij { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 8px; }
.ec.v1 .v1-verbruikrij .v1-hint { margin: 0; }
.ec.v1 .v1-verbruikrij .v1-hint:empty { display: none; }
.ec.v1 .v1-tekstknop { background: none; border: 0; padding: 8px 0; font: 700 .875rem/1.2 var(--font); color: var(--color-action); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
.ec.v1 .v1-veld--verbruik { margin-top: 10px; }
.ec.v1 .v1-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.ec.v1 .v1-acties .v1-btn--vol { flex: 0 1 300px; width: auto; }
.ec.v1 .v1-bewaar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: .8125rem; color: var(--color-text-secondary); margin-top: 12px; }
.ec.v1 .v1-wis { font-size: .8125rem; color: var(--color-text-secondary); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.ec.v1 .v1-terugnaar { margin-top: 8px; font-size: .875rem; }
.ec.v1 .v1-adres { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ec.v1 .v1-adres .v1-invoer input { width: 100%; max-width: 340px; }
.ec.v1 .v1-weetniet--rij { margin: 0 0 10px; }

/* De uitkomst: de kop is er alleen voor schermlezers (de hero en de kaarten
   dragen haar); de hoofdkaart en de kaart "Jouw huidige contract" naast
   elkaar vanaf 960 px, de vergelijking eronder. */
.ec.v1 .v1-sectiekop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.ec.v1 .v1-sectiekop h2 { font-size: 1.6rem; }
.ec.v1 .v1-sectiekop h2:focus-visible { outline: none; box-shadow: none; }
.ec.v1 .v1-sectiekop p { font-size: .875rem; color: var(--color-text-secondary); margin-top: 4px; }
.ec.v1 .v1-sectiekop--meer { margin-top: clamp(32px, 4vw, 48px); }
.ec.v1 .v1-resultaat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }

/* De hoofdkaart: het donkere V3-vlak, zoals de uitgelichte korting op de
   startpagina. Eén groot bedrag in de limoentint, het bespaarblok, de
   korting, de ene knop en Prijsdetails. */
.ec.v1 .v1-kaart.v1-sc--hoofd {
  position: relative; overflow: hidden; display: block; padding: 24px 20px 18px; border: 0; border-radius: var(--radius-surface);
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--brand) 38%, var(--v3-diep)) 0%, var(--v3-diep) 62%);
  color: var(--v3-op-diep); box-shadow: var(--shadow-3);
}
.ec.v1 .v1-sc--hoofd .v1-sc__vlag { margin: 0 0 16px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-op-diep-2); }
.ec.v1 .v1-sc--hoofd .v1-sc__wie strong { color: #fff; font-size: 1.1rem; }
.ec.v1 .v1-sc--hoofd .v1-sc__wie span { color: var(--v3-op-diep-2); }
.ec.v1 .v1-sc--hoofd .v1-sc__prijs { display: block; margin: 20px 0 0; }
.ec.v1 .v1-sc--hoofd .v1-sc__prijs strong { display: block; font: 800 var(--v3-prijs)/1 var(--font-display, var(--disp)); letter-spacing: -.03em; color: var(--v3-accent); font-variant-numeric: tabular-nums; }
.ec.v1 .v1-sc--hoofd .v1-sc__label { display: block; margin-top: 8px; font-size: .9375rem; color: var(--v3-op-diep); max-width: none; }
.ec.v1 .v1-sc__blok { display: grid; gap: 4px; margin: 18px 0 0; padding: 14px 16px; border-radius: var(--radius-card); border: 1px solid color-mix(in srgb, var(--v3-op-diep) 22%, transparent); background: color-mix(in srgb, var(--v3-op-diep) 7%, transparent); }
.ec.v1 .v1-sc__blok > b { font-size: 1.15rem; font-weight: 750; line-height: 1.3; color: #fff; }
.ec.v1 .v1-sc__blok.is-plus > b { color: var(--v3-accent); }
.ec.v1 .v1-sc__blok > span { font-size: .875rem; line-height: 1.45; color: var(--v3-op-diep-2); }
.ec.v1 .v1-sc__blok .v1-sc__voorbehoud { margin-top: 4px; color: var(--v3-op-diep); }
.ec.v1 .v1-sc__blok.is-neutraal .v1-sc__voordeel { color: var(--v3-op-diep); }
.ec.v1 .v1-sc__blok.is-neutraal .v1-sc__voordeel b { color: #fff; }
.ec.v1 .v1-sc__blok .v1-strook__knop { color: var(--v3-accent); }
.ec.v1 .v1-sc__blok .v1-sc__noot { color: var(--v3-op-diep-2); }
/* Kan omslaan (ontwerppunt 7): het warme goud van schattingen, geen groen
   succesvlak; licht vlak met donkere inkt, ook op de donkere kaart. */
.ec.v1 .v1-sc__blok.is-omslaan { background: var(--gold-bg); border-color: transparent; }
.ec.v1 .v1-sc__blok.is-omslaan > b { color: var(--gold-ink); }
.ec.v1 .v1-sc__blok.is-omslaan > span, .ec.v1 .v1-sc__blok.is-omslaan .v1-sc__voorbehoud { color: var(--color-text-primary); }
.ec.v1 .v1-sc--hoofd .v1-sc__korting { margin: 16px 0 0; font-size: .9375rem; line-height: 1.45; color: var(--v3-op-diep); }
.ec.v1 .v1-sc--hoofd .v1-sc__korting b { color: var(--v3-accent); }
.ec.v1 .v1-sc--hoofd .v1-sc__korting.is-geen { color: var(--v3-op-diep-2); }
.ec.v1 .v1-sc--hoofd .v1-sc__oud { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-control); background: color-mix(in srgb, var(--gold-bg, #FFF5DE) 14%, transparent); color: var(--v3-op-diep); font-size: .875rem; }
.ec.v1 .v1-sc--hoofd .v1-sc__doen { margin-top: 18px; }
.ec.v1 .v1-sc--hoofd .v1-sc__doen .wr-btn { width: 100%; justify-content: center; min-height: 52px; font-size: 1rem; }
.ec.v1 .v1-sc--hoofd .v1-sc__doen .wr-btn--secondary { background: transparent; color: var(--v3-op-diep); border-color: color-mix(in srgb, var(--v3-op-diep) 55%, transparent); }
.ec.v1 .v1-sc--hoofd .v1-sc__geen { color: var(--v3-op-diep-2); text-align: left; }
.ec.v1 .v1-sc--hoofd .v1-sc__voet { margin-top: 16px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--v3-op-diep) 18%, transparent); color: var(--v3-op-diep-2); }
.ec.v1 .v1-sc--hoofd .v1-sc__meer { color: #fff; }
.ec.v1 .v1-sc--hoofd .v1-sc__details { border-top-color: color-mix(in srgb, var(--v3-op-diep) 18%, transparent); color: var(--v3-op-diep-2); }
.ec.v1 .v1-sc--hoofd .v1-sc__details dt { color: var(--v3-op-diep-2); }
.ec.v1 .v1-sc--hoofd .v1-sc__details dd { color: var(--v3-op-diep); }
.ec.v1 .v1-sc--hoofd .v1-sc__details dd.v1-sc__sterk { color: #fff; }
.ec.v1 .v1-sc--hoofd .v1-link, .ec.v1 .v1-sc--hoofd .v1-sc__details a { color: var(--v3-accent); }
.ec.v1 .v1-sc--hoofd .v1-link:focus-visible, .ec.v1 .v1-sc--hoofd summary:focus-visible { outline-color: #fff; }

/* "Jouw huidige contract" (ontwerppunt 2): een lichte kaart, zo hoog als haar
   eigen inhoud (correctie 2): nooit uitgerekt tot de hoogte van de hoofdkaart. */
.ec.v1 .v1-hk {
  align-self: start; display: block; min-width: 0; padding: 22px 20px 16px;
  background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-surface); box-shadow: var(--shadow-1, none);
}
.ec.v1 .v1-hk .v1-sc__kop { margin-top: 14px; }
.ec.v1 .v1-hk__prijs { margin: 18px 0 0; }
.ec.v1 .v1-hk__prijs strong { display: block; font: 800 var(--v3-prijs-nu)/1 var(--font-display, var(--disp)); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ec.v1 .v1-hk__prijs span { display: block; margin-top: 6px; font-size: .875rem; color: var(--color-text-secondary); }
.ec.v1 .v1-hk__titel { margin: 16px 0 0; font-size: 1.05rem; font-weight: 750; }
.ec.v1 .v1-hk__noot { margin: 10px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--color-text-secondary); }
.ec.v1 .v1-hk__einde { margin: 8px 0 0; font-size: .8125rem; font-weight: 650; color: var(--color-text-primary); }
.ec.v1 .v1-hk__actie { margin-top: 6px; }

/* De vergelijking (ontwerppunt 4): kop met de weg naar alle contracten, de
   filter en de sortering op één regel, de rijen. Geen omhullende kaart. */
.ec.v1 .v1-andere { margin-top: clamp(32px, 4vw, 48px); }
.ec.v1 .v1-andere--een { margin-top: 14px; }
.ec.v1 .v1-andere__kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; margin: 0 0 14px; }
.ec.v1 .v1-andere__kop h3 { margin-top: 6px; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.75rem); }
.ec.v1 .v1-andere__kop p { font-size: .875rem; color: var(--color-text-secondary); line-height: 1.45; }
.ec.v1 .v1-andere__alle { min-height: 44px; }
.ec.v1 .v1-andere__regel { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; margin: 0 0 8px; }
.ec.v1 .v1-andere__regel:empty { display: none; }
.ec.v1 .v1-andere__uitleg { margin: 0 0 12px; font-size: .8125rem; line-height: 1.5; color: var(--color-text-secondary); }
.ec.v1 .v1-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ec.v1 .v1-filter__knop {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--color-border-default); border-radius: var(--radius-control); background: var(--color-surface-raised);
  font: 650 .875rem/1 var(--font); color: var(--color-text-primary); cursor: pointer;
}
.ec.v1 .v1-filter__knop span { color: var(--color-text-secondary); font-weight: 600; }
.ec.v1 .v1-filter__knop:hover { border-color: var(--color-action); }
.ec.v1 .v1-filter__knop[aria-pressed="true"] { border-color: var(--color-action); background: var(--color-brand-soft); color: var(--brand-deep); box-shadow: inset 0 0 0 1px var(--color-action); }
.ec.v1 .v1-filter__knop[aria-pressed="true"] span { color: inherit; }
.ec.v1 .v1-filter__knop:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.ec.v1 .v1-volgorde { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: .875rem; color: var(--color-text-secondary); }
.ec.v1 .v1-volgorde > span { white-space: nowrap; }
.ec.v1 .v1-volgorde select { font: inherit; color: var(--color-text-primary); background: var(--color-surface-raised); border: 1.5px solid var(--color-border-default); border-radius: var(--radius-control); padding: 0 10px; min-height: 44px; min-width: 0; max-width: 100%; }
.ec.v1 .v1-welkomst-noot { margin: 0 0 12px; font-size: .8125rem; line-height: 1.5; color: var(--color-text-secondary); }
.ec.v1 .v1-lijst__voet { margin: 12px 0 0; font-size: .8125rem; line-height: 1.55; color: var(--color-text-secondary); }
/* De voetnoot als één regel met de ⓘ; de toelichting klapt eronder open. */
.ec.v1 details.v1-lijst__voet > summary { list-style: none; cursor: pointer; display: block; min-height: 44px; padding: 11px 0; box-sizing: border-box; }
.ec.v1 details.v1-lijst__voet > summary::-webkit-details-marker { display: none; }
.ec.v1 details.v1-lijst__voet > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.ec.v1 .v1-lijst__info { display: inline-flex; margin-left: 4px; vertical-align: -3px; color: var(--color-action); }
.ec.v1 details.v1-lijst__voet > p { margin: 4px 0 0; max-width: 72ch; }
.ec.v1 .v1-lijst__meer { display: block; margin: 10px 0 0; font-size: .875rem; }

/* Het huidige contract als regel boven de lijst (/leveranciers). */
.ec.v1 .v1-huidig { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'logo wie prijs' 'meta meta meta'; align-items: center; gap: 6px 12px; padding: 14px 16px; margin-bottom: 12px; border-radius: var(--radius-card); border: 1px dashed var(--color-border-default); background: var(--color-surface-sunken); }
.ec.v1 .v1-huidig .v1-logo, .ec.v1 .v1-huidig .v1-badge--klein { grid-area: logo; }
.ec.v1 .v1-huidig .v1-logo { width: 64px; height: 43px; }
.ec.v1 .v1-huidig__wie { grid-area: wie; min-width: 0; }
.ec.v1 .v1-huidig__wie strong { display: block; font-size: .95rem; margin-top: 5px; }
.ec.v1 .v1-huidig__wie > span:last-child { display: block; font-size: .875rem; color: var(--color-text-secondary); line-height: 1.4; }
.ec.v1 .v1-pil--huidig { background: transparent; border-color: var(--color-text-primary); color: var(--color-text-primary); padding: 3px 9px; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
.ec.v1 .v1-huidig__prijs { grid-area: prijs; text-align: right; }
.ec.v1 .v1-huidig__prijs strong { display: block; font: 790 1.55rem/1 var(--font-display, var(--disp)); letter-spacing: -.03em; white-space: nowrap; }
.ec.v1 .v1-huidig__prijs small { display: block; margin-top: 3px; color: var(--color-text-secondary); font-size: .875rem; }
.ec.v1 .v1-huidig__meta { grid-area: meta; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; font-size: .875rem; color: var(--color-text-secondary); }
.ec.v1 .v1-huidig__meta:empty { display: none; }
.ec.v1 .v1-huidig__meta small { font-size: inherit; }
.ec.v1 .v1-huidig__actie { min-height: 44px; }

/* De bespaarkansen en de uitklap onderaan. */
.ec.v1 .v1-meer { margin-top: clamp(32px, 4vw, 48px); }
.ec.v1 .v1-kansen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ec.v1 .v1-kans { position: relative; padding: 18px; background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); }
.ec.v1 .v1-kans--goud { background: var(--gold-bg); border-color: transparent; }
.ec.v1 .v1-kans__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ec.v1 .v1-kans__titel { margin: 14px 0 8px; font-size: 1.05rem; line-height: 1.25; }
.ec.v1 .v1-kans__bedrag { font: 800 1.75rem/1 var(--font-display, var(--disp)); letter-spacing: -.03em; color: var(--brand-deep); }
.ec.v1 .v1-kans--goud .v1-kans__bedrag { color: var(--gold-ink); }
.ec.v1 .v1-kans__eenheid { margin: 4px 0 6px; font-size: .8125rem; line-height: 1.45; color: var(--color-text-secondary); }
.ec.v1 .v1-kans .v1-link { font-size: .875rem; }
.ec.v1 .v1-rest__uitklap { margin-top: 12px; }
.ec.v1 .v1-rest__uitklap summary, .ec.v1 .v1-grond summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: .9rem; font-weight: 700; color: var(--color-text-primary); cursor: pointer; }
.ec.v1 .v1-rest__uitklap summary::-webkit-details-marker, .ec.v1 .v1-grond summary::-webkit-details-marker { display: none; }
.ec.v1 .v1-rest__uitklap[open] summary .v1-ico, .ec.v1 .v1-grond[open] summary .v1-ico { transform: rotate(180deg); }
.ec.v1 .v1-rest__lijst { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); background: var(--color-surface-raised); }
.ec.v1 .v1-rest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 12px 16px; }
.ec.v1 .v1-rest + .v1-rest { border-top: 1px solid var(--color-border-subtle); }
.ec.v1 .v1-rest__wat strong { display: block; font-size: .875rem; }
.ec.v1 .v1-rest__wat span { font-size: .875rem; color: var(--color-text-secondary); }
.ec.v1 .v1-rest .v1-link { font-size: .875rem; }
.ec.v1 .v1-grond { margin-top: 20px; padding-top: 8px; border-top: 1px solid var(--color-border-subtle); }
.ec.v1 .v1-grond__body { margin-top: 10px; padding: 18px; background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); font-size: .875rem; line-height: 1.7; color: var(--color-text-secondary); }
.ec.v1 .v1-grond__lijst { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.ec.v1 .v1-grond__welkomst { display: block; margin-top: 6px; }
/* De standen zonder vergelijking: foutkaart en laden. */
.ec.v1 div.v1-fout { display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px; background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-surface); }
.ec.v1 div.v1-fout h3 { margin-bottom: 6px; font-size: 1.25rem; }
.ec.v1 div.v1-fout p { margin-bottom: 12px; font-size: .9rem; line-height: 1.5; color: var(--color-text-secondary); }
.ec.v1 div.v1-fout p:last-child { margin-bottom: 0; }
.ec.v1 .v1-laden { padding: 24px; background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-surface); }
.ec.v1 .notice { margin-top: 12px; }
/* De oude aanvulknop en de strook (de noot van /leveranciers gebruikt ze). */
.ec.v1 .v1-strook__label { display: block; font-size: .875rem; font-weight: 500; line-height: 1.45; margin-top: 3px; }
.ec.v1 .v1-strook__knop { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; min-height: 44px; font: 750 .95rem/1.2 var(--font); color: var(--color-action); cursor: pointer; text-align: left; }
.ec.v1 .v1-strook__knop:hover { text-decoration: underline; }

/* Mobiel: compacter; de knop van de intake blijft in beeld zolang het
   formulier in beeld is (sticky), met scroll-padding voor een veld dat naar
   boven komt. */
@media (max-width: 700px) {
  .ec.v1 { padding-bottom: var(--space-6, 32px); }
  .ec.v1 .v1-hero { margin: var(--space-4, 16px) 0 12px; }
  .ec.v1 .v1-hero h1 { font-size: 1.9rem; margin: 6px 0 8px; }
  .ec.v1 .v1-lead { font-size: .9rem; }
  .ec.v1 .v1-profiel { padding: 12px 14px; margin-bottom: 16px; }
  .ec.v1 .v1-chip { max-width: none; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 10px; margin-top: 10px; padding: 10px 12px 12px; }
  .ec.v1 .v1-chip .v1-badge { width: 28px; height: 28px; border-radius: 9px; }
  .ec.v1 .v1-chip__kop { font-size: .85rem; }
  .ec.v1 .v1-chip__knop { grid-column: 1 / -1; width: 100%; margin-left: 0; min-height: 46px; font-size: .9rem; }
  .ec.v1 .v1-intake { padding: 16px 14px 12px; margin-bottom: 16px; }
  .ec.v1 .v1-intake__kop { font-size: 1.3rem; }
  .ec.v1 .v1-vraag { padding: 10px 0; }
  .ec.v1 .v1-keuze { gap: 6px; }
  .ec.v1 .v1-keuze label { padding: 0 12px; min-width: 56px; font-size: .875rem; }
  .ec.v1 .v1-vervolg { padding: 12px; gap: 10px; }
  .ec.v1 .v1-paar { gap: 8px; }
  .ec.v1 .v1-veld__label .v1-optioneel { display: none; }
  .ec.v1 .v1-invoer input { width: 140px; }
  html:has(.ec.v1 .v1-intake:not([hidden])) { scroll-padding-bottom: 100px; }
  /* De cookiemelding (#164): zolang ze staat, staat de vaste knopbalk op de
     melding (de hoogte meet consent.js, --wr-consent-h). */
  html.wr-consent-open .ec.v1 .v1-acties { bottom: var(--wr-consent-h, 0px); }
  html.wr-consent-open:has(.ec.v1 .v1-intake:not([hidden])) { scroll-padding-bottom: calc(100px + var(--wr-consent-h, 0px)); }
  .ec.v1 .v1-acties { position: sticky; bottom: 0; z-index: 5; margin: 8px -14px 0; padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--color-surface-raised); border-top: 1px solid var(--color-border-subtle); gap: 6px 10px; }
  .ec.v1 .v1-acties .v1-btn--vol { flex: 1 1 100%; }
  .ec.v1 .v1-bewaar { margin-top: 8px; }
  .ec.v1 .v1-vraag { scroll-margin-bottom: 96px; }
  .ec.v1 .v1-sectiekop h2 { font-size: 1.35rem; }
  .ec.v1 .v1-andere__regel { align-items: flex-start; }
  .ec.v1 .v1-huidig__prijs strong { font-size: 1.3rem; }
}
@media (min-width: 640px) {
  .ec.v1 .v1-kansen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec.v1 .v1-kaart.v1-sc--hoofd { padding: 28px 28px 20px; }
}
/* Desktop: de intake in twee kolommen (postcode en contract, zonnepanelen
   en huishouden, gas en auto), de hoofdkaart en het huidige contract naast
   elkaar. De DOM-volgorde blijft de leesvolgorde. */
@media (min-width: 960px) {
  .ec.v1 .v1-intake { padding: 26px 28px 22px; }
  .ec.v1 .v1-intake { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .ec.v1 .v1-intake > :not(fieldset) { grid-column: 1 / -1; }
  .ec.v1 .v1-resultaat { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; }
  .ec.v1 .v1-kaart.v1-sc--hoofd { padding: 30px 32px 22px; }
  .ec.v1 .v1-hk { padding: 26px 24px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ec.v1 .v1-grond summary .v1-ico, .ec.v1 .v1-rest__uitklap summary .v1-ico { transition: none; }
}

/* ── V1, PR 3 (29-10-2026): /leveranciers op dezelfde componenten ──
   Het ontwerp (docs/v1/leveranciers/ONTWERP.md §5, PR #161) voegt weinig
   toe: de noot boven de vergelijking, drie zichtbare FAQ-vragen (A-stijl),
   de tekstlink in de doen-kolom (de stand "al bij de laagste"), en op mobiel
   de referentieregel compacter en de filter op één rij, zodat de eerste
   aanbodknop in het eerste resultatenscherm valt (correctie 2 van de
   review). De compacte referentieregel geldt ook voor de check: hetzelfde
   component. */
.ec.v1 .lv-noot { margin: 0 0 16px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.ec.v1 .lv-noot .v1-strook__label { font-size: .9rem; font-weight: 500; color: var(--ink-2); }
.ec.v1 .v1-faq { max-width: 760px; margin: 40px auto 0; }
.ec.v1 .v1-faq .v1-sectiekop { margin-bottom: 8px; }
.ec.v1 .v1-faq__item { padding: 14px 0; border-top: 1px solid var(--line); }
.ec.v1 .v1-faq__item h3 { font-size: 1.05rem; margin: 0 0 6px; }
.ec.v1 .v1-faq__item p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.ec.v1 .v1-faq .v1-lijst__voet { margin-top: 14px; }
.ec.v1 .v1-huidig__basis { display: none; }
@media (max-width: 700px) {
  /* De regel "Gesorteerd op …" zegt op de vergelijker wat de kop al zegt. */
  .ec.v1.v1--lev .v1-andere__kop { display: none; }
  /* De referentieregel: het logo klein naast de pil (#184, 8-11-2026: het
     leverancierslogo hoort ook op mobiel zichtbaar te zijn, PRODUCTKOMPAS §2),
     de naam links en het bedrag rechts op de tweede regel, de basiszin op
     volle breedte eronder; de jaarregel staat in de uitklap. Op 320 px passen
     logo, pil en bedrag niet samen op één regel; vandaar pil boven, bedrag
     naast de naam. */
  .ec.v1 .v1-huidig { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'logo pil pil' 'naam naam prijs' 'basis basis basis' 'meta meta meta'; padding: 10px 12px; gap: 4px 10px; }
  .ec.v1 .v1-huidig .v1-logo, .ec.v1 .v1-huidig .v1-badge--klein { align-self: center; }
  .ec.v1 .v1-huidig .v1-logo { width: 52px; height: 34px; border-radius: 8px; }
  .ec.v1 .v1-huidig .v1-logo img { max-width: 44px; max-height: 26px; }
  .ec.v1 .v1-huidig__wie { display: contents; }
  .ec.v1 .v1-huidig .v1-pil--huidig { grid-area: pil; justify-self: start; align-self: center; }
  .ec.v1 .v1-huidig__wie strong { grid-area: naam; min-width: 0; margin-top: 0; }
  .ec.v1 .v1-huidig__wie > span:last-child { display: none; }
  .ec.v1 .v1-huidig__basis { grid-area: basis; display: block; font-size: .875rem; color: var(--ink-2); line-height: 1.4; }
  .ec.v1 .v1-huidig .v1-huidig__meta small { display: none; }
  /* Minder lucht boven de lijst op de vergelijker (de bouwopdracht van
     29-10-2026: geen onnodige verticale ruimte): de hero, de sectiekop en de
     kaart iets strakker, zodat de eerste knop eerder in beeld valt. */
  .ec.v1.v1--lev.is-klaar .v1-hero { padding: 10px 15px 12px; }
  .ec.v1.v1--lev .v1-sectiekop { margin-bottom: 10px; }
  .ec.v1.v1--lev .v1-andere { padding-top: 8px; }
  .ec.v1.v1--lev .v1-huidig { margin-bottom: 8px; }
  .ec.v1.v1--lev .v1-filter { margin-bottom: 8px; }
  /* De filter op één rij: vier knoppen van gelijke breedte, 44 px hoog. */
  .ec.v1 .v1-filter { flex-wrap: nowrap; gap: 4px; }
  /* Elke knop zo breed als zijn tekst plus de rest van de rij gelijk verdeeld
     (flex-basis auto): op 360 px liep "Dynamisch 12" 4 px uit een knop van
     gelijke breedte (UX-controle 29-10-2026). */
  .ec.v1 .v1-filter__knop { flex: 1 1 auto; justify-content: center; gap: 4px; padding: 0 6px; min-height: 44px; font-size: .8125rem; letter-spacing: -.01em; }
}
@media (max-width: 359px) {
  /* Op 320 px passen vier knoppen niet naast elkaar zonder te knijpen: twee rijen. */
  .ec.v1 .v1-filter { flex-wrap: wrap; }
  .ec.v1 .v1-filter__knop { flex: 1 1 45%; }
}

/* -- Energievergelijker (2-11-2026): adres en gas in de intake, de
   volgorde van de lijst, het eerste jaar op de kaart. -- */
.ec.v1 .v1-adres { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.ec.v1 .v1-adres .v1-invoer input { width: 100%; }
.ec.v1 .v1-weetniet--rij { margin: 0 0 10px; }
.ec.v1 .v1-keuze--vijf label { font-size: .84rem; padding: 8px 4px; }
@media (max-width: 700px) {
  .ec.v1 .v1-keuze--vijf label { font-size: .78rem; padding: 6px 2px; }
}

/* /leveranciers houdt tot zijn eigen herontwerp (fase C) het lijstkader van
   V1: de lijst in één witte kaart, de filter naast de kop en het huidige
   contract als één regel boven de lijst. Alleen de aanbodrij zelf (§20) is
   gedeeld met /energiecheck. Overgenomen uit het oude §19 (V1, PR 2/3 en
   lijstkop-grid 9-11-2026), nu op .v1--lev. */
.ec.v1.v1--lev .v1-andere { margin-top: 14px; padding: 18px 18px 8px; border-radius: var(--radius-card); border: 1px solid var(--color-border-subtle); background: var(--color-surface-raised); box-shadow: var(--shadow-2); }
.ec.v1.v1--lev .v1-andere__kop { display: grid; gap: 3px; margin: 0 0 12px; }
.ec.v1.v1--lev .v1-filter { margin: 0 0 12px; }
.ec.v1.v1--lev .v1-volgorde { margin: 0 0 12px; }
.ec.v1 .v1-huidig .v1-logo img { max-width: 54px; max-height: 32px; }
@media (max-width: 700px) {
  .ec.v1.v1--lev .v1-andere { padding: 12px 12px 4px; }
}
@media (min-width: 1024px) {
  .ec.v1.v1--lev .v1-uitkomst { max-width: 1120px; }
  .ec.v1.v1--lev .v1-andere { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'kop filter' 'huidig huidig' 'volgorde volgorde' 'noot noot' 'lijst lijst' 'meer meer' 'voet voet'; column-gap: 20px; align-items: end; padding: 20px 22px 10px; }
  /* Elk kind van de vergelijking een eigen vak (9-11-2026); bewaakt in
     tools/lijstkop-grid.test.ts. */
  .ec.v1.v1--lev .v1-andere__kop { grid-area: kop; margin-bottom: 14px; }
  .ec.v1.v1--lev .v1-filter { grid-area: filter; margin-bottom: 14px; }
  .ec.v1.v1--lev .v1-huidig { grid-area: huidig; grid-template-columns: 36px 72px minmax(0, 1fr) 232px 160px; grid-template-areas: '. logo wie meta prijs'; column-gap: 14px; }
  .ec.v1.v1--lev .v1-huidig__meta { flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; }
  .ec.v1.v1--lev .v1-volgorde { grid-area: volgorde; }
  .ec.v1.v1--lev .v1-welkomst-noot { grid-area: noot; }
  .ec.v1.v1--lev .v1-lijst { grid-area: lijst; }
  .ec.v1.v1--lev .v1-lijst__meer { grid-area: meer; justify-self: start; }
  .ec.v1.v1--lev .v1-lijst__voet { grid-area: voet; }
}

/* ── 20. De aanbodrij (V3, 12-11-2026; inhoud variant B, GO 8-11-2026) ─────
   Eén kaart per aanbod op /energiecheck en /leveranciers (ontwerppunt 4):
   wie (logo, naam, looptijd) · geld (één maandprijs met één label, de
   welkomstkorting met haar uitbetaalmoment, het verschil met nu als
   kleinere regel) · de ene knop · Prijsdetails. Mobiel: wie bovenaan, prijs
   en knop op één rij eronder; vanaf 900 px één rij met vaste kolommen, zodat
   de bedragen onder elkaar staan. Geen tweede bedrag, geen rangnummer; de
   nummer één staat op de check hierboven en hier als verwijzing. De
   hoofdkaart (.v1-sc--hoofd) staat in §19. */
.ec.v1 .v1-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ec.v1 .v1-sc:not(.v1-sc--hoofd):not(.v1-sc--hierboven) {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'vlag vlag' 'kop kop' 'prijs doen' 'label label' 'korting korting' 'voordeel voordeel' 'oud oud' 'voet voet'; gap: 0 14px; align-items: center;
  padding: 16px; background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card);
}
.ec.v1 .v1-sc[hidden] { display: none; }
.ec.v1 .v1-sc--eerste:not(.v1-sc--hoofd) { border-color: var(--color-action); box-shadow: inset 0 0 0 1px var(--color-action); }
.ec.v1 .v1-sc--eigen { background: var(--color-surface-sunken); }
.ec.v1 .v1-sc--hierboven {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 16px;
  background: var(--color-surface-sunken); border: 1.5px dashed var(--color-border-default); border-radius: var(--radius-card);
  font-size: .875rem; color: var(--color-text-secondary);
}
.ec.v1 .v1-sc__vlag { grid-area: vlag; margin: 0 0 10px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-action); }
.ec.v1 .v1-sc--eigen .v1-sc__vlag, .ec.v1 .v1-sc--eigenlev .v1-sc__vlag { color: var(--color-text-tertiary); }
.ec.v1 .v1-sc__kop { grid-area: kop; display: flex; gap: 14px; align-items: center; min-width: 0; }
.ec.v1 .v1-logo { display: inline-grid; place-items: center; width: 88px; height: 44px; flex: none; overflow: hidden; border: 1px solid var(--color-border-subtle); border-radius: 10px; background: #fff; }
.ec.v1 .v1-logo img { max-width: 76px; max-height: 34px; object-fit: contain; }
.ec.v1 .v1-logo .levmono { font-weight: 800; color: var(--brand-deep); }
.ec.v1 .v1-sc__wie { min-width: 0; }
.ec.v1 .v1-sc__wie strong { display: block; font-size: 1.05rem; line-height: 1.25; letter-spacing: -.01em; }
.ec.v1 .v1-sc__wie span { display: block; margin-top: 3px; font-size: .875rem; line-height: 1.35; color: var(--color-text-secondary); }
/* Smal: de geldkolom lost op in het raster (prijs en knop op één rij, de
   korting en het verschil over de volle breedte eronder); breed is het
   één kolom tussen wie en de knop. */
.ec.v1 .v1-sc__geld { display: contents; }
.ec.v1 .v1-sc:not(.v1-sc--hoofd) .v1-sc__prijs { display: contents; }
.ec.v1 .v1-sc:not(.v1-sc--hoofd) .v1-sc__prijs strong { grid-area: prijs; margin-top: 14px; }
.ec.v1 .v1-sc:not(.v1-sc--hoofd) .v1-sc__label { grid-area: label; }
.ec.v1 .v1-sc__prijs strong { display: block; font: 800 1.6rem/1 var(--font-display, var(--disp)); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ec.v1 .v1-sc__label { display: block; margin-top: 4px; font-size: .8125rem; line-height: 1.35; color: var(--color-text-secondary); }
.ec.v1 .v1-sc__korting { grid-area: korting; margin: 10px 0 0; font-size: .875rem; line-height: 1.4; color: var(--color-text-primary); }
.ec.v1 .v1-sc__korting b { color: var(--color-action); font-weight: 750; }
.ec.v1 .v1-sc__korting.is-geen { color: var(--color-text-secondary); }
.ec.v1 .v1-sc__voordeel { grid-area: voordeel; margin: 4px 0 0; display: flex; gap: 6px; align-items: flex-start; font-size: .8125rem; line-height: 1.4; color: var(--color-text-secondary); }
.ec.v1 .v1-sc__voordeel .v1-ico { margin-top: 1px; }
.ec.v1 .v1-sc__voordeel b { color: var(--color-text-primary); font-weight: 700; }
.ec.v1 .v1-sc__voordeel.is-plus, .ec.v1 .v1-sc__voordeel.is-plus b { color: var(--positive); }
.ec.v1 .v1-sc__verschil { min-width: 0; }
.ec.v1 .v1-sc__noot { display: block; margin-top: 2px; font-size: .8125rem; }
.ec.v1 .v1-sc__oud { grid-area: oud; margin: 4px 0 0; font-size: .8125rem; font-weight: 650; color: var(--gold-ink); }
.ec.v1 .v1-sc__doen { grid-area: doen; min-width: 0; margin-top: 14px; }
.ec.v1 .v1-sc:not(.v1-sc--hoofd) .v1-sc__doen .wr-btn { min-height: 44px; padding: 0 14px; font-size: .875rem; white-space: nowrap; }
.ec.v1 .v1-sc__doen .v1-link { font-size: .9rem; }
.ec.v1 .v1-sc__geen { margin: 0; max-width: 14rem; font-size: .8125rem; line-height: 1.4; color: var(--color-text-secondary); text-align: right; }
.ec.v1 .v1-sc__voet { grid-area: voet; margin-top: 12px; padding-top: 6px; border-top: 1px solid var(--color-border-subtle); font-size: .8125rem; color: var(--color-text-tertiary); }
.ec.v1 .v1-sc__voet summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 44px; }
.ec.v1 .v1-sc__voet summary::-webkit-details-marker { display: none; }
.ec.v1 .v1-sc__voet summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.ec.v1 .v1-sc__meer { color: var(--color-action); font-weight: 700; white-space: nowrap; }
.ec.v1 .v1-sc__meer::before { content: '▸ '; }
.ec.v1 .v1-sc__voet[open] .v1-sc__meer::before { content: '▾ '; }
.ec.v1 .v1-sc__details { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--color-border-subtle); font-size: .875rem; color: var(--color-text-secondary); display: grid; gap: 10px; }
.ec.v1 .v1-sc__details > div { display: grid; gap: 2px; }
.ec.v1 .v1-sc__details dt { color: var(--color-text-tertiary); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.ec.v1 .v1-sc__details dd { margin: 0; color: var(--color-text-secondary); line-height: 1.45; }
.ec.v1 .v1-sc__details dd.v1-sc__sterk { color: var(--color-text-primary); font-weight: 700; font-size: .95rem; }
.ec.v1 .v1-sc__details .v1-link { display: inline; min-height: 0; }
.ec.v1 .v1-sc__methode { margin: 10px 0 0; font-size: .875rem; }
@media (max-width: 359px) {
  .ec.v1 .v1-sc:not(.v1-sc--hoofd):not(.v1-sc--hierboven) { grid-template-areas: 'vlag vlag' 'kop kop' 'prijs prijs' 'label label' 'korting korting' 'voordeel voordeel' 'oud oud' 'doen doen' 'voet voet'; padding: 14px 12px; }
  .ec.v1 .v1-sc:not(.v1-sc--hoofd) .v1-sc__doen .wr-btn { width: 100%; justify-content: center; }
  .ec.v1 .v1-sc__geen { text-align: left; max-width: none; }
  .ec.v1 .v1-logo { width: 76px; height: 40px; }
}
@media (min-width: 900px) {
  .ec.v1 .v1-sc:not(.v1-sc--hoofd):not(.v1-sc--hierboven) { grid-template-columns: minmax(15rem, 1.05fr) minmax(0, 1.2fr) auto; grid-template-areas: 'vlag vlag vlag' 'kop geld doen' 'voet voet voet'; column-gap: 28px; padding: 18px 22px 8px; }
  .ec.v1 .v1-sc__geld { grid-area: geld; display: grid; gap: 0; min-width: 0; }
  .ec.v1 .v1-sc__geld > * { grid-area: auto; }
  .ec.v1 .v1-sc:not(.v1-sc--hoofd) .v1-sc__prijs { display: block; }
  .ec.v1 .v1-sc:not(.v1-sc--hoofd) .v1-sc__prijs strong { margin-top: 0; }
  .ec.v1 .v1-sc__doen { margin-top: 0; }
  .ec.v1 .v1-logo { width: 96px; height: 47px; }
  .ec.v1 .v1-sc__prijs strong { font-size: 1.75rem; }
  .ec.v1 .v1-sc__details { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .ec.v1 .v1-sc__details > div { grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; gap: 8px; }
}