/* Team Krimpenerwaard — site.css (2027) */
@font-face{font-family:"Francois One";src:url(../fonts/francois-one-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
 --groen:#94c120; --groen-licht:#eef7d9; --groen-donker:#5d7a12;
 --ink:#131313; --grijs:#5b5b57; --lijn:#e3e3de; --wit:#fff; --zand:#f1f3ea;
 --maxw:1200px; --edge:30px;
 --kop:"Francois One",Impact,"Arial Narrow",sans-serif;
 --tekst:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
@media(max-width:600px){:root{--edge:20px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font-family:var(--tekst);font-size:18px;line-height:1.6;color:var(--ink);background:var(--wit)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--kop);font-weight:400;line-height:1.1;margin:0 0 .5em;letter-spacing:.01em}
p{margin:0 0 1em}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:10px;background:var(--ink);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:10px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.wrap{width:calc(100% - 2*var(--edge));max-width:var(--maxw);margin-inline:auto}
.label{font-family:var(--tekst);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin:0 0 10px;color:var(--groen-donker)}
.sectiekop{font-size:clamp(34px,4vw,48px);margin-bottom:40px}

/* knoppen */
.knoppen{display:flex;flex-wrap:wrap;gap:15px;margin-top:30px}
.knop{display:inline-flex;align-items:center;min-height:48px;padding:10px 26px;font-family:var(--kop);font-size:20px;text-decoration:none;
 background:var(--ink);color:#fff;border:2px solid var(--ink);border-radius:100px;transition:background .2s,color .2s}
.knop:hover{background:var(--groen);color:var(--ink)}
.knop-licht{background:transparent;color:var(--ink)}
.knop-licht:hover{background:var(--ink);color:#fff}
.knop-donker{background:var(--ink);color:#fff}
.knop-donker:hover{background:#fff;color:var(--ink);border-color:#fff}

/* kop */
.kop{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--lijn)}
.kop-in{display:flex;align-items:center;justify-content:space-between;height:80px}
.kop-logo img{height:52px;width:auto}
.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:40px}
.menu a{font-family:var(--kop);font-size:20px;text-decoration:none;text-transform:uppercase;letter-spacing:.03em;padding:6px 0;border-bottom:3px solid transparent}
.menu a:hover,.menu a[aria-current]{border-bottom-color:var(--groen)}
.menuknop{display:none;width:48px;height:48px;border:0;background:none;padding:12px;cursor:pointer;position:relative}
.menuknop span:first-child,.menuknop span:first-child::before,.menuknop span:first-child::after{content:"";display:block;position:absolute;left:12px;right:12px;height:3px;background:var(--ink);transition:transform .2s}
.menuknop span:first-child{top:22px}
.menuknop span:first-child::before{left:0;right:0;top:-8px}
.menuknop span:first-child::after{left:0;right:0;top:8px}
.menuknop[aria-expanded=true] span:first-child{background:transparent}
.menuknop[aria-expanded=true] span:first-child::before{transform:translateY(8px) rotate(45deg)}
.menuknop[aria-expanded=true] span:first-child::after{transform:translateY(-8px) rotate(-45deg)}
@media(max-width:760px){
 .kop-in{height:68px}
 .kop-logo img{height:42px}
 .menuknop{display:block}
 .menu{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--lijn);display:none}
 .menu.open{display:block}
 .menu ul{flex-direction:column;gap:0;padding:10px var(--edge) 20px}
 .menu a{display:block;padding:12px 0;border-bottom:1px solid var(--lijn)}
}

/* held */
.held{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100vh - 80px);background:var(--groen)}
.held-tekst{display:flex;justify-content:flex-end;padding:80px 60px 80px var(--edge)}
.held-in{max-width:560px}
.held h1{font-size:clamp(40px,4.6vw,68px);text-transform:uppercase;margin-bottom:10px}
.held-sub{font-family:var(--kop);font-size:clamp(22px,2.2vw,28px);margin-bottom:30px}
.held-tekst p:not(.label):not(.held-sub):not(.knoppen){font-size:17px}
.held .label{color:var(--ink)}
.held-beeld{position:relative}
.held-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(min-width:1400px){.held-tekst{padding-left:calc((100vw - var(--maxw))/2)}}
@media(max-width:900px){
 .held{grid-template-columns:minmax(0,1fr);min-height:0}
 .held-beeld{order:-1;height:42vw;min-height:220px}
 .held-tekst{padding:50px var(--edge) 60px;justify-content:flex-start}
 .held-in{max-width:none}
}

/* actueel */
.actueel{padding:100px 0;background:var(--zand)}
.act{display:grid;grid-template-columns:5fr 7fr;gap:60px;align-items:start;background:#fff;border:1px solid var(--lijn);padding:40px}
.act + .act{margin-top:30px}
.act-beeld{margin:0}
.act-beeld img{width:100%;border:1px solid var(--lijn);transition:transform .3s}
.act-beeld a:hover img{transform:scale(1.015)}
.act h3{font-size:clamp(30px,3.2vw,42px)}
.act-intro{font-size:20px;font-weight:600}
.act h4{font-size:24px;margin:30px 0 10px}
.act-lijst{list-style:none;margin:0 0 10px;padding:0;border-top:1px solid var(--lijn)}
.act-lijst li{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--lijn);font-size:17px}
.act-lijst a{font-weight:600;white-space:nowrap;text-decoration:none;font-variant-numeric:tabular-nums}
.act-lijst a:hover{color:var(--groen-donker);text-decoration:underline}
.act .knoppen,.act p:last-child{margin-bottom:0}
@media(max-width:900px){.act{grid-template-columns:1fr;gap:30px;padding:25px}.act-beeld{max-width:420px}}
@media(max-width:480px){.act-lijst li{flex-direction:column;gap:0}}

/* sponsorband (carrousel) */
.sponsorband{padding:100px 0 90px;overflow:hidden}
.sb-kop{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;margin-bottom:40px}
.sb-kop h2{font-size:clamp(34px,4vw,48px);margin:0}
.marquee{--duur:200s;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-rij{list-style:none;margin:0;padding:0;display:flex;width:max-content;animation:loop var(--duur) linear infinite}
.marquee:hover .marquee-rij{animation-play-state:paused}
.marquee-rij li{flex:0 0 auto;width:220px;height:110px;margin:0 10px;display:flex;align-items:center;justify-content:center}
.marquee-rij img{width:220px;height:110px}
@keyframes loop{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
 .marquee{-webkit-mask-image:none;mask-image:none}
 .marquee-rij{animation:none;width:auto;flex-wrap:wrap;justify-content:center;max-width:var(--maxw);margin-inline:auto}
 .marquee-rij li[aria-hidden]{display:none}
}
@media(max-width:600px){.marquee-rij li,.marquee-rij img{width:160px;height:80px}}

/* tegels (sponsorpagina) */
.paginakop{background:var(--groen);padding:80px 0 70px}
.paginakop h1{font-size:clamp(40px,4.6vw,68px);text-transform:uppercase;margin-bottom:15px}
.paginakop .label{color:var(--ink)}
.paginakop-tekst{font-size:20px;max-width:640px;margin:0}
.sponsorsectie{padding:90px 0}
.sponsorsectie-alt{background:var(--zand);border-block:1px solid var(--lijn)}
.raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.raster-hoofd{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.tegel > a,.tegel > span{display:flex;align-items:center;justify-content:center;aspect-ratio:2/1;background:#fff;border:1px solid var(--lijn);text-decoration:none;transition:border-color .2s,transform .2s}
.tegel > a:hover{border-color:var(--groen);transform:translateY(-3px)}
.tegel img{width:100%;height:100%;object-fit:contain}
.tegel-tekst{font-family:var(--kop);font-size:22px;text-align:center;padding:0 15px;line-height:1.15}
.marquee-rij .tegel-tekst{font-size:20px}
@media(max-width:600px){.raster{grid-template-columns:repeat(2,1fr);gap:12px}.raster-hoofd{grid-template-columns:1fr}.sponsorsectie{padding:60px 0}}

/* cta */
.cta{background:var(--groen);padding:80px 0}
.cta-in{display:grid;grid-template-columns:7fr 5fr;gap:60px;align-items:center}
.cta h2{font-size:clamp(34px,4vw,48px)}
.cta p{margin:0}
.cta .knoppen{justify-content:flex-end;margin:0}
@media(max-width:900px){.cta-in{grid-template-columns:1fr;gap:30px}.cta .knoppen{justify-content:flex-start}}

/* voet */
.voet{background:var(--ink);color:#fff;padding:60px 0 30px;font-size:16px}
.voet-in{display:grid;grid-template-columns:1fr auto;gap:50px;align-items:center}
.voet-tekst p{margin:0 0 4px}
.voet-titel{font-family:var(--kop);font-size:24px}
.voet a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.voet a:hover{border-bottom-color:var(--groen);color:var(--groen)}
.voet-social{list-style:none;margin:0;padding:0;display:flex;gap:25px;font-family:var(--kop);font-size:20px}
.voet-copy{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);font-size:14px;color:#b9b9b4}
@media(max-width:900px){.voet-in{grid-template-columns:1fr;gap:25px}}