/* ============================================================
   LUKON — Suche: Lupe im Header + Overlay
   Eigene Datei, damit die Suche ein abgegrenztes Modul bleibt (wie
   core-cube.css). Nutzt ausschliesslich die Tokens aus style.css.

   z-index-Ordnung der Seite: .site-header 50 · .lm-nav 60 · Suche 70.
   Die Suche liegt bewusst ueber dem Menue: sie ist auch aus dem
   geoeffneten Menue heraus erreichbar.
   ============================================================ */

/* ---------- Lupe im Header ----------
   Uebernimmt Groesse, Rahmen, Radius, Hover und Fokusring exakt von
   .nav-burger — die beiden stehen nebeneinander und muessen als Paar
   lesen, nicht als zwei Entwuerfe. */
.nav-search {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.nav-search:hover {
  border-color: var(--green-mid);
  background: var(--mint);
}

.nav-search:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 2px;
}

/* Feste Kantenlaenge am SVG: ohne sie bestimmt der Inhalt die Groesse und
   der Header bekaeme beim Laden einen Layout-Shift. */
.nav-search svg {
  width: 19px;
  height: 19px;
  display: block;
}

/* ---------- Overlay ---------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  padding: clamp(1rem, 8vh, 6rem) var(--space-2) var(--space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #071f1bd9;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.search-overlay[data-open] { display: block; }

.search-panel {
  max-width: 42rem;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  animation: search-auf 0.22s cubic-bezier(0.2, 0.75, 0.3, 1) both;
}

@keyframes search-auf {
  from { opacity: 0; transform: translateY(-10px); }
}

/* ---------- Eingabezeile ---------- */
.search-feld {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.search-feld > svg {
  width: 20px;
  height: 20px;
  color: var(--green-ink);
  flex: none;
}

.search-input {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  font-family: var(--font);
  font-size: 1.06rem;
  color: var(--ink);
}

.search-input::placeholder { color: var(--text-dim); }
.search-input:focus { outline: none; }   /* Fokus liegt sichtbar auf dem Panel */

/* Chromes eigenes Loesch-X bei type="search" abschalten: es stand direkt
   neben dem ESC-Knopf und liess die Zeile rechts gedraengt wirken (so von
   einem Fremd-Gutachter auf 390px bemerkt). Zwei Schliess-/Loeschsymbole
   nebeneinander sind ausserdem doppelt gemeint. */
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Dezenter Scrollbalken: der native war auf schmalen Schirmen praesenter
   als der Inhalt. Firefox nutzt scrollbar-*, WebKit die Pseudo-Elemente. */
.search-list {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.search-list::-webkit-scrollbar { width: 8px; }
.search-list::-webkit-scrollbar-track { background: transparent; }
.search-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.search-list::-webkit-scrollbar-thumb:hover { background: var(--green-mid); }

/* Schliessen: gleiche Sprache wie .lm-close im Menue */
.search-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.search-close:hover { border-color: var(--green-mid); color: var(--green-ink); }
.search-close:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }

/* ---------- Ergebnisse ---------- */
.search-status {
  padding: 0.55rem var(--space-2);
  border-bottom: 1px solid var(--border);
  background: var(--bg-tint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.search-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: min(58vh, 30rem);
  overflow-y: auto;
}

.search-list li + li { border-top: 1px solid var(--border); }

.search-list a {
  display: block;
  /* Mehr Luft als zunaechst (0.85rem): beide Fremd-Gutachter bemaengelten,
     dass die drei Zeilen eines Treffers nicht als Einheit lesen, weil der
     Abstand INNERHALB eines Treffers fast so gross war wie der ZWISCHEN
     zweien. Der Trefferabstand muss deutlich groesser sein als der
     Zeilenabstand, sonst zerfaellt die Liste beim Scannen. */
  padding: 1.05rem var(--space-2);
  text-decoration: none;
  color: inherit;
}

.search-list a:hover,
.search-list a[data-aktiv] { background: var(--bg-tint); }

.search-list a:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: -2px;
}

/* Zeile 1: wo der Treffer steht. Mono + Versalien = Label, wie ueberall
   auf der Seite (.eyebrow, .ref-label). */
/* Der Abstand nach unten ist der Hebel: 0.15rem liess Label und Titel
   verschmelzen. Mit 0.42rem gruppiert sich der Treffer sichtbar, ohne dass
   die Liste auseinanderfaellt. Schriftgroesse leicht angehoben (0.68 → 0.72),
   weil das Label bei starker Sperrung sonst zu schwach gegen die Ueberschrift
   steht. */
.search-wo {
  display: block;
  margin-bottom: 0.42rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-ink);
}

/* Zeile 2: die Ueberschrift des Abschnitts — die eigentliche Aussage,
   deshalb Display-Schrift und eng gesetzt (wie h3). */
.search-titel {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.search-snippet {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* Fundstelle: unterlegt statt farbig — Farbe allein waere fuer
   Farbfehlsichtige kein Signal. */
.search-snippet mark,
.search-titel mark {
  background: var(--lime);
  color: var(--green-ink);
  /* Padding fuer die Unterlegung, negatives Margin als Ausgleich: sonst
     schiebt das Padding folgende Satzzeichen weg und es liest sich
     "Hosting , Wartung" statt "Hosting, Wartung". */
  padding: 0.06em 0.14em;
  margin: 0 -0.14em;
  border-radius: 2px;
}

/* ---------- Kein Treffer ---------- */
.search-leer {
  padding: var(--space-3) var(--space-2);
  text-align: center;
}

.search-leer p {
  margin: 0 0 var(--space-2);
  color: var(--text-dim);
  font-size: 0.94rem;
}

.search-leer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: center;
}

.search-leer-links a {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--green-ink);
  transition: border-color 0.2s, background 0.2s;
}

.search-leer-links a:hover { border-color: var(--green-mid); background: var(--mint); }
.search-leer-links a:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }

/* ---------- Fusszeile mit Tastaturhinweisen ---------- */
.search-hilfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0.6rem var(--space-2);
  border-top: 1px solid var(--border);
  background: var(--bg-tint);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.search-hilfe kbd {
  padding: 0.1em 0.35em;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-card);
  font-family: inherit;
  font-size: 0.95em;
  color: var(--ink);
}

@media (max-width: 560px) {
  .search-hilfe { display: none; }   /* auf Touch ohne Nutzen */
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .search-panel { animation: none; }
  .nav-search, .search-close, .search-leer-links a { transition: none; }
}