/* ==============================
   Mickymood Joomla 6 Template CSS – Optimiert
   ============================== */

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

/* ===== Global: keine horizontale Scrollbar ===== */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: 'Orbitron', sans-serif;
  color: #fff;
  background: #0a0a0a;
  line-height: 1.6;
  scroll-behavior: smooth;
}

/* === Neon Colors === */
:root {
  --neon-blue: #00f0ff;
  --neon-pink: #ff00ff;
  --neon-purple: #8c00ff;
  --neon-glow: 0 0 10px var(--neon-blue),
               0 0 20px var(--neon-pink),
               0 0 30px var(--neon-purple);
}

/* ================= HEADER ================= */
header {
  position: sticky;
  top: 0;
  background: transparent;
  z-index: 999;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: center;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  padding: 1rem 0;
}

nav li {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--neon-blue);
  text-shadow: 0 0 5px var(--neon-blue),
               0 0 10px var(--neon-pink),
               0 0 20px var(--neon-purple);
  transition: 0.3s;
}

nav li:hover {
  color: var(--neon-pink);
  text-shadow: 0 0 10px var(--neon-pink),
               0 0 20px var(--neon-purple),
               0 0 40px var(--neon-blue);
}

/* ================= HERO ================= */
#hero {
  position: relative; /* für Overlay */
  min-height: 100vh;
  width: 100%;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  text-shadow: var(--neon-glow);
  overflow-x: hidden;
}

/* Hintergrundbild mit Abdunklung */
#hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
              url('/images/hero.png') center center / cover no-repeat fixed;
  z-index: -1; /* dahinter den Text legen */
}

/* Texte */
#hero h1 {
  font-size: 4rem;
  color: var(--neon-pink);
  animation: glow 2s infinite alternate;
}

#hero p {
  font-size: 1.5rem;
  color: var(--neon-blue);
}

/* Glow Animation */
@keyframes glow {
  from { text-shadow: 0 0 10px var(--neon-pink); }
  to   { text-shadow: 0 0 30px var(--neon-blue); }
}

/* ===== Mobile Fix ===== */
@media (max-width: 768px) {
  #hero::before {
    background-attachment: scroll; /* iOS/Android Workaround */
  }

  #hero h1 { font-size: 2.5rem; }
  #hero p { font-size: 1rem; }
}

@media (max-width: 480px) {
  #hero h1 { font-size: 2rem; }
  #hero p { font-size: 0.9rem; }
}



