.auth-page{min-height:100vh;background:
 radial-gradient(circle at 20% 10%,rgba(8,120,255,.12),transparent 28%),
 radial-gradient(circle at 85% 84%,rgba(239,146,53,.10),transparent 24%),
 linear-gradient(180deg,#f8fbff 0%,#f2f5fa 100%);display:grid;place-items:center;padding:28px}
.auth-shell{width:min(100%,470px);display:flex;flex-direction:column;align-items:center;gap:20px}
.auth-card{width:100%;background:rgba(255,255,255,.97);border:1px solid rgba(7,24,47,.08);border-radius:24px;padding:34px;box-shadow:var(--shadow)}
.auth-card-wide{width:min(100vw - 36px,580px)}
.auth-logo{display:block;width:min(300px,78%);height:auto;margin:-22px auto -16px}
.auth-logo-small{width:min(240px,68%);margin:-20px auto -8px}
.auth-card h1{text-align:center;color:var(--navy);font-size:28px;margin:4px 0 24px}
.auth-lead{text-align:center;color:var(--muted);margin:-12px auto 22px;line-height:1.5}
.password-wrap{display:flex;position:relative}
.password-wrap input{padding-right:50px}
.password-wrap .password-toggle{position:absolute;right:5px;top:5px}
.auth-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.form-message{min-height:20px;margin:2px 0 10px;font-size:13px;font-weight:700;color:var(--danger)}
.form-message.success{color:var(--success)}
.email-builder{display:flex;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;align-items:center}
.email-builder:focus-within{border-color:var(--blue);box-shadow:var(--focus)}
.email-builder input{border:0!important;box-shadow:none!important;border-radius:0!important;min-width:0}
.email-builder strong{white-space:nowrap;padding:0 13px;color:var(--navy);font-size:14px}
.back-link{display:inline-block;font-weight:750;font-size:13px;color:var(--muted)}
.auth-shell footer{font-size:12px;color:var(--muted)}
@media(max-width:520px){.auth-page{padding:18px}.auth-card{padding:24px 20px}.auth-actions{grid-template-columns:1fr}.auth-logo{width:78%}}


/* Moosemail Auth – konsolidiertes finales Layout */

.auth-card {
    padding: 26px 34px 24px !important;
    overflow: visible !important;
}

.auth-card .auth-logo {
    display: block !important;
    width: min(320px, 76%) !important;
    max-width: 320px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 auto 22px !important;
}

.auth-card form {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
}

.auth-card form#login-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 0 !important;
}

.auth-card form#login-form label.field {
    margin: 0 !important;
}

.auth-card form#login-form label.field > span {
    display: none !important;
}

.auth-card form#login-form .password-wrap {
    margin: 0 !important;
}

.auth-card .btn-primary {
    margin-top: 10px !important;
}

.auth-card .auth-actions {
    margin-top: 10px !important;
    gap: 10px !important;
}

.auth-shell footer {
    margin-top: 0 !important;
}

@media (max-width: 520px) {
    .auth-card {
        padding: 22px 20px !important;
    }

    .auth-card .auth-logo {
        width: min(270px, 74%) !important;
        max-width: 270px !important;
        margin-bottom: 18px !important;
    }
}

/* Moosemail Login – Logo strikt vom Formular trennen */
.auth-card .auth-logo-wrap {
    width: 100% !important;
    height: 285px !important;
    min-height: 285px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin: 0 0 22px 0 !important;
    padding: 0 !important;
}

.auth-card .auth-logo-wrap .auth-logo {
    display: block !important;
    width: auto !important;
    height: 265px !important;
    max-width: 92% !important;
    max-height: 265px !important;
    object-fit: contain !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
}

.auth-card #login-form {
    margin: 0 !important;
    position: static !important;
    transform: none !important;
}

@media (max-width: 520px) {
    .auth-card .auth-logo-wrap {
        height: 230px !important;
        min-height: 230px !important;
        margin-bottom: 18px !important;
    }

    .auth-card .auth-logo-wrap .auth-logo {
        height: 215px !important;
        max-height: 215px !important;
    }
}