Modul-Tab im Plugin-Raster: Filter-Reiter und Symbole

Vorbild war das MEE6-Dashboard: Kategorie-Reiter über einem Raster aus
Karten, jede mit einem eigenen Symbol. Inhaltlich war unser Modul-Tab
schon dort — es fehlten genau diese zwei Dinge.

Die Gruppen standen als Überschriften untereinander, was bei 35 Karten
eine lange Rolle ergab. Jetzt filtern Reiter mit Anzahl: Alle, die vier
Gruppen, dazu „Noch einzurichten" und „Ausgeschaltet". Die beiden letzten
sind bewusst dabei — mit genau diesen Fragen kommt man am häufigsten her.
Die Gruppe steht klein unter dem Namen, damit sie im gefilterten Raster
nicht verlorengeht.

Jede Karte hat eine Symbol-Kachel, die bei laufendem Modul in der
Markenfarbe leuchtet und sonst grau bleibt — man erkennt eine Funktion
damit am Bild statt am Lesen. Die Zuordnung lag schon in der
Funktionsseite; sie liegt jetzt in module-icons.jsx, damit beide Seiten
dieselbe benutzen.

Farbige Kachelbilder wie bei MEE6 gibt es bewusst nicht: die Strichsymbole
passen zum Rest der Oberfläche, bunte Kacheln wären ein Fremdkörper.

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

frontend/src/style.css

@@ -1759,28 +1759,69 @@ button.with-icon, a.with-icon { justify-content: center; }
     display: grid; gap: .9rem;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 }
+/* Filter über dem Raster */
+.mod-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
+.mod-filter {
+    display: inline-flex; align-items: center; gap: .45rem;
+    font-family: var(--mono); font-size: .62rem;
+    letter-spacing: .12em; text-transform: uppercase;
+    color: var(--muted); background: var(--bg2);
+    border: 1px solid var(--border); border-radius: 99px;
+    padding: .35rem .8rem; cursor: pointer;
+    transition: color .15s, border-color .15s, background .15s;
+}
+.mod-filter:hover:not(:disabled) { color: var(--text); border-color: var(--neon); }
+.mod-filter.active { color: #0a0a0a; background: var(--neon); border-color: var(--neon); }
+.mod-filter:disabled { opacity: .3; cursor: default; }
+.mod-filter-n {
+    font-size: .58rem; opacity: .7;
+    padding-left: .35rem; border-left: 1px solid currentColor;
+}
+
 .mod-card {
-    display: flex; flex-direction: column; gap: .5rem;
-    padding: 1.1rem 1.2rem; opacity: .6;
-    transition: opacity .2s, border-color .2s;
+    display: flex; flex-direction: column; gap: .6rem;
+    padding: 1.1rem 1.2rem; opacity: .55;
+    transition: opacity .2s, border-color .2s, transform .2s;
 }
 .mod-card.on { opacity: 1; }
-.mod-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
+.mod-card:hover { border-color: var(--neon); transform: translateY(-2px); }
+.mod-head { display: flex; align-items: flex-start; gap: .8rem; }
+/* Symbol-Kachel wie auf der Funktionsseite — macht die Karten unterscheidbar */
+.mod-icon {
+    flex: none; display: inline-flex; align-items: center; justify-content: center;
+    width: 2.4rem; height: 2.4rem; border-radius: 9px;
+    background: var(--bg3); border: 1px solid var(--border);
+    color: var(--muted2);
+    transition: color .2s, border-color .2s;
+}
+.mod-card.on .mod-icon { color: var(--neon); border-color: rgba(245, 197, 24, .3); }
+.mod-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
 .mod-name {
-    font-family: var(--display); font-size: 1.2rem;
+    font-family: var(--display); font-size: 1.15rem;
     letter-spacing: .04em; color: var(--text);
 }
-.mod-desc { color: var(--muted); font-weight: 300; font-size: .95rem; line-height: 1.45; flex: 1; }
-.mod-missing, .mod-ready {
+.mod-group {
+    font-family: var(--mono); font-size: .55rem;
+    letter-spacing: .16em; text-transform: uppercase; color: var(--muted2);
+}
+.mod-desc { color: var(--muted); font-weight: 300; font-size: .93rem; line-height: 1.45; flex: 1; }
+.mod-foot {
+    display: flex; align-items: center; justify-content: space-between;
+    gap: .8rem; flex-wrap: wrap;
+    padding-top: .2rem;
+}
+.mod-missing, .mod-ready, .mod-off {
     font-family: var(--mono); font-size: .62rem;
     letter-spacing: .1em; text-transform: uppercase;
 }
 .mod-missing { color: var(--neon2); }
 .mod-ready { color: var(--success); }
+.mod-off { color: var(--muted2); }
 .mod-link {
-    align-self: flex-start; background: none; border: 0; padding: 0;
+    background: none; border: 0; padding: 0; margin-left: auto;
     font-family: var(--mono); font-size: .62rem; letter-spacing: .15em;
     text-transform: uppercase; color: var(--muted2); cursor: pointer;
+    white-space: nowrap;
     transition: color .15s;
 }
 .mod-link:hover { color: var(--neon); }