/* ================= SECTIONS ================= */
section,
.moduletable,
.custom {
  padding: 4rem 2rem;
  text-align: center;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ================= SWIPER GLOBAL ================= */
.swiper-container {
  width: 90%;
  max-width: 1100px;
  padding: 2rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ================= GALLERY SLIDER ================= */
.gallery-swiper .swiper-slide {
  background: #111;
  height: 400px;
  border-radius: 12px;
  border: 2px solid var(--neon-blue);
  box-shadow: var(--neon-glow);
  transition: 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-swiper .swiper-slide:hover {
  transform: scale(1.05);
  border-color: var(--neon-pink);
  box-shadow: 0 0 25px var(--neon-pink);
}

.gallery-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* ================= MUSIC STATIC ================= */
.music-row,
.music-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.music-slide {
  flex: 0 0 300px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.music-player {
  width: 320px;
  height: 400px;
  background: #111;
  border-radius: 12px;
  border: 2px solid var(--neon-blue);
  box-shadow: var(--neon-glow);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

.music-cover {
  width: 100%;
  height: 60%;
  overflow: hidden;
  border-radius: 10px;
}

.music-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.music-cover:hover img {
  transform: scale(1.05);
  box-shadow: var(--neon-glow);
}

.music-info {
  margin-top: 0.5rem;
  color: var(--neon-pink);
  font-weight: 700;
  text-shadow: var(--neon-glow);
  text-align: center;
}

.controls {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.play-btn {
  background: var(--neon-pink);
  border: none;
  color: #000;
  font-size: 1.5rem;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  box-shadow: var(--neon-glow);
  transition: 0.3s;
}

.play-btn:hover {
  background: var(--neon-purple);
  box-shadow: 0 0 20px var(--neon-blue), 0 0 30px var(--neon-pink);
}

.progress-container {
  flex: 1;
  height: 6px;
  background: #222;
  border-radius: 3px;
  overflow: hidden;
}

.progress {
  width: 0%;
  height: 100%;
  background: var(--neon-blue);
  border-radius: 3px;
  transition: width 0.2s;
}

/* ================= MODULE TITLES NEON ================= */
h2, h3, .module-title {
  color: var(--neon-blue);
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 2rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-shadow: 0 0 6px var(--neon-blue),
               0 0 12px var(--neon-pink),
               0 0 24px var(--neon-purple);
  animation: neonPulse 3s infinite alternate;
}

@keyframes neonPulse {
  from {
    text-shadow: 0 0 6px var(--neon-blue),
                 0 0 12px var(--neon-pink);
  }
  to {
    text-shadow: 0 0 12px var(--neon-blue),
                 0 0 24px var(--neon-pink),
                 0 0 36px var(--neon-purple);
  }
}

/* ================= ABOUT SECTION ================= */
.about-module {
  background-color: #1a1a1a;
  padding: 3rem 2rem;
  width: 100%;
  max-width: 1000px;
  margin: 3rem auto;
  text-align: left;
  border-radius: 12px;
  position: relative;
  z-index: 10;
  box-shadow: 0 0 20px #00f0ff,
              0 0 35px #ff00ff,
              0 0 50px #8c00ff;
}

.about-module h2,
.about-module h3 {
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 2rem;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 10px #00f0ff,
               0 0 20px #ff00ff,
               0 0 30px #8c00ff;
}

.about-module p,
.about-module .about-text p,
.about-module ul {
  font-size: 1.2rem;
  line-height: 1.7;
  color: #fff;
  margin-bottom: 1.5rem;
}

.about-module ul {
  padding-left: 1.5rem;
}

.about-module ul li {
  margin-bottom: 0.5rem;
}

/* ================= CONTACT FORM ================= */
#contact form {
  max-width: 800px;
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#contact input,
#contact textarea {
  padding: 1rem;
  font-size: 1.1rem;
  border-radius: 6px;
  border: 1px solid var(--neon-blue);
  background: #111;
  color: #fff;
  box-shadow: var(--neon-glow);
}

#contact button {
  padding: 1rem;
  font-size: 1.1rem;
}

/* ================= FOOTER SOCIAL ICONS ================= */
.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 1rem;
}

.footer-social a {
  color: #fff;
  font-size: 2.2rem;
  transition: 0.3s;
  text-shadow: 0 0 5px #00f0ff,
               0 0 10px #ff00ff,
               0 0 20px #8c00ff;
}

.footer-social a:hover {
  color: #ff00ff;
  text-shadow: 0 0 15px #ff00ff,
               0 0 25px #8c00ff,
               0 0 35px #00f0ff;
}

/* ================= RESPONSIVE MOBILE FIXES ================= */

/* ===== Hero Section ===== */
@media (max-width: 768px) {
  #hero {
    min-height: 100svh;
    background-attachment: scroll;
    padding: 0 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  #hero h1 { font-size: 2.5rem; }
  #hero p  { font-size: 1rem; }
}

/* ===== About Section ===== */
@media (max-width: 768px) {
  .about-module {
    width: 90%;
    max-width: 100%;
    margin: 2rem auto;
    padding: 2rem 1rem;
    text-align: center;
  }
  .about-module h2,
  .about-module h3,
  .about-module p,
  .about-module .about-text p {
    text-align: center;
  }
  .about-module ul {
    padding-left: 0;
    list-style-position: inside;
    text-align: center;
    margin: 1rem auto;
  }
  .about-module ul li { margin-bottom: 0.5rem; }
}

/* ===== Music & Artist Modules ===== */
@media (max-width: 768px) {
  .music-slide,
  .music-player,
  .artist-card {
    width: 90%;
    max-width: 100%;
    margin: 1rem auto;
  }
  .music-cover,
  .artist-cover {
    height: 180px;
  }
  .music-player,
  .artist-card {
    padding: 1rem;
  }
}

/* ===== Navigation Mobile ===== */
@media (max-width: 768px) {
  header nav ul {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  header nav li {
    font-size: 1.2rem;
    padding: 0.5rem 0;
    white-space: nowrap;
  }
  header nav {
    padding: 0.5rem 0;
  }
}

/* ===== Extra kleine Smartphones ===== */
@media (max-width: 480px) {
  #hero h1 { font-size: 2rem; }
  #hero p  { font-size: 0.9rem; }
  .music-slide,
  .music-player,
  .artist-card,
  .about-module { width: 95%; }
  .music-cover,
  .artist-cover { height: 150px; }
}

/* ===== Gallery Slider – Mobile Optimiert ===== */
@media (max-width: 768px) {
  .gallery-swiper {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
  }
  .gallery-swiper .swiper-wrapper {
    justify-content: center;
  }
  .gallery-swiper .swiper-slide {
    width: 90%;
    max-width: 400px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
  .gallery-swiper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    display: block;
  }
}

@media (max-width: 480px) {
  .gallery-swiper .swiper-slide {
    width: 95%;
    max-width: 300px;
    height: 150px;
  }
}
/* ================= ABOUT SECTION – MOBILE OPTIMIERT ================= */
@media (max-width: 768px) {

  .about-module {
    width: 95%;          /* fast volle Breite */
    padding: 1.5rem 1rem; /* weniger Innenabstand */
    margin: 1.5rem auto;  /* weniger Abstand nach außen */
  }

  .about-module h2,
  .about-module h3 {
    font-size: 1.8rem;   /* kleinere Überschriften */
    margin-bottom: 1rem; /* weniger Abstand */
  }

  .about-module p,
  .about-module .about-text p {
    font-size: 1rem;     /* kleinere Paragraphen */
    line-height: 1.5;    /* engerer Zeilenabstand */
    margin-bottom: 1rem; /* weniger Abstand nach Absatz */
  }

  .about-module ul {
    font-size: 1rem;
    padding-left: 0.5rem;
    margin-bottom: 1rem;
  }

  .about-module ul li {
    margin-bottom: 0.5rem;
  }
}
/* ================= HERO HEADER BACKGROUND – MOBILE OPTIMIERT ================= */
@media (max-width: 768px) {
  #hero {
    background-size: contain;      /* Bild wird komplett angezeigt */
    background-position: top center; /* Bild bleibt oben zentriert */
    background-repeat: no-repeat;  /* Wiederholung verhindern */
    min-height: 60svh;            /* Höhe verringern, Bild soll sichtbar bleiben */
    padding: 2rem 1rem;           /* Padding etwas mehr, Text sitzt schön */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;  /* Text etwas weiter oben */
    align-items: center;
    text-align: center;
  }

  #hero h1 {
    font-size: 2.2rem;
  }

  #hero p {
    font-size: 0.95rem;
  }
}