@font-face{font-family:"Abril Fatface";src:url(../fonts/abril-fatface.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Sedgwick Ave Display";src:url(../fonts/sedgwick-ave-display.woff2) format("woff2");font-display:swap}
@font-face{font-family:Sora;src:url(../fonts/sora.woff2) format("woff2");font-weight:100 800;font-display:swap}

:root{
  --ink:#0f0b08; --ink2:#1a130e; --ink3:#2a1f17;
  --brass:#d1a155; --brass-hi:#f6e7bc; --wine:#7a1f2e; --text:#f3e9d6; --muted:#b9a88f;
  --display:"Abril Fatface",Georgia,serif; --body:Sora,system-ui,sans-serif;
  --gutter:clamp(16px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font:400 1rem/1.65 var(--body);overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;margin:0;letter-spacing:.005em}
h2{font-size:clamp(2.6rem,7.5vw,6rem)}
h1{font-size:clamp(3rem,10vw,7.5rem)}
.h3{font-size:clamp(1.7rem,3.4vw,2.6rem);margin-bottom:1.2rem}
.gap{margin-top:3.5rem}
ol,ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--brass-hi);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--brass);color:#000;padding:.6rem 1rem;border-radius:6px}
.skip:focus{top:12px}
.wrap{width:min(1240px,100%);margin-inline:auto;padding-inline:var(--gutter)}
.kicker{font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin:0 0 .9rem}
.kicker.dark{color:#3b1610}
.lead{font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--text);max-width:40em}

.btn{display:inline-block;font:600 1rem/1 var(--body);padding:1.05rem 1.7rem;border-radius:999px;border:2px solid var(--brass);background:linear-gradient(180deg,#f3d690,#c8964a);color:#1a0f05;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(209,161,85,.35)}
.btn.ghost{background:rgba(15,11,8,.45);color:var(--brass-hi)}
.cta{display:flex;flex-wrap:wrap;gap:.8rem}
.more{display:inline-block;margin-top:2rem;font-weight:600;color:var(--brass);text-underline-offset:.3em}

/* Kopfzeile */
.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:.7rem var(--gutter);transition:background .3s,backdrop-filter .3s}
.top.solid{background:rgba(15,11,8,.82);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand img{width:42px;height:42px;border-radius:50%}
.brand-mark{width:128px;height:auto;overflow:visible}
.brand-mark .wm-line,.foot-mark .wm-line,.brand-mark .wm-sub{display:none}
.top nav{display:flex;gap:clamp(1rem,2.6vw,2.2rem)}
.top nav a{text-decoration:none;font-weight:500;font-size:.95rem;padding:.4rem 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.top nav a:hover,.top nav a[aria-current]{color:var(--brass);border-color:var(--brass)}
.burger{display:none;position:relative;z-index:2;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0}
.burger span:not(.vh){position:absolute;left:9px;right:9px;height:2px;background:var(--text);transition:transform .25s,top .25s}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:26px}
@media (max-width:760px){
  .burger{display:block}
  .top nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:1.4rem;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
  .top nav a{font:400 2.4rem/1.1 var(--display)}
  .nav-open .top nav{opacity:1;visibility:visible}
  .nav-open .burger span:nth-child(1){top:21px;transform:rotate(45deg)}
  .nav-open .burger span:nth-child(2){top:21px;transform:rotate(-45deg)}
  .nav-open{overflow:hidden}
}

/* Hero */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--ink);isolation:isolate}
.hero-glow{position:absolute;inset:0;background:radial-gradient(60vmax 50vmax at 50% 40%,#3b2514 0,#1a100a 45%,var(--ink) 75%)}
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.stage{--s:min(88svh,135vw);position:absolute;left:50%;top:max(0px,calc(38svh - var(--s)*.43));width:var(--s);aspect-ratio:1;transform:translateX(-50%);z-index:1}
.gears{position:absolute;inset:0}
.gear{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%)}
.gear svg{width:100%;height:100%;overflow:visible;will-change:transform}
.hub-wrap{position:absolute;left:50%;top:43%;width:47.5%;aspect-ratio:1;transform:translate(-50%,-50%)}
.hub{all:unset;display:block;width:100%;height:100%;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent}
.hub svg{width:100%;height:100%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.65))}
.hub:focus-visible{outline:3px solid var(--brass-hi);outline-offset:4px}
.eyes{opacity:.9}
.shock{position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1;border:3px solid var(--brass-hi);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0}
.hero-copy{position:absolute;inset:auto 0 0;z-index:4;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:0 var(--gutter) clamp(1.2rem,4svh,2.6rem);background:linear-gradient(transparent,rgba(15,11,8,.82) 38%,var(--ink))}
.wordmark{width:min(82vw,62svh,680px);height:auto;overflow:visible;filter:drop-shadow(0 6px 14px rgba(0,0,0,.85))}
.wm-sub{font:400 66px var(--display)}
.motto{margin:.2rem 0 .7rem;font-size:clamp(1rem,2.2vw,1.35rem);font-weight:500}
.motto em{font-style:normal;color:var(--brass)}
.js .home .wm-line{stroke-dasharray:1;stroke-dashoffset:1}

