/* =========================================================
   Club Govers — neon jungle
   ========================================================= */

/* Lettertypes staan op de eigen site (assets/fonts), dat laadt sneller dan via Google Fonts.
   Outfit is één bestand met alle diktes. */
@font-face {
  font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/outfit.woff2") format("woff2");
}
@font-face {
  font-family: "Yellowtail"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/yellowtail.woff2") format("woff2");
}

:root {
  --bg: #07080a;
  --bg-2: #0c0f10;
  --surface: #111517;
  --surface-2: #171c1e;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);

  --pink: #ff247e;
  --pink-soft: #ff71b4;
  --pink-glow: rgba(255, 36, 126, 0.45);
  --jungle: #0f3a34;
  --teal: #3fd9bd;

  --text: #f6f1f4;
  --muted: #a6a3ab;

  --radius: 18px;
  --radius-sm: 12px;
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);

  --font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Yellowtail", cursive;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--pink-soft); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--pink); color: #fff; }

.i {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.2em;
}
.btn .i, .chip .i, .meta .i, .event__meta .i, .price-note__meta .i, .docs__label .i, .poster-thumb .i { margin-right: 8px; }
.btn .i { margin-right: 0; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--muted); }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--pink); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.skip:focus { top: 16px; }

/* ---------- Type ---------- */
.eyebrow {
  margin: 0 0 14px;
  font-size: 13px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--pink-soft);
}
.h2 {
  margin: 0;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.02; font-weight: 700; letter-spacing: -.02em;
  text-wrap: balance;
}
.h2--stack { line-height: .98; text-wrap: initial; }
.h2 em, .h3 em { font-style: normal; color: var(--pink); }
.h3 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; font-weight: 700; letter-spacing: -.01em; }
.script, .script-inline { font-family: var(--script); font-weight: 400; letter-spacing: 0; }
.script-inline { color: var(--pink-soft); font-size: 1.2em; text-shadow: 0 0 18px var(--pink-glow); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px;
  font-weight: 600; font-size: 16px; letter-spacing: .01em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s;
  white-space: nowrap;
}
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
.btn--pink {
  background: var(--pink); color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 10px 30px -8px var(--pink-glow);
}
.btn--pink:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 14px 40px -6px var(--pink-glow), 0 0 24px var(--pink-glow); }
.btn--ghost { border: 1px solid var(--line-2); background: rgba(255,255,255,.04); backdrop-filter: blur(8px); }
.btn--ghost:hover { border-color: var(--pink-soft); transform: translateY(-2px); }
.btn--disabled { background: var(--surface-2); color: var(--muted); cursor: default; }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.link { color: var(--pink-soft); font-weight: 600; transition: color .2s; }
.link:hover { color: #fff; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
}
/* The blurred background lives on a pseudo-element: backdrop-filter on .header itself
   would become the containing block for the fixed mobile menu and squeeze it to header height. */
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(7, 8, 10, .78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  opacity: 0; transition: opacity .3s;
}
.header.is-scrolled::before { opacity: 1; }
.header__inner {
  max-width: var(--container); margin: 0 auto; padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.brand__box {
  border: 2px solid #fff; padding: 3px 12px 4px;
  font-size: 19px; font-weight: 500; letter-spacing: .02em; line-height: 1.2;
}
.brand__sub { font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); padding-left: 2px; }
/* De twee logo's naast elkaar: Café Govers en Club Govers. Ze worden nooit samengedrukt of over twee regels gezet. */
.brand__logos { display: flex; gap: 8px; white-space: nowrap; }
.header .brand { flex-shrink: 0; }
/* Op kleinere schermen iets kleiner, en het menu iets compacter, zodat alles naast elkaar past.
   Onder de 1060 pixels komt de menuknop; die regels staan verderop en gaan voor. */
@media (max-width: 1100px) {
  .brand__logos { gap: 6px; }
  .brand__box { font-size: 16px; padding: 2px 9px 3px; }
  .nav a:not(.btn) { padding: 8px 9px; }
  .nav__cta { margin-left: 6px; }
}
@media (max-width: 400px) {
  .brand__box { font-size: 14px; padding: 2px 7px 3px; }
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a:not(.btn) {
  padding: 8px 12px; border-radius: 999px; font-size: 15px; font-weight: 500; color: #d9d4d8;
  transition: color .2s, background .2s;
}
.nav a:not(.btn):hover, .nav a.is-current { color: #fff; background: rgba(255,255,255,.06); }
.nav__cta { margin-left: 10px; }

.burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); }
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* Zo breed dat alle menulinks naast de logo's passen; daaronder de menuknop. */
@media (max-width: 1060px) {
  .burger { display: block; z-index: 2; }
  .nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; justify-content: center; gap: 6px;
    background: rgba(7, 8, 10, .96);
    backdrop-filter: blur(16px);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
  }
  .nav.is-open { opacity: 1; pointer-events: auto; }
  .nav a:not(.btn) { font-size: 28px; font-weight: 600; padding: 10px 20px; }
  .nav__cta { margin: 18px 0 0; }
  body.nav-open { overflow: hidden; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: clamp(640px, 100svh, 1100px);
  display: grid; place-items: center; grid-template-columns: minmax(0, 1fr);
  padding: 130px var(--gutter) 120px;
  overflow: hidden; isolation: isolate;
}
.hero__bg {
  position: absolute; inset: -4%; z-index: -2;
  background: url("../assets/govers-achtergrond-definitief.jpg") center / cover no-repeat;
  animation: drift 24s ease-in-out infinite alternate;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 48%, rgba(7,8,10,.55), transparent 70%),
    linear-gradient(to bottom, rgba(7,8,10,.35) 0%, transparent 30%, rgba(7,8,10,.4) 70%, var(--bg) 100%);
}
@keyframes drift { from { transform: scale(1.02) translate3d(0,0,0); } to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); } }

