/* =========================================================================
   ZZPKAN — stylesheet, donkere editie
   Stijlrichting: donker canvas met paarse glow-accenten, groot serif
   kopschrift en pil-vormige knoppen. Structuur/componenten zijn hetzelfde
   gebleven, alleen het uiterlijk is volledig herzien.
   Pas het uiterlijk aan via de variabelen hieronder in :root.
   ========================================================================= */
:root{
  --nacht:#0F0B16;          /* paginaondergrond, bijna zwart-paars */
  --paneel:#1B1424;         /* kaarten/panelen op het donkere canvas */
  --paneel-rand:rgba(255,255,255,0.08);
  --tekst:#EDE7F6;          /* koppen, sterke tekst */
  --tekst-zacht:#B6ACC7;    /* lopende tekst, bijschriften */
  --tekst-mute:#8A7F9C;     /* meta, minder belangrijke tekst */
  --accent:#B792F5;         /* DE interactieve kleur: links, hover, cijfers */
  --accent-fel:#9B5DE5;     /* iets feller paars voor glow/gradients */
  --goud:#E8C77E;           /* uitsluitend voor het wordmerk-accent en 1 CTA-paneel */
  --goud-vlak:rgba(232,199,126,0.10);
  --glas:rgba(255,255,255,0.04);

  --serif:'Georgia', 'Iowan Old Style', 'Times New Roman', serif;
  --sans:'Inter', -apple-system, sans-serif;

  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --radius-pill:999px;

  --gap-lg:32px;
  --gap-md:18px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--nacht); color:var(--tekst); font-family:var(--sans); font-size:18px; line-height:1.7; -webkit-font-smoothing:antialiased;}
body{position:relative; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:var(--serif); font-weight:400; color:var(--tekst); letter-spacing:0.1px;}
img{max-width:100%;}

/* achtergrond-glow, vast gepositioneerd achter de content */
body::before{
  content:""; position:fixed; top:-20%; left:50%; transform:translateX(-50%);
  width:1100px; height:900px; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(155,93,229,0.35) 0%, rgba(155,93,229,0.12) 40%, transparent 70%);
  filter:blur(10px);
}
header, main, footer{position:relative; z-index:1;}

/* ---------- site header / nav ---------- */
.site-header{background:rgba(15,11,22,0.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--paneel-rand); position:sticky; top:0; z-index:100;}
.site-header-inner{
  max-width:1080px; margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.wordmark{font-family:var(--serif); font-size:22px; letter-spacing:.02em; color:var(--tekst); background:var(--goud-vlak); padding:8px 18px; border-radius:var(--radius-pill); border:1px solid rgba(232,199,126,0.25);}
.wordmark span{color:var(--goud);}
nav.primary{display:flex; align-items:center; gap:14px; font-size:14px;}
nav.primary a{padding-bottom:4px; border-bottom:2px solid transparent; color:var(--tekst-zacht); opacity:.9;}
nav.primary a.active{border-bottom-color:var(--accent); color:var(--tekst); opacity:1;}
nav.primary a:hover{opacity:1; color:var(--tekst);}
nav.primary a.nav-external{
  padding:9px 16px; border:1px solid var(--paneel-rand); border-radius:var(--radius-pill);
  color:var(--tekst); opacity:1; font-size:13.5px; font-weight:600; background:var(--glas);
}
nav.primary a.nav-external:hover{border-color:var(--accent); color:var(--accent);}
.ext-icon{font-size:12px; margin-left:3px; opacity:.85;}

.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0;
}
.menu-toggle span{display:block; width:24px; height:2px; background:var(--tekst); transition:transform .2s, opacity .2s;}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- zachte tint-secties (ritme) ---------- */
.tint-lavendel{background:transparent;}
.tint-koraal{background:linear-gradient(180deg, rgba(155,93,229,0.14), rgba(155,93,229,0.03)); border:1px solid var(--paneel-rand); border-radius:var(--radius-lg);}
.tint-wit{background:var(--paneel);}

/* ---------- HOME ---------- */
.home-hero{max-width:1080px; margin:0 auto; padding:96px 24px 32px; text-align:left;}
.eyebrow{font-family:var(--sans); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; display:block;}
.home-hero h1{font-size:48px; line-height:1.22; margin-bottom:24px; max-width:16ch;}
.home-hero p.lede{font-size:19px; color:var(--tekst-zacht); max-width:560px;}

