:root{
    --niu-red:#ed001e;
    --niu-dark:#111315;
    --niu-panel:#1a1d20;
    --niu-text:#f5f7f8;
    --niu-muted:#9da4aa;
    --niu-line:rgba(255,255,255,.10);
}
html,body.login{
    min-height:100%;
    background:
        radial-gradient(circle at 15% 20%, rgba(237,0,30,.14), transparent 28%),
        radial-gradient(circle at 85% 80%, rgba(237,0,30,.08), transparent 30%),
        #0e1012;
}
body.login{
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--niu-text);
}
body.login #login{
    width:420px;
    max-width:calc(100vw - 36px);
    padding:32px 0;
}
body.login h1{
    margin:0 0 22px;
}
body.login h1 a{
    width:100%;
    height:auto;
    min-height:108px;
    background:none!important;
    text-indent:0;
    overflow:visible;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#fff;
    font-size:0;
    text-decoration:none;
}
body.login h1 a:before{
    content:"niu";
    color:var(--niu-red);
    font-size:72px;
    line-height:.9;
    font-weight:800;
    letter-spacing:6px;
    text-transform:lowercase;
}
body.login h1 a:after{
    content:"FLAGSHIP STORE MENSE";
    color:#fff;
    font-size:15px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:2px;
}
body.login form{
    margin-top:0;
    padding:30px;
    border:1px solid var(--niu-line);
    border-radius:18px;
    background:rgba(26,29,32,.96);
    box-shadow:0 24px 70px rgba(0,0,0,.38);
}
body.login label{
    color:#e7eaed;
    font-size:14px;
    font-weight:650;
}
body.login .input,
body.login input[type="text"],
body.login input[type="password"]{
    min-height:52px;
    margin-top:8px;
    border:1px solid #3a3f44;
    border-radius:10px;
    background:#111315;
    color:#fff;
    box-shadow:none;
    font-size:17px;
    padding:0 14px;
}
body.login .input:focus,
body.login input[type="text"]:focus,
body.login input[type="password"]:focus{
    border-color:var(--niu-red);
    box-shadow:0 0 0 1px var(--niu-red);
}
body.login .wp-pwd button{
    color:#c6cbd0;
}
body.login .wp-pwd button:hover{
    color:#fff;
}
body.login .forgetmenot label{
    color:#c3c8cd;
    font-weight:500;
}
body.login input[type="checkbox"]{
    border-color:#4a5055;
    background:#111315;
}
body.login input[type="checkbox"]:checked::before{
    filter:brightness(0) saturate(100%) invert(15%) sepia(100%) saturate(5516%) hue-rotate(347deg) brightness(95%) contrast(114%);
}
body.login .button-primary{
    min-height:48px;
    padding:0 22px;
    border:0;
    border-radius:9px;
    background:var(--niu-red);
    color:#fff;
    font-weight:800;
    box-shadow:none;
    text-shadow:none;
}
body.login .button-primary:hover,
body.login .button-primary:focus{
    background:#cf001a;
    color:#fff;
    box-shadow:none;
}
body.login #nav,
body.login #backtoblog{
    margin:18px 4px 0;
    padding:0;
    text-align:center;
}
body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a{
    color:#aeb5bb;
    text-decoration:none;
}
body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover{
    color:#fff;
}
body.login .language-switcher{
    margin-top:22px;
}
body.login .language-switcher label{
    color:#aeb5bb;
}
body.login .language-switcher select{
    min-height:42px;
    border-radius:8px;
    border:1px solid #3a3f44;
    background:#171a1d;
    color:#fff;
}
body.login .language-switcher .button{
    min-height:42px;
    border-radius:8px;
    border-color:#555b60;
    background:#202428;
    color:#fff;
}
body.login .message,
body.login .notice,
body.login #login_error{
    border-left-color:var(--niu-red);
    border-radius:10px;
    background:#1b1f22;
    color:#fff;
    box-shadow:none;
}
@media(max-width:520px){
    body.login{align-items:flex-start}
    body.login #login{padding-top:34px}
    body.login h1 a:before{font-size:58px}
    body.login form{padding:24px}
}

/* NIU Original-Logo + reduzierte Loginseite */
body.login h1 a{
    width:260px!important;
    height:92px!important;
    min-height:92px!important;
    margin:0 auto!important;
    background-image:url("niu-logo.png")!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:contain!important;
    font-size:0!important;
}
body.login h1 a:before,
body.login h1 a:after{content:none!important;display:none!important}
body.login .language-switcher{display:none!important}

/* Link zurück zur Website auf der Loginseite ausblenden */
body.login #backtoblog{display:none!important}