/* ============================================================================
 * sammelzettel.css — tc-sammelzettel (Gorbos Zettel, #1019, 11.10.2026)
 * ----------------------------------------------------------------------------
 * „Seit deinem letzten Besuch": jede Gutschrift, die still ankam, auf EINEM
 * Zettel. Läuft im tc-modal (TC.Modal.openEingereiht); diese Datei gestaltet
 * nur den Inhalt. Der Stempel unten kommt aus coin-moment.css, der Balken aus
 * xp-bar.css — beide müssen auf der Seite liegen.
 *
 * Anders als der Münzmoment ist der Zettel eine LISTE: Die Zeilen sind die
 * Hauptsache (was, von wem eingetragen, wann). Die Summe steht darüber: Bei
 * vielen Zeilen rollt das Fenster am Handy, und die Schlagzeile läge sonst
 * unter dem Rand. Linksbündig und ohne große Münze.
 *
 * Bewegung kommt aus dem Baukasten (tokens.css E3): die Zeilen treten mit
 * `tc-auftritt` im Versatz auf, der Balken wächst mit `tc-fuellt`, die Summe
 * zählt mit TC.zaehleHoch. Bei reduzierter Bewegung steht alles sofort da.
 * ========================================================================== */

.tc-sammelzettel {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-3);
  font-family: var(--tc-font-body);
  color: var(--tc-text-default);
}

.tc-sammelzettel__kopf {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
}

/* Gorbos Gemälde (#1114): Baustein tc-bildfenster mit `--band` (modal.css).
   Der Zettel ist eine Liste, deshalb ist das Band am Handy flacher als im
   Münzmoment (2:1, höchstens 22 % der Bildschirmhöhe). Am Schreibtisch steht
   das Bild oben neben dem Zettel, nicht mittig neben der fünften Zeile. */
.tc-sammelzettel-fenster.tc-bildfenster { align-items: start; }
.tc-sammelzettel__bild {
  --tc-bildfenster-band: 2 / 1;
  --tc-bildfenster-band-hoehe: 22vh;
  --tc-bildfenster-blick: 50% 30%;
  --tc-bildfenster-kante: 340px;
  border: 1px solid var(--tc-border-default);
}
@media (max-width: 900px) {
  .tc-sammelzettel-fenster.tc-bildfenster { gap: var(--tc-space-3); }
}

.tc-sammelzettel__wer {
  margin: 0;
  font-size: var(--tc-text-sm);
  font-style: italic;
  color: var(--tc-text-muted);
}

.tc-sammelzettel__zeilen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Was links, Lohn rechts. Der Lohn bricht nie um; der Text daneben nimmt
   den Rest und darf umbrechen (lange Terminnamen bei 375 px). */
.tc-sammelzettel__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--tc-space-3);
  align-items: start;
  padding: var(--tc-space-2) 0;
  border-bottom: 1px dashed var(--tc-border-subtle);
}

.tc-sammelzettel__was {
  min-width: 0;
  font-size: var(--tc-text-sm);
  color: var(--tc-text-strong);
  overflow-wrap: anywhere;
}

.tc-sammelzettel__was small,
.tc-sammelzettel__lohn small,
.tc-sammelzettel__summe small {
  display: block;
  font-size: var(--tc-text-xs);
  font-weight: 400;
  color: var(--tc-text-muted);
}

.tc-sammelzettel__lohn {
  text-align: right;
  white-space: nowrap;
  font-size: var(--tc-text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tc-highlight);
}

.tc-sammelzettel__zeile--rest .tc-sammelzettel__was {
  color: var(--tc-text-muted);
  font-style: italic;
}

.tc-sammelzettel__summe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--tc-space-3);
  padding-bottom: var(--tc-space-2);
  border-bottom: 1px solid var(--tc-border-subtle);
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
}

.tc-sammelzettel__summe strong {
  text-align: right;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xl);
  font-variant-numeric: tabular-nums;
  color: var(--tc-highlight);
}

.tc-sammelzettel__summe small { font-family: var(--tc-font-body); }

.tc-sammelzettel__saldo {
  margin: 0;
  text-align: right;
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
}

.tc-sammelzettel__saldo strong { color: var(--tc-text-strong); }

.tc-sammelzettel__stufe {
  padding-top: var(--tc-space-3);
  border-top: 1px solid var(--tc-border-subtle);
}

/* Der Stempel bringt seinen oberen Abstand und Strich mit (coin-moment.css);
   im Zettel regelt den Abstand die Spalte. */
.tc-sammelzettel .tc-coin-moment__beleg { margin-top: 0; }