/* Container für den Informationstext (rechte Spalte) */
.registration-info-container {
    background-color: transparent; /* Nutzt den Hintergrund von .registration-main-container */
    padding: 10px 20px; /* Weniger Padding als Formular */
    /* Flexible Breite, passt sich an */
    flex: 1 1 400px; /* Lässt Info wachsen/schrumpfen, Basisbreite 400px */
    max-width: 450px; /* Maximale Breite des Infoblocks */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    box-sizing: border-box;
}

.registration-info-container h2 {
    font-size: 22px; /* Angepasste Größe */
    color: #1e1738; /* Dunklere Akzentfarbe */
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: 600;
    line-height: 1.3;
}

.registration-info-container p {
    font-size: 15px;
    line-height: 1.7; /* Mehr Zeilenabstand */
    margin-bottom: 18px;
    text-align: left; /* Sicherstellen, dass Text linksbündig ist */
}

.registration-info-container ul {
    list-style-type: disc;
    padding-left: 25px; /* Mehr Einrückung */
    margin-bottom: 25px;
    text-align: left;
}

.registration-info-container ul li {
    margin-bottom: 10px; /* Mehr Abstand zwischen Listenelementen */
    font-size: 15px;
    line-height: 1.7;
}

/* Hauptcontainer für den Registrierungsbereich */
.registration-main-container {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch auf kleineren Bildschirmen */
    justify-content: center; /* Zentriert die Spalten horizontal */
    align-items: flex-start; /* Richtet Spalten oben aus */
    padding: 40px 20px; /* Innenabstand oben/unten und seitlich */
    gap: 50px; /* Abstand zwischen Formular- und Info-Spalte */
    flex-grow: 1; /* Nimmt verfügbaren Platz im Body ein */
    width: 100%;
    max-width: 1200px; /* Maximale Breite für den Inhalt */
    margin: 150px auto; /* Zentriert den Container selbst, wenn er eine max-width hat */
    box-sizing: border-box;
}

/* Container für das Registrierungsformular (linke Spalte) */
.registration-form-container {
    background-color: #F9FAFF; /* Weißer Hintergrund für das Formular */
    padding: 35px 45px; /* Mehr Innenabstand */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtiler Schatten */
    /* Flexible Breite, passt sich an, aber mit maximaler Größe */
    flex: 1 1 500px; /* Lässt das Formular wachsen/schrumpfen, Basisbreite 500px */
    max-width: 550px; /* Maximale Breite des Formulars */
    box-sizing: border-box;
}

/* Überschrift "Registrieren / Login" */
.registration-header {
    margin-bottom: 30px;
    text-align: left;
    font-size: 26px; /* Angepasste Größe */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600; /* Etwas dicker */
}

.registration-header .active-link-register {
    font-weight: 700; /* Noch dicker für aktiv */
    color: #333;
    padding-bottom: 6px; /* Mehr Abstand für die Linie */
    border-bottom: 3px solid #29214a; /* Akzentfarbe */
}

.registration-header .inactive-link {
    color: #b0b0b0; /* Helleres Grau für inaktiv */
    font-weight: 400; /* Dünner für inaktiv */
}

/* Styling für Formularzeilen */
.form-row {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch innerhalb der Zeile */
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 25px; /* Abstand zwischen Feldern in einer Zeile */
}

/* Styling für einzelne Formulargruppen (Label + Input) */
.form-group {
    display: flex;
    flex-direction: column;
    flex: 1; /* Nimmt verfügbaren Platz in der Reihe ein */
    min-width: 180px; /* Mindestbreite, bevor Umbruch in der Reihe passiert */
    max-width: 220px;
}

/* Styling für Labels */
.form-group label {
    margin-bottom: 8px;
    font-size: 14px;
    color: #444; /* Etwas dunkleres Grau */
    font-weight: 600; /* Leicht fett */
}

/* Styling für Input-Felder und Select */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select {
    padding: 9px 15px; /* Größeres Padding */
    border: 1px solid #d0d0d0; /* Etwas dunklerer Rand */
    border-radius: 6px; /* Etwas rundere Ecken */
    max-height: 40px;
    font-size: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Fokus-Effekt für Inputs und Select */
.form-group input:focus,
.form-group select:focus {
    border-color: #29214a;
    outline: none;
    box-shadow: 0 0 0 3px rgba(41, 33, 74, 0.15); /* Leichter Glow-Effekt */
}


/*THIS ONE WAS THE BEISPIEL DROPDOWN, I DELETED IT, THIS IS THE BACKUP*/
/* Styling der Optionen im Beispiel-Dropdown */
.role-dropdown-example .role-option {
    padding: 12px 15px;
    cursor: default; /* Nicht klickbar */
}

/* Das tatsächliche Select-Element */
select.rolle {
    appearance: none; /* Standard-Pfeil entfernen (optional, für benutzerdefinierten Pfeil) */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007bff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); /* Einfacher SVG-Pfeil */
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 10px auto;
    padding-right: 40px; /* Platz für den Pfeil */
    margin-bottom: 5px; /* Abstand zum Beispiel darunter */
}

/* Styling für die Zeile mit dem Submit-Button */
.form-row-submit {
    justify-content: flex-end; /* Button nach rechts schieben */
    margin-top: 15px; /* Etwas mehr Abstand nach oben */
}

.active-admin-link {
    font-weight: bold;
    color: #29214a; /*Akzentfarbe */
    border-left: 3px solid #29214a; /* Markierung links*/
    /* Wichtig: Padding muss angepasst werden, damit der Text nicht in den Border rutscht */
    padding-left: calc(1.5rem - 9px);
}

/* Suchfeld in der Admin-Filterleiste */
#admin-search-input {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 50px;
    width: 200px;
    margin-top: 30px;
}

#login-content {
    margin-top: 150px;
}