/* =========================================================
   CRAZY KROEGENTOCHT — 10 JAAR ANNIVERSARY EDITION
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600&family=Archivo+Black&family=Luckiest+Guy&display=swap');

:root{
  /* palette — pulled from the poster & confetti, not a template default */
  --ink:        #0b0704;
  --ink-2:      #150c08;
  --paper:      #f4ede1;
  --red:        #c31c1c;
  --red-deep:   #6e0f0f;
  --orange:     #ff6a1a;
  --amber:      #ffb400;
  --gold:       #f2c94c;

  --line: rgba(244,237,225,0.14);

  --font-display: 'Anton', 'Archivo Black', sans-serif;
  --font-body: 'Archivo', sans-serif;
  --font-accent: 'Luckiest Guy', cursive;

  --gap: clamp(1rem, 3vw, 2.5rem);
  --pad: clamp(1.25rem, 5vw, 4.5rem);

  --ease: cubic-bezier(.22,.9,.3,1);

  /* Eén vaste titelgrootte en boven-marge voor ALLE paginakoppen, zonder uitzondering. */
  --title-fs: clamp(1.7rem, 3.4vw, 2.6rem);
  --section-top: clamp(.85rem, 1.6vw, 1.1rem);

  /* Navbalk: EEN vaste, harde hoogte per breakpoint (geen door logo/padding/vw bepaalde
     hoogte meer, ook niet op desktop). Alles wat moet weten hoe hoog de navbalk is
     (hero-padding, scroll-margin) leest deze twee variabelen uit — zo kan er nooit meer
     een mismatch ontstaan tussen de echte navbalkhoogte en waar een sectie naartoe scrollt. */
  --header-h-mobile: 76px;
  --header-h-desktop: 92px;
  /* Het logo hangt bewust groter dan de dunne balk zelf onderuit (zie .nav__logo-img) —
     deze twee waarden zijn de echte onderkant van dat uitstekende logo (top-marge +
     max-height van het logo), en zijn wat content/scroll-marges moeten vermijden,
     niet de dunne balkhoogte hierboven. */
  --logo-clear-mobile: 164px;
  --logo-clear-desktop: 176px;

  /* Eén precieze, vaste titel-afstand: elke sectiekop (ALLE zes: cafés, dj's, programma,
     aftermovie, 10 jaar, radio) staat op EXACT dezelfde afstand tot de bovenkant van het
     scherm — calc(logo-clear + 4px) — ongeacht of je normaal scrolt of via een menulink
     naar de sectie springt (scroll-margin-top hieronder is daarom nu 0: de opvang zit
     volledig in deze ene, herbruikbare padding-top-waarde, niet meer verspreid over twee
     losse mechanismen die elkaar optelden). T.o.v. de dunne navbalk zelf (92px) is dit
     ~84px lucht eronder — binnen de gevraagde 70-90px marge. */
  --title-clear-desktop: calc(var(--logo-clear-desktop) + 4px);
  --title-clear-mobile: calc(var(--logo-clear-mobile) + 12px);

  /* Eén consistente verticale ritmiek voor de ONDERKANT van ALLE secties (i.p.v. per sectie
     een eigen, willekeurige bottom-padding) — schaalt vloeiend van ~48px (mobiel) tot ~104px
     (desktop), zodat elke sectie evenveel lucht heeft en secties nooit tegen elkaar
     aan lijken te plakken. De bovenkant van elke sectie gebruikt i.p.v. deze waarde de
     vaste --title-clear-* hierboven (zie .event-section verderop). */
  --section-pad-y: clamp(3rem, 6vw, 6.5rem);
  --section-pad-y-mobile: clamp(3rem, 8vw, 5rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; border:none; background:none; color:inherit; cursor:pointer; }
section{ position:relative; }

/* Eén gedeelde desktop-inhoudscontainer voor ALLE hoofdsecties (.wrap = bestaande naam,
   .site-container = zelfde regels onder de expliciet gevraagde naam) — nooit meer een
   losse, willekeurige breedte per sectie. */
.wrap, .site-container{ max-width:1400px; margin-inline:auto; padding-inline:var(--pad); }
.eyebrow{ font-weight:700; font-size:.8rem; letter-spacing:.14em; color:var(--amber); }

/* zorgt dat een sectiekop nooit onder de vaste navbalk verdwijnt bij het klikken op een menulink.
   Sinds het logo 3x groter werd is de navbalk zelf ook hoger geworden, en die hoogte
   verschilt per breakpoint (kleiner logo op gsm, groter op tablet/desktop) — daarom hier
   per breakpoint een eigen waarde i.p.v. één vaste 78px voor alle schermen. Waarden zijn
   gemeten (navbalkhoogte + kleine marge) op elk breakpoint. */
/* Vaste, exacte waarde i.p.v. een vw-schatting: de navbalkhoogte staat nu letterlijk vast
   (--header-h-desktop / --header-h-mobile hierboven), dus deze marge kan nooit meer
   afwijken van de werkelijke navbalkhoogte — dat mismatch was de oorzaak van het stukje
   vorige sectie dat nog zichtbaar bleef boven een sectie na het klikken op een menulink. */
/* De vaste titel-afstand (--title-clear-*) zit nu volledig IN elke sectie zelf
   (padding-top, zie .event-section), dus de sectie mag hier gewoon vlak tegen de
   bovenkant van het scherm scrollen (scroll-margin-top:0) — anders telt deze marge
   opnieuw op bij de interne padding en ontstaat opnieuw een té grote, wisselende
   afstand (het "120/180/250px"-probleem). */
section[id], footer[id]{ scroll-margin-top:0; }

/* subtle grain overlay for texture instead of flat black */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:2; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* =========================================================
   ACHTERGRONDVIDEO — vast over de volledige pagina, achter alle tekst
   ========================================================= */
.site-video{
  position:fixed; inset:0; z-index:-2; overflow:hidden; background:var(--ink);
}
.site-video video{
  position:absolute; top:50%; left:50%;
  /* Schermbreedte/-hoogte als basis (16:9), niet de afmetingen van de ouder —
     zo blijft de video altijd volledig schermvullend, ongeacht browser/render-eigenaardigheden. */
  width:100vw; height:56.25vw;       /* 100vw * 9/16 */
  min-height:100vh; min-width:177.78vh; /* 100vh * 16/9 */
  transform:translate(-50%,-50%);
  object-fit:cover;
}
.site-video__scrim{
  position:fixed; inset:0; z-index:-1;
  /* 75% doorschijnend — de film moet duidelijk zichtbaar blijven achter de tekst */
  background:linear-gradient(180deg, rgba(11,7,4,.22) 0%, rgba(11,7,4,.18) 40%, rgba(11,7,4,.22) 100%);
}
@media (prefers-reduced-motion: reduce){
  .site-video video{ display:none; }
  .site-video{ background:var(--ink); }
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:150;
  /* Vaste hoogte i.p.v. een door padding/logo bepaalde hoogte — de navbalk kan hierdoor
     nooit meer groter worden dan ingesteld, op geen enkele breedte of dpi, en scroll-margin
     hierboven kan er nu blindelings exact op vertrouwen. */
  height:var(--header-h-desktop); overflow:visible;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  /* eigen, iets kleinere zijmarge dan de rest van de pagina (var(--pad)): met een groter
     logo is elke vrijgekomen millimeter nodig zodat "Radio Christina" en co. niet afbreken */
  padding:0 clamp(1.5rem,3.2vw,2.6rem);
  transition:background .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  height:var(--header-h-desktop);
  /* Zachte uitdoving i.p.v. een harde, volledig ondoorzichtige rechthoek — oogt minder
     als een log, plat blok bovenop de video. */
  background:linear-gradient(180deg, rgba(11,7,4,0.92) 0%, rgba(11,7,4,0.92) 70%, rgba(11,7,4,0.7) 100%);
  backdrop-filter:blur(10px);
  border-color:var(--line);
}
.nav__logo{
  display:flex; align-items:flex-start; align-self:flex-start; gap:.65rem;
  padding-top:2px;
}
.nav__logo-img{
  /* Vaste max-hoogte i.p.v. vw-gestuurde hoogte: het logo past altijd binnen de vaste
     navbalk (zie .nav hierboven) en kan die dus nooit meer groter maken of laten
     "meeschalen" met de schermbreedte — dat vw-gedrag was de oorzaak van de afwijkende
     navbalkhoogte die de scroll-marge deed mismatchen. */
  height:auto; max-height:172px; width:auto; max-width:34vw; display:block;
  /* Precisiecorrectie: logo iets meer naar links (relative offset raakt de flex-flow/
     overige navitems niet aan, dus geen nieuwe overlap-berekening elders nodig). */
  position:relative; left:-12px;
  /* "oud oranje" neon-gloed: warme, iets verweerde oranje/amber tint i.p.v. felle neon */
  filter:
    drop-shadow(0 0 2px rgba(255,244,225,.45))
    drop-shadow(0 0 6px rgba(214,120,45,.4))
    drop-shadow(0 0 12px rgba(180,80,25,.25));
  animation:navLogoGlow 6s ease-in-out infinite;
}
@keyframes navLogoGlow{
  0%, 78%, 100%{
    filter:
      drop-shadow(0 0 2px rgba(255,244,225,.4))
      drop-shadow(0 0 5px rgba(214,120,45,.35))
      drop-shadow(0 0 10px rgba(180,80,25,.2));
  }
  88%{
    filter:
      drop-shadow(0 0 4px rgba(255,244,225,.95))
      drop-shadow(0 0 14px rgba(224,140,55,.95))
      drop-shadow(0 0 30px rgba(200,100,30,.75));
  }
}
@media (prefers-reduced-motion: reduce){ .nav__logo-img{ animation:none; } }

.nav__links{ display:flex; gap:clamp(.6rem,1.3vw,1.5rem); flex-wrap:nowrap; }
.nav__links a{
  font-size:clamp(.68rem,.95vw,.82rem); font-weight:700; letter-spacing:.06em;
  position:relative; padding-bottom:.2rem; white-space:nowrap;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0%;
  background:var(--orange); transition:width .3s var(--ease);
}
.nav__links a:hover::after{ width:100%; }

.nav__burger{ display:none; width:2.4rem; height:2.4rem; position:relative; z-index:210; }
.nav__burger span{
  display:block; position:absolute; left:.4rem; right:.4rem; height:2px; background:var(--paper);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__burger span:nth-child(1){ top:.85rem; }
.nav__burger span:nth-child(2){ top:1.25rem; }
.nav__burger span:nth-child(3){ top:1.65rem; }
.nav__burger.open span:nth-child(1){ transform:translateY(.4rem) rotate(45deg); }
.nav__burger.open span:nth-child(2){ opacity:0; }
.nav__burger.open span:nth-child(3){ transform:translateY(-.4rem) rotate(-45deg); }

.mobile-menu{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:200; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; padding:0 8vw;
  transform:translateY(-100%); transition:transform .5s var(--ease), visibility 0s linear .5s;
  visibility:hidden; pointer-events:none;
}
.mobile-menu.open{ transform:translateY(0); visibility:visible; pointer-events:auto; transition:transform .5s var(--ease); }
.mobile-menu a{
  font-family:var(--font-display); font-size:clamp(2rem,10vw,3.2rem);
  padding:.35rem 0; border-bottom:1px solid var(--line); color:var(--paper);
}
.mobile-menu a:active{ color:var(--orange); }
.mobile-menu__foot{ margin-top:2rem; font-size:.85rem; color:var(--amber); font-weight:700; letter-spacing:.08em; }

@media (max-width:1200px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
}
/* Vanaf hier past alles (logo + volledige menu) naast elkaar: logo en navigatie
   worden dan als één geheel horizontaal gecentreerd in de dunne balk, in plaats
   van logo uiterst links en links uiterst rechts. */
@media (min-width:1201px){
  .nav{ justify-content:center; gap:clamp(2rem,4vw,4.5rem); }
}

/* Mobiel: harde, vaste navbalkhoogte (--header-h-mobile), NIET meer bepaald door de
   grootte van het logo of door padding. Dit is een echte, strikte topbalk:
   - hoogte staat vast, ook tijdens scroll (.nav.scrolled hieronder wordt expliciet
     meegenomen zodat die geen andere hoogte/padding kan introduceren);
   - het logo krijgt een harde max-height die ruim binnen die balk past, en wordt via
     flex verticaal gecentreerd — het kan de balk dus nooit groter maken dan ingesteld;
   - de burgerknop staat los van de flexrij (absoluut gepositioneerd, eigen donkere
     achtergrond) zodat hij altijd op dezelfde, voorspelbare plek rechtsboven staat en
     nooit door het logo geraakt kan worden. */
@media (max-width:700px){
  .nav, .nav.scrolled{
    height:var(--header-h-mobile);
  }
  .nav__logo-img{
    /* Duidelijk groter (ruim voorbij 1,8x de oorspronkelijke clamp(26px,4.2vw,38px)),
       met een harde max-height zodat het logo altijd binnen de vaste balk van
       --header-h-mobile (84px) blijft passen, met net genoeg lucht erboven/eronder. */
    height:auto; max-height:158px; width:auto; max-width:74vw;
    left:-9px;
    /* geen pulserende gloed-animatie op mobiel: dat oogde als een groot, "gloeiend" blok
       naast een verder heel compacte balk. Een subtiele vaste gloed blijft staan. */
    animation:none;
    filter:
      drop-shadow(0 0 2px rgba(255,244,225,.4))
      drop-shadow(0 0 5px rgba(214,120,45,.35));
  }
  .nav__burger{
    position:absolute; top:50%; right:clamp(1rem,4vw,1.5rem); transform:translateY(-50%);
    background:rgba(11,7,4,.55); border-radius:.6rem; backdrop-filter:blur(3px);
  }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:transparent;
}
.hero__overlay{
  position:absolute; inset:0; z-index:1;
  /* lichter gemaakt zodat de achtergrondfilm door de tekst heen zichtbaar blijft */
  background:
    linear-gradient(0deg, rgba(11,7,4,.55) 0%, rgba(11,7,4,.28) 32%, rgba(11,7,4,.08) 55%, rgba(11,7,4,.28) 100%),
    linear-gradient(100deg, rgba(11,7,4,.18), transparent 45%);
}
.hero__content{
  position:relative; z-index:2; width:100%;
  /* Altijd minstens navbalkhoogte + marge, zodat de titel nooit onder/tegen de
     (groter geworden) logo/navbalk kan komen te zitten, ook niet op lagere vensters. */
  padding-top:var(--title-clear-desktop); padding-inline:var(--pad);
  /* De hero-inhoud hangt onderaan (justify-content:flex-end op .hero) — zonder genoeg
     bodemruimte hier eindigt de datumbalk vrijwel exact op de rand van de hero-sectie.
     Bij het doorklikken naar de volgende sectie (die door de vaste navbalk een marge
     nodig heeft) bleef daardoor net dat laatste stukje tekst nog zichtbaar boven de
     volgende sectie. Deze bodemruimte is nu minstens even groot als die navbalk-marge,
     zodat het stukje hero dat nog in beeld kan blijven altijd leeg is. */
  padding-bottom:max(clamp(2.2rem,6vw,4rem), calc(var(--header-h-desktop) + 40px));
}
/* Jubileumembleem, korte mobiele tekstregel en cta-knoppen: enkel voor mobiel opgebouwd
   (zie @media hieronder) — op desktop blijft de bestaande, al goedgekeurde hero-opbouw
   ongewijzigd, dus hier standaard verborgen. */
.hero__emblem, .hero__short, .hero__actions{ display:none; }
.hero__kicker{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:800; font-size:.78rem; letter-spacing:.16em; color:var(--gold);
  margin-bottom:.9rem;
}
.hero__kicker .dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--red); box-shadow:0 0 10px 2px var(--red); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

