/* =========================================================
   RIXES SLEEP – KOLLEKTIONEN
   SCROLL ANIMATION
   ========================================================= */

.rx-modern-collections,
.rx-modern-collections * {
    box-sizing: border-box;
}


.rx-modern-collections {
    --rx-blue: #2f426f;
    --rx-blue-dark: #1f2d4d;
    --rx-gold: #b99162;
    --rx-cream: #f6f2ed;
    --rx-text: #625d58;

    width: 100%;

    padding:
        92px
        0
        96px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(255,255,255,.72),
            transparent 25%
        ),
        var(--rx-cream);

    font-family:
        "Montserrat",
        sans-serif;
}


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

.rx-modern-collections__inner {
    width:
        min(
            1380px,
            calc(100% - 100px)
        );

    margin:
        0
        auto;
}


/* =========================================================
   INTRO
   ========================================================= */

.rx-modern-collections__head {
    display: grid;

    grid-template-columns:
        1fr
        .7fr;

    gap:
        60px;

    align-items:
        end;

    margin-bottom:
        44px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.rx-modern-collections__eyebrow {
    display: flex;

    align-items: center;

    gap:
        14px;

    margin-bottom:
        17px;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        600;

    letter-spacing:
        4.5px;

    text-transform:
        uppercase;

    color:
        var(--rx-gold);
}


.rx-modern-collections__eyebrow::before {
    content: "";

    width:
        42px;

    height:
        1px;

    flex:
        0 0 42px;

    background:
        var(--rx-gold);

    transform-origin:
        left center;
}


/* =========================================================
   TITLE
   ========================================================= */

.rx-modern-collections__title {
    margin:
        0 !important;

    padding:
        0 !important;

    font-family:
        "Cormorant Garamond",
        serif !important;

    font-size:
        clamp(
            46px,
            4vw,
            66px
        ) !important;

    line-height:
        .98 !important;

    font-weight:
        400 !important;

    letter-spacing:
        -.8px !important;

    color:
        var(--rx-blue-dark) !important;
}


/* =========================================================
   INTRO TEXT
   ========================================================= */

.rx-modern-collections__intro {
    max-width:
        470px;

    margin:
        0
        0
        4px
        auto !important;

    padding:
        0 !important;

    font-size:
        15px !important;

    line-height:
        1.75 !important;

    color:
        var(--rx-text) !important;
}


/* =========================================================
   GRID
   ========================================================= */

.rx-modern-collections__grid {
    display: grid;

    grid-template-columns:
        repeat(12,1fr);

    gap:
        18px;
}


/* =========================================================
   CARD
   ========================================================= */

.rx-modern-card {
    position: relative;

    min-height:
        390px;

    overflow:
        hidden;

    isolation:
        isolate;

    border-radius:
        18px;

    text-decoration:
        none !important;

    background:
        #d5d0cb;

    box-shadow:
        0 16px 40px
        rgba(38,31,28,.055);

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease;
}


/* asymmetrische Breiten */

.rx-modern-card:nth-child(4n+1) {
    grid-column:
        span 7;
}

.rx-modern-card:nth-child(4n+2) {
    grid-column:
        span 5;
}

.rx-modern-card:nth-child(4n+3) {
    grid-column:
        span 5;
}

.rx-modern-card:nth-child(4n+4) {
    grid-column:
        span 7;
}


.rx-modern-card:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 26px 55px
        rgba(38,31,28,.13);
}


/* =========================================================
   BILD
   ========================================================= */

.rx-modern-card__image {
    position: absolute;

    inset: 0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center center;

    transition:
        transform .9s
        cubic-bezier(.2,.7,.2,1),
        filter .5s ease;
}


.rx-modern-card:hover
.rx-modern-card__image {
    transform:
        scale(1.055);
}


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

.rx-modern-card::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(16,25,40,.02) 8%,
            rgba(16,25,40,.13) 44%,
            rgba(16,25,40,.90) 100%
        );

    transition:
        background .4s ease;
}


