UX-Paket: Navbar aufgeräumt, /server-Seite, Lightbox, Skeletons, Audit-Log, Reroll

- Navbar entschlackt: nur noch Devlog · Roadmap · Server · Community ·
  Setup; Galerie/Level/Events/Changelog im Community-Dropdown,
  Profil/Commits/Logout im Avatar-Menü; Mobile-Burger mit Drawer
- Öffentliche /server-Seite: Live-Status-Karten mit Spieler-Balken,
  Map, Connect-Button und 24h-Spielerzahl-Chart (SVG); Monitor sampelt
  jede Abfrage in player_history (7 Tage Retention), GET /api/servers
  liefert nur öffentliche Felder (keine Query-URLs/Hosts)
- Lightbox: Galerie- und Devlog-Bilder öffnen im Overlay mit
  Pfeiltasten, Buttons, Wisch-Gesten und Zähler statt neuem Tab
- Skeleton-Loader: schimmernde Platzhalter auf Devlogs, Roadmap,
  Galerie, Level, Changelog und Server statt "Lade …"
- Team-Audit-Log: audit_log-Tabelle (max 500 Einträge), Logging bei
  Settings/Composer/Vorlagen/Rollen-Menüs/Gameservern/Team/API-Keys/
  Branding, GET /api/auditlog (Owner) + Liste im Team-Tab
- Giveaway: 🔁 Reroll-Button (Admin-only) + 👥 Teilnehmerliste am
  Gewinner-Post

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

frontend/src/pages/Settings.jsx

@@ -160,6 +160,7 @@ export default function Settings({ me }) {
     // Bot-Beschreibung + Team
     const [botDesc, setBotDesc] = useState('');
     const [team, setTeam] = useState([]);
+    const [audit, setAudit] = useState([]);
     const [teamDraft, setTeamDraft] = useState({ user_id: '', scopes: [] });
 
     const canTab = (id) => {
@@ -201,6 +202,7 @@ export default function Settings({ me }) {
         apiGet('/api/triggers').then((d) => setTriggers(d.triggers)).catch(() => {});
         apiGet('/api/gameservers').then((d) => setServers(d.servers)).catch(() => {});
         apiGet('/api/webadmins').then((d) => setTeam(d.admins)).catch(() => {});
+        apiGet('/api/auditlog').then((d) => setAudit(d.entries)).catch(() => {});
     }, [me.admin, me.scopes?.length]);
 
     useEffect(() => {
@@ -1465,6 +1467,25 @@ export default function Settings({ me }) {
                     ))}
                 </div>
             </div>
+
+            {audit.length > 0 && (
+                <>
+                    <h2 className="settings-title" style={{ marginTop: '2rem' }}>// Audit-Log</h2>
+                    <p className="field-hint" style={{ marginBottom: '.8rem' }}>
+                        Die letzten Aktionen im Webinterface (max. 500 werden aufbewahrt).
+                    </p>
+                    <div className="key-list audit-list">
+                        {audit.map((a) => (
+                            <div className="key-row" key={a.id}>
+                                <span className="audit-ts">{a.ts.slice(0, 16).replace('T', ' ')}</span>
+                                <span className="key-name">{a.username}</span>
+                                <span className="audit-action">{a.action}</span>
+                                <span className="key-used audit-detail" title={a.detail}>{a.detail}</span>
+                            </div>
+                        ))}
+                    </div>
+                </>
+            )}
         </div>
     );