/* =========================================================
   MORAMANGA – AUTHELIA LOGIN
   Hintergrundbild:
   /branding/background.webp
   ========================================================= */


/* =========================================================
   1. GRUNDLAYOUT
   ========================================================= */

html,
body,
#root {
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: transparent !important;
}

body {
    position: relative;
    isolation: isolate;
    overflow-x: hidden;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


/* =========================================================
   2. DASHBOARD-HINTERGRUND
   ========================================================= */

body::before {
    content: "";

    position: fixed;
    inset: -16px;
    z-index: -2;

    background-image: url("/branding/background.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    filter: blur(4px);
    transform: scale(1.035);

    pointer-events: none;
}


/* Dunkles Overlay über dem Hintergrund */

body::after {
    content: "";

    position: fixed;
    inset: 0;
    z-index: -1;

    background:
        radial-gradient(
            circle at center,
            rgba(4, 10, 18, 0.18) 0%,
            rgba(4, 10, 18, 0.43) 56%,
            rgba(3, 8, 15, 0.72) 100%
        );

    pointer-events: none;
}


/* =========================================================
   3. AUTHELIA-FLÄCHEN TRANSPARENT
   ========================================================= */

#root,
#root > div,
main,
header,
.MuiBox-root,
.MuiGrid-root {
    background-color: transparent !important;
}


/* =========================================================
   4. KOPFZEILE UND SPRACHAUSWAHL
   ========================================================= */

header {
    box-shadow: none !important;
    border: 0 !important;
}

header button {
    color: rgba(255, 255, 255, 0.94) !important;

    background: rgba(7, 13, 22, 0.44) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 8px !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* =========================================================
   5. LOGINBEREICH ZENTRIEREN
   ========================================================= */

#first-factor-stage {
    box-sizing: border-box;

    min-height: calc(100vh - 64px);

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 32px 20px !important;

    background: transparent !important;
}


/* =========================================================
   6. GLASS-CARD
   ========================================================= */

#first-factor-stage > .MuiContainer-root {
    box-sizing: border-box;

    width: min(460px, calc(100vw - 32px)) !important;
    max-width: 460px !important;

    margin: 0 auto !important;
    padding: 34px 32px 30px !important;

    background:
        linear-gradient(
            145deg,
            rgba(15, 24, 38, 0.88),
            rgba(7, 14, 25, 0.80)
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}


/* =========================================================
   7. MORAMANGA-BRANDING
   ========================================================= */

#first-factor-stage > .MuiContainer-root::before {
    content: "MORAMANGA";

    display: block;

    margin: 0;
    padding: 0;

    color: #ffffff;

    text-align: center;

    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.045em;

    text-shadow:
        0 2px 18px rgba(0, 0, 0, 0.68),
        0 0 32px rgba(39, 135, 232, 0.18);
}


/* Dezenter Untertitel für den geschützten Bereich */

#first-factor-stage > .MuiContainer-root::after {
    content: "INVESTORENBEREICH";

    display: block;

    margin: 7px 0 24px;
    padding: 0;

    color: rgba(255, 255, 255, 0.66);

    text-align: center;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.18em;

    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.48);
}


/* =========================================================
   8. INNERES AUTHELIA-GRID
   ========================================================= */

#first-factor-stage .MuiGrid-root {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}

#first-factor-stage .MuiContainer-root {
    box-sizing: border-box;
}


/* =========================================================
   9. FORMULAR
   ========================================================= */

#first-factor-stage form {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   10. ÜBERSCHRIFT
   ========================================================= */

#first-factor-stage h1,
#first-factor-stage h2,
#first-factor-stage h3 {
    margin-top: 0 !important;
    margin-bottom: 22px !important;

    color: #ffffff !important;

    text-align: center;

    font-weight: 650 !important;
    letter-spacing: -0.025em;

    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.58);
}


/* =========================================================
   11. LABELS
   ========================================================= */

#first-factor-stage label {
    color: rgba(255, 255, 255, 0.84) !important;
}


/* =========================================================
   12. EINGABEFELDER
   ========================================================= */

#first-factor-stage input {
    box-sizing: border-box;
    color: #ffffff !important;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

#first-factor-stage fieldset {
    border-color: rgba(255, 255, 255, 0.22) !important;
}

#first-factor-stage .MuiOutlinedInput-root {
    background: rgba(7, 15, 25, 0.68) !important;
    border-radius: 8px !important;

    transition:
        background-color 160ms ease,
        box-shadow 160ms ease;
}

#first-factor-stage .MuiOutlinedInput-root:hover {
    background: rgba(10, 21, 34, 0.80) !important;
}

#first-factor-stage .MuiOutlinedInput-root:hover fieldset {
    border-color: rgba(88, 164, 245, 0.72) !important;
}

#first-factor-stage .MuiOutlinedInput-root.Mui-focused {
    background: rgba(10, 25, 40, 0.90) !important;

    box-shadow:
        0 0 0 3px rgba(36, 132, 230, 0.18);
}

#first-factor-stage .MuiOutlinedInput-root.Mui-focused fieldset {
    border-color: #3f97ed !important;
}


