/* ================= Starfield Hintergrund ================= */
#stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black; /* Basisfarbe */
  overflow: hidden;
  z-index: 0;
}

.star {
  position: absolute;
  border-radius: 50%;
  opacity: 0.8;
  animation: twinkle 2s infinite ease-in-out alternate;
}

@keyframes twinkle {
  0%   { opacity: 0.3; transform: scale(0.8); }
  50%  { opacity: 1;   transform: scale(1); }
  100% { opacity: 0.3; transform: scale(0.8); }
}

/* ============ Shooting Stars ============ */
.shooting-star {
  position: fixed;
  width: 2px;               /* Sternkörper */
  background: white;
  border-radius: 50%;
  opacity: 1;
  z-index: 3;

  /* Drehung aus JS */
  transform: rotate(var(--angle));

  /* Schweif */
  box-shadow: 
       0 0 6px 2px rgba(255,255,255,0.9),
       0 0 12px 4px rgba(120,120,255,0.7),
       0 0 20px 8px rgba(180,80,255,0.6);
}

/* Animation: bewegt sich entlang dx/dy */
@keyframes shoot {
  from {
    transform: translate(0,0) rotate(var(--angle));
    opacity: 1;
  }
  to {
    transform: translate(var(--dx), var(--dy)) rotate(var(--angle));
    opacity: 0;
  }
}


/* ================= General Reset ================= */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: Orbitron, sans-serif;
 background-color: transparent; /* transparent, damit #stars sichtbar bleibt */
 color: #fff;
 scroll-behavior: smooth;
 line-height: 1.6;
 position: relative;
 z-index: 1;
}

/* ================= Social Icons ================= */
.social-icons-header {
 position: fixed;
 top: 0.5rem;
 right: 2rem;
 display: flex;
 gap: 12px;
 z-index: 9999;
}

.social-icons-header img {
 width: 40px;
 height: 40px;
 transition: transform 0.2s;
}

.social-icons-header img:hover {
 transform: scale(1.2);
}

/* ================= Navigation ================= */

/* Hero Section Offset, damit Anker-Links nicht unter dem Header landen */

.hero-section {
  scroll-margin-top: 80px; /* Höhe deines fixierten Headers */
}


/* Navigation immer über Hero und Sterne */
.nav-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100; /* hoch genug, damit sie über Video und Sternenhimmel liegt */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0.5rem 3rem;
  background-color: rgba(0, 0, 0, 0.6);
}


.nav-container ul {
 display: flex;
 flex-direction: row;
 gap: 1.5rem;
 list-style: none;
}

.nav-container ul li a {
 text-decoration: none;
 color: #fff;
 font-weight: 500;
 padding: 0.5rem 0;
 transition: color 0.3s ease;
}

.nav-container ul li a:hover {
 color: #f39c12;
}

/* Spezieller Style für den Stagerider-PDF-Link */
#reserved-main-nav a.pdf-link {
  color: #fff;           /* Link bleibt weiß */
  text-decoration: none; /* optional: keine Unterstreichung */
}

#reserved-main-nav a.pdf-link:hover {
  color: #f39c12;        /* Hover-Farbe wie andere Links */
}

#reserved-main-nav a.pdf-link:visited,
#reserved-main-nav a.pdf-link:active {
  color: #fff;           /* Verhindert Blau nach Klick */
}


/* Hamburger Button (Mobile) */
#reserved-mnav-button {
 display: none;
 font-size: 2rem;
 background: none;
 border: none;
 color: #fff;
 cursor: pointer;
 margin-right: 1rem;
}


/* ================= Hero Section ================= */
.hero-section {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-top: -180px;  /* Desktop: Video unter fixiertem Header */
  padding-top: 0;
  z-index: 1;
}

.hero-video {
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
  object-position: center top;
  display: block;
}

/* ================= Hero Section ================= */

.hero-section {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 80px; /* Platz für Header + etwas Abstand */
  z-index: 1;
}


.hero-video {
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
  object-position: center top;
  display: block;
}


.hero-video {
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
  object-position: center top;
  display: block;
}

