/* ============================================================
   BLUEPRINT SHOWS — EINDHOVEN
   v3 — feedback V2 verwerkt
   Kleuren: #2E4F67 (navy) / #EDEBD8 (offwhite) / #FE6D46 (accent)
   Accent alleen zichtbaar bij hover/klik — nooit statisch.
   Fonts: Cosmic Octo (display) / Montserrat (body)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Cosmic Octo';
  src: url('../assets/fonts/CosmicOcto-Medium.woff2') format('woff2'),
       url('../assets/fonts/CosmicOcto-Medium.woff') format('woff');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Cosmic Octo';
  src: url('../assets/fonts/CosmicOcto-Bold.woff2') format('woff2'),
       url('../assets/fonts/CosmicOcto-Bold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Cosmic Octo';
  src: url('../assets/fonts/CosmicOcto-Heavy.woff2') format('woff2'),
       url('../assets/fonts/CosmicOcto-Heavy.woff') format('woff');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

/* ---------- Tokens ----------
   --bg / --ink worden live door JS geïnterpoleerd (licht → donker). */
:root {
  --navy: #2E4F67;
  --navy-dark: #223D50;
  --offwhite: #EDEBD8;
  --accent: #FE6D46;

  --bg: #EDEBD8;
  --ink: #2E4F67;
  --ink-rgb: 46, 79, 103;

  --ink-dim: rgba(var(--ink-rgb), 0.6);
  --line: rgba(var(--ink-rgb), 0.18);
  --line-strong: rgba(var(--ink-rgb), 0.4);

  --display: 'Cosmic Octo', sans-serif;
  --body: 'Montserrat', sans-serif;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --beat: 0.4839s; /* 124 BPM */
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--body);
  font-weight: 400;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

::selection { background: var(--accent); color: var(--offwhite); }

:focus-visible { outline: 2px dashed var(--accent); outline-offset: 4px; }

/* ---------- Vast blueprint-raster (kleurt mee) ---------- */
.bggrid {
  position: fixed;
  inset: -5%;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    linear-gradient(rgba(var(--ink-rgb), .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ink-rgb), .06) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  opacity: .45;
  will-change: transform;
}
body.is-playing .bggrid { animation: gridPulse calc(var(--beat) * 2) ease-in-out infinite; }
@keyframes gridPulse {
  0%, 100% { opacity: .38; }
  25% { opacity: .5; }
}

.intro, .nav, main, .footer, .ruler, .sound, .soundhint, .cursor { position: relative; z-index: 1; }

/* ---------- Intro: 1:1 het logo ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--navy); /* zelfde blauw als het logo */
  color: var(--offwhite);
  overflow: hidden;
  transition: opacity .6s ease, visibility .6s ease;
}
body.is-loaded .intro { opacity: 0; visibility: hidden; }
body:not(.is-loaded) { overflow: hidden; }

/* Geometrie 1:1 gemeten uit ICON LINES (WHITE).png (aspect 1.237):
   h-lijnen y 14.1% / 82.1% (dikte 1.43%), v-lijnen dikte 1.16%,
   toplijn loopt x 9.8→100%, onderlijn 0→90.2%, v-lijnen y 0→96.4%. */
.intro__stage {
  position: relative;
  width: min(60vmin, 420px);
  aspect-ratio: 1.2374;
}
body.intro-run .intro__stage {
  animation: introZoom .9s cubic-bezier(.6,-.02,.9,.4) 1.7s forwards;
}
@keyframes introZoom {
  to { transform: scale(16); opacity: 0; }
}
/* de B: dezelfde massieve letter als op de homepage (Cosmic Octo Heavy),
   zonder lijnen — als SVG-tekst exact in het lijnenkader gepositioneerd */
.intro__b {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  user-select: none;
  overflow: visible;
}
.intro__bglyph {
  font-family: var(--display);
  font-weight: 900;
  font-size: 80.35px; /* viewBox-eenheden: inkt-hoogte = 65.9 (kaderhoogte) */
  /* zoals het originele logo: witte omlijning, blauw (achtergrond) van binnen */
  fill: none;
  stroke: var(--offwhite);
  stroke-width: 1.85; /* = 107px logodikte t.o.v. hoogte 5801 */
  stroke-linejoin: round;
}
body.intro-run .intro__b { animation: bIn .6s ease .5s forwards; }
@keyframes bIn { to { opacity: 1; } }

/* Vier HELE doorlopende lijnen, exact óver de contouren van de B.
   Op de vier hoeken kruisen ze haaks met gelijkmatige uitsteek. Ze
   verschuiven als één geheel weg: boven→links, onder→rechts,
   links→omhoog, rechts→omlaag. */
.iline { position: absolute; background: var(--offwhite); }
/* uiteinden zoals het logo (bewust níet vierkant): toplijn 9.8→100,
   onderlijn 0→90.2, verticalen 0→96.4 — posities op de B-contouren */
.iline--h1, .iline--h2 { height: 1.43%; transform: scaleX(0); }
.iline--h1 { top: 15.11%; left: 9.8%; right: 0; transform-origin: left; }
.iline--h2 { top: 80.99%; left: 0; right: 9.8%; transform-origin: right; }
.iline--v1, .iline--v2 { width: 1.16%; top: 0; bottom: 3.6%; transform: scaleY(0); }
/* de verticalen sluiten aan de binnenkant exact aan op de contouren van de B
   (gemeten: contour links binnen 23.08%, rechts binnen 76.92%) — de rechter
   is de spiegeling van de linker, zodat hij niet dwars door de B loopt */
.iline--v1 { left: 23.06%; transform-origin: top; }
.iline--v2 { left: 75.79%; transform-origin: bottom; }
body.intro-run .iline--h1 { animation: drawX .5s ease .10s forwards, flyLeft .7s cubic-bezier(.5,0,1,.6) 1.50s forwards; }
body.intro-run .iline--h2 { animation: drawX .5s ease .22s forwards, flyRight .7s cubic-bezier(.5,0,1,.6) 1.56s forwards; }
body.intro-run .iline--v1 { animation: drawY .5s ease .34s forwards, flyUp .7s cubic-bezier(.5,0,1,.6) 1.62s forwards; }
body.intro-run .iline--v2 { animation: drawY .5s ease .46s forwards, flyDown .7s cubic-bezier(.5,0,1,.6) 1.44s forwards; }
@keyframes flyUp { to { transform: translateY(-130vh); opacity: 0; } }
@keyframes flyDown { to { transform: translateY(130vh); opacity: 0; } }
@keyframes flyLeft { to { transform: translateX(-130vw); opacity: 0; } }
@keyframes flyRight { to { transform: translateX(130vw); opacity: 0; } }

/* ---------- Tekentafel-crosshair ---------- */
.cursor { display: none; }
@media (pointer: fine) {
  .cursor {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s ease;
  }
  body.has-mouse .cursor { opacity: 1; }
  .cursor__h, .cursor__v {
    position: absolute;
    background: var(--ink);
    opacity: .18;
  }
  .cursor__h { left: 0; right: 0; height: 1px; top: 0; }
  .cursor__v { top: 0; bottom: 0; width: 1px; left: 0; }
}

