/* =========================================================================
   30Bet — MAISON SLAB
   Slab-serif display (Roboto Slab) + grotesk body (Inter)
   Lichte, luchtige editoriale opmaak · tonale dieptes · puntsgewijs accent
   Prefix: anj-
   ========================================================================= */

:root{
  /* tonale oppervlakken (as & kool) */
  --anj-bg:        #eef0f3;
  --anj-surface-1: #ffffff;
  --anj-surface-2: #e8ebef;
  --anj-surface-3: #dde1e7;
  --anj-surface-4: #cfd5dd;
  --anj-line:      color-mix(in srgb, #16191f 13%, transparent);
  --anj-line-soft: color-mix(in srgb, #16191f 8%, transparent);

  /* inkt */
  --anj-ink:   #16191f;
  --anj-ink-2: #3b424d;
  --anj-ink-3: #6a7280;

  /* merk-accenten (vast) */
  --anj-accent:  #0f6fff;
  --anj-accent-d:#0a55c9;
  --anj-cta:     #ffb90f;
  --anj-cta-d:   #e0a200;
  --anj-dark:    #00419d;
  --anj-dark-2:  #00357f;

  /* verdict-kleuren */
  --anj-good: #1f8f5f;
  --anj-mid:  #c98a14;
  --anj-bad:  #c0392b;

  /* typeschaal — ratio 1.25 */
  --anj-step--1: 0.8rem;
  --anj-step-0:  1rem;
  --anj-step-1:  1.25rem;
  --anj-step-2:  1.5625rem;
  --anj-step-3:  1.953rem;
  --anj-step-4:  2.441rem;
  --anj-step-5:  3.052rem;

  /* ruimteschaal */
  --anj-sp-1: 4px;
  --anj-sp-2: 8px;
  --anj-sp-3: 12px;
  --anj-sp-4: 16px;
  --anj-sp-5: 24px;
  --anj-sp-6: 32px;
  --anj-sp-7: 48px;
  --anj-sp-8: 64px;

  --anj-wrap: 1231px;
  --anj-r:    12px;            /* actief/geselecteerd: zacht */
  --anj-r-sm: 2px;             /* inputs */

  /* luchtige diffuse schaduwen (magazine) */
  --anj-shadow:   0 18px 48px -24px rgba(8,20,45,.42), 0 4px 14px -10px rgba(8,20,45,.22);
  --anj-shadow-s: 0 10px 28px -18px rgba(8,20,45,.34);

  --anj-head-h: 66px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--anj-bg);
  color:var(--anj-ink);
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:16px;
  line-height:1.62;
  font-feature-settings:"tnum" 0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:#0a55c9; text-decoration:none; }
a:hover{ color:var(--anj-accent-d); }
h1,h2,h3,h4,h5,h6{
  font-family:"Roboto Slab", Georgia, "Times New Roman", serif;
  color:var(--anj-ink);
  margin:0 0 var(--anj-sp-4);
  line-height:1.14;
  font-weight:700;
  letter-spacing:-0.012em;
  text-wrap:balance;
}
p{ margin:0 0 var(--anj-sp-4); text-wrap:pretty; }
strong{ font-weight:600; }
ul,ol{ margin:0 0 var(--anj-sp-4); padding-left:0; }

::selection{ background:color-mix(in srgb, var(--anj-accent) 22%, transparent); color:var(--anj-ink); }
:focus-visible{ outline:2px solid var(--anj-accent); outline-offset:2px; border-radius:var(--anj-r-sm); }
::-webkit-scrollbar{ height:8px; width:8px; }
::-webkit-scrollbar-thumb{ background:var(--anj-surface-4); border-radius:8px; }

/* ---------- container ---------- */
.anj-wrap{
  width:100%;
  max-width:var(--anj-wrap);
  margin-inline:auto;
  padding-inline:clamp(16px, 4vw, 28px);
}

/* skip-link */
.anj-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--anj-ink); color:#fff; padding:10px 16px; border-radius:0 0 var(--anj-r) 0;
}
.anj-skip:focus{ left:0; }

