/* ============================================================
   Stoeprandorkest De Kwelpiepers — kwelpiepers.nl
   Vanilla HTML/CSS/JS  ·  geen frameworks, geen WordPress
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --blue-950:#03051c;
  --blue-900:#060a2b;
  --blue-850:#0a1150;
  --blue-800:#0d1a78;
  --blue-700:#1226c9;
  --blue-600:#1b3af5;
  --blue-400:#5a75ff;

  --yellow:#ffe01b;
  --yellow-deep:#ffc400;
  --yellow-soft:#fff5b8;
  --red:#ff2d20;

  --ink:#04061a;
  --paper:#fffdf2;
  --paper-2:#fff8dc;

  --txt-on-dark:#e8ecff;
  --txt-mute-dark:rgba(232,236,255,.66);
  --txt-mute-light:rgba(6,10,43,.68);

  --font-display:"Titan One","Bowlby One","Archivo Black",Impact,system-ui,sans-serif;
  --font-body:"Manrope","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --shell:min(1240px,92vw);
  --r-lg:28px;
  --r-md:18px;
  --r-sm:12px;

  --shadow-1:0 12px 40px rgba(3,5,28,.28);
  --shadow-2:0 30px 90px rgba(3,5,28,.45);
  --shadow-glow:0 0 0 1px rgba(255,224,27,.35),0 20px 60px rgba(255,196,0,.22);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--blue-950);
  color:var(--txt-on-dark);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:4px}

/* ---------- 3. Typografie ---------- */
.display{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.02;
  letter-spacing:.005em;
  text-transform:uppercase;
}
h2.display{font-size:clamp(1.9rem,4.2vw,3.4rem);text-wrap:balance}
h3{font-family:var(--font-body);font-weight:800;letter-spacing:-.01em}
p{font-size:clamp(1rem,1.05vw + .8rem,1.14rem)}

.kicker{
  display:inline-flex;align-items:center;gap:.65rem;
  font-size:.78rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--yellow);
}
.kicker::before{
  content:"";width:34px;height:2px;background:linear-gradient(90deg,transparent,var(--yellow));
}
.kicker.on-light{color:var(--blue-700)}
.kicker.on-light::before{background:linear-gradient(90deg,transparent,var(--blue-700))}

.hl{
  /* dunne gele onderstreping i.p.v. een balk door de tekst */
  background:linear-gradient(180deg,transparent calc(100% - 5px),rgba(255,224,27,.9) calc(100% - 5px));
  background-size:0% 100%;background-repeat:no-repeat;
  padding-bottom:.08em;
  transition:background-size 1.1s var(--ease) .25s;
}
.is-in .hl{background-size:100% 100%}
.on-light .hl,.panel-light .hl{background:linear-gradient(180deg,transparent calc(100% - 5px),rgba(27,58,245,.55) calc(100% - 5px));background-size:0 100%;background-repeat:no-repeat}
.panel-light .is-in .hl{background-size:100% 100%}

/* ---------- 4. Layout ---------- */
.shell{width:var(--shell);margin-inline:auto}
section{position:relative}
.panel{padding:clamp(3.2rem,6.5vw,5.6rem) 0;position:relative;overflow:hidden}
.panel-dark{background:var(--blue-950)}
.panel-blue{background:linear-gradient(165deg,var(--blue-850),var(--blue-950) 70%)}
.panel-light{background:var(--paper);color:var(--ink)}
.panel-light p{color:var(--txt-mute-light)}
.panel-yellow{background:linear-gradient(155deg,var(--yellow) 0%,var(--yellow-deep) 100%);color:var(--ink)}
.panel-yellow p{color:rgba(6,10,43,.78)}

.sec-head{max-width:62ch;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.sec-head h2{margin:.55rem 0 .7rem}
.lead{font-size:clamp(1rem,.9vw + .8rem,1.18rem);color:var(--txt-mute-dark)}
.panel-light .lead,.panel-yellow .lead{color:var(--txt-mute-light)}

/* Verlopende sfeer-blobs */
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.55;z-index:0}
.glow-a{width:46vw;height:46vw;background:radial-gradient(circle,rgba(27,58,245,.65),transparent 65%);top:-12%;right:-10%}
.glow-b{width:38vw;height:38vw;background:radial-gradient(circle,rgba(255,196,0,.35),transparent 62%);bottom:-14%;left:-8%}
.panel>.shell{position:relative;z-index:2}

/* Ruis-textuur */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 5. Knoppen ---------- */
.btn{
  --bg:var(--yellow);--fg:var(--ink);
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  padding:1.05rem 1.9rem;border-radius:999px;
  font-weight:800;font-size:.95rem;letter-spacing:.02em;
  background:var(--bg);color:var(--fg);
  overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),color .35s var(--ease);
  box-shadow:0 10px 30px rgba(255,196,0,.28);
  will-change:transform;
;white-space:nowrap}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  transform:translateY(101%);border-radius:inherit;
  transition:transform .55s var(--ease);
}
.btn:hover{box-shadow:0 18px 44px rgba(255,196,0,.4);color:var(--yellow)}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:scale(.97)}
.btn .ico{transition:transform .45s var(--ease)}
.btn:hover .ico{transform:translateX(4px)}

.btn-ghost{--bg:transparent;--fg:currentColor;box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--yellow);color:var(--ink)}
.btn-ghost::after{background:var(--yellow)}
.panel-yellow .btn-ghost,.panel-light .btn-ghost{box-shadow:inset 0 0 0 2px rgba(6,10,43,.25)}
.panel-yellow .btn-ghost::after,.panel-light .btn-ghost::after{background:var(--blue-700)}
.panel-yellow .btn-ghost:hover,.panel-light .btn-ghost:hover{color:#fff;box-shadow:inset 0 0 0 2px var(--blue-700)}
.btn-blue{--bg:var(--blue-700);--fg:#fff;box-shadow:0 12px 34px rgba(18,38,201,.35)}
.btn-blue::after{background:var(--ink)}
.btn-blue:hover{color:var(--yellow)}
.btn-sm{padding:.7rem 1.25rem;font-size:.84rem}

/* ---------- 6. Preloader ---------- */
.no-js #loader{display:none}
#loader{
  position:fixed;inset:0;z-index:10000;
  display:grid;place-items:center;
  background:var(--blue-950);
  transition:opacity .7s var(--ease),visibility .7s;
}
#loader.done{opacity:0;visibility:hidden}
.loader-in{display:grid;justify-items:center;gap:1.4rem}
.loader-logo{
  width:104px;height:104px;border-radius:26px;overflow:hidden;
  box-shadow:var(--shadow-glow);
  animation:loaderPop 1.1s var(--ease) both,loaderFloat 2.6s ease-in-out 1.1s infinite;
}
@keyframes loaderPop{0%{transform:scale(.5) rotate(-12deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes loaderFloat{50%{transform:translateY(-9px)}}
.loader-bar{width:190px;height:4px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.loader-bar i{display:block;height:100%;width:40%;border-radius:99px;background:linear-gradient(90deg,var(--blue-600),var(--yellow));animation:loaderRun 1.1s var(--ease-io) infinite}
@keyframes loaderRun{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}
.loader-txt{font-size:.72rem;letter-spacing:.36em;text-transform:uppercase;color:var(--txt-mute-dark)}

/* ---------- 7. Scroll-progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9997;background:transparent}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue-600),var(--yellow),var(--red));box-shadow:0 0 14px rgba(255,224,27,.7)}

/* ---------- 8. Navigatie ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  padding:1.1rem 0;
  transition:padding .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease),backdrop-filter .5s;
}
.nav.scrolled{
  padding:.55rem 0;
  background:rgba(6,10,43,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 10px 40px rgba(3,5,28,.45);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand,.nav-cta{flex:0 0 auto}
.nav-links{flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:.85rem}
.brand img{
  width:52px;height:52px;border-radius:14px;
  box-shadow:0 0 0 2px rgba(255,224,27,.4),0 8px 24px rgba(0,0,0,.4);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.brand:hover img{transform:rotate(-8deg) scale(1.07);box-shadow:0 0 0 3px var(--yellow),0 12px 32px rgba(255,196,0,.35)}
.brand-txt{display:grid;line-height:1.25;gap:.12rem;white-space:nowrap}
.brand-txt b{font-family:var(--font-display);font-size:1.16rem;line-height:1.15;letter-spacing:.02em;text-transform:uppercase;color:#fff}
.brand-txt span{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--yellow)}

.nav-links{display:flex;align-items:center;gap:.35rem}
.nav-links a{
  position:relative;padding:.6rem .95rem;border-radius:99px;white-space:nowrap;
  font-size:.9rem;font-weight:700;color:rgba(255,255,255,.82);
  transition:color .35s var(--ease);
}
.nav-links a::before{
  content:"";position:absolute;inset:0;border-radius:99px;background:rgba(255,255,255,.09);
  transform:scale(.7);opacity:0;transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.nav-links a:hover{color:#fff}
.nav-links a:hover::before{transform:scale(1);opacity:1}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::before{background:var(--yellow);transform:scale(1);opacity:1}
.nav-links a span{position:relative}
.nav-cta{display:flex;align-items:center;gap:.6rem}

.burger{display:none;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.08);place-items:center;position:relative;z-index:9500}
.burger i{display:block;width:20px;height:2px;background:#fff;border-radius:2px;position:absolute;transition:transform .45s var(--ease),opacity .3s}
.burger i:nth-child(1){transform:translateY(-6px)}
.burger i:nth-child(3){transform:translateY(6px)}
.burger.open i:nth-child(1){transform:rotate(45deg)}
.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){transform:rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:9400;
  background:linear-gradient(160deg,var(--blue-850),var(--blue-950));
  display:grid;place-content:center;gap:.4rem;
  overflow-y:auto;overscroll-behavior:contain;padding:5rem 1.4rem 2rem;
  clip-path:circle(0% at calc(100% - 46px) 46px);
  transition:clip-path .8s var(--ease);
  visibility:hidden;
}
.drawer.open{clip-path:circle(150% at calc(100% - 46px) 46px);visibility:visible}
.drawer a{
  font-family:var(--font-display);font-size:clamp(2.2rem,9vw,3.6rem);text-transform:uppercase;
  color:#fff;line-height:1.08;
  opacity:0;transform:translateY(28px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;
}
.drawer.open a{opacity:1;transform:none}
.drawer a:hover{color:var(--yellow)}
.drawer small{display:block;margin-top:1.6rem;color:var(--txt-mute-dark);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}

/* ---------- 9. Hero ---------- */
.hero{position:relative;min-height:var(--hero-min,100svh);display:grid;align-items:center;overflow:hidden;background:var(--blue-950)}
.hero-bg{position:absolute;inset:-8% -4%;z-index:0;will-change:transform}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 34%;filter:saturate(1.12) contrast(1.04)}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(3,5,28,.92) 0%,rgba(4,7,34,.78) 34%,rgba(6,10,43,.42) 62%,rgba(6,10,43,.55) 100%),
    radial-gradient(120% 90% at 30% 30%,rgba(6,10,43,.18),rgba(6,10,43,.66) 62%,var(--blue-950) 100%),
    linear-gradient(180deg,rgba(6,10,43,.85) 0%,rgba(6,10,43,.22) 34%,rgba(3,5,28,.95) 100%);
}
.hero-mesh{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(38vw 38vw at 78% 22%,rgba(27,58,245,.5),transparent 60%),
    radial-gradient(30vw 30vw at 12% 78%,rgba(255,196,0,.28),transparent 62%);
  animation:meshDrift 16s ease-in-out infinite alternate;
}
@keyframes meshDrift{100%{transform:translate3d(-3%,2%,0) scale(1.08)}}

.hero-in{position:relative;z-index:3;padding:clamp(6.5rem,11vh,9rem) 0 clamp(5.5rem,10vh,7rem);width:var(--shell);margin-inline:auto}
.hero-badge{
  display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;row-gap:.25rem;
  max-width:min(100%,34rem);text-align:center;
  gap:.6rem;padding:.5rem 1rem .5rem .55rem;border-radius:99px;
  background:rgba(255,255,255,.08);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.hero-badge b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--yellow);color:var(--ink);font-size:.8rem}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(255,45,32,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(255,45,32,0)}100%{box-shadow:0 0 0 0 rgba(255,45,32,0)}}

.hero h1{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(3rem,min(11.5vw,13.5vh),10rem);line-height:.98;letter-spacing:-.005em;
  margin:clamp(.9rem,2vh,1.4rem) 0 clamp(.9rem,2vh,1.3rem);
}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.1em}
.hero h1 .ch{
  display:inline-block;transform:translateY(110%) rotate(6deg);opacity:0;
  animation:chIn .95s var(--ease) forwards;
}
@keyframes chIn{to{transform:none;opacity:1}}
.hero h1 .tint .ch{
  background:linear-gradient(96deg,var(--yellow) 0%,#fff7c9 42%,var(--yellow-deep) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 8px 26px rgba(255,196,0,.3));
}
.hero h1 .tint{color:var(--yellow)}
.hero-sub{max-width:56ch;font-size:clamp(1.05rem,1.2vw + .85rem,1.35rem);color:rgba(232,236,255,.84)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(1.4rem,3vh,2.2rem)}

.hero-stats{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.4rem);margin-top:clamp(1.8rem,4vh,3.2rem)}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(2.2rem,4.4vw,3.4rem);color:var(--yellow);line-height:1}
.stat span{display:block;max-width:22ch;font-size:.78rem;line-height:1.45;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-mute-dark)}

