/*
 * FlameSeal: de wandeling door de werkzaamheden (assets/css/wandeling.css). Laadt alleen op de pagina met het sjabloon
 * Wandeling, na flameseal.css (inc/bestanden.php).
 *
 * Uit ontwerp/wandeling.html (PLAN.md §3 en §5A): het begin met de padkeuze en de prent, het pad als gewone sectie in
 * leesrichting (alles scrolt 1-op-1 mee, niets zit vast), de etappes met hun taferelen, de bordjes langs de lijn en het
 * einde met de oproep. Het limoen spoor tekent zich alleen als versiering mee met scrollen (animation-timeline); zonder
 * ondersteuning, zonder JavaScript en bij minder beweging staat het pad volledig getekend.
 *
 * Weggelaten: de proefbalk, de voorproef en de regels voor twee paden onder elkaar (in WordPress staat alleen het
 * gekozen pad in de HTML). De keyframe van de streepjesrand heet hier flameseal-randstreep: flameseal-rand bestaat al in
 * flameseal.css met een andere betekenis.
 */

/* ---------- Begin, zoals richting A: links kruimelpad, titel, inleiding en daaronder de padkeuze (twee kaarten naast
   elkaar); op de laptop rechts het landschap met het slingerende pad naar het gebouw (de overzichtsprent, A9). Telefoon
   en tablet hebben de eigen compositie van A: de tekst met de padkeuze als schakelaar, zonder prent. ---------- */
/* Bovenaan dezelfde lucht onder de kop als de opening van de andere pagina's (.flameseal-held in ontwerp.html);
   padding-bottom ruim boven de horizon van het pad (die rijst 26-38 px op), zodat hij nooit tekst of kaarten raakt */
