From a2f129f87ebf5db63d67699aa1f99bf4632941f8 Mon Sep 17 00:00:00 2001 From: Lara Date: Fri, 13 Mar 2026 14:36:21 +0100 Subject: [PATCH] =?UTF-8?q?Klangwald=20HTML=20und=20CSS=20hinzuf=C3=BCgen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 477 ++++++++++++++++++++++++++ style.css | 989 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 1466 insertions(+) create mode 100644 index.html create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..7bb8a84 --- /dev/null +++ b/index.html @@ -0,0 +1,477 @@ + + + + + + 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 new file mode 100644 index 0000000..58cfd1f --- /dev/null +++ b/style.css @@ -0,0 +1,989 @@ +/* =========================================== + 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; + } +}