/*
 * FlameSeal: de opmaak van alle pagina's (assets/css/flameseal.css).
 *
 * Drie delen:
 *  1. Het gedeelde blok uit het ontwerp (PLAN.md §2.2): tokens, lettertypes, kop, menu, voet, duimbalk, knoppen, de naad,
 *     de plantjes, minder beweging, contrastmodus en afdrukken. Letterlijk gelijk aan ontwerp/ontwerp.html en
 *     ontwerp/wandeling.html; alleen de paden naar de lettertypes wijzen naar ../fonts/.
 *  2. De pagina's uit ontwerp/ontwerp.html (Home, diensten, Waarom duurzaam, Contact, Over ons, leespagina's, 404) met de
 *     eenmalige animaties. Weggelaten: alles wat alleen in de proef bestond (de proefbalk, de tabbladen, de melding).
 *     Anders dan in het ontwerp: geen CSS-uitsnede op foto's (zie THEMA-NOTITIES §2, Verzoeken en afwijkingen) en de
 *     armen van de wegwijzer spelen niet terwijl het paginascript van de wandeling een tafereel stilhoudt.
 *  3. De aanvulling voor WordPress: het formulier van de kern en Contact Form 7, de klassen die de kern uitvoert (API.md
 *     §5), de blokken uit de editor, zoeken, paginanummers, het wachtwoordformulier, projecten en vacatures.
 *
 * Alleen eigen bestanden: lettertypes uit ../fonts/, beelden als data-URI. Geen bestanden van andere domeinen.
 * Animaties alleen met transform en opacity, één keer, en alleen bij prefers-reduced-motion: no-preference; het
 * eindbeeld is de gewone stand (zonder JavaScript, bij minder beweging en bij afdrukken).
 */

/* ==== Deel 1: gedeeld blok (PLAN.md §2.2), gelijk aan ontwerp.html en wandeling.html; niet los aanpassen ==== */
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-latin-wght-italic.woff2") format("woff2");font-weight:300 900;font-style:italic;font-display:swap}

:root{
  color-scheme:only light;
  /* Merk, uit het logo */
  --flameseal-petrol:#06687A;      /* links, tweede knop: 6,4:1 op wit, 5,1:1 op salie */
  --flameseal-petrol-diep:#04505D; /* hover */
  --flameseal-teal:#0D8894;        /* alleen vlakken en tekeningen, nooit tekst (4,2:1) */
  --flameseal-limoen:#9AC00C;      /* hoofdknop met inkt (7,2:1), accenten; nooit tekst op licht */
  --flameseal-limoen-licht:#B5D33A;
  --flameseal-limoen-zacht:#EEF5D3;
  /* Tekst */
  --flameseal-inkt:#20272C;        /* lopende tekst: 15,1:1 op wit, 12,1:1 op salie */
  --flameseal-inkt-2:#46544E;      /* tweede tekstkleur, groengrijs: 8,0:1 op wit, 6,4:1 op salie */
  --flameseal-kopkleur:#0B3F48;    /* koppen: 11,6:1 op wit, 9,2:1 op salie */
  --flameseal-plaats:#5F676C;      /* tekst in plaatshouders: 5,8:1 op wit */
  --flameseal-plaats-rand:#8E979C;
  --flameseal-veldrand:#6B7F79;    /* rand van formuliervelden: 4,3:1 */
  /* Vlakken (geen zand) */
  --flameseal-wit:#FFFFFF;
  --flameseal-munt:#EEF6F2;
  --flameseal-munt-2:#E3F0E9;
  --flameseal-salie-licht:#E8F1EB;
  --flameseal-salie:#DCE9E1;       /* voet */
  --flameseal-lijn:#D3E2D8;        /* haarlijnen en kaartranden */
  --flameseal-steen:#C3D6CA;       /* stapsteen die nog komt */
  --flameseal-lucht-ochtend:#E7F2ED;
  --flameseal-lucht-dag:#F7FAF8;
  /* Bladpalet, afgeleid van het logo (geen standaard bosgroen) */
  --flameseal-blad-1:#0E5E63;--flameseal-blad-2:#2C7F78;--flameseal-blad-3:#4E9A84;
  --flameseal-blad-4:#7DB596;--flameseal-blad-5:#A9CF8E;--flameseal-blad-6:#C6DE9A;
  /* Bouw in de tekeningen */
  --flameseal-beton:#DCE3DE;--flameseal-beton-rand:#C5CFC9;--flameseal-open:#2B3A3A;
  --flameseal-afdichting:#F3F6F1;--flameseal-staal:#5E6E6A;--flameseal-stam:#5E6B66;
  /* Landschap (richting A): lucht, heuvels, weide en gras in de tekeningen (in een SVG als hex-code, zelfde waarden) */
  --flameseal-lucht-a:#D8ECE5;--flameseal-lucht-a-licht:#F3F9F5;   /* ochtend */
  --flameseal-lucht-b:#E0EFEB;--flameseal-lucht-b-licht:#FAFCFA;   /* later op de dag */
  --flameseal-heuvel:#D0E4D8;--flameseal-struik-ver:#B9D6C4;--flameseal-weide:#C4DDCB;--flameseal-gras:#B4D3A6;
  --flameseal-bouwvlak:#EDF0EC;                                     /* zacht stenen vlak achter het werk (A: "binnen") */
  /* Letters */
  --flameseal-kopletter:"Fraunces",Georgia,"Times New Roman",serif;
  --flameseal-tekst:"Figtree","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --flameseal-gewicht-kop:520;--flameseal-gewicht-vet:600;
  --flameseal-f-h1:clamp(1.8rem,1.3rem + 2.2vw,3rem);
  --flameseal-f-h2:clamp(1.5rem,1.2rem + 1.3vw,2.25rem);
  --flameseal-f-h3:1.25rem;
  --flameseal-f-etappe:clamp(1.4rem,1.25rem + .7vw,1.8rem);
  --flameseal-f-intro:clamp(1.0625rem,1rem + .3vw,1.16rem); /* nooit kleiner dan de lopende tekst */
  --flameseal-f-tekst:1.0625rem;   /* 17 px */
  --flameseal-f-kaart:1rem;        /* 16 px: kleinste lettergrootte voor lopende tekst */
  --flameseal-f-klein:.9375rem;    /* 15 px: kruimelpad, voetregel */
  --flameseal-f-mini:.75rem;       /* 12 px: alleen labels als "AI-beeld (tijdelijk)" */
  --flameseal-rh-tekst:1.65;--flameseal-rh-kaart:1.45;--flameseal-rh-kop:1.14;
  /* Genummerde zeshoek (stappen op Home, etappes in de wandeling): overal dezelfde maat en verhouding (86,6 : 100) */
  --flameseal-nr-b:42px;--flameseal-nr-h:48px;--flameseal-nr-f:1.14rem;
  /* Ruimte */
  --flameseal-s1:4px;--flameseal-s2:8px;--flameseal-s3:12px;--flameseal-s4:16px;
  --flameseal-s5:24px;--flameseal-s6:32px;--flameseal-s7:48px;--flameseal-s8:64px;
  --flameseal-sectie:clamp(48px,7vw,96px);        /* gewone sectie, boven en onder */
  --flameseal-sectie-dicht:clamp(32px,4.5vw,64px); /* wat bij elkaar hoort */
  --flameseal-sectie-rust:clamp(64px,9vw,120px);   /* een rustmoment, zoals voor de afsluiter */
  --flameseal-breed:1180px;--flameseal-gutter:clamp(16px,4vw,40px);
  --flameseal-kop-h:62px;
  --flameseal-balk:var(--wp-admin--admin-bar--height,0px);
  /* Hoeken: een vaste schaal */
  --flameseal-r1:12px;--flameseal-r2:20px;--flameseal-r3:32px;--flameseal-pil:999px;
  /* Schaduw */
  --flameseal-schaduw:0 1px 2px rgba(11,63,72,.05),0 12px 28px -20px rgba(11,63,72,.4);
  --flameseal-schaduw-licht:0 1px 2px rgba(11,63,72,.06);
  /* Beweging: rustig uitlopen, nooit doorveren */
  --flameseal-zacht:cubic-bezier(.22,.61,.36,1);
  --flameseal-duur-kort:.3s;--flameseal-duur:.6s;--flameseal-duur-lang:1.2s;
  /* Vormen en textuur */
  --flameseal-zeshoek-clip:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  --flameseal-zeshoek:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-43.3 -50 86.6 100'%3E%3Cpath d='M-4.5 -47.4A9 9 0 0 1 4.5 -47.4L38.8 -27.6A9 9 0 0 1 43.3 -19.8L43.3 19.8A9 9 0 0 1 38.8 27.6L4.5 47.4A9 9 0 0 1 -4.5 47.4L-38.8 27.6A9 9 0 0 1 -43.3 19.8L-43.3 -19.8A9 9 0 0 1 -38.8 -27.6Z'/%3E%3C/svg%3E");
  --flameseal-korrel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .25 0 0 0 0 .28 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}
@media (min-width:48em){:root{--flameseal-kop-h:70px}}
@media (min-width:64em){:root{--flameseal-nr-b:52px;--flameseal-nr-h:60px;--flameseal-nr-f:1.3rem}}
@media (orientation:landscape) and (max-height:30em){:root{--flameseal-kop-h:56px}}
@media (max-width:600px){:root{--flameseal-balk:0px}}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* scroll-padding op :root en niet op html: admin-bar.css van WordPress zet zelf html{scroll-padding-top} en laadt soms
   na het thema. :root weegt zwaarder, dus dan maakt de laadvolgorde niet uit. */
:root{scroll-padding-top:calc(var(--flameseal-balk) + var(--flameseal-kop-h) + 12px);scroll-padding-bottom:24px}
@media (max-width:47.99em) and (orientation:portrait){:root{scroll-padding-bottom:88px}}
@media (prefers-reduced-motion:no-preference){html:not(.flameseal-minder){scroll-behavior:smooth}}
body{margin:0;background:var(--flameseal-wit);color:var(--flameseal-inkt);font-family:var(--flameseal-tekst);font-size:var(--flameseal-f-tekst);line-height:var(--flameseal-rh-tekst);overflow-wrap:break-word;hyphens:manual}
/* Onder 360 px automatisch afbreken, maar alleen woorden van minstens 10 tekens, met minstens 4 tekens voor en na het
   streepje (dus geen "ka-bels" of "ge-bouw"); koppen nooit */
@media (max-width:22.49em){body{hyphens:auto;hyphenate-limit-chars:10 4 4}h1,h2,h3{hyphens:manual}}
img,svg{max-width:100%}
img{height:auto}
a{color:var(--flameseal-petrol);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--flameseal-petrol-diep);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--flameseal-inkt);outline-offset:3px;border-radius:6px}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--flameseal-kopletter);font-weight:var(--flameseal-gewicht-kop);line-height:var(--flameseal-rh-kop);letter-spacing:-.01em;color:var(--flameseal-kopkleur);margin:0 0 .5em;overflow-wrap:break-word;text-wrap:balance}
h1{font-size:var(--flameseal-f-h1)}
h2{font-size:var(--flameseal-f-h2)}
h3{font-size:var(--flameseal-f-h3);line-height:1.25}
h1:focus,h2:focus,h3:focus{outline:none}
h1:focus-visible,h2:focus-visible,h3:focus-visible{outline:3px solid var(--flameseal-inkt)}
strong,b{font-weight:var(--flameseal-gewicht-vet)}
address{font-style:normal}
small{font-size:.85em}
/* .screen-reader-text gebruikt WordPress zelf (paginering, zoekformulier): dezelfde opmaak, zodat er nooit een grote kop
   of losse tekst in beeld komt die alleen voor schermlezers bedoeld is */
.flameseal-vh,.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.flameseal-nowrap{white-space:nowrap}
.flameseal-mail{overflow-wrap:anywhere}
.flameseal-binnen{max-width:var(--flameseal-breed);margin-inline:auto;padding-inline:var(--flameseal-gutter)}
.flameseal-i{width:1.2em;height:1.2em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;--flameseal-accent:var(--flameseal-limoen)}
.flameseal-zeshoek{-webkit-mask:var(--flameseal-zeshoek) center/contain no-repeat;mask:var(--flameseal-zeshoek) center/contain no-repeat}
.flameseal-plaatshouder{display:inline-block;margin:0;padding:.15em .6em;border:1.5px dotted var(--flameseal-plaats-rand);border-radius:var(--flameseal-r1);color:var(--flameseal-plaats);font-size:.82rem;line-height:1.5;font-style:normal;background:rgba(255,255,255,.55)}

/* ---------- Vlakken en korrel (vlak = background-color, korrel als ::before; zo werkt de contrastmodus) ---------- */
.flameseal-vlak-munt{background-color:var(--flameseal-munt)}
.flameseal-vlak-salie{background-color:var(--flameseal-salie-licht)}
.flameseal-korrel{position:relative;isolation:isolate}
.flameseal-korrel::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--flameseal-korrel);opacity:.05;pointer-events:none}

/* ---------- Kop: de enige vaste balk bovenaan, ook met de beheerbalk van WordPress ---------- */
.flameseal-skiplink{position:absolute;left:12px;top:-200px;z-index:100;padding:12px 18px;background:var(--flameseal-wit);color:var(--flameseal-inkt);font-weight:var(--flameseal-gewicht-vet);border-radius:var(--flameseal-r1);box-shadow:var(--flameseal-schaduw)}
.flameseal-skiplink:focus{top:12px}
/* Met de beheerbalk: onder de balk, ook onder 601 px (daar staat de balk bovenaan de pagina en scrolt hij mee). Dus de
   echte balkhoogte, niet --flameseal-balk (die is daar 0). */
.admin-bar .flameseal-skiplink:focus{top:calc(var(--wp-admin--admin-bar--height,0px) + 12px)}
.flameseal-kop{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);border-bottom:1px solid var(--flameseal-lijn);-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px)}
.admin-bar .flameseal-kop{top:var(--flameseal-balk)}
.flameseal-kop-binnen{max-width:1360px;margin-inline:auto;padding:8px var(--flameseal-gutter);display:flex;align-items:center;gap:10px;min-height:60px}
@media (min-width:48em){.flameseal-kop-binnen{min-height:68px}}
.flameseal-logo{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;flex:0 1 auto;min-width:0;border-radius:6px}
.flameseal-logo img{display:block;width:auto;height:30px}
@media (max-width:22.49em){.flameseal-logo img{height:26px}}
@media (min-width:30em){.flameseal-logo img{height:36px}}
@media (min-width:48em){.flameseal-logo img{height:42px}}
.flameseal-hoofdmenu ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.flameseal-hoofdmenu ul a{display:flex;align-items:center;min-height:44px;padding:8px;color:var(--flameseal-inkt);text-decoration:none;font-weight:var(--flameseal-gewicht-vet);border-radius:var(--flameseal-r1);white-space:nowrap}
.flameseal-hoofdmenu ul a:hover{color:var(--flameseal-petrol);background:var(--flameseal-munt)}
.flameseal-hoofdmenu ul a[aria-current]{color:var(--flameseal-petrol);box-shadow:inset 0 -3px 0 -1px var(--flameseal-limoen)}
.flameseal-menu-extra{display:none}
.flameseal-kop-tel{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:6px 8px;border-radius:var(--flameseal-pil);color:var(--flameseal-petrol);font-weight:var(--flameseal-gewicht-vet);text-decoration:none;white-space:nowrap;flex:0 0 auto}
.flameseal-kop-tel:hover{background:var(--flameseal-munt)}
.flameseal-menuknop{display:none;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 14px;border:2px solid var(--flameseal-kopkleur);border-radius:var(--flameseal-pil);background:var(--flameseal-wit);color:var(--flameseal-kopkleur);font:inherit;font-weight:var(--flameseal-gewicht-vet);cursor:pointer;flex:0 0 auto}
.flameseal-menuknop .flameseal-i-dicht{display:none}
.flameseal-kop.flameseal-open .flameseal-menuknop .flameseal-i-open{display:none}
.flameseal-kop.flameseal-open .flameseal-menuknop .flameseal-i-dicht{display:block}
/* De kopknop staat altijd op één regel en wijkt (zoals de duimbalk) voor een andere offerteknop in beeld */
.flameseal-kop-cta{white-space:nowrap;flex:0 0 auto;transition:opacity var(--flameseal-duur-kort) var(--flameseal-zacht),visibility 0s}
.flameseal-offerte-in-beeld .flameseal-kop-cta{opacity:0;visibility:hidden;transition:opacity var(--flameseal-duur-kort) var(--flameseal-zacht),visibility 0s linear var(--flameseal-duur-kort)}
@media (max-width:77.99em){
  .flameseal-js .flameseal-menuknop{display:inline-flex}
  .flameseal-js .flameseal-hoofdmenu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--flameseal-wit);border-bottom:1px solid var(--flameseal-lijn);box-shadow:0 18px 30px -20px rgba(11,63,72,.4);padding:6px var(--flameseal-gutter) 20px;max-height:calc(100dvh - var(--flameseal-kop-h) - var(--flameseal-balk));overflow-y:auto}
  .flameseal-js .flameseal-kop.flameseal-open .flameseal-hoofdmenu{display:block}
  .flameseal-js .flameseal-hoofdmenu ul{flex-direction:column;gap:0;max-width:40rem;margin-inline:auto}
  .flameseal-js .flameseal-hoofdmenu ul a{min-height:50px;font-size:1.08rem;border-radius:0;border-bottom:1px solid var(--flameseal-salie-licht)}
  .flameseal-js .flameseal-menu-extra{display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:40rem;margin:16px auto 0}
  .flameseal-menu-extra a:not(.flameseal-knop){display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:var(--flameseal-gewicht-vet)}
  html:not(.flameseal-js) .flameseal-kop{position:static}
  html:not(.flameseal-js) .flameseal-kop-binnen{flex-wrap:wrap}
  html:not(.flameseal-js) .flameseal-hoofdmenu{order:9;flex-basis:100%}
  html:not(.flameseal-js) .flameseal-hoofdmenu ul{flex-wrap:wrap}
  /* Geen order-regels: de kop volgt de HTML (logo, telefoon, Offerte, Menu), zodat Tab gaat zoals het oog leest */
}
@media (max-width:47.99em){.flameseal-kop-tel{display:none}}
@media (max-width:39.99em){.flameseal-kop .flameseal-kop-cta{display:none}}
/* Het telefoonnummer als rond pictogram waar de kop krap is: van 48 tot 52em (logo, nummer, knop en Menu passen dan
   naast elkaar, kop 69 px) en van 78 tot 86em (naast het volledige menu) */
