/* =========================================================
   Tattoo Event Steenwijk — fase 1
   Vintage tattoo-flash editorial · magenta #F048F8
   ========================================================= */

:root{
  --magenta:#f048f8;
  --magenta-deep:#c81fd6;
  --gold:#f0b000;
  --orange:#e08030;
  --navy:#2a3f63;
  --rose:#b5343a;
  --bone:#f4efe3;
  --bone-dim:#b9b2a3;
  --ink:#0c0910;
  --ink-2:#15101b;
  --ink-3:#1d1726;
  --line:rgba(244,239,227,.14);

  --ff-display:'Anton', system-ui, sans-serif;
  --ff-script:'Yellowtail', cursive;
  --ff-body:'Spectral', Georgia, serif;

  --maxw:1200px;
  --pad:clamp(20px,5vw,72px);
}

*{box-sizing:border-box;margin:0;padding:0}
/* Het hidden-attribuut moet altijd winnen. Zonder deze regel overschrijft elke
   class met een eigen `display` het (was zo bij .order-lines__row, .order-code en
   het fotoblok): dan bleef bijv. "Jouw ticketcode —" staan bij een onbetaalde order. */
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--ff-body);
  background:var(--ink);
  color:var(--bone);
  line-height:1.65;
  overflow-x:hidden;
  position:relative;
}
/* height:auto is nodig zodra een <img> width/height-attributen heeft: zonder deze regel
   schaalt max-width wel de breedte maar blijft de hoogte op het attribuut staan (uitgerekt beeld) */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ---- grain overlay ---- */
.grain{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---- shared section helpers ---- */
section{padding:clamp(64px,9vw,140px) var(--pad);position:relative}
.section-head{max-width:760px;margin:0 auto clamp(40px,6vw,72px);text-align:center}
.kicker{
  font-family:var(--ff-script);color:var(--magenta);
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1;margin-bottom:.4rem;
}
.section-title{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(2.6rem,7vw,5rem);line-height:.95;
  text-transform:uppercase;letter-spacing:.01em;
  /* lange samenstellingen ("Inschrijfformulier") breken netjes af met een koppelteken
     i.p.v. buiten beeld te lopen; overflow-wrap is de fallback */
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;
}
.section-title .ink{color:var(--magenta);-webkit-text-stroke:0;text-shadow:0 0 30px rgba(240,72,248,.5)}
.section-sub{margin-top:1.1rem;color:var(--bone-dim);font-size:1.05rem}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.06em;
  font-size:.95rem;padding:.95em 1.7em;border-radius:2px;
  border:2px solid transparent;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s,color .25s;
}
.btn--sm{font-size:.8rem;padding:.7em 1.3em}
.btn--solid{background:var(--magenta);color:#1a0420;box-shadow:0 0 0 rgba(240,72,248,0)}
.btn--solid:hover{transform:translateY(-3px);box-shadow:0 14px 36px -10px rgba(240,72,248,.7)}
/* background expliciet: op een <button> toont de browser anders zijn eigen
   lichtgrijze knop, met lichte tekst erop (onleesbaar). Op een <a> verandert er niets. */
.btn--outline{background:transparent;border-color:var(--bone);color:var(--bone)}
.btn--outline:hover{background:var(--bone);color:var(--ink);transform:translateY(-3px)}
.btn--ghost{border-color:var(--magenta);color:var(--magenta)}
.btn--ghost:hover{background:var(--magenta);color:#1a0420}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  /* op brede schermen de nav-inhoud uitlijnen met de content-container (max-width 1200px),
     anders staan merk en tickets-knop tot 500px buiten de rest van de pagina */
  padding:.85rem max(var(--pad), calc((100% - var(--maxw)) / 2));
  background:rgba(12,9,16,.65);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);transition:padding .3s,background .3s;
}
.nav.scrolled{background:rgba(12,9,16,.92);padding-top:.6rem;padding-bottom:.6rem}
.brand{display:flex;align-items:center;gap:.55rem}
.brand__mark{color:var(--magenta);font-size:1.2rem}
.brand__name{
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.04em;
  font-size:1.15rem;line-height:1;
}
.brand__name em{display:block;font-style:normal;color:var(--magenta);font-size:.72em;letter-spacing:.18em}
.nav__links{display:flex;gap:1.8rem}
.nav__links a{
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.05em;
  font-size:.82rem;color:var(--bone-dim);position:relative;padding:.2rem 0;transition:color .25s;
}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--magenta);transition:width .25s}
.nav__links a:hover{color:var(--bone)}
.nav__links a:hover::after{width:100%}
.nav__toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:0;cursor:pointer;padding:10px;min-width:44px;min-height:44px;margin-right:-10px}
.nav__toggle span{width:26px;height:2px;background:var(--bone);transition:.3s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{
  position:fixed;top:0;right:0;z-index:999;height:100dvh;width:min(80vw,320px);
  background:var(--ink-2);border-left:1px solid var(--line);
  display:flex;flex-direction:column;gap:.4rem;padding:6rem 2rem 2rem;
  transform:translateX(100%);visibility:hidden;
  transition:transform .35s cubic-bezier(.7,0,.2,1),visibility .35s;
}
.mobile-menu.open{transform:translateX(0);visibility:visible}
.mobile-menu a{display:block;font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.05em;font-size:1.1rem;padding:.85rem 0;min-height:44px;border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:1rem;border-bottom:0}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(110px,15vh,180px);padding-bottom:clamp(40px,6vw,72px);
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(42,63,99,.5), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(181,52,58,.22), transparent 55%),
    var(--ink);
  overflow:hidden;
}
.hero__glow{
  position:absolute;top:-10%;left:50%;transform:translateX(-50%);
  width:70vw;height:70vw;max-width:900px;max-height:900px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,72,248,.28),transparent 65%);
  filter:blur(20px);pointer-events:none;
}
.hero__inner{
  width:100%;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:center;
  position:relative;z-index:2;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--ff-body);font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone-dim);margin-bottom:1.2rem;
}
.eyebrow span{color:var(--magenta)}
.hero__title{
  font-family:var(--ff-display);font-weight:400;text-transform:uppercase;
  line-height:.82;letter-spacing:.005em;margin-bottom:.4rem;
}
.hero__title .line-top{display:block;font-size:clamp(3.2rem,11vw,8rem);color:var(--bone)}
.hero__title .line-mid{
  display:block;font-size:clamp(3.6rem,13vw,9.5rem);color:var(--magenta);
  text-shadow:0 0 40px rgba(240,72,248,.55),0 4px 0 var(--magenta-deep);
}
.hero__title .line-bot{display:block;font-size:clamp(2.4rem,7.4vw,5.4rem);color:var(--bone);letter-spacing:.06em}
.hero__dates{
  font-family:var(--ff-display);text-transform:uppercase;
  font-size:clamp(1.4rem,3.6vw,2.4rem);letter-spacing:.04em;color:var(--gold);margin:.4rem 0 1.1rem;
}
.hero__dates span{font-family:var(--ff-script);text-transform:none;color:var(--bone);font-size:1.05em}
.hero__lead{max-width:46ch;color:var(--bone-dim);font-size:1.1rem;margin-bottom:1.8rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem}

