/* ===========================================
   OKTOBERFEST NIJMEGEN — Design System
   =========================================== */

/* ---------- Google Fonts: geladen via <link> in index.html (niet-blokkerend) ---------- */

/* ---------- Screen-reader only (SEO/a11y) ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- CSS Custom Properties ---------- */
:root {
  /* Primary palette */
  --blue-primary: #1a4b8c;
  --blue-dark: #0d2b52;
  --blue-deeper: #091e3a;
  --blue-light: #3a7bd5;
  --blue-muted: #2a5ea8;

  /* Gold / Yellow */
  --gold-primary: #d4a017;
  --gold-bright: #f5c518;
  --gold-dark: #b8860b;
  --gold-glow: rgba(245, 197, 24, 0.4);

  /* Neutrals */
  --white: #ffffff;
  --cream: #fdf6e3;
  --cream-dark: #f5edd6;
  --wood-brown: #8b5e3c;
  --wood-dark: #5c3a1e;

  /* Text */
  --text-dark: #1a1a1a;
  --text-body: #3d3d3d;
  --text-muted: #6b7280;
  --text-light: #9ca3af;

  /* UI */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.18);
  --shadow-xl: 0 16px 60px rgba(0, 0, 0, 0.25);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Transition */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
}

::selection {
  background: var(--gold-bright);
  color: var(--blue-dark);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s var(--ease-out);
}

ul {
  list-style: none;
}

/* ---------- Utility ---------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--blue-primary);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: var(--space-lg);
  letter-spacing: -0.02em;
}

.section-title--light {
  color: var(--gold-bright);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.section-subtitle {
  text-align: center;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--text-muted);
  max-width: 700px;
  margin: 0 auto var(--space-xl);
  line-height: 1.7;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.1rem;
  padding: 16px 36px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn--gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-primary));
  color: var(--blue-dark);
  box-shadow: 0 6px 0 var(--gold-dark), 0 8px 20px rgba(212, 160, 23, 0.3);
}

.btn--gold:hover {
  transform: translateY(3px);
  box-shadow: 0 3px 0 var(--gold-dark), 0 4px 12px rgba(212, 160, 23, 0.3);
}

.btn--blue {
  background: linear-gradient(135deg, var(--blue-light), var(--blue-primary));
  color: var(--white);
  box-shadow: 0 6px 0 var(--blue-dark), 0 8px 20px rgba(26, 75, 140, 0.3);
}

.btn--blue:hover {
  transform: translateY(3px);
  box-shadow: 0 3px 0 var(--blue-dark), 0 4px 12px rgba(26, 75, 140, 0.3);
}

.btn--pulse {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 6px 0 var(--gold-dark), 0 0 20px var(--gold-glow);
  }

  50% {
    box-shadow: 0 6px 0 var(--gold-dark), 0 0 40px var(--gold-glow), 0 0 60px rgba(245, 197, 24, 0.2);
  }
}

/* Reveal animation for sections */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================
   1. NAVIGATION BAR
   =========================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--blue-primary);
  border-bottom: 4px solid var(--gold-bright);
  transition: all 0.4s var(--ease-out);
  backdrop-filter: blur(10px);
}

.navbar.scrolled {
  background: rgba(26, 75, 140, 0.97);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  transition: height 0.4s var(--ease-out);
  position: relative;
  z-index: 10000;
}

.navbar.scrolled .navbar__inner {
  height: 64px;
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-shrink: 0;
}

.navbar__logo {
  display: flex;
  align-items: center;
}

.navbar__logo-img {
  height: 70px;
  width: auto;
  object-fit: contain;
  transition: height 0.4s var(--ease-out);
}

.navbar.scrolled .navbar__logo-img {
  height: 52px;
}

.navbar__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
}

.navbar__info svg {
  vertical-align: -2px;
  margin-right: 4px;
}

.navbar__menu {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

.navbar__link {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
}

.navbar__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold-bright);
  transition: width 0.3s var(--ease-out);
}

.navbar__link:hover {
  color: var(--gold-bright);
}

.navbar__link:hover::after {
  width: 100%;
}

.navbar__ticket-btn {
  font-weight: 900;
  font-size: 1rem;
  padding: 10px 22px;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-primary));
  color: var(--blue-dark);
  border: none;
  cursor: pointer;
  animation: pulse-glow 2s ease-in-out infinite;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: transform 0.2s;
  flex-shrink: 0;
  white-space: nowrap;
}

.navbar__ticket-btn:hover {
  transform: scale(1.08);
}

/* Mobile hamburger */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
  z-index: 10000;
}

.navbar__hamburger span {
  width: 28px;
  height: 3px;
  background: var(--white);
  border-radius: 2px;
  transition: all 0.3s var(--ease-out);
}

.navbar__hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.navbar__hamburger.active span:nth-child(2) {
  opacity: 0;
}

.navbar__hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile menu */
.navbar__mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--blue-deeper);
  flex-direction: column;
  padding: 0 var(--space-lg) var(--space-xl);
  display: none;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.navbar__mobile-menu.open {
  display: flex;
  animation: menuFadeIn 0.3s ease-out forwards;
}

@keyframes menuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.navbar__mobile-menu a.mobile-link {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--white);
  padding: 16px 0;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.navbar__mobile-menu a.mobile-link:hover {
  color: var(--gold-bright);
}

.navbar__mobile-menu .btn {
  margin-top: 24px;
  width: 100%;
  justify-content: center;
}

/* ===========================================
   2. HERO SECTION
   =========================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 80px;
  background: #3a2415;
}

.hero__wood-bg {
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/wood-texture.png');
  background-image: image-set(url('../assets/images/wood-texture.webp') type('image/webp'),
      url('../assets/images/wood-texture.png') type('image/png'));
  background-size: cover;
  background-position: center;
  opacity: 0.7;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(30, 15, 5, 0.6) 100%);
}

/* Bunting at top */
.hero__bunting {
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  height: 120px;
  z-index: 5;
  overflow: hidden;
}

.hero__bunting img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: sway-bunting 5s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes sway-bunting {

  0%,
  100% {
    transform: rotate(-0.5deg) scaleY(1);
  }

  50% {
    transform: rotate(0.5deg) scaleY(1.02);
  }
}

/* Border pattern at bottom */
.hero__border {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 5;
  overflow: hidden;
}

.hero__border img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Checkerboard subtle pattern overlay */
.hero__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.01;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI4MCIgdmlld0JveD0iMCAwIDUwIDgwIj48cGF0aCBkPSJNMjUsMCBMNTAsNDAgTDI1LDgwIEwwLDQwIFoiIGZpbGw9IiNmZmZmZmYiLz48L3N2Zz4=");
  background-size: 30px 48px;
  pointer-events: none;
}

/* Center content */
.hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: var(--space-lg);
}

.hero__logo-wrapper {
  animation: logo-bob 4s ease-in-out infinite;
  margin-bottom: var(--space-lg);
}

.hero__logo {
  max-width: 1000px;
  width: 90vw;
  margin: 0 auto;
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.5));
}

@keyframes logo-bob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

.hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: var(--white);
  font-style: italic;
  font-weight: 700;
  margin-bottom: var(--space-xl);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.hero__info-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.hero__info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 12px 24px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.hero__info-item svg {
  color: var(--gold-bright);
}

