Team-Bereich aufgehuebscht: Avatare, Rechte-Chips, Protokoll mit relativer Zeit

Der Team-Reiter war funktional, aber roh: Rechte standen als "content,community"
da, es gab keine Gesichter, und das Protokoll war eine Wand aus Zeitstempeln.

- /api/webadmins und /api/auditlog liefern jetzt Avatar und Anzeigename aus dem
  Member-Cache — kostet keinen zusaetzlichen Discord-Aufruf
- Owner-Zeile mit eigenem Chip "Alle Bereiche", damit klar ist, wer alles darf
- Bereiche als lesbare Chips statt roher IDs; die Auswahl beim Anlegen sind
  klickbare Karten mit Beschreibung
- Protokoll zeigt relative Zeit ("vor 37 Min"), erst 12 Zeilen, Rest auf Klick
- Toenungen ueber color-mix aus --neon: stimmt im Hub (gold) wie auf der
  Bot-Seite (orange)

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

frontend/src/style.css

@@ -1736,10 +1736,123 @@ label.toggle {
 .srv-checked { font-family: var(--mono); font-size: .62rem; color: var(--muted2); margin-top: .8rem; }
 
 /* ── AUDIT-LOG ─────────────────────────────────────── */
-.audit-list { max-height: 24rem; overflow-y: auto; }
-.audit-ts { font-family: var(--mono); font-size: .65rem; color: var(--muted2); white-space: nowrap; }
-.audit-action { font-family: var(--mono); font-size: .7rem; color: var(--neon); white-space: nowrap; }
-.audit-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18rem; }
+/* ── TEAM & PROTOKOLL ──────────────────────────────── */
+.tm-list {
+    display: flex; flex-direction: column;
+    border: 1px solid rgba(255, 255, 255, .07);
+    border-radius: 12px; overflow: hidden;
+    margin-bottom: 1.6rem;
+}
+.tm-row {
+    display: flex; align-items: center; gap: .9rem;
+    padding: .7rem .9rem;
+    border-bottom: 1px solid rgba(255, 255, 255, .05);
+    font-size: .9rem;
+    transition: background .15s ease;
+}
+.tm-row:last-child { border-bottom: none; }
+.tm-row:hover { background: rgba(255, 255, 255, .02); }
+/* Tönungen aus der Leitfarbe mischen — die ist auf der Bot-Seite orange,
+   im Hub gold, und beides soll stimmen. */
+.tm-row.owner { background: color-mix(in srgb, var(--neon) 5%, transparent); }
+.tm-row.aktiv {
+    background: color-mix(in srgb, var(--neon) 9%, transparent);
+    box-shadow: inset 3px 0 0 var(--neon);
+}
+.tm-row.leer {
+    justify-content: center; color: var(--muted2);
+    font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
+    padding: 1.4rem;
+}
+
+.tm-avatar {
+    width: 34px; height: 34px; border-radius: 50%;
+    flex: 0 0 auto; object-fit: cover;
+    border: 1px solid rgba(255, 255, 255, .12);
+}
+.tm-avatar.klein { width: 24px; height: 24px; }
+.tm-avatar.ohne {
+    display: grid; place-items: center;
+    background: rgba(255, 255, 255, .05);
+    color: var(--muted); font-weight: 700; font-size: .85rem;
+}
+.tm-avatar.klein.ohne { font-size: .65rem; }
+
+.tm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
+.tm-name { font-weight: 600; }
+.tm-scopes { display: flex; flex-wrap: wrap; gap: .3rem; }
+.tm-chip {
+    font-family: var(--mono); font-size: .6rem; letter-spacing: .08em;
+    padding: .18rem .45rem; border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, .12);
+    color: var(--muted); white-space: nowrap;
+}
+.tm-chip.alle {
+    border-color: color-mix(in srgb, var(--neon) 40%, transparent);
+    color: var(--neon);
+}
+.tm-role {
+    font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
+    color: var(--neon); text-transform: uppercase;
+}
+
+.tm-form-title {
+    font-family: var(--mono); font-size: .75rem; letter-spacing: .16em;
+    text-transform: uppercase; color: var(--muted);
+    margin: 0 0 1rem;
+}
+
+.tm-scopes-pick {
+    display: grid; gap: .5rem;
+    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+}
+.tm-scope {
+    display: flex; align-items: center; gap: .6rem; text-align: left;
+    padding: .6rem .7rem;
+    background: rgba(0, 0, 0, .25);
+    border: 1px solid rgba(255, 255, 255, .09);
+    border-radius: 10px; color: var(--muted);
+    cursor: pointer; transition: all .15s ease;
+}
+.tm-scope:hover { border-color: rgba(255, 255, 255, .22); color: var(--text); }
+.tm-scope.on {
+    border-color: var(--neon);
+    background: color-mix(in srgb, var(--neon) 8%, transparent);
+    color: var(--text);
+}
+.tm-scope-mark {
+    width: 18px; height: 18px; flex: 0 0 auto;
+    display: grid; place-items: center;
+    border: 1px solid rgba(255, 255, 255, .2); border-radius: 5px;
+    font-size: .7rem; color: #0a0a0a;
+}
+.tm-scope.on .tm-scope-mark { background: var(--neon); border-color: var(--neon); }
+.tm-scope-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
+.tm-scope-id {
+    font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
+    color: inherit;
+}
+.tm-scope-desc { font-size: .72rem; color: var(--muted2); }
+
+.tm-row.audit { font-size: .82rem; padding: .5rem .9rem; }
+.tm-audit-name { font-weight: 600; min-width: 7rem; }
+.tm-audit-action {
+    font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
+    color: var(--neon); white-space: nowrap; min-width: 9rem;
+}
+.tm-audit-detail {
+    flex: 1; min-width: 0; color: var(--muted);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.tm-audit-time {
+    font-family: var(--mono); font-size: .62rem;
+    color: var(--muted2); white-space: nowrap;
+}
+
+@media (max-width: 700px) {
+    .tm-audit-action { min-width: 0; }
+    .tm-audit-detail { display: none; }
+}
 
 /* ── STARTSEITE ────────────────────────────────────── */
 .home-hero { min-height: 420px; }