/* =========================================================
   KingsNight 2027 — design tokens
   Hofzwart · Koninklijk Goud · Oranje accent · Bordeaux
   ========================================================= */
:root{
  --ink:         #12100C;
  --ink-rgb:     18,16,12;
  --ink-soft:    #1A1710;
  --ink-line:    rgba(201,160,71,0.16);
  --ink-line-or: rgba(232,119,34,0.14);

  /* Goud — rijker, munten-achtig */
  --gold:        #C9A047;
  --gold-rgb:    201,160,71;
  --gold-light:  #E8C96A;
  --gold-dim:    #876C2A;
  --gold-pale:   #F4E8C0;

  /* Oranje — warm, koninklijk, contrast naast goud */
  --orange:      #E87722;
  --orange-rgb:  232,119,34;
  --orange-l:    #F09542;
  --orange-dim:  #9E5010;
  --orange-pale: #FDE8D2;

  --bordeaux:    #5C1A24;
  --bordeaux-l:  #7A2630;
  --emerald:     #1F3D33;
  --cream:       #F4EFE4;
  --cream-dim:   #D8CFBA;

  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --container: 1180px;
  --radius: 2px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 .4em;
  color:var(--cream);
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.6rem,6vw,5rem); font-weight:500; }
h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); }
h3{ font-size:clamp(1.25rem,2vw,1.6rem); }
p{ margin:0 0 1em; color:var(--cream-dim); max-width:60ch; }
.lede{ font-size:1.15rem; color:var(--cream); }

.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.72rem;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1.1em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--gold-dim);
  display:inline-block;
}

.wrap{ max-width:var(--container); margin:0 auto; padding:0 28px; }
section{ padding:96px 0; position:relative; }
.section-tight{ padding:64px 0; }
@media(max-width:880px){section{padding:20px 0 !important;}.section-tight{padding:12px 0 !important;}}

.hr{
  border:none; height:1px;
  background:linear-gradient(90deg, transparent, var(--ink-line) 20%, var(--ink-line) 80%, transparent);
  margin:0;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-mono);
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  padding:15px 30px;
  border:1px solid var(--gold);
  border-radius:var(--radius);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold:hover{ background:var(--gold-light); border-color:var(--gold-light); }
.btn-line{ background:transparent; color:var(--gold-light); }
.btn-line:hover{ background:var(--gold); color:var(--ink); }
.btn-bordeaux{ background:var(--bordeaux); border-color:var(--bordeaux); color:var(--gold-light); }
.btn-bordeaux:hover{ background:var(--bordeaux-l); border-color:var(--bordeaux-l); }
.btn-orange{ background:var(--orange); border-color:var(--orange); color:var(--ink); }
.btn-orange:hover{ background:var(--orange-l); border-color:var(--orange-l); }

/* =========== Navigation =========== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:22px 0;
  background: linear-gradient(to bottom, rgba(var(--ink-rgb),0.55) 0%, transparent 100%);
  transition:background .8s var(--ease), padding .6s var(--ease), border-color .8s var(--ease), backdrop-filter .8s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(var(--ink-rgb),0.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; }
.brand{
  font-family:var(--font-display); font-size:1.25rem; letter-spacing:.02em;
  display:flex; align-items:center; gap:.5em;
  color:var(--cream);
}
.crest{ color:var(--gold); }
.brand .crest{ width:22px; height:22px; flex:none; }
.brand .logo-img{ width:30px; height:30px; flex:none; object-fit:contain; border-radius:2px; }
.brand .logo-fallback{ display:none; }
.brand b{ color:var(--gold); font-weight:600; }

.nav-links{ display:flex; align-items:center; gap:2.4rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cream-dim); position:relative; padding:4px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--gold-light); }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); transform-origin:left; }
.nav-links a.cta{
  border:1px solid var(--gold); padding:9px 18px; color:var(--gold);
}
.nav-links a.cta::after{ display:none; }
.nav-links a.cta:hover{ background:var(--gold); color:var(--ink); }

.nav-toggle{ display:none; background:none; border:0; color:var(--cream); cursor:pointer; padding:6px; }
.nav-toggle svg{ width:26px; height:26px; }

@media (max-width:880px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,340px); height:100vh; z-index:200;
    background:var(--ink-soft); flex-direction:column; align-items:flex-start;
    padding:100px 32px 40px; gap:1.6rem; transform:translateX(100%);
    transition:transform .45s var(--ease); border-left:1px solid var(--ink-line);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:.9rem; }
  .nav-toggle{ display:block; z-index:110; }
}

/* =========== Hero =========== */
.hero{
  min-height:100svh;
  display:flex; align-items:flex-end;
  isolation:isolate;
  position:relative;
  padding-top:140px;
  background:
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(var(--orange-rgb),0.12), transparent 55%),
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(var(--gold-rgb),0.18), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);
  overflow:hidden;
}

