/* =========================================================================
   WATTSAVER — variant 2 "Zonneplan-designtaal"
   Statisch prototype. Eén gedeelde stylesheet, tokens bovenaan.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root {
  /* -----------------------------------------------------------------------
     WATTSAVER-MERKPALET (bindend, 1-op-1 uit src/styles.css van de repo).
     Eén accentkleur: navy #0B2A5B. Op donkere vlakken leest navy slecht,
     daar werken we met wit + de navy-tint #E2E8F2.
     ----------------------------------------------------------------------- */
  --navy:        #0B2A5B;   /* primair / CTA */
  --navy-hover:  #08214A;
  --navy-tint:   #E2E8F2;   /* accent op donker, zachte vullingen */

  /* aliassen: de rest van de stylesheet spreekt de merkkleuren via deze
     namen aan, zodat één plek het palet bepaalt. */
  --green-800: #08214A;
  --green-700: #0B2A5B;
  --green-600: #08214A;
  --green-500: #0B2A5B;
  --green-400: #E2E8F2;
  --green-300: #E2E8F2;
  --green-100: #E2E8F2;
  --green-50:  #E2E8F2;

  /* donkere oppervlakken */
  --ink-950: #060907;
  --ink-900: #0A0F0C;   /* repo: --footer */
  --ink-850: #101713;
  --ink-800: #17271D;   /* repo: --ink */
  --ink-700: #1F3128;

  /* tekst */
  --text-1: #17271D;    /* repo: --ink */
  --text-2: #333D38;    /* repo: --body */
  --text-3: #6B756F;    /* repo: --grey */
  --text-inv: #FFFFFF;

  /* vlakken en lijnen */
  --surface: #FFFFFF;
  --surface-2: #F9F9F9;  /* repo: --canvas */
  --surface-3: #EFF1F0;
  --line: #E7E9E8;       /* repo: --border */
  --line-strong: #D5D9D7;
  --line-inv: rgba(255, 255, 255, 0.14);

  /* radii: 12px basis, 20-24px voor grote kaarten */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* schaduw */
  --sh-sm: 0 1px 2px rgba(23, 39, 29, 0.05), 0 2px 8px rgba(23, 39, 29, 0.04);
  --sh-md: 0 4px 12px rgba(23, 39, 29, 0.06), 0 14px 34px -12px rgba(23, 39, 29, 0.14);
  --sh-lg: 0 10px 24px rgba(23, 39, 29, 0.08), 0 40px 80px -32px rgba(23, 39, 29, 0.26);
  --sh-green: 0 10px 30px -12px rgba(11, 42, 91, 0.5);

  /* ritme */
  --gutter: 24px;
  --maxw: 1240px;
  --maxw-narrow: 920px;
  --section-y: clamp(72px, 8vw, 128px);

  /* motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --nav-h: 76px;
}

/* ------------------------------------------------------------- resetlaag */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" on;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--green-300); color: var(--ink-900); }

:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------ typografie */
h1, h2, h3, h4 {
  color: var(--text-1);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.85rem, 6.6vw, 5.6rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: 800;
}

.h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.04em; }
.h2 { font-size: clamp(1.95rem, 3.5vw, 3.05rem); letter-spacing: -0.04em; }
.h3 { font-size: clamp(1.35rem, 1.8vw, 1.7rem); letter-spacing: -0.03em; line-height: 1.15; }
.h4 { font-size: 1.0625rem; letter-spacing: -0.02em; line-height: 1.3; }

.lead {
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.6;
  color: var(--text-2);
}

.muted { color: var(--text-3); }
.bg-dark .lead, .cta-band .lead, .page-hero .lead { color: rgba(255, 255, 255, 0.76); }
.bg-dark .muted, .cta-band .muted, .page-hero .muted { color: rgba(255, 255, 255, 0.55); }
.small { font-size: 0.875rem; line-height: 1.6; }
.xs { font-size: 0.78125rem; line-height: 1.55; }
.num { font-variant-numeric: tabular-nums; }
.accent { color: var(--green-600); }
.on-dark .accent, .dark-section .accent { color: var(--green-400); }

/* --------------------------------------------------------------- layout */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: var(--maxw-narrow); }
.wrap-wide { max-width: 1400px; }

.section { padding-block: var(--section-y); }
.section-sm { padding-block: clamp(52px, 5.5vw, 84px); }
.bg-soft { background: var(--surface-2); }
.bg-tint { background: var(--green-50); }
.bg-dark { background: var(--ink-900); color: rgba(255, 255, 255, 0.72); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: #fff; }

.grid { display: grid; gap: clamp(24px, 3vw, 40px); }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); }
.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* asymmetrische kolommen die op tablet/mobiel netjes onder elkaar vallen */
.split { display: grid; gap: clamp(24px, 3vw, 40px); }
.split--4060 { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
.split--7030 { grid-template-columns: 1.35fr 0.65fr; align-items: center; }
.flowcols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(30px, 4vw, 60px); }
.sticky-side { position: sticky; top: calc(var(--nav-h) + 90px); }
@media (max-width: 900px) {
  .split--4060, .split--7030, .flowcols { grid-template-columns: 1fr; }
  .flowcols { gap: 0; }
  .sticky-side { position: static; }
}
.stack-8 > * + * { margin-top: 8px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }

/* --------------------------------------------------------------- eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-700);
}
.eyebrow .ico { width: 15px; height: 15px; color: var(--green-500); flex: none; }
.bg-dark .eyebrow, .on-dark .eyebrow { color: var(--green-400); }
.bg-dark .eyebrow .ico, .on-dark .eyebrow .ico { color: var(--green-400); }
/* de donkere subpagina-hero kreeg nog het navy van de lichte vlakken mee en
   was daardoor vrijwel onleesbaar; hier dezelfde tint als op .bg-dark */
.page-hero .eyebrow { color: var(--navy-tint); }
.page-hero .eyebrow .ico { color: var(--navy-tint); }

.section-head { max-width: 46ch; }
.section-head .h2 { margin-top: 14px; }
.section-head p { margin-top: 18px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* --------------------------------------------------------------- knoppen */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  white-space: nowrap;
}
.btn .ico { width: 17px; height: 17px; flex: none; transition: transform 0.25s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }

.btn-primary {
  background: var(--green-500);
  color: #fff;
  box-shadow: var(--sh-green);
}
.btn-primary:hover { background: var(--green-600); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }
/* Badr 21 okt: uitgeschakelde knop (bv. Zoek subsidies) is vaal; zodra hij aan kan, krijgt hij de gewone kleur */
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover, .btn[disabled]:hover { transform: none; }

.btn-dark { background: var(--ink-900); color: #fff; }
.btn-dark:hover { background: var(--ink-700); transform: translateY(-2px); }

.btn-white { background: #fff; color: var(--text-1); box-shadow: var(--sh-md); }
.btn-white:hover { transform: translateY(-2px); }

.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--text-1);
  background: #fff;
}
.btn-ghost:hover { border-color: var(--green-500); color: var(--green-700); }

.btn-ghost-inv {
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}
.btn-ghost-inv:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); }

.btn-sm { padding: 10px 18px; font-size: 0.8125rem; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--green-700);
}
.link-arrow .ico { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.link-arrow:hover .ico { transform: translateX(4px); }
.on-dark .link-arrow, .bg-dark .link-arrow { color: var(--green-400); }

.link-underline { color: var(--green-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.link-underline:hover { color: var(--green-800); }

/* ------------------------------------------------------------------ chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--r-pill);
  padding: 7px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  background: #fff;
  color: var(--text-1);
  box-shadow: var(--sh-sm);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); flex: none; }
.chip-green { background: var(--green-500); color: #fff; box-shadow: none; }
.chip-outline { background: transparent; border: 1px solid var(--line); box-shadow: none; color: var(--text-3); font-weight: 600; }
.chip-dark { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: #fff; box-shadow: none; }

.badge-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-pill);
  background: var(--green-100);
  color: var(--green-800);
  padding: 5px 11px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ ster */
.stars { display: inline-flex; gap: 2px; color: #F5B544; }
.stars .ico { width: 15px; height: 15px; }

/* =============================================================== NAVIGATIE */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 90;
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav--solid,
.nav.is-scrolled {
  background: rgba(10, 15, 12, 0.9);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.nav-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--gutter);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-logo { flex: none; }
.nav-logo img { height: 42px; width: auto; max-width: none; }
/* heel smal scherm: logo in verhouding kleiner, nooit in elkaar gedrukt */
@media (max-width: 380px) {
  .nav-logo img { height: 36px; }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: 14px;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 13px;
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav-link .ico { width: 13px; height: 13px; transition: transform 0.25s var(--ease); }
.nav-link[aria-expanded="true"] .ico { transform: rotate(180deg); }
.nav-link.is-active { color: #fff; }
.nav-link.is-active::after {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green-400);
  margin-left: 2px;
}

.nav-right { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }
.nav-phone {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.875rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
.nav-phone:hover { color: #fff; }
.nav-phone .ico { width: 15px; height: 15px; }

/* mega */
.nav-mega-wrap { position: relative; }
.nav-mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  translate: -50% 0;
  width: min(761px, calc(100vw - 40px)); /* 761: dan zijn de drie thumbs 207 px, hele pixels */
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 22px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.nav-mega-wrap.is-open .nav-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nav-mega-card {
  border-radius: var(--r-md);
  padding: 12px;
  transition: background-color 0.2s var(--ease);
}
.nav-mega-card:hover { background: var(--surface-2); }
.nav-mega-card .thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: transparent; /* geen tegel: packshot op wit staat direct op het witte menu */
}
.nav-mega-card .thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s var(--ease); mix-blend-mode: multiply; } /* multiply: wit van de packshot valt weg, product lijkt vrijstaand */
.nav-mega-card:hover .thumb img { transform: scale(1.05); }
.nav-mega-card .cap { display: block; font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-700); font-weight: 700; margin-top: 12px; }
.nav-mega-card .ttl { display: block; font-weight: 800; color: var(--text-1); letter-spacing: -0.025em; margin-top: 3px; }
.nav-mega-card .sub { display: block; font-size: 0.8125rem; color: var(--text-3); line-height: 1.4; margin-top: 2px; }
.nav-mega-card .thumb { display: block; }
.nav-mega-foot {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 22px;
}
.nav-mega-foot a, .nav-mega-foot button {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-xs);
  font-size: 0.875rem; font-weight: 600; color: var(--text-1);
  text-align: left;
  transition: background-color 0.18s var(--ease);
}
.nav-mega-foot a:hover, .nav-mega-foot button:hover { background: var(--surface-2); }
.nav-mega-foot .ico { width: 16px; height: 16px; color: var(--green-600); flex: none; }

/* burger */
.burger {
  display: none;
  width: 42px; height: 42px;
  border-radius: var(--r-pill);
  align-items: center; justify-content: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.burger .ico { width: 19px; height: 19px; }
.burger .ico-close { display: none; }
body.menu-open .burger .ico-open { display: none; }
body.menu-open .burger .ico-close { display: block; }

.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 89;
  background: var(--ink-950);
  padding: 20px var(--gutter) 44px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; }
.mobile-menu .m-label {
  font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4); font-weight: 700;
  margin: 22px 0 10px;
}
.m-prod {
  display: flex; align-items: center; gap: 14px;
  padding: 10px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.045);
  margin-bottom: 8px;
}
.m-prod img { width: 62px; height: 48px; object-fit: contain; background: #fff; border-radius: var(--r-xs); flex: none; }
.m-prod .t { color: #fff; font-weight: 700; letter-spacing: -0.02em; }
.m-prod .s { color: rgba(255, 255, 255, 0.5); font-size: 0.78125rem; line-height: 1.35; }
.m-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 2px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.m-link .ico { width: 15px; height: 15px; color: rgba(255, 255, 255, 0.35); }

/* ==================================================================== HERO */
.hero {
  position: relative;
  min-height: min(920px, 100svh);
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(10, 15, 12, 0.82) 0%, rgba(10, 15, 12, 0.34) 42%, rgba(10, 15, 12, 0.9) 100%),
    linear-gradient(to right, rgba(10, 15, 12, 0.7) 0%, rgba(10, 15, 12, 0.1) 62%);
}
.hero-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--nav-h) + 72px) var(--gutter) 40px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff;
  color: var(--navy);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.7);
}
.hero-badge .ico { width: 15px; height: 15px; }
.hero h1 { color: #fff; margin-top: 22px; max-width: 15ch; }
.hero p.lead { color: rgba(255, 255, 255, 0.86); margin-top: 22px; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 34px; }
.hero-review {
  display: flex; align-items: center; gap: 12px;
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.hero-review .r-score { color: #fff; font-weight: 800; font-size: 0.9375rem; letter-spacing: -0.02em; }
.hero-review .r-sub { color: rgba(255, 255, 255, 0.62); font-size: 0.75rem; }

.hero-stats {
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.hero-stats .n {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
}
.hero-stats .l {
  margin-top: 9px;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}

/* --------------------------------------------------------- logo/trustbalk */
.trustbar { background: var(--ink-950); border-top: 1px solid rgba(255,255,255,0.07); }
.trustbar .row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px;
  padding-block: 20px;
}
.trustbar .item {
  display: inline-flex; align-items: center; gap: 9px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.8125rem; font-weight: 600;
}
.trustbar .item .ico { width: 16px; height: 16px; color: var(--green-400); }
/* past niet op één regel: twee bij twee, op smal scherm onder elkaar (nooit één los item) */
@media (max-width: 1040px) {
  .trustbar .row { display: grid; grid-template-columns: repeat(2, max-content); }
}
@media (max-width: 620px) {
  .trustbar .row { grid-template-columns: 1fr; }
}

/* ================================================================== INTRO */
.statement {
  font-size: clamp(1.65rem, 3.1vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.14;
  color: var(--text-1);
  text-wrap: balance;
}
.statement span { color: var(--text-3); }

/* ============================================================ FOTO-RIJ */
.media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
}
.media-row--rev .media-col { order: 2; }
.media-frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--sh-md);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.media-frame--tall img { aspect-ratio: 4 / 5; }
.media-frame--wide img { aspect-ratio: 16 / 9; }
.media-frame .float-chip { position: absolute; left: 16px; bottom: 16px; }

/* twee subblokken onder een sectiekop, zoals de referentie-rijen */
.subpoints { margin-top: 30px; display: grid; gap: 22px; max-width: 46ch; }
.subpoints h3 { font-size: 1.0625rem; letter-spacing: -0.025em; }
.subpoints p { margin-top: 7px; font-size: 0.9375rem; color: var(--text-2); }
.subpoints .link-arrow { margin-top: 10px; font-size: 0.875rem; }

/* donker statpaneel als beeldvervanger in een foto/tekst-rij */
.stat-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(155deg, var(--ink-850) 0%, var(--ink-950) 100%);
  color: rgba(255, 255, 255, 0.68);
  padding: clamp(30px, 4vw, 52px);
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--sh-md);
}
.stat-panel::before {
  content: "";
  position: absolute;
  inset: auto -90px -140px auto;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(11, 42, 91, 0.95) 0%, transparent 70%);
}
.stat-panel > * { position: relative; }
.stat-panel .big {
  font-size: clamp(3.25rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #fff;
}
.stat-panel .cap {
  margin-top: 12px;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy-tint);
}
.stat-panel .rule { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.9375rem; }

/* mascotte Wattje */
.wattje { display: block; user-select: none; pointer-events: none; }
.tool-stage { position: relative; }
.wattje--tool {
  position: absolute;
  left: clamp(6px, 2.4vw, 40px);
  bottom: -58px;
  width: clamp(112px, 11vw, 164px);
  z-index: 3;
  filter: drop-shadow(0 22px 26px rgba(23, 39, 29, 0.22));
}
.wattje--faq { width: 124px; margin-top: 28px; }
.wattje--card { width: clamp(130px, 15vw, 200px); margin-inline: auto; }
.modal-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 14px; }
.wattje--modal { width: 104px; }
@media (max-width: 900px) { .wattje--tool { width: 112px; bottom: -42px; } }
@media (max-width: 720px) { .wattje--faq { display: none; } }
@media (max-width: 560px) {
  .wattje--modal { display: none; }
  .modal-hero { grid-template-columns: 1fr; }
}

.spec-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.spec-row .k { font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.spec-row .v { font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-1); margin-top: 6px; }

/* ========================================================= TOOL SHOWCASE */
.tool-shell {
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--ink-850) 0%, var(--ink-950) 100%);
  padding: 14px;
  box-shadow: 0 40px 90px -40px rgba(10, 15, 12, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.tool-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 14px;
}
.tool-bar .dots { display: flex; gap: 6px; }
.tool-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); display: block; }
.tool-bar .dots i:first-child { background: var(--green-500); }
.tool-bar .path {
  margin-inline: auto;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
  padding: 5px 16px;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.tool-body {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  display: grid;
  grid-template-columns: 0.95fr 1.15fr;
}

/* calculator */
.calc-result {
  position: relative;
  background: linear-gradient(165deg, var(--ink-850) 0%, var(--ink-950) 100%);
  color: rgba(255, 255, 255, 0.72);
  padding: clamp(26px, 3vw, 40px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}
.calc-result::before {
  content: "";
  position: absolute;
  width: 380px; height: 380px;
  left: -140px; top: -160px;
  background: radial-gradient(circle, rgba(11, 42, 91, 0.95) 0%, transparent 70%);
  filter: blur(10px);
}
.calc-result::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.55) 1px, transparent 0);
  background-size: 22px 22px;
  opacity: 0.05;
}
.calc-result > * { position: relative; }
.calc-live {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}
.calc-live .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-400);
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.calc-label { margin-top: 26px; font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); }
.calc-big {
  margin-top: 6px;
  font-size: clamp(2.75rem, 5.4vw, 4.25rem);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.calc-note { margin-top: 12px; font-size: 0.78125rem; color: rgba(255, 255, 255, 0.48); }
.calc-stats {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid; gap: 14px;
}
.calc-stats .r { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.9375rem; }
.calc-stats .r span:first-child { color: rgba(255, 255, 255, 0.6); }
.calc-stats .r span:last-child { color: #fff; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.calc-disclaimer { margin-top: 20px; font-size: 0.6875rem; line-height: 1.6; color: rgba(255, 255, 255, 0.4); }

/* tweestaps: eerst instellen, dan "Bereken"; daarna rekent alles live mee */
.calc-result :focus-visible { outline-color: #fff; }
.calc-result::before, .calc-result::after { pointer-events: none; }
.calc-live { align-self: flex-start; }

/* onderin het resultaatvlak staat Wattje (half over de rand van de kaart) met
   daarboven de plek van zijn zin; die ruimte hoort bij het vlak */
.calc-result { padding-bottom: calc(clamp(112px, 11vw, 164px) * 1.02 - 2px); }

/* nog niet berekend: de plek van elk getal, zonder getal */
.calc-val { position: relative; }
[data-stap="instellen"] .calc-val { visibility: hidden; }
[data-stap="instellen"] .calc-val::after {
  content: "";
  visibility: visible;
  position: absolute;
  top: 50%; right: 0;
  width: 4.4em; height: 0.62em;
  margin-top: -0.31em;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.09);
}
[data-stap="instellen"] .calc-big .calc-val::after { left: 0; right: auto; width: 3.3em; height: 0.56em; margin-top: -0.3em; }
[data-stap="instellen"] .calc-live .pulse { animation: none; opacity: 0.35; }
[data-stap="resultaat"] .calc-val { animation: calc-val-in 0.3s var(--ease) both; }
@keyframes calc-val-in { from { opacity: 0; transform: translateY(4px); } }

.calc-actie { margin-top: auto; padding-top: 26px; }
.calc-actie .btn[hidden] { display: none; }
.calc-actie .btn:active { transform: translateY(0); box-shadow: var(--sh-sm); }
[data-stap="resultaat"] .calc-offerte { animation: calc-val-in 0.3s var(--ease) both; }

/* Wattje op zijn oude plek: in rust tot "Bereken", daarna kijkt en wijst hij
   omhoog naar het bedrag en zegt hij zijn zin */
.wattje--tool img { width: 100%; height: auto; transition: opacity 0.25s var(--ease); }
.wattje--tool .wattje-tool-wijs { position: absolute; inset: 0; opacity: 0; }
#calculator[data-stap="resultaat"] ~ .wattje--tool .wattje-tool-rust { opacity: 0; }
#calculator[data-stap="resultaat"] ~ .wattje--tool .wattje-tool-wijs { opacity: 1; }

.calc-zegt {
  position: absolute;
  left: 30%;
  bottom: 93%;
  width: max-content;
  max-width: min(26ch, 64vw);
  margin: 0;
  padding: 10px 15px;
  border-radius: var(--r-sm);
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--sh-sm);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  transform-origin: 18px 100%;
  visibility: hidden;
}
.calc-zegt::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 14px;
  width: 11px; height: 11px;
  background: var(--navy);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  transform: rotate(45deg);
}
#calculator[data-stap="resultaat"] ~ .wattje--tool .calc-zegt { visibility: visible; animation: calc-zegt-in 0.3s var(--ease) 0.25s both; }
@keyframes calc-zegt-in { from { opacity: 0; transform: translateY(6px) scale(0.96); } }

/* de levende Wattje (SVG uit wattje2d.js) op de plek en maat van de tekening;
   de tekening blijft staan als maat en als beeld tot het model geladen is */
.wattje-tool-svg { position: absolute; left: -1.154%; top: -8.511%; width: 102.43%; height: 118.05%; }
.wattje-tool-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
#rekentool .wattje--tool.is-levend .wattje-tool-rust,
#rekentool .wattje--tool.is-levend .wattje-tool-wijs { opacity: 0; transition: none; }
/* de rekenaar: een knipperend streepje op het schermpje van zijn rekenmachine */
.wattje-tool-svg .wr-cursor { animation: wr-knipper 1.1s steps(1, end) infinite; }
@keyframes wr-knipper { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wattje-tool-svg .wr-cursor { animation: none; } }

/* met de levende Wattje staat zijn zin naast hem, rechts van de pijl, en
   verschijnt hij pas als de pijl er staat */
.wattje--tool.is-levend .calc-zegt { left: 89%; bottom: 52%; transform-origin: 0 50%; text-wrap: balance; }
.wattje--tool.is-levend .calc-zegt::after {
  bottom: auto; top: 50%; left: -6px; margin-top: -5.5px;
  border-right: 0; border-left: 1px solid rgba(255, 255, 255, 0.16);
}
#calculator[data-stap="resultaat"] ~ .wattje--tool.is-levend:not(.heeft-pijl) .calc-zegt { visibility: hidden; animation: none; }
#calculator[data-stap="resultaat"] ~ .wattje--tool.is-levend .calc-zegt { animation: calc-zegt-zij 0.3s var(--ease) both; }
@keyframes calc-zegt-zij { from { opacity: 0; transform: translateX(-6px) scale(0.96); } }
@media (prefers-reduced-motion: reduce) {
  #calculator[data-stap="resultaat"] ~ .wattje--tool .calc-zegt { animation: none; }
}

/* tablet: resultaat en formulier naast elkaar, het formulier krijgt de ruimte */
@media (min-width: 768px) and (max-width: 1024px) {
  #calculator .tool-body { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  #calculator .calc-big { font-size: clamp(2.75rem, 5.2vw, 4rem); }
  #calculator .pick-row { gap: 6px; }
  #calculator .pick { padding: 9px 13px; }
}
@media (max-width: 900px) {
  .calc-result { padding-bottom: calc(112px * 1.02 + 14px); }
}
/* telefoon: eerst invullen, daarna het bedrag */
@media (max-width: 767px) {
  #calculator .calc-form { order: -1; }
}
/* telefoon: Wattje klein linksonder, zijn zin ernaast */
@media (max-width: 720px) {
  .wattje--tool { width: 96px; bottom: -36px; left: 8px; }
  .calc-result { padding-bottom: 92px; }
  .wattje--tool .calc-zegt { font-size: 0.8125rem; padding: 9px 13px; max-width: min(24ch, calc(100vw - 170px)); }
}
/* smal resultaatvlak (kleine telefoon, tablet naast het formulier): zin op twee regels */
@media (max-width: 400px), (min-width: 768px) and (max-width: 1100px) {
  .wattje--tool.is-levend .calc-zegt { max-width: 11.5em; bottom: 58%; }
}

/* na "Bereken": het formulier gaat weg en het resultaat neemt de hele kaart
   over; "Opnieuw berekenen" brengt het formulier terug (site.js regelt de
   beweging, hier staan de standen) */
.calc-opnieuw {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 6px;
  border-radius: var(--r-sm);
  font-size: 0.875rem; font-weight: 700; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.74);
  transition: color 0.2s var(--ease);
}
.calc-opnieuw .ico { width: 16px; height: 16px; flex: none; transition: transform 0.2s var(--ease); }
.calc-opnieuw:hover { color: #fff; }
.calc-opnieuw:hover .ico { transform: translateX(-3px); }
.calc-opnieuw:active { color: rgba(255, 255, 255, 0.6); }
.calc-opnieuw:active .ico { transform: translateX(-1px); }
.calc-opnieuw:disabled { color: rgba(255, 255, 255, 0.4); cursor: default; }
.calc-opnieuw:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.calc-opnieuw[hidden] { display: none; }

/* de inhoud van het vlak wisselt van indeling: kort opbouwen, kort wegvallen */
#calculator.is-wissel .calc-result > * { animation: calc-wissel 0.34s var(--ease-out) both; }
#calculator.is-wissel .calc-result > .calc-stats { animation-delay: 0.12s; }
#calculator.is-wissel .calc-result > .calc-actie,
#calculator.is-wissel .calc-result > .calc-disclaimer { animation-delay: 0.08s; }
@keyframes calc-wissel { from { opacity: 0; transform: translateY(6px); } }
#calculator.is-dicht .calc-result > * { opacity: 0; transition: opacity 0.16s var(--ease); animation: none; }

/* breed en uitgeschoven: geen witte rand meer in de ronde hoeken van de kaart */
#calculator.is-breed.is-vol .tool-body { background: var(--ink-950); }

/* breed (tablet en groter): het formulier blijft onzichtbaar onder het vlak
   staan, zo houdt de kaart precies zijn hoogte */
@media (min-width: 768px) {
  #calculator.is-breed .tool-body > .calc-result { grid-column: 1 / -1; grid-row: 1; z-index: 1; }
  #calculator.is-breed .tool-body > .calc-form { grid-column: 2; grid-row: 1; }
  #calculator.is-breed.is-vol .tool-body > .calc-form { visibility: hidden; }

  #calculator.is-breed .calc-result {
    --wattje-ruimte: calc(clamp(112px, 11vw, 164px) * 1.02 - 2px - clamp(26px, 3vw, 40px));
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto auto auto 1fr minmax(var(--wattje-ruimte), auto);
    column-gap: clamp(28px, 4vw, 72px);
    padding-bottom: clamp(26px, 3vw, 40px);
  }
  #calculator.is-breed .calc-live { grid-column: 1; grid-row: 1; justify-self: start; }
  #calculator.is-breed .calc-label { grid-column: 1; grid-row: 3; margin-top: 0; font-size: 0.9375rem; }
  #calculator.is-breed .calc-big { grid-column: 1; grid-row: 4; margin-top: 10px; font-size: clamp(3.75rem, 8.6vw, 7.25rem); }
  #calculator.is-breed .calc-note { grid-column: 1; grid-row: 5; margin-top: 16px; font-size: 0.8125rem; }
  #calculator.is-breed .calc-actie {
    grid-column: 1; grid-row: 6;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
    padding-top: 32px;
  }
  #calculator.is-breed .calc-offerte { width: auto; flex: 1 1 240px; max-width: 340px; }

  /* de drie cijfers als eigen kolom van gelijke vakken, van boven tot de kleine lettertjes */
  #calculator.is-breed .calc-stats {
    grid-column: 2; grid-row: 1 / 8;
    margin-top: 0; padding: 0 0 0 clamp(24px, 3vw, 48px);
    border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.12);
    grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 0;
  }
  #calculator.is-breed .calc-stats .r {
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px;
    padding: clamp(14px, 1.8vw, 22px) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  #calculator.is-breed .calc-stats .r:last-child { border-bottom: 0; }
  #calculator.is-breed .calc-stats .r span:last-child { font-size: clamp(1.75rem, 3vw, 2.625rem); line-height: 1.05; letter-spacing: -0.035em; }
  #calculator.is-breed .calc-disclaimer {
    grid-column: 2; grid-row: 8; align-self: end;
    margin-top: 0; padding: 20px 0 0 clamp(24px, 3vw, 48px);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }
}
@media (min-width: 768px) and (max-width: 900px) {
  #calculator.is-breed .calc-result { --wattje-ruimte: calc(112px * 1.02 + 14px - 26px); }
}

/* telefoon: het formulier klapt weg, het resultaat staat alleen in de kaart */
@media (max-width: 767px) {
  #calculator.is-breed:not(.is-inklap) .tool-body > .calc-form { display: none; }
  #calculator.is-breed .calc-actie { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
  #calculator.is-breed .calc-opnieuw { align-self: center; }
}
/* brede telefoon: knop op maat met "Opnieuw berekenen" ernaast */
@media (min-width: 520px) and (max-width: 767px) {
  #calculator.is-breed .calc-actie { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
  #calculator.is-breed .calc-offerte { width: auto; flex: 0 1 340px; }
}