/* poster */
.hero__poster{justify-self:center}
.poster-frame{
  position:relative;padding:10px;border-radius:4px;max-width:340px;
  background:linear-gradient(160deg,var(--gold),var(--orange) 55%,var(--magenta-deep));
  box-shadow:0 30px 70px -20px rgba(0,0,0,.8),0 0 60px -20px rgba(240,72,248,.5);
  transform:rotate(-2.5deg);transition:transform .5s;
}
.poster-frame:hover{transform:rotate(0deg) scale(1.02)}
.poster-frame img{border-radius:2px}
.poster-frame::after{
  content:"EST. 2027";position:absolute;bottom:-14px;right:14px;
  font-family:var(--ff-display);font-size:.7rem;letter-spacing:.2em;
  background:var(--ink);color:var(--magenta);padding:.3rem .7rem;border:1px solid var(--magenta);border-radius:2px;
}

/* countdown */
.countdown{
  position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:clamp(40px,6vw,72px) auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;
}
.cd{background:var(--ink-2);padding:1.4rem 1rem;text-align:center}
.cd__num{display:block;font-family:var(--ff-display);font-size:clamp(2rem,5vw,3.2rem);line-height:1;color:var(--magenta)}
.cd__lbl{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}

/* =========================================================
   FACTS STRIP
   ========================================================= */
.facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  padding:0 var(--pad);max-width:var(--maxw);margin:0 auto;
  border-block:1px solid var(--line);
}
.fact{padding:1.8rem 1.4rem;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:.3rem}
.fact:first-child{border-left:0}
.fact__k{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--magenta)}
.fact__v{font-size:1.05rem;color:var(--bone)}

/* =========================================================
   OVER HET EVENT
   ========================================================= */
.event__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.event__lead .drop{font-size:1.3rem;color:var(--bone);margin-bottom:1.2rem}
.event__lead .drop::first-letter{
  font-family:var(--ff-display);float:left;font-size:3.6rem;line-height:.8;
  color:var(--magenta);padding:.05em .12em 0 0;
}
.event__lead p{color:var(--bone-dim)}
.event__stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.stat{background:var(--ink-2);padding:1.6rem 1.2rem;text-align:center}
.stat__n{display:block;font-family:var(--ff-display);font-size:clamp(1.5rem,4vw,2.8rem);color:var(--gold);line-height:1;overflow-wrap:anywhere}
.stat__l{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-dim)}
/* 4-koloms variant — als klasse i.p.v. inline style, anders overrulet de inline
   declaratie de responsive breakpoints hieronder en wordt de tekst afgekapt */
.event__stats--4{max-width:920px;margin-inline:auto;grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){.event__stats--4{grid-template-columns:repeat(2,1fr)}}
/* onder 480px pakt de generieke .event__stats-regel in de RESPONSIVE-sectie het over (ook 2 kolommen) */

/* =========================================================
   CONTEST — tickets
   ========================================================= */
.contest{background:linear-gradient(180deg,var(--ink),var(--ink-2))}
.contest__grid{max-width:920px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px)}
.ticket{
  position:relative;background:var(--ink-3);border:1px solid var(--line);border-radius:6px;
  padding:2rem 2rem 3.4rem;overflow:hidden;
}
.ticket::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(var(--magenta),var(--magenta-deep))}
/* perforation circles */
.ticket::after{content:"";position:absolute;left:-9px;top:50%;width:18px;height:18px;border-radius:50%;background:var(--ink);transform:translateY(-50%)}
.ticket__head{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:1rem;border-bottom:1px dashed var(--line);margin-bottom:1.2rem}
.ticket__day{font-family:var(--ff-display);text-transform:uppercase;font-size:1.8rem;letter-spacing:.03em;color:var(--bone)}
.ticket__date{font-family:var(--ff-script);color:var(--magenta);font-size:1.5rem}
.ticket__list li{padding:.55rem 0;border-bottom:1px solid var(--line);font-size:1.05rem;display:flex;align-items:center;gap:.7rem}
.ticket__list li::before{content:"✶";color:var(--magenta);font-size:.85rem}
.ticket__list li:last-child{border-bottom:0}
.ticket__perf{position:absolute;bottom:1.1rem;left:2rem;font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--gold)}

/* =========================================================
   LINE-UP
   ========================================================= */
.lineup__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)}
.artist-card{aspect-ratio:3/4;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;padding:1.2rem}
.artist-card--ph{background:var(--ink-2);border:1px dashed var(--line);color:var(--bone-dim)}
.artist-card--ph span{font-family:var(--ff-display);font-size:3rem;color:var(--line)}
.artist-card--ph p{font-size:.9rem}
.artist-card--cta{background:linear-gradient(160deg,var(--magenta),var(--magenta-deep));color:#1a0420}
.artist-card__cta-k{font-family:var(--ff-script);font-size:1.5rem}
.artist-card__cta-t{font-family:var(--ff-display);text-transform:uppercase;font-size:1.15rem;line-height:1.05;margin-bottom:.4rem}
.artist-card--cta .btn--solid{background:#1a0420;color:var(--magenta)}
.artist-card--cta .btn--solid:hover{background:#000}

/* =========================================================
   PRAKTISCH
   ========================================================= */
.praktisch{background:var(--ink-2)}
.praktisch__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,56px)}
.info-col h3{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.04em;font-size:1.3rem;color:var(--magenta);margin:1.6rem 0 .9rem}
.info-col h3:first-child{margin-top:0}
.info-col p{color:var(--bone-dim)}
.schedule{width:100%;border-collapse:collapse}
.schedule td{padding:.7rem 0;border-bottom:1px solid var(--line)}
.schedule td:last-child{text-align:right;font-family:var(--ff-display);letter-spacing:.04em;color:var(--gold)}
.venue{font-style:normal;font-size:1.15rem;line-height:1.7;margin-bottom:.6rem}
.venue strong{color:var(--magenta)}
.venue__note{color:var(--bone-dim);margin-bottom:1.2rem}
.map-frame{border:1px solid var(--line);border-radius:6px;overflow:hidden;aspect-ratio:16/10}
.map-frame iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05)}

/* =========================================================
   STANDHOUDERS / PRICES
   ========================================================= */
