* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
background: #080808;
color: #f5f5f5;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.65;
}

a {
color: inherit;
text-decoration: none;
}

/* =========================
HERO
========================= */

.hero {
min-height: 90vh;

background:
radial-gradient(
circle at 75% 20%,
rgba(190, 0, 255, 0.18),
transparent 32%
),
radial-gradient(
circle at 20% 70%,
rgba(255, 0, 120, 0.13),
transparent 30%
),
#080808;

position: relative;
overflow: hidden;
}

/* =========================
NAVIGATION
========================= */

.nav {
max-width: 1150px;
width: calc(100% - 40px);
margin: auto;

padding: 25px 0;

display: flex;
justify-content: space-between;
align-items: center;

position: relative;
z-index: 2;
}

.brand {
font-weight: 900;
letter-spacing: 0.14em;
}

.navlinks {
display: flex;
gap: 24px;

font-size: 0.9rem;
color: #ccc;
}

.navlinks a {
transition: color 0.2s ease;
}

.navlinks a:hover {
color: #ff168d;
}

/* =========================
HERO CONTENT
========================= */

.hero-inner {
max-width: 1150px;
width: calc(100% - 40px);
margin: auto;

padding: 60px 0 110px;

position: relative;
z-index: 2;
}

.logo-wrap {
margin-bottom: 25px;
}

.main-logo {
width: min(650px, 100%);
max-height: 300px;

object-fit: contain;
object-position: left center;

display: block;
}

.eyebrow {
color: #ff168d;

font-weight: 800;

letter-spacing: 0.18em;

font-size: 0.75rem;

margin: 0 0 12px;
}

.lead {
font-size: 1.15rem;

color: #ccc;

max-width: 620px;

margin: 0 0 32px;
}

.button {
display: inline-block;

background: #ff168d;
color: #fff;

font-weight: 800;

padding: 12px 21px;

border-radius: 3px;

transition:
transform 0.2s ease,
filter 0.2s ease;
}

.button:hover {
filter: brightness(1.12);
transform: translateY(-1px);
}

/* =========================
SECTIONS
========================= */

.section {
max-width: 1150px;

width: calc(100% - 40px);

margin: auto;

padding: 100px 0;
}

.section h2 {
font-size: clamp(3rem, 7vw, 6rem);

line-height: 0.9;

margin: 0 0 18px;

letter-spacing: -0.04em;
}

.date {
color: #b6ff00;

font-weight: 800;
}

.muted {
color: #999;
}

/* =========================
EVENT
========================= */

.event-grid {
display: grid;

grid-template-columns: 1fr 390px;

gap: 35px;

background: #141414;

border: 1px solid #292929;

padding: 32px;

margin-top: 35px;
}

.event-copy {
align-self: center;
}

.event-copy h3 {
font-size: 2rem;

margin-top: 0;
}

.flyer-box {
background: #202020;

overflow: hidden;
}

.flyer {
width: 100%;

height: auto;

display: block;
}

/* =========================
VIDEO
========================= */

.video-section {
padding-top: 30px;
}

.video-wrap {
margin-top: 35px;

background: #141414;

border: 1px solid #292929;

padding: 8px;

overflow: hidden;
}

.event-video {
width: 100%;

height: auto;

display: block;

background: #000;
}

/* =========================
GALERIE
========================= */

.gallery {
display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 12px;

margin-top: 35px;
}

.photo {
margin: 0;

aspect-ratio: 1 / 1;

background: #151515;

overflow: hidden;

position: relative;
}

.photo img {
width: 100%;
height: 100%;

object-fit: cover;

display: block;

transition:
transform 0.45s ease,
filter 0.45s ease;
}

.photo:hover img {
transform: scale(1.04);

filter: brightness(1.08);
}

.photo-credit {
margin: 18px 0 0;

color: #777;

font-size: 0.75rem;

letter-spacing: 0.04em;
}

/* =========================
MUSIC
========================= */

.card {
background: #141414;

border: 1px solid #292929;

padding: 28px;
}

.card h3 {
margin-top: 0;
}

.section .card {
display: flex;

justify-content: space-between;

align-items: center;

gap: 20px;
}

.section .card iframe {
flex: 1;

min-width: 0;

border: 0;
}

/* =========================
CONTACT
========================= */

.cards {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 12px;

margin-top: 30px;
}

.linkcard {
display: flex;

flex-direction: column;

transition:
border-color 0.2s ease,
transform 0.2s ease;
}

.linkcard:hover {
border-color: #ff168d;

transform: translateY(-2px);
}

.linkcard span {
color: #999;
}

/* =========================
FOOTER
========================= */

