@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',sans-serif;
}

body{
    min-height: 100vh;
    overflow-y: auto;

    background:
        radial-gradient(circle at top left,
        #2563eb 0%,
        transparent 35%),

        radial-gradient(circle at bottom right,
        #7c3aed 0%,
        transparent 35%),

        #05060a;

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

.container{
    width:100%;
    max-width:1600px;

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

    padding:0 8vw;
}

/* Linke Seite */

.hero{
    max-width:600px;
    position:relative;
}

.hero::before{
    content:"";

    position:absolute;

    width:300px;
    height:300px;

    background:#2563eb;

    border-radius:50%;

    filter:blur(120px);

    opacity:.15;

    top:-50px;
    left:-50px;

    z-index:-1;
}

.hero-logo{
    display:flex;
    align-items:center;
    gap:25px;
    margin-bottom:25px;
}

.hero-logo img{
    width:120px;
    height:120px;
    object-fit:contain;
}

.hero h1{
    color:white;
    font-size:5rem;
    font-weight:800;
    line-height:1;
}

.hero p{
    margin-top:25px;

    color:#b6bcc8;

    font-size:2rem;
    line-height:1.6;

    max-width:700px;
}

/* Login Karte */

.card{
    width:560px;

    margin-top:30px;

    padding:55px;

    border-radius:36px;

    background:
        linear-gradient(
            180deg,
            rgba(20,20,25,.92),
            rgba(10,10,15,.92)
        );

    backdrop-filter:blur(25px);

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

    box-shadow:
        0 25px 80px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.card h1{
    color:white;
}

.card h2{
    color:white;

    font-size:3rem;
    font-weight:800;

    margin-bottom:50px;
}

.card p{
    color:white;
}
/* Formular */

.card form{
    display:flex;
    flex-direction:column;
}

.card input{
    color:white;

    height:64px;
    
    background:
        linear-gradient(
            180deg,
            #272730,
            #22222b
        );

    border:1px solid rgba(255,255,255,.05);
    border-radius:20px;
}

.card input::placeholder{
    color:#8b93a1;
}

.card input:focus{
    outline:none;

    background:#2b2b36;

    box-shadow:
        0 0 0 3px rgba(59,130,246,.25);
}

/* Button */

.card button{
    width:100%;
    height:70px;

    border:none;
    border-radius:18px;

    cursor:pointer;

    color:white;
    font-size:1.2rem;
    font-weight:700;

    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #8b5cf6
        );

    transition:.25s;
}

.card button:hover{
    transform:translateY(-3px);

    box-shadow:
        0 20px 45px rgba(99,102,241,.5);
}

/* Divider */

.divider{
    margin:30px 0;

    position:relative;
    text-align:center;
}

.divider::before{
    content:"";

    position:absolute;

    top:50%;
    left:0;
    right:0;

    height:1px;

    background:#30303a;
}

.divider span{
    position:relative;

    padding:0 15px;

    background:rgba(15,15,20,.95);

    color:#a1a1aa;
}

/* Links */

.card a{
    color:#60a5fa;

    text-decoration:none;

    font-weight:500;

    transition:.2s;
}

.card a:hover{
    color:white;
}

.register-btn{
    display:flex;

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

    height:60px;

    border-radius:18px;

    background:#1f1f28;

    color:#cbd5e1 !important;

    text-decoration:none;

    margin-top:10px;

    transition:.2s;
}

.register-btn:hover{
    background:#292933;
    color:white !important;
}

.dashboard-card{
    width:700px;

    padding:50px;

    border-radius:30px;

    background:rgba(15,15,20,.85);

    backdrop-filter:blur(20px);

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

    box-shadow:
        0 20px 60px rgba(0,0,0,.5);
}

.dashboard-card h1{
    color:white;
    font-size:3rem;
    margin-bottom:10px;
}

.dashboard-card p{
    color:white;
}

.dashboard-card .role{
    color:#60a5fa;
    font-weight:600;
    margin-bottom:20px;
}

/* Responsive */

@media (max-width:1200px){

    .container{
        gap:60px;
    }

    .hero h1{
        font-size:4rem;
    }

    .hero p{
        font-size:1.5rem;
    }

    .card{
        width:500px;
    }
}

@media (max-width:900px){

    body{
        overflow:auto;
    }

    .container{
        flex-direction:column;
        justify-content:center;

        padding:40px 20px;
        gap:40px;
    }

    .hero{
        text-align:center;
    }

    .hero-logo{
        justify-content:center;
    }

    .hero h1{
        font-size:4rem;
    }

    .hero p{
        font-size:1.2rem;
    }

    .card{
        width:100%;
        max-width:500px;
        padding:35px;
    }
}

@media (max-width: 768px){

    .navbar{
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .navbar a{
        padding: 12px 20px;
        font-size: 16px;
    }

    h1{
        font-size: 48px !important;
        text-align: center;
    }

    h2{
        font-size: 28px !important;
        text-align: center;
    }

    p{
        text-align: center;
    }

    .button-row{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:10px;
    }

    .button-row a{
        width:calc(50% - 10px);
        text-align:center;
    }

    .logo img{
        width:70px;
        height:auto;
    }

}

@media (max-width: 768px){

    .landing{
        padding:30px 20px;
    }

    .topbar{
        flex-direction:column;
        gap:20px;
        text-align:center;
    }

    .logo{
        flex-direction:column;
        gap:10px;
    }

    .logo img{
        width:100px;
        height:100px;
    }

    .logo h1{
        font-size:2rem;
    }

    .nav-buttons{
        flex-wrap:wrap;
        justify-content:center;
    }

    .headline h2{
        font-size:2.5rem;
    }

    .headline p{
        font-size:1rem;
        padding:0 10px;
    }

    .filters{
        flex-wrap:wrap;
    }

    .filters a{
        width:140px;
        text-align:center;
    }

}