.prices{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(16px,2.5vw,28px);align-items:stretch}
.prices--2{grid-template-columns:1fr 1fr}
.prices + .prices__group-h{margin-top:clamp(40px,6vw,64px)}
.prices__group-h{max-width:var(--maxw);margin:0 auto clamp(16px,2vw,24px);font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.08em;font-size:1.05rem;color:var(--gold)}
.price-extras--full{grid-column:1/-1}
.price{background:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:2rem 1.6rem;display:flex;flex-direction:column;gap:.4rem;justify-content:center}
.price--feat{border-color:var(--magenta);box-shadow:0 0 40px -16px rgba(240,72,248,.55);position:relative}
.price--feat::before{content:"Populair";position:absolute;top:-12px;left:1.6rem;background:var(--magenta);color:#1a0420;font-family:var(--ff-display);text-transform:uppercase;font-size:.7rem;letter-spacing:.1em;padding:.25rem .7rem;border-radius:2px}
.price__size{font-family:var(--ff-display);font-size:2rem;letter-spacing:.02em;color:var(--bone)}
.price__inc{color:var(--bone-dim);font-size:.95rem}
.price__amt{font-family:var(--ff-display);font-size:2.4rem;color:var(--magenta);margin-top:.4rem}
.price-extras{background:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:2rem 1.6rem}
.price-extras__h{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;color:var(--gold);margin-bottom:1rem}
.price-extras ul li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);color:var(--bone-dim)}
.price-extras ul li:last-child{border-bottom:0}
.price-extras ul li span:last-child{font-family:var(--ff-display);color:var(--bone);text-align:right}
.price-extras ul li span:last-child a{color:var(--magenta)}
/* ---- foto-upload artiesten ---- */
.fotos{border-top:1px solid var(--line);padding-top:1.4rem;margin-top:.4rem}
.fotos__kop{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.06em;
  font-size:1rem;color:var(--gold);margin-bottom:.4rem}
.fotos__uitleg{color:var(--bone-dim);font-size:.92rem;margin-bottom:1.2rem;max-width:58ch}
.fotos__veld{margin-bottom:1.2rem}
.fotos__veld label{display:block;margin-bottom:.45rem;font-size:.9rem;color:var(--bone);
  text-transform:uppercase;letter-spacing:.06em;font-family:var(--ff-display)}
.fotos input[type=file]{width:100%;color:var(--bone-dim);font-size:.9rem;
  background:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:.7rem}
.fotos input[type=file]::file-selector-button{
  background:var(--ink-2);color:var(--bone);border:1px solid var(--line);border-radius:4px;
  padding:.4rem .9rem;margin-right:.9rem;cursor:pointer;font-family:var(--ff-display);
  text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}
.fotos input[type=file]::file-selector-button:hover{border-color:var(--magenta);color:var(--magenta)}
.fotos__hint{color:var(--bone-dim);font-size:.82rem;margin-top:.4rem}
.fotos__hint.fout{color:#f0556a}
/* Eén blok per artiest bij een artiestenstand (standhouders.html). min-width:0
   omdat een fieldset standaard niet smaller wil worden dan zijn inhoud — dat
   gaf op een telefoon een horizontale scrollbalk. */
.artiest{min-width:0;min-inline-size:0;margin:0 0 1rem;padding:1.1rem 1.1rem .2rem;
  border:1px solid var(--line);border-radius:6px;background:rgba(244,239,227,.02)}
.artiest legend{padding:0 .5rem;font-family:var(--ff-display);text-transform:uppercase;
  letter-spacing:.06em;font-size:.95rem;color:var(--magenta)}
.artiest .form-grid{margin-bottom:1.1rem}
/* Veld dat nog niet klopt — script.js zet dit bij versturen en haalt het weg
   zodra het veld goed is. */
.field input.is-fout,.field select.is-fout,.field textarea.is-fout{
  border-color:#f0556a;box-shadow:0 0 0 3px rgba(240,85,106,.18)}
.consent input.is-fout{outline:2px solid #f0556a;outline-offset:2px}
/* Bevestiging na een geslaagde aanmelding: vervangt het formulier. */
.form-klaar{text-align:center;border-color:var(--magenta);box-shadow:0 0 50px -18px rgba(240,72,248,.55)}
.form-klaar:focus{outline:none}
.form-klaar__extra{margin-top:.8rem;color:var(--bone)}

/* ---- ticketbestelling ---- */
.order-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin:1.6rem 0 1.2rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.06em;color:var(--bone-dim)}
.order-total strong{font-size:2rem;color:var(--magenta);letter-spacing:0}

/* Uitsplitsing boven het totaal (aanmeldformulier standhouders/artiesten).
   Zit direct bóven .order-total, dus die houdt zijn eigen scheidingslijn. */
.order-lines{margin-top:1.6rem;display:flex;flex-direction:column;gap:.5rem}
.order-lines__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-size:.92rem;color:var(--bone-dim)}
.order-lines__row span:last-child{color:var(--bone);white-space:nowrap}
.order-lines__x{color:var(--bone-dim);font-size:.85rem}
.order-lines + .order-total{margin-top:.9rem}
.order-result{max-width:var(--maxw);margin:0 auto clamp(24px,4vw,40px)}
.order-result__inner{background:var(--ink-3);border:1px solid var(--line);border-radius:6px;
  padding:clamp(24px,4vw,44px);text-align:center}
.order-result--ok .order-result__inner{border-color:var(--magenta);box-shadow:0 0 50px -18px rgba(240,72,248,.55)}
.order-result__icon{font-family:var(--ff-display);font-size:2.6rem;line-height:1;color:var(--magenta);margin-bottom:.6rem}
.order-result__title{font-family:var(--ff-display);font-size:clamp(1.6rem,3.4vw,2.4rem);
  text-transform:uppercase;color:var(--bone);margin-bottom:.6rem}
.order-result__text{color:var(--bone-dim);max-width:52ch;margin:0 auto}
.order-result__text a{color:var(--magenta)}
.order-code{display:inline-flex;flex-direction:column;gap:.4rem;margin-top:1.6rem;
  padding:1rem 1.8rem;background:var(--ink-2);border:1px dashed var(--magenta);border-radius:6px}
.order-code__label{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--bone-dim)}
.order-code__value{font-family:var(--ff-display);font-size:clamp(1.5rem,4vw,2.2rem);
  letter-spacing:.08em;color:var(--magenta);word-break:break-all}

.standhouders__cta{text-align:center;margin-top:clamp(32px,5vw,48px)}
.micro{font-size:.85rem;color:var(--bone-dim);margin-top:1rem}
.micro a{color:var(--magenta)}

/* =========================================================
   TICKETS
   ========================================================= */
