Portal-Dienste und geteiltes Design-System für die anderen Apps

- Dienste (Gitea, Kanban, Cloud …) werden im System-Tab gepflegt und
  erscheinen als Kacheln auf der Startseite; GET /api/services ist
  öffentlich, Pflege braucht den settings-Scope
- /brand.css liefert die Design-Tokens (Farben live aus dem Brand-Tab,
  ändern sich damit überall mit) plus Basis-Klassen d4rk-card,
  d4rk-btn, d4rk-title, d4rk-tag
- /brand-nav.js baut die D4RKST3R-Leiste in jede fremde App ein, mit
  Links zum Hub und zu allen gepflegten Diensten; die Links stecken
  fertig im Skript, dadurch kein zweiter Request und kein CORS nötig
- Beide Dateien mit offenem CORS-Header und 5 Minuten Cache
- Doku für Anbindung + Schriften in docs/sso.md ergänzt

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

frontend/src/pages/Home.jsx

@@ -28,12 +28,14 @@ export default function Home() {
     const [servers, setServers] = useState(null);
     const [latest, setLatest] = useState(null);
     const [invite, setInvite] = useState(null);
+    const [services, setServices] = useState([]);
 
     useEffect(() => {
         apiGet('/api/serverstats').then(setStats).catch(() => {});
         apiGet('/api/servers').then((d) => setServers(d.servers)).catch(() => {});
         apiGet('/api/devlogs?page=1').then((d) => setLatest(d.items?.[0] ?? null)).catch(() => {});
         apiGet('/api/invite').then((d) => setInvite(d.invite)).catch(() => {});
+        apiGet('/api/services').then((d) => setServices(d.services)).catch(() => {});
         window.scrollTo(0, 0);
     }, []);
 
@@ -95,6 +97,21 @@ export default function Home() {
                     ))}
                 </div>
 
+                {services.length > 0 && (
+                    <div className="roadmap-group" style={{ marginTop: '2.5rem' }}>
+                        <h2 className="settings-title">// Dienste</h2>
+                        <div className="home-tiles">
+                            {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>
+                                    {s.description && <span className="home-tile-desc">{s.description}</span>}
+                                </a>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
                 {latest && (
                     <div className="roadmap-group" style={{ marginTop: '2.5rem' }}>
                         <h2 className="settings-title">// Neuestes Devlog</h2>