/* ── Matches + Partie-Detail (Website) — Stats-Paket Block S4 · BAUPLAN-WEBSITE ─────────────────────────────────────
   Figma YRUirscc0yHUgTS69n5bDU „✅ Fertig“ Section 226:10850 (W-M1 Liste · W-M2 Partie · W-M3 430) + 📘 Spec 273:14373.
   Praefix `mt-`; Bausteine aus tw.css (Umschalter, Auswahl, Feld, Knopf, Leer, Skelett) und die Clip-Karte (`pf-clip`, tw.css).
   Main 1280 (80 Rand). Brueche wie W0: ≤ 1080 Detail-Unterteil einspaltig, ≤ 600 = 430-Fassung (Karte je Partie, Lane-Paar
   Blau ueber Rot, Teamsummen zweizeilig). */

.mt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-fuell { flex: 1 1 0; min-width: 0; }
.mt-cap { margin: 0; font: 600 11px/14px var(--font-brand); letter-spacing: .08em; text-transform: uppercase; color: var(--w45); }
.mt-cap.gold { color: var(--gold2); }
.mt-klein { margin: 0; font: 400 12px/16px var(--font-brand); color: var(--w45); }
.mt-rund { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; object-fit: cover; background: var(--erhoeht); }

/* Modus-Chip: Punkt in Modusfarbe + Text (Feed 12 SemiBold auf w06; Detail „gross“ 12 Medium auf w08) */
.mt-modus { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; background: var(--w06);
    font: 600 12px/15px var(--font-brand); color: var(--w100); white-space: nowrap; flex: 0 0 auto; }
.mt-modus i { width: 6px; height: 6px; border-radius: 50%; background: var(--mt-q, var(--gruen)); }
.mt-modus.gross { background: var(--w08); font-weight: 500; }

/* ═════════════ Liste (W-M1) ═════════════ */
.mt-main { padding-top: calc(72px + 48px); }
.mt-kopf { align-items: flex-end; }
.mt-unter { margin: 0; font: 400 14px/18px var(--font-brand); color: var(--w55); }
.mt-modi button { height: 30px; padding: 0 16px; font-size: 13px; }

.mt-filter { display: flex; align-items: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.mt-suche { position: relative; display: flex; align-items: center; width: 260px; }
.mt-suche svg { position: absolute; left: 12px; color: var(--w45); pointer-events: none; }
.mt-suche .tw-feld { height: 36px; padding-left: 34px; border-color: var(--w12); background: transparent; font-size: 13px; }
.mt-suche .tw-feld::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }
.mt-wahl select { height: 36px; font-size: 13px; padding-right: 28px; border-color: var(--w12); field-sizing: content; max-width: 240px;
    text-overflow: ellipsis; }
.mt-wahl.an select { border-color: var(--w45); color: var(--w100); }
.mt-filter > .mt-fuell { flex: 1 1 0; }
/* BX21 „Partien mit A & B“ (H2H „All in Matches“): aktiver Filter wie eine gewaehlte Auswahl, × nimmt ihn weg */
.mt-mit { display: inline-flex; align-items: center; gap: 8px; height: 36px; max-width: 100%; padding: 0 10px 0 14px; border-radius: 10px;
    border: 1px solid var(--w45); background: var(--w04); color: var(--w100); font: 500 13px/16px var(--font-brand); cursor: pointer; min-width: 0; }
.mt-mit > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mt-mit i { display: flex; color: var(--w55); }
.mt-mit:hover i { color: var(--w100); }
.mt-mit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Schalter (W0 Schalter 38 × 22) + Beschriftung */
.mt-schalter { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer;
    font: 500 13px/16px var(--font-brand); color: var(--w100); }
.mt-schalter i { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--w14); transition: background-color .15s ease; }
.mt-schalter i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--w100);
    transition: transform .15s ease; }
