*{box-sizing:border-box}
  body{margin:0;background:var(--licht);color:var(--tekst);font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;--cym-focus:var(--amber-lijn);--cym-kaartrand:var(--licht-rand);--cym-accent:var(--amber-vlak);--cym-accentdiep:var(--amber-lijn);--cym-tekst:var(--tekst);--cym-gedempt:var(--gedempt);--cym-link:var(--tekst);--cym-linkhover:var(--inkt);--cym-vlak:var(--licht);--cym-rand:var(--licht-rand);--cym-kaartvlak:#FFFFFF;--cym-knop:var(--amber-vlak);--cym-knoptekst:var(--tekst);--cym-knophover:var(--amber-op-donker)}
  html{scroll-behavior:smooth}
  a{color:var(--tekst);text-decoration:none}
  a:hover{color:var(--gedempt)}
  [data-donker] a,[data-petrol] a{color:var(--amber-op-donker)}
  [data-donker] a:hover,[data-petrol] a:hover{color:var(--amber-op-donker-hover)}
  ::selection{background:var(--amber-op-donker);color:var(--tekst)}
  /* focusrand: twee waarden, gekozen op de ondergrond, als één overervende regel */
  a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--amber-lijn);outline-offset:2px;border-radius:4px}
  [data-donker] a:focus-visible,[data-donker] button:focus-visible,[data-donker] input:focus-visible,[data-petrol] a:focus-visible,[data-petrol] button:focus-visible{outline:2px solid var(--amber-op-donker)}
  @media (max-width:1040px){[data-navlink]{display:none!important}[data-navtoggle]{display:inline-flex!important}}
  /* onder 760px: één kolom voor de tweekolomsblokken (data-m1), twee kolommen
     voor de rasters (data-m2, onder 520px één), de kopbalk smaller; onder 520px
     staat de knop "Zoek in de studies" alleen nog in het menu. */
  @media (max-width:760px){[data-kopbalk]{padding:13px 20px!important}[data-m1]{grid-template-columns:1fr!important;gap:24px!important}[data-m1][data-kaartgap]{gap:12px!important}[data-m2]{grid-template-columns:1fr 1fr!important;gap:28px!important}[data-lijstrij]{grid-template-columns:40px 1fr!important;gap:8px 16px!important}[data-lijstrij]>:nth-child(n+3){grid-column:2;text-align:left!important}[data-schaal]{white-space:normal!important}}
  @media (max-width:520px){[data-navzoek]{display:none!important}[data-m2]{grid-template-columns:1fr!important}}
    [hidden]{display:none!important}
    /* focus zichtbaar op alles wat bediend wordt. Palet A: koper. Stond op het
       amber van het oude palet, dus een pagina die opnieuw wordt omgezet krijgt
       de nieuwe rand; dat hoort samen te vallen met het omzetten van die pagina. */
    [data-petrol]{--cym-focus:var(--amber-op-donker)}
    a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cym-focus,var(--amber-lijn));outline-offset:2px;border-radius:4px}
    [data-cym-paneel]{visibility:hidden;opacity:0;pointer-events:none;transition:opacity .12s ease}
    [data-navmenu]:hover [data-cym-paneel],[data-navmenu]:focus-within [data-cym-paneel]{visibility:visible;opacity:1;pointer-events:auto}
  .c0:hover{background:var(--inkt-hover)}
  .c1:hover{background:var(--amber-op-donker-hover);color:var(--inkt)}
  .c2:hover{border-color:var(--amber-op-donker)}
  .c3:hover{color:var(--amber-op-donker)}
  .c4:focus{border:1.5px solid var(--amber-lijn);outline:2px solid var(--amber-lijn);outline-offset:2px}
  .c5:hover{color:#FFFFFF}