.hero__title{
  font-family:var(--font-display);
  font-size:clamp(2.7rem, 10.5vw, 7.6rem);
  line-height:.86;
  letter-spacing:-.01em;
  color:var(--paper);
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  overflow-wrap:break-word;
  max-width:100%;
}
@media (max-width:480px){
  .hero__title{ font-size:clamp(1.7rem, 9.4vw, 7.6rem); letter-spacing:-.02em; }
}
.hero__title-top{
  display:flex; align-items:baseline; gap:.2em;
}
.hero__title .num{
  color:var(--red); -webkit-text-stroke:2px var(--gold);
  display:inline-block; line-height:1;
}
.hero__title .word{ display:inline-block; line-height:1; }
.hero__title .accent{
  background:linear-gradient(92deg, var(--orange), var(--gold) 60%, var(--red));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:block;
}
.hero__datebar{
  display:flex; flex-wrap:wrap; align-items:baseline; row-gap:.6rem; column-gap:1.1rem;
  margin-top:clamp(1.6rem,4vw,2.4rem);
  font-family:var(--font-display);
  font-size:clamp(1.5rem,4.2vw,2.6rem);
  letter-spacing:.01em;
  text-transform:uppercase;
}
.hero__datebar-main{ color:var(--gold); }
.hero__datebar-sep{ color:rgba(244,237,225,.45); font-family:var(--font-body); }
.hero__datebar-time{
  font-family:var(--font-body); font-weight:800; font-size:clamp(.9rem,1.6vw,1.15rem); letter-spacing:.08em;
  color:var(--paper); border:1px solid rgba(244,237,225,.5); padding:.4rem .9rem; border-radius:100px;
}
.hero__tagline{ font-size:1rem; font-weight:600; color:rgba(244,237,225,.8); max-width:26ch; margin-top:1rem; }

/* Mobiel/klein scherm: datumbalk netjes onder elkaar i.p.v. lelijk afbrekende "·" tussenvoegsel,
   en een net iets donkerdere overlay zodat de video-achtergrond niet door de tekst heen "spookt".
   Raakt enkel mobiel — desktop-opbouw blijft ongewijzigd. */
@media (max-width:700px){
  .hero__overlay{
    background:
      linear-gradient(0deg, rgba(11,7,4,.82) 0%, rgba(11,7,4,.6) 38%, rgba(11,7,4,.32) 58%, rgba(11,7,4,.62) 100%),
      linear-gradient(100deg, rgba(11,7,4,.22), transparent 45%);
  }
  /* Datum, locatie en tijd elk als eigen, gecentreerde rij (i.p.v. één samengevoegde
     regel) — dit zijn drie afzonderlijke stappen in de mobiele hero-hiërarchie. */
  .hero__datebar{
    flex-direction:column; align-items:center; row-gap:.6rem;
  }
  .hero__datebar-sep{ display:none; }
  .hero__datebar-time{ margin-top:.2rem; }
}

/* =========================================================
   RECHTERBOVENHOEK IN DE HERO: flashende neontekst ("10 Jaar Crazy",
   naast de stempel, zelfde hoogte) + de echte "Gratis Inkom"-stempel
   (aparte afbeelding, "stempelt" na 10 seconden) + tekstblok eronder
   (breder, verschijnt na 2,2s).
   ========================================================= */
.hero__cta{
  position:absolute; z-index:4;
  top:clamp(5.5rem,13vh,7.5rem); right:clamp(2.5rem,9vw,8rem);
  display:flex; flex-direction:column; align-items:flex-end;
  gap:.6rem;
}
.hero__topright{
  position:relative; z-index:5;
  display:flex; flex-direction:row; align-items:center; justify-content:flex-end;
  gap:clamp(.6rem,1.6vw,1.2rem);
}
.hero__flash{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(1.15rem,2.6vw,2rem); line-height:1.1; text-align:right;
  color:var(--amber);
  text-shadow:0 0 10px rgba(255,183,77,.85), 0 0 26px rgba(255,138,61,.5);
  background:rgba(11,7,4,.5);
  border-radius:.6rem;
  padding:.45rem .85rem;
  backdrop-filter:blur(1px);
  opacity:0;
  pointer-events:none;
  flex:0 0 auto;
}
.hero__flash.is-on{
  animation:heroFlashLoop 4s ease-in-out infinite;
}
@keyframes heroFlashLoop{
  0%{opacity:0;}
  4%{opacity:1;}
  9%{opacity:.2;}
  14%{opacity:1;}
  19%{opacity:.25;}
  45%{opacity:1;}
  70%{opacity:1;}
  74%{opacity:.3;}
  78%{opacity:1;}
  100%{opacity:1;}
}
.hero__stamp{
  flex:0 0 auto;
  width:clamp(6.5rem,10.5vw,9.5rem);
  transform:scale(2.6) rotate(-18deg);
  opacity:0;
  pointer-events:none;
  transition:transform .35s cubic-bezier(.2,1.6,.4,1), opacity .15s linear;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.55));
}
.hero__stamp img{
  display:block; width:100%; height:auto;
}
.hero__stamp.is-stamped{
  transform:scale(1) rotate(-9deg);
  opacity:1;
}
@media (prefers-reduced-motion: reduce){
  .hero__stamp{ transition:opacity .4s linear; transform:rotate(-9deg); }
}
.hero__blurb{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  text-align:center;
  max-width:min(30rem, 44vw);
  opacity:0; transform:translateY(8px);
  transition:opacity .6s ease, transform .6s ease;
  pointer-events:none;
}
.hero__blurb.is-on{ opacity:1; transform:translateY(0); }
.hero__blurb p{
  margin:0; color:#fff; font-weight:600;
  font-size:clamp(.72rem,1.05vw,.88rem); line-height:1.35;
  text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.6);
}
/* Mobiel: de losstaande, absoluut gepositioneerde cta-blok (flash + stempel + blurb)
   botste met de grote titel/datumbalk eronder zodra beide veel verticale ruimte innamen —
   op mobiel zetten we het cta-blok daarom gewoon in de normale doorstroom, ONDER de
   titel/datumbalk, netjes gecentreerd i.p.v. rechtsboven zwevend. Enkel dit blok (max-width:700px)
   wijzigt; desktop-opbouw (hierboven) blijft volledig ongemoeid. */
@media (max-width:700px){
  .hero{
    height:auto; min-height:100svh; overflow:visible;
    justify-content:flex-start;
  }
  .hero__content{
    /* Rechtstreeks gekoppeld aan de vaste navbalkhoogte (--header-h-mobile), plus een
       kleine marge — de hero-inhoud start dus per definitie net ónder de navbalk en kan
       er nooit gedeeltelijk achter/onder verdwijnen, ongeacht schermbreedte. */
    padding-top:var(--title-clear-mobile); padding-bottom:.5rem;
    display:flex; flex-direction:column; align-items:center; text-align:center;
  }

  /* 1. Jubileumembleem — bovenaan, prominent boven de merknaam. Vervangt de tekst-
     stapeling "10"/"JAAR" (die hieronder verborgen wordt) door het echte embleem. */
  .hero__emblem{
    display:block; width:clamp(150px,44vw,220px); height:auto; margin:0 auto clamp(.6rem,2.4vw,1rem);
    /* lichte afronding zodat de scherpe zwarte hoeken van de bronafbeelding verdwijnen —
       oogt zo als een echte medaillon/badge i.p.v. een uitgeknipt vierkant screenshot */
    border-radius:16%;
    box-shadow:0 0 0 1px rgba(255,255,255,.08);
    filter:drop-shadow(0 10px 22px rgba(0,0,0,.6));
    animation:heroEmblemIn .7s var(--ease) both, heroEmblemGlow 6s ease-in-out infinite 1s;
  }
  @keyframes heroEmblemIn{ from{ opacity:0; transform:scale(.86) translateY(-8px);} to{ opacity:1; transform:scale(1) translateY(0);} }
  @keyframes heroEmblemGlow{
    0%,80%,100%{ filter:drop-shadow(0 10px 22px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(255,180,0,.2)); }
    90%{ filter:drop-shadow(0 10px 22px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(255,180,0,.55)); }
  }
  .hero__title-top{ display:none; } /* "10"/"JAAR" als tekst vervalt op mobiel — het embleem hierboven neemt die rol over */
  .hero__title{ align-items:center; }
  .hero__title .accent{ text-align:center; }

  /* 2. Merknaam (CRAZY / KROEGENTOCHT) en 3. datum/locatie — bestonden al, nu gecentreerd
     onder het embleem i.p.v. links uitgelijnd, voor een sterkere, symmetrische opbouw. */
  .hero__datebar{ justify-content:center; align-items:center; }

  /* 4. Korte ondersteunende lijn i.p.v. de drie langere alinea's (die hieronder, samen met
     de flashende "10 Jaar Crazy"-tekst, verborgen worden om het scherm niet te overladen). */
  .hero__short{
    display:block; max-width:32ch; margin:clamp(.8rem,3vw,1.2rem) auto 0;
    color:#fff; font-weight:600; font-size:.86rem; line-height:1.4;
    text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.6);
  }

  /* 5. Cta-knoppen — groot en makkelijk aan te tikken, elk over de volle breedte. */
  .hero__actions{
    display:flex; flex-direction:column; gap:.7rem; width:100%; max-width:24rem;
    margin:clamp(1.1rem,4vw,1.5rem) auto 0;
  }
  .hero__actions .btn{
    width:100%; justify-content:center; padding:1.05rem 1.4rem; font-size:.86rem;
  }

  .hero__cta{
    position:relative; top:auto; right:auto; z-index:4;
    width:100%; align-items:center; text-align:center;
    padding:clamp(1.2rem,4vw,1.7rem) var(--pad) clamp(1.3rem,4.5vw,1.9rem);
    gap:.5rem;
  }
  /* De flashende "10 Jaar Crazy"-tekst is overbodig naast het nieuwe embleem — declutteren
     door enkel de "gratis inkom"-stempel te behouden (die blijft wél waardevol/feestelijk). */
  .hero__flash{ display:none; }
  .hero__topright{ justify-content:center; gap:.5rem; }
  .hero__stamp{ width:clamp(5.5rem,19vw,7.5rem); }
  /* De uitgebreide 3-alinea-blurb vervalt op mobiel, vervangen door .hero__short hierboven. */
  .hero__blurb{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .hero__flash.is-on{ animation:none; opacity:1; }
  .hero__blurb{ transition:opacity .4s linear; }
  .hero__emblem{ animation:none; }
}

.hero__scroll{
  position:absolute; right:var(--pad); bottom:1.6rem; z-index:2;
  writing-mode:vertical-rl; font-size:.72rem; letter-spacing:.18em; font-weight:700; color:rgba(244,237,225,.6);
  display:flex; align-items:center; gap:.6rem;
}
.hero__scroll::after{ content:''; width:1px; height:34px; background:linear-gradient(var(--orange),transparent); }
@media (max-width:700px){ .hero__scroll{ display:none; } }

/* =========================================================
   STATEMENT / INTRO
   ========================================================= */
.statement{ padding:clamp(4.5rem,10vw,8rem) var(--pad); background:transparent; position:relative; }
.statement__grid{ display:flex; flex-direction:column; gap:clamp(1.6rem,4vw,2.4rem); max-width:56rem; }
.statement__title{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(2.4rem,7vw,5.4rem); line-height:.94;
  color:var(--paper);
}
.statement__title em{ font-style:normal; color:var(--red); }
.statement__body{ display:flex; flex-direction:column; gap:.9rem; }
.statement__body p{ font-size:clamp(1rem,1.6vw,1.2rem); color:#fff; max-width:60ch; }

/* =========================================================
   POSTER
   ========================================================= */
.poster{
  padding:var(--section-pad-y) var(--pad);
  background:radial-gradient(60% 60% at 80% 10%, rgba(195,28,28,.2), transparent 60%);
  overflow:hidden;
}
.poster__grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2.5rem,6vw,5rem); align-items:center;
}
.poster__art{ position:relative; perspective:1400px; }
.poster__frame{
  position:relative; transform:rotate(-4deg);
  transition:transform .6s var(--ease);
  will-change:transform;
}
.poster__frame:hover{ transform:rotate(-1.5deg) scale(1.015); }
.poster__frame img{
  width:100%; border-radius:6px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,196,0,.15);
}
.poster__glow{
  position:absolute; inset:-18%; z-index:-1; filter:blur(60px); opacity:.55;
  background:conic-gradient(from 120deg, var(--red), var(--orange), var(--gold), var(--red));
}
.poster__badge{
  position:absolute; width:clamp(90px,13vw,150px); right:-6%; top:-8%;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.6));
  animation:spin-slow 22s linear infinite;
}
@keyframes spin-slow{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }

.poster__copy .eyebrow{ margin-bottom:1rem; display:block; }
.poster__copy h3{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.4rem); line-height:1; margin-bottom:1.2rem;
}
.poster__copy p{ color:rgba(244,237,225,.78); max-width:44ch; margin-bottom:.8rem; }
.poster__facts{ display:flex; gap:2.2rem; margin-top:1.8rem; flex-wrap:wrap; }
.poster__facts div strong{ display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--gold); }
.poster__facts div span{ font-size:.72rem; letter-spacing:.1em; font-weight:700; color:rgba(244,237,225,.6); }

