:root{
  color-scheme: light;
  --basis:#459eb9;      /* opgegeven sitekleur */
  --donker:#134986;     /* logoblauw */
  --diepst:#0c2f57;     /* voet, diepere tint logoblauw */
  --licht:#e3f2f7;      /* lichte tint */
  --blauw:#114987;      /* logo */
  --blauw-diep:#0b3466;
  --grijs:#878786;      /* logoschaduw */
  --inkt:#10303b;
  --tekst:#3a4250;
  --papier:#f3f5f8;
  --wit:#ffffff;
  --lijn:#dde2ea;
  --rond:25px;
  --zij:100px;
  /* per hoofdstuk, standaard de basiskleur */
  --sbg:var(--basis); --sfg:#ffffff; --skop:#ffffff; --szacht:#e6f4f8; --slijn:rgba(255,255,255,.45); --saccent:#ffffff; --sopaccent:var(--donker);
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --kop-h:72px;
  --max:1240px;
}
*{box-sizing:border-box}
html.klaar{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--basis);color:#fff;font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--wit)}
img{max-width:100%;display:block}
a{color:var(--skop)}
:focus-visible{outline:3px solid var(--donker);outline-offset:3px;border-radius:2px}
.wrap{margin:0 auto;padding-left:max(var(--zij),env(safe-area-inset-left,0px));padding-right:max(var(--zij),env(safe-area-inset-right,0px))}
.kop .wrap{max-width:var(--max);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (max-width:1100px){:root{--zij:60px}}
@media (max-width:900px){:root{--zij:32px}}
@media (max-width:600px){:root{--zij:20px}}

/* hoofdstuktinten */
.t-basis{--sbg:var(--basis);--sfg:#fff;--skop:#fff;--szacht:#e6f4f8;--slijn:rgba(255,255,255,.45);--saccent:#fff;--sopaccent:var(--donker)}
.t-donker{--sbg:var(--donker);--sfg:#fff;--skop:#fff;--szacht:#b8dce8;--slijn:rgba(255,255,255,.3);--saccent:#7cc6dc;--sopaccent:var(--donker)}
.t-licht{--sbg:var(--licht);--sfg:var(--inkt);--skop:var(--inkt);--szacht:#3f6b79;--slijn:#b5d6e1;--saccent:var(--donker);--sopaccent:#fff}
.t-wit{--sbg:#fff;--sfg:var(--inkt);--skop:var(--inkt);--szacht:#4b6670;--slijn:#d3e4ea;--saccent:var(--donker);--sopaccent:#fff}
.t-basis,.t-donker,.t-licht,.t-wit{background:var(--sbg);color:var(--sfg)}
.skip{position:absolute;left:-999px;top:8px;background:var(--blauw);color:var(--wit);padding:8px 14px;z-index:100}
.skip:focus{left:16px}
section{scroll-margin-top:calc(var(--kop-h) + 24px)}

/* ---------- kop ---------- */
.kop{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--wit);border-bottom:1px solid var(--lijn)}
.kop .wrap{display:flex;align-items:center;gap:28px;min-height:var(--kop-h)}
.logo{flex:none;display:block}
.logo img{height:38px;width:auto}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{white-space:nowrap;color:var(--inkt);text-decoration:none;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
.nav a:hover{color:var(--donker);border-color:var(--basis)}
.kop-contact{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;font-size:14px;border-left:1px solid var(--lijn);padding-left:22px}
.kop-contact a{color:var(--inkt);text-decoration:none;font-weight:600}
.kop-contact a:hover{color:var(--blauw)}
.kop-contact .tel{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-weight:600;color:var(--donker);font-size:17px}
.menuknop{display:none;margin-left:auto;background:none;border:1px solid var(--lijn);border-radius:4px;padding:8px 12px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--inkt);cursor:pointer}
.contactstrook{display:none}

@media (max-width:1180px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--wit);border-bottom:1px solid var(--lijn);padding:8px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--lijn);font-size:14px}
  .menuknop{display:block}
  .kop-contact{display:none}
  .contactstrook{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;background:var(--donker);font-size:14px;padding-block:7px}
  .contactstrook a{color:var(--wit);text-decoration:none;font-weight:600}
  .contactstrook .wrap{min-height:0;align-items:center}
  .logo img{height:32px}
  :root{--kop-h:64px}
}


h1,h2,h3{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-weight:500;letter-spacing:-.02em;text-wrap:balance;margin:0}
.voet{background:var(--diepst);color:#b8d4de;font-size:13.5px}
.voet .wrap{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;padding-block:22px}
.voet nav{display:flex;gap:18px;flex-wrap:wrap}
.voet a{color:#dfe5ee;text-underline-offset:3px}
.nav a.actief{color:var(--donker);border-color:var(--donker)}

/* blogkop */
.blogkop{background:var(--donker);color:#fff}
.blogkop .wrap{padding-block:clamp(56px,7vw,110px) clamp(40px,5vw,72px)}
.blogkop .label{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#b8d0e8;margin:0 0 16px}
.blogkop h1{font-size:clamp(36px,5vw,72px);line-height:1.05;font-weight:300;max-width:22ch}
.blogkop p.intro{margin:20px 0 0;max-width:52ch;font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:clamp(17px,1.4vw,20px);color:#e6eef8}

/* indeling met zijbalk */
.blogbody{background:var(--licht);color:var(--inkt)}
.blogkop .wrap,.blogbody>.wrap{max-width:calc(1200px + 2 * var(--zij))}
.blogbody>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(28px,4vw,72px);padding-block:clamp(48px,6vw,96px);align-items:start}
@media (max-width:980px){.blogbody>.wrap{grid-template-columns:minmax(0,1fr)}}

/* berichtkaarten */
.lijst{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px)}
.kaart{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);background:#fff;border-radius:var(--rond);overflow:hidden;border:2pt solid #fff;box-shadow:0 10px 30px rgba(19,73,134,.08)}
.kaart-beeld{display:block;position:relative;min-height:220px;background:#cde4ec}
.kaart-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.kaart:hover .kaart-beeld img{transform:scale(1.04)}
.kaart-tekst{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.4vw,36px);min-width:0}
.datum{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#4b6670}
.kaart h2{font-size:clamp(22px,2vw,28px);line-height:1.2}
.kaart h2 a{color:var(--inkt);text-decoration:none}
.kaart h2 a:hover{color:var(--donker)}
.kaart p{margin:0;color:#3a4a55}
.lees{align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;gap:10px;background:var(--donker);color:#fff;text-decoration:none;font-weight:600;font-size:15px;padding:11px 20px;border-radius:var(--rond);transition:background .2s}
.lees:hover{background:var(--diepst)}
.lees span{transition:transform .2s}
.lees:hover span{transform:translateX(3px)}
@media (max-width:640px){.kaart{grid-template-columns:minmax(0,1fr)}.kaart-beeld{aspect-ratio:16/9;min-height:0}}

/* zijbalk */
.zijbalk{position:sticky;top:calc(var(--kop-h) + env(safe-area-inset-top,0px) + 24px);display:flex;flex-direction:column;gap:24px;min-width:0}
@media (max-width:980px){.zijbalk{position:static}}
.zijblok{background:#fff;border-radius:var(--rond);padding:26px;border:2pt solid #fff}
.zijblok h2{font-size:20px;margin-bottom:14px}
.recent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.recent li a{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;padding:10px 0;border-top:1px solid #d3e4ea;color:var(--inkt);text-decoration:none}
.recent li:first-child a{border-top:0}
.recent img{width:64px;height:64px;object-fit:cover;border-radius:12px;background:#cde4ec}
.recent b{display:block;font-weight:500;font-size:15px;line-height:1.3}
.recent small{font-family:var(--mono);font-size:11px;color:#4b6670;letter-spacing:.04em}
.recent a:hover b{color:var(--donker)}
.recent a[aria-current] b{color:var(--donker)}
.recent a[aria-current]{pointer-events:none}
.zijblok.contactblok{background:var(--donker);border-color:var(--donker);color:#fff}
.contactblok h2{color:#fff}
.contactblok p{margin:0 0 12px;color:#dbe7f5;font-size:15px}
.contactblok a{color:#fff;font-weight:600;font-family:"Inter","Helvetica Neue",Arial,sans-serif;text-decoration:none;display:block;font-size:18px}
.contactblok a:hover{text-decoration:underline}

/* artikel */
.artikel{background:#fff;border-radius:var(--rond);padding:clamp(22px,4vw,56px);min-width:0}
.artikel-beeld{width:100%;border-radius:calc(var(--rond) - 6px);margin-bottom:clamp(24px,3vw,40px)}
.tekst{max-width:68ch;font-size:18px;line-height:1.7;color:#24323b}
.tekst>*{margin:0 0 1.1em}
.tekst h2{font-size:clamp(22px,2vw,28px);margin:1.6em 0 .5em;color:var(--inkt)}
.tekst h3{font-size:20px;margin:1.4em 0 .4em;color:var(--inkt)}
.tekst a{color:var(--donker)}
.tekst img{width:auto;max-width:100%;height:auto;border-radius:16px;display:block;margin:0 auto}
.tekst figure{margin:1.6em 0}
.tekst figcaption{font-size:14px;color:#4b6670;text-align:center;margin-top:8px}
.tekst hr{border:0;border-top:1px solid #d3e4ea;margin:2em 0}
.tekst blockquote{margin:1.4em 0;padding-left:20px;border-left:3px solid var(--basis);color:#3a4a55}
.tekst ul,.tekst ol{padding-left:1.3em}
.video-link a{display:inline-flex;gap:10px;align-items:center;background:var(--licht);color:var(--donker);padding:12px 18px;border-radius:var(--rond);text-decoration:none;font-weight:600}
.embed{margin:2em 0;max-width:100%;overflow-x:auto}
.terug{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(28px,4vw,48px);padding-top:24px;border-top:1px solid #d3e4ea;font-size:15px}
.terug a{color:var(--donker);font-weight:600;text-decoration:none}
.terug a:hover{text-decoration:underline}