/**
 * Header Slider Component
 *
 * Exakt wie TYPO3 Original .header_slider
 * - Aspect Ratio: 2340/836 (Standard)
 * - Max Height: 70vh (Standard)
 * - Min Height: 27vh (Standard)
 * - Transition: 1.5s opacity (Crossfade)
 * - Animation: 4000ms Interval (4 Sekunden)
 * - Hero-Modus: Funktioniert mit 1 Bild (keine Animation)
 *
 * @package Kurpfalz_Theme
 * @author Saad Badr
 * @copyright 2025 SawatzkiMühlenbruch GmbH
 */

/* Header Slider Container */
.header-slider {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Header Slider Images Container */
.header-slider__images {
    position: relative;
    width: 100%;
    aspect-ratio: 2340/836; /* Exakt wie Original - kann via Widget überschrieben werden */
    height: auto;
    max-height: var(--headerslider-maxheight, 70vh);
    min-height: var(--headerslider-minheight, 27vh);
    overflow: hidden;
}

/* Individual Slider Image */
.header-slider__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s; /* Exakt wie Original (var(--transition-slow) = 1.5s) */
}

.header-slider__image.active {
    opacity: 1;
}

.header-slider__image img {
    width: 100%;
    height: auto; /* Exakt wie Original (nicht 100%) */
    max-height: var(--headerslider-maxheight, 70vh);
    min-height: var(--headerslider-minheight, 27vh);
    aspect-ratio: 2340/836; /* Exakt wie Original */
    object-fit: cover;
    object-position: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .header-slider__images {
        max-height: 50vh;
        min-height: 20vh;
    }
}

@media (max-width: 540px) {
    .header-slider__images {
        max-height: 40vh;
        min-height: 15vh;
    }
}