/* ═════════════════════════════════════════════════════════════════════
   em-search-page.css — Suchergebnisseite /emsearch (Spec 2026-10-27 §7.4).
   Art-Direction "ruhig": Liste mit Bildspalte (Bild oder Kachel), Kicker, Titel, Ausschnitt, Meta.

   Farben NUR aus em-base-/Projekt-Tokens oder aus currentColor abgeleitet:
   kein Farbliteral, kein !important. Schriftgroesse am <h1> kommt aus der Klasse h3 des
   Markups; Gruppen- und Kartenueberschrift setzen seit UB-0d (stimmige Typografie-Hierarchie)
   ihre Groesse selbst, in rem (Waechter FE/src/searchPageCss.test.ts). Dunkle Projekt-Tokens wirken
   damit von selbst: Text erbt die Flaechenfarbe der Seite (Flaechenvertrag
   em-base), Linien und Flaechen sind Mischungen aus currentColor.
   Die Such-Tokens tragen dieselben Namen wie in em-search.css (--emp-search-*),
   gelten hier aber fuer .emp-sr und kommen ohne Literal-Rueckfall aus.
   :where() haelt die Spezifitaet bei 0: Projekt-CSS ueberschreibt jeden Wert.
   ═════════════════════════════════════════════════════════════════════ */

:where(.emp-sr) {
  --emp-search-muted: var(--text-muted, currentColor);
  --emp-search-divider: color-mix(in srgb, currentColor 14%, transparent);
  --emp-search-border: color-mix(in srgb, currentColor 28%, transparent);
  --emp-search-surface-subtle: color-mix(in srgb, currentColor 5%, transparent);
  --emp-search-accent: var(--link-color, var(--primary-base, currentColor));
  --emp-search-mark: color-mix(in srgb, var(--primary-base, currentColor) 28%, transparent);
  --emp-search-radius: var(--radius-md, 8px);
  --emp-search-thumb-radius: 10px;
  --emp-search-thumb: 96px;
  --emp-search-gap: 1rem;
  --emp-search-target: 44px;
  --emp-sr-cols: 3;
}
:where(.emp-sr[data-grid-columns="2"]) { --emp-sr-cols: 2; }
:where(.emp-sr[data-grid-columns="4"]) { --emp-sr-cols: 4; }

.emp-sr {
  min-width: 0;
  max-width: 56rem;
  padding-block: 0.5rem 3rem;
}

/* ─── Ergebnisfeld ─────────────────────────────────────────────────── */
.emp-sr__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
  margin-block-end: 1.5rem;
}
.emp-sr__input,
.emp-sr__scope {
  min-height: var(--emp-search-target);
  padding: 0.5rem 0.875rem;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--emp-search-border);
  border-radius: var(--emp-search-radius);
}
.emp-sr__input {
  flex: 1 1 16rem;
  min-width: 0;
}
.emp-sr__scope {
  flex: 0 1 auto;
  max-width: 100%;
}
.emp-sr__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--emp-search-target);
  min-width: var(--emp-search-target);
  padding: 0 1rem;
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: var(--emp-search-surface-subtle);
  border: 1px solid var(--emp-search-border);
  border-radius: var(--emp-search-radius);
  cursor: pointer;
}
.emp-sr__icon { flex: 0 0 auto; }
/* em-base setzt .mypage input/button/a/[tabindex]:focus-visible (0,2,1 bzw. 0,3,0): hier
   (0,3,0), damit der Rahmen in der Akzentfarbe der Seite gilt, nicht in --contrast-base. */
.emp-sr .emp-sr__input:focus-visible,
.emp-sr .emp-sr__scope:focus-visible,
.emp-sr .emp-sr__submit:focus-visible,
.emp-sr .emp-sr__more:focus-visible,
.emp-sr .emp-sr__tab:focus-visible {
  outline: 2px solid var(--emp-search-accent);
  outline-offset: 2px;
}

