/* Website-Suche hinter der Lupe im Kopf (js/suche.js, Daniel 02.11.2026).
   Eigene Datei statt Tailwind-Klassen: tailwind.built.css live auszutauschen
   waere ein Eingriff in alle Seiten, diese Datei betrifft nur die Suche.
   Das Feld klappt unter dem Kopf auf, die Box haengt an der festen <nav>. */

.hs-lupe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  color: #0A0A0A;
  transition: color .2s, background-color .2s;
}
.hs-lupe:hover,
.hs-lupe[aria-expanded="true"] { color: #0000FF; background: rgba(0, 0, 255, .06); }
.hs-lupe:focus-visible { outline: 2px solid #0000FF; outline-offset: 2px; }

/* Die Lupe braucht 56 px (40 Knopf, 16 Abstand). Bei 1280 px Breite liess das
   „Über uns“ im Hauptmenue umbrechen (gemessen 02.11.2026: ohne Lupe passt die
   Zeile ab 1235 px, mit Lupe erst ab 1291 px). In diesem Bereich holen sieben
   Pixel weniger zwischen den acht Menueabstaenden den Platz zurueck, die Grenze
   bleibt dort, wo sie vorher war. Darueber bleibt alles wie gebaut. */
@media (min-width: 1024px) and (max-width: 1299px) {
  nav.glass-nav div[role="navigation"] { column-gap: 33px; }
}

/* Unter 414 px ist die Kopfzeile schon ohne Lupe randvoll (Logo mit Claim,
   „Anfragen“, Menueknopf; gemessen 02.11.2026 bei 375 und 390 px). Dort steht
   die Suche nur im Mobilmenue, als Eintrag ueber „Anfragen“. */
@media (max-width: 413px) {
  .hs-lupe { display: none; }
}
.hs-menue {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  color: #0A0A0A;
}
.hs-menue:hover { color: #0000FF; }

.hs-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 16px 32px rgba(10, 10, 10, .08);
  padding: 16px 16px 20px;
}
.hs-box[hidden] { display: none; }
@media (min-width: 768px) { .hs-box { padding: 24px 80px 28px; } }

.hs-innen { max-width: 720px; margin: 0 auto; }

.hs-label {
  display: block;
  font-size: 13px;
  color: #454558;
  margin: 0 0 8px 4px;
}

/* 16 px oder mehr, sonst zoomt iOS Safari beim Antippen ins Feld. */
#hs-feld {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 17px;
  line-height: 1.4;
  padding: 12px 20px;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  background: #fff;
  color: #0A0A0A;
  -webkit-appearance: none;
  appearance: none;
}
#hs-feld:focus { outline: none; border-color: #0000FF; box-shadow: 0 0 0 3px rgba(0, 0, 255, .15); }

#hs-treffer {
  margin-top: 10px;
  max-height: min(60vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#hs-treffer[hidden] { display: none; }
#hs-treffer a[role=option] {
  display: block;
  padding: 10px 16px;
  border-radius: 12px;
  text-decoration: none;
  color: #0A0A0A;
}
#hs-treffer a[role=option]:hover,
#hs-treffer a.ist-aktiv { background: #F5F5F7; }
.hs-name { display: block; font-weight: 500; overflow-wrap: anywhere; }
.hs-pfad {
  display: block;
  font-size: 13px;
  color: #6B7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hs-leer { margin: 4px 16px 6px; color: #454558; }
.hs-frage {
  display: inline-block;
  margin: 0 16px;
  color: #0000FF;
  text-decoration: underline;
  text-underline-offset: 3px;
}