/* ===== C.V. De Stokers — design tokens uit het handoff-ontwerp ===== */
:root{
  --bg:#08080F; --bg-deep:#0B0B16;
  --geel:#FFD400; --rood:#FF2E4C; --rood-hover:#FF4E68; --groen:#00C46A;
  --rood-licht:#FF5A6E; --rood-zacht:#FF8A98; --groen-licht:#4CE49B;
  --txt:#F4F2FF; --txt-2:#C9C5E4; --txt-3:#B4B0D2; --txt-muted:#8E89B4; --txt-dim:#6E6A94;
  --op-donker:#14121F;
  --kaart:rgba(255,255,255,.04); --kaart-hover:rgba(255,255,255,.07);
  --rand:rgba(255,255,255,.09); --rand-2:rgba(255,255,255,.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
body{font-family:Manrope,system-ui,sans-serif;color:var(--txt);min-height:100vh;overflow-x:hidden;position:relative}
a{color:var(--geel);text-decoration:none}
a:hover{color:#fff}
::selection{background:var(--rood);color:#fff}
img{max-width:100%;display:block}

@keyframes stk-fall{0%{transform:translate3d(0,-12vh,0) rotate(0)}100%{transform:translate3d(0,112vh,0) rotate(720deg)}}
@keyframes stk-pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes stk-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes stk-in{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}

.glow-layer{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60vw 50vh at 12% -8%, rgba(255,46,76,.20), transparent 70%),
    radial-gradient(55vw 45vh at 88% 6%, rgba(255,212,0,.14), transparent 70%),
    radial-gradient(70vw 60vh at 50% 105%, rgba(0,196,106,.16), transparent 70%);}
.confetti{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1}
@media (prefers-reduced-motion: reduce){
  .confetti{display:none}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
}

/* ---------- layout ---------- */
main{position:relative;z-index:5}
.page{animation:stk-in .4s ease}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px}
.wrap-sm{max-width:1040px}.wrap-md{max-width:1100px}.wrap-lg{max-width:1140px}
.sec{padding:60px 0 70px}
.grid{display:grid}
.gap-12{gap:12px}.gap-14{gap:14px}.gap-18{gap:18px}.gap-20{gap:20px}.gap-26{gap:26px}
.auto-260{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.auto-280{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.auto-300{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.auto-200{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.auto-190{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.auto-170{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.auto-210{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}

/* ---------- typografie ---------- */
h1,h2,h3{font-family:Fredoka,sans-serif;margin:0;line-height:1;letter-spacing:-.01em}
.h1-hero{font-size:clamp(46px,9vw,104px);font-weight:700;line-height:1}
.h1{font-size:clamp(38px,6vw,68px);font-weight:700;color:#fff;margin:12px 0 10px}
.h2{font-size:clamp(28px,4.4vw,48px);font-weight:700;color:#fff}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--geel)}
.eyebrow-dim{color:var(--txt-dim)}
.lead{font-size:17px;line-height:1.65;color:var(--txt-2);max-width:660px;text-wrap:pretty}
.body{font-size:15px;line-height:1.6;color:var(--txt-3);text-wrap:pretty}
.cv{display:inline-flex;column-gap:.02em}

/* ---------- knoppen ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-weight:700;
  font-size:15px;cursor:pointer;border:0;padding:13px 24px;font-family:Manrope,sans-serif;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;text-align:center}
.btn-geel{background:var(--geel);color:var(--op-donker);font-family:Fredoka,sans-serif;
  box-shadow:0 0 24px rgba(255,212,0,.4)}
.btn-geel:hover{background:#fff;color:var(--op-donker);box-shadow:0 0 34px rgba(255,212,0,.6)}
.btn-rood{background:var(--rood);color:#fff;font-family:Fredoka,sans-serif;box-shadow:0 10px 34px rgba(255,46,76,.4)}
.btn-rood:hover{background:var(--rood-hover);color:#fff}
.btn-outline{background:transparent;border:1.5px solid rgba(255,255,255,.2);color:#fff}
.btn-outline:hover{border-color:var(--geel);color:var(--geel)}
.btn-outline.groen:hover{border-color:var(--groen);color:var(--groen)}
.btn-outline.rood:hover{border-color:var(--rood);color:var(--rood-zacht)}
.btn-zacht{background:rgba(255,255,255,.07);border:1px solid var(--rand);color:var(--txt-2)}
.btn-zacht:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-sm{padding:9px 16px;font-size:13.5px}
.btn-block{width:100%;justify-content:center}

/* ---------- kaarten ---------- */
.card{background:var(--kaart);border:1px solid var(--rand);border-radius:24px;padding:24px;
  transition:background .15s,border-color .15s}
.card:hover{background:var(--kaart-hover)}
.card-hover:hover{border-color:rgba(255,212,0,.45)}
.card-30{border-radius:30px}.card-20{border-radius:20px}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:40;backdrop-filter:blur(18px);
  background:rgba(10,10,20,.82);border-bottom:1px solid rgba(255,255,255,.08)}
.hdr{max-width:1240px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.disc{width:46px;height:46px;border-radius:50%;padding:2px;overflow:hidden;
  background:linear-gradient(140deg,#FFD400,#FF2E4C 60%,#00C46A);box-shadow:0 0 22px rgba(255,212,0,.45)}
.disc>span{width:100%;height:100%;border-radius:50%;background:var(--bg-deep);display:grid;
  place-items:center;font-family:Fredoka,sans-serif;font-weight:700;font-size:15px;color:var(--geel)}
.brand-name{font-family:Fredoka,sans-serif;font-weight:700;font-size:19px;color:#fff}
.brand-sub{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--geel);font-weight:700;margin-top:3px}
nav.main{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
nav.main a{padding:9px 14px;border-radius:999px;font-size:14.5px;font-weight:700;
  white-space:nowrap;color:var(--txt-2)}
nav.main a:hover{color:#fff;background:rgba(255,255,255,.07)}
nav.main a.active{color:var(--geel);background:rgba(255,212,0,.12)}
.hdr-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.tricolor{height:3px;display:flex}
.tricolor i{flex:1}
.tricolor i:nth-child(1){background:var(--rood)}
.tricolor i:nth-child(2){background:var(--geel)}
.tricolor i:nth-child(3){background:var(--groen)}
.nav-toggle{display:none;background:transparent;border:1.5px solid var(--rand-2);color:#fff;
  border-radius:12px;padding:8px 10px;cursor:pointer;margin-left:auto}
@media (max-width:900px){
  .nav-toggle{display:block}
  nav.main,.hdr-actions{display:none;width:100%;margin-left:0}
  .hdr{flex-wrap:wrap}
  header.site.open nav.main{display:flex}
  header.site.open .hdr-actions{display:flex;padding-bottom:6px}
}

/* ---------- footer ---------- */
footer.site{background:rgba(5,5,11,.7);border-top:1px solid rgba(255,255,255,.08);
  position:relative;z-index:5;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;padding:46px 0 30px}
.foot-h{font-family:Fredoka,sans-serif;font-size:16px;color:#fff;margin-bottom:12px}
.foot-list{display:grid;gap:8px}
.foot-list a{font-size:14.5px;color:var(--txt-3)}
.copy{padding:16px 0 26px;font-size:13px;color:var(--txt-dim);text-align:center}

/* ---------- pills / tags ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  font-size:13.5px;font-weight:700;border:1.5px solid var(--rand-2);color:var(--txt-2);cursor:pointer;
  background:transparent;font-family:Manrope,sans-serif}
.pill:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.pill.on-geel{background:var(--geel);color:var(--op-donker);border-color:var(--geel)}
.pill.on-groen{background:var(--groen);color:var(--bg);border-color:var(--groen)}
.tag{display:inline-flex;padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase}

/* ---------- hero ---------- */
.hero{text-align:center;padding:54px 0 10px;display:grid;justify-items:center;gap:20px}
.badge{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;
  border:1px solid rgba(255,212,0,.35);background:rgba(255,212,0,.08);font-size:12px;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--geel)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--groen);box-shadow:0 0 10px var(--groen)}
.hero-logo{width:188px;height:188px;border-radius:50%;padding:5px;
  background:conic-gradient(from 20deg,#FFD400,#FF2E4C,#00C46A,#FFD400);
  box-shadow:0 0 70px rgba(255,212,0,.35),0 0 140px rgba(255,46,76,.25);animation:stk-pulse 5s ease-in-out infinite}
.hero-logo>div{width:100%;height:100%;border-radius:50%;background:var(--bg-deep);display:grid;place-items:center;
  font-family:Fredoka,sans-serif;font-weight:700;font-size:58px;color:var(--geel)}
.hero-geel{color:var(--geel);text-shadow:0 0 46px rgba(255,212,0,.55)}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:520px;width:100%}
@media (max-width:400px){.countdown{grid-template-columns:repeat(2,1fr)}}
.cd-cell{border-radius:20px;padding:14px 8px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.cd-num{font-family:Fredoka,sans-serif;font-size:clamp(30px,5.5vw,52px);font-variant-numeric:tabular-nums;color:#fff;line-height:1}
.cd-lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-muted);margin-top:6px;font-weight:700}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;max-width:1300px;margin:0 auto;padding:0 22px}
.shot{aspect-ratio:4/5;border-radius:22px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.ph{background:linear-gradient(140deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--rand);display:grid;place-items:center;color:var(--txt-dim);
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;width:100%;height:100%;text-align:center;padding:8px}
.marquee{border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
  overflow:hidden;padding:16px 0;margin-top:50px}
.marquee-track{display:flex;gap:30px;width:max-content;animation:stk-marquee 26s linear infinite;
  font-family:Fredoka,sans-serif;font-size:26px;color:rgba(255,255,255,.5);white-space:nowrap}
.marquee-track .sep{color:var(--geel)}

/* ---------- agenda ---------- */
.ev{display:grid;grid-template-columns:96px 1fr;border-radius:22px;border:1px solid var(--rand);
  overflow:hidden;background:var(--kaart);transition:border-color .15s,background .15s}
.ev:hover{border-color:rgba(255,212,0,.45);background:var(--kaart-hover)}
.ev-date{padding:16px 8px;text-align:center;border-right:1px solid rgba(255,255,255,.08)}
.ev-m{font-size:11.5px;font-weight:800;color:var(--rood-licht);letter-spacing:.1em}
.ev-d{font-family:Fredoka,sans-serif;font-size:38px;color:#fff;line-height:1.1}
.ev-w{font-size:11px;color:var(--txt-muted)}
.ev-body{padding:16px 20px;display:grid;gap:8px}
.ev-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ev-title{font-family:Fredoka,sans-serif;font-size:22px;color:#fff;margin-right:auto}
.ev-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--txt-2)}
.ev-meta span{display:inline-flex;align-items:center;gap:7px}
.ev-org{border-top:1px solid rgba(255,255,255,.08);padding-top:8px;font-size:12.5px;color:var(--txt-muted)}

/* ---------- formulieren ---------- */
label.fld{display:grid;gap:7px;font-size:13px;font-weight:700;color:var(--txt-2)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],select,textarea{
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);border-radius:14px;
  padding:13px 15px;color:var(--txt);font-size:15px;font-family:Manrope,sans-serif;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--geel)}
input[type=checkbox]{accent-color:var(--geel);width:16px;height:16px}
select option{background:var(--bg-deep)}
.melding{border-radius:12px;padding:12px 15px;font-size:14px;font-weight:600;margin-bottom:14px}
.melding.fout{background:rgba(255,46,76,.15);border:1px solid rgba(255,46,76,.4);color:var(--rood-zacht)}
.melding.ok{background:rgba(0,196,106,.15);border:1px solid rgba(0,196,106,.4);color:var(--groen-licht)}

/* ---------- gallerij ---------- */
.album-card{border-radius:24px;overflow:hidden;background:var(--kaart);border:1px solid var(--rand);
  display:block;color:inherit;transition:border-color .15s,background .15s}
.album-card:hover{border-color:rgba(255,212,0,.45);background:var(--kaart-hover);color:inherit}
.album-cover{aspect-ratio:4/3;position:relative;overflow:hidden}
.album-cover img{width:100%;height:100%;object-fit:cover}
.jaar-badge{position:absolute;left:12px;top:12px;background:rgba(8,8,15,.78);backdrop-filter:blur(6px);
  color:var(--geel);font-size:12px;font-weight:800;letter-spacing:.1em;padding:5px 11px;border-radius:999px}
.album-body{padding:16px 18px 18px}
.album-title{font-family:Fredoka,sans-serif;font-size:20px;color:#fff}
.album-meta{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--txt-muted);margin-top:6px}
.foto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.foto-thumb{aspect-ratio:1;border-radius:16px;overflow:hidden;border:1px solid var(--rand);cursor:pointer;
  background:var(--kaart);transition:border-color .15s;position:relative;display:block;padding:0}
.foto-thumb:hover{border-color:var(--geel)}
.foto-thumb img{width:100%;height:100%;object-fit:cover}
.leeg{border:1px dashed rgba(255,212,0,.45);background:rgba(255,212,0,.06);border-radius:24px;
  padding:40px 24px;text-align:center;display:grid;gap:14px;justify-items:center}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(4,4,9,.94);backdrop-filter:blur(10px);
  display:grid;place-items:center;gap:14px;align-content:center;padding:20px}
.lightbox[hidden]{display:none}
.lb-frame{width:min(900px,92vw);max-height:80vh;border-radius:22px;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.7);background:var(--bg-deep)}
.lb-frame img{width:100%;max-height:80vh;object-fit:contain}
.lb-label{font-size:14px;color:var(--txt-2)}
.lb-bar{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.lb-nav{background:rgba(255,255,255,.08);border:1px solid var(--rand);color:#fff;border-radius:999px;
  width:42px;height:42px;display:grid;place-items:center;cursor:pointer;font-size:20px}
.lb-nav:hover{background:rgba(255,255,255,.16)}

/* ---------- tabellen (beheer) ---------- */
table.beheer{width:100%;border-collapse:collapse;font-size:14.5px}
table.beheer th{text-align:left;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-dim);padding:10px 12px;border-bottom:1px solid var(--rand);font-weight:800}
table.beheer td{padding:12px;border-bottom:1px solid rgba(255,255,255,.06);color:var(--txt-2);vertical-align:middle}
table.beheer tr:hover td{background:rgba(255,255,255,.03)}
.rol-badge{display:inline-flex;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.rol-admin{background:rgba(255,46,76,.18);color:var(--rood-zacht)}
.rol-uploader{background:rgba(255,212,0,.16);color:var(--geel)}
.rol-lid{background:rgba(0,196,106,.16);color:var(--groen-licht)}
.tbl-scroll{overflow-x:auto}
.row-acties{display:flex;gap:8px;flex-wrap:wrap}
.admin-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.admin-nav a{padding:9px 16px;border-radius:999px;font-size:14px;font-weight:700;
  color:var(--txt-2);border:1px solid var(--rand)}
.admin-nav a.active{background:rgba(255,212,0,.12);color:var(--geel);border-color:rgba(255,212,0,.35)}
.copy-veld{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
code.pw{background:rgba(0,0,0,.45);border:1px solid var(--rand);border-radius:10px;padding:8px 12px;
  font-size:15px;color:var(--geel);letter-spacing:.04em}
.upload-zone{border:1px dashed rgba(255,212,0,.45);background:rgba(255,212,0,.06);border-radius:20px;
  padding:28px;text-align:center;display:grid;gap:12px;justify-items:center}
.progress{height:8px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;width:100%}
.progress i{display:block;height:100%;width:0;background:var(--geel);transition:width .2s}
.stack{display:grid;gap:14px}
.flex{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ml-auto{margin-left:auto}
.center{text-align:center}
.mt-8{margin-top:8px}.mt-14{margin-top:14px}.mt-22{margin-top:22px}.mt-32{margin-top:32px}

/* actieve filterpills houden hun kleur bij hover */
.pill.on-geel:hover{background:#fff;color:var(--op-donker);border-color:#fff}
.pill.on-groen:hover{background:var(--groen-licht);color:var(--bg);border-color:var(--groen-licht)}