/* =========================================================================
   ZZPKAN — stylesheet
   Opbouw en componenten: 1-op-1 gebaseerd op de goedgekeurde wireframes.
   Stijlrichting "B — zakelijk": marineblauw + mosgroen, één consistente
   accentkleur (geen apart warm accent meer), vierkantere hoeken en een
   compactere grid voor een institutioneel/juridisch karakter.
   Pas het uiterlijk aan via de variabelen hieronder in :root.
   ========================================================================= */
:root{
  /* ==========================================================
     KLEURROLLEN — hou dit eenduidig, wijzig alleen hier:
     --blauw         koppen, sterke tekst, hoofd-nav (autoriteit)
     --tekst         lopende tekst in kaarten/artikelen
     --tekst-zacht   bijschriften, meta, ledes, "zacht" leeswerk
     --accent        DE interactieve kleur: links, hover, iconen,
                     actieve status, cijfers — overal hetzelfde mosgroen
     --koraal        gelijk aan --accent: één consistente accentkleur
                     voor het wordmerk en de "Waar wilt u beginnen"-sectie
     --zand          paginaondergrond
     --wit           kaarten/panelen
     --lavendel(-vlak) zachte infoblokken (misverstand/belangrijk/
                     diagram) en ritme-secties
     ========================================================== */
  --blauw:#12293D;
  --tekst:#1F3A48;
  --tekst-zacht:#5C7079;
  --accent:#2F6B4F;
  --zand:#F6F5F0;
  --grijs:rgba(18,41,61,0.10);
  --grijs-vlak:rgba(18,41,61,0.05);

  --lavendel:#E7ECE6;        /* zachte salietint voor afwisselende secties */
  --lavendel-vlak:#F2F4F0;
  --koraal:#2F6B4F;          /* zelfde mosgroen als --accent — uitsluitend voor het wordmerk + CTA-paneel */
  --koraal-vlak:#E1EBE4;
  --koraal-tekst:#1E4A34;    /* leesbare tekstkleur bovenop --koraal-vlak */
  --wit:#FFFFFF;

  --serif:'Inter', -apple-system, sans-serif;
  --sans:'Inter', -apple-system, sans-serif;

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --radius-pill:10px;

  /* --- spacing (ruimte tussen kaders) --- */
  --gap-lg:32px;
  --gap-md:18px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--zand); color:var(--blauw); font-family:var(--sans); font-size:18px; line-height:1.7; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:var(--serif); font-weight:500; color:var(--blauw); letter-spacing:0.1px;}
img{max-width:100%;}

/* ---------- site header / nav ---------- */
.site-header{background:var(--wit); border-bottom:1px solid var(--grijs); position:sticky; top:0; z-index:100;}
.site-header-inner{
  max-width:1040px; margin:0 auto; padding:16px 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(--blauw); background:var(--koraal-vlak); padding:8px 16px; border-radius:var(--radius-pill);}
.wordmark span{color:var(--koraal);}
nav.primary{display:flex; align-items:center; gap:14px; font-size:15px;}
nav.primary a{padding-bottom:4px; border-bottom:2px solid transparent; color:var(--blauw); opacity:.75;}
nav.primary a.active{border-bottom-color:var(--accent); opacity:1;}
nav.primary a:hover{opacity:1;}
nav.primary a.nav-external{
  padding:8px 12px; border:1.5px solid var(--grijs); border-radius:var(--radius-pill);
  color:var(--blauw); opacity:1; font-size:14px; font-weight:600;
}
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(--blauw); 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 i.p.v. steeds wit/zand) ---------- */
.tint-lavendel{background:var(--lavendel);}
.tint-koraal{background:var(--koraal-vlak);}
.tint-wit{background:var(--wit);}

/* ---------- HOME ---------- */
.home-hero{max-width:1040px; margin:0 auto; padding:72px 24px 40px; text-align:left;}
.eyebrow{font-family:var(--sans); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; display:block;}
.home-hero h1{font-size:40px; line-height:1.28; margin-bottom:24px;}
.home-hero p.lede{font-size:19px; color:var(--tekst-zacht); max-width:560px;}

.home-image{max-width:1040px; margin:0 auto; padding:20px 24px 50px;}
.home-image img{border-radius:var(--radius-lg); overflow:hidden;}
.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);}
.misverstand{border-left:2px solid var(--accent); background:var(--lavendel-vlak); 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;}

.home-narrative{max-width:1040px; margin:0 auto; padding:50px 24px  8px;}
.home-narrative p{font-size:18px; color:var(--tekst); margin-bottom:18px; font-style:italic;}

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

/* ---------- Knoppen: pil-vormig, stevig gevuld voor hoofd-CTA ---------- */
.btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--accent); background:var(--accent);
  color:var(--wit); 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:#2E3C80;}
.btn-pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--grijs); background:var(--wit);
  color:var(--blauw); 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:1040px; 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:28px 28px 32px; background:var(--wit); border-radius:var(--radius); box-shadow:0 4px 16px rgba(24,50,74,0.07);}
.pillar a{color:var(--blauw); 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:15px; display:block; margin-bottom:10px;}
.pillar h3{font-size:21px; margin-bottom:12px; margin-top:0;}
.pillar p{font-size:19px; color:var(--tekst-zacht);}

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