/* =========================================================================
   HEADER
   ========================================================================= */
.anj-head{
  position:sticky; top:0; z-index:80;
  background:var(--anj-dark);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.anj-head-inner{
  display:flex; align-items:center; gap:var(--anj-sp-5);
  min-height:var(--anj-head-h);
  padding-block:8px;
}
.anj-logo{ display:inline-block; line-height:0; flex:0 0 auto; }
.anj-logo img{
  height:clamp(30px, 4vw, 40px); width:auto;
  background:#fff; padding:6px 12px; border-radius:var(--anj-r);
}
.anj-nav{ margin-left:auto; }
.anj-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:nowrap; align-items:center; gap:clamp(10px, 1.4vw, 20px);
}
.anj-nav a{
  color:rgba(255,255,255,.86);
  font-size:0.92rem; font-weight:500; white-space:nowrap;
  padding:6px 2px; display:inline-block;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.anj-nav a:hover{ color:#fff; }
.anj-nav a[aria-current="page"]{ color:#fff; border-bottom-color:var(--anj-cta); }

.anj-head-inner > .anj-cta{ flex:0 0 auto; white-space:nowrap; }

/* burger + drawer (CSS-only checkbox-hack) */
.anj-nav-toggle{
  position:absolute; opacity:0; width:1px; height:1px; overflow:hidden; pointer-events:none;
}
.anj-burger{
  display:none;
  margin-right:auto;
  width:46px; height:46px; align-items:center; justify-content:center;
  color:#fff; cursor:pointer; border:1px solid rgba(255,255,255,.22); border-radius:var(--anj-r-sm);
  background:transparent;
}
.anj-burger svg{ width:24px; height:24px; }
.anj-scrim{ display:none; }

/* sub-balk */
.anj-subbar{
  background:var(--anj-dark-2);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.anj-subbar-inner{
  display:flex; align-items:center; gap:var(--anj-sp-5);
  padding-block:7px; flex-wrap:nowrap; overflow-x:auto;
}
.anj-subbar a{
  color:rgba(255,255,255,.74);
  font-size:0.74rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600;
  white-space:nowrap;
  transition:color .15s ease;
}
.anj-subbar a:hover{ color:var(--anj-cta); }

/* =========================================================================
   CTA
   ========================================================================= */
.anj-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--anj-cta); color:#1a1300;
  font-family:"Inter", system-ui, sans-serif;
  font-weight:700; font-size:1rem; line-height:1;
  padding:14px 22px; min-height:48px;
  border-radius:var(--anj-r); border:1px solid var(--anj-cta-d);
  text-decoration:none; cursor:pointer;
  box-shadow:var(--anj-shadow-s);
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.anj-cta:hover{ background:var(--anj-cta-d); color:#1a1300; }
.anj-cta:active{ transform:translateY(1px); }
.anj-cta .anj-cta-i{ transition:transform .15s ease; flex:0 0 auto; }
.anj-cta:hover .anj-cta-i{ transform:translateX(3px); }
.anj-cta--block{ display:flex; width:100%; justify-content:center; }
.anj-ctarow{ display:flex; justify-content:center; margin:var(--anj-sp-6) 0; }

/* =========================================================================
   HERO (alleen money/game-pagina's)
   ========================================================================= */
.anj-hero{
  background:
     linear-gradient(180deg, color-mix(in srgb, var(--anj-accent) 8%, var(--anj-surface-1)), var(--anj-surface-1));
  border-bottom:1px solid var(--anj-line);
  overflow-x:clip;
  padding-block:clamp(28px, 4vw, 46px);
}
.anj-hero-grid{
  display:flex; flex-direction:column; gap:var(--anj-sp-4);
}
.anj-hero-media{ position:relative; order:5; }
.anj-hero-media::before{
  content:""; position:absolute; inset:-6% 0; z-index:0;
  background:radial-gradient(60% 55% at 50% 45%, color-mix(in srgb, var(--anj-accent) 24%, transparent), transparent 70%);
  filter:blur(28px);
}
.anj-hero-img{
  position:relative; z-index:1;
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--anj-r);
  box-shadow:var(--anj-shadow);
  background:var(--anj-surface-2);
}
.anj-hero-body{ display:flex; flex-direction:column; gap:var(--anj-sp-3); text-align:center; }
.anj-kicker{
  display:block;
  font-size:0.76rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--anj-accent);
}
.anj-hero-h1{
  margin:0;
  font-size:clamp(1.55rem, 6vw, 3rem);
  line-height:1.08;
}
.anj-hero-rate{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font-variant-numeric:tabular-nums lining-nums; align-self:center;
}
.anj-stars{ color:var(--anj-cta); letter-spacing:2px; font-size:1.05rem; }
.anj-rate-num{ font-weight:700; color:var(--anj-ink); }
.anj-hero-lead{
  margin:0 auto; max-width:46ch;
  color:var(--anj-ink-2); font-size:1.05rem;
}
.anj-hero .anj-ctarow{ margin:var(--anj-sp-2) 0 0; }

/* feiten-band onder hero */
.anj-hero-facts{ margin-top:var(--anj-sp-6); }
.anj-facts-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px;
  background:var(--anj-line); border:1px solid var(--anj-line);
  border-radius:var(--anj-r); overflow:hidden;
  box-shadow:var(--anj-shadow-s);
}
.anj-fact{
  background:var(--anj-surface-1);
  padding:var(--anj-sp-4) var(--anj-sp-5);
  min-width:0;
}
.anj-fact dt{
  font-size:0.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--anj-ink-3); margin-bottom:4px;
}
.anj-fact dd{ margin:0; font-weight:600; font-size:1.02rem; font-family:"Roboto Slab", serif; }

