/*# =========================
    © 2025 LXON. Alle rechten voorbehouden. Het gebruik of delen van deze code, 
    geheel of gedeeltelijk, is niet toegestaan zonder schriftelijke toestemming van LXON. 

    Deze code vertegenwoordigt een zorgvuldig ontwikkelde intellectuele inspanning van LXON, 
    en het behoud van exclusieve rechten is belangrijk om de integriteit van ons werk te waarborgen. 
    Het ongeoorloofd kopiëren, aanpassen of verspreiden van deze code kan leiden tot inbreuk op onze auteursrechten.
    
    We moedigen samenwerking en het delen van kennis aan. 
    Mocht u interesse hebben in het gebruik van deze code of delen ervan, 
    neem dan alstublieft contact met ons op via info@zuidbroekatthepark.nl. 
    We staan open voor overleg en samenwerking, 
    en kunnen passende toestemming verlenen indien dit wederzijds overeengekomen is.
    
    Bedankt voor uw begrip en respect voor ons creatieve werk.
# ========================= */


/* =========================
   DESIGN TOKENS (VARS & PALETTE)
========================= */
:root{
  /* Core brand */
  --primary: #8ec152;               /* hoofdgroen */
  --primary-rgb: 142, 193, 82;
  --brand: #0b7d36;                 /* festivalgroen */
  --brand-rgb: 11, 125, 54;

  /* Text & surfaces */
  --text: #0e2a25;                  /* antraciet (body tekst) */
  --muted: #6b6b6b;                 /* secundaire tekst */
  --paper: #ffffff;
  --bg: #f7f7fb;

  /* Headings */
  --heading: #0e2a25;               /* expliciet voor h1,h2 */

  /* Festival accenten */
  --orange: #d67934;
  --pink: var(--brand);
  --yellow: #eac324;
  --aqua: #ff4d8a;                  /* energiek roze */
  --violet: #7b61ff;
  --red: #741530;

  /* Kids */
  --kids-geel: #fcbd52;
  --kids-paars: #8684bf;
  --kids-groen: #5ebb6b;
  --kids-aqua: #27b9a4;
  --kids-wit: #f3f9fb;

  /* Halloween */
  --hallo-orange: #d67934;
  --hallo-paars: #46284f;
  --hallo-groen: #637955;
  --hallo-grijs: #616870;
  --hallo-wit: #eae9e2;

  /* Kerst */
  --kerst-groen: #145948;
  --kerst-rood: #741530;
  --kerst-wit: #deecea;
  --kerst-bruin: #5ebb6b;
  --kerst-zand: #af8c4e;

  /* Color blocks */
  --cb-light-blue: var(--primary);
  --cb-light-kids: #fcbd52;
  --cb-dark-kids: #5ebb6b;
  --cb-dark-blue: #0e2a25;
  --cb-brand: var(--brand);
  --cb-kerst: #1d4f41;
  --cb-red: #5f1d2c;
  --cb-purple: #38243e;
  --cb-white: #ffffff;
  --cb-bruin: var(--kerst-bruin);
  --cb-zand: #af8c4e;

  /* Overlays & shadows */
  --overlay-primary: rgba(var(--primary-rgb), .65);
  --overlay-dark: rgba(0,0,0,.45);
  --shadow: 0 10px 24px rgba(0,0,0,.08);

  /* Radius */
  --radius: 18px;

  /* Typografie */
  --fs-base: 1.1rem;
  --lh-base: 1.7;

  /* Menu */
  --menu-color: #fff;
  --menu-accent: var(--brand);
  --menu-gap: 8px;
  --menu-fs: 1.8rem;
  --menu-fs-lg: 2rem;
}



