Webseiten-Redesign: Graphit + Orange, abgeschraegte Ecken

Umsetzung des Entwurfs aus design_handoff_redesign/ -- beide Auftritte
(Produktseite und Community-Hub) plus Dashboard.

  Farbe    #0a0a0a + Neon-Gelb   ->  #131316 + Orange-Verlauf aus dem Logo
  Schrift  Bebas/Barlow/ShareTech ->  Chakra Petch + IBM Plex Mono
  Form     border-radius          ->  clip-path, oben links + unten rechts

Rauschen, Scanlines, Hintergrundschrift, Kopf-Raster und die Partikel sind
raus; der Schein von oben rechts ersetzt sie. Die Abschraegung ist ein
System und keine sechzig Einzelregeln: eine clip-path-Regel mit --bv, jede
Komponente setzt nur die Tiefe.

Der Farbdurchstich ging durch alle ~55 Abschnitte der style.css, nicht nur
durch die fuenf gezeichneten Seiten -- sonst waeren Galerie, Level,
Composer und Emoji-Auswahl im alten Gelb stehen geblieben. Von --neon ist
nichts uebrig.

Die Schriften kommen weiter self-hosted ueber @fontsource. Der Entwurf
schlaegt einen Google-Fonts-Link vor; das waere eine Fremdanfrage mehr, wo
der Aufbau bisher ohne auskam.

ZWEI FEHLER unterwegs gefunden, beide aelter als dieser Umbau:

1. .btn stand in der Datei NACH .btn-save und .btn-ghost. Bei gleicher
   Spezifitaet gewinnt die spaetere Regel, also hat ihr `background: none`
   jeden Verlauf ueberschrieben -- der Speichern-Knopf sah aus wie ein
   Ghost-Knopf, schon in der gelben Fassung. Die Grundform steht jetzt
   vor allen Abwandlungen.

2. .nav-logo ist ein Flex-Container, und `gap` legte sich zwischen die
   Textknoten "D4RKST" und <span>3R</span>. In der Leiste stand
   "D4RKST 3R". Der Abstand haengt jetzt am Bild statt am Container.

DREI ABWEICHUNGEN vom Entwurf, bewusst:

- Die Statuszeile im Hero zeigt nur "ONLINE", nicht "38 MS · UPTIME
  99,2 %". Antwortzeit und Erreichbarkeit des Bots liegen ausschliesslich
  hinter /api/settings und damit hinter der Anmeldung; oeffentlich gibt es
  sie nirgends. Dafuer braeuchte es einen neuen Endpunkt -- erfunden wird
  hier nichts.
- Keine Aura am Hauptknopf: clip-path schneidet den Schatten des eigenen
  Elements mit weg. Im Referenz-HTML stehen box-shadow und clip-path am
  selben Element, dort ist sie also ebenso wenig zu sehen. Tote
  Deklaration weggelassen statt mitgeschleppt.
- Die Config-Bereiche bleiben scharfkantig statt abgeschraegt. In ihnen
  klappen Auswahllisten aus dem Panel heraus, die clip-path abschneiden
  wuerde. Deckt sich mit der Vorgabe, dass die uebrigen Tabs nur die
  Token uebernehmen; die Dashboard-Panels selbst sind abgeschraegt.

Dazu: .content von 860 auf 1160 px, weil die dreispaltigen Raster es
brauchen -- die Devlog-Timeline behaelt 880 px Lesebreite, sonst waeren
die Zeilen zu lang. Der Punkt an den Timeline-Karten ist entfallen: er
sass ausserhalb der Karte und waere von der Abschraegung weggeschnitten
worden.

Welches Wort in einer Ueberschrift den Verlauf bekommt, steht jetzt im
Woerterbuch -- der Teil in eckigen Klammern ("Funk[tionen]", aber
"Fea[tures]"). So entscheidet jede Sprache selbst, wo sich das Wort
teilen laesst.

Mitgezogen: brand.js, das geteilte Design-System fuer die eingebundenen
Dienste. Neue Tokens und Abschraegungen, aber --neon/--neon2 bleiben als
Zweitname stehen -- fremde Apps benutzen sie in ihrem eigenen CSS.

Marken-Dateien nach frontend/public/brand/, verkleinert auf die Groessen,
in denen sie wirklich dargestellt werden: 2,4 MB -> 97 KB.

Geprueft: Build laeuft. Im Browser durchgesehen -- Landing, Funktionen,
Befehle, Hub-Start, Devlogs, Server, Roadmap, Dashboard.

Ungeprueft: das Dashboard mit echter Anmeldung. Eine Sitzung war hier
nicht moeglich, gesehen habe ich es ueber gestubbte API-Antworten. Ebenso
ungeprueft, wie sich die Schriftumstellung auf schmalen Schirmen macht.

