/* Vollbild-Hintergrund */
body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('images/KugelPanorama_Mitte_Final_3.jpg') no-repeat left center fixed;
    background-size: cover;
  }
  
  /* Überlagerung mit transparentem Grau */
  #overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Transparentes Grau */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* Zentrale Inhalte */
  #content {
    text-align: center;
    color: white;
  }
  
  h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
  }
  
  button {
    padding: 10px 20px;
    font-size: 1.2rem;
    font-family: 'Poppins', sans-serif;
    color: white;
    background-color: #EC6602;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease; /* Übergang für alle Eigenschaften */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Grundlegender Schatten */
}

button:hover {
    background-color: #F9B591; /* Farbe ändern */
    transform: translateY(-5px); /* Leichtes Anheben des Buttons */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Dynamischere Schatten */
}


  
#innocube_Logo {
    position: absolute;
    top: 40px; /* Abstand vom oberen Rand */
    left: 40px; /* Abstand vom linken Rand */
    width: 100px; /* Breite des Logos */
    height: auto; /* Automatische Höhe, um Proportionen beizubehalten */
    z-index: 1000; /* Sicherstellen, dass das Logo sichtbar bleibt */
}


#switchLanguage {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #EC6602;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease; /* Weiche Übergänge für alle Eigenschaften */
}
#switchLanguage:hover{
  background-color: #F9B591; /* Farbe ändern bei Hover */
  transform: translateY(-5px); /* Leichtes Anheben des Buttons */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Dynamischere Schatten */
}

/* Grundlegende Styles bleiben wie sie sind */

/* Media-Query für kleinere Bildschirme */
@media (max-width: 1768px) {
  /* Logo anpassen */
  #innocube_Logo {
    top: 20px; /* Weniger Abstand von oben */
    left: 20px; /* Weniger Abstand von links */
    width: 70px; /* Verkleinertes Logo */
  }

  /* Buttons und Texte anpassen */
  button {
    padding: 8px 16px; /* Kleinere Buttons */
    font-size: 1rem; /* Kleinere Schriftgröße */
  }

  #switchLanguage {
    bottom: 20px; /* Weniger Abstand vom unteren Rand */
    right: 20px; /* Weniger Abstand vom rechten Rand */
    width: 40px; /* Kleinere Breite */
    height: 40px; /* Kleinere Höhe */
  }

  /* Zentrierten Inhalt anpassen */
  #content h1 {
    font-size: 2rem; /* Kleinere Überschrift */
  }

  /* Container bleibt zentriert */
  #overlay {
    padding: 10px; /* Zusätzlicher Puffer für kleinere Bildschirme */
  }
}

/* Media-Query für sehr kleine Bildschirme (z.B. Smartphones) */
@media (max-width: 480px) {
  #innocube_Logo {
    width: 50px; /* Noch kleinere Logo-Größe */
  }

  button {
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  #switchLanguage {
    width: 35px;
    height: 35px;
  }

  #content h1 {
    font-size: 1.8rem;
  }
}