diff --git a/index.html b/index.html deleted file mode 100644 index 7bb8a84..0000000 --- a/index.html +++ /dev/null @@ -1,477 +0,0 @@ - - - - - - Klangwald Festival 2026 - - - - - - - - - - - - - - - - -
-
-
-

18. – 20. Juli 2026

-

Klangwald
Festival

-

Drei Tage Musik, Natur & Gemeinschaft
im Herzen der Schweizer Alpen

-
- Tickets sichern - Line-up entdecken -
-
- - -
-
- -- - Tage -
-
- -- - Stunden -
-
- -- - Minuten -
-
- -- - Sekunden -
-
-
- - -
-
-

Line-up

-

Diese Acts erwarten dich am Klangwald Festival 2026

- - -
-

Headliner

-
- -
-
- -
Bild
-
-
-

Künstler*in 1

-

Electronic / Ambient

-
-
-
-
-
Bild
-
-
-

Künstler*in 2

-

Indie Rock

-
-
-
-
- - -
-

Weitere Acts

-
-
-
-
Bild
-
-
-

Band A

-

Pop

-
-
-
-
-
Bild
-
-
-

Band B

-

Hip-Hop

-
-
-
-
-
Bild
-
-
-

DJ C

-

Techno

-
-
-
-
-
Bild
-
-
-

Duo D

-

Jazz / Funk

-
-
-
-
- -

Weitere Acts werden laufend bekannt gegeben.

-
-
- - -
-
-

Programm

-

Drei Tage voller unvergesslicher Erlebnisse

- - -
- - - -
- - -
-
-
16:00
-
-

Doors Open

-

Einlass & Willkommen

-
-
-
-
17:30
-
-

Band A

-

Waldbühne

-
-
-
-
19:00
-
-

DJ C

-

Lichtung Stage

-
-
-
-
21:00
-
-

Künstler*in 1

-

Hauptbühne

- Headliner -
-
-
-
23:00
-
-

Late Night Session

-

Lichtung Stage

-
-
-
- - -
-
-
14:00
-
-

Yoga & Sounds

-

Waldlichtung

-
-
-
-
16:00
-
-

Duo D

-

Waldbühne

-
-
-
-
18:00
-
-

Band B

-

Hauptbühne

-
-
-
-
21:00
-
-

Künstler*in 2

-

Hauptbühne

- Headliner -
-
-
- - -
-
-
12:00
-
-

Brunch & Akustik

-

Waldlichtung

-
-
-
-
15:00
-
-

Offene Jam Session

-

Waldbühne

-
-
-
-
18:00
-
-

Abschlusskonzert

-

Hauptbühne

-
-
-
-
-
- - -
-
-

Tickets

-

Sichere dir jetzt deinen Platz am Klangwald Festival

- -
- -
-

Tagespass

-
- CHF 69 - pro Tag -
-
    -
  • Zugang zu allen Bühnen
    • -
  • 1 Tag gültig
    • -
  • Food-Court Zugang
    • -
- Auswählen -
- - -
-
Beliebt
-

3-Tages-Pass

-
- CHF 149 - alle 3 Tage -
-
    -
  • Zugang zu allen Bühnen
    • -
  • Alle 3 Tage gültig
    • -
  • Food-Court Zugang
    • -
  • Camping inklusive
    • -
- Auswählen -
- - -
-

VIP Pass

-
- CHF 299 - alle 3 Tage -
-
    -
  • Zugang zu allen Bühnen
    • -
  • Alle 3 Tage gültig
    • -
  • VIP-Lounge & Catering
    • -
  • Glamping inklusive
    • -
  • Meet & Greet
    • -
- Auswählen -
-
-
-
- - -
-
-

Info

-

Alles was du für dein Festival-Erlebnis wissen musst

- -
- -
-
- - 📍 -
-

Anreise

-

- Das Festival findet auf der Waldlichtung oberhalb von Chur statt. - Shuttle-Busse verkehren ab Bahnhof Chur alle 30 Minuten. -

-
- - -
-
- ⛺ -
-

Camping

-

- Der Campingplatz öffnet am Freitag um 10:00 Uhr. - Duschen und Sanitäranlagen sind vorhanden. Glamping-Zelte können dazu gebucht werden. -

