/* ============================================================================
 * fundstueck.css — Fundstücke: Zähler, Fund-Moment, Tausch (#915, 14.10.2026;
 * Pinselhaar und Rattenzahn seit #1219, #1220)
 * ----------------------------------------------------------------------------
 * Demo: library-community.html#fundstueck · JS: js/ui/fundstueck.js (TC.Fund)
 * Geladen auf: jeder Seite, auf der TC.Fund einen Moment zeigen kann
 * (Kopf von fundstueck.js; tools/reichweite.py prüft es)
 *
 * Wer am Pranger wirft, findet manchmal ein Rattenfell im Stroh, wer unter
 * fremden Fotos mitredet ein Pinselhaar, wer bei Skarn wettet einen
 * Rattenzahn. Fünf davon tauscht die Contessa bzw. Skarn. Vier Bausteine:
 *
 *   .tc-fundzaehler          eine Reihe Plätze, so viele, wie der Tausch
 *     __platz [.is-voll]     braucht; ein voller Platz zeigt das Fundstück
 *     [.is-neu]              (Bild, sonst eine ruhige Füllung). Der gerade
 *                            gefundene bekommt `is-neu` und blendet mit
 *                            tc-auftritt aus dem Baukasten ein (tokens.css E3).
 *     --gross                36 statt 28 px (im Fenster, an der Karte)
 *   .tc-fund                 der Inhalt des Fund-Moments, ein tc-bildfenster
 *     __rede / __satz / __wer   Klamms Satz mit Namen darunter
 *     __stand / __zahl       Zähler und „3 von 5 Fellen“
 *     __hinweis              was man damit tut
 *   .tc-tausch               die Karte bei der Contessa: Vorschau, Name,
 *     __vorschau / __text    Satz, Zähler, Knopf oder Grund
 *     __name / __satz / __grund
 *   .tc-truhe                die Truhe „Für Pinselhaare“: ein Kopf mit dem
 *     __kopf / __satz        Satz der Contessa und dem Zähler, darunter die
 *     __stand / __zahl       Waren als tc-item-card (von der Seite gebaut)
 *
 * Nur Tokens. Bewegung nur aus dem Baukasten; bei reduzierter Bewegung steht
 * der Endzustand sofort (tc-auftritt hat dort 0 ms, Abschnitt I in tokens.css).
 * ========================================================================== */

/* --- Der Zähler ------------------------------------------------------------ */
.tc-fundzaehler {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-1);
  vertical-align: middle;
}
.tc-fundzaehler__platz {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  width: var(--tc-fundzaehler-kante, 28px);
  height: var(--tc-fundzaehler-kante, 28px);
  border-radius: var(--tc-radius-full);
  border: 1px dashed var(--tc-border-strong);
  background: transparent;
  overflow: hidden;
}
.tc-fundzaehler__platz.is-voll {
  border-style: solid;
  border-color: var(--tc-accent);
  /* Ohne Bild bleibt eine ruhige Füllung: Der Platz ist erkennbar voll. */
  background: color-mix(in srgb, var(--tc-accent) 28%, var(--tc-bg-surface-2));
}
.tc-fundzaehler__platz > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tc-fundzaehler--gross { --tc-fundzaehler-kante: 36px; }

/* --- Der Fund-Moment (im TC.Modal, size lg) --------------------------------- */
.tc-fund__bild {
  /* Das Fundstück liegt auf Schwarz (Bild-Prompt): kein heller Rand darum. */
  background: var(--tc-bg-canvas);
  overflow: hidden;
}
.tc-fund__rede {
  margin: 0 0 var(--tc-space-3);
}
.tc-fund__satz {
  margin: 0;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-lg);
  line-height: var(--tc-leading-snug);
  color: var(--tc-text-strong);
}
.tc-fund__wer {
  margin-top: var(--tc-space-1);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
}
.tc-fund__stand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-2) var(--tc-space-3);
  margin: 0 0 var(--tc-space-2);
}
.tc-fund__zahl {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-base);
  font-variant-numeric: tabular-nums;
  color: var(--tc-highlight);
}
.tc-fund__hinweis {
  margin: 0;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  line-height: var(--tc-leading-normal);
  color: var(--tc-text-muted);
}

/* --- Die Karte bei der Contessa ------------------------------------------- */
.tc-tausch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--tc-space-3) var(--tc-space-4);
  padding: var(--tc-space-4);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-bg-surface-1);
}
.tc-tausch__vorschau {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
}
.tc-tausch__text { min-width: 0; }
.tc-tausch__name {
  margin: 0 0 var(--tc-space-1);
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-lg);
  line-height: var(--tc-leading-tight);
  color: var(--tc-highlight);
}
.tc-tausch__satz {
  margin: 0 0 var(--tc-space-3);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  line-height: var(--tc-leading-normal);
  color: var(--tc-text-default);
}
.tc-tausch__stand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-2) var(--tc-space-3);
  margin: 0 0 var(--tc-space-3);
}
.tc-tausch__zahl {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--tc-text-muted);
}
.tc-tausch__grund {
  margin: 0;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
}
/* Am Handy steht die Vorschau über dem Text, links wie der Name darunter. */
@media (max-width: 480px) {
  .tc-tausch { grid-template-columns: minmax(0, 1fr); }
  .tc-tausch__vorschau { justify-content: flex-start; }
}

/* --- Die Truhe der Contessa (#1219) ----------------------------------------
   Ein Kopf, dann die Waren. Die Karten sind die der Auslage (tc-item-card),
   damit ein Stück aus der Truhe genauso aussieht wie eins zum Kaufen; nur der
   Fuß sagt „tauschen“ statt eines Preises. */
.tc-truhe {
  display: grid;
  gap: var(--tc-space-3);
}
.tc-truhe__kopf {
  display: grid;
  gap: var(--tc-space-3);
  padding: var(--tc-space-4);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-bg-surface-1);
}
.tc-truhe__satz {
  margin: 0;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-base);
  line-height: var(--tc-leading-snug);
  color: var(--tc-text-strong);
}
.tc-truhe__stand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-2) var(--tc-space-3);
}
.tc-truhe__zahl {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--tc-text-muted);
}