/* --- SPEZIELLES STYLING FÜR DIE KONTAKTSEITE --- */

/* Zentriert den gesamten Inhalt der Kontaktseite */
.contact-page-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #000; /* Tiefschwarz */
padding: 20px;
color: white;
}

.contact-container {
width: 100%;
max-width: 800px;
background: #111; /* Leichtes Grau für die Formular-Box */
padding: 40px;
border-radius: 20px;
border: 1px solid #333;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.back-btn {
color: #c45800;
text-decoration: none;
font-size: 0.9rem;
margin-bottom: 20px;
display: inline-block;
transition: color 0.3s;
}

.back-btn:hover {
color: white;
}

/* Überschriften auf der Kontaktseite */
.contact-container h1 {
color: #c45800;
font-size: 2.5rem;
margin-bottom: 10px;
}

/* Das eigentliche Formular */
.contact-form {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 30px;
}

/* Zeilen für Vorname/Nachname & Email/Telefon */
.form-row {
display: flex;
gap: 20px;
}

.contact-form input,
.contact-form textarea {
flex: 1;
padding: 15px;
background: #222;
border: 1px solid #444;
border-radius: 8px;
color: white;
font-size: 1rem;
outline: none;
transition: border-color 0.3s, box-shadow 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
border-color: #c45800;
box-shadow: 0 0 8px rgba(196, 88, 0, 0.3);
}

/* Großer Goldener Button */
.submit-btn-full {
background: #c45800;
color: black;
padding: 18px;
border: none;
border-radius: 8px;
font-weight: bold;
font-size: 1.1rem;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
transition: transform 0.2s, background 0.3s;
}

.submit-btn-full:hover {
background: white;
transform: translateY(-3px);
}

.betreff-container {
display: flex;
flex-direction: column;
gap: 10px; /* Kleiner Abstand zwischen Dropdown und Textfeld */
}

/* Styling für das Auswahlfeld (etwas dezenter) */
#betreff-select {
width: 100%;
padding: 10px 15px;
background: #1a1a1a;
border: 1px solid #333;
border-radius: 8px;
color: #888; /* Etwas grauer, da es nur eine Hilfe ist */
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}

/* Der goldene Pfeil für dieses spezielle Feld */


/* Handy-Anpassung: Felder untereinander stapeln */
@media (max-width: 600px) {
.form-row {
flex-direction: column;
gap: 20px;
}

.contact-container {
padding: 20px;
}

.contact-container h1 {
font-size: 1.8rem;
}
}