# Handoff: D4RKBOT Webseiten-Redesign („Graphit + Orange")

> **Stand: umgesetzt** (18.08.2026, Commit „Webseiten-Redesign: Graphit +
> Orange, abgeschrägte Ecken"). Dieses Dokument bleibt als Beleg liegen —
> es beschreibt den Soll-Zustand, nicht mehr eine offene Aufgabe.
>
> Drei Stellen weichen bewusst ab, die Gründe stehen in der Commit-Nachricht:
> die Statuszeile im Hero zeigt nur „ONLINE" (Antwortzeit und Erreichbarkeit
> des Bots gibt es öffentlich nicht), der Hauptknopf hat keine Aura
> (`clip-path` schneidet den eigenen Schatten weg — auch in den Referenzen
> unten), und die Config-Bereiche bleiben scharfkantig statt abgeschrägt
> (dort klappen Auswahllisten aus dem Panel heraus).

## Überblick
Redesign der beiden Seiten des d4rkbot-Webinterfaces (Bot-Produktseite `bot.d4rkst3r.de` und Community-Hub `hub.d4rkst3r.de`) plus Dashboard. Neuer Look: Graphit-Grau mit dem Orange-Verlauf aus dem D4RKST3R-Logo, Esports-Charakter über abgeschrägte Ecken (clip-path), Chakra Petch als Display-Schrift, IBM Plex Mono für Labels.

## Zu den Design-Dateien
Die `.dc.html`-Dateien in diesem Ordner sind **Design-Referenzen in HTML** — Prototypen, die Aussehen und Verhalten zeigen, kein Produktionscode. Aufgabe ist, diese Designs **im bestehenden Frontend nachzubauen** (React 19 + Vite, ein zentrales `frontend/src/style.css` mit semantischen Klassen — kein Tailwind nötig). Die bestehende Klassenstruktur (`.nav`, `.page-header`, `.card`, `.home-tiles`, `.settings-layout` …) kann größtenteils bleiben; im Wesentlichen wird `style.css` neu geschrieben und an wenigen Stellen JSX angepasst.

## Fidelity
**High-fidelity.** Farben, Typografie, Abstände und Zustände sind final und sollen pixelgenau übernommen werden.

## Design-Tokens (neue `:root`-Werte für style.css)
```css
:root {
    --bg: #131316;          /* Seiten-Hintergrund (statt #0a0a0a) */
    --bg2: #1b1b20;         /* Karten/Panels (statt #111) */
    --bg3: #1f1f25;         /* Hover-Fläche / erhöht */
    --text: #ececee;        /* Haupttext (statt #e8e0d0 — kein Warmton mehr) */
    --text2: #c9c9cf;       /* Sekundärtext */
    --muted: #9a9aa3;       /* gedämpft */
    --muted2: #66666e;      /* stark gedämpft */
    --border: rgba(255,255,255,.08);
    --accent: #ff9a1f;      /* Orange, Einzelakzent */
    --accent-hi: #ffb340;   /* helles Orange (Verlauf oben) */
    --accent-lo: #f07800;   /* dunkles Orange (Verlauf unten) */
    --grad: linear-gradient(135deg, #ffb340, #f07800);  /* Marken-Verlauf, wie Logo-Wortmarke */
    --success: #3ba55d;
    --danger: #f23f43;
    --display: 'Chakra Petch', sans-serif;   /* 400/500/600/700 */
    --body: 'Chakra Petch', sans-serif;      /* Body 400, 16px, line-height 1.55 */
    --mono: 'IBM Plex Mono', monospace;      /* 400/500 */
}
```
Google Fonts: `Chakra+Petch:wght@400;500;600;700` und `IBM+Plex+Mono:wght@400;500`.
Die alten Fonts (Bebas Neue, Barlow Condensed, Share Tech Mono) entfallen; ebenso Noise-/Scanline-Overlays (`body::before/::after`) und die Partikel-Komponente.

### Wiederkehrende Muster
- **Abgeschrägte Ecken** statt border-radius (Kern des neuen Looks):
  `clip-path: polygon(Npx 0, 100% 0, 100% calc(100% - Npx), calc(100% - Npx) 100%, 0 100%, 0 Npx)`
  N = 6–8px (Badges/Buttons klein), 10px (Buttons/Zeilen), 12–14px (Karten), 16–18px (große Panels).
