/* Studio '27 - oudejaarsfeest. Studio 54 disco: nacht, goud, magenta neon. */
:root{
  --nacht:#0a0813; --nacht2:#120d20; --paars:#1a1030;
  --goud:#e8c04b; --goud-licht:#f4d97a; --magenta:#ff2e88; --magenta-licht:#ff5fa6;
  --cyaan:#25d0e6; --tekst:#f3edff; --zacht:#b3a9cc; --lijn:rgba(232,192,75,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--nacht); color:var(--tekst);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; font-size:16px; line-height:1.6;
  overflow-x:hidden;
}
a{color:var(--goud-licht)}
h1,h2,h3{margin:0;line-height:1.1}

/* achtergrond: spotlichten */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(closest-side at 15% 0%, rgba(255,46,136,.20), transparent 60%),
    radial-gradient(closest-side at 85% 5%, rgba(37,208,230,.16), transparent 55%),
    radial-gradient(closest-side at 50% 100%, rgba(232,192,75,.12), transparent 60%);}
.wrap{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:0 20px 80px}

/* ---------- discobal ---------- */
.disco{width:120px;height:120px;margin:38px auto 6px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 35% 30%, #fff, #cfd6e6 35%, #8b93ad 70%, #5b6178);
  box-shadow:0 0 60px 8px rgba(255,255,255,.15), 0 0 120px 20px rgba(255,46,136,.25);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 8px, transparent 8px 16px);
  background-blend-mode:multiply; animation:spin 14s linear infinite;}
.disco::after{content:"";position:absolute;top:-30px;left:50%;width:2px;height:30px;background:linear-gradient(var(--zacht),transparent);transform:translateX(-50%)}
@keyframes spin{to{filter:hue-rotate(360deg)}}

/* ---------- hero ---------- */
.hero{text-align:center;padding:6px 0 14px}
.kicker{font-size:13px;letter-spacing:.36em;text-transform:uppercase;color:var(--goud);margin:0 0 14px;font-weight:600}
.logo{font-family:'Monoton',cursive;font-size:clamp(52px,13vw,104px);line-height:.9;color:#fff;
  text-shadow:0 0 8px #fff, 0 0 22px var(--magenta), 0 0 44px var(--magenta), 0 0 70px rgba(255,46,136,.6);
  letter-spacing:.02em;margin:0}
.datum{margin:16px 0 0;font-size:clamp(16px,3.4vw,20px);color:var(--tekst);font-weight:500}
.datum b{color:var(--goud-licht)}
.oneline{margin:8px 0 0;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--zacht)}

/* ---------- gepersonaliseerde aanhef ---------- */
.aanhef{margin:30px 0 0;text-align:center;background:linear-gradient(160deg,var(--nacht2),var(--paars));
  border:1px solid var(--lijn);border-radius:18px;padding:26px 24px;
  box-shadow:0 0 40px rgba(255,46,136,.08) inset}
.aanhef .hoi{font-family:'Monoton',cursive;font-size:clamp(24px,5vw,34px);color:var(--magenta-licht);
  text-shadow:0 0 18px rgba(255,46,136,.55);margin:0 0 10px}
.aanhef p{margin:0;color:var(--zacht);font-size:15px}

/* ---------- info-kaarten ---------- */
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:28px 0 0}
.kaart{background:rgba(255,255,255,.03);border:1px solid var(--lijn);border-radius:16px;padding:18px;text-align:center}
.kaart .ic{font-size:26px;margin-bottom:8px;display:block}
.kaart .lb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--goud);font-weight:600}
.kaart .vl{margin-top:5px;font-weight:600;font-size:15px}
.kaart .vl small{display:block;font-weight:400;color:var(--zacht);font-size:12.5px;margin-top:2px}

/* honden-bannertje */
.honden{margin:22px 0 0;text-align:center;background:linear-gradient(90deg,rgba(255,46,136,.14),rgba(232,192,75,.14));
  border:1px dashed var(--lijn);border-radius:14px;padding:14px 18px;font-size:14.5px}
.honden b{color:var(--goud-licht)}

/* ---------- RSVP ---------- */
.rsvp{margin:34px 0 0;background:linear-gradient(160deg,var(--nacht2),#0d0a1c);border:1px solid var(--lijn);
  border-radius:20px;padding:26px 22px}
.rsvp h2{font-family:'Monoton',cursive;font-size:26px;color:var(--goud-licht);text-align:center;
  text-shadow:0 0 16px rgba(232,192,75,.4);margin:0 0 4px}
.rsvp .sub{text-align:center;color:var(--zacht);font-size:13.5px;margin:0 0 22px}
.veld{margin:0 0 16px}
.veld label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--goud);font-weight:600;margin-bottom:7px}
.veld input[type=text],.veld input[type=email],.veld input[type=number],.veld textarea,.veld select{
  width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(232,192,75,.3);color:var(--tekst);
  border-radius:11px;padding:12px 14px;font:inherit;font-size:15px}
