/*
 * File: assets/css/main.css
 * Version: 4.0.0 – MOBILE NAV COMPLETE FIX
 * Author: Systemhaus IT – 030 54874086
 * Last Updated: 2026-04-12
 *
 * ═══════════════════════════════════════════════════════════════
 * MOBILE BUGS ANALYSIERT & BEHOBEN (getestet auf):
 *   iPhone 13/14/15/16/17 · iOS Safari 15–18
 *   Samsung Galaxy S21/S22/S23/S24/S26 · Samsung Internet 23
 *   iPhone SE (2020/2022) – kleinstes iOS-Gerät (375px)
 *   iPad Air/Pro (768px – Breakpoint-Grenzfall)
 *   Android Chrome 120+ · Firefox Mobile 121+
 *   Ältere Geräte: iPhone 8 (iOS 15), Galaxy S10
 *
 * BUG 1 – "Scroll springt nach oben beim Menü-Öffnen" (iOS)
 *   Ursache: body.nav-open hatte position:fixed OHNE left:0
 *   Fix: left:0 + right:0 explizit setzen
 *
 * BUG 2 – "Menü wird unten abgeschnitten" (iPhone Notch/Dynamic Island)
 *   Ursache: bottom:0 ignoriert Safe Area + 100vh = inkl. URL-Bar
 *   Fix: padding-bottom:env(safe-area-inset-bottom) + 100dvh
 *
 * BUG 3 – "Menü-Inhalt nicht scrollbar, nur oberer Bereich sichtbar"
 *   Ursache: overflow-y:auto funktioniert nicht wenn parent height fehlt
 *            + iOS Safari: -webkit-overflow-scrolling veraltet
 *   Fix: Explizite Höhenberechnung via calc + modernes scroll-behavior
 *
 * BUG 4 – "Ruckeln beim Scrollen im Menü" (ältere Samsung/iPhone)
 *   Ursache: backdrop-filter:blur(20px) auf mobilem Offcanvas = GPU-Killer
 *   Fix: Kein backdrop-filter auf Menü, solider Hintergrund stattdessen
 *
 * BUG 5 – "Tap auf Overlay scrollt Seite" (Android)
 *   Ursache: touchmove nicht verhindert auf body wenn Menü offen
 *   Fix: JS touchmove-Handler (in main.js)
 *
 * BUG 6 – "Seite springt beim Schließen des Menüs" (iOS Safari)
 *   Ursache: body.style.top wird gesetzt aber left fehlt
 *   Fix: Vollständiger iOS Scroll-Lock in JS (main.js)
 *
 * BUG 7 – "Nav-Links zu klein zum Tippen" (iPhone SE, alte Androids)
 *   Ursache: min-height:44px reicht nicht, padding zu klein
 *   Fix: min-height:52px auf Mobile + ausreichend padding
 * ═══════════════════════════════════════════════════════════════
 */

/* ── Lokale Schriften ───────────────────────────────────────── */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/bebas-neue/bebas-neue-v10-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/oswald/oswald-v49-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/oswald/oswald-v49-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/oswald/oswald-v49-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter/inter-v13-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter/inter-v13-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter/inter-v13-latin-600.woff2') format('woff2');
}

/* ══════════════════════════════════════════════════════════════
   CUSTOM PROPERTIES
══════════════════════════════════════════════════════════════ */
:root {
  --c-bg:           #06060a;
  --c-bg-2:         #0d0d14;
  --c-bg-3:         #131320;
  --c-surface:      #1a1a2e;
  --c-border:       rgba(255,102,0,0.25);
  --c-primary:      #ff6600;
  --c-primary-glow: rgba(255,102,0,0.6);
  --c-secondary:    #ff3300;
  --c-accent:       #ff9900;
  --c-neon-blue:    #00d4ff;
  --c-neon-purple:  #9b59ff;
  --c-text:         #e8e8f0;
  --c-text-muted:   #8888aa;
  --c-text-dim:     #555570;
  --c-success:      #00ff88;
  --c-error:        #ff3355;
  --c-warning:      #ffcc00;

  /* Menü-Hintergrund: solid, kein blur → Performance auf Mobile */
  --c-nav-menu-bg:  #09090f;

  --f-display: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
  --f-heading: 'Oswald', 'Arial Black', sans-serif;
  --f-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  4rem;
  --space-xxl: 8rem;

  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-pill: 999px;

  --shadow-neon:      0 0 20px var(--c-primary-glow), 0 0 60px rgba(255,102,0,0.2);
  --shadow-neon-sm:   0 0 8px var(--c-primary-glow);
  --shadow-card:      0 4px 24px rgba(0,0,0,0.6);
  --shadow-text-glow: 0 0 30px var(--c-primary-glow);

  --t-fast:       0.15s ease;
  --t-normal:     0.3s ease;
  --t-slow:       0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --t-menu-open:  0.32s cubic-bezier(0.4, 0, 0.2, 1);

  --max-w:  1400px;

  /*
   * --nav-h: Höhe des fixed Headers.
   * WICHTIG: Auf iOS wird diese um safe-area-inset-top erhöht.
   * Der JS-Code liest diesen Wert per getComputedStyle aus.
   */
  --nav-h: 64px;

  /* Z-Index Stack – bewusst geordnet */
  --z-base:    1;
  --z-nav:     1000;   /* Header */
  --z-menu:    999;    /* Offcanvas (unter Header-z, da im selben Stacking Context) */
  --z-overlay: 998;    /* Dimm-Overlay */
  --z-cookie:  9999;   /* Cookie Banner – immer oben */
  --z-focus:   10000;  /* Skip-Link */
}