.mt-schalter[aria-checked="true"] i { background: var(--violett-knopf); }
.mt-schalter[aria-checked="true"] i::after { transform: translateX(16px); }
.mt-schalter:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 12px; }

/* Match of the day (engste Partie der letzten 24 h): Splash des MVP, Verlauf von links */
.mt-motd { position: relative; display: flex; align-items: center; gap: 32px; margin-top: 28px; padding: 28px 32px; border-radius: 16px;
    border: 1px solid var(--border); overflow: hidden; text-decoration: none; color: inherit; isolation: isolate;
    background: var(--erhoeht) var(--mt-bild, none) 70% 25% / cover no-repeat; }
.mt-motd::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(13,13,18,.96) 0%, rgba(13,13,18,.7) 45%, rgba(13,13,18,.35) 100%); }
.mt-motd:hover { border-color: var(--w25); }
.mt-motd:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mt-motd-l { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mt-motd-chip { align-self: flex-start; padding: 3px 8px; border-radius: 6px; background: rgba(232,180,80,.16); color: var(--gold2);
    font: 600 11px/14px var(--font-brand); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.mt-motd-score { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mt-motd-score span { font: 600 13px/16px var(--font-brand); letter-spacing: .08em; text-transform: uppercase; color: var(--w45); }
.mt-motd-score b { font: 700 56px/1 var(--font-brand); }
.mt-motd-score b.blau { color: var(--team-blau); } .mt-motd-score b.rot { color: var(--team-rot); }
.mt-motd-score em { font: 400 32px/1 var(--font-brand); font-style: normal; color: var(--w25); }
.mt-motd-l > p { margin: 0; font: 400 14px/18px var(--font-brand); color: var(--w70); }
.mt-motd-mvp { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mt-motd-mvp em { font: 600 11px/14px var(--font-brand); font-style: normal; letter-spacing: .08em; color: var(--gold2); }
.mt-motd-mvp b { font: 600 13px/16px var(--font-brand); color: var(--w100); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-motd-r { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 0 auto; }
.mt-motd-icons { display: flex; gap: 6px; }
.mt-motd-icons img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--erhoeht); }
.mt-motd-icons.verl img { opacity: .5; }
.mt-motd-r .tw-btn { background: rgba(13,13,18,.4); }

/* Tagesgruppen: TODAY · 6 GAMES … n with clips */
#mt-liste { margin-top: 40px; display: flex; flex-direction: column; gap: 24px; }
.mt-tag { display: flex; flex-direction: column; }
.mt-tag-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; }
.mt-tag-kopf h2 { margin: 0; font: 600 11px/14px var(--font-brand); letter-spacing: .08em; text-transform: uppercase; color: var(--w45); }
.mt-tag-kopf span { font: 400 12px/15px var(--font-brand); color: var(--w45); white-space: nowrap; }

/* Feed-Zeile (Figma Matches/Feed-Zeile 226:10983): 64 hoch, Haarlinie unten, „deine Partie“ = violette Marke + w03 */
.mt-partie { display: flex; flex-direction: column; }
.mt-zeile { position: relative; display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--border);
    border-radius: 10px; text-decoration: none; color: inherit; transition: background-color .12s ease; }
.mt-zeile:hover { background: var(--w03); }
.mt-zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mt-zeile.ich { background: var(--w03); }
.mt-zeile.ich:hover { background: var(--w04); }
.mt-mark { display: none; position: absolute; left: 0; top: 16px; width: 3px; height: 32px; border-radius: 2px; background: var(--violett); }
.mt-zeile.ich .mt-mark { display: block; }
.mt-tn { display: inline-flex; color: var(--gold2); margin-left: -8px; }
.mt-avg { width: 56px; flex: 0 0 56px; font: 400 12px/15px var(--font-brand); color: var(--w45); white-space: nowrap; }
.mt-teams { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.mt-icons { display: flex; gap: 4px; }
.mt-icons img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; background: var(--erhoeht); }
.mt-icons.verl img { opacity: .45; }
.mt-score { display: flex; align-items: center; gap: 8px; }
.mt-score b { width: 30px; font: 600 20px/24px var(--font-brand); color: var(--w45); }
.mt-score b:first-child { text-align: right; }
.mt-score b.blau { color: var(--team-blau); } .mt-score b.rot { color: var(--team-rot); }
.mt-score em { font: 400 16px/1 var(--font-brand); font-style: normal; color: var(--w25); }
.mt-du { padding: 3px 8px; border-radius: 6px; background: rgba(184,168,255,.14); color: var(--violett-text); font: 600 12px/15px var(--font-brand);
    white-space: nowrap; flex: 0 0 auto; }
.mt-mvp { display: flex; align-items: center; gap: 8px; width: 150px; flex: 0 0 150px; min-width: 0; }
.mt-mvp > span { display: flex; flex-direction: column; min-width: 0; }
.mt-mvp small { font: 600 10px/13px var(--font-brand); letter-spacing: .08em; color: var(--gold2); }
.mt-mvp b { font: 600 13px/16px var(--font-brand); color: var(--w100); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-dauer { width: 48px; flex: 0 0 48px; text-align: right; font: 500 13px/16px var(--font-brand); color: var(--w70); }
.mt-zeit { width: 44px; flex: 0 0 44px; text-align: right; font: 400 13px/16px var(--font-brand); color: var(--w45); }
/* ISZ: mit Tag („Sa 21:30“ / „16 Oct 21:30“ — TW.partieZeile `tag`, /live „Latest games“) */
.mt-zeit.tag { width: auto; flex: 0 0 auto; min-width: 44px; white-space: nowrap; }
.mt-clips { display: flex; align-items: center; gap: 4px; width: 32px; flex: 0 0 32px; color: var(--violett-text); }
.mt-clips b { font: 600 12px/15px var(--font-brand); }
.mt-caret { display: flex; color: var(--w45); transition: transform .15s ease; }
.mt-zeile[aria-expanded="true"] .mt-caret { transform: rotate(180deg); }

/* Aufgeklappt: kompaktes Lane-Duell (Figma 228:11067) */
.mt-partie.offen { background: var(--w03); border-radius: 10px; margin-bottom: 6px; }
.mt-partie.offen .mt-zeile { border-bottom-color: transparent; }
.mt-auf { padding: 4px 24px 8px; border-top: 1px solid var(--border); }
.mt-auf-kopf { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0 4px; }
.mt-auf-kopf > span { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.mt-auf-kopf b { font: 600 11px/14px var(--font-brand); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.mt-auf-kopf b.blau { color: var(--team-blau); } .mt-auf-kopf b.rot { color: var(--team-rot); }
.mt-auf-kopf small { font: 400 12px/15px var(--font-brand); color: var(--w45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-auf-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 10px;
    font: 400 12px/16px var(--font-brand); color: var(--w45); }
.mt-auf-fuss .tw-link { font-size: 13px; }

.mt-seiten { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px;
    font: 400 13px/16px var(--font-brand); color: var(--w45); }
.mt-fehler { display: flex; align-items: center; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--border);
    font: 500 14px/18px var(--font-brand); color: var(--w100); }
.mt-fehler svg { color: var(--w70); flex: 0 0 auto; }
.mt-fehler span { flex: 1 1 auto; }
.mt-leer-filter { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border);
    font: 400 14px/18px var(--font-brand); color: var(--w70); }

/* ═════════════ Lane-Duell-Zeile (Figma 226:11108) — Kompakt (Feed) | Voll (Detail) ═════════════ */
.mt-lane { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.mt-lane.voll { padding: 12px 0; }
.mt-lane.ich { background: var(--w04); }
.mt-seite { display: flex; align-items: center; gap: 12px; flex: 1 1 0; min-width: 0; }
.mt-seite.r { flex-direction: row-reverse; }
.mt-lc { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; object-fit: cover; background: var(--erhoeht); }
.voll .mt-lc { width: 40px; height: 40px; flex-basis: 40px; }
.mt-wer { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.voll .mt-wer { gap: 3px; }
.mt-seite.r .mt-wer { align-items: flex-end; text-align: right; }
.mt-nr { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mt-seite.r .mt-nr { flex-direction: row-reverse; }
.mt-n { font: 600 14px/18px var(--font-brand); color: var(--w100); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.mt-n:hover { text-decoration: underline; }
.mt-mvpchip { padding: 1px 5px; border-radius: 4px; background: rgba(232,180,80,.16); color: var(--gold2); font: 600 10px/13px var(--font-brand);
    font-style: normal; letter-spacing: .06em; flex: 0 0 auto; }
.mt-wer small { font: 400 12px/15px var(--font-brand); color: var(--w45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-items { display: flex; align-items: center; gap: 2px; }
.mt-seite.r .mt-items { flex-direction: row-reverse; }
.mt-items img, .mt-items i { width: 20px; height: 20px; border-radius: 4px; background: var(--w06); flex: 0 0 auto; }
.mt-items .schmuck { width: 18px; height: 18px; border-radius: 50%; }
.mt-wert { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; width: 58px; flex: 0 0 58px; white-space: nowrap; }
.voll .mt-wert { width: 64px; flex-basis: 64px; }
.mt-seite.r .mt-wert { align-items: flex-start; }
.mt-wert b { font: 600 14px/18px var(--font-brand); color: var(--w100); }
.mt-wert small { font: 400 11px/14px var(--font-brand); color: var(--w45); }
.mt-dmg { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; width: 80px; flex: 0 0 80px; }
.mt-seite.r .mt-dmg { align-items: flex-start; }
.mt-dmg b { font: 500 13px/16px var(--font-brand); color: var(--w100); white-space: nowrap; }
.mt-dmg i { display: flex; width: 80px; height: 4px; border-radius: 2px; background: var(--w08); overflow: hidden; }
.mt-seite.r .mt-dmg i { justify-content: flex-end; }
.mt-dmg em { display: block; height: 4px; border-radius: 2px; background: var(--team-blau); }
.mt-seite.r .mt-dmg em { background: var(--team-rot); }
.mt-gdr { width: 36px; flex: 0 0 36px; text-align: right; font: 600 13px/16px var(--font-brand); color: var(--w45); }
.mt-seite.r .mt-gdr { text-align: left; }
.mt-gdr.plus { color: var(--gruen); } .mt-gdr.minus { color: var(--red); }
.mt-rolle { width: 56px; flex: 0 0 56px; display: flex; justify-content: center; align-items: center; height: 24px; }
.voll .mt-rolle { width: 72px; flex-basis: 72px; }
.mt-rolle .tw-rolle-ic { width: 18px; height: 18px; opacity: .7; }
.mt-seite.leer { visibility: hidden; }

/* ═════════════ Partie-Detail (W-M2) ═════════════ */
body.page-match { position: relative; }
.mt-held { position: absolute; left: 0; right: 0; top: 72px; height: 460px; z-index: -1; overflow: hidden; pointer-events: none;
    background: var(--mt-splash, none) center 20% / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.3) 85%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.3) 85%, transparent 100%); }
.mt-held::before, .mt-held::after { content: ""; position: absolute; inset: 0; }
.mt-held::before { background: linear-gradient(90deg, rgba(13,13,18,.9) 0%, rgba(13,13,18,.6) 40%, rgba(13,13,18,.35) 70%, rgba(13,13,18,.55) 100%); }
.mt-held::after { background: linear-gradient(180deg, rgba(13,13,18,.25) 0%, rgba(13,13,18,.2) 45%, rgba(13,13,18,.8) 100%); }
.mt-held.ohne { display: none; }
body.mt-404 .mt-held { display: none; }

.mt-hero { display: flex; align-items: center; gap: 32px; margin-top: 24px; }
.mt-erg { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mt-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mt-chip { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 6px; background: var(--w06); font: 500 12px/15px var(--font-brand);
    color: var(--w70); white-space: nowrap; }
.mt-chip.du { background: var(--w14); color: var(--violett-text); }
.mt-gross { display: flex; align-items: center; gap: 18px; }
.mt-gross > b { font: 700 72px/1 var(--font-brand); color: var(--w100); }
.mt-gross > b.verl { color: var(--w45); }
.mt-gross > em { font: 400 40px/1 var(--font-brand); font-style: normal; color: var(--w25); }
.mt-seitenwort { display: flex; flex-direction: column; gap: 2px; font: 600 12px/15px var(--font-brand); letter-spacing: .08em; text-transform: uppercase; }
.mt-seitenwort.b { align-items: flex-end; } .mt-seitenwort.b b { color: var(--team-blau); }
.mt-seitenwort.r b { color: var(--team-rot); }
.mt-seitenwort b { font-weight: 600; }
.mt-seitenwort small { font: inherit; color: var(--w45); }
.mt-seitenwort small.sieg { color: var(--gruen); }
.mt-meta { margin: 0; font: 400 14px/18px var(--font-brand); color: var(--w55); }
.mt-turnier { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin: 0; font: 400 13px/17px var(--font-brand); color: var(--w70); }
.mt-turnier svg { color: var(--gold2); }
.mt-turnier a { color: var(--w100); font-weight: 600; text-decoration: none; }
.mt-turnier a:hover { text-decoration: underline; }
.mt-turnier .leise { color: var(--w45); }

.mt-mvpkarte { display: flex; flex-direction: column; gap: 12px; width: 340px; flex: 0 0 340px; padding: 18px 20px; border-radius: 14px;
    border: 1px solid var(--border); background: rgba(13,13,18,.6); }
.mt-mvpkarte-p { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mt-mvpkarte-p > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mt-mvpbild { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 12px; border: 1.5px solid var(--gold2); object-fit: cover; background: var(--erhoeht); }
.mt-mvpname { font: 600 20px/25px var(--font-brand); color: var(--w100); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.mt-mvpname:hover { text-decoration: underline; }
.mt-mvpkarte-p small { font: 400 13px/16px var(--font-brand); color: var(--w70); }
.mt-mvpkarte .tw-btn { align-self: flex-start; }

/* Teamsummen + Gold-Anteil */
.mt-summen { display: flex; flex-direction: column; gap: 10px; margin-top: 40px; }
.mt-summen-w { display: flex; align-items: center; }
.mt-summen-s { display: flex; align-items: center; gap: 28px; }
.mt-summen-s > div { display: flex; flex-direction: column; gap: 2px; }
.mt-summen-s.r > div { align-items: flex-end; }
.mt-summen-s b { font: 600 20px/25px var(--font-brand); color: var(--w100); white-space: nowrap; }
.mt-summen-s span { font: 600 11px/14px var(--font-brand); letter-spacing: .08em; text-transform: uppercase; color: var(--w45); white-space: nowrap; }
.mt-summen-t { display: none; }
.mt-anteil { display: flex; gap: 3px; height: 6px; }
.mt-anteil i { height: 6px; border-radius: 3px; min-width: 1px; }
.mt-anteil .b { background: var(--team-blau); } .mt-anteil .r { background: var(--team-rot); }

/* Lane-Duell (Voll) mit Spaltenkopf */
.mt-lanes { margin-top: 28px; }
.mt-spalten { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.mt-spalten span { font: 600 11px/14px var(--font-brand); letter-spacing: .08em; text-transform: uppercase; color: var(--w45); white-space: nowrap; }
.mt-spalten .blau { color: var(--team-blau); } .mt-spalten .rot { color: var(--team-rot); }

/* Unten: Clips der Partie | Haarlinie | MVP-Vote 400 — ohne Clips nimmt der Vote die ganze Breite */
.mt-unten { display: grid; grid-template-columns: minmax(0, 1fr) 1px 400px; margin-top: 48px; align-items: start; }
.mt-unten.voll { grid-template-columns: minmax(0, 1fr); }
.mt-unten .tw-vline { align-self: stretch; }
.mt-clipsteil { padding-right: 40px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mt-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mt-klein-link { font-size: 12px; }
.mt-cliprast.pf-clips { grid-template-columns: repeat(auto-fill, minmax(260px, 302px)); }
.mt-vote { display: flex; flex-direction: column; gap: 14px; padding-left: 40px; min-width: 0; }
.mt-unten.voll .mt-vote { padding-left: 0; }
.mt-unten.voll .mt-clipsteil { padding-right: 0; }
.mt-stimme { display: flex; align-items: center; gap: 10px; }
.mt-stimme img { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 6px; object-fit: cover; background: var(--erhoeht); }
.mt-stimme > div { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 0; }
.mt-stimme span { display: flex; justify-content: space-between; gap: 8px; }
.mt-stimme b { font: 600 13px/16px var(--font-brand); color: var(--w100); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-stimme small { font: 400 12px/15px var(--font-brand); color: var(--w55); white-space: nowrap; }
.mt-stimme i { display: block; height: 4px; border-radius: 2px; background: var(--w08); overflow: hidden; }
.mt-stimme em { display: block; height: 4px; border-radius: 2px; background: var(--w45); }
.mt-stimme em.gold { background: var(--gold2); }

/* Mehr zur Partie: Spielverlauf, Draft, Meldung (#181) — zugeklappt */
.mt-mehrteil { display: flex; flex-direction: column; margin-top: 40px; border-top: 1px solid var(--border); }
.mt-mehr { border-bottom: 1px solid var(--border); }
.mt-mehr > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 14px 0;
    font: 600 11px/14px var(--font-brand); letter-spacing: .08em; text-transform: uppercase; color: var(--w45); }
.mt-mehr > summary::-webkit-details-marker { display: none; }
.mt-mehr > summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 1.5px solid var(--w45); border-bottom: 1.5px solid var(--w45);
    transform: rotate(45deg); transition: transform .15s ease; }
.mt-mehr[open] > summary::after { transform: rotate(-135deg); }
.mt-mehr > summary:hover { color: var(--w100); }
.mt-mehr > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mt-vl { display: flex; flex-direction: column; padding-bottom: 14px; max-height: 360px; overflow-y: auto; }
.mt-vl-z { display: flex; gap: 14px; padding: 4px 0; font: 400 13px/18px var(--font-brand); color: var(--w70); }
.mt-vl-z > span:first-child { width: 40px; flex: 0 0 40px; color: var(--w45); }
.mt-vl-e .b { color: var(--team-blau); } .mt-vl-e .r { color: var(--team-rot); } .mt-vl-e .x { color: var(--w25); }
.mt-vl-e small { margin-left: 8px; color: var(--w45); }
.mt-dr { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; }
.mt-dr > div { display: flex; gap: 6px; flex-wrap: wrap; }
.mt-dk img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; border: 1.5px solid var(--team-blau); }
.mt-dk.r img { border-color: var(--team-rot); }
.mt-dk.ban img { filter: grayscale(1); opacity: .6; }
.mt-meld > p { margin: 0; padding: 14px 0; font: 400 13px/18px var(--font-brand); color: var(--w70); }
.mt-meld b.offen { color: var(--gold2); }
.mt-meld-f { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; max-width: 560px; }
.mt-meld-fehler { margin: 0; font: 500 13px/18px var(--font-brand); color: var(--red); }

/* Nicht gefunden / fremde Liga (Zustandstafel): Seite/Hinweis mittig im Seitenrahmen */
.mt-404-box { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 120px 0 80px; color: var(--w70); }
.mt-404-box h1 { margin: 6px 0 0; font: 600 20px/26px var(--font-brand); color: var(--w100); }
.mt-404-box p { margin: 0; font: 400 14px/20px var(--font-brand); }
.mt-404-box .tw-btn { margin-top: 14px; }
.mt-skel-hero { margin: 24px 0 40px; max-width: 640px; }

/* ═════════════ Brueche ═════════════ */
@media (max-width: 1280px) {
    .mt-avg { display: none; }
    .mt-mvp { width: 130px; flex-basis: 130px; }
}
@media (max-width: 1180px) {
    .mt-zeile { gap: 12px; }
    .mt-icons img { width: 24px; height: 24px; }
    .mt-dauer { display: none; }
    .voll .mt-wert + .mt-wert { display: none; }
}
@media (max-width: 1080px) {
    .mt-hero { flex-direction: column; align-items: stretch; }
    .mt-hero > .mt-fuell { display: none; }
    .mt-mvpkarte { width: auto; flex: 0 0 auto; max-width: 420px; }
    .mt-unten { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .mt-unten .tw-vline { display: none; }
    .mt-clipsteil { padding-right: 0; }
    .mt-vote { padding-left: 0; }
    .mt-mvp, .mt-du { display: none; }
    .mt-motd-r .mt-motd-icons { display: none; }
    .mt-motd-r { align-self: flex-end; }
}
@media (max-width: 860px) {
    .mt-icons { display: none; }
    .mt-lane:not(.voll) .mt-dmg { display: none; }
    .voll .mt-dmg { display: none; }
}

/* 430 (W-M3): Karte je Partie — Zeile 1 Modus/Ø/Clips/Zeit · Zeile 2 5 gegen 5 + Score · Zeile 3 MVP/You/Dauer. Kein Aufklappen. */
@media (max-width: 600px) {
    .mt-main { padding-top: calc(72px + 24px); }
    .mt-kopf { flex-direction: column; align-items: flex-start; gap: 14px; }
    .mt-filter { margin-top: 16px; }
    .mt-suche { width: 100%; }
    .mt-filter > .mt-fuell { flex-basis: 100%; height: 0; }
    .mt-motd { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 32px 24px; margin-top: 16px; }
    .mt-motd > .mt-fuell { display: none; }
    .mt-motd-score { gap: 10px; }
    .mt-motd-score b { font-size: 56px; }
    .mt-motd-r { align-items: flex-start; align-self: stretch; }
    .mt-motd-r .mt-motd-icons { display: flex; flex-wrap: wrap; }
    .mt-motd-mvp { flex-wrap: wrap; }
    .mt-motd-mvp b { white-space: normal; flex-basis: 100%; }
    #mt-liste { margin-top: 16px; gap: 16px; }
    .mt-tag { gap: 16px; }
    .mt-tag-kopf { padding-bottom: 0; }

    .mt-zeile { display: grid; height: auto; gap: 10px 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
        grid-template-columns: auto auto 1fr auto auto; grid-template-areas: "modus avg . clips zeit" "teams teams teams teams teams" "mvp mvp mvp du dauer"; }
    .mt-zeile.ich { background: var(--w03); }
    .mt-mark { top: 12px; height: 40px; }
    .mt-zeile .mt-modus { grid-area: modus; justify-self: start; }
    .mt-tn { display: none; }
    .mt-avg { display: block; grid-area: avg; width: auto; align-self: center; }
    .mt-teams { grid-area: teams; justify-content: space-between; gap: 6px; }
    .mt-icons { display: flex; gap: 3px; }
    .mt-icons img { width: 22px; height: 22px; border-radius: 5px; }
    .mt-score b { font-size: 20px; }
    .mt-zeile > .mt-fuell, .mt-caret { display: none; }
    .mt-mvp { display: flex; grid-area: mvp; width: auto; }
    .mt-du { display: inline-block; grid-area: du; align-self: center; }
    .mt-dauer { display: block; grid-area: dauer; align-self: center; }
    .mt-zeit { grid-area: zeit; }
    .mt-clips { grid-area: clips; width: auto; }
    .mt-seiten { flex-wrap: wrap; }

    /* Detail 430: Lane-Paar Blau-Zeile ueber Rot-Zeile, Items klein darunter; Teamsummen zweizeilig */
    .mt-hero { margin-top: 16px; gap: 20px; }
    .mt-gross { gap: 12px; }
    .mt-gross > b { font-size: 52px; }
    .mt-gross > em { font-size: 28px; }
    .mt-mvpkarte { max-width: none; }
    .mt-summen { margin-top: 28px; }
    .mt-summen-w { flex-direction: column; align-items: stretch; gap: 12px; }
    .mt-summen-w > .mt-fuell { display: none; }
    .mt-summen-s { gap: 0; justify-content: space-between; }
    .mt-summen-s.r { flex-direction: row-reverse; }
    .mt-summen-s.r > div { align-items: flex-start; }
    .mt-summen-t { display: block; width: 84px; flex: 0 0 84px; font: 600 10px/13px var(--font-brand); letter-spacing: .06em; text-transform: uppercase; }
    .mt-summen-s.r .mt-summen-t { order: 1; }
    .mt-summen-s.b .mt-summen-t, .mt-summen-s:not(.r) .mt-summen-t { color: var(--team-blau); }
    .mt-summen-s.r .mt-summen-t { color: var(--team-rot); }
    .mt-summen-s b { font-size: 17px; line-height: 22px; }
    .mt-summen-s span { font-size: 10px; letter-spacing: .06em; }
    .mt-spalten .mitte { display: none; }
    .mt-lane, .mt-lane.voll { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 0; position: relative; }
    .mt-seite.r { flex-direction: row; }
    .mt-seite.r .mt-wer { align-items: flex-start; text-align: left; }
    .mt-seite.r .mt-nr, .mt-seite.r .mt-items { flex-direction: row; }
    .mt-seite.r .mt-wert, .mt-seite.r .mt-dmg { align-items: flex-end; }
    .mt-seite.r .mt-dmg i { justify-content: flex-start; }
    .mt-seite.r .mt-gdr { text-align: right; }
    .mt-seite { gap: 8px; }
    .mt-seite.b { box-shadow: inset 2px 0 0 var(--team-blau); padding-left: 8px; }
    .mt-seite.r { box-shadow: inset 2px 0 0 var(--team-rot); padding-left: 8px; }
    .mt-lc, .voll .mt-lc { width: 32px; height: 32px; flex-basis: 32px; }
    .mt-wert, .voll .mt-wert { width: 52px; flex-basis: 52px; }
    .voll .mt-wert + .mt-wert { display: flex; width: 40px; flex-basis: 40px; }
    .mt-dmg, .voll .mt-dmg { display: flex; width: 52px; flex-basis: 52px; }
    .mt-dmg i { width: 52px; }
    .mt-gdr { width: 32px; flex-basis: 32px; }
    .mt-items img, .mt-items i { width: 16px; height: 16px; }
    .mt-items .schmuck { width: 14px; height: 14px; }
    .mt-rolle, .voll .mt-rolle { position: absolute; right: 0; top: -2px; width: auto; height: auto; display: none; }
    .mt-n { max-width: 140px; }
    .mt-cliprast.pf-clips { grid-template-columns: minmax(0, 1fr); }
    .mt-404-box { padding: 80px 0 48px; }
}

/* ARAM Mayhem: Augment-Namen unter den Items (wie die alte Detailseite) */
.mt-wer small.mt-augs { font-size: 11px; line-height: 14px; max-width: 280px; }
@media (max-width: 600px) { .mt-wer small.mt-augs { max-width: 200px; } }