/**
 * Jung Leben
 * Redcare Partner-Demo
 */


/* =========================================================
   BASIS
   ========================================================= */

.redcare-page {
    --jl-redcare-green: #173c32;
    --jl-redcare-green-medium: #315b49;
    --jl-redcare-text: #52665c;
    --jl-redcare-muted: #7a8881;
    --jl-redcare-line: rgba(23, 60, 50, 0.09);

    color: var(--jl-redcare-green);

    background: #ffffff;
}


.redcare-page > .container,
.redcare-page section > .container {
    width: min(
        calc(100% - 44px),
        1180px
    );
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.redcare-breadcrumb {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    padding:
        22px
        0
        14px;

    color: #829087;

    font-size: 0.78rem;
}


.redcare-breadcrumb a {
    color: var(--jl-redcare-green-medium);

    font-weight: 700;

    text-decoration: none;
}


.redcare-breadcrumb a:hover {
    text-decoration: underline;

    text-underline-offset: 3px;
}


/* =========================================================
   HERO
   ========================================================= */

.redcare-hero {
    overflow: hidden;

    padding:
        clamp(
            58px,
            8vw,
            100px
        )
        0
        clamp(
            72px,
            9vw,
            112px
        );

    background:
        radial-gradient(
            circle at 83% 24%,
            rgba(199, 221, 161, 0.36),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #f8faf6 0%,
            #edf4ea 100%
        );
}


.redcare-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(310px, 0.88fr);

    align-items: center;

    gap:
        clamp(
            55px,
            8vw,
            105px
        );
}


.redcare-hero__content {
    max-width: 700px;
}


.redcare-page .eyebrow {
    margin:
        0
        0
        13px;

    color: #75867c;

    font-size: 0.68rem;
    font-weight: 780;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.redcare-hero h1 {
    max-width: 740px;

    margin: 0;

    color: var(--jl-redcare-green);

    font-size:
        clamp(
            3rem,
            5.6vw,
            5.15rem
        );

    font-weight: 720;

    line-height: 0.98;

    letter-spacing: -0.052em;
}


.redcare-hero__lead {
    max-width: 650px;

    margin:
        26px
        0
        0;

    color: #496057;

    font-size:
        clamp(
            1.07rem,
            1.4vw,
            1.2rem
        );

    line-height: 1.67;
}


.redcare-hero__text {
    max-width: 630px;

    margin:
        16px
        0
        0;

    color: #63756d;

    font-size: 0.95rem;

    line-height: 1.7;
}


.redcare-hero__tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 27px;
}


.redcare-hero__tags span {
    min-height: 32px;

    display: inline-flex;

    align-items: center;

    padding:
        0
        12px;

    color: #4d675b;

    background: rgba(255, 255, 255, 0.68);

    border:
        1px solid
        rgba(23, 60, 50, 0.07);

    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: 700;
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.redcare-hero__visual {
    min-height: 390px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;
}


.redcare-visual {
    position: relative;

    width: 345px;
    height: 285px;
}


.redcare-visual__product {
    position: absolute;

    bottom: 15px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(23, 60, 50, 0.08);

    box-shadow:
        0 25px 50px
        rgba(23, 60, 50, 0.10);
}


.redcare-visual__product--one {
    width: 125px;
    height: 220px;

    left: 18px;

    z-index: 3;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #edf3e9 100%
        );

    border-radius:
        14px
        14px
        20px
        20px;

    transform: rotate(-6deg);
}


.redcare-visual__product--two {
    width: 110px;
    height: 195px;

    left: 123px;

    z-index: 2;

    background:
        linear-gradient(
            145deg,
            #e3edcd 0%,
            #c6d9a1 100%
        );

    border-radius:
        12px
        12px
        18px
        18px;

    transform: rotate(4deg);
}


.redcare-visual__product--three {
    width: 100px;
    height: 175px;

    left: 220px;

    z-index: 1;

    background:
        linear-gradient(
            145deg,
            #315b49 0%,
            #173c32 100%
        );

    border-radius:
        12px
        12px
        17px
        17px;

    transform: rotate(9deg);
}