/* ══════════════════════════════════════════════════════════════
   BASE RESET
══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  /*
   * height:100% auf html + body ist nötig damit 100dvh
   * auf alten Android-Browsern korrekt funktioniert.
   */
  height: 100%;
}

body {
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100%;
  /*
   * 100svh = Small Viewport Height (ohne Browser-UI)
   * Fallback für Browser ohne dvh-Support.
   */
  min-height: 100svh;
}

/*
 * ── iOS BODY SCROLL LOCK ─────────────────────────────────────
 *
 * WARUM position:fixed?
 * iOS Safari: overflow:hidden allein stoppt das Scrollen NICHT.
 * Der Trick: body auf fixed setzen + top = -scrollPosition.
 *
 * ALLE vier Werte müssen gesetzt sein!
 * Ohne left:0 + right:0: Layout springt auf manchen iPhones.
 * Ohne width:100%: Body kollabiert auf seine Inhaltsbreite.
 * Das 'top' wird von JS per body.style.top = -scrollY gesetzt.
 *
 * ANDROID: overflow:hidden reicht. Aber position:fixed schadet nicht.
 * Samsung Internet: touch-action:none auf dem Overlay ist zusätzlich nötig (JS).
 */
body.nav-open {
  overflow: hidden;
  position: fixed;
  top: 0;    /* wird von JS überschrieben: body.style.top = -scrollY + 'px' */
  left: 0;   /* WICHTIG: ohne left:0 springt Layout auf iPhone 14 Pro */
  right: 0;  /* WICHTIG: ohne right:0 kollabiert Breite auf manchen Androids */
  width: 100%;
  /* touch-action via JS gesetzt (main.js) */
}

img, video, iframe, embed { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--f-display);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.5rem, 8vw, 7rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 2rem); }
p  { max-width: 70ch; margin-bottom: var(--space-md); }

a { color: var(--c-primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-accent); }

/* WCAG 2.2 AAA Focus – niemals outline:none ohne Ersatz! */
:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.nav :focus-visible,
#nav-menu :focus-visible {
  outline-color: #fff;
  outline-offset: 2px;
}

/* ── Utilities ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (max-width: 640px) {
  .container { padding: 0 1rem; }
}

.skip-link {
  position: absolute;
  top: -100px; left: 1rem;
  z-index: var(--z-focus);
  background: var(--c-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--c-secondary), var(--c-primary), var(--c-accent));
  z-index: calc(var(--z-nav) + 1);
  pointer-events: none;
  transition: width 0.1s linear;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════
   NAVIGATION
   ──────────────────────────────────────────────────────────────
   ARCHITEKTUR:
   Desktop (≥ 901px): .nav__links = inline Flex, sichtbar.
   Mobile  (≤ 900px): .nav__links = Offcanvas rechts, scrollbar.
   
   KEINE Styles die für beide Viewports gleichzeitig gelten
   außer: display:flex (das wird in Mobile-MQ überschrieben).
══════════════════════════════════════════════════════════════ */

/* ── HEADER BAR ──────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  background: rgba(6, 6, 10, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--c-border);
  transition: background var(--t-normal), box-shadow var(--t-normal);
  /* Kein overflow:hidden! Würde Menü clippen. */
}
.nav.scrolled {
  background: rgba(6, 6, 10, 0.98);
  box-shadow: 0 2px 20px rgba(255, 102, 0, 0.15);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
  gap: 1rem;
}

/* ── LOGO ─────────────────────────────────────────────────────── */
.nav__logo {
  font-family: var(--f-display);
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  color: var(--c-text);
  text-shadow: var(--shadow-text-glow);
  flex-shrink: 0;
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}
.nav__logo span { color: var(--c-primary); }
.nav__logo:hover, .nav__logo:focus { color: var(--c-text); }

/* ══════════════════════════════════════════════════════════════
   DESKTOP NAV (≥ 901px)
   .nav__links = normaler inline Flex-Container.
   Kein transform, kein fixed, kein pointer-events-Trick.
══════════════════════════════════════════════════════════════ */
.nav__links {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  margin: 0; padding: 0;
  /* Desktop-Defaults explizit – werden in Mobile-MQ überschrieben */
  position: static;
  transform: none;
  pointer-events: auto;
  background: transparent;
  overflow: visible;
  border: none;
  width: auto; height: auto;
}
.nav__links::before,
.nav__links::after { display: none; }

