/* ============================================================
   Navigation — Generische Nav-Bausteine
   Konsumenten: Site-Header (Header-spezifisches Layout dort)

   .nav         Flex-Container Nav-Items + Brand
   .nav-list    Liste der Nav-Eintraege
   .brand       Logo-Wortmarke (Fraunces)
   .burger      Mobile-Menu-Button (sichtbar < 720px)
   ============================================================ */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.nav-list {
  display: flex;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  .nav-list a:hover { opacity: 0.6; }
}

.brand {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  line-height: 1.1;
}

.brand small {
  display: block;
  font-family: var(--font-modern-artisan);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 0.15em;
}

/* ----- Burger ----- */

.burger {
  display: none;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.burger svg { display: block; }
.burger svg line {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

@media (max-width: 720px) {
  .burger { display: inline-flex; }
}