/* ============================================================
   RDL Energy Solutions
   Merkkleuren: antraciet #1f2a33 en groen #5cb531

   OPBOUW VAN DIT BESTAND
   01. Grondslag ......... kleuren, maten, basisregels
   02. Raster ............ het kolomsysteem waar alles op lijnt
   03. Typografie
   04. Knoppen
   05. Kopbalk en navigatie
   06. Paginakop (subpagina's)
   07. Hero (startpagina)
   08. Kerngetallen en gegevensbalken
   09. Zo werkt het ..... de twee animaties, aangestuurd door één klok
   10. Wegwijzer ........ alle pagina's in één oogopslag
   11. Diensten
   12. Realisaties
   13. Projectpagina
   14. Prijzen
   15. Aanpak
   16. Reviews
   17. Over Rik
   18. Contact en formulier
   19. Oproepstrook
   20. Voettekst
   21. Zwevende knoppen
   22. Beweging
   23. Responsief
   ============================================================ */


/* ============================================================
   01. GRONDSLAG
   ============================================================ */

:root {
  /* Papier: de basis van de site */
  --papier:      #edf0ec;
  --papier-2:    #e4e8e3;
  --papier-3:    #d9ded8;
  --wit:         #f7f9f6;

  /* Inkt: verankerd in het antraciet van het logo */
  --inkt:        #171f25;
  --inkt-2:      #232e37;
  --inkt-zacht:  #55636b;
  --inkt-licht:  #808d94;

  /* Groen uit het logo */
  --groen:       #4a9728;
  --groen-fel:   #5cb531;
  --groen-tekst: #336c1a;
  --groen-waas:  rgba(74, 151, 40, .09);

  /* Lijnen: het zichtbare raster */
  --lijn:        rgba(23, 31, 37, .13);
  --lijn-2:      rgba(23, 31, 37, .24);
  --lijn-3:      rgba(23, 31, 37, .42);
  --lijn-om:     rgba(247, 249, 246, .15);
  --lijn-om-2:   rgba(247, 249, 246, .28);

  /* Maten */
  --raster:      1240px;
  --marge:       34px;
  --kolom:       250px;   /* de vaste labelkolom links */
  --geul:        72px;    /* ruimte tussen labelkolom en inhoud */
  --kopbalk:     74px;

  --soepel:      cubic-bezier(.22, .61, .36, 1);
  --veer:        cubic-bezier(.34, 1.32, .64, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopbalk) + 26px);
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* height: auto is nodig. Elke <img> heeft width- en height-attributen staan
   (goed tegen verspringen tijdens het laden), maar zonder deze regel wint dat
   height-attribuut van de CSS en wordt de foto in een verkeerde verhouding
   geperst. Regels die zelf een hoogte opgeven, zoals de projectbeelden,
   blijven gewoon werken. */
img { max-width: 100%; height: auto; display: block; }

/* Een figure krijgt van de browser zelf 40px marge links en rechts. Zonder
   deze regel wordt elke foto 80px smaller dan zijn kolom en oogt ze te smal
   en te hoog. */
figure { margin: 0; }

::selection { background: rgba(74, 151, 40, .22); }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--groen);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: 20px; top: -70px; z-index: 300;
  background: var(--inkt); color: var(--papier);
  padding: 11px 20px; font-weight: 600; text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* Alleen zichtbaar voor schermlezers */