.scroll-hint{
  position:absolute;right:2.2rem;bottom:5.2rem;z-index:4;
  display:grid;justify-items:center;gap:.5rem;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--txt-mute-dark);
}
.scroll-hint i{display:block;width:1px;height:46px;background:linear-gradient(180deg,var(--yellow),transparent);animation:hint 2s ease-in-out infinite}
@keyframes hint{0%,100%{transform:scaleY(.35);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* Zwevende noten */
.notes{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.notes span{
  position:absolute;bottom:-12%;font-size:1.6rem;color:rgba(255,224,27,.5);
  animation:floatNote linear infinite;filter:blur(.2px);
}
@keyframes floatNote{
  0%{transform:translateY(0) rotate(0);opacity:0}
  12%{opacity:.9}
  100%{transform:translateY(-115vh) rotate(320deg);opacity:0}
}

/* ---------- 10. Marquee ---------- */
.marquee{
  position:relative;z-index:5;
  background:var(--yellow);color:var(--ink);
  padding:.85rem 0;overflow:hidden;white-space:nowrap;
  box-shadow:0 -10px 40px rgba(255,196,0,.18);
}
.marquee.blue{background:var(--blue-700);color:#fff}
.marquee-track{display:inline-flex;gap:2.4rem;animation:slide 26s linear infinite;will-change:transform}
.marquee.rev .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  font-family:var(--font-display);font-size:clamp(1.1rem,2vw,1.7rem);line-height:1.25;text-transform:uppercase;letter-spacing:.03em;
  display:inline-flex;align-items:center;gap:2.4rem;
}
.marquee-track span::after{content:"✦";color:var(--red);font-size:.85em}
.marquee.blue .marquee-track span::after{color:var(--yellow)}
@keyframes slide{to{transform:translateX(-50%)}}
.hero .marquee{position:absolute;bottom:0;left:0;right:0;transform:rotate(-1.4deg) scale(1.04)}

/* ---------- 11. Reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal="left"]{transform:translateX(-44px)}
.js [data-reveal="right"]{transform:translateX(44px)}
.js [data-reveal="zoom"]{transform:scale(.92)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- 12. Over ons ---------- */
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.about-copy p+p{margin-top:1.15rem}
.pull{
  margin:2rem 0;padding:1.4rem 1.6rem;border-left:4px solid var(--yellow);
  background:linear-gradient(90deg,rgba(255,224,27,.14),transparent);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.pull b{font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.2rem);text-transform:uppercase;line-height:1.12;color:#fff}
.panel-light .pull b{color:var(--ink)}
.pull span{display:block;margin-top:.6rem;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-mute-dark)}
.panel-light .pull span{color:var(--txt-mute-light)}

.collage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:1rem;perspective:1200px}
.collage figure{
  position:relative;overflow:hidden;border-radius:var(--r-md);
  box-shadow:var(--shadow-1);
  transform-style:preserve-3d;
  transition:transform .8s var(--ease),box-shadow .8s var(--ease);
  cursor:zoom-in;
}
.collage figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform 1.1s var(--ease),filter .6s}
.collage figure:hover img{transform:scale(1.09)}
.collage figure:hover{box-shadow:var(--shadow-2)}
.collage figure:nth-child(1){margin-top:2.4rem}
.collage figure:nth-child(4){margin-top:-1.6rem}
.collage figure::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(3,5,28,.55));
  opacity:0;transition:opacity .5s;
}
.collage figure:hover::after{opacity:1}
.badge-40{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:5;
  width:clamp(96px,11vw,132px);height:clamp(96px,11vw,132px);border-radius:50%;
  display:grid;place-items:center;text-align:center;
  background:var(--red);color:#fff;box-shadow:0 18px 50px rgba(255,45,32,.4);
  font-family:var(--font-display);line-height:.9;text-transform:uppercase;
  animation:spinBadge 18s linear infinite;
}
.badge-40 u{text-decoration:none;display:block;font-size:1.9em}
.badge-40 em{font-style:normal;font-size:.62rem;letter-spacing:.12em;font-family:var(--font-body);font-weight:800}
@keyframes spinBadge{to{transform:rotate(360deg)}}

/* ---------- 13. Agenda ---------- */
.next-gig{
  position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,3vw,3rem);
  padding:clamp(1.6rem,3vw,2.6rem);border-radius:var(--r-lg);
  background:linear-gradient(140deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),var(--shadow-2);
  backdrop-filter:blur(14px);
  overflow:hidden;margin-bottom:2.6rem;
}
.next-gig::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 90% at 88% 10%,rgba(255,196,0,.22),transparent 60%);
}
.next-gig>*{position:relative;z-index:1}
.next-label{display:inline-flex;align-items:center;gap:.55rem;font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow)}
.next-gig h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,3.6vw,3.1rem);text-transform:uppercase;line-height:1.06;margin:1rem 0 .9rem;color:#fff}
.next-meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.4rem}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .85rem;border-radius:99px;
  font-size:.82rem;font-weight:700;background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;align-content:center}
.cd-cell{
  text-align:center;padding:1rem .4rem;border-radius:var(--r-md);
  background:rgba(3,5,28,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.cd-cell b{display:block;font-family:var(--font-display);font-size:clamp(1.6rem,3.4vw,2.6rem);color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.cd-cell span{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-mute-dark)}

.gig-list{display:grid;gap:.9rem}
.gig{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2.4vw,2rem);align-items:center;
  padding:1.15rem clamp(1.1rem,2.4vw,1.8rem);border-radius:var(--r-md);
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  overflow:hidden;
  transition:transform .55s var(--ease),background .45s,box-shadow .55s var(--ease);
}
.gig::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--yellow);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);
}
.gig:hover{transform:translateX(8px);background:rgba(255,255,255,.085);box-shadow:inset 0 0 0 1px rgba(255,224,27,.4)}
.gig:hover::before{transform:scaleY(1);transform-origin:top}
.gig-date{
  display:grid;justify-items:center;min-width:74px;padding:.55rem .7rem;border-radius:var(--r-sm);
  background:linear-gradient(160deg,var(--blue-700),var(--blue-850));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.gig-date b{font-family:var(--font-display);font-size:1.9rem;line-height:1.1;color:#fff}
.gig-date span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.gig-body h4{font-size:1.12rem;font-weight:800;line-height:1.35;margin:.25rem 0 .3rem}
.gig-body p{font-size:.88rem;color:var(--txt-mute-dark);margin:0}
.gig-day{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);font-weight:800}

.agenda-note{margin-top:1.6rem;font-size:.9rem;color:var(--txt-mute-dark)}

/* ---------- 14. Word vriend ---------- */
.friend-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.tiers{display:grid;gap:1.1rem}
.tier{
  position:relative;padding:1.6rem 1.7rem;border-radius:var(--r-lg);
  background:rgba(6,10,43,.06);
  box-shadow:inset 0 0 0 2px rgba(6,10,43,.14);
  overflow:hidden;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),background .5s;
}
.tier::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .9s var(--ease);
}
.tier:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 2px var(--ink),0 22px 50px rgba(6,10,43,.22);background:rgba(255,255,255,.42)}
.tier:hover::after{left:130%}
.tier.pop{background:var(--ink);color:#fff;box-shadow:0 22px 60px rgba(6,10,43,.35)}
.tier.pop .price{color:var(--yellow)}
.tier.pop:hover{box-shadow:0 28px 70px rgba(6,10,43,.5);background:var(--ink)}
.tier .price{font-family:var(--font-display);font-size:clamp(2.6rem,5vw,3.6rem);line-height:1.1;color:var(--blue-700)}
.tier .price small{font-size:.32em;font-family:var(--font-body);font-weight:800;letter-spacing:.08em}
.tier h3{margin:.35rem 0 1rem;font-size:1.1rem;letter-spacing:.02em}
.tier ul{display:grid;gap:.6rem;font-size:.94rem}
.tier li{display:flex;gap:.65rem;align-items:flex-start;line-height:1.45}
.tier li i{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--yellow);color:var(--ink);font-size:.7rem;font-style:normal;font-weight:900;margin-top:.15rem}
.tier.pop li i{background:var(--yellow)}
.ribbon{
  position:absolute;top:1.3rem;right:1.3rem;
  background:var(--red);color:#fff;padding:.4rem .9rem;border-radius:99px;
  font-size:.64rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 8px 20px rgba(255,45,32,.35);
}

.iban-card{
  padding:1.5rem 1.6rem;border-radius:var(--r-lg);
  background:var(--ink);color:#fff;box-shadow:var(--shadow-2);
  position:relative;overflow:hidden;
}
.iban-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 100% at 100% 0%,rgba(27,58,245,.5),transparent 60%);
}
.iban-card>*{position:relative}
.iban-card small{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow)}
.iban-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.5rem 0 .3rem;flex-wrap:wrap}
.iban{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(1.05rem,2.2vw,1.5rem);letter-spacing:.06em;color:#fff}
.iban-card p{color:rgba(255,255,255,.72)!important;font-size:.88rem;margin-top:.6rem}
.copy-btn{padding:.6rem 1.1rem;border-radius:99px;background:var(--yellow);color:var(--ink);font-weight:800;font-size:.82rem;transition:transform .4s var(--ease),background .3s}
.copy-btn:hover{transform:translateY(-2px)}
.copy-btn.ok{background:#2ecc71;color:#fff}

.pin-showcase{position:relative;perspective:1000px}
.pin-showcase>img{border-radius:var(--r-lg);box-shadow:var(--shadow-2);width:100%;aspect-ratio:1/1;object-fit:cover;cursor:zoom-in}
.pin-float{
  position:absolute;right:-6%;bottom:-8%;width:44%;border-radius:var(--r-md);
  box-shadow:0 26px 60px rgba(6,10,43,.4);
  animation:pinFloat 5s ease-in-out infinite;
}
@keyframes pinFloat{50%{transform:translateY(-14px) rotate(-3deg)}}

/* ---------- 15. Vacatures ---------- */
.vac-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.vac{
  position:relative;padding:clamp(1.8rem,3vw,2.6rem);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .7s var(--ease),box-shadow .7s var(--ease);
}
.vac .vac-bg{position:absolute;inset:0;z-index:0;opacity:.42;transition:opacity .7s,transform 1.2s var(--ease)}
.vac .vac-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2)}
.vac::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,5,28,.35),rgba(3,5,28,.9));z-index:1}
.vac>*{position:relative;z-index:2}
.vac:hover{transform:translateY(-8px);box-shadow:inset 0 0 0 1px var(--yellow),var(--shadow-2)}
.vac:hover .vac-bg{opacity:.5;transform:scale(1.06)}
.vac .instr{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.6rem);text-transform:uppercase;line-height:1.04;color:#fff}
.vac .open-tag{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;margin-bottom:auto;
  padding:.45rem .9rem;border-radius:99px;background:var(--red);color:#fff;
  font-size:.7rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
}
.vac p{margin:.7rem 0 1.3rem;color:var(--txt-mute-dark);font-size:.98rem}
.vac .btn{align-self:flex-start}

.rehearsal{
  margin-top:1.4rem;display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:center;
  padding:1.4rem 1.6rem;border-radius:var(--r-lg);
  background:linear-gradient(120deg,var(--yellow),var(--yellow-deep));color:var(--ink);
  box-shadow:0 20px 50px rgba(255,196,0,.22);
}
.rehearsal .rh-ico{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:var(--ink);color:var(--yellow);font-size:1.6rem}
.rehearsal b{display:block;font-family:var(--font-display);font-size:1.35rem;text-transform:uppercase;line-height:1.22;margin-bottom:.25rem}
.rehearsal .rh-txt{font-size:.95rem;color:rgba(6,10,43,.78)}

/* ---------- 16. Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.4rem);align-items:start}
.cards{display:grid;gap:1rem}
.ccard{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center;
  padding:1.3rem 1.5rem;border-radius:var(--r-lg);
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .55s var(--ease),background .4s,box-shadow .55s var(--ease);
}
.ccard:hover{transform:translateY(-4px);background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px var(--yellow),var(--shadow-1)}
.ccard .ci{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:linear-gradient(150deg,var(--blue-600),var(--blue-850));font-size:1.4rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.ccard small{display:block;margin-bottom:.25rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow)}
.ccard b{font-size:1.06rem;font-weight:800;line-height:1.4;color:#fff;word-break:break-word}
.ccard .arr{opacity:.5;transition:transform .5s var(--ease),opacity .4s}
.ccard:hover .arr{transform:translateX(5px);opacity:1}

.photo-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.photo-strip figure{overflow:hidden;border-radius:var(--r-md);box-shadow:var(--shadow-1);cursor:zoom-in}
.photo-strip img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1s var(--ease),filter .5s}
.photo-strip figure:hover img{transform:scale(1.08) rotate(-1deg)}

/* ---------- 17. Footer ---------- */
.foot{background:var(--blue-950);padding:clamp(3.5rem,7vw,5.5rem) 0 2rem;position:relative;overflow:hidden}
.foot-in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.4rem;align-items:start}
.foot .brand img{width:64px;height:64px}
.foot p{color:var(--txt-mute-dark);font-size:.95rem;margin-top:1.1rem;max-width:44ch}
.foot h5{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-bottom:1rem}
.foot ul{display:grid;gap:.6rem;font-size:.95rem}
.foot ul a{color:var(--txt-mute-dark);transition:color .35s,transform .35s var(--ease);display:inline-block}
.foot ul a:hover{color:var(--yellow);transform:translateX(4px)}
.foot-bottom{margin-top:3rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:var(--txt-mute-dark)}

