.contact-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;

    /* 2px, which is what the 24px line and the 1px border leave of the drawn 30px. */
    padding-block: 0.125rem;
    padding-inline: 1.25rem;
    border: 1px solid var(--sav-color-dunkelblau);
    border-radius: var(--sav-radius);
    color: var(--sav-color-dunkelblau);
    font-size: 0.875rem;
    line-height: 1.5rem;

    /* 0.5px at 14px. */
    letter-spacing: 0.0357em;
    text-decoration: none;

    @media (prefers-reduced-motion: no-preference) {
        transition:
            color 0.2s,
            background-color 0.2s;
    }

    &:hover,
    &:active {
        background-color: var(--sav-color-dunkelblau);
        color: var(--sav-color-weiss);
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }
}

/* Both glyphs share the one cell, so the link keeps its width when they swap. */
.contact-link__icon {
    display: grid;
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;

    & svg {
        grid-area: 1 / 1;
        inline-size: 100%;
        block-size: 100%;
    }

    & svg + svg {
        visibility: hidden;
    }

    /* Only where a second glyph follows, or a link with one icon would lose it on hover. */
    .contact-link:is(:hover, :active) & svg:has(+ svg) {
        visibility: hidden;
    }

    .contact-link:is(:hover, :active) & svg + svg {
        visibility: visible;
    }
}