/* CGM Projects, look "vuur en vlok".

   Het merk heeft iets wat bijna geen installateur heeft: een vlam en een
   sneeuwvlok in één teken. Deze opmaak is daaromheen gebouwd. Eén ding is de
   herinnering: de woonkamer in de hero die je zelf van zomer naar winter
   schuift. De rest is stil en doet mee via één variabele, het seizoen.

   Het seizoen staat als data-theme op het html-element: zomer of winter,
   gezet door thema-script.php. In de zomerstand zijn de accenten koel, in de
   winterstand warm. Tekstkleuren wisselen niet mee: oranje is nooit een
   tekstkleur (2,8 op wit) en het blauw alleen in de donkere tint. Wat er
   wisselt is grafisch: vlakken, strepen, de knop op navy, de schakelaar.

   Kleuren komen uit tokens.css, gegenereerd door tools/tokens.py; daar staat
   per kleur waar hij vandaan komt en welk contrast hij haalt. Hier staan
   alleen rollen. */
:root {
  /* Het grafische accent van het seizoen. Zomer: blauw, winter: oranje2 (het
     volle oranje haalt op wit als streep net geen 3:1, oranje2 wel). */
  --seizoen-accent: var(--cgm-blauw);
  /* Hetzelfde accent op navy, waar juist het lichte blauw en het volle
     oranje het halen. */
  --seizoen-accent-donker: var(--cgm-blauwlicht);
  /* Een licht vlak in de kleur van het seizoen, met navy tekst erop. */
  --seizoen-zacht: var(--cgm-blauwsoft);
  /* De temperatuurbalk: koud links, warm rechts. Het enige merkteken dat de
     site zelf tekent. In de winterstand draait hij om. */
  --temperatuur: linear-gradient(90deg, var(--cgm-blauw), var(--cgm-oranje));
  /* Lopende tekst op navy, 8,8:1; zie tokens.py. */
  --tekst-op-donker: var(--cgm-tekstopdonker);
}
:root[data-theme="winter"] {
  --seizoen-accent: var(--cgm-oranje2);
  --seizoen-accent-donker: var(--cgm-oranje);
  --seizoen-zacht: var(--cgm-oranjesoft);
  --temperatuur: linear-gradient(90deg, var(--cgm-oranje), var(--cgm-blauw));
}

/* Barlow Condensed voor de koppen, Barlow voor de tekst: één familie in twee
   breedtes. Zelf gehost en gesubset; zie assets/fonts/README.md. */
@font-face { font-family: 'Barlow Condensed'; src: url(/assets/fonts/BarlowCondensed-600.woff2) format("woff2");
             font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(/assets/fonts/BarlowCondensed-700.woff2) format("woff2");
             font-weight: 700; font-display: swap; }
@font-face { font-family: Barlow; src: url(/assets/fonts/Barlow-400.woff2) format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: Barlow; src: url(/assets/fonts/Barlow-600.woff2) format("woff2");
             font-weight: 600; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-text);
  background: var(--color-surface);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-text-accent); text-underline-offset: 3px;
    transition: text-decoration-thickness var(--motion-fast) var(--motion-ease); }
@media (hover: hover) { a:hover { text-decoration-thickness: 2px; } }

.wrap { width: min(100% - var(--space-10), 72rem); margin-inline: auto; }

/* toetsenbordgebruikers eerst */
.skip { position: absolute; left: -9999px; background: var(--color-surface);
        color: var(--color-text); padding: var(--space-3) var(--space-4); z-index: 10; }
.skip:focus { left: var(--space-4); top: var(--space-4); }

/* ------------------------------------------------------------ typografie
   De kop is het karakter van deze look: smal, stevig en groot, zoals een
   typeplaatje. Alles eronder is rustig. Eén familie in twee breedtes; geen
   derde letter. */
h1, h2, h3, h4 { font-family: var(--font-family-kop); text-wrap: balance;
                 margin: 0 0 var(--space-4); }
h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-line);
     font-weight: var(--text-h1-weight); letter-spacing: var(--text-h1-tracking); }
h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-line);
     font-weight: var(--text-h2-weight); letter-spacing: var(--text-h2-tracking); }
h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-line);
     font-weight: var(--text-h3-weight); letter-spacing: var(--text-h3-tracking); }
h4 { font-size: var(--text-h4-size); line-height: var(--text-h4-line);
     font-weight: var(--text-h4-weight); }
p  { margin: 0 0 var(--space-4); }
.lead { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line);
        color: var(--color-text-muted); }
/* Lange Nederlandse samenstellingen breken af op het lang-attribuut. Niet in
   koppen: daar is een streepje storender dan een korte regel. */
.prose p, .prose li, .lead, .blok p, .faq .antwoord, .geruststelling span,
.blok-punten li, .stappenlijst p { hyphens: auto; -webkit-hyphens: auto; }
h1, h2, h3 { hyphens: manual; }

