/* ============================================================================
 * tabelle.css — tc-tabelle (05.10.2026, #180)
 * ----------------------------------------------------------------------------
 * SCHICHT 1. Die schlichte Datentabelle fuer Text: Handbuch (Preise, Raenge,
 * Wege), Regelhinweise. Spezielle Tabellen haben eigene Organismen
 * (`tc-roster-table`, `tc-tipptabelle`) — diese hier ist die neutrale Form,
 * die vorher als `guide-table` nur im Handbuch stand.
 *
 *   <div class="tc-tabelle-rahmen">
 *     <table class="tc-tabelle">
 *       <thead><tr><th>…</th></tr></thead>
 *       <tbody><tr><td>…</td></tr></tbody>
 *     </table>
 *   </div>
 *
 * ⚠️ DER RAHMEN IST PFLICHT, sobald die Tabelle breiter werden kann als der
 * Bildschirm: Er scrollt waagerecht, damit die SEITE es nicht tut (375 px).
 *
 * Zahlen in Spalten: `tc-tabelle__zahl` an der Zelle (rechtsbuendig,
 * Tabellenziffern).
 * ========================================================================== */

.tc-tabelle-rahmen {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tc-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tc-text-sm);
  line-height: var(--tc-leading-snug);
  color: var(--tc-text-default);
}

.tc-tabelle th,
.tc-tabelle td {
  padding: var(--tc-space-2) var(--tc-space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--tc-border-subtle);
}

.tc-tabelle thead th {
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xs);
  font-weight: var(--tc-weight-semibold);
  letter-spacing: var(--tc-tracking-wide);
  color: var(--tc-highlight);
  background: var(--tc-bg-surface-2);
  border-bottom-color: var(--tc-border-default);
  white-space: nowrap;
}

.tc-tabelle tbody tr:last-child th,
.tc-tabelle tbody tr:last-child td {
  border-bottom: none;
}

.tc-tabelle tbody th {
  font-weight: var(--tc-weight-semibold);
  color: var(--tc-text-strong);
}

.tc-tabelle__zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}