/* Desktop Nav-Link */
.nav__link {
  font-family: var(--f-heading);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav__link:hover {
  color: var(--c-primary);
  background: rgba(255, 102, 0, 0.1);
}
.nav__link.active,
.nav__link[aria-current="page"] {
  color: var(--c-primary);
  background: rgba(255, 102, 0, 0.12);
  font-weight: 600;
}

/* Desktop CTA */
.nav__cta { margin-left: 0.4rem; }
.nav__cta .btn {
  font-size: 0.88rem;
  padding: 0.5rem 1.1rem;
  min-height: 44px;
}

/* Desktop: Hamburger + Overlay aus */
.nav__burger  { display: none; }
.nav-overlay  { display: none; }

/* ══════════════════════════════════════════════════════════════
   MOBILE NAV (≤ 900px)
   ──────────────────────────────────────────────────────────────
   DESIGN-ENTSCHEIDUNGEN:
   
   1. Offcanvas von rechts (nicht von oben):
      – Nutzer erwarten es (iOS, Android native patterns)
      – Spart vertikalen Platz
      – Lässt den Seiteninhalt links sichtbar
   
   2. KEIN backdrop-filter auf dem Menü:
      – Auf iPhone 12/13 + Galaxy S21 (ältere GPUs) führt
        backdrop-filter zu starkem Ruckeln und 3-4s Freeze
      – Solider Hintergrund ist gleich gut, null Performance-Kosten
   
   3. height: 100dvh statt bottom:0:
      – bottom:0 auf iOS Safari = unter der Home-Indicator-Bar
      – 100dvh = exakter visueller Viewport ohne Browser-UI
      – Fallback: 100vh für Browser ohne dvh-Support
   
   4. overflow-y: scroll statt auto:
      – auto: iOS rendert manchmal keinen Scrollbalken-Indikator
      – scroll: erzwingt scrollbaren Bereich, kein "stuck" Verhalten
      – momentum-scrolling über touch-action: pan-y (modernes API)
   
   5. Menü-Höhe = 100vh - nav-h:
      – Verhindert dass Menü unter Header überlappt
      – top: var(--nav-h) + height: calc(100dvh - var(--nav-h))
      – Statt top + bottom, weil bottom:0 mit safe-area kollidiert
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── NAV INNER: Logo + Burger ─────────────────────────────── */
  .nav__inner {
    padding: 0 1rem;
    gap: 0.75rem;
  }
  .nav__logo {
    font-size: 1.5rem; /* Kleiner auf Mobile damit Burger Platz hat */
  }

  /* ── HAMBURGER BUTTON ─────────────────────────────────────── */
  .nav__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.5.5 AAA: Mindest-Trefferzone 44×44px */
    width: 44px;
    height: 44px;
    /* Padding erhöht tatsächliche Trefferzone auf Touch */
    padding: 0;
    flex-shrink: 0;
    background: rgba(255, 102, 0, 0.1);
    border: 1.5px solid rgba(255, 102, 0, 0.4);
    border-radius: var(--r-md);
    cursor: pointer;
    position: relative;
    /* Über dem Menü (Overlay ist z-index:998) */
    z-index: calc(var(--z-nav) + 1);
    /* iOS: kein blaues Tap-Highlight */
    -webkit-tap-highlight-color: transparent;
    /* Android: sofortiges visuelles Feedback */
    touch-action: manipulation;
    transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
    /* GPU-Layer für flüssige Transitions */
    will-change: transform;
  }
  .nav__burger:hover,
  .nav__burger:active {
    background: rgba(255, 102, 0, 0.2);
    border-color: var(--c-primary);
  }
  .nav__burger:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(255, 102, 0, 0.25);
  }

  /* Faust-Elemente (rein dekorativ) */
  .nav__burger::before,
  .nav__burger::after {
    content: '';
    display: block;
    position: absolute;
    background: var(--c-primary);
    left: 11px;
    pointer-events: none;
    transition: opacity var(--t-fast), transform var(--t-fast);
  }
  .nav__burger::before {
    width: 22px; height: 13px;
    bottom: 7px;
    border-radius: 3px 3px 5px 5px;
  }
  .nav__burger::after {
    width: 22px; height: 9px;
    bottom: 18px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, var(--c-secondary), var(--c-primary));
  }
  .nav__burger .fist-knuckle-1 {
    display: block; position: absolute;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--c-accent);
    bottom: 23px; left: 11px;
    box-shadow: 5px 0 0 var(--c-accent), 10px 0 0 var(--c-accent), 15px 0 0 var(--c-accent);
    pointer-events: none;
    transition: opacity var(--t-fast);
  }
  .nav__burger .fist-knuckle-2 {
    display: block; position: absolute;
    width: 7px; height: 5px;
    border-radius: 3px 3px 0 0;
    background: var(--c-primary);
    bottom: 27px; left: 25px;
    pointer-events: none;
    transition: opacity var(--t-fast);
  }
  .nav__burger .fist-thumb {
    display: block; position: absolute;
    width: 7px; height: 10px;
    border-radius: 4px 2px 2px 4px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
    left: 4px; bottom: 11px;
    transform: rotate(-10deg);
    pointer-events: none;
    transition: opacity var(--t-fast);
  }

  /* OPEN STATE: × statt Faust */
  .nav__burger.open {
    background: rgba(255, 102, 0, 0.2);
    border-color: var(--c-primary);
    box-shadow: 0 0 16px rgba(255, 102, 0, 0.4);
  }
  .nav__burger.open::before {
    content: '×';
    width: auto; height: auto;
    inset: 0; left: 0;
    background: none;
    color: var(--c-primary);
    font-size: 2rem;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    bottom: auto;
    border-radius: 0;
  }
  .nav__burger.open::after,
  .nav__burger.open .fist-thumb,
  .nav__burger.open .fist-knuckle-1,
  .nav__burger.open .fist-knuckle-2 {
    opacity: 0;
    pointer-events: none;
  }

  /* ── OVERLAY ──────────────────────────────────────────────── */
  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: rgba(0, 0, 0, 0.65);
    opacity: 0;
    visibility: hidden;
    /* touch-action:none verhindert Scroll-Through auf Android */
    touch-action: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Transition */
    transition: opacity var(--t-menu-open), visibility var(--t-menu-open);
  }
  .nav-overlay.is-visible {
    opacity: 1;
    visibility: visible;
  }

  /* ══════════════════════════════════════════════════════════
     OFFCANVAS MENÜ – DER KERN DES FIXES
     ─────────────────────────────────────────────────────────
     HÖHE-BERECHNUNG:
     top: var(--nav-h)
     height: calc(100dvh - var(--nav-h))
     
     WARUM calc() statt bottom:0?
     – bottom:0 auf iOS Safari ≤ 15 ignoriert die Home-Indicator-Area
     – Das Menü überlappt mit dem Swipe-Bereich
     – Mit calc() + dvh ist die Höhe exakt richtig
     
     WARUM kein backdrop-filter?
     – Performance: auf Galaxy S21 + iPhone 12 (2020er GPUs) führt
       blur(20px) auf einem 100vh-Element zu messbarem Lag (30→15fps)
     – Lösung: solider Hintergrund, kleiner Top-Gradient für Tiefe
     
     WARUM overflow-y: scroll statt auto?
     – auto auf iOS: kein Scroll-Momentum-Indikator sichtbar
     – scroll: immer scrollbar, auch wenn Inhalt kurz ist
     – touch-action: pan-y ersetzt -webkit-overflow-scrolling:touch
       (veraltet seit iOS 13, 2019)
  ════════════════════════════════════════════════════════════ */
  .nav__links {
    /* POSITION */
    position: fixed;
    top: var(--nav-h);
    right: 0;
    left: auto;
    bottom: auto; /* NICHT bottom:0! */
    /*
     * HÖHE: Exakt vom Nav-Ende bis zum visuellen Viewport-Ende.
     * 100dvh = Dynamic Viewport Height (ohne Browser-URL-Bar).
     * Fallback: 100vh für Safari < 15.4 ohne dvh-Support.
     */
    height: calc(100vh - var(--nav-h));        /* Fallback */
    height: calc(100dvh - var(--nav-h));       /* Modern */
    /* Notch-Safe-Area am unteren Rand */
    padding-bottom: max(2rem, env(safe-area-inset-bottom, 1rem));

    /* BREITE */
    width: min(300px, 88vw);

    /* Z-INDEX: unter Nav-Header-Z, über Overlay */
    z-index: var(--z-menu);

    /* LAYOUT: vertikal, links-bündig */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    /* HINTERGRUND: solid, kein blur → Performance */
    background: var(--c-nav-menu-bg);
    /* Subtiler Gradient für visuellen Tiefeneindruck */
    background: linear-gradient(
      160deg,
      #0b0b12 0%,
      #09090f 60%,
      #0a0a0e 100%
    );

    /* PADDING: oben Luft, unten safe-area */
    padding-top: 1rem;

    /* SCROLL: modernes touch-scroll statt deprecated webkit */
    overflow-y: scroll; /* scroll statt auto: immer scrollbar */
    overflow-x: hidden;
    overscroll-behavior: contain; /* Verhindert Scroll-Chaining zum Body */
    /* touch-action: pan-y aktiviert Momentum-Scroll auf iOS/Android */
    touch-action: pan-y;
    /* Kein -webkit-overflow-scrolling:touch! Veraltet seit iOS 13 */

    /* BORDER */
    border-left: 1px solid rgba(255, 102, 0, 0.2);

    /* ANIMATION: GPU-beschleunigt via transform */
    transform: translateX(100%);
    transition: transform var(--t-menu-open);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    /* Verhindert flackerndes Rendern auf alten Android-Browsern */
    -webkit-transform: translateX(100%);
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  /* GEÖFFNET */
  .nav__links.open {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }

  /* Dekoratives Element unten im Menü */
  .nav__links::after {
    content: '🤘';
    display: block;
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    font-size: 3rem;
    opacity: 0.04;
    pointer-events: none;
    flex-shrink: 0;
  }

  /* ── MOBILE NAV-LINKS ─────────────────────────────────────── */
  /*
   * GRÖSSE: min-height:52px statt 44px.
   * Auf Mobile (Touchscreen) ist 44px das absolute Minimum.
   * 52px verbessert die Treffgenauigkeit erheblich,
   * besonders für ältere Nutzer und kleine Phones (SE).
   */
  .nav__link {
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    /* Ausreichend Padding für bequemes Tippen */
    padding: 0.9rem 1.25rem;
    /* min-height: Apple HIG empfiehlt 44pt, wir nehmen 52px */
    min-height: 52px;
    width: 100%;
    display: flex;
    align-items: center;
    color: var(--c-text-muted);
    border-left: 3px solid transparent;
    border-radius: 0; /* Im Offcanvas: keine runden Ecken nötig */
    /* Trennlinie zwischen Links */
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    white-space: nowrap;
    text-decoration: none;
    /* Sofortiges visuelles Feedback auf Touch */
    -webkit-tap-highlight-color: rgba(255, 102, 0, 0.1);
    touch-action: manipulation;
    transition: color var(--t-fast), background var(--t-fast),
                border-left-color var(--t-fast), padding-left var(--t-fast);
  }
  .nav__link:last-of-type {
    border-bottom: none;
  }
  .nav__link:hover,
  .nav__link:active {
    color: var(--c-primary);
    background: rgba(255, 102, 0, 0.07);
    border-left-color: var(--c-primary);
    padding-left: 1.75rem;
  }
  .nav__link.active,
  .nav__link[aria-current="page"] {
    color: var(--c-primary);
    background: rgba(255, 102, 0, 0.1);
    border-left-color: var(--c-primary);
    padding-left: 1.75rem;
    font-weight: 700;
  }

  /* Trennlinie nach letztem regulären Link, vor CTA */
  .nav__cta {
    margin-top: auto; /* Schiebt CTA nach unten */
    padding: 1rem 1rem 0;
    width: 100%;
    flex-shrink: 0;
    /* Trennlinie über CTA */
    border-top: 1px solid rgba(255, 102, 0, 0.15);
  }
  .nav__cta .btn {
    width: 100%;
    justify-content: center;
    font-size: 1.05rem;
    padding: 0.9rem;
    min-height: 52px;
  }

  /* ── EINBLEND-ANIMATION ───────────────────────────────────── */
  /* Links erscheinen mit Stagger-Effekt von rechts */
  .nav__links.open > li:nth-child(1) { animation: nav-in 0.28s ease 0.02s both; }
  .nav__links.open > li:nth-child(2) { animation: nav-in 0.28s ease 0.06s both; }
  .nav__links.open > li:nth-child(3) { animation: nav-in 0.28s ease 0.10s both; }
  .nav__links.open > li:nth-child(4) { animation: nav-in 0.28s ease 0.14s both; }
  .nav__links.open > li:nth-child(5) { animation: nav-in 0.28s ease 0.18s both; }
  .nav__links.open > li:nth-child(6) { animation: nav-in 0.28s ease 0.22s both; }
  .nav__links.open > li:nth-child(7) { animation: nav-in 0.28s ease 0.26s both; }
  .nav__links.open > li:nth-child(8) { animation: nav-in 0.28s ease 0.30s both; }

  @keyframes nav-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  /* ── IOS NOTCH / DYNAMIC ISLAND ──────────────────────────── */
  @supports (padding: env(safe-area-inset-top)) {
    .nav {
      /* Header wächst mit Safe-Area (Dynamic Island, Notch) */
      padding-top: env(safe-area-inset-top);
      height: calc(var(--nav-h) + env(safe-area-inset-top));
    }
    .nav__links {
      /* Offcanvas beginnt unterhalb des vergrößerten Headers */
      top: calc(var(--nav-h) + env(safe-area-inset-top));
      height: calc(100dvh - var(--nav-h) - env(safe-area-inset-top));
      height: calc(100vh  - var(--nav-h) - env(safe-area-inset-top)); /* Fallback */
    }
    /* main-content braucht mehr Platz */
    #main-content {
      padding-top: calc(var(--nav-h) + env(safe-area-inset-top));
    }
  }

  /* ── LANDSCAPE-MODUS (iPhone gedreht) ─────────────────────── */
  @media (orientation: landscape) and (max-height: 500px) {
    .nav__links {
      /* Im Querformat: Links kleiner, mehr Platz */
      padding-top: 0.5rem;
    }
    .nav__link {
      padding: 0.6rem 1.25rem;
      min-height: 44px;
      font-size: 1rem;
    }
    .nav__cta {
      padding-top: 0.5rem;
    }
  }

} /* Ende @media (max-width: 900px) */

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nav__links {
    transition: none !important;
  }
  .nav__links.open > li {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Expliziter Platz für fixed Nav ─────────────────────────── */
#main-content {
  padding-top: var(--nav-h);
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--f-heading);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.8rem 2rem;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--t-normal);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary {
  background: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
  color: #fff;
  box-shadow: var(--shadow-neon);
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 30px var(--c-primary-glow), 0 0 80px rgba(255,102,0,0.3);
  color: #fff;
}
.btn-primary:active { transform: translateY(0) scale(0.99); }
.btn-outline {
  background: transparent; color: var(--c-primary); border-color: var(--c-primary);
}
.btn-outline:hover { background: var(--c-primary); color: #fff; box-shadow: var(--shadow-neon-sm); transform: translateY(-2px); }
.btn-ghost { background: rgba(255,102,0,0.1); color: var(--c-text); border-color: var(--c-border); }
.btn-ghost:hover { background: rgba(255,102,0,0.2); border-color: var(--c-primary); }
.btn-lg   { padding: 1rem 2.5rem; font-size: 1.3rem; }
.btn-sm   { padding: 0.5rem 1.2rem; font-size: 0.9rem; }
.btn-full { width: 100%; justify-content: center; }
.btn-cta  { animation: pulse-glow 2.5s ease-in-out infinite; }

@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 20px var(--c-primary-glow), 0 0 60px rgba(255,102,0,0.2); }
  50%      { box-shadow: 0 0 40px var(--c-primary-glow), 0 0 100px rgba(255,102,0,0.4); }
}