.redcare-visual__cap {
    position: absolute;

    width: 68%;

    height: 25px;

    top: -15px;

    left: 16%;

    background: #ffffff;

    border:
        1px solid
        rgba(23, 60, 50, 0.08);

    border-radius:
        8px
        8px
        4px
        4px;
}


.redcare-visual__label {
    font-size: 1.15rem;
    font-weight: 800;

    letter-spacing: -0.03em;
}


.redcare-visual__product--one
.redcare-visual__label {
    color: #315b49;
}


.redcare-visual__product--two
.redcare-visual__label {
    color: #536b35;
}


.redcare-visual__product--three
.redcare-visual__label {
    color: #ffffff;
}


.redcare-hero__visual-note {
    max-width: 280px;

    margin:
        4px
        0
        0;

    color: #697a72;

    font-size: 0.78rem;
    font-weight: 620;

    text-align: center;
}


/* =========================================================
   GEMEINSAME ÜBERSCHRIFTEN
   ========================================================= */

.redcare-section-heading {
    max-width: 720px;
}


.redcare-section-heading h2,
.redcare-selection h2,
.redcare-journey h2,
.redcare-partner-preview h2 {
    margin: 0;

    color: var(--jl-redcare-green);

    font-size:
        clamp(
            2rem,
            3.3vw,
            3.15rem
        );

    font-weight: 720;

    line-height: 1.05;

    letter-spacing: -0.042em;
}


.redcare-section-heading > p:last-child {
    max-width: 650px;

    margin:
        20px
        0
        0;

    color: var(--jl-redcare-text);

    font-size: 1rem;

    line-height: 1.7;
}


/* =========================================================
   PRINZIPIEN
   ========================================================= */

.redcare-principles {
    padding:
        clamp(
            72px,
            8vw,
            105px
        )
        0;
}


.redcare-principles__grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 18px;

    margin-top:
        clamp(
            36px,
            5vw,
            52px
        );
}


.redcare-principle {
    min-height: 220px;

    padding:
        28px
        27px;

    background: #f7f9f5;

    border:
        1px solid
        var(--jl-redcare-line);

    border-radius: 16px;
}


.redcare-principle__number {
    display: block;

    margin-bottom: 35px;

    color: #91a187;

    font-size: 0.69rem;
    font-weight: 800;

    letter-spacing: 0.12em;
}


.redcare-principle h3 {
    margin:
        0
        0
        12px;

    color: #294e40;

    font-size: 1.1rem;
}


.redcare-principle p {
    margin: 0;

    color: #61736a;

    font-size: 0.88rem;

    line-height: 1.65;
}


/* =========================================================
   PRODUKTAUSWAHL
   ========================================================= */

.redcare-selection {
    padding:
        clamp(
            75px,
            9vw,
            112px
        )
        0;

    background: #f5f7f2;
}


.redcare-selection__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 0.72fr);

    align-items: end;

    gap: 60px;
}


.redcare-selection__intro {
    max-width: 440px;

    margin:
        0
        0
        5px;

    color: #65766d;

    font-size: 0.91rem;

    line-height: 1.7;
}


.redcare-products {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 20px;

    margin-top:
        clamp(
            42px,
            6vw,
            62px
        );
}


/* =========================================================
   PRODUKTKARTE
   ========================================================= */

.redcare-product-card {
    display: grid;

    grid-template-columns:
        130px
        minmax(0, 1fr);

    gap: 25px;

    padding: 25px;

    background: #ffffff;

    border:
        1px solid
        rgba(23, 60, 50, 0.08);

    border-radius: 18px;

    box-shadow:
        0 12px 30px
        rgba(23, 60, 50, 0.035);
}


.redcare-product-card__visual {
    min-height: 220px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    overflow: hidden;
}


.redcare-product-card__visual--ocean {
    background:
        linear-gradient(
            145deg,
            #e7f0ef 0%,
            #bed6d5 100%
        );
}


.redcare-product-card__visual--sage {
    background:
        linear-gradient(
            145deg,
            #edf3e5 0%,
            #ccdcaf 100%
        );
}


.redcare-product-card__visual--mineral {
    background:
        linear-gradient(
            145deg,
            #edf0ed 0%,
            #ced8d2 100%
        );
}