footer {
max-width: 1150px;

width: calc(100% - 40px);

margin: auto;

border-top: 1px solid #292929;

padding: 28px 0 45px;

color: #999;

display: flex;

justify-content: space-between;

font-size: 0.82rem;
}

footer a {
transition: color 0.2s ease;
}

footer a:hover {
color: #ff168d;
}

/* =========================
LEGAL PAGES
IMPRESSUM / DATENSCHUTZ
========================= */

.legal-page {
min-height: 100vh;

background:
radial-gradient(
circle at 80% 10%,
rgba(190, 0, 255, 0.12),
transparent 30%
),
#080808;

padding: 70px 20px;
}

.legal-inner {
width: 100%;
max-width: 820px;

margin: 0 auto;
}

.legal-inner h1 {
font-size: clamp(3rem, 7vw, 5rem);

line-height: 0.95;

letter-spacing: -0.04em;

margin: 0 0 35px;
}

.legal-card {
background: #141414;

border: 1px solid #292929;

padding: 40px;
}

.legal-card h2 {
font-size: 1.25rem;

line-height: 1.3;

margin:
32px 0 12px;
}

.legal-card h2:first-child {
margin-top: 0;
}

.legal-card p {
color: #ccc;

margin:
0 0 20px;
}

.legal-card strong {
color: #fff;
}

.legal-card a {
color: #ff168d;
}

.legal-note {
margin-top: 35px !important;

padding-top: 25px;

border-top: 1px solid #292929;

color: #777 !important;

font-size: 0.85rem;
}

.legal-back {
margin-top: 25px;
}

/* =========================
TABLET
========================= */

@media (max-width: 900px) {

.event-grid {
grid-template-columns: 1fr 320px;
}

.section {
padding: 80px 0;
}

}

/* =========================
MOBILE / IPHONE
========================= */

@media (max-width: 720px) {

.nav {
width: calc(100% - 30px);

```
padding: 20px 0;
```

}

.navlinks {
display: none;
}

.brand {
font-size: 0.9rem;
}

.hero {
min-height: auto;
}

.hero-inner {
width: calc(100% - 30px);

```
padding:
  35px 0
  75px;
```

}

.main-logo {
width: 100%;

```
max-height: 220px;

object-position: center;
```

}

.eyebrow {
font-size: 0.68rem;

```
letter-spacing: 0.14em;
```

}

.lead {
font-size: 1rem;
}

.button {
padding: 12px 20px;
}

/* Sections */

.section {
width: calc(100% - 30px);

```
padding: 70px 0;
```

}

.section h2 {
font-size: clamp(2.8rem, 15vw, 4.5rem);
}

/* Event */

.event-grid {
grid-template-columns: 1fr;

```
padding: 20px;

gap: 25px;
```

}

.event-copy h3 {
font-size: 1.7rem;
}

.flyer-box {
width: 100%;
}

.flyer {
width: 100%;

```
height: auto;
```

}

/* Video */

.video-section {
padding-top: 20px;
}

.video-wrap {
margin-top: 25px;

```
padding: 5px;
```

}

.event-video {
width: 100%;

```
height: auto;

border-radius: 2px;
```

}

/* Galerie */

.gallery {
grid-template-columns: 1fr 1fr;

```
gap: 7px;

margin-top: 25px;
```

}

.photo {
aspect-ratio: 1 / 1;
}

.photo-credit {
font-size: 0.7rem;

```
margin-top: 14px;
```

}

/* SoundCloud */

.section .card {
flex-direction: column;

```
align-items: stretch;

padding: 20px;
```

}

.section .card iframe {
width: 100%;
}

/* Kontakt */

.cards {
grid-template-columns: 1fr;
}

/* Footer */

footer {
width: calc(100% - 30px);

```
flex-direction: column;

gap: 10px;

padding-bottom: 30px;
```

}

/* Legal Pages */

.legal-page {
padding:
45px 15px
60px;
}

.legal-inner h1 {
font-size: clamp(2.8rem, 14vw, 4rem);

```
margin-bottom: 25px;
```

}

.legal-card {
padding: 24px 20px;
}

.legal-card h2 {
font-size: 1.1rem;

```
margin-top: 28px;
```

}

.legal-card p {
font-size: 0.95rem;

```
line-height: 1.7;
```

}

}

/* =========================
SMALL PHONES
========================= */

@media (max-width: 390px) {

.hero-inner {
padding-top: 25px;
}

.section {
padding: 60px 0;
}

.gallery {
gap: 5px;
}

.event-grid {
padding: 15px;
}

.legal-page {
padding-left: 12px;
padding-right: 12px;
}

.legal-card {
padding: 22px 17px;
}

}