.preloader {
	position: absolute; /* Stellt sicher, dass der Preloader absolut innerhalb des Containers positioniert wird */
	top: 0;
	left: 0;
	width: 100%;  /* Deckt die gesamte Breite ab */
	height: 100%; /* Deckt die gesamte Höhe ab */
	background: rgba(255, 255, 255, 0.5); /* Leicht transparent */
	/* display: flex; */
	justify-content: center; /* Zentriert horizontal */
	align-items: center;     /* Zentriert vertikal */
	z-index: 1000;
}

.preloader::before {
	content: "";
	width: 50px;
	height: 50px;
	border: 5px solid #ccc;
	border-top-color: #333;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-right: 15px; /* Optional, fügt Abstand hinzu, falls du Text daneben haben möchtest */
}

/* Definiert die Drehung des Spinners */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


.form-step.fade-out {
	animation: fadeOut 0.5s forwards;
}

.form-step.fade-in {
	animation: fadeIn 0.5s forwards;
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}