/* =============================================
   LOGIN.CSS - Formular-spezifische Mobile Styles
   Container (#kopfzeile, #content) managed mobile.css!
   Hier nur noch Login-Formular-Styles
   ============================================= */

@media (max-width: 768px) {

    /* =============================================
       LOGIN-FORMULAR
       ============================================= */

    /* Table-Layout für Mobile umbauen */
    #content div.listblock table.standardformular,
    div.listblock table.standardformular {
        display: block;
        width: 100%;
    }

    #content div.listblock table.standardformular tbody,
    div.listblock table.standardformular tbody {
        display: block;
    }

    #content div.listblock table.standardformular tr,
    div.listblock table.standardformular tr {
        display: block;
        margin-bottom: 8px;
    }

    /* ALLE td Elemente: Padding zurücksetzen */
    #content div.listblock table.standardformular td,
    div.listblock table.standardformular td {
        padding: 0;
    }

    /* Label oben, volle Breite */
    #content div.listblock table.standardformular td.desc,
    div.listblock table.standardformular td.desc {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 0 16px;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 4px;
        height: 40px;
        line-height: 40px;
    }

    /* Input-Zelle volle Breite */
    #content div.listblock table.standardformular td:not(.desc):not(.submit),
    div.listblock table.standardformular td:not(.desc):not(.submit) {
        display: block;
        width: 100%;
        padding: 0;
        margin-bottom: 24px;
        box-sizing: border-box;
        height: 48px;
    }

    /* Input-Felder: 100% Breite - ÜBERSCHREIBT 584px aus styles.css */
    #content div.listblock table.standardformular input[type=text],
    #content div.listblock table.standardformular input[type=email],
    #content div.listblock table.standardformular input[type=password],
    #content div.listblock.noview table.standardformular input[type=text],
    #content div.listblock.noview table.standardformular input[type=email],
    #content div.listblock.noview table.standardformular input[type=password],
    div.listblock table.standardformular input:not([type=checkbox]):not([type=radio]):not([type=image]):not([type=submit]),
    div.listblock.noview table.standardformular input:not([type=checkbox]):not([type=radio]):not([type=image]):not([type=submit]) {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        box-sizing: border-box;
        padding: 12px 16px;
        font-size: 16px;
        min-height: 48px;
        margin: 0;
        display: block;
    }

    /* Submit-Zelle volle Breite */
    #content div.listblock table.standardformular td.submit,
    div.listblock table.standardformular td.submit {
        display: block;
        width: 100%;
        padding: 0;
        margin-top: 8px;
    }

    /* Button volle Breite */
    #content div.listblock input.button,
    #content div.listblock input[type=submit].button,
    #content div.listblock.noview input.button,
    #content div.listblock.noview input[type=submit].button,
    div.listblock input.button,
    div.listblock.noview input.button {
        width: 100%;
        box-sizing: border-box;
        min-height: 48px;
        padding: 14px 20px;
        font-size: 16px;
        display: block;
        margin: 0;
    }

    /* Passwort vergessen Link */
    div.listblock.noview p {
        width: 100%;
    }

    #content div.listblock a.backlink,
    div.listblock a.backlink {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        min-height: 48px;
        text-align: center;
        background: #f1f1ef;
        background-image: none;
        border-radius: 6px;
        margin-top: 12px;
        font-size: 14px;
        line-height: 48px;
    }

    /* Focus States - Dezent in Grau */
    input[type=text]:focus,
    input[type=email]:focus,
    input[type=password]:focus {
        outline: 1px solid #9d9d95;
        outline-offset: 1px;
        background-color: #fff;
    }

    /* =============================================
       Autofill-Styling überschreiben
       Chrome/Safari zeigen blaugrauen Hintergrund
       ============================================= */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1000px #e5e7e3 inset !important;
        -webkit-text-fill-color: #000 !important;
        font-family: 'Fira Sans', sans-serif !important;
        font-size: 15px !important;
        font-weight: 300 !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    /* Für Firefox */
    input:-moz-autofill,
    input:-moz-autofill:hover,
    input:-moz-autofill:focus {
        box-shadow: 0 0 0 1000px #e5e7e3 inset !important;
        color: #000 !important;
        font-family: 'Fira Sans', sans-serif !important;
        font-size: 15px !important;
        font-weight: 300 !important;
    }
}

/* =============================================
   DESKTOP (ab 769px) - Autofill-Farbe anpassen
   ============================================= */

@media screen and (min-width: 769px) {
    /* Autofill auf Desktop: Weißer Hintergrund */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
        font-family: 'Fira Sans', sans-serif !important;
        font-size: 15px !important;
        font-weight: 300 !important;
    }

    input:-moz-autofill,
    input:-moz-autofill:hover,
    input:-moz-autofill:focus {
        box-shadow: 0 0 0 1000px #fff inset !important;
        font-family: 'Fira Sans', sans-serif !important;
        font-size: 15px !important;
        font-weight: 300 !important;
    }
}