.enkel-lezer {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ============================================================
   02. RASTER
   Alles op de site lijnt op deze twee kolommen. Dat is wat de
   pagina samenhang geeft: links het nummer en het label, rechts
   de inhoud, op elke sectie van elke pagina opnieuw.
   ============================================================ */

.raster {
  width: 100%;
  max-width: var(--raster);
  margin: 0 auto;
  padding: 0 var(--marge);
}

.sectie {
  padding: 100px 0;
  border-top: 1px solid var(--lijn);
  position: relative;
}
.sectie:first-of-type { border-top: 0; }
.sectie-toon { background: var(--papier-2); }

/* De twee kolommen */
.sectie-in {
  display: grid;
  grid-template-columns: var(--kolom) minmax(0, 1fr);
  gap: 0 var(--geul);
  align-items: start;
}

/* De labelkolom blijft staan terwijl de inhoud ernaast doorloopt */
.sectie-kop {
  position: sticky;
  top: calc(var(--kopbalk) + 44px);
}
/* Een kort groen streepje in plaats van een sectienummer. Het markeert de
   start van een sectie zonder dat er cijfers op de site staan. */
.sectie-kop::before {
  content: "";
  display: block;
  width: 36px; height: 2px;
  background: var(--groen);
  margin: 0 0 18px;
}
.sectie-kop h2,
.sectie-kop .kop-titel {
  font-size: 1.42rem;
  line-height: 1.16;
  margin: 0;
}
.sectie-noot {
  margin: 12px 0 0;
  color: var(--inkt-zacht);
  font-size: .95rem;
  max-width: 30ch;
}
.sectie-kop .kop-link {
  display: inline-block;
  margin-top: 18px;
  font-family: "Archivo", sans-serif; font-weight: 600; font-size: .9rem;
  color: var(--inkt); text-decoration: none;
  border-bottom: 2px solid var(--groen); padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.sectie-kop .kop-link:hover { color: var(--groen-tekst); }

/* De inhoudskolom */
.sectie-lijf > *:first-child { margin-top: 0; }
.sectie-lijf .voorzet {
  font-size: clamp(1.5rem, 2.9vw, 2.1rem);
  font-family: "Archivo", sans-serif; font-weight: 700;
  letter-spacing: -.022em; line-height: 1.14;
  margin: 0 0 20px; max-width: 24ch;
  text-wrap: balance;
}
.sectie-lijf .inleiding {
  color: var(--inkt-zacht); font-size: 1.06rem;
  max-width: 60ch; margin: 0 0 40px;
}


/* ============================================================
   03. TYPOGRAFIE
   ============================================================ */

h1, h2, h3, h4 {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
  /* Geen hyphens: auto hier. Dat brak woorden als "Elektriciteitswerken" en
     "Zwembadwarmtepomp" middenin met een streepje, ook wanneer het niet
     nodig was. overflow-wrap zorgt nog altijd dat een heel lang woord nooit
     buiten zijn kolom loopt. */
  overflow-wrap: break-word;
}

/* Ook lange e-mailadressen en links mogen nooit buiten hun kolom lopen */
p, li, dd, td, th, blockquote { overflow-wrap: break-word; }

a { color: var(--groen-tekst); }

.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .73rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.scheider { color: var(--lijn-3); padding: 0 .4em; }
.klein { font-size: .82em; color: var(--inkt-zacht); font-weight: 400; }

/* Opsomming met een streepje in het groen */
.streeplijst {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 9px;
}
.streeplijst li { position: relative; padding-left: 20px; }
.streeplijst li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 10px; height: 1px; background: var(--groen);
}


/* ============================================================
   04. KNOPPEN
   ============================================================ */

.knop {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Archivo", sans-serif;
  font-weight: 600; font-size: .93rem;
  padding: 13px 24px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease,
              border-color .2s ease, transform .2s var(--soepel);
}
.knop svg { flex-shrink: 0; }
.knop-vol   { background: var(--inkt); color: var(--papier); }
.knop-vol:hover  { background: var(--groen); color: #0c1408; transform: translateY(-2px); }
.knop-lijn  { border-color: var(--lijn-2); color: var(--inkt); background: transparent; }
.knop-lijn:hover { border-color: var(--inkt); background: rgba(23, 31, 37, .05); transform: translateY(-2px); }
.knop-licht { background: var(--papier); color: var(--inkt); }
.knop-licht:hover { background: var(--groen-fel); color: #0c1408; transform: translateY(-2px); }
.knop-om    { border-color: var(--lijn-om-2); color: var(--papier); background: transparent; }
.knop-om:hover { border-color: var(--papier); background: rgba(247, 249, 246, .08); transform: translateY(-2px); }

/* Tekstlink met pijl */
.pijllink {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Archivo", sans-serif; font-weight: 600; font-size: .93rem;
  color: var(--inkt); text-decoration: none;
  transition: color .2s ease, gap .2s var(--soepel);
}
.pijllink svg { transition: transform .25s var(--soepel); }
.pijllink:hover { color: var(--groen-tekst); gap: 12px; }


/* ============================================================
   05. KOPBALK EN NAVIGATIE
   ============================================================ */

/* Smalle gegevensbalk bovenaan: leest als een gevestigd bedrijf */
.gegevensbalk {
  background: var(--inkt);
  color: rgba(247, 249, 246, .62);
  font-size: .82rem;
}
.gegevensbalk-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 38px;
}
.gegevensbalk a {
  color: rgba(247, 249, 246, .82); text-decoration: none;
  transition: color .2s ease;
}
.gegevensbalk a:hover { color: var(--groen-fel); }
.gegevens-rechts { display: flex; align-items: center; gap: 26px; }
.gegevens-rechts span { display: inline-flex; align-items: center; gap: 7px; }
.gegevens-rechts svg { opacity: .55; }

.kopbalk {
  position: sticky; top: 0; z-index: 90;
  background: rgba(237, 240, 236, .93);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lijn);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.kopbalk.gescrold {
  border-color: var(--lijn-2);
  box-shadow: 0 10px 34px rgba(23, 31, 37, .07);
}
.kopbalk-in {
  display: flex; align-items: center; gap: 30px;
  min-height: var(--kopbalk);
}
.merk { flex-shrink: 0; display: block; }
.merk img { height: 44px; width: auto; }

.hoofdnav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.hoofdnav a {
  position: relative;
  font-family: "Archivo", sans-serif;
  font-size: .92rem; font-weight: 600;
  color: var(--inkt-zacht); text-decoration: none;
  padding: 7px 0;
  transition: color .2s ease;
}
.hoofdnav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--groen);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--soepel);
}
.hoofdnav a:hover { color: var(--inkt); }
.hoofdnav a:hover::after { transform: scaleX(1); }
.hoofdnav a[aria-current="page"] { color: var(--inkt); }
.hoofdnav a[aria-current="page"]::after { transform: scaleX(1); }