/* ================= Hero Text Section ================= */
.hero-text-section {
  width: 100%;
  text-align: center;
  margin-top: -310px; /* Text näher ans Video rücken, Desktop-Wert */
}

.hero-text h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 4rem;
  color: #fff;
  text-shadow: 0 0 12px rgba(0,0,0,0.7);
  margin: 0;
}

/* ================= Hero Text Animation ================= */
.hero-text-section {
  opacity: 0;               /* unsichtbar starten */
  transform: translateY(30px); /* leicht nach unten verschoben */
  transition: opacity 1s ease-out, transform 1s ease-out; /* sanfte Animation */
}

.hero-text-section.visible {
  opacity: 1;               /* sichtbar */
  transform: translateY(0); /* wieder an Originalposition */
}



/* ================= Mobile / Tablet Anpassungen ================= */
@media (max-width: 1024px) {
  .hero-section {
    margin-top: -80px; /* Video unter Header */
  }
  .hero-text-section {
    margin-top: -150px; /* Text näher ans Video, Tablet */
  }
  .hero-text h1 {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .hero-section {
    margin-top: 40px; /* Video unter Header, Mobile */
  }
  .hero-text-section {
    margin-top: -110px; /* Text näher ans Video, Mobile */
  }
  .hero-text h1 {
    font-size: 1.8rem;
  }
}


/* ================= Sections ================= */
section {
 padding: 6rem 2rem;
 max-width: 1200px;
 margin: 0 auto;
 position: relative; /* für z-index */
 z-index: 1;         /* über Sternenhimmel */
}

.text-content {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 20px;
 text-align: justify;
 font-size: 1rem;
 line-height: 1.6;
 color: #fff;
}

.text-content h2 {
 font-size: 2rem;
 text-align: left;
 margin-bottom: 1rem;
}

.text-content h3 {
 font-size: 1.4rem;
 text-align: left;
 margin: 0.5rem 0;
}

.text-content h4 {
 font-size: 1.2rem;
 text-align: left;
 margin: 0.3rem 0;
}

.text-content p,
.text-content ul,
.text-content li {
 margin-bottom: 0.8rem;
 color: #fff;
}

.about-content {
 display: flex;
 flex-wrap: wrap;
 gap: 2rem;
 justify-content: center;
 align-items: flex-start;
}

.about-text {
 flex: 1 1 400px;
}

.about-image img {
 max-width: 100%;
 height: auto;
 border-radius: 10px;
}

/* Scroll Margin für Ankerpunkte */
section {
 scroll-margin-top: 80px; /* fixiertes Menü */
}

/* ================= Playlist List ================= */
.playlist-list {
 list-style: none; /* keine Aufzählungszeichen */
 padding-left: 0; /* kein Einzug links */
 margin: 0; /* verhindert zusätzlichen Abstand */
}

.playlist-list li {
 margin-bottom: 0.5rem; /* Abstand zwischen den Songs */
}

/* ================= Sektionen Allgemein ================= */
section {
  padding: 4rem 2rem;  /* Desktop-Grundabstand */
  max-width: 1200px;
  margin: 0 auto;
}

/* Hero Section */
.hero-section {
  height: 120vh; /* leicht verkleinert für kompakteres Layout */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Text Content Sektionen */
.text-content {
  padding: 0 20px;
  font-size: 1rem;
  line-height: 1.6;
  text-align: justify;
}

.text-content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.text-content h3 {
  font-size: 1.4rem;
  margin: 0.5rem 0;
}

.text-content h4 {
  font-size: 1.2rem;
  margin: 0.3rem 0;
}

.text-content p,
.text-content ul,
.text-content li {
  margin-bottom: 0.8rem;
}

/* Spezifische Sektionen: leicht kompakter */
#section-about,
#section-latest,
#section-playlist,
#section-contact,
#section-impressum,
#section-datenschutz {
  padding-top: 6rem;    /* Desktop: leicht verringert */
  padding-bottom: 6rem; /* Desktop: leicht verringert */
}

/* ================= Mobile / Tablet Anpassungen ================= */
@media (max-width: 1024px) {
  /* Sektionen kompakter */
  section {
    padding: 3rem 1.5rem;
  }

  #section-about,
  #section-latest,
  #section-playlist,
  #section-contact,
  #section-impressum,
  #section-datenschutz {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  /* Hero-Section unverändert */
  .hero-section {
    height: 60vh; /* bleibt wie bisher */
  }

  .hero-text h1 {
    font-size: 2.5rem;
  }

  /* Hamburger Button sichtbar */
  #reserved-mnav-button {
    display: block;
  }

  /* Mobile Navigation */
  .nav-container ul {
    flex-direction: column;
    position: fixed;
    top: 3.5rem;
    left: -100%;
    width: 100%;
    background-color: rgba(0,0,0,0.9);
    gap: 1rem;
    padding: 2rem 1rem;
    transition: left 0.3s ease-in-out;
    z-index: 9998;
  }

  .nav-container ul.open {
    left: 0;
  }
}

