/**
 * Jung Leben
 * Buchempfehlungen
 */


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

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

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

    background: #ffffff;
}


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


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

.books-breadcrumb {
    display: flex;

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

    gap: 8px;

    padding:
        22px
        0
        14px;

    color: #829087;

    font-size: 0.78rem;
    line-height: 1.4;
}


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

    font-weight: 700;

    text-decoration: none;
}


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

    text-underline-offset: 3px;
}


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

.books-hero {
    overflow: hidden;

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

    background:
        radial-gradient(
            circle at 82% 25%,
            rgba(
                199,
                221,
                161,
                0.35
            ),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #f8faf6 0%,
            #eef4eb 100%
        );
}


.books-hero__grid {
    display: grid;

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

    align-items: center;

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


.books-hero__content {
    max-width: 690px;
}


.books-hero .eyebrow {
    margin:
        0
        0
        15px;

    color: #728379;

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

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.books-hero h1 {
    max-width: 720px;

    margin: 0;

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

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

    font-weight: 720;

    line-height: 0.98;

    letter-spacing: -0.052em;
}


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

    margin:
        26px
        0
        0;

    color: #496057;

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

    font-weight: 520;

    line-height: 1.67;
}


.books-hero__text {
    max-width: 625px;

    margin:
        16px
        0
        0;

    color: #63756d;

    font-size: 0.95rem;

    line-height: 1.7;
}


.books-hero__tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 27px;
}


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

    display: inline-flex;

    align-items: center;

    padding:
        0
        12px;

    color: #4d675b;

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

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

    border-radius: 999px;

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


/* =========================================================
   HERO – BÜCHERSTAPEL
   ========================================================= */

.books-hero__visual {
    position: relative;

    min-height: 390px;

    display: flex;

    flex-direction: column;

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


.books-hero-stack {
    position: relative;

    width: 330px;
    height: 300px;
}


.books-hero-stack__book {
    position: absolute;

    display: flex;

    align-items: flex-end;

    padding: 25px;

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

    border-radius:
        8px
        18px
        18px
        8px;

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


.books-hero-stack__book::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 15px;

    width: 1px;

    background:
        rgba(
            255,
            255,
            255,
            0.27
        );
}


.books-hero-stack__book span {
    color: inherit;

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

    letter-spacing: 0.13em;
}


.books-hero-stack__book--one {
    width: 175px;
    height: 250px;

    top: 16px;
    left: 20px;

    z-index: 3;

    color: #ffffff;

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

    transform: rotate(-8deg);
}


.books-hero-stack__book--two {
    width: 165px;
    height: 235px;

    top: 38px;
    left: 110px;

    z-index: 2;

    color: #4f5728;

    background:
        linear-gradient(
            145deg,
            #e6edc9 0%,
            #cbdca4 100%
        );

    transform: rotate(6deg);
}


.books-hero-stack__book--three {
    width: 145px;
    height: 205px;

    top: 73px;
    left: 177px;

    z-index: 1;

    color: #776331;

    background:
        linear-gradient(
            145deg,
            #f5eace 0%,
            #e7d6ad 100%
        );

    transform: rotate(12deg);
}


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

    margin:
        3px
        0
        0;

    color: #697a72;

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

    line-height: 1.5;

    text-align: center;
}


/* =========================================================
   GEMEINSAME SECTION-HEADINGS
   ========================================================= */

.books-section-heading {
    max-width: 710px;
}


.books-section-heading .eyebrow,
.books-selection .eyebrow,
.books-experience .eyebrow,
.books-partner-preview .eyebrow {
    margin:
        0
        0
        10px;

    color: #798981;

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

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.books-section-heading h2,
.books-selection h2,
.books-experience h2,
.books-partner-preview h2 {
    margin: 0;

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

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

    font-weight: 720;

    line-height: 1.05;

    letter-spacing: -0.042em;
}


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

    margin:
        20px
        0
        0;

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

    font-size: 1rem;

    line-height: 1.7;
}


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

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


.books-principles__grid {
    display: grid;

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

    gap: 18px;

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


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

    padding:
        28px
        27px;

    background: #f7f9f5;

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

    border-radius: 16px;
}


