/* ============================================================
   Aanmeldmodule - OpenSource Energie B.V.
   Herontwerp volgens OSE Tools & UI huisstijl
   Navy #243062 · Groen #66B434 · Lime #C0DC09
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* White-label kleuren (per label overschreven via JS) */
  --hoofdkleur: #243062;
  --steunkleur: #66B434;

  /* Huisstijl-accenten & neutralen */
  --accent: #C0DC09;              /* lime — spaarzaam als energie-accent */
  --tekst: #1A1E30;
  --tekst-licht: #5C6B8A;
  --tekst-dim: #94A3B8;
  --achtergrond: #F4F7F0;
  --oppervlak2: #EEF2E8;
  --wit: #FFFFFF;
  --rand: #E0E8D8;
  --rand-sterk: #CBD6C0;
  --succes: #16A34A;
  --fout: #DC2626;
  /* Leesbare varianten van de merkkleuren; applyKleuren() overschrijft ze per label. */
  --hoofdkleur-tekst: #243062;
  --steunkleur-tekst: #4b7a24;
  --op-hoofdkleur: #FFFFFF;
  --op-steunkleur: #FFFFFF;
  --op-gradient: #FFFFFF;
  --op-aanbod: #FFFFFF;
  --scrim-aanbod: linear-gradient(90deg, rgba(0,0,0,0.30), rgba(0,0,0,0.10) 55%, transparent);
  --hero-kleur: #243062;
  --hero-vlak: #FBFBF9;
  --hero-tint-1: rgba(36,48,98,0.22);
  --hero-tint-2: rgba(102,180,52,0.20);
  --op-hero: #1A1E30;
  --op-hero-zacht: #5C6B8A;
  --accent-op-hero: #243062;
  --waarschuwing: #D97706;

  /* Signatuur-gradient navy → groen → lime */
  --os-gradient: linear-gradient(90deg, var(--hoofdkleur) 0%, var(--steunkleur) 62%, var(--accent) 100%);
  --os-gradient-diag: linear-gradient(135deg, var(--hoofdkleur) 0%, var(--steunkleur) 100%);

  /* Neutrale vlakken: papier voor de pagina, oppervlak voor blokken erin */
  --papier: #F5F5F2;
  --oppervlak: #FAFAF8;

  --radius: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --schaduw: 0 1px 3px rgba(26,30,48,0.06), 0 1px 2px rgba(26,30,48,0.04);
  --schaduw-hover: 0 8px 28px rgba(26,30,48,0.10);
  --schaduw-kaart: 0 1px 2px rgba(26,30,48,0.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

:root { color-scheme: light; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--tekst);
  background: var(--achtergrond);
  line-height: 1.55;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Icoon-helper: alle inline SVG's schalen mee met currentColor */
.ev-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ev-ico svg { width: 1em; height: 1em; display: block; }

/* ============================================================
   WRAPPER
   ============================================================ */

.ev-wrapper {
  max-width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  /* Dezelfde opbouw als het startscherm, zodat de stappen erop aansluiten. */
  background: var(--hero-vlak);
}
/* Zachte merkvlakken achter de hele module, net als op het startscherm.
   Vast t.o.v. het scherm, zodat scrollen rustig blijft. De vlakken staan
   bewust in de hoeken: het midden moet leeg blijven voor de kaarten. */
.ev-wrapper::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(48% 44% at 4% 14%, var(--hero-tint-2) 0%, transparent 70%),
    radial-gradient(44% 40% at 97% 10%, var(--hero-tint-1) 0%, transparent 68%),
    radial-gradient(52% 46% at 92% 84%, var(--hero-tint-1) 0%, transparent 66%),
    radial-gradient(46% 40% at 2% 92%, var(--hero-tint-2) 0%, transparent 64%);
  filter: blur(50px);
  opacity: 0.85;
  animation: ev-wrapper-drift 40s ease-in-out infinite alternate;
}
@keyframes ev-wrapper-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.08); }
}
.ev-wrapper > * { position: relative; z-index: 1; }

/* Inhoud-kolom: één rustige leeskolom in plaats van de volle paginabreedte.
   Een formulier dat 1280px breed uitwaaiert leest als een spreadsheet. */
.ev-inhoud {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px clamp(20px, 4vw, 32px) 72px;
}

/* ============================================================
   HEADER
   ============================================================ */

.ev-header {
  background: var(--wit);
  border-bottom: 1px solid var(--rand);
  padding: 0 clamp(20px, 4vw, 32px);
  height: 76px;
  display: flex;
  align-items: center;
  position: relative;
}
.ev-header-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Signatuur-hairline onder de header */
.ev-header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--os-gradient);
}

.ev-header .logo-wrap { display: flex; align-items: center; gap: 10px; }
.ev-header .label-naam { color: var(--tekst); font-size: 0.98rem; font-weight: 800; letter-spacing: -0.3px; }
.ev-header-logo { height: 46px; width: auto; max-width: 280px; display: block; object-fit: contain; }
.ev-header .header-rechts { display: flex; align-items: center; gap: 16px; }
.ev-header .stap-teller { color: var(--tekst-licht); font-size: 0.75rem; font-weight: 600; }
.ev-header .hulp-link { color: var(--tekst-licht); font-size: 0.75rem; text-decoration: none; transition: color 0.15s; display: inline-flex; align-items: center; gap: 5px; }
.ev-header .hulp-link:hover { color: var(--tekst); }

/* Twee merken naast elkaar: de installateur bracht de klant, dus die staat
   vooraan; het energiemerk volgt zodat het aanbod herkenbaar blijft. */
.ev-merken { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ev-partner-logo { height: 34px; width: auto; object-fit: contain; }
.ev-merken-scheiding { font-size: 0.75rem; color: var(--tekst-licht); white-space: nowrap; }
.ev-merken .ev-header-logo { height: 26px; }
@media (max-width: 600px) {
  .ev-merken-scheiding { display: none; }
  .ev-partner-logo { height: 26px; }
  .ev-merken .ev-header-logo { height: 20px; }
}

/* ============================================================
   BANNER — straatbeeld onder de header
   ============================================================ */

.ev-banner {
  position: relative;
  height: clamp(112px, 13vw, 178px);
  background-color: var(--achtergrond);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  /* De onderkant lost op in de pagina in plaats van hard af te snijden.
     Een masker in plaats van een overlay: werkt zo ook in donkere modus. */
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  animation: ev-banner-op 0.45s ease-out both;
}
/* De foto volgt het klanttype. De uitsnede verschilt per beeld:
   bij de woonstraat de daken met panelen, bij het bedrijfspand het
   zonnedak met de laadpalen ervoor. */
.ev-banner-particulier {
  background-image: url('../img/banner-particulier.jpg');
  background-position: center 42%;
}
.ev-banner-zakelijk {
  background-image: url('../img/banner-zakelijk.jpg');
  background-position: center 32%;
}
/* Zodra we het pand kennen vervangt de luchtfoto de sfeerfoto. De
   sfeerfoto moet dan weg: anders piept hij door de naden tussen de tegels. */
.ev-banner.heeft-luchtfoto { background-image: none; }
.ev-banner .ev-luchtfoto {
  position: absolute; inset: 0; border-bottom: 0;
}
/* In de banner staat de bronvermelding hoger: de onderrand van de banner
   lost op in de pagina, dus daar zou het bijschrift mee vervagen. */
.ev-banner .ev-luchtfoto-bron { bottom: 34%; }

@keyframes ev-banner-op { from { opacity: 0; } to { opacity: 1; } }

/* Merktint over de foto: bindt het beeld aan de huisstijl van het label. */
.ev-banner-tint {
  position: absolute; inset: 0;
  background: var(--hoofdkleur);
  mix-blend-mode: multiply;
  opacity: 0.14;
  pointer-events: none;
}

/* ============================================================
   VOORTGANG — "charging"-rail (signatuur)
   ============================================================ */

.ev-voortgang {
  background: transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--rand) 55%, transparent);
  padding: 26px 34px 20px;
}

.ev-voortgang-inner {
  max-width: 560px;
  margin: 0 auto;
}

.ev-stappen { display: flex; }

.ev-stap-node {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Connector tussen nodes = het "kabel"-segment */
.ev-stap-node::before {
  content: '';
  position: absolute;
  top: 21px;                 /* midden van 42px cirkel */
  right: 50%;
  left: -50%;
  height: 4px;
  border-radius: 2px;
  background: var(--rand);
  z-index: 0;
}
.ev-stap-node:first-child::before { display: none; }

/* Gevuld segment: gradient + energie-shimmer */
.ev-stap-node.actief::before,
.ev-stap-node.voltooid::before {
  background: var(--os-gradient);
  background-size: 200% 100%;
  box-shadow: 0 0 10px color-mix(in srgb, var(--steunkleur) 45%, transparent);
  animation: ev-stroom 2.4s linear infinite;
}

@keyframes ev-stroom {
  from { background-position: 200% 0; }
  to   { background-position: 0% 0; }
}

.ev-stap-node-cirkel {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--wit);
  border: 1.5px solid var(--rand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tekst-dim);
  font-size: 1.05rem;
  box-shadow: var(--schaduw);
  transition: all 0.35s var(--ease-uit, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Volledig gevulde cirkel met de signatuur-gradient (navy → groen). */
.ev-stap-node.voltooid .ev-stap-node-cirkel {
  background: var(--os-gradient-diag);
  border: 2px solid transparent;
  background-origin: border-box;
  background-clip: border-box;
  color: #fff;
}

.ev-stap-node.actief .ev-stap-node-cirkel {
  background: var(--os-gradient-diag);
  border: 2px solid transparent;
  background-origin: border-box;
  background-clip: border-box;
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--steunkleur) 16%, transparent),
              0 6px 16px color-mix(in srgb, var(--hoofdkleur) 30%, transparent);
}

.ev-stap-node-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--tekst-dim);

  letter-spacing: 0.5px;
  text-align: center;
  transition: color 0.3s;
  white-space: nowrap;
}

.ev-stap-node.actief .ev-stap-node-label { color: var(--hoofdkleur-tekst); }
.ev-stap-node.voltooid .ev-stap-node-label { color: var(--steunkleur-tekst); }
html.dark .ev-stap-node.actief .ev-stap-node-label { color: color-mix(in srgb, var(--hoofdkleur) 60%, white); }

/* ============================================================
   STAP-CONTAINER + intro
   ============================================================ */

.ev-stap-content-wrap {
  animation: ev-stap-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  /* Ruimte onder de laatste inhoud, anders verdwijnt die achter de
     meelopende actiebalk. */
  padding-bottom: 8px;
}

@keyframes ev-stap-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ev-stap-intro {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 28px;
}

.ev-stap-intro-icoon {
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--hoofdkleur) 10%, var(--wit));
  color: var(--hoofdkleur-tekst);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
}
.ev-stap-intro h2 { font-size: 1.75rem; color: var(--tekst); margin-bottom: 4px; font-weight: 900; letter-spacing: -0.9px; }
.ev-stap-intro p { font-size: 0.9375rem; color: var(--tekst-licht); line-height: 1.55; }

/* ============================================================
   INFO PANELS
   ============================================================ */

.ev-info-panel {
  background: color-mix(in srgb, var(--waarschuwing) 8%, var(--wit));
  border: 1px solid color-mix(in srgb, var(--waarschuwing) 24%, transparent);
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  margin: 12px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--waarschuwing) 75%, black);
  line-height: 1.5;
}

.ev-info-panel.groen { background: color-mix(in srgb, var(--succes) 8%, var(--wit)); border-color: color-mix(in srgb, var(--succes) 28%, transparent); border-left-color: var(--succes); color: color-mix(in srgb, var(--succes) 78%, black); }
.ev-info-panel.blauw { background: color-mix(in srgb, var(--hoofdkleur) 6%, var(--wit)); border-color: color-mix(in srgb, var(--hoofdkleur) 22%, transparent); border-left-color: var(--hoofdkleur); color: color-mix(in srgb, var(--hoofdkleur) 82%, black); }
.ev-info-panel-icoon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.ev-info-panel a { color: inherit; font-weight: 700; }

.ev-tooltip-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; background: var(--rand);
  color: var(--tekst-licht); font-size: 0.75rem; font-weight: 800;
  cursor: help; vertical-align: middle; margin-left: 4px; position: relative;
  text-transform: none; letter-spacing: normal;
}

.ev-tooltip-trigger:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--tekst); color: var(--wit); padding: 9px 13px; border-radius: 8px;
  font-size: 0.75rem; font-weight: 400; width: 230px; line-height: 1.45; z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18); pointer-events: none;
  text-transform: none; letter-spacing: normal; text-align: left;
}

/* ============================================================
   KAARTEN
   ============================================================ */

/* De stappen zijn één doorlopend vel; de secties erbinnen worden gescheiden
   door witruimte en een haarlijn, niet door zes losse zwevende dozen. */
.ev-stap-content-wrap .ev-kaart,
.ev-stap-content-wrap .ev-vel {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 34px 0;
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--rand) 60%, transparent);
  animation: ev-kaart-op 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
.ev-stap-content-wrap .ev-kaart:first-of-type { border-top: none; padding-top: 4px; }

.ev-stap-content-wrap {
  background: var(--wit);
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--rand) 55%, transparent);
  box-shadow: 0 2px 4px rgba(16,24,40,0.03), 0 28px 60px -34px rgba(16,24,40,0.30);
  padding: 8px 34px 30px;
  position: relative;
  overflow: hidden;
}
/* De lichtbalk: een merkstreep die het hele vel bovenaan afzet */
.ev-stap-content-wrap::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--os-gradient);
}

/* Kaart buiten het vel (bijv. het aanbod) houdt zijn eigen vorm */
.ev-kaart {
  background: var(--wit);
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--rand) 45%, transparent);
  padding: 30px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(16,24,40,0.04), 0 20px 44px -28px rgba(16,24,40,0.22);
}
@keyframes ev-kaart-op {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
/* Kaarten komen na elkaar in beeld in plaats van als blok */
.ev-stap-content-wrap .ev-kaart:nth-of-type(1) { animation-delay: 0.02s; }
.ev-stap-content-wrap .ev-kaart:nth-of-type(2) { animation-delay: 0.07s; }
.ev-stap-content-wrap .ev-kaart:nth-of-type(3) { animation-delay: 0.12s; }
.ev-stap-content-wrap .ev-kaart:nth-of-type(4) { animation-delay: 0.17s; }
.ev-stap-content-wrap .ev-kaart:nth-of-type(5) { animation-delay: 0.22s; }
.ev-stap-content-wrap .ev-kaart:nth-of-type(n+6) { animation-delay: 0.26s; }

.ev-kaart-titel {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--tekst);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: -0.3px;
}

.ev-kaart-titel .icoon {
  font-size: 0.9375rem;
  color: var(--hoofdkleur-tekst);
  display: inline-flex;
}
html.dark .ev-kaart-titel .icoon { color: color-mix(in srgb, var(--hoofdkleur) 55%, white); }

/* Stap-nummering — subtiel gradient-chipje */
.ev-stap-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--hoofdkleur) 10%, var(--wit));
  color: var(--hoofdkleur-tekst);
  border: 1px solid color-mix(in srgb, var(--hoofdkleur) 20%, transparent);
  font-size: 0.8125rem; font-weight: 800; flex-shrink: 0;
}

/* Verbruik-overzicht (stat-blok) */
.ev-verbruik-overzicht {
  padding: 16px 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--hoofdkleur) 5%, var(--wit)), color-mix(in srgb, var(--steunkleur) 6%, var(--wit)));
  border-radius: var(--radius-md);
  border: 1px solid var(--rand);
  margin-bottom: 14px;
}
.ev-verbruik-overzicht-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.ev-verbruik-label {
  font-size: 0.75rem; color: var(--tekst-licht); font-weight: 700;

}
.ev-verbruik-waarden { font-size: 1.1rem; font-weight: 800; margin-top: 4px; display: flex; align-items: center; flex-wrap: wrap; row-gap: 2px; letter-spacing: -0.3px; }
.ev-verbruik-stroom { color: var(--hoofdkleur-tekst); display: inline-flex; align-items: center; gap: 6px; }
.ev-verbruik-gas { color: var(--waarschuwing); display: inline-flex; align-items: center; gap: 6px; }
html.dark .ev-verbruik-stroom { color: color-mix(in srgb, var(--hoofdkleur) 55%, white); }
.ev-verbruik-scheiding {
  display: inline-block; width: 1px; height: 16px;
  background: var(--rand-sterk); margin: 0 12px; vertical-align: middle;
}
.ev-verbruik-bron { font-size: 0.75rem; color: var(--tekst-dim); text-align: right; }

/* Schatthulp — de controlevragen komen pas achter 'Help mij schatten' vandaan */
.ev-kaart > .hint { display: block; font-size: 0.75rem; color: var(--tekst-dim); line-height: 1.45; }

.ev-schathulp-knop {
  width: 100%; margin-top: 14px; display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; text-align: left; cursor: pointer; font: inherit; color: var(--tekst);
  background: color-mix(in srgb, var(--hoofdkleur) 2.5%, var(--wit));
  border: 1px solid color-mix(in srgb, var(--rand) 85%, transparent);
  border-radius: 16px; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.ev-schathulp-knop:hover {
  border-color: color-mix(in srgb, var(--hoofdkleur) 40%, var(--rand));
  box-shadow: 0 12px 26px -18px color-mix(in srgb, var(--hoofdkleur) 60%, transparent);
}
.ev-schathulp-knop-icoon {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: color-mix(in srgb, var(--hoofdkleur) 7%, var(--oppervlak2));
  color: color-mix(in srgb, var(--hoofdkleur-tekst) 78%, var(--tekst-licht));
  display: flex; align-items: center; justify-content: center; font-size: 0.9375rem;
}
.ev-schathulp-knop-tekst { display: flex; flex-direction: column; gap: 2px; }
.ev-schathulp-knop-titel { font-weight: 700; font-size: 0.875rem; }
.ev-schathulp-knop-sub { font-size: 0.75rem; color: var(--tekst-licht); }

.ev-schathulp-paneel {
  margin-top: 16px; padding: 18px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--hoofdkleur) 18%, transparent);
  background: color-mix(in srgb, var(--hoofdkleur) 3%, var(--wit));
}
.ev-schathulp-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px;
}
.ev-schathulp-kop-titel {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.875rem;
}
.ev-schathulp-kop-titel svg { color: var(--hoofdkleur-tekst); }
.ev-schathulp-sluit {
  background: none; border: none; cursor: pointer; font: inherit; padding: 4px;
  font-size: 0.75rem; font-weight: 600; color: var(--tekst-licht); text-decoration: underline;
}
.ev-schathulp-sluit:hover { color: var(--tekst); }
.ev-schathulp-uitleg { font-size: 0.75rem; color: var(--tekst-licht); line-height: 1.45; margin-bottom: 12px; }

html.dark .ev-schathulp-knop { background: #12172a; border-color: var(--rand-sterk); }
html.dark .ev-schathulp-knop-icoon,
html.dark .ev-schathulp-kop-titel svg { color: color-mix(in srgb, var(--hoofdkleur) 60%, white); }
html.dark .ev-schathulp-knop-icoon { background: var(--oppervlak2); }
html.dark .ev-schathulp-paneel { background: #12172a; border-color: var(--rand-sterk); }

/* ------------------------------------------------------------------
   Rondlopende lichtbalk
   Een conisch verloop draait om het blok; een masker knipt de vulling
   eruit zodat alleen de rand oplicht. De hoek is een geanimeerde
   custom property — zonder @property staat het verloop stil maar blijft
   de rand gewoon zichtbaar.
   ------------------------------------------------------------------ */
@property --ev-hoek {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes ev-rondloop { to { --ev-hoek: 360deg; } }

.ev-lichtrand,
.ev-opwek-optie {
  position: relative;
  border-radius: 18px;
  background: var(--wit);
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
  transition: box-shadow 0.28s, transform 0.28s;
}
.ev-lichtrand::before,
.ev-opwek-optie::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--ev-hoek),
    color-mix(in srgb, var(--rand) 90%, transparent) 0deg,
    color-mix(in srgb, var(--rand) 90%, transparent) 55deg,
    var(--hoofdkleur) 95deg,
    var(--steunkleur) 135deg,
    color-mix(in srgb, var(--rand) 90%, transparent) 185deg,
    color-mix(in srgb, var(--rand) 90%, transparent) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: ev-rondloop 6s linear infinite;
  pointer-events: none;
}
.ev-opwek-optie:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -20px color-mix(in srgb, var(--hoofdkleur) 65%, transparent);
}
/* Actief: het licht loopt sneller rond en het blok krijgt een gloed */
.ev-opwek-optie.actief::before {
  padding: 2px;
  background: conic-gradient(from var(--ev-hoek),
    color-mix(in srgb, var(--hoofdkleur) 22%, transparent) 0deg,
    var(--hoofdkleur) 70deg,
    var(--steunkleur) 130deg,
    var(--accent) 165deg,
    color-mix(in srgb, var(--hoofdkleur) 22%, transparent) 230deg,
    color-mix(in srgb, var(--hoofdkleur) 22%, transparent) 360deg);
  animation-duration: 3.2s;
}
.ev-opwek-optie.actief {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--hoofdkleur) 9%, transparent),
              0 20px 40px -24px color-mix(in srgb, var(--hoofdkleur) 75%, transparent);
}
.ev-opwek-optie-header {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
}
.ev-opwek-optie-icoon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: color-mix(in srgb, var(--hoofdkleur) 7%, var(--oppervlak2));
  color: color-mix(in srgb, var(--hoofdkleur-tekst) 78%, var(--tekst-licht));
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  transition: background 0.25s, color 0.25s;
}
.ev-opwek-optie-icoon svg { width: 19px; height: 19px; }
.ev-opwek-optie.actief .ev-opwek-optie-icoon { background: color-mix(in srgb, var(--hoofdkleur) 14%, var(--wit)); color: var(--hoofdkleur-tekst); }
/* Detailblok onder de chips. Losse blokken onder elkaar met echte
   tussenruimte; ze hingen eerder 4px over elkaar heen. */
.ev-opwek-detail {
  padding: 18px; margin-top: 14px;
  background: color-mix(in srgb, var(--hoofdkleur) 3%, var(--wit));
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--hoofdkleur) 14%, transparent);
}
.ev-opwek-detail-kop {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.4px;
 color: var(--tekst-licht);
  margin-bottom: 4px;
}
.ev-opwek-detail-sub {
  font-size: 0.75rem; color: var(--tekst-licht); margin-bottom: 16px;
}

