/**
 * Jung Leben – About / Über mich
 */


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

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


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

.about-hero {
    padding:
        110px
        0
        100px;

    overflow: hidden;

    background: #f5f8f3;
}

.about-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, 0.92fr);

    gap:
        clamp(
            70px,
            8vw,
            125px
        );

    align-items: center;
}


/*
 * Ohne Portraitbild:
 * Kein künstlicher Platzhalter.
 */
.about-hero__grid--without-image {
    grid-template-columns: 1fr;
}

.about-hero__grid--without-image
.about-hero__content {
    max-width: 1000px;
}


.about-hero__content {
    max-width: 780px;
}

.about-hero h1 {
    max-width: 850px;

    margin:
        13px
        0
        0;

    color: #173c32;

    font-size:
        clamp(
            3.5rem,
            5.7vw,
            5.9rem
        );

    font-weight: 720;

    line-height: 0.98;

    letter-spacing: -0.056em;
}

.about-hero__lead {
    max-width: 670px;

    margin:
        30px
        0
        0;

    color: #596d63;

    font-size:
        clamp(
            1.04rem,
            1.35vw,
            1.17rem
        );

    line-height: 1.76;
}


/* Keywords */

.about-hero__keywords {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 34px;
}

.about-hero__keywords span {
    padding:
        8px
        13px;

    color: #426052;
    background:
        rgba(
            226,
            235,
            218,
            0.72
        );

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

    border-radius: 999px;

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

    letter-spacing: 0.01em;
}


/* Portrait */

.about-hero__media {
    position: relative;

    margin: 0;
}

.about-hero__image {
    display: block;

    width: 100%;
    height: 570px;

    object-fit: cover;

    border-radius:
        28px
        28px
        95px
        28px;

    box-shadow:
        0 26px 70px
        rgba(23, 60, 50, 0.11);
}

.about-hero__caption {
    position: absolute;

    left: 27px;
    bottom: 25px;

    min-width: 185px;

    padding:
        15px
        18px;

    color: #ffffff;
    background:
        rgba(
            27,
            72,
            58,
            0.93
        );

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

    border-radius: 13px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.about-hero__caption strong,
.about-hero__caption span {
    display: block;
}

.about-hero__caption strong {
    font-size: 0.88rem;
}

.about-hero__caption span {
    margin-top: 3px;

    color:
        rgba(
            255,
            255,
            255,
            0.64
        );

    font-size: 0.69rem;
}


/* =========================================================
   STORY
   ========================================================= */

.about-story {
    padding:
        115px
        0;

    background: #ffffff;
}

.about-story__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    gap:
        clamp(
            70px,
            9vw,
            140px
        );

    align-items: start;
}

.about-story__heading {
    position: sticky;

    top: 120px;
}

.about-story h2 {
    max-width: 590px;

    margin:
        11px
        0
        0;

    color: #173c32;

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

    line-height: 1.02;

    letter-spacing: -0.046em;
}

.about-story__content {
    max-width: 720px;
}

.about-story__text {
    color: #53675d;

    font-size:
        clamp(
            1.03rem,
            1.25vw,
            1.1rem
        );

    line-height: 1.83;
}

.about-story__text p {
    margin:
        0
        0
        1.55em;
}

.about-story__text p:last-child {
    margin-bottom: 0;
}


/* Statement innerhalb Story */