.home-image{max-width:1080px; margin:0 auto; padding:20px 24px 12px; position:relative;}
.home-image img{border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 30px 80px -30px rgba(155,93,229,0.55); filter:grayscale(1) contrast(1.05);}
.img-caption{display:block; text-align:center; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--tekst-mute); margin-top:12px;}
.kb-article-image{margin:32px 0; border-radius:var(--radius-lg); overflow:hidden;}
.kb-article-image img{width:100%; display:block; border-radius:var(--radius-lg); filter:grayscale(1) contrast(1.05);}
.misverstand{border-left:2px solid var(--accent); background:var(--glas); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:20px 24px; margin:32px 0 36px; font-size:15px; color:var(--tekst-zacht);}
.misverstand .label{font-family:var(--serif); font-style:italic; color:var(--accent); font-size:12px; display:block; margin-bottom:4px;}
.image-prompt-label{font-family:var(--serif); font-style:italic; font-size:13px; color:var(--accent); display:block; margin-bottom:10px;}
.image-prompt{font-size:14px; color:var(--tekst-zacht); max-width:560px; margin:0 auto; font-style:italic;}

.pillars-intro{font-size:17px; max-width:none; color:var(--tekst-zacht);}

.home-narrative{max-width:720px; margin:0 auto; padding:50px 24px 8px;}
.home-narrative p{font-size:18px; color:var(--tekst-zacht); margin-bottom:18px;}
.home-narrative p strong{color:var(--tekst); font-weight:600;}

.pillars-cta{display:inline-block; margin-top:20px; font-size:15px; border-bottom:1px solid var(--accent); padding-bottom:2px; color:var(--tekst);}
.pillars-cta:hover{color:var(--accent);}

/* ---------- Knoppen: pil-vormig ---------- */
.btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--tekst); background:var(--tekst);
  color:var(--nacht); padding:14px 30px; border-radius:var(--radius-pill); font-family:var(--sans); font-weight:600;
  font-size:15px; text-align:center; cursor:pointer; transition:background .15s, color .15s, opacity .15s;
}
.btn-primary:hover{background:var(--accent); border-color:var(--accent); color:var(--nacht);}
.btn-pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--paneel-rand); background:var(--glas);
  color:var(--tekst); padding:12px 24px; border-radius:var(--radius-pill); font-family:var(--sans); font-weight:600;
  font-size:15px; text-align:center; cursor:pointer;
}
.btn-pill:hover{border-color:var(--accent); color:var(--accent);}

.pillars{max-width:1080px; margin:0 auto; padding:48px 24px 64px;}
.pillars-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-md); margin-top:40px;}
.pillar{padding:30px 28px 34px; background:var(--paneel); border:1px solid var(--paneel-rand); border-radius:var(--radius); box-shadow:0 20px 50px -30px rgba(0,0,0,0.6);}
.pillar a{color:var(--tekst); border-bottom:1px solid var(--accent);}
.pillar a:hover{color:var(--accent);}
.pillar .num{font-family:var(--serif); font-style:italic; color:var(--accent); font-size:16px; display:block; margin-bottom:12px;}
.pillar h3{font-size:21px; margin-bottom:12px; margin-top:0;}
.pillar p{font-size:17px; color:var(--tekst-zacht);}

.start-section{max-width:1080px; margin:40px auto 0; padding:44px 32px; border-radius:var(--radius-lg);}
.start-section h2{font-size:28px; margin-bottom:12px; color:var(--tekst);}
.start-section .start-intro{color:var(--tekst-zacht); font-size:16px; margin-bottom:28px; max-width:46ch;}
.start-list{list-style:none; display:grid; gap:16px;}
.start-list li{background:var(--paneel); border:1px solid var(--paneel-rand); border-radius:var(--radius);}
.start-list a{display:flex; justify-content:space-between; align-items:center; padding:22px 24px; font-size:17px;}
.start-list a:hover{color:var(--accent);}
.start-list .arrow{font-size:15px; opacity:.6;}
.start-list .desc{display:block; font-size:14px; color:var(--tekst-zacht); margin-top:4px; font-weight:400;}

