/* Laag: framework — zie de rangorde in skeleton/templates/page.php. Site-CSS en CMS-opmaak
 * winnen hiervan zonder specificiteits-trucs; binnen de laag telt specificiteit gewoon. */
@layer framework {
/* Shell-basisopmaak voor de framework-skeleton. Themawaarden komen uit CMS-tokens. */
*{box-sizing:border-box}
/* Dunne, meekleurende scrollbar (thema-kleuren) */
html{scrollbar-width:thin;scrollbar-color:var(--accent) var(--surface)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--ink)}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--fg);line-height:1.6}
/* Koppen: de CMS-keuze wint. `--font-display` komt uit SiteTokens (theme-font-2); `--font-head`
   is de private variabele van het starter-skeleton en blijft alleen als terugval staan, zodat een
   site zonder fontkeuze er hetzelfde uit blijft zien. Stond hier als kale `var(--font-head)`, en
   die is nooit aan een CMS-waarde gekoppeld -- dus koos een redacteur Jost, dan rekende SiteTokens
   dat netjes uit, zette het in de HTML, en toonde de pagina alsnog Georgia (Flow #478). */
h1,h2,h3,.heading,.hero__title,.usps__title,.site-footer__name,.contact-info__name{font-family:var(--font-display,var(--font-head,var(--font-body,system-ui,sans-serif)))}
a{color:var(--ink)}
img{max-width:100%;height:auto}
.site-nav__cta-icon--mask{display:inline-block;flex:0 0 auto;width:1em;height:1em;background:currentColor;mask:var(--cta-icon-image) center / contain no-repeat;-webkit-mask:var(--cta-icon-image) center / contain no-repeat}
/* Het icoon in een knop (`button--icon`, `site-nav__cta-icon`) mag bij hover vloeiend opschuiven: een marge of transform uit het
   CMS-slot `button_icon_*_hover` of uit site-CSS slaat anders hard om (punt 1197). Uit bij "animaties uit". */
.button--icon,.site-nav__cta-icon{transition:margin .2s ease,transform .2s ease}
@media(prefers-reduced-motion:reduce){.button--icon,.site-nav__cta-icon{transition:none}}

