/* Het Kuipgesprek — kleuren en letters uit het logo: wit, logo-blauw #004AAD, grijze pil met typemachineletter. */
@font-face{font-family:"Oswald";src:url(/fonts/oswald-latin-wght-normal.woff2) format("woff2");font-weight:200 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Oswald";src:url(/fonts/oswald-latin-ext-wght-normal.woff2) format("woff2");font-weight:200 700;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-grotesk-latin-wght-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(/fonts/courier-prime-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(/fonts/courier-prime-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --blauw:#004AAD;      /* het blauw van het logo */
  --diep:#00317A;       /* donkerder blauw voor de voet en hover */
  --inkt:#0E1E3D;       /* lopende tekst */
  --grijs:#4A5876;      /* bijzaken, haalt 4.5:1 op wit */
  --pil:#F2F2F2;        /* de pil onder het logo */
  --water:#EBF1FB;      /* lichtblauwe vlakken */
  --lijn:#C7D4EC;
  --wit:#fff;
  --kop:"Oswald","Arial Narrow",sans-serif;
  --tekst:"Hanken Grotesk",system-ui,sans-serif;
  --type:"Courier Prime","Courier New",monospace;
  --breed:1240px;
  --rand:clamp(20px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wit);color:var(--inkt);font:400 18px/1.6 var(--tekst);text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:var(--blauw);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--diep)}