@media (min-width:48em) and (max-width:51.99em),(min-width:78em) and (max-width:85.99em){
  .flameseal-kop-tel{border:2px solid var(--flameseal-petrol);padding:0;width:44px;height:44px}
  .flameseal-kop-tel-nummer{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (orientation:landscape) and (max-height:30em){.flameseal-kop-binnen{min-height:52px;padding-block:4px}.flameseal-logo img{height:28px}}

/* ---------- Kruimelpad: gewone tekstregel die netjes afbreekt ---------- */
.flameseal-kruimel ol{list-style:none;margin:0;padding:8px 0 0;font-size:var(--flameseal-f-klein);line-height:1.5;color:var(--flameseal-inkt-2)}
.flameseal-kruimel li{display:inline}
.flameseal-kruimel li+li::before{content:"›";margin:0 .45em;color:var(--flameseal-plaats)}
.flameseal-kruimel a{display:inline-block;padding-block:11px;min-width:44px;text-align:center}

/* ---------- Knoppen, labels en links ---------- */
.flameseal-knop{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.62em 1.25em;border:2px solid transparent;border-radius:var(--flameseal-pil);font:inherit;font-weight:var(--flameseal-gewicht-vet);font-size:1rem;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.flameseal-knop-hoofd{background:var(--flameseal-limoen);border-color:var(--flameseal-limoen);color:var(--flameseal-inkt)}
.flameseal-knop-hoofd:hover{background:var(--flameseal-limoen-licht);border-color:var(--flameseal-limoen-licht);color:var(--flameseal-inkt)}
.flameseal-knop-twee{background:var(--flameseal-wit);border-color:var(--flameseal-petrol);color:var(--flameseal-petrol)}
.flameseal-knop-twee:hover{background:var(--flameseal-petrol);color:var(--flameseal-wit)}
.flameseal-knoppen{display:flex;flex-wrap:wrap;gap:12px}
.flameseal-label{display:inline-block;margin:0 0 10px;padding:1px 11px;border-radius:var(--flameseal-pil);background:var(--flameseal-limoen);color:var(--flameseal-inkt);font-size:.8rem;font-weight:var(--flameseal-gewicht-vet);letter-spacing:.03em;line-height:1.6}
.flameseal-pijl-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:var(--flameseal-gewicht-vet)}

/* ---------- De naad: teal en limoen die sluiten, met een zeshoekje in het midden ---------- */
.flameseal-naad{position:relative;height:4px;margin:0;pointer-events:none;overflow-x:clip}
.flameseal-naad::before,.flameseal-naad::after{content:"";position:absolute;top:0;bottom:0;width:50%}
.flameseal-naad::before{left:0;background:var(--flameseal-teal)}
.flameseal-naad::after{right:0;background:var(--flameseal-limoen)}
.flameseal-naad span{position:absolute;left:50%;top:50%;width:18px;height:20px;margin:-10px 0 0 -9px;z-index:1;clip-path:var(--flameseal-zeshoek-clip);background:linear-gradient(90deg,var(--flameseal-teal) 50%,var(--flameseal-limoen) 50%)}
.flameseal-naad span::before{content:"";position:absolute;inset:4px 3.5px;clip-path:inherit;background:var(--flameseal-wit)}

/* ---------- Foto's: één behandeling, label klein rechtsonder ---------- */
.flameseal-foto{position:relative;margin:0;border-radius:var(--flameseal-r3);overflow:hidden;background:var(--flameseal-salie-licht)}
.flameseal-foto img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(.97)}
.flameseal-foto::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(11,63,72,.06);background:radial-gradient(120% 90% at 50% 55%,rgba(238,246,242,0) 62%,rgba(238,246,242,.45) 100%)}
.flameseal-ai-label{position:absolute;right:10px;bottom:10px;z-index:1;margin:0;padding:1px 8px;border-radius:var(--flameseal-pil);background:rgba(255,255,255,.88);color:var(--flameseal-inkt-2);font-size:var(--flameseal-f-mini);font-weight:var(--flameseal-gewicht-vet);line-height:1.7}

/* ---------- Voet: licht, in salie, met de naad als bovenrand en het logo zonder tegel ---------- */
.flameseal-voet{position:relative;isolation:isolate;background-color:var(--flameseal-salie);color:var(--flameseal-kopkleur);padding-top:clamp(40px,6vw,64px)}
.flameseal-voet::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--flameseal-korrel);opacity:.05;pointer-events:none}
.flameseal-voet>.flameseal-naad{position:absolute;left:0;right:0;top:0}
.flameseal-voet a{color:var(--flameseal-petrol)}
.flameseal-voet a:hover{color:var(--flameseal-petrol-diep)}
.flameseal-voet-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.flameseal-voet-merk img{display:block;height:44px;width:auto;margin-bottom:12px}
.flameseal-voet-merk p{margin:0}
/* Het motto (flameseal_slogan()) rustig in de koppenletter, met direct eronder de link naar wat duurzaam bij ons betekent:
   zo staat "duurzaamheid" nooit als losse claim (EU-richtlijn 2024/825). Geen teken, blad of beeld erbij. */
.flameseal-voet-merk .flameseal-motto{max-width:20em;font-family:var(--flameseal-kopletter);font-weight:var(--flameseal-gewicht-kop);font-size:1.125rem;line-height:1.4;letter-spacing:-.005em;color:var(--flameseal-kopkleur);text-wrap:balance}
.flameseal-voet-merk .flameseal-motto-uitleg{margin-top:2px}
/* De link als gewone tekst (geen flex): breekt hij op de tablet over twee regels, dan blijft de pijl aan "betekent"
   vastzitten (flameseal-nowrap) en staat hij niet los aan de rechterkant. 28 px regel plus 2 × 8 px = 44 px tikdoel. */
