/**
 * Liquid-Glass Navigation: durchsichtige Pills, Hintergrund scheint durch.
 * Theme: nav[data-nav-theme="dark"] auf dunklem Hero, sonst hell (Mesh / helle Sektionen).
 */

nav .nav-pill {
  isolation: isolate;
  background: rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(22px) saturate(1.45);
  -webkit-backdrop-filter: blur(22px) saturate(1.45);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow:
    0 8px 36px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25);
  transition:
    background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

nav[data-nav-theme="dark"] .nav-pill {
  background: rgba(8, 12, 24, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 12px 44px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

/* —— Typo & Links: heller Hintergrund —— */
nav:not([data-nav-theme="dark"]) .nav-links a {
  color: var(--g900);
}
nav:not([data-nav-theme="dark"]) .nav-links a:hover {
  color: var(--g700);
}
nav:not([data-nav-theme="dark"]) .nav-dropdown-toggle {
  color: var(--g900);
}
nav:not([data-nav-theme="dark"]) .nav-dropdown-toggle:hover,
nav:not([data-nav-theme="dark"]) .nav-dropdown.open .nav-dropdown-toggle {
  color: var(--g700);
}

/* —— Typo & Links: dunkler Hero —— */
nav[data-nav-theme="dark"] .nav-links a {
  color: rgba(255, 255, 255, 0.94);
}
nav[data-nav-theme="dark"] .nav-links a:hover {
  color: #fff;
}
nav[data-nav-theme="dark"] .nav-dropdown-toggle {
  color: rgba(255, 255, 255, 0.94);
}
nav[data-nav-theme="dark"] .nav-dropdown-toggle:hover,
nav[data-nav-theme="dark"] .nav-dropdown.open .nav-dropdown-toggle {
  color: #fff;
}

/* Zwei Logos: helles/weißes logo4 auf dunklem Hero, logo black.png auf hellem Nav-Pill */
.nav-logo {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.nav-logo .nav-logo-mark {
  height: 30px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  object-position: left center;
  display: block;
  transition: opacity 0.3s ease;
}
/* Standard: Sektion unter dem Hero = helles Thema → schwarzes Logo sichtbar */
nav:not([data-nav-theme="dark"]) .nav-logo-mark--for-light-bg {
  display: block;
}
nav:not([data-nav-theme="dark"]) .nav-logo-mark--for-dark-bg {
  display: none;
}
/* Über dunklem Hero: helles logo4 */
nav[data-nav-theme="dark"] .nav-logo-mark--for-light-bg {
  display: none;
}
nav[data-nav-theme="dark"] .nav-logo-mark--for-dark-bg {
  display: block;
}

/* —— CTAs im Pill —— */
nav:not([data-nav-theme="dark"]) .nav-pill .btn-ghost {
  color: var(--g900);
  background: rgba(26, 26, 26, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
nav:not([data-nav-theme="dark"]) .nav-pill .btn-ghost:hover {
  background: rgba(26, 26, 26, 0.11);
}

nav:not([data-nav-theme="dark"]) .nav-pill .btn-primary {
  color: var(--white);
  background: var(--g900);
  border: 1px solid rgba(0, 0, 0, 0.15);
}
nav:not([data-nav-theme="dark"]) .nav-pill .btn-primary:hover {
  background: var(--g800);
  border-color: var(--g600);
}

nav[data-nav-theme="dark"] .nav-pill .btn-ghost {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
nav[data-nav-theme="dark"] .nav-pill .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
}

nav[data-nav-theme="dark"] .nav-pill .btn-primary {
  color: var(--g900);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.45);
}
nav[data-nav-theme="dark"] .nav-pill .btn-primary:hover {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 600px) {
  nav .nav-pill {
    min-height: 56px;
    height: auto;
    padding: 10px 16px;
    flex-wrap: wrap;
    gap: 10px;
  }
}