/* AS Support — Handleiding Beveiligd Dashboard: docs shell */

/* Roboto wordt zelf meegeleverd vanuit assets/fonts/. Nooit bij Google ophalen:
   de handleiding is openbaar, en een externe fontrequest stuurt het IP-adres van
   iedere bezoeker naar een derde partij. De twee bestanden zijn de variabele
   Roboto van Google Fonts v51, één per unicode-bereik. Alle gewichten wijzen
   naar hetzelfde bestand, precies zoals Google ze zelf uitlevert. */
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url('fonts/roboto-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url('fonts/roboto-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url('fonts/roboto-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url('fonts/roboto-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url('fonts/roboto-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url('fonts/roboto-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url('fonts/roboto-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url('fonts/roboto-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--as-primary:#004B87;--as-secondary:#29ABE2;--as-accent:#DF6C1F;
--as-white:#fff;--as-muted:#f8f8ff;--as-smoke:#f5f5f5;
--as-border-subtle:rgba(15,23,42,.08);--as-border:rgba(15,23,42,.12);--as-border-strong:rgba(15,23,42,.18);
--as-text:#333;--as-text-2:#4b5563;--as-text-3:#6b7280;
--as-soft:rgba(0,75,135,.08);--as-focus:rgba(0,75,135,.18);
--ok-bg:rgba(34,197,94,.10);--ok-bd:rgba(34,197,94,.24);--ok-tx:#15803d;
--info-bg:rgba(41,171,226,.10);--info-bd:rgba(41,171,226,.28);--info-tx:#1d4ed8;
--warn-bg:rgba(245,158,11,.10);--warn-bd:rgba(245,158,11,.26);--warn-tx:#b45309;
--acc-bg:rgba(223,108,31,.08);--acc-bd:rgba(223,108,31,.30);
--r-sm:8px;--r-md:10px;--r-lg:12px;--r-xl:16px;--r-pill:999px;
--tile:0 18px 44px rgba(15,23,42,.06);
--top:56px;--nav-w:300px;--rail-w:232px;
}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:'Roboto',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.65;color:var(--as-text);background:var(--as-white);-webkit-font-smoothing:antialiased}
a{color:var(--as-primary);text-decoration:none}
a:hover{color:#00365f;text-decoration:underline}
/* Links in de lopende tekst krijgen een streep en iets meer gewicht. Alleen
   kleur was te weinig: het blauw verschilt maar 1,4 op 1 van de tekst eromheen,
   dus wie kleur minder goed onderscheidt zag helemaal niet dat er een link
   stond. De blokken die zelf al een kader hebben (gerelateerde onderwerpen,
   vorige/volgende) houden hun eigen opmaak, anders krijgen die tegels een
   streep door de hele titel. */
.prose a{font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(0,75,135,.6);text-underline-offset:.18em}
.prose a:hover,.prose a:focus-visible{color:#00365f;text-decoration-thickness:2px;text-decoration-color:currentColor}
.prose .rel a,.prose .pn a,.prose .ov__tile,.prose .toc__ttl{font-weight:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
svg{display:block}
h1,h2,h3,h4{color:var(--as-primary);font-weight:500;line-height:1.25}

/* ---------- topbar ---------- */
.top{position:sticky;top:0;z-index:950;height:var(--top);background:var(--as-primary);color:#fff;display:flex;align-items:center;gap:16px;padding:0 20px}
.top__logo{height:20px;width:auto;display:block}
.top__div{width:1px;height:22px;background:rgba(255,255,255,.24)}
.top__title{font-size:14px;font-weight:500;letter-spacing:.01em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top__spacer{flex:1}
.top__link{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:rgba(255,255,255,.88);padding:6px 12px;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-sm);transition:background 160ms,border-color 160ms}
.top__link:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.5);color:#fff;text-decoration:none}
.top__burger{display:none;width:36px;height:36px;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-sm);align-items:center;justify-content:center;color:#fff}

/* ---------- shell ---------- */
.shell{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr) var(--rail-w);align-items:start}
.nav{position:sticky;top:var(--top);height:calc(100vh - var(--top));overflow-y:auto;overscroll-behavior:contain;background:var(--as-muted);border-right:1px solid var(--as-border-subtle);padding:20px 14px 48px}
.nav__close{display:none}
main{min-width:0;padding:0 56px 96px}
.rail{position:sticky;top:var(--top);max-height:calc(100vh - var(--top));overflow-y:auto;padding:40px 20px 48px 0}

/* ---------- search field (AS Support notch-label) ---------- */
.field{position:relative;margin-bottom:20px}
.field__control{width:100%;height:44px;padding:0 38px 0 13px;font:inherit;font-size:14px;color:var(--as-text);background:#fff;border:1px solid #6b7280;border-radius:6px;outline:none;transition:border-color 150ms,box-shadow 150ms}
.field__control::placeholder{color:#9aa3af;font-style:italic}
.field__control:hover{border-color:#4b5563}
.field__control:focus{border-color:var(--as-primary);box-shadow:0 0 0 3px var(--as-focus)}
.field__label{position:absolute;top:2px;left:11px;transform:translateY(-50%);background:var(--as-muted);padding:0 6px;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--as-text);pointer-events:none;white-space:nowrap}
.field__control:focus~.field__label{color:var(--as-primary)}
.field__info{pointer-events:auto;flex:0 0 auto;width:17px;height:17px;border-radius:5px;border:1.3px solid #a8b4c4;color:#7b8798;display:inline-flex;align-items:center;justify-content:center;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;font-size:11px;line-height:1;background:#fff;cursor:help;user-select:none}
.field__info:hover{border-color:var(--as-secondary);color:var(--as-secondary)}
.field__icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#8a94a4;pointer-events:none}

/* ---------- sidebar nav ---------- */
.nav__eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--as-text-3);padding:0 8px;margin:18px 0 6px}
.nav__list{list-style:none}
.nav__row{display:flex;align-items:center;gap:6px;border-radius:var(--r-sm);transition:background 140ms}
.nav__row:hover{background:rgba(0,75,135,.06)}
.nav__link{flex:1;min-width:0;display:flex;gap:9px;align-items:baseline;padding:7px 8px;font-size:14px;color:var(--as-text-2);border-radius:var(--r-sm)}
.nav__link:hover{text-decoration:none;color:var(--as-primary)}
.nav__num{flex:0 0 26px;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--as-text-3);font-weight:500}
.nav__txt{flex:1;min-width:0}
.nav__row--soon .nav__link{color:#9aa3af;cursor:default}
.nav__row--soon .nav__link:hover{color:#9aa3af}
.nav__row--soon:hover{background:transparent}
.nav__row--active{background:var(--as-soft)}
.nav__row--active .nav__link{color:var(--as-primary);font-weight:500}
.nav__row--active{box-shadow:inset 2px 0 0 var(--as-secondary)}
.nav__grouprow{display:flex;align-items:center;gap:2px}
.nav__groupmain{flex:1;min-width:0}
.nav__toggle{flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:#8a94a4}
.nav__toggle:hover{background:rgba(15,23,42,.06);color:var(--as-primary)}
.nav__toggle svg{transition:transform 180ms ease}
.nav__group[data-open="true"] .nav__toggle svg{transform:rotate(90deg)}
.nav__sub{list-style:none;display:none;margin:2px 0 8px}
.nav__group[data-open="true"] .nav__sub{display:block}
.nav__sub .nav__link{padding-left:34px;font-size:13.5px}
.nav__sub .nav__num{flex:0 0 34px}
.nav__subhead{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--as-text-3);padding:10px 8px 3px 34px}
.nav__dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;margin-right:10px;background:#22c55e}
.nav__dot--soon{background:#cfd6e0}

/* ---------- page header ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:24px 0 0;font-size:13px;color:var(--as-text-3)}
.crumbs a{color:var(--as-text-3)}
.crumbs a:hover{color:var(--as-primary)}
.crumbs span{color:#c2c9d4}
.hd{padding:20px 0 28px;border-bottom:1px solid var(--as-border-subtle);margin-bottom:36px}
.hd__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--as-secondary)}
.hd h1{font-size:34px;margin:12px 0 10px;letter-spacing:-.01em}
.hd__lead{font-size:17px;line-height:1.6;color:var(--as-text-2);max-width:none}
.hd__meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px;font-size:12.5px;color:var(--as-text-3)}
.hd__meta i{width:1px;height:12px;background:var(--as-border);display:block}

/* ---------- prose ---------- */
/* De tekstkolom vult de hele breedte van het middenvlak, zodat de marge links
   en rechts even groot is. Het middenvlak is zelf al begrensd door de shell. */
.prose{max-width:none}
.prose h2{font-size:23px;margin:44px 0 14px;letter-spacing:-.005em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:17px;font-weight:600;margin:28px 0 8px}
.prose p{margin:0 0 14px;color:var(--as-text);text-wrap:pretty}
.prose strong{font-weight:600;color:#1f2c3d}
.prose ul,.prose ol{margin:0 0 16px;padding-left:20px}
.prose li{margin:0 0 6px}
.prose ul li::marker{color:var(--as-secondary)}
.kbd{display:inline-block;padding:1px 7px;border:1px solid var(--as-border);border-bottom-width:2px;border-radius:5px;background:var(--as-smoke);font-size:12.5px;font-weight:500;color:#1f2c3d}
.lede{font-size:16px;color:var(--as-text-2)}

/* ---------- panels & callouts ---------- */
.panel{display:flex;gap:12px;padding:16px 18px;border-radius:var(--r-lg);border:1px solid var(--as-border-subtle);background:var(--as-muted);margin:0 0 20px}
.panel__ico{flex:0 0 auto;margin-top:2px;color:var(--as-primary)}
.panel__bd{min-width:0}
.panel h4{font-size:14.5px;font-weight:600;margin:0 0 4px}
.panel p:last-child{margin-bottom:0}
.panel--info{background:var(--info-bg);border-color:var(--info-bd)}
.panel--info .panel__ico{color:#1d6fa5}
.panel--ok{background:var(--ok-bg);border-color:var(--ok-bd)}
.panel--ok .panel__ico{color:var(--ok-tx)}
.panel--ok h4{color:#136c34}
.panel--warn{background:var(--warn-bg);border-color:var(--warn-bd)}
.panel--warn .panel__ico{color:var(--warn-tx)}
.panel--warn h4{color:var(--warn-tx)}
.panel--todo{background:var(--acc-bg);border:1px dashed var(--acc-bd)}
.panel--todo .panel__ico{color:var(--as-accent)}
.panel--todo h4{color:#a65314;font-size:11px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- steps ---------- */
.steps{list-style:none;counter-reset:s;padding:0;margin:8px 0 0}
.step{counter-increment:s;position:relative;padding:0 0 26px 44px}
.step::before{content:counter(s);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--as-soft);border:1px solid rgba(0,75,135,.16);color:var(--as-primary);font-size:13.5px;font-weight:600;display:flex;align-items:center;justify-content:center}
.step::after{content:"";position:absolute;left:14px;top:32px;bottom:2px;width:1px;background:var(--as-border-subtle)}
.step:last-child::after{display:none}
.step__t{font-size:16px;font-weight:600;color:var(--as-primary);margin:3px 0 6px}
.step p{margin:0 0 10px}
.step>*:last-child{margin-bottom:0}
.res{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:var(--r-sm);background:var(--as-muted);border:1px solid var(--as-border-subtle);font-size:14px;color:var(--as-text-2);margin:0 0 12px}
.res svg{flex:0 0 auto;margin-top:3px;color:var(--as-secondary)}

/* ---------- figures ---------- */
.fig{margin:0 0 14px}
.fig__frame{border:1px solid var(--as-border);border-radius:var(--r-lg);background:var(--as-smoke);overflow:hidden;box-shadow:var(--tile)}
.fig__frame image-slot{display:block;width:100%}
.fig__frame img{display:block;width:100%;height:auto}
/* Tijdelijke notitie voor de redactie. Deze blokken gaan er later uit. */
.te-controleren{border:1px dashed var(--acc-bd);background:var(--acc-bg);color:#a65314;padding:16px 18px;border-radius:var(--r-lg);margin:0 0 20px}
.te-controleren__label{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.te-controleren>*:last-child{margin-bottom:0}
.overslaan-link{position:absolute;left:-9999px;top:0;background:#fff;color:var(--as-primary);padding:8px 16px;z-index:960}
.overslaan-link:focus{left:16px;top:8px}
.fig figcaption{margin-top:8px;font-size:12.5px;color:var(--as-text-3)}
.fig figcaption b{font-weight:600;color:var(--as-text-2)}

/* ---------- related / prev-next ---------- */
.rel{list-style:none;display:grid;gap:8px;padding:0;margin:0}
.rel a{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--as-border-subtle);border-radius:var(--r-md);background:#fff;font-size:14.5px;font-weight:500;transition:border-color 160ms,transform 160ms,box-shadow 160ms}
.rel a:hover{text-decoration:none;border-color:rgba(0,75,135,.28);transform:translateY(-1px);box-shadow:var(--tile)}
.rel svg{margin-left:auto;color:var(--as-secondary)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:44px;padding-top:28px;border-top:1px solid var(--as-border-subtle)}
.pn a{display:block;padding:14px 16px;border:1px solid var(--as-border-subtle);border-radius:var(--r-lg);background:#fff;transition:border-color 160ms,box-shadow 160ms}
.pn a:hover{text-decoration:none;border-color:rgba(0,75,135,.28);box-shadow:var(--tile)}
.pn small{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--as-text-3);margin-bottom:4px}
.pn b{font-size:15px;font-weight:500;color:var(--as-primary)}
.pn a.pn--next{text-align:right}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:600;line-height:1.5;white-space:nowrap;border:1px solid}
.badge--ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-tx)}
.badge--soon{background:rgba(15,23,42,.03);border-color:var(--as-border);color:var(--as-text-3)}

/* ---------- rail ---------- */
.rail__h{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--as-text-3);margin-bottom:10px;padding-left:11px}
.rail__list{list-style:none}
.rail__list a{display:block;padding:5px 0 5px 11px;font-size:13px;line-height:1.45;color:var(--as-text-3);border-left:2px solid var(--as-border-subtle)}
.rail__list a:hover{color:var(--as-primary);text-decoration:none;border-color:var(--as-border-strong)}
.rail__list a.is-active{color:var(--as-primary);font-weight:500;border-color:var(--as-secondary)}
.rail__list .lvl3 a{padding-left:22px;font-size:12.5px}
.rail__foot{margin-top:22px;padding:14px;border:1px solid var(--as-border-subtle);border-radius:var(--r-lg);background:var(--as-muted);font-size:12.5px;color:var(--as-text-2)}
.rail__foot b{display:block;font-weight:600;color:var(--as-primary);margin-bottom:3px;font-size:13px}

/* ---------- overview page ---------- */
.ov{max-width:none}
.ov__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 8px}
.ov__tile{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--as-border-subtle);border-radius:var(--r-lg);background:#fff;box-shadow:var(--tile);transition:transform 160ms,border-color 160ms}
.ov__tile:hover{text-decoration:none;transform:translateY(-1px);border-color:rgba(0,75,135,.28)}
.ov__tile b{font-size:15px;font-weight:500;color:var(--as-primary)}
.ov__tile span{font-size:13px;color:var(--as-text-3)}
.ov__tile .ico{width:32px;height:32px;border-radius:var(--r-sm);background:var(--as-soft);color:var(--as-primary);display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.toc{margin-top:8px}
.toc__ch{border-top:1px solid var(--as-border-subtle)}
.toc__row{display:flex;align-items:center;gap:14px;padding:14px 4px}
.toc__num{flex:0 0 34px;font-size:13px;font-variant-numeric:tabular-nums;font-weight:600;color:var(--as-primary)}
.toc__ttl{flex:1;min-width:0;font-size:16px;font-weight:500;color:var(--as-primary)}
.toc__ttl.is-soon{color:var(--as-text-2);font-weight:400}
.toc__sub{list-style:none;padding:0 0 10px}
.toc__sub .toc__row{padding:7px 4px}
.toc__sub .toc__num{flex:0 0 44px;padding-left:10px;font-weight:500;color:var(--as-text-2)}
.toc__sub .toc__ttl{font-size:14.5px;font-weight:400;color:var(--as-primary)}
.toc__sub .toc__ttl.is-soon{color:var(--as-text-2)}
.toc__group{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--as-text-3);padding:12px 0 4px 54px}
.toc a.toc__ttl:hover{text-decoration:underline}

/* ---------- footer ---------- */
.foot{background:var(--as-primary);color:rgba(255,255,255,.86);font-size:13px;padding:22px 20px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;align-items:center}
.foot a{color:#fff;opacity:.9}
.foot a:hover{opacity:1}

.scrim{display:none;position:fixed;inset:var(--top) 0 0;background:rgba(15,23,42,.36);z-index:940}

@media (max-width:1180px){.shell{grid-template-columns:var(--nav-w) minmax(0,1fr)}.rail{display:none}main{padding:0 36px 80px}}
@media (max-width:900px){
.shell{grid-template-columns:minmax(0,1fr)}
.nav{position:fixed;left:0;top:var(--top);bottom:0;width:min(320px,86vw);z-index:945;transform:translateX(-102%);transition:transform 220ms ease;box-shadow:0 18px 44px rgba(15,23,42,.14)}
body[data-nav="open"] .nav{transform:none}
body[data-nav="open"] .scrim{display:block}
.nav__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--as-border);color:var(--as-text-2);margin:0 0 12px auto}
.top__burger{display:flex}
main{padding:0 20px 72px}
.hd h1{font-size:27px}
.pn{grid-template-columns:1fr}
.pn a.pn--next{text-align:left}
}

/* ---------- codefragment in de lopende tekst ---------- */
/* Een voorbeeldlink met campagnelabels is lang. Zonder overflow-wrap breekt hij
   niet af en schuift de hele pagina op een telefoon horizontaal mee (gemeten:
   645px inhoud in een venster van 500px). Vandaar anywhere en niet break-word. */
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;font-size:.86em;background:var(--as-soft);border:1px solid var(--as-border-subtle);border-radius:6px;padding:.15em .4em;overflow-wrap:anywhere;color:#00365f}

/* ---------- FAQ: genummerde secties met eigen inhoudsopgave ---------- */
/* De ankerlijst rechts toont zowel de secties als de dertien vragen en werd
   daarmee te lang om in te scannen. Deze lijst bovenaan de pagina geeft het
   overzicht, de inspringing eronder laat zien welke vraag bij welke sectie hoort. */
.faq__nr{display:inline-block;min-width:2.6em;color:var(--as-text-3);font-variant-numeric:tabular-nums;font-weight:500}
h2 .faq__nr,h3 .faq__nr{color:var(--as-secondary)}
.faq__inhoud{margin:22px 0 34px;padding:20px 22px;background:var(--as-muted);border:1px solid var(--as-border-subtle);border-radius:var(--r-lg)}
.faq__inhoud-kop{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--as-text-3)}
.faq__lijst,.faq__lijst ol{list-style:none;margin:0;padding:0}
.faq__lijst > li + li{margin-top:14px}
.faq__lijst-sec{margin:0 0 4px;font-weight:500;color:var(--as-primary)}
.faq__lijst ol{padding-left:2.6em}
.faq__lijst ol li{margin:2px 0}
.faq__lijst ol li{display:flex;align-items:baseline;font-size:14.5px}
.faq__lijst ol .faq__nr{margin-left:-2.6em}
.faq__sectie{padding-left:26px;border-left:2px solid var(--as-border-subtle);margin:0 0 34px}
@media (max-width:700px){.faq__sectie{padding-left:14px}.faq__lijst ol{padding-left:2.2em}.faq__lijst ol .faq__nr{margin-left:-2.2em}.faq__nr{min-width:2.2em}}

/* Vastgezet onderwerp bovenaan het menu, met een scheidingslijn naar de
   genummerde hoofdstukken eronder. */
.nav__vast{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--as-border-subtle)}
.nav__vast .nav__num{display:flex;align-items:center;justify-content:center;color:var(--as-text-3)}
.nav__vast .nav__num svg{display:block}
.nav__vast .nav__row--active .nav__num{color:var(--as-primary)}