.flameseal-motto-uitleg a{display:inline-block;min-height:44px;padding-block:8px;font-weight:var(--flameseal-gewicht-vet)}
.flameseal-motto-uitleg .flameseal-i{display:inline-block;width:1.05em;height:1.05em;margin-left:6px;vertical-align:-.15em}
.flameseal-voet-kop{font-family:var(--flameseal-tekst);font-size:.9rem;font-weight:var(--flameseal-gewicht-vet);letter-spacing:.06em;text-transform:uppercase;color:var(--flameseal-inkt-2);margin:0 0 8px}
/* Adres en menu: nooit automatisch afbreken ("Leeu-warden"); het e-mailadres breekt hooguit na "info@" (<wbr>) */
.flameseal-voet address,.flameseal-voet nav{hyphens:manual}
.flameseal-voet address{line-height:1.9}
.flameseal-voet-direct{display:flex;flex-direction:column;align-items:flex-start}
.flameseal-voet address a,.flameseal-voet nav a,.flameseal-voet-onder a{display:inline-flex;align-items:center;min-height:44px}
.flameseal-voet nav a{min-width:44px}
.flameseal-voet ul{list-style:none;margin:0;padding:0}
.flameseal-voet nav a[aria-current="page"]{color:var(--flameseal-kopkleur);font-weight:var(--flameseal-gewicht-vet)}
/* De haarlijn boven de voetregel is precies zo breed als de inhoud (niet in de gutter) */
.flameseal-voet-onder{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:32px;padding-top:14px;padding-bottom:24px;background:linear-gradient(#BED2C6,#BED2C6) var(--flameseal-gutter) 0 / calc(100% - 2 * var(--flameseal-gutter)) 1px no-repeat;font-size:var(--flameseal-f-klein);color:var(--flameseal-inkt-2)}
.flameseal-voet-onder p{margin:0}
/* Telefoon (tot 48em): compact. Logo en slogan naast elkaar; Contact over de volle breedte, bellen en mailen op één
   regel (past ook op 320 px); het menu in twee kolommen. Elke link blijft een tikdoel van 44 px. */
@media (max-width:47.99em){
  .flameseal-voet{padding-top:36px}
  .flameseal-voet-merk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
  .flameseal-voet-merk img{height:36px;margin:0}
  .flameseal-voet-merk .flameseal-motto,.flameseal-voet-merk .flameseal-motto-uitleg{flex-basis:100%}
  .flameseal-voet-merk .flameseal-motto{margin-top:4px}
  .flameseal-voet-merk .flameseal-motto-uitleg{margin-top:-8px}
  .flameseal-voet-direct{flex-direction:row;flex-wrap:wrap;column-gap:24px}
  .flameseal-voet-direct a{white-space:nowrap}
  .flameseal-voet address{line-height:1.6}
  .flameseal-voet nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .flameseal-voet nav li{display:flex;align-items:center;min-height:44px;font-size:var(--flameseal-f-kaart);line-height:1.3}
  .flameseal-voet nav a{text-wrap:balance}
  .flameseal-voet-onder{margin-top:24px;padding-bottom:20px;gap:0 14px}
  .flameseal-voet-onder a{min-height:44px}
}
@media (min-width:48em){
  .flameseal-voet-raster{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:28px 48px}
}

/* ---------- Duimbalk (telefoon, staand): werkt zonder JS; wijkt voor een andere offerte- of belknop en voor het menu ---------- */
.flameseal-duimbalk{display:none}
@media (max-width:47.99em) and (orientation:portrait){
  /* De ruimte voor de duimbalk hoort bij de voet (salie): staat de duimbalk weg, dan geen witte strook eronder */
  .flameseal-voet{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .flameseal-duimbalk{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;gap:10px;padding:10px var(--flameseal-gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.9);border-top:1px solid var(--flameseal-lijn);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);transition:transform var(--flameseal-duur-kort) var(--flameseal-zacht),visibility 0s}
  /* "Bellen" zo smal als nodig, "Offerte aanvragen" krijgt de rest; allebei op één regel, ook op 320 px */
  .flameseal-duimbalk .flameseal-knop{min-width:0;padding-inline:.8em;white-space:nowrap}
  .flameseal-duimbalk .flameseal-duim-bel{flex:0 0 auto}
  .flameseal-duimbalk .flameseal-knop-hoofd{flex:1 1 auto}
  .flameseal-duim-bel{background:var(--flameseal-wit);border-color:var(--flameseal-petrol);color:var(--flameseal-petrol)}
  .flameseal-offerte-in-beeld .flameseal-duimbalk,.flameseal-bel-in-beeld .flameseal-duimbalk,.flameseal-menu-open .flameseal-duimbalk{transform:translateY(110%);visibility:hidden;transition:transform var(--flameseal-duur-kort) var(--flameseal-zacht),visibility 0s linear var(--flameseal-duur-kort)}
  /* Typt iemand in het aanvraagformulier, dan wijkt de duimbalk, zodat hij het veld niet bedekt (WCAG 2.4.11) */
  body:has(.flameseal-formulier :focus) .flameseal-duimbalk{transform:translateY(110%);visibility:hidden}
}
@media (max-width:22.49em) and (orientation:portrait){.flameseal-duimbalk .flameseal-knop{padding-inline:.65em}}

/* ---------- Eenmalige animaties: de naad sluit (wachtstand alleen met JS en zonder minder beweging) ---------- */
@media (prefers-reduced-motion:no-preference){
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-naad[data-flameseal-speel]:not(.flameseal-speelt)::before{transform:translateX(-14px) scaleX(.97)}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-naad[data-flameseal-speel]:not(.flameseal-speelt)::after{transform:translateX(14px) scaleX(.97)}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-naad[data-flameseal-speel]:not(.flameseal-speelt) span{transform:scale(.5);opacity:0}
  :root:not(.flameseal-minder) .flameseal-naad.flameseal-speelt::before,:root:not(.flameseal-minder) .flameseal-naad.flameseal-speelt::after{transition:transform 1s var(--flameseal-zacht)}
  :root:not(.flameseal-minder) .flameseal-naad.flameseal-speelt span{transition:transform .6s var(--flameseal-zacht) .7s,opacity .6s ease-out .7s}
}

/* ---------- Plantjes: één keer groeien vanaf de voet, zacht uitlopend en nooit verend; alleen transform en opacity.
   Blad: in zijn eigen assen met de voet in de oorsprong en de punt naar rechts. Struik: vanaf de grond. Volgorde met
   --flameseal-n (per blad of struik), --flameseal-blad-start en --flameseal-struik-start (per tekening) en
   --flameseal-wacht (als een paginascript een tekening met flameseal-stil nog even in het beginbeeld houdt).
   Plek: rond een kader, in het landschap, naast een gebouw of wand en bij de concrete uitleg van "duurzaam"; nooit uit
   of door een afdichting of doorvoering, nooit als los symbool naast het woord "duurzaam". ---------- */
.flameseal-blad,.flameseal-struik{transform-box:fill-box}
.flameseal-blad{transform-origin:0 50%}
.flameseal-struik{transform-origin:50% 100%}
@media screen and (prefers-reduced-motion:no-preference){
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-blad,
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-stil .flameseal-blad{opacity:0;transform:scale(.15) rotate(-10deg)}
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-struik,
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-stil .flameseal-struik{transform:scale(0)}
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-speelt:not(.flameseal-stil) .flameseal-blad{animation:flameseal-groei 1.3s var(--flameseal-zacht) both;animation-delay:calc(var(--flameseal-wacht,0s) + var(--flameseal-blad-start,0s) + var(--flameseal-n,0) * .2s)}
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-speelt:not(.flameseal-stil) .flameseal-struik{animation:flameseal-struik .9s var(--flameseal-zacht) both;animation-delay:calc(var(--flameseal-wacht,0s) + var(--flameseal-struik-start,0s) + var(--flameseal-n,0) * .15s)}
}
@keyframes flameseal-groei{from{opacity:0;transform:scale(.15) rotate(-10deg)}35%{opacity:1}}
@keyframes flameseal-struik{from{transform:scale(0)}}

/* ---------- Minder beweging: vangnet voor alles (ook scroll-gestuurd); het stille beeld is altijd het eindbeeld ---------- */
:root.flameseal-minder *,:root.flameseal-minder *::before,:root.flameseal-minder *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Stond minder beweging tijdens dit bezoek (even) aan, dan blijft alles in het eindbeeld (flameseal-eindbeeld, gedeeld
   script), ook als de bezoeker het weer uitzet: er speelt niets alsnog af en niets springt terug naar het beginbeeld */
:root.flameseal-eindbeeld *,:root.flameseal-eindbeeld *::before,:root.flameseal-eindbeeld *::after{animation:none!important;transition:none!important}
/* Uitgespeeld (flameseal-klaar, gedeeld script): de animaties gaan eraf, het beeld blijft gelijk; niets speelt opnieuw */
.flameseal-klaar *,.flameseal-klaar *::before,.flameseal-klaar *::after{animation:none!important}

/* ---------- Contrastmodus ---------- */
@media (forced-colors:active){
  .flameseal-knop,.flameseal-menuknop,.flameseal-kop-tel{border:2px solid ButtonText}
  .flameseal-korrel::before,.flameseal-voet::before{display:none}
  .flameseal-naad,.flameseal-logo img,.flameseal-voet-merk img{forced-color-adjust:none}
  .flameseal-plaatshouder{border-color:GrayText;color:GrayText}
  .flameseal-voet-onder{border-top:1px solid CanvasText;background:none}
  .flameseal-hoofdmenu a[aria-current]{text-decoration:underline 3px}
  :focus-visible{outline:3px solid Highlight}
}

/* ---------- Afdrukken ---------- */
@media print{
  .flameseal-skiplink,.flameseal-menuknop,.flameseal-kop-tel,.flameseal-kop-cta,.flameseal-hoofdmenu,.flameseal-duimbalk,#wpadminbar{display:none!important}
  .flameseal-kop{position:static;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  body{font-size:11pt;color:#000;background:#fff;padding:0}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .flameseal-korrel::before,.flameseal-voet::before{display:none}
  .flameseal-voet{background:#fff;padding-bottom:0}
  h1,h2,h3{break-after:avoid}
  a{color:#000}
}
/* ==== Einde deel 1 ==== */

/* ==== Deel 2: de pagina's uit ontwerp.html ==== */

/* ---------- Algemene bouwstenen van deze pagina's ---------- */
.flameseal-pagina{position:relative}
.flameseal-sectie{position:relative;padding-block:var(--flameseal-sectie)}
.flameseal-sectie--dicht{padding-top:var(--flameseal-sectie-dicht)}
.flameseal-sectiekop{max-width:46rem;margin-bottom:clamp(24px,4vw,40px)}
.flameseal-sectiekop p{color:var(--flameseal-inkt-2);font-size:var(--flameseal-f-intro);margin-bottom:0}
.flameseal-intro{font-size:var(--flameseal-f-intro);line-height:1.6;color:var(--flameseal-inkt-2);max-width:36em;margin-bottom:0}
.flameseal-accent{color:var(--flameseal-petrol)}
/* Korte zinnen naast de hoofdtekst (sleutel van een tekening, privacyregel, werkgebied): 16 px, nooit kleiner (PLAN §6) */
.flameseal-klein{font-size:var(--flameseal-f-kaart);line-height:1.55;color:var(--flameseal-inkt-2)}
.flameseal-knoppen{margin-top:24px}
.flameseal-knop .flameseal-i{width:1.1em;height:1.1em}
.flameseal-onder-knoppen{list-style:none;display:flex;flex-wrap:wrap;gap:4px 22px;margin:16px 0 0;padding:0;color:var(--flameseal-inkt-2)}
.flameseal-onder-knoppen li{display:inline-flex;align-items:center;gap:8px}
.flameseal-onder-knoppen .flameseal-i{color:var(--flameseal-petrol);stroke-width:2.2}
.flameseal-badge{display:inline-grid;place-items:center;flex:0 0 auto;width:42px;height:48px;background:var(--flameseal-munt-2);color:var(--flameseal-petrol)}
.flameseal-badge .flameseal-i{width:22px;height:22px}
.flameseal-badge--groot{width:52px;height:60px}
.flameseal-badge--groot .flameseal-i{width:26px;height:26px}
.flameseal-mb-0{margin-bottom:0}
/* De korrel volgt de ronde hoeken van kaarten en vlakken */
.flameseal-korrel::before{border-radius:inherit}

/* ---------- Opening (Home en de andere pagina's): wit met een zacht muntverloop van rechtsboven dat wegvloeit ---------- */
.flameseal-held{position:relative;isolation:isolate;padding:clamp(16px,3.5vw,56px) 0 clamp(28px,4vw,56px)}
.flameseal-held::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(62rem 30rem at 100% 0%,rgba(227,240,233,.95),rgba(227,240,233,0) 70%);-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.flameseal-held .flameseal-kruimel{margin-top:-8px;margin-bottom:clamp(4px,1.5vw,16px)}
.flameseal-held__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.flameseal-held h1{max-width:15em}
.flameseal-held .flameseal-label{margin-bottom:12px}
@media (min-width:48em){.flameseal-held__raster{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:40px}}
@media (min-width:64em){.flameseal-held__raster{gap:64px}}
.flameseal-held--home{padding-bottom:clamp(28px,4vw,48px);overflow-x:clip}
.flameseal-held__naad{margin-top:clamp(28px,4vw,48px)}
/* Home: tekst en foto onder elkaar tot 64em, daarna naast elkaar (richting A). De blaadjes groeien één keer achter de
   foto vandaan (linksonder en rechtsboven) en blijven altijd buiten de tekst. */
.flameseal-held--home .flameseal-held__raster{grid-template-columns:minmax(0,1fr);gap:40px 28px}
@media (min-width:64em){.flameseal-held--home .flameseal-held__raster{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px}}
.flameseal-held__beeld{position:relative;isolation:isolate;margin:0}
.flameseal-held__foto{position:relative;z-index:1;aspect-ratio:2/1}
@media (min-width:48em){.flameseal-held__foto{aspect-ratio:2.4/1}}
@media (min-width:64em){.flameseal-held__foto{aspect-ratio:1.5/1}}
/* De foto vult het vak (cover, vanuit het midden). Geen CSS-uitsnede zoals in het ontwerp: die past alleen bij dat ene
   AI-beeld. Een foto die moet worden bijgesneden, wordt vóór het uploaden bijgesneden (THEMA-NOTITIES §2). */
.flameseal-blaadjes{position:absolute;z-index:0;overflow:visible;pointer-events:none}
.flameseal-blaadjes--onder{left:-8px;bottom:-20px;width:84px;height:73px}
.flameseal-blaadjes--boven{right:-10px;top:-22px;width:84px;height:78px}
@media (min-width:64em){
  .flameseal-blaadjes--onder{left:-34px;bottom:-26px;width:116px;height:100px}
  .flameseal-blaadjes--boven{right:-24px;top:-36px;width:110px;height:102px}
}
@media (min-width:80em){
  .flameseal-blaadjes--onder{left:-46px;bottom:-30px;width:150px;height:130px}
  .flameseal-blaadjes--boven{right:-38px;top:-42px;width:130px;height:120px}
}
/* Waarom duurzaam: één grote zeshoek in de twee helften van het logo, op een muntvlak. Erin een rustige bouwplaats:
   een betonwand met één afgedichte doorvoering en een slanke stalen kolom met een lichte brandwerende laag.
   Telefoon: klein naast de H1 (de tekstkolom valt dan open in het raster). */
.flameseal-zeshoekvlak{display:block;position:relative;margin:0}
.flameseal-zeshoekvlak svg{display:block;width:100%;height:auto;overflow:visible}
@media (max-width:47.99em){
  .flameseal-held--duurzaam .flameseal-held__raster{grid-template-columns:minmax(0,1fr) 92px;gap:0 14px;align-items:center}
  .flameseal-held--duurzaam .flameseal-held__tekst{display:contents}
  .flameseal-held--duurzaam .flameseal-held__tekst>*{grid-column:1 / -1}
  .flameseal-held--duurzaam .flameseal-held__tekst>h1{grid-column:1;grid-row:1}
  .flameseal-held--duurzaam .flameseal-zeshoekvlak{grid-column:2;grid-row:1;align-self:center;margin-bottom:.5em}
  .flameseal-zeshoekvlak.flameseal-korrel::before{display:none}
}
@media (max-width:22.49em){.flameseal-held--duurzaam .flameseal-held__raster{grid-template-columns:minmax(0,1fr) 72px;column-gap:10px}}
@media (min-width:48em){
  .flameseal-zeshoekvlak{isolation:isolate;width:min(100%,440px);justify-self:center;padding:clamp(20px,3vw,36px);border-radius:var(--flameseal-r3);background-color:var(--flameseal-munt)}
  .flameseal-zeshoekvlak svg{width:78%;margin-inline:auto}
}

/* ---------- Uitleg met een figuur (honingraat, inspectie) ---------- */
.flameseal-uitleg{display:grid;grid-template-columns:minmax(0,1fr);gap:28px 56px;align-items:center}
/* Laptop: kop en figuur beginnen samen bovenaan (niet verticaal gecentreerd), zodat er geen groot gat boven de kop valt */
@media (min-width:56em){.flameseal-uitleg{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:start}.flameseal-uitleg__tekst{padding-top:8px}}
.flameseal-uitleg__tekst>p:last-child{margin-bottom:0}
.flameseal-figuur{position:relative;margin:0;background:var(--flameseal-wit);border-radius:var(--flameseal-r2);padding:clamp(14px,3vw,28px);box-shadow:var(--flameseal-schaduw-licht)}
.flameseal-figuur>svg{display:block;width:100%;height:auto;margin-inline:auto}
.flameseal-hr-svg{max-width:470px}
.flameseal-bediening{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.flameseal-schakel{display:inline-flex;flex-wrap:wrap;justify-content:center;padding:3px;border:2px solid var(--flameseal-petrol);border-radius:var(--flameseal-pil)}
.flameseal-schakel button,.flameseal-opnieuw{min-height:44px;padding:0 16px;border:0;border-radius:var(--flameseal-pil);background:transparent;color:var(--flameseal-petrol);font:inherit;font-weight:var(--flameseal-gewicht-vet);font-size:1rem;line-height:1.2;cursor:pointer}
.flameseal-schakel button[aria-pressed="true"]{background:var(--flameseal-petrol);color:var(--flameseal-wit)}
.flameseal-schakel button:hover:not([aria-pressed="true"]),.flameseal-opnieuw:hover{background:var(--flameseal-munt)}
.flameseal-opnieuw{display:inline-flex;align-items:center;gap:8px;border:2px solid transparent}
/* De statusregel houdt de hoogte van de langste tekst vast: beide teksten staan onzichtbaar in dezelfde cel, de zichtbare
   regel ligt erover. Zo schuift er tijdens het afspelen niets op, ook niet met langere teksten uit de Customizer. */
.flameseal-status{display:grid;margin:12px auto 0;max-width:34em;text-align:center;color:var(--flameseal-inkt-2);font-size:var(--flameseal-f-kaart);line-height:var(--flameseal-rh-kaart)}
.flameseal-status>span{grid-area:1 / 1}
.flameseal-status__maat{visibility:hidden}
html:not(.flameseal-js) .flameseal-status__maat{display:none}
.flameseal-figuur-onder{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;margin:12px 0 0;text-align:center;color:var(--flameseal-inkt-2);font-size:var(--flameseal-f-kaart);line-height:var(--flameseal-rh-kaart)}
html:not(.flameseal-js) .flameseal-bediening,html:not(.flameseal-js) .flameseal-opnieuw,:root.flameseal-minder .flameseal-opnieuw,:root.flameseal-eindbeeld .flameseal-opnieuw{display:none}
/* Is het vangnet van het kopscript afgegaan (script te laat), dan staan de eindbeelden stil en speelt er niets opnieuw */
:root.flameseal-js:not(.flameseal-js-anim) .flameseal-opnieuw{display:none}
@media (prefers-reduced-motion:reduce){.flameseal-opnieuw{display:none}}
/* Knoppen die alleen werken als hun eigen script draait: pas zichtbaar als dat script ze heeft aangezet (de ruimte blijft) */
.flameseal-hr:not(.flameseal-hr-klaar) .flameseal-bediening,.flameseal-opnieuw:not(.flameseal-opnieuw-klaar){visibility:hidden}
/* Liggende telefoon: tekening, schakelaar en statusregel passen samen onder de kop (ook met de beheerbalk van WordPress).
   175 px = binnenruimte van de figuur (12 px rondom) + schakelaar + twee regels status + 12 px onder de kop. */
@media (orientation:landscape) and (max-height:30em){
  .flameseal-figuur.flameseal-hr{padding:12px}
  .flameseal-figuur>.flameseal-hr-svg{width:auto;min-height:96px;height:calc(100vh - var(--flameseal-kop-h) - var(--flameseal-balk) - 175px);height:calc(100svh - var(--flameseal-kop-h) - var(--flameseal-balk) - 175px)}
}

/* ---------- Wandel mee (Home): de overzichtsprent van de wandeling naast de uitnodiging ---------- */
.flameseal-wandelmee{padding-top:calc(var(--flameseal-sectie) + 16px)}
/* Organische rand: het munt van de honingraat loopt in een lage horizon uit in het wit */
.flameseal-horizonrand{position:absolute;left:0;right:0;top:-1px;display:block;width:100%;height:clamp(22px,3vw,40px);pointer-events:none}
.flameseal-wandelmee__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:24px 56px;align-items:center}
@media (min-width:48em){.flameseal-wandelmee__raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.flameseal-prent{margin:0;border-radius:var(--flameseal-r3);overflow:hidden;background:var(--flameseal-lucht-ochtend);box-shadow:var(--flameseal-schaduw-licht)}
.flameseal-prent svg{display:block;width:100%;height:auto}
@media (max-width:47.99em){.flameseal-prent svg{height:180px}}
.flameseal-wandelmee__tekst p{color:var(--flameseal-inkt-2);max-width:34em}
.flameseal-wandelmee__tekst .flameseal-knoppen{margin-top:20px}

/* ---------- Speerpunt (Home): open, zonder donkere kaart; de foto in de zeshoekvorm, zonder het teal/limoen kader
   (dat kader staat op Home alleen bij de installateurs, waar de zeshoek sluit) ---------- */
/* Telefoon: label en kop naast een kleine zeshoek, de tekst eronder. Laptop: tekst links, foto rechts. */
.flameseal-speerpunt{display:grid;grid-template-columns:minmax(0,1fr) 112px;grid-template-areas:"kop foto" "tekst tekst";gap:12px 16px;align-items:center}
@media (max-width:22.49em){
  .flameseal-speerpunt{grid-template-columns:minmax(0,1fr) 88px}
  .flameseal-speerpunt .flameseal-speerpunt__foto .flameseal-ai-label{white-space:normal;text-align:center;line-height:1.3;padding:2px 6px}
}
.flameseal-speerpunt__blok{display:contents}
.flameseal-speerpunt__kop{grid-area:kop}
.flameseal-speerpunt__kop h2{margin-bottom:0}
.flameseal-speerpunt__tekst{grid-area:tekst}
.flameseal-speerpunt p{max-width:34em}
.flameseal-speerpunt__foto{grid-area:foto;position:relative;margin:0;width:100%}
.flameseal-speerpunt__zeshoek{aspect-ratio:86.6/100;background:var(--flameseal-munt-2)}
/* De foto vult de zeshoek (formaat flameseal-zeshoek van de kern, al vierkant bijgesneden); geen CSS-uitsnede */
.flameseal-speerpunt__zeshoek img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(.97)}
.flameseal-speerpunt__foto .flameseal-ai-label{position:static;display:table;margin:4px auto 0;white-space:nowrap}
@media (min-width:48em){
  .flameseal-speerpunt{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);grid-template-areas:none;gap:24px 56px}
  .flameseal-speerpunt__blok{display:block}
  .flameseal-speerpunt__kop h2{margin-bottom:.5em}
  .flameseal-speerpunt__foto{grid-area:auto;margin:0 auto;width:min(62%,260px)}
  .flameseal-speerpunt__foto .flameseal-ai-label{position:absolute;margin:0;left:50%;bottom:14%;transform:translateX(-50%)}
}
@media (min-width:64em){.flameseal-speerpunt__foto{width:min(100%,280px)}}

/* ---------- Voor installateurs (Home): figuur links, tekst rechts ---------- */
.flameseal-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:28px 56px;align-items:center}
@media (min-width:56em){.flameseal-duo{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.flameseal-duo>.flameseal-figuur{order:-1}}
.flameseal-in-svg{max-width:200px}
@media (min-width:40em){.flameseal-in-svg{max-width:250px}}
@media (min-width:64em){.flameseal-in-svg{max-width:290px}}
.flameseal-duo-onder{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:14px 0 0}
.flameseal-duo-stap{position:relative;isolation:isolate;display:inline-flex;align-items:center;padding:6px 14px;border-radius:var(--flameseal-pil);font-weight:var(--flameseal-gewicht-vet);color:var(--flameseal-kopkleur)}
.flameseal-duo-stap::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--flameseal-limoen-zacht);opacity:0}
.flameseal-duo-pijl{color:var(--flameseal-teal)}
/* Telefoon (staand, en liggend onder 30em hoog): de tekening als lage band, met "U legt aan ↓ Wij dichten af" en de
   knop "Opnieuw" ernaast. Liggend past zo de hele figuur onder de kop, ook de stappen die met de tekening oplichten. */
@media (orientation:landscape) and (max-height:30em){
  .flameseal-duo>.flameseal-figuur{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);align-content:center;column-gap:24px;padding:14px 20px}
  .flameseal-duo>.flameseal-figuur>svg{grid-column:1;grid-row:1 / span 2;align-self:center;max-width:none}
  .flameseal-duo-onder{grid-column:2;grid-row:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;margin:0}
  .flameseal-duo-pijl{transform:rotate(90deg);margin-left:14px}
  .flameseal-duo .flameseal-figuur-onder{grid-column:2;grid-row:2;justify-content:flex-start;margin:0}
  .flameseal-duo .flameseal-opnieuw{margin-top:8px}
}
@media (max-width:39.99em){
  .flameseal-duo>.flameseal-figuur{display:grid;grid-template-columns:minmax(0,128px) minmax(0,1fr);align-content:center;column-gap:16px;padding:14px 16px}
  .flameseal-duo>.flameseal-figuur>svg{grid-column:1;grid-row:1 / span 2;align-self:center;max-width:none}
  .flameseal-duo-onder{grid-column:2;grid-row:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;margin:0}
  .flameseal-duo-pijl{transform:rotate(90deg);margin-left:14px}
  .flameseal-duo .flameseal-figuur-onder{grid-column:2;grid-row:2;justify-content:flex-start;margin:0}
  .flameseal-duo .flameseal-opnieuw{margin-top:8px}
}
@media (max-width:22.49em){
  .flameseal-duo>.flameseal-figuur{grid-template-columns:minmax(0,100px) minmax(0,1fr);column-gap:12px;padding-inline:12px}
  .flameseal-duo-stap{padding-inline:10px}
}

/* ---------- Onze diensten: kaarten zonder rand op een eigen muntvlak; de rand pas bij aanwijzen of focus ---------- */
.flameseal-diensten{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.flameseal-diensten>li{display:flex;flex:1 1 100%;min-width:0}
@media (min-width:40em){.flameseal-diensten{gap:16px}.flameseal-diensten>li{flex:0 1 calc((100% - 16px) / 2)}}
@media (min-width:64em){.flameseal-diensten{gap:20px}.flameseal-diensten>li{flex:0 1 calc((100% - 40px) / 3)}}
.flameseal-dienst{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 12px;width:100%;align-content:start;align-items:center;padding:14px 16px;background:var(--flameseal-munt);border:2px solid transparent;border-radius:var(--flameseal-r2);transition:border-color .2s}
.flameseal-dienst:hover,.flameseal-dienst:focus-within{border-color:var(--flameseal-teal)}
.flameseal-dienst:has(a:focus-visible){outline:3px solid var(--flameseal-inkt);outline-offset:3px}
.flameseal-dienst a:focus-visible{outline:none}
.flameseal-dienst .flameseal-badge{width:36px;height:40px;background:var(--flameseal-wit)}
.flameseal-dienst:has(.flameseal-label) .flameseal-badge{grid-row:1 / span 2}
.flameseal-dienst .flameseal-badge .flameseal-i{width:22px;height:22px}
.flameseal-dienst>:not(.flameseal-badge){grid-column:2}
.flameseal-dienst .flameseal-label{justify-self:start;margin:0 0 4px}
.flameseal-dienst h3{margin:0;font-size:var(--flameseal-f-h3)}
.flameseal-dienst h3 a{color:inherit;text-decoration:none;padding-right:1.15em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306687A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13.5M13 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E") right .05em center/.82em no-repeat}
.flameseal-dienst h3 a::after{content:"";position:absolute;inset:-2px;border-radius:inherit}
.flameseal-dienst p:not(.flameseal-label){margin:2px 0 0;color:var(--flameseal-inkt-2);font-size:var(--flameseal-f-kaart);line-height:var(--flameseal-rh-kaart)}
@media (min-width:40em){
  .flameseal-dienst{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:24px}
  .flameseal-dienst .flameseal-badge{width:48px;height:55px;margin:0 0 12px}
  .flameseal-dienst .flameseal-badge .flameseal-i{width:27px;height:27px}
}
.flameseal-wegwijzer{margin:28px 0 0;text-align:center}
.flameseal-wegwijzer a{display:inline-flex;align-items:center;min-height:44px;font-weight:var(--flameseal-gewicht-vet)}

/* ---------- Duurzaam als één doorlopende lijn met zeshoekige knopen (Home en Waarom duurzaam) ---------- */
.flameseal-lijn{position:relative;list-style:none;margin:28px 0 24px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.flameseal-lijn>li{position:relative;padding-left:52px}
.flameseal-lijn>li::before{content:"";position:absolute;left:3px;top:2px;width:27px;height:30px;clip-path:var(--flameseal-zeshoek-clip);background:linear-gradient(90deg,var(--flameseal-teal) 50%,var(--flameseal-limoen) 50%)}
.flameseal-lijn>li::after{content:"";position:absolute;left:8px;top:7.5px;width:17px;height:19px;clip-path:var(--flameseal-zeshoek-clip);background:var(--flameseal-wit)}
/* Het stuk lijn naar de volgende knoop (bij het laatste punt is er geen) */
.flameseal-lijn__deel{position:absolute;left:15px;top:36px;bottom:-26px;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--flameseal-teal),var(--flameseal-limoen));transform-origin:50% 0}
.flameseal-lijn h3{font-size:var(--flameseal-f-h3);margin:0 0 4px}
.flameseal-lijn p{margin:0;color:var(--flameseal-inkt-2);max-width:24em}
.flameseal-chip{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:2px 12px;border:1px solid #BCD0C4;border-radius:var(--flameseal-pil);background:var(--flameseal-wit);font-size:var(--flameseal-f-klein);font-weight:var(--flameseal-gewicht-vet);color:var(--flameseal-kopkleur)}
.flameseal-chip .flameseal-i{color:var(--flameseal-petrol)}
@media (min-width:48em){
  .flameseal-lijn{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:40px}
  .flameseal-lijn>li{padding:52px 0 0}
  .flameseal-lijn>li::before{left:2px;top:0}
  .flameseal-lijn>li::after{left:7px;top:5.5px}
  .flameseal-lijn__deel{left:34px;right:-30px;top:13.5px;bottom:auto;width:auto;height:3px;background:linear-gradient(90deg,var(--flameseal-teal),var(--flameseal-limoen));transform-origin:0 50%}
}
/* Waarom duurzaam: de kop van de lijn met een getekend landschap (richting A): een gebouw en ernaast, op eigen grond, een
   jonge plant die één keer rustig opgroeit. Telefoon: een lage band onder de kop. */
.flameseal-lijnkop{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:clamp(24px,4vw,40px)}
.flameseal-lijnkop .flameseal-sectiekop{margin-bottom:0}
.flameseal-plantvlak{margin:0;border-radius:var(--flameseal-r2);overflow:hidden;background:var(--flameseal-lucht-ochtend);box-shadow:var(--flameseal-schaduw-licht)}
.flameseal-plantvlak svg{display:block;width:100%;height:124px}
@media (min-width:48em){
  .flameseal-lijnkop{grid-template-columns:minmax(0,1fr) minmax(0,380px);align-items:end;gap:24px 56px}
  .flameseal-plantvlak{border-radius:var(--flameseal-r3)}
  .flameseal-plantvlak svg{height:auto;aspect-ratio:400/210}
}
/* Groter, met pictogram in de knoop en een label (Waarom duurzaam) */
.flameseal-lijn--groot>li{padding-left:72px}
.flameseal-lijn--groot>li::before,.flameseal-lijn--groot>li::after{content:none}
.flameseal-lijn--groot .flameseal-badge{position:absolute;left:0;top:0;z-index:1}
.flameseal-lijn--groot .flameseal-lijn__deel{left:24.5px;top:66px;bottom:-34px}
.flameseal-lijn--groot h3{font-size:var(--flameseal-f-etappe);margin:2px 0 8px}
.flameseal-lijn--groot p{max-width:30em;margin-bottom:10px}
/* Het label (Klant, Werknemer, Oplevering) staat in de kop zelf, zodat de koppenlijst en het thema het herkennen (API.md §5) */
.flameseal-lijn__label{display:block;margin:0 0 6px;font-family:var(--flameseal-tekst);color:var(--flameseal-petrol);font-size:.8rem;font-weight:var(--flameseal-gewicht-vet);letter-spacing:.07em;line-height:1.5;text-transform:uppercase}
@media (min-width:64em){
  .flameseal-lijn--groot{gap:44px}
  .flameseal-lijn--groot>li{padding:80px 0 0}
  .flameseal-lijn--groot .flameseal-lijn__deel{left:64px;right:-40px;top:28.5px;bottom:auto}
}
@media (min-width:48em) and (max-width:63.99em){
  /* Tablet: de grote lijn staat nog onder elkaar, het label naast de zeshoek (niet eronder, zoals bij de kleine lijn) */
  .flameseal-lijn--groot{grid-template-columns:minmax(0,1fr);gap:28px}
  .flameseal-lijn--groot>li{padding:0 0 0 72px}
  .flameseal-lijn--groot .flameseal-lijn__deel{left:24.5px;right:auto;top:66px;bottom:-34px;width:3px;height:auto;background:linear-gradient(180deg,var(--flameseal-teal),var(--flameseal-limoen));transform-origin:50% 0}
}

/* ---------- Zo werken wij (Home): één doorlopende lijn met vier genummerde zeshoeken, van de eerste vraag tot de
   oplevering. Nummers in dezelfde stijl als de etappes van de wandeling (teal en limoen uit het logo, wit binnenvlak);
   de lijn ertussen in het verloop van teal naar limoen, zoals de duurzame lijn op Waarom duurzaam. ---------- */
.flameseal-stappen{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.flameseal-stappen>li{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:2px 18px;align-content:start}
.flameseal-stappen>li:not(:last-child)::after{content:"";position:absolute;left:24.5px;top:64px;bottom:-18px;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--flameseal-teal),var(--flameseal-limoen));transform-origin:50% 0}
.flameseal-stappen h3{margin:14px 0 4px}
.flameseal-stappen>li>p,.flameseal-stappen>li>ul{margin:0;grid-column:2}
.flameseal-stappen p{color:var(--flameseal-inkt-2)}
.flameseal-stap-nr{position:relative;isolation:isolate;grid-row:span 2;display:grid;place-items:center;width:var(--flameseal-nr-b);height:var(--flameseal-nr-h);clip-path:var(--flameseal-zeshoek-clip);background:linear-gradient(90deg,var(--flameseal-teal) 50%,var(--flameseal-limoen) 50%);color:var(--flameseal-kopkleur);font-family:var(--flameseal-kopletter);font-weight:var(--flameseal-gewicht-kop);font-size:var(--flameseal-nr-f);line-height:1}
.flameseal-stap-nr::before{content:"";position:absolute;z-index:-1;inset:calc(var(--flameseal-nr-h) * .1) calc(var(--flameseal-nr-b) * .106);clip-path:var(--flameseal-zeshoek-clip);background:var(--flameseal-wit)}
.flameseal-chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px}
.flameseal-stappen>li>.flameseal-chips{margin-top:10px}
.flameseal-chips .flameseal-chip{margin:0}
@media (max-width:63.99em){
  .flameseal-stappen{gap:16px}
  .flameseal-stappen>li{grid-template-columns:42px minmax(0,1fr);column-gap:16px}
  .flameseal-stappen h3{margin-top:8px}
  .flameseal-stappen>li:not(:last-child)::after{left:19.5px;top:52px;bottom:-12px}
}
@media (min-width:64em){
  .flameseal-stappen{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
  .flameseal-stappen>li{grid-template-columns:minmax(0,1fr)}
  .flameseal-stappen>li:not(:last-child)::after{left:62px;right:-24px;top:28.5px;bottom:auto;width:auto;height:3px;background:linear-gradient(90deg,var(--flameseal-teal),var(--flameseal-limoen));transform-origin:0 50%}
  .flameseal-stappen>li>p,.flameseal-stappen>li>ul{grid-column:1}
  .flameseal-stap-nr{grid-row:auto}
}
.flameseal-werkwijze-meer{margin:16px 0 0}
/* De uitleg staat direct onder de ondertitel: de claim en de concrete uitleg horen bij elkaar (EU 2024/825, ACM) */
.flameseal-werkwijze-kop .flameseal-duurzaam-uitleg{margin-top:.5em;font-size:var(--flameseal-f-tekst);color:var(--flameseal-inkt)}
/* De tak: groeit één keer vanaf de rand het vlak in, rechtsboven, naast de uitleg en nooit over tekst */
.flameseal-met-tak{overflow-x:clip}
.flameseal-met-tak>.flameseal-binnen{position:relative;z-index:1}
.flameseal-tak{position:absolute;z-index:0;top:0;right:0;width:clamp(120px,26vw,330px);height:auto;overflow:visible;pointer-events:none}
@media (min-width:48em){.flameseal-werkwijze-kop{max-width:min(46rem,calc(100% - 15rem))}}
/* Telefoon: de kop houdt rechts plaats vrij voor de tak, ook als de tekst uit de Customizer langer is */
@media (max-width:47.99em){.flameseal-werkwijze-kop h2{padding-right:clamp(96px,30vw,150px)}}
#werkwijze .flameseal-notitie{background:var(--flameseal-wit)}
.flameseal-notitie{display:flex;gap:14px;align-items:flex-start;margin-top:32px;padding:18px 22px;background:var(--flameseal-munt);border-radius:var(--flameseal-r2);max-width:52rem}
.flameseal-notitie>.flameseal-i{width:26px;height:26px;color:var(--flameseal-petrol);margin-top:2px}
@media (max-width:47.99em){.flameseal-notitie{gap:10px;margin-top:24px;padding:14px 16px}.flameseal-notitie>.flameseal-i{width:22px;height:22px}}
.flameseal-notitie p{margin:0}

/* ---------- Afsluiter en oproep: één muntkaart, hoek 32, geen rand ---------- */
/* Rust vóór de afsluiter: een witte band tussen het muntvlak van "Zo werken wij" en de muntkaart */
.flameseal-afsluiter{padding-top:var(--flameseal-sectie);padding-bottom:var(--flameseal-sectie)}
.flameseal-afsluiter__kaart{position:relative;overflow:hidden;background-color:var(--flameseal-munt);border-radius:var(--flameseal-r3);padding:clamp(28px,5vw,64px);text-align:center}
.flameseal-afsluiter__kaart>*{position:relative}
.flameseal-afsluiter__kaart h2{margin-bottom:.35em}
.flameseal-afsluiter__kaart p{color:var(--flameseal-inkt-2);margin-inline:auto;max-width:34em}
.flameseal-afsluiter__kaart .flameseal-knoppen{justify-content:center;margin-top:20px}
.flameseal-afsluiter__contact{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 26px;margin:14px 0 0}
.flameseal-groot-tel{display:inline-flex;align-items:center;gap:10px;min-height:48px;font-family:var(--flameseal-kopletter);font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);font-weight:var(--flameseal-gewicht-kop);color:var(--flameseal-petrol);text-decoration:none}
.flameseal-groot-tel .flameseal-i{width:.85em;height:.85em}
.flameseal-afsluiter__contact .flameseal-mail{display:inline-flex;align-items:center;min-height:44px;font-weight:var(--flameseal-gewicht-vet)}
.flameseal-afsluiter__decor{position:absolute!important;width:200px;height:200px;right:-70px;top:-80px;opacity:.5;pointer-events:none}
/* Telefoon: dezelfde open vorm als het einde van de wandeling (geen kaart, het nummer als gewone vette link) */
@media (max-width:47.99em){
  .flameseal-afsluiter__decor{display:none}
  .flameseal-afsluiter{padding-top:var(--flameseal-sectie)}
  .flameseal-afsluiter__kaart{background:none;border-radius:0;padding:0}
  .flameseal-afsluiter__kaart.flameseal-korrel::before{display:none}
  .flameseal-afsluiter__contact{gap:0 18px;margin-top:4px}
  .flameseal-groot-tel{gap:8px;min-height:44px;font-family:var(--flameseal-tekst);font-size:inherit;font-weight:var(--flameseal-gewicht-vet);text-decoration:underline}
  .flameseal-groot-tel .flameseal-i{width:1.2em;height:1.2em}
  .flameseal-afsluiter__kaart .flameseal-knoppen{margin-top:14px}
}
.flameseal-oproep{padding-bottom:var(--flameseal-sectie)}
.flameseal-oproep__kaart{background-color:var(--flameseal-munt);border-radius:var(--flameseal-r3);padding:clamp(26px,5vw,56px)}
.flameseal-oproep__kaart p{max-width:36em;color:var(--flameseal-inkt-2)}
.flameseal-oproep__kaart .flameseal-knoppen{margin-top:20px}

/* ---------- Dienstpagina: leeskolom met "Op deze pagina" ---------- */
.flameseal-held--dienst .flameseal-figuur{justify-self:center;width:100%;max-width:480px;border-radius:var(--flameseal-r3);background:linear-gradient(180deg,var(--flameseal-lucht-ochtend),var(--flameseal-lucht-dag) 72%);box-shadow:none}
.flameseal-dv-svg{max-width:420px}
.flameseal-klein-vink{display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;color:var(--flameseal-inkt-2)}
.flameseal-klein-vink .flameseal-i{color:var(--flameseal-petrol);stroke-width:2.2;margin-top:.2em}
.flameseal-leesraster{display:grid;grid-template-columns:minmax(0,1fr);gap:24px 64px;padding-block:var(--flameseal-sectie-dicht)}
.flameseal-opdezepagina{background-color:var(--flameseal-munt);border-radius:var(--flameseal-r2);padding:14px 20px}
.flameseal-opdezepagina__kop{margin:0 0 2px;font-weight:var(--flameseal-gewicht-vet);color:var(--flameseal-kopkleur)}
.flameseal-opdezepagina ul{list-style:none;margin:0;padding:0}
.flameseal-opdezepagina li+li{margin-top:4px}
.flameseal-opdezepagina a{display:flex;align-items:center;min-height:44px;padding-block:6px;line-height:1.3;font-weight:var(--flameseal-gewicht-vet);text-decoration:none}
.flameseal-opdezepagina a:hover{text-decoration:underline}
.flameseal-leestekst{max-width:42rem;line-height:1.7}
.flameseal-leestekst h2{font-size:clamp(1.4rem,1.2rem + .9vw,1.85rem);margin-top:1.7em}
.flameseal-leestekst h2:first-child{margin-top:0}
/* De foto in de leestekst (na het eerste deel van een dienstpagina), formaat flameseal-kaart (4:3), hoogstens 440 px
   breed. Geen CSS-uitsnede: een foto die moet worden bijgesneden, wordt vóór het uploaden bijgesneden. */
.flameseal-foto-lees{margin:1.6em 0;max-width:440px}
.flameseal-foto-lees .flameseal-foto{aspect-ratio:4/3;border-radius:var(--flameseal-r2)}
.flameseal-foto-lees figcaption{margin-top:10px}
@media (min-width:64em){
  /* Links uitgelijnd op de binnenrand: "Op deze pagina" staat op één lijn met kruimelpad, H1 en oproep */
  .flameseal-leesraster{grid-template-columns:minmax(0,15rem) minmax(0,42rem);justify-content:start}
  .flameseal-opdezepagina{position:sticky;top:calc(var(--flameseal-balk) + var(--flameseal-kop-h) + 24px);align-self:start}
}
/* Dienstpagina's (deel 1, 09-10-2026): de tekening in de opening is een tafereel in het landschap van richting A, van
   rand tot rand in de kaart, met het onderschrift en "Opnieuw afspelen" eronder. Lijsten in de leestekst krijgen een
   kleine zeshoek als opsommingsteken (de vorm van het logo, geen vinkje: er wordt niets beloofd). */
.flameseal-held--dienst .flameseal-figuur--tafereel{padding:0;overflow:hidden;background:var(--flameseal-lucht-dag)}
.flameseal-figuur--tafereel .flameseal-figuur-onder{margin:0;padding:10px 16px 12px}
.flameseal-figuur-onder>span{text-wrap:balance}
.flameseal-cert-svg{max-width:440px}
.flameseal-leestekst ul{list-style:none;margin:0 0 1em;padding:0}
.flameseal-leestekst li{position:relative;padding-left:26px;margin-bottom:.4em}
.flameseal-leestekst li::before{content:"";position:absolute;left:3px;top:.62em;width:10px;height:11px;clip-path:var(--flameseal-zeshoek-clip);background:var(--flameseal-teal)}
/* Diensten (overzicht): rechts in de opening de splitsing met de wegwijzer (laptop en tablet, hoogstens 260 px hoog); op
   de telefoon niet, zodat de eerste kaarten hoger staan. Onder de kaarten de regel over offerte en inspecties, zonder
   eigen vlak (zoals de noot onder "Zo werken wij" op Home). */
.flameseal-splitsing{margin:0;justify-self:end;width:100%;max-width:400px;border-radius:var(--flameseal-r3);overflow:hidden;background:var(--flameseal-lucht-ochtend);box-shadow:var(--flameseal-schaduw-licht)}
.flameseal-splitsing svg{display:block;width:100%;height:auto}
@media (max-width:47.99em){.flameseal-splitsing{display:none}}
.flameseal-diensten-lijst{padding-top:clamp(8px,2vw,24px)}
.flameseal-kostenregel{display:flex;gap:12px;align-items:flex-start;width:fit-content;max-width:min(100%,46rem);margin:clamp(24px,4vw,40px) auto 0;color:var(--flameseal-inkt-2)}
.flameseal-kostenregel>.flameseal-i{width:24px;height:24px;margin-top:1px;color:var(--flameseal-petrol)}
.flameseal-oproep__kaart .flameseal-oproep__link{margin:14px 0 0}
.flameseal-andere-diensten{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;padding-block:16px;border-top:1px solid var(--flameseal-lijn)}
.flameseal-andere-diensten>span{font-weight:var(--flameseal-gewicht-vet);margin-right:6px}
.flameseal-andere-diensten ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 4px}
.flameseal-andere-diensten li:not(:last-child)::after{content:"·";margin-left:4px;color:var(--flameseal-plaats)}
.flameseal-andere-diensten a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- Lees meer (alleen op de telefoon ingeklapt; de volledige tekst staat in de HTML) ---------- */
.flameseal-lees-meer{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:-4px 0 12px;padding:0 2px;border:0;background:none;color:var(--flameseal-petrol);font:inherit;font-weight:var(--flameseal-gewicht-vet);cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.flameseal-lees-meer[hidden]{display:none}
.flameseal-lees-meer::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.flameseal-lees-meer[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}

/* ---------- Waarom duurzaam: inspectie (figuur met stappen) ---------- */
.flameseal-dz-svg{max-width:470px}
.flameseal-dz-stappen{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:4px}
.flameseal-dz-stap{position:relative;isolation:isolate;display:flex;gap:10px;align-items:baseline;padding:8px 12px;border-radius:var(--flameseal-r1)}
.flameseal-dz-stap::before{content:"";flex:0 0 auto;width:10px;height:11px;align-self:flex-start;margin-top:.55em;background:var(--flameseal-teal);clip-path:var(--flameseal-zeshoek-clip)}
.flameseal-dz-stap::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--flameseal-limoen-zacht);opacity:0}
.flameseal-dz-stap strong{color:var(--flameseal-kopkleur);min-width:6.2em}
@media (max-width:39.99em){.flameseal-dz-stap{flex-wrap:wrap;column-gap:8px}.flameseal-dz-stap strong{min-width:0}.flameseal-dz-stap span{flex:1 1 12em}}