/* ─── Kopf: Zahl, Umfang, Hinweise ─────────────────────────────────── */
/* Das <h1> bekommt den Fokus nur als Sprungziel (tabindex=-1, kein Bedienelement):
   kein Fokusrahmen, sonst stuende nach jedem Laden ein Kasten um die Trefferzahl. */
/* Ueberschrift der Seite (UB-0d): Tag h1, Groesse H3 (Klasse h3), Gewicht der Projekt-H1, keine
   Versalien; Zahl und Suchbegriff fett. .mypage .h3 (em-base, 0,2,0) setzt Gewicht, Versalien,
   Laufweite und Rand: 0,2,1 noetig. */
.emp-sr h1.emp-sr__title {
  font-weight: var(--h1-font-weight, 300);
  text-transform: none;
  letter-spacing: -0.005em;
  margin-block-end: 0.15em;
}
.emp-sr h1.emp-sr__title .emp-sr__n,
.emp-sr h1.emp-sr__title .emp-sr__q {
  font-weight: var(--h3-font-weight, 600);
}
/* .mypage [tabindex]:focus-visible (em-base, 0,3,0) zeichnete trotzdem einen Rahmen: 0,3,1. */
.emp-sr h1.emp-sr__title:focus,
.emp-sr h1.emp-sr__title:focus-visible { outline: none; }
.emp-sr p.emp-sr__notice {
  margin: 0 0 0.5rem;
  color: var(--emp-search-muted);
}
/* "Gesucht in: ..." (UB-0d): klein, leicht, gedaempft, eng unter der Ueberschrift. */
.emp-sr p.emp-sr__scope-line {
  margin: 0 0 1.75rem;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--emp-search-muted);
}
.emp-sr a.emp-sr__everywhere {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* Hinweise im Abschnitt (Ausfall, Fensterende; Teilplan A AB-2): zwischen Titel und Liste */
.emp-sr__section p.emp-sr__notice { margin: 0 0 0.75rem; }

/* ─── Reiter: Links mit aria-current, waagrecht scrollbar ohne Seitenueberlauf ── */
.emp-sr__tabs {
  display: flex;
  gap: 0.25rem;
  margin-block: 0 2rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--emp-search-divider);
}
.emp-sr__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--emp-search-target);
  padding: 0 0.875rem;
  white-space: nowrap;
  font-size: 1.05rem;
  font-weight: 400;
}
/* .mypage a (em-base, 0,1,1) unterstreicht und faerbt Links: 0,2,1 noetig. */
.emp-sr a.emp-sr__link {
  color: inherit;
  text-decoration: none;
}
/* Reiter (UB-0d): gedaempft; der aktive in voller Textfarbe, fett, mit 2-px-Linie in der Primaerfarbe
   (inset-Schatten, keine Randbreite, die Hoehe aendert). Kein negativer Rand ueber die Haarlinie: der
   Streifen scrollt (overflow-x) und schnitte die untere Pixelreihe der Linie ab (gemessen auf test). */
.emp-sr a.emp-sr__tab {
  color: var(--emp-search-muted);
  text-decoration: none;
}
.emp-sr a.emp-sr__tab[aria-current="page"] {
  font-weight: var(--h3-font-weight, 600);
  color: var(--h3-font-color, currentColor);
  box-shadow: inset 0 -2px 0 var(--primary-base, currentColor);
}
.emp-sr__count {
  margin-left: 0.25em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--emp-search-muted);
}

/* ─── Abschnitte und Karten ────────────────────────────────────────── */
.emp-sr__section { margin-block: 0 2.5rem; }
/* Gruppenueberschrift (UB-0d): kleine Versalien-Marke mit Haarlinie ueber die Restbreite. Das h2
   bleibt (Dokumentstruktur) und traegt keine Klasse h3; .mypage h2 (em-base, 0,1,1) setzt Groesse,
   Gewicht, Farbe, Rand: 0,2,1 noetig. */