.flameseal-begin{position:relative;padding:clamp(16px,3.5vw,56px) 0 clamp(30px,2.8vw,40px);background:radial-gradient(52rem 26rem at 100% 0%,rgba(227,240,233,.9),rgba(227,240,233,0) 70%)}
/* Onder het kruimelpad meer lucht op smalle schermen (daar breekt het over twee regels), minder op de laptop */
.flameseal-begin .flameseal-kruimel{margin:-8px 0 clamp(2px,14px - .85vw,10px)}
.flameseal-begin__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center}
.flameseal-begin h1{max-width:15em;margin:.1em 0 .3em}
.flameseal-inleiding{font-size:var(--flameseal-f-intro);line-height:1.6;color:var(--flameseal-inkt-2);max-width:34em;margin:0}
/* Padkeuze: twee gewone links met ?pad= (werkt zonder JS; het gekozen pad heeft aria-current) */
.flameseal-padkeuze{margin:clamp(18px,1.6vw,22px) 0 0}
.flameseal-padkeuze__titel{font-size:clamp(1.14rem,1.05rem + .5vw,1.4rem);margin:0 0 8px}
.flameseal-padkeuze ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:40rem}
.flameseal-padkeuze li{display:flex;min-width:0}
.flameseal-padkeuze__keuze{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;width:100%;min-height:52px;padding:10px 14px 10px 40px;border:2px solid var(--flameseal-lijn);border-radius:var(--flameseal-r2);background:var(--flameseal-wit);color:var(--flameseal-inkt);text-decoration:none;transition:border-color .2s,background-color .2s}
.flameseal-padkeuze__keuze::before{content:"";position:absolute;left:14px;top:50%;width:16px;height:18px;margin-top:-9px;clip-path:var(--flameseal-zeshoek-clip);background:var(--flameseal-steen)}
.flameseal-padkeuze__keuze:hover{border-color:var(--flameseal-teal);color:var(--flameseal-inkt)}
.flameseal-padkeuze__keuze[aria-current="true"]{border-color:var(--flameseal-petrol);background:var(--flameseal-munt)}
.flameseal-padkeuze__keuze[aria-current="true"]::before{background:linear-gradient(90deg,var(--flameseal-teal) 50%,var(--flameseal-limoen) 50%)}
.flameseal-padkeuze__naam{font-family:var(--flameseal-kopletter);font-weight:var(--flameseal-gewicht-kop);font-size:1.14rem;line-height:1.2;color:var(--flameseal-kopkleur)}
.flameseal-padkeuze__uitleg{font-size:var(--flameseal-f-klein);line-height:1.45;color:var(--flameseal-inkt-2)}
.flameseal-padkeuze__noot{display:none}
@media (max-width:47.99em){
  /* Telefoon: een schakelaar met twee even brede delen; de uitleg van het gekozen pad als regel eronder */
  .flameseal-padkeuze__keuze{padding:8px 8px 8px 28px}
  .flameseal-padkeuze__keuze::before{left:9px;width:13px;height:15px;margin-top:-7.5px}
  .flameseal-padkeuze__naam{font-size:.94rem}
  .flameseal-js .flameseal-padkeuze__uitleg{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .flameseal-js .flameseal-padkeuze__noot{display:block;margin:8px 0 0;font-size:var(--flameseal-f-klein);line-height:1.45;color:var(--flameseal-inkt-2)}
}
@media (min-width:48em){.flameseal-padkeuze__keuze{justify-content:flex-start;padding:11px 16px 12px 44px}.flameseal-padkeuze__keuze::before{top:17px;margin-top:0;left:17px}}

/* De overzichtsprent (A9, alleen laptop): weide, bomen, wegwijzer en het pad omhoog naar het gebouw; het limoen spoor
   tekent zich één keer. In een lijst met ronde hoeken en een zachte schaduw; de onderrand vloeit weg in de pagina.
   Blaadjes groeien één keer rond de lijst (linksonder voor de lijst, rechtsboven erachter). Geen scrollkoppeling. */
.flameseal-begin__prent{display:none}
/* Laptop: de tekstkolom iets breder dan in A, zodat de uitleg in de twee kaarten op twee of drie regels past en etappe 1
   in het eerste scherm valt (PLAN §3.5: h3 op ≤ 760 px bij 1440 × 900); de prent blijft dan ± 300 px hoog. */
@media (min-width:64em){
  .flameseal-begin__raster{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:clamp(40px,4.4vw,64px)}
  .flameseal-begin__prent{display:block;position:relative;isolation:isolate;width:100%;max-width:470px;justify-self:end;margin-top:8px}
  .flameseal-begin__lijst{display:block;width:100%;height:auto;border-radius:var(--flameseal-r3);overflow:hidden;box-shadow:var(--flameseal-schaduw);-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
  .flameseal-begin__blad{position:absolute;pointer-events:none;overflow:visible}
  .flameseal-begin__blad--onder{z-index:1;left:-10%;bottom:-5%;width:28%;height:auto}
  .flameseal-begin__blad--boven{z-index:-1;right:-9%;top:-17%;width:27%;height:auto}
}

/* ---------- Het pad: een gewone sectie in de paginastroom ---------- */
/* overflow-x: clip (geen hidden): zo blijft de pagina zelf de scrollcontainer voor animation-timeline. */
/* De korrel vloeit onderaan weg, zodat er geen naad is met het witte einde */
.flameseal-wandeling.flameseal-korrel::before{-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.flameseal-wandeling{overflow-x:clip;padding:4px 0 clamp(16px,2.2vw,28px);background-color:var(--flameseal-lucht-dag);background-image:linear-gradient(180deg,var(--flameseal-lucht-ochtend) 0,var(--flameseal-munt) 24%,var(--flameseal-lucht-dag) 66%,var(--flameseal-wit) 100%)}
/* De horizon rijst 26 px (telefoon) tot 38 px (laptop) op in het begin; dat begin heeft daar steeds ruimte voor */
.flameseal-horizon{--flameseal-rijs:clamp(26px,2.6vw,38px);position:absolute;left:0;right:0;top:calc(-1 * var(--flameseal-rijs));width:100%;height:calc(var(--flameseal-rijs) + 2px);display:block;z-index:-1}
.flameseal-padkop{position:relative;max-width:46rem;margin-bottom:2px}
.flameseal-padkop .flameseal-label{margin-bottom:6px}
.flameseal-padkop h2{margin-bottom:.2em}
/* Het label houdt de inktkleur van het gedeelde label (7,2:1 op limoen) */
.flameseal-padkop p:not(.flameseal-label){color:var(--flameseal-inkt-2);margin:0}
/* "Sla de wandeling over": alleen zichtbaar bij toetsenbordfocus, zoals de skiplink */
.flameseal-overslaan{position:absolute;left:0;top:-8px;z-index:5;display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border-radius:var(--flameseal-pil);background:var(--flameseal-wit);box-shadow:var(--flameseal-schaduw);font-weight:var(--flameseal-gewicht-vet);white-space:nowrap}
.flameseal-overslaan:not(:focus){width:1px;height:1px;min-height:0;padding:0;overflow:hidden;clip-path:inset(50%)}

/* De route: lint (het pad), spoor (stippellijn van wat nog komt) en lijn (wat u al hebt gelopen); onderaan de bestemming */
.flameseal-route{--flameseal-pad-x:22px;--flameseal-inspring:54px;position:relative;isolation:isolate;padding:4px 0 26px var(--flameseal-inspring)}
/* Het lint vloeit boven en onder weg: een pad dat uit het landschap komt en bij de bestemming uitloopt, geen strook */
.flameseal-route__lint{position:absolute;z-index:1;top:0;bottom:0;left:calc(var(--flameseal-pad-x) - 20px);width:40px;height:100%;overflow:visible;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 48px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(transparent,#000 48px,#000 calc(100% - 40px),transparent)}
.flameseal-route__lint path{fill:var(--flameseal-lucht-dag);stroke:var(--flameseal-lijn);stroke-width:1.25px;vector-effect:non-scaling-stroke}
.flameseal-route__spoor,.flameseal-route__lijn{position:absolute;z-index:1;top:6px;bottom:6px;left:calc(var(--flameseal-pad-x) - 1.5px);width:3px;border-radius:2px;pointer-events:none}
.flameseal-route__spoor{background:repeating-linear-gradient(180deg,var(--flameseal-steen) 0 6px,transparent 6px 13px);-webkit-mask-image:linear-gradient(transparent,#000 40px);mask-image:linear-gradient(transparent,#000 40px)}
.flameseal-route__lijn{background:var(--flameseal-limoen)}
.flameseal-route::after{content:"";position:absolute;z-index:2;bottom:-4px;left:calc(var(--flameseal-pad-x) - 9px);width:18px;height:20px;clip-path:var(--flameseal-zeshoek-clip);background:var(--flameseal-limoen)}

/* Etappes: telefoon eerst (tafereel, dan nummer, kop en zin, dan de bordjes in één kolom) */
/* Etappekop op de telefoon 20 px, zodat padkop (h2) en etappekop (h3) duidelijk verschillen (1,2 : 1); op de laptop 28,8 px.
   Een eigen maat voor de wandeling: het gedeelde token --flameseal-f-etappe (Home) blijft ongemoeid. */
.flameseal-wandeling{--flameseal-f-etappe-pad:clamp(1.25rem,1.05rem + .9vw,1.8rem)}
.flameseal-etappes{list-style:none;margin:0;padding:0}
.flameseal-etappe{position:relative;padding:16px 0 6px}
/* Op de bouwplaats: een zacht stenen vlak achter de etappe van het werk, onder het pad (zoals richting A). Het pad gaat de
   bouwplaats op en komt er bij de oplevering weer af. Twee werk-etappes na elkaar (installateur: aanleggen en afdichten)
   delen één vlak. Het vlak is een gewone achtergrond (::before), zonder rand: in de contrastmodus valt het weg. */
.flameseal-wandeling{--flameseal-bouwvlak:#EDF0EC}
.flameseal-etappe--bouw{padding-top:22px;padding-bottom:16px}
.flameseal-etappe--bouw::before{content:"";position:absolute;z-index:0;top:8px;bottom:0;left:calc(-1 * var(--flameseal-inspring) - 8px);right:-8px;border-radius:var(--flameseal-r3);background:var(--flameseal-bouwvlak)}
.flameseal-etappe--bouw+.flameseal-etappe--bouw::before{top:-6px;border-top-left-radius:0;border-top-right-radius:0}
.flameseal-etappe--bouw:has(+.flameseal-etappe--bouw)::before{bottom:-6px;border-bottom-left-radius:0;border-bottom-right-radius:0}
.flameseal-etappe__plek{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px}
.flameseal-etappe__bord{position:relative}
.flameseal-etappe__bord h3{font-size:var(--flameseal-f-etappe-pad);margin:0 0 4px}
.flameseal-etappe__bord p{margin:0;color:var(--flameseal-inkt-2);line-height:1.5;max-width:30em}
/* Maat van de genummerde zeshoek: de tokens --flameseal-nr-* (voorstel in het gedeelde blok van ontwerp.html: overal
   dezelfde maat als de stappen op Home); zolang die er niet zijn, gelden de terugvalwaarden */
.flameseal-etappe__nr{position:absolute;z-index:3;left:calc(var(--flameseal-pad-x) - var(--flameseal-inspring) - var(--flameseal-nr-b,42px) / 2);top:-9px;width:var(--flameseal-nr-b,42px);height:var(--flameseal-nr-h,48px);display:grid;place-items:center;clip-path:var(--flameseal-zeshoek-clip);background:linear-gradient(90deg,var(--flameseal-teal) 50%,var(--flameseal-limoen) 50%);font-family:var(--flameseal-kopletter);font-weight:var(--flameseal-gewicht-kop);font-size:var(--flameseal-nr-f,1.14rem);line-height:1;color:var(--flameseal-kopkleur);isolation:isolate}
.flameseal-etappe__nr::before{content:"";position:absolute;z-index:-1;inset:5px 4.5px;clip-path:var(--flameseal-zeshoek-clip);background:var(--flameseal-wit)}
.flameseal-tafereel{order:-1;display:block;width:100%;max-width:30rem;height:auto;aspect-ratio:2.6/1;border-radius:var(--flameseal-r2);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(11,63,72,.06)}
/* Kleuren in de taferelen: het landschap van richting A (ronde 3: de uitstraling van A gaat voor) en de tokens van §2.2.
   Landschap (voorstel voor PLAN §2.2 en §5A, in plaats van grond #D5E6D6 en gras blad-6): lucht 's ochtends #D8ECE5 naar
   #F3F9F5, later op de dag #E0EFEB naar #FAFCFA; zon #FBFDF0 en #F1F7E0 (oplevering #FCFEF4 en #F3F9E6); verre heuvels
   #D0E4D8, struiken in de verte #B9D6C4, weide #C4DDCB, gras #B4D3A6 (hetzelfde gras als de prent "Wandel mee" op Home).
   Bouw: leiding #7F8D89, leiding-licht #B5BEBB, binnenkant van een buis #3B4744, dakrand en vloerrand #9FB3AE, raam
   #CBE1E5, kraan in de verte #CCDCD3. De betonvloer onder wand en kolom is --flameseal-salie-licht (bovenkant) met
   --flameseal-beton-rand (voorkant): het werk speelt zich af in een gebouw in aanbouw, niet in het gras (keuring ronde 3).
   Plantjes: bladpalet blad-2 tot blad-5 en limoen-licht. Op de telefoon (2,6 : 1, uitsnede onderaan) is alleen y 46-200
   van de viewBox te zien: houd bouwelementen op y ≥ 60 (de kraan in de verte mag tot 59). */

/* De bordjes: echte links in leesvolgorde, met een stapsteen op het pad en een armpje ernaartoe */
.flameseal-bordjes{position:relative;z-index:2;list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.flameseal-bordjes__kop,.flameseal-meer__kop{position:relative;z-index:2;display:table;margin:16px 0 0;padding:1px 12px;border:1px solid var(--flameseal-lijn);border-radius:var(--flameseal-pil);background:var(--flameseal-wit);font-family:var(--flameseal-tekst);font-size:var(--flameseal-f-klein);font-weight:var(--flameseal-gewicht-vet);letter-spacing:.02em;line-height:1.6;color:var(--flameseal-kopkleur)}
.flameseal-bordjes__kop+.flameseal-bordjes{margin-top:10px}
.flameseal-meer{position:relative;z-index:2;padding:14px 0 0}
.flameseal-meer__kop{margin:0}
.flameseal-meer .flameseal-bordjes{margin-top:10px}
.flameseal-bordjes__item{position:relative;min-width:0}
.flameseal-bordjes__item::before,.flameseal-bordjes__item::after{content:"";position:absolute;top:24px;left:calc(var(--flameseal-pad-x) - var(--flameseal-inspring) + 7px);width:calc(var(--flameseal-inspring) - var(--flameseal-pad-x) - 7px);height:2px;background:var(--flameseal-lijn)}
/* Het armpje kleurt mee met zijn stapsteen (zoals richting A): een limoen laag erover, alleen opacity (A2) */
.flameseal-bordjes__item::after{background:var(--flameseal-limoen);opacity:.55}
.flameseal-steen{position:absolute;z-index:3;top:17px;left:calc(var(--flameseal-pad-x) - var(--flameseal-inspring) - 7px);width:14px;height:16px;clip-path:var(--flameseal-zeshoek-clip)}
.flameseal-bordje{display:block;padding:11px 15px 12px;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-bordje:hover{border-color:var(--flameseal-teal);color:var(--flameseal-inkt)}
.flameseal-bordje:hover .flameseal-bordje__titel{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
/* Het speerpunt valt op zonder donkere kaart: label, rand van 2 px in petrol en een muntvlak */
.flameseal-bordje--speerpunt{border:2px solid var(--flameseal-petrol);background:var(--flameseal-munt)}
.flameseal-bordje--speerpunt:hover{border-color:var(--flameseal-petrol-diep)}
/* Het label "Speerpunt" is het gedeelde label (.flameseal-label, zoals op Home); hier alleen een kleinere marge */
.flameseal-bordje__label{margin:0 0 4px}
.flameseal-bordje__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)}
/* Het pijltje hangt in de ruimte rechts, zodat het nooit alleen op een nieuwe regel komt */
.flameseal-bordje__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}
/* De zin staat altijd in beeld; line-clamp is alleen een vangnet voor lange teksten uit de Customizer */
.flameseal-bordje__zin{display:block;display:-webkit-box;margin-top:2px;font-size:var(--flameseal-f-kaart);line-height:var(--flameseal-rh-kaart);color:var(--flameseal-inkt-2);-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* Kleine telefoon (onder 400 px): compacter, zodat ook de etappe met de meeste bordjes (Het werk) zo dicht mogelijk bij
   1,2 scherm blijft (PLAN §3.5): kleinere tussenruimtes, iets minder binnenruimte in de bordjes en de etappezin in 16 px
   (de kleinste maat voor lopende tekst, net als de zin op de bordjes). Er valt niets weg. */
@media (max-width:24.99em){
  .flameseal-etappe{padding-top:12px}
  .flameseal-etappe--bouw{padding-top:18px;padding-bottom:12px}
  .flameseal-etappe__plek{gap:8px}
  .flameseal-etappe__bord p{font-size:var(--flameseal-f-kaart);line-height:var(--flameseal-rh-kaart)}
  .flameseal-bordjes,.flameseal-bordjes__kop+.flameseal-bordjes,.flameseal-meer .flameseal-bordjes{margin-top:8px}
  .flameseal-bordjes{gap:8px}
  .flameseal-bordje{padding:9px 12px 10px}
  .flameseal-bordjes__item::before,.flameseal-bordjes__item::after{top:22px}
  .flameseal-steen{top:15px}
}
/* Smalle telefoon (onder 360 px): het pad dichter langs de rand en iets compactere bordjes; zo past er meer tekst per
   regel en wordt de wandeling korter, zonder dat er iets wegvalt */
@media (max-width:22.49em){
  .flameseal-route{--flameseal-pad-x:16px;--flameseal-inspring:42px}
  .flameseal-etappe__nr{left:calc(var(--flameseal-pad-x) - var(--flameseal-inspring) - 17px);top:-5px;width:34px;height:40px;font-size:1rem}
  .flameseal-etappe__nr::before{inset:4px 3.5px}
  .flameseal-bordjes{gap:6px}
  .flameseal-bordje{padding:8px 12px 9px}
  .flameseal-bordjes__item::before,.flameseal-bordjes__item::after{top:21px}
  .flameseal-steen{top:14px}
}

/* Tablet en liggende telefoon (48em tot de laptopcompositie): de route links, tafereel naast de tekst, bordjes in twee kolommen */
@media (min-width:48em){
  .flameseal-route{--flameseal-pad-x:24px;--flameseal-inspring:60px}
  .flameseal-etappe__plek{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);align-items:center;gap:12px 28px}
  .flameseal-tafereel{order:0;max-width:none;aspect-ratio:2.2/1}
  /* Een etappe zonder bordjes (installateur: "U legt aan") meer lucht eronder: de taferelen van stap 2 en 3 (dezelfde
     wand, eerst open en daarna dicht) staan hier onder elkaar rechts en mogen niet als één dubbel beeld lezen */
  .flameseal-etappe:not(:has(.flameseal-bordjes)){padding-bottom:36px}
  .flameseal-bordjes{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
  /* Rechts: de steen ligt op dezelfde plek op het pad als die van het bordje ernaast; geen tweede armpje */
  .flameseal-bordjes__item:nth-child(even)::before,.flameseal-bordjes__item:nth-child(even)::after{display:none}
  .flameseal-bordjes__item:nth-child(even) .flameseal-steen{left:calc(var(--flameseal-pad-x) - var(--flameseal-inspring) - 7px - 100% - 16px)}
}
/* Liggende telefoon (lager dan 30em): dezelfde opbouw als de tablet, maar compacter, zodat een etappe met vier bordjes
   binnen 1,2 scherm blijft (PLAN §3.5): het tafereel lager (2,6 : 1, dezelfde uitsnede als staand), de etappezin in
   16 px en kleinere tussenruimtes */
@media (orientation:landscape) and (max-height:30em){
  .flameseal-etappe{padding-top:12px}
  .flameseal-etappe--bouw{padding-top:16px;padding-bottom:10px}
  .flameseal-etappe__bord p{font-size:var(--flameseal-f-kaart);line-height:var(--flameseal-rh-kaart)}
  .flameseal-tafereel{aspect-ratio:2.6/1}
  .flameseal-bordjes,.flameseal-bordjes__kop+.flameseal-bordjes,.flameseal-meer .flameseal-bordjes{margin-top:8px}
  .flameseal-bordjes{gap:8px 16px}
  .flameseal-bordje{padding:9px 14px 10px}
  .flameseal-bordjes__item::before,.flameseal-bordjes__item::after{top:22px}
  .flameseal-steen{top:15px}
}

/* Laptop (vanaf 64em en 36em hoog): het pad in het midden; bord en tafereel wisselen per etappe van kant, zodat het pad
   slingert; bordjes links en rechts van het pad, de rechterkolom 32 px lager. Geen diepte, geen parallax. */
@media (min-width:64em) and (min-height:36em){
  .flameseal-padkop{margin-inline:auto;text-align:center}
  .flameseal-overslaan{left:50%;transform:translateX(-50%)}
  .flameseal-route{--flameseal-pad-b:180px;padding:4px 0 16px}
  /* Onder de bestemming van het pad korter naar de oproep (de opening bovenaan kreeg meer lucht; de pagina blijft ≤ 3,6 schermen) */
  .flameseal-wandeling{padding-bottom:4px}
  .flameseal-route__lint{left:calc(50% - 28px);width:56px}
  .flameseal-route__spoor,.flameseal-route__lijn{left:calc(50% - 1.5px)}
  .flameseal-route::after{left:calc(50% - 9px)}
  .flameseal-etappe{padding:24px 0 8px}
  /* De eerste etappe dicht onder de padkop, zodat ze in het eerste scherm valt */
  .flameseal-etappe:first-child{padding-top:12px}
  .flameseal-etappe--bouw{padding-top:28px;padding-bottom:16px}
  .flameseal-etappe--bouw::before{left:-24px;right:-24px;top:10px}
  /* Een etappe zonder bordjes (installateur: "U legt aan") iets meer lucht, zodat de twee taferelen met dezelfde wand niet
     tegen elkaar aan staan; bewust kleiner dan 340 px tussen de koppen (PLAN §3.5: voorstel "≥ 240 px voor een etappe
     zonder bordjes"), want de pagina blijft ≤ 3,6 schermen en de gebruiker vroeg om kortere gaten. De twee staan samen
     op één bouwvlak en wisselen van kant. */
  .flameseal-etappe:not(:has(.flameseal-bordjes)){padding-bottom:26px}
  .flameseal-etappe__plek{grid-template-columns:minmax(0,1fr) var(--flameseal-pad-b) minmax(0,1fr);gap:0}
  .flameseal-etappe__bord{grid-column:1;grid-row:1;justify-self:end;text-align:right;max-width:25rem;position:static}
  .flameseal-etappe__bord p{margin-left:auto}
  .flameseal-tafereel{grid-column:3;grid-row:1;justify-self:start;width:100%;max-width:400px;aspect-ratio:2.35/1}
  .flameseal-etappe:nth-child(even) .flameseal-etappe__bord{grid-column:3;justify-self:start;text-align:left}
  .flameseal-etappe:nth-child(even) .flameseal-etappe__bord p{margin-left:0}
  .flameseal-etappe:nth-child(even) .flameseal-tafereel{grid-column:1;justify-self:end}
  .flameseal-etappe__nr{left:calc(50% - var(--flameseal-nr-b,50px) / 2);top:calc(50% - var(--flameseal-nr-h,56px) / 2);width:var(--flameseal-nr-b,50px);height:var(--flameseal-nr-h,56px);font-size:var(--flameseal-nr-f,1.25rem)}
  .flameseal-bordjes{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--flameseal-pad-b);row-gap:16px;margin-top:14px;padding-bottom:32px}
  .flameseal-bordjes__item{width:100%;max-width:25rem}
  .flameseal-bordjes__item:nth-child(odd){grid-column:1;justify-self:end}
  .flameseal-bordjes__item:nth-child(even){grid-column:2;justify-self:start;margin-top:32px;margin-bottom:-32px}
  /* Eindigt de lijst met een bordje links, dan is de ruimte voor de verspringing rechts niet nodig */
  .flameseal-bordjes:has(>.flameseal-bordjes__item:last-child:nth-child(odd)){padding-bottom:0}
  .flameseal-bordjes__item:nth-child(odd)::before,.flameseal-bordjes__item:nth-child(odd)::after{left:100%;width:calc(var(--flameseal-pad-b) / 2 - 7px)}
  .flameseal-bordjes__item:nth-child(even)::before,.flameseal-bordjes__item:nth-child(even)::after{display:block;left:calc(var(--flameseal-pad-b) / -2 + 7px);width:calc(var(--flameseal-pad-b) / 2 - 7px)}
  .flameseal-bordjes__item:nth-child(odd) .flameseal-steen{left:auto;right:calc(var(--flameseal-pad-b) / -2 - 7px)}
  .flameseal-bordjes__item:nth-child(even) .flameseal-steen{left:calc(var(--flameseal-pad-b) / -2 - 7px)}
  .flameseal-bordjes__kop,.flameseal-meer__kop{margin-inline:auto}
  .flameseal-bordjes__kop{margin-top:4px}
  .flameseal-meer{padding-top:2px}
  .flameseal-bordje{padding:14px 18px 15px}
}
@media (min-width:80em) and (min-height:36em){.flameseal-route{--flameseal-pad-b:200px}}

/* Voorgrondblaadjes (alleen op brede schermen, vanaf 80em): in de lege marge naast de route, aan de rand van het beeld,
   bij de eerste en de laatste etappe (nooit bij het bouwvlak). Ze groeien één keer als ze in beeld komen en staan daarna
   stil. Breedte hoogstens de marge min 10 px, dus nooit over een bordje, bord of tafereel. */
.flameseal-voorblad{display:none}
@media (min-width:80em) and (min-height:36em){
  .flameseal-voorblad{display:block;position:absolute;z-index:2;bottom:0;width:clamp(60px,calc(50vw - 560px),150px);height:auto;overflow:visible;pointer-events:none;--flameseal-blad-start:.2s}
  .flameseal-voorblad--links{left:calc(50% - 50vw)}
  .flameseal-voorblad--rechts{right:calc(50% - 50vw);top:0;bottom:auto}
}

/* ---------- Einde van de wandeling: één oproep (ook het doel van "Sla de wandeling over") ---------- */
/* Vanaf de tablet dezelfde muntkaart als de afsluiter op Home (hoek 32, geen rand, de zeshoek half in de hoek), zodat
   de oproep op beide pagina's dezelfde vorm heeft (met een eigen kop en zin). Op de telefoon staat de oproep open
   op wit, met het nummer in gewone tekst: zo blijft hij compact (de wandeling blijft binnen 4,8 schermen op 375 en 6,5
   op 320 px).
   Gemeten 07-10: een muntkaart ook op de telefoon kost 167 px op 375 x 812 (4,75 wordt 4,96 schermen), omdat de
   knoppen en de contactregel binnen de binnenruimte van de kaart op twee regels komen.
   Onder de oproep, buiten de kaart, de link naar het andere pad. */
.flameseal-einde{position:relative;padding:clamp(14px,1.2vw,18px) 0 clamp(28px,2.4vw,36px);text-align:center}
.flameseal-einde__kaart{position:relative;overflow:hidden}
.flameseal-einde__kaart>*{position:relative}
.flameseal-einde h2{margin-bottom:.35em}
.flameseal-einde p{max-width:34em;margin-inline:auto;color:var(--flameseal-inkt-2)}
.flameseal-einde__contact{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 18px;margin:4px 0 0}
.flameseal-einde__tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:var(--flameseal-gewicht-vet)}
.flameseal-einde__contact .flameseal-mail{display:inline-flex;align-items:center;min-height:44px;font-weight:var(--flameseal-gewicht-vet)}
.flameseal-einde .flameseal-knoppen{justify-content:center;margin-top:14px}
.flameseal-einde__decor{display:none}
.flameseal-einde__ander{margin:6px auto 0}
.flameseal-einde__ander .flameseal-pijl-link{display:inline-block;padding-block:10px}
.flameseal-einde__ander .flameseal-i{vertical-align:-.2em;margin-left:6px}
@media (max-width:47.99em){.flameseal-einde__kaart.flameseal-korrel::before{display:none}}
/* Smalle telefoon: de twee knoppen passen nog naast elkaar met iets minder binnenruimte */
@media (max-width:23.49em){.flameseal-einde .flameseal-knoppen{gap:8px}}
@media (max-width:22.49em){.flameseal-einde .flameseal-knop{padding-inline:.6em}}
@media (min-width:48em){
  .flameseal-einde__kaart{background-color:var(--flameseal-munt);border-radius:var(--flameseal-r3);padding:clamp(28px,5vw,64px)}
  .flameseal-einde__contact{gap:4px 26px;margin-top:14px}
  .flameseal-einde__tel{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-einde__tel .flameseal-i{width:.85em;height:.85em}
  .flameseal-einde .flameseal-knoppen{margin-top:20px}
  .flameseal-einde__decor{display:block;position:absolute!important;width:200px;height:200px;right:-70px;top:-80px;opacity:.5;pointer-events:none}
  .flameseal-einde__ander{margin-top:6px}
}

/* ---------- Animaties (alleen versiering; de tekst staat er altijd) ---------- */
/* A1 en A2: de gelopen lijn, de stapstenen en hun armpjes, scroll-gestuurd en 1-op-1 met gewoon scrollen (PLAN.md §5A;
   het armpje kleurt zoals in richting A mee met zijn steen: dezelfde tijdlijn via timeline-scope, alleen opacity).
   Alleen met JS (flameseal-js), op een scherm en zonder minder beweging; anders staan lijn, stenen en armpjes volledig gekleurd.
   flameseal-eindbeeld (gedeeld script, PLAN §2.4): heeft minder beweging tijdens dit bezoek aan gestaan, dan blijft de hele
   wandeling in het eindbeeld, ook als de bezoeker de instelling weer uitzet. Zo speelt er dan niets alsnog af. */
.flameseal-route__lijn{transform-origin:50% 0}
.flameseal-steen{background:var(--flameseal-steen)}
.flameseal-steen::after{content:"";position:absolute;inset:0;clip-path:inherit;background:var(--flameseal-limoen)}
@supports (animation-timeline:view()){
  @media screen and (prefers-reduced-motion:no-preference){
    :root.flameseal-js:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-route{view-timeline:--flameseal-route block;view-timeline-inset:50% 50%}
    :root.flameseal-js:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-route__lijn{animation:flameseal-lijn linear both;animation-timeline:--flameseal-route;animation-range:cover 0% cover 100%}
    :root.flameseal-js:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-steen{view-timeline:--flameseal-steen block;view-timeline-inset:50% 50%}
    :root.flameseal-js:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-steen::after{animation:flameseal-steen linear both;animation-timeline:--flameseal-steen;animation-range:cover 0% cover 100%}
    :root.flameseal-js:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-bordjes__item{timeline-scope:--flameseal-steen}
    :root.flameseal-js:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-bordjes__item::after{animation:flameseal-arm-aan linear both;animation-timeline:--flameseal-steen;animation-range:cover 0% cover 100%}
  }
}
@keyframes flameseal-lijn{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes flameseal-steen{from{opacity:0}to{opacity:1}}
@keyframes flameseal-arm-aan{from{opacity:0}to{opacity:.55}}

/* A3: bordjes komen één keer op (12 px, vanaf 60 % zichtbaar); wat bij het laden in beeld staat, staat er meteen */
@media (prefers-reduced-motion:no-preference){
  :root.flameseal-op-actief:not(.flameseal-minder):not(.flameseal-eindbeeld) [data-flameseal-op]:not(.flameseal-gezien)>.flameseal-bordje{opacity:.6;transform:translateY(12px)}
  :root.flameseal-op-actief:not(.flameseal-minder):not(.flameseal-eindbeeld) [data-flameseal-op].flameseal-gezien>.flameseal-bordje{transition:opacity .5s var(--flameseal-zacht),transform .5s var(--flameseal-zacht),border-color .2s}
}
[data-flameseal-op]:focus-within>.flameseal-bordje{opacity:1!important;transform:none!important}
@media print{[data-flameseal-op]>.flameseal-bordje{opacity:1!important;transform:none!important}}

/* A4 tot en met A8: de taferelen spelen één keer, hoogstens één tegelijk en in de volgorde van het werk (PLAN §5A).
   Het gedeelde script zet flameseal-speelt zodra een tafereel voor 35 % in beeld is. Het paginascript (deel 4) houdt
   het daarna stil in het beginbeeld (flameseal-stil) tot het voor 60 % te zien is (onder de kop, boven de duimbalk), en
   laat het pas beginnen als een ander tafereel dat nog speelt en in beeld is, klaar is (--flameseal-wacht in elke vertraging).
   Wachtstand en afspelen alleen op een scherm, met flameseal-js-anim en zonder minder beweging: na het vangnet van 3 s
   blijft het eindbeeld dus staan, ook als het script daarna alsnog laadt. Zonder JS, bij minder beweging en bij
   afdrukken staat altijd het eindbeeld.
   A9 (de prent in de opening) hoort bij dezelfde volgorde: op de laptop speelt hij eerst, daarna tafereel 1.
   Plantjes (blad en struik) groeien één keer, zacht uitlopend en zonder te veren, met alleen transform en opacity: rond
   de lijst van de prent, voor in het landschap van De klant en bij het opgeleverde gebouw. Nooit uit of door een
   afdichting of doorvoering, nooit op de bouwplaats van het werk, nooit naast het woord "duurzaam". */
.flameseal-arm,.flameseal-laag,.flameseal-leiding--nieuw{transform-box:fill-box}
.flameseal-arm--r{transform-origin:0 50%}
.flameseal-arm--l{transform-origin:100% 50%}
.flameseal-laag{transform-origin:50% 100%}
.flameseal-leiding--nieuw{transform-origin:50% 50%}
/* Plantjes (blad en struik): de regels staan in het gedeelde blok (PLAN §2.2); hier alleen het begin per tekening */
.flameseal-begin__prent{--flameseal-blad-start:.3s;--flameseal-struik-start:2.3s}
.flameseal-tafereel{--flameseal-blad-start:.1s;--flameseal-struik-start:1.9s}
@media screen and (prefers-reduced-motion:no-preference){
  /* Wachtstand: nog niet gestart, of gestart maar nog stil */
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-prent__lijn,
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-stil .flameseal-prent__lijn{stroke-dashoffset:1.05}
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-afdichting,
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-stil .flameseal-afdichting{stroke-width:0}
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-afdichting-rand,
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-stil .flameseal-afdichting-rand{stroke-dashoffset:105}
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-leiding--nieuw,
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-stil .flameseal-leiding--nieuw{opacity:0;transform:scale(.55)}
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-laag,
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-stil .flameseal-laag{transform:scaleY(0)}
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-arm,
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-stil .flameseal-arm{transform:scaleX(.15)}
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-wegpad,
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-stil .flameseal-wegpad,
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-regel,
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-stil .flameseal-regel,
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) [data-flameseal-speel]:not(.flameseal-speelt) .flameseal-vink,
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-stil .flameseal-vink{stroke-dashoffset:1.05}

  /* A4 wegwijzer: het pad tekent zich (1,2 s), daarna klappen de armen uit (0,6 s) */
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-speelt:not(.flameseal-stil) .flameseal-wegpad{animation:flameseal-streep .5s linear both;animation-delay:calc(var(--flameseal-wacht,0s) + .2s)}
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-speelt:not(.flameseal-stil) .flameseal-wegpad--ver{animation:flameseal-streep .7s var(--flameseal-zacht) both;animation-delay:calc(var(--flameseal-wacht,0s) + .7s)}
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-speelt:not(.flameseal-stil) .flameseal-arm{animation:flameseal-arm .6s var(--flameseal-zacht) both;animation-delay:calc(var(--flameseal-wacht,0s) + 1.4s)}
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-speelt:not(.flameseal-stil) .flameseal-arm--l{animation-delay:calc(var(--flameseal-wacht,0s) + 1.55s)}
  /* A5 en A7: de afdichting vult elke opening van de wandrand tot aan de leiding, daarna tekent de limoen rand zich */
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-speelt:not(.flameseal-stil) .flameseal-afdichting{animation:flameseal-sluit 1.4s var(--flameseal-zacht) both;animation-delay:calc(var(--flameseal-wacht,0s) + .3s + var(--flameseal-n,0) * var(--flameseal-stap,.45s))}
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-speelt:not(.flameseal-stil) .flameseal-afdichting-rand{animation:flameseal-randstreep .8s ease-out both;animation-delay:calc(var(--flameseal-wacht,0s) + 1.6s + var(--flameseal-n,0) * var(--flameseal-stap,.45s))}
  /* A5: de stalen kolom krijgt van onder naar boven een lichte brandwerende laag met een limoen rand (1,2 s), na de
     afdichtingen; de laag is doorschijnend, zodat het staal eronder herkenbaar blijft */
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-speelt:not(.flameseal-stil) .flameseal-laag{animation:flameseal-laag 1.2s var(--flameseal-zacht) both;animation-delay:calc(var(--flameseal-wacht,0s) + 2.2s)}
  /* A6: de leidingen komen één voor één door de wand; de opening eromheen blijft open */
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-speelt:not(.flameseal-stil) .flameseal-leiding--nieuw{animation:flameseal-plaats .9s var(--flameseal-zacht) both;animation-delay:calc(var(--flameseal-wacht,0s) + .2s + var(--flameseal-n,0) * .35s)}
  /* A8: regels en vinkjes op het klembord */
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-speelt:not(.flameseal-stil) .flameseal-regel{animation:flameseal-streep .6s ease-out both;animation-delay:calc(var(--flameseal-wacht,0s) + .2s + var(--flameseal-n,0) * .45s)}
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-speelt:not(.flameseal-stil) .flameseal-vink{animation:flameseal-streep .45s ease-out both;animation-delay:calc(var(--flameseal-wacht,0s) + .55s + var(--flameseal-n,0) * .45s)}
  /* A9 prent: het limoen spoor tekent zich langs het pad omhoog naar de deur (2,2 s); daarna groeien de struiken */
  :root.flameseal-js-anim:not(.flameseal-minder):not(.flameseal-eindbeeld) .flameseal-speelt:not(.flameseal-stil) .flameseal-prent__lijn{animation:flameseal-streep 2.2s var(--flameseal-zacht) both;animation-delay:calc(var(--flameseal-wacht,0s) + .4s)}
}
@keyframes flameseal-sluit{from{stroke-width:0}}
/* Rand: streepjespatroon 100 · 110 met beginstand 105 (zoals bij flameseal-streep), zodat er vóór het afdichten geen
   limoen streepje op een open opening staat; de ronde uiteinden sluiten de ring in het eindbeeld zonder naadje */
@keyframes flameseal-randstreep{from{stroke-dashoffset:105}}
@keyframes flameseal-plaats{from{opacity:0;transform:scale(.55)}}
/* Streepjespatroon 1 · 1,2 met beginstand 1,05: zo staat er vóór het tekenen geen rond eindpuntje */
@keyframes flameseal-streep{from{stroke-dashoffset:1.05}}
@keyframes flameseal-laag{from{transform:scaleY(0)}}

/* ---------- Contrastmodus en afdrukken (aanvulling op het gedeelde blok) ---------- */
@media (forced-colors:active){
  .flameseal-padkeuze__keuze,.flameseal-bordje,.flameseal-bordjes__kop,.flameseal-meer__kop,.flameseal-einde__kaart{border:2px solid ButtonText}
  .flameseal-padkeuze__keuze[aria-current="true"],.flameseal-bordje--speerpunt{border-width:4px}
  .flameseal-route__lint,.flameseal-route__spoor,.flameseal-route__lijn,.flameseal-route::after,.flameseal-steen,.flameseal-etappe__nr,.flameseal-tafereel,.flameseal-padkeuze__keuze::before,.flameseal-einde__decor,.flameseal-begin__lijst,.flameseal-begin__blad,.flameseal-voorblad{forced-color-adjust:none}
  .flameseal-etappe--bouw::before{display:none}
}
@media print{
  .flameseal-overslaan,.flameseal-einde__decor,.flameseal-voorblad,.flameseal-begin__blad{display:none!important}
  .flameseal-etappe--bouw::before{display:none}
  .flameseal-begin,.flameseal-wandeling{background:#fff!important}
  .flameseal-route__lint,.flameseal-route__spoor{-webkit-mask-image:none;mask-image:none}
  .flameseal-bordje{box-shadow:none;border:1px solid #999}
  .flameseal-einde__kaart{background:#fff;border:1px solid #999}
  .flameseal-bordjes__item,.flameseal-etappe__plek,.flameseal-einde__kaart{break-inside:avoid}
  /* Aanvulling op het gedeelde blok (voorstel voor PLAN §2.2: de wachtstand van de naad achter "screen" zetten):
     op papier staat de naad altijd gesloten, ook als hij nog niet in beeld is geweest */
  .flameseal-naad::before,.flameseal-naad::after,.flameseal-naad span{transform:none!important;opacity:1!important}
}