/* =========================
   FONTS
========================= */
@font-face {
  font-family: 'SocialGothic';
  src: url('../fonts/social-gothic-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SocialGothic';
  src: url('../fonts/social-gothic-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.lxon-word{
  font-family: 'SocialGothic', sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
}


/* =========================
   RESET & BASE
========================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  max-width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
}

button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
}

/* Headings = SocialGothic Bold */
h1, h2, h3, h4, h5, h6 {
  font-family: 'SocialGothic', sans-serif;
  font-weight: 700;
}
h1, h2 { color: var(--heading); }
h3, h4, h5, h6 { color: var(--primary); }

/* Globale typografie (behalve .news) */
body :where(:not(.news) *) :where(
  p, li, a, small, label, input, textarea, select, button,
  blockquote, figcaption, address, dd, dt
){
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
}

/* SocialGothic helpers */
.sg-inline,
.sg-bold {
  font-family: 'SocialGothic', sans-serif !important;
  font-weight: 700;
  letter-spacing: .02em;
}
.sg-label,
.sg-domain { color: inherit; }

/* Footer override: altijd wit */
footer .sg-inline,
footer .sg-label,
footer .sg-domain,
#site-footer .sg-inline,
#site-footer .sg-label,
#site-footer .sg-domain {
  color: #fff !important;
}

/* Partners override (alleen @ThePark in partners-blok) */
.partners .sg-domain,
#partners .sg-domain { color: var(--primary) !important; }


/* =========================
   HEADER — FIXED
========================= */
.site-header{
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 90px;
  background-color: var(--paper);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.back-button{
  position: absolute;
  left: 20px; top: 50%;
  transform: translateY(-50%);
  text-decoration: none; color: var(--text);
  font-size: .85rem;
  display: flex; align-items: center; gap: 5px;
}
.back-button i{ font-size: 1.2em; }

.logo-img{ max-height: 75px; height: auto; width: auto; cursor: pointer; }


/* =========================
   MENU (overlay)
========================= */
.hamburger{
  position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer; z-index: 2000;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.hamburger span{
  display: block; height: 3px; width: 100%; background-color: var(--text);
  border-radius: 3px; transition: transform .3s ease, opacity .3s ease, background-color .3s ease;
}
.hamburger.open span:nth-child(1){ transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2){ opacity: 0; }
.hamburger.open span:nth-child(3){ transform: rotate(-45deg) translate(6px, -6px); }
.hamburger:focus-visible{ outline: 2px solid var(--menu-accent); outline-offset: 4px; border-radius: 6px; }

.menu-overlay{
  position: fixed; inset: 0;
  display: none; justify-content: center; align-items: center;
  background-color: var(--overlay-primary);
  z-index: 1500;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.menu-overlay.active{ display: flex; }

.menu-content{
  display: flex; flex-direction: column; text-align: center;
  font-family: 'SocialGothic', sans-serif; font-weight: 700; letter-spacing: .02em;
  position: relative; z-index: 1550;
}
.menu-content a{
  color: var(--menu-color); font-size: var(--menu-fs-lg); text-decoration: none; margin: 15px 0;
  transition: color .25s ease, opacity .25s ease;
}
.menu-content a:hover{ color: var(--menu-accent); }
.menu-content a:focus-visible{
  outline: 2px solid var(--menu-accent); outline-offset: 3px; border-radius: 6px;
}
.menu-content a.active{ color: var(--menu-accent); }

.menu-close{
  position: fixed;
  top: 14px; right: 14px;
  z-index: 2200;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.28);
  color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-close:hover{ background: rgba(0,0,0,.4); }
.menu-close:focus-visible{ outline: 2px solid var(--menu-accent); outline-offset: 2px; }
.menu-close svg, .menu-close i{ pointer-events: none; }

.menu-item{ display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.menu-row{ display: flex; align-items: center; gap: var(--menu-gap); }

.menu-link{
  flex: 1; color: var(--menu-color); font-size: var(--menu-fs); text-decoration: none; padding: 10px 0;
  transition: color .25s ease; font-family: 'SocialGothic', sans-serif; font-weight: 700; letter-spacing: .02em;
}
.menu-link:hover{ color: var(--menu-accent); }
.menu-link:focus-visible{ outline: 2px solid var(--menu-accent); outline-offset: 3px; border-radius: 6px; }

.menu-item.has-children .submenu-toggle{
  background: transparent; border: 0; width: 36px; height: 36px;
  display: grid; place-items: center; cursor: pointer; border-radius: 8px;
}
.menu-item.has-children .submenu-toggle:focus-visible{
  outline: 2px solid var(--menu-accent); outline-offset: 2px;
}
.menu-item.has-children .caret{
  display: inline-block; width: 10px; height: 10px;
  border-right: 2px solid var(--menu-color); border-bottom: 2px solid var(--menu-color);
  transform: rotate(45deg); transition: transform .25s ease, border-color .25s ease;
}
.menu-item.open .caret{ transform: rotate(-135deg); border-color: var(--menu-accent); }

.submenu{ display: none; flex-direction: column; gap: 4px; padding: 6px 0 8px; margin-left: 0; border-left: none; }
.submenu.open{ display: flex; }
.submenu-link{
  color: var(--menu-color); font-size: 1rem; text-decoration: none; padding: 6px 0;
  transition: color .25s ease; font-family: 'SocialGothic', sans-serif; font-weight: 700; letter-spacing: .02em;
}
.submenu-link:hover, .submenu-link.active{ color: var(--menu-accent); }
.submenu-link:focus-visible{ outline: 2px solid var(--menu-accent); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce){
  .hamburger span,
  .menu-content a,
  .menu-link,
  .menu-item.has-children .caret,
  .submenu-link{ transition: none; }
}


/* =========================
   MAIN & GENERIC LAYOUT
========================= */
main{
  margin-top: 90px;
  flex: 1; width: 100%;
}
.message{
  font-size: 2em;
  margin-top: 20px; padding: 0 1rem; color: var(--text); text-align: center;
}

/* Page banner */
.page-banner.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.page-banner img {
  display: block;
  width: 100%;
  height: clamp(320px, 48vh, 520px);
  object-fit: cover;
}
@media (max-width: 420px){
  .page-banner img { height: 200px; }
}

/* Sections / Color blocks */
.color-block{ width: 100%; padding: 60px 20px; text-align: center; }
.color-block.light-blue{ background-color: var(--cb-light-blue); color: #fff; }
.color-block.dark-blue{ background-color: var(--cb-dark-blue); color: #fff; position: relative; }
.color-block.light-kids{ background-color: var(--cb-light-kids); color: #fff; }
.color-block.dark-kids{ background-color: var(--cb-dark-kids); color: #fff; position: relative; }
.color-block.green{ background-color: var(--cb-brand); color: #fff; }
.color-block.kids{ background-color: var(--kids-paars); color: #fff; }
.color-block.kerst{ background-color: var(--kerst-rood); color: #fff; }
.color-block.bruin{ background-color: var(--cb-kerst-bruin); color: #fff; }
.color-block.zand{ background-color: var(--cb-zand); color: #fff; }
.color-block.halloween{ background-color: var(--cb-purple); color: #fff; }
.color-block.white-white{ background-color: var(--cb-white); }

.color-block.dark-blue *:not(a):not(button):not(.outline-btn *):not(.outline-btn):not(.outline-btn--halloween *):not(.outline-btn--halloween){ color:#fff !important; }
.color-block.green *:not(.outline-btn):not(.outline-btn *):not(.outline-btnblue):not(.outline-btnblue *),
.color-block.red *:not(.outline-btn):not(.outline-btn *):not(.outline-btnblue):not(.outline-btnblue *),
.color-block.orange *:not(.outline-btn):not(.outline-btn *):not(.outline-btnblue):not(.outline-btnblue *){ color:#fff !important; }

.color-block.white,
.color-block.background,
.layout-block.white{ background-color: var(--bg); color: var(--text); }

.wave-top{ position: absolute; top: -1px; left: 0; width: 100%; height: auto; }

/* Two-column */
.two-column{
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px;
}
.two-column .left,
.two-column .middle,
.two-column .right,
.two-column .right-home,
.two-column .left-home{ flex: 1 1 400px; max-width: 500px; }

.two-column .left{ text-align: left; }
.two-column .right-home,
.two-column .left-home{ text-align: left; padding: 20px; }

.two-column .right-home h2{ margin-bottom: 15px; font-size: 2rem; font-weight: bold; color: var(--heading); }
.two-column .right-home p{ margin-bottom: 20px; text-align: left; color: var(--text); }

.two-column > .left-home,
.two-column > .right-home{ display: flex; flex-direction: column; justify-content: space-between; }
.two-column > .left-home p,
.two-column > .right-home p{ flex-grow: 1; }

/* Images */
.home-img{
  width: 100%; max-width: 800px; height: 100%; max-height: 850px;
  border-radius: 20px; display: block; margin: 0 auto; object-fit: cover;
}
.layout-img{
  width: 100%; height: auto; display: block; margin: 0; object-fit: cover;
  max-width: none; max-height: none;
}
.flyer-img{
  width: 120%; max-width: 400px; border-radius: 20px; display: block; margin: 0 auto;
}

/* Iframe */
.iframe-wrapper{
  border-radius: 20px; overflow: hidden; display: inline-block;
  width: 400px; height: 549px;
}
.iframe-wrapper iframe{
  width: 100%; height: 100%; border: none; display: block;
}

/* Main text */
.main-text{
  max-width: 800px; margin: 0 auto; padding: 2rem 1rem; text-align: left;
}
.main-text h1, .main-text h2, .main-text h3{ color: var(--heading); margin-bottom: 1rem; }
.main-text p{ margin-bottom: 1.2rem; color: var(--text); }
.main-header{
  text-align: left; margin: 0 auto 40px; max-width: 900px; padding: 0 20px;
}
.main-header h1{ font-size: 2.5rem; color: var(--heading); margin-bottom: 15px; font-weight: 700; }
.main-header h2{ font-size: 2rem; color: var(--heading); margin-bottom: 10px; }
.main-header p{ margin: 0; color: var(--text); }

/* Lists in main-text */
.main-text ul{ list-style: disc inside; margin: 0 0 1.2rem 1.5rem; padding-left: 1rem; }
.main-text li{ margin-bottom: 0.6rem; line-height: 1.6; color: var(--text); }
.main-text ol{ margin-left: 1.5rem; padding-left: 1rem; list-style-type: decimal; }


/* =========================
   NEWS
========================= */
.news-hero{
  padding: 48px 20px 28px; text-align: center;
  background: linear-gradient(180deg, rgba(53,43,96,.06), rgba(53,43,96,0));
}
.news-hero h1{ font-size: 2.2rem; margin: 0 0 8px; color: var(--heading); }
.news-hero p{ color: var(--muted); margin: 0; }

.news-controls{
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
  padding: 16px 20px 0;
}
.news-search{
  flex: 1 1 260px; max-width: 520px; display: flex; align-items: center; gap: 8px;
  border: 1px solid #e6e6f0; border-radius: 14px; padding: 10px 14px; background: var(--paper);
}
.news-search input{ flex: 1; border: 0; outline: 0; font-size: 1rem; color: var(--text); }
.chipbar{ display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chip{
  border: 1px solid #e6e6f0; border-radius: 999px; padding: 8px 12px; cursor: pointer;
  background: var(--paper); font-size: .9rem; color: var(--text);
}
.chip.active{ background: var(--brand); color: #fff; border-color: var(--brand); }

.news-wrap{ max-width: 1100px; margin: 0 auto; padding: 10px 18px 36px; }

.news-card{
  display: flex; flex-direction: column; background: var(--paper);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  min-height: 520px; /* consistente basis */
}
.news-card .cover{ display: block; line-height: 0; background: #000; }
.news-card .cover img{
  width: 100%; height: 260px; object-fit: cover; display: block; transition: transform .35s ease;
}
.news-card .cover:hover img{ transform: scale(1.02); }

.news-card .body{ padding: 16px; flex: 1; }

.news-card .badge{
  display: inline-block; color: #fff; font-size: .8rem; padding: 6px 10px; border-radius: 999px;
  margin-bottom: 10px; background: var(--primary);
}

.news-card h2, .news-card h3{ margin: 0 0 8px; color: var(--heading); line-height: 1.25; }
.news-card h2 a, .news-card h3 a{ color: inherit; text-decoration: none; }
.news-card h2 a:hover, .news-card h3 a:hover{ text-decoration: underline; }

.news-card p{ margin: 0 0 12px; color: var(--text); line-height: 1.55; }

.news-card .meta{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.news-card time{ color: var(--muted); font-size: .7rem; white-space: nowrap; }

.news-card .card-footer{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid #eee; background: #fafafa;
}
.news-card .card-footer time{ font-size: .75rem; color: var(--muted); }
.news-card .card-footer .read-more{
  color: var(--brand); text-decoration: none !important; font-weight: 700; font-size: .85rem !important;
}
.news-card .card-footer .read-more:hover{ text-decoration: underline; }
.news-card .card-footer .share-btn{
  border: 0; background: #f2f6ff; padding: 8px 14px; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .85rem; color: var(--text);
  transition: background .25s ease, transform .2s ease;
}
.news-card .card-footer .share-btn svg{ width: 18px; height: 18px; fill: var(--text); transition: transform .2s ease; }
.news-card .card-footer .share-btn:hover{ background: #e1e8ff; transform: translateY(-2px); }
.news-card .card-footer .share-btn:hover svg{ transform: scale(1.2); }

.news-card.featured .cover img{ height: 360px; }

.news-grid{
  margin-top: 22px; display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0,1fr));
}

@keyframes pulse-highlight{
  0%{ box-shadow: 0 0 0 0 rgba(53, 43, 96, 0.6); }
  50%{ box-shadow: 0 0 0 5px rgba(0, 206, 125, 0.4); }
  100%{ box-shadow: 0 0 0 10px rgba(0, 206, 125, 0); }
}
.highlight-article{ animation: pulse-highlight 4s ease-out; }


/* =========================
   EVENTS
========================= */
.events-hero{
  padding: 42px 18px 10px;
  text-align: left;
  max-width: 1100px;
  margin: 0 auto;
}
.events-hero h1{ font-size: 2.4rem; margin: 0 0 6px; color: var(--heading); }
.events-hero p{ color: var(--text); margin: 0; }

.events-wrap{
  max-width: 1100px; margin: 16px auto 26px; padding: 0 18px;
  display: grid; gap: 18px;
}

.event-card{
  position: relative;
  display: grid;
  grid-template-columns: auto 96px 1fr auto;
  align-items: center; gap: 18px;
  background: var(--paper);
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  color: var(--text);
}
.event-card:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.event-card.featured{ background: var(--primary); color: #fff; }
.event-card.featured .event-price{ color: var(--brand); }
.event-card.featured .event-title{ color: #fff; }
.event-card.featured .tag{ background: rgba(255,255,255,.12); color: #fff; }
.event-card.featured .tag svg{ fill: #fff; }
.event-card.featured .event-cta{ background: var(--brand); color: var(--primary); }

/* Datumtegel (groot) */
.event-date{
  width: 76px; height: 76px;
  border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #f0f0f4;
  color: var(--brand);
  font-weight: 800; line-height: 1;
  font-family: 'SocialGothic', sans-serif; letter-spacing: .02em;
}
.event-card.featured .event-date{ background: rgba(255,255,255,.08); color: #fff; }
.event-date .month{ font-size: .8rem; letter-spacing: .5px; opacity: .9; }
.event-date .day{ font-size: 2rem; }

/* Logo */
.event-logo{
  width: 96px; height: 96px;
  object-fit: cover; border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

/* Body */
.event-body{ display: flex; flex-direction: column; gap: 6px; }
.event-price{ font-size: .9rem; font-weight: 700; color: var(--text); }
.event-title{ font-size: 1.6rem; margin: 0; color: var(--heading); }

/* Tags */
.event-tags{
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px;
}
.tag{
  display: inline-flex; align-items: center; gap: 8px;
  background: #f0f0f4; color: var(--text);
  padding: 8px 12px; border-radius: 999px;
  font-weight: 600; font-size: .95rem; text-decoration: none;
}
.tag svg{ width: 18px; height: 18px; fill: var(--text); }
.tag:hover{ background: #dceaff; }

/* CTA */
.event-cta{
  display: inline-grid; place-items: center;
  padding: 14px 22px; border-radius: 20px;
  background: var(--brand); color: #fff; text-decoration: none;
  font-weight: 800; white-space: nowrap;
  font-family: 'SocialGothic', sans-serif; letter-spacing: .02em;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.event-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(11,125,54,.35);
}

/* Responsief events */
@media (max-width: 900px){
  .event-card{
    grid-template-columns: 72px 72px 1fr;
    grid-template-areas:
      "date logo cta"
      "date logo title"
      "date logo tags";
    row-gap: 10px; padding-right: 16px;
  }
  .event-date{ grid-area: date; width: 72px; height: 72px; }
  .event-logo{ grid-area: logo; width: 72px; height: 72px; }
  .event-body{ grid-area: title; }
  .event-cta{ grid-area: cta; justify-self: end; }
}
@media (max-width: 640px){
  .event-card{
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "date title"
      "logo title"
      "logo tags"
      "logo cta";
    align-items: start;
  }
  .event-logo{ width: 64px; height: 64px; }
  .event-cta{ justify-self: start; margin-top: 8px; }
  .event-title{ font-size: 1.35rem; }
}

/* Events teaser */
.events-teaser{ max-width: 1100px; margin: 28px auto; padding: 0 18px; }
.events-teaser h2{ text-align: center; margin-bottom: 14px; color: var(--heading); }
.events-teaser-grid{
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Event mini-cards */
.event-mini{
  display: flex; align-items: center; gap: 14px;
  padding: 14px; background: var(--paper); border: 1px solid #eee;
  border-radius: 16px; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  min-width: 0; color: var(--text);
}
.event-mini:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}
.event-mini .date{
  flex: 0 0 72px; width: 72px; aspect-ratio: 1/1;
  border-radius: 14px; background: var(--primary); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'SocialGothic', sans-serif; font-weight: 700; letter-spacing: .02em;
}
.event-mini .date span{ font-size: .8rem; opacity: .9; }
.event-mini .date strong{ font-size: 1.6rem; line-height: 1; }
.event-mini .info{ min-width: 0; overflow-wrap: anywhere; }
.event-mini .info h3{ margin: 0 0 4px; color: var(--heading); font-size: 1.1rem; }
.event-mini .info p{ margin: 0; color: var(--text); font-size: .95rem; }
.event-mini .mini-cta{
  display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
  background: var(--brand); color: #fff; text-decoration: none; padding: 8px 12px;
  border-radius: 12px; font-weight: 700; flex: 0 0 auto;
  font-family: 'SocialGothic', sans-serif; letter-spacing: .02em;
}
.event-mini .mini-cta:hover{ filter: brightness(.95); }
.center{ text-align: center; margin-top: 12px; }
@media (max-width: 420px){ .event-mini .date{ flex-basis: 64px; width: 64px; } }

.events-teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 kolommen */
  gap: 1.5rem;
}


/* =========================
   ADD-TO-CALENDAR MODAL
========================= */
.addcal-modal {
  position: fixed; inset: 0; display: none; place-items: center;
  background: var(--overlay-dark); z-index: 3000;
}
.addcal-modal.open { display: grid; }

.addcal-dialog {
  width: min(420px, 92vw);
  background: var(--paper);
  border-radius: 20px;
  box-shadow: 0 20px 44px rgba(0,0,0,.25);
  padding: 28px 24px 26px;
  position: relative; text-align: center; animation: fadeIn .25s ease;
  color: var(--text);
}
.addcal-dialog h3 {
  margin: 0 0 10px; color: var(--heading);
  font-size: 1.5rem; font-weight: 700;
}
.addcal-eventtitle {
  font-size: 1.1rem; color: var(--text);
  margin-bottom: 22px; font-weight: 600;
}
.addcal-actions { display: flex; flex-direction: column; gap: 14px; }
.addcal-dialog .addcal-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 16px; border-radius: 18px;
  font-weight: 600; background: #f7f7fb; color: var(--text);
  text-decoration: none; transition: background .2s ease, transform .2s ease;
}
.addcal-dialog .addcal-btn svg { width: 20px; height: 20px; fill: var(--text); }
.addcal-dialog .addcal-btn:hover { background: #e9ecff; transform: translateY(-2px); }
.addcal-close {
  position: absolute; top: 10px; right: 14px;
  border: 0; background: transparent;
  font-size: 34px; line-height: 1; color: var(--text); cursor: pointer;
  transition: transform .2s ease, color .2s ease;
}
.addcal-close:hover { color: var(--brand); transform: scale(1.15); }

@keyframes fadeIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }


/* =========================
   PHOTO STRIP + LIGHTBOX
========================= */
.photo-strip{
  --gap: 14px; --radius: 20px; --item-min: 280px; --item-max: 380px;
  max-width: 1280px; margin: 40px auto; padding: 0 18px;
}
.photo-strip h2{ text-align: center; margin-bottom: 14px; color: var(--heading); }
.photo-strip .strip{
  display: flex; gap: var(--gap); overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: 8px; scroll-padding: 1rem;
}
.photo-strip .item{ flex: 0 0 clamp(var(--item-min), 33vw, var(--item-max)); scroll-snap-align: start; }
.photo-strip img{
  display: block; width: 100%;
  height: clamp(160px, 22vw, 220px); object-fit: cover; border-radius: var(--radius);
}
.photo-strip .controls{ display: flex; justify-content: space-between; margin-top: 8px; gap: 8px; }
.photo-strip .btn{
  border: 1px solid rgba(0,0,0,.12); background: var(--paper);
  border-radius: 999px; padding: 8px 12px; cursor: pointer; line-height: 1;
}
.photo-strip .btn:disabled{ opacity:.4; cursor: default; }
.photo-strip .strip::-webkit-scrollbar{ height: 8px; }
.photo-strip .strip::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.2); border-radius: 999px; }
.photo-strip .strip{ scrollbar-color: rgba(0,0,0,.2) transparent; scrollbar-width: thin; }

@media (max-width: 1024px){
  .photo-strip{ max-width: 1000px; }
  .photo-strip .item{ flex-basis: clamp(240px, 46vw, 320px); }
}
@media (max-width: 680px){
  .photo-strip .item{ flex-basis: 80vw; }
  .photo-strip img{ height: clamp(160px, 38vw, 200px); }
}
@media (prefers-reduced-motion: reduce){
  .photo-strip .strip{ scroll-behavior: auto; }
}

/* Lightbox */
.lb-overlay{
  position: fixed; inset: 0; z-index: 9999;
  background: var(--overlay-primary); display: none; align-items: center; justify-content: center;
}
.lb-overlay.open{ display: flex; }
.lb-img-wrap{ position: relative; max-width: 92vw; max-height: 92vh; }
.lb-img{ display: block; max-width: 100%; max-height: 92vh; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lb-close,
.lb-prev,
.lb-next{
  position: absolute; z-index: 2;
  width: 48px; height: 48px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.lb-close{ top: 16px; right: 16px; }
.lb-prev, .lb-next{ top: 50%; transform: translateY(-50%); }
.lb-prev{ left: clamp(8px, 3vw, 28px); }
.lb-next{ right: clamp(8px, 3vw, 28px); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
}
@media (max-width: 980px){
  .lb-prev, .lb-next, .lb-close{ width:44px; height:44px; }
}
body.lb-lock{ overflow: hidden; }



/* =========================
   ARTIKEL
========================= */
.news-article{
  max-width: 700px; margin: 2rem auto; padding: 2rem; box-sizing: border-box;
  line-height: 1.6; margin-bottom: 1.5rem; color: var(--text);
}
.news-article h2{ font-size: 1.5rem; margin-top: 1rem; color: var(--heading); }
.news-full-image{
  width: 85%; max-width: 800px; height: 100%; max-height: 850px;
  border-radius: 20px; display: block; margin: 20px auto 0; object-fit: cover;
}
.article-date{ display: block; margin-top: 2rem; font-style: italic; color: var(--muted); }
.auteur{ font-size: 0.65rem; color: #666; margin-top: 5px; display: block; font-weight: normal; }
.news-article .share-btn{ background: none; border: none; cursor: pointer; padding: 0; }

/* CTA tiles */
.cta-tiles{
  max-width: 1100px; margin: 28px auto; padding: 0 18px;
  display: grid; gap: 16px; grid-template-columns: repeat(2,1fr);
}
.tile{
  background: var(--primary); color: #fff; text-decoration: none; padding: 20px; border-radius: 18px;
  box-shadow: 0 12px 24px rgba(0,0,0,.12); transition: transform .2s ease, box-shadow .2s ease;
}
.tile:hover{ transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.16); }
.tile h3{ margin: 0 0 6px; }
.tile p{ margin: 0; opacity: .9; }
@media (max-width:860px){ .cta-tiles{ grid-template-columns: 1fr; } }


/* =========================
   BUTTONS — LXON
========================= */
a.btn-home,
a.cta-button,
a.outline-btn,
a.outline-btnblue,
a.outline-btn--halloween,
a.outline-btn--kerst,
a.outline-btn--zand,
a.outline-btn--kids,
a.outline-btn--light-kids,
a.outline-btn--kids2,
a.outline-orange,
button.btn-home,
button.cta-button,
button.outline-btn,
button.outline-btnblue,
button.outline-btn--halloween,
button.outline-btn--kerst,
button.outline-btn--zand,
button.outline-btn--kids,
button.outline-btn--light-kids,
button.outline-btn--kids2,
button.outline-orange {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; vertical-align: middle; white-space: normal; line-height: 1.3;
  text-decoration: none; user-select: none; cursor: pointer;
  font-family: 'SocialGothic', sans-serif; font-weight: 700; letter-spacing: 0.02em;
  font-size: 1.1rem; border-radius: 20px; padding: 12px 28px;
  transition: all 0.3s ease;
}

/* Home Button */
.btn-home { background-color: var(--aqua); color: #fff; border: none; }
.btn-home:hover { background-color: var(--primary); }

/* Call-to-Action */
.cta-button{
  background-color: var(--paper); color: var(--brand);
  border: none; margin-top: 20px; border-radius: 8px;
}
.cta-button:hover{ background-color: rgba(255, 255, 255, 0.85); }

/* Outline varianten */
.outline-btn,
.outline-btnblue{
  border: 2px solid var(--primary); color: var(--primary); background-color: transparent;
}
.outline-btn:hover,
.outline-btnblue:hover{ background-color: var(--primary); color: #fff; }

.outline-btn--halloween{
  border: 2px solid var(--hallo-orange); color: var(--hallo-orange); background: transparent;
}
.outline-btn--halloween:hover{ background: var(--hallo-orange); color: #fff; }

.outline-btn--kerst{
  border: 2px solid var(--kerst-rood); color: var(--kerst-rood); background: transparent;
}
.outline-btn--kerst:hover{ background: var(--kerst-rood); color: #fff; }

.outline-btn--zand{
  border: 2px solid var(--kerst-zand); color: var(--kerst-zand); background: transparent;
}
.outline-btn--zand:hover{ background: var(--kerst-zand); color: #fff; }

.outline-btn--kids,
.outline-btn--light-kids{
  border: 2px solid var(--kids-paars); color: var(--kids-paars); background: transparent;
}
.outline-btn--kids:hover,
.outline-btn--light-kids:hover{ background: var(--kids-paars); color: #fff; }

.outline-btn--kids2{
  border: 2px solid var(--kids-geel); color: var(--kids-geel); background: transparent;
}
.outline-btn--kids2:hover{ background: var(--kids-geel); color: #fff; }

.outline-orange{
  border: 2px solid var(--orange); color: var(--orange); background: transparent;
}
.outline-orange:hover{ background: var(--orange); color: #fff; }

/* Extra consistentie + toegankelijkheid */
a[class*="outline-btn"]:hover,
button[class*="outline-btn"]:hover{ text-decoration: none; transform: translateY(-1px); }
a[class*="outline-btn"] + a[class*="outline-btn"],
button[class*="outline-btn"] + button[class*="outline-btn"]{ margin-left: 10px; }
a[class*="outline-btn"]:focus-visible,
button[class*="outline-btn"]:focus-visible{
  outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 8px;
}


/* =========================
   FAQ
========================= */
.faq{ margin: 2rem auto; max-width: 800px; padding: 0 1rem; }
.faq h2{ text-align: left; font-size: 1.5rem; margin-bottom: 1.25rem; color: var(--heading); font-weight: 700; }
.faq h3{ text-align: left; font-size: 1.2rem; margin-bottom: 1.25rem; color: var(--primary); font-weight: 700; }

.faq-item{
  padding: 1rem 0; border-bottom: 1px solid #e6e6e6; cursor: pointer; position: relative; padding-left: 1rem;
  transition: background-color .25s ease;
}
.faq-item:last-child{ border-bottom: none; }
.faq-item.active{
  border-left: 4px solid var(--brand); padding-left: .8rem; background: rgba(var(--brand-rgb),0.08);
}
.faq-question{ display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 700; color: var(--text); }
.faq-icon{ width: 20px; height: 20px; position: relative; flex-shrink: 0; color: var(--text); }
.faq-icon::before,
.faq-icon::after{
  content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; background: currentColor; border-radius: 2px; transform: translate(-50%, -50%);
}
.faq-icon::after{ transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.active .faq-icon{ color: var(--brand); transform: rotate(45deg); }
.faq-answer{ display: none; margin-top: .5rem; font-size: .95rem; line-height: 1.6; color: var(--muted); }
.faq-item.active .faq-answer{ display: block; }


/* =========================
   FOOTER
========================= */
footer{
  text-align: center; background-color: var(--cb-dark-blue);
  padding: 30px 20px; width: 100%; color: #fff;
}
footer .social-icons{ margin-bottom: 20px; }
footer .social-icons a{
  color: #fff; margin: 0 15px; font-size: 2em; text-decoration: none; transition: transform 0.3s ease;
}
footer .social-icons a:hover{ color: var(--primary); transform: scale(1.2); }

.footer-links{
  display: flex; justify-content: center; gap: 15px; margin-bottom: 10px; flex-wrap: wrap;
}
.footer-links a{
  font-size: 14px; color: #fff; text-decoration: none; transition: color 0.3s ease;
}
.footer-links a:hover{ color: var(--brand); }
.footer-links .dot{ margin: 0 8px; color: #fff; font-weight: bold; }

.footer-text p{ font-size: 12px; color: #fff; margin-top: 5px; }


/* =========================
   PARTNER LOGOS / SPONSOR CARDS
========================= */
.partner-logos{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 20px;
}
.partner-logos img{ max-height: 80px; object-fit: contain; }

.sponsor-cards{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 30px;
}
.sponsor-card{
  background: var(--paper); color: var(--text); border-radius: 20px; padding: 25px; width: 300px; text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sponsor-card:hover{ transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.sponsor-card h3{ font-size: 1.5rem; margin-bottom: 10px; color: var(--heading); }
.sponsor-card .price{ font-size: 1.3rem; font-weight: bold; color: var(--brand); margin: 10px 0 20px; }
.sponsor-card ul{ list-style: none; padding: 0; margin-bottom: 20px; text-align: left; }
.sponsor-card ul li{ margin: 8px 0; padding-left: 20px; position: relative; }
.sponsor-card ul li::before{
  content: "✔"; position: absolute; left: 0; color: var(--brand); font-weight: bold;
}
.sponsor-card .outline-btnblue{ display: inline-block; margin-top: auto; }


/* =========================
   SPONSOREN (GRIDS & CTA)
========================= */
.sponsor-tiers{ margin: 0 auto; padding: 20px 18px 40px; }
.sponsor-tier + .sponsor-tier{ margin-top: 26px; border-top: 1px solid #eaeaf4; padding-top: 26px; }

.tier-head h2{ color: #fff; margin: 0 0 6px; font-size: 1.6rem; }
.tier-head p{ color: #fff; margin: 0 0 14px; }

.sponsor-grid{ display: grid; gap: 18px; align-items: center; }
.sponsor-grid.one-up{ grid-template-columns: repeat(1, minmax(0,1fr)); }
.sponsor-grid.three-up{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.sponsor-grid.four-up{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.sponsor-grid.five-up{ grid-template-columns: repeat(5, minmax(0,1fr)); }

.sponsor-logo{
  background: var(--paper); border-radius: 16px; box-shadow: 0 8px 20px rgba(0,0,0,.06);
  padding: 18px 22px; display: grid; place-items: center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  border: 1px solid #eef0fa;
}
.sponsor-logo:hover{
  transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.09); background: #ffffff;
}
.sponsor-logo img{ max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.sponsor-grid.one-up .sponsor-logo img{ max-height: 90px; }

/* CTA blok onderaan + binnen dark-blue centreren */
.sponsor-cta p{ max-width: 900px; margin: 0 auto 10px; color: #fff; }
.sponsor-cta .btn-ghost{
  display: inline-block; margin-top: 16px; padding: 12px 28px; border: 2px solid #fff; color: #fff;
  text-decoration: none; font-weight: 700; border-radius: 999px; transition: background .2s ease, transform .2s ease;
}
.sponsor-cta .btn-ghost:hover{ background: #fff; color: var(--primary); transform: translateY(-1px); }
.color-block.dark-blue .inner{ max-width: 1100px; margin: 0 auto; padding: 40px 20px; }

.sponsor-tier{ margin-bottom: 40px; }
.sponsor-tier .tier-head h2{ color: #fff; margin-bottom: 6px; }
.sponsor-tier .tier-head p{ color: #e0e0f0; margin-bottom: 20px; }


/* =========================
   APP PAGE
========================= */
body.app-page { background: var(--bg); color: var(--text); }

/* Hero */
.app-page .hero-wrap{
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center;
  max-width: 1100px; margin: 0 auto; padding: 0 20px;
}
@media (max-width: 980px){ .app-page .hero-wrap{ grid-template-columns: 1fr; gap: 24px; } }
.app-page .hero-copy{ text-align: left; }
.app-page .hero-copy h1{ margin: 0 0 10px; }
.app-page .hero-copy p{ line-height: 1.6; }
.app-page .hero-actions{ display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.app-page .appstore-badge img{ height: 44px; width: auto; display: block; }
.app-page .hero-shot{ display: grid; place-items: center; }
.app-page .hero-shot img{
  width: 80%; max-width: 320px; height: auto; object-fit: contain;
  border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* Screenshots: swipe strip */
.app-page .app-shots{ --gap: 20px; max-width: 1280px; margin: 36px auto 20px; padding: 0 18px; }
.app-page .app-shots .strip{
  display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}
.app-page .app-shots .item{ flex: 0 0 clamp(320px, 34vw, 440px); scroll-snap-align: start; }
.app-page .app-shots img{
  display: block; width: 100%; height: auto !important; max-height: 800px; object-fit: contain;
  border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.12); transition: transform .25s ease;
}
.app-page .app-shots img:hover{ transform: scale(1.03); }
@media (max-width: 680px){
  .app-page .app-shots .item{ flex-basis: 84vw; }
  .app-page .app-shots img{ max-height: 520px; }
}

/* Kop-typografie align */
.app-page .pwa-steps h2,
.app-page .right-home h2{
  font-size: 2rem; margin: 0 0 15px; line-height: inherit;
}

/* PWA-lijst */
.app-page .pwa-steps ol{ margin: .6rem 0 0 1.25rem; }
.app-page .pwa-steps li{ margin: .35rem 0; line-height: 1.6; }

/* Screens grid (3 naast elkaar) */
.app-page .app-screens{
  max-width: 1100px; margin: 60px auto; padding: 0 20px; text-align: center;
}
.app-page .app-screens h2{
  font-family: 'SocialGothic', sans-serif; font-weight: 700; font-size: 2rem; margin-bottom: 28px; color: var(--heading);
}
.app-page .screens-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; justify-items: center; align-items: start;
}
.app-page .screens-grid img{
  width: 100%; max-width: 320px; height: auto; object-fit: contain;
  border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.12); transition: transform .25s ease;
}
.app-page .screens-grid img:hover{ transform: scale(1.03); }
@media (max-width: 860px){ .app-page .screens-grid{ grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 580px){ .app-page .screens-grid{ grid-template-columns: 1fr; } }


/* =========================
   ADS / PROMO CARDS
========================= */
/* Maak ad-slot doorzichtig zodat de kaart zelf grid-item is */
.news-grid .ad-slot { display: contents; }

/* Promo-cards (gelijk aan news-card, met groene accentstijl) */
.promo-card{
  position: relative;
  background: #f7fff9;
  border: 2px solid var(--brand);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.promo-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11,125,54,.15);
}
.promo-card .cover img{
  width: 100%; height: 260px; object-fit: cover; display: block;
  border-radius: var(--radius) var(--radius) 0 0; transition: transform .35s ease;
}
.promo-card .cover:hover img{ transform: scale(1.02); }
.promo-card .badge{ background: var(--brand) !important; color: #fff; }
.promo-card .body{ padding: 16px; flex: 1; }
.promo-card .body h2 a{ color: var(--brand); text-decoration: none; }
.promo-card .body h2 a:hover{ text-decoration: underline; }
.promo-card .card-footer{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid #e6e6e6; background: #fafafa;
}

/* Legacy promo equalizers (no border, same bg) — niet nodig i.v.m. bovenstaande
   maar als fallback te behouden:
.promo-card { border: none; background: var(--paper); }
.promo-card .badge { background: var(--brand) !important; }
.promo-card .body h2 a { color: var(--heading); }
*/




/* =========================
   PRIVACY POLICY PAGE
========================= */
.privacy-policy{
  padding: 20px; max-width: 800px; margin: 20px auto; background-color: var(--paper);
  border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); text-align: left; color: var(--text);
}
.privacy-policy h1,
.privacy-policy h2{ color: var(--heading); }
.privacy-policy h1{ font-size: 2.5rem; margin-bottom: 10px; }
.privacy-policy h2{ font-size: 2rem; margin-top: 20px; }
.privacy-policy ul{ margin: 10px 0 20px 20px; list-style: disc; }


/* =========================
   BEELDEN (GALLERY)
========================= */
.beelden-header{
  text-align: left; margin: 0 auto 20px; max-width: 800px; padding: 0 20px;
}
.beelden-header h2{ font-size: 2rem; color: var(--heading); margin-bottom: 10px; }
.beelden-header p{ color: var(--text); line-height: 1.6; }

.beelden-gallery{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px;
}
.beelden-gallery img{
  width: 100%; height: auto; border-radius: 20px; display: block; object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer;
}
.beelden-gallery img:hover,
.beelden-gallery img:active{
  transform: scale(1.05); box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.foto-card{
  position: relative; display: inline-block; border-radius: 15px; overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); max-width: 400px;
}
.foto-card img{ width: 100%; display: block; transition: transform 0.3s; }
.foto-card:hover img{ transform: scale(1.05); }
.foto-card .overlay{
  position: absolute; bottom: 0; width: 100%;
  background: rgba(11, 125, 54, 0.8); color: #fff; text-align: center;
  padding: 15px; font-size: 1.2rem; font-weight: 700;
  font-family: 'SocialGothic', sans-serif; letter-spacing: .02em; line-height: 1.2;
}
/* =========================
   HERO
========================= */
/* HERO A — v2: Split & Layered */
.hero-immersive.hero-split{
  position: relative; isolation: isolate;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  min-height: clamp(560px, 78vh, 860px); color: #fff; overflow: hidden;
  display: grid; place-items: center;
}
.hero-immersive.hero-split .hero-media img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 58%; transform: scale(1.03);
}

/* gesplitste overlay: links merk-groen glas, rechts subtiel donker */
.hero-immersive.hero-split .hero-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(11,125,54,.55) 0%, rgba(11,125,54,.38) 32%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.40) 100%),
    radial-gradient(70% 60% at 20% 50%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%);
  mix-blend-mode: normal;
}

/* lay-out: content links uitgelijnd */
.hero-immersive.hero-split .hero-inner{
  position: relative; z-index: 2; width: 100%; max-width: 1200px; padding: 0 24px;
  display: grid; grid-template-columns: 1fr; justify-items: start;
}

/* glass card */
.hero-immersive.hero-split .hero-card{
  max-width: 640px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  border-radius: 22px;
  padding: clamp(18px, 3.2vw, 28px) clamp(18px, 3.2vw, 28px) clamp(16px, 3vw, 24px);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  animation: heroRise .6s ease both .06s;
}

/* ribbon tag */
.hero-immersive .hero-ribbon{
  display: inline-block; margin-bottom: 8px;
  background: #fff; color: var(--brand);
  font-weight: 800; font-family: 'SocialGothic', sans-serif; letter-spacing: .02em;
  border-radius: 999px; padding: 6px 12px; font-size: .9rem;
}

/* typografie */
.hero-immersive .hero-title{
  font-family: 'SocialGothic', sans-serif; font-weight: 700; letter-spacing: .01em;
  font-size: clamp(2.4rem, 6.2vw, 4.8rem); line-height: .95; margin: 2px 0 8px;
  color: var(--primary);
}
.hero-immersive .hero-title .brand{
  color: var(--brand);
  filter: drop-shadow(0 6px 20px rgba(142,193,82,.45));
}

.hero-immersive .hero-sub{
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: #f4f7f5; opacity: .95; margin: 0 0 16px;
}

.hero-immersive .hero-ctas{ display: flex; gap: 12px; flex-wrap: wrap; }
.hero-immersive .hero-facts{
  list-style: none; padding: 0; margin: 14px 0 0;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.hero-immersive .hero-facts li{
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: .92rem;
}
.hero-immersive .hero-facts strong{
  font-family: 'SocialGothic', sans-serif; letter-spacing: .02em;
}

/* wave divider onderaan */
.hero-immersive .hero-wave{
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
  line-height: 0;
}
.hero-immersive .hero-wave svg{ display: block; width: 100%; height: 110px; }

/* animatie */
@keyframes heroRise{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* responsief tweaks */
@media (max-width: 900px){
  .hero-immersive.hero-split{ min-height: clamp(520px, 78vh, 760px); }
  .hero-immersive .hero-card{ max-width: 680px; }
}
@media (max-width: 640px){
  .hero-immersive .hero-card{ padding: 16px 16px 14px; border-radius: 18px; }
  .hero-immersive .hero-facts{ gap: 8px; }
}

/* === HERO PATCH: titel wrap + consistente CTA's === */

/* 1) Geef de browser een onzichtbaar breekpunt tussen 'Zuidbroek' en '@' */
@media (min-width: 1024px){
  .hero-immersive .hero-title .brand::after{
    content: "\200B"; /* zero-width space: mag breken, géén visuele spatie */
  }

  /* forceer nette afbreking als het toch krap wordt */
  .hero-immersive .hero-title{
    overflow-wrap: anywhere;   /* moderne, vriendelijke break */
    word-break: normal;        /* geen agressief break-all */
    text-wrap: balance;        /* mooiere regelverdeling waar ondersteund */
  }

  /* iets ruimere card op breed desktop zodat lange namen passen */
  .hero-immersive.hero-split .hero-card{
    max-width: clamp(680px, 56vw, 860px);
    overflow: hidden;      /* tekst die toch uitsteekt, wordt niet zichtbaar */
  }

  /* tikje lagere titel-cap om overshoot te voorkomen */
  .hero-immersive .hero-title{
    font-size: clamp(2.4rem, 5.6vw, 4.2rem); /* was 4.8rem */
  }
}

/* 2) CTA-knoppen uniform (zelfde hoogte/typografie in de hero) */
.hero-immersive .hero-ctas .outline-btn,
.hero-immersive .hero-ctas .cta-button{
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.2;
  padding: clamp(10px, 1.3vw, 12px) clamp(20px, 2.2vw, 28px);
  border-radius: 16px;           /* gelijk in de hero */
  min-height: 44px;              /* taphoogte */
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* optioneel: gelijke optische breedte bij heel verschillende labels */
.hero-immersive .hero-ctas .outline-btn,
.hero-immersive .hero-ctas .cta-button{
  letter-spacing: .02em;
  font-weight: 700;
}

/* spacing fix wanneer knoppen op twee regels lopen */
.hero-immersive .hero-ctas{
  gap: 12px;
  flex-wrap: wrap;
}

/* =========================
   PAGE HERO — UNIVERSAL (light + glass)
========================= */

.page-hero{
  --overlay: linear-gradient(180deg, rgba(11,125,54,.30) 0%, rgba(0,0,0,.25) 100%);
  position: relative; isolation: isolate; color: #fff; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  height: clamp(300px, 42vh, 420px);
  display: grid; place-items: center;
}

/* Achtergrondafbeelding als layer */
.page-hero .ph-media{
  position: absolute; inset: 0;
  background-image: var(--hero-img);
  background-size: cover; background-position: center center;
  transform: scale(1.02);
}

/* Overlay (variabel per pagina via --overlay) */
.page-hero .ph-overlay{
  position: absolute; inset: 0;
  background: var(--overlay);
  backdrop-filter: none;
}

.page-hero .ph-media {
  display: block;
}

/* Inhoud */
.page-hero .ph-inner{
  position: relative; z-index: 2;
  width: 100%; max-width: 1100px; padding: 0 20px;
  display: grid; place-items: center;
  text-align: center;
}

/* Card container (voor glass-variant); bij light blijft vrijwel transparant */
.page-hero .ph-card{
  max-width: 820px;
  padding: clamp(14px, 2.6vw, 24px) clamp(16px, 3vw, 28px);
  border-radius: 22px;
  transition: box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

/* Titels en subtitel */
.page-hero .ph-title{
  font-family: 'SocialGothic', sans-serif; font-weight: 700; letter-spacing: .01em;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.05; margin: 0 0 8px; color: #fff;
  text-wrap: balance;
}
.page-hero .ph-sub{
  font-size: clamp(1rem, 2vw, 1.2rem);
  margin: 0 0 14px; color: #f4f7f5; opacity: .95;
  text-wrap: pretty;
}

/* CTA’s consistent met je bestaande knoppen */
.page-hero .ph-ctas{
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.page-hero .ph-ctas .outline-btn,
.page-hero .ph-ctas .cta-button{
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.2;
  padding: clamp(10px, 1.2vw, 12px) clamp(20px, 2.2vw, 28px);
  border-radius: 16px;
  min-height: 44px;
  display: inline-flex; align-items: center; gap: .4rem;
}

/* Wave divider onderaan (optioneel) */
.page-hero .ph-wave{ position: absolute; left:0; right:0; bottom:-1px; z-index:1; line-height:0; }
.page-hero .ph-wave svg{ display:block; width:100%; height:90px; }

/* ---------- Variants ---------- */

/* LIGHT: luchtig, zonder sterke glaslook */
.page-hero.is-light .ph-card{
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* GLASS: glaslook card voor extra leesbaarheid */
.page-hero.is-glass .ph-card{
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.10));
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  box-shadow: 0 16px 38px rgba(0,0,0,.22);
}

/* Compacte variant (bijv. detailpagina’s) */
.page-hero.small{ height: clamp(220px, 30vh, 320px); }
.page-hero.small .ph-sub{ display:none; } /* strakker voor detail */
.page-hero.small .ph-ctas{ margin-top: 6px; }

/* Micro-parallax on hover (respecteer reduced motion) */
@media (prefers-reduced-motion: no-preference){
  .page-hero:hover .ph-media{ transform: scale(1.05); transition: transform .6s ease; }
}

/* Smal scherm */
@media (max-width: 640px){
  .page-hero{ height: 300px; }
  .page-hero .ph-card{ padding: 14px 16px; border-radius: 18px; }
}

/* =========================
   PROGRAMMA / TIJDLIJN — KERST@THEPARK (SOCIAL BOLD FIX)
   ========================= */

#programma {
  padding-top: 40px;
  padding-bottom: 40px;
}

#programma > p {
  max-width: 900px;
  margin: 0 auto 18px;
  color: #0e2a25;
}

/* Timeline container */
#programma .timeline {
  display: grid;
  gap: 28px;
  justify-content: center;
}

/* Dagenblokken */
#programma .timeline .day {
  background: #deecea;
  border: 1px solid rgba(20,89,72,0.15);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: 22px 24px 26px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

#programma .timeline .day h3 {
  margin: 0 0 12px 0;
  color: #0e2a25;
  font-family: 'SocialGothic', sans-serif;
  font-weight: 400; /* niet vet */
  letter-spacing: .02em;
  text-align: left;
}

/* Lijst */
#programma .timeline .timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

/* Items */
#programma .timeline .timeline-list li {
  display: grid;
  gap: 8px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(20,89,72,0.1);
  position: relative;
  color: #0e2a25;
}

/* Groen randje links */
#programma .timeline .timeline-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 4px;
  background: #145948;
  opacity: .6;
}

/* Desktop layout */
@media (min-width: 900px) {
  #programma .timeline {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1200px;
    margin: 0 auto;
  }

  #programma .timeline .day {
    flex: 1 1 50%;
    max-width: 560px;
  }

  #programma .timeline .timeline-list li {
    grid-template-columns: 120px 1fr;
    align-items: start;
  }

  #programma .timeline .timeline-list li > .time {
    grid-column: 1;
    text-align: right;
  }

  #programma .timeline .timeline-list li > .badge,
  #programma .timeline .timeline-list li > p {
    grid-column: 2;
  }
}

/* Mobiel layout */
@media (max-width: 899.98px) {
  #programma .timeline .timeline-list li {
    grid-template-columns: 1fr;
  }

  #programma .timeline .timeline-list li > .time {
    text-align: left;
  }
}

/* Tijd (SocialGothic, vet) */
#programma .timeline .time {
  color: #0e2a25;
  font-family: 'SocialGothic', sans-serif;
  font-weight: 700;  /* vet */
  letter-spacing: .02em;
  display: block;
  font-size: 1.05rem;
}

/* ✅ Badge (SocialGothic, vet, groter, rood met witte tekst) */
#programma .timeline .badge {
  display: inline-block;
  font-size: 1.15rem;     /* groter */
  line-height: 1.1;
  font-family: 'SocialGothic', sans-serif;
  font-weight: 700;       /* vet */
  background: #741530;    /* kerstrood */
  color: #fff;
  padding: .35rem .8rem;
  border-radius: 999px;
  margin: 2px 0 4px 0;
  letter-spacing: .03em;
}

/* Tekst */
#programma .timeline p {
  margin: 0;
  color: #0e2a25;
  line-height: 1.55;
  font-weight: 400;
}

/* Extra spacing bij meerdere tijden */
#programma .timeline .timeline-list li .time + p {
  margin-bottom: 4px;
}

#programma .timeline .timeline-list li .time + p + .time {
  margin-top: 6px;
}


/* =========================
   RESPONSIVE (GLOBAL)
========================= */
@media (max-width: 1200px){
  .sponsor-grid.five-up{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 1024px){
  .site-header{ height: 85px; }
  .logo-img{ max-height: 70px; }
  main{ margin-top: 85px; }
}
@media (max-width: 980px){
  .sponsor-grid.four-up,
  .sponsor-grid.five-up{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .news-grid{ grid-template-columns: 1fr; }
  .news-card .cover img{ height: 220px; }
  .news-card.featured .cover img{ height: 240px; }
}
@media (max-width: 860px){
  .events-teaser-grid{ grid-template-columns: 1fr; }
  .photo-strip .strip{ grid-auto-columns: 70%; }
}
@media (max-width: 768px){
  .site-header{ height: 80px; }
  .logo-img{ max-height: 65px; }
  main{ margin-top: 80px; }
  .message{ font-size: 1.6em; }
  .beelden-gallery{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .event-logo{ width: 64px; height: 64px; }
  .event-cta{ justify-self: start; margin-top: 8px; }
  .event-title{ font-size: 1.35rem; }
}
@media (max-width: 480px){
  .site-header{ height: 75px; }
  .logo-img{ max-height: 60px; }
  main{ margin-top: 75px; }
  .message{ font-size: 1.4em; }
  .back-button{ font-size: 0.95em; }
  footer{ padding: 25px 15px; }
  footer .social-icons a{ font-size: 1.6em; margin: 0 10px; }
}
@media (max-width: 760px){
  .sponsor-grid.three-up,
  .sponsor-grid.four-up,
  .sponsor-grid.five-up{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px){
  .sponsor-grid.one-up,
  .sponsor-grid.three-up,
  .sponsor-grid.four-up,
  .sponsor-grid.five-up{
    grid-template-columns: 1fr; justify-items: stretch;
  }
  .sponsor-logo{ width: 100%; }
}

/* === Patch: color-block fixes & mobile news-cards === */

/* 1) Correctie bruin variabele */
.color-block.bruin{ background-color: var(--cb-bruin); color: #fff; }

/* 2) Ontbrekende varianten die elders al impliciet gebruikt worden */
.color-block.red{ background-color: var(--cb-red); color: #fff; }
.color-block.orange{ background-color: var(--orange); color: #fff; }

/* 3) Nieuwskaarten minder hoog op mobiel */
@media (max-width: 900px){
  .news-card{ min-height: unset; }
}

/* =========================
   LXON ONEPAGER — DANCE THEME OVERRIDES
   Plak onderaan je stylesheet
========================= */

/* Neon club palette (alleen voor body.lxon) */
body.lxon {
  /* basis donkerder surface */
  --bg: #0b0d13;
  --paper: #10131a;
  --text: #e7ebf6;
  --muted: #98a2b3;
  --heading: #f2f5ff;

  /* neon accenten */
  --primary: #7b61ff;                 /* neon violet */
  --primary-rgb: 123, 97, 255;
  --brand: #00e5ff;                   /* electric cyan */
  --brand-rgb: 0, 229, 255;
  --aqua: #ff4d8a;                     /* hot pink voor extra pop */
  --overlay-primary: rgba(123,97,255,.26);
  --shadow: 0 12px 32px rgba(0,0,0,.35);

  /* knoppen */
  --menu-color: #fff;
  --menu-accent: var(--brand);
}

/* Header (sticky, transparant -> solid on scroll via .scrolled class indien je script dat zet) */
body.lxon .site-header {
  background: rgba(16,19,26,.55);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: none;
}
body.lxon .site-header.scrolled {
  background: rgba(16,19,26,.92);
}


/* =========================
   HAMBURGER ICON (LXON)
   ========================= */
/* ===== HEADER LAYOUT (LXON variant) ===== */
.site-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;  /* logo in het midden */
  padding: 0.6rem 1.2rem;
  background: transparent;
  z-index: 200;
}

/* Logo gecentreerd */
.site-header .logo-img {
  height: 46px;
  width: auto;
  cursor: pointer;
}

/* Hamburger rechts van logo */
.hamburger {
  position: absolute;      /* positioneer t.o.v. header */
  right: 1.2rem;           /* afstand vanaf rechterrand */
  top: 50%;
  transform: translateY(-50%); /* verticaal centreren */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  cursor: pointer;
  background: transparent;
  border: none;
  z-index: 300;            /* boven hero/overlay */
}

/* Streepjes met gradient (jouw bestaande styling) */
.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #00f0ff, #a000ff);
  box-shadow: 0 0 8px rgba(160,0,255,.6), 0 0 12px rgba(0,240,255,.5);
  transition: all .25s ease;
}

/* Hover en open animatie behouden */
.hamburger:hover span {
  filter: brightness(1.3);
  transform: scaleX(1.05);
}
.hamburger.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* hover = feller + lichte stretch */
.hamburger:hover span {
  filter: brightness(1.35);
  transform: scaleX(1.05);
  box-shadow: 0 0 12px rgba(160,0,255,.8), 0 0 18px rgba(0,240,255,.7);
}

/* open menu → X animatie */
.hamburger.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* optioneel: cursor glow op klik */
.hamburger:active span {
  filter: brightness(1.6);
}

/* Hero (muziek) — zachte neon overlay & glow op titel */
body.lxon .hero.hero-immersive.hero-music .hero-overlay{
  background:
    radial-gradient(60% 60% at 20% 50%, rgba(0,229,255,.22), rgba(0,0,0,0) 60%),
    linear-gradient(110deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.35) 45%, rgba(123,97,255,.35) 100%);
}
body.lxon .hero.hero-immersive .hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
}
body.lxon .hero.hero-immersive .hero-title{
  color: #fff;
  text-shadow: 0 0 24px rgba(0,229,255,.18), 0 0 46px rgba(123,97,255,.18);
}
body.lxon .hero.hero-immersive .hero-ribbon{
  background: linear-gradient(90deg, var(--brand), var(--primary));
  color: #0b0d13;
}

/* ✅ Uniforme CTA-knoppen (gelijke hoogte & optische balans) */
.solid-btn,
.outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px; /* uniforme hoogte */
  padding: 12px 28px;
  border-radius: 16px;
  font-family: 'SocialGothic', sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.2;
  transition: transform .15s ease, filter .2s ease, background .25s ease;
}

/* SOLID variant */
.solid-btn {
  background: linear-gradient(90deg, var(--brand), var(--primary));
  color: #0b0d13;
  border: none;
  box-shadow: 0 10px 28px rgba(0,229,255,.18);
}
.solid-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* OUTLINE variant */
.outline-btn {
  border: 2px solid rgba(123,97,255,.8);
  color: #e7ebf6;
  background: transparent;
  box-shadow: 0 6px 18px rgba(123,97,255,.10);
}
.outline-btn:hover {
  background: rgba(123,97,255,.16);
  filter: brightness(1.05);
}


/* Sectie wrapper */
.section{
  width: 100%;
  max-width: 1200px;
  margin: 48px auto;
  padding: 0 22px;
}
.section-head{ text-align:center; margin-bottom: 18px; }
.section-head h2{ color:#fff; }
.section-head p{ color: var(--muted); }

/* Muziekgrid (4 Spotify iframes) */
.music-grid .grid-embeds{
  display:grid; gap:16px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 820px){
  .music-grid .grid-embeds{ grid-template-columns: 1fr; }
}
.track-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.track-card .track-head h3{
  color:#fff; margin-bottom:10px;
}
.track-card iframe{
  filter: saturate(115%);
  background: #171b24;
  border-radius: 12px;
}

/* Follow row */
.follow-row{
  display:flex; justify-content:center; margin-top: 16px;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.35));
}

/* Over (two-column) */
#about.two-column .left p{ color: var(--muted); }
#about .about-art img{
  width:100%; max-width:520px; height:auto; display:block; border-radius: 20px;
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
}

/* Social iconen */
.socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-right:10px; border-radius:10px;
  color:#fff; background: rgba(255,255,255,.08); text-decoration:none;
  transition: transform .15s ease, background .2s ease;
}
.socials a:hover{
  transform: translateY(-2px);
  background: linear-gradient(90deg, var(--brand), var(--primary));
  color:#0b0d13;
}

/* Gigs */
.gigs .gigs-list{
  display:grid; gap:14px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 820px){ .gigs .gigs-list{ grid-template-columns: 1fr; } }

.gig{
  display:flex; align-items:center; gap:14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:14px;
}
.gig .gig-date{
  width:64px; aspect-ratio:1/1; border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(0,229,255,.15), rgba(123,97,255,.15));
  color:#fff; font-family:'SocialGothic',sans-serif; font-weight:700;
}
.gig .gig-date span{ font-size:.8rem; opacity:.9; }
.gig .gig-date strong{ font-size:1.6rem; line-height:1; }
.gig .gig-info h3{ margin:0 0 4px; color:#fff; }
.gig .gig-info p{ margin:0; color: var(--muted); }
.gig .mini-cta{
  margin-left:auto; text-decoration:none; font-weight:700;
  padding:10px 14px; border-radius:12px; color:#0b0d13;
  background: linear-gradient(90deg, var(--brand), var(--primary));
}

/* Contact */
.section.contact .contact-list{
  list-style:none; padding:0; margin: 8px 0 16px;
}
.section.contact .contact-list li{
  display:flex; align-items:center; gap:10px; margin: 8px 0;
  color: var(--muted);
}
.section.contact .cta-row .solid-btn,
.section.contact .cta-row .outline-btn{ margin-right:10px; }

/* Footer op dark theme */
body.lxon footer{
  background: #0a0c11;
  border-top: 1px solid rgba(255,255,255,.06);
}
body.lxon .footer-links a{ color:#c7d0ff; }
body.lxon .footer-links a:hover{ color: var(--brand); }

/* Mobile menu overlay tint iets donkerder op dark theme */
body.lxon .menu-overlay{ background: rgba(0,0,0,.55); }

/* Hamburger bars in het wit */
body.lxon .hamburger span{ background-color: #fff; }

/* Kleine util: sr-only (voor accessible brand label) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* Alias: laat hero-music zich gedragen als hero-split */
.hero-immersive.hero-music{
  position: relative; isolation: isolate;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  min-height: clamp(560px, 78vh, 860px); color: #fff; overflow: hidden;
  display: grid; place-items: center;
}
.hero-immersive.hero-music .hero-media img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 58%; transform: scale(1.03);
}
.hero-immersive.hero-music .hero-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(11,125,54,.55) 0%, rgba(11,125,54,.38) 32%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.40) 100%),
    radial-gradient(70% 60% at 20% 50%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%);
  mix-blend-mode: normal;
}
.hero-immersive.hero-music .hero-inner{
  position: relative; z-index: 2; width: 100%; max-width: 1200px; padding: 0 24px;
  display: grid; grid-template-columns: 1fr; justify-items: start;
}
.hero-immersive.hero-music .hero-card{
  max-width: 640px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  border-radius: 22px;
  padding: clamp(18px, 3.2vw, 28px) clamp(18px, 3.2vw, 28px) clamp(16px, 3vw, 24px);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  animation: heroRise .6s ease both .06s;
}
.hero-immersive.hero-music .hero-wave{
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
  line-height: 0;
}
.hero-immersive.hero-music .hero-wave svg{ display: block; width: 100%; height: 110px; }

/* Typo/cta/facts uit je bestaande hero-regels blijven gelden */
@media (max-width: 900px){
  .hero-immersive.hero-music{ min-height: clamp(520px, 78vh, 760px); }
  .hero-immersive .hero-card{ max-width: 680px; }
}
@media (max-width: 640px){
  .hero-immersive .hero-card{ padding: 16px 16px 14px; border-radius: 18px; }
  .hero-immersive .hero-facts{ gap: 8px; }
}

/* --- STICKY HEADER FIX (LXON) --- */
:root { --header-h: 90px; }               /* fallback hoogte */

body.lxon .site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1200;                          /* boven content */
  height: var(--header-h);
}

body.lxon main{
  margin-top: var(--header-h);            /* ruimte voor fixed header */
}

/* nette anchor-scroll met fixed header */
html{ scroll-padding-top: var(--header-h); }

/* --- MOBILE: hero direct aansluiten onder header --- */
@media (max-width: 768px){
  /* 1) Geen default marges/border die een spleet geven */
  html, body { margin:0; padding:0; }
  .site-header{
    position: sticky; top:0; z-index:1000;
    margin:0;
    /* laat border-bottom desnoods weg op mobiel */
    /* border-bottom: none; */
  }
  /* 2) Hero: geen top-marge/padding */
  .hero, .hero-immersive, .hero.hero-music{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  /* 3) Afbeelding/picture als block om inline-gap te voorkomen */
  .hero-media, .hero-media picture, .hero-media img{
    display:block;
  }

  /* 4) Zorg dat de afbeelding de hero volledig vult */
  .hero-media{ position:absolute; inset:0; }
  .hero-media img{
    width:100%; height:100%;
    object-fit:cover; object-position:center;
  }
}
/* HERO pan (links→rechts→links) */
.hero-immersive.hero-music .hero-media { 
  position: absolute; inset: 0; overflow: hidden; 
}

.hero-immersive.hero-music .hero-media img{
  position: absolute; inset: 0;
  width: 120%;            /* iets breder zodat er ruimte is om te schuiven */
  height: 100%;
  object-fit: cover;
  /* override evt. eerdere transform/scale */
  transform: translateX(0) scale(1.06);
  animation: heroPanX 18s ease-in-out infinite alternate;
  will-change: transform;
}

/* keyframes: zachte pan */
@keyframes heroPanX{
  0%   { transform: translateX(0)    scale(1.06); }
  50%  { transform: translateX(-8%)  scale(1.06); }
  100% { transform: translateX(0)    scale(1.06); }
}

/* Optioneel: alleen op >=768px (scheelt mobiel-gpu) */
/*
@media (min-width: 768px){
  .hero-immersive.hero-music .hero-media img{ animation: heroPanX 24s ease-in-out infinite alternate; }
}
*/

/* Respecteer 'reduced motion' */
@media (prefers-reduced-motion: reduce){
  .hero-immersive.hero-music .hero-media img{ animation: none; transform: scale(1.03); }
}

/* ===== Releases / Albums layout ===== */

.release-group {
  margin-top: 32px;
}

.release-group h3 {
  color: #fff;
  margin-bottom: 6px;
}

.release-intro {
  color: var(--muted);
  margin: 0 0 18px;
}

/* Album card: groter, meer focus */
.album-grid {
  display: grid;
  gap: 18px;
}

.album-card {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1.6fr);
  gap: 18px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}

.album-art img {
  width: 100%;
  display: block;
  border-radius: 16px;
  object-fit: cover;
}

.album-meta h4 {
  margin: 2px 0 6px;
  color: #fff;
}

.release-type {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin: 0 0 4px;
}

.release-tagline {
  color: var(--muted);
  margin: 0 0 10px;
}

.release-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Kleine variant van je buttons */
.btn-sm {
  padding: 8px 18px;
  font-size: .9rem;
  border-radius: 14px;
}

/* Tracks-sectie iets luchtiger */
.track-card .track-head h4 {
  margin: 2px 0 4px;
  color: #fff;
}

.track-card .release-type {
  margin-bottom: 2px;
}

/* Responsive: album-card stapelt op mobiel */
@media (max-width: 768px) {
  .album-card {
    grid-template-columns: 1fr;
  }
}
.release-icons .icon-btn i {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}

.release-icons {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  align-items: center;
}

.release-icons .icon-btn {
  font-size: 22px;
  color: var(--text-muted, #aaa);
  transition: 0.25s ease;
}

.release-icons .icon-btn:hover {
  color: var(--primary, #1db954);
  transform: scale(1.15);
}