/* Teaser Slider — komponentenspezifische Variables (überschreibbar via
   Tier-CSS in html/assets/css/tier/{basic,pro}/variables.css). */
:root {
    /* Hero-Variant (Startseite): volle Höhe pro Breakpoint */
    --teaser-hero-min-height:        70vh;
    --teaser-hero-min-height-tablet: 60vh;
    --teaser-hero-min-height-mobile: 50vh;
    /* Compact-Variant (Subpages): niedriger, schlankerer Content */
    --teaser-compact-min-height:        35vh;
    --teaser-compact-min-height-tablet: 32vh;
    --teaser-compact-min-height-mobile: 28vh;
    --teaser-compact-content-max-width: 700px;
    /* Welcome-Variant: vollflächiger Wegweiser-Hero mit mehreren CTAs.
       Auto-aktiv wenn ein Slide buttons[]-Array hat statt btn/link. */
    --teaser-welcome-min-height:        100dvh;
    --teaser-welcome-min-height-fallback: 100vh;
    --teaser-welcome-content-max-width: 60rem;
    --teaser-welcome-buttons-gap:       var(--space-4);
    --teaser-welcome-btn-bg:            hsl(0 0% 100% / 0.12);
    --teaser-welcome-btn-bg-hover:      hsl(0 0% 100% / 0.22);
    --teaser-welcome-btn-border:        hsl(0 0% 100% / 0.5);
    --teaser-welcome-btn-color:         hsl(0 0% 100%);
}

#teaser-slider {
    position: relative;
    overflow: hidden;
}

#teaser-slider .track {
    position: relative;

}

#teaser-slider .slide {
    position: absolute;
    inset: 0;
    min-height: var(--teaser-hero-min-height);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}

#teaser-slider .slide.active {
    position: relative;
    opacity: 1;
    pointer-events: auto;

}

/* Background */
#teaser-slider .bg {
    position: absolute;
    inset: 0;
    z-index: 1;

}

#teaser-slider .bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--scrim-light);
}

#teaser-slider .bg img,
#teaser-slider .bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    transition: transform 8s ease-out;
}

#teaser-slider .slide.active .bg img,
#teaser-slider .slide.active .bg video {
    transform: scale(1.01);
}

/* Content */
#teaser-slider .content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: var(--color-text-inverse);;
    padding: 10rem 2rem 3rem;
    max-width: 900px;
}

#teaser-slider .label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(30px);
}

#teaser-slider h2 {
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing:0;
    margin: 0 0 1.5rem;
    color: var(--color-text-inverse);;
    opacity: 0;
    transform: translateY(30px);
}

#teaser-slider hr {
    width: 80px;
    height: 2px;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    margin: 0 auto 1.5rem;
    opacity: 0;
    transform: scaleX(0);
}

#teaser-slider .content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 300;
    max-width: 650px;
    margin: 0 auto 2rem;
    opacity: 0;
    transform: translateY(30px);
}

#teaser-slider .content a {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    color: var(--color-primary, #333);
    background: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(30px);
}

#teaser-slider .content a:hover {
    background: var(--color-primary, #333);
    color: var(--color-text-inverse);;
}

/* Animations */
#teaser-slider .slide.active .label     { animation: teaserFadeUp 0.8s ease forwards 0.3s; }
#teaser-slider .slide.active h2         { animation: teaserFadeUp 0.8s ease forwards 0.5s; }
#teaser-slider .slide.active hr         { animation: teaserScaleX 0.6s ease forwards 0.7s; }
#teaser-slider .slide.active .content p { animation: teaserFadeUp 0.8s ease forwards 0.9s; }
#teaser-slider .slide.active .content a { animation: teaserFadeUp 0.8s ease forwards 1.1s; }

@keyframes teaserFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes teaserScaleX {
    to { opacity: 1; transform: scaleX(1); }
}

/* Prev / Next */
#teaser-slider .prev,
#teaser-slider .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    background: var(--scrim-light);
    color: var(--color-text-inverse);;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#teaser-slider:hover .prev,
#teaser-slider:hover .next {
    opacity: 1;
}

#teaser-slider .prev:hover,
#teaser-slider .next:hover {
    background: var(--scrim-heavy);
}

#teaser-slider .prev { left: 1rem; }
#teaser-slider .next { right: 1rem; }

/* Indicators */
#teaser-slider .indicators {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 0.75rem;
}