.tickets{padding-block:clamp(48px,7vw,90px)}
.tickets__panel{
  max-width:var(--maxw);margin:0 auto;text-align:center;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(240,72,248,.18), transparent 60%),
    linear-gradient(160deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--magenta);border-radius:10px;
  padding:clamp(40px,6vw,72px) var(--pad);
  box-shadow:0 0 70px -30px rgba(240,72,248,.6);
}
.tickets__title{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(2rem,6vw,4rem);line-height:.95;margin:.4rem 0 1rem}
.tickets__panel p{color:var(--bone-dim);max-width:48ch;margin:0 auto}
.notify{display:flex;gap:.6rem;max-width:480px;margin:1.6rem auto .8rem;flex-wrap:wrap}
.notify input{
  flex:1;min-width:200px;background:var(--ink);border:1px solid var(--line);border-radius:3px;
  color:var(--bone);font-family:var(--ff-body);font-size:1rem;padding:.95em 1.2em;
}
.notify input:focus{outline:none;border-color:var(--magenta)}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--ink-2);border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) var(--pad) 2rem}
.footer__top{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.2fr 2fr;gap:clamp(32px,5vw,56px)}
.footer__brand p{color:var(--bone-dim);margin-top:.6rem;font-size:.95rem}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.footer__col h4{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;color:var(--magenta);margin-bottom:.9rem}
.footer__col a,.footer__col span{display:block;color:var(--bone-dim);font-size:.95rem;padding:.18rem 0;transition:color .2s}
.footer__col a:hover{color:var(--magenta)}
.socials a{display:inline-block;margin-right:1rem}
.footer__bottom{max-width:var(--maxw);margin:clamp(32px,5vw,48px) auto 0;padding-top:1.4rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-size:.85rem;color:var(--bone-dim)}
.footer__credit a{color:var(--magenta)}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  /* decoratieve animaties uitschakelen */
  .marquee__track,.page-hero__glow,.floaties span,.ph-media::after{animation:none}
  .btn:hover::before{animation:none}
  .page-hero .breadcrumb,.page-hero__script,.page-hero__title,.page-hero__sub{
    animation:none;opacity:1;transform:none;
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:flex}
  .hero__inner{grid-template-columns:1fr;text-align:center}
  .hero__copy{order:2}
  .hero__poster{order:1;margin-bottom:1rem}
  .poster-frame{max-width:260px}
  .eyebrow,.hero__actions{justify-content:center}
  .hero__lead{margin-inline:auto}
  .event__grid,.praktisch__grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
}
@media (max-width:760px){
  .facts{grid-template-columns:1fr 1fr}
  .fact:nth-child(3){border-left:0}
  .fact:nth-child(odd){border-left:0}
  .fact:nth-child(n+3){border-top:1px solid var(--line)}
  .contest__grid{grid-template-columns:1fr}
  .lineup__grid{grid-template-columns:1fr 1fr}
  .prices{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .countdown{grid-template-columns:1fr 1fr}
  .cd:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .event__stats{grid-template-columns:1fr 1fr}
  .lineup__grid{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column}
}

/* =========================================================
   MULTI-PAGE — active nav state
   ========================================================= */
.nav__links a.active,.nav__links a[aria-current="page"]{color:var(--bone)}
.nav__links a.active::after,.nav__links a[aria-current="page"]::after{width:100%}
.mobile-menu a.active,.mobile-menu a[aria-current="page"]{color:var(--magenta)}

/* =========================================================
   BUTTON SHIMMER (animatie op alle pagina's)
   ========================================================= */
.btn{position:relative;overflow:hidden}
.btn::before{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:none;pointer-events:none;
}
.btn:hover::before{animation:shimmerSweep .9s ease}
@keyframes shimmerSweep{from{left:-120%}to{left:140%}}

/* =========================================================
   MARQUEE / TICKER STRIP
   ========================================================= */
.marquee{
  border-block:1px solid var(--line);background:var(--ink-2);
  overflow:hidden;white-space:nowrap;padding:0;
}
.marquee__track{
  display:inline-flex;align-items:center;gap:2.5rem;padding:.9rem 0;
  will-change:transform;animation:marquee 26s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.14em;
  font-size:1.1rem;color:var(--bone-dim);
}
.marquee__track span::after{content:"✶";color:var(--magenta);margin-left:2.5rem}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================
   PAGE HERO (subpagina's)
   ========================================================= */
.page-hero{
  position:relative;overflow:hidden;
  padding:clamp(130px,18vh,200px) var(--pad) clamp(56px,8vw,96px);
  background:
    radial-gradient(120% 120% at 80% -20%, rgba(42,63,99,.45), transparent 60%),
    radial-gradient(80% 80% at 0% 120%, rgba(181,52,58,.22), transparent 55%),
    var(--ink);
  text-align:center;
}
.page-hero__glow{
  position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:60vw;height:60vw;max-width:760px;max-height:760px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,72,248,.22),transparent 65%);
  filter:blur(16px);pointer-events:none;animation:glowPulse 7s ease-in-out infinite;
}
.page-hero__inner{position:relative;z-index:2;max-width:820px;margin:0 auto}
.breadcrumb{
  display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.72rem;color:var(--bone-dim);margin-bottom:1.4rem;
}
.breadcrumb a{display:inline-block;padding:.5rem .25rem;margin:-.5rem -.25rem;color:var(--bone-dim);transition:color .2s}
.breadcrumb a:hover{color:var(--magenta)}
.breadcrumb span{color:var(--magenta)}
.page-hero__title{
  font-family:var(--ff-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.8rem,9vw,6rem);line-height:.9;letter-spacing:.01em;
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;
}
.page-hero__title .ink{color:var(--magenta);text-shadow:0 0 34px rgba(240,72,248,.5)}
.page-hero__sub{margin:1.2rem auto 0;max-width:56ch;color:var(--bone-dim);font-size:1.1rem}
.page-hero__script{font-family:var(--ff-script);color:var(--magenta);font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1;margin-bottom:.3rem}

@keyframes glowPulse{
  0%,100%{opacity:.6;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.12)}
}

/* page load fade-in (subtiel, op page-hero inhoud) */
.page-hero .breadcrumb,.page-hero__script,.page-hero__title,.page-hero__sub{
  opacity:0;transform:translateY(18px);animation:pageIn .8s cubic-bezier(.2,.7,.2,1) forwards;
}
.page-hero__script{animation-delay:.05s}
.page-hero__title{animation-delay:.15s}
.page-hero__sub{animation-delay:.3s}
@keyframes pageIn{to{opacity:1;transform:none}}

/* =========================================================
   FLOATING DECORATIES (zwevende sterren)
   ========================================================= */
