*{box-sizing:border-box}html{background:#101D38}body{margin:0;background:#101D38;color:white;font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}.page{max-width:900px;margin:auto;padding:34px 12px 32px}header{margin-bottom:34px;text-align:center}.brand{font-weight:900;font-size:clamp(26px,7.3vw,54px);letter-spacing:-1.3px;line-height:1.05;white-space:nowrap}.brand span,.tagline{color:#FFD23F}.tagline{font-weight:700;letter-spacing:1.6px;font-size:13px;margin-top:4px}.overline{font-size:10px;letter-spacing:.9px;color:#8292AB}.progress{margin-bottom:24px}.progress-row{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin:5px 0 12px;font-size:clamp(14px,3.5vw,22px)}.progress-row strong{font-weight:800}.progress-row strong{color:#FFD23F}.progress-count{text-align:right}.progress-count>.overline{display:block}.progress-count>div{white-space:nowrap}.muted{color:#8292AB}.track{height:4px;background:#243554;border-radius:8px;overflow:hidden}.track>div{height:100%;background:#FFD23F;width:0}.countdown{text-align:center;color:#FFD23F;font-size:12px;margin:10px 0 0}.grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}.tile{min-width:0;height:31px;background:#243554;color:#fff;border:0;border-radius:5px;font-size:clamp(10px,2.5vw,13px);font-weight:600;cursor:pointer}.tile.selected{background:#FFD23F;color:#101D38}.tile.paid{background:#2EAD79;color:#101D38;cursor:default}.tile:focus-visible,.yellow-btn:focus-visible{outline:2px solid white;outline-offset:2px}.selection{margin-top:14px;background:#243554;border-radius:5px;padding:5px 5px 5px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}.selection[hidden],.notice[hidden],.countdown[hidden],[hidden]{display:none!important}.selection>div{display:flex;flex-direction:column}.selection strong{color:#FFFFFF;font-size:23px}#selection .yellow-btn{border-radius:4px;padding:13px 15px;font-size:14px}.yellow-btn{background:#FFD23F;color:#101D38;border:0;border-radius:24px;padding:12px 19px;font-size:14px;font-weight:800;cursor:pointer}.notice{text-align:center;color:#8292AB;font-size:12px;margin-top:12px}.supporters{text-align:center;margin-top:52px}.supporters h2{color:#FFD23F;font-size:13px;letter-spacing:1.2px;margin:0 0 13px}.supporters p{font-size:13px;line-height:1.9;margin:0;color:#fff}.supporters p.empty{color:#8292AB}footer{text-align:center;color:#8292AB;font-size:10px;margin-top:48px}.subpage{position:relative;max-width:470px;margin:30px auto;min-height:65vh}.subpage h1{font-size:28px;margin:0 0 25px}.close{position:absolute;right:0;top:0;background:none;border:0;color:white;font-size:32px;cursor:pointer}.formAmount{display:flex;justify-content:center;align-items:baseline;gap:14px;margin:35px 0}.formAmount span{font-size:11px;color:#8292AB;letter-spacing:1px}.formAmount strong{font-size:26px;color:#FFD23F}form{display:flex;flex-direction:column;gap:9px}form>label:not(.check){font-size:12px;color:#cad3e2}form>input{background:#172846;color:white;border:1px solid #34445f;border-radius:7px;padding:13px;font-size:16px;margin-bottom:9px}.check{display:flex;align-items:center;gap:9px;font-size:13px;margin:8px 0 0}.check input{accent-color:#FFD23F;width:17px;height:17px}.helper,.subtle{color:#8292AB;font-size:12px;line-height:1.7}.wide{width:100%;margin-top:15px}.demo-note{margin-top:24px}.centered{text-align:center;padding-top:90px}.symbol{font-size:45px;color:#FFD23F;margin-bottom:14px}.centered .yellow-btn{margin-top:20px}.text-btn{display:block;margin:18px auto;background:none;border:0;color:#FFD23F;cursor:pointer;font-size:13px}.checkoutSum{color:#FFD23F;font-size:32px;font-weight:800}@media(min-width:650px){.page{padding:60px 30px}.tile{height:31px}.progress{margin-bottom:32px}.supporters{margin-top:62px}}@media(max-width:360px){.page{padding-left:10px;padding-right:10px}.brand{letter-spacing:-1.6px}.selection{padding:10px}.yellow-btn{padding:11px 13px}}
/* Alleen de originele header als achtergrondbanner; overige V4-styling ongewijzigd. */
#home > header{position:relative;isolation:isolate;min-height:165px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 0 24px;overflow:hidden;border-radius:6px}
#home > header::before{content:"";position:absolute;inset:0;z-index:-2;background-image:url("teamfoto-origineel.jpeg");background-position:center 47%;background-size:cover;background-repeat:no-repeat}
#home > header::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 65% 65% at 50% 34%,rgba(16,29,56,.78),rgba(16,29,56,.40) 75%,rgba(16,29,56,.24)),linear-gradient(180deg,rgba(16,29,56,.10) 0%,rgba(16,29,56,.12) 66%,rgba(16,29,56,.88) 100%)}
@media(min-width:650px){#home > header{min-height:235px;margin-bottom:30px}}

/* V4 approved refinements: compact title, centered supporters, accessible mobile layout */
#home > header{border-radius:0}#home > header .brand{position:relative}#home > header .tagline{position:relative}.supporters,#names{text-align:center}.selection .overline{color:#AAB7CD}@media(max-width:360px){#selection .yellow-btn{font-size:12px;padding:12px 9px}}


/* V4 — vastgelegde finetuning, 29 oktober 2026 */
.page{max-width:900px;padding:0 8px 32px}
#home > header.hero, #home > header{height:clamp(205px,36svh,365px);min-height:205px;max-height:none;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding-top:13px;margin:0;border-radius:0;overflow:hidden;isolation:isolate}
#home > header::before{background-image:url("teamfoto-origineel.jpeg");background-repeat:no-repeat;background-size:cover;background-position:center 19%;inset:0}
#home > header::after{inset:0;background:linear-gradient(180deg,rgba(16,29,56,.68) 0%,rgba(16,29,56,.24) 25%,rgba(16,29,56,.09) 45%,rgba(16,29,56,.30) 69%,rgba(16,29,56,.84) 87%,#101D38 100%)}
#home > header .brand{font-size:clamp(26px,7.5vw,57px);font-weight:900;letter-spacing:-1.25px;white-space:nowrap;line-height:1.04;text-shadow:0 2px 12px rgba(16,29,56,.7)}
#home > header .brand b{color:#fff;font-weight:900}
#home > header .tagline{color:#FFD23F;letter-spacing:2.1px;font-size:clamp(12px,3vw,17px);margin-top:4px;text-shadow:0 2px 10px #101D38}
.progress{margin:-8px 0 15px;padding:0 4px;position:relative;z-index:2}
.progress>.overline{margin:0 0 2px}
.progress-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 10px}
.progress-row>div:first-child{white-space:nowrap}
.progress-row strong{font-size:clamp(20px,5vw,28px);line-height:1.2}
.progress-count{display:flex;align-items:baseline;white-space:nowrap;gap:4px}
.progress-count strong{color:#fff}
.progress-count .muted{font-size:clamp(10px,2.5vw,13px)}
.track{height:4px;border-radius:99px;background:#273956}
.track>div{border-radius:99px}
.grid{gap:3px}
.tile{height:31px;border-radius:3px}
.tile.paid{color:#fff}
.selection{margin-top:11px;background:transparent;padding:0;border-radius:0;gap:4px}
.selection>div{flex:4;background:#243554;border-radius:4px;padding:7px 10px;min-height:49px;justify-content:center}
.selection strong{font-size:19px}
#selection .yellow-btn{flex:6;min-height:49px;border-radius:4px;padding:10px 6px}
.supporters{margin-top:23px}
.supporters h2{font-size:12px;margin-bottom:8px}
.supporters p{font-size:12px;line-height:1.9}
.supporters .person+.person::before{content:" · ";color:#8292AB}
footer{border-top:1px solid #273956;padding-top:14px;margin-top:27px;font-size:10px}
.subpage{margin:20px auto;min-height:65vh}
.subpage h1{font-size:21px}
form>input{background:#243554;border:1px solid #536782}
.subpage .yellow-btn{border-radius:4px}
@media(min-width:650px){.page{padding:0 24px 40px}#home > header{height:340px;padding-top:24px}#home > header::before{background-position:center 25%}.progress{margin-top:-4px;margin-bottom:18px}.supporters{margin-top:30px}}
@media(max-width:360px){.page{padding:0 6px 26px}#home > header{height:clamp(190px,34svh,280px)}#home > header::before{background-position:center 15%}.progress-row strong{font-size:19px}.progress-row .muted{font-size:10px}#selection .yellow-btn{font-size:12px}}


/* Finale mobiele compositie — titel in het midden van de foto */
.page{max-width:900px;padding:0 8px 30px}
#home>header{position:relative;height:clamp(300px,48svh,450px);min-height:300px;max-height:none;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 8px 0;margin:0;overflow:hidden;isolation:isolate;border-radius:0}
#home>header::before{content:"";position:absolute;inset:0;z-index:-2;background:url('teamfoto-origineel.jpeg') center 43%/cover no-repeat}
#home>header::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(16,29,56,.20) 0%,rgba(16,29,56,.17) 19%,rgba(16,29,56,.42) 40%,rgba(16,29,56,.52) 56%,rgba(16,29,56,.28) 69%,rgba(16,29,56,.85) 90%,#101D38 100%)}
#home>header .brand{font-size:clamp(26px,7.3vw,58px);letter-spacing:-1.2px;line-height:1.05;text-shadow:0 2px 14px rgba(0,0,0,.65);white-space:nowrap}
#home>header .brand b{color:#fff}#home>header .tagline{color:#FFD23F;font-size:clamp(13px,3vw,18px);letter-spacing:2px;margin-top:8px;text-shadow:0 2px 10px #101D38}
.progress{margin:-4px 0 20px;padding:0 4px;position:relative;z-index:2}.progress-row{align-items:baseline}.progress-count{display:flex;align-items:baseline;gap:4px}.progress-count strong{color:#fff}.track{height:4px;border-radius:99px}.track>div{border-radius:99px}
.grid{gap:3px}.tile{height:31px;border-radius:3px}.selection{margin-top:12px;gap:4px;background:transparent;padding:0}.selection>div{background:#243554;border-radius:4px;flex:4;padding:8px 10px}.selection .yellow-btn{flex:6;border-radius:4px;min-height:52px}
.supporters{margin-top:28px}footer{border-top:1px solid #273956;padding-top:14px;margin-top:28px;font-size:10px}
form>input{background:#243554;border:1px solid #536782}.subpage .yellow-btn{border-radius:4px}
@media(max-width:390px){#home>header{height:clamp(285px,44svh,360px)}#home>header::before{background-position:center 40%}.page{padding:0 7px 26px}}
@media(min-width:650px){.page{padding:0 22px 40px}#home>header{height:440px}#home>header::before{background-position:center 42%}.progress{margin-bottom:24px}}

/* V4 foto 25% korter: minder sporthal boven en vloer/benen onder.
   Koptekst blijft gecentreerd; originele foto blijft onaangetast. */
#home>header{height:clamp(225px,36svh,338px);min-height:225px;justify-content:center;padding:0 8px}
#home>header::before{background-position:center 42%}
#home>header::after{background:linear-gradient(180deg,rgba(16,29,56,.35) 0%,rgba(16,29,56,.30) 24%,rgba(16,29,56,.43) 47%,rgba(16,29,56,.37) 62%,rgba(16,29,56,.84) 91%,#101D38 100%)}
@media(max-width:390px){#home>header{height:clamp(214px,33svh,270px)}#home>header::before{background-position:center 42%}}
@media(min-width:650px){#home>header{height:330px}#home>header::before{background-position:center 42%}}

/* Heldere, duidelijk leesbare titel; verwijderde labelruimte. */
#home>header .brand{color:#fff;font-weight:950;text-shadow:0 3px 5px rgba(0,0,0,.98),0 0 18px rgba(0,0,0,.88);filter:brightness(1.12);-webkit-text-stroke:.35px rgba(255,255,255,.5)}
#home>header .brand span{color:#FFE04B;-webkit-text-stroke:.35px #FFE04B}
#home>header .brand b{color:#FFFFFF;-webkit-text-stroke:.35px #fff}
#home>header .tagline{color:#FFE04B;font-weight:900;text-shadow:0 3px 5px rgba(0,0,0,.98),0 0 16px rgba(0,0,0,.85);letter-spacing:2.2px;filter:brightness(1.12)}
#home>header::after{background:linear-gradient(180deg,rgba(16,29,56,.34) 0%,rgba(16,29,56,.30) 24%,rgba(16,29,56,.55) 45%,rgba(16,29,56,.50) 62%,rgba(16,29,56,.84) 91%,#101D38 100%)}
.progress{margin-top:-4px}

/* Finetuning: minder afstand foto–cijfers–balk; heldere maar natuurlijke koptekst. */
#home>header{margin-bottom:0}
.progress{margin:-13px 0 9px;padding:0 4px;position:relative;z-index:2}
.progress-row{margin:0 0 4px;align-items:baseline}
.track{margin:0}
#home>header .brand{font-weight:850;color:#FFFFFF;text-shadow:0 2px 8px rgba(0,0,0,.75);filter:none;-webkit-text-stroke:0;letter-spacing:-1.1px}
#home>header .brand span{color:#FFD23F;-webkit-text-stroke:0}
#home>header .brand b{color:#FFFFFF;font-weight:850;-webkit-text-stroke:0}
#home>header .tagline{font-weight:800;color:#FFD23F;text-shadow:0 2px 8px rgba(0,0,0,.72);filter:none;letter-spacing:1.8px}
@media(min-width:650px){.progress{margin-top:-12px;margin-bottom:12px}}

/* Function-only additions: pending indication and request form, approved base unchanged */
.tile.pending{background:#536782;color:#fff;cursor:default}.subpage:not([hidden]){padding:12px;min-height:0}.subpage .check input{width:17px}.subpage .wide{border-radius:4px}.subpage .close{padding:0 8px}.subpage #requestError{color:#ffd6d6}
