/* responsive.css */

/* Allgemeine Stile für Responsive Design */
@media (max-width: 768px) {
  /* Ändern Sie hier die Stile für Bildschirmbreiten bis zu 768px */
  body {
    font-size: 16px; /* Beispiel: Textgröße ändern */
  }

  #content {
    width: 90%; /* Beispiel: Ändern Sie die Breite des Hauptinhalts */
    left: 0; /* Setzen Sie die Position des Hauptinhalts zurück */
  }

  #sidebar {
    display: none; /* Sidebar auf kleinen Bildschirmen standardmäßig ausblenden */
  }

  #footer {
    z-index: 3; /* Stellen Sie den Footer über den Hauptinhalt */
  }
  
 /* Stil für den Play-Button */
.control-btn.play {
  background-color: yellow;
  border-radius: 50%; /* Macht den Button rund */
  width: 3em; /* Breite und Höhe des Buttons */
  height: 3em;
}

  /* Hamburger-Menü-Stile */
  .menu-toggle {
    display: block; /* Hamburger-Menü auf allen Bildschirmgrößen standardmäßig anzeigen */
    cursor: pointer;
    padding: 10px;
    background-color: #000; /* Ändern Sie die Hintergrundfarbe nach Bedarf */
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4; /* Stellen Sie das Hamburger-Menü über allem anderen Inhalt */
  }

  .bar {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 5px 0;
    transition: 0.4s;
  }

  /* Anzeige der Sidebar bei Aktivierung des Hamburger-Menüs */
  body.menu-open #sidebar {
    display: block;
    z-index: 5; /* Stellen Sie sicher, dass die Sidebar im Vordergrund ist */
  }

  /* Anpassungen für die Lightbox */
  .lightbox-content {
    width: 90%; /* Erhöht die Breite der Lightbox auf kleinen Bildschirmen */
    padding: 15px; /* Verringert den Innenabstand */
    box-shadow: none; /* Entfernt den Schatten für einen flacheren Stil */
  }

  .close-btn {
    top: 5px;
    right: 5px;
    font-size: 16px; /* Reduziert die Schriftgröße des Schließen-Buttons */
  }

  .datenschutz-box {
    width: 90%; /* Erhöht die Breite der Lightbox auf kleinen Bildschirmen */
    padding: 15px; /* Verringert den Innenabstand */
    box-shadow: none; /* Entfernt den Schatten für einen flacheren Stil */
  }

  .logo-bottom img {
    max-width: 50%; /* Ändere die Größe des Wasserzeichens nach Bedarf */
    height: auto;
  }
}