/* SORTIMENT (sortiment.js) - Bauer B.
   Umbau nach Felix' PDF (28.10.2026): Brotkrumen, Ueberschrift, Trefferzahl,
   Filter-Seitenleiste (Desktop) bzw. Filter-Schublade (Handy), Chips,
   Sortierung, Raster, Seitenzahlen (SPEC §7.2).
   Das Fundament legt hier nur den Stil seines Platzhalters an. */

/* REITERLEISTE (Felix 29.10.2026), Stil .kategorien aus styles.css.
   Startseite: der Umschalter Pokémon/Topps (sass in der alten Kopfzeile)
   vor den Reitern Einzelkarten/Slabs/Sealed. Sortimentsseiten: nur die
   Reiter, als Links ("das brauche ich nur fuer die Startseite"). */
/* Links verankert, direkt neben "Sortiment": Pokémon hat drei Reiter, Topps
   zwei - rechtsbuendig rutschte der Schalter beim Umschalten unter der Maus
   weg (Felix 29.10.2026: "dann verschiebt sich quasi die Leiste nach
   links ... passt dann die Mausposition nicht mehr"). */
.kategorie-leiste.mit-marken { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-start; gap: 10px; }
.kategorie-leiste[hidden] { display: none; }
.kategorien a.kat { text-decoration: none; }
@media (max-width: 640px) {
  .kategorie-leiste.mit-marken .kategorien { flex: 1 1 100%; }
  .marken-schalter .kat { height: 44px; }
}

/* KOPF DER SORTIMENTSSEITE, kompakt (Felix 29.10.2026: "das sieht jetzt von
   der Anordnung richtig schlecht aus ... soll alles irgendwie kompakter
   sein"): Ueberschrift mit Trefferzahl, darunter EINE Leiste - Reiter,
   Suche, Sortierung - mit Luft zum Raster. Alles 48 px hoch wie die Reiter. */
.sortiment-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 16px; }
.sortiment-kopf h1 { margin: 0; }
.sortiment-treffer { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.sortiment-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 28px; }
.sortiment-reiter { flex: 0 0 auto; }
.sortiment-suche { flex: 1 1 240px; min-width: 0; max-width: 440px; }
.sortiment-suche input, .sortiment-sort {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--field-border); border-radius: 10px;
  font: inherit; font-size: 14px; color: var(--text); background: #fff;
}
.sortiment-sort-feld { display: flex; margin-left: auto; }
.sortiment-sort { width: auto; padding-right: 10px; }
@media (max-width: 640px) {
  .sortiment-leiste { margin-bottom: 20px; }
  .sortiment-reiter, .sortiment-reiter .kategorien { flex: 1 1 100%; width: 100%; }
  .sortiment-suche { flex: 1 1 0; max-width: none; }
  .sortiment-sort-feld { flex: 0 0 auto; margin-left: 0; }
  .sortiment-sort { max-width: 42vw; }
}

/* ERKANNTE SUCHANGABEN als Chips (Felix 29.10.2026: Filtern ueber die
   Suchleiste, "und die werden dann auch angezeigt"). Sorte klein und grau,
   Wert fett in Navy, "×" nimmt den Teil aus der Anfrage. */
.such-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -12px 0 20px; }
.such-chips[hidden] { display: none; }
.such-chips-titel { font-size: 13px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.such-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px 0 12px; max-width: 100%;
  border: 1px solid var(--field-border); border-radius: 999px; background: #fff;
  font-size: 13px; line-height: 1.2; color: var(--navy); text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.such-chip:hover { border-color: var(--navy); background: var(--bg-soft); }
.such-chip-sorte { flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.such-chip-wert { display: inline-flex; align-items: center; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.such-chip-weg {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  font-size: 16px; line-height: 1; color: var(--text-soft); background: var(--bg-soft);
}
.such-chip:hover .such-chip-weg { color: #fff; background: var(--navy); }
.such-chips-alle { font-size: 13px; font-weight: 600; color: var(--text-soft); padding: 8px 4px; }

/* Keine Treffer: was gesucht wurde und wie es weitergeht. */
.such-leer { max-width: 560px; margin: 0 auto; }
.such-leer h2 { margin: 0 0 12px; font-size: 20px; color: var(--navy); overflow-wrap: anywhere; }
.such-leer p { margin: 16px 0 8px; }
.such-leer-liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.such-leer-liste a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--field-border); border-radius: 10px; background: #fff;
  font-weight: 700; color: var(--navy); text-decoration: none; overflow-wrap: anywhere;
}
.such-leer-liste a:hover { border-color: var(--navy); }
.such-leer-liste span { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.such-leer-wege { display: flex; flex-wrap: wrap; gap: 8px; }
.such-leer-wege a {
  display: inline-grid; place-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  font-weight: 700; color: var(--navy); background: var(--bg-soft); text-decoration: none;
}
.such-leer-wege a:hover { color: #fff; background: var(--navy); }
.such-leer-kontakt { padding: 14px 16px; border-radius: 10px; background: var(--gold-soft); color: var(--text); }
.such-leer-kontakt a { font-weight: 700; color: var(--navy); }
@media (max-width: 640px) {
  .such-chips { margin-top: -8px; }
  .such-chip { min-height: 44px; }
}

.sortiment-hinweis { margin: -12px 0 16px; font-size: 14px; color: var(--text-soft); }
.sortiment-hinweis:empty { display: none; }
.sortiment-leer { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--text-soft); }
.sortiment-seiten { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 32px 0 0; }
.sortiment-seiten a, .sortiment-seiten span {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 10px;
  border-radius: 8px; font-weight: 700; color: var(--navy); text-decoration: none;
}
.sortiment-seiten a { border: 1px solid var(--field-border); background: #fff; }
.sortiment-seiten [aria-current="page"] { color: #fff; background: var(--navy); }