.floaties{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.floaties span{
  position:absolute;color:var(--magenta);opacity:.18;font-size:1.4rem;
  animation:floatY 9s ease-in-out infinite;
}
.floaties span:nth-child(1){left:8%;top:30%;animation-delay:0s;font-size:1rem}
.floaties span:nth-child(2){left:88%;top:22%;animation-delay:1.5s;font-size:1.8rem;color:var(--gold)}
.floaties span:nth-child(3){left:18%;top:70%;animation-delay:3s}
.floaties span:nth-child(4){left:78%;top:66%;animation-delay:4.5s;color:var(--gold)}
.floaties span:nth-child(5){left:50%;top:14%;animation-delay:2.2s;font-size:.9rem}
@keyframes floatY{
  0%,100%{transform:translateY(0) rotate(0);opacity:.12}
  50%{transform:translateY(-22px) rotate(20deg);opacity:.28}
}

/* =========================================================
   PLACEHOLDER MEDIA + SHIMMER SKELETON
   ========================================================= */
.ph-media{
  position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:var(--ink-2);
}
.ph-media img{width:100%;height:100%;object-fit:cover;display:block}
.ph-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(240,72,248,.08) 50%,transparent 70%);
  background-size:200% 100%;animation:shimmer 2.4s linear infinite;
}
.ph-tag{
  position:absolute;top:.7rem;left:.7rem;z-index:2;
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;
  color:var(--magenta);background:rgba(12,9,16,.8);border:1px solid var(--magenta);
  padding:.25rem .55rem;border-radius:2px;
}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* =========================================================
   GALLERIJ (event-pagina)
   ========================================================= */
.gallery{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,20px)}
.gallery .ph-media{aspect-ratio:4/3;transition:transform .4s,box-shadow .4s}
.gallery .ph-media:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 22px 50px -22px rgba(240,72,248,.5)}
.gallery .ph-media--tall{grid-row:span 2;aspect-ratio:auto}
@media (max-width:760px){.gallery{grid-template-columns:1fr 1fr}.gallery .ph-media--tall{grid-row:span 1}}
@media (max-width:480px){.gallery{grid-template-columns:1fr}}

/* Echte foto's (geen SVG-placeholder) zijn uitvergrootbaar via de lightbox hieronder */
.ph-media:has(img){cursor:zoom-in}

/* =========================================================
   LIGHTBOX (foto uitvergroten — sfeerbeelden)
   ========================================================= */
.lightbox{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;padding:clamp(16px,5vw,48px);
  background:rgba(6,4,9,.94);
  opacity:0;visibility:hidden;transition:opacity .25s ease;
}
.lightbox.open{opacity:1;visibility:visible}
.lightbox__img{
  max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain;
  border-radius:6px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  border:1px solid var(--line);
  transform:scale(.96);transition:transform .25s ease;
}
.lightbox.open .lightbox__img{transform:scale(1)}
.lightbox__close{
  position:absolute;top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px);
  width:44px;height:44px;border-radius:50%;
  background:rgba(12,9,16,.8);border:1px solid var(--line);color:var(--bone);
  font-family:var(--ff-display);font-size:1.1rem;line-height:1;cursor:pointer;
}
.lightbox__close:hover{border-color:var(--magenta);color:var(--magenta)}
@media (prefers-reduced-motion:reduce){.lightbox,.lightbox__img{transition:none}}

/* =========================================================
   PROSE / TEKSTBLOK (subpagina's)
   ========================================================= */
.prose{max-width:760px;margin:0 auto}
.prose p{color:var(--bone-dim);margin-bottom:1.1rem}
.prose p strong{color:var(--bone)}
.prose h3{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.03em;font-size:1.5rem;color:var(--magenta);margin:2rem 0 .8rem}
.prose ul{margin:0 0 1.1rem;padding:0}
.prose ul li{position:relative;list-style:none;padding-left:1.4rem;color:var(--bone-dim);margin-bottom:.6rem}
.prose ul li::before{content:'✶';position:absolute;left:0;color:var(--magenta);font-size:.85em}
.prose ul li strong{color:var(--bone)}
.lead-row{max-width:var(--maxw);margin:0 auto clamp(40px,6vw,64px);display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,5vw,56px);align-items:center}
@media (max-width:880px){.lead-row{grid-template-columns:1fr}}

/* =========================================================
   CONTEST DETAIL (contest-pagina)
   ========================================================= */
.cat-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.cat-card{
  background:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:1.6rem 1.4rem;
  position:relative;overflow:hidden;transition:transform .35s,border-color .35s;
}
.cat-card::before{content:"";position:absolute;left:0;top:0;height:100%;width:4px;background:linear-gradient(var(--magenta),var(--magenta-deep));transform:scaleY(0);transform-origin:top;transition:transform .35s}
.cat-card:hover{transform:translateY(-5px);border-color:var(--magenta)}
.cat-card:hover::before{transform:scaleY(1)}
.cat-card__num{font-family:var(--ff-script);color:var(--gold);font-size:1.4rem;line-height:1}
.cat-card__name{font-family:var(--ff-display);text-transform:uppercase;font-size:1.4rem;color:var(--bone);margin:.2rem 0 .5rem;line-height:1.05}
.cat-card__desc{color:var(--bone-dim);font-size:.95rem}
@media (max-width:760px){.cat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.cat-grid{grid-template-columns:1fr}}
/* 2-koloms variant — als klasse i.p.v. inline style, zie .event__stats--4 */
.cat-grid--2{grid-template-columns:repeat(2,1fr);max-width:880px}
@media (max-width:760px){.cat-grid--2{grid-template-columns:1fr}}

.day-block{max-width:var(--maxw);margin:0 auto clamp(40px,6vw,72px)}
.day-block__head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.6rem;padding-bottom:.9rem;border-bottom:1px dashed var(--line)}
.day-block__day{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(1.8rem,4vw,2.6rem);color:var(--bone)}
.day-block__date{font-family:var(--ff-script);color:var(--magenta);font-size:1.6rem}

/* =========================================================
   ARTIESTEN met portret-placeholders
   ========================================================= */
.artist-card--ph.has-photo{padding:0;overflow:hidden;border-style:solid;position:relative}
.artist-card--ph.has-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.05)}
.artist-card--ph.has-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 55%,rgba(12,9,16,.85));
}
.artist-card__meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1rem;text-align:left}
.artist-card__meta .nm{font-family:var(--ff-display);text-transform:uppercase;font-size:1.05rem;color:var(--bone);line-height:1}
.artist-card__meta .ds{font-size:.8rem;color:var(--magenta)}

/* =========================================================
   FORMULIER (contact / aanmelding placeholder)
   ========================================================= */
.form-card{
  max-width:680px;margin:0 auto;background:var(--ink-2);border:1px solid var(--line);
  border-radius:10px;padding:clamp(28px,5vw,48px);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.06em;font-size:.74rem;color:var(--magenta)}