html.dark .ev-verbruik-overzicht { background: #131a2e; border-color: #2b3752; }
html.dark .ev-opwek-optie { background: #1a2135; border-color: #2b3752; }
html.dark .ev-opwek-detail { background: #131a2e; border-color: #2b3752; }
html.dark .ev-opwek-optie-icoon { background: #131a2e; color: color-mix(in srgb, var(--hoofdkleur) 55%, white); }

/* Keuze-knoppen */
.ev-keuze-groep { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }

.ev-keuze-btn {
  flex: 1; min-width: 110px; padding: 22px 16px;
  border: 1.5px solid var(--rand); border-radius: 16px;
  background: var(--wit); cursor: pointer; text-align: center;
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), border-color 0.2s, box-shadow 0.2s, background 0.2s;
  position: relative; overflow: hidden;
}
/* Zachte gloed vanuit de onderkant zodra je de kaart kiest */
.ev-keuze-btn::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 70%;
  background: radial-gradient(60% 100% at 50% 100%, color-mix(in srgb, var(--hoofdkleur) 14%, transparent), transparent 72%);
  opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.ev-keuze-btn.geselecteerd::before { opacity: 1; }

.ev-keuze-btn:hover {
  border-color: color-mix(in srgb, var(--hoofdkleur) 45%, var(--rand));
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--hoofdkleur) 40%, transparent);
  transform: translateY(-3px);
}
.ev-keuze-btn:active { transform: translateY(-1px) scale(0.99); }

.ev-keuze-btn.geselecteerd {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--hoofdkleur) 4%, var(--wit)), color-mix(in srgb, var(--hoofdkleur) 4%, var(--wit))) padding-box,
    var(--os-gradient-diag) border-box;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--hoofdkleur) 9%, transparent),
              0 20px 40px -22px color-mix(in srgb, var(--hoofdkleur) 70%, transparent);
}

.ev-keuze-btn.geselecteerd::after {
  content: '\2713'; position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--hoofdkleur-tekst); color: #FFFFFF;
  font-size: 0.75rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--hoofdkleur) 45%, transparent);
  animation: ev-vink 0.32s var(--ease-uit, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
@keyframes ev-vink { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.ev-keuze-btn .icoon {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  width: 50px; height: 50px; margin: 0 auto 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--hoofdkleur) 7%, var(--oppervlak2));
  color: color-mix(in srgb, var(--hoofdkleur-tekst) 70%, var(--tekst-licht));
  transition: color 0.2s, background 0.2s, transform 0.2s;
  position: relative;
}
.ev-keuze-btn .icoon svg { width: 22px; height: 22px; }
.ev-keuze-btn:hover .icoon { transform: scale(1.06); }
.ev-keuze-btn.geselecteerd .icoon {
  background: color-mix(in srgb, var(--hoofdkleur) 14%, var(--wit));
  color: var(--hoofdkleur-tekst);
}
.ev-keuze-btn .label { font-size: 0.9375rem; font-weight: 800; color: var(--tekst); display: block; position: relative; letter-spacing: -0.2px; }
.ev-keuze-btn .sublabel { font-size: 0.75rem; color: var(--tekst-licht); display: block; margin-top: 4px; position: relative; }

/* Form velden */
.ev-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ev-rij.drie { grid-template-columns: 1fr 1fr 1fr; }

.ev-veld { display: flex; flex-direction: column; gap: 5px; }
.ev-veld.vol { grid-column: 1 / -1; }
.ev-veld label { font-size: 0.8125rem; font-weight: 600; color: var(--tekst-licht); margin-bottom: 6px; display: block; }
.ev-veld label .verplicht { color: var(--fout); }

.ev-veld input, .ev-veld select, .ev-veld textarea {
  padding: 13px 14px; border: 1.5px solid var(--rand); border-radius: 11px;
  font-size: 0.875rem; transition: border-color 0.15s, box-shadow 0.15s; outline: none; width: 100%;
  background: var(--wit); font-family: inherit; color: var(--tekst);
}
.ev-veld textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
.ev-voorschot-note {
  display: flex; align-items: center; gap: 9px; font-size: 0.8125rem; color: var(--tekst); line-height: 1.4;
  background: color-mix(in srgb, var(--steunkleur) 8%, var(--wit));
  border: 1px solid color-mix(in srgb, var(--steunkleur) 28%, transparent);
  border-radius: var(--radius-sm); padding: 11px 13px;
}
.ev-voorschot-note .ev-ico { color: var(--steunkleur-tekst); font-size: 1rem; flex-shrink: 0; }

.ev-veld input:focus, .ev-veld select:focus, .ev-veld textarea:focus {
  border-color: var(--steunkleur);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--steunkleur) 16%, transparent);
}

.ev-veld input.fout { border-color: var(--fout); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fout) 14%, transparent); }
.ev-veld input:disabled, .ev-veld select:disabled { background: var(--oppervlak2); color: var(--tekst-licht); cursor: not-allowed; opacity: 1; -webkit-text-fill-color: var(--tekst-licht); }
.ev-veld .hint { font-size: 0.75rem; color: var(--tekst-dim); line-height: 1.45; }

.adres-resultaat {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; color: var(--succes); font-weight: 600;
  padding: 9px 12px; margin-top: 8px;
  background: color-mix(in srgb, var(--succes) 8%, var(--wit)); border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--succes) 25%, transparent);
}

.adres-fout {
  font-size: 0.8125rem; color: var(--waarschuwing); padding: 9px 12px; margin-top: 8px;
  background: color-mix(in srgb, var(--waarschuwing) 8%, var(--wit)); border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--waarschuwing) 25%, transparent);
}

.ev-verbruik-veld { position: relative; }
.ev-verbruik-veld input { padding-right: 50px; }
.ev-verbruik-veld .eenheid { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 0.75rem; color: var(--tekst-dim); pointer-events: none; font-weight: 600; }

/* Simulatie */
.ev-simulatie {
  background: var(--achtergrond);
  border: 1px solid var(--rand);
  border-radius: var(--radius-md); padding: 16px;
}

.ev-simulatie-titel { font-weight: 700; font-size: 0.75rem; margin-bottom: 10px; color: var(--tekst-licht); }

.ev-personen-keuze { display: flex; gap: 8px; flex-wrap: wrap; }

.ev-persoon-btn {
  width: 40px; height: 40px; border: 1.5px solid var(--rand); border-radius: 50%;
  background: var(--wit); cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 0.875rem; color: var(--tekst);
  transition: transform 0.15s, border-color 0.15s, background 0.15s, color 0.15s;
}

.ev-persoon-btn:hover { border-color: var(--steunkleur); transform: translateY(-1px); }

.ev-persoon-btn.geselecteerd {
  background: var(--hoofdkleur-tekst);
  border-color: var(--hoofdkleur-tekst); color: #FFFFFF;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--hoofdkleur) 35%, transparent);
}

.ev-checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 0; font-size: 0.875rem; }
.ev-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--steunkleur); }

/* Toggle switch */
.ev-toggle {
  position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer;
}
.ev-toggle input { opacity: 0; width: 0; height: 0; }
.ev-toggle-slider {
  position: absolute; inset: 0; background: var(--rand-sterk); border-radius: 26px;
  transition: background 0.25s ease;
}
.ev-toggle-slider::before {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--wit);
  transition: transform 0.25s var(--ease-uit, cubic-bezier(0.22, 1, 0.36, 1)); box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ev-toggle input:checked + .ev-toggle-slider { background: var(--hoofdkleur-tekst); }
.ev-toggle input:checked + .ev-toggle-slider::before { transform: translateX(20px); }

html.dark .ev-toggle-slider { background: #475569; }
html.dark .ev-toggle-slider::before { background: #e2e8f0; }

input[type="range"] { accent-color: var(--steunkleur); }

/* ============================================================
   AANBOD — hero-productkaart (het "wow"-moment)
   ============================================================ */

.ev-aanbod-hero {
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
  box-shadow: 0 2px 4px rgba(16,24,40,0.03), 0 24px 48px -28px rgba(16,24,40,0.28);
  background: var(--wit);
}

.ev-aanbod-hero-top {
  background: var(--scrim-aanbod), var(--os-gradient-diag);
  padding: 22px 26px 20px;
  color: var(--op-aanbod);
  position: relative;
  overflow: hidden;
}
/* Lichtstreep die traag over het merkvlak trekt: dit is het moment van het aanbod */
.ev-aanbod-hero-top::after {
  content: ''; position: absolute; inset: -50% -20%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.22) 50%, transparent 58%);
  animation: ev-glans 5.5s ease-in-out 0.6s infinite;
}
@keyframes ev-glans {
  0%, 62% { transform: translateX(-70%); }
  100%    { transform: translateX(70%); }
}
.ev-aanbod-hero-top::before {
  content: '';
  position: absolute; top: -60px; right: -40px; width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%);
}
.ev-aanbod-hero-top::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.8;
}
.ev-aanbod-eyebrow { font-size: 0.75rem; opacity: 0.75; font-weight: 700; position: relative; }
.ev-aanbod-naam { font-size: 1.4rem; font-weight: 800; margin: 6px 0 0; letter-spacing: -0.5px; line-height: 1.25; position: relative; }

.ev-aanbod-hero-body { padding: 24px; }

.ev-aanbod-maand-label { font-size: 0.75rem; font-weight: 700; color: var(--tekst-licht); margin-bottom: 6px; }
.ev-aanbod-maand-bedrag {
  font-size: clamp(2.6rem, 6vw, 3.4rem); font-weight: 900; letter-spacing: -2px; line-height: 1;
  color: var(--hoofdkleur-tekst);
  display: flex; align-items: baseline; gap: 8px;
}
html.dark .ev-aanbod-maand-bedrag { color: color-mix(in srgb, var(--hoofdkleur) 55%, white); }
.ev-aanbod-maand-bedrag .per { font-size: 0.9375rem; font-weight: 600; color: var(--tekst-licht); letter-spacing: 0; }
.ev-aanbod-maand-note { font-size: 0.75rem; color: var(--tekst-dim); margin-top: 6px; }

.ev-aanbod-split { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--rand); }
.ev-aanbod-split-rij { display: flex; align-items: center; justify-content: space-between; }
.ev-aanbod-split-rij .naam { display: flex; align-items: center; gap: 9px; font-size: 0.9375rem; color: var(--tekst); font-weight: 600; }
.ev-aanbod-split-rij .naam .ev-ico { color: var(--hoofdkleur-tekst); font-size: 1.05rem; }
html.dark .ev-aanbod-split-rij .naam .ev-ico { color: color-mix(in srgb, var(--hoofdkleur) 55%, white); }
.ev-aanbod-split-rij .naam.gas .ev-ico { color: var(--waarschuwing); }
.ev-aanbod-split-rij .bedrag { font-weight: 800; font-size: 0.9375rem; }

.ev-prijsopbouw-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  margin-top: 18px; font-size: 0.8125rem; font-weight: 700; color: var(--hoofdkleur-tekst);
}
html.dark .ev-prijsopbouw-toggle { color: color-mix(in srgb, var(--hoofdkleur) 55%, white); }
.ev-prijsopbouw-toggle .ev-ico { transition: transform 0.2s; }
.ev-prijsopbouw-toggle.open .ev-ico { transform: rotate(180deg); }

/* ============================================================
   KOSTENSPECIFICATIE
   ============================================================ */

.ev-spec { margin-top: 14px; }

.ev-spec-blok {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
}
.ev-spec-kop {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  font-size: 0.8125rem; font-weight: 800; color: var(--tekst);
  border-bottom: 1px solid var(--rand);
  background: color-mix(in srgb, var(--hoofdkleur) 3%, var(--wit));
}
.ev-spec-kop svg { width: 15px; height: 15px; }

.ev-spec-tabel { width: 100%; border-collapse: collapse; }
.ev-spec-tabel td { padding: 11px 16px; vertical-align: top; }
.ev-spec-tabel tr + tr td { border-top: 1px solid color-mix(in srgb, var(--rand) 60%, transparent); }

.ev-spec-sectie td {
  padding: 9px 16px;
  background: color-mix(in srgb, var(--rand) 30%, transparent);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.5px;
 color: var(--tekst-licht);
}
.ev-spec-naam { display: block; font-size: 0.8125rem; color: var(--tekst); }
.ev-spec-detail { display: block; font-size: 0.75rem; color: var(--tekst-dim); margin-top: 2px; }
.ev-spec-bedrag {
  text-align: right; white-space: nowrap;
  font-size: 0.8125rem; font-weight: 700; color: var(--tekst);
  font-variant-numeric: tabular-nums;
}
.ev-spec-min .ev-spec-bedrag { color: var(--succes); }
/* Schijfregels onder de overheidsheffingen: ingesprongen en kleiner, zodat ze
   als uitsplitsing lezen en niet als extra kostenpost. */
.ev-spec-tabel tr.ev-spec-sub td { padding-top: 7px; padding-bottom: 7px; }
.ev-spec-tabel tr.ev-spec-sub td:first-child { padding-left: 28px; }
.ev-spec-sub .ev-spec-naam { font-size: 0.75rem; color: var(--tekst-dim); }
.ev-spec-sub .ev-spec-bedrag { font-size: 0.8125rem; font-weight: 500; color: var(--tekst-dim); }

/* KvK-opzoeken bij zakelijke klanten (stap 3). */
.ev-kvk-blok { margin-top: 4px; }
.ev-kvk-lijst {
  list-style: none; margin: 8px 0 0; padding: 0;
  border: 1px solid var(--rand); border-radius: 12px; overflow: hidden;
}
.ev-kvk-lijst li + li { border-top: 1px solid color-mix(in srgb, var(--rand) 60%, transparent); }
.ev-kvk-optie {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 10px 14px; background: transparent; border: 0; text-align: left;
  font: inherit; color: var(--tekst); cursor: pointer;
}
.ev-kvk-optie:hover, .ev-kvk-optie:focus-visible {
  background: color-mix(in srgb, var(--hoofdkleur) 6%, transparent); outline: none;
}
.ev-kvk-optie-naam { font-size: 0.875rem; font-weight: 600; }
.ev-kvk-optie-meta { font-size: 0.75rem; color: var(--tekst-dim); }
.ev-kvk-melding { margin-top: 8px; font-size: 0.8125rem; color: var(--tekst-dim); }
.ev-kvk-melding.fout { color: var(--fout); }
.ev-kvk-gekozen {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--succes) 45%, var(--rand)); border-radius: 12px;
  background: color-mix(in srgb, var(--succes) 6%, transparent);
}
.ev-kvk-vink {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%; background: var(--succes); color: #fff;
}
.ev-kvk-vink svg { width: 13px; height: 13px; }
.ev-kvk-gekozen-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 0.875rem; }
.ev-kvk-gekozen-tekst span { font-size: 0.75rem; color: var(--tekst-dim); }
.ev-kvk-wijzig {
  padding: 5px 12px; border: 1px solid var(--rand); border-radius: 999px; background: transparent;
  font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--tekst); cursor: pointer;
}

/* Voorwaarden van het aangeboden product, onder het akkoord in stap 4. */
.ev-voorwaarden { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--rand); border-radius: 14px; }
.ev-voorwaarden-kop { font-size: 0.8125rem; font-weight: 700; color: var(--tekst); margin-bottom: 6px; }
.ev-voorwaarden-lijst { list-style: none; margin: 0; padding: 0; }
.ev-voorwaarden-lijst li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; font-size: 0.8125rem;
}
.ev-voorwaarden-lijst li + li { border-top: 1px solid color-mix(in srgb, var(--rand) 60%, transparent); }
.ev-voorwaarden-lijst a { color: var(--hoofdkleur-tekst, var(--tekst)); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ev-voorwaarden-lijst span { font-size: 0.75rem; color: var(--tekst-dim); letter-spacing: 0.4px; }

.ev-spec-totaal td {
  background: color-mix(in srgb, var(--hoofdkleur) 5%, var(--wit));
  font-size: 0.875rem; font-weight: 800; color: var(--hoofdkleur-tekst);
  border-top: 1.5px solid color-mix(in srgb, var(--hoofdkleur) 25%, transparent) !important;
}

/* Optelling onder de tabellen */
.ev-spec-eind {
  border: 1px solid color-mix(in srgb, var(--hoofdkleur) 22%, transparent);
  border-radius: 14px; padding: 12px 16px;
  background: color-mix(in srgb, var(--hoofdkleur) 4%, var(--wit));
}
.ev-spec-eind-rij {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 0.8125rem; padding: 5px 0; color: var(--tekst-licht);
  font-variant-numeric: tabular-nums;
}
.ev-spec-eind-rij.korting { color: var(--succes); }
.ev-spec-eind-rij.totaal {
  border-top: 1px solid color-mix(in srgb, var(--hoofdkleur) 20%, transparent);
  margin-top: 6px; padding-top: 10px;
  font-size: 0.9375rem; font-weight: 800; color: var(--hoofdkleur-tekst);
}
.ev-spec-eind-rij.maand { font-weight: 700; color: var(--tekst); }
.ev-spec-eind-rij.maand em {
  font-style: normal; font-weight: 500; font-size: 0.75rem;
  color: var(--tekst-dim); margin-left: 6px;
}

.ev-spec .ev-bron-notitie { margin-top: 12px; }

html.dark .ev-spec-blok { background: #1a2135; border-color: #2b3752; }
html.dark .ev-spec-kop { background: #131a2e; border-bottom-color: #2b3752; }
html.dark .ev-spec-eind { background: #131a2e; }

@media (max-width: 600px) {
  .ev-spec-tabel td { padding: 10px 12px; }
  .ev-spec-kop { padding: 11px 12px; }
}

/* Verbruik-balk onder de kaart */
.ev-verbruik-balk {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border: 1px solid var(--rand); border-radius: var(--radius-md);
  margin-bottom: 18px; background: var(--wit); font-size: 0.875rem;
}
.ev-verbruik-balk strong { color: var(--hoofdkleur-tekst); }
html.dark .ev-verbruik-balk strong { color: color-mix(in srgb, var(--hoofdkleur) 55%, white); }
.ev-verbruik-balk .wijzig {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 700;
  color: var(--tekst-licht); text-decoration: none; white-space: nowrap; flex-shrink: 0;
  padding: 6px 10px; border-radius: var(--radius-sm); transition: background 0.15s, color 0.15s;
}
.ev-verbruik-balk .wijzig:hover { background: var(--oppervlak2); color: var(--hoofdkleur-tekst); }

/* USP-lijst */
.ev-usp-lijst { display: flex; flex-direction: column; gap: 12px; }
.ev-usp { display: flex; align-items: flex-start; gap: 11px; font-size: 0.875rem; line-height: 1.45; }
.ev-usp .ev-usp-check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px;
  background: var(--os-gradient-diag); color: var(--op-gradient);
  display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
}

/* Gekozen-product samenvatting (stap 3) */
.ev-gekozen {
  border: 1.5px solid var(--steunkleur);
  background: color-mix(in srgb, var(--steunkleur) 5%, var(--wit));
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px;
}
.ev-gekozen-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.ev-gekozen-eyebrow { font-size: 0.75rem; color: var(--tekst-licht); font-weight: 700; margin-bottom: 3px; }
.ev-gekozen-naam { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.3px; }
.ev-gekozen-prijs { font-size: 1.5rem; font-weight: 900; color: var(--hoofdkleur-tekst); letter-spacing: -0.5px; }
html.dark .ev-gekozen-prijs { color: color-mix(in srgb, var(--hoofdkleur) 55%, white); }
.ev-gekozen-prijs .per { font-size: 0.75rem; font-weight: 600; color: var(--tekst-licht); }
.ev-gekozen-kenmerken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ev-kenmerk {
  font-size: 0.75rem; padding: 4px 10px; background: var(--wit);
  border: 1px solid var(--rand); border-radius: 999px; color: var(--tekst-licht); font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
}
.ev-kenmerk::before { content: '\2713'; color: var(--steunkleur-tekst); font-weight: 800; }
.ev-wijzig-product { display: inline-block; margin-top: 12px; font-size: 0.8125rem; color: var(--hoofdkleur-tekst); font-weight: 700; text-decoration: none; }
.ev-wijzig-product:hover { text-decoration: underline; }
html.dark .ev-wijzig-product { color: color-mix(in srgb, var(--hoofdkleur) 55%, white); }

/* ===== CONTROLE-STAP ===== */
.ev-controle-kaart {
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--schaduw-kaart);
}
.ev-controle-kop {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.75rem; font-weight: 800; color: var(--tekst-licht);
 margin-bottom: 8px;
}
.ev-controle-kop > span { display: inline-flex; align-items: center; gap: 8px; }
.ev-controle-kop .ev-ico { color: var(--hoofdkleur-tekst); font-size: 0.9375rem; }
html.dark .ev-controle-kop .ev-ico { color: color-mix(in srgb, var(--hoofdkleur) 55%, white); }
.ev-controle-wijzig {
  font-size: 0.75rem; font-weight: 700; color: var(--hoofdkleur-tekst); text-decoration: none;
  text-transform: none; letter-spacing: 0; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--rand); transition: background 0.15s, border-color 0.15s;
}
.ev-controle-wijzig:hover { background: var(--oppervlak2); border-color: var(--rand-sterk); }
html.dark .ev-controle-wijzig { color: color-mix(in srgb, var(--hoofdkleur) 55%, white); }
.ev-controle-kaart .ev-samenvatting { background: transparent; padding: 0; }

/* ============================================================
   SAMENVATTING (bevestiging)
   ============================================================ */

.ev-samenvatting { background: var(--achtergrond); border-radius: var(--radius-md); padding: 16px; }
.ev-samenvatting-rij { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--rand) 60%, transparent); font-size: 0.875rem; }
.ev-samenvatting-rij:last-child { border-bottom: none; }
.ev-samenvatting-rij .label { color: var(--tekst-licht); }
.ev-samenvatting-rij .waarde { font-weight: 700; text-align: right; }
.ev-samenvatting-rij.totaal {
  font-size: 1rem; font-weight: 800; color: var(--hoofdkleur-tekst);
  border-top: 2px solid var(--hoofdkleur); margin-top: 6px; padding-top: 12px;
}
html.dark .ev-samenvatting-rij.totaal { color: color-mix(in srgb, var(--hoofdkleur) 55%, white); border-top-color: color-mix(in srgb, var(--hoofdkleur) 55%, white); }

/* ============================================================
   HANDTEKENING
   ============================================================ */