/* ---------- KENNISBANK ---------- */
.kb-intro{max-width:1040px; 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:1040px;}
.kb-layout{max-width:1040px; margin:0 auto; padding:24px 24px 96px; display:grid; grid-template-columns:260px 1fr; gap:var(--gap-lg);}
.kb-toc{background:var(--wit); border-radius:var(--radius); padding:24px; align-self:start; position:sticky; top:96px;}
.kb-toc .toc-group{margin-bottom:12px; border-bottom:1px solid var(--grijs);}
.kb-toc .toc-group:last-child{border-bottom:none;}
.kb-toc .toc-title{
  font-family:var(--serif); font-size:15px; font-style:italic; font-weight:700; color:var(--blauw);
  background:none; border:none; padding:14px 0; margin:0; width:100%; text-align:left;
  cursor:pointer; display:flex; justify-content:space-between; align-items:center;
}
.kb-toc .toc-title::after{content:"−"; font-family:var(--sans); font-style:normal; color:var(--accent); font-size:16px;}
.kb-toc .toc-group.collapsed .toc-title::after{content:"+";}
.kb-toc .toc-group.collapsed ul{display:none;}
.kb-toc .toc-group ul{padding-bottom:16px;}
.kb-toc ul{list-style:none; font-size:15px;}
.kb-toc li{margin-bottom:9px; color:var(--tekst-zacht);}
.kb-toc li a{color:inherit; display:block;}
.kb-toc li.current{color:var(--blauw); font-weight:600; border-left:2px solid var(--accent); padding-left:10px; margin-left:-12px;}
.kb-toc li:hover{color:var(--accent);}
.kb-content{max-width:640px; background:var(--wit); border-radius:var(--radius-lg); padding:36px;}
.breadcrumb{font-size:13px; color:var(--tekst-zacht); letter-spacing:.02em; margin-bottom:18px;}
.breadcrumb a:hover{color:var(--accent);}
.kb-content h1{font-size:32px; margin-bottom:8px;}
.kb-sub{font-size:15px; color:var(--tekst-zacht); margin-bottom:36px;}
.kb-content h2{font-size:22px; margin:36px 0 14px;}
.kb-content p{font-size:17px; color:var(--tekst); margin-bottom:18px;}
.diagram{margin:40px 0; padding:32px; background:var(--lavendel-vlak); border-radius:var(--radius); box-shadow:none; border:none;}
.diagram-caption{font-size:13px; color:var(--tekst-zacht); margin-top:14px;}
.kb-footnav{display:flex; justify-content:space-between; margin-top:56px; padding-top:24px; border-top:1px solid var(--grijs); font-size:15px;}
.related-list{list-style:none; display:flex; flex-wrap:wrap; gap:14px 18px; margin-bottom:8px;}
.related-list a{font-size:14px; background:var(--lavendel); border-radius:var(--radius-pill); padding:8px 16px; display:inline-block; color:var(--blauw);}
.related-list a:hover{background:var(--accent); color:var(--wit);}
.cross-refs{list-style:none; margin-bottom:8px; display:grid; gap:10px;}
.cross-refs li{padding:16px 18px; border-radius:var(--radius-sm); font-size:15px;}
.cross-refs li:nth-child(odd){background:var(--lavendel-vlak);}
.cross-refs a{font-weight:600; border-bottom:1px solid var(--accent); padding-bottom:1px;}
.cross-refs span{display:block; font-size:14px; color:var(--tekst-zacht); font-weight:400; margin-top:2px;}
.kb-important{border-left:3px solid var(--accent); background:var(--lavendel-vlak); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:20px 24px; margin:32px 0 36px; font-size:16px; color:var(--blauw);}
.kb-important .label{font-family:var(--serif); font-style:italic; font-size:13px; color:var(--accent); display:block; margin-bottom:6px;}

/* ---------- shared footer ---------- */
.site-footer{border-top:1px solid var(--grijs); padding:40px 24px; max-width:1040px; margin:0 auto;text-align: center;}
.site-footer p{font-size:13px; color:var(--tekst-zacht);}
.site-footer nav{gap:20px; flex-wrap:wrap; margin-top:16px;}
.site-footer nav a{font-size:13px; color:var(--blauw); border-bottom:1px solid var(--grijs);}
.site-footer nav a:hover{color:var(--accent); border-color:var(--accent);}

/* ---------- OVER / UITGANGSPUNTEN / BELOFTEN ---------- */
.prose-page{max-width:1040px; margin:0 auto; padding:64px 24px 80px;}
.prose-page h1{font-size:34px; margin-bottom:28px;}
.prose-page p{font-size:18px; color:var(--tekst); margin-bottom:20px;}
.prose-page p a, .prose-page li a{color:var(--blauw); 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:22px; margin:40px 0 16px;}
.prose-page ul.plain{list-style:none; margin-bottom:20px; border-left:3px solid var(--accent); background:var(--wit); border-radius:0 var(--radius) var(--radius) 0; padding:8px 24px; box-shadow:0 4px 16px rgba(24,50,74,0.06);}
.prose-page ul.plain li{padding:15px 0; border-top:1px solid var(--grijs); font-size:17px; color:var(--tekst);}
.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(--wit); 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:3px solid var(--accent); background:var(--lavendel-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-zacht); 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(--blauw); color:var(--wit); 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 #2c6cd9; 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(--grijs);
  }
  nav.primary.open{display:flex;}
  nav.primary a, nav.primary a.nav-external{
    padding:14px 0; border-bottom:1px solid var(--grijs); border-radius:0;
    width:100%; border-left:none; border-right:none; border-top:none;
  }
  .kb-layout{grid-template-columns:1fr;}
  .kb-toc{position:static;}
}

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

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