/* Fiscaal zoeken: designsysteem (gedeeld door alle pagina's, na het eigen <style> van de pagina geladen).
   Juridisch-klassiek: serif (Source Serif 4) voor tekst en kopjes, Inter voor menu's, knoppen en labels; diep marineblauw als
   enig accent; statuskleuren ingetogen en altijd ook in woorden. Lettertypen zelf gehost (public/fonts, SIL OFL 1.1). */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(/fonts/source-serif-4-latin.woff2) format("woff2-variations"),url(/fonts/source-serif-4-latin.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;
  src:url(/fonts/source-serif-4-latin-italic.woff2) format("woff2-variations"),url(/fonts/source-serif-4-latin-italic.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-latin.woff2) format("woff2-variations"),url(/fonts/inter-latin.woff2) format("woff2")}

:root{
  /* letters */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,monospace;
  /* typografische schaal (px) en regelafstanden */
  --t-xs:11.5px;--t-s:12.5px;--t-m:13.5px;--t-b:14.5px;--t-l:16px;--t-lees:17px;--t-xl:20px;--t-2xl:26px;--t-3xl:34px;
  --r-ui:1.45;--r-lees:1.62;--leesbreedte:35em;
  /* kleur: inkt op papier, één accent */
  --inkt:#161b26;--tekst:#232834;--grijs:#5b6170;--grijs2:#868b97;--lijn:#e2dfd7;--lijn2:#ecE9e3;--lijnsterk:#cfcbc0;
  --papier:#f7f6f2;--wit:#fff;--zacht:#f1efea;--zachter:#faf9f6;
  --marine:#16294d;--marine2:#21396a;--link:#1f4787;--marinevlak:#eceff6;--marinerand:#ccd5e6;
  --rood:#8a2c2c;--roodvlak:#f7eded;--roodrand:#e7caca;--oker:#7a5710;--okervlak:#f7f0df;--okerrand:#e6d5ad;
  --groen:#2e5a3c;--groenvlak:#ebf2ed;--groenrand:#c7dccd;
  /* vervangen (historische) versie van een wettekst: een eigen, ingetogen tint, los van oker (aanhangig, toekomstig) */
  --historisch:#4b3f72;--historischvlak:#f2f0f7;--historischrand:#d8d2e6;
  --markeer:#f3e3a0;--markeerhuidig:#e9c45a;
  --goud:#c9a24a;--goudvlak:#fcf8ee;--goudtekst:#5d4a1c;--marinevlak2:#e2e7f1;--druk:#000;--drukgrijs:#555;--druklijn:#999;
  --schaduw:0 1px 2px rgba(22,27,38,.05),0 2px 8px rgba(22,27,38,.05);--schaduwhoog:0 12px 40px rgba(22,27,38,.18),0 2px 6px rgba(22,27,38,.08);
  --zij:252px;--rond:6px;
  /* oude namen van de pagina's, naar het nieuwe palet */
  --donker:var(--marine);--accent:var(--link);--achter:var(--papier);--vlak:var(--marinevlak);
  --groenvlak:#ebf2ed;--let:var(--okervlak);--letrand:var(--okerrand);--lettekst:var(--oker);--weg:#f6e1e1;--wegtekst:var(--rood);--bij:#e2efe5;--bijtekst:var(--groen);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tekst);font:var(--t-b)/var(--r-ui) var(--sans);font-feature-settings:"cv11";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:var(--link);text-decoration:none;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2{font-family:var(--serif);font-weight:600;color:var(--inkt);letter-spacing:-.005em}
:focus-visible{outline:2px solid var(--marine2);outline-offset:2px;border-radius:3px}
::selection{background:#d7deec}
mark{background:var(--markeer);color:inherit;padding:0 1px;border-radius:2px} mark.huidig{background:var(--markeerhuidig)}
code{font:12.5px/1.4 var(--mono);background:var(--zacht);border:1px solid var(--lijn2);border-radius:3px;padding:0 4px}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:19px;padding:0 5px;font:600 10.5px/1 var(--sans);letter-spacing:.02em;
  color:var(--grijs);background:var(--wit);border:1px solid var(--lijnsterk);border-bottom-width:2px;border-radius:4px}
.serif{font-family:var(--serif)}
/* lezen: wettekst, uitspraak, besluit en notitie in dezelfde serif, maat en regelafstand, met een vaste leesbreedte */
.leestekst,.wettekst{font:400 var(--t-lees)/var(--r-lees) var(--serif);color:var(--tekst)}
.wettekst{max-width:calc(var(--leesbreedte) + 40px)}
.klein-kap{font:500 13px/1.3 var(--sans);color:var(--grijs)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------------ knoppen: één familie */
.knop,.mijn-knop{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--lijnsterk);border-radius:var(--rond);
  background:var(--wit);color:var(--marine);font:500 13px/1 var(--sans);white-space:nowrap;cursor:pointer;text-decoration:none;transition:background .12s,border-color .12s,box-shadow .12s}
.knop:hover,.mijn-knop:hover{border-color:#a9b4ca;background:var(--zachter);text-decoration:none}
.knop:active{background:var(--zacht)}
.knop.hoofd{background:var(--marine);border-color:var(--marine);color:#fff;padding:0 16px;font-weight:600}
.knop.hoofd:hover{background:var(--marine2);border-color:var(--marine2)}
/* klein = een actie bij een item of lijst: altijd een stille tekstknop zonder rand (bron, kopieer, link, volg, notitie, bewaar),
   zodat een actierij één familie is; een omrande knop hoort alleen bij een formulier of werkbalk */
.knop.klein,.mijn-knop{height:28px;padding:0 8px;font-size:12.5px;font-weight:500;border-color:transparent;background:transparent;color:var(--grijs)}
.knop.klein:hover,.mijn-knop:hover{background:var(--zacht);border-color:transparent;color:var(--marine)}
.knop.stil{border-color:transparent;background:transparent;color:var(--link)} .knop.stil:hover{background:var(--marinevlak);border-color:transparent}
/* actierij: stille knoppen naast elkaar, groepen gescheiden door een korte streep */
.actierij{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px;min-width:0}
.actierij .scheid{width:1px;height:16px;background:var(--lijn);margin:0 6px;flex:none}
/* één patroon voor "toon alle": tekst in de interfaceletter, met een pijl (naar een lijst) of een punt (uitklappen) */
.toon-alle{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:0;border:0;background:none;font:500 13px/1.3 var(--sans);color:var(--link);cursor:pointer;
  text-decoration:none;white-space:nowrap;list-style:none}
.toon-alle::after{content:"\2192";transition:transform .12s} .toon-alle:hover{color:var(--marine);text-decoration:underline;text-underline-offset:3px} .toon-alle:hover::after{transform:translateX(2px)}
.toon-alle::-webkit-details-marker{display:none}
.toon-alle.uitklap::after{content:"\25BE"} .toon-alle.uitklap:hover::after{transform:none} details[open] > .toon-alle.uitklap::after,details[open] > summary .toon-alle.uitklap::after{content:"\25B4"}
details[open] > .toon-alle .ta-dicht,details:not([open]) > .toon-alle .ta-open,details[open] > summary .ta-dicht,details:not([open]) > summary .ta-open{display:none}
/* keuzelijst in een zin ("gesorteerd op …"): zonder kader tot je hem aanwijst */
select.keuze-stil{field-sizing:content;width:auto!important;height:26px;padding:0 24px 0 6px!important;margin:0 0 0 -2px;border:1px solid transparent;border-radius:5px;background-color:transparent;font:600 13px/1 var(--sans);color:var(--inkt);
  background-position:right 6px center;max-width:220px}
select.keuze-stil:hover{border-color:var(--lijnsterk);background-color:var(--wit)}
.knop.link{height:auto;border:0;background:none;padding:0;color:var(--link);font:inherit;text-decoration:underline;text-underline-offset:2px}
.knop.link:hover{background:none;color:var(--marine)}
.knop[disabled]{opacity:.5;cursor:default}
/* gesegmenteerde schakelaar */
.schakel{display:inline-flex;gap:2px;padding:2px;background:var(--zacht);border:1px solid var(--lijn);border-radius:7px;overflow:visible}
.schakel button{border:0;background:transparent;height:26px;padding:0 10px;border-radius:5px;font:500 12.5px/1 var(--sans);color:var(--grijs);cursor:pointer;white-space:nowrap}
.schakel button+button{border-left:0}
.schakel button:hover{color:var(--marine);background:rgba(255,255,255,.6)}
.schakel button.actief{background:var(--wit);color:var(--marine);font-weight:600;box-shadow:0 1px 2px rgba(22,27,38,.12),0 0 0 1px rgba(22,27,38,.04)}
.schakel .n{opacity:1;color:var(--grijs2);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}
/* invoer */
input[type=search],input[type=text],input[type=date],input[type=password],select,textarea{border:1px solid var(--lijnsterk);border-radius:var(--rond);background:var(--wit);color:var(--tekst)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--marine2);box-shadow:0 0 0 3px rgba(33,57,106,.14)}
input::placeholder,textarea::placeholder{color:var(--grijs2)}

/* ------------------------------------------------------------------ chips en labels: neutraal, één accent, status ingetogen */
.chip{display:inline-flex;gap:5px;align-items:center;height:26px;padding:0 4px 0 10px;border-radius:5px;background:var(--marinevlak);color:var(--marine);
  font:500 12.5px/1 var(--sans);border:1px solid var(--marinerand);max-width:100%}
a.chip{padding-right:10px} a.chip:hover{text-decoration:none;border-color:#9fb0cf}
.chip button{border:0;background:transparent;color:var(--marine);font-size:15px;line-height:1;padding:2px 5px;border-radius:4px;cursor:pointer}
.chip button:hover{background:var(--marinerand)}
.chip.wis{background:transparent;border-color:transparent;color:var(--link);text-decoration:underline;text-underline-offset:2px;padding:0 4px}
/* labels bij een regel (afloop, vindplaats, jaar, artikel): geen kaders maar tekst met middenpunten, zoals metadata in een register;
   status alleen ingetogen gekleurd en altijd in woorden */
.tag{display:inline-block;vertical-align:baseline;height:auto;padding:0;border:0;border-radius:0;background:none;font:500 12.5px/1.5 var(--sans);color:var(--grijs);
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.tag + .tag::before{content:"\00b7";display:inline-block;margin:0 7px;color:var(--grijs2);font-weight:400}
/* een metaregel die afbreekt, begint nooit met een losse punt: elk label draagt zijn punt vóór zich, en de eerste 15 px van elke
   regel vallen buiten beeld (het label is 15 px naar links geschoven en daar afgeknipt) */
.metaregel,.res .r3,.bw-r .m{display:flex!important;flex-wrap:wrap;align-items:baseline;row-gap:2px;margin-left:-15px!important;clip-path:inset(-8px -8px -8px 15px)}
.metaregel > .tag::before,.res .r3 > .tag::before,.bw-r .m > .tag::before{content:"\00b7";display:inline-block;width:15px;margin:0;text-align:center;color:var(--grijs2);font-weight:400;text-decoration:none}
/* artikelen als filter: rustig grijs in de regel, pas bij aanwijzen een link (geen blauwe woorden tussen de metadata) */
.tag.art{color:var(--grijs);cursor:pointer;background:none} .tag.art:hover{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.tag.jaar,.tag.besl,.tag.verwijzing,.tag.concl,.tag.ngp,.tag.ongegrond,.tag.niet-ontvankelijk{color:var(--grijs);background:none}
.tag.vind{color:var(--inkt);font-weight:600;background:none}
.tag.gegrond{color:var(--groen);background:none}
.tag.verv,.tag.rg{color:var(--rood);background:none}
.tag.onzeker{color:var(--oker);background:none}
.tag.terloops,.tag.ngp{font-style:italic;font-weight:400;background:none}
.tag.gevr{color:var(--inkt);font-weight:600}
/* status als chip (alleen op de wettenpagina): ingetogen palet */
.chip.oranje{background:var(--okervlak);border-color:var(--okerrand);color:var(--oker)}
.chip.rood{background:var(--roodvlak);border-color:var(--roodrand);color:var(--rood)}
.chip.grijs{background:var(--zachter);border-color:var(--lijn);color:var(--grijs)}
/* teken voor nieuw: één vorm (marine stip met getal), nooit een rode pil */
.nieuw-teken,.nieuw,.mijn-nieuw,.mijn-knop .nieuw{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--marine);color:#fff;font:600 10.5px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ------------------------------------------------------------------ meldingen: links een streep, nooit luider dan de inhoud */
.melding{display:block;border-left:3px solid var(--marinerand);background:var(--wit);border-radius:0 var(--rond) var(--rond) 0;padding:8px 12px;font-size:var(--t-m);color:var(--tekst);line-height:1.5}
.melding.let{border-left-color:#c9a24a;background:#fcf8ee}
.melding.fout{border-left-color:#b45454;background:#fbf3f3}
.melding.stil{border-left-color:var(--lijn);background:transparent;color:var(--grijs);padding:2px 0 2px 12px}
.melding b{color:var(--inkt)}
.kg-blok{background:#fcf8ee;border:0;border-left:3px solid #c9a24a;border-radius:0 var(--rond) var(--rond) 0}
.kg-blok b{color:var(--oker)}

/* ------------------------------------------------------------------ lege toestand */
.leeg-toestand{padding:28px 24px;text-align:left;border:1px dashed var(--lijnsterk);border-radius:8px;background:var(--zachter);color:var(--grijs);font-size:var(--t-m)}
.leeg-toestand h3,.leeg-toestand .kop{font:600 var(--t-l)/1.3 var(--serif);color:var(--inkt);margin:0 0 4px;text-transform:none;letter-spacing:0}
.leeg-toestand p{margin:0 0 12px;max-width:62ch}
.leeg-toestand .acties{display:flex;gap:8px;flex-wrap:wrap}
.leeg-toestand.klein{padding:16px 18px} .leeg-toestand.klein p{margin:0}

/* ------------------------------------------------------------------ laden: skeletten in plaats van "Laden…" (ook voor bestaande .laden) */
@keyframes fz-glans{0%{background-position:-480px 0}100%{background-position:480px 0}}
.skelet,.laden{position:relative;color:transparent!important;user-select:none;pointer-events:none}
.laden{display:block;min-height:132px;margin:14px 0;padding:0!important;text-align:left!important;font-size:0!important;
  background:
    linear-gradient(var(--lijn2),var(--lijn2)) 0 0/42% 14px no-repeat,
    linear-gradient(var(--lijn2),var(--lijn2)) 0 30px/96% 10px no-repeat,
    linear-gradient(var(--lijn2),var(--lijn2)) 0 50px/90% 10px no-repeat,
    linear-gradient(var(--lijn2),var(--lijn2)) 0 70px/94% 10px no-repeat,
    linear-gradient(var(--lijn2),var(--lijn2)) 0 90px/62% 10px no-repeat,
    linear-gradient(var(--lijn2),var(--lijn2)) 0 118px/80% 10px no-repeat}
.laden::after,.skelet::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.65) 50%,transparent 100%) 0 0/480px 100% no-repeat;
  animation:fz-glans 1.3s ease-in-out infinite}
.skelet{display:block;border-radius:4px;background:var(--lijn2);overflow:hidden}
.skelet.regel{height:10px;margin:8px 0} .skelet.kop{height:14px;width:40%;margin:4px 0 12px}
.skelet-kaart{padding:14px 16px;border-bottom:1px solid var(--lijn2)}
.skelet-kaart .skelet:nth-child(1){width:34%;height:11px} .skelet-kaart .skelet:nth-child(2){width:78%;height:13px}
.skelet-kaart .skelet:nth-child(3){width:92%} .skelet-kaart .skelet:nth-child(4){width:56%}
@media (prefers-reduced-motion:reduce){.laden::after,.skelet::after{animation:none}}

/* ------------------------------------------------------------------ notitie in de marge: een potloodaantekening bij het lid
   Grafietgrijs, cursief, met een dunne potloodstreep; op een breed scherm naast de tekst (in de marge), anders onder het lid. */
.wettekst .lid{position:relative}
.lid:has(.kantlijn) > .lnr .mijn-bol{display:none}
.kantlijn{display:flex;flex-direction:column;gap:10px;margin:10px 0 4px}
.kantnotitie{display:block;width:100%;margin:0;padding:1px 0 2px 11px;border:0;border-left:1.5px solid #a8a498;background:none;text-align:left;cursor:pointer;
  font:italic 400 14px/1.5 var(--serif);color:#4a4f5a;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.kantnotitie:hover{border-left-color:var(--marine);color:var(--inkt)}
.kantnotitie .kn-wie{display:block;font:500 10.5px/1.4 var(--sans);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs2);margin-bottom:1px}
@container inhoud (min-width:1040px){
  .wettekst .kantlijn{position:absolute;top:2px;left:calc(100% + 36px);width:236px;margin:0}
}

/* ------------------------------------------------------------------ toast */
.toast,.mijn-toast{background:var(--inkt);color:#fff;border-radius:7px;font:500 13px/1.4 var(--sans);padding:9px 16px;box-shadow:var(--schaduwhoog)}

/* ------------------------------------------------------------------ omlijsting: vaste zijbalk links, één kopbalk boven het werkvlak
   Elke pagina heeft dezelfde lijst: zijbalk (onderdelen), kopbalk (waar je bent, de ene zoekingang, de stand van de index) en
   daaronder het werkvlak. Een pagina met eigen bediening zet die in één werkbalk (.werkbalk) met dezelfde maat van knoppen en velden. */
:root{--kop:56px;--ctl:34px}
body.met-zijbalk{display:grid!important;grid-template-columns:var(--zij) minmax(0,1fr);grid-template-rows:var(--kop) minmax(0,1fr);height:100vh;overflow:hidden}
.werkvlak{grid-column:2;grid-row:2;min-width:0;min-height:0;height:calc(100vh - var(--kop));display:flex;flex-direction:column;overflow:hidden}
.werkvlak.scrollt{overflow:auto;display:block}
.zijbalk{grid-column:1;grid-row:1 / span 2;height:100vh;display:flex;flex-direction:column;background:var(--wit);border-right:1px solid var(--lijn);font-family:var(--sans);z-index:35;min-height:0}
.zb-kop{display:flex;align-items:center;gap:8px;height:var(--kop);padding:0 18px;border-bottom:1px solid var(--lijn2);flex:none}
.zb-merk{display:flex;align-items:center;gap:10px;color:var(--inkt);text-decoration:none!important;min-width:0}
.zb-teken{flex:none;width:28px;height:28px;border-radius:6px;background:var(--marine);color:#fff;display:grid;place-items:center;font:600 17px/1 var(--serif);padding-bottom:1px}
.zb-naam{display:flex;flex-direction:column;min-width:0}
.zb-naam b{font:650 16.5px/1.1 var(--serif);letter-spacing:-.01em;color:var(--inkt)}
.zb-naam small{font:500 10px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--grijs2);margin-top:3px}
.zb-sluit{display:none;margin-left:auto}
/* kopbalk: waar je bent links, de zoekingang in het midden, de stand van de index rechts */
.kopbalk{grid-column:2;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,480px) minmax(0,1fr);align-items:center;gap:20px;height:var(--kop);
  padding:0 28px;background:var(--wit);border-bottom:1px solid var(--lijn);font-family:var(--sans);z-index:20;min-width:0}
.kb-pad{display:flex;align-items:center;gap:8px;min-width:0;font:500 13.5px/1 var(--sans);color:var(--grijs);white-space:nowrap;overflow:hidden}
.kb-pad a{color:var(--grijs)} .kb-pad a:hover{color:var(--inkt);text-decoration:none}
.kb-pad .sep{color:var(--lijnsterk)} .kb-pad b{color:var(--inkt);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.kb-zoek{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 8px 0 12px;border:1px solid var(--lijnsterk);border-radius:8px;background:var(--zachter);
  color:var(--grijs);font:400 14px/1 var(--sans);cursor:pointer;text-align:left;transition:border-color .12s,background .12s}
.kb-zoek:hover{border-color:#a9b4ca;background:var(--wit);color:var(--tekst)}
.kb-zoek svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.kb-zoek span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-toets{height:20px;padding:0 6px;font-size:10.5px;letter-spacing:.03em}
.kb-stand{justify-self:end;font:400 12.5px/1.3 var(--sans);color:var(--grijs2);white-space:nowrap;font-variant-numeric:tabular-nums}
body.kb-zonder-zoek .kb-zoek{visibility:hidden}
/* werkbalk van een pagina: één regel, vaste hoogte, alle bediening even hoog */
.werkbalk{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;min-height:56px;padding:10px 28px;background:var(--wit);border-bottom:1px solid var(--lijn);flex:none}
.werkbalk input[type=search],.werkbalk input[type=text],.werkbalk select,.werkbalk .knop{height:var(--ctl)!important;padding-top:0!important;padding-bottom:0!important;font-size:13.5px!important;border-radius:var(--rond)}
.werkbalk input[type=search],.werkbalk input[type=text]{padding:0 11px!important}
.werkbalk label{font:500 12.5px/1 var(--sans);color:var(--grijs)}
/* keuzelijsten: rustig, eigen pijl in plaats van de standaard van de browser */
select{-webkit-appearance:none;appearance:none;padding-right:30px!important;background-color:var(--wit);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%235b6170' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:12px 12px;cursor:pointer;text-overflow:ellipsis}
select:hover{border-color:#a9b4ca}
select[multiple]{background-image:none;padding-right:8px!important}
.zb-nav{flex:1;overflow:auto;padding:10px 10px 14px;min-height:0}
.zb-label{font:600 10.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--grijs2);padding:16px 10px 7px}
.zb-nav a{display:flex;align-items:center;gap:10px;min-height:32px;padding:5px 10px;margin:1px 0;border-radius:6px;color:#353b48;font:500 13.5px/1.25 var(--sans);text-decoration:none;position:relative}
.zb-nav a svg{flex:none;width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--grijs2)}
.zb-nav a:hover{background:var(--zacht);color:var(--inkt)} .zb-nav a:hover svg{color:var(--grijs)}
.zb-nav a.actief{background:var(--marinevlak);color:var(--marine);font-weight:600} .zb-nav a.actief svg{color:var(--marine)}
.zb-nav a.actief::before{content:"";position:absolute;left:-10px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--marine)}
.zb-nav a.sub{padding-left:37px;min-height:28px;font-size:13px;font-weight:450;color:var(--grijs)}
.zb-nav a.sub.actief{color:var(--marine);font-weight:600}
.zb-nav a .zb-n{margin-left:auto;font:500 11.5px/1 var(--sans);color:var(--grijs2);font-variant-numeric:tabular-nums}
.zb-nav a .nieuw-teken{margin-left:auto}
.zb-nav a .zb-stip{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--marine);margin-right:6px;vertical-align:1px}
.zb-voet{border-top:1px solid var(--lijn2);padding:12px 20px 14px;font-size:12px;color:var(--grijs2);line-height:1.45}
.zb-voet a{color:var(--grijs);text-decoration:underline;text-underline-offset:2px}
.mobielbalk{display:none}
.zb-scherm{display:none}

/* ------------------------------------------------------------------ zoekvenster (Ctrl+K) */
dialog.palet{border:0;padding:0;margin:9vh auto auto;width:min(720px,calc(100vw - 24px));max-height:min(78vh,760px);border-radius:12px;background:var(--wit);
  box-shadow:var(--schaduwhoog);color:var(--tekst);font:var(--t-b)/var(--r-ui) var(--sans);overflow:hidden}
dialog.palet[open]{display:flex;flex-direction:column}
dialog.palet::backdrop{background:rgba(22,27,38,.32);backdrop-filter:blur(1.5px)}
.pl-invoer{display:flex;align-items:center;gap:10px;padding:0 16px;height:58px;border-bottom:1px solid var(--lijn);flex:none}
.pl-invoer svg{width:19px;height:19px;stroke:var(--grijs);fill:none;stroke-width:1.8;flex:none}
.pl-invoer input{flex:1;min-width:0;border:0!important;box-shadow:none!important;background:transparent;font:400 17px/1 var(--sans);color:var(--inkt);height:100%;padding:0}
.pl-invoer input:focus{outline:none}
.pl-invoer input::-webkit-search-cancel-button{display:none}
.pl-sluit{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 4px;border:0;background:none;border-radius:6px;color:var(--grijs);cursor:pointer;font:500 13px/1 var(--sans)}
.pl-sluit:hover{background:var(--zacht);color:var(--inkt)} .pl-sluit span{display:none}
.pl-lijst{overflow:auto;padding:6px 8px 10px;flex:1;min-height:0;overscroll-behavior:contain}
.pl-kop{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--grijs2);padding:14px 10px 6px;display:flex;gap:8px}
.pl-kop .r{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500}
.pl-item{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:2px 10px;align-items:start;padding:8px 10px;border-radius:7px;color:var(--tekst);text-decoration:none!important;cursor:pointer;border:1px solid transparent}
.pl-item svg{width:17px;height:17px;stroke:var(--grijs2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.pl-item .t{font-weight:550;color:var(--inkt);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-item .s{grid-column:2;color:var(--grijs);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-item .f{grid-column:2;color:#3f4552;font:400 13px/1.45 var(--serif);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pl-item .x{grid-row:1;grid-column:3;font-size:11.5px;color:var(--grijs2);white-space:nowrap;font-variant-numeric:tabular-nums}
.pl-item.actief{background:var(--marinevlak);border-color:var(--marinerand)} .pl-item.actief svg{stroke:var(--marine)}
.pl-item.actief .x::after{content:"↵";margin-left:6px;color:var(--marine)}
.pl-voet{display:flex;gap:16px;align-items:center;padding:9px 16px;border-top:1px solid var(--lijn);font-size:12px;color:var(--grijs);background:var(--zachter);flex:none}
.pl-voet span{display:inline-flex;gap:5px;align-items:center} .pl-voet .r{margin-left:auto}
.pl-leeg{padding:22px 12px;color:var(--grijs);font-size:13.5px}
.pl-groep+.pl-groep{border-top:1px solid var(--lijn2);margin-top:6px}
.pl-kop .r a{color:var(--link);font-size:12px} .pl-kop .toon-alle{margin:0;letter-spacing:0;text-transform:none}
.pl-skelet{border:0!important;padding:9px 10px 9px 42px!important}

/* ------------------------------------------------------------------ afdrukken: alleen de tekst, het citaat, de peildatum en de bron */
.afdrukkop,.afdrukvoet,.alleen-afdruk{display:none}
@media print{
  @page{margin:18mm 18mm 20mm}
  html,body{height:auto!important;overflow:visible!important;background:#fff!important}
  body,body.met-zijbalk{display:block!important;font:10.5pt/1.5 var(--serif);color:#000}
  .werkvlak{height:auto!important;overflow:visible!important;display:block!important;max-width:174mm;margin:0 auto}
  .zijbalk,.kopbalk,.werkbalk,.mobielbalk,.zb-scherm,dialog.palet,.toast,.mijn-toast,.knop,.mijn-groep,.mijn-bol,.schakel,button,select,input,form,.geen-afdruk{display:none!important}
  .afdrukkop{display:block!important;font:9pt/1.4 var(--sans);color:#444;border-bottom:.6pt solid #999;padding-bottom:5pt;margin-bottom:12pt}
  .afdrukkop b{font:600 11pt/1.3 var(--serif);color:#000;display:block}
  .afdrukvoet{display:block!important;font:8.5pt/1.4 var(--sans);color:#555;border-top:.6pt solid #bbb;padding-top:5pt;margin-top:16pt;overflow-wrap:anywhere}
  .afdrukvoet[hidden]{display:none!important}
  .alleen-afdruk{display:block!important}
  a{color:#000!important;text-decoration:none!important}
  mark{background:none!important;font-weight:600}
  h1,h2,h3{break-after:avoid} p,li{orphans:3;widows:3}
}

/* ------------------------------------------------------------------ smal (laptop): zijbalk smaller */
@media (max-width:1280px){:root{--zij:228px} .kopbalk{padding:0 20px;grid-template-columns:minmax(0,1fr) minmax(240px,400px) auto} .werkbalk{padding:10px 20px}}
/* aanraakscherm: geen sneltoetshints */
@media (hover:none){.kb-toets,.pl-voet,.pl-sluit kbd,.toets-hint{display:none!important}}
/* telefoon en tablet: de zijbalk schuift in als lade, bovenaan een balk met menu, merk en zoeken */
@media (max-width:820px){
  body.met-zijbalk{display:block!important;height:auto;overflow:visible}
  .werkvlak{height:auto;overflow:visible;display:block}
  .kopbalk{display:none}
  .werkbalk{padding:8px 12px;min-height:0}
  .zijbalk{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);transform:translateX(-102%);visibility:hidden;transition:transform .18s ease,visibility 0s .18s;box-shadow:none;z-index:60}
  body.zb-open .zijbalk{transform:none;visibility:visible;transition:transform .18s ease;box-shadow:var(--schaduwhoog)}
  body.zb-open .zb-scherm{display:block;position:fixed;inset:0;background:rgba(22,27,38,.32);z-index:55}
  .zb-sluit{display:inline-flex}
  .mobielbalk{display:flex;align-items:center;gap:8px;height:50px;padding:0 8px 0 6px;background:var(--wit);border-bottom:1px solid var(--lijn);position:relative;z-index:12}
  .mobielbalk .zb-merk{flex:1} .mobielbalk .zb-teken{width:26px;height:26px;font-size:16px} .mobielbalk .zb-naam b{font-size:16px}
  .mobielbalk button{display:inline-grid;place-items:center;width:40px;height:40px;border:0;background:transparent;border-radius:8px;color:var(--marine);cursor:pointer}
  .mobielbalk button:hover{background:var(--zacht)}
  .mobielbalk svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
  dialog.palet{margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  .pl-voet{display:none}
  .pl-sluit{height:36px;padding:0 10px;color:var(--marine);font-weight:600} .pl-sluit kbd{display:none} .pl-sluit span{display:inline}
  /* schakelaars en tabbladen op één regel: zelf horizontaal te schuiven, de pagina nooit */
  .schakel{max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .schakel::-webkit-scrollbar{display:none} .schakel button{flex:none}
}

/* ---------- zoeken in een geopend document (public/vinden.mjs): een smalle balk die bovenaan blijft staan zolang je zoekt ---------- */
.vindbalk{position:sticky;top:8px;z-index:6;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto;align-items:center;gap:2px 4px;margin:0 0 16px;padding:5px 6px 5px 12px;
  background:var(--wit);border:1px solid var(--lijnsterk);border-radius:var(--rond);box-shadow:var(--schaduw);max-width:var(--leesbreedte);font:500 13px/1.3 var(--sans)}
.vindbalk[hidden]{display:none}
.vindbalk:focus-within{border-color:var(--marinerand);box-shadow:0 0 0 3px var(--marinevlak),var(--schaduw)}
.vindbalk .vb-veld{min-width:0;display:flex;align-items:center;gap:8px;color:var(--grijs2);cursor:text}
.vindbalk .vb-veld svg{width:15px;height:15px;flex:none}
.vindbalk input,.vindbalk input[type=search]{flex:1;min-width:0;width:auto;height:30px!important;margin:0;padding:0!important;border:0!important;border-radius:0;outline:0!important;box-shadow:none!important;background:none!important;font:400 14px/1 var(--sans)!important;color:var(--tekst)}
.vindbalk input::-webkit-search-cancel-button{display:none}
.vindbalk .vb-tel{color:var(--grijs);white-space:nowrap;padding:0 4px;font-size:12.5px}
@media (max-width:520px){.vindbalk{padding-left:10px}.vindbalk .vb-knop{width:28px}.vindbalk .vb-tel{padding:0 2px}}
.vindbalk.niets .vb-tel{color:var(--rood)}
.vindbalk .vb-knop{width:30px;height:30px;border:0;border-radius:5px;background:none;color:var(--marine);font:400 18px/1 var(--sans);cursor:pointer}
.vindbalk .vb-knop:hover{background:var(--marinevlak)}
.vindbalk .vb-knop[data-vb=sluit]{color:var(--grijs);font-size:17px}
.vindbalk .vb-hint{grid-column:1 / -1;margin:4px -6px 0 -12px;padding:7px 12px 4px 35px;border-top:1px solid var(--lijn2);color:var(--grijs);font:400 12.5px/1.45 var(--sans)}
.vindbalk .vb-hint[hidden]{display:none}
.vindbalk .vb-link{border:0;background:none;padding:0;color:var(--link);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
mark.vind{background:var(--markeer);color:inherit;border-radius:2px;padding:0 1px} mark.vind.huidig{background:var(--markeerhuidig)}
/* onder 820 px scrolt het venster, niet .raam: een overflow anders dan clip maakt .raam dan het scrollvak voor sticky, en de vindbalk
   zou meescrollen; clip houdt horizontale overloop tegen zonder een scrollvak te zijn */
@media (max-width:820px){.raam{overflow-x:clip!important;overflow-y:visible!important}}
/* ---------- actiebalk bij een document of artikel: links wat je met het stuk doet (citeren, volgen, notitie, bewaren), rechts rustige
   hulpknoppen van dezelfde hoogte: zoeken in de tekst en afdrukken als pictogram (uitleg bij aanwijzen), de officiële bron als "Bron ↗" ---------- */
.ab-rechts{align-items:center}
.ab-knop.ab-ikoon{padding:0!important;aspect-ratio:1/1;justify-content:center;color:var(--grijs)}
.ab-knop.ab-ikoon svg{width:15px!important;height:15px!important}
.ab-knop.ab-ikoon:hover{color:var(--marine)}
.ab-knop.ab-bron{color:var(--link)}
/* smal (telefoon, of een smalle middenkolom): rij 1 = Kopieer citaat met rechts de hulpknoppen, rij 2 = Volg, Notitie, Bewaar */
@media (max-width:820px){
  .actiebalk{flex-wrap:wrap!important;row-gap:8px!important}
  .actiebalk > .ab-kopieer,.actiebalk > .ab-hoofd{order:1}
  .actiebalk > .ab-rechts{order:2;margin-left:auto!important;display:inline-flex!important;gap:6px}
  .actiebalk > .mijn-groep{order:3;flex-basis:100%;display:flex!important;flex-wrap:wrap;gap:6px}
  .actiebalk > .scheid{display:none}
}