.about-story__statement {
    margin-top: 48px;

    padding:
        28px
        30px;

    background: #f0f4ed;

    border-left:
        3px solid
        #9dbb67;

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

.about-story__statement span {
    display: block;

    margin-bottom: 9px;

    color: #839188;

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

    letter-spacing: 0.11em;

    text-transform: uppercase;
}

.about-story__statement p {
    margin: 0;

    color: #315347;

    font-size:
        clamp(
            1.08rem,
            1.5vw,
            1.3rem
        );

    font-weight: 600;

    line-height: 1.52;

    letter-spacing: -0.015em;
}


/* =========================================================
   GRUNDSÄTZE
   ========================================================= */

.about-principles {
    padding:
        110px
        0
        105px;

    color: #ffffff;
    background: #204a3c;
}

.about-principles .eyebrow {
    color: #d3e6a6;
}

.about-principles__header {
    max-width: 880px;

    margin-bottom: 70px;
}

.about-principles__header h2 {
    max-width: 800px;

    margin:
        12px
        0
        0;

    color: #ffffff;

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

    line-height: 1;

    letter-spacing: -0.047em;
}

.about-principles__intro {
    max-width: 610px;

    margin:
        25px
        0
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-size: 0.98rem;

    line-height: 1.68;
}


/*
 * Keine Karten, keine Icons, keine Nummern.
 * Reine typografische Prinzipien.
 */
.about-principles__grid {
    display: grid;

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

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

    padding:
        8px
        40px
        0;

    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );
}

.about-principle:first-child {
    padding-left: 0;

    border-left: 0;
}

.about-principle:last-child {
    padding-right: 0;
}

.about-principle::before {
    content: "";

    display: block;

    width: 37px;
    height: 3px;

    margin-bottom: 35px;

    background: #cfe4a2;

    border-radius: 999px;
}

.about-principle h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            1.6rem,
            2.4vw,
            2.15rem
        );

    font-weight: 650;

    line-height: 1.1;

    letter-spacing: -0.025em;
}

.about-principle p {
    max-width: 330px;

    margin:
        17px
        0
        0;

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

    font-size: 0.91rem;

    line-height: 1.7;
}


/* =========================================================
   QUOTE
   ========================================================= */

.about-quote {
    padding:
        105px
        0;

    background: #edf3e9;
}

.about-quote__inner {
    max-width: 1080px;
}

