html{background:var(--c-bg)}
body{min-height:100svh}
.skip-link:focus{position:fixed;top:var(--s-2);left:var(--s-2);width:auto;height:auto;clip:auto;margin:0;padding:var(--s-3) var(--s-4);background:var(--c-or);color:var(--c-or-ink);z-index:100;font-family:var(--f-cond);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:var(--t-xs);text-decoration:none}
.eyebrow{margin:0}

/* Kopfleiste */
.top{position:absolute;inset:0 0 auto;z-index:30;padding-top:env(safe-area-inset-top,0px)}
.top-bar{max-width:calc(var(--w-max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter);height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.top-brand{display:flex;align-items:center;min-height:44px;text-decoration:none}
.top-brand img{height:30px;width:auto}

/* Sprachwahl wie Opening-LP */
.lang-wrap{position:relative;flex:none}
.lang-btn{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .7rem;background:rgba(10,9,8,.35);border:1px solid var(--c-line-2);color:var(--c-ink);font-family:var(--f-mono);font-size:.75rem;font-weight:500;letter-spacing:.1em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s var(--ease),color .2s var(--ease)}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{border-color:var(--c-or);color:var(--c-or-2)}
.lang-ico{flex:none}
.lang-pop{position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:220px;padding:var(--s-3);background:var(--c-bg-2);border:1px solid var(--c-line-2);box-shadow:0 18px 40px rgba(0,0,0,.55);transform-origin:top right;animation:lang-in .22s var(--ease) both}
.lang-pop::before{content:"";position:absolute;top:-6px;right:18px;width:10px;height:10px;background:var(--c-bg-2);border-left:1px solid var(--c-line-2);border-top:1px solid var(--c-line-2);transform:rotate(45deg)}
.lang-head{margin:0 0 var(--s-2);padding-inline:var(--s-2);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-3)}
.lang-list{list-style:none;margin:0;padding:0;display:grid}
.lang-list button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:48px;padding:0 var(--s-2);background:none;border:0;border-top:1px solid var(--c-line);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;color:var(--c-ink-3);cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;transition:color .2s var(--ease),background-color .2s var(--ease)}
.lang-list li:first-child button{border-top:0}
.lang-list button span{font-family:var(--f-cond);font-weight:500;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink)}
.lang-list button:hover{background:var(--c-bg-3)}
.lang-list button[aria-current]{color:var(--c-or)}
.lang-list button[aria-current] span{color:var(--c-or-2)}
@keyframes lang-in{from{opacity:0;transform:translateY(-6px) scale(.98)}}

/* Hero */
.hero{position:relative;isolation:isolate;min-height:100svh;display:flex;overflow:hidden;background:var(--c-bg)}
.hero-photo{position:absolute;inset:0;z-index:-2}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,8,.55) 0%,rgba(10,9,8,.15) 28%,rgba(10,9,8,.55) 55%,rgba(10,9,8,.96) 82%,var(--c-bg) 100%)}
.topo{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.topo path{fill:none;stroke:var(--c-ink);stroke-opacity:.16;stroke-width:1;vector-effect:non-scaling-stroke}
.topo path.is-or{stroke:var(--c-or);stroke-opacity:.9}
.topo .summit{fill:var(--c-or)}
.topo .summit-label{fill:var(--c-ink-2);font-family:var(--f-mono);font-size:11px;letter-spacing:.06em}

.hero-in{position:relative;width:100%;max-width:calc(var(--w-max) + 2 * var(--gutter));margin-inline:auto;padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + var(--s-2)) var(--gutter) calc(var(--s-7) + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-7)}
.hero-meta{display:flex;justify-content:space-between;gap:var(--s-3);padding-top:var(--s-3);border-top:1px solid rgba(243,236,227,.14);color:var(--c-ink-2);text-transform:uppercase}
.hero-meta b{font-weight:500;color:var(--c-or)}
.hero-copy{display:grid;gap:var(--s-4)}
.hero-h{margin:0;font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(4.6rem,30vw,8rem);line-height:1;letter-spacing:.004em}
.ln{display:block;overflow:hidden;padding-bottom:.02em}
.lni{display:block}
.ln--or{color:var(--c-or)}
.hero-sub{margin:0;max-width:34ch;color:var(--c-ink);font-size:var(--t-l);line-height:1.45;text-wrap:pretty}
.hero-cue{justify-self:start;display:inline-flex;align-items:center;gap:.7em;min-height:52px;padding:0 1.4em;margin-top:var(--s-2);background:var(--c-or);color:var(--c-or-ink);font-family:var(--f-cond);font-weight:600;font-size:var(--t-s);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background-color .2s var(--ease)}
.hero-cue:hover{background:var(--c-or-2)}
.hero-cue svg{transition:transform .3s var(--ease)}
.hero-cue:hover svg{transform:translateY(3px)}

