feat: Günther-Agent (Netzer-Style) + Expertenblick im TipModal

- AgentChat-Widget mit SSE-Streaming, Quick-Actions, Multiple-Choice
- /api/agent/chat + /api/agent/insight Routen
- Expertenblick-Panel im TipModal (lazy load)
- Günther-Icon

backend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "wm2026-tippspiel-backend",
       "version": "1.0.0",
       "dependencies": {
+        "@anthropic-ai/sdk": "^0.82.0",
         "@staffbase/staffbase-plugin-sdk": "^1.3.7",
         "cors": "^2.8.5",
         "dotenv": "^16.4.5",
@@ -26,6 +27,35 @@
         "typescript": "^5.4.5"
       }
     },
+    "node_modules/@anthropic-ai/sdk": {
+      "version": "0.82.0",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.82.0.tgz",
+      "integrity": "sha512-xdHTjL1GlUlDugHq/I47qdOKp/ROPvuHl7ROJCgUQigbvPu7asf9KcAcU1EqdrP2LuVhEKaTs7Z+ShpZDRzHdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "json-schema-to-ts": "^3.1.1"
+      },
+      "bin": {
+        "anthropic-ai-sdk": "bin/cli"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@colors/colors": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.6.0.tgz",
@@ -1316,6 +1346,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/json-schema-to-ts": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/json-schema-to-ts/-/json-schema-to-ts-3.1.1.tgz",
+      "integrity": "sha512-+DWg8jCJG2TEnpy7kOm/7/AxaYoaRbjVB4LFZLySZlWn8exGs3A4OLJR966cVvU26N7X9TWxl+Jsw7dzAqKT6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "ts-algebra": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/jsonwebtoken": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
@@ -2020,6 +2063,12 @@
         "node": ">= 14.0.0"
       }
     },
+    "node_modules/ts-algebra": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ts-algebra/-/ts-algebra-2.0.0.tgz",
+      "integrity": "sha512-FPAhNPFMrkwz76P7cdjdmiShwMynZYN6SgOujD1urY4oNm80Ou9oMdmbR45LotcKOXoy7wSmHkRFE6Mxbrhefw==",
+      "license": "MIT"
+    },
     "node_modules/tsx": {
       "version": "4.21.0",
       "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.21.0.tgz",

backend/package.json

@@ -11,6 +11,7 @@
     "db:seed": "tsx scripts/seed.ts"
   },
   "dependencies": {
+    "@anthropic-ai/sdk": "^0.82.0",
     "@staffbase/staffbase-plugin-sdk": "^1.3.7",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",

backend/src/index.ts

@@ -15,6 +15,7 @@ import leaderboardRouter from './routes/leaderboard';
 import adminRouter from './routes/admin';
 import profileRouter from './routes/profile';
 import devRouter from './routes/dev';
+import agentRouter from './routes/agent';
 
 const app = express();
 const PORT = parseInt(process.env.PORT ?? '3001');
@@ -86,6 +87,16 @@ app.use(
   })
 );
 
+// Rate limit für Agent-Chat (Claude API Calls sind kostenpflichtig)
+app.use(
+  '/api/agent',
+  rateLimit({
+    windowMs: 60 * 1000, // 1 Minute
+    max: 10,             // 10 Chat-Nachrichten pro User/Minute
+    message: { error: 'Too many agent requests, bitte kurz warten.' },
+  })
+);
+
 // ============================================================
 // Health Check (ohne Auth – für Railway/Render/Uptime-Monitoring)
 // ============================================================
@@ -119,6 +130,7 @@ app.use('/api/tips', tipsRouter);
 app.use('/api/leaderboard', leaderboardRouter);
 app.use('/api/admin', adminRouter);
 app.use('/api/profile', profileRouter);
+app.use('/api/agent', agentRouter);
 if (process.env.NODE_ENV === 'development') {
   app.use('/api/dev', devRouter);
 }

backend/src/routes/agent.ts