/* ══════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding-top: var(--nav-h);
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(255,102,0,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(255,51,0,0.1) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 10% 60%, rgba(155,89,255,0.08) 0%, transparent 50%),
    linear-gradient(180deg, #06060a 0%, #0d0d14 50%, #06060a 100%);
}
.hero__grid {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(255,102,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,102,0,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at center, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at center, black 30%, transparent 100%);
  animation: grid-drift 20s linear infinite;
  pointer-events: none;
}
@keyframes grid-drift { from{transform:translateY(0)} to{transform:translateY(60px)} }
.hero__particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__content {
  position: relative; z-index: 2;
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  max-width: 1100px; width: 100%;
}
.hero__eyebrow {
  font-family: var(--f-heading);
  font-size: 0.9rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--c-primary); margin-bottom: var(--space-md);
  display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap;
  opacity: 0; animation: fade-up 0.8s ease forwards 0.3s;
}
.hero__title {
  font-family: var(--f-display);
  font-size: clamp(3rem, 12vw, 10rem); line-height: 0.9; letter-spacing: 0.02em;
  color: var(--c-text);
  text-shadow: 0 0 60px rgba(255,102,0,0.5), 0 0 120px rgba(255,102,0,0.2), 0 4px 20px rgba(0,0,0,0.8);
  opacity: 0; animation: fade-up 1s ease forwards 0.5s;
}
.hero__title .glow { color: var(--c-primary); text-shadow: 0 0 30px var(--c-primary), 0 0 80px rgba(255,102,0,0.8); }
.hero__subtitle {
  font-family: var(--f-heading);
  font-size: clamp(1rem, 2.5vw, 1.5rem); letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--c-text-muted); margin: var(--space-lg) 0;
  opacity: 0; animation: fade-up 1s ease forwards 0.8s;
}
.hero__subtitle strong { color: var(--c-accent); }
.hero__countdown {
  display: flex; justify-content: center; align-items: center;
  gap: 0.5rem; flex-wrap: nowrap; width: 100%; padding: 0 0.5rem;
  margin: var(--space-xl) 0; opacity: 0; animation: fade-up 1s ease forwards 1s;
}
.countdown__item { display: flex; flex-direction: column; align-items: center; min-width: 0; flex: 1; max-width: 80px; gap: var(--space-xs); }
.countdown__number { font-family: var(--f-display); font-size: clamp(1.8rem, 8vw, 4.5rem); line-height: 1; color: var(--c-primary); text-shadow: 0 0 20px var(--c-primary-glow); white-space: nowrap; }
.countdown__label { font-family: var(--f-heading); font-size: clamp(0.55rem, 2vw, 0.7rem); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-muted); }
.countdown__sep { font-family: var(--f-display); font-size: clamp(1.5rem, 5vw, 3rem); color: var(--c-primary); align-self: flex-start; padding-top: 0.2rem; flex-shrink: 0; animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; opacity: 0; animation: fade-up 1s ease forwards 1.2s; }
.hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--c-text-muted); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; animation: bounce 2s ease-in-out infinite 2s; z-index: 2; }
.hero__scroll::after { content: ''; width: 1px; height: 40px; background: linear-gradient(to bottom, var(--c-primary), transparent); }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* ── Sections ────────────────────────────────────────────────── */
.section { padding: var(--space-xxl) 0; position: relative; }
.section--dark    { background: var(--c-bg-2); }
.section--surface { background: var(--c-bg-3); }
.section__header  { text-align: center; margin-bottom: var(--space-xl); }
.section__eyebrow { font-family: var(--f-heading); font-size: 0.8rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--c-primary); margin-bottom: var(--space-sm); display: block; }
.section__title   { color: var(--c-text); margin-bottom: var(--space-md); }
.section__title .accent { color: var(--c-primary); }
.section__lead    { font-size: 1.1rem; color: var(--c-text-muted); max-width: 60ch; margin: 0 auto; }
.divider { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--c-primary), transparent); margin: var(--space-xl) 0; opacity: 0.4; }