- **Primär-Button**: `background: var(--grad); color: #131316; font: 500 .78rem var(--mono); letter-spacing:.12em; text-transform:uppercase; padding:.8rem 1.6rem; clip-path 10px; box-shadow:0 0 30px rgba(240,120,0,.3)`.
- **Ghost-Button**: transparent, `border:1px solid rgba(255,255,255,.18)`, Text `--text2`, Hover: `background:rgba(255,255,255,.06); color:#ffb340`.
- **Badge/Tag** (ersetzt `.page-tag`): Mono .68rem, uppercase, `color:#ffb340`, `border:1px solid rgba(255,154,31,.4)`, clip-path 6px, optional pulsierender Punkt (`@keyframes pulseGlow`, 2s).
- **Gradient-Text** für betonte Wörter in Headlines: `background:var(--grad); -webkit-background-clip:text; color:transparent`, dazu `filter:drop-shadow(0 0 22px rgba(240,120,0,.35))`.
- **Section-Header**: 22×3px Verlaufs-Strich + Titel (Chakra Petch 700, uppercase) + auslaufende 1px-Linie + rechts Mono-Meta in `--muted2`.
- **Icon-Kachel**: 32–36px, `background:rgba(255,154,31,.1); border:1px solid rgba(255,154,31,.3); color:#ffb340`, clip-path 6–7px; Icons weiterhin Lucide (18px, stroke 1.75) — `icons.jsx` bleibt unverändert.
- **Hintergrund-Glow** statt Grid/BG-Text: `radial-gradient(900px 500px at 78% -10%, rgba(240,120,0,.14), transparent 60%)` als fixed Layer.

## Screens
Referenzdateien (Reihenfolge = Priorität):

### 1. Bot-Landing — `D4RKBOT-Landing-neu.dc.html` (ersetzt `pages/BotLanding.jsx`)
- **Hero**: 2-Spalten-Grid (1.15fr / .85fr), max-width 1160px, padding 5rem 2.5rem.
  Links: Badge „Selbst gebaut · keine Paywall" → H1 4.1rem, 700, uppercase, 3 Zeilen-Stile: normal / Outline (`-webkit-text-stroke:1.5px #9a9aa3`, Füllung transparent) / Gradient-Text → Subtitle (1.05rem, `--muted`, max 520px) → CTA-Reihe (Primär „Alle Funktionen →", Ghost „/befehle").
  Rechts: „Bot-Karte": äußerer versetzter Rahmen (inset -1.2rem, border `--border`, clip-path 24px), innen Panel `--bg2` clip-path 18px mit: Logo-Lockup (200px, zentriert, drop-shadow), Statuszeile (grüner Punkt + „ONLINE · 38 MS · UPTIME 99,2 %" — live aus `/api`), 2×2 Stat-Kacheln (Zahl 1.7rem Gradient-Text; Labels Mono .6rem uppercase): Funktionen / Slash-Befehle / Spiele im Monitor / 0 € — Werte wie bisher aus `/api/features` etc.
- **„Was er kann"**: Section-Header + rechts „40 MODULE · EINZELN SCHALTBAR"; 3-spaltiges Grid, 9 Kacheln (`.home-tile`-Ersatz): Icon-Kachel + Titel (600, 1.02rem) in einer Zeile, Beschreibung .88rem `--muted`. Hover: Border `rgba(255,154,31,.5)`, bg `--bg3`, translateY(-3px).
- **Zwei Feature-Panels** (Für Entwickler / Hosting): 2 Spalten; links neutraler Glas-Verlauf `linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.015))`, rechts Orange-Verlauf `linear-gradient(135deg,rgba(240,120,0,.16),rgba(240,120,0,.04))` + Border `rgba(255,154,31,.35)`.
- **Hub-Hinweis**: Mono .74rem `--muted2` mit unterstrichenem Link.

### 2. Funktionen — `D4RKBOT-Funktionen-neu.dc.html` (ersetzt `pages/BotFeatures.jsx`)
Kompakter Seitenkopf (Badge, H1 3.6rem mit Gradient-Silbe, Subtitle) statt großem `page-header`. Je Modul-Gruppe (aus `/api/features`) ein Section-Header mit Modul-Zähler rechts, 3-spaltiges Kachel-Grid (Icon via `module-icons.jsx`). Abschluss: Outro-Absatz + CTA-Reihe.

### 3. Befehle — `D4RKBOT-Befehle-neu.dc.html` (ersetzt `pages/BotCommands.jsx`)
Gleicher Seitenkopf. Je Gruppe Section-Header (Schloss-Icon in Orange bei eingeschränkten Gruppen), Befehle als Zeilen (clip-path 10px): `code` in Mono .82rem `#ffb340`, min-width 16rem; Beschreibung `--muted`.

