#contactform { width:auto; margin: 3em auto; /* Zentriert den Container horizontal und fügt vertikalen Abstand hinzu */ padding: 2em; background-color: rgb(49, 54, 59, 0.7); border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); color: #EAEAEA; /* Helle Textfarbe */ } /* * Stil für die Erfolgsmeldung "Mail versand!" */ #contactform span { display: block; padding: 1em; text-align: center; font-size: 1.5em; font-weight: bold; color: #4CAF50; /* Grünton für Erfolg */ } /* * Allgemeine Formatierung für alle Formular-Elemente */ #contactform form { display: flex; flex-direction: column; gap: 15px; /* Abstand zwischen den Element-Gruppen */ } /* * Stil für die Labels */ #contactform label { font-weight: bold; margin-bottom: 5px; font-size: 1em; } /* * Stil für Input-Felder (Text, Mail) und Textarea */ #contactform input[type="text"], #contactform input[type="email"], /* Obwohl im HTML als type="text" verwendet, ist "email" semantisch korrekt */ #contactform textarea { padding: 10px; border: 1px solid #444; border-radius: 4px; font-size: 1em; background-color: #383D43; /* Dunkleres Feld */ color: #EAEAEA; transition: border-color 0.3s; width: 100%; /* Volle Breite innerhalb des Containers */ box-sizing: border-box; } #contactform input[type="text"]:focus, #contactform input[type="email"]:focus, #contactform textarea:focus { border-color: #4CAF50; /* Grüner Fokus-Rahmen */ outline: none; } /* * Stil für die Textarea (Nachricht) */ #contactform textarea { resize: vertical; /* Nur vertikales Ziehen erlauben */ min-height: 120px; margin:0px; } /* * Stil für den Sende-Button */ #contactform input[type="submit"] { background-color: #4CAF50; /* Grüner Button */ color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 1.1em; font-weight: bold; margin-top: 10px; transition: background-color 0.3s; } #contactform input[type="submit"]:hover { background-color: #45a049; /* Dunkler bei Hover */ } /* * Responsivität für kleinere Bildschirme  */ @media (max-width: 768px) { #contactform { margin: 2em 1em; /* Kleinerer Rand auf Mobilgeräten */ padding: 1.5em; } }