@media (max-width:900px){
  .poster__grid{ grid-template-columns:1fr; }
  .poster__frame{ max-width:340px; margin-inline:auto; }
}

/* =========================================================
   SECTION HEADS (shared) + GLOBAL SECTION SYSTEM
   ========================================================= */
.section-head, .section-header{
  display:flex; justify-content:space-between; align-items:flex-start; gap:2rem;
  margin-bottom:clamp(1.5rem,3vw,2.5rem); flex-wrap:wrap;
}
/* ÉÉN herbruikbare titelklas voor alle zes hoofdsecties (De cafés, De dj's van 2026,
   Programma, Aftermovie 2025, 10 jaar Crazy, Live op Radio Christina): zelfde
   font-grootte, gewicht, line-height en ruimte eronder — geen enkele titel wordt nog
   los/apart gepositioneerd. */
.section-title, .section-head h2{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:var(--title-fs); line-height:.95; font-weight:400;
  margin:0 0 .3rem;
}
.section-subtitle, .section-head p{ max-width:34ch; color:rgba(244,237,225,.65); font-size:.9rem; padding-top:.3rem; }

/* Herbruikbare sectiestructuur (.event-section): vaste titel-afstand tot boven
   (--title-clear-desktop, exact gelijk voor elke sectie), vaste ritmiek onderaan
   (--section-pad-y), en een hoogte die met de inhoud meegroeit i.p.v. geforceerd
   100vh — zo blijft elke sectie zelfstandig (geen bleed van de vorige/volgende
   sectie) zonder dat lange inhoud (Programma, DJ's, Foto's) ooit wordt afgeknipt. */
.event-section{
  padding-top:var(--title-clear-desktop);
  padding-bottom:var(--section-pad-y);
  padding-inline:var(--pad);
  min-height:calc(100vh - var(--header-h-desktop));
  min-height:calc(100svh - var(--header-h-desktop));
  display:flex; flex-direction:column; justify-content:flex-start;
  background:transparent;
}
@media (max-width:820px){
  .event-section{
    min-height:0; display:block;
    padding-top:var(--title-clear-mobile);
    padding-bottom:var(--section-pad-y-mobile);
  }
}

/* =========================================================
   DJ LINEUP
   ========================================================= */
.djs .wrap{ padding-inline:0; }
.djs .section-head p{ font-size:.78rem; max-width:26ch; line-height:1.35; }
.djs__title-group{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.15rem .7rem; }
/* ---- Geel accentzinnetje naast de titel, op de helft van de titelgrootte, in het
   neon-marker-lettertype (Luckiest Guy). "nu en dan oplicht" = geen constant knipperen,
   maar een korte, zachte gloedpuls die eens per cyclus even oplaait en dan weer verstilt. ---- */
.djs__tagline{
  font-family:var(--font-accent); font-weight:400; text-transform:none;
  font-size:calc(var(--title-fs) * .46); line-height:1.1;
  color:var(--gold); letter-spacing:.01em;
  /* dunne zwarte contour rondom de letter (-webkit-text-stroke) + een klein donker
     schaduwtje vlak tegen de rand aan (geeft de letter reliëf/"naar binnen" i.p.v. een
     schaduw die los van de letter zweeft) — samen zorgt dit voor voldoende contrast op
     de lichte achtergrond, zelfs zonder de gloed hieronder. */
  -webkit-text-stroke:.6px rgba(0,0,0,.85);
  text-shadow:
    0 1px 1px rgba(0,0,0,.9),
    0 0 2px rgba(0,0,0,.7),
    0 0 4px rgba(242,201,76,.4), 0 0 1px rgba(242,201,76,.6);
  animation:djsTaglineFlare 7s ease-in-out infinite;
}
@keyframes djsTaglineFlare{
  0%, 78%, 100%{
    text-shadow:
      0 1px 1px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.7),
      0 0 4px rgba(242,201,76,.4), 0 0 1px rgba(242,201,76,.6);
  }
  83%{
    text-shadow:
      0 1px 1px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.7),
      0 0 10px rgba(255,214,90,1), 0 0 22px rgba(255,180,0,.75), 0 0 38px rgba(255,180,0,.4);
  }
  88%{
    text-shadow:
      0 1px 1px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.7),
      0 0 4px rgba(242,201,76,.4), 0 0 1px rgba(242,201,76,.6);
  }
}
@media (prefers-reduced-motion: reduce){
  .djs__tagline{ animation:none; }
}
@media (max-width:820px){
  .djs__title-group{ flex-direction:column; align-items:flex-start; gap:.15rem; }
}
.djs__grid{
  display:grid; grid-template-columns:repeat(6, 1fr);
  gap:clamp(.7rem,1.4vw,1.3rem);
  margin-top:clamp(.15rem,.45vw,.3rem);
}
.dj-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.18rem;
}
.dj-card__frame{
  position:relative; width:88%; aspect-ratio:777/1245; border-radius:8px; overflow:hidden;
  background-image:url('../images/dj-card-frame.png');
  background-size:cover; background-position:center;
  box-shadow:0 4px 14px rgba(0,0,0,.5);
  transition:transform .3s var(--ease);
}
.dj-card:hover .dj-card__frame{ transform:translateY(-3px); }
.dj-card__ph{
  position:absolute; inset:11% 9% 10% 9%; display:flex; align-items:center; justify-content:center;
  color:rgba(244,237,225,.4); font-size:.5rem; font-weight:700; letter-spacing:.03em; line-height:1.2; text-align:center;
  overflow:hidden;
  /* reset zodat een <button> hier exact als de vroegere <div> placeholder oogt */
  background:transparent; border:0; margin:0; padding:0; font-family:var(--font-body); cursor:default;
}
.dj-card__ph[data-full]{ cursor:pointer; }
.dj-card__ph img{ width:100%; height:100%; object-fit:cover; border-radius:2px; transition:transform .3s var(--ease); }
.dj-card__ph[data-full]:hover img{ transform:scale(1.05); }
.dj-card__num{
  position:absolute; top:4%; left:10%; font-family:var(--font-display); font-size:clamp(.52rem,.9vw,.7rem); color:rgba(244,237,225,.65);
}
.dj-card__name{
  font-family:var(--font-display); font-size:clamp(.68rem,1.15vw,1rem);
  text-transform:uppercase; letter-spacing:.01em; color:var(--paper); line-height:1.1;
  text-shadow:0 2px 8px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.7);
}
.dj-card__slot{
  font-size:clamp(.52rem,.85vw,.68rem); color:var(--amber); font-weight:700; letter-spacing:.02em;
  text-shadow:0 2px 8px rgba(0,0,0,.95);
}
@media (max-width:820px){
  .djs .section-head h2{ white-space:normal; }
  .djs__grid{ grid-template-columns:repeat(4, 1fr); }
}
@media (max-width:480px){
  .djs__grid{ grid-template-columns:repeat(2, 1fr); }
}

/* =========================================================
   CAFÉS
   ========================================================= */
.cafes__grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(.8rem,1.8vw,1.3rem) clamp(1rem,3vw,2rem);
  margin-top:clamp(.6rem,1.6vw,1.1rem);
  justify-items:center;
}
.cafe-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35rem;
  max-width:13rem;
}
.cafe-card__logo{
  width:clamp(5.8rem,10.6vw,7.9rem); aspect-ratio:1/1; border-radius:50%;
  background-image:url('../images/cafe-circle-neon.png');
  background-size:cover; background-position:center;
  border:3px solid var(--gold);
  box-shadow:0 4px 18px rgba(0,0,0,.55), 0 0 22px rgba(255,106,26,.35);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-size:.68rem; letter-spacing:.08em; color:rgba(244,237,225,.4); padding:.6rem;
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cafe-card__logo img{
  width:100%; height:100%; object-fit:contain;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.85))
    drop-shadow(0 0 9px var(--amber))
    drop-shadow(0 0 16px var(--orange));
}
.cafe-card:hover .cafe-card__logo{
  border-color:var(--amber); transform:translateY(-3px);
  box-shadow:0 6px 22px rgba(0,0,0,.55), 0 0 32px rgba(255,106,26,.55);
}
.cafe-card__name{
  font-family:var(--font-display); font-size:clamp(.95rem,1.6vw,1.15rem);
  text-transform:uppercase; letter-spacing:.02em; color:var(--paper);
}
@media (max-width:820px){
  /* Vanaf hier past de 3-koloms rij niet meer op één scherm — laat de sectie
     gewoon meegroeien met de inhoud i.p.v. geforceerd 100vh, anders ontstaat
     een grote lege ruimte onderaan op tablet. */
  .cafes__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:480px){
  /* Eén kolom op smalle telefoons — badges blijven gecentreerd (justify-items:center
     hierboven) en krijgen een kleinere, vastere tussenruimte i.p.v. de brede clamp()
     die voor een 2-3-koloms rij bedoeld was. */
  .cafes__grid{ grid-template-columns:1fr; gap:.9rem; }
}

/* =========================================================
   PROGRAMMA
   ========================================================= */
.programma .wrap{ width:100%; display:flex; flex-direction:column; flex:1; min-height:0; }
.programma__note{ font-size:.72rem; color:rgba(244,237,225,.45); margin-bottom:.6rem; }
/* De "scroll horizontaal"-tip is enkel relevant zodra de tabel effectief breder is dan het
   scherm (tablet/mobiel) — op desktop past de volledige tabel binnen de contentbreedte,
   dus daar hoort deze tip niet thuis. */
.programma__note-scroll{ display:none; }
@media (max-width:820px){
  .programma__note-scroll{ display:inline; }
}

/* ---- Programma als "sheet": uren links, cafés (met logo) bovenaan, per uur/café-cel de dj ----
   Eerste kolom (uren) en kophrij (cafés) blijven sticky, zodat het op smalle schermen als een
   echt spreadsheet blijft aanvoelen wanneer je horizontaal scrolt. ---- */
.programma__sheet-wrap{
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:12px; flex:1; min-height:0;
}
.programma__sheet{
  width:100%; min-width:640px; border-collapse:separate; border-spacing:0;
}
.programma__sheet thead th{
  background-color:rgba(11,7,4,.92); border-bottom:1px solid var(--line);
  padding:.4rem .3rem; position:sticky; top:0; z-index:2;
  height:68px; box-sizing:border-box;
}
.programma__corner{
  position:sticky; left:0; z-index:3; background:rgba(11,7,4,.96);
  min-width:4.5rem; border-right:1px solid var(--line);
  font-size:.68rem; letter-spacing:.08em; color:rgba(244,237,225,.45); text-align:left; font-weight:700;
}
.programma__cafe-head{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; height:100%; }

/* ---- Rond medaillon-logo per café in de kopregel — de goudring, gloed en sneeuwkapjes zitten
   al ingebakken in de beeldjes zelf (assets/images/cafe-badges/), dus hier hoeft alleen de vorm
   en een lichte drop-shadow te komen zodat de badge los van de donkere kopbalk oogt. ---- */
.programma__cafe-badge{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:clamp(2.3rem,3.6vw,2.8rem); height:clamp(2.3rem,3.6vw,2.8rem);
  border-radius:50%;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));
}
.programma__cafe-badge img{
  width:100%; height:100%; object-fit:cover; border-radius:50%;
}
.programma__cafe-head span{
  font-size:.6rem; font-weight:700; letter-spacing:.01em; text-align:center; line-height:1.1;
  color:var(--paper); max-width:6.5rem; text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.programma__hour{
  position:sticky; left:0; z-index:1; background:rgba(11,7,4,.96);
  font-family:var(--font-display); font-size:clamp(.8rem,1.3vw,1rem); color:var(--gold);
  padding:.35rem .6rem; text-align:left; border-right:1px solid var(--line);
  border-top:1px solid var(--line); white-space:nowrap;
  height:34px; box-sizing:border-box;
}
.programma__hour--last{ font-size:clamp(.68rem,1.1vw,.8rem); }
.programma__sheet tbody tr:first-child .programma__hour,
.programma__sheet tbody tr:first-child td{ border-top:none; }
.programma__sheet td{
  padding:.35rem .4rem; text-align:center; font-size:.74rem; color:rgba(244,237,225,.85);
  border-top:1px solid var(--line); border-left:1px solid rgba(244,237,225,.07);
  white-space:nowrap; height:34px; box-sizing:border-box;
}
.programma__sheet tbody tr.is-now .programma__hour{ color:var(--amber); }
.programma__sheet tbody tr.is-now td{ box-shadow:inset 0 0 0 1px rgba(255,180,0,.55); }

@media (max-width:820px){
  .programma .wrap{ display:block; }
  .programma__sheet-wrap{ max-height:70vh; overflow-y:auto; }
}

/* =========================================================
   RADIO CHRISTINA
   ========================================================= */
.radio{ position:relative; overflow:hidden; }
.radio__grid{ display:grid; grid-template-columns:1fr auto; gap:clamp(1.4rem,4vw,2.6rem); align-items:center; }
/* titel-typografie komt nu volledig van de gedeelde .section-title-klasse (zie hierboven) */
.radio__meta{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.8rem; }
.radio .eyebrow{ display:inline-flex; align-items:center; }
.radio__onair{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; font-weight:800; letter-spacing:.1em;
  color:var(--red); border:1px solid var(--red); padding:.2rem .55rem; border-radius:4px;
}
.radio__onair i{ width:.4rem; height:.4rem; border-radius:50%; background:var(--red); animation:pulse 1.4s infinite; }
.radio p{ color:rgba(244,237,225,.75); max-width:40ch; margin-bottom:1rem; font-size:.92rem; }
.btn{
  display:inline-flex; align-items:center; gap:.7rem; padding:1rem 1.7rem; border-radius:100px;
  font-weight:800; font-size:.85rem; letter-spacing:.05em;
  background:var(--red); color:var(--paper); transition:transform .25s var(--ease), background .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); background:var(--orange); }
.btn--ghost{ background:transparent; border:1px solid rgba(244,237,225,.35); }
.btn--ghost:hover{ background:rgba(244,237,225,.08); }
.radio__bars{
  display:flex; align-items:flex-end; gap:5px; height:150px; width:min(46vw,220px);
}
.radio__bars span{
  flex:1; background:linear-gradient(0deg,var(--red),var(--orange),var(--gold));
  border-radius:3px 3px 0 0; animation:bar 1.1s ease-in-out infinite;
}
@keyframes bar{ 0%,100%{ transform:scaleY(.25); } 50%{ transform:scaleY(1); } }
.radio__bars span:nth-child(odd){ animation-duration:.9s; }
.radio__bars span:nth-child(3n){ animation-duration:1.3s; animation-delay:.15s; }
.radio__bars span:nth-child(5n){ animation-delay:.3s; }
@media (max-width:820px){
  .radio__grid{ grid-template-columns:1fr; }
}

