/* ======================================================================
   NAVBAR-MODUL (shared) — Demo-Website + Anfrage-Ausweis Funnel
   Single Source of Truth: alle Navbar-Styles leben HIER (kein Kopieren).

   Styling 1:1 aus OneGrain_Website site-header.tsx (Glass/Blur):
   - bg-page/22 + backdrop-blur-md, gescrollt dunkler (Glass-Effekt)
   - Mobile: Overlay + Panel (bg-black/60, bg-[#0d1117]/95)
   - Desktop ≥64em: Menü absolute zentriert, Burger aus

   Einheitensystem: rem (1rem = 16px), px nur für Border/Icon-Maße.
   Tokens mit Fallbacks: das Modul funktioniert auch ohne host-Stylesheet.
   ====================================================================== */

/* ===== NAVBAR ===== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  background: var(--nav-glass, rgba(3, 7, 18, 0.22)); /* bg-page/22 */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);  /* backdrop-blur-md */
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.nav.scrolled {
  background: rgba(3, 7, 18, 0.55); /* gescrollt: dunkleres Glass (Design-Token) */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
.nav-container {
  max-width: var(--container-max, 73.125rem); /* 1170px */
  margin: 0 auto;
  padding: 0 var(--container-pad, 0.9375rem); /* 15px */
}
.nav-row {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;                /* 64px, h-16 */
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;                 /* 8px, gap-2 */
  flex-shrink: 0;
  text-decoration: none;
}
.nav-logo-img {
  height: 47px;                /* mobil: ~167px breit (−10% gegenüber 52px) */
  width: auto;
}
.nav-menu {
  display: none;               /* desktop: absolute zentriert (siehe unten) */
}
.nav-link {
  font-family: var(--font-content, 'Nunito Sans', sans-serif);
  font-size: 0.95rem;          /* text-[0.95rem] */
  font-weight: 500;
  color: var(--white, #ffffff);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.nav-link:hover { color: rgba(255, 255, 255, 0.75); }
.nav-actions { display: none; }
.nav-collapse-actions { display: flex; flex-direction: column; gap: 0.75rem; padding: 0 1rem 1rem; }
.nav-collapse .btn-ghost,
.nav-collapse .btn-cta { width: 100%; }

/* Navbar-Buttons (OneGrain-Stil: rounded-md, h-11, px-4, text-sm) */
.btn-ghost,
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;                 /* 8px */
  font-family: var(--font-content, 'Nunito Sans', sans-serif);
  font-size: 0.875rem;         /* 14px, text-sm */
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0.375rem;     /* 6px, rounded-md */
  height: 2.75rem;             /* 44px, h-11 */
  padding: 0.5rem 1rem;        /* 8px 16px, px-4 py-2 */
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-ghost {
  color: var(--white, #ffffff);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.btn-cta {
  color: var(--primary-foreground, #030711);
  background: var(--primary, #00E69D); /* bg-primary */
  border: none;
}
.btn-cta:hover { background: rgba(0, 230, 157, 0.9); } /* hover:bg-primary/90 */
.nav-cta-icon { width: 16px; height: 16px; flex-shrink: 0; } /* ArrowRight w-4 h-4 — KRITISCH: ohne Maße streckt das SVG den CTA */

.nav-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -0.25rem;      /* -4px, -mr-1 */
  width: 2.75rem;              /* 44px, w-11 h-11 */
  height: 2.75rem;
  padding: 0;
  color: var(--white, #ffffff);
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-burger-icon { width: 24px; height: 24px; }
.nav-burger-icon--close { display: none; }
.nav-burger.open .nav-burger-icon--open { display: none; }
.nav-burger.open .nav-burger-icon--close { display: block; }

/* Mobile-Overlay + Panel (OneGrain: bg-black/60 Overlay, Panel bg-[#0d1117]/95 blur-lg) */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;                 /* unter der Navbar (z-100), über dem Seiteninhalt */
  background: rgba(0, 0, 0, 0.6);
}
.nav-overlay.open { display: block; }
.nav-collapse {
  display: none;
  position: relative;
  z-index: 10;
  background: var(--nav-panel, rgba(13, 17, 23, 0.95));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--nav-outline, rgba(255, 255, 255, 0.1));
}
.nav-collapse.open { display: block; }
.nav-collapse-menu { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; }
.nav-collapse .nav-link {
  font-size: 1.25rem;          /* text-[1.25rem] */
  font-weight: 500;
  color: var(--white, #ffffff);
  padding: 0.5rem 0;           /* 8px 0, py-2 */
  text-align: left;
}

/* Desktop-Zustände (OneGrain: md:flex CTA · lg:flex zentriertes Menü, Burger lg:hidden) */
@media (min-width: 48em) {    /* 768px */
  .nav-actions { display: flex; align-items: center; gap: 1rem; } /* 16px, gap-4 */
  .nav-row { height: 5rem; }                                      /* 80px, md:h-20 */
  .nav-logo-img { height: 58px; }                                 /* Desktop: ~206px breit — Icon/Maß in px */
}
@media (min-width: 64em) {    /* 1024px */
  .nav-menu {   /* hidden lg:flex absolute left-1/2 -translate-x-1/2 items-center gap-5 xl:gap-7 */
    display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    gap: 1.25rem;               /* 20px, gap-5 */
  }
  .nav-burger, .nav-collapse, .nav-overlay { display: none; }
}
@media (min-width: 80em) {    /* 1280px */
  .nav-menu { gap: 1.75rem; } /* 28px, xl:gap-7 */
}