.kop-acties { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.belknop {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  color: var(--inkt); border: 1.5px solid var(--lijn-2);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.belknop:hover { background: var(--inkt); border-color: var(--inkt); color: var(--papier); }

.menuknop {
  display: none;
  width: 42px; height: 42px;
  background: none; border: 1.5px solid var(--lijn-2); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.menuknop span {
  display: block; width: 17px; height: 1.5px; background: var(--inkt);
  transition: transform .25s var(--soepel), opacity .2s ease;
}
.menuknop[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menuknop[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.voortgang {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  width: var(--voortgang, 0%); background: var(--groen);
}


/* ============================================================
   06. PAGINAKOP (elke subpagina)
   ============================================================ */

.paginakop {
  padding: 62px 0 58px;
  border-bottom: 1px solid var(--lijn);
  background: var(--papier-2);
}
.paginakop-in {
  display: grid;
  grid-template-columns: var(--kolom) minmax(0, 1fr);
  gap: 0 var(--geul);
  align-items: end;
}
.kruimels {
  display: flex; align-items: center; flex-wrap: wrap;
  margin: 0 0 auto; color: var(--inkt-licht);
}
.kruimels a { color: var(--inkt-zacht); text-decoration: none; }
.kruimels a:hover { color: var(--groen-tekst); }
/* Zelfde groene markering als bij een sectie, onder het kruimelpad */
.paginakop-links::after {
  content: "";
  display: block;
  width: 36px; height: 2px;
  background: var(--groen);
}
.paginakop h1 {
  /* De ondergrens is zo gekozen dat "zwembadwarmtepomp" op een gsm nog op
     één regel past en dus niet afgekapt wordt. */
  font-size: clamp(1.72rem, 4.6vw, 3.3rem);
  font-weight: 800;
  margin: 0;
}
.paginakop-inleiding {
  color: var(--inkt-zacht); font-size: 1.08rem;
  max-width: 58ch; margin: 18px 0 0;
}
.paginakop-links { display: grid; gap: 22px; }


/* ============================================================
   07. HERO (startpagina)
   ============================================================ */

.hero { padding: 74px 0 78px; overflow: hidden; }
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 60px; align-items: center;
}
.hero-merk {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 22px;
  font-family: "IBM Plex Mono", monospace;
  font-size: .73rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--groen-tekst);
}
.hero-merk::before {
  content: ""; width: 34px; height: 1px; background: var(--groen);
  flex-shrink: 0;
}
/* De titel bestaat uit een korte en een lange helft. Op dezelfde maat geeft
   dat altijd een korte en een brede regel, hoe je ook afbreekt. Door de
   tweede helft kleiner te zetten worden beide regels ongeveer even breed en
   oogt de afbreking bedoeld in plaats van toevallig. */
.hero h1 {
  font-size: clamp(1.98rem, 3.9vw, 2.95rem);
  font-weight: 800; line-height: 1.1;
}
.hero h1 .vervolg {
  display: block;
  font-size: .68em;
  font-weight: 700;
  color: var(--inkt-zacht);
  letter-spacing: -.015em;
  margin-top: .2em;
}
.hero-inleiding {
  font-size: 1.12rem; color: var(--inkt-zacht);
  max-width: 48ch; margin: 24px 0 32px;
}
.hero-knoppen { display: flex; gap: 12px; flex-wrap: wrap; }

/* De foto in de hero */
.hero-foto { margin: 0; position: relative; }
.hero-foto > img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--lijn-2);
}
.hero-foto figcaption {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 12px; color: var(--inkt-zacht);
}
/* De technische aanduidingen over de foto zijn verwijderd op vraag van Rik.
   De foto staat er nu onbedekt bij. */


/* ============================================================
   08. KERNGETALLEN EN GEGEVENSBALKEN
   ============================================================ */

/* Lichte strook met vier kerngetallen, gescheiden door hairlines */
.kerngetallen { border-top: 1px solid var(--lijn-2); border-bottom: 1px solid var(--lijn-2); }
.kerngetallen-in {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.kerngetal {
  padding: 26px 0 26px 30px;
  border-left: 1px solid var(--lijn);
}
.kerngetal:first-child { padding-left: 0; border-left: 0; }
.kerngetal dt { color: var(--inkt-licht); margin-bottom: 8px; }
.kerngetal dd {
  margin: 0;
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1.28rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.kerngetal dd .klein { display: block; font-size: .78rem; margin-top: 3px; letter-spacing: 0; }

/* Donkere strook met beloftes */
.beloftebalk { background: var(--inkt); color: var(--papier); }
.beloftebalk-in {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding: 26px 0;
  font-size: .93rem;
}
.beloftebalk-in > span { display: flex; gap: 11px; align-items: baseline; }
.beloftebalk-in b { color: var(--groen-fel); flex-shrink: 0; }


/* ============================================================
   09. ZO WERKT HET (de twee animaties)

   Eén klok stuurt beide animaties aan, zodat ze hetzelfde
   verhaal vertellen: laadt de batterij op, dan lopen de
   lichtpuntjes van de zon naar de batterij. Ontlaadt ze, dan
   lopen ze van de batterij naar de woning.
   ============================================================ */

.stroom {
  border: 1px solid var(--lijn-2);
  background: var(--wit);
  padding: 34px 32px 30px;
}

/* --- De rij met zon, batterij en woning --- */
.stroom-rij {
  display: flex; align-items: flex-start;
  gap: 0;
  margin-bottom: 32px;
}
.knooppunt {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; flex-shrink: 0;
  width: 128px;
}
.knoop-icoon {
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--lijn-2);
  background: var(--papier);
  color: var(--inkt-zacht);
  transition: color .4s ease, border-color .4s ease, background .4s ease;
}
.knooppunt b {
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: .97rem;
  line-height: 1.2;
}
.knoop-sub { color: var(--inkt-licht); }

/* Het knooppunt dat op dit moment aan de beurt is, licht op */
.knooppunt.aan .knoop-icoon {
  color: var(--groen-tekst);
  border-color: var(--groen);
  background: var(--groen-waas);
}

/* --- De leidingen met de lopende lichtpuntjes --- */
.leiding {
  position: relative;
  flex: 1; min-width: 40px;
  height: 2px;
  margin-top: 28px;   /* zodat de lijn op het midden van het icoon uitkomt */
  background: var(--lijn);
  transition: background .4s ease;
}
.leiding.actief { background: rgba(74, 151, 40, .28); }
.puls {
  position: absolute; top: 50%; left: 0;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--groen-fel);
  box-shadow: 0 0 0 3px rgba(92, 181, 49, .22);
  opacity: 0;
  animation: puls-loop 1.9s linear infinite;
  animation-play-state: paused;
}
.puls:nth-of-type(2) { animation-delay: .63s; }
.puls:nth-of-type(3) { animation-delay: 1.26s; }
.leiding.actief .puls { animation-play-state: running; }
@keyframes puls-loop {
  0%   { left: 0;    opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
/* Op een smal scherm staan zon, batterij en woning onder elkaar en lopen
   de lichtpuntjes dus van boven naar onder in plaats van van links naar rechts. */
@keyframes puls-loop-staand {
  0%   { top: 0;    opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* --- De batterijkaart die laadt en ontlaadt --- */
.accu { border-top: 1px solid var(--lijn); padding-top: 24px; }
.accu-kop {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}
.accu-kop .accu-titel { color: var(--inkt-licht); }
.accu-status { color: var(--groen-tekst); }
.accu-balk {
  height: 14px;
  background: var(--papier-3);
  border: 1px solid var(--lijn-2);
  overflow: hidden;
}
.accu-balk span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--groen), var(--groen-fel));
}
.accu-voet {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-top: 12px;
}
.accu-pct {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.55rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.accu-noot { color: var(--inkt-zacht); text-align: right; }


/* ============================================================
   10. WEGWIJZER
   Alles op de site in één oogopslag, met een klik per pagina.
   De hairlines komen uit de 1px-tussenruimte op een donkere
   ondergrond, niet uit randen per kaart.
   ============================================================ */

.wegwijzer {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--lijn-2);
  border: 1px solid var(--lijn-2);
}
.wijzer {
  position: relative;
  background: var(--papier);
  padding: 26px 24px 22px;
  display: flex; flex-direction: column; gap: 9px;
  text-decoration: none; color: inherit;
  transition: background .25s ease;
}
.sectie-toon .wijzer { background: var(--papier-2); }
.wijzer::before {
  content: ""; position: absolute; left: 0; top: 0;
  height: 2px; width: 0; background: var(--groen);
  transition: width .38s var(--soepel);
}
.wijzer:hover, .wijzer:focus-visible { background: var(--wit); }
.wijzer:hover::before, .wijzer:focus-visible::before { width: 100%; }
.wijzer h3 { font-size: 1.14rem; transition: color .2s ease; }
.wijzer:hover h3 { color: var(--groen-tekst); }
.wijzer p {
  margin: 0; color: var(--inkt-zacht); font-size: .94rem;
  flex-grow: 1;
}
.wijzer-voet {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 6px; padding-top: 12px;
  border-top: 1px solid var(--lijn);
  color: var(--inkt-licht);
  transition: color .2s ease;
}
.wijzer-voet svg { transition: transform .25s var(--soepel); }
.wijzer:hover .wijzer-voet { color: var(--groen-tekst); }
.wijzer:hover .wijzer-voet svg { transform: translateX(4px); }


/* ============================================================
   11. DIENSTEN
   ============================================================ */

/* Compacte weergave op de startpagina */
.dienstblokken { display: grid; gap: 0; border-top: 1px solid var(--lijn-2); }
.dienstblok {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 0 22px; align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid var(--lijn);
  text-decoration: none; color: inherit;
  transition: background .25s ease, padding .25s var(--soepel);
}
.dienstblok:hover { background: rgba(23, 31, 37, .035); padding-left: 12px; padding-right: 12px; }
.dienstblok-icoon { color: var(--groen-tekst); padding-top: 2px; }
.dienstblok h3 { font-size: 1.24rem; margin: 0 0 8px; }
.dienstblok p { margin: 0; color: var(--inkt-zacht); font-size: .98rem; max-width: 56ch; }
.dienstblok-prijs {
  font-family: "IBM Plex Mono", monospace; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--inkt-licht); white-space: nowrap; padding-top: 5px;
  display: flex; align-items: center; gap: 12px;
}
.dienstblok-prijs svg { transition: transform .25s var(--soepel); }
.dienstblok:hover .dienstblok-prijs { color: var(--groen-tekst); }
.dienstblok:hover .dienstblok-prijs svg { transform: translateX(4px); }

/* Uitgebreide weergave op de dienstenpagina */
.dienstdetail {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 48px; align-items: start;
  padding: 54px 0;
  border-bottom: 1px solid var(--lijn);
}
.dienstdetail:first-of-type { padding-top: 0; }
.dienstdetail:last-of-type { border-bottom: 0; padding-bottom: 0; }
.dienstdetail h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 6px; }
.dienstdetail .dienst-onder { margin: 0 0 20px; color: var(--groen-tekst); }
.dienstdetail p { color: var(--inkt-zacht); margin: 0 0 16px; }
.dienstdetail .streeplijst { margin: 22px 0 26px; }
.dienstkaart {
  background: var(--wit);
  border: 1px solid var(--lijn-2);
  padding: 26px;
}
.dienstkaart-kop {
  margin: 0 0 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--lijn);
  color: var(--inkt-licht);
}
.dienstkaart dl { margin: 0; display: grid; gap: 0; }
.dienstkaart dl > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; padding: 11px 0;
  border-bottom: 1px dashed var(--lijn);
}
.dienstkaart dl > div:last-child { border-bottom: 0; }
.dienstkaart dt { color: var(--inkt-zacht); font-size: .93rem; }
.dienstkaart dd {
  margin: 0; font-family: "Archivo", sans-serif; font-weight: 600;
  font-size: .95rem; text-align: right;
}
.dienstkaart .knop { width: 100%; justify-content: center; margin-top: 20px; }