/* =========================================================
   CBAVC
   ========================================================= */
.cbavc__panel{
  border:1px solid var(--line); border-radius:16px;
  padding:var(--section-top) clamp(2rem,6vw,4rem) clamp(1.4rem,3vw,2rem);
  background:linear-gradient(135deg, rgba(195,28,28,.10), rgba(255,180,0,.05));
  display:grid; grid-template-columns:1fr auto; gap:2.5rem; align-items:center;
}
/* titel-typografie komt nu volledig van de gedeelde .section-title-klasse (zie hierboven) */
.cbavc__tag{ display:inline-block; margin-bottom:.6rem; }
.cbavc p{ color:rgba(244,237,225,.78); max-width:46ch; font-size:.92rem; }
.cbavc__actions{ display:flex; flex-direction:column; align-items:flex-start; gap:.9rem; }
@media (max-width:760px){ .cbavc__panel{ grid-template-columns:1fr; } .cbavc__actions{ flex-direction:row; flex-wrap:wrap; align-items:center; } }

/* =========================================================
   SOCIAL LINKS (Facebook e.d.) — herbruikbare pill met logo, gebruikt
   in de CBAVC-sectie en in de footer
   ========================================================= */
.social-link{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-body); font-weight:700; font-size:.82rem; letter-spacing:.02em;
  color:var(--paper); border:1px solid rgba(244,237,225,.35); border-radius:100px;
  padding:.5rem 1rem .5rem .6rem; background:rgba(244,237,225,.04);
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.social-link:hover{ border-color:var(--amber); background:rgba(255,180,0,.1); transform:translateY(-2px); }
.social-link__icon{
  width:1.3rem; height:1.3rem; flex:0 0 auto; border-radius:50%;
  background:#1877F2; color:#fff; padding:.22rem; box-sizing:border-box;
}
.social-link__icon path{ fill:currentColor; }

/* =========================================================
   AFTERMOVIE — zelfde opbouw als de fotocarrousel hieronder: pijltjes
   links/rechts, kader op dezelfde grote als de achtergrondvideo. Nieuwe
   fragmenten worden gewoon als extra .aftermovie__frame aan de track
   toegevoegd (zie [AFTERMOVIE TOEVOEGEN] in de HTML).
   ========================================================= */
.aftermovie .wrap{ display:flex; flex-direction:column; align-items:center; width:100%; }
.aftermovie .section-head{ align-self:stretch; margin-bottom:.3rem; }
/* Deze sectie knijpt haar eigen boven-onderruimte tot het comfortabele minimum (in
   plaats van de gedeelde --title-clear-desktop/--section-pad-y/section-head-marge),
   zodat de video het maximale formaat krijgt dat nog ruim binnen het scherm past.
   main.js (sizeViewport) leest deze waarden zelf uit via getComputedStyle, dus die
   hoeft hiervoor niet aangepast. */
.aftermovie.event-section{ padding-top:110px; padding-bottom:.3rem; }

/* Het kader krijgt zijn breedte/hoogte via JS (zie main.js: sizeViewport), berekend
   als de grootste 16:9-rechthoek die binnen het beschikbare scherm past — zo is het
   kader in rust altijd exact even groot als de afgespeelde video, en valt het nooit
   buiten de pagina. */
.aftermovie__carousel{
  display:flex; align-items:center; justify-content:center; gap:clamp(.6rem,1.6vw,1.2rem);
  width:100%;
}
.aftermovie__viewport{ overflow:hidden; min-width:0; }
.aftermovie__track{
  display:flex; gap:clamp(.6rem,1.6vw,1.2rem); height:100%;
  transition:transform .45s var(--ease);
  will-change:transform;
}
.aftermovie__frame{
  position:relative; border-radius:16px; overflow:hidden;
  background:#000;
  flex:0 0 100%; height:100%;
}
.aftermovie__playbtn{
  display:block; position:relative; width:100%; height:100%; padding:0; border:0; cursor:pointer; background:none;
}
.aftermovie__playbtn img{ width:100%; height:100%; object-fit:cover; opacity:.7; transition:opacity .3s, transform .6s var(--ease); }
.aftermovie__playbtn:hover img{ opacity:.5; transform:scale(1.03); }
.aftermovie__playbtn::after{
  content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.75), transparent 55%);
}
.aftermovie__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:clamp(72px,10vw,110px); height:clamp(72px,10vw,110px); border-radius:50%;
  background:var(--red); display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 0 rgba(195,28,28,.6); animation:ring 2.2s infinite;
}
@keyframes ring{ 0%{ box-shadow:0 0 0 0 rgba(195,28,28,.5);} 70%{ box-shadow:0 0 0 26px rgba(195,28,28,0);} 100%{ box-shadow:0 0 0 0 rgba(195,28,28,0);} }
.aftermovie__play svg{ width:34%; height:34%; fill:var(--paper); margin-left:8%; }
.aftermovie__label{
  position:absolute; left:1.6rem; bottom:1.6rem; z-index:2; font-family:var(--font-display);
  font-size:clamp(1.4rem,4vw,2.4rem); text-transform:uppercase; pointer-events:none;
}
.aftermovie__frame iframe{ width:100%; height:100%; border:0; display:block; }
.aftermovie__arrow{
  flex:0 0 auto; width:clamp(2.4rem,4vw,3.2rem); height:clamp(2.4rem,4vw,3.2rem);
  border-radius:50%; border:1px solid var(--line); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  background:rgba(244,237,225,.04);
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.aftermovie__arrow svg{ width:46%; height:46%; }
.aftermovie__arrow:hover{ border-color:var(--amber); background:rgba(255,180,0,.1); }
.aftermovie__arrow:active{ transform:scale(.92); }
.aftermovie__arrow:disabled{ opacity:.3; pointer-events:none; }
@media (max-width:820px){
  .aftermovie .wrap{ display:block; }
  .aftermovie__viewport{ width:100% !important; height:auto !important; aspect-ratio:16/9; }
  .aftermovie__track{ height:auto; }
  .aftermovie__frame{ width:100%; height:auto; aspect-ratio:16/9; }
}

/* =========================================================
   PHOTO WALL
   ========================================================= */
.photos .wrap{ display:flex; flex-direction:column; flex:1; min-height:0; width:100%; }

/* ---- Carousel: 3 foto's zichtbaar, navigeren met pijltjes ---- */
.photos__carousel{
  display:flex; align-items:center; gap:clamp(.6rem,1.6vw,1.2rem);
}
.photos__viewport{ overflow:hidden; flex:1; min-width:0; height:100%; }
.photos__track{
  display:flex; gap:clamp(.6rem,1.6vw,1.2rem); height:100%;
  transition:transform .45s var(--ease);
  will-change:transform;
}
.photos__slide{
  /* Placeholder-kaarten (geen echte foto, zie .ph-ph hieronder) krijgen een vaste
     aspect-ratio via .is-portrait/.is-square/.is-wide, als stand-in voor de verhouding
     van de foto die er later in komt. */
  flex:0 0 calc((100% - 2*clamp(.6rem,1.6vw,1.2rem)) / 3);
  aspect-ratio:4/3; height:100%;
  border-radius:10px; overflow:hidden; position:relative;
  background:linear-gradient(160deg,#241009,#0f0704);
  border:1px solid var(--line);
  cursor:pointer; padding:0;
  transition:transform .25s var(--ease), border-color .25s var(--ease), flex-basis .25s var(--ease);
}
.photos__slide:not(:disabled):hover{ transform:translateY(-3px); border-color:var(--amber); }
.photos__slide:disabled{ cursor:default; }
.photos__slide.ph-ph.is-portrait{ aspect-ratio:3/4; }
.photos__slide.ph-ph.is-square{ aspect-ratio:1/1; }
.photos__slide.ph-ph.is-wide{ aspect-ratio:16/9; }
/* Een slide MET een echte foto (dus geen .ph-ph) krijgt geen geraden/vaste verhouding
   meer: de breedte van het kader past zich exact aan de eigen verhouding van de foto
   aan (hoogte = carrousel-hoogte, breedte = wat de foto zelf nodig heeft) — landschap
   blijft landschap, portret blijft portret, en er wordt nooit bijgesneden, uitgerekt of
   platgedrukt (object-fit:contain, geen cover). */
.photos__slide:not(.ph-ph){
  flex:0 0 auto; aspect-ratio:auto; width:auto;
  display:flex; align-items:stretch;
}
.photos__slide:not(.ph-ph) img{ width:auto; height:100%; object-fit:contain; display:block; }
.photos__slide.ph-ph{
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; letter-spacing:.06em; color:rgba(244,237,225,.3); text-align:center; padding:.6rem;
  font-family:var(--font-body);
}
.photos__arrow{
  flex:0 0 auto; width:clamp(2.4rem,4vw,3.2rem); height:clamp(2.4rem,4vw,3.2rem);
  border-radius:50%; border:1px solid var(--line); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  background:rgba(244,237,225,.04);
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.photos__arrow svg{ width:46%; height:46%; }
.photos__arrow:hover{ border-color:var(--amber); background:rgba(255,180,0,.1); }
.photos__arrow:active{ transform:scale(.92); }
.photos__arrow:disabled{ opacity:.3; pointer-events:none; }
@media (max-width:820px){
  .photos .wrap{ display:block; }
  .photos__carousel{ height:auto; }
  .photos__viewport{ height:auto; }
  .photos__track{ height:auto; }
  /* aspect-ratio bewust niet hier hard overschreven — .is-portrait/.is-square/.is-wide
     (per foto/placeholder toegekend) moeten ook op tablet/mobiel hun eigen verhouding
     behouden i.p.v. allemaal terug 4:3 te worden. */
  .photos__slide{ flex:0 0 calc((100% - 1*.8rem) / 2); height:auto; }
}
@media (max-width:480px){
  .photos__slide{ flex:0 0 100%; }
}

/* ---- Lightbox popup bij aanklikken van een foto ---- */
.lightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(5,3,2,.92);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1.5rem,6vw,4rem);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), visibility 0s linear .3s;
}
.lightbox.is-open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .3s var(--ease); }
.lightbox__img{
  max-width:100%; max-height:100%; border-radius:10px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
  transform:scale(.96); transition:transform .3s var(--ease);
}
.lightbox.is-open .lightbox__img{ transform:scale(1); }
.lightbox__close{
  position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem);
  width:2.6rem; height:2.6rem; border-radius:50%; color:var(--paper);
  background:rgba(244,237,225,.08); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.lightbox__close svg{ width:50%; height:50%; }
.lightbox__close:hover{ border-color:var(--amber); background:rgba(255,180,0,.12); }

/* ---- Navigatiepijlen in de lightbox: enkel zichtbaar als de aangeklikte foto deel
   uitmaakt van een reeks (dj-foto's of fotocarrousel), zie GALLERY_SELECTORS in main.js.
   [hidden] wint van display:flex hieronder, dus die worden automatisch verborgen. ---- */
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:clamp(2.6rem,4.4vw,3.4rem); height:clamp(2.6rem,4.4vw,3.4rem);
  border-radius:50%; color:var(--paper);
  background:rgba(244,237,225,.08); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
  z-index:1;
}
.lightbox__nav svg{ width:46%; height:46%; }
.lightbox__nav:hover{ border-color:var(--amber); background:rgba(255,180,0,.12); }
.lightbox__nav:active{ transform:translateY(-50%) scale(.92); }
.lightbox__nav--prev{ left:clamp(.6rem,3vw,2rem); }
.lightbox__nav--next{ right:clamp(.6rem,3vw,2rem); }
@media (max-width:600px){
  .lightbox__nav{ width:2.4rem; height:2.4rem; }
  .lightbox__nav--prev{ left:.4rem; }
  .lightbox__nav--next{ right:.4rem; }
}

/* =========================================================
   FOOTER
   ========================================================= */
/* De footer is het laatste element op de pagina: als hij korter is dan het scherm kan de
   browser nooit ver genoeg scrollen om hem bovenaan te krijgen (er is dan simpelweg geen
   pagina meer over om naartoe te scrollen) — de vorige sectie bleef daardoor zichtbaar
   wanneer je via "Info" in de navigatie naar de footer sprong. Door de footer minstens
   schermhoog te maken (zoals de andere secties) kan hij altijd het hele scherm vullen; de
   inhoud wordt verticaal gecentreerd zodat dit niet als lege ruimte aanvoelt. */
.footer{
  min-height:calc(100vh - var(--header-h-desktop));
  min-height:calc(100svh - var(--header-h-desktop));
  display:flex; flex-direction:column; justify-content:center;
  padding-top:var(--title-clear-desktop); padding-bottom:var(--section-pad-y); padding-inline:var(--pad);
  background:rgba(11,7,4,.85); border-top:1px solid var(--line);
}
@media (max-width:700px){
  .footer{ min-height:0; padding-top:var(--title-clear-mobile); }
}
.footer__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2.5rem; margin-bottom:2.5rem; }
.footer__logo{ font-family:var(--font-display); font-size:2rem; text-transform:uppercase; }
.footer__logo b{ color:var(--red); }
.footer__cols{ display:flex; gap:clamp(2rem,5vw,4.5rem); flex-wrap:wrap; }
.footer__col h4{ font-size:.72rem; letter-spacing:.1em; font-weight:800; color:var(--amber); margin-bottom:.8rem; }
.footer__col a, .footer__col span{ display:block; font-size:.9rem; color:rgba(244,237,225,.7); margin-bottom:.5rem; }
.footer__col a.social-link{ display:inline-flex; margin-top:.2rem; }
.footer__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.78rem; color:rgba(244,237,225,.4); border-top:1px solid var(--line); padding-top:1.4rem; }

/* generic reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* =========================================================
   CRAZY ONLY — subtiele link in de navigatie (zelfde stijl/grootte als de
   overige navlinks, bewust niet opvallender dan "Programma" of "Cafés")
   ========================================================= */
.nav__lockedlink{
  display:inline-flex; align-items:center; gap:.35em;
  opacity:.85;
}
.nav__lockedlink span{ font-size:.85em; }
.nav__lockedlink:hover{ opacity:1; }
.mobile-menu__locked{
  display:flex; align-items:center; gap:.4rem;
  font-size:clamp(1.3rem,6vw,1.9rem) !important;
  color:var(--amber) !important;
  opacity:.9;
}