.emp-sr h2.emp-sr__section-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emp-search-muted);
}
.emp-sr h2.emp-sr__section-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--emp-search-divider);
}
/* .mypage ol/ul (em-base, 0,1,1) setzt margin-left 1.75rem: Spezifitaet 0,2,0 noetig. */
.emp-sr__list { list-style: none; }
.emp-sr .emp-sr__list { margin: 0; padding: 0; }
.emp-sr__list--list > .emp-sr__item { padding-block: 1.25rem; }
.emp-sr__list--list > .emp-sr__item + .emp-sr__item {
  border-top: 1px solid var(--emp-search-divider);
}
.emp-sr__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--emp-search-gap);
  padding-block: 1.125rem;
}
/* Bildspalte: Bild ODER Kachel, fuer Seiten und Produkte gleich gross (96 px, mobil 64 px).
   .mypage img (em-base, 0,1,1) setzt width: 100%, max-width: 100%, height: auto: 0,2,0 noetig
   (ohne das war das Bild 868 px gross und die Textspalte 0 px breit). */
.emp-sr .emp-sr__img,
.emp-sr .emp-sr__tile {
  flex: 0 0 var(--emp-search-thumb);
  width: var(--emp-search-thumb);
  height: var(--emp-search-thumb);
  border-radius: var(--emp-search-thumb-radius);
  background: var(--emp-search-surface-subtle);
}
/* Seitenbilder (OG-Bild, quer) fuellen die Spalte; Produktfotos zeigen das ganze Produkt (im 4:3-Raster
   schnitt cover einen hochformatigen Wechselrichter oben und unten ab). */
.emp-sr .emp-sr__img { object-fit: cover; }
.emp-sr .emp-sr__card--catalog .emp-sr__img {
  object-fit: contain;
  background: transparent; /* sonst stehen graue Streifen neben dem weissen Produktfoto */
}
/* Kachel ohne Bild: dasselbe Symbol wie die Sofortsuche, gedaempft, in der Mitte. */
.emp-sr .emp-sr__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: var(--emp-search-muted);
  border: 1px solid var(--emp-search-divider);
}
.emp-sr .emp-sr__tile svg {
  width: calc(var(--emp-search-thumb) * 0.34);
  height: calc(var(--emp-search-thumb) * 0.34);
}
/* Textspalte: Kicker, Ueberschrift, Ausschnitt, Meta. Den Rhythmus setzt der Abstand
   dieses Koerpers (gap); die Raender der Ueberschrift und der Absaetze sind unten auf 0,
   sonst entschiede em-base (h3: 0 0 0.5em) und der Abstand Titel->Pfad waere groesser
   als Pfad->Ausschnitt. Seit UB-0d setzen Kicker (unten), Ausschnitt (oben) und Meta ihre Abstaende
   selbst; der Koerper hat kein gap mehr. */
.emp-sr__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Ueberschrift der Karte (UB-0d): 1.3rem, Gewicht der H3, Zeilenhoehe 1.3 -- bewusst kleiner als die
   Seitenueberschrift (H3-Groesse), Raender 0, hoechstens zwei Zeilen, ausgewogener Umbruch.
   .mypage h3 (0,1,1) und .mypage .h5 (0,2,0) setzen margin/overflow-wrap/hyphens/Groesse: 0,3,1 noetig. */
.emp-sr .emp-sr__body h3.emp-sr__card-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: var(--h3-font-weight, 600);
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* Kicker (UB-0d): kleine gedaempfte Versalien-Marke ueber der Ueberschrift (em-base-Absatzstil
   caption-sub). .mypage p.caption-sub und p:last-child (0,2,1) setzen margin/Groesse: 0,3,1 noetig. */