/* ============================================================
   12. REALISATIES
   ============================================================ */

.werkgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 30px; }
.werkgrid.drie { grid-template-columns: repeat(3, 1fr); }

.werkkaart { display: block; text-decoration: none; color: inherit; }
.werkbeeld {
  position: relative; overflow: hidden;
  border: 1px solid var(--lijn-2); background: var(--papier-3);
}
.werkbeeld img {
  width: 100%; height: 300px; object-fit: cover;
  transition: transform .8s var(--soepel);
}
.werkgrid.drie .werkbeeld img { height: 250px; }
.werkkaart:hover .werkbeeld img,
.werkkaart:focus-visible .werkbeeld img { transform: scale(1.04); }
.werkbeeld::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(18, 24, 29, .38));
  opacity: 0; transition: opacity .35s ease;
}
.werkkaart:hover .werkbeeld::after { opacity: 1; }
.werk-merk {
  position: absolute; left: 0; top: 0; z-index: 2;
  background: var(--papier); color: var(--inkt-zacht);
  padding: 6px 11px;
  border-right: 1px solid var(--lijn-2);
  border-bottom: 1px solid var(--lijn-2);
}
/* De titel krijgt de volle breedte van de kaart. Deelde hij die rij met de
   verslaglink, dan bleef er voor een lang woord als "Zwembadwarmtepomp" te
   weinig plaats en werd het middenin afgekapt. */
