/* ==========================================
   Navigation
========================================== */

.navbar{

    position:sticky;

    top:0;

    z-index:1000;

    height:90px;

    padding:0 60px;

    display:grid;

    grid-template-columns:300px 1fr 300px;

    align-items:center;

    background:#0b111a;

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

    box-shadow:

    0 1px 0 rgba(255,255,255,.05),

    0 12px 30px rgba(0,0,0,.18);

}
.logo{

    display:flex;

    align-items:center;
    
    padding-left:12px;

}

.logo img{

    height:58px;

    width:auto;

    display:block;

    transition:.25s ease;
}
.logo:hover img{

    opacity:.9;

}

/* ===========================
   Menü
=========================== */

.navbar ul{

    display:flex;

    justify-content:center;

    gap:clamp(18px,2vw,38px);

    list-style:none;

    margin:0;

    padding:0;

}

.navbar ul li a{

    color:#fff;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    transition:.3s;

    position:relative;

}
.navbar ul li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#009dff;

    transition:.25s;

}
.navbar ul li a:hover{

    color:#ffffff;

}

.navbar ul li a:hover::after{

    width:100%;

}

.navbar ul li a.active{

    color:#009dff;

}

.navbar ul li a.active::after{

    width:100%;

}
/* ===========================
   Socials
=========================== */

.socials{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:16px;

    height:100%;

}

.socials a{

    display:flex;

    justify-content:center;

    align-items:center;

    width:48px;

    height:48px;

    border-radius:50%;

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

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

    color:#fff;

    text-decoration:none;

    transition:all .25s ease;

}

.socials a i{

    font-size:20px;

    line-height:1;

}

.socials a:hover{

    background:#009dff;

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(0,157,255,.35);

}

.nav-toggle{

    display:none;

    width:48px;

    height:48px;

    padding:0;

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

    border-radius:6px;

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

    color:#fff;

    cursor:pointer;

}

.nav-toggle span{

    display:block;

    width:24px;

    height:2px;

    border-radius:2px;

    background:currentColor;

    transition:transform .22s ease, opacity .22s ease;

}

.nav-toggle:focus-visible,
.navbar a:focus-visible{

    outline:3px solid #009dff;

    outline-offset:3px;

}

/* ==========================================
   Mobile und Tablet
========================================== */

@media(max-width:1250px){

    .navbar{

        width:100%;

        height:auto;

        min-height:72px;

        padding:10px 16px;

        grid-template-columns:minmax(0, 1fr) 48px;

        gap:0 12px;

        align-items:center;

    }

    .logo{

        width:fit-content;

        max-width:100%;

        min-width:0;

        padding-left:0;

    }

    .logo img{

        width:min(100%, 300px);

        height:auto;

        max-height:50px;

        object-fit:contain;

    }

    .nav-toggle{

        display:inline-flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:5px;

    }

    .navbar .nav-menu{

        grid-column:1 / -1;

        width:100%;

        flex-direction:column;

        align-items:stretch;

        gap:0;

        margin-top:10px;

        padding:8px 0 4px;

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

    }

    .navbar.nav-ready .nav-menu{

        display:none;

    }

    .navbar.nav-ready.nav-open .nav-menu{

        display:flex;

    }

    .navbar .nav-menu li a{

        display:block;

        padding:13px 8px;

        font-size:17px;

        line-height:1.25;

        text-align:center;

    }

    .navbar .nav-menu li a::after{

        left:50%;

        bottom:6px;

        max-width:56px;

        transform:translateX(-50%);

    }

    .socials{

        grid-column:1 / -1;

        width:100%;

        height:auto;

        justify-content:center;

        gap:12px;

        padding:8px 0 6px;

    }

    .navbar.nav-ready .socials{

        display:none;

    }

    .navbar.nav-ready.nav-open .socials{

        display:flex;

    }

    .socials a{

        width:44px;

        height:44px;

    }

    .navbar.nav-open .nav-toggle span:nth-child(1){

        transform:translateY(7px) rotate(45deg);

    }

    .navbar.nav-open .nav-toggle span:nth-child(2){

        opacity:0;

    }

    .navbar.nav-open .nav-toggle span:nth-child(3){

        transform:translateY(-7px) rotate(-45deg);

    }

}

@media(max-width:420px){

    .navbar{

        padding:9px 12px;

    }

    .logo img{

        width:min(100%, 245px);

    }

}