@font-face{font-family:"Archivo Black";src:url(/fonts/archivo-black.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--pink:#FF2E93;--gut:clamp(16px,3.4vw,48px);--navh:clamp(56px,7vh,76px)}
*{box-sizing:border-box}
html{background:#f4f4f2;overscroll-behavior:none}
html,body{margin:0;height:100%;color:#000;-webkit-font-smoothing:antialiased}
body{font-family:"Inter Tight",system-ui,sans-serif;overflow:hidden;overscroll-behavior:none;height:100svh}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* Hintergrund: die gestaltete Collage als nahtlose Kachel (3200x4800 für 1100x1650 CSS-px, also scharf), treibt langsam diagonal */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#f4f4f2;--tw:1100px;--th:1650px}
.bg i{position:absolute;left:0;top:0;width:calc(100% + var(--tw));height:calc(100% + var(--th));background:#f4f4f2 0 0/var(--tw) var(--th) repeat;animation:pan 150s linear infinite;will-change:transform}
@keyframes pan{to{transform:translate3d(calc(var(--tw) * -1),calc(var(--th) * -1),0)}}
@media (max-width:820px){.bg{--tw:760px;--th:1140px}}

/* Seitenwechsel ohne Springen: Hintergrund und Navigation bleiben stehen, Inhalt blendet kurz über */
@view-transition{navigation:auto}
.bg{view-transition-name:bg}.nav{view-transition-name:nav}.imp{view-transition-name:imp}
::view-transition-group(bg),::view-transition-group(nav),::view-transition-group(imp){animation:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}

/* Leichtes Ausfransen für Schrift, Buttons und Tags: gleiche Stärke überall */
.fr,.tag,.h{filter:url(#fray)}
.btn{filter:url(#fray)}

/* Buttons: ein Standard. Schwarz mit Weiß, Hover Pink mit Schwarz. */
.btn{display:inline-block;font-family:"Archivo Black";text-transform:uppercase;letter-spacing:.12em;font-size:13px;background:#000;color:#fff;padding:9px 13px 8px;transition:background .12s,color .12s,transform .12s}
.btn:hover,.btn.on{background:var(--pink);color:#000}
.btn.big{font-size:clamp(12px,1.7vh,15px);letter-spacing:.18em;padding:12px 18px 11px;transform:rotate(-1.5deg)}
.btn.big:hover{transform:rotate(0) scale(1.04)}
.btn.hot{background:var(--pink);color:#000}.btn.hot:hover{background:#000;color:var(--pink)}
.btn.off{background:#000;color:#777;cursor:default}.btn.off:hover{background:#000;color:#777;transform:rotate(-1.5deg)}

/* Navigation */
.nav{position:relative;z-index:5;height:var(--navh);display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 var(--gut)}
.nav .wm{margin-right:auto;display:block;width:calc(var(--navh) * 2.1)}
.nav nav{display:flex;gap:8px}
.nav .btn{transform:rotate(-1.5deg)}.nav .btn:nth-child(2n){transform:rotate(1.2deg)}
.nav .btn:hover{transform:rotate(0) scale(1.06)}
.imp{position:fixed;left:var(--gut);bottom:10px;z-index:6;display:flex;gap:6px}
.imp a{font-weight:800;text-transform:uppercase;letter-spacing:.2em;font-size:10px;background:#000;color:#fff;padding:5px 8px}
.imp a:hover{background:var(--pink);color:#000}

/* Logo: jeder Buchstabe einzeln */
.logo{position:relative;display:block;width:100%;max-width:820px}
.copy .logo{width:min(100%,820px,calc(26vh * 3.774))}
.ltr{position:absolute;height:auto}

/* Bühne: genau ein Bildschirm, Text und Foto in getrennten Zonen */
.stage{height:calc(100svh - var(--navh));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(16px,3vw,48px);padding:0 var(--gut)}
.copy{position:relative;z-index:3;min-height:0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,1.8vh,20px);padding-bottom:5vh}
.pic{position:relative;min-height:0;min-width:0;display:flex;align-items:flex-end;justify-content:center}
.photo,.photo img{display:block;width:100%;height:100%}
.photo img{object-fit:contain;object-position:center bottom}
.pic.flush{margin-right:calc(var(--gut) * -1)}
.pic.flush .photo img{object-position:right bottom}
.pic.stand{justify-content:flex-end;padding-right:6vw}.pic.stand .photo img{object-position:center bottom}
.pic.mid{align-items:center}.pic.mid .photo img{object-position:right center}
.flyer{align-items:center;padding:2vh 0 5vh}
.flyer img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 10px 40px rgba(0,0,0,.25)}

/* Typo, Tags, Doodles */
.h{font-family:"Archivo Black";text-transform:uppercase;font-size:clamp(34px,min(6vw,8vh),92px);margin:0;line-height:.95}
.h .d{color:var(--pink)}
.tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tag{font-family:"Archivo Black";text-transform:uppercase;font-size:clamp(12px,1.6vh,15px);letter-spacing:.3em;background:#000;color:#fff;padding:7px 12px 6px}
.tag.pink{background:var(--pink);color:#000}
.kicker{margin:0;font-weight:800;text-transform:uppercase;letter-spacing:.24em;font-size:12px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.back{align-self:flex-start;font-weight:800;text-transform:uppercase;letter-spacing:.2em;font-size:12px;border-bottom:3px solid var(--pink)}
.dd{display:inline-block;width:clamp(26px,3.4vh,42px);height:auto;vertical-align:middle;margin-left:10px;animation:wig 2.4s steps(3) infinite}
.d2{animation-duration:3.1s;animation-delay:-.7s;width:clamp(18px,2.4vh,30px)}
.d3{animation-duration:2.8s;animation-delay:-1.3s}
.h .dd{width:clamp(30px,4.5vh,54px);filter:none}
.dd.big{width:clamp(56px,9.5vh,112px);margin-left:18px}.dd.d2.big{width:clamp(38px,6vh,72px)}
.h .dd.big{width:clamp(56px,9.5vh,112px)}.h .dd.d2.big{width:clamp(38px,6vh,72px)}
@keyframes wig{0%{transform:rotate(-8deg) translateY(0)}33%{transform:rotate(6deg) translateY(-3px)}66%{transform:rotate(-2deg) translateY(1px)}100%{transform:rotate(-8deg) translateY(0)}}

/* Show-Streifen: Hover = pinkes Papier */
.dates{display:flex;flex-direction:column;gap:clamp(8px,1.6vh,16px);max-width:640px}
.strip{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:baseline;max-width:640px;
  padding:clamp(12px,2vh,20px) 24px clamp(11px,1.8vh,18px);color:#fff;isolation:isolate;transition:transform .15s}
.strip::before,.facts::before,.strip .sold::before{content:"";position:absolute;inset:0;z-index:-1;background:#000;filter:url(#tear)}
.dates .strip:nth-child(1){transform:rotate(-1.2deg)}.dates .strip:nth-child(2){transform:rotate(.9deg)}.dates .strip:nth-child(3){transform:rotate(-.7deg)}
.strip.solo{transform:rotate(-1deg)}
.strip:hover,.dates .strip:hover{color:#000;transform:rotate(0) scale(1.03)}
.strip:hover::before{background:var(--pink)}
.strip:hover .d,.strip:hover .l{color:#000}
.strip .d{grid-row:span 2;font-family:"Archivo Black";color:var(--pink);font-size:clamp(28px,min(4.4vw,6vh),54px);line-height:1}
.strip .v{font-family:"Archivo Black";text-transform:uppercase;font-size:clamp(15px,min(2vw,3vh),26px);line-height:1.05}
.strip .c{font-weight:800;text-transform:uppercase;letter-spacing:.22em;font-size:12px}
.strip .l{grid-column:1/-1;margin-top:8px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:#bbb}
.strip .sold{position:absolute;right:-6px;top:50%;transform:rotate(-6deg);isolation:isolate;padding:9px 20px 8px}
.strip .sold::before{background:var(--pink)}
.strip .sold span{font-family:"Archivo Black";text-transform:uppercase;color:#000;font-size:clamp(13px,1.8vw,20px)}
.strip:hover .sold::before{background:#000}.strip:hover .sold span{color:var(--pink)}
.strip.plat{grid-template-columns:auto 1fr auto;align-items:center}
.strip .pi{display:flex;width:clamp(26px,3.6vh,38px);margin-right:4px}.strip .pi svg{width:100%;height:auto;color:#fff}.strip.plat:hover .pi svg{color:#000}
.strip.soon{grid-template-columns:1fr;row-gap:4px;color:#000}.strip.soon::before{background:var(--pink)}.strip.soon .v{font-size:clamp(24px,min(3.4vw,5vh),44px)}.strip.soon:hover{transform:rotate(-1deg)}
.strip.plat .v{font-size:clamp(20px,min(3vw,4vh),36px)}
.strip.plat .c{color:var(--pink)}.strip.plat:hover .c{color:#000}

/* Eventseite + Impressum */
.facts{position:relative;isolation:isolate;list-style:none;margin:0;color:#fff;padding:clamp(14px,2.4vh,22px) 24px;max-width:640px}
.facts li{display:flex;gap:16px;padding:6px 0;border-bottom:1px solid #222}.facts li:last-child{border:0}
.facts b{width:90px;flex:none;font-family:"Archivo Black";text-transform:uppercase;font-size:12px;letter-spacing:.12em;color:var(--pink);font-weight:400}
.facts span{font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:14px}
.legal{grid-template-columns:minmax(0,1fr)}
.legal .copy{justify-content:flex-start;padding-top:clamp(12px,4vh,48px);padding-bottom:56px}
.legaltext p{margin:0;padding:8px 0;border-bottom:1px solid #222;font-weight:700;font-size:14px;line-height:1.5}
.legaltext p:last-child{border:0}
.legaltext b{display:block;width:auto;margin-bottom:2px}
.legaltext a{border-bottom:2px solid var(--pink)}

/* Hochformat */
@media (max-aspect-ratio:1/1){
  .nav{justify-content:space-between}.nav nav{gap:6px}.nav .btn{font-size:11px;padding:8px 8px 7px;letter-spacing:.08em}
  .stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);row-gap:0;padding-bottom:0}
  .copy{justify-content:flex-start;padding:0 0 10px;gap:10px}
  .copy .logo{width:min(100%,calc(16svh * 3.774))}
  .home .pic,.list .pic,.music .pic,.merch .pic{margin:0 calc(var(--gut) * -1) 0 0}
  .pic.stand{padding-right:0;justify-content:center}
  .event{grid-template-rows:minmax(0,1fr) auto}
  .event .copy{order:2;padding-bottom:48px}.event .flyer{order:1;padding:0 0 12px}
  .event .h{font-size:clamp(26px,8vw,44px)}
  .event .facts li{padding:4px 0}
  .strip .l{margin-top:5px}
  .merch .pic{padding-bottom:50px}
  .legal{grid-template-rows:minmax(0,1fr)}.legal .copy{padding-top:8px}
}
@media (max-width:520px){.nav .wm{display:none}.nav{justify-content:flex-end}.tags .dd{display:none}}
@media (max-aspect-ratio:1/1) and (max-height:700px){
  .list .strip .l{display:none}
  .home .kicker{display:none}
}
@media (prefers-reduced-motion:reduce){.bg i,.dd,.ltr,.dagger,.strip:hover .sold{animation:none}}

/* Merch-Formular */
.optin{display:flex;flex-direction:column;gap:10px;max-width:560px}
.optin .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.optin input[type=email]{flex:1 1 220px;min-width:0;font:700 16px "Inter Tight",sans-serif;padding:13px 16px;border:0;background:#fff;color:#000;outline:3px solid #000;outline-offset:0}
.optin input[type=email]:focus{outline-color:var(--pink)}
.optin button{border:0;cursor:pointer}
.optin .ok{display:flex;gap:8px;align-items:flex-start;font-weight:700;font-size:12px;line-height:1.4;background:rgba(255,255,255,.85);padding:8px 10px}
.optin .ok input{accent-color:#FF2E93;margin-top:2px;flex:none}
.optin .ok a{border-bottom:2px solid var(--pink)}
.optin .err{margin:0;background:#000;color:var(--pink);font-weight:800;font-size:13px;padding:8px 10px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.copy.scroll{overflow:auto;justify-content:flex-start;padding-top:2vh;scrollbar-width:none}
.copy.scroll::-webkit-scrollbar{display:none}
.legaltext p{max-width:760px}