/* ---------- Liniaal / scroll-indicator ---------- */
.ruler {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 22px;
  z-index: 45;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--line-strong) 0, var(--line-strong) 1px,
    transparent 1px, transparent 12.5%
  ), repeating-linear-gradient(
    to bottom,
    var(--line) 0, var(--line) 1px,
    transparent 1px, transparent 2.5%
  );
  background-size: 12px 100%, 7px 100%;
  background-position: right center;
  background-repeat: no-repeat;
}
.ruler__marker {
  position: absolute;
  right: 0;
  top: 0;
  width: 18px;
  height: 2px;
  background: var(--ink);
}
@media (max-width: 900px) { .ruler { display: none; } }

/* ---------- Sound toggle + hint ---------- */
.sound {
  position: fixed;
  left: var(--pad);
  bottom: 1.6rem;
  z-index: 46;
  display: flex;
  align-items: center;
  gap: .7rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--body);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  padding: .65em 1.3em .65em 1.1em;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, color .3s ease, transform .3s ease;
}
.sound:hover { border-color: var(--accent); transform: translateY(-2px); }
.sound__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.sound__bars span {
  width: 2px;
  height: 4px;
  background: var(--ink);
  transition: height .3s ease, background .3s ease;
}
.sound[aria-pressed="true"] .sound__bars span { animation: eq var(--beat) ease-in-out infinite; }
.sound[aria-pressed="true"] .sound__bars span:nth-child(1) { animation-delay: 0s; }
.sound[aria-pressed="true"] .sound__bars span:nth-child(2) { animation-delay: calc(var(--beat) * -0.3); }
.sound[aria-pressed="true"] .sound__bars span:nth-child(3) { animation-delay: calc(var(--beat) * -0.6); }
.sound[aria-pressed="true"] .sound__bars span:nth-child(4) { animation-delay: calc(var(--beat) * -0.15); }
@keyframes eq {
  0%, 100% { height: 4px; }
  50% { height: 12px; }
}

.soundhint {
  position: fixed;
  left: var(--pad);
  bottom: 4.4rem;
  z-index: 46;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--bg);
  background: var(--ink);
  border-radius: 999px;
  padding: .6em 1.2em;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.soundhint.is-show {
  opacity: 1;
  transform: translateY(0);
  animation: hintPulse 1.6s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(0) scale(1.05); }
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--pad);
  transition: padding .4s ease;
}
.nav.is-scrolled { padding: .7rem var(--pad); }
.nav__brand { display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; }
.nav__iconwrap { position: relative; width: 38px; height: 38px; }
.nav__icon { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .3s linear, transform .5s ease; }
.nav__icon--white { opacity: var(--theme-p, 0); }
.nav__icon--blue { opacity: calc(1 - var(--theme-p, 0)); }
.nav__brand:hover .nav__icon { transform: rotate(90deg); }
body.is-playing .nav__iconwrap { animation: iconBeat calc(var(--beat) * 2) ease-in-out infinite; }
@keyframes iconBeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.08); }
  24% { transform: scale(1); }
}
.nav__name {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: .06em;
}
.nav__links { display: flex; align-items: center; gap: clamp(.9rem, 2.6vw, 2.2rem); }
.nav__links a {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  position: relative;
  white-space: nowrap;
}
.nav__links a:not(.nav__cta)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s ease;
}
.nav__links a:not(.nav__cta):hover::after,
.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav__links a[aria-current="page"]::after { background: var(--line-strong); }
.nav__cta {
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: .55em 1.4em;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.nav__cta:hover { background: var(--accent); border-color: var(--accent); color: var(--offwhite); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* het lijnenkader ligt over de hero heen en mag geen grid-rij innemen,
   anders zakt de titel naar de onderste helft van het scherm */
.hero__lines { position: absolute; inset: 0; pointer-events: none; }
.hero__lines span { position: absolute; background: var(--line-strong); }
.hline { left: 4%; right: 4%; height: 1px; transform: scaleX(0); }
.hline--top { top: 18%; animation-delay: .25s; transform-origin: left; }
.hline--bottom { bottom: 18%; animation-delay: .4s; transform-origin: right; }
.vline { top: 6%; bottom: 6%; width: 1px; transform: scaleY(0); }
.vline--left { left: 12%; animation-delay: .55s; transform-origin: top; }
.vline--right { right: 12%; animation-delay: .7s; transform-origin: bottom; }
body.is-loaded .hline { animation: drawX 1.2s ease forwards; }
body.is-loaded .vline { animation: drawY 1.2s ease forwards; }
@keyframes drawX { to { transform: scaleX(1); } }
@keyframes drawY { to { transform: scaleY(1); } }

.hero__content { position: relative; text-align: center; padding: 0 var(--pad); }
.hero__title {
  font-family: var(--display);
  font-weight: 900;
  line-height: .95;
  letter-spacing: .01em;
  user-select: none;
  white-space: nowrap;
}
.hero__row { display: block; }
.hero__row--1 { font-size: clamp(2.5rem, 10.4vw, 8.7rem); }
.hero__row--2 {
  font-size: clamp(1.3rem, 4.65vw, 3.9rem);
  letter-spacing: .42em;
  text-indent: .42em;
  margin-top: .3em;
}
.hero__title .l {
  display: inline-block;
  opacity: 0;
  transform: translateY(.35em) rotate(2deg);
  transition: transform .25s cubic-bezier(.3,1.6,.4,1);
  cursor: default;
}
body.is-loaded .hero__title .l { animation: letterIn .7s cubic-bezier(.2,.7,.2,1) forwards; }
.hero__title .l:hover { transform: translateY(-.06em) rotate(-2deg) scale(1.04); }
.hero__row--1 .l:nth-child(1) { animation-delay: .35s; }
.hero__row--1 .l:nth-child(2) { animation-delay: .41s; }
.hero__row--1 .l:nth-child(3) { animation-delay: .47s; }
.hero__row--1 .l:nth-child(4) { animation-delay: .53s; }
.hero__row--1 .l:nth-child(5) { animation-delay: .59s; }
.hero__row--1 .l:nth-child(6) { animation-delay: .65s; }
.hero__row--1 .l:nth-child(7) { animation-delay: .71s; }
.hero__row--1 .l:nth-child(8) { animation-delay: .77s; }
.hero__row--1 .l:nth-child(9) { animation-delay: .83s; }
.hero__row--2 .l:nth-child(1) { animation-delay: .95s; }
.hero__row--2 .l:nth-child(2) { animation-delay: 1.01s; }
.hero__row--2 .l:nth-child(3) { animation-delay: 1.07s; }
.hero__row--2 .l:nth-child(4) { animation-delay: 1.13s; }
.hero__row--2 .l:nth-child(5) { animation-delay: 1.19s; }
.hero__row--2 .l:nth-child(6) { animation-delay: 1.25s; }
.hero__row--2 .l:nth-child(7) { animation-delay: 1.31s; }
.hero__row--2 .l:nth-child(8) { animation-delay: 1.37s; }
.hero__row--2 .l:nth-child(9) { animation-delay: 1.43s; }
@keyframes letterIn { to { opacity: 1; transform: translateY(0) rotate(0); } }

/* homepage: SHOWS onder het logo in de body-font, dunner dan het wordmerk */
.hero__row--soft {
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(.9rem, 2.4vw, 2.05rem);
  letter-spacing: .14em;
  text-indent: .14em;
  margin-top: .5em;
}
/* het wordmerk staat op de homepage rustiger in beeld dan op de eventpagina's */
.hero--home .hero__row--1 { font-size: clamp(1.9rem, 5.8vw, 6.2rem); }
@keyframes fadeIn { to { opacity: 1; } }

/* pay-off onder het logo */
.hero__tagline {
  margin: 1.5rem auto 0;
  max-width: 44ch;
  font-weight: 400;
  font-size: clamp(.62rem, 1.35vw, .85rem);
  line-height: 1.6;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0;
}
body.is-loaded .hero__tagline { animation: fadeIn .9s ease 1.15s forwards; }
/* elk deel van de pay-off blijft heel; breken mag alleen tussen de delen */
.hero__tagline-part { white-space: nowrap; }

/* snelkoppelingen naar de aankomende shows */
.hero__shortcuts {
  margin-top: 1.9rem;
  display: grid;
  justify-items: center;
  gap: .5rem;
  opacity: 0;
}
body.is-loaded .hero__shortcuts { animation: fadeIn .9s ease 1.35s forwards; }
/* één regel = één klik */
.hero__shortcut {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: .1rem .55em;
  font-size: clamp(.68rem, 1.5vw, .92rem);
  padding-bottom: 2px;
}
.hero__shortcut::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s ease;
}
.hero__shortcut:hover::after { transform: scaleX(1); transform-origin: left; }
.hero__shortcut-name {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: .06em;
}
.hero__shortcut-date { letter-spacing: .1em; }
.hero__shortcut-status { color: var(--ink-dim); font-weight: 300; }
.hero__shortcut-sep { opacity: .4; }

.hero__meta {
  margin-top: 2.4rem;
  font-size: clamp(.68rem, 1.3vw, .8rem);
  letter-spacing: .28em;
  color: var(--ink-dim);
  opacity: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5em .7em;
}
body.is-loaded .hero__meta { animation: fadeIn .8s ease 1.05s forwards; }
.hero__meta span { white-space: nowrap; text-indent: .28em; }
.hero__scroll {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
}
.hero__scroll-line {
  display: block;
  width: 1px;
  height: 56px;
  background: var(--line-strong);
  overflow: hidden;
  position: relative;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--ink);
  animation: scrollHint 2s ease-in-out infinite;
}
@keyframes scrollHint {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}

