/* Wordgevonden blog, gedeelde stijl. Tokens gelijk aan de hoofdsite. */
:root{
  --room:#f7f4ee; --wit:#ffffff; --sky:#e4ebf4; --zand:#ece5d7;
  --denim:#31517c; --blauw:#476fa4; --blauw-donker:#385a87;
  --inkt:#212530; --grijs:#6d7078; --lijn:#e2ddd1;
  --wit-op-denim:rgba(255,255,255,.82);
  --font-wordmark:"Fraunces",Georgia,serif;
  --font-display:"Bricolage Grotesque",Arial,sans-serif;
  --font-body:"Karla",system-ui,sans-serif;
}
*{ box-sizing:border-box; margin:0; }
body{ font-family:var(--font-body); font-size:1.0625rem; line-height:1.7;
      color:var(--inkt); background:var(--room); }
a{ color:inherit; }
a:focus-visible{ outline:3px solid #f2b95c; outline-offset:4px; }
.wrap{ max-width:74rem; margin:0 auto; padding:0 1.5rem; }
.topbar{
  position:sticky; top:0; z-index:100; max-width:none;
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem max(1.5rem,calc((100vw - 71rem)/2));
  background:rgba(247,244,238,.94); border-bottom:1px solid rgba(226,221,209,.85);
  box-shadow:0 8px 24px rgba(33,37,48,.04); backdrop-filter:blur(14px);
}
.blog-nav{ display:flex; align-items:center; gap:1.25rem; }
.logo{ font-family:var(--font-wordmark); font-weight:700; font-size:1.35rem; text-decoration:none; }
.logo em{ color:#f2b95c; font-style:normal; }
.terug{ font-size:.9rem; font-weight:700; color:var(--blauw); text-decoration:none; }
.terug:hover{ text-decoration:underline; }
.audit-link{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:2.75rem; padding:.65rem 1.1rem; border-radius:11px;
  color:#fff; background:var(--blauw); font-family:var(--font-display);
  font-size:.9rem; font-weight:700; text-decoration:none;
  box-shadow:0 7px 18px rgba(49,81,124,.16);
}
.audit-link:hover{ background:var(--blauw-donker); text-decoration:none; }
.breadcrumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin-bottom:1rem; color:var(--grijs); font-size:.82rem; }
.breadcrumbs a{ color:var(--blauw); text-decoration:none; }
.breadcrumbs a:hover{ text-decoration:underline; }
.breadcrumbs span[aria-hidden="true"]{ color:#aaa49a; }

.artikel{ max-width:48rem; margin:0 auto; padding:2rem 1.5rem 4rem; }
.artikel .kicker{ font-weight:700; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--blauw); }
.artikel h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem,4.5vw,2.7rem); line-height:1.1; margin:.5rem 0; }
.artikel .meta{ color:var(--grijs); font-size:.85rem; margin-bottom:2rem; }
.artikel-beeld{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block; border-radius:18px; margin:0 0 2rem; box-shadow:0 16px 40px rgba(33,37,48,.08); }
.artikel .lead{ font-size:1.2rem; color:var(--grijs); margin-bottom:2rem; }
.artikel h2{ font-family:var(--font-display); font-weight:700; font-size:1.45rem; margin:2.2rem 0 .6rem; }
.artikel p{ margin-bottom:1rem; }
.artikel ul, .artikel ol{ margin:0 0 1rem 1.3rem; }
.artikel li{ margin-bottom:.4rem; }
.artikel strong{ font-weight:700; }
.check{ background:var(--wit); border-radius:14px; padding:1.3rem 1.6rem; margin:1.5rem 0; }
.check p{ font-weight:700; margin-bottom:.6rem; }
.cta-kaart{ background:var(--denim); color:#fff; border-radius:18px; padding:2rem; margin-top:3rem; }
.cta-kaart h2{ font-family:var(--font-display); font-weight:700; font-size:1.35rem; margin-bottom:.4rem; }
.cta-kaart p{ color:var(--wit-op-denim); margin-bottom:1.2rem; max-width:34rem; }
.cta-kaart a{ display:inline-block; font-family:var(--font-display); font-weight:700;
  background:#fff; color:var(--denim); text-decoration:none; border-radius:12px; padding:.85rem 1.5rem; }
.gerelateerd{ border-top:1px solid var(--lijn); margin-top:2.5rem; padding-top:1.5rem; }
.gerelateerd h2{ margin:0 0 .8rem; font-size:1.15rem; }
.gerelateerd a{ display:block; margin-bottom:.45rem; color:var(--blauw); font-weight:700; text-underline-offset:3px; }
.artikel-faq{ margin-top:3rem; }
.artikel-faq > h2{ margin-bottom:.35rem; }
.artikel-faq > p{ color:var(--grijs); margin-bottom:1.1rem; }
.artikel-faq details{ background:var(--wit); border:1px solid var(--lijn); border-radius:14px; margin:.7rem 0; overflow:hidden; }
.artikel-faq summary{ cursor:pointer; list-style:none; position:relative; padding:1rem 3.25rem 1rem 1.2rem; font-family:var(--font-display); font-weight:700; line-height:1.35; }
.artikel-faq summary::-webkit-details-marker{ display:none; }
.artikel-faq summary::after{ content:"+"; position:absolute; right:1.2rem; top:.82rem; color:var(--blauw); font-size:1.35rem; }
.artikel-faq details[open] summary::after{ content:"−"; }
.artikel-faq details p{ margin:0; padding:0 1.2rem 1.15rem; color:var(--grijs); }
.voetje{ max-width:71rem; margin:2rem auto 0; border-top:1px solid var(--lijn); padding:1.5rem 0 2.5rem; text-align:left; color:var(--grijs); font-size:.85rem; }
.voetje a{ color:var(--blauw); }

/* index */
.blog-lijst{ max-width:74rem; margin:0 auto; padding:2rem 1.5rem 4rem; }
.blog-lijst h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,5vw,2.8rem); margin-bottom:.4rem; }
.blog-lijst .sub{ color:var(--grijs); margin-bottom:2.5rem; }
.blog-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
.blog-kaart{ display:block; background:var(--wit); border-radius:18px; overflow:hidden;
  text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.blog-kaart:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(33,37,48,.1); }
.blog-kaart img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block; }
.blog-kaart-inhoud{ padding:1.35rem 1.45rem 1.5rem; }
.blog-kaart h2{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; margin-bottom:.35rem; }
.blog-kaart p{ color:var(--grijs); font-size:.95rem; margin-bottom:.5rem; }
.blog-kaart .lees{ font-weight:700; color:var(--blauw); font-size:.9rem; }
@media(max-width:850px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
  .blog-grid{grid-template-columns:1fr}
  .topbar{padding:.75rem 1rem; gap:.75rem}
  .blog-nav{gap:.55rem}
  .blog-nav .terug:not(.audit-link){display:none}
  .audit-link{min-height:2.5rem; padding:.55rem .8rem; font-size:.82rem}
  .logo{font-size:1.15rem}
  .voetje{margin-left:1.5rem;margin-right:1.5rem}
  .artikel{padding-top:1rem}
}