/* Nextkozijnen site 2.0 — alle kleur en type komt uit tokens.css.
   Regels: geen letterlijke hexcodes hier, animaties alleen op transform en
   opacity, elke component heeft een ontworpen lege/lange/kleine staat. */

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

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ruit);
  color: var(--inkt);
  font-family: var(--body);
  font-size: var(--t-basis);
  line-height: 1.6;
  font-synthesis-weight: none;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--merk); }

.w { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.thermo { height: 4px; background: var(--thermo); }

/* ── Koppen ── */
h1, h2, h3 { font-family: var(--display); line-height: 1.12; letter-spacing: -.015em; }
h1 { font-size: var(--t-mega); font-weight: 800; }
h2 { font-size: var(--t-groot); font-weight: 700; }
h3 { font-size: var(--t-kop); font-weight: 600; letter-spacing: -.01em; }
.kicker {
  font-family: var(--display); font-weight: 700; font-size: var(--t-fijn);
  letter-spacing: .09em; text-transform: uppercase; color: var(--warm-tekst);
}
.intro { font-size: var(--t-sub); color: var(--grijs); max-width: 62ch; }
.fijn { font-size: var(--t-fijn); color: var(--grijs); }
/* Datumregel onder de kop van een kennisartikel: dicht tegen de kop aan, zodat
   hij bij de kop hoort en niet bij de eerste alinea. */
.bijgewerkt { font-size: var(--t-fijn); color: var(--grijs); margin: 6px 0 0; }

/* Wegzetten met het hidden-attribuut moet altijd werken. Zonder deze regel
   verliest [hidden] van elke eigen display-regel: .knop staat op inline-flex, en
   dus bleef een verborgen knop gewoon staan. Zo bleef "Zie hoe uw huis eruit
   komt te zien" op de dakkapelpagina zichtbaar terwijl het fotovoorbeeld uit
   stond (gevonden 10 sep 2026). */
[hidden] { display: none !important; }

/* ── Knoppen: minimaal 48px hoog, beweging alleen via transform ── */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border: none; border-radius: var(--r-knop);
  background: var(--merk); color: #fff; text-decoration: none; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: var(--t-basis);
  transition: transform .15s ease, box-shadow .15s ease;
}
.knop:hover { transform: translateY(-1px); box-shadow: var(--schaduw-op); }
.knop:focus-visible { outline: 3px solid var(--warm); outline-offset: 2px; }
.knop.warm { background: var(--warm); color: var(--nacht-diep); }
.knop.leeg { background: transparent; color: var(--merk); border: 1.5px solid var(--lijn2); }
.knop.leeg:hover { border-color: var(--merk); }
.knop.opdonker { background: var(--warm); color: var(--nacht-diep); }

/* ── Kop van de site: wit met het blauwe logo, precies zoals op Instagram
   (sinds 7 sep 2026; daarvoor een nachtblauwe balk met alleen de naam). ── */