/* Hero foto als img tag */
.hero-foto-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
  z-index:0;
  display:block;
}
.hero-has-foto {
  background:none;
}
.hero-has-foto::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to right, rgba(var(--ink-rgb),.88) 0%, rgba(var(--ink-rgb),.6) 55%, rgba(var(--ink-rgb),.2) 100%),
    linear-gradient(to top, rgba(var(--ink-rgb),.75) 0%, transparent 50%);
}
.hero-has-foto .wrap {
  position:relative;
  z-index:2;
}

.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(var(--gold-rgb),0.055) 0 1px, transparent 1px 90px);
  pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:end;
  width:100%; padding-bottom:90px;
}
.hero h1{ margin-bottom:.25em; }
.hero h1 em{ font-style:italic; color:var(--gold); }
.hero-sub{ max-width:46ch; }
.hero-cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }

.crest-panel{
  border:1px solid var(--ink-line);
  padding:28px 26px;
  background:rgba(216,180,135,0.04);
}
.crest-panel .crest{ width:46px; height:46px; margin-bottom:18px; }
.crest-panel .when{
  font-family:var(--font-display); font-size:1.5rem; color:var(--gold-light); margin-bottom:.2em;
}
.crest-panel .where{ font-family:var(--font-mono); font-size:.8rem; color:var(--cream-dim); letter-spacing:.04em; }
.countdown{
  display:flex; gap:18px; margin-top:22px; padding-top:20px; border-top:1px solid var(--ink-line);
}
.countdown div{ text-align:left; }
.countdown .num{ font-family:var(--font-display); font-size:1.7rem; color:var(--orange); line-height:1; }
.countdown .lab{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-dim); }

@media (max-width:880px){
  .hero-grid{ grid-template-columns:1fr; padding-bottom:56px; }
  .hero{ padding-top:120px; }
}

/* =========== Mission / about =========== */
.about{ background:var(--ink-soft); }
.about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start; }
.about .stat-row{ display:flex; gap:40px; margin-top:36px; flex-wrap:wrap; }
.stat{ }
.stat .n{ font-family:var(--font-display); font-size:2.4rem; color:var(--gold); line-height:1; }
.stat .l{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-dim); margin-top:6px; }
@media (max-width:880px){ .about-grid{ grid-template-columns:1fr; gap:36px; } }

/* =========== Card grid (links to subpages) =========== */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); }
/* Sponsoring uitgeschakeld -> nog maar 2 kaarten, die dan de volle breedte vullen i.p.v. in een 3-koloms grid te blijven staan met een lege plek. */
.cards.cards-2{ grid-template-columns:repeat(2,1fr); }
.card{
  background:var(--ink); padding:42px 34px; display:flex; flex-direction:column; gap:14px;
  transition:background .4s var(--ease);
}
.card:hover{ background:var(--ink-soft); }
.card .idx{ font-family:var(--font-mono); font-size:.7rem; color:var(--gold-dim); letter-spacing:.1em; }
.card h3{ margin-bottom:.1em; }
.card p{ font-size:.93rem; flex:1; }
.card .go{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }
@media (max-width:880px){ .cards{ grid-template-columns:1fr; } }

/* =========== Programma / timeline =========== */
.timeline{ border-top:1px solid var(--ink-line); }
.t-row{
  display:grid; grid-template-columns:120px 1fr; gap:32px;
  padding:28px 0; border-bottom:1px solid var(--ink-line);
}
.t-row .time{ font-family:var(--font-mono); color:var(--gold); font-size:.95rem; }
.t-row h4{ font-family:var(--font-display); font-size:1.2rem; margin:0 0 .25em; color:var(--cream); font-weight:600; }
.t-row p{ margin:0; font-size:.93rem; }

/* =========== Location =========== */
.location{ background:var(--ink-soft); }
.loc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.img-frame{
  border:1px solid var(--ink-line); position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(216,180,135,0.18), transparent 55%),
    linear-gradient(160deg, var(--ink) 0%, var(--emerald) 140%);
}
.img-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.img-frame .fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-dim); text-align:center; padding:20px;
}
.img-frame--portrait{ aspect-ratio:4/5; }
.img-frame--wide{ aspect-ratio:21/9; }
.img-frame--square{ aspect-ratio:1/1; background:radial-gradient(circle at 35% 25%, rgba(216,180,135,0.22), transparent 60%), var(--ink-soft); }
.img-frame--square img{ object-fit:contain; padding:18px; }