/* ---------- Ticker ---------- */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* loopt eindeloos door en is met vinger of muis te verschuiven; geen
     scrollbalk, want die loopt na één set tekst leeg */
  overflow: hidden;
  touch-action: pan-y;
  padding: 1rem 0;
  cursor: grab;
}
.marquee.is-sleept { cursor: grabbing; }
.marquee__track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  will-change: transform;
  animation: marquee 26s linear infinite; /* vangnet als js uitvalt */
}
@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
.marquee__track span {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: .22em;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
section { padding: clamp(4.5rem, 10vw, 8.5rem) var(--pad); }
/* op grote schermen: inhoud gecentreerd op maximale leesbreedte */
section:not(.hero) { max-width: 90rem; margin-left: auto; margin-right: auto; }

.section__head {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: clamp(2.2rem, 5vw, 4rem);
}
.section__index {
  font-family: var(--body);
  font-weight: 300;
  font-size: .95rem;
  letter-spacing: .1em;
  opacity: .55;
}
.section__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.1rem, 6vw, 4.4rem);
  letter-spacing: .02em;
  color: var(--ink);
}

/* ---------- 01 Shows (home) ---------- */
.shows__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  grid-auto-rows: 1fr; /* alle showkaders even hoog, ook over meerdere rijen */
  gap: clamp(1.2rem, 3vw, 2rem);
}
.shows__grid--single { grid-template-columns: minmax(0, 36rem); }
/* snelkoppeling in de hero: blok niet onder de vaste menubalk laten landen */
.show { scroll-margin-top: 5.5rem; }
.show {
  position: relative;
  display: grid; /* de body vult het hele kader */
  border: 1px solid var(--line-strong);
  background: rgba(var(--ink-rgb), .03);
  overflow: hidden;
  transition: transform .35s ease;
}
/* eventfoto die bij hover op de achtergrond opdoemt */
.show__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* gecentreerd: de meeste eventfoto's zijn staand en werden bovenaan afgesneden */
  object-position: center center;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity .5s ease, transform .9s ease;
  pointer-events: none;
  z-index: 0;
}
.show:hover .show__bg { opacity: .3; transform: scale(1); }
.show::before, .show::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--line-strong);
  transition: border-color .35s ease, width .35s ease, height .35s ease;
  z-index: 2;
  pointer-events: none;
}
.show::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.show::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.show:hover { transform: translateY(-5px); }
.show:hover::before, .show:hover::after { border-color: var(--accent); width: 30px; height: 30px; }

.show__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.show__head { display: grid; gap: .5rem; justify-items: start; }
.show__name {
  font-family: var(--display);
  font-weight: 900;
  /* maat zo dat ook de langste naam op één regel past */
  font-size: clamp(1.05rem, 2.1vw, 2rem);
  letter-spacing: .03em;
  line-height: 1.1;
}
.show__date {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(.95rem, 2.2vw, 1.25rem);
  letter-spacing: .1em;
}
.show__meta {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--ink-dim);
}

/* prijzen per categorie — tussen de kop en de ticketknop */
.show__tiers {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
.show__tier {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .8rem .2rem;
  border-bottom: 1px solid var(--line);
  transition: background .35s ease;
}
.show__tier { cursor: pointer; }
.show__tier:hover { background: rgba(var(--ink-rgb), .07); }
.show__tier:hover .show__cat { color: var(--accent); }
.show__cat {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(.9rem, 2.2vw, 1.1rem);
  letter-spacing: .04em;
  white-space: nowrap;
}
.show__dots {
  flex: 1;
  min-width: 1rem;
  border-bottom: 1px dashed var(--line-strong);
  transform: translateY(-.25em);
}
.show__amount {
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.show__flag {
  font-size: .55rem;
  font-weight: 500;
  letter-spacing: .18em;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  padding: .45em .85em;
  white-space: nowrap;
}
.show__tier.is-soldout .show__cat,
.show__tier.is-soldout .show__dots { opacity: .35; }
.show__tier.is-soldout .show__amount { opacity: .35; text-decoration: line-through; }
.show__note {
  margin-top: .9rem;
  font-weight: 300;
  font-size: .72rem;
  letter-spacing: .06em;
  opacity: .6;
}

/* nog geen verkoop → nieuwsbrief in hetzelfde kader */
.show__mc {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  padding-top: clamp(1.2rem, 3vw, 1.6rem);
  border-top: 1px solid var(--line);
}
.show__mctitle {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  letter-spacing: .06em;
}
.show__mcbody {
  margin: .55rem 0 1.1rem;
  font-weight: 300;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-dim);
}

.show__actions {
  /* altijd onderaan het kader, zodat naast elkaar staande shows uitlijnen;
     de min-hoogte is die van de ticketknop, zodat 'event info' ook uitlijnt
     bij een show zonder knop */
  margin-top: auto;
  padding-top: clamp(1.4rem, 3vw, 2rem);
  min-height: calc(3.25rem + clamp(1.4rem, 3vw, 2rem));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
}
.show__more {
  font-family: var(--display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: .85em 1.8em;
  white-space: nowrap;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
  will-change: transform;
}
.show__more:hover { background: var(--accent); border-color: var(--accent); color: var(--offwhite); }

/* ---------- 02 Concept ---------- */
.concept__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.35rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: .01em;
  max-width: 24ch;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.concept__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.2rem);
  align-items: start;
  margin-bottom: clamp(2.4rem, 6vw, 4rem);
}
.concept__p {
  font-weight: 300;
  font-size: clamp(.92rem, 1.6vw, 1.05rem);
  line-height: 1.75;
  color: var(--ink-dim);
}
.concept__p + .concept__p { margin-top: 1rem; }
@media (max-width: 900px) {
  /* op mobiel: eerst de tekst, daarna de showreel (DOM-volgorde) */
  .concept__grid { grid-template-columns: 1fr; }
}
.info__lead {
  font-weight: 300;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  line-height: 1.55;
  max-width: 52ch;
}
/* eventpagina's: lead staat los, dus wel een marge eronder */
.concept > .info__lead { margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }

