/* Let op: show.css bevat alleen wat op elke pagina en op de homepage nodig is.
   Regels die alleen op een bepaald paginatype gelden staan in show-blog.css,
   show-diensten.css, show-steden.css, show-over.css en show-repertoire.css.
   Die worden na show.css geladen, dus pas een regel aan in het bestand waar hij staat. */

/* The Suited Singer: "Het podium". De homepage als een avond in het theater.
   Werkt boven op site-premium.css (formulier, reviews, contactbalk).
   Kleuren uit de eigen concertbeelden:
   zaaldonker #05070F, podiumblauw #2348C8, bundelwit #DCE8FF, goud #D4AF37, ivoor #F4EEE2.
   Contrast: ivoor op zaaldonker ruim boven 15:1, mist #AAB4CB op zaaldonker ruim boven 9:1,
   goud op zaaldonker ruim boven 9:1, inkt op goud ruim boven 8:1. */

:root {
  --show-dark: #05070F;
  --show-dark-2: #0B1020;
  --show-blue: #2348C8;
  --show-beam: #DCE8FF;
  --show-gold: #D4AF37;
  --show-ivory: #F4EEE2;
  --show-mist: #AAB4CB;
  /* de lichttafel stuurt deze kleur */
  --mood: #F2B35E;
  --mood-2: #8A4B12;
}

body.show-page { background: var(--show-dark); color: var(--show-ivory); }

/* ---------- header over de video ---------- */
body.show-page #site-header header {
  position: fixed;
  inset: 0 0 auto;
  background: linear-gradient(to bottom, rgba(5, 7, 15, 0.75), rgba(5, 7, 15, 0));
  box-shadow: none;
  transition: background-color 0.3s, backdrop-filter 0.3s;
}
body.show-page.is-scrolled #site-header header {
  background: rgba(5, 7, 15, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ---------- het uitklapmenu als programmablad over het hele scherm ---------- */
body:is(.show-page, .show-skin) #site-header header:has(#mobileMenu.max-h-96) { background: #05070F; }
html:has(body:is(.show-page, .show-skin) #mobileMenu.max-h-96) { overflow: hidden; }
body:is(.show-page, .show-skin) #mobileMenu {
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(212, 175, 55, 0.12), transparent 70%),
    #05070F;
  border-top: 1px solid rgba(212, 175, 55, 0.3);
}
body:is(.show-page, .show-skin) #mobileMenu.max-h-96 { height: calc(100svh - 4.5rem); max-height: calc(100svh - 4.5rem); }
body:is(.show-page, .show-skin) #mobileMenu > div { max-width: 34rem; margin: 0 auto; padding: 1.2rem 1.5rem 2rem; counter-reset: menu; }
body:is(.show-page, .show-skin) #mobileMenu a.mobile-menu-link:not([href="/#contact"]) {
  counter-increment: menu;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: 0;
  padding: 0.7rem 0.2rem;
  border-radius: 0;
  border-bottom: 1px solid rgba(220, 232, 255, 0.08);
  color: var(--show-ivory);
  font: 800 1.45rem / 1.15 var(--tsx-serif, "Playfair Display", serif);
  background: none;
}
body:is(.show-page, .show-skin) #mobileMenu a.mobile-menu-link:not([href="/#contact"])::before {
  content: counter(menu, decimal-leading-zero);
  min-width: 1.6rem;
  color: var(--show-gold);
  font: 700 0.75rem / 1 var(--tsx-sans, "Poppins", sans-serif);
  letter-spacing: 0.08em;
}
body:is(.show-page, .show-skin) #mobileMenu a.mobile-menu-link:not([href="/#contact"]):hover,
body:is(.show-page, .show-skin) #mobileMenu a.mobile-menu-link:not([href="/#contact"]):focus-visible { color: var(--show-gold); background: none; }
body:is(.show-page, .show-skin) #mobileMenu a[href="/#contact"] { margin-top: 1.2rem; padding: 0.95rem 1.5rem; font-size: 1.05rem; }
body:is(.show-page, .show-skin) #mobileMenu .border-t { border-color: transparent; margin: 0; padding: 0; }
@media (prefers-reduced-motion: no-preference) {
  body:is(.show-page, .show-skin) #mobileMenu.max-h-96 a.mobile-menu-link { animation: show-menu-in 0.4s ease both; }
  body:is(.show-page, .show-skin) #mobileMenu.max-h-96 a.mobile-menu-link:nth-child(2) { animation-delay: 0.03s; }
  body:is(.show-page, .show-skin) #mobileMenu.max-h-96 a.mobile-menu-link:nth-child(3) { animation-delay: 0.06s; }
  body:is(.show-page, .show-skin) #mobileMenu.max-h-96 a.mobile-menu-link:nth-child(4) { animation-delay: 0.09s; }
  body:is(.show-page, .show-skin) #mobileMenu.max-h-96 a.mobile-menu-link:nth-child(5) { animation-delay: 0.12s; }
  body:is(.show-page, .show-skin) #mobileMenu.max-h-96 a.mobile-menu-link:nth-child(6) { animation-delay: 0.15s; }
  body:is(.show-page, .show-skin) #mobileMenu.max-h-96 a.mobile-menu-link:nth-child(7) { animation-delay: 0.18s; }
  body:is(.show-page, .show-skin) #mobileMenu.max-h-96 a.mobile-menu-link:nth-child(8) { animation-delay: 0.21s; }
  body:is(.show-page, .show-skin) #mobileMenu.max-h-96 a.mobile-menu-link:nth-child(9) { animation-delay: 0.24s; }
}
@keyframes show-menu-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- hero: het podium ---------- */
.show-hero { position: relative; background: var(--show-dark); }
.show-hero__pin { position: relative; height: 100svh; min-height: 34rem; overflow: hidden; }

.show-hero__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* krimpt naar de onderrand toe, zodat er geen leeg vlak tussen beeld en lichtkrant ontstaat */
  transform-origin: 50% 100%;
  transform: scale(calc(1 - var(--hp, 0) * 0.07));
  border-radius: calc(var(--hp, 0) * 22px);
  will-change: transform;
}
.show-hero__stage video,
.show-hero__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 50%;
}
.show-hero__stage img { z-index: 0; }
.show-hero__stage video { z-index: 1; }

/* schaduw zodat de tekst leesbaar blijft, plus vignet */
.show-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(120% 90% at 60% 35%, rgba(5, 7, 15, 0) 30%, rgba(5, 7, 15, 0.7) 100%),
    linear-gradient(to top, rgba(5, 7, 15, 0.96) 0%, rgba(5, 7, 15, 0.7) 32%, rgba(5, 7, 15, 0.1) 62%, rgba(5, 7, 15, 0.35) 100%);
}

/* de volgspot: waar de muis is, is het licht */
.show-hero__spot {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at var(--sx, 30%) var(--sy, 72%), rgba(255, 236, 200, 0.16) 0, rgba(255, 236, 200, 0.06) 14%, rgba(5, 7, 15, 0) 30%);
  mix-blend-mode: screen;
}

.show-hero__content {
  position: absolute;
  z-index: 4;
  inset: auto 0 0 0;
  padding: 0 0 clamp(1.5rem, 5vh, 3.5rem);
  opacity: calc(1 - var(--hp, 0) * 1.6);
  transform: translateY(calc(var(--hp, 0) * -6vh));
}

.show-hero h1 {
  max-width: 13ch;
  margin: 0 0 1rem;
  font: 900 clamp(2.75rem, min(7.25vw, 10.75svh), 6rem) / 0.98 var(--tsx-serif);
  letter-spacing: -0.01em;
  color: var(--show-ivory);
  text-shadow: 0 2px 30px rgba(5, 7, 15, 0.6);
  text-wrap: balance;
}
.show-hero h1 span { color: var(--show-gold); }

.show-hero__lead { max-width: 33rem; margin: 0 0 0.8rem; font-size: clamp(1rem, 2.4vw, 1.2rem); line-height: 1.55; color: var(--show-ivory); }
.show-hero__proof { margin: 0 0 1.4rem; color: var(--show-mist); font-size: 0.95rem; }
.show-hero__proof strong { color: var(--show-gold); font-weight: 600; }
.show-hero__actions { display: grid; gap: 0.6rem; max-width: 22rem; }
@media (min-width: 640px) { .show-hero__actions { display: flex; max-width: none; } }

.show-hero__meta {
  position: absolute;
  z-index: 5;
  right: 1rem;
  bottom: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: var(--show-mist);
}
.show-pause {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(244, 238, 226, 0.35);
  border-radius: 999px;
  background: rgba(5, 7, 15, 0.55);
  color: var(--show-ivory);
  font: 600 0.85rem var(--tsx-sans);
  cursor: pointer;
}
.show-pause:hover { border-color: var(--show-gold); color: var(--show-gold); }
@media (max-width: 767px) {
  .show-hero__meta { top: 5.4rem; bottom: auto; }
  .show-hero__credit { display: none; }
}

/* openingsmoment: de zaal gaat van donker naar licht, eenmaal per bezoek */
@keyframes show-houselights { from { opacity: 1; } to { opacity: 0; } }
@keyframes show-rise { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
.show-hero__dark { position: absolute; inset: 0; z-index: 6; background: var(--show-dark); pointer-events: none; opacity: 0; }
html:not(.tsx-seen) .show-hero__dark { animation: show-houselights 1.6s ease-out 0.15s both; }
html:not(.tsx-seen) .show-hero h1 { animation: show-rise 1s cubic-bezier(.2, .7, .2, 1) 0.7s both; }
html:not(.tsx-seen) .show-hero__lead,
html:not(.tsx-seen) .show-hero__proof,
html:not(.tsx-seen) .show-hero__actions { animation: show-rise 0.9s cubic-bezier(.2, .7, .2, 1) 1.05s both; }

/* op een groot scherm: het beeld krimpt licht terwijl je doorscrollt, de lichtkrant sluit er direct op aan */
@media (min-width: 900px) {
  .show-hero__content { padding-bottom: 4.5rem; }
  .show-hero__shade {
    background:
      radial-gradient(120% 90% at 65% 40%, rgba(5, 7, 15, 0) 35%, rgba(5, 7, 15, 0.65) 100%),
      linear-gradient(90deg, rgba(5, 7, 15, 0.92) 0%, rgba(5, 7, 15, 0.55) 38%, rgba(5, 7, 15, 0) 70%),
      linear-gradient(to top, rgba(5, 7, 15, 0.85) 0%, rgba(5, 7, 15, 0) 40%);
  }
}

/* ---------- lichtreclame met repertoire ---------- */
.show-marquee {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 0;
  background: #0E0A04;
  border-block: 6px solid transparent;
  border-image: repeating-linear-gradient(90deg, #F7D774 0 6px, #3A2C10 6px 18px) 6;
}
.show-marquee__track {
  display: flex;
  width: max-content;
  animation: show-marquee 42s linear infinite;
}
.show-marquee__group { display: flex; gap: 2.5rem; padding-right: 2.5rem; }
.show-marquee span {
  font: 800 clamp(1.3rem, 3.4vw, 2.1rem) var(--tsx-serif);
  color: #FBE7A8;
  text-shadow: 0 0 12px rgba(247, 215, 116, 0.55);
  white-space: nowrap;
}
.show-marquee span::after { content: "\2605"; margin-left: 2.5rem; color: #F7D774; font-size: 0.7em; vertical-align: middle; }
@keyframes show-marquee { to { transform: translateX(-50%); } }

.show-inline { color: var(--show-gold); font-weight: 600; text-underline-offset: 4px; }
.show-inline:hover { color: var(--show-ivory); }

/* ---------- sectiekoppen ---------- */
.show-section { position: relative; padding: clamp(3rem, 7vw, 5.5rem) 0; }
/* het eerste blok na de lichtkrant begint direct */
.show-marquee + .show-section { padding-top: clamp(2rem, 4.5vw, 3.25rem); }
.show-h2 {
  max-width: 18ch;
  margin: 0 0 1rem;
  font: 900 clamp(2.1rem, 6.4vw, 4.2rem) / 1.02 var(--tsx-serif);
  color: var(--show-ivory);
  text-wrap: balance;
}
.show-lead { max-width: 40rem; margin: 0 0 2rem; color: var(--show-mist); font-size: 1.08rem; line-height: 1.65; }

/* ---------- recensies ---------- */
.show-reviews { background: radial-gradient(70% 60% at 20% 0%, rgba(35, 72, 200, 0.22), rgba(5, 7, 15, 0) 70%), var(--show-dark); }
.show-quotes { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.show-quote {
  position: relative;
  padding: 1.6rem 1.5rem 1.4rem;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(220, 232, 255, 0.07), rgba(220, 232, 255, 0.02));
  border: 1px solid rgba(220, 232, 255, 0.14);
}
.show-quote::before {
  content: "\201C";
  position: absolute;
  top: -0.35rem;
  left: 1rem;
  font: 900 4.5rem / 1 var(--tsx-serif);
  color: var(--show-gold);
  opacity: 0.8;
}
.show-quote .tsx-stars { color: var(--show-gold); margin-top: 1.4rem; }
.show-quote .tsx-stars .off { color: rgba(244, 238, 226, 0.25); }
.show-quote blockquote { margin: 0 0 1rem; }
.show-quote blockquote p { margin: 0; color: var(--show-ivory); line-height: 1.65; font-size: 1rem; }
.show-quote__by { margin: 0; color: var(--show-mist); font-size: 0.92rem; }
.show-quote__by strong { color: var(--show-ivory); }
@media (max-width: 899px) {
  .show-quotes { grid-auto-flow: column; grid-auto-columns: min(86%, 24rem); align-items: start; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -1rem; padding: 1rem 1rem 1rem; }
  .show-quote { scroll-snap-align: start; }
}
@media (min-width: 900px) { .show-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.show-score { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0 0 2rem; }
.show-score p { margin: 0; color: var(--show-mist); }
.show-score strong { font: 900 2.2rem / 1 var(--tsx-serif); color: var(--show-gold); margin-right: 0.4rem; }
.show-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: 1rem; }
.show-links a { display: inline-block; padding: 0.7rem 0; color: var(--show-gold); font-weight: 600; text-underline-offset: 4px; }

/* ---------- de kleedkamerspiegel ---------- */
.show-dressing { background: radial-gradient(55% 60% at 80% 40%, rgba(247, 197, 90, 0.12), transparent 70%), var(--show-dark); }
.show-dressing__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 960px) { .show-dressing__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }

.show-mirror {
  position: relative;
  margin: 0;
  padding: 26px;
  border-radius: 20px;
  background: linear-gradient(145deg, #3B2C18, #1C140A);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(255, 220, 150, 0.15);
}
/* de gloeilampjes rondom de spiegel */
.show-mirror::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 16px;
  pointer-events: none;
  background:
    radial-gradient(circle, #FFF6D8 0 3px, #F7C55A 4.5px, transparent 6.5px) top / 36px 14px repeat-x,
    radial-gradient(circle, #FFF6D8 0 3px, #F7C55A 4.5px, transparent 6.5px) bottom / 36px 14px repeat-x,
    radial-gradient(circle, #FFF6D8 0 3px, #F7C55A 4.5px, transparent 6.5px) left / 14px 36px repeat-y,
    radial-gradient(circle, #FFF6D8 0 3px, #F7C55A 4.5px, transparent 6.5px) right / 14px 36px repeat-y;
  filter: drop-shadow(0 0 5px rgba(255, 214, 120, 0.95));
}
.show-mirror__glass { position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 10px; background: #000; }
@media (min-width: 960px) { .show-mirror__glass { aspect-ratio: 4 / 5; } }
.show-mirror__glass img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.35s ease; }
.show-mirror__glass img.is-swapping { opacity: 0; }
/* een beetje spiegelglans */
.show-mirror__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.06));
}
.show-mirror figcaption { margin: 0.9rem 0 0; text-align: center; color: var(--show-mist); font-size: 0.95rem; }

.show-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 6.2rem)); gap: 0.8rem; margin: 1.5rem 0 0; padding: 0.4rem; list-style: none; }
@media (min-width: 960px) { .show-thumbs { grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 38rem; } }
@media (max-width: 959px) { .show-thumbs { grid-template-columns: repeat(4, minmax(0, 5rem)); } }