.hero__inner { text-align: center; width: 100%; max-width: 900px; }
.hero__title { margin: 0; display: flex; flex-direction: column; align-items: center; }
.neon {
  font-size: clamp(58px, 17vw, 210px);
  font-weight: 200; line-height: .9; letter-spacing: .06em;
  color: #ffe9f3;
  text-shadow:
    0 0 2px #fff,
    0 0 8px #ff9cc8,
    0 0 18px var(--pink),
    0 0 42px var(--pink),
    0 0 80px rgba(255, 36, 126, .55);
  animation: flicker 7s linear infinite;
  padding-left: .06em; /* compensate trailing letter-spacing */
}
.hero__title .script {
  margin-top: 4px;
  font-size: clamp(30px, 5.4vw, 64px);
  color: #ffe1ee;
  text-shadow: 0 0 6px #ff9cc8, 0 0 22px var(--pink), 0 0 44px rgba(255,36,126,.5);
}
@keyframes flicker {
  0%, 18%, 20%, 22%, 62%, 64%, 100% { opacity: 1; }
  19%, 21%, 63% { opacity: .55; }
}
.hero__lead { max-width: 600px; margin: 26px auto 34px; font-size: clamp(17px, 1.6vw, 20px); color: #ddd6db; font-weight: 300; }
.hero__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.hero__scroll {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.4); border-radius: 14px;
}
.hero__scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* Next event teaser */
.next {
  position: absolute; right: var(--gutter); bottom: 40px;
  width: min(340px, calc(100% - 2 * var(--gutter)));
}
.next__label { display: block; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--pink-soft); margin-bottom: 8px; }
.next__card {
  width: 100%; min-height: 102px; display: flex; gap: 14px; align-items: center; text-align: left;
  padding: 10px; border-radius: 16px;
  background: rgba(12, 15, 16, .72); border: 1px solid var(--line-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: border-color .25s, transform .25s var(--ease);
}
.next__card:hover { border-color: var(--pink); transform: translateY(-3px); }
.next__card img, .next__card .next__ph { width: 64px; height: 80px; object-fit: cover; border-radius: 10px; flex: none; background: var(--surface-2); }
.next__card strong { display: block; font-size: 16px; line-height: 1.25; margin-bottom: 4px; }
.next__card small { color: var(--muted); font-size: 14px; }
@media (max-width: 960px) {
  .next { position: relative; right: auto; bottom: auto; margin: 44px auto 0; grid-row: 2; }
  /* Houd de plek voor het kaartje al vrij terwijl de agenda laadt, anders schuift de tekst erboven op. */
  .next[hidden] { display: block; visibility: hidden; }
  .hero__scroll { display: none; }
}

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden; border-block: 1px solid var(--line);
  background: linear-gradient(90deg, var(--bg), var(--bg-2), var(--bg));
  padding: 18px 0;
}
.marquee__track { display: flex; width: max-content; animation: marquee 120s linear infinite; }
/* Spacing via margins (not gap) so each group is exactly one loop period wide. */
.marquee__group { display: flex; flex: none; align-items: center; }
.marquee span { margin-right: 32px; font-size: clamp(20px, 2.4vw, 30px); font-weight: 300; text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; }
.marquee i { width: 8px; height: 8px; margin-right: 32px; flex: none; background: var(--pink); transform: rotate(45deg); box-shadow: 0 0 10px var(--pink); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: clamp(80px, 11vw, 140px) 0; position: relative; }
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.section__lead { color: var(--muted); font-size: 18px; max-width: 620px; margin: 0 0 40px; font-weight: 300; }
.section--jungle {
  background:
    radial-gradient(ellipse 70% 60% at 85% 50%, rgba(63, 217, 189, .10), transparent 70%),
    radial-gradient(ellipse 50% 50% at 10% 20%, rgba(255, 36, 126, .08), transparent 70%),
    var(--bg-2);
}
.section--glow { background: radial-gradient(ellipse 60% 70% at 70% 50%, rgba(255, 36, 126, .12), transparent 70%); }
.section--dark { background: var(--bg-2); border-top: 1px solid var(--line); }

