/* ================================
   NAVBAR (Menü-spezifisch)
   ================================ */

/* Sizing-Variablen nur fürs Menü */
:root {
    --nav-gap-x: 1.125rem;      /* Horizontaler Abstand zwischen Items */
    --nav-padding-y: .75rem;    /* Vertikale Polsterung je Item */
    --nav-padding-x: .5rem;     /* Horizontale Polsterung je Item */
    --nav-font-size: 1.025rem;  /* Grundgröße Menü */
    --nav-letter-spacing: .005em;
    --nav-min-touch: 44px;      /* Mindest-Klickfläche für A11y */
}

/* Navbar-Grundfläche (Hintergrund & Schatten bleiben in style.css) */
.navbar {
    /* leicht höhere Leiste für mehr Präsenz */
    min-height: 64px;
}

/* Container: etwas mehr „Luft“ links/rechts auf großen Screens */
@media (min-width: 1200px) {
    .navbar .container { gap: .5rem; }
}

/* Hauptliste: horizontaler Abstand zwischen Items */
.navbar-nav {
    gap: var(--nav-gap-x);
}

/* Top-Level Links (Startseite, Über uns, ... ) */
.navbar-dark .navbar-nav .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: var(--nav-font-size);
    letter-spacing: var(--nav-letter-spacing);
    padding: var(--nav-padding-y) var(--nav-padding-x);
    line-height: 1.3;
    min-height: var(--nav-min-touch);
    /* dezenter Hover */
    transition: transform .14s ease, color .14s ease, opacity .14s ease;
}

/* Hover/Active – Farbe kommt aus style.css (–> var(--color-text)) */
.navbar-dark .navbar-nav .nav-link:hover { transform: translateY(-1px); }
.navbar-dark .navbar-nav .nav-link.active { font-weight: var(--font-weight-bold, 700); }

/* Unterstreichung bei Hover/Active */
.nav-link::after {
    content: "";
    position: absolute;
    left: var(--nav-padding-x);
    right: var(--nav-padding-x);
    bottom: calc(var(--nav-padding-y) * .25 * -1);
    height: 2px;
    width: auto;       /* mit left+right, statt feste width */
    transform: scaleX(0);
    transform-origin: left center;
    background: color-mix(in srgb, var(--color-text) 85%, transparent 15%);
    transition: transform .18s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

/* Dropdown-Menü optisch ruhiger & größerer Hit-Area */
.dropdown-menu {
    border: 0;
    border-radius: var(--radius-md, .75rem);
    box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,.10));
    padding: .5rem;
    min-width: 15rem; /* etwas breiter, damit Zeilen nicht umbrechen */
}

/* Dropdown-Items mit guter Klickfläche */
.dropdown-item {
    border-radius: var(--radius-sm, .375rem);
    padding: .6rem .75rem;
    min-height: var(--nav-min-touch);
    line-height: 1.35;
    font-size: .98rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(var(--color-primary-rgb, 13,110,253), .12);
    color: inherit;
}

/* Caret-Icon dezenter & animiert */
.kubio-menu-item-icon {
    width: 10px;
    height: 10px;
    margin-left: .35rem;
    opacity: .75;
    transition: transform .18s ease, opacity .18s ease;
}
.dropdown.show .kubio-menu-item-icon,
.dropdown:hover .kubio-menu-item-icon {
    transform: translateY(1px) rotate(180deg);
    opacity: 1;
}

/* Brand-Logo minimal größer auf Desktop */
.navbar-brand-logo {
    height: 52px;
    width: auto;
    object-fit: contain;
}
@media (min-width: 992px) {
    .navbar-brand-logo { height: 58px; }
}

/* Mobile: größere Tap-Ziele, dichteres Dropdown */
@media (max-width: 991.98px) {
    .navbar-collapse {
        padding-top: .5rem;
        padding-bottom: .75rem;
    }
    .navbar-nav {
        gap: .25rem;
    }
    .dropdown-menu {
        box-shadow: none;
        padding: .25rem;
    }
    .dropdown-item {
        padding: .65rem .75rem;
    }
}

/* Tastaturfokus gut sichtbar im Menü */
.navbar a:focus-visible,
.dropdown-item:focus-visible {
    outline: 3px solid rgb(var(--color-primary-rgb, 37, 99, 235));
    outline-offset: 2px;
    border-radius: var(--radius-sm, .375rem);
}

/* Desktop: Dropdown mit Micro-Delay & sanfter Bewegung */
@media (hover: hover) and (min-width: 992px) {
    .navbar .dropdown .dropdown-menu {
        display: block;               /* wir steuern Sichtbarkeit via opacity/visibility */
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition:
                opacity .14s ease,
                transform .14s ease,
                visibility 0s linear .14s;  /* erst nach Fade-Out unsichtbar */
        pointer-events: none;         /* solange unsichtbar, keine Klicks */
    }
    .navbar .dropdown:hover .dropdown-menu,
    .navbar .dropdown:focus-within .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition-delay: .08s, .08s, 0s; /* Micro-Open-Delay (Hover-Intent) */
        pointer-events: auto;
    }
}

/* Motion-Reduce: keine Animationen/Delays */
@media (prefers-reduced-motion: reduce) {
    .navbar .dropdown .dropdown-menu {
        transition: none !important;
        transform: none !important;
    }
}

.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.75);
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: var(--color-secondary);
}

/* Top-Level Links (heller Header) */
.navbar-light .navbar-nav .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: var(--nav-font-size);
    letter-spacing: var(--nav-letter-spacing);
    padding: var(--nav-padding-y) var(--nav-padding-x);
    line-height: 1.3;
    min-height: var(--nav-min-touch);
    color: rgba(0,0,0,.75);
    transition: transform .14s ease, color .14s ease, opacity .14s ease;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: var(--color-secondary); /* Dunkelblau aus Logo */
}
.navbar-light .navbar-nav .nav-link.active {
    color: var(--color-secondary);
    font-weight: var(--font-weight-bold, 700);
}

/* Unterstreichung: auf hellem Grund in CI-Farbe */
.navbar-light .nav-link::after {
    background: color-mix(in srgb, var(--color-secondary) 90%, transparent 10%);
}

/* Dropdown-Menü: leichte Glasfläche, gute Lesbarkeit */
.dropdown-menu {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--radius-md, .75rem);
    box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,.10));
    padding: .5rem;
    min-width: 15rem;
}
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
    .dropdown-menu { background: #fff; }
}
.dropdown-item {
    color: rgba(0,0,0,.8);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(var(--color-primary-rgb, 38,179,161), .12);
    color: var(--color-secondary);
}

/* Caret-Icon übernimmt Textfarbe */
.kubio-menu-item-icon { color: currentColor; }

/* Mobile: Dropdown ohne Blur, klarer Hintergrund */
@media (max-width: 991.98px) {
    .dropdown-menu {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #fff;
        box-shadow: none;
        border: 1px solid rgba(0,0,0,.06);
        padding: .25rem;
    }
}