/* De sectiekop draagt de temperatuurbalk: een korte streep van koud naar
   warm, en in de winter andersom. Dat is het terugkerende teken. */
.sectiekop, .faq h2, .cta h2, .formulier-hoofd h2 { position: relative; }
.sectiekop::before, .faq h2::before, .formulier-hoofd h2::before {
  content: ""; display: block; width: 4rem; height: 4px; border-radius: var(--radius-full);
  background: var(--temperatuur); margin-bottom: var(--space-5);
}

/* ------------------------------------------------------------------ kop
   Wit, met de temperatuurbalk als onderrand: de hele breedte, van koud naar
   warm. Geen schaduw en geen blur; de balk is de scheiding. */
.kop { position: relative; background: var(--color-surface); }
.kop::after { content: ""; display: block; height: 3px; background: var(--temperatuur); }
.kop-in { display: flex; align-items: center; justify-content: space-between;
          gap: var(--space-6); padding-block: var(--space-4); }
.merk { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-3);
        text-decoration: none; color: var(--color-text); }
/* Het embleem op hoogte. 48 px: de vlam en de vlok blijven te onderscheiden en
   de kop blijft laag genoeg om de hero ruimte te geven. */
.merk img { height: 48px; width: auto; }
.merk-naam { display: flex; flex-direction: column; line-height: 1.05; }
.merk-naam-hoofd { font-family: var(--font-family); font-weight: 600;
                   font-size: 1.2rem; letter-spacing: 0; color: var(--color-text); }
.merk-naam-payoff { font-size: var(--text-caption-size); color: var(--color-text-muted);
                    letter-spacing: .02em; }

.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav ul { order: 1; display: flex; align-items: center; gap: var(--space-6);
          list-style: none; margin: 0; padding: 0; }
.nav-thema { order: 2; display: flex; align-items: center; padding-left: var(--space-5);
             border-left: 1px solid var(--color-border); }
