/* =========================================================
   SLIDESHOW CONTAINER
   ========================================================= */

#slideshow_aussen {
    position: relative;
    overflow: hidden;
}

/* =========================================================
   SLIDESHOW HÖHEN
   ========================================================= */

/* Desktop / Tablet */
#slideshow_aussen .carousel-image-wrapper {
    height: 600px;
    overflow: hidden;
}

/* Mobile */
@media (max-width: 575.98px) {
    #slideshow_aussen .carousel-image-wrapper {
        height: 320px;   /* KEIN min-height! */
    }
}

/* =========================================================
   BILDER
   ========================================================= */

#slideshow_aussen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================
   KEN-BURNS EFFEKT
   ========================================================= */

@keyframes kenburns {
    from {
        transform: scale(1) translate(0, 0);
    }
    to {
        transform: scale(1.1) translate(-2%, -2%);
    }
}

.kenburns img {
    animation: kenburns 8s ease-in-out infinite alternate;
}

/* =========================================================
   TEXT OVERLAY
   ========================================================= */

.slideshow-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    padding-top: 2rem;
    padding-bottom: clamp(120px, 18vw, 260px); /* Platz für Schrägen */
}



@media (max-width: 575.98px) {
    .slideshow-overlay {
        justify-content: flex-start;
        padding-top: 2.5rem;
    }
}

/* =========================================================
   TYPOGRAFIE
   ========================================================= */

.slideshow-title {
    font-size: clamp(2rem, 3.2vw, 3.4rem);
    line-height: 1.15;
    margin-bottom: 0.4rem;
}

.slideshow-subtitle {
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    line-height: 1.3;
    margin: 0;
}

/* =========================================================
   TEXTSCHATTEN
   ========================================================= */

.text-shadow-slideshow {
text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.4),
             -3px -3px 7px rgba(0, 0, 0, 0.4),
             -3px 3px 7px rgba(0, 0, 0, 0.4),
             3px -3px 7px rgba(0, 0, 0, 0.4);
}

/* =========================================================
   3 DYNAMISCHE SCHRÄGEN – BERGAUF & BERGAB
   ========================================================= */

/* Gemeinsame Basis */
#slideshow_aussen::before,
#slideshow_aussen::after,
#slideshow_aussen .slant-layer-3 {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
}

/* ---------------------------------------------------------
   Schritt 1: eine Schräge (66% transparent), bergab nach rechts ↘︎
   --------------------------------------------------------- */

#slideshow_aussen::after {
    bottom: 0;
    height: clamp(140px, 16vw, 280px);
    background: rgba(255, 255, 255, 0.3);
    z-index: 6;

    clip-path: polygon(
        0 10%,
        100% 40%,
        100% 100%,
        0 100%
    );
}

/* ---------------------------------------------------------
   Schritt 2: zweite Schräge (30% transparent), bergauf nach rechts ↗︎
   --------------------------------------------------------- */

#slideshow_aussen::before {
    bottom: 0;
    height: clamp(120px, 12vw, 240px);
    background: rgba(255, 255, 255, 0.5);
    z-index: 5;

    clip-path: polygon(
        0 65%,
        100% 0%,
        100% 100%,
        0 100%
    );
}

/* ---------------------------------------------------------
   Schritt 3: unterste Schräge (0% transparent), ruhiger Abschluss ↗︎
   --------------------------------------------------------- */

#slideshow_aussen .slant-layer-3 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: clamp(70px, 7vw, 140px);
    background: #ffffff;
    z-index: 4;

    clip-path: polygon(
        0 55%,
        100% 0%,
        100% 100%,
        0 100%
    );
}