/* ============================================================================
   dysun.energy — herbouw-voorbeeld
   Huisstijl volgens de merkgids (28-01-2026), zie DEC-005: ochre #FDC500 op
   zwart, Archivo Expanded voor koppen, Montserrat voor lopende tekst.
   Fira Code staat niet in de merkgids en blijft toch: meetwaarden, specs en
   ID's hebben cijfers van gelijke breedte nodig.
   BEWUSTE AFWIJKING: de merkgids zet de ondergrond op anthracite #1C1C1C; de
   site blijft zwart. Afgesproken 27-08-2026 -- zie DEC-005, niet "rechtzetten".
   Goud is hier LICHT (randgloed, statuslampje, energielijn), geen decoratie.
   ========================================================================== */

:root {
  /* grond en oppervlakken */
  --ink:        #0A0A0A;
  --grond:      var(--ink);   /* de paginagrond; alleen de lichte weergave zet hem om */
  --bg:         #111111;
  --s1:         #161616;
  --s2:         #1E1E1E;
  --s3:         #262626;

  --line:       rgba(255,255,255,0.07);
  --line-2:     rgba(255,255,255,0.14);
  /* Randen van BEDIENINGSELEMENTEN (invoervelden, ghost-knoppen, de menuknop).
     WCAG 1.4.11 eist 3:1 voor de begrenzing van een bedieningselement; --line-2
     haalde op --bg maar 1,75:1, waardoor het offerteformulier eruitzag als
     losse labels op een zwart vlak. Gemeten op het donkerste veld dat we
     hebben (invoerveld op --s1 binnen een sectie op --ink): 3,6:1. Niet
     krapper zetten -- op 0,34 alfa was het 3,02:1 en dat is te dicht op de
     norm om op te vertrouwen.
     Gebruik --line/--line-2 voor decoratieve scheiding, --line-ui voor alles
     wat de bezoeker moet kunnen aanwijzen. */
  --line-ui:    rgba(255,255,255,0.42);

  /* het enige signaal */
  --gold:       #FDC500;
  --gold-2:     #E8B400;
  --gold-dim:   rgba(253,197,0,0.12);
  --gold-glow:  rgba(253,197,0,0.28);

  /* GOUD ALS TEKST is iets anders dan goud als vlak of rand.
     #FDC500 haalt op onze zwarte ondergrond 9,5-12,4:1 en is daar dus prima
     leeskleur. Op papier haalt datzelfde goud 1,64:1 -- onleesbaar, en geen
     grensgeval. Elke regel die goud als LETTERKLEUR gebruikt, gebruikt daarom
     --gold-tx; lichte secties zetten die om naar een donkere variant. Vlakken,
     randen, bolletjes en lampjes blijven gewoon --gold: die dragen geen tekst
     en mogen fel zijn. */
  --gold-tx:    var(--gold);

  /* tekst — lopende tekst altijd op --tx-soft of lichter (>= 4.5:1 op --ink) */
  --tx:         #F0F0F0;
  --tx-soft:    #B0B0B0;
  --tx-mut:     #8A8A8A;   /* alleen labels en >=18px */

  /* type
     --display is Archivo op breedte-as 125% (= Expanded). Wie hem gebruikt moet
     ook `font-stretch: 125%` zetten: er is nu maar één breedte binnengehaald,
     dus het gaat vandaag vanzelf goed, maar zodra er een tweede bij komt kiest
     de browser stilzwijgend de verkeerde. */
  --display: Archivo, "Arial Black", system-ui, sans-serif;
  --sans: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Fira Code", Consolas, Monaco, monospace;

  /* ritme */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --wrap:   1240px;
  /* Was clamp(5rem, 10vw, 9rem) = 144px boven en onder per sectie.
     Op de homepage kwam daarmee 29% van de paginahoogte neer op lege
     ruimte tussen blokken. Teruggebracht naar 104px; de rust blijft,
     maar er past merkbaar meer in beeld. Raakt de hele site, en dat
     is de bedoeling -- ritme hoort overal hetzelfde te zijn. */
  --sec:    clamp(3.5rem, 7vw, 6.5rem);

  /* stapeling */
  --z-sticky:    100;
  --z-header:    200;
  --z-voortgang: 300;   /* de leesmeter loopt over de vaste kopbalk heen */
  --z-modal:     400;

  --ease:   cubic-bezier(0.16, 1, 0.3, 1);   /* ease-out-expo */
  --ease-q: cubic-bezier(0.25, 1, 0.5, 1);   /* ease-out-quart */
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- links --------------------------------------------------------------
   Deze basisregel ONTBRAK. Links kregen alleen kleur via scoped regels
   (.artikel__tekst a, .footer a, .crumbs a, ...); alles daarbuiten viel terug
   op het blauw van de browser (#0000EE) -- gemeten 2,01:1 op de donkere
   ondergrond, tegen een norm van 4,5:1. Gevonden op 46 plekken in 16
   bestanden, onder meer "FlexGrid" op /thuisbatterij/. Behalve ontoegankelijk
   is fel blauw met onderstreping op goud-op-zwart precies hoe een kapotte,
   ongestileerde pagina eruitziet.

   Goud met onderstreping is de huisconventie uit .artikel__tekst; goud haalt
   9,5-12,4:1 over de hele oppervlakteramp. */
a { color: var(--gold-tx); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-tx); opacity: 0.75; }

/* Omhullende links (een hele kaart of rij is klikbaar) zijn géén inline link:
   hun inhoud hoort gewoon inkt te zijn. Zonder deze regel zou de basisregel
   hierboven complete kaarten goud kleuren -- .kit p had bijvoorbeeld nergens
   een eigen kleur. */
.kit, .post__link, .kb-rij__link, .kb-uit__link, .deel__link,
.header__logo, .prod-link, .cap {
  color: var(--tx);
  text-decoration: none;
}

body {
  margin: 0;
  background: var(--grond);
  color: var(--tx-soft);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-modal);
  background: var(--gold); color: var(--ink); padding: 0.75rem 1.25rem;
  border-radius: 0 0 10px 0; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- typografie */
/* Koppen staan in Archivo Expanded, lopende tekst in Montserrat. Twee dingen
   die daarbij horen en die je niet moet terugdraaien zonder opnieuw te meten:
   1. GROOTTES ZIJN TERUGGENOMEN naar ~0,85x. Archivo Expanded is ~24% breder
      dan Inter -- gemeten op de zes langste kopregels op 32px, en opvallend
      constant (+23,6% t/m +24,4%), in het Nederlands net zo goed als in het
      Duits. Zonder correctie loopt élke lange kop een regel verder door.
   2. TRACKING IS BIJNA NEUTRAAL. De oude -0,035em hoorde bij Inter, een smalle
      grotesk. Een expanded face is op ruimte ontworpen; diezelfde waarde drukt
      de letters op elkaar. */
h1, h2, h3, h4 {
  color: var(--tx);
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.1rem, 4.5vw, 4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.h2 {
  font-size: clamp(1.6rem, 2.9vw, 2.5rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; }

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: var(--tx-soft);
  max-width: 56ch;
  text-wrap: pretty;
}

p { margin: 0; max-width: 68ch; text-wrap: pretty; }
/* Opeenvolgende alinea's in de tekstkolommen. Door `p { margin: 0 }` plakten
   drie alinea's op /thuisbatterij/ (en 2x op beide productpagina's) aan
   elkaar tot één grijs blok van elf regels. Alleen de p-op-p-overgang, zodat
   readouts en knoppen ongemoeid blijven; een expliciete mt-klasse wint omdat
   de hulpklassen onderaan dit bestand staan. */
.installers p + p, .day p + p, .stack__panel p + p, .section__head p + p,
.nood__tekst p + p { margin-top: 1rem; }

.mono {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tx-mut);
}

/* ------------------------------------------------------------------ knoppen */
.btn {
  --btn-bg: var(--gold);
  --btn-tx: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-tx);
  /* font-family expliciet: een <a class="btn"> erft Inter van body, maar een
     <button class="btn"> niet -- formuliercontrols nemen de UA-default, en de
     cookiebannerknoppen stonden daardoor op alle 132 pagina's in Arial. */
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.22s var(--ease-q), transform 0.22s var(--ease-q), border-color 0.22s var(--ease-q);
}
.btn:hover { background: var(--gold-2); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* een ghost-knop is alleen zijn rand; die haalde met --line-2 1,48:1 en was
   daarmee nauwelijks te zien als bedieningselement */
.btn--ghost { --btn-bg: transparent; --btn-tx: var(--tx); border-color: var(--line-ui); }
.btn--ghost:hover { background: rgba(255,255,255,0.05); border-color: var(--tx); }
/* de secundaire knop uit DESIGN.md: surface-vulling, inktkleur. Voor plekken
   waar twee keuzes gelijkwaardig moeten zijn (cookiebanner) of waar goud al
   vergeven is aan de hoofdactie. */
.btn--vlak { --btn-bg: var(--s2); --btn-tx: var(--tx); border-color: var(--line-ui); }
.btn--vlak:hover { background: var(--s3); border-color: var(--tx); }

.btn__arrow { transition: transform 0.28s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ------------------------------------------------------------------- header */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  transition: background 0.3s var(--ease-q), border-color 0.3s var(--ease-q);
  border-bottom: 1px solid transparent;
}
.header[data-scrolled="true"],
/* bovenaan de pagina is de balk doorzichtig; met een open menu eronder moet
   hij wel dekken, anders loopt de heroafbeelding door de knoppen heen */
.header:has(.header__nav[data-open="true"]) {
  background: rgba(10,10,10,0.88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.header__inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); height: 76px; }
/* Nooit laten krimpen: bij een volle balk was dit het enige flex-item dat
   meegaf, en het woordmerk stond dan op 31px in plaats van 74px. */
.header__logo { flex-shrink: 0; }
.header__logo img { height: 26px; width: auto; }
.header__nav { display: flex; gap: clamp(1rem, 2.2vw, 2rem); margin-left: auto; align-items: center; }
/* :not(.btn) voorkomt dat deze regel de knopkleur overschrijft — zonder dat
   stond er grijze tekst op goud (contrast 1,36:1). */
.header__nav a:not(.btn) { color: var(--tx-soft); text-decoration: none; font-size: 0.9375rem; font-weight: 500; transition: color 0.2s var(--ease-q); }
.header__nav a:not(.btn):hover { color: var(--tx); }

/* De hoofdknop in de kopbalk erfde de volle .btn-maat (0,85rem verticaal,
   0,9375rem tekst). Naast navigatielinks van dezelfde tekstgrootte werd hij
   daarmee bijna twee keer zo hoog als de rij eromheen -- op de
   installateurspagina viel "Word partner" zo uit de balk. Hier een eigen,
   kleinere maat, alleen op desktop: onder 861px staat de balk in mobiele
   opmaak en blijft de knop een volwaardig aanraakdoel.
   De echte boosdoener was overigens niet de padding maar de afbreking: bij een
   volle balk viel "Word partner" over twee regels en werd de knop 69 pixels
   hoog. Vandaar `white-space: nowrap` -- dat geldt op alle breedtes, ook in het
   uitklapmenu, waar een knoplabel evenmin hoort af te breken. */
.header__cta { white-space: nowrap; }
@media (min-width: 861px) {
  .header__cta { padding: 0.6rem 1.1rem; font-size: 0.875rem; border-radius: 8px; }
}


/* ============================================================================
   PARTICULIER OF INSTALLATEUR
   ----------------------------------------------------------------------------
   Eén site, twee ingangen. De schakelaar wisselt het menu en de hoofdknop, en
   brengt je naar de bijbehorende home.

   Het zijn LINKS en geen knoppen. Er zit een pagina achter -- de particuliere
   home of de installateurspagina -- dus een <button> zou voor toetsenbord en
   schermlezer een leugen zijn, en zonder JavaScript zou er niets gebeuren.
   JavaScript doet hier maar één ding: de keuze onthouden.

   Welke kant zichtbaar is, hangt aan `data-doelgroep` op het <html>-element.
   Dat zet de bouw per pagina, dus er is nooit een moment waarop het verkeerde
   menu in beeld staat. Zie build.py, `doelgroep_van()`.
   ========================================================================== */

.doelgroep {
  display: flex; gap: 2px; padding: 3px;
  border: 1px solid var(--line-2); border-radius: 999px;
}
.doelgroep__knop {
  padding: 0.3rem 0.8rem; border-radius: 999px;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 500;
  color: var(--tx-mut); text-decoration: none; white-space: nowrap;
  transition: color 0.2s var(--ease-q), background 0.2s var(--ease-q);
}
.doelgroep__knop:hover { color: var(--tx); }

:root[data-doelgroep="particulier"] .doelgroep__knop[data-voor="particulier"],
:root[data-doelgroep="installateur"] .doelgroep__knop[data-voor="installateur"] {
  background: var(--gold); color: #0A0A0A; font-weight: 700;
}

/* Precies één menuset en één hoofdknop in beeld. `display: none` en niet
   opacity: zo blijft de verborgen kant ook uit de tabvolgorde. */
:root[data-doelgroep="particulier"] .menuset--installateur,
:root[data-doelgroep="particulier"] .header__cta--installateur,
:root[data-doelgroep="particulier"] .header__logo--installateur,
:root[data-doelgroep="installateur"] .menuset--particulier,
:root[data-doelgroep="installateur"] .header__cta--particulier,
:root[data-doelgroep="installateur"] .header__logo--particulier { display: none; }

.menuset { display: contents; }

@media (max-width: 860px) {
  /* In het uitklappaneel is `display: contents` niet genoeg: de set moet zelf
     een kolom worden, anders staan de groepen naast elkaar. */
  .menuset { display: flex; flex-direction: column; align-items: stretch; }
  .doelgroep { order: -1; }
  .doelgroep__knop { font-size: 0.8125rem; padding: 0.35rem 0.7rem; }
}
@media (max-width: 560px) {
  /* Logo, schakelaar en menuknop passen samen; de hoofdknop niet meer. */
  .header__cta { display: none; }
}

/* --- menuknop en uitklapmenu ---------------------------------------------
   Tot 24-08-2026 stonden de navigatielinks onder 860px simpelweg op
   `display: none` zonder alternatief: op telefoon en tablet was de site
   alleen nog via de voettekst te doorlopen, terwijl de particuliere koper
   juist daar leest. De knop is bewust NIET goud -- goud blijft van de
   offerteknop ernaast, anders concurreren er twee signalen in dezelfde balk. */
.menuknop {
  display: none;
  align-items: center; gap: 0.55rem;
  padding: 0.7rem 1rem;
  background: var(--s2); color: var(--tx);
  border: 1px solid var(--line-ui); border-radius: var(--r);
  font: inherit; font-size: 0.9375rem; font-weight: 600;
  cursor: pointer;
  transition: background 0.16s var(--ease-q), border-color 0.16s var(--ease-q);
}
.menuknop:hover { background: var(--s3); border-color: var(--gold); }
.menuknop__streep {
  position: relative;
  width: 18px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: background 0.16s var(--ease-q);
}
.menuknop__streep::before,
.menuknop__streep::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform 0.22s var(--ease-q);
}
.menuknop__streep::before { top: -6px; }
.menuknop__streep::after { top: 6px; }
.menuknop[aria-expanded="true"] .menuknop__streep { background: transparent; }
.menuknop[aria-expanded="true"] .menuknop__streep::before { transform: translateY(6px) rotate(45deg); }
.menuknop[aria-expanded="true"] .menuknop__streep::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .menuknop { display: inline-flex; }
  .header__inner { gap: 0.75rem; }
  /* het menu is een paneel onder de balk; `display: none` bij gesloten stand
     houdt de links ook uit de tabvolgorde */
  .header__nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0;
    background: var(--s1);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);

    /* Het paneel telt 38 links en werd 1000px hoog; op een telefoon van 812px
       hing er 264px onbereikbaar onder de rand. Het hangt namelijk aan een
       kopbalk met `position: fixed`, dus scrollen van de pagina schuift het
       niet mee -- "het menu opent wel, maar je kunt er niet in scrollen"
       (gemeld 07-09-2026). Het paneel krijgt daarom zijn eigen schuifruimte.

       `100%` is hier de hoogte van de kopbalk: bij een absoluut geplaatst
       element rekenen procenten tegen het blok waarin het hangt, en dat is de
       kopbalk. Zo hoeft de balkhoogte nergens herhaald te worden.
       `svh` en niet `dvh`: met dvh verspringt de hoogte zodra de adresbalk van
       de telefoon in- of uitschuift, en dan springt een open menu mee. */
    max-height: calc(100svh - 100%);
    overflow-y: auto;
    /* houdt de scroll in het paneel; anders scrollt de pagina eronder door
       zodra je de onderkant van de lijst bereikt */
    overscroll-behavior: contain;
  }
  .header__nav[data-open="true"] { display: flex; }
  .header__nav a:not(.btn) {
    padding: 1rem clamp(1.15rem, 5vw, 2rem);
    font-size: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .header__nav a:not(.btn):last-child { border-bottom: 0; }
  .header__nav a:not(.btn)[aria-current="page"] { color: var(--gold-tx); }
}
@media (max-width: 460px) {
  /* op de smalste schermen wint de knop het van zijn eigen bijschrift */
  .menuknop__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .menuknop { padding: 0.7rem 0.85rem; }
  .header__cta { padding: 0.7rem 1rem; font-size: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .menuknop, .menuknop__streep, .menuknop__streep::before, .menuknop__streep::after { transition: none; }
}

/* --- taalwisselaar --------------------------------------------------------
   NL · EN · DE, links van de offerteknop. Bewust drie losse codes en geen
   uitklapmenu: bij drie talen kost een menu een klik extra en verbergt het
   waar je heen kunt. En bewust GEEN vlaggen -- een vlag is een land, geen
   taal, en Duits wordt in vier landen gesproken.

   De actieve taal is goud. Dat is de enige plek in de kop waar goud nog
   opduikt naast de offerteknop; het gaat om twee letters, dus het blijft ver
   onder de 10% uit DESIGN.md.

   .taal__uit is de taal waarin deze pagina niet bestaat (de kennisbank, het
   Impressum). Uitgegrijsd en niet aanklikbaar -- zie omlijsting.py voor
   waarom hij niet gewoon naar de homepage wijst.

   De wisselaar staat in de nav (zie omlijsting.py), dus onder 860px klapt hij
   mee naar binnen in het menupaneel in plaats van de offerteknop uit de balk
   te drukken. Vandaar de .header__nav-voorvoegsels: die zijn nodig om te
   winnen van `.header__nav a:not(.btn)` hierboven. */
.taal {
  display: flex; align-items: center; gap: 0.15rem;
  font-family: var(--mono);
  font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.04em;
}
.taal > * {
  padding: 0.3rem 0.4rem;
  border-radius: 4px;
  text-decoration: none;
  transition: color 0.16s var(--ease-q), background 0.16s var(--ease-q);
}
.header__nav .taal__link { color: var(--tx-soft); font-size: inherit; }
.header__nav .taal__link:hover { color: var(--tx); background: var(--s2); }
.header__nav .taal__nu { color: var(--gold); }
/* aria-disabled in plaats van een uitgeschakelde knop: het is geen knop, en
   een schermlezer meldt de reden via title. */
.header__nav .taal__uit { color: var(--tx-soft); opacity: 0.38; cursor: default; }

@media (max-width: 860px) {
  /* in het uitklappaneel: een eigen rij onderaan, met dezelfde scheidingslijn
     als de menu-items erboven zodat het één lijst blijft */
  .taal {
    justify-content: center; gap: 0.35rem;
    padding: 0.9rem clamp(1.15rem, 5vw, 2rem);
    border-top: 1px solid var(--line);
    font-size: 0.9375rem;
  }
  .taal > * { padding: 0.4rem 0.7rem; }
}

/* Alleen voor schermlezers: de volledige taalnaam achter de code, zodat
   "NL" niet als losse letters wordt voorgelezen. */
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (max-width: 460px) {
  .taal { font-size: 0.75rem; gap: 0; }
  .taal > * { padding: 0.3rem 0.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .taal > * { transition: none; }
}

/* --------------------------------------------------------------------- hero */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  align-items: center;
  min-height: min(94svh, 900px);
  padding-top: 76px;
  background: var(--ink);
}

.hero__text {
  padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 3vw, 3rem) clamp(3rem, 7vw, 6rem) var(--gutter);
  max-width: calc(var(--wrap) * 0.52);
  margin-left: auto;
  position: relative;
  z-index: 2;
}
.hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.75rem;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
}
.hero__status .mono { color: var(--tx-soft); font-size: 0.6875rem; }
.pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 var(--gold-glow);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--gold-glow); }
  70%  { box-shadow: 0 0 0 9px rgba(253,197,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(253,197,0,0); }
}