/* kleine bovenregel boven een kop */
.show-eyebrow { margin: 0 0 0.6rem; color: var(--show-gold); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; }

/* ---------- de affichewand: elk feest is een theateraffiche ---------- */
.show-billboard {
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(212, 175, 55, 0.10), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 90px),
    #0A0C14;
}
.show-posters {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 20rem);
  gap: 1.4rem;
  margin: 2rem -1rem 0;
  padding: 1.2rem 1rem 1.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
}
@media (min-width: 960px) {
  .show-posters { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 2.5rem 0 0; padding: 1rem 0 0; overflow: visible; }
}
.show-posters li { scroll-snap-align: center; }
.show-poster {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  color: var(--show-ivory);
  text-decoration: none;
  background: #120D07;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6);
  transform: rotate(var(--tilt, -1.2deg));
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
.show-posters li:nth-child(2) .show-poster { --tilt: 1deg; }
.show-posters li:nth-child(3) .show-poster { --tilt: -0.6deg; }
.show-posters li:nth-child(4) .show-poster { --tilt: 1.4deg; }
.show-poster img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 50% 12%; transition: transform 0.6s ease; }
/* affichekader: dubbele gouden lijn */
.show-poster::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 2;
  border: 1px solid rgba(212, 175, 55, 0.7);
  outline: 1px solid rgba(212, 175, 55, 0.35);
  outline-offset: 4px;
  pointer-events: none;
}
/* glans die over de affiche trekt */
.show-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 200, 0.22) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}
.show-poster:hover, .show-poster:focus-visible { transform: rotate(0deg) translateY(-8px); box-shadow: 0 34px 70px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(212, 175, 55, 0.5); }
.show-poster:hover img { transform: scale(1.04); }
.show-poster:hover::after { transform: translateX(120%); transition: transform 0.9s ease; }
.show-poster__no {
  position: absolute;
  top: 1.3rem;
  right: 1.3rem;
  z-index: 2;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(212, 175, 55, 0.7);
  color: var(--show-gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(5, 7, 15, 0.55);
}
.show-poster__body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  margin-top: -3.2rem;
  padding: 3rem 1.3rem 1.5rem;
  background: linear-gradient(180deg, transparent, #080502 3.2rem);
  text-align: center;
}
.show-poster__top { color: var(--show-gold); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; }
.show-poster__title { font: 900 clamp(1.6rem, 2.3vw, 2rem) / 1.02 var(--tsx-serif); letter-spacing: 0.01em; }
.show-poster__sub { padding: 0.3rem 0; border-top: 1px solid rgba(212, 175, 55, 0.45); border-bottom: 1px solid rgba(212, 175, 55, 0.45); color: #E9DFC8; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.show-poster__text { color: #CFC6B4; font-size: 0.9rem; line-height: 1.45; }
.show-poster__cta { margin-top: 0.3rem; color: var(--show-gold); font-weight: 800; font-size: 0.92rem; }

/* veel gezocht: losse flyers aan het prikbord */
.show-flyers { margin-top: 2.2rem; }
.show-flyers__label { margin: 0 0 0.8rem; color: var(--show-mist); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.show-flyers ul { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.show-flyers ul a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border-radius: 2px;
  background: #EFE6D2;
  color: #1B1A17;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
  transform: rotate(var(--r, -1.5deg));
  transition: transform 0.2s ease, background 0.2s ease;
}
.show-flyers li:nth-child(even) a { --r: 1.2deg; }
.show-flyers li:nth-child(3n) a { --r: -0.5deg; }
.show-flyers ul a:hover, .show-flyers ul a:focus-visible { transform: rotate(0) translateY(-2px); background: var(--show-gold); }
.show-flyers__note { margin: 1.1rem 0 0; color: var(--show-mist); }

/* ---------- het draaiboek: van aanvraag tot applaus ---------- */
.show-cues { background: radial-gradient(60% 50% at 15% 30%, rgba(35, 72, 200, 0.16), transparent 70%), var(--show-dark-2); }
.show-cues__grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 960px) { .show-cues__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3.5rem; } }
.show-cues__photo { position: relative; margin: 1.5rem 0 0; max-width: 22rem; }
.show-cues__photo img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55); }
.show-cues__photo figcaption { margin-top: 0.7rem; color: var(--show-mist); font-size: 0.92rem; }
@media (max-width: 959px) { .show-cues__photo { display: none; } }

