/* ============================================================================
 * tc-beleg — ein Foto als Beleg, mit einer Zeile dazu (#999, 08.10.2026)
 * ----------------------------------------------------------------------------
 * Tim am 08.10.2026: Ein eingelöstes Kopfgeld soll „zwangsläufig mit einem
 * Foto der Übergabe dokumentiert werden". Der Beleg zeigt dieses Foto klein,
 * ein Tipp öffnet es groß (TC.Zoom), daneben steht, wer es wann gemacht hat.
 * Erster Ort: der Pranger (wartet auf Bestätigung) und die Kopfgeldtafel
 * („Beglichen"). Kein Album-Bild: Ein Beleg ist kein Werk.
 *
 * Struktur:
 *   .tc-beleg [.tc-beleg--wartet | .tc-beleg--beglichen]
 *     button.tc-beleg__bild[aria-label] > img
 *     .tc-beleg__text > .tc-beleg__titel + .tc-beleg__info
 *                       [+ .tc-beleg__dank … + button.tc-beleg__wort]  (#1062)
 *                       [+ .tc-beleg__gesten > .tc-resonanz--kompakt]  (#1061)
 *
 * Der Knopf bringt seine Gestalt selbst mit (appearance, Rand, Innenabstand),
 * er hängt an einem <button> (CLAUDE.md §9). 64 px, also über dem
 * Mindestmaß für Finger.
 * Library: library-community.html#beleg.
 * ========================================================================== */
.tc-beleg {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding: var(--tc-space-2) var(--tc-space-3) var(--tc-space-2) var(--tc-space-2);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md);
  background: var(--tc-bg-surface-2);
  font-family: var(--tc-font-body);
  color: var(--tc-text-default);
}
.tc-beleg--wartet { border-style: dashed; }
.tc-beleg--beglichen { border-color: color-mix(in srgb, var(--tc-success) 55%, transparent); }

.tc-beleg__bild {
  appearance: none;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--tc-border-strong);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-bg-surface-1);
  font-family: inherit;
  cursor: zoom-in;
  transition: border-color var(--tc-motion-fast);
}
.tc-beleg__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-beleg__bild:hover { border-color: var(--tc-highlight); }
.tc-beleg__bild:focus-visible { outline: 2px solid var(--tc-highlight); outline-offset: 2px; }

.tc-beleg__text { min-width: 0; display: grid; gap: 2px; }
.tc-beleg__titel {
  margin: 0;
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-semibold);
  color: var(--tc-text-strong);
}
.tc-beleg__info {
  margin: 0;
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}
/* Ein Wort dazu (#1062): die Sätze der zwei Beteiligten und ihr Knopf. */
.tc-beleg__dank {
  margin: 2px 0 0;
  font-size: var(--tc-text-sm);
  font-style: italic;
  color: var(--tc-text-default);
  overflow-wrap: anywhere;
}
.tc-beleg__wort { justify-self: start; margin-top: 2px; }
/* Gesten am Foto (#1061): die kompakte Resonanz-Zeile, darunter wer es war. */
.tc-beleg__gesten { margin-top: var(--tc-space-1); }
.tc-beleg__gesten .tc-resonanz__wer { padding: 0; }
.tc-beleg--beglichen .tc-beleg__titel::before { content: '\2713\00a0'; color: var(--tc-success); }

@media (prefers-reduced-motion: reduce) {
  .tc-beleg__bild { transition-duration: 0.01ms; }
}