/* ==================================================
   MODERNE NAVIGATION
   Farben passend zum Blau-Gelb-Logo
   ================================================== */

:root {
    --nav-bg: rgba(58, 67, 75, 0.96);
    --nav-bg-hover: rgba(255, 255, 255, 0.07);

    --nav-text: #f7f8fa;
    --nav-text-muted: #e2e5e8;

    --nav-blue: #3039b8;
    --nav-blue-dark: #252d91;

    --nav-yellow: #ffd21f;
    --nav-yellow-hover: #ffe05a;

    --nav-border: rgba(255, 255, 255, 0.12);
    --nav-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);

    --nav-height: 64px;
    --nav-radius: 999px;
}


/* ==================================================
   NAVIGATIONSBEREICH
   ================================================== */

.desktop-menu {
    position: relative;
    z-index: 100;

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

    width: 100%;
    min-height: var(--nav-height);

    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);

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

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* Falls ein zusätzlicher Wrapper vorhanden ist */

.desktop-menu > div,
.desktop-menu .menu-container,
.desktop-menu .menu-wrapper {
    display: flex;
    justify-content: center;

    width: 100%;
}


/* ==================================================
   MENÜLISTE
   ================================================== */

.desktop-menu .navilo {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: clamp(8px, 1.2vw, 20px);

    width: auto;
    max-width: 1400px;

    margin: 0 auto;
    padding: 16px;

    list-style: none;
}


/* Menüpunkt */

.desktop-menu .navilo > li {
    position: relative;

    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* ==================================================
   MENÜLINKS
   ================================================== */

.desktop-menu .navilo > li > a,
.desktop-menu .navilo > li > span {
    position: relative;

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


    padding: 10px 14px;

    color: var(--nav-text);

    font-family: var(--font-body, Arial, sans-serif);
    font-size: clamp(14px, 0.25vw + 13px, 20px);
    font-weight: 500;
    line-height: 1.2;

    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;

    text-decoration: none;
    cursor: pointer;

    border-radius: var(--nav-radius);

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* Falls das Theme Großbuchstaben erzwingt */

.desktop-menu .navilo,
.desktop-menu .navilo a,
.desktop-menu .navilo span {
    text-transform: none !important;
}


/* ==================================================
   HOVER
   ================================================== */

.desktop-menu .navilo > li:hover > a,
.desktop-menu .navilo > li:hover > span {
    color: var(--nav-yellow);

    background: var(--nav-bg-hover);

    transform: translateY(-1px);
}


/* Kleine moderne Linie */

.desktop-menu .navilo > li > a::before,
.desktop-menu .navilo > li > span::before {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 4px;

    width: 0;
    height: 2px;

    background: var(--nav-yellow);
    border-radius: 999px;

    transform: translateX(-50%);

    transition: width 0.25s ease;
}


.desktop-menu .navilo > li:hover > a::before,
.desktop-menu .navilo > li:hover > span::before {
    width: calc(100% - 28px);
}


/* ==================================================
   AKTIVER MENÜPUNKT
   ================================================== */

.desktop-menu .navilo > li.current-menu-item > a,
.desktop-menu .navilo > li.current_page_item > a,
.desktop-menu .navilo > li.current-menu-ancestor > a,
.desktop-menu .navilo > li.current_page_ancestor > a,
.desktop-menu .navilo > li.active > a,
.desktop-menu .navilo > li.current > a,
.desktop-menu .navilo > li > a[aria-current="page"] {
    color: var(--nav-blue-dark);

    background: var(--nav-yellow);

    font-weight: 600;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.16);

    transform: none;
}


.desktop-menu .navilo > li.current-menu-item > a:hover,
.desktop-menu .navilo > li.current_page_item > a:hover,
.desktop-menu .navilo > li.current-menu-ancestor > a:hover,
.desktop-menu .navilo > li.current_page_ancestor > a:hover,
.desktop-menu .navilo > li.active > a:hover,
.desktop-menu .navilo > li.current > a:hover,
.desktop-menu .navilo > li > a[aria-current="page"]:hover {
    color: var(--nav-blue-dark);

    background: var(--nav-yellow-hover);
}


/* Keine Linie beim aktiven Menüpunkt */

.desktop-menu .navilo > li.current-menu-item > a::before,
.desktop-menu .navilo > li.current_page_item > a::before,
.desktop-menu .navilo > li.current-menu-ancestor > a::before,
.desktop-menu .navilo > li.current_page_ancestor > a::before,
.desktop-menu .navilo > li.active > a::before,
.desktop-menu .navilo > li.current > a::before,
.desktop-menu .navilo > li > a[aria-current="page"]::before {
    display: none;
}


/* ==================================================
   TASTATUR-FOKUS
   ================================================== */

.desktop-menu .navilo > li > a:focus-visible,
.desktop-menu .navilo > li > span:focus-visible {
    color: var(--nav-blue-dark);

    background: var(--nav-yellow);

    outline: 3px solid rgba(255, 210, 31, 0.35);
    outline-offset: 3px;
}


/* ==================================================
   DROPDOWN-PFEIL
   ================================================== */

.desktop-menu .navilo > li.has-sub > a::after,
.desktop-menu .navilo > li.has-sub > span::after,
.desktop-menu .navilo > li.menu-item-has-children > a::after,
.desktop-menu .navilo > li.menu-item-has-children > span::after {
    content: "";

    width: 6px;
    height: 6px;

    margin-top: -3px;
    margin-left: 9px;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg);

    transition: transform 0.25s ease;
}