.books-principle__number {
    display: block;

    margin-bottom: 35px;

    color: #91a187;

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

    letter-spacing: 0.12em;
}


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

    color: #294e40;

    font-size: 1.1rem;

    line-height: 1.3;
}


.books-principle p {
    margin: 0;

    color: #61736a;

    font-size: 0.88rem;

    line-height: 1.65;
}


/* =========================================================
   BUCHAUSWAHL
   ========================================================= */

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

    background: #f5f7f2;
}


.books-selection__header {
    display: grid;

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

    align-items: end;

    gap: 60px;
}


.books-selection__header h2 {
    max-width: 700px;
}


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

    margin:
        0
        0
        5px;

    color: #65766d;

    font-size: 0.91rem;

    line-height: 1.7;
}


.books-grid {
    display: grid;

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

    gap: 20px;

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


/* =========================================================
   BUCHKARTE
   ========================================================= */

.book-card {
    display: grid;

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

    gap: 27px;

    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
        );
}


/* =========================================================
   DEMO-COVER
   ========================================================= */

.book-card__cover {
    min-height: 225px;

    overflow: hidden;

    position: relative;

    border-radius:
        5px
        12px
        12px
        5px;

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


.book-card__cover::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 11px;

    width: 1px;

    background:
        rgba(
            255,
            255,
            255,
            0.25
        );
}


.book-card__cover--sage {
    color: #ffffff;

    background:
        linear-gradient(
            150deg,
            #426c59 0%,
            #173c32 100%
        );
}


.book-card__cover--night {
    color: #edf3ec;

    background:
        linear-gradient(
            150deg,
            #44515d 0%,
            #1d2a31 100%
        );
}


.book-card__cover--sand {
    color: #5b4b27;

    background:
        linear-gradient(
            150deg,
            #eee0bd 0%,
            #d7c397 100%
        );
}


.book-card__cover--mineral {
    color: #354a41;

    background:
        linear-gradient(
            150deg,
            #d8e2dc 0%,
            #afc3b8 100%
        );
}


.book-card__cover-inner {
    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding:
        18px
        17px
        17px
        22px;
}


.book-card__cover-mark {
    font-size: 1.45rem;
    font-weight: 800;

    letter-spacing: -0.04em;
}


.book-card__cover-line {
    width: 36px;
    height: 1px;

    margin-top: auto;
    margin-bottom: 11px;

    background: currentColor;

    opacity: 0.45;
}


.book-card__cover-brand {
    font-size: 0.56rem;
    font-weight: 750;

    letter-spacing: 0.11em;

    text-transform: uppercase;

    opacity: 0.75;
}


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

.book-card__content {
    min-width: 0;

    display: flex;

    flex-direction: column;
}


.book-card__meta {
    display: flex;

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

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 14px;
}


.book-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;
}


.book-card__format {
    color: #89968f;

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

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.book-card__title {
    margin: 0;

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

    font-size:
        clamp(
            1.35rem,
            1.8vw,
            1.65rem
        );

    font-weight: 730;

    line-height: 1.13;

    letter-spacing: -0.029em;
}


.book-card__author {
    margin:
        7px
        0
        0;

    color: #7a8981;

    font-size: 0.76rem;
    font-weight: 620;
}


.book-card__intro {
    margin:
        17px
        0
        0;

    color: #53685e;

    font-size: 0.88rem;
    font-weight: 560;

    line-height: 1.65;
}


.book-card__detail {
    margin-top: 17px;
}


.book-card__detail-label {
    display: block;

    margin-bottom: 5px;

    color: #809087;

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

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.book-card__detail p {
    margin: 0;

    color: #697970;

    font-size: 0.8rem;

    line-height: 1.58;
}


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

.book-card__footer {
    margin-top: auto;

    padding-top: 21px;
}


.book-card__shop-link {
    min-height: 43px;

    display: flex;

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

    gap: 12px;

    padding:
        0
        14px;

    color: #ffffff;

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

    border-radius: 10px;

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

    text-decoration: none;

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


.book-card__shop-link:hover {
    background: var(--jl-books-green);

    transform:
        translateY(-1px);
}


.book-card__planned-link {
    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;
}


.book-card__planned-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    background: #98ad87;

    border-radius: 50%;
}


/* =========================================================
   ERFAHRUNGSKONZEPT
   ========================================================= */

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


.books-experience__grid {
    display: grid;

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

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

    align-items: start;
}


.books-experience__intro {
    position: sticky;

    top: 115px;
}


.books-experience__content {
    max-width: 660px;

    padding-left:
        clamp(
            25px,
            4vw,
            55px
        );

    border-left:
        1px solid
        var(--jl-books-line);
}


.books-experience__lead {
    margin:
        0
        0
        18px;

    color: #315b49;

    font-size:
        clamp(
            1.25rem,
            1.8vw,
            1.5rem
        );

    font-weight: 680;

    line-height: 1.4;
}


.books-experience__content p:not(.books-experience__lead) {
    margin:
        0
        0
        17px;

    color: #586c62;

    font-size: 0.96rem;

    line-height: 1.75;
}


.books-experience__content p:last-child {
    margin-bottom: 0;
}


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

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


.books-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%,
            #f4ecd8 100%
        );

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

    border-radius: 18px;
}


