/* mm-grafik.css  Aussehen der Grafik unter einer Bot-Antwort (04.10.)
   Die Farben kommen aus der Seite: --tx hell, --or orange, --li Linie, --gr grau. */
/* 04.10.: Farbe fest setzen, die beiden Seiten definieren ihre Variablen unterschiedlich. */
.mg { width:100%; display:flex; flex-direction:column; gap:8px; color:#F5F0E6; }
.mg-kennz { background:var(--tx,#F5F0E6); color:#0E0E0E; padding:10px 12px; display:flex; justify-content:space-between; gap:10px; }
/* 04.10.: Links darf schrumpfen, rechts bleibt die Zahl ganz. */
.mg-kennz > div:first-child { flex:1 1 auto; min-width:0; }
.mg-kennz .mg-re { flex:0 0 auto; }
.mg-kennz small { display:block; font:900 11px/1.2 'Archivo', sans-serif; letter-spacing:.07em; text-transform:uppercase; color:#6b6358; }
.mg-kennz b { font-family:'Anton', sans-serif; font-weight:400; font-size:28px; line-height:1.05; display:block; margin-top:2px; }
.mg-kennz.klein b { font-size:17px; line-height:1.15; }
.mg-kennz .mg-re b { white-space:nowrap; }
.mg-re { text-align:right; }
.mg-balken { display:flex; height:9px; }
.mg-balken i { display:block; }
.mg-bu { display:flex; justify-content:space-between; font:900 11px/1.4 'Archivo', sans-serif; text-transform:uppercase; }
.mg-or { color:var(--or,#F03C18); }
.mg-chips { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.mg-chips div { border:1px solid var(--li,#3B3730); padding:5px 2px; text-align:center; }
.mg-chips div.an { background:var(--or,#F03C18); border-color:var(--or,#F03C18); color:#0E0E0E; }
.mg-chips b { display:block; font-family:'Anton', sans-serif; font-weight:400; font-size:14px; }
.mg-chips em { font-style:normal; font:700 10px 'Archivo', sans-serif; }
.mg-teil { font:700 11px/1.2 'Archivo', sans-serif; letter-spacing:.09em; color:#B8B2A6; text-transform:uppercase; margin:7px 0 2px; }
/* 06.10. (Maik: quatsch, eine Aufstellung mit verletzten Spielern zu zeigen): wer fehlt, steht ueber der Elf */
.mg-fehlt { font:600 14px/1.3 'Barlow', sans-serif; color:#F03C18; padding:8px 0 2px; }
/* 06.10.: Zonen gegeneinander, eine Zeile je Mannschaftsteil */
.mg-zone { display:grid; grid-template-columns:1fr 54px; gap:4px 10px; padding:9px 0 7px; border-bottom:1px solid rgba(255,255,255,.1); }
.mg-zone:last-child { border-bottom:0; }
.mg-zw { grid-column:1/-1; font:700 14px/1.2 'Barlow', sans-serif; color:#B8B2A6; }
.mg-zz { display:flex; align-items:center; gap:8px; font:700 16px/1 'Barlow Condensed', sans-serif; color:#F5F0E6; }
.mg-zb { flex:1 1 auto; height:8px; background:#F03C18; display:block; min-width:40px; }
.mg-zb b { display:block; height:8px; background:#F5F0E6; }
.mg-zd { font:800 18px/1 'Barlow Condensed', sans-serif; color:#C8FF00; text-align:right; align-self:center; }
.mg-zd.neg { color:#F03C18; }
.mg-z { display:flex; justify-content:space-between; align-items:baseline; padding:2px 0; }
.mg-z b { font-family:'Anton', sans-serif; font-weight:400; font-size:16px; text-transform:uppercase; }
.mg-z i { font-style:normal; font:700 14px 'Archivo', sans-serif; color:var(--or,#F03C18); }
.mg-feld { position:relative; width:100%; height:290px; background:#0E0E0E; border:1px solid var(--li,#3B3730); }
.mg-mittel { position:absolute; left:0; right:0; top:50%; border-top:1px solid var(--li,#3B3730); }
.mg-sp { position:absolute; width:78px; transform:translate(-50%,-50%); text-align:center; }
.mg-sp u { display:flex; width:38px; height:38px; margin:0 auto; border-radius:50%; align-items:center; justify-content:center;
           font:900 11px 'Archivo', sans-serif; color:#0E0E0E; text-decoration:none; }
.mg-sp s { display:block; text-decoration:none; font:700 11px/1.2 'Archivo', sans-serif; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mg-tw u { box-shadow:0 0 0 2px var(--or,#F03C18); }
.mg-rz { display:grid; grid-template-columns:20px minmax(56px,1fr) 1.5fr 44px; gap:7px; align-items:center; padding:3px 0; }
.mg-rg { font:700 12px 'Archivo', sans-serif; color:#B8B2A6; }
.mg-rn { font:700 14px 'Archivo', sans-serif; color:#F5F0E6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mg-rb { display:block; height:10px; background:#1A1815; }
.mg-rb i { display:block; height:10px; background:var(--or,#F03C18); }
.mg-rw { font:700 13px 'Archivo', sans-serif; color:var(--or,#F03C18); text-align:right; white-space:nowrap; }