.ev-handtekening-label { font-weight: 700; margin-bottom: 8px; font-size: 0.875rem; }
.ev-handtekening-canvas-wrap {
  border: 1.5px dashed var(--rand-sterk); border-radius: var(--radius-md); overflow: hidden;
  position: relative; background: var(--achtergrond); transition: border-color 0.15s;
}
.ev-handtekening-canvas-wrap:hover { border-color: var(--steunkleur); }
.ev-handtekening-canvas-wrap canvas { display: block; width: 100%; height: 140px; cursor: crosshair; }
.ev-handtekening-wis {
  position: absolute; top: 8px; right: 8px; background: var(--wit);
  color: var(--tekst-licht); border: 1px solid var(--rand); border-radius: var(--radius-sm);
  padding: 5px 12px; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.ev-handtekening-wis:hover { background: var(--fout); color: var(--wit); border-color: var(--fout); }
.ev-handtekening-hint { font-size: 0.75rem; color: var(--tekst-dim); margin-top: 6px; }

/* ============================================================
   KNOPPEN
   ============================================================ */

.ev-btn {
  position: relative; overflow: hidden;
  padding: 12px 24px; border: 1.5px solid transparent; border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 700; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
  display: inline-flex; align-items: center; gap: 8px; font-family: inherit;
}

.ev-btn-primair { background: var(--hoofdkleur); color: var(--op-hoofdkleur); box-shadow: 0 4px 14px color-mix(in srgb, var(--hoofdkleur) 28%, transparent); }
.ev-btn-primair:hover { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--hoofdkleur) 34%, transparent); }

.ev-btn-succes { background: var(--steunkleur); color: var(--op-steunkleur); box-shadow: 0 4px 14px color-mix(in srgb, var(--steunkleur) 30%, transparent); }
.ev-btn-succes:hover { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--steunkleur) 38%, transparent); }

.ev-btn-terug { background: var(--wit); color: var(--tekst-licht); border-color: var(--rand); }
.ev-btn-terug:hover { border-color: var(--tekst-licht); color: var(--tekst); }
.ev-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.ev-acties { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; margin-top: 20px; border-top: 1px solid var(--rand); }

/* ============================================================
   FOUTMELDING & BEVESTIGING
   ============================================================ */

.ev-fout {
  background: color-mix(in srgb, var(--fout) 8%, var(--wit)); color: var(--fout); padding: 12px 15px; border-radius: var(--radius-sm);
  font-size: 0.8125rem; font-weight: 600; border: 1px solid color-mix(in srgb, var(--fout) 25%, transparent);
  margin-bottom: 16px; display: none; align-items: center; gap: 8px;
}
.ev-fout.zichtbaar { display: flex; animation: ev-shake 0.35s; }
@keyframes ev-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

.ev-bevestiging { text-align: center; padding: 36px 18px; }
.ev-bevestiging .icoon-wrap {
  width: 74px; height: 74px;
  background: var(--os-gradient-diag);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; font-size: 2rem; color: #fff;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--steunkleur) 35%, transparent);
  animation: ev-pop 0.5s var(--ease-uit, cubic-bezier(0.22, 1, 0.36, 1));
}
@keyframes ev-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ev-bevestiging h2 { color: var(--tekst); margin-bottom: 8px; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.5px; }
.ev-bevestiging p { color: var(--tekst-licht); max-width: 420px; margin: 0 auto; line-height: 1.55; font-size: 0.875rem; }
.ev-bevestiging-partner { font-size: 0.875rem; color: var(--tekst-licht); margin-top: 6px; }

.ev-laden { text-align: center; padding: 40px 14px; color: var(--tekst-licht); font-size: 0.875rem; }
.ev-spinner {
  width: 30px; height: 30px; border: 3px solid var(--rand);
  border-top-color: var(--steunkleur); border-radius: 50%;
  animation: spin 0.7s linear infinite; margin: 0 auto 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   BEGINSCHERM (hero)
   ============================================================ */

.ev-beginscherm {
  position: relative; min-height: 100vh; display: flex;
  align-items: center; justify-content: center;
  /* Licht vlak, zodat het kleurlogo van het merk werkt. De merkkleur komt
     terug als zachte tint in plaats van als volvlak. */
  background: var(--hero-vlak);
  overflow: hidden;
}

.ev-beginscherm::before {
  content: ''; position: absolute; inset: -25%;
  background:
    radial-gradient(34% 38% at 16% 18%, var(--hero-tint-2) 0%, transparent 64%),
    radial-gradient(30% 34% at 84% 14%, var(--hero-tint-1) 0%, transparent 62%),
    radial-gradient(42% 42% at 78% 88%, var(--hero-tint-1) 0%, transparent 60%);
  filter: blur(36px); opacity: 0.9; z-index: 0;
  animation: ev-drift 34s ease-in-out infinite alternate;
}
@keyframes ev-drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
}
/* Fijne korrel: haalt de digitale vlakheid uit het kleurverloop */
.ev-beginscherm::after {
  background: var(--os-gradient);
  background-size: 100% 3px;
  background-position: bottom;
  background-repeat: no-repeat;
}

.ev-begin-achtergrond {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 15%, color-mix(in srgb, var(--steunkleur) 40%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 20%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 80% 90%, color-mix(in srgb, var(--hoofdkleur) 60%, black) 0%, transparent 60%);
  animation: ev-gloed 14s ease-in-out infinite alternate;
}
@keyframes ev-gloed {
  from { transform: scale(1) translate(0,0); opacity: 0.9; }
  to   { transform: scale(1.15) translate(-2%, 1%); opacity: 1; }
}
/* Signatuur-hairline onderaan de hero */
.ev-beginscherm::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--os-gradient); z-index: 2;
}

.ev-begin-content { position: relative; z-index: 1; max-width: 540px; width: 100%; padding: 40px 22px; text-align: center; }

.ev-begin-logo-wrap { margin-bottom: 24px; animation: ev-opkomst 0.5s cubic-bezier(0.22,1,0.36,1) both; }
.ev-begin-logo { max-height: 60px; max-width: 280px; width: auto; object-fit: contain; }
.ev-begin-logo-tekst { font-size: 1.3rem; font-weight: 800; color: var(--op-hero); letter-spacing: -0.4px; }

.ev-begin-partner { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ev-begin-partner img { height: 30px; width: auto; object-fit: contain; }
.ev-begin-partner span { font-size: 0.75rem; color: var(--tekst-licht); }

.ev-begin-titel {
  font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 900; color: var(--op-hero);
  line-height: 1.06; margin-bottom: 14px; letter-spacing: -1.6px;
  text-wrap: balance;
  animation: ev-opkomst 0.55s cubic-bezier(0.22,1,0.36,1) both;
}
.ev-begin-titel .accent {
  color: var(--accent-op-hero);
}
.ev-begin-subtitel {
  font-size: 1rem; color: var(--op-hero-zacht); max-width: 440px; margin: 0 auto 30px; line-height: 1.6;
  animation: ev-opkomst 0.55s 0.06s cubic-bezier(0.22,1,0.36,1) both;
}

.ev-begin-form {
  position: relative;
  background: var(--wit);
  border: 1px solid color-mix(in srgb, var(--rand) 80%, transparent);
  border-radius: 20px; padding: 26px; overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(16,24,40,0.35), 0 2px 6px rgba(16,24,40,0.05);
  margin-bottom: 26px; text-align: left;
  animation: ev-opkomst 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
/* Lichtrandje langs de bovenkant, zoals glas dat licht vangt */
.ev-begin-form::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--os-gradient); opacity: 0.9;
}
@keyframes ev-opkomst {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.ev-begin-form-rij { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ev-begin-veld { flex: 1; min-width: 0; }
.ev-begin-veld label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--tekst-licht); margin-bottom: 6px; }

.ev-begin-veld input {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--rand);
  border-radius: var(--radius-sm); font-size: 0.9375rem; outline: none; transition: border-color 0.15s, box-shadow 0.15s; font-family: inherit; color: var(--tekst); background: var(--wit);
}
.ev-begin-veld input:focus { border-color: var(--steunkleur); box-shadow: 0 0 0 3px color-mix(in srgb, var(--steunkleur) 16%, transparent); }

.ev-begin-veld-pc { flex: 1.8; }
.ev-begin-veld-huisnr { flex: 0.65; }
.ev-begin-veld-toev { flex: 0.62; }
.ev-begin-veld-btn { flex: 0 0 100%; }
.ev-begin-btn {
  width: 100%; padding: 15px 18px; position: relative; overflow: hidden;
  background: var(--os-gradient-diag);
  color: var(--op-gradient); border: none; border-radius: var(--radius-sm); font-size: 0.9375rem; font-weight: 800;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; white-space: nowrap; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--hoofdkleur) 45%, transparent);
}
/* Glans die één keer over de knop trekt bij hover */
.ev-begin-btn::after, .ev-btn-primair::after, .ev-btn-succes::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.ev-begin-btn:hover::after, .ev-btn-primair:hover::after, .ev-btn-succes:hover::after { transform: translateX(120%); }
.ev-begin-btn:active { transform: translateY(1px); }
.ev-begin-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--hoofdkleur) 40%, transparent); }

#ev-begin-adres-result { flex: 0 0 100%; }
#ev-begin-adres-result:empty { display: none; }
.ev-begin-adres-vak {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius-md);
  font-size: 0.8125rem; line-height: 1.4;
}
.ev-begin-adres-vak.gevonden {
  background: color-mix(in srgb, var(--succes) 12%, var(--wit));
  border: 1px solid color-mix(in srgb, var(--succes) 30%, transparent);
  color: color-mix(in srgb, var(--succes) 80%, black);
}
.ev-begin-adres-vak.onbekend {
  background: color-mix(in srgb, var(--waarschuwing) 10%, var(--wit));
  border: 1px solid color-mix(in srgb, var(--waarschuwing) 30%, transparent);
  color: color-mix(in srgb, var(--waarschuwing) 82%, black);
}
.ev-begin-adres-vak.fout {
  background: color-mix(in srgb, var(--fout) 10%, var(--wit));
  border: 1px solid color-mix(in srgb, var(--fout) 32%, transparent);
  color: color-mix(in srgb, var(--fout) 82%, black);
}
.ev-begin-adres-vak.laden { background: var(--oppervlak2); color: var(--tekst-licht); }
/* Vervolgvraag binnen een opwek-optie: heb je het niet, mogen we je dan benaderen? */
.ev-benaderen-inline {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0 14px 14px; padding: 12px 15px;
  border-radius: 12px; background: color-mix(in srgb, var(--hoofdkleur) 3%, var(--wit));
  border: 1px solid color-mix(in srgb, var(--rand) 75%, transparent);
}
.ev-benaderen-inline-tekst { font-size: 0.8125rem; color: var(--tekst-licht); line-height: 1.4; }
.ev-toggle.ev-toggle-klein { transform: scale(0.86); transform-origin: right center; flex-shrink: 0; }
html.dark .ev-benaderen-inline { background: #12172a; }

/* Toestemming om te benaderen — bewust een aparte, rustige rij */
.ev-benaderen {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 14px; padding: 15px 16px; border-radius: 14px;
  border: 1px solid var(--rand); background: var(--achtergrond);
}
.ev-benaderen-titel { font-size: 0.875rem; font-weight: 700; }
.ev-benaderen-sub { font-size: 0.75rem; color: var(--tekst-licht); margin-top: 3px; line-height: 1.45; }
html.dark .ev-benaderen { background: #12172a; border-color: var(--rand); }

/* Vinkrij: een aanvinkbare regel met dezelfde rondlopende rand */
.ev-vinkrij {
  display: flex; align-items: flex-start; gap: 13px; cursor: pointer;
  margin-top: 16px; padding: 16px 18px;
  position: relative; border-radius: 16px; background: var(--wit);
  transition: box-shadow 0.25s;
}
.ev-vinkrij::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--ev-hoek),
    color-mix(in srgb, var(--rand) 90%, transparent) 0deg,
    color-mix(in srgb, var(--rand) 90%, transparent) 55deg,
    var(--hoofdkleur) 95deg, var(--steunkleur) 135deg,
    color-mix(in srgb, var(--rand) 90%, transparent) 185deg,
    color-mix(in srgb, var(--rand) 90%, transparent) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: ev-rondloop 6s linear infinite;
  pointer-events: none;
}
.ev-vinkrij input { position: absolute; opacity: 0; pointer-events: none; }
.ev-vink {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; margin-top: 1px;
  border: 1.5px solid var(--rand-sterk); background: var(--wit);
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.ev-vink svg { width: 13px; height: 13px; }
.ev-vinkrij:hover .ev-vink { border-color: var(--hoofdkleur-tekst); }
.ev-vinkrij.aangevinkt .ev-vink {
  background: var(--hoofdkleur-tekst); border-color: var(--hoofdkleur-tekst);
  animation: ev-vink 0.3s var(--ease-uit, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
.ev-vinkrij.aangevinkt { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hoofdkleur) 8%, transparent); }
.ev-vinkrij-tekst { display: flex; flex-direction: column; gap: 3px; }
.ev-vinkrij-titel { font-size: 0.9375rem; font-weight: 700; }
.ev-vinkrij-sub { font-size: 0.8125rem; color: var(--tekst-licht); line-height: 1.45; }

/* Schuifbalk in merkkleur, met een spoor dat de gekozen waarde toont */
.ev-schuif {
  width: 100%; height: 6px; -webkit-appearance: none; appearance: none;
  border-radius: 99px; background: var(--oppervlak2); outline: none; cursor: pointer;
}
.ev-schuif::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--wit); border: 2px solid var(--hoofdkleur-tekst); cursor: grab;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--hoofdkleur) 45%, transparent);
  transition: transform 0.15s;
}
.ev-schuif::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing; }
.ev-schuif::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--wit); border: 2px solid var(--hoofdkleur-tekst); cursor: grab;
}
.ev-schuif::-moz-range-track { height: 6px; border-radius: 99px; background: var(--oppervlak2); }

/* Meterregistratie: nummer of foto, naast elkaar */
.ev-meter-blok {
  margin: -2px 0 18px; padding: 18px;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--rand) 85%, transparent);
  background: color-mix(in srgb, var(--hoofdkleur) 2.5%, var(--wit));
}
.ev-meter-kop {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
  font-size: 0.8125rem; font-weight: 700; color: var(--tekst);
}
.ev-meter-rij { display: flex; gap: 10px; align-items: stretch; }
.ev-meter-rij .ev-veld { flex: 1; min-width: 0; }
.ev-meter-rij .ev-veld input { width: 100%; }
.ev-meter-rij .ev-meterfoto-knop { flex-shrink: 0; }
html.dark .ev-meter-blok { background: #12172a; border-color: var(--rand-sterk); }

/* EAN-keuze en meterfoto (stap 1) */
.ev-ean-blok { margin-bottom: 14px; }
.ev-ean-kop {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  font-size: 0.8125rem; font-weight: 700; color: var(--tekst);
}
.ev-ean-kop svg { width: 15px; height: 15px; color: var(--hoofdkleur-tekst); }
.ev-ean-aantal {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0;
  color: var(--tekst-licht); background: var(--oppervlak2); padding: 3px 9px; border-radius: 20px;
}
.ev-ean-opties { display: flex; flex-direction: column; gap: 8px; }
.ev-ean-optie {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 15px 16px; border: 1.5px solid var(--rand); border-radius: 13px;
  background: var(--wit); transition: border-color 0.15s, box-shadow 0.15s;
}
.ev-ean-optie:hover { border-color: var(--rand-sterk); }
.ev-ean-optie.geselecteerd {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--hoofdkleur) 4%, var(--wit)), color-mix(in srgb, var(--hoofdkleur) 4%, var(--wit))) padding-box,
    var(--os-gradient-diag) border-box;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hoofdkleur) 9%, transparent),
              0 16px 32px -22px color-mix(in srgb, var(--hoofdkleur) 65%, transparent);
}
.ev-ean-optie input { accent-color: var(--hoofdkleur-tekst); flex-shrink: 0; width: 17px; height: 17px; }
.ev-ean-optie-tekst, .ev-ean-enkel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev-ean-enkel {
  padding: 13px 14px; border: 1.5px solid var(--rand); border-radius: 11px; background: var(--achtergrond);
}
.ev-ean-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.3px; }
.ev-ean-meta { font-size: 0.75rem; color: var(--tekst-licht); }

.ev-veld-scheiding { height: 1px; background: var(--rand); margin: 16px 0 14px; }
.ev-optioneel {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0;
  color: var(--tekst-dim); background: var(--oppervlak2); padding: 3px 9px; border-radius: 20px;
}
.ev-meterfoto { padding: 13px; border: 1px dashed var(--rand-sterk); border-radius: var(--radius-md); background: var(--achtergrond); }
.ev-meterfoto-titel { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8125rem; font-weight: 700; }
.ev-meterfoto-titel svg { width: 15px; height: 15px; color: var(--hoofdkleur-tekst); }
.ev-meterfoto-kop { margin-bottom: 4px; }
.ev-meterfoto-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
  padding: 0 16px; border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 700;
  background: var(--wit); border: 1.5px solid var(--rand-sterk); color: var(--tekst);
  transition: border-color 0.15s, transform 0.15s;
}
.ev-meterfoto-knop:active { transform: scale(0.98); }
.ev-meterfoto-knop:hover { border-color: var(--hoofdkleur); }
.ev-meterfoto-knop svg { width: 14px; height: 14px; }
.ev-meterfoto-lijst { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ev-meterfoto-item { position: relative; width: 74px; height: 74px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--rand); }
.ev-meterfoto-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-meterfoto-weg {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%;
  border: none; cursor: pointer; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.9375rem; line-height: 1;
}
.ev-meterfoto-bezig { font-size: 0.75rem; color: var(--tekst-licht); align-self: center; }

