/* Vitens, werken bij: gedeelde basis voor vitens, vitens-bronnen en vitens-storing.
   Kleuren uit de banners: balk #2c3c8b, tweede balk #4aafe0, knop #ede412. */
:root,html{color-scheme:light only}
:root{
  --navy:#2c3c8b; --blauw:#4aafe0; --geel:#ede412; --wit:#ffffff;
  --inkt:#1b2459; --diep:#1f2b66; --licht:#eef5fb; --lijn:#d5dbea; --grijs:#5a6283;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Barlow,system-ui,sans-serif;font-weight:500;color:var(--inkt);background:var(--wit);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;line-height:1;letter-spacing:-.005em}
b,strong{font-weight:700}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
q{font-weight:700;quotes:"‘" "’"}

/* ---------- de balk: het signatuurelement uit de banners ----------
   eerst schuift het vlak open, dan de tekst, die nog een stukje naar rechts schuift; weg gaat naar rechts */
.balk{display:inline-block;background:var(--navy);color:var(--wit);font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;line-height:1.04;padding:.06em .28em 0;white-space:nowrap;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.45,0,.55,1)}
.balk>span{display:inline-block;clip-path:inset(0 100% 0 0);transform:translateX(-.12em);transition:clip-path 1.1s cubic-bezier(.45,0,.55,1) .18s,transform .7s cubic-bezier(.45,0,.55,1) .3s}
.balk.b2{background:var(--blauw)}
.balk.wit{background:var(--wit);color:var(--navy)}
.balk.geel{background:var(--geel);color:var(--navy)}
.in>.balk,.balk.in{clip-path:inset(0 0 0 0)}
.in>.balk>span,.balk.in>span{clip-path:inset(0 -2% 0 0);transform:none}
.uit>.balk,.balk.uit{clip-path:inset(0 0 0 100%);transition-delay:.1s}
.uit>.balk>span,.balk.uit>span{clip-path:inset(0 0 0 100%);transition-delay:0s}
.regel{display:block}
.regel+.regel{margin-top:.12em}
.regel.ins{padding-left:.5em}

/* ---------- top ---------- */
.top{display:flex;justify-content:space-between;align-items:center;gap:20px}
.top .merk{width:clamp(104px,10vw,132px);height:auto}
.top a{font-weight:700;font-size:16px;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px}