@media (min-width:861px){
  .anj-hero-grid{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center; gap:clamp(28px, 4vw, 52px);
  }
  .anj-hero-media{ order:0; grid-column:1; grid-row:1; }
  .anj-hero-body{ grid-column:2; grid-row:1; text-align:left; }
  .anj-hero-rate{ justify-content:flex-start; align-self:flex-start; }
  .anj-hero-lead{ margin:0; }
  .anj-hero .anj-ctarow{ justify-content:flex-start; }
  .anj-hero-img{ max-height:420px; }
  .anj-facts-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

/* =========================================================================
   PAGE-TITLE (trust/legal/auteur — geen hero)
   ========================================================================= */
.anj-pagetitle{
  background:var(--anj-surface-1);
  border-bottom:1px solid var(--anj-line);
  padding-block:clamp(28px, 4vw, 44px);
}
.anj-pagetitle h1{ font-size:clamp(1.7rem, 5vw, 2.7rem); margin:var(--anj-sp-2) 0 var(--anj-sp-3); }
.anj-pagetitle .anj-pt-lead{ color:var(--anj-ink-2); max-width:70ch; margin:0; font-size:1.05rem; }

/* =========================================================================
   BREADCRUMBS
   ========================================================================= */
.anj-crumbs{
  background:var(--anj-surface-2);
  border-bottom:1px solid var(--anj-line);
  font-size:0.84rem;
}
.anj-crumbs ol{
  list-style:none; margin:0; padding:10px 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  color:var(--anj-ink-3);
}
.anj-crumbs li{ display:inline-flex; align-items:center; gap:6px; }
.anj-crumbs li+li::before{ content:"›"; color:var(--anj-ink-3); }
.anj-crumbs a{ color:var(--anj-ink-2); }
.anj-crumbs a:hover{ color:var(--anj-accent); }
.anj-crumbs [aria-current="page"]{ color:var(--anj-ink); }

/* =========================================================================
   BYLINE
   ========================================================================= */
.anj-byline{
  background:var(--anj-bg);
  border-bottom:1px solid var(--anj-line-soft);
}
.anj-byline-inner{
  display:flex; align-items:center; gap:var(--anj-sp-4);
  padding-block:var(--anj-sp-4);
  flex-wrap:wrap;
}
.anj-byline img{
  width:46px; height:46px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  border:1px solid var(--anj-line);
}
.anj-byline-meta{ font-size:0.88rem; color:var(--anj-ink-3); min-width:0; }
.anj-byline-meta a{ font-weight:600; color:var(--anj-ink); }
.anj-byline-meta a:hover{ color:var(--anj-accent); }
.anj-byline-meta .anj-byrole{ color:var(--anj-ink-3); }
.anj-byline-rev{ color:var(--anj-ink-3); }

/* =========================================================================
   MAIN / SECTIES
   ========================================================================= */
.anj-main{ padding-block:clamp(28px, 4vw, 48px); }
.anj-section{ padding-block:clamp(22px, 3vw, 30px); border-top:1px solid var(--anj-line-soft); }
.anj-section:first-of-type{ border-top:0; }
.anj-sec-head{ margin-bottom:var(--anj-sp-5); }
.anj-sec-no{
  display:inline-block;
  font-family:"Roboto Slab", serif; font-variant-numeric:tabular-nums;
  font-size:0.86rem; color:var(--anj-ink-3); letter-spacing:.06em;
  margin-bottom:6px;
}
.anj-section h2{
  font-size:clamp(1.4rem, 3.2vw, 2rem);
  scroll-margin-top:calc(var(--anj-head-h) + 18px);
  padding-bottom:var(--anj-sp-3);
  border-bottom:1px solid var(--anj-line);
}
.anj-section h3{ font-size:clamp(1.15rem, 2.2vw, 1.45rem); margin-top:var(--anj-sp-5); }

/* prose — geen eigen max-width; vult de .wrap */
.anj-prose{ color:var(--anj-ink); }
.anj-prose > *{ max-width:none; }
.anj-prose p{ margin:0 0 var(--anj-sp-4); }
.anj-prose a:not(.anj-cta){ color:var(--anj-accent); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.anj-prose a:not(.anj-cta):hover{ color:var(--anj-accent-d); }
.anj-prose h2,.anj-prose h3,.anj-prose h4{ scroll-margin-top:calc(var(--anj-head-h) + 18px); }

/* lijsten met accent-streep */
.anj-prose ul{ list-style:none; padding:0; }
.anj-prose ul li{
  position:relative; padding-left:22px; margin-bottom:10px;
}
.anj-prose ul li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:3px; height:1em; background:var(--anj-accent);
  transform-origin:top center; transition:transform .15s ease;
}
.anj-prose ul li:hover::before{ transform:scaleY(1.35); }
.anj-prose ol{ padding-left:22px; }
.anj-prose ol li{ margin-bottom:10px; }

/* contentafbeelding */
.anj-figure{
  width:min(70%, 760px); margin:var(--anj-sp-5) auto;
}
.anj-figure img{ width:100%; border-radius:var(--anj-r); box-shadow:var(--anj-shadow-s); aspect-ratio:16/9; object-fit:cover; }
.anj-figure figcaption{ font-size:0.82rem; color:var(--anj-ink-3); margin-top:8px; text-align:center; }

/* callout */
.anj-callout{
  background:var(--anj-surface-1);
  border:1px solid var(--anj-line);
  border-left:3px solid var(--anj-accent);
  border-radius:var(--anj-r);
  padding:var(--anj-sp-5);
  margin:var(--anj-sp-5) 0;
  box-shadow:var(--anj-shadow-s);
}
.anj-callout strong{ color:var(--anj-ink); }

/* =========================================================================
   TOC
   ========================================================================= */
.anj-toc{
  background:var(--anj-surface-1);
  border:1px solid var(--anj-line);
  border-radius:var(--anj-r);
  padding:var(--anj-sp-4);
  margin:var(--anj-sp-5) 0;
  box-shadow:var(--anj-shadow-s);
}
.anj-toc-title{
  font-size:0.74rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:var(--anj-ink-3); margin-bottom:var(--anj-sp-3);
}
.anj-toc ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.anj-toc a{
  display:inline-block; padding:6px 12px;
  background:var(--anj-surface-2); border:1px solid var(--anj-line);
  border-radius:var(--anj-r); font-size:0.86rem; color:var(--anj-ink-2);
  white-space:nowrap; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.anj-toc a:hover{ background:var(--anj-surface-3); color:var(--anj-accent); border-color:var(--anj-accent); }
@media (max-width:640px){
  .anj-toc ul{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
}

/* =========================================================================
   TABELLEN (ook kale <table>)
   ========================================================================= */
.anj-tablewrap{ overflow-x:auto; margin:var(--anj-sp-5) 0; border-radius:var(--anj-r); }
table:not(.anj-bare){
  width:100%; border-collapse:collapse;
  background:var(--anj-surface-1);
  border:1px solid var(--anj-line); border-radius:var(--anj-r); overflow:hidden;
  font-size:0.94rem;
  font-variant-numeric:tabular-nums lining-nums;
  box-shadow:var(--anj-shadow-s);
}
table:not(.anj-bare) caption{ caption-side:top; text-align:left; font-size:0.82rem; color:var(--anj-ink-3); margin-bottom:8px; }
table:not(.anj-bare) th,
table:not(.anj-bare) td{
  text-align:left; padding:11px 14px; border-bottom:1px solid var(--anj-line);
  vertical-align:top;
}
table:not(.anj-bare) thead th{
  background:var(--anj-surface-2); color:var(--anj-ink);
  font-family:"Roboto Slab", serif; font-weight:600; font-size:0.86rem;
}
table:not(.anj-bare) tbody tr:nth-child(even){ background:color-mix(in srgb, var(--anj-surface-2) 45%, transparent); }
table:not(.anj-bare) tbody td:first-child{ font-weight:600; }
table:not(.anj-bare) tbody tr:last-child td{ border-bottom:0; }
table:not(.anj-bare) tfoot td,
table:not(.anj-bare) tr.anj-total td{
  background:var(--anj-surface-3); font-weight:700; border-top:2px solid var(--anj-line);
}
table:not(.anj-bare) td:not(:first-child).anj-num,
table:not(.anj-bare) th.anj-num{ text-align:right; }

/* =========================================================================
   FAQ — <details> zebra
   ========================================================================= */
.anj-faq{ margin:var(--anj-sp-5) 0; border:1px solid var(--anj-line); border-radius:var(--anj-r); overflow:hidden; box-shadow:var(--anj-shadow-s); }
.anj-faq details,
details.anj-acc{ border-bottom:1px solid var(--anj-line); background:var(--anj-surface-1); }
.anj-faq details:nth-child(even){ background:color-mix(in srgb, var(--anj-surface-2) 55%, transparent); }
.anj-faq details:last-child{ border-bottom:0; }
.anj-faq summary,
details.anj-acc summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:var(--anj-sp-4);
  padding:var(--anj-sp-4) var(--anj-sp-5);
  font-family:"Roboto Slab", serif; font-weight:600; font-size:1.02rem;
  color:var(--anj-ink);
}
.anj-faq summary::-webkit-details-marker,
details.anj-acc summary::-webkit-details-marker{ display:none; }
.anj-faq summary::after,
details.anj-acc summary::after{
  content:"+"; flex:0 0 auto;
  font-family:"Inter", sans-serif; font-weight:400; font-size:1.5rem; line-height:1;
  color:var(--anj-accent); transition:transform .15s ease;
}
.anj-faq details[open] summary::after,
details.anj-acc[open] summary::after{ transform:rotate(45deg); }
.anj-faq details > *:not(summary),
details.anj-acc > *:not(summary){ padding:0 var(--anj-sp-5) var(--anj-sp-5); margin:0; color:var(--anj-ink-2); }

/* =========================================================================
   PROS / CONS
   ========================================================================= */
.anj-proscons{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--anj-sp-5); margin:var(--anj-sp-5) 0; }
.anj-pros, .anj-cons{
  background:var(--anj-surface-1); border:1px solid var(--anj-line); border-radius:var(--anj-r);
  padding:var(--anj-sp-5); box-shadow:var(--anj-shadow-s);
}
.anj-pros h3, .anj-cons h3{ margin-top:0; font-size:1.05rem; }
.anj-pros ul, .anj-cons ul{ list-style:none; padding:0; margin:0; }
.anj-pros li, .anj-cons li{ position:relative; padding-left:28px; margin-bottom:10px; color:var(--anj-ink-2); }
.anj-pros li::before{
  content:""; position:absolute; left:2px; top:.35em;
  width:12px; height:7px; border-left:2px solid var(--anj-good); border-bottom:2px solid var(--anj-good);
  transform:rotate(-45deg);
}
.anj-cons li::before{
  content:"×"; position:absolute; left:4px; top:-.05em; color:var(--anj-bad); font-size:1.2rem; font-weight:700;
}
@media (max-width:640px){ .anj-proscons{ grid-template-columns:1fr; } }

/* =========================================================================
   VERDICT (woord + getal)
   ========================================================================= */
.anj-verdict{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:var(--anj-sp-3) 0; }
.anj-verdict-word{ font-family:"Roboto Slab", serif; font-weight:800; font-size:clamp(1.4rem,3vw,2rem); }
.anj-verdict-num{ font-variant-numeric:tabular-nums; color:var(--anj-ink-3); font-size:1rem; }
.anj-v-good .anj-verdict-word{ color:var(--anj-good); }
.anj-v-mid  .anj-verdict-word{ color:var(--anj-mid); }
.anj-v-bad  .anj-verdict-word{ color:var(--anj-bad); }

/* =========================================================================
   SLOTS-GRID (compact)
   ========================================================================= */
.anj-slots{ margin:var(--anj-sp-6) 0; }
.anj-slots-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--anj-sp-4); margin-bottom:var(--anj-sp-4); flex-wrap:wrap; }
.anj-slots-head h2{ margin:0; font-size:clamp(1.3rem,2.6vw,1.7rem); }
.anj-slots-head a{ font-size:0.9rem; font-weight:600; display:inline-flex; align-items:center; gap:5px; }
.anj-slots-head a svg{ transition:transform .15s ease; }
.anj-slots-head a:hover svg{ transform:translateX(3px); }
.anj-slots-grid{
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:var(--anj-sp-3);
}
.anj-slot{
  display:block; color:inherit; text-decoration:none;
  background:var(--anj-surface-1); border:1px solid var(--anj-line); border-radius:var(--anj-r);
  overflow:hidden; box-shadow:var(--anj-shadow-s);
  transition:border-color .15s ease, transform .12s ease;
}
.anj-slot:hover{ border-color:var(--anj-accent); }
.anj-slot:active{ transform:translateY(1px); }
.anj-slot img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--anj-surface-2); }
.anj-slot-name{ display:block; padding:8px 10px; font-size:0.8rem; font-weight:600; color:var(--anj-ink-2); text-align:center; }
.anj-slot:hover .anj-slot-name{ color:var(--anj-accent); }
@media (max-width:900px){ .anj-slots-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:560px){ .anj-slots-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; } }

