/* ==========================================================================
   HELIX – Video-Hero der Startseite (wird nur von landingpage.php geladen)
   Aufbau: schlanke Kopfleiste (Logo · Links · Sprache) + vollflächiges Hintergrundvideo
   mit Logo, Text und Buttons. Farben/Schriften kommen aus helix.css (:root-Variablen).
   ========================================================================== */

:root{
  --vnav-h: 64px;     /* Höhe der Kopfleiste */
  --vwrap:  1180px;   /* Inhaltsbreite von Kopfleiste und Hero-Text (linksbündig auf einer Linie) */
}
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
/* Sprungziele nicht unter der festen Kopfleiste verstecken (+18 px, weil die Karten beim Einblenden noch 18 px nach oben wandern) */
#nextEvent, #lineup{ scroll-margin-top: calc(var(--vnav-h) + 36px); }

/* ── Kopfleiste ────────────────────────────────────────────────────────── */
.vnav{
  position:sticky; top:0; z-index:200;
  background:rgba(5,7,10,.78);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--border);
}
.vnav-inner{
  max-width:var(--vwrap); margin:0 auto; padding:0 20px;
  height:var(--vnav-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.vnav-brand{ display:flex; align-items:center; flex-shrink:0; }
/* Logo.png hat rundherum Leuchten eingebaut: die Schrift selbst ist nur etwa halb so hoch wie das Bild */
.vnav-brand img{ height:54px; width:auto; }

.vnav-links{
  display:flex; align-items:center; gap:30px;
  font-family:var(--font-display); font-weight:600; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase;
}
.vnav-links a{ color:var(--muted); text-decoration:none; transition:color .15s ease; }
.vnav-links a:hover, .vnav-links a:focus-visible{ color:var(--accent); }
/* Tickets-Button: gleicher Outline-Stil wie die Buttons in den Karten (Neon-Rahmen, dunkel, grüne Schrift, harter Schatten) */
.vnav-links a.cta{
  color:var(--accent); background:transparent; font-weight:700;
  border:2px solid var(--accent); border-radius:var(--r-sm);
  padding:7px 18px; box-shadow:var(--hard-shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease;
}
.vnav-links a.cta:hover, .vnav-links a.cta:focus-visible{
  color:var(--accent); background:rgba(166,240,0,.1);
  transform:translate(-2px,-2px); box-shadow:5px 5px 0 rgba(0,0,0,.85);
}
.vnav-links a.cta:active{ transform:translate(0,0); box-shadow:1px 1px 0 rgba(0,0,0,.85); }

/* Hamburger (nur mobil sichtbar) */
.vnav-toggle{
  display:none; position:relative; width:44px; height:44px; margin-right:-8px;
  background:none; border:0; padding:0; cursor:pointer; color:var(--text);
  -webkit-tap-highlight-color:transparent;
}
.vnav-toggle span{
  position:absolute; left:11px; right:11px; height:2px; border-radius:2px; background:currentColor;
  transition:transform .2s ease, opacity .2s ease, top .2s ease;
}
.vnav-toggle span:nth-child(1){ top:15px; }
.vnav-toggle span:nth-child(2){ top:21px; }
.vnav-toggle span:nth-child(3){ top:27px; }
.vnav.open .vnav-toggle span:nth-child(1){ top:21px; transform:rotate(45deg); }
.vnav.open .vnav-toggle span:nth-child(2){ opacity:0; }
.vnav.open .vnav-toggle span:nth-child(3){ top:21px; transform:rotate(-45deg); }
.vnav-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; border-radius:8px; }

/* Auf kleineren Bildschirmen etwas kompakter; unter 800 px Breite wird die Leiste zum ausklappbaren Hamburger-Menü. */
@media (max-width:1240px){
  .vnav-links{ gap:22px; letter-spacing:.1em; font-size:13px; }
}
@media (max-width:800px){
  .vnav-toggle{ display:block; }
  /* gleiches <nav> wird zum ausklappbaren Menü unter der Leiste */
  .vnav-links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    padding:6px 20px 20px;
    max-height:calc(100vh - var(--vnav-h)); overflow-y:auto;
    background:rgba(5,7,10,.97);
    border-bottom:1px solid var(--border);
    font-size:18px; letter-spacing:.14em;
  }
  .vnav.open .vnav-links{ display:flex; }
  .vnav-links > a{ width:100%; padding:14px 0; border-bottom:1px solid var(--border); }
  .vnav-links a.cta{ width:auto; margin-top:16px; border:2px solid var(--accent); padding:10px 22px; }
  .vnav-links .lang-switch{ margin-top:18px; }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.vhero{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center;
  min-height:560px;
  height:calc(100vh - var(--vnav-h));
  height:calc(100svh - var(--vnav-h));
  background:var(--bg);
}
/* Poster (sofort sichtbar, auch ohne Video/JS) und Video liegen deckend übereinander */
.vhero-poster{ display:block; position:absolute; inset:0; z-index:-2; }
.vhero-poster img, .vhero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.vhero-video{ z-index:-2; opacity:0; transition:opacity 1s ease; background:transparent; }
.vhero.is-playing .vhero-video{ opacity:1; }

/* Abdunklung für lesbaren Text + weicher Übergang in den Seitenhintergrund */
.vhero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(0deg, var(--bg) 0%, rgba(5,7,10,0) 24%),
    linear-gradient(90deg, rgba(5,7,10,.78) 0%, rgba(5,7,10,.46) 40%, rgba(5,7,10,.08) 75%, rgba(5,7,10,0) 100%);
}

/* Die vier Zeilen (Pille · Logo · Text · Button) stehen untereinander mit EXAKT gleichem sichtbaren Abstand --vgap.
   Gemessen wird immer von Kante zu Kante dessen, was man sieht: Das Logo-PNG hat 6 px transparenten Rand und
   die Textzeile Luft über/unter den Buchstaben – beides wird unten mit negativen Rändern herausgerechnet. */
.vhero-inner{
  --logo-w: clamp(250px, 42vw, 560px);
  --vgap: 28px;
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--vgap);
  width:100%; max-width:var(--vwrap); margin:0 auto;
  padding:40px 20px 76px;   /* unten Platz für den Pfeil */
}
.vhero-inner .badge{
  text-transform:none;   /* Schreibweise wie im Text: „HARD TECHNO • TRANCE & more“ (more klein) */
  font-size:12px; letter-spacing:.18em; padding:7px 15px;
  background:rgba(166,240,0,.08);
}
.vhero-logo{ margin:calc(var(--logo-w) * -6 / 598) 0; line-height:0; }   /* 6 px von 598 px Logobreite = transparenter Rand */
.vhero-logo img{ width:var(--logo-w); height:auto; }   /* weißes Logo, bewusst ohne Schatten */
.vhero-text{
  /* Feste Schriftgröße + Ränder in px: Luft über der Oberkante der Buchstaben bzw. unter der Grundlinie herausgerechnet
     (Browser runden die Schrift auf ganze Pixel – darum nicht in em, sonst weicht der Abstand je nach Größe um 1–2 px ab). */
  max-width:31em; margin:-5px 0 -8.5px;
  font-size:19px; line-height:1.5; color:var(--text);
  text-shadow:0 1px 16px rgba(0,0,0,.65);
}
.vhero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:0; }