@@ -0,0 +1,266 @@
+import { Router, Request, Response } from 'express';
+import Anthropic from '@anthropic-ai/sdk';
+import { query } from '../db/client';
+import { logger } from '../services/logger';
+
+const router = Router();
+
+// ============================================================
+// Anthropic Client (lazy-initialized, Key aus .env)
+// ============================================================
+let anthropic: Anthropic | null = null;
+function getClient(): Anthropic {
+  if (!anthropic) {
+    const apiKey = process.env.ANTHROPIC_API_KEY;
+    if (!apiKey) throw new Error('ANTHROPIC_API_KEY not set');
+    anthropic = new Anthropic({ apiKey });
+  }
+  return anthropic;
+}
+
+// ============================================================
+// Kontext: aktuelle Spiele aus der DB holen
+// ============================================================
+async function getMatchContext(): Promise<string> {
+  try {
+    const rows = await query<{
+      utc_date: Date;
+      status: string;
+      stage: string;
+      group_name: string | null;
+      home_team_name: string;
+      away_team_name: string;
+      score_home: number | null;
+      score_away: number | null;
+    }>(
+      `SELECT utc_date, status, stage, group_name,
+              home_team_name, away_team_name, score_home, score_away
+       FROM matches
+       ORDER BY utc_date ASC
+       LIMIT 200`
+    );
+
+    const now = new Date();
+    const upcoming = rows.filter(
+      (r) => new Date(r.utc_date) > now && (r.status === 'SCHEDULED' || r.status === 'TIMED')
+    );
+    const finished = rows.filter((r) => r.status === 'FINISHED');
+    const inPlay = rows.filter((r) => r.status === 'IN_PLAY' || r.status === 'PAUSED');
+
+    const lines: string[] = [];
+
+    if (inPlay.length > 0) {
+      lines.push('=== LIVE JETZT ===');
+      inPlay.forEach((m) => {
+        lines.push(
+          `${m.home_team_name} ${m.score_home ?? '?'} : ${m.score_away ?? '?'} ${m.away_team_name} (LIVE)`
+        );
+      });
+    }
+
+    if (upcoming.length > 0) {
+      lines.push('\n=== NÄCHSTE SPIELE (WM 2026) ===');
+      upcoming.slice(0, 20).forEach((m) => {
+        const d = new Date(m.utc_date);
+        const dateStr = d.toLocaleDateString('de-DE', {
+          weekday: 'short', day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit',
+        });
+        const groupStr = m.group_name ? ` [${m.group_name}]` : ` [${m.stage}]`;
+        lines.push(`${dateStr}${groupStr}: ${m.home_team_name} vs. ${m.away_team_name}`);
+      });
+    }
+
+    if (finished.length > 0) {
+      lines.push('\n=== ZULETZT GESPIELT ===');
+      finished.slice(-10).forEach((m) => {
+        lines.push(
+          `${m.home_team_name} ${m.score_home} : ${m.score_away} ${m.away_team_name} (Ergebnis)`
+        );
+      });
+    }
+
+    return lines.join('\n');
+  } catch (err) {
+    logger.error('Agent: Fehler beim Laden des Match-Kontexts', { err });
+    return '(Keine Spieldaten verfügbar)';
+  }
+}
+
+// ============================================================
+// System-Prompt: Der Fußball-Experte
+// ============================================================
+// Netzer-Stil: Beispiele als Few-Shot Anker
+const NETZER_STYLE =
+  'DEIN STIL - Günter Netzer:\n' +
+  'Du sprichst wie Günter Netzer in seiner Zeit als ARD-Experte. Trocken. Direkt. Keine Begeisterungsstürme.\n' +
+  'Du stellst fest - du zweifelst nicht. Du kennst den Fußball von innen, das merkt man.\n\n' +
+  'Beispiele für deinen Ton:\n' +
+  '- "Das ist eine gute Mannschaft. Aber heute reicht es nicht."\n' +
+  '- "Brasilien hat die besseren Einzelspieler. Was daraus wird, steht auf einem anderen Blatt."\n' +
+  '- "Ich habe 1974 gegen bessere Außenverteidiger gespielt. Das war Fußball."\n' +
+  '- "Ein Unentschieden waere fair. Aber Fairness interessiert im Fußball niemanden."\n' +
+  '- "Der Torwart hat das gehalten. Musste er auch."\n\n' +
+  'Regeln: Kurze Saetze. Kein "mega", kein "Wahnsinn", kein uebertriebenes Lob. Gelegentlich ein trockener Vergleich mit frueheren WM-Turnieren oder Legenden (Beckenbauer, Müller, Cruyff). Du duzt alle.\n\n';
+
+const SYSTEM_PROMPT_BASE =
+  'Du bist der Fußball-Experte im WM 2026 Tippspiel von GEALAN. Du kennst WM und EM in- und auswendig: Ergebnisse, Rekorde, Taktiken, Legenden - von 1930 bis heute.\n\n' +
+  NETZER_STYLE +
+  'TIPP-EMPFEHLUNGEN: Wenn jemand allgemein fragt, stelle zuerst eine Rückfrage. Haenge einen CHOICES-Block an mit den naechsten 5 Spielen. Erst nach Auswahl gibst du Empfehlungen - maximal 3 auf einmal.\n\n' +
+  'CHOICES-FORMAT (nur fuer Tipp-Rückfragen):\n' +
+  '[CHOICES]\nHeimteam vs. Gastteam\n[/CHOICES]\n' +
+  'Exakte Teamnamen aus dem Kontext. Kein Datum, keine Emojis im Block.\n\n' +
+  'FORMATIERUNG: Kompakt (max. 4 Absaetze). **fett** fuer Namen/Scores. ## fuer Überschriften. --- als Trennlinie. Kein # H1. Kein Emoji-Overload.\n\n' +
+  'SPIELPLAN-KONTEXT:\n';
+
+// ============================================================
+// POST /api/agent/chat
+// Body: { messages: [{role, content}][], quickAction?: string }
+// ============================================================
+router.post('/chat', async (req: Request, res: Response): Promise<void> => {
+  const { messages, quickAction } = req.body as {
+    messages?: Array<{ role: 'user' | 'assistant'; content: string }>;
+    quickAction?: string;
+  };
+
+  // Validierung
+  if (!messages && !quickAction) {
+    res.status(400).json({ error: 'messages oder quickAction erforderlich' });
+    return;
+  }
+
+  const chatMessages: Array<{ role: 'user' | 'assistant'; content: string }> =
+    messages ?? [];
+
+  // Quick-Action als User-Nachricht hinzufügen
+  if (quickAction) {
+    chatMessages.push({ role: 'user', content: quickAction });
+  }
+
+  if (chatMessages.length === 0) {
+    res.status(400).json({ error: 'Keine Nachrichten vorhanden' });
+    return;
+  }
+
+  try {
+    const client = getClient();
+    const matchContext = await getMatchContext();
+    const systemPrompt = SYSTEM_PROMPT_BASE + matchContext;
+
+    // Streaming-Antwort via SSE
+    res.setHeader('Content-Type', 'text/event-stream');
+    res.setHeader('Cache-Control', 'no-cache');
+    res.setHeader('Connection', 'keep-alive');
+    res.flushHeaders();
+
+    const stream = await client.messages.stream({
+      model: 'claude-sonnet-4-6',
+      max_tokens: 1024,
+      system: systemPrompt,
+      messages: chatMessages.slice(-10), // max. 10 Nachrichten Kontext
+    });
+
+    for await (const chunk of stream) {
+      if (
+        chunk.type === 'content_block_delta' &&
+        chunk.delta.type === 'text_delta'
+      ) {
+        const data = JSON.stringify({ text: chunk.delta.text });
+        res.write(`data: ${data}\n\n`);
+      }
+    }
+
+    res.write('data: [DONE]\n\n');
+    res.end();
+
+    logger.info('Agent: Chat-Anfrage beantwortet', {
+      userId: req.staffbaseUser?.sub,
+      messageCount: chatMessages.length,
+    });
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    logger.error('Agent: Fehler', { error: message });
+
+    if (!res.headersSent) {
+      res.status(500).json({ error: 'Agent nicht verfügbar', detail: message });
+    } else {
+      res.write(`data: ${JSON.stringify({ error: message })}\n\n`);
+      res.end();
+    }
+  }
+});
+
+// ============================================================
+// POST /api/agent/insight
+// Kompakte Einschätzung für genau ein Spiel (für TipModal)
+// Body: { homeTeam: string, awayTeam: string, stage: string, group?: string }
+// ============================================================
+router.post('/insight', async (req: Request, res: Response): Promise<void> => {
+  const { homeTeam, awayTeam, stage, group } = req.body as {
+    homeTeam: string;
+    awayTeam: string;
+    stage?: string;
+    group?: string;
+  };
+
+  if (!homeTeam || !awayTeam) {
+    res.status(400).json({ error: 'homeTeam und awayTeam erforderlich' });
+    return;
+  }
+
+  const stageLabel = group
+    ? group.replace('GROUP_', 'Gruppe ')
+    : stage ?? 'WM 2026';
+
+  const insightPrompt =
+    NETZER_STYLE +
+    'Gib eine Kurzeinschätzung im Netzer-Stil. Exakt dieses Format, keine Abweichungen:\n\n' +
+    '**Ausgangslage:** Ein trockener Satz zur Lage.\n' +
+    '**Favorit:** Teamname - ein Satz Begruendung.\n' +
+    '**Risiko:** Ein Satz fuer den Außenseiter.\n' +
+    '**Tipp:** **Score** - Teamname und ein Satz.\n\n' +
+    'Trennzeichen: immer Gedankenstrich, nie Pluszeichen. Keine weiteren Zeilen.\n\n' +
+    'Spiel: ' + homeTeam + ' vs. ' + awayTeam + ' (' + stageLabel + ')';
+
+  try {
+    const client = getClient();
+
+    res.setHeader('Content-Type', 'text/event-stream');
+    res.setHeader('Cache-Control', 'no-cache');
+    res.setHeader('Connection', 'keep-alive');
+    res.flushHeaders();
+
+    const stream = await client.messages.stream({
+      model: 'claude-haiku-4-5-20251001',
+      max_tokens: 256,
+      messages: [{ role: 'user', content: insightPrompt }],
+    });
+
+    for await (const chunk of stream) {
+      if (
+        chunk.type === 'content_block_delta' &&
+        chunk.delta.type === 'text_delta'
+      ) {
+        res.write('data: ' + JSON.stringify({ text: chunk.delta.text }) + '\n\n');
+      }
+    }
+
+    res.write('data: [DONE]\n\n');
+    res.end();
+
+    logger.info('Agent: Insight geliefert', {
+      userId: req.staffbaseUser?.sub,
+      match: homeTeam + ' vs ' + awayTeam,
+    });
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    logger.error('Agent: Insight-Fehler', { error: message });
+    if (!res.headersSent) {
+      res.status(500).json({ error: 'Insight nicht verfügbar' });
+    } else {
+      res.write('data: ' + JSON.stringify({ error: message }) + '\n\n');
+      res.end();
+    }
+  }
+});
+
+export default router;

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import MatchesPage from './pages/MatchesPage';
 import LeaderboardPage from './pages/LeaderboardPage';
 import ProfilePage from './pages/ProfilePage';
 import AdminPage from './pages/AdminPage';
