/*
       |--------------------------------------------------------------------------
       | FIRELOCKER MODERN NAVBAR
       | Tailscale / Linear / Vercel Inspired
       | PicoCSS Compatible
       |--------------------------------------------------------------------------
       */

:root {

   --nav-bg:
           rgba(15,23,42,0.78);

   --nav-border:
           rgba(255,255,255,0.08);

   --nav-hover:
           rgba(59,130,246,0.18);

   --nav-text:
           #f8fafc;

   --nav-muted:
           #94a3b8;

   --nav-shadow:
           0 10px 40px rgba(0,0,0,0.35);
}

/*
|--------------------------------------------------------------------------
| NAVBAR CONTAINER
|--------------------------------------------------------------------------
*/

nav {

    width:
            min(1450px, 92%);

    margin:
            1rem auto 2rem auto;

    padding:
            0.8rem 1.2rem;

    display:
            flex;

    justify-content:
            space-between;

    align-items:
            center;

    border:
            1px solid var(--nav-border);

    border-radius:
            28px;

    background:
            var(--nav-bg);

    backdrop-filter:
            blur(18px);

    box-shadow:
            var(--nav-shadow);

    color:
            var(--nav-text);

    position:
            sticky;

    top:
            1rem;

    z-index:
            999;
}

/*
|--------------------------------------------------------------------------
| LOGO
|--------------------------------------------------------------------------
*/

.nav-logo {

    display:
            flex;

    align-items:
            center;

    gap:
            0.75rem;

    margin:
            0;

    font-size:
            1.35rem;

    font-weight:
            800;

    letter-spacing:
            -0.03em;

    color:
            white;

    user-select:
            none;
}

.nav-logo::before {

    content:
            "";

    width:
            12px;

    height:
            12px;

    border-radius:
            999px;

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

    box-shadow:
            0 0 18px rgba(59,130,246,0.55);
}

/*
|--------------------------------------------------------------------------
| NAV CONTENT
|--------------------------------------------------------------------------
*/

.nav-content {

    display:
            flex;

    align-items:
            center;
}

nav ul {

    display:
            flex;

    justify-content:
            center;

    align-items:
            center;

    gap:
            0.5rem;

    margin:
            0;

    padding:
            0;
}

nav ul li {

    list-style-type:
            none;

    padding:
            0;

    margin:
            0.9rem 1rem 0.9rem 1rem;
}

/*
|--------------------------------------------------------------------------
| NAV LINKS
|--------------------------------------------------------------------------
*/

.nav-content li a {

    position:
            relative;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    padding:
            0.9rem 1.2rem;

    border-radius:
            16px;

    color:
            var(--nav-text);

    font-weight:
            600;

    text-decoration:
            none;

    transition:
            0.2s ease;
}

.nav-content li a:hover {

    background:
            var(--nav-hover);

    color:
            white;

    transform:
            translateY(-1px);
}

.nav-content li a::after {

    content:
            "";

    position:
            absolute;

    left:
            50%;

    bottom:
            6px;

    width:
            0;

    height:
            2px;

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

    transition:
            0.25s ease;

    transform:
            translateX(-50%);

    border-radius:
            999px;
}

.nav-content li a:hover::after {
    width: 50%;
}

/*
|--------------------------------------------------------------------------
| MOBILE TOGGLE
|--------------------------------------------------------------------------
*/

.nav-toggle {

    position:
            relative;

    display:
            none;

    width:
            48px;

    height:
            48px;

    border-radius:
            14px;

    background:
            rgba(255,255,255,0.04);

    border:
            1px solid rgba(255,255,255,0.08);

    align-items:
            center;

    justify-content:
            center;

    cursor:
            pointer;

    transition:
            0.2s ease;
}

.nav-toggle:hover {

    background:
            rgba(255,255,255,0.08);

    transform:
            translateY(-1px);
}

/*
|--------------------------------------------------------------------------
| MOBILE ICON
|--------------------------------------------------------------------------
*/

.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
   content: "";
   position: absolute;
   /* Zwingt den Startpunkt exakt in die Mitte (50% minus die Hälfte der eigenen Breite/Höhe) */
   left: calc(50% - 10px);
   top: calc(50% - 1px);
   width: 20px;
   height: 2px;
   border-radius: 999px;
   background: white;
   transition: 0.25s ease;
}


.nav-toggle::before {
   transform: translateY(-6px);
}

.nav-toggle::after {
   transform: translateY(6px);
}

/* Verhindert, dass der globale Glanz-Effekt der Buttons den unteren Strich wegschießt */
.nav-toggle:hover::after,
button.nav-toggle:hover::after {
   transform: translateY(6px) !important;
}

/*
|--------------------------------------------------------------------------
| MOBILE NAVIGATION
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    nav {

        width:
                94%;

        padding:
                1rem;

        flex-direction:
                column;

        align-items:
                stretch;

        gap:
                1rem;
    }

    .nav-header {

        display:
                flex;

        justify-content:
                space-between;

        align-items:
                center;

        width:
                100%;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-content {

        width:
                100%;

        display:
                none;

        animation:
                navFadeIn 0.25s ease;
    }

    .nav-content.active {
        display: flex;
    }

    .nav-content ul {

        flex-direction:
                column;

        width:
                100%;

        gap:
                0.5rem;
    }

    .nav-content li {
        width: 100%;
    }

    .nav-content li a {

        width:
                100%;

        justify-content:
                flex-start;

        background:
                rgba(255,255,255,0.02);

        border:
                1px solid rgba(255,255,255,0.04);
    }

    .nav-content li a:hover {

        background:
                rgba(59,130,246,0.15);
    }
}

/*
|--------------------------------------------------------------------------
| LARGE SCREENS
|--------------------------------------------------------------------------
*/

@media (min-width: 1201px) {

    nav {
        min-height: 80px;
    }

    .nav-content {
        margin-left: 20px;
    }

    nav ul li {
        list-style-type: none;
        padding: 0;
        margin: 0 1rem 0 1rem;
    }
}

/*
|--------------------------------------------------------------------------
| ANIMATIONS
|--------------------------------------------------------------------------
*/

@keyframes navFadeIn {

    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {

    0% {
        opacity: 1;
    }

    99% {
        opacity: 0.01;
        width: 100%;
        height: 100%;
    }

    100% {
        opacity: 0;
        width: 0;
        height: 0;
        display: none;
    }
}

@keyframes fadeIn {

    0% {
        opacity: 0;
        width: 0;
        height: 0;
        display: none;
    }

    99% {
        opacity: 0.99;
        width: 250px;
        height: 100%;
    }

    100% {
        opacity: 1;
        display: block;
    }
}