.hero__title { margin-bottom: 1.5rem; }
.hero__title em { font-style: normal; color: var(--gold-tx); }
.hero__lead { margin-bottom: 2.25rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.75rem; }

.hero__facts {
  display: flex; flex-wrap: wrap;
  gap: 0 clamp(1.25rem, 3vw, 2.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.hero__fact { display: flex; flex-direction: column; gap: 0.15rem; padding-block: 0.4rem; }
.hero__fact b {
  font-family: var(--mono); font-size: 1rem; font-weight: 500;
  color: var(--tx); font-variant-numeric: tabular-nums;
}
.hero__fact span { font-size: 0.75rem; color: var(--tx-mut); letter-spacing: 0.02em; }

.hero__media { position: relative; height: 100%; min-height: 420px; }
.hero__media img,
.hero__media .hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--ink) 0%, rgba(10,10,10,0.55) 22%, rgba(10,10,10,0) 55%);
  pointer-events: none;
}

@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  /* Tekst vóór beeld (02-09-2026). Daarvoor stond de video bovenaan met
     300-460 px hoogte: op een telefoon was het eerste scherm alleen beeld,
     zonder kop en zonder knop. Nu eerst status, kop en knoppen, daarna een
     lagere video. */
  .hero__text {
    order: 1;
    padding: clamp(2rem, 6vw, 3.5rem) var(--gutter) clamp(1.5rem, 4vw, 2.5rem);
    margin-inline: auto;
    max-width: var(--wrap);
    width: 100%;
  }
  .hero__lead { margin-bottom: 1.5rem; }
  .hero__cta { margin-bottom: 2rem; }
  .hero__media { order: 2; min-height: 0; height: clamp(200px, 48vw, 320px); }
  .hero__media::after {
    background: linear-gradient(180deg, var(--ink) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,0) 80%, var(--ink) 100%);
  }
}

/* ------------------------------------------------------------- plakbalk
   Eén vaste knop onderaan op telefoon, alleen op de beslispagina's (home,
   thuisbatterij, productpagina's). De hoofdknop in de kopbalk verdwijnt
   onder 560px; dit vangt dat op. Verschijnt pas na de hero (site.js zet
   data-zichtbaar), zodat hij de hero-knoppen niet verdubbelt. */
.plakbalk {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky);
  display: none;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(10,10,10,0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-2);
  transform: translateY(110%);
  transition: transform 0.3s var(--ease);
}
.plakbalk .btn { width: 100%; justify-content: center; }
.plakbalk[data-zichtbaar="true"] { transform: none; }
@media (max-width: 940px) {
  .js .plakbalk { display: block; }
  .js body:has(.plakbalk[data-zichtbaar="true"]) { padding-bottom: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) { .plakbalk { transition: none; } }

/* -------------------------------------------------------------- urgentie
   Eén vaste zin met de 2027-consequentie, onder de aannames van het
   besparingsblok. Geen countdown, geen banner: één zin, cijfers uit de
   eigen aannames. */
.urgentie {
  margin-top: 1.5rem; padding: 1rem 1.25rem;
  border-left: 3px solid var(--gold);
  background: var(--s1); border-radius: 0 12px 12px 0;
  color: var(--tx-soft); max-width: 62ch;
}

/* -------------------------------------------------------------- downloads
   "Voor installateurs" onder de specificaties: datasheet en installatie-
   video. Alleen documenten die bestaan; handleidingen blijven in het portaal. */
.downloads { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.downloads__kop { font-size: 0.8125rem; color: var(--tx-mut); letter-spacing: 0.02em; text-transform: uppercase; margin: 2.5rem 0 0.75rem; }
.download {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1rem; border: 1px solid var(--line-ui); border-radius: 10px;
  background: var(--s1); color: var(--tx); text-decoration: none;
  font-size: 0.9375rem; transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.download:hover { border-color: var(--tx); background: var(--s2); }
.download small { color: var(--tx-mut); font-family: var(--mono); font-size: 0.75rem; }

/* ------------------------------------------------------------------ secties */
.section { padding-block: var(--sec); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--bg { background: var(--bg); }

.section__head { max-width: 62ch; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }


/* ============================================================================
   PAGINAHERO MET GEWICHT  (.pagehero--groot)
   ----------------------------------------------------------------------------
   De gewone .pagehero is een tekstblok: kruimelpad, kop, lead. Prima voor een
   informatiepagina, te mager voor een landingspagina die iemand moet
   overtuigen -- daar staat niets te kijken en heeft de kop niet meer gewicht
   dan een sectiekop verderop.

   Deze variant zet de kop op drie korte regels in de grootste maat die we
   hebben, met de belofte in goud als laatste regel, en legt er een
   productbeeld naast. Het beeld staat rechts en verdwijnt onder 62rem: op een
   telefoon telt de kop, niet de foto.
   ========================================================================== */

.pagehero--groot { padding-bottom: 0; border-bottom: 0; }

.paghero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.paghero__tekst { position: relative; z-index: 1; }

/* Drie korte regels vragen om een strakkere regelafstand dan lopende tekst;
   op de standaardhoogte zou er een gat tussen de regels vallen. */
.paghero__kop {
  font-size: clamp(2.05rem, 4.4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}
.paghero__lead { margin-top: 1.5rem; max-width: 46ch; }
.paghero .hero__cta { margin-top: 2rem; }
.paghero__voet {
  margin: 1.75rem 0 0;
  font-size: 0.6875rem; letter-spacing: 0.04em;
  color: var(--tx-mut);
}

/* Het beeld hangt in een lichtvlek zodat het niet als uitgeknipte foto op een
   zwart vlak plakt -- dezelfde truc als achter de opengewerkte tekening. */
.paghero__beeld {
  position: relative;
  display: flex; justify-content: center; align-items: flex-end;
  min-height: min(66svh, 36rem);
}
/* Twee lagen achter het product. De gloed geeft het kleur en houdt het van het
   zwart af; de schaduwellips eronder geeft het een grond -- zonder die tweede
   zweeft een uitgeknipte foto. */
.paghero__beeld::before {
  content: ""; position: absolute; inset: -10% -5% 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 55% at 50% 45%, rgba(253,197,0,0.16), transparent 68%),
    radial-gradient(ellipse 70% 70% at 50% 50%, rgba(255,255,255,0.05), transparent 72%);
}
.paghero__beeld::after {
  content: ""; position: absolute; left: 50%; bottom: 4%;
  width: 62%; height: 3.5rem; transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,0.65), transparent 72%);
}
.paghero__beeld img {
  position: relative; z-index: 1;
  width: auto; max-width: 100%;
  max-height: min(62svh, 34rem);
  object-fit: contain;
}

@media (max-width: 62rem) {
  .paghero { grid-template-columns: 1fr; }
  .paghero__beeld { display: none; }
}

/* ============================================================================
   STATBALK
   ----------------------------------------------------------------------------
   Vier cijfers over de volle breedte, direct onder de hero. Ze stonden eerder
   in de hero zelf als een regel feitjes op 1rem mono -- typografisch gelijk aan
   een bijschrift, terwijl het de harde bewijzen van de pagina zijn.

   Het getal is groot en goud, het label leesbaar, de monoregel eronder geeft de
   nuance. De 1px-rasterlijnen komen uit de achtergrond van het grid, zoals bij
   .specs en .kits -- zo blijft het één systeem.
   ========================================================================== */

.statbalk {
  background: var(--bg);
  border-block: 1px solid var(--line);
}
.statbalk__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  margin-inline: calc(var(--gutter) * -1);
}
.stat {
  background: var(--bg);
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.15rem, 2.4vw, 1.9rem);
}
.stat b {
  display: block;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 600;
  letter-spacing: -0.01em; line-height: 1;
  color: var(--gold-tx);
  font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: 0.7rem; font-size: 0.875rem; color: var(--tx-soft); }
.stat small {
  display: block; margin-top: 0.35rem;
  font-family: var(--mono); font-size: 0.6875rem; line-height: 1.5;
  color: var(--tx-mut);
}

@media (max-width: 62rem) {
  .statbalk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 34rem) {
  .statbalk__grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   LICHTE SECTIES
   ----------------------------------------------------------------------------
   Waarom dit er is. De site is gebouwd als één donkere ruimte, en dat werkt
   voor product en merk. Voor lange leesstukken werkt het tegen je: er is geen
   moment waarop het oog merkt dat er een nieuw onderwerp begint, en witte
   letters op zwart lezen bij vier alinea's achter elkaar zwaarder dan andersom.
   Een lichte sectie doet twee dingen tegelijk: hij markeert de overgang en hij
   maakt het stuk erbinnen makkelijker te lezen.

   Hoe het werkt. Een lichte sectie herdefinieert de bestaande tokens binnen
   zijn eigen grenzen. Alle componenten -- .specs, .feats, .kits, .tl, .badges,
   .stappen, .cta -- blijven daardoor werken zoals ze zijn; er is geen enkele
   lichte variant van een component nodig. Dat is bewust: een tweede set
   klassen loopt binnen een half jaar uit de pas met de eerste.

   Twee gradaties. `--licht` is papier (#F8F7F4) met witte kaarten erop,
   `--wit` is zuiver wit met kaarten in papier. Meer smaken zijn er niet.

   Wat NIET meeverandert: --ink. Dat is niet "de achtergrond" maar "de donkerste
   inkt", en het staat onder meer op de letterkleur van de gouden knop. Zou --ink
   hier wit worden, dan kreeg die knop witte letters op goud.

   Waar dit NIET hoort: de opengewerkte tekening (.ontleed). Die is een donkere
   studio met een eigen palet, en die hoort donker te blijven.
   ========================================================================== */

.section--licht,
.section--wit {
  --bg:       #FFFFFF;   /* kaarten en velden */
  --s1:       #FFFFFF;
  --s2:       #F4F2ED;   /* hover en tweede laag */
  --s3:       #EBE8E1;
  --line:     #E4E2DC;
  --line-2:   #D6D3CB;
  --line-ui:  #9A968C;   /* randen van bedieningselementen: 3,3:1 op papier */
  --tx:       #101013;
  --tx-soft:  #4C4C4A;
  --tx-mut:   #6E6E6C;
  --gold-tx:  #7A5F00;   /* 6,9:1 op papier */
  --gold-dim: rgba(253,197,0,0.20);

  background: #F8F7F4;
  color: var(--tx-soft);
}

.section--wit {
  --s1: #F8F7F4;
  background: #FFFFFF;
}

/* Een paar regels rekenen op een donkere ondergrond en moeten hier om. */
.section--licht .btn--ghost:hover,
.section--wit .btn--ghost:hover { background: rgba(0,0,0,0.045); }

.section--licht .badge,
.section--wit .badge { background: #FFFFFF; }

/* De gouden gloed onder een blok is op papier een vieze vlek. */
.section--licht .cta,
.section--wit .cta { background: var(--s1); }

/* ============================================================================
   NADRUK IN DE HUISSTIJLKLEUR
   ----------------------------------------------------------------------------
   Dikgedrukt in goud, zodat het belangrijkste uit een alinea springt zonder dat
   er een kader of een icoon bij hoeft.

   Bewust alleen binnen lopende tekst, lijsten en tabelcellen -- niet elke <b>
   op de site. Die zit ook in de tijdlijn (jaartallen), de cijferblokken, het
   adres en de bijschriften, en daar zou goud alleen maar ruis toevoegen omdat
   die dingen al opvallen door hun plaats.

   Spaarzaam gebruiken. DESIGN.md houdt goud op hoogstens een tiende van het
   scherm; dáárom valt het op. Een alinea met vier gouden stukken leest slechter
   dan een alinea zonder.
   ========================================================================== */

p strong, li strong, dd strong, td strong, figcaption strong {
  color: var(--gold-tx);
  font-weight: 600;
}

.section__head p { margin-top: 1rem; }

/* ------------------------------------------------------ dagritme (schematisch) */
.day { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
/* Twee tekstkolommen met een kop erboven horen aan de bovenkant uitgelijnd:
   gecentreerd staan de koppen op verschillende hoogte en lijkt het toeval. */
.day--top { align-items: start; }
@media (max-width: 940px) { .day { grid-template-columns: 1fr; } }

.day__chart { background: var(--s1); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.25rem, 2.5vw, 2rem); }
.day__chart svg { width: 100%; height: auto; overflow: visible; }
.day__caption { margin-top: 1rem; font-size: 0.75rem; color: var(--tx-mut); font-family: var(--mono); letter-spacing: 0.04em; }

.day__moments { display: flex; flex-direction: column; gap: 1.5rem; margin: 0; list-style: none; padding: 0; }
.day__moment { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1.1rem; align-items: baseline; }
.day__time {
  font-family: var(--mono); font-size: 0.8125rem; color: var(--gold-tx);
  font-variant-numeric: tabular-nums; min-width: 5.5ch;
}
.day__moment b { color: var(--tx); font-weight: 600; font-size: 1rem; }
.day__moment p { grid-column: 2; font-size: 0.9375rem; }

/* --------------------------------------------------------------- stapelaar */
.stack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 940px) { .stack { grid-template-columns: 1fr; } }

.stack__stage {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: clamp(360px, 46vw, 560px);
  padding: 2rem;
  background:
    radial-gradient(ellipse 55% 38% at 50% 90%, rgba(253,197,0,0.10), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255,255,255,0.045), transparent 72%);
  border-radius: 22px;
  overflow: hidden;
}
.stack__stage::after {
  content: "";
  position: absolute; left: 50%; bottom: 2rem;
  width: min(74%, 380px); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--line-2) 22%, var(--line-2) 78%, transparent);
}
.stack__img {
  grid-area: 1 / 1;
  max-height: clamp(290px, 38vw, 460px);
  width: auto;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.7));
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.stack__img[data-active="true"] { opacity: 1; transform: none; }

