/* ============================================================
   CODA — gemeinsame Menüleiste (alle Seiten)
   Auf jeder Seite NACH dem Seiten-CSS einbinden, damit diese
   Regeln die alten .topnav-Styles überschreiben.
   ============================================================ */

.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  padding: 14px 30px;
  background: transparent;
  pointer-events: none;
  color: #003357;
  border-bottom: 1px solid transparent;
  transition:
    transform .38s cubic-bezier(.4,.1,.2,1),
    background .3s ease,
    color .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
  will-change: transform;
}
.topnav > * { pointer-events: auto; }

/* Oben im Hero (Startseite): transparent, weiße Schrift */
.topnav.over-hero, .topnav.dark { color: #ffffff; }

/* Außerhalb Hero / auf Unterseiten: milchige Glasleiste */
.topnav.nav-solid {
  background: rgba(244,243,241,0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(12,22,32,0.08);
  box-shadow: 0 10px 30px -22px rgba(0,24,37,0.5);
  color: #003357;
}
.topnav.nav-solid.dark {
  background: rgba(0,24,37,0.55);
  border-bottom-color: rgba(255,255,255,0.12);
  color: #ffffff;
}

/* Verstecken beim Runterscrollen (per JS getoggelt) */
.topnav.nav-hidden { transform: translateY(-115%); }

/* Marke links */
.brand {
  display: inline-flex; align-items: center;
  font-weight: 700; font-size: 21px; letter-spacing: -0.02em;
  color: inherit; text-decoration: none;
  transition: opacity .2s ease;
}
.brand:hover { opacity: 0.8; }
.brand-dot { display: none; }

/* Horizontale Linkleiste (Desktop) */
.topnav-links { display: flex; align-items: center; gap: 30px; }
.topnav-links a {
  position: relative;
  color: inherit; text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  opacity: 0.82;
  transition: opacity .2s ease;
}
.topnav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.4,.1,.2,1);
}
.topnav-links a:hover { opacity: 1; }
.topnav-links a:hover::after { transform: scaleX(1); }

.topnav-right { display: flex; align-items: center; gap: 14px; }

/* Hamburger (nur mobil sichtbar) */
.hamburger {
  width: 42px; height: 42px;
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  background: transparent; border: none; cursor: pointer; padding: 0;
  color: inherit;
}
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: currentColor;
  transition: transform .3s cubic-bezier(.4,.2,.2,1), opacity .2s ease, background .3s ease;
}
body.menu-open .hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .hamburger span:nth-child(2) { opacity: 0; }
body.menu-open .hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
body.menu-open .hamburger span { background: #ffffff; }

/* Quick-Support (falls vorhanden, z. B. Startseite) */
.qs {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500;
  color: inherit; text-decoration: none;
  padding: 11px 16px;
  border: 1px solid currentColor;
  opacity: 0.75;
  transition: opacity .3s ease, background .25s ease, visibility .3s ease;
}
.qs:hover { opacity: 1; background: rgba(127,127,127,0.08); }
.qs .pulse { display: none; }
.topnav.qs-hide .qs { opacity: 0; visibility: hidden; pointer-events: none; }
body.menu-open .qs { color: #ffffff; border-color: rgba(255,255,255,0.4); opacity: 0.9; }

/* Responsive: Desktop = Links, Mobil = Hamburger */
@media (min-width: 880px) {
  .topnav-links { display: flex; }
  .hamburger { display: none; }
}
@media (max-width: 879px) {
  .topnav-links { display: none; }
  .hamburger { display: inline-flex; }
  .qs { display: none; }
  .topnav { padding: 12px 20px; }
}

/* Einheitlich ohne backdrop-filter (z. B. ältere Firefox) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topnav.nav-solid { background: rgba(244,243,241,0.96); }
  .topnav.nav-solid.dark { background: rgba(0,24,37,0.94); }
}