body 
	{
		font-family: Open Sans, sans-serif;
		margin: 25px;
	}

.schulewirtschaftgrün 
	{
		color: #0E8D46;
	}

input[type="checkbox"],
input[type="radio"] 	
	{
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
	}

label.checkbox-label,
label.radio-label 
	{
		position: relative;
		padding-left: 30px; /* Abstand für das benutzerdefinierte Kästchen */
		cursor: pointer;
		font-size: 18px;
	}

label.checkbox-label::before,
label.radio-label::before 
	{
		content: '';
		position: absolute;
		left: 0;
		top: 4px;
		width: 20px; /* Breite des benutzerdefinierten Kästchens */
		height: 20px; /* Höhe des benutzerdefinierten Kästchens */
		border: 2px solid #0E8D46; /* Rahmenfarbe */
		background: white; /* Hintergrundfarbe */
		border-radius: 4px; /* Ecken abrunden */
		margin-right: 20px; /* Abstand rechts */
		transition: background 0.5s, border-color 0.5s; /* Sanfter Übergang */
	}

input[type="checkbox"]:checked + label.checkbox-label::before,
input[type="radio"]:checked + label.radio-label::before 
	{
		background: #0E8D46; /* Hintergrundfarbe, wenn ausgewählt */
		border-color: #0E8D46; /* Rahmenfarbe, wenn ausgewählt */
	}

input[type="checkbox"]:checked + label.checkbox-label::after 
	{
		content: '✔'; /* Häkchen Zeichen für Checkboxen */
		position: absolute;
		left: 5px; /* Position des Häkchens */
		top: 4px;
		color: white; /* Häkchenfarbe */
		font-size: 15px; /* Häkchen Schriftgröße */
	}

input[type="checkbox"]:focus + label.checkbox-label::before,
input[type="radio"]:focus + label.radio-label::before 
	{
		outline: 2px solid #0E8D46; /* Fokusrahmen für die benutzerdefinierte Checkbox/Radio */
	}

input[type="text"], input[type="email"], input[type="url"], input[type="tel"] 
	{
		margin-top: 10px;
		margin-bottom: 20px;
		padding: 10px;
		box-sizing: border-box;
	}

.indented-text {
        margin-left: 28px; /* Passe den Wert nach Bedarf an */
    }

.address-container 
	{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

.address-row 
	{
		display: flex;
		gap: 10px;
	}

.address-row input 
	{
		flex: 1;
		min-width: 150px;
	}

 .button1 {
    width: 350px; /* Setze die gewünschte Breite */
    padding: 10px; /* Innenabstand für die Schaltflächen */
    font-size: 16px; /* Schriftgröße */
    background-color: #0E8D46; /* Hintergrundfarbe */
    color: white; /* Schriftfarbe */
    border: none; /* Kein Rand */
    border-radius: 0px; /* Abgerundete Ecken */
    cursor: pointer; /* Zeiger-Cursor */
    margin: 5px; /* Abstand zwischen den Buttons */
    transition: background-color 0.1s; /* Übergangseffekt */
}

.button1:hover {
    background-color: #45a049; /* Dunklere Hintergrundfarbe beim Hover */
}

#contact-container 
	{
		margin-bottom: 20px;
	}

.contact-row 
	{
		display: flex;
		gap: 10px;
		margin-bottom: 10px;
	}

.transparent-button 
	{
		background-color: transparent;
		border: none; /* Entfernt den Rahmen, falls gewünscht */
	}

.transparent-button:hover 
	{
		background-color: transparent !important; /* Hintergrund bleibt transparent beim Hover */
		/* Optional: Du kannst hier weitere Stile hinzufügen, z.B. eine andere Textfarbe */
	}

.remove-contact 
	{
		font-size: 30px; /* Größe des "X" erhöhen */
		margin-left: 10px; /* Abstand zwischen den Eingabefeldern und dem "X" */
		line-height: 2; /* Zeilenhöhe anpassen */
	}

button 
	{
		padding: 10px 20px;
		background-color: #0E8D46;
		color: white;
		border: none;
		cursor: pointer;
	}

button:disabled 
	{
		background-color: #A3D9A0;
		cursor: not-allowed;
	}

button:hover:not(:disabled)
    {
		background-color: #0B6A3B;
	}

.radio-list 
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30px 30px; /* Zeilenabstand, Spaltenabstand 10px 30px */
		max-width: 1260px; /* optional: Breite begrenzen 400px*/
		margin-left: 10px; /* Verschiebung nach rechts */
	}

.radio-item 
	{
		/* display: flex;*/
		width: 50%;
		box-sizing: border-box;
		align-items: center;
	}

.auswahl-container 	
	{
		display: flex;
		flex-wrap: wrap;
	}

.auswahl-item 
	{
		width: 50%;  /*50%*/
		box-sizing: border-box;
		padding: 10px;
	}

	/* Responsive Anpassung für kleinere Bildschirme */
	/* Auf 100% Breite ändern, wenn der Bildschirm kleiner ist */
	
@media (max-width: 600px) 
    {
        .auswahl-item {width: 100%;} 
        .radio-item   {width: 100%;}
        .radio-list {grid-template-columns: 1fr;} /* Eine Spalte für die Radio-Items */
    }