NICHT angefasst: die Embed-Farben in runtime-settings.js stehen weiter auf
dem alten Gelb -- die wirken in Discord, nicht auf der Webseite. Und ist
brand_color in der Datenbank gesetzt, behalten die eingebundenen Dienste
ihre bisherige Farbe, unabhaengig von den neuen Vorgabewerten.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/web/brand.js

@@ -18,8 +18,8 @@ const js = (value) => JSON.stringify(String(value ?? ''));
 
 export function registerBrandRoutes(app) {
     app.get('/brand.css', async (request, reply) => {
-        const neon = getSetting('brand_color') || '#f5c518';
-        const neon2 = getSetting('brand_color2') || '#ff4d00';
+        const neon = getSetting('brand_color') || '#ffb340';
+        const neon2 = getSetting('brand_color2') || '#f07800';
 
         return reply
             .type('text/css; charset=utf-8')
@@ -27,88 +27,106 @@ export function registerBrandRoutes(app) {
             .header('access-control-allow-origin', '*')
             .send(`/* D4RKST3R Design-Tokens — erzeugt von ${publicUrl()} */
 :root {
+    /* Leitfarbe: hell = Text und Symbole, dunkel = Ende des Verlaufs */
+    --accent-hi: ${neon};
+    --accent-lo: ${neon2};
+    --accent: ${neon};
+    --grad: linear-gradient(135deg, ${neon}, ${neon2});
+    /* Alte Namen bleiben als Zweitname stehen — eingebundene Dienste
+       benutzen sie in ihrem eigenen CSS. */
     --neon: ${neon};
     --neon2: ${neon2};
-    --bg: #0a0a0a;
-    --bg2: #111;
-    --bg3: #161616;
-    --text: #e8e0d0;
-    --muted: #8a8378;
-    --muted2: #666;
-    --border: color-mix(in srgb, ${neon} 15%, transparent);
-    --success: #00ff88;
+    --bg: #131316;
+    --bg2: #1b1b20;
+    --bg3: #1f1f25;
+    --text: #ececee;
+    --text2: #c9c9cf;
+    --muted: #9a9aa3;
+    --muted2: #66666e;
+    --border: rgba(255,255,255,.08);
+    --success: #3ba55d;
     --danger: #f23f43;
     /* Schriften per @fontsource in der App installieren:
-       npm i @fontsource/bebas-neue @fontsource/barlow-condensed @fontsource/share-tech-mono */
-    --display: 'Bebas Neue', Impact, sans-serif;
-    --body: 'Barlow Condensed', system-ui, sans-serif;
-    --mono: 'Share Tech Mono', ui-monospace, monospace;
+       npm i @fontsource/chakra-petch @fontsource/ibm-plex-mono */
+    --display: 'Chakra Petch', system-ui, sans-serif;
+    --body: 'Chakra Petch', system-ui, sans-serif;
+    --mono: 'IBM Plex Mono', ui-monospace, monospace;
+}
+
+/* Abgeschrägte Ecken statt Rundungen — Tiefe über --bv */
+.d4rk-bevel, .d4rk-card, .d4rk-btn {
+    clip-path: polygon(
+        var(--bv, 12px) 0, 100% 0,
+        100% calc(100% - var(--bv, 12px)), calc(100% - var(--bv, 12px)) 100%,
+        0 100%, 0 var(--bv, 12px)
+    );
 }
 
 .d4rk-body {
     background: var(--bg); color: var(--text);
-    font-family: var(--body); font-size: 17px; line-height: 1.6;
+    font-family: var(--body); font-size: 16px; line-height: 1.55;
 }
 .d4rk-title {
-    font-family: var(--display); letter-spacing: .03em;
-    color: var(--text); line-height: .95;
+    font-family: var(--display); font-weight: 700;
+    letter-spacing: .02em; text-transform: uppercase;
+    color: var(--text); line-height: 1.02;
 }
 .d4rk-tag {
-    font-family: var(--mono); font-size: .7rem; letter-spacing: .3em;
-    text-transform: uppercase; color: var(--neon2);
+    font-family: var(--mono); font-size: .68rem; letter-spacing: .2em;
+    text-transform: uppercase; color: var(--accent-hi);
 }
 .d4rk-card {
-    background: var(--bg2); border: 1px solid rgba(255,255,255,.06);
-    border-radius: 12px; padding: 1.3rem 1.6rem;
-    transition: border-color .25s, transform .25s, box-shadow .25s;
+    background: var(--bg2); border: 1px solid var(--border);
+    padding: 1.3rem 1.6rem;
+    transition: border-color .2s, background .2s, transform .2s;
 }
 .d4rk-card:hover {
-    border-color: var(--border); transform: translateY(-2px);
-    box-shadow: 0 10px 30px rgba(0,0,0,.45);
+    border-color: color-mix(in srgb, ${neon} 50%, transparent);
+    background: var(--bg3); transform: translateY(-3px);
 }
 .d4rk-btn {
+    --bv: 10px;
     display: inline-flex; align-items: center; gap: .5rem;
-    font-family: var(--mono); font-size: .7rem;
-    letter-spacing: .2em; text-transform: uppercase;
-    color: var(--neon); background: none;
-    border: 1px solid var(--border); border-radius: 999px;
-    padding: .5rem 1.2rem; cursor: pointer;
-    transition: background .2s, border-color .2s, box-shadow .2s;
+    font-family: var(--mono); font-size: .72rem; font-weight: 500;
+    letter-spacing: .14em; text-transform: uppercase;
+    color: var(--bg); background: var(--grad);
+    border: 0; padding: .55rem 1.3rem; cursor: pointer;
+    transition: filter .2s;
 }
-.d4rk-btn:hover {
-    border-color: var(--neon); background: color-mix(in srgb, var(--neon) 8%, transparent);
-    box-shadow: 0 0 16px color-mix(in srgb, var(--neon) 15%, transparent);
+.d4rk-btn:hover { filter: brightness(1.1); }
+/* Zweite Stufe: nur Kontur, für alles neben der Hauptaktion */
+.d4rk-btn-ghost {
+    background: none; color: var(--text2);
+    border: 1px solid rgba(255,255,255,.18);
 }
+.d4rk-btn-ghost:hover { background: rgba(255,255,255,.06); color: var(--accent-hi); filter: none; }
 
 /* Navbar, die brand-nav.js einfügt */
 .d4rk-nav {
     position: sticky; top: 0; z-index: 200;
-    display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
-    padding: 1rem 2rem;
-    background: rgba(10,10,10,.9);
-    backdrop-filter: blur(14px) saturate(1.2);
-    -webkit-backdrop-filter: blur(14px) saturate(1.2);
+    display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap;
+    padding: .85rem 2rem;
+    background: rgba(19,19,22,.88);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
     border-bottom: 1px solid var(--border);
 }
 .d4rk-nav-logo {
-    font-family: var(--display); font-size: 1.5rem; letter-spacing: .15em;
-    color: var(--neon); text-decoration: none; line-height: 1;
+    font-family: var(--display); font-weight: 700;
+    font-size: 1.12rem; letter-spacing: .06em;
+    color: var(--text); text-decoration: none; line-height: 1;
 }
-.d4rk-nav-logo span { color: var(--neon2); }
+.d4rk-nav-logo span { color: var(--accent); }
 .d4rk-nav a:not(.d4rk-nav-logo) {
-    position: relative;
-    font-family: var(--mono); font-size: .7rem;
-    letter-spacing: .25em; text-transform: uppercase;
-    color: var(--muted); text-decoration: none; padding: .3rem 0;
-    transition: color .2s;
+    font-family: var(--mono); font-size: .72rem;
+    letter-spacing: .14em; text-transform: uppercase;
+    color: var(--muted); text-decoration: none;
+    border-bottom: 2px solid transparent; padding-bottom: .2rem;
+    transition: color .2s, border-color .2s;
 }
-.d4rk-nav a:not(.d4rk-nav-logo)::after {
-    content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
-    background: linear-gradient(90deg, var(--neon), var(--neon2)); border-radius: 2px;
-    transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
+.d4rk-nav a:not(.d4rk-nav-logo):hover {
+    color: var(--accent-hi); border-bottom-color: var(--accent);
 }
-.d4rk-nav a:not(.d4rk-nav-logo):hover { color: var(--text); }
-.d4rk-nav a:not(.d4rk-nav-logo):hover::after { transform: scaleX(1); }
 .d4rk-nav-spacer { flex: 1; }
 @media (max-width: 640px) {
     .d4rk-nav { padding: .8rem 1rem; gap: 1rem; }
@@ -149,7 +167,7 @@ export function registerBrandRoutes(app) {
             a.href = link.url;
             a.textContent = link.name;
             // aktuelle Seite hervorheben
-            if (location.href.indexOf(link.url) === 0) a.style.color = 'var(--neon)';
+            if (location.href.indexOf(link.url) === 0) a.style.color = 'var(--accent-hi)';
             nav.appendChild(a);
         });
 

src/web/server.js

@@ -196,7 +196,8 @@ export async function startWebServer(client) {
                 `<meta property="og:description" content="${esc(description)}">`,
                 `<meta property="og:url" content="${esc(base + path)}">`,
                 `<meta property="og:type" content="website">`,
-                `<meta name="theme-color" content="${isBotSite ? '#ff4d00' : '#f5c518'}">`,
+                // Beide Auftritte teilen sich seit dem Redesign eine Palette
+                `<meta name="theme-color" content="#131316">`,
                 `<meta name="description" content="${esc(description)}">`,
                 `<meta property="og:image" content="${esc(image)}">`,
                 `<meta name="twitter:card" content="summary_large_image">`,