.redcare-product-card__visual--berry {
    background:
        linear-gradient(
            145deg,
            #f0e9e8 0%,
            #dac3c0 100%
        );
}


.redcare-product-card__bottle {
    position: relative;

    width: 72px;
    height: 132px;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        rgba(
            255,
            255,
            255,
            0.90
        );

    border:
        1px solid
        rgba(23, 60, 50, 0.08);

    border-radius:
        8px
        8px
        14px
        14px;

    box-shadow:
        0 13px 25px
        rgba(23, 60, 50, 0.10);
}


.redcare-product-card__cap {
    position: absolute;

    top: -14px;
    left: 10px;

    width: 52px;
    height: 19px;

    background: #ffffff;

    border:
        1px solid
        rgba(23, 60, 50, 0.09);

    border-radius:
        5px
        5px
        2px
        2px;
}


.redcare-product-card__mark {
    color: #315b49;

    font-size: 1.05rem;
    font-weight: 800;
}


.redcare-product-card__content {
    min-width: 0;

    display: flex;

    flex-direction: column;
}


.redcare-product-card__meta {
    display: flex;

    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 14px;
}


.redcare-product-card__category {
    min-height: 28px;

    display: inline-flex;

    align-items: center;

    padding:
        0
        10px;

    color: #526c60;

    background: #ebf2e7;

    border-radius: 999px;

    font-size: 0.67rem;
    font-weight: 720;
}


.redcare-product-card__brand {
    color: #89968f;

    font-size: 0.65rem;
    font-weight: 720;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.redcare-product-card h3 {
    margin: 0;

    color: var(--jl-redcare-green);

    font-size:
        clamp(
            1.25rem,
            1.7vw,
            1.55rem
        );

    font-weight: 730;

    line-height: 1.18;

    letter-spacing: -0.025em;
}


.redcare-product-card__intro {
    margin:
        16px
        0
        0;

    color: #53685e;

    font-size: 0.87rem;
    font-weight: 550;

    line-height: 1.65;
}


.redcare-product-card__detail {
    margin-top: 17px;
}


.redcare-product-card__detail-label {
    display: block;

    margin-bottom: 5px;

    color: #809087;

    font-size: 0.62rem;
    font-weight: 780;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.redcare-product-card__detail p {
    margin: 0;

    color: #697970;

    font-size: 0.79rem;

    line-height: 1.58;
}


.redcare-product-card__footer {
    margin-top: auto;

    padding-top: 21px;
}


.redcare-product-card__link {
    min-height: 43px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        0
        14px;

    color: #ffffff;

    background: var(--jl-redcare-green-medium);

    border-radius: 10px;

    font-size: 0.76rem;
    font-weight: 720;

    text-decoration: none;
}


.redcare-product-card__planned {
    min-height: 43px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        0
        13px;

    color: #697a72;

    background: #f5f7f3;

    border:
        1px solid
        rgba(23, 60, 50, 0.07);

    border-radius: 10px;

    font-size: 0.7rem;
    font-weight: 680;
}


.redcare-product-card__planned-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    background: #98ad87;

    border-radius: 50%;
}


/* =========================================================
   CUSTOMER JOURNEY
   ========================================================= */

.redcare-journey {
    padding:
        clamp(
            80px,
            9vw,
            112px
        )
        0;
}


.redcare-journey__grid {
    display: grid;

    grid-template-columns:
        minmax(260px, 0.78fr)
        minmax(0, 1.22fr);

    gap:
        clamp(
            60px,
            9vw,
            120px
        );

    align-items: start;
}


.redcare-journey__heading {
    position: sticky;

    top: 115px;
}


.redcare-journey__steps {
    border-top:
        1px solid
        var(--jl-redcare-line);
}


.redcare-journey-step {
    display: grid;

    grid-template-columns:
        45px
        minmax(0, 1fr);

    gap: 21px;

    padding:
        27px
        0;

    border-bottom:
        1px solid
        var(--jl-redcare-line);
}


.redcare-journey-step > span {
    color: #91a187;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.1em;
}


.redcare-journey-step h3 {
    margin:
        0
        0
        8px;

    color: #294e40;

    font-size: 1.05rem;
}


.redcare-journey-step p {
    max-width: 590px;

    margin: 0;

    color: #61736a;

    font-size: 0.88rem;

    line-height: 1.67;
}


/* =========================================================
   PARTNER-VORSCHAU
   ========================================================= */

.redcare-partner-preview {
    padding:
        0
        0
        clamp(
            75px,
            9vw,
            105px
        );
}


.redcare-partner-preview__box {
    display: grid;

    grid-template-columns:
        60px
        minmax(0, 1fr);

    gap: 25px;

    padding:
        clamp(
            28px,
            4vw,
            42px
        );

    background:
        linear-gradient(
            145deg,
            #f8f3e5 0%,
            #f3ead4 100%
        );

    border:
        1px solid
        rgba(116, 94, 45, 0.11);

    border-radius: 18px;
}


.redcare-partner-preview__mark {
    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #675729;

    background: rgba(255, 255, 255, 0.72);

    border:
        1px solid
        rgba(116, 94, 45, 0.10);

    border-radius: 50%;

    font-size: 1rem;
}


.redcare-partner-preview__content {
    max-width: 770px;
}


.redcare-partner-preview h2 {
    font-size:
        clamp(
            1.7rem,
            2.6vw,
            2.4rem
        );
}


.redcare-partner-preview__content > p:not(.eyebrow) {
    margin:
        16px
        0
        0;

    color: #665f4b;

    font-size: 0.88rem;

    line-height: 1.67;
}


/* =========================================================
   ZURÜCK
   ========================================================= */

.redcare-back {
    padding:
        25px
        0
        65px;
}


.redcare-back__link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #536a5f;

    font-size: 0.8rem;
    font-weight: 720;

    text-decoration: none;
}


