/**
 * Jung Leben
 * Empfehlungen / Produktkatalog
 */


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

.recommendations-page {
    color: #173c32;
    background: #ffffff;
}


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

.recommendations-hero {
    padding:
        clamp(92px, 10vw, 128px)
        0
        clamp(62px, 7vw, 82px);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfa 100%
        );
}


.recommendations-hero__inner {
    max-width: 1040px;
}


.recommendations-hero h1 {
    max-width: 900px;

    margin: 13px 0 0;

    color: #173c32;

    font-size:
        clamp(
            4rem,
            8vw,
            7rem
        );

    font-weight: 720;

    line-height: 0.92;

    letter-spacing: -0.06em;
}


.recommendations-hero__text {
    max-width: 720px;

    margin-top: 30px;

    color: #61736a;

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.14rem
        );

    line-height: 1.75;
}


.recommendations-hero__text p {
    margin: 0;
}


/* =========================================================
   KATALOG
   ========================================================= */

.recommendations-catalogue {
    padding:
        clamp(52px, 6vw, 72px)
        0
        clamp(90px, 10vw, 125px);

    background:
        linear-gradient(
            180deg,
            #f5f8f3 0%,
            #f8faf6 100%
        );
}


/* =========================================================
   REDAKTIONSVORSCHAU
   ========================================================= */

.recommendations-editor-preview {
    display: grid;

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

    gap: 14px;

    align-items: start;

    max-width: 760px;

    margin-bottom: 32px;

    padding: 17px 20px;

    color: #52685d;
    background: #ffffff;

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

    border-radius: 13px;
}


