/* =========================
   NAVIGATION BAR
========================= */
.nav-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;

    margin: 10px auto;
    padding: 8px;

    max-width: 520px;

    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);

    border-radius: 999px;
}
@media (max-width: 600px) {
    .nav-bar{
		margin: 10px 5px;	
	}
}
/* NAV ITEMS */
.nav-item {
    flex: 1;
    text-align: center;

    padding: 10px 6px;

    color: #ffe082;
    text-decoration: none;

    font-size: 12px;
    font-weight: bold;

    border-radius: 999px;

    transition: 0.2s ease;
}

/* Hover */
.nav-item:hover {
    background: rgba(139, 46, 0, 0.8);
    transform: translateY(-2px);
}

/* Active (optional später per PHP setzen) */
.nav-item.active {
    background: #8b2e00;
    color: #fff;
}