/* ========================================================================= CHANGE OF DIRECTION — Relaunch Design: Neon-Glitch auf Near-Black, condensed Display + Inter Body Selbst-gehostete Fonts (DSGVO-konform, kein externes CDN) ========================================================================= */ /* ---------- Fonts ---------- */ /* Alle Schriften stehen unter der SIL Open Font License 1.1 – frei auch fuer kommerzielle Nutzung, selbst gehostet, kein CDN, keine Cookies. Lizenztexte und Urheber: assets/fonts/LIZENZ.txt Frueher lag hier zusaetzlich "Dynamic Trooper" (Iconian Fonts). Die ist nur fuer nicht-kommerzielle Nutzung frei und wurde deshalb entfernt. */ @font-face{font-family:"Bebas Neue";src:url("../fonts/bebas-neue-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Oswald";src:url("../fonts/oswald-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Oswald";src:url("../fonts/oswald-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Inter";src:url("../fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Inter";src:url("../fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Inter";src:url("../fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Inter";src:url("../fonts/inter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Inter";src:url("../fonts/inter-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap} /* ---------- Tokens ---------- */ :root{ --bg:#0a0a0d; --bg-2:#0e0e13; --surface:#15151d; --surface-2:#1b1b25; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16); --text:#f4f4f7; --muted:#9b9bab; --muted-2:#8b8b9c; --pink:#ff2d8e; --magenta:#ff19b0; --orange:#ff7a18; --yellow:#ffd60a; --lime:#b4ff39; --cyan:#19e3ff; --grad:linear-gradient(100deg,var(--pink),var(--orange)); --grad-rev:linear-gradient(280deg,var(--pink),var(--orange)); --grad-cool:linear-gradient(100deg,var(--cyan),var(--lime)); --glow-pink:0 0 24px rgba(255,45,142,.55); --maxw:1240px; --nav-h:74px; /* Hoehe der Banderole ganz oben. 0, solange kein Auftritt ansteht – dann sitzt der Header wieder direkt am Fensterrand. Das JS setzt .has-ticker am , sobald das Laufband eingebaut ist. */ --ticker-h:0px; --ease:cubic-bezier(.22,1,.36,1); --r:16px; --display:"Bebas Neue",Impact,"Arial Narrow",sans-serif; --display-slanted:var(--display); font-synthesis:none; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} section[id],#top,#main{scroll-margin-top:calc(var(--ticker-h) + var(--nav-h) + 1rem)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}} body{ font-family:"Inter",system-ui,sans-serif;background:var(--bg);color:var(--text); line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased; } img,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} ul{list-style:none} ::selection{background:var(--pink);color:#fff} :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px} .skip-link{position:absolute;left:1rem;top:-4rem;z-index:10001;background:var(--pink);color:#0a0a0d;font-weight:700; padding:.7rem 1.2rem;border-radius:0 0 10px 10px;font-family:"Oswald",sans-serif;text-transform:uppercase; letter-spacing:.1em;font-size:.82rem;transition:top .2s var(--ease)} .skip-link:focus{top:0} /* Film-Grain. Früher lag hier zusätzlich mix-blend-mode:overlay. Ein bildschirmfüllender fixierter Blend-Layer zwingt den Browser, bei jedem Scroll-Frame die ganze Seite neu zu mischen – auf schwachen Handys spürbar. Die reine Deckkraft sieht auf dem dunklen Hintergrund praktisch identisch aus und kostet nichts. */ body::after{ content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Typography helpers ---------- */ .display{font-family:var(--display);font-weight:400;line-height:.92;letter-spacing:.01em;text-transform:uppercase} .eyebrow{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.34em;font-size:.78rem;color:var(--pink)} .gradient-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .cool-text{background:var(--grad-cool);-webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- Layout ---------- */ .wrap{width:min(100% - 2.4rem,var(--maxw));margin-inline:auto} section{position:relative;padding:clamp(4.5rem,9vw,8rem) 0} .section-head{max-width:760px;margin-bottom:clamp(2rem,4vw,3.4rem)} .section-head.center{margin-inline:auto;text-align:center} .section-title{font-size:clamp(2.6rem,7vw,5.2rem);margin:.5rem 0 .9rem} .section-head p{color:var(--muted);font-size:clamp(1rem,1.4vw,1.12rem);max-width:60ch} .section-head.center p{margin-inline:auto} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:.55rem;font-family:"Oswald",sans-serif;font-weight:600; text-transform:uppercase;letter-spacing:.08em;font-size:.95rem;padding:.95rem 1.7rem;border-radius:100px; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s;position:relative;will-change:transform} .btn svg{width:18px;height:18px} .btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 30px rgba(255,45,142,.35)} .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(255,122,24,.45)} .btn-ghost{border:1.5px solid var(--line-2);color:var(--text);background:rgba(255,255,255,.02)} .btn-ghost:hover{border-color:var(--pink);color:#fff;transform:translateY(-3px);box-shadow:var(--glow-pink)} .btn-sm{padding:.6rem 1.1rem;font-size:.82rem} /* ---------- Header / Nav ---------- */ .header{position:fixed;inset:var(--ticker-h) 0 auto 0;height:var(--nav-h);z-index:1000;display:flex;align-items:center; transition:background .35s,backdrop-filter .35s,border-color .35s;border-bottom:1px solid transparent} .header.scrolled{background:rgba(10,10,13,.82);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--line)} .header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem} .brand{display:flex;align-items:center;gap:.7rem;z-index:1002} .brand img{height:42px;width:auto;filter:drop-shadow(0 0 10px rgba(255,45,142,.25))} .brand .brand-txt{font-family:var(--display);font-size:1.32rem;line-height:.9;letter-spacing:.02em} .brand .brand-txt small{display:block;font-family:"Oswald",sans-serif;font-weight:600;font-size:.52rem;letter-spacing:.42em;color:var(--pink)} .nav{display:flex;align-items:center;gap:2rem} .nav a{font-family:"Oswald",sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:.92rem;color:var(--muted); position:relative;transition:color .2s;padding:.2rem 0} .nav a::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--grad);transition:width .3s var(--ease)} .nav a:hover,.nav a.active{color:var(--text)} .nav a:hover::after,.nav a.active::after{width:100%} /* Anfragen-Button in den Nav-Links nur im mobilen Overlay zeigen (Desktop: nur der rechts in .nav-actions) */ .nav .btn{color:#fff;display:none} .nav a.btn::after{display:none} .nav-actions{display:flex;align-items:center;gap:1.1rem} .burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:12px;position:relative;z-index:1002} .burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--text);transition:.3s var(--ease)} .burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px} .burger.open span:nth-child(1){top:21px;transform:rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){top:21px;transform:rotate(-45deg)} /* Offenes Mobil-Menue. Das Overlay ist ein Kind des Headers und haengt damit in dessen Stapel-Ebene fest (z-index:1000). Sobald der Header beim Scrollen zusaetzlich einen backdrop-filter bekommt, wird daraus obendrein eine eigene "Backdrop-Root" – Safari auf dem iPhone beschneidet das Overlay dann auf die Header-Hoehe. Beides faellt weg, solange das Menue offen ist: Der Header wird transparent, verliert den Filter und steigt nach oben. */ body.nav-open .header{ z-index:1600;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none; border-bottom-color:transparent} /* ---------- Banderole: naechster Auftritt ---------- */ /* Wird vom JS eingebaut und nur dann, wenn ein Termin ansteht. */ html.has-ticker{--ticker-h:34px} .gig-ticker{ position:fixed;top:0;left:0;right:0;height:var(--ticker-h);z-index:1400; display:flex;align-items:center;overflow:hidden; background:var(--grad);color:#fff; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)} .gig-ticker-track{display:flex;width:max-content;animation:scrollx 38s linear infinite} .gig-ticker:hover .gig-ticker-track,.gig-ticker:focus-visible .gig-ticker-track{animation-play-state:paused} .gt-item{ font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase; letter-spacing:.14em;font-size:.72rem;white-space:nowrap; display:inline-flex;align-items:center;padding-inline:1.4rem} .gt-item::after{content:"●";font-size:.5rem;opacity:.7;margin-left:1.4rem} /* Der Halt-Schalter der Laufbaender gilt auch hier. */ html.motion-paused .gig-ticker-track{animation-play-state:paused!important} @media (prefers-reduced-motion:reduce){ /* Ohne Bewegung wuerde nur der Anfang der Kette stehenbleiben – deshalb bleibt genau ein Durchlauf uebrig, mittig gesetzt. */ .gig-ticker-track{animation:none;width:100%;justify-content:center} .gt-item:not(:first-child){display:none} .gt-item::after{content:none} } @media (max-width:560px){ html.has-ticker{--ticker-h:30px} .gt-item{font-size:.66rem;letter-spacing:.1em;padding-inline:1rem} .gt-item::after{margin-left:1rem} } /* ---------- Hero ---------- */ .hero{position:relative;min-height:calc(100svh - var(--ticker-h));display:flex;align-items:center;overflow:hidden} .hero-media{position:absolute;inset:0;z-index:-2} .hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(1.15) contrast(1.05)} /* Zwei Verläufe: der senkrechte blendet zum Seitenhintergrund über, der waagrechte hält die Textspalte links dunkel genug für die Headline. */ .hero-media::after{content:"";position:absolute;inset:0; background: linear-gradient(90deg,rgba(10,10,13,.78) 0%,rgba(10,10,13,.55) 38%,rgba(10,10,13,.1) 70%,transparent 100%), linear-gradient(180deg,rgba(10,10,13,.6) 0%,rgba(10,10,13,.32) 35%,rgba(10,10,13,.78) 78%,var(--bg) 100%)} @media (max-width:860px){ .hero-media::after{background: linear-gradient(180deg,rgba(10,10,13,.68) 0%,rgba(10,10,13,.5) 35%,rgba(10,10,13,.82) 78%,var(--bg) 100%)} } .hero-media::before{content:"";position:absolute;inset:0;z-index:1; background:radial-gradient(120% 80% at 80% 10%,rgba(255,45,142,.18),transparent 55%),radial-gradient(120% 80% at 0% 90%,rgba(25,227,255,.14),transparent 55%);mix-blend-mode:screen} .hero .wrap{position:relative;z-index:2;padding-top:var(--nav-h)} .hero-eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.3rem} .hero-eyebrow .dot{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime);animation:pulse 2s infinite} @keyframes pulse{50%{opacity:.35;transform:scale(.7)}} .hero h1{font-size:clamp(3.2rem,12.5vw,10.5rem);margin:0 0 1.2rem;letter-spacing:.005em} .hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em} .hero h1 .line-in{display:block} /* Bebas Neue hat keinen kursiven Schnitt – die leichte Schraeglage ahmt die frueher genutzte "Slanted"-Variante nach. */ .hero h1 .accent{font-family:var(--display-slanted);transform:skewX(-7deg);display:inline-block; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .hero-sub{font-size:clamp(1.05rem,2vw,1.4rem);color:#d7d7e0;max-width:46ch;margin-bottom:2.2rem;font-weight:400} .hero-sub b{color:#fff;font-weight:700} .hero-cta{display:flex;flex-wrap:wrap;gap:1rem} .scroll-cue{position:absolute;left:50%;bottom:1.7rem;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.5rem; font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.3em;font-size:.62rem;color:var(--muted)} .scroll-cue .mouse{width:24px;height:38px;border:2px solid var(--line-2);border-radius:14px;position:relative} .scroll-cue .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:3px;background:var(--pink);transform:translateX(-50%);animation:scrolldot 1.8s infinite} @keyframes scrolldot{0%{opacity:0;top:6px}40%{opacity:1}80%{opacity:0;top:18px}} /* glitch title */ .glitch{position:relative} .glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;background:var(--bg);clip-path:inset(0);opacity:.85} .glitch::before{left:2px;text-shadow:-2px 0 var(--cyan);animation:glitch1 4.5s infinite linear alternate-reverse} .glitch::after{left:-2px;text-shadow:-2px 0 var(--pink);animation:glitch2 3.5s infinite linear alternate-reverse} @keyframes glitch1{0%,92%,100%{clip-path:inset(100% 0 0 0)}93%{clip-path:inset(20% 0 60% 0)}96%{clip-path:inset(70% 0 10% 0)}} @keyframes glitch2{0%,90%,100%{clip-path:inset(0 0 100% 0)}94%{clip-path:inset(55% 0 30% 0)}98%{clip-path:inset(15% 0 65% 0)}} /* genre marquee */ .marquee{position:relative;overflow:hidden;border-block:1px solid var(--line);background:var(--bg-2);padding:.9rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee-track{display:flex;gap:3rem;width:max-content;animation:scrollx 34s linear infinite} .marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused} /* --- Halt-Schalter fuer Bewegung (WCAG 2.2.2) ----------------------------- Bewusst zurueckhaltend: kleiner runder Knopf am rechten Rand der Laufbaender, gedaempft und ohne Flaeche, bis er angesteuert wird. Kein Speichern des Zustands - die Seite legt nichts auf dem Endgeraet ab. */ .marquee-zone{position:relative} .motion-toggle{ position:absolute;right:.7rem;top:50%;transform:translateY(-50%);z-index:3; width:28px;height:28px;display:grid;place-items:center;cursor:pointer; background:transparent;border:1px solid transparent;border-radius:50%; color:var(--muted-2);opacity:.5; transition:opacity .2s,color .2s,background .2s,border-color .2s; } .motion-toggle:hover,.motion-toggle:focus-visible{ opacity:1;color:var(--text);background:var(--surface);border-color:var(--line); } .mt-icon{position:relative;display:block;width:10px;height:10px} .mt-icon::before,.mt-icon::after{content:"";position:absolute;top:0;width:3px;height:10px;background:currentColor} .mt-icon::before{left:0} .mt-icon::after{right:0} /* Angehalten: aus den zwei Balken wird ein Abspiel-Dreieck */ .motion-toggle[aria-pressed="true"] .mt-icon::before{ left:1px;width:0;height:0;background:none; border-left:9px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent; } .motion-toggle[aria-pressed="true"] .mt-icon::after{display:none} html.motion-paused .marquee-track{animation-play-state:paused !important} /* Wer Bewegung ohnehin reduziert, sieht nichts, was anzuhalten waere. */ @media (prefers-reduced-motion:reduce){.motion-toggle{display:none}} .marquee-track span{font-family:var(--display);font-size:1.5rem;letter-spacing:.06em;color:var(--muted);display:inline-flex;align-items:center;gap:3rem;white-space:nowrap} .marquee-track span::after{content:"●";color:var(--pink);font-size:.6rem} @keyframes scrollx{to{transform:translateX(-50%)}} /* ---------- Stats ---------- */ .stats{background:var(--bg-2);border-block:1px solid var(--line)} .stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding-block:clamp(2.4rem,5vw,3.6rem)} .stat{text-align:center;position:relative} .stat:not(:last-child)::after{content:"";position:absolute;right:0;top:15%;height:70%;width:1px;background:var(--line)} .stat .num{font-family:var(--display);font-size:clamp(2.8rem,6vw,4.6rem);line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .stat .lbl{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;color:var(--muted);margin-top:.4rem} /* ---------- About ---------- */ .about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .about-copy p{color:var(--muted);margin-bottom:1.1rem;font-size:1.05rem} .about-copy p b{color:var(--text)} .about-photo{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/4.6;box-shadow:0 30px 70px rgba(0,0,0,.55)} .about-photo img{width:100%;height:100%;object-fit:cover} .about-photo::after{content:"";position:absolute;inset:0;border:1px solid var(--line-2);border-radius:var(--r); background:linear-gradient(180deg,transparent 55%,rgba(10,10,13,.5))} .about-photo .tag{position:absolute;left:1rem;bottom:1rem;z-index:2;display:flex;align-items:center;gap:.5rem; background:rgba(10,10,13,.7);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:100px;padding:.5rem .9rem; font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem} .about-photo .tag .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)} .features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.4rem} .feature{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.2rem;transition:transform .3s var(--ease),border-color .3s} .feature:hover{transform:translateY(-5px);border-color:var(--line-2)} .feature .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(255,45,142,.12);margin-bottom:.9rem} .feature .ic svg{width:24px;height:24px;stroke:var(--pink)} .feature h3{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:1.02rem;margin-bottom:.35rem} .feature p{color:var(--muted);font-size:.92rem} /* ---------- Members ---------- */ .members{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem} .members-crew{grid-template-columns:repeat(3,1fr);max-width:76%;margin:1rem auto 0} .member{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden; transition:transform .3s var(--ease),border-color .3s} .member::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent,var(--grad));z-index:2} .member:hover{transform:translateY(-6px);border-color:var(--line-2)} /* Foto fuellt den oberen Teil der Karte */ .member .photo{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--surface-2)} .member .photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);filter:saturate(1.05)} .member:hover .photo img{transform:scale(1.06)} /* sanfter Verlauf, damit das Foto in die Textflaeche uebergeht */ .member .photo::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 55%,rgba(21,21,29,.85))} /* Fallback ohne Foto: Buchstabe im Akzentverlauf */ .member .photo.letter{display:grid;place-items:center;font-family:var(--display);font-size:3.4rem; color:#0a0a0d;background:var(--accent,var(--grad))} .member .photo.letter::after{display:none} .member .txt{padding:.9rem 1.1rem 1.2rem;text-align:center} .member .name{font-family:"Oswald",sans-serif;font-weight:600;font-size:1.18rem} .member .role{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--muted);margin-top:.2rem} .member-link{display:inline-block;font-size:.72rem;color:var(--cyan);margin-top:.5rem;min-height:28px;opacity:.85} .member-link:hover{opacity:1;text-decoration:underline} .members-note{margin-top:1.5rem;color:var(--muted-2);font-size:.86rem;text-align:center} /* Gruppenbild ueber dem Line-up */ .lineup-photo{position:relative;margin:0 0 clamp(1.6rem,3vw,2.4rem);border-radius:var(--r);overflow:hidden; border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.45)} .lineup-photo img{width:100%;height:auto;display:block} .lineup-photo::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 70%,rgba(10,10,13,.55))} /* ---------- Events ---------- */ .events-wrap{position:relative} .events-filter{display:flex;gap:.5rem;margin-bottom:1.8rem;flex-wrap:wrap} .chip{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;padding:.5rem 1rem;border-radius:100px; border:1px solid var(--line-2);color:var(--muted);transition:.25s} .chip.active,.chip:hover{background:var(--text);color:var(--bg);border-color:var(--text)} .event{display:grid;grid-template-columns:auto 1fr auto;gap:1.6rem;align-items:center; background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.6rem;margin-bottom:1rem; transition:transform .3s var(--ease),border-color .3s,background .3s} .event:hover{transform:translateX(6px);border-color:var(--line-2);background:var(--surface-2)} .event .date{text-align:center;min-width:84px;border-right:1px solid var(--line);padding-right:1.4rem} .event .date .d{font-family:var(--display);font-size:2.9rem;line-height:.85} .event .date .m{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;color:var(--pink)} .event .date .y{font-size:.7rem;color:var(--muted-2);font-family:"Oswald",sans-serif;letter-spacing:.1em} .event .info h3{font-family:"Oswald",sans-serif;font-weight:600;font-size:1.3rem;margin-bottom:.3rem} .event .meta{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;color:var(--muted);font-size:.9rem} .event .meta span{display:inline-flex;align-items:center;gap:.4rem} .event .meta svg{width:15px;height:15px;stroke:var(--muted-2);flex:none} .event .act{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem} .badge{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;padding:.32rem .7rem;border-radius:100px;white-space:nowrap} .badge.free{background:rgba(180,255,57,.14);color:var(--lime);border:1px solid rgba(180,255,57,.3)} .badge.tickets{background:rgba(255,45,142,.14);color:var(--pink);border:1px solid rgba(255,45,142,.3)} .badge.sold{background:rgba(255,255,255,.06);color:var(--muted);border:1px solid var(--line-2)} .badge.private{background:rgba(25,227,255,.12);color:var(--cyan);border:1px solid rgba(25,227,255,.3)} .badge.live{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--line-2)} .ics{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:.74rem;color:var(--muted); display:inline-flex;align-items:center;gap:.35rem;transition:color .2s;min-height:32px;padding:.35rem .2rem} .ics:hover{color:var(--text)} .ics svg{width:14px;height:14px} .chip{display:inline-flex;align-items:center;gap:.5rem} .chip-count{display:inline-grid;place-items:center;min-width:1.35em;height:1.35em;padding:0 .35em; border-radius:100px;background:rgba(255,255,255,.1);font-size:.72rem;line-height:1} .chip.active .chip-count{background:rgba(10,10,13,.18)} /* Gespielte Auftritte: sichtbar, aber deutlich zurückgenommen – sie sollen nicht mit einem kommenden Termin verwechselt werden. */ .event.past{background:transparent;border-style:dashed} .event.past .date .d,.event.past .info h3{color:var(--muted)} .event.past .date .m{color:var(--muted-2)} .event.past:hover{transform:none;background:var(--surface)} .badge.done{background:rgba(255,255,255,.05);color:var(--muted-2);border:1px solid var(--line)} .events-note{color:var(--muted);font-size:.95rem;margin:-.6rem 0 1.6rem} .events-note b{color:var(--text)} .events-empty{color:var(--muted-2);text-align:center;padding:2rem;display:none;max-width:52ch;margin-inline:auto} .events-cta{margin-top:2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap; background:linear-gradient(100deg,rgba(255,45,142,.1),rgba(255,122,24,.06));border:1px solid var(--line);border-radius:16px;padding:1.4rem 1.8rem} .events-cta p{font-family:"Oswald",sans-serif;font-size:1.1rem} /* ---------- Repertoire ---------- */ .rep{background:var(--bg-2);border-block:1px solid var(--line)} .rep-genres{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2.5rem} .rep-genres .g{font-family:var(--display);font-size:1.5rem;letter-spacing:.04em;padding:.4rem 1.1rem;border-radius:10px; border:1px solid var(--line-2);transition:.3s} .rep-genres .g:hover{border-color:transparent;background:var(--grad);color:#0a0a0d} .rep-songs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.4rem 2rem} .rep-song{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;border-bottom:1px solid var(--line);color:var(--muted)} .rep-song .n{font-family:var(--display);color:var(--muted-2);font-size:1.1rem;min-width:28px} .rep-song b{color:var(--text);font-weight:600} .rep-note{margin-top:2rem;color:var(--muted-2);font-size:.9rem} /* ---------- Gallery ---------- */ .gallery{columns:4;column-gap:12px} .gallery .gi{break-inside:avoid;margin-bottom:12px;position:relative;border-radius:12px;overflow:hidden;cursor:pointer;display:block;background:var(--surface)} .gallery .gi img{width:100%;height:auto;display:block;transition:transform .6s var(--ease),filter .4s;filter:saturate(1.05)} .gallery .gi::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(255,45,142,.25));opacity:0;transition:opacity .35s} .gallery .gi:hover img{transform:scale(1.06)} .gallery .gi:hover::after{opacity:1} .gallery .gi .zoom{position:absolute;right:.7rem;bottom:.7rem;width:38px;height:38px;border-radius:50%;display:grid;place-items:center; background:rgba(10,10,13,.6);backdrop-filter:blur(6px);opacity:0;transform:scale(.7);transition:.35s var(--ease)} .gallery .gi:hover .zoom{opacity:1;transform:scale(1)} .gallery .gi .zoom svg{width:18px;height:18px;stroke:#fff} /* ---------- Booking ---------- */ .booking{position:relative;overflow:hidden} .booking-bg{position:absolute;inset:0;z-index:-1} .booking-bg img{width:100%;height:100%;object-fit:cover;opacity:.18} .booking-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),rgba(10,10,13,.6) 50%,var(--bg))} .booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start} .contact-cards{display:flex;flex-direction:column;gap:1rem;margin:2rem 0} .contact-card{display:flex;align-items:center;gap:1rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.3rem;transition:.3s var(--ease)} .contact-card:hover{transform:translateX(5px);border-color:var(--line-2)} .contact-card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(255,45,142,.12);flex:none} .contact-card .ic svg{width:22px;height:22px;stroke:var(--pink)} .contact-card .txt{display:flex;flex-direction:column;gap:.15rem;min-width:0} .contact-card .t{display:block;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--muted);white-space:nowrap} .contact-card .v{display:block;font-weight:600;font-size:1.05rem;overflow-wrap:anywhere} .socials{display:flex;gap:.8rem;margin-top:.4rem} .socials a{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);transition:.3s var(--ease)} .socials a:hover{transform:translateY(-4px);border-color:transparent;background:var(--grad)} .socials a svg{width:22px;height:22px;fill:var(--text)} .socials a:hover svg{fill:#fff} .form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.4rem,3vw,2.2rem)} .form h3{font-family:"Oswald",sans-serif;font-weight:600;font-size:1.4rem;margin-bottom:.4rem} .form>p{color:var(--muted);font-size:.92rem;margin-bottom:1.4rem} .field{margin-bottom:1.1rem} .field label{display:block;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--muted);margin-bottom:.45rem} .field input,.field select,.field textarea{width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:11px; padding:.85rem 1rem;color:var(--text);font:inherit;font-size:.96rem;transition:border-color .25s,box-shadow .25s} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,45,142,.15)} /* Bei Tastaturbedienung bleibt der deutliche Ring erhalten – WCAG 2.4.7 */ .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:2px} .field textarea{resize:vertical;min-height:120px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .form .btn{width:100%;justify-content:center;margin-top:.4rem} /* Honeypot: für Menschen unsichtbar, für Bots ein ausfüllbares Feld. Bewusst kein display:none – manche Bots überspringen versteckte Felder. */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-hint{font-size:.78rem;color:var(--muted-2);margin-top:.9rem;text-align:center;min-height:1.6em} .form-hint.error{color:#ff8fb4} .form-hint.ok{color:var(--lime);font-size:.92rem;font-weight:600} .form-legal{font-size:.72rem;line-height:1.5;color:var(--muted-2);margin:.55rem 0 0;text-align:center} .form-legal a{color:inherit;text-decoration:underline;text-underline-offset:.15em} .form-legal a:hover,.form-legal a:focus-visible{color:var(--pink)} .form .btn[disabled]{opacity:.65;cursor:progress;transform:none} .field input.invalid,.field textarea.invalid,.field select.invalid{border-color:#ff5f8f; box-shadow:0 0 0 3px rgba(255,95,143,.16)} /* ---------- Footer ---------- */ .footer{background:var(--bg-2);border-top:1px solid var(--line);padding:clamp(3rem,6vw,4.5rem) 0 2rem} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem} .footer .brand img{height:54px;margin-bottom:1rem} .footer p{color:var(--muted);font-size:.92rem;max-width:34ch} .footer h5,.footer .footer-h{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--muted);margin-bottom:1rem} .footer-links a{display:block;color:var(--muted);padding:.3rem 0;transition:color .2s,padding-left .2s} .footer-links a:hover{color:var(--text);padding-left:.4rem} .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap; border-top:1px solid var(--line);padding-top:1.6rem;color:var(--muted-2);font-size:.84rem} .footer-bottom a{color:var(--muted)} .footer-bottom a:hover{color:var(--text)} /* ---------- Floating CTA (mobile) ---------- */ .fab{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:900;display:none; box-shadow:0 10px 30px rgba(255,45,142,.5);transition:opacity .3s var(--ease),transform .3s var(--ease)} .fab.fab-hide{opacity:0;transform:translateY(1rem) scale(.92);pointer-events:none} /* ---------- Lightbox ---------- */ .lb{position:fixed;inset:0;z-index:2000;background:rgba(6,6,8,.94);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:3vw} .lb.open{display:flex;animation:fade .3s} @keyframes fade{from{opacity:0}} .lb img{max-width:100%;max-height:90vh;border-radius:8px;box-shadow:0 30px 90px rgba(0,0,0,.7)} .lb .x,.lb .nav-btn{position:absolute;background:rgba(255,255,255,.08);border:1px solid var(--line-2);border-radius:50%;width:50px;height:50px; display:grid;place-items:center;transition:.25s;color:#fff} .lb .x:hover,.lb .nav-btn:hover{background:var(--grad);border-color:transparent} .lb .x{top:1.2rem;right:1.2rem}.lb .x svg{width:22px;height:22px} .lb .nav-btn{top:50%;transform:translateY(-50%)}.lb .nav-btn svg{width:24px;height:24px} .lb .prev{left:1.2rem}.lb .next{right:1.2rem} .lb .count{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);font-family:"Oswald",sans-serif;letter-spacing:.2em;color:var(--muted);font-size:.8rem} /* ---------- Popup fuer den naechsten Auftritt ---------- Zeigt den naechsten Termin aus EVENTS (siehe initGigPopup in main.js). Steht nichts an, wird gar nichts erzeugt. Grundsatz: Der Kasten muss IMMER komplett sichtbar sein, ohne zu scrollen – auch auf niedrigen Fenstern und im Querformat. Dafuer ist er ein Flex-Column: der Textteil behaelt seine Hoehe, das Bild darueber gibt Platz ab und wird auf sehr flachen Fenstern ganz ausgeblendet. `dvh` statt `vh`, damit die ein- und ausfahrende Browserleiste auf dem Handy nichts abschneidet. z-index ueber dem Intro-Loader (10000): Greift die Notbremse in der Wartelogik, weil der Loader haengt, darf das Popup nicht darunter liegen. Der Custom-Cursor liegt mit 10200 bewusst noch darueber. */ .gig-pop{position:fixed;inset:0;z-index:10050;display:grid;place-items:center; padding:clamp(.5rem,2.5vmin,1.2rem); background:rgba(6,6,8,.82);backdrop-filter:blur(8px); opacity:0;transition:opacity .3s var(--ease)} .gig-pop.open{opacity:1} .gig-box{position:relative;width:min(100%,620px); max-height:100%;display:flex;flex-direction:column; /* Sicherheitsnetz: Sollte der Inhalt trotz aller Regeln nicht passen, lieber scrollbar als abgeschnitten – ein halber Button waere unbedienbar. */ overflow:auto;overscroll-behavior:contain; background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r); box-shadow:0 40px 100px rgba(0,0,0,.7); transform:translateY(24px) scale(.97);transition:transform .45s var(--ease)} .gig-pop.open .gig-box{transform:none} /* Der Kasten wird beim Oeffnen fokussiert, damit Screenreader den Dialog ansagen – ein sichtbarer Ring waere hier aber irritierend. Die Schaltflaechen darin zeigen ihren Fokus ganz normal. */ .gig-box:focus,.gig-box:focus-visible{outline:none} .gig-box .x{position:absolute;top:.75rem;right:.75rem;z-index:3;width:44px;height:44px;border-radius:50%; display:grid;place-items:center;color:#fff;background:rgba(10,10,13,.6);backdrop-filter:blur(6px); border:1px solid var(--line-2);transition:.25s} .gig-box .x:hover{background:var(--grad);border-color:transparent} .gig-box .x svg{width:20px;height:20px} /* Das Bild ist der flexible Teil: es darf schrumpfen, der Text nicht. */ .gig-img{position:relative;flex:0 1 auto;min-height:0;aspect-ratio:16/9; overflow:hidden;border-radius:var(--r) var(--r) 0 0} .gig-img img{width:100%;height:100%;object-fit:cover} .gig-img::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,10,13,.25),rgba(21,21,29,.95))} .gig-flag{position:absolute;left:1.2rem;bottom:.9rem;z-index:2;display:inline-flex;align-items:center;gap:.5rem; background:var(--grad);color:#fff;border-radius:100px;padding:.4rem .95rem; font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem; box-shadow:0 8px 26px rgba(255,45,142,.45)} .gig-flag .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite} .gig-body{flex:0 0 auto;padding:1.2rem clamp(1.1rem,4vw,2rem) clamp(1.2rem,3.5vw,1.8rem)} .gig-body .eyebrow{display:block;margin-bottom:.35rem;font-size:.72rem;letter-spacing:.22em} /* Ersatz-Fahne fuer flache Fenster – normalerweise steckt sie im Bild. */ .gig-flag-alt{display:none;margin-bottom:.5rem;padding-right:3rem; font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase; letter-spacing:.16em;font-size:.72rem; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* WANN – die groesste Zeile im Kasten. */ .gig-when{font-size:clamp(2rem,6.4vw,3.2rem);line-height:.95;margin-bottom:.55rem} /* WO – gleich darunter, deutlich groesser als frueher der Fliesstext. */ .gig-where{display:flex;flex-direction:column;gap:.1rem;margin-bottom:.85rem} .gig-where b{font-family:var(--display);font-weight:400; font-size:clamp(1.5rem,4.6vw,2.1rem);line-height:1.05;letter-spacing:.02em; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .gig-where span{font-size:clamp(1rem,2.6vw,1.15rem);color:var(--text)} .gig-meta{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;color:var(--muted);font-size:.9rem;margin-bottom:1.1rem} .gig-meta span{display:inline-flex;align-items:center;gap:.45rem} .gig-meta svg{width:16px;height:16px;stroke:var(--muted-2);flex:none} .gig-cta{display:flex;flex-wrap:wrap;gap:.7rem} .gig-cta .btn{flex:1 1 auto;justify-content:center} .gig-cta .btn svg{stroke:currentColor} /* Schmale Fenster: Schaltflaechen untereinander, Bild etwas hoeher */ @media (max-width:560px){ .gig-img{aspect-ratio:4/3} .gig-cta .btn{flex:1 1 100%} } /* --- Ab hier geht es um die HOEHE, nicht die Breite --- */ /* Flache Fenster: Bild flacher, Typo kleiner */ @media (max-height:760px){ .gig-img{aspect-ratio:2/1} .gig-when{font-size:clamp(1.8rem,5vw,2.5rem);margin-bottom:.4rem} .gig-where b{font-size:clamp(1.35rem,4vw,1.8rem)} .gig-body{padding-top:1rem} .gig-meta{margin-bottom:.9rem} } /* Sehr flach (Querformat-Handy, kleine Laptops): Bild raus. Der Textblock bekommt oben Platz, damit die Schliessen-Schaltflaeche nicht auf der Ueberschrift sitzt. */ @media (max-height:620px){ .gig-img{display:none} .gig-body{padding-top:1.1rem} /* Ohne Bild faellt die Fahne aus dem Bild weg – hier kommt sie als Text zurueck. Sie und die Datumszeile weichen der Schliessen-Schaltflaeche aus. */ .gig-flag-alt{display:block} .gig-body .eyebrow{padding-right:3rem} .gig-when{font-size:clamp(1.6rem,4.4vw,2.1rem);margin-bottom:.35rem} .gig-where b{font-size:clamp(1.2rem,3.4vw,1.5rem)} .gig-where span{font-size:1rem} .gig-where{margin-bottom:.7rem} .gig-meta{margin-bottom:.85rem} .gig-cta .btn{padding:.8rem 1.4rem} } /* Extrem flach: noch kompakter, Schaltflaechen bleiben nebeneinander */ @media (max-height:440px){ .gig-body{padding-top:1rem;padding-bottom:1rem} .gig-flag-alt{margin-bottom:.3rem} .gig-when{font-size:1.5rem;margin-bottom:.25rem} .gig-where b{font-size:1.15rem} .gig-where span{font-size:.95rem} .gig-where{margin-bottom:.55rem} .gig-meta{font-size:.85rem;margin-bottom:.7rem} .gig-cta .btn{flex:1 1 auto;padding:.7rem 1.1rem;font-size:.85rem} } @media (prefers-reduced-motion:reduce){ .gig-pop,.gig-box{transition:none} .gig-flag .dot{animation:none} } /* ---------- Reveal ---------- */ .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s} /* ---------- Legal pages ---------- */ .legal{padding-top:calc(var(--nav-h) + 4rem);max-width:820px} .legal h1{font-family:var(--display);font-size:clamp(2.6rem,6vw,4rem);margin-bottom:1.6rem} .legal h2{font-family:"Oswald",sans-serif;font-weight:600;font-size:1.4rem;margin:2.2rem 0 .8rem} .legal h3{font-family:"Oswald",sans-serif;font-weight:600;font-size:1.1rem;margin:1.4rem 0 .5rem} .legal p,.legal li{color:var(--muted);margin-bottom:.7rem} .legal a{color:var(--pink)}.legal a:hover{text-decoration:underline} .legal ul{padding-left:1.2rem;list-style:disc} .legal .back{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:2rem;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;color:var(--muted)} .legal .back:hover{color:var(--text)} .hinweis-widerspruch{border:1px solid var(--line);border-left:3px solid var(--pink);background:var(--surface);padding:1.1rem 1.3rem;margin:1.6rem 0 1.4rem;border-radius:8px} .hinweis-widerspruch h3{margin-top:0} .legal strong{color:var(--text)} /* ---------- 404 ---------- */ /* Bewusst NICHT .legal: dort färbt `.legal a` alle Links pink und würde die weiße Beschriftung der Buttons überschreiben. */ .notfound{padding-top:calc(var(--nav-h) + 5rem);padding-bottom:6rem;max-width:640px;text-align:center} .notfound .eyebrow{display:block;margin-bottom:.6rem} .notfound h1{font-size:clamp(4rem,18vw,9rem);line-height:.9;margin-bottom:1rem} .notfound h2{font-family:"Oswald",sans-serif;font-weight:600;font-size:1.5rem;margin-bottom:1rem} .notfound p{color:var(--muted);margin-bottom:2.2rem} .notfound .actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap} /* ---------- Responsive ---------- */ @media (max-width:1024px){ .members{grid-template-columns:repeat(3,1fr)} .members-crew{max-width:100%} .gallery{columns:3} } @media (max-width:860px){ /* Deckender Hintergrund ohne backdrop-filter: Ein Filter im Overlay UND im Header darueber ist genau die Kombination, bei der Safari das Menue nach hinten schiebt bzw. beschneidet. Ein voll deckender Verlauf sieht gleich aus und ist auf jedem Geraet stabil. */ .nav{position:fixed;inset:0;flex-direction:column;justify-content:flex-start;gap:1.8rem; padding:calc(var(--ticker-h) + var(--nav-h) + 1.2rem) 1.25rem calc(1.5rem + env(safe-area-inset-bottom,0px)); overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; background:linear-gradient(180deg,#101017,#0a0a0d); transform:translateX(100%);transition:transform .4s var(--ease);z-index:1001} /* Auto-Margins zentrieren die Links, solange Platz da ist – bei zu wenig Hoehe (Landscape) faellt das Menue auf scrollbar zurueck statt abzuschneiden. */ .nav>:first-child{margin-top:auto} .nav>:last-child{margin-bottom:auto} .nav.open{transform:none} .nav a{font-size:1.6rem;color:var(--text)} /* Der Anfragen-Knopf erbt .btn-sm (fuer den kleinen Knopf im Desktop-Header), traegt im Menue aber die grosse Schrift – ohne eigenes Innenabstandsmass klebt der Text an der Pille. Deshalb hier die volle Polsterung. */ .nav a.btn{display:inline-flex;font-size:.95rem;margin-top:.6rem; padding:.9rem 2.2rem;letter-spacing:.12em} .burger{display:block} .nav-actions .btn:not(.burger){display:none} .about-grid,.booking-grid{grid-template-columns:1fr} .about-photo{aspect-ratio:16/12;max-height:420px} .stats .wrap{grid-template-columns:1fr 1fr;gap:2rem 1rem} .stat:nth-child(2)::after{display:none} .features{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr} .fab{display:inline-flex} } @media (max-width:860px) and (max-height:560px){ .nav{gap:.9rem} .nav a{font-size:1.2rem} .nav a.btn{margin-top:.2rem;padding:.7rem 1.8rem} } @media (max-width:560px){ .members{grid-template-columns:repeat(2,1fr)} .members-crew{grid-template-columns:repeat(2,1fr);max-width:100%} .member .txt{padding:.75rem .6rem 1rem} .member .name{font-size:1.05rem} .gallery{columns:2;column-gap:8px}.gallery .gi{margin-bottom:8px} .event{grid-template-columns:auto 1fr;gap:1rem;padding:1.1rem} .event .act{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center; border-top:1px solid var(--line);padding-top:.9rem;margin-top:.3rem} .field-row{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .lb .nav-btn{width:42px;height:42px} .lb .prev{left:.4rem}.lb .next{right:.4rem} } /* ========================================================================= AWWWARDS-LAYER · GSAP + Lenis (progressive enhancement) Alles Anim-abhängige Verstecken ist hinter html.anim gegated, damit die Seite ohne JS / bei reduced-motion voll sichtbar bleibt. ========================================================================= */ /* Lenis Smooth-Scroll */ html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:hidden} html.anim{scroll-behavior:auto} /* Reveal: nur im Anim-Modus verstecken; sonst & per Failsafe immer sichtbar */ html:not(.anim) .reveal{opacity:1;transform:none} html.anim-failsafe:not(.anim-ok) .reveal{opacity:1!important;transform:none!important} html:not(.anim) .hero h1 .line-in{transform:none} /* Intro-Loader */ #intro{display:none} html.anim #intro{display:flex;position:fixed;inset:0;z-index:10000;flex-direction:column; align-items:center;justify-content:center;gap:1.6rem;background:var(--bg)} html.anim-failsafe:not(.anim-ok) #intro{display:none!important} #intro .intro-mark{width:90px;height:auto;filter:drop-shadow(0 0 22px rgba(255,45,142,.5))} #intro .intro-word{font-family:var(--display);text-transform:uppercase;letter-spacing:.18em; font-size:clamp(1.1rem,2vw,1.5rem);color:var(--text);overflow:hidden;display:flex;gap:.06em} #intro .intro-bar{width:min(240px,52vw);height:2px;background:rgba(255,255,255,.12);overflow:hidden;border-radius:2px} #intro .intro-bar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--grad)} #intro .intro-pct{font-family:var(--display);letter-spacing:.1em;color:var(--muted-2);font-size:.8rem} /* Scroll-Progress */ #progress{position:fixed;top:var(--ticker-h);left:0;height:3px;width:100%;z-index:1500;transform:scaleX(0);transform-origin:left; background:var(--grad);box-shadow:0 0 14px rgba(255,45,142,.6);pointer-events:none} html:not(.anim) #progress{display:none} /* Custom Cursor (nur Desktop/Maus) */ #cursor,#cursor-dot{display:none} @media (hover:hover) and (pointer:fine){ html.anim #cursor{display:block;position:fixed;top:0;left:0;width:42px;height:42px;border:1.5px solid rgba(255,255,255,.55); border-radius:50%;z-index:10200;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:difference; transition:width .25s var(--ease),height .25s var(--ease),background .25s,border-color .25s,opacity .3s} html.anim #cursor-dot{display:block;position:fixed;top:0;left:0;width:6px;height:6px;background:var(--pink);border-radius:50%; z-index:10201;pointer-events:none;transform:translate(-50%,-50%)} html.anim.cursor-hover #cursor{width:64px;height:64px;background:rgba(255,255,255,.12);border-color:transparent} html.anim.cursor-hidden #cursor,html.anim.cursor-hidden #cursor-dot{opacity:0} html.anim.has-cursor *{cursor:none!important} } /* Magnetic / parallax perf */ .magnetic{will-change:transform} [data-speed],.about-photo img,.booking-bg img{will-change:transform} /* Section-Title Split-Reveal (GSAP setzt Anfangszustand inline) */ html.anim .split .char{display:inline-block;will-change:transform} @media (prefers-reduced-motion:reduce){ #intro{display:none!important} html .reveal{opacity:1!important;transform:none!important} html .hero h1 .line-in{transform:none!important} .statement .line{transform:none!important} } /* ========================================================================= CONVERSION-SEKTIONEN + EXTRA AWWWARDS ========================================================================= */ /* ---- Anlässe / Event-Typen ---- */ .occasions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .occ{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:300px; padding:1.6rem;border:1px solid var(--line);border-radius:16px;overflow:hidden;isolation:isolate;color:#fff} .occ img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s var(--ease);filter:saturate(1.1)} .occ::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(10,10,13,.15) 0%,rgba(10,10,13,.55) 55%,rgba(10,10,13,.94) 100%)} .occ::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);z-index:1;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)} .occ:hover{transform:translateY(-4px)} .occ:hover img{transform:scale(1.08)} .occ:hover::before{transform:scaleX(1)} .occ h3{font-family:var(--display);text-transform:uppercase;font-size:1.8rem;letter-spacing:.02em;line-height:.95} .occ p{color:#d5d5dd;font-size:.92rem;margin:.45rem 0 1rem;max-width:30ch} .occ .occ-link{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:#fff; display:inline-flex;align-items:center;gap:.45rem;transition:gap .25s var(--ease)} .occ .occ-link svg{width:16px;height:16px;stroke:var(--pink)} .occ:hover .occ-link{gap:.85rem} /* ---- Kinetische Statement-Sektion ---- */ .statement{padding:clamp(3.5rem,9vw,8rem) 0;overflow:hidden;background:var(--bg)} .statement .line{font-family:var(--display);text-transform:uppercase;line-height:.92;letter-spacing:.01em; font-size:clamp(3rem,13vw,12rem);white-space:nowrap;will-change:transform;padding-inline:2vw} .statement .fill{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .statement .outline{color:transparent;-webkit-text-stroke:1.5px var(--line-2)} .statement .line.r{text-align:right} /* ---- Stimmen / Testimonials ---- */ .quotes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .quote{display:flex;flex-direction:column;gap:1rem;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.7rem;transition:transform .3s var(--ease),border-color .3s} .quote:hover{transform:translateY(-5px);border-color:var(--line-2)} .quote .stars{color:var(--yellow);letter-spacing:.18em;font-size:.95rem} .quote blockquote{font-size:1.04rem;color:var(--text);line-height:1.62} .quote .who{display:flex;align-items:center;gap:.8rem;margin-top:auto} .quote .who .av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none; font-family:var(--display);font-size:1.2rem;color:#0a0a0d;background:var(--accent,var(--grad))} .quote .who b{display:block;font-size:.95rem} .quote .who span{color:var(--muted);font-size:.82rem} /* ---- Ablauf / 3 Schritte ---- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem} .step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:2rem 1.6rem;transition:transform .3s var(--ease),border-color .3s} .step:hover{transform:translateY(-5px);border-color:var(--line-2)} .step .num{font-family:var(--display);font-size:3.6rem;line-height:.9;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .step h3{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:1.12rem;margin:.6rem 0 .45rem} .step p{color:var(--muted);font-size:.93rem} .step .ic{position:absolute;top:1.6rem;right:1.6rem;width:30px;height:30px;opacity:.5} .step .ic svg{width:30px;height:30px;stroke:var(--pink)} /* ---- Assurance + WhatsApp ---- */ .assurance{display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;margin:1.4rem 0 .4rem} .assurance span{display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--muted)} .assurance svg{width:18px;height:18px;stroke:var(--lime);flex:none} .btn-wa{background:#25D366;color:#06351a} .btn-wa:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(37,211,102,.42)} .contact-card.wa .ic{background:rgba(37,211,102,.14)} .contact-card.wa .ic svg{stroke:#25D366} /* ---- FAQ ---- */ .faq{max-width:840px;margin-inline:auto} .faq details{border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-bottom:.75rem;overflow:hidden;transition:border-color .3s} .faq details[open]{border-color:var(--line-2)} .faq summary{list-style:none;cursor:pointer;padding:1.15rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem; font-family:"Oswald",sans-serif;font-weight:600;font-size:1.06rem;transition:color .2s} .faq summary:hover{color:var(--pink)} .faq summary::-webkit-details-marker{display:none} .faq summary .pl{position:relative;width:18px;height:18px;flex:none} .faq summary .pl::before,.faq summary .pl::after{content:"";position:absolute;background:var(--pink);border-radius:2px;transition:transform .3s var(--ease)} .faq summary .pl::before{top:8px;left:0;width:18px;height:2px} .faq summary .pl::after{top:0;left:8px;width:2px;height:18px} .faq details[open] summary .pl::after{transform:scaleY(0)} .faq details[open] summary{color:var(--pink)} .faq .faq-a{padding:0 1.4rem 1.3rem;color:var(--muted);line-height:1.65} .faq details[open] .faq-a{animation:faqIn .4s var(--ease)} @keyframes faqIn{from{opacity:0;transform:translateY(-8px)}} /* ---- Cursor label (Awwwards) ---- */ @media (hover:hover) and (pointer:fine){ html.anim #cursor #cursor-label{position:absolute;inset:0;display:none;align-items:center;justify-content:center; font-family:var(--display);font-size:.72rem;letter-spacing:.08em;color:#0a0a0d;text-transform:uppercase} html.anim.cursor-label #cursor{width:88px;height:88px;background:var(--grad);border-color:transparent;mix-blend-mode:normal} html.anim.cursor-label #cursor #cursor-label{display:flex} html.anim.cursor-label #cursor-dot{opacity:0} } @media (max-width:1024px){ .occasions-grid,.quotes-grid,.steps{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .occasions-grid,.quotes-grid,.steps{grid-template-columns:1fr} .occ{min-height:240px} .statement .line{font-size:clamp(2.6rem,15vw,5rem)} .hero-beams span{width:22vw} /* kräftigere, aber wenigere Lichtflächen */ .eq{height:15px} } /* sehr kleine Phones: Hero-Headline nicht an den Rand stoßen lassen */ @media (max-width:360px){ .hero h1{font-size:2.6rem} .wrap{width:min(100% - 1.8rem,var(--maxw))} } /* ========================================================================= PARTY-LAYER · mehr Energie, Farbe & Bewegung ========================================================================= */ :root{ --grad-party:linear-gradient(100deg,#ff2d8e,#ff7a18,#ffd60a,#19e3ff,#b4ff39,#ff2d8e); } /* Fließender Party-Farbverlauf auf Akzenten */ .gradient-text,.cool-text,.hero h1 .accent,.stat .num,.step .num{ background-image:var(--grad-party);background-size:300% auto; -webkit-background-clip:text;background-clip:text;color:transparent; animation:gradflow 9s linear infinite; } @keyframes gradflow{to{background-position:300% center}} /* Brand-Wordmark im Nav leicht schimmern lassen */ .brand .brand-txt{background:var(--grad-party);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradflow 9s linear infinite} .brand .brand-txt small{-webkit-text-fill-color:var(--pink)} /* Hero: Bühnen-Lichtstrahlen */ .hero-beams{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:screen} .hero-beams span{position:absolute;top:-60%;left:var(--x);width:12vw;height:200%; background:linear-gradient(to bottom,transparent 0%,var(--c) 45%,transparent 100%); filter:blur(26px);transform-origin:top center;opacity:.0; animation:beam 7s ease-in-out infinite alternate;animation-delay:var(--d,0s)} @keyframes beam{ 0%{transform:rotate(6deg) translateX(-30%);opacity:.15} 50%{opacity:.55} 100%{transform:rotate(22deg) translateX(40%);opacity:.25} } /* Hero: pulsierender Club-Glow (verstärkt den vorhandenen Radial) */ .hero-media::before{animation:clubpulse 5s ease-in-out infinite alternate} @keyframes clubpulse{0%{opacity:.7;filter:hue-rotate(0deg)}100%{opacity:1;filter:hue-rotate(40deg)}} /* Hero-Slideshow (statt Video) */ .hero-slideshow{position:absolute;inset:0;z-index:-1;overflow:hidden} .hero-slideshow .slide{position:absolute;inset:0;display:block;opacity:0;transition:opacity 1.6s ease} .hero-slideshow .slide img{width:100%;height:100%;object-fit:cover;filter:saturate(1.15) contrast(1.05);transform:scale(1.06)} .hero-slideshow .slide.active{opacity:1;z-index:1} .hero-slideshow .slide.active img{animation:kenburns 7s ease-out forwards} @keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1.16)}} @media (prefers-reduced-motion:reduce){ .hero-slideshow .slide{transition:none} .hero-slideshow .slide.active img{animation:none;transform:scale(1.06)} } /* Equalizer-Bars (Live-Musik-Motiv) */ .eq{display:inline-flex;align-items:flex-end;gap:3px;height:18px;vertical-align:middle} .eq i{width:3px;border-radius:2px;height:30%;background:var(--grad-party);background-size:auto 300%;animation:eqbar .9s ease-in-out infinite} .eq i:nth-child(1){animation-delay:0s}.eq i:nth-child(2){animation-delay:.18s} .eq i:nth-child(3){animation-delay:.36s}.eq i:nth-child(4){animation-delay:.10s} .eq i:nth-child(5){animation-delay:.28s} @keyframes eqbar{0%,100%{height:25%}50%{height:100%}} /* Button-Glanz-Sweep */ .btn-primary{overflow:hidden} .btn-primary::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;z-index:0; background:linear-gradient(110deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg)} .btn-primary>*{position:relative;z-index:1} .btn-primary:hover::after{animation:shine .85s var(--ease)} @keyframes shine{to{left:140%}} /* Cursor-Glow auf soliden Karten (folgt der Maus) */ .feature,.step,.quote{position:relative;overflow:hidden} .feature::after,.step::after,.quote::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .35s; background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(255,45,142,.16),transparent 60%)} .feature:hover::after,.step:hover::after,.quote:hover::after{opacity:1} .feature>*,.step>*,.quote>*{position:relative;z-index:1} /* Party-Laufband: zweite Outline-Zeile */ .marquee.alt{background:transparent;border-top:none;padding:.6rem 0} .marquee.alt .marquee-track{animation-direction:reverse;animation-duration:28s} .marquee.alt .marquee-track span{color:transparent;-webkit-text-stroke:1px var(--line-2);font-size:1.7rem} .marquee.alt .marquee-track span::after{color:var(--cyan)} /* Statement: driftende Glow-Orbs im Hintergrund */ .statement{position:relative} .statement::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(30% 60% at 15% 50%,rgba(255,45,142,.18),transparent 70%), radial-gradient(30% 60% at 85% 50%,rgba(25,227,255,.16),transparent 70%); animation:orbs 12s ease-in-out infinite alternate} .statement .line{position:relative;z-index:1} @keyframes orbs{0%{transform:translateX(-4%) scale(1)}100%{transform:translateX(4%) scale(1.08)}} /* Konfetti */ #confetti{position:fixed;inset:0;width:100%;height:100%;z-index:9600;pointer-events:none} @media (prefers-reduced-motion:reduce){ .gradient-text,.cool-text,.hero h1 .accent,.stat .num,.step .num,.brand .brand-txt{animation:none} .hero-beams,.statement::before{display:none} .eq i{height:60%!important;animation:none} }