/* =============================================================
   PARTY TIME — Songfestival Sing-A-Long
   -------------------------------------------------------------
   Losse onepager. Bewust vrolijk en kleurrijk: magenta, paars,
   elektrisch blauw en zonnegeel, grote ronde vormen en confetti.
   Geen prijzen op de pagina, dat gesprek gaat via contact.

   Statisch, geen build. Eén stylesheet, in lagen.
   ============================================================= */

/* ---------- 1. Tokens ---------------------------------------- */

:root {
  --ink:        #1b0f33;
  --ink-2:      #2c1a52;
  --ink-soft:   rgba(27, 15, 51, 0.72);

  --magenta:    #e2278f;
  --magenta-dk: #c01576;
  --purple:     #7b2ff7;
  --purple-dk:  #5c1fc4;
  --blue:       #2ea8ff;
  --yellow:     #ffc93c;
  --coral:      #ff5f6d;
  --mint:       #17c9a4;

  --cream:      #fff8f2;
  --cream-2:    #ffeede;
  --white:      #ffffff;

  --font-display: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero:  clamp(2.6rem, 7vw, 5.4rem);
  --fs-h2:    clamp(1.9rem, 4.2vw, 3.2rem);
  --fs-h3:    clamp(1.15rem, 1.9vw, 1.45rem);
  --fs-lead:  clamp(1.08rem, 1.5vw, 1.3rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.9375rem;
  --fs-micro: 0.78rem;

  --container: 1180px;
  --narrow: 46rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4rem, 8vw, 7.5rem);

  --r-sm: 10px;
  --r:    18px;
  --r-lg: 32px;
  --r-pill: 999px;

  --shadow: 0 18px 44px -22px rgba(27, 15, 51, 0.45);
  --shadow-lg: 0 34px 80px -34px rgba(27, 15, 51, 0.55);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 260ms;
}

/* ---------- 2. Reset ----------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
/* De feestband staat schuin en iets opgeschaald en steekt daardoor buiten
   het venster. clip in plaats van hidden, want hidden op html maakt er een
   scrollcontainer van en dat breekt de sticky header. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--yellow); color: var(--ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100%; z-index: 100;
  padding: 0.8rem 1.3rem; background: var(--ink); color: var(--white);
  border-radius: var(--r-sm); font-weight: 700;
}
.skip-link:focus { top: 1rem; }

/* ---------- 3. Typografie ------------------------------------ */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }

.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-soft); }
.prose p + p { margin-top: 1.1em; }
.prose p { max-width: 62ch; }

/* Het kleuraccent in koppen. Onderstreping in plaats van een andere
   kleur letter, zodat de leesbaarheid nergens inzakt. */
.mark {
  background: linear-gradient(180deg, transparent 62%, var(--yellow) 62%);
  padding-inline: 0.08em;
}

.eyebrow {
  display: inline-block;
  padding: 0.4rem 0.95rem;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--magenta-dk);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: var(--shadow);
}

/* ---------- 4. Layout ---------------------------------------- */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--narrow); }

.section { position: relative; padding-block: var(--section-y); }
.section--cream { background: var(--cream); }
.section--cream2 { background: var(--cream-2); }
.section--white { background: var(--white); }
.section--geel { background: linear-gradient(150deg, var(--yellow) 0%, #ffb03c 100%); }
.section--geel .lead { color: rgba(27, 15, 51, 0.78); }
.section--geel .eyebrow { background: var(--ink); color: var(--white); }
.section--geel .mark { background: linear-gradient(180deg, transparent 62%, var(--white) 62%); }

/* Gekleurde vlakken. Wit op verzadigd, dus altijd ruim contrast. */
.section--purple { background: linear-gradient(140deg, var(--purple) 0%, var(--magenta) 100%); color: var(--white); }
.section--blue { background: linear-gradient(140deg, var(--blue) 0%, var(--purple) 100%); color: var(--white); }
.section--purple .lead, .section--blue .lead { color: rgba(255, 255, 255, 0.9); }
.section--purple .eyebrow, .section--blue .eyebrow { background: rgba(255,255,255,.16); color: var(--white); box-shadow: none; }
.section--purple .mark, .section--blue .mark { background: linear-gradient(180deg, transparent 62%, rgba(255,201,60,.85) 62%); }

.head { max-width: 44rem; }
.head > * + * { margin-top: 1rem; }
.head--center { margin-inline: auto; text-align: center; }

.stack > * + * { margin-top: 1.1rem; }

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip > :first-child { order: 2; }
}

/* ---------- 5. Knoppen --------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 54px; padding: 0.9rem 1.9rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small);
  border: 3px solid transparent; border-radius: var(--r-pill);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--yellow); color: var(--ink); box-shadow: var(--shadow); }
.btn--primary:hover { background: #ffd869; }

.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: var(--ink-2); }

.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: rgba(255,255,255,.14); border-color: var(--white); }

.btn--outline { background: transparent; color: var(--ink); border-color: rgba(27,15,51,.2); }
.btn--outline:hover { border-color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- 6. Confetti -------------------------------------- */

/* Kleine gekleurde vormen als achtergrondaccent. Puur decoratief,
   dus aria-hidden en zonder invloed op de leesbaarheid. */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.confetti i {
  position: absolute; display: block;
  width: var(--s, 14px); height: var(--s, 14px);
  background: var(--c, var(--yellow));
  opacity: var(--o, .8);
  border-radius: var(--br, 3px);
  transform: rotate(var(--rot, 20deg));
}
.confetti i.round { border-radius: 50%; }
/* Een vierpuntige ster, met een CSS-vorm in plaats van een plaatje. */
.confetti i.ster {
  border-radius: 0;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}
.section > .container { position: relative; z-index: 1; }

/* ---------- 7. Header ---------------------------------------- */

.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 248, 242, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 3px solid var(--ink);
}
.hdr__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.hdr__brand { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.1; letter-spacing: -0.01em; }
.hdr__brand span { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--magenta-dk); margin-top: 0.2rem; }
.hdr__nav { display: none; gap: 1.4rem; }
@media (min-width: 900px) { .hdr__nav { display: flex; align-items: center; } }
.hdr__nav a { font-size: var(--fs-small); font-weight: 600; }
.hdr__nav a:hover { color: var(--magenta-dk); }
.hdr__cta { min-height: 44px; padding: 0.55rem 1.3rem; }