/* =========================================================
   10 JAAR-BADGE (draaiende loop uiterst linksboven, elke pagina)
   Iets kleiner dan het Crazy Kroegentocht-logo. Hangt absoluut in de vaste
   navbalk, dus scrollt mee zonder de balkhoogte te beinvloeden. De navbalk krijgt
   links extra ruimte zodat logo en menu er nooit onder schuiven.
   ========================================================= */
:root{ --badge-w:clamp(84px,9.5vw,138px); --badge-gap:clamp(.4rem,1vw,1rem); }
.site-badge{
  position:absolute; z-index:2;
  left:clamp(.6rem,1.2vw,1.2rem); top:6px;
  width:var(--badge-w); display:block; line-height:0;
}
.site-badge__media{
  width:100%; height:auto; aspect-ratio:310/245; display:block;
  background:transparent; pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));
}
.nav{ padding-left:calc(clamp(.6rem,1.2vw,1.2rem) + var(--badge-w) + var(--badge-gap)); }
@media (max-width:700px){
  :root{ --badge-w:84px; --badge-gap:.3rem; }
  .site-badge{ top:50%; transform:translateY(-50%); left:.6rem; }
}
/* Losse pagina's zonder navbalk (Crazy Only): badge vast linksboven in beeld */
.site-badge--fixed{ position:fixed; z-index:160; top:10px; }
@media (max-width:700px){ .site-badge--fixed{ top:10px; transform:none; } }

/* Hero-embleem als draaiende 10 jaar-video (transparant): geen afgeronde kader of rand */
.hero__emblem--vid{ aspect-ratio:310/245; border-radius:0 !important; box-shadow:none !important; background:transparent; object-fit:contain; }

/* Affiche-badge als draaiende 10 jaar-video: niet meer extra laten ronddraaien (de video draait zelf) */
.poster__badge--vid{ aspect-ratio:310/245; height:auto; animation:none !important; background:transparent; object-fit:contain; }

/* ===== GSM-verbeteringen (enkel <=700px / <=820px, desktop ongewijzigd) ===== */
@media (max-width:700px){
  .event-section, .footer, .aftermovie.event-section{ padding-top:calc(var(--header-h-mobile) + 3.6rem); padding-bottom:2.2rem; }
  .poster{ padding-top:2rem; padding-bottom:2rem; }
  .section-head, .section-header{ margin-bottom:1rem; gap:.6rem; }
}
@media (max-width:480px){
  .cafes__grid{ grid-template-columns:repeat(2, 1fr); gap:1rem .8rem; }
}
/* Foto's op gsm/tablet: vaste hoogte, foto volledig zichtbaar, pijltjes over de foto */
@media (max-width:820px){
  .photos__carousel{ position:relative; }
  .photos__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; background:rgba(11,7,4,.65); }
  .photos__arrow--prev{ left:.4rem; } .photos__arrow--next{ right:.4rem; }
  .photos__arrow:hover{ transform:translateY(-50%); }
  .photos__viewport{ height:min(118vw, 62vh); }
  .photos__track{ height:100%; }
  .photos .photos__slide, .photos .photos__slide:not(.ph-ph){ height:100%; aspect-ratio:auto; display:flex; align-items:center; justify-content:center; }
  .photos .photos__slide:not(.ph-ph) img{ width:100%; height:100%; object-fit:contain; }
}
@media (max-width:480px){
  .photos .photos__slide, .photos .photos__slide:not(.ph-ph){ flex:0 0 100%; width:100%; }
}
@media (min-width:481px) and (max-width:820px){
  .photos .photos__slide, .photos .photos__slide:not(.ph-ph){ flex:0 0 calc((100% - .8rem) / 2); width:auto; }
}
/* Desktop: cafe-knoppen groter, maar alle zes altijd samen op een scherm */
@media (min-width:821px){
  .cafe-card__logo{ width:clamp(6rem, calc((100vh - 525px) / 2), 13rem); }
  .cafe-card{ max-width:none; }
  .cafes.event-section{ padding-bottom:1rem; }
}

