.list { list-style: none; margin: 0; padding: 0; }
.list-item { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.list-item:first-child { border-top: 0; }
.list-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-4); }
.pagination .btn { width: auto; }

/* Tabellen: schmal als Karten (td[data-label] liefert die Beschriftung), ab 700px echte Tabelle. */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.table tr { display: block; padding: var(--space-3); margin-bottom: var(--space-3); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.table td { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-2); padding: var(--space-1) 0; text-align: left; vertical-align: top; }
.table td::before { content: attr(data-label); color: var(--color-muted); font-size: 0.8rem; font-weight: 600; }

@media (min-width: 700px) {
  .table thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .table tr { display: table-row; padding: 0; margin: 0; background: none; border: 0; border-radius: 0; }
  .table td { display: table-cell; padding: var(--space-2); border-top: 1px solid var(--color-border); }
  .table td::before { content: none; }
  .table th { text-align: left; padding: var(--space-2); color: var(--color-muted); font-size: 0.8rem; }
}
.list-item-head .muted-block { flex-basis: 100%; }