/* Globale Body-Styles für index.html, Background.php, etc. */
body {
    margin: 0;
    height: 100vh; /* 100% der Viewport-Höhe */
    width: 100vw;  /* 100% der Viewport-Breite */
    font-family: 'Inter', sans-serif;
    background-color: #000; /* Fallback-Farbe */
    color: #fff;
    padding: 0;
    overflow: hidden; /* Verhindert Scrollbalken */
    display: flex; /* Für die Zentrierung in index.html */
    flex-direction: column; /* Für die Zentrierung in index.html */
    align-items: center; /* Für die Zentrierung in index.html */
    justify-content: center; /* Für die Zentrierung in index.html */
    background-position: top center; /* Für Background.php */
    background-repeat: no-repeat; /* Für Background.php */
    background-size: cover; /* Für Background.php */
    transition: background-image 2s ease-in-out; /* Für Background.php */
}

/* iframe Styles (können spezifischer für BackgroundFrame sein, falls andere Iframes unterschiedliche Eigenschaften haben) */
/* Diese hier sind für das Hintergrund-Iframe */
#backgroundFrame {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 0; /* Ensures it's behind other content */
}

/* Der Container, der den eigentlichen Inhalt (contentFrame) hält */
.player-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90vw; /* 90% der Viewport-Breite */
    height: 85vh; /* 85% der Viewport-Höhe */
    z-index: 1; /* Über dem Hintergrund-Iframe */
    position: relative; /* Wichtig für die Positionierung des contentFrame darin */
    background-color: rgba(0, 0, 0, 0.5); /* Leichter dunkler Hintergrund für den Content-Bereich */
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}

/* Das Iframe für den Inhalt (Mediaplayer, Statistik, Upload) */
#contentFrame {
    width: 98%;   /* Nimmt die volle Breite des player-container ein */
    height: 98%;  /* Nimmt die volle Höhe des player-container ein */
    border: none;
}


/* JIMMY UND SEINE BAND - unverändert, da diese bereits in style.css waren */
.buttonjimmy {
  background: black;
  border-radius: 20px;
  color: #1DB954;
  text-decoration: none;
  padding: 7px 0px;
  text-align: center;
  box-shadow: 0 0 10px #000;
  box-sizing: border-box;
  width: 120px;
  position: fixed;
  top: 30px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  font-weight: bold;
  z-index: 10000;
  transition: 0.5s all ease;
  opacity: 0.5;
  transform: rotate(270deg);
  right: -110px;
}

.buttonjimmy:hover {
  right: -30px;
  opacity: 1;
  background: white;
  color: red;
}

.buttonjimmy img {
  width: 100px;
  height: 100px;
  margin-top: 0px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.buttonjimmy:hover img {
  opacity: 1;
}

.buttoneddy {
  background: black;
  border-radius: 20px;
  color: #FF7F00;
  text-decoration: none;
  padding: 7px 0px;
  text-align: center;
  box-shadow: 0 0 10px #000;
  box-sizing: border-box;
  width: 120px;
  position: fixed;
  top: 150px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  font-weight: bold;
  z-index: 10000;
  transition: 0.5s all ease;
  opacity: 0.5;
  transform: rotate(270deg);
  right: -110px;
}

.buttoneddy:hover {
  right: -30px;
  opacity: 1;
  background: white;
  color: red;
}

.buttoneddy img {
  width: 100px;
  height: 100px;
  margin-top: 0px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.buttoneddy:hover img {
  opacity: 1;
}

/* Menu-Container und Dropdown */
.menu-container {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 10000; /* Stellt sicher, dass das Menü über allem liegt */
}

.menu-button {
    background: white;
    border-radius: 20px;
    color: #ce2c1a;
    text-decoration: none;
    padding: 10px 25px;
    text-align: center;
    box-shadow: 0 0 10px #000;
    box-sizing: border-box;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.3;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
    display: inline-block; /* Wichtig, damit Padding und Breite funktionieren */
}

.menu-button:hover {
    background: black;
    opacity: 1;
    color: white;
}

.menu-dropdown {
    display: none; /* Hidden by default - wird von script.js gesteuert */
    flex-direction: column; /* Für vertikale Anordnung der Menüpunkte */
    background-color: #333;
    position: absolute; /* Relativ zum .menu-container */
    top: 40px; /* Unterhalb des Menü-Buttons positionieren (anpassen falls Buttonhöhe variiert) */
    left: 0;
    z-index: 10;
    border-radius: 0 0 10px 10px; /* Nur untere Ecken abrunden */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* Für abgerundete Ecken bei den Menü-Items */
}

/* Hover-Effekt für das Menü-Dropdown, damit es geöffnet bleibt */
.menu-button:hover + .menu-dropdown,
.menu-dropdown:hover {
    display: flex;
}

.menu-item {
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    background-color: #333;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap; /* Verhindert Zeilenumbruch bei langen Namen */
}

.menu-item:hover {
    background-color: #555;
    color: #1DB954; /* Spotify-Grün für Hover */
}


/* Logout Button */
#logoutButton {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: #dc3545;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 10001; /* Über allem anderen */
    display: none;   /* Standardmäßig versteckt */
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

#logoutButton:hover {
    background-color: #c82333;
}