/**
 * Jung Leben
 * Produktdetailseite
 *
 * Version 2
 *
 * Ziel:
 * - ruhige, professionelle Produkthierarchie
 * - gut lesbare Texte
 * - kompaktere Abstände
 * - klare Partner- und Rabattdarstellung
 * - hohe Lesbarkeit der persönlichen Erfahrung
 * - responsive Darstellung
 */


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

.product-single {
    --jl-product-green: #173c32;
    --jl-product-green-medium: #315b49;
    --jl-product-green-soft: #526a5f;
    --jl-product-text: #4f6259;
    --jl-product-muted: #74837b;
    --jl-product-line: rgba(23, 60, 50, 0.09);
    --jl-product-surface: #f7f9f5;
    --jl-product-surface-green: #eef4e9;
    --jl-product-warm: #f5edd8;
    --jl-product-warm-text: #685825;

    color: var(--jl-product-green);
    background: #ffffff;
}


/**
 * Produktseiten dürfen etwas mehr Breite nutzen als
 * gewöhnliche redaktionelle Textseiten.
 */
.product-single > .container,
.product-single section > .container,
.product-single aside > .container {
    width: min(
        calc(100% - 44px),
        1180px
    );
}


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

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


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

    font-weight: 700;
    text-decoration: none;
}


.product-breadcrumb a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}


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

