@import url('https://fonts.bunny.net/css?family=jura:300,500,700');

nav {
    margin-bottom: 40px;
}

nav menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;

    padding: 0;
    margin: 0;

    list-style: none;
}

nav menu li {
    position: relative;
}

nav menu a {
    display: block;

    padding: 12px 24px;

    border-radius: 14px;

    text-decoration: none;

    font-family: 'Jura', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;

    color: #d9f4ff;

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

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

    backdrop-filter: blur(10px);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        color .25s ease;
}

nav menu a:hover {
    transform: translateY(-3px);

    color: #00aaff;

    border-color: rgba(0,170,255,.4);

    box-shadow:
        0 0 18px rgba(0,170,255,.25);
}

nav menu li.cta a {
    color: #ff7dc7;

    border-color: rgba(246,51,154,.3);
}

nav menu li.cta a:hover {
    color: #f6339a;

    box-shadow:
        0 0 18px rgba(246,51,154,.35);
}

/* Aktiver Menüpunkt */

nav menu a.active {
    color: #00aaff;

    border-color: rgba(0,170,255,.6);

    box-shadow:
        0 0 20px rgba(0,170,255,.4);
}

/* APK-Modus */

body.apk-mode nav menu a.active {
    color: #f6339a;

    border-color: rgba(246,51,154,.6);

    box-shadow:
        0 0 20px rgba(246,51,154,.4);
}

/* Mobile */

@media (max-width: 700px) {

    nav menu {
        flex-direction: column;
        gap: 12px;
    }

    nav menu a {
        width: 220px;
        text-align: center;
    }
}