@media (min-width:960px){
  .top-brand img{height:34px}
  .hero-photo{left:auto;width:42%}
  .hero-photo::after{background:linear-gradient(90deg,var(--c-bg) 0%,rgba(10,9,8,.55) 30%,rgba(10,9,8,.2) 70%,rgba(10,9,8,.5) 100%),linear-gradient(180deg,rgba(10,9,8,.4) 0%,rgba(10,9,8,0) 30%,rgba(10,9,8,0) 70%,var(--c-bg) 100%)}
  .hero-in{padding-bottom:var(--s-8)}
  .hero-h{font-size:clamp(8rem,14.5vw,15rem);line-height:1}
  .hero-sub{font-size:var(--t-xl);max-width:36ch}
}

/* Intro */
.intro-layer{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:var(--gutter);cursor:pointer;overflow:hidden;transition:opacity .35s var(--ease)}
.intro-layer[hidden]{display:none}
.intro-layer.is-out{opacity:0;pointer-events:none}
.intro-layer.is-covered{pointer-events:none;cursor:auto}
.intro-frame{position:relative;width:min(560px,100%);display:grid;gap:var(--s-3);transition:transform .4s cubic-bezier(.65,0,.35,1),opacity .4s cubic-bezier(.65,0,.35,1)}
.intro-row{display:flex;justify-content:space-between;gap:var(--s-3);color:var(--c-ink-3);text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .6s var(--ease),color .3s var(--ease)}
.intro-row--b{transition-delay:.08s}
.intro-layer.is-on .intro-row{opacity:1;transform:none}
.intro-stage{display:grid}
.intro-mask{grid-area:1/1;overflow:hidden;display:flex;align-items:flex-end}
.intro-count{display:flex;align-items:flex-start;font-family:var(--f-display);font-size:clamp(5.5rem,30vw,11rem);line-height:1;font-variant-numeric:tabular-nums;transform:translateY(105%);transition:transform .55s cubic-bezier(.16,1,.3,1)}
.intro-layer.is-on .intro-count{transform:none}
.intro-unit{font-size:.3em;line-height:1;color:var(--c-or);margin:.18em 0 0 .08em}
.intro-mask--logo{align-items:center}
.intro-logo{width:100%;height:auto;transform:translateY(110%);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.intro-layer.is-s2 .intro-count{transform:translateY(-110%);transition:transform .55s cubic-bezier(.7,0,.2,1)}
.intro-layer.is-s2 .intro-logo{transform:none}
.intro-bar{position:relative;height:2px;background:var(--c-line);overflow:hidden}
.intro-bar i{display:block;height:100%;background:var(--c-or);transform:scaleX(0);transform-origin:left}
.intro-bar b{position:absolute;inset:0;background:var(--c-ink);transform:scaleX(0);transform-origin:right;opacity:0}
.intro-layer.is-lock .intro-bar b{animation:intro-lock .5s cubic-bezier(.16,1,.3,1)}
.intro-layer.is-lock .intro-row--b{color:var(--c-ink-2)}
.intro-layer.is-lock #intro-pct{color:var(--c-or)}
@keyframes intro-lock{0%{opacity:1;transform:scaleX(1);transform-origin:left}100%{opacity:1;transform:scaleX(0);transform-origin:right}}

@media (min-width:960px){
  .intro-frame{width:min(760px,100%);gap:var(--s-4)}
  .intro-count{font-size:clamp(11rem,15vw,15rem)}
}

/* Hoehenmesser rechts: Skala laeuft beim Aufstieg nach unten durch */
.intro-ruler{position:absolute;right:max(4px,calc(var(--gutter) * .4));top:22%;bottom:22%;width:14px;overflow:hidden;opacity:0;transition:opacity .5s var(--ease) .1s;-webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent)}
.intro-layer.is-on .intro-ruler{opacity:1}
.intro-ruler i{position:absolute;left:0;right:0;top:-200%;height:300%;background:repeating-linear-gradient(180deg,var(--c-ink-3) 0 1px,transparent 1px 40px) right/14px 100% no-repeat,repeating-linear-gradient(180deg,var(--c-line-2) 0 1px,transparent 1px 8px) right/7px 100% no-repeat;will-change:transform}
.intro-ruler::after{content:"";position:absolute;left:0;top:50%;width:14px;height:2px;margin-top:-1px;background:var(--c-or)}
.intro-layer.is-s2 .intro-ruler{opacity:0;transition-delay:0s}

