*{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-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}
  /* Focusrand. Eén regel, geen uitzondering per component: de kleur komt uit
     --cym-focus en die erft. De pagina staat op var(--tekst), dat op cream, op de
     lichte sectie en op wit boven de 3 op 1 voor niet-tekstueel contrast uitkomt.
     Elk element met een petrolachtergrond draagt data-petrol en zet de variabele
     op var(--amber-op-donker), dat op beide petrols daarboven uitkomt. Koper var(--amber-lijn) haalde de
     eis op cream (2,93), op de lichte sectie (2,69) en op de middenpetrol (2,61)
     niet; een focusindicator valt onder die eis ook al is hij geen tekst. */
  [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}
  a:hover{color:var(--gedempt)}
  ::selection{background:var(--amber-op-donker);color:var(--tekst)}
  @keyframes cymSpotIdle{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
  @media (prefers-reduced-motion:reduce){[data-bm-spot]{animation:none!important}}
  @media (max-width:1040px){[data-navlink]{display:none!important}[data-navtoggle]{display:inline-flex!important}}
  /* onder 760px: kopbalk smaller en de voettekst in twee kolommen; onder 520px
     verdwijnt de knop "Zoek in de studies" uit de balk en staat hij alleen in het menu */
  @media (max-width:760px){[data-kopbalk]{padding:13px 20px!important}[data-m1]{grid-template-columns:1fr!important}[data-m1][data-kaartgap]{gap:12px!important}[data-m2]{grid-template-columns:1fr 1fr!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:hover{color:var(--amber-op-donker-hover)}
  .c5:hover{color:var(--gedempt)}
  .c6:hover{fill:var(--amber-lijn)}
  .c7:hover{background:var(--amber-vlak);color:var(--tekst)}
  .c8:hover{border-color:var(--amber-lijn);transform:translateY(-3px);box-shadow:0 12px 26px rgba(27,36,48,.08)}
  .c9:hover{color:#FFFFFF}

  /* herstel-thuis 10-10-2026 (handwijziging): PEMF-blok direct onder de hero. Twee kolommen vanaf 960px,
     daaronder gestapeld; geen horizontale overloop op 390px. */
  .cy-pemfblok-kaart{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center}
  .cy-pemfblok-tekst{min-width:0;max-width:640px}
  .cy-pemfblok-beeld{min-width:0}
  .cy-pemfblok-knop:hover{background:var(--amber-op-donker-hover)!important}
  @media (min-width:960px){.cy-pemfblok-kaart{grid-template-columns:minmax(0,1fr) minmax(0,38%);gap:48px}}
  @media (max-width:760px){.cy-pemfblok>div{padding:16px 20px 44px!important}.cy-pemfblok-kaart{padding:26px 20px!important}}