html.dark .ev-ean-optie { background: #1a2135; border-color: var(--rand); }
html.dark .ev-ean-enkel, html.dark .ev-meterfoto { background: #12172a; }
html.dark .ev-meterfoto-knop { background: #1a2135; }

.ev-toevoeging-keuzes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ev-toevoeging-keuze {
  padding: 5px 12px; border-radius: 20px; cursor: pointer; font: inherit;
  font-size: 0.8125rem; font-weight: 700;
  background: var(--wit); border: 1.5px solid var(--rand-sterk); color: var(--tekst);
}
.ev-toevoeging-keuze:hover { border-color: var(--hoofdkleur); background: color-mix(in srgb, var(--hoofdkleur) 8%, var(--wit)); }
.ev-begin-adres-icoon {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--succes); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
}
.ev-begin-adres-icoon svg { width: 13px; height: 13px; }
.ev-begin-adres-tekst { display: flex; flex-direction: column; }
.ev-begin-adres-tekst strong { font-weight: 700; }

html.dark .ev-begin-adres-vak.gevonden { background: color-mix(in srgb, var(--succes) 18%, #12172a); color: color-mix(in srgb, var(--succes) 45%, white); }
html.dark .ev-begin-adres-vak.onbekend { background: color-mix(in srgb, var(--waarschuwing) 16%, #12172a); color: color-mix(in srgb, var(--waarschuwing) 50%, white); }
html.dark .ev-begin-adres-vak.fout { background: color-mix(in srgb, var(--fout) 18%, #12172a); color: color-mix(in srgb, var(--fout) 50%, white); }
html.dark .ev-begin-adres-vak.laden { background: #12172a; }
html.dark .ev-toevoeging-keuze { background: #1a2135; border-color: var(--rand-sterk); }

.ev-begin-usps { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }
/* Alleen tekst, maar donker en iets groter: het zachte grijs verdween in het
   kleurverloop van de achtergrond. */
.ev-begin-usp { display: flex; align-items: center; gap: 7px; color: var(--op-hero); font-size: 0.875rem; font-weight: 600; }
.ev-begin-usp-icoon { color: var(--accent-op-hero); font-size: 1rem; display: inline-flex; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 700px) {
  .ev-voortgang { padding: 22px 20px 16px; }
  .ev-stap-node-label { font-size: 0.75rem; }
}

@media (max-width: 600px) {
  .ev-begin-titel { font-size: 1.6rem; }
  .ev-begin-subtitel { font-size: 0.875rem; }
  .ev-begin-form-rij { flex-direction: column; align-items: stretch; }
  .ev-begin-veld, .ev-begin-veld-btn { flex: none; width: 100%; }
  .ev-begin-usps { flex-direction: column; align-items: center; gap: 8px; }
  .ev-rij, .ev-rij.drie { grid-template-columns: 1fr; }
  .ev-keuze-groep:not(.ev-keuze-rij) { flex-direction: column; }
  .ev-keuze-groep:not(.ev-keuze-rij) .ev-keuze-btn { min-width: 100%; }
  .ev-header { padding: 0 16px; height: 52px; }
  .ev-banner { height: 108px; }
  .ev-header .hulp-link span { display: none; }
  .ev-stap-node-cirkel { width: 36px; height: 36px; font-size: 0.9375rem; }
  .ev-stap-node::before { top: 18px; }
  .ev-aanbod-maand-bedrag { font-size: 2.1rem; }
  .ev-stap-intro h2 { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ev-beginscherm::before, .ev-aanbod-hero-top::after { animation: none; }
  .ev-opwek-optie::before, .ev-vinkrij::before, .ev-lichtrand::before { animation: none; }
  .ev-kaart, .ev-begin-form, .ev-begin-titel, .ev-begin-subtitel, .ev-begin-logo-wrap,
  .ev-keuze-btn.geselecteerd::after { animation: none; }
  .ev-begin-btn::after, .ev-btn-primair::after, .ev-btn-succes::after { display: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   POP-UP WIDGET
   ============================================================ */

.ose-widget-trigger {
  position: fixed; right: 22px; bottom: 22px; z-index: 9998;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 24px; border: none; border-radius: 999px;
  color: #fff; font-family: inherit; font-size: 0.9375rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 14px 34px -10px rgba(16,24,40,0.45), 0 2px 6px rgba(16,24,40,0.16);
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s;
  overflow: hidden;
}
.ose-widget-trigger:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.26); }

.ose-widget-overlay {
  position: fixed; inset: 0; z-index: 99999; background: rgba(15,20,35,0.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: ose-fade-in 0.2s ease; backdrop-filter: blur(4px);
}
@keyframes ose-fade-in { from { opacity: 0; } to { opacity: 1; } }

.ose-widget-modal {
  width: 100%; max-width: 760px; height: 92vh; max-height: 900px;
  background: var(--achtergrond, #F4F7F0); border-radius: var(--radius, 14px); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3); position: relative;
  animation: ose-slide-up 0.28s cubic-bezier(0.16,1,0.3,1);
}
@keyframes ose-slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.ose-widget-modal iframe { width: 100%; height: 100%; border: none; }

.ose-widget-sluit {
  position: absolute; top: 12px; right: 12px; z-index: 10;
  width: 34px; height: 34px; background: rgba(0,0,0,0.35); color: #fff;
  border: none; border-radius: 50%; font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.ose-widget-sluit:hover { background: rgba(0,0,0,0.6); }

.ose-widget-balk {
  position: fixed; top: 0; left: 0; right: 0; z-index: 99998;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 20px; background: var(--hoofdkleur, #243062); color: #fff;
  font-family: inherit; font-size: 0.875rem; box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.ose-widget-balk-btn { padding: 7px 18px; background: var(--steunkleur, #66B434); color: #fff; border: none; border-radius: 999px; font-weight: 800; font-size: 0.8125rem; cursor: pointer; font-family: inherit; }
.ose-widget-balk-sluit { background: none; border: none; color: rgba(255,255,255,0.5); font-size: 0.9375rem; cursor: pointer; padding: 4px 6px; }

/* ============================================================
   DARK MODE
   ============================================================ */

html.dark {
  --tekst: #F1F5F9;
  --tekst-licht: #A8B0C8;
  --tekst-dim: #6B7391;
  --achtergrond: #12172A;
  --oppervlak2: #1F2740;
  --wit: #1A2135;
  --rand: #2B3752;
  --rand-sterk: #3A4766;
  --schaduw: 0 1px 2px rgba(0,0,0,0.3);
  --schaduw-hover: 0 8px 28px rgba(0,0,0,0.45);
  --schaduw-kaart: 0 1px 2px rgba(0,0,0,0.25);
}

html.dark body { background: #0C1020; }
html.dark .ev-wrapper { background: var(--achtergrond); }
html.dark .ev-voortgang { background: linear-gradient(180deg, var(--wit) 0%, var(--achtergrond) 100%); border-bottom-color: var(--rand); }
html.dark .ev-stap-node-cirkel { background: var(--wit); border-color: var(--rand); }
html.dark .ev-header { background: var(--wit); border-bottom-color: var(--rand); }
/* Een foto omkeren kan niet; in donkere modus dimmen we hem zodat de
   banner niet als lichtbak boven de pagina hangt. */
html.dark .ev-banner { filter: brightness(0.62) saturate(0.85) contrast(1.02); }
html.dark .ev-banner-tint { opacity: 0.22; }
html.dark .ev-beginscherm { background: color-mix(in srgb, var(--hoofdkleur) 45%, #0c1020); }
html.dark .ev-begin-form { background: var(--wit); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
html.dark .ev-begin-veld input { background: #12172a; border-color: var(--rand-sterk); color: var(--tekst); }
html.dark .ev-veld input, html.dark .ev-veld select { background: #12172a; border-color: var(--rand-sterk); color: var(--tekst); }
html.dark .ev-keuze-btn { background: var(--wit); border-color: var(--rand); }
html.dark .ev-keuze-btn.geselecteerd { background: color-mix(in srgb, var(--steunkleur) 12%, var(--wit)); }
html.dark .ev-simulatie { background: #12172a; border-color: var(--rand); }
html.dark .ev-persoon-btn { background: var(--wit); border-color: var(--rand-sterk); color: var(--tekst); }
html.dark .ev-kenmerk { background: #12172a; border-color: var(--rand); color: var(--tekst-licht); }
html.dark .ev-samenvatting { background: #12172a; }
html.dark .ev-handtekening-canvas-wrap { background: #12172a; border-color: var(--rand-sterk); }
html.dark .ev-verbruik-balk { background: var(--wit); }
html.dark .ev-aanbod-hero-body { background: var(--wit); }
html.dark .ose-widget-modal { background: var(--achtergrond); }
html.dark .ev-veld input:disabled, html.dark .ev-veld select:disabled { background: #12172a; color: var(--tekst-dim); -webkit-text-fill-color: var(--tekst-dim); }

/* ============================================================
   ADMIN
   ============================================================ */
.admin-layout { display: grid; grid-template-columns: 200px 1fr; min-height: 100vh; }
.admin-sidebar { background: var(--tekst); color: var(--wit); padding: 16px; }
.admin-sidebar h2 { font-size: 0.875rem; margin-bottom: 14px; color: var(--wit); }
.admin-sidebar a { color: rgba(255,255,255,0.6); text-decoration: none; display: block; padding: 6px 8px; border-radius: 4px; margin-bottom: 2px; font-size: 0.8125rem; }
.admin-sidebar a:hover, .admin-sidebar a.actief { background: rgba(255,255,255,0.1); color: var(--wit); }
.admin-content { padding: 20px; overflow-x: auto; }
.admin-tabel { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.admin-tabel th, .admin-tabel td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--rand); }
.admin-tabel th { font-weight: 600; color: var(--tekst-licht); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.3px; }
.status-badge { padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.status-nieuw { background: #dbeafe; color: #1d4ed8; }
.status-verwerkt { background: #f0fdf4; color: #16a34a; }

/* ============================================================
   RUSTIGE KOLOM — herziene opzet (Frank Energie / Tibber)
   Geen kaders om secties: één kolom op wit, elke vraag als kop,
   ruime witruimte ertussen. Kaders vragen aandacht die naar de
   inhoud hoort te gaan.
   ============================================================ */

/* Vel en sectiekaders vervallen */
.ev-stap-content-wrap {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}
.ev-stap-content-wrap::before { display: none; }

.ev-stap-content-wrap .ev-kaart,
.ev-stap-content-wrap .ev-vel {
  background: transparent;
  border: none;
  border-top: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 44px;
}
.ev-stap-content-wrap .ev-kaart:first-of-type { padding-top: 0; }
.ev-stap-content-wrap .ev-kaart:last-of-type { margin-bottom: 34px; }

/* Sectiekop wordt een vraag, geen stempel */
.ev-kaart-titel {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--tekst);
  letter-spacing: -0.45px;
  margin-bottom: 16px;
  gap: 10px;
}
/* Het nummer is weg; de kop zegt zelf al waar je bent. */
.ev-stap-nr { display: none; }
.ev-kaart-titel .icoon { color: var(--hoofdkleur-tekst); display: inline-flex; }
.ev-kaart-titel .icoon svg { width: 19px; height: 19px; }

/* Smallere leeskolom */
.ev-inhoud { max-width: 620px; padding: 44px clamp(20px, 5vw, 28px) 80px; }

/* Voortgang als broodkruimel in plaats van een rail met bollen */
.ev-voortgang { padding: 22px 24px 18px; border-bottom: none; }
.ev-stappen {
  max-width: 620px; margin: 0 auto;
  display: flex; align-items: center; justify-content: flex-start; gap: 0;
}
.ev-stap-node { flex: 0 0 auto; flex-direction: row; gap: 0; }
.ev-stap-node::before,
.ev-stap-node::after { display: none; }
.ev-stap-node-cirkel { display: none; }
.ev-stap-node-label {
  font-size: 0.8125rem; font-weight: 600; text-transform: none; letter-spacing: 0;
  color: var(--tekst-dim); padding: 0 14px 0 0; position: relative;
}
.ev-stap-node:not(:last-child) .ev-stap-node-label::after {
  content: '\203A'; position: absolute; right: 4px; color: var(--rand-sterk); font-weight: 400;
}
.ev-stap-node.voltooid .ev-stap-node-label { color: var(--tekst-licht); }
.ev-stap-node.actief .ev-stap-node-label { color: var(--tekst); font-weight: 800; }

/* Invoervelden: hoger en rustiger */
.ev-veld input, .ev-veld select, .ev-veld textarea {
  padding: 15px 16px; border-radius: 12px;
  border-color: color-mix(in srgb, var(--rand-sterk) 75%, transparent);
  font-size: 0.9375rem;
}
.ev-veld label { font-size: 0.875rem; font-weight: 600; color: var(--tekst); margin-bottom: 8px; }
.ev-veld .hint, .ev-kaart > .hint { color: var(--tekst-licht); font-size: 0.8125rem; }

/* Knoppen als pil */
.ev-btn, .ev-begin-btn, .ev-meterfoto-knop, .ev-schathulp-sluit {
  border-radius: 999px;
}
.ev-btn { padding: 14px 30px; font-size: 0.9375rem; }
.ev-acties { margin-top: 8px; }

/* Startscherm blijft een kaart, maar met dezelfde rustige velden */
.ev-begin-form { border-radius: 22px; }

/* ============================================================
   VOORTGANG — vier segmenten met een label eronder
   Je ziet in één oogopslag hoeveel stappen er zijn, welke af is
   en waar je nu bent. Geen bollen met verbindingslijnen: die
   vragen veel ruimte voor weinig informatie.
   ============================================================ */
.ev-voortgang { padding: 26px 24px 22px; border-bottom: none; }
.ev-stappen {
  max-width: 620px; margin: 0 auto;
  display: flex; align-items: stretch; gap: 10px;
}
.ev-stap-node {
  flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 9px;
  position: relative;
}
.ev-stap-node::before, .ev-stap-node::after { display: none; }
.ev-stap-node-cirkel { display: none; }

.ev-stap-balk {
  display: block; height: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--rand-sterk) 55%, transparent);
  overflow: hidden; position: relative;
  transition: background 0.4s;
}
.ev-stap-node.voltooid .ev-stap-balk { background: color-mix(in srgb, var(--hoofdkleur-tekst) 42%, transparent); }
.ev-stap-node.actief .ev-stap-balk { background: var(--os-gradient-diag); }
/* Een licht spoor dat over de actieve balk trekt */
.ev-stap-node.actief .ev-stap-balk::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
  transform: translateX(-100%);
  animation: ev-balkspoor 2.4s ease-in-out infinite;
}
@keyframes ev-balkspoor { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

.ev-stap-node-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; font-weight: 600; color: var(--tekst-dim);
  text-transform: none; letter-spacing: 0; white-space: nowrap;
  padding: 0; text-align: left; transition: color 0.3s;
}
.ev-stap-node-label::after { display: none; }
.ev-stap-cijfer, .ev-stap-vink {
  flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800;
  background: color-mix(in srgb, var(--rand-sterk) 40%, transparent);
  color: var(--tekst-dim);
  transition: background 0.3s, color 0.3s;
}
.ev-stap-vink svg { width: 11px; height: 11px; }
.ev-stap-node.voltooid .ev-stap-node-label { color: var(--tekst-licht); }
.ev-stap-node.voltooid .ev-stap-vink {
  background: color-mix(in srgb, var(--hoofdkleur-tekst) 12%, transparent);
  color: var(--hoofdkleur-tekst);
}
.ev-stap-node.actief .ev-stap-node-label { color: var(--tekst); font-weight: 800; }
.ev-stap-node.actief .ev-stap-cijfer { background: var(--hoofdkleur-tekst); color: #FFFFFF; }

@media (max-width: 600px) {
  /* Op een smal scherm past alleen de actieve stapnaam; de balken blijven */
  .ev-stap-node:not(.actief) .ev-stap-naam { display: none; }
  .ev-stap-node-label { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ev-stap-node.actief .ev-stap-balk::after { animation: none; display: none; }
}

/* ============================================================
   TWEE KOLOMMEN — context naast het formulier
   Links blijft staan wat we van dit adres weten, inclusief waar
   die gegevens vandaan komen. Dat haalt de onzekerheid weg of
   de klant wel de juiste aansluiting overzet.
   ============================================================ */
.ev-inhoud { max-width: 1060px; padding: 36px clamp(20px, 4vw, 32px) 80px; }

.ev-kolommen {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
.ev-zijpaneel { position: sticky; top: 24px; }
.ev-zijpaneel:empty { display: none; }
.ev-hoofdkolom { min-width: 0; }

.ev-zij-kaart {
  background: var(--wit);
  border: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 2px 4px rgba(16,24,40,0.03), 0 20px 44px -32px rgba(16,24,40,0.28);
}
.ev-zij-kop {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.75rem; font-weight: 800;
  color: var(--tekst-licht); margin-bottom: 14px;
}
.ev-zij-kop svg { width: 16px; height: 16px; color: var(--hoofdkleur-tekst); }

.ev-zij-adres { display: flex; flex-direction: column; gap: 3px; margin-bottom: 18px; }
.ev-zij-adres strong { font-size: 1rem; font-weight: 800; letter-spacing: -0.3px; line-height: 1.3; }
.ev-zij-adres span { font-size: 0.8125rem; color: var(--tekst-licht); }

.ev-zij-feiten { display: flex; flex-direction: column; gap: 0; margin: 0 0 16px; }
.ev-zij-feit {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--rand) 55%, transparent);
}
.ev-zij-feit dt { font-size: 0.8125rem; color: var(--tekst-licht); flex-shrink: 0; }
.ev-zij-feit dd {
  margin: 0; font-size: 0.8125rem; font-weight: 700; text-align: right;
  overflow-wrap: anywhere;
}
.ev-zij-feit dd.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.75rem; letter-spacing: 0.2px; }

/* Bronvermelding: zeggen wáár het vandaan komt, niet alleen wát het is */
.ev-zij-bron {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 12px 13px; border-radius: 12px;
  background: color-mix(in srgb, var(--hoofdkleur) 4%, var(--wit));
  border: 1px solid color-mix(in srgb, var(--hoofdkleur) 12%, transparent);
  font-size: 0.75rem; color: var(--tekst-licht); line-height: 1.5;
}
.ev-zij-bron svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--hoofdkleur-tekst); }
.ev-zij-bron strong { color: var(--tekst); font-weight: 700; }

html.dark .ev-zij-kaart { background: var(--wit); }

/* Voortgang als tabbalk boven de kolommen */
.ev-stappen {
  max-width: 1060px; padding: 0 clamp(20px, 4vw, 32px);
  gap: 4px; background: none;
}
.ev-stap-node {
  background: var(--wit);
  border: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
  border-radius: 999px;
  padding: 10px 16px;
  gap: 0;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.ev-stap-balk { display: none; }
.ev-stap-node-label { justify-content: center; font-size: 0.8125rem; }
.ev-stap-node.actief {
  border-color: color-mix(in srgb, var(--hoofdkleur-tekst) 45%, transparent);
  background: color-mix(in srgb, var(--hoofdkleur) 5%, var(--wit));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hoofdkleur) 9%, transparent);
}

@media (max-width: 900px) {
  .ev-kolommen { grid-template-columns: 1fr; gap: 24px; }
  .ev-zijpaneel { position: static; order: -1; }
  .ev-stap-node { padding: 9px 12px; }
}
@media (max-width: 600px) {
  .ev-stappen { flex-wrap: wrap; }
  .ev-stap-node { flex: 1 1 44%; }
}

/* ============================================================
   SCANSCHERM — tussen adres invullen en de vragen
   Laat zien wát er wordt opgezocht en waar het vandaan komt.
   ============================================================ */
.ev-scan {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--hero-vlak); position: relative; overflow: hidden;
  padding: 40px 24px;
}
.ev-scan::before {
  content: ''; position: absolute; inset: -25%;
  background:
    radial-gradient(30% 32% at 14% 12%, var(--hero-tint-2) 0%, transparent 62%),
    radial-gradient(28% 30% at 86% 10%, var(--hero-tint-1) 0%, transparent 60%);
  filter: blur(40px); opacity: 0.8;
  animation: ev-drift 34s ease-in-out infinite alternate;
}
.ev-scan-inner { position: relative; text-align: center; max-width: 560px; width: 100%; }

.ev-scan-logo { max-height: 40px; max-width: 200px; width: auto; margin: 0 auto 28px; display: block; object-fit: contain; }
.ev-scan-beeld { color: var(--hoofdkleur-tekst); margin-bottom: 30px; }
.ev-scan .ev-il { max-width: 420px; margin: 0 auto; }
/* De onderdelen komen na elkaar in beeld, alsof er iets wordt afgetast */
@keyframes ev-scan-op { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ev-scan h2 {
  font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 900; letter-spacing: -0.9px;
  color: var(--tekst); margin-bottom: 6px;
}
.ev-scan-adres { font-size: 0.9375rem; color: var(--tekst-licht); margin-bottom: 26px; }

.ev-scan-stappen { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.ev-scan-stap {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--wit); border: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
  font-size: 0.8125rem; font-weight: 700; color: var(--tekst-licht);
  animation: ev-scan-pil 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
.ev-scan-stap svg { width: 16px; height: 16px; }
@keyframes ev-scan-pil {
  from { opacity: 0; transform: translateY(8px); }
  60%  { opacity: 1; transform: none; border-color: var(--hoofdkleur-tekst); }
  to   { opacity: 1; transform: none;
         border-color: color-mix(in srgb, var(--hoofdkleur-tekst) 40%, transparent);
         color: var(--tekst); }
}

.ev-scan-bron { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ev-scan-bron-label {
  font-size: 0.75rem; font-weight: 700;
  color: var(--tekst-dim);
}
.ev-scan-bron-kaart {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 14px 22px; border-radius: 14px;
  background: var(--wit); border: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
  box-shadow: 0 2px 4px rgba(16,24,40,0.03), 0 16px 34px -26px rgba(16,24,40,0.28);
}
.ev-scan-bron-kaart strong { font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.2px; }
.ev-scan-bron-kaart span { font-size: 0.75rem; color: var(--tekst-licht); }

@media (prefers-reduced-motion: reduce) {
  .ev-scan::before, .ev-scan-stap, .ev-il-boog, .ev-banner { animation: none; }
}

/* Bronnen: welke registers zijn geraadpleegd en waarvoor */
.ev-zij-bronnen {
  padding: 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--hoofdkleur) 3.5%, var(--wit));
  border: 1px solid color-mix(in srgb, var(--hoofdkleur) 12%, transparent);
}
.ev-zij-bronnen-kop {
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  font-size: 0.75rem; font-weight: 800; color: var(--tekst-licht);

}
.ev-zij-bronnen-kop svg { width: 14px; height: 14px; color: var(--hoofdkleur-tekst); }
.ev-zij-bronnen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ev-zij-bronnen li { display: flex; flex-direction: column; gap: 1px; font-size: 0.75rem; line-height: 1.4; }
.ev-zij-bronnen li strong { font-size: 0.8125rem; font-weight: 700; color: var(--tekst); }
.ev-zij-bronnen li strong + span { color: var(--tekst-dim); font-weight: 500; }
.ev-zij-bronnen li em { font-style: normal; color: var(--tekst-licht); }

/* Energielabel als badge, in de kleur die er landelijk bij hoort */
.ev-label-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; padding: 3px 8px; border-radius: 6px;
  font-weight: 800; font-size: 0.8125rem; color: #fff; letter-spacing: 0.3px;
}
.ev-label-badge.label-a { background: #009037; }
.ev-label-badge.label-b { background: #55AB26; }
.ev-label-badge.label-c { background: #C8D200; }
.ev-label-badge.label-d { background: #FFED00; color: #1A1E30; }
.ev-label-badge.label-e { background: #FBBA00; color: #1A1E30; }
.ev-label-badge.label-f { background: #EB6909; }
.ev-label-badge.label-g { background: #E30613; }

.ev-bron-klein { font-size: 0.75rem; color: var(--tekst-dim); }

/* ============================================================
   WONINGPASPOORT
   Alles wat we uit de registers hebben opgehaald, als één geheel.
   Hiërarchie: adres → kerngetallen → aansluitingen → verbruik → bronnen.
   ============================================================ */
.ev-paspoort {
  background: var(--wit);
  border: 1px solid color-mix(in srgb, var(--rand) 65%, transparent);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(16,24,40,0.03), 0 24px 50px -34px rgba(16,24,40,0.32);
}

/* Kop met merktint: dit is geverifieerde informatie, geen invulveld */
.ev-pas-kop {
  padding: 20px 20px 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--hoofdkleur) 7%, var(--wit)), var(--wit));
  border-bottom: 1px solid color-mix(in srgb, var(--rand) 60%, transparent);
}
.ev-pas-kop-label {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px;
  padding: 4px 10px 4px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--succes) 12%, var(--wit));
  color: color-mix(in srgb, var(--succes) 80%, black);
  font-size: 0.75rem; font-weight: 800;
}
.ev-pas-kop-label svg { width: 12px; height: 12px; }
.ev-pas-kop h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.4px; line-height: 1.3; margin: 0; }
.ev-pas-kop p { font-size: 0.8125rem; color: var(--tekst-licht); margin: 3px 0 0; }

/* Kerngetallen als tegels */
.ev-pas-tegels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 82px), 1fr));
  gap: 1px; background: color-mix(in srgb, var(--rand) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--rand) 55%, transparent);
}
.ev-pas-tegel {
  background: var(--wit); padding: 14px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
}
.ev-pas-tegel-label {
  font-size: 0.75rem; font-weight: 700;
  color: var(--tekst-dim);
}
.ev-pas-tegel-waarde {
  font-size: 1.15rem; font-weight: 800; letter-spacing: -0.5px; line-height: 1;
  display: inline-flex; align-items: baseline; gap: 3px;
}
.ev-pas-tegel-waarde em { font-style: normal; font-size: 0.75rem; font-weight: 600; color: var(--tekst-licht); }
.ev-pas-tegel-hint { font-size: 0.75rem; color: var(--tekst-dim); }
.ev-pas-tegel .ev-label-badge { font-size: 0.9375rem; min-width: 30px; padding: 4px 10px; }

.ev-pas-sectie { padding: 16px 20px; border-bottom: 1px solid color-mix(in srgb, var(--rand) 55%, transparent); }
.ev-pas-sectie-kop {
  display: block; margin-bottom: 11px;
  font-size: 0.75rem; font-weight: 800;
  color: var(--tekst-dim);
}

/* Aansluitingen */
.ev-pas-aansluiting {
  display: flex; align-items: center; gap: 11px; padding: 9px 0;
}
.ev-pas-aansluiting + .ev-pas-aansluiting { border-top: 1px solid color-mix(in srgb, var(--rand) 45%, transparent); }
.ev-pas-ico {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.ev-pas-ico svg { width: 16px; height: 16px; }
.ev-pas-ico.stroom { background: color-mix(in srgb, var(--hoofdkleur) 10%, var(--wit)); color: var(--hoofdkleur-tekst); }
.ev-pas-ico.gas { background: color-mix(in srgb, var(--waarschuwing) 12%, var(--wit)); color: var(--waarschuwing); }
.ev-pas-aansluiting-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ev-pas-aansluiting-tekst strong { font-size: 0.8125rem; font-weight: 700; }
.ev-pas-aansluiting-tekst span { font-size: 0.75rem; color: var(--tekst-licht); overflow-wrap: anywhere; }
.ev-pas-aansluiting-tekst span.ean {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.75rem;
  letter-spacing: 0.2px; color: var(--tekst);
}
.ev-pas-aansluiting.leeg { opacity: 0.65; }
.ev-pas-vink {
  flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%;
  background: var(--succes); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ev-pas-vink svg { width: 11px; height: 11px; }
.ev-pas-netbeheerder {
  margin-top: 10px; padding-top: 10px; font-size: 0.75rem; color: var(--tekst-licht);
  border-top: 1px solid color-mix(in srgb, var(--rand) 45%, transparent);
}
.ev-pas-netbeheerder strong { color: var(--tekst); font-weight: 700; }

/* Verbruik */
.ev-pas-verbruik { display: flex; gap: 18px; flex-wrap: wrap; }
.ev-pas-verbruik-item { display: inline-flex; align-items: center; gap: 8px; }
.ev-pas-verbruik-item svg { width: 15px; height: 15px; color: var(--hoofdkleur-tekst); }
.ev-pas-verbruik-item:last-child svg { color: var(--waarschuwing); }
.ev-pas-verbruik-item span {
  font-size: 1rem; font-weight: 800; letter-spacing: -0.3px;
  display: inline-flex; align-items: baseline; gap: 3px;
}
.ev-pas-verbruik-item em { font-style: normal; font-size: 0.75rem; font-weight: 600; color: var(--tekst-licht); }

/* Bronnen als kleine keurmerken */
.ev-pas-bronnen { padding: 16px 20px 18px; background: color-mix(in srgb, var(--hoofdkleur) 3%, var(--wit)); }
.ev-pas-bronnen-kop {
  display: block; margin-bottom: 10px;
  font-size: 0.75rem; font-weight: 800;
  color: var(--tekst-dim);
}
/* Bronnen onder elkaar: het is een lijstje waar je langsloopt, geen wolk. */
.ev-pas-chips { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.ev-pas-chip { justify-content: flex-start; }
.ev-pas-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px 5px 7px; border-radius: 999px;
  background: var(--wit); border: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
  font-size: 0.75rem; line-height: 1;
}
.ev-pas-chip svg { width: 11px; height: 11px; color: var(--succes); }
.ev-pas-chip strong { font-weight: 700; }
.ev-pas-chip em { font-style: normal; color: var(--tekst-dim); }

/* Bevestigd adres: het staat al in het paspoort, dus hier alleen een regel */
.ev-adres-bevestigd {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--succes) 7%, var(--wit));
  border: 1px solid color-mix(in srgb, var(--succes) 24%, transparent);
}
.ev-adres-vink {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--succes); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ev-adres-vink svg { width: 13px; height: 13px; }
.ev-adres-tekst { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.ev-adres-tekst strong { font-size: 0.9375rem; font-weight: 700; }
.ev-adres-tekst span { font-size: 0.8125rem; color: var(--tekst-licht); }
.ev-adres-wijzig {
  flex-shrink: 0; background: var(--wit); cursor: pointer; font: inherit;
  font-size: 0.8125rem; font-weight: 700; color: var(--hoofdkleur-tekst);
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rand-sterk) 70%, transparent);
  transition: border-color 0.15s, transform 0.15s;
}
.ev-adres-wijzig:hover { border-color: var(--hoofdkleur-tekst); }
.ev-adres-wijzig:active { transform: scale(0.98); }

/* ============================================================
   SITUATIE ALS ÉÉN GEHEEL
   Paspoort en formulier zaten als twee losse kaarten naast elkaar.
   Ze horen bij elkaar — het paspoort gaat over hetzelfde adres als
   waar de vragen over gaan — dus ze staan nu in één kaart met een
   scheidslijn ertussen.
   ============================================================ */
.ev-kolommen {
  background: var(--wit);
  border: 1px solid color-mix(in srgb, var(--rand) 55%, transparent);
  border-radius: 26px;
  /* 'clip' in plaats van 'hidden': hidden maakt een scrollcontainer en
     daarmee werkt position:sticky in de linkerkolom niet meer. */
  overflow: clip;
  box-shadow: 0 2px 4px rgba(16,24,40,0.03), 0 30px 64px -36px rgba(16,24,40,0.32);
  gap: 0;
  align-items: stretch;
}
.ev-zijpaneel {
  position: static;
  background: color-mix(in srgb, var(--hoofdkleur) 3.5%, var(--wit));
  border-right: 1px solid color-mix(in srgb, var(--rand) 55%, transparent);
}
.ev-hoofdkolom { padding: 30px 32px 34px; }

/* Het paspoort verliest zijn eigen kaartvorm; het ís nu de kolom */
.ev-paspoort {
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  position: sticky; top: 16px;
}
.ev-pas-kop { background: transparent; padding: 0 20px 16px; }
.ev-pas-tegels { background: color-mix(in srgb, var(--rand) 40%, transparent); }
.ev-pas-tegel { background: color-mix(in srgb, var(--hoofdkleur) 3.5%, var(--wit)); }
.ev-pas-bronnen { background: transparent; }

/* ============================================================
   PASPOORT — compact, met een foto als anker
   ============================================================
   Het paneel is voor de klant, niet voor ons. Alleen het adres, het label,
   het verbruik en de aansluitingen; bouwjaar, oppervlakte, netbeheerder en
   de buurtvergelijking waren onze onderbouwing, niet zijn beslissing. */

.ev-pas-foto {
  height: 132px;
  background-size: cover;
  background-position: center 88%;
  background-repeat: no-repeat;
  background-color: var(--oppervlak);
  border-bottom: 1px solid var(--rand);
}
.ev-pas-foto.particulier { background-image: url('../img/banner-particulier.jpg'); }
.ev-pas-foto.zakelijk { background-image: url('../img/banner-zakelijk.jpg'); }
html.dark .ev-pas-foto { filter: brightness(0.7) saturate(0.9); }
/* Luchtfoto op dezelfde plek: zelfde hoogte en dezelfde scheidslijn. */
.ev-pas-luchtfoto { border-bottom: 1px solid var(--rand); }
html.dark .ev-pas-luchtfoto { filter: brightness(0.7) saturate(0.9); }

/* Feitenregels: label links, waarde rechts, één haarlijn ertussen */
.ev-pas-feiten {
  padding: 0 20px;
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
}
.ev-pas-feit {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 0;
  font-size: 0.8125rem; color: var(--tekst-licht);
}
.ev-pas-feit + .ev-pas-feit { border-top: 1px solid color-mix(in srgb, var(--rand) 60%, transparent); }
.ev-pas-feit-waarde {
  font-size: 0.875rem; font-weight: 600; color: var(--tekst);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.ev-pas-feit > span:first-child { display: flex; align-items: baseline; gap: 5px; }
.ev-pas-feit > span:first-child em {
  font-style: normal; font-size: 0.75rem; color: var(--tekst-dim);
}
.ev-pas-feit-waarde em { font-style: normal; font-size: 0.75rem; color: var(--tekst-dim); margin-left: 2px; }

/* Bronnen als één regel in plaats van een lijst met vinkjes */
.ev-pas-bronnen-tekst {
  margin-top: 4px;
  font-size: 0.75rem; line-height: 1.5; color: var(--tekst-licht);
}

/* De koptekst van de stap hoort bij het formulier, niet erboven te zweven */
.ev-hoofdkolom .ev-stap-intro { margin-bottom: 26px; }

@media (max-width: 900px) {
  .ev-kolommen { grid-template-columns: 1fr; border-radius: 22px; }
  .ev-zijpaneel { border-right: none; border-bottom: 1px solid color-mix(in srgb, var(--rand) 55%, transparent); }
  .ev-paspoort { position: static; }
  .ev-hoofdkolom { padding: 24px 22px 28px; }
}

/* ============================================================
   RECHTERKOLOM — één familie van blokken
   De secties hadden elk hun eigen vormtaal: kaarten, gestippelde
   panelen, groene balken. Nu delen ze radius, randgewicht en
   binnenruimte, met een genummerde markering en haarlijnen die
   het ritme aangeven.
   ============================================================ */
.ev-hoofdkolom .ev-kaart {
  padding: 26px 0;
  border-top: 1px solid color-mix(in srgb, var(--rand) 50%, transparent);
  margin-bottom: 0;
  position: relative;
}
.ev-hoofdkolom .ev-kaart:first-of-type { border-top: none; padding-top: 6px; }
.ev-hoofdkolom .ev-kaart:last-of-type { padding-bottom: 12px; }

/* Sectiekop met genummerde markering: je ziet waar je bent binnen de stap */
.ev-hoofdkolom .ev-kaart-titel {
  font-size: 1.02rem; margin-bottom: 16px; gap: 11px; align-items: center;
}
.ev-hoofdkolom .ev-stap-nr {
  display: inline-flex; width: 24px; height: 24px; border-radius: 8px;
  background: color-mix(in srgb, var(--hoofdkleur) 9%, var(--wit));
  color: var(--hoofdkleur-tekst);
  border: 1px solid color-mix(in srgb, var(--hoofdkleur) 16%, transparent);
  font-size: 0.75rem; font-weight: 800;
}

/* Keuzekaarten compacter: minder hoogte, dezelfde duidelijkheid */
.ev-hoofdkolom .ev-keuze-btn { padding: 16px 14px; border-radius: 14px; }
.ev-hoofdkolom .ev-keuze-btn .icoon { width: 40px; height: 40px; margin-bottom: 9px; border-radius: 11px; }
.ev-hoofdkolom .ev-keuze-btn .icoon svg { width: 19px; height: 19px; }
.ev-hoofdkolom .ev-keuze-btn .label { font-size: 0.875rem; }
.ev-hoofdkolom .ev-keuze-btn .sublabel { font-size: 0.75rem; }

/* Eén randgewicht en één radius voor alles wat een blok is */
.ev-hoofdkolom .ev-ean-optie,
.ev-hoofdkolom .ev-meter-blok,
.ev-hoofdkolom .ev-adres-bevestigd,
.ev-hoofdkolom .ev-vinkrij,
.ev-hoofdkolom .ev-opwek-optie { border-radius: 14px; }
.ev-hoofdkolom .ev-meter-blok { border-style: solid; }

/* Actiebalk blijft in beeld: bij een lang formulier hoef je niet te zoeken */
.ev-hoofdkolom .ev-acties {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 8px -32px -34px; padding: 16px 32px;
  background: color-mix(in srgb, var(--oppervlak) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid color-mix(in srgb, var(--rand) 60%, transparent);
}

@media (max-width: 900px) {
  .ev-hoofdkolom .ev-acties { margin: 8px -22px -28px; padding: 14px 22px; }
}

/* Luchtfoto van het pand, opgebouwd uit tegels van het Kadaster */
.ev-luchtfoto {
  position: relative; overflow: hidden; width: 100%;
  background: var(--oppervlak2);
  border-bottom: 1px solid color-mix(in srgb, var(--rand) 55%, transparent);
}
.ev-luchtfoto img { position: absolute; width: 256px; height: 256px; display: block; }
/* Markering op het adres zelf */
.ev-luchtfoto-punt {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--wit); border: 3px solid var(--hoofdkleur-tekst);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hoofdkleur) 25%, transparent), 0 2px 8px rgba(0,0,0,0.4);
}
.ev-luchtfoto-punt::after {
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--hoofdkleur-tekst) 55%, transparent);
  animation: ev-punt-puls 2.6s ease-out infinite;
}
@keyframes ev-punt-puls {
  0% { transform: scale(0.6); opacity: 0.9; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}
.ev-luchtfoto-bron {
  position: absolute; right: 8px; bottom: 7px; z-index: 2;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(0,0,0,0.45); color: #fff;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2px;
}
@media (prefers-reduced-motion: reduce) { .ev-luchtfoto-punt::after { animation: none; } }

/* ============================================================
   KEUZEKAARTEN — links uitgelijnd met een aanvinkvakje
   Gecentreerde kaarten lezen traag: je oog springt heen en weer.
   Links uitlijnen geeft één leeslijn, en een vakje rechtsboven laat
   zien dat het een keuze is in plaats van een knop.
   ============================================================ */
.ev-hoofdkolom .ev-keuze-groep { gap: 12px; }

.ev-hoofdkolom .ev-keuze-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; padding: 18px 44px 18px 18px;
  border-radius: 16px; min-height: 100%;
}
.ev-hoofdkolom .ev-keuze-btn .icoon {
  width: 42px; height: 42px; margin: 0 0 12px; border-radius: 13px;
  background: color-mix(in srgb, var(--hoofdkleur) 9%, var(--oppervlak2));
  color: var(--hoofdkleur-tekst);
}
.ev-hoofdkolom .ev-keuze-btn .label { font-size: 0.9375rem; letter-spacing: -0.25px; }
.ev-hoofdkolom .ev-keuze-btn .sublabel { font-size: 0.75rem; margin-top: 4px; line-height: 1.4; }

/* Icoontegel in de kleur van het onderwerp */
.ev-hoofdkolom #ev-producttype [data-waarde="g"] .icoon {
  background: color-mix(in srgb, var(--waarschuwing) 13%, var(--wit));
  color: var(--waarschuwing);
}
.ev-hoofdkolom #ev-producttype [data-waarde="eg"] .icoon svg:last-child { color: var(--waarschuwing); }

/* Aanvinkvakje in plaats van een rond badgetje */
.ev-hoofdkolom .ev-keuze-btn::after {
  content: ''; position: absolute; top: 16px; right: 16px;
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--wit);
  border: 1.5px solid var(--rand-sterk);
  box-shadow: none; opacity: 1; transform: none; animation: none;
  transition: background 0.18s, border-color 0.18s;
}
.ev-hoofdkolom .ev-keuze-btn.geselecteerd::after {
  background: var(--hoofdkleur-tekst);
  border-color: var(--hoofdkleur-tekst);
  /* vinkje als achtergrondbeeld, zodat het vakje één element blijft */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");
  background-size: 13px 13px; background-position: center; background-repeat: no-repeat;
  animation: ev-vink 0.26s var(--ease-uit, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

/* Rustiger geselecteerde staat: tint en rand, geen zware schaduw */
.ev-hoofdkolom .ev-keuze-btn.geselecteerd {
  border-color: color-mix(in srgb, var(--hoofdkleur-tekst) 55%, transparent);
  background: color-mix(in srgb, var(--hoofdkleur) 4.5%, var(--wit));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hoofdkleur) 8%, transparent);
}
.ev-hoofdkolom .ev-keuze-btn.geselecteerd::before { opacity: 0; }
.ev-hoofdkolom .ev-keuze-btn:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--hoofdkleur) 35%, var(--rand));
  box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--hoofdkleur) 60%, transparent);
}

/* ============================================================
   ÉÉN KOLOM — de flow van een energieleverancier
   ============================================================
   Het datapaneel naast het formulier gaf de klant huiswerk: EAN-codes,
   netbeheerder, bouwjaar en bronnen terwijl hij alleen wil overstappen.
   Alles staat nu onder elkaar in één smalle kolom, en de technische
   onderbouwing zit in een uitklap onderaan voor wie het wil zien.
   ============================================================ */

.ev-inhoud { max-width: 1000px; padding-top: 32px; }

/* Een vraag: label boven, opties eronder. Niet naast elkaar geknepen. */
.ev-vraag { padding: 4px 0 22px; }
.ev-vraag + .ev-vraag {
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--rand) 55%, transparent);
}
.ev-vraag-label {
  display: block; margin-bottom: 12px;
  font-size: 0.9375rem; font-weight: 600; color: var(--tekst);
}

/* Keuzeopties als volwaardige kaarten met een echt raakvlak */
.ev-opties { display: grid; gap: 10px; }
.ev-opties.tweekolom { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.ev-opties.driekolom { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.ev-optie {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  /* rechts ruimte houden voor het vinkje, anders loopt de tekst eronder */
  padding: 13px 28px 13px 13px;
  border: 1.5px solid var(--rand); border-radius: 12px;
  background: var(--wit); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.ev-optie:hover { border-color: var(--tekst-dim); }
.ev-optie-ico {
  display: inline-flex; align-items: center; gap: 1px;
  color: var(--tekst-licht); flex-shrink: 0;
}
.ev-optie-ico svg { width: 19px; height: 19px; }
.ev-optie-ico.duo svg { width: 15px; height: 15px; }
.ev-optie-naam { font-size: 0.875rem; font-weight: 600; color: var(--tekst); line-height: 1.25; }
.ev-optie-ico { min-width: 19px; }
/* Drie naast elkaar in een smalle kolom: icoon boven het label, anders
   knijpt de tekst en breekt 'Stroom & gas' over twee regels. */
.ev-opties.driekolom .ev-optie {
  flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 13px 13px 14px;
}
.ev-opties.driekolom .ev-optie-ico svg { width: 18px; height: 18px; }
.ev-optie-vink {
  display: none; position: absolute; top: 8px; right: 8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--hoofdkleur-tekst); color: #fff;
  align-items: center; justify-content: center;
}
.ev-optie-vink svg { width: 10px; height: 10px; }
.ev-optie.geselecteerd {
  border-color: var(--hoofdkleur-tekst);
  background: color-mix(in srgb, var(--hoofdkleur) 4%, var(--wit));
}
.ev-optie.geselecteerd .ev-optie-ico { color: var(--hoofdkleur-tekst); }
.ev-optie.geselecteerd .ev-optie-vink { display: inline-flex; }

/* ============================================================
   BLOKKEN — één opbouw voor elke vraag
   ============================================================
   De stap was een reeks losse onderdelen met elk hun eigen kop en
   afstand. Nu heeft elke vraag dezelfde anatomie: een nummer, een kop,
   eventueel één regel uitleg, en daaronder de bediening. Het nummer geeft
   de klant een leeslijn: vier vragen, dan het aanbod.
   ============================================================ */

/* De blokken zijn wit; de kolom eronder is net iets grijzer. Daardoor
   lezen ze als losse kaarten in plaats van als wit-op-wit met een randje. */
.ev-hoofdkolom { background: var(--oppervlak); }

.ev-blok {
  padding: 20px;
  margin-bottom: 12px;
  border: 1px solid var(--rand);
  border-radius: 14px;
  background: var(--wit);
}
.ev-blok:last-of-type { margin-bottom: 18px; }

/* Het adres is een bevestiging, geen vraag: geen eigen omlijsting */
.ev-blok-adres { padding: 0; border: none; background: transparent; }

.ev-blok-kop {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 16px;
}
.ev-blok-nr {
  flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--hoofdkleur) 9%, transparent);
  color: var(--hoofdkleur-tekst);
  font-size: 0.75rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ev-blok-kop h3 {
  font-size: 0.9375rem; font-weight: 700; color: var(--tekst);
  letter-spacing: -0.2px; line-height: 1.3;
}
.ev-blok-kop p {
  margin-top: 3px;
  font-size: 0.8125rem; color: var(--tekst-licht); line-height: 1.45;
}

/* Het aanbod deelt de vormtaal van de blokken, maar mag zwaarder wegen:
   dit is het scherm waarop iemand ja zegt. */
.ev-hoofdkolom .ev-aanbod-hero {
  border-radius: 16px;
  border: 1px solid var(--rand);
  box-shadow: 0 1px 2px rgba(26,30,48,0.04), 0 16px 34px -26px rgba(26,30,48,0.30);
  margin-bottom: 12px;
}
.ev-hoofdkolom .ev-aanbod-hero-top { padding: 20px 24px 18px; }
.ev-hoofdkolom .ev-aanbod-hero-body { padding: 22px 24px 24px; }
.ev-hoofdkolom .ev-aanbod-maand-bedrag { letter-spacing: -2px; }
/* De splitsing stroom/gas als twee afleesbare regels met een haarlijn */
.ev-hoofdkolom .ev-aanbod-split {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
}
.ev-hoofdkolom .ev-aanbod-split-rij { padding: 7px 0; font-size: 0.875rem; }
.ev-hoofdkolom .ev-aanbod-split-rij .bedrag { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Verbruikbalk en USP's onder het aanbod: zelfde kaartvorm als de rest */
.ev-hoofdkolom .ev-verbruik-balk,
.ev-hoofdkolom .ev-usp-lijst {
  border: 1px solid var(--rand); border-radius: 14px; background: var(--wit);
  margin-bottom: 12px;
}
.ev-hoofdkolom .ev-usp-lijst { padding: 16px 20px; }
.ev-hoofdkolom .ev-verbruik-balk { padding: 13px 20px; }

/* Icoonvariant van de blokkop, voor secties zonder vaste volgorde */
.ev-blok-ico {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--hoofdkleur) 8%, transparent);
  color: var(--hoofdkleur-tekst);
}
.ev-blok-ico svg { width: 15px; height: 15px; }

/* De controlekaarten in de laatste stap volgen dezelfde vormtaal */
.ev-hoofdkolom .ev-controle-kaart {
  padding: 18px 20px;
  margin-bottom: 12px;
  border: 1px solid var(--rand);
  border-radius: 14px;
  background: var(--wit);
  box-shadow: none;
}
.ev-hoofdkolom .ev-controle-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
  font-size: 0.9375rem; font-weight: 700; color: var(--tekst);
  text-transform: none; letter-spacing: -0.2px;
}
.ev-hoofdkolom .ev-controle-kop > span { display: inline-flex; align-items: center; gap: 9px; }
.ev-hoofdkolom .ev-controle-kop svg { width: 15px; height: 15px; color: var(--tekst-licht); }
.ev-hoofdkolom .ev-controle-wijzig {
  font-size: 0.8125rem; font-weight: 600; color: var(--hoofdkleur-tekst);
  text-decoration: none; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--hoofdkleur) 7%, transparent);
}
.ev-hoofdkolom .ev-controle-wijzig:hover { background: color-mix(in srgb, var(--hoofdkleur) 13%, transparent); }

/* Ook de overgebleven kaarten in stap 3 delen de vormtaal */
.ev-hoofdkolom .ev-kaart {
  padding: 20px;
  margin-bottom: 12px;
  border: 1px solid var(--rand);
  border-top: 1px solid var(--rand);
  border-radius: 14px;
  background: var(--wit);
}
.ev-hoofdkolom .ev-kaart:first-of-type { padding-top: 20px; }

/* Binnen een blok hoeven onderdelen geen eigen marge meer te verzinnen */
.ev-blok .ev-opties { margin: 0; }
.ev-blok .ev-rij { margin-bottom: 0; }
.ev-blok .ev-rij + .ev-verbruik-voet { margin-top: 12px; }
.ev-blok .ev-chips { margin: 0; }

/* ============================================================
   FORMULIER — strakkere velden
   ============================================================
   Invoervelden zijn het werk van de klant; die mogen er precies uitzien.
   Vaste hoogte, één randgewicht, een duidelijke focusring in de merkkleur
   en labels die boven het veld staan in plaats van ernaast te zweven. */

.ev-hoofdkolom .ev-veld > label {
  display: block; margin-bottom: 6px;
  font-size: 0.8125rem; font-weight: 600; color: var(--tekst);
  text-transform: none; letter-spacing: 0;
}
.ev-hoofdkolom input[type="text"],
.ev-hoofdkolom input[type="email"],
.ev-hoofdkolom input[type="tel"],
.ev-hoofdkolom input[type="date"],
.ev-hoofdkolom input[type="number"],
.ev-hoofdkolom select,
.ev-hoofdkolom textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  border: 1px solid var(--rand-sterk);
  border-radius: 10px;
  background: var(--wit);
  font-family: inherit; font-size: 0.875rem; color: var(--tekst);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ev-hoofdkolom textarea { min-height: 0; line-height: 1.5; }
.ev-hoofdkolom input:hover, .ev-hoofdkolom select:hover { border-color: var(--tekst-dim); }
.ev-hoofdkolom input:focus, .ev-hoofdkolom select:focus, .ev-hoofdkolom textarea:focus {
  outline: none;
  border-color: var(--hoofdkleur-tekst);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hoofdkleur) 14%, transparent);
}
.ev-hoofdkolom input::placeholder, .ev-hoofdkolom textarea::placeholder { color: var(--tekst-dim); }
.ev-hoofdkolom .verplicht { color: var(--fout); font-weight: 600; }

/* Invoerveld met icoon vooraan en eenheid achteraan. Het icoon vertelt
   meteen of je in het stroom- of het gasveld staat; de eenheid staat in
   het veld in plaats van er los naast. */
.ev-invoer {
  position: relative;
  display: flex; align-items: center;
  border: 1px solid var(--rand-sterk); border-radius: 10px;
  background: var(--wit);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ev-invoer:hover { border-color: var(--tekst-dim); }
.ev-invoer:focus-within {
  border-color: var(--hoofdkleur-tekst);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hoofdkleur) 14%, transparent);
}
.ev-invoer input {
  flex: 1; min-width: 0;
  border: none !important; background: transparent !important;
  box-shadow: none !important; outline: none !important;
  padding: 0 4px 0 0 !important; min-height: 0 !important;
  font-size: 1rem; font-weight: 600; color: var(--tekst);
  font-variant-numeric: tabular-nums;
}
.ev-invoer-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin: 0 10px 0 9px; flex-shrink: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--hoofdkleur) 7%, transparent);
  color: var(--hoofdkleur-tekst);
}
.ev-invoer-ico.gas {
  background: color-mix(in srgb, var(--waarschuwing) 12%, transparent);
  color: var(--waarschuwing);
}
.ev-invoer-ico svg { width: 16px; height: 16px; }
.ev-invoer-eenheid {
  flex-shrink: 0; padding: 0 13px 0 8px;
  font-size: 0.8125rem; font-weight: 500; color: var(--tekst-licht);
}
/* De rij met verbruikvelden mag ruimer: het zijn er maar twee */
.ev-hoofdkolom .ev-veld > label { margin-bottom: 7px; }
.ev-invoer { min-height: 50px; }