.rx-modern-card:hover::before {
    background:
        linear-gradient(
            180deg,
            rgba(16,25,40,.01) 8%,
            rgba(16,25,40,.10) 42%,
            rgba(16,25,40,.94) 100%
        );
}


.rx-modern-card::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius:
        inherit;

    pointer-events:
        none;
}


/* =========================================================
   TOP
   ========================================================= */

.rx-modern-card__top {
    position: absolute;

    z-index: 3;

    top:
        22px;

    left:
        22px;

    right:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.rx-modern-card__number {
    min-width:
        40px;

    height:
        30px;

    padding:
        0
        12px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(255,255,255,.27);

    border-radius:
        999px;

    background:
        rgba(18,27,42,.20);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    font-size:
        9px;

    line-height:
        1;

    font-weight:
        600;

    letter-spacing:
        2px;

    color:
        #fff;
}


.rx-modern-card__category {
    font-size:
        9px;

    line-height:
        1;

    font-weight:
        600;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

    color:
        rgba(255,255,255,.78);
}


/* =========================================================
   BOTTOM CONTENT
   ========================================================= */

.rx-modern-card__content {
    position:
        absolute;

    z-index:
        3;

    left:
        30px;

    right:
        30px;

    bottom:
        28px;

    padding-right:
        70px;
}


.rx-modern-card__accent {
    display:
        block;

    width:
        38px;

    height:
        2px;

    margin-bottom:
        13px;

    background:
        var(--rx-gold);

    transform-origin:
        left center;

    transition:
        width .4s
        cubic-bezier(.22,1,.36,1);
}


.rx-modern-card:hover
.rx-modern-card__accent {
    width:
        58px;
}


.rx-modern-card__title {
    margin:
        0
        0
        8px !important;

    padding:
        0 !important;

    font-family:
        "Cormorant Garamond",
        serif !important;

    font-size:
        38px !important;

    line-height:
        1 !important;

    font-weight:
        400 !important;

    letter-spacing:
        -.4px !important;

    color:
        #fff !important;
}


.rx-modern-card__text {
    max-width:
        430px;

    margin:
        0 !important;

    padding:
        0 !important;

    font-size:
        13px !important;

    line-height:
        1.55 !important;

    font-weight:
        400 !important;

    color:
        rgba(255,255,255,.78) !important;
}


/* =========================================================
   ARROW
   ========================================================= */

.rx-modern-card__arrow {
    position:
        absolute;

    z-index:
        4;

    right:
        28px;

    bottom:
        28px;

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(255,255,255,.35);

    border-radius:
        50%;

    background:
        rgba(255,255,255,.08);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    font-size:
        18px;

    line-height:
        1;

    color:
        #fff;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .35s cubic-bezier(.22,1,.36,1);
}


.rx-modern-card:hover
.rx-modern-card__arrow {
    border-color:
        var(--rx-gold);

    background:
        var(--rx-gold);

    transform:
        translate(3px,-3px);
}


/* =========================================================
   ENTRANCE ANIMATION
   Wird nur aktiviert, wenn JS vorhanden ist
   ========================================================= */

.rx-modern-collections.rx-animate-ready
.rx-modern-collections__head > div {
    opacity:
        0;

    transform:
        translateY(28px);

    filter:
        blur(4px);
}


.rx-modern-collections.rx-animate-ready
.rx-modern-collections__intro {
    opacity:
        0;

    transform:
        translateY(25px);

    filter:
        blur(3px);
}


.rx-modern-collections.rx-animate-ready
.rx-modern-collections__eyebrow::before {
    transform:
        scaleX(0);
}


.rx-modern-collections.rx-animate-ready
.rx-modern-card {
    opacity:
        0;

    transform:
        translateY(42px)
        scale(.975);
}


.rx-modern-collections.rx-animate-ready
.rx-modern-card__image {
    transform:
        scale(1.08);
}


.rx-modern-collections.rx-animate-ready
.rx-modern-card__top {
    opacity:
        0;

    transform:
        translateY(-10px);
}


.rx-modern-collections.rx-animate-ready
.rx-modern-card__content {
    opacity:
        0;

    transform:
        translateY(20px);
}


.rx-modern-collections.rx-animate-ready
.rx-modern-card__arrow {
    opacity:
        0;

    transform:
        scale(.75);
}


/* =========================================================
   SECTION WIRD SICHTBAR
   ========================================================= */

.rx-modern-collections.rx-animate-ready.is-visible
.rx-modern-collections__head > div {
    animation:
        rxCollectionsFadeUp
        .9s
        cubic-bezier(.22,1,.36,1)
        .08s
        forwards;
}


.rx-modern-collections.rx-animate-ready.is-visible
.rx-modern-collections__intro {
    animation:
        rxCollectionsFadeUp
        .9s
        cubic-bezier(.22,1,.36,1)
        .22s
        forwards;
}


.rx-modern-collections.rx-animate-ready.is-visible
.rx-modern-collections__eyebrow::before {
    animation:
        rxCollectionsLineIn
        .75s
        cubic-bezier(.22,1,.36,1)
        .34s
        forwards;
}


/* =========================================================
   CARD STAGGER
   ========================================================= */

.rx-modern-collections.rx-animate-ready.is-visible
.rx-modern-card:nth-child(4n+1) {
    animation:
        rxCollectionsCardIn
        .95s
        cubic-bezier(.22,1,.36,1)
        .30s
        forwards;
}


.rx-modern-collections.rx-animate-ready.is-visible
.rx-modern-card:nth-child(4n+2) {
    animation:
        rxCollectionsCardIn
        .95s
        cubic-bezier(.22,1,.36,1)
        .42s
        forwards;
}


.rx-modern-collections.rx-animate-ready.is-visible
.rx-modern-card:nth-child(4n+3) {
    animation:
        rxCollectionsCardIn
        .95s
        cubic-bezier(.22,1,.36,1)
        .54s
        forwards;
}


.rx-modern-collections.rx-animate-ready.is-visible
.rx-modern-card:nth-child(4n+4) {
    animation:
        rxCollectionsCardIn
        .95s
        cubic-bezier(.22,1,.36,1)
        .66s
        forwards;
}


/* BILDER */

.rx-modern-collections.rx-animate-ready.is-visible
.rx-modern-card:nth-child(4n+1)
.rx-modern-card__image {
    animation:
        rxCollectionsImageIn
        1.5s
        cubic-bezier(.22,1,.36,1)
        .28s
        forwards;
}


.rx-modern-collections.rx-animate-ready.is-visible
.rx-modern-card:nth-child(4n+2)
.rx-modern-card__image {
    animation:
        rxCollectionsImageIn
        1.5s
        cubic-bezier(.22,1,.36,1)
        .40s
        forwards;
}


.rx-modern-collections.rx-animate-ready.is-visible
.rx-modern-card:nth-child(4n+3)
.rx-modern-card__image {
    animation:
        rxCollectionsImageIn
        1.5s
        cubic-bezier(.22,1,.36,1)
        .52s
        forwards;
}


.rx-modern-collections.rx-animate-ready.is-visible
.rx-modern-card:nth-child(4n+4)
.rx-modern-card__image {
    animation:
        rxCollectionsImageIn
        1.5s
        cubic-bezier(.22,1,.36,1)
        .64s
        forwards;
}


/* TOP + CONTENT + ARROW */

.rx-modern-collections.rx-animate-ready.is-visible
.rx-modern-card__top {
    animation:
        rxCollectionsSmallIn
        .7s
        cubic-bezier(.22,1,.36,1)
        forwards;
}


.rx-modern-collections.rx-animate-ready.is-visible
.rx-modern-card__content {
    animation:
        rxCollectionsContentIn
        .75s
        cubic-bezier(.22,1,.36,1)
        forwards;
}


.rx-modern-collections.rx-animate-ready.is-visible
.rx-modern-card__arrow {
    animation:
        rxCollectionsArrowIn
        .65s
        cubic-bezier(.22,1,.36,1)
        forwards;
}


/* Verzögerungen der Inhalte */

.rx-modern-collections.is-visible
.rx-modern-card:nth-child(4n+1)
.rx-modern-card__top {
    animation-delay:
        .54s;
}

.rx-modern-collections.is-visible
.rx-modern-card:nth-child(4n+1)
.rx-modern-card__content {
    animation-delay:
        .62s;
}

.rx-modern-collections.is-visible
.rx-modern-card:nth-child(4n+1)
.rx-modern-card__arrow {
    animation-delay:
        .72s;
}


.rx-modern-collections.is-visible
.rx-modern-card:nth-child(4n+2)
.rx-modern-card__top {
    animation-delay:
        .66s;
}

.rx-modern-collections.is-visible
.rx-modern-card:nth-child(4n+2)
.rx-modern-card__content {
    animation-delay:
        .74s;
}

.rx-modern-collections.is-visible
.rx-modern-card:nth-child(4n+2)
.rx-modern-card__arrow {
    animation-delay:
        .84s;
}


.rx-modern-collections.is-visible
.rx-modern-card:nth-child(4n+3)
.rx-modern-card__top {
    animation-delay:
        .78s;
}

.rx-modern-collections.is-visible
.rx-modern-card:nth-child(4n+3)
.rx-modern-card__content {
    animation-delay:
        .86s;
}

.rx-modern-collections.is-visible
.rx-modern-card:nth-child(4n+3)
.rx-modern-card__arrow {
    animation-delay:
        .96s;
}


.rx-modern-collections.is-visible
.rx-modern-card:nth-child(4n+4)
.rx-modern-card__top {
    animation-delay:
        .90s;
}

.rx-modern-collections.is-visible
.rx-modern-card:nth-child(4n+4)
.rx-modern-card__content {
    animation-delay:
        .98s;
}

.rx-modern-collections.is-visible
.rx-modern-card:nth-child(4n+4)
.rx-modern-card__arrow {
    animation-delay:
        1.08s;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes rxCollectionsFadeUp {

    from {
        opacity:
            0;

        transform:
            translateY(28px);

        filter:
            blur(4px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);

        filter:
            blur(0);
    }

}


@keyframes rxCollectionsLineIn {

    from {
        transform:
            scaleX(0);
    }

    to {
        transform:
            scaleX(1);
    }

}


@keyframes rxCollectionsCardIn {

    from {
        opacity:
            0;

        transform:
            translateY(42px)
            scale(.975);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }

}


@keyframes rxCollectionsImageIn {

    from {
        transform:
            scale(1.08);
    }

    to {
        transform:
            scale(1);
    }

}


@keyframes rxCollectionsSmallIn {

    from {
        opacity:
            0;

        transform:
            translateY(-10px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


@keyframes rxCollectionsContentIn {

    from {
        opacity:
            0;

        transform:
            translateY(20px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


@keyframes rxCollectionsArrowIn {

    from {
        opacity:
            0;

        transform:
            scale(.75);
    }

    to {
        opacity:
            1;

        transform:
            scale(1);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .rx-modern-collections {
        padding:
            70px
            0;
    }


    .rx-modern-collections__inner {
        width:
            calc(100% - 60px);
    }


    .rx-modern-collections__head {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }


    .rx-modern-collections__intro {
        margin-left:
            0 !important;
    }


    .rx-modern-card:nth-child(n) {
        grid-column:
            span 6;
    }


    .rx-modern-card {
        min-height:
            360px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .rx-modern-collections {
        padding:
            52px
            0;
    }


    .rx-modern-collections__inner {
        width:
            calc(100% - 36px);
    }


    .rx-modern-collections__head {
        margin-bottom:
            30px;
    }


    .rx-modern-collections__title {
        font-size:
            42px !important;
    }


    .rx-modern-collections__intro {
        font-size:
            14px !important;
    }


    .rx-modern-collections__grid {
        grid-template-columns:
            1fr;

        gap:
            14px;
    }


    .rx-modern-card:nth-child(n) {
        grid-column:
            auto;
    }


    .rx-modern-card {
        min-height:
            370px;

        border-radius:
            14px;
    }


    .rx-modern-card__top {
        top:
            18px;

        left:
            18px;

        right:
            18px;
    }


    .rx-modern-card__content {
        left:
            22px;

        right:
            22px;

        bottom:
            22px;

        padding-right:
            55px;
    }


    .rx-modern-card__title {
        font-size:
            32px !important;
    }


    .rx-modern-card__text {
        font-size:
            12px !important;
    }


    .rx-modern-card__arrow {
        right:
            20px;

        bottom:
            20px;

        width:
            42px;

        height:
            42px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .rx-modern-collections__inner {
        width:
            calc(100% - 28px);
    }


    .rx-modern-collections__title {
        font-size:
            38px !important;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .rx-modern-collections.rx-animate-ready
    .rx-modern-collections__head > div,

    .rx-modern-collections.rx-animate-ready
    .rx-modern-collections__intro,

    .rx-modern-collections.rx-animate-ready
    .rx-modern-card,

    .rx-modern-collections.rx-animate-ready
    .rx-modern-card__image,

    .rx-modern-collections.rx-animate-ready
    .rx-modern-card__top,

    .rx-modern-collections.rx-animate-ready
    .rx-modern-card__content,

    .rx-modern-collections.rx-animate-ready
    .rx-modern-card__arrow {
        animation:
            none !important;

        opacity:
            1 !important;

        transform:
            none !important;

        filter:
            none !important;
    }


    .rx-modern-collections__eyebrow::before {
        animation:
            none !important;

        transform:
            scaleX(1) !important;
    }

}

/* =========================================================
   ELEMENTOR WIDGET – BILDAUSSCHNITT
   ========================================================= */
.rx-modern-card__image.rx-img-pos-left-top { object-position: left top; }
.rx-modern-card__image.rx-img-pos-center-top { object-position: center top; }
.rx-modern-card__image.rx-img-pos-right-top { object-position: right top; }
.rx-modern-card__image.rx-img-pos-left-center { object-position: left center; }
.rx-modern-card__image.rx-img-pos-center-center { object-position: center center; }
.rx-modern-card__image.rx-img-pos-right-center { object-position: right center; }
.rx-modern-card__image.rx-img-pos-left-bottom { object-position: left bottom; }
.rx-modern-card__image.rx-img-pos-center-bottom { object-position: center bottom; }
.rx-modern-card__image.rx-img-pos-right-bottom { object-position: right bottom; }

/* Elementor-Editor: Widget bleibt beim Bearbeiten zuverlässig sichtbar. */
.elementor-editor-active .rx-modern-collections.rx-animate-ready .rx-modern-collections__head > div,
.elementor-editor-active .rx-modern-collections.rx-animate-ready .rx-modern-collections__intro,
.elementor-editor-active .rx-modern-collections.rx-animate-ready .rx-modern-card,
.elementor-editor-active .rx-modern-collections.rx-animate-ready .rx-modern-card__image,
.elementor-editor-active .rx-modern-collections.rx-animate-ready .rx-modern-card__top,
.elementor-editor-active .rx-modern-collections.rx-animate-ready .rx-modern-card__content,
.elementor-editor-active .rx-modern-collections.rx-animate-ready .rx-modern-card__arrow {
    opacity: 1;
    filter: none;
}