.concept__reel {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-strong);
  background: rgba(var(--ink-rgb), .05);
  overflow: hidden;
}
/* crop-marks zoals op een tekening */
.concept__reel::before, .concept__reel::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid var(--line-strong);
  z-index: 2;
  pointer-events: none;
  transition: border-color .35s ease;
}
.concept__reel::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.concept__reel::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.concept__reel:hover::before, .concept__reel:hover::after { border-color: var(--accent); }
.reel__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__mute {
  position: absolute;
  right: .9rem;
  bottom: .9rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(237, 235, 216, .55);
  background: rgba(34, 61, 80, .45);
  backdrop-filter: blur(6px);
  color: var(--offwhite);
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.reel__mute svg { width: 20px; height: 20px; display: block; }
.reel__mute:hover { border-color: var(--accent); color: var(--accent); }

/* Location / Production / Sound — ook op mobiel naast elkaar */
.info__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.55rem, 1.8vw, 1.2rem);
}
.card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  padding: clamp(1rem, 2.4vw, 1.8rem) clamp(.55rem, 2vw, 1.6rem) clamp(1.2rem, 2.6vw, 2rem);
  transition: border-color .35s ease, transform .35s ease;
  background: rgba(var(--ink-rgb), .03);
}
.card::before, .card::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--line-strong);
  opacity: .7;
  z-index: 2; /* hoekmarkeringen blijven boven de hoverfoto */
  transition: width .35s ease, height .35s ease, opacity .35s ease, border-color .35s ease;
}
.card::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.card::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.card:hover::before, .card:hover::after { width: 26px; height: 26px; opacity: 1; border-color: var(--accent); }
.card:hover { border-color: var(--line-strong); transform: translateY(-5px); }
.card__index {
  font-size: clamp(.55rem, 1.4vw, .7rem);
  font-weight: 300;
  letter-spacing: .2em;
  opacity: .5;
}
.card__title {
  font-family: var(--display);
  font-weight: 700;
  /* moet ook in drie smalle kolommen op één regel passen (PRODUCTION) */
  font-size: clamp(.7rem, 2.5vw, 1.35rem);
  margin: .7rem 0 .6rem;
  letter-spacing: .02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.card__body {
  font-weight: 300;
  font-size: clamp(.72rem, 1.7vw, .92rem);
  line-height: 1.55;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* ---------- 03 Previous shows ---------- */
.edities__list { border-top: 1px solid var(--line); }
.edities__item {
  display: grid;
  grid-template-columns: minmax(9ch, auto) 1fr auto;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.2rem, 3vw, 1.9rem) .8rem;
  border-bottom: 1px solid var(--line);
  transition: background .35s ease;
  cursor: pointer;
}
.edities__item:hover { background: rgba(var(--ink-rgb), .07); }
.edities__venue {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.05rem, 3.2vw, 2rem);
  letter-spacing: .03em;
  transition: letter-spacing .45s ease, color .35s ease;
}
.edities__item:hover .edities__venue { letter-spacing: .09em; color: var(--accent); }
.edities__desc {
  font-weight: 300;
  font-size: clamp(.8rem, 1.8vw, .95rem);
  color: var(--ink-dim);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .4s ease, transform .4s ease;
}
.edities__item:hover .edities__desc { opacity: 1; transform: translateX(0); }
.edities__item.is-open .edities__desc { opacity: 1; transform: translateX(0); }
.edities__year {
  font-weight: 300;
  font-size: .85rem;
  letter-spacing: .12em;
  opacity: .55;
  font-variant-numeric: tabular-nums;
}
/* uitklap-paneel met eigen fotostrip per editie */
.edities__panel {
  grid-column: 1 / -1;
  overflow: hidden;
  max-height: 0;
  transition: max-height .6s cubic-bezier(.2,.7,.2,1);
}
/* doorlopende fotostrip, zoals de tekstticker: rechts → links */
.minicar {
  position: relative;
  padding: 1.1rem 0 1rem;
}
/* het venster waarin de strip loopt; sleepbaar met muis of vinger */
.minicar__viewport {
  overflow: hidden;
  touch-action: pan-y; /* verticaal scrollen blijft van de pagina */
  cursor: grab;
}
.minicar__viewport:active { cursor: grabbing; }
.minicar__track {
  display: flex;
  gap: .9rem;
  width: max-content;
  will-change: transform;
}
.minicar__item { flex: 0 0 auto; display: block; }
.minicar__item img, .minicar__item video {
  /* portret 4:5, ruimer in beeld */
  height: clamp(240px, 34vw, 400px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%; /* uitsnede iets omhoog: hoofden in beeld */
  border: 1px solid var(--line-strong);
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
/* pijltjes links en rechts */
.minicar__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(var(--ink-rgb), .12);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.minicar__nav--prev { left: .6rem; }
.minicar__nav--next { right: .6rem; }
.minicar__nav:hover { background: var(--accent); border-color: var(--accent); color: var(--offwhite); }
.minicar__year {
  margin-top: .45rem;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--ink-dim);
}
@media (prefers-reduced-motion: reduce) {
  .minicar__viewport { overflow-x: auto; }
  .minicar__track { transform: none !important; }
}

/* ---------- 04 Follow us ---------- */
.follow__lead {
  font-weight: 300;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--ink-dim);
}
.follow__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; /* alle tegels even hoog, ook over meerdere rijen */
  gap: clamp(.6rem, 1.8vw, 1.2rem);
}
@media (min-width: 1100px) {
  .follow__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* elke tegel vult de volle rijhoogte, ook bij een ondertitel van twee regels */
.follow__grid > li { display: grid; }
.follow__item {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  height: 100%;
  gap: .5rem;
  text-align: center;
  border: 1px solid var(--line);
  padding: clamp(1.1rem, 3vw, 2rem) clamp(.5rem, 1.6vw, 1.2rem) clamp(1.1rem, 2.6vw, 1.8rem);
  background: rgba(var(--ink-rgb), .03);
  transition: transform .35s ease;
}
.follow__item::before, .follow__item::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--line-strong);
  transition: border-color .35s ease, width .35s ease, height .35s ease;
}
.follow__item::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.follow__item::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.follow__item:hover { transform: translateY(-5px); }
.follow__item:hover::before, .follow__item:hover::after { border-color: var(--accent); width: 24px; height: 24px; }
.follow__icon { width: clamp(22px, 5vw, 30px); height: clamp(22px, 5vw, 30px); }
.follow__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(.68rem, 1.8vw, 1rem);
  letter-spacing: .06em;
  margin-top: .25rem;
}
.follow__sub {
  font-size: clamp(.56rem, 1.4vw, .74rem);
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
  transition: color .35s ease;
}

