/*
* Hauptstylesheet für die DC Los Locos Website
* Enthält alle grundlegenden Styles für Layout, Navigation und Animationen
*/

/* Grundlegende Körper-Styles */
body {
  background-color: #000000;  /* Schwarzer Hintergrund */
  color: #f6efef;            /* Helle Textfarbe */
  font-family: 'Bebas Neue', sans-serif;  /* Spezielle Schriftart */
  overflow-x: hidden;        /* Horizontales Scrollen verhindern */
  margin: 0;
  padding: 0;
}

/* Container für Snap-Scrolling Effekt */
#container {
  height: 100vh;                    /* Volle Viewport-Höhe */
  overflow-y: scroll;               /* Vertikales Scrollen erlauben */
  scroll-snap-type: y mandatory;    /* Vertikales Snap-Scrolling aktivieren */
  position: relative;
  transition: 1s all ease-in-out;   /* Sanfte Übergänge */
}

/* Sektionen-Styling mit Snap-Scroll */
section {
  position: relative;
  width: 100%;
  height: 100vh;                    /* Volle Viewport-Höhe */
  scroll-snap-align: center;        /* Zentriertes Snapping */
  scroll-snap-stop: always;         /* Immer snappen */
  overflow: hidden;
  display: flex;
  align-items: center;              /* Vertikal zentrieren */
  justify-content: center;          /* Horizontal zentrieren */
}

/* Hintergrund-Container für Sektionen */
.section-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;                       /* Hinter dem Inhalt */
}

/* Hintergrundbild-Styling */
.section-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;               /* Bild füllt Container */
  object-position: center;         /* Bild zentrieren */
}

/* Abdunklung des Hintergrundbildes */
.section-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);  /* Halbtransparentes Schwarz */
}

/* Inhalts-Container der Sektionen */
.section-content {
  position: relative;
  z-index: 2;                      /* Über dem Hintergrund */
  text-align: center;
  padding: 2rem;
}

/* Überschriften in Sektionen */
section h1 {
  font-size: 120px;
  color: #f6efef;
  margin: 0;
  padding: 0;
}

/* Links in Sektionen */
.section-link {
  font-size: 72px;
  color: #f6efef;
  text-decoration: none;
  transition: transform 0.3s ease;    /* Animation für Hover-Effekt */
  display: inline-block;
  margin-top: 1rem;
}

/* Hover-Effekt für Links */
.section-link:hover {
  transform: scale(1.1);              /* Vergrößerung bei Hover */
  color: #fff;
}

/* Header-Styling */
header {
  position: fixed;                    /* Header fixieren */
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;                     /* Immer im Vordergrund */
  transition: all 0.3s ease;
}

#header {
  position: relative;
}

/* Logo-Styling */
header #logo {
  position: fixed;
  width: 100px;
  height: auto;
  top: 90px;
  left: 50%;
  margin: 0;
  opacity: 1;
  transform: translateX(-380px);      /* Logo positionieren */
  transition: all 0.6s cubic-bezier(0.080, 0.9, 0.18, 1);
  z-index: 101;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));  /* Schatten-Effekt */
}

/* Logo-Position in normaler Navigation */
header:not(.sticky) #logo {
  transform: translateX(-380px);
}

/* Logo in Sticky-Navigation ausblenden */
header.sticky #logo {
  opacity: 0;
  transform: translateX(-380px) scale(0);
  transition-delay: 0s;
}

/* Hauptnavigation */
header nav {
  position: fixed;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  z-index: 100;
  top: 100px;
  margin: 0;
  /* Glasmorphismus-Effekt */
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.6s cubic-bezier(0.080, 0.9, 0.18, 1);
  transform-origin: center center;
}

/* Navigations-Links */
header nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 10px 16px;
  font-size: 18px;
  letter-spacing: 1.8px;
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s cubic-bezier(0.080, 0.9, 0.18, 1);
  transform-origin: center center;
}

/* Mobiles Menü-Button */
header nav button {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  width: 60px;
  height: 60px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 50%;
  cursor: pointer;
  transform: scale(0);
  transition: 0.3s all cubic-bezier(0.080, 0.9, 0.18, 1);
}

/* Menü-Button Striche */
header nav button span {
  width: 50%;
  background-color: #fff;
  height: 3px;
  display: block;
  margin: 4px auto;
  transform: scale(0);
  transition: 0.6s all cubic-bezier(0.080, 0.9, 0.18, 1);
}

/* Sticky Header Navigation */
header.sticky nav {
  top: 20px;
  padding: 0;
  width: 80px;
  height: 80px;
  transform: translateX(-50%) scale(1);
  border-radius: 50%;
}

/* Sticky Header Navigation Links */
header.sticky nav a {
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.080, 0.9, 0.18, 1);
}