.books-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;
    font-weight: 760;
}


.books-partner-preview__content {
    max-width: 760px;
}


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


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

    color: #665f4b;

    font-size: 0.88rem;

    line-height: 1.67;
}


/* =========================================================
   ZURÜCK-LINK
   ========================================================= */

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


.books-back__link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #536a5f;

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

    text-decoration: none;
}


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

    text-decoration: underline;

    text-underline-offset: 4px;
}


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

@media (max-width: 1020px) {

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

        gap: 45px;
    }


    .books-hero-stack {
        transform: scale(0.9);
    }


    .books-grid {
        grid-template-columns: 1fr;
    }


    .book-card {
        grid-template-columns:
            155px
            minmax(
                0,
                1fr
            );
    }

}


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

@media (max-width: 820px) {

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

        gap: 45px;
    }


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

        align-items: flex-start;
    }


    .books-hero-stack {
        margin-left: 20px;

        transform-origin: left center;
    }


    .books-hero__visual-note {
        margin-left: 28px;

        text-align: left;
    }


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


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


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


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

        gap: 20px;
    }


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


    .books-experience__grid {
        grid-template-columns: 1fr;

        gap: 33px;
    }


    .books-experience__intro {
        position: static;
    }


    .books-experience__content {
        padding-left: 0;

        border-left: 0;
    }

}


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

@media (max-width: 620px) {

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


    .books-breadcrumb {
        padding-top: 17px;

        font-size: 0.72rem;
    }


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


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

        line-height: 1;
    }


    .books-hero__lead {
        margin-top: 21px;

        font-size: 1rem;
    }


    .books-hero__visual {
        min-height: 260px;
    }


    .books-hero-stack {
        width: 280px;
        height: 245px;

        margin-left: 0;

        transform: scale(0.76);

        transform-origin: left top;
    }


    .books-hero__visual-note {
        margin:
            -42px
            0
            0;

        max-width: 250px;
    }


    .books-principles {
        padding:
            60px
            0;
    }


    .books-selection {
        padding:
            62px
            0;
    }


    .books-grid {
        gap: 17px;

        margin-top: 38px;
    }


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

        gap: 18px;

        padding: 18px;

        border-radius: 15px;
    }


    .book-card__cover {
        min-height: 164px;
    }


    .book-card__cover-inner {
        padding:
            15px
            11px
            13px
            17px;
    }


    .book-card__cover-mark {
        font-size: 1.1rem;
    }


    .book-card__title {
        font-size: 1.25rem;
    }


    .book-card__intro {
        font-size: 0.84rem;
    }


    .book-card__detail {
        grid-column:
            1
            /
            -1;
    }


    .book-card__footer {
        grid-column:
            1
            /
            -1;
    }


    .books-experience {
        padding:
            62px
            0;
    }


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

        gap: 18px;

        padding: 25px 22px;
    }


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

}


/* =========================================================
   SEHR KLEINE DISPLAYS
   ========================================================= */

@media (max-width: 430px) {

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


    .book-card__cover {
        width: 118px;

        min-height: 175px;
    }


    .book-card__detail,
    .book-card__footer {
        grid-column: auto;
    }

}