.recommendations-editor-preview__mark {
    width: 32px;
    height: 32px;

    display: flex;

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

    color: #315b49;
    background: #e4eed8;

    border-radius: 50%;

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


.recommendations-editor-preview strong {
    display: block;

    color: #315146;

    font-size: 0.75rem;
}


.recommendations-editor-preview p {
    margin: 4px 0 0;

    color: #78867f;

    font-size: 0.7rem;

    line-height: 1.55;
}


/* =========================================================
   SUCHE
   ========================================================= */

.recommendations-tools {
    display: flex;

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

    gap: 30px;

    margin-bottom: 23px;
}


.recommendations-search {
    width:
        min(
            100%,
            520px
        );
}


.recommendations-search__field {
    position: relative;
}


.recommendations-search__icon {
    position: absolute;

    top: 50%;
    left: 18px;

    transform:
        translateY(-50%);

    color: #789087;

    pointer-events: none;
}


.recommendations-search input {
    width: 100%;
    height: 53px;

    padding:
        0
        20px
        0
        48px;

    color: #173c32;
    background: #ffffff;

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

    border-radius: 999px;

    font: inherit;
    font-size: 0.82rem;

    outline: none;

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}


.recommendations-search input:focus {
    border-color:
        rgba(49, 91, 73, 0.48);

    box-shadow:
        0 0 0 4px
        rgba(49, 91, 73, 0.055);
}


.recommendations-count {
    display: flex;

    align-items: baseline;

    gap: 5px;

    margin: 0;

    color: #7a8981;

    white-space: nowrap;

    font-size: 0.71rem;
}


.recommendations-count strong {
    color: #315b49;

    font-size: 1.05rem;
}


/* =========================================================
   KATEGORIEFILTER
   ========================================================= */

.recommendations-filters {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 27px;
}


.recommendations-filter {
    min-height: 39px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 0 14px;

    color: #52675e;
    background: #ffffff;

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

    border-radius: 999px;

    cursor: pointer;

    font: inherit;

    font-size: 0.7rem;
    font-weight: 700;

    transition:
        color 180ms ease,
        background 180ms ease,
        border-color 180ms ease;
}


.recommendations-filter small {
    opacity: 0.58;

    font-size: 0.58rem;
}


.recommendations-filter:hover {
    color: #315b49;
}


.recommendations-filter.is-active {
    color: #ffffff;
    background: #315b49;

    border-color: #315b49;
}


/* =========================================================
   SEKUNDÄRFILTER
   ========================================================= */

.recommendations-secondary-filters {
    display: flex;

    align-items: end;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom:
        clamp(
            35px,
            5vw,
            50px
        );
}


.recommendations-select {
    min-width: 205px;
}


.recommendations-select label {
    display: block;

    margin: 0 0 7px;

    color: #60746a;

    font-size: 0.61rem;
    font-weight: 760;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.recommendations-select select {
    width: 100%;
    height: 46px;

    padding:
        0
        38px
        0
        14px;

    color: #315146;
    background: #ffffff;

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

    border-radius: 11px;

    font: inherit;

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


.recommendations-reset {
    min-height: 46px;

    padding: 0 17px;

    color: #687a71;
    background: transparent;

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

    border-radius: 11px;

    cursor: pointer;

    font: inherit;

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


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

.recommendations-grid {
    display: grid;

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

    gap:
        clamp(
            20px,
            2.5vw,
            28px
        );

    align-items: start;
}


/* =========================================================
   KARTE
   ========================================================= */

.recommendation-card {
    min-width: 0;
}


.recommendation-card[hidden] {
    display: none;
}


.recommendation-card__card {
    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

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

    border-radius: 20px;

    box-shadow:
        0 13px 34px
        rgba(23, 60, 50, 0.045);

    transition:
        transform 210ms ease,
        box-shadow 210ms ease,
        border-color 210ms ease;
}


.recommendation-card__card:hover,
.recommendation-card__card:focus-within {
    transform:
        translateY(-4px);

    border-color:
        rgba(49, 91, 73, 0.15);

    box-shadow:
        0 21px 48px
        rgba(23, 60, 50, 0.085);
}


/* =========================================================
   ECHTES PRODUKTBILD
   ========================================================= */

.recommendation-card__media {
    position: relative;

    aspect-ratio: 1 / 0.76;

    display: flex;

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

    padding: 27px;

    overflow: hidden;

    color: inherit;

    background:
        linear-gradient(
            145deg,
            #f6f8f3,
            #edf3e9
        );

    text-decoration: none;
}


.recommendation-card__image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    transition:
        transform 300ms ease;
}


.recommendation-card__media:hover
.recommendation-card__image {
    transform:
        scale(1.025);
}


/* =========================================================
   PRODUKT OHNE BILD
   ========================================================= */

/**
 * Kein Fake-Produktbild.
 *
 * Die Media-Fläche wird zu einem kompakten
 * visuellen Header.
 */
.recommendation-card--no-image
.recommendation-card__media {
    aspect-ratio: auto;

    min-height: 116px;

    padding: 0;

    background:
        radial-gradient(
            circle at 84% 14%,
            rgba(199, 221, 161, 0.44),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #f7f5ec 0%,
            #ebf1e6 100%
        );
}


/* =========================================================
   KOMPAKTER PLACEHOLDER
   ========================================================= */

.recommendation-card__placeholder {
    position: absolute;

    inset: 0;

    display: flex;

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

    overflow: hidden;
}


.recommendation-card__placeholder::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: -95px;
    right: -42px;

    border:
        1px solid
        rgba(49, 91, 73, 0.09);

    border-radius: 50%;
}


.recommendation-card__placeholder::after {
    content: "";

    position: absolute;

    width: 75px;
    height: 75px;

    bottom: -48px;
    left: -24px;

    border:
        1px solid
        rgba(49, 91, 73, 0.055);

    border-radius: 50%;
}


/* =========================================================
   MONOGRAMM
   ========================================================= */

.recommendation-card__placeholder-mark {
    position: relative;

    z-index: 1;

    width: 58px;
    height: 58px;

    display: flex;

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

    color: #315b49;

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

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

    border-radius: 50%;

    box-shadow:
        0 8px 22px
        rgba(23, 60, 50, 0.04);

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

    line-height: 1;

    letter-spacing: 0.06em;
}


/* =========================================================
   MEDIA-BADGES
   ========================================================= */

.recommendation-card__featured,
.recommendation-card__editor-status {
    position: absolute;

    top: 14px;

    z-index: 3;

    display: inline-flex;

    align-items: center;

    min-height: 25px;

    padding: 0 9px;

    border-radius: 999px;

    font-size: 0.56rem;
    font-weight: 760;
}


.recommendation-card__featured {
    left: 14px;

    color: #ffffff;
    background: #315b49;
}


.recommendation-card__editor-status {
    right: 14px;

    color: #765f28;
    background: #f6edd2;

    border:
        1px solid
        rgba(118, 95, 40, 0.06);
}


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

.recommendation-card__content {
    display: flex;

    flex-direction: column;

    padding:
        25px
        25px
        22px;
}


/**
 * Karten ohne Bild etwas kompakter.
 */
.recommendation-card--no-image
.recommendation-card__content {
    padding-top: 23px;
}


/* =========================================================
   MARKE
   ========================================================= */

.recommendation-card__brand {
    min-height: 22px;

    display: flex;

    align-items: center;

    margin-bottom: 13px;
}


.recommendation-card
.jl-brand {
    min-width: 0;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #78877f;

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

    line-height: 1.3;

    letter-spacing: 0.105em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 180ms ease;
}


.recommendation-card
a.jl-brand:hover {
    color: #315b49;
}


.recommendation-card
.jl-brand__identity {
    min-width: 0;

    display: inline-flex;

    align-items: center;

    gap: 8px;
}


.recommendation-card
.jl-brand__name {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.recommendation-card
.jl-brand__logo-image {
    width: auto;
    height: 18px;

    max-width: 80px;

    display: block;

    object-fit: contain;
}


.recommendation-card
.jl-brand__external {
    flex: 0 0 auto;

    opacity: 0.58;

    font-size: 0.72rem;

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}


.recommendation-card
a.jl-brand:hover
.jl-brand__external {
    opacity: 1;

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


/* =========================================================
   BADGES
   ========================================================= */

.recommendation-card__badges {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 14px;
}


.recommendation-card__badge {
    display: inline-flex;

    align-items: center;

    min-height: 25px;

    padding: 0 9px;

    border-radius: 999px;

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


.recommendation-card__badge--interesting {
    color: #53683b;
    background: #edf4df;
}


.recommendation-card__badge--recommended {
    color: #28503f;
    background: #deead7;
}


.recommendation-card__badge--favorite {
    color: #ffffff;
    background: #315b49;
}


.recommendation-card__badge--tested {
    color: #745e2d;
    background: #f4ecd5;
}


/* =========================================================
   TITEL
   ========================================================= */

.recommendation-card__title {
    margin: 0;

    color: #173c32;

    font-size:
        clamp(
            1.45rem,
            2vw,
            1.8rem
        );

    font-weight: 720;

    line-height: 1.1;

    letter-spacing: -0.035em;
}


.recommendation-card__title a {
    color: inherit;

    text-decoration: none;

    transition:
        color 180ms ease;
}


.recommendation-card__title a:hover {
    color: #456b57;
}


/* =========================================================
   BESCHREIBUNG
   ========================================================= */

.recommendation-card__excerpt {
    margin: 15px 0 0;

    color: #61736a;

    font-size: 0.82rem;

    line-height: 1.68;
}


/* =========================================================
   FOOTER
   ========================================================= */

.recommendation-card__footer {
    display: flex;

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

    gap: 18px;

    margin-top: auto;

    padding-top: 24px;
}


.recommendation-card__category {
    max-width: 55%;

    overflow: hidden;

    color: #829087;

    font-size: 0.61rem;
    font-weight: 670;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.recommendation-card__cta {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #315b49;

    font-size: 0.7rem;
    font-weight: 750;

    white-space: nowrap;

    text-decoration: none;
}


.recommendation-card__arrow {
    width: 29px;
    height: 29px;

    display: inline-flex;

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

    color: #315b49;
    background: #d9e8b9;

    border-radius: 50%;

    transition:
        transform 180ms ease,
        background 180ms ease;
}


.recommendation-card__cta:hover
.recommendation-card__arrow {
    transform:
        translateX(3px);

    background: #cfe19f;
}


/* =========================================================
   ENTWURF
   ========================================================= */

.recommendation-card--editor-preview
.recommendation-card__card {
    border-style: dashed;
}


/* =========================================================
   LEERZUSTAND
   ========================================================= */

.recommendations-empty {
    max-width: 580px;

    margin: 70px auto 0;

    text-align: center;
}


.recommendations-empty[hidden] {
    display: none;
}


.recommendations-empty__icon {
    width: 58px;
    height: 58px;

    display: flex;

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

    margin: 0 auto 18px;

    color: #52715f;
    background: #e5eee0;

    border-radius: 50%;

    font-size: 0.8rem;
    font-weight: 780;
}


.recommendations-empty h2 {
    margin: 0;

    color: #173c32;

    font-size:
        clamp(
            1.5rem,
            3vw,
            2rem
        );
}


.recommendations-empty p {
    margin: 10px 0 0;

    color: #718078;
}


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

@media (max-width: 980px) {

    .recommendations-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


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

@media (max-width: 620px) {

    .recommendations-hero {
        padding:
            72px
            0
            54px;
    }


    .recommendations-hero h1 {
        font-size:
            clamp(
                3.1rem,
                15vw,
                4.6rem
            );
    }


    .recommendations-catalogue {
        padding:
            40px
            0
            80px;
    }


    .recommendations-tools {
        align-items: flex-start;

        flex-direction: column;

        gap: 13px;
    }


    .recommendations-search {
        width: 100%;
    }


    .recommendations-filters {
        flex-wrap: nowrap;

        width:
            calc(
                100vw - 18px
            );

        margin-right: -18px;

        padding-right: 18px;

        overflow-x: auto;

        scrollbar-width: none;
    }


    .recommendations-filters::-webkit-scrollbar {
        display: none;
    }


    .recommendations-filter {
        flex: 0 0 auto;

        white-space: nowrap;
    }


    .recommendations-secondary-filters {
        display: grid;

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

        gap: 11px;
    }


    .recommendations-select {
        min-width: 0;
    }


    .recommendations-reset {
        grid-column:
            1
            /
            -1;

        width: 100%;
    }


    .recommendations-grid {
        grid-template-columns: 1fr;

        gap: 19px;
    }


    .recommendation-card__media {
        aspect-ratio: 1 / 0.72;
    }


    /**
     * Ohne Bild bleibt auch Mobile kompakt.
     */
    .recommendation-card--no-image
    .recommendation-card__media {
        aspect-ratio: auto;

        min-height: 104px;
    }


    .recommendation-card__content {
        padding:
            23px
            22px
            22px;
    }


    .recommendation-card__title {
        font-size: 1.55rem;
    }


    .recommendation-card
    .jl-brand__logo-image {
        height: 17px;

        max-width: 72px;
    }
}


@media (max-width: 390px) {

    .recommendations-secondary-filters {
        grid-template-columns: 1fr;
    }


    .recommendations-reset {
        grid-column: auto;
    }


    .recommendation-card__footer {
        align-items: flex-end;
    }


    .recommendation-card__category {
        max-width: 45%;
    }
}