@media (max-width: 768px) {
  /* Sektionen kompakter auf Mobile */
  section {
    padding: 2rem 1rem;
  }

  #section-about,
  #section-latest,
  #section-playlist,
  #section-contact,
  #section-impressum,
  #section-datenschutz {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Hero-Section unverändert */
  .hero-section {
    height: 50vh;
  }

  .hero-text h1 {
    font-size: 2rem;
  }

  /* Text anpassen */
  .text-content {
    font-size: 0.95rem;
    line-height: 1.4;
  }

  .text-content h2 {
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
  }

  .text-content h3 {
    font-size: 1.2rem;
  }

  .text-content h4 {
    font-size: 1rem;
  }
}


/* ================= Contact Form ================= */
#contact-form {
 display: flex;
 flex-direction: column;
 gap: 1rem;
 max-width: 600px;
 margin-top: 1rem;
 position: relative; /* über Sternenhimmel */
 z-index: 1;
}

#contact-form input,
#contact-form textarea {
 padding: 0.75rem;
 border-radius: 5px;
 border: 1px solid #ccc;
 font-size: 1rem;
 width: 100%;
 background-color: #111;
 color: #fff;
}

#contact-form input::placeholder,
#contact-form textarea::placeholder {
 color: #888;
}

#contact-form button {
 padding: 0.75rem 1.5rem;
 background-color: #f39c12;
 border: none;
 border-radius: 5px;
 color: #000;
 font-weight: bold;
 cursor: pointer;
 transition: background-color 0.3s;
}

#contact-form button:hover {
 background-color: #e08e0b;
}

/* ================= Pictures Section ================= */
#section-pictures {
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

#section-pictures .gallery-container {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

#section-pictures .gallery-slide {
  display: none; /* Start: nur ein Slide sichtbar */
}

#section-pictures .gallery-slide img {
  width: 100%;         /* Bild passt sich der Containerbreite an */
  height: auto;        /* Höhe automatisch proportional */
  max-height: 70vh;    /* optional: Bildhöhe begrenzen */
  object-fit: contain;  /* Bild bleibt vollständig sichtbar */
  border-radius: 10px;  /* optional: abgerundete Ecken */
}

/* Pfeile */
#section-pictures .prev,
#section-pictures .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #fff;
  font-weight: bold;
  font-size: 2rem;
  border-radius: 0 3px 3px 0;
  user-select: none;
  transition: 0.3s;
  background-color: rgba(0,0,0,0.5);
}

#section-pictures .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

#section-pictures .prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}

#section-pictures .prev:hover,
#section-pictures .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Punkte unter der Galerie */
#section-pictures .dot-container {
  text-align: center;
  margin-top: 15px;
}

#section-pictures .dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
}

#section-pictures .dot.active {
  background-color: #f39c12;
}
 

/* ================= Footer ================= */
footer.custom-footer {
  position: relative;      /* bleibt über dem Sternenhimmel */
  z-index: 1;              /* über Sternenhimmel */
  background: none;        /* transparent, damit Sterne sichtbar bleiben */
  padding: 40px 20px;      /* gleiches Padding wie Text-Sektionen */
  text-align: center;      /* zentriert den Text */
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  color: #ffffff;
}