/* ============================================================
   Site-Header — Top-Navigation
   Crest und Brand-Lockup leben in components/crest.css.
   Nav-Bausteine (.nav, .nav-list, .brand, .burger) in components/navigation.css.
   ============================================================ */

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: var(--space-md) var(--space-xl);
  z-index: 10;
  animation: fade-in 1s ease-out 0.05s both;
}

/* Nav-Color-Variante: dunkler Text auf hellem Hintergrund */
.nav-light a, .nav-light .brand { color: var(--color-anthrazit); }
.nav-light a.btn-primary { color: var(--color-bone); }
.nav-light a.btn-primary:hover { color: #fff; }

/* Pill-Hintergrund fuer alle Nav-Links (Events, Geschichte, Mitglieder, Kontakt) */
.site-header .nav-list a {
  display: inline-block;
  padding: 0.5em 1.1em;
  background: var(--color-cream);
  border: 1px solid var(--color-sand-dark);
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
  .site-header .nav-list a:hover {
    background: var(--color-sand);
    border-color: var(--color-anthrazit);
    opacity: 1;
  }
}

.site-header .nav-list a[aria-current="page"] {
  background: var(--color-rot);
  border-color: var(--color-rot);
  color: var(--color-bone);
}

@media (max-width: 720px) {
  .nav-list { display: none; }
  .site-header .btn-primary { display: none; }
  .brand small { display: none; }
  .site-header { padding: var(--space-sm) var(--space-md); }
}