:focus-visible{outline:3px solid var(--blauw);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--kop);color:var(--blauw);font-weight:600;line-height:1;margin:0;letter-spacing:.005em}
h1,h2{text-transform:uppercase}
p{margin:0 0 1em}
button{font:inherit;cursor:pointer}
.skip{position:absolute;left:-9999px;top:8px;background:var(--blauw);color:#fff;padding:10px 16px;z-index:50}
.skip:focus{left:8px}

/* Pil: precies zoals de regel onder het logo */
.pil{display:inline-block;font:400 17px/1.3 var(--type);color:#111;background:var(--pil);border-radius:10px;padding:6px 14px;margin:0 0 22px}
.pil-donker{background:rgba(255,255,255,.12);color:#fff}

/* Kop */
.kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;max-width:var(--breed);margin:0 auto;padding:22px var(--rand)}
.kop-logo{display:flex;align-items:center;gap:14px;color:var(--blauw)}
.kop-mark{width:40px;height:43px}
.kop-logo img{height:26px;width:auto}
.kop-nav{display:flex;flex-wrap:wrap;gap:6px 28px;font:500 17px/1 var(--kop);text-transform:uppercase;letter-spacing:.04em}
.kop-nav a{text-decoration:none;color:var(--inkt);padding:8px 0;border-bottom:3px solid transparent}
.kop-nav a:hover{color:var(--blauw)}
.kop-nav a[aria-current]{color:var(--blauw);border-bottom-color:var(--blauw)}
.kop-nav a[href="/gast-worden/"]{color:var(--blauw)}

/* Held */
.held{max-width:var(--breed);margin:0 auto;padding:clamp(24px,5vw,72px) var(--rand) clamp(56px,7vw,104px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.held h1{font-size:clamp(48px,7.6vw,108px);line-height:.94;margin-bottom:24px;text-wrap:balance}
.held h1 a{color:inherit;text-decoration:none}
.held h1 a:hover{color:var(--diep)}
.held-intro{font-size:20px;max-width:34em;color:var(--inkt)}
.held-acties{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:28px 0 22px}
.held-duur{font-family:var(--type);font-size:16px;color:var(--grijs)}
.held-beeld{border:0;background:none;padding:0;color:var(--blauw);justify-self:center;width:100%;max-width:470px;border-radius:24px}
.held-mark{width:100%;height:auto}
.held-beeld:hover .golf{opacity:.75}
.golf{transition:opacity .3s}
body.speelt .golf{animation:golf 1.6s ease-in-out infinite}
body.speelt .golf-2{animation-delay:.2s}
body.speelt .golf-3{animation-delay:.4s}
@keyframes golf{0%,100%{opacity:.25}45%{opacity:1}}

/* Knoppen */
.speel{display:inline-flex;align-items:center;gap:10px;border:0;background:var(--blauw);color:#fff;border-radius:999px;font:600 18px/1 var(--kop);text-transform:uppercase;letter-spacing:.05em;padding:0 26px 0 20px;min-height:56px}
.speel svg{width:22px;height:22px}
.speel:hover{background:var(--diep)}
.speel.is-bezig{background:var(--diep)}
.speel-klein{min-height:46px;font-size:15px;padding:0 18px 0 14px}
.speel-klein svg{width:16px;height:16px}
.knop{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;background:var(--blauw);color:#fff;border:0;font:600 18px/1 var(--kop);text-transform:uppercase;letter-spacing:.05em;text-decoration:none}
.knop:hover{background:var(--diep);color:#fff}
.knop-wit{background:#fff;color:var(--blauw)}
.knop-wit:hover{background:var(--pil);color:var(--diep)}

/* Luisterlinks */
.luister{display:flex;flex-wrap:wrap;gap:8px 22px}
.luister-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;color:var(--inkt);text-decoration:none;min-height:44px}
.luister-link svg{width:22px;height:22px;color:var(--blauw)}
.luister-link:hover span{text-decoration:underline}

/* Blokken */
.blok{max-width:var(--breed);margin:0 auto;padding:clamp(48px,6vw,88px) var(--rand)}
.blok-kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 24px;margin-bottom:28px}
.blok h2{font-size:clamp(34px,4.6vw,60px)}
.meer{font:500 18px/1 var(--kop);text-transform:uppercase;letter-spacing:.04em}
.blok-logboek{padding-top:0}

/* Afleveringen als rijen */
.rijen{list-style:none;margin:0;padding:0;border-top:3px solid var(--blauw)}
.rij{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:8px 28px;align-items:center;padding:22px 0;border-bottom:1px solid var(--lijn)}
.code{font:700 17px/1 var(--type);color:var(--blauw);background:var(--pil);border-radius:8px;padding:8px 10px;justify-self:start}
.rij h3{font-size:clamp(22px,2.4vw,28px);font-weight:500;line-height:1.15;margin-bottom:6px}
.rij h3 a{color:var(--blauw);text-decoration:none}
.rij h3 a:hover{text-decoration:underline;text-decoration-thickness:2px}
.rij-meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;font-size:15px;color:var(--grijs)}
.rij-plek{color:var(--inkt);font-weight:600}

/* Verhaal */
.verhaal{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px clamp(32px,6vw,96px);align-items:end;border-top:1px solid var(--lijn)}
.verhaal h2{font-size:clamp(36px,5vw,68px);line-height:.98;text-wrap:balance}
.verhaal-tekst p{font-size:19px;max-width:32em}

/* Kuipen: de route langs alle plekken */
.kuipen{background:var(--water);max-width:none}
.kuipen h2{max-width:var(--breed);margin:0 auto 36px}
.kuip-lijst{list-style:none;margin:0 auto;padding:0;max-width:var(--breed);display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:28px 0}
.kuip-lijst li{position:relative;padding:26px 18px 0 0;border-top:3px dashed var(--blauw)}
.kuip-lijst li::before{content:"";position:absolute;top:-10px;left:0;width:17px;height:17px;border-radius:50%;background:var(--blauw);border:3px solid var(--water)}
.kuip-lijst a{display:block;text-decoration:none}
.kuip-plek{display:block;font:500 22px/1.15 var(--kop);color:var(--blauw);margin-bottom:6px}
.kuip-wie{display:block;font:400 15px/1.4 var(--type);color:var(--inkt)}
.kuip-lijst a:hover .kuip-plek{text-decoration:underline}

/* Platformtegels */
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:32px}
.tegels-link{display:flex;align-items:center;gap:14px;min-height:84px;padding:18px 22px;border:2px solid var(--blauw);border-radius:16px;text-decoration:none;color:var(--blauw);font:500 20px/1.1 var(--kop);text-transform:uppercase;letter-spacing:.03em}
.tegels-link svg{width:30px;height:30px;flex:0 0 30px}
.tegels-link:hover{background:var(--blauw);color:#fff}

/* Gast-oproep */
.gast-cta{position:relative;overflow:hidden;background:var(--blauw);color:#fff;margin:0 auto;padding:clamp(56px,7vw,104px) var(--rand)}
.gast-cta-mark{position:absolute;right:-60px;bottom:-90px;width:min(520px,70vw);height:auto;color:#fff;opacity:.14}
.gast-cta-tekst{position:relative;max-width:var(--breed);margin:0 auto}
.gast-cta h2{color:#fff;font-size:clamp(40px,6vw,84px);line-height:.95;max-width:11em;margin-bottom:22px}
.gast-cta p{font-size:20px;max-width:30em;margin-bottom:30px}

/* Voet */
.voet{background:var(--diep);color:#DCE6F7;font-size:16px}
.voet-binnen{max-width:var(--breed);margin:0 auto;padding:64px var(--rand);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
.voet h2{color:#fff;font-size:20px;letter-spacing:.06em;margin-bottom:16px}
.voet a{color:#fff;text-decoration:none}
.voet a:hover{text-decoration:underline}
.voet-merk img{width:260px;height:auto;margin-bottom:16px}
.voet-merk p:last-child{max-width:24em}
.voet-lijst{display:flex;flex-direction:column;gap:4px}
.voet-lijst-link{display:inline-flex;align-items:center;gap:10px;min-height:36px}
.voet-lijst-link svg{width:20px;height:20px}
.voet-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.voet-links a{display:inline-block;min-height:36px;padding:6px 0}

/* Paginakop */
.pagina-kop{max-width:var(--breed);margin:0 auto;padding:clamp(32px,5vw,72px) var(--rand) 8px}
.pagina-kop h1{font-size:clamp(52px,8vw,112px);line-height:.94;margin-bottom:20px}
.pagina-kop p{font-size:20px;max-width:34em}
.seizoen+.seizoen{margin-top:56px}
.seizoen h2{font-size:28px;margin-bottom:14px}
.leeg{text-align:left;padding-bottom:96px}
.leeg-mark{width:120px;height:auto;color:var(--blauw);margin-bottom:28px}

/* Afleveringspagina */
.aflevering{max-width:var(--breed);margin:0 auto;padding:clamp(24px,4vw,56px) var(--rand) clamp(56px,6vw,88px)}
.kruimel{font-size:15px;color:var(--grijs);margin-bottom:18px}
.afl-kop h1{font-size:clamp(44px,6.8vw,96px);line-height:.95;max-width:14em;text-wrap:balance;margin-bottom:6px}
.afl-kop{padding-bottom:40px;border-bottom:3px solid var(--blauw)}
.afl-lijf{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:40px clamp(32px,5vw,80px);padding-top:44px}
.afl-tekst h2{font-size:30px;margin:0 0 16px}
.afl-tekst p{max-width:36em}
.afl-tekst .video+h2{margin-top:44px}
.video{position:relative;aspect-ratio:16/9;background:var(--inkt);border-radius:16px;overflow:hidden}
.video img{width:100%;height:100%;object-fit:cover;opacity:.75}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-knop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;background:#fff;color:var(--blauw);padding:0 24px 0 18px;min-height:56px;font:600 18px/1 var(--kop);text-transform:uppercase;letter-spacing:.05em}
.video-knop svg{width:20px;height:20px}
.video-knop:hover{background:var(--pil)}
.video-noot{position:absolute;left:0;right:0;bottom:0;margin:0;padding:10px 16px;font-size:13px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.afl-feiten dl{margin:0 0 28px;border-top:1px solid var(--lijn)}
.feit{padding:14px 0;border-bottom:1px solid var(--lijn)}
.feit dt{font:400 14px/1.3 var(--type);color:var(--grijs);margin-bottom:4px}
.feit dd{margin:0;font-weight:600}
.vvds{display:flex;gap:12px;align-items:flex-start;padding:18px;border-radius:14px;background:var(--water);color:var(--inkt);text-decoration:none;font-weight:600;line-height:1.4}
.vvds svg{width:26px;height:26px;flex:0 0 26px;color:var(--blauw)}
.vvds:hover{color:var(--blauw)}
.buren{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px}
.buur{display:block;padding:20px 22px;border:2px solid var(--blauw);border-radius:16px;text-decoration:none}
.buur span{display:block;font:400 14px/1.3 var(--type);color:var(--grijs);margin-bottom:6px}
.buur strong{font:500 22px/1.15 var(--kop);color:var(--blauw)}
.buur:hover{background:var(--water)}
.buur-oud{grid-column:2;text-align:right}
.buur-nieuw{grid-column:1}

/* Tekstpagina */
.tekstpagina{max-width:820px;margin-left:max(0px,calc((100% - var(--breed))/2));padding-top:24px}
.tekstpagina h2{font-size:34px;margin:48px 0 14px}
.tekstpagina h3{font-size:24px;font-weight:500;margin:28px 0 8px}
.tekstpagina ul{padding-left:1.2em}
.tekstpagina li{margin-bottom:.5em}

/* Gast worden */
.gast{max-width:var(--breed);margin:0 auto;padding:clamp(24px,4vw,56px) var(--rand) clamp(64px,7vw,104px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:40px clamp(32px,6vw,88px);align-items:start}
.gast-intro h1{font-size:clamp(48px,6.6vw,92px);line-height:.94;margin-bottom:24px}
.gast-intro p{font-size:19px;max-width:30em}
.stappen{list-style:none;counter-reset:stap;margin:32px 0 0;padding:0}
.stappen li{counter-increment:stap;display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--lijn);color:var(--grijs);font-weight:500}
.stappen li::before{content:counter(stap);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--lijn);font:700 15px/1 var(--type);color:var(--grijs)}
.stappen li[aria-current]{color:var(--blauw);font-weight:700}
.stappen li[aria-current]::before{border-color:var(--blauw);background:var(--blauw);color:#fff}
.stappen li.klaar::before{content:"✓";border-color:var(--blauw);color:var(--blauw)}
.formulier,.bedankt{background:var(--water);border-radius:22px;padding:clamp(24px,4vw,48px)}
.voortgang{font:400 15px/1.3 var(--type);color:var(--grijs);margin-bottom:18px;display:none}
.js .voortgang{display:block}
.stap{border:0;margin:0 0 36px;padding:0;min-width:0}
.js .stap{display:none;margin-bottom:0}
.js .stap.actief{display:block}
.stap legend{font:600 clamp(30px,3.6vw,44px)/1 var(--kop);color:var(--blauw);text-transform:uppercase;padding:0;margin-bottom:24px}
.veld{display:flex;flex-direction:column;gap:8px;font-weight:600;margin-bottom:20px}
.velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 18px}
.opt{font-weight:400;color:var(--grijs)}
.veld input,.veld textarea,.veld select{width:100%;font:400 17px/1.4 var(--tekst);color:var(--inkt);background:#fff;border:2px solid var(--lijn);border-radius:10px;padding:13px 14px;min-height:52px}
.veld textarea{resize:vertical}
.veld input:focus,.veld textarea:focus,.veld select:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px rgba(0,74,173,.2)}
.veld [aria-invalid="true"]{border-color:#B3261E}
.keuzes{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.keuze{position:relative}
.keuze input{position:absolute;opacity:0;width:1px;height:1px}
.keuze span{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:999px;border:2px solid var(--blauw);background:#fff;color:var(--blauw);font-weight:600}
.keuze input:checked+span{background:var(--blauw);color:#fff}
.keuze input:focus-visible+span{outline:3px solid var(--blauw);outline-offset:3px}
.vink{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;line-height:1.5}
.vink input{width:22px;height:22px;margin:2px 0 0;flex:0 0 22px;accent-color:var(--blauw)}
.honing{position:absolute;left:-9999px}
.fout{color:#B3261E;font-weight:600;margin:16px 0 0}
.formulier-knoppen{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px}
.formulier-knoppen .knop{margin-left:auto}
.knop-terug{border:0;background:none;color:var(--blauw);font:600 17px/1 var(--kop);text-transform:uppercase;letter-spacing:.05em;min-height:48px;padding:0 4px}
#verder{display:none}
.js #verder{display:inline-flex}
.js #verstuur{display:none}
.js .laatste #verder{display:none}
.js .laatste #verstuur{display:inline-flex}
.bedankt h2{font-size:clamp(36px,4.6vw,56px);margin-bottom:16px}
.bedankt-mark{width:110px;height:auto;color:var(--blauw);margin-bottom:24px}
.bedankt:focus{outline:none}

/* Speler onderin */
.speler{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px 18px;padding:12px var(--rand);background:#fff;border-top:3px solid var(--blauw);box-shadow:0 -8px 24px rgba(0,49,122,.12)}
.speler[hidden]{display:none}
.speler-knop{width:52px;height:52px;border-radius:50%;border:0;background:var(--blauw);color:#fff;display:grid;place-items:center}
.speler-knop svg{width:22px;height:22px}
.speler-knop .i-speel,.speler.gepauzeerd .speler-knop .i-pauze{display:none}
.speler.gepauzeerd .speler-knop .i-speel{display:block}
.speler-titel{display:block;font:500 18px/1.2 var(--kop);color:var(--blauw);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.speler-balk{display:flex;align-items:center;gap:10px;font:400 14px/1 var(--type);color:var(--grijs)}
.speler-balk input{flex:1;accent-color:var(--blauw);min-width:0;height:28px}
.speler-snel{border:2px solid var(--blauw);background:#fff;color:var(--blauw);border-radius:999px;min-width:56px;min-height:44px;font:700 15px/1 var(--type)}
.speler-sluit{border:0;background:none;color:var(--grijs);width:44px;height:44px;display:grid;place-items:center}
.speler-sluit svg{width:22px;height:22px}
body.met-speler{padding-bottom:96px}

@media (max-width:860px){
  .held,.verhaal,.afl-lijf,.gast,.voet-binnen{grid-template-columns:minmax(0,1fr)}
  .held-beeld{grid-row:1;max-width:220px;justify-self:start}
  .rij{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px}
  .rij .code{grid-column:1 / -1}
  .buren{grid-template-columns:1fr}
  .buur-oud,.buur-nieuw{grid-column:1;text-align:left}
}
@media (max-width:560px){
  body{font-size:17px}
  .kop{padding-top:16px;padding-bottom:16px}
  .kop-logo img{height:20px}
  .kop-mark{width:32px;height:34px}
  .kop-nav{gap:4px 20px;font-size:16px}
  .speler{grid-template-columns:auto minmax(0,1fr) auto;padding:10px 14px}
  .speler-snel{display:none}
  .rij .speel-klein span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rij .speel-klein{width:46px;padding:0;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  body.speelt .golf{animation:none;opacity:1}
}