.werkvoet {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 16px; align-items: baseline;
  padding-top: 15px;
}
.werkvoet h3 {
  grid-column: 1 / -1; grid-row: 1;
  font-size: 1.12rem; transition: color .2s ease;
}
.werkvoet .werk-spec {
  grid-column: 1; grid-row: 2;
  margin: 0; color: var(--inkt-zacht);
}
.werkvoet .werk-lees {
  grid-column: 2; grid-row: 2; justify-self: end;
  color: var(--inkt-licht); display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
  transition: color .2s ease, gap .2s var(--soepel);
}
.werkkaart:hover .werkvoet h3 { color: var(--groen-tekst); }
.werkkaart:hover .werk-lees { color: var(--groen-tekst); gap: 12px; }


/* ============================================================
   13. PROJECTPAGINA
   ============================================================ */

.project-beeld {
  border-bottom: 1px solid var(--lijn);
  background: var(--papier-2);
}
.project-beeld img {
  width: 100%; height: clamp(300px, 52vh, 560px); object-fit: cover;
  border-left: 1px solid var(--lijn); border-right: 1px solid var(--lijn);
}
.project-feiten {
  border: 1px solid var(--lijn-2);
  background: var(--wit);
  padding: 24px 26px;
  margin: 0 0 34px;
}
.project-feiten dl { margin: 0; display: grid; gap: 0; }
.project-feiten dl > div {
  display: grid; grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px; padding: 10px 0;
  border-bottom: 1px dashed var(--lijn);
}
.project-feiten dl > div:last-child { border-bottom: 0; }
.project-feiten dt { color: var(--inkt-licht); }
.project-feiten dd {
  margin: 0; font-size: .96rem;
  font-family: "Archivo", sans-serif; font-weight: 600;
}
.project-tekst p { color: var(--inkt-zacht); margin: 0 0 18px; }
.project-tekst h3 {
  font-size: 1.2rem; margin: 34px 0 14px;
  padding-top: 22px; border-top: 1px solid var(--lijn);
}
.project-galerij { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 30px 0 0; }
.project-galerij figure { margin: 0; }
.project-galerij img {
  width: 100%; height: 240px; object-fit: cover;
  border: 1px solid var(--lijn-2);
}
.project-galerij figcaption { margin-top: 9px; color: var(--inkt-zacht); }

/* Vorige en volgende project */
.projectvoet {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--lijn-2);
  border-top: 1px solid var(--lijn-2); border-bottom: 1px solid var(--lijn-2);
}
.projectvoet a {
  background: var(--papier); padding: 26px 30px;
  text-decoration: none; color: inherit;
  transition: background .25s ease;
}
.projectvoet a:hover { background: var(--papier-2); }
.projectvoet a.naar-rechts { text-align: right; }
.projectvoet .pv-label { display: block; color: var(--inkt-licht); margin-bottom: 7px; }
.projectvoet .pv-titel { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1.05rem; }


/* ============================================================
   14. PRIJZEN
   ============================================================ */

/* Twee prijskaarten naast elkaar, zoals in ontwerp 1 */
.prijskaarten {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 26px; align-items: stretch;
}
.prijskaart {
  position: relative;
  background: var(--wit);
  border: 1px solid var(--lijn-2);
  padding: 32px 30px 30px;
  display: flex; flex-direction: column;
  transition: border-color .25s ease, box-shadow .25s ease,
              transform .25s var(--soepel);
}
.prijskaart:hover {
  border-color: var(--groen);
  box-shadow: 0 14px 34px rgba(23, 31, 37, .09);
  transform: translateY(-3px);
}
/* De voordeligste kaart krijgt een groene rand en een balkje bovenaan */
.prijskaart-uitgelicht { border-color: var(--groen); }
.prijskaart-uitgelicht::before {
  content: ""; position: absolute;
  left: -1px; right: -1px; top: -1px; height: 3px;
  background: var(--groen);
}
.prijsmerk {
  align-self: flex-start;
  background: var(--groen); color: #0c1408;
  padding: 4px 10px; font-weight: 600;
  margin: 0 0 14px;
}
.prijskaart h3 { font-size: 1.32rem; margin: 0 0 5px; }
.prijskaart-onder { margin: 0 0 22px; color: var(--inkt-zacht); font-size: .93rem; }