.product-hero {
    padding:
        clamp(34px, 4vw, 54px)
        0
        clamp(50px, 6vw, 72px);

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


.product-hero__grid {
    display: grid;
    align-items: center;
}


/* =========================================================
   HERO MIT PRODUKTBILD
   ========================================================= */

.product-hero--with-image
.product-hero__grid {
    grid-template-columns:
        minmax(300px, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(
            50px,
            7vw,
            88px
        );
}


/* =========================================================
   HERO OHNE PRODUKTBILD
   ========================================================= */

.product-hero--no-image
.product-hero__grid {
    grid-template-columns:
        145px
        minmax(0, 1fr);

    gap:
        clamp(
            34px,
            5vw,
            58px
        );

    max-width: 980px;
}


.product-single--compact
.product-hero {
    padding-bottom:
        clamp(
            48px,
            6vw,
            66px
        );
}


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

.product-hero__media {
    overflow: hidden;

    background: #ffffff;

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

    border-radius: 22px;

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


.product-hero--with-image
.product-hero__media {
    min-height: 380px;

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

    padding: 30px;
}


.product-hero__image {
    width: 100%;
    height: auto;

    max-height: 440px;

    display: block;

    object-fit: contain;
}


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

.product-hero--no-image
.product-hero__media {
    width: 145px;
    height: 145px;

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(199, 221, 161, 0.55),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #f7f5ec 0%,
            #eaf0e4 100%
        );
}


.product-detail-placeholder {
    position: relative;

    width: 100%;
    height: 100%;

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


.product-detail-placeholder::before {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    top: -70px;
    right: -40px;

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

    border-radius: 50%;
}


.product-detail-placeholder__mark {
    position: relative;
    z-index: 1;

    width: 70px;
    height: 70px;

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

    color: var(--jl-product-green-medium);

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

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

    border-radius: 50%;

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

    letter-spacing: 0.065em;
}


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

.product-hero__content {
    width: 100%;
    max-width: 680px;
}


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

.product-hero__meta {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 17px;
}


.product-badge {
    min-height: 30px;

    display: inline-flex;
    align-items: center;

    padding:
        0
        11px;

    border-radius: 999px;

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

    line-height: 1;
}


.product-badge--highlight {
    color: #ffffff;
    background: var(--jl-product-green-medium);
}


.product-badge--interesting {
    color: #53683b;
    background: #edf4df;
}


.product-badge--recommended {
    color: #28503f;
    background: #deead7;
}


.product-badge--favorite {
    color: #ffffff;
    background: var(--jl-product-green-medium);
}


.product-badge--tested {
    color: #745e2d;
    background: #f4ecd5;
}


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

.product-hero__brand {
    min-height: 25px;

    display: flex;
    align-items: center;

    margin-bottom: 12px;
}


.product-single
.jl-brand {
    min-width: 0;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: #687c72;

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

    line-height: 1.3;

    letter-spacing: 0.09em;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        color 180ms ease;
}


.product-single
a.jl-brand:hover {
    color: var(--jl-product-green-medium);
}


.product-single
.jl-brand__identity {
    min-width: 0;

    display: inline-flex;
    align-items: center;

    gap: 9px;
}


.product-single
.jl-brand__name {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.product-single
.jl-brand__logo-image {
    width: auto;
    height: 23px;

    max-width: 115px;

    display: block;

    object-fit: contain;
}


.product-single
.jl-brand__external {
    flex: 0 0 auto;

    opacity: 0.6;

    font-size: 0.8rem;
    line-height: 1;

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


.product-single
a.jl-brand:hover
.jl-brand__external {
    opacity: 1;

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


/* =========================================================
   PRODUKTTITEL
   ========================================================= */

.product-hero__title {
    max-width: 650px;

    margin: 0;

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

    font-size:
        clamp(
            2.7rem,
            4.2vw,
            4rem
        );

    font-weight: 720;

    line-height: 1.01;

    letter-spacing: -0.047em;
}


.product-single--compact
.product-hero__title {
    font-size:
        clamp(
            2.5rem,
            4vw,
            3.7rem
        );
}


/* =========================================================
   LEAD
   ========================================================= */

.product-hero__excerpt {
    max-width: 640px;

    margin:
        20px
        0
        0;

    color: #52675d;

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

    line-height: 1.68;
}


/* =========================================================
   QUICKFACTS
   ========================================================= */

.product-hero__quickfacts {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 21px;
}


.product-hero__quickfacts span {
    min-height: 31px;

    display: inline-flex;
    align-items: center;

    padding:
        0
        11px;

    color: #50685d;
    background: #eaf1e5;

    border-radius: 999px;

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


.product-hero__quickfacts
.product-hero__quickfact--routine {
    color: #726029;
    background: #f4eddc;
}


/* =========================================================
   KAUF- UND PARTNERKARTE
   ========================================================= */

.product-purchase-card {
    width: 100%;
    max-width: 660px;

    margin-top: 27px;

    padding:
        23px
        25px
        25px;

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

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

    border-radius: 17px;

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


.product-purchase-card__header {
    display: grid;

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

    align-items: center;

    column-gap: 20px;
    row-gap: 5px;
}


.product-purchase-card__eyebrow {
    color: #75847c;

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

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.product-purchase-card__partner {
    margin: 0;

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

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

    text-align: right;
}


.product-purchase-card__price {
    grid-column:
        1
        /
        -1;

    margin:
        5px
        0
        0;

    color: #5d6f66;

    font-size: 0.88rem;
    font-weight: 600;
}


/* =========================================================
   KUNDENVORTEIL
   ========================================================= */

.product-purchase-card__discount {
    display: grid;

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

    align-items: center;

    gap:
        10px
        18px;

    margin-top: 17px;

    padding:
        14px
        16px;

    color: var(--jl-product-warm-text);

    background:
        linear-gradient(
            135deg,
            #f8f1df 0%,
            #f3e8c9 100%
        );

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

    border-radius: 11px;
}


.product-purchase-card__discount > span {
    color: #796a3d;

    font-size: 0.82rem;
    font-weight: 650;

    line-height: 1.4;
}


.product-purchase-card__discount > strong {
    color: #5d501f;

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

    white-space: nowrap;
}


.product-purchase-card__discount > p {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin: 0;

    padding:
        7px
        10px;

    color: #76652f;
    background: rgba(255, 255, 255, 0.72);

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

    border-radius: 8px;

    font-size: 0.76rem;

    white-space: nowrap;
}


.product-purchase-card__discount > p strong {
    color: #4f451f;

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

    letter-spacing: 0.035em;
}


.product-purchase-card__note {
    margin:
        12px
        1px
        0;

    color: #65766d;

    font-size: 0.82rem;

    line-height: 1.55;
}


/* =========================================================
   KAUFBUTTON
   ========================================================= */

.product-purchase-card__button {
    width: 100%;

    min-height: 48px;

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

    gap: 14px;

    margin-top: 18px;

    padding:
        0
        18px;

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

    text-decoration: none;
}


.product-purchase-card__button
span:last-child {
    flex: 0 0 auto;

    font-size: 1rem;

    transition:
        transform 180ms ease;
}


.product-purchase-card__button:hover
span:last-child {
    transform:
        translate(
            2px,
            -2px
        );
}


/* =========================================================
   DETAILBEREICH
   ========================================================= */

.product-details {
    padding:
        clamp(
            62px,
            7vw,
            86px
        )
        0
        clamp(
            68px,
            8vw,
            96px
        );
}


.product-details__grid {
    display: grid;

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

    gap:
        clamp(
            45px,
            6vw,
            72px
        );

    align-items: start;
}


.product-details__main {
    width: 100%;
    max-width: 790px;
}


/* =========================================================
   CONTENT-SECTIONS
   ========================================================= */

.product-section {
    margin-bottom:
        clamp(
            34px,
            4vw,
            48px
        );
}


.product-section + .product-section {
    padding-top:
        clamp(
            32px,
            4vw,
            44px
        );

    border-top:
        1px solid
        var(--jl-product-line);
}


.product-section h2,
.product-experience h2 {
    max-width: 670px;

    margin:
        8px
        0
        18px;

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

    font-size:
        clamp(
            1.75rem,
            2.4vw,
            2.3rem
        );

    font-weight: 720;

    line-height: 1.12;

    letter-spacing: -0.035em;
}


.product-section .eyebrow,
.product-experience .eyebrow {
    margin-bottom: 0;

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

    letter-spacing: 0.13em;
}


/* =========================================================
   NORMALER DETAILTEXT
   ========================================================= */

.product-rich-text {
    max-width: 740px;

    color: #50645a;

    font-size: 1rem;

    line-height: 1.72;
}


.product-rich-text p {
    margin:
        0
        0
        1.15em;
}


.product-rich-text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   PERSÖNLICHE ERFAHRUNG
   ========================================================= */

.product-experience {
    margin:
        clamp(40px, 5vw, 54px)
        0;

    padding:
        clamp(27px, 3.5vw, 38px);

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #245846 0%,
            #194638 100%
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 18px;

    box-shadow:
        0 14px 35px
        rgba(23, 60, 50, 0.09);
}


.product-experience .eyebrow {
    color: #d9e7bf;
}


.product-experience h2 {
    margin-top: 8px;
    margin-bottom: 16px;

    color: #ffffff;
}


.product-experience__text {
    max-width: 690px;

    color: #eef5f0;

    font-size: 1rem;

    line-height: 1.7;
}


.product-experience__text p {
    margin:
        0
        0
        1.1em;

    color: inherit;
}


.product-experience__text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.product-details__sidebar {
    display: grid;

    gap: 13px;

    position: sticky;

    top: 105px;
}


.product-info-card {
    padding:
        19px
        20px;

    background: #f7f9f5;

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

    border-radius: 14px;
}


.product-info-card__label {
    margin:
        0
        0
        10px;

    color: #7b8a82;

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

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.product-info-card__brand {
    display: flex;
    align-items: center;
}


.product-info-card__brand
.jl-brand {
    font-size: 0.74rem;
}


.product-info-card__brand
.jl-brand__logo-image {
    height: 20px;

    max-width: 95px;
}


.product-info-card__tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}


.product-info-card__tags span {
    min-height: 30px;

    display: inline-flex;
    align-items: center;

    padding:
        0
        10px;

    color: #4e665b;
    background: #e9f1e5;

    border-radius: 999px;

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


/* =========================================================
   GESUNDHEITSHINWEIS IN SIDEBAR
   ========================================================= */

.product-info-card--notice {
    display: grid;

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

    gap: 11px;

    background: #faf9f4;
}


.product-info-card__notice-icon {
    width: 25px;
    height: 25px;

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

    color: #667b58;
    background: #e4edd5;

    border-radius: 50%;

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


.product-info-card--notice p {
    margin: 1px 0 0;

    color: #68776f;

    font-size: 0.78rem;

    line-height: 1.6;
}


/* =========================================================
   PRO / CONTRA
   ========================================================= */

.product-pros-cons {
    display: grid;

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

    gap: 17px;

    margin-top:
        clamp(
            38px,
            5vw,
            50px
        );
}


.product-pros-cons__card {
    padding:
        25px
        26px;

    background: #f7f8f5;

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

    border-radius: 15px;
}


.product-pros-cons__card--positive {
    background: #f0f6eb;
}


.product-pros-cons__card h3 {
    margin:
        0
        0
        17px;

    color: #284d40;

    font-size: 1.05rem;

    line-height: 1.35;
}


.product-pros-cons__card ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.product-pros-cons__card li {
    position: relative;

    margin-bottom: 10px;

    padding-left: 20px;

    color: #586d63;

    font-size: 0.86rem;

    line-height: 1.55;
}


.product-pros-cons__card li:last-child {
    margin-bottom: 0;
}


.product-pros-cons__card li::before {
    content: "✓";

    position: absolute;

    top: 0;
    left: 0;

    color: #71924f;

    font-weight: 780;
}


.product-pros-cons__list--neutral
li::before {
    content: "–";

    color: #87928c;
}


/* =========================================================
   KOMPAKTER HEALTH-HINWEIS
   ========================================================= */

.product-compact-footer {
    padding:
        28px
        0
        clamp(
            55px,
            7vw,
            75px
        );

    background: #ffffff;
}


.product-compact-note {
    max-width: 760px;

    display: grid;

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

    gap: 14px;

    align-items: start;

    margin:
        0
        auto;

    padding:
        20px
        22px;

    background: #faf9f4;

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

    border-radius: 13px;
}


.product-compact-note__mark {
    width: 29px;
    height: 29px;

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

    color: #667b58;
    background: #e4edd5;

    border-radius: 50%;

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


.product-compact-note__label {
    display: block;

    margin-bottom: 5px;

    color: #697c71;

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

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.product-compact-note p {
    margin: 0;

    color: #68786f;

    font-size: 0.82rem;

    line-height: 1.65;
}


/* =========================================================
   AFFILIATE-HINWEIS
   ========================================================= */

.product-affiliate-notice {
    padding:
        20px
        0;

    background: #faf9f4;

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


.product-affiliate-notice p {
    max-width: 820px;

    margin: 0;

    color: #748078;

    font-size: 0.76rem;

    line-height: 1.6;
}


/* =========================================================
   VERKNÜPFTER ERFAHRUNGSARTIKEL
   ========================================================= */

.product-rich-text
.jl-relation {
    max-width: 820px;

    margin-top: 46px;
}


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

@media (max-width: 1020px) {

    .product-hero--with-image
    .product-hero__grid {
        grid-template-columns:
            minmax(260px, 0.8fr)
            minmax(0, 1.2fr);

        gap: 44px;
    }


    .product-hero__title {
        font-size:
            clamp(
                2.5rem,
                5vw,
                3.5rem
            );
    }


    .product-details__grid {
        grid-template-columns:
            minmax(0, 1fr)
            260px;

        gap: 38px;
    }
}


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

@media (max-width: 860px) {

    .product-hero--with-image
    .product-hero__grid,
    .product-hero--no-image
    .product-hero__grid {
        grid-template-columns: 1fr;

        max-width: 720px;

        gap: 34px;
    }


    .product-hero__media {
        max-width: 520px;
    }


    .product-hero--with-image
    .product-hero__media {
        min-height: 330px;
    }


    .product-hero__content {
        max-width: none;
    }


    .product-details__grid {
        grid-template-columns: 1fr;

        gap: 44px;
    }


    .product-details__main {
        max-width: none;
    }


    .product-details__sidebar {
        position: static;

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


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

@media (max-width: 680px) {

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


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

        font-size: 0.72rem;
    }


    .product-hero {
        padding:
            26px
            0
            46px;
    }


    .product-hero--with-image
    .product-hero__grid,
    .product-hero--no-image
    .product-hero__grid {
        gap: 27px;
    }


    .product-hero--no-image
    .product-hero__media {
        width: 104px;
        height: 104px;

        border-radius: 18px;
    }


    .product-detail-placeholder__mark {
        width: 57px;
        height: 57px;

        font-size: 0.8rem;
    }


    .product-hero--with-image
    .product-hero__media {
        min-height: 270px;

        padding: 22px;
    }


    .product-hero__title,
    .product-single--compact
    .product-hero__title {
        font-size:
            clamp(
                2.25rem,
                10vw,
                3rem
            );

        line-height: 1.04;
    }


    .product-hero__excerpt {
        margin-top: 17px;

        font-size: 0.96rem;

        line-height: 1.65;
    }


    .product-hero__quickfacts {
        margin-top: 18px;
    }


    .product-purchase-card {
        margin-top: 23px;

        padding:
            20px
            19px
            21px;
    }


    .product-purchase-card__header {
        grid-template-columns: 1fr;

        gap: 5px;
    }


    .product-purchase-card__partner {
        text-align: left;
    }


    .product-purchase-card__discount {
        grid-template-columns: 1fr;

        gap: 8px;

        padding:
            14px
            15px;
    }


    .product-purchase-card__discount > strong {
        font-size: 1.1rem;
    }


    .product-purchase-card__discount > p {
        width: fit-content;
    }


    .product-details {
        padding:
            52px
            0
            64px;
    }


    .product-section {
        margin-bottom: 34px;
    }


    .product-section + .product-section {
        padding-top: 31px;
    }


    .product-section h2,
    .product-experience h2 {
        font-size:
            clamp(
                1.65rem,
                7vw,
                2rem
            );
    }


    .product-rich-text,
    .product-experience__text {
        font-size: 0.96rem;
    }


    .product-experience {
        margin:
            35px
            0;

        padding:
            25px
            22px;

        border-radius: 15px;
    }


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


    .product-info-card--notice p {
        font-size: 0.8rem;
    }


    .product-pros-cons {
        grid-template-columns: 1fr;

        margin-top: 34px;
    }


    .product-pros-cons__card {
        padding:
            22px
            21px;
    }


    .product-pros-cons__card li {
        font-size: 0.85rem;
    }


    .product-compact-footer {
        padding-top: 22px;
    }
}