.image-slider {
    position: relative;
    overflow: hidden;
    width: 100%; /* oder feste Breite */
    height: auto;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    max-width: 100%;
}

.slides img {
    height: auto;
    object-fit: cover;
}

/* Verberge Captions innerhalb des Slides */
.slides .caption {
    display: none;
}

.captions {
    position: relative;
    margin-top: 10px;
    text-align: center;
    font-size: 16px;
    color: #333;
}

.captions div {
    display: none; /* Alle Captions sind standardmäßig unsichtbar */
}

.captions div.active {
    display: block; /* Nur die aktive Caption wird angezeigt */
}

/* Navigation (Dots) */
.navigation {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px; /* Abstand zur Caption */
}

.dot {
    width: 10px;
    height: 10px;
    background-color: gray;
    border-radius: 50%;
    cursor: pointer;
}

.dot.active {
    background-color: black;
}
