/* Vollbild-Carousel */
.fullscreen-carousel {
  position: fixed; /* Fixiert das Carousel auf dem Bildschirm */
  top: 0;
  left: 0;
  width: 100vw; /* 100% der Fensterbreite */
  height: 100vh; /* 100% der Fensterhöhe */
  z-index: 9999; /* Stellt sicher, dass das Carousel immer oben bleibt */
  padding: 0; /* Kein Abstand mehr */
  margin: 0; /* Kein Abstand mehr */
  overflow: hidden;
}

/* Sicherstellen, dass der Container die volle Breite und Höhe im Vollbildmodus nutzt */
body.fullscreen-active .container {
  width: 100% !important; /* Entfernt alle Begrenzungen der Breite */
  max-width: 100% !important; /* Verhindert eine Breitenbegrenzung */
  padding-left: 0 !important;  /* Entfernt Padding links */
  padding-right: 0 !important; /* Entfernt Padding rechts */
  margin: 0 !important; /* Entfernt alle Margins */
}

/* Korrektur der Höhe im Vollbildmodus mit der Berücksichtigung der 'mt-4' und 'mb-4' */
body.fullscreen-active .carousel-inner {
  height: calc(100vh - 2rem) !important; /* Höhe des Carousels unter Berücksichtigung von 'mt-4' und 'mb-4' */
}

/* Ausblenden von anderen UI-Elementen im Vollbildmodus */
body.fullscreen-active nav,
body.fullscreen-active footer {
  display: none !important; /* Versteckt die Navigationsleiste und den Footer im Vollbildmodus */
}

body.fullscreen-active #fullscreenToggle {
  z-index: 10000;
  position: relative;
}