/* ---------- FAQ-pagina ---------- */
.hero--faq { min-height: 66svh; }
.faqpage__list {
  max-width: 54rem;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.qa { border-bottom: 1px solid var(--line); }
.qa__q {
  display: flex;
  align-items: baseline;
  gap: clamp(.7rem, 2vw, 1.2rem);
  padding: 1.2rem .6rem;
  cursor: pointer;
  list-style: none;
  transition: background .35s ease;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover { background: rgba(var(--ink-rgb), .07); }
.qa__nr {
  font-family: var(--body);
  font-weight: 300;
  font-size: .78rem;
  opacity: .5;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.qa__text {
  flex: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(.95rem, 2.4vw, 1.25rem);
  letter-spacing: .02em;
  line-height: 1.3;
  transition: color .35s ease;
}
.qa__q:hover .qa__text { color: var(--accent); }
.qa__mark {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  align-self: center;
}
.qa__mark::before, .qa__mark::after {
  content: '';
  position: absolute;
  background: var(--ink);
  transition: transform .3s ease, background .3s ease;
}
.qa__mark::before { left: 0; right: 0; top: 6px; height: 2px; }
.qa__mark::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.qa[open] .qa__mark::after { transform: scaleY(0); }
.qa[open] .qa__mark::before { background: var(--accent); }
.qa__a {
  padding: 0 .6rem 1.6rem clamp(.6rem, 4vw, 2.9rem);
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--ink-dim);
  max-width: 62ch;
}
.qa__a a {
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  overflow-wrap: anywhere;
  transition: color .3s ease, border-color .3s ease;
}
.qa__a a:hover { color: var(--accent); border-color: var(--accent); }
.faqpage__foot {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  gap: 1.6rem;
  justify-items: start;
}
.faqpage__footnote {
  font-weight: 300;
  font-size: .95rem;
  color: var(--ink-dim);
}
.faqpage__footnote a { border-bottom: 1px solid var(--line-strong); transition: color .3s ease, border-color .3s ease; }
.faqpage__footnote a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Eventpagina's ---------- */
.hero--event { min-height: 92svh; }
.hero__cta { margin-top: 2.4rem; opacity: 0; }
body.is-loaded .hero__cta { animation: fadeIn .8s ease 1.5s forwards; }

/* ---------- Aftelklok tot de ticketverkoop ---------- */
.countdown { margin-top: 1.4rem; }
.countdown__label,
.countdown__when {
  font-size: clamp(.62rem, 1.2vw, .74rem);
  letter-spacing: .28em;
  color: var(--ink-dim);
}
.countdown__clock {
  display: inline-flex;
  align-items: flex-start;
  gap: clamp(.3rem, 1.1vw, .65rem);
  margin-top: .75rem;
}
.countdown__unit { display: grid; justify-items: center; gap: .4rem; }
.countdown__num {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.9rem, 5.4vw, 3.3rem);
  line-height: 1;
  /* vaste breedte: de cijfers van Cosmic Octo zijn niet even breed, zo verspringt er niets */
  min-width: 2.3ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.countdown__name { font-size: .58rem; letter-spacing: .24em; color: var(--ink-dim); }
.countdown__sep {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  line-height: 1.25;
  opacity: .35;
}
.countdown__when { margin-top: .85rem; }
/* in de hero gecentreerd, en rustig binnenkomend met de rest */
.countdown--hero { margin-top: 2.2rem; text-align: center; opacity: 0; }
.countdown--hero .countdown__label,
.countdown--hero .countdown__when { text-indent: .28em; }
body.is-loaded .countdown--hero { animation: fadeIn .8s ease 1.3s forwards; }
/* in het aanmeldkader en op de showkaart: kleiner */
.mc .countdown, .show__mc .countdown { margin: 1.1rem 0 .2rem; }
.mc .countdown__num, .show__mc .countdown__num { font-size: clamp(1.5rem, 3.6vw, 2.2rem); }
.mc .countdown__sep, .show__mc .countdown__sep { font-size: clamp(1.1rem, 2.6vw, 1.6rem); }
.strip__lead {
  font-weight: 300;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--ink-dim);
  margin-bottom: .4rem;
}
.venue__grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 760px) { .venue__grid { grid-template-columns: 1fr; } }
.venue__name {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  letter-spacing: .03em;
  margin-bottom: 1rem;
}
.venue__body {
  font-weight: 300;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.6;
  max-width: 42ch;
}
.venue__addr {
  margin-top: 1.2rem;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ink-dim);
}
.venue__photo {
  position: relative;
  border: 1px solid var(--line-strong);
  overflow: hidden;
  /* portret 4:5, zoals in de rest van de site */
  max-width: min(100%, 26rem);
  margin-left: auto;
  margin-right: auto;
}
.venue__photo::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 22px; height: 22px;
  border-top: 2px solid var(--line-strong);
  border-left: 2px solid var(--line-strong);
  z-index: 2;
  transition: border-color .35s ease;
}
.venue__photo:hover::before { border-color: var(--accent); }
.venue__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; display: block; }

.faq__list { max-width: 44rem; border-top: 1px solid var(--line); }
.faq__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.15rem .6rem;
  border-bottom: 1px solid var(--line);
  transition: background .35s ease;
}
.faq__row:hover { background: rgba(var(--ink-rgb), .07); }
.faq__row dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .06em;
  transition: color .35s ease;
}
.faq__row:hover dt { color: var(--accent); }
.faq__row dd {
  font-weight: 300;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-dim);
}
.faq__link { color: var(--ink); border-bottom: 1px solid var(--line-strong); transition: color .3s ease, border-color .3s ease; }
.faq__link:hover { color: var(--accent); border-color: var(--accent); }
.cta-eind { margin-top: clamp(2.2rem, 5vw, 3.5rem); }

/* ---------- Tickets (eventpagina) ---------- */
.tickets__prices {
  max-width: 34rem;
  border-top: 1px solid var(--line);
  text-align: left;
}
.tickets__price {
  display: flex;
  align-items: baseline;
  gap: clamp(.6rem, 2vw, 1rem);
  padding: 1.05rem .6rem;
  border-bottom: 1px solid var(--line);
  transition: background .35s ease;
}
.tickets__price:hover { background: rgba(var(--ink-rgb), .07); }
.tickets__cat {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 2.8vw, 1.35rem);
  letter-spacing: .04em;
  white-space: nowrap;
  transition: color .35s ease;
}
.tickets__dots {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 1px dashed var(--line-strong);
  transform: translateY(-.25em);
}
.tickets__amount {
  font-weight: 500;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tickets__flag {
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .18em;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  padding: .45em .9em;
  white-space: nowrap;
}
.tickets__price:hover .tickets__cat { color: var(--accent); }
.is-soldout .tickets__cat,
.is-soldout .tickets__dots { opacity: .35; }
.is-soldout .tickets__amount { opacity: .35; text-decoration: line-through; }
/* eventpagina: de ticketkolom staat gecentreerd */
.tickets--center .section__head { justify-content: center; }
.tickets--center .tickets__prices { margin-left: auto; margin-right: auto; }
.tickets--center .tickets__note { text-align: center; }
.tickets--center > .tickets__btn { display: block; width: max-content; margin-left: auto; margin-right: auto; }
.tickets--center .mc { margin-left: auto; margin-right: auto; }
/* vóór de verkoop: kader met aftelklok, de ticketknop eronder */
.mc + .tickets__btn { margin-top: 2.4rem; }
.tickets__price { cursor: pointer; }

.tickets__note {
  font-weight: 300;
  font-size: .75rem;
  letter-spacing: .06em;
  opacity: .65;
  margin: 1.1rem 0 2.4rem;
}

/* ticketknop — oranje verschijnt pas bij hover */
.tickets__btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .12em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 1em 2.4em;
  transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
  will-change: transform;
}
.tickets__btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--offwhite);
  box-shadow: 0 12px 40px -12px rgba(254, 109, 70, .55);
}