/* ---------- 18. Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:9600;display:grid;place-items:center;padding:4vmin;
  background:rgba(3,5,28,.92);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:var(--r-md);box-shadow:var(--shadow-2);transform:scale(.9);transition:transform .55s var(--ease)}
.lightbox.open img{transform:scale(1)}
.lb-close,.lb-nav{
  position:absolute;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.3rem;
  transition:background .35s,transform .35s var(--ease);
}
.lb-close:hover,.lb-nav:hover{background:var(--yellow);color:var(--ink);transform:scale(1.08)}
.lb-close{top:2.4vmin;right:2.4vmin}
.lb-prev{left:3vmin}
.lb-next{right:3vmin}
.lb-count{position:absolute;bottom:2.6vmin;left:50%;transform:translateX(-50%);font-size:.8rem;letter-spacing:.2em;color:var(--txt-mute-dark)}

/* ---------- 19. Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:2.2rem;translate:-50% 0;z-index:9700;
  padding:.9rem 1.4rem;border-radius:99px;background:var(--ink);color:#fff;
  box-shadow:var(--shadow-2);font-size:.9rem;font-weight:700;
  opacity:0;transform:translateY(24px);transition:opacity .4s var(--ease),transform .4s var(--ease);
  pointer-events:none;
}
.toast.show{opacity:1;transform:none}
.toast i{color:var(--yellow);font-style:normal}

/* ---------- 20. Terug-naar-boven ---------- */
.totop{
  position:fixed;right:1.6rem;bottom:1.6rem;z-index:9200;
  transition:bottom .8s var(--ease);
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--yellow);color:var(--ink);font-size:1.1rem;font-weight:900;
  box-shadow:0 14px 34px rgba(255,196,0,.35);
  opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.totop.show{opacity:1;transform:none;pointer-events:auto}
body.bus-aan .totop{bottom:calc(clamp(120px,15vw,180px) + 1rem)}
.totop:hover{transform:translateY(-4px) scale(1.06)}

/* ---------- 21. Responsive ---------- */
@media (max-width:1024px){
  .about-grid,.friend-grid,.contact-grid,.next-gig{grid-template-columns:1fr}
  .countdown{grid-template-columns:repeat(4,1fr)}
  .foot-in{grid-template-columns:1fr 1fr}
}
/* Het menu heeft negen items. Wordt de balk krap, dan krimpen de knopjes
   eerst een slag; past het daarna nog niet, dan gaat alles naar de burger.
   Zo breekt er nooit een menu-item over twee regels. */
@media (max-width:1700px){
  .nav-links{gap:.05rem}
  .nav-links a{padding:.5rem .6rem;font-size:.82rem}
  .nav-in{gap:.8rem}
  .brand img{width:46px;height:46px}
}
@media (max-width:1300px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:grid}
}

@media (max-width:1100px),(max-height:820px){
  .scroll-hint{display:none}
}
@media (max-width:820px){
  .vac-grid{grid-template-columns:1fr}
  .hero-in{padding:7.5rem 0 8rem}
  .hero .marquee{transform:rotate(-2deg) scale(1.06)}
  .gig{grid-template-columns:auto 1fr;row-gap:.8rem}
  /* de voettekst in twee kolommen: één kolom werd met ruimere links
     bijna twee meter lang op een telefoon */
  .foot-in{grid-template-columns:1fr 1fr;gap:1.6rem}
  .foot-in > :first-child{grid-column:1 / -1}
  .scroll-hint{display:none}
  .pin-float{position:static;width:100%;margin-top:1rem;animation:none}
}
@media (max-width:520px){
  .collage{grid-template-columns:1fr 1fr;gap:.7rem}
  .badge-40{width:84px;height:84px}
  .countdown{grid-template-columns:repeat(2,1fr)}
  .photo-strip{grid-template-columns:1fr 1fr}
}

/* ---------- 22. Minder beweging ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .hero h1 .ch{opacity:1;transform:none}
}

/* ---------- 23. Print ---------- */
@media print{
  .nav,.marquee,.totop,.scroll-hint,.notes,.progress,#loader{display:none!important}
  body{background:#fff;color:#000}
}

/* ════════════════════════════════════════════════════════════
   24. Update — eigen iconen, licht ritme, beeldmoment,
       hero-ticket, collage, footer-woordmerk, filmische intro
   ════════════════════════════════════════════════════════════ */

/* ---------- 24.1 Iconen ---------- */
.ic{width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.2em}
.chip .ic{width:1.05em;height:1.05em;color:var(--yellow)}
.gig-body p .ic{color:var(--yellow);opacity:.8}
.ccard .ci .ic{width:26px;height:26px;color:var(--yellow)}
.rehearsal .rh-ico .ic{width:30px;height:30px}
.tier li i .ic{width:13px;height:13px;color:var(--ink)}
.hero-badge b .ic{width:14px;height:14px;color:var(--ink)}
.foot-bottom .ic{color:var(--yellow);width:1.1em;height:1.1em}

/* ---------- 24.2 Licht paneel (Vacatures) ---------- */
.glow-c{width:42vw;height:42vw;background:radial-gradient(circle,rgba(27,58,245,.16),transparent 62%);top:-14%;right:-8%;opacity:.9}
.panel-light .kicker{color:var(--blue-700)}
.panel-light .kicker::before{background:linear-gradient(90deg,transparent,var(--blue-700))}
.panel-light .vac{
  background:linear-gradient(150deg,var(--blue-850),var(--blue-950));
  box-shadow:0 20px 60px rgba(6,10,43,.22),inset 0 0 0 1px rgba(6,10,43,.08);
  color:var(--txt-on-dark);
}
.panel-light .vac p{color:var(--txt-mute-dark)}
.panel-light .vac:hover{box-shadow:0 30px 70px rgba(6,10,43,.3),inset 0 0 0 1px var(--yellow)}
.panel-light .rehearsal{box-shadow:0 20px 50px rgba(255,196,0,.35),inset 0 0 0 1px rgba(6,10,43,.08)}

/* ---------- 24.3 Sectiekop gecentreerd ---------- */
.sec-head.center{margin-inline:auto;text-align:center;max-width:56ch}
.sec-head.center .kicker::before{display:none}
.sec-head.center .kicker::after{content:"";width:34px;height:2px;background:linear-gradient(90deg,var(--blue-700),transparent)}
.sec-head.center .kicker{gap:.65rem}

/* ---------- 24.4 Contact omgedraaid ---------- */
@media (min-width:1025px){
  .contact-grid.flip .photo-strip{order:-1}
}

/* ---------- 24.5 Gestreepte marquee ---------- */
.marquee.striped{
  background:
    repeating-linear-gradient(135deg,rgba(255,224,27,.14) 0 18px,transparent 18px 36px),
    linear-gradient(90deg,var(--blue-700),var(--blue-800));
  color:#fff;
  box-shadow:0 -8px 34px rgba(18,38,201,.28);
}
.marquee.striped .marquee-track span::after{color:var(--yellow)}

/* ---------- 24.6 Hero-ticket ---------- */
.hero-ticket{
  position:absolute;z-index:4;right:5vw;top:50%;
  width:clamp(260px,23vw,330px);
  transform:translateY(-50%) rotate(-4.5deg);
  padding:1.4rem 1.5rem 1.5rem;
  border-radius:22px;
  background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 30px 80px rgba(3,5,28,.55);
  color:#fff;
  opacity:0;transform:translateY(-46%) rotate(-9deg) scale(.94);
  transition:opacity .9s var(--ease),transform .9s var(--ease),box-shadow .7s var(--ease);
}
.hero-ticket.show{opacity:1;transform:translateY(-50%) rotate(-4.5deg) scale(1)}
.hero-ticket:hover{transform:translateY(-50%) rotate(-1.5deg) scale(1.03);box-shadow:inset 0 0 0 1px var(--yellow),0 36px 90px rgba(3,5,28,.6)}
.hero-ticket .tk-top{display:flex;align-items:center;justify-content:space-between;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);font-weight:800}
.hero-ticket .tk-date{font-family:var(--font-display);font-size:2.6rem;line-height:1.05;margin:.8rem 0 .25rem}
.hero-ticket .tk-day{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hero-ticket h4{font-size:1.05rem;font-weight:800;margin:.7rem 0 .2rem;line-height:1.25}
.hero-ticket .tk-place{font-size:.82rem;color:rgba(255,255,255,.72);display:flex;gap:.4rem;align-items:flex-start}
.hero-ticket .tk-place .ic{color:var(--yellow);margin-top:.15rem}
.hero-ticket .tk-cut{
  position:relative;height:1px;margin:1.1rem -1.5rem;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 6px,transparent 6px 12px);
}
.hero-ticket .tk-cut::before,.hero-ticket .tk-cut::after{
  content:"";position:absolute;top:50%;width:20px;height:20px;border-radius:50%;
  background:var(--blue-950);translate:0 -50%;
}
.hero-ticket .tk-cut::before{left:-10px}
.hero-ticket .tk-cut::after{right:-10px}
.hero-ticket .tk-cd{display:flex;gap:.9rem;font-variant-numeric:tabular-nums}
.hero-ticket .tk-cd div{text-align:center}
.hero-ticket .tk-cd b{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--yellow);line-height:1}
.hero-ticket .tk-cd span{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
@media (max-width:1180px){.hero-ticket{display:none}}

/* ---------- 24.7 Collage: één grote + drie kiekjes ---------- */
.collage{
  grid-template-columns:repeat(5,1fr);
  grid-auto-rows:auto;
  gap:.9rem;
}
.collage figure{
  border:5px solid #fff;border-radius:10px;background:#fff;
  box-shadow:0 18px 44px rgba(3,5,28,.5);
  margin:0!important;
}
.collage figure img{aspect-ratio:4/3;border-radius:5px}
.collage figure:nth-child(1){grid-column:1/4;grid-row:1/3;rotate:-1.6deg}
.collage figure:nth-child(1) img{aspect-ratio:1/1}
.collage figure:nth-child(2){grid-column:4/6;grid-row:1/2;rotate:2.4deg}
.collage figure:nth-child(3){grid-column:4/6;grid-row:2/3;rotate:-2.2deg;z-index:2}
.collage figure:nth-child(4){grid-column:1/4;grid-row:3/4;rotate:1.4deg}
.collage figure:hover{rotate:0deg;z-index:5}
.badge-40{
  position:absolute;left:auto;right:2%;bottom:2%;top:auto;translate:0 0;
  width:clamp(104px,12vw,140px);height:clamp(104px,12vw,140px);
  animation:none;transition:transform .8s var(--ease),box-shadow .6s var(--ease);
  display:grid;place-content:center;gap:0;
}
.badge-40 u{font-size:2.3rem;line-height:1.05}
.badge-40 em{font-size:.74rem;letter-spacing:.18em}
.collage:hover .badge-40{transform:rotate(-12deg) scale(1.06);box-shadow:0 22px 60px rgba(255,45,32,.5)}

/* ---------- 24.8 Beeldmoment met quote ---------- */
.quote-break{position:relative;height:clamp(420px,62vh,660px);overflow:hidden;display:grid;place-items:center;background:var(--blue-950)}
.qb-media{position:absolute;inset:-14% 0;z-index:0;will-change:transform}
.qb-media img{width:100%;height:100%;object-fit:cover}
.quote-break::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(70% 100% at 50% 50%,rgba(3,5,28,.28),rgba(3,5,28,.82) 78%),
    linear-gradient(180deg,rgba(3,5,28,.9),transparent 26%,transparent 72%,rgba(3,5,28,.92));
}
.quote-break blockquote{position:relative;z-index:2;text-align:center;padding:0 6vw;max-width:1100px}
.qb-mark{
  display:block;font-family:var(--font-display);font-size:clamp(4rem,9vw,7rem);line-height:.4;
  color:var(--yellow);opacity:.85;margin-bottom:.35em;
}
.quote-break blockquote p{
  font-size:clamp(2.4rem,7.5vw,6rem);color:#fff;line-height:1.04;
  text-shadow:0 18px 60px rgba(3,5,28,.6);
}
.quote-break cite{
  display:block;margin-top:1.6rem;font-style:normal;
  font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--yellow);
}

