/* ==========================================================================
   contact.css - FOCUSED EDITION (Mail, Discord, LinkedIn)
   ========================================================================== */

/* --- Haupt-Container & Header --- */
.contact-section-card { 
    min-height: 60vh; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 1.5rem; 
}

.contact-header { 
    text-align: center; 
    margin-bottom: 3rem; 
    width: 100%; 
}

/* --- 1. E-Mail Sektion (Oben) --- */
.email-cards-wrapper { 
    width: fit-content; 
    margin-left: auto;
    margin-right: auto;
    max-width: 32rem; 
    display: flex; 
    flex-direction: column; 
    gap: 1.5rem; 
    margin-bottom: 4rem; 
}

.email-card { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 1.5rem 2rem; 
    width: 100%; 
}

.email-card-left { 
    display: flex; 
    align-items: center; 
    gap: 1.25rem; 
}

.email-icon-wrapper { 
    width: 3.5rem; 
    height: 3.5rem; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(234, 179, 8, 0.1)); 
    border: 1px solid rgba(245, 158, 11, 0.2);
    flex-shrink: 0; 
}

.email-icon-wrapper i { 
    color: #F59E0B; 
    font-size: 1.5rem; 
}

.email-text-wrapper { text-align: left; }

.email-title { 
    font-size: 1.25rem; 
    font-weight: 600; 
    color: #fff; 
    margin-bottom: 0.25rem; 
}

.email-desc { 
    color: #9ca3af; 
    font-size: 0.95rem; 
    margin: 0; 
    word-break: break-all;
}

.email-arrow { 
    font-size: 1.25rem; 
    color: #9ca3af;
    transition: transform 0.3s ease, color 0.3s ease;
}

.email-card:hover .email-arrow {
    transform: translateX(5px);
    color: #F59E0B;
}

/* --- 2. Social Sektion (Unten, Discord & LinkedIn) --- */
.contact-social-section { 
    text-align: center; 
    width: 100%; 
}

.contact-social-text { 
    color: #9ca3af; 
    margin-bottom: 2rem; 
    font-size: 1.05rem;
}

.contact-social-grid { 
    display: flex; 
    justify-content: center; 
    gap: 2rem; 
    max-width: 40rem; 
    margin: 0 auto; 
    flex-wrap: wrap;
    width: fit-content;
}

.social-button { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    width: 16rem; 
    height: 10rem; 
    padding: 1.5rem; 
    color: #e0e0e0; 
    font-weight: 600; 
    font-size: 1.1rem;
}

.social-button i { 
    font-size: 3rem; 
    margin-bottom: 1rem; 
    transition: transform 0.3s ease, color 0.3s ease; 
}

.social-button:has(.fa-discord):hover i { color: #5865F2; }
.social-button:has(.fa-linkedin-in):hover i { color: #0077B5; }

@media (min-width: 768px) { 
    .social-button:hover i { transform: scale(1.15); }
}

@media (max-width: 639px) { 
    .contact-section-card { padding: 1rem; } 
    
    .social-button { 
        width: 100%; 
        max-width: 20rem; 
        height: 8rem;
    }
    
    .contact-social-grid { gap: 1rem; }
}