body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            min-height: 100vh;
        }
        header {
            width: 100%;
            max-width: 700px;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            gap: 20px;
            padding: 0 15px; /* Für Ränder auf Mobilgeräten */
            box-sizing: border-box;
        }
        header h2 {
            width: 100%;
            text-align: center;
            margin-bottom: 10px;
        }
        header img {
            width: 150px;
            flex-shrink: 0;
        }
        header .text {
            font-size: 1rem;
            color: #333;
            line-height: 1.5;
        }
        .message {
            width: 100%;
            max-width: 700px;
            text-align: center;
            font-weight: bold;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 5px;
        }
        .message.success {
            color: #155724;
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
        }
        .message.error {
            color: #721c24;
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
        }
        form {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 700px;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            box-sizing: border-box;
            padding: 20px 15px; /* Innenabstand für Ränder */
        }
        form h2 {
            margin-bottom: 20px;
            color: #333;
            width: 100%;
        }
        .form-group {
            flex: 1 1 calc(50% - 20px);
        }
        .form-group.full-width {
            flex: 1 1 100%;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            width: 100%;
            padding: 10px;
            border: none;
            background-color: #5cb85c;
            color: white;
            font-weight: bold;
            cursor: pointer;
            border-radius: 5px;
        }
        button:hover {
            background-color: #4cae4c;
        }
        .note {
            margin-top: 20px;
            font-size: 0.9em;
            color: #555;
            width: 100%;
            text-align: left;
	   align:left;
        }

	form {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 700px; /* Maximale Breite des Formulars */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    box-sizing: border-box;
    padding: 20px 15px; /* Innenabstand für Ränder */
}

input {
    width: 100%; /* Textfelder nehmen gesamte Breite der Gruppe */
    max-width: 350px; /* Maximale Breite für Eingabefelder */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Sorgt dafür, dass Padding und Rand in die Breite zählen */
}

.form-group {
    flex: 1 1 calc(50% - 20px); /* Auf größere Bildschirme angepasst */
}

.form-group.full-width {
    flex: 1 1 100%;
}



@media (max-width: 768px) {
    form {
        max-width: 90%; /* Auf kleineren Geräten weniger Breite */
        margin: 0 auto; /* Zentriert auf der Seite */
    }

    input {
        max-width: 100%; /* Textfelder füllen den verfügbaren Platz */
    }

    .form-group {
        flex: 1 1 100%; /* Einspaltiges Layout auf Mobilgeräten */
    }
}

header {
    width: 100%;
    max-width: 700px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
    padding: 0 15px; /* Für Ränder auf Mobilgeräten */
    box-sizing: border-box;
}

header h2 {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

header img {
    width: 150px;
    flex-shrink: 0;
}

header .text {
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
}

@media (max-width: 768px) {
    header {
        flex-direction: column; /* Logo und Text übereinander */
        text-align: center;
    }

    header img {
        width: 100px; /* Logo wird verkleinert */
        margin-bottom: 10px; /* Abstand unterhalb des Logos */
    }

    header .text {
        text-align: justify; /* Text bleibt leserlich ausgerichtet */
    }
}

.radio-group {
    flex-wrap: wrap;
    gap: 10px; /* Abstand zwischen den Radiobuttons */
    flex-direction: column; /* Untereinander anordnen */
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 10px; /* Abstand zwischen Radiobutton und Text */
    text-align: left; /* Sicherstellen, dass der Text links ausgerichtet ist */
}

.radio-group input[type="radio"] {
    margin: 0; /* Entfernt unnötige Abstände */
    padding: 0;
   width: 30px;
}

button[type="submit"] {
    display: block; /* Button wird als Block-Element dargestellt */
    width: 100%; /* Optional: Breite anpassen, falls gewünscht */
    margin-top: 20px; /* Abstand nach oben */
    padding: 10px 20px; /* Padding für bessere Klickfläche */
    font-size: 16px; /* Textgröße */
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #4cae4c;
}