#teaser-slider .indicators button {
    width: 50px;
    height: 3px;
    border: none;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    position: relative;
    padding: 0;
}

#teaser-slider .indicators button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: #fff;
    transition: width 0s;
}

/* Hit-Area-Extension: unsichtbare ::after-Flaeche reicht 1rem ueber und unter
   den Balken hinaus → groessere Tap-Targets fuer Touch/Lighthouse-Target-Size.
   Visuell bleibt der Balken unveraendert (3px hoch, 50px breit). Klicks in der
   erweiterten Flaeche zaehlen als Klicks auf den Button. */
#teaser-slider .indicators button::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block: -1rem;
}

#teaser-slider .indicators button.active {
    background: rgba(255, 255, 255, 0.5);
}

#teaser-slider .indicators button.active::before {
    width: 100%;
    transition: width 6s linear;
}

/* Mobile */
@media screen and (max-width: 44.999rem) {
    #teaser-slider .slide {
        min-height: var(--teaser-hero-min-height-mobile);
    }

    #teaser-slider .content {
        padding-top: 6rem;
    }

    #teaser-slider .indicators {
        bottom: 1rem;
    }

    #teaser-slider .indicators button {
        width: 2rem;
    }

    #teaser-slider .prev,
    #teaser-slider .next {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
}

/* Tablet */
@media screen and (min-width: 45rem) and (max-width: 79.499rem) {
    #teaser-slider .slide {
        min-height: var(--teaser-hero-min-height-tablet);
    }

    #teaser-slider .content {
        padding-top: 8rem;
    }

    #teaser-slider .indicators button {
        width: 2.25rem;
    }
}

/* ============================================================
   Compact Variant — Subpage-Teaser (niedriger, schlankere Typo).
   Aktiviert wenn FrontendView page !== 'home' rendert.
   ============================================================ */

#teaser-slider.teaser-compact .slide {
    min-height: var(--teaser-compact-min-height);
}

#teaser-slider.teaser-compact .content {
    padding: 4rem 2rem 2rem;
    max-width: var(--teaser-compact-content-max-width);
}

#teaser-slider.teaser-compact h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.6rem);
    margin-bottom: 1rem;
}

#teaser-slider.teaser-compact .label {
    margin-bottom: 1rem;
}

#teaser-slider.teaser-compact .content p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

#teaser-slider.teaser-compact hr {
    margin-bottom: 1rem;
}

@media screen and (max-width: 44.999rem) {
    #teaser-slider.teaser-compact .slide {
        min-height: var(--teaser-compact-min-height-mobile);
    }

    #teaser-slider.teaser-compact .content {
        padding-top: 3rem;
    }
}

@media screen and (min-width: 45rem) and (max-width: 79.499rem) {
    #teaser-slider.teaser-compact .slide {
        min-height: var(--teaser-compact-min-height-tablet);
    }

    #teaser-slider.teaser-compact .content {
        padding-top: 3.5rem;
    }
}

/* ============================================================
   Welcome Variant — vollflächiger Wegweiser-Hero mit 2+ CTAs.
   Auto-aktiv wenn der Slide ein buttons[]-Array hat (siehe Teaser.php).
   ============================================================ */

#teaser-slider.teaser-welcome .slide {
    min-height: var(--teaser-welcome-min-height-fallback);
    min-height: var(--teaser-welcome-min-height);
}

#teaser-slider.teaser-welcome .content {
    max-width: var(--teaser-welcome-content-max-width);
}

#teaser-slider.teaser-welcome .buttons {
    display: flex;
    gap: var(--teaser-welcome-buttons-gap);
    justify-content: center;
    flex-wrap: wrap;
}

#teaser-slider.teaser-welcome .buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    background: var(--teaser-welcome-btn-bg);
    color: var(--teaser-welcome-btn-color);
    border: 1px solid var(--teaser-welcome-btn-border);
    border-radius: var(--btn-radius);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: var(--button-tracking);
    transition: background var(--transition), transform var(--transition);
    backdrop-filter: blur(0.5rem);
}

#teaser-slider.teaser-welcome .buttons .btn:hover {
    background: var(--teaser-welcome-btn-bg-hover);
    transform: translateY(-0.125rem);
}

@media (max-width: 44.999rem) {
    #teaser-slider.teaser-welcome .buttons {
        flex-direction: column;
        width: 100%;
    }
    #teaser-slider.teaser-welcome .buttons .btn {
        justify-content: center;
    }
}