/* Sets-Uebersicht und erweiterte Suche. Handy zuerst. */

.listenkopf {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.listenkopf h1 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 6vw, 2.5rem);
  line-height: 1.1;
  max-width: none;
}
.listen-zahl {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.leer-hinweis { color: var(--text-2); }
.leer-hinweis code, .abfrage-zeile code {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 0.86em;
  background: rgba(255,255,255,0.07);
  padding: 0.1em 0.4em;
  border-radius: 3px;
}
.abfrage-zeile { font-size: 0.85rem; color: var(--text-3); margin: 1.2rem 0 0.9rem; }

/* ------------------------------------------------------------- Setliste */

.setliste { list-style: none; margin: 0; padding: 0; }
.setliste li { border-bottom: 1px solid var(--line); }
.setliste a {
  display: grid;
  grid-template-columns: 1.9rem 1fr auto;
  grid-template-areas: "symbol name zahl" ". meta meta";
  align-items: center;
  gap: 0.15rem 0.7rem;
  padding: 0.7rem 0.2rem;
  min-height: 52px;
  text-decoration: none;
  color: var(--text-2);
}
.setliste a:hover { background: rgba(255,255,255,0.035); }
.setsymbol { grid-area: symbol; width: 1.5rem; height: 1.5rem; filter: invert(1) brightness(1.6); opacity: 0.85; }
.set-name { grid-area: name; color: var(--text); font-weight: 600; font-size: 0.95rem; }
.set-zahl {
  grid-area: zahl;
  font-size: 0.82rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
/* Kuerzel, Jahr und Typ standen frueher alle drei auf grid-area: meta.
   Drei Elemente in einer Gitterzelle stapeln sich uebereinander, sie fliessen
   nicht nebeneinander. Deshalb jetzt ein Behaelter, der die Zelle bekommt. */
.set-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  min-width: 0;
}
.set-code, .set-jahr, .set-typ { font-size: 0.76rem; color: var(--text-3); }
.set-code { font-weight: 700; letter-spacing: 0.08em; color: var(--gold); }
.set-typ { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setliste a { position: relative; }
.set-code::after, .set-jahr::after { content: "·"; margin: 0 0.35rem; opacity: 0.5; }

@media (min-width: 44rem) {
  .setliste a {
    grid-template-columns: 2.2rem 1fr 4.5rem 4rem 3.5rem 8rem;
    grid-template-areas: "symbol name code zahl jahr typ";
    min-height: 46px;
  }
  /* Auf breitem Schirm loest sich der Behaelter auf, damit die 3 Angaben
     wieder eigene Spalten bekommen. */
  .set-meta { display: contents; }
  .set-code { grid-area: code; }
  .set-jahr { grid-area: jahr; }
  .set-typ  { grid-area: typ; white-space: normal; overflow: visible; }
  .set-code::after, .set-jahr::after { content: none; }
  .set-zahl { text-align: right; }
}

/* --------------------------------------------------------- Suchmaske */

.suchmaske {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.1rem 1.1rem 1.3rem;
  margin-bottom: 1.6rem;
}
.sm-reihe { display: flex; flex-direction: column; gap: 0.9rem; }
.suchmaske label { display: flex; flex-direction: column; gap: 0.3rem; }
.suchmaske label > span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}
.suchmaske input[type=search], .suchmaske input[type=number], .suchmaske select {
  font-size: 16px;
  color: var(--text);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0.62rem 0.8rem;
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
}
.suchmaske select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: right 1rem center, right 0.72rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}
.suchmaske input:focus, .suchmaske select:focus { outline: none; border-color: var(--accent-hot); }

.sm-farben { border: 0; margin: 0; padding: 0; }
.sm-farben legend {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 0 0.45rem;
}
.farbwahl { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.farbknopf input { position: absolute; opacity: 0; pointer-events: none; }
.farbknopf span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.04);
  color: var(--text-3);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.farbknopf input:checked + span {
  color: var(--text);
  border-color: rgba(217,182,80,0.55);
  background: rgba(217,182,80,0.14);
}
.farbknopf input:focus-visible + span { outline: 2px solid var(--accent-hot); outline-offset: 2px; }

.farbmodus { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.7rem; }
.farbmodus label {
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.84rem;
  color: var(--text-2);
  min-height: 34px;
  cursor: pointer;
}

.sm-roh summary { cursor: pointer; font-size: 0.85rem; color: var(--text-2); min-height: 34px; }
.sm-roh input { width: 100%; margin-top: 0.5rem; }
.suchmaske .cta { margin-top: 0.2rem; max-width: none; }

/* ------------------------------------------------------- Kartengitter */

.kartengitter {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.9rem;
}
.kartengitter a { display: flex; flex-direction: column; gap: 0.35rem; text-decoration: none; }
.kartengitter img {
  width: 100%;
  height: auto;
  border-radius: 4.75% / 3.5%;
  border: 1px solid var(--line);
  background: var(--surface);
}
.kartengitter a:hover img { border-color: rgba(217,182,80,0.5); }
.kg-name { font-size: 0.84rem; color: var(--text-2); line-height: 1.3; }
.kg-preis { font-size: 0.78rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.kein-bild {
  display: grid;
  place-items: center;
  aspect-ratio: 244 / 340;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  padding: 0.6rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-3);
}

.blaettern { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.6rem; }
.blaettern span { font-size: 0.85rem; color: var(--text-3); }
.blaettern .knopf-schlicht { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 34rem) {
  .sm-reihe { flex-direction: row; align-items: flex-end; }
  .sm-reihe > label { flex: 1 1 0; }
  .sm-reihe > label.schmal { flex: 0 0 7rem; }
}

@media (min-width: 40rem) {
  .suchmaske { padding: 1.5rem 1.6rem 1.7rem; }
  .kartengitter { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
}

/* ------------------------------------------------ Startansicht Kartensuche */

.startblock { margin-top: 2.4rem; padding-top: 0; }
.startblock:first-of-type { margin-top: 1.6rem; }

.gc-punkt {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.02rem 0.32rem;
  border-radius: 3px;
  background: rgba(217,182,80,0.18);
  border: 1px solid rgba(217,182,80,0.4);
  color: #E9CE8C;
  font-size: 0.66rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.04em;
}

.setchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.setchips a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.04);
  color: var(--text-2);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.setchips a:hover { color: var(--gold); border-color: rgba(217,182,80,0.45); }
.setchips img { width: 1.05rem; height: 1.05rem; filter: invert(1) brightness(1.6); opacity: 0.8; }
.setchips em { font-style: normal; font-weight: 400; color: var(--text-3); font-size: 0.78rem; }

.block-hinweis a { color: var(--accent-hot); }


/* Das Setfeld sitzt im Suchband des Kopfes, an der Stelle, wo auf den
   Kartenseiten die Kartensuche steht. Zwei Suchfelder auf einer Seite waren
   eines zu viel, und wer die Setliste liest, grenzt Sets ein.
   Bei 560 Eintraegen sind das auf dem Handy 50,8 Bildschirme, deshalb klebt es. */
.s-leeren {
  position: absolute;
  right: 3.15rem; top: 5px; bottom: 5px;
  width: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.12s ease, background 0.12s ease;
}
.s-leeren:hover { color: var(--accent-hot); background: rgba(255,255,255,0.07); }
.s-leeren:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }