/* Gedeelde stijlen. Eenmaal geladen, daarna gecached.
   Richting B (28-09-2026): tekstlinks op licht zijn inkt met een amber onderstreping;
   amber is op licht nooit tekstkleur. Kop en voet van de Fable-pagina's komen uit
   template-parts/ (inline stijlen uit de export); de .site-header/.site-footer-regels
   hieronder gelden voor archive/single/hub/tools-index. */
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
  a{color:var(--tekst);text-decoration:underline;text-decoration-color:var(--amber-lijn);text-decoration-thickness:1.5px;text-underline-offset:3px}
  a:hover{color:var(--tekst);text-decoration-color:var(--amber-lijn-hover)}
  ::selection{background:var(--amber-op-donker);color:var(--tekst)}
  a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-op-licht);outline-offset:2px;border-radius:4px}
  .skip-link{position:absolute;left:-9999px;top:0;background:var(--inkt);color:var(--tekst-op-donker);text-decoration:none;padding:10px 16px;border-radius:0 0 8px 0;z-index:200;font:600 14px var(--sans)}
  .skip-link:focus{left:0}
  .wrap{max-width:1180px;margin:0 auto;padding-left:40px;padding-right:40px}
  .ico{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex:none}
  .compliance{background:var(--inkt-diep);color:var(--gedempt-op-donker);font:500 11.5px/1.4 var(--sans);text-align:center;padding:9px 20px;letter-spacing:.01em}
  .stickytop{position:sticky;top:0;z-index:50}
  .site-header{background:rgba(15,27,45,.94);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--inkt-rand)}
  .header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:13px;padding-bottom:13px}
  .brand{display:flex;align-items:center;gap:11px;color:var(--tekst-op-donker);text-decoration:none}
  .brand-name{font:600 22px var(--serif);letter-spacing:-.01em}
  .nav{display:flex;align-items:center;gap:6px}
  .nav-item{position:relative;padding:6px 0}
  .nav-link{display:flex;align-items:center;gap:4px;font:500 15px var(--sans);color:var(--tekst-op-donker);text-decoration:none;padding:8px 12px;cursor:pointer;background:none;border:none}
  .nav-link:hover{color:var(--amber-op-donker)}
  .nav-link[aria-current="page"]{font-weight:600;color:var(--amber-op-donker)}
  .nav-link .caret{color:var(--mist);width:13px;height:13px}
  .dropdown{position:absolute;top:100%;left:0;background:var(--inkt-2);border:1px solid var(--inkt-rand);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.4);padding:10px;min-width:250px;display:none;z-index:60}
  .dropdown.right{left:auto;right:0;min-width:190px}
  .nav-item:hover .dropdown,.nav-item:focus-within .dropdown{display:grid}
  .dropdown.col{grid-template-columns:1fr}
  .dropdown.grid2{grid-template-columns:1fr 1fr;gap:2px}
  .dd-link{display:flex;align-items:center;gap:9px;font:500 13.5px var(--sans);color:var(--tekst-op-donker);text-decoration:none;padding:9px 10px;border-radius:8px}
  .dd-link:hover{background:var(--inkt-hover);color:var(--tekst-op-donker)}
  .dd-link .ico{font-size:17px;color:var(--amber-op-donker)}
  .btn-cta{font:600 15px var(--sans);background:var(--amber-vlak);color:var(--amber-vlak-tekst);text-decoration:none;padding:11px 20px;border-radius:8px;margin-left:8px}
  .btn-cta:hover{background:var(--amber-vlak-hover);color:var(--amber-vlak-tekst)}
  .site-footer{background:var(--inkt);color:var(--gedempt-op-donker)}
  .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:40px}
  .footer-brand{display:flex;align-items:center;gap:10px;color:var(--tekst-op-donker);text-decoration:none;margin-bottom:12px}
  .footer-brand .brand-name{font-size:20px}
  .footer-blurb{font:400 14.5px/1.6 var(--sans);color:var(--mist);max-width:260px}
  .footer-form{display:flex;gap:8px;margin-top:18px;max-width:300px}
  .footer-form input{flex:1;min-width:0;font:400 13.5px var(--sans);padding:11px 12px;border-radius:8px;border:1px solid var(--inkt-rand);background:var(--inkt-2);color:var(--tekst-op-donker);outline:none}
  .footer-form input:focus{border-color:var(--amber-op-donker)}
  .footer-form button{font:600 13.5px var(--sans);background:var(--amber-vlak);color:var(--amber-vlak-tekst);border:none;padding:11px 14px;border-radius:8px;cursor:pointer}
  .footer-form button:hover{background:var(--amber-vlak-hover)}
  .footer-col-h{font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gedempt-op-donker);margin-bottom:16px}
  .footer-links{display:flex;flex-direction:column;gap:11px}
  .footer-links a{font:400 14.5px var(--sans);color:var(--gedempt-op-donker);text-decoration:none}
  .footer-links a:hover{color:var(--tekst-op-donker)}
  .footer-bottom{border-top:1px solid var(--inkt-rand);margin-top:44px;padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:center}
  .footer-copy{font:500 12px var(--mono);color:var(--gedempt-op-donker)}
  .footer-social{display:flex;gap:20px}
  .footer-social a{font:500 13px var(--sans);color:var(--gedempt-op-donker);text-decoration:none}
  .footer-social a:hover{color:var(--tekst-op-donker)}
  @media (max-width:900px){
    .wrap{padding-left:22px;padding-right:22px}
    .nav .nav-item,.nav .desktop-only{display:none}
    .footer-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
  .breadcrumb{padding:20px 0 4px}
  .breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;font:500 12.5px var(--mono);color:var(--mist)}
  .breadcrumb li{display:flex;gap:8px;align-items:center}
  .breadcrumb a{color:var(--tekst)}
  .breadcrumb [aria-current="page"]{color:var(--muted)}
  .kicker{font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gedempt);margin-bottom:14px;display:flex;align-items:center;gap:9px}

  /* Kop en voet, mobiel (Design v6, 29-09-2026). Deze regels staan ook in de pagina-CSS
     van elke omgezette pagina, maar kop en voet zijn gedeeld: de niet-omgezette pagina's
     (Studies, Over, Privacy, Disclaimer, Correcties) dragen dezelfde kopbalk, voet en
     haken en hebben ze hier nodig (data-m2 is de voetkolommenrij). Zelfde tekst als in de export. */
  @media (max-width:1040px){[data-navlink]{display:none!important}[data-navtoggle]{display:inline-flex!important}}
  @media (max-width:760px){[data-kopbalk]{padding:13px 20px!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}}

  /* Paginabeeld in de donkere hero (09-10-2026, inc/fable-paginabeeld.php). Zonder figure-element verandert er niets:
     de kolomindeling gaat alleen aan via :has(). Bewust een lichte plaat (#F4F6F8) op de inkt-hero, geen kader. */
  .cy-paginabeeld{margin:32px 0 0;padding:0;border-radius:12px;overflow:hidden;background:#F4F6F8;box-shadow:none;border:0}
  .cy-paginabeeld__img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
  .cy-hero-tekst{min-width:0}
  @media (min-width:960px){
    #top>div:has(>.cy-paginabeeld){display:grid;grid-template-columns:minmax(0,1fr) 42%;column-gap:56px;align-items:center}
    #top>div:has(>.cy-paginabeeld)>.cy-paginabeeld{margin:0}
  }

  /* ---------------------------------------------------------------------------------------
     Herstel thuis (10-10-2026): hoofdmenu uit WordPress, kruimelpad en animatievakken.
     Markup uit inc/cymatra-herstel.php. Dezelfde haken als de export (data-navmenu, data-navlink,
     data-cym-paneel, data-mobielmenu), dus de mobiele schakelaar in elk paginascript blijft werken.
     De zichtbaarheid van het uitklappaneel stond alleen in de pagina-CSS; hier ook, voor de hub.
     --------------------------------------------------------------------------------------- */
  [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}
  .cy-nav-groep{position:relative;padding:6px 0}
  .cy-nav-kop,.cy-nav-link{display:flex;align-items:center;gap:4px;font:500 15px 'Hanken Grotesk',sans-serif;color:var(--tekst-op-donker);padding:8px 12px;background:none;border:0;cursor:pointer;border-radius:8px;white-space:nowrap}
  .cy-nav-kop i{font-size:13px;color:var(--gedempt-op-donker)}
  .cy-nav-kop:hover,.cy-nav-link:hover{color:var(--amber-op-donker)}
  .cy-nav-kop.is-actief,.cy-nav-link.is-actief{color:var(--amber-op-donker);font-weight:600}
  .cy-nav-paneel{position:absolute;top:100%;left:0;background:var(--inkt-2);border:1px solid var(--inkt-rand);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.4);padding:10px;min-width:300px;display:flex;flex-direction:column;gap:2px;z-index:60}
  .cy-nav-item{display:flex;align-items:flex-start;gap:11px;color:var(--tekst-op-donker);padding:10px 12px;border-radius:8px;border-left:2px solid transparent}
  .cy-nav-item i{font-size:19px;color:var(--cy-item-accent,var(--amber-op-donker));margin-top:1px}
  .cy-nav-item:hover{background:var(--inkt-hover);color:var(--tekst-op-donker)}
  .cy-nav-item.is-actief{border-left-color:var(--cy-item-accent,var(--amber-op-donker))}
  .cy-nav-naam{display:block;font:600 14.5px 'Hanken Grotesk',sans-serif}
  .cy-nav-item.is-actief .cy-nav-naam{color:var(--cy-item-accent,var(--amber-op-donker))}
  .cy-nav-uitleg{display:block;font:400 13px/1.45 'Hanken Grotesk',sans-serif;color:var(--gedempt-op-donker);margin-top:2px;max-width:250px}
  .cy-mob-kop{font:600 11.5px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--gedempt-op-donker);padding:14px 0 4px}
  .cy-mob-link{display:flex;align-items:center;gap:9px;font:500 16px 'Hanken Grotesk',sans-serif;color:var(--tekst-op-donker);padding:11px 0;border-bottom:1px solid var(--inkt-rand)}
  .cy-mob-link:last-child{border-bottom:0}
  .cy-mob-sub{padding-left:4px}
  .cy-mob-sub i{color:var(--cy-item-accent,var(--amber-op-donker));font-size:18px}
  .cy-mob-link.is-actief{color:var(--amber-op-donker);font-weight:600}
  @media (max-width:760px){[data-mobielmenu]{padding:10px 20px 18px!important}}

  .cy-kruimel{background:var(--inkt);border-bottom:1px solid var(--inkt-rand)}
  .cy-kruimel ol{max-width:1180px;margin:0 auto;padding:10px 40px;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font:500 12.5px/1.5 'JetBrains Mono',monospace;color:var(--gedempt-op-donker)}
  .cy-kruimel li{display:flex;align-items:center;gap:8px;min-width:0}
  .cy-kruimel a{color:var(--tekst-op-donker);text-decoration:none}
  .cy-kruimel a:hover{color:var(--amber-op-donker)}
  .cy-kruimel i{font-size:11px;color:var(--gedempt-op-donker)}
  .cy-kruimel [aria-current="page"]{color:var(--gedempt-op-donker);overflow-wrap:anywhere}
  .cy-kruimel a:focus-visible{outline:2px solid var(--amber-op-donker);outline-offset:2px;border-radius:4px}
  @media (max-width:760px){.cy-kruimel ol{padding:9px 20px}}

  .cy-anim{margin:0;position:relative;border-radius:14px;overflow:hidden;background:var(--inkt-diep);border:1px solid var(--inkt-rand)}
  .cy-anim video,.cy-anim img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
  .cy-anim figcaption{font:500 12px/1.45 'JetBrains Mono',monospace;color:var(--gedempt-op-donker);padding:9px 12px;border-top:1px solid var(--inkt-rand)}