.vbtn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; border-radius:var(--r-pill);
  border:1px solid transparent;
  font-family:var(--font-display); font-weight:700; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none; white-space:nowrap;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.vbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.vbtn-primary{ background:var(--accent); color:var(--accent-ink); box-shadow:0 0 30px var(--accent-glow); }
.vbtn-primary:hover{ background:#b4ff1a; transform:translateY(-2px); box-shadow:0 0 40px var(--accent-glow); }
.vbtn-ghost{
  background:rgba(5,7,10,.5); color:var(--text); border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.vbtn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* Pfeil nach unten am unteren Rand (Desktop und Handy): springt zur Countdown-Karte */
.vhero-scroll{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  color:rgba(238,247,230,.7); text-decoration:none;
  transition:color .15s ease;
}
.vhero-scroll:hover, .vhero-scroll:focus-visible{ color:var(--accent); }
.vhero-scroll:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.vhero-scroll::after{
  content:""; width:12px; height:12px; margin-top:-5px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}
@media (prefers-reduced-motion:no-preference){
  .vhero-scroll::after{ animation:vscroll 1.8s ease-in-out infinite; }
}
@keyframes vscroll{ 0%,100%{ transform:translateY(0) rotate(45deg); opacity:.55; } 50%{ transform:translateY(6px) rotate(45deg); opacity:1; } }

/* Hochformat / Handy: 9:16-Video, Text über die ganze Breite, kräftigere Abdunklung */
@media (max-aspect-ratio:1/1), (max-width:760px){
  .vhero::after{
    background:linear-gradient(180deg,
      rgba(5,7,10,.40) 0%, rgba(5,7,10,.52) 40%, rgba(5,7,10,.78) 80%, var(--bg) 100%);
  }
}
@media (max-width:760px){
  .vhero{ min-height:520px; }
  .vhero-inner{ --vgap:24px; padding:40px 20px 84px; }
  .vhero-text{ font-size:16px; margin:-6px 0 -6px; }
}
@media (max-width:520px){
  .vhero-actions{ flex-direction:column; align-items:flex-start; }
}

/* Sanftes Einblenden beim Laden (nur ohne „Bewegung reduzieren“) */
@media (prefers-reduced-motion:no-preference){
  .vhero-inner > *{ opacity:0; transform:translateY(16px); animation:vrise .8s cubic-bezier(.2,.7,.2,1) forwards; }
  .vhero-inner > :nth-child(2){ animation-delay:.08s; }
  .vhero-inner > :nth-child(3){ animation-delay:.16s; }
  .vhero-inner > :nth-child(4){ animation-delay:.24s; }
}
@keyframes vrise{ to{ opacity:1; transform:none; } }