/* Zanger Andy - charmezanger uit Turnhout. Nachtblauw + goud, feestelijk-elegant. */
:root{
  --nacht:#0c1230; --nacht2:#141b40; --kaart:#171e46; --rand:#2a3266;
  --goud:#e6c15a; --goud-l:#f3dd94; --goud-d:#c9a53f;
  --wit:#f7f5ef; --grijs:#aab2d0; --grijs-d:#7d85a8;
  --schaduw:0 10px 40px rgba(0,0,0,.35);
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--nacht); color:var(--wit); line-height:1.6;
  -webkit-font-smoothing:antialiased; padding-bottom:64px;
}
a{color:var(--goud-l); text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
h1,h2,h3{line-height:1.2; font-weight:800; letter-spacing:-.02em}
section{padding:56px 0}

/* ---- Topbalk (desktop) ---- */
.top{position:sticky; top:0; z-index:40; background:rgba(12,18,48,.82);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--rand)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; color:var(--wit)}
.brand .dot{width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--goud-l),var(--goud-d));
  display:grid; place-items:center; color:#2a2000; font-weight:900}
.nav{display:flex; gap:6px}
.nav a{color:var(--grijs); padding:9px 14px; border-radius:10px; font-weight:600; font-size:15px}
.nav a:hover,.nav a.actief{color:var(--wit); background:rgba(230,193,90,.12)}
.nav a.cta{background:linear-gradient(180deg,var(--goud-l),var(--goud-d)); color:#2a2000}
@media(max-width:720px){ .nav{display:none} }

/* ---- Hero ---- */
.hero{position:relative; overflow:hidden; text-align:center;
  padding:90px 20px 80px;
  background:
    radial-gradient(1200px 500px at 50% -10%,rgba(230,193,90,.22),transparent 60%),
    radial-gradient(600px 300px at 80% 20%,rgba(120,90,220,.18),transparent 60%),
    linear-gradient(180deg,var(--nacht2),var(--nacht))}
.hero .kicker{color:var(--goud); font-weight:700; letter-spacing:.22em; text-transform:uppercase; font-size:13px}
.hero h1{font-size:clamp(40px,9vw,76px); margin:14px 0 6px;
  background:linear-gradient(180deg,#fff,var(--goud-l)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .sub{color:var(--grijs); font-size:clamp(16px,2.4vw,21px); max-width:620px; margin:0 auto 26px}
.hero .spots{position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(115deg,transparent 0 60px,rgba(230,193,90,.05) 60px 61px)}
.btnrow{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:12px; font-weight:700; font-size:16px}
.btn.goud{background:linear-gradient(180deg,var(--goud-l),var(--goud-d)); color:#2a2000; box-shadow:0 8px 24px rgba(230,193,90,.25)}
.btn.rand{border:1px solid var(--rand); color:var(--wit)}
.btn svg{width:18px;height:18px}

/* ---- Kaarten / secties ---- */
.eyebrow{color:var(--goud); font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:12px; margin-bottom:8px}
.lead{color:var(--grijs); font-size:18px; max-width:720px}
.grid{display:grid; gap:20px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){ .grid.c3,.grid.c2{grid-template-columns:1fr} }
.card{background:var(--kaart); border:1px solid var(--rand); border-radius:var(--radius); padding:24px; box-shadow:var(--schaduw)}
.card h3{font-size:20px; margin-bottom:8px}
.card p{color:var(--grijs)}
.icoon{width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:rgba(230,193,90,.14); color:var(--goud-l); margin-bottom:14px}
.icoon svg{width:24px;height:24px}

/* ---- Video-embeds ---- */
.videowrap{position:relative; padding-top:56.25%; border-radius:var(--radius); overflow:hidden; border:1px solid var(--rand); background:#000}
.videowrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.videoplace{position:absolute; inset:0; display:grid; place-items:center; text-align:center; gap:10px; cursor:pointer;
  background:linear-gradient(180deg,var(--nacht2),#0a0f28); color:var(--grijs)}
.videoplace .play{width:66px;height:66px;border-radius:50%;background:linear-gradient(180deg,var(--goud-l),var(--goud-d));display:grid;place-items:center;color:#2a2000}
.videoplace .play svg{width:28px;height:28px}

/* ---- Bio ---- */
.bioflex{display:grid; grid-template-columns:1fr 1.3fr; gap:36px; align-items:center}
@media(max-width:820px){ .bioflex{grid-template-columns:1fr} }
.portret{aspect-ratio:4/5; border-radius:20px; border:1px solid var(--rand);
  background:radial-gradient(circle at 50% 35%,rgba(230,193,90,.2),transparent 60%),linear-gradient(180deg,var(--nacht2),#0a0f28);
  display:grid; place-items:center; text-align:center; color:var(--grijs-d); padding:24px}
.portret svg{width:88px;height:88px;color:var(--goud-d);opacity:.7}
.prose p{margin-bottom:16px; color:#dfe3f4}
.prose .quote{border-left:3px solid var(--goud); padding:6px 0 6px 18px; color:var(--goud-l); font-style:italic; font-size:19px}
.chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.chip{background:rgba(230,193,90,.1); border:1px solid var(--rand); color:var(--goud-l); padding:6px 12px; border-radius:999px; font-size:14px; font-weight:600}

/* ---- Formulier ---- */
form.boek{display:grid; gap:16px; max-width:620px}
.veld{display:grid; gap:6px}
.veld label{font-weight:600; font-size:15px}
.veld input,.veld textarea,.veld select{
  background:var(--nacht2); border:1px solid var(--rand); color:var(--wit);
  padding:13px 14px; border-radius:11px; font:inherit; width:100%}
.veld input:focus,.veld textarea:focus{outline:2px solid var(--goud-d); border-color:transparent}
.hp{position:absolute; left:-9999px}
.melding{padding:14px 16px; border-radius:11px; font-weight:600}
.melding.ok{background:rgba(80,200,120,.14); border:1px solid #2e7d4f; color:#a8e6bf}
.melding.fout{background:rgba(220,80,80,.14); border:1px solid #7d2e2e; color:#f0b0b0}
.note{color:var(--grijs-d); font-size:14px}

/* ---- Footer ---- */
footer{border-top:1px solid var(--rand); padding:34px 0; color:var(--grijs-d); font-size:14px}
footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center}
footer a{color:var(--grijs)}

/* ---- Mobiele onderbalk ---- */
.tabbar{position:fixed; bottom:0; left:0; right:0; z-index:50; display:none;
  background:rgba(12,18,48,.95); backdrop-filter:blur(10px); border-top:1px solid var(--rand);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--grijs-d); font-size:11px; font-weight:600; padding:6px 0}
.tabbar a.actief{color:var(--goud-l)}
.tabbar svg{width:22px;height:22px}
@media(max-width:720px){ .tabbar{display:flex} }

/* ---- Cookiebanner ---- */
.cookie{position:fixed; bottom:74px; left:16px; right:16px; z-index:60; max-width:520px; margin:0 auto;
  background:var(--kaart); border:1px solid var(--rand); border-radius:14px; padding:16px 18px; box-shadow:var(--schaduw); display:none}
.cookie.toon{display:block}
.cookie p{color:var(--grijs); font-size:14px; margin-bottom:12px}
.cookie .rij{display:flex; gap:10px; justify-content:flex-end}
.cookie button{padding:9px 16px; border-radius:9px; font-weight:700; border:0; cursor:pointer; font-size:14px}
.cookie .accept{background:linear-gradient(180deg,var(--goud-l),var(--goud-d)); color:#2a2000}
.cookie .weiger{background:transparent; border:1px solid var(--rand); color:var(--grijs)}
@media(max-width:720px){ .cookie{bottom:80px} }