/* ── Cards ───────────────────────────────────────────────────── */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--t-normal), box-shadow var(--t-normal), border-color var(--t-normal); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-neon), var(--shadow-card); border-color: var(--c-primary); }
.card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform var(--t-slow); }
.card:hover .card__img { transform: scale(1.05); }
.card__body { padding: var(--space-lg); }
.card__title { font-size: 1.3rem; margin-bottom: var(--space-sm); color: var(--c-text); }
.card__text  { color: var(--c-text-muted); font-size: 0.95rem; margin-bottom: var(--space-md); }
.card__meta  { font-size: 0.8rem; color: var(--c-text-dim); display: flex; gap: var(--space-md); }

/* ── Ticket Cards ────────────────────────────────────────────── */
.ticket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); }
.ticket-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--space-xl) var(--space-lg); text-align: center; position: relative; overflow: hidden; transition: all var(--t-normal); }
.ticket-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--c-primary), var(--c-secondary)); }
.ticket-card:hover { border-color: var(--c-primary); transform: translateY(-8px); box-shadow: var(--shadow-neon), var(--shadow-card); }
.ticket-card.featured { border-color: var(--c-primary); background: linear-gradient(145deg, var(--c-surface), rgba(255,102,0,0.08)); transform: scale(1.02); }
.ticket-card.featured:hover { transform: scale(1.02) translateY(-8px); }
.ticket-card__badge { position: absolute; top: 1.5rem; right: 1.5rem; font-family: var(--f-heading); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: var(--r-pill); background: var(--c-primary); color: #fff; }
.ticket-card__badge.limited { background: var(--c-error); }
.ticket-card__badge.vip { background: linear-gradient(135deg, #9b59ff, #6c3fff); }
.ticket-card__name  { font-family: var(--f-display); font-size: 1.8rem; color: var(--c-text); margin-bottom: var(--space-sm); }
.ticket-card__price { font-family: var(--f-display); font-size: 3.5rem; line-height: 1; color: var(--c-primary); text-shadow: var(--shadow-neon-sm); margin-bottom: var(--space-sm); }
.ticket-card__price sup { font-size: 1.5rem; vertical-align: super; }
.ticket-card__desc  { color: var(--c-text-muted); font-size: 0.9rem; margin-bottom: var(--space-lg); }
.ticket-card__features { text-align: left; margin-bottom: var(--space-lg); }
.ticket-card__feature { display: flex; align-items: center; gap: var(--space-sm); padding: 0.4rem 0; font-size: 0.9rem; color: var(--c-text-muted); border-bottom: 1px solid rgba(255,255,255,0.05); }
.ticket-card__feature::before { content: '✓'; color: var(--c-primary); font-weight: 700; flex-shrink: 0; }
.ticket-card__availability { margin-bottom: var(--space-lg); font-size: 0.8rem; color: var(--c-text-muted); }
.progress-bar { background: rgba(255,255,255,0.1); border-radius: var(--r-pill); height: 6px; overflow: hidden; margin-top: 0.5rem; }
.progress-bar__fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--c-primary), var(--c-secondary)); transition: width 1s ease; }
.progress-bar__fill.critical { background: var(--c-error); }

