:root {
  --zwart: #111111;
  --kaart: #1c1c1c;
  --lijn: #2e2e2e;
  --wit: #f5f5f0;
  --grijs: #a8a49c;
  --geel: #ffd400;
  --rood: #e30613;
  --kop: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --tekst: 'Archivo', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--zwart);
  color: var(--wit);
  font-family: var(--tekst);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* Gebreide sjaal in Oeteldonkse kleuren */
.sjaal {
  height: 34px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 7px),
    linear-gradient(var(--rood) 0 33.4%, var(--wit) 33.4% 66.7%, var(--geel) 66.7%);
  box-shadow: inset 0 -6px 10px rgba(0,0,0,.35), inset 0 6px 10px rgba(0,0,0,.25);
}
.sjaal.dun { height: 14px; }

/* Kopletters zoals op de poster */
.kop { font-family: var(--kop); font-weight: 400; text-transform: uppercase; line-height: .92; letter-spacing: .005em; margin: 0; }
.geel { color: var(--geel); }

/* HERO */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 600px at 80% 20%, rgba(255, 212, 0, .08), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(227, 6, 19, .12), transparent 60%),
    var(--zwart);
  overflow: hidden;
}
.hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px 40px; align-items: center; padding: 28px 0 56px; }
.logo-rij { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.logo { width: clamp(150px, 22vw, 230px); height: auto; }
.prijs {
  background: var(--rood); color: var(--wit); border-radius: 14px; padding: 10px 18px 12px; text-align: center;
  transform: rotate(2deg); box-shadow: 0 10px 30px rgba(227, 6, 19, .35);
}
.prijs .kop { font-size: clamp(34px, 5vw, 50px); color: var(--geel); }
.prijs span { display: block; font-family: var(--kop); text-transform: uppercase; font-size: clamp(14px, 1.6vw, 18px); letter-spacing: .02em; line-height: 1.1; }

.slogan { font-size: clamp(40px, 6.6vw, 76px); }
.elfelf { font-size: clamp(110px, 21vw, 230px); color: var(--geel); margin-top: 10px; line-height: .86; }
.naam { font-size: clamp(54px, 9.5vw, 112px); margin-top: 4px; }
.stipt { font-size: clamp(38px, 6vw, 70px); margin-top: 14px; }
.label {
  display: inline-block; background: var(--rood); color: var(--wit); font-family: var(--kop); text-transform: uppercase;
  font-size: clamp(22px, 3.2vw, 34px); line-height: 1; padding: 10px 16px 8px; margin-top: 14px;
}
.embleem { justify-self: center; width: min(440px, 100%); filter: drop-shadow(0 24px 40px rgba(0,0,0,.6)); transform: rotate(3deg); }
.cta-rij { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.cta-rij p { margin: 0; color: var(--grijs); font-size: 16px; }

.knop {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--kop); text-transform: uppercase; font-size: 24px; letter-spacing: .02em; text-decoration: none; line-height: 1;
  background: var(--geel); color: var(--zwart); border: 0; border-radius: 12px; padding: 18px 30px 16px; min-height: 58px;
  cursor: pointer; box-shadow: 0 6px 0 #b39500; transition: transform .1s, box-shadow .1s;
}
.knop:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #b39500; }
.knop:active { transform: translateY(4px); box-shadow: 0 2px 0 #b39500; }
.knop:focus-visible { outline: 3px solid var(--wit); outline-offset: 4px; }
.knop[disabled] { opacity: .6; cursor: progress; }

/* Feitenbalk */
.feiten { background: var(--kaart); border-block: 1px solid var(--lijn); }
.feiten .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.feit { padding: 22px 18px; border-left: 1px solid var(--lijn); }
.feit:first-child { border-left: 0; }
.feit small { display: block; color: var(--grijs); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.feit b { font-family: var(--kop); font-weight: 400; text-transform: uppercase; font-size: 26px; line-height: 1.1; display: block; margin-top: 4px; }

/* Foto */
.foto { position: relative; }
.foto img { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; }
.foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--zwart), transparent 22%, transparent 70%, var(--zwart)); }

/* Secties */
section { padding: 80px 0; }
h2.kop { font-size: clamp(46px, 8vw, 88px); }
.intro { max-width: 56ch; color: var(--grijs); margin: 14px 0 36px; font-size: 19px; }