.prijsbedrag { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.prijsbedrag .waarde {
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 2.6rem; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.prijsbedrag .btw { color: var(--inkt-zacht); font-size: .95rem; font-weight: 600; }
.prijs-incl {
  margin: 9px 0 0; color: var(--inkt-zacht); font-size: .93rem;
  font-variant-numeric: tabular-nums;
}
.prijs-besparing {
  margin: 15px 0 0; padding: 10px 14px;
  background: var(--groen-waas);
  border-left: 2px solid var(--groen);
  color: var(--groen-tekst); font-size: .91rem; font-weight: 600;
}

.vinklijst {
  list-style: none; margin: 24px 0 28px; padding: 0;
  display: grid; gap: 11px;
}
.vinklijst li { display: flex; align-items: flex-start; gap: 11px; font-size: .95rem; }
.vinklijst svg { flex-shrink: 0; color: var(--groen); margin-top: 3px; }
.prijskaart .knop { margin-top: auto; justify-content: center; }

.rechts { text-align: right; }

.voorwaarden { margin: 42px 0 0; padding-top: 26px; border-top: 2px solid var(--inkt); }
.voorwaarden h3 { color: var(--inkt-licht); font-weight: 500; margin: 0 0 18px; }
.voorwaarden ol {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.voorwaarden li { color: var(--inkt-zacht); font-size: .95rem; }
.voorwaarden li::before {
  content: "";
  display: block; width: 24px; height: 2px;
  margin-bottom: 12px;
  background: var(--groen);
}
.voorwaarden strong { color: var(--inkt); display: block; margin-bottom: 4px; font-weight: 600; }

/* Veelgestelde vragen */
.vragen { border-top: 1px solid var(--lijn-2); }
.vraag { border-bottom: 1px solid var(--lijn); }
.vraag summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: "Archivo", sans-serif; font-weight: 600; font-size: 1.06rem;
  transition: color .2s ease;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary:hover { color: var(--groen-tekst); }
.vraag summary .teken {
  position: relative; width: 13px; height: 13px; flex-shrink: 0;
}
.vraag summary .teken::before,
.vraag summary .teken::after {
  content: ""; position: absolute; background: var(--inkt-zacht);
  transition: transform .28s var(--soepel), background .2s ease;
}
.vraag summary .teken::before { left: 0; top: 6px; width: 13px; height: 1.5px; }
.vraag summary .teken::after  { left: 6px; top: 0; width: 1.5px; height: 13px; }
.vraag[open] summary .teken::after { transform: rotate(90deg); }
.vraag[open] summary { color: var(--groen-tekst); }
.vraag-antwoord { padding: 0 0 24px; color: var(--inkt-zacht); max-width: 66ch; }
.vraag-antwoord p { margin: 0 0 12px; }
.vraag-antwoord p:last-child { margin-bottom: 0; }


/* ============================================================
   15. AANPAK
   ============================================================ */

.tijdlijn {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  border-left: 1px solid var(--lijn-2);
}
.tijdlijn::after {
  content: ""; position: absolute; left: -1px; top: 0;
  width: 2px; height: var(--vulling, 0%);
  background: var(--groen);
  transition: height .25s linear;
}
.tijdlijn li { padding: 26px 0 30px 36px; position: relative; }
.tijdlijn li:first-child { padding-top: 0; }
.tijdlijn li::before {
  content: ""; position: absolute; left: -5px; top: 32px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--papier); border: 2px solid var(--lijn-2);
  transition: background .3s ease, border-color .3s ease;
}
.tijdlijn li:first-child::before { top: 6px; }
.tijdlijn li.bereikt::before { background: var(--groen); border-color: var(--groen); }
.sectie-toon .tijdlijn li::before { background: var(--papier-2); }
.tijdlijn .stap { display: block; color: var(--inkt-licht); margin-bottom: 9px; }
.tijdlijn h3 { font-size: 1.3rem; margin: 0 0 10px; }
.tijdlijn p { margin: 0; color: var(--inkt-zacht); max-width: 62ch; }
.tijdlijn .stap-krijgt {
  margin: 16px 0 0; padding: 14px 18px;
  background: var(--wit); border-left: 2px solid var(--groen);
  font-size: .94rem;
}
.tijdlijn .stap-krijgt b { font-family: "Archivo", sans-serif; }


/* ============================================================
   16. REVIEWS
   ============================================================ */

.reviewbalk {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 0 0 26px; margin: 0 0 32px;
  border-bottom: 1px solid var(--lijn-2);
}
.reviewscore { display: flex; align-items: center; gap: 16px; }
.reviewscore .cijfer {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 2.1rem;
  letter-spacing: -.03em; line-height: 1;
}
.sterren { display: flex; gap: 3px; color: var(--groen); }
.reviewscore .telling { display: block; color: var(--inkt-zacht); font-size: .9rem; margin-top: 4px; }

.reviewgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review {
  background: var(--wit);
  border: 1px solid var(--lijn-2);
  padding: 26px;
  display: flex; flex-direction: column; gap: 14px;
}
.review .sterren { margin-bottom: 2px; }
.review blockquote { margin: 0; font-size: 1rem; color: var(--inkt); }
.review figcaption {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--lijn);
  color: var(--inkt-zacht);
}
.review figcaption b {
  display: block; color: var(--inkt);
  font-family: "Archivo", sans-serif; font-size: .96rem;
}
/* Plaatshouder: valt op zodat je hem niet per ongeluk laat staan */
.review.plaatshouder { border-style: dashed; background: transparent; }
.review.plaatshouder blockquote { color: var(--inkt-licht); font-style: italic; }


/* ============================================================
   17. OVER RIK
   ============================================================ */

.over-in {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 52px; align-items: start;
}
/* De foto wordt volledig getoond, er wordt niets weggesneden. Daarom geen
   aspect-ratio en geen object-fit: de eigen verhouding van het bestand
   bepaalt de hoogte. De kolom is breder gemaakt zodat het geen smalle
   strook wordt. */
.over-beeld { max-width: 440px; }
.over-beeld img {
  width: 100%; height: auto;
  border: 1px solid var(--lijn-2);
}
.over-beeld figcaption { margin-top: 11px; color: var(--inkt-zacht); }
.over-tekst p { color: var(--inkt-zacht); margin: 0 0 18px; max-width: 64ch; }
.over-tekst p.aanhef {
  font-size: 1.14rem; color: var(--inkt);
  font-family: "Archivo", sans-serif; font-weight: 500;
  line-height: 1.45; letter-spacing: -.01em;
}
.kwalificaties {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin: 34px 0 0;
  border-top: 1px solid var(--lijn-2);
}
.kwalificaties > div { padding: 20px 0 0 24px; border-left: 1px solid var(--lijn); }
.kwalificaties > div:first-child { padding-left: 0; border-left: 0; }
.kwalificaties dt { color: var(--inkt-licht); margin-bottom: 6px; }
.kwalificaties dd {
  margin: 0; font-family: "Archivo", sans-serif; font-size: .98rem;
  font-weight: 600; text-transform: none; letter-spacing: 0;
}


/* ============================================================
   18. CONTACT EN FORMULIER
   ============================================================ */

.contact-in {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 56px; align-items: start;
}
.contactlijst { list-style: none; margin: 0; padding: 0; }
.contactlijst li {
  display: grid; grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px; padding: 16px 0;
  border-bottom: 1px solid var(--lijn);
  align-items: baseline;
}
.contactlijst li:first-child { border-top: 1px solid var(--lijn-2); }
/* Alleen de labels links blijven in mono-hoofdletters staan. De waarden en
   de toelichtingen zetten dat terug, anders komt je e-mailadres in kapitalen. */
.contactlijst .cl-label { color: var(--inkt-licht); }
.contactlijst .cl-waarde,
.contactlijst a {
  color: var(--inkt); text-decoration: none;
  font-family: "Archivo", sans-serif; font-weight: 600; font-size: 1rem;
  text-transform: none; letter-spacing: 0;
}
.contactlijst a:hover { color: var(--groen-tekst); }
.contactlijst .cl-noot {
  grid-column: 2; margin: 3px 0 0;
  font-family: "Source Sans 3", sans-serif; font-weight: 400;
  font-size: .89rem; color: var(--inkt-zacht);
  text-transform: none; letter-spacing: 0;
}

.werkbon {
  background: var(--wit); color: var(--inkt);
  border: 1px solid var(--lijn-2);
  padding: 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.werkbon-kop {
  grid-column: 1 / -1; margin: 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  color: var(--inkt-licht);
  padding-bottom: 16px; border-bottom: 1px solid var(--lijn-2);
}
.veld { display: grid; gap: 7px; min-width: 0; }
.veld.breed, .werkbon .breed { grid-column: 1 / -1; }
.werkbon label { color: var(--inkt-zacht); }
/* min-width:0 en width:100% houden de velden binnen hun kolom. Zonder dat
   dwingt de ingebouwde minimumbreedte van een invoerveld het raster open. */
.werkbon input, .werkbon select, .werkbon textarea {
  font: inherit; color: var(--inkt);
  background: var(--papier-2);
  border: 1px solid var(--lijn-2);
  padding: 12px 14px;
  width: 100%; min-width: 0;
  transition: border-color .15s ease, background .15s ease;
}
.werkbon input:focus, .werkbon select:focus, .werkbon textarea:focus {
  outline: none; border-color: var(--groen); background: #fff;
}
.werkbon select:invalid { color: var(--inkt-licht); }
.werkbon .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.werkbon button { justify-content: center; }
.formstatus { grid-column: 1 / -1; margin: 0; font-weight: 600; text-align: center; }
.formstatus:empty { display: none; }
.formstatus.gelukt  { color: var(--groen-tekst); }
.formstatus.mislukt { color: #a33a25; }
.formnoot {
  grid-column: 1 / -1; margin: 0; text-align: center;
  font-size: .85rem; color: var(--inkt-zacht);
}


/* ============================================================
   19. OPROEPSTROOK
   ============================================================ */

.oproep { background: var(--inkt); color: var(--papier); }
.oproep-in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px; align-items: center;
  padding: 62px 0;
}
.oproep h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); max-width: 20ch; }
.oproep p { margin: 14px 0 0; color: rgba(247, 249, 246, .66); max-width: 52ch; }
.oproep-knoppen { display: flex; gap: 12px; flex-wrap: wrap; }


