Webinterface: Emojis durch Lucide-Icons ersetzt

Emojis werden vom Betriebssystem gerendert — auf Windows, Mac und Android
sehen sie unterschiedlich aus, und sie sind bunt. Im streng zweifarbigen
D4RKST3R-Look stachen sie entsprechend heraus.

Jetzt kommen die Symbole aus einem einzigen Set (Lucide, dünne Outlines),
zentral in src/icons.jsx gebündelt: eine Größe, eine Strichstärke, überall
gleich — und sie erben die Textfarbe, sind also Teil der Marke statt
Fremdkörper. Betroffen sind Navigation, Startseite, Server, Roadmap,
Profil, Level, Galerie, Devlogs, Lightbox, Composer und alle Setup-Tabs.

Bewusst Emojis geblieben sind:
- die Spiel-Presets der Server (landen als Icon im Discord-Embed)
- Rollen-Menü-Emojis und Platzhalter für Discord-Inhalte
- beschreibende Hinweise wie „🔔-Button am Post" oder „🟢/🔴 im Embed",
  die zeigen, wie etwas in Discord aussehen wird
- die selbst gepflegten Dienst-Icons im Portal

Dazu Detailarbeit: Server-Status als farbiger Punkt statt Emoji, Platz 1–3
der Bestenliste als Pokal in Gold/Silber/Bronze, Pagination mit Chevrons.
Bundle wächst um 19 kB (Tree-Shaking greift, nur die ~70 genutzten Icons).

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

frontend/src/pages/Home.jsx

@@ -4,14 +4,18 @@ import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { apiGet } from '../api.js';
 import { Markdown } from '../markdown.jsx';
+import {
+    IconDevlog, IconRoadmap, IconServer, IconGallery, IconLevel, IconEvents,
+    IconMessage, IconArrowRight, IconLink,
+} from '../icons.jsx';
 
 const TILES = [
-    ['/devlogs', '📔', 'Devlog', 'Entwicklungs-Updates, frisch aus dem Editor'],
-    ['/roadmap', '🗺️', 'Roadmap', 'Meilensteine + Community-Wünsche zum Abstimmen'],
-    ['/server', '🎮', 'Server', 'Live-Status aller Game-Server mit Verlauf'],
-    ['/galerie', '🖼️', 'Galerie', 'Screenshots aus der Community'],
-    ['/level', '📈', 'Level', 'XP-Bestenliste — wer redet am meisten mit?'],
-    ['/events', '📅', 'Events', 'Playtests, Streams und was sonst ansteht'],
+    ['/devlogs', IconDevlog, 'Devlog', 'Entwicklungs-Updates, frisch aus dem Editor'],
+    ['/roadmap', IconRoadmap, 'Roadmap', 'Meilensteine + Community-Wünsche zum Abstimmen'],
+    ['/server', IconServer, 'Server', 'Live-Status aller Game-Server mit Verlauf'],
+    ['/galerie', IconGallery, 'Galerie', 'Screenshots aus der Community'],
+    ['/level', IconLevel, 'Level', 'XP-Bestenliste — wer redet am meisten mit?'],
+    ['/events', IconEvents, 'Events', 'Playtests, Streams und was sonst ansteht'],
 ];
 
 /** Devlog-Text für den Teaser kürzen (erste Sätze, ohne Titel-Zeile) */
@@ -57,8 +61,14 @@ export default function Home() {
                         an einem Ort, direkt aus dem Discord.
                     </p>
                     <div className="home-cta">
-                        {invite && <a className="btn btn-save" href={invite} target="_blank" rel="noreferrer">💬 Zum Discord</a>}
-                        <Link className="btn btn-ghost home-cta-alt" to="/devlogs">📔 Devlogs lesen</Link>
+                        {invite && (
+                            <a className="btn btn-save with-icon" href={invite} target="_blank" rel="noreferrer">
+                                <IconMessage /> Zum Discord
+                            </a>
+                        )}
+                        <Link className="btn btn-ghost home-cta-alt with-icon" to="/devlogs">
+                            <IconDevlog /> Devlogs lesen
+                        </Link>
                     </div>
                 </div>
             </section>
@@ -88,9 +98,9 @@ export default function Home() {
                 )}
 
                 <div className="home-tiles">
-                    {TILES.map(([to, icon, title, desc]) => (
+                    {TILES.map(([to, Icon, title, desc]) => (
                         <Link className="card home-tile" to={to} key={to}>
-                            <span className="home-tile-icon">{icon}</span>
+                            <span className="home-tile-icon"><Icon size={26} /></span>
                             <span className="home-tile-title">{title}</span>
                             <span className="home-tile-desc">{desc}</span>
                         </Link>
@@ -101,10 +111,13 @@ export default function Home() {
                     <div className="roadmap-group" style={{ marginTop: '2.5rem' }}>
                         <h2 className="settings-title">// Dienste</h2>
                         <div className="home-tiles">
+                            {/* Dienst-Icons pflegt der Owner selbst — daher bleiben es Emojis */}
                             {services.map((s) => (
                                 <a className="card home-tile" href={s.url} target="_blank" rel="noreferrer" key={s.id}>
-                                    <span className="home-tile-icon">{s.icon}</span>
-                                    <span className="home-tile-title">{s.name} <span className="home-tile-ext">↗</span></span>
+                                    <span className="home-tile-icon home-tile-emoji">{s.icon}</span>
+                                    <span className="home-tile-title with-icon">
+                                        {s.name} <IconLink size={14} className="home-tile-ext" />
+                                    </span>
                                     {s.description && <span className="home-tile-desc">{s.description}</span>}
                                 </a>
                             ))}
@@ -119,7 +132,7 @@ export default function Home() {
                             <div className="card-body">
                                 <Markdown text={teaser(latest.content)} />
                             </div>
-                            <span className="home-devlog-more">Weiterlesen →</span>
+                            <span className="home-devlog-more with-icon">Weiterlesen <IconArrowRight size={14} /></span>
                         </Link>
                     </div>
                 )}