/* ---------------------------------------------------- */

/* ? DESKTOP & GRUND-LAYOUT (Breite Bildschirme) ? */

/* ---------------------------------------------------- */



/* Haupt-Navigationsleiste (Sichtbar auf Desktop) */

.navbar {

  overflow: hidden;

  background-color: transparent;

  max-width: 900px; 

  margin-left: auto; 

  margin-right: auto; 

  /* Flexbox für die ZENTRIERUNG der Links innerhalb der 900px Breite */

  display: flex;

  justify-content: center;

}

/* Links und Buttons */

.navbar a, .dropdown .dropbtn {

  font-size: 18px;

  font-weight: bold;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  display: block;

  background-color: inherit;

  border: none;

  cursor: pointer;

  width: 100%;

  box-sizing: border-box;

}



/* WICHTIG: Regel, wie der Button den Inhalt anordnet */

.dropdown .dropbtn {

  display: flex;

  justify-content: space-between; /* Text links, Icon rechts im Button */

  align-items: center; /* Vertikale Zentrierung */

  padding: 14px 16px; 

  font-size: 16px;

  color: white;

  background-color: inherit;

  border: none;

  <!-- cursor: pointer; -->

  width: 100%; 

  box-sizing: border-box;

}



/* ? FIX: Fügt Abstand zwischen Text und Icon hinzu ? */

.dropdown .dropbtn i {

  margin-left: 8px; /* Abstand zwischen "Userbereich" und dem Pfeil */

  /* Rest der Icon-Regeln bleibt gleich */

  transition: transform 0.3s ease;

  display: inline-block;

    padding: 5px 16px;

  color: white; 

}

/* Hover/Open-Effekte */

.navbar a:hover, .dropdown .dropbtn:hover, .dropdown.open .dropbtn {

  background-color: #1a1a2e;

}


/* Dropdown Inhalt (Desktop/Open) */

.dropdown-content {

  display: none;

  color: #fff;

  position: absolute; 

  background-color: #1a1a2e;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1000;

}


.dropdown-content a {

  float: none;

  color: #fff;;

  padding: 12px 16px;

  text-align: left;

}


/* Dropdown Öffnen (Klick) */

.dropdown.open .dropdown-content {

  display: block;

}

/* Hamburger Icon (Auf Desktop versteckt) */

.navbar .icon {

  display: none;

}

/* ---------------------------------------------------- */

/* ? MOBILER HEADER (FIXIERT UND IMMER SICHTBAR AUF MOBILE) ? */

/* ---------------------------------------------------- */

.mobile-header {

  display: none; /* Standardmäßig (Desktop) versteckt */

  /* HINTERGRUND FIX: Muss dunkel sein, damit das weiße Icon sichtbar ist */

  background-color: transparent; 

  width: 100%;

  height: 50px; 

  box-sizing: border-box;


  /* Überlappung fixen */

  position: fixed;

  top: 0;

  left: 0;

  z-index: 99999;

}

.mobile-header .icon {

  float: right;

  display: block;

  font-size: 20px;

  color: white;

  padding: 14px 16px;

  text-decoration: none;

  cursor: pointer;

}


/* ---------------------------------------------------- */

/* ? RESPONSIVE BREAKPOINT (max-width: 900px) ? */

/* ---------------------------------------------------- */

@media screen and (max-width: 900px) {
 

  /* FIX 1: Verschiebt den Seiteninhalt (Player, etc.) unter den fixierten Header */

  .header-with-background {

    padding-top: 50px;

    margin-top: 0;

  }
  

  /* FIX 2: Desktop-Navbar (Hauptmenü) im Mobilmodus ausblenden */

  .navbar {

    display: none; /* Wichtig: Überschreibt display: flex; von oben */

    /* Keine max-width/margin: auto Regeln hier! */

  }


  /* Mobiler Header (Icon) im Mobilmodus anzeigen */

  .mobile-header {

    display: block;

  }


  /* Menü beim Klick auf Hamburger (responsive Klasse) */

  .navbar.responsive {

    display: block;

    position: fixed;

    top: 50px;

    left: 0;

    width: 70%;

    height: calc(100% - 50px);

    overflow-y: auto;

    background-color: #1a1a2e; /* Hintergrundfarbe des geöffneten mobilen Menüs */

    z-index: 9999;

  }



  /* Dropdown-Inhalte im mobilen Modus müssen relativ sein */

  .navbar.responsive .dropdown-content {

    position: relative;

    background-color: #1a1a2e; /* Helle Farbe, damit die schwarzen Links sichtbar sind */

  }

}