/* Suche, Seitenmenü und Anmeldung in der Kopfzeile.
 *
 * Eigene Datei, damit ein erneuter Scrape von dronivo.css sie nicht
 * überschreibt — dieselbe Trennung wie bei navbar.css und frontier.css.
 */

.nav-tools {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 1.5rem;
}

.nav-tool {
  /* 44px: dieselbe Mindestgröße wie jedes andere Ziel auf dieser Seite. Bei
     Symbolen ohne Beschriftung ist sie besonders wichtig — es gibt kein Wort
     daneben, das den Fehlgriff auffängt. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.nav-tool svg {
  width: 20px;
  height: 20px;
  display: block;
}

.nav-tool:hover,
.nav-tool:focus-visible {
  color: var(--_primitives---colors--brand-yellow, #c4b798);
  background-color: rgba(255, 255, 255, 0.07);
}

.nav-tool:focus-visible {
  outline: 2px solid var(--_primitives---colors--brand-yellow, #c4b798);
  outline-offset: 2px;
}

/* --- Overlay --------------------------------------------------------------- */

/* Nur noch die Suche. Das Seitenmenue teilte sich diese Flaeche; seine drei
   Punkte stehen inzwischen als Dropdown "Company" in der Leiste selbst, also
   sind `.nav-panel*` und die geteilte Schreibweise hier weg. */
.nav-search {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(4, 4, 4, 0.72);
  backdrop-filter: blur(3px);
}

.nav-search[hidden] {
  display: none;
}

/* --- Suche ---------------------------------------------------------------- */

.nav-search__sheet {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(44rem, 92vw);
  margin-top: 6rem;
  padding: 1.25rem;
  background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 2px;
}

.nav-search__field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.55);
}

.nav-search__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.nav-search__input {
  flex: 1;
  border: 0;
  background: none;
  color: #fff;
  font-family: inherit;
  font-size: 1.125rem;
  outline: none;
}

.nav-search__input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.nav-search__results {
  max-height: min(52vh, 26rem);
  margin: 0.75rem 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.nav-search__results a {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.55rem 0.5rem;
  border-radius: 2px;
  color: #fff;
  text-decoration: none;
}

.nav-search__results a:hover,
.nav-search__results a:focus-visible,
.nav-search__results li.is-active a {
  background: rgba(255, 255, 255, 0.08);
}

.nav-search__results .r-path {
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--fr-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-search__empty,
.nav-search__hint {
  margin: 0.9rem 0 0;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--fr-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 991px) {
  /* Im Burger-Menü sitzen die Symbole in der aufgeklappten Spalte, nicht am
     rechten Rand — dort wäre neben dem Burger selbst kein Platz. */
  .nav-tools {
    margin: 1rem 0 0;
    gap: 0.5rem;
  }

  .nav-search__sheet {
    margin-top: 4.5rem;
    padding: 1rem;
  }
}