.field input,.field select,.field textarea{
  background:var(--ink);border:1px solid var(--line);border-radius:3px;color:var(--bone);
  font-family:var(--ff-body);font-size:1rem;padding:.85em 1em;transition:border-color .25s,box-shadow .25s;
  width:100%;min-width:0;max-width:100%;
}
.field select{text-overflow:ellipsis}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 3px rgba(240,72,248,.15)}
.form-card .btn{margin-top:1.4rem;width:100%}
.form-note{font-size:.85rem;color:var(--bone-dim);margin-top:1rem;text-align:center}
/* Akkoord met de algemene voorwaarden, boven de betaal-/verstuurknop */
.consent{display:flex;align-items:flex-start;gap:.7rem;margin-top:1.4rem;font-size:.9rem;color:var(--bone-dim);cursor:pointer;text-align:left}
.consent input{flex:none;width:1.15rem;height:1.15rem;margin-top:.2rem;accent-color:var(--magenta);cursor:pointer}
.consent a{color:var(--magenta)}
@media (max-width:600px){.form-grid{grid-template-columns:1fr}}

/* =========================================================
   CONTACT-KAARTEN
   ========================================================= */
.contact-cards{max-width:var(--maxw);margin:0 auto clamp(40px,6vw,64px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,24px)}
.contact-card{
  background:var(--ink-2);border:1px solid var(--line);border-radius:8px;padding:2rem 1.6rem;text-align:center;
  transition:transform .35s,border-color .35s,box-shadow .35s;
}
.contact-card:hover{transform:translateY(-6px);border-color:var(--magenta);box-shadow:0 20px 46px -24px rgba(240,72,248,.5)}
.contact-card__icon{font-size:1.8rem;color:var(--magenta);margin-bottom:.6rem}
.contact-card h3{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.04em;font-size:1.1rem;margin-bottom:.5rem}
.contact-card a,.contact-card p{color:var(--bone-dim);font-size:.98rem}
.contact-card a:hover{color:var(--magenta)}
@media (max-width:760px){.contact-cards{grid-template-columns:1fr}}

/* =========================================================
   FAQ ACCORDION (praktisch)
   ========================================================= */
.faq{max-width:760px;margin:0 auto}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;color:var(--bone);
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.03em;font-size:1.1rem;
  padding:1.2rem 2.4rem 1.2rem 0;position:relative;
}
.faq__q::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);color:var(--magenta);font-size:1.6rem;transition:transform .3s}
.faq__item.open .faq__q::after{transform:translateY(-50%) rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s ease;color:var(--bone-dim)}
.faq__a p{padding:0 0 1.2rem}
.faq__item.open .faq__a{max-height:520px}

/* =========================================================
   CTA-BANNER (herbruikbaar onderaan pagina's)
   ========================================================= */
.cta-banner{
  max-width:var(--maxw);margin:0 auto;text-align:center;
  background:radial-gradient(80% 120% at 50% 0%, rgba(240,72,248,.16), transparent 60%),linear-gradient(160deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--magenta);border-radius:10px;padding:clamp(36px,6vw,64px) var(--pad);
  box-shadow:0 0 70px -34px rgba(240,72,248,.6);
}
.cta-banner__k{font-family:var(--ff-script);color:var(--magenta);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1}
.cta-banner__t{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(1.8rem,5vw,3.2rem);line-height:.95;margin:.2rem 0 1.2rem}
.cta-banner__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* =========================================================
   COUNT-UP stat helper (animatie op stats)
   ========================================================= */
.stat__n[data-count]{font-variant-numeric:tabular-nums}

/* =========================================================
   TAALSWITCHER (NL / EN)
   ========================================================= */
.nav__cta{display:flex;align-items:center;gap:.7rem}
.lang-switch{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.lang-btn{
  background:none;border:0;cursor:pointer;
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.06em;
  font-size:.72rem;color:var(--bone-dim);padding:.5em .72em;line-height:1;
  transition:background .2s,color .2s;
}
.lang-btn+.lang-btn{border-left:1px solid var(--line)}
.lang-btn.active{background:var(--magenta);color:#1a0420}
.lang-btn:hover:not(.active){color:var(--bone)}
.mobile-menu .lang-switch{align-self:flex-start;margin-top:1.2rem}
.mobile-menu .lang-btn{font-size:.85rem;padding:.55em .9em}
/* nav__cta (taalswitch + Tickets) hoort op mobiel verborgen — staat in mobiel menu */
@media (max-width:980px){.nav__cta{display:none}}

/* =========================================================
   TOETSENBORD-FOCUS (a11y)
   ========================================================= */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--magenta);outline-offset:2px;border-radius:2px;
}

