/**
 * Jung Leben
 * Einzelansicht Erfahrungen
 *
 * Editoriales Layout:
 * Erfahrung → Einordnung → Produkt → Weiter entdecken
 */


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

.experience-single {
    color: #173c32;
    background: #ffffff;
}


.experience-single__container {
    width:
        min(
            1180px,
            calc(100% - 56px)
        );

    margin: 0 auto;
}


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

.experience-single__hero {
    position: relative;

    overflow: hidden;

    padding:
        clamp(42px, 5vw, 64px)
        0
        clamp(52px, 6vw, 74px);

    background:
        radial-gradient(
            circle at 89% 18%,
            rgba(198, 218, 162, 0.25),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #fafbf8 0%,
            #f2f6ed 100%
        );

    border-bottom:
        1px solid
        rgba(23, 60, 50, 0.06);
}


.experience-single__hero::after {
    content: "";

    position: absolute;

    width: 310px;
    height: 310px;

    right: -125px;
    bottom: -210px;

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

    border-radius: 50%;
}


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

.experience-single__breadcrumb {
    position: relative;

    z-index: 2;

    margin-bottom:
        clamp(
            34px,
            4vw,
            48px
        );
}


.experience-single__breadcrumb a {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #49675a;

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

    text-decoration: none;

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


.experience-single__breadcrumb a:hover {
    color: #173c32;

    transform:
        translateX(-3px);
}


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

.experience-single__hero-grid {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap:
        clamp(
            40px,
            7vw,
            90px
        );

    align-items: end;
}


.experience-single__hero-main {
    max-width: 940px;
}


/* =========================================================
   META
   ========================================================= */

.experience-single__meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 17px;

    color: #74857c;

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

    line-height: 1.3;

    letter-spacing: 0.055em;

    text-transform: uppercase;
}


.experience-single__meta-type {
    color: #a56d1d;
}


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

.experience-single__title {
    max-width: 960px;

    margin: 0;

    color: #173c32;

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

    font-weight: 720;

    line-height: 0.97;

    letter-spacing: -0.055em;

    text-wrap: balance;
}


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

.experience-single__hero-mark {
    display: flex;

    align-items: flex-end;
    justify-content: flex-end;
}


.experience-single__hero-mark > span {
    width: 94px;
    height: 94px;

    display: flex;

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

    color: #315b49;

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

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

    border-radius: 50%;

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

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


/* =========================================================
   FEATURED IMAGE
   ========================================================= */

.experience-single__featured {
    padding:
        46px
        0
        0;
}


.experience-single__featured-frame {
    overflow: hidden;

    margin: 0;

    aspect-ratio: 16 / 7;

    background: #f2f5ef;

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

    border-radius: 24px;
}


.experience-single__featured-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   ARTIKELBEREICH
   ========================================================= */

.experience-single__article-section {
    padding:
        clamp(55px, 7vw, 86px)
        0
        clamp(58px, 7vw, 82px);
}


.experience-single__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 800px)
        minmax(220px, 270px);

    gap:
        clamp(
            60px,
            8vw,
            105px
        );

    align-items: start;

    justify-content: center;
}


/* =========================================================
   ARTIKEL
   ========================================================= */

.experience-single__article {
    min-width: 0;
}


.experience-single__content {
    color: #465f54;

    font-size:
        clamp(
            1.05rem,
            1.25vw,
            1.12rem
        );

    line-height: 1.82;
}


/* Erster Absatz bewusst als Editorial-Lead */

.experience-single__content > p:first-child {
    margin-top: 0;

    color: #315146;

    font-size:
        clamp(
            1.22rem,
            1.65vw,
            1.38rem
        );

    line-height: 1.68;

    letter-spacing: -0.012em;
}


/* =========================================================
   ABSÄTZE
   ========================================================= */

.experience-single__content p {
    margin:
        0
        0
        1.55em;
}


/* =========================================================
   H2
   ========================================================= */

.experience-single__content h2 {
    position: relative;

    margin:
        clamp(
            52px,
            7vw,
            72px
        )
        0
        24px;

    padding-top: 29px;

    color: #173c32;

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

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

    font-weight: 720;

    line-height: 1.07;

    letter-spacing: -0.045em;

    text-wrap: balance;
}


