/* ============================================================
   so-gehts.ch — Navigation
   ============================================================ */

.navbar {
  background:  var(--nav-bg);
  position:    sticky;
  top:         0;
  z-index:     200;
  box-shadow:  0 2px 12px rgba(0, 0, 0, 0.30);
}

.nav-container {
  max-width:   1100px;
  margin:      0 auto;
  padding:     0 24px;
  display:     flex;
  align-items: center;
  height:      62px;
  gap:         20px;
}

/* Logo */
.nav-logo {
  font-family:   var(--font-head);
  font-size:     1.45rem;
  color:         #fdf0dc;
  text-decoration: none;
  white-space:   nowrap;
  flex-shrink:   0;
  letter-spacing: -0.01em;
  transition:    color 0.2s;
}
.nav-logo:hover { color: #fff; }

/* Menu */
.nav-menu {
  list-style:  none;
  display:     flex;
  gap:         2px;
  flex:        1;
  flex-wrap:   wrap;
}

.nav-menu li a {
  display:         block;
  padding:         7px 14px;
  color:           #b89a72;
  text-decoration: none;
  font-size:       0.88rem;
  font-weight:     700;
  border-radius:   5px;
  transition:      background 0.2s, color 0.2s;
  white-space:     nowrap;
  letter-spacing:  0.01em;
}
.nav-menu li a:hover {
  background: rgba(255, 255, 255, 0.10);
  color:      #fdf0dc;
}
.nav-menu li a.active {
  background: rgba(192, 99, 30, 0.25);
  color:      #fdf0dc;
}

/* Hamburger-Button */
.nav-toggle {
  display:     none;
  background:  none;
  border:      none;
  color:       #fdf0dc;
  font-size:   1.6rem;
  cursor:      pointer;
  margin-left: auto;
  padding:     4px 8px;
  line-height: 1;
}
.nav-toggle:hover { color: #fff; }

/* ── Mobil-Menü ─────────────────────────────────────────── */
@media (max-width: 700px) {
  .navbar { position: relative; }

  .nav-toggle { display: block; }

  .nav-menu {
    display:        none;
    flex-direction: column;
    position:       absolute;
    top:            62px;
    left:           0;
    right:          0;
    background:     var(--nav-bg);
    padding:        10px 0 14px;
    box-shadow:     0 6px 20px rgba(0, 0, 0, 0.35);
    gap:            0;
    z-index:        199;
  }
  .nav-menu.open { display: flex; }

  .nav-menu li a {
    padding:       13px 24px;
    border-radius: 0;
    font-size:     0.95rem;
  }
}