.redcare-back__link:hover {
    color: var(--jl-redcare-green);

    text-decoration: underline;

    text-underline-offset: 4px;
}


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

@media (max-width: 1020px) {

    .redcare-hero__grid {
        grid-template-columns:
            minmax(0, 1fr)
            300px;

        gap: 45px;
    }


    .redcare-products {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 820px) {

    .redcare-hero__grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .redcare-hero__visual {
        min-height: 315px;

        align-items: flex-start;
    }


    .redcare-principles__grid {
        grid-template-columns: 1fr;
    }


    .redcare-principle {
        min-height: 0;
    }


    .redcare-principle__number {
        margin-bottom: 20px;
    }


    .redcare-selection__header {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .redcare-selection__intro {
        max-width: 620px;
    }


    .redcare-journey__grid {
        grid-template-columns: 1fr;

        gap: 34px;
    }


    .redcare-journey__heading {
        position: static;
    }

}


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

@media (max-width: 620px) {

    .redcare-page > .container,
    .redcare-page section > .container {
        width: min(
            calc(100% - 32px),
            1180px
        );
    }


    .redcare-hero {
        padding:
            45px
            0
            62px;
    }


    .redcare-hero h1 {
        font-size:
            clamp(
                2.55rem,
                12vw,
                3.5rem
            );
    }


    .redcare-hero__lead {
        font-size: 1rem;
    }


    .redcare-hero__visual {
        min-height: 250px;
    }


    .redcare-visual {
        transform: scale(0.77);

        transform-origin: left center;
    }


    .redcare-product-card {
        grid-template-columns:
            105px
            minmax(0, 1fr);

        gap: 18px;

        padding: 18px;
    }


    .redcare-product-card__visual {
        min-height: 170px;
    }


    .redcare-product-card__bottle {
        width: 58px;
        height: 108px;
    }


    .redcare-product-card__cap {
        width: 42px;

        left: 8px;
    }


    .redcare-partner-preview__box {
        grid-template-columns: 1fr;

        gap: 18px;

        padding:
            25px
            22px;
    }


    .redcare-partner-preview__mark {
        width: 45px;
        height: 45px;
    }

}


/* =========================================================
   SEHR KLEIN
   ========================================================= */

@media (max-width: 430px) {

    .redcare-product-card {
        grid-template-columns: 1fr;
    }


    .redcare-product-card__visual {
        width: 115px;
        min-height: 160px;
    }

}