@font-face{
    font-family:'SS3';
    src:
    url(
        '/fonts/SourceSans3-Regular.ttf'
    )
    format('truetype');
}

body{
    margin:0;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding-top:120px;
    font-family:
    "SS3",
    sans-serif;
    box-sizing:border-box;

		background-color: #2e3141;
		background-image:
		linear-gradient(to top,
		rgba(46,49,65,.8),
		rgba(46,49,65,.8)),
		url('/images/background2.png');


    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

.login-card{
    width:380px;
    padding:40px;
    background:
    rgba(26,29,35,.25);
    backdrop-filter:
    blur(14px);
    border:
    1px solid
    rgba(255,255,255,.08);
    border-radius:10px;
    text-align:center;
    box-shadow:
    0 15px 40px
    rgba(
        0,
        0,
        0,
        .35
    );
    transform:none;}

.logo{
    display:block;
    max-height:130px;
    margin:0 auto 25px auto;
    transform:translateX(20px);
}

.logo-link{
    display:flex;
    justify-content:center;
    margin-bottom:25px;
}

.logo{
    display:block;
    max-height:130px;
    margin:0 auto 25px auto;
    transition:
        filter .25s ease,
        opacity .25s ease;
}

.logo:hover{
    filter:
        drop-shadow(
            0 0 12px rgba(56,189,248,.45)
        )
        drop-shadow(
            0 0 24px rgba(56,189,248,.25)
        );
}

h1{
    font-family:
    'SS3',
    sans-serif;
    font-weight:600;
    margin:0;
    font-size:28px;
    color:white;
    font-weight:400;
}

h1 i{
    color:#38bdf8;
    margin-right:10px;
    filter:
    drop-shadow(
        0 0 6px
        rgba(
            56,
            189,
            248,
            .5
        )
    );
}

.subtitle{
    margin-top:10px;
    margin-bottom:30px;
    color:
    rgba(
        255,
        255,
        255,
        .65
    );
}

.input-group{
    width:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    gap:12px;
    height:50px;
    padding:0 16px;
    margin-bottom:15px;
    background:
    rgba(
        255,
        255,
        255,
        .04
    );
    border:
    1px solid
    #303540;
    border-radius:10px;
}

.input-group i{
    color:#a0a7b4;

}

.input-group input{
    width:100%;
    background:transparent;
    border:none;
    outline:none;
    color:white;
    font-size:15px;
    font-family:
    "Source Sans 3",
    sans-serif;

}

.input-group input:focus{
    background:
    transparent;
    color:
    white;
}

.input-group input::placeholder{
    color:
    rgba(
        255,
        255,
        255,
        .4
    );
}

.input-group:focus-within{
    border:
    1px solid
    rgba(
        56,
        189,
        248,
        .5
    );
    box-shadow:
    0 0 12px
    rgba(
        56,
        189,
        248,
        .18
    );
}

button{
    width:100%;
    height:50px;
    margin-top:10px;
    background:
    #1a1d23;
    border:
    1px solid
    #303540;
    border-radius:10px;
    color:white;
    font-size:14px;
    font-family:
    "Source Sans 3",
    sans-serif;
    cursor:pointer;
    transition:.2s;
}

button:hover{
    background:
    #252a33;
    border-color:
    #4a5160;
}

.error{
    margin-bottom:20px;
    color:#ef4444;
    font-size:14px;
}

.footer{
    margin-top:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    color:
    rgba(
        255,
        255,
        255,
        .45
    );
    font-size:12px;
}

.footer-code{
    color:#38bdf8;
    filter:
        drop-shadow(
            0 0 6px rgba(56,189,248,.6)
        );
}

.footer-heart{
    color:#ef4444;
    filter:
        drop-shadow(
            0 0 4px rgba(239,68,68,.5)
        );
}

.remember-me{
    display:flex;
    align-items:center;
    gap:12px;
    margin:18px 0;
    color:
    rgba(
        255,
        255,
        255,
        .7
    );
    font-size:14px;
    cursor:pointer;
}

.remember-me input{
    display:none;
}

.checkmark{
    width:18px;
    height:18px;
    border:
    1px solid
    #303540;
    border-radius:6px;
    background:
    rgba(
        255,
        255,
        255,
        .04
    );
    position:relative;
    transition:.2s;
    flex-shrink:0;
}

.remember-me:hover .checkmark{
    border-color:
    #4a5160;
    background:
    rgba(
        255,
        255,
        255,
        .07
    );
}

.remember-me input:checked
+
.checkmark{
    background:
    #38bdf8;
    border-color:
    #38bdf8;
}

.remember-me input:checked
+
.checkmark::after{
    content:'✓';
    position:absolute;
    left:50%;
    top:50%;
    transform:
    translate(
        -50%,
        -58%
    );
    color:white;
    font-size:13px;
    font-weight:bold;
}

/* Chrome / Edge Autofill entfernen */

.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:hover,
.input-group input:-webkit-autofill:focus,
.input-group input:-webkit-autofill:active{

    -webkit-text-fill-color:
    white !important;

    -webkit-box-shadow:
    0 0 0 30px
    rgba(
        255,
        255,
        255,
        .00
    )
    inset !important;
    -webkit-text-fill-color:
    white !important;
    caret-color:
    white;
    transition:
    background-color
    9999s
    ease-in-out
    0s;
}

.input-group input,
.input-group input:focus,
.input-group input:active{
    color:white !important;
    -webkit-text-fill-color:
    white !important;
    background:
    transparent !important;
    caret-color:
    white;
}

.password-toggle{
    color:#a0a7b4;
    cursor:pointer;
    transition:.2s;
    opacity:.65;
}

.password-toggle:hover{
    color:#38bdf8;
    opacity:1;
}