.about-quote__eyebrow {
    margin:
        0
        0
        29px;

    color: #829179;

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

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.about-quote blockquote {
    margin: 0;
    padding: 0;

    border: 0;
}

.about-quote blockquote > p {
    max-width: 1000px;

    margin: 0;

    color: #20483a;

    font-size:
        clamp(
            2rem,
            3.7vw,
            3.65rem
        );

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -0.04em;
}

.about-quote blockquote footer {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-top: 32px;
}

.about-quote blockquote footer span {
    color: #315448;

    font-size: 0.82rem;
    font-weight: 750;
}

.about-quote blockquote footer small {
    color: #849088;

    font-size: 0.72rem;
}

.about-quote blockquote footer small::before {
    content: "—";

    margin-right: 11px;
}


/* =========================================================
   ENTDECKEN / CTA
   ========================================================= */

.about-discover {
    padding:
        105px
        0
        115px;

    background: #ffffff;
}

.about-discover__header {
    margin-bottom: 48px;
}

.about-discover__heading-grid {
    display: grid;

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

    gap:
        clamp(
            55px,
            8vw,
            115px
        );

    align-items: end;
}

.about-discover h2 {
    max-width: 730px;

    margin:
        11px
        0
        0;

    color: #173c32;

    font-size:
        clamp(
            2.45rem,
            4.4vw,
            4.3rem
        );

    line-height: 1.02;

    letter-spacing: -0.045em;
}

.about-discover__heading-grid > p {
    margin: 0;

    color: #65766d;

    line-height: 1.72;
}


/* Zwei gleichwertige Links */

.about-discover__grid {
    display: grid;

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

    gap: 18px;
}

.about-discover-card {
    min-height: 310px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding:
        29px
        31px
        32px;

    color: #173c32;
    background: #f3f7f0;

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

    border-radius: 22px;

    text-decoration: none;

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

.about-discover-card:hover {
    transform:
        translateY(-5px);

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

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


/* Zweite Karte leicht anders */

.about-discover-card--recommendations {
    background: #edf3e8;
}


/* Card Top */

.about-discover-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.about-discover-card__label {
    color: #7b8a81;

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

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.about-discover-card__arrow {
    width: 43px;
    height: 43px;

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

    color: #ffffff;
    background: #315b49;

    border-radius: 50%;

    font-size: 1rem;

    transition:
        transform 180ms ease;
}

.about-discover-card:hover
.about-discover-card__arrow {
    transform:
        translate(
            3px,
            -3px
        );
}


/* Card Content */

.about-discover-card__content {
    max-width: 520px;
}

.about-discover-card h3 {
    margin: 0;

    color: #204a3c;

    font-size:
        clamp(
            2rem,
            3.4vw,
            3.2rem
        );

    line-height: 1;

    letter-spacing: -0.04em;
}

.about-discover-card__content p {
    max-width: 480px;

    margin:
        18px
        0
        0;

    color: #65766e;

    font-size: 0.92rem;

    line-height: 1.68;
}


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

@media (max-width: 980px) {

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

        gap: 52px;
    }

    .about-hero__media {
        max-width: 720px;
    }

    .about-story__grid {
        grid-template-columns: 1fr;

        gap: 42px;
    }

    .about-story__heading {
        position: static;
    }

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

    .about-principle {
        min-height: 0;

        padding:
            34px
            0;

        border-left: 0;

        border-top:
            1px solid
            rgba(
                255,
                255,
                255,
                0.14
            );
    }

    .about-principle:first-child {
        padding-top: 0;

        border-top: 0;
    }

    .about-principle::before {
        margin-bottom: 22px;
    }

    .about-principle p {
        max-width: 580px;
    }

    .about-discover__heading-grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }
}


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

@media (max-width: 620px) {

    /* Hero */

    .about-hero {
        padding:
            75px
            0
            65px;
    }

    .about-hero h1 {
        font-size:
            clamp(
                2.9rem,
                13vw,
                4.3rem
            );
    }

    .about-hero__lead {
        margin-top: 22px;

        font-size: 0.98rem;

        line-height: 1.66;
    }

    .about-hero__keywords {
        margin-top: 27px;
    }

    .about-hero__image {
        height: 430px;

        border-radius:
            21px
            21px
            65px
            21px;
    }

    .about-hero__caption {
        left: 16px;
        bottom: 16px;
    }


    /* Story */

    .about-story {
        padding:
            72px
            0;
    }

    .about-story h2 {
        font-size:
            clamp(
                2.2rem,
                10vw,
                3.4rem
            );
    }

    .about-story__text {
        font-size: 0.98rem;

        line-height: 1.72;
    }

    .about-story__statement {
        margin-top: 35px;

        padding:
            23px
            22px;
    }


    /* Prinzipien */

    .about-principles {
        padding:
            72px
            0
            68px;
    }

    .about-principles__header {
        margin-bottom: 43px;
    }

    .about-principles__header h2 {
        font-size:
            clamp(
                2.35rem,
                10.5vw,
                3.6rem
            );
    }

    .about-principles__intro {
        margin-top: 20px;
    }


    /* Quote */

    .about-quote {
        padding:
            70px
            0;
    }

    .about-quote blockquote > p {
        font-size:
            clamp(
                1.75rem,
                8.2vw,
                2.7rem
            );
    }


    /* Discover */

    .about-discover {
        padding:
            72px
            0
            80px;
    }

    .about-discover h2 {
        font-size:
            clamp(
                2.25rem,
                10vw,
                3.4rem
            );
    }

    .about-discover__grid {
        grid-template-columns: 1fr;

        gap: 13px;
    }

    .about-discover-card {
        min-height: 265px;

        padding:
            24px
            23px
            26px;

        border-radius: 19px;
    }

    .about-discover-card__arrow {
        width: 40px;
        height: 40px;
    }

    .about-discover-card h3 {
        font-size:
            clamp(
                1.9rem,
                10vw,
                2.8rem
            );
    }
}