@import url('https://fonts.googleapis.com/css2?family=Anton&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* =========================================================
   CINEMA PAGE — every subpage opens inside the same film world.
   Night-turf stage, acid floodlight accent, mist type.
   ========================================================= */
:root{--cp-night:#071b1b;--cp-deep:#0b2929;--cp-mist:#e9eee3;--cp-acid:#d8f369;--cp-silver:#8baaa3;--cp-line:rgba(233,238,227,.22);--cp-ease:cubic-bezier(.16,1,.3,1);--cp-mono:'JetBrains Mono',ui-monospace,monospace;--cp-display:Anton,'Bebas Neue',Impact,sans-serif}

/* ---------- hero shell ---------- */
.cp-hero{position:relative!important;isolation:isolate;overflow:hidden!important;background:var(--cp-night)!important;color:var(--cp-mist)}
.cp-hero>.cp-hide{display:none!important}
.cp-hero>:not(.cp-stage):not(.cp-chrome):not(.cp-hide){position:relative;z-index:4}
.cp-hero::after{z-index:3!important;opacity:.07!important}

/* layout takeover for the classic page heroes */
.cp-hero.cp-own{margin-top:0!important;height:auto!important;min-height:100svh;display:flex!important;align-items:flex-end!important;justify-content:flex-start!important;text-align:left!important;padding:130px clamp(22px,7vw,124px) clamp(110px,15vh,170px)}
.cp-hero.cp-own.cp-center{justify-content:center!important;text-align:center!important;align-items:center!important}
.cp-hero.cp-own.cp-right{justify-content:flex-end!important;text-align:right!important}
.cp-hero.cp-own.cp-calm{min-height:62svh;padding-bottom:clamp(70px,10vh,110px)}
.cp-own>.page-hero-inner,.cp-own>.events-hero-inner{padding:0!important;max-width:min(1100px,100%)}
.cp-own .eyebrow{font:600 clamp(10px,.8vw,12px)/1.5 var(--cp-mono)!important;letter-spacing:.19em!important;text-transform:uppercase;color:var(--cp-acid)!important;margin:0 0 clamp(16px,3vh,30px)!important}
.cp-own .eyebrow::before{content:"";display:inline-block;width:28px;height:1px;background:currentColor;vertical-align:middle;margin-right:13px}
.cp-center .eyebrow::before{display:none}
.cp-own h1{font:400 clamp(72px,12.5vw,230px)/.84 var(--cp-display)!important;text-transform:uppercase;letter-spacing:-.015em!important;color:var(--cp-mist)!important;margin:0 0 clamp(18px,3vh,30px)!important;text-wrap:balance;overflow-wrap:anywhere}
.cp-own h1 .cm-w:nth-child(4n+3)>span{color:transparent;-webkit-text-stroke:1.5px var(--cp-mist)}
.cp-own h1 .cm-w:last-of-type>span{color:var(--cp-acid)}
.cp-own h1 .cm-w:only-of-type>span{color:var(--cp-mist)}
.cp-calm h1{font-size:clamp(60px,9vw,150px)!important}
.cp-own .page-hero-inner p,.cp-own .events-hero-inner p,.cp-own .hero-sub{font:500 clamp(13px,1.15vw,17px)/1.6 inherit;color:#d5e4d9!important;max-width:440px;margin:0!important}
.cp-center .page-hero-inner p,.cp-center .hero-sub,.cp-center .events-hero-inner p{margin:0 auto!important}
.cp-right .page-hero-inner p,.cp-right .events-hero-inner p{margin-left:auto!important}

/* event detail + volleyball: keep their layout, pull under the see-through nav */
body.cp-on .event-nav{background:rgba(233,238,227,.97)}
body.cp-on main>.cp-hero.hc-hero{margin-top:-72px;padding-top:calc(8rem + 20px)}
#hero.cp-hero{margin-top:0!important;height:100svh!important;max-height:none!important;min-height:600px!important}
.hc-hero.cp-hero .hc-hero-content,#hero.cp-hero #hero-content{text-shadow:0 2px 30px rgba(7,27,27,.6)}
/* feedback card hero */
.hero.cp-hero.cp-card{min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding-top:90px!important}
.hero.cp-hero.cp-card::after{display:none}

/* ---------- stage layers ---------- */
.cp-stage{position:absolute;inset:0;z-index:0;overflow:hidden;background:radial-gradient(ellipse at 64% 46%,#164a43 0%,#0b2929 38%,#071b1b 83%);pointer-events:none}
.cp-world,.cp-film,.cp-film img,.cp-film video,.cp-world canvas,.cp-poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.cp-world{z-index:1;opacity:var(--cp-world,1);transform:scale(var(--cp-ws,1));transform-origin:60% 50%;will-change:opacity,transform}
.cp-poster{object-fit:cover;opacity:.42;filter:saturate(.7) hue-rotate(-8deg)}
.cp-webgl .cp-poster{display:none}
.cp-film{z-index:2;opacity:var(--cp-film,0);transform:scale(var(--cp-fs,1.1));will-change:opacity,transform}
.cp-film img,.cp-film video{object-fit:cover;object-position:var(--cp-pos,center)}
.cp-film video{opacity:0;transition:opacity .7s}
.cp-film.ready video{opacity:1}
.cp-shade{position:absolute;inset:0;z-index:5;background:linear-gradient(90deg,rgba(7,27,27,.8),transparent 62%),linear-gradient(0deg,rgba(7,27,27,.9),transparent 34%,transparent 72%,rgba(7,27,27,.55))}
.cp-center .cp-shade{background:radial-gradient(ellipse at 50% 55%,rgba(7,27,27,.2),rgba(7,27,27,.85) 80%),linear-gradient(0deg,rgba(7,27,27,.9),transparent 40%)}
.cp-right .cp-shade{background:linear-gradient(270deg,rgba(7,27,27,.82),transparent 62%),linear-gradient(0deg,rgba(7,27,27,.9),transparent 34%,transparent 72%,rgba(7,27,27,.55))}
.cp-grain{position:absolute;inset:0;z-index:6;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cp-sweep{position:absolute;inset:-15% -30%;z-index:7;background:var(--cp-acid);transform:translate3d(var(--cp-sx,-150%),0,0) rotate(-18deg) scaleX(.16);opacity:var(--cp-so,0)}
.cp-lines{position:absolute;inset:0;z-index:4;opacity:0;width:100%;height:100%}
.cp-lines path,.cp-lines circle,.cp-lines rect{fill:none;stroke:rgba(216,243,105,.5);stroke-width:1;vector-effect:non-scaling-stroke}

/* ---------- chrome ---------- */
.cp-chrome{position:absolute;inset:0;z-index:3;pointer-events:none;font:500 10px/1.6 var(--cp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cp-silver)}
.cp-mark{position:absolute;right:clamp(10px,5vw,90px);top:50%;transform:translate3d(0,calc(-50% + var(--cp-p,0)*-120px),0);font:400 clamp(120px,22vw,400px)/.8 var(--cp-display);color:transparent;-webkit-text-stroke:1px rgba(233,238,227,.2);white-space:nowrap;letter-spacing:-.01em}
.cp-center .cp-mark{right:50%;transform:translate3d(50%,calc(-50% + var(--cp-p,0)*-120px),0)}
.cp-right .cp-mark{right:auto;left:clamp(10px,5vw,90px)}
.cp-scene{position:absolute;right:clamp(22px,4vw,60px);top:50%;transform:translateY(-50%);writing-mode:vertical-rl;display:flex;align-items:flex-end;gap:11px}
.cp-right .cp-scene{right:auto;left:clamp(22px,4vw,60px)}
.cp-scene b{font:400 34px/1 var(--cp-display);color:var(--cp-acid);letter-spacing:0}
.cp-scene i{font-style:normal;color:var(--cp-mist)}
.cp-scene::before{content:"";width:1px;height:70px;background:var(--cp-line)}
.cp-foot{position:absolute;left:clamp(22px,7vw,124px);right:clamp(22px,7vw,124px);bottom:clamp(20px,3.5vh,40px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.cp-geo b{color:var(--cp-acid);font-weight:500}
.cp-cue{display:grid;gap:10px;width:min(30vw,340px);text-align:right}
.cp-cue em{display:block;height:2px;background:rgba(233,238,227,.25)}
.cp-cue em i{display:block;height:100%;background:var(--cp-acid);transform:scaleX(var(--cp-p,0));transform-origin:left}
.cp-tag{position:absolute;top:clamp(92px,13vh,120px);left:clamp(22px,7vw,124px);display:inline-flex;gap:9px;align-items:center;color:var(--cp-mist);border:1px solid var(--cp-line);padding:7px 11px;background:rgba(7,27,27,.35);backdrop-filter:blur(6px)}
.cp-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cp-acid);animation:cpBlink 1.4s infinite}
.cp-right .cp-tag{left:auto;right:clamp(22px,7vw,124px)}
.cp-calm .cp-mark,.cp-calm .cp-cue,.cp-card .cp-chrome{display:none}
.hc-hero.cp-hero .cp-mark,#hero.cp-hero .cp-mark{opacity:.55}
#hero.cp-hero .cp-tag,.hc-hero.cp-hero .cp-tag{left:clamp(22px,4vw,60px)}
@keyframes cpBlink{50%{opacity:.25}}

/* entrance */
html.cm-js .cp-hero .cp-chrome>*{opacity:0;transition:opacity 1.2s var(--cp-ease) .8s}
html.cm-js body.cm-ready .cp-hero .cp-chrome>*{opacity:1}
html.cm-js .cp-stage{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s cubic-bezier(.76,0,.24,1) .05s}
html.cm-js body.cm-ready .cp-stage{clip-path:inset(0 0 0 0)}

/* ---------- static fallback: reduced motion / save-data / no WebGL2 ---------- */
.cp-static .cp-world{display:none}
.cp-static .cp-film{opacity:1;transform:scale(1.02)}
.cp-static .cp-film video{display:none}
.cp-static .cp-lines{opacity:.55}
.cp-static.cp-nofilm .cp-lines{opacity:.8}
.cp-static .cp-sweep{display:none}
.cp-static .cp-film img{filter:saturate(.8) contrast(1.05)}
.cp-static .cp-cue span::after{content:""}
html.cm-static .cp-stage,html.motion-paused .cp-stage{clip-path:none!important}
html.cm-static .cp-chrome>*,html.motion-paused .cp-chrome>*{opacity:1!important}

/* ---------- see-through nav over the film (mirrors homepage) ---------- */
body.film-nav-over #navbar{background:linear-gradient(180deg,rgba(7,27,27,.82),rgba(7,27,27,0))!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.film-nav-over #navbar .nav-link{color:rgba(233,238,227,.82)!important}
body.film-nav-over #navbar .nav-link:hover,body.film-nav-over #navbar .nav-link.active{color:var(--cp-acid)!important}
body.film-nav-over #navbar .logo,body.film-nav-over .event-nav-logo img{filter:drop-shadow(0 2px 14px rgba(0,0,0,.55))}
body.film-nav-over #navbar .btn-green{background:var(--cp-acid)!important;color:var(--cp-night)!important}
body.film-nav-over #navbar #hamburger span{background:var(--cp-mist)!important}
body.film-nav-over .event-nav{background:linear-gradient(180deg,rgba(7,27,27,.82),rgba(7,27,27,0))!important;border-bottom-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
body.film-nav-over .event-nav-links a{color:rgba(233,238,227,.85)!important}
body.film-nav-over .event-menu-button{color:var(--cp-mist)!important}
body.film-nav-over .event-menu-button span{background:var(--cp-mist)!important}

/* ---------- content raised to the film's level ---------- */
body.cp-on main>section h2,body.cp-on>section h2{letter-spacing:-.01em}
body.cp-on .label{font-family:var(--cp-mono)!important;font-size:.68rem!important;letter-spacing:.2em!important}
body.cp-on .cm-ticker{background:var(--cp-night)}
body.cp-on .cm-ticker span{font-family:var(--cp-display);text-transform:uppercase}
body.cp-on .cm-ticker span::after{background:var(--cp-acid)}
body.cp-on .form-input,body.cp-on input[type=text],body.cp-on input[type=email],body.cp-on input[type=tel],body.cp-on textarea,body.cp-on select{border-radius:4px}
body.cp-on .form-input:focus{border-color:var(--cp-night)!important;box-shadow:0 0 0 3px rgba(216,243,105,.55)!important}
body.cp-on .ccard,body.cp-on .price-card,body.cp-on .aud-card,body.cp-on .feier-card,body.cp-on .train-card,body.cp-on .ev-card{border-radius:6px!important}
body.cp-on .ccard-phone{background:var(--cp-night)!important;box-shadow:0 30px 60px -30px rgba(7,27,27,.7)!important}
body.cp-on .ccard-phone .ccard-value{font-family:var(--cp-display);font-weight:400;font-size:2rem;color:var(--cp-acid)!important}
body.cp-on .quick-bar{background:var(--cp-night)!important;border-bottom:1px solid rgba(216,243,105,.2)}
body.cp-on .quick-item{font-family:var(--cp-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
body.cp-on .cta-strip h2{font-family:var(--cp-display)!important;font-weight:400!important;text-transform:uppercase}
body.cp-on footer .cm-footer-mark{font-family:var(--cp-display);-webkit-text-stroke-color:rgba(216,243,105,.3)}

/* ---------- page-to-page: the cut ---------- */
.cm-curtain .cm-curtain-t{position:absolute;left:clamp(22px,7vw,124px);bottom:clamp(30px,8vh,80px);z-index:2;font:400 clamp(56px,10vw,170px)/.85 var(--cp-display);text-transform:uppercase;color:var(--cp-mist);opacity:0;transform:translate3d(0,40px,0);transition:opacity .35s,transform .6s var(--cp-ease)}
.cm-curtain .cm-curtain-t small{display:block;font:600 11px/1.4 var(--cp-mono);letter-spacing:.2em;color:var(--cp-acid);margin-bottom:14px}
.cm-curtain.cm-on .cm-curtain-t{opacity:1;transform:none;transition-delay:.18s}
.cm-curtain i{background:var(--cp-night)!important}
.cm-curtain i:nth-child(odd){background:var(--cp-deep)!important}
.cm-curtain::after{content:"";position:absolute;inset:-15% -30%;background:var(--cp-acid);transform:translate3d(-160%,0,0) rotate(-18deg) scaleX(.12);z-index:3}
.cm-curtain.cm-on::after{transform:translate3d(160%,0,0) rotate(-18deg) scaleX(.12);transition:transform .7s cubic-bezier(.76,0,.24,1)}
.cm-curtain.cm-arrive i{transform:scaleY(1);transition:none}
.cm-curtain.cm-arrive.cm-go i{transform:scaleY(0);transform-origin:50% 0;transition:transform .7s cubic-bezier(.76,0,.24,1)}
.cm-curtain.cm-arrive.cm-go i:nth-child(2){transition-delay:.05s}.cm-curtain.cm-arrive.cm-go i:nth-child(3){transition-delay:.1s}.cm-curtain.cm-arrive.cm-go i:nth-child(4){transition-delay:.15s}.cm-curtain.cm-arrive.cm-go i:nth-child(5){transition-delay:.2s}

/* ---------- responsive ---------- */
@media(max-width:1024px){body.film-nav-over #navbar .btn-green{padding-left:.9rem;padding-right:.9rem}}
@media(max-width:767px){
  .cp-hero.cp-own{padding:110px 21px clamp(120px,19vh,170px)}
  .cp-hero.cp-own.cp-calm{min-height:54svh;padding-bottom:70px}
  .cp-own h1{font-size:clamp(58px,17vw,120px)!important}
  .cp-calm h1{font-size:clamp(50px,14vw,90px)!important}
  .cp-mark{font-size:44vw;right:-4vw;top:34%}
  .cp-scene{right:14px;top:30%;font-size:8px}.cp-scene b{font-size:24px}.cp-scene::before{height:34px}
  .cp-right .cp-scene{left:14px}
  .cp-foot{left:21px;right:21px;bottom:18px;font-size:8px}
  .cp-cue{width:44vw}
  .cp-tag{top:86px;left:21px;font-size:8px}
  .cp-right .cp-tag{right:21px}
  body.cp-on main>.cp-hero.hc-hero{margin-top:-66px}
  #hero.cp-hero{min-height:560px!important}
}
@media(prefers-reduced-motion:reduce){.cp-tag::before{animation:none}.cm-curtain::after{display:none}}
.hero.cp-card h1{font:400 clamp(40px,11vw,58px)/.92 var(--cp-display)!important;text-transform:uppercase;letter-spacing:0!important}
.hero.cp-card .eyebrow{font-family:var(--cp-mono)!important;color:var(--cp-acid)!important}
body.cp-on .cookie-table{display:block;max-width:100%;overflow-x:auto}
@media(max-width:767px){.cp-own h1{font-size:clamp(44px,12.4vw,96px)!important;overflow-wrap:normal}.cp-calm h1{font-size:clamp(40px,11vw,80px)!important}}