/* ---------- Nieuwsbriefkader ---------- */
.mc {
  max-width: 34rem;
  border: 1px solid var(--line-strong);
  padding: 1.8rem 1.6rem 2rem;
  position: relative;
  background: rgba(var(--ink-rgb), .03);
}
.mc::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 22px; height: 22px;
  border-top: 2px solid var(--line-strong);
  border-left: 2px solid var(--line-strong);
  transition: border-color .35s ease;
}
.mc:hover::before { border-color: var(--accent); }
.mc__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  letter-spacing: .04em;
}
.mc__body {
  font-weight: 300;
  font-size: .9rem;
  line-height: 1.6;
  margin: .7rem 0 1.3rem;
  color: var(--ink-dim);
}
.mc__form { display: flex; gap: .6rem; flex-wrap: wrap; }
.mc__input {
  flex: 1;
  min-width: 11rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--body);
  font-size: .9rem;
  padding: .8em 1.3em;
  transition: border-color .3s ease;
}
.mc__input::placeholder { color: var(--ink-dim); }
.mc__input:focus { outline: none; border-color: var(--accent); }
.mc__gotcha { position: absolute; left: -5000px; }
.mc__btn {
  font-family: var(--display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .12em;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: .8em 1.8em;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
  will-change: transform;
}
.mc__btn:hover { background: var(--accent); border-color: var(--accent); color: var(--offwhite); }

/* ---------- Footer ---------- */
.footer {
  background: var(--navy-dark);
  color: var(--offwhite);
  /* extra ruimte onderin zodat de vaste SOUND-knop nergens overheen valt */
  padding: clamp(3.5rem, 8vw, 6rem) var(--pad) 5.5rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.footer__col--mc { max-width: 24rem; }
.footer__mctitle {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  letter-spacing: .04em;
}
.footer__mcbody {
  margin: .6rem 0 1.1rem;
  font-weight: 300;
  font-size: .85rem;
  line-height: 1.6;
  color: rgba(237, 235, 216, .7);
}
.mc__form--footer .mc__input {
  border-color: rgba(237, 235, 216, .35);
  color: var(--offwhite);
}
.mc__form--footer .mc__input::placeholder { color: rgba(237, 235, 216, .5); }
.mc__form--footer .mc__btn {
  color: var(--offwhite);
  border-color: rgba(237, 235, 216, .55);
}
.mc__form--footer .mc__btn:hover { color: var(--offwhite); border-color: var(--accent); }

.footer__col--logo { text-align: center; }
.footer__top { display: inline-block; }
.footer__icon { width: 74px; margin: 0 auto 1.4rem; opacity: .9; transition: transform .6s ease; }
.footer__icon:hover { transform: rotate(90deg); }
.footer__wordmark {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.6rem, 4.2vw, 2.6rem);
  letter-spacing: .04em;
}
.footer__shows {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(.85rem, 2.2vw, 1.35rem);
  letter-spacing: .42em;
  text-indent: .42em;
  margin-top: .3rem;
}
.footer__city {
  font-weight: 300;
  letter-spacing: .5em;
  text-indent: .5em;
  font-size: .75rem;
  margin-top: .7rem;
}

.footer__col--faq { display: flex; justify-content: flex-end; }
.footer__faqbtn {
  font-family: var(--display);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .12em;
  border: 2px solid rgba(237, 235, 216, .5);
  border-radius: 999px;
  padding: 1em 2.4em;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.footer__faqbtn:hover { background: var(--accent); border-color: var(--accent); color: var(--offwhite); }

.footer__bottom {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(237, 235, 216, .22);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.footer__links { display: flex; flex-wrap: wrap; gap: 1.2rem 1.6rem; }
.footer__links a {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .8;
  transition: opacity .3s ease, letter-spacing .3s ease, color .3s ease;
}
.footer__links a:hover { opacity: 1; letter-spacing: .22em; color: var(--accent); }
.footer__copy {
  font-size: .72rem;
  font-weight: 300;
  letter-spacing: .08em;
  color: rgba(237, 235, 216, .55);
}
/* bescheiden vermelding van de maker */
.footer__sep { margin: 0 .55em; opacity: .5; }
.footer__maker {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.footer__maker:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 520px) {
  /* op smalle schermen op een eigen regel, netjes onder de copyright */
  .footer__sep { display: none; }
  .footer__maker { display: block; margin-top: .4rem; }
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Motion-reductie ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .hero__title .l, .hero__meta, .hero__tagline { opacity: 1; transform: none; }
  .hline, .vline { transform: none; }
  .cursor { display: none !important; }
}

/* ---------- Tablet ---------- */
@media (max-width: 860px) {
  .footer__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer__col--mc { max-width: 26rem; width: 100%; }
  .mc__form--footer { justify-content: center; }
  .footer__col--faq { justify-content: center; }
}

/* ---------- Mobiel ---------- */
@media (max-width: 640px) {
  .nav__name { display: none; }
  .nav__links { gap: .75rem; }
  .nav__links a { font-size: .6rem; letter-spacing: .1em; padding: .5em .1em; }
  .nav__cta { padding: .5em .9em; }
  /* BLUEPRINT altijd op één regel */
  .hero__row--1 { font-size: min(8.7vw, 2.5rem); }
  .hero__row--2 { font-size: min(4.3vw, 1.25rem); }
  .hero--home .hero__row--1 { font-size: min(7.6vw, 2.3rem); }
  .hero--home .hero__row--soft { font-size: min(3.6vw, 1.05rem); }
  .hero__tagline { font-size: .9rem; letter-spacing: .04em; }
  .faq__row { grid-template-columns: 1fr; gap: .3rem; }
  /* previous shows: titel + jaartal op één regel, omschrijving eronder */
  .edities__item {
    grid-template-columns: 1fr auto;
    gap: .2rem .8rem;
    padding: .75rem .4rem;
  }
  /* rij 1 = titel + jaartal, rij 2 = omschrijving (anders zakt het jaartal
     naar een eigen rij en wordt het kader onnodig hoog) */
  .edities__venue { grid-row: 1; grid-column: 1; }
  .edities__year { grid-row: 1; grid-column: 2; }
  .edities__desc {
    grid-row: 2;
    grid-column: 1 / -1;
    opacity: 1;
    transform: none;
    font-size: .75rem;
    line-height: 1.45;
    /* dichtgeklapt kort houden, uitgeklapt de hele tekst */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .edities__item.is-open .edities__desc {
    display: block;
    overflow: visible;
  }
  .show__body { padding: 1.4rem 1.2rem 1.6rem; }
  /* datum / locatie / tijd elk netjes gecentreerd op een eigen regel */
  .hero__meta { flex-direction: column; align-items: center; gap: .55em; letter-spacing: .22em; }
  .hero__meta span { text-indent: .22em; }
  .hero__meta-sep { display: none; }
  .sound { left: 1rem; bottom: 1rem; }
  .soundhint { left: 1rem; bottom: 3.6rem; }
}

/* ============================================================
   Cookiebalk
   Vaste huisstijlkleuren (--navy / --offwhite / --accent) in plaats van
   --bg en --ink: die twee kantelen mee met het licht-naar-donker verloop
   van de pagina, en de balk moet in beide standen leesbaar blijven.
   ============================================================ */
.cookiebar {
  position: fixed;
  left: var(--pad);
  right: var(--pad);
  bottom: var(--pad);
  margin-inline: auto;
  max-width: 40rem;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  padding: 1.15rem 1.35rem;
  background: var(--navy);
  color: var(--offwhite);
  border: 1px solid rgba(237, 235, 216, 0.18);
  box-shadow: 0 1.5rem 3rem rgba(20, 34, 45, 0.35);
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity .5s ease, transform .5s ease;
}

.cookiebar.is-open { opacity: 1; transform: none; }

.cookiebar__text {
  flex: 1 1 14rem;
  margin: 0;
  font-family: var(--body);
  font-weight: 300;
  font-size: .78rem;
  line-height: 1.6;
}

.cookiebar__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  flex: 0 0 auto;
}

/* Weigeren en accepteren zijn met opzet identiek: zelfde grootte, kleur en
   gewicht. De toezichthouder ziet een opvallender accepteer-knop als een
   donker patroon, en dan telt de toestemming niet. */
.cookiebar__btn {
  font-family: var(--body);
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .68rem 1.2rem;
  border: 1px solid var(--offwhite);
  background: var(--offwhite);
  color: var(--navy);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.cookiebar__btn:hover { background: var(--accent); border-color: var(--accent); color: var(--navy); }
.cookiebar__btn:focus-visible,
.cookiebar__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cookiebar__link {
  font-family: var(--body);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .04em;
  padding: .68rem .35rem;
  border: 0;
  background: none;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .3s ease;
}

.cookiebar__link:hover { color: var(--accent); }

@media (max-width: 560px) {
  .cookiebar { gap: .9rem; padding: 1rem 1.1rem; }
  .cookiebar__acts { width: 100%; }
  .cookiebar__btn { flex: 1 1 8rem; }
  .cookiebar__link { flex: 1 1 100%; text-align: center; padding-bottom: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cookiebar { transition: none; }
}

/* De geluidsknop staat linksonder en zou onder de cookiebalk verdwijnen.
   Zolang de balk in beeld is schuift hij er precies bovenuit. Via 'bottom'
   en niet via 'transform', want die gebruikt .sound zelf al bij hover. */
.sound { bottom: calc(var(--sound-b, 1.6rem) + var(--cookielift, 0px)); }
.soundhint { bottom: calc(var(--soundhint-b, 4.4rem) + var(--cookielift, 0px)); }
.sound, .soundhint { transition: bottom .5s ease, border-color .3s ease, transform .3s ease, opacity .3s ease; }

body.has-cookiebar { --cookielift: calc(var(--cookiebar-h, 0px) + 0.9rem); }

@media (max-width: 640px) {
  :root { --sound-b: 1rem; --soundhint-b: 3.6rem; }
}

/* ============================================================
   Cookiebeleid — het paneel achter 'Let me choose' en de voetlink
   ============================================================ */
.ckpanel {
  position: fixed;
  inset: 0;
  z-index: 120;              /* boven de intro, zodat hij altijd bereikbaar is */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0rem, 4vw, 2rem);
  opacity: 0;
  transition: opacity .4s ease;
}

.ckpanel.is-open { opacity: 1; }

.ckpanel__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 34, 45, 0.72);
  cursor: pointer;
}

.ckpanel__box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 46rem);
  max-height: min(100%, 44rem);
  background: var(--navy);
  color: var(--offwhite);
  border: 1px solid rgba(237, 235, 216, 0.18);
  box-shadow: 0 2rem 4rem rgba(20, 34, 45, 0.45);
  transform: translateY(1.5rem);
  transition: transform .4s ease;
}

