/* Für die vertikale Anordnung von Label und Container */
.form-group {
    display: flex;
    flex-direction: column; /* Ordnet Kinder vertikal an */
    margin-bottom: 1rem;
}

.form-group label {
    margin-bottom: 0.5rem;
    width: 100%; /* Oder so, dass es das Label über dem Input positioniert */
}

/* Neuer Container für Input und Icon */
.password-input-container {
    position: relative; /* Basis für absolute Positionierung des Icons */
    width: 100%; /* Stellt sicher, dass der Container die volle Breite einnimmt */
    display: flex; /* Optional: Um sicherzustellen, dass der Input die volle Breite des Containers ausfüllt */
    align-items: center; /* Zentriert das Icon vertikal, falls es nicht perfekt passt */
}

.password-input-container input {
    width: 100%; /* Input füllt den verfügbaren Platz aus */
    padding-right: 40px; /* Platz für das Icon lassen, damit Text nicht überlappt */
    /* Behalten Sie Ihre anderen Input-Stile bei (padding, border, etc.) */
}

.password-toggle-icon {
    position: absolute; /* Absolut innerhalb des password-input-container positionieren */
    right: 10px; /* Abstand vom rechten Rand des Inputs */
    cursor: pointer;
    color: #6c757d; /* Eine dezente Farbe */
    font-size: 1.2em; /* Größe des Icons anpassen */
    line-height: 1; /* Wichtig, damit das Icon sauber vertikal zentriert wird */
    display: flex; /* Für bessere vertikale Zentrierung des Icons selbst */
    align-items: center;
    justify-content: center;
    height: 100%; /* Macht das Icon anklickbarer in der Höhe des Inputs */
    top: 0;
}

.password-toggle-icon:hover {
    color: #007bff; /* Hover-Effekt */
}