/**
 * FachTap Landing · Nav-Auth-Button
 * 1:1 wie #authButton auf Visitenkarten (siehe /profile/user-dropdown.css für Dropdown).
 */

.lp-auth-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
}

/* Auth-Button (nicht eingeloggt: nur Icon; eingeloggt: Username-Text) */
.lp-auth-wrap #authButton {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(212, 160, 23, 0.45);
  background: rgba(10, 8, 4, 0.5);
  backdrop-filter: blur(6px);
  color: rgba(212, 160, 23, 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.lp-auth-wrap #authButton:hover {
  color: #ffe680;
  background: rgba(212, 160, 23, 0.1);
  border-color: rgba(212, 160, 23, 0.7);
}
.lp-auth-wrap #authButton.is-logged-in {
  color: #ffe680;
  border-color: rgba(212, 160, 23, 0.7);
}

/* Dropdown-Position: user-dropdown.css setzt absolute + inset — hier
   auf Landing-Kontext justieren: unter dem Auth-Button, rechtsbündig */
.lp-auth-wrap #userDropdown.user-dropdown {
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
}

/* Mobile: nur Icon, kein Text */
@media (max-width: 480px) {
  .lp-auth-wrap #authButton {
    padding: 0;
    width: 40px;
    font-size: 0;    /* Username-Text unsichtbar auf Mobile */
  }
  .lp-auth-wrap #authButton svg { font-size: 1rem; }
}

/* ── Such-Lupe in der Nav (Link zu /suche/) ─────────────────
   Optisch identisch zum #authButton — nur runder Icon-Button. */
.lp-nav__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(212, 160, 23, 0.45);
  background: rgba(10, 8, 4, 0.5);
  backdrop-filter: blur(6px);
  color: rgba(212, 160, 23, 0.75);
  text-decoration: none;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.lp-nav__search:hover,
.lp-nav__search:focus-visible {
  color: #ffe680;
  background: rgba(212, 160, 23, 0.10);
  border-color: rgba(212, 160, 23, 0.7);
  outline: none;
}
.lp-nav__search svg { font-size: 1rem; }