body{
    font-family: Arial, Helvetica, sans-serif;
    background:#f4f6f9;
    margin:0;
    padding:0;
}

/* Login Box */

.login-container{
    width:380px;
    max-width:92%;
    margin:120px auto;
    padding:30px;

    background:white;
    border-radius:10px;
    box-shadow:0 8px 25px rgba(0,0,0,0.1);

    animation:fadeIn 0.6s ease;
}

/* Titel */

.login-container h2{
    text-align:center;
    margin-bottom:25px;
}

/* Inputs */

.form-control{
    width:100%;
    padding:10px;
    border:1px solid #ccc;
    border-radius:6px;
    font-size:14px;
}

.form-control:focus{
    border-color:#3b82f6;
    outline:none;
}

/* Button */

.btn-primary{
    background:#3b82f6;
    border:none;
    padding:12px;
    color:white;
    font-size:15px;
    border-radius:6px;
    cursor:pointer;
    transition:all 0.2s;
}

.btn-primary:hover{
    background:#2563eb;
    transform:translateY(-1px);
}

/* Fehlermeldung */

.alert{
    padding:10px;
    border-radius:6px;
    margin-bottom:15px;
    font-size:14px;
}

.alert-danger{
    background:#ffe5e5;
    color:#c40000;

    animation:shake 0.35s ease;
}

/* Passwort-Auge */

.password-wrapper{
    position:relative;
}

.password-wrapper input{
    padding-right:40px;
}

.toggle-password{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    font-size:16px;
}

/* Animationen */

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes shake{
    0%{transform:translateX(0)}
    25%{transform:translateX(-4px)}
    50%{transform:translateX(4px)}
    75%{transform:translateX(-4px)}
    100%{transform:translateX(0)}
}