/* ---------- Filters / chips ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line-2);
  font-size: 15px; font-weight: 500; color: #d9d4d8;
  transition: all .2s;
}
.chip:hover { border-color: var(--pink-soft); color: #fff; }
.chip.is-active { background: #fff; color: #111; border-color: #fff; }
.chip--fav { display: inline-flex; align-items: center; }
.chip--fav .i { width: 1em; height: 1em; margin-right: 6px; }
.chip--fav.is-active { background: var(--pink); border-color: var(--pink); color: #fff; }
.chip--fav.is-active .i { fill: currentColor; }

/* ---------- Events ---------- */
.events { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }
.event {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
  display: flex; flex-direction: column; text-align: left;
}
.event:hover { transform: translateY(-6px); border-color: rgba(255, 36, 126, .6); box-shadow: 0 24px 50px -24px var(--pink-glow); }
.event__open { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.event__poster { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-2); position: relative; }
.event__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.event:hover .event__poster img { transform: scale(1.05); }
.event__poster::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(17,21,23,.9)); }
.event__ph { width: 100%; height: 100%; display: grid; place-items: center; background: url("../assets/govers-achtergrond-definitief.jpg") center / cover; }
.event__ph span { font-size: 40px; font-weight: 200; letter-spacing: .06em; color: #ffe9f3; text-shadow: 0 0 10px var(--pink), 0 0 30px var(--pink); }
.event__date {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 58px; height: 62px; border-radius: 12px;
  background: rgba(7, 8, 10, .82); backdrop-filter: blur(8px); border: 1px solid var(--line-2);
  line-height: 1;
}
.event__date b { font-size: 24px; font-weight: 700; }
.event__date small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--pink-soft); margin-top: 4px; }
.event__fav {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(7, 8, 10, .7); backdrop-filter: blur(8px); border: 1px solid var(--line-2);
  display: grid; place-items: center; color: #eee;
  transition: transform .2s, color .2s, background .2s;
}
.event__fav .i { width: 20px; height: 20px; vertical-align: 0; }
.event__fav:hover { transform: scale(1.1); }
.event__fav[aria-pressed="true"] { color: #fff; background: var(--pink); border-color: var(--pink); }
.event__fav[aria-pressed="true"] .i, #modalFav[aria-pressed="true"] .i, #modalHerinnering[aria-pressed="true"] .i { fill: currentColor; }
.event__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.event__title { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 600; }
.event__meta { color: var(--muted); font-size: 15px; display: flex; gap: 16px; flex-wrap: wrap; }
.event__meta span { display: inline-flex; align-items: center; }
.event__meta .i { margin-right: 6px; color: var(--pink-soft); }
.event__foot { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; }
.tag { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); }
.tag--free { background: rgba(63, 217, 189, .12); color: var(--teal); border-color: rgba(63, 217, 189, .35); }
.tag--tickets { background: rgba(255, 36, 126, .14); color: var(--pink-soft); border-color: rgba(255, 36, 126, .4); }
.tag--deur { background: rgba(255, 255, 255, .07); color: #fff; }
.event__arrow { color: var(--pink-soft); font-size: 20px; transition: transform .25s var(--ease); }
.event:hover .event__arrow { transform: translateX(4px); }

.event--skeleton { aspect-ratio: 4 / 6.2; background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }
.events__empty { text-align: center; color: var(--muted); padding: 40px 20px; border: 1px dashed var(--line-2); border-radius: var(--radius); margin: 0; }

/* ---------- Split layout ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.split--top { align-items: start; }
.split--reverse .split__text { order: 2; }
.split .section__lead { margin-top: 22px; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__text { order: 0; }
}

/* ---------- Feestje ---------- */
.party {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "head banner";
  gap: 36px clamp(40px, 6vw, 80px);
  align-items: center;
}
.party__head { grid-area: head; }
.party__head .section__lead { margin: 22px 0 26px; }
.party__banner { grid-area: banner; }
@media (max-width: 960px) {
  .party { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "banner"; }
}

/* The neon photo is landscape (1643x957): keep its own ratio so nothing is cropped. */
.party__banner {
  position: relative; margin: 0;
  border-radius: 24px; overflow: hidden;
  border: 1px solid rgba(255, 36, 126, .35);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 50px 100px -40px var(--pink-glow), 0 0 80px -30px var(--pink-glow);
}
.party__banner img { width: 100%; height: auto; aspect-ratio: 1643 / 957; transition: transform 1.2s var(--ease); }
.party__banner:hover img { transform: scale(1.02); }
.party__banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .55);
  border-radius: inherit;
}