@media (prefers-reduced-motion: reduce) {
  #calculator.is-wissel .calc-result > * { animation: none; }
  #calculator.is-dicht .calc-result > * { transition: none; }
}

.calc-form { padding: clamp(26px, 3vw, 40px); }
.calc-form .f-label {
  font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700;
}
.pick-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pick {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  padding: 10px 17px;
  font-size: 0.875rem; font-weight: 700;
  color: var(--text-1);
  transition: all 0.2s var(--ease);
}
.pick .ico { width: 15px; height: 15px; }
.pick:hover { border-color: var(--green-400); }
.pick[aria-pressed="true"] {
  background: var(--green-500); border-color: var(--green-500); color: #fff;
  box-shadow: 0 6px 18px -8px rgba(11, 42, 91, 0.8);
}

/* rekentool: compact formulier. Alle vragen op één vaste tussenruimte; de
   aantallen staan naast de knoppen waar ze bij horen. Het formulier is een
   container: of iets naast of onder de knoppen staat hangt af van de echte
   breedte van het formulier, niet van het scherm */
#calculator .calc-form {
  --calc-tussen: 18px;
  padding: clamp(24px, 2.6vw, 34px) clamp(22px, 2.5vw, 34px);
  container: calc-form / inline-size;
}
#calculator .calc-intro { margin-top: 6px; }
#calculator .calc-vraag { margin-top: var(--calc-tussen); }
#calculator .calc-vraag .pick-row { margin-top: 10px; }
#calculator .field > span { margin-bottom: 6px; }
#calculator input[type="range"] { margin-top: 10px; }
#calculator .seg-grid { margin-top: 8px; }
#calculator .range-legend { margin-top: 5px; }
/* het formulier krijgt op een breed scherm iets meer van de kaart, zodat het
   aantal panelen naast de drie knoppen past */
@media (min-width: 1025px) {
  #calculator .tool-body { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); }
}

/* openklapveld (standaard: een regel onder de knoppen die open schuift) */
#calculator .calc-aantal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.2s var(--ease), opacity 0.2s var(--ease), visibility 0s linear 0.2s;
}
#calculator .calc-aantal.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 0.2s var(--ease), opacity 0.2s var(--ease), visibility 0s;
}
/* de rand van de focus valt binnen het vlak dat bij het inklappen wegknipt */
#calculator .calc-aantal-in { min-height: 0; min-width: 0; overflow: hidden; margin: -6px; padding: 6px; }
#calculator .calc-aantal-rij {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding-top: 10px;
}
#calculator .calc-aantal-rij .t { white-space: nowrap; font-size: 0.8125rem; font-weight: 700; color: var(--text-1); }
#calculator .calc-aantal-rij > .teller { margin-left: auto; }

/* teller: min, getal, plus; knoppen 44 hoog */
#calculator .teller {
  display: inline-flex; align-items: center; flex: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: #fff;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
#calculator .teller:has(.teller-v:focus-visible) { border-color: var(--green-500); box-shadow: 0 0 0 1px var(--green-500), 0 0 0 5px rgba(11, 42, 91, 0.14); }
#calculator .teller-knop {
  display: grid; place-items: center;
  width: 40px; height: 44px;
  border-radius: var(--r-pill);
  color: var(--green-700);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), transform 0.15s var(--ease);
}
#calculator .teller-knop .ico { width: 16px; height: 16px; }
#calculator .teller-knop:hover { background: var(--green-50); }
#calculator .teller-knop:active { transform: scale(0.92); }
#calculator .teller-knop:disabled { color: var(--line-strong); background: none; cursor: default; transform: none; }
#calculator .teller-v {
  min-width: 2.6ch;
  text-align: center;
  font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--green-700);
  font-variant-numeric: tabular-nums;
  cursor: default;
}
#calculator .teller-v:focus-visible { outline: none; }

/* aantal panelen erbij: berekenen of invullen, met de teller direct rechts
   naast "Invullen" (schuift in de breedte open). Alleen bewaard, rekent nog
   niet mee */
#calculator .calc-wil-knoppen { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
#calculator .calc-keuze {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
}
#calculator .calc-keuze-knop {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: #fff;
  font-size: 0.8125rem; font-weight: 700; line-height: 1.25;
  white-space: nowrap;
  color: var(--text-3);
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.15s var(--ease);
}
#calculator .calc-keuze-knop:hover { border-color: var(--green-400); color: var(--text-1); }
#calculator .calc-keuze-knop:active { transform: scale(0.98); }
#calculator .calc-keuze-knop[aria-pressed="true"] { background: var(--green-50); border-color: var(--green-500); color: var(--green-800); }
#calculator .calc-keuze-knop:disabled { color: var(--line-strong); border-color: var(--line); background: #fff; cursor: default; transform: none; }

/* energiecontract: twee keuzes uit dezelfde familie als de productknoppen
   van stap 1, even breed. Bij vast schuift de schuif voor het eigen tarief
   eronder open; bij dynamisch blijft alleen de keuze staan */
#calculator .calc-contract .pick-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  width: max-content;
  max-width: 100%;
}
#calculator .calc-contract .pick { justify-content: center; }
#calculator .calc-tarief {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.22s var(--ease), opacity 0.18s var(--ease), visibility 0s linear 0.22s;
}
#calculator .calc-tarief.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 0.22s var(--ease), opacity 0.2s var(--ease) 0.04s, visibility 0s;
}
/* de rand van de focus en de knop van de schuif vallen binnen het vlak dat bij het inklappen wegknipt */
#calculator .calc-tarief-in {
  min-height: 0;
  overflow: hidden;
  margin: 0 -6px -6px;
  padding: calc(var(--calc-tussen) * 0.8) 6px 6px;
}
@media (prefers-reduced-motion: reduce) {
  #calculator .calc-tarief, #calculator .calc-tarief.is-open { transition: none; }
}
#calculator .calc-aantal--teller {
  grid-template-rows: 1fr;
  grid-template-columns: 0fr;
  transition: grid-template-columns 0.2s var(--ease), opacity 0.2s var(--ease), visibility 0s linear 0.2s;
}
#calculator .calc-aantal--teller.is-open {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  transition: grid-template-columns 0.2s var(--ease), opacity 0.2s var(--ease), visibility 0s;
}
#calculator .calc-aantal--teller > .calc-aantal-in { margin-left: 0; padding-left: 0; }
#calculator .calc-aantal--teller .teller { margin-left: 8px; }

/* tablet en smal: "Hoeveel panelen erbij?" op een eigen regel, knoppen eronder */
@container calc-form (max-width: 30.5rem) {
  #calculator .calc-wil .calc-aantal-rij > .t { flex: 1 0 100%; }
  #calculator .calc-wil-knoppen { justify-content: flex-start; }
}
/* de twee keuzes zijn een hele zin: de vraag altijd op een eigen regel, de
   keuzes eronder over de hele breedte in twee gelijke kolommen, de teller
   schuift rechts ernaast open. Een lange keuze loopt netjes over twee regels */
#calculator .calc-wil .calc-aantal-rij > .t { flex: 1 0 100%; }
#calculator .calc-wil-knoppen { flex: 1 1 100%; justify-content: flex-start; }
#calculator .calc-wil .calc-keuze { flex: 1 1 0; min-width: 0; }
#calculator .calc-wil .calc-aantal--teller { flex: none; }
#calculator .calc-wil .calc-keuze-knop { white-space: normal; text-wrap: balance; }
/* smal formulier: de keuzes hebben de hele regel nodig, dus de teller schuift
   rechts op de regel van de vraag open */
@container calc-form (max-width: 25.5rem) {
  #calculator .calc-wil-knoppen { display: contents; }
  #calculator .calc-wil .calc-aantal-rij > .t { flex: 1 1 auto; order: 1; }
  #calculator .calc-wil .calc-aantal--teller {
    order: 2;
    grid-template-rows: 0fr;
    grid-template-columns: 0fr;
    transition: grid-template-rows 0.2s var(--ease), grid-template-columns 0.2s var(--ease), opacity 0.2s var(--ease), visibility 0s linear 0.2s;
  }
  #calculator .calc-wil .calc-aantal--teller.is-open {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    transition: grid-template-rows 0.2s var(--ease), grid-template-columns 0.2s var(--ease), opacity 0.2s var(--ease), visibility 0s;
  }
  #calculator .calc-wil .calc-keuze { order: 3; flex: 1 0 100%; }
  /* de keuzes van twee regels blijven even hoog als de andere knoppen, zodat de stap niet hoger wordt dan nodig */
  #calculator .calc-wil .calc-keuze-knop { min-height: 40px; padding: 4px 8px; line-height: 1.2; }
  #calculator .calc-wil .calc-aantal-rij { row-gap: 6px; }
}

/* telefoon: de twee keuzes over de hele breedte, de teller schuift eronder open */
@container calc-form (max-width: 19.99rem) {
  #calculator .calc-wil-knoppen { flex: 1 1 100%; flex-direction: column; align-items: stretch; }
  #calculator .calc-aantal--teller {
    grid-template-columns: 1fr;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s var(--ease), opacity 0.2s var(--ease), visibility 0s linear 0.2s;
  }
  #calculator .calc-aantal--teller.is-open {
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.2s var(--ease), opacity 0.2s var(--ease), visibility 0s;
  }
  #calculator .calc-aantal--teller > .calc-aantal-in { display: flex; justify-content: flex-end; margin-left: -6px; padding-left: 6px; }
  #calculator .calc-aantal--teller .teller { margin: 8px 0 0; }
}

/* breed genoeg: het aantal zonnepanelen staat rechts op de regel van de drie
   knoppen, met zijn label rechts op de regel van de vraag erboven */
@container calc-form (min-width: 37rem) {
  #calculator .calc-heeft {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
  }
  #calculator .calc-heeft > .f-label { grid-area: 1 / 1; }
  #calculator .calc-heeft > .pick-row { grid-area: 2 / 1; align-self: center; }
  #calculator #c-zon-veld {
    grid-column: 2; grid-row: 1 / 3;
    grid-template-rows: subgrid;
    transform: translateX(6px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
  }
  #calculator #c-zon-veld.is-open {
    transform: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s;
  }
  #calculator #c-zon-veld .calc-aantal-in,
  #calculator #c-zon-veld .calc-aantal-rij { display: contents; }
  #calculator #c-zon-veld .t {
    grid-row: 1; justify-self: end;
    display: flex; justify-content: flex-end; width: 0;
    font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-3); font-weight: 700;
  }
  #calculator #c-zon-veld .teller { grid-row: 2; align-self: center; margin: 10px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  #calculator .calc-aantal, #calculator .calc-aantal.is-open,
  #calculator #c-zon-veld, #calculator #c-zon-veld.is-open,
  #calculator .calc-aantal--teller, #calculator .calc-aantal--teller.is-open,
  #calculator .teller-knop, #calculator .calc-keuze-knop { transition: none; }
}

/* naast het formulier: het resultaatvlak groeit mee met de vragen; het bedrag
   met zijn cijfers staat midden tussen de kop van het vlak en "Bereken" */
@media (min-width: 768px) {
  #calculator:not(.is-breed) .calc-live { margin-bottom: 26px; }
  #calculator:not(.is-breed) .calc-label { margin-top: auto; }
}

/* ============================================ REKENTOOL PAST IN HET VENSTER */
/* --lucht als echte lengte: site.js leest hem uit om de sprong naar de kaart recht te zetten */
@property --lucht { syntax: "<length>"; inherits: true; initial-value: 24px; }
/*
   De kaart staat altijd helemaal in beeld, met lucht boven en onder: zijn
   hoogte is het venster min de menubalk min twee keer --lucht (op een groot
   scherm nooit hoger dan nodig). Alle maten binnen de kaart schalen mee met
   die beschikbare hoogte (--kh), zodat er niets afvalt en niets hoeft te
   scrollen. Het formulier staat in drie stappen in hetzelfde vak. */
#rekentool {
  --lucht: 24px;
  --kh: calc(100vh - var(--nav-h) - 2 * var(--lucht));
  /* de link #rekentool landt op de kaart, niet op de kop van de sectie:
     --reken-sprong is de afstand van de sectie tot de kaart (site.js) */
  scroll-margin-top: calc(var(--lucht) - 16px - var(--reken-sprong, 0px));
}
@supports (height: 100svh) {
  #rekentool { --kh: calc(100svh - var(--nav-h) - 2 * var(--lucht)); }
}

#rekentool .tool-stage {
  --kaart-max: 560px;
  --shell-pad: clamp(6px, calc(var(--kh) * 0.026), 14px);
  --res-pad: clamp(18px, min(3vw, calc(var(--kh) * 0.062)), 40px);
  --wj-l: clamp(6px, 2.4vw, 40px);
  --wj-w: clamp(76px, min(11vw, calc(var(--kh) * 0.23)), 164px);
  --wj-onder: calc(var(--lucht) / 2);
  /* hoeveel van Wattje binnen het resultaatvlak staat (beeld is 520 x 564) */
  --wj-binnen: calc(var(--wj-w) * 1.0846 - var(--wj-onder) - var(--shell-pad));
}
#calculator {
  height: min(var(--kh), var(--kaart-max));
  min-height: min-content;
  display: flex;
  flex-direction: column;
  padding: var(--shell-pad);
}
#calculator .tool-body { flex: 1 1 auto; min-height: min-content; grid-template-rows: 1fr; }

/* Wattje staat linksonder en steekt een klein stukje over de rand, binnen de lucht */
#rekentool .wattje--tool {
  left: var(--wj-l);
  bottom: calc(-1 * var(--wj-onder));
  width: var(--wj-w);
}

/* ---------------------------------------------- resultaatvlak (instellen) */
#calculator .calc-result { padding: var(--res-pad); min-height: min-content; }
#calculator:not(.is-breed) .calc-live { margin-bottom: clamp(10px, calc(var(--kh) * 0.04), 26px); }
#calculator .calc-label { font-size: clamp(0.8125rem, calc(var(--kh) * 0.026), 0.875rem); }
#calculator .calc-big { font-size: clamp(2.25rem, min(5.4vw, calc(var(--kh) * 0.12)), 4.25rem); }
#calculator .calc-note { margin-top: clamp(6px, calc(var(--kh) * 0.02), 12px); }
#calculator .calc-stats {
  margin-top: clamp(12px, calc(var(--kh) * 0.045), 26px);
  padding-top: clamp(12px, calc(var(--kh) * 0.038), 22px);
  gap: clamp(6px, calc(var(--kh) * 0.024), 14px);
}
#calculator[data-stap="instellen"] .calc-actie { display: none; }
/* de kleine lettertjes staan rechts naast Wattje, onderaan het vlak */
#calculator:not(.is-breed) .calc-disclaimer {
  display: flex;
  align-items: flex-end;
  min-height: calc(var(--wj-binnen) - var(--res-pad));
  margin-top: auto;
  padding-top: clamp(12px, calc(var(--kh) * 0.035), 20px);
  padding-left: calc(var(--wj-l) + var(--wj-w) - var(--shell-pad) - var(--res-pad) + 14px);
}

/* ----------------------------------------------- resultaatvlak (breed) */
@media (min-width: 768px) {
  #calculator.is-breed .calc-result {
    --wattje-ruimte: calc(var(--wj-binnen) - var(--res-pad) + 6px);
    padding-bottom: var(--res-pad);
  }
  #calculator.is-breed .calc-big { font-size: clamp(3rem, min(8.6vw, calc(var(--kh) * 0.2)), 7.25rem); }
  #calculator.is-breed .calc-note { margin-top: clamp(8px, calc(var(--kh) * 0.028), 16px); }
  #calculator.is-breed .calc-actie { padding-top: clamp(14px, calc(var(--kh) * 0.05), 32px); }
  #calculator.is-breed .calc-stats .r { padding: clamp(10px, min(1.8vw, calc(var(--kh) * 0.035)), 16px) 0; }
  #calculator.is-breed .calc-stats .r span:last-child { font-size: clamp(1.5rem, min(3vw, calc(var(--kh) * 0.07)), 2.625rem); }
  #calculator.is-breed .calc-disclaimer { padding-top: clamp(12px, calc(var(--kh) * 0.035), 20px); }
}

/* ---------------------------------------------------- formulier in stappen */
#calculator .calc-form {
  --calc-tussen: clamp(10px, calc(var(--kh) * 0.046), 26px);
  --kop-fs: clamp(1.125rem, min(1.8vw, calc(var(--kh) * 0.05)), 1.7rem);
  --form-py: clamp(14px, min(2.6vw, calc(var(--kh) * 0.05)), 34px);
  --form-px: clamp(14px, 2.5vw, 34px);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--form-py) var(--form-px);
}
#calculator .calc-kop .h3 { font-size: var(--kop-fs); }
#calculator .calc-intro { margin-top: 4px; font-size: clamp(0.78125rem, calc(var(--kh) * 0.026), 0.875rem); line-height: 1.5; }

/* voortgang: drie streepjes en de stap */
#calculator .calc-voortgang {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(10px, calc(var(--kh) * 0.03), 18px);
}
#calculator .calc-stipjes { display: flex; gap: 5px; }
#calculator .calc-stipjes i {
  display: block;
  width: 22px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: background-color 0.25s var(--ease);
}
#calculator .calc-stipjes i.is-aan { background: var(--navy); }
#calculator .calc-stap-t {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* de drie stappen liggen in hetzelfde vak: het vak is zo hoog als de
   hoogste stap, dus de kaart springt niet bij het wisselen */
#calculator .calc-stappen {
  display: grid;
  flex: 1 0 auto;
}
#calculator .calc-stap {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(14px);
  transition: opacity 0.12s var(--ease), transform 0.12s var(--ease), visibility 0s linear 0.12s;
}
#calculator .calc-stap.is-voor { transform: translateX(-14px); }
#calculator .calc-stap.is-actief {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s var(--ease) 0.06s, transform 0.25s var(--ease-out) 0.04s, visibility 0s;
}
#calculator .calc-form.is-direct .calc-stap { transition: none; }

/* knoppen onderin: Terug links, Verder of Bereken rechts */
#calculator .calc-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: clamp(10px, calc(var(--kh) * 0.03), 18px);
  border-top: 1px solid var(--line);
}
/* de stap staat los van de knoppen eronder */
#calculator .calc-stappen { padding-bottom: clamp(12px, calc(var(--kh) * 0.035), 22px); }
/* stap 2: elke vraag op een eigen regel, net als in de andere stappen */
#calculator .calc-stap .cols-2 { grid-template-columns: minmax(0, 1fr); gap: var(--calc-tussen); }
#calculator .calc-verder,
#calculator .calc-go {
  margin-left: auto;
  min-width: 9.5rem;
  padding-block: clamp(12px, calc(var(--kh) * 0.026), 14px);
}
#calculator .calc-verder:active,
#calculator .calc-go:active { transform: translateY(0); box-shadow: var(--sh-sm); }
#calculator .calc-verder:disabled,
#calculator .calc-go:disabled { background: var(--line-strong); color: var(--text-3); box-shadow: none; transform: none; cursor: default; }
#calculator .calc-form:not([data-formstap="3"]) .calc-go,
#calculator .calc-form[data-formstap="3"] .calc-verder,
#calculator .calc-go[hidden] { display: none; }
#calculator .calc-vorige {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 6px;
  margin-left: -6px;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-3);
  transition: color 0.2s var(--ease);
}
#calculator .calc-vorige .ico { width: 16px; height: 16px; flex: none; transition: transform 0.2s var(--ease); }
#calculator .calc-vorige:hover { color: var(--text-1); }
#calculator .calc-vorige:hover .ico { transform: translateX(-3px); }
#calculator .calc-vorige:active { color: var(--navy); }
#calculator .calc-vorige:disabled { color: var(--line-strong); cursor: default; }
#calculator .calc-form[data-formstap="1"] .calc-vorige { display: none; }

/* kleiner vak: de keuzes iets compacter */
#calculator .pick { padding: clamp(8px, calc(var(--kh) * 0.02), 10px) clamp(13px, 1.3vw, 17px); }
#calculator .seg { padding-block: clamp(8px, calc(var(--kh) * 0.018), 10px); }

/* breed genoeg: de voortgang rechts op de regel van de kop */
@container calc-form (min-width: 31rem) {
  #calculator .calc-voortgang {
    position: absolute;
    right: var(--form-px);
    top: var(--form-py);
    height: calc(var(--kop-fs) * 1.15);
    margin-top: 0;
  }
}

/* smal formulier (telefoon, tablet naast het resultaat): de drie keuzes als
   drie gelijke tegels, het icoon boven het woord */
@container calc-form (max-width: 25.5rem) {
  #calculator .pick-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #calculator .pick {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 44px;
    padding: clamp(7px, calc(var(--kh) * 0.016), 10px) 4px;
    border-radius: var(--r-sm);
    font-size: clamp(0.6875rem, 3.05vw, 0.78125rem);
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-align: center;
  }
  #calculator .seg-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  /* energiecontract: de twee keuzes als twee gelijke tegels over de hele breedte */
  #calculator .calc-contract .pick-row { grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  #calculator .calc-stap,
  #calculator .calc-stap.is-actief,
  #calculator .calc-stipjes i { transition: none; }
}

/* ------------------------------------------------------------- telefoon
   eerst de stap, daaronder het resultaat in een compact donker vlak dat de
   rest van de kaart vult; na "Bereken" vult het resultaat de hele kaart.
   De kaart is precies het venster min de menubalk min de lucht: alle maten
   lopen mee met die hoogte (--kh), van een laag venster (548) tot de vaste
   kaart van 720 hoog. Rechtsonder blijft een hoek van 80 breed vrij voor de
   knop van de assistent */
@media (max-width: 767px) {
  #rekentool { --lucht: clamp(13px, calc(5vh - 19px), 24px); }
  #rekentool .tool-stage {
    --kaart-max: 720px;
    --shell-pad: clamp(5px, calc(5px + (var(--kh) - 548px) * 0.03), 10px);
    --wj-l: 10px;
    --wj-w: clamp(46px, calc(46px + (var(--kh) - 548px) * 0.12), 68px);
    --res-pad: clamp(9px, calc(9px + (var(--kh) - 548px) * 0.06), 18px);
    --res-px: clamp(14px, 4.2vw, 20px);
    /* 80 vanaf de rand van het scherm: de kaart staat 20 van de rand */
    --assistent-hoek: 60px;
  }
  #calculator { min-height: 0; }
  #calculator .tool-body { min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  #calculator.is-breed:not(.is-inklap) .tool-body { grid-template-rows: minmax(0, 1fr); }

  #calculator .calc-form {
    --form-py: clamp(10px, calc(10px + (var(--kh) - 548px) * 0.05), 20px);
    --form-px: clamp(13px, 4.2vw, 20px);
    --calc-tussen: clamp(8px, calc(8px + (var(--kh) - 548px) * 0.05), 16px);
  }
  #calculator .calc-kop .h3 { font-size: clamp(1.0625rem, calc(17px + (var(--kh) - 548px) * 0.024), 1.3125rem); line-height: 1.2; }
  #calculator .calc-intro { margin-top: 2px; font-size: 0.75rem; line-height: 1.4; }
  #calculator .calc-voortgang { margin-top: clamp(6px, calc(6px + (var(--kh) - 548px) * 0.035), 12px); }
  #calculator .calc-stappen { padding-bottom: clamp(6px, calc(6px + (var(--kh) - 548px) * 0.04), 12px); }
  #calculator .calc-form .f-label { line-height: 1.35; }
  #calculator .calc-vraag .pick-row { margin-top: clamp(5px, calc(5px + (var(--kh) - 548px) * 0.025), 9px); }
  #calculator .calc-aantal-rij { padding-top: clamp(6px, calc(6px + (var(--kh) - 548px) * 0.025), 10px); row-gap: clamp(4px, calc(4px + (var(--kh) - 548px) * 0.025), 8px); }
  #calculator .calc-aantal-rij .t { font-size: 0.78125rem; }
  #calculator input[type="range"] { margin-top: clamp(6px, calc(6px + (var(--kh) - 548px) * 0.025), 10px); }
  #calculator .field > span { margin-bottom: 4px; }
  #calculator .field .select { padding-block: clamp(8px, calc(8px + (var(--kh) - 548px) * 0.023), 12px); }
  #calculator .seg { padding-block: clamp(7px, calc(7px + (var(--kh) - 548px) * 0.017), 10px); }

  /* tegels, tellers en knoppen: nooit lager dan 40 */
  #calculator .pick {
    min-height: 40px;
    padding-block: clamp(4px, calc(4px + (var(--kh) - 548px) * 0.02), 8px);
    gap: 3px;
  }
  #calculator .pick .ico { width: 14px; height: 14px; }
  #calculator .teller-knop { width: 34px; height: clamp(40px, calc(40px + (var(--kh) - 548px) * 0.023), 44px); }
  #calculator .calc-keuze-knop { min-height: clamp(40px, calc(40px + (var(--kh) - 548px) * 0.023), 44px); padding: 6px 8px; font-size: 0.78125rem; }
  #calculator .calc-vorige { min-height: 40px; }
  #calculator .calc-verder,
  #calculator .calc-go { padding-block: clamp(10px, calc(10px + (var(--kh) - 548px) * 0.02), 14px); }
  #calculator .calc-nav { padding-top: clamp(8px, calc(8px + (var(--kh) - 548px) * 0.035), 14px); }

  /* hoeveel panelen erbij: de twee keuzes en de teller op één regel; de
     teller schuift rechts naast "Invullen" open en de keuzes maken plaats */
  #calculator .calc-wil-knoppen { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: flex-start; }
  #calculator .calc-keuze { flex: 1 1 auto; gap: 5px; }
  #calculator .calc-aantal--teller,
  #calculator .calc-aantal--teller.is-open { grid-template-rows: 1fr; }
  #calculator .calc-aantal--teller {
    grid-template-columns: 0fr;
    transition: grid-template-columns 0.2s var(--ease), opacity 0.2s var(--ease), visibility 0s linear 0.2s;
  }
  #calculator .calc-aantal--teller.is-open {
    grid-template-columns: 1fr;
    transition: grid-template-columns 0.2s var(--ease), opacity 0.2s var(--ease), visibility 0s;
  }
  #calculator .calc-aantal--teller > .calc-aantal-in { display: block; margin-left: 0; padding-left: 0; }
  #calculator .calc-aantal--teller .teller { margin: 0 0 0 6px; }

  /* het donkere vlak onder de stap: het bedrag en de drie cijfers naast
     elkaar, daaronder de toelichting en onderaan Wattje met de kleine
     lettertjes naast zich */
  #calculator:not(.is-breed) .calc-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto minmax(0, 1fr) auto;
    column-gap: 14px;
    padding: var(--res-pad) var(--res-px) 0;
  }
  #calculator:not(.is-breed) .calc-live { grid-column: 1 / -1; grid-row: 1; justify-self: start; margin-bottom: 0; padding: 4px 10px; gap: 7px; font-size: 0.5625rem; letter-spacing: 0.12em; white-space: nowrap; }
  #calculator:not(.is-breed) .calc-label { grid-column: 1; grid-row: 3; align-self: end; margin-top: 0; font-size: 0.71875rem; line-height: 1.3; }
  #calculator:not(.is-breed) .calc-big { grid-column: 1; grid-row: 4; align-self: start; margin-top: 3px; font-size: clamp(1.375rem, calc(22px + (var(--kh) - 548px) * 0.07), 2.25rem); }
  #calculator:not(.is-breed) .calc-note { grid-column: 1 / -1; grid-row: 5; align-self: start; margin-top: clamp(5px, calc(5px + (var(--kh) - 548px) * 0.03), 10px); font-size: 0.6875rem; line-height: 1.35; }
  #calculator:not(.is-breed) .calc-stats {
    grid-column: 2;
    grid-row: 3 / 5;
    align-self: center;
    margin-top: 0;
    padding: 0 0 0 14px;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    gap: clamp(3px, calc(3px + (var(--kh) - 548px) * 0.025), 7px);
  }
  #calculator:not(.is-breed) .calc-stats .r { font-size: 0.6875rem; gap: 8px; line-height: 1.4; }
  @media (max-height: 760px) {
    #calculator:not(.is-breed) .calc-stats { grid-row: 1 / 5; }
    #calculator:not(.is-breed) .calc-live { grid-column: 1; }
  }
  /* lage telefoon vóór "Bereken": het donkere vlak compacter, zodat de
     kleine lettertjes naast Wattje ook met beide tellers open binnen de
     kaart blijven */
  @media (max-height: 760px) {
    #calculator:not(.is-breed) .calc-result { padding-top: max(7px, calc(var(--res-pad) - 2px)); }
    #calculator:not(.is-breed) .calc-live { padding-block: 2px; }
    #calculator:not(.is-breed) .calc-label { line-height: 1.2; }
    #calculator:not(.is-breed) .calc-big { margin-top: 2px; font-size: clamp(1.25rem, calc(20px + (var(--kh) - 548px) * 0.07), 2.25rem); }
    #calculator:not(.is-breed) .calc-note { margin-top: clamp(3px, calc(3px + (var(--kh) - 548px) * 0.03), 10px); line-height: 1.3; }
    #calculator:not(.is-breed) .calc-result .calc-disclaimer { line-height: 1.3; padding-top: 4px; padding-bottom: clamp(5px, calc(5px + (var(--kh) - 548px) * 0.02), 10px); }
  }
  #calculator:not(.is-breed) .calc-stats .r span:first-child { white-space: nowrap; }
  #calculator[data-stap="instellen"] .calc-stats .calc-val::after { width: 2.4em; }
  /* de kleine lettertjes naast Wattje; rechts de hoek van de assistent */
  #calculator:not(.is-breed) .calc-disclaimer {
    grid-column: 1 / -1;
    grid-row: 7;
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 0.59375rem;
    line-height: 1.4;
    min-height: calc(var(--wj-binnen) + 4px);
    padding: clamp(5px, calc(5px + (var(--kh) - 548px) * 0.03), 10px) 0 clamp(6px, calc(6px + (var(--kh) - 548px) * 0.02), 10px);
    padding-left: calc(var(--wj-l) + var(--wj-w) - var(--shell-pad) - var(--res-px) + 8px);
    padding-right: max(0px, calc(var(--assistent-hoek) - var(--shell-pad) - var(--res-px)));
  }
}

