/* Registrierung Formular Wrapper */
.registration-form-wrapper {
    max-width: 615px; /* Maximale Breite des Formulars auf 600px beschränkt */
    margin: 0 auto; /* Zentriert das Formular horizontal */
    padding: 20px; /* Innenabstand innerhalb des Formular-Containers */
    background-color: rgba(0, 0, 0, 0.8); /* Dunkler halbtransparenter Hintergrund */
    color: #fff; /* Weiße Textfarbe */
    border-radius: 10px; /* Abgerundete Ecken für den Container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Schatten um das Formular */
    box-sizing: border-box; /* Stellen sicher, dass Padding und Border in der Gesamtbreite enthalten sind */
}

.registration-form-wrapper h2 {
    text-align: center; /* Zentriert den Titel */
    font-size: 2rem; /* Setzt die Schriftgröße des Titels */
    margin-bottom: 20px; /* Abstand nach unten zum nächsten Element */
}

/* Formular-Fieldsets (Felder innerhalb des Formulars) */
.registration-form-box {
    background-color: #333; /* Dunkler Hintergrund für die Formularbox */
    padding: 20px; /* Innenabstand innerhalb der Box */
    border-radius: 8px; /* Abgerundete Ecken für die Box */
    box-sizing: border-box; /* Stellen sicher, dass Padding in der Gesamtbreite enthalten ist */
}

.form-fieldset {
    margin-bottom: 20px; /* Abstand nach unten zu anderen Fieldsets */
}

/* Formular-Felder */
.com-users-registration__form .form-control {
    width: 100%; /* Maximale Breite der Eingabefelder */
    padding: 12px; /* Innenabstand für die Felder */

    border-radius: 6px; /* Abgerundete Ecken für die Felder */
    border: 1px solid #ccc; /* Grauer Rand für die Felder */
    background-color: #222; /* Dunkler Hintergrund für die Felder */
    color: #fff; /* Weiße Schriftfarbe für die Eingabe */
    box-sizing: border-box; /* Padding und Border werden in der Gesamtbreite des Feldes mitgerechnet */
}

/* Abstand nach unten für Felder */
#jform_name{
    margin-bottom: 10px; /* z. B. 15px Abstand */
}
#jform_username{
    margin-bottom: 5px; /* z. B. 15px Abstand */
}

#jform_password1 {
    margin-bottom: 0px; /* z. B. 15px Abstand */
}

#progress-0 {
    margin-bottom: 5px; /* z. B. 15px Abstand */
}

#password-0 {
    margin-bottom: 5px; /* z. B. 15px Abstand */
}

#jform_password2 {
    margin-bottom: 5px; /* z. B. 15px Abstand */
}


.com-users-registration__form .form-control:focus {
    border-color: #ff9900; /* Randfarbe beim Fokussieren der Felder */
    background-color: #333; /* Dunklerer Hintergrund beim Fokussieren */
}

/* Registrierung Button */
.register-btn {
    width: 100%; /* Button auf die volle Breite setzen */
    padding: 12px; /* Innenabstand innerhalb des Buttons */
    background-color: #4a4a4a; /* Hintergrundfarbe des Buttons */
    color: #f8f8f8; /* Textfarbe des Buttons */
	border: 1px solid #000!important;
    border-radius: 6px; /* Abgerundete Ecken für den Button */
    font-size: 1rem; /* Schriftgröße des Buttons */
    cursor: pointer; /* Zeiger-Cursor, wenn über den Button gehoben wird */
    box-sizing: border-box; /* Padding und Border werden in der Gesamtbreite des Buttons mitgerechnet */
}

.register-btn:hover {
    background-color: #f8f8f8;
    color: #4a4a4a !important;
}

/* Formular-Token für Sicherheit */
input[type="hidden"] {
    display: none; /* Versteckt das Hidden-Input für das Token */
}

.pflichtfeld-hinweis {
    color: #cc3333;       /* sanftes Rot */
    font-weight: bold;    
    margin-top: 20px;
    font-size: 0.95rem;   /* optional etwas kleiner */
}

/* Passwort Strength Meter */
#member-registration meter {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    appearance: none;
}

/* Button selbst */
.input-password-toggle {
    display: none !important;
}

/* Icon im Button */
.input-password-toggle .icon-eye {
    display: none !important;
}

/* Screenreader-Text */
.input-password-toggle .visually-hidden {
    display: none !important;
}

/* Falls Joomla einen zusätzlichen Wrapper benutzt */
.password-wrapper .input-password-toggle-wrapper {
    display: none !important;
}

#jform\[password1\]-rules {
    font-size: 11px; /* Textgröße Passwortanforderungen */
}

.registration-success-message {
    background-color: #222;
    border: 1px solid #4caf50;
    color: #fff;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
}

.registration-success-message h3 {
    color: #4caf50;
    margin-bottom: 10px;
}