/* Slider Container */
.slider-container-custom {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* Zentriert den Slider */
}

/* Slider */
.slider-custom {
    display: flex; /* Karten nebeneinander anzeigen */
    flex-wrap: nowrap; /* Keine Zeilenumbrüche */
    gap: 15px; /* Abstand zwischen Karten */
    transition: transform 0.5s ease-in-out; /* Animation */
}

/* Karten */
.slider-card-custom {
    flex: 0 0 300px; /* Feste Breite der Karte */
    box-sizing: border-box; /* Verhindert Überlappung durch Padding */
}

.slider-card-custom .card {
    position: relative;
    overflow: hidden; 
    max-height: 500px; /* Anfangs Höhe begrenzen */
    width: 100%; /* Breite an das Eltern-Element anpassen */
    border-radius: 10px; /* Abgerundete Ecken */
    transition: max-height 0.5s ease; /* Animierte Änderung der Höhe */
}

/* Short-Karten */
.slider-card-custom .card.short-card {
    max-height: 450px; /* Begrenzte Höhe */
}

/* Vollständig geöffnete Karten */
.slider-card-custom .card.full-card {
    max-height: none; /* Keine Höhenbegrenzung */
}

/* Buttons */
.slider-card-custom .btn-read-more {
    display: block; /* Sicherstellen, dass er sichtbar ist */
    position: absolute;
    bottom: 15px; /* Am unteren Rand der Karte ausrichten */
    left: 50%;
    transform: translateX(-50%); /* Horizontale Zentrierung */
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.slider-card-custom .btn-read-less {
    display: block;
    margin: 10px auto;
    padding: 8px 16px;
    font-size: 14px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
}

.slider-card-custom .btn-read-more:hover {
    background-color: #0056b3;
}

.slider-card-custom .btn-read-less:hover {
    background-color: #c82333;
}

.slider-controls {
    position: absolute;
    top: 50%; /* Vertikal in der Mitte */
    transform: translateY(-50%); /* Zentriert die Buttons */
    background-color: #007bff; /* Blaue Farbe */
    color: #fff; /* Weiße Schrift */
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10; /* Buttons über allem anderen */
}

.slider-controls#prev {
    left: 10px; /* Position des "Zurück"-Buttons */
}

.slider-controls#next {
    right: 10px; /* Position des "Weiter"-Buttons */
}

.slider-controls:hover {
    background-color: #0056b3;
}

/* Navigationspunkte */
.slider-indicators {
    display: flex; /* Punkte nebeneinander setzen */
    justify-content: center; /* Zentriere die Punkte */
    margin-top: 20px; /* Abstand vom Slider */
}

.slider-indicators button {
    width: 15px;
    height: 15px;
    background-color: #ccc; /* Neutrale Farbe */
    border: none;
    border-radius: 50%; /* Runde Punkte */
    cursor: pointer;
    margin: 0 5px; /* Abstand zwischen den Punkten */
}

.slider-indicators button.active {
    background-color: #007bff; /* Hervorheben des aktiven Punktes */
}

.slider-indicators button:hover {
    background-color: #0056b3; /* Interaktion für Hover */
}