.balk { background: #fff; color: var(--inkt); border-bottom: 1px solid var(--lijn); }
.balk .w { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 68px; }
.merk { color: var(--logo); text-decoration: none; display: flex; align-items: center; min-height: 48px; }
.merk .logomerk { flex: 0 0 auto; display: block; width: auto; height: 46px; }
@media (max-width: 560px) { .merk .logomerk { height: 42px; } }
.merk .merkteken { flex: 0 0 auto; display: block; width: auto; height: 44px; }
.hoofdmenu ul { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; }
.hoofdmenu a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px;
  color: var(--inkt); text-decoration: none; font-size: var(--t-klein); border-radius: var(--r-knop);
  /* Zonder dit brak "Prijs berekenen" op een smal beeldscherm over twee regels
     en werd de hele kopbalk twee lagen hoog. */
  white-space: nowrap;
}
.hoofdmenu a:hover, .hoofdmenu a[aria-current="page"] { background: var(--merk-licht); color: var(--merk); }
.belknop {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px;
  background: var(--warm); color: var(--nacht-diep); border-radius: var(--r-knop);
  font-family: var(--display); font-weight: 700; font-size: var(--t-basis); text-decoration: none;
  white-space: nowrap;
}
.menuknop {
  display: none; min-height: 48px; min-width: 48px; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--lijn2); border-radius: var(--r-knop);
  color: var(--inkt); font-family: var(--display); font-weight: 600; font-size: var(--t-klein); cursor: pointer;
}
.mobielmenu { display: none; background: #fff; border-top: 1px solid var(--lijn); }
.mobielmenu.open { display: block; }
/* Ook op de telefoon zien waar je bent: zelfde signaal als in het hoofdmenu. */
.mobielmenu a[aria-current="page"] { background: var(--merk-licht); color: var(--merk); }
.mobielmenu a {
  display: flex; align-items: center; min-height: 52px; padding: 0 20px;
  color: var(--inkt); text-decoration: none; border-top: 1px solid var(--lijn);
}

/* ── Hero: één belofte, één actie, en de prijskaart als bewijs ── */
/* De achtergrond is Aarts eigen dakkapelklus (10 aug, 2048×1536, eigen werk
   en dus vrij te gebruiken): antraciet kozijnen, dakkapel, lucht. Aart vroeg
   op 7 sep om "die achtergrond erin", zoals op zijn eerdere KozijnConnect-site.
   Links ligt een donkere laag zodat de kop leesbaar blijft (wit op ≥ 88%
   nachtblauw); naar rechts loopt die open zodat de foto echt te zien is. */
/* De foto in het beste formaat dat de browser kan (avif, dan webp, dan jpeg) en
   in de maat van het scherm; _beelden.mjs maakt ze. Eerst de jpeg als losse
   regel: een browser die image-set() met type() niet kent, slaat de tweede
   regel over en houdt de eerste. Het meta-blok laadt de avif al vooraf, met
   dezelfde grens van 560 px (16 sep 2026; tot dan 263 kB jpeg op elk scherm). */
.hero {
  background-color: var(--nacht);
  background-image:
    linear-gradient(100deg, rgba(7, 23, 34, .95) 0%, rgba(9, 40, 74, .9) 46%, rgba(11, 58, 107, .42) 72%, rgba(11, 58, 107, .28) 100%),
    url("/assets/foto/dakkapel-banner-1600.jpg");
  background-image:
    linear-gradient(100deg, rgba(7, 23, 34, .95) 0%, rgba(9, 40, 74, .9) 46%, rgba(11, 58, 107, .42) 72%, rgba(11, 58, 107, .28) 100%),
    image-set(url("/assets/foto/dakkapel-banner-1600.avif") type("image/avif"), url("/assets/foto/dakkapel-banner-1600.webp") type("image/webp"), url("/assets/foto/dakkapel-banner-1600.jpg") type("image/jpeg"));
  background-position: 0 0, center 58%;
  background-size: auto, cover;
  background-repeat: no-repeat, no-repeat;
  color: #fff; padding: 56px 0 60px;
}
.hero .w { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.hero h1 { color: #fff; max-width: 13ch; text-wrap: balance; }
.hero .kicker { color: var(--warm-diep); } /* op de donkere hero haalt --warm-tekst maar 3,1:1 */
.hero .belofte { font-size: var(--t-sub); color: var(--koud-licht); margin-top: 16px; max-width: 46ch; }
.hero .acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero .noot { font-size: var(--t-fijn); color: var(--koud-licht); margin-top: 12px; }
.hero .noot b { color: #fff; }

/* De prijskaart: geen plaatje maar het antwoord waar mensen voor komen. */
.prijskaart { background: var(--kaart); color: var(--inkt); border-radius: var(--r-kaart); padding: 24px; box-shadow: var(--schaduw-op); }
.prijskaart .titel { font-family: var(--display); font-weight: 700; font-size: var(--t-sub); }
.prijskaart .sub { font-size: var(--t-fijn); color: var(--grijs); margin-top: 2px; }
.prijsregels { list-style: none; padding: 0; margin: 16px 0 0; }
.prijsregels li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--lijn); font-size: var(--t-klein); }
.prijsregels li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.prijsregels li.aftrek span:last-child { color: var(--goed); }
.prijsregels li.totaal { border-bottom: none; border-top: 2px solid var(--nacht); margin-top: 6px; padding-top: 12px; font-family: var(--display); font-weight: 700; font-size: var(--t-sub); }
.prijskaart .kaartnoot { font-size: var(--t-fijn); color: var(--grijs); margin-top: 12px; }

/* ── Secties ── */
main section { padding: 56px 0; }
section.donker { background: var(--nacht); color: #fff; }
section.donker a { color: var(--koud-licht); } /* merkblauw op nachtblauw is 1,9:1 */
section.donker h2 { color: #fff; }
section.donker .intro, section.donker .fijn { color: var(--koud-licht); }
section.donker .kicker { color: var(--warm); }

/* De vergelijkingstabel in een donkere sectie had de klasse wel maar geen enkele
   regel: kolommen plakten aan elkaar ("1,1 W/m2K 0,6 W/m2K") en de kopregel liep
   door de cijfers heen. Juist die tabel draagt het hele glasargument. */
.donkertabel { width: 100%; border-collapse: collapse; font-size: var(--t-klein); margin-top: 4px; }
.donkertabel th, .donkertabel td { padding: 12px 16px; text-align: left; vertical-align: top; }
.donkertabel th { font-family: var(--display); font-weight: 700; font-size: var(--t-fijn);
  text-transform: uppercase; letter-spacing: .06em; color: var(--koud-licht);
  border-bottom: 1px solid var(--nacht-zacht); }
.donkertabel td { border-bottom: 1px solid var(--nacht-zacht); color: var(--koud-licht); }
.donkertabel tr:last-child td { border-bottom: none; }
.donkertabel td:first-child { color: #fff; width: 46%; }
/* De bedragen rechts uitlijnen op de cijfers, zodat 25 en 111 onder elkaar staan. */
.donkertabel th:not(:first-child), .donkertabel td:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.donkertabel td b { color: var(--warm); font-size: var(--t-sub); }

/* De vier afspraken stonden op drie pagina's als dezelfde rij van vier witte
   kaarten. Op de homepage nu een genummerde lijst in de donkere sectie: andere
   vorm, zelfde inhoud, en het onderste deel van de pagina leest niet meer als
   één lange grijze massa. */
.afspraken { list-style: none; counter-reset: afspraak; margin-top: 26px; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 40px; }
.afspraken li { counter-increment: afspraak; position: relative; padding-left: 46px;
  color: var(--grijs); font-size: var(--t-klein); line-height: 1.6; }
.afspraken li b { color: var(--inkt); font-family: var(--display); font-weight: 700; }
/* In een donkere sectie draaien de leeskleuren om. */
section.donker .afspraken li { color: var(--koud-licht); }
section.donker .afspraken li b { color: #fff; }
.afspraken li::before { content: counter(afspraak); position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--warm); color: var(--warm);
  font-family: var(--display); font-weight: 700; font-size: var(--t-klein);
  display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 780px) { .afspraken { grid-template-columns: 1fr; } }

/* Het termijnschema: drie stappen naast elkaar, met het bedrag-deel als kop.
   Stond nergens op de site terwijl "u weet precies waar u aan toe bent" de hele
   belofte is. Komt uit tarieven.json, dus hij kan niet uit de pas lopen met de
   offerte. */
.termijnen { list-style: none; counter-reset: termijn; padding: 0; margin: 26px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Het nummer komt uit een teller in plaats van uit de opmaak: een los cijfer in
   een span liep uit zijn bolletje en verscheen daardoor twee keer op het scherm. */
.termijnen li { counter-increment: termijn; list-style: none; position: relative; padding-left: 48px; }
.termijnen li::before { content: counter(termijn); position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; border-radius: 50%; background: var(--warm); color: var(--nacht-diep);
  font-family: var(--display); font-weight: 800; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; }
.termijnen li b { display: block; min-height: 34px; font-family: var(--display); font-weight: 700;
  font-size: var(--t-sub); color: #fff; line-height: 1.3; }
.termijnen li span { display: block; margin-top: 6px; font-size: var(--t-klein);
  color: var(--koud-licht); line-height: 1.55; }
@media (max-width: 820px) { .termijnen { grid-template-columns: 1fr; } }

/* Het werkgebied als een rij plaatsnamen: wie op de homepage landt wil in één
   oogopslag zien of wij bij hem komen. Tegelijk de kortste route naar de
   gemeentepagina die bij hem hoort. */
.plaatsen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.plaatsen a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px;
  border-radius: var(--r-pil); border: 1px solid var(--nacht-zacht); background: var(--nacht-zacht);
  color: #fff; text-decoration: none; font-size: var(--t-klein); font-weight: 600; }
.plaatsen a:hover { background: var(--warm); border-color: var(--warm); color: var(--nacht-diep); }
/* De werkkaart (14 sep 2026): omtrek van Nederland uit werkkaart.js, met de
   pillen of de buurtlijst ernaast. Maten in de SVG zijn eenheden van 100 m
   (1 px ≈ 7 eenheden bij 380 px breed). Op een donkere sectie andere inkt. */
.werkgebied-rij { display: grid; grid-template-columns: 1fr minmax(260px, 380px); gap: 24px 40px; align-items: start; margin-top: 8px; }
.werkkaart { margin: 0; }
.werkkaart svg { width: 100%; height: auto; display: block; }
.werkkaart .land { fill: var(--merk-licht); stroke: var(--lijn2); stroke-width: 9; stroke-linejoin: round; }
.werkkaart .straal { fill: none; stroke: var(--warm-diep); stroke-width: 11; stroke-dasharray: 40 30; }
.werkkaart .lijn { stroke: var(--grijs); stroke-width: 6; }
.werkkaart .stip { fill: var(--merk); }
.werkkaart .stip.thuis, .werkkaart .stip.uitgelicht { fill: var(--warm); stroke: var(--inkt); stroke-width: 8; }
.werkkaart .naam { font-family: var(--display); font-size: 95px; font-weight: 700; fill: var(--inkt); }
.werkkaart .naam.uitgelicht { fill: var(--warm-tekst); }
.werkkaart figcaption { font-size: var(--t-fijn); color: var(--grijs); margin-top: 8px; }
section.donker .werkkaart .land { fill: rgba(255, 255, 255, 0.08); stroke: var(--koud-licht); }
section.donker .werkkaart .straal { stroke: var(--warm); }
section.donker .werkkaart .lijn { stroke: var(--koud-licht); }
section.donker .werkkaart .stip { fill: var(--koud-licht); }
section.donker .werkkaart .stip.thuis { fill: var(--warm); stroke: #fff; }
section.donker .werkkaart .naam { fill: #fff; }
section.donker .werkkaart figcaption { color: var(--koud-licht); }
@media (max-width: 860px) { .werkgebied-rij { grid-template-columns: 1fr; } .werkkaart { max-width: 360px; } }
@media (max-width: 500px) { .werkkaart .naam.extra, .werkkaart .lijn.extra { display: none; } }

.rij { display: grid; gap: 20px; margin-top: 32px; }
.rij.k2 { grid-template-columns: repeat(2, 1fr); }
.rij.k3 { grid-template-columns: repeat(3, 1fr); }
.rij.k4 { grid-template-columns: repeat(4, 1fr); }

.kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r-kaart); padding: 22px; }
section.donker .kaart { background: var(--nacht-zacht); border-color: var(--nacht-zacht); }
.kaart h3 { margin-bottom: 8px; }
/* Een kaart, een artikelkaart of een stap is een sectie van de pagina, dus h2;
   hij ziet eruit als de h3 van eerst. Een kopniveau overslaan (h1 → h3) laat een
   schermlezer denken dat er een kop ontbreekt (16 sep 2026, SEO-loop ronde 3). */
.kaart h2, .artikelkaart h2, .tijdlijn h2, .formkaart h2 { font-size: var(--t-kop); font-weight: 600; letter-spacing: -.01em; }
.kaart h2 { margin-bottom: 8px; }
.artikelkaart h2 { color: var(--inkt); margin: 0; }
.tijdlijn h2 { margin-bottom: 6px; }
.kaart p { font-size: var(--t-klein); color: var(--grijs); }
section.donker .kaart p { color: var(--koud-licht); }
.kaart .cijfer { font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--warm-tekst); line-height: 1; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
/* "Wat u ervoor terugkrijgt" (14 sep 2026): een getal met de bron eronder; de
   kaarten zonder getal zeggen waarom niet. */
.rij.terug .cijfer { font-size: 24px; }
.kaart .bron { font-size: var(--t-fijn); color: var(--grijs); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--lijn); }
/* Een bron midden in een lopende zin (het VEH-cijfer, 14 sep 2026): kleiner
   en grijs, en op een donkere sectie licht. */
.bronnoot { font-size: var(--t-fijn); color: var(--grijs); }
section.donker .bronnoot { color: var(--koud-licht); }

/* Twee staande filmpjes van de klus, naast elkaar en bescheiden van maat:
   het zijn bewijsstukken, geen hero. */
.filmrij { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 32px; max-width: 620px; }
.filmrij video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-kaart); border: 1px solid var(--lijn); background: var(--nacht-diep); display: block; }

/* Stappen: genummerd omdat het écht een volgorde is. */
.stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; counter-reset: s; }
.stap { counter-increment: s; padding-top: 14px; border-top: 3px solid var(--lijn2); }
.stap::before { content: counter(s); font-family: var(--display); font-weight: 800; font-size: var(--t-fijn); color: var(--warm-tekst); }
.stap b { display: block; font-family: var(--display); font-size: var(--t-sub); margin-top: 2px; }
.stap span { font-size: var(--t-klein); color: var(--grijs); }
/* De tijdlijn uit tijdlijn.json (14 sep 2026): zes stappen in twee rijen van
   drie, per stap de duur als eigen regel. Een open plek (de levertijd, tot
   Aart het getal geeft) staat schuin en grijs: eerlijk, niet als belofte. */
.stappen.zes { grid-template-columns: repeat(3, 1fr); }
.stap .duur { display: block; font-style: normal; font-weight: 600; font-size: var(--t-klein); color: var(--warm-tekst); margin: 4px 0 6px; }
.stap.open .duur { font-style: italic; font-weight: 500; color: var(--grijs); }
.stappen-totaal { margin-top: 20px; font-size: var(--t-klein); color: var(--grijs); max-width: 720px; }

/* Budgetmeter: het verloop betekent hier iets, dus de thermolijn hoort hier. */
/* De meter blijft weg tot er een stand is. Zonder deze regel zag een bezoeker
   een leeg grijs balkje op 0% in juist de strook die over de opraakende
   subsidiepot gaat (10 sep 2026); de code zet de klasse al. */
.meter { display: none; max-width: 560px; margin-top: 14px; }
.meter.zichtbaar { display: block; }
.meter .balkje { height: 14px; border-radius: var(--r-pil); background: var(--lijn); overflow: hidden; }
.meter .vul { height: 100%; background: var(--thermo); border-radius: var(--r-pil); width: 0; transition: width .6s ease; }
.meter .regel { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: var(--t-fijn); color: var(--grijs); margin-top: 7px; }
.meter .regel b { color: var(--inkt); }
section.donker .meter .balkje { background: var(--nacht-zacht); }
section.donker .meter .regel { color: var(--koud-licht); }
section.donker .meter .regel b { color: #fff; }

/* ── Formulier ── */
.formkaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r-kaart); padding: 26px; box-shadow: var(--schaduw); }
/* Een witte kaart in een donkere sectie erft de witte tekstkleur van die sectie.
   Op de rekenpagina stonden daardoor alle labels wit op wit: "Uw naam",
   "Telefoonnummer", "E-mailadres" en "Postcode en huisnummer" waren
   onzichtbaar, en de kleine letters eronder stonden lichtblauw op wit. Dat is
   precies het formulier waar een klant zijn gegevens achterlaat. Daarom zet de
   kaart alle tekstkleuren hier terug naar de gewone leeskleuren. */
.formkaart, section.donker .formkaart { color: var(--inkt); }
section.donker .formkaart label,
section.donker .formkaart .veld label { color: var(--inkt); }
section.donker .formkaart .fijn,
section.donker .formkaart p { color: var(--grijs); }
section.donker .formkaart .fout { color: var(--fout); }
section.donker .formkaart a { color: var(--nacht); }
.veld { margin-bottom: 14px; }
.veld label { display: block; font-size: var(--t-klein); font-weight: 600; margin-bottom: 5px; }
.veld input, .veld select, .veld textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; font-size: 16px; font-family: inherit;
  color: var(--inkt); background: var(--kaart); border: 1.5px solid var(--lijn2); border-radius: var(--r-knop);
}
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--nacht); box-shadow: 0 0 0 3px rgba(62,143,196,.25); }
.veld .hulp { font-size: var(--t-fijn); color: var(--grijs); margin-top: 5px; }
.veld .fout { display: none; font-size: var(--t-fijn); color: var(--fout); margin-top: 5px; }
.veld.heeft-fout .fout { display: block; }
.veld.heeft-fout input { border-color: var(--fout); }
.rij2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Postcode, huisnummer en toevoeging naast elkaar; ook op een telefoon, want
   het zijn drie korte velden (14 sep 2026, ronde 4). */