/* ---- formulier-statusmelding (fase 1: mailto-opsteller) ---- */
.form-status{
  grid-column:1/-1;
  margin:.9rem 0 0;
  padding:.75rem .9rem;
  border-left:3px solid var(--magenta);
  background:rgba(240,72,248,.08);
  color:var(--bone);
  font-size:.9rem;
  line-height:1.5;
}
.form-status a{color:var(--magenta);text-decoration:underline}
.form-status--fout{border-left-color:#f0556a;background:rgba(240,85,106,.1)}

/* =========================================================
   LINE-UP — kaarten uit de database (lineup.js)
   =========================================================
   Shopnaam en naam staan bóven de foto en niet eroverheen, zodat ze op
   elke foto leesbaar zijn. Daaronder volgen het portret en een strook met
   werk (feedback Lübeck, 06-10-2026). Drie kolommen in plaats van vier,
   anders wordt alles te klein. Een lege line-up houdt de
   placeholder-kaarten van hierboven. */
.lineup__grid--live{grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.lineup-card{
  display:flex;flex-direction:column;min-width:0;
  background:var(--ink-2);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  transition:border-color .3s,box-shadow .3s;
}
.lineup-card:hover{border-color:rgba(240,72,248,.45);box-shadow:0 22px 50px -26px rgba(240,72,248,.45)}
.lineup-card__head{padding:1.1rem 1.25rem 1rem}
.lineup-card__shop{
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.08em;
  font-size:1rem;line-height:1.2;color:var(--magenta);overflow-wrap:anywhere;
}
.lineup-card__name{
  font-family:var(--ff-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.6rem,2.4vw,2rem);line-height:1.05;color:var(--bone);margin-top:.2rem;
  overflow-wrap:anywhere;
}
.lineup-card__style{font-style:italic;color:var(--bone-dim);font-size:1rem;line-height:1.4;margin-top:.35rem}

.lineup-card__foto,.lineup-card__duim{
  display:block;width:100%;padding:0;margin:0;border:0;border-radius:0;
  background:var(--ink-3);overflow:hidden;cursor:zoom-in;
}
.lineup-card__foto{aspect-ratio:4/5}
.lineup-card__foto--leeg{cursor:default}
.lineup-card__duim{position:relative;aspect-ratio:1}
.lineup-card__foto img,.lineup-card__duim img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
/* Portretten hebben het gezicht meestal in het bovenste deel */
.lineup-card__foto img{object-position:50% 30%}
.lineup-card__foto:hover img,.lineup-card__duim:hover img{transform:scale(1.04)}
/* De kaart knipt met overflow:hidden; zonder dit valt de focusrand er half af */
.lineup-card__foto:focus-visible,.lineup-card__duim:focus-visible{outline-offset:-3px}
.lineup-card__werk{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding-top:3px}
.lineup-card__meer{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(12,9,16,.6);color:var(--bone);
  font-family:var(--ff-display);font-size:1.7rem;letter-spacing:.02em;
}
.lineup-card__links{display:flex;flex-wrap:wrap;gap:8px;padding:1rem 1.25rem 1.25rem;margin-top:auto}
.lineup-card__links a{
  display:inline-flex;align-items:center;min-height:40px;padding:.5em 1em;
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;
  border:1px solid var(--line);border-radius:2px;color:var(--bone);
  transition:border-color .2s,color .2s;
}
.lineup-card__links a:hover{border-color:var(--magenta);color:var(--magenta)}

/* Naast elkaar staan de foto's op één lijn, ook als de ene kaart een stijl
   heeft en de andere niet, of als een lange naam over twee regels loopt:
   elke kaart beslaat vier rijen van het raster en deelt die met zijn buren. */
@supports (grid-template-rows:subgrid){
  .lineup__grid--live > *{grid-row:span 4}
  .lineup-card{display:grid;grid-template-rows:subgrid;row-gap:0}
  .lineup-card__head{grid-row:1}
  .lineup-card__foto{grid-row:2}
  .lineup-card__werk{grid-row:3;align-self:start}
  /* Alleen in de line-up-kaart: in een standhouder- of actkaart (flex) zou align-self:end de knoppen naar rechts duwen. */
  .lineup-card .lineup-card__links{grid-row:4;align-self:end}
}

/* De aanmeld-kaart naast echte kaarten. Staat hij alleen op een rij, dan
   wordt het een brede balk in plaats van een los vlak met leegte ernaast. */
.lineup__grid--live .artist-card--cta{aspect-ratio:auto;min-height:280px}
@media (min-width:981px){
  .lineup__grid--live .artist-card--cta:nth-child(3n+1){
    grid-column:1/-1;min-height:0;flex-direction:row;flex-wrap:wrap;column-gap:1.6rem;padding:1.8rem 2rem;
  }
}
@media (max-width:980px) and (min-width:601px){
  .lineup__grid--live{grid-template-columns:1fr 1fr}
  .lineup__grid--live .artist-card--cta:nth-child(2n+1){
    grid-column:1/-1;min-height:0;flex-direction:row;flex-wrap:wrap;column-gap:1.6rem;padding:1.8rem 2rem;
  }
}
@media (max-width:600px){
  .lineup__grid--live{grid-template-columns:1fr;max-width:480px}
  .lineup__grid--live .artist-card--cta{min-height:0;padding:2rem 1.25rem}
}

/* ---- lightbox met alle foto's van één artiest (lineup.js) ---- */
.lightbox__fig{display:flex;flex-direction:column;align-items:center;gap:.9rem;margin:0;max-width:100%}
.lightbox--galerij .lightbox__img{max-width:min(88vw,1100px);max-height:calc(100vh - 9rem);max-height:calc(100dvh - 9rem)}
.lightbox__cap{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.4rem 1rem;
  text-align:center;color:var(--bone);
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;line-height:1.3;
}
.lightbox__teller{color:var(--magenta)}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(12,9,16,.8);border:1px solid var(--line);color:var(--bone);
  font-size:2rem;line-height:1;cursor:pointer;
}
.lightbox__nav span{margin-top:-.15em}
.lightbox__nav--vorige{left:clamp(8px,2vw,28px)}
.lightbox__nav--volgende{right:clamp(8px,2vw,28px)}
.lightbox__nav:hover{border-color:var(--magenta);color:var(--magenta)}
/* Op een telefoon onderaan, zodat de pijlen niet over de foto vallen (vegen kan ook) */
@media (max-width:600px){
  .lightbox__nav{top:auto;bottom:16px;transform:none}
  .lightbox--galerij .lightbox__img{max-height:calc(100vh - 13rem);max-height:calc(100dvh - 13rem)}
}
@media (prefers-reduced-motion:reduce){
  .lineup-card__foto img,.lineup-card__duim img{transition:none}
  .lineup-card__foto:hover img,.lineup-card__duim:hover img{transform:none}
}

@media (hover:none){
  /* touch-doelen op ~44px brengen (Apple/Google-richtlijn) — alleen op touch,
     zodat de footer op desktop compact blijft */
  .footer__col a{padding:.62rem 0;min-height:44px}
  .socials a{padding:.62rem 0;min-height:44px}
  .brand{padding:.35rem 0;min-height:44px}
}

/* =========================================================
   STANDHOUDERS — op de site (bovenaan standhouders.html) en de
   extra velden in het aanmeldformulier (11-10-2026)
   =========================================================
   Wie er staat, bepaalt de organisatie in het dashboard. De kaart is
   compacter dan die van de line-up: een standhouder heeft één logo, geen
   portret plus werk. Logo's zijn vaak donker op transparant, vandaar het
   lichte vlak met wat ruimte eromheen. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.standhouder{border:0;padding:0;margin:0;min-width:0;min-inline-size:0}
.standhouder .form-grid{margin-bottom:1.1rem}

.vendors__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.vendor-card{
  display:flex;flex-direction:column;min-width:0;
  background:var(--ink-2);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  transition:border-color .3s,box-shadow .3s;
}
.vendor-card:hover{border-color:rgba(240,72,248,.45);box-shadow:0 22px 50px -26px rgba(240,72,248,.45)}
.vendor-card__logo{aspect-ratio:1;background:var(--bone);display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.vendor-card__logo img{width:100%;height:100%;object-fit:contain;padding:12%}
.vendor-card__logo--leeg{
  background:repeating-linear-gradient(135deg,var(--ink-3),var(--ink-3) 10px,var(--ink-2) 10px,var(--ink-2) 20px);
  color:var(--magenta);font-family:var(--ff-display);font-size:clamp(2.4rem,5vw,3.4rem);letter-spacing:.02em;
}
.vendor-card__body{display:flex;flex-direction:column;flex:1;min-width:0;padding:1rem 1.15rem 0}
.vendor-card__name{
  font-family:var(--ff-display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.08;color:var(--bone);overflow-wrap:anywhere;
}
.vendor-card__desc{color:var(--bone-dim);font-style:italic;font-size:.98rem;line-height:1.45;margin-top:.35rem;overflow-wrap:anywhere}
.vendor-card .lineup-card__links{padding:.9rem 0 1.15rem}
@media (max-width:980px){.vendors__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.vendors__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Op een telefoon een rij per standhouder: logo links, tekst rechts */
@media (max-width:560px){
  .vendors__grid{grid-template-columns:minmax(0,1fr)}
  .vendor-card{flex-direction:row;min-height:104px}
  .vendor-card__logo{width:104px;flex:none;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line)}
  .vendor-card__logo img{padding:10%}
  .vendor-card__logo--leeg{font-size:2rem}
  .vendor-card__body{padding:.85rem 1rem 0}
  .vendor-card .lineup-card__links{padding:.7rem 0 .9rem}
}

