/* Seite: Suche (search_page.dart) – Suchfeld oben, Zeilen wie die Chat-Liste, ohne Karten.
   Personen-Zeile und Folgen-Knopf (follow.js) liegen in page-profil.css. */

@media (min-width: 768px) {
  .page--suche { padding-top: 12px; }
}

/* ---------- Suchfeld: Rand 16, oben 10, unten 12 ---------- */
.suche-bar { padding: 10px var(--gutter) 12px; }
.suche-bar__field {
  width: 100%;
  height: 46px;
  text-align: left;
}
.suche-bar__field > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.suche-bar__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}
.suche-bar__input::placeholder { color: var(--text-2); font-weight: 500; }
/* Eigenes Leeren-Kreuz statt des Browser-Kreuzes */
.suche-bar__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.suche-bar__field:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.suche-bar__clear {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  margin-right: -8px;
  border-radius: 50%;
  color: var(--text-2);
}
.suche-bar__clear[hidden] { display: none; }
.suche-bar__clear .icon { width: 20px; height: 20px; }

/* ---------- Abschnitt „Vorschläge für dich“ ---------- */
.suche-section[hidden],
.suche-results[hidden] { display: none; }
.suche-section__title {
  padding: 8px var(--gutter) 6px;
  font-size: 16px;
  font-weight: 800;
}
.suche-list { padding-bottom: 6px; }
.suche-foot:empty { display: none; }
.suche-sentinel { height: 1px; }
.suche-results { padding-top: 2px; }
.suche-results .empty,
.suche-foot .empty { padding-top: 24px; }
.suche-results .empty__art,
.suche-foot .empty__art { width: min(200px, 60%); }

/* Platzhalter-Knopf rechts (ohne Anmeldung) */
.suche-sk-btn { height: 34px; border-radius: 12px; }

/* Ausblenden-Kreuz neben „Folgen“: ruhiger Kreis ohne Fläche */
.suche-dismiss {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--text-2);
}
.suche-dismiss .icon { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .suche-dismiss:hover { color: var(--text); }
}

/* ---------- Fehler mit „Erneut versuchen“ ---------- */
.suche-failure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px var(--gutter);
  text-align: center;
}
.suche-failure__title { font-size: 15px; font-weight: 800; }
.suche-failure__text { font-size: 13.5px; color: var(--text-2); }
.suche-failure .btn { margin-top: 8px; gap: 6px; }
.suche-failure .btn .icon { width: 18px; height: 18px; }

/* ---------- Hinweis ohne Anmeldung ---------- */
.suche-teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 18px var(--gutter) 24px;
  text-align: center;
}
.suche-teaser__text { max-width: 320px; font-size: 14px; color: var(--text-2); }

/* ---------- Sheet „Account ausblenden“ ---------- */
.suche-dismiss-sheet { display: grid; gap: 12px; padding: 12px var(--gutter) 18px; }
.suche-dismiss-sheet__text { font-size: 14.5px; line-height: 1.4; color: var(--text-2); }
.suche-reasons { display: grid; }
.suche-reason {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 2px;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}
.suche-bar__input:focus-visible { outline: none; }