/* ---------------------------------------------------------------
   De Ketelman — richting: installatietekening

   Twee hoofdkleuren, allebei rechtstreeks uit logo.png geteld:
     #9F1E5E  magenta-rood  (51% van de gekleurde pixels in het logo)
     #415BA8  blauw         (40%)

   Eerder stond hier #C8102E / #383872. Die zaten er allebei naast: het
   perceptuele verschil (CIEDE2000) met de logokleur was 19.1 voor het rood
   en 13.4 voor het blauw, terwijl alles boven ~5 als onmiskenbaar twee
   verschillende kleuren leest. Het logo staat in de kop pal naast de rode
   belknop, dus dat verschil was permanent in beeld.

   Alle overige kleuren zijn neutraal. Wil je het palet wisselen: alleen de
   variabelen hieronder, plus <meta name="theme-color"> in de drie pagina's.
   De tekeningen volgen vanzelf — zie het blok met attribuutselectors onderaan
   dit bestand.
   --------------------------------------------------------------- */

:root{
  --rood:#9F1E5E;
  --rood-dk:#81184D;
  --indigo:#415BA8;
  --indigo-dk:#364C8C;
  --inkt:#1B1A18;
  --grijs:#565049;
  --papier:#FAF7F2;
  --wit:#FFFFFF;
  --lijn:#DCD5CB;
  /* Deze drie zijn doorzichtige varianten van --indigo (65,91,168). Ze staan
     als losse rgba-waarden omdat een hex niet in een alfa te schuiven is
     zonder color-mix(); wijzig je --indigo, wijzig dan ook deze drie.
     De dekking ligt iets hoger dan bij de vorige, donkerdere indigo: dit
     blauw is lichter, dus bij dezelfde alfa werden de randen te bleek. */
  --lijn-i:rgba(65,91,168,.32);
  --raster:rgba(65,91,168,.06);
  --raster-blad:rgba(65,91,168,.065);
  /* WhatsApp-groen. NIET het icoongroen #25D366: wit daarop haalt 1.98:1,
     ver onder de 4.5 die tekst nodig heeft en zelfs onder de 3 voor een icoon.
     Dat is waarom zoveel WhatsApp-knoppen op het web onleesbaar zijn — die
     kleur is bedoeld als groen logo op wit, niet als witte tekst op groen.
     Dit is een tint uit WhatsApps eigen donkere palet: wit erop haalt 5.21. */
  --wa:#0E7A6E;
  --wa-dk:#0A5F56;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

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

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

body{
  margin:0;
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.62;
  color:var(--inkt);
  background-color:var(--papier);
  background-image:
    linear-gradient(to right, var(--raster) 1px, transparent 1px),
    linear-gradient(to bottom, var(--raster) 1px, transparent 1px);
  background-size:26px 26px;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
svg{max-width:100%}

h1,h2,h3{
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(1.9rem,7.4vw,3.15rem);letter-spacing:-.025em}
h2{font-size:clamp(1.4rem,5.4vw,2.05rem)}
h3{font-size:1.075rem;letter-spacing:-.005em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

a{color:var(--indigo)}
a:hover{color:var(--rood)}

:focus-visible{
  outline:3px solid var(--rood);
  outline-offset:3px;
}
.band-rood :focus-visible{outline-color:#fff}

.wrap{width:min(1120px, 100% - 32px);margin-inline:auto}

.mono{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
}

.overslaan{
  position:absolute;left:-9999px;top:0;
  background:var(--indigo);color:#fff;
  padding:10px 16px;z-index:99;
}
.overslaan:focus{left:8px;top:8px}

/* --- bovenbalk ------------------------------------------------- */
.bovenbalk{
  background:var(--indigo);
  color:#fff;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.bovenbalk .wrap{
  display:flex;flex-wrap:wrap;gap:4px 18px;
  justify-content:space-between;padding:7px 0;
}
.bovenbalk span{white-space:nowrap}
.bovenbalk a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.6)}
.bovenbalk a:hover{color:#fff;border-bottom-color:#fff}

/* --- kop ------------------------------------------------------- */
.kop-site{
  position:sticky;top:0;z-index:40;
  background:var(--papier);
  border-bottom:1px solid var(--lijn-i);
}
.kop-site .wrap{
  display:flex;align-items:center;gap:12px;
  justify-content:space-between;
  flex-wrap:wrap;
  padding:10px 0;
}
/* Het logo is ook de link naar de homepage. De afbeelding zelf is maar zo'n
   30px hoog; het raakvlak wordt hier op 44px gebracht zonder dat het logo
   groter wordt. De kop wordt er niet hoger van, want de belknop is al 44px. */
.merk{display:flex;align-items:center;min-height:44px}
.merk img{width:clamp(126px,38vw,188px)}

/* De navigatie stond op mobiel op display:none, zonder hamburger ervoor in de
   plaats. Gevolg: vanaf de offertepagina was de contactpagina op een telefoon
   niet te bereiken. Daarom krijgt hij hier een eigen regel onder het logo —
   drie korte items passen ruim, en dat scheelt een menuknop met JavaScript. */
.hoofdnav{
  order:3; flex-basis:100%;
  border-top:1px solid var(--lijn-i);
}
.hoofdnav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.hoofdnav a{
  display:flex;align-items:center;min-height:44px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--indigo);text-decoration:none;
  border-bottom:2px solid transparent;
}
.hoofdnav a:hover{color:var(--rood);border-bottom-color:var(--rood)}
/* De pagina waar je nu bent, zodat de balk ook oriënteert en niet alleen linkt. */
.hoofdnav a[aria-current="page"]{color:var(--rood);border-bottom-color:var(--rood)}

.belknop{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--rood);color:#fff;text-decoration:none;
  font-family:var(--mono);font-weight:600;
  font-size:clamp(.74rem,3.1vw,.86rem);
  letter-spacing:.04em;
  padding:9px 13px;
  white-space:nowrap;
  border:1px solid var(--rood);
  /* Dit is de knop die iemand met een koud huis als eerste raakt. Hij kwam
     op 39px uit; 44px is wat zowel iOS als Android als ondergrens aanhouden. */
  min-height:44px;
}
.belknop:hover{background:var(--rood-dk);border-color:var(--rood-dk);color:#fff}
.belknop svg{flex:none}

/* --- hero ------------------------------------------------------ */
.hero{padding:34px 0 8px}
.hero-net{display:grid;gap:30px}
.oogje{color:var(--indigo);margin:0 0 14px}
.lead{font-size:clamp(1.02rem,3.9vw,1.16rem);max-width:36em}
.hero h1 em{font-style:normal;color:var(--indigo)}

.feiten{
  list-style:none;margin:26px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.feiten li{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--indigo);
  border:1px solid var(--lijn-i);background:var(--wit);
  padding:6px 10px;
}

/* tekenblad met de ketel */
.tekenblad{
  position:relative;
  background:var(--wit);
  border:1px solid var(--lijn-i);
  padding:14px 12px 12px;
  background-image:
    linear-gradient(to right, var(--raster-blad) 1px, transparent 1px),
    linear-gradient(to bottom, var(--raster-blad) 1px, transparent 1px);
  background-size:20px 20px;
}
.tekenblad::before,.tekenblad::after{
  content:"";position:absolute;width:12px;height:12px;border:0 solid var(--indigo);
}
.tekenblad::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.tekenblad::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.tekenblad figcaption{margin-top:6px}
.blad-kop{
  display:flex;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--indigo);
  border-bottom:1px solid var(--lijn-i);
  padding-bottom:7px;margin-bottom:6px;
}
.legenda{
  list-style:none;margin:8px 0 0;padding:8px 0 0;
  border-top:1px dashed var(--lijn-i);
  display:flex;flex-wrap:wrap;gap:6px 16px;
  font-family:var(--mono);font-size:.7rem;color:var(--indigo);
  counter-reset:l;
}
.legenda li{display:flex;align-items:center;gap:7px;counter-increment:l}
.legenda li::before{
  content:counter(l);
  width:17px;height:17px;flex:none;
  border:1px solid var(--indigo);border-radius:50%;
  display:grid;place-items:center;font-size:.62rem;
}
.legenda li:first-child{color:var(--rood)}
.legenda li:first-child::before{border-color:var(--rood)}

/* --- spoedband ------------------------------------------------- */
.band-rood{
  background:var(--rood);
  color:#fff;
  margin-top:34px;
  padding:34px 0;
}
.band-rood .kader{
  border:1px solid #fff;
  padding:24px 18px;
  display:grid;gap:22px;
}
/* Op de contactpagina is de spoedkop de h1 van de pagina: die staat bovenaan
   en is de belangrijkste boodschap. Vandaar h1 hier ook. */
.band-rood h1,.band-rood h2{color:#fff;margin-bottom:.35em}
.band-rood p{color:#fff}
.band-rood .mono{color:#fff;opacity:.92}
.spoed-tekst{max-width:42em}
.telblok{align-self:start}
.telknop{
  display:inline-block;
  background:#fff;color:var(--rood);
  text-decoration:none;
  font-family:var(--mono);font-weight:600;
  font-size:clamp(1.45rem,7.6vw,2.35rem);
  letter-spacing:.01em;
  line-height:1;
  padding:16px 18px;
  white-space:nowrap;
  border:2px solid #fff;
}
.telknop:hover{background:var(--rood);color:#fff}
.telblok .mono{display:block;margin-top:12px;line-height:1.6}
.telblok .mono a{color:#fff}

/* --- secties --------------------------------------------------- */
/* De kop is sticky, dus een aangesprongen sectie moet eronder uitkomen. Deze
   waarde stond vast op 80px terwijl de kop op mobiel 122px hoog is (twee
   regels: logo+belknop, daaronder de navigatie) en op desktop 65px. Vandaar
   een variabele die in de 780px-query meeverandert; los van elkaar lopen ze
   vanzelf weer uiteen. */
:root{ --kop-h:122px; }
section, [id]{scroll-margin-top:calc(var(--kop-h) + 12px)}
.sectie{padding:52px 0}
.sectie-kop{
  border-bottom:1px solid var(--lijn-i);
  padding-bottom:12px;margin-bottom:28px;
}
.sectie-kop .idx{
  display:block;color:var(--indigo);margin:0 0 8px;
}
.sectie-kop p.intro{
  margin:12px 0 0;color:var(--grijs);max-width:44em;
}

/* diensten */
.diensten{display:grid;gap:16px}
.kaart{
  position:relative;
  background:var(--wit);
  border:1px solid var(--lijn-i);
  padding:22px 20px 24px;
}
.kaart::before,.kaart::after{
  content:"";position:absolute;width:10px;height:10px;border:0 solid var(--indigo);
}
.kaart::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.kaart::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.kaart .nr{
  position:absolute;top:14px;right:16px;
  font-family:var(--mono);font-size:.72rem;color:var(--indigo);
  letter-spacing:.08em;
}
.kaart svg.ico{margin-bottom:14px}
.kaart h3{margin-bottom:.45em}
.kaart p{font-size:1rem;color:var(--inkt)}
.kaart .noot{
  margin-top:14px;padding-top:12px;
  border-top:1px dashed var(--lijn-i);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--indigo);
}

/* waarom */
.waarom{display:grid;gap:26px}
.punt{border-top:2px solid var(--indigo);padding-top:16px}
.punt h3{margin-bottom:.4em}
.punt p{font-size:1rem}
.tijdlijn{margin:0 0 14px}
.merken{
  display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none;
}
.merken li{
  position:relative;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--indigo);
  border:1px solid var(--indigo);
  padding:7px 12px;background:var(--wit);
}
.merken li::after{
  content:"";position:absolute;top:-1px;right:-1px;
  width:7px;height:7px;border-top:2px solid var(--rood);border-right:2px solid var(--rood);
}

/* leidingscheiding */
.scheiding{
  display:flex;align-items:center;gap:0;
  margin:0;padding:0;border:0;
}
.scheiding::before,.scheiding::after{
  content:"";flex:1;height:1px;background:var(--lijn-i);
}
.scheiding svg{margin:0 12px;flex:none}

/* contact */
.contactnet{display:grid;gap:30px}
.speclijst{
  margin:0;
  display:grid;
  grid-template-columns:minmax(88px,30%) 1fr;
}
.speclijst dt{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--indigo);
  border-top:1px dashed var(--lijn-i);
  padding:12px 10px 12px 0;
  /* Vangnet. Past een label toch niet in zijn kolom — een langer woord, of
     een bredere terugvalletter omdat het weblettertype niet laadde — dan
     breekt het af in plaats van over het gegeven ernaast heen te lopen. */
  overflow-wrap:anywhere;
}
.speclijst dd{
  margin:0;
  border-top:1px dashed var(--lijn-i);
  padding:11px 0;
  font-weight:500;
  overflow-wrap:anywhere;
}
.speclijst dd a{text-decoration:none;border-bottom:1px solid var(--lijn-i)}
.speclijst dd a:hover{border-bottom-color:var(--rood)}
.speclijst .nadruk a{color:var(--rood);font-family:var(--mono);font-weight:600;font-size:1.05rem;border-bottom-color:var(--rood)}
.speclijst dd .hint{display:block;margin-top:4px;font-weight:400;line-height:1.45}
/* Op een smal scherm is de labelkolom vastgezet op 88px: in minmax(88px,30%)
   is 30% daar kleiner dan het minimum. In die 88px (78px na de marge) past
   "VESTIGINGSADRES" niet — dat is 114px aan één woord dat nergens kan
   afbreken, en het liep dus 26px over het adres ernaast heen. Gemeten op
   320px breed. Onder die grens daarom geen twee kolommen meer maar het label
   bóven het gegeven; de streepjeslijn hoort dan alleen nog boven het label.

   De grens ligt op 440px en niet op 400: de kolom is 30% van (breedte - 32),
   dus pas vanaf ongeveer 412px is hij de 114px breed die dat woord nodig
   heeft. Bij 400 bleef er een strook van twaalf pixels over waar het nog
   steeds botste, en bij 420 hield ik maar twee pixels over — te weinig als
   het weblettertype niet laadt en de bredere terugvalletter het overneemt.
   Gemeten op 320, 419, 421, 430 en 440. */
@media (max-width:440px){
  .speclijst{grid-template-columns:1fr}
  .speclijst dt{padding:11px 0 0}
  .speclijst dd{border-top:none;padding:2px 0 12px}
}
address{font-style:normal}
.gebied{
  border:1px solid var(--lijn-i);background:var(--wit);
  padding:20px 18px;
}
.gebied h3{margin-bottom:.5em}
.gebied p{font-size:1rem;color:var(--inkt)}

/* voet */
.voet{
  border-top:1px solid var(--lijn-i);
  padding:30px 0 40px;
  margin-top:10px;
}
.titelblok{
  display:grid;grid-template-columns:1fr;
  gap:1px;background:var(--lijn-i);
  border:1px solid var(--lijn-i);
}
.titelblok div{background:var(--papier);padding:12px 14px}
.titelblok .lbl{
  display:block;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--indigo);margin-bottom:3px;
}
.titelblok strong{font-weight:600;font-size:.95rem}
.voetnoot{
  margin-top:18px;color:var(--grijs);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
}

/* --- groter dan mobiel ----------------------------------------- */
@media (min-width:600px){
  .diensten{grid-template-columns:1fr 1fr}
  .titelblok{grid-template-columns:1fr 1fr}
  .band-rood .kader{padding:30px 28px}
}
@media (min-width:780px){
  /* Vanaf hier past de navigatie wél naast het logo, dus terug naar één regel. */
  :root{ --kop-h:65px; }
  .hoofdnav{order:0;flex-basis:auto;border-top:none}
  .hoofdnav a{min-height:0;border-bottom-width:1px;padding-bottom:3px}
  .hero{padding:52px 0 10px}
  .band-rood .kader{grid-template-columns:1.15fr .85fr;align-items:center;gap:34px}
  .waarom{grid-template-columns:1fr 1fr}
  .contactnet{grid-template-columns:1.1fr .9fr;gap:40px}
  .titelblok{grid-template-columns:2fr 1fr 1fr 1fr}
  .sectie{padding:66px 0}
}
@media (min-width:1000px){
  .hero-net{grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
  .waarom{grid-template-columns:repeat(3,1fr);gap:30px}
}

/* ---- Formulieren -------------------------------------------------------
   Zelfde taal als de rest: dunne indigolijnen, scherpe hoeken, labels in
   mono zodat ze als veldnamen op een formulier ogen en niet als opmaak. */
.formulier{ display:grid; gap:18px; }
.veldrij{ display:grid; gap:18px; grid-template-columns:1fr 1fr; }
@media (max-width:640px){ .veldrij{ grid-template-columns:1fr; } }

.veld{ display:grid; gap:6px; }
.veld > label{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--indigo);
}
.veld .verplicht{ color:var(--rood); }
.veld input, .veld textarea, .veld select{
  font-family:var(--sans); font-size:16px; color:var(--inkt);
  background:var(--wit); border:1.5px solid var(--lijn-i); border-radius:0;
  padding:11px 12px; width:100%;
}
.veld textarea{ min-height:130px; resize:vertical; }
.veld input:focus-visible, .veld textarea:focus-visible, .veld select:focus-visible{
  outline:2px solid var(--rood); outline-offset:1px; border-color:var(--indigo);
}
/* Een bijzin bij een veld, een lijst of een gegeven: kleiner en grijzer dan
   de tekst waar hij bij hoort. Bewust NIET achter `.veld` weggestopt — dan
   doet dezelfde class buiten een formulier niets en oogt de opmerking even
   zwaar als het gegeven zelf. #565049 op papier haalt 7,45:1. */
.hint{ font-size:13px; color:var(--grijs); }

/* Bestandsveld: de standaardknop van de browser past nergens bij, dus een
   eigen label dat als knop dient. */
.bestandsveld{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.bestandsveld input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; }
.bestandsveld .kies{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em;
  border:1.5px solid var(--indigo); color:var(--indigo); background:var(--wit);
  padding:10px 14px; cursor:pointer;
}
.bestandsveld .kies:hover{ background:var(--indigo); color:var(--wit); }
.bestandsveld input[type=file]:focus-visible + .kies{ outline:2px solid var(--rood); outline-offset:2px; }
.bestandsveld .gekozen{ font-size:13.5px; color:var(--grijs); }

.verstuur{
  font-family:var(--sans); font-size:15px; font-weight:600;
  background:var(--rood); color:var(--wit); border:1.5px solid var(--rood);
  border-radius:0; padding:13px 22px; cursor:pointer; justify-self:start;
}
.verstuur:hover{ background:var(--rood-dk); border-color:var(--rood-dk); }
.verstuur:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; }

/* Stappen op de offertepagina */
.stap{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; }
.stap + .stap{ margin-top:38px; padding-top:38px; border-top:1px solid var(--lijn); }
.stapnr{
  font-family:var(--mono); font-size:13px; font-weight:600; color:var(--wit);
  background:var(--indigo); width:34px; height:34px; display:grid; place-items:center;
}
/* Elke stap is een h2: de sectie heeft bewust geen eigen kop, want een
   "01 — Zo werkt het" erboven zou botsen met de grote 1/2/3 ernaast.
   De maat blijft klein; het cijfer draagt de hiërarchie al visueel. */
.stap h2{ margin:2px 0 8px; font-size:19px; letter-spacing:-.01em; }
.fotolijst{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px;
            grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.fotolijst li{ display:flex; gap:9px; align-items:baseline; font-size:14.5px;
               border-left:2px solid var(--rood); padding-left:10px; }
.fotolijst .n{ font-family:var(--mono); font-size:11.5px; color:var(--indigo); }

/* Tekst binnen de technische tekeningen. Labels in mono zodat ze als
   bijschrift op een werktekening lezen, maten iets groter en donkerder. */
.tekenblad svg{ width:100%; height:auto; display:block; }
.tk-lbl{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  fill:var(--indigo); opacity:.75;
}
.tk-maat{
  font-family:var(--mono); font-size:13px; font-weight:500;
  letter-spacing:.04em; fill:var(--indigo);
}

/* Het formulier staat op het rode vlak; de indigo labels vallen daar weg.
   Binnen die band dus wit, en de velden een witte rand in plaats van indigo. */
.band-rood .veld > label{ color:#fff; }
/* Deze twee stonden op 4.49 en 4.29 — net onder de 4.5 die WCAG AA voor
   kleine tekst vraagt. Op rood is er weinig marge, dus hier bijna vol wit. */
.band-rood .veld .verplicht{ color:#FFE4E8; }
.band-rood .hint{ color:rgba(255,255,255,.93); }
.band-rood .veld input,
.band-rood .veld textarea,
.band-rood .veld select{ border-color:rgba(255,255,255,.55); }
/* De keuzelijst hoort hier ook bij. Stond hij er niet in, dan won de regel
   `.veld select:focus-visible` (0,2,1) het van de algemene `.band-rood
   :focus-visible` (0,2,0) hierboven, en kreeg het vakje een RODE focusrand op
   de rode band: 1,00:1, dus volstrekt onzichtbaar. Wie met de Tab-toets door
   het formulier loopt zag dan niet waar hij was. */
.band-rood .veld input:focus-visible,
.band-rood .veld select:focus-visible,
.band-rood .veld textarea:focus-visible{ outline-color:#fff; border-color:#fff; }
.band-rood .bestandsveld .kies{
  border-color:#fff; color:#fff; background:transparent;
}
.band-rood .bestandsveld .kies:hover{ background:#fff; color:var(--rood); }
.band-rood .bestandsveld .gekozen{ color:rgba(255,255,255,.85); }
.band-rood .verstuur{
  background:#fff; color:var(--rood); border-color:#fff;
}
.band-rood .verstuur:hover{ background:var(--papier); border-color:var(--papier); }
.band-rood .verstuur:focus-visible{ outline-color:#fff; outline-offset:3px; }
.band-rood .voetnoot, .band-rood .voetnoot a{ color:rgba(255,255,255,.9); }

/* Een sectiekop binnen het rode vlak. `.sectie-kop .idx` en `.sectie-kop
   p.intro` staan verderop in dit bestand dan `.band-rood .mono`/`.band-rood p`
   en zijn even specifiek, dus wonnen ze: het volgnummer kwam indigo op rood
   te staan en de introzin grijs op rood. Allebei donker-op-donker. Daarom
   hier expliciet, ná die regels. */
.band-rood .sectie-kop{ border-bottom-color:rgba(255,255,255,.45); }
.band-rood .sectie-kop .idx{ color:rgba(255,255,255,.9); }
.band-rood .sectie-kop p.intro{ color:#fff; }

/* Gewone knop voor in de tekst. Niet te verwarren met .telknop: die is het
   grote telefoonnummer op het rode vlak, wit en met nowrap, en dus ongeschikt
   als linkknop op een lichte achtergrond. */
.knop{
  display:inline-block;
  font-family:var(--sans); font-size:15px; font-weight:600;
  line-height:1.2;
  color:var(--indigo); background:var(--wit);
  border:1.5px solid var(--indigo); border-radius:0;
  padding:12px 18px; text-decoration:none;
  max-width:100%;
}
.knop:hover{ background:var(--indigo); color:var(--wit); }
.knop:focus-visible{ outline:2px solid var(--rood); outline-offset:2px; }

/* --- foutmeldingen en statusregels bij formulieren ---------------- */
/* Hoort bij formulier.js. De formulieren staan op novalidate, dus deze
   meldingen zijn de enige die de bezoeker te zien krijgt. */
.veldfout{
  font-family:var(--sans); font-size:13.5px; font-weight:500;
  margin:6px 0 0; color:var(--rood);
}
.formulier [aria-invalid="true"]{ border-color:var(--rood); border-width:2px; }

.formmelding{
  font-family:var(--sans); font-size:15px;
  margin:0 0 16px; padding:12px 14px;
  border-left:3px solid var(--indigo); background:var(--wit);
}
.formmelding:empty{ display:none; }
.formmelding.goed{ border-left-color:#1B7F4C; }
.formmelding.waarschuwing{ border-left-color:var(--rood); }
.formmelding a{ color:var(--indigo); }

/* Op het rode vlak zijn indigo en rood allebei onleesbaar; daar wit. */
.band-rood .veldfout{ color:#FFE4E8; }
.band-rood .formulier [aria-invalid="true"]{ border-color:#FFE4E8; }
.band-rood .formmelding{
  background:rgba(0,0,0,.16); border-left-color:#fff; color:#fff;
}
.band-rood .formmelding a{ color:#fff; }
.band-rood .formmelding.goed,
.band-rood .formmelding.waarschuwing{ border-left-color:#fff; }

/* --- de tekeningen aan de kleurvariabelen koppelen ---------------- */
/* De inline SVG's (de ketel-doorsnede, de maatschetsen) hebben hun kleuren als
   presentatieattribuut in de HTML staan: fill="#383872", stroke="#C8102E",
   enzovoort. Op 44 plekken. Zonder deze regels bleven die achter in de oude
   kleur bij een paletwissel, terwijl ze juist het hart van het ontwerp zijn.

   LET OP BIJ HET LEZEN: #383872 en #C8102E hieronder zijn GEEN kleuren meer.
   Het zijn de letterlijke attribuutwaarden die nog in de HTML staan; deze
   regels vangen ze op en vervangen ze door de huidige variabelen. Een
   CSS-regel wint altijd van een presentatieattribuut (die telt als
   specificiteit 0), dus de HTML hoefde niet aangepast te worden.

   Waarom niet gewoon fill="var(--indigo)" in de SVG's zelf: var() in een
   presentatieattribuut wordt niet door elke browser ondersteund; in een
   CSS-regel wel.

   Nagemeten: 97 blauwe en 17 rode SVG-elementen volgen hiermee de variabelen,
   inclusief de pijlpunten van de maatlijnen en de vlammen bij de brander.

   Komt er ooit een tekening bij met een andere hexwaarde, voeg die hier dan
   toe — anders loopt hij stil uit de pas met de rest. */
[fill="#383872"]   { fill:var(--indigo) }
[stroke="#383872"] { stroke:var(--indigo) }
[fill="#C8102E"]   { fill:var(--rood) }
[stroke="#C8102E"] { stroke:var(--rood) }

/* --- WhatsApp ----------------------------------------------------- */
/* De zwevende knop is het WhatsApp-merkteken zelf: de ballon met de hoorn, in
   een cirkel. Geen zelfbedacht vierkant eromheen — de vorm is de herkenning.
   Rond mag hier wel, ook al bestaat de site verder uit rechte lijnen: dit is
   het pictogram van een andere dienst, geen onderdeel van de huisstijl.

   Het witte randje is GEEN versiering. De knop zweeft ook over het magenta
   vlak, en daar haalt het groen maar 1.43:1 — dan is hij zo goed als
   onvindbaar. Het witte randje houdt hem op elke ondergrond zichtbaar.
   Haal je dat weg, meet dan eerst opnieuw boven een magenta band. */
.wa-zwevend{
  position:fixed; right:14px; bottom:14px; z-index:60;
  width:56px; height:56px;
  display:grid; place-items:center;
  background:var(--wa); color:#fff;
  border:2px solid #fff; border-radius:50%;
  box-shadow:0 3px 12px rgba(0,0,0,.20);
  text-decoration:none;
}
.wa-zwevend:hover{ background:var(--wa-dk); color:#fff; }
.wa-zwevend:focus-visible{ outline:3px solid var(--indigo); outline-offset:3px; }
@media (min-width:780px){
  .wa-zwevend{ right:20px; bottom:20px; }
}
/* De knop zweeft over de voet heen; daar dus wat lucht onder. */
.voet{ padding-bottom:86px; }
@media (min-width:780px){ .voet{ padding-bottom:0; } }

/* WhatsApp als gewone keuze in de tekst, naast bellen en mailen. */
.wa-knop{
  display:inline-flex; align-items:center; gap:9px;
  min-height:44px; padding:11px 16px;
  font-family:var(--sans); font-size:15px; font-weight:600; line-height:1.2;
  background:var(--wa); color:#fff; text-decoration:none;
  border:1.5px solid var(--wa-dk);
}
.wa-knop:hover{ background:var(--wa-dk); color:#fff; }
.wa-knop svg{ flex:none }
.band-rood .wa-knop{ border-color:#fff; }

/* Honingpot: een veld dat mensen niet zien maar bots wel invullen.
   Niet display:none — sommige bots slaan verborgen velden juist over.
   Wel uit beeld, zonder ruimte in te nemen, en niet aanwijsbaar. */
.honingpot{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}