.carousel {
    position              : relative;
    display               : grid;
    grid-template-columns : auto;
    grid-template-rows    : auto;
    grid-template-areas   :
        "slides"
        "navigation";
    overflow              : hidden;
    
    > div.nav {
        grid-area       : navigation;
        margin          : 0 0.2rem 0.2rem 0.2rem;
        padding         : 0 2rem 2rem 2rem;
        display         : flex;
        flex-direction  : row;
        justify-content : flex-end;
        justify-self    : stretch;
        position        : relative;
        z-index         : 10;
        
        a {
            pointer-events  : all;
            display         : flex;
            align-items     : center;
            text-decoration : none;
            color           : rgba(255, 255, 255, 0.9);
            
            &:hover {
                color : #ffffff;
            }
        }
        
        .outer {
            font-size       : 60px;
            display         : flex;
            align-items     : center;
            justify-content : center;
        }
        
        .inner {
            font-size       : 46px;
            margin-left     : -46px;
            margin-right    : -46px;
            display         : flex;
            align-items     : center;
            justify-content : center;
        }
        
        div.prev .inner {
            margin-right : -0.5rem;
        }
        
        div.next .inner {
            margin-left : -0.5rem;
        }
        
    }
    
    > .slide {
        grid-area      : slides;
        inset          : 0;
        display        : grid;
        opacity        : 0;
        transform      : translateX(0);
        transition     : transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s linear;
        pointer-events : none;
        z-index        : 1;
        will-change    : transform, opacity;
    }
    
    > .slide.active {
        opacity        : 1;
        transform      : translateX(0);
        pointer-events : auto;
        z-index        : 2;
    }
    
    /* Animation States */
    
    &.animating-next {
        > .slide.active {
            transform : translateX(-100%);
            opacity   : 0;
        }
        
        > .slide.next-up {
            transform : translateX(0);
            opacity   : 1;
            z-index   : 3;
        }
    }
    
    &.animating-prev {
        > .slide.active {
            transform : translateX(100%);
            opacity   : 0;
        }
        
        > .slide.next-up {
            transform : translateX(0);
            opacity   : 1;
            z-index   : 3;
        }
    }
    
    /* Start Positions */
    
    > .slide.prepare-next {
        transform : translateX(100%);
        opacity   : 1;
        z-index   : 3;
    }
    
    > .slide.prepare-prev {
        transform : translateX(-100%);
        opacity   : 1;
        z-index   : 3;
    }
}


.hero {
    container-name : hero-banner;
    container-type : inline-size;
    /*background     : radial-gradient(circle var(--width-container) at center, hsla(0, 0%, 100%, 0.75) 0%, transparent 100%) no-repeat center var(--color-accent-light);*/
    /*background       : radial-gradient(circle calc(var(--width-container) / 2.5) at center, #ffffff 0%, #eece8c 80%);*/
    padding        : 4rem 0;
}

.hero-feature {
    position              : relative;
    display               : grid;
    grid-template-columns : auto;
    grid-template-rows    : auto auto auto;
    grid-template-areas   :
        "image"
        "infobox";
    justify-items         : center;
    align-items           : center;
    
    > div.infobox {
        grid-area : infobox;
        
        > p {
            font-weight : 300;
        }
    }
    
    > div.image {
        grid-area : image;
    }
}

@container hero-banner (width > 70rem) {
    .carousel {
        grid-template-columns : 1fr 1fr 1fr;
        grid-template-rows    : auto;
        grid-template-areas   : ". slides .";
        
        div.nav {
            grid-column-start : 1;
            grid-column-end   : 4;
            grid-row-start    : 1;
            grid-row-end      : 2;
            pointer-events    : none;
            background-color  : transparent;
            justify-content   : space-between;
            height            : 100%;
            margin            : 0;
            padding           : 0;
            align-items       : center;
            
            div.prev, div.next {
                transition    : opacity 0.25s ease-in-out;
                opacity       : 0.5;
                display       : flex;
                align-items   : center;
                align-content : center;
                height        : 100%;
            }
            
            div.prev {
                justify-content : flex-start;
                text-align      : left;
                /*background      : radial-gradient(circle at left center, #ffffff 0%, transparent 30%);*/
            }
            
            div.next {
                justify-content : flex-end;
                text-align      : right;
                /*background      : radial-gradient(circle at right center, #ffffff 0%, transparent 30%);*/
            }
            
            svg {
                height : 5rem;
                width  : auto;
            }
        }
        
        &:hover div.nav {
            div.prev, div.next {
                opacity : 0.5;
            }
            
            div.prev:has(a:hover), div.next:has(a:hover) {
                opacity : 1;
            }
        }
    }
    
    .hero-feature {
        grid-template-columns : minmax(25rem, 40rem) minmax(20rem, auto);
        grid-template-rows    : auto;
        grid-template-areas   : "infobox image";
        
        > div.infobox {
            border-radius : 1.25rem;
        }
        
        > div.image {
        
        }
    }
    
}


/* Responsive Tweaks: Hero & Carousel for <= 70rem */
@container hero-banner (width <= 70rem) {
    .carousel {
        /* Reduziere die starre Höhe auf eine flexible, viewport-basierte */
        grid-template-rows : 1fr auto; /* Slide oben, Nav unten */
        display            : block;
    }
    
    .carousel > .slide {
        /* Verhindert, dass Inhalt an den Rändern klebt und hilft bei sehr kleinen Höhen */
        align-content   : center;
        justify-content : center;
        
    }
    
    .carousel > div.nav {
        /* Kompaktere Navigation am unteren Rand */
        margin  : 0 0.2rem 0.4rem 0.2rem;
        padding : 0 1rem 1rem 1rem;
    }
    
    .carousel > div.nav .outer {
        font-size : 40px;
    }
    
    .carousel > div.nav .inner {
        font-size    : 30px;
        margin-left  : -30px;
        margin-right : -30px;
    }
    
    .hero-feature {
        /* Einspaltiges, zentriertes Layout ist ok, aber kompaktere Abstände */
        row-gap       : 0.75rem;
        justify-items : center;
        align-items   : center;
    }
    
    .hero-feature > div.infobox {
        text-align : center;
        max-width  : 36rem;
    }
    
    .hero-feature > div.infobox h1 {
        font-size   : clamp(1.4rem, 4.5vw, 2rem);
        line-height : 1.2;
    }
    
    .hero-feature > div.infobox h4 {
        font-size   : clamp(1rem, 3.6vw, 1.25rem);
        line-height : 1.3;
        color       : var(--font-color-highlight);
    }
    
    .hero-feature > div.infobox p {
        font-size : clamp(0.95rem, 3.4vw, 1rem);
    }
    
    .hero-feature > div.image {
        margin      : 0.5rem 0 0 0;
        display     : grid;
        place-items : center;
    }
    
    .hero-feature > div.image img {
        /* Bilder sauber skalieren, ohne zu dominieren */
        width      : min(85vw, 28rem);
        max-height : 40vh;
        height     : auto;
        object-fit : contain;
    }
}