.pakket { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.item { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.item .kop { font-size: 36px; color: var(--geel); }
.item p { margin: 0; color: var(--grijs); font-size: 16px; }
.item .tag { align-self: flex-start; margin-top: auto; background: var(--rood); color: var(--wit); font-family: var(--kop); text-transform: uppercase; font-size: 15px; padding: 5px 10px 4px; border-radius: 6px; letter-spacing: .02em; }

/* Fred */
.fred { background: var(--geel); color: var(--zwart); }
.fred-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; }
.fred img { border: 4px solid var(--zwart); border-radius: 18px; width: 100%; aspect-ratio: 600 / 470; object-fit: cover; box-shadow: 14px 14px 0 var(--rood); }
.fred .label { margin: 0 0 14px; }
.fred p { font-size: 19px; max-width: 46ch; margin: 18px 0 0; }
.hits { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; margin: 20px 0 0; }
.hits li { background: var(--zwart); color: var(--wit); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 15px; }

/* Dagschema */
.dag { list-style: none; padding: 0; margin: 0; max-width: 820px; border-top: 1px solid var(--lijn); }
.dag li { display: grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--lijn); align-items: baseline; }
.dag .t { font-family: var(--kop); font-size: 44px; color: var(--geel); line-height: 1; }
.dag b { display: block; font-family: var(--kop); font-weight: 400; text-transform: uppercase; font-size: 28px; line-height: 1.1; }
.dag span { color: var(--grijs); }

