Modliste: melden was sich geaendert hat, einzeln laden

Bisher gab es fuer Mods nur einen Link auf das Sammelpaket des Hosters — vier
Gigabyte, auch wenn sich zwei Dateien geaendert haben. Jetzt liest der Bot die
Modliste aus der Statusabfrage, die er ohnehin holt, und meldet im Kanal, was
neu, aktualisiert oder entfernt wurde. Beim ersten Durchlauf bleibt es still,
sonst kaeme eine Meldung ueber 110 "neue" Mods.

Geaendert heisst: andere Version oder anderer Hash. Beides einzeln reicht
nicht — manche Modder bessern nach, ohne die Version zu erhoehen.

Dazu die Seite /mods/<server>: jeder Mod mit Version und Groesse, Suche ueber
Titel, Dateiname und Autor, und ein Download je Zeile. Der laeuft durch den
Bot, damit der Zugangs-Code des Spielservers nicht in einem Link landet — mit
dem Code liesse sich auch der ganze Spielstand lesen. Angefragt wird nur, was
wirklich in der Modliste steht; ueber den Dateinamen kommt man an nichts
anderes heran.

Groessen lernt der Bot beim Weiterleiten. Der Spielserver beantwortet kein
HEAD (501) und ignoriert Range, es gibt also keinen billigen Weg, sie vorher
zu erfahren — und 4 GB nur fuers Anzeigen zu holen waere keiner.

Nebenbei gefunden und behoben: 'server.mods' und 'commands.tag' gab es je
zweimal in den Sprachdateien. Der spaetere Eintrag gewinnt still, deshalb
stand auf dem neuen Knopf woertlich "%s Mods (110)" und auf der Befehlsseite
die Beschreibung von /tag statt der Kopfzeile.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/src/style.css

@@ -2900,3 +2900,64 @@ button.with-icon, a.with-icon { justify-content: center; }
     font-family: var(--mono); font-size: .68rem; color: var(--muted2);
     letter-spacing: .04em; margin-top: .1rem;
 }
+
+/* ── MOD-LISTE (LS-Server) ─────────────────────────── */
+.mod-bar {
+    display: flex; justify-content: space-between; align-items: center;
+    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem;
+}
+.mod-count {
+    display: flex; align-items: center; gap: .5rem;
+    font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
+    text-transform: uppercase; color: var(--muted);
+}
+.mod-count strong { color: var(--neon); font-size: 1rem; font-weight: 400; }
+.mod-sum { color: var(--muted2); }
+.mod-search {
+    display: flex; align-items: center; gap: .5rem; flex: 1 1 240px; max-width: 340px;
+    border: 1px solid var(--border); background: var(--bg2); padding: .45rem .75rem;
+    color: var(--muted);
+}
+.mod-search:focus-within { border-color: var(--neon); }
+.mod-search input {
+    flex: 1; min-width: 0; background: none; border: 0; outline: none;
+    color: var(--text); font-family: var(--body); font-size: 1rem;
+}
+.mod-list { list-style: none; display: flex; flex-direction: column; gap: 1px; }
+.mod-row {
+    display: grid; align-items: center; gap: .9rem;
+    grid-template-columns: 1fr auto auto auto;
+    padding: .7rem .9rem; background: var(--bg2);
+    border-left: 2px solid transparent;
+}
+.mod-row:hover { background: var(--bg3); border-left-color: var(--neon); }
+.mod-info { min-width: 0; }
+.mod-title { display: block; color: var(--text); font-size: 1.05rem; }
+.mod-meta {
+    display: block; font-family: var(--mono); font-size: .62rem;
+    color: var(--muted2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.mod-version, .mod-size {
+    font-family: var(--mono); font-size: .68rem; color: var(--muted);
+    white-space: nowrap;
+}
+/* Feste Spalte, damit die Downloadknöpfe untereinander stehen und nicht
+   je nach Dateigrösse wandern — auch dann, wenn die Grösse noch fehlt. */
+.mod-size { min-width: 4.5rem; text-align: right; }
+.mod-dl {
+    display: inline-flex; align-items: center; gap: .4rem;
+    border: 1px solid var(--border); padding: .35rem .7rem;
+    font-family: var(--mono); font-size: .65rem; letter-spacing: .1em;
+    text-transform: uppercase; color: var(--muted); white-space: nowrap;
+    transition: border-color .15s, color .15s;
+}
+.mod-dl:hover { border-color: var(--neon); color: var(--neon); }
+.mod-hint { color: var(--muted2); font-size: .9rem; margin-top: 1.2rem; }
+
+@media (max-width: 640px) {
+    .mod-row { grid-template-columns: 1fr auto; grid-template-areas: 'info dl' 'meta meta'; }
+    .mod-info { grid-area: info; }
+    .mod-dl { grid-area: dl; }
+    .mod-version, .mod-size { grid-area: meta; text-align: left; min-width: 0; }
+    .mod-version::after { content: ' ·'; }
+}