/*
 * MTB-Kontaktdesign
 * Für ein Rebranding reichen in der Regel diese Variablen.
 */
.contact-page {
    --contact-page-bg: #050505;
    --contact-text: #f7f8fb;
    --contact-muted: #a9afbb;
    --contact-surface: #15171b;
    --contact-surface-alt: #090a0c;
    --contact-border: rgba(255, 255, 255, 0.14);
    --contact-accent: #3169dc;
    --contact-accent-contrast: #ffffff;
    --contact-danger: #ff8d86;
    --contact-danger-bg: #2d1010;
    --contact-success: #6ee7a8;
    --contact-success-bg: #092419;
    --contact-radius: 22px;
    --contact-control-radius: 9px;
    --contact-shadow: 0 28px 75px rgba(0, 0, 0, 0.5);
    --contact-hero-height: clamp(340px, 50vh, 560px);
    --contact-hero-image: url('../../img/hero/mitgliedsvereine.jpg');
    --contact-hero-position: center 15%;
    --contact-hero-overlay: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.48) 62%, rgba(0, 0, 0, 0.64) 100%);
    --contact-hero-text: #ffffff;
    --contact-content-width: 1200px;
}

.contact-page .contact-hero__title,
.contact-page .contact-sidebar__intro h2,
.contact-page .contact-form-card__header h2 {
    text-transform: uppercase;
}

.contact-page .contact-form-card {
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 42%);
}

.contact-page .contact-info-card {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent);
}

.contact-page .contact-submit {
    padding-inline: 1.8rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}