.experience-single__content h2::before {
    content: "";

    position: absolute;

    top: -2px;
    left: 0;

    width: 72px;
    height: 3px;

    background: #b8cb8c;

    border-radius: 99px;
}


/* =========================================================
   H3
   ========================================================= */

.experience-single__content h3 {
    margin:
        40px
        0
        16px;

    color: #254d3e;

    font-size:
        clamp(
            1.4rem,
            2vw,
            1.7rem
        );

    font-weight: 720;

    line-height: 1.18;

    letter-spacing: -0.028em;
}


/* =========================================================
   LISTEN
   ========================================================= */

.experience-single__content ul,
.experience-single__content ol {
    margin:
        24px
        0
        30px;

    padding-left: 1.4em;
}


.experience-single__content li {
    margin-bottom: 10px;

    padding-left: 5px;
}


.experience-single__content li::marker {
    color: #78975c;
}


/* =========================================================
   LINKS
   ========================================================= */

.experience-single__content a {
    color: #315b49;

    font-weight: 700;

    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* =========================================================
   BLOCKQUOTE
   ========================================================= */

.experience-single__content blockquote {
    margin:
        38px
        0;

    padding:
        25px
        28px;

    color: #315146;
    background: #f2f6ed;

    border-left:
        4px solid
        #9fb974;

    border-radius:
        0
        14px
        14px
        0;
}


.experience-single__content blockquote p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   BILDER IM ARTIKEL
   ========================================================= */

.experience-single__content figure {
    margin:
        40px
        0;
}


.experience-single__content figure img {
    width: 100%;

    border-radius: 16px;
}


.experience-single__content figcaption {
    margin-top: 10px;

    color: #829087;

    font-size: 0.79rem;

    line-height: 1.5;
}


/* =========================================================
   RAIL
   ========================================================= */

.experience-single__rail {
    position: sticky;

    top: 110px;

    display: grid;

    gap: 16px;
}


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

.experience-single__rail-card {
    padding:
        24px
        23px;

    background: #f7f9f5;

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

    border-radius: 16px;
}


.experience-single__rail-label {
    margin:
        0
        0
        15px;

    color: #667a70;

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

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


/* =========================================================
   FACTS
   ========================================================= */

.experience-single__facts {
    margin: 0;
}


.experience-single__facts > div {
    display: grid;

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

    gap: 10px;

    padding: 11px 0;

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


.experience-single__facts > div:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}


.experience-single__facts dt {
    color: #8a9690;

    font-size: 0.74rem;
}


.experience-single__facts dd {
    margin: 0;

    color: #315146;

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


/* =========================================================
   RAIL PRODUCT
   ========================================================= */

.experience-single__rail-product {
    padding:
        23px;

    background:
        linear-gradient(
            145deg,
            #edf4e8,
            #e3eedc
        );

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

    border-radius: 16px;
}


.experience-single__rail-product > span {
    display: block;

    margin-bottom: 8px;

    color: #718169;

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

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.experience-single__rail-product > strong {
    display: block;

    color: #173c32;

    font-size: 1rem;

    line-height: 1.3;
}


.experience-single__rail-product > a {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 15px;

    color: #315b49;

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

    text-decoration: none;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.experience-single__section-heading {
    max-width: 760px;

    margin-bottom:
        30px;
}


.experience-single__eyebrow {
    margin:
        0
        0
        9px;

    color: #bf8121;

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

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.experience-single__section-heading h2 {
    margin: 0;

    color: #173c32;

    font-size:
        clamp(
            2.25rem,
            4vw,
            3.35rem
        );

    line-height: 1;

    letter-spacing: -0.05em;
}


.experience-single__section-heading > p:last-child {
    max-width: 650px;

    margin:
        15px
        0
        0;

    color: #607269;

    font-size: 1rem;

    line-height: 1.65;
}


/* =========================================================
   PRODUKTSECTION
   ========================================================= */

.experience-single__product-section {
    padding:
        clamp(58px, 7vw, 82px)
        0;

    background:
        linear-gradient(
            135deg,
            #f7f9f4,
            #eef4e9
        );

    border-top:
        1px solid
        rgba(23, 60, 50, 0.06);

    border-bottom:
        1px solid
        rgba(23, 60, 50, 0.06);
}


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

.experience-related-product {
    display: grid;

    overflow: hidden;

    background: #ffffff;

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

    border-radius: 21px;

    box-shadow:
        0 16px 40px
        rgba(23, 60, 50, 0.055);
}


.experience-related-product--has-image {
    grid-template-columns:
        minmax(280px, 0.72fr)
        minmax(0, 1.28fr);
}


.experience-related-product--no-image {
    grid-template-columns: 1fr;
}


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

.experience-related-product__media {
    min-height: 330px;

    display: flex;

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

    padding: 35px;

    background:
        radial-gradient(
            circle at 77% 18%,
            rgba(198, 219, 159, 0.42),
            transparent 33%
        ),
        linear-gradient(
            145deg,
            #f7f4ea,
            #e9f0e4
        );

    text-decoration: none;
}


.experience-related-product__image {
    width: 100%;
    height: 280px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 14px 18px
            rgba(23, 60, 50, 0.07)
        );

    transition:
        transform 220ms ease;
}


.experience-related-product__media:hover
.experience-related-product__image {
    transform:
        translateY(-4px)
        scale(1.015);
}


/* =========================================================
   PRODUKTCONTENT
   ========================================================= */

.experience-related-product__content {
    min-height: 330px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        clamp(
            34px,
            5vw,
            55px
        );
}


.experience-related-product--no-image
.experience-related-product__content {
    min-height: 0;

    padding:
        clamp(
            32px,
            4vw,
            45px
        );
}


/* =========================================================
   BRAND
   ========================================================= */

.experience-related-product__brand {
    margin-bottom: 13px;

    color: #708078;

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

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.experience-related-product__brand
.jl-brand {
    font-size: inherit;
}


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

.experience-related-product__content h3 {
    max-width: 690px;

    margin: 0;

    color: #173c32;

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

    line-height: 1.02;

    letter-spacing: -0.045em;
}


/* =========================================================
   PRODUCT DESCRIPTION
   ========================================================= */

.experience-related-product__description {
    max-width: 680px;

    margin:
        17px
        0
        0;

    color: #586e63;

    font-size: 1rem;

    line-height: 1.67;
}


/* =========================================================
   PRODUCT CATEGORIES
   ========================================================= */

.experience-related-product__categories {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 18px;
}


.experience-related-product__categories span {
    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding:
        0
        10px;

    color: #5e7354;
    background: #edf3e7;

    border-radius: 999px;

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


/* =========================================================
   PRODUCT BUTTON
   ========================================================= */

.experience-related-product__button {
    width: fit-content;

    min-height: 46px;

    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-top: 25px;

    padding:
        0
        19px;

    color: #ffffff;
    background: #315b49;

    border-radius: 999px;

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

    text-decoration: none;

    transition:
        transform 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}


.experience-related-product__button:hover {
    transform:
        translateY(-2px);

    background: #244c3d;

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


/* =========================================================
   HEALTH NOTICE
   ========================================================= */

.experience-single__notice-section {
    padding:
        42px
        0;
}


.experience-single__health-notice {
    display: grid;

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

    gap: 15px;

    max-width: 900px;

    padding:
        19px
        21px;

    color: #607269;
    background: #faf9f5;

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

    border-radius: 13px;
}


.experience-single__health-icon {
    width: 32px;
    height: 32px;

    display: flex;

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

    color: #59714e;
    background: #e5edd8;

    border-radius: 50%;

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


.experience-single__health-notice strong {
    display: block;

    color: #53675d;

    font-size: 0.85rem;
}


.experience-single__health-notice p {
    margin:
        5px
        0
        0;

    font-size: 0.84rem;

    line-height: 1.58;
}


/* =========================================================
   NEXT
   ========================================================= */

.experience-single__next {
    padding:
        clamp(55px, 7vw, 78px)
        0;

    background: #173c32;
}


.experience-single__next-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(340px, 0.9fr);

    gap: 70px;

    align-items: center;
}


.experience-single__next
.experience-single__eyebrow {
    color: #d4a24b;
}


.experience-single__next h2 {
    max-width: 700px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            2.3rem,
            4vw,
            3.55rem
        );

    line-height: 1;

    letter-spacing: -0.05em;
}


/* =========================================================
   NEXT ACTIONS
   ========================================================= */

.experience-single__next-actions {
    display: flex;

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

    flex-wrap: wrap;

    gap: 11px;
}


.experience-single__button {
    min-height: 48px;

    display: inline-flex;

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

    gap: 10px;

    padding:
        0
        19px;

    color: #173c32;
    background: #d8e7b7;

    border:
        1px solid
        #d8e7b7;

    border-radius: 999px;

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

    text-decoration: none;

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


.experience-single__button:hover {
    transform:
        translateY(-2px);

    background: #e4efc9;
}


.experience-single__button--secondary {
    color: #ffffff;
    background: transparent;

    border-color:
        rgba(
            255,
            255,
            255,
            0.24
        );
}


.experience-single__button--secondary:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.08
        );
}


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

@media (max-width: 980px) {

    .experience-single__container {
        width:
            min(
                900px,
                calc(100% - 42px)
            );
    }


    .experience-single__hero-grid {
        grid-template-columns: 1fr;
    }


    .experience-single__hero-mark {
        display: none;
    }


    .experience-single__layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .experience-single__article {
        max-width: 800px;

        margin: 0 auto;
    }


    .experience-single__rail {
        position: static;

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

        width: 100%;
        max-width: 800px;

        margin: 0 auto;
    }


    .experience-related-product--has-image {
        grid-template-columns:
            minmax(230px, 0.7fr)
            minmax(0, 1.3fr);
    }


    .experience-single__next-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .experience-single__next-actions {
        justify-content: flex-start;
    }

}


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

@media (max-width: 650px) {

    .experience-single__container {
        width:
            calc(
                100% - 34px
            );
    }


    /* HERO */

    .experience-single__hero {
        padding:
            32px
            0
            42px;
    }


    .experience-single__breadcrumb {
        margin-bottom: 28px;
    }


    .experience-single__title {
        font-size:
            clamp(
                2.55rem,
                12vw,
                3.7rem
            );
    }


    /* FEATURE */

    .experience-single__featured {
        padding-top: 28px;
    }


    .experience-single__featured-frame {
        aspect-ratio: 4 / 3;

        border-radius: 16px;
    }


    /* ARTICLE */

    .experience-single__article-section {
        padding:
            43px
            0
            50px;
    }


    .experience-single__content {
        font-size: 1rem;

        line-height: 1.75;
    }


    .experience-single__content > p:first-child {
        font-size: 1.15rem;
    }


    .experience-single__content h2 {
        margin-top: 46px;

        padding-top: 24px;

        font-size: 2rem;
    }


    .experience-single__content h3 {
        font-size: 1.4rem;
    }


    /* Rail auf Mobil bewusst ausblenden:
       die Informationen stehen bereits im Hero */

    .experience-single__rail {
        display: none;
    }


    /* PRODUCT */

    .experience-single__product-section {
        padding:
            48px
            0;
    }


    .experience-related-product--has-image {
        grid-template-columns: 1fr;
    }


    .experience-related-product__media {
        min-height: 235px;

        padding: 24px;
    }


    .experience-related-product__image {
        height: 205px;
    }


    .experience-related-product__content {
        min-height: 0;

        padding:
            26px
            22px
            25px;
    }


    .experience-related-product__content h3 {
        font-size: 2rem;
    }


    /* NOTICE */

    .experience-single__notice-section {
        padding:
            30px
            0;
    }


    .experience-single__health-notice {
        grid-template-columns: 1fr;

        padding:
            18px;
    }


    /* NEXT */

    .experience-single__next {
        padding:
            48px
            0;
    }


    .experience-single__next h2 {
        font-size: 2.35rem;
    }


    .experience-single__next-actions {
        align-items: stretch;

        flex-direction: column;
    }


    .experience-single__button {
        width: 100%;
    }

}