/* ---------- Tabs / pricing ---------- */
.tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); margin: 18px 0 30px; max-width: 100%; overflow-x: auto; }
.tab { padding: 10px 20px; border-radius: 999px; font-weight: 500; color: #cfcacd; white-space: nowrap; transition: all .2s; }
.tab:hover { color: #fff; }
@media (max-width: 520px) {
  .tabs { display: flex; width: 100%; }
  .tab { flex: 1; padding: 10px 8px; font-size: 15px; }
}
.tab.is-active { background: var(--pink); color: #fff; box-shadow: 0 6px 20px -6px var(--pink-glow); }
.panel { animation: fadeUp .45s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 960px) { .pricing { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pricing { grid-template-columns: 1fr; } }
.price-card, .price-note {
  position: relative; padding: 28px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 16px;
}
.price-card--hot { border-color: rgba(255, 36, 126, .55); background: linear-gradient(180deg, rgba(255, 36, 126, .10), var(--surface) 60%); }
.price-card header h3 { margin: 0 0 4px; font-size: 24px; font-weight: 700; }
.price-card header p { margin: 0; color: var(--muted); font-size: 15px; }
.badge { position: absolute; top: -12px; right: 20px; background: var(--pink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.price-list { list-style: none; margin: 0; padding: 0; }
.price-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px dashed var(--line-2); }
.price-list li:last-child { border-bottom: 0; }
.price-list b { font-size: 19px; font-weight: 700; white-space: nowrap; color: #fff; }
.price-big { margin: 0; font-size: 42px; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 0 22px var(--pink-glow); }
.price-big small { font-size: 16px; font-weight: 400; color: var(--muted); text-shadow: none; }
.price-card .muted { margin: 0; font-size: 15px; }
.price-card .link, .price-note .link { margin-top: auto; align-self: flex-start; }
.price-note { background: transparent; border-style: dashed; border-color: var(--line-2); }
.price-note h4 { margin: 0; font-size: 20px; }
.price-note p { margin: 0; color: #cfcacd; font-size: 15.5px; }
.price-note__meta { color: var(--muted) !important; display: flex; align-items: center; }
.price-note__meta .i { color: var(--pink-soft); }
.dots { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.dots li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); margin-right: 10px; vertical-align: middle; box-shadow: 0 0 8px var(--pink); }

.snackwall { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.snackwall .section__lead { margin: 0 0 24px; }
.snackwall__price { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; color: var(--muted); line-height: 1.3; }
/* Menu board: one neon-framed sign instead of separate tiles */
.menuboard {
  padding: 30px 32px 26px; border-radius: 20px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 36, 126, .12), transparent 65%), #0a0d0e;
  border: 1.5px solid rgba(255, 113, 180, .7);
  box-shadow: 0 0 24px -4px var(--pink-glow), inset 0 0 24px -8px var(--pink-glow);
  text-align: center;
}
.menuboard__title {
  margin: 0 0 14px; font-family: var(--script); font-size: 38px; line-height: 1.1;
  color: #ffe1ee; text-shadow: 0 0 6px #ff9cc8, 0 0 20px var(--pink);
}
.menuboard__list { list-style: none; margin: 0; padding: 0; }
.menuboard__list li {
  padding: 13px 0; font-size: 21px; font-weight: 500; letter-spacing: .02em;
  border-top: 1px solid var(--line);
}
.menuboard__list li:last-child { border-bottom: 1px solid var(--line); }
.menuboard__note { margin: 16px 0 0; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { .snackwall { grid-template-columns: 1fr; } }

.cta-band {
  margin-top: 40px; padding: 28px 32px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(110deg, rgba(255, 36, 126, .18), rgba(63, 217, 189, .08));
  border: 1px solid rgba(255, 36, 126, .35);
}
.cta-band h3 { margin: 0 0 4px; font-size: 22px; }
.cta-band p { margin: 0; color: #d9d4d8; }

/* ---------- Spaarkaart ---------- */
.steps { list-style: none; counter-reset: s; margin: 28px 0 28px; padding: 0; display: grid; gap: 18px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; }
.steps li::before {
  content: counter(s); grid-row: span 2;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--pink); color: #fff; font-weight: 700;
  box-shadow: 0 0 16px var(--pink-glow), inset 0 0 10px var(--pink-glow);
}
.steps b { font-size: 19px; }
.steps span { color: var(--muted); }
.reward { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 24px; border-radius: var(--radius); border: 1px solid rgba(255, 36, 126, .5); background: rgba(255, 36, 126, .06); box-shadow: 0 0 40px -10px var(--pink-glow); }
.reward div { display: flex; align-items: center; gap: 12px; }
.reward b { font-size: 46px; line-height: 1; font-weight: 800; text-shadow: 0 0 18px var(--pink-glow); }
.reward span { max-width: 130px; line-height: 1.25; font-size: 15px; color: #e5dfe3; }
.reward i { font-style: normal; font-size: 34px; color: var(--pink); font-weight: 300; }
.let-op { margin: 18px 0 0; padding: 12px 16px; border-left: 3px solid var(--pink); border-radius: 0 10px 10px 0; background: rgba(255, 36, 126, .06); color: #e5dfe3; font-size: 15px; line-height: 1.45; }
.let-op b { color: var(--pink-soft); margin-right: 4px; }
.let-op--agenda { margin: 0 0 28px; max-width: 620px; }

.stampcard {
  position: relative; border-radius: 26px; padding: 30px;
  background:
    radial-gradient(circle at 20% 0%, rgba(63, 217, 189, .14), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(255, 36, 126, .2), transparent 55%),
    #0d1112;
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 36, 126, .15);
  transform: rotate(-2deg); transition: transform .5s var(--ease);
}
.stampcard:hover { transform: rotate(0deg) scale(1.01); }
.stampcard__title { text-align: center; margin: 0 0 20px; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.stampcard__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.stampcard__grid span {
  aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(255, 113, 180, .45);
  display: grid; place-items: center; cursor: pointer; font-size: 20px;
  transition: all .3s var(--ease);
}
.stampcard__grid span:hover { border-color: var(--pink-soft); }
.stampcard__grid span.is-on { border: 2px solid var(--pink); background: var(--pink); box-shadow: 0 0 16px var(--pink-glow); animation: stamp .35s var(--ease); }
.stampcard__grid span.is-on::after {
  content: ""; width: 42%; height: 24%; margin-top: -10%;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg);
}
@keyframes stamp { from { transform: scale(1.5) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.stampcard__hint { text-align: center; color: var(--muted); font-size: 14px; margin: 18px 0 0; min-height: 1.5em; }
.stampcard__hint.is-full { color: #fff; font-weight: 600; }

/* Ronde foto van de echte spaarkaart. Het voorbeeld (.stampcard) ligt er schuin rechtsonder overheen. */
.spaarkaart-beeld { display: grid; }
.spaarkaart-foto {
  position: relative; width: min(78%, 400px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; cursor: zoom-in;
  box-shadow: 0 0 0 1px rgba(255, 36, 126, .4), 0 0 60px -12px var(--pink-glow);
}
.spaarkaart-foto img { width: 100%; height: 100%; transition: transform .5s var(--ease); }
.spaarkaart-foto:hover img { transform: scale(1.04); }
.spaarkaart-foto__vergroot {
  position: absolute; top: 13%; right: 13%; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(7, 8, 10, .75); border: 1px solid var(--line-2);
}
.spaarkaart-beeld .stampcard { width: 88%; justify-self: end; margin-top: -56px; z-index: 1; }
@media (max-width: 880px) {
  .spaarkaart-foto { justify-self: center; width: min(82%, 340px); }
  .spaarkaart-beeld .stampcard { width: 100%; margin-top: -32px; }
}

/* ---------- Personeel gezocht ---------- */
#vacatures .section__lead { margin-bottom: 14px; }
.vacature__leuze { margin: 0 0 28px; font-size: 30px; line-height: 1.2; color: var(--pink-soft); text-shadow: 0 0 18px var(--pink-glow); }
.vacature__acties { display: flex; gap: 12px; flex-wrap: wrap; }
.vacature__noot { margin: 14px 0 0; color: var(--muted); font-size: 15px; }
.vacature { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vacature__breed { grid-column: 1 / -1; }
@media (max-width: 520px) { .vacature { grid-template-columns: 1fr; } }

/* ---------- Foto's ---------- */
.soon { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 20px; margin-top: 24px; }
.soon__card {
  padding: 32px; border-radius: var(--radius); min-height: 220px;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  position: relative; overflow: hidden;
}
.soon__card--wide { background: linear-gradient(rgba(7,8,10,.55), rgba(7,8,10,.85)), url("../assets/govers-neon-900.jpg") center / cover; border-color: rgba(255, 36, 126, .35); }
.soon__ico {
  width: 34px; height: 34px; margin-bottom: auto;
  fill: none; stroke: var(--pink-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--pink-glow));
}
.soon__card h3 { margin: 0; font-size: 22px; }
.soon__card p { margin: 0; color: var(--muted); }
@media (max-width: 880px) { .soon { grid-template-columns: 1fr 1fr; } .soon__card--wide { grid-column: span 2; } }
@media (max-width: 560px) { .soon { grid-template-columns: 1fr; } .soon__card--wide { grid-column: auto; } }

/* ---------- Fotoalbums (js/fotos.js) ---------- */
.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; margin-top: 24px; }
.albums[hidden], .soon[hidden] { display: none; }
.album {
  display: flex; flex-direction: column; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.album:hover { transform: translateY(-6px); border-color: rgba(255, 36, 126, .6); box-shadow: 0 24px 50px -24px var(--pink-glow); }
.album__omslag { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.album__omslag img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.album:hover .album__omslag img { transform: scale(1.04); }
.album__tekst { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px 20px; }
.album__tekst strong { font-size: 20px; font-weight: 600; line-height: 1.25; }
.album__tekst small { color: var(--muted); font-size: 15px; }
.album--skeleton { min-height: 290px; background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }

/* Het geopende album: een groot venster met alle foto's in vierkantjes */
.album-venster { width: min(1100px, calc(100% - 32px)); }
.album-venster__kop { padding: 28px 76px 0 28px; }
.album-venster__kop .h3 { margin: 4px 0 0; }
.album-venster__tekst { margin: 10px 0 0; color: var(--muted); white-space: pre-line; }
.album-fotos {
  list-style: none; margin: 0; padding: 22px 28px 28px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px;
}
.album-foto { display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.album-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.album-foto:hover img { transform: scale(1.05); }
@media (max-width: 600px) {
  .album-venster__kop { padding: 22px 68px 0 18px; }
  .album-fotos { grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 16px 12px 18px; }
  .album-foto { border-radius: 6px; }
}

/* Eén foto groot, met vorige en volgende (de rest komt van .lightbox) */
.foto-viewer__teller {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%); margin: 0;
  padding: 4px 14px; border-radius: 999px; background: rgba(7, 8, 10, .7); font-size: 14px; font-weight: 600;
}
.foto-viewer__pijl {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(7, 8, 10, .7); border: 1px solid var(--line-2); transition: background .2s;
}
.foto-viewer__pijl:hover { background: var(--pink); }
.foto-viewer__pijl .i { width: 22px; height: 22px; vertical-align: 0; }
.foto-viewer__pijl--vorige { left: 16px; }
.foto-viewer__pijl--volgende { right: 16px; }
.foto-viewer__pijl[hidden] { display: none; }
.foto-viewer img { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
/* Op een telefoon de pijlen onderin, waar je duim zit (vegen kan ook) */
@media (max-width: 600px) {
  .foto-viewer__pijl { top: auto; bottom: 20px; transform: none; }
}

/* ---------- Huisregels ---------- */
.poster-thumb { position: relative; display: block; margin: 0 0 24px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); max-width: 260px; }
.poster-thumb img { aspect-ratio: 3 / 4; object-fit: cover; object-position: top; transition: transform .5s var(--ease); }
.poster-thumb:hover img { transform: scale(1.04); }
.poster-thumb span { position: absolute; inset: auto 0 0; padding: 14px; background: linear-gradient(transparent, rgba(0,0,0,.85)); font-weight: 600; font-size: 15px; }
.docs { display: grid; gap: 10px; max-width: 360px; }
.docs a { display: flex; justify-content: space-between; padding: 14px 18px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); font-weight: 500; transition: border-color .2s, background .2s; }
.docs a:hover { border-color: var(--pink); background: rgba(255, 36, 126, .06); }
.docs a > span:last-child { color: var(--pink-soft); }
.docs__label { display: inline-flex; align-items: center; }
.docs__label .i { color: var(--pink-soft); }
.poster-thumb span { display: flex; align-items: center; }

.rules { display: grid; gap: 8px; }
.rule { border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); transition: border-color .2s; }
.rule[open] { border-color: rgba(255, 36, 126, .45); }
.rule summary {
  list-style: none; cursor: pointer; padding: 16px 18px;
  display: grid; grid-template-columns: 34px 1fr 20px; gap: 12px; align-items: center;
  font-weight: 600; font-size: 16px;
}
.rule summary::-webkit-details-marker { display: none; }
.rule summary b { color: var(--pink-soft); font-weight: 700; font-variant-numeric: tabular-nums; }
.rule summary::after { content: "+"; font-size: 22px; font-weight: 300; color: var(--muted); transition: transform .25s var(--ease); justify-self: end; }
.rule[open] summary::after { transform: rotate(45deg); color: var(--pink); }
.rule p { margin: 0; padding: 0 18px 18px 64px; color: #cfcacd; font-size: 15.5px; }
@media (max-width: 520px) { .rule p { padding-left: 18px; } }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 70px 0 30px; background: var(--bg); }
.footer__grid { display: grid; grid-template-columns: 1fr 1.2fr 1.4fr 1fr; gap: 32px; }
.footer__logo { width: 130px; height: 130px; border-radius: 50%; box-shadow: 0 0 30px var(--pink-glow); }
.footer h4 { margin: 0 0 12px; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--pink-soft); }
.footer p { margin: 0 0 10px; color: #d9d4d8; line-height: 1.8; }
.footer p a:hover { color: var(--pink-soft); }
.footer__bottom { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.footer__bottom .script { font-size: 26px; color: var(--pink-soft); text-shadow: 0 0 14px var(--pink-glow); }
@media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Modal ---------- */
dialog { color: var(--text); }
dialog::backdrop { background: rgba(3, 4, 5, .82); backdrop-filter: blur(6px); }
/* Venster open: de pagina erachter staat stil. De ruimte van de scrollbalk blijft, zodat niets verspringt. */
html.venster-open { overflow: hidden; scrollbar-gutter: stable; }
html.venster-open body { overflow: hidden; }
/* Scrollen in een venster loopt niet door naar de pagina erachter. */
.modal, .lightbox { overscroll-behavior: contain; }
.modal {
  width: min(1000px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 1px solid var(--line-2); border-radius: 24px;
  background: var(--surface); overflow: auto;
}
.modal[open] { animation: pop .35s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.modal__close {
  position: sticky; top: 14px; float: right; margin: 14px 14px -58px 0; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; background: rgba(7, 8, 10, .8); border: 1px solid var(--line-2);
  display: grid; place-items: center; transition: background .2s;
}
.modal__close .i { width: 20px; height: 20px; vertical-align: 0; }
.modal__close:hover { background: var(--pink); }
.modal__grid { display: grid; grid-template-columns: 1fr 1.1fr; }
.modal__poster { background: #000; min-height: 100%; }
.modal__poster button { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.modal__poster img { width: 100%; height: 100%; object-fit: contain; max-height: 82dvh; }
.modal__body { padding: 40px 36px; }
.meta { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; color: #d9d4d8; }
.meta li { display: flex; align-items: center; }
.meta .i { color: var(--pink-soft); margin-right: 10px; }
.modal__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
/* "Zet in je agenda": een knop die een lijstje met twee keuzes openklapt (zie js/agenda.js) */
.agenda-keuze { position: relative; }
.agenda-keuze summary { list-style: none; }
.agenda-keuze summary::-webkit-details-marker { display: none; }
.agenda-keuze[open] summary { border-color: var(--pink-soft); }
.agenda-keuze__lijst {
  position: absolute; z-index: 2; top: calc(100% + 8px); left: 0; min-width: 100%;
  display: grid; padding: 6px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: 0 20px 40px -12px #000;
}
.agenda-keuze__lijst a { padding: 10px 14px; border-radius: 8px; white-space: nowrap; font-weight: 500; transition: background .2s; }
.agenda-keuze__lijst a:hover { background: rgba(255, 36, 126, .12); }
/* Op een telefoon: het kleine linkje "Andere agenda?" op een eigen regel, onder alle knoppen */
.agenda-keuze--anders { flex-basis: 100%; order: 1; }
.agenda-keuze--anders summary { display: inline-block; cursor: pointer; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.agenda-keuze--anders .agenda-keuze__lijst { top: calc(100% + 6px); min-width: 0; width: max-content; }
.melding-tekst { margin: -16px 0 30px; color: var(--muted); font-size: 15px; }
.modal__sub { margin: 0 0 8px; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.modal__desc { margin: 0; white-space: pre-line; color: #d9d4d8; }
@media (max-width: 760px) {
  .modal__grid { grid-template-columns: 1fr; }
  .modal__poster img { max-height: 60dvh; }
  .modal__body { padding: 28px 22px; }
}

.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100%; height: 100%; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); object-fit: contain; border-radius: 12px; }
.lightbox .modal__close { position: fixed; top: 16px; right: 16px; margin: 0; float: none; }

/* ---------- Club Govers als app (balk + uitleg voor iPhone) ---------- */
.beginscherm {
  position: fixed; z-index: 40; left: 16px; bottom: 16px;
  width: min(420px, calc(100% - 32px));
  display: flex; align-items: center; gap: 12px;
  padding: 10px 6px 10px 10px; border-radius: 16px;
  background: rgba(12, 15, 16, .92); border: 1px solid rgba(255, 36, 126, .45);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -20px #000, 0 0 30px -12px var(--pink-glow);
  animation: pop .35s var(--ease);
}
.beginscherm[hidden] { display: none; }
.beginscherm__icoon { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.beginscherm__tekst { flex: 1; min-width: 0; margin: 0; line-height: 1.3; }
.beginscherm__tekst strong { display: block; font-size: 15.5px; text-wrap: balance; }
.beginscherm__tekst span { display: block; font-size: 14px; color: var(--muted); }
.beginscherm .btn { flex: none; padding: 0 14px; }
.beginscherm__sluiten { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--muted); transition: color .2s, background .2s; }
.beginscherm__sluiten:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.beginscherm__sluiten .i { vertical-align: 0; }
@media (max-width: 400px) { .beginscherm__tekst span { display: none; } }
/* Zolang de balk in beeld is, blijft er onderaan de pagina ruimte vrij, zodat hij niets bedekt. */
body:has(.beginscherm:not([hidden])) .footer { padding-bottom: 110px; }

.modal--smal { width: min(520px, calc(100% - 32px)); }
.uitleg__icoon { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 20px; box-shadow: 0 0 30px var(--pink-glow); }
.uitleg__intro { margin: 0; color: #d9d4d8; }
.uitleg__noot { margin: 0 0 24px; color: var(--muted); font-size: 15px; }
#beginschermUitleg .steps b { font-size: 17px; }
#beginschermUitleg .steps .i { color: var(--pink-soft); margin-left: 4px; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Legal pages (privacy, ticketvoorwaarden) ---------- */
.legal {
  padding: 140px 0 90px;
  background: radial-gradient(ellipse 60% 40% at 80% 0%, rgba(255, 36, 126, .10), transparent 70%);
}
.legal__inner { max-width: 780px; }
.legal h1 { margin-bottom: 28px; hyphens: manual; }
.legal__notice {
  margin: 0 0 24px; padding: 14px 18px; border-radius: var(--radius-sm);
  border: 1px dashed rgba(255, 113, 180, .6); background: rgba(255, 36, 126, .07);
  color: var(--pink-soft); font-size: 15px; letter-spacing: .04em;
}
.legal__company {
  font-style: normal; margin: 0 0 44px; padding: 20px 22px;
  border-left: 2px solid var(--pink); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: #d9d4d8; line-height: 1.8;
}
.legal section { padding: 26px 0; border-top: 1px solid var(--line); }
.legal h2 { margin: 0 0 12px; font-size: 21px; font-weight: 600; color: #fff; }
.legal p { margin: 0 0 12px; color: #cfcacd; }
.legal p:last-child { margin-bottom: 0; }
.legal a:not(.btn):not(.link) { color: var(--pink-soft); text-decoration: underline; text-underline-offset: 3px; }
.legal a:not(.btn):not(.link):hover { color: #fff; }
.legal__final { padding-top: 26px; border-top: 1px solid var(--line); color: #fff !important; }
.legal__version { color: var(--muted) !important; font-size: 14px; }
.legal .dots { margin: 0 0 12px; color: #cfcacd; }
/* Tekst die in een concept nog moet worden ingevuld (zie de uitleg bovenin privacy/index.html) */
.legal__invullen { padding: 1px 6px; border-radius: 4px; background: rgba(255, 214, 10, .14); color: #ffe27a; }
.legal__nav { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.footer--slim { padding-top: 0; }
.footer--slim .footer__bottom { margin-top: 0; }

/* ---------- App: de site geopend vanaf het beginscherm (zie js/app-stand.js en js/app.js) ---------- */
/* Op de website zijn deze onderdelen er niet. */
.opstart, .appbalk, .tabbalk { display: none; }

html.app {
  --appbalk: 56px;
  --tabbalk: 64px;
  scroll-padding-top: calc(var(--appbalk) + env(safe-area-inset-top) + 12px);
  -webkit-tap-highlight-color: transparent;
}
html.app [data-alleen-site] { display: none; }
html.app .appbalk, html.app .tabbalk, html.app .btn, html.app .chip { -webkit-user-select: none; user-select: none; }
html.app .reveal { opacity: 1; transform: none; transition: none; }

/* Welk scherm zichtbaar is: alleen de onderdelen waarvan data-scherm bij het actieve scherm hoort. */
html.app [data-scherm] { display: none; }
html.app[data-actief-scherm="agenda"] [data-scherm~="agenda"],
html.app[data-actief-scherm="favorieten"] [data-scherm~="favorieten"],
html.app[data-actief-scherm="spaarkaart"] [data-scherm~="spaarkaart"],
html.app[data-actief-scherm="meer"] [data-scherm~="meer"],
html.app[data-actief-scherm="feestje"] [data-scherm~="feestje"],
html.app[data-actief-scherm="fotos"] [data-scherm~="fotos"],
html.app[data-actief-scherm="vacatures"] [data-scherm~="vacatures"],
html.app[data-actief-scherm="info"] [data-scherm~="info"],
html.app[data-actief-scherm="contact"] [data-scherm~="contact"] { display: block; }

/* Ruimte voor de balk bovenin en de tabbalk onderin, plus de klok en de streep van de iPhone. */
html.app body:has(.tabbalk) {
  padding-top: calc(var(--appbalk) + env(safe-area-inset-top));
  padding-bottom: calc(var(--tabbalk) + env(safe-area-inset-bottom));
  /* Ook een kort scherm (zoals Favorieten met weinig hartjes) vult het hele scherm.
     Anders zet een iPhone de tabbalk soms te hoog als de app vanaf het beginscherm draait.
     100vh is voor oudere telefoons, 100lvh is het hele scherm. */
  min-height: 100vh;
  min-height: 100lvh;
}
html.app .container {
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* Balk bovenin met de titel van het scherm */
html.app .appbalk {
  position: fixed; inset: 0 0 auto; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  height: calc(var(--appbalk) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  background: rgba(7, 8, 10, .86);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.appbalk__logo { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 14px var(--pink-glow); }
.appbalk__logo[hidden] { display: none; }
.appbalk__titel { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.appbalk__terug { width: 40px; height: 40px; margin: 0 -8px 0 -10px; display: grid; place-items: center; border-radius: 50%; color: var(--pink-soft); }
.appbalk__terug[hidden] { display: none; }
.appbalk__terug .i { width: 26px; height: 26px; vertical-align: 0; }

/* Tabbladen onderin */
html.app .tabbalk {
  position: fixed; inset: auto 0 0; z-index: 60;
  display: grid; grid-template-columns: repeat(4, minmax(0, 140px)); justify-content: center; /* op een breed scherm bij elkaar in het midden */
  height: calc(var(--tabbalk) + env(safe-area-inset-bottom));
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: rgba(7, 8, 10, .9);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid var(--line);
}
.tabbalk__knop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .02em; color: var(--muted); transition: color .2s;
}
.tabbalk__knop .i { width: 24px; height: 24px; vertical-align: 0; }
.tabbalk__knop[aria-current="page"] { color: var(--pink-soft); }
.tabbalk__knop[aria-current="page"] .i { filter: drop-shadow(0 0 6px var(--pink-glow)); }
.tabbalk__knop[data-naar="favorieten"][aria-current="page"] .i { fill: currentColor; }

/* Schermen: minder ruimte dan op de website, en geen kleine kopjes (de titel staat al in de balk). */
html.app .section { padding: 24px 0 40px; }
html.app main .eyebrow { display: none; }

/* Agenda: meteen de evenementen. De filters zijn niet nodig: Favorieten is in de app een eigen tabblad. */
html.app #agenda .section__head, html.app #agenda .section__lead { display: none; }

/* Meer: meldingen bovenaan, daaronder de lijst */
html.app .meer .cta-band { margin: 0 0 24px; }
.meer .docs { max-width: none; }

/* Contact (de footer van de website) */
html.app #contact { padding: 28px 0 32px; border-top: 0; }
html.app #contact .footer__bottom { margin-top: 32px; }

/* Pop-ups niet onder de klok of de streep van de iPhone */
html.app .modal { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px); }
html.app .lightbox .modal__close { top: calc(16px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right)); }
html.app .foto-viewer__teller { top: calc(24px + env(safe-area-inset-top)); }
@media (max-width: 600px) {
  html.app .foto-viewer__pijl { bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* Privacy en ticketvoorwaarden in de app: ruimte voor de klok bovenin en de streep onderin */
html.app .header__inner { padding-top: calc(14px + env(safe-area-inset-top)); }
html.app .legal { padding-top: calc(140px + env(safe-area-inset-top)); }
html.app .footer--slim { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }

/* Opstartscherm: het logo, precies zoals het opstartbeeld van de iPhone (assets/opstart/). Niet als je terugkomt in de app.
   Het vaagt weg zodra de agenda er staat (app.js zet dan de class app-klaar).
   Lukt dat niet binnen 2 seconden, dan vaagt het toch weg, zodat je nooit blijft wachten. */
html.app:not(.app-hervat) .opstart {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; background: var(--bg); pointer-events: none;
  transition: opacity .3s ease, visibility .3s;
  animation: opstart-weg .3s ease 2s forwards;
}
html.app.app-klaar .opstart { opacity: 0; visibility: hidden; }
.opstart img { width: 136px; height: 136px; border-radius: 50%; box-shadow: 0 0 50px var(--pink-glow); }
/* Draaiend rondje onder het logo: de app is aan het laden. Het logo blijft precies in het midden staan.
   Het opstartbeeld van de iPhone heeft het rondje niet (een plaatje kan niet draaien);
   het vaagt er hier zachtjes bij, in de ruimte tussen het logo en de tekst.
   Het draait 4 rondjes (3,2 seconden): iets langer dan het opstartscherm er hooguit staat.
   Daarna stopt het vanzelf, anders blijft het onzichtbaar doordraaien. */
.opstart::after {
  content: ""; position: absolute;
  top: calc(50% + 68px + 32px); left: calc(50% - 11px);
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--line-2); border-top-color: var(--pink);
  animation: opstart-draai .8s linear 4, opstart-erbij .3s ease;
}
@keyframes opstart-draai { to { transform: rotate(1turn); } }
@keyframes opstart-erbij { from { opacity: 0; } }
/* "Aan het laden..." onder het rondje. Dit staat ook op het opstartbeeld van de iPhone, op precies dezelfde plek. */
.opstart__tekst {
  position: absolute; left: 0; right: 0; top: calc(50% + 68px + 32px + 22px + 14px);
  margin: 0; text-align: center; color: var(--muted);
  font: 500 14px/20px var(--font); letter-spacing: .02em;
}
@keyframes opstart-weg { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .opstart { display: none !important; } }