/* Hero polaroid photos */
.hero__photo {
  position: absolute;
  z-index: 8;
  background: var(--white);
  padding: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.4s var(--ease-out);
  border-radius: 2px;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 1px;
}

/* All photos perfectly locked to the absolute center using fixed pixel offsets */
.hero__photo--left {
  width: 230px;
  height: 185px;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% - 480px), calc(-50% - 210px)) rotate(-8deg);
}

.hero__photo--left:hover {
  transform: translate(calc(-50% - 480px), calc(-50% - 210px)) rotate(-3deg) scale(1.06);
}

.hero__photo--right {
  width: 230px;
  height: 185px;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + 480px), calc(-50% - 210px)) rotate(7deg);
}

.hero__photo--right:hover {
  transform: translate(calc(-50% + 480px), calc(-50% - 210px)) rotate(3deg) scale(1.06);
}

.hero__photo--bottom-left {
  width: 240px;
  height: 185px;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% - 480px), calc(-50% + 190px)) rotate(6deg);
}

.hero__photo--bottom-left:hover {
  transform: translate(calc(-50% - 480px), calc(-50% + 190px)) rotate(2deg) scale(1.06);
}

.hero__photo--bottom-right {
  width: 250px;
  height: 180px;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + 480px), calc(-50% + 190px)) rotate(-5deg);
}

.hero__photo--bottom-right:hover {
  transform: translate(calc(-50% + 480px), calc(-50% + 190px)) rotate(-1deg) scale(1.06);
}

/* Medium desktops: slightly smaller photos and closer to center */
@media (max-width: 1400px) {
  .hero__photo--left {
    width: 190px;
    height: 155px;
    transform: translate(calc(-50% - 380px), calc(-50% - 170px)) rotate(-8deg);
  }

  .hero__photo--left:hover {
    transform: translate(calc(-50% - 380px), calc(-50% - 170px)) rotate(-3deg) scale(1.06);
  }

  .hero__photo--right {
    width: 190px;
    height: 155px;
    transform: translate(calc(-50% + 380px), calc(-50% - 170px)) rotate(7deg);
  }

  .hero__photo--right:hover {
    transform: translate(calc(-50% + 380px), calc(-50% - 170px)) rotate(3deg) scale(1.06);
  }

  .hero__photo--bottom-left {
    width: 200px;
    height: 155px;
    transform: translate(calc(-50% - 380px), calc(-50% + 150px)) rotate(6deg);
  }

  .hero__photo--bottom-left:hover {
    transform: translate(calc(-50% - 380px), calc(-50% + 150px)) rotate(2deg) scale(1.06);
  }

  .hero__photo--bottom-right {
    width: 200px;
    height: 155px;
    transform: translate(calc(-50% + 380px), calc(-50% + 150px)) rotate(-5deg);
  }

  .hero__photo--bottom-right:hover {
    transform: translate(calc(-50% + 380px), calc(-50% + 150px)) rotate(-1deg) scale(1.06);
  }
}

.hero__cta {
  margin-top: var(--space-lg);
}

/* Floating food elements */
.floating-element {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}

.floating-element--left {
  left: -150px;
  top: 25vh;
}

.floating-element--right {
  right: -30px;
  top: 22vh;
}

.floating-element img {
  width: 220px;
  height: auto;
  filter: drop-shadow(0 8px 25px rgba(0, 0, 0, 0.3));
}

.floating-element--left img {
  width: 380px;
  animation: float-left 6s ease-in-out infinite;
}

.floating-element--right img {
  width: 154px;
  animation: float-right 7s ease-in-out infinite;
}

@keyframes float-left {

  0%,
  100% {
    transform: translateY(0) rotate(-5deg);
  }

  50% {
    transform: translateY(-25px) rotate(5deg);
  }
}

@keyframes float-right {

  0%,
  100% {
    transform: translateY(0) rotate(5deg);
  }

  50% {
    transform: translateY(25px) rotate(-5deg);
  }
}

/* ===========================================
   3. INTRO SECTION
   =========================================== */
.intro {
  position: relative;
  z-index: 20;
  padding: var(--space-3xl) 0;
  background: var(--white);
}

/* Diamond pattern behind the intro */
.intro::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI4MCIgdmlld0JveD0iMCAwIDUwIDgwIj48cGF0aCBkPSJNMjUsMCBMNTAsNDAgTDI1LDgwIEwwLDQwIFoiIGZpbGw9IiMxYTRiOGMiLz48L3N2Zz4=");
  background-size: 40px 58px;
  pointer-events: none;
}

.intro__text {
  max-width: 850px;
  margin: 0 auto var(--space-xl);
  text-align: center;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: var(--blue-dark);
  font-weight: 600;
  line-height: 1.8;
}

.intro__text p:not(:last-child) {
  margin-bottom: var(--space-md);
}

.intro__info-cards {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.intro__card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #e8f0fe, #f0f4ff);
  padding: 18px 30px;
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--blue-primary);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(26, 75, 140, 0.1);
}

.intro__card svg {
  color: var(--gold-primary);
  flex-shrink: 0;
}

.intro__artists {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.intro__artists h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text-dark);
  margin-bottom: var(--space-sm);
}

.intro__artists p {
  font-size: 1.15rem;
  color: var(--blue-primary);
  font-weight: 600;
}

.intro__cta {
  text-align: center;
}



/* ===========================================
   5. ARTIESTEN SECTION
   =========================================== */
.artiesten {
  position: relative;
  z-index: 20;
  padding: var(--space-3xl) 0;
  background: var(--blue-primary);
  color: var(--white);
  border-top: 6px solid var(--gold-bright);
  border-bottom: 6px solid var(--gold-bright);
  overflow: hidden;
}

/* Wood texture overlay (shifted from concept) */
.artiesten::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/wood-texture.png');
  background-image: image-set(url('../assets/images/wood-texture.webp') type('image/webp'),
      url('../assets/images/wood-texture.png') type('image/png'));
  background-size: cover;
  opacity: 0.08;
  pointer-events: none;
}

/* Artist grid */
.artiesten__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  max-width: 1200px;
  margin: 0 auto var(--space-xl);
}

/* Artist card */
.artiest-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 3px solid rgba(26, 75, 140, 0.08);
  transition: all 0.4s var(--ease-out);
  position: relative;
}

.artiest-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--blue-primary), var(--gold-bright), var(--blue-primary));
  z-index: 2;
}

.artiest-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(26, 75, 140, 0.2), 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--gold-primary);
}

/* Image wrapper with overlay */
.artiest-card__image-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8f0fe, #dce6f5);
}

.artiest-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--ease-out), filter 0.4s;
}

.artiest-card:hover .artiest-card__image {
  transform: scale(1.08);
}

.artiest-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  background: linear-gradient(135deg, var(--blue-primary), var(--blue-dark));
  color: var(--gold-bright);
}

/* Gradient overlay on image */
.artiest-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px 20px 16px;
  background: linear-gradient(to top, rgba(10, 30, 60, 0.85), transparent);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