/* ============================================================
   VORMGEVING — tweede ronde
   ============================================================
   Het beeld leunde op alles wat een gegenereerde interface verraadt:
   pastelvlekken op de achtergrond, alles even rond, overal een merktint,
   en tekst die op elk niveau even groot en even grijs is. Deze ronde haalt
   dat eruit en zet er hiërarchie voor terug: papier in plaats van verloop,
   strakkere hoeken, één schaduwniveau, kleur alleen waar hij iets betekent,
   en een typografische ladder die je van ver kunt lezen.
   ============================================================ */

/* 1. Papier in plaats van pastelvlekken.
   De vlekken waren het duidelijkste 'AI-vlak'. Wat blijft is een rustige
   papierkleur met één smalle merkregel bovenaan als accent. */
/* De achtergrond mag terug, maar dan als één rustige wassing in plaats van
   losse pastelvlekken: merkkleur bovenaan die naar papier zakt, plus een
   zweem in de onderhoek zodat het vlak niet dood is. */
.ev-wrapper { background: var(--papier); }
.ev-wrapper::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--hoofdkleur) 12%, transparent) 0%,
      color-mix(in srgb, var(--hoofdkleur) 4%, transparent) 26%,
      transparent 52%),
    radial-gradient(64% 48% at 92% 94%, color-mix(in srgb, var(--steunkleur) 18%, transparent) 0%, transparent 70%),
    radial-gradient(54% 44% at 2% 86%, color-mix(in srgb, var(--hoofdkleur) 12%, transparent) 0%, transparent 72%);
  animation: none;
}