/* ===== Affiche-tekst: datum met de hand aangeduid in fluo geel ===== */
.poster__agenda{ font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--paper) !important; }
.fluo{ position:relative; display:inline-block; z-index:0; color:#171100; font-weight:700; padding:0 .12em; white-space:nowrap; }
.fluo::before{ content:""; position:absolute; z-index:-1; left:-.3em; right:-.38em; top:-.14em; bottom:-.16em;
  transform:rotate(-2deg) skewX(-4deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='r' x='-5%25' y='-20%25' width='110%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.6' numOctaves='2' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='10'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23r)' fill='%23e8ff1a'%3E%3Cpath d='M9 26 C70 15 170 24 290 17 S386 21 393 27 L389 71 C318 80 214 69 118 79 S26 80 11 73 Z' opacity='.93'/%3E%3Cpath d='M22 41 C130 33 262 45 381 35 L386 60 C266 70 148 60 17 69 Z' fill='%23f3ff4d' opacity='.55'/%3E%3Cpath d='M300 22 C340 20 372 22 392 30 L390 66 C372 70 344 72 318 73 Z' opacity='.35'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat; }

/* ===== Footer: MET DANK AAN, 8 logo's die om de 3 seconden inzoomen ===== */
.thanks{ align-self:flex-start; margin-bottom:2.2rem; }
.thanks__title{ font-size:.72rem; letter-spacing:.1em; font-weight:800; color:var(--amber); text-transform:uppercase; margin-bottom:.8rem; }
.thanks__stage{ position:relative; width:clamp(200px,22vw,300px); aspect-ratio:2/1; }
.thanks__slot{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(244,237,225,.3); border-radius:12px; background:rgba(244,237,225,.04);
  color:rgba(244,237,225,.45); font-size:.8rem; letter-spacing:.08em;
  opacity:0; transform:scale(.55); animation:thanksZoom 24s linear infinite; animation-delay:calc(var(--i) * 3s); }
.thanks__slot img{ max-width:88%; max-height:82%; object-fit:contain; }
@keyframes thanksZoom{
  0%{ opacity:0; transform:scale(.55); }
  3%{ opacity:1; transform:scale(.92); }
  10%{ opacity:1; transform:scale(1.06); }
  12.5%{ opacity:0; transform:scale(1.18); }
  100%{ opacity:0; transform:scale(1.18); }
}
@media (prefers-reduced-motion: reduce){ .thanks__slot{ animation:none; } .thanks__slot:first-child{ opacity:1; transform:none; } }
@media (max-width:700px){ .thanks{ margin-bottom:1.6rem; } .thanks__stage{ width:min(70vw,260px); } }

/* ===== Namen cafes en dj's: fijne zwarte rand rond de letters ===== */
.cafe-card__name, .dj-card__name{
  -webkit-text-stroke:1.6px #000; paint-order:stroke fill;
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 2px 8px rgba(0,0,0,.8);
}

/* ===== Partnerlogo's in een kader (Radio Christina, CBAVC) ===== */
.partner-logo{ display:inline-flex; align-items:center; justify-content:center; background:#fff;
  border:3px solid var(--gold); border-radius:14px; padding:.6rem 1rem; margin:.4rem 0 1.2rem;
  box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 22px rgba(255,106,26,.3); transition:transform .25s var(--ease); }
.partner-logo:hover{ transform:translateY(-2px); }
.partner-logo img{ display:block; height:clamp(58px,7vw,90px); width:auto; max-width:100%; }

/* ===== Met dank aan: echte logo's op een wit kader ===== */
.thanks__slot:has(img){ background:#fff; border:3px solid var(--gold); }
.thanks__slot img{ max-width:86%; max-height:78%; object-fit:contain; }

/* ===== DJ-tagline groter ===== */
.djs__tagline{ font-size:calc(var(--title-fs) * .62); }

/* ===== Foto's: titel op een lijn ===== */
.photos__title{ white-space:nowrap; }

/* ===== GSM: geen tweede draaiend logo, Crazy Kroegentocht-logo groter en in het midden ===== */
@media (max-width:700px){
  .hero__emblem{ display:none !important; }
  .nav__logo{ position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:1; }
  .nav__logo-img{ max-height:185px; max-width:52vw; left:0; }
}

/* ===== Gsm-openingsscherm v2 (enkel <=700px): rustiger, feestelijker, 1x de naam ===== */
.hero-m, .hero-fx{ display:none; }
@media (max-width:700px){
  .hero__title, .hero__datebar, .hero__short, .hero__cta, .hero__scroll{ display:none !important; }
  .hero__overlay{ background:
      radial-gradient(ellipse 90% 30% at 50% 11%, rgba(255,214,140,.20), rgba(0,0,0,0) 70%),
      linear-gradient(0deg, rgba(11,7,4,.86) 0%, rgba(11,7,4,.55) 45%, rgba(11,7,4,.45) 70%, rgba(11,7,4,.35) 100%) !important; }
  .hero__content{ padding-top:188px !important; min-height:100svh; box-sizing:border-box; justify-content:space-evenly !important; align-items:center; text-align:center; padding-bottom:1.5rem; }
  .hero-m{ display:flex; flex-direction:column; align-items:center; gap:.3rem; width:100%; position:relative; z-index:2; margin:0; }
  .hero-m__date{ font-family:var(--font-display); color:var(--gold); font-size:clamp(1.9rem, 9.6vw, 2.7rem); line-height:1.05; letter-spacing:.01em; text-transform:uppercase; text-shadow:0 2px 0 #000, 0 0 18px rgba(0,0,0,.85); }
  .hero-m__place{ font-family:var(--font-display); color:var(--gold); font-size:clamp(1.3rem, 6.6vw, 1.9rem); line-height:1.1; text-transform:uppercase; text-shadow:0 2px 0 #000, 0 0 16px rgba(0,0,0,.85); }
  .hero-m__row{ display:flex; align-items:center; justify-content:center; gap:1.1rem; margin:.35rem 0 .2rem; }
  .hero-m__time{ font-family:var(--font-accent); color:var(--gold); font-size:clamp(2.6rem, 13vw, 3.4rem); line-height:1; transform:rotate(-4deg); text-shadow:3px 3px 0 var(--red-deep), 0 0 20px rgba(0,0,0,.8); }
  .hero-m__stamp{ position:relative; width:clamp(92px, 27vw, 118px); transform:rotate(8deg); animation:heroStampPulse 2.8s ease-in-out infinite; }
  .hero-m__stamp img{ display:block; width:100%; height:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.7)); }
  .hero-m__slogan{ font-family:var(--font-accent); color:#fff; font-size:clamp(1.45rem, 7vw, 1.9rem); line-height:1.15; letter-spacing:.02em; margin:.3rem 0 0; text-shadow:2px 2px 0 var(--red), 0 0 16px rgba(0,0,0,.9); }
  .hero-m__slogan span{ color:var(--gold); }
  .hero__actions{ position:relative; z-index:2; width:100%; }
  .hero__actions .btn--ghost{ background:rgba(11,7,4,.45); }

  /* Logo helder uitgelicht: spotlicht erachter + scherpe donkere rand + af en toe een glans */
  .nav__logo::before{ content:""; position:absolute; left:50%; top:46%; width:150%; height:95%; transform:translate(-50%,-50%); background:radial-gradient(ellipse at center, rgba(255,236,200,.55) 0%, rgba(255,190,90,.25) 40%, rgba(0,0,0,0) 70%); pointer-events:none; z-index:-1; }
  .nav__logo-img{ filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 2px 3px rgba(0,0,0,.9)) drop-shadow(0 0 16px rgba(255,220,160,.55)) brightness(1.1) contrast(1.12) !important; }
  .nav__logo::after{ content:""; position:absolute; inset:0; pointer-events:none;
    -webkit-mask:url(../images/crazykroegentocht_logo.png) center/contain no-repeat; mask:url(../images/crazykroegentocht_logo.png) center/contain no-repeat;
    background:linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 60%) no-repeat; background-size:250% 100%; background-position:150% 0;
    animation:heroShine 5.5s ease-in-out 1.2s infinite; mix-blend-mode:screen; }

  /* Confetti + glitter (alleen op het openingsscherm) */
  .hero-fx{ display:block; position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
  .hero-fx i{ position:absolute; top:-5%; display:block; opacity:.9; animation:heroConfetti linear infinite; }
  .hero-fx b{ position:absolute; display:block; color:#fff6d8; font-style:normal; font-weight:400; line-height:1; text-shadow:0 0 6px #ffd66b, 0 0 12px #ffb400; animation:heroTwinkle ease-in-out infinite; opacity:0; }
}
@keyframes heroConfetti{ 0%{ transform:translate3d(0,-10vh,0) rotate(0deg); } 50%{ transform:translate3d(var(--sway,20px),50vh,0) rotate(360deg); } 100%{ transform:translate3d(0,110vh,0) rotate(720deg); } }
@keyframes heroTwinkle{ 0%,100%{ opacity:0; transform:scale(.3) rotate(0deg); } 50%{ opacity:1; transform:scale(1) rotate(45deg); } }
@keyframes heroShine{ 0%{ background-position:150% 0; } 35%,100%{ background-position:-50% 0; } }
@keyframes heroStampPulse{ 0%,100%{ transform:rotate(8deg) scale(1); } 50%{ transform:rotate(8deg) scale(1.07); } }
@media (max-width:700px) and (prefers-reduced-motion: reduce){
  .hero-fx{ display:none; } .nav__logo::after{ animation:none; display:none; } .hero-m__stamp{ animation:none; }
}

/* ===== Gsm-openingsscherm v3: groot, dominant logo in het openingsscherm ===== */
.hero-m__logo{ display:none; }
@media (max-width:700px){
  .hero__content{ padding-top:84px !important; }
  .hero-m__logo{ display:block; position:relative; width:min(100vw, 460px); aspect-ratio:1024/304; margin:0 0 1.8rem; animation:heroLogoIn 1s var(--ease) both; }
  .hero-m__logo::before{ content:""; position:absolute; left:0; right:0; top:-70%; bottom:-70%; background:radial-gradient(ellipse at center, rgba(255,236,200,.5) 0%, rgba(255,190,90,.22) 42%, rgba(0,0,0,0) 70%); pointer-events:none; z-index:-1; }
  .hero-m__logo img{ position:absolute; left:0; top:-104.3%; width:100%; height:auto; display:block;
    filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 3px 4px rgba(0,0,0,.9)) drop-shadow(0 0 22px rgba(255,220,160,.55)) brightness(1.1) contrast(1.12); }
  .hero-m__logo::after{ content:""; position:absolute; left:0; top:-104.3%; width:100%; aspect-ratio:1/1; pointer-events:none;
    -webkit-mask:url(../images/crazykroegentocht_logo.png) 0 0/100% 100% no-repeat; mask:url(../images/crazykroegentocht_logo.png) 0 0/100% 100% no-repeat;
    background:linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 60%) no-repeat; background-size:250% 100%; background-position:150% 0;
    animation:heroShine 5.5s ease-in-out 1.6s infinite; mix-blend-mode:screen; }
  /* Kleine logo in de navbalk verdwijnt zolang het grote logo in beeld is */
  .nav__logo{ transition:opacity .35s ease; }
  body.logo-in-hero .nav__logo{ opacity:0; pointer-events:none; }
}
@keyframes heroLogoIn{ 0%{ opacity:0; transform:scale(.8); } 100%{ opacity:1; transform:scale(1); } }
@media (max-width:700px) and (prefers-reduced-motion: reduce){
  .hero-m__logo{ animation:none; } .hero-m__logo::after{ display:none; }
}

/* ===== Gsm + tablet v4: pagina per pagina, vaste navigatieknop onderaan ===== */
.kt-pager, .poster__fluo, .cafes__slogan, .djs__more{ display:none; }
@media (max-width:700px), (max-width:1024px) and (pointer:coarse){
  html{ scroll-snap-type:y mandatory; }
  /* Elke pagina = precies 1 scherm */
  .hero, .poster, .event-section, .footer{
    min-height:100vh; min-height:100dvh; box-sizing:border-box;
    scroll-snap-align:start; scroll-snap-stop:always;
    display:flex; flex-direction:column; justify-content:center;
    padding-bottom:92px !important; }
  .hero{ padding-bottom:0 !important; }
  .poster{ padding-top:100px !important; }
  .event-section > .wrap, .footer > .wrap, .poster > .wrap{ width:100%; }

  /* Openingsscherm: knoppen weg, de vaste navigatieknop neemt het over */
  .hero__actions{ display:none !important; }
  .hero__content{ padding-bottom:92px !important; }

  /* Vaste navigatieknop */
  .kt-pager{ display:flex; position:fixed; z-index:140; left:50%; transform:translateX(-50%);
    bottom:calc(12px + env(safe-area-inset-bottom, 0px)); width:min(92vw, 460px); height:62px; padding:0 6px;
    align-items:center; justify-content:space-between; gap:6px; border-radius:100px;
    background:var(--red); color:var(--paper); box-shadow:0 10px 28px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18); }
  .kt-pager__arrow{ appearance:none; -webkit-appearance:none; border:0; flex:0 0 50px; width:50px; height:50px; border-radius:50%;
    display:grid; place-items:center; background:rgba(0,0,0,.22); color:var(--paper); cursor:pointer; transition:opacity .2s, transform .15s; }
  .kt-pager__arrow svg{ width:24px; height:24px; }
  .kt-pager__arrow:active{ transform:scale(.92); }
  .kt-pager__arrow[disabled]{ opacity:.28; pointer-events:none; }
  .kt-pager__label{ appearance:none; -webkit-appearance:none; border:0; background:none; color:var(--paper); flex:1; min-width:0;
    font-family:var(--font-body); font-weight:800; font-size:.95rem; letter-spacing:.05em; text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0; cursor:pointer; }
  body:has(.mobile-menu.open) .kt-pager, body:has(.lightbox.is-open) .kt-pager{ opacity:0; pointer-events:none; }

  /* AFFICHE: enkel de affiche + de fluo-zin erover (na 2 seconden) */
  .poster__copy{ display:none !important; }
  .poster__grid{ display:block !important; }
  .poster__art{ position:relative; margin:0 auto; width:fit-content; max-width:100%; }
  .poster__frame img{ display:block; max-height:calc(100dvh - 215px); width:auto; max-width:100%; margin:0 auto; }
  .poster__fluo{ display:block; position:absolute; z-index:3; left:-2%; right:-2%; top:9%; margin:0; text-align:center;
    font-family:var(--font-accent); font-size:clamp(1.35rem, 6.4vw, 2.3rem); line-height:1.12; color:#171100;
    opacity:0; transform:rotate(-9deg) scale(.4); pointer-events:none; }
  .poster__fluo span{ position:relative; display:inline-block; padding:.35em .6em .3em; z-index:0; }
  .poster__fluo span::before{ content:""; position:absolute; z-index:-1; inset:0; transform:skewX(-4deg);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='r' x='-5%25' y='-20%25' width='110%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.6' numOctaves='2' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='10'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23r)' fill='%23e8ff1a'%3E%3Cpath d='M9 8 C70 3 170 9 290 5 S386 7 393 10 L389 90 C318 96 214 88 118 95 S26 96 11 92 Z' opacity='.96'/%3E%3Cpath d='M22 30 C130 22 262 34 381 26 L386 70 C266 80 148 70 17 79 Z' fill='%23f3ff4d' opacity='.55'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
  .poster.fluo-on .poster__fluo{ opacity:1; transform:rotate(-9deg) scale(1);
    transition:opacity .35s ease, transform .7s cubic-bezier(.2,1.7,.4,1); }

  /* CAFÉS: duidelijke slogan */
  .cafes .section-subtitle{ display:none !important; }
  .cafes__slogan{ display:block; margin:.35rem 0 0; font-family:var(--font-accent); color:var(--gold);
    font-size:clamp(1.25rem, 5.8vw, 1.9rem); line-height:1.15; letter-spacing:.02em;
    text-shadow:2px 2px 0 var(--red-deep), 0 0 14px rgba(0,0,0,.9); }
  .cafes .section-head{ margin-bottom:1rem !important; }
  .cafe-card__logo{ width:min(38vw, 17dvh, 200px) !important; }

  /* DJ'S: pagina van 1 scherm, de dj's scrollen binnenin; pijl omlaag slaat ze over */
  #djs{ height:100vh; height:100dvh; min-height:0; justify-content:flex-start; overflow:hidden; }
  #djs .section-subtitle, .dj-card__slot{ display:none !important; }
  #djs .section-head{ margin-bottom:.8rem !important; flex:0 0 auto; }
  #djs .djs__grid{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior-y:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:4.2rem; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 50px), transparent 100%);
            mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 50px), transparent 100%); }
  #djs .djs__grid::-webkit-scrollbar{ display:none; }
  .djs__more{ display:inline-flex; align-items:center; gap:.45rem; position:absolute; z-index:5; left:50%; transform:translateX(-50%);
    bottom:calc(92px + env(safe-area-inset-bottom, 0px)); appearance:none; border:2px solid var(--gold); border-radius:100px;
    background:rgba(11,7,4,.82); color:var(--gold); font-family:var(--font-body); font-weight:800; font-size:.8rem; letter-spacing:.06em;
    padding:.55rem 1.1rem; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.5); transition:opacity .25s; }
  .djs__more svg{ width:16px; height:16px; animation:ktBob 1.4s ease-in-out infinite; }
  .djs__more.is-end svg{ transform:rotate(180deg); animation:none; }
  #djs{ position:relative; }

  /* AFTERMOVIES */
  .am-q{ display:none; }

  /* RADIO + GOED DOEL: logo onder de uitleg, tekst helder */
  .radio .reveal:first-child, .cbavc__panel > div:first-child{ display:flex; flex-direction:column; align-items:flex-start; }
  .radio p, .cbavc p{ order:1; color:#fff !important; opacity:1 !important; font-size:clamp(1rem, 4.3vw, 1.15rem); line-height:1.55;
    text-shadow:0 1px 3px rgba(0,0,0,.9); }
  .radio .partner-logo, .cbavc .partner-logo{ order:2; margin:.4rem 0 1rem; }
  .radio .btn{ order:3; }
  .radio__bars{ display:none !important; }
  .cbavc .section-title br{ display:none; }
  .cbavc .section-title{ white-space:nowrap; font-size:clamp(1.5rem, 7.6vw, 2.6rem); }

  /* INFO */
  .footer, .footer span, .footer a, .footer__bottom span{ color:#fff; opacity:1; }
  .footer__col span, .footer__col a{ font-size:.95rem; text-shadow:0 1px 2px rgba(0,0,0,.8); }
}
@keyframes ktBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } }
@media (max-width:700px), (max-width:1024px) and (pointer:coarse){
  /* Fijnregeling verdeling per pagina */
  .poster.reveal{ transform:none !important; opacity:1 !important; }
  .event-section > .wrap, .footer > .wrap{ display:flex; flex-direction:column; justify-content:center; }
  #djs > .wrap{ flex:0 0 auto !important; }
  .djs__more{ white-space:nowrap; }
  .cafes .section-head{ flex-direction:column !important; align-items:flex-start !important; gap:.2rem !important; }
  .cafes__slogan{ font-size:clamp(1.25rem, 5.8vw, 1.9rem) !important; }
  .cafe-card__logo{ width:min(36vw, 15dvh, 200px) !important; }
  .programma__sheet-wrap{ flex:0 0 auto !important; }
  .programma__sheet tbody th, .programma__sheet tbody td{ height:48px !important; }
  .aftermovie__carousel{ display:grid !important; grid-template-columns:1fr 1fr; grid-template-areas:"vp vp" "prev next"; gap:1rem 1.4rem; align-items:center; }
  .aftermovie__viewport{ grid-area:vp; width:100% !important; height:auto !important; aspect-ratio:16/9; }
  .aftermovie__arrow--prev{ grid-area:prev; justify-self:end; }
  .aftermovie__arrow--next{ grid-area:next; justify-self:start; }
  .radio .partner-logo img, .cbavc .partner-logo img{ height:clamp(76px, 11dvh, 110px) !important; }
  .cbavc__panel{ padding-left:1.1rem !important; padding-right:1.1rem !important; }
  .cbavc .section-title{ font-size:clamp(1.5rem, 8.2vw, 2.6rem) !important; }
  .footer__logo{ display:none !important; }
  .footer__top{ margin:0 !important; padding:0 !important; }
  .footer__cols{ display:grid !important; grid-template-columns:1fr 1fr; gap:1.1rem 1rem; width:100%; }
  .footer__col{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
  .footer__col:nth-child(2){ grid-column:1 / -1; grid-row:2; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:.3rem 1rem; }
  .footer__col:nth-child(2) h4{ width:100%; }
  .footer__col h4{ margin:0 0 .2rem !important; color:var(--gold) !important; }
  .footer__col span, .footer__col a{ font-size:.9rem !important; line-height:1.35; }
  .thanks{ margin:0 0 1.4rem !important; padding:0 !important; }
  .thanks__stage{ width:100% !important; height:130px !important; }
  .footer__bottom{ margin-top:1.4rem !important; padding-top:.8rem !important; justify-content:center; text-align:center; }
  .footer__bottom span:last-child{ display:none; }
}

/* ===== Gsm v4b: alles past ook op kleinere gsm's (bv. iPhone SE) ===== */
@media (max-width:700px){
  .cafe-card__logo{ width:min(34vw, 13dvh, 200px) !important; }
  .programma__sheet tbody th, .programma__sheet tbody td{ height:clamp(32px, calc((100dvh - 400px) / 8), 48px) !important; }
  .photos__viewport, .photos__slide{ height:min(414px, calc(100dvh - 360px)) !important; }
}
@media (max-width:700px) and (max-height:760px){
  .event-section, .footer{ padding-top:124px !important; }
  .cafe-card__logo{ width:min(34vw, 10.5dvh, 200px) !important; }
  .cbavc__panel{ padding-top:1rem !important; padding-bottom:1rem !important; gap:.8rem !important; }
  .cbavc .section-title{ margin-bottom:0 !important; }
  .cbavc p{ font-size:.9rem !important; line-height:1.45 !important; }
  .radio p{ font-size:.95rem !important; line-height:1.45 !important; }
  .radio .partner-logo img, .cbavc .partner-logo img{ height:64px !important; }
  .cbavc .partner-logo{ margin-bottom:.2rem !important; }
  .cbavc__actions{ flex-direction:row !important; flex-wrap:wrap; gap:.6rem !important; align-items:center; margin-top:.6rem !important; }
  .cbavc__actions .btn{ width:auto !important; padding:.8rem 1.2rem !important; }
  .thanks__stage{ height:80px !important; }
  .thanks{ margin-bottom:.8rem !important; }
  .footer__bottom{ margin-top:.8rem !important; }
  .footer__cols{ gap:.7rem 1rem !important; }
}

/* ===== v5: fijnafstelling gsm + links naar cafés/radio in eigen venster ===== */
.poster__note, .djs__nav, .prog-arrow{ display:none; }

/* Venster waarin een café- of radiosite opent, zonder de Crazy-site te verlaten (alle schermen) */
.kt-viewer{ position:fixed; inset:0; z-index:400; display:none; flex-direction:column; background:var(--ink); }
.kt-viewer.is-open{ display:flex; }
.kt-viewer__bar{ flex:0 0 auto; display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; padding-top:calc(.55rem + env(safe-area-inset-top, 0px));
  background:var(--red); box-shadow:0 4px 14px rgba(0,0,0,.5); }
.kt-viewer__back{ appearance:none; border:0; flex:1; min-width:0; display:flex; align-items:center; gap:.5rem; background:rgba(0,0,0,.22); color:var(--paper);
  font-family:var(--font-body); font-weight:800; font-size:.85rem; letter-spacing:.04em; padding:.7rem 1rem; border-radius:100px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kt-viewer__back svg{ width:18px; height:18px; flex:0 0 auto; }
.kt-viewer__ext{ flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.22); color:var(--paper); }
.kt-viewer__ext svg{ width:18px; height:18px; }
.kt-viewer__frame{ flex:1 1 auto; width:100%; border:0; background:#fff; }
.kt-viewer__hint{ flex:0 0 auto; margin:0; padding:.55rem .8rem calc(.55rem + env(safe-area-inset-bottom, 0px)); background:#1a120c; color:#f4ede1;
  font-family:var(--font-body); font-size:.8rem; text-align:center; }
.kt-viewer__hint a{ color:var(--gold); font-weight:800; text-decoration:underline; }
html.kt-viewer-open, html.kt-viewer-open body{ overflow:hidden !important; }
.cafe-card[data-url] .cafe-card__logo{ cursor:pointer; transition:transform .2s var(--ease); }
.cafe-card[data-url] .cafe-card__logo:hover{ transform:scale(1.04); }
.cafe-card[data-url] .cafe-card__logo:focus-visible{ outline:3px solid var(--gold); outline-offset:4px; border-radius:50%; }

@media (max-width:700px), (max-width:1024px) and (pointer:coarse){
  body:has(.kt-viewer.is-open) .kt-pager{ display:none !important; }

  /* AFFICHE: handgeschreven zin over de dj-blokken, enkel de datum in fluo */
  .poster__fluo{ display:none !important; }
  .poster__note{ display:block; position:absolute; z-index:3; left:-4%; right:-4%; top:50%; margin:0; text-align:center;
    font-family:'Permanent Marker', var(--font-accent); font-weight:400; color:#111; font-size:clamp(1.2rem, 5.9vw, 2.2rem); line-height:1.2;
    text-shadow:2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 2px 2px #fff, -2px -2px #fff, 2px -2px #fff, -2px 2px #fff,
                3px 0 #fff, -3px 0 #fff, 0 3px #fff, 0 -3px #fff, 3px 3px #fff, -3px -3px #fff, 3px -3px #fff, -3px 3px #fff,
                0 8px 18px rgba(0,0,0,.55);
    opacity:0; transform:rotate(-8deg) scale(.5); pointer-events:none; }
  .poster__note .fluo{ text-shadow:none; color:#111; font-weight:400; }
  .poster.fluo-on .poster__note{ opacity:1; transform:rotate(-8deg) scale(1); transition:opacity .35s ease, transform .7s cubic-bezier(.2,1.7,.4,1); }

  /* DJ'S: eigen knop met pijl omhoog en omlaag om door de dj's te gaan */
  .djs__more{ display:none !important; }
  .djs__nav{ display:flex; align-items:center; gap:.3rem; position:absolute; z-index:5; left:50%; transform:translateX(-50%);
    bottom:calc(88px + env(safe-area-inset-bottom, 0px)); padding:4px; border:2px solid var(--gold); border-radius:100px;
    background:rgba(11,7,4,.88); box-shadow:0 6px 16px rgba(0,0,0,.55); }
  .djs__nav span{ font-family:var(--font-body); font-weight:800; font-size:.78rem; letter-spacing:.08em; color:var(--gold); padding:0 .35rem; white-space:nowrap; }
  .djs__nav button{ appearance:none; border:0; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
    background:var(--gold); color:#171100; cursor:pointer; transition:opacity .2s, transform .15s; }
  .djs__nav button svg{ width:20px; height:20px; }
  .djs__nav button:active{ transform:scale(.9); }
  .djs__nav button[disabled]{ opacity:.25; pointer-events:none; }

  /* PROGRAMMA: opvallende, knipperende pijlen links en rechts van het raster */
  .prog-box{ position:relative; }
  .prog-arrow{ display:grid; place-items:center; position:absolute; z-index:6; top:50%; width:44px; height:44px; margin-top:-22px; border-radius:50%;
    border:0; appearance:none; background:var(--gold); color:#171100; cursor:pointer;
    box-shadow:0 0 0 3px rgba(11,7,4,.85), 0 6px 16px rgba(0,0,0,.6); animation:progBlink 1.1s ease-in-out infinite; transition:opacity .25s; }
  .prog-arrow svg{ width:24px; height:24px; }
  .prog-arrow--l{ left:-10px; } .prog-arrow--r{ right:-10px; }
  .prog-arrow[disabled]{ opacity:0; pointer-events:none; animation:none; }

  /* INFO: partners onderaan weg (staan al bij 'Met dank aan') */
  .footer__col:nth-child(2){ display:none !important; }
}
@keyframes progBlink{ 0%,100%{ opacity:1; transform:scale(1); box-shadow:0 0 0 3px rgba(11,7,4,.85), 0 0 0 0 rgba(242,201,76,.7); }
  50%{ opacity:.55; transform:scale(.9); box-shadow:0 0 0 3px rgba(11,7,4,.85), 0 0 0 10px rgba(242,201,76,0); } }
@media (prefers-reduced-motion: reduce){ .prog-arrow{ animation:none; } }

/* ===== Boekingskantoor: definitief programma op de publieke site ===== */
.programma__sheet.is-live td.prog-dj{ color:#fff; font-weight:800; font-size:.82rem; line-height:1.25; text-align:center; vertical-align:middle; text-shadow:0 1px 2px rgba(0,0,0,.75); border-radius:6px; }
.programma__sheet.is-live td.prog-dj i{ font-style:normal; color:var(--gold); margin:0 .3em; }
.programma__sheet.is-live td.prog-free{ background:transparent; }
.dj-card__ph--initials{ display:grid; place-items:center; width:100%; height:100%; aspect-ratio:3/4; font-family:var(--font-display); font-size:clamp(2rem,6vw,3.2rem); color:var(--gold); background:radial-gradient(circle at 50% 40%, #2a1c12, #120b07); }

/* ===== v6: fijnafstelling gsm (affiche, ondertitels, programma, pijltjes) ===== */
.sub-x{ display:inline; }
.m-br{ display:none; }
@media (max-width:700px), (max-width:1024px) and (pointer:coarse){
  /* AFFICHE: geen 10 jaar-logo naast de affiche */
  .poster__badge{ display:none !important; }

  /* ONDERTITELS: overal zoals bij de dj's (geel, zelfde lettertype), altijd op 1 regel */
  .sub-x{ display:none; }
  .m-br{ display:revert; }
  .djs__tagline{ line-height:1.15 !important; }
  .cafes__slogan, .djs__tagline, .aftermovie .section-subtitle, .photos .section-subtitle{
    display:block !important; width:100%; max-width:none !important; margin:.25rem 0 0 !important; padding:0 !important;
    font-family:var(--font-accent) !important; font-weight:400 !important; text-transform:none; letter-spacing:.01em;
    color:var(--gold) !important; opacity:1 !important; white-space:nowrap; overflow:hidden; line-height:1.2 !important;
    font-size:var(--sub-fs, 1.2rem) !important;
    -webkit-text-stroke:.6px rgba(0,0,0,.85);
    text-shadow:0 1px 1px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.7), 0 0 4px rgba(242,201,76,.4), 0 0 1px rgba(242,201,76,.6);
    animation:djsTaglineFlare 7s ease-in-out infinite; }

  /* PROGRAMMA: smalle urenkolom, telkens 2 volledige cafés, pijlen bovenaan naast de cafés */
  #programma > .wrap{ padding-inline:0 !important; }
  .prog-box{ --phour:52px; }
  .programma__sheet-wrap{ scroll-snap-type:x mandatory; scroll-padding-left:var(--phour); overscroll-behavior-x:contain; }
  .programma__sheet{ table-layout:fixed; min-width:0 !important; width:calc(var(--phour) + 6 * var(--pcol, 130px)) !important; }
  .programma__corner, .programma__hour{ width:var(--phour) !important; min-width:var(--phour) !important; max-width:var(--phour) !important;
    padding:.2rem .3rem !important; font-size:.82rem !important; text-align:center !important; background:#0b0704 !important; z-index:4 !important; }
  .programma__corner{ font-size:0 !important; z-index:5 !important; }
  .programma__hour--last{ font-size:.62rem !important; white-space:normal !important; line-height:1.05; }
  .programma__sheet thead th:not(.programma__corner){ width:var(--pcol, 130px); scroll-snap-align:start; }
  .programma__sheet td{ white-space:normal !important; overflow:hidden; overflow-wrap:anywhere; padding:.25rem .35rem !important; }
  .prog-arrow{ top:34px !important; margin-top:-18px !important; width:36px !important; height:36px !important; }
  .prog-arrow svg{ width:20px !important; height:20px !important; }
  .prog-arrow--l{ left:-12px !important; } .prog-arrow--r{ right:-12px !important; }

  /* AFTERMOVIES + FOTO'S: dezelfde gele knipperende pijlen als bij het programma */
  .aftermovie__arrow, .photos__arrow{ width:44px !important; height:44px !important; border:0 !important; border-radius:50% !important;
    background:var(--gold) !important; color:#171100 !important; cursor:pointer;
    box-shadow:0 0 0 3px rgba(11,7,4,.85), 0 6px 16px rgba(0,0,0,.6); animation:progBlink 1.1s ease-in-out infinite; }
  .aftermovie__arrow svg, .photos__arrow svg{ width:24px !important; height:24px !important; stroke-width:3.2; }
  .photos__arrow{ margin-top:-22px; }
  .aftermovie__arrow:disabled, .photos__arrow:disabled{ opacity:0 !important; animation:none; pointer-events:none; }
}
@media (prefers-reduced-motion: reduce){ .aftermovie__arrow, .photos__arrow{ animation:none !important; } .photos__arrow{ transform:none !important; } }

/* ===== v7: desktop gelijk aan gsm (openingspagina, navigatieknop, affiche, ondertitels, dj-namen) ===== */
.dj-card__slot{ display:none !important; }
.dj-card__name{ font-size:clamp(.9rem, 1.45vw, 1.3rem) !important; letter-spacing:.03em; -webkit-text-stroke:1px #000; margin-top:.35rem; }
.sub-x{ display:none !important; }
.hero-m__welcome{ display:none; }
.poster__badge{ display:none !important; }
@media (min-width:1025px), (min-width:701px) and (pointer:fine){
  /* OPENINGSPAGINA zoals op gsm, met de welkomsttekst eronder */
  .hero__title, .hero__datebar, .hero__short, .hero__cta, .hero__scroll, .hero__emblem, .hero__actions{ display:none !important; }
  .hero{ justify-content:center !important; }
  .hero__overlay{ background:
      radial-gradient(ellipse 60% 32% at 50% 22%, rgba(255,214,140,.18), rgba(0,0,0,0) 70%),
      linear-gradient(0deg, rgba(11,7,4,.86) 0%, rgba(11,7,4,.55) 45%, rgba(11,7,4,.45) 70%, rgba(11,7,4,.35) 100%) !important; }
  .hero__content{ min-height:100vh; min-height:100svh; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
    padding-top:calc(var(--header-h-desktop) + .5rem) !important; padding-bottom:96px !important; }
  .hero-m{ display:flex; flex-direction:column; align-items:center; gap:.3rem; width:100%; position:relative; z-index:2; margin:0; }
  .hero-m__logo{ display:block; position:relative; width:min(560px, 44vw, 58vh); aspect-ratio:1024/304; margin:0 0 1.2rem; animation:heroLogoIn 1s var(--ease) both; }
  .hero-m__logo::before{ content:""; position:absolute; left:0; right:0; top:-70%; bottom:-70%; background:radial-gradient(ellipse at center, rgba(255,236,200,.5) 0%, rgba(255,190,90,.22) 42%, rgba(0,0,0,0) 70%); pointer-events:none; z-index:-1; }
  .hero-m__logo img{ position:absolute; left:0; top:-104.3%; width:100%; height:auto; display:block;
    filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 3px 4px rgba(0,0,0,.9)) drop-shadow(0 0 22px rgba(255,220,160,.55)) brightness(1.1) contrast(1.12); }
  .hero-m__logo::after{ content:""; position:absolute; left:0; top:-104.3%; width:100%; aspect-ratio:1/1; pointer-events:none;
    -webkit-mask:url(../images/crazykroegentocht_logo.png) 0 0/100% 100% no-repeat; mask:url(../images/crazykroegentocht_logo.png) 0 0/100% 100% no-repeat;
    background:linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 60%) no-repeat; background-size:250% 100%; background-position:150% 0;
    animation:heroShine 5.5s ease-in-out 1.6s infinite; mix-blend-mode:screen; }
  .hero-m__date{ font-family:var(--font-display); color:var(--gold); font-size:clamp(2rem, 5.4vh, 3.4rem); line-height:1.05; letter-spacing:.01em; text-transform:uppercase; text-shadow:0 2px 0 #000, 0 0 18px rgba(0,0,0,.85); }
  .hero-m__place{ font-family:var(--font-display); color:var(--gold); font-size:clamp(1.4rem, 3.7vh, 2.3rem); line-height:1.1; text-transform:uppercase; text-shadow:0 2px 0 #000, 0 0 16px rgba(0,0,0,.85); }
  .hero-m__row{ display:flex; align-items:center; justify-content:center; gap:1.4rem; margin:.4rem 0 .2rem; }
  .hero-m__time{ font-family:var(--font-accent); color:var(--gold); font-size:clamp(2.6rem, 7.4vh, 4.4rem); line-height:1; transform:rotate(-4deg); text-shadow:3px 3px 0 var(--red-deep), 0 0 20px rgba(0,0,0,.8); }
  .hero-m__stamp{ position:relative; width:clamp(96px, 15vh, 150px); transform:rotate(8deg); animation:heroStampPulse 2.8s ease-in-out infinite; }
  .hero-m__stamp img{ display:block; width:100%; height:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.7)); }
  .hero-m__slogan{ font-family:var(--font-accent); color:#fff; font-size:clamp(1.5rem, 4.2vh, 2.5rem); line-height:1.15; letter-spacing:.02em; margin:.3rem 0 0; text-shadow:2px 2px 0 var(--red), 0 0 16px rgba(0,0,0,.9); }
  .hero-m__slogan span{ color:var(--gold); }
  .hero-m__welcome{ display:block; max-width:68ch; margin:1.1rem auto 0; }
  .hero-m__welcome p{ margin:0 0 .25rem; color:#fff; font-size:clamp(.95rem, 2vh, 1.2rem); line-height:1.5; text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.7); }
  .hero-fx{ display:block; position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
  .hero-fx i{ position:absolute; top:-5%; display:block; opacity:.9; animation:heroConfetti linear infinite; }
  .hero-fx b{ position:absolute; display:block; color:#fff6d8; font-style:normal; font-weight:400; line-height:1; text-shadow:0 0 6px #ffd66b, 0 0 12px #ffb400; animation:heroTwinkle ease-in-out infinite; opacity:0; }
  .nav__logo{ transition:opacity .35s ease; }
  body.logo-in-hero .nav__logo{ opacity:0; pointer-events:none; }

  /* VASTE RODE NAVIGATIEKNOP onderaan, pagina per pagina */
  .kt-pager{ display:flex; position:fixed; z-index:140; left:50%; transform:translateX(-50%); bottom:18px; width:min(92vw, 460px); height:62px; padding:0 6px;
    align-items:center; justify-content:space-between; gap:6px; border-radius:100px;
    background:var(--red); color:var(--paper); box-shadow:0 10px 28px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18); }
  .kt-pager__arrow{ appearance:none; -webkit-appearance:none; border:0; flex:0 0 50px; width:50px; height:50px; border-radius:50%;
    display:grid; place-items:center; background:rgba(0,0,0,.22); color:var(--paper); cursor:pointer; transition:opacity .2s, transform .15s, background .2s; }
  .kt-pager__arrow:hover{ background:rgba(0,0,0,.38); }
  .kt-pager__arrow svg{ width:24px; height:24px; }
  .kt-pager__arrow:active{ transform:scale(.92); }
  .kt-pager__arrow[disabled]{ opacity:.28; pointer-events:none; }
  .kt-pager__label{ appearance:none; -webkit-appearance:none; border:0; background:none; color:var(--paper); flex:1; min-width:0;
    font-family:var(--font-body); font-weight:800; font-size:1rem; letter-spacing:.05em; text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0; cursor:pointer; }
  body:has(.mobile-menu.open) .kt-pager, body:has(.lightbox.is-open) .kt-pager, body:has(.kt-viewer.is-open) .kt-pager{ opacity:0; pointer-events:none; }
  .event-section, .footer{ padding-bottom:max(var(--section-pad-y), 100px) !important; }

  /* AFFICHE: past volledig in het scherm, titel gecentreerd zonder los woord */
  .poster{ min-height:100vh; min-height:100svh; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center;
    padding-top:calc(var(--header-h-desktop) + 1.5rem) !important; padding-bottom:100px !important; }
  .poster__grid{ grid-template-columns:auto 1fr !important; align-items:center; }
  .poster__art{ justify-self:center; }
  .poster__frame img{ display:block; width:auto; max-width:100%; max-height:calc(100vh - var(--header-h-desktop) - 190px); max-height:calc(100svh - var(--header-h-desktop) - 190px); }
  .poster__copy{ text-align:center; display:flex; flex-direction:column; align-items:center; }
  .poster__copy .eyebrow{ display:none !important; }
  .poster__copy h3{ white-space:nowrap; font-size:clamp(1.5rem, 3.2vw, 3.2rem); }
  .poster__copy p{ margin-inline:auto; }
  .poster__facts{ justify-content:center; }

  /* ONDERTITELS: zoals de dj-zin (geel, zelfde lettertype), op 1 regel */
  .cafes .section-head, .aftermovie .section-head, .photos .section-head{ flex-direction:column; align-items:flex-start; gap:.25rem; }
  .cafes .section-subtitle, .aftermovie .section-subtitle, .photos .section-subtitle, .djs__tagline{
    max-width:none; padding-top:0; font-family:var(--font-accent) !important; font-weight:400; text-transform:none; letter-spacing:.01em;
    color:var(--gold) !important; opacity:1; white-space:nowrap; overflow:hidden; line-height:1.2;
    font-size:var(--sub-fs, calc(var(--title-fs) * .62)) !important;
    -webkit-text-stroke:.6px rgba(0,0,0,.85);
    text-shadow:0 1px 1px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.7), 0 0 4px rgba(242,201,76,.4), 0 0 1px rgba(242,201,76,.6);
    animation:djsTaglineFlare 7s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce){ .hero-fx{ display:none !important; } .hero-m__stamp{ animation:none !important; } }

/* ===== v8: desktop fijnafstelling (openingspagina compacter, affiche groter en klikbaar, dj's, programma) ===== */
.poster__frame img[data-full]{ cursor:zoom-in; }
@media (min-width:1025px), (min-width:701px) and (pointer:fine){
  .hero-m{ gap:.15rem !important; }
  .hero-m__logo{ width:min(520px, 40vw, 44vh) !important; margin:0 0 .8rem !important; }
  .hero-m__date{ font-size:clamp(1.6rem, 4.5vh, 3.2rem) !important; }
  .hero-m__place{ font-size:clamp(1.15rem, 3vh, 2.1rem) !important; }
  .hero-m__row{ margin:.15rem 0 0 !important; }
  .hero-m__time{ font-size:clamp(2.1rem, 6vh, 4rem) !important; }
  .hero-m__stamp{ width:clamp(78px, 12vh, 140px) !important; }
  .hero-m__slogan{ font-size:clamp(1.25rem, 3.4vh, 2.3rem) !important; }
  .hero-m__welcome{ max-width:min(94vw, 1150px) !important; margin:.6rem auto 0 !important; }
  .hero-m__welcome p{ font-size:clamp(.85rem, 1.7vh, 1.1rem) !important; line-height:1.4 !important; margin:0 !important; }
  .hero__content{ padding-bottom:100px !important; }

  /* AFFICHE: groter */
  .poster{ padding-top:calc(var(--header-h-desktop) + .6rem) !important; padding-bottom:88px !important; }
  .poster__frame img{ max-height:calc(100vh - var(--header-h-desktop) - 115px) !important; max-height:calc(100svh - var(--header-h-desktop) - 115px) !important; }

  /* DJ'S: alle kaartjes meteen zichtbaar (geen los kaartje meer rechtsonder) */
  #djs .dj-card.reveal{ opacity:1 !important; transform:none !important; }

  /* PROGRAMMA: gelijke kolommen per café, en het hele raster boven de rode knop */
  .programma__sheet{ table-layout:fixed; min-width:0 !important; width:100% !important; }
  .programma__corner{ width:5.5rem; }
  .programma__sheet tbody th, .programma__sheet tbody td{ height:clamp(30px, calc((100vh - 450px) / 8), 52px) !important; }
}

/* ===== v9: desktop openingspagina in twee kolommen (voller), programma hoger ===== */
@media (min-width:1025px), (min-width:701px) and (pointer:fine){
  .hero__content{ padding:calc(var(--header-h-desktop) + 1rem) clamp(1.5rem, 5vw, 6rem) 104px !important; justify-content:center !important; }
  .hero-m{ display:grid !important; width:min(100%, 1380px); margin:0 auto !important;
    grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
    grid-template-areas:"logo row" "date row" "place slogan" "welcome welcome";
    column-gap:clamp(2rem, 5vw, 6rem); row-gap:.2rem; align-items:center; justify-items:center; }
  .hero-m__logo{ grid-area:logo; width:min(660px, 42vw, 58vh) !important; margin:0 0 .6rem !important; }
  .hero-m__date{ grid-area:date; font-size:clamp(2rem, 6.2vh, 4.2rem) !important; }
  .hero-m__place{ grid-area:place; align-self:start; font-size:clamp(1.3rem, 4vh, 2.8rem) !important; }
  .hero-m__row{ grid-area:row; align-self:end; gap:clamp(1rem, 2.5vw, 2.4rem) !important; margin:0 !important; }
  .hero-m__time{ font-size:clamp(3rem, 11vh, 7rem) !important; }
  .hero-m__stamp{ width:clamp(120px, 23vh, 230px) !important; }
  .hero-m__slogan{ grid-area:slogan; align-self:start; font-size:clamp(1.5rem, 4.6vh, 3rem) !important; margin:.4rem 0 0 !important; }
  .hero-m__welcome{ grid-area:welcome; max-width:min(100%, 1060px) !important; margin:clamp(1.2rem, 3.5vh, 2.4rem) auto 0 !important;
    padding:clamp(.9rem, 2vh, 1.4rem) clamp(1.2rem, 3vw, 2.4rem); border-radius:18px;
    background:linear-gradient(135deg, rgba(11,7,4,.72), rgba(60,12,8,.55)); border:1px solid rgba(242,201,76,.45);
    box-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(6px); }
  .hero-m__welcome p{ font-size:clamp(.95rem, 2.1vh, 1.25rem) !important; line-height:1.5 !important; }
  .hero-m__welcome p:first-child{ font-weight:700; color:var(--gold); }

  /* PROGRAMMA: titel dichter onder de navbalk, raster volledig boven de rode knop */
  #programma{ padding-top:calc(var(--header-h-desktop) + 1.2rem) !important; justify-content:flex-start !important; }
  #programma .section-head{ margin-bottom:1rem !important; }
  .programma__sheet thead th{ height:64px !important; }
  .programma__sheet tbody th, .programma__sheet tbody td{ height:clamp(28px, calc((100vh - 370px) / 8), 56px) !important; }
}

/* ===== v10: desktop openingspagina volgens Rafs schets: slogan links, logo centraal, stempel rechts ===== */
@media (min-width:1025px), (min-width:701px) and (pointer:fine){
  .hero-m{ grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr) !important;
    grid-template-areas:"slogan logo row" "slogan date row" "slogan place row" "welcome welcome welcome" !important;
    column-gap:clamp(1.5rem, 3.5vw, 4.5rem) !important; row-gap:0 !important; width:min(100%, 1500px) !important; }
  .hero-m__logo{ width:min(700px, 40vw, 56vh) !important; margin:0 0 .4rem !important; }
  .hero-m__date{ font-size:clamp(2.2rem, 7.4vh, 5rem) !important; line-height:1 !important; }
  .hero-m__place{ font-size:clamp(1.9rem, 6.4vh, 4.3rem) !important; line-height:1.05 !important; align-self:center !important;
    text-shadow:0 2px 0 #000, 3px 3px 0 var(--red-deep), 0 0 18px rgba(0,0,0,.85) !important; }
  .hero-m__slogan{ grid-area:slogan; align-self:center !important; justify-self:end; margin:0 !important;
    font-size:clamp(1.5rem, 4.6vh, 3rem) !important; line-height:1.15 !important; padding:clamp(.9rem, 2.2vh, 1.5rem) clamp(1.1rem, 1.8vw, 2rem);
    background:linear-gradient(135deg, rgba(14,16,40,.92), rgba(30,10,24,.88)); border:2px solid rgba(242,201,76,.65); border-radius:14px;
    transform:rotate(-4deg); box-shadow:0 18px 40px rgba(0,0,0,.6), 0 0 26px rgba(242,201,76,.25); }
  .hero-m__row{ grid-area:row; align-self:center !important; justify-self:start; flex-direction:column-reverse !important; gap:.2rem !important; }
  .hero-m__stamp{ width:clamp(150px, 27vh, 280px) !important; }
  .hero-m__time{ font-size:clamp(2.6rem, 8vh, 5.4rem) !important; transform:rotate(-6deg) translateX(-.4em) !important; }
  .hero-m__welcome{ margin-top:clamp(1rem, 3vh, 2rem) !important; max-width:min(100%, 1200px) !important; }
}

/* ===== v11: desktop: 'Centrum' enkel in het paneel links, Heist-op-den-Berg groter ===== */
@media (min-width:1025px), (min-width:701px) and (pointer:fine){
  .hero-m__c{ display:none; }
  .hero-m__place{ font-size:clamp(2.4rem, 8.6vh, 5.8rem) !important; line-height:1 !important; }
}

/* ===== v12: desktop: aftermovie en foto's groter, minder lege ruimte ===== */
@media (min-width:1025px), (min-width:701px) and (pointer:fine){
  #aftermovie, #fotos{ padding-top:calc(var(--header-h-desktop) + 1.2rem) !important; justify-content:flex-start !important; }
  #aftermovie .section-head, #fotos .section-head{ margin-bottom:1rem !important; }
  .aftermovie__viewport{ width:min(74vw, calc((100vh - 330px) * 16 / 9)) !important; height:auto !important; aspect-ratio:16/9; }
  .photos__carousel{ height:calc(100vh - 330px) !important; height:calc(100svh - 330px) !important; }
}

/* ===== v13: desktop, dj-navigatie naast de rode balk, gele knipperpijlen bij aftermovie en foto's ===== */
@media (min-width:1025px), (min-width:701px) and (pointer:fine){
  /* DJ'S: pagina van 1 scherm, de dj's scrollen binnenin */
  #djs{ height:100vh; min-height:0 !important; justify-content:flex-start; overflow:hidden;
    padding-top:calc(var(--header-h-desktop) + 1.2rem) !important; padding-bottom:0 !important; }
  #djs .section-head{ flex:0 0 auto; margin-bottom:.8rem !important; }
  #djs .djs__grid{ flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:none; padding-bottom:96px; grid-template-columns:repeat(7, 1fr);
    -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 60px), transparent 100%);
            mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 60px), transparent 100%); }
  #djs .djs__grid::-webkit-scrollbar{ display:none; }
  .djs__more{ display:none !important; }
  .djs__nav{ display:flex; align-items:center; gap:.3rem; position:absolute; z-index:5; left:calc(50% + 244px); bottom:23px; transform:none;
    padding:4px; border:2px solid var(--gold); border-radius:100px; background:rgba(11,7,4,.92); box-shadow:0 6px 16px rgba(0,0,0,.6); }
  .djs__nav span{ font-family:var(--font-body); font-weight:800; font-size:.8rem; letter-spacing:.08em; color:var(--gold); padding:0 .4rem; white-space:nowrap; }
  .djs__nav button{ appearance:none; border:0; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
    background:var(--gold); color:#171100; cursor:pointer; transition:opacity .2s, transform .15s; }
  .djs__nav button svg{ width:20px; height:20px; }
  .djs__nav button:active{ transform:scale(.9); }
  .djs__nav button[disabled]{ opacity:.25; pointer-events:none; }

  /* AFTERMOVIES + FOTO'S: dezelfde gele knipperende pijlen als op gsm */
  .aftermovie__arrow, .photos__arrow{ width:52px !important; height:52px !important; border:0 !important; border-radius:50% !important;
    background:var(--gold) !important; color:#171100 !important; cursor:pointer;
    box-shadow:0 0 0 3px rgba(11,7,4,.85), 0 6px 16px rgba(0,0,0,.6); animation:progBlink 1.1s ease-in-out infinite; }
  .aftermovie__arrow svg, .photos__arrow svg{ width:28px !important; height:28px !important; stroke-width:3.2; }
  .photos__arrow{ margin-top:-26px; }
  .aftermovie__arrow:disabled, .photos__arrow:disabled{ opacity:0 !important; animation:none; pointer-events:none; }
}
@media (prefers-reduced-motion: reduce){ .aftermovie__arrow, .photos__arrow{ animation:none !important; } }
/* Affiche: geen verschuiving bij het inschuiven, zodat de link 'Affiche' juist uitkomt */
#affiche.reveal{ transform:none !important; }
/* Desktop: knop Gratis inkom iets kleiner */
@media (min-width:1025px), (min-width:701px) and (pointer:fine){ .hero-m__stamp{ width:clamp(115px, 20vh, 210px) !important; } }