/* =====================================================================
   FlameStop | thema "Staalskelet"
   Beeldtaal: een staalconstructie in opbouw. Kolommen en liggers vormen
   het raster van de pagina, knooppunten met kopplaten en bouten ordenen
   de koppen. Grijstinten als basis, rood (#C8100C) als signaalkleur.

   Opbouw van dit bestand:
    1-18  het goedgekeurde ontwerp (ontwerp-staalskelet.html), met kleine
          aanpassingen voor WordPress (menu zonder JavaScript, beheerbalk,
          dienstbalk op middelbreedte);
    19    onderdelen die alleen in het thema bestaan (paginakop, tekst uit
          de editor, formulier, projecten, vacatures, zoeken, paginering);
    19b   meer lucht; 19c tikvlakken op telefoons en tablets;
    19d   grote standaardletter in een smal vak;
    20    afdrukken; 21 contrastmodus (forced colors).
   Lettertypes: assets/fonts/lettertypes.css (wordt vóór dit bestand geladen).
   De blokeditor gebruikt assets/css/editor.css (zelfde opmaak van de tekst).
   ===================================================================== */

/* ---------- 1. Variabelen ---------- */
:root{
  /* Alleen een lichte opmaak: een browser met automatische donkere modus (zoals Chrome op Android)
     rekent de site dan niet zelf om naar donker (zie ook de meta-tag in inc/bestanden.php) */
  color-scheme:only light;
  --wit:#FFFFFF;
  --staal-50:#F6F7F9;
  --staal-100:#EEF0F3;
  --staal-200:#E1E5EA;
  --staal-300:#C9CFD7;
  --staal-400:#A3ABB6;
  --staal-500:#7D8694;
  --staal-600:#5B6472;
  --staal-700:#414855;
  --antraciet:#22262F;
  --antraciet-2:#2E333C;
  --antraciet-3:#3A404B;
  --tekst:#22262F;
  --tekst-zacht:#4A5260;
  --tekst-label:#5B6472;
  --op-donker:#D3D7DE;
  --op-donker-zacht:#A9B0BB;
  --rood:#C8100C;
  --rood-donker:#A00D0A;
  --rood-licht:#FBEAE9;
  --rood-rand:#EFC1BF;
  --vlam:linear-gradient(90deg,#FF6310 0%,#EF3013 50%,#C8130E 100%);
  --focus:#C8100C;
  /* Geborsteld staal: fijne horizontale strepen, heel subtiel */
  --geborsteld:repeating-linear-gradient(0deg,rgba(255,255,255,.30) 0 1px,rgba(255,255,255,0) 1px 3px),repeating-linear-gradient(0deg,rgba(34,38,47,.022) 0 1px,rgba(34,38,47,0) 1px 5px);
  /* Typografie */
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  --breed:120%;
  /* Maten */
  --max:1280px;
  --gutter:clamp(16px,4vw,48px);
  --kop-hoogte:76px;
}

/* ---------- 2. Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--kop-hoogte) + 16px)}
body{margin:0;background:var(--wit);color:var(--tekst);font-family:var(--font);font-size:1.0625rem;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img{display:block;max-width:100%;height:auto}
svg{max-width:100%}
/* Geen automatisch afbreken ('be-staat', 'door-voering'): een woord breekt alleen als het echt niet past */
h1,h2,h3,h4{font-family:var(--font);font-stretch:var(--breed);font-weight:800;line-height:1.08;letter-spacing:-.012em;margin:0;color:var(--antraciet);overflow-wrap:break-word;hyphens:manual;text-wrap:balance}
p,li,dd,td,th,figcaption,summary{overflow-wrap:break-word;hyphens:manual}
/* Alleen op de kleinste schermen: een lange kop van één woord (Projectadvisering, Privacyverklaring)
   met een streepje afbreken in plaats van zonder streepje afkappen */
@media (max-width:359px){ h1,h2,h3,h4{hyphens:auto} }
p{margin:0 0 1em}
a{color:var(--rood);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--rood-donker);text-decoration-thickness:2px}
/* Een telefoonnummer nooit over twee regels */
a[href^="tel:"]{white-space:nowrap}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
button{font:inherit}
.visueel-verborgen{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter;vertical-align:-.2em}