/* telefoon onder 640 hoog: als laatste redmiddel schuift de stap binnen
   zijn vak, met een lijn boven de knoppen; de kaart blijft in beeld */
@media (max-width: 767px) and (max-height: 639px) {
  #calculator .tool-body { grid-template-rows: minmax(0, 1fr) auto; }
  #calculator .calc-form { min-height: 0; overflow: hidden; }
  #calculator .calc-stappen {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-inline: -6px;
    padding-inline: 6px;
    /* de stap loopt tot de lijn boven de knoppen en schuift eronder weg */
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  #calculator .calc-nav { border-top: 0; }
}

/* tablet: het formulier staat smal naast het resultaat. Ook met beide
   tellers open blijft de kaart op zijn vaste hoogte: de stap wordt iets
   compacter, niet hoger */
@media (min-width: 768px) and (max-width: 1024px) {
  @container calc-form (max-width: 30.5rem) {
    #calculator .calc-vraag { margin-top: clamp(12px, calc(var(--kh) * 0.03), 18px); }
    #calculator .pick { min-height: 44px; padding-block: 6px; gap: 3px; }
    #calculator .calc-aantal-rij { padding-top: 8px; row-gap: 6px; }
    #calculator .calc-stappen { padding-bottom: clamp(10px, calc(var(--kh) * 0.025), 16px); }
  }
}

/* telefoon na "Bereken": het resultaat vult de kaart. Bovenaan het bedrag
   met de cijfers, onderaan de knoppen en de kleine lettertjes, daaronder de
   rij van Wattje met zijn zin */
@media (max-width: 767px) {
  #calculator.is-breed .calc-result {
    /* onderaan de rij van Wattje: hoog genoeg voor zijn zin van twee regels naast hem */
    padding: calc(var(--res-pad) + 6px) clamp(18px, 5vw, 24px) calc(var(--wj-w) * 0.57 + 62px - var(--wj-onder) - var(--shell-pad));
  }
  #calculator.is-breed .calc-live { margin-bottom: clamp(8px, calc(8px + (var(--kh) - 548px) * 0.07), 20px); }
  #calculator.is-breed .calc-label { margin-top: auto; }
  #calculator.is-breed .calc-big { font-size: clamp(2.5rem, min(13vw, calc(var(--kh) * 0.09)), 3.75rem); }
  #calculator.is-breed .calc-stats .r { font-size: clamp(0.875rem, calc(var(--kh) * 0.024), 1rem); }
  #calculator.is-breed .calc-actie { margin-top: auto; padding-top: clamp(14px, calc(var(--kh) * 0.03), 24px); }
  #calculator.is-breed .calc-disclaimer { margin-top: clamp(8px, calc(var(--kh) * 0.018), 14px); font-size: 0.625rem; line-height: 1.5; }
}
/* telefoon onder 640 hoog na "Bereken": de cijfers dichter op elkaar */
@media (max-width: 767px) and (max-height: 639px) {
  #calculator.is-breed .calc-big { font-size: 2.125rem; }
  #calculator.is-breed .calc-note { margin-top: 6px; }
  #calculator.is-breed .calc-stats { margin-top: 10px; padding-top: 10px; gap: 6px; }
  #calculator.is-breed .calc-actie { padding-top: 10px; }
  #calculator.is-breed .calc-disclaimer { margin-top: 6px; }
}
/* =========== einde rekentool past in het venster */

.field { display: block; }
.field > span { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--text-1); margin-bottom: 7px; }
.input, .select {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 0.9375rem;
  color: var(--text-1);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 4px rgba(11, 42, 91, 0.14);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7A73' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 38px;
  cursor: pointer;
}

.slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.slider-head .t { font-size: 0.8125rem; font-weight: 700; color: var(--text-1); }
.slider-head .v { font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.02em; color: var(--green-700); font-variant-numeric: tabular-nums; }
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--r-pill);
  margin-top: 12px;
  background: linear-gradient(to right, var(--green-500) var(--fill, 50%), var(--surface-3) var(--fill, 50%));
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--green-500);
  box-shadow: 0 2px 8px rgba(12, 20, 16, 0.22);
  cursor: grab;
  transition: transform 0.15s var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--green-500);
  box-shadow: 0 2px 8px rgba(12, 20, 16, 0.22);
}
.range-legend { display: flex; justify-content: space-between; margin-top: 7px; font-size: 0.6875rem; color: var(--text-3); }

.seg-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.seg {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  padding: 10px 2px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-3);
  transition: all 0.18s var(--ease);
}
.seg:hover { border-color: var(--green-400); color: var(--text-1); }
.seg[aria-pressed="true"] { background: var(--green-50); border-color: var(--green-500); color: var(--green-800); }

/* ================================================================= KAARTEN */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--line-strong); }

.photo-card {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.photo-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.photo-card .ph { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-2); }
.photo-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.photo-card:hover .ph img { transform: scale(1.06); }
.photo-card .bd { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.photo-card .bd p { margin-top: 10px; font-size: 0.9375rem; color: var(--text-2); }
.photo-card .num-tag {
  font-size: 0.65rem; letter-spacing: 0.18em; font-weight: 800;
  color: var(--green-600);
}

.icon-badge {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--green-50);
  color: var(--green-700);
  flex: none;
}
.icon-badge .ico { width: 21px; height: 21px; }

/* promo-kaart */
.promo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--ink-850) 0%, var(--ink-950) 100%);
  color: rgba(255, 255, 255, 0.72);
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 4vw, 52px);
}
.promo::before {
  content: "";
  position: absolute;
  inset: auto -80px -140px auto;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(11, 42, 91, 0.9) 0%, transparent 70%);
}
.promo > * { position: relative; }
.promo h3 { color: #fff; margin-top: 16px; }
.promo p { margin-top: 12px; max-width: 44ch; }
.promo-img { border-radius: var(--r-lg); overflow: hidden; }
.promo-img img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }

/* ============================================================== TIJDLIJN */
.timeline { position: relative; margin-top: 56px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 26px;
  height: 1px;
  background: linear-gradient(to right, var(--navy), var(--line) 62%);
}
.timeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.tl-step .n {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--green-500);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: -0.02em;
  box-shadow: 0 0 0 8px var(--surface);
}
.bg-soft .tl-step .n { box-shadow: 0 0 0 8px var(--surface-2); }
.tl-step h3 { margin-top: 26px; }
.tl-step p { margin-top: 10px; font-size: 0.9375rem; max-width: 26ch; }

/* ============================================================ CARROUSEL */
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rail-nav { display: flex; gap: 10px; }
.rail-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  color: var(--text-1);
  background: #fff;
  transition: all 0.2s var(--ease);
}
.rail-btn:hover { border-color: var(--green-500); color: var(--green-700); transform: translateY(-2px); }
.rail-btn .ico { width: 18px; height: 18px; }
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin-top: 44px;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* verhalen: de vierde (donkere) kaart */
.story {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(24px, 2.2vw, 30px);
  color: var(--text-2);
  cursor: default;
}
/* verhalen: de drie reviews zijn dezelfde reviewkaart als op de productpagina's (.rev-card),
   hier zonder hover-lift want ze zijn niet klikbaar; onderwerp tussen sterren en tekst */
#verhalen .rev-card,
#reviews .rev-card { transition: none; cursor: default; }
#verhalen .rev-card:hover,
#reviews .rev-card:hover { transform: none; box-shadow: none; }
#verhalen .rev-card .story-topic,
#reviews .rev-card .story-topic { margin: 8px 0 0; color: var(--navy); font-weight: 700; font-size: 0.875rem; line-height: 1.3; }
#verhalen .rev-card .q,
#reviews .rev-card .q { margin: 3px 0 0; font-size: 0.8125rem; line-height: 1.45; text-wrap: pretty; }
#verhalen .rev-card .who,
#reviews .rev-card .who { margin-top: 12px; padding-top: 10px; gap: 10px; }
#verhalen .rev-card .who img { width: 32px; height: 32px; }
#verhalen .rev-card .who .n,
#reviews .rev-card .who .n { font-size: 0.8125rem; line-height: 1.3; }
#verhalen .rev-card .who .m,
#reviews .rev-card .who .m { line-height: 1.3; }
/* ronde 15: nog lagere kaarten, de hele tekst blijft staan; de donkere kaart schaalt mee */
#verhalen-rail .rev-card,
#verhalen-rail .story,
#reviews-rail .rev-card { padding: 18px; }
#verhalen .story--dark { gap: 16px; }
#verhalen .story--dark .h3 { font-size: clamp(1.1875rem, 1.4vw, 1.3rem); }
#verhalen .story--dark p { font-size: 0.8125rem; line-height: 1.45; }
.story-stars { line-height: 0; }
.story-stars[data-stars="0"] .ico,
.story-stars[data-stars="1"] .ico:nth-child(n+2),
.story-stars[data-stars="2"] .ico:nth-child(n+3),
.story-stars[data-stars="3"] .ico:nth-child(n+4),
.story-stars[data-stars="4"] .ico:nth-child(n+5),
.story-stars[data-stars="0.5"] .ico:not(.ico-half),
.story-stars[data-stars="1.5"] .ico:nth-child(n+2):not(.ico-half),
.story-stars[data-stars="2.5"] .ico:nth-child(n+3):not(.ico-half),
.story-stars[data-stars="3.5"] .ico:nth-child(n+4):not(.ico-half),
.story-stars[data-stars="4.5"] .ico:nth-child(n+5):not(.ico-half) { color: var(--line-strong); }
/* Halve ster: gouden kopie direct na de ster die half moet; ligt er precies overheen (15px ster + 2px gat), rechterhelft weggeknipt. */
.story-stars .ico-half { margin-left: -17px; color: #F5B544; clip-path: inset(0 50% 0 0); }
@media (max-width: 720px) {
  #verhalen-rail .rev-card { padding: 18px; }
}

.story--score {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-hover) 100%);
  color: #fff;
  justify-content: space-between;
}
.story--score::after { display: none; }
.story--score .big { font-size: 4rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.story--dark { background: linear-gradient(160deg, var(--ink-800) 0%, var(--ink-950) 100%); border-color: transparent; box-shadow: none; color: #fff; justify-content: space-between; }
.story--dark::after { display: none; }
/* vanaf laptopbreedte passen alle vier de verhalen naast elkaar binnen de wrap: geen afgesneden kaart,
   niets meer te schuiven, dus ook geen pijlen. Smaller blijft het een schuifrail. */
@media (min-width: 1024px) {
  #verhalen-rail,
  #reviews-rail { grid-auto-columns: minmax(0, 1fr); overflow-x: visible; scroll-snap-type: none; }
  #verhalen .rail-nav,
  #reviews .rail-nav { display: none; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  #verhalen-rail,
  #reviews-rail { gap: 16px; }
  #verhalen-rail .story,
  #verhalen-rail .rev-card { padding: 18px; }
}

/* ============================================================= VERGELIJKER */
.cmp-layout { display: grid; grid-template-columns: 288px 1fr; gap: 32px; align-items: start; }
.cmp-filters { position: sticky; top: calc(var(--nav-h) + 20px); }
.filter-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.filter-group + .filter-group { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.filter-title { font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.filter-opt {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; margin-top: 3px;
  border-radius: var(--r-xs);
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--text-2);
  transition: background-color 0.18s var(--ease);
}
.filter-opt:hover { background: var(--surface-2); }
.filter-opt.is-on { background: var(--green-50); color: var(--text-1); font-weight: 600; }
.filter-opt input { accent-color: var(--green-600); width: 15px; height: 15px; }
.filter-opt .flex1 { flex: 1; }
.pill-badge {
  font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.12em;
  padding: 3px 7px; border-radius: var(--r-pill);
  background: var(--green-100); color: var(--green-800);
}
.pill-badge--solid { background: var(--green-500); color: #fff; }

.offer {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.offer:hover { border-color: var(--line-strong); box-shadow: var(--sh-sm); }
.offer.is-pinned { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(11, 42, 91, 0.13); }
.offer .pin {
  position: absolute; left: 22px; top: -12px;
  background: var(--green-500); color: #fff;
  font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.14em;
  padding: 5px 12px; border-radius: var(--r-pill);
}
.offer-main {
  display: grid;
  grid-template-columns: 46px minmax(0, 1.5fr) auto auto auto;
  align-items: center;
  gap: 20px;
  padding: 26px 24px;
}
.offer-logo { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; }
.offer-logo .ico { width: 21px; height: 21px; }
.offer .nm { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-1); }
.offer .tg { font-size: 0.78125rem; color: var(--text-3); margin-top: 1px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag { font-size: 0.625rem; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--text-3); background: var(--surface-2); }
.offer .rating { display: flex; align-items: center; gap: 5px; font-weight: 800; color: var(--text-1); font-size: 0.9375rem; }
.offer .rating .ico { width: 15px; height: 15px; color: #F5B544; }
.offer .reviews { font-size: 0.6875rem; color: var(--text-3); margin-top: 2px; }
.offer .bonus { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-700); }
.offer .bonus.none { color: var(--text-3); }
.offer .price { font-size: 1.625rem; font-weight: 800; letter-spacing: -0.04em; color: var(--text-1); font-variant-numeric: tabular-nums; margin-top: 3px; }
.offer .price .cur { font-size: 1rem; font-weight: 700; vertical-align: top; margin-right: 2px; }
.offer .price .per { font-size: 0.75rem; font-weight: 600; color: var(--text-3); }
.offer .permonth { font-size: 0.6875rem; color: var(--text-3); }
.offer-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.detail-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78125rem; color: var(--text-3); font-weight: 600; }
.detail-toggle:hover { color: var(--text-1); }
.detail-toggle .ico { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.offer.is-open .detail-toggle .ico { transform: rotate(180deg); }
.offer-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease);
  border-top: 1px solid transparent;
  background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.offer.is-open .offer-detail { grid-template-rows: 1fr; border-top-color: var(--line); }
.offer-detail > div { overflow: hidden; }
.offer-detail .inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 24px; }
.offer-detail .k { font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.offer-detail .v { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-1); margin-top: 5px; }

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  padding: 52px 24px;
  text-align: center;
  background: #fff;
}

/* =================================================================== FAQ */
.faq-head { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 720px) { .faq-head { grid-template-columns: 1fr; gap: 14px; } }
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  text-align: left;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-1);
  transition: color 0.2s var(--ease);
}
.faq-q:hover { color: var(--green-700); }
.faq-item.is-open .faq-q { color: var(--green-700); }
.faq-icon {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  flex: none;
  transition: all 0.25s var(--ease);
}
.faq-icon .ico { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.faq-item.is-open .faq-icon { background: var(--green-500); border-color: var(--green-500); color: #fff; }
.faq-item.is-open .faq-icon .ico { transform: rotate(135deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s var(--ease);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding-bottom: 28px; padding-right: clamp(0px, 8vw, 90px); color: var(--text-2); }

/* ============================================================== CTA-BAND */
.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--ink-850) 0%, var(--ink-950) 60%);
  color: rgba(255, 255, 255, 0.74);
  text-align: center;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute; z-index: -1;
  width: 900px; height: 560px;
  left: 50%; bottom: -320px; translate: -50% 0;
  background: radial-gradient(ellipse, rgba(11, 42, 91, 0.85) 0%, transparent 68%);
}
.cta-band h2 { color: #fff; }
.cta-band .accent { color: var(--green-400); } /* 16 okt: accentwoord lichter op de donkere band, zelfde als .dark-section */
.cta-band p { margin: 22px auto 0; max-width: 48ch; }

/* Wattje in de slot-CTA (alleen Home, #contact): staat achter het woord
   "zichzelf" en kijkt er net bovenuit, handjes op de letterrand. Maten in em,
   dus hij schaalt mee met de kop en hangt altijd aan het woord. */
.cta-woord {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding-top: 0.63em;   /* ruimte voor zijn kop, ook als de kop afbreekt */
}
.cta-wattje {
  position: absolute; z-index: -1;
  left: 50%; translate: -50% 0;
  bottom: 0.646em;       /* handjes op de bovenrand van de kleine letters */
  width: 0.848em;
  height: auto;
  pointer-events: none;
}

/* ================================================================= FOOTER */
.footer {
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-hover) 100%);
  color: rgba(255, 255, 255, 0.82);
  position: relative;
  overflow: hidden;
}
.footer-top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.footer-top .row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; padding-block: 26px;
}
.footer-top .claim { color: #fff; font-weight: 800; letter-spacing: -0.03em; font-size: clamp(1.0625rem, 1.6vw, 1.375rem); }
.review-badge {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
  padding: 8px 8px 8px 18px;
  color: #fff;
}
.review-badge .txt { font-size: 0.8125rem; font-weight: 600; }
.review-badge .score {
  background: #fff; color: var(--green-700);
  font-weight: 800; letter-spacing: -0.03em;
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 0.9375rem;
}
.review-badge .stars { color: #fff; }

.footer-main { padding-block: clamp(40px, 5vw, 56px) clamp(16px, 2vw, 24px); } /* 16 okt: watermerk weg, footer korter */
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.footer-brand img { height: 42px; width: auto; max-width: none; } /* 16 okt: zelfde scherpe logo-set als in de navigatie */
.footer-brand p { margin-top: 20px; max-width: 34ch; color: rgba(255, 255, 255, 0.78); font-size: 0.9375rem; }
.footer-col .ttl {
  font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68); font-weight: 800;
}
.footer-col ul { margin-top: 18px; display: grid; gap: 11px; }
.footer-col a { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.88); transition: color 0.2s var(--ease); }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: clamp(28px, 3vw, 40px);
  padding-block: 22px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  font-size: 0.78125rem;
  color: rgba(255, 255, 255, 0.74);
}
.footer-bottom .links { display: flex; gap: 22px; }
.footer-mark {
  pointer-events: none;
  margin-top: clamp(30px, 5vw, 60px);
  font-size: clamp(4rem, 15vw, 13rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.8;
  color: rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
  white-space: nowrap;
  user-select: none;
}

/* ============================================================ SUBSIDIEBOL
   Vervallen: de zwevende Subsidie-knop is opgegaan in de Wattje-assistent
   (snelkeuze "Check mijn subsidie"). Zie het blok WATTJE-ASSISTENT onderaan. */

/* =================================================================== MODAL */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(10, 15, 12, 0.72);
  backdrop-filter: blur(8px);
  overflow-y: auto;
}
.modal.is-open { display: flex; }
.modal-panel {
  position: relative;
  width: 100%;
  max-width: 680px;
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  margin: auto;
  animation: pop 0.35s var(--ease-out) both;
}
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-close {
  position: absolute; right: 16px; top: 16px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--text-1);
  transition: transform 0.2s var(--ease);
}
.modal-close:hover { transform: scale(1.07); }
.modal-close .ico { width: 16px; height: 16px; }
.modal-body { padding: clamp(28px, 4vw, 40px); }

/* ====================================================== REKENTOOL-VENSTER
   Op de pagina's zonder eigen rekentool opent "Bereken besparing" de
   rekentool van de homepage in een zwevend venster (#rekentool-modal, site.js).
   Het venster laadt rekentool.html in een iframe; de kaart schaalt in die
   pagina mee met de hoogte van het iframe (--kh), dus het iframe is zo hoog
   als het venster toelaat en nooit hoger dan de kaart nodig heeft. */
#rekentool-modal {
  --rv-rand: clamp(10px, 2.4vw, 24px);
  --rv-max: 608px;
  --rv-kop: 48px;        /* strook boven de kaart voor de sluitknop */
  --rv-lucht: 24px;      /* lucht om de kaart in rekentool.html */
  --rv-h: min(var(--rv-max), calc(100vh - 2 * var(--rv-rand) - var(--rv-kop)));
  padding: var(--rv-rand);
}
@supports (height: 100svh) {
  #rekentool-modal { --rv-h: min(var(--rv-max), calc(100svh - 2 * var(--rv-rand) - var(--rv-kop))); }
}
/* geen tweede witte rand: de donkere kaart zelf zweeft boven de gedimde pagina */
#rekentool-modal .modal-panel {
  max-width: 1180px;
  padding-top: var(--rv-kop);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
#rekentool-modal .modal-close { top: 0; right: var(--rv-lucht); }
/* eenmalig onzichtbaar voortekenen na het laden (site.js), zodat het venster zonder hapering opent */
#rekentool-modal.rv-warm:not(.is-open) { display: flex; visibility: hidden; pointer-events: none; }
#rekentool-modal.rv-warm:not(.is-open) .modal-panel { animation: none; }
#rekentool-modal .rv-frame {
  display: block;
  width: 100%;
  /* kaart max 560 + 2 x lucht 24; op de telefoon kaart max 720 */
  height: var(--rv-h);
  border: 0;
  background: transparent;
  color-scheme: normal;
}
/* het iframe is smaller dan het scherm (min 2 x --rv-rand): tot 805 breed
   toont rekentool.html de telefoonkaart (767 en smaller), dus ook de
   maten van de telefoon */
@media (max-width: 805px) {
  #rekentool-modal { --rv-max: 768px; --rv-kop: 46px;
    /* zelfde lucht als de telefoonkaart in rekentool.html rekent */
    --rv-lucht: clamp(13px, calc(var(--rv-h) * 0.05 - 19px), 24px); align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  #rekentool-modal .modal-panel { animation: none; }
}

/* rekentool.html: de losse pagina in het venster. Geen menubalk, dus de
   kaart krijgt het hele iframe min de lucht eromheen; de pagina zelf is
   doorzichtig, zodat alleen de kaart zichtbaar is */
