<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.custom-slider {
    position: relative;
    width: 100%;
    max-width: 100%; /* Passt sich an die Breite des übergeordneten Containers an */
    margin: 0 auto; /* Zentriert den Slider innerhalb des Containers */
    overflow: hidden;
    max-height: 380px; /* Maximale Höhe des Sliders */
}

.custom-slides {
    display: flex;
    transition: transform 5.5s ease-in-out;
    width: 100%; /* 100% für jedes Bild */
    animation: customSlideAnimation 40s infinite;
}

.custom-slide {
    min-width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center; /* Zentriert das Bild horizontal */
    align-items: center; /* Zentriert das Bild vertikal */
    overflow: hidden; /* Verhindert, dass Bilder über den Container hinausragen */
}

.custom-slide img {
    width: 1380px; /* Verhindert, dass das Bild breiter als der Container wird */
    max-height: 100%; /* Verhindert, dass das Bild höher als der Container wird */
    height: auto; /* Beibehaltung des Seitenverhältnisses */
    display: block;
}

/* Angepasste Animation für längere Standzeit */
@keyframes customSlideAnimation {
    0%, 10% { transform: translateX(0); } /* Erstes Bild sichtbar */
    33%, 43% { transform: translateX(-100%); } /* Zweites Bild sichtbar */
    66%, 76% { transform: translateX(-200%); } /* Drittes Bild sichtbar */
    100% { transform: translateX(0); } /* Zurück zum ersten Bild */
}</pre></body></html>