-
- - -
-
- 🌱 -
-

Nachhaltigkeit

-

- Klangwald ist ein klimaneutrales Festival. Wir setzen auf - Mehrwegbecher, regionale Verpflegung und erneuerbare Energien. -

-
- - -
-
- ❓ -
-

FAQ

-

- Häufig gestellte Fragen zu Tickets, Anreise, - Barrierefreiheit und mehr findest du in unseren FAQ. -

- Zu den FAQ → -
-
-
-
- - -
-
- - - - -
-
- - - - - - - - diff --git a/style.css b/style.css deleted file mode 100644 index 58cfd1f..0000000 --- a/style.css +++ /dev/null @@ -1,989 +0,0 @@ -/* =========================================== - KLANGWALD FESTIVAL – Stylesheet - =========================================== - Inhaltsverzeichnis: - 1. CSS Custom Properties (Variablen) - 2. Reset & Basis-Styles - 3. Typografie - 4. Layout-Utilities - 5. Buttons - 6. Navigation - 7. Hero Section - 8. Line-up Section - 9. Programm Section - 10. Tickets Section - 11. Info Section - 12. Newsletter Section - 13. Footer - 14. Animationen - 15. Media Queries (Responsive) - =========================================== */ - -/* =========================================== - 1. CSS CUSTOM PROPERTIES - Hier können Farben, Schriftarten und Abstände - zentral angepasst werden. - =========================================== */ -:root { - /* Farben */ - --color-primary: #6C3CE1; /* Violett – Hauptfarbe */ - --color-primary-light: #8B5CF6; - --color-primary-dark: #4C1D95; - --color-accent: #F59E0B; /* Gold – Akzentfarbe */ - --color-accent-light: #FBBF24; - - --color-bg: #0F0F14; /* Dunkler Hintergrund */ - --color-bg-light: #1A1A24; /* Etwas hellerer Hintergrund */ - --color-bg-card: #222233; /* Karten-Hintergrund */ - - --color-text: #E8E8F0; /* Haupttext */ - --color-text-muted: #9999AA; /* Gedämpfter Text */ - --color-text-heading: #FFFFFF; /* Überschriften */ - - --color-border: #333344; /* Rahmenfarbe */ - - /* Schriftarten */ - --font-heading: 'Space Grotesk', sans-serif; - --font-body: 'Inter', sans-serif; - - /* Abstände */ - --spacing-xs: 0.5rem; /* 8px */ - --spacing-sm: 1rem; /* 16px */ - --spacing-md: 1.5rem; /* 24px */ - --spacing-lg: 2.5rem; /* 40px */ - --spacing-xl: 4rem; /* 64px */ - --spacing-2xl: 6rem; /* 96px */ - - /* Rundungen */ - --radius-sm: 6px; - --radius-md: 12px; - --radius-lg: 20px; - --radius-full: 9999px; - - /* Schatten */ - --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); - --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3); - --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4); - --shadow-glow: 0 0 30px rgba(108, 60, 225, 0.3); - - /* Übergänge */ - --transition-fast: 150ms ease; - --transition-base: 300ms ease; - --transition-slow: 500ms ease; - - /* Container */ - --container-max: 1200px; - --container-padding: 1.5rem; -} - -/* =========================================== - 2. RESET & BASIS-STYLES - =========================================== */ -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; - font-size: 16px; -} - -body { - font-family: var(--font-body); - background-color: var(--color-bg); - color: var(--color-text); - line-height: 1.6; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -img { - max-width: 100%; - height: auto; - display: block; -} - -a { - color: var(--color-primary-light); - text-decoration: none; - transition: color var(--transition-fast); -} - -a:hover { - color: var(--color-accent); -} - -ul { - list-style: none; -} - -/* =========================================== - 3. TYPOGRAFIE - =========================================== */ -h1, h2, h3, h4, h5, h6 { - font-family: var(--font-heading); - color: var(--color-text-heading); - font-weight: 700; - line-height: 1.2; -} - -.section__title { - font-size: clamp(2rem, 5vw, 3.5rem); - text-align: center; - margin-bottom: var(--spacing-xs); -} - -.section__subtitle { - text-align: center; - color: var(--color-text-muted); - font-size: 1.1rem; - margin-bottom: var(--spacing-xl); - max-width: 600px; - margin-left: auto; - margin-right: auto; -} - -/* =========================================== - 4. LAYOUT-UTILITIES - =========================================== */ -.container { - width: 100%; - max-width: var(--container-max); - margin: 0 auto; - padding: 0 var(--container-padding); -} - -.section { - padding: var(--spacing-2xl) 0; -} - -/* =========================================== - 5. BUTTONS - =========================================== */ -.btn { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.85rem 2rem; - font-family: var(--font-heading); - font-size: 1rem; - font-weight: 600; - border-radius: var(--radius-full); - border: 2px solid transparent; - cursor: pointer; - transition: all var(--transition-base); - text-decoration: none; - gap: 0.5rem; -} - -.btn--primary { - background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); - color: #fff; - border-color: var(--color-primary); -} - -.btn--primary:hover { - background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary)); - box-shadow: var(--shadow-glow); - color: #fff; - transform: translateY(-2px); -} - -.btn--outline { - background: transparent; - color: var(--color-text-heading); - border-color: var(--color-border); -} - -.btn--outline:hover { - border-color: var(--color-primary-light); - color: var(--color-primary-light); - transform: translateY(-2px); -} - -/* =========================================== - 6. NAVIGATION - =========================================== */ -.navbar { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 1000; - padding: 1rem 0; - transition: background-color var(--transition-base), padding var(--transition-base); -} - -.navbar--scrolled { - background-color: rgba(15, 15, 20, 0.95); - backdrop-filter: blur(10px); - padding: 0.6rem 0; - box-shadow: var(--shadow-sm); -} - -.navbar__inner { - display: flex; - align-items: center; - justify-content: space-between; -} - -.navbar__logo { - font-family: var(--font-heading); - font-size: 1.5rem; - font-weight: 700; - color: var(--color-text-heading); - letter-spacing: 0.1em; -} - -.navbar__logo:hover { - color: var(--color-accent); -} - -.navbar__menu { - display: flex; - align-items: center; - gap: var(--spacing-md); -} - -.navbar__link { - font-family: var(--font-heading); - font-size: 0.95rem; - font-weight: 500; - color: var(--color-text); - transition: color var(--transition-fast); -} - -.navbar__link:hover { - color: var(--color-text-heading); -} - -.navbar__link--cta { - background: var(--color-primary); - color: #fff; - padding: 0.5rem 1.2rem; - border-radius: var(--radius-full); -} - -.navbar__link--cta:hover { - background: var(--color-primary-light); - color: #fff; -} - -/* Hamburger Toggle */ -.navbar__toggle { - display: none; - flex-direction: column; - gap: 5px; - background: none; - border: none; - cursor: pointer; - padding: 0.5rem; -} - -.navbar__toggle-bar { - display: block; - width: 24px; - height: 2px; - background-color: var(--color-text-heading); - border-radius: 2px; - transition: all var(--transition-base); -} - -/* =========================================== - 7. HERO SECTION - =========================================== */ -.hero { - position: relative; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - overflow: hidden; - - /* TODO: Hintergrundbild hier einfügen */ - background: linear-gradient( - 135deg, - var(--color-bg) 0%, - var(--color-primary-dark) 50%, - var(--color-bg) 100% - ); - /* Falls ein Bild verwendet wird: - background-image: url('../img/hero-bg.jpg'); - background-size: cover; - background-position: center; - */ -} - -.hero__overlay { - position: absolute; - inset: 0; - background: radial-gradient( - ellipse at center, - rgba(108, 60, 225, 0.15) 0%, - rgba(15, 15, 20, 0.8) 70% - ); -} - -.hero__content { - position: relative; - z-index: 1; -} - -.hero__date { - font-family: var(--font-heading); - font-size: 1.1rem; - font-weight: 500; - color: var(--color-accent); - letter-spacing: 0.15em; - text-transform: uppercase; - margin-bottom: var(--spacing-sm); -} - -.hero__title { - font-size: clamp(3rem, 10vw, 8rem); - font-weight: 700; - line-height: 0.95; - letter-spacing: -0.02em; - margin-bottom: var(--spacing-md); - background: linear-gradient(180deg, #fff 40%, var(--color-primary-light) 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.hero__subtitle { - font-size: clamp(1rem, 2.5vw, 1.3rem); - color: var(--color-text-muted); - max-width: 500px; - margin: 0 auto var(--spacing-lg); - line-height: 1.7; -} - -.hero__actions { - display: flex; - gap: var(--spacing-sm); - justify-content: center; - flex-wrap: wrap; -} - -/* Countdown */ -.hero__countdown { - position: relative; - z-index: 1; - display: flex; - gap: var(--spacing-lg); - margin-top: var(--spacing-xl); -} - -.countdown__item { - display: flex; - flex-direction: column; - align-items: center; -} - -.countdown__number { - font-family: var(--font-heading); - font-size: clamp(2rem, 5vw, 3rem); - font-weight: 700; - color: var(--color-text-heading); -} - -.countdown__label { - font-size: 0.85rem; - color: var(--color-text-muted); - text-transform: uppercase; - letter-spacing: 0.1em; -} - -/* =========================================== - 8. LINE-UP SECTION - =========================================== */ -.lineup { - background-color: var(--color-bg); -} - -.lineup__tier { - margin-bottom: var(--spacing-xl); -} - -.lineup__tier-label { - font-size: 1.2rem; - color: var(--color-accent); - text-transform: uppercase; - letter-spacing: 0.15em; - margin-bottom: var(--spacing-md); - text-align: center; -} - -.lineup__grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); - gap: var(--spacing-md); -} - -.lineup__grid--headliner { - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); -} - -.artist-card { - background: var(--color-bg-card); - border-radius: var(--radius-md); - overflow: hidden; - border: 1px solid var(--color-border); - transition: transform var(--transition-base), box-shadow var(--transition-base); -} - -.artist-card:hover { - transform: translateY(-4px); - box-shadow: var(--shadow-md); -} - -.artist-card__image { - aspect-ratio: 1 / 1; - overflow: hidden; - background: var(--color-bg-light); -} - -.artist-card--large .artist-card__image { - aspect-ratio: 16 / 10; -} - -.artist-card__placeholder { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - color: var(--color-text-muted); - font-size: 0.9rem; - background: linear-gradient(135deg, var(--color-bg-light), var(--color-bg-card)); -} - -.artist-card__info { - padding: var(--spacing-sm); -} - -.artist-card__name { - font-size: 1.1rem; - margin-bottom: 0.25rem; -} - -.artist-card__genre { - font-size: 0.85rem; - color: var(--color-text-muted); -} - -.lineup__more { - text-align: center; - color: var(--color-text-muted); - font-style: italic; - margin-top: var(--spacing-md); -} - -/* =========================================== - 9. PROGRAMM SECTION - =========================================== */ -.programm { - background-color: var(--color-bg-light); -} - -.programm__tabs { - display: flex; - justify-content: center; - gap: var(--spacing-xs); - margin-bottom: var(--spacing-lg); - flex-wrap: wrap; -} - -.programm__tab { - font-family: var(--font-heading); - font-size: 0.95rem; - font-weight: 600; - padding: 0.7rem 1.5rem; - background: transparent; - border: 2px solid var(--color-border); - border-radius: var(--radius-full); - color: var(--color-text-muted); - cursor: pointer; - transition: all var(--transition-base); -} - -.programm__tab:hover { - border-color: var(--color-primary-light); - color: var(--color-text-heading); -} - -.programm__tab--active { - background: var(--color-primary); - border-color: var(--color-primary); - color: #fff; -} - -/* Tages-Container */ -.programm__day { - display: none; - max-width: 700px; - margin: 0 auto; -} - -.programm__day--active { - display: block; -} - -.programm__event { - display: flex; - align-items: flex-start; - gap: var(--spacing-md); - padding: var(--spacing-sm) 0; - border-bottom: 1px solid var(--color-border); -} - -.programm__event:last-child { - border-bottom: none; -} - -.programm__event--highlight { - background: rgba(108, 60, 225, 0.1); - margin: 0 calc(var(--spacing-sm) * -1); - padding: var(--spacing-sm); - border-radius: var(--radius-md); - border-bottom: none; -} - -.programm__time { - font-family: var(--font-heading); - font-size: 1.1rem; - font-weight: 600; - color: var(--color-accent); - min-width: 70px; -} - -.programm__act { - font-size: 1.05rem; - font-weight: 600; -} - -.programm__stage { - font-size: 0.9rem; - color: var(--color-text-muted); -} - -.programm__badge { - display: inline-block; - margin-top: 0.3rem; - padding: 0.2rem 0.7rem; - font-size: 0.75rem; - font-weight: 600; - background: var(--color-primary); - color: #fff; - border-radius: var(--radius-full); - text-transform: uppercase; - letter-spacing: 0.05em; -} - -/* =========================================== - 10. TICKETS SECTION - =========================================== */ -.tickets { - background-color: var(--color-bg); -} - -.tickets__grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: var(--spacing-md); - align-items: start; -} - -.ticket-card { - position: relative; - background: var(--color-bg-card); - border: 1px solid var(--color-border); - border-radius: var(--radius-lg); - padding: var(--spacing-lg); - text-align: center; - transition: transform var(--transition-base), box-shadow var(--transition-base); -} - -.ticket-card:hover { - transform: translateY(-4px); - box-shadow: var(--shadow-md); -} - -.ticket-card--featured { - border-color: var(--color-primary); - box-shadow: var(--shadow-glow); - transform: scale(1.03); -} - -.ticket-card--featured:hover { - transform: scale(1.03) translateY(-4px); -} - -.ticket-card__badge { - position: absolute; - top: -12px; - left: 50%; - transform: translateX(-50%); - background: var(--color-accent); - color: var(--color-bg); - font-family: var(--font-heading); - font-size: 0.8rem; - font-weight: 700; - padding: 0.3rem 1rem; - border-radius: var(--radius-full); - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.ticket-card__title { - font-size: 1.3rem; - margin-bottom: var(--spacing-sm); -} - -.ticket-card__price { - margin-bottom: var(--spacing-md); -} - -.ticket-card__amount { - display: block; - font-family: var(--font-heading); - font-size: 2.5rem; - font-weight: 700; - color: var(--color-text-heading); -} - -.ticket-card__period { - font-size: 0.9rem; - color: var(--color-text-muted); -} - -.ticket-card__features { - text-align: left; - margin-bottom: var(--spacing-lg); -} - -.ticket-card__features li { - padding: 0.5rem 0; - border-bottom: 1px solid var(--color-border); - font-size: 0.95rem; - color: var(--color-text); -} - -.ticket-card__features li::before { - content: '✓ '; - color: var(--color-primary-light); - font-weight: 700; -} - -.ticket-card__features li:last-child { - border-bottom: none; -} - -.ticket-card__btn { - width: 100%; -} - -/* =========================================== - 11. INFO SECTION - =========================================== */ -.info { - background-color: var(--color-bg-light); -} - -.info__grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: var(--spacing-md); -} - -.info__card { - background: var(--color-bg-card); - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - padding: var(--spacing-lg); - transition: transform var(--transition-base); -} - -.info__card:hover { - transform: translateY(-2px); -} - -.info__icon { - margin-bottom: var(--spacing-sm); -} - -.info__icon-placeholder { - font-size: 2rem; -} - -.info__card-title { - font-size: 1.2rem; - margin-bottom: var(--spacing-xs); -} - -.info__card-text { - color: var(--color-text-muted); - font-size: 0.95rem; - line-height: 1.7; -} - -.info__link { - display: inline-block; - margin-top: var(--spacing-sm); - font-weight: 600; - color: var(--color-primary-light); -} - -/* =========================================== - 12. NEWSLETTER SECTION - =========================================== */ -.newsletter { - background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); - text-align: center; -} - -.newsletter__inner { - max-width: 600px; -} - -.newsletter__title { - font-size: clamp(1.5rem, 4vw, 2.5rem); - color: #fff; - margin-bottom: var(--spacing-xs); -} - -.newsletter__text { - color: rgba(255, 255, 255, 0.8); - margin-bottom: var(--spacing-md); -} - -.newsletter__form { - display: flex; - gap: var(--spacing-xs); - margin-bottom: var(--spacing-xs); -} - -.newsletter__input { - flex: 1; - padding: 0.85rem 1.2rem; - font-size: 1rem; - font-family: var(--font-body); - background: rgba(255, 255, 255, 0.15); - border: 2px solid rgba(255, 255, 255, 0.3); - border-radius: var(--radius-full); - color: #fff; - outline: none; - transition: border-color var(--transition-fast); -} - -.newsletter__input::placeholder { - color: rgba(255, 255, 255, 0.5); -} - -.newsletter__input:focus { - border-color: var(--color-accent); -} - -.newsletter__btn { - white-space: nowrap; - background: var(--color-accent); - border-color: var(--color-accent); - color: var(--color-bg); -} - -.newsletter__btn:hover { - background: var(--color-accent-light); - border-color: var(--color-accent-light); -} - -.newsletter__hint { - font-size: 0.8rem; - color: rgba(255, 255, 255, 0.5); -} - -/* =========================================== - 13. FOOTER - =========================================== */ -.footer { - background-color: var(--color-bg); - border-top: 1px solid var(--color-border); - padding: var(--spacing-xl) 0 var(--spacing-md); -} - -.footer__inner { - display: flex; - flex-wrap: wrap; - gap: var(--spacing-xl); -} - -.footer__brand { - flex: 1; - min-width: 200px; -} - -.footer__logo { - font-family: var(--font-heading); - font-size: 1.3rem; - font-weight: 700; - color: var(--color-text-heading); - letter-spacing: 0.1em; -} - -.footer__tagline { - color: var(--color-text-muted); - margin-top: var(--spacing-xs); - font-size: 0.9rem; -} - -.footer__links { - display: flex; - flex-wrap: wrap; - gap: var(--spacing-xl); -} - -.footer__heading { - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.1em; - color: var(--color-text-heading); - margin-bottom: var(--spacing-sm); -} - -.footer__column a { - display: block; - padding: 0.3rem 0; - color: var(--color-text-muted); - font-size: 0.9rem; -} - -.footer__column a:hover { - color: var(--color-text-heading); -} - -.footer__bottom { - width: 100%; - padding-top: var(--spacing-lg); - margin-top: var(--spacing-lg); - border-top: 1px solid var(--color-border); - text-align: center; - color: var(--color-text-muted); - font-size: 0.85rem; -} - -/* =========================================== - 14. ANIMATIONEN - =========================================== */ - -/* Scroll-Animation: Elemente einblenden */ -.fade-in { - opacity: 0; - transform: translateY(20px); - transition: opacity var(--transition-slow), transform var(--transition-slow); -} - -.fade-in--visible { - opacity: 1; - transform: translateY(0); -} - -/* =========================================== - 15. MEDIA QUERIES (Responsive) - =========================================== */ - -/* Tablet */ -@media (max-width: 768px) { - /* Navigation: Hamburger-Menü */ - .navbar__toggle { - display: flex; - } - - .navbar__menu { - position: fixed; - top: 0; - right: -100%; - width: 280px; - height: 100vh; - background: var(--color-bg); - flex-direction: column; - align-items: flex-start; - padding: 5rem var(--spacing-lg) var(--spacing-lg); - gap: var(--spacing-sm); - transition: right var(--transition-base); - box-shadow: var(--shadow-lg); - } - - .navbar__menu--open { - right: 0; - } - - .navbar__link--cta { - margin-top: var(--spacing-sm); - } - - /* Hero */ - .hero__countdown { - gap: var(--spacing-md); - } - - /* Tickets */ - .ticket-card--featured { - transform: none; - } - - .ticket-card--featured:hover { - transform: translateY(-4px); - } - - /* Newsletter */ - .newsletter__form { - flex-direction: column; - } - - /* Footer */ - .footer__inner { - flex-direction: column; - gap: var(--spacing-lg); - } -} - -/* Mobile */ -@media (max-width: 480px) { - :root { - --container-padding: 1rem; - } - - .section { - padding: var(--spacing-xl) 0; - } - - .hero__actions { - flex-direction: column; - align-items: center; - } - - .hero__countdown { - gap: var(--spacing-sm); - } - - .lineup__grid--headliner { - grid-template-columns: 1fr; - } - - .programm__tabs { - flex-direction: column; - align-items: center; - } - - .programm__tab { - width: 100%; - text-align: center; - } -}