/* ---------- kaarten (kaarten.js) ---------- */
.kaart{background:var(--wit);color:var(--inkt);max-width:100%;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.kaart.zicht{opacity:1;transform:none}
.kaart[hidden]{display:none}
.kaart header{display:flex;align-items:center;gap:6px 10px;padding:9px 10px 8px;flex-wrap:wrap}
.kaart header .naam2{flex:1 1 0}
.chip{font-weight:700;font-size:14px;line-height:1;background:var(--navy);color:var(--wit);padding:5px 7px 4px;font-variant-numeric:tabular-nums}
.naam2{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.replay{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:none;border:1.5px solid var(--lijn);color:var(--inkt);font:600 14px Barlow,sans-serif;padding:3px 9px 2px;cursor:pointer}
.replay:hover{border-color:var(--inkt)}
.replay svg{width:14px;height:14px}
.stage{padding:0 10px 10px}
.schaal{position:relative;overflow:hidden}
.schaal iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;background:#fff}

/* ---------- secties ---------- */
section{padding:92px 0}
.live{background:var(--diep);color:var(--wit);padding:42px 0 50px}
.kopregel{display:flex;justify-content:space-between;align-items:end;gap:14px 30px;flex-wrap:wrap;margin-bottom:22px}
.live h2{font-size:clamp(30px,3.6vw,46px)}
.live p{color:rgba(255,255,255,.8);font-size:17px;max-width:520px}
.live .intro-m{display:none;color:var(--wit);font-size:18px;margin-bottom:30px}
h2.groot{font-size:clamp(46px,7vw,100px);margin-bottom:22px}
.lead{max-width:620px;font-size:20px}
.vkop{display:grid;grid-template-columns:auto minmax(0,440px);justify-content:space-between;align-items:end;gap:20px 48px}
.vkop h2.groot{margin-bottom:0}
.vkop .lead{padding-bottom:10px}

/* storykaarten met echte stills */
.stappen{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:50px}
.stap{background:var(--k);color:var(--wit);padding:16px 16px 0}
.stap.donker{color:var(--inkt)}
.stap img{width:100%;aspect-ratio:336/280;object-fit:cover}
.stap figcaption{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:0 18px;padding:18px 0 20px}
.stap .t{font-family:'Baloo 2',sans-serif;font-size:clamp(48px,5.4vw,74px);font-weight:800;line-height:.8;font-variant-numeric:tabular-nums}
.stap .t small{font-size:.36em}
.stap b{display:block;font-family:'Baloo 2',sans-serif;font-size:26px;font-weight:800;line-height:1.05}
.stap p{font-size:17px;margin-top:4px}

/* banden per set */
.band{padding:90px 0;background:var(--k);color:var(--c,var(--wit));position:relative}
.band h2{font-size:clamp(46px,7.4vw,104px);margin-bottom:24px}
.band h2 .sub{display:block;font-family:Barlow,sans-serif;font-weight:600;font-size:.26em;letter-spacing:.02em;margin-top:.5em}
.band-in>.tekst{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:0 56px;align-items:start}
.band-in>.tekst>*{grid-column:1}
.band-in>.tekst>.r2{grid-column:2;grid-row:1/span 3}
.band-in>.kaarten{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;margin-top:40px}
.band p{font-size:18px;max-width:430px}
.band p+p:not(.r2){margin-top:12px}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.strip figure{background:rgba(255,255,255,.16)}
.band.donker .strip figure{background:rgba(27,36,89,.1)}
.strip img{width:100%;aspect-ratio:336/280;object-fit:cover}
.strip figcaption{font-size:13px;font-weight:700;padding:5px 3px 3px;line-height:1.25}
.kolom{display:grid;gap:22px}

/* setknoppen */
.knopjes{display:flex;flex-wrap:wrap;gap:6px}
.knopjes button{font:700 15px Barlow,sans-serif;background:transparent;color:inherit;border:2px solid currentColor;padding:7px 14px 6px;cursor:pointer;opacity:.78}
.knopjes button[aria-pressed="true"]{background:var(--aan,var(--navy));color:var(--aantekst,var(--wit));border-color:var(--aan,var(--navy));opacity:1}
.knopjes button:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* alle formaten */
.wand{background:var(--licht)}
.wand .bediening{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin:26px 0 34px}
.wand .lbl{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs);margin-right:10px}
.wand .bediening>div{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.wandrij{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}
.wandrij+.wandrij{margin-top:22px}
.noot{font-size:15px;opacity:.85;margin-top:24px}

/* feiten */
.feiten{background:var(--wit);padding:70px 0}
.feit-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.feit{background:var(--k);color:var(--wit);padding:18px 18px 16px}
.feit.donker{color:var(--inkt)}
.feit b{display:block;font-family:'Baloo 2',sans-serif;font-size:clamp(52px,5.6vw,80px);font-weight:800;line-height:.9}
.feit span{font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.03em}

/* meer vitens */
.meer{background:var(--navy);color:var(--wit);padding:80px 0}
.meer h2{font-size:clamp(36px,4.2vw,56px);margin-bottom:26px}
.meer-rij{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.meer a{display:grid;grid-template-columns:160px 1fr;background:var(--wit);color:var(--inkt);text-decoration:none;align-items:center}
.meer a div{overflow:hidden}
.meer a img{width:160px;aspect-ratio:2/3;object-fit:cover;transition:transform .5s}
.meer a:hover img{transform:scale(1.04)}
.meer a b{display:block;font-family:'Baloo 2',sans-serif;font-size:28px;font-weight:800;line-height:1.02;padding:0 22px}
.meer a span{display:block;font-size:16px;color:var(--grijs);padding:6px 22px 0}
footer{background:var(--inkt);color:var(--wit);font-size:15px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:26px 0}
.voetbalk{display:flex;height:8px}.voetbalk i{flex:1;background:var(--wit)}.voetbalk i:nth-child(2){background:var(--blauw)}.voetbalk i:nth-child(3){background:var(--geel)}

@media (max-width:1000px){
  .band-in>.tekst{grid-template-columns:1fr}
  .band-in>.tekst>.r2{grid-column:1;grid-row:auto;margin-top:24px}
  .band p{max-width:640px}
  .strip{max-width:700px}
}
@media (max-width:900px){
  .feit-rij{grid-template-columns:1fr 1fr}
  .meer-rij{grid-template-columns:1fr}
  .meer a{grid-template-columns:104px 1fr}
  .meer a img{width:104px}
  .meer a b{font-size:24px}
}
@media (max-width:640px){
  section,.band{padding:62px 0}
  .stappen{grid-template-columns:1fr;gap:18px}
  .vkop{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr 1fr}
  .live .intro-m{display:block}
  .wandrij{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .balk,.balk>span{clip-path:none!important;transform:none!important}
  .kaart{opacity:1;transform:none}
}

/* band met kaarten naast de tekst (geen lege rechterkant bij smalle formaten) */
.band-in.zij{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:34px 40px;align-items:start}
.band-in.zij>.tekst{display:block}
.band-in.zij>.tekst .strip{grid-template-columns:1fr 1fr;margin-top:26px}
.band-in.zij>.kaarten{margin-top:0;justify-content:flex-end}
@media (max-width:1000px){
  .band-in.zij{grid-template-columns:1fr}
  .band-in.zij>.kaarten{justify-content:flex-start}
  .band-in.zij>.tekst .strip{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:640px){ .band-in.zij>.tekst .strip{grid-template-columns:1fr 1fr} }