/* ── Champions (Website) — Stats-Paket Block S5 (Paket B) · BAUPLAN-WEBSITE ─────────────────────────────────────────
   Figma YRUirscc0yHUgTS69n5bDU „✅ Fertig“ Section 242:12491 (W-C1 + Zustaende cz + Bausteine cb) + 📘 Spec 273:14487.
   Praefix `ch-`; Bausteine aus tw.css. Main 1280 (80 Rand). ≤ 1080 Tabelle ohne CS/DMG-Spalten; ≤ 600 = 430-Fassung
   (Liste: Champion vorne, Win % rechts, Rest in der Unterzeile; Karten untereinander). */

.ch-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ch-fuell { flex: 1 1 0; min-width: 0; }
.ch-unter { margin: 0; font: 400 14px/18px var(--font-brand); color: var(--w55); }
.ch-modi button { height: 30px; padding: 0 16px; font-size: 13px; }

/* Karten (Splash des Champions, Verlauf von unten) */
.ch-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.ch-karten.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ch-karten .tw-skel { height: 220px; }
.ch-karte { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 220px; padding: 20px 22px 22px;
    border-radius: 14px; border: 1px solid var(--border); overflow: hidden; isolation: isolate; text-decoration: none; color: inherit;
    background: var(--erhoeht) var(--ch-bild, none) center 25% / cover no-repeat; box-sizing: border-box; }
