/* ==========================================================
   HEGAU24 — NEWSLETTER
========================================================== */

.hegau-newsletter {
    width: min(1800px, 94%);
    margin: 34px auto 48px;
}

.hegau-newsletter__inner {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) minmax(430px, 560px);
    align-items: center;
    gap: 28px;

    padding: 30px 34px;

    border: 1px solid rgba(31, 89, 145, .08);
    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 100%
        );

    box-shadow:
        0 10px 32px rgba(21, 63, 103, .08);
}

/* ==========================================================
   ICON
========================================================== */

.hegau-newsletter__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 66px;
    height: 66px;

    border-radius: 18px;

    background: #edf5ff;
    color: #1265b8;

    font-size: 31px;

    box-shadow:
        inset 0 0 0 1px rgba(18, 101, 184, .06);
}

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

.hegau-newsletter__eyebrow {
    display: block;

    margin-bottom: 6px;

    color: #1265b8;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

.hegau-newsletter__title {
    margin: 0 0 7px;

    color: #172b45;

    font-size: clamp(22px, 2vw, 29px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.02em;
}

.hegau-newsletter__text {
    max-width: 650px;

    margin: 0;

    color: #718096;

    font-size: 14px;
    line-height: 1.55;
}

/* ==========================================================
   FORM
========================================================== */

.hegau-newsletter__form {
    min-width: 0;
}

.hegau-newsletter__field {
    display: flex;
    align-items: stretch;

    overflow: hidden;

    border: 1px solid #dce6f0;
    border-radius: 13px;

    background: #fff;

    box-shadow:
        0 4px 14px rgba(21, 63, 103, .05);
}

.hegau-newsletter__field input {
    min-width: 0;
    flex: 1;

    height: 50px;

    padding: 0 16px;

    border: 0;
    outline: none;

    background: transparent;

    color: #172b45;

    font-family: inherit;
    font-size: 14px;
}

.hegau-newsletter__field input::placeholder {
    color: #9aaabd;
}

.hegau-newsletter__field input:focus {
    outline: none;
}

.hegau-newsletter__field button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    flex: 0 0 auto;

    min-width: 145px;

    padding: 0 18px;

    border: 0;

    background: #1265b8;
    color: #fff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.hegau-newsletter__field button:hover {
    background: #0d579f;
}

.hegau-newsletter__field button span {
    font-size: 18px;
    line-height: 1;

    transition: transform .2s ease;
}

.hegau-newsletter__field button:hover span {
    transform: translateX(3px);
}

.hegau-newsletter__note {
    display: block;

    margin-top: 8px;

    color: #9aaabd;

    font-size: 11px;
}

/* ==========================================================
   SCREEN READER
========================================================== */

.hegau-newsletter .screen-reader-text {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1100px) {

    .hegau-newsletter__inner {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .hegau-newsletter__form {
        grid-column: 1 / -1;
    }

}

@media (max-width: 650px) {

    .hegau-newsletter {
        width: calc(100% - 28px);
        margin: 28px auto 38px;
    }

    .hegau-newsletter__inner {
        grid-template-columns: 1fr;

        gap: 18px;

        padding: 24px 20px;

        border-radius: 20px;
    }

    .hegau-newsletter__icon {
        width: 54px;
        height: 54px;

        border-radius: 15px;

        font-size: 25px;
    }

    .hegau-newsletter__title {
        font-size: 23px;
    }

    .hegau-newsletter__text {
        font-size: 13px;
    }

    .hegau-newsletter__field {
        flex-direction: column;
    }

    .hegau-newsletter__field input {
        width: 100%;
    }

    .hegau-newsletter__field button {
        width: 100%;
        height: 48px;
    }

}