.veld input::placeholder,.veld textarea::placeholder{color:#7c718f}
.veld input:focus,.veld textarea:focus,.veld select:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 3px rgba(255,46,136,.18)}
.keuze{display:flex;gap:12px}
.keuze label{flex:1;cursor:pointer;margin:0}
.keuze input{position:absolute;opacity:0;pointer-events:none}
.keuze .knop{display:block;text-align:center;padding:14px;border-radius:12px;border:1px solid rgba(232,192,75,.3);
  background:rgba(255,255,255,.04);font-weight:600;transition:.15s;text-transform:none;letter-spacing:0;color:var(--tekst);font-size:15px}
.keuze input:checked + .knop{border-color:var(--magenta);background:rgba(255,46,136,.16);color:#fff;box-shadow:0 0 18px rgba(255,46,136,.25)}
.keuze .ja input:checked + .knop{border-color:var(--goud);background:rgba(232,192,75,.16);box-shadow:0 0 18px rgba(232,192,75,.22)}
.rij{display:flex;gap:14px}
.rij .veld{flex:1}
.verborgen{display:none}
.knop-verzend{width:100%;margin-top:6px;background:linear-gradient(90deg,var(--magenta),var(--goud));color:#160a12;border:0;
  border-radius:12px;padding:16px;font:inherit;font-size:16px;font-weight:700;letter-spacing:.02em;cursor:pointer;
  text-transform:uppercase;box-shadow:0 6px 24px rgba(255,46,136,.3)}
.knop-verzend:hover{filter:brightness(1.08)}

/* ---------- bevestiging ---------- */
.klaar{text-align:center;background:linear-gradient(160deg,var(--nacht2),var(--paars));border:1px solid var(--lijn);
  border-radius:20px;padding:40px 26px;margin:34px 0 0}
.klaar .em{font-size:52px}
.klaar h2{font-family:'Monoton',cursive;color:var(--goud-licht);font-size:30px;margin:10px 0;text-shadow:0 0 18px rgba(232,192,75,.4)}
.klaar p{color:var(--zacht);margin:0}
.klaar .wijzig{display:inline-block;margin-top:20px;color:var(--zacht);font-size:13px;border-bottom:1px solid var(--zacht)}

/* ---------- voet ---------- */
.voet{text-align:center;margin:50px 0 0;color:#6d6486;font-size:12.5px}
.voet a{color:#8c81a6}

/* ---------- beheer ---------- */
.beheer-wrap{max-width:1000px;margin:0 auto;padding:30px 20px}
.beheer-wrap h1{font-family:'Monoton',cursive;color:var(--goud-licht);font-size:32px;text-shadow:0 0 16px rgba(232,192,75,.35)}
.samenvat{display:flex;flex-wrap:wrap;gap:14px;margin:20px 0}
.samenvat .box{flex:1;min-width:130px;background:linear-gradient(160deg,var(--nacht2),var(--paars));border:1px solid var(--lijn);border-radius:14px;padding:16px 18px}
.samenvat .box b{display:block;font-family:'Monoton',cursive;font-size:30px;color:var(--goud-licht)}
.samenvat .box span{font-size:12px;color:var(--zacht);text-transform:uppercase;letter-spacing:.08em}
table.gasten{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
table.gasten th,table.gasten td{padding:10px 12px;text-align:left;border-bottom:1px solid rgba(232,192,75,.14)}
table.gasten th{color:var(--goud);text-transform:uppercase;font-size:11px;letter-spacing:.06em}
.pill{display:inline-block;border-radius:20px;padding:2px 10px;font-size:12px;font-weight:600}
.pill.ja{background:rgba(232,192,75,.18);color:var(--goud-licht)}
.pill.nee{background:rgba(255,46,136,.16);color:var(--magenta-licht)}
.pill.open{background:rgba(255,255,255,.08);color:var(--zacht)}
.inlog{max-width:340px;margin:80px auto;text-align:center}
.inlog input{width:100%;margin:14px 0;padding:12px 14px;border-radius:10px;border:1px solid rgba(232,192,75,.3);background:rgba(255,255,255,.05);color:var(--tekst);font:inherit}
.inlog button{width:100%;padding:12px;border:0;border-radius:10px;background:var(--goud);color:#160a12;font-weight:700;cursor:pointer}

@media(prefers-reduced-motion:reduce){.disco{animation:none}}