/* ---------- 8. Hero ------------------------------------------ */

.hero {
  position: relative;
  background: linear-gradient(150deg, var(--purple) 0%, var(--magenta) 62%, var(--coral) 100%);
  color: var(--white);
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.5rem) 0;
}
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: end; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
  /* De feitenkaarten steken met een negatieve marge over de onderrand van
     de hero heen. Zonder deze ruimte landen ze bovenop de knoppen, want de
     tekstkolom loopt door tot de onderrand van het vlak. */
  .hero__tekst { padding-bottom: 6rem; }
}

.hero__title { font-size: var(--fs-hero); }
.hero__title small {
  display: block; font-family: var(--font-body); font-weight: 700;
  font-size: clamp(0.85rem, 1.6vw, 1.05rem); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--yellow); margin-bottom: 0.6rem;
}
.hero__sub { margin-top: 1.1rem; font-size: var(--fs-lead); color: rgba(255,255,255,.92); max-width: 34rem; }

.hero__punten { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.hero__punten li {
  padding: 0.42rem 1rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.16);
  font-size: var(--fs-small); font-weight: 600;
}
.hero__cta { margin-top: 1.9rem; }

/* Het duo staat onderaan in de hero, zonder kader, alsof ze het vlak
   binnenstappen. Dat is vrolijker dan een foto in een doos. */
.hero__foto { position: relative; align-self: end; }
.hero__foto img { width: 100%; border-radius: var(--r-lg) var(--r-lg) 0 0; display: block; }

/* ---------- 9. Feiten ---------------------------------------- */

.feiten { display: grid; gap: 1rem; margin-top: -2rem; position: relative; z-index: 2; }
@media (min-width: 760px) { .feiten { margin-top: -3.5rem; } }
@media (min-width: 760px) { .feiten { grid-template-columns: repeat(3, 1fr); } }
.feit {
  background: var(--white); border-radius: var(--r);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  box-shadow: var(--shadow-lg);
  border-top: 6px solid var(--kleur, var(--magenta));
}
.feit b { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; line-height: 1.15; }
.feit p { margin-top: 0.4rem; font-size: var(--fs-small); color: var(--ink-soft); }

/* ---------- 10. Beeldkaders ---------------------------------- */

.beeld {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 4px solid var(--white);
}
.beeld img { width: 100%; display: block; }
/* Een vrolijke schuine schaduwrand achter het beeld. */
.beeld--kaart { position: relative; }
.beeld--kaart::before {
  content: ''; position: absolute; inset: 0;
  border-radius: var(--r-lg);
  background: var(--yellow);
  transform: rotate(-2.2deg) translate(10px, 10px);
  z-index: -1;
}

/* ---------- 11. Lijsten -------------------------------------- */

.checks { display: grid; gap: 0.7rem; margin-top: 1.4rem; }
@media (min-width: 720px) { .checks { grid-template-columns: 1fr 1fr; gap: 0.7rem 1.8rem; } }
.checks li { position: relative; padding-left: 2.1rem; font-size: var(--fs-small); }
.checks li::before {
  content: ''; position: absolute; left: 0; top: 0.42em;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--mint);
}
.checks li::after {
  content: ''; position: absolute; left: 0.42rem; top: 0.76em;
  width: 0.5rem; height: 0.28rem;
  border-left: 2.5px solid var(--white); border-bottom: 2.5px solid var(--white);
  transform: rotate(-45deg);
}