### 4. Hub-Start — `Hub-Start-neu.dc.html` (ersetzt `pages/Home.jsx`)
Hero 2-spaltig: links Badge „Community-Hub", H1 „Willkommen bei D4RKST3R" (Name als Gradient-Text), CTAs (Zum Discord → primär, Devlogs lesen ghost), darunter Stat-Reihe (Member / Server online / Spieler — Zahlen 1.9rem Gradient-Text) aus `/api/serverstats` + `/api/servers`. Rechts: Logo-Lockup 300px mit drop-shadow + Orange-Glow.
Darunter: 6 Bereichs-Kacheln (Devlog, Roadmap, Server, Galerie, Level, Events — gleiche Kachel wie Landing) und „Neuestes Devlog"-Panel (Teaser + „Weiterlesen →" in Orange-Mono).
Hub-Logo in der Nav: Mark + „D4RKST3R" (Suffix „3R" in `--accent`).

### 5. Dashboard — `Dashboard-neu.dc.html` (Status-Tab von `pages/Settings.jsx`)
Kompakter Kopf: H1 „Dashboard" + Meta + rechts Status-Pill (grün, „Bot online · 38 ms").
Layout wie bisher `settings-layout`: Sidebar 13rem (Suche, Gruppen-Labels Mono .56rem, Items Mono .7rem; aktiv: Orange + `border-left:2px solid var(--accent)` + bg `rgba(255,154,31,.08)`).
Inhalt: Bot-Panel (Mark 46px, Name+Tag, Online-Pill, rechts Laufzeit) → Erreichbarkeits-Balken (168 Striche, 32px hoch: grün `--success`, Ausfall `--danger`, teilweise `--accent`, leer `rgba(255,255,255,.08)`) → 4 KPI-Karten (Wert 1.6rem 700, Label Mono, Nebenzeile farbcodiert).
Darunter 2 Spalten (1.2fr/.8fr): Aktivitäts-Balkenchart (Balken `linear-gradient(180deg,#ffb340,rgba(240,120,0,.2))`) und „Module nach Bereich" (Fortschrittsbalken im Marken-Verlauf).
Alle übrigen Settings-Tabs übernehmen nur die Token (Panels `--bg2`, Inputs auf `#131316`, Fokus-Border `--accent`, Toggles: an = `--grad`).

## Interaktionen & Verhalten
- Nav bleibt sticky mit `backdrop-filter: blur(12px)`; Zustand „scrolled" kann entfallen (Leiste ist immer kompakt, padding .85rem 2.5rem).
- Aktiver Nav-Link: `color:#ffb340; border-bottom:2px solid var(--accent)` (ersetzt den animierten Gradient-Unterstrich).
- Karten-Hover überall: Border → `rgba(255,154,31,.5)`, bg → `--bg3`, `transform: translateY(-3px)`, transition ~.2s.
- Einblendung `riseIn` (.4–.5s, translateY 12px) bleibt wie bisher; `prefers-reduced-motion` respektieren (Regel aus alter style.css übernehmen).
- Alle Datenquellen/Routen unverändert (`/api/features`, `/api/serverstats`, `/api/me` …). i18n-Keys unverändert.

## Assets
- Wolf-Mark (Nav 34px, Footer 20px, Dashboard 46px) und Logo mit Wortmarke
  (Landing-Hero 200px, Hub-Hero 300px) liegen als `frontend/public/brand/`
  im Auslieferungsstand — verkleinert auf die Größen, in denen sie wirklich
  dargestellt werden. Originale: [`../brand/`](../brand/).
- Icons: Lucide (bereits als Dependency vorhanden).

## Dateien in diesem Paket
- `D4RKBOT-Landing-neu.dc.html`, `D4RKBOT-Funktionen-neu.dc.html`, `D4RKBOT-Befehle-neu.dc.html`, `Hub-Start-neu.dc.html`, `Dashboard-neu.dc.html` — Design-Referenzen (im Browser zu öffnen; alle Maße/Farben stehen inline im style-Attribut)

Der mitgelieferte `assets/`-Ordner ist beim Einsortieren entfallen — er
enthielt Kopien von `docs/brand/mark.png` und `docs/brand/lockup.png`. Die
`.dc.html`-Dateien zeigen jetzt auf `../brand/` und stellen das Logo im
Browser weiterhin dar.

## Empfohlene Umsetzungs-Reihenfolge
1. Tokens + Fonts in `frontend/src/style.css` tauschen, Noise/Scanlines/Partikel entfernen
2. Nav + Footer (BotApp.jsx / App.jsx: Logo-`<img>` ergänzen)
3. BotLanding.jsx (neues Hero-Layout mit Bot-Karte)
4. BotFeatures / BotCommands / Home (Seitenkopf-Komponente statt `page-header`)
5. Settings (Status-Tab, dann nur Token-Durchstich für die restlichen Tabs)