/* bcn.tdgdigital.com, concept "Om acht uur is de zaal van ons." Kleuren uit het logo (blauw + vijf veren) en de zaalvloer van Watergoor. */
@font-face{font-family:"Smooch";src:url(/fonts/display.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Franklin";src:url(/fonts/tekst.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Franklin";src:url(/fonts/tekst-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
:root{--nacht:#0f1a36;--nacht2:#16244a;--blauw:#465ba4;--blauw-d:#33468b;--vloer:#3c6b45;--vloer-d:#2f573a;--lime:#a3d15f;--lime-d:#7fae3a;
--veer1:#77bcdb;--veer2:#6997ac;--veer5:#55a76b;--papier:#f3f0e7;--kalk:#fbfaf6;--inkt:#16203a;--grijs:#5d6476;--lijn:#fff;
--rand:clamp(1.1rem,4.5vw,4.5rem);--kop:4.6rem;--r:.35rem;
--fd:"Smooch","Arial Narrow",sans-serif;--ft:"Franklin",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--kop);scroll-behavior:smooth}
@media (min-width:1440px){html{font-size:clamp(100%,1.1111vw,200%)}:where(button,input,select,textarea){font-size:.8333rem}}
body{margin:0;background:var(--papier);color:var(--inkt);font-family:var(--ft);font-size:1.06rem;line-height:1.6;font-weight:400}
img,video,svg{display:block;max-width:100%}
img{height:auto}
[hidden]{display:none!important}
::selection{background:var(--lime);color:var(--nacht)}
p,li,dd,td{hyphens:auto;overflow-wrap:break-word}
h1,h2,h3{font-family:var(--fd);font-weight:850;line-height:.92;letter-spacing:-.005em;hyphens:manual;overflow-wrap:normal;text-wrap:balance;margin:0 0 .4em}
h1{font-size:clamp(3.2rem,9vw,8.2rem)}
h2{font-size:clamp(2.7rem,6.6vw,6rem)}
h3{font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:800;line-height:1}
a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
a[href^=mailto],a[href^=tel]{hyphens:none;overflow-wrap:anywhere}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:999;background:var(--kalk);padding:.5rem 1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.groot{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.5}
.klein{font-size:.92rem;color:var(--grijs)}

/* label: hun eigen naamlabel van het labelbord */
.lbl{display:inline-flex;align-items:center;gap:.55em;background:var(--kalk);color:var(--inkt);font:700 .82rem/1 var(--ft);padding:.5em .85em .5em .6em;border-radius:.22rem;
 box-shadow:0 1px 0 rgba(0,0,0,.25);margin-bottom:1.1rem;transform:rotate(-1.2deg)}
.lbl i{width:.55em;height:.55em;border-radius:50%;background:var(--nacht);box-shadow:inset 0 0 0 .12em #9aa}
.sec-papier .lbl,.sec-kalk .lbl{background:var(--nacht);color:var(--kalk)}.sec-papier .lbl i{background:var(--papier)}

/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;min-height:2.9rem;padding:.7em 1.3em;border-radius:99rem;font:700 1rem/1.1 var(--ft);text-decoration:none;
 border:2px solid transparent;cursor:pointer;transition:transform .15s,background-color .15s,color .15s;gap:.4em;flex-shrink:0}
.knop:hover{transform:translateY(-2px)}
.knop-lime{background:var(--lime);color:var(--nacht)}.knop-lime:hover{background:#b6e070}
.knop-blauw{background:var(--blauw);color:#fff}
.knop-rand{border-color:currentColor;background:transparent;color:inherit}
.knop[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.knop-tekst{background:none;border:0;color:inherit;font:700 1rem var(--ft);text-decoration:underline;text-underline-offset:.25em;cursor:pointer;padding:.6em 0;min-height:2.75rem;display:inline-flex;align-items:center}
.knop-tekst.licht{color:var(--kalk)}

/* secties */
.sec{position:relative;padding:clamp(4rem,9vw,8.5rem) var(--rand)}
.sec-nacht{background:var(--nacht);color:var(--kalk)}
.sec-vloer{background:var(--vloer);color:var(--kalk)}
.sec-blauw{background:var(--blauw);color:#fff}
.sec-papier{background:var(--papier)}
.sec-nacht a:not(.knop),.sec-vloer a:not(.knop),.sec-blauw a:not(.knop){color:inherit}
.twee{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}
@media (min-width:860px){.twee{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.leeskolom{max-width:44rem}.leeskolom-breed{max-width:none}
.prose h2{font-size:clamp(2.1rem,4vw,3.2rem)}.prose h3{margin-top:1.4em}
.prose img{width:100%;height:auto;border-radius:var(--r);margin:1.4rem 0}
.prose ul{padding-left:1.2em}.prose li{margin:.35em 0}
.prose li::marker{color:var(--lime-d)}

/* netrand: de netband met maas, sectieovergang */
.netrand{position:absolute;left:0;right:0;top:0;height:3.4rem;pointer-events:none;
 background:linear-gradient(#f4f2ea,#f4f2ea) top/100% .55rem no-repeat,
 repeating-linear-gradient(45deg,transparent 0 .62rem,rgba(255,255,255,.28) .62rem .7rem),
 repeating-linear-gradient(-45deg,transparent 0 .62rem,rgba(255,255,255,.28) .62rem .7rem);
 -webkit-mask:linear-gradient(#000 0 .55rem,rgba(0,0,0,.9) .6rem,transparent);mask:linear-gradient(#000 0 .55rem,rgba(0,0,0,.9) .6rem,transparent)}

/* kop */
.kop{position:fixed;inset:0 0 auto;z-index:50;height:var(--kop);display:flex;align-items:center;gap:1.2rem;padding:0 var(--rand);color:var(--kalk);
 transition:background-color .3s,box-shadow .3s}
.kop.vast,.body-tekst .kop,body:not(.body-home) .kop{background:rgba(15,26,54,.96);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.kop-logo{display:block;width:7.4rem;flex-shrink:0;min-height:2.75rem;display:flex;align-items:center}
.kop-logo .logo-svg{width:100%;height:auto;aspect-ratio:3140/1970}
.logo-svg .lg-tekst{transition:fill .3s}
.kop .lg-tekst,.logo-wit .lg-tekst{fill:#fff}
.kop-nav{margin-left:auto}
.kop-nav>ul{display:flex;gap:.2rem;list-style:none;margin:0;padding:0;align-items:center}
.kop-nav a,.kop-meer>button{display:flex;align-items:center;min-height:2.75rem;padding:0 .7rem;text-decoration:none;font:600 .95rem var(--ft);color:inherit;background:none;border:0;cursor:pointer;border-radius:99rem}
.kop-nav a:hover,.kop-meer>button:hover{background:rgba(255,255,255,.1)}
.kop-nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--lime);border-radius:0}
.kop-meer{position:relative}
.kop-sub{position:absolute;right:0;top:100%;background:var(--nacht);list-style:none;margin:.3rem 0 0;padding:.5rem;border-radius:.6rem;min-width:16rem;box-shadow:0 1rem 2rem rgba(0,0,0,.35);display:none}
.kop-meer.open .kop-sub{display:block}
.kop-sub a{border-radius:.4rem}
.kop-nav>ul.kop-mob-meer{display:none}
.kop-status{display:none;align-items:center;gap:.5rem;font:600 .85rem/1.2 var(--ft);margin:0;max-width:15rem;opacity:.92}
.stip{width:.6rem;height:.6rem;border-radius:50%;background:#8a93a8;flex-shrink:0}
.kop-status.speelt .stip{background:var(--lime);box-shadow:0 0 0 .25rem rgba(163,209,95,.25);animation:puls 1.6s infinite}
@keyframes puls{50%{box-shadow:0 0 0 .5rem rgba(163,209,95,0)}}
.kop-cta{min-height:2.75rem;padding:.55em 1.1em}
.menu-knop{display:none;width:3rem;height:3rem;border:0;background:rgba(255,255,255,.1);border-radius:50%;cursor:pointer;position:relative;flex-shrink:0;color:inherit}
.menu-knop span:not(.sr){position:absolute;left:.9rem;right:.9rem;height:2px;background:currentColor;transition:transform .25s}
.menu-knop span:nth-child(1){top:1.2rem}.menu-knop span:nth-child(2){top:1.7rem}
.menu-open .menu-knop span:nth-child(1){transform:translateY(.25rem) rotate(45deg)}.menu-open .menu-knop span:nth-child(2){transform:translateY(-.25rem) rotate(-45deg)}
@media (min-width:1280px){.kop-status{display:flex}}
@media (max-width:1100px){
 .menu-knop{display:block}
 .kop-nav{position:fixed;inset:var(--kop) 0 0;background:var(--nacht);padding:1.5rem var(--rand) 3rem;overflow-y:auto;transform:translateX(100%);transition:transform .3s;margin:0}
 .menu-open .kop-nav{transform:none}
 .kop-nav>ul{flex-direction:column;align-items:stretch}
 .kop-nav>ul a{font:850 2.3rem/1 var(--fd);padding:.35rem 0;min-height:3.2rem}
 .kop-meer{display:none}
 .kop-nav>ul.kop-mob-meer{display:block;list-style:none;padding:1.2rem 0 0;margin:1.2rem 0 0;border-top:1px solid rgba(255,255,255,.15);columns:2;column-gap:1rem}
 .kop-mob-meer a{font:600 1rem var(--ft);padding:.3rem 0}
 .kop-cta{margin-left:auto}
 .kop{background:rgba(15,26,54,.96)}
}
@media (max-width:560px){.kop-cta{display:none}.kop-logo{width:6.2rem}.kop-mob-meer{columns:1}}

/* opening: de shuttle uit het logo vliegt in, de veren gaan open */
.opening{position:fixed;inset:0;z-index:90;background:var(--nacht);display:grid;place-items:center;transition:opacity .55s,visibility .55s}
.opening.weg{opacity:0;visibility:hidden}
.opening .logo-svg{width:min(70vw,34rem);height:auto;aspect-ratio:3140/1970;overflow:visible}
.opening .lg-tekst{fill:#fff}
.opening-sla{position:absolute;bottom:1.5rem;right:1.5rem;color:rgba(255,255,255,.6);background:none;border:0;font:600 .9rem var(--ft);min-height:2.75rem;padding:0 .8rem;cursor:pointer}

/* hero */
.hero{position:relative;background:var(--nacht);color:var(--kalk);min-height:min(100svh,62rem);display:flex;align-items:flex-end;overflow:hidden}
.hero-beeld{position:absolute;inset:0}
.hero-beeld img,.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero-film{opacity:0;transition:opacity .6s}.hero-film.speelt{opacity:1}
.hero-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,26,54,.85),rgba(15,26,54,.35) 45%,rgba(15,26,54,0) 70%),linear-gradient(0deg,rgba(15,26,54,.9),rgba(15,26,54,0) 45%);pointer-events:none}
.hero-tekst{position:relative;padding:calc(var(--kop) + 2rem) var(--rand) clamp(2.5rem,6vw,5rem);max-width:min(54rem,100%)}
.hero h1{font-size:clamp(3.4rem,8.6vw,8.6rem);margin-bottom:.25em}
.hero-sub{font-size:clamp(1.1rem,1.5vw,1.35rem);max-width:36rem;margin:0 0 1.6rem}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}
.hero-agenda{margin:1.4rem 0 0;font-weight:600}
.hero-agenda a{color:var(--lime)}
.hero-klok{position:absolute;right:var(--rand);top:calc(var(--kop) + 1.4rem);z-index:2;text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.hk-tijd{font:800 clamp(3rem,6.5vw,6.4rem)/1 var(--fd);font-variant-numeric:tabular-nums;color:#ff5a46;text-shadow:0 0 1.2rem rgba(255,70,50,.45);letter-spacing:.02em}
.hero-klok.nul .hk-tijd{color:var(--lime);text-shadow:0 0 1.4rem rgba(163,209,95,.6)}
.hk-onder{font:600 .95rem var(--ft);opacity:.85;max-width:16rem}
.hero-opnieuw{position:absolute;right:var(--rand);bottom:1.4rem;z-index:3;background:rgba(15,26,54,.6);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:99rem;min-height:2.75rem;padding:0 1.1rem;font:600 .9rem var(--ft);cursor:pointer}
.zoem{animation:zoem .5s}
@keyframes zoem{0%,100%{filter:none}30%{filter:brightness(1.25)}}
@media (max-width:760px),(max-width:1100px) and (orientation:portrait){
 .hero{display:block;min-height:0}
 .hero-beeld{position:relative;height:min(58svh,62vw + 6rem);min-height:15rem}
 .hero-beeld::after{background:linear-gradient(0deg,var(--nacht),rgba(15,26,54,0) 40%),linear-gradient(180deg,rgba(15,26,54,.6),rgba(15,26,54,0) 30%)}
 .hero-beeld img,.hero-film{object-position:58% 50%}
 .hero-tekst{padding:0 var(--rand) 3rem;margin-top:-2.5rem}
 .hero-klok{top:calc(var(--kop) + .6rem)}
 .hk-onder{font-size:.8rem}
 .hero-opnieuw{bottom:auto;top:calc(var(--kop) + 5.5rem)}
}
@media (orientation:landscape) and (max-height:520px){
 .hero{min-height:100svh}.hero h1{font-size:min(12vw,19svh)}.hero-sub{display:none}.hero-tekst{padding-bottom:1.2rem}.hk-tijd{font-size:12svh}
}

/* labelbord */
.bord-sec{padding-top:clamp(5rem,10vw,9rem)}
.bord-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,4rem)}
@media (min-width:1100px){.bord-in{grid-template-columns:minmax(0,26rem) minmax(0,1fr);align-items:start}}
.bord-tekst p{max-width:36rem}
.mijnlabel{margin:1.8rem 0 1rem}
.mijnlabel label{display:block;font-weight:700;margin-bottom:.5rem}
.ml-rij{display:flex;gap:.5rem;flex-wrap:wrap}
.ml-rij input{flex:1 1 10rem;min-width:0;min-height:2.9rem;border-radius:.3rem;border:0;padding:0 1rem;font:700 1.1rem var(--ft);background:var(--kalk);color:var(--inkt)}
.bord-uitleg{min-height:4.5rem;border-left:3px solid var(--lime);padding-left:1rem}
.bord-uitleg p{margin:.2rem 0}
.bord-uitleg b{color:var(--lime)}
.bord-knoppen{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:1rem}
.bord{background:#e9e7df;color:var(--inkt);border-radius:.5rem;padding:clamp(.8rem,1.6vw,1.4rem);box-shadow:inset 0 0 0 .4rem #c9ccd1,0 2rem 3rem rgba(0,0,0,.35);position:relative}
.speelklok{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"l b" "t r";column-gap:1rem;align-items:center;background:#11151f;color:#ff5a46;border-radius:.35rem;padding:.6rem 1rem;margin-bottom:.9rem}
.sk-label{grid-area:l;font:700 .75rem var(--ft);color:#9aa1b3}
.sk-tijd{grid-area:t;font:800 2.6rem/1 var(--fd);font-variant-numeric:tabular-nums;text-shadow:0 0 .8rem rgba(255,70,50,.4)}
.sk-rest{grid-area:r;font:600 .95rem var(--ft);color:#e5e7ee}
.sk-balk{grid-area:b;height:.3rem;background:#2a3040;border-radius:1rem;overflow:hidden}
.sk-balk i{display:block;height:100%;width:0;background:#ff5a46;transition:width .4s linear}
.speelklok.zoemt{animation:zoemklok .9s}
@keyframes zoemklok{0%,40%,80%{background:#ff5a46;color:#fff}20%,60%,100%{background:#11151f}}
.bord-raster{display:grid;gap:.3rem;grid-template-columns:2.6rem repeat(var(--kol,6),minmax(0,1fr));font-size:.8rem}
.br-kop{font:800 1.15rem/1 var(--fd);text-align:center;padding:.3rem 0;color:var(--grijs)}
.br-kop.nu{color:var(--inkt);box-shadow:inset 0 -3px 0 #ff5a46}
.br-baan{font:850 1.5rem/1 var(--fd);display:grid;place-items:center;color:var(--blauw)}
.br-baan.comp{color:var(--vloer)}
.br-scheid{grid-column:1/-1;font:700 .72rem var(--ft);color:var(--grijs);padding:.35rem 0 .1rem;border-top:1px dashed #b8bac0}
.br-vak{display:grid;grid-template-columns:1fr 1fr;gap:.18rem;padding:.22rem;border-radius:.25rem;background:rgba(255,255,255,.55);min-height:2.9rem;transition:background-color .2s}
.br-vak.nu{background:#fff;box-shadow:0 0 0 1px #d8d8d8}
.br-vak.voorbij{opacity:.35}
.br-vak.kan{outline:2px dashed var(--lime-d);outline-offset:-2px;cursor:pointer}
.br-vak.mijn{background:#f3fbe7}
.lab{display:block;min-height:1.2rem;border-radius:.15rem;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.18);font:700 .72rem/1.2rem var(--ft);padding:0 .3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--inkt)}
.lab.leeg{background:transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.lab.ik{background:var(--lime);color:var(--nacht);animation:hang .5s cubic-bezier(.3,1.6,.5,1)}
.lab.nieuw{animation:hang .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes hang{0%{transform:translateY(-.8rem) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
.bord-noot{font-size:.82rem;color:var(--grijs);margin:.8rem 0 0}
@media (max-width:700px){.bord-raster{grid-template-columns:2rem repeat(var(--kol,2),minmax(0,1fr))}.br-vak{min-height:2.7rem}.lab{font-size:.78rem}.sk-tijd{font-size:2.1rem}}

/* slag */
.slag-sec{overflow:hidden;background:radial-gradient(120% 80% at 70% 60%,#467a4e,var(--vloer) 60%,var(--vloer-d))}
.slag-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem)}
@media (min-width:1100px){.slag-in{grid-template-columns:minmax(0,24rem) minmax(0,1fr);align-items:center}}
.slag-knoppen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.knop-slag{min-height:2.9rem;min-width:5.2rem;padding:0 1.1rem;border-radius:99rem;border:2px solid rgba(255,255,255,.7);background:transparent;color:#fff;font:850 1.35rem/1 var(--fd);cursor:pointer;letter-spacing:.02em}
.knop-slag[aria-pressed=true]{background:#fff;color:var(--vloer-d)}
.slag-veld{margin:0}
.slag-svg{width:100%;height:auto;aspect-ratio:16/10;touch-action:pan-y;cursor:crosshair;overflow:visible}
.sv-vloer line{stroke:#fff;stroke-width:.05}
.sv-lijnen line{stroke:#fff;stroke-width:.05}
.sv-paal{fill:#d8dbe0}.sv-band{fill:#fff}
.sv-maat text{fill:rgba(255,255,255,.75);font:600 .28px var(--ft)}
.sv-spoor{fill:none;stroke:var(--lime);stroke-width:.06;stroke-dasharray:.02 .14;stroke-linecap:round}
.sv-spoor-oud{fill:none;stroke:rgba(255,255,255,.28);stroke-width:.04;stroke-dasharray:.02 .14;stroke-linecap:round}
.sv-richt{stroke:#fff;stroke-width:.04;stroke-dasharray:.15 .1;opacity:.8}
.sv-veren{fill:#fff}.sv-dop{fill:var(--lime)}
.sv-greep{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.6);stroke-width:.03;stroke-dasharray:.1 .08;cursor:grab}
.slag-uitslag{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem 1.5rem;margin-top:1.4rem}
.slag-uitslag b{display:block;font:850 clamp(2.4rem,5vw,4.6rem)/.9 var(--fd);font-variant-numeric:tabular-nums}
.slag-uitslag small{font-size:.9rem;opacity:.85}
.u-oordeel{grid-column:1/-1;font-weight:700;font-size:1.1rem;color:var(--lime)}
.slag-meer{margin:2rem 0 0}

/* junioren */
.jeugd-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:center}
@media (min-width:900px){.jeugd-in{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.jeugd-film{position:relative;border-radius:var(--r);overflow:hidden;background:var(--nacht)}
.jeugd-film::before{content:"";display:block;padding-top:75%}
.jeugd-film img,.jeugd-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jeugd-film video{opacity:0;transition:opacity .6s}.jeugd-film video.speelt{opacity:1}
.jeugd-feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:1rem;margin:1.6rem 0;padding:1.2rem 0;border-top:2px solid var(--inkt);border-bottom:1px solid rgba(0,0,0,.15)}
.jeugd-feiten dt{font-size:.85rem;color:var(--grijs)}.jeugd-feiten dd{margin:0;font-weight:700}

/* kosten */
.kosten-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,4rem)}
@media (min-width:960px){.kosten-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}}
.reken{background:var(--nacht);border-radius:.6rem;padding:clamp(1.2rem,2.5vw,2.2rem)}
.reken-rijen{display:grid;gap:.6rem}
.rr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.4rem 1rem;align-items:center;padding:.8rem 1rem;background:rgba(255,255,255,.06);border-radius:.4rem}
.rr-naam{font:850 1.6rem/1 var(--fd)}
.rr-bedrag{font:800 1.5rem/1 var(--fd);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.rr-weg{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;cursor:pointer;font-size:1.2rem}
.rr-opties{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-size:.92rem}
.rr-opties label,.reken-gezin{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;cursor:pointer}
.rr-opties input,.reken-gezin input{width:1.25rem;height:1.25rem;accent-color:var(--lime)}
.rr-noot{grid-column:1/-1;font-size:.85rem;color:var(--lime)}
.reken-toevoegen{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 .2rem}
.reken-totaal{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid rgba(255,255,255,.3);padding-top:1rem;margin:1rem 0 .3rem}
.reken-totaal b{font:850 clamp(3rem,6vw,4.6rem)/1 var(--fd);color:var(--lime);font-variant-numeric:tabular-nums}
.reken-noot{font-size:.85rem;opacity:.75}

/* na de zoemer */
.zoemer-kop{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:center}
@media (min-width:900px){.zoemer-kop{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.zoemer-beeld{border-radius:var(--r);overflow:hidden}
.zoemer-beeld img{width:100%;aspect-ratio:3/2;object-fit:cover}
.clubjaar{margin-top:clamp(3rem,6vw,6rem)}
.clubjaar h3{font-size:clamp(2rem,3.4vw,3rem)}
.cj{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:0;border-top:1px solid rgba(255,255,255,.2)}
.cj li{padding:1.1rem 1.2rem 1.2rem 0;border-bottom:1px solid rgba(255,255,255,.2);display:grid;gap:.15rem}
.cj-maand{font:850 1.05rem var(--fd);color:var(--lime);letter-spacing:.04em}
.cj b{font:800 1.45rem/1.05 var(--fd)}
.cj li span:last-child{font-size:.92rem;opacity:.8}
.fotowand{margin-top:clamp(3rem,6vw,5rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(8rem,16vw,15rem);grid-auto-flow:dense;gap:.5rem;max-height:clamp(26rem,52vw,48rem);overflow:hidden;
 -webkit-mask:linear-gradient(#000 70%,transparent);mask:linear-gradient(#000 70%,transparent)}
.fotowand.open{max-height:none;-webkit-mask:none;mask:none}
.fotowand button{padding:0;border:0;background:#222;border-radius:.25rem;overflow:hidden;cursor:zoom-in}
.fotowand img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.fotowand button:hover img{transform:scale(1.04)}
.fw-l{grid-column:span 2}.fw-p{grid-row:span 2}.fw-s{}
@media (max-width:700px){.fotowand{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:9rem}.fw-l{grid-column:span 2}}
.fotowand-meer{text-align:center;margin:1rem 0 0}
.lichtbak{border:0;padding:0;background:rgba(10,14,28,.95);width:100vw;height:100dvh;max-width:none;max-height:none;margin:0}
.lichtbak::backdrop{background:rgba(0,0,0,.7)}
.lichtbak figure{margin:0;height:100%;display:grid;place-items:center;padding:3.5rem 4rem}
.lichtbak img{max-height:calc(100dvh - 7rem);width:auto;max-width:100%;object-fit:contain}
.lb-dicht,.lb-vorige,.lb-volgende{position:absolute;z-index:2;width:3rem;height:3rem;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.8rem;cursor:pointer}
.lb-dicht{top:1rem;right:1rem}.lb-vorige{left:.6rem;top:50%}.lb-volgende{right:.6rem;top:50%}

/* nieuws */
.nieuws-top{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:.5rem 2rem;margin-bottom:2rem}
.nieuws-top .lbl{grid-column:1/-1;justify-self:start;margin:0}
.nieuws-top h2{margin:0}
.nieuws-lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:2.2rem 1.6rem}
.nk{display:grid;gap:.35rem;text-decoration:none}
.nk-beeld{display:block;position:relative;border-radius:var(--r);overflow:hidden;background:var(--nacht);margin-bottom:.5rem}
.nk-beeld::before{content:"";display:block;padding-top:66%}
.nk-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.nk:hover .nk-beeld img{transform:scale(1.04)}
.nk-leeg{position:absolute;inset:0;background:url(/favicon.svg) center/38% no-repeat,var(--nacht)}
.nk time{font-size:.85rem;color:var(--grijs)}
.nk b{font:800 1.55rem/1.02 var(--fd)}
.nk:hover b{text-decoration:underline;text-underline-offset:.12em}
.nk-sam{font-size:.95rem;color:var(--grijs);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nj+.nj{margin-top:4rem}.nj h2{font-size:clamp(2.2rem,4vw,3.4rem)}

/* bezoek */
.bezoek-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:center}
@media (min-width:900px){.bezoek-in{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.bezoek-tijden{list-style:none;margin:0;padding:0;border-top:2px solid #fff}
.bezoek-tijden li{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.1rem 1rem;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.3)}
.bezoek-tijden b{font:850 1.6rem/1 var(--fd);grid-row:span 2}
.bz-tijd{font-weight:700}
.bezoek-tijden li.vandaag b{color:var(--lime)}
.bezoek-tijden li.vandaag::after{content:"vandaag";grid-column:2;font-size:.8rem;font-weight:700;color:var(--lime)}

/* pagina-kop */
.pagkop{background:var(--nacht);color:var(--kalk);padding:calc(var(--kop) + clamp(3rem,7vw,6rem)) var(--rand) clamp(3rem,6vw,5rem);position:relative}
.pk-in{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:end}
.pagkop-beeld .pk-in{align-items:center}
@media (min-width:900px){.pagkop-beeld .pk-in{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}}
.pagkop h1{font-size:clamp(3rem,7.4vw,7rem)}
.pagkop .groot{max-width:40rem}
.pk-beeld{border-radius:var(--r);overflow:hidden}.pk-beeld img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pagkop+.sec::before{content:"";position:absolute;left:0;right:0;top:0;height:2.6rem;pointer-events:none;
 background:linear-gradient(var(--nacht),var(--nacht)) top/100% .45rem no-repeat}
.bericht-datum{color:var(--lime);font-weight:700;margin:0}
.bericht-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:2px solid var(--inkt)}
.bericht-nav a{text-decoration:none;font:800 1.3rem/1.05 var(--fd);display:grid;gap:.2rem;min-height:2.75rem}
.bericht-nav small{font:600 .8rem var(--ft);color:var(--grijs)}
.nv-alle{align-self:center;text-decoration:underline!important}
table{border-collapse:collapse;width:100%}
.tarief th,.tarief td,.tijden th,.tijden td{text-align:left;padding:.75rem .6rem .75rem 0;border-bottom:1px solid rgba(0,0,0,.15);vertical-align:top}
.tarief td{text-align:right;font-weight:700;white-space:nowrap}
.tijden th{font:850 1.5rem/1 var(--fd);width:9rem}.tijden .tt{font-weight:700;white-space:nowrap;width:9rem}
@media (max-width:640px){.tijden tr{display:grid;grid-template-columns:1fr auto;padding:.6rem 0;border-bottom:1px solid rgba(0,0,0,.15)}.tijden th,.tijden td{border:0;padding:.2rem 0;width:auto}.tijden td:last-child{grid-column:1/-1}}
.velden{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;counter-reset:v}
.velden li{aspect-ratio:6.1/13.4;max-height:14rem;border:2px solid #fff;border-radius:.15rem;position:relative;display:grid;place-items:center;background:linear-gradient(#fff,#fff) center/100% 2px no-repeat}
.velden li b{font:850 2.4rem/1 var(--fd);background:var(--vloer);padding:0 .4rem}
.velden li.comp{background-color:rgba(0,0,0,.16)}
.namen .namenlijst{list-style:none;margin:0;padding:0}
.namenlijst li{display:grid;gap:.1rem;padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.18)}
.sec-papier .namenlijst li{border-color:rgba(0,0,0,.15)}
.namenlijst b{font:800 1.45rem/1.05 var(--fd)}
.namenlijst span{font-size:.95rem;opacity:.85}
.teams{list-style:none;padding:0;margin:0}
.namen-noot{margin-top:2.5rem}
.veldplan svg{width:100%;max-width:22rem;height:auto;aspect-ratio:7/14.2;margin:1rem 0}
.vp-l rect,.vp-l line{fill:none;stroke:var(--inkt);stroke-width:.04}
.vp-net{stroke:var(--blauw);stroke-width:.08;stroke-dasharray:.1 .06}
.vp-vlak{fill:var(--lime);opacity:.55;transition:all .4s}
.vp-knoppen{display:flex;flex-wrap:wrap;gap:.4rem}
.vp-knoppen button{min-height:2.75rem;padding:0 1rem;border-radius:99rem;border:2px solid var(--inkt);background:transparent;font:700 .9rem var(--ft);cursor:pointer}
.vp-knoppen button[aria-pressed=true]{background:var(--inkt);color:#fff}

/* voet */
.voet{background:var(--nacht);color:var(--kalk);position:relative;padding:clamp(4rem,8vw,7rem) var(--rand) 2rem;font-size:.95rem}
.voet-net{position:absolute;inset:0 0 auto;height:.45rem;background:#f4f2ea}
.voet-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:2.5rem}
.voet h2{font-size:1.6rem;margin-bottom:.7rem}
.voet-logo .logo-svg{width:11rem;height:auto;aspect-ratio:3140/1970;margin-bottom:1rem}
.voet ul{list-style:none;margin:0;padding:0}
.voet-tijden li{margin-bottom:.7rem}.voet-tijden span{opacity:.75}
.voet-links a{display:inline-flex;min-height:2.2rem;align-items:center;text-decoration:none}
.voet-links a:hover{text-decoration:underline}
.voet-onder{display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin:3rem 0 0;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.15);opacity:.75;font-size:.85rem}

/* inloop */
.rv{opacity:0;transform:translateY(1.6rem);transition:opacity .8s,transform .8s}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}
.sec-blauw .klein,.sec-nacht .klein,.sec-vloer .klein{color:rgba(255,255,255,.82)}
@media (max-width:700px){.sv-maat text{font-size:.5px}.nieuws-sec .nieuws-lijst li:nth-child(n+4){display:none}}
@media (max-width:480px){.tarief tr{display:grid;grid-template-columns:1fr;border-bottom:1px solid rgba(0,0,0,.15);padding:.5rem 0}.tarief th,.tarief td{border:0;padding:.1rem 0;text-align:left}.tarief td{white-space:normal}}
.jeugd-feiten a{display:inline-flex;align-items:center;min-height:2.75rem}