/* Area tags */
.artiest-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.artiest-card__tag--tent {
  background: rgba(218, 165, 32, 0.3);
  color: var(--gold-bright);
}

.artiest-card__tag--festzelt {
  background: rgba(26, 75, 140, 0.3);
  color: #8bb8ff;
}

.artiest-card__tag--apres {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
}

/* Card info section */
.artiest-card__info {
  padding: var(--space-lg);
}

.artiest-card__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--blue-dark);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.artiest-card__genre {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold-primary);
  margin-bottom: var(--space-sm);
}

.artiest-card__desc {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.7;
}

/* "More artists" section */
.artiesten__more {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  border: 3px dashed var(--gold-primary);
  backdrop-filter: blur(5px);
}

.artiesten__more p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--gold-bright);
  margin-bottom: var(--space-sm);
}

.artiesten__follow {
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: var(--font-body) !important;
}

/* ===========================================
   6. AREAS SECTION
   =========================================== */
.areas {
  position: relative;
  z-index: 20;
  padding: var(--space-3xl) 0;
  background: var(--white);
  overflow: hidden;
}

/* Diamond pattern overlay (shifted from artiesten) */
.areas::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI4MCIgdmlld0JveD0iMCAwIDUwIDgwIj48cGF0aCBkPSJNMjUsMCBMNTAsNDAgTDI1LDgwIEwwLDQwIFoiIGZpbGw9IiMxYTRiOGMiLz48L3N2Zz4=");
  background-size: 40px 58px;
  pointer-events: none;
}

.areas__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.area-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-md);
  border: 3px solid rgba(26, 75, 140, 0.08);
  transition: all 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.area-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--blue-primary), var(--gold-bright), var(--blue-primary));
}

.area-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-xl);
}

.area-card__icon {
  font-size: 3.5rem;
  margin-bottom: var(--space-md);
}

.area-card__icon svg {
  color: var(--gold-primary);
  width: 56px;
  height: 56px;
}

.area-card h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--blue-primary);
  margin-bottom: var(--space-md);
  text-transform: uppercase;
}

.area-card p {
  color: var(--text-body);
  font-size: 1rem;
  line-height: 1.7;
}

/* ===========================================
   7. FOOD & DRINKS SECTION
   =========================================== */
.food-drinks {
  position: relative;
  z-index: 20;
  padding: var(--space-3xl) 0;
  background: var(--cream);
  overflow: hidden;
}

/* Wood texture overlay (shifted from areas) */
.food-drinks::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/wood-texture.png');
  background-image: image-set(url('../assets/images/wood-texture.webp') type('image/webp'),
      url('../assets/images/wood-texture.png') type('image/png'));
  background-size: cover;
  opacity: 0.06;
  pointer-events: none;
}

.food-drinks__card {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-xl);
  box-shadow: var(--shadow-xl);
  border: 6px solid var(--blue-primary);
}

.food-drinks__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.food-drinks__header .section-title {
  margin-bottom: var(--space-md);
}

.food-drinks__header p {
  font-size: 1.15rem;
  color: var(--text-body);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

.food-drinks__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.food-info-card {
  background: linear-gradient(135deg, #e8f0fe, #f0f4ff);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(26, 75, 140, 0.1);
}

.food-info-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--blue-primary);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: 10px;
}

.food-info-card h3 svg {
  color: var(--gold-primary);
}

.food-info-card p {
  color: var(--text-body);
  line-height: 1.7;
}

/* ===========================================
   8. PRACTICAL INFO (Location, Transport, Facilities)
   =========================================== */
.practical {
  position: relative;
  z-index: 20;
  padding: var(--space-3xl) 0;
  background: var(--blue-dark);
  color: var(--white);
  overflow: hidden;
}

/* Diamond pattern overlay (shifted from food & drinks) */
.practical::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI4MCIgdmlld0JveD0iMCAwIDUwIDgwIj48cGF0aCBkPSJNMjUsMCBMNTAsNDAgTDI1LDgwIEwwLDQwIFoiIGZpbGw9IiNmZmZmZmYiLz48L3N2Zz4=");
  background-size: 30px 48px;
  pointer-events: none;
}

.practical__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.practical-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  backdrop-filter: blur(5px);
  transition: all 0.3s var(--ease-out);
}

.practical-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-4px);
}

.practical-card__icon {
  margin-bottom: var(--space-md);
}

.practical-card__icon svg {
  width: 44px;
  height: 44px;
  color: var(--gold-bright);
}

.practical-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: var(--space-md);
}

.practical-card ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.practical-card li {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  padding-left: 0;
}

.practical-card li strong {
  color: var(--white);
}

.practical-card li a,
.faq-item__answer a {
  color: var(--gold-bright);
  font-weight: 600;
}

/* ===========================================
   9. FAQ SECTION
   =========================================== */
.faq {
  position: relative;
  z-index: 20;
  padding: var(--space-3xl) 0;
  background: var(--blue-primary);
  color: var(--white);
}

.faq__list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.faq-item {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid rgba(26, 75, 140, 0.08);
  transition: box-shadow 0.3s;
}

.faq-item:hover {
  box-shadow: var(--shadow-md);
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--blue-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.3s;
}

.faq-item__question:hover {
  background: rgba(26, 75, 140, 0.03);
}

.faq-item__toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-primary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--blue-dark);
  transition: transform 0.3s var(--ease-spring);
}

.faq-item.open .faq-item__toggle {
  transform: rotate(45deg);
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out), padding 0.4s var(--ease-out);
  padding: 0 24px;
}

.faq-item.open .faq-item__answer {
  max-height: 300px;
  padding: 0 24px 20px;
}

.faq-item__answer p {
  color: var(--text-body);
  line-height: 1.7;
}

/* ===========================================
   10. TICKETS SECTION
   =========================================== */
.tickets {
  position: relative;
  z-index: 20;
  padding: var(--space-3xl) 0;
  background: var(--cream);
  overflow: hidden;
}

.tickets__card {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 48px;
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  box-shadow: var(--shadow-xl);
  border: 6px solid var(--gold-bright);
}

.tickets__icon {
  margin-bottom: var(--space-lg);
}

.tickets__icon svg {
  width: 72px;
  height: 72px;
  color: var(--blue-primary);
}

.tickets__card .section-title {
  margin-bottom: var(--space-md);
}

.tickets__card p {
  font-size: 1.15rem;
  color: var(--text-body);
  margin-bottom: var(--space-lg);
  line-height: 1.7;
}

.tickets__card .btn {
  font-size: 1.4rem;
  padding: 20px 48px;
}

.tickets__disclaimer {
  font-size: 0.85rem !important;
  color: var(--text-muted) !important;
  margin-top: var(--space-lg) !important;
  margin-bottom: 0 !important;
}

/* ===========================================
   11. NEWS SECTION
   =========================================== */
.news {
  position: relative;
  z-index: 20;
  padding: var(--space-3xl) 0;
  background: var(--cream-dark);
  overflow: hidden;
}

.news-card {
  max-width: 820px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
  border-left: 8px solid var(--gold-bright);
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.news-card__tag {
  display: inline-block;
  background: var(--blue-primary);
  color: var(--white);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: 50px;
}

.news-card__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  color: var(--blue-primary);
  line-height: 1.2;
  margin-bottom: var(--space-lg);
}

