/* Streamer wall: two rows of faces drifting sideways, fading out at the edges. Name on hover. */
.stw { margin-top: 56px; display: grid; gap: 18px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.stw-row { display: flex; gap: 18px; width: max-content; animation: stw-l var(--d, 60s) linear infinite; }
.stw-row.r { animation-name: stw-r; }
.stw:hover .stw-row { animation-play-state: paused; }
.stw-face { margin: 0; position: relative; width: 142px; height: 142px; flex: none; border-radius: var(--radius); overflow: hidden; background: var(--mist);
  box-shadow: 0 0 0 1px var(--line), 0 14px 30px -22px rgba(9,9,11,.5); }
.stw-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block;
  transition: filter .4s, transform .6s cubic-bezier(.2,.8,.2,1); }
.stw-face:hover img { transform: scale(1.06); }
.stw-face span { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 6px 8px; border-radius: 12px; display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 .74rem/1.1 var(--sf); color: var(--ink);
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stw-face:hover span { opacity: 1; transform: none; }
.stw-face i { width: 14px; height: 14px; flex: none; border-radius: 50%; overflow: hidden; display: block; box-shadow: 0 0 0 1px rgba(9,9,11,.12); }
.stw-face i svg { width: 100%; height: 100%; display: block; }
@keyframes stw-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes stw-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.stw-note { margin: 26px auto 0; max-width: 46rem; text-align: center; font: 400 .78rem/1.5 var(--sf); color: var(--soft); }
.stw-note a { color: inherit; }
@media (max-width: 640px) { .stw-face { width: 104px; height: 104px; } .stw, .stw-row { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .stw-row { animation: none; } }
.stw-note summary { cursor: pointer; list-style: none; }
.stw-note summary::-webkit-details-marker { display: none; }
.stw-note summary::after { content: " ›"; }
.stw-note[open] summary::after { content: " ‹"; }
.stw-note p { margin: 10px 0 0; }
#szene .stw-title { font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.05; }
.stw.off .stw-row { animation-play-state: paused; }