/* Formatierung des felogin-Anmeldeformulars.
 *
 * Bewusst KEIN eigenes Fluid-Template für felogin: das Formular enthält
 * __RequestToken, __trustedProperties, __referrer[...] und logintype. Wer das
 * nachbaut, bricht früher oder später die Anmeldung. Deshalb nur CSS auf das
 * Markup, das felogin ohnehin ausliefert.
 *
 * Der Selektor hängt an der action-URL, weil felogin weder am <form> noch an
 * den Labels/Feldern eine Klasse setzt. tx_felogin_login steht dort immer —
 * unabhängig von Seite, Sprache und cHash.
 */

form[action*="tx_felogin_login"] {
    max-width: 34rem;
}

form[action*="tx_felogin_login"] fieldset {
    margin: 0;
    /* unten weniger: die letzte sichtbare Zeile bringt noch 1rem margin-bottom mit */
    padding: 1.5rem 1.5rem .5rem;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fafafa;
}

form[action*="tx_felogin_login"] legend {
    padding: 0 .5rem;
    border: 0;
    width: auto;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 1rem;
}

/* Jede Zeile ist Label + Feld. flex statt grid, damit die Submit-Zeile
   (die kein Label hat) nicht in die Label-Spalte rutscht. */
form[action*="tx_felogin_login"] fieldset > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1rem;
    margin-bottom: 1rem;
}

form[action*="tx_felogin_login"] fieldset > div:last-of-type {
    margin-bottom: 0;
}

/* Das ist der Punkt der Übung: beide Labels exakt gleich breit. */
form[action*="tx_felogin_login"] fieldset label {
    flex: 0 0 10rem;
    margin: 0;
    font-weight: 600;
}

form[action*="tx_felogin_login"] fieldset input[type="text"],
form[action*="tx_felogin_login"] fieldset input[type="password"] {
    flex: 1 1 12rem;
    min-width: 0;
    padding: .55rem .65rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    font: inherit;
}

form[action*="tx_felogin_login"] fieldset input[type="text"]:focus,
form[action*="tx_felogin_login"] fieldset input[type="password"]:focus {
    border-color: #c00;
    outline: 2px solid rgba(204, 0, 0, .25);
    outline-offset: 1px;
}

/* Der Button hängt am Feld, nicht am linken Rand — die Label-Spalte wird
   nachgebildet, weil diese Zeile kein Label besitzt. */
form[action*="tx_felogin_login"] fieldset input[type="submit"] {
    margin-left: 11rem;
    padding: .6rem 1.4rem;
    border: 0;
    border-radius: 3px;
    background: #c00;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

form[action*="tx_felogin_login"] fieldset input[type="submit"]:hover {
    background: #a00;
}

/* Enthält nur versteckte Felder, erzeugt aber sonst eine leere Zeile. */
form[action*="tx_felogin_login"] .felogin-hidden {
    display: none;
}

/* Schmale Displays: Label über das Feld, Button linksbündig. */
@media (max-width: 30rem) {
    form[action*="tx_felogin_login"] fieldset label {
        flex: 0 0 100%;
    }

    form[action*="tx_felogin_login"] fieldset input[type="submit"] {
        margin-left: 0;
        width: 100%;
    }
}