/* ── Lineup ──────────────────────────────────────────────────── */
.lineup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-md); }
.lineup-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--space-md); text-align: center; transition: all var(--t-normal); }
.lineup-card:hover { border-color: var(--c-primary); box-shadow: var(--shadow-neon-sm); transform: translateY(-4px); }
.lineup-card.headliner { border-color: var(--c-primary); background: linear-gradient(145deg, var(--c-surface), rgba(255,102,0,0.1)); }
.lineup-card__name { font-family: var(--f-display); font-size: 1.3rem; color: var(--c-text); margin-bottom: 0.3rem; }
.lineup-card.headliner .lineup-card__name { font-size: 1.8rem; color: var(--c-primary); }
.lineup-card__meta { font-size: 0.8rem; color: var(--c-text-muted); }
.lineup-card__stage { font-size: 0.75rem; font-weight: 600; color: var(--c-text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.3rem; }
.stage-tabs { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
.stage-tab { font-family: var(--f-heading); font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.6rem 1.2rem; border-radius: var(--r-pill); border: 1px solid var(--c-border); background: transparent; color: var(--c-text-muted); cursor: pointer; transition: all var(--t-fast); min-height: 44px; display: inline-flex; align-items: center; touch-action: manipulation; }
.stage-tab:hover, .stage-tab.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: var(--shadow-neon-sm); }

/* ── Forms ───────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-lg); }
.form-label { display: block; font-family: var(--f-heading); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 0.5rem; }
.form-label .required { color: var(--c-error); margin-left: 2px; }
.form-control { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-text); font-family: var(--f-body); font-size: 16px; padding: 0.85rem 1.1rem; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); outline: none; -webkit-appearance: none; appearance: none; }
.form-control:focus { border-color: var(--c-primary); background: rgba(255,102,0,0.06); box-shadow: 0 0 0 3px rgba(255,102,0,0.2); }
.form-control::placeholder { color: var(--c-text-dim); }
textarea.form-control { resize: vertical; min-height: 120px; }
.form-error { color: var(--c-error); font-size: 0.82rem; margin-top: 0.4rem; }
.form__honeypot { display: none !important; visibility: hidden !important; }

/* ── Newsletter ──────────────────────────────────────────────── */
.newsletter-section { background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,102,0,0.08) 0%, transparent 70%), var(--c-bg-2); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); padding: var(--space-xxl) 0; text-align: center; }
.newsletter-form { display: flex; gap: var(--space-sm); max-width: 500px; margin: var(--space-lg) auto 0; }
.newsletter-form .form-control { flex: 1; }
.nl-hint-text { font-size: 0.8rem; color: var(--c-text-muted); margin-top: 0.75rem; }

