:root {
--kb-primary: #1e4d79;
--kb-brand-orange: #f7650d;
--kb-primary-soft: #eaf1f8;
--kb-primary-dark: #163a5f;
--kb-accent: #d4a55c;
--kb-accent-soft: #faf3e6;
--kb-ink: #16202b;
--kb-ink-soft: #3d4b5c;
--kb-muted: #6b7785;
--kb-line: #e3e8ee;
--kb-bg: #fbfbfa;
--kb-bg-alt: #f4f4f0;
--kb-orange-check: #fba97a;
--kb-good: #2c6638;
--kb-good-soft: #e8f3eb;
--kb-warn: #8f5419;
--kb-warn-soft: #fff4e6;
--kb-radius: 8px;
--kb-radius-lg: 12px;
--kb-shadow-sm: 0 1px 2px rgba(22, 32, 43, 0.06);
--kb-shadow: 0 4px 12px rgba(22, 32, 43, 0.06);
--kb-shadow-lg: 0 12px 32px rgba(22, 32, 43, 0.10);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; }
body {
overflow-x: hidden;
background: var(--kb-bg);
color: var(--kb-ink);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--kb-primary); }
a:hover { color: var(--kb-primary-dark); }
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3, h4 { color: var(--kb-ink); letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 16px; }
h1 { font-size: clamp(32px, 5vw, 50px); font-weight: 700; }
h2 { font-size: clamp(26px, 3.5vw, 36px); font-weight: 700; }
h3 { font-size: 20px; font-weight: 600; color: var(--kb-brand-orange); }
.eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 13px;
font-weight: 600;
color: var(--kb-brand-orange);
margin-bottom: 12px;
}
/* Header */
header.site-header {
background: var(--kb-bg);
border-bottom: 1px solid var(--kb-line);
padding: 16px 0;
position: sticky;
top: 0;
z-index: 50;
}
header.site-header .container { position: relative; }
header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo {
display: flex; align-items: center; gap: 10px;
font-size: 20px; font-weight: 700; color: var(--kb-ink); text-decoration: none;
}
.logo-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 8px;
background: var(--kb-primary); color: white;
font-weight: 700; font-size: 16px;
}
.logo-img {
width: 32px; height: 32px; border-radius: 8px;
object-fit: cover; display: block;
}
/* EenvoudigOnline.nl wordmark: Eenvoudig + .nl blauw, Online oranje (logo). */
.eo-wordmark { white-space: nowrap; }
.eo-wordmark .eo-a, .eo-wordmark .eo-c { color: #1e4d79; }
.eo-wordmark .eo-b { color: var(--kb-brand-orange); }
nav.site-nav { display: flex; gap: 28px; align-items: center; }
nav.site-nav a {
color: var(--kb-ink-soft); text-decoration: none; font-size: 15px; font-weight: 500;
}
nav.site-nav a:hover { color: var(--kb-primary); }
nav.site-nav a.btn { color: white; }
nav.site-nav a.btn:hover { color: white; }
/* =============================================
HAMBURGER — pure CSS (checkbox-hack)
JS in script.js blijft als progressive-enhancement
(sluit menu na klik op link, update aria-label).
============================================= */
/* Verberg de checkbox volledig */
.nav-check {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* Hamburger-label: verborgen op desktop */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
padding: 8px;
background: none;
border: none;
cursor: pointer;
border-radius: var(--kb-radius);
flex-shrink: 0;
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--kb-ink);
border-radius: 2px;
transition: transform .2s, opacity .2s;
transform-origin: center;
}
/* Kruisje-animatie: checkbox is sibling van