/*
 * Volltextsuche: Header-Lupe + Overlay-Drawer.
 *
 * Schlank (Nutzervorgabe): im Header nur ein Lupen-Icon; der Klick öffnet einen
 * Such-Drawer von oben mit Live-Vorschlägen, gruppiert nach Produkte /
 * Kategorien / Marken / Branchen. Kein Framework, tastaturbedienbar.
 */

/* --- Lupe im Header --------------------------------------------------- */
.zw-suche {
  display: inline-flex;
  align-items: center;
}
.zw-suche__lupe {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: none;
  border: 0;
  padding: .35rem .5rem;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  border-radius: 6px;
}
.zw-suche__lupe:hover,
.zw-suche__lupe:focus-visible {
  color: #1f5f8b;
  outline: none;
}
.zw-suche__lupe svg {
  width: 20px;
  height: 20px;
  display: block;
}
.zw-suche__lupe-text {
  font-size: .95rem;
}
@media (max-width: 640px) {
  .zw-suche__lupe-text { display: none; } /* mobil nur das Icon */
}

/* --- Overlay + Drawer ------------------------------------------------- */
.zw-suche__overlay[hidden] { display: none; }
.zw-suche__overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 24, 28, .45);
  display: block;
}
.zw-suche__drawer {
  background: #fff;
  color: #2b2f36;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  border-bottom: 1px solid #e6e2d8;
  animation: zw-suche-slide .18s ease-out;
}
@keyframes zw-suche-slide {
  from { transform: translateY(-14px); opacity: .6; }
  to   { transform: translateY(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .zw-suche__drawer { animation: none; }
}

.zw-suche__kopf {
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
}
.zw-suche__eingang {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}
.zw-suche__eingang svg {
  position: absolute;
  left: .75rem;
  width: 20px;
  height: 20px;
  color: #6b7178;
  pointer-events: none;
}
.zw-suche__feld {
  width: 100%;
  font-size: 1.15rem;
  padding: .7rem .9rem .7rem 2.6rem;
  border: 1px solid #cfd4da;
  border-radius: 8px;
  color: #2b2f36;
  background: #fff;
}
.zw-suche__feld:focus {
  outline: none;
  border-color: #1f5f8b;
  box-shadow: 0 0 0 3px rgba(31, 95, 139, .15);
}
.zw-suche__schliessen {
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: #6b7178;
  cursor: pointer;
  padding: .3rem .5rem;
  border-radius: 6px;
}
.zw-suche__schliessen:hover,
.zw-suche__schliessen:focus-visible { color: #2b2f36; outline: none; }

/* --- Ergebnisse ------------------------------------------------------- */
.zw-suche__body {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.25rem 1.25rem;
}
.zw-suche__hinweis {
  color: #6b7178;
  padding: .5rem 0 1rem;
  font-size: .95rem;
}
.zw-suche__gruppe { margin-bottom: 1.1rem; }
.zw-suche__gruppe-titel {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #1f5f8b;
  font-weight: 700;
  margin: .2rem 0 .5rem;
}
.zw-suche__treffer {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .5rem;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.zw-suche__treffer:hover,
.zw-suche__treffer.is-aktiv {
  background: #f3f0e9;
  outline: none;
}
.zw-suche__treffer-bild {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  object-fit: cover;
  border-radius: 6px;
  background: #f3f0e9;
}
.zw-suche__treffer-text { min-width: 0; }
.zw-suche__treffer-titel {
  font-size: 1rem;
  color: #2b2f36;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zw-suche__treffer-preis {
  font-size: .9rem;
  color: #6b7178;
}
/* Kategorien/Marken/Branchen: kompakter, ohne Bildspalte */
.zw-suche__treffer--text { padding: .45rem .5rem; }

.zw-suche__weiter {
  display: inline-block;
  margin-top: .4rem;
  font-weight: 600;
  color: #1f5f8b;
  text-decoration: none;
}
.zw-suche__weiter:hover { text-decoration: underline; }

/* Screenreader-only */
.zw-suche__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}