/* Hoehepunkt: Ticket-Verschluss in Orange, perforierte Kanten */
.intro-shutter{position:absolute;inset:0;z-index:2;background:var(--c-or);transform:translateY(calc(100% + 14px));will-change:transform;pointer-events:none}
.intro-shutter::before,.intro-shutter::after{content:"";position:absolute;left:0;right:0;height:12px;background:var(--c-or);-webkit-mask:radial-gradient(circle 6px at 50% 0,transparent 96%,#000 100%) 0 0/22px 12px repeat-x;mask:radial-gradient(circle 6px at 50% 0,transparent 96%,#000 100%) 0 0/22px 12px repeat-x}
.intro-shutter::before{bottom:100%;margin-bottom:-1px}
.intro-shutter::after{top:100%;margin-top:-1px;transform:scaleY(-1)}
.intro-shutter>span{position:absolute;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--c-or-ink)}
.intro-shutter>span:first-child{top:22px;padding-bottom:10px;border-bottom:1px dashed rgba(20,10,2,.35)}
.intro-shutter>span:last-child{bottom:22px;padding-top:10px;border-top:1px dashed rgba(20,10,2,.35)}
.intro-layer.is-shut .intro-shutter{transform:none;transition:transform .4s cubic-bezier(.65,0,.35,1)}
.intro-layer.is-shut .intro-frame{transform:translateY(-8vh);opacity:.25}
.intro-layer.is-covered .intro-frame,.intro-layer.is-covered .intro-skip,.intro-layer.is-covered .intro-ruler{visibility:hidden}
.intro-layer.is-exit .intro-shutter{transform:translateY(calc(-100% - 14px));transition:transform .7s cubic-bezier(.76,0,.24,1)}

.intro-skip{position:absolute;right:var(--gutter);bottom:calc(var(--s-4) + env(safe-area-inset-bottom,0px));min-height:44px;padding:0 var(--s-2);background:none;border:0;color:var(--c-ink-3);text-transform:uppercase;cursor:pointer;opacity:0;transition:opacity .4s var(--ease) .5s}
.intro-layer.is-on .intro-skip{opacity:1}
.intro-skip:hover{color:var(--c-ink)}

/* Intro-Startzustände der Seite (nur mit JS und ohne reduced motion) */
html.intro{overflow:hidden}
.hero-photo{transition:opacity 1.1s var(--ease),transform 2.6s cubic-bezier(.16,1,.3,1)}
.top{transition:opacity .6s var(--ease) .45s,transform .8s cubic-bezier(.16,1,.3,1) .45s}
.lni{transition:transform 1.05s cubic-bezier(.16,1,.3,1) .12s}
.ln--or .lni{transition-delay:.2s}
.r{transition:opacity .7s var(--ease),transform .9s cubic-bezier(.16,1,.3,1)}
.r1{transition-delay:.45s}.r2{transition-delay:.12s}.r3{transition-delay:.38s}.r4{transition-delay:.5s}
.topo path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.35s cubic-bezier(.45,0,.2,1)}
.topo .summit,.topo .summit-label{transition:opacity .4s var(--ease) .9s}
html.intro .hero-photo{opacity:0;transform:scale(1.14) translateY(3%)}
html.intro .top{opacity:0;transform:translateY(-10px)}
html.intro .lni{transform:translateY(105%)}
html.intro .r{opacity:0;transform:translateY(18px)}
html.intro .topo path{stroke-dashoffset:1}
html.intro .topo .summit,html.intro .topo .summit-label{opacity:0}
html.intro.is-draw .topo path{stroke-dashoffset:0}
html.is-skip *,html.is-skip *::before,html.is-skip *::after{transition-delay:0s!important;transition-duration:.3s!important;animation:none!important}

