// ────────────────────────────────────────────────────────────────
// Komponente · Tabelle
// ────────────────────────────────────────────────────────────────

.table {
  width: 100%;
  font-size: var(--fs-md);
  border-collapse: collapse;

  th {
    padding: var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: left;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }

  td {
    padding: var(--sp-3);
    color: var(--dim);
    border-bottom: 1px solid var(--line-soft);
  }

  td strong,
  td b {
    color: var(--fg);
    font-weight: var(--fw-medium);
  }

  tbody tr {
    transition: background var(--dur-fast) var(--ease);
  }

  tbody tr:hover {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
  }
}

.table--zebra tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--dim) 4%, transparent);
}

.table--compact th,
.table--compact td {
  padding: var(--sp-2) var(--sp-3);
}

.table th.is-num,
.table td.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

// Scrollbare Huelle fuer schmale Viewports
.table-wrap {
  width: 100%;
  overflow-x: auto;
}