html.rekentool-los { --nav-h: 0px; background: transparent; }
html.rekentool-los body { background: transparent; }
/* het levende Wattje-model steekt 1 tot 2 px onder de lucht uit: geen scrollbalk daarvoor */
html.rekentool-los #rekentool { padding: var(--lucht); overflow: clip; }
html.rekentool-los #rekentool .tool-stage { margin: 0; }
.step-meta { display: flex; align-items: center; gap: 8px; font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.step-meta .ico { width: 14px; height: 14px; color: var(--green-600); }
.opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 12px; }
.opt {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-2);
  display: flex; align-items: center; gap: 10px;
  transition: all 0.2s var(--ease);
}
.opt:hover { border-color: var(--green-400); }
.opt[aria-pressed="true"] { border-color: var(--green-500); background: var(--green-50); color: var(--text-1); font-weight: 700; }
.opt .box {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center; flex: none;
  background: #fff;
}
.opt[aria-pressed="true"] .box { background: var(--green-500); border-color: var(--green-500); color: #fff; }
.opt .box .ico { width: 11px; height: 11px; opacity: 0; }
.opt[aria-pressed="true"] .box .ico { opacity: 1; }

.tabs { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 20px; }
.tab {
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  padding: 8px 15px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-3);
  transition: all 0.2s var(--ease);
}
.tab:hover { border-color: var(--green-400); color: var(--text-1); }
.tab[aria-selected="true"] { background: var(--green-500); border-color: var(--green-500); color: #fff; }

.reg-list { margin-top: 18px; display: grid; gap: 12px; max-height: 44vh; overflow-y: auto; padding-right: 4px; }
.reg {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.reg:hover { border-color: var(--green-500); box-shadow: var(--sh-sm); }
.reg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.reg-title { font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.025em; color: var(--text-1); line-height: 1.3; }
.level {
  flex: none;
  font-size: 0.65rem; font-weight: 800;
  border-radius: var(--r-pill);
  padding: 4px 10px;
  background: var(--green-100); color: var(--green-800);
}
.level--gemeente { background: var(--navy); color: #fff; }
.level--overig { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px var(--line-strong); }
.reg .bedrag { margin-top: 9px; font-size: 0.8125rem; font-weight: 700; color: var(--green-700); line-height: 1.45; }
.reg p { margin-top: 7px; font-size: 0.8125rem; color: var(--text-2); }
.reg .more { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700; color: var(--green-700); }
.reg .more .ico { width: 12px; height: 12px; }

/* ============================================================== SUBPAGINA */
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 0.78125rem; color: rgba(255, 255, 255, 0.55); }
.crumbs a:hover { color: #fff; }
.crumbs .ico { width: 12px; height: 12px; }
.crumbs .cur { color: #fff; }

.page-hero {
  position: relative;
  background: linear-gradient(158deg, var(--ink-850) 0%, var(--ink-950) 62%);
  color: rgba(255, 255, 255, 0.74);
  padding-top: calc(var(--nav-h) + 48px);
  padding-bottom: 68px;
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute; z-index: -1;
  right: -180px; top: -140px;
  width: 720px; height: 560px;
  background: radial-gradient(ellipse, rgba(11, 42, 91, 0.8) 0%, transparent 68%);
}
.page-hero h1 { color: #fff; margin-top: 20px; }
.page-hero .lead { color: rgba(255, 255, 255, 0.78); margin-top: 20px; max-width: 52ch; }
.page-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 68px); align-items: center; }

.stat-strip { border-top: 1px solid var(--line-inv); background: rgba(255, 255, 255, 0.03); }
.stat-strip .row { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat-strip .cell { padding: 22px 12px; text-align: center; }
.stat-strip .cell + .cell { border-left: 1px solid var(--line-inv); }
.stat-strip .n { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: -0.035em; color: #fff; }
.stat-strip .l { margin-top: 5px; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); font-weight: 600; }

/* ---- hero zonnepanelen.html: foto vult de hele hero, aanvraagkaart rechts ervoor.
   Hoogte groeit mee met de breedte, zodat de foto niet te ver inzoomt. */
.zp-hero {
  --zp-h: clamp(540px, 42.2vw, 756px);
  position: relative;
  padding-top: var(--nav-h);
  background: var(--ink-900);
  overflow: hidden;
  isolation: isolate;
}
.zp-hero-media { position: absolute; inset: var(--nav-h) 0 0; z-index: -2; }
.zp-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 30% 58%;
}
/* zacht verloop bovenin, alleen voor het kruimelpad */
.zp-hero::after {
  content: "";
  position: absolute; z-index: -1;
  inset: var(--nav-h) 0 auto;
  height: 96px;
  background: linear-gradient(to bottom, rgba(10, 15, 12, 0.5), rgba(10, 15, 12, 0));
  pointer-events: none;
}
.zp-hero-body {
  position: relative;
  height: var(--zp-h);
  display: flex; align-items: center; justify-content: flex-end;
  padding-block: 32px;
}
.zp-hero .crumbs {
  position: absolute; top: 16px; left: var(--gutter);
  font-size: 0.71875rem; gap: 6px;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 2px rgba(10, 15, 12, 0.45);
}
.zp-hero .crumbs a { transition: color 0.2s var(--ease); }
.zp-hero .crumbs .ico { width: 10px; height: 10px; }
.zp-hero-inner { width: 100%; max-width: 440px; }
.zp-hero-card {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: clamp(24px, 2.6vw, 36px);
  box-shadow: var(--sh-lg);
}
.zp-hero-title {
  font-size: clamp(1.625rem, 2.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--text-1);
  text-wrap: balance;
}
.zp-hero-title--2r { font-size: clamp(1.5rem, 2.35vw, 1.875rem); }
.zp-hero-form { margin-top: 24px; }
.zp-hero .zp-hero-checks { margin-top: 18px; gap: 10px; }
.zp-hero-ask { font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text-1); margin-bottom: 10px; }
.zp-hero-note { margin-top: 14px; text-align: center; font-size: 0.8125rem; color: var(--text-3); }
.zp-hero-fields { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.zp-hero-field { display: block; min-width: 0; }
.zp-hero .input { padding: 14px 16px; font-size: 1rem; }
.zp-hero .input::placeholder { color: var(--text-3); opacity: 1; }
.zp-hero .input:hover { border-color: var(--text-3); }
.zp-hero .input:focus { border-color: var(--navy); }
.zp-hero-form .btn { margin-top: 12px; padding-block: 17px; }
.zp-hero .input.is-fout { border-color: #C0392B; }
.zp-hero .input.is-fout:focus { box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.14); }
.zp-hero .zp-hero-fout { display: block; margin-top: 6px; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; color: #C0392B; }
.zp-hero .zp-hero-fout[hidden] { display: none; }
.zp-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (min-width: 1600px) { .zp-hero-media img { object-position: 30% 54%; } }
@media (min-width: 2200px) { .zp-hero-media img { object-position: 30% 38%; } }
/* telefoon en smal: foto bovenin over de volle breedte, kaart valt ruim over de onderkant */
@media (max-width: 860px) {
  .zp-hero { --zp-mh: clamp(280px, 42svh, 460px); --zp-over: 96px; background: var(--surface-2); }
  .zp-hero-media { bottom: auto; height: var(--zp-mh); }
  .zp-hero-media img { object-position: 30% 30%; }
  .zp-hero-body { height: auto; display: flow-root; padding: 0 16px 24px; }
  .zp-hero .crumbs { left: 16px; top: 14px; }
  .zp-hero-inner { max-width: 560px; margin: calc(var(--zp-mh) - var(--zp-over)) auto 0; }
  .zp-hero-card { padding: 24px 20px; box-shadow: var(--sh-md); }
}
@media (max-width: 520px) {
  .zp-hero-fields { grid-template-columns: 1.25fr 1fr; }
  .zp-hero .input { padding-inline: 12px; }
}

/* ---- zonnepanelen #overzicht: woning-clip met stroomlijnen en kaartjes ----
   Scene = een vlak met vaste verhouding (viewBox 3700x1382); beeld en SVG-laag
   schalen samen mee. Lus van 9 s; alleen opacity, transform en dashoffset.
   --b loopt zacht van 0 (zonder) naar 1 (met thuisbatterij); de lus loopt door
   en verandert mee, zonder herstart. */
@property --b { syntax: "<number>"; inherits: true; initial-value: 0; }
.zp-ov {
  --ov-bg: #EEF2F5;              /* achtergrond van het beeld zelf, loopt naadloos door */
  --ov-lus: 9s;
  --ov-geel: #EFAA16;
  --ov-groen: #4A9A24;
  --b: 0;
  position: relative;
  aspect-ratio: 3700 / 1382;
  background: var(--ov-bg);
  border-radius: var(--r-xl);
  transition: --b 0.5s var(--ease-out);
}
.zp-ov.is-batterij { --b: 1; }
.zp-ov-kop {
  position: absolute; z-index: 3;
  top: clamp(28px, 3.2vw, 44px); left: 3.5%;
}
.zp-ov-scene, .zp-ov-doek { position: absolute; inset: 0; }
/* beeld niet te selecteren, slepen of kopieren; knop en kaartjes blijven bedienbaar */
.zp-ov { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.zp-ov-beeld, .zp-ov-beeld img, .zp-ov-batterij, .zp-ov-batterij img, .zp-ov-svg { pointer-events: none; -webkit-user-drag: none; }
.zp-ov-scene { border-radius: inherit; }
.zp-ov-doek { overflow: hidden; border-radius: inherit; }
.zp-ov-beeld { position: absolute; top: 0; left: 29.73%; width: 54.054%; height: 100%; }
.zp-ov-beeld {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.zp-ov-beeld img { display: block; width: 100%; height: 100%; object-fit: contain; }
.zp-ov-batterij {
  position: absolute; left: 60.087%; top: 61.27%; width: 2.341%;
  opacity: var(--b);
  transform: translate(calc((1 - var(--b)) * -45%), calc((1 - var(--b)) * 6%));
  filter: drop-shadow(3px 2px 3px rgba(23, 39, 29, 0.22));
}
.zp-ov-batterij img { display: block; width: 100%; height: auto; }
.zp-ov-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; --ov-p: 44; }

/* schakelaar */
.zp-ov-knop {
  position: absolute; z-index: 3;
  top: clamp(28px, 3.2vw, 44px); right: 3.5%;
  gap: 8px;
}
.zp-ov-knop .ico { width: 16px; height: 16px; flex: none; }
.zp-ov-knop:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.zp-ov-knop:active { transform: scale(0.98); }
.zp-ov-knop[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.zp-ov-knop[aria-pressed="true"]:hover { background: var(--navy-hover); border-color: var(--navy-hover); color: #fff; }
.zp-ov-knop:disabled { opacity: 0.5; cursor: not-allowed; }

/* kaartjes */
.zp-ov-kaarten { list-style: none; margin: 0; padding: 0; }
.zp-ov-kaart {
  position: absolute; z-index: 2;
  width: 22%;
  display: grid; grid-template-columns: 36px 1fr; align-items: center; column-gap: 12px;
  padding: 16px 18px 18px;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  transform-origin: 50% 50%;
  animation: var(--ov-lus) ease-in-out infinite;
}
.zp-ov-kaart::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px var(--ov-groen), var(--sh-lg);
  opacity: 0;
  animation: var(--ov-lus) ease-in-out infinite;
}
.zp-ov-ico {
  width: 36px; height: 36px; border-radius: var(--r-xs);
  display: grid; place-items: center;
  background: var(--navy-tint); color: var(--navy);
}
.zp-ov-ico .ico { width: 18px; height: 18px; }
.zp-ov-kaart h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: var(--text-1); }
.zp-ov-kaart p { grid-column: 1 / -1; margin-top: 10px; font-size: 0.875rem; line-height: 1.55; color: var(--text-2); }
.zp-ov-kaart--1 { left: 3.5%; top: 33.3%; animation-name: zpo-k1; }
.zp-ov-kaart--2 { left: 74.6%; top: 23%; animation-name: zpo-k2; }
.zp-ov-kaart--3 { left: 3.5%; bottom: 5%; animation-name: zpo-k3; }
.zp-ov-kaart--4 {
  left: 74.6%; bottom: 5%; animation-name: zpo-k4;
  opacity: var(--b);
  translate: 0 calc((1 - var(--b)) * 10px);
  visibility: hidden;
  transition: visibility 0s linear 0.5s;
}
.zp-ov.is-batterij .zp-ov-kaart--4 { visibility: visible; transition-delay: 0s; }
.zp-ov-kaart--1::after { animation-name: zpo-k1-aan; }
.zp-ov-kaart--2::after { animation-name: zpo-k2-aan; }
.zp-ov-kaart--3::after { animation-name: zpo-k3-aan; }
.zp-ov-kaart--4::after { animation-name: zpo-k4-aan; }

/* SVG-laag */
.zpo-avond { position: absolute; inset: 0; background: var(--navy); opacity: 0; will-change: opacity; pointer-events: none; animation: zpo-avond var(--ov-lus) ease-in-out infinite; }
/* dekseltje over de zon in de foto: in de batterijstand gaat de zon echt weg als de batterij ontlaadt (zon staat op 1550,185 in viewBox 3700x1382) */
.zpo-zon-deksel { position: absolute; left: 36.5%; top: -3.5%; width: 11%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--ov-bg) 58%, transparent 74%); opacity: 0; will-change: opacity; pointer-events: none; animation: zpo-zon-deksel var(--ov-lus) ease-in-out infinite; }
.zpo-halo { transform-box: fill-box; transform-origin: center; animation: zpo-halo var(--ov-lus) ease-in-out infinite; }
.zpo-stralen { opacity: 0; animation: zpo-stralen var(--ov-lus) ease-in-out infinite; }
.zpo-glans { opacity: 0; animation: zpo-glans var(--ov-lus) ease-in-out infinite; }
.zpo-ramen { opacity: 0; animation: zpo-ramen var(--ov-lus) ease-in-out infinite; }
.zpo-lamp { opacity: 0; animation: zpo-lamp var(--ov-lus) ease-in-out infinite; }
.zpo-led { opacity: 0; animation: zpo-led var(--ov-lus) ease-in-out infinite; }
.zpo-alleen-batterij { opacity: var(--b); }
.zpo-lading-vul { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0.18); animation: zpo-vul var(--ov-lus) ease-in-out infinite; }
.zpo-basis { stroke: var(--navy); stroke-opacity: 0.2; stroke-width: 4; }
.zpo-punt { stroke-width: 12; stroke-dasharray: 0 calc(var(--ov-p) * 1px); animation: zpo-stroom 0.22s linear infinite; }
.zpo-gloed { stroke-width: 30; stroke-opacity: 0.22; stroke-dasharray: 0 calc(var(--ov-p) * 1px); animation: zpo-stroom 0.22s linear infinite; }
.zpo-geel { stroke: var(--ov-geel); }
.zpo-groen { stroke: var(--ov-groen); }
.zpo-knoop circle { stroke-opacity: 0.35; }
.zpo-poort { opacity: 0; animation: var(--ov-lus) ease-in-out infinite; }
.zpo-poort--zon { animation-name: zpo-p-zon; }
.zpo-poort--k1 { animation-name: zpo-p-k1; }
.zpo-poort--pv { animation-name: zpo-p-pv; }
.zpo-poort--k2 { animation-name: zpo-p-k2; }
.zpo-poort--huis { animation-name: zpo-p-huis; }
.zpo-poort--k3 { animation-name: zpo-p-k3; }
.zpo-poort--laden { animation-name: zpo-p-laden; }
.zpo-poort--ontladen { animation-name: zpo-p-ontladen; }
.zpo-poort--k4 { animation-name: zpo-p-k4; }

/* buiten beeld stil */
.zp-ov.is-stil *, .zp-ov.is-stil *::after { animation-play-state: paused !important; }

/* tijdlijn: 0 tot 64% dag; 64 tot 86% avond (alleen met batterij, via --b); daarna zacht terug */
@keyframes zpo-stroom { to { stroke-dashoffset: calc(var(--ov-p) * -1px); } }
@keyframes zpo-halo {
  0%, 100% { transform: scale(0.9); opacity: 0.45; }
  12% { transform: scale(1.08); opacity: 1; }
  50% { transform: scale(1); opacity: 0.85; }
  64% { transform: scale(1.04); opacity: 1; }
  72%, 92% { transform: scale(1.02); opacity: calc(1 - var(--b)); }
}
@keyframes zpo-zon-deksel { 0%, 62% { opacity: 0; } 70%, 92% { opacity: var(--b); } 98%, 100% { opacity: 0; } }
@keyframes zpo-avond { 0%, 64% { opacity: 0; } 72%, 90% { opacity: calc(0.28 * var(--b)); } 98%, 100% { opacity: 0; } }
@keyframes zpo-stralen { 0%, 4% { opacity: 0; } 14%, 64% { opacity: 0.85; } 72%, 84% { opacity: calc(0.85 * (1 - var(--b))); } 96%, 100% { opacity: 0; } }
@keyframes zpo-glans {
  0%, 9% { opacity: 0; transform: translateX(0); }
  12% { opacity: 1; }
  32% { opacity: 1; }
  36%, 100% { opacity: 0; transform: translateX(900px); }
}
@keyframes zpo-p-zon { 0%, 6% { opacity: 0; } 14%, 64% { opacity: 1; } 72%, 84% { opacity: calc(1 - var(--b)); } 94%, 100% { opacity: 0; } }
@keyframes zpo-p-k1 { 0%, 10% { opacity: 0; } 16%, 64% { opacity: 1; } 72%, 84% { opacity: calc(1 - var(--b)); } 94%, 100% { opacity: 0; } }
@keyframes zpo-p-pv { 0%, 24% { opacity: 0; } 30%, 64% { opacity: 1; } 72%, 84% { opacity: calc(1 - var(--b)); } 94%, 100% { opacity: 0; } }
@keyframes zpo-p-k2 { 0%, 36% { opacity: 0; } 41%, 64% { opacity: 1; } 72%, 84% { opacity: calc(1 - var(--b)); } 94%, 100% { opacity: 0; } }
@keyframes zpo-p-huis { 0%, 42% { opacity: 0; } 47%, 64% { opacity: 1; } 72%, 84% { opacity: calc(1 - var(--b)); } 94%, 100% { opacity: 0; } }
@keyframes zpo-p-k3 { 0%, 56% { opacity: 0; } 61%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes zpo-p-laden { 0%, 44% { opacity: 0; } 49%, 64% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes zpo-p-ontladen { 0%, 72% { opacity: 0; } 76%, 86% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes zpo-p-k4 { 0%, 50% { opacity: 0; } 55%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes zpo-vul { 0%, 44% { transform: scaleY(0.18); } 64%, 74% { transform: scaleY(1); } 90%, 100% { transform: scaleY(0.18); } }
@keyframes zpo-led { 0%, 34% { opacity: 0; } 39%, 64% { opacity: 1; } 72%, 84% { opacity: calc(1 - var(--b)); } 96%, 100% { opacity: 0; } }
@keyframes zpo-ramen { 0%, 49% { opacity: 0; } 60%, 88% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes zpo-lamp { 0%, 52% { opacity: 0; } 58%, 88% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes zpo-k1 { 0%, 10%, 92%, 100% { transform: none; } 16%, 64% { transform: scale(1.03); } 72%, 84% { transform: scale(calc(1 + 0.03 * (1 - var(--b)))); } }
@keyframes zpo-k1-aan { 0%, 10%, 92%, 100% { opacity: 0; } 16%, 64% { opacity: 1; } 72%, 84% { opacity: calc(1 - var(--b)); } }
@keyframes zpo-k2 { 0%, 36%, 92%, 100% { transform: none; } 42%, 64% { transform: scale(1.03); } 72%, 84% { transform: scale(calc(1 + 0.03 * (1 - var(--b)))); } }
@keyframes zpo-k2-aan { 0%, 36%, 92%, 100% { opacity: 0; } 42%, 64% { opacity: 1; } 72%, 84% { opacity: calc(1 - var(--b)); } }
@keyframes zpo-k3 { 0%, 58%, 92%, 100% { transform: none; } 64%, 86% { transform: scale(1.03); } }
@keyframes zpo-k3-aan { 0%, 58%, 92%, 100% { opacity: 0; } 64%, 86% { opacity: 1; } }
@keyframes zpo-k4 { 0%, 50%, 92%, 100% { transform: none; } 56%, 86% { transform: scale(1.03); } }
@keyframes zpo-k4-aan { 0%, 50%, 92%, 100% { opacity: 0; } 56%, 86% { opacity: 1; } }

/* onder 1240: kop en knop boven, beeld over de volle breedte, kaartjes eronder */
@media (max-width: 1239px) {
  .zp-ov { aspect-ratio: auto; background: none; border-radius: 0; }
  .zp-ov-kop { position: static; }
  .zp-ov-knop { position: relative; top: auto; right: auto; margin-top: 18px; min-height: 44px; }
  .zp-ov-scene {
    position: relative; inset: auto;
    margin-top: 16px;
    aspect-ratio: 2600 / 1382;
    background: var(--ov-bg);
    border-radius: var(--r-xl);
    overflow: hidden;
  }
  .zp-ov-doek { inset: 0 auto 0 -30.77%; width: 142.31%; border-radius: 0; overflow: visible; }
  .zpo-naar-kaart, .zpo-poort--k1, .zpo-poort--k2, .zpo-poort--k3, .zpo-poort--k4 { visibility: hidden; }
  .zp-ov-svg { --ov-p: 70; }
  .zpo-punt { stroke-width: 20; }
  .zpo-gloed { stroke-width: 44; }
  .zpo-basis { stroke-width: 7; }
  .zpo-knoop circle { r: 16px; stroke-width: 8; }
  .zp-ov-kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
  .zp-ov.is-batterij .zp-ov-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zp-ov-kaart { position: relative; inset: auto; width: auto; box-shadow: var(--sh-sm); border: 1px solid var(--line); animation-name: none; }
  .zp-ov-kaart--4 { display: none; translate: none; }
  .zp-ov.is-batterij .zp-ov-kaart--4 { display: grid; }
}
@media (max-width: 860px) {
  .zp-ov-scene { aspect-ratio: 2000 / 1382; }
  .zp-ov-doek { left: -55%; width: 185%; }
}
@media (max-width: 640px) {
  .zp-ov-kaarten, .zp-ov.is-batterij .zp-ov-kaarten { grid-template-columns: 1fr; gap: 10px; }
  .zp-ov-kaart { padding: 14px 16px 16px; }
  .zp-ov-kaart p { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .zp-ov { transition: none; }
  .zp-ov *, .zp-ov *::after { animation: none !important; }
  .zp-ov-kaart--4 { transition: none; }
  .zpo-halo { opacity: 1; transform: none; }
  .zpo-stralen { opacity: 0.85; }
  .zpo-poort, .zpo-led, .zpo-ramen, .zpo-lamp, .zp-ov-kaart::after { opacity: 1; }
  .zpo-poort--ontladen { opacity: 0; }
  .zpo-lading-vul { transform: scaleY(0.7); }
  .zpo-glans, .zpo-avond, .zpo-zon-deksel { opacity: 0; }
}

/* ---- thuisbatterij #overzicht: woning-clip met stroomlijnen en kaartjes ----
   Broertje van .zp-ov (zonnepanelen). Scene = vaste verhouding (viewBox 3700x1382).
   Eén lus van 19 s, geen knop. Strikt na elkaar: per fase precies één stroom,
   0,3 s aan, vol, 0,3 s uit, dan 0,4 s rust; nooit twee stromen tegelijk.
   0,0 tot 6,0 s    A  dag: zon naar panelen naar batterij (geel), streep 10 naar 50%,
                       eerst kaart Zonnepanelen, daarna kaart Thuisbatterij
   6,4 tot 7,6 s    B  zon zakt achter de nok, nacht valt in één keer
   7,7 tot 8,9 s       maan komt op
   9,3 tot 13,0 s   C  nacht: batterij naar woning (groen), ramen aan, streep 50 naar 15%, kaart Woning
   13,4 tot 17,1 s  D  nacht: paal naar batterij (navy), "Koopt in", ramen uit, streep 15 naar 100%, kaart Stroomnet
   17,3 tot 19,0 s  E  ochtend: maan onder, nacht weg, streep onzichtbaar terug naar 10%, zon komt op */
.tb-ov {
  --ov-bg: rgb(213, 212, 217);   /* achtergrond van het beeld zelf, loopt naadloos door */
  --ov-lus: 19s;
  --ov-geel: #EFAA16;
  --ov-groen: #4A9A24;
  position: relative;
  aspect-ratio: 3700 / 1382;
  background: var(--ov-bg);
  border-radius: var(--r-xl);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.tb-ov-kop { position: absolute; z-index: 3; top: clamp(16px, 2.3vw, 30px); left: 3.5%; }
.tb-ov-scene, .tb-ov-doek { position: absolute; inset: 0; }
.tb-ov-scene { border-radius: inherit; }
.tb-ov-doek { overflow: hidden; border-radius: inherit; }
.tb-ov-beeld, .tb-ov-beeld img, .tb-ov-svg { pointer-events: none; -webkit-user-drag: none; }
.tb-ov-beeld {
  position: absolute; left: 28.784%; top: 13.748%; width: 46.849%; height: 84.175%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.tb-ov-beeld img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tb-ov-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; --ov-p: 44; }

/* kaartjes */
.tb-ov-kaarten { list-style: none; margin: 0; padding: 0; }
.tb-ov-kaart {
  position: absolute; z-index: 2;
  width: 22%;
  display: grid; grid-template-columns: 36px 1fr; align-items: center; column-gap: 12px;
  padding: 14px 16px 15px;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  transform-origin: 50% 50%;
  animation: var(--ov-lus) ease-in-out infinite;
}
.tb-ov-kaart::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px var(--ov-groen), var(--sh-lg);
  opacity: 0;
  animation: var(--ov-lus) ease-in-out infinite;
}
.tb-ov-ico {
  width: 36px; height: 36px; border-radius: var(--r-xs);
  display: grid; place-items: center;
  background: var(--navy-tint); color: var(--navy);
}
.tb-ov-ico .ico { width: 18px; height: 18px; }
.tb-ov-kaart h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: var(--text-1); }
.tb-ov-kaart p { grid-column: 1 / -1; margin-top: 8px; font-size: 0.8125rem; line-height: 1.45; color: var(--text-2); }
.tb-ov-kaart--1 { left: 3.5%; top: 27%; animation-name: tbo-k1; }
.tb-ov-kaart--2 { left: 74.6%; top: 17%; animation-name: tbo-k2; }
.tb-ov-kaart--3 { left: 3.5%; bottom: 4%; animation-name: tbo-k3; }
.tb-ov-kaart--4 { left: 74.6%; bottom: 4%; animation-name: tbo-k4; }
.tb-ov-kaart--1::after { animation-name: tbo-k1-aan; }
.tb-ov-kaart--2::after { animation-name: tbo-k2-aan; }
.tb-ov-kaart--3::after { animation-name: tbo-k3-aan; }
.tb-ov-kaart--4::after { animation-name: tbo-k4-aan; }

/* label bij de paal: wat de batterij op dat moment met het net doet */
.tbo-chip {
  position: absolute; z-index: 1;
  left: 67.75%; top: 29.5%;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--navy); color: #fff;
  font-size: 0.75rem; font-weight: 700; line-height: 1.2; letter-spacing: 0;
  white-space: nowrap;
  box-shadow: var(--sh-sm);
  opacity: 0;
  translate: -50% 0;
  pointer-events: none;
  animation: var(--ov-lus) ease-in-out infinite;
}
.tbo-chip--inkoop { animation-name: tbo-chip-inkoop; }

/* SVG-laag */
.tbo-avond {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 95% at 54% 42%, var(--navy), rgba(11, 42, 91, 0.45));
  opacity: 0; will-change: opacity; pointer-events: none; animation: tbo-avond var(--ov-lus) ease-in-out infinite;
}
.tbo-zon { animation: tbo-zon var(--ov-lus) ease-in-out infinite; }
.tbo-maan { opacity: 0; animation: tbo-maan var(--ov-lus) ease-in-out infinite; }
.tbo-halo { transform-box: fill-box; transform-origin: center; animation: tbo-halo var(--ov-lus) ease-in-out infinite; }
.tbo-stralen { opacity: 0; animation: tbo-stralen var(--ov-lus) ease-in-out infinite; }
.tbo-ramen { opacity: 0; animation: tbo-ramen var(--ov-lus) ease-in-out infinite; }
.tbo-lading-vul { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0.1); animation: tbo-vul var(--ov-lus) linear infinite; }
.tbo-basis { stroke: var(--navy); stroke-opacity: 0.2; stroke-width: 4; }
.tbo-punt { stroke-width: 12; stroke-dasharray: 0 calc(var(--ov-p) * 1px); animation: tbo-stroom 0.22s linear infinite; }
.tbo-gloed { stroke-width: 30; stroke-opacity: 0.22; stroke-dasharray: 0 calc(var(--ov-p) * 1px); animation: tbo-stroom 0.22s linear infinite; }
.tbo-geel { stroke: var(--ov-geel); }
.tbo-groen { stroke: var(--ov-groen); }
.tbo-navy { stroke: var(--navy); }
.tbo-navy.tbo-gloed { stroke-opacity: 0.16; }
.tbo-knoop circle { stroke-opacity: 0.35; }
.tbo-poort { opacity: 0; animation: var(--ov-lus) ease-in-out infinite; }
.tbo-poort--zon { animation-name: tbo-p-zon; }
.tbo-poort--k1 { animation-name: tbo-p-k1; }
.tbo-poort--pv { animation-name: tbo-p-pv; }
.tbo-poort--laden { animation-name: tbo-p-laden; }
.tbo-poort--ontladen { animation-name: tbo-p-ontladen; }
.tbo-poort--inkoop { animation-name: tbo-p-inkoop; }
.tbo-poort--net-huis { animation: none; }
.tbo-poort--k2 { animation-name: tbo-p-k2; }
.tbo-poort--k3 { animation-name: tbo-p-k3; }
.tbo-poort--k4 { animation-name: tbo-p-k4; }

/* buiten beeld stil */
.tb-ov.is-stil, .tb-ov.is-stil *, .tb-ov.is-stil *::after { animation-play-state: paused !important; }

/* nachtbeeld: één nachtwaarde (--tbo-n) met exact de timing van .tbo-avond.
   Zodra het nachtbeeld geladen is (.heeft-nacht): effen nachtlucht in de kleur van het
   nachtbeeld ónder het dagbeeld (zo vloeien beeld en rand gelijk), nachtbeeld erover, getekende raamgloed en oude verdonkering uit,
   kop op desktop wit zolang het nacht is. */
@property --tbo-n { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --tbo-u { syntax: "<number>"; inherits: true; initial-value: 0; }
.tb-ov { --tbo-heeft: 0; --tbo-uh: 0; animation: tbo-nacht-n var(--ov-lus) ease-in-out infinite, tbo-lampen-uit var(--ov-lus) ease-in-out infinite; }
.tb-ov.heeft-nacht { --tbo-heeft: 1; }
.tb-ov.heeft-nacht.heeft-uit { --tbo-uh: 1; }
/* kop wisselt kort (bij nachtwaarde 0,45 tot 0,65) zodat hij nooit lang grijs op grijs staat */
.tb-ov-kop { --tbo-k: calc(clamp(0, (var(--tbo-n) - 0.45) * 5, 1) * var(--tbo-heeft)); }
.tbo-nachtlucht {
  position: absolute; inset: 0; pointer-events: none;
  background: rgb(29, 46, 87);
  opacity: calc(var(--tbo-n) * var(--tbo-heeft));
}
/* lampen uit: bij het begin van het inkopen (13,4 s) vloeit het nacht-uit-beeld in 0,8 s over het nachtbeeld;
   in de ochtend vloeit het met de nacht mee weg, het nachtbeeld eronder verdwijnt dan direct mee */
.tb-ov-beeld--nacht { opacity: calc(var(--tbo-n) * clamp(0, 1 - var(--tbo-u) * var(--tbo-uh) * (1 - var(--tbo-n)) * 10, 1)); }
.tb-ov-beeld--uit { opacity: calc(var(--tbo-n) * var(--tbo-u) * var(--tbo-uh)); }
.tb-ov-beeld:not(.tb-ov-beeld--nacht):not(.tb-ov-beeld--uit) { opacity: calc(1 - var(--tbo-n) * var(--tbo-heeft)); }
.tb-ov.heeft-nacht .tbo-avond, .tb-ov.heeft-nacht .tbo-ramen { visibility: hidden; }
@media (min-width: 1240px) {
  .tb-ov-kop .h2 { color: color-mix(in srgb, #fff calc(var(--tbo-k) * 100%), var(--text-1)); }
  .tb-ov-kop .eyebrow, .tb-ov-kop .eyebrow .ico { color: color-mix(in srgb, var(--navy-tint) calc(var(--tbo-k) * 100%), var(--navy)); }
}
/* inkooplijn en lijn naar kaartje Stroomnet: 's nachts licht staalblauw zodat ze op de navy lucht leesbaar zijn */
.tbo-basis.tbo-nachtlicht { stroke: color-mix(in srgb, #C9D6EA calc(var(--tbo-n) * 100%), var(--navy)); stroke-opacity: calc(0.2 + var(--tbo-n) * 0.3); }
.tbo-nachtlicht .tbo-navy { stroke: color-mix(in srgb, #C9D6EA calc(var(--tbo-n) * 100%), var(--navy)); }
.tbo-nachtlicht .tbo-punt.tbo-navy { stroke-opacity: calc(1 - var(--tbo-n) * 0.15); }
.tbo-knoop circle.tbo-nachtlicht { stroke: color-mix(in srgb, #C9D6EA calc(var(--tbo-n) * 100%), #0B2A5B); stroke-opacity: calc(0.35 + var(--tbo-n) * 0.4); }
@keyframes tbo-lampen-uit { 0%, 70.526% { --tbo-u: 0; } 74.737%, 100% { --tbo-u: 1; } }
@keyframes tbo-nacht-n { 0%, 33.684% { --tbo-n: 0; } 40%, 91.579% { --tbo-n: 1; } 97.895%, 100% { --tbo-n: 0; } }

@keyframes tbo-stroom { to { stroke-dashoffset: calc(var(--ov-p) * -1px); } }
/* zon: staat tot 6,4 s, zakt dan 340 eenheden achter de nok (masker), komt vanaf 18,3 s weer op */
@keyframes tbo-zon {
  0%, 33.684% { opacity: 1; transform: none; }
  37.895% { opacity: 0.6; transform: translateY(300px); }
  40%, 96.316% { opacity: 0; transform: translateY(340px); }
  98.421% { opacity: 0.6; transform: translateY(300px); }
  100% { opacity: 1; transform: none; }
}
@keyframes tbo-halo { 0%, 100% { transform: scale(1); } 15.789% { transform: scale(1.08); } 33.684% { transform: scale(0.96); } 40%, 96.316% { transform: scale(0.6); } }
/* maan: komt op zodra de zon weg is, gaat onder voor de zon opkomt; nooit samen met de zon */
@keyframes tbo-maan {
  0%, 40.526% { opacity: 0; transform: translateY(300px); }
  46.842%, 91.053% { opacity: 1; transform: none; }
  95.263%, 100% { opacity: 0; transform: translateY(160px); }
}
/* nachtlaag: valt in met de zonsondergang, direct naar de nachtstand */
@keyframes tbo-avond { 0%, 33.684% { opacity: 0; } 40%, 91.579% { opacity: 0.62; } 97.895%, 100% { opacity: 0; } }
@keyframes tbo-stralen { 0%, 31.579%, 100% { opacity: 0; } 1.579%, 30% { opacity: 0.85; } }
/* ramen: alleen aan zolang de batterij de woning voedt (C) */
@keyframes tbo-ramen { 0%, 48.947%, 68.421%, 100% { opacity: 0; } 50.526%, 66.842% { opacity: 1; } }
/* A: zon, panelen, meterkast, batterij: één gele stroom */
@keyframes tbo-p-zon { 0%, 31.579%, 100% { opacity: 0; } 1.579%, 30% { opacity: 1; } }
@keyframes tbo-p-pv { 0%, 31.579%, 100% { opacity: 0; } 1.579%, 30% { opacity: 1; } }
@keyframes tbo-p-laden { 0%, 31.579%, 100% { opacity: 0; } 1.579%, 30% { opacity: 1; } }
/* A: eerst kaart Zonnepanelen, daarna kaart Thuisbatterij */
@keyframes tbo-p-k1 { 0%, 15.263%, 100% { opacity: 0; } 1.579%, 13.684% { opacity: 1; } }
@keyframes tbo-p-k2 { 0%, 15.263%, 31.579%, 100% { opacity: 0; } 16.842%, 30% { opacity: 1; } }
/* C */
@keyframes tbo-p-ontladen { 0%, 48.947%, 68.421%, 100% { opacity: 0; } 50.526%, 66.842% { opacity: 1; } }
@keyframes tbo-p-k3 { 0%, 48.947%, 68.421%, 100% { opacity: 0; } 50.526%, 66.842% { opacity: 1; } }
/* D */
@keyframes tbo-p-inkoop { 0%, 70.526%, 90%, 100% { opacity: 0; } 72.105%, 88.421% { opacity: 1; } }
@keyframes tbo-p-k4 { 0%, 70.526%, 90%, 100% { opacity: 0; } 72.105%, 88.421% { opacity: 1; } }
@keyframes tbo-chip-inkoop { 0%, 70.526% { opacity: 0; transform: translateY(4px); } 72.105%, 88.421% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(-2px); } }
/* laadstreep: A 10 naar 50%, C 50 naar 15%, D 15 naar 100%, E onzichtbaar terug naar 10% */
@keyframes tbo-vul {
  0%, 1.579% { transform: scaleY(0.1); opacity: 1; }
  28.421%, 50.526% { transform: scaleY(0.5); }
  66.842%, 72.105% { transform: scaleY(0.15); }
  88.421%, 92.105% { transform: scaleY(1); opacity: 1; }
  94.211% { transform: scaleY(1); opacity: 0; }
  94.737% { transform: scaleY(0.1); opacity: 0; }
  96.842%, 100% { transform: scaleY(0.1); opacity: 1; }
}
@keyframes tbo-k1 { 0%, 15.263%, 100% { transform: none; } 1.579%, 13.684% { transform: scale(1.03); } }
@keyframes tbo-k1-aan { 0%, 15.263%, 100% { opacity: 0; } 1.579%, 13.684% { opacity: 1; } }
@keyframes tbo-k2 { 0%, 15.263%, 31.579%, 100% { transform: none; } 16.842%, 30% { transform: scale(1.03); } }
@keyframes tbo-k2-aan { 0%, 15.263%, 31.579%, 100% { opacity: 0; } 16.842%, 30% { opacity: 1; } }
@keyframes tbo-k3 { 0%, 48.947%, 68.421%, 100% { transform: none; } 50.526%, 66.842% { transform: scale(1.03); } }
@keyframes tbo-k3-aan { 0%, 48.947%, 68.421%, 100% { opacity: 0; } 50.526%, 66.842% { opacity: 1; } }
@keyframes tbo-k4 { 0%, 70.526%, 90%, 100% { transform: none; } 72.105%, 88.421% { transform: scale(1.03); } }
@keyframes tbo-k4-aan { 0%, 70.526%, 90%, 100% { opacity: 0; } 72.105%, 88.421% { opacity: 1; } }

/* onder 1240: kop boven, beeld over de volle breedte, kaartjes eronder */
@media (max-width: 1239px) {
  .tb-ov { aspect-ratio: auto; background: none; border-radius: 0; }
  .tb-ov-kop { position: static; }
  .tb-ov-scene {
    position: relative; inset: auto;
    margin-top: 16px;
    aspect-ratio: 2600 / 1382;
    background: var(--ov-bg);
    border-radius: var(--r-xl);
    overflow: hidden;
  }
  .tb-ov-doek { inset: 0 auto 0 -23.58%; width: 142.31%; border-radius: 0; overflow: visible; }
  .tbo-naar-kaart, .tbo-poort--k1, .tbo-poort--k2, .tbo-poort--k3, .tbo-poort--k4 { visibility: hidden; }
  .tb-ov-svg { --ov-p: 70; }
  .tbo-punt { stroke-width: 20; }
  .tbo-gloed { stroke-width: 44; }
  .tbo-basis { stroke-width: 7; }
  .tbo-knoop circle { r: 16px; stroke-width: 8; }
  .tb-ov-kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
  .tb-ov-kaart { position: relative; inset: auto; width: auto; box-shadow: var(--sh-sm); border: 1px solid var(--line); animation-name: none; }
  .tb-ov-kaart::after { animation-name: none; }
}
@media (max-width: 860px) {
  .tb-ov-scene { aspect-ratio: 2000 / 1382; }
  .tb-ov-doek { left: -45.65%; width: 185%; }
}
@media (max-width: 640px) {
  .tb-ov-kaarten { grid-template-columns: 1fr; gap: 10px; }
  .tb-ov-kaart { padding: 14px 16px 16px; }
  .tb-ov-kaart p { margin-top: 8px; }
  .tbo-chip { padding: 4px 9px; font-size: 0.6875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-ov, .tb-ov *, .tb-ov *::after { animation: none !important; }
  .tbo-zon, .tbo-poort--zon, .tbo-poort--k1, .tbo-poort--pv, .tbo-poort--laden, .tbo-poort--k2, .tbo-poort--k3 { opacity: 1; }
  .tbo-stralen { opacity: 0.85; }
  .tb-ov-kaart--2::after { opacity: 1; }
  .tbo-lading-vul { transform: scaleY(0.7); }
}

/* ---- warmtepomp #overzicht: winterhuis met schakelaar Hybride / All-electric ----
   Broertje van .tb-ov (thuisbatterij): zelfde maatvoering (viewBox 3700x1382, beeld op
   dezelfde plek), zelfde kaartjes, zelfde breekpunten. Maan staat vast (zelfde als .tbo-maan).
   Alleen lijnen en gloed; ketel, boiler, gasmeter en douche zitten in het beeld zelf
   (één beeld per stand). Coördinaten van de lijnen: WP_OV_PLEKKEN in site.js.
   Per stand één lus van 17 s; wisselen start de lus opnieuw.
   Strikt na elkaar, één ding tegelijk:
   0,4 s     buitenunit draait (kaart Buitenunit)
   2,0 s     groen spoor van de unit het huis in (kaart Warmtepomp)
   3,8 s     ramen beneden gloeien warmer (kaart Woning); 5,8 tot 6,4 s alles uit
   6,8 s     douchen (kaart Gasketel / Boiler):
     Hybride        6,8 oranje spoor gasmeter, ketel, bovenraam; 7,5 ketel gloeit; 8,6 raam gloeit; 9,0 label
     All-electric   6,8 unit draait; 7,4 groen spoor unit, boiler, bovenraam; 8,0 boiler gloeit; 9,2 raam; 9,6 label
   13,8 tot 15,0 s  label weg, alles uit; 15,0 tot 17,0 s rust
   Sneeuw valt los daarvan de hele tijd (twee lagen, alleen transform). */
.wp-ov {
  --ov-bg: rgb(23, 37, 72);      /* achtergrond van het beeld zelf, loopt naadloos door */
  --ov-lus: 17s;
  --ov-groen: #4A9A24;
  --ov-gas: #F08A24;
  position: relative;
  aspect-ratio: 3700 / 1382;
  background: var(--ov-bg);
  border-radius: var(--r-xl);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.wp-ov-kop { position: absolute; z-index: 3; top: clamp(16px, 2.3vw, 30px); left: 3.5%; }
.wp-ov-kop .h2 { color: #fff; }
.wp-ov-kop .eyebrow, .wp-ov-kop .eyebrow .ico { color: var(--navy-tint); }
.wp-ov-scene, .wp-ov-doek { position: absolute; inset: 0; }
.wp-ov-scene { border-radius: inherit; }
.wp-ov-doek { overflow: hidden; border-radius: inherit; }
.wp-ov-beeld, .wp-ov-beeld img, .wp-ov-svg { pointer-events: none; -webkit-user-drag: none; }
.wp-ov-beeld {
  position: absolute; left: 28.784%; top: 13.748%; width: 46.849%; height: 84.175%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.wp-ov-beeld img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wp-ov-beeld { transition: opacity 0.45s var(--ease); }
.wp-ov-beeld--e { opacity: 0; }
.wp-ov.toon-e .wp-ov-beeld--e { opacity: 1; }
.wp-ov.toon-e .wp-ov-beeld--h { opacity: 0; }
.wp-ov-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; --ov-p: 44; }

/* schakelaar: rechtsboven op de donkere scene */
.wp-ov-schakel { position: absolute; z-index: 3; top: clamp(16px, 2.3vw, 30px); right: 3.5%; display: flex; gap: 8px; }
.wp-ov-knop:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.wp-ov-knop:active { transform: scale(0.98); }
.wp-ov-knop { background: transparent; border-color: rgba(255, 255, 255, 0.32); color: #fff; }
.wp-ov-knop:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.wp-ov-knop[aria-pressed="true"], .wp-ov-knop[aria-pressed="true"]:hover { background: #fff; border-color: #fff; color: var(--navy); }

/* kaartjes (zelfde als .tb-ov-kaart) */
.wp-ov-kaarten { list-style: none; margin: 0; padding: 0; }
.wp-ov-kaart {
  position: absolute; z-index: 2;
  width: 22%;
  display: grid; grid-template-columns: 36px 1fr; align-items: center; column-gap: 12px;
  padding: 14px 16px 15px;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  transform-origin: 50% 50%;
  animation: var(--ov-lus) ease-in-out infinite;
}
/* kaartje 4 wisselt mee met de schakelaar (Hybride = Cv-ketel, All-electric = Boiler) */
.wp-ov.is-e .wpo-alleen-h, .wp-ov:not(.is-e) .wpo-alleen-e { display: none; }
.wp-ov-kaart::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px var(--ov-groen), var(--sh-lg);
  opacity: 0;
  animation: var(--ov-lus) ease-in-out infinite;
}
.wp-ov-ico {
  width: 36px; height: 36px; border-radius: var(--r-xs);
  display: grid; place-items: center;
  background: var(--navy-tint); color: var(--navy);
}
.wp-ov-ico .ico { width: 18px; height: 18px; }
.wp-ov-kaart h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: var(--text-1); }
.wp-ov-kaart p { grid-column: 1 / -1; margin-top: 8px; font-size: 0.8125rem; line-height: 1.45; color: var(--text-2); }
.wp-ov-kaart--1 { left: 3.5%; top: 27%; animation-name: wpo-k1; }
.wp-ov-kaart--2 { left: 74.6%; top: 17%; animation-name: wpo-k2; }
.wp-ov-kaart--3 { left: 3.5%; bottom: 4%; animation-name: wpo-k3; }
.wp-ov-kaart--4 { left: 74.6%; bottom: 4%; animation-name: wpo-k4; }
.wp-ov-kaart--1::after { animation-name: wpo-k1-aan; }
.wp-ov-kaart--2::after { animation-name: wpo-k2-aan; }
.wp-ov-kaart--3::after { animation-name: wpo-k3-aan; }
.wp-ov-kaart--4::after { animation-name: wpo-k4-aan; }

/* stand: alleen de onderdelen van de gekozen stand bestaan */
.wp-ov:not(.is-e) .wpo-e, .wp-ov.is-e .wpo-h { display: none; }

/* lijnen */
.wpo-basis { stroke: var(--navy); stroke-opacity: 0.28; stroke-width: 4; }
.wpo-spoor { stroke-width: 6; stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: var(--ov-lus) linear infinite; }
.wpo-punt { stroke-width: 12; stroke-dasharray: 0 calc(var(--ov-p) * 1px); animation: wpo-stroom 0.22s linear infinite; }
.wpo-gloed { stroke-width: 30; stroke-opacity: 0.25; stroke-dasharray: 0 calc(var(--ov-p) * 1px); animation: wpo-stroom 0.22s linear infinite; }
.wpo-groen { stroke: var(--ov-groen); }
.wpo-gas { stroke: var(--ov-gas); }
.wpo-knoop circle { stroke-opacity: 0.35; }
.wpo-poort, .wpo-loopt { opacity: 0; animation: var(--ov-lus) ease-in-out infinite; }
.wpo-poort--f1 { animation-name: wpo-p-f1; }
.wpo-spoor--f1 { animation-name: wpo-s-f1; }
.wpo-loopt--f1 { animation-name: wpo-l-f1; }

/* ramen beneden */
.wpo-ramen { opacity: 0; animation: wpo-ramen var(--ov-lus) ease-in-out infinite; }

/* buitenunit: wieken, ring en wasem */
.wpo-unit { opacity: 0; animation: wpo-unit-h var(--ov-lus) ease-in-out infinite; }
.wp-ov.is-e .wpo-unit { animation-name: wpo-unit-e; }
.wpo-wieken, .wpo-ring { transform-box: fill-box; transform-origin: center; }
.wpo-wieken { animation: wpo-draai 0.5s linear infinite; }
.wpo-ring { stroke: var(--ov-groen); stroke-opacity: 0.85; animation: wpo-draai 2.6s linear infinite; }
.wpo-puf { opacity: 0; transform-box: fill-box; transform-origin: center; animation: wpo-puf 2.4s ease-out infinite; }
.wpo-puf--2 { animation-delay: -0.8s; }
.wpo-puf--3 { animation-delay: -1.6s; }

/* fase 2: lijn naar het bovenraam, gloed op de plek van ketel, boiler en raam */
.wpo-poort--g { animation-name: wpo-p-g; }
.wpo-spoor--g { animation-name: wpo-s-g; }
.wpo-loopt--g { animation-name: wpo-l-g; }
.wpo-poort--e { animation-name: wpo-p-e; }
.wpo-spoor--e { animation-name: wpo-s-e; }
.wpo-loopt--e { animation-name: wpo-l-e; }
.wpo-plek { opacity: 0; animation: var(--ov-lus) ease-in-out infinite; }
.wpo-plek--ketel { animation-name: wpo-ketel; }
.wpo-plek--boiler { animation-name: wpo-boiler; }
.wpo-plek--raam { animation-name: wpo-raam-h; }
.wp-ov.is-e .wpo-plek--raam { animation-name: wpo-raam-e; }
.wpo-knoop--fase2 { opacity: 0; animation: wpo-knoop2 var(--ov-lus) ease-in-out infinite; }
.wpo-chip {
  position: absolute; z-index: 2;
  left: 55.2%; top: 35.2%;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--r-pill);
  background: #fff; color: var(--navy);
  font-size: 0.8125rem; font-weight: 700; line-height: 1.2;
  white-space: nowrap;
  box-shadow: var(--sh-md);
  opacity: 0;
  translate: -50% 0;
  pointer-events: none;
  animation: var(--ov-lus) ease-in-out infinite;
}
.wpo-chip i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ov-groen); }
.wpo-chip--h i { background: var(--ov-gas); }
.wpo-chip--h { animation-name: wpo-chip-h; }
.wpo-chip--e { animation-name: wpo-chip-e; }
.wp-ov:not(.is-e) .wpo-chip--e, .wp-ov.is-e .wpo-chip--h { display: none; }

/* sneeuw: twee lagen stippen die alleen verschuiven (transform), geen script */
.wpo-sneeuw { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.wpo-vlok {
  position: absolute; left: -4%; width: 108%; top: -100%; height: 200%;
  will-change: transform;
  animation: wpo-val 19s linear infinite;
}
.wpo-vlok--ver {
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 18% 22%, #fff 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 64% 71%, #fff 0 1.3px, transparent 2px),
    radial-gradient(circle at 41% 48%, #fff 0 1px, transparent 1.7px),
    radial-gradient(circle at 83% 12%, #fff 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 7% 87%, #fff 0 1.1px, transparent 1.8px);
  background-size: 263px 25%, 337px 16.667%, 419px 12.5%, 491px 10%, 571px 25%;
}
.wpo-vlok--dicht {
  opacity: 0.8;
  animation-duration: 12s;
  animation-delay: -5s;
  background-image:
    radial-gradient(circle at 30% 34%, #fff 0 2px, transparent 2.8px),
    radial-gradient(circle at 76% 80%, #fff 0 1.8px, transparent 2.6px),
    radial-gradient(circle at 52% 8%, #fff 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 91% 55%, #fff 0 2.2px, transparent 3px);
  background-size: 389px 16.667%, 457px 25%, 523px 12.5%, 613px 10%;
}

/* buiten beeld stil */
.wp-ov.is-stil *, .wp-ov.is-stil *::after { animation-play-state: paused !important; }

@keyframes wpo-stroom { to { stroke-dashoffset: calc(var(--ov-p) * -1px); } }
@keyframes wpo-draai { to { transform: rotate(360deg); } }
@keyframes wpo-puf {
  0% { opacity: 0; transform: translateY(10px) scale(0.5); }
  25% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-150px) scale(1.6); }
}
@keyframes wpo-val {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(14px, 25%, 0); }
  100% { transform: translate3d(0, 50%, 0); }
}

/* fase 1, beide standen */
@keyframes wpo-unit-h { 0%, 2.353%, 37.647%, 100% { opacity: 0; } 5.882%, 34.118% { opacity: 1; } }
@keyframes wpo-unit-e { 0%, 2.353%, 37.647%, 40%, 88.235%, 100% { opacity: 0; } 5.882%, 34.118%, 42.353%, 84.706% { opacity: 1; } }
@keyframes wpo-p-f1 { 0%, 11.765%, 37.647%, 100% { opacity: 0; } 12.353%, 34.118% { opacity: 1; } }
@keyframes wpo-s-f1 { 0%, 11.765% { stroke-dashoffset: 100; } 17.647%, 38.235% { stroke-dashoffset: 0; } 38.824%, 100% { stroke-dashoffset: 100; } }
@keyframes wpo-l-f1 { 0%, 17.059% { opacity: 0; } 18.824%, 100% { opacity: 1; } }
@keyframes wpo-ramen { 0%, 22.353%, 37.647%, 100% { opacity: 0; } 25.882%, 34.118% { opacity: 1; } }

/* kaartjes, één tegelijk */
@keyframes wpo-k1 { 0%, 12.353%, 100% { transform: none; } 4.706%, 10.588% { transform: scale(1.03); } }
@keyframes wpo-k1-aan { 0%, 2.353%, 12.353%, 100% { opacity: 0; } 4.706%, 10.588% { opacity: 1; } }
@keyframes wpo-k2 { 0%, 12.353%, 22.941%, 100% { transform: none; } 14.118%, 21.176% { transform: scale(1.03); } }
@keyframes wpo-k2-aan { 0%, 12.353%, 22.941%, 100% { opacity: 0; } 14.118%, 21.176% { opacity: 1; } }
@keyframes wpo-k3 { 0%, 22.941%, 36.471%, 100% { transform: none; } 24.706%, 34.118% { transform: scale(1.03); } }
@keyframes wpo-k3-aan { 0%, 22.941%, 36.471%, 100% { opacity: 0; } 24.706%, 34.118% { opacity: 1; } }
@keyframes wpo-k4 { 0%, 40%, 84.706%, 100% { transform: none; } 42.353%, 82.353% { transform: scale(1.03); } }
@keyframes wpo-k4-aan { 0%, 40%, 84.706%, 100% { opacity: 0; } 42.353%, 82.353% { opacity: 1; } }

/* fase 2 Hybride */
@keyframes wpo-p-g { 0%, 40%, 88.235%, 100% { opacity: 0; } 40.588%, 84.706% { opacity: 1; } }
@keyframes wpo-s-g { 0%, 40% { stroke-dashoffset: 100; } 50.588%, 88.824% { stroke-dashoffset: 0; } 89.412%, 100% { stroke-dashoffset: 100; } }
@keyframes wpo-l-g { 0%, 50% { opacity: 0; } 51.765%, 100% { opacity: 1; } }
@keyframes wpo-ketel { 0%, 43.529%, 88.235%, 100% { opacity: 0; } 46.471%, 84.706% { opacity: 1; } }
@keyframes wpo-raam-h { 0%, 50%, 88.235%, 100% { opacity: 0; } 52.941%, 84.706% { opacity: 1; } }
@keyframes wpo-chip-h { 0%, 52.941% { opacity: 0; transform: translateY(4px); } 55.294%, 81.176% { opacity: 1; transform: none; } 83.529%, 100% { opacity: 0; transform: translateY(-2px); } }
@keyframes wpo-knoop2 { 0%, 38.824%, 88.235%, 100% { opacity: 0; } 40.588%, 84.706% { opacity: 1; } }

/* fase 2 All-electric */
@keyframes wpo-p-e { 0%, 43.529%, 88.235%, 100% { opacity: 0; } 44.118%, 84.706% { opacity: 1; } }
@keyframes wpo-s-e { 0%, 43.529% { stroke-dashoffset: 100; } 54.118%, 88.824% { stroke-dashoffset: 0; } 89.412%, 100% { stroke-dashoffset: 100; } }
@keyframes wpo-l-e { 0%, 53.529% { opacity: 0; } 55.294%, 100% { opacity: 1; } }
@keyframes wpo-boiler { 0%, 46.471%, 88.235%, 100% { opacity: 0; } 49.412%, 84.706% { opacity: 1; } }
@keyframes wpo-raam-e { 0%, 53.529%, 88.235%, 100% { opacity: 0; } 56.471%, 84.706% { opacity: 1; } }
@keyframes wpo-chip-e { 0%, 56.471% { opacity: 0; transform: translateY(4px); } 58.824%, 81.176% { opacity: 1; transform: none; } 83.529%, 100% { opacity: 0; transform: translateY(-2px); } }

/* onder 1240: kop boven, beeld over de volle breedte, schakelaar en kaartjes eronder (zelfde als .tb-ov) */
@media (max-width: 1239px) {
  .wp-ov { aspect-ratio: auto; background: none; border-radius: 0; }
  .wp-ov-kop { position: static; }
  .wp-ov-kop .h2 { color: var(--text-1); }
  .wp-ov-kop .eyebrow { color: var(--green-700); }
  .wp-ov-kop .eyebrow .ico { color: var(--green-500); }
  .wp-ov-scene {
    position: relative; inset: auto;
    margin-top: 16px;
    aspect-ratio: 2600 / 1382;
    background: var(--ov-bg);
    border-radius: var(--r-xl);
    overflow: hidden;
  }
  .wp-ov-doek { inset: 0 auto 0 -23.58%; width: 142.31%; border-radius: 0; overflow: visible; }
  .wp-ov-svg { --ov-p: 70; }
  .wpo-punt { stroke-width: 20; }
  .wpo-gloed { stroke-width: 44; }
  .wpo-basis { stroke-width: 7; }
  .wpo-spoor { stroke-width: 9; }
  .wpo-knoop circle { r: 16px; stroke-width: 8; }
  .wp-ov-schakel { position: static; margin-top: 12px; }
  .wp-ov-knop { background: #fff; border-color: var(--line-strong); color: var(--text-1); min-height: 44px; }
  .wp-ov-knop:hover { background: #fff; border-color: var(--green-500); color: var(--green-700); }
  .wp-ov-knop[aria-pressed="true"], .wp-ov-knop[aria-pressed="true"]:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
  .wp-ov-knop:focus-visible { outline-color: var(--navy); }
  .wp-ov-kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
  .wp-ov-kaart { position: relative; inset: auto; width: auto; box-shadow: var(--sh-sm); border: 1px solid var(--line); animation-name: none; }
  .wp-ov-kaart::after { animation-name: none; }
}
@media (max-width: 860px) {
  .wp-ov-scene { aspect-ratio: 2000 / 1382; }
  .wp-ov-doek { left: -45.65%; width: 185%; }
}
@media (max-width: 640px) {
  .wp-ov-schakel .wp-ov-knop { flex: 1 1 0; }
  .wp-ov-kaarten { grid-template-columns: 1fr; gap: 10px; }
  .wp-ov-kaart { padding: 14px 16px 16px; }
  .wpo-chip { padding: 4px 9px 4px 8px; font-size: 0.6875rem; gap: 5px; }
  .wpo-chip i { width: 6px; height: 6px; }
}

/* stil eindbeeld: douchen van de gekozen stand, geen sneeuw */
@media (prefers-reduced-motion: reduce) {
  .wp-ov *, .wp-ov *::after { animation: none !important; }
  .wpo-sneeuw { display: none; }
  .wpo-poort--g, .wpo-poort--e, .wpo-loopt--g, .wpo-loopt--e, .wpo-plek, .wpo-knoop--fase2, .wpo-chip { opacity: 1; }
  .wpo-spoor { stroke-dashoffset: 0; }
  .wp-ov-kaart--4::after { opacity: 1; }
  .wp-ov.is-e .wpo-unit { opacity: 1; }
  .wpo-puf { opacity: 0.7; }
  .wp-ov-beeld { transition: none; }
}

/* ---------------------------------------------- voordelen: vier kaartjes */
.zp-vd {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.zp-vd-kaart {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto 1fr;
  align-items: center; column-gap: 14px;
  padding: 22px 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}
.zp-vd-ico {
  width: 40px; height: 40px; border-radius: var(--r-xs);
  display: grid; place-items: center;
  background: var(--navy-tint); color: var(--navy);
}
.zp-vd-ico .ico { width: 20px; height: 20px; }
.zp-vd-kaart h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: var(--text-1); text-wrap: balance; }
.zp-vd-kaart p { grid-column: 1 / -1; align-self: start; margin-top: 14px; font-size: 0.9375rem; line-height: 1.6; color: var(--text-2); }
@media (max-width: 1100px) {
  .zp-vd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .zp-vd { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
  .zp-vd-kaart { padding: 18px 18px 20px; }
  .zp-vd-kaart p { margin-top: 10px; }
}

/* ---------------------------------------------- keuze (warmtepomp): intro + foto, twee keuzekaarten, knop */
.wp-keuze-rij { align-items: stretch; }
.wp-keuze-rij .wp-keuze-tekst { align-self: center; padding-block: 8px; }
.wp-keuze-rij .media-frame { height: 100%; min-height: 300px; }
.wp-keuze-rij .media-frame img { position: absolute; inset: 0; aspect-ratio: auto; }
.zp-vd.wp-keuze { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 48px); }
.wp-keuze .zp-vd-kaart { grid-template-rows: auto 1fr auto; padding: 26px 26px 24px; }
.wp-keuze .zp-vd-kaart h3 { font-size: 1.0625rem; }
.wp-keuze .wp-keuze-past {
  display: flex; align-items: center; gap: 8px;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.4; color: var(--text-1);
}
.wp-keuze .wp-keuze-past .ico { width: 16px; height: 16px; flex: none; color: var(--navy); }
.wp-keuze-cta { margin-top: 28px; }
@media (max-width: 860px) {
  .wp-keuze-rij .media-frame { height: auto; min-height: 0; }
  .wp-keuze-rij .media-frame img { position: static; aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .zp-vd.wp-keuze { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .wp-keuze .zp-vd-kaart { padding: 20px 20px 18px; }
  .wp-keuze .wp-keuze-past { margin-top: 16px; padding-top: 14px; }
  .wp-keuze-cta { margin-top: 22px; }
  .wp-keuze-cta .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.3; }
}

/* ---------------------------------------------- opbrengst: zes kaartjes */
.zp-opb {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px;
}
.zp-opb-kaart {
  display: flex; flex-direction: column;
  padding: 20px 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  font-variant-numeric: tabular-nums;
}
.zp-opb-aantal {
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: var(--text-1);
}
.zp-opb-euro {
  font-size: clamp(1.5rem, 1.1rem + 0.9vw, 1.875rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
  color: var(--navy); white-space: nowrap;
}
.zp-opb-per { margin-top: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--text-3); }
.zp-opb-kwh { margin-top: 14px; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; color: var(--text-2); }
.zp-opb-noot { margin-top: 16px; }
@media (max-width: 1100px) {
  .zp-opb { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .zp-opb { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
  .zp-opb-kaart { padding: 16px 16px 18px; }
  .zp-opb-aantal { padding-bottom: 12px; margin-bottom: 12px; font-size: 0.9375rem; }
  .zp-opb-kwh { margin-top: 10px; }
}
.subnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.subnav .row { display: flex; gap: 4px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.subnav .row::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  font-size: 0.875rem; font-weight: 700;
  color: var(--text-3);
  transition: all 0.2s var(--ease);
}
.subnav a:hover { color: var(--text-1); background: var(--surface-2); }
.subnav a.is-active { background: var(--green-50); color: var(--green-800); }

.reason {
  display: flex; gap: 16px;
  padding-block: 26px;
  border-top: 1px solid var(--line);
}
.reason .ico-wrap { color: var(--green-600); flex: none; margin-top: 2px; }
.reason .ico { width: 21px; height: 21px; }
.reason h3 { font-size: 1.0625rem; letter-spacing: -0.025em; }
.reason p { margin-top: 8px; font-size: 0.9375rem; }

.vsteps { position: relative; margin-top: 34px; }
.vsteps::before {
  content: ""; position: absolute;
  left: 19px; top: 14px; bottom: 14px; width: 2px;
  background: linear-gradient(to bottom, var(--navy), var(--line));
  border-radius: 2px;
}
.vstep { position: relative; display: flex; gap: 20px; }
.vstep + .vstep { margin-top: 30px; }
.vstep .n {
  position: relative;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green-500); color: #fff;
  display: grid; place-items: center;
  font-size: 0.8125rem; font-weight: 800;
  flex: none;
  box-shadow: 0 0 0 6px var(--surface-2);
}
.vstep h3 { font-size: 1.0625rem; letter-spacing: -0.025em; }
.vstep p { margin-top: 7px; font-size: 0.9375rem; }

.combi {
  display: flex; align-items: center; gap: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px;
  background: #fff;
  transition: all 0.28s var(--ease);
}
.combi:hover { border-color: var(--green-500); transform: translateY(-3px); box-shadow: var(--sh-md); }
.combi img { width: 104px; height: 84px; object-fit: contain; border-radius: var(--r-md); flex: none; mix-blend-mode: multiply; }
.combi .cap { display: block; font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-700); font-weight: 800; }
.combi .t { display: flex; align-items: center; gap: 8px; font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-1); margin-top: 3px; }
.combi .t .ico { width: 17px; height: 17px; color: var(--green-600); transition: transform 0.25s var(--ease); }
.combi:hover .t .ico { transform: translateX(4px); }
.combi p { font-size: 0.875rem; color: var(--text-3); margin-top: 3px; }

/* ================================================================ ARTIKEL */
.prose { max-width: 68ch; margin-inline: auto; }
.prose p { margin-top: 18px; font-size: 1.0625rem; line-height: 1.72; color: var(--text-2); }
.prose h2 { margin-top: 52px; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.prose h3 { margin-top: 34px; }
.prose strong { color: var(--text-1); font-weight: 700; }
.prose ul { margin-top: 18px; display: grid; gap: 11px; }
.prose li { display: flex; gap: 12px; font-size: 1rem; }
.prose li .ico { width: 18px; height: 18px; color: var(--green-600); flex: none; margin-top: 4px; }

.callout {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
  background: linear-gradient(150deg, var(--green-50) 0%, #fff 70%);
  margin-top: 26px;
}
.callout .k { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.callout .v { font-size: clamp(1.85rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.04em; color: var(--green-700); margin-top: 10px; }

/* ============================================================ VOORWAARDEN */
.av-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.av-toc { position: sticky; top: calc(var(--nav-h) + 24px); max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; }
.av-toc ol { display: grid; gap: 2px; margin-top: 16px; }
.av-toc a {
  display: grid; grid-template-columns: 24px 1fr; gap: 6px;
  padding: 6px 8px; border-radius: var(--r-xs);
  font-size: 0.8125rem; color: var(--text-2);
  transition: all 0.18s var(--ease);
}
.av-toc a:hover { background: var(--surface-2); color: var(--green-700); }
.av-toc a .n { color: var(--text-3); font-variant-numeric: tabular-nums; }
.av-art { border-top: 1px solid var(--line); padding-top: 34px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.av-art + .av-art { margin-top: 40px; }
.av-art h2 { display: flex; gap: 14px; font-size: clamp(1.25rem, 2vw, 1.625rem); }
.av-art h2 .n { color: var(--green-500); font-variant-numeric: tabular-nums; }
.av-art ol { margin-top: 22px; display: grid; gap: 16px; }
.av-art li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; }
.av-art li .ln { font-size: 0.875rem; color: var(--text-3); font-variant-numeric: tabular-nums; padding-top: 2px; }
.av-variant { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); padding: 20px; }
.av-variant .lbl { font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.av-variant dt { font-size: 0.875rem; font-weight: 800; color: var(--text-1); }
.av-variant dd { margin: 6px 0 0; }
.av-variant .sep { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }

/* ============================================================== POSTCODE */
.pc-form { display: flex; flex-wrap: wrap; gap: 12px; }
.pc-input {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: var(--r-pill);
  padding: 15px 20px;
  font-size: 1rem;
  color: var(--text-1);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.pc-input:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 4px rgba(11, 42, 91, 0.15); }
.pc-input--pc { padding-left: 44px; width: 190px; }
.pc-input--nr { width: 120px; }
.pc-wrap { position: relative; }
.pc-wrap .ico { position: absolute; left: 17px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: var(--green-600); pointer-events: none; }
.pc-error { margin-top: 12px; font-size: 0.875rem; color: #C0392B; font-weight: 600; }
.pc-result {
  margin-top: 20px;
  border: 1px solid rgba(11, 42, 91, 0.2);
  background: var(--navy-tint);
  border-radius: var(--r-md);
  padding: 20px;
  display: none;
}
.pc-result.is-on { display: block; }

.gem-select {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: var(--r-pill);
  padding: 11px 40px 11px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-1);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7A73' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 15px;
}
.gem-select:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 4px rgba(11, 42, 91, 0.15); }

/* ======================================================== FOTOPANEEL
   Vervangt het donkere gradientpaneel: echte persfoto met leesbare
   donkere verloopdek en een groot cijfer erop. Zelfde maatvoering en
   radius als .media-frame, zodat de rijen optisch gelijk blijven.
   ================================================================== */
.photo-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.74);
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(26px, 3.4vw, 44px);
  box-shadow: var(--sh-md);
  isolation: isolate;
}
.photo-panel > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.photo-panel::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(6, 9, 7, 0.94) 0%, rgba(6, 9, 7, 0.76) 38%, rgba(6, 9, 7, 0.34) 78%, rgba(6, 9, 7, 0.12) 100%),
    linear-gradient(to right, rgba(11, 42, 91, 0.42) 0%, transparent 70%);
}
.photo-panel .big {
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #fff;
}
.photo-panel .cap {
  margin-top: 10px;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy-tint);
}
.photo-panel .rule {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.9375rem;
  max-width: 40ch;
}
.photo-panel--tall { aspect-ratio: 4 / 5; }

/* ================================================= UURPRIJZEN (#uurprijzen)
   Blokkop zoals #voordelen, daaronder een witte kaart over de volle
   breedte: een gesimuleerde prijslijn die doorloopt (canvas,
   thuisbatterij-uurprijzen.js) en rechts de thuisbatterij als eigen SVG
   met een laadbalk die meeloopt. Laag gehouden zodat kop en kaart samen in
   één scherm passen. Groen = laden (--ov-groen van het overzichtsblok),
   navy = verkopen, grijs = wachten.
   ================================================================== */
.tb-up {
  --up-groen: #4A9A24;
  margin-top: 22px;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  color: var(--text-1);
  padding: clamp(16px, 1.4vw, 24px) clamp(18px, 2.2vw, 30px);
  box-shadow: var(--sh-sm);
}
.tb-up-kop {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 24px;
}
.tb-up-titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.tb-up-kop .t { font-size: 0.9375rem; font-weight: 700; color: var(--text-1); letter-spacing: -0.02em; }
.tb-up-kop .s { font-size: 0.75rem; color: var(--text-3); font-weight: 600; }
.tb-up-lijf {
  margin-top: 12px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  height: clamp(176px, 14.4vw, 224px);
}
.tb-up-grafiek { position: relative; min-width: 0; }
.tb-up-doek { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* legenda: stip met zachte ring in de kleur van de zone */
.tb-up-legenda { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.tb-up-legenda span {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.8125rem; font-weight: 600; color: var(--text-2);
}
.tb-up-legenda i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tb-up-legenda i.is-laag { background: var(--up-groen); box-shadow: 0 0 0 3px rgba(74, 154, 36, 0.18); }
.tb-up-legenda i.is-piek { background: var(--navy); box-shadow: 0 0 0 3px rgba(11, 42, 91, 0.14); }

/* batterij: wit kastje met zachte rand op de witte kaart, stand ernaast */
.tb-up-accu {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 1.4vw, 20px);
  min-height: 0;
  padding-left: clamp(16px, 2vw, 28px);
  border-left: 1px solid var(--line);
}
.tb-up-bat {
  --vul: 0.7;
  height: 100%; width: auto; aspect-ratio: 60 / 170;
  min-height: 0; flex: none;
}
.tb-up-bat svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tb-up-bat .vloer { fill: var(--ink-800); opacity: 0.16; }
.tb-up-bat .kast { fill: url(#tbUpKast); stroke: var(--line-strong); stroke-width: 1; }
.tb-up-bat .glans { stroke: #fff; stroke-width: 1; stroke-linecap: round; opacity: 0.9; fill: none; }
.tb-up-bat .lamp, .tb-up-bat .lamp-gloed { fill: var(--up-groen); transition: opacity 0.3s var(--ease), fill 0.3s var(--ease); }
.tb-up-bat .sleuf { fill: var(--surface-3); }
.tb-up-bat .sleuf-rand { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.tb-up-bat .niveau { fill: #fff; opacity: 0.55; }
.tb-up-bat-vul { transform: translateY(calc((1 - var(--vul)) * 104px)); }

/* statuslampje: groen bij laden, navy bij verkopen, grijs bij wachten */
.tb-up[data-stand="laadt"] .lamp-gloed { opacity: 0.7; }
.tb-up[data-stand="levert"] .lamp, .tb-up[data-stand="levert"] .lamp-gloed { fill: var(--navy); }
.tb-up[data-stand="levert"] .lamp-gloed { opacity: 0.45; }
.tb-up[data-stand="wacht"] .lamp { fill: var(--line-strong); }
.tb-up[data-stand="wacht"] .lamp-gloed { opacity: 0; }
.tb-up.is-wissel .lamp-gloed { animation: tbUpWissel 0.7s var(--ease-out); }
@keyframes tbUpWissel { 0% { opacity: 0.2; } 40% { opacity: 1; } }

.tb-up-stand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tb-up-pct {
  font-size: clamp(1.375rem, 1.8vw, 1.625rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1;
  color: var(--text-1); font-variant-numeric: tabular-nums;
}
.tb-up-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 78px; padding: 6px 11px;
  border-radius: var(--r-pill);
  font-size: 0.75rem; font-weight: 700; line-height: 1;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.tb-up-pill i { width: 7px; height: 7px; border-radius: 50%; flex: none; transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.tb-up-pill b { font-weight: 700; }
.tb-up-pill.is-laadt { background: rgba(74, 154, 36, 0.12); color: var(--text-1); box-shadow: inset 0 0 0 1px rgba(74, 154, 36, 0.28); }
.tb-up-pill.is-laadt i { background: var(--up-groen); box-shadow: 0 0 0 3px rgba(74, 154, 36, 0.18); }
.tb-up-pill.is-levert { background: rgba(11, 42, 91, 0.08); color: var(--navy); box-shadow: inset 0 0 0 1px rgba(11, 42, 91, 0.26); }
.tb-up-pill.is-levert i { background: var(--navy); box-shadow: 0 0 0 3px rgba(11, 42, 91, 0.14); }
.tb-up-pill.is-wacht { background: var(--surface-3); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
.tb-up-pill.is-wacht i { background: var(--text-3); }

/* smal: grafiek over de volle breedte, batterij als rij eronder */
@media (max-width: 560px) {
  .tb-up-lijf { grid-template-columns: minmax(0, 1fr); grid-template-rows: 200px auto; gap: 16px; height: auto; }
  .tb-up-accu {
    justify-content: flex-start; gap: 16px;
    padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line);
  }
  .tb-up-bat { height: 92px; }
}

/* ------------------------------------ #uurprijzen: eerlijk over de grenzen
   Vier kaartjes in de lijn van de voordelen-kaartjes (.zp-vd-kaart), op wit:
   icoon in navy-tint rondje, titel, tekst. Rustig, niet klikbaar. */
.tb-gr { margin-top: clamp(46px, 5vw, 72px); }
.tb-gr-kop { font-size: clamp(1.75rem, 2.8vw, 2.4rem); }
.tb-gr-rij {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
/* subgrid: koppen en teksten beginnen in elke rij op dezelfde hoogte */
.tb-gr-kaart {
  display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 14px;
  padding: 20px 22px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}
.tb-gr-top { display: flex; align-items: center; gap: 14px; }
.tb-gr-ico {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--navy-tint); color: var(--navy);
}
.tb-gr-ico .ico { width: 19px; height: 19px; }
.tb-gr-kaart h3 {
  font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3;
  color: var(--text-1); text-wrap: balance;
}
.tb-gr-kaart p { font-size: 0.875rem; line-height: 1.6; color: var(--text-2); }
@media (max-width: 1024px) {
  .tb-gr-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tb-gr-rij { grid-template-columns: 1fr; gap: 12px; }
  .tb-gr-kaart { padding: 18px 18px 20px; row-gap: 12px; }
}

/* ============================================== FEITENRIJ (subsidiebedragen) */
.factgrid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  column-gap: 28px;
  border-top: 1px solid var(--line);
}
.factgrid > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.factgrid .v {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem); font-weight: 800; letter-spacing: -0.035em;
  color: var(--text-1); line-height: 1.15;
}
.factgrid .k { margin-top: 6px; font-size: 0.8125rem; color: var(--text-3); font-weight: 600; }
.on-dark .factgrid { border-color: rgba(255, 255, 255, 0.16); }
.on-dark .factgrid > div { border-color: rgba(255, 255, 255, 0.16); }
.on-dark .factgrid .v { color: #fff; }
.on-dark .factgrid .k { color: rgba(255, 255, 255, 0.6); }

/* ================================= PROMO MET FOTO-ACHTERGROND (i.p.v. gradient) */
.promo--photo { position: relative; overflow: hidden; isolation: isolate; }
.promo--photo > img.bgimg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.promo--photo::before {
  background:
    linear-gradient(160deg, rgba(6, 9, 7, 0.93) 0%, rgba(6, 9, 7, 0.78) 52%, rgba(11, 42, 91, 0.72) 100%);
  inset: 0; width: auto; height: auto; z-index: -1;
}

/* de kaartlink onderin een fotokaart uitlijnen */
.photo-card .bd .link-arrow { margin-top: auto; padding-top: 18px; font-size: 0.875rem; }

/* =============================================================== REVEAL */
.rv { opacity: 0; transform: translateY(22px); }
.rv.is-in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv.is-in { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =============================================================== RESPONSIE */
@media (max-width: 1180px) {
  .cmp-layout { grid-template-columns: 250px 1fr; }
  .offer-main { grid-template-columns: 46px minmax(0, 1.3fr) auto auto; }
  .offer-actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

@media (max-width: 1024px) {
  :root { --nav-h: 68px; }
  .nav-links, .nav-phone { display: none; }
  .burger { display: flex; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .tool-body { grid-template-columns: 1fr; }
  .cmp-layout { grid-template-columns: 1fr; }
  .cmp-filters { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .page-hero-grid { grid-template-columns: 1fr; }
  .av-layout { grid-template-columns: 1fr; }
  .av-toc { position: static; max-height: none; }
  .timeline-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 28px; }
  .timeline::before { display: none; }
  .promo { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .media-row { grid-template-columns: 1fr; }
  .media-row--rev .media-col { order: 0; }
  .offer-main { grid-template-columns: 1fr 1fr; gap: 16px; padding: 22px 20px; }
  .offer-logo { display: none; }
  .offer .price-col { text-align: right; }
  .offer-detail .inner { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .hero { min-height: 640px; }
  .hero-inner { padding-top: calc(var(--nav-h) + 48px); }
  .hero-review { border-left: 0; padding-left: 0; width: 100%; }
  .hero-stats { grid-template-columns: 1fr; gap: 18px; padding-top: 20px; }
  .hero-stats .n { font-size: 1.5rem; }
  .hero-stats > div { display: flex; align-items: baseline; gap: 12px; }
  .hero-stats .l { margin-top: 0; }
  .opt-grid { grid-template-columns: 1fr; }
  .seg-grid { grid-template-columns: repeat(3, 1fr); }
  .timeline-grid { grid-template-columns: 1fr; gap: 30px; }
  .tl-step p { max-width: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .rail { grid-auto-columns: minmax(268px, 84%); }
  .story { padding: 22px; gap: 24px; }
  .story .who { gap: 12px; padding-top: 20px; }
  .story .av { width: 44px; height: 44px; }
  .spec-row { gap: 12px; }
  .spec-row .v { font-size: 1rem; }
  .modal { padding: 10px; align-items: flex-start; }
  .stat-strip .cell { padding: 16px 8px; }
  .av-art li { grid-template-columns: 1fr; }
  .av-art li .ln { padding-top: 0; }
  .pc-input--pc, .pc-input--nr { width: 100%; }
  .pc-wrap { width: 100%; }
  .pc-form > .btn { width: 100%; }
  .combi { flex-direction: column; align-items: flex-start; }
  .combi img { width: 100%; height: 150px; }
  .photo-panel { aspect-ratio: 4 / 3; }
  .photo-panel--tall { aspect-ratio: 4 / 3; }
}

@media (max-width: 620px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .nav-right .btn { display: none; }
  .review-badge { padding: 7px 7px 7px 14px; gap: 9px; }
  .review-badge .txt { font-size: 0.75rem; }
  .footer-mark { font-size: 3.25rem; }
  .footer-top .row { padding-block: 20px; }
}

@media (max-width: 420px) {
  .offer-main { grid-template-columns: 1fr; }
  .offer .price-col { text-align: left; }
  .offer-actions { flex-direction: column; align-items: stretch; }
  .offer-actions .btn { width: 100%; }
}

/* ==========================================================================
   ZONNEPLAN-SPIEGEL — compositievarianten voor de homepage.
   Alleen layout en ritme: geen kleur-, type- of radius-tokens gewijzigd.
   ========================================================================== */

/* hero: gecentreerde compositie met award/review-strip onderaan */
.hero--center .hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero--center h1 { max-width: 17ch; }
.hero--center p.lead { max-width: 54ch; }
.hero--center .hero-cta { justify-content: center; }
.hero-foot {
  width: 100%;
  margin-top: clamp(46px, 6.5vw, 86px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 34px;
  text-align: left;
}
.hero-awards { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; }
.hero-awards .award {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.8125rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
.hero-awards .award .ico { width: 16px; height: 16px; color: var(--navy-tint); flex: none; }
.hero--center .hero-review { border-left: 0; padding-left: 0; }

/* fotokaart met hairline-voet en doorkliklabel */
.photo-card .bd p { margin-bottom: 22px; }
.photo-card .card-foot {
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.photo-card .card-foot a {
  font-size: 0.8125rem; font-weight: 700; color: var(--text-3);
  display: inline-flex; align-items: center; gap: 7px;
  transition: color 0.2s var(--ease);
}
.photo-card .card-foot a::after { content: "\203A"; font-size: 1.05rem; line-height: 1; }
.photo-card:hover .card-foot a { color: var(--green-700); }

/* review-pill op een lichte achtergrond */
.review-badge--light {
  background: #fff;
  border-color: var(--line);
  color: var(--text-1);
  box-shadow: var(--sh-sm);
}
.review-badge--light .stars { color: #F5B544; }
.review-badge--light .score { background: var(--green-700); color: #fff; }
/* keurmerk onder de kop van #verhalen: Wattje met knipoog naast het zegel WattCheck approved,
   zelfde zegel als "Digitaal ondertekend" op de offerte; niet klikbaar */
.wattcheck-badge {
  --wc-tint: #edf7e6;
  --wc-line: #d6ecc3;
  --wc-deep: #3f8a1c;
  --wc-title: #1f4a0c;
  --wc-sub: #4a6b36;
  display: flex; align-items: center;
  gap: 8px;
  width: fit-content; max-width: 100%;
  margin-top: 22px;
  cursor: default;
  user-select: none;
}
.wattcheck-badge .wc-wattje {
  display: block; flex: none;
  width: auto; height: clamp(72px, 6vw, 80px);
  filter: drop-shadow(0 2px 6px rgba(11, 42, 91, 0.14));
}
.wattcheck-badge .wc-seal {
  display: flex; align-items: center;
  gap: 11px;
  min-width: 0;
  background: var(--wc-tint);
  border: 1px solid var(--wc-line);
  border-radius: 14px;
  padding: 12px 14px;
}
.wattcheck-badge .wc-seal i {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--wc-deep);
  color: #fff;
  display: grid; place-items: center;
  flex: none;
}
.wattcheck-badge .wc-seal svg { width: 16px; height: 16px; display: block; }
.wattcheck-badge .wc-sd { min-width: 0; line-height: 1.35; }
.wattcheck-badge .wc-seal b {
  display: block;
  font-size: 13.5px; font-weight: 700;
  color: var(--wc-title);
  letter-spacing: -0.022em;
}
.wattcheck-badge .wc-seal small {
  display: block;
  font-size: 11.5px;
  color: var(--wc-sub);
  overflow-wrap: anywhere;
}
@media (max-width: 620px) {
  .wattcheck-badge { margin-top: 18px; }
}

/* twee subblokken naast elkaar boven de rekentool */
.tool-intro {
  margin-top: clamp(26px, 3vw, 38px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  max-width: 1000px;
}
.tool-intro h3 { font-size: 1.0625rem; letter-spacing: -0.025em; }
.tool-intro p { margin-top: 8px; font-size: 0.9375rem; color: var(--text-2); }

/* Wattje naast de subsidieband */
.band-side { position: relative; }
/* tafereel boven de gemeentekaart: Wattje in pak bij het gemeentehuis */
.wattje--loket {
  width: 100%;
  max-width: 430px;
  height: auto;
  margin: 0 auto clamp(14px, 1.6vw, 22px);
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.5));
}
@media (max-width: 900px) { .wattje--loket { max-width: 380px; } }
@media (max-width: 420px) { .wattje--loket { max-width: 320px; } }
.wattje--band {
  position: absolute;
  left: clamp(-146px, -10vw, -104px); bottom: -14px;
  width: clamp(94px, 9vw, 132px);
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.45));
  z-index: 2;
}

/* knoppenrij onder de slot-CTA */
.cta-actions { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* Wattje blijft ook op smallere schermen in beeld, dan meelopend in de kolom */
@media (max-width: 1180px) {
  .wattje--band { position: static; width: 100px; margin: 0 0 -16px 2px; }
}
@media (max-width: 860px) { .tool-intro { grid-template-columns: 1fr; gap: 22px; } }
/* op smal scherm blijft de hero gecentreerd, zoals de referentie */
@media (max-width: 720px) {
  .hero-foot { flex-direction: column; align-items: center; gap: 18px; text-align: center; }
  .hero-awards { flex-direction: column; align-items: center; gap: 10px; }
  .hero--center .hero-review { justify-content: center; }
}
/* in de getinte vlaggenschipsectie komt op mobiel de tekst eerst */
@media (max-width: 860px) {
  .media-row--textfirst .media-col { order: 2; }
}

/* ------------------------------- spiegel: productpagina-ritme ------------ */
/* gecentreerde tussenstatement tussen twee sectiegroepen */
.statement-band { padding-block: clamp(46px, 5vw, 74px); }
/* Badr 19 okt: scène van Overzicht dichter onder de statement-regel (productpagina's) */
.statement-band:has(+ #overzicht) { padding-bottom: 20px; }
.statement-band + #overzicht { padding-top: 16px; }
.statement--center {
  text-align: center;
  margin-inline: auto;
  max-width: 24ch;
  color: var(--navy);
}
.statement--center span { color: var(--navy); opacity: 0.5; }

/* kaartenrail met korte productdetails */
.rail--mini { grid-auto-columns: minmax(262px, 1fr); margin-top: 24px; }
.mini-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  display: flex; flex-direction: column;
  min-height: 244px;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.mini-card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--sh-md); }
.mini-card .mini-ico {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--green-50); color: var(--green-700);
  display: grid; place-items: center; flex: none;
}
.mini-card .mini-ico .ico { width: 19px; height: 19px; }
.mini-card h3 { margin-top: 22px; font-size: 1.125rem; letter-spacing: -0.03em; line-height: 1.22; }
.mini-card p { margin-top: 13px; font-size: 0.875rem; line-height: 1.6; color: var(--text-2); }

/* witte lead-kaart met vinklijst */
.lead-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  padding: clamp(30px, 4vw, 56px);
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
}
.check-list { display: grid; gap: 12px; }
.check-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.9375rem; font-weight: 600; color: var(--text-1); }
.check-list .ico { width: 18px; height: 18px; color: var(--green-600); flex: none; margin-top: 3px; }

@media (max-width: 860px) { .lead-card { grid-template-columns: 1fr; } }

/* ==========================================================================
   SPIEGEL — SUBPAGINA-COMPONENTEN
   Componenten voor de productpaginas, de energiecontract-pagina, subsidies
   en de kennisbank. Dezelfde tokens en dezelfde naamgeving als hierboven:
   blok met losse deelklassen, statusklassen met is-.
   ========================================================================== */

/* ----------------------------------------- subnav met label en iconen ---- */
.subnav--product .row { align-items: center; gap: 2px; }
.subnav-label {
  flex: none;
  margin-right: auto;
  padding-right: 24px;
  font-size: 0.875rem; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-1);
  white-space: nowrap;
}
.subnav-label span { color: var(--text-3); font-weight: 500; }
.subnav a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.subnav a .ico { width: 15px; height: 15px; color: var(--text-3); transition: color 0.2s var(--ease); }
.subnav a:hover .ico { color: var(--text-1); }
.subnav a.is-active .ico { color: var(--green-700); }
/* op pagina's met een plakkende subnav landde een ankersprong precies
   achter die balk; daar tellen we de hoogte van de subnav bij op */
html:has(.subnav) { scroll-padding-top: calc(var(--nav-h) + 68px); }

/* ------------------------------------------- hero: usps en prijsblok ---- */
.usp-checks { display: grid; gap: 12px; margin-top: 26px; }
.usp-checks li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.9375rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.usp-checks .ico { width: 18px; height: 18px; color: var(--navy-tint); flex: none; margin-top: 2px; }
.usp-checks--light li { color: var(--text-1); }
.usp-checks--light .ico { color: var(--green-600); }

.hero-price {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  margin-top: 28px;
  padding: 15px 22px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.hero-price .k { width: 100%; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: rgba(255, 255, 255, 0.55); }
.hero-price .v { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.045em; color: #fff; font-variant-numeric: tabular-nums; }
.hero-price .s { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); }

/* --------------------------------------------------------- datatabel ---- */
.dtable-wrap {
  margin-top: 26px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.dtable { width: 100%; border-collapse: collapse; min-width: 600px; }
.dtable th, .dtable td {
  text-align: left;
  padding: 15px 20px;
  font-size: 0.9375rem;
  line-height: 1.55;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.dtable thead th {
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800;
  color: var(--text-3);
  background: var(--surface-2);
  border-bottom-color: var(--line-strong);
  white-space: nowrap;
}
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr { transition: background 0.18s var(--ease); }
.dtable tbody tr:hover td { background: rgba(11, 42, 91, 0.035); }
.dtable .rowh { font-weight: 700; color: var(--text-1); }
.dtable .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtable .hi { background: rgba(11, 42, 91, 0.05); }
.dtable tbody tr:hover td.hi { background: rgba(11, 42, 91, 0.08); }
.dtable thead th.hi { background: var(--navy); color: #fff; }
.dtable .ok { color: var(--green-700); font-weight: 700; }
.dtable .no { color: #B03A2E; font-weight: 700; }
.dtable-note { margin-top: 13px; font-size: 0.78125rem; color: var(--text-3); }
.dtable-scrollhint { display: none; }

/* --------------------------------------------------- prijsprofielen ---- */
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.pcard {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  padding: clamp(24px, 2.6vw, 34px);
  display: flex; flex-direction: column;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--line-strong); }
.pcard--muted { background: var(--surface-2); box-shadow: none; }
.pcard--muted:hover { transform: none; box-shadow: none; }
.pcard .amt {
  display: flex; align-items: baseline; gap: 3px;
  font-size: clamp(2.1rem, 3.4vw, 2.9rem); font-weight: 800; letter-spacing: -0.05em;
  color: var(--text-1); font-variant-numeric: tabular-nums;
}
.pcard .amt .u { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0; color: var(--text-3); }
.pcard .tag-slot { margin-top: auto; padding-top: 30px; }
.pcard h3 { margin-top: 16px; font-size: clamp(1.25rem, 1.9vw, 1.5rem); }
.pcard p { margin-top: 11px; font-size: 0.875rem; line-height: 1.6; color: var(--text-2); }

/* ------------------------------------------------------ duo-kaartrij ---- */
.duo { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 16px; align-items: stretch; }
.duo + .duo { margin-top: 16px; }
.duo--rev { grid-template-columns: 1.14fr 0.86fr; }
.duo--rev .duo-media { order: 2; }
.duo--even { grid-template-columns: 1fr 1fr; }
.duo-media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: 340px;
  background: var(--navy-tint);
}
.duo-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.duo:hover .duo-media img { transform: scale(1.03); }
.duo-media .lbl {
  position: absolute; left: 22px; top: 20px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.75rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text-1);
  box-shadow: var(--sh-sm);
}
.duo-media .lbl .ico { width: 14px; height: 14px; color: var(--green-600); }
.duo-text {
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid var(--line);
  padding: clamp(28px, 3.4vw, 48px);
  display: flex; flex-direction: column; justify-content: center;
}
.duo-text h3 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); letter-spacing: -0.035em; }
.duo-text h4 { margin-top: 26px; font-size: 1.0625rem; }
.duo-text p { margin-top: 16px; font-size: 1rem; line-height: 1.68; color: var(--text-2); }
.duo-text p + p { margin-top: 14px; }
.duo-text .link-arrow { margin-top: 22px; }
.duo-text--tint { background: var(--navy-tint); border-color: rgba(11, 42, 91, 0.16); }
.duo-text--dark { background: var(--ink-900); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75); }
.duo-text--dark h3, .duo-text--dark h4 { color: #fff; }
.duo-text--dark p { color: rgba(255, 255, 255, 0.72); }

/* ------------------------------------------------------------ bento ---- */
.bento { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 16px; margin-top: 30px; align-items: stretch; }
.bento-head {
  border-radius: var(--r-xl);
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  padding: clamp(28px, 3.2vw, 42px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
}
.bento-head h2, .bento-head h3 { color: #fff; }
.bento-head p { font-size: 0.9375rem; line-height: 1.65; color: rgba(255, 255, 255, 0.72); }
.bento-tiles { display: grid; gap: 16px; }
.bento-tile {
  position: relative; isolation: isolate;
  border-radius: var(--r-xl); overflow: hidden;
  min-height: 216px;
  display: flex; align-items: flex-end; gap: 16px;
  padding: 26px;
  color: #fff;
  transition: transform 0.3s var(--ease);
}
.bento-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.8s var(--ease); }
.bento-tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(10, 15, 12, 0.86) 0%, rgba(10, 15, 12, 0.24) 58%, rgba(10, 15, 12, 0.06) 100%);
}
.bento-tile:hover img { transform: scale(1.05); }
.bento-tile > span { display: block; }
.bento-tile .t { display: block; font-size: clamp(1.25rem, 1.9vw, 1.5rem); font-weight: 800; letter-spacing: -0.035em; color: #fff; }
.bento-tile .d { display: block; margin-top: 6px; font-size: 0.875rem; line-height: 1.55; color: rgba(255, 255, 255, 0.76); max-width: 42ch; }
.bento-tile .go {
  margin-left: auto; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: grid; place-items: center;
  transition: all 0.25s var(--ease);
}
.bento-tile .go .ico { width: 17px; height: 17px; color: #fff; }
.bento-tile:hover .go { background: #fff; border-color: #fff; }
.bento-tile:hover .go .ico { color: var(--navy); }

/* --------------------------------------------------- specificaties ---- */
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); margin-top: 22px; }
.specs .row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding-block: 15px;
  border-bottom: 1px solid var(--line);
}
.specs .k { font-size: 0.9375rem; color: var(--text-2); }
.specs .v { font-size: 0.9375rem; font-weight: 800; color: var(--text-1); text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ reviewkaarten -- */
.revs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.rev-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  padding: 28px;
  display: flex; flex-direction: column;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.rev-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.rev-card .stars { color: #F5B544; }
.rev-card .stars .ico { width: 15px; height: 15px; }
.rev-card .q { margin-top: 16px; font-size: 0.9375rem; line-height: 1.64; color: var(--text-2); flex: 1; }
.rev-card .q strong { color: var(--text-1); font-weight: 700; }
.rev-card .who { margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.rev-card .who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.rev-card .who .n { font-size: 0.875rem; font-weight: 800; color: var(--text-1); }
.rev-card .who .m { font-size: 0.75rem; color: var(--text-3); }

/* ----------------------------------------------- horizontale stappen --- */
.hsteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 36px); margin-top: 34px; }
.hstep { position: relative; padding-top: 26px; border-top: 2px solid var(--line); }
.hstep.is-first { border-top-color: var(--navy); }
.hstep .n {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: grid; place-items: center;
  font-size: 0.8125rem; font-weight: 800;
}
.hstep h3 { margin-top: 18px; font-size: 1.0625rem; letter-spacing: -0.025em; }
.hstep p { margin-top: 9px; font-size: 0.9375rem; line-height: 1.6; color: var(--text-2); }

/* ------------------------------------------------------- info-strook --- */
.note {
  display: flex; gap: 14px;
  border-radius: var(--r-md);
  background: var(--navy-tint);
  border: 1px solid rgba(11, 42, 91, 0.16);
  padding: 18px 22px;
  margin-top: 24px;
}
.note > .ico { width: 19px; height: 19px; color: var(--navy); flex: none; margin-top: 3px; }
.note p { font-size: 0.9375rem; line-height: 1.62; color: var(--text-2); }
.note strong { color: var(--text-1); font-weight: 700; }
.note--dark { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
.note--dark > .ico { color: var(--navy-tint); }
.note--dark p { color: rgba(255, 255, 255, 0.75); }
.note--dark strong { color: #fff; }

/* ------------------------------------------------------ bedragkaarten -- */
.amt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.amt-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  padding: 28px;
  display: flex; flex-direction: column;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.amt-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--line-strong); }
.amt-card .ico-wrap {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--navy-tint); color: var(--navy);
  display: grid; place-items: center; flex: none;
}
.amt-card .ico-wrap .ico { width: 19px; height: 19px; }
.amt-card .v {
  margin-top: 22px;
  font-size: clamp(1.6rem, 2.6vw, 2.125rem); font-weight: 800; letter-spacing: -0.045em;
  color: var(--navy); font-variant-numeric: tabular-nums;
}
.amt-card h3 { margin-top: 8px; font-size: 1.0625rem; letter-spacing: -0.025em; }
.amt-card p { margin-top: 11px; font-size: 0.875rem; line-height: 1.6; color: var(--text-2); }
.amt-card .foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.78125rem; color: var(--text-3); }

/* --------------------------------------------------------- cijferrij --- */
.figrow {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-top: 36px;
}
.figrow > div { padding: 26px 24px; }
.figrow > div + div { border-left: 1px solid var(--line); }
.figrow .v { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.045em; color: var(--text-1); font-variant-numeric: tabular-nums; }
.figrow .k { margin-top: 7px; font-size: 0.78125rem; color: var(--text-3); line-height: 1.5; }

/* ========================================================== KENNISBANK === */
.kb-lead { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: clamp(24px, 3vw, 44px); align-items: start; margin-top: 34px; }
.kb-feature {
  position: relative; isolation: isolate;
  border-radius: var(--r-xl); overflow: hidden;
  min-height: 460px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(26px, 3.2vw, 44px);
  color: #fff;
}
.kb-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.9s var(--ease); }
.kb-feature::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(10, 15, 12, 0.94) 4%, rgba(10, 15, 12, 0.74) 34%, rgba(10, 15, 12, 0.3) 64%, rgba(10, 15, 12, 0.06) 100%);
}
.kb-feature:hover img { transform: scale(1.04); }
.kb-feature h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); max-width: 20ch; }
.kb-feature p { margin-top: 14px; font-size: 0.9375rem; line-height: 1.62; color: rgba(255, 255, 255, 0.8); max-width: 54ch; }
.kb-feature .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }

.kb-side .ttl { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.025em; color: var(--text-1); }
.kb-item {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 15px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}
.kb-item:first-of-type { border-top: 1px solid var(--line); margin-top: 16px; }
.kb-item img { width: 88px; height: 66px; border-radius: var(--r-sm); object-fit: cover; }
.kb-item .cat { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--green-700); }
.kb-item .t { margin-top: 5px; font-size: 0.9375rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: var(--text-1); transition: color 0.2s var(--ease); }
.kb-item:hover .t { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.kb-item .m { margin-top: 6px; font-size: 0.75rem; color: var(--text-3); }

.kb-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.kb-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.art-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 26px); margin-top: 26px; }
.art-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}
.art-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--line-strong); }
.art-card .ph { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.art-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.art-card:hover .ph img { transform: scale(1.06); }
.art-card .bd { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.art-card .cat { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--green-700); }
.art-card h3 { margin-top: 10px; font-size: 1.125rem; letter-spacing: -0.03em; line-height: 1.26; }
.art-card p { margin-top: 11px; font-size: 0.875rem; line-height: 1.6; color: var(--text-2); }
.art-card .meta {
  margin-top: auto; padding-top: 20px;
  display: flex; align-items: center; gap: 9px;
  font-size: 0.75rem; color: var(--text-3);
}
.art-card .meta .ico { width: 14px; height: 14px; }
.art-card .meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }

/* ------------------------------------------------------- responsie ----- */
@media (max-width: 1024px) {
  .pcards { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .kb-lead { grid-template-columns: 1fr; }
  .revs { grid-template-columns: 1fr 1fr; }
  .art-grid { grid-template-columns: 1fr 1fr; }
  .hsteps { grid-template-columns: 1fr 1fr; gap: 30px; }
  .figrow { grid-template-columns: 1fr 1fr; }
  .figrow > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .figrow > div:nth-child(4) { border-top: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .duo, .duo--rev, .duo--even { grid-template-columns: 1fr; }
  .duo--rev .duo-media { order: 0; }
  .duo-media { min-height: 260px; }
  .specs { grid-template-columns: 1fr; }
  .kb-feature { min-height: 380px; }
}

@media (max-width: 720px) {
  .subnav-label { display: none; }
  .revs, .art-grid, .amt-grid { grid-template-columns: 1fr; }
  .hsteps { grid-template-columns: 1fr; gap: 26px; }
  .figrow { grid-template-columns: 1fr; }
  .figrow > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .figrow > div { padding: 20px 0; }
  .dtable th, .dtable td { padding: 13px 16px; font-size: 0.875rem; }
  .dtable-scrollhint { display: block; margin-top: 10px; font-size: 0.75rem; color: var(--text-3); }
  .hero-price { width: 100%; }
  .kb-item { grid-template-columns: 72px minmax(0, 1fr); }
  .kb-item img { width: 72px; height: 56px; }
}


/* =========================================================================
   WATTJE-ASSISTENT
   Launcher rechtsonder + gescript chatpanel. Vervangt de losse
   Subsidie-knop: de subsidiecheck zit nu als snelkeuze in het gesprek.
   Geometrie leunt op de Zonneplan-assistent (384 breed, bol rechtsonder,
   volledig scherm onder 720px), kleuren komen uit het WattSaver-palet.
   Het panel is helemaal wit: geen kopbalk meer, maar een startscherm met
   een grote zwevende Wattje en pas in het gesprek een dunne haarlijnbalk.
   Wattje zelf blijft groen, dat is de enige uitzondering op het palet.
   ========================================================================= */

/* ------------------------------------------------------------- mascotte
   De SVG-Wattje (opbouw: zie assistent.js). Hier staat alleen zijn maat en
   zijn idle-leven: ademen, schaduw die meeademt en een enkele kopkanteling.
   Het volgen van de muis gebeurt in JS via transform-attributen op
   .wj-w-lean, .wj-w-eye en .wj-w-lid. Zet daar dus géén CSS-transform op,
   die zou het attribuut overrulen. */
.wj-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.wj-w { display: block; overflow: visible; }
.wj-w-bob { animation: wjBob 3.8s ease-in-out infinite; }
.wj-w--av .wj-w-bob { animation: none; }   /* op 25px is deinen toch onzichtbaar */
.wj-w-shade { animation: wjShade 3.8s ease-in-out infinite; }

@keyframes wjBob {
  0%, 100% { transform: translate(0, 1.1px) translate(50px, 100px) scale(1.005, 0.993) translate(-50px, -100px); }
  50%      { transform: translate(0, -2.2px) translate(50px, 100px) scale(0.995, 1.008) translate(-50px, -100px); }
}
@keyframes wjShade {
  0%, 100% { transform: translate(50px, 102.5px) scale(1.05, 1) translate(-50px, -102.5px); opacity: 1; }
  50%      { transform: translate(50px, 102.5px) scale(0.86, 1) translate(-50px, -102.5px); opacity: 0.7; }
}
/* losse gebaartjes van de grote Wattje, aangezet vanuit JS */
@keyframes wjTilt {
  0%   { transform: translate(50px, 96px) rotate(0deg) translate(-50px, -96px); }
  24%  { transform: translate(50px, 96px) rotate(-5.5deg) translate(-50px, -96px); }
  52%  { transform: translate(50px, 96px) rotate(3.6deg) translate(-50px, -96px); }
  76%  { transform: translate(50px, 96px) rotate(-1.6deg) translate(-50px, -96px); }
  100% { transform: translate(50px, 96px) rotate(0deg) translate(-50px, -96px); }
}
.wj-w.is-gesture .wj-w-tilt { animation: wjTilt 1.5s cubic-bezier(0.34, 1.1, 0.64, 1) 1; }

/* --------------------------------------------------------------- launcher */
/* z-index-ladder van deze site: nav 90, mobiel menu 89, subsidiemodal 100.
   De assistent gaat boven de nav (op mobiel dekt het panel het scherm) en
   blijft onder de modal, want die opent hij zelf. */
.wj-dock {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 91;
  display: flex;
  align-items: center;
  gap: 10px;
  /* de dock zelf vangt geen klikken: alleen het knopje en een zichtbare wolk */
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
    visibility 0s linear 0s;
}
.wj-dock > .wj-launcher { pointer-events: auto; }

/* rekentool in beeld: de dock schuift rustig rechts uit beeld */
.wj-dock.is-away {
  opacity: 0;
  transform: translateX(calc(100% + 24px));
  visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
    visibility 0s linear 0.25s;
}
.wj-dock.is-away > .wj-launcher,
.wj-dock.is-away .wj-tip { pointer-events: none; }

.wj-tip {
  display: block;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 9px 15px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 10px 26px -12px rgba(11, 42, 91, 0.45);
  opacity: 0;
  transform: translateX(8px) scale(0.94);
  transform-origin: 100% 50%;
  pointer-events: none;
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}
.wj-dock:hover .wj-tip,
.wj-dock.is-hint .wj-tip { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
body.wj-open .wj-tip { opacity: 0 !important; transform: translateX(8px) scale(0.94) !important; pointer-events: none !important; }

/* staat het mobiele menu open, dan wijkt de launcher */
body.menu-open .wj-dock { opacity: 0; transform: scale(0.8); pointer-events: none; }
body.menu-open .wj-dock > .wj-launcher,
body.menu-open .wj-dock .wj-tip { pointer-events: none; }

.wj-launcher {
  position: relative;
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  /* witte ring binnen, navy haarlijn buiten: leest zowel op de lichte als op
     de donkere secties van de site. */
  border: 3px solid #fff;
  box-shadow: 0 0 0 1.5px var(--navy), 0 18px 40px -14px rgba(11, 42, 91, 0.6),
    0 2px 6px rgba(23, 39, 29, 0.1);
  display: grid;
  place-items: center;
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease);
}
.wj-launcher:hover {
  transform: scale(1.07);
  box-shadow: 0 0 0 1.5px var(--navy), 0 22px 46px -14px rgba(11, 42, 91, 0.7),
    0 2px 6px rgba(23, 39, 29, 0.1);
}
.wj-launcher:active { transform: scale(0.95); }
.wj-launcher:focus-visible { outline: 3px solid var(--navy-tint); outline-offset: 3px; }

.wj-launcher .wj-w {
  height: 106%;
  width: auto;
  transition: opacity 0.22s var(--ease), transform 0.28s var(--ease-out);
}
.wj-launcher.is-open .wj-w { opacity: 0; transform: scale(0.55) rotate(-14deg); }

.wj-launcher .wj-x {
  position: absolute;
  width: 22px;
  height: 22px;
  color: var(--navy);
  opacity: 0;
  transform: scale(0.55) rotate(14deg);
  transition: opacity 0.22s var(--ease), transform 0.28s var(--ease-out);
}
.wj-launcher.is-open .wj-x { opacity: 1; transform: none; }

/* attentiering: eenmalig na een paar seconden */
.wj-pulse {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  opacity: 0;
  pointer-events: none;
}
.wj-dock.is-hint .wj-pulse { animation: wjPulse 1.6s var(--ease-out) 2; }
.wj-dock.is-hint .wj-launcher { animation: wjWiggle 1.1s var(--ease-out) 1; }

@keyframes wjPulse {
  0% { opacity: 0.55; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.55); }
  100% { opacity: 0; transform: scale(1.55); }
}
@keyframes wjWiggle {
  0%, 100% { transform: rotate(0) scale(1); }
  15% { transform: rotate(-7deg) scale(1.05); }
  32% { transform: rotate(6deg) scale(1.05); }
  48% { transform: rotate(-4deg) scale(1.03); }
  64% { transform: rotate(3deg) scale(1.02); }
  80% { transform: rotate(-1.5deg) scale(1); }
}

/* ------------------------------------------------------------------ panel */
.wj-panel {
  position: fixed;
  right: 20px;
  bottom: 94px;
  z-index: 92;
  width: 384px;
  max-width: calc(100vw - 40px);
  height: 596px;
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: 0 2px 6px rgba(23, 39, 29, 0.04),
    0 14px 30px -12px rgba(11, 42, 91, 0.2),
    0 44px 90px -30px rgba(11, 42, 91, 0.4);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.95);
  transform-origin: 100% 100%;
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
}
.wj-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.26s cubic-bezier(0.32, 0.72, 0, 1),
              transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0s;
}
.wj-panel:focus { outline: none; }

/* ------------------------------------------------------- dunne gespreksbalk
   Alleen zichtbaar zodra het gesprek loopt. Ligt als matglazen laagje over de
   berichten heen, zodat er niks onder wegvalt maar het toch licht blijft. */
.wj-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 54px 0 16px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.wj-panel.is-chat .wj-bar { opacity: 1; transform: none; }
.wj-bar-av { display: block; flex: none; }
.wj-bar-av .wj-w { width: 26px; height: auto; }
.wj-bar-t {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-1);
}

/* sluitknop: klein, grijs, zonder vlak. Ligt boven de balk. */
.wj-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-3);
  background: transparent;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.wj-close svg { width: 16px; height: 16px; }
.wj-close:hover { color: var(--navy); background: var(--surface-2); }
.wj-close:active { transform: scale(0.92); }
.wj-close:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ----------------------------------------------------------- berichtenlaag */
.wj-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}
/* zolang het gesprek kort is, hangt het aan de onderkant bij het invoerveld;
   zodra het langer wordt, schuift het gewoon door en blijft de bovenkant
   scrollbaar (justify-content: flex-end zou dat afknippen). */
.wj-body > :first-child { margin-top: auto; }
/* startscherm: het blok Wattje + begroeting + keuzes staat gecentreerd */
.wj-panel:not(.is-chat) .wj-body { padding-bottom: 40px; }
.wj-panel:not(.is-chat) .wj-body > :last-child { margin-bottom: auto; }
/* in gesprek maakt de zwevende balk bovenaan ruimte vrij */
.wj-panel.is-chat .wj-body { padding-top: 68px; }

.wj-body::-webkit-scrollbar { width: 8px; }
.wj-body::-webkit-scrollbar-thumb { background: rgba(11, 42, 91, 0.14); border-radius: 99px; border: 2px solid #fff; }
.wj-body::-webkit-scrollbar-track { background: transparent; }

/* ----------------------------------------------------------- startscherm */
.wj-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4px 10px 2px;
  /* backwards, niet both: met een vooruit-vulling zou de eindstand van de
     animatie de wegklap-overgang hieronder blokkeren */
  animation: wjHero 0.5s var(--ease-out) backwards;
  transition: height 0.34s var(--ease), padding 0.34s var(--ease),
    margin 0.34s var(--ease), opacity 0.22s var(--ease), transform 0.34s var(--ease);
}
.wj-hero.is-out {
  opacity: 0;
  transform: translateY(-12px) scale(0.92);
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: -12px;   /* haalt de flex-gap eruit, scheelt een sprongetje */
}
.wj-hero-av { display: block; }
.wj-hero-av .wj-w { width: 132px; height: auto; }
.wj-hero-t {
  display: block;
  margin-top: 12px;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.2;
  color: var(--text-1);
}
.wj-hero-s {
  display: block;
  margin-top: 4px;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--text-3);
}
@keyframes wjHero {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.wj-msg {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  animation: wjIn 0.36s var(--ease-out) both;
}
.wj-msg--me { flex-direction: row-reverse; }
/* tweede bubbel van Wattje op rij: avatar blijft leeg, bubbel schuift aan */
.wj-msg--stack { margin-top: -7px; }
.wj-msg--stack .wj-av { visibility: hidden; }
.wj-msg--stack .wj-bub { border-top-left-radius: 7px; }

.wj-av {
  width: 25px;
  height: 27px;
  flex: none;
  margin-bottom: 1px;
}
.wj-av .wj-w { width: 100%; height: auto; }

.wj-bub {
  max-width: calc(100% - 44px);
  padding: 11px 15px;
  border-radius: 18px;
  font-size: 0.875rem;
  line-height: 1.55;
  letter-spacing: -0.005em;
}
.wj-msg--bot .wj-bub {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  border-bottom-left-radius: 7px;
}
.wj-msg--me .wj-bub {
  background: var(--navy);
  color: #fff;
  font-weight: 500;
  border-bottom-right-radius: 7px;
  box-shadow: 0 8px 18px -10px rgba(11, 42, 91, 0.75);
}

/* typindicator */
.wj-typing .wj-bub { display: flex; align-items: center; gap: 5px; padding: 14px; }
.wj-dot3 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(11, 42, 91, 0.4);
  animation: wjBlink 1.15s infinite ease-in-out;
}
.wj-dot3:nth-child(2) { animation-delay: 0.16s; }
.wj-dot3:nth-child(3) { animation-delay: 0.32s; }

/* --------------------------------------------------------------- keuzes */
.wj-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 34px;
  margin-top: -2px;
}
/* op het startscherm hangen de keuzes niet aan een bubbel, dus staan ze
   netjes onder de begroeting */
.wj-panel:not(.is-chat) .wj-chips {
  padding-left: 0;
  justify-content: center;
  margin-top: 20px;
}
.wj-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--navy);
  border-radius: var(--r-pill);
  padding: 9px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  animation: wjIn 0.32s var(--ease-out) both;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    transform 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}
.wj-chip:hover {
  background: var(--navy-tint);
  border-color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -10px rgba(11, 42, 91, 0.6);
}
.wj-chip:active { transform: translateY(0); }
.wj-chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.wj-chip .wj-ico { width: 15px; height: 15px; flex: none; transition: transform 0.2s var(--ease); }
.wj-chip:hover .wj-ico { transform: translateX(3px); }

.wj-chip--go {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(11, 42, 91, 0.8);
}
.wj-chip--go:hover { background: var(--navy-hover); border-color: var(--navy-hover); color: #fff; }

/* --------------------------------------------------------------- invoer */
.wj-foot {
  flex: none;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 12px 14px 14px;
  transition: border-color 0.3s var(--ease);
}
/* op het startscherm blijft het één rustig wit vlak */
.wj-panel:not(.is-chat) .wj-foot { border-top-color: transparent; }
.wj-form { display: flex; align-items: center; gap: 9px; }
.wj-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 12px 17px;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text-1);
  background: #fff;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.wj-input::placeholder { color: var(--text-3); }
.wj-input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(11, 42, 91, 0.12);
}
.wj-send {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.wj-send .wj-ico { width: 17px; height: 17px; }
.wj-send:hover { background: var(--navy-hover); }
.wj-send:active { transform: scale(0.93); }
.wj-send:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.wj-note {
  margin: 9px 2px 0;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--text-3);
  text-align: center;
}

@keyframes wjIn {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}
@keyframes wjBlink {
  0%, 60%, 100% { opacity: 0.32; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ---------------------------------------------------------------- mobiel */
@media (max-width: 720px) {
  .wj-dock { right: 14px; bottom: 14px; gap: 8px; }
  .wj-launcher { width: 54px; height: 54px; }
  .wj-launcher .wj-x { width: 20px; height: 20px; }
  .wj-tip { padding: 8px 13px; font-size: 0.75rem; }

  .wj-panel {
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    transform: translateY(24px);
  }
  .wj-panel.is-open { transform: none; }

  .wj-bar {
    height: calc(58px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }
  .wj-close { top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; }
  .wj-body { padding: 18px 16px 14px; }
  .wj-panel.is-chat .wj-body { padding-top: calc(72px + env(safe-area-inset-top, 0px)); }
  .wj-panel:not(.is-chat) .wj-body { padding-top: calc(54px + env(safe-area-inset-top, 0px)); }
  .wj-hero-av .wj-w { width: 124px; }
  .wj-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

  body.wj-open .wj-dock { opacity: 0; transform: scale(0.8); pointer-events: none; }
  body.wj-open .wj-dock > .wj-launcher { pointer-events: none; }
}

body.wj-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .wj-panel,
  .wj-msg,
  .wj-chip,
  .wj-hero,
  .wj-launcher,
  .wj-tip { animation: none !important; transition-duration: 0.01ms !important; }
  /* geen schuifbeweging: de dock verdwijnt en verschijnt op zijn plek */
  .wj-dock.is-away { transform: none; }
  .wj-dock { transition-duration: 0.01ms !important; }
  .wj-dot3 { animation-duration: 0.01ms !important; }
  .wj-body { scroll-behavior: auto; }
  /* rustige Wattje: geen deining, geen schaduwpuls, geen gebaren.
     Het knipperen laat de JS staan, dat is het enige teken van leven. */
  .wj-w-bob,
  .wj-w-shade,
  .wj-w .wj-w-tilt { animation: none !important; }
}

/* ====================================================== EIGEN KEUZELIJST
   Vervangt de uitklaplijst van de browser door één in de stijl van de site.
   De echte <select> blijft in de pagina staan als bron van waarheid en als
   maatgever: hij houdt zijn eigen box, de knop ligt er met inset:0 precies
   over. Zo blijft het dichte veld exact zoals het was (hoogte, breedte,
   rand, radius, focusring komen uit .select en .gem-select hierboven).
   Zonder JavaScript komen deze klassen niet in de pagina en werkt de
   gewone select.
   Het paneel hangt aan <body>, dus geen enkele ouder met overflow:hidden
   kan het afkappen. z-index-ladder van deze site: nav 90, mobiel menu 89,
   assistent-dock 91, assistent-paneel 92, rondleiding 94/95, subsidiemodal
   100. Het paneel staat op 96: boven de pagina en de balk, onder de modal.
   ====================================================================== */
.ws-sel { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; }
.ws-sel--vol { display: block; width: 100%; }

.ws-sel-native { opacity: 0; pointer-events: none; max-width: 100%; }

.ws-sel-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  align-items: center;
  text-align: left;
  font-family: inherit;
  background-image: none;
  cursor: pointer;
}
.ws-sel-val { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-sel-caret {
  position: absolute;
  top: 50%;
  width: 16px; height: 16px;
  color: #6C7A73;
  transform: translateY(-50%);
  transition: transform 0.2s var(--ease);
  pointer-events: none;
}
.select.ws-sel-btn .ws-sel-caret { right: 12px; }
.gem-select.ws-sel-btn .ws-sel-caret { right: 15px; width: 15px; height: 15px; }
.ws-sel-btn[aria-expanded="true"] .ws-sel-caret { transform: translateY(-50%) rotate(180deg); }

.ws-sel-pop {
  position: fixed;
  z-index: 96;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  color: var(--text-1);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.14s var(--ease-out), transform 0.18s var(--ease-out);
}
.ws-sel-pop--op { transform: translateY(6px); }
.ws-sel-pop.is-on { opacity: 1; transform: none; }
.ws-sel-pop[hidden] { display: none; }
/* meetstand: even op contentbreedte zetten om te zien hoe breed de langste
   optie is. Alleen tussen twee regels code actief, nooit zichtbaar. */
.ws-sel-pop--meet { width: auto; max-width: none; max-height: none; }
.ws-sel-pop--meet .ws-sel-opt-t { white-space: nowrap; }

.ws-sel-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  line-height: 1.35;
  cursor: pointer;
  transition: background-color 0.14s var(--ease), color 0.14s var(--ease);
}
.ws-sel-opt + .ws-sel-opt { margin-top: 2px; }
.ws-sel-opt-t { flex: 1 1 auto; min-width: 0; }
.ws-sel-opt.is-actief { background: var(--navy-tint); color: var(--text-1); }
.ws-sel-opt[aria-selected="true"] { color: var(--navy); font-weight: 700; }
.ws-sel-opt[aria-disabled="true"] { color: var(--text-3); cursor: default; }
.ws-sel-check { flex: none; width: 16px; height: 16px; color: var(--navy); opacity: 0; }
.ws-sel-opt[aria-selected="true"] .ws-sel-check { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ws-sel-pop,
  .ws-sel-pop--op { transition: none; transform: none; }
  .ws-sel-opt { transition: none; }
  .ws-sel-caret { transition: none; }
}

/* =========================================================================
   OFFERTE ZONNEPANELEN (offerte-zonnepanelen.html), eigen blok .oz-*
   Eén kaart in de stijl van de herokaart, drie standen: zoeken, gegevens,
   verstuurd. Rood voor foutmeldingen is dezelfde tint als .pc-error.
   ========================================================================= */
.oz-main {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--nav-h) + clamp(28px, 5vh, 64px)) 16px clamp(48px, 9vh, 104px);
  background:
    radial-gradient(ellipse 70% 46% at 50% 0%, rgba(226, 232, 242, 0.85), rgba(226, 232, 242, 0) 70%),
    var(--surface-2);
}
.oz-wrap { width: 100%; max-width: 560px; margin-inline: auto; }
.oz-card [hidden] { display: none !important; }
.oz-card {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: clamp(24px, 3.2vw, 40px);
  box-shadow: var(--sh-lg);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.oz-step { opacity: 0; transform: translateY(8px); transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out); }
.oz-step.is-in { opacity: 1; transform: none; }
.oz-step:focus, .oz-title:focus, .oz-melding-t:focus { outline: none; }

/* -- stap 1: zoeken */
/* zoekstand ligt over het skelet van stap 2, zodat de kaart al zijn echte maat heeft */
.oz-card { position: relative; }
.oz-zoek {
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.oz-zoek.is-in { opacity: 1; }
.oz-zoek.is-in.is-weg { opacity: 0; }
.oz-zoek-in {
  position: absolute; left: 50%; top: 34%;
  transform: translate(-50%, -50%);
  width: min(440px, 100%);
  padding: 40px 24px;
  text-align: center;
}
#oz-form-stap { transition: opacity 0.15s var(--ease-out), transform 0.15s var(--ease-out), filter 0.3s var(--ease-out); }
#oz-form-stap.is-skelet { filter: blur(1.5px); opacity: 0.7; }
#oz-form-stap.is-wissel { opacity: 0.12; }
.oz-adres-straat, .oz-adres-plaats { min-height: 1lh; }
.is-skelet { pointer-events: none; user-select: none; }
.is-skelet :is(.oz-title, .oz-label, .oz-adres-straat, .oz-adres-plaats, .oz-batterij-tekst, .oz-check-t, .oz-noot) {
  color: transparent;
  width: fit-content;
  max-width: 100%;
  background: repeating-linear-gradient(to bottom,
    transparent 0, transparent 0.24lh,
    var(--surface-3) 0.24lh, var(--surface-3) 0.76lh,
    transparent 0.76lh, transparent 1lh);
}
.is-skelet .oz-title { width: auto; background-size: 72% 100%; background-repeat: no-repeat; }
.is-skelet .oz-adres-straat { width: 8em; }
.is-skelet .oz-adres-plaats { width: 11em; }
.is-skelet .oz-noot { margin-inline: auto; }
.is-skelet .oz-input { background: var(--surface-2); border-color: var(--line); }
.is-skelet .oz-input::placeholder { color: transparent; }
.is-skelet .oz-adres-vink { background: var(--surface-3); }
.is-skelet .oz-adres-vink .ico { opacity: 0; }
.is-skelet .oz-batterij-wattje { filter: grayscale(1); opacity: 0.16; }
.is-skelet .oz-check-box { border-color: var(--line); }
.is-skelet .oz-verstuur { background: var(--surface-3); color: transparent; box-shadow: none; }
.oz-zoek-title {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--text-1);
}
.oz-zoek-balk {
  width: 168px; height: 4px;
  margin: 20px auto 0;
  border-radius: var(--r-pill);
  background: var(--navy-tint);
  overflow: hidden;
}
.oz-zoek-balk span {
  display: block; height: 100%;
  background: var(--navy);
  border-radius: inherit;
  transform-origin: 0 50%;
  transform: scaleX(0);
  animation: oz-vul 1.6s var(--ease-out) forwards;
}
.oz-zoek.is-klaar .oz-zoek-balk span { animation: oz-vol 0.24s var(--ease) forwards; }
@keyframes oz-vul { from { transform: scaleX(0); } to { transform: scaleX(0.84); } }
@keyframes oz-vol { from { transform: scaleX(0.84); } to { transform: scaleX(1); } }

/* -- stap 2: gegevens */
.oz-title {
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.04em;
  color: var(--text-1);
  text-wrap: balance;
}
.oz-melding {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--navy-tint);
  color: var(--navy);
}
.oz-melding .ico { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.oz-melding-t { font-size: 1rem; font-weight: 700; line-height: 1.45; letter-spacing: -0.01em; color: var(--text-1); text-wrap: pretty; }

.oz-woning { margin-top: 24px; }
.oz-label { font-size: 0.8125rem; font-weight: 700; color: var(--text-1); margin-bottom: 8px; }
.oz-adres {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.oz-adres-vink {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: none;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
}
.oz-adres-vink .ico { width: 16px; height: 16px; }
.oz-adres-tekst { min-width: 0; }
.oz-adres-straat { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-1); overflow-wrap: anywhere; }
.oz-adres-plaats { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--text-3); }
.oz-aanpas {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 0;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s var(--ease), color 0.2s var(--ease);
}
.oz-aanpas:hover { text-decoration-color: currentColor; }
.oz-aanpas:active { color: var(--navy-hover); }
.oz-aanpas:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; text-decoration-color: currentColor; }
.is-skelet .oz-aanpas { color: transparent; background: repeating-linear-gradient(to bottom, transparent 0, transparent 0.24lh, var(--surface-3) 0.24lh, var(--surface-3) 0.76lh, transparent 0.76lh, transparent 1lh); background-clip: content-box; }
.oz-velden--adres.is-open { animation: oz-open 0.3s var(--ease-out) both; }
@keyframes oz-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.oz-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.oz-form.is-niet .oz-velden--adres { margin-top: 16px; }
.oz-veld { min-width: 0; }
.oz-veld--vol { grid-column: 1 / -1; }
.oz-input { padding: 14px 16px; font-size: 1rem; }
.oz-input::placeholder { color: var(--text-3); opacity: 1; }
.oz-input:hover { border-color: var(--text-3); }
.oz-input:focus { border-color: var(--navy); }
.oz-input.is-fout { border-color: #C0392B; }
.oz-input.is-fout:focus { box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.14); }
.oz-fout { margin-top: 6px; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; color: #C0392B; }
/* aantal panelen: teller plus adviesvinkje, tussen adres en naamvelden */
.oz-panelen { margin-top: 24px; }
.oz-panelen .oz-label { display: block; }
.oz-teller {
  display: inline-grid;
  grid-template-columns: 52px 64px 52px;
  align-items: center;
  height: 52px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.oz-teller:hover { border-color: var(--text-3); }
.oz-teller:focus-within { border-color: var(--navy); }
.oz-teller-knop {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.oz-teller-knop .ico { width: 18px; height: 18px; transition: transform 0.15s var(--ease); }
.oz-teller-knop:hover { background: var(--navy-tint); }
.oz-teller-knop:active { background: var(--navy-tint); color: var(--navy-hover); }
.oz-teller-knop:active .ico { transform: scale(0.88); }
.oz-teller-knop:focus-visible { outline: none; background: var(--navy-tint); box-shadow: inset 0 0 0 2px var(--navy); }
.oz-teller-knop:first-child { border-radius: calc(var(--r-sm) - 1px) 0 0 calc(var(--r-sm) - 1px); }
.oz-teller-knop:last-child { border-radius: 0 calc(var(--r-sm) - 1px) calc(var(--r-sm) - 1px) 0; }
.oz-teller-knop:disabled { color: var(--line-strong); background: transparent; cursor: not-allowed; }
.oz-teller-knop:disabled .ico { transform: none; }
.oz-teller-getal {
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--line);
  background: transparent;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--text-1);
  border-radius: 0;
  appearance: none;
}
.oz-teller-getal:focus { outline: none; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--navy); }
.oz-teller-getal:disabled { -webkit-text-fill-color: currentColor; opacity: 1; cursor: not-allowed; }
.oz-teller.is-uit { display: none; }
.oz-panelen .oz-check--advies { display: flex; width: fit-content; margin-top: 10px; }
.is-skelet .oz-teller { background: var(--surface-2); border-color: var(--line); }
.is-skelet .oz-teller-getal, .is-skelet .oz-teller-knop { color: transparent; }

.oz-batterij {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  margin-top: 24px;
  padding: 18px 20px 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.oz-batterij-wattje { display: block; width: 100%; height: auto; margin-top: -4px; }
.oz-batterij-tekst { font-size: 0.9375rem; line-height: 1.55; color: var(--text-2); }

.oz-check {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  margin-top: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.oz-check input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.oz-check-box {
  display: grid; place-items: center;
  width: 22px; height: 22px; flex: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  color: #fff;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.oz-check-box .ico { width: 14px; height: 14px; opacity: 0; transform: scale(0.6); transition: opacity 0.18s var(--ease), transform 0.18s var(--ease-out); }
.oz-check:hover .oz-check-box { border-color: var(--text-3); }
.oz-check input:checked + .oz-check-box { background: var(--navy); border-color: var(--navy); }
.oz-check input:checked + .oz-check-box .ico { opacity: 1; transform: none; }
.oz-check input:focus-visible + .oz-check-box { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(11, 42, 91, 0.18); }
.oz-check:active .oz-check-box { transform: scale(0.94); }
.oz-check-t { font-size: 0.9375rem; font-weight: 700; line-height: 1.35; color: var(--text-1); }

.oz-verstuur { margin-top: 24px; padding-block: 17px; }
.oz-verstuur:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.oz-verstuur:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.oz-noot { margin-top: 14px; text-align: center; font-size: 0.8125rem; color: var(--text-3); }

/* -- stap 0: adres, alleen zonder postcode of huisnummer in de URL; zelfde velden als de herokaart */
.oz-adres-form { margin-top: 24px; }
.oz-adres-velden { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.oz-adres-knop { margin-top: 16px; padding-block: 17px; }
.oz-adres-knop:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* -- stap 3: verstuurd */
.oz-klaar { text-align: center; padding-block: clamp(4px, 1.5vw, 16px); }
.oz-klaar-wattje { display: block; width: 136px; height: auto; margin: 0 auto 12px; }
.oz-klaar.is-in .oz-klaar-wattje { animation: oz-blij 0.42s var(--ease-out) both; }
.oz-klaar-tekst { max-width: 40ch; margin: 12px auto 0; font-size: 1rem; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
@keyframes oz-blij { from { opacity: 0; transform: translateY(10px) scale(0.92); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .oz-card { box-shadow: var(--sh-md); }
}
@media (max-width: 520px) {
  .oz-card { padding: 24px 20px; }
  .oz-velden { grid-template-columns: 1fr; }
  .oz-input { padding-inline: 14px; }
  .oz-batterij { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 16px 16px 12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .oz-step, .oz-zoek, .oz-check-box, .oz-check-box .ico { transition: none; }
  .oz-klaar.is-in .oz-klaar-wattje, .oz-velden--adres.is-open { animation: none; }
  .oz-aanpas { transition: none; }
  .oz-teller, .oz-teller-knop, .oz-teller-knop .ico { transition: none; }
  .oz-zoek-balk span { animation: none; transform: scaleX(0.84); }
  .oz-zoek.is-klaar .oz-zoek-balk span { animation: none; transform: scaleX(1); }
}

/* offerte thuisbatterij: intro boven de gegevensvelden (Badrs tekst, 18 okt) */
.oz-intro { margin: 26px 0 18px; }
.oz-intro-kop { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; color: var(--text-1); }
.oz-intro-tekst { margin-top: 8px; font-size: 0.9375rem; line-height: 1.55; color: var(--text-2); }
/* offerte thuisbatterij: twee keuzevragen (Badr 18 okt) */
.oz-vragen { margin-top: 22px; }
.oz-vraag + .oz-vraag { margin-top: 16px; }
.oz-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oz-picks--3 { grid-template-columns: repeat(3, 1fr); } /* offerte warmtepomp: Hybride / All-electric / Advies gewenst */
@media (max-width: 480px) { .oz-picks--3 { grid-template-columns: 1fr 1fr; } .oz-picks--3 .oz-pick:last-child { grid-column: 1 / -1; } }
.oz-pick { justify-content: center; padding: 13px 16px; font-size: 0.9375rem; border-radius: var(--r-md, 12px); }
.oz-aantal { margin-top: 14px; }
.oz-aantal[hidden] { display: none; }
/* offerte thuisbatterij: compacte kaart, alles op één scherm (Badr 18 okt) */
.oz-main:has(.oz-card--compact) { display: flex; align-items: center; padding-top: calc(var(--nav-h) + 20px); padding-bottom: 32px; }
.oz-card--compact { padding: clamp(20px, 2.4vw, 28px); }
.oz-card--compact .oz-title { font-size: clamp(1.3rem, 1.8vw, 1.6rem); }
.oz-card--compact .oz-woning, .oz-card--compact .oz-adres-form { margin-top: 14px; }
.oz-card--compact .oz-woning .oz-label { margin-bottom: 6px; }
.oz-card--compact .oz-vragen { margin-top: 14px; }
.oz-card--compact .oz-vraag + .oz-vraag { margin-top: 10px; }
.oz-card--compact .oz-label { margin-bottom: 6px; }
.oz-card--compact .oz-pick { padding: 10px 14px; font-size: 0.875rem; }
.oz-card--compact .oz-aantal { margin-top: 10px; }
.oz-card--compact .oz-intro { margin: 16px 0 10px; }
.oz-card--compact .oz-intro-kop { font-size: 1.1rem; }
.oz-card--compact .oz-intro-tekst { margin-top: 4px; font-size: 0.875rem; line-height: 1.45; }
.oz-card--compact .oz-velden { margin-top: 10px; gap: 8px; }
.oz-card--compact .oz-input { padding: 11px 14px; font-size: 0.9375rem; }
.oz-card--compact .oz-verstuur { margin-top: 14px; padding-block: 14px; }
.oz-card--compact .oz-noot { margin-top: 10px; }
.oz-aantal-rij { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.oz-overslaan { font-size: 0.875rem; font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; transition: text-decoration-color 0.2s var(--ease); padding: 8px 4px; }
.oz-overslaan:hover { text-decoration-color: currentColor; }
.oz-overslaan:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
/* nog compacter (laptopscherm 864 hoog) */
.oz-main:has(.oz-card--compact) { padding-top: calc(var(--nav-h) + 12px); padding-bottom: 24px; }
.oz-card--compact { padding: clamp(18px, 2vw, 24px); }
.oz-card--compact .oz-title { font-size: clamp(1.2rem, 1.6vw, 1.45rem); }
.oz-card--compact .oz-woning, .oz-card--compact .oz-adres-form { margin-top: 12px; }
.oz-card--compact .oz-vragen { margin-top: 12px; }
.oz-card--compact .oz-vraag + .oz-vraag { margin-top: 8px; }
.oz-card--compact .oz-pick { padding: 9px 14px; }
.oz-card--compact .oz-intro { margin: 12px 0 8px; }
.oz-card--compact .oz-input { padding: 10px 14px; }
.oz-card--compact .oz-verstuur { margin-top: 12px; padding-block: 13px; }
.oz-card--compact .oz-noot { margin-top: 8px; }
.oz-card--compact .oz-woning > div, .oz-card--compact .oz-adres-kaart { padding: 10px 14px; }
.oz-card--compact .oz-aanpas { margin-top: 6px; padding: 2px 0; }
.oz-card--compact .oz-teller-knop { width: 44px; height: 44px; }
.oz-card--compact .oz-teller-getal { height: 44px; }
.oz-card--compact .oz-verstuur { margin-top: 10px; }
/* laatste slag compact: past ook op 864 hoog */
.oz-main:has(.oz-card--compact) { padding-top: calc(var(--nav-h) + 8px); }
.oz-card--compact { padding: clamp(16px, 1.8vw, 20px); }
.oz-card--compact .oz-intro { margin: 10px 0 6px; }
.oz-card--compact .oz-velden { gap: 6px; margin-top: 8px; }
.oz-card--compact .oz-pick { padding: 8px 14px; }
.oz-card--compact .oz-teller-knop { width: 40px; height: 40px; }
.oz-card--compact .oz-teller-getal { height: 40px; }
.oz-card--compact .oz-verstuur { padding-block: 12px; }
.oz-card--compact .oz-vraag + .oz-vraag, .oz-card--compact .oz-aantal { margin-top: 6px; }

/* =========================================================================
   WATTENERGY (energiecontract.html), eigen blok .ec-*
   Vergelijken (invoer links, vier leverancierskaarten rechts) en aanvraag
   (sfeerbeeld links, formulierkaart rechts). Velden en knoppen hergebruiken
   .oz-* van de offertepagina's; hier alleen wat de pagina extra nodig heeft.
   ========================================================================= */
.ec-kop { max-width: 62ch; }
.ec-kop .lead { margin-top: 16px; }

.ec-vgl {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin-top: clamp(30px, 3.6vw, 48px);
}

/* -- invoer */
.ec-invoer {
  display: grid;
  gap: 20px;
  padding: clamp(22px, 2.4vw, 28px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.ec-veld .oz-label { display: block; }
.oz-teller.ec-teller { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; width: 100%; }

.ec-switch {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.ec-switch:hover { border-color: var(--text-3); }
.ec-switch:focus-visible { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(11, 42, 91, 0.18); }
.ec-switch-t { font-size: 0.9375rem; font-weight: 700; color: var(--text-1); }
.ec-switch-baan {
  position: relative; flex: none;
  width: 44px; height: 26px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: background-color 0.2s var(--ease);
}
.ec-switch-knop {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(23, 39, 29, 0.25);
  transition: transform 0.22s var(--ease-out), width 0.15s var(--ease);
}
.ec-switch[aria-checked="true"] .ec-switch-baan { background: var(--navy); }
.ec-switch[aria-checked="true"] .ec-switch-knop { transform: translateX(18px); }
.ec-switch:active .ec-switch-knop { width: 23px; }
.ec-switch[aria-checked="true"]:active .ec-switch-knop { transform: translateX(15px); }
.ec-terug { margin-top: -6px; }
.ec-terug.is-open { animation: oz-open 0.3s var(--ease-out) both; }
.ec-invoer .oz-pick { padding: 12px 16px; }
.ec-invoer .oz-pick:focus-visible, .ec-form .oz-pick:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* -- leverancierskaarten */
.ec-uitslag { min-width: 0; container-type: inline-size; }
.ec-lijst { list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 12px; }
.ec-kaart {
  position: relative;
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) minmax(0, 1.7fr) minmax(150px, auto);
  align-items: center;
  gap: 12px clamp(18px, 2.4vw, 32px);
  padding: 22px clamp(20px, 2.2vw, 26px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ec-kaart--top {
  border: 2px solid var(--navy);
  padding: 27px calc(clamp(20px, 2.2vw, 26px) - 1px) 21px;
  box-shadow: var(--sh-md);
}
.ec-badge {
  position: absolute; top: 0; left: clamp(18px, 2.2vw, 24px);
  transform: translateY(-50%);
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--navy);
  color: #fff;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.3;
  white-space: nowrap;
}
.ec-kaart-kop { min-width: 0; }
.ec-naam { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; color: var(--text-1); }
.ec-type-t { margin-top: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--text-3); }
.ec-tarieven { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; }
.ec-t { min-width: 0; }
.ec-t dt { font-size: 0.75rem; line-height: 1.35; color: var(--text-3); }
.ec-t dd { margin: 2px 0 0; font-size: 0.9375rem; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }
.ec-t dd.is-volgt { font-weight: 600; color: var(--text-3); }
.ec-prijs { text-align: right; }
.ec-jaar { display: flex; flex-direction: column; align-items: flex-end; }
.ec-bedrag { font-size: clamp(1.5rem, 2.1vw, 1.875rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: var(--text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ec-bedrag.is-leeg { color: var(--line-strong); }
.ec-kaart--top .ec-bedrag { color: var(--navy); }
.ec-per { margin-top: 3px; font-size: 0.75rem; font-weight: 600; color: var(--text-3); }
.ec-maand { margin-top: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ec-volgt, .ec-geen { font-size: 0.9375rem; font-weight: 700; color: var(--text-3); }
.ec-kaart.is-geen { opacity: 0.55; box-shadow: none; }
.ec-kaart.is-geen .ec-tarieven { visibility: hidden; }

.ec-actie {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px clamp(18px, 2.4vw, 28px);
  margin-top: 22px;
}
.ec-voetnoot { flex: 1 1 280px; font-size: 0.8125rem; line-height: 1.55; color: var(--text-3); }

/* smalle uitslag: naam en bedrag boven, tarieven eronder */
@container (max-width: 620px) {
  .ec-kaart { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .ec-tarieven { grid-column: 1 / -1; grid-row: 2; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--line); }
  .ec-prijs { grid-column: 2; grid-row: 1; }
  .ec-kaart.is-geen .ec-tarieven { display: none; }
  .ec-kaart.is-geen { align-items: center; }
}
@container (max-width: 360px) {
  .ec-tarieven { gap: 10px 14px; }
  .ec-naam { font-size: 1.0625rem; }
}

/* -- aanvraag */
.ec-aanvraag-sectie {
  background:
    radial-gradient(ellipse 60% 50% at 78% 0%, rgba(226, 232, 242, 0.75), rgba(226, 232, 242, 0) 70%),
    var(--surface);
}
.ec-aanvraag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: clamp(28px, 5vw, 84px);
  align-items: stretch;
}
/* het sfeerbeeld vult de kolom tot de onderkant van de formulierkaart */
.ec-aanvraag-zij { min-width: 0; display: flex; flex-direction: column; }
.ec-aanvraag-zij .lead { margin-top: 16px; max-width: 44ch; }
.ec-aanvraag-beeld { flex: 1 1 auto; min-height: 320px; margin-top: clamp(24px, 3vw, 36px); }
.ec-aanvraag-beeld img { position: absolute; inset: 0; aspect-ratio: auto; object-position: 50% 50%; }
.ec-formkaart { border: 1px solid var(--line); }
/* na versturen: de bevestiging staat midden in de kaart, die zijn hoogte houdt naast het beeld */
.ec-formkaart:has(#ec-klaar:not([hidden])) { display: flex; align-items: center; justify-content: center; }
.ec-formkaart #ec-klaar { width: 100%; }
.ec-form .oz-label { display: block; }
.ec-form .oz-velden { margin-top: 16px; gap: 14px 12px; }
.ec-form .ec-rij:first-child { margin-top: 0; }
.ec-form .oz-woning, .ec-form .oz-melding, .ec-form .oz-velden--adres { margin-top: 14px; }
.ec-vragen { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.ec-vragen .oz-vraag + .oz-vraag { margin-top: 20px; }
.ec-picks-lev { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ec-picks-lev .oz-pick:last-child { grid-column: 1 / -1; }
.ec-eind { display: grid; gap: 10px; }
.ec-adres-zoek {
  height: 3px; margin-top: 12px;
  border-radius: var(--r-pill);
  background: var(--navy-tint);
  overflow: hidden;
}
.ec-adres-zoek span {
  display: block; width: 36%; height: 100%;
  border-radius: inherit;
  background: var(--navy);
  animation: ec-zoek 1.1s var(--ease) infinite;
}
@keyframes ec-zoek { from { transform: translateX(-100%); } to { transform: translateX(280%); } }

/* -- combineer met: drie kaarten */
.ec-combi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ec-combi .combi { min-width: 0; }

@media (max-width: 1100px) {
  .ec-combi { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .ec-vgl { grid-template-columns: 1fr; }
  .ec-invoer { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .ec-invoer > .ec-switch, .ec-invoer > .ec-terug, .ec-invoer > .ec-veld:last-child { grid-column: 1 / -1; }
  .ec-aanvraag { grid-template-columns: 1fr; }

  .ec-aanvraag-beeld { flex: none; min-height: 0; }
  .ec-aanvraag-beeld img { position: static; aspect-ratio: 16 / 9; }
  .ec-formkaart { max-width: 640px; }
}
@media (max-width: 560px) {
  .ec-invoer { grid-template-columns: 1fr; }
  .ec-actie .btn { width: 100%; }
  .ec-aanvraag-beeld img { aspect-ratio: 16 / 10; }
}
@media (max-width: 520px) {
  .ec-form .oz-velden { grid-template-columns: 1fr; }
  .ec-form .ec-rij:first-child { grid-template-columns: 1.2fr 1fr; }
  .ec-form .oz-pick { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ec-switch, .ec-switch-baan, .ec-switch-knop, .ec-kaart { transition: none; }
  .ec-terug.is-open { animation: none; }
  .ec-adres-zoek span { animation: none; width: 100%; opacity: 0.5; }
}

/* Vergelijkblok energiecontract zonder prijzen (Badr 19 okt): vier leverancierskaarten */
.ec-levs { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ec-lev { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg, 18px); padding: 26px 22px 22px; box-shadow: 0 1px 2px rgba(11,42,91,0.04); }
.ec-lev--top { border: 2px solid var(--navy, #0B2A5B); padding-top: 34px; }
.ec-lev .ec-naam { margin: 0; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-1); }
.ec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.ec-chips span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--green-700); background: rgba(92,181,49,0.12); border-radius: 999px; padding: 4px 10px; }
.ec-lev--top .ec-badge { position: absolute; top: -13px; left: 18px; }
.ec-levs + .ec-actie { margin-top: 22px; }
@media (max-width: 900px) { .ec-levs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .ec-levs { grid-template-columns: 1fr; } }

/* Vergelijkblok als rijen met logo en indicatie per kWh (Badr 19 okt) */
.ec-rijen { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 12px; }
.ec-rij { position: relative; display: grid; grid-template-columns: 180px 1fr auto auto; align-items: center; gap: 18px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg, 18px); padding: 20px 26px; box-shadow: 0 1px 2px rgba(11,42,91,0.04); }
.ec-rij--top { border: 2px solid var(--navy, #0B2A5B); }
.ec-rij--top .ec-badge { position: absolute; top: -13px; left: 18px; }
.ec-rij-logo { display: flex; align-items: center; justify-content: flex-start; height: 48px; }
.ec-rij-logo img { max-width: 160px; max-height: 48px; width: auto; height: auto; object-fit: contain; }
.ec-rij-naam { margin: 0; font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-1); }
.ec-rij-prijs { display: grid; gap: 2px; min-width: 150px; text-align: right; }
.ec-rij-lbl { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.ec-rij-prijs strong { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--navy, #0B2A5B); }
.ec-rij-prijs strong.is-geen { font-size: 0.875rem; font-weight: 600; color: var(--text-3); }
.ec-rij-prijs small { font-size: 0.75rem; color: var(--text-3); }
.ec-rijen + .ec-actie { margin-top: 22px; }
@media (max-width: 760px) { .ec-rij { grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 18px 18px; } .ec-rij-logo { grid-column: 1 / -1; } .ec-rij-naam { grid-column: 1 / -1; } .ec-rij-prijs { text-align: left; min-width: 0; } }

/* Aanvraag-band energiecontract (Badr 19 okt, keuze A): navy band met postcode + huisnummer naar de aanvraagpagina */
.ec-band .ec-band-in { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 28px 40px; align-items: center; position: relative; z-index: 1; }
.ec-band-wattje { width: 150px; height: auto; justify-self: center; filter: drop-shadow(0 14px 22px rgba(0,0,0,0.35)); }
.ec-band .ec-band-tekst { text-align: left; }
.ec-band .ec-band-tekst .lead { color: rgba(255,255,255,0.78); margin-top: 12px; }
.ec-band-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ec-band-veld { display: block; }
.ec-band-form .input { width: 100%; }
.ec-band-knop { grid-column: 1 / -1; justify-content: center; }
.ec-band-noot { grid-column: 1 / -1; margin: 2px 0 0; text-align: center; font-size: 0.8125rem; color: rgba(255,255,255,0.7); }
@media (max-width: 860px) { .ec-band .ec-band-in { grid-template-columns: 1fr; } .ec-band-wattje { width: 120px; justify-self: start; } }
@media (max-width: 420px) { .ec-band-form { grid-template-columns: 1fr; } }

/* verzending aanvragen (19 okt): honingpotveld onzichtbaar, foutmelding onder de knop */
.oz-honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.oz-verzend-fout { margin-top: 10px; text-align: center; }

/* ============================================================ WATTSHOP (Badr 19 okt: bijna zwart, kleiner, strak, Wattje stil) */
.ws-shop {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + clamp(32px, 6vh, 64px)) var(--gutter) clamp(32px, 6vh, 64px);
  background: #05080E;
  background-image: radial-gradient(900px 480px at 50% 42%, rgba(11, 42, 91, 0.55) 0%, rgba(11, 42, 91, 0.18) 45%, rgba(5, 8, 14, 0) 72%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ws-shop-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  max-width: var(--maxw);
}
.ws-shop-titel {
  margin: 0;
  color: #fff;
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 800;
  white-space: nowrap;
}
.ws-shop-wattje {
  flex: none;
  width: clamp(64px, 6.2vw, 104px);
  aspect-ratio: 92 / 110;
  filter: drop-shadow(0 10px 24px rgba(92, 181, 49, 0.25));
}
.ws-shop-wattje svg { display: block; width: 100%; height: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .ws-shop-titel { animation: ws-shop-in 0.6s var(--ease) both; }
  .ws-shop-wattje { animation: ws-shop-in 0.6s var(--ease) 0.12s both; }
  @keyframes ws-shop-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
}

@media (max-width: 767px) {
  .ws-shop-inner { flex-direction: column; text-align: center; gap: 20px; }
  .ws-shop-titel { white-space: normal; font-size: clamp(2.4rem, 12vw, 3.6rem); text-wrap: balance; }
  .ws-shop-wattje { width: clamp(120px, 34vw, 168px); }
}

/* WattShop v3 (Badr 19 okt): label in plaats van kop, Classified-stempels verspreid, geen footer */
.ws-shop-label { margin: 0; display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 1px solid rgba(92, 181, 49, 0.55); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: #fff; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1; }
.ws-shop-dot { width: 8px; height: 8px; border-radius: 50%; background: #5CB531; box-shadow: 0 0 10px rgba(92, 181, 49, 0.8); }
.ws-shop-wattje { width: clamp(84px, 8vw, 120px); }
.ws-shop-stempels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ws-shop-stempels span { position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--r)); padding: 6px 14px; border: 2px dashed rgba(255, 255, 255, 0.12); border-radius: 6px; color: rgba(255, 255, 255, 0.10); font-size: clamp(0.75rem, 1.5vw, 1.1rem); font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 640px) { .ws-shop-stempels span:nth-child(n+5) { display: none; } }

/* Home zonnepanelen-blok (Badr 19 okt): de dakfoto volledig tonen, niet bijsnijden */
.media-frame--vol img { aspect-ratio: auto; height: auto; object-fit: contain; display: block; }

/* Home zonnepanelen-blok (Badr 19 okt): de dakfoto volledig en groter, fotokolom breder dan de tekstkolom */
.media-row--fotobreed { grid-template-columns: 1.35fr 1fr; }
@media (max-width: 900px) { .media-row--fotobreed { grid-template-columns: 1fr; } }