.ckpanel.is-open .ckpanel__box { transform: none; }

.ckpanel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem clamp(1.2rem, 3vw, 2rem);
  border-bottom: 1px solid rgba(237, 235, 216, 0.16);
}

.ckpanel__titel {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ckpanel__x {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1.5rem;
  line-height: 1;
  background: none;
  border: 1px solid rgba(237, 235, 216, 0.3);
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}

.ckpanel__x:hover { border-color: var(--accent); color: var(--accent); }
.ckpanel__x:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ckpanel__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.2rem, 3vw, 2rem);
  font-family: var(--body);
  font-weight: 300;
  font-size: .82rem;
  line-height: 1.65;
}

.ckpanel__lead { margin: 0 0 1.6rem; }
.ckpanel__lead strong { font-weight: 600; }

.ckpanel__voet {
  margin: 1.6rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(237, 235, 216, 0.16);
  font-size: .74rem;
  opacity: .75;
}

/* --- één categorie --- */
.ckcat + .ckcat { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(237, 235, 216, 0.12); }

.ckcat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}

.ckcat__naam {
  margin: 0;
  font-family: var(--body);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ckcat__vast {
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .6;
}

.ckcat__tekst { margin: 0 0 .9rem; opacity: .85; }

.ckcat__leeg {
  margin: 0;
  font-size: .74rem;
  font-style: italic;
  opacity: .6;
}

/* --- schakelaar --- */
.ckcat__switch {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  flex: 0 0 auto;
}

.ckcat__switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ckcat__slider {
  position: relative;
  display: block;
  width: 2.6rem;
  height: 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(237, 235, 216, 0.4);
  background: rgba(237, 235, 216, 0.08);
  transition: background-color .3s ease, border-color .3s ease;
}

.ckcat__slider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: .18rem;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: var(--offwhite);
  transform: translateY(-50%);
  transition: transform .3s ease, background-color .3s ease;
}

.ckcat__switch input:checked + .ckcat__slider { background: var(--accent); border-color: var(--accent); }
.ckcat__switch input:checked + .ckcat__slider::after { transform: translate(1.15rem, -50%); background: var(--navy); }
.ckcat__switch input:focus-visible + .ckcat__slider { outline: 2px solid var(--accent); outline-offset: 3px; }

.ckcat__state {
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  min-width: 1.8rem;
}

/* --- de cookietabel --- */
.ckcat__scroll { overflow-x: auto; }

.ckcat__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .7rem;
  line-height: 1.5;
}

.ckcat__table th,
.ckcat__table td {
  padding: .5rem .7rem .5rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(237, 235, 216, 0.12);
}

.ckcat__table th {
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .62rem;
  opacity: .6;
  white-space: nowrap;
}

.ckcat__table td { opacity: .85; }
.ckcat__table code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em; }

.ckpanel__acts {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  padding: 1.1rem clamp(1.2rem, 3vw, 2rem);
  border-top: 1px solid rgba(237, 235, 216, 0.16);
}

.ckpanel__acts .cookiebar__btn { flex: 1 1 9rem; }