/* =========================================================================
   AUTEURSKAART
   ========================================================================= */
.anj-author{
  display:flex; gap:var(--anj-sp-5); align-items:flex-start;
  background:var(--anj-surface-1); border:1px solid var(--anj-line); border-radius:var(--anj-r);
  padding:var(--anj-sp-5); margin:var(--anj-sp-6) auto 0; max-width:780px;
  box-shadow:var(--anj-shadow);
}
.anj-author__photo{
  width:96px; height:96px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  border:1px solid var(--anj-line); aspect-ratio:auto;
}
.anj-prose img.anj-author__photo{ width:96px; height:96px; aspect-ratio:auto; }
.anj-author__name{ font-family:"Roboto Slab", serif; font-weight:700; font-size:1.15rem; margin:0; }
.anj-author__name a{ color:var(--anj-ink); }
.anj-author__name a:hover{ color:var(--anj-accent); }
.anj-author__role{ color:var(--anj-ink-3); font-size:0.86rem; margin:2px 0 10px; }
.anj-author__bio{ color:var(--anj-ink-2); font-size:0.95rem; margin:0 0 10px; }
.anj-author__more{ font-weight:600; font-size:0.9rem; display:inline-flex; align-items:center; gap:5px; }
.anj-author__more svg{ transition:transform .15s ease; }
.anj-author__more:hover svg{ transform:translateX(3px); }
@media (max-width:560px){ .anj-author{ flex-direction:column; align-items:center; text-align:center; } }