.stack__controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.cap {
  flex: 1 1 6rem;
  padding: 0.9rem 0.75rem;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--tx-soft);
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.24s var(--ease-q), color 0.24s var(--ease-q), background 0.24s var(--ease-q), transform 0.24s var(--ease-q);
}
.cap:hover { border-color: var(--line-2); color: var(--tx); transform: translateY(-2px); }
.cap[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-dim); color: var(--gold-tx); }
.cap small { display: block; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.02em; text-transform: none; opacity: 0.8; margin-top: 0.15rem; }

.readout {
  display: grid;
  /* 7rem in plaats van 8.5rem. Met vier cellen gaf auto-fit drie kolommen plus
     een weescel, en werden de smalle cellen te krap voor hun eigen waarde.
     Maar bij vier cellen bleef "Systeemenergie" 106px nodig hebben in een cel
     van 98px -- een woord dat niet kan afbreken loopt dan over de rand. Vier
     cellen staan daarom in 2x2; dat lost de krapte en de wees in een keer op. */
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1.75rem;
}
.readout__cell { background: var(--s1); padding: 1.1rem 1.15rem; }
.readout__k { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tx-mut); }
.readout__v {
  font-family: var(--mono); font-size: 1.5rem; font-weight: 500;
  color: var(--tx); font-variant-numeric: tabular-nums; line-height: 1.25;
  /* margin op alle zijden, niet alleen boven: op de productpagina's is dit een
     <dd>, en die krijgt van de browser 40px inspringing links. In een cel van
     111px bleef er dan 71px over en brak "ondersteund" middendoor. */
  margin: 0.3rem 0 0;
  /* De cel knipt af (overflow:hidden bewaakt de ronde hoeken), dus een eenheid
     die niet paste verdween stil: op het scherm stond "< 10 millisecond".
     Bij een noodstroomspecificatie is een half getal onbruikbaar. Liever
     afbreken -- de pagina staat op lang="nl", dus hyphens: auto breekt netjes. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* De eenheid blijft één woord: overflow-wrap: anywhere hierboven brak "kWh"
   op telefoon in "k" en "Wh" over twee regels. */
.readout__v em { font-style: normal; font-size: 0.875rem; color: var(--tx-mut); margin-left: 0.15rem; white-space: nowrap; }
/* In smalle kolommen (tablet, en de productpagina's met drie cellen naast
   elkaar) past getal plus eenheid niet op één regel: "ondersteund" en
   "milliseconden" werden afgeknipt. Daar krijgt de eenheid een eigen regel. */
@media (max-width: 1100px) {
  .readout__v em { display: block; margin-left: 0; white-space: normal; }
}
/* De telefoonregels voor .readout staan verderop, ná de :has-regel voor vier
   cellen, anders wint die op volgorde. */
.stack__note { font-size: 0.8125rem; color: var(--tx-mut); margin-bottom: 1.75rem; }

/* ------------------------------------------------------------- veiligheid */
.layers { counter-reset: laag; display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.layer {
  counter-increment: laag;
  display: grid;
  grid-template-columns: 4rem minmax(0, 14rem) minmax(0, 1fr);
  gap: 0.4rem 1.5rem;
  align-items: baseline;
  background: var(--grond);
  padding: clamp(1.4rem, 2.6vw, 2rem) 0;
  transition: background 0.3s var(--ease-q);
}
.layer:hover { background: var(--s1); }
.layer::before {
  content: "0" counter(laag);
  font-family: var(--mono); font-size: 0.875rem; color: var(--gold-tx); font-variant-numeric: tabular-nums;
}
.layer h3 { color: var(--tx); }
.layer p { font-size: 0.9375rem; }
@media (max-width: 800px) {
  .layer { grid-template-columns: 3rem minmax(0, 1fr); }
  .layer p { grid-column: 2; }
}

/* ------------------------------------------------------------------- specs */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin: 0; }
.spec { background: var(--bg); padding: 1.35rem 1.5rem; display: flex; flex-direction: column; gap: 0.3rem; }
.spec dt { font-size: 0.8125rem; color: var(--tx-mut); }
.spec dd { margin: 0; font-family: var(--mono); font-size: 0.9375rem; color: var(--tx); font-variant-numeric: tabular-nums; line-height: 1.5; }
/* "Communicatieprotocollen" en e-mailadressen pasten in smalle cellen niet
   en liepen over de rand; liever afbreken dan afknippen. */
.spec dt, .spec dd { overflow-wrap: anywhere; hyphens: auto; }

/* ------------------------------------------------------------- installateurs */
.installers { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 940px) { .installers { grid-template-columns: 1fr; } }
.installers__map img { width: 100%; height: auto; border-radius: 16px; }

/* --------------------------------------------------------------------- cta */
.cta {
  border-radius: 22px;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  background:
    radial-gradient(ellipse 60% 100% at 15% 0%, rgba(253,197,0,0.13), transparent 62%),
    var(--s1);
  border: 1px solid var(--line);
  overflow: hidden;
}
.cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; }
@media (max-width: 800px) { .cta__grid { grid-template-columns: 1fr; align-items: start; } }

/* ------------------------------------------------------------------ footer */
.footer { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 4rem); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr)); gap: 2.5rem; }
/* Onder 900px past auto-fit vier kolommen van 9rem naast elkaar, maar dan
   breken "dysun@dysun.energy" en "Kennis en zakelijk" middenin een woord.
   Tablet: twee kolommen, het merkblok over de volle breedte. Telefoon: één
   kolom -- de twee kolommen van 150px die auto-fit daar nog maakte, gaven een
   toren van tien regels naast een lijst (gemeld 04-09-2026). */
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
.footer h4 { font-size: 0.75rem; font-family: var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--tx-mut); font-weight: 500; margin-bottom: 0.9rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
/* Lange e-mailadressen mogen afbreken; zonder dit duwt support@dysun.energy
   de pagina op smalle schermen 2px buiten beeld. */
.footer a, .contact a { overflow-wrap: anywhere; }
.footer a { color: var(--tx-soft); text-decoration: none; font-size: 0.9375rem; transition: color 0.2s var(--ease-q); }
.footer a:hover { color: var(--gold-tx); }
.footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.8125rem; color: var(--tx-mut); }
.footer__logo { height: 24px; width: auto; margin-bottom: 1rem; }

/* ---------------------------------------------------------------- onthullen */
/* Inhoud is standaard zichtbaar; JS verbergt alleen tijdelijk en heeft een
   noodrem (site.js) zodat er nooit een lege pagina kan ontstaan. */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .pulse { animation: none; }
  .stack__img { transition: opacity 0.15s linear; transform: none; }
  .btn:hover, .cap:hover { transform: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ==========================================================================
   Uitbreiding: subpagina's, assortiment, FlexGrid, tijdlijn, formulier
   ========================================================================== */

/* --------------------------------------------------------- subpagina-hero */
.pagehero { padding: calc(76px + clamp(3rem, 7vw, 5.5rem)) 0 clamp(2.5rem, 5vw, 4rem); background: var(--bg); border-bottom: 1px solid var(--line); }
.pagehero .lead { margin-top: 1.15rem; }
.crumbs { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1.25rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tx-mut); }
.crumbs a { color: var(--tx-mut); text-decoration: none; }
.crumbs a:hover { color: var(--gold-tx); }

/* ------------------------------------------------------------- assortiment */
.kits { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.kit { background: var(--bg); padding: clamp(1.5rem, 2.6vw, 2rem); display: flex; flex-direction: column; gap: 0.65rem; text-decoration: none; transition: background 0.3s var(--ease-q); }
.kit:hover { background: var(--s1); }
.kit__rol { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold-tx); }
.kit h3 { color: var(--tx); }
.kit p { font-size: 0.9375rem; }
.kit__spec { margin-top: auto; padding-top: 0.9rem; font-family: var(--mono); font-size: 0.8125rem; color: var(--tx-soft); font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); }

/* -------------------------------------------------------- productcatalogus */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.prods { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
/* De kaarten waren niet klikbaar; de pagina achter het menu-item "Producten"
   had in de hele body twee links. De kop is nu de link en het uitgerekte
   pseudo-element maakt de hele kaart aanwijsbaar -- één link per kaart, dus
   geen dubbele stops voor toetsenbord en schermlezer. */
.prod { position: relative; display: flex; flex-direction: column; background: var(--s1); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: border-color 0.2s var(--ease-q), background 0.2s var(--ease-q); }
.prod:hover { border-color: var(--line-2); background: var(--s2); }
.prod__link { color: inherit; text-decoration: none; }
.prod__link::after { content: ""; position: absolute; inset: 0; }
.prod:hover .prod__link { color: var(--gold-tx); }
.prod__link:focus-visible { outline: none; }
.prod:has(.prod__link:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.prods__voetnoot { color: var(--tx-mut); margin: 1.25rem 0 0; }
.prod__shot {
  position: relative; display: grid; place-items: center; min-height: 230px; padding: 1.75rem;
  background: radial-gradient(ellipse 60% 45% at 50% 88%, rgba(253,197,0,0.09), transparent 70%), var(--ink);
  border-bottom: 1px solid var(--line);
}
.prod__shot img { max-height: 190px; width: auto; filter: drop-shadow(0 18px 34px rgba(0,0,0,0.65)); }
.prod__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.prod__body h3 { color: var(--tx); }
/* was goud: 13 gouden sublabels op één scherm op /producten/. Metadata is
   geen signaal; de kop licht al goud op bij hover. */
.prod__sub { font-family: var(--mono); font-size: 0.75rem; color: var(--tx-mut); letter-spacing: 0.05em; }
.prod__specs { margin: 1.15rem 0 0; display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.prod__specs > div { background: var(--s1); display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; }
.prod__specs dt { font-size: 0.8125rem; color: var(--tx-mut); }
.prod__specs dd { margin: 0; font-family: var(--mono); font-size: 0.8125rem; color: var(--tx); font-variant-numeric: tabular-nums; text-align: right; }

/* ------------------------------------------------------------ kenmerkraster */
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
/* De bovenrand was 2px goud -- op 86 blokken over 18 pagina's, waarmee goud
   decoratie werd in plaats van signaal (en in een raster van 3+1 bleef er
   een zwevende gouden streep achter). Een haarlijn doet hetzelfde werk;
   goud blijft van de actie die er op dat scherm toe doet. */
.feat { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-2); }
.feat h3 { color: var(--tx); }
.feat p { font-size: 0.9375rem; }

/* --------------------------------------------------------------- tijdlijn */
.tl { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.tl li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.75rem; padding: 1.5rem 0; border-top: 1px solid var(--line); align-items: baseline; }
.tl li:last-child { border-bottom: 1px solid var(--line); }
.tl b { font-family: var(--mono); font-size: 1.375rem; font-weight: 500; color: var(--gold-tx); font-variant-numeric: tabular-nums; }
.tl p { font-size: 1rem; color: var(--tx-soft); }
@media (max-width: 620px) { .tl li { grid-template-columns: 1fr; gap: 0.35rem; } }

/* ------------------------------------------------------------------ citaat */
.quote { border-left: none; padding: clamp(2rem, 4vw, 3rem) 0; margin: 0; }
.quote blockquote { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.85rem); line-height: 1.4; font-weight: 600; color: var(--tx); letter-spacing: -0.005em; max-width: 26ch; text-wrap: balance; }
.quote figcaption { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--tx-mut); }
.quote figcaption b { color: var(--tx-soft); font-weight: 600; }

/* ------------------------------------------------------------- certificaten */
.badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.badge { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--tx-soft); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.4rem 0.9rem; }

/* ---------------------------------------------------------------- formulier */
.form { display: grid; gap: 1.15rem; max-width: 34rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label { font-size: 0.875rem; color: var(--tx-soft); font-weight: 500; }
/* De rand haalde met --line-2 maar 1,75:1 tegen de sectieachtergrond, terwijl
   WCAG 1.4.11 voor de begrenzing van een bedieningselement 3:1 eist. Op het
   enige punt waar de site geld verdient zag het formulier eruit als losse
   labels op een zwart vlak. --line-ui haalt ~3,4:1. */
.field input, .field textarea, .field select {
  font-family: var(--sans); font-size: 1rem; color: var(--tx);
  background: var(--s1); border: 1px solid var(--line-ui); border-radius: 10px;
  padding: 0.8rem 1rem; transition: border-color 0.2s var(--ease-q), box-shadow 0.2s var(--ease-q);
}
.field input::placeholder, .field textarea::placeholder { color: var(--tx-mut); }
/* `outline: none` haalde hier de universele gouden focusring weg en liet
   alleen een rand van 1px over -- zwakker dan overal elders op de site. De
   ring komt terug als box-shadow, zodat de afgeronde hoek gevolgd wordt. */
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  border-color: var(--gold); outline: none;
  box-shadow: 0 0 0 3px rgba(253, 197, 0, 0.45);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); }
/* verplichte velden zijn nu ook zonder kleur te herkennen */
.field label .verplicht { color: var(--gold-tx); margin-left: 0.15rem; }
/* zelfde rood als .form__melding[data-soort="fout"], zodat de foutkleur op
   één plek herkenbaar blijft */
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: rgba(239, 68, 68, 0.7); }
.veldfout { font-size: 0.8125rem; color: #FCA5A5; }
.field textarea { min-height: 7rem; resize: vertical; }
/* minmax(0, 1fr) en min-width: 0: een invoerveld heeft een eigen
   minimumbreedte (~265px), en twee naast elkaar maakten het formulier 551px
   in een kolom van 436px -- op tablet-landschap liep de installateurspagina
   dan rechts uit beeld (04-09-2026). */
.form { grid-template-columns: minmax(0, 1fr); }
.field input, .field textarea, .field select { min-width: 0; width: 100%; }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.15rem; }
@media (max-width: 560px) { .form__row { grid-template-columns: minmax(0, 1fr); } }
.form__note { font-size: 0.8125rem; color: var(--tx-mut); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__melding { padding: 1rem 1.15rem; border-radius: 10px; font-size: 0.9375rem; }
.form__melding[data-soort="ok"] { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.4); color: #86EFAC; }
.form__melding[data-soort="fout"] { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.4); color: #FCA5A5; }

/* -------------------------------------------------------- rekenvoorbeelden
   Drie bevroren uitkomsten van de besparingscalculator op dysunenergy.nl --
   de calculator blijft de enige plek die echt rekent; dit zijn voorbeelden
   met de aannames erbij, conform de huisregel "cijfers met bron".
   Zelfde 1px-gap-opbouw als .contacts en .varianten. */
.voorbeelden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.voorbeeld { background: var(--bg); padding: clamp(1.4rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; gap: 0.45rem; }
.voorbeeld__profiel { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tx-mut); }
.voorbeeld h3 { color: var(--tx); font-size: 1.0625rem; }
.voorbeeld__invoer { font-size: 0.9375rem; color: var(--tx-soft); }
.voorbeeld__besparing {
  margin-top: 0.6rem;
  font-family: var(--mono); font-size: 1.75rem; font-weight: 500;
  color: var(--tx); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.voorbeeld__besparing em { font-style: normal; font-size: 0.875rem; color: var(--tx-mut); margin-left: 0.2rem; }
.voorbeeld__terug { font-family: var(--mono); font-size: 0.8125rem; color: var(--tx-soft); font-variant-numeric: tabular-nums; }
.voorbeelden__bron { font-size: 0.8125rem; color: var(--tx-mut); margin: 1.25rem 0 0; max-width: 62rem; }

/* ------------------------------------------------------------- contactblok */
.contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.contact { background: var(--bg); padding: 1.15rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
/* De blokken staan in een halve kolom; met 1,5rem padding en 15px tekst brak
   "dysun@dysun.energy" middenin het woord af en liep de kop over twee regels,
   waardoor de drie kolommen niet meer uitlijnden. Smallere padding, iets
   kleinere tekst en koppen die op een regel passen lossen dat op zonder de
   kolom breder te hoeven maken. */
.contact a { font-size: 0.875rem; overflow-wrap: normal; }
.contact h3 { min-height: 1.1em; }
.contact h3 { font-size: 0.75rem; font-family: var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold-tx); font-weight: 500; }
.contact a { color: var(--tx-soft); text-decoration: none; font-size: 0.9375rem; }
.contact a:hover { color: var(--gold-tx); }

/* ------------------------------------------------------------- systeemkaart */
.sys { background: var(--s1); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.25rem, 3vw, 2.25rem); }
.sys svg { width: 100%; height: auto; overflow: visible; }

/* ==========================================================================
   Kennisbank: overzicht en artikelpagina
   ========================================================================== */

.wrap--smal { max-width: 760px; }

/* -------------------------------------------------------------- overzicht */
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.post { background: var(--bg); transition: background 0.3s var(--ease-q); }
.post:hover { background: var(--s1); }
.post__link { display: flex; flex-direction: column; gap: 0.55rem; height: 100%; padding: 1.6rem 1.5rem; text-decoration: none; }
.post__datum { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-mut); }
.post__link h2 { color: var(--tx); transition: color 0.2s var(--ease-q); }
.post:hover .post__link h2 { color: var(--gold-tx); }
.post__link p { font-size: 0.9375rem; color: var(--tx-soft); }
.post__meer { margin-top: auto; padding-top: 0.9rem; font-size: 0.875rem; font-weight: 600; color: var(--gold-tx); }
.post__meer span { display: inline-block; transition: transform 0.28s var(--ease); }
.post:hover .post__meer span { transform: translateX(4px); }

