/* Seite „Für Streamer": Raid-Finder, eigener Kanal, beste Streamzeit. */
.fs-reiter { margin: 14px 0 16px; }
.fs-karte { min-width: 0; }
.fs-karte h2 { margin-bottom: 4px; }
.fs-satz { margin: 0 0 12px; }
.fs-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }

/* Raid-Finder */
.fs-steuerung { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 10px; }
.fs-haken { display: flex; gap: 6px; align-items: center; font-size: 14px; cursor: pointer; }
.fs-liste li.fs-raid { display: block; padding: 10px 0; }
.fs-raid-kopf { display: flex; gap: 10px; align-items: center; }
.fs-raid-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fs-raid-name b { overflow-wrap: anywhere; }
.fs-titel { margin: 4px 0 0 34px; overflow-wrap: anywhere; }
.fs-kopier { flex-shrink: 0; font-family: var(--font-body); text-transform: none; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-mehr { margin-top: 10px; }

/* Mein Kanal */
.fs-wahl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; font-weight: 600; }
.fs-wahl select { min-width: 0; max-width: 100%; }
.fs-zeitwahl { margin-bottom: 8px; }
.fs-karte .liste li { flex-wrap: wrap; }
.fs-karte .liste li a { overflow-wrap: anywhere; }
.fs-clips li > a { flex: 1 1 100%; }
.fs-kurve { width: 100%; height: 90px; display: block; }
.fs-flaeche { fill: color-mix(in srgb, var(--twitch) 18%, transparent); }
.fs-linie { fill: none; stroke: var(--twitch); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fs-achse { display: flex; justify-content: space-between; }
.fs-werkzeuge { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.fs-werkzeuge .knopf { text-decoration: none; }
.fs-badge { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fs-badge img { max-width: 100%; height: auto; }

/* Beste Streamzeit */
.fs-tipp { font-weight: 600; background: var(--flaeche-2); padding: 10px 12px; margin: 0 0 14px; box-shadow: var(--outline); }
.fs-saeulen { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; align-items: end; }
.fs-saeule { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.fs-balken { height: 140px; display: flex; gap: 1px; align-items: flex-end; }
.fs-balken span { flex: 1; min-height: 1px; }
.fs-sp { background: var(--gras); }
.fs-lv { background: var(--twitch); }
.fs-saeule.beste .fs-balken { outline: 2px solid var(--gold); outline-offset: 1px; }
.fs-std { font-size: 11px; text-align: center; color: var(--text-3); height: 16px; overflow: visible; white-space: nowrap; }
.fs-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.fs-legende i { display: inline-block; width: 10px; height: 10px; vertical-align: middle; }
.fs-tabelle { margin-top: 12px; }
.fs-tabelle summary { cursor: pointer; }
.fs-tabelle tr.beste td { font-weight: 700; background: color-mix(in srgb, var(--gold) 30%, transparent); }

@media (max-width: 480px) {
  .fs-balken { height: 110px; }
  .fs-titel { margin-left: 0; }
}