.nav-thema:has(> .seizoen[hidden]) { display: none; }
.nav ul > li > a:not(.knop) {
  color: var(--color-text); text-decoration: none; font-weight: 600;
  font-size: var(--text-body-sm-size); display: inline-block; padding-block: var(--space-1);
  border-bottom: 2px solid transparent;
  transition: border-color var(--motion-fast) var(--motion-ease);
}
@media (hover: hover) { .nav ul > li > a:not(.knop):hover { border-bottom-color: var(--color-border-strong); } }
.nav ul > li > a:not(.knop)[aria-current="page"] { border-bottom-color: var(--seizoen-accent); }
.nav-schakel { display: none; position: absolute; width: 1px; height: 1px; margin: -1px;
               padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nav-knop { display: none; }
.nav-tekst-dicht { display: none; }

/* ------------------------------------------------- de seizoenschakelaar
   Een baan met een zon en een vlok, en een knop in de kleur van het seizoen
   die eronder schuift. Aan is winter (role="switch"). De naam staat in tekst
   die wordt weggeklipt maar niet verborgen, zodat de knop een naam houdt. */
.seizoen { display: flex; align-items: center; gap: var(--space-2);
           background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
           border-radius: var(--radius-full); }
.seizoen-baan {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 3.5rem; height: 1.9rem; padding: 0 .45rem;
  border-radius: var(--radius-full);
  background: var(--seizoen-zacht); border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: background-color var(--motion-base) var(--motion-ease);
}
.seizoen-baan svg { position: relative; z-index: 1;
                    transition: color var(--motion-base) var(--motion-ease); }
.seizoen-knop {
  position: absolute; top: 2px; left: 2px; width: calc(1.9rem - 6px); height: calc(1.9rem - 6px);
  border-radius: 50%; background: var(--seizoen-accent);
  transition: transform var(--motion-base) var(--motion-ease),
              background-color var(--motion-base) var(--motion-ease);
}
:root[data-theme="winter"] .seizoen-knop { transform: translateX(1.6rem); }
/* Het icoon dat op de knop staat wordt wit; het andere blijft gedempt. */
:root:not([data-theme="winter"]) .seizoen-zon,
:root[data-theme="winter"] .seizoen-vlok { color: #FFFFFF; }
.seizoen:active .seizoen-knop { transform: scale(.92); }
:root[data-theme="winter"] .seizoen:active .seizoen-knop { transform: translateX(1.6rem) scale(.92); }
.seizoen-tekst { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
                 overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* -------------------------------------------------------------- knoppen */
.knop { display: inline-block; padding: var(--space-3) var(--space-5);
        border-radius: var(--radius-md); text-decoration: none;
        font-weight: 600; font-size: var(--text-body-size); white-space: nowrap;
        border: 1px solid transparent;
        transition: background-color var(--motion-fast) var(--motion-ease),
                    border-color var(--motion-fast) var(--motion-ease),
                    color var(--motion-fast) var(--motion-ease),
                    transform var(--motion-fast) var(--motion-ease); }
.knop:active { transform: scale(.97); }
.knop-primair { background: var(--button-primary-bg); color: var(--button-primary-fg); }
@media (hover: hover) {
  .knop-primair:hover { background: var(--button-primary-bg-hover); color: var(--button-primary-fg-hover); }
}
.knop-primair:disabled { background: var(--button-primary-bg-disabled);
                         color: var(--button-primary-fg-disabled); cursor: default; }
.knop-stil { background: transparent; color: currentColor; border-color: currentColor; }
@media (hover: hover) { .knop-stil:hover { background: rgb(12 31 78 / .06); } }
button.knop { font-family: inherit; cursor: pointer; }
.acties { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Op navy draagt oranje de knop, met navy erop (5,6). Dat is de enige plek
   waar het volle oranje een vlak mag zijn, en hij is er precies voor: de
   belangrijkste knop op het donkerste vlak. Hover gaat naar wit. */
.hero-donker, .hero-vergelijk, .cta, .voet {
  --button-primary-bg: var(--cgm-oranje);
  --button-primary-fg: var(--cgm-navy);
  --button-primary-bg-hover: #FFFFFF;
  --button-primary-fg-hover: var(--cgm-navy);
  --color-focus-ring: var(--cgm-oranje);
}
.hero-donker .knop-stil, .hero-vergelijk .knop-stil { color: #FFFFFF; border-color: rgb(255 255 255 / .55); }
@media (hover: hover) {
  .hero-donker .knop-stil:hover, .hero-vergelijk .knop-stil:hover { background: rgb(255 255 255 / .12); }
}

/* --------------------------------------------------------- hero: vergelijk
   Eén woonkamer, twee seizoenen, en een schuif die de bezoeker zelf bedient.
   Het winterbeeld ligt onder, het zomerbeeld erop en wordt van rechts
   afgesneden op de stand van de schuif. De schuif is een onzichtbare
   range-input over het hele vlak: slepen, tikken en pijltjestoetsen werken
   allemaal, zonder eigen sleepcode. */
.hero-vergelijk { position: relative; background: var(--cgm-navy); color: #FFFFFF; }
.vergelijk { position: relative; height: clamp(26rem, 80vh, 54rem); overflow: hidden;
             user-select: none; -webkit-user-select: none;
             /* Het slepen zit op dit vlak (zie het script in hero.php). pan-y laat
                verticaal scrollen aan de browser en geeft horizontaal bewegen aan
                ons; zonder dat vangt iOS de beweging als scroll. */
             touch-action: pan-y; cursor: ew-resize; }
.vergelijk picture, .vergelijk-zomer { position: absolute; inset: 0; }
.vergelijk img { width: 100%; height: 100%; object-fit: cover; }
.vergelijk-zomer { clip-path: inset(0 calc(100% - var(--positie)) 0 0); z-index: 1; }
/* Een scrim van navy onderaan, zodat de kop erop leesbaar blijft in beide
   seizoenen. Niet zwart: het merkvlak. */
.vergelijk::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 62%; z-index: 2;
  background: linear-gradient(to top, rgb(12 31 78 / .94) 0%, rgb(12 31 78 / .55) 45%, rgb(12 31 78 / 0) 100%);
  pointer-events: none;
}
.vergelijk-lijn { position: absolute; top: 0; bottom: 0; left: var(--positie); width: 2px;
                  background: #FFFFFF; transform: translateX(-50%); z-index: 3; pointer-events: none;
                  box-shadow: 0 0 0 1px rgb(12 31 78 / .15); }
.vergelijk-greep {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: #FFFFFF; color: var(--cgm-navy); display: grid; place-items: center;
  box-shadow: 0 6px 24px rgb(12 31 78 / .35);
  transition: transform var(--motion-fast) var(--motion-ease);
}
/* Alleen een tik op Zomer of Winter, of de schakelaar in de kop, laat de rand
   vloeien; tijdens slepen blijft hij onder de vinger. */
.vergelijk-vloeit .vergelijk-zomer { transition: clip-path 480ms var(--motion-ease); }
.vergelijk-vloeit .vergelijk-lijn  { transition: left 480ms var(--motion-ease); }
/* Onzichtbaar en onaanraakbaar: de input is er voor pijltjestoetsen en
   schermlezers. Vinger en muis gaan naar het vlak eromheen. */
.vergelijk-schuif {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0;
  opacity: 0; pointer-events: none; -webkit-appearance: none; appearance: none;
}
/* De greep toont de focus van de onzichtbare schuif. */
.vergelijk:has(.vergelijk-schuif:focus-visible) .vergelijk-greep {
  outline: 3px solid var(--cgm-oranje); outline-offset: 3px;
}
.vergelijk:has(.vergelijk-schuif:active) .vergelijk-greep { transform: translate(-50%, -50%) scale(.94); }
.vergelijk-kant {
  position: absolute; top: var(--space-5); z-index: 5;
  padding: .45rem .95rem; border-radius: var(--radius-full);
  background: rgb(12 31 78 / .55); color: #FFFFFF; border: 1px solid rgb(255 255 255 / .28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 600 var(--text-body-sm-size)/1 var(--font-family); cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}
.vergelijk-kant:active { transform: scale(.97); }
@media (hover: hover) { .vergelijk-kant:hover { background: rgb(12 31 78 / .8); } }
.vergelijk-kant-zomer  { left: max(var(--space-5), calc((100% - 72rem) / 2)); }
.vergelijk-kant-winter { right: max(var(--space-5), calc((100% - 72rem) / 2)); }
/* De kop en de knoppen liggen op de scrim. De tekst laat het slepen door
   (pointer-events none), de knoppen niet. */
.hero-vergelijk .hero-in {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding-bottom: clamp(var(--space-8), 6vh, var(--space-16)); pointer-events: none;
}
.hero-vergelijk .hero-in .acties { pointer-events: auto; }
.hero-vergelijk h1 {
  font-size: clamp(3rem, 7.5vw, var(--text-display-size));
  line-height: var(--text-display-line); letter-spacing: var(--text-display-tracking);
  max-width: 14ch; color: #FFFFFF; margin-bottom: var(--space-4);
  /* Eén moment bij het laden: de kop komt op. Daarna staat alles stil. */
  transition: opacity 600ms var(--motion-ease), transform 600ms var(--motion-ease);
  @starting-style { opacity: 0; transform: translateY(12px); }
}
.hero-vergelijk .lead { color: #DCE4F2; max-width: 46ch; margin-bottom: var(--space-6); }

/* ------------------------------------------------------------ hero: beeld
   Een foto over de volle breedte met de kop erop, zonder schuif. Dezelfde
   scrim als de vergelijkhero, zodat de twee als familie lezen. */
.hero-beeld { position: relative; padding: 0; background: var(--cgm-navy); color: #FFFFFF;
              min-height: clamp(24rem, 62vh, 40rem); display: flex; align-items: flex-end; }
.hero-beeld-foto { position: absolute; inset: 0; }
.hero-beeld-foto img { width: 100%; height: 100%; object-fit: cover; }
.hero-beeld::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 70%;
  background: linear-gradient(to top, rgb(12 31 78 / .94) 0%, rgb(12 31 78 / .55) 45%, rgb(12 31 78 / 0) 100%);
  pointer-events: none;
}
.hero-beeld .hero-in { position: relative; z-index: 1;
                       padding-block: clamp(var(--space-12), 12vh, var(--space-16)) clamp(var(--space-8), 6vh, var(--space-16)); }
.hero-beeld h1 { color: #FFFFFF; max-width: 14ch; }
.hero-beeld .lead { color: #DCE4F2; max-width: 46ch; }
.hero-beeld .knop-stil { color: #FFFFFF; border-color: rgb(255 255 255 / .55); }
/* Staat het onderwerp van de foto links, dan wijkt de tekst naar rechts. De
   regels blijven links uitgelijnd; alleen het blok verhuist. */
.hero-beeld-rechts .hero-in { display: flex; flex-direction: column; align-items: flex-end; }
.hero-beeld-rechts .hero-in > * { width: min(100%, 34rem); }
@media (max-width: 60rem) {
  .hero-beeld-rechts .hero-in { align-items: flex-start; }
}

/* ------------------------------------------------------ hero: de andere
   Een kop in grote letters, licht of op navy. Geen beeld en geen watermerk;
   de kop is groot genoeg om de pagina te openen. */
.hero { padding-block: clamp(var(--space-12), 9vh, var(--space-16)) var(--space-12); }
.hero h1 { font-size: clamp(3rem, 6.5vw, var(--text-display-size));
           line-height: var(--text-display-line); letter-spacing: var(--text-display-tracking);
           max-width: 16ch; }
.hero .lead { max-width: 54ch; }
/* De vergelijkhero draagt de klasse hero ook, maar heeft geen lucht nodig: het
   beeld loopt tegen de kop en de volgende sectie aan. */
.hero-vergelijk { padding: 0; }
.hero-label { font-weight: 600; color: var(--color-text-accent); margin-bottom: var(--space-3); }
.hero-donker { background: var(--cgm-navy); color: #FFFFFF; position: relative; overflow: hidden; }
/* Het watermerk: een lijntekening van een split-unit, wit op navy, als
   achtergrond van de donkere vlakken. Geen logo en geen foto, maar een
   tekening van wat het bedrijf installeert. Laag in dekking, rechts, en
   aangesneden: het is textuur, geen illustratie om naar te kijken. */
.hero-donker::before, .cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(/assets/beeld/watermerk-installatie-1920.webp) right center / auto 120% no-repeat;
  opacity: .22;
}
.hero-donker > .wrap, .cta > .wrap { position: relative; z-index: 1; }
.hero-donker .lead { color: var(--tekst-op-donker); }
.hero-donker .hero-label { color: var(--seizoen-accent-donker); }
.hero-eenvoudig { padding-block: var(--space-12) var(--space-8); }
.hero-eenvoudig h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-line);
                     letter-spacing: var(--text-h1-tracking); max-width: 24ch; }
.hero-eenvoudig + .wrap .prose { padding-top: var(--space-6); }

/* ---------------------------------------------------------------- tekst */
.prose { padding-block: var(--space-12); max-width: 66ch; }
.prose h2 { font-size: var(--text-h3-size); line-height: var(--text-h3-line);
            font-weight: var(--text-h3-weight); margin-top: var(--space-10); }
.prose h2:first-child { margin-top: 0; }
.prose ol, .prose ul { padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-3); }
.prose li::marker { color: var(--seizoen-accent); }
.prose img { border-radius: var(--radius-lg); margin-block: var(--space-8); }

/* ------------------------------------------------------------- blokken
   Panelen op het zachte vlak van het seizoen: koel in de zomer, warm in de
   winter. Het label is de kop, de leus een regel eronder. Geen streepjes en
   geen kaders: het vlak zelf zegt waar een item begint. */
.blokken { padding-block: var(--space-16); }
.raster { display: grid; gap: var(--space-5);
          grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.blok {
  background: var(--seizoen-zacht); color: var(--cgm-navy);
  border-radius: var(--radius-md); padding: var(--space-8) var(--space-6) var(--space-6);
  display: flex; flex-direction: column;
  transition: background-color var(--motion-base) var(--motion-ease);
}
.blok h3 { font-size: var(--text-h3-size); margin-bottom: var(--space-2); }
.blok-claim { font-weight: 600; margin: 0 0 var(--space-3); }
.blok p { color: var(--cgm-muted); margin: 0; }
.blok-logo { display: block; height: 76px; width: auto; max-width: 100%; margin-bottom: var(--space-4); }
.blok-punten { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.blok-punten li { position: relative; padding-left: var(--space-5); color: var(--cgm-muted); }
.blok-punten li::before { content: ""; position: absolute; left: 0; top: .7em;
                          width: var(--space-3); height: 2px; border-radius: var(--radius-full);
                          background: var(--seizoen-accent); }
.vlak-donker { background: var(--cgm-navy); color: #FFFFFF; }
.vlak-donker .blok { background: rgb(255 255 255 / .06); color: #FFFFFF; }
.vlak-donker .blok p, .vlak-donker .blok-punten li { color: var(--tekst-op-donker); }
.vlak-donker .blok-punten li::before { background: var(--seizoen-accent-donker); }

/* ------------------------------------------------------------- stappen
   Een volgorde in de tijd, dus genummerd en verticaal, langs de
   temperatuurbalk. De kop staat ernaast in plaats van erboven: de pagina
   krijgt daarmee een tweede ritme na de drie panelen. */
.stappen { padding-block: var(--space-16); background: var(--color-surface-raised); }
.stappen .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
                 gap: var(--space-12); align-items: start; }
.stappen .sectiekop { margin: 0; position: sticky; top: var(--space-8); }
.stappenlijst { list-style: none; margin: 0; padding: 0 0 0 var(--space-12);
                display: grid; gap: var(--space-8); position: relative; }
.stappenlijst::before { content: ""; position: absolute; left: 1.25rem; top: 1.25rem; bottom: 1.25rem;
                        width: 3px; border-radius: var(--radius-full);
                        background: var(--temperatuur); transform: translateX(-50%); }
.stappenlijst li { position: relative; }
.stapnummer {
  position: absolute; left: calc(-1 * var(--space-12)); top: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--cgm-navy); color: #FFFFFF; display: grid; place-items: center;
  font-family: var(--font-family-kop); font-weight: 700; font-size: var(--text-body-lg-size);
  box-shadow: 0 0 0 4px var(--color-surface-raised);
}
.stappenlijst h3 { font-size: var(--text-h4-size); line-height: 2.5rem; margin-bottom: var(--space-1); }
.stappenlijst p { color: var(--color-text-muted); margin: 0; }

/* ---------------------------------------------------------------- faq
   Zelfde tweedeling als de stappen. De vragen in de kopletter, want dit is
   waar een bezoeker leest in plaats van kijkt. */
.faq { padding-block: var(--space-16); }
/* De kop en de vragen zijn broers in dezelfde wrap, dus het raster zou ze om
   en om verdelen: vraag twee kwam onder de kop terecht. De kop krijgt de
   eerste kolom, elke vraag de tweede; de rijen volgen vanzelf. */
.faq .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
             gap: 0 var(--space-12); align-items: start; }
.faq h2 { margin: 0; grid-column: 1; grid-row: 1; }
.faq details { grid-column: 2; }
.faq-zacht { background: var(--seizoen-zacht); color: var(--cgm-navy);
             transition: background-color var(--motion-base) var(--motion-ease); }
.faq details { border-top: 1px solid rgb(12 31 78 / .18); padding-block: var(--space-5); }
.faq details:last-of-type { border-bottom: 1px solid rgb(12 31 78 / .18); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between;
               align-items: baseline; gap: var(--space-6);
               font-family: var(--font-family-kop); font-weight: 600;
               font-size: var(--text-h4-size); line-height: var(--text-h4-line); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; font-weight: 400; line-height: 1;
                      font-size: 1.5rem; color: var(--seizoen-accent);
                      transition: transform var(--motion-fast) var(--motion-ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
@media (hover: hover) { .faq summary:hover .faq-vraag { text-decoration: underline; text-underline-offset: 5px; } }
.faq .antwoord { max-width: 60ch; padding-top: var(--space-3); color: var(--cgm-muted); }
.faq-zacht .antwoord a { color: var(--cgm-navy); }
@supports selector(details::details-content) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden;
    transition: block-size var(--motion-base) var(--motion-ease), content-visibility var(--motion-base) allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}
summary:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: var(--focus-offset); }

/* ---------------------------------------------------------------- cta
   Navy, groot, en de oranje knop. Het slot van elke pagina. */
.cta { background: var(--cgm-navy); color: #FFFFFF; padding-block: var(--space-16);
       position: relative; overflow: hidden; }
.cta-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
          gap: var(--space-10); align-items: center; }
.cta h2 { font-size: clamp(2.4rem, 5vw, 3.75rem); line-height: 1; letter-spacing: 0;
          max-width: 16ch; margin-bottom: var(--space-3); }
.cta p { margin: 0; color: var(--tekst-op-donker); max-width: 48ch; }
.cta .acties { justify-content: flex-end; }

/* ------------------------------------------------------------ diensten
   Per dienst een rij: foto en tekst naast elkaar, om en om. De foto krijgt
   iets minder dan de helft; de tekst begint bovenaan, niet in het midden,
   zodat de kop op één lijn staat met de bovenkant van de foto. */
.diensten { padding-block: var(--space-4) var(--space-8); }
.dienst { padding-block: var(--space-10); }
.dienst + .dienst { border-top: 1px solid var(--color-border); }
.dienst-in { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
             gap: var(--space-12); align-items: start; }
.dienst:nth-child(even) .dienst-in { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); }
.dienst:nth-child(even) .dienst-beeld { order: 2; }
.dienst-beeld { margin: 0; }
.dienst-beeld img { width: 100%; height: auto; border-radius: var(--radius-md); }
.dienst-tekst h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-line);
                   margin-bottom: var(--space-2); }
.dienst-claim { font-weight: 600; font-size: var(--text-body-lg-size); color: var(--color-text-accent);
                margin-bottom: var(--space-4); }
.dienst-tekst p:not(.dienst-claim) { color: var(--color-text-muted); max-width: 52ch; }
.dienst-punten { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.dienst-punten li { position: relative; padding-left: var(--space-5); font-weight: 600; }
.dienst-punten li::before { content: ""; position: absolute; left: 0; top: .7em; width: var(--space-3); height: 2px;
                            border-radius: var(--radius-full); background: var(--seizoen-accent); }
@media (max-width: 60rem) {
  .dienst-in, .dienst:nth-child(even) .dienst-in { grid-template-columns: 1fr; gap: var(--space-6); }
  .dienst:nth-child(even) .dienst-beeld { order: 0; }
}

/* ------------------------------------------------------------ formulier */
.formulier { padding-block: var(--space-16); }
.formulier-in { display: grid; gap: var(--space-12);
                grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); }
.formulier-hoofd { grid-column: 1; grid-row: 1 / span 2; }
.formulier-naast { grid-column: 2; grid-row: 1; }
.formulier-onder { grid-column: 2; grid-row: 2; padding-block: 0; }
.formulier-onder > :first-child { margin-top: 0; }
.formulier form { max-width: 34rem; }
.veld { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.veld label { font-weight: 600; font-size: var(--text-body-sm-size); }
.veld .optioneel { font-weight: 400; color: var(--color-text-muted); }
.veld input, .veld textarea {
  font: inherit; color: var(--color-text); background: var(--input-bg);
  border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: var(--space-3);
  transition: border-color var(--motion-fast) var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  .veld input:hover, .veld textarea:hover { border-color: var(--input-border-hover); }
}
.veld [aria-invalid="true"] { border-color: var(--input-border-error);
                              box-shadow: inset 0 0 0 1px var(--input-border-error); }
.veldfout { color: var(--color-feedback-danger-fg); font-size: var(--text-body-sm-size); }
.veld-hint { font-size: var(--text-body-sm-size); color: var(--color-text-muted); }
.veld-uitleg { font-size: var(--text-body-sm-size); color: var(--color-text-muted); max-width: 34rem; }
.veld-verplicht-uitleg { font-size: var(--text-caption-size); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.verplicht { color: var(--color-feedback-danger-fg); font-weight: 400; }
.form-belofte { font-weight: 600; margin-bottom: var(--space-4); }
.melding { padding: var(--space-4); border-radius: var(--radius-md); max-width: 34rem; border: 1px solid; }
.melding-goed { background: var(--color-feedback-success-bg); color: var(--color-feedback-success-fg);
                border-color: var(--color-feedback-success-fg); }
.melding-fout { background: var(--color-feedback-danger-bg); color: var(--color-feedback-danger-fg);
                border-color: var(--color-feedback-danger-fg); }
.melding ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.melding p { margin: 0; }
.formulier-naast > h2 { font-size: var(--text-h3-size); line-height: var(--text-h3-line);
                        font-weight: var(--text-h3-weight); margin-bottom: var(--space-5); }
.geruststelling { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; gap: var(--space-5); }
.geruststelling li { display: grid; gap: var(--space-1); position: relative; padding-left: var(--space-5); }
.geruststelling li::before { content: ""; position: absolute; left: 0; top: .6em; width: var(--space-3); height: 2px;
                             border-radius: var(--radius-full); background: var(--seizoen-accent); }
.geruststelling span { color: var(--color-text-muted); font-size: var(--text-body-sm-size); }
.gerust-vlak { background: var(--seizoen-zacht); color: var(--cgm-navy);
               border-radius: var(--radius-lg); padding: var(--space-6);
               transition: background-color var(--motion-base) var(--motion-ease); }
.gerust-vlak h3 { font-size: var(--text-h4-size); margin-bottom: var(--space-2); }
.gerust-vlak p { margin: 0; color: var(--cgm-muted); font-size: var(--text-body-sm-size); line-height: 1.7; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* De ruimtes: een optioneel blok in het formulier. Een fieldset met een
   legend die als vraag leest, per ruimte drie smalle velden op een rij met de
   eenheid erachter. Het vlak van het seizoen eromheen, zodat het als een
   eigen stap leest en niet als drie verplichte velden meer. */
.ruimtes { border: 0; margin: 0 0 var(--space-6); padding: var(--space-5) var(--space-5) var(--space-3);
           background: var(--seizoen-zacht); border-radius: var(--radius-lg); color: var(--cgm-navy);
           transition: background-color var(--motion-base) var(--motion-ease); }
.ruimtes legend { float: left; width: 100%; font-weight: 600; margin-bottom: var(--space-1); }
.ruimtes legend + .veld-hint { clear: both; display: block; margin-bottom: var(--space-4); color: var(--cgm-muted); }
.ruimte { padding-top: var(--space-4); border-top: 1px solid rgb(12 31 78 / .12); }
.ruimte:first-child { border-top: 0; padding-top: 0; }
.ruimte-kop { display: flex; justify-content: space-between; align-items: baseline;
              font-weight: 600; font-size: var(--text-body-sm-size); margin-bottom: var(--space-2); }
.ruimte-weg { background: none; border: 0; padding: 0; font: inherit; font-size: var(--text-caption-size);
              color: var(--cgm-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ruimte-maten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.veld-maat { margin-bottom: var(--space-3); }
.veld-maat label { font-size: var(--text-caption-size); }
.maat-in { display: flex; align-items: center; gap: var(--space-2); }
.veld .maat-in input { width: 100%; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.maat-eenheid { color: var(--cgm-muted); font-size: var(--text-body-sm-size); }
.ruimtes > p:last-child { margin: var(--space-2) 0 0; }
.ruimte-meer { font-size: var(--text-body-sm-size); padding: var(--space-2) var(--space-4); }

/* -------------------------------------------------------------- beeld */
.beeld { padding-block: var(--space-12); }
.beeld figure { margin: 0; max-width: 66ch; }
.beeld img { width: 100%; border-radius: var(--radius-lg); }
.beeld figcaption { margin-top: var(--space-4); font-size: var(--text-body-sm-size); color: var(--color-text-muted); }

/* ---------------------------------------------------------------- voet
   Navy, met het embleem groot en zacht op de achtergrond: het merk loopt
   onder de pagina uit. De kopjes in de seizoenskleur. */
.voet { background: var(--cgm-navy); color: var(--cgm-soft);
        padding-block: var(--space-16) var(--space-6); position: relative; overflow: hidden; }
.voet-embleem { position: absolute; right: -8%; bottom: -40%; width: min(48vw, 30rem); height: auto;
                opacity: .10; pointer-events: none; }
.voet-in, .voet-onder { position: relative; z-index: 1; }
.voet-in { display: grid; gap: var(--space-10) var(--space-8); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.voet-in:has(.voet-talen) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.voet-merk { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-4); }
.voet-merk img { height: 64px; width: auto; }
.voet-merk .merk-naam-hoofd { color: #FFFFFF; font-size: var(--text-h3-size); }
.voet-merk .merk-naam-payoff { color: var(--seizoen-accent-donker); }
.voet h2 { font-family: var(--font-family); font-size: var(--text-body-sm-size); font-weight: 600;
           color: var(--seizoen-accent-donker); margin-bottom: var(--space-3); letter-spacing: 0; }
.voet a { color: #FFFFFF; }
.voet address { font-style: normal; line-height: 1.55; }
.voet ul { list-style: none; margin: 0; padding: 0; line-height: 1.45; }
.voet li a, .voet address a { display: inline-block; padding-block: 5px; }
.voet [aria-current="page"] { opacity: .6; text-decoration: none; pointer-events: none; }
.voet-onder { border-top: 1px solid rgb(255 255 255 / .14); margin-top: var(--space-10);
              padding-top: var(--space-4); font-size: var(--text-caption-size); opacity: .75; }
.voet-onder p { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; }
.voet-onder p > :first-child { margin-right: auto; }

/* ---------------------------------------------------- wat de browser tekent */
::selection { background: var(--seizoen-zacht); color: var(--cgm-navy); }
:root { caret-color: var(--cgm-navy); accent-color: var(--cgm-navy); }

/* --------------------------------------------------------- smal scherm */
@media (max-width: 60rem) {
  .stappen .wrap, .faq .wrap, .cta-in { grid-template-columns: 1fr; gap: var(--space-8); }
  .stappen .sectiekop { position: static; }
  .faq h2 { grid-row: auto; margin-bottom: var(--space-4); }
  .faq details { grid-column: auto; }
  .cta .acties { justify-content: flex-start; }
  .formulier-in { grid-template-columns: 1fr; gap: var(--space-8); }
  .formulier-hoofd, .formulier-naast, .formulier-onder { grid-column: auto; grid-row: auto; }
}
@media (max-width: 57rem) {
  .kop-in { gap: var(--space-4); }
  .merk img { height: 40px; }
  .merk-naam-payoff { display: none; }
  .nav-schakel { display: block; }
  .nav-knop {
    display: inline-grid; place-items: center; position: relative; cursor: pointer;
    inline-size: 2.75rem; block-size: 2.75rem; padding: 0;
    border: 1px solid var(--button-quiet-border); border-radius: var(--radius-md);
    background: var(--button-quiet-bg); color: var(--button-quiet-fg);
    transition: transform var(--motion-fast) var(--motion-ease);
  }
  .nav-knop:active { transform: scale(.94); }
  .nav-knop .nav-tekst-open, .nav-knop .nav-tekst-dicht {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .nav-icoon { display: block; }
  .nav-icoon-dicht { display: none; }
  .nav-schakel:checked ~ .nav-knop .nav-icoon-open { display: none; }
  .nav-schakel:checked ~ .nav-knop .nav-icoon-dicht { display: block; }
  .nav-schakel:focus-visible ~ .nav-knop { outline: var(--focus-width) solid var(--color-focus-ring);
                                           outline-offset: var(--focus-offset); }
  .nav ul {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
    flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) 0 var(--space-4);
    background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-2);
  }
  .nav-schakel:checked ~ ul { display: flex; transition: opacity var(--motion-base) var(--motion-ease); }
  @starting-style { .nav-schakel:checked ~ ul { opacity: 0; } }
  .nav ul > li { width: min(100% - var(--space-10), 72rem); margin-inline: auto; }
  .nav ul > li > a:not(.knop) { display: block; padding-block: var(--space-3); font-size: var(--text-body-size); }
  .nav ul > li > a.knop { display: block; text-align: center; margin-top: var(--space-3); }
  .nav { gap: var(--space-2); }
  .nav-thema { order: 0; margin: 0; padding-left: 0; border-left: 0; }
}
@media (max-width: 48rem) {
  .vergelijk { height: clamp(24rem, 72vh, 40rem); }
  .vergelijk-greep { top: 40%; }
  .hero-vergelijk .hero-in { padding-bottom: var(--space-8); }
  .hero-vergelijk .lead { font-size: var(--text-body-size); }
  .blokken, .stappen, .faq, .cta, .formulier { padding-block: var(--space-12); }
  .voet-in, .voet-in:has(.voet-talen) { grid-template-columns: 1fr; }
  .voet-embleem { right: -30%; bottom: -10%; width: 70vw; opacity: .08; }
}

/* Wie beweging heeft uitgezet krijgt geen beweging. Kleur en rand mogen
   blijven; verplaatsen en schalen niet. */
@media (prefers-reduced-motion: reduce) {
  .knop:active, .vergelijk-kant:active, .nav-knop:active,
  .seizoen:active .seizoen-knop,
  .vergelijk:has(.vergelijk-schuif:active) .vergelijk-greep { transform: none; }
  :root[data-theme="winter"] .seizoen:active .seizoen-knop { transform: translateX(1.6rem); }
  .vergelijk-vloeit .vergelijk-zomer, .vergelijk-vloeit .vergelijk-lijn,
  .faq details::details-content, .faq summary::after, .hero-vergelijk h1 { transition: none; }
}