.news-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--blue-dark);
  margin: var(--space-lg) 0 var(--space-sm);
}

.news-card p {
  color: var(--text-body);
  line-height: 1.75;
  margin-bottom: var(--space-md);
}

.news-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.news-card__list li {
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: var(--text-body);
  line-height: 1.6;
}

.news-card__list li strong {
  color: var(--blue-dark);
}

.news-card .btn {
  margin-top: var(--space-sm);
}

@media (max-width: 600px) {
  .news-card {
    padding: var(--space-lg) var(--space-md);
    border-radius: var(--radius-lg);
  }
}

/* ===========================================
   12. NEWSLETTER SECTION
   =========================================== */
.newsletter {
  position: relative;
  z-index: 20;
  padding: var(--space-3xl) 0;
  background: var(--blue-dark);
  color: var(--white);
  overflow: hidden;
}

/* Diamond pattern overlay (shifted from tickets) */
.newsletter::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI4MCIgdmlld0JveD0iMCAwIDUwIDgwIj48cGF0aCBkPSJNMjUsMCBMNTAsNDAgTDI1LDgwIEwwLDQwIFoiIGZpbGw9IiNmZmZmZmYiLz48L3N2Zz4=");
  background-size: 30px 48px;
  pointer-events: none;
}

.newsletter__content {
  max-width: 650px;
  margin: 0 auto;
  text-align: center;
}

.newsletter__icon {
  margin-bottom: var(--space-md);
}

.newsletter__icon svg {
  width: 52px;
  height: 52px;
  color: var(--gold-bright);
}

.newsletter__content .section-title--light {
  margin-bottom: var(--space-md);
}

.newsletter__content p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--space-xl);
}

.newsletter__form {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

.newsletter__input {
  flex: 1;
  min-width: 260px;
  padding: 16px 24px;
  border-radius: 50px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  backdrop-filter: blur(5px);
  transition: all 0.3s;
}

.newsletter__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.newsletter__input:focus {
  border-color: var(--gold-bright);
  background: rgba(255, 255, 255, 0.15);
}

.newsletter__submit {
  padding: 16px 32px;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-primary));
  color: var(--blue-dark);
  font-weight: 800;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s;
}

.newsletter__submit:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px var(--gold-glow);
}

/* ===========================================
   12. PARTNERS SECTION
   =========================================== */
.partners {
  position: relative;
  z-index: 20;
  padding: var(--space-2xl) 0;
  background: var(--white);
}

.partners__label {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-light);
  margin-bottom: var(--space-xl);
}

.partners__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3xl);
  flex-wrap: wrap;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: all 0.6s var(--ease-out);
}

.partners__logos:hover {
  filter: grayscale(0%);
  opacity: 1;
}

.partner-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  transition: transform 0.3s;
}

.partner-logo:hover {
  transform: scale(1.1);
}

.partner-logo--heineken {
  color: #00a650;
}

.partner-logo--flugel {
  color: #e91e8c;
  font-style: italic;
}

.partner-logo--coca-cola {
  color: #ed1c16;
}

/* ===========================================
   13. FOOTER
   =========================================== */
.footer {
  position: relative;
  z-index: 20;
  background: #0a0f1a;
  color: rgba(255, 255, 255, 0.6);
  padding: var(--space-2xl) 0 var(--space-lg);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--space-xl);
}

.footer__brand .navbar__logo {
  font-size: 1.8rem;
  margin-bottom: var(--space-md);
}

.footer__brand p {
  max-width: 350px;
  line-height: 1.7;
}

.footer__links h4 {
  color: var(--white);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}

.footer__links ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer__links a {
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s;
  font-size: 0.95rem;
}

.footer__links a:hover {
  color: var(--gold-bright);
}

.footer__action h4 {
  color: var(--white);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}

.footer__contact-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s var(--ease-out);
}

.footer__contact-link:hover {
  color: var(--gold-bright);
}

.footer__socials {
  display: flex;
  gap: 14px;
}

.footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.75);
  transition: all 0.3s var(--ease-out);
}

.footer__socials a:hover {
  color: var(--blue-dark);
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  transform: translateY(-2px);
}

/* ---------- Cookie Consent Banner ---------- */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 120%);
  width: min(680px, calc(100vw - 32px));
  margin-bottom: 16px;
  background: var(--blue-deeper);
  color: var(--white);
  border: 1px solid rgba(245, 197, 24, 0.35);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  z-index: 10010;
  transition: transform 0.45s var(--ease-out);
}

.cookie-banner--visible {
  transform: translate(-50%, 0);
}

.cookie-banner__text {
  flex: 1 1 300px;
}

.cookie-banner__text p {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.cookie-banner__text a {
  color: var(--gold-bright);
}

.cookie-banner__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cookie-banner__btn {
  cursor: pointer;
  font-size: 0.9rem;
  padding: 10px 22px;
}

/* Accepteren en weigeren krijgen exact dezelfde afmetingen; anders is de
   ene knop optisch alsnog dominant ook al is de kleur gelijkwaardig. */
#cookieAcceptAll,
#cookieRejectAll {
  min-width: 210px;
  justify-content: center;
}

/* Weigeren moet even prominent zijn als accepteren — de Autoriteit
   Persoonsgegevens eist dat de makkelijkste weg niet de toestemmende is.
   Daarom dezelfde vorm, maat en visuele zwaarte als .btn--gold, alleen een
   andere kleur: massief licht op de donkerblauwe banner, met dezelfde
   schaduwdiepte. Was: transparant met een dun randje, wat het weigeren
   optisch tot tweede keus maakte. */
.btn--licht {
  background: var(--white);
  color: var(--blue-dark);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.2);
}

.btn--licht:hover {
  transform: translateY(3px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Cookiebanner — categoriekeuze */
/* Let op: het HTML-attribuut [hidden] verliest het van de display-waarden
   hieronder, dus dat moet expliciet. Zonder deze twee regels staat de
   categoriekeuze meteen open in plaats van achter "Zelf instellen". */
.cookie-banner__options[hidden],
.cookie-banner__btn[hidden] {
  display: none;
}

.cookie-banner__options {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  gap: 10px;
}

.cookie-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}

.cookie-option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--gold-bright);
  cursor: pointer;
}

.cookie-option input[type="checkbox"]:disabled {
  cursor: default;
  opacity: 0.65;
}

.cookie-option strong {
  color: var(--white);
}

.cookie-banner__btn--link {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
  padding: 10px 4px;
}

.cookie-banner__btn--link:hover {
  color: var(--white);
}

/* Op smalle schermen de knoppen onder elkaar, volle breedte */
@media (max-width: 560px) {
  .cookie-banner__actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .cookie-banner__actions .cookie-banner__btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ---------- Legal / Privacy pagina ---------- */
.legal-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 140px 24px 80px;
}

.legal-page h1 {
  font-family: var(--font-display);
  color: var(--blue-dark);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 8px;
}

.legal-page h2 {
  font-family: var(--font-display);
  color: var(--blue-dark);
  font-size: 1.3rem;
  margin: 32px 0 8px;
}

.legal-page p,
.legal-page li {
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 10px;
}