/* Scroll-Reveal Events (nur mit JS, IntersectionObserver und ohne reduced motion) */
html.rv .rv-i{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .95s cubic-bezier(.16,1,.3,1)}
html.rv .rv-i.in{opacity:1;transform:none}
html.rv .tix li.rv-i .tix-img img{transform:scale(1.14);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
html.rv .tix li.rv-i.in .tix-img img{transform:none}
html.rv .tix li.rv-i.in .tix-card:hover .tix-img img{transform:scale(1.04);transition-duration:.8s}
html.rv .tix li.rv-i .tix-stub{transform-origin:left}
@media (min-width:900px){
  html.rv .tix li.rv-i:nth-child(2){transition-delay:.1s}
  html.rv .tix li.rv-i:nth-child(3){transition-delay:.2s}
  html.rv .ev-head .rv-i:nth-child(2){transition-delay:.06s}
  html.rv .ev-head .rv-i:nth-child(3){transition-delay:.14s}
}

/* Events */
.events{position:relative;padding:var(--s-8) 0 var(--s-8)}
.ev-head{display:grid;gap:var(--s-3);margin-bottom:var(--s-6)}
.ev-h{margin:0;font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:var(--t-h2);line-height:1.08}
.ev-lead{margin:0;max-width:44ch;color:var(--c-ink-2)}
.tix{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-5)}
.tix-card{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--c-bg-2);border:1px solid var(--c-line);text-decoration:none;transition:border-color .25s var(--ease),transform .35s var(--ease)}
.tix-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--c-bg-3)}
.tix-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform .8s var(--ease)}
.tix-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,8,0) 50%,rgba(18,16,14,.85) 100%)}
.tix-no{position:absolute;top:var(--s-3);left:var(--s-3);z-index:1;padding:.3em .55em;background:var(--c-bg);color:var(--c-ink)}
.tix-body{flex:1;display:grid;align-content:start;gap:var(--s-2);padding:var(--s-4) var(--s-4) var(--s-5)}
.tix-date{margin:0;color:var(--c-or);text-transform:uppercase}
.tix-name{margin:0;font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(1.9rem,8vw,2.4rem);line-height:1.04;letter-spacing:.005em;text-wrap:balance}
.tix-place{margin:0;font-family:var(--f-cond);font-weight:500;font-size:var(--t-s);letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-2)}
.tix-stub{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 var(--s-4);border-top:1px dashed var(--c-line-2);font-family:var(--f-cond);font-weight:600;font-size:var(--t-s);letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink);transition:background-color .25s var(--ease),color .25s var(--ease)}
.tix-stub::before,.tix-stub::after{content:"";position:absolute;top:-10px;width:20px;height:20px;border-radius:50%;background:var(--c-bg);border:1px solid var(--c-line)}
.tix-stub::before{left:-11px}
.tix-stub::after{right:-11px}
.tix-stub svg{transition:transform .3s var(--ease)}
.tix-card:hover,.tix-card:focus-visible{border-color:var(--c-or)}
.tix-card:hover .tix-img img{transform:scale(1.04)}
.tix-card:hover .tix-stub,.tix-card:focus-visible .tix-stub{background:var(--c-or);color:var(--c-or-ink)}
.tix-card:hover .tix-stub svg{transform:translateX(4px)}
.tix-card:active{transform:translateY(1px)}

@media (min-width:900px){
  .events{padding:var(--s-9) 0}
  .ev-head{grid-template-columns:1fr auto;align-items:end;column-gap:var(--s-7)}
  .ev-head .eyebrow{grid-column:1/-1}
  .ev-lead{max-width:34ch;padding-bottom:.6rem}
  .tix{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
  .tix-img{aspect-ratio:4/4.2}
  .tix-name{font-size:clamp(1.9rem,2.6vw,2.6rem)}
}

/* Fuß */
.foot{border-top:1px solid var(--c-line);padding:var(--s-6) 0 calc(var(--s-6) + env(safe-area-inset-bottom,0px))}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5)}
.foot-logo{height:24px;width:auto;margin-right:auto}
.foot-meta{margin:0;width:100%;order:3;color:var(--c-ink-3);text-transform:uppercase}
.foot-link{display:inline-flex;align-items:center;min-height:44px;color:var(--c-ink-2);font-size:var(--t-s);text-decoration:underline;text-decoration-color:var(--c-line-2);text-underline-offset:.3em;transition:color .2s var(--ease)}
.foot-link:hover{color:var(--c-ink);text-decoration-color:var(--c-or)}
@media (max-width:599px){.foot-logo{width:100%;flex:none;margin-bottom:var(--s-2);height:24px;width:auto}.foot-in{column-gap:var(--s-4)}}
@media (min-width:900px){.foot-meta{width:auto;order:0}}

/* Nachschliff: Topo hinter Text ruhiger, Inhaltsbreite wie Hero */
.wrap{max-width:calc(var(--w-max) + 2 * var(--gutter))}
.topo{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.35) 62%,rgba(0,0,0,.15) 100%);mask-image:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.35) 62%,rgba(0,0,0,.15) 100%)}
@media (min-width:960px){
  .topo{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.35) 40%,#000 62%);mask-image:linear-gradient(90deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.35) 40%,#000 62%)}
}

@media print{.rv-i{opacity:1!important;transform:none!important}}