/* Passwortauge sichtbar halten */

#first-factor-stage button[aria-label*="password"],
#first-factor-stage button[aria-label*="Passwort"] {
    color: rgba(255, 255, 255, 0.88) !important;
}


/* Chrome-Autofill korrigieren */

#first-factor-stage input:-webkit-autofill,
#first-factor-stage input:-webkit-autofill:hover,
#first-factor-stage input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;

    box-shadow:
        0 0 0 1000px rgba(18, 53, 82, 0.98) inset !important;

    transition:
        background-color 9999s ease-in-out 0s;
}


/* =========================================================
   13. CHECKBOX
   ========================================================= */

#first-factor-stage input[type="checkbox"] {
    accent-color: #2787e8;
}

#first-factor-stage .MuiCheckbox-root {
    color: rgba(255, 255, 255, 0.76) !important;
}

#first-factor-stage .MuiCheckbox-root.Mui-checked {
    color: #2787e8 !important;
}


/* =========================================================
   14. ANMELDEBUTTON
   ========================================================= */

#first-factor-stage button[type="submit"] {
    min-height: 48px;

    margin-top: 8px;

    border: 0 !important;
    border-radius: 9px !important;

    color: #ffffff !important;

    font-size: 15px;
    font-weight: 750;
    letter-spacing: 0.035em;

    background:
        linear-gradient(
            135deg,
            #2787e8 0%,
            #176cca 100%
        ) !important;

    box-shadow:
        0 12px 28px rgba(15, 102, 205, 0.34);

    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        filter 150ms ease;
}

#first-factor-stage button[type="submit"]:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);

    box-shadow:
        0 16px 36px rgba(15, 102, 205, 0.44);
}

#first-factor-stage button[type="submit"]:active {
    transform: translateY(0);

    box-shadow:
        0 8px 20px rgba(15, 102, 205, 0.30);
}


/* =========================================================
   15. LINKS
   ========================================================= */

#first-factor-stage a {
    color: #449df4 !important;

    text-underline-offset: 3px;

    transition:
        color 150ms ease,
        opacity 150ms ease;
}

#first-factor-stage a:hover {
    color: #79bafa !important;
    opacity: 0.95;
}


/* =========================================================
   16. „BETRIEBEN MIT AUTHELIA“ AUSBLENDEN
   ========================================================= */

/*
   Der Hinweis befindet sich in deiner Version offenbar in
   einem Textabsatz am unteren Ende des Containers.
*/

#first-factor-stage .MuiTypography-caption,
#first-factor-stage small,
#first-factor-stage footer {
    display: none !important;
}


/*
   Zusätzliche Absicherung für den letzten kleinen Textblock.
   Der Link „Passwort zurücksetzen?“ bleibt erhalten.
*/

#first-factor-stage
.MuiContainer-root
.MuiTypography-body2:last-child {
    display: none !important;
}


/* =========================================================
   17. FORMULARBREITEN
   ========================================================= */

#first-factor-stage form > * {
    box-sizing: border-box;
}

#first-factor-stage .MuiFormControl-root {
    width: 100% !important;
}


/* =========================================================
   18. TABLET UND MOBIL
   ========================================================= */

@media (max-width: 700px) {

    body::before {
        inset: -12px;

        background-position: 29% center;

        filter: blur(5px);
        transform: scale(1.06);
    }

    body::after {
        background: rgba(3, 8, 15, 0.67);
    }

    #first-factor-stage {
        min-height: calc(100vh - 56px);
        padding: 18px 12px !important;
    }

    #first-factor-stage > .MuiContainer-root {
        width: calc(100vw - 24px) !important;
        max-width: 420px !important;

        padding: 28px 20px 25px !important;

        border-radius: 17px;
    }

    #first-factor-stage > .MuiContainer-root::before {
        font-size: 28px;
    }

    #first-factor-stage > .MuiContainer-root::after {
        margin: 6px 0 20px;
        font-size: 12px;
        letter-spacing: 0.15em;
    }

    #first-factor-stage button[type="submit"] {
        min-height: 48px;
    }
}


/* =========================================================
   19. SEHR KLEINE DISPLAYS
   ========================================================= */

@media (max-width: 420px) {

    body::before {
        background-position: 24% center;
    }

    #first-factor-stage {
        padding: 10px !important;
    }

    #first-factor-stage > .MuiContainer-root {
        width: calc(100vw - 20px) !important;

        padding: 24px 16px 22px !important;
    }

    #first-factor-stage > .MuiContainer-root::before {
        font-size: 24px;
        letter-spacing: 0.025em;
    }

    #first-factor-stage > .MuiContainer-root::after {
        margin: 5px 0 18px;
        font-size: 11px;
        letter-spacing: 0.12em;
    }
}


/* =========================================================
   20. REDUZIERTE ANIMATIONEN
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #first-factor-stage input,
    #first-factor-stage button,
    #first-factor-stage a,
    #first-factor-stage .MuiOutlinedInput-root {
        transition: none !important;
    }
}