/* =========================================================
   AANWEZIG — merken, muziek, kunst en meer (aanwezig.html)
   (14-10-2026, wens Danny Lübeck)
   =========================================================
   lineup.js vult de groepen; een groep zonder deelnemers blijft verborgen.
   De kaarten zijn die van de standhouders (vendor-card), met een label voor
   "onder voorbehoud" en — op de homepage — de soort. Bij muziek en kunst is
   het beeld meestal een foto van mensen, die vult het vlak. */
.aanwezig{padding-top:clamp(40px,6vw,80px)}
.aanwezig__chips{max-width:var(--maxw);margin:0 auto clamp(36px,5vw,60px);display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:.55em;min-height:44px;padding:.5em 1.05em;
  border:1px solid var(--line);border-radius:999px;background:var(--ink-2);
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;color:var(--bone);
  transition:border-color .2s,color .2s,transform .2s;
}
.chip:hover{border-color:var(--magenta);color:var(--magenta);transform:translateY(-2px)}
.chip__n{
  min-width:1.6em;height:1.6em;padding:0 .4em;border-radius:999px;display:inline-grid;place-items:center;
  background:var(--magenta);color:#1a0420;font-size:.78rem;letter-spacing:0;
}
.aanwezig__groep{max-width:var(--maxw);margin:0 auto clamp(56px,8vw,104px);scroll-margin-top:96px}
.aanwezig__groep:last-of-type{margin-bottom:0}
.aanwezig__kop{display:flex;flex-direction:column;gap:.35rem;margin-bottom:clamp(18px,2.4vw,28px);padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.aanwezig__titel{
  display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .8rem;
  font-family:var(--ff-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1;color:var(--bone);
}
.aanwezig__aantal{
  font-family:var(--ff-script);text-transform:none;letter-spacing:0;color:var(--magenta);
  font-size:.62em;line-height:1;
}
.aanwezig__sub{color:var(--bone-dim);font-style:italic;font-size:1.02rem}
.aanwezig__meer{text-align:center;margin-top:clamp(22px,3vw,34px)}
.aanwezig__leeg{max-width:620px;margin:0 auto;text-align:center;padding:clamp(32px,5vw,56px) 1.4rem;
  border:1px dashed var(--line);border-radius:6px;background:var(--ink-2);color:var(--bone-dim)}
.aanwezig__leeg .kicker{margin-bottom:.6rem}
.aanmeld-noot a{color:var(--magenta);text-decoration:underline;text-underline-offset:3px}

/* Kaart van een act: labels in de hoek van het beeld */
.vendor-card__logo{position:relative}
.vendor-card__logo--foto{background:var(--ink-3)}
.vendor-card__logo--foto img{object-fit:cover;padding:0}
.vendor-card__label{
  position:absolute;top:10px;left:10px;z-index:1;max-width:calc(100% - 20px);
  padding:.3em .65em;border-radius:3px;background:var(--ink);color:var(--bone);
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.07em;font-size:.7rem;line-height:1.2;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.6);
}
.vendor-card__label--voorbehoud{left:auto;right:10px;background:var(--gold);color:#1a1200}
.vendor-card__label + .vendor-card__label--voorbehoud{top:auto;bottom:10px;right:10px}
.vendor-card__logo--leeg > span{pointer-events:none}

/* Compacte lijst van de tattoo-artiesten */
.mini-artiesten{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.mini-artiest{
  display:flex;align-items:center;gap:.9rem;min-width:0;padding:.65rem .9rem .65rem .65rem;
  background:var(--ink-2);border:1px solid var(--line);border-radius:6px;
  transition:border-color .25s,transform .25s;
}
.mini-artiest:hover{border-color:var(--magenta);transform:translateY(-2px)}
.mini-artiest__foto{width:56px;height:56px;flex:none;border-radius:50%;overflow:hidden;background:var(--ink-3);display:grid;place-items:center}
.mini-artiest__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.mini-artiest__foto--leeg{
  background:repeating-linear-gradient(135deg,var(--ink-3),var(--ink-3) 7px,var(--ink-2) 7px,var(--ink-2) 14px);
  color:var(--magenta);font-family:var(--ff-display);font-size:1.15rem;
}
.mini-artiest__tekst{display:flex;flex-direction:column;min-width:0}
.mini-artiest__naam{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.02em;font-size:1.08rem;line-height:1.15;color:var(--bone);overflow-wrap:anywhere}
.mini-artiest__shop{color:var(--bone-dim);font-style:italic;font-size:.92rem;line-height:1.3;overflow-wrap:anywhere}

/* Link vanaf aanwezig.html naar één artiest in de line-up */
.lineup-card{scroll-margin-top:96px}
.lineup-card--uitgelicht{animation:uitlichten 2.4s ease-out 1}
@keyframes uitlichten{
  0%,30%{border-color:var(--magenta);box-shadow:0 0 0 3px rgba(240,72,248,.55),0 22px 50px -20px rgba(240,72,248,.6)}
  100%{box-shadow:none}
}

/* Homepage: "Ook van de partij" */
.ook-aanwezig{background:var(--ink-2)}
.ook-aanwezig .vendor-card{background:var(--ink)}

/* Aanmeldformulier act: logoveld in de stijl van de foto-uploads */
.act-logo{margin-bottom:0}
.act-logo input[type=file]{width:100%;color:var(--bone-dim);font-size:.9rem;
  background:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:.7rem}
.act-logo input[type=file]::file-selector-button{
  background:var(--ink-2);color:var(--bone);border:1px solid var(--line);border-radius:4px;
  padding:.4rem .9rem;margin-right:.9rem;cursor:pointer;font-family:var(--ff-display);
  text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}
.act-logo input[type=file]::file-selector-button:hover{border-color:var(--magenta);color:var(--magenta)}

/* Het menu heeft er een item bij: tussen 981 en 1200 px iets dichter op elkaar */
@media (min-width:981px) and (max-width:1200px){
  .nav__links{gap:1.15rem}
}
@media (max-width:560px){
  .vendor-card__label{top:6px;left:6px;max-width:calc(100% - 12px);font-size:.58rem;padding:.25em .45em}
  .vendor-card__label--voorbehoud{top:auto;bottom:6px;left:6px;right:auto}
  .vendor-card__label + .vendor-card__label--voorbehoud{bottom:6px;left:6px;right:auto}
  .mini-artiesten{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .lineup-card--uitgelicht{animation:none;border-color:var(--magenta)}
  .chip,.mini-artiest{transition:none}
}