/* ============================================================
   20. VOETTEKST
   ============================================================ */

.voet { background: var(--inkt-2); color: rgba(247, 249, 246, .64); padding: 58px 0 26px; }
.voet-in {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--lijn-om);
}
.voet-logo { height: 44px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.voet-merk p { margin: 20px 0 0; font-size: .95rem; max-width: 34ch; }
.voet h3 {
  font-family: "IBM Plex Mono", monospace; font-weight: 500;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(247, 249, 246, .42);
  margin: 0 0 18px;
}
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.voet a { color: rgba(247, 249, 246, .78); text-decoration: none; font-size: .95rem; }
.voet a:hover { color: var(--groen-fel); }
.voet-regel {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px;
  padding-top: 22px; margin: 0;
  color: rgba(247, 249, 246, .4);
}
.voet-regel span { display: inline-flex; align-items: center; }


/* ============================================================
   21. ZWEVENDE KNOPPEN
   ============================================================ */

.whatsapp {
  position: fixed; right: 22px; bottom: 22px; z-index: 95;
  width: 52px; height: 52px;
  background: var(--inkt); color: var(--papier);
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--inkt);
  transition: background .2s ease, color .2s ease, transform .2s var(--soepel);
}
.whatsapp:hover { background: var(--groen); color: #0c1408; transform: translateY(-3px); }


/* ============================================================
   22. BEWEGING
   ============================================================ */

.onthul {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--soepel), transform .7s var(--soepel);
  transition-delay: var(--traag, 0s);
}
.onthul.zichtbaar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .onthul { opacity: 1; transform: none; transition: none; }
  .tijdlijn::after { transition: none; }
  /* De lichtpuntjes verdwijnen; het script zet de batterij dan op een
     rustige eindtoestand in plaats van hem te laten lopen. */
  .puls { display: none; }
  .leiding, .leiding.actief { background: var(--lijn); }
  .wijzer::before { transition: none; }
  * { scroll-behavior: auto !important; }
}


/* ============================================================
   23. RESPONSIEF
   ============================================================ */

/* Vanaf hier past de labelkolom niet meer comfortabel naast de inhoud */
@media (max-width: 1080px) {
  /* De labelkolom blijft breed genoeg voor een woord als
     "Elektriciteitswerken", anders wordt dat middenin afgekapt. */
  :root { --kolom: 220px; --geul: 40px; --marge: 26px; }
  .sectie-kop h2, .sectie-kop .kop-titel { font-size: 1.26rem; }
  .voet-in { grid-template-columns: 1fr 1fr; gap: 38px; }
  /* Het formulier onder de gegevens, zodat je e-mailadres op één regel past */
  .contact-in { grid-template-columns: minmax(0, 1fr); }
}