.show-clipboard {
  position: relative;
  padding: 2.4rem 1.2rem 1.4rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #5A3A1E, #3A2512);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
}
@media (min-width: 600px) { .show-clipboard { padding: 2.6rem 1.8rem 1.8rem; } }
.show-clipboard__clip {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  width: 7.5rem;
  height: 2.1rem;
  transform: translateX(-50%);
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #E4E7EC, #8D939C);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 #fff;
}
.show-clipboard__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-radius: 4px 4px 0 0;
  background: #F6F1E5;
  color: #6B6253;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 2px solid #1B1A17;
}
.show-cuelist {
  margin: 0;
  padding: 0.3rem 1.1rem 0.8rem;
  list-style: none;
  border-radius: 0 0 4px 4px;
  /* gelinieerd papier */
  background: repeating-linear-gradient(180deg, #F6F1E5 0 31px, #E3DCCB 31px 32px);
  color: #1B1A17;
}
.show-cue { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0.4rem 0.9rem; align-items: start; padding: 1rem 0; border-bottom: 1px dashed #CFC5AF; }
.show-cue:last-child { border-bottom: 0; }
@media (max-width: 520px) { .show-cue { grid-template-columns: auto minmax(0, 1fr); } .show-cue__body { grid-column: 1 / -1; } }
/* het cue-lampje: rood is standby, groen is GO */
.show-cue__light {
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.25rem;
  border-radius: 50%;
  background: #2FBF5B;
  box-shadow: 0 0 0 3px rgba(27, 26, 23, 0.85), 0 0 12px rgba(47, 191, 91, 0.9);
}
.js-cues .show-cue__light { background: #C8283C; box-shadow: 0 0 0 3px rgba(27, 26, 23, 0.85), 0 0 10px rgba(200, 40, 60, 0.85); transition: background 0.25s ease, box-shadow 0.25s ease; }
.js-cues .show-cue.is-go .show-cue__light { background: #2FBF5B; box-shadow: 0 0 0 3px rgba(27, 26, 23, 0.85), 0 0 14px rgba(47, 191, 91, 1); }
.show-cue__q { font: 900 1.15rem / 1.1 var(--tsx-serif); white-space: nowrap; }
.show-cue__q em { display: block; margin-top: 0.15rem; color: #8A7F69; font: 700 0.66rem / 1 var(--tsx-sans, inherit); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; }
.show-cue__body strong { display: block; font: 800 1.2rem / 1.2 var(--tsx-serif); }
.show-cue__body p { margin: 0.3rem 0 0; color: #4A4335; line-height: 1.55; }
.js-cues .show-cue__body strong::after { content: ""; }
.js-cues .show-cue.is-go .show-cue__q::after { content: " GO"; color: #1F8A41; font-size: 0.75rem; letter-spacing: 0.1em; }

/* de flightcase: wat altijd mee gaat */
.show-flightcase {
  position: relative;
  margin-top: 2.5rem;
  padding: 1.6rem 1.3rem 1.4rem;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 30%, transparent 70%, rgba(255, 255, 255, 0.05)),
    repeating-linear-gradient(45deg, #1A1B1F 0 6px, #1E1F24 6px 12px);
  border: 6px solid #9AA1AB;
  border-image: linear-gradient(180deg, #D7DBE1, #7E858F) 1;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
}
.show-flightcase::before, .show-flightcase::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 1.6rem;
  height: 1.6rem;
  background: radial-gradient(circle at 35% 35%, #F1F3F6, #7E858F);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.show-flightcase__title { margin: 0 0 1.1rem; color: #F2C230; font: 800 0.95rem / 1 "Courier New", monospace; letter-spacing: 0.3em; text-transform: uppercase; }
.show-flightcase ul { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .show-flightcase ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .show-flightcase ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.show-flightcase li { padding: 0.9rem 1rem; border-radius: 3px; background: rgba(5, 7, 15, 0.55); border-left: 4px solid #F2C230; color: var(--show-mist); line-height: 1.5; font-size: 0.95rem; }
.show-flightcase li strong { display: block; margin-bottom: 0.25rem; color: #F4EEE2; font: 800 0.82rem / 1.2 "Courier New", monospace; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- het programmaboekje: momenten op de dienstpagina's ---------- */
.show-bills { display: grid; gap: 1.2rem; margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: akte; }
@media (max-width: 759px) {
  .show-bills { grid-auto-flow: column; grid-auto-columns: min(84%, 22rem); margin: 2rem -1rem 0; padding: 0.4rem 1rem 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; }
  .show-bill { scroll-snap-align: center; }
}
@media (min-width: 760px) { .show-bills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .show-bills { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.show-bill {
  counter-increment: akte;
  position: relative;
  padding: 1.6rem 1.4rem 1.4rem;
  border-radius: 3px;
  background: linear-gradient(170deg, #F5EEDD, #E7DCC3);
  color: #1B1A17;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.show-bill::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(27, 26, 23, 0.35);
  outline: 1px solid rgba(27, 26, 23, 0.18);
  outline-offset: -5px;
  pointer-events: none;
}
.show-bill__act { display: block; color: #8E1B2A; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; }
.show-bill__act::after { content: " " counter(akte, upper-roman); }
.show-bill strong { display: block; margin: 0.45rem 0 0.6rem; font: 900 1.45rem / 1.1 var(--tsx-serif); }
.show-bill strong::after { content: "\2726"; display: block; margin-top: 0.5rem; color: #B08A2E; font-size: 0.8rem; }
.show-bill p { margin: 0; color: #4A4335; line-height: 1.55; font-size: 0.97rem; }
.show-intro-note { max-width: 46rem; margin: 1.2rem 0 0; color: var(--show-mist); line-height: 1.7; }
/* op mobiel eerst de spiegel, dan de knoppen: zo zie je meteen wat je aantikt */
@media (max-width: 959px) {
  .show-dressing__grid { gap: 0; }
  .show-dressing__text { display: contents; }
  .show-mirror { order: 1; margin-top: 0.75rem; }
  .show-thumbs { order: 2; justify-content: center; margin-top: 1.25rem; }
}
.show-thumbs button {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  border: 3px solid #F3EEE3;
  border-radius: 4px;
  background: #F3EEE3;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transform: rotate(var(--r, -2deg));
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.show-thumbs li:nth-child(even) button { --r: 2.5deg; }
.show-thumbs li:nth-child(3n) button { --r: -1deg; }
.show-thumbs button:hover { transform: rotate(0deg) scale(1.06); }
.show-thumbs button[aria-pressed="true"] { border-color: var(--show-gold); transform: rotate(0deg) scale(1.08); }
.show-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- de lichttafel ---------- */
.show-desk {
  background:
    radial-gradient(60% 70% at 75% 30%, color-mix(in srgb, var(--mood) 30%, transparent), transparent 70%),
    linear-gradient(180deg, var(--show-dark), var(--show-dark-2));
  transition: background 0.8s ease;
}
.show-desk__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 960px) { .show-desk__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; } }
/* op de telefoon staat het podium boven de fader, zodat je het licht ziet veranderen terwijl je schuift */
@media (max-width: 959px) {
  .show-desk__grid { display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .show-desk__grid > div:first-child { display: contents; }
  .show-desk .show-h2, .show-desk .show-lead { order: -2; margin-bottom: 0; }
  .show-stage { order: -1; }
}

.show-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(220, 232, 255, 0.1);
}
.show-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
/* op een groot scherm staat het podium staand, zodat de hele concertfoto zichtbaar is */
@media (min-width: 960px) {
  .show-stage { aspect-ratio: 4 / 5; max-height: 82vh; }
  .show-stage img { object-position: 50% 30%; }
}
/* het licht van de gekozen sfeer valt over het beeld */
.show-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, var(--mood), var(--mood-2));
  mix-blend-mode: color;
  opacity: 0.55;
  transition: background 0.8s ease;
}
/* drie lichtbundels van boven */
.show-stage__beam {
  position: absolute;
  z-index: 2;
  top: -10%;
  width: 34%;
  height: 120%;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--mood) 70%, white), transparent 75%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  opacity: 0.32;
  mix-blend-mode: screen;
  transform-origin: 50% 0;
  animation: show-sweep 7s ease-in-out infinite alternate;
  transition: background 0.8s ease;
}
.show-stage__beam:nth-child(2) { left: -6%; animation-delay: -2s; }
.show-stage__beam:nth-child(3) { left: 33%; animation-duration: 9s; }
.show-stage__beam:nth-child(4) { left: 72%; animation-delay: -4s; }
@keyframes show-sweep { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.show-stage__label {
  position: absolute;
  z-index: 3;
  left: 1rem;
  bottom: 0.9rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(5, 7, 15, 0.7);
  color: var(--show-ivory);
  font-size: 0.85rem;
  font-weight: 600;
}

.show-fader { margin: 0 0 1.5rem; }
.show-fader label { display: block; margin-bottom: 0.9rem; font-weight: 600; color: var(--show-ivory); }
.show-fader input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2.75rem;
  background: transparent;
  cursor: pointer;
}
.show-fader input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #F2B35E, #D4AF37, #E77A8B, #B04BFF);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.show-fader input[type="range"]::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #F2B35E, #D4AF37, #E77A8B, #B04BFF);
}
.show-fader input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2.2rem;
  height: 2.75rem;
  margin-top: -1.05rem;
  border-radius: 6px;
  border: 2px solid #1A1A1A;
  background: linear-gradient(180deg, #F4F4F4, #9C9C9C 48%, #2B2B2B 50%, #8C8C8C 52%, #E8E8E8);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}
.show-fader input[type="range"]::-moz-range-thumb {
  width: 2.2rem;
  height: 2.75rem;
  border-radius: 6px;
  border: 2px solid #1A1A1A;
  background: linear-gradient(180deg, #F4F4F4, #9C9C9C 48%, #2B2B2B 50%, #8C8C8C 52%, #E8E8E8);
}
.show-fader input[type="range"]:focus-visible { outline: 3px solid var(--tsx-glow); outline-offset: 4px; border-radius: 8px; }
.show-fader__scale { display: flex; justify-content: space-between; margin-top: 0.4rem; font-size: 0.85rem; color: var(--show-mist); }

.show-moods { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.show-mood h3 { margin: 0 0 0.35rem; font: 800 1.7rem var(--tsx-serif); color: var(--show-ivory); }
.show-mood p { margin: 0 0 0.8rem; color: var(--show-mist); line-height: 1.6; }
.show-mood ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.show-mood li {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mood) 60%, transparent);
  background: color-mix(in srgb, var(--mood) 14%, transparent);
  color: var(--show-ivory);
  font-size: 0.92rem;
}
/* met script: alleen de gekozen sfeer is zichtbaar */
.js-desk .show-mood { display: none; }
.js-desk .show-mood.is-active { display: block; animation: show-rise 0.45s ease both; }

/* ---------- programma: kies je feest ---------- */
.show-programme { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.show-programme li { border-top: 1px solid rgba(220, 232, 255, 0.12); }
.show-programme li:last-child { border-bottom: 1px solid rgba(220, 232, 255, 0.12); }
.show-programme a {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1.5rem;
  align-items: center;
  padding: 1.5rem 0.25rem;
  text-decoration: none;
  overflow: hidden;
}
.show-programme a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 140% at var(--px, 20%) 50%, rgba(212, 175, 55, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}
.show-programme a:hover::before, .show-programme a:focus-visible::before { opacity: 1; }
.show-programme strong { position: relative; font: 900 clamp(1.7rem, 4.6vw, 3rem) / 1.05 var(--tsx-serif); color: var(--show-ivory); transition: color 0.25s; }
.show-programme a:hover strong { color: var(--show-gold); }
.show-programme span { position: relative; grid-column: 1; max-width: 38rem; color: var(--show-mist); line-height: 1.55; }
.show-programme i { position: relative; grid-column: 2; grid-row: 1 / span 2; font-size: 1.4rem; color: var(--show-gold); transition: transform 0.25s; }
.show-programme a:hover i { transform: translateX(6px); }

/* ---------- kijk en luister ---------- */
.show-screens { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .show-screens { grid-template-columns: 1.6fr 1fr; } .show-screens > :first-child { grid-row: span 2; } }
.show-screen { border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); border: 1px solid rgba(220, 232, 255, 0.12); }
.show-screen p { margin: 0; padding: 0.8rem 1rem; color: var(--show-mist); font-size: 0.92rem; }
.show-screen p strong { color: var(--show-ivory); }

/* ---------- zie en hoor het live: monitor en setlist ---------- */
.show-live {
  background:
    radial-gradient(50% 60% at 25% 40%, rgba(35, 72, 200, 0.22), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 90px),
    var(--show-dark-2);
}
.show-live__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .show-live__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 4.5rem; } }

.show-monitor {
  overflow: hidden;
  border-radius: 14px;
  border: 10px solid #121212;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 90px rgba(0, 0, 0, 0.65), 0 0 70px rgba(35, 72, 200, 0.3);
}
.show-monitor .video-lite, .show-monitor iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.show-monitor__caption { margin: 0.9rem 0 0; color: var(--show-mist); }
.show-monitor__caption strong { color: var(--show-ivory); }

.show-setlist {
  position: relative;
  max-width: 24rem;
  margin: 1rem auto 0;
  padding: 2.4rem 1.8rem 1.6rem;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2.15rem, rgba(30, 60, 140, 0.08) 2.15rem 2.2rem),
    #F3EEE3;
  color: #17140F;
  font-family: 'Permanent Marker', 'Comic Sans MS', cursive;
  transform: rotate(-2.2deg);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
}
/* gaffertape op de hoeken */
.show-setlist::before,
.show-setlist::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 92px;
  height: 30px;
  background: linear-gradient(180deg, rgba(58, 58, 58, 0.94), rgba(38, 38, 38, 0.94));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.show-setlist::before { left: -18px; transform: rotate(-32deg); }
.show-setlist::after { right: -18px; transform: rotate(28deg); }
.show-setlist__head { margin: 0 0 0.6rem; font-size: 2rem; letter-spacing: 0.04em; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.show-setlist ol { margin: 0; padding: 0; list-style: none; counter-reset: lied; }
.show-setlist li { counter-increment: lied; font-size: 1.35rem; line-height: 1.3; padding: 0.2rem 0; }
.show-setlist li::before { content: counter(lied) ". "; }
.show-setlist .is-plain { color: #5E574A; }
.show-setlist button {
  min-height: 44px;
  margin: -0.3rem -0.6rem;
  padding: 0.3rem 0.6rem;
  border: 3px solid transparent;
  border-radius: 50% / 60%;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.show-setlist button::after { content: " \25B6"; font-size: 0.7em; color: #B3261E; }
.show-setlist button:hover { color: #B3261E; }
.show-setlist button[aria-pressed="true"] { border-color: #B3261E; }
.show-setlist button:focus-visible { outline: 3px solid #1B4FD8; outline-offset: 2px; }
.show-setlist__note { margin: 1rem 0 0; font-size: 1rem; color: #5E574A; }
@media (min-width: 960px) { .show-setlist { margin: 0; } }

/* ---------- dienstenpagina's: kortere hero met foto, programma zonder links ---------- */
.show-hero--page { height: auto !important; }
.show-hero--page .show-hero__pin { position: relative !important; height: 88svh; min-height: 32rem; }
.show-hero--page .show-hero__stage img { filter: saturate(1.05); }
/* lange woorden als "Zorgentertainment" moeten op een smal scherm passen */
.show-hero--page h1 { max-width: 16ch; font-size: clamp(1.95rem, min(8.3vw, 9svh), 5.2rem); overflow-wrap: break-word; hyphens: auto; }
@media (min-width: 900px) { .show-hero--page .show-hero__pin { height: 86vh; } }
.show-programme__row {
  display: grid;
  gap: 0.35rem;
  padding: 1.4rem 0.25rem;
}
.show-programme__row strong { font: 900 clamp(1.5rem, 4vw, 2.4rem) / 1.08 var(--tsx-serif); color: var(--show-ivory); }
.show-programme__row span { max-width: 44rem; color: var(--show-mist); line-height: 1.6; }
.show-tickets--single { grid-template-columns: minmax(0, 28rem) !important; grid-auto-flow: row !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; }

/* ---------- kaartjes ---------- */
.show-tickets { display: grid; gap: 1.5rem; }
/* telefoon: de kaartjes liggen naast elkaar, je veegt erdoorheen */
@media (max-width: 899px) {
  .show-tickets { grid-auto-flow: column; grid-auto-columns: min(84%, 22rem); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -1rem; padding: 1rem 1rem 2rem; align-items: stretch; }
  .show-ticket { scroll-snap-align: center; }
}
@media (min-width: 900px) { .show-tickets { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.show-ticket { grid-template-rows: 1fr auto; }
.show-ticket {
  --notch: 14px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  color: #1B1A17;
  background: #F6EBCF;
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform 0.2s ease-out;
}
.show-ticket--pick { background: linear-gradient(135deg, #F7D774, #D4AF37 55%, #B8912A); }
.show-ticket--pick .show-ticket__kind, .show-ticket--pick .show-ticket__fine { color: #1B1A17; }
.show-ticket__main { padding: 1.6rem 1.6rem 1.2rem; }
.show-ticket__kind { margin: 0 0 0.2rem; font-size: 0.85rem; font-weight: 600; color: #5A4A20; }
.show-ticket h3 { margin: 0; font: 900 2.2rem / 1 var(--tsx-serif); }
.show-ticket__time { margin: 0.3rem 0 1rem; font-weight: 600; }
.show-ticket ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.show-ticket li { padding-left: 1.3rem; position: relative; font-size: 0.97rem; line-height: 1.45; }
.show-ticket li::before { content: "\2605"; position: absolute; left: 0; font-size: 0.8rem; top: 0.15rem; }
.show-ticket__stub {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.6rem 1.5rem;
  border-top: 2px dashed rgba(27, 26, 23, 0.35);
}
.show-ticket__price { margin: 0; font: 900 2.6rem / 1 var(--tsx-serif); }
.show-ticket__price small { display: block; font: 600 0.85rem var(--tsx-sans); margin-bottom: 0.2rem; }
.show-ticket__fine { margin: 0.35rem 0 0; font-size: 0.85rem; color: #4A3F22; }
.show-ticket .tsx-btn { background: #1B1A17; color: var(--show-ivory); }
.show-ticket .tsx-btn:hover { background: #000; }
.show-ticket__tag {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: #1B1A17;
  color: #F7D774;
  font-size: 0.82rem;
  font-weight: 600;
}

/* ---------- van aanvraag tot applaus ---------- */
.show-steps { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; counter-reset: stap; }
@media (min-width: 900px) { .show-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.show-steps li { counter-increment: stap; padding: 1.5rem; border-radius: 14px; border: 1px solid rgba(220, 232, 255, 0.12); background: rgba(220, 232, 255, 0.03); color: var(--show-mist); line-height: 1.6; }
.show-steps li::before { content: counter(stap); display: block; margin-bottom: 0.6rem; font: 900 3rem / 1 var(--tsx-serif); color: var(--show-gold); }
.show-steps strong { display: block; margin-bottom: 0.3rem; font: 800 1.35rem var(--tsx-serif); color: var(--show-ivory); }

/* ---------- kassa: het formulier ---------- */
.show-boxoffice { background: radial-gradient(60% 60% at 80% 20%, rgba(212, 175, 55, 0.12), transparent 70%), var(--show-dark-2); }
.show-boxoffice .tsx-form { background: rgba(5, 7, 15, 0.7); border-color: rgba(212, 175, 55, 0.35); }

/* ---------- de backstage pass: vult zich terwijl je het formulier invult ---------- */
.show-pass-wrap { position: relative; margin: 2.2rem 0 0; padding-top: 4.2rem; max-width: 20rem; }
/* het koord */
.show-pass-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.4rem;
  height: 4.6rem;
  transform: translateX(-50%);
  border: 0.55rem solid #8E1B2A;
  border-top: 0;
  border-radius: 0 0 1.4rem 1.4rem;
}
.show-pass {
  position: relative;
  transform-origin: 50% -4rem;
  animation: show-swing 6s ease-in-out infinite;
  border-radius: 14px;
  background: linear-gradient(160deg, #F7F1E4, #E6DCC6);
  color: #17140F;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
/* het clipje */
.show-pass::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  left: 50%;
  width: 3rem;
  height: 0.55rem;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #05070F;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2);
}
@keyframes show-swing { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.show-pass__head {
  padding: 1.7rem 1.2rem 0.9rem;
  background: linear-gradient(120deg, #0B1020, #1B2A6B 60%, #2348C8);
  color: #F4EEE2;
}
.show-pass__access { display: block; font: 900 1.55rem / 1 var(--tsx-serif); letter-spacing: 0.02em; }
.show-pass__brand { display: block; margin-top: 0.35rem; color: var(--show-gold); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
/* hologramstrook */
.show-pass__holo {
  height: 0.55rem;
  background: linear-gradient(100deg, #D4AF37, #F7E7A8, #9EE6F2, #E7A8F2, #D4AF37);
  background-size: 300% 100%;
  animation: show-holo 5s linear infinite;
}
@keyframes show-holo { to { background-position: 300% 0; } }
.show-pass__body { display: grid; gap: 0.75rem; padding: 1rem 1.2rem 0.6rem; margin: 0; }
.show-pass__row { display: grid; gap: 0.1rem; }
.show-pass__row dt { color: #6B6253; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.show-pass__row dd { margin: 0; font: 700 1.08rem / 1.25 var(--tsx-serif); overflow-wrap: anywhere; }
.show-pass__row dd.is-empty { color: #A99E88; font-weight: 400; font-style: italic; }
.show-pass__row dd.is-new { animation: show-ink 0.45s ease-out; }
@keyframes show-ink { from { color: #2348C8; } }
.show-pass__name dd { font-size: 1.45rem; }
.show-pass__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.show-pass__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 0.4rem 1.2rem 1.1rem; }
.show-pass__code {
  width: 8.5rem;
  height: 2.1rem;
  background: repeating-linear-gradient(90deg, #17140F 0 2px, transparent 2px 4px, #17140F 4px 5px, transparent 5px 8px, #17140F 8px 11px, transparent 11px 13px);
}
.show-pass__by { color: #6B6253; font-size: 0.7rem; text-align: right; }
/* de stempel na het versturen */
.show-pass__stamp {
  position: absolute;
  right: 0.9rem;
  bottom: 2.6rem;
  padding: 0.35rem 0.7rem;
  border: 3px solid #B3122E;
  border-radius: 6px;
  color: #B3122E;
  font: 900 0.95rem / 1.1 var(--tsx-serif);
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: rotate(-12deg) scale(2.2);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.show-pass.is-sent .show-pass__stamp { opacity: 0.88; transform: rotate(-12deg) scale(1); transition: transform 0.35s cubic-bezier(0.2, 1.6, 0.4, 1), opacity 0.2s ease; }
@media (max-width: 959px) {
  .show-pass-wrap { margin: 1.8rem auto 0.4rem; }
}
html.show-paused .show-pass, html.show-paused .show-pass__holo { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .show-pass, .show-pass__holo, .show-pass__row dd.is-new { animation: none; }
  .show-pass.is-sent .show-pass__stamp { transition: none; }
}

/* ---------- pauzeknop en minder beweging ---------- */
html.show-paused .show-marquee__track,
html.show-paused .show-stage__beam { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .show-hero { height: auto; }
  .show-hero__pin { position: relative; }
  .show-hero__stage, .show-hero__content { transform: none !important; opacity: 1 !important; border-radius: 0 !important; }
  .show-hero__stage video { display: none; }
  .show-hero__spot, .show-hero__dark { display: none; }
  .show-hero h1, .show-hero__lead, .show-hero__proof, .show-hero__actions { animation: none !important; }
  .show-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .show-marquee__dup { display: none; }
  .show-stage__beam { animation: none; }
  .show-ticket { transform: none !important; }
  .js-desk .show-mood.is-active { animation: none; }
}

/* de uitsparingen bij de scheurlijn: twee halve cirkels in de kleur van de zaal */
.show-ticket__stub::before,
.show-ticket__stub::after {
  content: "";
  position: absolute;
  top: -15px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--show-dark);
}
.show-ticket__stub::before { left: -15px; }
.show-ticket__stub::after { right: -15px; }
/* ==========================================================================
   Stadspagina's in podiumstijl. De bestaande opmaak (Tailwind en location-premium)
   blijft staan; deze regels kleuren hem om naar het podium.
   ========================================================================== */
.show-city-intro p { max-width: 46rem; margin: 0; color: var(--show-ivory); font: 400 clamp(1.1rem, 1rem + 0.5vw, 1.35rem) / 1.65 var(--tsx-sans, "Poppins", sans-serif); }

/* reviews */
body.show-city .tsx-proof .tsx-h2 { color: var(--show-ivory); font: 900 clamp(2.1rem, 6.4vw, 4.2rem) / 1.02 var(--tsx-serif); max-width: 18ch; }
body.show-city .tsx-proof .tsx-score, body.show-city .tsx-proof .tsx-fine { color: var(--show-mist); }
body.show-city .tsx-review { background: rgba(220, 232, 255, 0.04); border: 1px solid rgba(220, 232, 255, 0.14); color: var(--show-ivory); }
body.show-city .tsx-review blockquote p { color: var(--show-ivory); }
body.show-city .tsx-review__by { color: var(--show-mist); }

/* de lichte secties worden donker podium */
body.show-city .location-section-warm h2,
body.show-city .location-section-dark h2 { color: var(--show-ivory) !important; font-family: var(--tsx-serif); font-weight: 900; line-height: 1.05; }
body.show-city .location-section-warm p,
body.show-city .location-section-dark p { color: var(--show-mist) !important; }
body.show-city .location-kicker { color: var(--show-gold) !important; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; background: none; border: 0; padding: 0; }
body.show-city .location-section-warm ul li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; border-radius: 2px; background: #EFE6D2; color: #1B1A17 !important; font-weight: 700; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); transform: rotate(-1deg); }
body.show-city .location-section-warm ul li:nth-child(even) { transform: rotate(1.2deg); }
/* fotogrid als polaroids */
body.show-city .location-photo-grid img { border: 6px solid #F3EEE3; border-bottom-width: 22px; border-radius: 3px; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55); transform: rotate(-1.5deg); }
body.show-city .location-photo-grid img:nth-child(even) { transform: rotate(1.8deg); }

/* gelegenheden worden aktes uit het programmaboekje */
body.show-city .location-warm-card {
  counter-increment: akte;
  position: relative;
  border: 0 !important;
  border-radius: 3px !important;
  background: linear-gradient(170deg, #F5EEDD, #E7DCC3) !important;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5) !important;
  padding-top: 2.6rem !important;
}
body.show-city .location-warm-card::before {
  content: "Akte " counter(akte, upper-roman);
  position: absolute;
  top: 1.1rem;
  left: 0;
  right: 0;
  color: #8E1B2A;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
body.show-city .location-warm-card::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(27, 26, 23, 0.3); pointer-events: none; }
body.show-city .location-warm-card p { color: #4A4335 !important; font-size: 0.97rem !important; }

/* veelgestelde vragen */
body.show-city .show-city-faq h2 { color: var(--show-ivory) !important; font-weight: 900; }

/* met lippenstift op het glas geschreven */
.show-about-hero__title {
  position: absolute;
  z-index: 2;
  left: 6%;
  right: 6%;
  bottom: 7%;
  margin: 0;
  color: #E0263E;
  font: 400 clamp(2.2rem, 8vw, 3.6rem) / 1 'Permanent Marker', 'Comic Sans MS', cursive;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.4), 0 2px 10px rgba(0, 0, 0, 0.55);
  transform: rotate(-6deg);
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.tsx-seen) .show-about-hero__title { animation: show-write 1.4s 0.4s ease-out both; }
}
@keyframes show-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.show-about-hero__lead { margin: 0 0 1rem; color: var(--show-ivory); font: 900 clamp(1.7rem, 4.5vw, 2.8rem) / 1.1 var(--tsx-serif); }
.show-about-hero__body { margin: 0 0 1.6rem; color: var(--show-mist); font-size: 1.15rem; line-height: 1.65; max-width: 34rem; }

/* gedeelde herkleuring van de oude Tailwind-blokken */
body.show-about main h2 { color: var(--show-ivory) !important; font-weight: 900 !important; }
body.show-about main .text-ts-gold { color: var(--show-gold) !important; }

/* het verhaal: foto als polaroid */
body.show-about .show-about-story img { border: 8px solid #F3EEE3 !important; border-bottom-width: 30px !important; border-radius: 3px !important; transform: rotate(-1.5deg); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55) !important; }

/* hoogtepunten: een prikbord vol backstage passes */
body.show-about .show-about-passes .grid > div,
body.show-about .show-about-passes .grid > a {
  position: relative;
  padding: 2.4rem 1.4rem 1.4rem !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(160deg, #F7F1E4, #E6DCC6) !important;
  color: #17140F;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55);
  transform: rotate(-1.4deg);
  transition: transform 0.25s ease;
  overflow: hidden;
}
body.show-about .show-about-passes .grid > :nth-child(even) { transform: rotate(1.3deg); }
body.show-about .show-about-passes .grid > :hover { transform: rotate(0) translateY(-4px); }
/* gekleurde kop en het gaatje voor het koord */
body.show-about .show-about-passes .grid > div::before,
body.show-about .show-about-passes .grid > a::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1.5rem;
  background: linear-gradient(120deg, #0B1020, #1B2A6B 60%, #2348C8);
}
body.show-about .show-about-passes .grid > div::after,
body.show-about .show-about-passes .grid > a::after {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: 50%;
  width: 2.6rem;
  height: 0.5rem;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #05070F;
}
body.show-about .show-about-passes .grid p { color: #4A4335 !important; }
body.show-about .show-about-passes .grid p.text-ts-gold { color: #8E1B2A !important; }

/* wat ik meeneem: flightcase-labels */
body.show-about .show-about-kit .grid > div {
  border: 0 !important;
  border-left: 4px solid #F2C230 !important;
  border-radius: 3px !important;
  background: repeating-linear-gradient(45deg, #1A1B1F 0 6px, #1E1F24 6px 12px) !important;
  box-shadow: inset 0 0 0 1px rgba(215, 219, 225, 0.25), 0 18px 36px rgba(0, 0, 0, 0.45);
}

/* cijfers in lichtreclame */
body.show-about .show-about-stats .grid > div {
  padding: 1.4rem 0.8rem;
  border: 10px solid transparent;
  border-image: radial-gradient(circle, #FFF6D8 0 2.5px, #F7C55A 3.5px, transparent 5px) 10 / 10px / 0 round;
  background: rgba(14, 10, 4, 0.9);
}
body.show-about .show-about-stats .grid > div p:first-child { color: #FFE7A3 !important; text-shadow: 0 0 18px rgba(247, 197, 90, 0.75); }

/* in beeld: polaroids */
body.show-about .show-about-gallery .grid > div { border: 6px solid #F3EEE3; border-bottom-width: 20px; border-radius: 3px !important; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5); transform: rotate(-1.2deg); }

/* ==========================================================================
   De podiumhuid voor de overige pagina's (repertoire, agenda, kerst, blog, voorwaarden).
   De opmaak van die pagina's blijft staan; deze laag kleurt hem om naar het podium.
   ========================================================================== */
body.show-skin { background: var(--show-dark) !important; color: var(--show-ivory); }
body.show-skin #site-header header { background: rgba(5, 7, 15, 0.94) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none !important; border-bottom: 1px solid rgba(212, 175, 55, 0.18); }

/* de eerste sectie wordt een podium: spotlicht van boven, zaal in het donker */
body.show-skin :is(main > section, body > section):first-of-type { position: relative; isolation: isolate; }
body.show-skin :is(main > section, body > section):first-of-type::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(34% 70% at 72% -12%, rgba(255, 238, 196, 0.22), transparent 70%),
    radial-gradient(26% 60% at 18% -10%, rgba(120, 150, 255, 0.16), transparent 70%),
    linear-gradient(180deg, transparent 70%, var(--show-dark));
}
body.show-skin :is(main > section, body > section):first-of-type > *:not([class*="absolute"]) { position: relative; z-index: 2; }
body.show-skin :is(main > section, body > section):first-of-type h1 { color: var(--show-ivory) !important; font-weight: 900 !important; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6); }

/* lichte vlakken worden donker, donkere tekst wordt licht */
body.show-skin :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-blue-50, .bg-red-50, .bg-green-50, .bg-yellow-50, .bg-amber-50) { background-color: rgba(220, 232, 255, 0.05) !important; }
body.show-skin :is(.text-gray-600, .text-gray-700, .text-gray-800) { color: var(--show-mist) !important; }
body.show-skin :is(.text-gray-900, .text-black, .text-\[\#151515\], .text-ts-dark):not(.bg-ts-gold):not([class*="bg-ts-gold"]) { color: var(--show-ivory) !important; }
body.show-skin main a:not([class*="bg-"]):not(.tsx-btn) { text-decoration-color: rgba(212, 175, 55, 0.5); }
body.show-skin main h2 { color: var(--show-ivory); }

/* repertoire: warme secties donker, sfeerkaarten als aktes */
body.show-skin .rep-section-warm, body.show-skin .rep-section-dark { background: var(--show-dark) !important; color: var(--show-ivory); }
body.show-skin .rep-section-dark { background: var(--show-dark-2) !important; }
body.show-skin .rep-section-warm p { color: var(--show-mist); }
body.show-skin .rep-panel { background: rgba(220, 232, 255, 0.04) !important; border: 1px solid rgba(212, 175, 55, 0.3) !important; }
body.show-skin .rep-warm-card {
  position: relative;
  border: 0 !important;
  border-radius: 3px !important;
  background: linear-gradient(170deg, #F5EEDD, #E7DCC3) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5) !important;
}
body.show-skin .rep-warm-card::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(27, 26, 23, 0.3); pointer-events: none; }
body.show-skin .rep-warm-card :is(h3, h4, p, li, span) { color: #1B1A17 !important; }
body.show-skin .rep-warm-card :is(p, li) { color: #4A4335 !important; }

/* blogoverzicht: artikelen als affiches */
body.show-skin.blog-premium main article.rounded-xl { position: relative; border-radius: 4px !important; border-color: rgba(212, 175, 55, 0.45) !important; background: #0B0805 !important; transition: transform 0.3s ease, box-shadow 0.3s ease; }
body.show-skin.blog-premium main article.rounded-xl::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(212, 175, 55, 0.35); pointer-events: none; border-radius: 2px; }
body.show-skin.blog-premium main article.rounded-xl:hover { transform: translateY(-6px) rotate(-0.4deg); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); }

/* blogartikel: gouden initiaal en rustige leesbreedte */
body.show-skin .prose > p:first-of-type::first-letter { float: left; margin: 0.1rem 0.6rem 0 0; color: var(--show-gold); font: 900 3.6rem / 0.85 var(--tsx-serif, "Playfair Display", serif); }
body.show-skin .prose strong { color: var(--show-ivory) !important; }

/* de lichtkrant die show.js onder de eerste sectie zet */
body.show-skin .show-marquee { position: relative; z-index: 3; }
/* lettertypen voor pagina's zonder site-premium.css */
body.show-skin:not(.tsx-page) { --tsx-serif: 'Playfair Display', Georgia, serif; --tsx-sans: 'Poppins', system-ui, sans-serif; }

/* blogoverzicht: de nieuwste artikelen missen de binnenopmaak van de oudere; hier gelijkgetrokken */
body.show-skin.blog-premium main article.rounded-xl > a > h2 { margin: 0; padding: 1.4rem 1.5rem 0.4rem; color: var(--show-ivory); font: 800 1.35rem / 1.25 var(--tsx-serif); }
body.show-skin.blog-premium main article.rounded-xl > a { text-decoration: none; }
body.show-skin.blog-premium main article.rounded-xl > :is(p, time) { display: block; margin: 0.5rem 0 0; padding: 0 1.5rem; color: var(--show-mist); line-height: 1.6; }
body.show-skin.blog-premium main article.rounded-xl > time { order: -1; font-size: 0.85rem; }
body.show-skin.blog-premium main article.rounded-xl > p:last-child { padding-bottom: 1.5rem; }
body.show-skin.blog-premium main article.rounded-xl > p:last-child a { color: var(--show-gold); font-weight: 700; text-decoration: none; }

/* tourneekaart */
.show-tourcard__top { margin: 0; color: var(--show-gold); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; }
.show-tourcard__city { margin: 0.4rem 0 0.2rem; color: var(--show-ivory); font: 900 clamp(2.2rem, 6vw, 3.2rem) / 1 var(--tsx-serif); }
.show-tourcard__route { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 1rem 0 0.2rem; color: #E9DFC8; font-size: 0.9rem; font-weight: 700; }
.show-tourcard__dist { margin: 0.2rem 0 0; color: var(--show-mist); font-size: 0.85rem; }
.show-tourcard__facts li { position: relative; padding-left: 1.3rem; color: #D9DEE9; line-height: 1.55; font-size: 0.97rem; }
.show-tourcard__facts li::before { content: "\2726"; position: absolute; left: 0; top: 0.05rem; color: var(--show-gold); font-size: 0.8rem; }

/* lokale kalender */
.show-cal li { overflow: hidden; border-radius: 6px; background: #F5EEDD; color: #1B1A17; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45); }
.show-cal strong { display: block; padding: 0.6rem 0.7rem 0.15rem; font: 800 1rem / 1.2 var(--tsx-serif); }
.show-cal p { margin: 0; padding: 0 0.7rem 0.7rem; color: #4A4335; font-size: 0.85rem; line-height: 1.45; }

/* zaalkaarten */
.show-venue strong { display: block; color: var(--show-ivory); font: 800 1.12rem / 1.25 var(--tsx-serif); }
.show-venue p { margin: 0.45rem 0 0; color: #C9D0DE; font-size: 0.92rem; line-height: 1.5; }
.show-venue__for { margin: 0.5rem 0 0; color: var(--show-mist); font-size: 0.78rem; }
.show-tour__note { margin: 1.2rem 0 0; color: var(--show-mist); font-size: 0.92rem; }
/* ansichtkaart van de stad bovenaan de tourneekaart */
.show-postcard img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* ==========================================================================
   Het podium in lagen: echte foto, rook, lichtbundels, stof en Bernd vrijstaand.
   Alle lagen liggen in hetzelfde vlak (.show-plate) met de verhouding van de foto,
   zodat de uitsnede altijd precies op de foto valt.
   ========================================================================== */
.show-hero__stage { container-type: size; }
.show-plate {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, calc(100cqh * 2048 / 1228));
  aspect-ratio: 2048 / 1228;
  transform: translate(-50%, -50%);
  animation: show-dolly 26s ease-in-out infinite alternate;
  transform-origin: 51% 45%;
}
@keyframes show-dolly { from { transform: translate(var(--tx, -50%), var(--ty, -50%)) scale(1); } to { transform: translate(var(--tx, -50%), var(--ty, -50%)) scale(1.07); } }
.show-hero__stage .show-plate img { position: absolute; object-fit: fill; }
.show-hero__stage .show-plate__base { inset: 0; width: 100%; height: 100%; z-index: 0; }
/* Bernd vrijstaand: uitgesneden op x 820-1260, y 360-1110 van 2048 x 1228 */
.show-hero__stage .show-plate__cut { right: auto; bottom: auto; left: 40.039%; top: 29.316%; width: 21.484%; height: 61.075%; z-index: 4; filter: drop-shadow(0 0 18px rgba(170, 200, 255, 0.25)); }

/* rook: zachte wolken die traag door de zaal drijven */
.show-plate__haze {
  position: absolute;
  inset: -10% -10% 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(18% 14% at 20% 60%, rgba(190, 210, 255, 0.55), transparent 70%),
    radial-gradient(22% 16% at 48% 52%, rgba(210, 225, 255, 0.45), transparent 70%),
    radial-gradient(20% 15% at 78% 62%, rgba(180, 200, 255, 0.5), transparent 70%),
    radial-gradient(16% 12% at 62% 40%, rgba(230, 235, 255, 0.35), transparent 70%),
    radial-gradient(18% 13% at 34% 38%, rgba(200, 215, 255, 0.35), transparent 70%);
  background-size: 140% 140%;
  filter: blur(18px);
}
.show-plate__haze--back { z-index: 1; opacity: 0.55; animation: show-haze 38s ease-in-out infinite alternate; }
.show-plate__haze--front { z-index: 5; opacity: 0.16; animation: show-haze 52s ease-in-out infinite alternate-reverse; }
@keyframes show-haze { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }

/* lichtbundels vanuit de truss bovenin de foto */
.show-plate__beams { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; }
.show-plate__beams span {
  position: absolute;
  top: -4%;
  width: 16%;
  height: 92%;
  transform-origin: 50% 0;
  background: linear-gradient(to bottom, rgba(205, 222, 255, 0.55), rgba(170, 195, 255, 0.18) 55%, rgba(170, 195, 255, 0) 92%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  filter: blur(5px);
  opacity: 0.55;
  animation: show-sway 9s ease-in-out infinite alternate;
}
.show-plate__beams span:nth-child(1) { left: 12%; --a: -16deg; --b: -4deg; animation-duration: 11s; }
.show-plate__beams span:nth-child(2) { left: 27%; --a: 8deg; --b: -10deg; animation-duration: 8s; opacity: 0.45; }
.show-plate__beams span:nth-child(3) { left: 42%; --a: -6deg; --b: 7deg; animation-duration: 12s; background: linear-gradient(to bottom, rgba(255, 236, 200, 0.6), rgba(255, 220, 170, 0.16) 55%, transparent 92%); }
.show-plate__beams span:nth-child(4) { left: 58%; --a: 10deg; --b: -6deg; animation-duration: 9.5s; opacity: 0.45; }
.show-plate__beams span:nth-child(5) { left: 73%; --a: 4deg; --b: 16deg; animation-duration: 10.5s; }
@keyframes show-sway { from { transform: rotate(var(--a)); } to { transform: rotate(var(--b)); } }

/* stof in het licht (getekend door show.js, alleen op grotere schermen) */
.show-plate__dust { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }

html.show-paused .show-plate, html.show-paused .show-plate__haze, html.show-paused .show-plate__beams span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .show-plate, .show-plate__haze, .show-plate__beams span { animation: none !important; }
  .show-plate { transform: translate(-50%, -50%); }
  .show-plate__dust { display: none; }
}
/* op een breed scherm staat Bernd rechts van de tekst: de foto wordt iets breder en schuift zo
   dat hij (op 51% van de foto) op ongeveer 67% van het scherm uitkomt */
@media (min-width: 900px) {
  .show-plate { --pw: max(132cqw, calc(100cqh * 2048 / 1228)); --tx: 0%; width: var(--pw); left: calc(67cqw - 0.51 * var(--pw)); transform: translate(0, -50%); }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) { .show-plate { transform: translate(0, -50%); } }
/* de hero-tekst blijft altijd onder het menu: hij staat onderaan, maar mag nooit boven de header uitkomen.
   Past hij niet, dan loopt hij naar onderen door in plaats van achter het menu. */
.show-hero__content { top: 5.25rem; display: flex; flex-direction: column; justify-content: safe flex-end; }
.show-hero__lead { font-size: clamp(1rem, min(2.4vw, 2.3svh), 1.2rem); }
@media (max-height: 640px) and (min-width: 900px) {
  .show-hero__lead { margin-bottom: 0.5rem; }
  .show-hero__proof { margin-bottom: 0.8rem; }
  .show-hero__content { padding-bottom: 2rem; }
}
/* op telefoon en tablet staan hoofd en schouders direct onder het menu, de tekst valt over het podium */
@media (max-width: 899px) {
  .show-plate { --ty: 0%; width: auto; height: 130cqh; top: calc(6.25rem - 0.31 * 130cqh); transform: translate(-50%, 0); transform-origin: 51% 30%; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .show-plate { transform: translate(-50%, 0); } }
/* tekstkolom blijft links van Bernd op brede schermen */
@media (min-width: 900px) {
  .show-hero__content .tsx-wrap > * { max-width: min(36rem, 46vw); }
  .show-hero h1 { max-width: 12ch; }
}

/* ---------- podiumrook: een laag die over de vloer rolt ----------
   Elke laag is twee keer zo breed als het podium en schuift precies een halve breedte op,
   zodat de lus naadloos is. De wolken blijven binnen hun tegel, dus er is geen naad. */
.show-plate__fog {
  position: absolute;
  left: 0;
  width: 200%;
  pointer-events: none;
  mix-blend-mode: screen;
  background-repeat: repeat-x;
  background-size: 50% 100%;
  background-image:
    radial-gradient(ellipse 22% 38% at 12% 62%, rgba(235, 242, 255, 0.85), transparent 72%),
    radial-gradient(ellipse 26% 30% at 34% 70%, rgba(220, 232, 255, 0.75), transparent 72%),
    radial-gradient(ellipse 20% 42% at 55% 58%, rgba(240, 245, 255, 0.8), transparent 72%),
    radial-gradient(ellipse 24% 34% at 76% 68%, rgba(215, 228, 255, 0.75), transparent 72%),
    radial-gradient(ellipse 14% 26% at 90% 55%, rgba(235, 240, 255, 0.6), transparent 72%);
  filter: blur(16px);
}
.show-plate__fog--back { bottom: 14%; height: 34%; z-index: 3; opacity: 0.7; animation: show-fog 70s linear infinite; }
.show-plate__fog--front { bottom: 4%; height: 26%; z-index: 5; opacity: 0.55; animation: show-fog-rev 95s linear infinite; }
@keyframes show-fog { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes show-fog-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* de nevel in de zaal iets duidelijker */
.show-plate__haze--back { opacity: 0.8; }
.show-plate__haze--front { opacity: 0.24; }
html.show-paused .show-plate__fog { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .show-plate__fog { animation: none !important; } }
/* ---------- meer leven in de zaal ---------- */
/* camera: verder inzoomen en tegelijk een stukje zijwaarts */
.show-plate { animation: show-dolly2 18s ease-in-out infinite alternate; }
@keyframes show-dolly2 {
  0%   { transform: translate(var(--tx, -50%), var(--ty, -50%)) translateX(-1.2%) scale(1); }
  100% { transform: translate(var(--tx, -50%), var(--ty, -50%)) translateX(1.2%) scale(1.1); }
}
/* lichtbundels: sneller, verder en met een lichte flikkering */
.show-plate__beams span { animation: show-sway 5.5s ease-in-out infinite alternate, show-flicker 2.6s ease-in-out infinite; }
.show-plate__beams span:nth-child(1) { --a: -24deg; --b: 2deg; animation-duration: 6.5s, 2.2s; }
.show-plate__beams span:nth-child(2) { --a: 16deg; --b: -18deg; animation-duration: 4.8s, 3.1s; }
.show-plate__beams span:nth-child(3) { --a: -14deg; --b: 14deg; animation-duration: 7s, 2.7s; }
.show-plate__beams span:nth-child(4) { --a: 18deg; --b: -12deg; animation-duration: 5.2s, 2.4s; }
.show-plate__beams span:nth-child(5) { --a: -4deg; --b: 24deg; animation-duration: 6s, 3.3s; }
@keyframes show-flicker { 0%, 100% { opacity: 0.6; } 40% { opacity: 0.35; } 55% { opacity: 0.75; } }
/* kleurwas: de belichting verloopt van blauw via paars naar warm */
.show-plate__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.55;
  background:
    radial-gradient(60% 55% at 25% 30%, rgba(80, 120, 255, 0.9), transparent 70%),
    radial-gradient(55% 50% at 78% 35%, rgba(190, 70, 255, 0.85), transparent 70%),
    radial-gradient(70% 45% at 50% 85%, rgba(255, 170, 80, 0.7), transparent 70%);
  animation: show-wash 16s linear infinite;
}
@keyframes show-wash { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
/* diepte bij muisbeweging: de zaal schuift tegengesteld aan Bernd */
/* foto en Bernd bewegen samen (anders wordt de Bernd in de foto zichtbaar naast de uitsnede);
   de lucht ertussen verschuift: bundels, nevel, rook en kleur */
.show-plate__beams { translate: calc(var(--px, 0) * -22px) calc(var(--py, 0) * -8px); transition: translate 0.7s ease-out; }
.show-plate__wash { translate: calc(var(--px, 0) * -30px) 0; transition: translate 0.9s ease-out; }
.show-plate__haze--back, .show-plate__fog--back { translate: calc(var(--px, 0) * -14px) 0; transition: translate 0.8s ease-out; }
.show-plate__haze--front, .show-plate__fog--front { translate: calc(var(--px, 0) * 26px) calc(var(--py, 0) * 6px); transition: translate 0.6s ease-out; }
html.show-paused .show-plate__wash { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .show-plate { animation: none !important; }
  .show-plate__wash, .show-plate__beams span { animation: none !important; }
  .show-plate__beams, .show-plate__wash, .show-plate__haze, .show-plate__fog { translate: none; }
}
/* rook zichtbaarder: hoger in beeld (rond knieën en voeten), dichter, en minder weggedrukt door de schaduw */
.show-plate__fog--back { bottom: 10%; height: 44%; opacity: 0.95; }
.show-plate__fog--front { bottom: 8%; height: 32%; opacity: 0.75; }
.show-plate__fog { filter: blur(12px); }
@media (min-width: 900px) {
  .show-hero__shade {
    background:
      radial-gradient(120% 90% at 65% 40%, rgba(5, 7, 15, 0) 35%, rgba(5, 7, 15, 0.55) 100%),
      linear-gradient(90deg, rgba(5, 7, 15, 0.92) 0%, rgba(5, 7, 15, 0.55) 38%, rgba(5, 7, 15, 0) 62%),
      linear-gradient(to top, rgba(5, 7, 15, 0.7) 0%, rgba(5, 7, 15, 0) 24%);
  }
}
/* het portret op de voorgrond, over de Bernd in de podiumfoto heen (die valt erachter weg).
   Uitsnede 660 x 1332, geplaatst op x 810, y 300, breed 460 in het vlak van 2048 x 1228. */
.show-hero__stage .show-plate__cut--portret {
  left: 39.55%;
  top: 24.43%;
  width: 22.46%;
  height: 75.57%;
  z-index: 4;
  filter: contrast(1.04) saturate(0.95) drop-shadow(0 0 24px rgba(120, 160, 255, 0.35)) drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
}
/* het podium erachter iets onscherp en donkerder, zodat het portret loskomt */
.show-hero__stage .show-plate__base { filter: blur(1.6px) brightness(0.86) saturate(1.05); }
/* op telefoon het hoofd net onder het menu */
@media (max-width: 899px) {
  .show-plate { top: calc(6rem - 0.245 * 130cqh); }
}
/* portret kleiner: nooit groter dan zijn eigen resolutie. Geplaatst op x 852, y 467, 377 x 761 in het vlak van 2048 x 1228.
   De oude Bernd is uit de podiumfoto zelf weggehaald, dus het portret hoeft hem niet meer af te dekken. */
.show-hero__stage .show-plate__cut--portret { left: 41.6%; top: 38.03%; width: 18.41%; height: 61.97%; }
@media (max-width: 899px) {
  .show-plate { top: calc(6rem - 0.375 * 130cqh); }
}

/* ---------- de filmrol: korte clips als staande beeldjes in een filmstrook ---------- */
.show-reel { margin-top: 3rem; }
.show-reel__title { margin: 0 0 0.4rem; color: var(--show-ivory); font: 900 clamp(1.5rem, 3.6vw, 2rem) / 1.1 var(--tsx-serif); }
.show-reel__lead { margin: 0 0 1.1rem; color: var(--show-mist); }
.show-reel__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 9.5rem;
  gap: 0.9rem;
  margin: 0 -1rem;
  padding: 1.7rem 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  background:
    radial-gradient(circle at 50% 50%, #F3EEE3 0 3.5px, transparent 4.5px) 0 0.45rem / 1.25rem 0.9rem repeat-x,
    radial-gradient(circle at 50% 50%, #F3EEE3 0 3.5px, transparent 4.5px) 0 calc(100% - 0.45rem) / 1.25rem 0.9rem repeat-x,
    #0B0B0D;
}
@media (min-width: 900px) { .show-reel__strip { grid-auto-columns: 11rem; margin: 0; border-radius: 6px; } }
.show-reel__strip li { scroll-snap-align: start; }
.show-reel__frame, .show-reel__strip iframe {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: #000;
  cursor: pointer;
}
.show-reel__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, filter 0.4s ease; filter: saturate(0.9) brightness(0.85); }
.show-reel__frame:hover img, .show-reel__frame:focus-visible img { transform: scale(1.05); filter: none; }
.show-reel__play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(5, 7, 15, 0.7);
  border: 2px solid var(--show-gold);
  color: var(--show-gold);
}
.show-reel__label { margin: 0.55rem 0 0; color: var(--show-mist); font-size: 0.78rem; line-height: 1.35; }
.show-reel__label strong { display: block; color: #F3EEE3; font-size: 0.9rem; }

/* ---------- op de plaat: Spotify ---------- */
.show-vinyl__disc {
  position: absolute;
  inset: 4% -4% 4% 22%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #D4AF37 0 17%, #8E1B2A 17.5% 18.5%, transparent 19%),
    repeating-radial-gradient(circle, #111 0 2px, #1b1b1b 2px 3px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  animation: show-spin 6s linear infinite;
}
@keyframes show-spin { to { transform: rotate(360deg); } }
html.show-paused .show-vinyl__disc { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .show-vinyl__disc { animation: none; } }
/* plaat verder uit de hoes, met glans zodat hij loskomt van de donkere achtergrond */
.show-vinyl__disc {
  inset: 6% -8% 6% 38%;
  background:
    conic-gradient(from 30deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0.16) 40deg, rgba(255, 255, 255, 0) 80deg, rgba(255, 255, 255, 0) 180deg, rgba(255, 255, 255, 0.12) 220deg, rgba(255, 255, 255, 0) 260deg),
    radial-gradient(circle, #D4AF37 0 17%, #8E1B2A 17.5% 18.5%, transparent 19%),
    repeating-radial-gradient(circle, #121214 0 2px, #222226 2px 3px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.25);
}
/* ==========================================================================
   Reviews als krantenknipsels: kop, drie regels tekst, "Lees verder"
   ========================================================================== */
.show-reviews { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.show-reviews .show-h2 { margin-bottom: 0.6rem; }
/* de scores als een krantenbalk */
.show-reviews .show-score {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin: 0 0 1.6rem;
  padding: 0.55rem 0;
  border-top: 3px double rgba(243, 238, 227, 0.55);
  border-bottom: 3px double rgba(243, 238, 227, 0.55);
}
.show-reviews .show-score p { margin: 0; color: var(--show-mist); font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; }
.show-reviews .show-score strong { margin-right: 0.35rem; color: var(--show-gold); font: 900 1.25rem var(--tsx-serif); }

.show-quote {
  position: relative;
  padding: 1rem 1.15rem 1.4rem !important;
  border: 0 !important;
  border-radius: 1px !important;
  color: #1B1A17;
  background:
    repeating-linear-gradient(0deg, rgba(27, 26, 23, 0.025) 0 1px, transparent 1px 3px),
    linear-gradient(170deg, #F4EDDC, #E9DEC6) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
  transform: rotate(var(--clip, -0.8deg));
  /* gescheurde onderrand */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x;
}
.show-quotes li:nth-child(2) .show-quote, .show-quotes .show-quote:nth-child(2) { --clip: 0.7deg; }
.show-quotes .show-quote:nth-child(3) { --clip: -0.3deg; }
.show-quote::before { content: none !important; }
.show-quote .tsx-stars {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.55rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(27, 26, 23, 0.4);
  color: #8E1B2A !important;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}
.show-quote .tsx-stars .off { color: rgba(27, 26, 23, 0.25) !important; }
.show-quote__kop { margin: 0 0 0.6rem; color: #111 !important; font: 900 clamp(1.2rem, 2.2vw, 1.45rem) / 1.08 var(--tsx-serif); letter-spacing: -0.01em; }
.show-quote blockquote { margin: 0; }
.show-quote blockquote p {
  margin: 0;
  color: #3A342A !important;
  font: 400 0.9rem / 1.5 Georgia, 'Times New Roman', serif;
  text-align: justify;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.show-quote.is-open blockquote p { -webkit-line-clamp: unset; display: block; }
.show-quote__more { margin: 0.45rem 0 0; padding: 0; border: 0; background: none; color: #8E1B2A; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.show-quote__by { margin: 0.7rem 0 0 !important; color: #5A5244 !important; font: italic 400 0.85rem Georgia, serif !important; }
.show-quote__by strong { color: #1B1A17 !important; font-style: normal; }
.show-quote__by::before { content: "Door "; }
@media (min-width: 900px) {
  .show-quotes { gap: 1.6rem !important; }
}
/* draaiboek op de telefoon: alleen de stappen, uitleg klapt open bij een tik */
@media (max-width: 759px) {
  .js-cue-toggle .show-cue { cursor: pointer; padding: 0.75rem 0; }
  .js-cue-toggle .show-cue__body p { display: none; }
  .js-cue-toggle .show-cue.is-open .show-cue__body p { display: block; }
  .js-cue-toggle .show-cue__body strong { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
  .js-cue-toggle .show-cue__body strong::after { content: "+"; color: #8E1B2A; font: 800 1.1rem / 1 var(--tsx-sans, sans-serif); }
  .js-cue-toggle .show-cue.is-open .show-cue__body strong::after { content: "\2212"; }
}
/* ---------- binnenkort op het podium: kleine kaartjes uit de agenda ---------- */
.show-soon { padding: 1.6rem 0 2.2rem; background: var(--show-dark); }
.show-soon__inner { display: grid; gap: 0.9rem; }
@media (min-width: 900px) { .show-soon__inner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.6rem; } }
.show-soon__title { margin: 0; color: var(--show-gold); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; }
.show-soon__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 1fr); gap: 0.8rem; margin: 0 -1rem; padding: 0.2rem 1rem; overflow-x: auto; list-style: none; }
@media (min-width: 900px) { .show-soon__list { margin: 0; padding: 0; overflow: visible; } }
.show-soon__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.8rem; padding: 0.6rem 0.9rem 0.6rem 0.6rem; border-radius: 6px; background: rgba(220, 232, 255, 0.05); border: 1px dashed rgba(212, 175, 55, 0.4); }
.show-soon__date { display: grid; place-items: center; width: 3.2rem; padding: 0.3rem 0; border-radius: 4px; background: #F3EEE3; color: #1B1A17; line-height: 1; }
.show-soon__date b { font: 900 1.3rem var(--tsx-serif); }
.show-soon__date small { margin-top: 0.15rem; color: #8E1B2A; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.show-soon__what { color: var(--show-ivory); font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.show-soon__what small { display: block; margin-top: 0.15rem; color: var(--show-mist); font-weight: 500; font-size: 0.8rem; }
.show-soon__all { white-space: nowrap; font-size: 0.92rem; }
/* aktes als echte koppen (h3) */
.show-bill__title { display: block; margin: 0.45rem 0 0.6rem; color: #1B1A17; font: 900 1.45rem / 1.1 var(--tsx-serif); }
.show-bill__title::after { content: "\2726"; display: block; margin-top: 0.5rem; color: #B08A2E; font-size: 0.8rem; }
/* contactlijst op de Engelse pagina */
.show-direct-en { display: grid; gap: 0.6rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.show-direct-en a { color: var(--show-ivory); font-weight: 600; text-decoration: none; }
.show-direct-en i { width: 1.4rem; color: var(--show-gold); }

/* langere dienstnamen in het mobiele menu passen op het scherm */
body:is(.show-page, .show-skin) #mobileMenu a.mobile-menu-link:not([href="/#contact"]) { font-size: 1.2rem; padding-top: 0.55rem; padding-bottom: 0.55rem; overflow-wrap: anywhere; }

/* kop: zaal in het donker, spotlicht op de titel */
body.show-skin.show-blog .show-blog-hero > .show-blog-hero__beam {
  position: absolute; z-index: 1; left: 50%; top: -20%; width: min(60rem, 140%); height: 140%;
  transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, transparent 162deg, rgba(255, 240, 205, 0.16) 172deg, rgba(255, 240, 205, 0.22) 180deg, rgba(255, 240, 205, 0.16) 188deg, transparent 198deg);
  filter: blur(6px); pointer-events: none;
  animation: show-blog-sway 9s ease-in-out infinite alternate;
}
@keyframes show-blog-sway { from { transform: translateX(-50%) rotate(-4deg); } to { transform: translateX(-50%) rotate(4deg); } }

/* verder kijken: flyers */

@media (prefers-reduced-motion: reduce) {
  body.show-skin.show-blog .show-blog-hero > .show-blog-hero__beam { animation: none; }
    }

/* ==========================================================================
   Repertoire: de jukebox
   Kop met een jukebox in CSS, een draaiboek waarmee de bezoeker de energie van
   de avond instelt, en het repertoire als titelkaartjes om te doorzoeken.
   Kleuren per bak: A goud, B blauw, C koraal, D oranje, E rood, F groen.
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.jb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.95rem 1.7rem; border: 0; border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.jb-btn--ghost { background: transparent; border: 1px solid rgba(244, 238, 226, 0.45); color: var(--show-ivory) !important; }
.jb-btn--ghost:hover, .jb-btn--ghost:focus-visible { border-color: var(--show-gold); color: var(--show-gold) !important; }

/* ---------- kop ---------- */
.jb-hero__chips li { padding: 0.35rem 0.85rem; border: 1px solid rgba(212, 175, 55, 0.45); border-radius: 999px; color: #E9DFC8; font-size: 0.82rem; font-weight: 700; }

/* de jukebox zelf */
.jb { position: relative; width: min(23rem, 88%); margin: 0 auto; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.7)); }
.jb[data-letter="A"] { --jb-glow: var(--jb-a); } .jb[data-letter="B"] { --jb-glow: var(--jb-b); } .jb[data-letter="C"] { --jb-glow: var(--jb-c); }
.jb[data-letter="D"] { --jb-glow: var(--jb-d); } .jb[data-letter="E"] { --jb-glow: var(--jb-e); } .jb[data-letter="F"] { --jb-glow: var(--jb-f); }
.jb__crown span { position: relative; color: #F4E3B0; font: 900 0.95rem / 1 var(--tsx-serif); letter-spacing: 0.08em; text-shadow: 0 0 12px color-mix(in srgb, var(--jb-glow) 80%, transparent); }
.jb__tube i { position: absolute; left: 50%; bottom: -10px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); animation: jb-bubble 4.5s linear infinite; }
.jb__tube i:nth-child(2) { animation-delay: 1.1s; width: 5px; height: 5px; } .jb__tube i:nth-child(3) { animation-delay: 2.3s; } .jb__tube i:nth-child(4) { animation-delay: 3.4s; width: 4px; height: 4px; }
@keyframes jb-bubble { from { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } to { transform: translateY(-26rem); opacity: 0.2; } }
.jb__strip {
  display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.6rem; align-items: center; padding: 0.55rem 0.7rem;
  background: linear-gradient(180deg, var(--jb-glow) 0 7px, #F7F1E3 7px calc(100% - 7px), var(--jb-glow) calc(100% - 7px));
  color: #1B1A17; text-align: left; transition: transform 0.28s ease, opacity 0.28s ease;
}
.jb__code { grid-row: span 2; padding: 0.3rem 0.4rem; background: #1B1A17; color: #F7F1E3; font: 800 0.8rem / 1 var(--tsx-sans, system-ui); }
.jb__cat { color: #6A5E45; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.jb__eq i { width: 6px; height: 100%; border-radius: 2px; background: linear-gradient(to top, var(--jb-glow), #F7F1E3); transform-origin: bottom; animation: jb-eq 1.1s ease-in-out infinite alternate; }
@keyframes jb-eq { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }
.jb__keys i { padding: 0.35rem 0; border-radius: 4px; background: linear-gradient(180deg, #FBF6EA, #D9CCAE); box-shadow: 0 3px 0 #6F5A2A; color: #1B1A17; font: 800 0.75rem / 1 var(--tsx-sans, system-ui); font-style: normal; text-align: center; }

/* ---------- het draaiboek ---------- */
.jb-mood { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.8rem; padding: 1rem 1.1rem; border-radius: 4px; background: rgba(220, 232, 255, 0.04); border: 1px solid rgba(220, 232, 255, 0.1); border-left: 3px solid var(--lvl); }
.jb-mood__no { grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--lvl); color: #11100C; font-weight: 900; }
.jb-mood strong { color: var(--show-ivory); font-family: var(--tsx-serif); font-size: 1.1rem; }
.jb-mood span:last-child { color: var(--show-mist); font-size: 0.88rem; line-height: 1.5; }

.jb-curve__line { fill: none; stroke: url(#jbStroke); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.5)); transition: d 0.6s cubic-bezier(.2, .8, .2, 1); vector-effect: non-scaling-stroke; }
.jb-curve__area { fill: url(#jbFill); transition: d 0.6s cubic-bezier(.2, .8, .2, 1); }
.jb-dot { transition: transform 0.6s cubic-bezier(.2, .8, .2, 1); }
.jb-dot circle { fill: rgba(212, 175, 55, 0.25); }
.jb-dot .jb-dot__core { fill: var(--show-ivory); }
.jb-dot text { fill: var(--show-ivory); font: 700 13px var(--tsx-sans, system-ui); }

.jb-phase { --lvl: var(--jb-a); position: relative; display: flex; flex-direction: column; gap: 0.8rem; padding: 1.1rem; border-radius: 4px; background: rgba(220, 232, 255, 0.035); border: 1px solid rgba(220, 232, 255, 0.1); border-top: 3px solid var(--lvl); transition: opacity 0.3s ease, border-color 0.3s ease, background 0.3s ease; }
.jb-phase__head { display: flex; align-items: center; gap: 0.6rem; }
.jb-phase__no { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 1px solid var(--lvl); border-radius: 50%; color: var(--lvl); font-weight: 800; font-size: 0.85rem; }
body.show-skin .jb-phase__name { flex: 1; margin: 0; color: var(--show-ivory) !important; font: 800 1.25rem / 1 var(--tsx-serif); }
.jb-switch { position: relative; display: inline-flex; cursor: pointer; }
.jb-switch__track { width: 2.4rem; height: 1.35rem; border-radius: 999px; background: rgba(220, 232, 255, 0.18); transition: background 0.2s ease; position: relative; }
.jb-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.35rem - 6px); height: calc(1.35rem - 6px); border-radius: 50%; background: var(--show-ivory); transition: transform 0.2s ease; }
.jb-switch input:checked + .jb-switch__track { background: var(--show-gold); }
.jb-level { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.jb-level__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.jb-level label { display: flex; align-items: flex-end; justify-content: center; height: 3rem; padding: 0.35rem; border-radius: 3px; background: rgba(220, 232, 255, 0.05); border: 1px solid rgba(220, 232, 255, 0.12); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.jb-level label:hover { border-color: rgba(212, 175, 55, 0.6); }
.jb-level__bar { display: block; width: 60%; height: calc(var(--h) * 22%); border-radius: 2px; background: rgba(220, 232, 255, 0.35); transition: background 0.2s ease, box-shadow 0.2s ease; }
.jb-level input:checked + label { border-color: var(--lvl); background: color-mix(in srgb, var(--lvl) 14%, transparent); }
.jb-level input:checked + label .jb-level__bar { background: var(--lvl); box-shadow: 0 0 14px var(--lvl); }
.jb-phase__mood { margin: 0; color: var(--lvl); font-weight: 800; font-size: 0.92rem; }
.jb-phase.is-off .jb-phase__mood { color: var(--show-mist); }
.jb-phase__songs { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.jb-phase__songs li { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.55rem; background: #F7F1E3; color: #1B1A17; border-top: 4px solid var(--lvl); font-size: 0.86rem; font-weight: 700; animation: jb-in 0.4s ease both; }
@keyframes jb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.jb-steps li { position: relative; padding: 1.2rem 1.2rem 1.2rem 3.4rem; color: var(--show-mist); line-height: 1.6; border-radius: 4px; background: rgba(220, 232, 255, 0.035); counter-increment: stap; }
.jb-steps li::before { content: counter(stap); position: absolute; left: 1.1rem; top: 1.1rem; color: var(--show-gold); font: 900 1.6rem / 1 var(--tsx-serif); }

/* ---------- video ---------- */
.jb-screen .video-lite { border-radius: 3px; }

/* ---------- de jukebox doorzoeken ---------- */
.jb-filters button { padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid rgba(220, 232, 255, 0.2); background: transparent; color: var(--show-ivory); font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }

.jb-strips li {
  display: flex; align-items: center; gap: 0.55rem; min-height: 2.6rem; padding: 0.4rem 0.6rem;
  background: linear-gradient(180deg, var(--c) 0 5px, #F7F1E3 5px calc(100% - 5px), var(--c) calc(100% - 5px));
  color: #1B1A17; font-size: 0.9rem; font-weight: 700; line-height: 1.2;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.jb-strip__code { flex: none; min-width: 2.1rem; padding: 0.22rem 0.3rem; background: #1B1A17; color: #F7F1E3; font: 800 0.72rem / 1 var(--tsx-sans, system-ui); text-align: center; }

/* ---------- vragen en toegift ---------- */
.jb-faq summary i { color: var(--show-gold); transition: transform 0.2s ease; }

@media (prefers-reduced-motion: reduce) {
  .jb__tube i, .jb__eq i { animation: none; }
    .jb-curve__line, .jb-curve__area, .jb-dot, .jb__strip, .jb-phase__songs li { transition: none; animation: none; }
}

/* ==========================================================================
   Uitbreidingen: Christmas Karaoke (kerstpagina) en Echoes of Legends
   (bedrijfsfeest, nieuwjaarsreceptie). Zelfstandig, werkt met en zonder site-premium.css.
   ========================================================================== */
.show-extra { --x-accent: var(--show-gold); --x-ink: #11100C; --x-card: linear-gradient(135deg, #140F08, #07080F 70%); --x-line: rgba(212, 175, 55, 0.5);
  position: relative; padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--show-dark); }
.show-extra--kerst { --x-accent: #E23A3A; --x-ink: #FFF8ED; --x-card: linear-gradient(135deg, #0F3B2A, #0A1F17 70%); --x-line: rgba(226, 58, 58, 0.55);
  background: radial-gradient(40% 60% at 15% 20%, rgba(226, 58, 58, 0.14), transparent 70%), radial-gradient(40% 60% at 85% 80%, rgba(23, 110, 70, 0.2), transparent 70%), var(--show-dark); }
.show-extra__card { position: relative; display: grid; overflow: hidden; border: 1px solid var(--x-line); border-radius: 6px; background: var(--x-card); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5); }
.show-extra__card::after { content: ""; position: absolute; inset: 9px; border: 1px solid var(--x-line); opacity: 0.55; pointer-events: none; border-radius: 3px; }
.show-extra__eyebrow { margin: 0; color: var(--x-accent); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; }
.show-extra--kerst .show-extra__eyebrow { color: #FFB4A8; }
.show-extra__lead { margin: 0; color: var(--show-ivory); font: 700 clamp(1.1rem, 2.4vw, 1.35rem) / 1.35 var(--tsx-serif, 'Playfair Display', Georgia, serif); }
.show-extra__text { margin: 0; color: #CFD5E3; line-height: 1.7; }
.show-extra--kerst .show-extra__text { color: #E3EEE6; }
.show-extra__facts li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0.85rem; border-radius: 4px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.show-extra__facts strong { color: var(--show-ivory); font-size: 0.95rem; }
.show-extra__facts--num strong { color: var(--x-accent); font: 900 1.6rem / 1 var(--tsx-serif, 'Playfair Display', Georgia, serif); }
.show-extra__note { margin: 0; color: var(--show-mist); font-size: 0.85rem; }
.show-extra--kerst .show-extra__note { color: #B9CCBF; }
/* kerst: lichtsnoer langs de bovenrand */
.show-extra--kerst .show-extra__card::before {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 10px; pointer-events: none;
  background: radial-gradient(circle, #FFD86B 0 3px, transparent 4px) 0 0 / 28px 10px, radial-gradient(circle, #E23A3A 0 3px, transparent 4px) 14px 0 / 28px 10px;
  animation: show-extra-twinkle 1.6s steps(2) infinite;
}
@keyframes show-extra-twinkle { 50% { filter: brightness(1.6) drop-shadow(0 0 4px #FFD86B); } }
@media (prefers-reduced-motion: reduce) { .show-extra--kerst .show-extra__card::before { animation: none; } }

/* ==========================================================================
   Momenten als programmalijst (12 november 2026)
   De recensies zijn crème knipsels in een scroller; de momenten zijn daarom
   donkere regels uit een programmaboekje: groot Romeins cijfer, titel, uitleg.
   ========================================================================== */
.show-bills { display: grid; gap: 0; margin: 2.2rem 0 0; padding: 0; border-top: 1px solid rgba(212, 175, 55, 0.45); grid-auto-flow: row; grid-template-columns: 1fr; overflow: visible; }
@media (max-width: 759px) { .show-bills { margin: 2.2rem 0 0; padding: 0; overflow: visible; scroll-snap-type: none; grid-auto-columns: auto; } }
@media (min-width: 860px) { .show-bills { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; } }
.show-bill {
  display: grid; grid-template-columns: 3.4rem 1fr; column-gap: 1rem; align-items: start;
  padding: 1.25rem 0.6rem 1.25rem 0; border-radius: 0; border-bottom: 1px dashed rgba(212, 175, 55, 0.28);
  background: none; color: var(--show-ivory); text-align: left; box-shadow: none;
  transition: background-color 0.25s ease;
}
.show-bill::before {
  content: counter(akte, upper-roman); position: static; inset: auto; border: 0; outline: 0;
  grid-row: 1 / span 3; align-self: start; padding-top: 0.1rem;
  color: var(--show-gold); font: 900 1.7rem / 1 var(--tsx-serif, 'Playfair Display', Georgia, serif); text-align: right;
  transition: transform 0.25s ease, text-shadow 0.25s ease;
}
.show-bill__act { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
body .show-bill__title, .show-bill strong { grid-column: 2; margin: 0 0 0.35rem; color: var(--show-ivory) !important; font: 800 1.2rem / 1.2 var(--tsx-serif, 'Playfair Display', Georgia, serif); }
.show-bill__title::after, .show-bill strong::after { content: none; }
.show-bill p { grid-column: 2; color: var(--show-mist); font-size: 0.95rem; line-height: 1.6; }
.show-bill:hover { background: linear-gradient(90deg, rgba(212, 175, 55, 0.08), transparent 70%); }
.show-bill:hover::before { transform: translateX(-3px); text-shadow: 0 0 18px rgba(212, 175, 55, 0.55); }
@media (prefers-reduced-motion: reduce) { .show-bill, .show-bill::before { transition: none; } }

/* ==========================================================================
   Beweging: één pauzeknop voor alles en "beweging beperken" (12 november 2026)
   ========================================================================== */
html.show-paused :is(.show-marquee__track, .show-stage__beam, .show-plate, .show-plate__haze, .show-plate__beams span,
  .show-plate__fog, .show-plate__wash, .show-pass, .show-pass__holo, .show-vinyl__disc, .jb__tube i, .jb__eq i,
  .show-blog-hero__beam),
html.show-paused .show-extra--kerst .show-extra__card::before { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  :is(.jb__tube i, .jb__eq i, .show-blog-hero__beam, .show-plate__beams span, .show-plate__wash, .show-plate__haze) { animation: none !important; }
  }
/* zwevende pauzeknop op pagina's zonder eigen knop */
.show-pause--float {
  position: fixed; z-index: 45; left: max(1rem, env(safe-area-inset-left, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  background: rgba(5, 7, 15, 0.86); color: var(--show-ivory); font: 600 0.8rem var(--tsx-sans, 'Poppins', system-ui, sans-serif);
  border-radius: 999px; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.show-pause--float:focus-visible { outline: 2px solid var(--show-gold); outline-offset: 3px; }
/* boven de contactbalk op de telefoon */
@media (max-width: 767px) {
  body:has(.tsx-dock) .show-pause--float { bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)); }
  .show-pause--float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .show-pause--float { min-width: 2.75rem; justify-content: center; padding: 0.4rem; }
}

/* draaiboek: de titel van elke stap is een echte knop */
.show-cue__toggle { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: default; }
.show-cue__toggle:focus-visible { outline: 2px solid #8E1B2A; outline-offset: 3px; border-radius: 2px; }
@media (max-width: 759px) { .show-cue__toggle { cursor: pointer; } }
/* de vonkjes van het Candlelight-blok volgen de pauzeknop ook */
html.show-paused .cl-sparkle, html.show-paused .cl-sparkles::before { animation-play-state: paused !important; }

/* ==========================================================================
   Conversie (12 november 2026): vijf affiches, snelle links in de hero, solo-uitleg
   ========================================================================== */
.show-posters li:nth-child(5) .show-poster { --tilt: -0.9deg; }
@media (min-width: 960px) and (max-width: 1199px) { .show-posters--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .show-posters--five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem; } }
@media (min-width: 1200px) { .show-posters--five .show-poster__text { font-size: 0.84rem; } }
.show-hero__jump { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin: 0.9rem 0 0; font-size: 0.95rem; font-weight: 600; }
.show-hero__jump a { color: var(--show-ivory); text-decoration: underline; text-decoration-color: rgba(212, 175, 55, 0.7); text-underline-offset: 0.25em; padding: 0.35rem 0; }
.show-hero__jump a:hover, .show-hero__jump a:focus-visible { color: var(--show-gold); }
.show-hero__jump span { color: var(--show-mist); }
.show-solo-note { max-width: 46rem; margin: 1.2rem 0 0; padding: 1rem 1.2rem; border-left: 3px solid var(--show-gold); background: rgba(220, 232, 255, 0.04); color: var(--show-mist); line-height: 1.65; }
.show-solo-note strong { color: var(--show-ivory); }
/* voorbeeldprogramma en horecablok */
.show-timeline p { margin: 0.2rem 0 0; color: var(--show-mist); line-height: 1.6; }
.show-example__cols p { margin: 0 0 0.8rem; color: var(--show-mist); line-height: 1.65; }
@media (min-width: 1200px) { .show-posters--five .show-poster__title { font-size: clamp(1.15rem, 1.45vw, 1.6rem); overflow-wrap: break-word; } }
/* aanwezigheid per arrangement (besluit Bernd 12 november 2026) */
.show-ticket__span { margin: -0.2rem 0 0.6rem; color: #8E1B2A; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.01em; }

/* uitbreidingen bij de prijzen: "In de coulissen" */
.show-addons { position: relative; margin-top: 2.2rem; padding: clamp(1.4rem, 3.5vw, 2.2rem); border: 1px solid rgba(212, 175, 55, 0.4); border-radius: 6px;
  background: radial-gradient(60% 80% at 100% 0%, rgba(212, 175, 55, 0.12), transparent 70%), radial-gradient(50% 70% at 0% 100%, rgba(35, 72, 200, 0.14), transparent 70%), #0A0B12; }
.show-addons::before { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(212, 175, 55, 0.25); border-radius: 3px; pointer-events: none; }
.show-addons__head { position: relative; max-width: 40rem; }
body .show-addons__title { margin: 0 0 0.6rem; color: var(--show-ivory) !important; font: 900 clamp(1.5rem, 3.4vw, 2.2rem) / 1.1 var(--tsx-serif, 'Playfair Display', Georgia, serif); text-wrap: balance; }
.show-addons__lead { margin: 0; color: var(--show-mist); line-height: 1.65; }
.show-addons__list { position: relative; display: grid; gap: 0.8rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .show-addons__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .show-addons__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.show-addon { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1rem 1.1rem; border-radius: 4px; background: rgba(244, 238, 226, 0.04); border: 1px solid rgba(244, 238, 226, 0.1);
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; }
.show-addon:hover { transform: translateY(-3px); border-color: rgba(212, 175, 55, 0.6); background: rgba(212, 175, 55, 0.07); }
.show-addon__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: 0.3rem; border-radius: 50%; background: var(--show-gold); color: #11100C; box-shadow: 0 0 22px rgba(212, 175, 55, 0.35); }
.show-addon strong { color: var(--show-ivory); font: 800 1.05rem / 1.25 var(--tsx-serif, 'Playfair Display', Georgia, serif); }
.show-addon > span:not(.show-addon__icon) { color: var(--show-mist); font-size: 0.9rem; line-height: 1.5; }
.show-addon__tag { align-self: flex-start; margin-top: auto; padding: 0.2rem 0.55rem 0.2rem 0.7rem; background: var(--show-gold); color: #11100C; font-style: normal; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 5px 50%); }
.show-addon:first-child { border-color: rgba(212, 175, 55, 0.55); background: rgba(212, 175, 55, 0.08); }
@media (prefers-reduced-motion: reduce) { .show-addon { transition: none; } .show-addon:hover { transform: none; } }