/* 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-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(--accent);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}
/* 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;padding:2.5rem 1.5rem;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 (punt "parallax-strength echt laten werken", 03-09-2026 -- herzien na review).
   `--parallax-strength` komt uit de CMS-slot (StyleCompiler::mapField()); `--scroll-y` is de
   al bestaande, gedeelde scroll-positie uit scroll-progress.js (rAF-gethrottled, 1 listener
   voor de hele pagina -- geen nieuwe listener hiervoor nodig).

   GESCOPEERD op `[data-parallax]`, niet blanket op `.layer__bg`/`.layer__sc`. Eerste versie
   zette `overflow:hidden` op ELKE `.layer__sc` (nodig om de verschoven achtergrond te clippen)
   en brak daarmee twee dingen die niets met parallax te maken hebben: `position:sticky` van elk
   kind in die laag (gemeten: een sticky element met top:16px scrolde weg naar top:-784px zodra
   z'n voorouder een overflow-context werd -- de webshop-bestelsamenvatting is zo'n sticky
   element), en het bestaande overlap-effect van support op rvswerkbladenfabriek.nl (475,
   `margin-top:-144px` tussen twee secties) -- overflow:hidden op de voorouder sneed dat af
   zonder enige melding. Beide zijn het gevaarlijke soort regressie: niets valt om, het gedrag
   verdwijnt gewoon.

   `[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 -- geen overflow-context, geen transform-berekening, sticky en overlappende
   buursecties blijven overal elders precies zoals ze waren. */
[data-parallax] > .layer__sc{overflow:hidden}
[data-parallax] .layer__bg{
    transform:scale(calc(1 + var(--parallax-strength,0) * .15))
              translateY(calc(var(--scroll-y,0) * var(--parallax-strength,0) * -1px));
}
/* Beide `var(...)`-fallbacks op 0, zodat een sectie die per ongeluk het attribuut draagt zonder
   geldige waarde (zou niet moeten voorkomen, `hasParallax()` filtert op niet-leeg) alsnog een
   no-op is (`scale(1) translateY(0)`) in plaats van op een lege var() te breken.

   `scale()` naast `translateY()`: een achtergrond die exact zijn sectie vult (`inset:0`) heeft
   geen ruimte om te bewegen zonder een rand bloot te leggen -- de schaal geeft de marge waarin
   de vertaling kan bewegen. 15% bij --parallax-strength:1 is ruim genoeg voor het bereik dat
   --scroll-y in de praktijk aflevert (een sectie is zelden meer dan een paar honderd px hoog in
   beeld); is dat ooit te krap, dan is dit getal het enige dat hoeft te veranderen.

   Bewust GEEN `will-change: transform`: nu de regel al gescoped is tot de paar secties die
   'm echt gebruiken, is de compositing-winst er wel, maar het is een optimalisatie en geen
   correctheid -- wie het merkbaar traag vindt op een concrete site zet 'm daar gericht.

   Reduced-motion: scroll-progress.js zet --scroll-y niet aan onder prefers-reduced-motion
   (blijft op 0) -- deze regel erft dat gratis mee, geen aparte media-query nodig.

   BEKENDE BEPERKING: 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. */

.hero{background:var(--surface)}
.hero .layer__inner,.hero__content{max-width:var(--max);margin:0 auto;padding:4.5rem 1.5rem}
/* 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{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 .layer__inner,.hero--image .hero__content{padding:7rem 1.5rem}
.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}

.site-footer{border-top:1px solid var(--line);background:var(--surface);margin-top:2rem}
.site-footer__inner{max-width:var(--max);margin:0 auto;padding:2.5rem 1.5rem;display:flex;gap:3rem;flex-wrap:wrap}
.site-footer__col{min-width:12rem}
.site-footer__nav a{display:block;color:var(--muted);text-decoration:none;margin:.35rem 0}
.site-footer__nav a:hover{color:var(--ink)}
.site-footer__title{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .75rem}
.site-footer__name{font-weight:600}
.site-footer address{font-style:normal;color:var(--muted);line-height:1.8}

/* Rijke, CMS-gedreven voet (Framework\Cms\FooterRenderer): contact + socials + link-kolommen.
   Klassen sluiten aan op de design-slots (SiteDesign::design_footer). */
.site-footer__row--main{width:100%;display:flex;gap:3rem;flex-wrap:wrap}
.site-footer__col--contact{flex:1 1 16rem;min-width:14rem}
.site-footer__col-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .75rem;font-weight:600}
.site-footer__address{font-style:normal;color:var(--muted);line-height:1.9;font-size:.92rem}
.site-footer__socials-wrap{margin-top:1.1rem}
.site-footer__socials{list-style:none;display:flex;gap:.6rem;margin:0;padding:0;flex-wrap:wrap}
.site-footer__socials a,.site-footer__social{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--ink);color:#fff;text-decoration:none;transition:transform .15s ease,opacity .15s ease}
.site-footer__socials a:hover{transform:translateY(-2px);opacity:.9}
.site-footer__social-inner{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.site-footer__social-icon{display:inline-flex}
.site-footer__col--links{flex:2 1 22rem;display:flex;gap:2.5rem;flex-wrap:wrap}
.site-footer__links-col{flex:1 1 9rem;min-width:8rem}
.site-footer__links ul{list-style:none;margin:0;padding:0}
.site-footer__links li{margin:.45rem 0}
.site-footer__links a{color:var(--muted);text-decoration:none;font-size:.92rem}
.site-footer__links a:hover{color:var(--ink)}
/* De renderer zet het menu links en copyright + merk-credit rechts. */
.site-footer__credit{width:100%;margin-top:.5rem;padding-top:1.25rem;border-top:1px solid var(--line);color:var(--muted);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__row--main{gap:2rem}.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,.layer-text-form__grid,.layer-text-text__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--design-gap,2.5rem);align-items:start}
.layer-text-form__form{margin-top:0}
@media (max-width:640px){.layer-text__grid,.layer-text-form__grid,.layer-text-text__grid{grid-template-columns:1fr}}
.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}
.form-field__control{width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:6px;font:inherit;background:#fff}
.form-field__control:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
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,button[type=submit]{display:inline-block;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}
.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(--accent);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}
}