/* Het Party Time Pakket. Grote kleurige tegels, geen tabel. */
/* Een opvallend groen label, zodat er geen twijfel over bestaat dat de
   partybox bij de prijs hoort en geen losse post is. */
.badge-inbegrepen {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 1.3rem;
  border-radius: var(--r-pill);
  background: var(--mint); color: var(--ink);
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-small);
  box-shadow: var(--shadow);
}
.badge-inbegrepen::before {
  content: ''; flex: none;
  width: 0.85rem; height: 0.5rem;
  border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  transform: rotate(-45deg) translateY(-2px);
}

/* auto-fit in plaats van een vast aantal kolommen: met vijf tegels gaf
   vier kolommen een eenzame vijfde op de tweede rij, en bij een zesde
   prop zou dat opnieuw misgaan. */
.props {
  display: grid; gap: 1rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.prop {
  background: var(--white); color: var(--ink);
  border-radius: var(--r); padding: 1.5rem;
  box-shadow: var(--shadow);
  border-bottom: 6px solid var(--kleur, var(--magenta));
}
.prop b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.prop span { display: block; margin-top: 0.15rem; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--magenta-dk); }
.prop p { margin-top: 0.6rem; font-size: var(--fs-small); color: var(--ink-soft); }

/* Een optionele post mag niet als inbegrepen ogen: gestippelde rand en
   een eigen labelkleur, zodat het verschil met de vaste props zichtbaar
   is zonder dat het als een waarschuwing leest. */
.prop--optie { background: rgba(255,255,255,.82); border-bottom-style: dashed; }
.prop--optie span { color: var(--purple-dk); }

/* Repertoire als speelse chips. */
.songs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
/* Gevulde chips in plaats van wit met een randje: dat geeft de sectie
   veel meer kleur. Elke kleur is op contrast nagemeten met de tekstkleur
   die erbij staat, wit op de donkere en inkt op geel. */
.songs li {
  padding: 0.58rem 1.15rem; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small);
  box-shadow: var(--shadow);
  color: var(--white);
  transition: transform var(--dur) var(--ease);
}
.songs li:hover { transform: translateY(-2px) rotate(-1.5deg); }
/* Wit haalde op magenta 4,27 en op het lichte blauw 2,57, allebei onder
   de norm van 4,5 voor tekst van deze grootte. Magenta gaat een tint
   dieper, en het blauw krijgt donkere tekst in plaats van witte. */
.songs li:nth-child(5n+1) { background: var(--magenta-dk); }
.songs li:nth-child(5n+2) { background: var(--purple); }
.songs li:nth-child(5n+3) { background: var(--blue); color: var(--ink); }
.songs li:nth-child(5n+4) { background: var(--yellow); color: var(--ink); }
.songs li:nth-child(5n)   { background: var(--mint); color: var(--ink); }

.songgroep + .songgroep { margin-top: 2.2rem; }
.songgroep h3 {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 1.1rem;
}
.songgroep h3::before {
  content: ''; width: 1.5rem; height: 4px; border-radius: 2px;
  background: var(--kleur, var(--magenta));
}

/* Gelegenheden. */
.voorwie { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 640px) { .voorwie { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .voorwie { grid-template-columns: repeat(3, 1fr); } }
.voorwie li {
  padding: 1.2rem 1.4rem; border-radius: var(--r);
  background: var(--white); box-shadow: var(--shadow);
  font-family: var(--font-display); font-weight: 700;
}

/* ---------- 12. Contact -------------------------------------- */

.contact-kaart {
  background: var(--white); color: var(--ink);
  border-radius: var(--r-lg); padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--shadow-lg);
  display: grid; gap: 1.6rem;
}
@media (min-width: 860px) { .contact-kaart { grid-template-columns: 1.1fr 0.9fr; align-items: center; } }
.contact-lijst { display: grid; gap: 0.6rem; }
.contact-lijst a {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.9rem 1.1rem; border-radius: var(--r);
  background: var(--cream); font-weight: 700;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.contact-lijst a:hover { background: var(--cream-2); transform: translateX(3px); }
.contact-lijst span { font-family: var(--font-display); }
.contact-lijst small { display: block; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--magenta-dk); }

/* ---------- 13. Footer --------------------------------------- */

.ftr { background: var(--ink); color: rgba(255,255,255,.8); padding-block: 3rem 2rem; }
.ftr__inner { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; justify-content: space-between; align-items: center; }
.ftr b { font-family: var(--font-display); color: var(--white); font-size: 1.05rem; }
.ftr a { color: var(--yellow); font-weight: 600; }
.ftr small { display: block; font-size: var(--fs-micro); margin-top: 0.3rem; }

