/* Modul „tabelle“. Werte aus seiten/module/d2c.css „Tabelle“. Nur Tokens:
   --bb-* (Ton-Regel), --bm-* (Website). Breakpoints: 768 (max: 767). */
.bb-m-tabelle { --bb-kopf-abstand: calc(var(--bm-sektion) * 0.75); }
.bb-m-tabelle .bb-kopf__titel { letter-spacing: var(--bm-sp-leicht); text-wrap: balance; }

/* ── Behälter: wischt waagerecht, Kanten blenden weich aus ─────────────── */
@property --bb-tab-links { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --bb-tab-rechts { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes bb-tab-links { from { --bb-tab-links: 0px; } to { --bb-tab-links: var(--bb-tab-kante); } }
@keyframes bb-tab-rechts { from { --bb-tab-rechts: var(--bb-tab-kante); } to { --bb-tab-rechts: 0px; } }

.bb-m-tabelle__box {
  --bb-tab-kante: 2.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.bb-m-tabelle__box:focus-visible { outline: var(--bm-fokus-breite) solid var(--bb-fokus); outline-offset: var(--bm-fokus-versatz, 3px); }
/* Nur wo es etwas zu scrollen gibt, zeigt die Animation Wirkung (Scroll-Zeitachse
   ohne Überlauf bleibt am Anfang: beide Kanten 0). Ohne Unterstützung: keine Maske. */
@supports (animation-timeline: scroll()) {
  .bb-m-tabelle--linien .bb-m-tabelle__box {
    animation: bb-tab-links var(--bm-ease-linear) both, bb-tab-rechts var(--bm-ease-linear) both;
    animation-timeline: scroll(self inline);
    animation-range: 0 var(--bb-tab-kante), calc(100% - var(--bb-tab-kante)) 100%;
    mask-image: linear-gradient(to right, transparent, black var(--bb-tab-links), black calc(100% - var(--bb-tab-rechts)), transparent);
  }
}

/* ── Tabelle ───────────────────────────────────────────────────────────── */
.bb-m-tabelle__tabelle {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--bm-t-body);
  line-height: var(--bm-zh-mittel);
}
.bb-m-tabelle thead th {
  padding: 0 1.5rem 1rem 0;
  border-bottom: 2px solid var(--bb-text);
  font-family: var(--bm-font);
  font-size: var(--bm-t-body);
  font-weight: var(--bm-g-mittel);
  letter-spacing: var(--bm-sp-knopf);
  color: var(--bb-text);
  vertical-align: bottom;
}
.bb-m-tabelle tbody :is(th, td) {
  padding: 1.25rem 1.5rem 1.25rem 0;
  border-bottom: 1px solid var(--bb-linie);
  vertical-align: top;
}
.bb-m-tabelle tbody th { font-weight: var(--bm-g-titel); color: var(--bb-text); }
.bb-m-tabelle tbody td { color: var(--bb-text-ruhig); }
.bb-m-tabelle :is(th, td):last-child { padding-right: 0; }

/* ── gestapelt: mobil je Zeile ein Block, Spaltentitel vor dem Wert ────── */
@media (max-width: 767px) {
  .bb-m-tabelle--gestapelt .bb-m-tabelle__tabelle { min-width: 0; }
  .bb-m-tabelle--gestapelt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bb-m-tabelle--gestapelt :is(table, tbody, tr, th, td) { display: block; }
  .bb-m-tabelle--gestapelt tbody tr { padding: 1.25rem 0; border-bottom: 1px solid var(--bb-linie); }
  .bb-m-tabelle--gestapelt tbody :is(th, td) { padding: 0; border-bottom: 0; }
  .bb-m-tabelle--gestapelt tbody td { margin-top: 0.75rem; }
  .bb-m-tabelle--gestapelt tbody td::before {
    content: attr(data-spalte);
    display: block;
    margin-bottom: 0.125rem;
    font-weight: var(--bm-g-mittel);
    letter-spacing: var(--bm-sp-knopf);
    color: var(--bb-text);
  }
}