/* Allgemeine Stile für das Formular */
.login-form-field label {
    display: block;
    font-weight: bold;
    margin: 5px 0 0 0;
}

.login-form-field input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}



.login-form-row {
    display: flex;
    flex-wrap: wrap; /* Felder umbrechen, wenn nicht genug Platz */
    gap: 10px;       /* Abstand zwischen Feldern */
}

/* Einzelne Feld-Container */
.login-form-field {
    flex: 1 1 200px; /* flexibel, aber mindestens 200px breit */
    min-width: 150px; /* verhindern, dass Felder zu klein werden */
    box-sizing: border-box;
}

/* Captcha-Feld ggf. anpassen */
.login-form-field.login-captcha {
    flex: 1 1 100px;
}

/* Button unter den Feldern zentrieren */
#mein-login-formular button.login-button {
    margin-top: 10px;
    /* width: 100%; */
}

/* Media Query für sehr kleine Bildschirme */
@media (max-width: 480px) {
    .login-form-row {
        flex-direction: column; /* alle Felder untereinander */
    }
    .login-form-field {
        width: 100%; /* volle Breite */
    }
}


/* Stil für den Anmeldebutton */
.login-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #6c757d;
	margin:10px 0;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    transition: background-color 0.3s ease;
}

.login-button:hover {
    background-color: #5a6268;
}

/* Nachrichtenbox */
#form-message {
	display:none;
}

.login-ajax-message.success {
    background-color: #e8f5e9;
	border-left: 4px solid #4caf50;
	color: #007300;
}
.message-green {
    background-color: #e8f5e9;
	border-left: 4px solid #4caf50;
	color: #007300;
}
.message-blue {
    background-color: #e0efff;
	border-left: 4px solid #0783ff;
	color: #0783ff;
}

.message-purple {
	background-color: #e0cdff;
	border-left: 4px solid #4c11ff;
	color: #61009a;
}
.message-yellow {
    background-color: #ffff88;
	border-left: 4px solid #a2a200;
	color: #330;
}
.message-grey {
    background-color: #ddd;
	border-left: 4px solid #333;
	color: #333;
}
.login-ajax-message {
    padding: 10px;
    margin: 10px 0;
}

.login-ajax-message.error {
    background-color: #f8d7da;
	color:#e30000;
    border-left: 4px solid #721c24;
}

.custom-login-form .login-form-row {
    flex-wrap: wrap;
}

.custom-login-form .login-form-field {
    width: 40%;
    margin-bottom: 15px;
}

@media (max-width: 600px) {
    .custom-login-form .login-form-field {
        width: 100%;
    }
}

#lost-password-form {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}


.spinner-text {
    font-size: 14px;
    color: #666;
}

.login-spinner {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #666;
}

.spinner-ring {
    width: 20px;
    height: 20px;
    border: 3px solid #ccc;
    border-radius: 50%;
    border-top-color: #6c757d; /* Farbe des rotierenden Teils */
    animation: spin 1s linear infinite;
    display: inline-block;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#register-form-wrapper {
    margin-top: 30px;
}

#register-form-wrapper .login-form-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.login-form-field {
    flex: 1;
    min-width: 250px;
}

.login-form-field input[type="text"],
.login-form-field input[type="email"],
.login-form-field input[type="password"] {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
	margin: 0 0 8px 0 !important;
}


.register-password-row {
    display: flex;
    gap: 15px;
}

.register-password-row .login-form-field {
    flex: 1;
}