/* Sfeer band (full-width atmosphere photo with caption) */
.sfeer-band{ position:relative; }
.sfeer-band .img-frame{ border-left:none; border-right:none; }
.sfeer-caption{
  position:absolute; left:0; right:0; bottom:0; padding:34px 28px;
  background:linear-gradient(0deg, rgba(20,20,15,0.92), transparent);
}
.sfeer-caption .wrap{ max-width:var(--container); margin:0 auto; padding-left:28px; padding-right:28px; }
.sfeer-caption h3{ margin-bottom:.15em; }
.sfeer-caption a{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }

/* Charity logo strip */
.charity-strip{ display:flex; align-items:center; gap:18px; margin-top:30px; padding-top:24px; border-top:1px solid var(--ink-line); }
.charity-strip .img-frame{ width:84px; height:84px; flex:none; border-radius:50%; overflow:hidden; }
.charity-strip p{ margin:0; font-size:.85rem; }
.addr{ font-family:var(--font-mono); font-size:.92rem; color:var(--gold-light); line-height:1.8; margin:18px 0 0; }
@media (max-width:880px){ .loc-grid{ grid-template-columns:1fr; } }

/* =========== Forms =========== */
/* min-width:0 op de grid-items en op de velden zelf: grid-/flex-items
   krijgen van de browser standaard min-width:auto, wat betekent dat ze
   NIET smaller mogen worden dan hun eigen inhoud (bijv. een lang label als
   "TELEFOONNUMMER (VOOR WHATSAPP)" of een wachtwoordveld met het oog-knopje).
   Daardoor konden velden op smalle schermen breder worden dan hun kolom en
   buiten de kaart uitsteken, ook al stond alles al op "1 kolom". */
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; min-width:0; }
.field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.field.full{ grid-column:1 / -1; }
label{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-dim); }

/* Code binnen een label niet mee omhoogzetten. Labels staan in hoofdletters,
   maar als er een waarde in staat die je letterlijk moet overtypen (bijv. het
   voorvoegsel ev2), dan toonde het label EV2 terwijl ev2 werd verwacht. Nu
   staat er precies wat je moet intypen. */
label code{ text-transform:none; letter-spacing:normal; }
input, textarea, select{
  background:var(--ink-soft); border:1px solid var(--ink-line); color:var(--cream);
  font-family:var(--font-body); font-size:.95rem; padding:13px 14px; border-radius:var(--radius);
  outline:none; transition:border-color .3s var(--ease);
  width:100%; min-width:0; box-sizing:border-box;
}
/* Radio's en checkboxes vallen zonder deze regel onder de generieke
   input-regel hierboven en krijgen dan width:100% + padding:13px 14px.
   Ze eisen daardoor de hele regelbreedte op, waardoor het bijbehorende
   label naar rechts wordt geduwd en de rij scheef oogt (zichtbaar bij o.a.
   "Type product" op de tickets-pagina). Hier terug naar hun eigen maat. */
input[type="radio"], input[type="checkbox"]{
  width:auto; min-width:0; flex:none; padding:0;
  accent-color:var(--gold); cursor:pointer;
}
input[type="radio"]{ width:17px; height:17px; margin:0; }

input:focus, textarea:focus, select:focus{ border-color:var(--gold); }
textarea{ resize:vertical; min-height:130px; }
.form-note{ font-size:.82rem; color:var(--cream-dim); margin-top:18px; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }

/* Veldfout (bv. e-mailadressen komen niet overeen) */
.field.veld-fout input{ border-color:var(--bordeaux); }
.field-fout-tekst{ display:none; color:#e69aa6; font-size:.78rem; margin-top:2px; }
.field.veld-fout .field-fout-tekst{ display:block; }

/* Inline hulptekst (zie admin/lib/hulp.php) — korte, gewone-taal-uitleg
   direct onder een veld of knop, voor gebruikers zonder ICT-achtergrond die
   het paneel maar af en toe gebruiken. .let-op is voor acties die niet (of
   niet makkelijk) terug te draaien zijn — iets nadrukkelijker qua kleur,
   geen paniekerig rood. */
.hulp-tekst{ font-size:.78rem; line-height:1.45; color:var(--cream-dim); margin:4px 0 0; max-width:60ch; }
.hulp-tekst.let-op{ color:#e6b98a; }

/* Checkbox-veld naast tekst-/dropdownvelden in dezelfde .form-grid-rij.
   Zonder deze klasse "zweeft" de checkbox los onderaan (align-self:end),
   los van de eyebrow-labels van de buurvelden, met een grote standaard-
   checkbox en te kleine hoofdlettertekst — dat oogt onbedoeld kapot. Deze
   klasse centreert het veld verticaal in de rij en stijlt checkbox+tekst als
   één leesbare regel, in lijn met de rest van het thema. */
.field-checkbox{ align-self:center; }
.field-checkbox label{
  display:flex; align-items:center; gap:10px;
  background:var(--ink-soft); border:1px solid var(--ink-line); border-radius:var(--radius);
  padding:13px 14px; box-sizing:border-box; width:100%;
  font-family:var(--font-body); font-size:.92rem; letter-spacing:normal;
  text-transform:none; color:var(--cream); cursor:pointer;
  transition:border-color .3s var(--ease);
}
.field-checkbox label:hover{ border-color:var(--gold); }
.field-checkbox input[type="checkbox"]{
  width:20px; height:20px; flex:none; accent-color:var(--gold); cursor:pointer;
}

/* Aantal-stepper: eigen +/- knoppen i.p.v. de onbetrouwbare native
   spinner-pijltjes van <input type=number> (die op mobiel vaak niet
   getoond worden, waardoor je met de hand moet intoetsen). */
.qty-wrap{ display:flex; align-items:center; gap:6px; justify-content:flex-end; }
.qty-btn{
  width:38px; height:38px; flex:none; border-radius:var(--radius);
  border:1px solid var(--ink-line); background:var(--ink-soft); color:var(--gold);
  font-family:var(--font-mono); font-size:1.1rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; touch-action:manipulation;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.qty-btn:hover, .qty-btn:active{ border-color:var(--gold); color:var(--gold-light); }
.qty-btn:disabled{ opacity:.35; cursor:default; }
.qty-input{
  width:52px; padding:8px 4px; text-align:center;
  /* Verberg de native spinner-pijltjes: wij tekenen onze eigen +/- knoppen. */
  -moz-appearance:textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* =========== Pricing / sponsor tiers =========== */
.tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); margin-top:48px; }
.tier{ background:var(--ink); padding:36px 26px; display:flex; flex-direction:column; gap:16px; }
.tier.featured{ background:var(--ink-soft); position:relative; }
.tier.featured::before{
  content:"Meest gekozen"; position:absolute; top:0; left:0; right:0;
  background:var(--gold); color:var(--ink); text-align:center; font-family:var(--font-mono);
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:6px 0;
}
.tier.featured{ padding-top:54px; }
.tier .price{ font-family:var(--font-display); font-size:2.1rem; color:var(--gold); }
.tier .price span{ font-family:var(--font-mono); font-size:.7rem; color:var(--cream-dim); display:block; margin-top:4px; }
.tier ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; flex:1; }
.tier li{ font-size:.86rem; color:var(--cream-dim); padding-left:18px; position:relative; }
.tier li::before{ content:"—"; position:absolute; left:0; color:var(--gold-dim); }
@media (max-width:980px){ .tiers{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .tiers{ grid-template-columns:1fr; } }

/* =========== Ticket types =========== */
.ticket-list{ display:flex; flex-direction:column; gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); margin-top:40px; }
.ticket-row{
  background:var(--ink); padding:30px 32px; display:grid; grid-template-columns:1.4fr 1fr auto; gap:24px; align-items:center;
}
.ticket-row h3{ margin-bottom:.15em; }
.ticket-row .desc{ font-size:.88rem; color:var(--cream-dim); margin:0; }
.ticket-row .price{ font-family:var(--font-display); font-size:1.6rem; color:var(--gold); }
@media (max-width:760px){ .ticket-row{ grid-template-columns:1fr; text-align:left; } }

/* =========== CTA band =========== */
.cta-band{
  background:linear-gradient(125deg, var(--orange-dim) 0%, var(--bordeaux) 35%, var(--ink) 80%);
  text-align:center; padding:80px 0;
}
.cta-band h2{ margin-bottom:.3em; }
.cta-band p{ margin:0 auto 30px; }

/* =========== Footer =========== */
footer{ background:var(--ink-soft); border-top:1px solid var(--ink-line); padding:64px 0 32px; }
.foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; }
.foot-grid h4{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:1.1em; }
.foot-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot-links a{ font-size:.88rem; color:var(--cream-dim); transition:color .25s; }
.foot-links a:hover{ color:var(--gold-light); }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  margin-top:54px; padding-top:24px; border-top:1px solid var(--ink-line);
  font-family:var(--font-mono); font-size:.72rem; color:var(--cream-dim); letter-spacing:.04em;
}
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr; } }