/* portret op auteurspagina */
.anj-prose img.anj-portrait{ width:220px; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:var(--anj-r); float:none; margin:0 0 var(--anj-sp-4); box-shadow:var(--anj-shadow-s); }

/* =========================================================================
   FOOTER (twee zones)
   ========================================================================= */
.anj-foot{ background:var(--anj-dark); color:rgba(255,255,255,.82); margin-top:var(--anj-sp-8); }
.anj-foot-top{ padding-block:var(--anj-sp-7); border-bottom:1px solid rgba(255,255,255,.10); }
.anj-foot-cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--anj-sp-6); }
.anj-foot-brand .anj-logo img{ height:38px; }
.anj-foot-brand p{ margin:var(--anj-sp-4) 0 0; font-size:0.88rem; color:rgba(255,255,255,.66); max-width:42ch; }
.anj-foot h4{ color:#fff; font-size:0.8rem; letter-spacing:.08em; text-transform:uppercase; margin:0 0 var(--anj-sp-4); }
.anj-foot ul{ list-style:none; margin:0; padding:0; }
.anj-foot li{ margin-bottom:9px; }
.anj-foot a{ color:rgba(255,255,255,.78); font-size:0.9rem; }
.anj-foot a:hover{ color:var(--anj-cta); }
.anj-foot-bottom{ background:var(--anj-dark-2); padding-block:var(--anj-sp-5); font-size:0.8rem; color:rgba(255,255,255,.6); }
.anj-foot-bottom .anj-foot-disc{ margin:0 0 var(--anj-sp-3); }
.anj-foot-bottom .anj-foot-meta{ display:flex; flex-wrap:wrap; gap:var(--anj-sp-4); justify-content:space-between; align-items:center; }
.anj-foot-bottom a{ color:rgba(255,255,255,.8); }
.anj-age{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border:2px solid var(--anj-cta); color:var(--anj-cta);
  border-radius:50%; font-weight:700; font-size:0.78rem; flex:0 0 auto;
}
@media (max-width:780px){ .anj-foot-cols{ grid-template-columns:1fr 1fr; } .anj-foot-brand{ grid-column:1 / -1; } }
@media (max-width:480px){ .anj-foot-cols{ grid-template-columns:1fr; } }

/* =========================================================================
   COOKIE-NOTICE (fixed overlay — geen layout-shift)
   ========================================================================= */
.anj-cookie{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:120;
  max-width:520px; margin-inline:auto;
  background:var(--anj-surface-1); color:var(--anj-ink);
  border:1px solid var(--anj-line); border-radius:var(--anj-r);
  box-shadow:var(--anj-shadow);
  padding:var(--anj-sp-4) var(--anj-sp-5);
  display:flex; gap:var(--anj-sp-4); align-items:center; flex-wrap:wrap;
}
.anj-cookie[hidden]{ display:none; }
.anj-cookie p{ margin:0; font-size:0.86rem; color:var(--anj-ink-2); flex:1 1 220px; }
.anj-cookie button{
  background:var(--anj-accent); color:#fff; border:0; border-radius:var(--anj-r);
  padding:10px 18px; font-weight:600; cursor:pointer; min-height:44px;
  font-family:"Inter", sans-serif; transition:background .15s ease;
}
.anj-cookie button:hover{ background:var(--anj-accent-d); }

/* =========================================================================
   DIPTIEK (optioneel: verhaal links | feiten rechts)
   ========================================================================= */
.anj-diptych{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr); gap:clamp(24px,4vw,52px); align-items:start; }
.anj-diptych > .anj-dip-side{ position:relative; }
.anj-diptych > .anj-dip-side::before{ content:""; position:absolute; left:calc(-1 * clamp(12px,2vw,26px)); top:0; bottom:0; width:1px; background:var(--anj-line); }
@media (max-width:860px){ .anj-diptych{ grid-template-columns:1fr; } .anj-diptych > .anj-dip-side::before{ display:none; } }