.legal-page ul {
  padding-left: 22px;
  margin-bottom: 12px;
}

.legal-page a {
  color: var(--blue-primary);
}

.legal-page .legal-page__updated {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 24px;
}


.footer__bottom {
  text-align: center;
  font-size: 0.85rem;
}

.footer__bottom p {
  margin-bottom: var(--space-xs);
}

/* ===========================================
   14. LIVING EVENTS BADGE
   =========================================== */
.living-events {
  text-align: center;
  margin-top: var(--space-md);
  font-weight: 600;
  font-size: 0.9rem;
}

.living-events span {
  color: var(--white);
  font-weight: 700;
}

/* ===========================================
   RESPONSIVE
   =========================================== */

/* ---- Large Desktop → Medium Desktop ---- */
@media (max-width: 1200px) {
  .artiesten__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Tablet & below (≤1024px) ---- */
@media (max-width: 1024px) {
  .navbar__info {
    display: none;
  }

  .navbar__logo-img {
    height: 100px;
  }

  .navbar.scrolled .navbar__logo-img {
    height: 70px;
  }

  .hero__photo {
    display: none;
  }

  .hero__logo {
    max-width: 600px;
  }

  .artiesten__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin: 0 auto var(--space-xl);
  }

  .areas__grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }

  .food-drinks__card {
    padding: var(--space-xl) var(--space-lg);
  }

  .food-drinks__grid {
    grid-template-columns: 1fr;
  }

  .practical__grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer__brand p {
    margin: 0 auto;
  }

  .floating-element--left {
    left: -180px;
  }

  .floating-element--right {
    right: -50px;
  }

  .floating-element--left img {
    width: 300px;
  }

  .floating-element--right img {
    width: 120px;
  }
}

/* ---- Navbar breakpoint (≤900px) ---- */
@media (max-width: 900px) {
  .navbar__menu {
    display: none;
  }

  .navbar__hamburger {
    display: flex;
  }
}

/* ---- Mobile (≤768px) ---- */
@media (max-width: 768px) {

  .navbar__inner {
    height: 64px;
  }

  .navbar.scrolled .navbar__inner {
    height: 56px;
  }

  .navbar__logo-img {
    height: 80px;
  }

  .navbar.scrolled .navbar__logo-img {
    height: 60px;
  }

  /* Hero */
  .hero {
    min-height: 80vh;
    padding-top: 64px;
  }

  .hero__logo {
    max-width: 320px;
    width: 85vw;
  }

  .hero__tagline {
    font-size: clamp(1rem, 4vw, 1.5rem);
    margin-bottom: var(--space-lg);
  }

  .hero__info-bar {
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
  }

  .hero__info-item {
    font-size: 0.95rem;
    padding: 10px 18px;
  }

  .hero__cta .btn {
    font-size: 1rem;
    padding: 14px 28px;
  }

  /* Floating elements hidden on mobile */
  .floating-element {
    display: none;
  }

  /* Section titles */
  .section-title {
    font-size: clamp(1.6rem, 7vw, 2.5rem);
    margin-bottom: var(--space-lg);
  }

  .section-subtitle {
    font-size: 1rem;
    margin-bottom: var(--space-lg);
  }

  /* Intro */
  .intro {
    padding: var(--space-2xl) 0;
  }

  .intro__text {
    font-size: clamp(0.95rem, 3.5vw, 1.15rem);
  }

  .intro__info-cards {
    flex-direction: column;
    align-items: center;
  }

  .intro__card {
    width: 100%;
    max-width: 350px;
    justify-content: center;
  }

  /* Artiesten */
  .artiesten {
    padding: var(--space-2xl) 0;
  }

  .artiesten__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    max-width: 100%;
  }

  .artiest-card__image-wrapper {
    height: 220px;
  }

  .artiest-card__name {
    font-size: 1.1rem;
  }

  .artiest-card__genre {
    font-size: 0.8rem;
  }

  .artiest-card__info {
    padding: var(--space-md);
  }

  .artiest-card__tag {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .artiest-card {
    border-radius: var(--radius-lg);
  }

  /* Areas */
  .areas {
    padding: var(--space-2xl) 0;
  }

  .area-card {
    padding: var(--space-lg) var(--space-md);
  }

  .area-card h3 {
    font-size: 1.3rem;
  }

  /* Food & Drinks */
  .food-drinks {
    padding: var(--space-2xl) 0;
  }

  .food-drinks__card {
    padding: var(--space-lg) var(--space-md);
    border-width: 4px;
    border-radius: var(--radius-lg);
  }

  .food-info-card {
    padding: var(--space-md);
  }

  .food-info-card h3 {
    font-size: 1.1rem;
  }

  /* Practical */
  .practical {
    padding: var(--space-2xl) 0;
  }

  .practical-card {
    padding: var(--space-lg);
  }

  .practical-card h3 {
    font-size: 1.2rem;
  }

  /* FAQ */
  .faq {
    padding: var(--space-2xl) 0;
  }

  .faq-item__question {
    padding: 16px 18px;
    font-size: 0.95rem;
    gap: 12px;
  }

  .faq-item.open .faq-item__answer {
    padding: 0 18px 16px;
  }

  .faq-item__answer {
    padding: 0 18px;
  }

  /* Tickets */
  .tickets {
    padding: var(--space-2xl) 0;
  }

  .tickets__card {
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-xl);
    border-width: 4px;
  }

  .tickets__card .btn {
    font-size: 1.1rem;
    padding: 16px 32px;
    width: 100%;
    justify-content: center;
  }

  .tickets__icon svg {
    width: 56px;
    height: 56px;
  }

  /* Newsletter */
  .newsletter {
    padding: var(--space-2xl) 0;
  }

  .newsletter__form {
    flex-direction: column;
    align-items: stretch;
  }

  .newsletter__input {
    min-width: auto;
    text-align: center;
  }

  .newsletter__submit {
    width: 100%;
  }

  /* Buttons */
  .btn {
    font-size: 1rem;
    padding: 14px 28px;
  }

  /* Footer */
  .footer {
    padding: var(--space-xl) 0 var(--space-md);
  }

  .footer__grid {
    gap: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .footer__brand .navbar__logo {
    font-size: 1.5rem;
  }

  .footer__action .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---- Small Mobile (≤480px) ---- */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-md);
  }

  .hero__logo {
    max-width: 260px;
  }

  .hero__info-item {
    font-size: 0.85rem;
    padding: 8px 14px;
  }

  .hero__tagline {
    font-size: 1rem;
  }

  .intro__card {
    font-size: 0.95rem;
    padding: 14px 20px;
  }

  .artiesten__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .artiest-card__image-wrapper {
    height: 180px;
  }

  .artiest-card__name {
    font-size: 0.95rem;
  }

  .artiest-card__genre {
    font-size: 0.75rem;
  }

  .artiest-card__info {
    padding: var(--space-sm) var(--space-md);
  }

  .artiest-card__tag {
    font-size: 0.65rem;
    padding: 3px 8px;
  }

  .artiest-card__overlay {
    padding: 40px 12px 10px;
  }

  .area-card__icon {
    font-size: 2.5rem;
  }

  .area-card h3 {
    font-size: 1.15rem;
  }

  .area-card p {
    font-size: 0.9rem;
  }

  .food-info-card h3 {
    font-size: 1rem;
    flex-wrap: wrap;
  }

  .food-info-card p {
    font-size: 0.9rem;
  }

  .practical-card h3 {
    font-size: 1.1rem;
  }

  .practical-card li {
    font-size: 0.9rem;
  }

  .practical-card__icon svg {
    width: 36px;
    height: 36px;
  }

  .faq-item__question {
    padding: 14px 16px;
    font-size: 0.9rem;
  }

  .faq-item__toggle {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }

  .tickets__card p {
    font-size: 1rem;
  }

  .tickets__card .btn {
    font-size: 1rem;
    padding: 14px 24px;
  }

  .newsletter__content p {
    font-size: 1rem;
  }

  .newsletter__input {
    padding: 14px 20px;
    font-size: 0.95rem;
  }

  .newsletter__submit {
    padding: 14px 24px;
    font-size: 0.95rem;
  }

  .footer__brand .navbar__logo {
    font-size: 1.3rem;
  }

  .footer__links a {
    font-size: 0.9rem;
  }

  .section-title {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }

}