.ch-karte::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(13,13,18,.25) 0%, rgba(13,13,18,.45) 45%, rgba(13,13,18,.92) 100%); }
a.ch-karte:hover { border-color: var(--w25); }
a.ch-karte:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ch-karte-chip { align-self: flex-start; padding: 4px 9px; border-radius: 6px; background: rgba(13,13,18,.6); color: var(--gold2);
    font: 600 11px/14px var(--font-brand); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ch-karte-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ch-karte-t h2 { margin: 0; font: 700 32px/1.15 var(--font-brand); color: var(--w100); }
.ch-karte-t p { margin: 0; font: 600 15px/20px var(--font-brand); color: var(--w70); }
.ch-karte-t p.gruen { color: var(--gruen); }
.ch-karte-t small { font: 400 12px/16px var(--font-brand); color: var(--w70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-karte.aus { background: var(--flaeche); opacity: .6; }
.ch-karte.aus::before { display: none; }
.ch-karte.aus .ch-karte-chip { background: var(--w06); color: var(--w55); }
.ch-karte.aus h2 { color: var(--w45); }

/* Filterzeile */
.ch-filter { display: flex; align-items: center; gap: 10px; margin-top: 36px; flex-wrap: wrap; }
.ch-suche { position: relative; display: flex; align-items: center; width: 220px; }
.ch-suche svg { position: absolute; left: 12px; color: var(--w45); pointer-events: none; }
.ch-suche .tw-feld { height: 36px; padding-left: 34px; border-color: var(--w12); background: transparent; font-size: 13px; }
.ch-suche .tw-feld::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }
.ch-rollen button { height: 28px; padding: 0 10px; font-size: 13px; }
.ch-rollen .tw-rolle-ic { width: 14px; height: 14px; flex-basis: 14px; }
.ch-wahl select { height: 36px; font-size: 13px; padding-right: 28px; border-color: var(--w12); }
.ch-wahl.an select { border-color: var(--w45); }

/* Tabelle (Figma Champions/Zeile 242:12531) */
.ch-tabelle { margin-top: 24px; display: flex; flex-direction: column; }
.ch-tkopf, .ch-z { display: flex; align-items: center; gap: 16px; padding: 0 16px 0 12px; }
.ch-tkopf { height: 32px; font: 600 11px/14px var(--font-brand); letter-spacing: .08em; text-transform: uppercase; color: var(--w45); }
.ch-z { position: relative; height: 56px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background-color .12s ease; }
.ch-z:first-of-type { border-top: 1px solid var(--border); }
.ch-z:hover { background: var(--w03); }
.ch-nr { width: 22px; flex: 0 0 22px; font: 500 13px/16px var(--font-brand); color: var(--w45); }
.ch-champ { display: flex; align-items: center; gap: 12px; width: 200px; flex: 0 0 200px; min-width: 0; }
.ch-tkopf .ch-champ { padding-left: 48px; box-sizing: border-box; }
.ch-champ > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-bild { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 8px; object-fit: cover; background: var(--erhoeht); }
.ch-link { font: 600 14px/18px var(--font-brand); color: var(--w100); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-link:hover { color: var(--violett-text); }
.ch-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.ch-champ small { display: inline-flex; align-items: center; gap: 4px; font: 400 12px/15px var(--font-brand); color: var(--w45); }
.ch-champ small .tw-rolle-ic { width: 13px; height: 13px; flex-basis: 13px; }
.ch-spiele { width: 80px; flex: 0 0 80px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ch-spiele b { font: 600 15px/18px var(--font-brand); color: var(--w100); }
.ch-spiele small { font: 400 11px/14px var(--font-brand); color: var(--w45); white-space: nowrap; }
.ch-tkopf .ch-spiele { align-items: flex-end; }
.ch-wl { width: 160px; flex: 0 0 160px; display: flex; flex-direction: column; gap: 5px; }
.ch-wl small { font: 400 11px/14px var(--font-brand); color: var(--w70); }
.ch-wlbar { display: flex; gap: 2px; height: 4px; }
.ch-wlbar em { display: block; height: 100%; border-radius: 2px; min-width: 0; }
.ch-wlbar .w { background: var(--gruen); }
.ch-wlbar .l { background: #c0444b; }
.ch-wr { width: 64px; flex: 0 0 64px; text-align: right; font: 700 14px/18px var(--font-brand); }
.ch-wr.gruen { color: var(--gruen); } .ch-wr.rot { color: var(--red); }
.ch-tkopf .ch-wr, .ch-tkopf .ch-num { font: inherit; color: inherit; }
.ch-num { width: 56px; flex: 0 0 56px; text-align: right; font: 400 14px/18px var(--font-brand); color: var(--w70); }
.ch-best { display: flex; align-items: center; gap: 10px; width: 210px; flex: 0 0 210px; min-width: 0; }
.ch-best > span { display: flex; flex-direction: column; min-width: 0; }
.ch-best a, .ch-best span > span { font: 600 13px/16px var(--font-brand); color: var(--w100); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-best a:hover { color: var(--violett-text); }
.ch-best small { font: 400 11px/14px var(--font-brand); color: var(--w45); white-space: nowrap; }
.ch-best .tw-ava { border-radius: 50%; }
.ch-caret { width: 14px; flex: 0 0 14px; display: flex; color: var(--w25); }
.ch-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 18px; font: 400 13px/16px var(--font-brand); color: var(--w45); }
.ch-fuss .tw-link { font-size: 13px; }
.ch-leer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 32px 0 0; padding: 14px 0;
    border-bottom: 1px solid var(--border); font: 400 15px/20px var(--font-brand); color: var(--w70); }
.ch-nichts { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 18px 0;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font: 400 14px/18px var(--font-brand); color: var(--w70); }

@media (max-width: 1280px) {
    .ch-best { width: 170px; flex-basis: 170px; }
}
@media (max-width: 1080px) {
    .ch-karten { gap: 14px; }
    .ch-karte-t h2 { font-size: 26px; }
    .ch-num:nth-of-type(n+7), .ch-tkopf .ch-num:nth-of-type(n+7) { display: none; }
    .ch-wl { width: 120px; flex-basis: 120px; }
}

/* ═════════════ 430 (W-C1 430): Liste — Champion vorne, Win % rechts, Rest in die Unterzeile ═════════════ */
@media (max-width: 600px) {
    .ch-kopf { flex-direction: column; align-items: flex-start; gap: 14px; }
    .ch-karten, .ch-karten.n2 { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 20px; }
    .ch-karte, .ch-karten .tw-skel { height: 150px; }
    .ch-karte-t h2 { font-size: 24px; }
    .ch-filter { margin-top: 24px; }
    .ch-suche { width: 100%; }
    .ch-filter > .ch-fuell { display: none; }
    .ch-rollen { width: 100%; }
    .ch-wahl { flex: 1 1 40%; min-width: 0; }
    .ch-rollen button { padding: 0 8px; }
    .ch-wahl select { width: 100%; }
    .ch-tkopf { display: none; }
    .ch-z { display: grid; height: auto; padding: 12px 4px; gap: 4px 10px; grid-template-columns: 36px minmax(0, 1fr) auto;
        grid-template-areas: "champ champ wr" "unter unter unter" "best best best"; }
    .ch-z:first-of-type { border-top: 1px solid var(--border); }
    .ch-nr, .ch-caret, .ch-z > .ch-fuell { display: none; }
    .ch-champ { grid-area: champ; width: auto; flex: none; }
    .ch-wr { grid-area: wr; align-self: center; width: auto; font-size: 16px; }
    /* Unterzeile: Spiele · W/L · KDA · CS · DMG als eine Zeile */
    .ch-spiele, .ch-wl, .ch-num { display: inline-flex; }
    .ch-z { grid-template-areas: "champ champ champ champ champ wr" "sp wl kda cs dmg dmg" "best best best best best best";
        grid-template-columns: auto auto auto auto auto 1fr; }
    .ch-champ { grid-area: champ; }
    .ch-spiele { grid-area: sp; width: auto; flex-direction: row; align-items: baseline; gap: 4px; }
    .ch-spiele b { font-size: 13px; }
    .ch-wl { grid-area: wl; width: 92px; align-self: center; }
    .ch-wl small { display: none; }
    .ch-num { width: auto; font-size: 12px; color: var(--w55); }
    .ch-num::before { content: attr(data-k); color: var(--w45); margin-right: 3px; }
    .ch-num:nth-of-type(6) { grid-area: kda; }
    .ch-num:nth-of-type(7) { grid-area: cs; }
    .ch-num:nth-of-type(8) { grid-area: dmg; }
    .ch-num:nth-of-type(n+7) { display: inline-flex; }
    .ch-best { grid-area: best; width: auto; flex: none; margin-top: 4px; }
    .ch-best .tw-ava { width: 22px; height: 22px; flex-basis: 22px; }
    .ch-fuss { flex-wrap: wrap; }
}