body {
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
}
.image-mask-02 {
    overflow: hidden; /* Versteckt Teile des Bildes, die außerhalb des Containers liegen */
    width: 100%; /* Breite der Maske */
    height: 662px; /* Höhe des Containers */
    position: relative;
}

.bewegenderContainer {
    display: flex; /* Bilder nebeneinander anzeigen */
    width: calc(30861px * 2); /* Container doppelt so breit wie ein Bild */
    /*height: 100%;*/
    animation: slide 1300s linear infinite; /* Endlos wiederholende Animation */
}

.bewegendesBild-02 {
    flex: 0 0 30861px; /* Breite des Bildes */
    height: 100%; /* Höhe des Bildes an die Containerhöhe anpassen */
    object-fit: contain; /* Bild proportional skalieren und füllen */
}
/* Keyframes für die Bildanimation */
@keyframes slide {
    0% {
        transform: translateX(0); /* Startposition */
    }
    100% {
        transform: translateX(-30861px); /* Exakt die Breite eines Bildes verschieben */
    }
}

audio {
    display: none; /* Versteckt das Audio-Element */
}


/* Style für den Button */
.playButton, .pauseButton {
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #333;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.playButton:hover, .pauseButton:hover {
    background-color: #ff3300;
}
    
/* Style für das Symbol innerhalb des Buttons */
.scrollLeftBtn i, .scrollRightBtn i, .restartAnimationBtn i, .newStart i {
  color: #333; /* Farbe des Symbols */
  font-size: 12px; /* Größe des Symbols */
}



/* Extra small devices (portrait phones, less than 576px)*/
/* No media query since this is the default in Bootstrap------------------------------------------------ BLUE */
/* Small devices (576px and up)*/
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up)------------------------------------------------------------- GREEN */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up)------------------------------------------------------------- YELLOW */
@media (min-width: 992px) {	
}
/* Extra large devices (large desktops, 1200px and up)------------------------------------------------------ BROWN */
@media (min-width: 1200px) {
.image-mask-02 {
    height: 662px; /* Höhe des Containers */
}
.bewegenderContainer {
    width: calc(30861px * 2); /* Container doppelt so breit wie ein Bild */
}
.bewegendesBild-02 {
    flex: 0 0 30861px; /* Breite des Bildes */
}
/* Keyframes für die Bildanimation */
@keyframes slide {
    0% {
        transform: translateX(0); /* Startposition */
    }
    100% {
        transform: translateX(-15187px); /* Exakt die Breite eines Bildes verschieben */
    }
}
}
/* XXL (large desktops, 1400px and up)-------------------------------------------------------------*/
@media (min-width: 1400px) {
/* XXXL (large desktops, 1920px and up)-------------------------------------------------------------*/
@media (min-width: 1920px) {
.image-mask-02 {
    height: 662px; /* Höhe des Containers */
}
.bewegenderContainer {
    width: calc(30861px * 2); /* Container doppelt so breit wie ein Bild */
}
.bewegendesBild-02 {
    flex: 0 0 30861px; /* Breite des Bildes */
}
/* Keyframes für die Bildanimation */
@keyframes slide {
    0% {
        transform: translateX(0); /* Startposition */
    }
    100% {
        transform: translateX(-15187px); /* Exakt die Breite eines Bildes verschieben */
    }
}
}
}
/* Ultra large devices (large desktops, 1920px and up)-------------------------------------------------------------*/
@media (min-width: 2560px) {
}