/* ===========================================
   PROMO DISCOUNT POPUP
   =========================================== */
.promo-popup {
  position: fixed;
  bottom: 125px;
  right: 150px;
  transform: scale(0.3) rotate(-12deg);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.promo-popup--visible {
  opacity: 1;
  transform: scale(1) rotate(3deg);
  pointer-events: auto;
  animation: popup-attention 0.7s 0.5s ease-in-out;
}

.promo-popup--hidden {
  opacity: 0 !important;
  transform: scale(0.3) rotate(12deg) !important;
  pointer-events: none !important;
}

@keyframes popup-attention {

  0%, 100% { transform: scale(1) rotate(3deg); }
  15% { transform: scale(1.08) rotate(5deg); }
  30% { transform: scale(1.1) rotate(1deg); }
  50% { transform: scale(1.06) rotate(4deg); }
  70% { transform: scale(1.03) rotate(2deg); }
  85% { transform: scale(1.01) rotate(3deg); }
}

.promo-popup__link {
  display: block;
  position: relative;
  width: 220px;
  padding: 28px 24px 22px;
  background: linear-gradient(145deg, #e81c1c, #b51414, #8b0000);
  border-radius: 20px;
  text-align: center;
  cursor: pointer;
  box-shadow:
    0 8px 32px rgba(200, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  animation: popup-glow 2s ease-in-out infinite;
}

.promo-popup__link:hover {
  transform: scale(1.06);
  box-shadow:
    0 12px 44px rgba(200, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

@keyframes popup-glow {

  0%,
  100% {
    box-shadow:
      0 8px 32px rgba(200, 0, 0, 0.45),
      0 2px 8px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  50% {
    box-shadow:
      0 8px 32px rgba(200, 0, 0, 0.45),
      0 2px 8px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 0 30px rgba(255, 50, 50, 0.4),
      0 0 60px rgba(255, 50, 50, 0.15);
  }
}

/* Animated glow ring behind */
.promo-popup__glow {
  position: absolute;
  inset: -4px;
  border-radius: 24px;
  background: conic-gradient(from 0deg,
      #ff4444, #ff8800, #ffcc00, #ff4444);
  opacity: 0.6;
  z-index: -1;
  animation: rotate-glow 3s linear infinite;
  filter: blur(6px);
}

@keyframes rotate-glow {
  to {
    transform: rotate(360deg);
  }
}

/* Close button */
.promo-popup__close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: #fff;
  font-size: 1.3rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s, transform 0.2s;
  z-index: 10;
}

.promo-popup__close:hover {
  background: rgba(0, 0, 0, 0.6);
  transform: scale(1.15);
}

/* Badge */
.promo-popup__badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* Big euro amount */
.promo-popup__amount {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3.2rem;
  color: #fff;
  line-height: 1;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  margin-bottom: 2px;
}

/* KORTING! label */
.promo-popup__label {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 1.3rem;
  color: #ffdd57;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  margin-bottom: 10px;
}

/* Sub text */
.promo-popup__sub {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 14px;
  line-height: 1.4;
}

.promo-popup__sub strong {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* CTA button */
.promo-popup__cta {
  display: inline-block;
  background: #fff;
  color: #b51414;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.8rem;
  padding: 8px 18px;
  border-radius: 50px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.2s;
}

.promo-popup__link:hover .promo-popup__cta {
  background: #ffdd57;
  color: #8b0000;
  transform: scale(1.05);
}

/* Mobile responsive */
@media (max-width: 600px) {
  .promo-popup__link {
    width: 190px;
    padding: 24px 18px 18px;
    border-radius: 16px;
  }

  .promo-popup__amount {
    font-size: 2.6rem;
  }

  .promo-popup__label {
    font-size: 1.1rem;
  }

  .promo-popup__sub {
    font-size: 0.75rem;
  }

  .promo-popup__cta {
    font-size: 0.72rem;
    padding: 7px 14px;
  }
}
/* ===========================================
   VIDEO-STICKERS — reels als opgeplakte polaroids
   ===========================================
   De reels uit Instagram zijn 9:16 en hebben ingebrande tekst. Op
   stickerformaat is die tekst onleesbaar; dat is de bedoeling. Het
   stickertje levert sfeer, de klik levert de inhoud.

   Positionering: absoluut binnen de sectie (die staat al op
   position:relative). Bewust NIET buiten de sectie laten steken, want
   .food-drinks en .practical hebben overflow:hidden. Onder 1100px
   valt de sticker terug in de normale stroom, onderaan zijn sectie. */

.videosticker {
  position: absolute;
  z-index: 24;
  width: 178px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.4s var(--ease-out);
}

/* Het witte polaroid-randje, gelijk aan .hero__photo */
.videosticker__lijst {
  display: block;
  position: relative;
  background: var(--white);
  padding: 8px 8px 30px;
  border-radius: 2px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
}

.videosticker__video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 1px;
  background: var(--blue-deeper);
}

/* Handgeschreven bijschrift op de witte onderrand van de polaroid */
.videosticker__bijschrift {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--blue-dark);
  text-align: center;
  letter-spacing: 0.01em;
}

/* Afspeelknopje, alleen een hint — de hele sticker is klikbaar */
.videosticker__knop {
  position: absolute;
  left: 50%;
  top: calc(50% - 11px);
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%) scale(1);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(13, 43, 82, 0.55);
  backdrop-filter: blur(4px);
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: var(--white);
  opacity: 0.9;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.videosticker:hover .videosticker__knop,
.videosticker:focus-visible .videosticker__knop {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.12);
}

.videosticker:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 6px;
  border-radius: 4px;
}

/* --- De vijf plekken, zoals Clay ze zelf heeft neergelegd met de
       bewerkmodus (?stickers=bewerken). Niet zelf verschuiven: deze
       waarden komen rechtstreeks uit zijn indeling.

       `left` is berekend als 50% + (afstand van het midden tot het hart
       van de sticker) - (halve breedte), zodat hij bij elke schermbreedte
       op dezelfde plek ten opzichte van het midden blijft.

       `top` telt vanaf de bovenkant van de sectie. De sticker hangt daarom
       rechtstreeks in de <section> en niet in .container: die draagt de
       klasse reveal en dus altijd een transform, en een getransformeerd
       element wordt zelf het ankerpunt voor alles wat erin absoluut staat.

       Bij hover draait elke sticker drie graden terug richting recht. --- */

/* De hero is de enige sectie die meerekt met de vensterhoogte: min-height
   is 100vh, en bij een hoog venster wordt hij hoger dan zijn eigen inhoud.
   Die inhoud staat gecentreerd, dus logo, tagline en infobalk zakken dan
   mee omlaag. Een sticker die aan de bovenkant hangt doet dat niet, en
   schuift bij elke andere vensterhoogte over iets anders heen.

   Daarom hangt hij hier aan het hart van de hero, precies zoals de
   bestaande .hero__photo's al doen. Zo blijft de afstand tot het logo en
   de infobalk altijd gelijk, bij welke schermhoogte dan ook — nagemeten
   van 1189 tot 2200px hoog: steeds dezelfde tussenruimte.

   De 193px houdt hem twintig pixels boven de infobalk, die op 399px onder
   het hart begint. Die marge is er bewust: webfonts laden later dan de
   opmaak en verschuiven zo'n balk soms een paar pixels. */
.videosticker--hero {
  width: 193px;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + 264px), calc(-50% + 193px)) rotate(6.6deg);
}

.videosticker--hero:hover,
.videosticker--hero:focus-visible {
  transform: translate(calc(-50% + 264px), calc(-50% + 193px)) rotate(3.6deg) scale(1.05);
}

.videosticker--intro {
  width: 229px;
  top: 368px;
  left: calc(50% + 448px);
  transform: rotate(9.2deg);
}

.videosticker--intro:hover,
.videosticker--intro:focus-visible {
  transform: rotate(6.2deg) scale(1.05);
}

.videosticker--artiesten {
  width: 159px;
  top: 864px;
  left: calc(50% + 167px);
  transform: rotate(7.2deg);
}

.videosticker--artiesten:hover,
.videosticker--artiesten:focus-visible {
  transform: rotate(4.2deg) scale(1.05);
}

.videosticker--areas {
  width: 178px;
  top: 24px;
  left: calc(50% - 521px);
  transform: rotate(-4deg);
}

.videosticker--areas:hover,
.videosticker--areas:focus-visible {
  transform: rotate(-1deg) scale(1.05);
}

.videosticker--eten {
  width: 222px;
  top: 39px;
  left: calc(50% + 322px);
  transform: rotate(6deg);
}

.videosticker--eten:hover,
.videosticker--eten:focus-visible {
  transform: rotate(3deg) scale(1.05);
}

/* Geen uitzondering voor lage vensters nodig, al lijkt dat wel zo bij een
   sectie van min-height:100vh met overflow:hidden. De hero is 1189px hoog
   door zijn eigen inhoud, ongeacht de vensterhoogte, en de sticker eindigt
   op 1060. Een eerdere poging om hem op korte schermen aan de onderrand te
   hangen duwde hem juist over de infobalk heen. */

/* De vrije kantlijn is (vensterbreedte - 1136) / 2. Onder ongeveer 1580px
   is die te smal om nog iets naast de inhoud te zetten, dus dan zakt de
   sticker terug in de stroom, onderaan zijn eigen sectie.

   De hero is de uitzondering: dat is een flex-container, en een sticker in
   de stroom zou daar naast de inhoud komen te staan en de hele hero uit
   elkaar trekken. Hij blijft daar dus absoluut staan, kleiner en in de hoek,
   en verdwijnt onder 1024px net als de bestaande hero-polaroids. */
@media (max-width: 1579px) {
  .videosticker {
    position: static;
    display: block;
    width: 168px;
    margin: var(--space-xl) auto 0;
  }

  .videosticker--intro,
  .videosticker--areas {
    transform: rotate(3deg);
  }

  .videosticker--artiesten,
  .videosticker--eten {
    transform: rotate(-3deg);
  }

  .videosticker--hero {
    position: absolute;
    width: 140px;
    margin: 0;
    top: auto;
    bottom: 28px;
    left: auto;
    right: 24px;
    transform: rotate(6.6deg);
  }
}

/* ===========================================
   HERO OP KLEINERE SCHERMEN
   ===========================================
   Onder 1024px verstopte de site alle hero-polaroids, en de videosticker
   deed hetzelfde. Daardoor bleef er op een telefoon alleen een logo op
   hout over. Hieronder komen ze terug, in twee smaken.

   De maatvoering komt uit een meting in tests/viewports.html bij 375, 390
   en 430px breed. Handig om te weten: logo, tagline, pillen en knop hebben
   op al die breedtes exact dezelfde afmetingen — alleen de hero wordt
   breder. Alles staat daarom vast ten opzichte van het hart van de hero,
   net als op de grote schermen.

   Waar mag een sticker overheen? De buitenste veertig pixels van het logo
   zijn versiering: pretzels, bierpullen, hop. De woorden staan in het
   midden. Alles hieronder blijft daarom buiten x = 90 vanaf het hart. */





/* --- Tablet: vier polaroids in de hoeken, video rechtsonder --- */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero__photo--left,
  .hero__photo--right,
  .hero__photo--bottom-left,
  .hero__photo--bottom-right {
    display: block;
    width: 150px;
    height: 120px;
  }

  .hero__photo--left {
    transform: translate(calc(-50% - 300px), calc(-50% - 150px)) rotate(-8deg);
  }

  .hero__photo--right {
    transform: translate(calc(-50% + 300px), calc(-50% - 150px)) rotate(7deg);
  }

  /* Op +140 raakten deze twee de bovenste rij infopillen; op +100 vallen ze
     naast de onderrand van het logo en blijft alle tekst vrij. */
  .hero__photo--bottom-left {
    transform: translate(calc(-50% - 300px), calc(-50% + 100px)) rotate(6deg);
  }

  .hero__photo--bottom-right {
    transform: translate(calc(-50% + 300px), calc(-50% + 100px)) rotate(-5deg);
  }
}