.desktop-menu .navilo > li.has-sub:hover > a::after,
.desktop-menu .navilo > li.has-sub:hover > span::after,
.desktop-menu .navilo > li.menu-item-has-children:hover > a::after,
.desktop-menu .navilo > li.menu-item-has-children:hover > span::after {
    transform: rotate(225deg) translate(-2px, -2px);
}


/* ==================================================
   DROPDOWN-MENÜ
   ================================================== */

.desktop-menu .navilo .sub-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;

    min-width: 220px;

    margin: 0;
    padding: 8px;

    list-style: none;

    background: rgba(48, 56, 64, 0.98);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.28);

    opacity: 0;
    visibility: hidden;

    transform:
        translateX(-50%)
        translateY(8px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
}


.desktop-menu .navilo > li:hover > .sub-menu,
.desktop-menu .navilo > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);
}


/* Dropdown-Links */

.desktop-menu .navilo .sub-menu li {
    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}


.desktop-menu .navilo .sub-menu a {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 42px;

    padding: 10px 13px;

    color: var(--nav-text-muted);

    font-family: var(--font-body, Arial, sans-serif);
    font-size: 14px;
    font-weight: 500;

    letter-spacing: 0;
    text-transform: none;

    text-decoration: none;

    border-radius: 9px;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        padding-left 0.2s ease;
}


.desktop-menu .navilo .sub-menu a:hover,
.desktop-menu .navilo .sub-menu a:focus-visible {
    color: var(--nav-blue-dark);

    background: var(--nav-yellow);

    padding-left: 17px;
}


/* ==================================================
   FOOTER-NAVIGATION
   ================================================== */

.footer-menu {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
}


.footer-menu .navilo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 8px 0;

    margin: 0;
    padding: 0;

    list-style: none;
}


.footer-menu .navilo > li,
.footer-menu .nav-item {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* Trennpunkt statt Pipe */

.footer-menu .navilo > li:not(:last-child)::after,
.footer-menu .nav-item:not(:last-child)::after {
    content: "•";

    margin: 0 14px;

    color: var(--nav-yellow);
    opacity: 0.55;
}


.footer-menu a {
    color: var(--nav-text-muted);

    font-family: var(--font-body, Arial, sans-serif);
    font-size: 14px;
    font-weight: 500;

    letter-spacing: 0.01em;
    text-transform: none;

    text-decoration: none;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}





/* ==================================================
   KLEINERE DESKTOP-BILDSCHIRME
   ================================================== */

@media screen and (max-width: 1200px) {

    .desktop-menu .navilo {
        gap: 4px;
        padding: 0 16px;
    }

    .desktop-menu .navilo > li > a,
    .desktop-menu .navilo > li > span {
        padding-right: 10px;
        padding-left: 10px;

        font-size: 14px;
    }
}


/* Desktop-Menü ausblenden, sofern ein mobiles Menü existiert */

@media screen and (max-width: 900px) {

    .desktop-menu {
        display: none;
    }
}


/* ==================================================
   REDUZIERTE ANIMATIONEN
   ================================================== */

@media (prefers-reduced-motion: reduce) {

    .desktop-menu *,
    .footer-menu * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* Footer Navigation */
.footer-menu {
    display: flex;
    justify-content: center; /* oder flex-end / flex-start */
    align-items: center;
}

.footer-menu .navilo {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-menu .nav-item {
    display: flex;
    align-items: center;
}

/* Pipe zwischen den Menüpunkten */
.footer-menu .nav-item:not(:last-child)::after {
    content: "|";
    color: var(--primary);
    margin: 0 1rem;
    opacity: .5;
}

/* Links */
.footer-menu a {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    color:#fff;
    text-decoration: none;
    transition: color .3s ease, opacity .3s ease;
}

/* Hover */
.footer-menu a:hover,
.footer-menu a:focus {
    color:  #B7B7B7;
   
}