@media (max-width: 640px) {
  .ckpanel { padding: 0; align-items: flex-end; }
  .ckpanel__box { max-height: 92vh; width: 100%; border-left: 0; border-right: 0; border-bottom: 0; }

  /* Op smalle schermen wordt de tabel een lijstje: de koppen staan dan
     vóór de waarde in plaats van erboven. */
  .ckcat__table thead { display: none; }
  .ckcat__table, .ckcat__table tbody, .ckcat__table tr, .ckcat__table td { display: block; width: 100%; }
  .ckcat__table tr { padding: .6rem 0; border-bottom: 1px solid rgba(237, 235, 216, 0.12); }
  .ckcat__table td { border: 0; padding: .12rem 0; }
  .ckcat__table td::before {
    content: attr(data-kop) ' — ';
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .62rem;
    opacity: .55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ckpanel, .ckpanel__box { transition: none; }
}

/* De pagina eronder stil houden zolang het cookiebeleid openstaat. */
body.ckpanel-open { overflow: hidden; }

/* De cookielijst ligt dichtgevouwen: het beleid moet hem noemen, maar het
   paneel hoeft er niet mee vol te staan. */
.ckcat__meer { margin-top: .2rem; }

.ckcat__meerknop {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  list-style: none;
  cursor: pointer;
  font-size: .68rem;
  letter-spacing: .06em;
  opacity: .6;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .3s ease, color .3s ease;
}

.ckcat__meerknop::-webkit-details-marker { display: none; }

.ckcat__meerknop::before {
  content: '+';
  font-size: .9rem;
  line-height: 1;
  text-decoration: none;
}

.ckcat__meer[open] .ckcat__meerknop { opacity: .85; margin-bottom: .6rem; }
.ckcat__meer[open] .ckcat__meerknop::before { content: '\2212'; }
.ckcat__meerknop:hover { opacity: 1; color: var(--accent); }
.ckcat__meerknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ============================================================
   Juridische pagina's (privacyverklaring)
   ============================================================ */
.legal {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) var(--pad) clamp(3rem, 8vw, 6rem);
  font-family: var(--body);
  font-weight: 300;
  font-size: .88rem;
  line-height: 1.75;
  color: var(--ink);
}

.legal p { margin: 0 0 1.1rem; }

.legal__meta {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 1.6rem !important;
}

.legal__lead { font-size: 1rem; line-height: 1.7; }

.legal__h {
  margin: 2.4rem 0 .8rem;
  font-family: var(--body);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.legal a {
  color: inherit;
  border-bottom: 1px solid var(--line-strong);
  transition: color .3s ease, border-color .3s ease;
}

.legal a:hover { color: var(--accent); border-color: var(--accent); }

.legal__list { margin: 0 0 1.1rem; padding-left: 1.1rem; }
.legal__list li { margin-bottom: .5rem; }
.legal__list strong { font-weight: 600; }

.legal__btn {
  font-family: var(--body);
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .68rem 1.2rem;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.legal__btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.legal__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.legal__scroll { overflow-x: auto; margin: 0 0 1.1rem; }

.legal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
  line-height: 1.55;
}

.legal__table th,
.legal__table td {
  padding: .7rem .9rem .7rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.legal__table th {
  font-weight: 600;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .6;
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* de tabel wordt een lijstje: kop vóór de waarde in plaats van erboven */
  .legal__table thead { display: none; }
  .legal__table, .legal__table tbody, .legal__table tr, .legal__table td { display: block; width: 100%; }
  .legal__table tr { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .legal__table td { border: 0; padding: .15rem 0; }
  .legal__table td::before {
    content: attr(data-kop) ' — ';
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .64rem;
    opacity: .55;
  }
}

/* ---------- Tijdschakelaar ----------
   Elementen met het hidden-attribuut blijven écht verborgen, ook als hun
   klasse zelf een display zet (knoppen, rijen). */
[hidden] { display: none !important; }

/* ---------- Plattegrond (eventpagina) ----------
   Lijntekening in de huisstijl. Alle kleuren lopen via --ink / --bg, zodat de
   tekening meekleurt met het licht → donker kantelpunt. Accent alleen bij hover. */
.floorplan { margin-top: clamp(3rem, 7vw, 5.5rem); }
.floorplan__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  margin-bottom: 1.4rem;
}
.floorplan__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  letter-spacing: .03em;
}
.floorplan__sub {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ink-dim);
}
.floorplan__map {
  position: relative;
  border: 1px solid var(--line-strong);
  padding: clamp(.4rem, 1.5vw, 1.2rem);
}
.floorplan__map::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 22px; height: 22px;
  border-top: 2px solid var(--line-strong);
  border-left: 2px solid var(--line-strong);
  transition: border-color .35s ease;
  pointer-events: none;
}
.floorplan__map:hover::before { border-color: var(--accent); }
.floorplan__map svg { display: block; width: 100%; height: auto; overflow: visible; }
.floorplan__map text { font-family: var(--body); }

.fp-gridline { fill: none; stroke: rgba(var(--ink-rgb), .07); stroke-width: 1; }
.fp-ring { fill: none; stroke: rgba(var(--ink-rgb), .55); stroke-width: 1.5; stroke-dasharray: 7 9; }
.fp-dim { fill: none; stroke: rgba(var(--ink-rgb), .45); stroke-width: 1.2; }
.fp-shape, .fp-inner, .fp-zone {
  stroke: var(--ink);
  stroke-linejoin: round;
  fill: var(--bg);
}
.fp-shape { stroke-width: 2.4; fill: color-mix(in srgb, var(--ink) 8%, var(--bg)); }
.fp-inner { stroke-width: 1.4; fill: color-mix(in srgb, var(--ink) 4%, var(--bg)); }
.fp-zone {
  stroke-width: 2.6;
  fill: color-mix(in srgb, var(--ink) 20%, var(--bg));
  transition: fill .35s ease, stroke .35s ease;
}
.fp-area { cursor: default; }
.fp-area:hover .fp-zone { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 22%, var(--bg)); }
.fp-label {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .26em;
  fill: var(--ink);
  text-anchor: middle;
}
.fp-label--small { font-size: 15px; letter-spacing: .32em; }
.fp-tiny { font-size: 12px; font-weight: 500; letter-spacing: .34em; fill: rgba(var(--ink-rgb), .6); }
.fp-route {
  fill: none;
  stroke: rgba(var(--ink-rgb), .55);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: .1 10;
  animation: fpRoute 1.4s linear infinite;
}
@keyframes fpRoute { to { stroke-dashoffset: -10.1; } }
.fp-door { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 4; }
.fp-arrow { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fp-wc circle { fill: var(--ink); }
.fp-wc text {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  fill: var(--bg);
  text-anchor: middle;
  dominant-baseline: central;
}
.fp-badge { display: none; }
.fp-badge circle { fill: var(--ink); }
.fp-badge text {
  font-weight: 500;
  font-size: 30px;
  fill: var(--bg);
  text-anchor: middle;
  dominant-baseline: central;
}

.floorplan__legend {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.floorplan__legend li {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem .6rem;
  border-bottom: 1px solid var(--line);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .12em;
}
.fp-key {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  font-family: var(--body);
  font-weight: 500;
  font-size: .85rem;
  line-height: 1;
}
.fp-key--fill { background: var(--ink); color: var(--bg); }
.fp-key--wc { font-size: .62rem; letter-spacing: .04em; }

/* klein scherm: tekst in de tekening wordt te klein, dan nummers + legenda */
@media (max-width: 640px) {
  .fp-label, .fp-tiny, .fp-wc text { display: none; }
  .fp-badge { display: inline; }
  .fp-wc circle { r: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-route { animation: none; }
}