.rij3 { display: grid; grid-template-columns: 1.3fr 1fr .8fr; gap: 14px; }
.hulptekst[data-adresbevestiging]:not([hidden]) { display: block; margin-top: -6px; margin-bottom: 14px; padding: 10px 12px; border-left: 3px solid var(--warm); background: #FFF8EC; border-radius: 0 var(--r-knop) var(--r-knop) 0; font-size: var(--t-fijn); color: var(--inkt); }
.hp { position: absolute; left: -9999px; }
.verzonden { display: none; }
.verzonden.zien { display: block; }

/* De drie korte vragen op de bedanktkaart, zichtbaar ná het versturen. */
.navraag { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lijn); }
.navraag .kop { font-weight: 700; margin: 0 0 4px; }
.navraag .fijn { color: var(--grijs); font-size: var(--t-fijn); margin: 0 0 6px; }
.navraagvraag { font-weight: 600; margin: 16px 0 7px; }
.navraaghulp { color: var(--grijs); font-size: var(--t-fijn); margin: -3px 0 7px; }
.navraagkeuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.navraagkeuzes button {
  min-height: 44px; padding: 9px 15px; font: inherit; font-size: var(--t-klein);
  color: var(--inkt); background: var(--kaart); border: 1.5px solid var(--lijn2);
  border-radius: 999px; cursor: pointer;
}
.navraagkeuzes button:hover { border-color: var(--nacht); }
.navraagkeuzes button.gekozen { background: var(--nacht); border-color: var(--nacht); color: #fff; }
.navraag .doorgeven {
  width: 100%; min-height: 50px; margin-top: 18px; padding: 13px 18px;
  font: inherit; font-weight: 700; color: var(--nacht); background: var(--warm);
  border: 0; border-radius: var(--r-knop); cursor: pointer;
}
.navraag .doorgeven:disabled { opacity: .6; cursor: default; }
.navraagmelding { font-size: var(--t-klein); margin: 10px 0 0; }
.navraagmelding.goed { color: var(--goed); }
.navraagmelding.fout { color: var(--fout); }

/* ── Voettekst ── */
footer.site { background: var(--nacht-diep); color: var(--koud-licht); padding: 40px 0 26px; font-size: var(--t-klein); }
footer.site .kolommen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
footer.site b { color: #fff; font-family: var(--display); }
/* De voetnoot bij het sterretje stond in --grijs op nacht-diep: 3,3:1 (16 sep 2026). */
footer.site .fijn { color: var(--koud-licht); }
footer.site ul { list-style: none; padding: 0; margin: 10px 0 0; }
footer.site li { margin-bottom: 4px; }
/* Voettekstlinks zijn volwaardige aanraakvlakken: op een telefoon zijn dit
   vaak de snelste route naar het telefoonnummer. */
footer.site a { color: var(--koud-licht); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
footer.site a:hover { color: #fff; text-decoration: underline; }
footer.site .onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--nacht-zacht); font-size: var(--t-fijn); }

/* ── Responsief ── */
/* Vanaf hier gaat de ondertitel bij het merk eruit, want het menu is
   belangrijker (was ooit gemeten met zes menu-items; sinds 14 sep zijn het er
   vier, zie het breekpunt van het menu verderop). */
@media (max-width: 980px) {
  .hero .w { grid-template-columns: 1fr; gap: 30px; }
  .rij.k4 { grid-template-columns: repeat(2, 1fr); }
  .rij.k3 { grid-template-columns: 1fr; }
  .stappen, .stappen.zes { grid-template-columns: repeat(2, 1fr); }
  footer.site .kolommen { grid-template-columns: repeat(2, 1fr); }
}
/* Het breekpunt van het menu. Gemeten op 14 sep 2026 (kijk/_kijk-bovenbalk.mjs):
   logo + vier items + Instagram + belknop "Bel 06 1234 5678" zijn samen 770 px,
   plus 40 px zijkant = 810 px. Vanaf 861 px staat alles dus naast elkaar met
   50 px lucht (genoeg voor een iets langer telefoonnummer); daaronder het
   uitklapmenu. Was 1040 px met zes items (tot 14 sep), 940 px met vijf. */
@media (max-width: 860px) {
  .hoofdmenu { display: none; }
  .menuknop { display: inline-flex; }
}
@media (max-width: 560px) {
  main section { padding: 40px 0; }
  .hero { padding: 36px 0 40px; background-position: 0 0, center 40%; }
  .hero {
    background-image: linear-gradient(180deg, rgba(7, 23, 34, .9) 0%, rgba(9, 40, 74, .92) 100%), url("/assets/foto/dakkapel-banner-800.jpg");
    background-image: linear-gradient(180deg, rgba(7, 23, 34, .9) 0%, rgba(9, 40, 74, .92) 100%),
      image-set(url("/assets/foto/dakkapel-banner-800.avif") type("image/avif"), url("/assets/foto/dakkapel-banner-800.webp") type("image/webp"), url("/assets/foto/dakkapel-banner-800.jpg") type("image/jpeg"));
  }
  .rij.k4, .rij.k2 { grid-template-columns: 1fr; }
  .stappen, .stappen.zes { grid-template-columns: 1fr; }
  .rij2 { grid-template-columns: 1fr; }
  .hero .acties .knop { width: 100%; }
  /* Op een smal scherm past merk + knop + Menu niet meer naast elkaar, en dan
     valt Menu buiten beeld. De knop kan hier weg: Contact staat in het
     uitklapmenu en de hero heeft zijn eigen knop over de volle breedte. */
  .belknop { display: none; }
  /* Met een telefoonnummer blijft de belknop wél staan, maar alleen als
     icoon: bellen is precies wat iemand op een telefoon wil doen (14 sep 2026). */
  .belknop.tel { display: inline-flex; min-width: 48px; padding: 0 13px; gap: 0; }
  .belknop.tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  footer.site .kolommen { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── Rekentool ───────────────────────────────────────────────────────────
   De uitkomst staat rechts en blijft op desktop in beeld terwijl je links
   kiest; op mobiel schuift hij onder de keuzes en neemt een plakbalk het
   bedrag mee. Alles heeft vaste hoogtes zodat er niets verspringt terwijl
   de bedragen tellen. */
section.reken { padding-top: 28px; }
.rekenrooster { display: grid; grid-template-columns: 1fr 400px; gap: 28px; align-items: start; }

.keuzeblok { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r-kaart); padding: 20px; margin-bottom: 16px; }
.veldkop { display: block; font-family: var(--display); font-weight: 600; font-size: var(--t-sub); margin-bottom: 12px; }
.hulp { font-size: var(--t-fijn); color: var(--grijs); margin-top: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 48px; padding: 0 16px; border-radius: var(--r-pil); cursor: pointer;
  background: var(--kaart); border: 1.5px solid var(--lijn2); color: var(--inkt);
  font-family: var(--body); font-size: var(--t-klein); font-weight: 500;
  transition: transform .12s ease;
}
.chip:hover { border-color: var(--nacht); }
.chip:focus-visible { outline: 3px solid var(--warm); outline-offset: 2px; }
.chip[aria-pressed="true"] { background: var(--nacht); border-color: var(--nacht); color: #fff; font-weight: 600; }

.glaskeuze { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.glaskaart {
  display: block; text-align: left; padding: 16px; cursor: pointer; min-height: 118px;
  background: var(--kaart); border: 1.5px solid var(--lijn2); border-radius: var(--r-kaart);
  font-family: var(--body); color: var(--inkt); transition: transform .12s ease;
}
.glaskaart:hover { border-color: var(--nacht); }
.glaskaart:focus-visible { outline: 3px solid var(--warm); outline-offset: 2px; }
.glaskaart[aria-pressed="true"] { border-color: var(--nacht); border-width: 2px; padding: 15px; }
.glaskaart b { display: block; font-family: var(--display); font-size: var(--t-sub); }
.glaskaart span { display: block; font-size: var(--t-fijn); color: var(--grijs); margin-top: 4px; }
.glaskaart .label { color: var(--warm-tekst); font-weight: 600; margin-top: 8px; }

/* De hele regel is het aanraakvlak, niet alleen het vinkje. */
.schakel { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; cursor: pointer; min-height: 48px; }
.schakel + .schakel { border-top: 1px solid var(--lijn); }
.schakel input { width: 22px; height: 22px; margin-top: 3px; flex: none; accent-color: var(--nacht); }
.schakel b { font-size: var(--t-klein); }
.schakel .hulp { margin-top: 3px; }

.uitkomst { position: sticky; top: 16px; }
.uitkomstkaart { background: var(--nacht); color: #fff; border-radius: var(--r-kaart); padding: 24px; box-shadow: var(--schaduw-op); }
.uitkomstkaart .label { font-size: var(--t-fijn); color: var(--koud-licht); text-transform: uppercase; letter-spacing: .08em; font-family: var(--display); font-weight: 700; }
.uitkomstkaart .bedrag { font-family: var(--display); font-weight: 800; font-size: clamp(36px, 6vw, 46px); line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.opbouwkop { font-size: var(--t-fijn); color: var(--koud-licht); margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--nacht-zacht); }
.opbouw .regel { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; font-size: var(--t-klein); border-bottom: 1px solid var(--nacht-zacht); }
.opbouw .regel .toel { display: block; font-size: var(--t-fijn); color: var(--koud-licht); margin-top: 2px; }
.bedrag2 { font-family: var(--display); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bedrag2.aftrek { color: var(--warm); }
.opbouw .regel.flits { background: rgba(255,176,32,.10); }
.nootje:not([hidden]) { display: block; font-size: var(--t-fijn); color: var(--warm); margin-top: 12px; }
.bijregel { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 14px; padding: 12px 14px; background: var(--nacht-zacht); border-radius: var(--r-knop); font-size: var(--t-fijn); }
.voorbehoud { font-size: var(--t-fijn); color: var(--grijs); margin-top: 16px; }
section.donker .voorbehoud, .hero .voorbehoud, .uitkomstkaart .voorbehoud { color: var(--koud-licht); } /* daar staat hij op nacht */

/* ── Calculator 2.0 (14 sep 2026): twee standen, typekaarten, kozijnlijst, gevelstrook ── */
.standkeuze { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.standknop { min-height: 56px; padding: 10px 14px; text-align: left; cursor: pointer; background: var(--kaart); border: 1.5px solid var(--lijn2); border-radius: var(--r-kaart); font-family: var(--body); color: var(--inkt); }
.standknop b { display: block; font-family: var(--display); font-size: var(--t-klein); }
.standknop span { display: block; font-size: var(--t-fijn); color: var(--grijs); margin-top: 2px; }
.standknop[aria-pressed="true"] { background: var(--nacht); border-color: var(--nacht); color: #fff; }
.standknop[aria-pressed="true"] span { color: var(--koud-licht); }
.standknop:focus-visible { outline: 3px solid var(--warm); outline-offset: 2px; }
.typekeuze { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.typekaart { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; min-height: 130px; cursor: pointer; background: var(--kaart); border: 1.5px solid var(--lijn2); border-radius: var(--r-kaart); font-family: var(--body); color: var(--inkt); text-align: center; }
.typekaart .teken { display: flex; align-items: flex-end; justify-content: center; height: 66px; }
.typekaart b { font-family: var(--display); font-size: var(--t-klein); }
.typekaart .typeprijs { font-size: var(--t-fijn); color: var(--grijs); }
.typekaart:hover { border-color: var(--merk); }
.typekaart:focus-visible { outline: 3px solid var(--warm); outline-offset: 2px; }
/* De gekozen kaart in merkblauw (plan 14 sep 2026): je ziet welk kozijn je net toevoegde. */
.typekaart[aria-pressed="true"] { background: var(--merk); border-color: var(--merk); color: #fff; }
.typekaart[aria-pressed="true"] .typeprijs { color: #fff; opacity: .85; }
.kozijnlijst { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.kozijnlijst:empty { display: none; }
.kozijnrij { display: grid; grid-template-columns: 64px 1fr auto auto auto auto 44px; gap: 10px; align-items: center; padding: 10px 12px; background: #F6F9FC; border: 1px solid var(--lijn); border-radius: var(--r-knop); }
.kozijnrij .mini { display: flex; justify-content: center; }
.kozijnrij .kozijnnaam b { display: block; font-family: var(--display); font-size: var(--t-klein); }
.kozijnrij .kozijnnaam small { display: block; margin: 0; }
.kozijnrij .maat, .kozijnrij .glasklein { display: flex; flex-direction: column; font-size: var(--t-fijn); color: var(--grijs); gap: 2px; }
.kozijnrij input, .kozijnrij select { min-height: 44px; width: 78px; padding: 0 8px; border: 1.5px solid var(--lijn2); border-radius: var(--r-knop); font: inherit; font-size: var(--t-klein); color: var(--inkt); background: #fff; }
.kozijnrij select { width: 92px; }
.kozijnrij .kozijnbedrag { font-family: var(--display); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kozijnrij .weg { min-height: 44px; min-width: 44px; border: 1.5px solid var(--lijn2); background: #fff; border-radius: var(--r-knop); cursor: pointer; font-size: 20px; color: var(--grijs); }
.kozijnrij .weg:hover { color: #B3261E; border-color: currentColor; }
/* De gevelstrook boven de uitkomst: alle kozijnen op schaal naast elkaar. */
.gevelstrook { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; padding: 10px 12px 8px; margin-bottom: 14px; background: #fff; border-radius: var(--r-knop); border-bottom: 4px solid var(--warm); }
.gevelstrook .gevelkozijn { display: inline-flex; }
.upsell { border-color: var(--warm); }
@media (max-width: 980px) { .typekeuze { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .kozijnrij { display: flex; flex-wrap: wrap; }
  .kozijnrij .kozijnnaam { flex: 1; }
  .kozijnrij .maat, .kozijnrij .glasklein { flex: 1 1 26%; }
  .kozijnrij input, .kozijnrij select { width: 100%; }
  .kozijnrij .kozijnbedrag { flex: 1 1 100%; text-align: right; }
}

/* Plakbalk op mobiel: het bedrag blijft in beeld terwijl je scrolt. */
.plakbalk { display: none; }
@media (max-width: 980px) {
  .rekenrooster { grid-template-columns: 1fr; }
  .uitkomst { position: static; }
  .plakbalk {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    justify-content: space-between; align-items: center; gap: 12px;
    background: var(--nacht-diep); color: #fff; padding: 12px 20px;
    box-shadow: 0 -2px 14px rgba(7,23,34,.28); font-size: var(--t-klein);
  }
  .plakbalk b { font-family: var(--display); font-size: var(--t-sub); font-variant-numeric: tabular-nums; }
  body { padding-bottom: 64px; }
}
@media (max-width: 560px) { .glaskeuze { grid-template-columns: 1fr; } }

/* ── Lijsten en vragen ── */
.lijst { list-style: none; padding: 0; margin: 18px 0 0; }
.lijst li { position: relative; padding-left: 26px; margin-bottom: 9px; font-size: var(--t-klein); }
.lijst li::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; border-radius: 2px; background: var(--warm); }
section.donker .lijst li { color: var(--koud-licht); }

.vragen { margin-top: 24px; max-width: 780px; }
.vragen details { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r-kaart); margin-bottom: 10px; }
.vragen summary { display: flex; align-items: center; min-height: 56px; padding: 0 18px; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: var(--t-basis); }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: "+"; margin-left: auto; font-size: 22px; color: var(--warm-diep); font-weight: 700; }
.vragen details[open] summary::after { content: "\2212"; }
.vragen details > *:not(summary) { padding: 0 18px 18px; font-size: var(--t-klein); color: var(--grijs); }
.vragen details > .meter { padding-left: 18px; padding-right: 18px; }

/* Formulier: fouttekst hoort alleen te verschijnen als er een fout is. */
.formulierfout { display: none; }
.formulier .veld-heeft-fout .fout, .veld.veld-heeft-fout .fout { display: block; }
.veld-heeft-fout input { border-color: var(--fout); }

/* m²-stepper: zelf bijstellen en het bedrag zien meebewegen. */
.m2rij { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lijn); }
.m2label { font-size: var(--t-klein); font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 4px; border: 1.5px solid var(--lijn2); border-radius: var(--r-pil); padding: 3px; }
.stepper button {
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--ruit); color: var(--nacht); font-size: 22px; line-height: 1; font-family: var(--display);
}
.stepper button:hover { background: var(--nacht); color: #fff; }
.stepper button:focus-visible { outline: 3px solid var(--warm); outline-offset: 2px; }
.stepper .waarde { min-width: 74px; text-align: center; font-family: var(--display); font-weight: 700; font-size: var(--t-sub); font-variant-numeric: tabular-nums; }
.stepper .waarde small { font-weight: 500; font-size: var(--t-fijn); color: var(--grijs); }

/* Links in lopende tekst blijven aanraakbaar op een telefoon: een
   telefoonnummer of een verwijzing naar de privacyverklaring is precies wat
   iemand met een duim probeert te raken. */
@media (max-width: 820px) {
  p a[href^="tel:"], p a[href^="mailto:"] {
    display: inline-block; min-height: 44px; line-height: 44px;
  }
}

/* ── Lopende tekst ── */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 34px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 26px; }
.prose p { margin-top: 12px; }
.prose p + p { margin-top: 10px; }
.prose .lijst { margin-top: 14px; }
section.donker .prose p { color: var(--koud-licht); }

/* Tabel: schuift binnen zijn eigen doos, zodat de pagina nooit uitzoomt. */
.tabelwrap { overflow-x: auto; margin-top: 18px; -webkit-overflow-scrolling: touch; }
/* Een tabel die opzij schuift moet dat ook laten zien. Op 390 px is de
   prijstabel 474 px breed in een vak van 350: de kolom "Na subsidie" — het
   bedrag waar de pagina om draait — stond volledig buiten beeld en niets
   verried dat je kon schuiven (gevonden 10 sep 2026). Vandaar de rand die
   meebeweegt en de regel eronder. */
.tabelwrap:focus-visible { outline: 2px solid var(--merk); outline-offset: 3px; }
/* De hint staat standaard uit en wordt door site.js aangezet zodra de tabel
   in dit vak echt breder is dan het vak. Zonder script blijft hij weg: dan
   kun je nog steeds schuiven, je krijgt er alleen geen zin bij. */
.schuifhint[hidden] { display: none; }
.tabelwrap.schuift { box-shadow: inset -14px 0 12px -12px rgba(0,0,0,.35); }
.prose table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: var(--t-klein); background: var(--kaart); }
.prose th, .prose td { border: 1px solid var(--lijn); padding: 11px 13px; text-align: left; vertical-align: top; }
.prose th { background: var(--nacht); color: #fff; font-family: var(--display); font-weight: 600; font-size: var(--t-fijn); }
.prose td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Tijdlijn: genummerd, want dit ís een volgorde ── */
.tijdlijn { list-style: none; padding: 0; margin: 0; counter-reset: t; }
.tijdlijn li {
  counter-increment: t; position: relative; padding: 0 0 30px 62px; border-left: 2px solid var(--lijn2);
  margin-left: 21px;
}
.tijdlijn li:last-child { border-left-color: transparent; padding-bottom: 0; }
.tijdlijn li::before {
  content: counter(t); position: absolute; left: -22px; top: -2px;
  width: 42px; height: 42px; border-radius: 50%; background: var(--nacht); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: var(--t-sub);
}
.tijdlijn h3 { margin-bottom: 6px; }
.tijdlijn p { font-size: var(--t-klein); color: var(--grijs); max-width: 68ch; }
.tijdlijn .wanneer {
  display: inline-block; margin-top: 10px; padding: 5px 12px; border-radius: var(--r-pil);
  background: var(--warm); color: var(--nacht-diep); font-size: var(--t-fijn); font-weight: 600;
}
@media (max-width: 560px) {
  .tijdlijn li { padding-left: 44px; margin-left: 18px; }
  .tijdlijn li::before { width: 36px; height: 36px; left: -19px; font-size: var(--t-klein); }
}

/* ── Productkaarten ── */
.kaart.product { display: flex; flex-direction: column; }
.kaart.product .vanaf { font-size: var(--t-fijn); color: var(--grijs); margin-top: 10px; }
.kaart.product .prijs { font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--nacht); line-height: 1; margin: 2px 0 10px; font-variant-numeric: tabular-nums; }
.kaart.product > a { margin-top: auto; padding-top: 12px; font-weight: 600; font-size: var(--t-klein); color: var(--nacht); display: inline-flex; align-items: center; min-height: 44px; }
/* De kozijntekening. Was een glimmend blauw verloop met dikke randen: dat oogde
   als speelgoed en zei niets over het product. Nu een technische tekening in
   lijn met de kopletter uit de bouwhoek: inkt op glas, dunne lijnen, en de
   opening aangegeven zoals op een bestektekening (diagonaal naar het scharnier).
   Vaste verhouding, dus geen verschuiving bij het laden. */
.tekening { display: grid; gap: 3px; aspect-ratio: 4/3; background: var(--ruit);
  border: 2px solid var(--nacht); border-radius: 3px; padding: 6px; margin-bottom: 14px;
  grid-auto-flow: column; }
.tekening .vak { position: relative; background: #fff; border: 1px solid var(--lijn2); border-radius: 1px; }
/* Draaikiep: het bestekteken is een driehoek met de punt naar het scharnier.
   Als achtergrondtekening, want dan schaalt hij mee met het vak zonder dat de
   lijndikte meegroeit. */
.tekening .vak.kiep {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M2 2 L50 98 L98 2' fill='none' stroke='%23C3D3DD' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-size: 100% 100%; background-repeat: no-repeat;
}
/* Tuindeuren: twee deuren met een krukje in het midden. */
.tekening .vak.hoog::after { content: ""; position: absolute; top: 46%; width: 3px; height: 14px;
  background: var(--nacht); border-radius: 2px; }
.tekening .vak.hoog:first-child::after { right: 4px; }
.tekening .vak.hoog:last-child::after { left: 4px; }

/* Tabel op donkere grond */
.donkertabel { background: transparent; color: #fff; }
.donkertabel th { background: var(--nacht-zacht); }
.donkertabel td { border-color: var(--nacht-zacht); }

/* Textarea deelt de veldopmaak, maar mag groeien. */
.veld textarea { min-height: 110px; resize: vertical; line-height: 1.5; }

/* Het sleuteltje naar het beheer: zichtbaar voor wie het zoekt, rustig voor
   wie het niet zoekt. Verstoppen is geen beveiliging; de sleutel is dat. */
.sleutel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: 2px; vertical-align: middle;
  color: var(--koud-licht); opacity: .5; border-radius: var(--r-knop);
  transition: opacity .15s ease, transform .15s ease;
}
.sleutel:hover, .sleutel:focus-visible { opacity: 1; color: var(--warm); transform: translateY(-1px); }
.sleutel:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }

/* ── Kennisbank, privacy en 404 ────────────────────────────────────────────
   Deze pagina's stonden tot 10 augustus nog op de oude stylesheet. Bij de
   omzetting bleken drie soorten links hun opmaak kwijt en daarmee ook hun
   aanraakvlak: de doorklik onder een kennisartikel, het kruimelpad terug naar
   de kennisbank, en de suggesties op de 404. Ze staan hier bij elkaar zodat
   duidelijk is waar ze vandaan komen. */
.artikellink {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--nacht); font-weight: 600; text-decoration: none;
}
.artikellink:hover { color: var(--warm-tekst); }
.kruimel {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--grijs); font-size: 14.5px; text-decoration: none;
}
.kruimel:hover { color: var(--nacht); }
.suggesties { list-style: none; padding: 0; margin: 18px 0 0; }
.suggesties li { border-top: 1px solid var(--lijn); }
.suggesties a {
  display: flex; align-items: center; min-height: 52px;
  color: var(--nacht); font-weight: 600; text-decoration: none;
}
.suggesties a:hover { color: var(--warm-tekst); }

/* Een kaart die zelf de link is. Eerder was alleen de kop klikbaar: op een
   tablet een strookje van 22px hoog, dat je moest raken met een vinger van
   een centimeter breed. Nu is het hele blok het aanraakvlak. De pijl beweegt
   mee bij aanwijzen zodat het ook zichtbaar één ding is. */
.artikelkaart {
  display: flex; flex-direction: column; gap: 8px;
  padding: 28px 30px; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.artikelkaart h3 { color: var(--inkt); margin: 0; }
.artikelkaart .kicker { margin: 0 0 2px; }
.artikelkaart .hulp { margin: 0; }
.artikelkaart .artikellink { margin-top: auto; padding-top: 12px; }
.artikelkaart:hover, .artikelkaart:focus-visible {
  border-color: var(--warm); box-shadow: 0 6px 20px rgba(12, 34, 51, .10); transform: translateY(-2px);
}
.artikelkaart:hover .artikellink, .artikelkaart:focus-visible .artikellink { color: var(--warm-tekst); }
.artikelkaart:focus-visible { outline: 3px solid var(--warm); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .artikelkaart { transition: none; } .artikelkaart:hover { transform: none; } }

/* De zakelijke gegevens onderaan. Een bedrijf hoort zijn KvK-nummer op de site
   te zetten (Handelsregisterwet art. 25); bij verkoop op afstand horen de naam,
   het vestigingsadres en het btw-nummer daar ook bij (BW 6:230m). Het is geen
   verkooptekst, dus het staat er rustig: op een eigen regel over de volle
   breedte, zodat het de twee regels eronder niet uit elkaar duwt. */
footer.site .onder .zakelijk { flex-basis: 100%; order: -1; color: var(--koud-licht); opacity: .75; line-height: 1.55; }

/* ── WhatsApp-knop ──
   Neergezet door assets/site.js zodra er een nummer is ingesteld (merk.json
   "whatsapp" of NEXTKOZIJNEN_WHATSAPP op Railway); zonder nummer bestaat de
   knop niet. Het groen is bewust het herkenbare WhatsApp-groen en geen
   huisstijlkleur: de knop moet als WhatsApp gelezen worden. */
.waknop {
  position: fixed; right: 18px; bottom: 18px; z-index: 30;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25d366; color: #fff;
  box-shadow: 0 4px 14px rgba(7, 23, 34, .3);
}
.waknop:hover { background: #1ebe5b; }
.waknop:focus-visible { outline: 3px solid var(--warm); outline-offset: 2px; }
@media (max-width: 980px) {
  /* Boven de plakbalk van de rekentool (die is 64px hoog), niet eroverheen. */
  .waknop.boven-plakbalk { bottom: 78px; }
}
@media print { .waknop { display: none; } }

/* ── Mobiele rekentool-ingrepen (ronde 6, 1 sep) ── */
/* Het m²-getal is typbaar: veertien keer tikken voor 14 m² erbij is straf. */
.stepper .waarde input {
  width: 3.4ch; border: 0; background: transparent; color: inherit;
  font: inherit; font-variant-numeric: tabular-nums; text-align: right; padding: 0;
  -moz-appearance: textfield; appearance: textfield;
  /* Een duim moet het veld kunnen raken: de knoppen ernaast zijn al 44px,
     het veld zelf hoort dat ook te zijn (APK, kijkcontrole 1 sep). */
  min-height: 44px;
}
.stepper .waarde input::-webkit-outer-spin-button,
.stepper .waarde input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .waarde input:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; border-radius: 4px; }

/* Lange uitleg klapt in achter een duidelijke vraag. */
.uitlegklap { margin-top: 8px; }
.uitlegklap summary { cursor: pointer; font-size: var(--t-klein); color: var(--nacht); }
.uitlegklap[open] summary { margin-bottom: 4px; }

/* De plakbalk is nu bedienbaar: tik op het bedrag voor de opbouw, knop naar de
   offerte. Daarom is aria-hidden eraf — een voorlezer hoort dit ook. */
.plakbalk .plakinfo {
  flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: transparent; border: 0; color: inherit; font: inherit; padding: 0;
  cursor: pointer; text-align: left;
  /* Dit is dé tikknop van de balk; 29px tekst-hoogte is te weinig voor een
     duim (APK, kijkcontrole 1 sep). */
  min-height: 44px;
}
.plakbalk .plakinfo b { font-family: var(--display); font-size: var(--t-sub); font-variant-numeric: tabular-nums; }
.plakbalk .knop { padding: 9px 14px; flex: none; }
.plakdetail { display: none; }
@media (max-width: 980px) {
  .plakdetail {
    display: block; position: fixed; left: 0; right: 0; bottom: 64px; z-index: 19;
    background: var(--nacht-diep); color: #fff; padding: 12px 20px 6px;
    border-top: 1px solid var(--nacht-zacht); font-size: var(--t-klein);
    box-shadow: 0 -2px 14px rgba(7, 23, 34, .28);
  }
  .plakdetail[hidden] { display: none; }
  .plakdetail .pregel { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
  .plakdetail .pregel b { font-variant-numeric: tabular-nums; font-weight: 600; }
}

/* De vergelijkingstabel wordt op een smal scherm kaartjes onder elkaar:
   zijwaarts schuiven sneed juist de bedragen af waar het om gaat (111/222). */
@media (max-width: 560px) {
  .donkertabel.kaartbaar tr:first-child { display: none; }
  .donkertabel.kaartbaar tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--nacht-zacht); }
  .donkertabel.kaartbaar tr:last-child { border-bottom: 0; }
  .donkertabel.kaartbaar td { display: flex; justify-content: space-between; gap: 12px; width: auto !important; border: 0; padding: 3px 0; }
  .donkertabel.kaartbaar td:first-child { display: block; font-weight: 600; margin-bottom: 4px; }
  .donkertabel.kaartbaar td[data-th]::before { content: attr(data-th); color: var(--koud-licht); }
}

/* Het sterretje (2 sep): markeert wat nog bevestigd of veranderd moet worden.
   Het register staat in STERRETJES.md; een test eist dat elk sterretje daar
   in staat. Klein, warm, met uitleg bij aanwijzen - geen alarm voor de klant. */
.ster { color: inherit; font-weight: 700; margin-left: 2px; cursor: help; text-decoration: none; }
/* Het sterretje neemt de kleur van de tekst waar hij bij staat (16 sep 2026).
   Een vaste kleur ging telkens mis: fel amber is 1,8:1 op een witte kaart, de
   tekstveilige amber 3,2:1 op een donkere kaart, en hij staat op steeds meer
   plekken. Zo klopt het contrast overal, ook op een achtergrond die er later
   bij komt; hij valt op door vet en door de uitleg bij aanwijzen. */

/* ── De kopknoppen: Instagram, Stel uw vraag, Menu (sinds 7 sep 2026) ── */
.kopknoppen { display: flex; gap: 10px; align-items: center; }
.instaknop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--r-knop);
  border: 1.5px solid var(--lijn2); color: var(--merk); background: #fff;
}
.instaknop:hover { background: var(--merk-licht); border-color: var(--merk); }
.instaknop:focus-visible { outline: 3px solid var(--warm); outline-offset: 2px; }
.mobielmenu .insta { gap: 10px; color: var(--merk); font-weight: 600; }
.mobielmenu .insta svg { flex: 0 0 auto; }

/* ── "Wat wij plaatsen": de vier dingen uit de Instagram-bio, als strook
   direct onder de hero. Kozijnen, deuren, schuifpuien, dakkapellen. ── */
/* De strook "Wat wij plaatsen" op de homepage: vier tegels in vier kolommen
   (kozijnen, tuindeuren, schuifpuien, dakkapellen). Tot 14 sep 2026 stonden er
   vijf tegels in dit rooster van vier: de vijfde (stalen deuren) wrapte alleen
   onder de eerste, zonder scheidingslijn. test.js telt nu tegels tegen kolommen. */
.maaklijst { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--lijn); border-radius: var(--r-kaart); background: var(--kaart); overflow: hidden; box-shadow: var(--schaduw); }
.maaklijst a { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; min-height: 84px; text-decoration: none; color: var(--inkt); border-left: 1px solid var(--lijn); }
.maaklijst a:first-child { border-left: none; }
.maaklijst a:hover { background: var(--merk-licht); }
.maaklijst b { font-family: var(--display); font-weight: 700; font-size: var(--t-sub); color: var(--merk); }
.maaklijst span { font-size: var(--t-klein); color: var(--grijs); }
@media (max-width: 980px) { .maaklijst { grid-template-columns: repeat(2, 1fr); } .maaklijst a:nth-child(3) { border-left: none; } .maaklijst a:nth-child(n+3) { border-top: 1px solid var(--lijn); } }
@media (max-width: 560px) { .maaklijst { grid-template-columns: 1fr; } .maaklijst a { border-left: none; border-top: 1px solid var(--lijn); min-height: 64px; } .maaklijst a:first-child { border-top: none; } }

/* Knop met het Instagram-icoon erin (onder de klusfilmpjes). */
.knop svg { vertical-align: -5px; margin-right: 8px; }


/* De melding als een formulier zonder JavaScript is verstuurd en er iets
   mis was. Hij hangt aan :target, zodat hij verschijnt door het adres alleen
   (/contact.html#mislukt) en dus ook werkt als er geen script draait — wat
   precies het geval is waarvoor deze weg bestaat. */
.naformulier { display: none; }
.naformulier:target { display: block; scroll-margin-top: 90px; }