/* Sticky Header Navigation Button */
header.sticky nav button {
  transform: scale(1);
}

/* Sticky Header Navigation Button Striche */
header.sticky nav button span {
  transform: scaleX(1);
}

/* Hover Effekte */
header nav button:hover span {
  margin: 9px auto;
}

header nav a:hover {
  color: #000;
}

/* Animation Delays für Einblenden */
header nav a:nth-child(1) { transition-delay: 0.1s; }
header nav a:nth-child(2) { transition-delay: 0.2s; }
header nav a:nth-child(3) { transition-delay: 0.3s; }
header nav a:nth-child(4) { transition-delay: 0.4s; }

/* Animation Delays für Ausblenden */
header.sticky nav a:nth-child(4) { transition-delay: 0s; }
header.sticky nav a:nth-child(3) { transition-delay: 0.05s; }
header.sticky nav a:nth-child(2) { transition-delay: 0.1s; }
header.sticky nav a:nth-child(1) { transition-delay: 0.15s; }

/* User Dropdown Styling */
.navbar-text.btn-group {
  position: relative;
}

.navbar-text.btn-group .dropdown-toggle {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 10px 16px;
  font-size: 18px;
  letter-spacing: 1.8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar-text.btn-group .dropdown-toggle:hover {
  color: #000;
}

.navbar-text.btn-group .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 0;
  min-width: 160px;
  margin-top: 8px;
}

.navbar-text.btn-group .dropdown-menu li a {
  color: #fff;
  padding: 8px 16px;
  font-size: 16px;
  display: block;
  transition: all 0.3s ease;
}

.navbar-text.btn-group .dropdown-menu li a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #000;
}

/* Sticky Header mit User Dropdown */
header.sticky .navbar-text.btn-group .dropdown-toggle {
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}

header.sticky .navbar-text.btn-group .dropdown-menu {
  display: none;
}

/* Animation Delays für User Dropdown */
.navbar-text.btn-group .dropdown-toggle {
  transition: all 0.3s cubic-bezier(0.080, 0.9, 0.18, 1);
}

/* Social Section Styling */
#social {
  background-color: #000;
}

.socialicons {
  display: flex;
  gap: 2rem;
  font-size: 72px;
  justify-content: center;
  margin-top: 2rem;
}

.socialicons a {
  color: #f6efef;
  transition: transform 0.3s ease, color 0.3s ease;
}

.socialicons a:hover {
  transform: scale(1.1);
  color: #fff;
}


.footer {
    position:fixed;
    bottom: 0;
    width: 100%;
    background-color: #000000;
    color: #f6efef;
}

.copyright {
    margin: 0;
    display: inline;
    font-size: 1.1em;
}
/* Responsive Design */
@media screen and (max-width: 768px) {
  section h1 {
    font-size: 72px;
  }
  
  .section-link {
    font-size: 54px;
  }
  
  .socialicons {
    font-size: 54px;
    gap: 1rem;
  }
  
  header nav {
    width: 90%;
    max-width: 420px;
  }
}

@media screen and (max-width: 480px) {
  section h1 {
    font-size: 48px;
  }
  
  .section-link {
    font-size: 36px;
  }
  
  .socialicons {
    font-size: 36px;
    gap: 0.5rem;
  }
  
  header nav {
    padding: 0 1rem;
  }
  
  header nav a {
    font-size: 16px;
    padding: 8px;
  }
}

@media screen and (max-width: 520px) {
  
  section{
    max-width: 100%; 
    height: auto
  }

  header nav{
      height: 60px;
      width: 390px;
  }

  header nav button{
      width: 50px;
      height: 50px;
  }

  header nav a{
      font-size: 16px;
  }

  section h1{
      font-size: 80px;
  }

  header.sticky nav{
      width: 70px;
      height: 70px;
  }

}

#messagecontainer{
  z-index: 9999;
}

#container.menuopen{
  filter: blur(8px);
  transform: scale(1.2);
}

/* Links */
body a{
  color: rgb(132, 164, 232);
}
body a:hover{
  color:#fff;
}

/* Media Queries */
@media screen and (max-width: 520px) {
  section {
    padding: 0 20px;
  }
  
  header nav {
    width: 90%;
  }
  
  header nav a {
    font-size: 14px;
    padding: 10px;
  }
  
  header #logo {
    width: 70px;
    height: 70px;
  }
}

/* Media Queries für Logo-Position */
@media screen and (max-width: 1200px) {
  header #logo {
    transform: translateX(-360px);
  }
}

@media screen and (max-width: 800px) {
  header #logo {
    transform: translateX(-340px);
    width: 80px;
  }
}

@media screen and (max-width: 600px) {
  header #logo {
    transform: translateX(-320px);
    width: 70px;
  }
  
  header nav {
    width: 90%;
    max-width: 420px;
  }
}