/* Thomas Nostalgie & Raritaeten - Suche.
   Feld im Kopf (.suche, siehe app/templates/partials/suche-form.php und
   public/assets/js/suche.js) und die Ergebnisseite /?s=... (.suche-seite,
   siehe app/templates/suche.php). Nur Token aus site.css :root, keine
   neue Farbe - Vorgabe aus Werkzeuge/DESIGN.md. */

/* ---------------------------------------------------------------------
 * Feld im Kopf
 * --------------------------------------------------------------------- */
.suche { position: relative; }
.suche__feld { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }

.suche__knopf {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px;
  background: transparent; border: 0; border-radius: var(--radius-pill);
  color: var(--ink);
}
.suche__knopf:hover, .suche__knopf:focus-visible { color: var(--amber-text); }
.suche__knopf:active { transform: translateY(1px); }

.suche__eingabe {
  flex: 1 1 auto; min-width: 6rem;
  padding: .5rem var(--space-2);
  border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink); font-size: .92rem;
}
.suche__eingabe::placeholder { color: var(--ink-soft); }
/* Browser-eigenes Kreuz im Suchfeld raus: das Feld bekommt spaeter ein
   eigenes, einheitliches Bedienelement, kein zweites von jedem Browser anders. */
.suche__eingabe::-webkit-search-cancel-button,
.suche__eingabe::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* Mit JavaScript ist das Feld in Ruhe nur der Knopf (44x44, wie in
   Werkzeuge/DESIGN.md 5.1 vorgesehen); suche.js oeffnet es bei Klick oder
   Fokus. Ohne JavaScript bleibt es ein ganz normales, immer sichtbares
   Eingabefeld - die Suche funktioniert dann genauso, nur ohne Vorschlag. */
.js .suche__eingabe {
  flex: 0 0 auto; width: 0; min-width: 0; padding: 0;
  border-bottom-color: transparent; opacity: 0; pointer-events: none;
}
.js .suche.suche--offen .suche__eingabe,
.js .suche:focus-within .suche__eingabe {
  width: 14rem; min-width: 0; padding: .5rem var(--space-2);
  border-bottom-color: var(--line); opacity: 1; pointer-events: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .js .suche__eingabe {
    transition: width var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out),
                padding var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  }
}

/* ---------------------------------------------------------------------
 * Vorschlag-Dropdown
 * --------------------------------------------------------------------- */
.suche__ergebnisse {
  position: absolute; top: calc(100% + var(--space-2)); right: 0;
  width: min(94vw, 360px); max-height: 70vh; overflow-y: auto;
  background: var(--card); border: var(--rule); box-shadow: var(--shadow-float);
  padding: var(--space-2) 0; z-index: 60;
}
.suche__ergebnisse[hidden] { display: none; }

.suche__gruppe + .suche__gruppe { border-top: var(--rule); margin-top: var(--space-2); padding-top: var(--space-2); }
.suche__gruppentitel {
  margin: 0; padding: var(--space-1) var(--space-4);
  font-family: var(--font-body); font-weight: 600; font-size: .7rem;
  letter-spacing: var(--sperr); text-transform: uppercase; color: var(--ink-soft);
}

.suche__treffer {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--ink); text-decoration: none;
}
.suche__treffer:hover, .suche__treffer:focus-visible, .suche__treffer.is-active { background: var(--paper-deep); }
.suche__treffer:focus-visible { outline-offset: -2px; }

.suche__treffer-bild {
  flex-shrink: 0; display: block; width: 2.75rem; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--paper-deep);
}
.suche__treffer-bild img { width: 100%; height: 100%; object-fit: cover; }
.suche__treffer--verkauft .suche__treffer-bild img { filter: saturate(.65) brightness(.96); }

.suche__treffer-text { flex: 1 1 auto; min-width: 0; }
.suche__treffer-name {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.25; color: var(--ink);
}
/* Amber-Haarlinie statt Flaeche: passt zur Regel "kein Amber als Flaeche" (DESIGN.md 8) */
.suche__marker { background: none; color: var(--amber-text); font-weight: 600; border-bottom: 1px solid var(--amber); }
.suche__treffer-kategorie {
  display: block; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .7rem; letter-spacing: var(--sperr); text-transform: uppercase; color: var(--ink-soft);
}

.suche__treffer-preis { flex-shrink: 0; font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.suche__treffer--verkauft .suche__treffer-preis { color: var(--ink-soft); text-decoration: line-through; }
.suche__treffer-verkauft {
  flex-shrink: 0; padding: .3rem .5rem;
  background: var(--ink); color: var(--paper);
  font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}

.suche__kategorie {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  color: var(--ink); text-decoration: none;
}
.suche__kategorie:hover, .suche__kategorie:focus-visible, .suche__kategorie.is-active { background: var(--paper-deep); }
.suche__kategorie:focus-visible { outline-offset: -2px; }
.suche__kategorie-anzahl { flex-shrink: 0; font-family: var(--font-body); font-weight: 400; font-size: .78rem; color: var(--ink-soft); }

.suche__alle {
  display: block; width: 100%; margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4); border: 0; border-top: var(--rule);
  background: transparent; color: var(--amber-text); font: inherit;
  font-weight: 600; font-size: .84rem; text-align: center; cursor: pointer;
}
.suche__alle:hover, .suche__alle:focus-visible, .suche__alle.is-active { background: var(--paper-deep); }
.suche__alle:focus-visible { outline-offset: -2px; }

.suche__leer { margin: 0; padding: var(--space-4); color: var(--ink-soft); text-align: center; }

/* ---------------------------------------------------------------------
 * Handy (< 900 px): die Lupe oeffnet das Feld als Leiste ueber volle Breite
 * --------------------------------------------------------------------- */
@media (max-width: 899.98px) {
  .js .suche.suche--offen {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    background: var(--paper); border-bottom: var(--rule); box-shadow: var(--shadow-float);
    padding: var(--space-3) var(--gutter); z-index: 55;
  }
  .js .suche.suche--offen .suche__feld { width: 100%; }
  .js .suche.suche--offen .suche__eingabe { width: 100%; }
  .js .suche.suche--offen .suche__ergebnisse {
    position: static; width: 100%; margin-top: var(--space-2);
    box-shadow: none; max-height: calc(100svh - var(--header-h) - 6rem);
  }
}

/* ---------------------------------------------------------------------
 * Ergebnisseite /?s=...
 * --------------------------------------------------------------------- */
.suche-seite__anzahl { max-width: var(--measure); color: var(--ink-soft); font-size: 1.06em; margin: var(--space-4) 0 0; }
.suche-seite__leer {
  max-width: var(--measure); color: var(--ink-soft);
  padding: var(--space-8) 0;
}
.suche-seite__leer .btn { margin-top: var(--space-4); margin-right: var(--space-3); }