/* =========================================
   RED ECHO – CONTACT
   RESPONSIVE / MOBILE FIRST

   Navigation, Titel und Logo
   kommen aus style.css.
========================================= */


/* =========================================
   1. VARIABLEN
========================================= */

.contact {
    --fs-cta: calc(clamp(1.4rem, 1.25rem + 1.2vw, 2.4rem) * var(--scale));
    --fs-email: calc(clamp(1.25rem, 1.1rem + 1.2vw, 2.2rem) * var(--scale));
    --fs-downloads-title: calc(clamp(1.25rem, 1rem + 1.1vw, 2.2rem) * var(--scale));
    --fs-download-button: calc(clamp(0.95rem, 0.8rem + 0.6vw, 1.4rem) * var(--scale));

    --social-size: calc(clamp(4rem, 3.67rem + 4.6vw, 8rem) * var(--scale));
    --social-gap: calc(clamp(1.4rem, 0.9rem + 3.3vw, 4rem) * var(--scale));

    --section-gap: calc(2.75rem * var(--scale));
}


/* =========================================
   2. ALLGEMEINE TEXTBEREICHE
========================================= */

.contact__section + .contact__section {
    margin-top: var(--section-gap);
}

.contact__section p {
    max-width: 50em;

    margin: 0;

    color: var(--color-white);

    font-size: var(--fs-body);
    font-weight: 400;

    line-height: 1.4;
}


/* =========================================
   3. CONTACT CTA
========================================= */

.contact__cta {
    width: 100%;

    margin-top: var(--section-gap);
}

.contact__cta-title {
    max-width: 27em;

    margin: 0;

    color: var(--color-white);

    font-size: var(--fs-cta);
    font-weight: 700;

    line-height: 1.25;
}


/* =========================================
   4. E-MAIL
========================================= */

.contact__email {
    display: inline-block;

    max-width: 100%;

    margin-top: calc(1.6rem * var(--scale));

    color: var(--color-white);

    font-size: var(--fs-email);
    font-weight: 700;

    line-height: 1.2;

    text-decoration: none;

    overflow-wrap: anywhere;

    -webkit-text-stroke: 1px transparent;

    transition:
        color 180ms ease,
        -webkit-text-stroke 180ms ease;
}

.contact__email:hover,
.contact__email:focus-visible {
    color: transparent;

    -webkit-text-stroke:
        1px
        var(--color-white);
}


/* =========================================
   5. SOCIAL MEDIA
========================================= */

.contact__socials {
    display: flex;
    align-items: center;

    gap: var(--social-gap);

    margin-top: calc(2.6rem * var(--scale));
}

.contact__social-link {
    display: inline-flex;

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

    border-radius: 50%;

    text-decoration: none;

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

.contact__social-link:hover,
.contact__social-link:focus-visible {
    transform: scale(1.08);

    opacity: 0.85;
}

.contact__social-icon {
    display: block;

    width: var(--social-size);
    height: var(--social-size);

    object-fit: contain;
}


/* =========================================
   6. DOWNLOADS
========================================= */

.contact__downloads {
    width: 100%;

    margin-top: calc(2.6rem * var(--scale));
}

.contact__downloads-title {
    margin:
        0
        0
        1.2rem;

    color: var(--color-white);

    font-size: var(--fs-downloads-title);
    font-weight: 700;

    line-height: 1.1;
}

.contact__download-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap:
        0.8rem
        0.9rem;

    width: 100%;

    max-width: 58rem;
}


/*
   Mindestens 44px hoch, damit die
   Buttons auf dem Handy gut zu
   treffen sind.
*/

.contact__download-button {
    display: inline-flex;

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

    min-height: max(2.75rem, 2.4em);

    padding:
        0.5em
        1.35em;

    border:
        1px
        solid
        transparent;

    border-radius: 999px;

    background-color: var(--color-white);

    color: var(--color-red);

    font-family: "Figtree", sans-serif;
    font-size: var(--fs-download-button);
    font-weight: 700;

    line-height: 1;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}


/* Hover wie bei Listen now */

.contact__download-button:hover,
.contact__download-button:focus-visible {
    background-color: var(--color-red);

    color: var(--color-white);

    border-color: var(--color-white);

    transform: scale(1.05);
}