/* --------------------------------------------------------------- artikel */
.artikel { padding: calc(76px + clamp(2.5rem, 5vw, 4rem)) 0 clamp(3rem, 6vw, 5rem); }
.artikel__kop { font-size: clamp(1.7rem, 3.5vw, 2.7rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.012em; margin-bottom: 1rem; }
/* "thuisbatterijen" is op 1,7rem in de brede kopletter 343px en het venster
   op een telefoon 335px: acht pixels horizontale scroll op elk artikel met
   dat woord in de kop. Afbreken mag, de pagina staat op lang="nl". */
@media (max-width: 480px) { .artikel__kop { hyphens: auto; overflow-wrap: anywhere; } }
/* Zelfde kwaal in tussenkoppen: "energiemanagementsysteem" is als h2 363px,
   28px breder dan de tekstkolom, en dat werd zichtbaar als horizontale
   speling op de kennisbankpagina's. */
@media (max-width: 560px) { .artikel__tekst h2, .artikel__tekst h3 { hyphens: auto; overflow-wrap: anywhere; } }
.artikel__meta { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tx-mut); margin-bottom: 2.25rem; }
.artikel__beeld { width: 100%; height: auto; border-radius: 16px; margin-bottom: 2.5rem; }

.artikel__tekst { font-size: 1.0625rem; line-height: 1.8; color: var(--tx-soft); }
.artikel__tekst > * + * { margin-top: 1.35rem; }
.artikel__tekst h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; line-height: 1.22; letter-spacing: -0.008em; margin-top: 3rem; }
.artikel__tekst h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin-top: 2.25rem; }
.artikel__tekst p { max-width: none; }
.artikel__tekst strong { color: var(--gold-tx); font-weight: 600; }
.artikel__tekst a { color: var(--gold-tx); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.artikel__tekst a:hover { color: var(--gold-tx); opacity: 0.75; }
.artikel__tekst ul, .artikel__tekst ol { padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; }
/* was --gold-dim (12% alfa): gecomponeerd 1,23:1, waardoor de bolletjes en
   nummers van 129 lijsten in 57 artikelen feitelijk onzichtbaar waren -- bij
   genummerde lijsten verdwijnt daarmee de volgorde-informatie. Vol goud is
   hier geen signaal-inflatie: een marker is klein en structureel, zoals de
   stapnummers en tijdlijncijfers die ook goud zijn. */
.artikel__tekst li::marker { color: var(--gold-tx); }
.artikel__tekst li { color: var(--tx-soft); }
.artikel__tekst hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.artikel__tekst img { border-radius: 10px; margin-block: 2rem; height: auto; }
/* Miniaturen: op de oude site stonden deze via een inline stijl op 50px naast
   een productnaam. Die stijl halen we uit de inhoud, de bedoeling blijft hier. */
.artikel__tekst img.beeld-klein { width: 52px; margin: 0 0.65rem 0 0; border-radius: 6px; display: inline-block; vertical-align: middle; }

.artikel__tekst table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; display: block; overflow-x: auto; }
.artikel__tekst th { text-align: left; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-mut); font-weight: 500; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.artikel__tekst td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); color: var(--tx-soft); vertical-align: top; }
.artikel__tekst tbody tr:last-child td { border-bottom: none; }

.artikel__cta { margin-top: 3.5rem; padding: clamp(1.75rem, 4vw, 2.5rem); background: radial-gradient(ellipse 70% 120% at 12% 0%, rgba(253,197,0,0.12), transparent 60%), var(--s1); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.artikel__cta p { color: var(--tx-soft); }
.artikel__cta .btn { margin-top: 0.5rem; }

/* ==========================================================================
   Cookiebanner: eigen implementatie, vervangt de licentie van 145 euro
   ========================================================================== */
.cookie {
  position: fixed;
  left: var(--gutter); right: var(--gutter); bottom: var(--gutter);
  z-index: var(--z-modal);
  max-width: 42rem;
  background: var(--s1);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: 0 24px 60px rgba(0,0,0,0.65);
  display: none;
  flex-direction: column;
  gap: 1rem;
}
.cookie[data-open="true"] { display: flex; }
.cookie h2 { font-size: 1.0625rem; font-weight: 600; }
.cookie p { font-size: 0.9375rem; color: var(--tx-soft); max-width: none; }
.cookie a { color: var(--gold-tx); }
.cookie__acties { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cookie__acties .btn { padding: 0.7rem 1.15rem; font-size: 0.875rem; }
.cookie__keuzes { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 0.25rem; }
.cookie__keuze { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; }
.cookie__keuze input { margin-top: 0.3rem; accent-color: var(--gold); width: 1rem; height: 1rem; }
.cookie__keuze span { color: var(--tx-soft); }
.cookie__keuze b { display: block; color: var(--tx); font-weight: 600; font-size: 0.9375rem; }
@media (max-width: 560px) { .cookie__acties .btn { flex: 1 1 100%; justify-content: center; } }

/* ==========================================================================
   ARTIKEL — vormgegeven onderdelen
   --------------------------------------------------------------------------
   Alles hieronder komt voort uit structuur die AL in de artikelen zit
   (gemeten over 100 artikelen, zie verrijk.py). Geen nieuwe kleuren, geen
   nieuwe lettertypen: dezelfde vijf oppervlakken, hetzelfde goud, Inter en
   Fira Code. Goud blijft het enige signaal en blijft schaars.
   ========================================================================== */

/* --- leesvoortgang: een meter, geen versiering ---------------------------
   Puur CSS via scroll-driven animation: geen JavaScript, dus ook geldig
   onder de strenge Content-Security-Policy. Browsers die het niet kennen
   tonen simpelweg niets. */
.voortgang {
  position: fixed; inset-block-start: 0; inset-inline-start: 0;
  block-size: 2px; inline-size: 100%;
  background: var(--gold);
  transform: scaleX(0); transform-origin: 0 50%;
  z-index: var(--z-voortgang);
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .voortgang { animation: voortgang linear both; animation-timeline: scroll(root block); }
  @keyframes voortgang { to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) { .voortgang { display: none; } }

/* --- de eerste alinea draagt de lezer naar binnen ----------------------- */
.artikel__lead {
  font-size: clamp(1.125rem, 1.7vw, 1.3125rem);
  line-height: 1.6;
  color: var(--tx);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

/* --- in dit artikel ------------------------------------------------------ */
.inhoudsopgave { margin-block: 2.75rem 0; padding-block: 1.5rem; border-block: 1px solid var(--line); }
.inhoudsopgave__kop {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-tx);
  margin: 0 0 1.1rem;
}
.artikel .inhoudsopgave ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; counter-reset: toc; }
@media (min-width: 720px) { .artikel .inhoudsopgave ol { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.inhoudsopgave li { counter-increment: toc; display: grid; grid-template-columns: 1.75rem 1fr; align-items: baseline; }
.inhoudsopgave li::before {
  content: counter(toc); font-family: var(--mono); font-size: 0.8125rem;
  color: var(--tx-mut); font-variant-numeric: tabular-nums;
}
.inhoudsopgave a {
  color: var(--tx-soft); text-decoration: none; font-size: 0.9375rem; line-height: 1.5;
  transition: color 0.16s var(--ease-q);
}
.inhoudsopgave a:hover { color: var(--gold-tx); }

/* de sectiekop mag niet onder de vaste balk verdwijnen na een sprong */
.artikel__tekst h2 { scroll-margin-top: 6rem; }

/* --- stappen: een volgorde, dus de nummers dragen betekenis --------------
   Geen kaarten en geen zijstreep; een haarlijn verbindt de stappen zoals een
   schema dat doet. */
/* `.artikel__tekst ol` maakt van elke lijst een flexkolom met inspringing;
   die regel is specifieker dan een losse klasse, dus hier expliciet terug. */
.artikel__tekst .stappen {
  display: block; list-style: none; padding: 0; margin-top: 1.75rem;
  counter-reset: stap;
}
.stap {
  position: relative; counter-increment: stap;
  display: grid; grid-template-columns: 2.25rem 1fr;
  column-gap: clamp(1rem, 2.5vw, 1.5rem);
  padding-block: 1.35rem;
}
/* alle echte inhoud in de tweede kolom; het nummer staat als ::before
   expliciet in de eerste. Zonder deze regel valt de alinea terug in de
   smalle nummerkolom en breekt hij op elk woord af. */
.stap > * { grid-column: 2; }
.stap::before {
  content: counter(stap);
  grid-column: 1; grid-row: 1;
  font-family: var(--mono); font-size: 1.125rem; font-weight: 500;
  color: var(--gold-tx); font-variant-numeric: tabular-nums;
  line-height: 1.35; text-align: center;
}
.stap::after {
  content: ""; position: absolute;
  inset-block: 3.35rem 0; inset-inline-start: calc(1.125rem - 0.5px);
  inline-size: 1px; background: var(--line-2);
}
.stap:last-child { padding-bottom: 0; }
.stap:last-child::after { display: none; }
/* .artikel__tekst h3 zet 2,25rem marge; die duwt de kop hier weg van zijn
   nummer. Dubbele klasse om die regel te overstemmen zonder !important. */
.artikel__tekst .stap__kop {
  font-size: 1.0625rem; font-weight: 600; line-height: 1.35;
  color: var(--tx); margin: 0;
}
.stap > * + * { margin-top: 0.7rem; }
.stap p { color: var(--tx-soft); }

/* --- vraag en antwoord: native <details>, dus zonder JavaScript ---------- */
.vragen { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.vraag { border-bottom: 1px solid var(--line); }
.vraag__kop {
  /* Geen grid of flex: die maken van elk kind een eigen cel, en een
     <span class="waarde"> in de vraagtekst belandde zo in de 1,5rem-kolom van
     het plusteken -- met white-space: nowrap duwde "7.000 cycli" de hele
     pagina 60px breder (kennisbank op telefoon, 04-09-2026). De vraag is
     gewone lopende tekst; het plusteken hangt absoluut rechts. */
  display: block; position: relative; padding-right: 2.5rem;
  padding-block: 1.15rem; cursor: pointer; list-style: none;
  color: var(--tx); font-weight: 600; font-size: 1.0625rem; line-height: 1.45;
  transition: color 0.16s var(--ease-q);
}
.vraag__kop::-webkit-details-marker { display: none; }
.vraag__kop:hover { color: var(--gold-tx); }
.vraag__kop::after {
  content: "+"; position: absolute; right: 0; top: 1.15rem;
  font-family: var(--mono); font-size: 1.25rem; font-weight: 400; line-height: 1.2;
  color: var(--gold-tx);
  transition: transform 0.24s var(--ease-q);
}
.vraag[open] .vraag__kop::after { transform: rotate(45deg); }
.vraag__antwoord { padding-bottom: 1.35rem; color: var(--tx-soft); }
.vraag__antwoord p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .vraag__kop::after { transition: none; }
}

/* --- slotsom: één paneel per artikel, volledige rand (geen zijstreep) ---- */
.slotsom {
  margin-top: 1.25rem; padding: clamp(1.35rem, 3vw, 1.85rem);
  background: var(--s1); border: 1px solid var(--line-2); border-radius: 16px;
}
.slotsom > * + * { margin-top: 1rem; }
.slotsom p { color: var(--tx-soft); }
.artikel__tekst .slotsom ul, .artikel__tekst .slotsom ol { padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; }

/* --- meetwaarden lezen als een uitlezing, niet als lopende tekst --------- */
.waarde {
  font-family: var(--mono); font-size: 0.94em; color: var(--tx);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap;
}
.artikel__lead .waarde, .stap__kop .waarde, h2 .waarde, h3 .waarde { color: inherit; }

/* --- het artikelbeeld breekt de kolom, zodat het ritme niet vlak wordt --- */
@media (min-width: 900px) {
  .artikel__beeld { inline-size: calc(100% + 7rem); max-inline-size: none; margin-inline: -3.5rem; }
}

/* ==========================================================================
   KENNISBANK — 100 artikelen doorzoekbaar maken
   --------------------------------------------------------------------------
   Bewust GEEN raster van 100 gelijke kaarten: bij dit aantal wint scannen van
   pronken. Drie uitgelichte stukken als etalage, daaronder de index als
   leesbare regels met zoeken en onderwerpfilters.
   ========================================================================== */

.kb-titel { font-size: clamp(1.85rem, 3.7vw, 3rem); }
.kb-stand {
  margin-top: 1.5rem; font-family: var(--mono); font-size: 0.75rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--tx-mut);
}

/* --- uitgelicht: één groot, twee klein ---------------------------------- */
.kb-uitgelicht { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
@media (min-width: 860px) {
  .kb-uitgelicht { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .kb-uit--groot { grid-row: 1 / span 2; }
}
.kb-uit { background: var(--bg); transition: background 0.3s var(--ease-q); }
.kb-uit:hover { background: var(--s1); }
.kb-uit__link { display: grid; height: 100%; text-decoration: none; }
.kb-uit--groot .kb-uit__link { grid-template-rows: auto 1fr; }
@media (min-width: 860px) {
  .kb-uit:not(.kb-uit--groot) .kb-uit__link { grid-template-columns: 13rem 1fr; align-items: center; }
}
.kb-uit__beeld { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.kb-uit:not(.kb-uit--groot) .kb-uit__beeld { aspect-ratio: 1 / 1; }
.kb-uit__tekst { padding: clamp(1.15rem, 2.2vw, 1.6rem); display: flex; flex-direction: column; gap: 0.55rem; }
.kb-uit__tekst h3 {
  font-size: 1.35rem; font-weight: 600; line-height: 1.28; color: var(--tx);
  transition: color 0.2s var(--ease-q);
}
.kb-uit--groot .kb-uit__tekst h3 { font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.kb-uit:hover h3 { color: var(--gold-tx); }
.kb-uit__tekst p { font-size: 0.875rem; color: var(--tx-soft); }
.kb-uit:not(.kb-uit--groot) .kb-uit__tekst p { font-size: 0.9375rem; }

.kb-datum {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tx-mut);
}

/* --- de bedieningsbalk --------------------------------------------------- */
.kb-balk { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.kb-zoek { display: block; margin-bottom: 1.25rem; }
.kb-zoek__label {
  display: block; margin-bottom: 0.6rem;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-tx);
}
.kb-zoek input {
  width: 100%; padding: 0.95rem 1.15rem;
  background: var(--s2); color: var(--tx);
  border: 1px solid var(--line-ui); border-radius: 10px;
  font-family: var(--sans); font-size: 1rem;
  transition: border-color 0.2s var(--ease-q), box-shadow 0.2s var(--ease-q);
}
/* placeholder haalt hetzelfde contrast als labeltekst — de standaardgrijs
   van de browser zakt onder 4,5:1 */
.kb-zoek input::placeholder { color: var(--tx-mut); }
/* --gold-dim (12% alfa) gaf een ring van 1,26:1 -- in de praktijk onzichtbaar.
   Zelfde dekking als het offerteformulier, zodat focus overal even hard is. */
.kb-zoek input:focus { border-color: var(--gold); }
.kb-zoek input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(253, 197, 0, 0.45); }

.kb-balk .filters { margin-bottom: 1rem; }
.kb-balk .cap { flex: 0 1 auto; padding: 0.6rem 0.9rem; font-size: 0.8125rem; }
.kb-balk .cap small { display: inline; margin-left: 0.4rem; opacity: 0.65; font-family: var(--mono); }

.kb-telling { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tx-mut); }

/* --- de index ------------------------------------------------------------ */
.artikel__tekst .kb-lijst, .kb-lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.kb-rij { border-bottom: 1px solid var(--line); }
.kb-rij[hidden] { display: none; }
.kb-rij__link {
  display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1.25rem;
  align-items: baseline; padding: 1.05rem 0.35rem;
  text-decoration: none; transition: padding-left 0.2s var(--ease-q);
}
.kb-rij__link:hover { padding-left: 0.85rem; }
.kb-rij .kb-datum { grid-column: 1; order: -1; }
.kb-rij__kop {
  grid-column: 1; font-size: 1.0625rem; font-weight: 500; line-height: 1.4;
  color: var(--tx); transition: color 0.2s var(--ease-q);
}
.kb-rij__link:hover .kb-rij__kop { color: var(--gold-tx); }
.kb-rij__duur {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-family: var(--mono); font-size: 0.75rem; color: var(--tx-mut);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .kb-rij__link, .kb-rij__link:hover { transition: none; padding-left: 0.35rem; }
}

.kb-leeg { margin-top: 2rem; color: var(--tx-soft); }
.kb-wissen {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--gold-tx); font: inherit; text-decoration: underline; text-underline-offset: 3px;
}

/* --- productverwijzing in een artikel -----------------------------------
   Komt op een plek voor: de oude catalogus-carrousel op /thuisbatterij-zakelijk/
   is een reeks links met een kop, een miniatuur en drie trefwoorden.
   verrijk.py zet de trefwoorden op een regel; hier krijgen ze hun vorm. */
.artikel__tekst .prod-link {
  display: grid; grid-template-columns: 3.25rem 1fr; column-gap: 1.15rem;
  align-items: center; padding: 1rem 1.1rem; margin-block: 0;
  border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; background: var(--s1);
  transition: border-color 0.2s var(--ease-q), background 0.2s var(--ease-q);
}
.artikel__tekst .prod-link + .prod-link { margin-top: 0.6rem; }
.artikel__tekst .prod-link:hover { border-color: var(--gold); background: var(--s2); }
.artikel__tekst .prod-link > .beeld-klein {
  grid-column: 1; grid-row: 1 / span 2; width: 3.25rem; margin: 0;
}
.artikel__tekst .prod-link > h3 {
  grid-column: 2; margin: 0; font-size: 1rem; font-weight: 600; color: var(--tx);
  transition: color 0.2s var(--ease-q);
}
.artikel__tekst .prod-link:hover > h3 { color: var(--gold-tx); }
.prod-kenmerken {
  grid-column: 2; margin-top: 0.2rem;
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--tx-mut);
}
.prod-kenmerken span + span::before { content: " · "; }

/* ==========================================================================
   PRODUCTSECTIES — varianten, noodstroom
   ========================================================================== */

/* --- sectielabel: één per sectie waar het echt iets benoemt --------------- */
.kicker {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-tx);
  margin-bottom: 0.85rem;
}

/* --- de twee varianten naast elkaar --------------------------------------
   De productrenders zijn staand en 800 px breed; kolombreed getoond duwden ze
   de tekst een schermhoogte naar beneden. Ze staan nu in een vak met een vaste
   hoogte en `object-fit: contain`, dus ze worden nooit uitgerekt of bijgesneden. */
.varianten { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
@media (min-width: 860px) { .varianten { grid-template-columns: 1fr 1fr; } }
.variant { background: var(--bg); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1.5rem; }
@media (min-width: 560px) { .variant { grid-template-columns: 12rem 1fr; align-items: start; } }
.variant__beeld { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.variant__beeld img {
  width: auto; max-width: 100%; height: clamp(11rem, 22vw, 15rem);
  object-fit: contain; object-position: center top;
}
.variant__bijschrift {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tx-mut); text-align: center; margin: 0;
}
.variant__tekst > * + * { margin-top: 1rem; }
.variant__specs { margin: 1.15rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.variant__specs > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--line);
}
.variant__specs dt { font-size: 0.8125rem; color: var(--tx-mut); }
.variant__specs dd {
  margin: 0; font-family: var(--mono); font-size: 0.8125rem; color: var(--tx);
  font-variant-numeric: tabular-nums; text-align: right;
}
.variant__tekst p { font-size: 0.9375rem; color: var(--tx-soft); }

/* --- noodstroom ---------------------------------------------------------- */
.nood { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .nood { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  /* beeld links, tekst rechts — zodat twee noodstroomsecties onder elkaar
     niet hetzelfde ritme herhalen */
  .nood--omgekeerd { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); }
}
.nood__tekst > * + * { margin-top: 1rem; }
.nood__tekst .kicker + .h2 { margin-top: 0; }
.nood__beeld img {
  width: 100%; height: auto; border-radius: 16px;
  border: 1px solid var(--line);
}

/* de stappenreeks bestaat ook buiten een artikel; basisregels hier, de
   variant binnen .artikel__tekst staat verderop en is alleen specifieker */
.stappen { display: block; list-style: none; padding: 0; margin-top: 1.75rem; counter-reset: stap; }
.stap__kop { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--tx); margin: 0; }
.nood__stappen { margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: 46rem; }