/* utilities */
.anj-center{ text-align:center; }
.anj-muted{ color:var(--anj-ink-3); }
.anj-lead{ font-size:1.12rem; color:var(--anj-ink-2); }

/* =========================================================================
   BURGER / DRAWER — mobiel (<=1024px)
   ========================================================================= */
@media (max-width:1024px){
  .anj-burger{ display:inline-flex; }
  .anj-subbar{ display:none; }
  .anj-head-inner{ gap:var(--anj-sp-3); }
  .anj-head-inner > .anj-cta{ display:none; }
  .anj-nav{
    position:fixed; top:0; left:0; bottom:0; z-index:90;
    width:min(82vw, 320px);
    background:var(--anj-dark); color:#fff;
    margin-left:0;
    transform:translateX(-100%); visibility:hidden;
    transition:transform .2s ease, visibility .2s ease;
    padding:var(--anj-sp-6) var(--anj-sp-5);
    overflow-y:auto;
    box-shadow:var(--anj-shadow);
  }
  .anj-nav ul{ flex-direction:column; align-items:stretch; gap:0; margin-top:var(--anj-sp-5); }
  .anj-nav li{ border-bottom:1px solid rgba(255,255,255,.12); }
  .anj-nav a{ display:block; padding:14px 2px; font-size:1rem; border-bottom:0; }
  .anj-nav a[aria-current="page"]{ border-bottom:0; color:var(--anj-cta); }
  .anj-nav-toggle:checked ~ .anj-nav{ transform:translateX(0); visibility:visible; }
  .anj-scrim{
    display:block; position:fixed; inset:0; z-index:85;
    background:rgba(4,12,30,.5); opacity:0; visibility:hidden;
    transition:opacity .2s ease, visibility .2s ease;
  }
  .anj-nav-toggle:checked ~ .anj-scrim{ opacity:1; visibility:visible; }
}

/* drawer-merk bovenin (alleen in mobiel drawer; op desktop verbergen — specificiteit moet .anj-nav a verslaan) */
.anj-nav a.anj-drawer-brand{ display:none; }
@media (max-width:1024px){
  .anj-nav a.anj-drawer-brand{ display:block; margin-bottom:var(--anj-sp-4); }
  .anj-drawer-brand img{ height:34px; width:auto; background:#fff; padding:6px 12px; border-radius:var(--anj-r); }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* ── PSI/A11y AA-contrast ── */
:root{--anj-ink-3:#565d69}
.anj-sec-no,.anj-verdict-num{color:var(--anj-ink-2)}
.anj-toc a,.anj-prose a:not(.anj-cta),.anj-byline a,.anj-author__more,.anj-cookie p a{color:#0a55c9 !important}
.anj-cookie button{background:var(--anj-accent-d)}
.anj-cookie p a{text-decoration:underline}
.anj-foot h2{ color:#fff; font-size:0.8rem; letter-spacing:.08em; text-transform:uppercase; margin:0 0 var(--anj-sp-4); }
.anj-prose a:not(.anj-cta),.anj-byline a,.anj-author__more,.anj-toc a{text-decoration:underline;text-underline-offset:2px}