/* Kopie aus 01_bestand/website-astro/src/site/navigation/ui/kopf-suche.css (Stand 07.10.2026). Nicht von Hand angleichen, neu kopieren. */
/* Suche im Kopf (TY-1, ausgebaut in SU-1; KopfSuche.tsx). Schwebende Fläche
   unter der Kopfleiste, darunter ein Schleier über der Seite. Die Fläche
   liest nur --bm-bg/--bm-text/--bm-linie …: Kehrt die Kopfleiste die Tokens
   um (kopf.css, dunkle Leiste), steht die Suche auf Dunkel, sonst auf Hell.
   Hervorhebung und Auswahl mischen das Signal in den jeweiligen Grund, die
   Schrift bleibt --bm-text. Nur Tokens. */
.bm-neu.bm-suche {
  position: fixed;
  inset: var(--bm-kopf-h) 0 0 0;
  z-index: var(--bm-z-menue);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0.75rem var(--bm-rand) var(--bm-rand);
  background: var(--bm-schleier-mittel);
  font-family: var(--bm-font);
}
.bm-suche__flaeche {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 46rem;
  max-height: 100%;
  border: 1px solid var(--bm-linie);
  border-radius: var(--bm-radius-mittel);
  background: var(--bm-bg);
  color: var(--bm-text);
  box-shadow: var(--bm-schatten-schwebend);
  overflow: hidden;
  animation: bm-suche-ein var(--bm-dauer) var(--bm-ease) both;
}
@keyframes bm-suche-ein { from { opacity: 0; translate: 0 -0.5rem; } }

/* ── Feld ─────────────────────────────────────────────────────────────── */
.bm-suche__zeile {
  display: flex;
  align-items: center;
  flex: none;
  gap: 0.75rem;
  padding: 0 0.5rem 0 1.25rem;
  /* Die Linie ist die Grenze des randlosen Felds (WCAG 1.4.11, mindestens
     3:1 auch ohne Fokus): --bm-linie-feld, auf dunkler Leiste über die
     Token-Umkehr in kopf.css --bm-linie-invers-stark (P3-A, H17). */
  border-bottom: 1px solid var(--bm-linie-feld);
}
.bm-suche__zeile:focus-within { border-bottom-color: var(--bm-signal-kontur); }
.bm-suche__lupe { flex: none; color: var(--bm-text-leise); }
.bm-suche__eingabe { position: relative; flex: 1; min-width: 0; }
.bm-neu .bm-suche__feld,
.bm-suche__blass {
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--bm-font-titel);
  font-size: var(--bm-t-h3);
  font-weight: var(--bm-g-normal);
  font-synthesis: none;
  line-height: var(--bm-zh-titel);
  letter-spacing: normal;
}
.bm-neu .bm-suche__feld {
  position: relative;
  display: block;
  background: transparent;
  color: var(--bm-text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.bm-neu .bm-suche__feld::placeholder { color: var(--bm-text-leise); opacity: 1; }
.bm-neu .bm-suche__feld::-webkit-search-cancel-button,
.bm-neu .bm-suche__feld::-webkit-search-decoration { display: none; -webkit-appearance: none; }
/* Blasse Vervollständigung hinter dem Getippten (liegt unter dem Feld). */
.bm-suche__blass {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: pre;
  color: var(--bm-text-leise);
  pointer-events: none;
}
.bm-suche__getippt { visibility: hidden; }
.bm-suche__zu {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--bm-text-leise);
  cursor: pointer;
}
.bm-suche__zu:hover { color: var(--bm-text); }
/* Fokusrahmen: --bm-fokus kommt mit dem Ton der Leiste (kopf.css) */
.bm-suche__zu:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: -4px; }

/* ── Liste ────────────────────────────────────────────────────────────── */
.bm-suche__liste {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.5rem 0 0.75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bm-suche__liste[hidden] { display: none; }
.bm-suche__gruppe + .bm-suche__gruppe { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--bm-linie-zart); }
.bm-suche__gruppentitel {
  margin: 0;
  padding: 0.5rem 1.25rem 0.25rem;
  font-size: var(--bm-t-meta);
  font-weight: var(--bm-g-mittel);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-knopf);
  color: var(--bm-text-leise);
}
.bm-suche__treffer {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-height: 44px;
  box-sizing: border-box;
  justify-content: center;
  padding: 0.5rem 1.25rem 0.5rem calc(1.25rem - 2px);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--bm-dauer-kurz) var(--bm-ease), background-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-suche__treffer.ist-aktiv {
  border-left-color: var(--bm-signal-kontur);
  background: color-mix(in srgb, var(--bm-text) 7%, transparent);
}
.bm-suche__treffer--vorschlag { flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.75rem; }
.bm-suche__zeichen { flex: none; color: var(--bm-text-leise); }
.bm-suche__titel {
  font-size: var(--bm-t-nav);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-knopf);
  overflow-wrap: anywhere;
}
.bm-suche__ort,
.bm-suche__auszug {
  font-size: var(--bm-t-meta);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text-leise);
  overflow-wrap: anywhere;
}
.bm-neu .bm-suche__marke {
  padding: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--bm-signal) 32%, transparent);
  color: inherit;
  font: inherit;
}
.bm-suche__titel .bm-suche__marke { color: var(--bm-text); }
/* Verweis auf die Ergebnisseite /suche (N-04) */
.bm-suche__alle {
  display: block;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--bm-linie-zart);
  font-size: var(--bm-t-klein);
  font-weight: var(--bm-g-mittel);
  color: var(--bm-text);
  text-decoration: underline;
  text-decoration-color: var(--bm-signal-kontur);
  text-underline-offset: 0.3em;
}
.bm-suche__alle:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: -4px; }
.bm-suche__leer {
  margin: 0;
  padding: 1.25rem;
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text-leise);
  overflow-wrap: anywhere;
}

/* Mobil über die ganze Breite, bündig unter der Kopfleiste. */
@media (max-width: 767.98px) {
  .bm-neu.bm-suche { padding: 0; }
  .bm-suche__flaeche { max-width: none; border-width: 0 0 1px; border-radius: 0; }
  .bm-suche__zeile { padding-left: var(--bm-rand); padding-right: calc(var(--bm-rand) - 12px); }
  .bm-suche__gruppentitel { padding-inline: var(--bm-rand); }
  .bm-suche__treffer { padding-inline: calc(var(--bm-rand) - 2px) var(--bm-rand); }
  .bm-suche__leer, .bm-suche__alle { padding-inline: var(--bm-rand); }
}

@media (prefers-reduced-motion: reduce) {
  .bm-suche__flaeche { animation: none; }
  .bm-suche__treffer { transition: none; }
}

/* Zustände ohne Eingabe: hidden gilt auch gegen die display-Regeln oben (im Original wird bedingt gerendert). */
.bm-suche__alle[hidden], .bm-suche__leer[hidden] { display: none; }

/* Suchfenster mittig im Bildschirm, waagerecht und senkrecht (Alexander 13.10.2026). */
.bm-neu.bm-suche { inset: 0; align-items: center; padding: var(--bm-rand); }
.bm-suche__flaeche { max-height: min(80vh, 44rem); }
@media (max-width: 767.98px) {
  .bm-neu.bm-suche { padding: 1rem; }
  .bm-suche__flaeche { border-width: 1px; border-radius: var(--bm-radius-mittel); max-height: 80vh; }
}