/* nav.css
 * 2026-10-15: Navigations-Styles aus nav.js ausgelagert, damit sie
 * sofort im <head> geladen werden (kein Aufblitzen der Menue-Liste).
 * 2026-10-15: Burger-Menü ab unter 1024px, Play-Link zum Spiel.
 */
.top-bar {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 5000;
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
    pointer-events: none;
}
.top-bar.scrolled {
    background: rgba(5, 10, 20, 0.85); backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.nav-container {
    max-width: 1400px; margin: 0 auto; padding: 0 40px; height: 100px;
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; pointer-events: auto; transition: height 0.4s ease;
}
.top-bar.scrolled .nav-container { height: 80px; }
.top-left-logo-link { width: 180px; display: block; transition: width 0.4s ease; flex-shrink: 0; }
.top-bar.scrolled .top-left-logo-link { width: 140px; }
.top-left-logo { width: 100%; height: auto; display: block; }
.desktop-nav { display: flex; gap: 50px; align-items: center; flex-shrink: 0; }
.menu-link {
    position: relative; color: rgba(255,255,255,0.5);
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3em;
    text-decoration: none; transition: color 0.3s ease; padding-bottom: 4px; white-space: nowrap;
}
.menu-link:hover, .menu-link.active { color: #fff; }
.menu-link::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px;
    background-color: #fff; transition: width 0.3s ease;
}
.menu-link:hover::after, .menu-link.active::after { width: 100%; }
.mobile-menu-trigger { display: none; cursor: pointer; padding: 10px; flex-shrink: 0; }
.bar { width: 25px; height: 2px; background: white; margin: 6px 0; transition: 0.4s; border-radius: 2px; }
#mobile-nav-overlay {
    position: fixed; inset: 0; background: #050a14; z-index: 6000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
#mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-link { color: white; font-size: 2.5rem; font-weight: 900; margin: 15px 0; text-transform: uppercase; text-decoration: none; }
@media (max-width: 1023px) {
    .desktop-nav { display: none; }
    .mobile-menu-trigger { display: block; }
    .nav-container { padding: 0 25px; height: 80px; }
    .top-left-logo-link { width: 130px; }
}


/* 2026-10-15: Link zum Banana-Pong-Spiel (Desktop-Menü, Mobil-Icon, Mobil-Overlay) */
.nav-play-link {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    color: #f5d300; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3em;
    transition: color 0.3s ease;
}
.nav-play-link:hover { color: #fff; }
.nav-play-icon {
    display: inline-block; width: 36px; height: 33px; flex-shrink: 0;
    background: url('../images/banana/nav-play.png') no-repeat center / contain;
    animation: navPlayBounce 2.4s ease-in-out infinite;
    transform-origin: 50% 100%;
}
.nav-play-link:hover .nav-play-icon {
    background-image: url('../images/banana/nav-play-hit.png');
    animation: none; transform: rotate(-6deg) scale(1.08);
}
@keyframes navPlayBounce {
    0%, 70%, 100% { transform: translateY(0) rotate(0); }
    78% { transform: translateY(-5px) rotate(-6deg); }
    86% { transform: translateY(0) rotate(4deg); }
    93% { transform: translateY(-2px) rotate(0); }
}
.nav-play-mobile { display: none; }
.mobile-play-link { display: inline-flex; align-items: center; gap: 14px; color: #f5d300; }
.mobile-play-link .nav-play-icon { width: 54px; height: 50px; }

@media (max-width: 1023px) {
    .nav-play-mobile { display: inline-flex; margin-left: auto; margin-right: 6px; gap: 6px; padding: 6px 4px; }
    .nav-play-mobile .nav-play-icon { width: 34px; height: 31px; }
    .nav-play-mobile .nav-play-label { font-size: 9px; letter-spacing: 0.25em; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-play-icon { animation: none; }
}

/* 2026-10-15: Burger-Menü schon unter 1024px (vorher 768px) - das Desktop-Menü
   passte zwischen 769 und ca. 1000px nicht in die Breite. Auf kleinen Laptops
   (1024-1279px) etwas engere Abstände, unter 1100px Play nur als Icon. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .desktop-nav { gap: 28px; }
    .nav-container { padding: 0 28px; }
}
@media (min-width: 1024px) and (max-width: 1099px) {
    .desktop-nav .nav-play-label { display: none; }
    .top-left-logo-link { width: 150px; }
}