.kb-links{max-width:1080px; margin:56px auto 0; padding:0 24px 72px;}
.kb-links h2{font-size:26px; margin-bottom:12px;}
.kb-links-intro{color:var(--tekst-zacht); font-size:16px; margin-bottom:24px; max-width:56ch;}
.kb-links-grid{display:flex; flex-wrap:wrap; gap:12px;}

/* ---------- KENNISBANK (extern, alleen restjes van shared classes) ---------- */
.kb-intro{max-width:1080px; margin:0 auto; padding:48px 24px 16px;}
.kb-intro h1{font-size:34px; margin-bottom:14px;}
.kb-intro p{font-size:18px; color:var(--tekst-zacht); max-width:1080px;}

/* ---------- shared footer ---------- */
.site-footer{border-top:1px solid var(--paneel-rand); padding:44px 24px; max-width:1080px; margin:0 auto; text-align:center;}
.site-footer p{font-size:13px; color:var(--tekst-mute);}
.site-footer nav{gap:20px; flex-wrap:wrap; margin-top:16px; display:flex; justify-content:center;}
.site-footer nav a{font-size:13px; color:var(--tekst-zacht); border-bottom:1px solid transparent;}
.site-footer nav a:hover{color:var(--accent); border-color:var(--accent);}

/* ---------- OVER / UITGANGSPUNTEN / BELOFTEN ---------- */
.prose-page{max-width:760px; margin:0 auto; padding:72px 24px 88px;}
.prose-page h1{font-size:38px; margin-bottom:28px;}
.prose-page p{font-size:18px; color:var(--tekst-zacht); margin-bottom:20px;}
.prose-page p a, .prose-page li a{color:var(--tekst); border-bottom:1px solid var(--accent);}
.prose-page p a:hover, .prose-page li a:hover{color:var(--accent);}
.prose-page h2{font-family:var(--serif); font-size:24px; margin:44px 0 16px; color:var(--tekst);}
.prose-page ul.plain{list-style:none; margin-bottom:20px; border-left:2px solid var(--accent); background:var(--paneel); border-radius:0 var(--radius) var(--radius) 0; padding:8px 24px; box-shadow:0 20px 50px -30px rgba(0,0,0,0.6);}
.prose-page ul.plain li{padding:15px 0; border-top:1px solid var(--paneel-rand); font-size:17px; color:var(--tekst-zacht);}
.prose-page ul.plain li:first-child{border-top:none;}
.over-links{list-style:none; margin-top:48px; display:grid; gap:16px;}
.over-links li{background:var(--paneel); border:1px solid var(--paneel-rand); border-radius:var(--radius);}
.over-links a{display:flex; justify-content:space-between; padding:20px 24px; font-size:17px;}
.over-links a:hover{color:var(--accent);}
.green-note{border-left:2px solid var(--goud); background:var(--goud-vlak); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:20px 24px; margin:36px 0; font-size:16px; color:var(--tekst); font-style:italic;}
.prose-back{display:inline-block; margin-bottom:32px; font-size:14px; color:var(--tekst-mute); border-bottom:1px solid transparent;}
.prose-back:hover{color:var(--accent); border-bottom-color:var(--accent);}

.icon{width:20px; height:20px; stroke:var(--accent); stroke-width:1.4; fill:none;}
.skip-link{position:absolute; left:-999px; top:0; background:var(--tekst); color:var(--nacht); padding:0.75em 1.25em; z-index:200; border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}
a:focus-visible, button:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}

@media(max-width:1069px){
  .menu-toggle{display:flex;}
  nav.primary{
    display:none; flex-direction:column; align-items:flex-start; gap:0; width:100%;
    order:3; margin-top:20px; border-top:1px solid var(--paneel-rand);
  }
  nav.primary.open{display:flex;}
  nav.primary a, nav.primary a.nav-external{
    padding:14px 0; border-bottom:1px solid var(--paneel-rand); border-radius:0;
    width:100%; border-left:none; border-right:none; border-top:none; background:none;
  }
  .pillars-grid{grid-template-columns:1fr; }
}

@media(max-width:760px){
  html,body{font-size:17px;}
  .pillars-grid{grid-template-columns:1fr; gap:20px;}
  .home-hero h1{font-size:32px;}
  .start-section{padding:36px 24px;}
  body::before{width:700px; height:600px;}
}

@media (prefers-reduced-motion: reduce){
  * { transition: none !important; }
}