.strip{overflow:hidden;background:var(--brass);color:#120c07;padding:.75rem 0;position:relative;z-index:2}
.strip>div{display:flex;align-items:center;gap:1.4rem;width:max-content;animation:strip 38s linear infinite;font:400 1.5rem/1 var(--display)}
.mini-gear{width:1.1em;height:1.1em;flex:none}
@keyframes strip{to{transform:translateX(-50%)}}

/* Register */
.register{background:var(--ink);overflow:hidden}
.reg-track{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem);padding:clamp(4rem,10vh,6.5rem) var(--gutter);width:max-content}
.reg-intro{flex:none;width:min(82vw,560px)}
.reg-intro img{margin-top:1.4rem;border-radius:10px;width:100%}
.reg-card{position:relative;flex:none;margin:0;height:min(62vh,520px);overflow:hidden;border-radius:10px;background:var(--ink2)}
.reg-card img{height:100%;width:auto;max-width:none;transition:transform .5s}
.reg-card:hover img{transform:scale(1.05)}
.reg-card:nth-of-type(even){margin-top:4vh}
.reg-card figcaption{position:absolute;inset:auto 0 0;padding:2.6rem 1.1rem .9rem;background:linear-gradient(transparent,rgba(0,0,0,.82));font:400 1.7rem/1 var(--display)}
@media (max-width:899px){
  .register{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .reg-card,.reg-intro{scroll-snap-align:center}
  .reg-card{height:380px}
  .reg-card:nth-of-type(even){margin-top:0}
}

/* Gesprayter Teaser */
.tagwall{position:relative;overflow:hidden;padding:clamp(2.5rem,7vw,5rem) var(--gutter);background:
  radial-gradient(50% 70% at 30% 50%,rgba(255,46,136,.09),transparent 70%),
  radial-gradient(45% 70% at 72% 58%,rgba(25,227,255,.08),transparent 70%),
  repeating-linear-gradient(0deg,transparent 0 118px,rgba(0,0,0,.4) 118px 121px),
  repeating-linear-gradient(90deg,transparent 0 238px,rgba(0,0,0,.3) 238px 241px),
  #211d1b}
.tagwall svg{width:min(900px,100%);height:auto;margin-inline:auto;overflow:visible}
.tag{font-family:"Sedgwick Ave Display",var(--display)}
.t1{font-size:178px}
.t2{font-size:128px}
.tag-front{fill:#ff2e88;stroke:#fff;stroke-width:1.5;paint-order:stroke}
.tag-back{fill:#19e3ff}
.tag-mist{fill:#ff2e88;opacity:.55}
.tag-specks{fill:#ff2e88;opacity:.7}
.drip{fill:#ff2e88}

/* Sprüche */
.sprueche{background:var(--brass);color:#120c07;padding:clamp(4.5rem,11vw,8rem) 0}
.spr-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem) clamp(2rem,5vw,5rem);margin-top:3rem}
.spruch{margin:0;display:flex;align-items:center;gap:clamp(1.1rem,2.6vw,2.2rem)}
.spruch:nth-child(even){transform:translateY(2.6rem)}
.spruch p{font:400 clamp(1.6rem,3.1vw,2.7rem)/1.08 var(--display);margin:0 0 .5rem}
.spruch cite{font-style:normal;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem}
.portrait{position:relative;flex:none;width:clamp(116px,15vw,186px);aspect-ratio:1}
.portrait img{position:absolute;inset:11.5%;width:77%;height:77%;object-fit:cover;border-radius:50%}
.ring-gear{position:absolute;inset:0;color:#120c07}
@media (max-width:760px){.spr-grid{grid-template-columns:1fr}.spruch:nth-child(even){transform:none}}

/* Termine */
.termine,.teaser,.section{padding:clamp(4rem,10vw,7rem) 0}
.teaser{background:var(--ink2)}
.section.alt{background:var(--ink2)}
.tickets{display:grid;gap:1rem;margin-top:2.2rem}
.section .tickets{margin-top:0}
.ticket{--akz:var(--brass);position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(1rem,3vw,2.4rem);padding:clamp(1rem,2.4vw,1.6rem) clamp(1.1rem,2.6vw,2rem);background:var(--ink3);border-left:6px solid var(--akz);border-radius:10px;text-decoration:none;transition:transform .25s,background .25s}
a.ticket:hover{transform:translateX(8px);background:#35271c}
.ticket time{display:grid;justify-items:center;line-height:1.1;text-transform:uppercase;font-size:.75rem;letter-spacing:.14em;color:var(--muted)}
.ticket time b{font:400 2.7rem/1 var(--display);color:var(--akz);letter-spacing:0}
.ticket h3{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:.3rem}
.ticket p{margin:0;color:var(--muted);font-size:.95rem}
.stamp{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:.4rem .7rem;border:1.5px solid currentColor;border-radius:6px;color:var(--muted);transform:rotate(-4deg)}
.stamp.live{color:var(--akz)}
.ticket.next{grid-template-columns:auto 1fr;border-left-color:var(--brass);background:linear-gradient(90deg,#3a2614,var(--ink3))}
.ticket.next .mini-gear{width:3rem;height:3rem;color:var(--brass)}
@media (max-width:560px){.ticket{grid-template-columns:auto 1fr}.stamp{display:none}}

.tour{display:grid;gap:.7rem}
.tour-day{display:grid;grid-template-columns:5.5rem 1fr;gap:clamp(1rem,3vw,2.2rem);padding:1.1rem clamp(1rem,2.4vw,1.7rem);background:var(--ink3);border-left:6px solid var(--brass);border-radius:10px}
.tour-day.mine{border-left-color:#e8742a;background:linear-gradient(90deg,#4a2714,var(--ink3))}
.tour-day>time{display:grid;justify-items:center;align-content:center;line-height:1.15;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tour-day>time b{font:400 2.5rem/1 var(--display);color:var(--brass);letter-spacing:0}
.tour-day.mine>time b{color:#e8742a}
.tour-day ul{display:grid;align-content:center}
.tour-day li{display:grid;grid-template-columns:1fr 11.5rem;gap:.2rem 1rem;align-items:baseline;padding:.4rem 0}
.tour-day li+li{border-top:1px solid rgba(255,255,255,.08)}
.tour-day li b{font:400 clamp(1.15rem,2.1vw,1.45rem)/1.2 var(--display)}
.tour-day li>time{color:var(--brass);font-weight:600;font-size:.92rem;font-variant-numeric:tabular-nums}
.pill{justify-self:start;font-size:.72rem;padding:.16rem .55rem;border:1px solid #e8742a;border-radius:999px;color:#ffb07c;white-space:nowrap}
@media (max-width:760px){
  .tour-day{grid-template-columns:4rem 1fr}
  .tour-day li{grid-template-columns:1fr auto}
  .tour-day li b{grid-column:1/-1}
}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:2.2rem}
.tile{overflow:hidden;border-radius:8px;aspect-ratio:4/3}
.tile:nth-child(4n+1){grid-row:span 2;aspect-ratio:auto}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tile:hover img{transform:scale(1.06)}
@media (max-width:640px){.tiles{grid-template-columns:1fr 1fr}.tile:nth-child(4n+1){grid-row:auto;aspect-ratio:4/3}}

.mitmachen{position:relative;text-align:center;padding:clamp(6rem,16vw,11rem) 0;background:linear-gradient(rgba(15,11,8,.72),rgba(15,11,8,.86)),var(--bg) center/cover}
.big{font:400 clamp(1.8rem,4.6vw,3.4rem)/1.1 var(--display);color:var(--brass);margin:.6rem 0 2rem}

/* Unterseiten */
.pagehead,.event-hero{position:relative;overflow:hidden;background:radial-gradient(70vmax 40vmax at 80% 0,#3b2514,var(--ink) 70%);padding:clamp(8rem,20vh,12rem) 0 clamp(3rem,7vw,5rem)}
.corner-gear{position:absolute;right:-8vmin;top:-12vmin;width:min(60vmin,520px);color:var(--brass);opacity:.16}
.notfound{min-height:80vh}
.notfound .cta{margin-top:1.5rem}
.event-hero{background:radial-gradient(70vmax 50vmax at 85% 0,color-mix(in srgb,var(--akz) 42%,transparent),var(--ink) 72%)}
.event-hero .corner-gear{color:var(--akz)}
.event-hero .kicker{color:var(--akz)}
.ev-grid>*{min-width:0}
.event-hero h1{font-size:clamp(2.5rem,5.4vw,4.6rem)}
.ev-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:860px){.ev-grid{grid-template-columns:1fr}}
.facts{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0}
.facts li{padding:.45rem .9rem;border:1px solid color-mix(in srgb,var(--akz) 70%,transparent);border-radius:999px;font-size:.92rem}
.vid{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.vid video{width:100%;aspect-ratio:1;object-fit:cover}
.sound{position:absolute;right:.7rem;bottom:.7rem;background:rgba(0,0,0,.65);color:#fff;border:1px solid rgba(255,255,255,.5);padding:.5rem .9rem;border-radius:999px;font:500 .85rem var(--body);cursor:pointer}
.lineups{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,6vw,5rem)}
@media (max-width:860px){.lineups{grid-template-columns:1fr}}
.lineup li{display:grid;grid-template-columns:4rem 1fr auto;gap:.8rem;align-items:baseline;padding:.8rem 0;border-bottom:1px solid var(--ink3)}
.lineup time{color:var(--brass);font-weight:600;font-variant-numeric:tabular-nums}
.lineup b{font:400 clamp(1.15rem,2.2vw,1.5rem)/1.15 var(--display)}
.lineup span{color:var(--muted);font-size:.85rem}
.flyers{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.flyers.two{grid-template-columns:1fr 1fr}
@media (max-width:760px){.flyers{grid-template-columns:1fr 1fr}}
.flyer{display:block;border-radius:8px;overflow:hidden;transition:transform .25s;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.flyer:hover{transform:translateY(-6px) rotate(-1deg)}
.flyer img{width:100%}

/* Galerie */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.4rem}
.chip{font:500 .92rem var(--body);color:var(--text);background:var(--ink3);border:1px solid transparent;padding:.6rem 1.1rem;border-radius:999px;cursor:pointer}
.chip.on{background:var(--brass);color:#120c07}
.album{margin-bottom:3.5rem}
.album[hidden]{display:none}
.masonry{columns:3 280px;column-gap:.7rem}
.masonry a{display:block;margin-bottom:.7rem;break-inside:avoid;border-radius:8px;overflow:hidden;background:var(--ink3)}
.masonry img{width:100%;transition:transform .5s}
.masonry a:hover img{transform:scale(1.04)}

.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:0;background:rgba(8,6,4,.95);color:var(--text)}
.lb[open]{display:grid;place-items:center}
.lb img{max-width:92vw;max-height:86vh;object-fit:contain}
.lb-cap{position:absolute;left:0;right:0;bottom:.7rem;margin:0;text-align:center;color:var(--muted);font-size:.9rem}
.lb button{position:absolute;background:rgba(0,0,0,.45);border:0;color:#fff;width:52px;height:52px;border-radius:50%;font-size:2rem;line-height:1;cursor:pointer}
.lb-x{top:12px;right:12px}.lb-prev{left:12px;top:50%;margin-top:-26px}.lb-next{right:12px;top:50%;margin-top:-26px}

.legal{max-width:760px;margin-inline:auto}
.legal .h3{margin:2.4rem 0 .6rem;font-size:1.6rem}
.legal .h3:first-child{margin-top:0}
.legal p{color:var(--text)}
.contact{text-align:left}
.mail{display:block;font:400 clamp(1.5rem,6vw,4.4rem)/1.1 var(--display);color:var(--brass);text-decoration:none;margin:.4rem 0 2rem;overflow-wrap:anywhere}
.mail:hover{color:var(--brass-hi)}

.foot{background:#080604;padding:3rem 0 2rem;color:var(--muted);font-size:.9rem}
.foot-in{width:min(1240px,100%);margin-inline:auto;padding-inline:var(--gutter);display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center}
.foot-mark{width:170px;height:auto}
.foot nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:center}
.foot nav a{text-decoration:none}.foot nav a:hover{color:var(--brass)}
.foot p{margin:0;text-align:right}
.foot p a{text-underline-offset:.2em}
@media (max-width:760px){.foot-in{grid-template-columns:1fr;justify-items:center}.foot p{text-align:center}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .strip>div{animation:none}
  *{transition:none!important}
}