/* ---------- 24.9 Footer-woordmerk ---------- */
.foot{padding-bottom:0}
.foot-wordmark{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(3.6rem,15.5vw,15rem);line-height:.95;
  text-align:center;white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.16);
  margin-top:2.2rem;
  transform:translateY(24%);
  pointer-events:none;user-select:none;
}
@supports not ((-webkit-text-stroke:1px #000)){.foot-wordmark{color:rgba(255,255,255,.07)}}

/* ---------- 24.10 Filmische intro ---------- */
.intro{position:fixed;inset:0;z-index:9999;pointer-events:none}
.intro-curtain{
  position:absolute;top:0;bottom:0;width:50.5%;
  background:linear-gradient(160deg,var(--blue-800),var(--blue-950));
  box-shadow:0 0 80px rgba(0,0,0,.6);
  transition:transform 1.15s cubic-bezier(.76,0,.24,1);
}
.intro-curtain.l{left:0;box-shadow:inset -3px 0 0 var(--red),0 0 80px rgba(0,0,0,.6)}
.intro-curtain.r{right:0;background:linear-gradient(200deg,var(--yellow),var(--yellow-deep));box-shadow:inset 3px 0 0 var(--red),0 0 80px rgba(0,0,0,.6)}
.intro-bars{position:absolute;inset:0;z-index:3}
.intro-bars::before,.intro-bars::after{
  content:"";position:absolute;left:0;right:0;height:12vh;background:#000;
  transition:transform 1s var(--ease) .35s;
}
.intro-bars::before{top:0}
.intro-bars::after{bottom:0}
.intro-logo{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:clamp(96px,12vw,150px);border-radius:26px;overflow:hidden;
  box-shadow:0 0 0 2px rgba(255,255,255,.35),0 30px 80px rgba(0,0,0,.6);
  animation:introLogo 1.5s var(--ease) both;
}
@keyframes introLogo{
  0%{opacity:0;transform:scale(.55) rotate(-14deg)}
  38%{opacity:1;transform:scale(1.06) rotate(2deg)}
  62%{transform:scale(1) rotate(0)}
  100%{opacity:0;transform:scale(1.5) rotate(0);filter:blur(6px)}
}
.intro.open .intro-curtain.l{transform:translateX(-101%)}
.intro.open .intro-curtain.r{transform:translateX(101%)}
.intro.open .intro-bars::before{transform:translateY(-101%)}
.intro.open .intro-bars::after{transform:translateY(101%)}
.intro.done{display:none}
.intro-skip{
  position:absolute;right:2rem;bottom:calc(12vh + 1.4rem);z-index:2;pointer-events:auto;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55);
  transition:color .3s,opacity .6s;
}
.intro-skip:hover{color:#fff}
.intro.open .intro-skip{opacity:0}
/* de hero zoomt filmisch uit terwijl het gordijn opent */
.cinema .hero-bg img{animation:heroZoom 3.4s var(--ease) both}
@keyframes heroZoom{from{transform:scale(1.22)}to{transform:scale(1)}}

@media (max-width:820px){
  .intro-bars::before,.intro-bars::after{height:8vh}
  .intro-skip{right:1.2rem;bottom:calc(8vh + 1rem)}
  .quote-break{height:clamp(360px,52vh,520px)}
  .collage figure:nth-child(1) img{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  .intro{display:none!important}
  .hero-ticket{opacity:1;transform:translateY(-50%) rotate(-4.5deg)}
}

/* ---------- 24.11 Collage op kleine schermen ---------- */
@media (max-width:720px){
  .collage{grid-template-columns:1fr 1fr;gap:.7rem}
  .collage figure{border-width:4px}
  .collage figure:nth-child(1){grid-column:1/3;grid-row:auto}
  .collage figure:nth-child(1) img{aspect-ratio:4/3}
  .collage figure:nth-child(2){grid-column:1/2;grid-row:auto}
  .collage figure:nth-child(3){grid-column:2/3;grid-row:auto}
  .collage figure:nth-child(4){grid-column:1/3;grid-row:auto}
  .badge-40{width:88px;height:88px;right:4%;bottom:-4%}
  .badge-40 u{font-size:1.9rem}
  .badge-40 em{font-size:.6rem}
}

/* ---------- 24.12 Adreslink in de repetitiebalk ---------- */
.rh-txt{display:block}
.rh-map{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.7rem;
  padding:.5rem 1rem;border-radius:99px;
  background:var(--ink);color:#fff;
  font-size:.85rem;font-weight:700;
  box-shadow:0 8px 22px rgba(6,10,43,.28);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),color .3s;
}
.rh-map .ic{color:var(--yellow);width:1.05em;height:1.05em}
.rh-map .ico{transition:transform .4s var(--ease);opacity:.6}
.rh-map:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(6,10,43,.4);color:var(--yellow)}
.rh-map:hover .ico{transform:translateX(4px);opacity:1}
.rehearsal{align-items:start}
.rehearsal .rh-ico{margin-top:.15rem}

/* ---------- 24.13 Gecentreerde intro rustiger laten lezen ---------- */
.sec-head.center .lead{max-width:42ch;margin-inline:auto;line-height:1.55;text-wrap:balance}
.sub-note{
  max-width:52ch;margin:1.1rem auto 0;text-align:center;text-wrap:balance;
  font-size:.95rem;line-height:1.6;opacity:.72;
}
.panel-light .sub-note{color:var(--txt-mute-light)}
@media (max-width:620px){
  .sec-head.center .lead br{display:none}
}

/* ---------- 24.14 Jubileumbadge met tekst ---------- */
.badge-40{line-height:1.05;padding:.4rem}
.badge-40 .pre{
  display:block;font-family:var(--font-body);font-weight:800;
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:.9;margin-bottom:.15rem;
}
.badge-40 u{font-size:2.5rem;line-height:1}
.badge-40 em{font-size:.66rem;letter-spacing:.22em}
@media (max-width:720px){
  .badge-40 .pre{font-size:.5rem;letter-spacing:.1em}
  .badge-40 u{font-size:1.7rem}
  .badge-40 em{font-size:.55rem;letter-spacing:.14em}
}

/* ---------- 24.15 Terzijde-tekst (klein) ---------- */
.terzijde{
  margin-top:.7rem;max-width:52ch;
  font-size:.88rem;line-height:1.55;opacity:.7;font-style:italic;
}

/* ---------- 24.16 Facebook ---------- */
.foot ul a .ic{width:1em;height:1em;color:var(--yellow);margin-right:.35rem;vertical-align:-.12em}

/* ---------- 24.17 Fotostrip in Over ons ---------- */
.filmstrip{
  position:relative;margin-top:clamp(2.6rem,5vw,4.2rem);overflow:hidden;
  /* schermbreed, ook al staat de strip binnen de kolom */
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;
  margin-bottom:clamp(2rem,4vw,3.4rem);
  padding-block:.6rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.filmstrip-track{display:flex;gap:1rem;width:max-content;animation:slide 60s linear infinite;will-change:transform}
.filmstrip:hover .filmstrip-track{animation-play-state:paused}
.filmstrip figure{
  flex:0 0 auto;width:clamp(170px,19vw,265px);
  border:5px solid #fff;border-radius:10px;background:#fff;overflow:hidden;
  box-shadow:0 14px 34px rgba(3,5,28,.45);
  cursor:zoom-in;transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.filmstrip figure:nth-child(even){rotate:-1.2deg}
.filmstrip figure:nth-child(odd){rotate:1deg}
.filmstrip figure:hover{transform:translateY(-8px) scale(1.03);rotate:0deg;box-shadow:var(--shadow-2);z-index:2}
.filmstrip img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:5px;display:block}
@media (prefers-reduced-motion:reduce){
  .filmstrip{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .filmstrip-track{animation:none}
}
@media (max-width:620px){
  .filmstrip figure{width:150px;border-width:4px}
}

/* ════════════════════════════════════════════════════════════
   25. Onderweg door Brabant — animatiebalk met de touringcar
   ════════════════════════════════════════════════════════════ */
.busrit{
  position:fixed;left:0;right:0;bottom:0;z-index:8000;
  overflow:hidden;pointer-events:none;
  height:clamp(120px,15vw,180px);
  background:linear-gradient(180deg,rgba(3,5,28,0) 0%,#1b2a8f 30%,#ff9d1c 76%,var(--yellow) 100%);
  transform:translateY(102%);
  transition:transform .8s var(--ease);
  box-shadow:0 -18px 50px rgba(3,5,28,.45);
}
.busrit.zichtbaar{transform:none}
.busrit::before{ /* zon */
  content:"";position:absolute;left:22%;bottom:26%;
  width:clamp(60px,7vw,96px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff6c2,var(--yellow) 62%,rgba(255,196,0,0) 72%);
  filter:blur(.4px);opacity:.95;
}
.busrit-track{position:absolute;inset:0;display:flex;width:200%;animation:slide 34s linear infinite}
.busrit-track .landschap{width:50%;height:100%;flex:0 0 50%}
.landschap path,.landschap circle,.landschap rect,.landschap ellipse{fill:#0a1150}
.landschap .ver{fill:#132070;opacity:.85}
.landschap .voor{fill:#060c34}
.landschap .raam{fill:var(--yellow);opacity:.9}
.landschap .mast path{fill:none;stroke:#0a1150;stroke-width:4}
.landschap .lijn{fill:none;stroke:#0a1150;stroke-width:3;stroke-linecap:round;opacity:.45}
.landschap .bord{fill:#1b3af5}
.landschap .bordtekst{
  fill:#fff;font-family:var(--font-display);font-size:15px;letter-spacing:.04em;
}
body.dagdeel-dag .landschap .lijn{stroke:#12246b}
.wieken{transform-box:fill-box;transform-origin:center;animation:draaiWiek 11s linear infinite}
@keyframes draaiWiek{to{transform:rotate(360deg)}}

/* de weg */
.busrit-weg{position:absolute;left:0;right:0;bottom:0;height:22%;background:#04061a;box-shadow:0 -2px 0 rgba(255,224,27,.35)}
.busrit-weg .strepen{
  position:absolute;left:0;right:0;top:48%;height:4px;
  background:repeating-linear-gradient(90deg,var(--yellow) 0 46px,transparent 46px 104px);
  opacity:.75;animation:strepen 1.1s linear infinite;
}
@keyframes strepen{to{transform:translateX(-104px)}}

/* de bus */
.busrit-bus{
  position:absolute;left:50%;bottom:calc(22% - 20px);translate:-50% 0;
  width:clamp(230px,32vw,420px);z-index:3;
  animation:hobbel 1.5s ease-in-out infinite;
  filter:drop-shadow(0 12px 18px rgba(4,6,26,.5));
}
@keyframes hobbel{0%,100%{transform:translateY(0) rotate(-.25deg)}50%{transform:translateY(-3px) rotate(.25deg)}}
.busrit-bus .schaduw{fill:rgba(4,6,26,.35)}
.busrit-bus .body{fill:var(--yellow);stroke:#04061a;stroke-width:2.5;stroke-linejoin:round}
.busrit-bus .dak{fill:#1226c9}
.busrit-bus .raam path{fill:#0a1150;stroke:#04061a;stroke-width:1.5}
.busrit-bus .deur{fill:#0a1150;stroke:#04061a;stroke-width:1.5}
/* passagiers achter het glas */
.busrit-bus .mensen{opacity:.94}
.busrit-bus .romp{fill:#ffd84d}
.busrit-bus .jas{stroke:#8a6a10;stroke-width:.8}
.busrit-bus .sjaal{fill:#1226c9}
.busrit-bus .hals{fill:#f6d9a0}
.busrit-bus .hoofd{fill:#ffe3ab;stroke:#a97c3a;stroke-width:.6}
.busrit-bus .oog{fill:#3a2410}
.busrit-bus .haar.bruin{fill:#6b4423}
.busrit-bus .haar.blond{fill:#e0b657}
.busrit-bus .haar.grijs{fill:#d6dcf2}
.busrit-bus .haar.donker{fill:#33261c}
.busrit-bus .pet{fill:#1226c9}
.busrit-bus .pet.klep{fill:#0a1150}
.busrit-bus .arm rect{fill:#ffe9a8}
.busrit-bus .toeter{fill:#ffb03a;stroke:#5a3306;stroke-width:.9;stroke-linejoin:round}
.busrit-bus .bel{fill:#ffc95e}
.busrit-bus .klep{fill:#5a3306}
.busrit-bus .ring{fill:none;stroke:#ffb03a;stroke-width:2.8}
.busrit-bus .beugel{fill:none;stroke:#ffb03a;stroke-width:1.7;stroke-linecap:round}
.busrit-bus .rand{fill:#ffd98a;stroke:#5a3306;stroke-width:.9}
.busrit-bus .mond{fill:#7a3b12}

.busrit-bus .mens{transform-box:fill-box;transform-origin:bottom center}
.busrit-bus .deint{animation:deinen 1s ease-in-out infinite}
.busrit-bus .wieg{animation:wiegen 1.6s ease-in-out infinite}
.busrit-bus .traag{animation-duration:1.7s;animation-delay:.3s}
.busrit-bus .snel{animation-duration:.8s;animation-delay:.15s}
@keyframes deinen{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.2px)}}
@keyframes wiegen{0%,100%{transform:rotate(-4.5deg)}50%{transform:rotate(4.5deg)}}

.busrit-bus .arm{transform-box:fill-box;transform-origin:bottom center}
.busrit-bus .zwaai{animation:zwaaien 1.1s ease-in-out infinite}
.busrit-bus .zwaai.traag{animation-duration:1.5s;animation-delay:.25s}
.busrit-bus .zwaai.snel{animation-duration:.85s;animation-delay:.5s}
@keyframes zwaaien{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-26deg)}}
.busrit-bus .klap{animation:klappen .5s ease-in-out infinite}
@keyframes klappen{0%,100%{transform:rotate(-30deg)}50%{transform:rotate(6deg)}}

.busrit-bus .kop{transform-box:fill-box;transform-origin:bottom center;animation:knikken 1.6s ease-in-out infinite}
@keyframes knikken{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.busrit-bus .mond{transform-box:fill-box;transform-origin:center;animation:zingen .62s ease-in-out infinite}
@keyframes zingen{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1.15)}}

.busrit-bus .blazen{transform-box:fill-box;transform-origin:left center;animation:blazen .9s ease-in-out infinite}
@keyframes blazen{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3.5deg) translateX(.6px)}}
.busrit-bus .sousa{transform-box:fill-box;transform-origin:center;animation:sousa 1.5s ease-in-out infinite}
@keyframes sousa{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}

/* noten die uit de bus ontsnappen */
.busrit-bus .noot{
  font-size:13px;fill:var(--yellow);opacity:0;
  animation:notenop 3.1s ease-out infinite;
}
.busrit-bus .noot.n2{animation-duration:3.6s;animation-delay:.9s;font-size:11px}
.busrit-bus .noot.n3{animation-duration:2.8s;animation-delay:1.7s;font-size:12px}
@keyframes notenop{
  0%{opacity:0;transform:translate(0,6px) rotate(-6deg)}
  18%{opacity:.95}
  100%{opacity:0;transform:translate(-22px,-30px) rotate(-24deg)}
}
.busrit-bus .lijn{stroke:rgba(4,6,26,.35);stroke-width:1.5}
.busrit-bus .paneel{fill:#0a1150}
.busrit-bus .naam{
  font-family:var(--font-display),Impact,sans-serif;
  font-size:15px;letter-spacing:.02em;text-anchor:start;
  fill:#fff;text-transform:uppercase;
}
.busrit-bus .rok{fill:#1226c9;stroke:#04061a;stroke-width:2}
.busrit-bus .wimpel .wit{fill:#fff}
.busrit-bus .wimpel .rood rect{fill:#d0021b}
.busrit-bus .wimpel .rand{fill:none;stroke:rgba(4,6,26,.55);stroke-width:1}
.busrit-bus .wimpel .mast,.busrit-bus .mast{stroke:#e9edff;stroke-width:2.6;stroke-linecap:round}
.busrit-bus .knop{fill:#e9edff}
.busrit-bus .vlagstok{transform-box:fill-box;transform-origin:bottom center;animation:stokzwaai 2.6s ease-in-out infinite}
@keyframes stokzwaai{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.busrit-bus .wimpel{transform-box:view-box;transform-origin:301px 8px;animation:wapper 1.7s ease-in-out infinite}
@keyframes wapper{0%,100%{transform:translate(1.4px,-8px) rotate(-2deg) skewY(1.5deg)}50%{transform:translate(1.4px,-8px) rotate(2deg) skewY(-1.5deg)}}
.busrit-bus .spiegel{fill:#04061a}
.busrit-bus .lamp{fill:#fff6c2}
.busrit-bus .achterlicht{fill:var(--red)}
.busrit-bus .kast{fill:#04061a}
.busrit-bus .band{fill:#0b0d24;stroke:#04061a;stroke-width:2}
.busrit-bus .velg{fill:#e9edff}
.busrit-bus .spaken rect{fill:#0b0d24}
.busrit-bus .naaf{fill:var(--yellow)}
.busrit-bus .wiel{transform-box:fill-box;transform-origin:center}
.busrit-bus .wiel .spaken{transform-box:fill-box;transform-origin:center;animation:draaiWiel .6s linear infinite}
@keyframes draaiWiel{to{transform:rotate(360deg)}}
.busrit-bus .uitlaat{
  position:absolute;left:-4%;bottom:22%;width:14%;aspect-ratio:2/1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.5),transparent 68%);
  animation:rook 1.9s ease-out infinite;
}
@keyframes rook{0%{opacity:.5;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(-40px,-16px) scale(1.6)}}


@media (max-width:620px){
  .busrit{height:150px}
  .busrit-bus{width:170px}
  }
@media (prefers-reduced-motion:reduce){
  .busrit-track,.busrit-weg .strepen,.busrit-bus,.wieken,.busrit-bus .wiel .spaken,.busrit-bus .uitlaat{animation:none}
  .busrit-bus .uitlaat{display:none}
}


/* de agenda houdt onderaan ruimte vrij voor de rijdende band */
#agenda{padding-bottom:calc(clamp(5rem,11vw,9.5rem) + clamp(120px,15vw,180px) * .5)}

/* ---------- 26. Fotoblok op de startpagina ---------- */
.foto-teaser{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;
  margin-bottom:2.2rem;
}
.foto-teaser a{
  position:relative;display:block;border-radius:var(--r-md);overflow:hidden;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.foto-teaser a:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--yellow),var(--shadow-2)}
.foto-teaser .beeld{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--blue-850)}
.foto-teaser img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.foto-teaser a:hover img{transform:scale(1.07)}
.foto-teaser .tekst{display:block;padding:.85rem 1rem 1rem}
.foto-teaser b{display:block;font-size:.98rem;line-height:1.35;color:#fff}
.foto-teaser span.meta{display:block;margin-top:.2rem;font-size:.78rem;color:var(--txt-mute-dark)}
.foto-teaser .jaar{
  position:absolute;left:.7rem;top:.7rem;padding:.28rem .6rem;border-radius:999px;
  background:var(--yellow);color:var(--ink);font-size:.72rem;font-weight:900;letter-spacing:.06em;
}

/* ---------- 27. Meer muziek en confetti bij de bus ---------- */
.busrit-bus .noot.n4{animation-duration:3.3s;animation-delay:.4s;font-size:12px}
.busrit-bus .noot.n5{animation-duration:2.9s;animation-delay:1.3s;font-size:14px}
.busrit-bus .noot.n6{animation-duration:3.8s;animation-delay:2.1s;font-size:11px}

.confetti{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.confetti i{
  position:absolute;top:-14%;
  width:7px;height:11px;border-radius:2px;
  opacity:0;
  animation:dwarrel linear infinite;
}
@keyframes dwarrel{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}
  10%{opacity:.95}
  100%{opacity:0;transform:translate3d(-28px,180px,0) rotate(520deg)}
}
@media (prefers-reduced-motion:reduce){ .confetti{display:none} }

/* noten die boven de bus blijven hangen */
.busrit .muziek{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.busrit .muziek b{
  position:absolute;bottom:34%;
  font-size:1.1rem;color:var(--yellow);opacity:0;font-weight:400;
  text-shadow:0 2px 10px rgba(3,5,28,.6);
  animation:zweefNoot ease-out infinite;
}
@keyframes zweefNoot{
  0%{opacity:0;transform:translate(0,0) rotate(-8deg) scale(.7)}
  15%{opacity:.95}
  100%{opacity:0;transform:translate(-46px,-115px) rotate(22deg) scale(1.15)}
}
@media (prefers-reduced-motion:reduce){ .busrit .muziek{display:none} }

/* ---------- 28. Seizoen: carnavalsslingers en sneeuw ---------- */
.slingers{
  position:absolute;top:0;left:0;right:0;height:42px;z-index:6;
  display:flex;justify-content:space-between;padding:0 1.5vw;pointer-events:none;
}
.slingers::before{
  content:"";position:absolute;left:0;right:0;top:5px;height:2px;
  background:rgba(255,255,255,.35);
  border-radius:50%;
  box-shadow:0 1px 6px rgba(0,0,0,.35);
}
.slingers i{
  position:relative;width:0;height:0;
  border-left:9px solid transparent;border-right:9px solid transparent;
  border-top:22px solid var(--yellow);
  transform-origin:top center;
  animation:wapperVlag 2.6s ease-in-out infinite;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));
}
@keyframes wapperVlag{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

.sneeuw{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.sneeuw i{
  position:absolute;top:-8%;color:#fff;opacity:.75;font-style:normal;
  animation:dwarrelSneeuw linear infinite;
}
@keyframes dwarrelSneeuw{
  0%{opacity:0;transform:translate(0,0) rotate(0)}
  12%{opacity:.8}
  100%{opacity:0;transform:translate(-40px,105vh) rotate(220deg)}
}

/* in carnavalstijd staat de hero-tekst iets lager, onder de slingers */
.seizoen-carnaval .hero-in{padding-top:calc(clamp(6.5rem,11vh,9rem) + 1.4rem)}

@media (prefers-reduced-motion:reduce){ .slingers,.sneeuw{display:none} }

/* ---------- 29. Toetsenbord: overslaan-link ---------- */
.overslaan{
  position:absolute;left:1rem;top:-4rem;z-index:9999;
  padding:.8rem 1.2rem;border-radius:0 0 12px 12px;
  background:var(--yellow);color:var(--ink);font-weight:800;
  transition:top .25s var(--ease);
}
.overslaan:focus{top:0}

/* zichtbare focus op foto's die je met het toetsenbord kunt openen */
[data-lb]:focus-visible,.galerij figure:focus-visible{
  outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px;
}

/* ---------- 30. Losse noten en losse slingers ---------- */
.losse-noot{
  position:fixed;z-index:9760;pointer-events:none;
  color:var(--yellow);font-weight:400;
  text-shadow:0 2px 12px rgba(3,5,28,.6);
  animation:losseNoot ease-out forwards;
}
@keyframes losseNoot{
  0%{opacity:0;transform:translate(0,0) scale(.6) rotate(-10deg)}
  15%{opacity:1}
  100%{opacity:0;transform:translate(var(--zij,0),-160px) scale(1.2) rotate(25deg)}
}
.slingers.los{position:fixed;top:0;z-index:9500}

/* ---------- 31. Toeterende bus en 'Vandaag!' ---------- */
.busrit-bus{pointer-events:auto;cursor:pointer}
.busrit-bus:focus-visible{outline:3px solid var(--yellow);outline-offset:6px;border-radius:14px}
.busrit-bus.toet{animation:gasGeven 1.3s cubic-bezier(.34,1.56,.64,1)}
@keyframes gasGeven{
  0%{transform:translateX(0)}
  18%{transform:translateX(-14px) rotate(-1.4deg)}
  55%{transform:translateX(46px) rotate(1.2deg)}
  100%{transform:translateX(0)}
}
.busrit-bus.toet .wiel .spaken{animation-duration:.22s}

.vandaag{
  grid-column:1/-1;display:grid;justify-items:center;gap:.3rem;
  padding:1.2rem .6rem;border-radius:var(--r-md);
  background:linear-gradient(120deg,var(--yellow),var(--yellow-deep));
  color:var(--ink);text-align:center;
  box-shadow:0 14px 40px rgba(255,196,0,.35);
  animation:hupsen 1.6s ease-in-out infinite;
}
.vandaag b{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.2rem);line-height:1;text-transform:uppercase}
.vandaag span{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;opacity:.75}
@keyframes hupsen{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-5px) rotate(.4deg)}}
.tk-vandaag{
  font-family:var(--font-display);font-size:1.6rem;color:var(--ink);
  background:var(--yellow);border-radius:10px;padding:.2rem .7rem;text-transform:uppercase;
}

/* ---------- 32. Dweil-modus ---------- */
.dweil-modus .marquee-track{animation-duration:9s!important}
.dweil-modus .display,
.dweil-modus .hero h1,
.dweil-modus .jaarkop,
.dweil-modus .instr{animation:wiegKop 1.1s ease-in-out infinite;transform-origin:center bottom}
@keyframes wiegKop{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.1deg)}}
.dweil-modus .brand img{animation:hupsLogo .55s ease-in-out infinite}
@keyframes hupsLogo{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}

.dweilbus{
  position:fixed;left:0;bottom:14px;width:230px;z-index:9400;pointer-events:none;
  filter:drop-shadow(0 10px 16px rgba(4,6,26,.5));
  animation:dweilRit 11s linear infinite, dweilHobbel 1.4s ease-in-out infinite;
}
.dweilbus svg{width:100%;height:auto;display:block}
@keyframes dweilRit{0%{left:-260px}100%{left:100%}}
@keyframes dweilHobbel{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.feestmelding{
  position:fixed;left:50%;bottom:1.6rem;translate:-50% 0;z-index:9800;
  padding:.75rem 1.3rem;border-radius:999px;
  background:var(--ink);color:#fff;font-weight:700;font-size:.9rem;
  box-shadow:var(--shadow-2);opacity:0;transform:translateY(18px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none;
}
.feestmelding.zichtbaar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .dweilbus{display:none} .dweil-modus *{animation:none!important} }

/* ---------- 33. Lopende band omkeren ---------- */
.marquee{cursor:pointer}
.marquee.omgekeerd .marquee-track{animation-direction:reverse}
.marquee.rev.omgekeerd .marquee-track{animation-direction:normal}
.marquee.schok{animation:bandSchok .5s var(--ease)}
@keyframes bandSchok{0%{transform:scale(1)}35%{transform:scale(1.04) rotate(.5deg)}100%{transform:scale(1)}}
.hero .marquee.schok{animation:bandSchokHero .5s var(--ease)}
@keyframes bandSchokHero{
  0%{transform:rotate(-1.4deg) scale(1.04)}
  35%{transform:rotate(-.4deg) scale(1.08)}
  100%{transform:rotate(-1.4deg) scale(1.04)}
}

/* ---------- 34. Notenspoor achter de muis ---------- */
.spoornoot{
  position:fixed;z-index:9700;pointer-events:none;
  color:var(--yellow);font-size:1.1rem;font-weight:400;
  text-shadow:0 2px 10px rgba(3,5,28,.55);
  animation:spoorNoot 1.2s ease-out forwards;
}
@keyframes spoorNoot{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-8deg)}
  20%{opacity:.9}
  100%{opacity:0;transform:translate(calc(-50% + var(--zij,0)),-140%) scale(1.1) rotate(18deg)}
}

/* ---------- 35. Pepernoten ---------- */
.sneeuw.pepernoten i{
  color:#8a5a2b;font-size:.7rem;opacity:.9;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* ============================================================
   33. Sfeer: dagdeel, weer en optreden-vandaag
   De lucht in de busbalk en de gloed over de hero verlopen mee met
   het tijdstip; het weer komt van Open-Meteo (Eindhoven).
   ============================================================ */
:root{
  --lucht-top:rgba(3,5,28,0);
  --lucht-hoog:#1b2a8f;
  --lucht-laag:#ff9d1c;
  --lucht-grond:var(--yellow);
  --zon-kern:#fff6c2;
  --zon-rand:var(--yellow);
  --zon-onder:26%;
  --zon-links:22%;
  --zon-maat:clamp(60px,7vw,96px);
  --wapper-tijd:1.7s;
}
.busrit{
  background:linear-gradient(180deg,
    var(--lucht-top) 0%, var(--lucht-hoog) 30%, var(--lucht-laag) 76%, var(--lucht-grond) 100%);
}
.busrit::before{ /* zon of maan */
  left:var(--zon-links);bottom:var(--zon-onder);width:var(--zon-maat);
  background:radial-gradient(circle,var(--zon-kern),var(--zon-rand) 62%,rgba(255,196,0,0) 72%);
}
.busrit-bus .wimpel{animation-duration:var(--wapper-tijd)}

/* ---- ochtend ---- */
body.dagdeel-ochtend{
  --lucht-hoog:#33489f;--lucht-laag:#ff8f5e;--lucht-grond:#ffd6a3;
  --zon-kern:#fff4e6;--zon-rand:#ff9f6a;--zon-onder:17%;--zon-links:13%;
}
body.dagdeel-ochtend .hero-mesh{
  background:
    radial-gradient(38vw 38vw at 78% 22%,rgba(255,146,74,.34),transparent 60%),
    radial-gradient(30vw 30vw at 12% 78%,rgba(255,208,120,.3),transparent 62%);
}
/* ---- overdag ---- */
body.dagdeel-dag{
  --lucht-hoog:#2f6ddb;--lucht-laag:#8cc3f5;--lucht-grond:#e2f1ff;
  --zon-kern:#fff;--zon-rand:#ffe97a;--zon-onder:52%;--zon-links:70%;
  --zon-maat:clamp(46px,5vw,74px);
}
body.dagdeel-dag .hero-mesh{
  background:
    radial-gradient(38vw 38vw at 78% 22%,rgba(90,150,255,.42),transparent 60%),
    radial-gradient(30vw 30vw at 12% 78%,rgba(255,232,150,.26),transparent 62%);
}
body.dagdeel-dag .landschap path,
body.dagdeel-dag .landschap circle,
body.dagdeel-dag .landschap rect,
body.dagdeel-dag .landschap ellipse{fill:#12246b}
body.dagdeel-dag .landschap .ver{fill:#2a44a8;opacity:.7}
body.dagdeel-dag .landschap .raam{fill:#0a1150;opacity:.7}
/* ---- avond = de bestaande zonsondergang, geen overschrijving nodig ---- */

/* ---- nacht ---- */
body.dagdeel-nacht{
  /* iets lichter dan echt nachtblauw, anders vallen de gebouwen weg */
  --lucht-hoog:#0b1550;--lucht-laag:#182a72;--lucht-grond:#26348c;
  --zon-kern:#f4f7ff;--zon-rand:#b9c5ee;--zon-onder:56%;--zon-links:76%;
  --zon-maat:clamp(36px,4vw,56px);
}
/* de skyline blijft altijd een silhouet: donkerder dan de lucht, met een randje licht */
body.dagdeel-nacht .landschap path,
body.dagdeel-nacht .landschap circle,
body.dagdeel-nacht .landschap rect,
body.dagdeel-nacht .landschap ellipse{fill:#03050f}
body.dagdeel-nacht .landschap .ver{fill:#0a1240;opacity:1}
body.dagdeel-nacht .landschap .voor{fill:#02040c}
body.dagdeel-nacht .skyline > g > path,
body.dagdeel-nacht .skyline > g > rect,
body.dagdeel-nacht .skyline > g > circle,
body.dagdeel-nacht .skyline > g > ellipse{stroke:rgba(196,210,255,.35);stroke-width:1.2}
body.dagdeel-nacht .landschap .lijn{stroke:rgba(196,210,255,.3)}
body.dagdeel-nacht .landschap .raam{fill:#ffe680;opacity:1}
body.dagdeel-nacht .hero-mesh{
  background:
    radial-gradient(38vw 38vw at 78% 22%,rgba(24,44,150,.5),transparent 60%),
    radial-gradient(30vw 30vw at 12% 78%,rgba(12,18,70,.6),transparent 62%);
}
body.dagdeel-nacht .busrit-weg{box-shadow:0 -2px 0 rgba(255,224,27,.18)}
body.dagdeel-nacht .busrit-bus .lamp{filter:drop-shadow(0 0 7px rgba(255,246,194,.95))}
body.dagdeel-nacht .busrit-bus::after{ /* koplampstraal */
  content:"";position:absolute;right:-14%;top:50%;width:42%;height:38%;
  background:linear-gradient(90deg,rgba(255,246,194,.5),rgba(255,246,194,0));
  clip-path:polygon(0 40%,100% 0,100% 100%,0 60%);
  filter:blur(3px);pointer-events:none;
}
.sterren{position:absolute;left:0;right:0;top:0;bottom:38%;pointer-events:none;overflow:hidden}
.sterren i{
  position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;
  opacity:.75;animation:fonkel 3.4s ease-in-out infinite;
}
@keyframes fonkel{0%,100%{opacity:.2}50%{opacity:.9}}

/* ---- weer ---- */
.zonglans,.bliksem{position:absolute;inset:0;pointer-events:none;z-index:2}

/* regen en sneeuw hangen over de hele pagina, zodat je het weer overal ziet */
.weerval{position:fixed;inset:0;z-index:8500;pointer-events:none;overflow:hidden}
.weerval.regen i{
  position:absolute;top:-14vh;display:block;width:1.6px;border-radius:2px;
  background:linear-gradient(180deg,rgba(214,232,255,0),rgba(214,232,255,.85));
  animation:regenval linear infinite;
}
.weerval.regen.hard i{width:2.2px;background:linear-gradient(180deg,rgba(230,240,255,0),rgba(230,240,255,.95))}
@keyframes regenval{
  from{transform:translate3d(0,0,0) rotate(9deg)}
  to{transform:translate3d(-14vh,124vh,0) rotate(9deg)}
}
.weerval.sneeuwval i{
  position:absolute;top:-8vh;display:block;color:#fff;font-style:normal;line-height:1;
  animation:sneeuwval linear infinite;
}
@keyframes sneeuwval{
  from{transform:translate3d(0,0,0) rotate(0)}
  to{transform:translate3d(6vw,120vh,0) rotate(220deg)}
}

.zonglans{
  background:radial-gradient(26vw 26vw at 80% 12%,rgba(255,242,190,.34),transparent 62%);
  animation:glansAdem 9s ease-in-out infinite alternate;
}
@keyframes glansAdem{to{opacity:.55;transform:scale(1.06)}}
.bliksem{background:#dfe9ff;opacity:0;animation:flits 23s linear infinite;mix-blend-mode:screen}
@keyframes flits{0%,95.9%{opacity:0}96.1%{opacity:.55}96.5%{opacity:0}96.9%{opacity:.3}97.2%{opacity:0}}
.weerregel{
  margin:.7rem 0 0;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  font-size:.82rem;letter-spacing:.02em;color:rgba(255,255,255,.72);
}
.weerregel b{color:var(--yellow);font-weight:700}
.weerregel span{font-size:1rem}

/* ---- vandaag spelen we ---- */
.vandaag-pill{
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem;
  padding:.55rem 1rem;border-radius:99px;
  background:var(--yellow);color:var(--ink);
  font-weight:800;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:0 12px 34px rgba(255,224,27,.3);
  animation:vandaagWip 2.8s ease-in-out infinite;
}
.vandaag-pill span{font-weight:600;text-transform:none;letter-spacing:0}
@keyframes vandaagWip{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-4px) rotate(.6deg)}}

@media (prefers-reduced-motion:reduce){
  .sterren i,.zonglans,.bliksem,.regenlaag i,.vandaag-pill{animation:none}
  .bliksem{display:none}
}

/* ---- hero in lagen: de foto iets groter zodat de randen niet meelopen ---- */
.hero.diepte .hero-bg img{transform:scale(1.07);will-change:translate}
.hero.diepte .hero-mesh,
.hero.diepte .notes,
.hero.diepte .hero-in,
.hero.diepte .hero-ticket{will-change:translate}

/* ---- klik op de bus: een rondje dwars door de pagina ---- */
.busrit-bus{pointer-events:auto;cursor:pointer}
.busrit-bus:focus-visible{outline:3px solid var(--yellow);outline-offset:6px;border-radius:12px}
.busrit-bus.toetert{animation:toeteren .9s ease-out}
@keyframes toeteren{
  0%{filter:none}
  18%{filter:brightness(1.5) drop-shadow(0 0 22px rgba(255,224,27,.75))}
  40%{filter:none}
  58%{filter:brightness(1.4) drop-shadow(0 0 18px rgba(255,224,27,.6))}
  100%{filter:none}
}
.dwarsvlucht{position:fixed;inset:0;z-index:9500;pointer-events:none;overflow:hidden}
.dwarsvlucht svg{
  position:absolute;left:-34%;bottom:-6%;width:min(34vw,400px);height:auto;
  filter:drop-shadow(0 22px 40px rgba(3,5,28,.45));
  animation:overvliegen 4.2s cubic-bezier(.42,.02,.5,1) forwards;
}
@keyframes overvliegen{
  0%  {transform:translate(0,0) rotate(-9deg)}
  55% {transform:translate(86vw,-52vh) rotate(-7deg)}
  100%{transform:translate(172vw,-104vh) rotate(-11deg)}
}
/* het toestel zelf */
.dwarsvlucht .romp{fill:var(--yellow);stroke:#0a1150;stroke-width:4;stroke-linejoin:round}
.dwarsvlucht .rompstreep{fill:#1b3af5}
.dwarsvlucht .neus{fill:#1b3af5;opacity:.9}
.dwarsvlucht .vleugel,.dwarsvlucht .staart,.dwarsvlucht .staartvlak{
  fill:#1b3af5;stroke:#0a1150;stroke-width:4;stroke-linejoin:round}
.dwarsvlucht .raam{fill:#0a1150;stroke:#e9edff;stroke-width:2.4}
.dwarsvlucht .raam.klein{stroke-width:2}
.dwarsvlucht .schroef{fill:#0a1150;transform-box:fill-box;transform-origin:center;animation:schroeven .18s linear infinite}
.dwarsvlucht .naaf{fill:var(--red);stroke:#0a1150;stroke-width:2}
@keyframes schroeven{to{transform:rotate(360deg)}}

main > section.opzij{animation:opzijduwen .9s cubic-bezier(.34,1.56,.64,1)}
@keyframes opzijduwen{
  0%{translate:0 0;rotate:0deg}
  30%{translate:-22px 0;rotate:-.7deg}
  62%{translate:14px 0;rotate:.45deg}
  100%{translate:0 0;rotate:0deg}
}
@media (prefers-reduced-motion:reduce){
  .dwarsvlucht,main > section.opzij{animation:none}
  .dwarsvlucht{display:none}
}

/* ---- het logo kleedt zich naar het seizoen ---- */
.brand{position:relative}
.kostuum{
  position:absolute;left:-9px;top:-15px;width:36px;pointer-events:none;
  transform:rotate(-16deg);transform-origin:bottom center;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));
  animation:kostuumWip 4.5s ease-in-out infinite;
}
.kostuum svg{display:block;width:100%;height:auto}
.kostuum-kerst{left:-6px;top:-13px;width:32px;transform:rotate(-8deg)}
@keyframes kostuumWip{0%,100%{rotate:0deg}50%{rotate:-7deg}}
@media (prefers-reduced-motion:reduce){ .kostuum{animation:none} }

/* ---- de bus als paginaovergang ---- */
.busovergang{position:fixed;inset:0;z-index:10000;pointer-events:none;overflow:hidden}
.busovergang .bo-doek{
  position:absolute;inset:0;
  background:linear-gradient(180deg,var(--blue-900),var(--blue-950) 55%,#04061a);
  box-shadow:0 0 80px rgba(3,5,28,.8);
}
.busovergang .bo-bus{position:absolute;bottom:8%;left:0;width:min(34vw,380px)}
.busovergang .bo-bus svg{width:100%;height:auto;filter:drop-shadow(0 18px 34px rgba(0,0,0,.5))}

.busovergang.heen .bo-doek{animation:doekDicht .44s cubic-bezier(.7,0,.3,1) forwards}
.busovergang.heen .bo-bus{animation:busLangs .62s cubic-bezier(.5,0,.35,1) forwards}
.busovergang.terug .bo-doek{animation:doekOpen .52s cubic-bezier(.7,0,.3,1) forwards}
.busovergang.terug .bo-bus{animation:busWeg .72s cubic-bezier(.5,0,.35,1) forwards}

@keyframes doekDicht{from{transform:translateX(-101%)}to{transform:none}}
@keyframes doekOpen{from{transform:none}to{transform:translateX(101%)}}
@keyframes busLangs{from{transform:translateX(-120%)}to{transform:translateX(180vw)}}
@keyframes busWeg{from{transform:translateX(-40%)}to{transform:translateX(190vw)}}

@media (prefers-reduced-motion:reduce){ .busovergang{display:none} }

/* ---- op deze dag ---- */
.opdezedag{margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.opdezedag a{
  display:grid;grid-template-columns:clamp(110px,18vw,190px) 1fr;gap:clamp(1rem,2.4vw,1.8rem);
  align-items:center;padding:clamp(.8rem,1.6vw,1.1rem);border-radius:20px;
  background:linear-gradient(120deg,rgba(255,224,27,.14),rgba(27,58,245,.16));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.opdezedag a:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(255,224,27,.5),0 18px 44px rgba(3,5,28,.4)}
.opdezedag .odd-beeld{display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden}
.opdezedag img{width:100%;height:100%;object-fit:cover;display:block}
.opdezedag .odd-tekst{display:grid;gap:.3rem;min-width:0}
.opdezedag .odd-kop{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);font-weight:800}
.opdezedag b{font-family:var(--font-display);font-size:clamp(1.1rem,2.4vw,1.7rem);line-height:1.05;text-transform:uppercase}
.opdezedag .odd-meta{font-size:.82rem;color:rgba(255,255,255,.6)}
@media (max-width:520px){
  .opdezedag a{grid-template-columns:1fr}
  .opdezedag .odd-beeld{max-width:220px}
}

/* ---- wolken en mist: in de lucht van de busbalk, waar ze thuishoren ---- */
.weerlucht{position:absolute;left:0;right:0;top:0;bottom:34%;pointer-events:none;overflow:hidden;z-index:1}
.weerlucht i{
  position:absolute;display:block;width:clamp(110px,16vw,210px);
  opacity:.55;animation:wolkDrijf linear infinite;
}
.weerlucht i svg{display:block;width:100%;height:auto}
.weerlucht i svg path{fill:#e8edff}
.weerlucht i:nth-child(1){top:6%;left:-24%;animation-duration:64s}
.weerlucht i:nth-child(2){top:30%;left:-30%;animation-duration:86s;animation-delay:-30s;opacity:.4;transform:scale(.75)}
.weerlucht i:nth-child(3){top:-4%;left:-38%;animation-duration:104s;animation-delay:-64s;opacity:.32;transform:scale(1.25)}
.weerlucht i:nth-child(4){top:20%;left:-20%;animation-duration:74s;animation-delay:-18s;opacity:.28;transform:scale(.6)}
@keyframes wolkDrijf{to{left:130%}}
body.dagdeel-nacht .weerlucht i svg path{fill:#8f9dd8}
body.dagdeel-avond .weerlucht i svg path{fill:#ffd9b0}

/* mist: laaghangend en breder uitgesmeerd */
.weerlucht.mistig{bottom:18%}
.weerlucht.mistig i{width:60%;opacity:.5;filter:blur(6px)}
.weerlucht.mistig i:nth-child(1){top:38%}
.weerlucht.mistig i:nth-child(2){top:56%;transform:scale(1.4)}

/* de hero kleurt alleen subtiel mee met het weer */
body.weer-bewolkt .hero-mesh{filter:saturate(.8) brightness(.94)}
body.weer-mist .hero-mesh{filter:saturate(.62) brightness(1.04)}
body.weer-regen .hero-mesh,body.weer-onweer .hero-mesh{filter:saturate(.85) brightness(.88)}
body.weer-helder .hero-mesh{filter:saturate(1.08) brightness(1.05)}

@media (prefers-reduced-motion:reduce){ .weerlucht i{animation:none} }

/* ---- appje naar de secretaris ---- */
.ccard.whatsapp .ci{background:linear-gradient(160deg,#25d366,#128c7e);box-shadow:0 8px 22px rgba(37,211,102,.3)}
.ccard.whatsapp .ci .ic{color:#fff}
.ccard.whatsapp:hover{box-shadow:inset 0 0 0 1px rgba(37,211,102,.6),var(--shadow-2)}

/* agenda zonder optredens */
.next-gig.leeg{grid-template-columns:1fr}
.next-gig.leeg .lead{margin:.6rem 0 0;max-width:52ch}
.next-gig.leeg a{color:var(--yellow);font-weight:700}


/* op een aanraakscherm mogen knoppen niet te klein zijn om te raken */
@media (pointer:coarse){
  .btn,.btn-sm,.filterknop,.verrasknop,.jaarknop{min-height:44px}
  .btn,.btn-sm{display:inline-flex;align-items:center;justify-content:center}
}

/* tekst die alleen voor schermlezers en zoekmachines bedoeld is */
.alleen-lezer{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- 26. Na sluitingstijd ----------
   Tussen één en vijf uur 's nachts deint de site heel licht mee. Alleen
   draaiingen: er verschuift niets in de opmaak, en wie 'minder beweging'
   heeft ingesteld krijgt deze klasse niet eens. */
@keyframes kp-wiegen{
  0%,100%{transform:rotate(-.5deg)}
  50%{transform:rotate(.5deg)}
}
@keyframes kp-deinen{
  0%,100%{transform:rotate(-1.1deg) scale(1)}
  50%{transform:rotate(1.1deg) scale(1.012)}
}
.kwelnacht .brand img{animation:kp-deinen 6.5s ease-in-out infinite}
.kwelnacht h1.display,.kwelnacht .hero h1{animation:kp-wiegen 9s ease-in-out infinite;transform-origin:left center}
.kwelnacht .kicker{animation:kp-wiegen 13s ease-in-out infinite;transform-origin:left center}
/* en de muisaanwijzer krijgt een pilsje mee */
.kwelnacht{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext y='26' font-size='26'%3E%F0%9F%8D%BA%3C/text%3E%3C/svg%3E") 4 4,auto}

/* de twee schakelaars in de voettekst */
.foot-gek{display:flex;gap:.6rem;flex-wrap:wrap}
.foot-gek button{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:.8rem;color:var(--txt-mute-dark);
  text-decoration:underline;text-underline-offset:3px;
}
.foot-gek button:hover{color:var(--yellow)}
.foot-gek button[aria-pressed="true"]{color:var(--yellow)}

/* ---------- 27. Uitklapmenu onder Foto's ----------
   Het paneel staat los boven de pagina (absoluut), dus de menubalk zelf
   verandert niet van hoogte of breedte als het opengaat. */
.nav-tak{position:relative;display:inline-flex}
.nav-tak > a::after{
  content:"";width:0;height:0;margin-left:.35rem;align-self:center;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid currentColor;opacity:.7;
}
.nav-sub{
  position:absolute;top:100%;left:0;z-index:9400;
  display:grid;gap:.1rem;min-width:12.5rem;padding:.5rem;
  border-radius:14px;background:rgba(6,10,43,.97);
  backdrop-filter:blur(16px);
  box-shadow:0 20px 50px rgba(3,5,28,.6),inset 0 0 0 1px rgba(255,255,255,.12);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.nav-tak:hover .nav-sub,
.nav-tak:focus-within .nav-sub,
.nav-tak.open .nav-sub{opacity:1;visibility:visible;transform:none}
.nav-sub a{
  padding:.5rem .7rem;border-radius:9px;white-space:nowrap;
  font-size:.86rem;font-weight:600;color:rgba(255,255,255,.85);
}
.nav-sub a:hover,.nav-sub a:focus-visible{background:rgba(255,255,255,.1);color:#fff}

/* in de uitschuiflade staan ze ingesprongen onder Foto's */
.drawer a.sub{padding-left:2.4rem;font-size:.94rem;opacity:.82;
  min-height:34px;display:flex;align-items:center}   /* mikken met een duim */
.drawer a.sub::before{content:"↳";margin-right:.5rem;opacity:.6}

/* ---------- 28. De vaste rij onder Foto's ----------
   Dezelfde knoppenrij op elke fotopagina, zodat je altijd ziet waar je
   naartoe kunt. Op de schermvullende pagina's (fotomuur, mozaïek) zweeft
   hij onder de menubalk in plaats van in de tekst mee te lopen. */
.foto-rij{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 0}
.foto-rij .btn{white-space:nowrap}
.foto-rij .btn[aria-current="page"]{pointer-events:none}

.foto-rij.zwevend{
  position:fixed;left:50%;transform:translateX(-50%);
  top:calc(4.4rem + env(safe-area-inset-top));z-index:15;
  justify-content:center;max-width:min(96vw,64rem);margin:0;
  padding:.5rem;border-radius:999px;
  background:rgba(6,10,43,.78);backdrop-filter:blur(12px);
  box-shadow:0 16px 40px rgba(3,5,28,.5),inset 0 0 0 1px rgba(255,255,255,.1);
}
.foto-rij.zwevend .btn{font-size:.74rem;padding:.42rem .8rem}
.foto-rij.zwevend .ico{display:none}
/* de rij mag over twee regels: liever afbreken dan knoppen afknippen */
.foto-rij.zwevend{flex-wrap:wrap;justify-content:center;max-width:min(94vw,58rem)}

@media (max-width:900px){
  .foto-rij.zwevend{display:none}          /* op een klein scherm zit hij in de weg */
}

/* ---------- 29. Zoeken vanaf elke pagina ---------- */
.nav-zoek{
  display:grid;place-items:center;width:40px;height:40px;flex:none;
  border:0;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.08);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.nav-zoek svg{width:20px;height:20px;fill:currentColor}
.nav-zoek:hover{background:var(--yellow);color:var(--ink);transform:translateY(-1px)}
.nav-zoek:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

.kp-zoek{position:fixed;inset:0;z-index:120;display:grid;place-items:start center;padding:clamp(1rem,8vh,5rem) 1rem 1rem}
.kp-zoek[hidden]{display:none}
.kp-zoek-doek{position:absolute;inset:0;background:rgba(3,5,28,.72);backdrop-filter:blur(6px)}
.kp-zoek-blad{
  position:relative;width:min(100%,42rem);border-radius:20px;overflow:hidden;
  background:var(--blue-900,#0a1040);
  box-shadow:0 30px 80px rgba(3,5,28,.6),inset 0 0 0 1px rgba(255,255,255,.12);
  animation:kpZoekIn .22s var(--ease) both;
}
@keyframes kpZoekIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .kp-zoek-blad{animation:none} }

.kp-zoek-veld{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;box-shadow:0 1px 0 rgba(255,255,255,.1)}
.kp-zoek-veld svg{width:20px;height:20px;fill:rgba(255,255,255,.45);flex:none}
.kp-zoek-veld input{
  flex:1;min-width:0;border:0;background:none;color:#fff;font:inherit;font-size:1.05rem;padding:.5rem 0;
}
.kp-zoek-veld input:focus{outline:0}
.kp-zoek-veld input::placeholder{color:rgba(255,255,255,.4)}
.kp-zoek-veld button{background:none;border:0;color:rgba(255,255,255,.5);cursor:pointer;font-size:1.1rem;padding:.3rem .4rem}
.kp-zoek-veld button:hover{color:var(--yellow)}

.kp-zoek-uit{max-height:min(60vh,32rem);overflow:auto;overscroll-behavior:contain;padding:.4rem}
.kp-zoek-hint{margin:0;padding:1.2rem;color:rgba(255,255,255,.55);font-size:.9rem;text-align:center}
.kp-zoek-hint b{color:var(--yellow);font-weight:700}
.kp-zoek-rij{
  display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:.7rem;align-items:baseline;
  padding:.6rem .7rem;border-radius:12px;color:#fff;
}
.kp-zoek-rij:hover,.kp-zoek-rij:focus-visible{background:rgba(255,255,255,.08);outline:0}
.kp-zoek-rij .jaar{font-family:var(--font-display);font-size:.8rem;color:var(--yellow)}
.kp-zoek-rij b{display:block;font-size:.95rem;margin-bottom:.15rem}
.kp-zoek-rij em{display:block;font-style:normal;font-size:.8rem;color:rgba(255,255,255,.6);line-height:1.45}
.kp-zoek-alles{
  display:block;margin:.4rem;padding:.7rem;border-radius:12px;text-align:center;
  background:rgba(255,224,27,.14);color:var(--yellow);font-weight:700;font-size:.88rem;
}
.kp-zoek-alles:hover{background:var(--yellow);color:var(--ink)}

@media (max-width:640px){
  .kp-zoek{padding:0}
  .kp-zoek-blad{width:100%;height:100%;border-radius:0;max-height:none}
  .kp-zoek-uit{max-height:calc(100vh - 4.2rem)}
}

/* ---------- 30. Te vieren dit jaar (vult zichzelf uit de ledenlijst) ---------- */
.jubilea{
  margin:1.6rem 0 0;padding:1rem 1.1rem;border-radius:var(--r-md);
  background:rgba(255,224,27,.08);box-shadow:inset 0 0 0 1px rgba(255,224,27,.22);
}
.jubilea h3{
  font-family:var(--font-display);text-transform:uppercase;font-size:.95rem;
  letter-spacing:.06em;color:var(--yellow);margin:0 0 .6rem;
}
.jubilea ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.jubilea li{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.8rem;align-items:baseline}
.jubilea li b{
  font-family:var(--font-display);font-size:1rem;color:var(--yellow);
  text-transform:uppercase;line-height:1.1;
}
.jubilea li span{font-size:.9rem;color:rgba(255,255,255,.78);line-height:1.5}
.jubilea-meer{display:inline-block;margin-top:.8rem;color:var(--yellow);font-weight:700;font-size:.84rem}
.jubilea-meer:hover{text-decoration:underline}
.panel-light .jubilea li span,.panel-yellow .jubilea li span{color:rgba(6,10,43,.8)}
@media (max-width:560px){
  .jubilea li{grid-template-columns:1fr;gap:.1rem}
}

/* ---------- 31. Weerbericht bij een optreden ---------- */
.chip-weer{background:rgba(255,224,27,.16);box-shadow:inset 0 0 0 1px rgba(255,224,27,.3)}
.gig-weer{
  margin:.35rem 0 0;font-size:.82rem;color:rgba(255,255,255,.62);
  display:inline-flex;align-items:center;gap:.3rem;
}
.panel-light .gig-weer{color:rgba(6,10,43,.62)}
.tk-weer{margin:.3rem 0 0;font-size:.78rem;color:rgba(255,255,255,.7)}

/* ---------- 32. Wist je dat — een zwevend knopje ----------
   Klein en stil linksonder; pas als je erop drukt komt het weetje tevoorschijn.
   Rechtsonder zit de knop naar boven, dus die zitten elkaar niet in de weg. */
.wt-knop{
  position:fixed;left:clamp(1rem,2vw,1.6rem);bottom:calc(1.1rem + env(safe-area-inset-bottom));z-index:9300;
  width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:var(--yellow);color:var(--ink);
  font-family:var(--font-display);font-size:1.7rem;line-height:1;
  box-shadow:0 12px 30px rgba(255,224,27,.32),0 6px 18px rgba(3,5,28,.5);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
/* één keer een rustige klop, zodat je hem ziet staan */
.wt-knop::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,224,27,.5);
  animation:wtKlop 2.6s var(--ease) 1.4s 3;
  pointer-events:none;
}
@keyframes wtKlop{
  0%{opacity:.9;transform:scale(1)}
  60%{opacity:0;transform:scale(1.35)}
  100%{opacity:0;transform:scale(1.35)}
}
.wt-knop:hover,.wt-knop:focus-visible{transform:translateY(-3px) scale(1.06);box-shadow:0 16px 38px rgba(255,224,27,.45)}
.wt-knop.open{transform:rotate(8deg) scale(1.04)}
.wt-knop.open::after{animation:none}
.bus-aan .wt-knop{bottom:calc(6.6rem + env(safe-area-inset-bottom))}
@media (prefers-reduced-motion:reduce){ .wt-knop::after{animation:none} }
@media (max-width:560px){ .wt-knop{width:50px;height:50px;font-size:1.5rem} }

.wt-kaart{
  position:fixed;left:clamp(1rem,2vw,1.6rem);bottom:calc(5.2rem + env(safe-area-inset-bottom));z-index:9301;
  width:min(22rem,calc(100vw - 2rem));padding:1rem 1.1rem;border-radius:18px;
  background:var(--blue-900,#0a1040);
  box-shadow:0 24px 60px rgba(3,5,28,.55),inset 0 0 0 1px rgba(255,255,255,.12);
  animation:wtOp .22s var(--ease) both;
}
@keyframes wtOp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bus-aan .wt-kaart{bottom:calc(10.7rem + env(safe-area-inset-bottom))}
.wt-kop{
  margin:0 0 .4rem;font-family:var(--font-display);text-transform:uppercase;
  font-size:.78rem;letter-spacing:.14em;color:var(--yellow);
}
.wt-zin{margin:0;font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.85)}
.wt-zin b{color:#fff}
.wt-acties{display:flex;gap:.8rem;margin:.8rem 0 0}
.wt-acties button{
  background:none;border:0;padding:.2rem 0;cursor:pointer;font:inherit;font-size:.82rem;
  color:var(--yellow);
}
.wt-acties .wt-zoek{text-decoration:underline}
.wt-acties button:hover{color:#fff}
@media (prefers-reduced-motion:reduce){ .wt-kaart{animation:none} }

/* ---------- 33. Paaseieren in het zoekveld ---------- */
.kp-viltjes,.kp-regen{position:fixed;inset:0;z-index:9600;pointer-events:none;overflow:hidden}
.kp-viltjes i{
  position:absolute;top:-8vh;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#fff8dc 0 42%,#e8d9a8 43% 62%,#fff8dc 63% 100%);
  box-shadow:0 0 0 3px rgba(6,10,43,.18) inset,0 6px 14px rgba(0,0,0,.25);
  animation:kpViltjeVal linear forwards;
}
@keyframes kpViltjeVal{
  0%{opacity:0;transform:translateY(0) rotate(0)}
  8%{opacity:1}
  100%{opacity:.9;transform:translateY(112vh) rotate(var(--draai,360deg))}
}
.kp-regen i{
  position:absolute;top:-10vh;width:2px;height:16vh;
  background:linear-gradient(180deg,transparent,rgba(190,215,255,.75));
  animation:kpRegenVal linear infinite;
}
@keyframes kpRegenVal{0%{transform:translateY(-20vh)}100%{transform:translateY(120vh)}}

/* ---------- 34. De slingers zijn beet te pakken ---------- */
.slingers i{pointer-events:auto;cursor:grab;touch-action:none}
.slingers i:active{cursor:grabbing}

@media (prefers-reduced-motion:reduce){
  .kp-viltjes,.kp-regen{display:none}
  .slingers i{pointer-events:none;cursor:default}
}

/* ---------- 35. Voettekstlinks groter aantikbaar op de telefoon ----------
   De links in de voettekst waren 18-25 px hoog; met een dikke duim is dat
   mikken. Op smalle schermen krijgen ze daarom lucht boven en onder. */
@media (max-width:700px){
  .foot ul{gap:.15rem}
  .foot ul a{padding:.5rem 0;min-height:44px;display:flex;align-items:center}
  .foot-bottom a{padding:.4rem 0;display:inline-block}
  .foot-weetje button,.foot-gek button{min-height:36px;padding:.5rem .7rem}
}

/* ---------- 36. De 404 die meedenkt ---------- */
.nf-hulp{
  margin:2.2rem auto 0;max-width:34rem;text-align:left;
  padding:1.1rem 1.2rem;border-radius:18px;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.nf-vraag{
  margin:0 0 .7rem;font-family:var(--font-display);text-transform:uppercase;
  font-size:.9rem;letter-spacing:.06em;color:var(--yellow);
}
.nf-lijst{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.nf-lijst a{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;
  padding:.5rem .6rem;border-radius:10px;color:#fff;
}
.nf-lijst a:hover{background:rgba(255,224,27,.16)}
.nf-lijst b{font-size:.94rem}
.nf-lijst span{font-size:.78rem;color:rgba(255,255,255,.55)}
.nf-zoek{margin:.8rem 0 0;font-size:.86rem}
.nf-zoek a{color:var(--yellow);font-weight:700}

/* ---------- 37. Deelvenster ---------- */
/* Vangnet: een element met het hidden-attribuut hoort weg te zijn, ook als het
   ergens anders een display-regel heeft meegekregen. */
[hidden]{display:none !important}


.kp-deel{position:fixed;inset:0;z-index:9700;display:grid;place-items:center;padding:1rem}
.kp-deel-doek{position:absolute;inset:0;background:rgba(3,5,28,.72);backdrop-filter:blur(6px)}
.kp-deel-blad{
  position:relative;width:min(100%,28rem);padding:1.4rem;border-radius:20px;
  background:var(--blue-900,#0a1040);
  box-shadow:0 30px 80px rgba(3,5,28,.6),inset 0 0 0 1px rgba(255,255,255,.12);
}
.kp-deel-uit{
  position:absolute;right:.7rem;top:.7rem;background:none;border:0;cursor:pointer;
  color:rgba(255,255,255,.5);font-size:1.1rem;padding:.3rem .4rem;border-radius:8px;
}
.kp-deel-uit:hover{color:var(--yellow)}
.kp-deel-kop{
  margin:0 0 .3rem;font-family:var(--font-display);text-transform:uppercase;
  font-size:.8rem;letter-spacing:.14em;color:var(--yellow);
}
.kp-deel-titel{margin:0;font-weight:700;font-size:1.05rem;line-height:1.25}
.kp-deel-tekst{margin:.2rem 0 0;font-size:.84rem;color:rgba(255,255,255,.6)}
.kp-deel-link{display:flex;gap:.4rem;margin:1rem 0 .9rem}
.kp-deel-link input{
  flex:1;min-width:0;padding:.6rem .7rem;border:0;border-radius:10px;font:inherit;font-size:.82rem;
  background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.kp-deel-kopieer{
  border:0;border-radius:10px;padding:.6rem .9rem;cursor:pointer;font:inherit;font-size:.82rem;
  font-weight:700;background:var(--yellow);color:var(--ink);white-space:nowrap;
}
.kp-deel-kopieer:hover{filter:brightness(1.08)}
.kp-deel-knoppen{display:flex;flex-wrap:wrap;gap:.4rem}

/* ---------- 38. De foto van vandaag ---------- */
.dagfoto{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1rem,3vw,2rem);
  align-items:center;margin:0 0 2rem;padding:clamp(.8rem,2vw,1.2rem);
  border-radius:var(--r-lg,24px);
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.df-beeld{display:block;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;background:var(--blue-850)}
.df-beeld img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.df-beeld:hover img{transform:scale(1.04)}
.dagfoto h3{
  font-family:var(--font-display);text-transform:uppercase;line-height:1.05;
  font-size:clamp(1.3rem,3.2vw,2.2rem);margin:.35rem 0 .4rem;
}
.df-wanneer{margin:0;color:rgba(255,255,255,.6);font-size:.88rem}
.df-meer{margin:1rem 0 0}
.df-meer a{color:var(--yellow);font-weight:700}
.df-morgen{margin:.5rem 0 0;font-size:.78rem;color:rgba(255,255,255,.4)}
@media (max-width:760px){ .dagfoto{grid-template-columns:1fr} }

/* ---------- 39. Nieuw sinds je vorige bezoek ---------- */
.nieuwsinds{
  display:flex;align-items:center;gap:.7rem;margin:0 0 1.4rem;
  padding:.7rem 1rem;border-radius:999px;
  background:rgba(255,224,27,.12);box-shadow:inset 0 0 0 1px rgba(255,224,27,.3);
  font-size:.9rem;color:rgba(255,255,255,.85);
}
.nieuwsinds b{color:var(--yellow)}
.nieuwsinds a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.nieuwsinds a:hover{color:var(--yellow)}
.ns-bel{font-size:1.1rem}
.ns-weg{
  margin-left:auto;background:none;border:0;cursor:pointer;color:rgba(255,255,255,.5);
  font-size:1rem;padding:.2rem .4rem;border-radius:8px;flex:none;
}
.ns-weg:hover{color:var(--yellow)}
@media (max-width:560px){ .nieuwsinds{border-radius:16px;align-items:flex-start} }

/* de foto van vandaag krijgt zijn eigen strook, vlak na de agenda */
.dagfoto-vlak{padding-block:clamp(2rem,5vh,3.4rem)}
.dagfoto-vlak .dagfoto{margin:0}
.nieuwsinds-vak{padding-top:1.4rem}

/* ---------- 40. Aftellen naar carnaval ----------
   Vier trappen: kv-ver (alleen de telling), kv-bijna (slingers erbij),
   kv-week (kleuren in de balk) en kv-nu (alles los). */
.kv-telling{
  display:inline-flex;align-items:center;gap:.5rem;margin:.6rem 0 0;
  padding:.45rem .9rem;border-radius:999px;
  background:rgba(255,224,27,.12);box-shadow:inset 0 0 0 1px rgba(255,224,27,.3);
  font-size:.86rem;color:rgba(255,255,255,.85);
}
.kv-masker{font-size:1rem}
.kv-telling.nu{
  background:linear-gradient(90deg,rgba(255,224,27,.3),rgba(255,45,32,.28),rgba(27,58,245,.3));
  color:#fff;font-weight:700;
}

/* hoe dichterbij, hoe uitbundiger */
.kv-week .marquee.striped{filter:saturate(1.25)}
.kv-nu .marquee.striped{filter:saturate(1.5) brightness(1.06)}
.kv-nu .hero-badge{background:rgba(255,224,27,.18);box-shadow:inset 0 0 0 1px rgba(255,224,27,.45)}
.kv-week .brand img,.kv-nu .brand img{animation:kvWiegen 3.2s ease-in-out infinite}
@keyframes kvWiegen{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){ .kv-week .brand img,.kv-nu .brand img{animation:none} }

/* ---------- 41. De verstopte Kwelpieper ---------- */
.kp-verstopt{
  position:absolute;left:var(--x,50%);top:var(--y,60%);z-index:8;
  width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;
  opacity:.34;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.kp-verstopt svg{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.kp-verstopt:hover{opacity:.9;transform:scale(1.15) rotate(-6deg)}
.kp-verstopt:focus-visible{opacity:1;outline:2px solid var(--yellow);outline-offset:4px;border-radius:8px}
.kp-verstopt.gevonden{opacity:1;animation:kpGevonden .7s var(--ease) both;cursor:default}
@keyframes kpGevonden{
  0%{transform:scale(1)}
  40%{transform:scale(1.5) rotate(12deg)}
  100%{transform:scale(1.12) rotate(0)}
}
@media (prefers-reduced-motion:reduce){ .kp-verstopt{display:none} }
.kv-hint{opacity:.55;font-size:.8rem}
.kv-hint:hover{opacity:.85}

/* ---------- 42. De polonaise ----------
   Een rij poppetjes die van rechts naar links onderlangs loopt. */
.kp-polonaise{
  position:fixed;left:0;bottom:calc(.4rem + env(safe-area-inset-bottom));z-index:9200;
  display:flex;align-items:flex-end;gap:2px;pointer-events:none;
  animation:kpLoopt 26s linear both;
  transition:opacity .8s var(--ease);
}
.kp-polonaise.weg{opacity:0}
.kp-polonaise span{
  display:block;width:30px;height:46px;
  transform:scaleY(var(--hoogte,1));transform-origin:bottom center;
  animation:kpHuppel .56s ease-in-out infinite;
  animation-delay:var(--stap,0s);
  filter:drop-shadow(0 4px 6px rgba(3,5,28,.5));
}
.kp-polonaise svg{width:100%;height:100%;display:block}
.kp-polonaise .pp-been{transform-origin:top center;animation:kpBeen .56s ease-in-out infinite alternate}
.kp-polonaise .pp-rechts{animation-delay:.28s}
@keyframes kpLoopt{from{transform:translateX(100vw)}to{transform:translateX(-120%)}}
@keyframes kpHuppel{0%,100%{transform:translateY(0) scaleY(var(--hoogte,1))}50%{transform:translateY(-4px) scaleY(var(--hoogte,1))}}
@keyframes kpBeen{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@media (prefers-reduced-motion:reduce){ .kp-polonaise{display:none} }

/* ---------- 43. Zeven keer op het logo ---------- */
.nav .brand{position:relative}
.kp-tik{animation:kpTik .28s var(--ease)}
@keyframes kpTik{0%{transform:scale(1)}45%{transform:scale(.9) rotate(-5deg)}100%{transform:scale(1)}}
.kp-tong{
  position:absolute;left:26px;top:30px;width:18px;height:20px;z-index:3;pointer-events:none;
  animation:kpTong 1.8s var(--ease) both;transform-origin:top center;
}
.kp-tong svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
@keyframes kpTong{
  0%{transform:scaleY(0) rotate(0)}
  18%{transform:scaleY(1) rotate(-6deg)}
  70%{transform:scaleY(1) rotate(6deg)}
  100%{transform:scaleY(0) rotate(0)}
}
body.kp-flits::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  animation:kpFlits 1.2s steps(1) 1 both;
}
@keyframes kpFlits{
  0%{background:rgba(27,58,245,.5)}
  25%{background:rgba(255,224,27,.5)}
  50%{background:rgba(255,45,32,.45)}
  75%{background:rgba(255,224,27,.35)}
  100%{background:transparent}
}
@media (prefers-reduced-motion:reduce){ body.kp-flits::after,.kp-tong{display:none} }

/* ---------- 44. Foto's die op tafel vallen ----------
   Een korte val met een tikje overhoek, zodat aanklikken voelt alsof
   iemand de foto voor je neerlegt. */
@keyframes kpValt{
  0%{opacity:0;transform:translateY(-26px) rotate(-3.5deg) scale(1.06)}
  55%{opacity:1;transform:translateY(4px) rotate(1.4deg) scale(.995)}
  78%{transform:translateY(-2px) rotate(-.6deg) scale(1.002)}
  100%{transform:none}
}
.valt{animation:kpValt .46s cubic-bezier(.22,.9,.3,1.1) both}
@media (prefers-reduced-motion:reduce){ .valt{animation:none} }