/* --- specificatietabel: oplichten waar je staat -------------------------
   Een blok van ruim twintig cellen leest lastig; zonder aanwijzing raak je
   kwijt welk getal bij welk label hoort. De cel onder de muis stijgt een
   oppervlaktetoon en de waarde wordt goud, zodat je oog vasthoudt wat je leest.
   Ook op focus, zodat het met het toetsenbord net zo werkt. */
.spec { transition: background 0.16s var(--ease-q); }
.spec:hover, .spec:focus-within { background: var(--s2); }
.spec dd { transition: color 0.16s var(--ease-q); }
.spec:hover dd, .spec:focus-within dd { color: var(--gold-tx); }
.spec:hover dt, .spec:focus-within dt { color: var(--tx-soft); }
@media (prefers-reduced-motion: reduce) {
  .spec, .spec dd { transition: none; }
}

/* ==========================================================================
   ZEVEN VEILIGHEIDSLAGEN — lijst en doorsnede wijzen naar elkaar
   ========================================================================== */
.lagen { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
/* De tekening krijgt de ruimte: de labels erin moeten leesbaar zijn. De lijst
   is daarom een maat kleiner gezet. */
@media (min-width: 960px) { .lagen { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
/* Op een smal scherm staat de tekening boven de lijst, anders zit ze onder
   zeven alinea's en ziet niemand haar. */
@media (max-width: 959px) { .lagen__figuur { order: -1; } }

.lagen__lijst { list-style: none; margin: 0; padding: 0; counter-reset: laag; border-top: 1px solid var(--line); }
.laag { border-bottom: 1px solid var(--line); }
.laag__knop {
  display: grid; grid-template-columns: 2rem 1fr; gap: 0 1rem;
  width: 100%; padding: 1.1rem 0.5rem; text-align: left;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  transition: background 0.18s var(--ease-q), padding-left 0.18s var(--ease-q);
}
.laag__knop:hover, .laag__knop.is-aan { background: var(--s1); padding-left: 0.9rem; }
.laag__nummer {
  font-family: var(--mono); font-size: 0.875rem; font-weight: 500;
  color: var(--tx-mut); font-variant-numeric: tabular-nums; line-height: 1.5;
  transition: color 0.18s var(--ease-q);
}
.laag__knop:hover .laag__nummer, .laag__knop.is-aan .laag__nummer { color: var(--gold-tx); }
.laag__tekst { display: block; }
.laag__naam { display: block; font-size: 1rem; font-weight: 600; color: var(--tx); line-height: 1.35; }
.laag__uitleg { display: block; margin-top: 0.3rem; font-size: 0.875rem; color: var(--tx-soft); line-height: 1.55; }

.lagen__figuur { position: relative; }
.lagen__as {
  display: flex; align-items: center; gap: 0.5rem; justify-content: center;
  margin: 0 0 0.75rem; font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx-mut);
}
.lagen__svg { width: 100%; max-width: 46rem; margin-inline: auto; display: block; }
.lagen__noot {
  margin: 0.75rem auto 0; max-width: 40rem; font-size: 0.75rem; line-height: 1.5;
  color: var(--tx-mut); text-align: center;
}

/* De opengewerkte module (lagen_tekening.py). Een donkere studio met een eigen
   palet, net als .ontleed; de tokens hieronder zijn daarom bewust hexwaarden.
   Alleen goud is variabel: dat is het signaal. */
.vt-schaduw { fill: #0B0B0B; opacity: 0.85; }
.vt-kast.vt-voor { fill: #30363D; }
.vt-kast.vt-zij { fill: #1D2126; }
.vt-kast.vt-boven { fill: #3F464E; }
.vt-binnen-achter { fill: #1A1E23; }
.vt-binnen-links { fill: #14171B; }
.vt-bodem { fill: #0F1114; }
.vt-rib { fill: #101317; }
.vt-randlicht { fill: none; stroke: #6A727C; stroke-width: 1.1; opacity: 0.55; }
.vt-plaat.vt-voor { fill: #3A3F46; }
.vt-plaat.vt-zij { fill: #262B31; }
.vt-plaat.vt-boven { fill: #4A5058; }
.vt-spoor { fill: #2A2F36; }
.vt-cel.vt-voor { fill: #3B424A; }
.vt-cel.vt-zij { fill: #262B31; }
.vt-cel.vt-boven { fill: #4B535C; }
.vt-pool.vt-voor, .vt-pool.vt-zij { fill: #5A6068; }
.vt-pool.vt-boven { fill: #7A828B; }
.vt-sensor { fill: var(--gold); }
.vt-print.vt-voor { fill: #23282E; }
.vt-print.vt-zij { fill: #2C3238; }
.vt-print.vt-boven { fill: #363C43; }
.vt-chip { fill: #14171B; }
.vt-led { fill: var(--gold); }
.vt-bus.vt-voor { fill: #4A5058; }
.vt-bus.vt-zij { fill: #30363D; }
.vt-bus.vt-boven { fill: #5A6068; }
.vt-buskop { fill: #565E67; stroke: #6A727C; stroke-width: 1.5; }
.vt-busmond { fill: #1A1D21; }
.vt-ventiel.vt-voor { fill: #23282E; }
.vt-ventiel.vt-zij { fill: #1A1E23; }
.vt-ventiel.vt-boven { fill: #2C3238; }
.vt-ventielkop { fill: #363C43; stroke: #6A727C; stroke-width: 1.2; }
.vt-ventielgat { fill: #0E1113; }
.vt-connector.vt-voor { fill: #14171B; }
.vt-connector.vt-zij { fill: #0E1113; }
.vt-connector.vt-boven { fill: #1E2227; }
.vt-kabel { fill: none; stroke: #6A727C; stroke-width: 2; stroke-linecap: round; opacity: 0.8; }
.vt-typeplaatje { font-family: var(--mono); font-weight: 500; fill: #6C747D; }
.vt-etiket { fill: #E9EBEE; }
.vt-etiket-ring { fill: none; stroke: #101013; stroke-width: 3; }
.vt-etiket-stip { fill: var(--gold); }
.vt-etiket-tekst { font-family: var(--sans); font-weight: 800; fill: #101013; letter-spacing: 1; }
.vt-etiket-sub { font-family: var(--mono); font-weight: 500; fill: #4C4C4A; }

/* de pinnen: ankerstip op het onderdeel, wijzer naar de kantlijn, nummer en naam */
.vt-pin { cursor: pointer; transition: opacity 0.2s var(--ease-q); }
.vt-wijzer { fill: none; stroke: var(--line-2); stroke-width: 1; transition: stroke 0.2s var(--ease-q); }
.vt-anker { fill: var(--gold); }
.vt-badge { fill: var(--s3); stroke: var(--line-2); stroke-width: 1; transition: fill 0.2s var(--ease-q), stroke 0.2s var(--ease-q); }
.vt-nummer { font-family: var(--mono); font-size: 11.5px; font-weight: 600; fill: var(--tx); transition: fill 0.2s var(--ease-q); }
.vt-titel { font-family: var(--sans); font-size: 13.5px; font-weight: 700; fill: var(--tx); transition: fill 0.2s var(--ease-q); }
.vt-pin.is-aan .vt-wijzer, .vt-pin:hover .vt-wijzer { stroke: var(--gold); }
.vt-pin.is-aan .vt-badge, .vt-pin:hover .vt-badge { fill: var(--gold); stroke: var(--gold); }
.vt-pin.is-aan .vt-nummer, .vt-pin:hover .vt-nummer { fill: #101013; }
.vt-pin.is-aan .vt-titel, .vt-pin:hover .vt-titel { fill: var(--gold-tx); }
/* de rest dimt, zodat de aangewezen pin echt oplicht */
.lagen__svg:has(.vt-pin:hover) .vt-pin:not(:hover),
.lagen__svg.is-gekozen:not(:has(.vt-pin:hover)) .vt-pin:not(.is-aan) { opacity: 0.35; }

/* de deksel en alles erboven gaan iets verder omhoog bij een laag in het binnenwerk */
.vt-hef { transition: transform 0.45s var(--ease-q); }
.lagen__svg.is-open .vt-hef { transform: translateY(-14px); }

/* de tekening loopt mee terwijl je de lijst leest */
@media (min-width: 960px) {
  .lagen__figuur { position: sticky; top: 6.5rem; }
}

.laag__popup {
  position: absolute; inset-inline: 0; translate: 0 -50%;
  padding: 0.95rem 1.1rem;
  background: var(--s2); border: 1px solid var(--gold);
  border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  pointer-events: none; z-index: var(--z-sticky);
}
.laag__popup-naam { margin: 0 0 0.3rem; font-size: 0.9375rem; font-weight: 600; color: var(--gold-tx); }
.laag__popup-tekst { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--tx-soft); max-width: none; }

@media (prefers-reduced-motion: reduce) {
  .laag__knop, .laag__nummer, .vt-pin, .vt-hef { transition: none; }
  .laag__knop:hover, .laag__knop.is-aan { padding-left: 0.5rem; }
  .lagen__svg.is-open .vt-hef { transform: none; }
}

/* ==========================================================================
   VIJF ONDERDELEN, ÉÉN SYSTEEM — schema in plaats van vijf gelijke kaarten
   ========================================================================== */
 /* Op een smal scherm zou dit schema tot een derde krimpen en onleesbaar
    worden. Het houdt daarom een minimumbreedte en schuift mee; de lijst
    eronder bevat dezelfde informatie als tekst. */
.systeem__scroll { overflow-x: auto; margin-bottom: clamp(2rem, 4vw, 3rem); }
.systeem__svg {
  width: 100%; min-width: 34rem; height: auto; display: block; color: var(--tx-mut);
}
.lagen__svg { min-width: 30rem; }
.lagen__figuur { overflow-x: auto; }
/* lagen.js centreert de tekening door de figuur horizontaal te scrollen; het
   asbijschrift en de noot scrolden mee en vielen op telefoon links buiten
   beeld. Sticky op de linkerrand houdt ze in het venster terwijl de tekening
   eronder wel kan schuiven. */
.lagen__as, .lagen__noot { position: sticky; left: 0; }
/* Op telefoon past de tekening in zijn geheel: 30rem in een venster van
   335px knipte de bijschriften links en rechts af ("tiel 4", "Regel"), en op
   deze schaal blijven ze leesbaar. */
@media (max-width: 560px) { .lagen__svg { min-width: 0; } }
.knoop__vak {
  fill: var(--s1); stroke: var(--line-2); stroke-width: 1;
  transition: fill 0.2s var(--ease-q), stroke 0.2s var(--ease-q);
}
.knoop__rol {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  fill: var(--tx-mut); text-anchor: middle;
  transition: fill 0.2s var(--ease-q);
}
.knoop__naam {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  fill: var(--tx); text-anchor: middle;
  transition: fill 0.2s var(--ease-q);
}
.knoop { transition: opacity 0.2s var(--ease-q); }
.knoop.is-aan .knoop__vak, .knoop:hover .knoop__vak { fill: var(--s3); stroke: var(--gold); }
.knoop.is-aan .knoop__naam, .knoop:hover .knoop__naam { fill: var(--gold); }
.knoop--stuur .knoop__vak { stroke-dasharray: none; }
.systeem.is-gericht .knoop:not(.is-aan) { opacity: 0.45; }

.draad { stroke: var(--line-2); stroke-width: 1.5; }
.stuurdraad { stroke: rgba(253,197,0,0.35); stroke-width: 1.2; stroke-dasharray: 4 5; fill: none; }
.systeem__bijschrift {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  fill: var(--tx-mut); text-anchor: middle;
}

.delen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
/* vier apparaten naast elkaar, de sturing eronder over de volle breedte —
   dat is ook precies wat het schema erboven laat zien */
@media (min-width: 720px) { .delen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .delen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 720px) {
  .deel:last-child { grid-column: 1 / -1; }
  .deel:last-child .deel__link { flex-direction: row; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; }
  .deel:last-child .deel__oms { flex: 1 1 22rem; }
  .deel:last-child .deel__getal { margin: 0; padding: 0; }
}
.deel { background: var(--bg); }
.deel__link {
  display: flex; flex-direction: column; gap: 0.4rem; height: 100%;
  padding: 1.35rem 1.4rem; text-decoration: none;
  transition: background 0.2s var(--ease-q);
}
.deel__link:hover, .deel__link.is-aan { background: var(--s1); }
.deel__rol { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-mut); }
.deel__naam { font-size: 1.0625rem; font-weight: 600; color: var(--tx); transition: color 0.2s var(--ease-q); }
.deel__link:hover .deel__naam, .deel__link.is-aan .deel__naam { color: var(--gold-tx); }
.deel__oms { font-size: 0.875rem; line-height: 1.55; color: var(--tx-soft); }
.deel__getal {
  margin-top: auto; padding-top: 0.7rem;
  font-family: var(--mono); font-size: 0.8125rem; color: var(--tx);
  font-variant-numeric: tabular-nums;
}
.systeem.is-gericht .deel__link:not(.is-aan) .deel__naam { color: var(--tx); }

@media (prefers-reduced-motion: reduce) {
  .knoop, .knoop__vak, .knoop__naam, .knoop__rol, .deel__link, .deel__naam { transition: none; }
}

/* ---------------------------------------------------------- hulpklassen
   Dit waren style="..."-attributen in de sjablonen. Ze staan hier zodat de
   Content-Security-Policy geen 'unsafe-inline' voor stijlen hoeft toe te
   staan: een inline stijl is voor een browser niet te onderscheiden van een
   stijl die een aanvaller injecteert.

   Bewust GEEN volledig hulpklassenstelsel -- alleen de waarden die al in
   gebruik waren. Nieuwe witruimte hoort in een component, niet hier. */
.mt-075 { margin-top: 0.75rem; }
.mt-1   { margin-top: 1rem; }
.mt-11  { margin-top: 1.1rem; }
.mt-125 { margin-top: 1.25rem; }
.mt-15  { margin-top: 1.5rem; }
.mt-175 { margin-top: 1.75rem; }
.mt-2   { margin-top: 2rem; }
.mt-25  { margin-top: 2.5rem; }
.mt-3   { margin-top: 3rem; }

.mb-0   { margin-bottom: 0; }
.mb-125 { margin-bottom: 1.25rem; }
.mb-15  { margin-bottom: 1.5rem; }
.mb-175 { margin-bottom: 1.75rem; }

.blok-25 { margin: 2.5rem 0 1rem; }
.blok-35 { margin: 3.5rem 0 1.25rem; }

.titel-xl    { font-size: clamp(1.85rem, 3.7vw, 3rem); }
.titel-l     { font-size: clamp(1.7rem, 3.4vw, 2.7rem); }
.tekst-klein { font-size: 0.9375rem; }
.goud        { color: var(--gold-tx); }

/* --- merkenraster bij de retrofit-sectie ---------------------------------
   Logo's van andere fabrikanten zijn zelden dezelfde maat, dezelfde marge of
   dezelfde kleur. Daarom een vast vak per merk met het beeld erin gecentreerd
   en begrensd op hoogte, in plaats van de logo's op breedte te schalen -- dat
   laatste laat een breed woordmerk naast een vierkant beeldmerk drie keer zo
   groot ogen. Grijstinten in rust, kleur op hover: zo blijft goud het enige
   signaalkleur op de pagina en blijft de rij rustig.
   Staat er nog geen bestand, dan rendert merken.py de merknaam als tekst; die
   valt in hetzelfde vak en heeft dus dezelfde ritmiek. */
.merken {
  list-style: none; margin: 0; padding: 0;
  /* Vaste kolomaantallen in plaats van auto-fit: met acht merken en een
     vrij meeschalend raster bleef het achtste logo als wees op een eigen
     regel achter. 4x2 en 2x4 vullen allebei precies. */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.merk {
  background: var(--s1); min-height: 5.5rem; padding: 1.25rem 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.24s var(--ease-q);
}
.merk:hover { background: var(--s2); }
.merk__logo {
  max-height: 2rem; width: auto; max-width: 100%;
  /* brightness(0) maakt elke ondoorzichtige pixel zwart, invert(1) maakt daar
     wit van; transparantie blijft intact. Daarmee wordt ELK logo hetzelfde
     witte woordmerk, of het bestand nu donker, licht of bont is. Dat is hier
     geen cosmetiek maar noodzaak: van deze acht is er een donkerblauw, een
     al wit en een in huisstijlkleur, en op zwart valt de eerste weg terwijl
     de derde gaat schreeuwen. Een grijsfilter lost dat niet op -- zwart maal
     helderheid blijft zwart. Bijkomend voordeel: goud blijft het enige
     signaalkleur op de pagina en geen enkel merk springt eruit. */
  filter: brightness(0) invert(1); opacity: 0.7;
  transition: opacity 0.24s var(--ease-q);
}
.merk:hover .merk__logo { opacity: 1; }
/* uitzondering: zie de toelichting bij MERKEN in merken.py */
.merk__logo--kleur { filter: none; opacity: 0.85; }
.merk:hover .merk__logo--kleur { opacity: 1; }
@media (min-width: 34rem) { .merken { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.merk__naam {
  font-family: var(--mono); font-size: 0.9375rem; letter-spacing: 0.02em;
  color: var(--tx-soft); text-align: center;
  transition: color 0.24s var(--ease-q);
}
.merk:hover .merk__naam { color: var(--tx); }
@media (prefers-reduced-motion: reduce) {
  .merk, .merk__logo, .merk__naam { transition: none; }
}

/* --- ingelijst portret -----------------------------------------------------
   De brede pandfoto is vervangen door een staande uitsnede van de entree.
   Reden om er een lijst omheen te zetten in plaats van een band: een foto
   bij daglicht is op een zwarte pagina het helderste vlak van het scherm.
   Als band trekt hij het oog weg van de tekst; ingelijst en begrensd op
   breedte leest hij als bewijsstuk naast het verhaal, niet als decor.
   Zelfde component voor het portret bij het citaat -- een pand en een gezicht
   doen hier hetzelfde werk en horen er dus hetzelfde uit te zien. */
.portret {
  max-width: 21rem; margin-inline: auto;
  border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden;
  background: var(--s1);
}
.portret img { display: block; width: 100%; height: auto; }
.portret--klein { max-width: 13rem; margin-inline: 0; }
.portret__bijschrift {
  margin: 0.85rem 0 0; font-family: var(--mono); font-size: 0.8125rem;
  color: var(--tx-mut); text-align: center;
}
.quote .portret { margin-bottom: 1.5rem; }

/* Sociaal bewijs (quotes.py): kaarten in een raster; rendert pas zodra er
   echte quotes zijn. */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.quote--kaart { padding: clamp(1.5rem, 3vw, 2rem); background: var(--s1); border: 1px solid var(--line); border-radius: 16px; }
.quote--kaart blockquote { font-size: 1.125rem; font-weight: 500; max-width: none; }
.quote--kaart blockquote::before { content: "\201C"; color: var(--gold); margin-right: 0.15em; }
.quote--kaart blockquote::after { content: "\201D"; color: var(--gold); margin-left: 0.15em; }
.quote .portret__bijschrift { text-align: left; }

/* --- rasters zonder wees ---------------------------------------------------
   Vier argumenten die als 3+1 uitvallen, of een specificatietabel die op één
   losse cel eindigt: dat leest als een fout, ook al is het er geen. De oorzaak
   is auto-fit -- dat vult de rij met zoveel kolommen als passen en laat de rest
   vallen waar hij valt.

   Hieronder staat per aantal items het kolomaantal waarmee de laatste rij zo
   vol mogelijk is. Gegenereerd, niet met de hand geteld: eerst een deler
   (4 items in 4 kolommen, 6 in 3), en als die er niet is het aantal met de
   grootste restrij, zodat een rest van 1 altijd verliest van een alternatief.
   Onder de breekpunten blijft auto-fit gelden; op een smal scherm is één
   kolom nooit een wees.

   Let op bij het toevoegen van een item: het kolomaantal verandert dan mee.
   Dat is de bedoeling -- niet handmatig vastzetten. */

/* specificatiecellen zijn compact, dus tot vijf kolommen */
@media (min-width: 62rem) {
  .specs:has(> :nth-child(5):last-child),
  .specs:has(> :nth-child(10):last-child),
  .specs:has(> :nth-child(13):last-child),
  .specs:has(> :nth-child(15):last-child),
  .specs:has(> :nth-child(17):last-child),
  .specs:has(> :nth-child(19):last-child),
  .specs:has(> :nth-child(20):last-child),
  .specs:has(> :nth-child(23):last-child),
  .specs:has(> :nth-child(25):last-child),
  .specs:has(> :nth-child(29):last-child),
  .specs:has(> :nth-child(30):last-child),
  .specs:has(> :nth-child(35):last-child),
  .specs:has(> :nth-child(37):last-child),
  .specs:has(> :nth-child(40):last-child) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .specs:has(> :nth-child(4):last-child),
  .specs:has(> :nth-child(7):last-child),
  .specs:has(> :nth-child(8):last-child),
  .specs:has(> :nth-child(11):last-child),
  .specs:has(> :nth-child(12):last-child),
  .specs:has(> :nth-child(16):last-child),
  .specs:has(> :nth-child(24):last-child),
  .specs:has(> :nth-child(28):last-child),
  .specs:has(> :nth-child(31):last-child),
  .specs:has(> :nth-child(32):last-child),
  .specs:has(> :nth-child(36):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .specs:has(> :nth-child(3):last-child),
  .specs:has(> :nth-child(6):last-child),
  .specs:has(> :nth-child(9):last-child),
  .specs:has(> :nth-child(18):last-child),
  .specs:has(> :nth-child(21):last-child),
  .specs:has(> :nth-child(27):last-child),
  .specs:has(> :nth-child(33):last-child),
  .specs:has(> :nth-child(39):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .specs:has(> :nth-child(14):last-child),
  .specs:has(> :nth-child(22):last-child),
  .specs:has(> :nth-child(26):last-child),
  .specs:has(> :nth-child(34):last-child),
  .specs:has(> :nth-child(38):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* argumentblokken bevatten een kop plus een alinea; meer dan vier kolommen
   wordt een te smalle tekstkolom om prettig te lezen */
@media (min-width: 72rem) {
  .feats:has(> :nth-child(4):last-child),
  .feats:has(> :nth-child(7):last-child),
  .feats:has(> :nth-child(8):last-child),
  .feats:has(> :nth-child(11):last-child),
  .feats:has(> :nth-child(12):last-child),
  .feats:has(> :nth-child(13):last-child),
  .feats:has(> :nth-child(16):last-child),
  .feats:has(> :nth-child(19):last-child),
  .feats:has(> :nth-child(20):last-child),
  .feats:has(> :nth-child(23):last-child),
  .feats:has(> :nth-child(24):last-child),
  .feats:has(> :nth-child(25):last-child),
  .feats:has(> :nth-child(28):last-child),
  .feats:has(> :nth-child(31):last-child),
  .feats:has(> :nth-child(32):last-child),
  .feats:has(> :nth-child(35):last-child),
  .feats:has(> :nth-child(36):last-child),
  .feats:has(> :nth-child(37):last-child),
  .feats:has(> :nth-child(40):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .feats:has(> :nth-child(3):last-child),
  .feats:has(> :nth-child(5):last-child),
  .feats:has(> :nth-child(6):last-child),
  .feats:has(> :nth-child(9):last-child),
  .feats:has(> :nth-child(15):last-child),
  .feats:has(> :nth-child(17):last-child),
  .feats:has(> :nth-child(18):last-child),
  .feats:has(> :nth-child(21):last-child),
  .feats:has(> :nth-child(27):last-child),
  .feats:has(> :nth-child(29):last-child),
  .feats:has(> :nth-child(30):last-child),
  .feats:has(> :nth-child(33):last-child),
  .feats:has(> :nth-child(39):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .feats:has(> :nth-child(10):last-child),
  .feats:has(> :nth-child(14):last-child),
  .feats:has(> :nth-child(22):last-child),
  .feats:has(> :nth-child(26):last-child),
  .feats:has(> :nth-child(34):last-child),
  .feats:has(> :nth-child(38):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 42rem) and (max-width: 71.99rem) {
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Waar Dysun Energy buiten deze site te vinden is: twee sociale profielen en
   twee eigen domeinen. Staan onder het logo, dus onder de zin die vertelt wat
   het bedrijf doet -- ze horen bij het bedrijf en niet bij een onderwerp.

   Een rij en geen kolom: vier korte labels naast elkaar nemen minder hoogte
   dan vier regels, en de kolom ernaast bepaalt toch al de hoogte van het
   raster. Onder 640px wikkelt hij vanzelf.

   Sinds 31-08 met een lijnicoon per link (verzoek Liam). Het oude bezwaar
   ("een rij vreemde iconen in vreemde kleuren vecht met het goud") gold
   merklogo's in eigen kleur; deze zijn monochroom in currentColor en kleuren
   dus gewoon met de link mee. Het tekstlabel blijft ernaast staan -- voor een
   schermlezer en voor iedereen die de icoontjes niet herkent. */
.footer__socialkop {
  margin: 1.35rem 0 0.6rem; font-size: 0.75rem; font-family: var(--mono);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--tx-mut);
}
.footer__sociaal {
  flex-direction: row; flex-wrap: wrap; gap: 0.35rem 1.1rem;
}
.footer__sociaal a {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 0.45rem;
}
.footer__sociaal svg { flex: none; opacity: 0.7; }
.footer__sociaal a:hover svg { opacity: 1; }

/* het bezoekadres in de voettekst: zelfde toon als de linklijst ernaast,
   maar zonder linkkleur -- het is een gegeven, geen actie */
.footer__adres {
  margin: 0 0 0.9rem; font-size: 0.9375rem; line-height: 1.7;
  color: var(--tx-soft);
}

/* bezoekadres op de contactpagina -- <address> is het juiste element en
   krijgt hier zijn eigen ritme in plaats van de schuine standaardletter */
.adres {
  display: flex; flex-direction: column; gap: 0.3rem;
  font-style: normal; font-size: 0.9375rem; color: var(--tx-soft);
  padding: 1.35rem 1.5rem;
  background: var(--s1); border: 1px solid var(--line); border-radius: 16px;
}
.adres b { color: var(--tx); font-weight: 600; }
.adres a { color: var(--gold-tx); text-decoration: none; margin-top: 0.35rem; }
.adres a:hover { text-decoration: underline; }

/* --- uitklapgroepen in het hoofdmenu ---------------------------------------
   De knop ziet er precies zo uit als een menulink; het enige verschil is het
   pijltje. Dat is met opzet: een groepskop hoort niet zwaarder te wegen dan
   een gewone bestemming, anders lijkt de balk uit twee soorten dingen te
   bestaan.

   Het paneel staat op `display: none` als het dicht is, niet op opacity 0.
   Zo blijven de links uit de tabvolgorde -- dezelfde reden als bij het
   mobiele paneel. */
.menugroep { position: relative; }
.menugroep__knop {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.9375rem; font-weight: 500;
  color: var(--tx-soft);
  transition: color 0.2s var(--ease-q);
}
.menugroep__knop:hover,
.menugroep__knop[aria-expanded="true"] { color: var(--tx); }
.menugroep__knop[data-huidig="true"] { color: var(--gold-tx); }
.menugroep__pijl {
  width: 0.45rem; height: 0.45rem; margin-top: -0.2rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease-q);
}
.menugroep__knop[aria-expanded="true"] .menugroep__pijl {
  transform: rotate(-135deg); margin-top: 0.15rem;
}
.menugroep__paneel {
  display: none;
  position: absolute; top: calc(100% + 1.05rem); left: 50%;
  transform: translateX(-50%);
  min-width: 15rem; padding: 0.4rem;
  background: var(--s1);
  border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
/* De muis moet van de knop naar het paneel kunnen zonder door een gat te
   gaan; zonder deze brug klapt het menu dicht halverwege de beweging. */
.menugroep__paneel::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: -1.05rem; height: 1.05rem;
}
.menugroep__paneel[data-open="true"] { display: grid; gap: 2px; }
.header__nav .menugroep__paneel a:not(.btn) {
  display: block; padding: 0.6rem 0.85rem; border-radius: 10px;
  white-space: nowrap;
  transition: background 0.16s var(--ease-q), color 0.16s var(--ease-q);
}
.header__nav .menugroep__paneel a:not(.btn):hover { background: var(--s2); color: var(--tx); }
.header__nav .menugroep__paneel a[aria-current="page"] { color: var(--gold-tx); }

@media (max-width: 860px) {
  /* In het mobiele paneel is een uitklap in een uitklap onnodig gedoe: de
     groepen staan gewoon open, met hun kop als tussenkopje. */
  .menugroep { border-bottom: 1px solid var(--line); }
  .menugroep:last-of-type { border-bottom: 0; }
  .menugroep__knop {
    width: 100%; justify-content: space-between;
    padding: 1rem clamp(1.15rem, 5vw, 2rem) 0.35rem;
    font-family: var(--mono); font-size: 0.6875rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--tx-mut); cursor: default;
  }
  .menugroep__pijl { display: none; }
  .menugroep__paneel {
    display: grid; position: static; transform: none;
    min-width: 0; padding: 0 0 0.5rem;
    background: none; border: 0; box-shadow: none;
  }
  .header__nav .menugroep__paneel a:not(.btn) {
    padding: 0.55rem clamp(1.15rem, 5vw, 2rem);
    border-bottom: 0; border-radius: 0; white-space: normal;
  }
}

.readout:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Op telefoon één kolom met label links en waarde rechts: de 2x2 van
   auto-fit gaf cellen van 150px waarin "7,6-22,7 kWh" over drie regels brak
   en een derde cel een leeg grijs vak naast zich kreeg (04-09-2026). Staat
   bewust ná de :has-regel hierboven: gelijke specificiteit, dus volgorde telt. */
@media (max-width: 560px) {
  .readout, .readout:has(> :nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); }
  .readout__cell { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.35rem 1rem; padding: 0.9rem 1.15rem; min-width: 0; }
  .readout__v { margin: 0; font-size: 1.3rem; text-align: right; min-width: 0; }
  .readout__v em { display: inline; margin-left: 0.15rem; white-space: nowrap; }
}

/* ==========================================================================
   OPENGEWERKT — de FlexVolt One HV laag voor laag
   ==========================================================================
   De tekening is opgebouwd uit de echte maatvoering (670 x 230 mm, modules
   van 315 mm), dus alles staat op schaal. De kleuren van de behuizing staan
   bewust buiten het palet: dit is geen interface maar grafiet en kunststof.
   Goud blijft de enige signaalkleur en zit alleen op de bijschriften en op
   het onderdeel waar je staat. */

.ontleed__bediening {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-bottom: 0.6rem;
}
.ontleed__knop {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--btn-bg); color: var(--btn-tx); border: 0; border-radius: 10px;
  padding: 0.7rem 1.15rem; font-family: var(--sans); font-size: 0.875rem; font-weight: 700;
  cursor: pointer; transition: background 0.2s var(--ease-q), transform 0.2s var(--ease-q);
}
.ontleed__knop:hover { background: var(--gold-2); transform: translateY(-1px); }
.ontleed__knop svg { width: 0.95rem; height: 0.95rem; }
.ontleed__regelaar { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 14rem; max-width: 22rem; }
.ontleed__regelaar > span {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tx-mut); white-space: nowrap;
}
.ontleed__schuif {
  -webkit-appearance: none; appearance: none; flex: 1;
  height: 3px; border-radius: 9999px; background: var(--s3); outline: none; cursor: pointer;
}
.ontleed__schuif::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--bg); cursor: grab;
}
.ontleed__schuif::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--bg); cursor: grab;
}
.ontleed__hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem;
  max-width: none; font-size: 0.75rem; color: var(--tx-mut); margin: 0 0 0.9rem;
}

/* Op een smal scherm zou de tekening tot een derde krimpen en zouden de
   bijschriften onleesbaar worden. Ze houdt daarom een minimumbreedte en
   schuift mee, net als het systeemschema op de homepage. De uitleg eronder
   bevat dezelfde informatie als tekst. */
.ontleed__toneel {
  position: relative; background: var(--s1); border: 1px solid var(--line);
  border-radius: 16px 16px 0 0; overflow-x: auto; overflow-y: hidden;
}
/* Een lichtplek achter de opstelling, zodat de tekening niet in het zwart
   verdwijnt zonder dat er een tweede kleur bijkomt. */
.ontleed__toneel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at 50% 42%, var(--gold-dim), transparent 70%);
}
.ontleed__svg { display: block; width: 100%; min-width: 44rem; height: auto; cursor: grab; touch-action: pan-y; }
/* Op telefoon is 44rem het dubbele van het scherm en het toneel knipt af:
   je zag alleen de linkerhelft van de stapel (gemeld 04-09-2026). Daar past
   de tekening zich aan de breedte aan; de genummerde balk en de uitleg
   eronder dragen de details. */
@media (max-width: 760px) { .ontleed__svg { min-width: 0; } }
.ontleed__svg.is-sleepend { cursor: grabbing; }

.ontleed__vloer { fill: #131313; stroke: #1E1E1E; stroke-width: 1; }
.ontleed__schaduw { fill: #0B0B0B; opacity: 0.85; }

.onderdeel { cursor: pointer; }
/* Een onderdeel is een knop en krijgt dus focus na een klik. De standaard
   focusrand van de browser trekt daar een witte rechthoek omheen om de héle
   groep -- inclusief het bijschrift dat ernaast hangt, dat er als los kader
   omheen komt te staan. Weghalen kan hier omdat er al een duidelijker
   focusmerk is dat wél de vorm volgt: de gouden omtrek hieronder, die bij
   :focus-visible aangaat. */
.onderdeel:focus { outline: none; }
.vlak { transition: fill 0.2s var(--ease-q); }
.vlak--voor { fill: url(#ontleedVoor); }
.vlak--zij { fill: url(#ontleedZij); }
.vlak--boven { fill: url(#ontleedBoven); }
.onderdeel.is-aan .vlak--voor { fill: #363C43; }
.onderdeel.is-aan .vlak--zij { fill: #22262C; }
.onderdeel.is-aan .vlak--boven { fill: #454C54; }

.glans { fill: #565E67; opacity: 0.32; }
.randlicht { fill: none; stroke: #6A727C; stroke-width: 1.1; opacity: 0.55; }
.randlicht--achter { stroke: #4A525B; opacity: 0.35; }
.naad { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; opacity: 0.55; }
.omtrek {
  fill: none; stroke: var(--gold); stroke-width: 1.6;
  opacity: 0; transition: opacity 0.2s var(--ease-q);
}
.onderdeel.is-aan .omtrek, .onderdeel:hover .omtrek, .onderdeel:focus-visible .omtrek { opacity: 1; }

.kolom { fill: #131619; }
.paneel { fill: #0E1113; }
.lampje { fill: #5A6068; }
.lampje--aan { fill: var(--gold); }
.streepje { fill: #3A4047; }
.schroef { fill: #1A1D21; }
.koelrib { fill: #101317; }
.modulerand { fill: none; stroke: #20242A; stroke-width: 5; }
.celvak { fill: #272C32; opacity: 0.5; }
.voetrand { fill: #3A4047; }
.voetblok { fill: #0E1113; }
.merknaam { font-family: var(--sans); font-weight: 800; fill: #E9EBEE; letter-spacing: 1; }
.merknaam--sub { font-weight: 700; fill: #8A9098; letter-spacing: 6; }
.typeplaatje { font-family: var(--mono); font-weight: 500; fill: #6C747D; }

.wijzer { fill: none; stroke: var(--line-ui); stroke-width: 1; opacity: 0.5; transition: stroke 0.2s var(--ease-q); }
.bijschrift.is-aan .wijzer, .bijschrift:hover .wijzer, .onderdeel:hover .wijzer { stroke: var(--gold); opacity: 1; }
.punt { fill: var(--bg); stroke: var(--line-ui); stroke-width: 1.6; transition: stroke 0.2s var(--ease-q), fill 0.2s var(--ease-q); }
.bijschrift.is-aan .punt, .bijschrift:hover .punt, .onderdeel:hover .punt { stroke: var(--gold); fill: var(--gold); }
.bijschrift__num { font-family: var(--mono); font-size: 10px; fill: var(--gold); letter-spacing: 0.06em; }
.bijschrift__titel { font-family: var(--sans); font-size: 13.5px; font-weight: 700; fill: var(--tx); }
.bijschrift__regel { font-family: var(--sans); font-size: 11.5px; fill: var(--tx-mut); }
.bijschrift.is-aan .bijschrift__regel, .bijschrift:hover .bijschrift__regel,
.onderdeel:hover .bijschrift__regel { fill: var(--tx-soft); }

/* Een bijschrift is zelf aan te klikken, maar alleen wanneer het zichtbaar is
   -- anders vangt een doorzichtig vlak klikken op de tekening af. `is-open`
   wordt gezet zodra de bijschriften zijn ingevaren. */
.bijschrift { pointer-events: none; }
.ontleed__scene.is-open .bijschrift { pointer-events: auto; cursor: pointer; }
.bijschrift__vang { fill: transparent; }


/* ============================================================================
   LIVE STROOMPRIJZEN
   ----------------------------------------------------------------------------
   Gevuld door assets/js/prijzen.js met de uurprijzen van vandaag (EnergyZero).
   Zonder JavaScript of zonder verbinding blijft de vaste tekst staan die in de
   HTML zit; het blok belooft dus nooit gegevens die er niet zijn. De hoogte
   van de balken zet het script via el.style.setProperty -- dat mag onder
   style-src 'self', style-ATTRIBUTEN in de HTML niet.
   ========================================================================== */

.prijzen {
  background: var(--s1); border: 1px solid var(--line);
  border-radius: 16px; padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.prijzen__kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; margin-bottom: 1rem; }
.prijzen__kop h3 { font-size: 1.0625rem; color: var(--tx); }
.prijzen__live {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tx-mut);
}
.prijzen[data-geladen] .prijzen__live { color: var(--gold-tx); }
.prijzen__balken {
  display: flex; align-items: flex-end; gap: 2px;
  height: 9rem; margin-bottom: 0.4rem;
}
.prijzen__kolom { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.prijzen__balk {
  width: 100%; border-radius: 3px 3px 0 0;
  background: var(--s3); min-height: 4px;
  transition: background 0.2s var(--ease-q);
}
.prijzen__kolom:hover .prijzen__balk { background: var(--line-ui); }
.prijzen__balk--laag { background: var(--gold); }
.prijzen__balk--hoog { background: #6E6E6C; }
.prijzen__kolom--nu .prijzen__balk { outline: 2px solid var(--gold); outline-offset: 1px; }
.prijzen__uur {
  position: absolute; top: 100%; left: 0; margin-top: 0.3rem;
  font-family: var(--mono); font-size: 0.625rem; color: var(--tx-mut);
}
.prijzen__cijfers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px; background: var(--line); border-radius: 10px; overflow: hidden;
  margin: 1.6rem 0 0;
}
.prijzen__cel { background: var(--s2); padding: 0.75rem 0.9rem; }
.prijzen__cel dt { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tx-mut); margin: 0 0 0.25rem; }
.prijzen__cel dd { margin: 0; font-family: var(--mono); font-size: 0.9375rem; color: var(--tx); font-variant-numeric: tabular-nums; }
.prijzen__stand { margin: 0.9rem 0 0; font-size: 0.75rem; color: var(--tx-mut); }



/* ============================================================================
   DE TWEE THUISBATTERIJEN  (/producten/)
   ----------------------------------------------------------------------------
   Verving de catalogus met dertien kaarten. Twee panelen naast elkaar: beeld
   boven, dan naam, kerncijfers en de zes kenmerken uit de brochure met een
   icoon ervoor.

   Het beeld staat BOVEN de tekst en niet ernaast: de twee producten verschillen
   in hoogte (de HV is smaller en hoger), en naast elkaar in een tweekoloms
   paneel zouden ze op verschillende schaal komen te staan. Boven elkaar met
   dezelfde vaste beeldhoogte blijven ze vergelijkbaar.
   ========================================================================== */

.tbmodellen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (max-width: 56rem) { .tbmodellen { grid-template-columns: 1fr; } }

.tbmodel {
  display: flex; flex-direction: column;
  background: var(--s1); border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden;
}
.tbmodel__beeld {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 22rem; padding: 1.25rem;
  background: var(--s2);
  border-bottom: 1px solid var(--line);
}
.tbmodel__beeld::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 52% 60% at 50% 52%, rgba(253,197,0,0.13), transparent 70%);
}
.tbmodel__beeld img {
  position: relative; width: auto; max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.tbmodel__body { padding: clamp(1.5rem, 2.6vw, 2.1rem); display: flex; flex-direction: column; }
.tbmodel__naam { margin-top: 0.35rem; }
.tbmodel__belofte { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--tx-soft); }
.tbmodel__cijfers { margin-top: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tbmodel__cijfers .spec { padding: 0.85rem 1rem; }

/* De kenmerkenlijst: icoon links, kop en tekst rechts. De kop staat op een
   eigen regel, want een vetgedrukt begin midden in een zin leest bij zes
   items achter elkaar als ruis. */
.tbkenmerken { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.tbkenmerk { display: flex; gap: 0.9rem; align-items: flex-start; }
.tbkenmerk span { font-size: 0.875rem; line-height: 1.55; color: var(--tx-soft); }
.tbkenmerk b {
  display: block; margin-bottom: 0.1rem;
  font-size: 0.9375rem; font-weight: 600; color: var(--tx);
}
.tbmodel .hero__cta { margin-top: auto; padding-top: 1.75rem; }

/* --- het icoonvak ----------------------------------------------------------
   Overgenomen uit het compleet_3-ontwerp: een vierkant kadertje met afgeronde
   hoeken, een zweem goud als ondergrond en het icoon in goud. Werkt op donker
   en licht doordat het de tokens gebruikt. */
.icoonvak {
  flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); background: var(--gold-dim);
  color: var(--gold-tx);
}
.icoonvak svg { width: 1.15rem; height: 1.15rem; }

/* ============================================================================
   CHECKLIST EN KADERS
   ----------------------------------------------------------------------------
   De aankruislijst (geschiktheidscheck op /btw-teruggave/) en het kader met
   icoon (waarschuwing of toelichting middenin een leesstuk). Beide komen uit
   het dysunenergy.nl-ontwerp en werken op donker en licht via de tokens.
   ========================================================================== */

.checklijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; max-width: 46rem; }
.checkpunt label {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 1rem 1.15rem; border: 1px solid var(--line-ui); border-radius: 12px;
  background: var(--s1); cursor: pointer;
  transition: border-color 0.2s var(--ease-q), background 0.2s var(--ease-q);
}
.checkpunt label:hover { border-color: var(--tx-mut); }
.checkpunt--aan label { border-color: var(--gold); background: var(--gold-dim); }
.checkpunt input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.checkpunt__vink {
  flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin-top: 0.1rem;
  border: 1.5px solid var(--line-ui); border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; transition: all 0.2s var(--ease-q);
}
.checkpunt__vink svg { width: 0.8rem; height: 0.8rem; }
.checkpunt--aan .checkpunt__vink { background: var(--gold); border-color: var(--gold); color: #111; }
.checkpunt input:focus-visible ~ .checkpunt__vink { outline: 2px solid var(--gold); outline-offset: 2px; }
/* De vaste variant: geen invoer, het vinkje staat altijd aan. Voor lijsten
   die voorwaarden OPSOMMEN in plaats van ze laten aankruisen. */
.checkpunt--vast {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--s1);
}
.checkpunt--vast .checkpunt__vink { background: var(--gold); border-color: var(--gold); color: #111; }
.checkpunt__tekst { font-size: 0.9375rem; line-height: 1.55; color: var(--tx-soft); }
.checklijst__oordeel {
  max-width: 46rem; margin: 1.25rem 0 0;
  padding: 1rem 1.15rem; border-left: 3px solid var(--line-ui); border-radius: 0 10px 10px 0;
  background: var(--s1); font-size: 0.9375rem; color: var(--tx-soft);
}
.checklijst__oordeel[data-uitkomst="goed"] { border-left-color: var(--gold); }
.checklijst__oordeel[data-uitkomst="bijna"] { border-left-color: var(--gold); }
.checklijst__oordeel[data-uitkomst="matig"] { border-left-color: var(--tx-mut); }

.kader {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 1.1rem 1.25rem; border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--s1);
}
.kader svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; color: var(--gold-tx); }
.kader p { margin: 0; font-size: 0.9375rem; line-height: 1.6; }
.kader--let-op { border-color: var(--gold); background: var(--gold-dim); }

/* --- keuze in het contactformulier -----------------------------------------
   Twee soorten bericht, zelfde knopvorm als de stapelaar: het is dezelfde
   soort keuze. De adviesvelden verdwijnen met `hidden`; leeggelaten velden
   verstuurt site.js toch al niet. */
.form__keuze { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }

/* --- de genummerde balk onder de tekening -----------------------------------
   Er zijn zes onderwerpen en minder blokken om op te klikken: de bediening zit
   op de omvormer, niet in een eigen kast. Zonder deze balk is die uitleg dus
   niet te bereiken -- en is ook niet te zien DAT er zes zijn. De balk zit
   tussen tekening en uitleg en deelt hun randen, zodat het een paneel blijft
   en geen losse knoppenrij wordt. */
.ontleed__index {
  display: flex; overflow-x: auto;
  border: 1px solid var(--line); border-top: 0;
  background: var(--s1);
}
.ontleed__chip {
  flex: 1 0 auto; display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.8rem 1.05rem; border: 0; border-right: 1px solid var(--line);
  background: transparent; color: var(--tx-mut); cursor: pointer;
  font-family: var(--sans); font-size: 0.8125rem; text-align: left;
  white-space: nowrap;
  transition: background 0.2s var(--ease-q), color 0.2s var(--ease-q);
}
.ontleed__chip:last-child { border-right: 0; }
.ontleed__chip:hover { background: var(--s2); color: var(--tx-soft); }
.ontleed__chip[aria-pressed="true"] { background: var(--s2); color: var(--tx); }
.ontleed__chipnum {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.08em;
  color: var(--tx-mut); transition: color 0.2s var(--ease-q);
}
.ontleed__chip[aria-pressed="true"] .ontleed__chipnum { color: var(--gold-tx); }
.ontleed__chip[aria-pressed="true"] .ontleed__chiptxt { font-weight: 600; }

/* --- uitvoering kiezen ------------------------------------------------------
   Dezelfde vorm als de knoppen in de stapelaar op de homepage: het is dezelfde
   soort keuze, dus hij hoort er ook hetzelfde uit te zien. */
.ontleed__model { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.1rem; }
/* De productnaam mag niet doormidden. Zonder dit valt de regel tussen
   "FlexVolt" en "One HV" en lees je de naam over twee regels. De breuk
   hoort na de komma te vallen. */
.ontleed__naamgroep { white-space: nowrap; }
.ontleed__getoond {
  display: inline-block;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em;
  color: var(--gold-tx); border: 1px solid var(--line-2); border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

.ontleed__uitleg {
  display: grid; grid-template-columns: 1.15fr 1fr;
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 16px 16px;
  background: var(--s2); overflow: hidden;
}
@media (max-width: 53.75rem) { .ontleed__uitleg { grid-template-columns: 1fr; } }
.ontleed__blad { padding: 1.6rem 1.75rem; }
.ontleed__zijblad { padding: 1.6rem 1.75rem; background: var(--s1); border-left: 1px solid var(--line); }
@media (max-width: 53.75rem) { .ontleed__zijblad { border-left: 0; border-top: 1px solid var(--line); } }
.ontleed__titel { font-size: 1.125rem; font-weight: 700; margin: 0 0 0.25rem; color: var(--tx); }
.ontleed__kop { font-family: var(--mono); font-size: 0.6875rem; color: var(--gold-tx); margin: 0 0 0.9rem; letter-spacing: 0.06em; }
.ontleed__punten { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.ontleed__punten li { position: relative; padding-left: 1.1rem; font-size: 0.875rem; line-height: 1.55; color: var(--tx-soft); }
.ontleed__punten li::before {
  content: ""; position: absolute; left: 0; top: 0.5rem;
  width: 6px; height: 6px; border-radius: 1px; background: var(--gold); opacity: 0.85;
}
.ontleed__zijkop {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tx-mut); margin: 0 0 0.9rem;
}
.ontleed__cijfers { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: 10px; overflow: hidden; margin: 0; }
.ontleed__cijfer { background: var(--s2); padding: 0.8rem 0.9rem; }
.ontleed__cijfer dt { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tx-mut); margin: 0 0 0.3rem; }
.ontleed__cijfer dd { margin: 0; font-family: var(--mono); font-size: 0.875rem; color: var(--tx); font-variant-numeric: tabular-nums; }

.ontleed__voetnoot { margin: 1.1rem 0 0; font-size: 0.75rem; line-height: 1.6; color: var(--tx-mut); }

@media (prefers-reduced-motion: reduce) {
  .ontleed__knop, .ontleed__chip, .vlak, .omtrek, .wijzer, .punt { transition: none; }
}

/* Cijferlijsten binnen een tweekoloms blok: halve breedte, dus hoogstens twee
   kolommen. Staat na de algemene regels hierboven en wint daarmee bij gelijke
   specificiteit. Zonder dit vielen acht cellen in vier kolommen van 100 tot
   174px, ongelijk en te smal om te lezen. */
.day > .specs:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.day > .specs { align-self: start; }

/* --- uitvoering kiezen in de stapelaar -------------------------------------
   De stapelaar liet alleen de LV zien; wie een driefase woning heeft, zag zijn
   eigen product niet. Twee knoppen erboven, met dezelfde vorm als de
   capaciteitsknoppen eronder -- het is dezelfde soort keuze, alleen een niveau
   hoger. Iets zwaarder gescheiden met een lijn eronder, anders lijken het zeven
   knoppen op een rij in plaats van twee keuzes.

   De capaciteitsknoppen en beelden van de andere uitvoering staan op
   `display: none`, niet op opacity: zo blijven ze ook uit de tabvolgorde. */
.stack__type {
  display: flex; gap: 0.5rem;
  margin-bottom: 1.25rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.stack[data-type="lv"] .stack__controls .cap[data-type="hv"],
.stack[data-type="hv"] .stack__controls .cap[data-type="lv"] { display: none; }
.stack[data-type="lv"] .stack__img[data-type="hv"],
.stack[data-type="hv"] .stack__img[data-type="lv"] { display: none; }

/* --- vraag stellen over de kennisbank --------------------------------------
   Bewust geen zwevende bel rechtsonder. Die vraagt aandacht op elk moment en
   op elke pagina; dit hoort bij de kennisbank en staat dus in de kennisbank,
   op de plek waar iemand al aan het zoeken is en er niet uitkomt.
   De draad groeit mee en scrollt zelf, zodat de pagina eronder niet gaat
   springen bij elk antwoord. */
.kb-chat {
  background: var(--s1); border: 1px solid var(--line);
  border-radius: 18px; padding: clamp(1.35rem, 3vw, 2rem);
}
.kb-chat__kop { max-width: 58ch; margin-bottom: 1.5rem; }
.kb-chat__kop p { margin-top: 0.75rem; font-size: 0.9375rem; }
.kb-chat__draad { display: grid; gap: 0.9rem; max-height: 26rem; overflow-y: auto; }
.kb-chat__draad:not(:empty) { margin-bottom: 1.25rem; }
.kb-bericht { border-radius: 14px; padding: 0.9rem 1.1rem; font-size: 0.9375rem; }
.kb-bericht p { margin: 0 0 0.6rem; }
.kb-bericht p:last-child { margin-bottom: 0; }
.kb-bericht--vraag { background: var(--s3); color: var(--tx); justify-self: end; max-width: 40ch; }
.kb-bericht--antwoord { background: var(--bg); border: 1px solid var(--line); color: var(--tx-soft); }
.kb-bericht__bezig { color: var(--tx-mut); }
.kb-bericht__bronnen { margin: 0.75rem 0 0; padding-left: 1.1rem; }
.kb-bericht__bronnen li { margin-bottom: 0.3rem; }
.kb-bericht__bronnen a { color: var(--tx); }
.kb-bericht__mail { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--line);
  font-size: 0.875rem; color: var(--tx-mut); }
.kb-bericht__mail a { color: var(--gold-tx); }
.kb-bericht__mail--nadruk { color: var(--tx-soft); }
.kb-chat__form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: stretch; }
.kb-chat__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.kb-chat__invoer {
  flex: 1 1 18rem; min-width: 0;
  padding: 0.85rem 1rem; font: inherit; font-size: 0.9375rem;
  color: var(--tx); background: var(--bg);
  border: 1px solid var(--line-ui); border-radius: var(--r);
}
.kb-chat__invoer:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.kb-chat__knop[disabled] { opacity: 0.55; cursor: default; }

/* Cijferstrook in een productpaneel: altijd twee kolommen. Moet NA de
   :has()-regels hierboven staan -- die dwingen bij precies vier cellen vier
   kolommen af, wat klopt over de volle breedte maar niet in een paneel van
   nog geen 500 px. */
.tbmodel .specs.tbmodel__cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Drie klassen, want `.specs:has(> :nth-child(4):last-child)` telt er ook drie
   (`:has()` erft de specificiteit van zijn argument). Bij gelijke
   specificiteit wint de laatste regel, en dat is deze. */

/* ============================================================================
   WEERGAVE: LICHT
   ----------------------------------------------------------------------------
   Op deze site is LICHT de standaard (keuze van Liam, 03-09-2026): de
   omlijsting zet data-theme="light" al in de HTML, en het inline-script in de
   <head> haalt dat er vóór het eerste schilderen weer af als de bezoeker
   eerder voor donker koos (localStorage dysun-weergave = "donker"). Het
   tools-platform blijft donker als standaard; zie DECISIONS.md, DEC-013.
   De systeemvoorkeur wordt op beide bewust niet gevolgd.

   Dit is géén tweede kleurensysteem: het zijn de waarden van .section--licht,
   nu op paginaniveau. --ink blijft zwart, om dezelfde reden als daar: het is
   de letterkleur op de gouden knop. Wat donker blijft, staat onderaan.
   ========================================================================== */
html[data-theme="light"] {
  color-scheme: light;
  --grond:    #F8F7F4;   /* papier */
  --bg:       #FFFFFF;   /* kaarten en velden */
  --s1:       #FFFFFF;
  --s2:       #F4F2ED;
  --s3:       #EBE8E1;
  --line:     #E4E2DC;
  --line-2:   #D6D3CB;
  --line-ui:  #9A968C;   /* 3,3:1 op papier */
  --tx:       #101013;
  --tx-soft:  #4C4C4A;
  --tx-mut:   #6E6E6C;
  --gold-tx:  #7A5F00;   /* 6,9:1 op papier */
  --gold-dim: rgba(253,197,0,0.20);
}
body { transition: background-color 0.15s var(--ease-q), color 0.15s var(--ease-q); }

/* Een paar regels rekenden op een donkere ondergrond. */
html[data-theme="light"] .header[data-scrolled="true"],
html[data-theme="light"] .header:has(.header__nav[data-open="true"]) { background: rgba(248,247,244,0.88); }
html[data-theme="light"] .plakbalk { background: rgba(248,247,244,0.92); }
html[data-theme="light"] .btn--ghost:hover { background: rgba(0,0,0,0.045); }
html[data-theme="light"] .veldfout { color: #B91C1C; }
/* Merklogo's in de retrofit-band: op donker wit gemaakt (brightness(0)
   invert(1)), en wit op een witte kaart is onzichtbaar. Op licht dus alleen
   brightness(0): elk logo wordt inkt, zelfde rust, zelfde gelijkheid tussen
   de merken. Iets doorzichtiger dan op donker, want zwart op wit knalt harder
   dan wit op zwart. Het SMA-logo slaat het filter over (zie merken.py): daar
   zijn de letters wit uit een grijze vlag gespaard en die vlag blijft op
   papier gewoon leesbaar. Zelfde regel voor de lichte secties, mocht de band
   ooit in zo'n sectie belanden. */
html[data-theme="light"] .merk__logo,
.section--licht .merk__logo,
.section--wit .merk__logo { filter: brightness(0); opacity: 0.6; }
html[data-theme="light"] .merk:hover .merk__logo,
.section--licht .merk:hover .merk__logo,
.section--wit .merk:hover .merk__logo { opacity: 0.9; }
html[data-theme="light"] .merk__logo--kleur,
.section--licht .merk__logo--kleur,
.section--wit .merk__logo--kleur { filter: none; opacity: 0.85; }
html[data-theme="light"] .merk:hover .merk__logo--kleur,
.section--licht .merk:hover .merk__logo--kleur,
.section--wit .merk:hover .merk__logo--kleur { opacity: 1; }
@media (max-width: 860px) {
  html[data-theme="light"] .header__nav { box-shadow: 0 10px 40px rgba(0,0,0,0.16); }
}

/* De opengewerkte module bij de zeven veiligheidslagen houdt haar eigen donkere
   palet -- maar twee dingen erin rekenden erop dat er zwart omheen lag.

   1. De grondschaduw is een vlakke ellips in bijna-zwart (#0B0B0B). Op zwart
      zie je die niet; op papier lag er een harde zwarte plas onder de module.
      Hier krijgt ze het radiale verloop uit lagen_tekening.py: een zachte
      contactschaduw in plaats van een silhouet.
   2. De regelmodule vaagt naar boven weg, als 'wordt vervolgd'. Wegvagen naar
      zwart is onzichtbaar, wegvagen naar papier gaf een grijze spookdoos --
      gemeten #BFBFBF op #F8F7F4, een verschil van 57 tegen 5 op zwart. Zwakker
      gezet komt dat verschil op ongeveer 22 uit: een watermerk, geen vlak.

   Ook geldig in een lichte sectie, net als bij de merklogo's hierboven: het
   gaat om de ondergrond, niet om de weergavekeuze. */
html[data-theme="light"] .vt-schaduw,
.section--licht .vt-schaduw,
.section--wit .vt-schaduw { fill: url(#vt-grond); opacity: 1; }
html[data-theme="light"] .vt-vervolg,
.section--licht .vt-vervolg,
.section--wit .vt-vervolg { opacity: 0.38; }
/* De uitlegpopup hangt over de tekening. 60% zwart is op zwart een halo en op
   papier een vlek; op licht dezelfde diepte, veel zachter. */
html[data-theme="light"] .laag__popup,
.section--licht .laag__popup,
.section--wit .laag__popup { box-shadow: 0 10px 30px rgba(16,16,19,0.13); }

/* Podia blijven donker: de hero met de video op de homepage. De opengewerkte
   tekening en de productstudio hebben een eigen palet en veranderen sowieso
   niet mee. Kleur staat expliciet, want die erft als berekende waarde. */
html[data-theme="light"] .hero {
  color: var(--tx-soft);
  --bg:       #111111;
  --s1:       #161616;
  --s2:       #1E1E1E;
  --s3:       #262626;
  --line:     rgba(255,255,255,0.07);
  --line-2:   rgba(255,255,255,0.14);
  --line-ui:  rgba(255,255,255,0.42);
  --tx:       #F0F0F0;
  --tx-soft:  #B0B0B0;
  --tx-mut:   #8A8A8A;
  --gold-tx:  var(--gold);
  --gold-dim: rgba(253,197,0,0.12);
}
/* Bovenaan de homepage ligt de doorzichtige kop óver de donkere hero. */
html[data-theme="light"] body:has(.hero) .header[data-scrolled="false"]:not(:has(.header__nav[data-open="true"])) {
  color: var(--tx-soft);
  --tx:       #F0F0F0;
  --tx-soft:  #B0B0B0;
  --tx-mut:   #8A8A8A;
  --line-ui:  rgba(255,255,255,0.42);
  --gold-tx:  var(--gold);
  /* Ook de vlakken: de menuknop staat op --s2 en de taalwisselaar licht op
     met --s2. Zonder deze regel bleef dat het lichte papier, en witte strepen
     op een lichte knop zijn onzichtbaar -- op telefoon stond er bovenaan de
     homepage een leeg crèmekleurig vakje (gemeld 04-09-2026). */
  --s1:       #161616;
  --s2:       #1E1E1E;
  --s3:       #262626;
}

/* Woordmerk: wit op donker, inkt op licht. Twee afbeeldingen, één zichtbaar;
   geen script nodig en geen filter dat het goud mee zou kleuren. */
.logo--licht { display: none; }
html[data-theme="light"] .logo--donker { display: none; }
html[data-theme="light"] .logo--licht { display: block; }
html[data-theme="light"] body:has(.hero) .header[data-scrolled="false"]:not(:has(.header__nav[data-open="true"])) .logo--licht { display: none; }
html[data-theme="light"] body:has(.hero) .header[data-scrolled="false"]:not(:has(.header__nav[data-open="true"])) .logo--donker { display: block; }

/* De knop zelf, naast de taalwisselaar en in dezelfde stijlfamilie. De rand
   staat op --line-ui: dat is de 3:1-grens voor een bedieningselement. */
/* Naast de taalwisselaar, in één groepje met kleine tussenruimte. Op desktop
   alleen het icoon: met label erbij (85px) paste de balk niet meer op 1440px
   en brak "Over ons" af. De betekenis zit in aria-label en title. */
.nav-hulp { display: flex; align-items: center; gap: 0.6rem; }
.weergave {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--line-ui);
  border-radius: 999px;
  background: transparent;
  color: var(--tx);
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.16s var(--ease-q), color 0.16s var(--ease-q);
}
.weergave:hover { border-color: var(--gold); }
.weergave:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.weergave svg { width: 14px; height: 14px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.weergave__label { display: none; }
.weergave__zon { display: none; }
html[data-theme="light"] .weergave__zon  { display: block; }
html[data-theme="light"] .weergave__maan { display: none; }
@media (max-width: 860px) {
  .nav-hulp { flex-wrap: wrap; gap: 1rem; padding: 0.9rem clamp(1.15rem, 5vw, 2rem); }
  .weergave { padding: 0.3rem 0.7rem 0.3rem 0.55rem; }
  .weergave__label { display: inline; }
}
@media print { .weergave { display: none !important; } }