/* Tickets */
.tickets { background: linear-gradient(180deg, var(--zwart), #1a0a0b); }
.ticket-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.voordelen { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.voordelen li { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; }
.voordelen li::before { content: ''; flex: none; width: 20px; height: 20px; margin-top: 4px; border-radius: 4px; background: linear-gradient(var(--rood) 0 33.4%, var(--wit) 33.4% 66.7%, var(--geel) 66.7%); }
form.kaart { background: var(--kaart); border: 1px solid var(--lijn); border-top: 6px solid var(--geel); border-radius: 18px; padding: 28px; display: grid; gap: 16px; }
label { font-weight: 600; font-size: 15px; display: grid; gap: 6px; color: var(--wit); }
input {
  font: inherit; font-size: 18px; padding: 14px; border: 1px solid #3a3a3a; border-radius: 10px;
  background: var(--zwart); color: var(--wit); width: 100%; min-height: 54px;
}
input::placeholder { color: #6f6b65; }
input:focus-visible { outline: 2px solid var(--geel); outline-offset: 1px; border-color: transparent; }
.aantal { display: grid; grid-template-columns: 58px 1fr 58px; border: 1px solid #3a3a3a; border-radius: 10px; overflow: hidden; background: var(--zwart); }
.aantal button { font-family: var(--kop); font-size: 28px; border: 0; background: #262626; color: var(--geel); cursor: pointer; min-height: 54px; }
.aantal button:hover { background: #303030; }
.aantal button:focus-visible { outline: 2px solid var(--geel); outline-offset: -2px; }
.aantal output { display: grid; place-items: center; font-family: var(--kop); font-size: 28px; }
.totaal { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed #444; padding-top: 14px; font-weight: 600; }
.totaal strong { font-family: var(--kop); font-weight: 400; font-size: 40px; color: var(--geel); }
.fout { color: #ff6b6b; font-weight: 600; min-height: 1.4em; margin: 0; }
.klein { font-size: 14px; color: var(--grijs); margin: 0; }
form .knop { width: 100%; }

footer { padding: 56px 0 48px; text-align: center; }
footer .kop { font-size: clamp(44px, 8vw, 84px); }
footer .sub { font-size: clamp(26px, 4vw, 40px); margin-top: 6px; }
footer address { font-style: normal; font-size: 22px; margin-top: 12px; }
footer .logo { margin: 30px auto 0; width: 150px; opacity: .9; }
footer .klein { margin-top: 18px; }

/* Bedankt / ticket */
.los { min-height: 100svh; display: grid; place-items: center; padding: 32px 16px; background: var(--zwart); }
.ticketkaart { width: min(440px, 100%); background: var(--wit); color: var(--zwart); border-radius: 22px; overflow: hidden; text-align: center; box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.ticketkaart .kopbalk { background: var(--zwart); padding: 18px; display: grid; justify-items: center; }
.ticketkaart .kopbalk img { width: 160px; }
.ticketkaart .binnen { padding: 24px 24px 28px; display: grid; gap: 10px; justify-items: center; }
.ticketkaart h1 { font-family: var(--kop); font-weight: 400; text-transform: uppercase; font-size: 38px; line-height: 1; margin: 0; }
.ticketkaart .klein { color: #666; }
.ticketkaart .qr { width: 220px; height: 220px; border: 2px solid var(--zwart); border-radius: 12px; padding: 6px; background: #fff; }
.code { font-family: var(--kop); font-size: 40px; letter-spacing: .14em; line-height: 1; }
.badge { font-family: var(--kop); text-transform: uppercase; font-size: 18px; padding: 6px 14px 4px; border-radius: 6px; }
.badge.ok { background: #18a058; color: #fff; }
.badge.wacht { background: var(--geel); color: var(--zwart); }
.badge.nee { background: var(--rood); color: #fff; }
.scheur { border-top: 2px dashed #bbb; width: 100%; margin: 6px 0; }
.spinner { width: 44px; height: 44px; border: 5px solid #ddd; border-top-color: var(--rood); border-radius: 50%; animation: draai .8s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; }

  .pakket { grid-template-columns: 1fr 1fr; }
  .fred-grid, .ticket-grid { grid-template-columns: 1fr; }
  .feiten .wrap { grid-template-columns: 1fr 1fr; }
  .feit:nth-child(3) { border-left: 0; }
  .feit:nth-child(n+3) { border-top: 1px solid var(--lijn); }
  section { padding: 60px 0; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .pakket { grid-template-columns: 1fr; }
  .feit { padding: 16px 12px; }
  .feit b { font-size: 21px; }
  .dag li { grid-template-columns: 1fr; gap: 4px; }
  .dag .t { font-size: 36px; }
  .cta-rij .knop { width: 100%; }
  form.kaart { padding: 20px; }
  .prijs { padding: 8px 12px 10px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Embleem: binnenkomen, zweven, glans */
.embleem-wrap { justify-self: center; width: min(460px, 100%); position: relative; perspective: 900px; }
.embleem-wrap .embleem { width: 100%; transform: none; animation: embleem-in 1.1s cubic-bezier(.2,1.4,.4,1) both, zweef 4.5s ease-in-out 1.1s infinite; transform-origin: 50% 60%; }
.embleem-wrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  background-size: 250% 100%; background-position: 160% 0;
  -webkit-mask: url(/img/embleem.webp) center / contain no-repeat; mask: url(/img/embleem.webp) center / contain no-repeat;
  animation: glans 5s ease-in-out 1.4s infinite; mix-blend-mode: soft-light;
}
.embleem-wrap::before {
  content: ''; position: absolute; left: 15%; right: 15%; bottom: -4%; height: 8%; border-radius: 50%;
  background: radial-gradient(rgba(0,0,0,.6), transparent 70%); animation: schaduw 4.5s ease-in-out 1.1s infinite;
}
@keyframes embleem-in { 0% { opacity: 0; transform: translateY(-60px) rotate(-14deg) scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes zweef { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2.5deg); } }
@keyframes schaduw { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.85); opacity: .6; } }
@keyframes glans { 0%, 55% { background-position: 160% 0; } 85%, 100% { background-position: -60% 0; } }

/* Vaste koopbalk onderin */
body { padding-bottom: 96px; }
.koopbalk {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 50;
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--wit);
  background: rgba(17,17,17,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid #333; border-radius: 18px; padding: 10px 10px 10px 92px; min-height: 76px;
  box-shadow: 0 14px 40px rgba(0,0,0,.55); max-width: 760px; margin-inline: auto;
  transition: transform .35s ease, opacity .35s ease;
}
.koopbalk.weg { transform: translateY(140%); opacity: 0; pointer-events: none; }
.koopbalk-embleem { position: absolute; left: 6px; bottom: 6px; width: 84px; height: auto; transform-origin: 50% 90%; animation: wiebel 2.6s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
@keyframes wiebel { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-6px); } }
.koopbalk-tekst { display: grid; line-height: 1.15; min-width: 0; }
.koopbalk-tekst b { font-family: var(--kop); font-weight: 400; text-transform: uppercase; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.koopbalk-tekst small { color: var(--grijs); font-size: 14px; }
.koopbalk-knop {
  margin-left: auto; flex: none; background: var(--geel); color: var(--zwart); font-family: var(--kop); text-transform: uppercase;
  font-size: 22px; line-height: 1; padding: 16px 22px 14px; border-radius: 12px; box-shadow: 0 4px 0 #b39500;
}
.koopbalk:hover .koopbalk-knop { transform: translateY(-1px); }
.koopbalk:focus-visible { outline: 3px solid var(--geel); outline-offset: 3px; }
@media (max-width: 560px) {
  .koopbalk { padding-left: 76px; gap: 10px; min-height: 70px; }
  .koopbalk-embleem { width: 70px; }
  .koopbalk-tekst b { font-size: 17px; }
  .koopbalk-tekst small { font-size: 12px; }
  .koopbalk-knop { font-size: 19px; padding: 14px 14px 12px; }
}
@media (max-width: 370px) { .koopbalk-tekst small { display: none; } }
@media (max-width: 900px) { .embleem-wrap { width: min(340px, 82%); margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .embleem-wrap .embleem, .embleem-wrap::after, .embleem-wrap::before, .koopbalk-embleem { animation: none !important; }
}
/* Groter embleem dat boven de balk uitsteekt */
.koopbalk { padding-left: 128px; min-height: 84px; }
.koopbalk-embleem { width: 116px; left: 4px; bottom: 4px; }
@media (max-width: 560px) {
  .cta-rij .knop { display: none; }
  .cta-rij { margin-top: 18px; }
  .koopbalk { padding-left: 104px; min-height: 80px; }
  .koopbalk-embleem { width: 96px; }
  .koopbalk-tekst b { font-size: 20px; }
}

/* ===== Animaties ===== */
/* Hero tekst stapsgewijs binnen */
.js .hero .slogan, .js .hero .elfelf, .js .hero .naam, .js .hero .stipt, .js .hero .label, .js .hero .cta-rij {
  opacity: 0; transform: translateY(26px); animation: omhoog .7s cubic-bezier(.2,.8,.2,1) forwards;
}
.js .hero .slogan { animation-delay: .05s; }
.js .hero .elfelf { animation-delay: .2s; }
.js .hero .naam { animation-delay: .35s; }
.js .hero .stipt { animation-delay: .5s; }
.js .hero .label { animation-delay: .65s; }
.js .hero .cta-rij { animation-delay: .8s; }
@keyframes omhoog { to { opacity: 1; transform: none; } }

/* Het bolletje in 11•11 knippert als een lampje */
.elfelf .bol { display: inline-block; animation: bol 1.6s ease-in-out infinite; }
@keyframes bol { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }

/* Prijsblok wiebelt af en toe */
.prijs { animation: prijs 4s ease-in-out 1.5s infinite; }
@keyframes prijs { 0%, 82%, 100% { transform: rotate(2deg); } 86% { transform: rotate(-3deg) scale(1.05); } 90% { transform: rotate(5deg) scale(1.05); } 94% { transform: rotate(0deg); } }

/* Vallende confetti in de hero */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-in { position: relative; z-index: 1; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; opacity: .75; animation: val linear infinite; }
@keyframes val { 0% { transform: translateY(-20px) rotate(0deg); } 100% { transform: translateY(110vh) rotate(720deg); } }

/* Worstenbroodjes langzaam inzoomen */
.foto { overflow: hidden; }
.foto img { animation: kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08) translateX(-2%); } }

/* Onthullen bij scrollen */
.js .onthul { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js .onthul.zichtbaar { opacity: 1; transform: none; }
.item:hover { transform: translateY(-4px); border-color: var(--geel); transition: transform .2s, border-color .2s; }
.fred img { transition: transform .4s; }
.fred img:hover { transform: rotate(-1.5deg) scale(1.02); }

@media (prefers-reduced-motion: reduce) {
  .js .onthul, .js .hero * { opacity: 1 !important; transform: none !important; }
  .confetti, .elfelf .bol, .prijs, .foto img { animation: none !important; }
  .confetti { display: none; }
}

/* Podium: Fred en DJ Lil Reine */
.fred .wrap > .label { margin: 0 0 14px; }
.podium { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; }
.artiest img { border: 4px solid var(--zwart); border-radius: 18px; width: 100%; aspect-ratio: 900 / 704; object-fit: cover; object-position: center 20%; box-shadow: 10px 10px 0 var(--rood); transition: transform .4s; }
.artiest:nth-child(2) img { box-shadow: 10px 10px 0 var(--zwart); }
.artiest:hover img { transform: rotate(-1.5deg) scale(1.02); }
.artiest h3.kop { font-size: clamp(36px, 5vw, 54px); margin-top: 22px; }
.artiest p { margin: 6px 0 0; font-size: 18px; }
@media (max-width: 700px) { .podium { grid-template-columns: 1fr; gap: 40px; } }