.site-header{border-bottom:1px solid var(--line)}
.site-header__inner{max-width:var(--max);margin:0 auto;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.site-header__tools{display:flex;align-items:center;gap:1rem;margin-left:auto;order:2;min-width:0}
.site-logo{font-weight:700;font-size:1.15rem;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center}
.site-logo__img{height:36px;width:auto;display:block}
.site-nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.site-nav-toggle{}
.site-nav a{color:var(--fg);text-decoration:none;font-size:.95rem}
.site-nav a:hover{color:var(--ink)}
.mb__main{list-style:none;display:flex;gap:1.25rem;margin:0;padding:0}
.mb__main-item{position:relative}
.mb__main-link{display:inline-flex;align-items:center;gap:.3rem;color:var(--fg);text-decoration:none;font-size:.95rem;padding:.35rem 0}
.mb__main-item--has-dropdown>.mb__main-link::after{content:"";display:block;width:.45rem;height:.45rem;flex:none;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;transition:transform .15s ease}
.mb__main-item:hover>.mb__main-link::after,.mb__main-item:focus-within>.mb__main-link::after{transform:translateY(1px)}
.mb__dropdown{box-sizing:border-box;position:absolute;z-index:20;top:100%;left:50%;width:max-content;min-width:20rem;max-width:calc(100vw - 2rem);padding:1.25rem;background:#fff;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.16);opacity:0;pointer-events:none;transform:translate(-50%,.4rem);transition:opacity .15s ease,transform .15s ease}
.mb__main-item:hover>.mb__dropdown,.mb__main-item:focus-within>.mb__dropdown{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.mb__columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1.25rem}.mb__col{min-width:0}
.mb__col-header{margin:0 -.35rem .65rem;padding:0 .35rem .65rem;border-bottom:2px solid color-mix(in srgb,var(--accent) 35%,transparent)}.mb__col-title{font-weight:700;color:var(--ink);text-decoration:none}.mb__col-subtitle{display:block;color:var(--muted);font-size:.82rem;line-height:1.4;margin-top:.2rem}
.mb__col-list{list-style:none;margin:0;padding:0}.mb__item{margin:.25rem 0}.mb__item-link{position:relative;display:block;color:var(--fg);text-decoration:none;padding:.55rem 1.7rem .55rem .65rem;border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);border-radius:8px;background:color-mix(in srgb,var(--accent) 4%,#fff);transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}.mb__item-link::after{content:"→";position:absolute;right:.65rem;top:.55rem;color:var(--accent);font-weight:700;transition:transform .15s ease}.mb__item-link>span{display:block;color:var(--ink);font-weight:650;line-height:1.3}.mb__item-tagline,.mb__item-title,.mb__item-sub{display:block}.mb__item-tagline,.mb__item-sub{color:var(--muted);font-size:.8rem;line-height:1.35;margin-top:.15rem}.mb__item-link:hover,.mb__item-link:focus-visible{color:var(--ink);background:color-mix(in srgb,var(--accent) 11%,#fff);border-color:color-mix(in srgb,var(--accent) 25%,var(--line));transform:translateX(.15rem)}.mb__item-link:hover::after,.mb__item-link:focus-visible::after{transform:translateX(.2rem)}.mb__item-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media(max-width:760px){.mb__main{display:block}.mb__main-item{border-top:1px solid var(--line)}.mb__dropdown{position:static;width:auto;margin:.3rem 0 1rem;transform:none;opacity:1;pointer-events:auto;box-shadow:none;padding:.75rem;border-radius:8px}.mb__main-item--has-dropdown>.mb__main-link::after{display:none}}

main{display:block}
.layer{position:relative}
/* Reveal-on-scroll (punt 994): `motion.js` zet `.has-motion` op <html> zodra het draait en
   `[data-revealed="true"]` per laag zodra ze in beeld komt (of al boven-de-vouw staat bij
   laden). Zonder `.has-motion` — geen JS, of nog niet geladen — blijft alles gewoon zichtbaar:
   deze regels gelden dus nooit voor een no-JS bezoeker. */
.has-motion .layer > .layer__sc > .layer__inner{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.has-motion .layer[data-revealed="true"] > .layer__sc > .layer__inner{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.has-motion .layer > .layer__sc > .layer__inner{opacity:1;transform:none;transition:none}}
/* De laag-wrapper is een BENOEMDE container, zodat een laag zich naar zijn eigen breedte kan
   gedragen in plaats van naar die van het venster. Een tekst+beeld-laag in een driekoloms
   grid is smal, ook op een breed scherm, en schakelt nu nog op de vensterbreedte -- dat is de
   verkeerde maat en het is precies waar de lagen in de praktijk op stukliepen.

   `variables.css` schrijft dit al voor ("component-breedte-afhankelijke layouts -> @container,
   niet @media"), maar er was geen container om tegen te meten. Deze regel verandert op zichzelf
   niets zichtbaars; ze maakt de `@container`-regels mogelijk die er per laag bij komen.

   Benoemd (`layer`) en niet anoniem: zo kan een geneste container (de carousel heeft er al een)
   niet per ongeluk de vraag van een buitenliggende laag beantwoorden.

   Nagemeten voordat dit erin ging: `container-type: inline-size` zet ook layout-containment aan,
   en dan wordt deze wrapper een containing block voor `position: fixed`-kinderen. In het
   framework staat geen enkel vast gepositioneerd element BINNEN deze wrapper -- `overlay.js`
   verplaatst backdrop en paneel naar `document.body` (regels 125/131) en de zoek-overlay hangt
   aan de `<section>`, dus naast `.layer__sc`. Zet een site zelf iets vasts in een laag, dan is
   dat de plek om te kijken. (03-09-2026) */
.layer__inner{max-width:var(--max);margin:0 auto;container:layer / inline-size}
.layer__bg,.layer__fg{position:absolute;inset:0;pointer-events:none}
/* De content moet BOVEN de absolute achtergrond liggen. Stond alleen op
   .hero--image, waardoor elke andere laag met een achtergrondkleur op
   .layer__bg z'n eigen inhoud verborg (gevonden op SVS 466, #289). */
/* Geen z-index: bg, sc en fg zijn alle drie positioned, dus de DOM-volgorde bepaalt wie er
   bovenop ligt -- en die is bg, sc, fg. Precies de bedoelde stapeling, zonder een enkele
   z-index die met andere lagen kan gaan vechten.
   `position:relative` blijft wel nodig: zonder dat is `.layer__sc` niet positioned en
   schildert de absolute `.layer__bg` eroverheen -- dat was de aanleiding voor de z-index
   (gevonden op SVS 466, #289). Positioned zijn is genoeg; hoger staan hoeft niet. */
.layer__sc{position:relative}

/* Parallax (F1183, 30-09-2026 -- derde herziening, na twee eerdere regressierondes op dit
   mechanisme).

   De vorige versie (`scale()+translateY()` op de hele `.layer__bg`-box, met `overflow:hidden`
   op `[data-parallax] > .layer__sc`) had twee bugs, allebei gevonden op Greenchalets (476,
   laag 51, volbeeld-achtergrond diep in de pagina):
   1. `--scroll-y` is de PAGINA-brede, absolute scrollpositie -- niet hoe ver de sectie zelf
      door de viewport gescrold is. Bij scrollY~4000 en strength 0.4 stond de achtergrond
      ~2000px boven de eigen sectie: volledig losgezongen, overlapte de sectie ver erboven.
   2. `.layer__bg` is een ZUSJE van `.layer__sc` (beide losse kinderen van `.layer`), dus de
      clip op `.layer__sc` beschermde 'm sowieso niet bij een volbeeld-achtergrond -- en een
      clip die dat wél had gedaan (op `.layer` zelf) loopt weer tegen de eerdere regressie aan
      (sticky-elementen/overlappende buursecties, zie de git-historie van dit blok).

   Nieuwe aanpak lost beide in één keer op, en heeft geen `overflow:hidden` meer nodig: de
   foto schuift binnen haar eigen `.layer__bg`-box (`background-position`) i.p.v. dat de hele
   box getransformeerd wordt. Dat blijft PER DEFINITIE binnen de box.

   Alle berekening zit in `public/modules/parallax.js` (sectie-relatieve offset + de
   bijbehorende `background-size`-marge, zie dat bestand) -- die zet het resultaat als INLINE
   style op `.layer__bg`, want zowel `background-position` als `background-size` kunnen ZELF
   ook door het CMS gecompileerd zijn (`@layer item`, wint altijd van deze `@layer framework`-
   regel). Hier staat daarom alleen de constante: de transform expliciet uitzetten, zodat een
   eerder gecompileerde/gecachte waarde niet ineens weer meetelt.

   `[data-parallax]` wordt door {@see \Framework\Layer\Section} alleen op een sectie gezet
   wanneer `StyleRegistry::designSection()` een niet-lege `parallax-strength` zag ({@see
   \Framework\Layer\StyleRegistry::hasParallax()}). Een laag zonder parallax betaalt er dus
   niets voor.

   BEKENDE BEPERKING (ongewijzigd): dit werkt alleen voor lagen waar `.layer__bg` de
   achtergrond zelf draagt (een CMS-`background-image` op `design_layer`). `layer_hero`
   rendert z'n foto niet via `.layer__bg` (die blijft daar een lege, decoratieve div) maar via
   een `<picture>` binnen `.layer__inner` -- parallax op een hero is een apart stuk werk, hier
   bewust niet meegenomen. */
[data-parallax] .layer__bg{transform:none}

.hero{background:var(--surface)}
/* Het beeld zelf komt sinds punt 311 als `<picture>` uit de renderer en niet meer als
   achtergrond; `--hero-bg` bestaat niet meer. De regel die 'm hier als achtergrond zette is
   daarom weg — een `var()` die niet bestaat maakt de hele declaratie ongeldig, dus hij deed al
   niets. `position:relative` blijft: de overlays verankeren erop. */
.hero--image{position:relative}
/* De hero krijgt z'n hoogte van bovenaf: `aspect-ratio` uit `--hero-shape` (het gekozen
   Header type) of een vaste hoogte uit `--hero-h`. `.layer__sc` staat in de flow en werd
   daar niet in meegenomen -- die bleef zo hoog als z'n eigen inhoud, en dat is bij een lege
   hero alleen de padding van `.layer__inner`.
   Het beeld hangt met `inset:0` in `.layer__sc` (die is positioned), dus dat beeld dekte
   alleen die eigen hoogte. Gemeten op site 1 (02-09-2026, 1440px breed): sectie 600, sc 224,
   beeld 224 -- de onderste 376px van de hero toonde de laag-achtergrond in plaats van het
   beeld. Ook de overlays hebben de volle hoogte nodig, want die verankeren op `top:0;bottom:0`.
   Alleen waar de hoogte van bovenaf komt; bij `format=original` is het beeld juist zelf
   maatgevend en moet sc gewoon meegroeien. */
.hero[data-hero-shape] .layer__sc,
.hero[data-hero-shape-m] .layer__sc,
.hero[data-hero-fixed] .layer__sc,
.hero[data-hero-shape] .layer__sc > .layer__inner,
.hero[data-hero-shape-m] .layer__sc > .layer__inner,
.hero[data-hero-fixed] .layer__sc > .layer__inner{height:100%}
/* GEEN hardgecodeerde donkere deken meer. Die stond hier als `.hero--image::before` met
   z-index 1, verloor van `.layer__sc` (ook 1, en later in de DOM) en werd dus onder het
   beeld geschilderd -- nagemeten op 02-09-2026: bron (38,70,110), gerenderd (37,70,114),
   geen verduistering. Hij deed al die tijd niets.
   Belangrijker dan dat hij stuk was: een laag heeft `bg` en `fg` om iets onder of over
   z'n inhoud te leggen, en die zijn vanuit het CMS te sturen. Een eigen mechanisme voor
   alleen de hero is een uitzondering op een structuur die juist voor elke laag gelijk
   hoort te zijn. Wie een donkere laag wil, zet die in `fg`. */
/* `position:relative` blijft, om twee redenen. Ten eerste staat `.hero__content` naast het
   absoluut gepositioneerde `.hero__background`, en zonder positionering schildert dat beeld
   eroverheen. Ten tweede leunen sommige overlays met `overflow:hidden` erop -- die hebben een
   positioned voorouder nodig om tegen af te knippen (Ronny, 02-09-2026). De z-index is wél
   weg: die was er alleen om boven de deken hierboven uit te komen. Het element komt niet uit
   het framework maar uit site-templates (svs gebruikt 'm), dus de regel weghalen zou daar de
   tekst achter de foto duwen. */
.hero--image .hero__content{position:relative}
.hero--image .hero__subtitle{color:rgba(255,255,255,.92)}
.hero--image .hero__eyebrow{color:rgba(255,255,255,.85)}
.hero__title{font-size:2.4rem;margin:0 0 .5rem;color:var(--ink)}
.hero__title--overlay{color:var(--theme-color-7,#fff)}
.hero__subtitle{font-size:1.15rem;color:var(--muted);margin:0}
.hero__eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--muted);margin:0 0 .5rem}

.prose{margin:.5rem 0}
.heading{margin:0 0 .5rem}
.layer__cta{margin-top:1.2rem}

.layer--cta{background:var(--ink);text-align:center}
.layer--cta .heading{color:#fff}
.layer--cta .prose{color:rgba(255,255,255,.85)}
.layer--cta .btn{background:var(--accent);color:var(--ink);font-weight:600}
.layer--cta .btn:hover{opacity:.9}

.usps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.75rem}

.products{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.75rem}
.product-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.07);display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease}
.product-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.11);transform:translateY(-2px)}
.product-card__link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
.product-card__media img{width:100%;height:200px;object-fit:cover;display:block}
.product-card__body{padding:1.2rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.product-card__title{margin:0;font-size:1.05rem;color:var(--ink)}
.product-card__sub,.product-card__intro{margin:0;color:var(--muted);font-size:.9rem}
.product-card__price{margin-top:auto;padding-top:.6rem;font-weight:700;color:var(--ink)}
.product-card__buy{font-size:.85rem;padding:.55rem .9rem}

/* Verouderd duplicaat van een eerdere footer-implementatie (Framework\Cms\FooterRenderer)
   opgeruimd -- footer.css (Framework\Layer\Renderer\LayerFooter) is nu de enige bron voor
   .site-footer__address/__row--main/__col--links/__socials-wrap e.d. (punt 989, 17-09-2026).
   De creditbalk-regels hieronder blijven WEL bestaan: shell.css laadt op elke pagina, ook als er
   geen volle footer/footer.css is (FooterCreditGridTest documenteert waarom). */
.site-footer__credit{width:100%;margin-top:.5rem;padding-top:1.25rem;font-size:.85rem}
.site-footer__credit-inner{max-width:var(--content-max,var(--maxw,1200px));margin-inline:auto;padding-inline:var(--gutter,1.5rem);display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:1rem}
.site-footer__credit-group{grid-column:1;justify-self:start;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.site-footer__menu{list-style:none;display:flex;gap:1rem;margin:0;padding:0;flex-wrap:wrap}
.site-footer__menu a{color:var(--muted);text-decoration:none}
.site-footer__menu a:hover{color:var(--ink)}
.site-footer__copyright{grid-column:2;justify-self:end}
.site-footer__credit-link{grid-column:3;justify-self:end;display:inline-flex;align-items:center;color:var(--muted)}
.site-footer__credit-link:hover{color:var(--ink)}
.site-footer__credit-logo{height:1.4rem;width:auto;display:block}
@media(max-width:640px){.site-footer__credit-inner{grid-template-columns:1fr;justify-items:center;text-align:center}.site-footer__credit-inner>*{grid-column:1;justify-self:center}}
.layer-text__grid{display:grid;grid-template-columns:var(--ti-cols,repeat(2,minmax(0,1fr)));gap:var(--ti-grid-gap,var(--design-gap,clamp(2rem,5vw,4.5rem)));align-items:start}
.layer-text-form__form{margin-top:0}
@media (max-width:640px){.layer-text__grid{grid-template-columns:1fr}}
@media (min-width:641px){.layer-text__grid{gap:var(--ti-grid-gap-d,var(--ti-grid-gap,var(--design-gap,clamp(2rem,5vw,4.5rem))))}}
.contact-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:2.5rem}
@media (max-width:640px){.contact-grid{grid-template-columns:1fr}}
.contact-info__text{border-left:3px solid var(--accent);padding-left:1.2rem}
.contact-info__name{font-weight:700;color:var(--ink);margin:0 0 .6rem}
.contact-info__line{margin:0 0 .6rem;color:var(--muted);line-height:1.6}
.contact-info a{color:var(--ink);text-decoration:none}
.contact-info a:hover{color:var(--accent)}
.contact-info__map{width:100%;height:200px;border:0;border-radius:8px;margin-top:1.2rem;display:block}
.form-row{margin-bottom:1rem}
.form-field__label{display:block;font-size:.9rem;font-weight:600;margin-bottom:.3rem}
/* :not(.date-trigger) -- date-picker.css (@layer mm) beheert die knop al volledig, in
   beide presentaties (plain: eigen rand, split: rand naar de binnenste waarde-span). Zonder
   deze uitsluiting wint dit ONGENESTE shell.css-blok altijd (zie de toelichting in
   skeleton/templates/partials/head.php bij de critical/mm-sublaag-declaratie -- hetzelfde
   mechanisme dat daar al eerder de cookiebanner-knop brak), en kreeg de split-knop een
   tweede, ongewenste rand bovenop die van date-picker.css (punt 1194-vervolg, Noorthey). */
.form-field__control:not(.date-trigger){width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:6px;font:inherit;background:#fff}
.form-field__control:not(.date-trigger):focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px;border-color:var(--focus-ring)}
textarea.form-field__control{min-height:8rem;resize:vertical}
.form-field__sublabel{color:var(--muted);font-size:.82rem}
.form-field__error{color:#b00020;font-size:.82rem;margin-top:.25rem}
.form-actions{margin-top:1rem}
.btn,.ds-button,button[type=submit]{display:inline-flex;align-items:center;gap:var(--space-2,.5rem);background:var(--ink);color:#fff;border:0;border-radius:6px;padding:.65rem 1.4rem;font:inherit;cursor:pointer;text-decoration:none}
.btn:hover,button[type=submit]:hover{opacity:.92}
/* Vloeiende hover op knoppen (punt 1197). Zonder transition sloeg de kleur van `button_hover` hard om. Een vaste lijst
   en geen `all`: `all` animeert ook opvulling/breedte en alles wat een site zelf toevoegt. `transform` staat erbij zodat een
   lift die een site zelf toevoegt (translateY) meeanimeert. Bij "animaties uit" geen overgang. Bewust alleen `.btn` en
   `.ds-button`, niet `button[type=submit]`: dit blok staat ongenest in `@layer framework` en wint van geneste sublagen. */
.btn,.ds-button{transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease,opacity .2s ease}
@media(prefers-reduced-motion:reduce){.btn,.ds-button{transition:none}}
.form-ok{background:#eef7ee;border:1px solid #cfe6cf;color:#1e5b2a;padding:1rem 1.2rem;border-radius:8px}

/* editmode (alleen zichtbaar bij ?editmode=mm) */
[data-edit-link]{position:relative}
html.em-active [data-edit-link]:hover{outline:2px dashed var(--accent);outline-offset:-2px}
.layer__em{position:absolute;top:.6rem;right:.6rem;z-index:60;opacity:0;transition:opacity .15s ease}
html.em-active [data-edit-link]:hover > .layer__em{opacity:1}
.layer__edit-cta{background:var(--ink);color:#fff;text-decoration:none;font-size:.78rem;padding:.35rem .7rem;border-radius:5px}
.edit-fab{position:fixed;left:1rem;bottom:1rem;z-index:200;background:#fff;color:#1a1a1a;border-radius:24px;padding:.35rem .5rem;display:flex;align-items:center;gap:.6rem;box-shadow:0 6px 24px rgba(0,0,0,.18);font-size:.9rem}
.edit-fab__close{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#eef0f3;color:#555;text-decoration:none;font-size:1.15rem;line-height:1}
.edit-fab__close:hover{background:#e2e5e9;color:#000}
.edit-fab__label{font-weight:500}
.edit-fab__toggle{position:relative;display:block;width:42px;height:24px;border-radius:12px;background:#cbd0d6;flex:0 0 auto;transition:background .15s}
.edit-fab__toggle--on{background:#22c55e}
.edit-fab__knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.edit-fab__toggle--on .edit-fab__knob{left:21px}

.sitemap__list{list-style:none;padding:0;margin:0}
.sitemap__list--root{margin-left:.35rem;padding:.2rem 0 .2rem 1.35rem;border-left:2px solid var(--line)}
.sitemap__item{position:relative;margin:.15rem 0}
.sitemap__list--root>.sitemap__item::before{content:"";position:absolute;left:-1.35rem;top:1.05rem;width:1.05rem;border-top:2px solid var(--line)}
.sitemap__link{display:inline-block;color:var(--ink);text-decoration:none;font-weight:600;padding:.3rem .65rem;border-radius:6px;transition:color .15s ease,background-color .15s ease}
.sitemap__link:hover,.sitemap__link:focus-visible{color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,#fff)}
.sitemap__link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.sitemap__link--no-route{color:var(--muted);cursor:default}
/* `.sitemap`-prefix voor de SPECIFICITEIT, niet voor de scoping: de reset in
   assets/critical/reset.css is `ul[class],ol[class]{margin:0;padding:0}` en dat is
   (0,1,1) -- specifieker dan een kale klasse (0,1,0). De inspringing van de
   sublijsten werd daardoor weggezet en de hele sitemap stond plat, terwijl het derde
   niveau (twee klassen, dus (0,2,0)) wel insprong. Ronny zag het op ronny.demo. */
.sitemap .sitemap__list--sub{margin:.05rem 0 .25rem 1.35rem;padding:.05rem 0 .1rem 1.15rem;border-left:2px solid color-mix(in srgb,var(--accent) 42%,var(--line))}
.sitemap .sitemap__list--sub>.sitemap__item::before{content:"";position:absolute;left:-1.15rem;top:1rem;width:.85rem;border-top:2px solid color-mix(in srgb,var(--accent) 42%,var(--line))}
.sitemap .sitemap__list--sub .sitemap__link{padding:.28rem .65rem;font-size:.92rem;font-weight:400}
.sitemap__list--sub .sitemap__list--sub{margin-left:1.15rem;padding-left:1rem}
.sitemap__list--sub .sitemap__list--sub .sitemap__link{font-size:.86rem;color:var(--muted)}
.section-head{margin-bottom:1rem}
.section-head{margin-bottom:1rem}
}