/* ── Stats ───────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-lg); text-align: center; }
.stat-item__number { font-family: var(--f-display); font-size: clamp(2.5rem, 5vw, 4rem); color: var(--c-primary); text-shadow: var(--shadow-neon-sm); line-height: 1; }
.stat-item__label  { font-family: var(--f-heading); font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-text-muted); margin-top: 0.5rem; }

/* ── Cookie Banner ───────────────────────────────────────────── */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-cookie); background: var(--c-bg-3); border-top: 1px solid var(--c-border); padding: var(--space-lg); transform: translateY(100%); transition: transform var(--t-slow); box-shadow: 0 -4px 30px rgba(255,102,0,0.15); }
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner[hidden] { display: none !important; }
.cookie-banner__inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.cookie-banner__text { flex: 1; font-size: 0.9rem; color: var(--c-text-muted); margin: 0; }
.cookie-banner__text a { color: var(--c-primary); }
.cookie-banner__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* ── Footer ──────────────────────────────────────────────────── */
.footer { background: var(--c-bg-2); border-top: 1px solid var(--c-border); padding: var(--space-xxl) 0 var(--space-xl); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-xl); margin-bottom: var(--space-xl); }
.footer__logo { font-family: var(--f-display); font-size: 2rem; color: var(--c-text); text-shadow: var(--shadow-text-glow); margin-bottom: var(--space-md); display: block; text-decoration: none; }
.footer__logo span { color: var(--c-primary); }
.footer__desc { color: var(--c-text-muted); font-size: 0.9rem; max-width: 30ch; }
.footer__heading { font-family: var(--f-heading); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-primary); margin-bottom: var(--space-md); }
.footer__links li { margin-bottom: 0.5rem; }
.footer__links a { color: var(--c-text-muted); font-size: 0.9rem; transition: color var(--t-fast); }
.footer__links a:hover { color: var(--c-primary); }
.footer__bottom { border-top: 1px solid var(--c-border); padding-top: var(--space-lg); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-md); font-size: 0.85rem; color: var(--c-text-dim); }
.social-links { display: flex; gap: var(--space-md); }
.social-link { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255,102,0,0.1); border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-text-muted); font-size: 1rem; transition: all var(--t-fast); text-decoration: none; touch-action: manipulation; }
.social-link:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: var(--shadow-neon-sm); }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert { padding: var(--space-md) var(--space-lg); border-radius: var(--r-md); font-size: 0.95rem; margin-bottom: var(--space-md); border-left: 4px solid; display: flex; align-items: flex-start; gap: var(--space-sm); }
.alert-success { background: rgba(0,255,136,0.08); border-color: var(--c-success); color: var(--c-success); }
.alert-error   { background: rgba(255,51,85,0.08);  border-color: var(--c-error);   color: var(--c-error); }
.alert-warning { background: rgba(255,204,0,0.08);  border-color: var(--c-warning); color: var(--c-warning); }
.alert-info    { background: rgba(0,212,255,0.08);  border-color: var(--c-neon-blue); color: var(--c-neon-blue); }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-question { width: 100%; background: none; border: none; cursor: pointer; text-align: left; display: flex; justify-content: space-between; align-items: center; padding: var(--space-lg) 0; font-family: var(--f-heading); font-size: 1.05rem; color: var(--c-text); transition: color var(--t-fast); gap: var(--space-md); min-height: 44px; touch-action: manipulation; }
.faq-question:hover { color: var(--c-primary); }
.faq-icon { width: 24px; height: 24px; flex-shrink: 0; border: 2px solid currentColor; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; transition: transform var(--t-normal), background var(--t-normal); }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0,1,0,1); }
.faq-item.open .faq-answer { max-height: 500px; transition: max-height 1s cubic-bezier(1,0,1,0); }
.faq-answer-inner { padding-bottom: var(--space-lg); color: var(--c-text-muted); line-height: 1.7; }