/* Skiplink */
.skiplink{position:absolute;left:16px;top:-120px;z-index:100;background:var(--antraciet);color:#fff;padding:12px 18px;font-weight:600;text-decoration:none}
.skiplink:focus{top:12px;color:#fff;outline-color:#fff}

/* Container: het "vak" tussen de twee kolommen */
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- 3. Knoppen ---------- */
/* De knop van het wachtwoordformulier (zie 19.1) is een gewone rode knop */
.knop,.post-password-form input[type="submit"]{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:.75em 1.3em;font-family:var(--font);font-weight:650;font-size:1rem;line-height:1.15;font-stretch:108%;border:2px solid transparent;border-radius:2px;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.knop .ico{transition:transform .2s}
.knop:hover .ico{transform:translateX(3px)}
.knop--rood,.post-password-form input[type="submit"]{background:var(--rood);color:#fff}
.knop--rood:hover,.post-password-form input[type="submit"]:hover{background:var(--rood-donker);color:#fff}
.knop--rand{border-color:var(--antraciet);color:var(--antraciet);background:transparent}
.knop--rand:hover{background:var(--antraciet);color:#fff}
.knop--wit{background:#fff;color:var(--antraciet)}
.knop--wit:hover{background:var(--staal-200);color:var(--antraciet)}
.knop--rand-licht{border-color:#fff;color:#fff}
.knop--rand-licht:hover{background:#fff;color:var(--antraciet)}
.knoppen{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- 4. Bovenbalken en kop ---------- */
/* De hele kop is "sticky"; de dienstbalk schuift weg, de hoofdbalk blijft staan */
.kop{position:sticky;top:-44px;z-index:50;background:#fff;box-shadow:0 1px 0 var(--staal-300)}
/* Ingelogd: de beheerbalk van WordPress staat vast bovenaan (32 px, op telefoons 46 px; smaller dan 600 px schuift hij mee) */
.admin-bar .kop{top:-12px}
@media (max-width:782px){ .admin-bar .kop{top:2px} }
@media (max-width:600px){ .admin-bar .kop{top:-44px} }
/* Zolang het menu open is, ligt de kop boven de cookiemelding (z-index 200), zodat elk menu-item aan te tikken is */
.kop:has(.hoofdnav.open){z-index:201}
/* Krijgt een link in de dienstbalk de toetsenbordfocus op een gescrolde pagina, dan schuift de dienstbalk
   terug in beeld (anders staat de focus boven het scherm) */
.kop:has(.dienstbalk :focus-visible){top:0}
.admin-bar .kop:has(.dienstbalk :focus-visible){top:32px}
@media (max-width:782px){ .admin-bar .kop:has(.dienstbalk :focus-visible){top:46px} }
@media (max-width:600px){ .admin-bar .kop:has(.dienstbalk :focus-visible){top:0} }
.dienstbalk{background:var(--staal-100);border-bottom:1px solid var(--staal-300);font-family:var(--mono);font-size:.78rem;color:var(--tekst-zacht)}
.dienstbalk .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:44px}
.dienstbalk ul{list-style:none;margin:0 0 0 auto;padding:0;display:flex;gap:22px;align-items:center}
/* Elke link in de dienstbalk is minstens 44 px hoog (aanraakvlak); het telefoonnummer is wat groter en vet */
.dienstbalk a{color:var(--tekst);text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-height:44px;padding-inline:2px}
.dienstbalk .dienstbalk__tel{font-weight:600;color:var(--antraciet);font-size:.86rem;min-width:44px}
.dienstbalk a:hover{color:var(--rood);text-decoration:underline}
.dienstbalk .ico{width:15px;height:15px}
.dienstbalk__slogan{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Dienstbalk op middelbreedte: de slogan wordt eerst korter en verdwijnt daarna helemaal,
   zodat hij nooit halverwege wordt afgekapt ("heel Nederla…"). Met de link naar de
   klantomgeving is er minder ruimte, dus gaat dat eerder. De breekpunten staan in em
   (68.6875em = 1099 px en 59.9375em = 959 px bij de standaardletter van 16 px): met een grotere
   standaardletter verdwijnt de tekst dus eerder, in plaats van afgekapt te worden. */
@media (max-width:68.6875em){ .dienstbalk__werkgebied{display:none} }
@media (max-width:59.9375em){ .dienstbalk--inlog .dienstbalk__slogan{display:none} }
/* Minstens de kophoogte, maar meegroeien met een grotere standaardletter in de browser */
.hoofdbalk .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:auto;min-height:var(--kop-hoogte)}
/* De link van het logo is minstens 44 px hoog (aanraakvlak); het logo zelf blijft even groot */
.logo{flex:none;display:flex;align-items:center;min-height:44px}
.logo img{height:28px;width:auto}
.logo .custom-logo{height:28px;width:auto;max-width:240px;object-fit:contain}
.hoofdnav{flex:1;display:flex;justify-content:flex-end}
.hoofdnav ul{display:flex;list-style:none;margin:0;padding:0}
.hoofdnav a{display:block;padding:10px 9px;color:var(--tekst);text-decoration:none;font-weight:550;font-size:.96rem;position:relative;white-space:nowrap}
.hoofdnav a::after{content:"";position:absolute;left:9px;right:9px;bottom:3px;height:3px;background:var(--rood);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.hoofdnav a:hover{color:var(--antraciet)}
.hoofdnav a:hover::after{transform:scaleX(1)}
/* Net boven 1240 px wat smallere items, zodat een menu van zeven items nog naast het logo past
   (ook met een schuifbalk van 15 px), in plaats van achter de knop Menu */
@media (min-width:1240px) and (max-width:1365px){ .hoofdnav a{padding-inline:6px} .hoofdnav a::after{left:6px;right:6px} }
/* Speerpunt in het menu: klein rood blokje voor "Doorvoeringen" */
/* "Klantomgeving" in het menu: een klein slotje voor de naam */
.hoofdnav a.nav__klant{display:inline-flex;align-items:center;gap:6px}
.hoofdnav .nav__ico{width:15px;height:15px;flex:none;color:var(--staal-700)}
.hoofdnav a.nav__klant:hover .nav__ico{color:var(--rood)}
.hoofdnav a.nav__speer::before{content:"";display:inline-block;width:7px;height:7px;background:var(--rood);margin-right:7px;vertical-align:.1em}
/* Huidige pagina (aria-current="page") of het overzicht waar de pagina onder valt (aria-current="true",
   bijv. Diensten op een dienstpagina; inc/menus.php): de rode streep blijft staan */
.hoofdnav a[aria-current]::after{transform:scaleX(1)}
.kop__acties{display:flex;align-items:center;gap:10px;flex:none}
.kop__knop{padding:.7em 1.1em}
.menuknop{display:none;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 12px;background:#fff;border:1.5px solid var(--antraciet);border-radius:2px;color:var(--antraciet);font-weight:650;cursor:pointer}
.menuknop .ico{width:22px;height:22px}
.menuknop .dicht{display:none}
.menuknop[aria-expanded="true"] .open{display:none}
.menuknop[aria-expanded="true"] .dicht{display:block}
.alleen-mobiel{display:none}

.hoofdnav .sub-menu{display:none}

/* Uitklapmenu: smaller dan 1240 px, en ook breder als het menu niet op één regel past
   (dan zet thema.js de klasse .kop--compact op de kop). Alleen met JavaScript; zonder
   JavaScript staan de menu-items gewoon zichtbaar onder het logo (zie verderop). */
@media (max-width:1239px){
  .js .menuknop{display:inline-flex}
  .js .hoofdnav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--staal-300);box-shadow:0 18px 30px -18px rgba(34,38,47,.35);display:none;max-height:calc(100vh - var(--kop-hoogte) - 38px);max-height:calc(100dvh - var(--kop-hoogte) - 38px);overflow:auto;overscroll-behavior:contain}
  .js .hoofdnav.open{display:block}
  .js .hoofdnav ul{flex-direction:column;padding:6px var(--gutter) 22px}
  .js .hoofdnav li{border-bottom:1px solid var(--staal-200)}
  .js .hoofdnav a{padding:14px 0;font-size:1.06rem;white-space:normal}
  .js .hoofdnav a::after{display:none}
  /* Huidige pagina in het uitklapmenu: een rood streepje links (de streep eronder staat hier uit) */
  .js .hoofdnav a[aria-current]{border-left:4px solid var(--rood);padding-left:12px}
  .js .hoofdnav .alleen-mobiel{display:block;border-bottom:0;padding-top:14px}
  .js .hoofdnav .alleen-mobiel a.knop{display:flex;color:#fff;padding:.75em 1.3em}
  .js .hoofdnav .alleen-mobiel a.link-inlog,.js .hoofdnav .menu__contact a{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.9rem}
}
.js .kop--compact .menuknop{display:inline-flex}
.js .kop--compact .hoofdnav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--staal-300);box-shadow:0 18px 30px -18px rgba(34,38,47,.35);display:none;max-height:calc(100vh - var(--kop-hoogte) - 38px);max-height:calc(100dvh - var(--kop-hoogte) - 38px);overflow:auto;overscroll-behavior:contain}
.js .kop--compact .hoofdnav.open{display:block}
.js .kop--compact .hoofdnav ul{flex-direction:column;padding:6px var(--gutter) 22px}
.js .kop--compact .hoofdnav li{border-bottom:1px solid var(--staal-200)}
.js .kop--compact .hoofdnav a{padding:14px 0;font-size:1.06rem;white-space:normal}
.js .kop--compact .hoofdnav a::after{display:none}
.js .kop--compact .hoofdnav a[aria-current]{border-left:4px solid var(--rood);padding-left:12px}
.js .kop--compact .hoofdnav .alleen-mobiel{display:block;border-bottom:0;padding-top:14px}
.js .kop--compact .hoofdnav .alleen-mobiel a.knop{display:flex;color:#fff;padding:.75em 1.3em}
.js .kop--compact .hoofdnav .alleen-mobiel a.link-inlog,.js .kop--compact .hoofdnav .menu__contact a{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.9rem}
.admin-bar .hoofdnav{max-height:calc(100vh - var(--kop-hoogte) - 70px)}
/* Onderaan het uitklapmenu: telefoon en e-mail (header.php), zodat een bezoeker ook halverwege een pagina
   met twee tikken kan bellen of mailen. Elke link minstens 44 px hoog. */
.menu__contact a{min-height:44px;color:var(--antraciet)}
.menu__contact a:hover{color:var(--rood)}
/* Is dezelfde link (telefoon, e-mail, inloggen) in de dienstbalk bovenaan de pagina nog (deels) te zien, ook
   tijdens het wegschuiven, dan zet thema.js er in het menu de klasse "dubbel" op: nooit twee keer hetzelfde
   tegelijk in beeld. Zonder JavaScript regelt de CSS hieronder dat. */
.hoofdnav .dubbel{display:none!important}
/* "Offerte aanvragen" staat vanaf 560 px al als knop in de balk: dan niet nog een keer in het menu */
@media (min-width:35em){ .hoofdnav .alleen-smal{display:none!important} }

/* Zonder JavaScript: de kop staat gewoon bovenaan (niet vast) en de menu-items staan
   als rij onder het logo, zodat elke pagina bereikbaar blijft. De dienstbalk schuift dan niet weg, dus
   wat daar al staat (telefoon, inloggen, vanaf 47.5em ook het e-mailadres) komt niet nog een keer in de
   rij: alleen "Offerte aanvragen" (onder 560 px) en op smallere schermen het e-mailadres. */
html:not(.js) .hoofdnav ul{flex-wrap:wrap}
@media (max-width:1239px){
  html:not(.js) .kop{position:relative;top:auto}
  html:not(.js) .hoofdbalk .wrap{flex-wrap:wrap;padding-block:14px;row-gap:6px}
  html:not(.js) .hoofdnav{order:3;flex:1 1 100%;justify-content:flex-start}
  html:not(.js) .hoofdnav ul{gap:0 4px}
  html:not(.js) .hoofdnav a{padding:10px 8px 10px 0}
  html:not(.js) .hoofdnav .alleen-smal{display:block}
  html:not(.js) .hoofdnav .alleen-smal a.knop{padding:.6em 1em;color:#fff}
  html:not(.js) .hoofdnav .menu__contact{display:flex;flex-wrap:wrap;gap:0 16px;flex-basis:100%}
  html:not(.js) .hoofdnav .menu__contact a{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.9rem}
  html:not(.js) .hoofdnav .menu__contact a[href^="tel:"]{display:none}
}
/* Breekpunt in em (47.4375em = 759 px bij 16 px): met een grotere standaardletter verdwijnen de slogan en het
   e-mailadres (dat in hetzelfde blok staat) eerder uit de dienstbalk. Het e-mailadres blijft bereikbaar via het
   menu en de voet. De regel zonder JavaScript (de eerste regel hieronder) volgt hetzelfde breekpunt
   (47.5em = 760 px). */
@media (min-width:47.5em) and (max-width:1239px){ html:not(.js) .hoofdnav .menu__contact{display:none} }
@media (max-width:47.4375em){
  .dienstbalk__slogan,.dienstbalk .li-mail{display:none}
  .dienstbalk .wrap{justify-content:flex-end}
}
/* Breekpunt in em (34.9375em = 559 px bij de standaardletter van 16 px): het volgt een grotere
   standaardletter in de browser, zodat de knop en het logo dan eerder plaatsmaken. */
@media (max-width:34.9375em){
  .kop__knop{display:none}
  .logo img{height:26px}
}
/* Tot 37.6875em (603 px bij 16 px) staat in de menuknop alleen het pictogram: tussen 560 en 604 px passen
   logo, "Offerte aanvragen" en een knop met het woord erbij niet naast elkaar (de knop viel tot 580 px half
   buiten beeld en stond daarboven tegen de rand van het scherm).
   Het woord "Menu" is dan alleen voor het oog weg (zelfde verberging als .visueel-verborgen): met display:none
   viel het ook uit de naam voor een schermlezer ("openen of sluiten"). Nu heet de knop op elke breedte
   "Menu openen of sluiten". */
@media (max-width:37.6875em){
  .menuknop .menutekst{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .menuknop{padding:0}
}
/* Smal: "Inloggen klantomgeving" in de dienstbalk wordt "Inloggen", alleen voor het oog; een schermlezer
   hoort nog steeds de hele naam */
@media (max-width:389px){ .dienstbalk .kort-weg{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} }
/* Heel smalle telefoons (bijv. 280 px): kleiner logo, zodat de menuknop helemaal in beeld blijft */
@media (max-width:329px){ .logo img,.logo .custom-logo{height:22px} .logo .custom-logo{max-width:190px} .hoofdbalk .wrap{gap:12px} }

/* ---------- 5. Staalskelet: kolommen, liggers, knooppunten ---------- */
/* Kolommen: twee I-profielen langs de randen van elk vak (alleen breder dan 760px) */
.frame{position:relative;padding-block:clamp(64px,9vw,120px)}
.frame::before,.frame::after{content:"";position:absolute;top:0;bottom:0;width:12px;pointer-events:none;z-index:0;
  background:
    linear-gradient(90deg,var(--k-flens,#C9CFD7) 0 2px,rgba(0,0,0,0) 2px 10px,var(--k-flens,#C9CFD7) 10px 12px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,rgba(255,255,255,0) 1px 3px),
    linear-gradient(90deg,var(--k-lijf-a,#E6E9ED),var(--k-lijf-b,#DCE0E5));
  transform-origin:50% 100%}
.frame::before{left:calc(var(--gutter) / 2 - 6px)}
.frame::after{right:calc(var(--gutter) / 2 - 6px)}
.frame > *{position:relative;z-index:1}
@media (max-width:759px){ .frame::before,.frame::after{display:none} }

/* Liggers: horizontale I-profielen als sectiescheiding, met kopplaten en bouten */
.ligger{position:relative;height:1px;margin-top:-1px;z-index:3}
.ligger__in{position:absolute;left:0;right:0;top:-8px;height:16px;max-width:calc(var(--max) + 2 * var(--gutter));margin-inline:auto}
.ligger__profiel{position:absolute;top:0;bottom:0;left:calc(var(--gutter) / 2);right:calc(var(--gutter) / 2);overflow:hidden;
  background:
    linear-gradient(180deg,var(--staal-600) 0 3px,rgba(0,0,0,0) 3px 13px,var(--staal-600) 13px 16px),
    repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 178px,var(--staal-400) 178px 180px),
    var(--geborsteld),
    linear-gradient(180deg,#D6DBE1 0%,#E7EAEE 45%,#C3C9D1 100%);
  box-shadow:0 3px 0 rgba(34,38,47,.07)}
/* Rode brandwerende coating die over het profiel wordt "aangebracht" */
.ligger__coating{position:absolute;inset:-1px 0;background:linear-gradient(180deg,#A00D0A 0 3px,#C8100C 3px 12px,#A00D0A 12px);transform-origin:0 50%}
.ligger__label{position:absolute;right:calc(var(--gutter) / 2 + 24px);top:22px;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--rood);background:#fff;padding:2px 8px;border:1px solid var(--rood-rand);white-space:nowrap}
.knoop{position:absolute;top:-10px;width:24px;height:36px;overflow:visible}
.knoop--l{left:calc(var(--gutter) / 2 - 12px)}
.knoop--r{right:calc(var(--gutter) / 2 - 12px)}
.knoop__plaat{fill:#C9CFD7;stroke:var(--staal-600);stroke-width:1}
@media (max-width:759px){
  .ligger__profiel{left:0;right:0}
  .knoop{display:none}
  .ligger__label{right:16px}
}

/* Kopplaat met vier bouten (sectienummers, tijdlijn) */
.plaat{width:44px;height:44px;flex:none;overflow:visible}
.plaat__vlak{fill:var(--staal-200);stroke:var(--staal-600);stroke-width:1.5}
.plaat__nr{font-family:var(--mono);font-size:14px;font-weight:600;fill:var(--rood);text-anchor:middle}
.bout{transform-box:fill-box;transform-origin:center}

/* ---------- 6. Sectiekoppen ---------- */
.sectie{position:relative}
.sectie--staal{background-color:var(--staal-100);background-image:var(--geborsteld)}
.sectie--donker{background:var(--antraciet);color:var(--op-donker);--k-flens:#4A515E;--k-lijf-a:#2E333C;--k-lijf-b:#2A2F38}
.sectie--donker h2,.sectie--donker h3{color:#fff}
.sectie--donker :focus-visible{outline-color:#fff}
.sectiekop{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tekst-label);margin:0 0 28px}
.sectiekop__naam{font-weight:600;color:var(--antraciet)}
.sectiekop__lijn{flex:1;height:2px;background:var(--staal-300);position:relative;min-width:24px}
.sectiekop__lijn::after{content:"";position:absolute;right:0;top:-5px;width:2px;height:12px;background:var(--staal-400)}
.sectie--donker .sectiekop{color:var(--op-donker-zacht)}
.sectie--donker .sectiekop__naam{color:#fff}
.sectie--donker .sectiekop__lijn{background:var(--antraciet-3)}
.sectie--donker .plaat__vlak{fill:var(--antraciet-2);stroke:var(--staal-500)}
.sectie--donker .plaat__nr{fill:#fff}

.kopblok{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px 64px;align-items:end;margin-bottom:clamp(36px,5vw,56px)}
.kopblok h2{max-width:22ch}
.kopblok .intro{margin:0}
h2{font-size:clamp(1.75rem,1.05rem + 2.6vw,3rem)}
.intro{font-size:1.14rem;color:var(--tekst-zacht);max-width:40em}
.sectie--donker .intro{color:var(--op-donker)}
@media (max-width:899px){ .kopblok{grid-template-columns:minmax(0,1fr);align-items:start} }

.label{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-label);display:inline-flex;align-items:center;gap:10px;margin:0 0 20px}
.label::before{content:"";width:10px;height:10px;background:var(--rood);flex:none}

/* ---------- 7. Hero ---------- */
.hero{background-color:var(--staal-100);background-image:linear-gradient(115deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 35%,rgba(255,255,255,.35) 62%,rgba(255,255,255,0) 100%),var(--geborsteld),linear-gradient(180deg,#F3F5F7 0%,#E5E8EC 100%)}
.hero .frame{padding-block:clamp(44px,6vw,88px) clamp(56px,6vw,88px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(2.2rem,1.1rem + 3.4vw,3.9rem);font-stretch:118%;line-height:1.02;margin:0 0 24px}
.hero h1 span{display:block;color:var(--staal-600)}
.hero__lead{font-size:clamp(1.08rem,1rem + .35vw,1.25rem);color:var(--tekst-zacht);max-width:34em;margin-bottom:28px}
.reactie{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.82rem;color:var(--tekst-zacht);margin:22px 0 0}
.reactie__stip{width:9px;height:9px;background:var(--rood);border-radius:50%;flex:none}
@media (max-width:999px){ .hero__grid{grid-template-columns:minmax(0,1fr)} }

/* Tekenblad rond de illustraties */
.tekenblad{margin:0;background:#fff;border:1px solid var(--staal-300);box-shadow:0 1px 0 var(--staal-200),0 28px 50px -30px rgba(34,38,47,.45);position:relative}
.tekenblad__kop{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--staal-300);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-label)}
.tekenblad__kop span:first-child{white-space:nowrap}
.tekenblad__kop span:last-child{text-align:right}
.tekenblad > svg{display:block;width:100%;height:auto;padding:10px 10px 4px}
/* Legenda's onder de tekeningen: kolombreedte in rem (10.625rem = 170 px bij 16 px) en nooit breder dan het
   vak, zodat een grotere standaardletter minder kolommen geeft in plaats van tekst over elkaar. De cirkel
   met het nummer groeit mee met de letter (bij 16 px blijft hij 22 px). */
.legenda{list-style:none;margin:0;padding:14px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10.625rem),1fr));gap:8px 18px;border-top:1px solid var(--staal-300);font-size:.86rem;line-height:1.35}
.legenda li{display:flex;gap:9px;align-items:center}
.legenda .n{font-family:var(--mono);font-size:.72rem;font-weight:600;border:1.5px solid var(--antraciet);border-radius:50%;width:max(22px,1.9em);height:max(22px,1.9em);display:inline-grid;place-items:center;flex:none;background:#fff}
.titelblok{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-top:2px solid var(--antraciet);font-family:var(--mono);font-size:.72rem;color:var(--tekst);line-height:1.3}
.titelblok div{padding:7px 10px;border-right:1px solid var(--staal-300);overflow-wrap:anywhere}
.titelblok div:last-child{border-right:0}
.titelblok span{display:block;color:var(--tekst-label);text-transform:uppercase;letter-spacing:.06em;font-size:.66rem;margin-bottom:2px}
/* Onder 560 px staat er geen titelblok (zie 19b, tekeningen op telefoons) */

/* Teksten in de SVG-tekeningen */
.skelet__svg text,.doorsnede__svg text,.plattegrond__svg text{font-family:var(--mono)}
.sk-as circle{fill:#fff;stroke:var(--staal-600);stroke-width:1.2}
/* Over ons: bedrijfspand met staalskelet (lijntekening die zichzelf tekent, zie 18. Animaties) */
.pand__svg{display:block;width:100%;height:auto;padding:14px 16px 6px}
.pand__svg text{font-family:var(--mono)}
.pd-as circle{fill:#fff;stroke:var(--staal-600);stroke-width:1.2}
.pd-as text{font-size:13px;font-weight:600;fill:var(--antraciet);text-anchor:middle}
.sk-as text{font-size:13px;font-weight:600;fill:var(--antraciet);text-anchor:middle}
.sk-niveau text{font-size:12px;fill:var(--tekst-label);letter-spacing:.04em}
.sk-plaat{fill:#C9CFD7;stroke:var(--staal-600);stroke-width:.8}
.sk-callouts circle{fill:#fff;stroke:var(--antraciet);stroke-width:1.5}
.sk-callouts text{font-size:13px;font-weight:600;fill:var(--antraciet);text-anchor:middle}

/* De strook onder de hero (één strook: VCA, gecertificeerde medewerkers, werkgebied), met boutjes als scheiding */
.vertrouwen{list-style:none;margin:clamp(36px,5vw,56px) 0 0;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;background:rgba(255,255,255,.6);border:1px solid var(--staal-300);border-left:4px solid var(--antraciet);font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--antraciet)}
.vertrouwen li{display:inline-flex;align-items:center;gap:10px}
.vertrouwen li + li::before{content:"";width:9px;height:9px;background:var(--staal-500);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);margin-right:12px;flex:none}
.vertrouwen__ico{width:28px;height:28px;flex:none;display:grid;place-items:center;border:1.5px solid var(--staal-600);background:var(--staal-100);color:var(--antraciet)}
.vertrouwen__ico .ico{width:16px;height:16px;stroke-width:2}
@media (max-width:559px){ .vertrouwen{flex-direction:column;align-items:flex-start} .vertrouwen li + li::before{display:none} }

/* ---------- 8. Sectie 01: doorvoeringen ---------- */
.doorvoer__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:start}
.doorvoer__top{margin-top:clamp(56px,7vw,96px)}
.doorvoer__sub{font-size:clamp(1.35rem,1.05rem + 1vw,1.8rem);margin:0 0 14px}
.doorvoer__top p{color:var(--tekst-zacht)}

/* Opvallende link naar de pagina over doorvoeringen */
.meerlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:700;font-stretch:110%;font-size:1.08rem;color:var(--antraciet);text-decoration:none;border-bottom:3px solid var(--rood);padding:4px 0 6px;margin-top:10px}
.meerlink .ico{color:var(--rood);transition:transform .2s}
.meerlink:hover{color:var(--rood)}
.meerlink:hover .ico{transform:translateX(4px)}
.sectie--donker .meerlink{color:#fff}
.sectie--donker .meerlink .ico{color:#fff}
.sectie--donker .meerlink:hover{color:#fff;border-bottom-color:#fff}
/* Samenvatting onder de argumenten */
.samengevat{margin-top:28px;background:var(--antraciet);color:var(--op-donker);padding:clamp(20px,3vw,32px);border-left:6px solid var(--rood);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 36px;align-items:center}
.samengevat p{margin:0}
.samengevat strong{color:#fff}
.samengevat .label{color:var(--op-donker-zacht);margin-bottom:10px}
.samengevat :focus-visible{outline-color:#fff}
@media (max-width:859px){ .samengevat{grid-template-columns:minmax(0,1fr)} }
.afdicht__kaart{background:#fff;border:1px solid var(--staal-300);border-top:4px solid var(--staal-600);padding:24px}
.afdicht__kaart h3{font-size:1.15rem;font-stretch:112%;margin:0 0 10px}

/* Waarom doorvoeringen ertoe doen: vergelijking en argumenten */
.waarom-blok{background-color:var(--staal-100);background-image:var(--geborsteld);border:1px solid var(--staal-300);border-top:4px solid var(--rood);padding:clamp(20px,3.5vw,44px)}
.waarom-blok__voet{margin:32px 0 0;padding-top:22px;border-top:1px solid var(--staal-300)}

.vergelijk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.vg-paneel{margin:0;background:#fff;border:1px solid var(--staal-400);display:flex;flex-direction:column;min-width:0}
.vg-kop{display:flex;align-items:center;gap:10px;margin:0;padding:10px 14px;font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--staal-300)}
.vg-kop .ico{width:18px;height:18px;padding:3px;box-sizing:content-box;stroke-width:2.4}
.vg-paneel--open .vg-kop{color:var(--rood-donker);background:var(--rood-licht);border-bottom-color:var(--rood-rand)}
.vg-paneel--open .vg-kop .ico{background:var(--rood);color:#fff}
.vg-paneel--dicht .vg-kop{color:#fff;background:var(--antraciet);border-bottom-color:var(--antraciet)}
.vg-paneel--dicht .vg-kop .ico{background:#fff;color:var(--antraciet)}
.vg-paneel svg{display:block;width:100%;height:auto}
.vg-paneel figcaption{padding:12px 14px 14px;border-top:1px solid var(--staal-300);font-size:.95rem;color:var(--tekst-zacht);margin-top:auto}
.vg-paneel figcaption b{color:var(--antraciet)}
.vg-label{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;fill:var(--antraciet)}
.vg-label--klein{font-size:11.5px;font-weight:500;letter-spacing:.02em}
.vg-label--rood{fill:var(--rood-donker)}
@media (max-width:759px){ .vergelijk{grid-template-columns:minmax(0,1fr)} }

.argumenten{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.argument{background:#fff;border:1px solid var(--staal-300);border-top:3px solid var(--staal-600);padding:20px 22px 22px}
.argument:nth-child(2){border-top-color:var(--rood)}
.argument h3,.argument h4{font-family:var(--font);font-stretch:112%;font-weight:800;font-size:1.12rem;line-height:1.2;margin:14px 0 8px;color:var(--antraciet)}
.argument p{margin:0;color:var(--tekst-zacht);font-size:.98rem}
/* Nummer op een kopplaatje met vier boutjes */
.argument__nr{display:inline-grid;place-items:center;width:40px;height:40px;font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--rood);border:1.5px solid var(--staal-600);
  background:radial-gradient(circle at 6px 6px,var(--staal-500) 0 2px,rgba(0,0,0,0) 2.5px),radial-gradient(circle at calc(100% - 6px) 6px,var(--staal-500) 0 2px,rgba(0,0,0,0) 2.5px),radial-gradient(circle at 6px calc(100% - 6px),var(--staal-500) 0 2px,rgba(0,0,0,0) 2.5px),radial-gradient(circle at calc(100% - 6px) calc(100% - 6px),var(--staal-500) 0 2px,rgba(0,0,0,0) 2.5px),var(--staal-200)}
@media (max-width:999px){ .argumenten{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:599px){ .argumenten{grid-template-columns:minmax(0,1fr)} }
/* Homepagina: vier korte punten onder de vergelijking, op brede schermen naast elkaar */
.argumenten--kort{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1100px){ .argumenten--kort{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:599px){ .argumenten--kort{grid-template-columns:minmax(0,1fr)} }

/* Vergelijking in eindstand (ook het stilstaande beeld bij "minder beweging") */
.rook{transform-box:fill-box;transform-origin:center;transform:translate(var(--sx,0px),var(--sy,0px)) scale(var(--ss,1));opacity:var(--so,.6)}
/* De vlamtong (.vg-lek) staat in een <g class="vg-lek-op">: het opkomen zit op de <g>, de lus op het pad (zie 18) */
.vg-lek,.vg-lek-op{transform-box:fill-box;transform-origin:0 50%}

/* ---------- Pagina doorvoeringen: kruimelpad, vindplaatsen, voor wie, aanpak, vragen ---------- */
.kruimel{font-family:var(--mono);font-size:.76rem;color:var(--tekst-label);margin:0 0 18px}
.kruimel ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
/* De schuine streep is alleen beeld: een schermlezer leest hem niet voor (tweede content-waarde met lege alt-tekst) */
.kruimel li + li::before{content:"/";content:"/" / "";margin-right:6px;color:var(--staal-400)}
.kruimel a{color:var(--tekst)}
.plekken{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.plek{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start;background:#fff;border:1px solid var(--staal-300);padding:16px}
.plek h3{font-size:1.05rem;font-stretch:110%;margin:2px 0 4px}
.plek p{margin:0;font-size:.95rem;color:var(--tekst-zacht)}
.plek__ico{width:48px;height:48px;display:grid;place-items:center;border:1.5px solid var(--staal-600);background:var(--staal-100);color:var(--antraciet)}
.plek__ico .ico{width:26px;height:26px;stroke-width:1.6}
.vindplaats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:999px){ .vindplaats{grid-template-columns:minmax(0,1fr)} }
@media (max-width:519px){ .plekken{grid-template-columns:minmax(0,1fr)} }
.afdicht{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.afdicht p{color:var(--tekst-zacht)}
@media (max-width:899px){ .afdicht{grid-template-columns:minmax(0,1fr)} }
.voorwie{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.voorwie li{background:#fff;border:1px solid var(--staal-300);border-top:4px solid var(--staal-600);padding:22px}
.voorwie h3{font-size:1.15rem;font-stretch:112%;margin:12px 0 8px}
.voorwie p{margin:0;color:var(--tekst-zacht);font-size:.97rem}
.voorwie .ico{width:28px;height:28px;color:var(--antraciet)}
@media (max-width:999px){ .voorwie{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:559px){ .voorwie{grid-template-columns:minmax(0,1fr)} }
/* Aanpak in vier stappen, verbonden door een ligger */
.aanpak{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--kolommen,4),minmax(0,1fr));gap:24px;position:relative}
.aanpak::before{content:"";position:absolute;left:22px;right:22px;top:16px;height:12px;background:linear-gradient(180deg,#5B6472 0 2px,#3A404B 2px 10px,#5B6472 10px 12px);transform-origin:0 50%}
.aanpak > li{position:relative}
.aanpak h3{font-size:1.15rem;font-stretch:112%;margin:18px 0 8px}
.aanpak p{margin:0;color:var(--op-donker-zacht);font-size:.97rem}
.aanpak > li:last-child .plaat__vlak{fill:var(--rood);stroke:var(--rood-donker)}
.aanpak > li:last-child .plaat__nr{fill:#fff}
@media (max-width:899px){ .aanpak{grid-template-columns:minmax(0,1fr);gap:0} .aanpak::before{left:16px;right:auto;top:10px;bottom:10px;width:12px;height:auto;background:linear-gradient(90deg,#5B6472 0 2px,#3A404B 2px 10px,#5B6472 10px 12px);transform-origin:50% 0} .aanpak > li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 20px;padding-bottom:26px} .aanpak h3{margin-top:8px} .aanpak > li > :not(.plaat){grid-column:2} }
/* Veelgestelde vragen */
.faq{max-width:880px;border-top:2px solid var(--antraciet)}
.faq details{border-bottom:1px solid var(--staal-300)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:16px;align-items:center;padding:18px 0;font-weight:700;font-stretch:110%;font-size:1.1rem;color:var(--antraciet)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--rood)}
.faq summary:focus-visible{outline-offset:4px}
.faq__teken{width:32px;height:32px;border:1.5px solid var(--staal-600);background:var(--staal-100);position:relative}
.faq__teken::before,.faq__teken::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--antraciet);transform:translate(-50%,-50%);transition:transform .2s}
.faq__teken::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .faq__teken{background:var(--antraciet);border-color:var(--antraciet)}
.faq details[open] .faq__teken::before,.faq details[open] .faq__teken::after{background:#fff}
.faq details[open] .faq__teken::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq__antwoord{padding:0 48px 20px 0;color:var(--tekst-zacht)}
.faq__antwoord p{margin:0 0 .7em}
.faq__antwoord p:last-child{margin-bottom:0}
@media (max-width:559px){ .faq__antwoord{padding-right:0} }
/* Wandvlak met doorvoeringen (hero van de pagina doorvoeringen) */
.wv-tagtekst{font-family:var(--mono);font-size:11px;font-weight:600;fill:var(--antraciet);text-anchor:middle}
.wv-tag{transform-box:fill-box;transform-origin:center}
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.chips li{font-family:var(--mono);font-size:.78rem;padding:4px 10px;border:1px solid var(--staal-400);background:var(--staal-50);color:var(--tekst);line-height:1.4}
.doorsnede-legenda{grid-template-columns:repeat(auto-fit,minmax(min(100%,9.375rem),1fr))}
.ds-klein{font-size:12px;fill:var(--tekst-label)}
.ds-zijde{font-size:12.5px;font-weight:600;letter-spacing:.08em;fill:var(--antraciet)}
.ds-zijde--brand{fill:var(--rood)}
.ds-labeltekst{font-size:12.5px;font-weight:600;fill:var(--antraciet);text-anchor:middle}
.ds-nr circle{fill:#fff;stroke:var(--antraciet);stroke-width:1.5}
.ds-nr text{font-size:13px;font-weight:600;fill:var(--antraciet);text-anchor:middle}

/* Pagina doorvoeringen, vak "Waar zitten doorvoeringen …": de twee lijsten rustig naast de plattegrond */
.waar{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (min-width:1000px){ .waar .kolomlijsten{grid-template-columns:minmax(0,1fr)} }
@media (max-width:999px){ .waar{grid-template-columns:minmax(0,1fr)} .waar .plattegrond{max-width:640px} }
.plattegrond{margin:0;border:1px solid var(--staal-300);background:var(--staal-50)}
.plattegrond svg{display:block;width:100%;height:auto;padding:12px}
.plattegrond figcaption{border-top:1px solid var(--staal-300);padding:12px 16px;font-size:.86rem;color:var(--tekst-zacht);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;background:#fff}
.pg-as circle{fill:#fff;stroke:var(--staal-500);stroke-width:1}
.pg-as text{font-size:12px;font-weight:600;fill:var(--antraciet);text-anchor:middle}
.pg-ruimte text{font-size:12px;fill:var(--tekst-label);letter-spacing:.08em;text-anchor:middle}
.pg-label text{font-size:12px;font-weight:600;fill:var(--antraciet);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.pg-pop{transform-box:fill-box;transform-origin:center}
.pg-ring{transform-box:fill-box;transform-origin:center;opacity:0}
.leg{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.74rem;color:var(--tekst)}
.leg i{display:inline-block;width:14px;height:14px;flex:none}
.leg--wand i{background:repeating-linear-gradient(45deg,#E1E5EA 0 2px,#5B6472 2px 3px);border:1px solid var(--antraciet)}
.leg--ok i{background:var(--antraciet);border-radius:50%}
.leg--open i{background:var(--rood);border-radius:50%}
.leg--route i{height:0;border-top:2px dashed var(--staal-600);width:18px}
.leg--kolom i{border:2px solid var(--antraciet);border-left:0;border-right:0;position:relative;height:12px}
.leg--kolom i::after{content:"";position:absolute;left:5px;top:0;bottom:0;width:2px;background:var(--antraciet)}

.cta-blok{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:center;padding:clamp(22px,3vw,34px);background:#fff;border:1px solid var(--staal-300);border-left:6px solid var(--rood);position:relative}
.cta-blok h3,.cta-blok__titel{font-size:clamp(1.3rem,1rem + 1vw,1.7rem);margin-bottom:8px}
.cta-blok p{margin:0;color:var(--tekst-zacht)}
.cta-blok .bel{font-family:var(--mono);font-size:.82rem;margin-top:10px;color:var(--tekst-label)}
.cta-blok .bel a{color:var(--antraciet);font-weight:600}
@media (max-width:999px){ .doorvoer__top{grid-template-columns:minmax(0,1fr)} }
@media (max-width:759px){ .cta-blok{grid-template-columns:minmax(0,1fr)} }

/* ---------- 9. Sectie 02: diensten ---------- */
.diensten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dienst{background:#fff;border:1px solid var(--staal-300);border-top:4px solid var(--staal-600);padding:26px 26px 28px;display:flex;flex-direction:column;gap:12px;position:relative}
.dienst:hover{border-top-color:var(--rood);box-shadow:0 18px 30px -24px rgba(34,38,47,.5)}
.dienst__kop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dienst__nr{font-family:var(--mono);font-size:.74rem;color:var(--tekst-label);letter-spacing:.06em}
.dienst__ico{width:52px;height:52px;display:grid;place-items:center;border:1.5px solid var(--staal-600);background:var(--staal-100);color:var(--antraciet);position:relative}
.dienst__ico .ico{width:28px;height:28px;stroke-width:1.6}
.dienst__ico::before,.dienst__ico::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--staal-500);top:4px;left:4px}
.dienst__ico::after{left:auto;right:4px;top:auto;bottom:4px}
.dienst h3{font-size:1.28rem;font-stretch:112%}
.dienst p{margin:0;color:var(--tekst-zacht);font-size:1rem}
.dienst__link{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;font-weight:650;text-decoration:none}
/* De hele kaart is klikbaar (zoals de project- en vacaturekaarten): de link legt een vlak over de kaart.
   Bij aanwijzen en bij toetsenbordfocus kleurt de lijn bovenaan rood en schuift het pijltje op. */
.dienst__link::after{content:"";position:absolute;inset:0;z-index:1}
.dienst__link .ico{transition:transform .2s}
.dienst:hover .dienst__link{color:var(--rood-donker);text-decoration:underline;text-underline-offset:.2em}
.dienst:hover .dienst__link .ico,.dienst__link:focus-visible .ico{transform:translateX(4px)}
.dienst:focus-within{border-top-color:var(--rood)}
.speerpunt{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--rood);color:#fff;padding:3px 8px}
@media (max-width:999px){ .diensten{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:599px){ .diensten{grid-template-columns:minmax(0,1fr)} }
/* Twee of vier kaarten: twee naast elkaar, zodat er geen losse kaart overblijft */
@media (min-width:600px){ .diensten--twee{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Een aantal dat niet precies uitkomt (5, 7, 8 …): de laatste rij in het midden, in plaats van één of
   twee losse kaarten links met een gat ernaast. Elke kaart blijft even breed. */
@media (min-width:1000px){
  .diensten:not(.diensten--twee){grid-template-columns:repeat(6,minmax(0,1fr))}
  .diensten:not(.diensten--twee) > .dienst{grid-column:span 2}
  .diensten:not(.diensten--twee) > .dienst:nth-child(3n+1):last-child{grid-column:3 / span 2}
  .diensten:not(.diensten--twee) > .dienst:nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2}
}
@media (min-width:600px) and (max-width:999px){
  .diensten{grid-template-columns:repeat(4,minmax(0,1fr))}
  .diensten > .dienst{grid-column:span 2}
  .diensten > .dienst:nth-child(odd):last-child{grid-column:2 / span 2}
}

/* Uitgelicht: zo werkt brandwerend coaten (uitleg met vuuranimatie) */
.coatpaneel{margin-top:clamp(40px,5vw,64px);background:var(--antraciet);color:var(--op-donker);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-top:4px solid var(--rood);box-shadow:0 30px 60px -40px rgba(34,38,47,.6)}
.coatpaneel :focus-visible{outline-color:#fff}
.coatpaneel__tekst{padding:clamp(24px,4vw,48px)}
.coatpaneel .label{color:var(--op-donker-zacht)}
.coatpaneel h3,.coatpaneel__titel{color:#fff;font-size:clamp(1.5rem,1.05rem + 1.5vw,2.25rem);margin:0 0 16px;max-width:18ch}
.coatpaneel__tekst > p{color:var(--op-donker)}
.coatstappen{list-style:none;margin:22px 0 28px;padding:0}
.coatstappen li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:13px 0;border-top:1px solid var(--antraciet-3)}
.coatstappen li:last-child{border-bottom:1px solid var(--antraciet-3)}
.coatstappen__nr{width:30px;height:30px;display:grid;place-items:center;font-family:var(--mono);font-size:.76rem;font-weight:600;color:#fff;border:1.5px solid var(--staal-500)}
.coatstappen li:nth-child(2) .coatstappen__nr{border-color:var(--rood);background:var(--rood)}
.coatstappen__tekst{color:var(--op-donker-zacht);font-size:.97rem}
.coatstappen__tekst b{display:block;color:#fff;font-stretch:110%;font-size:1.02rem}
.coatpaneel__noot{font-family:var(--mono);font-size:.76rem;color:var(--op-donker-zacht);margin:18px 0 0}
.coatpaneel__meer{margin:26px 0 0}
.coatpaneel .meerlink,.coatpaneel .meerlink .ico{color:#fff}
.coatpaneel .meerlink:hover{color:#fff;border-bottom-color:#fff}
.vuur{margin:0;background:radial-gradient(ellipse 80% 60% at 50% 100%,#2A2D35 0%,#1B1E24 70%);border-left:1px solid var(--antraciet-3);display:flex;flex-direction:column;position:relative;min-width:0}
.vuur__kop{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--antraciet-3);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--op-donker-zacht)}
.vuur__svg{display:block;width:100%;height:auto;margin-top:auto}
.vuur figcaption{padding:12px 16px 14px;border-top:1px solid var(--antraciet-3);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.vuur__label{margin:0 0 4px;width:100%;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:#fff;display:flex;align-items:center;gap:10px}
.vuur__label::before{content:"";width:9px;height:9px;background:var(--rood);flex:none}
.vuur .leg{color:var(--op-donker)}
.leg.k-staal i{background:linear-gradient(135deg,#D5DAE0,#9AA2AE)}
.leg.k-coating i{background:var(--rood)}
.leg.k-schuim i{background:radial-gradient(circle at 30% 35%,#5A606A 0 2px,rgba(0,0,0,0) 2.5px),radial-gradient(circle at 70% 70%,#50565F 0 2.5px,rgba(0,0,0,0) 3px),#3B4049;border:1px solid #101216}
.leg.k-vuur i{background:var(--vlam)}
/* Knoppen bij de animaties: "Opnieuw afspelen" (rechtsboven bij het vuur) en de pauzeknop van een lus
   (thema.js; onderaan rechts, vóór het bijschrift). Beide minstens 44 px hoog. */
.opnieuw,.lusknop{align-items:center;gap:6px;min-height:44px;font-family:var(--mono);font-size:.72rem;color:var(--op-donker);background:rgba(27,30,36,.85);border:1px solid var(--staal-600);padding:6px 10px;cursor:pointer}
.opnieuw{display:inline-flex;position:absolute;right:12px;top:46px;z-index:2}
.opnieuw[hidden]{display:none}
.opnieuw:hover,.lusknop:hover{color:#fff;border-color:var(--staal-400)}
.opnieuw .ico{width:15px;height:15px}
.lusknop{display:flex;width:fit-content;margin:0 12px 12px auto;position:relative;z-index:2}
/* Teken in de knop: twee streepjes (pauzeren), in beide standen. De tekst "Animaties pauzeren" blijft ook
   gelijk; alleen aria-pressed wisselt (thema.js). Ingedrukt (gepauzeerd) is de knop licht met een donkere
   rand en tekst: zichtbaar op een donkere en op een lichte tekening. */
.lusknop::before{content:"";width:10px;height:10px;flex:none;background:linear-gradient(90deg,currentColor 0 3px,rgba(0,0,0,0) 3px 7px,currentColor 7px 10px)}
.lusknop[aria-pressed="true"]{background:#fff;color:var(--antraciet);border-color:var(--antraciet);box-shadow:inset 0 2px 0 rgba(34,38,47,.18)}
.lusknop[aria-pressed="true"]:hover{background:var(--staal-200);color:var(--antraciet);border-color:var(--antraciet)}
.vergelijk > .lusknop{grid-column:1 / -1;justify-self:end;margin:0}
/* SVG-lagen in hun eindstand. Dit is ook het stilstaande beeld bij "minder beweging". */
.vu-vlammen{mix-blend-mode:screen}
/* Elke vlam (.vlam) staat in een <g class="vlam-op"> met --i, --d en --v: de <g> groeit op, het pad flakkert (zie 18) */
.vlam,.vlam-op{transform-box:fill-box;transform-origin:50% 100%}
.vu-holte{opacity:.6}
.coat-gloed{fill:none;stroke:#EF3013;stroke-opacity:.32;stroke-width:62px;stroke-linejoin:round;filter:url(#f-gloed)}
.coat-rand{fill:none;stroke:#101216;stroke-width:50px;stroke-linejoin:round}
.coat-schuim{fill:none;stroke:url(#p-schuim);stroke-width:46px;stroke-linejoin:round}
.coat-rood{fill:none;stroke:#C8100C;stroke-width:10px;stroke-linejoin:round}
.vu-tekst{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.24em;fill:#414855}
@media (max-width:999px){ .coatpaneel{grid-template-columns:minmax(0,1fr)} .vuur{border-left:0;border-top:1px solid var(--antraciet-3)} }

/* ---------- 10. Sectie 03: eigen online omgeving (donker) ---------- */
.omgeving{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,6vw,88px);align-items:center}
.omgeving h2{max-width:20ch;margin-bottom:20px}
.omgeving__punten{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
.omgeving__punten li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start;border-top:1px solid var(--antraciet-3);padding-top:18px}
.omgeving__ico{width:48px;height:48px;display:grid;place-items:center;border:1.5px solid var(--staal-500);background:var(--antraciet-2);color:#fff;position:relative}
.omgeving__ico .ico{width:24px;height:24px;stroke-width:1.6}
.omgeving__ico::before,.omgeving__ico::after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:var(--staal-500);top:4px;left:4px}
.omgeving__ico::after{left:auto;top:auto;right:4px;bottom:4px}
.omgeving__punten h3{font-size:1.08rem;font-stretch:110%;margin:2px 0 6px}
.omgeving__punten p{margin:0;font-size:.97rem;color:var(--op-donker-zacht)}
/* Abstracte tekening: een knooppunt van kolom en ligger, als beeld voor verbinding en samenwerking */
.omgeving__fig{margin:0;background:#1B1E24;border:1px solid var(--antraciet-3)}
.omgeving__fig svg{display:block;width:100%;height:auto}
.kn-as{font-family:var(--mono);font-size:13px;font-weight:600;fill:#D3D7DE;text-anchor:middle}
@media (max-width:999px){ .omgeving{grid-template-columns:minmax(0,1fr)} .omgeving__fig{max-width:520px} }
@media (max-width:599px){ .omgeving__punten{grid-template-columns:minmax(0,1fr)} }

/* ---------- 11. Sectie 04: werkwijze ---------- */
.werkwijze{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(36px,6vw,96px);align-items:start}
.werkwijze__links{position:sticky;top:calc(var(--kop-hoogte) + 32px)}
.werkwijze__links h2{margin-bottom:20px}
.tijdlijn{list-style:none;margin:0;padding:0;position:relative}
/* De "kolom" waar alle stappen aan hangen */
.tijdlijn::before{content:"";position:absolute;left:16px;top:10px;bottom:10px;width:12px;background:linear-gradient(90deg,var(--staal-400) 0 2px,var(--staal-200) 2px 10px,var(--staal-400) 10px 12px);transform-origin:50% 0}
.tijdlijn > li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:22px;padding-bottom:30px}
.tijdlijn > li:last-child{padding-bottom:0}
.tijdlijn .plaat{position:relative;z-index:1}
.tijdlijn > li:last-child .plaat__vlak{fill:var(--rood);stroke:var(--rood-donker)}
.tijdlijn > li:last-child .plaat__nr{fill:#fff}
.tijdlijn h3{font-size:1.2rem;font-stretch:112%;margin:9px 0 6px}
.tijdlijn p{margin:0 0 10px;color:var(--tekst-zacht)}
.betrokken{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.betrokken > span{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tekst-label);margin-right:4px}
@media (max-width:899px){ .werkwijze{grid-template-columns:minmax(0,1fr)} .werkwijze__links{position:static} }

/* ---------- 12. Sectie 05: projecten ---------- */
.projecten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.project{background:#fff;border:1px solid var(--staal-300);display:flex;flex-direction:column}
.fotovak{aspect-ratio:4/3;position:relative;display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,0) 60%),repeating-linear-gradient(135deg,var(--staal-200) 0 10px,var(--staal-100) 10px 20px);border-bottom:1px solid var(--staal-300);overflow:hidden}
.fotovak__tekst{display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--mono);font-size:.76rem;color:var(--tekst-zacht);background:rgba(255,255,255,.88);padding:10px 14px;border:1px dashed var(--staal-500);text-align:center}
.fotovak__tekst .ico{width:24px;height:24px}
.fotovak::before,.fotovak::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--staal-500)}
.fotovak::before{top:10px;left:10px;border-right:0;border-bottom:0}
.fotovak::after{bottom:10px;right:10px;border-left:0;border-top:0}
.project__info{padding:16px 18px 20px}
.project h3{font-size:1.12rem;font-stretch:112%;margin:0 0 8px}
.project__info p{margin:0}
@media (max-width:899px){ .projecten{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:559px){ .projecten{grid-template-columns:minmax(0,1fr)} }

/* ---------- 13. Band met oproep (donker, met schoorverband) ---------- */
.band{background:var(--antraciet-2);color:var(--op-donker);--k-flens:#4A515E;--k-lijf-a:#353B45;--k-lijf-b:#313640;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--vlam);z-index:2}
.band .frame{padding-block:clamp(52px,6vw,80px)}
.band__schoren{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.band__schoren path{fill:none;stroke:#3C424D;stroke-width:3}
.band__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center}
.band h2{color:#fff;font-size:clamp(1.45rem,1rem + 1.7vw,2.3rem);max-width:26ch;margin-bottom:12px}
.band p{margin:0;max-width:52ch}
.band :focus-visible{outline-color:#fff}
@media (max-width:859px){ .band__in{grid-template-columns:minmax(0,1fr)} }
/* Homepagina, laatste vak Contact: de afsluiter in de donkere band (zonder formulier) */
.slot .sectiekop{margin-bottom:clamp(24px,3vw,36px)}
.slot__contact{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 24px}
.slot__contact a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:#fff;font-family:var(--mono);font-size:.95rem;font-weight:600;text-decoration:none}
.slot__contact a:hover{text-decoration:underline;text-underline-offset:.25em}
.slot__ico{width:32px;height:32px;display:grid;place-items:center;border:1.5px solid var(--staal-500);background:var(--antraciet-2);color:#fff;flex:none}
.slot__ico .ico{width:16px;height:16px}
@media (max-width:559px){ .slot__contact{flex-direction:column} }

/* ---------- 14. Sectie 06: over ons (met de certificaten, vroeger een eigen vak) ---------- */
.overons{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,6vw,88px);align-items:start}
.overons h2{margin-bottom:22px;max-width:18ch}
.overons__tekst p{color:var(--tekst-zacht);max-width:38em}
.overons .fotovak{aspect-ratio:16/10;border:1px solid var(--staal-300)}
.gegevens{display:grid;grid-template-columns:auto minmax(0,1fr);margin:22px 0 0;border-top:2px solid var(--antraciet)}
.gegevens dt,.gegevens dd{padding:11px 0;border-bottom:1px solid var(--staal-300);margin:0}
.gegevens dt{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tekst-label);padding-right:24px;padding-top:13px}
@media (max-width:899px){ .overons{grid-template-columns:minmax(0,1fr)} }

/* ---------- 15. Kaarten met een lijst (vacatures) en de certificaten bij Over ons ---------- */
.bbl__kaart{background:#fff;border:1px solid var(--staal-300);border-top:4px solid var(--staal-600);padding:26px}
.bbl__kaart h3{font-size:1.22rem;font-stretch:112%;margin:0 0 12px}
.bbl__kaart p{color:var(--tekst-zacht);margin:0 0 .8em}
.bbl__kaart p:last-child{margin-bottom:0}
.lijst{list-style:none;margin:0;padding:0}
.lijst li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:8px 0;border-bottom:1px solid var(--staal-200);color:var(--tekst-zacht)}
.lijst li:last-child{border-bottom:0}
.lijst .ico{color:var(--rood);margin-top:3px}
/* Certificaten bij Over ons: alleen het nummer en de certificaten van de medewerkers, zodra ingevuld */
.certificaten{margin:24px 0 0;padding-top:16px;border-top:2px solid var(--antraciet)}
.certificaten__kop{font-family:var(--mono);font-size:.78rem;font-weight:600;font-stretch:100%;letter-spacing:.08em;text-transform:uppercase;color:var(--antraciet);margin:0 0 10px}
.erkenningen{list-style:none;margin:0;padding:0}
.erkenningen > li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--staal-200);align-items:start}
.erkenningen > li:first-child{padding-top:4px}
.erkenningen > li:last-child{border-bottom:0;padding-bottom:0}
.erkenningen b{display:block;color:var(--antraciet);font-weight:650;line-height:1.35}
.erkenningen__detail{display:block;margin-top:4px;font-size:.92rem;color:var(--tekst-zacht)}
.erkenningen__detail ul{margin:4px 0 0;padding-left:18px}

/* ---------- 16. Sectie 08: contact en formulier ---------- */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,88px);align-items:start}
.contact h2{margin-bottom:20px;max-width:16ch}
.contact__tekst > p{color:var(--tekst-zacht)}
.contactlijst{list-style:none;margin:24px 0;padding:0;border-top:2px solid var(--antraciet)}
.contactlijst li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;padding:13px 0;border-bottom:1px solid var(--staal-300);align-items:center}
.contactlijst .ico{color:var(--rood);width:22px;height:22px}
.contactlijst small{display:block;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tekst-label)}
.contactlijst a{color:var(--antraciet);font-weight:650;text-decoration:none}
.contactlijst a:hover{color:var(--rood);text-decoration:underline}

.formulier{background:#fff;border:1px solid var(--staal-400);border-top:4px solid var(--antraciet);padding:clamp(20px,3vw,36px);position:relative}
.formulier__kop{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-label);padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid var(--staal-300)}
.formulier__kop b{color:var(--antraciet)}
.velden{display:grid;gap:18px}
.rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.veld{display:grid;gap:7px;min-width:0;margin:0;padding:0;border:0}
.veld > label,.veld > legend{font-weight:650;font-size:.94rem;padding:0}
.veld > legend{margin-bottom:7px}
.verplicht{color:var(--rood);margin-left:2px}
.hint{font-size:.84rem;color:var(--tekst-label);margin:0}
.veld select{font:inherit;font-size:1rem;padding:11px 40px 11px 13px;border:1px solid var(--staal-500);border-radius:2px;color:var(--tekst);width:100%;min-height:48px;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%2322262F' stroke-width='2'/%3E%3C/svg%3E") right 14px center/14px no-repeat}
.veld select:focus-visible{outline:3px solid var(--focus);outline-offset:0;border-color:var(--antraciet)}
.veld input[type="text"],.veld input[type="email"],.veld input[type="tel"],.veld textarea{font:inherit;font-size:1rem;padding:11px 13px;border:1px solid var(--staal-500);border-radius:2px;background:#fff;color:var(--tekst);width:100%;min-height:48px}
.veld textarea{min-height:130px;resize:vertical}
.veld input:hover,.veld textarea:hover{border-color:var(--staal-700)}
.veld input:focus-visible,.veld textarea:focus-visible{outline:3px solid var(--focus);outline-offset:0;border-color:var(--antraciet)}
.keuze{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--staal-500);max-width:420px}
.keuze label{position:relative;display:block}
.keuze input{position:absolute;opacity:0;width:1px;height:1px}
.keuze span{display:block;text-align:center;padding:11px 8px;font-weight:650;cursor:pointer;border-right:1px solid var(--staal-500);transition:background-color .15s,color .15s}
.keuze label:last-child span{border-right:0}
.keuze span:hover{background:var(--staal-100)}
.keuze input:checked + span{background:var(--antraciet);color:#fff}
.keuze input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px;position:relative;z-index:1}
.veld input[type="file"]{font:inherit;font-size:.9rem;padding:10px;border:1px dashed var(--staal-500);background:var(--staal-50);width:100%;color:var(--tekst-zacht)}
.veld input[type="file"]::file-selector-button{font:inherit;font-weight:650;border:1.5px solid var(--antraciet);background:#fff;color:var(--antraciet);padding:8px 14px;margin-right:12px;cursor:pointer;border-radius:2px}
.privacy{font-size:.88rem;color:var(--tekst-zacht);margin:0}
.formulier__voet{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.formulier__voet .hint{font-family:var(--mono);font-size:.74rem}
.melding{margin-top:18px;padding:14px 16px;border-left:4px solid var(--rood);background:var(--rood-licht);font-size:.95rem;color:var(--tekst)}
.melding:empty{display:none}
@media (max-width:899px){ .contact{grid-template-columns:minmax(0,1fr)} }
@media (max-width:559px){ .rij{grid-template-columns:minmax(0,1fr)} }

/* ---------- 17. Voet ---------- */
.voet{background:var(--antraciet);color:var(--op-donker);font-size:.95rem}
.voet::before{content:"";display:block;height:12px;background:repeating-linear-gradient(135deg,#3A404B 0 2px,rgba(0,0,0,0) 2px 9px);border-bottom:2px solid #3A404B}
.voet__grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:40px;padding-block:60px 44px}
.voet__merk img{height:30px;width:auto;margin-bottom:18px}
.voet__merk p{color:var(--op-donker-zacht);max-width:28ch}
.voet h2{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;font-weight:600;font-stretch:100%;margin:0 0 16px}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.voet a{color:#fff;text-decoration:none}
.voet a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--rood);text-decoration-thickness:2px}
.voet :focus-visible{outline-color:#fff}
/* Lange woorden en adressen breken af in plaats van buiten de kolom te lopen (ook met een grote standaardletter) */
.voet a,.voet li{overflow-wrap:anywhere}
/* Telefoon en e-mail in de voet (footer.php): met icoon en minstens 44 px hoog, zodat ze er aantikbaar uitzien */
.voet__contact{display:inline-flex;align-items:center;gap:8px;min-height:44px}
/* Onderste regel: copyright met de statutaire naam en, als ze zijn ingevuld, KvK en btw (één tekst) */
.voet__onder{border-top:1px solid var(--antraciet-3)}
.voet__onder .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-block:18px;font-family:var(--mono);font-size:.74rem;color:var(--op-donker-zacht)}
/* Breekpunten in em (56.1875em = 899 px, 32.4375em = 519 px bij 16 px): met een grotere standaardletter
   gaan de kolommen eerder onder elkaar, zodat er geen kolom buiten beeld valt */
@media (max-width:56.1875em){ .voet__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:32.4375em){ .voet__grid{grid-template-columns:minmax(0,1fr);gap:30px} }

/* =====================================================================
   19. Onderdelen van het thema (niet in het ontwerp, wel in dezelfde stijl)
   ===================================================================== */

/* ---------- 19.0 Snelkoppelingen "Op deze pagina" (pagina Brandwerende doorvoeringen) ---------- */
.snel{margin:clamp(28px,4vw,44px) 0 0;padding-top:16px;border-top:2px solid var(--antraciet);display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.snel__kop{margin:0;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-label)}
.snel ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.snel a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--staal-400);background:#fff;color:var(--antraciet);font-weight:600;font-size:.95rem;line-height:1.25;text-decoration:none}
.snel a:hover{border-color:var(--rood);color:var(--rood)}
@media (max-width:559px){ .snel a{font-size:.9rem;padding:0 12px} }

/* Met de beheerbalk (ingelogd) is de vaste kop 32 of 46 px lager: ankers ook zoveel lager laten landen */
html:has(> body.admin-bar){scroll-padding-top:calc(var(--kop-hoogte) + 48px)}
@media (max-width:782px){ html:has(> body.admin-bar){scroll-padding-top:calc(var(--kop-hoogte) + 62px)} }

/* ---------- 19.1 Kop van een pagina ---------- */
.hero--pagina .frame{padding-block:clamp(32px,4.5vw,64px) clamp(44px,5vw,72px)}
.hero--pagina h1{font-size:clamp(2rem,1.1rem + 2.8vw,3.4rem)}
.hero--enkel .hero__grid{grid-template-columns:minmax(0,1fr)}
.hero--enkel .hero__tekst{max-width:56em}
.hero__lead > p{margin:0 0 .6em}
.hero .zoekformulier{margin-top:28px;max-width:640px}
.hero .melding--vast{max-width:52em}
.tekenblad--foto{overflow:hidden}
.tekenblad--foto img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.tekenblad--tekening .fotovak{border-bottom:0}
.leeg{color:var(--tekst-zacht);font-size:1.05rem}
.melding--vast{margin-top:24px}
/* Pagina, dienst, project of vacature met een wachtwoord: alleen de kop met het wachtwoordformulier
   (form.post-password-form, in .hero__lead). Tekst en opbouw: flamestop_thema_wachtwoordformulier() in
   inc/instellen.php. Het veld staat onder zijn label, de knop ernaast (op een telefoon eronder).
   Opmaak van veld en knop: zie 3 en 19.7. Na een verkeerd wachtwoord staat er een melding boven (role="alert"). */
.post-password-form{max-width:640px}
.post-password-form p{margin:0 0 14px}
.post-password-form > p:last-of-type{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-bottom:0}
.post-password-form label{display:flex;flex-direction:column;gap:7px;flex:1 1 220px;min-width:0;font-weight:650;font-size:.94rem;color:var(--tekst)}
.post-password-form label input{width:100%}
.post-password-form-invalid-password{margin:0 0 14px;padding:12px 16px;border-left:4px solid var(--rood);background:var(--rood-licht);color:var(--tekst);font-size:.95rem}
.post-password-form-invalid-password p{margin:0}

/* ---------- 19.2 Tekst uit de editor ---------- */
.inhoud{max-width:760px;min-width:0}
.inhoud > :first-child{margin-top:0}
.inhoud > :last-child{margin-bottom:0}
.inhoud h2{font-size:clamp(1.55rem,1.1rem + 1.7vw,2.3rem);margin:1.6em 0 .5em}
.inhoud h3{font-size:clamp(1.15rem,1rem + .5vw,1.35rem);font-stretch:112%;margin:1.5em 0 .4em}
.inhoud h4{font-size:1.05rem;font-stretch:110%;margin:1.3em 0 .3em}
.inhoud p,.inhoud li,.inhoud dd{color:var(--tekst-zacht)}
.inhoud strong,.inhoud b{color:var(--antraciet)}
.inhoud .intro{color:var(--tekst-zacht)}
.inhoud ul:not([class]),.inhoud ol:not([class]),.inhoud .wp-block-list{margin:0 0 1.3em;padding:0;list-style:none}
.inhoud ul:not([class]) > li,.inhoud ul.wp-block-list > li{position:relative;padding:7px 0 7px 22px;border-bottom:1px solid var(--staal-200)}
.inhoud ul:not([class]) > li::before,.inhoud ul.wp-block-list > li::before{content:"";position:absolute;left:0;top:.95em;width:8px;height:8px;background:var(--rood)}
.inhoud ol:not([class]),.inhoud ol.wp-block-list{counter-reset:stap}
.inhoud ol:not([class]) > li,.inhoud ol.wp-block-list > li{position:relative;padding:8px 0 8px 40px;border-bottom:1px solid var(--staal-200);counter-increment:stap}
.inhoud ol:not([class]) > li::before,.inhoud ol.wp-block-list > li::before{content:counter(stap,decimal-leading-zero);position:absolute;left:0;top:8px;font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--rood);border:1.5px solid var(--staal-600);background:var(--staal-100);width:28px;height:28px;display:grid;place-items:center}
/* Een lijst in een lijst: geen extra witruimte onder de onderliggende lijst */
.inhoud li > ul:not([class]),.inhoud li > ol:not([class]),.inhoud li > .wp-block-list{margin:6px 0 0}
.inhoud blockquote{margin:1.6em 0;padding:.3em 0 .3em 20px;border-left:4px solid var(--rood);font-size:1.12rem;color:var(--antraciet)}
.inhoud blockquote p{color:inherit}
.inhoud figure{margin:1.6em 0}
.inhoud figcaption,.inhoud .wp-caption-text{font-size:.86rem;color:var(--tekst-label);margin-top:8px}
.inhoud img{height:auto}
.inhoud .alignleft{float:left;margin:.3em 1.4em 1em 0;max-width:50%}
.inhoud .alignright{float:right;margin:.3em 0 1em 1.4em;max-width:50%}
.inhoud .aligncenter{margin-inline:auto}
.inhoud .wp-caption{max-width:100%}
.inhoud hr{border:0;border-top:2px solid var(--staal-300);margin:2em 0;clear:both}
.inhoud table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:.95rem}
.inhoud th,.inhoud td{border-bottom:1px solid var(--staal-300);padding:10px 12px;text-align:left;vertical-align:top}
.inhoud th{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tekst-label);border-bottom:2px solid var(--antraciet)}
.inhoud .wp-block-table{overflow-x:auto;margin:1.5em 0}
.inhoud .wp-block-button__link,.inhoud .wp-element-button{display:inline-flex;align-items:center;min-height:48px;padding:.75em 1.3em;font-weight:650;font-stretch:108%;background:var(--rood);color:#fff;border-radius:2px;text-decoration:none}
.inhoud .wp-block-button__link:hover{background:var(--rood-donker);color:#fff}
.inhoud iframe,.inhoud video{max-width:100%}
.inhoud::after{content:"";display:table;clear:both}
/* Blokken die de beheerder zelf kan invoegen, in de stijl van de site */
/* Knop "Omlijnd": transparant met een rode rand (anders net zo gevuld als de gewone knop) */
.inhoud .wp-block-button.is-style-outline > .wp-block-button__link{background:transparent;color:var(--rood);border:2px solid var(--rood);padding:calc(.75em - 2px) calc(1.3em - 2px)}
.inhoud .wp-block-button.is-style-outline > .wp-block-button__link:hover{background:var(--rood);color:#fff}
.inhoud .wp-block-buttons{margin:1.6em 0}
/* Tabel: kolommen naar de inhoud en hele woorden. Past een tabel niet, dan schuift het kader zijwaarts
   (.wp-block-table, overflow-x:auto) in plaats van woorden in stukjes te breken. */
.inhoud .wp-block-table table{table-layout:auto}
.inhoud .wp-block-table th,.inhoud .wp-block-table td{overflow-wrap:normal;word-break:normal}
.inhoud .wp-block-table figcaption{position:sticky;left:0}
/* Het kader is met het toetsenbord te bereiken (tabindex="0", inc/instellen.php), zodat een brede tabel
   ook met de pijltjestoetsen zijwaarts schuift. De focusrand (3 px, rood; in een donker vak wit) komt van
   :focus-visible in 2. Basis; hier alleen iets dichter op het kader, zodat hij niet tegen de tekst ernaast komt. */
.inhoud .wp-block-table[tabindex]:focus-visible{outline-offset:2px}
/* Bestand (pdf): alleen de naam en de knop Downloaden. De ingesloten weergave haalt het thema al weg
   (inc/instellen.php); deze regel is het vangnet, want de beveiligingskop blokkeert die weergave. */
.inhoud .wp-block-file__embed{display:none!important}
.inhoud .wp-block-file{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:1.6em 0;font-size:1rem}
.inhoud .wp-block-file > a:not(.wp-block-file__button){font-weight:650;color:var(--antraciet)}
.inhoud .wp-block-file .wp-block-file__button{font-size:1rem;margin:0}
/* Details (uitklapblok): rand boven en onder en een vette regel van minstens 44 px hoog */
.inhoud .wp-block-details{border-top:1px solid var(--staal-300);border-bottom:1px solid var(--staal-300);margin:1.6em 0}
.inhoud .wp-block-details + .wp-block-details{margin-top:-1.6em;border-top:0}
.inhoud .wp-block-details summary{cursor:pointer;padding:16px 0;font-weight:700;font-stretch:110%;color:var(--antraciet);min-height:44px}
.inhoud .wp-block-details summary:hover{color:var(--rood)}
.inhoud .wp-block-details > :last-child{margin-bottom:16px}
/* Ingesloten video of kaart: de volle breedte van de tekstkolom */
.inhoud .wp-block-embed iframe,.inhoud > iframe{width:100%}
.inhoud > iframe{display:block;margin:1.6em 0;border:0}
/* Galerij en kolommen: dezelfde ruimte boven en onder als andere blokken */
.inhoud .wp-block-gallery,.inhoud .wp-block-columns{margin:1.6em 0}
.inhoud .wp-block-gallery figcaption{text-align:left}
@media (max-width:559px){ .inhoud .alignleft,.inhoud .alignright{float:none;margin:1em 0;max-width:100%} }
.sectie--donker .inhoud p,.sectie--donker .inhoud li{color:var(--op-donker)}
.sectie--donker .inhoud strong{color:#fff}
.inhoud--los{max-width:none}
.inhoud--los + .inhoud--los{margin-top:1em}
.laatst-bijgewerkt{margin-top:2em!important;font-family:var(--mono);font-size:.8rem;color:var(--tekst-label)!important}
.paginas-in-tekst{margin:24px auto 0;font-family:var(--mono);font-size:.84rem}
.paginas-in-tekst a,.paginas-in-tekst .post-page-numbers{display:inline-block;min-width:36px;padding:6px 10px;margin:0 4px;border:1px solid var(--staal-400);text-align:center}
/* Uitvoer van de korte codes van de kern in de tekst */
.flamestop-contactgegevens{margin:1.2em 0 1.6em;border-top:2px solid var(--antraciet)}
.flamestop-contactgegevens > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--staal-300)}
.flamestop-contactgegevens dt{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tekst-label);padding-top:3px}
.flamestop-contactgegevens dd{margin:0;color:var(--tekst)}
.flamestop-contactgegevens a{color:var(--antraciet);font-weight:650}
@media (max-width:419px){ .flamestop-contactgegevens > div{grid-template-columns:minmax(0,1fr);gap:2px} }
.flamestop-certificaten{list-style:none;margin:0 0 1.2em;padding:0}
.flamestop-certificaten li{position:relative;padding:7px 0 7px 22px;border-bottom:1px solid var(--staal-200)}
.flamestop-certificaten li::before{content:"";position:absolute;left:0;top:.95em;width:8px;height:8px;background:var(--rood)}
.flamestop-vacatures{list-style:none;margin:0 0 1.2em;padding:0;border-top:2px solid var(--antraciet)}
.flamestop-vacatures__item{padding:12px 0;border-bottom:1px solid var(--staal-300)}
.flamestop-vacatures__item a{font-weight:700;color:var(--antraciet)}
.flamestop-vacatures__kenmerken{display:block;font-family:var(--mono);font-size:.78rem;color:var(--tekst-label)}
.flamestop-vacatures__geen,.flamestop-formulier-reserve{padding:14px 16px;border-left:4px solid var(--staal-600);background:var(--staal-100);color:var(--tekst)!important}

/* ---------- 19.3 Vak met tekst uit de editor, eventueel met iets ernaast ---------- */
.inhoudsvak{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.inhoudsvak--naast{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.inhoudsvak .inhoud > h2:first-child{font-size:clamp(1.75rem,1.05rem + 2.6vw,3rem);margin:0 0 20px;max-width:22ch}
.inhoudsvak__naast{min-width:0}
.inhoudsvak__naast .contactlijst{margin-top:0}
.inhoudsvak__naast .fotovak{border:1px solid var(--staal-300)}
@media (max-width:899px){ .inhoudsvak--naast{grid-template-columns:minmax(0,1fr)} }
.doorvoer__top--los{margin-top:0}
.doorvoer__top--los h2{margin-bottom:20px}
.aanpak__meer{margin:36px 0 0}
.omgeving__inlog{margin:30px 0 0}
.projecten__voet,.terug{margin:30px 0 0}
.projecten__kop{font-size:clamp(1.3rem,1rem + 1vw,1.7rem);margin:0 0 22px}
.contact--zonder-formulier{grid-template-columns:minmax(0,1fr)}
.contact--zonder-formulier .contact__tekst{max-width:760px}
.contact__tekst.inhoud{max-width:none}
.samengevat .knop{justify-self:start}
.sectie--donker .tijdlijn p{color:var(--op-donker-zacht)}
.sectie--donker .tijdlijn::before{background:linear-gradient(90deg,#5B6472 0 2px,#3A404B 2px 10px,#5B6472 10px 12px)}
.bbl__kaart h2.vacature__kop{font-size:1.22rem;font-stretch:112%;margin:0 0 12px}
.cta-blok .bel{font-family:var(--mono);font-size:.82rem;margin-top:10px;color:var(--tekst-label)}

/* ---------- 19.4 Formulier (Contact Form 7 via de kern) in de opmaak van het ontwerp ---------- */
.flamestop-valstrik{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
/* minmax(0,1fr): het formulier wordt nooit breder dan zijn kolom, ook niet met een grote standaardletter */
.flamestop-formulier{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.flamestop-formulier p{margin:0}
.flamestop-formulier br{display:none}
.flamestop-formulier__rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.flamestop-formulier__veld{min-width:0}
.flamestop-formulier__veld > label{display:grid;gap:7px}
.flamestop-formulier__label{font-weight:650;font-size:.94rem;color:var(--tekst)}
.flamestop-formulier__optioneel{font-weight:400;font-size:.86rem;color:var(--tekst-label)}
.flamestop-formulier__hint{display:block;font-size:.84rem;font-weight:400;color:var(--tekst-label);margin-top:6px}
/* Hints op hun plek (de regel .flamestop-formulier p hierboven zet de marge van een <p> op 0):
   - onder de keuze Soort vraag de regel over de kosten, met wat ruimte onder de knoppen;
   - bij Bericht de hint tussen label en tekstvak, dicht onder het label;
   - "Handig om mee te sturen" vlak boven het eerste bijlageveld, en de uitleg over de bestanden vlak
     onder het laatste zichtbare bijlageveld (de tussenruimte van het formulier is 18 px). */
.flamestop-formulier__soort .flamestop-formulier__soorthint{margin-top:8px}
.flamestop-formulier__veld > label > .flamestop-formulier__hint{margin-top:-3px}
.flamestop-formulier .flamestop-formulier__meesturen{margin-bottom:-8px}
.flamestop-formulier .flamestop-formulier__bijlagehint{margin-top:-8px}
.flamestop-formulier .wpcf7-form-control-wrap{display:block;position:relative}
.flamestop-formulier input[type="text"],.flamestop-formulier input[type="email"],.flamestop-formulier input[type="tel"],.flamestop-formulier textarea,.flamestop-formulier select{font:inherit;font-size:1rem;padding:11px 13px;border:1px solid var(--staal-500);border-radius:2px;background:#fff;color:var(--tekst);width:100%;min-height:48px}
.flamestop-formulier textarea{min-height:130px;resize:vertical}
.flamestop-formulier select{padding-right:40px;appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%2322262F' stroke-width='2'/%3E%3C/svg%3E") right 14px center/14px no-repeat}
.flamestop-formulier input:hover,.flamestop-formulier textarea:hover,.flamestop-formulier select:hover{border-color:var(--staal-700)}
.flamestop-formulier input:focus-visible,.flamestop-formulier textarea:focus-visible,.flamestop-formulier select:focus-visible{outline:3px solid var(--focus);outline-offset:0;border-color:var(--antraciet)}
.flamestop-formulier__soort{border:0;margin:0;padding:0;min-width:0}
.flamestop-formulier__soort legend{font-weight:650;font-size:.94rem;padding:0;margin-bottom:7px}
/* Soort vraag: drie even brede vakken naast elkaar; past de tekst niet meer (grote standaardletter),
   dan schuift een vak door naar de volgende regel in plaats van over de rand te lopen */
.flamestop-formulier__soort .wpcf7-radio{display:flex;flex-wrap:wrap;border:1px solid var(--staal-500);max-width:420px}
.flamestop-formulier__soort .wpcf7-list-item{display:block;flex:1 1 0;margin:0}
.flamestop-formulier__soort label{position:relative;display:block}
.flamestop-formulier__soort input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.flamestop-formulier__soort .wpcf7-list-item-label{display:block;text-align:center;padding:11px 8px;font-weight:650;cursor:pointer;border-right:1px solid var(--staal-500);transition:background-color .15s,color .15s}
.flamestop-formulier__soort .wpcf7-list-item:last-child .wpcf7-list-item-label{border-right:0}
.flamestop-formulier__soort .wpcf7-list-item-label:hover{background:var(--staal-100)}
.flamestop-formulier__soort input:checked + .wpcf7-list-item-label{background:var(--antraciet);color:#fff}
.flamestop-formulier__soort input:focus-visible + .wpcf7-list-item-label{outline:3px solid var(--focus);outline-offset:2px;position:relative;z-index:1}
@media (max-width:359px){ .flamestop-formulier__soort .wpcf7-list-item-label{padding-inline:4px;font-size:.92rem} }
.flamestop-formulier input[type="file"]{font:inherit;font-size:.9rem;padding:10px;border:1px dashed var(--staal-500);background:var(--staal-50);width:100%;max-width:100%;min-width:0;color:var(--tekst-zacht)}
.flamestop-formulier input[type="file"]::file-selector-button{font:inherit;font-weight:650;border:1.5px solid var(--antraciet);background:#fff;color:var(--antraciet);padding:8px 14px;margin-right:12px;cursor:pointer;border-radius:2px}
/* Op telefoons een kleiner bestandsveld, zodat 'Geen bestand gekozen' voluit past; onder 360 px de knop
   boven de tekst */
@media (max-width:34.9375em){
  .flamestop-formulier input[type="file"]{font-size:.85rem;padding:8px}
  .flamestop-formulier input[type="file"]::file-selector-button{padding:8px 10px;margin-right:8px}
}
@media (max-width:22.4375em){ .flamestop-formulier input[type="file"]::file-selector-button{display:block;margin:0 0 8px} }
/* Bijlagen stap voor stap: het tweede en derde veld pas als het vorige een bestand heeft (thema.js zet
   dan .zichtbaar). Alleen met JavaScript (js-klaar); zonder JavaScript staan alle drie de velden er. */
.js-klaar .flamestop-formulier__bijlage--2:not(.zichtbaar),.js-klaar .flamestop-formulier__bijlage--3:not(.zichtbaar){display:none}
.flamestop-formulier__privacy{font-size:.88rem;color:var(--tekst-zacht)}
.flamestop-formulier__verstuur{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* De knop mag over twee regels gaan, zodat hij met een grote standaardletter niet buiten beeld valt */
.flamestop-formulier .wpcf7-submit{display:inline-flex;align-items:center;justify-content:center;min-height:48px;max-width:100%;white-space:normal;padding:.75em 1.3em;font:inherit;font-weight:650;font-size:1rem;line-height:1.15;font-stretch:108%;background:var(--rood);color:#fff;border:2px solid transparent;border-radius:2px;cursor:pointer;transition:background-color .2s}
.flamestop-formulier .wpcf7-submit:hover{background:var(--rood-donker)}
.flamestop-formulier .wpcf7-submit:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.flamestop-formulier .wpcf7-submit:disabled{opacity:.7;cursor:progress}
.flamestop-formulier .wpcf7-spinner{margin:0}
/* De spinner van Contact Form 7 draait alleen tijdens het versturen (anders loopt de animatie onzichtbaar door) */
.wpcf7-spinner::before{animation-play-state:paused}
.wpcf7 form.submitting .wpcf7-spinner::before{animation-play-state:running}
/* Foutmeldingen: rode rand om het veld en een duidelijke tekst eronder (specifiek genoeg om te winnen van de gewone rand) */
.flamestop-formulier .wpcf7-form-control.wpcf7-not-valid{border-color:var(--rood);border-width:2px;background-color:#fff}
.flamestop-formulier__soort .wpcf7-not-valid{border-color:var(--rood);border-width:2px}
.flamestop-formulier .wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:.86rem;font-weight:600;color:var(--rood-donker)}
.flamestop-offerteformulier .wpcf7 form .wpcf7-response-output{margin:18px 0 0;padding:14px 16px;border:0;border-left:4px solid var(--staal-600);background:var(--staal-100);font-size:.95rem;color:var(--tekst)}
/* Bevestiging na het versturen: goed zichtbaar, donker vlak met een vinkje. thema.js schuift de melding in
   beeld, zonder focus erop: CF7 leest de tekst voor schermlezers al voor via role="status". */
.flamestop-offerteformulier .wpcf7 form.sent .wpcf7-response-output{position:relative;padding:18px 20px 18px 58px;border:0;border-left:6px solid var(--rood);background:var(--antraciet);color:#fff;font-size:1.02rem;font-weight:600;line-height:1.5}
.flamestop-offerteformulier .wpcf7 form.sent .wpcf7-response-output::before{content:"";position:absolute;left:18px;top:18px;width:26px;height:26px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2322262F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.flamestop-offerteformulier .wpcf7 form.invalid .wpcf7-response-output,.flamestop-offerteformulier .wpcf7 form.unaccepted .wpcf7-response-output,.flamestop-offerteformulier .wpcf7 form.failed .wpcf7-response-output,.flamestop-offerteformulier .wpcf7 form.aborted .wpcf7-response-output,.flamestop-offerteformulier .wpcf7 form.spam .wpcf7-response-output,.flamestop-offerteformulier .wpcf7 form.payment-required .wpcf7-response-output{border-left-color:var(--rood);background:var(--rood-licht)}
.flamestop-offerteformulier .wpcf7-form.init .wpcf7-response-output,.flamestop-offerteformulier .wpcf7-form.resetting .wpcf7-response-output,.flamestop-offerteformulier .wpcf7-form.submitting .wpcf7-response-output{display:none}
/* Samenvatting onder de bevestiging (thema.js): wanneer verstuurd en waarover, zonder persoonsgegevens */
.verstuurd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;margin:12px 0 0;padding:14px 16px;background:var(--staal-50);border:1px solid var(--staal-300);border-left:4px solid var(--antraciet);font-size:.92rem;line-height:1.45}
.verstuurd dt{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tekst-label);padding-top:.2em}
.verstuurd dd{margin:0;color:var(--tekst);overflow-wrap:anywhere}
@media (max-width:26.1875em){ .verstuurd{grid-template-columns:minmax(0,1fr);gap:2px} .verstuurd dd + dt{margin-top:8px} }
@media (max-width:559px){ .flamestop-formulier__rij{grid-template-columns:minmax(0,1fr)} }
/* Vinkjes (bijv. het onderwerp, meerdere keuzes mogelijk): elk een aanklikbaar vak van minstens 44 px hoog,
   naast elkaar; op smalle schermen onder elkaar over de volle breedte */
.flamestop-formulier fieldset{border:0;margin:0;padding:0;min-width:0}
.flamestop-formulier fieldset > legend{font-weight:650;font-size:.94rem;color:var(--tekst);padding:0;margin-bottom:7px}
.flamestop-formulier .wpcf7-checkbox{display:flex;flex-wrap:wrap;gap:8px}
.flamestop-formulier .wpcf7-checkbox .wpcf7-list-item{margin:0;display:block}
.flamestop-formulier .wpcf7-checkbox label{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border:1px solid var(--staal-500);border-radius:2px;background:#fff;cursor:pointer;font-size:.95rem;line-height:1.3}
.flamestop-formulier .wpcf7-checkbox label:hover{border-color:var(--staal-700)}
.flamestop-formulier .wpcf7-checkbox input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--antraciet)}
.flamestop-formulier .wpcf7-checkbox label:has(input:checked){border-color:var(--antraciet);background:var(--staal-100)}
.flamestop-formulier .wpcf7-checkbox input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.flamestop-formulier .wpcf7-checkbox.wpcf7-not-valid label{border-color:var(--rood)}
@media (max-width:559px){ .flamestop-formulier .wpcf7-checkbox{flex-direction:column} .flamestop-formulier .wpcf7-checkbox label{width:100%} }

/* ---------- 19.5 Projecten, foto's en lijntekeningen ---------- */
.project{position:relative}
.project__info{flex:1 1 auto}
.project--link{transition:box-shadow .25s,transform .25s,border-color .25s}
.project--link:hover{box-shadow:0 22px 34px -26px rgba(34,38,47,.55);border-color:var(--staal-500)}
.project--link:focus-within{border-color:var(--antraciet)}
.project__link{color:var(--antraciet);text-decoration:none}
.project__link::after{content:"";position:absolute;inset:0;z-index:1}
.project--link:hover .project__link{color:var(--rood);text-decoration:underline}
/* De foto zoomt bij aanwijzen iets in, maar niet bij "minder beweging" (en niet op papier) */
@media screen and (prefers-reduced-motion:no-preference){
  .project--link .fotovak img{transition:transform .5s ease}
  .project--link:hover .fotovak img{transform:scale(1.03)}
}
/* Titelblok onder de kaart, zoals op een tekenblad: plaats, type gebouw en periode */
.project__titelblok{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:0;border-top:2px solid var(--antraciet);font-family:var(--mono);font-size:.74rem;line-height:1.3}
.project__titelblok > div{padding:8px 12px;border-right:1px solid var(--staal-300);min-width:0}
.project__titelblok > div:last-child{border-right:0}
.project__titelblok dt{color:var(--tekst-label);text-transform:uppercase;letter-spacing:.06em;font-size:.64rem;margin-bottom:2px}
/* Smalle vakjes: hier mag de browser wel afbreken (met een streepje) */
.project__titelblok dd{margin:0;color:var(--tekst);overflow-wrap:anywhere;hyphens:auto}
.projecten--galerij{gap:26px}
@media (min-width:1100px){ .projecten--galerij .project__titel{font-size:1.2rem} }
.project__status{display:inline-block;margin:0 0 8px!important;font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--staal-500);color:var(--antraciet);background:var(--staal-50)}
.project__status--bezig{border-color:var(--rood-rand);color:var(--rood-donker);background:var(--rood-licht)}
.project__tekst{color:var(--tekst-zacht);font-size:.97rem}
.fotovak--foto::before,.fotovak--foto::after{display:none}
.fotovak--foto img{width:100%;height:100%;object-fit:cover}
.fotovak--tekening{background:linear-gradient(0deg,rgba(201,207,215,.35) 1px,rgba(0,0,0,0) 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(201,207,215,.35) 1px,rgba(0,0,0,0) 1px) 0 0/24px 24px,var(--staal-50)}
.fotovak--breed{aspect-ratio:16/10}
.lijntekening{width:78%;height:auto;max-height:86%}
.galerij{margin-top:clamp(40px,5vw,64px)}
.galerij__kop{font-size:clamp(1.3rem,1rem + 1vw,1.7rem);margin:0 0 18px}
.flamestop-galerij{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.flamestop-galerij a{display:block;border:1px solid var(--staal-300);background:var(--staal-100)}
.flamestop-galerij img{width:100%;aspect-ratio:4/3;object-fit:cover}
.flamestop-galerij a:hover{border-color:var(--rood)}
@media (max-width:899px){ .flamestop-galerij{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Op telefoons twee foto's naast elkaar (één per rij gaf bij veel foto's eindeloos scrollen) */
@media (max-width:479px){ .flamestop-galerij{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} }
.gegevens--project{margin-top:0}
.gegevens--project dd a{font-weight:650}

/* Filter boven de projectgalerij: gewone links (niets verstuurt vanzelf) */
.filter{display:grid;gap:12px;margin:0 0 clamp(28px,4vw,44px);padding:16px 18px;background:#fff;border:1px solid var(--staal-300);border-left:4px solid var(--antraciet)}
.filter__rij{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.filter__kop{font-family:var(--mono);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--tekst-label);min-width:64px}
.filter__keuzes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.filter__keuze{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--staal-400);background:var(--staal-50);color:var(--antraciet);font-weight:600;font-size:.95rem;line-height:1.2;text-decoration:none;transition:border-color .15s,background-color .15s}
.filter__keuze:hover{border-color:var(--antraciet);background:#fff;color:var(--antraciet)}
.filter__keuze[aria-current="true"]{background:var(--antraciet);border-color:var(--antraciet);color:#fff}
.filter__aantal{font-family:var(--mono);font-size:.74rem;font-weight:500;color:var(--tekst-label)}
.filter__keuze[aria-current="true"] .filter__aantal{color:var(--op-donker)}

/* Paginanummers */
.paginering{margin-top:clamp(32px,4vw,48px)}
.paginering .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.paginering .page-numbers{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--staal-400);background:#fff;color:var(--antraciet);font-family:var(--mono);font-weight:600;text-decoration:none}
.paginering a.page-numbers:hover{border-color:var(--rood);color:var(--rood)}
.paginering .page-numbers.current{background:var(--antraciet);border-color:var(--antraciet);color:#fff}
.paginering .page-numbers.dots{border:0;background:transparent}

/* ---------- 19.6 Vacatures ---------- */
.vacatures{list-style:none;margin:1.2em 0 1.6em;padding:0;display:grid;gap:14px}
.vacature{position:relative;background:#fff;border:1px solid var(--staal-300);border-left:4px solid var(--staal-600);padding:18px 20px}
.vacature:hover{border-left-color:var(--rood)}
.vacature h3{font-size:1.2rem;font-stretch:112%;margin:0 0 6px}
.vacature__link{color:var(--antraciet);text-decoration:none}
.vacature__link::after{content:"";position:absolute;inset:0}
.vacature:hover .vacature__link{color:var(--rood);text-decoration:underline}
.vacature__kenmerken{font-family:var(--mono);font-size:.78rem;color:var(--tekst-label);margin:0 0 8px!important}
.vacature p{margin:0 0 8px}
.vacature__meer{display:inline-flex;align-items:center;gap:8px;font-weight:650;color:var(--rood)}
.vacature__lijsten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(32px,4vw,48px)}
@media (max-width:999px){ .vacature__lijsten{grid-template-columns:minmax(0,1fr)} }
.vertrouwen--kenmerken{text-transform:none;letter-spacing:.02em}
.vertrouwen__label{color:var(--tekst-label);text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;margin-right:6px}

/* ---------- 19.7 Zoeken, resultaten en vaste ingangen ---------- */
.zoekformulier__label{display:block;font-weight:650;margin-bottom:7px}
.zoekformulier__rij{display:flex;flex-wrap:wrap;gap:10px}
/* Het wachtwoordveld (zie 19.1) heeft dezelfde opmaak als het zoekveld. Een vaste regelhoogte, zodat
   min-height de hoogte bepaalt: veld en knop zijn allebei 48 px hoog, ook in een tekst met ruimere regels. */
.zoekformulier input[type="search"]{flex:1 1 220px;min-width:0}
.zoekformulier input[type="search"],.post-password-form input[type="password"]{font:inherit;line-height:1.25;font-size:1rem;font-weight:400;padding:11px 13px;border:1px solid var(--staal-500);border-radius:2px;background:#fff;color:var(--tekst);min-height:48px}
.zoekformulier input[type="search"]:hover,.post-password-form input[type="password"]:hover{border-color:var(--staal-700)}
.zoekformulier input[type="search"]:focus-visible,.post-password-form input[type="password"]:focus-visible{outline:3px solid var(--focus);outline-offset:0;border-color:var(--antraciet)}
.resultaten{list-style:none;margin:0;padding:0;border-top:2px solid var(--antraciet);max-width:880px}
.resultaat{padding:18px 0;border-bottom:1px solid var(--staal-300)}
.resultaat__soort{margin:0 0 4px;font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-label)}
.resultaat__titel{font-size:1.2rem;font-stretch:112%;margin:0 0 6px}
.resultaat__titel a{color:var(--antraciet);text-decoration:none}
.resultaat__titel a:hover{color:var(--rood);text-decoration:underline}
.resultaat p:last-child{margin:0;color:var(--tekst-zacht)}
.ingangen{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 32px}

/* ---------- 19.8 Voet: sociale media en cookie-instellingen ---------- */
.sociaal{margin-top:18px!important;display:flex!important;flex-wrap:wrap;gap:8px 18px!important}
.sociaal a{display:inline-flex;align-items:center;gap:6px}
.sociaal .ico{width:15px;height:15px}
.voet__logo{height:30px;width:auto;margin-bottom:18px}
.voet__cookie{font:inherit;color:#fff;background:transparent;border:1px solid var(--staal-600);padding:6px 12px;cursor:pointer}
.voet__cookie:hover{border-color:#fff}

/* =====================================================================
   18. Animaties
   Alleen als de bezoeker geen "minder beweging" heeft ingesteld én
   JavaScript draait (klasse .js-anim op <html>). Anders is alles direct zichtbaar.
   .js-anim staat los van .js (menu en vaste kop): komt thema.js te laat
   binnen, dan haalt het vangnet (inc/bestanden.php) na 3 seconden alleen
   .js-anim weg, zodat de inhoud verschijnt en de kop blijft zoals hij is.
   Een element met data-reveal krijgt de klasse .zichtbaar zodra het in
   beeld komt (IntersectionObserver). Lussen (vuur, rook, vlamtong, ring)
   lopen alleen met de klasse .speelt: thema.js haalt die weg zodra het
   element uit beeld is, het tabblad niet zichtbaar is of de bezoeker op
   "Animaties pauzeren" heeft gedrukt. Alleen op het scherm: bij afdrukken
   staat alles in de eindstand.
   ===================================================================== */
@media screen and (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}

  /* Toetsenbordfocus op iets wat nog moest opkomen: thema.js zet er kort .direct op, zodat het meteen
     verschijnt (zonder vertraging, met een korte overgang) */
  .js-anim .direct,.js-anim .direct *{transition-delay:0s!important;transition-duration:.15s!important}

  /* Algemeen: rustig opkomen, met een lichte vertraging per element (--i) */
  .js-anim .opkomen{transition:opacity .6s ease,transform .7s cubic-bezier(.2,.75,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
  .js-anim .opkomen:not(.zichtbaar){opacity:0;transform:translateY(18px)}

  /* Kolommen langs het vak: worden van onder naar boven "gemonteerd" */
  .js-anim .frame::before,.js-anim .frame::after{transition:transform .9s cubic-bezier(.3,.7,.2,1)}
  .js-anim .frame:not(.zichtbaar)::before,.js-anim .frame:not(.zichtbaar)::after{transform:scaleY(0)}

  /* Liggers: schuiven op hun plek, daarna draaien de bouten in */
  .js-anim .ligger__profiel{transition:transform .8s cubic-bezier(.2,.75,.2,1),opacity .5s ease}
  .js-anim .ligger:not(.zichtbaar) .ligger__profiel{opacity:0;transform:translateX(-48px)}
  .js-anim .ligger .knoop__plaat{transition:opacity .4s ease .45s}
  .js-anim .ligger:not(.zichtbaar) .knoop__plaat{opacity:0}
  /* Rode coating wordt over het profiel aangebracht */
  .js-anim .ligger__coating{transition:transform .9s cubic-bezier(.45,0,.2,1) .9s}
  .js-anim .ligger:not(.zichtbaar) .ligger__coating{transform:scaleX(0)}
  .js-anim .ligger__label{transition:opacity .4s ease 1.7s,transform .4s ease 1.7s}
  .js-anim .ligger:not(.zichtbaar) .ligger__label{opacity:0;transform:translateY(-4px)}

  /* Bouten: indraaien (in liggers, kopplaten en de hero) */
  .js-anim .bout{transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .25s ease;transition-delay:calc(var(--bd,.5s) + var(--i,0) * 70ms)}
  .js-anim .boutset:not(.zichtbaar) .bout{opacity:0;transform:rotate(-150deg) scale(.35)}
  .js-anim .ligger{--bd:.55s}
  .js-anim .sectiekop{--bd:.1s}
  .js-anim .tijdlijn{--bd:.2s}

  /* Tijdlijn: de kolom groeit mee naar beneden */
  .js-anim .tijdlijn::before{transition:transform 1.2s cubic-bezier(.3,.7,.2,1)}
  .js-anim .tijdlijn:not(.zichtbaar)::before{transform:scaleY(0)}

  /* Hero: staalskelet wordt opgebouwd */
  .js-anim .skelet .sk-stramien{transition:opacity .5s ease}
  .js-anim .skelet:not(.zichtbaar) .sk-stramien{opacity:0}
  .js-anim .skelet .sk-kolom{transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s ease;transition-delay:calc(.15s + var(--i,0) * 90ms)}
  .js-anim .skelet:not(.zichtbaar) .sk-kolom{opacity:0;transform:translateY(-40px)}
  .js-anim .skelet .sk-ligger{transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .35s ease;transition-delay:calc(.55s + var(--i,0) * 65ms)}
  .js-anim .skelet:not(.zichtbaar) .sk-ligger{opacity:0;transform:translateX(-32px)}
  .js-anim .skelet .sk-hijs{transition:transform .9s cubic-bezier(.3,.7,.2,1) 1.05s,opacity .3s ease 1.05s}
  .js-anim .skelet:not(.zichtbaar) .sk-hijs{opacity:0;transform:translateY(-70px)}
  .js-anim .skelet .sk-plaat{transition:opacity .3s ease 1.1s}
  .js-anim .skelet:not(.zichtbaar) .sk-plaat{opacity:0}
  .js-anim .skelet{--bd:1.15s}
  .js-anim .skelet .sk-schoor{stroke-dasharray:1}
  .js-anim .skelet:not(.zichtbaar) .sk-schoor{stroke-dashoffset:1}
  .js-anim .skelet.zichtbaar .sk-schoor{stroke-dashoffset:0;transition:stroke-dashoffset .8s ease-in-out 1.45s}
  .js-anim .skelet .sk-knoopplaat{transition:opacity .3s ease 1.4s}
  .js-anim .skelet:not(.zichtbaar) .sk-knoopplaat{opacity:0}
  .js-anim .skelet .sk-wand{transition:opacity .5s ease 1.7s}
  .js-anim .skelet:not(.zichtbaar) .sk-wand{opacity:0}
  .js-anim .skelet .sk-coat-v{transform-box:fill-box;transform-origin:50% 100%;transition:transform .8s cubic-bezier(.45,0,.2,1);transition-delay:calc(2s + var(--i,0) * 150ms)}
  .js-anim .skelet:not(.zichtbaar) .sk-coat-v{transform:scaleY(0)}
  .js-anim .skelet .sk-coat-h{transform-box:fill-box;transform-origin:0 50%;transition:transform .7s cubic-bezier(.45,0,.2,1) 2.35s}
  .js-anim .skelet:not(.zichtbaar) .sk-coat-h{transform:scaleX(0)}
  /* Doorvoeringen worden één voor één afgedicht */
  .js-anim .skelet .sk-seal{transition:fill-opacity .45s ease,stroke-dashoffset .6s ease;transition-delay:calc(2.5s + var(--i,0) * 160ms)}
  .js-anim .skelet .sk-seal{stroke-dasharray:1}
  .js-anim .skelet:not(.zichtbaar) .sk-seal{fill-opacity:0;stroke-dashoffset:1}
  .js-anim .skelet .sk-callouts{transition:opacity .5s ease 3.1s}
  .js-anim .skelet:not(.zichtbaar) .sk-callouts{opacity:0}

  /* Doorsnede: hitte trekt naar de wand, de sparing wordt afgedicht */
  .js-anim .doorsnede .ds-pijlen{transition:opacity .5s ease .1s,transform .7s cubic-bezier(.2,.8,.2,1) .1s}
  .js-anim .doorsnede:not(.zichtbaar) .ds-pijlen{opacity:0;transform:translateX(-28px)}
  .js-anim .doorsnede .ds-afdichting{transform-box:fill-box;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.3,.7,.2,1) .6s,opacity .5s ease .6s}
  .js-anim .doorsnede:not(.zichtbaar) .ds-afdichting{opacity:0;transform:scaleY(.12)}
  .js-anim .doorsnede .ds-manchet{transition:opacity .45s ease 1.15s}
  .js-anim .doorsnede:not(.zichtbaar) .ds-manchet{opacity:0}
  .js-anim .doorsnede .ds-label{transition:opacity .4s ease 1.45s,transform .4s ease 1.45s}
  .js-anim .doorsnede:not(.zichtbaar) .ds-label{opacity:0;transform:translateY(8px)}
  .js-anim .doorsnede .ds-callouts{transition:opacity .5s ease 1.7s}
  .js-anim .doorsnede:not(.zichtbaar) .ds-callouts{opacity:0}

  /* Plattegrond: markeringen verschijnen één voor één */
  .js-anim .plattegrond .pg-pop{transition:transform .45s cubic-bezier(.2,.9,.3,1.3),opacity .3s ease;transition-delay:calc(.3s + var(--i,0) * 140ms)}
  .js-anim .plattegrond:not(.zichtbaar) .pg-pop{opacity:0;transform:scale(.2)}

  /* Het reactiestipje pulseert twee keer en staat dan stil (korter dan 5 seconden, dus geen pauzeknop nodig) */
  .reactie__stip{animation:puls 2.2s ease-out 1s 2}
  .js-anim .reactie:not(.speelt) .reactie__stip{animation-play-state:paused}

  /* Eigen online omgeving: het knooppunt wordt gemonteerd (kolom, ligger, plaat, bouten, schoor, coating) */
  .js-anim .knoopdetail{--bd:.9s}
  .js-anim .knoopdetail .kn-kolom{transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
  .js-anim .knoopdetail:not(.zichtbaar) .kn-kolom{opacity:0;transform:translateY(-30px)}
  .js-anim .knoopdetail .kn-ligger{transition:opacity .45s ease .3s,transform .7s cubic-bezier(.2,.8,.2,1) .3s}
  .js-anim .knoopdetail:not(.zichtbaar) .kn-ligger{opacity:0;transform:translateX(50px)}
  .js-anim .knoopdetail .kn-plaat{transition:opacity .4s ease .7s}
  .js-anim .knoopdetail:not(.zichtbaar) .kn-plaat{opacity:0}
  .js-anim .knoopdetail .kn-schoor{stroke-dasharray:1}
  .js-anim .knoopdetail:not(.zichtbaar) .kn-schoor{stroke-dashoffset:1}
  .js-anim .knoopdetail.zichtbaar .kn-schoor{stroke-dashoffset:0;transition:stroke-dashoffset .7s ease-in-out 1.1s}
  .js-anim .knoopdetail .kn-coating{transform-box:fill-box;transform-origin:0 50%;transition:transform .9s cubic-bezier(.45,0,.2,1) 1.5s}
  .js-anim .knoopdetail:not(.zichtbaar) .kn-coating{transform:scaleX(0)}

  /* Band: schoorverband verschijnt zacht */
  .js-anim .band .band__schoren{transition:opacity 1s ease .2s}
  .js-anim .band:not(.zichtbaar) .band__schoren{opacity:0}

  /* Brandwerend coaten: vlammen komen op, de coating zwelt op en houdt het vuur weg van het staal.
     Daarna blijft een rustige vlamlus lopen, die pauzeert zodra het paneel uit beeld is (.speelt).
     Per element hooguit één animatie op transform/opacity (opkomen op de <g>, lus op het element): dan draait
     Chrome de lus op de compositor en blijft de hoofdthread vrij. Dus: .vlam-op (de <g> om elke vlam) groeit
     op, .vlam zelf flakkert; .vu-gloed-op (de <g> om de gloed) komt op, .vu-gloed pulseert. */
  .js-anim .vuur .coat-gloed,.js-anim .vuur .coat-rand,.js-anim .vuur .coat-schuim,.js-anim .vuur .coat-rood{transition:stroke-width 1.7s cubic-bezier(.3,.6,.2,1) .7s,stroke-opacity 1.2s ease 1.1s}
  .js-anim .vuur:not(.zichtbaar) .coat-gloed{stroke-width:6px;stroke-opacity:0}
  .js-anim .vuur:not(.zichtbaar) .coat-rand{stroke-width:8px}
  .js-anim .vuur:not(.zichtbaar) .coat-schuim{stroke-width:5px}
  .js-anim .vuur:not(.zichtbaar) .coat-rood{stroke-width:6px}
  .js-anim .vuur .vu-gloed-op,.js-anim .vuur .vu-holte{transition:opacity .9s ease .2s}
  .js-anim .vuur:not(.zichtbaar) .vu-gloed-op,.js-anim .vuur:not(.zichtbaar) .vu-holte{opacity:0}
  .js-anim .vuur:not(.zichtbaar) .vlam-op{opacity:0;transform:scaleY(0)}
  .js-anim .vuur.zichtbaar .vlam-op{animation:vlamgroei .8s cubic-bezier(.2,.7,.3,1) calc(var(--i,0) * 90ms) both}
  .js-anim .vuur.zichtbaar .vlam{animation:flakker var(--d,2s) ease-in-out calc(1.1s + var(--v,0s)) infinite alternate}
  .js-anim .vuur.zichtbaar .vlam--stuit{animation-name:stuit}
  .js-anim .vuur.zichtbaar .vu-gloed{animation:gloedpuls 3.4s ease-in-out 1.2s infinite}
  /* Pauzeren (buiten beeld, verborgen tabblad of de knop): de lus en, zoals voorheen, ook het opkomen */
  .js-anim .vuur.zichtbaar:not(.speelt) .vlam,.js-anim .vuur.zichtbaar:not(.speelt) .vlam-op,.js-anim .vuur.zichtbaar:not(.speelt) .vu-gloed{animation-play-state:paused}
  /* Tijdelijk zonder overgang, om "opnieuw afspelen" vanuit de beginstand te starten */
  .js-anim .vuur.reset .coat-gloed,.js-anim .vuur.reset .coat-rand,.js-anim .vuur.reset .coat-schuim,.js-anim .vuur.reset .coat-rood,.js-anim .vuur.reset .vu-gloed-op,.js-anim .vuur.reset .vu-holte{transition:none}

  /* Vergelijking "niet afgedicht" tegenover "brandwerend afgedicht".
     Links trekt rook door de kier en kleurt ruimte B langzaam grijs; rechts stuit de rook op de afdichting.
     Na de start blijft een rustige lus lopen, die pauzeert buiten beeld (.speelt).
     Ook hier per element één animatie: .vlam-op en .vg-lek-op (de <g> eromheen) komen op, .vlam en .vg-lek
     lopen in de lus. Het grijs worden van ruimte B (.vg-b-rook) is een animatie en geen overgang, zodat
     "Animaties pauzeren" het ook stilzet (een overgang trekt zich daar niets van aan). */
  .js-anim .vergelijk:not(.zichtbaar) .rook{opacity:0}
  .js-anim .vergelijk:not(.zichtbaar) .vg-b-rook{opacity:0}
  .js-anim .vergelijk:not(.zichtbaar) .vg-lek-op{opacity:0;transform:scaleX(0)}
  .js-anim .vergelijk:not(.zichtbaar) .vlam-op{opacity:0;transform:scaleY(0)}
  .js-anim .vergelijk.zichtbaar .vg-b-rook{animation:rook-b 7s ease-in 1.6s both}
  .js-anim .vergelijk.zichtbaar .vlam-op{animation:vlamgroei .8s cubic-bezier(.2,.7,.3,1) calc(var(--i,0) * 90ms) both}
  .js-anim .vergelijk.zichtbaar .vlam{animation:flakker var(--d,2s) ease-in-out calc(1s + var(--v,0s)) infinite alternate}
  .js-anim .vergelijk.zichtbaar .rook--door{animation:rook-door 4.8s linear calc(.7s + var(--r,0s)) infinite both}
  .js-anim .vergelijk.zichtbaar .rook--stuit{animation:rook-stuit 4.8s linear calc(.7s + var(--r,0s)) infinite both}
  /* De vlamtong in de kier komt pas na het vuur en de rook op (lek-op, op de <g>), daarna flakkert hij rustig
     (lek, op het pad). "backwards" houdt het pad tijdens het opkomen in de beginstand van de lus (.55 breed,
     .7 dekkend); samen geeft dat precies het oude opkomen. */
  .js-anim .vergelijk.zichtbaar .vg-lek-op{animation:lek-op .5s ease-out 1.6s both}
  .js-anim .vergelijk.zichtbaar .vg-lek{animation:lek 1.7s ease-in-out 2.1s infinite alternate backwards}
  .js-anim .vergelijk.zichtbaar:not(.speelt) .vlam,.js-anim .vergelijk.zichtbaar:not(.speelt) .vlam-op,.js-anim .vergelijk.zichtbaar:not(.speelt) .rook,.js-anim .vergelijk.zichtbaar:not(.speelt) .vg-lek,.js-anim .vergelijk.zichtbaar:not(.speelt) .vg-lek-op,.js-anim .vergelijk.zichtbaar:not(.speelt) .vg-b-rook{animation-play-state:paused}

  /* Wandvlak met doorvoeringen: ze worden één voor één afgedicht en krijgen een label */
  .js-anim .wandvlak{--bd:.15s}
  .js-anim .wandvlak .wv-seal{stroke-dasharray:1;transition:fill-opacity .45s ease,stroke-dashoffset .6s ease;transition-delay:calc(.5s + var(--i,0) * 260ms)}
  .js-anim .wandvlak:not(.zichtbaar) .wv-seal{fill-opacity:0;stroke-dashoffset:1}
  .js-anim .wandvlak .wv-tag{transition:opacity .3s ease,transform .4s cubic-bezier(.2,.9,.3,1.3);transition-delay:calc(.95s + var(--i,0) * 260ms)}
  .js-anim .wandvlak:not(.zichtbaar) .wv-tag{opacity:0;transform:scale(.5)}

  /* Aanpak: de ligger tussen de stappen wordt ingeschoven */
  .js-anim .aanpak::before{transition:transform 1.1s cubic-bezier(.3,.7,.2,1) .2s}
  .js-anim .aanpak:not(.zichtbaar)::before{transform:scaleX(0)}

  /* ---- Extra staalskelet (feedback 01-10-2026: "animaties juist graag") ---- */
  /* Sectiekop: de kopplaat wordt neergelaten, de bouten draaien in (zie Bouten) en de lijn schuift als
     een ligger uit, met het eindplaatje als laatste */
  .js-anim .sectiekop .plaat{transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
  .js-anim .sectiekop:not(.zichtbaar) .plaat{opacity:0;transform:translateY(-16px)}
  .js-anim .sectiekop__lijn{transform-origin:0 50%;transition:transform 1s cubic-bezier(.2,.75,.2,1) .35s}
  .js-anim .sectiekop:not(.zichtbaar) .sectiekop__lijn{transform:scaleX(0)}
  .js-anim .sectiekop__naam{transition:opacity .5s ease .3s}
  .js-anim .sectiekop:not(.zichtbaar) .sectiekop__naam{opacity:0}

  /* Strook onder de hero: de punten komen één voor één, het plaatje wordt rechtgedraaid en vastgezet */
  .js-anim .vertrouwen li{transition:opacity .5s ease,transform .6s cubic-bezier(.2,.75,.2,1);transition-delay:calc(.2s + var(--i,0) * 160ms)}
  .js-anim .vertrouwen:not(.zichtbaar) li{opacity:0;transform:translateX(-14px)}
  .js-anim .vertrouwen__ico{transition:transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.35s + var(--i,0) * 160ms)}
  .js-anim .vertrouwen:not(.zichtbaar) .vertrouwen__ico{transform:rotate(-90deg) scale(.6)}

  /* Korte punten en lijsten: de lijn bovenaan schuift als een ligger op zijn plek */
  .js-anim .argument{border-top-color:transparent;background:linear-gradient(var(--lijn,var(--staal-600)),var(--lijn,var(--staal-600))) 0 0/100% 3px no-repeat;background-origin:border-box;
    transition:opacity .6s ease,transform .7s cubic-bezier(.2,.75,.2,1),background-size .9s cubic-bezier(.2,.75,.2,1);
    transition-delay:calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),calc(.25s + var(--i,0) * 140ms)}
  .js-anim .argument:nth-child(2){--lijn:var(--rood)}
  .js-anim .argument:not(.zichtbaar){background-size:0 3px}
  .js-anim .kolomlijst{border-top-color:transparent;background:linear-gradient(var(--antraciet),var(--antraciet)) 0 0/100% 2px no-repeat;background-origin:border-box;
    transition:opacity .6s ease,transform .7s cubic-bezier(.2,.75,.2,1),background-size .9s cubic-bezier(.2,.75,.2,1);
    transition-delay:calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),calc(.25s + var(--i,0) * 160ms)}
  .js-anim .kolomlijst:not(.zichtbaar){background-size:0 2px}
  .js-anim .leesvak__opgave-kop{border-top-color:transparent;background:linear-gradient(var(--antraciet),var(--antraciet)) 0 0/100% 2px no-repeat;background-origin:border-box;transition:background-size .9s cubic-bezier(.2,.75,.2,1) .4s}
  .js-anim .frame:not(.zichtbaar) .leesvak__opgave-kop{background-size:0 2px}

  /* Dienstkaarten: de lijn bovenaan schuift als een ligger op zijn plek, de kopplaat met het pictogram zakt
     neer en de twee bouten worden vastgezet. Bij aanwijzen en bij focus kleurt de lijn rood, zoals zonder
     animatie, en de schaduw komt zacht op (zonder vertraging). */
  .js-anim .dienst{--lijn:var(--staal-600);border-top-color:transparent;background-image:linear-gradient(var(--lijn),var(--lijn));background-position:0 0;background-size:100% 4px;background-repeat:no-repeat;background-origin:border-box;
    transition:opacity .6s ease,transform .7s cubic-bezier(.2,.75,.2,1),background-size .9s cubic-bezier(.2,.75,.2,1),box-shadow .25s ease;
    transition-delay:calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),calc(.2s + var(--i,0) * 110ms),0s}
  .js-anim .dienst:hover,.js-anim .dienst:focus-within{--lijn:var(--rood)}
  /* Project- en vacaturekaarten: de schaduw en de rand bij aanwijzen ook zacht laten overgaan
     (de regels van .opkomen zouden die overgang anders overschrijven) */
  .js-anim .project--link,.js-anim .vacature{transition:opacity .6s ease,transform .7s cubic-bezier(.2,.75,.2,1),box-shadow .25s ease,border-color .25s ease;transition-delay:calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),0s,0s}
  .js-anim .dienst:not(.zichtbaar){background-size:0 4px}
  .js-anim .dienst__ico{transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .35s ease;transition-delay:calc(.35s + var(--i,0) * 110ms)}
  .js-anim .dienst:not(.zichtbaar) .dienst__ico{opacity:0;transform:translateY(-16px)}
  .js-anim .dienst__ico::before,.js-anim .dienst__ico::after{transition:transform .4s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.8s + var(--i,0) * 110ms)}
  .js-anim .dienst:not(.zichtbaar) .dienst__ico::before,.js-anim .dienst:not(.zichtbaar) .dienst__ico::after{transform:scale(0)}

  /* Over ons: het pand tekent zichzelf, in de volgorde van de bouw (per onderdeel een eigen vertraging --d) */
  .js-anim .pand .pd-lijn{stroke-dasharray:1;transition:stroke-dashoffset 1.1s cubic-bezier(.45,0,.25,1);transition-delay:calc(var(--d,0s) + .2s)}
  .js-anim .pand:not(.zichtbaar) .pd-lijn{stroke-dashoffset:1}
  .js-anim .pand .pd-stramien{transition:opacity .6s ease}
  .js-anim .pand:not(.zichtbaar) .pd-stramien{opacity:0}

  /* Snelkoppelingen: de lijn schuift als een ligger uit, daarna komen de knoppen één voor één */
  .js-anim .snel{border-top-color:transparent;background:linear-gradient(var(--antraciet),var(--antraciet)) 0 0/100% 2px no-repeat;background-origin:border-box;transition:background-size .9s cubic-bezier(.2,.75,.2,1) .2s}
  .js-anim .snel:not(.zichtbaar){background-size:0 2px}
  .js-anim .snel li{transition:opacity .45s ease,transform .55s cubic-bezier(.2,.75,.2,1);transition-delay:calc(.45s + var(--i,0) * 90ms)}
  .js-anim .snel:not(.zichtbaar) li{opacity:0;transform:translateY(8px)}

  /* Oplevering: de kopplaat zakt op zijn plek, daarna worden de bouten vastgezet */
  .js-anim .oplevering__plaat{transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .35s ease;transition-delay:.15s}
  .js-anim .oplevering:not(.zichtbaar) .oplevering__plaat{opacity:0;transform:translateY(-16px)}
  .js-anim .oplevering__plaat::before,.js-anim .oplevering__plaat::after{transition:transform .4s cubic-bezier(.2,.8,.2,1) .65s}
  .js-anim .oplevering:not(.zichtbaar) .oplevering__plaat::before,.js-anim .oplevering:not(.zichtbaar) .oplevering__plaat::after{transform:scale(0)}

  /* Afsluiter op de homepagina: telefoon en e-mail komen één voor één, het plaatje wordt rechtgedraaid */
  .js-anim .slot__contact li{transition:opacity .5s ease,transform .6s cubic-bezier(.2,.75,.2,1);transition-delay:calc(.35s + var(--i,0) * 160ms)}
  .js-anim .slot__contact:not(.zichtbaar) li{opacity:0;transform:translateX(-12px)}
  .js-anim .slot__ico{transition:transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.5s + var(--i,0) * 160ms)}
  .js-anim .slot__contact:not(.zichtbaar) .slot__ico{transform:rotate(-90deg) scale(.6)}

  /* Coatpaneel: de drie stappen volgen elkaar op, gelijk met de vuuranimatie */
  .js-anim .coatstappen li{transition:opacity .5s ease,transform .6s cubic-bezier(.2,.75,.2,1)}
  .js-anim .coatstappen li:nth-child(1){transition-delay:.35s}
  .js-anim .coatstappen li:nth-child(2){transition-delay:.75s}
  .js-anim .coatstappen li:nth-child(3){transition-delay:1.15s}
  .js-anim .coatstappen li:nth-child(n+4){transition-delay:1.4s}
  .js-anim .coatpaneel__tekst:not(.zichtbaar) .coatstappen li{opacity:0;transform:translateX(-12px)}

  /* Lijntekeningen (projecten zonder foto, Over ons zonder foto): de lijnen tekenen zichzelf */
  .js-anim .lijntekening .lt-lijn{stroke-dasharray:1;transition:stroke-dashoffset 1.6s cubic-bezier(.45,0,.25,1) .25s}
  .js-anim [data-reveal]:not(.zichtbaar) .lijntekening .lt-lijn{stroke-dashoffset:1}

  /* Plattegrond: wat nog moet worden afgedicht, krijgt een rustige rode ring (lus, pauzeert buiten beeld) */
  .js-anim .plattegrond.zichtbaar .pg-ring{animation:pgring 2.6s ease-out 1.6s infinite}
  .js-anim .plattegrond.zichtbaar:not(.speelt) .pg-ring{animation-play-state:paused}
}
@media screen and (prefers-reduced-motion:no-preference) and (max-width:899px){
  .js-anim .aanpak:not(.zichtbaar)::before{transform:scaleY(0)}
}
/* Rook die door de kier naar ruimte B trekt en daar uitwaaiert */
@keyframes rook-door{
  0%{transform:translate(-90px,40px) scale(.5);opacity:0}
  15%{opacity:.7}
  45%{transform:translate(0,0) scale(.75);opacity:.8}
  75%{transform:translate(80px,-40px) scale(1.4);opacity:.55}
  100%{transform:translate(150px,-72px) scale(2);opacity:0}
}
/* Rook die op de afdichting stuit en in ruimte A omhoog wijkt */
@keyframes rook-stuit{
  0%{transform:translate(-90px,40px) scale(.5);opacity:0}
  15%{opacity:.7}
  50%{transform:translate(-14px,2px) scale(.85);opacity:.75}
  100%{transform:translate(-55px,-72px) scale(1.7);opacity:0}
}
/* Vlamtong die door de kier lekt: eerst opkomen (lek-op, op de <g>), daarna de lus (lek, op het pad) */
@keyframes lek-op{
  from{opacity:0;transform:scaleX(0)}
  to{opacity:1;transform:scaleX(1)}
}
@keyframes lek{
  0%{transform:scaleX(.55);opacity:.7}
  50%{transform:scaleX(1.1);opacity:1}
  100%{transform:scaleX(.8);opacity:.85}
}
@keyframes puls{
  0%{box-shadow:0 0 0 0 rgba(200,16,12,.45)}
  70%{box-shadow:0 0 0 9px rgba(200,16,12,0)}
  100%{box-shadow:0 0 0 0 rgba(200,16,12,0)}
}
@keyframes vlamgroei{
  from{transform:scaleY(0);opacity:0}
  to{transform:scaleY(1);opacity:1}
}
/* Vlamtongen langs het profiel: rustig flakkeren, de punt zwiept licht heen en weer */
@keyframes flakker{
  0%{transform:scale(1,1) skewX(0deg);opacity:.92}
  30%{transform:scale(.96,1.08) skewX(-2.5deg);opacity:1}
  60%{transform:scale(1.03,.93) skewX(2deg);opacity:.8}
  100%{transform:scale(.98,1.04) skewX(-1deg);opacity:.95}
}
/* Vlammen onder de flens: stuiten op de laag en wijken naar opzij uit */
@keyframes stuit{
  0%{transform:scale(1,1);opacity:.9}
  50%{transform:scale(1.07,.96);opacity:1}
  100%{transform:scale(.97,1.02);opacity:.85}
}
@keyframes gloedpuls{
  0%,100%{opacity:1}
  50%{opacity:.7}
}
/* Ruimte B in de vergelijking kleurt langzaam grijs */
@keyframes rook-b{
  from{opacity:0}
  to{opacity:1}
}
@keyframes pgring{
  0%{opacity:.8;transform:scale(1)}
  100%{opacity:0;transform:scale(2.3)}
}

/* =====================================================================
   19b. Meer lucht (feedback 30-09-2026)
   Ruimere witruimte tussen en binnen de vakken, iets grotere regelafstand,
   tekstregels van hooguit ongeveer 65 tekens, nooit meer dan drie kaarten
   naast elkaar en minder randen waar ze niets toevoegen. Stijl, kleuren en
   animaties blijven zoals in het ontwerp.
   ===================================================================== */
body{line-height:1.7}
.frame{padding-block:clamp(76px,10vw,144px)}
.hero .frame{padding-block:clamp(52px,7vw,104px) clamp(64px,7vw,104px)}
.hero--pagina .frame{padding-block:clamp(40px,5vw,76px) clamp(56px,6vw,92px)}
.band .frame{padding-block:clamp(60px,7vw,96px)}
.sectiekop{margin-bottom:clamp(32px,4vw,44px)}
.kopblok{gap:24px 72px;margin-bottom:clamp(44px,6vw,76px)}
/* Tekstregels van hooguit ongeveer 65 tekens */
main p:not(.sectiekop):not(.vg-kop){max-width:65ch}
.inhoud li,.faq__antwoord,.kolomlijst__punten li{max-width:65ch}
.intro{max-width:60ch;line-height:1.65}
.hero__lead{max-width:34em;margin-bottom:32px;line-height:1.65}
/* Eén korte regel onder de knoppen op de homepagina (template-parts/secties/home-hero.php, Customizer-veld
   home_knop_noot): rustig grijs, dicht onder de knoppen */
.hero__noot{font-size:.9rem;color:var(--tekst-zacht);margin:12px 0 0;max-width:34em}
/* Opening van de homepagina (de enige .hero zonder .hero--pagina) op telefoons: de knoppen in het eerste
   scherm, en de strook (VCA, werkgebied) vóór de tekening in plaats van een vol scherm lager.
   Met een inleiding van ongeveer 40 woorden staat de rode knop dan helemaal in beeld op 360x640, 375x635,
   393x659 en ook op de iPhone SE in Safari (375x553). Daarvoor zijn kop en inleiding op telefoons iets kleiner.
   De kop van een gewone pagina (.hero--pagina, bijv. Brandwerende doorvoeringen) krijgt op telefoons dezelfde
   compacte maten, behalve de grootte van de H1: zo staat de knop "Offerte aanvragen" ook daar in het eerste
   scherm op 360x640 en 375x667 (op 375x553 hangt dat af van de lengte van de titel en de inleiding).
   Het titelblok van de tekening verdwijnt op telefoons al (zie 19b, tekeningen op telefoons). */
@media (max-width:559px){
  .hero:not(.hero--pagina) .frame{padding-top:12px}
  .hero:not(.hero--pagina) .label{margin-bottom:12px;letter-spacing:.04em;font-size:.72rem}
  .hero:not(.hero--pagina) h1{font-size:2rem;margin-bottom:12px}
  .hero:not(.hero--pagina) .hero__lead{font-size:1rem;margin-bottom:18px;line-height:1.45}
  .hero--pagina .frame{padding-top:20px}
  .hero--pagina .label{margin-bottom:12px;letter-spacing:.04em;font-size:.72rem}
  .hero--pagina h1{margin-bottom:12px}
  .hero--pagina .hero__lead{font-size:1rem;margin-bottom:18px;line-height:1.45}
}
@media (max-width:999px){
  .hero:not(.hero--pagina) > .frame{display:flex;flex-direction:column}
  .hero:not(.hero--pagina) .hero__grid{display:contents}
  .hero:not(.hero--pagina) .hero__tekst{order:1}
  .hero:not(.hero--pagina) .vertrouwen{order:2;margin-top:24px}
  .hero:not(.hero--pagina) .tekenblad{order:3;margin-top:28px}
}
/* Ruimere tussenruimte in rasters (hooguit drie kaarten naast elkaar) */
.diensten,.projecten{gap:28px}
.argumenten{gap:28px;margin-top:40px}
.vergelijk{gap:24px}
.doorvoer__top{margin-top:clamp(64px,8vw,112px)}
.doorvoer__top--los{margin-top:0}
.dienst{padding:30px 28px 32px;gap:14px}
.project__info{padding:20px 22px 24px}
.waarom-blok{padding:clamp(24px,4vw,52px)}
.cta-blok{padding:clamp(24px,3.5vw,40px)}
.tijdlijn > li{padding-bottom:36px}
.omgeving__punten{gap:28px 32px}
.faq summary{padding:20px 0}
/* Minder randen: argumenten zonder kader (alleen de lijn bovenaan), lijsten zonder scheidingslijnen */
.argument{background:transparent;border:0;border-top:3px solid var(--staal-600);padding:22px 4px 0}
.inhoud ul:not([class]) > li,.inhoud ul.wp-block-list > li,.inhoud ol:not([class]) > li,.inhoud ol.wp-block-list > li{border-bottom:0}
.inhoud ul:not([class]) > li,.inhoud ul.wp-block-list > li{padding:5px 0 5px 24px}
.lijst li{border-bottom:0;padding:6px 0}
.flamestop-certificaten li{border-bottom:0}
@media (min-width:600px){ .argumenten--twee{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:599px){ .argumenten{gap:32px} }
/* Pagina Brandwerende doorvoeringen: twee korte lijsten naast elkaar (waar / wat) */
.kolomlijsten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px clamp(32px,6vw,88px)}
@media (max-width:699px){ .kolomlijsten{grid-template-columns:minmax(0,1fr)} }
.kolomlijst{min-width:0;border-top:2px solid var(--antraciet);padding-top:18px}
.kolomlijst__kop{font-family:var(--mono);font-size:.78rem;font-weight:600;font-stretch:100%;letter-spacing:.08em;text-transform:uppercase;color:var(--antraciet);margin:0 0 14px}
.kolomlijst__punten{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.kolomlijst__punten li{position:relative;padding-left:24px;color:var(--tekst-zacht)}
.kolomlijst__punten li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:8px;background:var(--rood)}
.kolomlijst__punten strong{color:var(--antraciet)}
.inhoud--na{margin-top:clamp(36px,5vw,56px)}
/* Afsluiting van een dienstpagina: één regel met de andere diensten en één oproep */
.ookbij{display:grid;gap:14px;margin-bottom:clamp(32px,4vw,48px)}
.ookbij__diensten{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px}
.ookbij__kop{font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-label)}
.ookbij ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline}
.ookbij li{display:inline-flex;align-items:baseline}
.ookbij li + li::before{content:"·";margin:0 10px;color:var(--staal-500)}
.ookbij li a{display:inline-block;padding:8px 0;font-weight:600;color:var(--antraciet);text-decoration:underline;text-decoration-color:var(--staal-400);text-underline-offset:.25em}
/* Op telefoons breken de links over meer regels: dan geen punten (die kwamen aan het begin van een regel),
   alleen ruimte ertussen */
@media (max-width:559px){ .ookbij li + li::before{display:none} .ookbij ul{gap:0 20px} }
.ookbij li a:hover{color:var(--rood);text-decoration-color:var(--rood)}
.ookbij__projecten{margin:0}
.sectie--afsluiting .cta-blok{margin-top:0}
/* "Wat u bij de oplevering krijgt" (Doorvoeringen en Coaten, vóór de oproep): compact, met een kopplaat */
.oplevering{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:start;margin-bottom:clamp(28px,4vw,44px);padding:clamp(18px,3vw,28px);background:#fff;border:1px solid var(--staal-300);border-left:4px solid var(--antraciet)}
.oplevering__plaat{width:52px;height:52px;display:grid;place-items:center;border:1.5px solid var(--staal-600);background:var(--staal-100);color:var(--antraciet);position:relative}
.oplevering__plaat .ico{width:28px;height:28px;stroke-width:1.6}
.oplevering__plaat::before,.oplevering__plaat::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--staal-500);top:4px;left:4px}
.oplevering__plaat::after{left:auto;right:4px;top:auto;bottom:4px}
.oplevering__kop{font-size:clamp(1.15rem,1rem + .5vw,1.35rem);font-stretch:112%;margin:4px 0 8px}
.oplevering__tekst p,.oplevering__tekst li{color:var(--tekst-zacht)}
.oplevering__tekst p{margin:0 0 .6em}
.oplevering__tekst > :last-child{margin-bottom:0}
@media (max-width:479px){ .oplevering{grid-template-columns:minmax(0,1fr);gap:12px} }
/* Op Doorvoeringen staat het blok direct onder de stappen, in de donkere sectie "Zo gaan wij te werk"
   (template-parts/secties/oplevering.php, klasse oplevering--stappen): ruimte erboven en een rode rand
   links, zodat de witte kaart los staat van het donkere vlak. De kop en de focusrand krijgen de kleuren van
   de witte kaart (de donkere sectie maakt koppen en focusranden wit: dan wit op wit). */
.oplevering--stappen{margin:clamp(28px,4vw,44px) 0 0;border-left-color:var(--rood)}
.sectie--donker .oplevering__kop{color:var(--antraciet)}
.sectie--donker .oplevering :focus-visible{outline-color:var(--focus)}
.sectie--afsluiting .frame{padding-block:clamp(60px,8vw,112px)}
/* Op telefoons niets tegen elkaar aan */
@media (max-width:559px){
  .knoppen{gap:14px}
  .knoppen .knop{width:100%}
  .cta-blok{gap:24px}
  .hero__grid{gap:40px}
  .vertrouwen{gap:14px 22px;padding:16px}
  .tijdlijn > li{gap:18px}
}
/* Tekeningen op tablets en kleine laptops: dezelfde regels als op telefoons (de twee blokken hieronder), maar
   afhankelijk van de breedte van de tekening in plaats van die van het scherm. Op een tablet (768-1279 px)
   staat een tekening vaak in een kolom en is hij even smal als op een telefoon of smaller (300-520 px); de
   tekst was daar 8 tot 10 px. De maten staan in eenheden van de tekening: wat op 343 px past, past ook op 460 px.
   - Containers: .tekenblad, .plattegrond, .vg-paneel en .vuur. Ze staan altijd in een rasterkolom of blok met
     een vaste breedte, nooit in een kolom met auto- of min-content-breedte (de containment maakt hem dan 0 breed).
   - Deze regels staan vóór de telefoonregels: op een telefoon winnen die, dus daar verandert niets.
   - Een tekening tot 640 px breed (bijv. het staalskelet op 1280 px): een paar kleine sierlabels iets groter,
     zodat ook die minstens 11 px zijn. In een tekening smaller dan 560 px en op een telefoon staan ze niet
     in beeld (.tk-sier); daarom alleen vanaf een scherm van 560 px. */
.tekenblad,.plattegrond,.vg-paneel,.vuur{container-type:inline-size}
@media (min-width:560px){
  @container (max-width:640px){
    .sk-niveau text{font-size:13.5px}
    .doorsnede__svg .ds-klein{font-size:12.5px}
  }
}
@container (max-width:560px){
  .tekenblad .titelblok,.tk-sier{display:none}
  svg text.tk-betekenis{font-size:19px}
  .plattegrond__svg text.tk-betekenis{font-size:21px}
  .doorsnede__svg text.tk-betekenis{font-size:21px}
  .doorsnede__svg text.ds-zijde{letter-spacing:.02em}
  .doorsnede__svg text.ds-klein.tk-betekenis{transform:translate(-24px,0)}
  .doorsnede__svg .ds-labeltekst{font-size:21px}
  .vg-paneel svg text.tk-betekenis:not(.vg-label--klein){font-size:19px;letter-spacing:0}
  .ds-nr circle,.ds-nr text,.sk-callouts circle,.sk-callouts text{transform-box:fill-box;transform-origin:center;transform:scale(1.7)}
}
@container (max-width:340px){
  .plattegrond__svg text.tk-betekenis{font-size:23px;letter-spacing:.04em}
  .vuur__svg text.tk-betekenis{font-size:22px}
  .doorsnede__svg text.tk-betekenis,.doorsnede__svg .ds-labeltekst{font-size:25px}
  .doorsnede__svg text.ds-klein.tk-betekenis{transform:translate(-43px,0)}
  .doorsnede__svg text.ds-zijde:not(.ds-zijde--brand){letter-spacing:0;transform:translate(20px,0)}
  .doorsnede__svg .ds-label rect{transform-box:fill-box;transform-origin:center;transform:scale(1.12,1.2)}
  .ds-nr text{transform:scale(2)}
  .sk-callouts text{transform:scale(2.1)}
}
/* Tekeningen op telefoons: tekst in een SVG schaalt mee met de tekening en wordt dan te klein om te lezen
   (op een telefoon van 375 px 6 tot 9 px). Doel: elke zichtbare tekst in een tekening minstens 11 px op het
   scherm, ook op 320 px. Daarom onder 560 px:
   - geen titelblok (alleen sier);
   - sierlabels weg (.tk-sier, op een tekst of op een heel onderdeel: assen, verdiepingen, D-nummers in
     plattegrond en wand, de woorden bij de maatlijnen); de legenda in HTML draagt de betekenis;
   - labels met betekenis groter (text.tk-betekenis; maten in eenheden van de tekening). Per tekening zo
     groot als past zonder over een wand, leiding of de rand te lopen;
   - de genummerde verwijzingen naar de legenda (.ds-nr, .sk-callouts) groter, elk vanuit zijn eigen
     midden, zodat er niets verschuift.
   Onder 375 px is de tekening nog kleiner: dan nog een stap groter (tweede blok hieronder).
   Klassen en posities: template-parts/tekeningen/. */
@media (max-width:559px){
  .tekenblad .titelblok,.tk-sier{display:none}
  /* Standaard (o.a. STAAL in het lijf van het profiel bij de vuuranimatie) */
  svg text.tk-betekenis{font-size:19px}
  /* Plattegrond: de ruimtenamen passen ook groter tussen de wanden en leidingen */
  .plattegrond__svg text.tk-betekenis{font-size:21px}
  /* Doorsnede: BRANDZIJDE en BESCHERMDE ZIJDE met minder letterafstand, "hitte en rook" iets naar links
     (anders loopt het over de wand) en het nummer D-01 even groot, nog ruim binnen zijn kader */
  .doorsnede__svg text.tk-betekenis{font-size:21px}
  .doorsnede__svg text.ds-zijde{letter-spacing:.02em}
  .doorsnede__svg text.ds-klein.tk-betekenis{transform:translate(-24px,0)}
  .doorsnede__svg .ds-labeltekst{font-size:21px}
  /* Vergelijking: de labels bij de wand (twee regels) houden de standaardmaat; COMPARTIMENT A en B zonder
     letterafstand, anders lopen ze tegen de wand in het midden (x 185 tot 215) */
  .vg-paneel svg text.tk-betekenis:not(.vg-label--klein){font-size:19px;letter-spacing:0}
  .ds-nr circle,.ds-nr text,.sk-callouts circle,.sk-callouts text{transform-box:fill-box;transform-origin:center;transform:scale(1.7)}
}
/* Smaller dan 375 px (bijv. 320 en 360 px): de labels nog groter, met wat meer plaats waar dat nodig is.
   - Doorsnede: "hitte en rook" verder naar links (eindigt vóór de wand op x 250), BESCHERMDE ZIJDE zonder
     letterafstand en naar rechts (begint rechts van de wand, op x 356), en het kader van D-01 iets groter.
   - De cijfers in de cirkels groter dan de cirkels zelf; ze passen er nog ruim in.
   Met deze maten raakt geen label een wand, leiding of de rand van de tekening. */
@media (max-width:374px){
  .plattegrond__svg text.tk-betekenis{font-size:23px;letter-spacing:.04em}
  .vuur__svg text.tk-betekenis{font-size:22px}
  .doorsnede__svg text.tk-betekenis,.doorsnede__svg .ds-labeltekst{font-size:25px}
  .doorsnede__svg text.ds-klein.tk-betekenis{transform:translate(-43px,0)}
  .doorsnede__svg text.ds-zijde:not(.ds-zijde--brand){letter-spacing:0;transform:translate(20px,0)}
  .doorsnede__svg .ds-label rect{transform-box:fill-box;transform-origin:center;transform:scale(1.12,1.2)}
  .ds-nr text{transform:scale(2)}
  .sk-callouts text{transform:scale(2.1)}
}

/* Leesvak: langere tekst van een dienst in één rustige kolom, met op brede schermen een smalle
   inhoudsopgave ernaast (alleen bij twee of meer tussenkoppen) */
.leesvak{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.leesvak__opgave{display:none}
@media (min-width:1100px){
  .leesvak--opgave{grid-template-columns:220px minmax(0,1fr)}
  .leesvak__opgave{display:block;position:sticky;top:calc(var(--kop-hoogte) + 36px)}
}
.leesvak__opgave-kop{margin:0 0 10px;padding-top:12px;border-top:2px solid var(--antraciet);font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-label)}
.leesvak__opgave ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
/* Zonder nummers: de enige nummering op een dienstpagina is die van de platen bij de secties */
.leesvak__opgave a{display:block;padding:7px 0;font-size:.95rem;line-height:1.35;color:var(--tekst-zacht);text-decoration:none}
.leesvak__opgave a:hover{color:var(--rood);text-decoration:underline;text-underline-offset:.2em}
.leestekst{max-width:68ch;font-size:1.0625rem;line-height:1.75}
.leestekst p{margin:0 0 1.15em}
.leestekst > h2{font-size:clamp(1.45rem,1.1rem + 1.2vw,1.95rem);line-height:1.15;margin:2.4em 0 .65em;max-width:30ch}
.leestekst > h2:first-child{margin-top:0}
.leestekst > h3{font-size:clamp(1.12rem,1rem + .4vw,1.3rem);margin:1.9em 0 .45em}
.leestekst ul:not([class]),.leestekst ol:not([class]),.leestekst .wp-block-list{margin:.4em 0 1.5em}
.leestekst ul:not([class]) > li,.leestekst ul.wp-block-list > li{padding:3px 0 3px 26px;margin-bottom:.35em}
.leestekst ul:not([class]) > li::before,.leestekst ul.wp-block-list > li::before{top:.8em}
.leestekst ol:not([class]) > li,.leestekst ol.wp-block-list > li{padding:3px 0 3px 42px;margin-bottom:.6em;min-height:32px}
.leestekst ol:not([class]) > li::before,.leestekst ol.wp-block-list > li::before{top:2px}
.leestekst li > strong:first-child{color:var(--antraciet)}
/* Doorvoeringen: ook met wat meer tekst per punt rustig */
.kolomlijst__punten li strong:first-child{display:block;margin-bottom:2px}
.argument p,.aanpak p{line-height:1.65}
.argumenten--twee{column-gap:clamp(28px,4vw,56px)}
.aanpak{gap:32px}

/* =====================================================================
   19c. Tikvlakken op telefoons en tablets
   Links die een bezoeker met een vinger raakt, zijn onder 768 px en op
   aanraakschermen (ook tablets) minstens 44 px hoog (net als de knoppen en de
   menu-items). Het kruimelpad krijgt een groter vlak zonder dat de regel
   verschuift (padding met negatieve marge); breekt het over twee regels, dan
   staan die 12 px uit elkaar, zodat het vlak van de eerste regel niet over de
   tweede valt. In de voet staan de links zonder tussenruimte onder elkaar,
   zodat de vlakken elkaar niet overlappen.
   ===================================================================== */
@media (max-width:767px), (pointer:coarse){
  .voet ul{gap:0}
  /* Een link over twee regels (bijv. "Brandwerende doorvoeringen" in een smalle kolom) krijgt wat lucht boven
     en onder, zodat hij niet tegen de volgende link aan staat; een link op één regel blijft 44 px hoog */
  .voet li > a{display:inline-flex;align-items:center;min-height:44px;padding-block:6px}
  .kruimel ol{row-gap:12px}
  .kruimel a{display:inline-block;padding:12px 0;margin:-12px 0}
  main dd a[href^="tel:"],main dd a[href^="mailto:"],.gegevens dd a,.dienst__link,.resultaat__titel a,.project__link,.sociaal a{display:inline-flex;align-items:center;min-height:44px}
}

/* =====================================================================
   19d. Grote standaardletter in een smal vak
   Met een grote standaardletter in de browser (bijv. 32 px op een telefoon
   of 24 px in een smalle kaart) is één woord soms breder dan zijn vak: een
   knop, een link met een pijltje, de kop van een tekening of een punt in
   een lijst. Dan mag dat woord binnen zichzelf afbreken, in plaats van
   buiten het scherm te lopen. "anywhere" breekt alleen een woord dat niet
   op een eigen regel past: bij de gewone letter verandert er niets.
   ===================================================================== */
.meerlink,.dienst__link,.knop,.vertrouwen li,.sectiekop__naam,.gegevens dd a,.resultaat__titel a,.project__link,
.flamestop-formulier .wpcf7-checkbox label{overflow-wrap:anywhere}
/* Kop van een tekening: het korte woord ("Illustratie", "Detail D-01") blijft heel, de omschrijving ernaast
   mag krimpen en zo nodig binnen een woord afbreken */
.tekenblad__kop span:last-child,.vuur__kop span:first-child{min-width:0;overflow-wrap:anywhere}
.vuur__kop span:last-child{white-space:nowrap}
/* Lijsten in een raster met één kolom: de kolom is precies zo breed als het vak (een kolom "auto" groeit
   anders mee met het langste woord) */
.kolomlijst__punten,.vacatures{grid-template-columns:minmax(0,1fr)}

/* =====================================================================
   20. Afdrukken
   Zwarte tekst op wit, zonder menu, knoppen, formulier en decoratie.
   Donkere vakken worden licht. Adressen van links in de tekst staan erbij.
   De animaties gelden alleen op het scherm (zie 18), dus alles staat in de eindstand.
   ===================================================================== */
@media print{
  @page{margin:16mm 14mm}
  html{scroll-padding-top:0}
  body{background:#fff;color:#000;font-size:10.5pt;line-height:1.45}
  /* Niet .sprite: daarin staan de arceringen en verlopen van alle tekeningen. Hij neemt geen ruimte in
     (0 bij 0, zie 2. Basis). Wel .snel: snelkoppelingen werken op papier niet. */
  .skiplink,.dienstbalk,.hoofdnav,.kop__acties,.menuknop,.ligger,.band__schoren,.opnieuw,.lusknop,.vuur,.omgeving__fig,
  .formulier,.flamestop-offerteformulier,.zoekformulier,.post-password-form,.filter,.paginering,.snel,.sociaal,.voet__cookie,
  .knoppen,.knop,.reactie,.meerlink .ico,.dienst__link .ico,.voet::before,.voet__merk img,.frame::before,.frame::after,
  .kruimel,.vertrouwen__ico,.samengevat .knop,.leesvak__opgave,#wpadminbar{display:none!important}
  .kop{position:static;box-shadow:none;border-bottom:1px solid #000}
  .hoofdbalk .wrap{min-height:0;padding-block:6pt}
  .wrap{max-width:none;padding-inline:0}
  .frame{padding-block:14pt}
  .sectie,.hero,.band,.sectie--staal,.sectie--donker,.voet,.coatpaneel,.samengevat,.waarom-blok,.cta-blok,.argument,.dienst,.bbl__kaart,.plek,.voorwie li,.afdicht__kaart,.vacature,.project{background:#fff!important;color:#000!important;box-shadow:none!important}
  .sectie--donker h2,.sectie--donker h3,.band h2,.coatpaneel__titel,.coatpaneel h3,.samengevat strong,.voet h2,.coatstappen__tekst b,.omgeving__punten h3{color:#000!important}
  .sectie--donker p,.sectie--donker li,.band p,.coatpaneel p,.coatstappen__tekst,.omgeving__punten p,.aanpak p,.voet,.voet p,.voet li,.voet__onder .wrap,.samengevat,.samengevat p,.intro,.hero__lead,.sectiekop,.label{color:#222!important}
  .sectiekop__naam,.voet a{color:#000!important}
  a{color:#000!important;text-decoration:underline}
  .inhoud a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#444;word-break:break-all}
  h1{font-size:22pt!important}
  h2{font-size:16pt!important}
  /* Een kop niet los onderaan een pagina en ook niet over twee pagina's verdeeld */
  h1,h2,h3{break-after:avoid;page-break-after:avoid;break-inside:avoid;page-break-inside:avoid}
  .tekenblad,.vg-paneel,.argument,.dienst,.project,.bbl__kaart,.plek,.faq details,figure,.cta-blok,.oplevering,.coatstappen li,.tijdlijn > li{break-inside:avoid;page-break-inside:avoid}
  /* Witte tekst op een gekleurd vlak: achtergronden worden standaard niet afgedrukt, dus zwart op wit */
  .vg-paneel--open .vg-kop,.vg-paneel--dicht .vg-kop{background:#fff!important;color:#000!important;border-bottom:1px solid #000!important}
  .vg-kop .ico{background:none!important;color:#000!important}
  .coatstappen__nr{background:#fff!important;color:#000!important;border-color:#000!important}
  .slot__ico,.omgeving__ico{background:#fff!important;color:#000!important}
  .hero__grid,.kopblok,.omgeving,.werkwijze,.overons,.contact,.doorvoer__top,.waar,.coatpaneel,.vindplaats,.afdicht,.inhoudsvak,.leesvak,.kolomlijsten,.band__in,.samengevat{display:block!important}
  .tekenblad,.plattegrond{max-width:130mm;margin:10pt 0;box-shadow:none}
  .werkwijze__links{position:static}
  /* Veelgestelde vragen: alle antwoorden op papier, ook van een dichte vraag. Nieuwere browsers (zoals Chrome
     vanaf versie 131) verbergen de inhoud van een dichte <details> via ::details-content; die regel staat apart,
     zodat een browser die ::details-content niet kent alleen die regel overslaat. De regel daaronder is de
     terugval; thema.js opent dichte vragen bovendien vlak voor het afdrukken en sluit ze daarna weer. */
  .faq details::details-content{content-visibility:visible;display:block}
  .faq details:not([open]) .faq__antwoord{display:block}
  .faq__teken{display:none}
  .diensten,.projecten,.argumenten,.voorwie,.plekken,.vacature__lijsten{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8pt!important}
  .diensten > .dienst{grid-column:auto!important}
  /* Certificaten: het pictogram staat niet op papier, dus geen kolom van 28 px meer (anders staat de naam
     letter voor letter onder elkaar) */
  .erkenningen > li{display:block}
  /* De voet in één stuk, niet over twee pagina's verdeeld */
  .voet__grid{grid-template-columns:repeat(4,minmax(0,1fr));padding-block:10pt;gap:10pt;break-inside:avoid;page-break-inside:avoid}
  .speerpunt{background:#fff!important;color:#000!important;border:1px solid #000}
  .fotovak--tekening{background:#fff}
  *{animation:none!important;transition:none!important}
}

/* =====================================================================
   21. Contrastmodus (forced colors, bijv. Windows "Contrastthema's")
   De browser vervangt dan alle kleuren door systeemkleuren en haalt
   achtergronden weg. Wat daardoor onzichtbaar zou worden, staat hier.
   ===================================================================== */
@media (forced-colors: active){
  /* De gekozen soort vraag en het gekozen projectfilter: in de markeerkleur van het systeem */
  .flamestop-formulier__soort input:checked + .wpcf7-list-item-label,
  .filter__keuze[aria-current="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .filter__keuze[aria-current="true"] .filter__aantal{forced-color-adjust:none;background:transparent;color:HighlightText}
  /* De ingedrukte pauzeknop van een animatie: de lichte knop is hier een achtergrond die wegvalt */
  .lusknop[aria-pressed="true"],.lusknop[aria-pressed="true"]:hover{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight;box-shadow:none}
  /* Logo's houden hun eigen kleuren op een vaste ondergrond (ook een eigen logo uit de Customizer) */
  .logo img,.logo .custom-logo{forced-color-adjust:none;background:#fff;outline:4px solid #fff}
  .voet__merk img{forced-color-adjust:none;background:#22262F;outline:6px solid #22262F}
  /* Tekeningen houden hun eigen ondergrond en kleuren, anders worden ze onleesbaar */
  .tekenblad,.vuur,.omgeving__fig{forced-color-adjust:none}
  /* De streep onder menu-items (huidige pagina en aanwijzen) is een achtergrond: in een systeemkleur tonen */
  .hoofdnav a::after{forced-color-adjust:none;background:CanvasText}
}