/* 2. Typografische ladder */
.ev-hoofdkolom .ev-kaart-titel {
  font-size: 1.06rem; font-weight: 700; letter-spacing: -0.35px;
  color: var(--tekst); margin-bottom: 18px;
}
.ev-stap-intro h2 { letter-spacing: -1.1px; }
.ev-simulatie-titel,
.ev-opwek-detail-kop,
.ev-pas-sectie-kop,
.ev-pas-bronnen-kop,
.ev-benaderen-kop,
.ev-pas-tegel-label {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.09em; color: var(--tekst-dim);
}
.ev-segment-label { font-size: 0.8125rem; font-weight: 600; color: var(--tekst); }
/* Cijfers uitlijnen: bedragen en verbruiken zijn tabellen, geen proza. */
.ev-pas-tegel-waarde, .ev-pas-verbruik-item, .ev-spec-bedrag,
.ev-spec-eind-rij, .ev-aanbod-maand-bedrag, .ev-gekozen-prijs {
  font-variant-numeric: tabular-nums;
}

/* 3. Strakkere hoeken en één schaduwniveau */
.ev-kolommen {
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(26,30,48,0.04), 0 18px 40px -30px rgba(26,30,48,0.28);
}
.ev-kaart, .ev-spec-blok, .ev-opwek-detail, .ev-meer,
.ev-adres-bevestigd, .ev-adres-regel, .ev-spec-eind, .ev-bron-notitie {
  border-radius: 12px;
}
.ev-chip, .ev-keuze-groep.ev-segment, .ev-keuze-groep.ev-segment .ev-keuze-btn { border-radius: 999px; }
.ev-benaderen-item { border-radius: 10px; }

/* 4. Kleurdiscipline: neutrale vlakken, merkkleur alleen waar hij iets zegt */
.ev-benaderen-item,
.ev-meer-aansluiting,
.ev-opwek-detail {
  background: var(--oppervlak);
  border-color: var(--rand);
}
.ev-spec-kop { background: var(--oppervlak); }
.ev-pas-tegel { background: var(--wit); }
.ev-keuze-groep.ev-segment { background: var(--oppervlak); }
.ev-stap-intro-icoon {
  background: var(--oppervlak);
  color: var(--tekst);
  border: 1px solid var(--rand);
  box-shadow: none;
  border-radius: 12px;
}
.ev-chip.aan {
  box-shadow: none;
  border-color: var(--hoofdkleur-tekst);
  background: var(--wit);
}
.ev-keuze-groep.ev-segment .ev-keuze-btn.geselecteerd {
  box-shadow: 0 1px 2px rgba(26,30,48,0.10);
  border: none;
}

/* 5. Het paspoort als datablad: labels links, waarden rechts, haarlijnen */
.ev-pas-tegels {
  display: block; background: transparent; padding: 0 20px;
  border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
}
.ev-pas-tegel {
  display: flex; flex-direction: row; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 9px 0; background: transparent; border: none; border-radius: 0;
  text-align: left;
}
.ev-pas-tegel + .ev-pas-tegel { border-top: 1px solid color-mix(in srgb, var(--rand) 60%, transparent); }
.ev-pas-tegel-waarde { font-size: 0.9375rem; font-weight: 600; color: var(--tekst); }
.ev-pas-tegel-waarde em { font-size: 0.75rem; font-weight: 500; color: var(--tekst-dim); font-style: normal; margin-left: 2px; }

/* ============================================================
   LICHTRAND OM DE HELE KAART
   ============================================================ */
/* Het licht liep eerder om losse blokjes; om de hele kaart is het rustiger
   en geeft het de module als geheel een rand die leeft. Traag, want een
   groot vlak: 11 seconden per ronde leest als ademen, niet als knipperen. */
.ev-kolommen { position: relative; }
.ev-kolommen::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--ev-hoek),
    color-mix(in srgb, var(--rand) 70%, transparent) 0deg,
    color-mix(in srgb, var(--rand) 70%, transparent) 28deg,
    color-mix(in srgb, var(--hoofdkleur) 45%, transparent) 62deg,
    var(--hoofdkleur) 100deg,
    var(--steunkleur) 130deg,
    var(--accent) 152deg,
    color-mix(in srgb, var(--hoofdkleur) 45%, transparent) 190deg,
    color-mix(in srgb, var(--rand) 70%, transparent) 224deg,
    color-mix(in srgb, var(--rand) 70%, transparent) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: ev-rondloop 9s linear infinite;
  pointer-events: none;
  z-index: 3;
}

/* ============================================================
   AANSCHERPING VORMGEVING
   ============================================================ */

/* Meer lucht tussen de blokken: het adres plakte tegen de eerste vraag */
.ev-adres-bevestigd { margin: 2px 0 22px; }
.ev-segment-regel { padding: 10px 0 18px; }
.ev-segment-regel + .ev-segment-regel { padding-top: 18px; }
.ev-hoofdkolom .ev-kaart { padding: 24px 0; }

/* Het icoon bij de stapkop: merkverloop in plaats van een grijs vlak */
.ev-stap-intro-icoon {
  background: var(--os-gradient-diag);
  color: var(--op-gradient);
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--hoofdkleur) 80%, transparent);
}
.ev-stap-intro-icoon svg { width: 22px; height: 22px; }

/* Sectiekoppen in de merkkleur: rustiger onderscheid dan zwart-op-wit */
.ev-hoofdkolom .ev-kaart-titel { color: var(--hoofdkleur-tekst); letter-spacing: -0.4px; }

/* Chips: aan-stand krijgt een zachte gloed in plaats van alleen een rand */
.ev-chip.aan {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hoofdkleur) 7%, transparent),
              0 10px 22px -16px color-mix(in srgb, var(--hoofdkleur) 80%, transparent);
}
.ev-chip { transition: border-color 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s; }
.ev-chip:active { transform: scale(0.98); }

/* Segmented control: de actieve pil mag duidelijker uit de rail komen */
.ev-keuze-groep.ev-segment .ev-keuze-btn.geselecteerd {
  box-shadow: 0 1px 2px rgba(16,24,40,0.10), 0 6px 16px -12px color-mix(in srgb, var(--hoofdkleur) 90%, transparent),
              0 0 0 1px color-mix(in srgb, var(--hoofdkleur) 20%, transparent);
}

/* ============================================================
   COMPACTE ONDERDELEN — zo min mogelijk schermruimte per vraag
   ============================================================ */

/* Label links, keuze rechts: scheelt een hele regel per vraag */
.ev-segment-regel {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 4px 0 14px;
}
.ev-segment-regel + .ev-segment-regel { padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--rand) 60%, transparent); }
.ev-segment-label {
  font-size: 0.8125rem; font-weight: 600; color: var(--tekst);
  display: inline-flex; align-items: center; gap: 6px;
}

/* Keuzeknoppen als segmented control in plaats van grote kaarten */
.ev-keuze-groep.ev-segment {
  display: inline-flex; gap: 4px; margin: 0; flex-wrap: wrap;
  padding: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--rand) 45%, transparent);
}
.ev-keuze-groep.ev-segment .ev-keuze-btn {
  min-width: 0; flex: 0 0 auto;
  display: inline-flex; flex-direction: row; align-items: center; gap: 7px;
  padding: 7px 14px; border: none; background: transparent;
  border-radius: 999px; box-shadow: none;
  font-size: 0.8125rem; text-align: left;
}
.ev-keuze-groep.ev-segment .ev-keuze-btn::after { display: none; }
.ev-keuze-groep.ev-segment .ev-keuze-btn .icoon { margin: 0; font-size: 0.9375rem; display: inline-flex; gap: 2px; }
.ev-keuze-groep.ev-segment .ev-keuze-btn .icoon svg { width: 15px; height: 15px; }
.ev-keuze-groep.ev-segment .ev-keuze-btn .label { font-size: 0.8125rem; font-weight: 600; }
.ev-keuze-groep.ev-segment .ev-keuze-btn.geselecteerd {
  background: var(--wit); color: var(--hoofdkleur-tekst);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 0 0 1px color-mix(in srgb, var(--hoofdkleur) 18%, transparent);
}

/* De keuzekaarten voor de batterij-aansturing hebben een vinkvakje
   rechtsboven; zonder ruimte loopt de omschrijving eronderdoor. */
#ev-batterij-type .ev-keuze-btn { padding-right: 46px !important; }

/* Bezit-vragen als chips: drie vragen op één regel */
.ev-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.ev-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rand); background: var(--wit);
  font-size: 0.8125rem; font-weight: 600; color: var(--tekst);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ev-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.ev-chip:hover { border-color: color-mix(in srgb, var(--hoofdkleur) 35%, transparent); }
.ev-chip-ico { display: inline-flex; color: var(--tekst-licht); }
.ev-chip-ico svg { width: 17px; height: 17px; }
.ev-chip-vink {
  display: none; width: 17px; height: 17px; border-radius: 50%;
  background: var(--succes); color: #fff;
  align-items: center; justify-content: center;
}
.ev-chip-vink svg { width: 10px; height: 10px; }
.ev-chip.aan {
  border-color: color-mix(in srgb, var(--hoofdkleur) 45%, transparent);
  background: color-mix(in srgb, var(--hoofdkleur) 6%, var(--wit));
  color: var(--hoofdkleur-tekst);
}
.ev-chip.aan .ev-chip-ico { color: var(--hoofdkleur-tekst); }
.ev-chip.aan .ev-chip-vink { display: inline-flex; }

/* Benaderen-vraag: één blok met korte schakelaars in plaats van drie panelen */
.ev-benaderen-blok {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--rand) 60%, transparent);
}
.ev-benaderen-kop { display: block; font-size: 0.75rem; color: var(--tekst-licht); margin-bottom: 9px; }
/* Alle onderwerpen naast elkaar op één rij; smaller scherm laat ze zakken
   zonder dat de tegels in elkaar knijpen. */
.ev-benaderen-lijst {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr));
  gap: 8px;
}
/* Het schuifje onder het label: op vier kolommen naast elkaar is er geen
   ruimte voor allebei op één regel zonder de tekst af te kappen. */
.ev-benaderen-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 10px 11px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
  background: color-mix(in srgb, var(--hoofdkleur) 2.5%, var(--wit));
  font-size: 0.8125rem; color: var(--tekst); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ev-benaderen-item:hover { border-color: color-mix(in srgb, var(--hoofdkleur) 30%, transparent); }
.ev-benaderen-ico { display: inline-flex; color: var(--tekst-licht); }
.ev-benaderen-ico svg { width: 15px; height: 15px; }
.ev-benaderen-naam { line-height: 1.25; }
.ev-benaderen-kop-rij { display: flex; align-items: center; gap: 6px; }
.ev-benaderen-item .ev-toggle { flex-shrink: 0; }

/* Alles wat al goed staat, achter één regel */
.ev-meer {
  margin-bottom: 18px;
  border: 1px solid var(--rand); border-radius: 16px;
  background: color-mix(in srgb, var(--wit) 70%, transparent);
}
.ev-meer > summary {
  list-style: none; cursor: pointer;
  padding: 13px 18px;
  font-size: 0.8125rem; font-weight: 600; color: var(--tekst-licht);
  display: flex; align-items: center; gap: 8px;
}
.ev-meer > summary::-webkit-details-marker { display: none; }
.ev-meer > summary::after {
  content: ''; width: 7px; height: 7px; margin-left: auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s;
}
.ev-meer[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.ev-meer > summary:hover { color: var(--tekst); }
.ev-meer-inhoud { padding: 4px 18px 18px; }

/* Het aansluitingblok hangt onder het verbruik: de waarde staat in de kop,
   zodat de klant hem kan controleren zonder open te klappen. */
.ev-meer-aansluiting {
  margin: 16px 0 0;
  background: color-mix(in srgb, var(--hoofdkleur) 3.5%, var(--wit));
}
.ev-meer-aansluiting > summary { flex-wrap: wrap; gap: 4px 10px; padding: 12px 16px; }
.ev-meer-titel { font-size: 0.8125rem; font-weight: 700; color: var(--tekst); }
.ev-meer-waarde {
  font-size: 0.8125rem; font-weight: 700; color: var(--hoofdkleur-tekst);
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--hoofdkleur) 10%, transparent);
}
.ev-meer-sub { font-size: 0.75rem; font-weight: 500; color: var(--tekst-licht); }

/* Verbruik: herkomst links, schathulp rechts */
.ev-verbruik-voet {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 4px;
}
.ev-verbruik-voet .hint { flex: 1 1 240px; margin: 0; }
.ev-tekstknop {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.8125rem; font-weight: 600;
  color: var(--hoofdkleur-tekst); text-decoration: underline; text-underline-offset: 3px;
}
.ev-tekstknop:hover { opacity: 0.75; }

/* Adresregel in stap 3: bevestiging zonder een hele kaart */
.ev-adres-regel {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px; margin-bottom: 18px;
  border-radius: 14px; font-size: 0.875rem;
  background: color-mix(in srgb, var(--succes) 6%, var(--wit));
  border: 1px solid color-mix(in srgb, var(--succes) 20%, transparent);
}
.ev-adres-regel .ev-adres-wijzig { margin-left: auto; }

/* Aansluitwaarde: twee smalle keuzevelden naast elkaar met de basis eronder */
.ev-aansluitwaarde-rij { display: flex; gap: 14px; flex-wrap: wrap; }
.ev-aansluitwaarde-veld { flex: 1 1 190px; min-width: 0; margin-bottom: 0; }
.ev-aansluitwaarde-veld label {
  display: block; margin-bottom: 6px;
  font-size: 0.8125rem; font-weight: 600; color: var(--tekst);
}
.ev-aansluitwaarde-veld .hint { display: block; margin-top: 6px; }

/* Herkomst van een ingevulde waarde: rustig, maar niet te verstoppen */
.ev-bron-notitie {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 14px; padding: 11px 13px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--rand) 32%, transparent);
  font-size: 0.75rem; line-height: 1.5; color: var(--tekst-licht);
}
.ev-bron-notitie svg { flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px; opacity: .7; }

/* ============================================================
   KEUZERIJ — alle opties naast elkaar, even breed en even hoog
   Een flexrij met min-width brak af zodra er een optie te veel was:
   vier kaarten op een rij en de vijfde als volle balk eronder. Een grid
   met een vast aantal kolommen kan dat niet; 'minmax(0,1fr)' zorgt dat
   een lang woord de kolom niet oprekt.

   Staat bewust achteraan en op .ev-hoofdkolom: de kaartsectie hierboven
   zet padding, icoonmaat en labelgrootte met hetzelfde gewicht, en die
   wint anders puur op volgorde.
   ============================================================ */
.ev-simulatie { container-type: inline-size; }

.ev-hoofdkolom .ev-keuze-rij {
  display: grid;
  grid-template-columns: repeat(var(--kolommen, 4), minmax(0, 1fr));
  gap: 8px;
}
/* Smalle kaart: inhoud gecentreerd, want links uitlijnen naast een
   aanvinkvakje laat op 100px te weinig ruimte voor het woord zelf. */
.ev-hoofdkolom .ev-keuze-rij .ev-keuze-btn {
  align-items: center; text-align: center;
  padding: 13px 6px 12px; min-width: 0;
}
.ev-hoofdkolom .ev-keuze-rij .ev-keuze-btn .icoon {
  width: 34px; height: 34px; margin: 0 auto 8px; border-radius: 10px;
}
.ev-hoofdkolom .ev-keuze-rij .ev-keuze-btn .icoon svg { width: 18px; height: 18px; }
/* Het label mag afbreken in plaats van uit de kaart te lopen: de kaart
   heeft overflow:hidden voor de gloed, dus zonder dit wordt het woord
   simpelweg afgekapt ("Tussenwoni"). */
.ev-hoofdkolom .ev-keuze-rij .ev-keuze-btn .label {
  font-size: 0.75rem; line-height: 1.25; letter-spacing: -0.1px;
  hyphens: auto; overflow-wrap: break-word;
}
/* Het vakje schaalt mee: 22px is te log op een kaart van 100px. */
.ev-hoofdkolom .ev-keuze-rij .ev-keuze-btn::after {
  width: 15px; height: 15px; top: 6px; right: 6px; border-radius: 5px;
}
.ev-hoofdkolom .ev-keuze-rij .ev-keuze-btn.geselecteerd::after { background-size: 9px 9px; }

/* Te smal voor kolommen? Dan liggende rijen onder elkaar: beter dan een
   half gevulde laatste rij, en het label past altijd heel. */
@container (max-width: 400px) {
  .ev-hoofdkolom .ev-keuze-rij { grid-template-columns: 1fr; gap: 6px; }
  .ev-hoofdkolom .ev-keuze-rij .ev-keuze-btn {
    flex-direction: row; align-items: center; gap: 10px;
    text-align: left; padding: 10px 38px 10px 12px;
  }
  .ev-hoofdkolom .ev-keuze-rij .ev-keuze-btn .icoon { margin: 0; flex: none; }
  .ev-hoofdkolom .ev-keuze-rij .ev-keuze-btn .label { font-size: 0.875rem; hyphens: manual; }
  .ev-hoofdkolom .ev-keuze-rij .ev-keuze-btn::after { top: 50%; margin-top: -7.5px; right: 12px; }
}

/* ============================================================
   ACHTERGROND — de stappen volgen weer het startscherm
   Een latere herziening verving de merkvlakken door een vlakke
   papierkleur, maar alleen op .ev-wrapper: het startscherm hield zijn
   zachte vlakken. Daardoor viel de kleur weg zodra je op stap 1 kwam.
   Zelfde recept als .ev-beginscherm::before, zodat het één geheel is.
   ============================================================ */
.ev-wrapper { background: var(--hero-vlak); }
.ev-wrapper::before {
  content: ''; position: fixed; inset: -25%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(34% 38% at 16% 18%, var(--hero-tint-2) 0%, transparent 64%),
    radial-gradient(30% 34% at 84% 14%, var(--hero-tint-1) 0%, transparent 62%),
    radial-gradient(42% 42% at 78% 88%, var(--hero-tint-1) 0%, transparent 60%);
  filter: blur(36px);
  opacity: 0.9;
  animation: ev-wrapper-drift 40s ease-in-out infinite alternate;
}

/* ============================================================
   BLOKKEN — een vraag tegelijk
   Een beantwoord blok is een regel met zijn antwoord erin: de klant
   ziet in een oogopslag wat hij al heeft ingevuld, zonder dat vijf
   open formulieren om aandacht vechten. Klikken opent het weer.
   ============================================================ */