/* Menu past niet meer naast het logo */
@media (max-width: 940px) {
  .menuknop { display: flex; }
  .hoofdnav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0;
    background: var(--papier);
    border-bottom: 1px solid var(--lijn-2);
    box-shadow: 0 16px 34px rgba(23, 31, 37, .12);
    display: none;
  }
  .hoofdnav.open { display: flex; }
  .hoofdnav a {
    padding: 16px var(--marge);
    border-top: 1px solid var(--lijn);
    font-size: 1rem;
  }
  .hoofdnav a::after { left: var(--marge); right: auto; width: 24px; bottom: 11px; }
  .gegevens-rechts { gap: 16px; }
  .gegevensbalk-in > span:first-child { display: none; }
  .gegevensbalk-in { justify-content: flex-end; }
}

@media (max-width: 900px) {
  /* Het tweekolommenraster wordt één kolom, maar de opbouw blijft dezelfde:
     eerst het nummer en het label, dan de inhoud eronder. */
  .sectie-in, .paginakop-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .sectie-kop { position: static; }
  .sectie-kop .sectie-noot { max-width: 52ch; }
  .paginakop-in { gap: 22px; }
  .kruimels { margin-bottom: 4px; }

  .hero-in { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 48px 0 56px; }
  .over-in, .contact-in, .dienstdetail { grid-template-columns: 1fr; gap: 34px; }
  .over-beeld { max-width: 360px; }
  .oproep-in { grid-template-columns: 1fr; gap: 26px; padding: 48px 0; }
  .voorwaarden ol { grid-template-columns: 1fr; gap: 20px; }
  .reviewgrid { grid-template-columns: 1fr; }
  .wegwijzer { grid-template-columns: repeat(2, 1fr); }
  .kerngetallen-in { grid-template-columns: repeat(2, 1fr); }
  .kerngetal:nth-child(3) { padding-left: 0; border-left: 0; }
  .kerngetal:nth-child(3), .kerngetal:nth-child(4) { border-top: 1px solid var(--lijn); }
  .beloftebalk-in { grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
}

/* Op de allersmalste schermen passen woorden als "buitenstopcontact" echt
   niet meer op één regel. Daar is een net afbreekstreepje beter dan een
   woord dat middenin wordt afgekapt. Boven deze breedte wordt er nergens
   afgebroken. */
@media (max-width: 360px) {
  h1, h2, h3, h4 { hyphens: auto; }
}

/* Zon, batterij en woning passen niet meer naast elkaar: onder elkaar zetten */
@media (max-width: 640px) {
  /* Twee prijskaarten naast elkaar worden hier te smal om te lezen */
  .prijskaarten { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

@media (max-width: 620px) {
  .stroom { padding: 24px 20px 22px; }
  .stroom-rij { flex-direction: column; align-items: stretch; gap: 0; }
  .knooppunt {
    width: auto; flex-direction: row; align-items: center;
    gap: 15px; text-align: left;
  }
  .knooppunt b { flex-shrink: 0; }
  .knoop-sub { color: var(--inkt-licht); }
  .leiding {
    width: 2px; height: 32px; flex: none;
    margin: 4px 0 4px 28px;
  }
  .puls {
    top: 0; left: 50%;
    animation-name: puls-loop-staand;
  }
  .accu-voet { flex-direction: column; align-items: flex-start; gap: 6px; }
  .accu-noot { text-align: left; }
}

/* Op een smalle kaart krijgen de specificatie en de verslaglink elk hun
   eigen regel, zodat een woord als "filterinstallatie" niet gekapt wordt. */
@media (max-width: 480px) {
  .werkvoet { grid-template-columns: minmax(0, 1fr); }
  .werkvoet .werk-spec { grid-column: 1; grid-row: 2; }
  .werkvoet .werk-lees { grid-column: 1; grid-row: 3; justify-self: start; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  :root { --marge: 20px; }

  /* Grotere aanraakvlakken. Een tekstlink van 19px hoog is met een vinger
     lastig te raken; met wat lucht eromheen wordt dat een stuk aangenamer. */
  .kruimels a { display: inline-block; padding: 7px 0; }
  .kop-link { padding-top: 10px; padding-bottom: 5px; }
  .pijllink { padding: 7px 0; }
  .voet a { display: inline-block; padding: 4px 0; }
  .sectie { padding: 62px 0; }
  .paginakop { padding: 40px 0 38px; }
  .wegwijzer { grid-template-columns: 1fr; }

  .werkgrid, .werkgrid.drie, .project-galerij { grid-template-columns: 1fr; gap: 28px; }
  .werkbeeld img, .werkgrid.drie .werkbeeld img { height: 240px; }
  .werkbon { grid-template-columns: 1fr; padding: 22px; }
  .kwalificaties { grid-template-columns: 1fr; }
  .kwalificaties > div { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--lijn); }
  .kwalificaties > div:first-child { border-top: 0; padding-top: 16px; }
  .contactlijst li { grid-template-columns: 1fr; gap: 3px; }
  .contactlijst .cl-noot { grid-column: 1; }
  .kerngetallen-in { grid-template-columns: 1fr; }
  .kerngetal { padding: 18px 0; border-left: 0; border-top: 1px solid var(--lijn); }
  .kerngetal:first-child { border-top: 0; padding-top: 0; }
  .beloftebalk-in { grid-template-columns: 1fr; gap: 12px; }
  .dienstblok { grid-template-columns: 28px minmax(0, 1fr); gap: 0 16px; }
  .dienstblok-prijs { grid-column: 2; padding-top: 12px; }
  .dienstblok:hover { padding-left: 0; padding-right: 0; }
  .projectvoet { grid-template-columns: 1fr; }
  .projectvoet a.naar-rechts { text-align: left; }
  .merk img { height: 38px; }
  .kop-acties .knop-vol { display: none; }
  .voet-in { grid-template-columns: 1fr; gap: 32px; }
  .prijskaart { padding: 26px 22px 24px; }
  .prijsbedrag .waarde { font-size: 2.3rem; }

  .project-feiten dl > div { grid-template-columns: 1fr; gap: 2px; }
}