/* --- Telefoon: polaroids om het logo, video op een eigen plank ---
   De video is 9:16 en dus hoog. Naast het logo past hij niet: op 375px
   bedekt hij dan de T van OKTOBERFEST. Eronder ook niet, want daar staan
   de drie pillen en de ticketknop, en die mogen nooit weg. Vandaar onderaan
   een strook extra hout waar hij op ligt. Dat kost hoogte, maar de hele
   hero blijft met 788px nog binnen een telefoonscherm van 844.

   De polaroids overlappen wel de buitenrand van het logo. Dat is de boog
   met pretzels en pullen, niet de woorden. */
@media (max-width: 768px) {
  .hero {
    padding-bottom: 210px;
  }

  /* Eén logomaat voor de hele telefoonlaag. Tot nu toe sprong het logo op
     481px van 260 naar 320px breed, en dan is er naast het logo geen plek
     meer voor een polaroid zonder de woorden te raken. */
  .hero__logo {
    max-width: 260px;
  }

  /* Om dezelfde reden groeit ook de tagline hier niet mee. Met
     clamp(1rem, 4vw, 1.5rem) was "De Nijmeegse Wiesn!" bij 375px 141px breed
     en bij 600px 211px, en dan verschuift de hele hero eronder: de polaroids
     kwamen op de tekst en de video op de ticketknop. Vaste maat houdt de
     compositie van 375 tot 600px gelijk. */
  .hero__tagline {
    font-size: 1rem;
  }

  /* Zelfde verhaal: boven 480px werden de infopillen groter, waardoor de
     hero 13px hoger werd en de ticketknop onder de video schoof. */
  .hero__info-item {
    font-size: 0.85rem;
    padding: 8px 14px;
  }

  /* Deze vijf plekken heeft Clay zelf neergelegd met ?stickers=bewerken op
     375px breed. Niet zelf verschuiven.

     Ze hangen aan het hart van de hero, niet aan de bovenkant. De hero is de
     enige sectie die meerekt met de vensterhoogte (min-height:100vh, hier
     80vh), en zijn inhoud staat gecentreerd. Wie aan de bovenkant hangt
     schuift bij een andere schermhoogte over het logo of de infobalk heen.
     De inhoud zit door de asymmetrische padding altijd 73px boven het hart,
     hoe hoog de hero ook wordt — dus blijft deze verhouding overal gelijk. */
  .hero__photo--left,
  .hero__photo--right,
  .hero__photo--bottom-left,
  .hero__photo--bottom-right {
    display: block;
    width: 96px;
    height: 78px;
    padding: 5px;
  }

  .hero__photo--left {
    transform: translate(calc(-50% - 121px), calc(-50% - 283px)) rotate(-8deg);
  }

  .hero__photo--right {
    transform: translate(calc(-50% + 108px), calc(-50% - 292px)) rotate(7deg);
  }

  .hero__photo--bottom-left {
    transform: translate(calc(-50% - 112px), calc(-50% - 144px)) rotate(6deg);
  }

  .hero__photo--bottom-right {
    transform: translate(calc(-50% + 98px), calc(-50% - 138px)) rotate(-5deg);
  }

  /* Midden op de strook onderin. Ook deze aan het hart: dan blijft hij
     precies onder de ticketknop hangen in plaats van weg te zakken naar de
     onderrand zodra het scherm hoger wordt. */
  .videosticker--hero {
    display: block;
    position: absolute;
    width: 104px;
    margin: 0;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(calc(-50% - 1px), calc(-50% + 285px)) rotate(-5deg);
  }

  .videosticker--hero:hover,
  .videosticker--hero:focus-visible {
    transform: translate(calc(-50% - 1px), calc(-50% + 285px)) rotate(-2deg) scale(1.05);
  }

  /* Op een polaroid van 94px is een knop van 46px onbeschaafd groot. */
  .videosticker--hero .videosticker__knop {
    width: 32px;
    height: 32px;
  }

  .videosticker--hero .videosticker__lijst {
    padding: 5px 5px 20px;
  }

  .videosticker--hero .videosticker__bijschrift {
    font-size: 0.62rem;
    bottom: 4px;
  }
}

