/*
========================================================
Auth Seiten
Registrierung / Login / Passwort Reset
========================================================
*/


/*
========================================================
Grundlayout
========================================================
*/

.auth-body{
    background:#050816;
}

.auth-section{
    position:relative;

    min-height:100vh;

    display:flex;
    align-items:center;

    padding:140px 0 100px;

    overflow:hidden;

    background:
        radial-gradient(circle at 78% 35%, rgba(124,77,255,.32), transparent 28%),
        radial-gradient(circle at 15% 90%, rgba(0,102,255,.15), transparent 28%),
        linear-gradient(90deg,#020617 0%, #020817 40%, #120b33 100%);
}

.auth-section::before{
    content:"";

    position:absolute;
    inset:0;

    background:url("../images/grid.png");
    background-size:cover;

    opacity:.04;

    pointer-events:none;
}


/*
========================================================
Navbar Kontaktinfos
========================================================
*/

.auth-contact-info{
    padding:25px 0 !important;

    display:inline-block;

    font-size:12px;
    text-transform:none;
}


/*
========================================================
Linke Seite
========================================================
*/

.auth-info-wrapper{
    position:relative;
    z-index:2;

    padding-right:60px;
}

.auth-subtitle{
    display:block;

    margin-bottom:25px;

    color:#8b5cf6;

    font-size:16px;
    font-weight:700;

    letter-spacing:3px;
    text-transform:uppercase;
}

.auth-title{
    color:#fff;

    font-size:68px;
    line-height:1.08;
    font-weight:700;

    margin-bottom:35px;
}

.auth-title span{
    color:#8b5cf6;
}

.auth-description{
    color:#cfd4e3;

    font-size:22px;
    line-height:1.9;

    margin-bottom:45px;
}

.auth-feature-list{
    list-style:none;

    padding:0;
    margin:0;
}

.auth-feature-list li{
    color:#d9dceb;

    font-size:18px;

    margin-bottom:18px;
}

.auth-feature-list li i{
    color:#8b5cf6;

    margin-right:12px;
}


/*
========================================================
Auth Card
========================================================
*/
.auth-card{
    position:relative;
    z-index:2;

    padding:50px;

    border-radius:26px;

    background:
        linear-gradient(
            135deg,
            rgba(13,18,40,.92),
            rgba(9,13,32,.88)
        );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    box-shadow:
        0 0 60px rgba(124,77,255,.12);
}

.auth-card-top{
    margin-bottom:40px;
}

.auth-card-top h2{
    color:#fff;

    font-size:40px;

    margin-bottom:14px;
}

.auth-card-top p{
    color:#bcc3d7;

    line-height:1.8;

    margin:0;
}


/*
========================================================
Formular
========================================================
*/
.auth-form-group{
    margin-bottom:24px;
}

.auth-form-group label{
    display:block;

    margin-bottom:10px;

    color:#e7e9f2;

    font-size:14px;
    font-weight:600;
}

.auth-input{
    height:58px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.03);

    color:#fff;

    padding:0 18px;

    font-size:14px;

    transition:all .25s ease;
}

.auth-input:focus{
    border-color:rgba(139,92,246,.45);

    box-shadow:
        0 0 0 4px rgba(139,92,246,.08);

    background:rgba(255,255,255,.05);
}

.auth-input::placeholder{
    color:#8087a0;
}


/*
========================================================
Checkbox
========================================================
*/
.auth-checkbox-wrapper{
    margin:20px 0 30px;
}

.auth-checkbox-label{
    display:flex;
    align-items:flex-start;

    gap:12px;

    color:#bcc3d7;

    font-size:14px;
    line-height:1.7;

    font-weight:400 !important;
}

.auth-checkbox-label input{
    margin-top:4px;
}

.auth-checkbox-label a{
    color:#8b5cf6;
}


/*
========================================================
Buttons
========================================================
*/
.auth-submit-btn{
    width:100%;
    height:58px;

    border:none;

    border-radius:16px;

    color:#fff;

    font-size:14px;
    font-weight:700;

    letter-spacing:1.5px;
    text-transform:uppercase;

    background:
        linear-gradient(
            135deg,
            #7c4dff,
            #8b5cf6
        );

    box-shadow:
        0 14px 34px rgba(124,77,255,.24);

    transition:all .25s ease;
}

.auth-submit-btn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 18px 44px rgba(124,77,255,.32);
}


/*
========================================================
Bottom Text
========================================================
*/
.auth-bottom-text{
    margin-top:28px;

    text-align:center;

    color:#b9c0d3;

    font-size:15px;
}

.auth-bottom-text a{
    color:#8b5cf6;

    font-weight:600;
}


/*
========================================================
Responsive
========================================================
*/
@media(max-width:991px){

    .auth-section{
        padding:120px 0 80px;
    }

    .auth-title{
        font-size:52px;
    }

    .auth-description{
        font-size:18px;
    }

    .auth-card{
        padding:40px 32px;
    }
}

@media(max-width:767px){

    .auth-title{
        font-size:38px;
    }

    .auth-card{
        padding:30px 24px;
    }

    .auth-card-top h2{
        font-size:30px;
    }

    .auth-contact-info{
        display:none;
    }
}


/*
========================================================
Fehler-Modal
========================================================
*/

.auth-modal-overlay{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.65);
    backdrop-filter:blur(4px);

    z-index:9999;

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

    padding:20px;

    animation:auth-modal-fadein .18s ease;
}

@keyframes auth-modal-fadein{
    from{ opacity:0; }
    to  { opacity:1; }
}

.auth-modal{
    background:linear-gradient(135deg, rgba(13,18,40,.98), rgba(9,13,32,.96));

    border:1px solid rgba(255,255,255,.10);
    border-radius:22px;

    box-shadow:
        0 0 60px rgba(124,77,255,.18),
        0 30px 80px rgba(0,0,0,.55);

    padding:44px 48px;

    max-width:440px;
    width:100%;

    text-align:center;

    animation:auth-modal-scalein .18s ease;
}

@keyframes auth-modal-scalein{
    from{ transform:scale(.95); opacity:0; }
    to  { transform:scale(1);   opacity:1; }
}

.auth-modal-icon{
    width:60px;
    height:60px;

    border-radius:50%;

    background:rgba(239,68,68,.12);
    border:1px solid rgba(239,68,68,.28);

    color:#f87171;

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

    margin:0 auto 24px;
}

.auth-modal-title{
    color:#fff;

    font-size:22px;
    font-weight:700;

    margin:0 0 12px;
}

.auth-modal-message{
    color:#b9c0d3;

    font-size:15px;
    line-height:1.7;

    margin:0 0 32px;
}

.auth-modal-btn{
    max-width:200px;
    height:50px !important;
    font-size:14px !important;
    margin:0 auto;
    display:block;
}

@media(max-width:480px){
    .auth-modal{
        padding:32px 24px;
    }
}