+import AgentChat from './components/AgentChat';
 import styles from './App.module.css';
 
 const IS_DEV = import.meta.env.DEV;
@@ -92,6 +93,9 @@ export default function App() {
           onRefresh={handleDevRefresh}
         />
       )}
+
+      {/* Fußball-Experte Chat-Widget – immer sichtbar */}
+      <AgentChat />
     </div>
   );
 }

frontend/src/components/AgentChat.module.css

@@ -0,0 +1,466 @@
+/* ============================================================
+   AgentChat – Fußball-Experte Chat-Widget
+   Stadium Elite Design
+   ============================================================ */
+
+/* ---- Floating Button ---- */
+.trigger {
+  position: fixed;
+  bottom: 28px;
+  right: 28px;
+  z-index: 500;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  cursor: pointer;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  line-height: 1;
+  transition: transform 0.2s;
+  color: #fff;
+  padding: 0;
+}
+
+.trigger.open {
+  background: rgba(28, 38, 64, 0.9);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+}
+
+.trigger:hover {
+  transform: scale(1.08);
+  box-shadow: 0 6px 28px rgba(75, 183, 248, 0.6);
+}
+
+.trigger.open {
+  background: linear-gradient(135deg, #1C2640 0%, #111827 100%);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+}
+
+/* Puls-Ring wenn geschlossen */
+.trigger:not(.open)::after {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  border-radius: 50%;
+  border: 2px solid rgba(75, 183, 248, 0.4);
+  animation: pulse 2.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); opacity: 0.8; }
+  50% { transform: scale(1.15); opacity: 0; }
+}
+
+/* ---- Panel ---- */
+.panel {
+  position: fixed;
+  bottom: 100px;
+  right: 28px;
+  z-index: 499;
+  width: 380px;
+  max-height: 560px;
+  display: flex;
+  flex-direction: column;
+  background: var(--surface-mid);
+  border-radius: var(--radius-lg);
+  border: 1px solid rgba(75, 183, 248, 0.15);
+  box-shadow:
+    0 20px 60px rgba(0, 0, 0, 0.5),
+    0 0 0 1px rgba(255, 255, 255, 0.04),
+    inset 0 1px 0 rgba(255, 255, 255, 0.07);
+  overflow: hidden;
+  animation: slideUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(16px) scale(0.97); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---- Header ---- */
+.header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  background: linear-gradient(135deg, rgba(75, 183, 248, 0.1) 0%, rgba(33, 150, 243, 0.05) 100%);
+  border-bottom: 1px solid rgba(75, 183, 248, 0.12);
+  flex-shrink: 0;
+}
+
+.headerIcon {
+  font-size: 22px;
+  line-height: 1;
+}
+
+.headerTitle {
+  font-family: 'Plus Jakarta Sans', sans-serif;
+  font-weight: 700;
+  font-size: 15px;
+  color: var(--text-primary);
+  flex: 1;
+}
+
+.headerSub {
+  font-size: 11px;
+  color: var(--text-secondary);
+  margin-top: 1px;
+}
+
+.headerOnline {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 6px var(--success);
+  flex-shrink: 0;
+}
+
+/* ---- Messages Area ---- */
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* ---- Quick Action Chips ---- */
+.quickActions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 14px 14px;
+}
+
+.quickActionsLabel {
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  font-weight: 600;
+}
+
+.quickChips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.chip {
+  padding: 6px 12px;
+  border-radius: 20px;
+  border: 1px solid rgba(75, 183, 248, 0.25);
+  background: rgba(75, 183, 248, 0.07);
+  color: var(--primary);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.chip:hover {
+  background: rgba(75, 183, 248, 0.15);
+  border-color: rgba(75, 183, 248, 0.4);
+  transform: translateY(-1px);
+}
+
+/* ---- Message Bubbles ---- */
+.message {
+  display: flex;
+  flex-direction: column;
+  max-width: 88%;
+}
+
+.message.user {
+  align-self: flex-end;
+  align-items: flex-end;
+}
+
+.message.assistant {
+  align-self: flex-start;
+  align-items: flex-start;
+}
+
+.bubble {
+  padding: 10px 14px;
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.message.user .bubble {
+  background: linear-gradient(135deg, var(--primary) 0%, #2196f3 100%);
+  color: #fff;
+  border-bottom-right-radius: 4px;
+}
+
+.message.assistant .bubble {
+  background: var(--surface-high);
+  color: var(--text-primary);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom-left-radius: 4px;
+}
+
+/* Markdown-Inhalt in Assistenten-Bubbles */
+.markdownBody {
+  font-size: 13.5px;
+  line-height: 1.6;
+}
+
+.markdownBody strong {
+  color: var(--text-primary);
+  font-weight: 700;
+}
+
+.markdownBody em {
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+.markdownBody ul {
+  padding-left: 1.2em;
+  margin: 4px 0;
+}
+
+.markdownBody li {
+  margin-bottom: 3px;
+  color: var(--text-primary);
+}
+
+.messageTime {
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-top: 4px;
+  padding: 0 4px;
+}
+
+/* ---- Typing Indicator ---- */
+.typing {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 14px;
+  background: var(--surface-high);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius-md);
+  border-bottom-left-radius: 4px;
+  width: fit-content;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-secondary);
+  animation: bounce 1.2s ease-in-out infinite;
+}
+.dot:nth-child(2) { animation-delay: 0.2s; }
+.dot:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes bounce {
+  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
+  30%            { transform: translateY(-5px); opacity: 1; }
+}
+
+/* ---- Input Area ---- */
+.inputArea {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  padding: 12px 14px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--surface-low);
+  flex-shrink: 0;
+}
+
+.input {
+  flex: 1;
+  background: var(--surface-mid);
+  border: 1px solid rgba(75, 183, 248, 0.2);
+  border-radius: var(--radius-sm);
+  padding: 10px 13px;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-family: 'Inter', sans-serif;
+  resize: none;
+  min-height: 42px;
+  max-height: 120px;
+  outline: none;
+  transition: border-color 0.15s;
+  line-height: 1.4;
+}
+
+.input::placeholder { color: var(--text-muted); }
+
+.input:focus {
+  border-color: rgba(75, 183, 248, 0.5);
+  box-shadow: 0 0 0 2px rgba(75, 183, 248, 0.1);
+}
+
+.sendBtn {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-sm);
+  border: none;
+  background: linear-gradient(135deg, var(--primary) 0%, #2196f3 100%);
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: opacity 0.15s, transform 0.1s;
+  box-shadow: 0 2px 10px rgba(75, 183, 248, 0.3);
+}
+
+.sendBtn:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
+.sendBtn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* ---- Choice Selector ---- */
+.choiceSelector {
+  margin-top: 10px;
+  border-top: 1px solid rgba(75, 183, 248, 0.12);
+  padding-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.choiceList {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.choiceItem {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 8px 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid rgba(75, 183, 248, 0.18);
+  background: rgba(75, 183, 248, 0.05);
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: 'Inter', sans-serif;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.15s;
+}
+
+.choiceItem:hover:not(:disabled) {
+  background: rgba(75, 183, 248, 0.12);
+  border-color: rgba(75, 183, 248, 0.35);
+}
+
+.choiceItem:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.choiceItemSelected {
+  background: rgba(75, 183, 248, 0.15);
+  border-color: var(--primary);
+  color: var(--primary);
+  font-weight: 500;
+}
+
+.choiceCheckbox {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1.5px solid rgba(75, 183, 248, 0.4);
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  flex-shrink: 0;
+  color: var(--primary);
+  font-weight: 700;
+  transition: all 0.12s;
+}
+
+.choiceItemSelected .choiceCheckbox {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: #fff;
+}
+
+.choiceActions {
+  display: flex;
+  gap: 6px;
+}
+
+.choiceConfirm {
+  flex: 1;
+  padding: 8px 14px;
+  border-radius: var(--radius-sm);
+  border: none;
+  background: linear-gradient(135deg, var(--primary) 0%, #2196f3 100%);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  font-family: 'Plus Jakarta Sans', sans-serif;
+  cursor: pointer;
+  transition: opacity 0.15s;
+  box-shadow: 0 2px 10px rgba(75, 183, 248, 0.25);
+}
+
+.choiceConfirm:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.choiceConfirm:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.choiceAll {
+  padding: 8px 14px;
+  border-radius: var(--radius-sm);
+  border: 1px solid rgba(75, 183, 248, 0.25);
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-family: 'Inter', sans-serif;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.choiceAll:hover:not(:disabled) {
+  color: var(--text-primary);
+  border-color: rgba(75, 183, 248, 0.4);
+  background: rgba(75, 183, 248, 0.07);
+}
+
+.choiceAll:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ---- Responsive ---- */
+@media (max-width: 440px) {
+  .panel {
+    right: 12px;
+    left: 12px;
+    width: auto;
+    bottom: 88px;
+  }
+  .trigger {
+    right: 16px;
+    bottom: 20px;
+  }
+}

frontend/src/components/AgentChat.tsx

@@ -0,0 +1,488 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import styles from './AgentChat.module.css';
+import netzerpng from '../assets/guenther_icon.png';
+
+// ============================================================
+// Choices Parser
+// Extrahiert [CHOICES]...[/CHOICES] aus Agent-Antwort
+// ============================================================
+function parseChoices(text: string): { before: string; choices: string[]; hasChoices: boolean } {
+  const match = text.match(/\[CHOICES\]([\s\S]*?)\[\/CHOICES\]/);
+  if (!match) return { before: text, choices: [], hasChoices: false };
+  const before = text.slice(0, match.index).trimEnd();
+  const choices = match[1]
+    .split('\n')
+    .map((l) => l.trim())
+    .filter((l) => l.length > 0);
+  return { before, choices, hasChoices: true };
+}
+
+// ============================================================
+// ChoiceSelector Komponente
+// ============================================================
+function ChoiceSelector({
+  choices,
+  onConfirm,
+  disabled,
+}: {
+  choices: string[];
+  onConfirm: (selected: string[]) => void;
+  disabled: boolean;
+}) {
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+
+  function toggle(choice: string) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      next.has(choice) ? next.delete(choice) : next.add(choice);
+      return next;
+    });
+  }
+
+  function handleConfirm() {
+    if (selected.size === 0) return;
+    onConfirm([...selected]);
+  }
+
+  function handleAll() {
+    onConfirm(choices);
+  }
+
+  return (
+    <div className={styles.choiceSelector}>
+      <div className={styles.choiceList}>
+        {choices.map((c) => (
+          <button
+            key={c}
+            className={`${styles.choiceItem} ${selected.has(c) ? styles.choiceItemSelected : ''}`}
+            onClick={() => toggle(c)}
+            disabled={disabled}
+          >
+            <span className={styles.choiceCheckbox}>
+              {selected.has(c) ? '✓' : ''}
+            </span>
+            {c}
+          </button>
+        ))}
+      </div>
+      <div className={styles.choiceActions}>
+        <button
+          className={styles.choiceConfirm}
+          onClick={handleConfirm}
+          disabled={disabled || selected.size === 0}
+        >
+          {selected.size > 0 ? `${selected.size} Spiel${selected.size > 1 ? 'e' : ''} analysieren` : 'Auswahl treffen'}
+        </button>
+        <button
+          className={styles.choiceAll}
+          onClick={handleAll}
+          disabled={disabled}
+        >
+          Alle
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================
+// Mini Markdown Renderer
+// Unterstützt: ## Header, **bold**, *italic*, --- Trennlinie, - Listen
+// ============================================================
+function renderMarkdown(text: string): React.ReactNode[] {
+  const lines = text.split('\n');
+  const result: React.ReactNode[] = [];
+  let listBuffer: string[] = [];
+  let keyCounter = 0;
+  const k = () => keyCounter++;
+
+  function flushList() {
+    if (listBuffer.length === 0) return;
+    result.push(
+      <ul key={k()} style={{ paddingLeft: '1.2em', margin: '4px 0', listStyleType: 'disc' }}>
+        {listBuffer.map((item, i) => (
+          <li key={i} style={{ marginBottom: '2px' }}>{inlineFormat(item)}</li>
+        ))}
+      </ul>
+    );
+    listBuffer = [];
+  }
+
+  function inlineFormat(line: string): React.ReactNode {
+    // **bold** und *italic* inline parsen
+    const parts: React.ReactNode[] = [];
+    const regex = /(\*\*(.+?)\*\*|\*(.+?)\*)/g;
+    let last = 0;
+    let match;
+    while ((match = regex.exec(line)) !== null) {
+      if (match.index > last) parts.push(line.slice(last, match.index));
+      if (match[2]) parts.push(<strong key={match.index}>{match[2]}</strong>);
+      else if (match[3]) parts.push(<em key={match.index}>{match[3]}</em>);
+      last = match.index + match[0].length;
+    }
+    if (last < line.length) parts.push(line.slice(last));
+    return parts.length === 1 ? parts[0] : parts;
+  }
+
+  for (const line of lines) {
+    // Trennlinie ---
+    if (/^---+$/.test(line.trim())) {
+      flushList();
+      result.push(
+        <hr key={k()} style={{ border: 'none', borderTop: '1px solid rgba(255,255,255,0.1)', margin: '8px 0' }} />
+      );
+      continue;
+    }
+    // ## H2
+    if (line.startsWith('## ')) {
+      flushList();
+      result.push(
+        <div key={k()} style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 700, fontSize: '13px', color: 'var(--primary)', marginTop: '10px', marginBottom: '3px', letterSpacing: '-0.1px' }}>
+          {inlineFormat(line.slice(3))}
+        </div>
+      );
+      continue;
+    }
+    // # H1
+    if (line.startsWith('# ')) {
+      flushList();
+      result.push(
+        <div key={k()} style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: '14px', color: 'var(--gold)', marginTop: '8px', marginBottom: '4px' }}>
+          {inlineFormat(line.slice(2))}
+        </div>
+      );
+      continue;
+    }
+    // Listenpunkt - oder *
+    if (/^[-*]\s/.test(line)) {
+      listBuffer.push(line.slice(2));
+      continue;
+    }
+    // Leere Zeile
+    if (line.trim() === '') {
+      flushList();
+      result.push(<div key={k()} style={{ height: '6px' }} />);
+      continue;
+    }
+    // Normaler Absatz
+    flushList();
+    result.push(
+      <div key={k()} style={{ marginBottom: '2px' }}>{inlineFormat(line)}</div>
+    );
+  }
+  flushList();
+  return result;
+}
+
+// ============================================================
+// Types
+// ============================================================
+interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: Date;
+}
+
+// ============================================================
+// Quick-Action Chips
+// ============================================================
+const QUICK_ACTIONS = [
+  { label: '🎯 Tipp-Empfehlung', prompt: 'Gib mir eine Tipp-Empfehlung für die nächsten Spiele der WM 2026!' },
+  { label: '📊 Head-to-Head', prompt: 'Zeig mir ein interessantes Head-to-Head zwischen zwei WM-Teams!' },
+  { label: '⚡ Fun Fact', prompt: 'Erzähl mir einen kuriosen oder legendären Fun Fact aus der WM-Geschichte!' },
+  { label: '🏆 WM-Rekorde', prompt: 'Was sind die spektakulärsten Rekorde aller WM-Turniere?' },
+];
+
+// ============================================================
+// API: Streaming Chat-Anfrage
+// ============================================================
+async function sendMessage(
+  messages: Array<{ role: 'user' | 'assistant'; content: string }>,
+  onChunk: (text: string) => void,
+  onDone: () => void,
+  onError: (err: string) => void
+) {
+  try {
+    const res = await fetch('/api/agent/chat', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ messages }),
+    });
+
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      onError(data.error ?? `HTTP ${res.status}`);
+      return;
+    }
+
+    const reader = res.body?.getReader();
+    if (!reader) { onError('Stream nicht verfügbar'); return; }
+
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\n');
+      buffer = lines.pop() ?? '';
+
+      for (const line of lines) {
+        if (!line.startsWith('data: ')) continue;
+        const payload = line.slice(6).trim();
+        if (payload === '[DONE]') { onDone(); return; }
+        try {
+          const parsed = JSON.parse(payload);
+          if (parsed.text) onChunk(parsed.text);
+          if (parsed.error) { onError(parsed.error); return; }
+        } catch {
+          // ignore parse errors
+        }
+      }
+    }
+    onDone();
+  } catch (err) {
+    onError(err instanceof Error ? err.message : 'Netzwerkfehler');
+  }
+}
+
+// ============================================================
+// AgentChat Component
+// ============================================================
+export default function AgentChat() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [showQuickActions, setShowQuickActions] = useState(true);
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const streamingIdRef = useRef<string | null>(null);
+
+  // Auto-scroll bei neuen Nachrichten
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // Fokus ins Eingabefeld wenn Panel öffnet
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => inputRef.current?.focus(), 300);
+    }
+  }, [isOpen]);
+
+  const formatTime = (date: Date) =>
+    date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+
+  const handleSend = useCallback(
+    async (text?: string) => {
+      const messageText = (text ?? input).trim();
+      if (!messageText || isLoading) return;
+
+      setInput('');
+      setShowQuickActions(false);
+
+      // User-Nachricht hinzufügen
+      const userMsg: Message = {
+        id: Date.now().toString(),
+        role: 'user',
+        content: messageText,
+        timestamp: new Date(),
+      };
+      setMessages((prev) => [...prev, userMsg]);
+      setIsLoading(true);
+
+      // Leere Assistenten-Nachricht für Streaming vorbereiten
+      const assistantId = (Date.now() + 1).toString();
+      streamingIdRef.current = assistantId;
+      const assistantMsg: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+      };
+      setMessages((prev) => [...prev, assistantMsg]);
+
+      // Chat-History für API aufbauen (nur role + content)
+      const history = [
+        ...messages.map((m) => ({ role: m.role, content: m.content })),
+        { role: 'user' as const, content: messageText },
+      ];
+
+      await sendMessage(
+        history,
+        // onChunk: Text an laufende Nachricht anhängen
+        (chunk) => {
+          setMessages((prev) =>
+            prev.map((m) =>
+              m.id === assistantId ? { ...m, content: m.content + chunk } : m
+            )
+          );
+        },
+        // onDone
+        () => {
+          setIsLoading(false);
+          streamingIdRef.current = null;
+        },
+        // onError
+        (err) => {
+          setMessages((prev) =>
+            prev.map((m) =>
+              m.id === assistantId
+                ? { ...m, content: `⚠️ Fehler: ${err}` }
+                : m
+            )
+          );
+          setIsLoading(false);
+          streamingIdRef.current = null;
+        }
+      );
+    },
+    [input, isLoading, messages]
+  );
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleQuickAction = (prompt: string) => {
+    handleSend(prompt);
+  };
+
+  return (
+    <>
+      {/* ---- Floating Button ---- */}
+      <button
+        className={`${styles.trigger} ${isOpen ? styles.open : ''}`}
+        onClick={() => setIsOpen((o) => !o)}
+        aria-label={isOpen ? 'Chat schließen' : 'Günther öffnen'}
+        title="Günther – Fußball-Experte"
+      >
+          {isOpen ? '✕' : <img src={netzerpng} alt="Günther" style={{ width: '52px', height: '52px', objectFit: 'contain' }} />}
+      </button>
+
+      {/* ---- Chat Panel ---- */}
+      {isOpen && (
+        <div className={styles.panel} role="dialog" aria-label="Fußball-Experte Chat">
+          {/* Header */}
+          <div className={styles.header}>
+            <span className={styles.headerIcon}><img src={netzerpng} alt="Günther" style={{ width: '28px', height: '28px', objectFit: 'contain' }} /></span>
+            <div style={{ flex: 1 }}>
+              <div className={styles.headerTitle}>Günther</div>
+              <div className={styles.headerSub}>Statistiken · Tipps · Fun Facts</div>
+            </div>
+            <div className={styles.headerOnline} title="Online" />
+          </div>
+
+          {/* Messages */}
+          <div className={styles.messages}>
+            {messages.length === 0 && (
+              <div style={{ color: 'var(--text-secondary)', fontSize: 13, textAlign: 'center', paddingTop: 8 }}>
+                Frag mich alles rund um Fußball, WM &amp; EM! ⚽
+              </div>
+            )}
+
+            {messages.map((msg, idx) => {
+              const isLastAssistant =
+                msg.role === 'assistant' && idx === messages.length - 1;
+              const isStreaming = isLoading && streamingIdRef.current === msg.id;
+              const { before, choices, hasChoices } =
+                msg.role === 'assistant' && !isStreaming
+                  ? parseChoices(msg.content)
+                  : { before: msg.content, choices: [], hasChoices: false };
+
+              return (
+                <div key={msg.id} className={`${styles.message} ${styles[msg.role]}`}>
+                  <div className={styles.bubble}>
+                    {msg.role === 'assistant' ? (
+                      <>
+                        {/* Typing Indicator solange Inhalt noch leer */}
+                        {msg.content === '' && isStreaming ? (
+                          <div className={styles.typing}>
+                            <div className={styles.dot} />
+                            <div className={styles.dot} />
+                            <div className={styles.dot} />
+                          </div>
+                        ) : (
+                          <div className={styles.markdownBody}>
+                            {renderMarkdown(hasChoices ? before : msg.content)}
+                          </div>
+                        )}
+                        {/* Choice-Selector: nur bei letzter Assistenten-Nachricht */}
+                        {hasChoices && isLastAssistant && (
+                          <ChoiceSelector
+                            choices={choices}
+                            disabled={isLoading}
+                            onConfirm={(selected) => {
+                              const text =
+                                selected.length === choices.length
+                                  ? 'Analysiere bitte alle Spiele.'
+                                  : 'Analysiere bitte: ' + selected.join(', ');
+                              handleSend(text);
+                            }}
+                          />
+                        )}
+                      </>
+                    ) : (
+                      msg.content
+                    )}
+                  </div>
+                  <div className={styles.messageTime}>{formatTime(msg.timestamp)}</div>
+                </div>
+              );
+            })}
+            <div ref={messagesEndRef} />
+          </div>
+
+          {/* Quick Actions (nur beim ersten Öffnen, solange kein Chat läuft) */}
+          {showQuickActions && messages.length === 0 && (
+            <div className={styles.quickActions}>
+              <div className={styles.quickActionsLabel}>Schnellauswahl</div>
+              <div className={styles.quickChips}>
+                {QUICK_ACTIONS.map((qa) => (
+                  <button
+                    key={qa.label}
+                    className={styles.chip}
+                    onClick={() => handleQuickAction(qa.prompt)}
+                    disabled={isLoading}
+                  >
+                    {qa.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Input Area */}
+          <div className={styles.inputArea}>
+            <textarea
+              ref={inputRef}
+              className={styles.input}
+              placeholder="Frag den Experten…"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              disabled={isLoading}
+              rows={1}
+            />
+            <button
+              className={styles.sendBtn}
+              onClick={() => handleSend()}
+              disabled={!input.trim() || isLoading}
+              aria-label="Senden"
+            >
+              ➤
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

frontend/src/components/TipModal.module.css

@@ -219,11 +219,11 @@
 }
 
 .pickerBtn {
-  width: 52px;
+  width: 56px;
-  height: 52px;
+  height: 56px;
   background: var(--surface-high);
-  border: 1px solid rgba(255,255,255,0.08);
+  border: 1px solid rgba(255,255,255,0.1);
-  border-radius: 14px;
+  border-radius: 16px;
   color: var(--text-primary);
   font-size: 24px;
   font-weight: 300;
@@ -232,22 +232,37 @@
   align-items: center;
   justify-content: center;
   transition: all 0.15s;
+  position: relative;
+  overflow: hidden;
   box-shadow:
-    0 4px 10px rgba(0,0,0,0.2),
+    0 6px 16px rgba(0,0,0,0.35),
-    inset 0 1px 0 rgba(255,255,255,0.08);
+    inset 0 1px 0 rgba(255,255,255,0.12),
+    inset 1px 0 0 rgba(255,255,255,0.06);
+}
+
+/* Glossy sheen – gleich wie flagLarge */
+.pickerBtn::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 50%;
+  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%);
+  pointer-events: none;
+  border-radius: 16px 16px 0 0;
 }
 
 .pickerBtn:hover {
-  background: var(--primary-dim);
+  background: rgba(75,183,248,0.12);
-  border-color: rgba(75,183,248,0.3);
+  border-color: rgba(75,183,248,0.35);
   color: var(--primary);
   box-shadow:
-    0 4px 16px rgba(75,183,248,0.15),
+    0 6px 20px rgba(75,183,248,0.2),
-    inset 0 1px 0 rgba(75,183,248,0.1);
+    inset 0 1px 0 rgba(75,183,248,0.15),
+    inset 1px 0 0 rgba(75,183,248,0.08);
 }
 
 .pickerBtn:active {
-  transform: scale(0.94);
+  transform: scale(0.93);
 }
 
 .pickerValue {
@@ -258,6 +273,8 @@
   min-width: 70px;
   text-align: center;
   line-height: 1;
+  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
+  filter: drop-shadow(0 0 18px rgba(75,183,248,0.12));
 }
 
 /* Tendenz bar */
@@ -270,7 +287,23 @@
   background: var(--surface-high);
   border-radius: 12px;
   margin-bottom: 20px;
-  border: 1px solid rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.08);
+  position: relative;
+  overflow: hidden;
+  box-shadow:
+    0 4px 16px rgba(0,0,0,0.25),
+    inset 0 1px 0 rgba(255,255,255,0.1),
+    inset 1px 0 0 rgba(255,255,255,0.05);
+}
+
+/* Glossy sheen – gleich wie flagLarge und pickerBtn */
+.tendencyBar::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 50%;
+  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 100%);
+  pointer-events: none;
 }
 
 .tendencyIcon { font-size: 18px; }
@@ -285,6 +318,163 @@
   font-weight: 700;
 }
 
