/* -------------------------------------------------
 * Grund-Reset für unsere Spielereien
 * ------------------------------------------------- */

/* Body nicht verrücken, Horde-Regeln bleiben aktiv */
body.modal-form {
    /* optional eigener Hintergrund:
    background-color: #eceff1;
    */
}

/* Alle alten Versuche, ein Logo an .modal-form selbst zu hängen, neutralisieren */
.modal-form::before {
    content: none;
}

/* -------------------------------------------------
 * Loginbox-Optik (weißer Kasten)
 * ------------------------------------------------- */

/* Nur das DIV innerhalb des Body stylen, nicht den Body selbst */
body.modal-form > .modal-form {
    max-width: 430px;              /* etwas schmaler, wirkt edler */
    margin: 70px auto 60px auto;   /* oben/unten Abstand, mittig */
    border-radius: 18px;           /* weichere Ecken */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);  /* kräftiger, aber sauberer Schatten */
    overflow: hidden;              /* falls irgendwas minimal übersteht */
    background-color: #ffffff;     /* falls Horde hier was anderes setzt */
}

/* -------------------------------------------------
 * Logo IM weißen Kasten, über notices/Logout ODER direkt über dem Formular
 * ------------------------------------------------- */

body.modal-form > .modal-form::before {
    content: "";
    display: block;

    width: 350px;          /* an Logo anpassen */
    height: 120px;         /* an Logo anpassen */

    margin: 22px auto 12px auto;  /* oben / rechts / unten / links */

    background-image: url('emailmania_flat.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Etwas Abstand zwischen Logo und evtl. gelber Meldungsbox */
.notices {
    margin-top: 0;
}
.notices li {
    margin-top: 6px;
}

/* -------------------------------------------------
 * Feinheiten für Formular / Buttons
 * ------------------------------------------------- */

/* Labels leicht kräftiger, moderner Look */
.modal-form label {
    font-weight: 600;
}

/* Login-Button etwas breiter, angenehmer klickbar */
#login-button {
    min-width: 160px;
    padding: 6px 18px;
}

/* -------------------------------------------------
 * Responsive Anpassungen (Handy / kleine Displays)
 * ------------------------------------------------- */

@media (max-width: 600px) {
    body.modal-form > .modal-form {
        margin: 30px auto 30px auto;   /* weniger Rand auf kleinen Bildschirmen */
        max-width: 95%;
    }

    body.modal-form > .modal-form::before {
        width: 260px;   /* Logo auf kleineren Screens etwas schrumpfen */
        height: 90px;
        margin: 16px auto 10px auto;
    }
}