:root{
  --rood:#d8232a; --navy:#0f2f6b; --blauw:#1d63c9; --licht:#eef4fc;
  --tekst:#1c2533; --grijs:#5a6577; --rand:#d9e2ef; --wit:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-size:17px;line-height:1.5;color:var(--tekst);background:var(--wit)}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--blauw)}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* Toegankelijkheid */
.naar-inhoud{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:100;font-weight:700}
.naar-inhoud:focus{left:10px;top:10px}
a:focus-visible,video:focus-visible{outline:3px solid var(--rood);outline-offset:3px;border-radius:4px}
.hero a:focus-visible,.oproep a:focus-visible{outline-color:#fff}
[id]{scroll-margin-top:110px}

/* Kop */
header{background:var(--wit);border-bottom:4px solid var(--rood);position:sticky;top:0;z-index:10;box-shadow:0 2px 8px rgba(15,47,107,.08)}
.kop{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 20px;max-width:1040px;margin:0 auto}
.kop img{height:84px;width:auto}
.kop nav{order:1}
.kop > a{order:2}
nav a{font-weight:600;font-size:.95rem;text-decoration:none;color:var(--navy);margin-right:18px;white-space:nowrap}
nav a:hover,nav a[aria-current]{color:var(--rood)}

/* Hero */
.hero{color:var(--wit);padding:22px 0 0}
.hero .wrap{width:calc(100% - 40px);max-width:1000px;padding:28px 30px;border-radius:12px;background:linear-gradient(135deg,var(--navy),var(--blauw))}
.hero h1{font-size:1.9rem;line-height:1.2;margin:0 0 10px}
.hero p{font-size:1.1rem;max-width:720px;margin:0 0 18px;opacity:.95}
.knop{display:inline-block;background:var(--rood);color:var(--wit);font-weight:700;text-decoration:none;padding:10px 20px;border-radius:8px;font-size:1rem}
.knop:hover{background:#b51b21}
.knop.wit{background:var(--wit);color:var(--navy);margin-left:10px}
.knop.wit:hover{background:#dde8f8}

/* Secties */
section{padding:30px 0}
section.licht{background:var(--licht)}
h2{color:var(--navy);font-size:1.45rem;line-height:1.25;margin:0 0 12px}
h2::after{content:"";display:block;width:48px;height:3px;background:var(--rood);margin-top:6px;border-radius:2px}
h3{color:var(--navy);margin:0 0 4px;font-size:1.05rem}
.intro{font-size:1.05rem;max-width:760px;margin:0 0 10px}
.tussenkop{margin-top:18px}

.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-top:12px}
.kaart{background:var(--wit);border:1px solid var(--rand);border-left:5px solid var(--blauw);border-radius:8px;padding:10px 14px}
.kaart p{margin:0}

ul.vinkjes{list-style:none;padding:0;margin:10px 0 0}
ul.vinkjes li{position:relative;padding-left:34px;margin-bottom:6px}
ul.vinkjes li::before{content:"✓";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--rood);color:#fff;font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;margin-top:1px}

ol.stappen{list-style:none;counter-reset:stap;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
ol.stappen li{counter-increment:stap;background:var(--wit);border:1px solid var(--rand);border-radius:8px;padding:10px 14px 10px 54px;position:relative}
ol.stappen li::before{content:counter(stap);position:absolute;top:10px;left:14px;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}

.praktijk{background:var(--wit);border:1px solid var(--rand);border-radius:10px;padding:14px 18px;display:grid;gap:4px}
.praktijk + .praktijk{margin-top:10px}
.praktijk p{margin:0}
.praktijk .label{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--rood)}

.video{background:#000;border-radius:12px;overflow:hidden;box-shadow:0 8px 28px rgba(15,47,107,.2);margin:14px 0 8px}
.video video{width:100%;height:auto;aspect-ratio:16/9}
.video{position:relative}
.speel{position:absolute;inset:0;z-index:2;width:100%;border:0;margin:0;padding:0;cursor:pointer;background:rgba(11,31,71,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;font:inherit}
.speel[hidden]{display:none}
.speel:hover{background:rgba(11,31,71,.2)}
.speel-rondje{width:96px;height:96px;border-radius:50%;background:var(--rood);box-shadow:0 6px 20px rgba(0,0,0,.35);position:relative;transition:transform .15s}
.speel-rondje::after{content:"";position:absolute;left:38px;top:28px;border-style:solid;border-width:20px 0 20px 32px;border-color:transparent transparent transparent #fff}
.speel:hover .speel-rondje{transform:scale(1.08)}
.speel-tekst{background:var(--rood);font-weight:700;font-size:1.1rem;padding:8px 18px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.speel:focus-visible{outline:4px solid #fff;outline-offset:-8px}
@media (max-width:720px){.speel-rondje{width:68px;height:68px}.speel-rondje::after{left:27px;top:20px;border-width:14px 0 14px 22px}.speel-tekst{font-size:.95rem;padding:6px 12px}}
.klein{color:var(--grijs);font-size:.95rem}

.oproep{background:var(--navy);color:var(--wit);border-radius:12px;padding:22px 24px;text-align:center}
.oproep h2{color:var(--wit)}
.oproep h2::after{margin-left:auto;margin-right:auto}
.oproep p{max-width:680px;margin:0 auto 14px}

/* Contact */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:12px}
.contact .kaart{border-left-color:var(--rood)}
.contact a{font-weight:600}

footer{background:#0b1f47;color:#c9d6ee;padding:16px 0;font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
footer a{color:#fff}

@media (max-width:720px){
  body{font-size:16px}
  header{position:static}
  [id]{scroll-margin-top:0}
  .kop{flex-direction:column;gap:6px;padding:10px 16px}
  nav{text-align:center;line-height:2}
  .kop img{height:auto;max-height:64px;width:100%;object-fit:contain}
  nav a{margin:0 10px}
  .kop nav{order:2}
  .kop > a{order:1}
  .hero{padding:16px 0 0}
  .hero .wrap{width:calc(100% - 32px);padding:22px 18px}
  .hero h1{font-size:1.5rem}
  .knop.wit{margin:12px 0 0}
  section{padding:24px 0}
  .wrap{padding:0 16px}
}