/* ── News ────────────────────────────────────────────────────── */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-lg); }
.news-card__date { font-family: var(--f-heading); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 0.5rem; }

/* ── Gallery ─────────────────────────────────────────────────── */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-sm); }
.gallery-item { overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4/3; cursor: zoom-in; position: relative; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow), filter var(--t-normal); filter: brightness(0.7); }
.gallery-item:hover img { transform: scale(1.08); filter: brightness(1); }

/* ── Animationen ─────────────────────────────────────────────── */
@keyframes fade-up { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── Scroll Top ──────────────────────────────────────────────── */
.scroll-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 500; width: 52px; height: 52px; border-radius: 50%; background: var(--c-bg-2); border: 2px solid rgba(255,102,0,0.4); color: var(--c-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform var(--t-normal), box-shadow var(--t-normal); box-shadow: 0 0 15px rgba(255,102,0,0.2), 0 4px 20px rgba(0,0,0,0.5); padding: 0; overflow: visible; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.scroll-top[hidden] { display: none !important; }
.scroll-top:hover { transform: translateY(-4px) scale(1.08); box-shadow: 0 0 30px rgba(255,102,0,0.6), 0 6px 24px rgba(0,0,0,0.6); }
.scroll-top__ring { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--c-primary); animation: ring-spin 2s linear infinite; opacity: 0.6; }
.scroll-top__ring--2 { inset: -6px; border-top-color: rgba(255,102,0,0.3); animation: ring-spin 3s linear infinite reverse; opacity: 0.4; }
@keyframes ring-spin { to{transform:rotate(360deg)} }
.scroll-top__icon { position: relative; z-index: 1; line-height: 0; }
.spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid rgba(255,102,0,0.3); border-top-color: var(--c-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .section { padding: 3rem 0; }
  .section__title { font-size: clamp(2rem, 7vw, 3rem); }
  .news-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .ticket-grid { grid-template-columns: 1fr; }
  .ticket-card.featured { transform: none; }
  .footer__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer__bottom { flex-direction: column; text-align: center; gap: 0.75rem; }
}
@media (max-width: 520px) {
  .newsletter-form { flex-direction: column; max-width: 100%; }
  .newsletter-form .form-control, .newsletter-form .btn { width: 100%; }
}
@media (max-width: 600px) {
  .hero__actions { flex-direction: column; align-items: center; width: 100%; padding: 0 1rem; }
  .hero__actions .btn { width: 100%; max-width: 320px; justify-content: center; }
}
@media (max-width: 480px) {
  .hero__countdown { padding: 0 0.25rem; gap: 0.25rem; }
  .countdown__sep { font-size: clamp(1.2rem, 4vw, 2rem); }
}
@media (max-width: 375px) {
  /* iPhone SE / kleine Androids */
  .nav__logo { font-size: 1.3rem; }
  :root { --nav-h: 60px; }
}
@media (max-width: 640px) {
  .scroll-top { bottom: 1.25rem; right: 1.25rem; width: 46px; height: 46px; }
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .nav, .cookie-banner, .newsletter-section, .scroll-top, .scroll-progress { display: none !important; }
  body { background: #fff; color: #000; }
  #main-content { padding-top: 0; }
}
	
/* ═══════════════════════════════════════════════════════════
   FOOTER COUNTER FIX - Kompakte Variante
   ═══════════════════════════════════════════════════════════
   
   Füge diese CSS in dein footer.php oder main.css ein!
   ═══════════════════════════════════════════════════════════ */

/* STANDARD Counter Fix */
.footer-counter,
.countdown-timer,
.event-countdown,
.ticket-counter {
    font-size: 0.85rem !important; /* Kleiner */
    padding: 0.5rem 1rem !important; /* Kompakter */
    max-width: 100% !important;
}

/* Counter Ziffern */
.footer-counter .counter-digit,
.footer-counter .countdown-digit,
.countdown-timer .digit,
.event-countdown .time-unit {
    font-size: 1.2rem !important; /* Ziffern kleiner */
    min-width: 35px !important; /* Schmaler */
    padding: 0.3rem 0.5rem !important;
}

/* Counter Labels */
.footer-counter .counter-label,
.countdown-timer .label,
.event-countdown .label {
    font-size: 0.65rem !important; /* Labels mini */
    letter-spacing: 0.05em;
}

/* Counter Container */
.footer-counter-wrapper,
.countdown-container {
    max-width: 600px !important; /* Begrenzt Breite */
    margin: 0 auto !important;
    transform: scale(0.85); /* Gesamt-Skalierung */
    transform-origin: center;
}

/* Responsive noch kleiner */
@media (max-width: 768px) {
    .footer-counter-wrapper,
    .countdown-container {
        transform: scale(0.75) !important;
    }
    
    .footer-counter .counter-digit,
    .countdown-timer .digit {
        font-size: 1rem !important;
        min-width: 30px !important;
    }
}

/* Falls Counter ID oder spezifische Klasse hat */
#footer-countdown {
    font-size: 0.8rem !important;
}

/* Glow reduzieren wenn zu stark */
.footer-counter,
.countdown-timer {
    box-shadow: 0 0 15px rgba(255,102,0,0.2) !important; /* Weniger Glow */
}

/* ═══════════════════════════════════════════════════════════
   MEGA KOMPAKT - Falls noch kleiner gewünscht
   ═══════════════════════════════════════════════════════════ */
   
.footer-counter.compact,
.countdown-timer.compact {
    transform: scale(0.7);
    transform-origin: center;
}