/* ========================================
   CONTACT
======================================== */
.contact-page { background-color: var(--background); display: flex; flex-direction: column; min-height: 100vh; }
.contact-page main { flex: 1; display: flex; align-items: center; justify-content: center; }
.contact-wrapper { padding: 2rem; display: flex; flex-wrap: wrap; gap: 3rem; justify-content: center; width: 100%; }
.contact-gegevens { flex: 1 1 300px; max-width: 500px; }
.contact-gegevens h1 { font-size: 2.2rem; color: var(--primary); margin-bottom: 1rem; }
.contact-gegevens p { font-size: 1.1rem; margin-bottom: 1.5rem; }
.contact-gegevens ul { list-style: none; padding: 0; }
.contact-gegevens li { margin-bottom: 0.8rem; font-size: 1rem; }
.contact-form { flex: 1 1 300px; max-width: 500px; }
.contact-form form { display: flex; flex-direction: column; gap: 1rem; }
.contact-form input, .contact-form textarea { padding: 0.75rem 1rem; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; background: #fff; color: var(--primary); }
.contact-form button { background-color: var(--logo); color: var(--primary); padding: 0.75rem 1.5rem; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; transition: background-color 0.3s; }
.contact-form button:hover { background-color: var(--primary); color: #fff; }
@media (max-width: 768px) { .contact-wrapper { flex-direction: column; padding: 2rem 1rem; } .contact-gegevens h1, .contact-gegevens p, .contact-gegevens li, .contact-form input, .contact-form textarea, .contact-form button { font-size: 1rem; } }