/* =========== Page header (for sub-pages) =========== */
.page-header{
  padding:170px 0 70px;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(216,180,135,0.14), transparent 60%),
    var(--ink);
  border-bottom:1px solid var(--ink-line);
}

/* =========== Reveal on scroll =========== */
/* Knoppen op smalle schermen.
   .btn heeft white-space:nowrap (regel ~110). Dat is prima voor korte labels,
   maar de bestelknop ("Bestelling plaatsen & bevestiging ontvangen per e-mail")
   eiste daardoor 668px op een scherm van 300px, en omdat .btn een inline-flex
   is groeide hij naar zijn inhoud -> het HELE document werd 683px breed en de
   pagina liet zich zijwaarts scrollen. Gemeten met DevTools op 300px.
   Laat lange labels dus gewoon afbreken op mobiel. */
@media (max-width:600px){
  .btn{
    white-space:normal;
    max-width:100%;
    text-align:center;
    justify-content:center;
  }
}

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* =========== Skip link & focus =========== */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--gold); color:var(--ink);
  padding:10px 16px; z-index:1000; font-family:var(--font-mono); font-size:.8rem;
}
.skip-link:focus{ left:16px; top:16px; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* =========================================================
   RESPONSIVE — mobiel-first aanvullingen
   ========================================================= */

/* Page header minder hoog op mobiel */
@media (max-width:600px){
  .page-header{ padding:120px 0 48px; }
}

/* Wrap padding verkleinen op mobiel */
@media (max-width:600px){
  .wrap{ padding-left:18px; padding-right:18px; }
}

/* ── Tickets pagina ── */
/* Ticket-row: prijs en qty stapelen op smal scherm */
@media (max-width:560px){
  .ticket-row{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .ticket-row .qty-wrap{ justify-content:flex-start; }
}

/* Ticket tiers op mobiel: 1 kolom */
@media (max-width:600px){
  .tiers{ grid-template-columns:1fr !important; }
}

/* ── Bestellen pagina ── */
@media (max-width:600px){
  .form-grid{ grid-template-columns:1fr !important; }
  /* ticket-rij in bestelformulier */
  .ticket-row[style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }
  .totaal-balk{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ── Programma tijdlijn ── */
@media (max-width:600px){
  .tl-item{ grid-template-columns:1fr !important; }
  .tl-time{ text-align:left !important; }
}

/* ── Sponsoren ── */
@media (max-width:600px){
  .tiers.sponsors{ grid-template-columns:1fr 1fr !important; }
}

/* ── Contact ── */
@media (max-width:680px){
  .loc-grid{ grid-template-columns:1fr !important; }
}

/* ── Footer ── */
@media (max-width:520px){
  .foot-bottom{ flex-direction:column; align-items:flex-start; }
}

/* Bestellen: ticket-rij met inline grid breekt op mobiel */
@media (max-width:560px){
  .ticket-row[style]{ grid-template-columns:1fr !important; }
  .totaal-balk{ flex-wrap:wrap; gap:8px; }
}

/* ── Mobiel algemeen + hero-foto-mobiel ── */
/* Standaard verborgen — alleen zichtbaar op mobiel via mediaquery hieronder */
.hero-foto-mobiel { display:none; }

@media (max-width:880px) {
  .hero           { min-height:60svh; padding-top:80px; }
  .hero-grid      { padding-bottom:32px; }
  section         { padding:20px 0 !important; }
  .section-tight  { padding:14px 0 !important; }
  .about          { padding:20px 0 !important; }
  .location       { padding:20px 0 !important; }
  .cta-band       { padding:28px 0 !important; }
  footer          { padding:28px 0 16px; }
  .wrap           { padding:0 16px; }
  .kn-ornament    { margin:2px 0 10px; }
  .charity-strip  { margin-top:0; padding:14px 16px; }
  .cms-cards-grid { gap:10px; }
  .cards          { gap:10px; padding:0 16px; }
  .card           { padding:18px 16px; }
  .cms-card       { padding:16px 14px; }
  h2              { font-size:1.4rem; }
  .lede           { font-size:.95rem; }
  .hero-foto-img  { display:none; }
  .hero-foto-mobiel {
    display:block;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    z-index:0;
  }
}