/* Team app ▸ shared pieces of every list (25.10.2026, team/teamListen.js, team/teamAvatar.js): the scroll box that grows to
   the bottom of the viewport, the pager of mode „Seiten“ and the Discord picture over the initials circles. Tokens only;
   light and dark follow the tokens. */

/* ── Scroll box (mode „Scrollen“): height set by frfTeamListen.passe ── */
.tl-scroll {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb, var(--border-3)) transparent;
}
/* Entries never shrink inside the box (live bug 25.10.2026: the D-Bot FAQ is a flex column of cards with
   overflow: hidden, so their automatic minimum height is 0 and 50 cards were squeezed into the box). */
.tl-scroll > * { flex-shrink: 0; }
.tl-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.tl-scroll::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); background: var(--scrollbar-thumb, var(--border-3)); }

/* ── Pager (mode „Seiten“) ── */
.tl-seiten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); min-width: 0; }
.tl-seiten-info { font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; }
.tl-seiten-stand { color: var(--text-2); font-weight: var(--fw-medium); }
.tl-seiten-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.tl-seite {
  display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-pill);
  background: var(--w3-fuellung, var(--surface-2)); box-shadow: var(--w3-kante-feld, inset 0 0 0 1px var(--border-2)); color: var(--text-2);
  font: inherit; font-size: var(--fs-13); font-variant-numeric: tabular-nums; cursor: pointer;
}
.tl-seite:hover:not([disabled]):not(.tl-seite-luecke) { color: var(--text-1); background: var(--w3-fuellung-stark, var(--surface-3)); }
.tl-seite:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tl-seite[aria-current="page"] { background: var(--w3-akzent-flaeche, var(--surface-3)); color: var(--text-1); font-weight: var(--fw-semibold); box-shadow: inset 0 0 0 1px var(--w3-akzent-rand, var(--border-3)); }
.tl-seite[disabled] { opacity: .4; cursor: default; }
.tl-seite-luecke { background: none; box-shadow: none; cursor: default; color: var(--text-3); }
/* Phones: only previous/next and the current page; „Seite x von y“ says the rest. */
@media (max-width: 640px) {
  .tl-seiten-bereich { display: none; }
  .tl-seite-zahl:not([aria-current="page"]), .tl-seite-luecke { display: none; }
  .tl-seite { min-width: 40px; height: 36px; }
}

/* ── Discord picture over the initials (data-av-d / data-av-u) ── */
[data-av-stand="laedt"], [data-av-stand="bild"] { position: relative; overflow: hidden; }
[data-av-stand] > img.tav-bild {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  background: var(--surface-2); opacity: 0; transition: opacity var(--t-fast, .12s);
}
[data-av-stand="bild"] > img.tav-bild { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-av-stand] > img.tav-bild { transition: none; }
}