/* Het merk van de paraplu staat in de voet, niet in de kop: deze site
   verkoopt Party Time, Showstage is de afzender. */
.ftr__merk { display: grid; gap: 0.5rem; justify-items: start; }
.ftr__merk span {
  font-size: var(--fs-micro); letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}
.ftr__merk img {
  width: clamp(150px, 18vw, 200px); height: auto;
  opacity: 0.9; transition: opacity var(--dur) var(--ease);
}
.ftr__merk:hover img { opacity: 1; }
.ftr__rechten { width: 100%; }
@media (min-width: 700px) { .ftr__rechten { width: auto; } }

/* ---------- 14. Motion --------------------------------------- */

[data-reveal] { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0; transform: translateY(24px);
    transition: opacity 900ms var(--ease), transform 900ms var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  [data-reveal].is-in { opacity: 1; transform: none; }

  .confetti i { animation: zweef var(--t, 9s) ease-in-out infinite alternate; }
  @keyframes zweef {
    from { transform: rotate(var(--rot, 20deg)) translateY(0); }
    to   { transform: rotate(calc(var(--rot, 20deg) + 18deg)) translateY(-16px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- 15. Responsive ----------------------------------- */

@media (max-width: 640px) {
  :root { --fs-body: 1rem; }
  .btn { width: 100%; }
  .btn-row .btn { width: 100%; }
  .feiten { margin-top: -2rem; }
  .hero__foto img { border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

@media (max-width: 360px) { :root { --gutter: 1rem; } }

@media print {
  .hdr, .confetti { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ---------- 16. Feestband ------------------------------------ */

/* Een schuine gekleurde strook met terugkerende woorden, tussen twee
   secties in. Puur sfeer, dus aria-hidden. Bij reduced motion staat hij
   stil in plaats van te schuiven. */
.feestband {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  transform: rotate(-1.6deg) scale(1.03);
  margin-block: -1px;
  padding-block: 0.85rem;
}
.feestband__spoor {
  display: flex; width: max-content;
  gap: 2.4rem;
  white-space: nowrap;
}
.feestband span {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--white);
}
.feestband span:nth-child(3n+1) { color: var(--yellow); }
.feestband span:nth-child(3n+2) { color: var(--blue); }
.feestband span:nth-child(3n)   { color: var(--magenta); }

@media (prefers-reduced-motion: no-preference) {
  .feestband__spoor { animation: schuif 26s linear infinite; }
  @keyframes schuif { from { transform: translateX(0); } to { transform: translateX(-50%); } }
}

/* ---------- 17. Spark achter koppen -------------------------- */

/* Zachte kleurgloed achter een sectiekop op de lichte vlakken, zodat
   crème nooit als een leeg vel papier aanvoelt. */
.section--cream, .section--cream2, .section--white { position: relative; }
.spark::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(38% 42% at var(--sx, 14%) var(--sy, 18%), rgba(226, 39, 143, 0.16), transparent 70%),
    radial-gradient(34% 38% at var(--sx2, 88%) var(--sy2, 76%), rgba(46, 168, 255, 0.16), transparent 70%);
}


/* ---------- 18. Nummerband ----------------------------------- */

/* Een doorlopende band met songtitels, direct onder de kop. Recht en
   niet schuin, zodat hij netjes tegen de header aansluit; de schuine
   feestband verderop blijft het speelse accent. De tweede helft van de
   rij is een kopie met aria-hidden, want die is er alleen om de lus
   naadloos te laten lopen en hoort niet twee keer voorgelezen te worden. */
.nummerband {
  position: relative;
  overflow: hidden;
  /* Alleen tinten waarop witte tekst boven 4,5 uitkomt. Het oorspronkelijke
     verloop liep naar koraal en daar haalde wit nog geen 3. */
  background: linear-gradient(90deg, var(--purple-dk) 0%, var(--magenta-dk) 50%, var(--purple) 100%);
  padding-block: 0.7rem;
}
.nummerband__spoor {
  display: flex; align-items: center;
  width: max-content; gap: 1.6rem;
  white-space: nowrap;
}
.nummerband span {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  letter-spacing: 0.02em;
  color: var(--white);
}
.nummerband i {
  font-style: normal; color: var(--yellow);
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: no-preference) {
  .nummerband__spoor { animation: schuif 34s linear infinite; }
}

/* ---------- 19. Partybox in beeld ---------------------------- */

.boxbeeld { display: grid; gap: 1rem; margin-top: 2.2rem; }
@media (min-width: 820px) { .boxbeeld { grid-template-columns: 1.4fr 1fr; align-items: stretch; } }
.boxbeeld .beeld { margin: 0; }
.boxbeeld img { width: 100%; height: 100%; object-fit: cover; }