#loginPage{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
}

.loginBox{
    width:500px;
    background:white;
    padding:40px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.loginBox h1{
    margin-bottom:10px;
}

.loginBox p{
    margin-bottom:20px;
    color:#666;
}

input{
    width:100%;
    padding:14px;
    margin-bottom:15px;
    border:1px solid #ddd;
    border-radius:10px;
}


button{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:100%;
    padding:15px 22px;

    border:none;
    border-radius:14px;

    background:linear-gradient(135deg,#243447,#1C2939);

    color:#fff;

    font-size:15px;
    font-weight:600;

    cursor:pointer;

    transition:.25s;

    box-shadow:
            0 6px 16px rgba(28,41,57,.08),
            0 12px 30px rgba(28,41,57,.10);
}

button:hover{

    background:linear-gradient(135deg,#2F435B,#243447);

    transform:translateY(-3px);

    box-shadow:
            0 6px 16px rgba(28,41,57,.08),
            0 14px 30px rgba(28,41,57,.10);
}

button:active{
    transform:translateY(0);
}

#error{
    color:red;
    margin-top:10px;
}

header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:30px;
}

header h1{

    font-family:'Poppins',sans-serif;

    font-size:34px;

    font-weight:700;

    letter-spacing:-0.8px;

    color:#1c2939;

    line-height:1.2;

    position:relative;
}

header h1::after{

    content:"";

    display:block;

    width:70px;

    height:4px;

    margin-top:10px;

    border-radius:10px;

    background:linear-gradient(90deg,#bda275,#d6bf94);
}

/* ==========================
   Select Felder
========================== */

select{

    width:100%;
    height:50px;

    padding:0 45px 0 16px;

    font-size:15px;
    font-weight:500;

    color:#1c2939;

    background:#fff;

    border:1px solid #d9e2ec;

    border-radius:12px;

    outline:none;

    cursor:pointer;

    transition:all .25s ease;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 15px center;

    background-size:18px;

    margin-bottom: 5px;
}

/* Hover */

select:hover{

    border-color:#bda275;

    box-shadow:0 4px 14px rgba(189,162,117,.15);
}

/* Fokus */

select:focus{

    border-color:#bda275;

    box-shadow:
            0 0 0 4px rgba(189,162,117,.18),
            0 8px 20px rgba(189,162,117,.12);
}

/* Optionen */

select option{

    background:#fff;

    color:#1c2939;

    font-size:15px;
}