/* ---------- Contact ---------- */
.flameseal-held--kort{padding-bottom:8px}
.flameseal-sectie--contact{padding-top:20px}
.flameseal-contact-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:28px 48px;align-items:start}
@media (min-width:64em){
  .flameseal-contact-raster{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr)}
  .flameseal-contactkaart{position:sticky;top:calc(var(--flameseal-balk) + var(--flameseal-kop-h) + 24px)}
}
.flameseal-formulier{background:var(--flameseal-wit);border:1px solid var(--flameseal-lijn);border-radius:var(--flameseal-r3);padding:clamp(18px,4vw,40px)}
.flameseal-formulier fieldset{margin:0 0 22px;padding:0;border:0;min-width:0}
.flameseal-formulier legend,.flameseal-veldnaam{display:block;padding:0;font-weight:var(--flameseal-gewicht-vet);color:var(--flameseal-kopkleur)}
.flameseal-verplicht{font-weight:400;color:var(--flameseal-inkt-2);font-size:var(--flameseal-f-klein)}
.flameseal-hint{margin:2px 0 8px;font-size:var(--flameseal-f-kaart);line-height:var(--flameseal-rh-kaart);color:var(--flameseal-inkt-2)}
.flameseal-veld{margin-bottom:20px;min-width:0}
.flameseal-velden-twee{display:grid;grid-template-columns:minmax(0,1fr);gap:0 24px}
@media (min-width:48em){
  .flameseal-velden-twee{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Naam, uitleg en veld per rij gelijk, ook als een uitleg twee regels heeft */
  .flameseal-velden-twee .flameseal-veld{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
}
.flameseal-formulier input[type="text"],.flameseal-formulier input[type="email"],.flameseal-formulier input[type="tel"],.flameseal-formulier textarea{display:block;width:100%;min-height:50px;padding:11px 14px;border:1.5px solid var(--flameseal-veldrand);border-radius:var(--flameseal-r1);background:var(--flameseal-wit);color:var(--flameseal-inkt);font:inherit;font-size:var(--flameseal-f-tekst)}
.flameseal-formulier textarea{min-height:150px;resize:vertical}
.flameseal-formulier input:focus-visible,.flameseal-formulier textarea:focus-visible{outline:3px solid var(--flameseal-petrol);outline-offset:1px;border-color:var(--flameseal-petrol)}
.flameseal-formulier input[type="file"]{display:block;width:100%;max-width:100%;min-height:50px;padding:10px;border:1.5px dashed var(--flameseal-veldrand);border-radius:var(--flameseal-r1);background:var(--flameseal-munt);font:inherit;font-size:var(--flameseal-f-klein)}
.flameseal-keuzes{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:8px}
@media (min-width:30em){.flameseal-keuzes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flameseal-keuze{display:flex;gap:12px;align-items:flex-start;min-height:56px;padding:12px 14px;border:1.5px solid var(--flameseal-lijn);border-radius:var(--flameseal-r1);cursor:pointer}
.flameseal-keuze:has(input:checked){border-color:var(--flameseal-petrol);background:var(--flameseal-munt)}
.flameseal-keuze strong{display:block;color:var(--flameseal-kopkleur)}
.flameseal-keuze small{display:block;color:var(--flameseal-inkt-2);font-size:var(--flameseal-f-kaart);line-height:var(--flameseal-rh-kaart)}
.flameseal-formulier input[type="radio"],.flameseal-formulier input[type="checkbox"]{width:22px;height:22px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--flameseal-petrol)}
.flameseal-vinkjes{display:grid;grid-template-columns:minmax(0,1fr);gap:0 18px}
@media (min-width:40em){.flameseal-vinkjes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flameseal-vinkje{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:8px 0;cursor:pointer}
.flameseal-vooraf{margin:0 0 18px;padding:12px 16px;border-radius:var(--flameseal-r1);background:var(--flameseal-limoen-zacht);font-weight:var(--flameseal-gewicht-vet)}
.flameseal-vooraf[hidden]{display:none}
.flameseal-wegwijzer-klein{margin:-4px 0 20px;color:var(--flameseal-inkt-2)}
.flameseal-verstuur-rij{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:6px}
.flameseal-formulier-melding:empty{display:none}
.flameseal-formulier-melding{margin:16px 0 0;padding:12px 16px;border-radius:var(--flameseal-r1);background:var(--flameseal-munt);font-weight:var(--flameseal-gewicht-vet)}
.flameseal-bestanden{margin:8px 0 0;font-size:var(--flameseal-f-kaart);line-height:var(--flameseal-rh-kaart);color:var(--flameseal-inkt-2)}
.flameseal-bestanden:empty{display:none}
.flameseal-bestanden.flameseal-fout{color:#8A1F1F;font-weight:var(--flameseal-gewicht-vet)}
.flameseal-contactkaart{background-color:var(--flameseal-munt);border-radius:var(--flameseal-r3);padding:clamp(20px,4vw,32px)}
.flameseal-contactkaart h2{font-size:1.5rem}
.flameseal-contactlijst{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:14px}
.flameseal-contactlijst li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start}
.flameseal-contactlijst .flameseal-i{width:22px;height:22px;color:var(--flameseal-petrol);margin-top:4px}
.flameseal-contactlijst .flameseal-soort{display:block;font-size:var(--flameseal-f-klein);color:var(--flameseal-inkt-2);font-weight:var(--flameseal-gewicht-vet)}
.flameseal-contactlijst a{display:inline-flex;align-items:center;min-height:44px;font-weight:var(--flameseal-gewicht-vet);font-size:var(--flameseal-f-tekst)}

/* ---------- Contact: het vak van Turnstile (deel 2, 09-10-2026; API.md §3, Formulier). In WordPress staat het vak
   ([turnstile size:flexible]) in __turnstile, vlak boven de verzendknop, en is het minstens 300 px breed. Is de kolom
   smaller (320 px), dan steekt het vak aan beide kanten even ver uit in de zijruimte van het formulier. Hier een
   gestippeld plaatsje van 300 × 65 px. ---------- */
.flameseal-formulier__turnstile{margin:4px min(0px,calc((100% - 300px) / 2)) 18px}
.flameseal-turnstile-plek{display:flex;align-items:center;justify-content:center;width:300px;height:65px;margin:0;padding:0 12px;text-align:center}
/* Smalle telefoon (onder 370 px): het formulier zonder zijranden over de volle breedte, met binnenin de gewone zijruimte
   van de pagina. Zo is er ook op 320 px plaats voor het vak van 300 px. */
@media (max-width:23.12em){
  .flameseal-formulier{margin-inline:calc(-1 * var(--flameseal-gutter));border-inline:0;border-radius:0;padding-inline:var(--flameseal-gutter)}
}

/* ==========================================================================
   Deel 2 (09-10-2026): Over ons, Privacyverklaring, Disclaimer en de 404. Rustige leespagina's in de taal van de
   dienstpagina's (leeskolom, "Op deze pagina"), met per pagina hooguit één tekening in het landschap van richting A.
   ========================================================================== */
/* ---------- Leespagina's: de opening met kruimelpad, H1 en de inleiding, bij de Disclaimer ook een kleine tekening;
   "Laatst bijgewerkt" onderaan ---------- */
.flameseal-held--lees{padding-bottom:clamp(8px,2vw,24px)}
.flameseal-held--lees h1{margin-bottom:.3em}
.flameseal-held--lees .flameseal-intro{margin-bottom:0}
.flameseal-leesraster--slot{padding-bottom:var(--flameseal-sectie)}
.flameseal-leestekst h3{margin:1.5em 0 .35em}
.flameseal-leestekst h2+h3{margin-top:.7em}
/* Stappen in de tekst: het nummer in een kleine zeshoek (geen opsommingsteken) */
.flameseal-leestekst ol{list-style:none;margin:0 0 1em;padding:0;counter-reset:flameseal-stap}
.flameseal-leestekst ol>li{counter-increment:flameseal-stap;padding-left:38px;margin-bottom:.55em}
.flameseal-leestekst ol>li::before{content:counter(flameseal-stap);left:0;top:.05em;display:grid;place-items:center;width:26px;height:30px;background:var(--flameseal-munt-2);color:var(--flameseal-kopkleur);font-family:var(--flameseal-kopletter);font-weight:var(--flameseal-gewicht-kop);font-size:.95rem;line-height:1}
.flameseal-bijgewerkt{margin:2.2em 0 0;padding-top:14px;border-top:1px solid var(--flameseal-lijn);font-size:var(--flameseal-f-klein);color:var(--flameseal-inkt-2)}
/* Een lange "Op deze pagina" (Privacyverklaring, elf kopjes): blijft op een laag laptopscherm binnen beeld en scrolt dan zelf */
@media (min-width:64em){
  .flameseal-opdezepagina--lang{max-height:calc(100vh - var(--flameseal-balk) - var(--flameseal-kop-h) - 48px);overflow-y:auto;overscroll-behavior:contain}
}
/* ... en is een uitklapper (details, werkt zonder JS): onder 64em dicht, zodat de tekst op de telefoon in het eerste
   scherm begint; vanaf 64em zet het paginascript hem open. Het pijltje zegt dat hij open en dicht kan. Het aantal
   onderwerpen staat er alleen bij zolang hij dicht kan staan (onder 64em). */
.flameseal-opdezepagina--uitklap{padding-block:4px}
.flameseal-opdezepagina--uitklap summary{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;cursor:pointer;list-style:none}
.flameseal-opdezepagina--uitklap summary::-webkit-details-marker{display:none}
.flameseal-opdezepagina--uitklap summary::after{content:"";flex:0 0 auto;width:8px;height:8px;margin:0 4px 0 auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.flameseal-opdezepagina--uitklap details[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.flameseal-opdezepagina--uitklap details[open]>ul{padding-bottom:10px}
/* Dicht: echt weg, geen onzichtbare kolom in de opmaak */
.flameseal-opdezepagina--uitklap details:not([open])>ul{display:none}
.flameseal-opdezepagina__aantal{font-weight:400;color:var(--flameseal-inkt-2)}
@media (min-width:64em){.flameseal-opdezepagina__aantal{display:none}}
/* De tekening van de Disclaimer: klein naast de inleiding (laptop en tablet, hoogstens 180 px hoog); niet op de telefoon */
.flameseal-gebouwen{margin:0;justify-self:end;width:100%;max-width:400px;border-radius:var(--flameseal-r3);overflow:hidden;background:var(--flameseal-lucht-b-licht);box-shadow:var(--flameseal-schaduw-licht)}
.flameseal-gebouwen svg{display:block;width:100%;height:auto}
@media (max-width:47.99em){.flameseal-gebouwen{display:none}}

/* ---------- Over ons: naast de inleiding de kaart van Nederland; daaronder de vestigingszin als opstap (laptop links,
   op de plek van "Op deze pagina" op de dienstpagina's) en de tekst in één leeskolom ---------- */
.flameseal-kaart{margin:0;justify-self:center;width:100%;height:190px;border-radius:var(--flameseal-r2);overflow:hidden;background:radial-gradient(55% 55% at 86% 7%,#FBFDF0 0,rgba(241,247,224,.75) 30%,rgba(241,247,224,0) 100%) var(--flameseal-lucht-a-licht);box-shadow:var(--flameseal-schaduw-licht)}
.flameseal-kaart svg{display:block;width:100%;height:100%}
@media (min-width:48em){.flameseal-kaart{justify-self:end;max-width:400px;height:auto;aspect-ratio:400/320;border-radius:var(--flameseal-r3)}}
.flameseal-over{display:grid;grid-template-columns:minmax(0,1fr);gap:20px 64px;padding-top:clamp(8px,2vw,24px)}
.flameseal-vestiging{position:relative;margin:0;padding-left:36px;max-width:20em;font-family:var(--flameseal-kopletter);font-weight:var(--flameseal-gewicht-kop);font-size:clamp(1.2rem,1.1rem + .5vw,1.45rem);line-height:1.3;color:var(--flameseal-kopkleur);text-wrap:balance}
/* De zeshoek uit de kaart (teal en limoen, wit binnenvlak), als versiering naast de zin */
.flameseal-vestiging::before,.flameseal-vestiging::after{content:"";position:absolute;clip-path:var(--flameseal-zeshoek-clip)}
.flameseal-vestiging::before{left:0;top:.12em;width:22px;height:25px;background:linear-gradient(90deg,var(--flameseal-teal) 50%,var(--flameseal-limoen) 50%)}
.flameseal-vestiging::after{left:6px;top:calc(.12em + 7px);width:10px;height:11px;background:var(--flameseal-wit)}
@media (min-width:64em){
  .flameseal-over{grid-template-columns:minmax(0,15rem) minmax(0,42rem);justify-content:start}
  .flameseal-vestiging{padding-top:4px}
  .flameseal-vestiging::before{top:calc(.12em + 4px)}
  .flameseal-vestiging::after{top:calc(.12em + 11px)}
}

/* ---------- 404: het zijpad naast de tekst (laptop, hoogstens 240 px hoog) of als lage band boven de bordjes
   (telefoon, 150 px); daaronder vier bordjes zoals in de wandeling ---------- */
.flameseal-held--404{padding-top:clamp(24px,4.5vw,64px)}
.flameseal-held--404 .flameseal-intro{margin-bottom:0}
.flameseal-zijpad{margin:0;justify-self:end;width:100%;max-width:400px;border-radius:var(--flameseal-r3);overflow:hidden;background:var(--flameseal-lucht-a-licht);box-shadow:var(--flameseal-schaduw-licht)}
.flameseal-zijpad svg{display:block;width:100%;height:auto;aspect-ratio:400/240}
@media (max-width:47.99em){
  .flameseal-zijpad{border-radius:var(--flameseal-r2)}
  .flameseal-zijpad svg{height:150px;aspect-ratio:auto}
}
.flameseal-wegterug{padding-top:clamp(8px,2vw,24px)}
.flameseal-wegterug h2{margin-bottom:.7em}
.flameseal-wegborden{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;max-width:46rem}
@media (min-width:40em){.flameseal-wegborden{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
.flameseal-wegborden>li{display:flex;min-width:0}
.flameseal-wegbord{display:block;width:100%;padding:14px 18px 15px;background:var(--flameseal-wit);border:1px solid var(--flameseal-lijn);border-radius:var(--flameseal-r2);color:var(--flameseal-inkt);text-decoration:none;box-shadow:var(--flameseal-schaduw);transition:border-color .2s}
.flameseal-wegbord:hover{border-color:var(--flameseal-teal);color:var(--flameseal-inkt)}
.flameseal-wegbord:hover .flameseal-wegbord__titel{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.flameseal-wegbord__titel{display:block;padding-right:1.25em;font-family:var(--flameseal-kopletter);font-weight:var(--flameseal-gewicht-kop);font-size:1.14rem;line-height:1.25;color:var(--flameseal-kopkleur)}
.flameseal-wegbord__titel .flameseal-i{display:inline-block;width:1em;height:1em;margin:0 -1.25em 0 1px;vertical-align:-.14em;color:var(--flameseal-petrol);stroke-width:2.2}
.flameseal-wegbord__zin{display:block;margin-top:3px;font-size:var(--flameseal-f-kaart);line-height:var(--flameseal-rh-kaart);color:var(--flameseal-inkt-2)}
.flameseal-wegterug__direct{margin:24px 0 0;color:var(--flameseal-inkt-2)}
@media (max-width:39.99em){.flameseal-wegbord{padding:12px 15px 13px}}

.flameseal-tip{position:fixed;left:0;top:0;z-index:70;max-width:270px;padding:8px 12px;border-radius:var(--flameseal-r1);background:var(--flameseal-kopkleur);color:var(--flameseal-wit);font-size:.9rem;font-weight:var(--flameseal-gewicht-vet);line-height:1.4;pointer-events:none;box-shadow:var(--flameseal-schaduw)}
.flameseal-tip[hidden]{display:none}
@media (hover:hover) and (pointer:fine){.flameseal-tip-vlakken [data-flameseal-tip],.flameseal-tip-vlakken [data-flameseal-tip-zonder]{cursor:help}}

/* ---------- Telefoon: eigen, compacte opmaak ---------- */
@media (max-width:47.99em){
  /* Iets korter sectieritme op de telefoon (de verhoudingen blijven: dicht < gewoon < rust) */
  .flameseal-pagina{--flameseal-sectie:40px}
  /* Opening van Home: knoppen en de twee regels eronder in het eerste scherm (375 × 553) */
  .flameseal-held--home h1{margin-bottom:.25em}
  .flameseal-held--home .flameseal-intro{line-height:1.45}
  .flameseal-held .flameseal-knoppen{margin-top:10px;gap:8px}
  .flameseal-onder-knoppen{margin-top:4px;gap:0 22px;line-height:1.45}
  .flameseal-wandelmee__tekst .flameseal-knoppen{gap:10px}
  .flameseal-wandelmee__tekst .flameseal-knop{padding-inline:1em}
  .flameseal-lijn{gap:22px;margin:22px 0 18px}
  .flameseal-lijn__deel{bottom:-20px}
}
@media (max-width:39.99em){
  /* Diensten als compacte lijst: pictogram links, rechts de titel en de kaartzin */
  .flameseal-diensten{gap:8px}
  .flameseal-dienst{padding:11px 14px;grid-template-columns:32px minmax(0,1fr);align-items:start}
  .flameseal-dienst .flameseal-badge{width:32px;height:36px;grid-column:1;grid-row:1 / span 2;margin-top:2px}
  .flameseal-dienst:has(.flameseal-label) .flameseal-badge{grid-row:1 / span 3}
  .flameseal-dienst .flameseal-badge .flameseal-i{width:20px;height:20px}
  .flameseal-dienst h3{font-size:var(--flameseal-f-tekst)}
  .flameseal-wegwijzer{margin-top:20px}
  .flameseal-bediening{flex-direction:column;align-items:stretch}
  .flameseal-schakel{display:grid;grid-template-columns:1fr 1fr}
  .flameseal-schakel button{padding:0 8px;font-size:var(--flameseal-f-klein)}
  /* "Opnieuw afspelen" als rond pictogram: bij de honingraat in de lege hoek rechtsboven, bij de installateurs
     naast de stappen. De tekst blijft voor schermlezers. */
  .flameseal-opnieuw--klein{justify-content:center;width:44px;padding:0;background:var(--flameseal-munt)}
  .flameseal-opnieuw--klein .flameseal-opnieuw__tekst{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .flameseal-hr .flameseal-opnieuw--klein{position:absolute;top:8px;right:8px}
}
/* Smalle telefoon: de schakelaar onder elkaar, zodat "Zonder afdichting" niet over twee regels loopt */
@media (max-width:22.49em){
  .flameseal-schakel{grid-template-columns:1fr;border-radius:var(--flameseal-r2)}
  .flameseal-schakel button{border-radius:16px}
}
/* Afbreken onder 360 px: de regel staat nu in het gedeelde blok (alleen lange woorden, nooit in koppen) */

/* ==========================================================================
   Animaties (PLAN §5 B). Het eindbeeld is de basis: zonder JS, bij minder beweging en bij afdrukken staat het stil.
   Wachtstand alleen met JS en zonder minder beweging; afspelen met de klasse flameseal-speelt (gedeeld script, 35 %).
   Alleen transform en opacity. Rustig uitlopen, nooit doorveren, geen lussen.
   Let op (gemeten in Chrome, 07-10-2026): start er ergens op de pagina een CSS-animatie op een SVG-element, dan begint
   Chrome stroke-width- en stroke-dashoffset-animaties in andere SVG's opnieuw (ook als ze al klaar waren). Daarom hier
   geen stroke-animaties: de afdichting ligt vast en de donkere opening krimpt (scale) van de wandrand naar binnen.
   ========================================================================== */
.flameseal-dv-helft-l,.flameseal-dv-helft-r,.flameseal-in-helft-l,.flameseal-in-helft-r,.flameseal-in-buis,.flameseal-zg-helft-l,.flameseal-zg-helft-r,.flameseal-dv-open,.flameseal-in-open,.flameseal-dv-rand,.flameseal-in-rand{transform-box:fill-box;transform-origin:center}
.flameseal-dv-helft-l,.flameseal-in-helft-l,.flameseal-zg-helft-l{--flameseal-afstand:-70px}
.flameseal-dv-helft-r,.flameseal-in-helft-r,.flameseal-zg-helft-r{--flameseal-afstand:70px}
.flameseal-dz-kijk,.flameseal-dz-nieuw,.flameseal-hr-gloed,.flameseal-hr-bol{transform-box:fill-box;transform-origin:center}
/* Plantjes: de bladeren groeien met de gedeelde regels (§2.2); hier alleen de stengels: de tak groeit vanaf de rand,
   de plantstengel vanaf de grond */
.flameseal-tak__steel{transform-box:fill-box;transform-origin:100% 0}
.flameseal-plant__steel{transform-box:fill-box;transform-origin:50% 100%}

/* B1 Honingraat: eindbeeld per stand (de stand staat als data-stand in de HTML; zonder JS "met") */
.flameseal-hr-svg .flameseal-hr-waas{fill:#93A0A1;opacity:0}
.flameseal-hr-svg .flameseal-hr-wolk,.flameseal-hr-svg .flameseal-hr-spoor,.flameseal-hr-svg .flameseal-hr-gloed,.flameseal-hr-svg .flameseal-hr-dicht{opacity:0}
.flameseal-hr[data-stand="zonder"] .flameseal-hr-waas{opacity:.55}
.flameseal-hr[data-stand="zonder"] .flameseal-hr-wolk{opacity:.9}
.flameseal-hr[data-stand="zonder"] .flameseal-hr-spoor{opacity:.8}
.flameseal-hr[data-stand="met"] .flameseal-hr-waas.flameseal-r0{opacity:.55}
.flameseal-hr[data-stand="met"] .flameseal-hr-wolk.flameseal-r0{opacity:.9}
.flameseal-hr[data-stand="met"] .flameseal-hr-dicht{opacity:1}
.flameseal-hr[data-stand="met"] .flameseal-open{opacity:0}
/* B3 Doorvoeringen en B2 installateur: de dichte stand is de basis (geen open ruimte meer). B5 inspectie: oud en kruis weg, nieuw zichtbaar. */
.flameseal-dv-open,.flameseal-in-open{transform:scale(0)}
.flameseal-dz-oud,.flameseal-dz-kruis,.flameseal-dz-kijk{opacity:0}

@media screen and (prefers-reduced-motion:no-preference){
  /* ---- B1 Honingraat. Wachtstand: nog geen rook tot de reeks begint. Alleen als het eigen script van de honingraat
     draait (klasse flameseal-hr-klaar); laadt dat script niet, dan staat het eindbeeld "met" er gewoon. ---- */
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-hr.flameseal-hr-klaar:not(.flameseal-gestart) :is(.flameseal-hr-waas,.flameseal-hr-wolk,.flameseal-hr-spoor){opacity:0}
  /* Beide standen: de rook begint in de middelste cel */
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-hr.flameseal-speelt :is(.flameseal-hr-waas,.flameseal-hr-wolk).flameseal-r0{animation:flameseal-in 1s ease-out .1s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-hr.flameseal-speelt .flameseal-hr-wolk.flameseal-r0 .flameseal-hr-bol{animation:flameseal-bol 1.4s var(--flameseal-zacht) .1s both}
  /* Zonder afdichting: als waas langs de leidingen, door de open doorvoeringen, naar de cellen ernaast en verder */
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-hr.flameseal-speelt[data-stand="zonder"] .flameseal-hr-spoor.flameseal-r1{animation:flameseal-in .7s ease-out .8s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-hr.flameseal-speelt[data-stand="zonder"] :is(.flameseal-hr-waas,.flameseal-hr-wolk).flameseal-r1{animation:flameseal-in .9s ease-out 1.2s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-hr.flameseal-speelt[data-stand="zonder"] .flameseal-hr-wolk.flameseal-r1 .flameseal-hr-bol{animation:flameseal-bol 1.2s var(--flameseal-zacht) 1.2s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-hr.flameseal-speelt[data-stand="zonder"] .flameseal-hr-spoor.flameseal-r2{animation:flameseal-in .7s ease-out 1.8s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-hr.flameseal-speelt[data-stand="zonder"] :is(.flameseal-hr-waas,.flameseal-hr-wolk).flameseal-r2{animation:flameseal-in .9s ease-out 2.2s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-hr.flameseal-speelt[data-stand="zonder"] .flameseal-hr-wolk.flameseal-r2 .flameseal-hr-bol{animation:flameseal-bol 1.2s var(--flameseal-zacht) 2.2s both}
  /* Met afdichting: de afdichtingen zitten er vanaf het eerste beeld; alleen de rook beweegt en blijft in één cel.
     Bij elke afdichting van die cel licht de rand één keer op. */
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-hr.flameseal-speelt[data-stand="met"] .flameseal-hr-gloed{animation:flameseal-gloed 1.1s ease-out calc(1.1s + var(--flameseal-n,0) * .18s) both}

  /* ---- B2 Voor installateurs: de buis gaat door de wand, daarna vult de afdichting de opening van de rand naar de
     buis, de rand tekent zich en de zeshoek sluit ---- */
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-in-buis{opacity:0;transform:translateX(-170px)}
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-in-open{transform:none}
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-in-korrels{opacity:0}
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-in-rand{opacity:0}
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) :is(.flameseal-in-helft-l,.flameseal-in-helft-r){opacity:0;transform:translateX(var(--flameseal-afstand))}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-in-buis{animation:flameseal-in-buis 1.1s var(--flameseal-zacht) .2s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-in-open{animation:flameseal-dicht 1.5s var(--flameseal-zacht) 1.4s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-in-korrels{animation:flameseal-in .6s ease-out 2.6s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-in-rand{animation:flameseal-rand .8s var(--flameseal-zacht) 2.5s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt :is(.flameseal-in-helft-l,.flameseal-in-helft-r){animation:flameseal-schuif 1s var(--flameseal-zacht) 3.1s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-duo-a::before{animation:flameseal-licht 1.4s ease .2s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-duo-b::before{animation:flameseal-licht 1.8s ease 1.4s both}

  /* ---- B3 Doorvoeringen: de afdichting sluit de opening rond buis en kabels, recht van voren ---- */
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-dv-open{transform:none}
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-dv-korrels{opacity:0}
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-dv-rand{opacity:0}
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) :is(.flameseal-dv-helft-l,.flameseal-dv-helft-r){opacity:0;transform:translateX(var(--flameseal-afstand))}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-dv-open{animation:flameseal-dicht 1.8s var(--flameseal-zacht) .35s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-dv-korrels{animation:flameseal-in .6s ease-out 1.9s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-dv-rand{animation:flameseal-rand .9s var(--flameseal-zacht) 1.75s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt :is(.flameseal-dv-helft-l,.flameseal-dv-helft-r){animation:flameseal-schuif 1s var(--flameseal-zacht) 2.5s both}

  /* ---- B5 Eerst inspecteren: een ring loopt langs de afdichtingen; twee krijgen een kruisje en alleen die worden
     vervangen (oud weg, open, nieuw met rand); de rest blijft precies zoals hij was ---- */
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-dz-oud{opacity:1}
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-dz-nieuw{opacity:0}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-dz-kijk{animation:flameseal-kijk .6s ease-out calc(var(--flameseal-n) * .25s + .2s) both}
  /* De kruisjes komen pas als de ring langs alle afdichtingen is geweest, gelijk met "Afkeuren" */
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-dz-kruis-in{animation:flameseal-in .3s ease-out calc(var(--flameseal-n) * .05s + 2.25s) both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-dz-kruis{animation:flameseal-weg .4s ease-in 3.3s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-dz-oud{animation:flameseal-weg .4s ease-in 3.3s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-dz-nieuw{animation:flameseal-nieuw .8s var(--flameseal-zacht) 3.85s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-dz-stap-1::after{animation:flameseal-licht 2.3s ease .1s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-dz-stap-2::after{animation:flameseal-licht 1.2s ease 2.2s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-dz-stap-3::after{animation:flameseal-licht 1.6s ease 3.3s both}

  /* ---- B9 Plantjes (Home: opening en tak; Waarom duurzaam: de plant naast het gebouw). Eén keer, zacht uitlopend,
     niet verend. De bladeren volgen de gedeelde regels (§2.2, zelfde groei als in de wandeling); hier de stengels. ---- */
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-tak__steel{opacity:0;transform:scale(.25)}
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-plant__steel{opacity:0;transform:scaleY(.08)}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-tak__steel{animation:flameseal-uitloop 1.6s var(--flameseal-zacht) .15s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-plant__steel{animation:flameseal-opgroei 1.4s var(--flameseal-zacht) .3s both}

  /* ---- B6 Opening Waarom duurzaam: de teal en de limoen helft schuiven één keer naar elkaar toe ---- */
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) :is(.flameseal-zg-helft-l,.flameseal-zg-helft-r){opacity:0;transform:translateX(var(--flameseal-afstand))}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt :is(.flameseal-zg-helft-l,.flameseal-zg-helft-r){animation:flameseal-schuif 1s var(--flameseal-zacht) .2s both}
}
/* ---- B4 De lijn groeit één keer: de duurzame lijn op Waarom duurzaam (Klant, Werknemer, Oplevering) en de lijn van
   "Zo werken wij" op Home. De knopen staan er al. Onder elkaar (telefoon en tablet) start elk stuk apart, zodra zijn
   eigen punt in beeld komt (data-flameseal-speel op de <li>); naast elkaar (laptop) start de hele lijn tegelijk, stuk
   voor stuk (data-flameseal-speel op de <ol>). ---- */
@media screen and (prefers-reduced-motion:no-preference) and (max-width:63.99em){
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-lijn--groot>li[data-flameseal-speel]:not(.flameseal-speelt) .flameseal-lijn__deel{transform:scaleY(0)}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-lijn--groot>li.flameseal-speelt .flameseal-lijn__deel{transition:transform .8s var(--flameseal-zacht) .3s}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-stappen>li[data-flameseal-speel]:not(.flameseal-speelt)::after{transform:scaleY(0)}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-stappen>li.flameseal-speelt::after{transition:transform .8s var(--flameseal-zacht) .3s}
}
@media screen and (prefers-reduced-motion:no-preference) and (min-width:64em){
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-lijn--groot[data-flameseal-speel]:not(.flameseal-speelt) .flameseal-lijn__deel{transform:scaleX(0)}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-lijn--groot.flameseal-speelt .flameseal-lijn__deel{transition:transform .8s var(--flameseal-zacht) .2s}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-lijn--groot.flameseal-speelt>li+li .flameseal-lijn__deel{transition-delay:1s}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-stappen[data-flameseal-speel]:not(.flameseal-speelt)>li::after{transform:scaleX(0)}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-stappen.flameseal-speelt>li::after{transition:transform .7s var(--flameseal-zacht) .2s}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-stappen.flameseal-speelt>li:nth-child(2)::after{transition-delay:.9s}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-stappen.flameseal-speelt>li:nth-child(3)::after{transition-delay:1.6s}
}

/* ---- B10–B16 De tekeningen van Diensten en de zes dienstpagina's (deel 1, 09-10-2026). Bouwstenen voor alle zeven:
   elk bewegend deel krijgt één klasse en zijn eigen vertraging (--flameseal-d) en zo nodig duur (--flameseal-looptijd; niet --flameseal-duur, dat is een vaste maat in het gedeelde blok).
   flameseal-t-dicht: de donkere opening krimpt van de rand naar de leiding (de afdichting eronder komt in beeld);
   flameseal-t-rand: de limoen rand van een afdichting; flameseal-t-in: verschijnt; flameseal-t-gat: een nieuwe opening
   verschijnt; flameseal-t-op: komt 8 px (--flameseal-dy) omhoog; flameseal-t-voren: verschijnt op zijn plek alsof hij
   naar voren komt (een buis dwars door een wand);
   flameseal-t-x en -y: groeit vanaf een rand; flameseal-t-weg: verdwijnt (de schets); flameseal-arm: een arm van de
   wegwijzer klapt uit vanaf de paal. Het eindbeeld is de gewone stand. ---- */
.flameseal-t-dicht,.flameseal-t-gat,.flameseal-t-voren,.flameseal-t-rand,.flameseal-t-x,.flameseal-t-y,.flameseal-arm{transform-box:fill-box;transform-origin:50% 50%}
.flameseal-t-x,.flameseal-arm--r{transform-origin:0 50%}
.flameseal-t-x.flameseal-t-vanrechts,.flameseal-arm--l{transform-origin:100% 50%}
.flameseal-t-y{transform-origin:50% 100%}
.flameseal-t-y.flameseal-t-vanboven{transform-origin:50% 0}
.flameseal-t-dicht{transform:scale(0)}
.flameseal-t-weg{opacity:0}
.flameseal-cert-oud{opacity:.7}
@media screen and (prefers-reduced-motion:no-preference){
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-t-dicht{transform:none}
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) :is(.flameseal-t-in,.flameseal-t-rand,.flameseal-t-loep){opacity:0}
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-t-gat{opacity:0;transform:scale(.55)}
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-t-op{opacity:0;transform:translateY(var(--flameseal-dy,8px))}
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-t-voren{opacity:0;transform:scale(.6)}
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-t-x{transform:scaleX(0)}
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-t-y{transform:scaleY(0)}
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-t-weg{opacity:1}
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-arm{transform:scaleX(.15)}
  :root.flameseal-js-anim:not(.flameseal-minder) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-cert-oud{opacity:1}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-t-dicht{animation:flameseal-dicht var(--flameseal-looptijd,1.2s) var(--flameseal-zacht) var(--flameseal-d,0s) both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-t-in{animation:flameseal-in var(--flameseal-looptijd,.5s) ease-out var(--flameseal-d,0s) both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-t-rand{animation:flameseal-rand var(--flameseal-looptijd,.8s) var(--flameseal-zacht) var(--flameseal-d,0s) both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-t-gat{animation:flameseal-gat var(--flameseal-looptijd,.9s) var(--flameseal-zacht) var(--flameseal-d,0s) both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-t-op{animation:flameseal-op var(--flameseal-looptijd,.5s) var(--flameseal-zacht) var(--flameseal-d,0s) both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-t-voren{animation:flameseal-nieuw var(--flameseal-looptijd,.8s) var(--flameseal-zacht) var(--flameseal-d,0s) both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-t-x{animation:flameseal-x var(--flameseal-looptijd,.6s) var(--flameseal-zacht) var(--flameseal-d,0s) both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-t-y{animation:flameseal-y var(--flameseal-looptijd,1s) var(--flameseal-zacht) var(--flameseal-d,0s) both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-t-weg{animation:flameseal-weg var(--flameseal-looptijd,.6s) ease-in-out var(--flameseal-d,0s) both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt:not(.flameseal-stil) .flameseal-arm{animation:flameseal-arm .6s var(--flameseal-zacht) var(--flameseal-d,0s) both}
  /* Een lijn die uit korte staafjes bestaat (de kaart op Over ons, het zijpad op de 404), groeit in één doorgaande beweging */
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-t-lijn{animation-timing-function:linear}
  /* (Her)certificering: het eerdere blad wordt lichter als het nieuwe ervoor komt */
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-cert-oud{animation:flameseal-lichter 1s ease-in-out 1.5s both}
  /* De loep: kijkt eerst, en blijft dan in rust staan (Advies & inspectie en (Her)certificering) */
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-insp-loep{animation:flameseal-insp-loep 3.3s var(--flameseal-zacht) .2s both}
  :root.flameseal-js-anim:not(.flameseal-minder) .flameseal-speelt .flameseal-cert-loep{animation:flameseal-cert-loep 1.4s var(--flameseal-zacht) .1s both}
}
@keyframes flameseal-gat{from{opacity:0;transform:scale(.55)}}
@keyframes flameseal-op{from{opacity:0;transform:translateY(var(--flameseal-dy,8px))}}
@keyframes flameseal-x{from{transform:scaleX(0)}}
@keyframes flameseal-y{from{transform:scaleY(0)}}
@keyframes flameseal-arm{from{transform:scaleX(.15)}}
@keyframes flameseal-lichter{from{opacity:1}}
/* Van de lege wand links, via het pad, naar de buis en de kabelbundel rechts; daarna naar de rustplek naast de wand */
@keyframes flameseal-insp-loep{
  0%{opacity:0;transform:translate(-306px,-48px)}
  12%{opacity:1;transform:translate(-306px,-48px)}
  36%{transform:translate(-236px,-48px)}
  64%{transform:translate(-100px,-56px)}
  73%{transform:translate(-100px,-56px)}
  80%{transform:translate(-54px,-26px)}
  89%{transform:translate(-54px,-26px)}
  100%{opacity:1;transform:none}
}
/* Naast de zeshoek verschijnen, over de afdichting, even stil, en dan naar de rustplek onder de zeshoek */
@keyframes flameseal-cert-loep{
  0%{opacity:0;transform:translate(86px,-104px)}
  28%{opacity:1;transform:translate(86px,-104px)}
  54%{transform:translate(14px,-98px)}
  82%{transform:translate(14px,-98px)}
  100%{opacity:1;transform:none}
}
@keyframes flameseal-in{from{opacity:0}}
@keyframes flameseal-weg{from{opacity:1}to{opacity:0}}
@keyframes flameseal-bol{from{transform:scale(.35)}}
@keyframes flameseal-gloed{0%{opacity:0;transform:scale(.7)}30%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
@keyframes flameseal-dicht{from{transform:scale(1)}to{transform:scale(0)}}
@keyframes flameseal-rand{from{opacity:0;transform:scale(1.06)}}
@keyframes flameseal-schuif{from{opacity:0;transform:translateX(var(--flameseal-afstand))}}
@keyframes flameseal-in-buis{from{opacity:0;transform:translateX(-170px)}}
@keyframes flameseal-licht{0%{opacity:0}20%,80%{opacity:1}100%{opacity:0}}
@keyframes flameseal-kijk{0%{opacity:0;transform:scale(.7)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}
@keyframes flameseal-nieuw{from{opacity:0;transform:scale(.6)}}
@keyframes flameseal-uitloop{from{opacity:0;transform:scale(.25)}}
@keyframes flameseal-opgroei{from{opacity:0;transform:scaleY(.08)}}

/* ---------- Contrastmodus ---------- */
@media (forced-colors:active){
  .flameseal-schakel,.flameseal-keuze,.flameseal-dienst,.flameseal-label,.flameseal-notitie,.flameseal-chip{border:2px solid ButtonText}
  .flameseal-schakel button[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .flameseal-figuur>svg,.flameseal-prent,.flameseal-speerpunt__foto,.flameseal-plantvlak,.flameseal-zeshoekvlak,.flameseal-afsluiter__decor,.flameseal-foto,.flameseal-ai-label,.flameseal-badge,.flameseal-stap-nr,.flameseal-lijn>li,.flameseal-dz-stap::before,.flameseal-horizonrand,.flameseal-splitsing,.flameseal-leestekst li::before{forced-color-adjust:none}
  .flameseal-figuur>svg,.flameseal-zeshoekvlak{background:#fff}
  .flameseal-blaadjes,.flameseal-tak{display:none}
  .flameseal-ai-label{outline:1px solid #fff}
  .flameseal-figuur{border:1px solid CanvasText}
  .flameseal-dienst:has(a:focus-visible){outline:3px solid Highlight}
}

/* ---------- Afdrukken ---------- */
@media print{
  .flameseal-tip,.flameseal-bediening,.flameseal-opnieuw,.flameseal-lees-meer,.flameseal-afsluiter__decor,.flameseal-knoppen,.flameseal-wegwijzer,.flameseal-verstuur-rij .flameseal-knop,.flameseal-horizonrand,.flameseal-blaadjes,.flameseal-tak{display:none!important}
  .flameseal-meer-tekst{display:block!important}
  /* Eindbeelden op papier: de naad gesloten (de wachtstanden van de tekeningen gelden alleen op het scherm) */
  .flameseal-naad::before,.flameseal-naad::after,.flameseal-naad span{transform:none!important;opacity:1!important}
  .flameseal-status__maat{display:none}
  .flameseal-sectie,.flameseal-held{padding-block:14pt}
  .flameseal-held::before{display:none}
  .flameseal-sectie,.flameseal-afsluiter__kaart,.flameseal-oproep__kaart,.flameseal-contactkaart,.flameseal-opdezepagina,.flameseal-dienst,.flameseal-notitie,.flameseal-zeshoekvlak{background:#fff!important;border:1px solid #999;box-shadow:none}
  .flameseal-figuur{box-shadow:none;border:1px solid #999}
  .flameseal-held__foto{aspect-ratio:auto;max-height:6cm}
  .flameseal-dienst,.flameseal-stappen li,.flameseal-figuur,.flameseal-notitie,.flameseal-afsluiter__kaart,.flameseal-oproep__kaart,.flameseal-lijn li{break-inside:avoid}
}
/* ---------- Deel 2: contrastmodus en afdrukken ---------- */
@media (forced-colors:active){
  .flameseal-kaart,.flameseal-zijpad,.flameseal-gebouwen{forced-color-adjust:none;border:1px solid CanvasText}
  .flameseal-wegbord{border:1px solid CanvasText}
  .flameseal-turnstile-plek{border-color:GrayText;color:GrayText}
}
@media print{
  .flameseal-gebouwen,.flameseal-formulier__turnstile{display:none!important}
  .flameseal-kaart,.flameseal-zijpad{box-shadow:none;border:1px solid #999}
  .flameseal-opdezepagina--lang{max-height:none;overflow:visible}
  .flameseal-wegbord{box-shadow:none;border:1px solid #999}
  .flameseal-wegborden>li,.flameseal-leestekst ol>li{break-inside:avoid}
}
/* ==== Einde deel 2 ==== */

/* ==== Deel 3: aanvulling voor WordPress (alleen eigen klassen, de klassen van de kern uit API.md §5 en die van
   WordPress en Contact Form 7). Zelfde tokens en maten als deel 1 en 2. ==== */

/* ---------- De kop met het echte aantal menu-items (LESSEN §4.6). Vanaf 78em staat het volledige menu in de kop. Past
   dat niet naast logo, telefoon en offerteknop (acht items, een schuifbalk, grotere letters), dan meet het paginascript
   dat en zet het eerst het telefoonnummer als rond pictogram (flameseal-tel-rond) en anders het menu achter de knop
   Menu (flameseal-menu-klap), precies zoals onder 78em. Zonder JavaScript loopt de kop door op een tweede regel. Het
   logo wordt nooit vervormd: krijgt het minder ruimte, dan wordt het als geheel kleiner. ---------- */
.flameseal-logo img{object-fit:contain;object-position:0 50%}
html:not(.flameseal-js) .flameseal-kop-binnen{flex-wrap:wrap}
.flameseal-kop.flameseal-tel-rond .flameseal-kop-tel{border:2px solid var(--flameseal-petrol);padding:0;width:44px;height:44px}
.flameseal-kop.flameseal-tel-rond .flameseal-kop-tel-nummer{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.flameseal-js .flameseal-kop.flameseal-menu-klap .flameseal-menuknop{display:inline-flex}
.flameseal-js .flameseal-kop.flameseal-menu-klap .flameseal-hoofdmenu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--flameseal-wit);border-bottom:1px solid var(--flameseal-lijn);box-shadow:0 18px 30px -20px rgba(11,63,72,.4);padding:6px var(--flameseal-gutter) 20px;max-height:calc(100dvh - var(--flameseal-kop-h) - var(--flameseal-balk));overflow-y:auto}
.flameseal-js .flameseal-kop.flameseal-menu-klap.flameseal-open .flameseal-hoofdmenu{display:block}
.flameseal-js .flameseal-kop.flameseal-menu-klap .flameseal-hoofdmenu ul{flex-direction:column;gap:0;max-width:40rem;margin-inline:auto}
.flameseal-js .flameseal-kop.flameseal-menu-klap .flameseal-hoofdmenu ul a{min-height:50px;font-size:1.08rem;border-radius:0;border-bottom:1px solid var(--flameseal-salie-licht)}
.flameseal-js .flameseal-kop.flameseal-menu-klap .flameseal-menu-extra{display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:40rem;margin:16px auto 0}
.flameseal-kop.flameseal-menu-klap .flameseal-menu-extra a:not(.flameseal-knop){display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:var(--flameseal-gewicht-vet)}

/* ---------- Het aanvraagformulier (Contact). De opbouw komt van de kern (API.md §3); de witte kaart is het omhulsel van
   het sjabloon (.flameseal-aanvraagkaart), zodat ook de melding van Contact Form 7 in de kaart staat. De opmaak van CF7
   laadt soms na deze opmaak: daarom beginnen de regels die met CF7 botsen met .flameseal-aanvraag. ---------- */
.flameseal-aanvraagkaart{min-width:0;background:var(--flameseal-wit);border:1px solid var(--flameseal-lijn);border-radius:var(--flameseal-r3);padding:clamp(18px,4vw,40px)}
.flameseal-aanvraagkaart .flameseal-formulier{background:none;border:0;border-radius:0;padding:0}
@media (max-width:23.12em){
  .flameseal-aanvraagkaart{margin-inline:calc(-1 * var(--flameseal-gutter));border-inline:0;border-radius:0;padding-inline:var(--flameseal-gutter)}
  .flameseal-aanvraagkaart .flameseal-formulier{margin-inline:0;padding-inline:0}
}
.flameseal-formulier__verplicht{font-weight:400;color:var(--flameseal-inkt-2);font-size:var(--flameseal-f-klein)}
.flameseal-formulier__hint{display:block;margin:2px 0 8px;font-size:var(--flameseal-f-kaart);line-height:var(--flameseal-rh-kaart);color:var(--flameseal-inkt-2)}
.flameseal-formulier__veld{margin:0 0 20px;min-width:0}
.flameseal-formulier__veld>label{display:block;font-weight:var(--flameseal-gewicht-vet);color:var(--flameseal-kopkleur)}
/* Wat de automatische alinea's van CF7 eventueel toevoegen, telt niet mee in de opmaak */
.flameseal-formulier fieldset>p:not([class]){margin:0}
.flameseal-formulier__veld>br,.flameseal-formulier fieldset br{display:none}
.flameseal-aanvraag .flameseal-formulier .wpcf7-form-control-wrap{display:block}
.flameseal-formulier__velden{display:grid;grid-template-columns:minmax(0,1fr);gap:0 24px}
@media (min-width:48em){
  .flameseal-formulier__velden{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Naam, uitleg en veld per rij gelijk, ook als een uitleg twee regels heeft */
  .flameseal-formulier__velden .flameseal-formulier__veld{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
}
/* De vier soorten als kaartjes, de onderwerpen als vinkjes (zoals in het ontwerp) */
.flameseal-aanvraag .flameseal-formulier .wpcf7-list-item{display:block;margin:0}
.flameseal-formulier__soort .wpcf7-radio{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:8px}
@media (min-width:30em){.flameseal-formulier__soort .wpcf7-radio{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flameseal-aanvraag .flameseal-formulier__soort .wpcf7-list-item{display:flex}
.flameseal-formulier__keuze{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;align-items:start;width:100%;min-height:56px;padding:12px 14px;border:1.5px solid var(--flameseal-lijn);border-radius:var(--flameseal-r1);cursor:pointer}
.flameseal-formulier__keuze:has(input:checked){border-color:var(--flameseal-petrol);background:var(--flameseal-munt)}
.flameseal-formulier__keuze>input{grid-row:1 / span 2}
.flameseal-formulier__keuzenaam{display:block;font-weight:var(--flameseal-gewicht-vet);color:var(--flameseal-kopkleur)}
.flameseal-formulier__keuzeuitleg{display:block;grid-column:2;color:var(--flameseal-inkt-2);font-size:var(--flameseal-f-kaart);line-height:var(--flameseal-rh-kaart)}
.flameseal-formulier__onderwerp .wpcf7-checkbox{display:grid;grid-template-columns:minmax(0,1fr);gap:0 18px}
@media (min-width:40em){.flameseal-formulier__onderwerp .wpcf7-checkbox{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flameseal-formulier__onderwerp label{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:8px 0;cursor:pointer}
/* Bijlagen: de uitleg bovenaan, dan de velden. Draait het paginascript, dan verschijnt veld 2 pas als veld 1 een bestand
   heeft (en veld 3 na veld 2); zonder JavaScript staan ze er alle drie. */
.flameseal-formulier__bijlagen{margin:0 0 20px}
.flameseal-formulier__bijlagen .flameseal-formulier__veld{margin-bottom:12px}
.flameseal-bijlagen-stap .flameseal-formulier__bijlage:not(.flameseal-formulier__bijlage--1):not(.flameseal-zichtbaar){display:none}
.flameseal-formulier__privacy{margin:0 0 16px;font-size:var(--flameseal-f-kaart);line-height:1.55;color:var(--flameseal-inkt-2)}
.flameseal-formulier__turnstile:not(:has(*)){display:none}
.flameseal-formulier__verstuur{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:6px 0 0}
.flameseal-aanvraag .wpcf7-submit{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.62em 1.25em;border:2px solid var(--flameseal-limoen);border-radius:var(--flameseal-pil);background:var(--flameseal-limoen);color:var(--flameseal-inkt);font:inherit;font-weight:var(--flameseal-gewicht-vet);font-size:1rem;line-height:1.2;cursor:pointer;transition:background-color .2s,border-color .2s}
.flameseal-aanvraag .wpcf7-submit:hover{background:var(--flameseal-limoen-licht);border-color:var(--flameseal-limoen-licht)}
.flameseal-aanvraag .wpcf7-submit:disabled{cursor:not-allowed}
/* De draaier van CF7 alleen tijdens het versturen (anders draait hij onzichtbaar door) */
.flameseal-aanvraag .wpcf7 .wpcf7-spinner{display:none;margin:0}
.flameseal-aanvraag .wpcf7 form.submitting .wpcf7-spinner{display:inline-block}
/* Fouten: een duidelijke rand en de foutregel in donkerrood (9,1:1 op wit, ruim 8:1 op munt) */
.flameseal-aanvraag .flameseal-formulier :is(input,textarea).wpcf7-not-valid{border-color:#8A1F1F;border-width:2px}
.flameseal-aanvraag .wpcf7-not-valid .flameseal-formulier__keuze{border-color:#8A1F1F}
.flameseal-aanvraag .wpcf7-not-valid-tip{display:block;margin:6px 0 0;color:#8A1F1F;font-size:var(--flameseal-f-kaart);font-weight:var(--flameseal-gewicht-vet);line-height:var(--flameseal-rh-kaart)}
.flameseal-aanvraag .wpcf7 form .wpcf7-response-output{margin:16px 0 0;padding:12px 16px;border:2px solid var(--flameseal-lijn);border-radius:var(--flameseal-r1);background:var(--flameseal-munt);color:var(--flameseal-inkt);font-weight:var(--flameseal-gewicht-vet)}
.flameseal-aanvraag .wpcf7 form.sent .wpcf7-response-output{border-color:var(--flameseal-petrol)}
.flameseal-aanvraag .wpcf7 form:is(.invalid,.unaccepted,.payment-required,.failed,.aborted,.spam) .wpcf7-response-output{border-color:#8A1F1F;background:#FBF1F1}
/* Na het versturen: wat er verstuurd is, zonder persoonsgegevens (assets/js/pagina.js) */
.flameseal-verstuurd{margin:16px 0 0;padding:14px 18px;border-radius:var(--flameseal-r1);background:var(--flameseal-munt)}
.flameseal-verstuurd h3{margin:0 0 8px;font-size:var(--flameseal-f-h3)}
.flameseal-verstuurd dl{display:grid;gap:4px;margin:0}
.flameseal-verstuurd dl>div{display:grid;grid-template-columns:minmax(0,1fr);gap:0 12px}
@media (min-width:30em){.flameseal-verstuurd dl>div{grid-template-columns:minmax(0,11em) minmax(0,1fr)}}
.flameseal-verstuurd dt{font-weight:var(--flameseal-gewicht-vet);color:var(--flameseal-kopkleur)}
.flameseal-verstuurd dd{margin:0;overflow-wrap:anywhere}
/* Werkt het formulier niet, dan de reservemelding van de kern met e-mail en telefoon */
.flameseal-formulier-reserve{margin:0;padding:14px 18px;border-radius:var(--flameseal-r1);background:var(--flameseal-munt);font-weight:var(--flameseal-gewicht-vet)}
/* Zonder formulier staat alleen "Direct contact" in de kolom */
@media (min-width:64em){.flameseal-contact-raster--zonder-formulier{grid-template-columns:minmax(0,40rem)}}

/* ---------- [flameseal_contactgegevens] in "Direct contact": per rij een pictogram, de soort en de gegevens ---------- */
.flameseal-contactgegevens{display:grid;gap:14px;margin:0 0 16px}
.flameseal-contactgegevens__rij{position:relative;min-width:0;padding-left:34px}
.flameseal-contactgegevens__rij::before{content:"";position:absolute;left:0;top:4px;width:22px;height:22px;background:var(--flameseal-petrol);-webkit-mask:var(--flameseal-icoon,var(--flameseal-zeshoek)) center/contain no-repeat;mask:var(--flameseal-icoon,var(--flameseal-zeshoek)) center/contain no-repeat}
.flameseal-contactgegevens dt{font-size:var(--flameseal-f-klein);font-weight:var(--flameseal-gewicht-vet);color:var(--flameseal-inkt-2)}
.flameseal-contactgegevens dd{margin:0}
.flameseal-contactgegevens dd a{display:inline-flex;align-items:center;min-height:44px;font-weight:var(--flameseal-gewicht-vet);font-size:var(--flameseal-f-tekst)}
.flameseal-contactgegevens__rij--telefoon{--flameseal-icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.4 3.6h3.1l1.5 4.1-2.1 1.4a11.5 11.5 0 0 0 7 7l1.4-2.1 4.1 1.5v3.1a1.9 1.9 0 0 1-2 1.9A16.6 16.6 0 0 1 3.5 5.6a1.9 1.9 0 0 1 1.9-2z'/%3E%3C/svg%3E")}
.flameseal-contactgegevens__rij--email{--flameseal-icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.2'/%3E%3Cpath d='M3.8 7l8.2 6.2L20.2 7'/%3E%3C/svg%3E")}
.flameseal-contactgegevens__rij--adres{--flameseal-icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s-6.6-6-6.6-11.3a6.6 6.6 0 0 1 13.2 0c0 5.3-6.6 11.3-6.6 11.3z'/%3E%3Ccircle cx='12' cy='9.9' r='2.5'/%3E%3C/svg%3E")}
.flameseal-contactgegevens__rij--werkgebied{--flameseal-icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.2L9 4l6 2.2L20.5 4v13.8L15 20l-6-2.2-5.5 2.2z'/%3E%3Cpath d='M9 4v13.8M15 6.2V20'/%3E%3C/svg%3E")}
.flameseal-contactgegevens__rij--openingstijden{--flameseal-icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 7.4V12l3.2 2'/%3E%3C/svg%3E")}

/* ---------- Vacatures ([flameseal_vacatures] op Werken bij) en één vacature ---------- */
.flameseal-vacatures{list-style:none;margin:1em 0 1.6em;padding:0;display:grid;gap:12px}
.flameseal-leestekst .flameseal-vacatures>li{position:relative;margin:0;padding:14px 18px 15px;background:var(--flameseal-wit);border:1px solid var(--flameseal-lijn);border-radius:var(--flameseal-r2);box-shadow:var(--flameseal-schaduw);transition:border-color .2s}
.flameseal-leestekst .flameseal-vacatures>li::before{content:none}
.flameseal-leestekst .flameseal-vacatures>li:hover{border-color:var(--flameseal-teal)}
.flameseal-vacatures__item>a{font-family:var(--flameseal-kopletter);font-weight:var(--flameseal-gewicht-kop);font-size:1.14rem;line-height:1.25}
/* De hele kaart is het tikdoel */
.flameseal-vacatures__item>a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.flameseal-vacatures__gegevens{display:block;margin-top:3px;font-size:var(--flameseal-f-kaart);line-height:var(--flameseal-rh-kaart);color:var(--flameseal-inkt-2)}
.flameseal-melding{display:table;margin:16px 0 0;padding:8px 14px;border-radius:var(--flameseal-r1);background:var(--flameseal-limoen-zacht);color:var(--flameseal-inkt);font-weight:var(--flameseal-gewicht-vet)}

/* ---------- Projecten: kaarten op /projecten/, de keuze per dienst en één project ---------- */
.flameseal-projectkeuze{margin-bottom:20px}
.flameseal-projecten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:40em){.flameseal-projecten{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:64em){.flameseal-projecten{grid-template-columns:repeat(3,minmax(0,1fr))}}
.flameseal-projecten>li{display:flex;min-width:0}
.flameseal-project{position:relative;display:flex;flex-direction:column;width:100%;padding:0 0 18px;overflow:hidden;background:var(--flameseal-munt);border:2px solid transparent;border-radius:var(--flameseal-r2);transition:border-color .2s}
.flameseal-project--link:hover,.flameseal-project--link:focus-within{border-color:var(--flameseal-teal)}
.flameseal-project--link:has(a:focus-visible){outline:3px solid var(--flameseal-inkt);outline-offset:3px}
.flameseal-project--link a:focus-visible{outline:none}
.flameseal-project__beeld{display:grid;place-items:center;aspect-ratio:4/3;margin-bottom:14px;background:var(--flameseal-munt-2)}
.flameseal-project__beeld img{display:block;width:100%;height:100%;object-fit:cover}
.flameseal-project__beeld .flameseal-badge{background:var(--flameseal-wit)}
.flameseal-project>:not(.flameseal-project__beeld){margin-inline:18px}
.flameseal-project h3{margin-bottom:4px;font-size:var(--flameseal-f-h3)}
.flameseal-project h3 a{color:inherit;text-decoration:none}
.flameseal-project h3 a::after{content:"";position:absolute;inset:0}
.flameseal-project__gegevens{margin-bottom:6px;font-size:var(--flameseal-f-klein);font-weight:var(--flameseal-gewicht-vet);color:var(--flameseal-inkt-2)}
.flameseal-project>p:not(.flameseal-project__gegevens){color:var(--flameseal-inkt-2);font-size:var(--flameseal-f-kaart);line-height:var(--flameseal-rh-kaart)}
.flameseal-project>p:last-child{margin-bottom:0}
.flameseal-project__foto{aspect-ratio:16/9}
.flameseal-gegevens{display:flex;flex-wrap:wrap;gap:8px 28px;margin:18px 0 0}
.flameseal-gegevens>div{min-width:0}
.flameseal-gegevens dt{font-size:var(--flameseal-f-klein);font-weight:var(--flameseal-gewicht-vet);color:var(--flameseal-inkt-2)}
.flameseal-gegevens dd{margin:0;font-weight:var(--flameseal-gewicht-vet);color:var(--flameseal-kopkleur)}
.flameseal-galerij{list-style:none;margin:1em 0 1.6em;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.flameseal-leestekst .flameseal-galerij>li{margin:0;padding:0}
.flameseal-leestekst .flameseal-galerij>li::before{content:none}
.flameseal-galerij a{display:block;overflow:hidden;border-radius:var(--flameseal-r2);background:var(--flameseal-salie-licht)}
.flameseal-galerij img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* ---------- Dienstpagina's: stappen, veelgestelde vragen en de notitie bij de oplevering in de leestekst ---------- */
.flameseal-leestekst .flameseal-stappenlijst>li{padding-left:42px;margin-bottom:1.1em}
.flameseal-leestekst .flameseal-stappenlijst h3{margin:0 0 .25em;font-size:var(--flameseal-f-h3)}
.flameseal-leestekst .flameseal-stappenlijst p{margin:0 0 .5em}
.flameseal-leestekst .flameseal-stappenlijst li>p:last-child{margin-bottom:0}
.flameseal-vragen{margin:0 0 1em;border-top:1px solid var(--flameseal-lijn)}
.flameseal-vraag__antwoord{padding:0 0 12px}
.flameseal-vraag__antwoord p:last-child{margin-bottom:0}
.flameseal-notitie--lees{margin:1.6em 0}
/* Uitklappers in de tekst (veelgestelde vragen en het blok Details): de vraag als regel met een pijltje */
.flameseal-leestekst details{border-bottom:1px solid var(--flameseal-lijn)}
.flameseal-leestekst details>summary{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 0;font-weight:var(--flameseal-gewicht-vet);color:var(--flameseal-kopkleur);cursor:pointer;list-style:none}
.flameseal-leestekst details>summary::-webkit-details-marker{display:none}
.flameseal-leestekst details>summary::after{content:"";flex:0 0 auto;width:8px;height:8px;margin:0 6px 0 auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.flameseal-leestekst details[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.flameseal-leestekst details>summary:hover{color:var(--flameseal-petrol)}

/* ---------- Leespagina's zonder "Op deze pagina" (of Over ons zonder vestigingszin): één kolom ---------- */
@media (min-width:64em){
  .flameseal-leesraster--enkel,.flameseal-over--enkel{grid-template-columns:minmax(0,42rem)}
}

/* ---------- Home: zonder foto in de opening een getekend landschap; zonder foto in de zeshoek een kleine tekening ---------- */
.flameseal-held__tekening svg,.flameseal-speerpunt__tekening{display:block;width:100%;height:100%}

/* ---------- Blokken uit de editor in de leestekst (knoppen, tabel, citaat, bestand, beelden, scheidingslijn).
   De opmaak van de blokken zelf laadt soms later: daarom met de klasse van de leestekst ervoor. ---------- */
.flameseal-leestekst figure{margin:1.6em 0}
.flameseal-leestekst img{border-radius:var(--flameseal-r2)}
.flameseal-leestekst :is(figcaption,.wp-element-caption){margin-top:8px;font-size:var(--flameseal-f-kaart);line-height:var(--flameseal-rh-kaart);color:var(--flameseal-inkt-2)}
.flameseal-leestekst .wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:1.2em 0}
.flameseal-pagina .flameseal-leestekst .wp-block-button .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.62em 1.25em;border:2px solid var(--flameseal-limoen);border-radius:var(--flameseal-pil);background:var(--flameseal-limoen);color:var(--flameseal-inkt);font-family:inherit;font-weight:var(--flameseal-gewicht-vet);font-size:1rem;line-height:1.2;text-decoration:none}
.flameseal-pagina .flameseal-leestekst .wp-block-button .wp-block-button__link:hover{background:var(--flameseal-limoen-licht);border-color:var(--flameseal-limoen-licht)}
.flameseal-pagina .flameseal-leestekst .wp-block-button.is-style-outline>.wp-block-button__link{background:var(--flameseal-wit);border-color:var(--flameseal-petrol);color:var(--flameseal-petrol)}
.flameseal-pagina .flameseal-leestekst .wp-block-button.is-style-outline>.wp-block-button__link:hover{background:var(--flameseal-petrol);color:var(--flameseal-wit)}
.flameseal-leestekst .wp-block-table{margin:1.6em 0;overflow-x:auto}
.flameseal-leestekst .wp-block-table:focus-visible{outline:3px solid var(--flameseal-inkt);outline-offset:3px}
.flameseal-leestekst table{width:100%;border-collapse:collapse;font-size:var(--flameseal-f-kaart);line-height:var(--flameseal-rh-kaart)}
.flameseal-leestekst table :is(th,td){padding:10px 12px;border:0;border-bottom:1px solid var(--flameseal-lijn);text-align:left;vertical-align:top}
.flameseal-leestekst table thead{border-bottom:2px solid var(--flameseal-lijn)}
.flameseal-leestekst table thead th{background:var(--flameseal-munt);color:var(--flameseal-kopkleur)}
.flameseal-leestekst blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border:0;border-left:4px solid var(--flameseal-limoen);font-family:var(--flameseal-kopletter);font-size:1.15rem;line-height:1.5;color:var(--flameseal-kopkleur)}
.flameseal-leestekst blockquote p:last-of-type{margin-bottom:0}
.flameseal-leestekst blockquote cite{display:block;margin-top:8px;font-family:var(--flameseal-tekst);font-size:var(--flameseal-f-klein);font-style:normal;color:var(--flameseal-inkt-2)}
.flameseal-leestekst :is(hr,.wp-block-separator){height:0;margin:2em 0;border:0;border-top:1px solid var(--flameseal-lijn);opacity:1}
.flameseal-leestekst .wp-block-file{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:1.2em 0}
.flameseal-leestekst .wp-block-file>a:not(.wp-block-file__button){display:inline-flex;align-items:center;min-height:44px;font-weight:var(--flameseal-gewicht-vet)}
.flameseal-leestekst .wp-block-file .wp-block-file__button{display:inline-flex;align-items:center;min-height:44px;padding:.4em 1.1em;border:2px solid var(--flameseal-petrol);border-radius:var(--flameseal-pil);background:var(--flameseal-wit);color:var(--flameseal-petrol);font-size:1rem;font-weight:var(--flameseal-gewicht-vet);text-decoration:none}
.flameseal-leestekst .wp-block-file .wp-block-file__button:hover{background:var(--flameseal-petrol);color:var(--flameseal-wit)}
.flameseal-leestekst :is(code,pre){font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
.flameseal-leestekst pre{overflow-x:auto;padding:14px 16px;border-radius:var(--flameseal-r1);background:var(--flameseal-munt)}
.flameseal-leestekst .alignleft{float:left;max-width:50%;margin:.3em 1.4em 1em 0}
.flameseal-leestekst .alignright{float:right;max-width:50%;margin:.3em 0 1em 1.4em}
.flameseal-leestekst .aligncenter{margin-inline:auto;text-align:center}
@media (max-width:39.99em){.flameseal-leestekst :is(.alignleft,.alignright){float:none;max-width:100%;margin:1em 0}}
.flameseal-leestekst::after{content:"";display:table;clear:both}
/* Een video, kaart of geluid van een andere site wordt een gewone link (kern, API.md §7a) */
.flameseal-elders{margin:1.2em 0}
.flameseal-elders a{font-weight:var(--flameseal-gewicht-vet)}
/* De kleuren en maten uit de editor (inc/instellen.php), ook waar de opmaak van WordPress zelf niet laadt */
.has-petrol-color{color:#06687A}.has-kopkleur-color{color:#0B3F48}.has-inkt-color{color:#20272C}.has-munt-color{color:#EEF6F2}
.has-petrol-background-color{background-color:#06687A}.has-kopkleur-background-color{background-color:#0B3F48}.has-inkt-background-color{background-color:#20272C}.has-munt-background-color{background-color:#EEF6F2}
.has-normaal-font-size{font-size:1.0625rem}.has-groot-font-size{font-size:1.16rem}

/* ---------- Zoeken, resultaten en paginanummers ---------- */
.flameseal-zoeken{max-width:36em;margin-top:18px}
.flameseal-zoeken__label{display:block;margin-bottom:6px;font-weight:var(--flameseal-gewicht-vet);color:var(--flameseal-kopkleur)}
.flameseal-zoeken__rij,.flameseal-wachtwoord__rij{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.flameseal-zoeken input[type="search"],.flameseal-wachtwoord input[type="password"]{flex:1 1 14em;min-width:0;min-height:50px;padding:11px 14px;border:1.5px solid var(--flameseal-veldrand);border-radius:var(--flameseal-r1);background:var(--flameseal-wit);color:var(--flameseal-inkt);font:inherit;font-size:var(--flameseal-f-tekst)}
.flameseal-zoeken input[type="search"]:focus-visible,.flameseal-wachtwoord input[type="password"]:focus-visible{outline:3px solid var(--flameseal-petrol);outline-offset:1px;border-color:var(--flameseal-petrol)}
.flameseal-resultaten__kop{font-size:clamp(1.4rem,1.2rem + .9vw,1.85rem)}
.flameseal-resultaten{list-style:none;max-width:46rem;margin:0 0 24px;padding:0;border-top:1px solid var(--flameseal-lijn)}
.flameseal-resultaat{padding:16px 0;border-bottom:1px solid var(--flameseal-lijn)}
.flameseal-resultaat__soort{margin:0 0 2px;font-size:.8rem;font-weight:var(--flameseal-gewicht-vet);letter-spacing:.07em;line-height:1.5;text-transform:uppercase;color:var(--flameseal-petrol)}
.flameseal-resultaat__titel{margin:0 0 4px;font-size:var(--flameseal-f-h3)}
.flameseal-resultaat>p:not(.flameseal-resultaat__soort){margin:0;color:var(--flameseal-inkt-2)}
.flameseal-resultaten__leeg{max-width:46rem;color:var(--flameseal-inkt-2)}
.flameseal-paginering{margin:24px 0 0}
.flameseal-paginering .nav-links,.flameseal-paginas-in-tekst p{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.flameseal-paginering .page-numbers,.flameseal-paginas-in-tekst .post-page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border:2px solid var(--flameseal-lijn);border-radius:var(--flameseal-pil);font-weight:var(--flameseal-gewicht-vet);text-decoration:none}
.flameseal-paginering a.page-numbers:hover,.flameseal-paginas-in-tekst a.post-page-numbers:hover{border-color:var(--flameseal-petrol)}
.flameseal-paginering .page-numbers.current,.flameseal-paginas-in-tekst .post-page-numbers.current{background:var(--flameseal-petrol);border-color:var(--flameseal-petrol);color:var(--flameseal-wit)}
.flameseal-paginering .page-numbers.dots{border-color:transparent}
.flameseal-paginas-in-tekst{margin:1.6em 0 0}

/* ---------- Wachtwoordformulier (inc/instellen.php) ---------- */
.flameseal-intro--formulier{color:var(--flameseal-inkt)}
.flameseal-wachtwoord{margin-top:16px}
.flameseal-wachtwoord p{margin:0 0 12px}
.flameseal-wachtwoord__rij label{flex-basis:100%;font-weight:var(--flameseal-gewicht-vet);color:var(--flameseal-kopkleur)}
.post-password-form-invalid-password{margin:0 0 12px;padding:12px 16px;border-left:4px solid #8A1F1F;border-radius:var(--flameseal-r1);background:#FBF1F1;color:#5C1414;font-weight:var(--flameseal-gewicht-vet)}
.post-password-form-invalid-password p{margin:0}

/* ---------- Voet: kanalen (sociale media, zodra ingevuld) en de knop Cookie-instellingen (alleen met statistieken) ---------- */
.flameseal-voet .flameseal-voet-kanalen{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:6px}
.flameseal-voet-kanalen a{display:inline-flex;align-items:center;min-height:44px;font-weight:var(--flameseal-gewicht-vet)}
@media (max-width:47.99em){.flameseal-voet-merk .flameseal-voet-kanalen{flex-basis:100%;margin-top:-4px}}
.flameseal-voet-cookie{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--flameseal-petrol);font:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;cursor:pointer}
.flameseal-voet-cookie:hover{color:var(--flameseal-petrol-diep);text-decoration-thickness:2px}
.flameseal-voet-cookie[hidden]{display:none}
/* Zonder duimbalk (geen telefoonnummer en geen Contact) ook geen ruimte ervoor onder de voet */
@media (max-width:47.99em) and (orientation:portrait){.flameseal-zonder-duimbalk .flameseal-voet{padding-bottom:env(safe-area-inset-bottom)}}

/* ---------- Overgang tussen pagina's: alleen na een klik op een bordje van de wandeling (het paginascript slaat elke
   andere overgang over) en alleen bij prefers-reduced-motion: no-preference ---------- */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}

/* ---------- Contrastmodus en afdrukken (aanvulling) ---------- */
@media (forced-colors:active){
  .flameseal-formulier__keuze,.flameseal-project,.flameseal-paginering .page-numbers,.flameseal-paginas-in-tekst .post-page-numbers,.flameseal-leestekst .flameseal-vacatures>li{border:2px solid ButtonText}
  .flameseal-aanvraag .wpcf7-submit{border:2px solid ButtonText}
  .flameseal-contactgegevens__rij::before{forced-color-adjust:none;background:CanvasText}
  .flameseal-aanvraag .flameseal-formulier :is(input,textarea).wpcf7-not-valid{border:3px solid CanvasText}
}
/* Een open menu ligt boven de cookiemelding van de kern (z-index 90, API.md §8) */
.flameseal-menu-open .flameseal-kop{z-index:95}

/* De gekozen dienst op /projecten/ (aria-current via flameseal_gekozen_werk() van de kern) */
.flameseal-projectkeuze a[aria-current]{color:var(--flameseal-kopkleur);font-weight:var(--flameseal-gewicht-vet);text-decoration:underline 2px;text-underline-offset:4px}

@media print{
  .flameseal-formulier__verstuur,.flameseal-formulier__turnstile,.flameseal-voet-cookie,.flameseal-paginering,.flameseal-zoeken{display:none!important}
  .flameseal-aanvraagkaart,.flameseal-project,.flameseal-leestekst .flameseal-vacatures>li{box-shadow:none;border:1px solid #999}
  .flameseal-project,.flameseal-resultaat{break-inside:avoid}
}