/**
 * Jung Leben – Kontakt
 */


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

.contact-page {
    color: #173c32;
    background: #f5f8f3;
}


/* =========================================================
   KONTAKT-SEKTION
   ========================================================= */

.contact-section {
    min-height: 75vh;

    padding:
        105px
        0
        115px;

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

.contact-section__inner {
    max-width: 920px;
}


/* =========================================================
   HEADER
   ========================================================= */

.contact-section__header {
    max-width: 790px;

    margin-bottom: 50px;
}

.contact-section__header h1 {
    max-width: 780px;

    margin:
        12px
        0
        0;

    color: #173c32;

    font-size:
        clamp(
            3.2rem,
            5.5vw,
            5.4rem
        );

    font-weight: 720;

    line-height: 0.98;

    letter-spacing: -0.055em;
}

.contact-section__lead {
    max-width: 650px;

    margin:
        27px
        0
        0;

    color: #5e7067;

    font-size:
        clamp(
            1.02rem,
            1.35vw,
            1.15rem
        );

    line-height: 1.72;
}


/* =========================================================
   FORMULAR-KARTE
   ========================================================= */

.contact-form-card {
    padding:
        clamp(
            30px,
            4.5vw,
            50px
        );

    background: #ffffff;

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

    border-radius: 24px;

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


/* =========================================================
   STATUS
   ========================================================= */

.contact-form-message {
    margin-bottom: 32px;

    padding:
        18px
        20px;

    border-radius: 13px;
}

.contact-form-message strong {
    display: block;

    margin-bottom: 5px;

    font-size: 0.87rem;
}

.contact-form-message p {
    margin: 0;

    font-size: 0.8rem;

    line-height: 1.55;
}

.contact-form-message--success {
    color: #31523d;
    background: #e7f1dc;

    border:
        1px solid
        rgba(
            64,
            105,
            69,
            0.12
        );
}

.contact-form-message--error {
    color: #733d36;
    background: #f8eae6;

    border:
        1px solid
        rgba(
            130,
            65,
            55,
            0.12
        );
}

.contact-form-message--notice {
    color: #715c2d;
    background: #f6efd9;

    border:
        1px solid
        rgba(
            120,
            95,
            45,
            0.12
        );
}


/* =========================================================
   FORMULAR
   ========================================================= */

.contact-form {
    position: relative;
}


.contact-form__row {
    display: grid;

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

    gap: 18px;
}


.contact-form__field {
    margin-bottom: 23px;
}


.contact-form__field label {
    display: block;

    margin:
        0
        0
        9px;

    color: #38584c;

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

    line-height: 1.3;
}


.contact-form__field label span {
    color: #b07940;
}


/* =========================================================
   INPUTS
   ========================================================= */

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
    width: 100%;

    color: #173c32;
    background: #fafbf9;

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

    border-radius: 11px;

    font: inherit;

    font-size: 0.93rem;

    outline: none;

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


.contact-form__field input,
.contact-form__field select {
    height: 54px;

    padding:
        0
        16px;
}


.contact-form__field textarea {
    min-height: 205px;

    padding:
        15px
        16px;

    line-height: 1.65;

    resize: vertical;
}


.contact-form__field input:hover,
.contact-form__field select:hover,
.contact-form__field textarea:hover {
    border-color:
        rgba(
            23,
            60,
            50,
            0.25
        );
}


.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
    background: #ffffff;

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

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


.contact-form__field-note {
    margin:
        7px
        0
        0;

    color: #87928c;

    font-size: 0.66rem;
}


/* =========================================================
   HONEYPOT
   ========================================================= */

.contact-form__honeypot {
    position: absolute !important;

    left: -10000px !important;
    top: auto !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
}


/* =========================================================
   DATENSCHUTZ
   ========================================================= */

.contact-form__privacy {
    margin-top: 3px;

    padding:
        17px
        18px;

    background: #f1f5ee;

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

    border-radius: 11px;
}


.contact-form__privacy p {
    margin: 0;

    color: #748178;

    font-size: 0.7rem;

    line-height: 1.58;
}


.contact-form__privacy a {
    color: #3d5e51;

    font-weight: 700;

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


/* =========================================================
   SUBMIT
   ========================================================= */

.contact-form__submit {
    width: 100%;
    min-height: 60px;

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

    gap: 25px;

    margin-top: 22px;

    padding:
        10px
        12px
        10px
        21px;

    color: #ffffff;
    background: #315b49;

    border: 0;

    border-radius: 12px;

    cursor: pointer;

    font: inherit;
    font-size: 0.88rem;
    font-weight: 720;

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


.contact-form__submit:hover {
    transform:
        translateY(-2px);

    background: #284f40;

    box-shadow:
        0 12px 27px
        rgba(
            35,
            78,
            62,
            0.16
        );
}


.contact-form__submit:focus-visible {
    outline:
        3px solid
        rgba(
            156,
            188,
            101,
            0.5
        );

    outline-offset: 3px;
}


.contact-form__submit-arrow {
    width: 39px;
    height: 39px;

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

    flex:
        0
        0
        auto;

    color: #315b49;
    background: #d5e7aa;

    border-radius: 50%;

    font-size: 1rem;
}


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

.contact-form__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 11px;

    color: #89948e;

    font-size: 0.65rem;
}


.contact-form__security {
    display: inline-flex;
    align-items: center;

    gap: 5px;
}


.contact-form__security > span {
    color: #63845a;

    font-weight: 800;
}


/* =========================================================
   MEDIZINISCHER HINWEIS
   ========================================================= */

.contact-section__note {
    position: relative;

    max-width: 820px;

    margin:
        34px
        auto
        0;

    padding:
        22px
        26px
        22px
        29px;

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

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

    border-radius: 13px;
}


/*
 * Kleine Akzentlinie statt Icon.
 */
.contact-section__note::before {
    content: "";

    position: absolute;

    top: 22px;
    bottom: 22px;
    left: 0;

    width: 3px;

    background: #9ebd67;

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


.contact-section__note-label {
    display: block;

    margin-bottom: 7px;

    color: #526b5f;

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

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.contact-section__note p {
    max-width: 720px;

    margin: 0;

    color: #748078;

    font-size: 0.74rem;

    line-height: 1.65;
}


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

@media (max-width: 900px) {

    .contact-section__inner {
        max-width: 800px;
    }
}


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

@media (max-width: 620px) {

    /* Seite */

    .contact-section {
        padding:
            72px
            0
            78px;
    }


    /* Header */

    .contact-section__header {
        margin-bottom: 36px;
    }

    .contact-section__header h1 {
        font-size:
            clamp(
                2.8rem,
                13vw,
                4.15rem
            );
    }

    .contact-section__lead {
        margin-top: 21px;

        font-size: 0.97rem;

        line-height: 1.65;
    }


    /* Karte */

    .contact-form-card {
        padding:
            25px
            19px;

        border-radius: 19px;
    }


    /* Name / E-Mail */

    .contact-form__row {
        grid-template-columns: 1fr;

        gap: 0;
    }


    /* Felder */

    .contact-form__field {
        margin-bottom: 19px;
    }


    .contact-form__field input,
    .contact-form__field select {
        height: 51px;
    }


    .contact-form__field textarea {
        min-height: 185px;
    }


    /* Button */

    .contact-form__submit {
        min-height: 57px;
    }


    /* Meta */

    .contact-form__meta {
        align-items: flex-start;
        flex-direction: column;

        gap: 5px;
    }


    /* Hinweis */

    .contact-section__note {
        margin-top: 24px;

        padding:
            19px
            19px
            19px
            23px;
    }


    .contact-section__note::before {
        top: 18px;
        bottom: 18px;
    }
}