.ev-blok-dicht {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 16px; margin-bottom: 8px;
  border: 1px solid var(--rand); border-radius: 12px;
  background: var(--wit); cursor: pointer; text-align: left;
  font: inherit; color: inherit;
  transition: border-color 0.18s, background 0.18s;
}
.ev-blok-dicht:hover { border-color: color-mix(in srgb, var(--hoofdkleur) 40%, var(--rand)); }
.ev-blok-dicht:focus-visible {
  outline: 2px solid var(--hoofdkleur-tekst); outline-offset: 2px;
}
/* Beantwoord: het nummer maakt plaats voor een vinkje */
.ev-blok-dicht.klaar .ev-blok-nr {
  background: color-mix(in srgb, var(--steunkleur) 16%, var(--wit));
  color: var(--succes, #2e7d32);
}
.ev-blok-dicht.klaar .ev-blok-nr svg { width: 13px; height: 13px; }
/* Nog te doen: rustiger, zodat het oog naar het open blok gaat */
.ev-blok-dicht:not(.klaar) { background: transparent; border-style: dashed; }
.ev-blok-dicht:not(.klaar) .ev-blok-dicht-antwoord { color: var(--tekst-licht); }

.ev-blok-dicht-tekst {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap;
}
.ev-blok-dicht-vraag { font-size: 0.875rem; color: var(--tekst-licht); }
.ev-blok-dicht-antwoord {
  font-size: 0.9375rem; font-weight: 700; color: var(--tekst);
  overflow-wrap: anywhere;
}
.ev-blok-dicht-actie {
  flex: none; font-size: 0.8125rem; font-weight: 700;
  color: var(--hoofdkleur-tekst);
}

/* Het open blok is het zwaartepunt van de pagina */
.ev-blok-open {
  border-color: color-mix(in srgb, var(--hoofdkleur) 28%, var(--rand));
  box-shadow: 0 10px 30px -22px color-mix(in srgb, var(--hoofdkleur) 60%, transparent);
}

@media (max-width: 600px) {
  .ev-blok-dicht { padding: 12px 13px; }
  .ev-blok-dicht-tekst { gap: 2px; flex-direction: column; }
}

/* Meterblok is nu een uitklap: de vraag is de aanleiding, niet het formulier */
.ev-hoofdkolom .ev-meter-blok > summary {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none;
  font-size: 0.875rem; font-weight: 700; color: var(--hoofdkleur-tekst);
}
.ev-hoofdkolom .ev-meter-blok > summary::-webkit-details-marker { display: none; }
.ev-hoofdkolom .ev-meter-blok > summary::after {
  content: ''; width: 7px; height: 7px; margin-left: auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s;
}
.ev-hoofdkolom .ev-meter-blok[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

/* Benaderen-vraag: één rustige regel onderaan het blok in plaats van vier
   even zware kaarten. Het blijft een opt-in, alleen niet meer als blikvanger. */
.ev-hoofdkolom .ev-benaderen-blok {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--rand);
}
.ev-hoofdkolom .ev-benaderen-kop {
  display: block; margin-bottom: 8px;
  font-size: 0.8125rem; font-weight: 600; color: var(--tekst-licht);
  letter-spacing: 0;
}
.ev-hoofdkolom .ev-benaderen-lijst {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ev-hoofdkolom .ev-benaderen-item {
  flex: 0 1 auto; gap: 8px; padding: 6px 10px;
  border: 1px solid var(--rand); border-radius: 999px;
  background: var(--wit);
}
.ev-hoofdkolom .ev-benaderen-item .ev-benaderen-naam { font-size: 0.8125rem; }
.ev-hoofdkolom .ev-benaderen-item .ev-benaderen-ico svg { width: 14px; height: 14px; }

/* Het bevestigde adres krijgt dezelfde vorm als een beantwoord blok */
.ev-hoofdkolom .ev-adres-bevestigd {
  padding: 13px 16px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--steunkleur) 32%, var(--rand));
  background: color-mix(in srgb, var(--steunkleur) 6%, var(--wit));
}

/* Benaderen-items liggend, niet als vier tegels: het is een nabrander,
   geen keuze die aandacht moet trekken. */
.ev-hoofdkolom .ev-benaderen-lijst { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-hoofdkolom .ev-benaderen-item {
  flex-direction: row; align-items: center; gap: 8px;
  padding: 6px 10px 6px 12px; border-radius: 999px;
}
.ev-hoofdkolom .ev-benaderen-kop { text-transform: none; letter-spacing: 0; }

/* De EAN-titel is de toevoeging zodra die onderscheidend is; dan hoeft de
   code niet meer in monospace te schreeuwen. */
.ev-hoofdkolom .ev-ean-titel { font-family: inherit; font-size: 0.9375rem; letter-spacing: -0.2px; }

/* Techniek op stap 4: nazienbaar, niet op ooghoogte */
.ev-controle-techniek > summary {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; list-style: none;
}
.ev-controle-techniek > summary::-webkit-details-marker { display: none; }
.ev-controle-techniek-hint {
  margin-left: auto; font-size: 0.75rem; font-weight: 500; color: var(--tekst-licht);
}
.ev-controle-techniek > summary::after {
  content: ''; width: 7px; height: 7px; flex: none;
  border-right: 2px solid var(--tekst-licht); border-bottom: 2px solid var(--tekst-licht);
  transform: rotate(45deg) translateY(-2px); transition: transform 0.18s;
}
.ev-controle-techniek[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.ev-controle-techniek[open] > summary { margin-bottom: 10px; }

/* Stap 3: de twee metervragen horen bij elkaar, dus krijgen ze één kop */
.ev-meterveld { margin-top: 14px; }
.ev-meterveld-kop {
  display: block; margin-bottom: 8px;
  font-size: 0.8125rem; font-weight: 700; color: var(--tekst);
}
/* Optioneel tekstveld hoort niet permanent ruimte te nemen */
.ev-afspraken { margin-top: 14px; }
.ev-afspraken > summary {
  cursor: pointer; list-style: none;
  font-size: 0.8125rem; font-weight: 700; color: var(--hoofdkleur-tekst);
}
.ev-afspraken > summary::-webkit-details-marker { display: none; }
/* Gekozen product op stap 3: bevestiging, geen tweede aanbod */
.ev-hoofdkolom .ev-gekozen { padding: 12px 16px; }
.ev-hoofdkolom .ev-gekozen .ev-gekozen-kenmerken { display: none; }
.ev-hoofdkolom .ev-gekozen .ev-gekozen-eyebrow { font-size: 0.75rem; }
.ev-hoofdkolom .ev-gekozen .ev-gekozen-naam { font-size: 0.9375rem; }
.ev-hoofdkolom .ev-gekozen .ev-gekozen-prijs { font-size: 1.15rem; }

/* De kop van een open blok is een knop: klikken klapt het weer dicht.
   Een blok dat alleen open kan maar niet dicht, voelt als een val. */
.ev-hoofdkolom .ev-blok-kop-knop {
  width: 100%; background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.ev-hoofdkolom .ev-blok-kop-knop:focus-visible {
  outline: 2px solid var(--hoofdkleur-tekst); outline-offset: 3px; border-radius: 8px;
}
.ev-blok-kop-tekst { flex: 1; min-width: 0; }
/* Pijl omhoog: wijst naar wat er gebeurt als je klikt (inklappen) */
.ev-blok-pijl {
  flex: none; width: 8px; height: 8px; margin: 6px 2px 0 10px;
  border-right: 2px solid var(--tekst-licht); border-bottom: 2px solid var(--tekst-licht);
  transform: rotate(-135deg);
  transition: border-color 0.15s;
}
.ev-hoofdkolom .ev-blok-kop-knop:hover .ev-blok-pijl { border-color: var(--hoofdkleur-tekst); }

/* 'Niets van dit alles' is geen apparaat maar een antwoord: rustiger vorm,
   zonder icoontegel, zodat hij niet met de vier chips concurreert. */
.ev-hoofdkolom .ev-chip-geen { border-style: dashed; }
.ev-hoofdkolom .ev-chip-geen.aan { border-style: solid; }

/* Ring om het pand in plaats van een stip: de maat komt uit de code, want die
   is in meters gerekend en hangt dus af van hoe ver is ingezoomd. */
.ev-luchtfoto-ring {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2.5px solid var(--wit);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hoofdkleur-tekst) 65%, transparent),
              0 2px 12px rgba(0,0,0,0.45);
  pointer-events: none;
}

/* Voorschot zonder keuze: tonen wat het wordt en waarom, niet een
   uitgegrijsde keuze waar de klant op blijft klikken. */
.ev-vast-uit {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--rand);
  background: color-mix(in srgb, var(--hoofdkleur) 3%, var(--wit));
}
.ev-vast-uit-waarde {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.9375rem; font-weight: 700; color: var(--tekst);
}
.ev-vast-uit-waarde svg { width: 16px; height: 16px; }

/* Bredere toelichting met regelafbrekingen, voor uitleg die uit meerdere
   regels bestaat (zoals de grootteklassen van een onderneming). */
.ev-tooltip-breed:hover::after {
  width: 330px;
  white-space: pre-line;
}

/* ============================================================
   AFWERKING (2026-09) — één systeem over de eerdere rondes heen
   ============================================================
   De stijlen hierboven zijn in rondes ontstaan en overschrijven elkaar.
   Deze laag trekt ze gelijk: een rustige achtergrond, beweging alleen
   waar iets gebeurt, leesbare kleine tekst en vaste afstanden in de
   formulieren. Lettergroottes zijn in het bestand zelf al op één schaal
   gebracht (minimaal 12px). */

:root {
  /* #94A3B8 haalde op wit maar 2,6:1; dit grijs haalt 4,9:1. */
  --tekst-dim: #667085;
  --ease-uit: cubic-bezier(0.22, 1, 0.36, 1);
}

/* De achtergrond (merkvlekken die meebewegen, gelijk aan het startscherm)
   blijft zoals hij was: keuze Sam, 2026-09-10. */

/* ---------- Beweging alleen voor status ---------- */
/* De lichtranden blijven als rand staan, maar draaien niet meer; glans en
   lopende balken verdwijnen. Laden (spinner) en bevestigen blijven. */
.ev-opwek-optie::before,
.ev-vinkrij::before,
.ev-kolommen::before,
.ev-stap-node.voltooid::before,
.ev-luchtfoto-punt::after { animation: none; }
.ev-aanbod-hero-top::after,
.ev-stap-node.actief .ev-stap-balk::after { display: none; }

/* ---------- Koppen ---------- */
/* Gewicht 900 met -1px letterafstand drukte woorden tegen elkaar
   ('Kloptdit?'). */
.ev-stap-intro h2 { font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.ev-begin-titel { letter-spacing: -0.03em; text-wrap: balance; }
.ev-hoofdkolom .ev-kaart-titel { letter-spacing: -0.01em; }
.ev-stap-intro p { text-wrap: pretty; max-width: 60ch; }

/* Icoon bij de stapkop: een rustige merktint in plaats van een verloop. */
.ev-stap-intro-icoon {
  background: color-mix(in srgb, var(--hoofdkleur) 8%, var(--wit));
  color: var(--hoofdkleur-tekst);
  border: 1px solid color-mix(in srgb, var(--hoofdkleur) 16%, transparent);
  box-shadow: none;
}

/* ---------- Formulieren ---------- */
/* Vaste afstand tussen rijen: labels plakten tegen het veld erboven. */
.ev-rij { column-gap: 12px; row-gap: 16px; margin-bottom: 16px; }
.ev-blok .ev-rij { margin-bottom: 16px; }
.ev-blok .ev-rij:last-child,
.ev-rij:last-child { margin-bottom: 0; }
.ev-veld { gap: 6px; }
.ev-veld label { margin-bottom: 0; color: var(--tekst); font-weight: 600; }
.ev-veld input,
.ev-veld select,
.ev-veld textarea { width: 100%; }
.ev-veld .hint { color: var(--tekst-licht); }

/* Zichtbare focus voor wie met het toetsenbord werkt. */
.ev-wrapper :where(button, a, summary, [role="button"]):focus-visible {
  outline: 2px solid var(--hoofdkleur-tekst);
  outline-offset: 2px;
}

/* ---------- Luchtfoto ---------- */
/* Tegels op afgeronde pixelposities lieten een naad van 1px zien;
   een pixel overlap sluit die. */
.ev-luchtfoto img { width: 257px; height: 257px; }

/* ---------- Minder beweging als de bezoeker dat vraagt ---------- */
@media (prefers-reduced-motion: reduce) {
  .ev-wrapper *,
  .ev-wrapper *::before,
  .ev-wrapper *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Afwerking, aanvullingen ---------- */
/* Deze labels stonden eerder in hoofdletters; zonder hoofdletters hoort de
   extra letterafstand er niet meer bij. */
.ev-header .stap-teller, .ev-stap-node-label, .ev-verbruik-label, .ev-opwek-detail-kop,
.ev-simulatie-titel, .ev-aanbod-eyebrow, .ev-aanbod-maand-label, .ev-spec-sectie td,
.ev-gekozen-eyebrow, .ev-controle-kop, .ev-zij-kop, .ev-scan-bron-label, .ev-zij-bronnen-kop,
.ev-pas-kop-label, .ev-pas-tegel-label, .ev-pas-sectie-kop, .ev-pas-bronnen-kop,
.ev-benaderen-kop { letter-spacing: normal; }

/* Een los veld boven een rij (de verhuisvraag) kreeg geen afstand. */
.ev-veld + .ev-rij { margin-top: 16px; }

/* Op een telefoon moeten ook de kleine 'Wijzig'-knoppen met een vinger te
   raken zijn: minimaal 44px hoog. */
@media (max-width: 700px) {
  .ev-adres-wijzig, .ev-kvk-wijzig, .ev-wijzig-product, .ev-controle-wijzig {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}

/* Mobiel: de vier stappen op één rij. Braken ze af naar 2×2, dan bleven er
   drie lege pillen met alleen een cijfer over. De actieve stap is breder en
   houdt zijn naam. Het logo past binnen de lage kop van 52px. */
@media (max-width: 600px) {
  .ev-stappen { flex-wrap: nowrap; gap: 6px; }
  .ev-stap-node { flex: 1 1 0; min-width: 0; padding: 8px 6px; }
  .ev-stap-node.actief { flex: 2.4 1 0; }
  .ev-header-logo { height: 30px; }
}

/* ============================================================
   RUSTIG EN HELDER (2026-09-11)
   ============================================================
   Eén visuele taal: witte vlakken met één randstijl; het merkverloop als
   accent op de hoofdknop, de actieve stap en de kop van de aanbodkaart; de
   lichtrand alleen om het blok dat open staat.
   Spec: docs/superpowers/specs/2026-09-11-aanmeldmodule-rustig-en-helder-design.md */

/* ---------- Vlakken: wit, één rand ---------- */
.ev-hoofdkolom { background: var(--wit); }
.ev-gekozen,
.ev-adres-regel,
.ev-adres-bevestigd {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.ev-gekozen { padding: 16px 20px; }

/* ---------- Lichtrand alleen om het open blok ---------- */
.ev-kolommen::before { display: none; }
.ev-blok-open { position: relative; border-color: transparent; }
.ev-blok-open::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from 200deg, var(--hoofdkleur), var(--steunkleur), var(--accent), var(--hoofdkleur));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Koppen ---------- */
.ev-stap-intro { margin-bottom: 24px; }
.ev-stap-intro h2 { font-size: 1.625rem; line-height: 1.2; margin-bottom: 6px; }
.ev-stap-intro p { font-size: 0.9375rem; color: var(--tekst-licht); }
.ev-blok-kop { gap: 0; }

/* ---------- Voortgang: dunne lijn met stapnamen ---------- */
.ev-stappen { gap: 12px; }
.ev-stap-node,
.ev-stap-node.actief {
  background: none; border: 0; box-shadow: none; border-radius: 0;
  padding: 0; gap: 8px;
}
.ev-stap-balk { display: block; height: 3px; }
.ev-stap-node-label { justify-content: flex-start; }
@media (max-width: 600px) {
  .ev-stap-node,
  .ev-stap-node.actief { padding: 0; }
  .ev-stap-node-label { justify-content: flex-start; }
}

/* ---------- Aanbod ---------- */
.ev-aanbod-maand-note { color: var(--tekst-licht); font-size: 0.8125rem; }
.ev-kenmerken-lijst {
  list-style: none; margin: 0 0 12px; padding: 16px 20px;
  display: grid; gap: 10px;
  border: 1px solid var(--rand); border-radius: var(--radius); background: var(--wit);
}
.ev-kenmerken-lijst li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; line-height: 1.5; color: var(--tekst); }
.ev-kenmerken-lijst .ev-ico { color: var(--steunkleur-tekst); margin-top: 3px; }

/* ---------- Tijdlijn na bevestigen ---------- */
.ev-tijdlijn-wrap { max-width: 440px; margin: 24px auto 0; text-align: left; }
.ev-tijdlijn-wrap h3 { font-size: 1rem; font-weight: 700; margin-bottom: 14px; }
.ev-tijdlijn { list-style: none; margin: 0; padding: 0; counter-reset: stap; }
.ev-tijdlijn li { position: relative; padding: 0 0 18px 40px; counter-increment: stap; }
.ev-tijdlijn li::before {
  content: counter(stap);
  position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--hoofdkleur) 9%, var(--wit));
  color: var(--hoofdkleur-tekst); font-size: 0.8125rem; font-weight: 700;
}
.ev-tijdlijn li::after {
  content: ''; position: absolute; left: 12.5px; top: 30px; bottom: 4px; width: 1px;
  background: var(--rand);
}
.ev-tijdlijn li:last-child { padding-bottom: 0; }
.ev-tijdlijn li:last-child::after { display: none; }
.ev-tijdlijn strong { display: block; font-size: 0.9375rem; color: var(--tekst); }
.ev-tijdlijn span { display: block; font-size: 0.875rem; color: var(--tekst-licht); margin-top: 2px; }

/* Het KvK-blok eindigt met een rij zonder ondermarge; zonder deze afstand
   plakte het volgende veld (geboortedatum) tegen 'Type onderneming'. */
.ev-kvk-blok { margin-bottom: 16px; }

/* ============================================================
   NIEUWE OPBOUW (2026-09-11, goedgekeurd door Sam)
   ============================================================
   De module is geen grote omkaderde kaart meer. Kop en voortgang vormen
   één vaste balk; de inhoud staat los op de achtergrond; rechts loopt een
   overzicht mee (adres, aansluitingen, vanaf stap 2 het maandbedrag);
   onderaan zweeft een balk met de prijs en de knop. */

/* ---------- Topbalk: logo, voortgang en hulp in één balk ---------- */
.ev-header {
  position: sticky; top: 0; z-index: 20;
  height: 68px;
  background: color-mix(in srgb, var(--wit) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--rand) 80%, transparent);
}
.ev-header::after { height: 2px; }
.ev-header-inner { max-width: 1120px; gap: 28px; }
.ev-header-logo { height: 36px; }
.ev-header .ev-voortgang {
  flex: 1; max-width: 560px; margin: 0 auto;
  padding: 0; background: none; border: 0;
}
.ev-header .ev-voortgang-inner { padding: 0; max-width: none; }
.ev-header .ev-stappen { max-width: none; margin: 0; padding: 0; }

/* ---------- Pagina: geen omkaderde kaart meer ---------- */
.ev-inhoud { max-width: 1120px; padding: 40px clamp(16px, 4vw, 32px) 120px; }
.ev-kolommen {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start;
  background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible;
}
.ev-kolommen::before { display: none; }
.ev-hoofdkolom { background: none; padding: 0; min-width: 0; }

/* Kop in een eigen rij: het overzicht begint op de hoogte van de eerste vraag */
.ev-kolommen { grid-template-areas: "kop ." "hoofd zij"; row-gap: 0; }
.ev-stap-kop { grid-area: kop; min-width: 0; }
.ev-hoofdkolom { grid-area: hoofd; }
/* Mag omhoog tot de kop, zodat de onderkant gelijk valt met de laatste vraag (zie lijnZijpaneelUit) */
.ev-zijpaneel { grid-area: zij; margin-top: calc(-1 * var(--ev-zij-omhoog, 0px)); }

/* ---------- Overzicht rechts, loopt mee bij scrollen ---------- */
.ev-zijpaneel {
  position: sticky; top: 92px;
  background: var(--wit);
  border: 1px solid var(--rand); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 24px 48px -32px rgba(16, 24, 40, 0.28);
  overflow: hidden;
}
.ev-pas-prijs {
  display: grid; gap: 2px;
  padding: 18px 20px;
  border-top: 1px solid var(--rand);
  background: color-mix(in srgb, var(--hoofdkleur) 4%, var(--wit));
}
.ev-pas-prijs-label { font-size: 0.8125rem; font-weight: 600; color: var(--tekst-licht); }
.ev-pas-prijs-bedrag { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; color: var(--hoofdkleur-tekst); }
.ev-pas-prijs-bedrag em { font-style: normal; font-size: 0.875rem; font-weight: 600; letter-spacing: 0; color: var(--tekst-licht); }
.ev-pas-prijs-product { font-size: 0.8125rem; font-weight: 600; color: var(--tekst); }

/* ---------- Koppen: groot en duidelijk ---------- */
.ev-stap-intro { margin-bottom: 28px; }
.ev-stap-intro h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 8px;
}
.ev-stap-intro p { font-size: 1rem; color: var(--tekst-licht); }

/* ---------- Blokken: witte kaarten op de achtergrond ---------- */
.ev-blok {
  background: var(--wit);
  border: 1px solid var(--rand); border-radius: 18px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.ev-blok-adres { background: none; border: 0; box-shadow: none; padding: 0; }
.ev-blok-open { margin: 12px 0; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 40px -28px rgba(16, 24, 40, 0.30); }

/* Stap 1: de vragen als één lijst in plaats van losse, gestippelde kaders */
.ev-blok-dicht {
  margin: 0; min-height: 60px; padding: 16px 20px;
  border: 1px solid var(--rand); border-radius: 0;
  background: var(--wit);
}
.ev-blok-dicht:not(.klaar) { border-style: solid; background: var(--wit); }
.ev-blok-dicht + .ev-blok-dicht { border-top: 0; }
.ev-blok-dicht:not(.ev-blok-dicht + .ev-blok-dicht) {
  margin-top: 12px; border-top-left-radius: 18px; border-top-right-radius: 18px;
}
.ev-blok-dicht:not(:has(+ .ev-blok-dicht)) {
  margin-bottom: 12px; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px;
}
.ev-blok-dicht-tekst { justify-content: space-between; }
.ev-blok-dicht:not(.klaar) .ev-blok-dicht-antwoord { color: var(--hoofdkleur-tekst); }
.ev-blok-dicht:hover { background: color-mix(in srgb, var(--hoofdkleur) 3%, var(--wit)); }

/* ---------- Invulvelden: groter en rustig ---------- */
.ev-veld input,
.ev-veld select,
.ev-veld textarea {
  min-height: 48px; padding: 12px 14px;
  font-size: 0.9375rem;
  background: var(--wit);
  border: 1px solid var(--rand-sterk); border-radius: 12px;
}
.ev-veld textarea { min-height: 96px; }
.ev-veld input:focus,
.ev-veld select:focus,
.ev-veld textarea:focus {
  border-color: var(--hoofdkleur-tekst);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hoofdkleur) 14%, transparent);
}