.emp-sr .emp-sr__body p.emp-sr__kicker {
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emp-search-muted);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* Gestreckter Link: die ganze Karte ist klickbar, es gibt genau einen Link. */
.emp-sr__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.emp-sr a.emp-sr__link:hover,
.emp-sr a.emp-sr__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* .mypage a:focus-visible (em-base, 0,2,1): sonst stuenden Link- UND Kartenrahmen. */
.emp-sr a.emp-sr__link:focus-visible { outline: none; }
.emp-sr__card:has(.emp-sr__link:focus-visible) {
  outline: 2px solid var(--emp-search-accent);
  outline-offset: 2px;
  border-radius: var(--emp-search-radius);
}
/* Ohne :has() (Firefox vor 121) bliebe kein Fokusrahmen: der Link behaelt seinen eigenen. */
@supports not selector(:has(*)) {
  .emp-sr a.emp-sr__link:focus-visible {
    outline: 2px solid var(--emp-search-accent);
    outline-offset: 2px;
  }
}
/* Ausschnitt: Fliesstextgroesse, hoechstens drei Zeilen, auf breiten Spalten nicht laenger als
   ~70 Zeichen (Lesbarkeit). .mypage p (0,1,1) und p:last-child (0,2,1) setzen margin: 0,3,1. */
.emp-sr .emp-sr__body p.emp-sr__snippet {
  margin: 0.35rem 0 0;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 70ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.emp-sr__snippet mark {
  color: inherit;
  background: var(--emp-search-mark);
  border-radius: 3px;
  padding: 0 1px;
}
.emp-sr .emp-sr__body p.emp-sr__meta {
  margin: 0.375rem 0 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Raster (je Art waehlbar): Kacheln 2/3/4 Spalten, Bild 4:3 */
.emp-sr__list--grid {
  display: grid;
  grid-template-columns: repeat(var(--emp-sr-cols), minmax(0, 1fr));
  gap: 1.5rem;
}
.emp-sr__list--grid .emp-sr__card {
  flex-direction: column;
  gap: 0.75rem;
  padding-block: 0;
}
.emp-sr .emp-sr__list--grid .emp-sr__img,
.emp-sr .emp-sr__list--grid .emp-sr__tile {
  flex-basis: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
/* Schmale Kachelspalte (273 px bei 3 Spalten): zwei Zeilen kappten schon "Allgemeine Verkaufsbedingungen
   der Baur Elektro GmbH" -- im Raster hoechstens drei. */
.emp-sr .emp-sr__list--grid .emp-sr__body h3.emp-sr__card-title {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.emp-sr .emp-sr__list--grid .emp-sr__tile svg {
  width: 2.5rem;
  height: 2.5rem;
}

/* ─── Mehr laden, Hinweise, Ansage ─────────────────────────────────── */
.emp-sr__more {
  display: block;
  min-height: var(--emp-search-target);
  margin: 1.5rem auto 0;
  padding: 0 1.5rem;
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: transparent;
  border: 1px solid var(--emp-search-border);
  border-radius: var(--emp-search-radius);
  cursor: pointer;
}
.emp-sr__more[aria-busy="true"] { cursor: progress; }
.emp-sr__more-link,
.emp-sr__all-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--emp-search-target);
  margin-block-start: 1rem;
}
/* Beide Links bleiben unterstrichen (Plan K-19: nur Farbe erben, em-base-Unterstreichung bleibt). */
.emp-sr a.emp-sr__more-link,
.emp-sr a.emp-sr__all-link { color: inherit; }
.emp-sr p.emp-sr__note {
  margin: 0.75rem 0 0;
  text-align: center;
  color: var(--emp-search-muted);
}
/* .mypage p / p:last-child (em-base, 0,2,1) setzt margin: 0,3,1 noetig. */
.emp-sr p.emp-sr__live[aria-live] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .emp-sr__list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─── Mobil (<= 480 px): einspaltig, Bild 64 px, Knopf nur als Symbol ── */
@media (max-width: 480px) {
  :where(.emp-sr) { --emp-search-thumb: 64px; --emp-search-gap: 0.75rem; }
  .emp-sr__input { flex-basis: 0; }
  .emp-sr__scope { flex: 1 1 100%; }
  .emp-sr__submit { padding: 0; }
  .emp-sr__submit-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .emp-sr__list--grid { grid-template-columns: minmax(0, 1fr); }
  .emp-sr__more { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .emp-sr__tab,
  .emp-sr__more { transition: border-color 0.15s ease, background-color 0.15s ease; }
}