/* --- Tussenmaat (601-768px): het scherm is breed genoeg voor een logo van
   320px, en dan moeten de polaroids verder naar buiten om de woorden vrij
   te laten. Bij 601px is dat op 5px na precies passend; verder naar buiten
   kan niet zonder afgeknipt te worden. --- */
@media (min-width: 601px) and (max-width: 768px) {
  .hero__logo {
    max-width: 320px;
  }

  .hero__photo--left,
  .hero__photo--right,
  .hero__photo--bottom-left,
  .hero__photo--bottom-right {
    width: 110px;
    height: 89px;
  }

  .hero__photo--left {
    transform: translate(calc(-50% - 228px), calc(-50% - 232px)) rotate(-8deg);
  }

  .hero__photo--right {
    transform: translate(calc(-50% + 228px), calc(-50% - 232px)) rotate(7deg);
  }

  .hero__photo--bottom-left {
    transform: translate(calc(-50% - 228px), calc(-50% - 100px)) rotate(6deg);
  }

  .hero__photo--bottom-right {
    transform: translate(calc(-50% + 228px), calc(-50% - 100px)) rotate(-5deg);
  }

  /* Ook hier aan het hart; alleen `left: 30px` zetten botst met de
     translate uit de telefoonlaag en schoof hem de hero uit. */
  .videosticker--hero {
    width: 120px;
    transform: translate(calc(-50% - 1px), calc(-50% + 330px)) rotate(-5deg);
  }

  .videosticker--hero:hover,
  .videosticker--hero:focus-visible {
    transform: translate(calc(-50% - 1px), calc(-50% + 330px)) rotate(-2deg) scale(1.05);
  }
}


/* Wie beweging heeft uitgezet krijgt een stilstaand beeld met een
   duidelijke afspeelknop. Klikken werkt gewoon. */
@media (prefers-reduced-motion: reduce) {
  .videosticker,
  .videosticker:hover {
    transition: none;
  }
}

/* ===========================================
   VIDEOBOX — de vergrote video
   ===========================================
   Blijft op de site: geen nieuw tabblad, geen Instagram. Start stil,
   met een nadrukkelijke knop om het geluid aan te zetten, want de
   artiesten spreken je in deze clips rechtstreeks toe. */

.videobox[hidden] {
  display: none;
}

.videobox {
  position: fixed;
  inset: 0;
  /* Boven de kortingspopup (9999), zodat die niet door het gordijn
     heen steekt. De cookiebanner blijft er bewust bovenuit: een
     toestemmingsvraag mag nooit onbereikbaar raken. */
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: var(--space-lg);
}

.videobox__gordijn {
  position: absolute;
  inset: 0;
  background: rgba(9, 30, 58, 0.88);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}

.videobox__paneel {
  position: relative;
  width: min(380px, 92vw);
  max-height: 92vh;
  background: var(--white);
  padding: 10px 10px 12px;
  border-radius: 3px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: scale(0.88) rotate(-2deg);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.videobox.open .videobox__gordijn {
  opacity: 1;
}

.videobox.open .videobox__paneel {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.videobox__video {
  display: block;
  width: 100%;
  max-height: calc(92vh - 76px);
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: #000;
  border-radius: 2px;
}

.videobox__titel {
  margin: 8px 4px 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blue-dark);
  text-align: center;
}

.videobox__sluit {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--blue-dark);
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.videobox__sluit:hover {
  background: var(--gold-dark);
  transform: scale(1.08);
}

/* De geluidsknop ligt over de video en verdwijnt zodra het geluid aan
   staat. Daarna neemt de ingebouwde balk van de browser het over. */
.videobox__geluid {
  position: absolute;
  left: 50%;
  bottom: 68px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 0;
  border-radius: 50px;
  background: var(--gold-bright);
  color: var(--blue-dark);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.videobox__geluid:hover {
  background: var(--gold-primary);
  transform: translateX(-50%) scale(1.06);
}

.videobox__geluid[hidden] {
  display: none;
}

.videobox__sluit:focus-visible,
.videobox__geluid:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .videobox__paneel {
    width: 94vw;
  }

  .videobox__sluit {
    top: -10px;
    right: -6px;
  }
}