/* ---------- Keuzekaarten: groter en duidelijker gekozen ---------- */
.ev-hoofdkolom .ev-optie { min-height: 56px; padding: 14px 16px; border-radius: 14px; }
.ev-hoofdkolom .ev-optie.geselecteerd {
  border-color: var(--hoofdkleur-tekst);
  box-shadow: 0 0 0 1px var(--hoofdkleur-tekst);
  background: color-mix(in srgb, var(--hoofdkleur) 4%, var(--wit));
}

/* ---------- Knoppen ---------- */
.ev-btn-primair { background: var(--os-gradient-diag); color: var(--op-gradient); }

/* ---------- Zwevende actiebalk onderaan, met de prijs ---------- */
/* Zelfde selector als de oudere regel (.ev-hoofdkolom .ev-acties), anders
   winnen diens negatieve marges op specificiteit. */
.ev-hoofdkolom .ev-acties {
  position: sticky; bottom: 16px; z-index: 15;
  display: flex; align-items: center; justify-content: flex-start; gap: 16px;
  margin: 28px 0 0; padding: 12px 12px 12px 16px;
  background: color-mix(in srgb, var(--wit) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border: 1px solid var(--rand); border-radius: 18px;
  box-shadow: 0 12px 32px -18px rgba(16, 24, 40, 0.35);
}
.ev-acties .ev-btn-terug { border: 0; background: none; padding-inline: 8px; }
.ev-acties-prijs { margin-left: auto; font-size: 0.875rem; color: var(--tekst-licht); white-space: nowrap; }
.ev-acties-prijs strong { margin-right: 4px; font-size: 1.125rem; font-weight: 800; color: var(--tekst); }
.ev-acties .ev-btn-primair,
.ev-acties .ev-btn-succes { min-height: 50px; padding: 0 26px; border-radius: 14px; }

/* ---------- Smalle schermen ---------- */
@media (max-width: 900px) {
  .ev-kolommen { grid-template-columns: 1fr; grid-template-areas: "kop" "hoofd" "zij"; gap: 0; }
  /* Eerst de vraag, dan het overzicht: de prijs staat al in de balk onderaan */
  .ev-zijpaneel { position: static; order: 2; margin-top: 24px; }
}
@media (max-width: 700px) {
  .ev-header { height: auto; padding-block: 10px; }
  .ev-header-inner { flex-wrap: wrap; row-gap: 10px; }
  .ev-header .ev-voortgang { order: 3; flex-basis: 100%; max-width: none; }
  .ev-inhoud { padding-top: 24px; }
  .ev-blok { padding: 18px; }
  .ev-hoofdkolom .ev-acties { margin: 24px 0 0; bottom: 8px; gap: 10px; padding: 10px; }
  .ev-acties-prijs { font-size: 0.8125rem; }
  .ev-acties-prijs strong { display: block; font-size: 1rem; }
}

/* Nieuwe opbouw, aanvullingen */
/* De hoofdknop staat altijd rechts, ook in stap 1 waar geen prijsvak is. */
.ev-hoofdkolom .ev-acties > .ev-btn:last-child { margin-left: auto; }
.ev-hoofdkolom .ev-acties-prijs + .ev-btn { margin-left: 0; }
/* 'Wijzig' krijgt vaste ruimte, zodat alle antwoorden op één lijn eindigen. */
.ev-blok-dicht-actie { min-width: 52px; text-align: right; }
/* Op een telefoon moet alles wat je aantikt minimaal 44px hoog zijn. */
@media (max-width: 700px) {
  .ev-header .hulp-link { min-height: 44px; padding: 0 6px; }
  .ev-blok-kop-knop,
  .ev-wrapper .ev-hoofdkolom button { min-height: 44px; }
}
/* Met een prijsvak staat de prijs direct naast de knop, niet in het midden. */
.ev-hoofdkolom .ev-acties > .ev-acties-prijs + .ev-btn:last-child { margin-left: 0; }

/* ---------- Productkenmerken: 'Dit zit in je contract' ---------- */
/* Titel en uitleg gescheiden, in twee kolommen: leest als een overzicht in
   plaats van een lijst lange zinnen. */
.ev-kenmerken {
  margin: 0 0 12px; padding: 22px 24px;
  background: var(--wit);
  border: 1px solid var(--rand); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.ev-kenmerken-kop { margin: 0 0 16px; font-size: 1rem; font-weight: 700; color: var(--tekst); }
.ev-kenmerken .ev-kenmerken-lijst {
  list-style: none; margin: 0; padding: 0; border: 0; background: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 18px 28px;
}
.ev-kenmerken .ev-kenmerk-item { display: flex; align-items: flex-start; gap: 12px; }
.ev-kenmerk-ico {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  background: color-mix(in srgb, var(--steunkleur) 14%, var(--wit));
  color: var(--steunkleur-tekst);
}
.ev-kenmerken .ev-kenmerk-ico .ev-ico { margin: 0; }
.ev-kenmerk-tekst { display: flex; flex-direction: column; gap: 3px; font-size: 0.875rem; line-height: 1.45; }
.ev-kenmerk-tekst strong { font-weight: 700; color: var(--tekst); }
.ev-kenmerk-tekst span { color: var(--tekst-licht); }
@media (max-width: 700px) {
  .ev-kenmerken { padding: 18px; }
}

/* Knoppen met een kleurverloop: .ev-btn heeft een doorzichtige rand van
   1,5px, en een verloop wordt standaard binnen die rand geplaatst en
   herhaald. Dan zie je aan de randen een streepje van de andere kant van het
   verloop. Vanaf de buitenrand tekenen lost dat op zonder dat de knop van
   maat verandert. */
.ev-btn-primair,
.ev-btn-succes,
.ev-begin-btn { background-origin: border-box; }

/* ---------- Stap 1: vraag boven antwoord ---------- */
/* De vraag klein erboven, het antwoord eronder, allebei links: het oog hoeft
   niet meer de hele breedte over, en lange antwoorden passen. */
.ev-blok-dicht { align-items: center; }
.ev-blok-dicht-tekst { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.ev-blok-dicht-vraag { font-size: 0.8125rem; color: var(--tekst-licht); }
.ev-blok-dicht-antwoord {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 0.9375rem; font-weight: 700; color: var(--tekst); text-align: left;
}
.ev-blok-label {
  padding: 2px 8px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600;
  background: color-mix(in srgb, var(--steunkleur) 14%, var(--wit));
  color: var(--steunkleur-tekst);
}

/* ---------- Contract: korte KPI's onder elkaar ---------- */
.ev-kenmerken .ev-kenmerken-lijst { grid-template-columns: 1fr; gap: 0; }
.ev-kenmerken .ev-kenmerk-item { align-items: center; padding: 10px 0; }
.ev-kenmerken .ev-kenmerk-item + .ev-kenmerk-item { border-top: 1px solid var(--rand); }
.ev-kenmerken .ev-kenmerk-item:first-child { padding-top: 0; }
.ev-kenmerken .ev-kenmerk-item:last-child { padding-bottom: 0; }
.ev-kenmerken .ev-kenmerk-tekst strong { font-size: 0.9375rem; }

/* ---------- Contract-KPI's: kleiner en subtieler (verzoek Sam) ---------- */
.ev-kenmerken { padding: 16px 20px; box-shadow: none; }
.ev-kenmerken-kop { margin-bottom: 10px; font-size: 0.875rem; font-weight: 600; color: var(--tekst-licht); }
.ev-kenmerken .ev-kenmerk-item { gap: 10px; padding: 6px 0; }
.ev-kenmerken .ev-kenmerk-item + .ev-kenmerk-item { border-top: 0; }
.ev-kenmerken .ev-kenmerk-ico { width: 18px; height: 18px; font-size: 11px; background: none; }
.ev-kenmerken .ev-kenmerk-tekst { font-size: 0.8125rem; gap: 1px; }
.ev-kenmerken .ev-kenmerk-tekst strong { font-size: 0.875rem; font-weight: 500; color: var(--tekst); }
.ev-kenmerken .ev-kenmerk-tekst span { font-size: 0.8125rem; }

/* ============================================================
   STAP 3: GEGEVENS IN DRIE SECTIES (2026-09-11)
   Eén wit vlak met drie genummerde secties (de klant doorloopt ze
   echt in deze volgorde). Ja/nee-vragen als twee knoppen naast
   elkaar; wat optioneel is staat erbij, geen rode sterretjes.
   ============================================================ */
.ev-formulier {
  background: var(--wit);
  border: 1px solid var(--rand); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.ev-formulier [hidden] { display: none !important; }
.ev-formulier .verplicht { display: none; }
.ev-sectie { padding: 28px; }
.ev-sectie + .ev-sectie { border-top: 1px solid var(--rand); }
.ev-sectie-kop {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px;
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; color: var(--tekst);
}
.ev-sectie-nr {
  display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--hoofdkleur) 10%, var(--wit));
  color: var(--hoofdkleur-tekst);
  font-size: 0.8125rem; font-weight: 800;
}
.ev-sectie .ev-rij:last-child { margin-bottom: 0; }
.ev-sectie .ev-kvk-blok { margin: 0 0 16px; }
.ev-optioneel { margin-left: 4px; font-size: 0.8125rem; font-weight: 500; color: var(--tekst-licht); }

/* Korte vraag links, keuze rechts */
.ev-vraag-rij {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 20px;
  padding: 14px 0;
}
.ev-vraag-rij + .ev-vraag-rij,
.ev-startdatum + .ev-vraag-rij { border-top: 1px solid color-mix(in srgb, var(--rand) 60%, transparent); }
.ev-sectie-kop + .ev-vraag-rij { padding-top: 0; }
.ev-vraag-tekst {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.9375rem; font-weight: 600; color: var(--tekst);
}
.ev-vraag-waarde { font-size: 0.9375rem; font-weight: 600; color: var(--tekst-licht); }

.ev-schakel {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--oppervlak);
  border: 1px solid var(--rand); border-radius: 12px;
}
.ev-schakel-knop {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  min-height: 38px; padding: 0 16px; border-radius: 9px;
  font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--tekst-licht);
  transition: background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s, box-shadow 0.2s;
}
.ev-schakel-knop:hover { color: var(--tekst); }
.ev-schakel-knop[aria-pressed="true"] {
  background: var(--wit); color: var(--hoofdkleur-tekst); font-weight: 700;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 0 0 1px var(--rand);
}
.ev-schakel-knop:focus-visible { outline: 2px solid var(--hoofdkleur); outline-offset: 2px; }

.ev-startdatum { padding: 2px 0 16px; margin-bottom: 0; }
.ev-sectie .ev-info-panel { margin: 4px 0 0; }

/* Betalen */
.ev-sectie > .ev-veld { margin-bottom: 6px; }
.ev-voorschot { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--rand) 60%, transparent); }
.ev-voorschot .ev-opties { margin: 0; }
.ev-sectie .ev-afspraken { margin-top: 18px; }

@media (max-width: 700px) {
  .ev-sectie { padding: 20px 18px; }
  .ev-sectie .ev-rij { grid-template-columns: 1fr; }
  .ev-vraag-rij { flex-direction: column; align-items: stretch; }
  .ev-schakel { display: flex; }
  .ev-schakel-knop { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ev-schakel-knop { transition: none; }
}

/* ============================================================
   STAP 4: CONTROLEREN IN ÉÉN OVERZICHT (2026-09-11)
   Zelfde witte vlak als stap 3. Per sectie één Wijzig-link bij de
   kop, labels en waarden links uitgelijnd naast elkaar, en onderaan
   het akkoord: twee vinkjes, de documenten en de handtekening.
   ============================================================ */
.ev-overzicht-vlak .ev-sectie-kop { margin-bottom: 14px; }
.ev-sectie-kop .ev-controle-wijzig,
.ev-overzicht .ev-regel-link {
  background: none; border: 0; padding: 0; border-radius: 0;
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0;
  color: var(--hoofdkleur-tekst); text-decoration: none;
}
.ev-sectie-kop .ev-controle-wijzig { margin-left: auto; }
.ev-overzicht .ev-regel-link { margin-left: 10px; font-size: 0.8125rem; }
.ev-sectie-kop .ev-controle-wijzig:hover,
.ev-overzicht .ev-regel-link:hover { text-decoration: underline; }

.ev-overzicht { display: grid; margin: 0; }
.ev-overzicht-rij {
  display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: 16px;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--rand) 60%, transparent);
}
.ev-overzicht-rij:first-child { border-top: 0; padding-top: 0; }
.ev-overzicht-rij dt { font-size: 0.875rem; color: var(--tekst-licht); }
.ev-overzicht-rij dd { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--tekst); overflow-wrap: anywhere; }
.ev-regel-noot { margin-left: 4px; font-size: 0.8125rem; font-weight: 500; color: var(--tekst-licht); }

.ev-overzicht-details { margin-top: 14px; }
.ev-overzicht-details > summary {
  cursor: pointer; list-style: none;
  font-size: 0.875rem; font-weight: 600; color: var(--hoofdkleur-tekst);
}
.ev-overzicht-details > summary::-webkit-details-marker { display: none; }
.ev-overzicht-details > summary span { margin-left: 6px; font-weight: 500; color: var(--tekst-licht); }
.ev-overzicht-details[open] > summary { margin-bottom: 12px; }

/* Akkoord: elk vinkje een eigen, aanklikbare regel */
.ev-akkoord {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--rand); border-radius: 12px;
  font-size: 0.9375rem; line-height: 1.5; color: var(--tekst);
  cursor: pointer;
  transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s;
}
.ev-akkoord + .ev-akkoord,
.ev-voorwaarden + .ev-akkoord { margin-top: 10px; }
.ev-akkoord input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--hoofdkleur); cursor: pointer; }
.ev-akkoord:has(input:checked) {
  border-color: color-mix(in srgb, var(--hoofdkleur) 45%, var(--rand));
  background: color-mix(in srgb, var(--hoofdkleur) 5%, var(--wit));
}
.ev-akkoord:has(input:focus-visible) { outline: 2px solid var(--hoofdkleur); outline-offset: 2px; }
.ev-akkoord a { color: var(--hoofdkleur-tekst); font-weight: 600; }

/* Pop-up bij het bevestigen: de accorderingen uit Salesdock */
.ev-dialoog-laag {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(12, 16, 32, 0.55);
  animation: ev-dialoog-in 0.2s ease-out;
}
.ev-dialoog {
  width: 100%; max-width: 560px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column;
  background: var(--wit); color: var(--tekst);
  border-radius: 18px; box-shadow: 0 24px 64px rgba(12, 16, 32, 0.35);
  overflow: hidden;
}
.ev-dialoog-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--rand);
}
.ev-dialoog-kop h2 { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.3px; }
.ev-dialoog-sluit {
  flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--oppervlak2); color: var(--tekst-licht); font-size: 1.375rem; line-height: 1; cursor: pointer;
}
.ev-dialoog-sluit:hover { color: var(--tekst); }
.ev-dialoog-inhoud { padding: 18px 22px 20px; overflow-y: auto; overscroll-behavior: contain; }
.ev-dialoog-intro { font-size: 0.9375rem; line-height: 1.55; color: var(--tekst-licht); margin-bottom: 14px; }
.ev-dialoog-intro strong { color: var(--tekst); }
.ev-accordering + .ev-accordering { margin-top: 10px; }
.ev-accordering strong { font-weight: 700; }
.ev-accordering-optioneel {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--oppervlak2); color: var(--tekst-licht); font-size: 0.6875rem; font-weight: 600; vertical-align: 1px;
}
.ev-accordering-tekst {
  display: block; margin-top: 6px; max-height: 9.5em; overflow-y: auto;
  font-size: 0.8125rem; line-height: 1.5; color: var(--tekst-licht);
}
.ev-accordering-tekst p + p { margin-top: 6px; }
.ev-accordering-tekst a { color: var(--hoofdkleur-tekst); font-weight: 600; text-decoration: underline; }
.ev-dialoog-lijst + .ev-dialoog-lijst { margin-top: 10px; }
.ev-dialoog .ev-fout { margin: 14px 0 0; }
.ev-dialoog-acties { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 18px; }
.ev-dialoog-acties .ev-btn-terug { border: 0; background: none; }
@keyframes ev-dialoog-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 520px) {
  .ev-dialoog-laag { align-items: flex-end; padding: 0; }
  .ev-dialoog { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: 18px 18px 0 0; }
  .ev-dialoog-acties { flex-direction: column-reverse; align-items: stretch; }
  .ev-dialoog-acties .ev-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ev-dialoog-laag { animation: none; } }

/* De documenten horen bij het eerste vinkje: ingesprongen, als rij links */
.ev-sectie-akkoord .ev-voorwaarden ,
.ev-dialoog .ev-voorwaarden { margin: 10px 0 0; padding: 0 0 0 48px; background: none; border: 0; box-shadow: none; }
.ev-sectie-akkoord .ev-voorwaarden-kop ,
.ev-dialoog .ev-voorwaarden-kop { margin-bottom: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--tekst-licht); }
.ev-sectie-akkoord .ev-voorwaarden-lijst ,
.ev-dialoog .ev-voorwaarden-lijst { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.ev-sectie-akkoord .ev-voorwaarden-lijst li ,
.ev-dialoog .ev-voorwaarden-lijst li { display: inline-flex; align-items: baseline; gap: 4px; padding: 0; border: 0; font-size: 0.8125rem; }
.ev-sectie-akkoord .ev-voorwaarden-lijst li a ,
.ev-dialoog .ev-voorwaarden-lijst li a { color: var(--hoofdkleur-tekst); font-weight: 600; }
.ev-sectie-akkoord .ev-voorwaarden-lijst li span ,
.ev-dialoog .ev-voorwaarden-lijst li span { font-size: 0.6875rem; color: var(--tekst-licht); }

.ev-sectie-akkoord .ev-handtekening { margin-top: 22px; padding: 0; background: none; border: 0; }
.ev-sectie-akkoord .ev-handtekening-label { margin-bottom: 8px; font-size: 0.9375rem; font-weight: 600; color: var(--tekst); }
.ev-sectie-akkoord .ev-handtekening-canvas-wrap {
  border: 1.5px dashed color-mix(in srgb, var(--hoofdkleur) 35%, var(--rand));
  border-radius: 12px;
  background: color-mix(in srgb, var(--hoofdkleur) 3%, var(--wit));
  overflow: hidden;
}
.ev-sectie-akkoord .ev-handtekening-hint { margin-top: 8px; font-size: 0.8125rem; color: var(--tekst-licht); }

@media (max-width: 700px) {
  .ev-overzicht-rij { grid-template-columns: 1fr; gap: 2px; }
  .ev-sectie-akkoord .ev-voorwaarden, .ev-dialoog .ev-voorwaarden { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ev-akkoord { transition: none; }
}

/* ============================================================
   STAP 3: ALGEMEEN E-MAILADRES ZAKELIJK (2026-09-14)
   Toelichting staat altijd open onder het veld, geen tooltip:
   de klant moet hem lezen vóór hij zijn eigen adres typt.
   ============================================================ */
.ev-veld-uitleg { margin: 2px 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--tekst-licht); }
.ev-veld-waarschuwing {
  margin: 4px 0 0; padding: 8px 10px; border-radius: 10px;
  font-size: 0.8125rem; line-height: 1.45;
  background: color-mix(in srgb, var(--waarschuwing, #D97706) 9%, var(--wit));
  color: color-mix(in srgb, var(--waarschuwing, #D97706) 72%, black);
}
.ev-formulier .ev-veld-waarschuwing[hidden] { display: none !important; }

/* ============================================================
   LOGOGROOTTE (2026-09-29)
   Elk logo krijgt ongeveer hetzelfde oppervlak als dat van Live Energy; de
   breedte rekent aanmeldmodule.js uit (snijLogosBij) en zet hij als
   --logo-begin-b / --logo-kop-b op de module. De hoogte volgt uit het logo.
   Zonder meting (logo niet te laden) gelden de oude maximale maten.
   ============================================================ */
.ev-logo-gemeten .ev-begin-logo {
  width: var(--logo-begin-b); height: auto;
  max-height: none; max-width: 100%;
}
.ev-logo-gemeten .ev-header-logo {
  width: var(--logo-kop-b); height: auto;
  max-height: 40px; max-width: 100%;
}
@media (max-width: 600px) {
  .ev-logo-gemeten .ev-header-logo { width: calc(var(--logo-kop-b) * 0.85); max-height: 34px; }
}

/* ============================================================
   METERSTANDEN ZONDER SLIMME METER (2026-10-01)
   Verschijnt onder 'Heb je een slimme …meter?' zodra de klant 'Nee' kiest.
   ============================================================ */
.ev-meterstanden {
  margin: 4px 0 18px;
  padding: 16px 18px 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--hoofdkleur) 3%, #FFFFFF);
}
.ev-meterstanden-kop {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 0.9375rem; font-weight: 700; color: var(--tekst);
}
.ev-meterstanden > .ev-veld-uitleg { margin: 4px 0 12px; }
/* Twee kolommen: normaal naast dal, teruglevering normaal naast dal. */
.ev-standen-rij {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}
@media (max-width: 480px) {
  .ev-standen-rij { grid-template-columns: 1fr; }
}
.ev-standen-rij + .ev-standen-rij { margin-top: 4px; }
.ev-meterstanden .ev-veld { margin-bottom: 8px; }
.ev-eenheid { font-weight: 500; color: var(--tekst-licht); }
.ev-veld-label {
  display: block; margin-bottom: 8px;
  font-size: 0.875rem; font-weight: 600; color: var(--tekst);
}
/* De fotoknop is een <label>; de algemene veldlabelregel
   (.ev-hoofdkolom .ev-veld > label) mag hem niet tot blok met marge maken. */
.ev-veld.ev-standfoto-veld > .ev-meterfoto-knop {
  display: inline-flex; align-items: center; gap: 6px;
  width: auto; min-height: 44px; padding: 0 16px; margin-bottom: 0;
  font-size: 0.875rem; font-weight: 600; color: var(--tekst);
}
.ev-standfoto-veld .ev-meterfoto-knop span { display: inline-flex; align-items: center; gap: 6px; }
.ev-meterstanden .ev-meterfoto-lijst:empty { display: none; }
.ev-standfoto-weg {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,0.6); color: #fff;
  font-size: 0.875rem; line-height: 22px; cursor: pointer;
}