+/* ---- Expertenblick ---- */
+.insightWrapper {
+  margin-bottom: 20px;
+}
+
+.insightToggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 11px 16px;
+  background: linear-gradient(135deg, rgba(254,174,50,0.12) 0%, rgba(254,174,50,0.05) 100%);
+  border: 1px solid rgba(254,174,50,0.3);
+  border-radius: 12px;
+  color: var(--gold);
+  font-size: 13px;
+  font-weight: 700;
+  font-family: 'Plus Jakarta Sans', sans-serif;
+  cursor: pointer;
+  transition: all 0.18s;
+  text-align: left;
+  letter-spacing: 0.02em;
+  position: relative;
+  overflow: hidden;
+  box-shadow:
+    0 2px 12px rgba(254,174,50,0.1),
+    inset 0 1px 0 rgba(254,174,50,0.15);
+}
+
+/* Glossy sheen */
+.insightToggle::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 50%;
+  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%);
+  pointer-events: none;
+}
+
+.insightToggle:hover {
+  background: linear-gradient(135deg, rgba(254,174,50,0.2) 0%, rgba(254,174,50,0.08) 100%);
+  border-color: rgba(254,174,50,0.5);
+  box-shadow:
+    0 4px 20px rgba(254,174,50,0.2),
+    inset 0 1px 0 rgba(254,174,50,0.2);
+}
+
+.insightIcon {
+  color: var(--gold);
+  flex-shrink: 0;
+  filter: drop-shadow(0 0 4px rgba(254,174,50,0.5));
+}
+
+.insightChevron {
+  margin-left: auto;
+  color: rgba(254,174,50,0.6);
+  transition: transform 0.2s;
+}
+
+.insightPanel {
+  margin-top: 8px;
+  padding: 14px 16px;
+  background: var(--surface-high);
+  border-radius: 12px;
+  border: 1px solid rgba(254,174,50,0.1);
+  box-shadow: inset 0 1px 0 rgba(254,174,50,0.05);
+  animation: insightFadeIn 0.2s ease;
+}
+
+@keyframes insightFadeIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.insightLoading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.insightSpinner {
+  color: var(--primary);
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+.insightText {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.insightLine {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 10px 0;
+  border-bottom: 1px solid rgba(255,255,255,0.05);
+}
+
+.insightLine:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.insightLine:first-child {
+  padding-top: 0;
+}
+
+.insightLabel {
+  font-family: 'Plus Jakarta Sans', sans-serif;
+  font-weight: 700;
+  font-size: 10px;
+  color: var(--primary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.insightValue {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-secondary);
+}
+
+.insightValue strong {
+  color: var(--text-primary);
+  font-weight: 700;
+}
+
+.insightCursor {
+  display: inline-block;
+  width: 2px;
+  height: 14px;
+  background: var(--primary);
+  border-radius: 1px;
+  margin-left: 2px;
+  vertical-align: middle;
+  animation: blink 0.8s ease-in-out infinite;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+.insightErrorMsg {
+  font-size: 13px;
+  color: var(--text-muted);
+  text-align: center;
+}
+
 /* Error */
 .error {
   color: var(--error);

frontend/src/components/TipModal.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
+import { Sparkles, ChevronDown, ChevronUp, Loader2 } from 'lucide-react';
 import { Match, api } from '../api/client';
 import styles from './TipModal.module.css';
 
@@ -16,6 +17,53 @@ function getTendency(home: number, away: number): Tendency {
   return 'draw';
 }
 
+// Streaming-Fetch für /api/agent/insight
+async function fetchInsight(
+  homeTeam: string,
+  awayTeam: string,
+  stage: string,
+  group: string | null,
+  onChunk: (text: string) => void,
+  onDone: () => void,
+  onError: () => void
+) {
+  try {
+    const res = await fetch('/api/agent/insight', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ homeTeam, awayTeam, stage, group }),
+    });
+    if (!res.ok) { onError(); return; }
+
+    const reader = res.body?.getReader();
+    if (!reader) { onError(); return; }
+
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\n');
+      buffer = lines.pop() ?? '';
+      for (const line of lines) {
+        if (!line.startsWith('data: ')) continue;
+        const payload = line.slice(6).trim();
+        if (payload === '[DONE]') { onDone(); return; }
+        try {
+          const parsed = JSON.parse(payload);
+          if (parsed.text) onChunk(parsed.text);
+          if (parsed.error) { onError(); return; }
+        } catch { /* ignore */ }
+      }
+    }
+    onDone();
+  } catch {
+    onError();
+  }
+}
+
 export default function TipModal({ match, onClose, onSaved }: Props) {
   const existing = match.userTip;
   const [home, setHome] = useState(existing?.home ?? 0);
@@ -23,6 +71,34 @@ export default function TipModal({ match, onClose, onSaved }: Props) {
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Expertenblick State
+  const [insightOpen, setInsightOpen] = useState(false);
+  const [insightText, setInsightText] = useState('');
+  const [insightLoading, setInsightLoading] = useState(false);
+  const [insightError, setInsightError] = useState(false);
+  const insightFetched = useRef(false);
+
+  function handleToggleInsight() {
+    const opening = !insightOpen;
+    setInsightOpen(opening);
+    // Nur einmal laden
+    if (opening && !insightFetched.current) {
+      insightFetched.current = true;
+      setInsightLoading(true);
+      setInsightText('');
+      setInsightError(false);
+      fetchInsight(
+        match.homeTeam.name,
+        match.awayTeam.name,
+        match.stage,
+        match.group,
+        (chunk) => setInsightText((t) => t + chunk),
+        () => setInsightLoading(false),
+        () => { setInsightLoading(false); setInsightError(true); }
+      );
+    }
+  }
+
   const tendency = getTendency(home, away);
   const tendencyLabel =
     tendency === 'home' ? match.homeTeam.shortName || match.homeTeam.name :
@@ -71,7 +147,6 @@ export default function TipModal({ match, onClose, onSaved }: Props) {
               }
             </div>
             <span className={styles.teamName}>{match.homeTeam.name}</span>
-            <span className={styles.teamShort}>{match.homeTeam.shortName}</span>
           </div>
 
           <div className={styles.vsBlock}>
@@ -98,7 +173,6 @@ export default function TipModal({ match, onClose, onSaved }: Props) {
               }
             </div>
             <span className={styles.teamName}>{match.awayTeam.name}</span>
-            <span className={styles.teamShort}>{match.awayTeam.shortName}</span>
           </div>
         </div>
 
@@ -122,6 +196,56 @@ export default function TipModal({ match, onClose, onSaved }: Props) {
           </span>
         </div>
 
+        {/* Expertenblick */}
+        <div className={styles.insightWrapper}>
+          <button className={styles.insightToggle} onClick={handleToggleInsight}>
+            <Sparkles size={14} className={styles.insightIcon} />
+            <span>Expertenblick</span>
+            {insightOpen
+              ? <ChevronUp size={14} className={styles.insightChevron} />
+              : <ChevronDown size={14} className={styles.insightChevron} />
+            }
+          </button>
+
+          {insightOpen && (
+            <div className={styles.insightPanel}>
+              {insightLoading && insightText === '' ? (
+                <div className={styles.insightLoading}>
+                  <Loader2 size={15} className={styles.insightSpinner} />
+                  <span>Analyse läuft…</span>
+                </div>
+              ) : insightError ? (
+                <div className={styles.insightErrorMsg}>
+                  Einschätzung gerade nicht verfügbar.
+                </div>
+              ) : (
+                <div className={styles.insightText}>
+                  {insightText.split('\n').filter(l => l.trim()).map((line, i) => {
+                    // **Label:** Value aufsplitten
+                    const match = line.match(/^\*\*(.+?):\*\*\s*(.*)$/);
+                    if (match) {
+                      // Inline **fett** im Value-Teil rendern
+                      const valueParts = match[2].split(/(\*\*.+?\*\*)/g).map((part, j) =>
+                        part.startsWith('**') && part.endsWith('**')
+                          ? <strong key={j}>{part.slice(2, -2)}</strong>
+                          : part
+                      );
+                      return (
+                        <div key={i} className={styles.insightLine}>
+                          <span className={styles.insightLabel}>{match[1]}</span>
+                          <span className={styles.insightValue}>{valueParts}</span>
+                        </div>
+                      );
+                    }
+                    return <div key={i} className={styles.insightLine}>{line}</div>;
+                  })}
+                  {insightLoading && <span className={styles.insightCursor} />}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
         {error && <div className={styles.error}>{error}</div>}
 
         {/* CTA */}