- // 1. Verantwortlicher
+ 1. Verantwortlicher
Verantwortlich für die Datenverarbeitung auf dieser Webseite im Sinne der
Datenschutz-Grundverordnung (DSGVO) ist:
@@ -40,7 +38,7 @@ export default function Datenschutz() {
{legal.email && <>E-Mail: {legal.email} >}
- // 2. Aufruf der Webseite (Server-Logs)
+ 2. Aufruf der Webseite (Server-Logs)
Beim Aufruf dieser Seite verarbeitet der Server technische Zugriffsdaten:
IP-Adresse, Zeitpunkt der Anfrage, aufgerufene Adresse, HTTP-Statuscode und
@@ -51,7 +49,7 @@ export default function Datenschutz() {
zusammengeführt und nach kurzer Zeit im Rahmen der üblichen Rotation gelöscht.
- // 3. Cookies
+ 3. Cookies
Diese Seite verwendet ausschließlich technisch notwendige Cookies. Konkret
wird nach einem Login ein signiertes Sitzungs-Cookie gesetzt, damit du
@@ -64,7 +62,7 @@ export default function Datenschutz() {
Verbindung zu Dritten.
- // 4. Login mit Discord
+ 4. Login mit Discord
Für den Mitglieder-Bereich kannst du dich freiwillig mit deinem
Discord-Konto anmelden (OAuth2, Berechtigung identify). Dabei
@@ -85,7 +83,7 @@ export default function Datenschutz() {
Datenschutzerklärung von Discord.
- // 5. Community-Funktionen
+ 5. Community-Funktionen
{brand} betreibt einen eigenen Discord-Bot, der zur Verwaltung der Community
Daten speichert. Verarbeitet werden — je nachdem, welche Funktionen du nutzt:
@@ -133,7 +131,7 @@ export default function Datenschutz() {
am Betrieb einer funktionierenden Community) für den technischen Betrieb.
- // 6. Moderation und Protokolle
+ 6. Moderation und Protokolle
Zur Durchsetzung der Serverregeln werden Verwarnungen mit Benutzer-ID, Grund
und Zeitpunkt gespeichert. Änderungen im Administrationsbereich der Webseite
@@ -142,7 +140,7 @@ export default function Datenschutz() {
Abs. 1 lit. f DSGVO.
- // 7. Speicherdauer
+ 7. Speicherdauer
Wir speichern personenbezogene Daten so lange, wie du Mitglied der Community
bist oder die jeweilige Funktion nutzt. Verlässt du den Discord-Server, kannst
@@ -152,14 +150,14 @@ export default function Datenschutz() {
werden.
- // 8. Weitergabe an Dritte
+ 8. Weitergabe an Dritte
Eine Weitergabe deiner Daten zu Werbezwecken findet nicht statt. Ein Verkauf
von Daten erfolgt nicht. Übermittlungen erfolgen nur an Discord, soweit dies
für die Nutzung des Discord-Servers und des Logins technisch notwendig ist.
- // 9. Deine Rechte
+ 9. Deine Rechte
Du hast jederzeit das Recht auf Auskunft über die zu deiner Person
gespeicherten Daten (Art. 15 DSGVO), auf Berichtigung (Art. 16), auf Löschung
@@ -179,14 +177,14 @@ export default function Datenschutz() {
{' '}{legal.email ? {legal.email} : 'die im Impressum genannte Adresse'}.
- // 10. Beschwerderecht
+ 10. Beschwerderecht
Wenn du der Ansicht bist, dass die Verarbeitung deiner Daten gegen die DSGVO
verstößt, kannst du dich bei einer Datenschutz-Aufsichtsbehörde beschweren —
etwa bei der für deinen Wohnsitz zuständigen Landesdatenschutzbehörde.
- // 11. Änderungen
+ 11. Änderungen
Wir passen diese Datenschutzerklärung an, wenn sich die angebotenen Funktionen
ändern. Es gilt jeweils die hier veröffentlichte Fassung.
diff --git a/frontend/src/pages/DevlogDetail.jsx b/frontend/src/pages/DevlogDetail.jsx
index d184fc2..5aa9c50 100644
--- a/frontend/src/pages/DevlogDetail.jsx
+++ b/frontend/src/pages/DevlogDetail.jsx
@@ -41,8 +41,6 @@ export default function DevlogDetail() {
return (
<>
- DEVLOG
-
{t('devlog.tag')}
{item ? datum(item.posted_at, DATUM) : t('nav.devlog')}
diff --git a/frontend/src/pages/Devlogs.jsx b/frontend/src/pages/Devlogs.jsx
index 196449e..60def47 100644
--- a/frontend/src/pages/Devlogs.jsx
+++ b/frontend/src/pages/Devlogs.jsx
@@ -101,8 +101,6 @@ export default function Devlogs({ me }) {
return (
<>
- DEVLOG
-
{t('devlogs.tag')}
{t('nav.devlog')}
diff --git a/frontend/src/pages/Events.jsx b/frontend/src/pages/Events.jsx
index aff072a..ad34a27 100644
--- a/frontend/src/pages/Events.jsx
+++ b/frontend/src/pages/Events.jsx
@@ -23,8 +23,6 @@ export default function Events() {
return (
<>
- EVENTS
-
{t('events.tag')}
{t('nav.events')}
diff --git a/frontend/src/pages/Galerie.jsx b/frontend/src/pages/Galerie.jsx
index 32b77e7..c3c8c1c 100644
--- a/frontend/src/pages/Galerie.jsx
+++ b/frontend/src/pages/Galerie.jsx
@@ -30,8 +30,6 @@ export default function Galerie() {
return (
<>
- GALERIE
-
{t('gallery.tag')}
{t('nav.gallery')}
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index e0bd486..72b1b4b 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -51,56 +51,61 @@ export default function Home() {
return (
<>
-
- D4RKST3R
-
-
-
{t('home.tag')}
-
- {t('home.welcome')} {t('home.at')} D4RKST3 R
+
+
+
{t('home.tag')}
+
+ {t('home.welcome')} {t('home.at')}
+ D4RKST3R
-
{t('home.subtitle')}
+
{t('home.subtitle')}
+
+ {(stats || servers) && (
+
+ {stats?.members > 0 && (
+
+ {zahl(stats.members)}
+ {t('home.members')}
+
+ )}
+ {servers?.length > 0 && (
+
+
+ {online.length} / {servers.length}
+
+ {t('home.serversOnline')}
+
+ )}
+ {online.length > 0 && (
+
+ {players}
+ {t('home.playersNow')}
+
+ )}
+
+ )}
+
+
+
+
- {(stats || servers) && (
-
- {stats?.members > 0 && (
-
- {zahl(stats.members)}
- {t('home.members')}
-
- )}
- {servers?.length > 0 && (
-
- {online.length} / {servers.length}
- {t('home.serversOnline')}
-
- )}
- {online.length > 0 && (
-
- {players}
- {t('home.playersNow')}
-
- )}
-
- )}
-
{TILES.map(([to, Icon, titleKey, descKey]) => (
-
+
{t(titleKey)}
{t(descKey)}
diff --git a/frontend/src/pages/Impressum.jsx b/frontend/src/pages/Impressum.jsx
index dbfba92..63fea2d 100644
--- a/frontend/src/pages/Impressum.jsx
+++ b/frontend/src/pages/Impressum.jsx
@@ -17,10 +17,8 @@ export default function Impressum() {
return (
<>
- LEGAL
-
-
// Pflichtangaben
+
Pflichtangaben
Impressum
Angaben gemäß § 5 Digitale-Dienste-Gesetz (DDG).
@@ -34,7 +32,7 @@ export default function Impressum() {
)}
- // Diensteanbieter
+ Diensteanbieter
{legal.name || '—'}
{(legal.address || '').split('\n').map((line, i) => (
@@ -42,25 +40,25 @@ export default function Impressum() {
))}
- // Kontakt
+ Kontakt
E-Mail: {legal.email ? {legal.email} : '—'}
{legal.extra && (
<>
- // Weitere Angaben
+ Weitere Angaben
{legal.extra.split('\n').map((line, i) => {line} )}
>
)}
- // Verantwortlich für den Inhalt
+ Verantwortlich für den Inhalt
Verantwortlich für journalistisch-redaktionelle Inhalte nach § 18 Abs. 2 MStV:
{' '}{legal.name || '—'}{legal.address ? `, ${legal.address.replace(/\n/g, ', ')}` : ''}
- // Haftung für Inhalte
+ Haftung für Inhalte
Als Diensteanbieter sind wir für eigene Inhalte auf diesen Seiten nach den
allgemeinen Gesetzen verantwortlich. Wir sind jedoch nicht verpflichtet,
@@ -73,7 +71,7 @@ export default function Impressum() {
entfernen wir diese Inhalte umgehend.
- // Haftung für Links
+ Haftung für Links
Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte
wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch
@@ -82,7 +80,7 @@ export default function Impressum() {
von Rechtsverletzungen entfernen wir derartige Links umgehend.
- // Urheberrecht
+ Urheberrecht
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten
unterliegen dem deutschen Urheberrecht. Beiträge Dritter — insbesondere
diff --git a/frontend/src/pages/Level.jsx b/frontend/src/pages/Level.jsx
index a9a9dd7..57682df 100644
--- a/frontend/src/pages/Level.jsx
+++ b/frontend/src/pages/Level.jsx
@@ -60,8 +60,6 @@ export default function Level() {
return (
<>
- LEVEL
-
{t('level.tag')}
{t('nav.level')}
diff --git a/frontend/src/pages/Mods.jsx b/frontend/src/pages/Mods.jsx
index cea326e..24a601c 100644
--- a/frontend/src/pages/Mods.jsx
+++ b/frontend/src/pages/Mods.jsx
@@ -49,8 +49,6 @@ export default function Mods() {
return (
<>
- MODS
-
{t('mods.tag')}
{daten?.server?.name ?? t('mods.title')}
diff --git a/frontend/src/pages/Profil.jsx b/frontend/src/pages/Profil.jsx
index 769be2d..3663b51 100644
--- a/frontend/src/pages/Profil.jsx
+++ b/frontend/src/pages/Profil.jsx
@@ -72,7 +72,7 @@ export default function Profil({ me }) {
return (
-
// Profil
+
Profil
Nicht eingeloggt
Mit Discord einloggen , um dein Profil zu sehen.
@@ -87,10 +87,8 @@ export default function Profil({ me }) {
return (
<>
- PROFIL
-
-
// Member
+
Member
Profil
Dein Stand auf dem Server — Rang, Rollen und Keys.
@@ -145,7 +143,7 @@ export default function Profil({ me }) {
{/* Alpha-Key */}
{profile.alphaKey && (
-
// Dein Alpha-Key
+
Dein Alpha-Key
{profile.alphaKey}
@@ -158,7 +156,7 @@ export default function Profil({ me }) {
{/* Rollen-Selfservice */}
{menus.length > 0 && (
-
// Rollen wählen
+
Rollen wählen
{menus.map((m) => (
{m.title}
@@ -183,7 +181,7 @@ export default function Profil({ me }) {
{/* DSGVO Art. 17: eigene Daten löschen */}
-
// Meine Daten
+
Meine Daten
Du kannst jederzeit alle Daten löschen, die hier zu dir gespeichert
sind: XP/Level, Geburtstag, Playtester-Eintrag, Abstimmungen,
diff --git a/frontend/src/pages/Roadmap.jsx b/frontend/src/pages/Roadmap.jsx
index 2c49c20..5a61725 100644
--- a/frontend/src/pages/Roadmap.jsx
+++ b/frontend/src/pages/Roadmap.jsx
@@ -191,8 +191,6 @@ export default function Roadmap() {
return (
<>
- ROADMAP
-
{t('roadmap.tag')}
{t('nav.roadmap')}
diff --git a/frontend/src/pages/Seite.jsx b/frontend/src/pages/Seite.jsx
index 7e04c67..d930e31 100644
--- a/frontend/src/pages/Seite.jsx
+++ b/frontend/src/pages/Seite.jsx
@@ -21,7 +21,7 @@ export default function Seite() {
return (
-
// 404
+
404
Seite nicht gefunden
Zurück zur Startseite
@@ -34,10 +34,8 @@ export default function Seite() {
return (
<>
- {(page?.title ?? '').slice(0, 12).toUpperCase()}
-
-
// {page?.published === false ? 'Entwurf' : 'Info'}
+
{page?.published === false ? 'Entwurf' : 'Info'}
{page?.title ?? ' '}
diff --git a/frontend/src/pages/Server.jsx b/frontend/src/pages/Server.jsx
index fa0c940..478c935 100644
--- a/frontend/src/pages/Server.jsx
+++ b/frontend/src/pages/Server.jsx
@@ -251,8 +251,6 @@ export default function Server() {
return (
<>
- SERVER
-
{t('server.tag')}
{t('nav.server')}
diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings.jsx
index 5747358..657810c 100644
--- a/frontend/src/pages/Settings.jsx
+++ b/frontend/src/pages/Settings.jsx
@@ -1248,14 +1248,19 @@ export default function Settings({ me }) {
entries: menuDraft.entries.map((e, j) => (j === i ? { ...e, ...patch } : e)),
});
+ // Kopf des Panels: eine Zeile statt eines eigenen Seitenkopfs — darunter
+ // beginnt sofort die Arbeitsfläche. Die Antwortzeit steht nur hier, weil
+ // sie aus der Panel-API kommt und nicht öffentlich ist.
const header = (
-
- CONFIG
-
-
-
// Admin
-
Config
-
Alles an einem Ort — Änderungen greifen sofort.
+
+
+
Dashboard
+ Alles an einem Ort — Änderungen greifen sofort
+ {data?.status && (
+
+ Bot online{data.status.ping != null && ` · ${data.status.ping} ms`}
+
+ )}
);
@@ -1337,11 +1342,11 @@ export default function Settings({ me }) {
const tabStatus = (
<>
-
+
{data.status.botAvatar
?
- :
? }
+ :
}
{data.status.botName ?? 'Bot'}
@@ -1402,55 +1407,65 @@ export default function Settings({ me }) {
- {aktivitaet && aktivitaet.gesamt > 0 && (
-
-
- // Aktivität — {aktivitaet.gesamt.toLocaleString('de-DE')} Nachrichten in 30 Tagen
-
-
- {aktivitaet.tage.map((t) => (
-
- ))}
+ {/* Verlauf und Modul-Verteilung stehen nebeneinander — beides sind
+ Übersichten, keine Formulare */}
+
+ {aktivitaet && aktivitaet.gesamt > 0 && (
+
+
+ Aktivität
+
+ {aktivitaet.gesamt.toLocaleString('de-DE')} Nachrichten / 30 Tage
+
+
+
+ {aktivitaet.tage.map((t) => (
+
+ ))}
+
-
- )}
+ )}
- {modules.length > 0 && moduleGroups.length > 0 && (
-
-
// Module nach Bereich
-
- {moduleGroups.map((g) => {
- const drin = modules.filter((m) => m.group === g.id);
- if (drin.length === 0) return null;
- const an = drin.filter((m) => m.enabled).length;
- const offen = drin.filter((m) => m.enabled && m.missing.length > 0).length;
- return (
-
setTab('module')}
- title={`${g.label} im Modul-Überblick öffnen`}
- >
- {g.label}
- 0 ? ' warn' : ''}`}>
-
-
- {an}/{drin.length}
-
- );
- })}
+ {modules.length > 0 && moduleGroups.length > 0 && (
+
+
+ Module
+ {activeModules.length}/{modules.length} an
+
+
+ {moduleGroups.map((g) => {
+ const drin = modules.filter((m) => m.group === g.id);
+ if (drin.length === 0) return null;
+ const an = drin.filter((m) => m.enabled).length;
+ const offen = drin.filter((m) => m.enabled && m.missing.length > 0).length;
+ return (
+ setTab('module')}
+ title={`${g.label} im Modul-Überblick öffnen`}
+ >
+ {g.label}
+ 0 ? ' warn' : ''}`}>
+
+
+ {an}/{drin.length}
+
+ );
+ })}
+
-
- )}
+ )}
+
{modules.length > 0 && (
-
// Noch einzurichten
+
Noch einzurichten
{unfinished.length === 0 ? (
Alles eingerichtet — jedes eingeschaltete Modul hat, was es braucht.
@@ -1567,7 +1582,7 @@ export default function Settings({ me }) {
const willkommensKarte = (
<>
-
// Willkommen
+
Willkommen
Willkommens-Kanal Begrüßungs-Embed für neue Member
-
// Willkommens-Karte
+
Willkommens-Karte
Das Bild, das neue Mitglieder im Willkommens-Kanal begrüßt. Die Vorschau
zeigt sofort, wie es aussieht — gespeichert wird erst mit dem Knopf unten.
@@ -1714,7 +1729,7 @@ export default function Settings({ me }) {
-
// Embeds
+
Embeds
Brand-Name erscheint in allen Embed-Footern („NAME // DEVLOG")
setForm({ ...form, brand_name: e.target.value })} />
@@ -1730,7 +1745,7 @@ export default function Settings({ me }) {
-
// Aus der Env verlagert
+
Aus der Env verlagert
Guild-ID für sofortige Slash-Commands; greift beim nächsten Neustart
setForm({ ...form, discord_guild_id: e.target.value })} />
@@ -1751,7 +1766,7 @@ export default function Settings({ me }) {
const tabFeeds = (
<>
-
// Kanäle
+
Kanäle
Devlog-Kanal öffentlich — hier postet der Bot die Devlogs
@@ -1765,7 +1780,7 @@ export default function Settings({ me }) {
-
// Twitch & YouTube
+
Twitch & YouTube
Social-Kanal 🔴 Twitch-Live + ▶️ neue YouTube-Videos
-
// Devlog
+
Devlog
Ping-Rolle wird bei jedem Devlog erwähnt; 🔔-Button am Post — leer = kein Ping
-
// Commit-Feed
+
Commit-Feed
setForm({ ...form, commit_feed_enabled: e.target.checked })} />
@@ -1870,7 +1885,7 @@ export default function Settings({ me }) {
const tabCommunity = (
<>
-
// Wünsche
+
Wünsche
Ein Wunsch ohne sichtbaren Ausgang ist ein Wunsch, den beim nächsten Mal
niemand mehr einreicht. Der Stand steht auf der Roadmap und im Discord-Post;
@@ -1966,7 +1981,7 @@ export default function Settings({ me }) {
)}
-
// Wunsch-Bereiche
+
Wunsch-Bereiche
Schubladen für Ideen — „Fahrzeuge", „Wirtschaft", „Technik". Ohne Bereiche
bleibt die Liste eine Liste; mit ihnen kann man auf der Roadmap filtern, und
@@ -2034,7 +2049,7 @@ export default function Settings({ me }) {
-
// Geburtstage
+
Geburtstage
Geburtstags-Kanal Member tragen sich mit /geburtstag ein; Gratulation morgens ab 09:00 — leer = aus
-
// Events
+
Events
Event-Ankündigungs-Kanal neue Discord-Events werden hier angekündigt + Events-Seite
-
// Starboard & Galerie
+
Starboard & Galerie
Starboard-Kanal Nachrichten mit genug ⭐ landen hier
@@ -2103,7 +2118,7 @@ export default function Settings({ me }) {
-
// Level-System
+
Level-System
setForm({ ...form, levels_enabled: e.target.checked })} />
@@ -2125,7 +2140,7 @@ export default function Settings({ me }) {
-
// Radio
+
Radio
{/* Der Schalter steht hier und nicht nur im Modul-Reiter:
wer die Sender pflegt, sucht ihn genau an dieser Stelle. */}
@@ -2224,7 +2239,7 @@ export default function Settings({ me }) {
const tabRollen = (
<>
-
// Rollen bei Join
+
Rollen bei Join
Auto-Rolle bekommt jeder neue Member automatisch — leer = aus
-
// Rollen-Menüs
+
Rollen-Menüs
Selbstbedienungs-Rollen wie bei Carl-bot — nur ohne Paywall. Der Bot postet
ein Embed mit Buttons; Klick = Rolle nehmen, nochmal = abgeben. Menüs sind
@@ -2468,7 +2483,7 @@ export default function Settings({ me }) {
const tabSupport = (
<>
-
// Ticket-Anliegen
+
Ticket-Anliegen
Ohne Anliegen hat der Ticket-Post einen Knopf und jedes Ticket sieht gleich aus.
Mit Anliegen wird daraus ein Auswahlmenü: der Titel steht im Thread-Namen,
@@ -2563,7 +2578,7 @@ export default function Settings({ me }) {
{automod && (
-
// AutoMod
+
AutoMod
Discords eigener Filter — er läuft serverseitig und ohne Umweg über den Bot.
Hier siehst du, was eingerichtet ist, und kannst Regeln schalten.
@@ -2618,7 +2633,7 @@ export default function Settings({ me }) {
)}
-
// Moderation & Kontakt
+
Moderation & Kontakt
Modmail-Kanal PRIVATER Staff-Kanal — DMs an den Bot landen hier als Threads
-
// Playtester
+
Playtester
Beworben wird sich über ein Formular, angenommen vom Team — wer angenommen
wird, landet hier mit Rolle. Schlüssel gehen per Direktnachricht raus; kommt
@@ -2729,7 +2744,7 @@ export default function Settings({ me }) {
-
// Schlüssel-Vorrat
+
Schlüssel-Vorrat
setKeyDialog(true)}>
Schlüssel nachlegen
@@ -2835,7 +2850,7 @@ export default function Settings({ me }) {
const tabBewerbungen = (
-
// Bewerbungs-Formulare
+
Bewerbungs-Formulare
Button-Post → Discord-Formular (bis 5 Fragen) → Review mit ✅/❌ im Staff-Kanal.
Annahme vergibt optional eine Rolle — z. B. für FiveM-Whitelist oder Team-Bewerbungen.
@@ -2937,7 +2952,7 @@ export default function Settings({ me }) {
-
// Geplante Posts
+
Geplante Posts
{scheduled.length > 0 && (
{scheduled.map((p) => (
@@ -2996,7 +3011,7 @@ export default function Settings({ me }) {
-
// Triggers
+
Triggers
Auto-Antworten: Enthält eine Nachricht das Keyword, antwortet der Bot (30s-Cooldown pro Kanal).
@@ -3022,7 +3037,7 @@ export default function Settings({ me }) {
-
// Tags (/tag)
+
Tags (/tag)
Text-Bausteine für wiederkehrende Antworten — jeder Member kann sie mit /tag name abrufen.
@@ -3052,7 +3067,7 @@ export default function Settings({ me }) {
const tabSystem = (
<>
-
// Allgemein
+
Allgemein
Öffentliche URL Basis für Buttons, RSS, OAuth-Redirect
setForm({ ...form, public_url: e.target.value })} />
@@ -3064,7 +3079,7 @@ export default function Settings({ me }) {
-
// Zwei Seiten
+
Zwei Seiten
Community-Hub und Bot-Produktseite auf getrennte Adressen legen. Solange
beide Felder leer sind, läuft alles unverändert auf der öffentlichen URL.
@@ -3095,7 +3110,7 @@ export default function Settings({ me }) {
-
// Dienste (Portal)
+
Dienste (Portal)
Erscheinen als Kacheln auf der Startseite — z. B. Gitea, Kanban oder die Cloud.
@@ -3135,7 +3150,7 @@ export default function Settings({ me }) {
-
// Impressum & Datenschutz
+
Impressum & Datenschutz
Erscheint auf /impressum und /datenschutz. Für § 5 DDG
ist eine ladungsfähige Anschrift nötig (kein Postfach) — nur der Owner sieht
@@ -3160,7 +3175,7 @@ export default function Settings({ me }) {
-
// Web-Login (Member)
+
Web-Login (Member)
setForm({ ...form, member_gate_enabled: e.target.checked })} />
@@ -3175,7 +3190,7 @@ export default function Settings({ me }) {
-
// Sprachkanäle
+
Sprachkanäle
Temp-Voice-Hub „Join to Create": Beitritt erzeugt eigenen Voice-Kanal (Bot braucht Kanäle verwalten + Member verschieben)
-
// Backups & Watchdog
+
Backups & Watchdog
setForm({ ...form, backup_enabled: e.target.checked })} />
@@ -3226,7 +3241,7 @@ export default function Settings({ me }) {
{watchdog?.adressen?.length > 0 && (
-
// Erreichbarkeit
+
Erreichbarkeit
Ein Strich je Stunde über die letzten 7 Tage — grün erreichbar, rot
Ausfall, grau keine Messung. Geprüft wird alle {watchdog.intervall} Minuten.
@@ -3294,7 +3309,7 @@ export default function Settings({ me }) {
{watchdog?.stoerungen?.length > 0 && (
-
// Störungen
+
Störungen
{watchdog.stoerungen.slice(0, 20).map((v) => (
@@ -3314,7 +3329,7 @@ export default function Settings({ me }) {
const tabApi = (
<>
-
// API-Keys (/api/v1)
+
API-Keys (/api/v1)
{keys.length > 0 && (
{keys.map((k) => (
@@ -3363,7 +3378,7 @@ export default function Settings({ me }) {
-
// Single Sign-On
+
Single Sign-On
Andere Dienste (Kanban, Platform …) können den Discord-Login mitnutzen: Sie
leiten auf /sso/authorize weiter und tauschen den Token per
@@ -3412,7 +3427,7 @@ export default function Settings({ me }) {
const tabServer = (
<>
-
// Game-Server
+
Game-Server
Jeder Server bekommt sein eigenes Live-Status-Embed im Status-Kanal (🟢/🔴,
Spieler-Balken, Map, Adresse) — aktualisiert alle 2 Minuten, DiscordGSM-Style.
@@ -3684,7 +3699,7 @@ export default function Settings({ me }) {
/>
) : (
-
// Module
+
Module
Jede Funktion des Bots lässt sich hier ein- und ausschalten. Ausgeschaltete
Module reagieren auf nichts mehr — keine Posts, keine Befehle, keine
@@ -3767,7 +3782,7 @@ export default function Settings({ me }) {
const tabTexte = (
-
// Texte
+
Texte
Alle Texte am Stück — wer nur die einer Funktion sucht, findet sie
auch auf deren Modul-Seite. Zeile anklicken zum Bearbeiten —
@@ -3875,7 +3890,7 @@ export default function Settings({ me }) {
const tabWerte = (
-
// Werte
+
Werte
Alle Werte am Stück; jeder steht zusätzlich auf der Seite seiner
Funktion. Zahlen, die das Verhalten steuern — wie viel XP eine Nachricht bringt,
@@ -3954,7 +3969,7 @@ export default function Settings({ me }) {
const tabSeiten = (
-
// Eigene Seiten
+
Eigene Seiten
Inhalte pflegen, ohne dass jemand Code anfassen muss — Regeln, Über uns,
Mitmachen, FAQ. Geschrieben wird in Markdown (wie im Devlog), rechts siehst
@@ -4130,7 +4145,7 @@ export default function Settings({ me }) {
const tabTeam = (
<>
-
// Team
+
Team
Team-Mitglieder loggen sich ganz normal mit Discord ein und sehen nur ihre
Bereiche. Brand, System, API-Keys und diese Verwaltung bleiben immer dir
@@ -4230,7 +4245,7 @@ export default function Settings({ me }) {
{audit.length > 0 && (
-
// Protokoll
+
Protokoll
Wer hat was im Webinterface geändert.
diff --git a/frontend/src/pages/Status.jsx b/frontend/src/pages/Status.jsx
index 9deac65..fc12353 100644
--- a/frontend/src/pages/Status.jsx
+++ b/frontend/src/pages/Status.jsx
@@ -49,8 +49,6 @@ export default function Status() {
return (
<>
- STATUS
-
{t('status.tag')}
{t('nav.status')}
diff --git a/frontend/src/pages/WunschDetail.jsx b/frontend/src/pages/WunschDetail.jsx
index 6ed04bb..8486113 100644
--- a/frontend/src/pages/WunschDetail.jsx
+++ b/frontend/src/pages/WunschDetail.jsx
@@ -55,8 +55,6 @@ export default function WunschDetail() {
return (
<>
- IDEE
-
{t('wunsch.tag')}
{w?.idea ?? '…'}
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 84a68bd..cf844ab 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,23 +1,28 @@
/* ═══════════════════════════════════════════════════
- D4RKST3R // DEVLOG — Styles (Design-System der Platform-Seite)
+ D4RKST3R — Styles (Graphit + Orange)
+ Ein Stylesheet für beide Auftritte: Bot-Produktseite und Community-Hub.
═══════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
- --neon: #f5c518;
- --neon2: #ff4d00;
- --bg: #0a0a0a;
- --bg2: #111;
- --bg3: #161616;
- --text: #e8e0d0;
- --muted: #8a8378;
- --muted2: #666;
- --border: rgba(245, 197, 24, 0.15);
- --success: #00ff88;
- --display: 'Bebas Neue', sans-serif;
- --body: 'Barlow Condensed', sans-serif;
- --mono: 'Share Tech Mono', monospace;
+ --bg: #131316; /* Seiten-Hintergrund */
+ --bg2: #1b1b20; /* Karten und Panels */
+ --bg3: #1f1f25; /* Hover-Fläche, erhöht */
+ --text: #ececee;
+ --text2: #c9c9cf;
+ --muted: #9a9aa3;
+ --muted2: #66666e;
+ --border: rgba(255, 255, 255, .08);
+ --accent: #ff9a1f; /* Orange, Einzelakzent (Ränder, Punkte) */
+ --accent-hi: #ffb340; /* helles Orange — Text, Symbole, Verlaufsanfang */
+ --accent-lo: #f07800; /* dunkles Orange — Verlaufsende */
+ --grad: linear-gradient(135deg, #ffb340, #f07800);
+ --success: #3ba55d;
+ --danger: #f23f43;
+ --display: 'Chakra Petch', sans-serif;
+ --body: 'Chakra Petch', sans-serif;
+ --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
html { scroll-behavior: smooth; color-scheme: dark; }
@@ -26,8 +31,8 @@ body {
background: var(--bg);
color: var(--text);
font-family: var(--body);
- font-size: 17px;
- line-height: 1.6;
+ font-size: 16px;
+ line-height: 1.55;
overflow-x: hidden;
min-height: 100vh;
}
@@ -35,209 +40,268 @@ body {
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
-/* Text-Auswahl & Fokus im Brand-Look */
-::selection { background: rgba(245, 197, 24, .25); color: var(--text); }
-:focus-visible { outline: 1px solid var(--neon); outline-offset: 2px; }
+::selection { background: rgba(255, 154, 31, .35); color: var(--bg); }
+:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
/* Dunkle Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
-::-webkit-scrollbar-thumb { background: #262626; border: 2px solid var(--bg); border-radius: 6px; }
-::-webkit-scrollbar-thumb:hover { background: var(--neon); }
+::-webkit-scrollbar-thumb { background: #2a2a31; border: 2px solid var(--bg); border-radius: 6px; }
+::-webkit-scrollbar-thumb:hover { background: var(--accent); }
-/* Einblend-Animation für Inhalte */
@keyframes riseIn {
- from { opacity: 0; transform: translateY(10px); }
+ from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
+@keyframes pulseGlow {
+ 0%, 100% { opacity: .5; }
+ 50% { opacity: 1; }
+}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
-/* ── NOISE + SCANLINES ─────────────────────────────── */
-body::before {
- content: ''; position: fixed; inset: 0;
- background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
- opacity: .03; pointer-events: none; z-index: 900;
-}
-body::after {
- content: ''; position: fixed; inset: 0;
- background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, .07) 2px, rgba(0, 0, 0, .07) 4px);
- pointer-events: none; z-index: 899;
-}
+/* ── ABGESCHRÄGTE ECKEN ────────────────────────────────
+ Kern des Looks: statt Rundungen wird oben links und unten rechts eine
+ Ecke gekappt. Die Tiefe steuert --bv, damit jede Komponente nur eine
+ Zahl setzt statt das ganze Polygon zu wiederholen.
-/* ── PARTICLES ─────────────────────────────────────── */
-.particles-wrap {
- position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
-}
-.particle {
- position: absolute; width: 2px; height: 2px;
- background: var(--neon); border-radius: 50%; opacity: 0;
- animation: floatUp var(--dur, 8s) var(--delay, 0s) infinite ease-in;
-}
-@keyframes floatUp {
- 0% { opacity: 0; transform: translateY(0) scale(1); }
- 10% { opacity: .6; }
- 80% { opacity: .2; }
- 100% { opacity: 0; transform: translateY(-100vh) scale(0); }
+ Achtung: clip-path schneidet auch Kinder ab. Behälter, aus denen etwas
+ herausragen darf (offene Auswahllisten in der Config), bekommen deshalb
+ bewusst keine Abschrägung. */
+.bevel,
+.card, .home-tile, .feature-card, .cmd-row, .mod-card, .srv-summary,
+.hero-panel, .hero-frame, .hero-stat, .page-tag, .btn, .btn-login,
+.home-tile-icon, .feature-icon, .mod-icon, .modpage-icon,
+.dash-panel, .dash-kpi, .status-pill, .empty-state,
+.settings-search, .search, .st-banner, .gate-banner, .profile-card {
+ clip-path: polygon(
+ var(--bv, 10px) 0,
+ 100% 0,
+ 100% calc(100% - var(--bv, 10px)),
+ calc(100% - var(--bv, 10px)) 100%,
+ 0 100%,
+ 0 var(--bv, 10px)
+ );
}
.app { min-height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 2; }
+/* Warmer Schein von oben rechts — ersetzt Raster, Rauschen und Hintergrundtext */
+.app::before {
+ content: '';
+ position: fixed; inset: 0; z-index: -1;
+ pointer-events: none;
+ background:
+ radial-gradient(900px 500px at 78% -10%, rgba(240, 120, 0, .14), transparent 60%),
+ radial-gradient(700px 420px at 5% 110%, rgba(255, 179, 64, .06), transparent 60%);
+}
+
+/* Verlaufs-Text für betonte Wörter in Überschriften */
+.grad-text {
+ background: var(--grad);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ filter: drop-shadow(0 0 22px rgba(240, 120, 0, .35));
+}
+/* Gegenstück: nur Kontur, keine Füllung */
+.outline-text {
+ color: transparent;
+ -webkit-text-stroke: 1.5px var(--muted);
+}
+
+/* ── KNÖPFE ────────────────────────────────────────────
+ Ghost ist die Grundform, .btn-save trägt den Marken-Verlauf.
+
+ Die Grundform steht bewusst hier oben, vor allen Abwandlungen: .btn und
+ .btn-save sind gleich spezifisch, es gewinnt also die spätere Regel. Stand
+ die Grundform weiter unten, überschrieb ihr `background: none` jeden
+ Verlauf — der Speichern-Knopf sah dann aus wie ein Ghost-Knopf.
+
+ Die Aura (box-shadow) aus dem Entwurf entfällt: clip-path schneidet den
+ Schatten des eigenen Elements mit weg, sie wäre nicht sichtbar. */
+.btn {
+ --bv: 10px;
+ display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
+ font-family: var(--mono);
+ font-size: .68rem; font-weight: 500;
+ letter-spacing: .15em; text-transform: uppercase;
+ color: var(--text2);
+ background: none;
+ border: 1px solid rgba(255, 255, 255, .18);
+ padding: .55rem 1.1rem;
+ transition: background .2s, border-color .2s, color .2s, filter .2s;
+}
+.btn:hover:not(:disabled) {
+ background: rgba(255, 255, 255, .06);
+ color: var(--accent-hi);
+}
+.btn:disabled { opacity: .25; cursor: default; }
+
+/* Chakra Petch löst Bebas Neue ab. Die alte Schrift war schmal, versal und
+ wirkte schon im Grundgewicht fett — die Überschriften, die sie benutzt
+ haben, brauchen jetzt ein Gewicht, sonst lesen sie sich wie Fließtext. */
+.milestone-title, .release-name, .stat-value, .modpage-name, .mod-name,
+.tpl-name, .empty-title, .srv-name, .srv-count, .profile-name,
+.lvl-avatar-empty, .bot-avatar-empty {
+ font-weight: 700;
+}
+
+
+
/* ── NAV ───────────────────────────────────────────── */
+/* Immer kompakt — der frühere „scrolled"-Zustand entfällt, die Leiste
+ wechselt beim Scrollen also nicht mehr die Höhe. */
.nav {
position: sticky; top: 0; z-index: 200;
- display: flex; align-items: center; gap: 2.5rem;
- padding: 1.25rem 2.5rem;
- background: linear-gradient(to bottom, rgba(10, 10, 10, .98), rgba(10, 10, 10, .75));
- border-bottom: 1px solid transparent;
- transition: padding .3s, border-color .3s, background .3s, backdrop-filter .3s;
+ display: flex; align-items: center; gap: 2rem;
+ padding: .85rem 2.5rem;
+ background: rgba(19, 19, 22, .88);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ border-bottom: 1px solid var(--border);
}
-.nav.scrolled {
- padding: .8rem 2.5rem;
- background: rgba(10, 10, 10, .82);
- backdrop-filter: blur(14px) saturate(1.2);
- -webkit-backdrop-filter: blur(14px) saturate(1.2);
- border-bottom-color: var(--border);
-}
-/* Neon-Glanzlinie unter der Navbar, wird beim Scrollen sichtbar */
-.nav::after {
- content: '';
- position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
- background: linear-gradient(90deg, transparent, rgba(245, 197, 24, .5) 30%, rgba(255, 77, 0, .5) 70%, transparent);
- opacity: 0; transition: opacity .3s;
- pointer-events: none;
-}
-.nav.scrolled::after { opacity: 1; }
+/* Kein gap: die Wortmarke ist „D4RKST" +
3R , und als Flex-Lücke
+ risse der Abstand mitten durch den Namen. Der Abstand zur Marke hängt
+ deshalb am Bild. */
.nav-logo {
+ display: inline-flex; align-items: center;
font-family: var(--display);
- font-size: 1.6rem; letter-spacing: .15em; color: var(--neon);
+ font-weight: 700; font-size: 1.12rem; letter-spacing: .06em;
+ color: var(--text);
line-height: 1;
- transition: text-shadow .25s;
+ transition: color .2s;
}
-.nav-logo:hover { text-shadow: 0 0 18px rgba(245, 197, 24, .55); }
-.nav-logo span { color: var(--neon2); }
+.nav-logo span { color: var(--accent); }
+.nav-mark { width: 34px; height: 34px; object-fit: contain; flex: none; margin-right: .65rem; }
-.nav-links { display: flex; gap: 1.6rem; flex: 1; align-items: center; }
+.nav-links { display: flex; gap: 1.8rem; flex: 1; align-items: center; }
.nav-links a {
- position: relative;
font-family: var(--mono);
- font-size: .7rem; letter-spacing: .25em; text-transform: uppercase;
- color: var(--muted); padding: .3rem 0;
- transition: color .2s, text-shadow .2s;
+ font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
+ color: var(--muted);
+ border-bottom: 2px solid transparent;
+ padding-bottom: .2rem;
+ transition: color .2s, border-color .2s;
}
-/* Animierter Gradient-Unterstrich: wächst von links */
-.nav-links a::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;
-}
-.nav-links a:hover { color: var(--text); }
-.nav-links a:hover::after { transform: scaleX(.55); }
-.nav-links a.active {
- color: var(--neon);
- text-shadow: 0 0 12px rgba(245, 197, 24, .35);
-}
-.nav-links a.active::after { transform: scaleX(1); }
+.nav-links a:hover { color: var(--accent-hi); }
+.nav-links a.active { color: var(--accent-hi); border-bottom-color: var(--accent); }
/* ── AUTH ──────────────────────────────────────────── */
.auth { display: flex; align-items: center; }
.btn-login {
- display: inline-flex; align-items: center; gap: .55rem;
- font-family: var(--mono); font-size: .7rem;
- letter-spacing: .25em; text-transform: uppercase;
- color: var(--neon);
- border: 1px solid var(--border);
- border-radius: 999px;
- padding: .5rem 1.2rem;
- transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
+ --bv: 8px;
+ display: inline-flex; align-items: center; gap: .5rem;
+ 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;
+ transition: filter .2s;
}
-.btn-login:hover {
- border-color: var(--neon);
- background: rgba(245, 197, 24, .08);
- box-shadow: 0 0 16px rgba(245, 197, 24, .15);
-}
-.discord-mark { width: 15px; height: 15px; }
+.btn-login:hover { color: var(--bg); filter: brightness(1.1); }
+.discord-mark { width: 14px; height: 14px; }
+/* Der Nutzer-Chip bleibt rund — er ist ein Personen-Schild, kein Panel */
.user-chip {
display: flex; align-items: center; gap: .6rem;
- border: 1px solid rgba(255, 255, 255, .1);
+ border: 1px solid rgba(255, 255, 255, .12);
border-radius: 999px;
- padding: .3rem .9rem .3rem .35rem;
- background: rgba(255, 255, 255, .03);
+ padding: .3rem .8rem .3rem .35rem;
+ background: rgba(255, 255, 255, .04);
transition: border-color .2s;
}
-.user-chip:hover { border-color: var(--border); }
-.avatar { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(245, 197, 24, .4); }
-.username { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: var(--muted); }
+.user-chip:hover { border-color: rgba(255, 154, 31, .45); }
+.avatar { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255, 154, 31, .4); }
+.username { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--muted); }
.logout { color: var(--muted2); font-size: .75rem; padding: 0 .1rem; transition: color .2s; }
-.logout:hover { color: var(--neon2); }
+.logout:hover { color: var(--accent-hi); }
-/* ── PAGE HEADER ───────────────────────────────────── */
+/* ── SEITENKOPF ────────────────────────────────────── */
+/* Kompakt statt bildschirmfüllend: Schild, Überschrift, ein Satz. */
.page-header {
- position: relative; overflow: hidden;
- padding: 5.5rem 2.5rem 3.5rem;
- border-bottom: 1px solid var(--border);
- display: flex; align-items: flex-end;
- min-height: 280px;
-}
-.page-bg-text {
- position: absolute;
- right: -1rem; top: 50%; transform: translateY(-50%);
- font-family: var(--display);
- font-size: 14rem; color: rgba(245, 197, 24, .04);
- pointer-events: none; user-select: none; white-space: nowrap;
- line-height: 1;
-}
-.page-header-grid {
- position: absolute; inset: 0;
- background-image:
- linear-gradient(var(--border) 1px, transparent 1px),
- linear-gradient(90deg, var(--border) 1px, transparent 1px);
- background-size: 60px 60px;
- mask-image: radial-gradient(ellipse 80% 80% at 30% 50%, black 20%, transparent 70%);
- -webkit-mask-image: radial-gradient(ellipse 80% 80% at 30% 50%, black 20%, transparent 70%);
- opacity: .5;
-}
-.page-header-content {
- position: relative; z-index: 2;
- max-width: 860px; width: 100%;
+ max-width: 1160px; width: 100%;
margin: 0 auto;
+ padding: 4.5rem 2.5rem 2.5rem;
animation: riseIn .45s ease both;
}
+.page-header-content { position: relative; }
+
.page-tag {
+ --bv: 6px;
+ display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--mono);
- font-size: .7rem; letter-spacing: .3em;
- color: var(--neon2); text-transform: uppercase;
- margin-bottom: .9rem;
+ font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
+ color: var(--accent-hi);
+ border: 1px solid rgba(255, 154, 31, .4);
+ padding: .35rem .8rem;
}
+/* Punkt für Schilder, die einen Zustand melden („läuft gerade") */
+.page-tag.dot::before {
+ content: '';
+ width: 6px; height: 6px; border-radius: 50%;
+ background: var(--accent-hi);
+ animation: pulseGlow 2s infinite;
+}
+
.page-title {
font-family: var(--display);
- font-size: clamp(3rem, 7vw, 5.5rem);
- line-height: .95; letter-spacing: .02em;
+ font-size: clamp(2.4rem, 6vw, 3.6rem);
+ font-weight: 700; line-height: 1.02;
+ text-transform: uppercase;
color: var(--text);
- margin-bottom: .75rem;
+ margin: 1.1rem 0 .8rem;
}
.page-subtitle {
- font-size: 1.1rem; font-weight: 300;
- color: var(--muted); max-width: 600px; line-height: 1.6;
+ font-size: 1.05rem;
+ color: var(--muted);
+ max-width: 560px;
+ line-height: 1.65;
}
+/* Der Panel-Kopf läuft auf der Breite der Arbeitsfläche, nicht der Lesespalte */
+.page-header.wide { max-width: 1440px; padding: 2.5rem 2rem 1.5rem; }
+.dash-title-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
+.dash-title { font-size: 2.1rem; letter-spacing: .02em; margin: 0; }
+.dash-meta {
+ font-family: var(--mono); font-size: .66rem;
+ letter-spacing: .14em; text-transform: uppercase; color: var(--muted2);
+}
+.dash-title-row .status-pill { margin-left: auto; }
+
+/* Fußnote unter einem Abschnitt — leiser als .notice */
+.footnote {
+ margin-top: 2.5rem;
+ font-family: var(--mono); font-size: .74rem;
+ color: var(--muted2);
+}
+.footnote a { color: var(--muted); text-decoration: underline; }
+.footnote a:hover { color: var(--accent-hi); }
+
/* ── CONTENT ───────────────────────────────────────── */
.main { flex: 1; }
+/* Die Kachel-Raster des neuen Entwurfs brauchen drei Spalten — deshalb 1160
+ statt der früheren 860 px. Fließtext bekommt seine Lesebreite dort zurück,
+ wo er steht (.timeline, .legal-text), sonst würden Zeilen zu lang. */
.content {
- max-width: 860px; width: 100%;
+ max-width: 1160px; width: 100%;
margin: 0 auto;
- padding: 2.75rem 2.5rem 5rem;
+ padding: 1rem 2.5rem 5rem;
animation: riseIn .45s ease .08s both;
}
+/* Seiten ohne Seitenkopf beginnen nicht direkt unter der Navigation */
+.content:first-child { padding-top: 3rem; }
.notice { color: var(--muted); padding: 1.5rem 0; font-size: 1.05rem; }
-.notice.center { text-align: center; padding: 3.5rem 0; }
-.notice.center p { margin-bottom: 1.25rem; }
+/* Spalte statt Textfluss: der Hinweis trägt oft einen Knopf, und der klebte
+ als inline-flex sonst hinter dem Satz statt darunter zu stehen. */
+.notice.center {
+ display: flex; flex-direction: column; align-items: center;
+ gap: 1.25rem; text-align: center; padding: 3.5rem 0;
+}
+.notice.center p { margin: 0; }
/* ── SUCHE ─────────────────────────────────────────── */
.search {
@@ -248,7 +312,7 @@ body::after {
margin-bottom: 1.75rem;
transition: border-color .2s;
}
-.search:focus-within { border-color: var(--neon); }
+.search:focus-within { border-color: var(--accent-hi); }
.search-icon { color: var(--muted2); font-size: 1.1rem; }
.search input {
flex: 1;
@@ -260,59 +324,50 @@ body::after {
.search-count {
font-family: var(--mono);
font-size: .65rem; letter-spacing: .15em;
- color: var(--neon); white-space: nowrap;
+ color: var(--accent-hi); white-space: nowrap;
}
/* ── DEVLOG-TIMELINE ───────────────────────────────── */
+/* Lesebreite: die Karten tragen Fließtext, das Raster darum ist breiter */
.timeline {
display: flex; flex-direction: column; gap: 1.5rem;
position: relative; padding-left: 1.6rem;
+ max-width: 880px;
}
.month-sep {
font-family: var(--mono);
font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
- color: var(--neon2);
+ color: var(--accent-lo);
margin: .5rem 0 1.25rem;
display: flex; align-items: center; gap: 1rem;
}
.month-sep::after {
content: ''; flex: 1; height: 1px;
- background: linear-gradient(to right, rgba(255, 77, 0, .35), transparent);
+ background: linear-gradient(to right, rgba(240, 120, 0, .35), transparent);
}
.timeline > div:first-child .month-sep { margin-top: 0; }
.timeline::before {
content: '';
position: absolute; left: 3px; top: 10px; bottom: 10px;
width: 1px;
- background: linear-gradient(to bottom, var(--neon), rgba(245, 197, 24, .05));
+ background: linear-gradient(to bottom, var(--accent-hi), rgba(255, 154, 31, .05));
}
+/* Grundform aller Panels: Graphit, feiner Rand, gekappte Ecken.
+ Der Punkt auf der Timeline ist entfallen — er saß außerhalb der Karte und
+ würde von der Abschrägung weggeschnitten; die Linie trägt den Verlauf. */
.card {
+ --bv: 12px;
position: relative;
background: var(--bg2);
- border: 1px solid rgba(255, 255, 255, .06);
- border-radius: 12px;
+ border: 1px solid var(--border);
padding: 1.3rem 1.6rem 1.2rem;
- transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
+ transition: border-color .2s, background .2s, transform .2s;
}
.card:hover {
- border-color: var(--border);
+ border-color: rgba(255, 154, 31, .5);
background: var(--bg3);
- transform: translateY(-2px);
- box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(245, 197, 24, .06);
-}
-.timeline .card::before {
- /* Marker auf der Timeline */
- content: '';
- position: absolute; left: -1.72rem; top: 1.55rem;
- width: 7px; height: 7px;
- background: var(--neon);
- box-shadow: 0 0 10px rgba(245, 197, 24, .6);
- transition: box-shadow .25s, transform .25s;
-}
-.timeline .card:hover::before {
- box-shadow: 0 0 16px rgba(245, 197, 24, .9);
- transform: scale(1.25);
+ transform: translateY(-3px);
}
.card-meta {
@@ -322,7 +377,7 @@ body::after {
.card-date {
font-family: var(--mono);
font-size: .75rem; letter-spacing: .2em;
- color: var(--neon); text-transform: uppercase;
+ color: var(--accent-hi); text-transform: uppercase;
}
.card-rel {
font-family: var(--mono);
@@ -333,8 +388,8 @@ body::after {
.card-project {
font-family: var(--mono);
font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
- color: var(--neon2);
- border: 1px solid rgba(255, 77, 0, .3);
+ color: var(--accent-lo);
+ border: 1px solid rgba(240, 120, 0, .3);
padding: .1rem .5rem;
white-space: nowrap;
}
@@ -346,20 +401,20 @@ body::after {
padding: .05rem .4rem;
transition: color .2s, border-color .2s;
}
-.card-delete:hover { color: var(--neon2); border-color: rgba(255, 77, 0, .4); }
+.card-delete:hover { color: var(--accent-lo); border-color: rgba(240, 120, 0, .4); }
-.card-body { color: var(--text); font-weight: 300; font-size: 1.08rem; }
+.card-body { color: var(--text); font-weight: 400; font-size: 1.08rem; }
.card-body p { margin: .55rem 0; }
.card-body p:first-child { margin-top: 0; }
.card-body p:last-child { margin-bottom: 0; }
-.card-body strong { color: var(--neon); font-weight: 600; }
+.card-body strong { color: var(--accent-hi); font-weight: 600; }
.card-body em { color: var(--muted); }
.card-body a {
- color: var(--neon);
+ color: var(--accent-hi);
border-bottom: 1px solid var(--border);
transition: border-color .2s;
}
-.card-body a:hover { border-bottom-color: var(--neon); }
+.card-body a:hover { border-bottom-color: var(--accent-hi); }
.card-body code {
font-family: var(--mono);
font-size: .82em;
@@ -382,7 +437,7 @@ body::after {
content: '▪';
position: absolute;
left: -1.1rem;
- color: var(--neon);
+ color: var(--accent-hi);
font-size: .8em;
top: .15em;
}
@@ -397,7 +452,7 @@ body::after {
font-size: .78rem;
letter-spacing: .2em;
text-transform: uppercase;
- color: var(--neon);
+ color: var(--accent-hi);
margin: 1rem 0 .4rem;
}
.card-body .md-h2, .card-body .md-h3 { color: var(--muted); }
@@ -417,7 +472,7 @@ body::after {
aspect-ratio: 16 / 9;
transition: border-color .2s;
}
-.card-images a:hover { border-color: var(--neon); }
+.card-images a:hover { border-color: var(--accent-hi); }
.card-images img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .3s;
@@ -436,7 +491,7 @@ body::after {
}
.card-footer p { margin: 0; }
.card-footer a { color: var(--muted); border-bottom: 1px solid transparent; }
-.card-footer a:hover { color: var(--neon); }
+.card-footer a:hover { color: var(--accent-hi); }
/* ── HEATMAP + WÜNSCHE (Roadmap) ───────────────────── */
.hm-wrap {
@@ -445,28 +500,28 @@ body::after {
padding: .5rem 0;
}
.hm-week { display: flex; flex-direction: column; gap: 3px; }
-.hm-cell { width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0; }
+.hm-cell { width: 11px; height: 11px; border-radius: 0; flex-shrink: 0; }
.hm-0 { background: rgba(255, 255, 255, .05); }
-.hm-1 { background: rgba(245, 197, 24, .25); }
-.hm-2 { background: rgba(245, 197, 24, .5); }
-.hm-3 { background: rgba(245, 197, 24, .75); }
-.hm-4 { background: var(--neon); box-shadow: 0 0 4px rgba(245, 197, 24, .4); }
+.hm-1 { background: rgba(255, 154, 31, .25); }
+.hm-2 { background: rgba(255, 154, 31, .5); }
+.hm-3 { background: rgba(255, 154, 31, .75); }
+.hm-4 { background: var(--accent-hi); box-shadow: 0 0 4px rgba(255, 154, 31, .4); }
.wish-row {
display: flex; align-items: baseline; gap: 1rem;
padding: .6rem 1rem;
background: var(--bg2);
border: 1px solid rgba(255, 255, 255, .06);
- border-radius: 10px;
+ border-radius: 0;
margin-bottom: .5rem;
transition: border-color .2s, background .2s;
}
.wish-row:hover { border-color: var(--border); background: var(--bg3); }
.wish-score {
font-family: var(--mono); font-size: .78rem;
- color: var(--neon); white-space: nowrap; min-width: 3.5rem;
+ color: var(--accent-hi); white-space: nowrap; min-width: 3.5rem;
}
-.wish-idea { flex: 1; font-weight: 300; min-width: 0; }
+.wish-idea { flex: 1; font-weight: 400; min-width: 0; }
.wish-author { font-family: var(--mono); font-size: .62rem; color: var(--muted2); white-space: nowrap; }
/* Begründung des Teams unter der Idee — der Teil, der einen abgelehnten
@@ -481,8 +536,8 @@ body::after {
text-transform: uppercase; white-space: nowrap;
padding: .18rem .5rem; border-radius: 999px; border: 1px solid;
}
-.wish-status.geplant { color: var(--neon); border-color: color-mix(in srgb, var(--neon) 45%, transparent); }
-.wish-status.in_arbeit { color: var(--neon2, var(--neon)); border-color: color-mix(in srgb, var(--neon2, var(--neon)) 45%, transparent); }
+.wish-status.geplant { color: var(--accent-hi); border-color: color-mix(in srgb, var(--accent-hi) 45%, transparent); }
+.wish-status.in_arbeit { color: var(--accent-lo, var(--accent-hi)); border-color: color-mix(in srgb, var(--accent-lo, var(--accent-hi)) 45%, transparent); }
.wish-status.umgesetzt { color: #3ba55d; border-color: rgba(59, 165, 93, .45); }
.wish-status.abgelehnt { color: var(--muted2); border-color: var(--border); }
/* Erledigtes tritt zurück, ohne zu verschwinden */
@@ -502,7 +557,7 @@ body::after {
font-family: var(--mono); font-size: .68rem; color: var(--muted2);
text-decoration: none; white-space: nowrap;
}
-.wish-komm:hover { color: var(--neon); }
+.wish-komm:hover { color: var(--accent-hi); }
.wish-bar { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }
.wish-filter-label {
@@ -520,7 +575,7 @@ body::after {
transition: border-color .15s, color .15s;
}
.wish-chip:hover { color: var(--text); }
-.wish-chip.aktiv { border-color: var(--neon); color: var(--neon); }
+.wish-chip.aktiv { border-color: var(--accent-hi); color: var(--accent-hi); }
.wish-chip-n { opacity: .6; }
/* Treffer beim Tippen: lieber mitstimmen als denselben Wunsch nochmal stellen */
@@ -528,11 +583,11 @@ body::after {
.wish-hits-label { font-family: var(--mono); font-size: .62rem; color: var(--muted2); }
.wish-hit {
display: flex; align-items: center; gap: .45rem; text-align: left;
- background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
+ background: var(--bg3); border: 1px solid var(--border); border-radius: 0;
color: var(--muted); font: inherit; font-size: .84rem;
padding: .4rem .7rem; cursor: pointer;
}
-.wish-hit:hover { border-color: var(--neon); color: var(--neon); }
+.wish-hit:hover { border-color: var(--accent-hi); color: var(--accent-hi); }
/* ── GALERIE ───────────────────────────────────────── */
.gallery-grid {
@@ -543,7 +598,7 @@ body::after {
.shot {
position: relative; display: block; overflow: hidden;
border: 1px solid rgba(255, 255, 255, .08);
- border-radius: 10px;
+ border-radius: 0;
aspect-ratio: 16 / 9;
background: #000;
transition: border-color .25s, transform .25s, box-shadow .25s;
@@ -556,9 +611,9 @@ body::after {
.shot:nth-child(5) { animation-delay: .2s; }
.shot:nth-child(6) { animation-delay: .25s; }
.shot:hover {
- border-color: var(--neon);
+ border-color: var(--accent-hi);
transform: translateY(-3px);
- box-shadow: 0 12px 28px rgba(0, 0, 0, .5), 0 0 18px rgba(245, 197, 24, .12);
+ box-shadow: 0 12px 28px rgba(0, 0, 0, .5), 0 0 18px rgba(255, 154, 31, .12);
}
.shot img {
width: 100%; height: 100%; object-fit: cover; display: block;
@@ -578,7 +633,7 @@ body::after {
transition: opacity .25s;
}
.shot:hover .shot-meta { opacity: 1; }
-.shot-author { color: var(--neon); }
+.shot-author { color: var(--accent-hi); }
.shot-date { color: var(--muted); }
/* ── ROADMAP ───────────────────────────────────────── */
@@ -586,9 +641,9 @@ body::after {
.roadmap-group .settings-title { margin-bottom: 1rem; }
.milestone {
margin-bottom: 1.1rem;
- border-left: 3px solid rgba(245, 197, 24, .25);
+ border-left: 3px solid rgba(255, 154, 31, .25);
}
-.milestone:hover { border-left-color: var(--neon); }
+.milestone:hover { border-left-color: var(--accent-hi); }
.milestone-title {
font-family: var(--display);
font-size: 1.35rem; letter-spacing: .04em;
@@ -604,8 +659,8 @@ body::after {
.progress-bar {
position: relative;
height: 100%; border-radius: 999px;
- background: linear-gradient(90deg, var(--neon2), var(--neon));
- box-shadow: 0 0 12px rgba(245, 197, 24, .45);
+ background: linear-gradient(90deg, var(--accent-lo), var(--accent-hi));
+ box-shadow: 0 0 12px rgba(255, 154, 31, .45);
transition: width .6s ease;
overflow: hidden;
}
@@ -628,16 +683,16 @@ body::after {
color: var(--muted2);
margin-top: .45rem;
}
-.progress-info span:first-child { color: var(--neon); }
+.progress-info span:first-child { color: var(--accent-hi); }
/* ── CHANGELOG ─────────────────────────────────────── */
.release-card { margin-bottom: 1.5rem; }
.release-tag {
font-family: var(--mono);
font-size: .85rem; letter-spacing: .1em;
- color: var(--neon);
+ color: var(--accent-hi);
border: 1px solid var(--border);
- background: rgba(245, 197, 24, .06);
+ background: rgba(255, 154, 31, .06);
padding: .12rem .6rem;
}
.release-name {
@@ -661,18 +716,18 @@ body::after {
.sha {
font-family: var(--mono);
font-size: .72rem; letter-spacing: .05em;
- color: var(--neon);
+ color: var(--accent-hi);
border: 1px solid var(--border);
padding: .12rem .5rem;
white-space: nowrap;
transition: border-color .2s, background .2s;
}
-a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
+a.sha:hover { border-color: var(--accent-hi); background: rgba(255, 154, 31, .07); }
.commit-msg {
flex: 1;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
- font-weight: 300; font-size: 1.02rem;
+ font-weight: 400; font-size: 1.02rem;
}
.chip {
@@ -681,7 +736,7 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
padding: .14rem .55rem; white-space: nowrap;
}
.chip-repo { color: var(--muted); border: 1px solid rgba(255, 255, 255, .1); }
-.chip-branch { color: var(--neon2); border: 1px solid rgba(255, 77, 0, .3); }
+.chip-branch { color: var(--accent-lo); border: 1px solid rgba(240, 120, 0, .3); }
.commit-time {
font-family: var(--mono);
@@ -701,10 +756,10 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
.settings-nav {
display: flex;
flex-direction: column;
- gap: .25rem;
+ gap: .2rem;
position: sticky;
top: 5rem;
- width: 12.5rem;
+ width: 13rem;
flex-shrink: 0;
/* Bei 15 Bereichen wird die Leiste höher als der Bildschirm — dann scrollt sie selbst */
max-height: calc(100vh - 6.5rem);
@@ -716,13 +771,14 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
/* Suche über den Bereichen */
.settings-search {
+ --bv: 7px;
display: flex; align-items: center; gap: .5rem;
- background: var(--bg2); border: 1px solid var(--border);
- border-radius: 9px; padding: .45rem .6rem;
- margin-bottom: .5rem; color: var(--muted2);
+ background: var(--bg2); border: 1px solid rgba(255, 255, 255, .1);
+ padding: .5rem .7rem;
+ margin-bottom: .6rem; color: var(--muted2);
transition: border-color .15s;
}
-.settings-search:focus-within { border-color: var(--neon); }
+.settings-search:focus-within { border-color: var(--accent); }
.settings-search input {
flex: 1; min-width: 0;
background: none; border: 0; outline: none; padding: 0;
@@ -734,41 +790,41 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
background: none; border: 0; padding: 0; display: inline-flex;
color: var(--muted2); cursor: pointer;
}
-.settings-search-clear:hover { color: var(--neon); }
+.settings-search-clear:hover { color: var(--accent-hi); }
/* Bereichs-Gruppen */
.settings-nav-group { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .7rem; }
.settings-nav-label {
font-family: var(--mono);
- font-size: .55rem; letter-spacing: .22em; text-transform: uppercase;
+ font-size: .56rem; letter-spacing: .22em; text-transform: uppercase;
color: var(--muted2);
- padding: .3rem .9rem .25rem;
+ padding: .25rem .8rem;
}
/* Treffer der Einstellungs-Suche */
.settings-hit {
display: flex; flex-direction: column; gap: .1rem;
width: 100%; text-align: left;
background: none; border: 0; border-left: 2px solid transparent;
- border-radius: 9px;
+ border-radius: 0;
padding: .4rem .9rem;
cursor: pointer;
transition: background .15s, border-color .15s;
}
-.settings-hit:hover { background: rgba(255, 255, 255, .04); border-left-color: var(--neon); }
+.settings-hit:hover { background: rgba(255, 255, 255, .04); border-left-color: var(--accent-hi); }
.settings-hit-label { color: var(--text); font-size: .88rem; line-height: 1.3; }
.settings-hit-tab {
font-family: var(--mono); font-size: .55rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--muted2);
}
-.settings-hit:hover .settings-hit-tab { color: var(--neon); }
+.settings-hit:hover .settings-hit-tab { color: var(--accent-hi); }
/* Angesprungenes Feld kurz hervorheben, damit man es im Formular findet */
.field-found {
animation: fieldFound 2.2s ease both;
- border-radius: 8px;
+ border-radius: 0;
}
@keyframes fieldFound {
- 0%, 55% { box-shadow: 0 0 0 2px var(--neon), 0 0 18px rgba(245, 197, 24, .25); }
+ 0%, 55% { box-shadow: 0 0 0 2px var(--accent-hi), 0 0 18px rgba(255, 154, 31, .25); }
100% { box-shadow: 0 0 0 2px transparent, 0 0 0 transparent; }
}
@@ -782,13 +838,13 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
.todo-missing {
font-family: var(--mono); font-size: .62rem;
letter-spacing: .1em; text-transform: uppercase;
- color: var(--neon2); flex: 1;
+ color: var(--accent-lo); flex: 1;
}
.todo-done { color: var(--success); }
/* Hebt sich vom „Einrichten"-Knopf daneben ab: der eine tut etwas, der andere
führt nur hin */
-.btn-create { color: var(--neon); border-color: rgba(245, 197, 24, .45); }
-.btn-create:hover:not(:disabled) { background: rgba(245, 197, 24, .1); }
+.btn-create { color: var(--accent-hi); border-color: rgba(255, 154, 31, .45); }
+.btn-create:hover:not(:disabled) { background: rgba(255, 154, 31, .1); }
.btn-create:disabled { opacity: .4; cursor: default; }
/* Stern: heftet eine Funktion in die Seitenleiste. Ungeheftet nur angedeutet,
@@ -800,8 +856,8 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
transition: color .15s, opacity .15s;
}
.mod-card:hover .mod-fav, .modpage-head .mod-fav { opacity: .75; }
-.mod-fav:hover { color: var(--neon); opacity: 1; }
-.mod-fav.on { color: var(--neon); opacity: 1; }
+.mod-fav:hover { color: var(--accent-hi); opacity: 1; }
+.mod-fav.on { color: var(--accent-hi); opacity: 1; }
.mod-fav.on svg { fill: currentColor; }
/* ── MODUL-SEITE ───────────────────────────────────── */
@@ -811,7 +867,7 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
flex: 1; min-width: 0; text-align: left;
background: none; border: 0; padding: 0; cursor: pointer;
}
-.mod-open:hover .mod-name { color: var(--neon); }
+.mod-open:hover .mod-name { color: var(--accent-hi); }
.modpage-back {
background: none; border: 0; padding: 0; margin-bottom: 1.2rem;
@@ -820,7 +876,7 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
color: var(--muted2); cursor: pointer;
transition: color .15s;
}
-.modpage-back:hover { color: var(--neon); }
+.modpage-back:hover { color: var(--accent-hi); }
.modpage-head {
display: flex; align-items: flex-start; gap: 1rem;
@@ -828,17 +884,18 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
border-bottom: 1px solid var(--border);
}
.modpage-icon {
+ --bv: 9px;
flex: none; display: inline-flex; align-items: center; justify-content: center;
- width: 3rem; height: 3rem; border-radius: 11px;
- background: var(--bg3); border: 1px solid rgba(245, 197, 24, .3);
- color: var(--neon);
+ width: 3rem; height: 3rem;
+ background: var(--bg3); border: 1px solid rgba(255, 154, 31, .3);
+ color: var(--accent-hi);
}
.modpage-titles { flex: 1; min-width: 0; }
.modpage-name {
font-family: var(--display); font-size: 1.7rem;
letter-spacing: .04em; color: var(--text); margin: 0 0 .2rem;
}
-.modpage-desc { color: var(--muted); font-weight: 300; line-height: 1.5; margin: 0; }
+.modpage-desc { color: var(--muted); font-weight: 400; line-height: 1.5; margin: 0; }
/* Abschnitte innerhalb der Seite — flacher als die großen Bereichs-Karten */
.modpage-block { margin-bottom: 1.8rem; }
@@ -855,16 +912,16 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
/* Grundgerüst-Assistent: Vorschau und Ergebnis */
.setup-plan {
- border: 1px solid var(--border); border-radius: 12px;
+ border: 1px solid var(--border); border-radius: 0;
background: rgba(255, 255, 255, .015);
padding: 1.1rem 1.2rem; margin-bottom: 1.2rem;
animation: riseIn .25s ease both;
}
-.setup-plan-intro { color: var(--muted); font-weight: 300; line-height: 1.6; margin: 0 0 .9rem; }
-.setup-plan-intro strong { color: var(--neon); font-weight: 600; }
+.setup-plan-intro { color: var(--muted); font-weight: 400; line-height: 1.6; margin: 0 0 .9rem; }
+.setup-plan-intro strong { color: var(--accent-hi); font-weight: 600; }
.setup-plan-list {
display: flex; flex-direction: column;
- border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px;
+ border: 1px solid rgba(255, 255, 255, .06); border-radius: 0;
margin-bottom: 1rem; max-height: 22rem; overflow-y: auto;
}
.setup-step {
@@ -874,7 +931,7 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
}
.setup-step:last-child { border-bottom: 0; }
.setup-step-name {
- font-family: var(--mono); font-size: .82rem; color: var(--neon);
+ font-family: var(--mono); font-size: .82rem; color: var(--accent-hi);
min-width: 11rem;
}
/* Was es schon gibt, tritt zurück — es passiert ja nichts Neues */
@@ -886,24 +943,24 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
flex: 1;
}
.setup-step.fehler .setup-step-note { color: #f23f43; text-transform: none; letter-spacing: .02em; }
-.setup-step-for { color: var(--muted2); font-size: .82rem; font-weight: 300; }
+.setup-step-for { color: var(--muted2); font-size: .82rem; font-weight: 400; }
.settings-nav-item {
- display: flex; align-items: center; gap: .7rem;
+ display: flex; align-items: center; gap: .6rem;
font-family: var(--mono);
- font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
+ font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--muted);
background: none;
border: 1px solid transparent;
border-left: 2px solid transparent;
- padding: .55rem .9rem;
+ padding: .5rem .8rem;
text-align: left;
transition: color .15s, background .15s, border-color .15s;
}
-.settings-nav-item:hover { color: var(--text); background: rgba(255, 255, 255, .03); }
+.settings-nav-item:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.settings-nav-item.active {
- color: var(--neon);
- background: rgba(245, 197, 24, .06);
- border-left-color: var(--neon);
+ color: var(--accent-hi);
+ background: rgba(255, 154, 31, .08);
+ border-left-color: var(--accent);
}
.settings-nav-icon { font-size: .95rem; }
@@ -926,7 +983,7 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
.section-intro {
color: var(--muted);
- font-weight: 300;
+ font-weight: 400;
margin-bottom: 1.2rem;
max-width: 38rem;
}
@@ -947,18 +1004,18 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
color: var(--muted);
background: none;
border: 1px solid rgba(255, 255, 255, .12);
- border-radius: 5px;
+ border-radius: 0;
padding: .25rem .6rem;
white-space: nowrap;
transition: color .15s, border-color .15s;
}
-.btn-mini:hover { color: var(--neon); border-color: var(--neon); }
+.btn-mini:hover { color: var(--accent-hi); border-color: var(--accent-hi); }
.btn-ghost {
background: none;
- color: var(--muted);
- border-color: rgba(255, 255, 255, .12);
+ color: var(--text2);
+ border-color: rgba(255, 255, 255, .18);
}
-.btn-ghost:hover:not(:disabled) { color: var(--text); background: rgba(255, 255, 255, .04); box-shadow: none; }
+.btn-ghost:hover:not(:disabled) { color: var(--accent-hi); background: rgba(255, 255, 255, .06); box-shadow: none; }
/* Feedback-Toast unten rechts */
.feedback-float {
@@ -968,8 +1025,8 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
font-family: var(--mono);
font-size: .78rem; letter-spacing: .1em;
color: var(--success);
- background: #0d0d0d;
- border: 1px solid rgba(0, 255, 136, .3);
+ background: #131316;
+ border: 1px solid rgba(59, 165, 93, .3);
padding: .6rem 1.1rem;
animation: riseIn .25s ease both;
}
@@ -997,7 +1054,7 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
white-space: nowrap;
padding: .45rem .7rem;
}
- .settings-nav-item.active { border-left: none; border-bottom-color: var(--neon); }
+ .settings-nav-item.active { border-left: none; border-bottom-color: var(--accent-hi); }
}
/* ── SETTINGS ──────────────────────────────────────── */
@@ -1007,19 +1064,37 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
padding: 1.4rem 1.6rem;
margin-bottom: 1.5rem;
}
+/* Abschnitts-Überschrift: Verlaufs-Strich, Titel, auslaufende Linie und
+ rechts optional eine Kennzahl (
). Die Linie ist
+ ein ::after und stünde von sich aus hinter allen echten Kindern — order
+ schiebt die Kennzahl dahinter. */
.settings-title {
display: flex; align-items: center; gap: 1rem;
- font-family: var(--mono);
- font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
- color: var(--neon2);
+ font-family: var(--display);
+ font-size: 1.35rem; font-weight: 700;
+ letter-spacing: .04em; text-transform: uppercase;
+ color: var(--text);
margin-bottom: 1.2rem;
}
-/* Auslaufende Linie hinter Gruppen-Titeln */
+.settings-title::before {
+ content: '';
+ flex: none; width: 22px; height: 3px;
+ background: linear-gradient(90deg, var(--accent-hi), var(--accent-lo));
+}
.settings-title::after {
content: '';
flex: 1; height: 1px;
- background: linear-gradient(90deg, rgba(255, 77, 0, .35), transparent);
+ background: linear-gradient(90deg, rgba(255, 255, 255, .15), transparent);
}
+.section-meta {
+ order: 1;
+ font-family: var(--mono);
+ font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
+ color: var(--muted2); white-space: nowrap;
+}
+/* Was zum Titel gehört und nicht als eigene Spalte danebenstehen soll */
+.settings-title-text { display: inline-flex; align-items: center; gap: .6rem; }
+.cmd-lock { color: var(--accent-hi); }
.stats { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.stat { display: flex; flex-direction: column; gap: .1rem; }
@@ -1051,7 +1126,7 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
.field textarea {
width: 100%;
- background: #0d0d0d;
+ background: #131316;
border: 1px solid rgba(255, 255, 255, .12);
color: var(--text);
font-family: var(--body);
@@ -1061,11 +1136,11 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
resize: vertical;
transition: border-color .2s;
}
-.field textarea:focus { border-color: var(--neon); }
+.field textarea:focus { border-color: var(--accent-hi); }
.field select, .field input[type="text"], .field input[type="password"] {
width: 100%;
- background: #0d0d0d;
+ background: #131316;
border: 1px solid rgba(255, 255, 255, .12);
color: var(--text);
font-family: var(--body);
@@ -1074,10 +1149,10 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
outline: none;
transition: border-color .2s;
}
-.field select:focus, .field input[type="text"]:focus, .field input[type="password"]:focus { border-color: var(--neon); }
+.field select:focus, .field input[type="text"]:focus, .field input[type="password"]:focus { border-color: var(--accent-hi); }
/* Auf breiten Schirmen sollen Eingabefelder nicht über die halbe Seite laufen */
.field select, .field input[type="text"], .field input[type="password"], .field input[type="number"] { max-width: 44rem; }
-.field select option { background: #0d0d0d; }
+.field select option { background: #131316; }
/* Schalter links, Beschriftung und Hinweis rechts gestapelt — vorher klebten
alle drei in einer Zeile aneinander. Fehlt der Hinweis, bleibt Zeile 2 leer
@@ -1113,9 +1188,9 @@ label.toggle {
background: var(--muted2);
transition: transform .2s, background .2s;
}
-.toggle:hover input { border-color: var(--neon); }
-.toggle input:checked { background: var(--neon); border-color: var(--neon); }
-.toggle input:checked::after { transform: translateX(18px); background: #0a0a0a; }
+.toggle:hover input { border-color: var(--accent-hi); }
+.toggle input:checked { background: var(--accent-hi); border-color: var(--accent-hi); }
+.toggle input:checked::after { transform: translateX(18px); background: #131316; }
.toggle > span:first-of-type {
grid-column: 2; grid-row: 1;
color: var(--text); font-size: .95rem;
@@ -1137,12 +1212,12 @@ label.toggle {
.key-name { font-weight: 600; min-width: 8rem; }
.key-scopes {
font-family: var(--mono); font-size: .65rem; letter-spacing: .1em;
- color: var(--neon); flex: 1;
+ color: var(--accent-hi); flex: 1;
}
.key-used { font-family: var(--mono); font-size: .62rem; color: var(--muted2); white-space: nowrap; }
.key-created {
- border: 1px solid rgba(0, 255, 136, .3);
- background: rgba(0, 255, 136, .04);
+ border: 1px solid rgba(59, 165, 93, .3);
+ background: rgba(59, 165, 93, .04);
padding: .8rem 1rem;
margin-bottom: 1.2rem;
font-size: .9rem;
@@ -1161,11 +1236,15 @@ label.toggle {
font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
color: var(--muted); cursor: pointer;
}
-.scope-pick input { accent-color: var(--neon); }
+.scope-pick input { accent-color: var(--accent-hi); }
.settings-actions { display: flex; align-items: center; gap: 1rem; }
-.btn-save { background: var(--neon); color: #0a0a0a; border-color: var(--neon); font-weight: 600; }
-.btn-save:hover:not(:disabled) { background: var(--text); border-color: var(--text); }
+.btn-save {
+ background: var(--grad);
+ color: var(--bg);
+ border-color: transparent;
+}
+.btn-save:hover:not(:disabled) { background: var(--grad); color: var(--bg); filter: brightness(1.1); }
.feedback { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; color: var(--success); }
/* ── PAGINATION ────────────────────────────────────── */
@@ -1177,109 +1256,94 @@ label.toggle {
font-family: var(--mono);
font-size: .75rem; letter-spacing: .2em; color: var(--muted2);
}
-.btn {
- font-family: var(--mono);
- font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
- color: var(--neon);
- background: none;
- border: 1px solid var(--border);
- padding: .5rem 1.1rem;
- transition: background .2s, border-color .2s, opacity .2s;
-}
-.btn:hover:not(:disabled) {
- border-color: var(--neon);
- background: rgba(245, 197, 24, .08);
- box-shadow: 0 0 14px rgba(245, 197, 24, .18);
-}
-.btn:disabled { opacity: .25; cursor: default; }
-
/* ── FOOTER ────────────────────────────────────────── */
.footer {
- position: relative;
border-top: 1px solid var(--border);
- padding: 1.5rem 2.5rem;
- display: flex; align-items: center; justify-content: center; gap: .9rem;
- font-family: var(--mono); font-size: .68rem; letter-spacing: .2em;
- color: var(--muted2);
+ padding: 1.4rem 2.5rem;
+ display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
+ font-family: var(--mono); font-size: .66rem;
+ letter-spacing: .14em; text-transform: uppercase;
+ color: var(--muted);
}
-.footer::before {
- content: '';
- position: absolute; left: 0; right: 0; top: -1px; height: 1px;
- background: linear-gradient(90deg, transparent, rgba(245, 197, 24, .4), transparent);
+/* Wie in der Navigation: kein gap, sonst reißt es den Namen auseinander */
+.footer-logo {
+ display: inline-flex; align-items: center;
+ font-family: var(--display); font-weight: 700; font-size: .95rem;
+ letter-spacing: .06em; text-transform: none;
+ color: var(--text);
}
-.footer-logo { font-family: var(--display); font-size: .95rem; letter-spacing: .15em; color: var(--neon); }
-.footer-logo span { color: var(--neon2); }
-.footer-sep { color: var(--muted2); }
-.footer a { color: var(--muted); text-transform: uppercase; transition: color .2s; }
-.footer a:hover { color: var(--neon); }
+.footer-logo span { color: var(--accent); }
+.footer-mark { width: 20px; height: 20px; object-fit: contain; margin-right: .5rem; }
+/* Rechtliches sammelt sich am rechten Rand */
+.footer-right { margin-left: auto; display: flex; gap: 1.2rem; flex-wrap: wrap; }
+.footer a { color: var(--muted); transition: color .2s; }
+.footer a:hover { color: var(--accent-hi); }
/* ── MOBILE ────────────────────────────────────────── */
@media (max-width: 640px) {
- .nav { padding: 1rem 1.25rem; gap: 1.25rem; }
- .nav.scrolled { padding: .8rem 1.25rem; }
+ .nav { padding: .85rem 1.25rem; gap: 1.25rem; }
.username { display: none; }
- .page-header { padding: 4rem 1.25rem 2.5rem; min-height: 200px; }
- .page-bg-text { font-size: 8rem; }
- .content { padding: 2rem 1.25rem 4rem; }
+ .page-header { padding: 2.5rem 1.25rem 1.75rem; }
+ .content { padding: 1rem 1.25rem 4rem; }
+ .footer { padding: 1.4rem 1.25rem; }
+ .footer-right { margin-left: 0; width: 100%; }
.timeline { padding-left: 1.2rem; }
.commit-row { flex-wrap: wrap; row-gap: .35rem; }
.commit-msg { flex-basis: 100%; order: -1; white-space: normal; }
}
-/* ── MODERN POLISH ─────────────────────────────────────
- Weiche Radien + feinere Flächen, überschreibt gezielt
- die eckigen Basis-Styles weiter oben. */
+/* ── FLÄCHEN & KANTEN ──────────────────────────────────
+ Der neue Look hat keine Rundungen: Panels sind entweder abgeschrägt
+ (clip-path, siehe oben) oder scharfkantig. Rund bleibt nur, was einen
+ Menschen oder einen Zustand darstellt — Avatare, Punkte, Chips.
+
+ .settings-section bekommt bewusst keine Abschrägung: in den Bereichen
+ stehen Auswahllisten, die aus dem Panel herausklappen — clip-path würde
+ sie abschneiden. */
.card, .settings-section, .commit-list, .key-list, .key-created,
-.wish-row, .release-card, .milestone {
- border-radius: 12px;
+.wish-row, .release-card, .milestone,
+.card-images a, .shot, .hm-cell, .lvl-list, .tm-list, .tpl-list, .tune-list {
+ border-radius: 0;
}
.settings-section {
- background: linear-gradient(180deg, rgba(255, 255, 255, .015), transparent 40%), var(--bg2);
- border-color: rgba(255, 255, 255, .08);
+ background: var(--bg2);
+ border-color: var(--border);
transition: border-color .2s;
}
-.settings-section:hover { border-color: rgba(245, 197, 24, .18); }
+.settings-section:hover { border-color: rgba(255, 154, 31, .18); }
.settings-section + .settings-section,
.settings-content > .settings-section { margin-bottom: 1.25rem; }
-.btn, .btn-login, .field select, .field input[type="text"], .field input[type="password"], .field textarea,
-.search, .user-chip, .feedback-float, .sha, .card-project, .card-delete,
-.commits th:first-child, .commits th:last-child {
- border-radius: 8px;
-}
.chip, .key-scopes { border-radius: 99px; }
-.settings-nav-item { border-radius: 9px; border-left-width: 2px; }
-.key-list .key-row:first-child { border-radius: 12px 12px 0 0; }
-.key-list .key-row:last-child { border-radius: 0 0 12px 12px; }
-.commit-list .commit-row:first-child { border-radius: 12px 12px 0 0; }
-.commit-list .commit-row:last-child { border-radius: 0 0 12px 12px; }
-.card-images a, .shot, .progress, .hm-cell { border-radius: 6px; }
-.card-images.n1 a { border-radius: 10px; }
+.settings-nav-item { border-left-width: 2px; }
-/* Inputs: ruhigerer Grundzustand, klarer Fokus */
+/* Eingaben: dunkler als das Panel, Fokus in der Leitfarbe */
.field select, .field input[type="text"], .field input[type="password"], .field textarea {
- background: rgba(0, 0, 0, .35);
- border-color: rgba(255, 255, 255, .09);
+ background: var(--bg);
+ border-color: rgba(255, 255, 255, .12);
+ border-radius: 0;
}
.field select:hover, .field input[type="text"]:hover, .field input[type="password"]:hover, .field textarea:hover {
- border-color: rgba(255, 255, 255, .2);
+ border-color: rgba(255, 255, 255, .22);
}
.field select:focus, .field input[type="text"]:focus, .field input[type="password"]:focus, .field textarea:focus {
- border-color: var(--neon);
- box-shadow: 0 0 0 3px rgba(245, 197, 24, .12);
+ border-color: var(--accent);
+ box-shadow: 0 0 0 3px rgba(255, 154, 31, .12);
}
+/* Schalter: an = Marken-Verlauf */
.toggle input { border-radius: 99px; }
.toggle input::after { border-radius: 50%; }
+.toggle input:checked { background: var(--grad); border-color: transparent; }
/* ── LEVEL-BESTENLISTE ─────────────────────────────── */
-.lvl-list { border: 1px solid rgba(255, 255, 255, .06); background: var(--bg2); border-radius: 12px; }
+.lvl-list { border: 1px solid rgba(255, 255, 255, .06); background: var(--bg2); border-radius: 0; }
.lvl-row {
display: flex; align-items: center; gap: 1rem;
padding: .65rem 1.1rem;
border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.lvl-row:last-child { border-bottom: none; }
-.lvl-row:first-child { border-radius: 12px 12px 0 0; }
+.lvl-row:first-child { border-radius: 0; }
.lvl-rank {
display: inline-flex; align-items: center; gap: .35rem;
font-family: var(--mono); font-size: .85rem; color: var(--muted);
@@ -1288,7 +1352,7 @@ label.toggle {
.lvl-rank-n { min-width: 1.2rem; text-align: right; }
/* Die ersten drei Plätze dürfen sich abheben — sonst sieht die Liste flach aus */
.lvl-row.top .lvl-rank-n { color: var(--text); font-size: .95rem; }
-.lvl-row.top-1 { background: linear-gradient(90deg, rgba(245, 197, 24, .07), transparent 55%); }
+.lvl-row.top-1 { background: linear-gradient(90deg, rgba(255, 154, 31, .07), transparent 55%); }
.lvl-row.top-2 { background: linear-gradient(90deg, rgba(192, 196, 204, .05), transparent 55%); }
.lvl-row.top-3 { background: linear-gradient(90deg, rgba(192, 122, 62, .05), transparent 55%); }
@@ -1297,7 +1361,7 @@ label.toggle {
object-fit: cover;
background: var(--bg3); border: 1px solid var(--border);
}
-.lvl-row.top-1 .lvl-avatar { border-color: rgba(245, 197, 24, .55); }
+.lvl-row.top-1 .lvl-avatar { border-color: rgba(255, 154, 31, .55); }
.lvl-avatar-empty {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--display); font-size: 1rem; color: var(--muted);
@@ -1306,7 +1370,7 @@ label.toggle {
.lvl-progress { flex: 1; }
.lvl-level {
font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
- color: var(--neon); white-space: nowrap;
+ color: var(--accent-hi); white-space: nowrap;
}
.lvl-xp { font-family: var(--mono); font-size: .68rem; color: var(--muted2); white-space: nowrap; min-width: 6rem; text-align: right; }
@media (max-width: 640px) {
@@ -1318,7 +1382,7 @@ label.toggle {
.field input[type="date"], .field input[type="time"] {
background: rgba(0, 0, 0, .35);
border: 1px solid rgba(255, 255, 255, .09);
- border-radius: 8px;
+ border-radius: 0;
color: var(--text);
font-family: var(--body);
font-size: .95rem;
@@ -1327,15 +1391,15 @@ label.toggle {
color-scheme: dark;
}
.field input[type="date"]:focus, .field input[type="time"]:focus {
- border-color: var(--neon);
- box-shadow: 0 0 0 3px rgba(245, 197, 24, .12);
+ border-color: var(--accent-hi);
+ box-shadow: 0 0 0 3px rgba(255, 154, 31, .12);
}
/* Willkommens-Karte: Vorschau + Farbwähler */
.welcome-preview {
display: block; width: 100%; max-width: 900px;
aspect-ratio: 3 / 1;
- border: 1px solid var(--border); border-radius: 10px;
+ border: 1px solid var(--border); border-radius: 0;
background: var(--bg3);
margin-bottom: 1.1rem;
}
@@ -1353,7 +1417,7 @@ label.toggle {
padding: .2rem;
background: rgba(0, 0, 0, .35);
border: 1px solid rgba(255, 255, 255, .12);
- border-radius: 8px;
+ border-radius: 0;
cursor: pointer;
}
.field input[type="file"] {
@@ -1365,18 +1429,18 @@ label.toggle {
.field input[type="file"]::file-selector-button {
font-family: var(--mono);
font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
- color: var(--neon);
+ color: var(--accent-hi);
background: none;
border: 1px solid var(--border);
- border-radius: 8px;
+ border-radius: 0;
padding: .45rem 1rem;
margin-right: .8rem;
cursor: pointer;
transition: border-color .2s, background .2s;
}
.field input[type="file"]::file-selector-button:hover {
- border-color: var(--neon);
- background: rgba(245, 197, 24, .08);
+ border-color: var(--accent-hi);
+ background: rgba(255, 154, 31, .08);
}
/* Button-Farb-Auswahl im Rollen-Menü-Builder */
@@ -1415,7 +1479,7 @@ label.toggle {
.event-card { margin-bottom: 1.5rem; }
.event-cover {
width: 100%; max-height: 220px; object-fit: cover;
- border-radius: 8px; margin-bottom: .9rem; display: block;
+ border-radius: 0; margin-bottom: .9rem; display: block;
}
/* ── AKTIVITÄTS-CHART ──────────────────────────────── */
@@ -1424,13 +1488,13 @@ label.toggle {
height: 120px;
background: var(--bg2);
border: 1px solid rgba(255, 255, 255, .06);
- border-radius: 12px;
+ border-radius: 0;
padding: .8rem;
}
.act-bar {
flex: 1;
- background: linear-gradient(180deg, var(--neon), rgba(245, 197, 24, .35));
- border-radius: 3px 3px 0 0;
+ background: linear-gradient(180deg, var(--accent-hi), rgba(255, 154, 31, .35));
+ border-radius: 0;
min-height: 4px;
transition: opacity .15s;
}
@@ -1468,7 +1532,7 @@ label.toggle {
.dpv-avatar {
width: 40px; height: 40px; flex-shrink: 0;
border-radius: 50%;
- background: #f5c518;
+ background: #ff9a1f;
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem;
}
@@ -1494,7 +1558,7 @@ label.toggle {
.dpv-embed {
display: flex; gap: 1rem;
background: #2b2d31;
- border-left: 4px solid #f5c518;
+ border-left: 4px solid #ff9a1f;
border-radius: 4px;
padding: .7rem .9rem .8rem;
margin-top: .35rem;
@@ -1528,7 +1592,7 @@ label.toggle {
.gamesel-list {
position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 100%;
max-height: 16rem; overflow-y: auto;
- background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
+ background: var(--bg2); border: 1px solid var(--border); border-radius: 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.gamesel-item {
@@ -1536,7 +1600,7 @@ label.toggle {
width: 100%; padding: .45rem .7rem; border: 0; background: none; cursor: pointer;
color: var(--text); font-family: var(--body); font-size: .95rem; text-align: left;
}
-.gamesel-item:hover, .gamesel-item.active { background: var(--bg3); color: var(--neon); }
+.gamesel-item:hover, .gamesel-item.active { background: var(--bg3); color: var(--accent-hi); }
.gamesel-id { color: var(--muted2); font-family: var(--mono); font-size: .75rem; }
.gamesel-item:hover .gamesel-id { color: var(--muted); }
.gamesel-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -1553,21 +1617,21 @@ label.toggle {
.picksel { position: relative; max-width: 44rem; }
.picksel input {
width: 100%; padding-right: 2rem;
- background: #0d0d0d; border: 1px solid var(--border); border-radius: 8px;
+ background: #131316; border: 1px solid var(--border); border-radius: 0;
color: var(--text); font-family: var(--body); font-size: .95rem;
padding: .55rem .8rem; outline: none;
transition: border-color .2s;
}
-.picksel input:focus { border-color: var(--neon); }
+.picksel input:focus { border-color: var(--accent-hi); }
.picksel-caret {
position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
display: inline-flex; color: var(--muted2); cursor: pointer;
}
-.picksel-caret:hover { color: var(--neon); }
+.picksel-caret:hover { color: var(--accent-hi); }
.picksel-list {
position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
max-height: 17rem; overflow-y: auto;
- background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
+ background: var(--bg2); border: 1px solid var(--border); border-radius: 0;
box-shadow: 0 10px 28px rgba(0, 0, 0, .65);
}
.picksel-item {
@@ -1575,7 +1639,7 @@ label.toggle {
width: 100%; padding: .45rem .75rem; border: 0; background: none; cursor: pointer;
color: var(--text); font-family: var(--body); font-size: .93rem; text-align: left;
}
-.picksel-item:hover, .picksel-item.active { background: var(--bg3); color: var(--neon); }
+.picksel-item:hover, .picksel-item.active { background: var(--bg3); color: var(--accent-hi); }
.picksel-label.muted { color: var(--muted2); font-style: italic; }
.picksel-hint { color: var(--muted2); font-family: var(--mono); font-size: .68rem; white-space: nowrap; }
.picksel-item:hover .picksel-hint { color: var(--muted); }
@@ -1588,17 +1652,17 @@ label.toggle {
.gate-banner {
display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
margin: 1.2rem auto 0; max-width: 900px; padding: .8rem 1.1rem;
- background: rgba(255, 77, 0, 0.08); border: 1px solid rgba(255, 77, 0, 0.4);
- border-radius: 10px; font-family: var(--body);
+ background: rgba(240, 120, 0, 0.08); border: 1px solid rgba(240, 120, 0, 0.4);
+ border-radius: 0; font-family: var(--body);
}
.gate-banner span { flex: 1; min-width: 240px; }
.profile-card {
display: flex; gap: 1.4rem; align-items: flex-start;
- background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
+ background: var(--bg2); border: 1px solid var(--border); border-radius: 0;
padding: 1.4rem; margin-bottom: 2rem;
}
-.profile-avatar { width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--neon); }
+.profile-avatar { width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--accent-hi); }
.profile-name { font-family: var(--display); font-size: 2rem; letter-spacing: .05em; margin: 0; }
.profile-meta { color: var(--muted); margin: .2rem 0 0; font-family: var(--body); }
.profile-badge {
@@ -1611,23 +1675,23 @@ label.toggle {
border: 1px solid var(--border); color: var(--text); font-family: var(--body);
}
.xp-bar { height: 12px; border-radius: 999px; background: var(--bg3); border: 1px solid var(--border); overflow: hidden; }
-.xp-fill { height: 100%; background: linear-gradient(90deg, var(--neon), var(--neon2)); }
+.xp-fill { height: 100%; background: linear-gradient(90deg, var(--accent-hi), var(--accent-lo)); }
.alpha-key {
font-family: var(--mono); background: var(--bg3); border: 1px solid var(--border);
- border-radius: 8px; padding: .5rem .8rem; letter-spacing: .08em;
+ border-radius: 0; padding: .5rem .8rem; letter-spacing: .08em;
}
.rolemenu-box { margin-bottom: 1.4rem; }
.rolemenu-title { font-family: var(--body); font-weight: 600; font-size: 1.1rem; margin: 0 0 .2rem; }
.rolemenu-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
-.rolemenu-btn.active { border-color: var(--neon); color: var(--neon); }
+.rolemenu-btn.active { border-color: var(--accent-hi); color: var(--accent-hi); }
.wish-vote {
background: var(--bg3); border: 1px solid var(--border); border-radius: 999px;
color: var(--muted); font-family: var(--mono); padding: .25rem .7rem; cursor: pointer;
white-space: nowrap; transition: border-color .15s, color .15s;
}
-.wish-vote:hover { border-color: var(--neon); color: var(--text); }
-.wish-vote.voted { border-color: var(--neon); color: var(--neon); }
+.wish-vote:hover { border-color: var(--accent-hi); color: var(--text); }
+.wish-vote.voted { border-color: var(--accent-hi); color: var(--accent-hi); }
.wish-form { display: flex; gap: .6rem; margin-top: 1rem; }
.wish-form input { flex: 1; }
@media (max-width: 640px) {
@@ -1648,13 +1712,13 @@ label.toggle {
transition: color .2s, text-shadow .2s;
}
.nav-drop-btn:hover { color: var(--text); }
-.nav-drop-btn.active { color: var(--neon); text-shadow: 0 0 12px rgba(245, 197, 24, .35); }
+.nav-drop-btn.active { color: var(--accent-hi); text-shadow: 0 0 12px rgba(255, 154, 31, .35); }
.nav-caret { font-size: .6rem; transition: transform .2s; }
.nav-drop.open .nav-caret { transform: rotate(180deg); }
.nav-drop-menu {
position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; min-width: 11rem;
- background: rgba(14, 14, 14, .97); border: 1px solid var(--border); border-radius: 10px;
+ background: rgba(27, 27, 32, .97); border: 1px solid var(--border); border-radius: 0;
padding: .4rem; box-shadow: 0 12px 32px rgba(0, 0, 0, .6);
animation: riseIn .18s ease both;
z-index: 300;
@@ -1663,11 +1727,11 @@ label.toggle {
.nav-drop-menu a {
font-family: var(--mono); font-size: .7rem;
letter-spacing: .2em; text-transform: uppercase;
- color: var(--muted); padding: .55rem .8rem; border-radius: 6px;
+ color: var(--muted); padding: .55rem .8rem; border-radius: 0;
transition: color .15s, background .15s;
}
.nav-drop-menu a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
-.nav-drop-menu a.active { color: var(--neon); }
+.nav-drop-menu a.active { color: var(--accent-hi); }
.user-chip-inner { display: inline-flex; align-items: center; gap: .55rem; letter-spacing: 0; }
.auth .nav-drop-btn {
border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px;
@@ -1676,14 +1740,14 @@ label.toggle {
.auth .nav-drop-btn:hover { border-color: var(--border); }
.burger {
- display: none; background: none; border: 1px solid var(--border); border-radius: 8px;
- color: var(--neon); font-size: 1.1rem; line-height: 1; padding: .4rem .6rem; cursor: pointer;
+ display: none; background: none; border: 1px solid var(--border); border-radius: 0;
+ color: var(--accent-hi); font-size: 1.1rem; line-height: 1; padding: .4rem .6rem; cursor: pointer;
}
.drawer {
position: fixed; inset: 0; top: 0; z-index: 190;
display: flex; flex-direction: column; gap: .2rem;
padding: 5.5rem 1.5rem 2rem;
- background: rgba(8, 8, 8, .97);
+ background: rgba(19, 19, 22, .97);
animation: riseIn .2s ease both;
overflow-y: auto;
}
@@ -1694,7 +1758,7 @@ label.toggle {
border-bottom: 1px solid rgba(255, 255, 255, .05);
transition: color .15s;
}
-.drawer a:hover, .drawer a.active { color: var(--neon); }
+.drawer a:hover, .drawer a.active { color: var(--accent-hi); }
@media (max-width: 760px) {
.nav-links, .auth { display: none; }
.burger { display: block; margin-left: auto; }
@@ -1716,7 +1780,7 @@ label.toggle {
.lb-figure { display: flex; flex-direction: column; align-items: center; margin: 0; min-width: 0; }
.lb-img {
max-width: 100%; max-height: 78vh; object-fit: contain;
- border: 1px solid var(--border); border-radius: 8px;
+ border: 1px solid var(--border); border-radius: 0;
box-shadow: 0 24px 80px rgba(0, 0, 0, .8);
}
.lb-close {
@@ -1725,7 +1789,7 @@ label.toggle {
color: var(--text); font-size: 1rem; padding: .45rem .7rem; cursor: pointer;
transition: color .15s, border-color .15s;
}
-.lb-close:hover { color: var(--neon2); border-color: var(--neon2); }
+.lb-close:hover { color: var(--accent-lo); border-color: var(--accent-lo); }
.lb-nav {
flex: none;
background: rgba(255, 255, 255, .04); border: 1px solid var(--border); border-radius: 999px;
@@ -1733,13 +1797,13 @@ label.toggle {
width: 3rem; height: 3rem; cursor: pointer;
transition: color .15s, border-color .15s, background .15s;
}
-.lb-nav:hover { color: var(--neon); border-color: var(--neon); background: rgba(245, 197, 24, .08); }
+.lb-nav:hover { color: var(--accent-hi); border-color: var(--accent-hi); background: rgba(255, 154, 31, .08); }
.lb-meta {
display: flex; gap: 1.2rem; align-items: baseline;
font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
color: var(--muted); margin-top: .8rem; white-space: nowrap;
}
-.lb-count { color: var(--neon); }
+.lb-count { color: var(--accent-hi); }
@media (max-width: 640px) {
.lb-row { gap: .5rem; }
.lb-nav { width: 2.4rem; height: 2.4rem; font-size: 1.4rem; }
@@ -1748,36 +1812,39 @@ label.toggle {
/* ── SKELETON-LOADER ───────────────────────────────── */
.skel {
position: relative; overflow: hidden;
- background: rgba(255, 255, 255, .05); border-radius: 8px;
+ background: rgba(255, 255, 255, .05); border-radius: 0;
}
.skel::after {
content: '';
position: absolute; inset: 0;
- background: linear-gradient(90deg, transparent, rgba(245, 197, 24, .07), transparent);
+ background: linear-gradient(90deg, transparent, rgba(255, 154, 31, .07), transparent);
transform: translateX(-100%);
animation: skelShine 1.4s ease-in-out infinite;
}
@keyframes skelShine { to { transform: translateX(100%); } }
.skel-card { animation: riseIn .3s ease both; margin-bottom: 1.1rem; }
.skel-line { height: .95rem; margin: .55rem 0; }
-.skel-shot { aspect-ratio: 16 / 9; border-radius: 10px; animation: riseIn .3s ease both; }
-.skel-row { height: 2.6rem; border-radius: 10px; margin-bottom: .5rem; animation: riseIn .3s ease both; }
+.skel-shot { aspect-ratio: 16 / 9; border-radius: 0; animation: riseIn .3s ease both; }
+.skel-row { height: 2.6rem; border-radius: 0; margin-bottom: .5rem; animation: riseIn .3s ease both; }
/* ── SERVER-STATUS-SEITE ───────────────────────────── */
.srv-summary {
+ --bv: 14px;
display: flex; gap: 2.5rem; flex-wrap: wrap;
- background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
- padding: 1.1rem 1.6rem; margin-bottom: 1.5rem;
+ background: var(--bg2); border: 1px solid var(--border);
+ padding: 1.2rem 1.6rem; margin-bottom: 1.5rem;
}
.srv-sum-item { display: flex; flex-direction: column; }
.srv-sum-n {
- font-family: var(--display); font-size: 2.2rem; line-height: 1;
- color: var(--neon); text-shadow: 0 0 16px rgba(245, 197, 24, .3);
+ font-size: 2rem; font-weight: 700; line-height: 1.1;
+ background: var(--grad);
+ -webkit-background-clip: text; background-clip: text; color: transparent;
}
-.srv-sum-of { font-size: 1.2rem; color: var(--muted2); text-shadow: none; }
+/* Der Nenner steht neben der Zahl und darf den Verlauf nicht erben */
+.srv-sum-of { font-size: 1.1rem; color: var(--muted2); -webkit-text-fill-color: var(--muted2); }
.srv-sum-label {
- font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
- text-transform: uppercase; color: var(--muted); margin-top: .35rem;
+ font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
+ text-transform: uppercase; color: var(--muted); margin-top: .3rem;
}
.srv-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 980px) { .srv-grid { grid-template-columns: 1fr 1fr; } }
@@ -1786,7 +1853,7 @@ label.toggle {
.srv-head { display: flex; align-items: center; gap: 1rem; }
.srv-logo {
width: 52px; height: 52px; flex: none;
- border-radius: 12px; object-fit: cover;
+ border-radius: 0; object-fit: cover;
border: 1px solid var(--border); background: var(--bg3);
}
.srv-logo-emoji { display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }
@@ -1801,7 +1868,7 @@ label.toggle {
Zeile bricht auf schmalen Schirmen um, und dann staende der Strich als
einzelnes Zeichen am Zeilenanfang. Abstand und Farbe trennen genug. */
.srv-spiel { color: var(--muted2); margin-left: .5rem; }
-.srv-count { font-family: var(--display); font-size: 1.9rem; line-height: 1; color: var(--neon); white-space: nowrap; }
+.srv-count { font-family: var(--display); font-size: 1.9rem; line-height: 1; color: var(--accent-hi); white-space: nowrap; }
.srv-count-max { font-size: 1.1rem; color: var(--muted2); }
.srv-bar { margin-top: .9rem; }
@@ -1809,12 +1876,12 @@ label.toggle {
sagt, ob noch jemand reinkommt — gruen frei, gelb eng, rot voll. */
.srv-cap {
position: relative; height: 22px; margin-top: .9rem;
- border: 1px solid var(--border); border-radius: 6px;
+ border: 1px solid var(--border); border-radius: 0;
background: var(--bg3); overflow: hidden;
}
.srv-cap-fill { height: 100%; transition: width .5s ease; }
.srv-cap.frei .srv-cap-fill { background: linear-gradient(90deg, #1f7a4d, var(--success)); }
-.srv-cap.eng .srv-cap-fill { background: linear-gradient(90deg, #8a6a10, var(--neon)); }
+.srv-cap.eng .srv-cap-fill { background: linear-gradient(90deg, #8a6a10, var(--accent-hi)); }
.srv-cap.voll .srv-cap-fill { background: linear-gradient(90deg, #8a2326, #f23f43); }
.srv-cap-pct {
/* Rechtsbuendig, nicht mittig: mittig laege die Zahl bei 50 % genau auf der
@@ -1833,7 +1900,7 @@ label.toggle {
display: inline-flex; align-items: center; gap: .3rem;
font-family: var(--mono); font-size: .64rem; letter-spacing: .06em;
color: var(--muted); background: var(--bg3);
- border: 1px solid var(--border); border-radius: 5px; padding: .22rem .5rem;
+ border: 1px solid var(--border); border-radius: 0; padding: .22rem .5rem;
}
/* Steht anstelle des Verlaufs, wenn es nichts zu zeigen gibt */
.srv-leer {
@@ -1856,15 +1923,15 @@ label.toggle {
.srv-name-chip {
font-family: var(--mono); font-size: .68rem; color: var(--text);
background: var(--bg3); border: 1px solid var(--border);
- border-radius: 5px; padding: .2rem .5rem;
+ border-radius: 0; padding: .2rem .5rem;
max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.srv-mehr {
- font-family: var(--mono); font-size: .68rem; color: var(--neon);
- background: none; border: 1px dashed var(--border); border-radius: 5px;
+ font-family: var(--mono); font-size: .68rem; color: var(--accent-hi);
+ background: none; border: 1px dashed var(--border); border-radius: 0;
padding: .2rem .5rem; cursor: pointer;
}
-.srv-mehr:hover { border-color: var(--neon); }
+.srv-mehr:hover { border-color: var(--accent-hi); }
.srv-chart { width: 100%; height: 100px; margin-top: 1rem; display: block; }
/* Ohne non-scaling-stroke zieht preserveAspectRatio="none" den Strich mit in
@@ -1886,36 +1953,54 @@ label.toggle {
.srv-stats .up-bad { color: #f23f43; }
.srv-connect { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.srv-addr { font-size: .8rem; cursor: pointer; transition: border-color .15s, color .15s; }
-.srv-addr:hover { border-color: var(--neon); color: var(--neon); }
+.srv-addr:hover { border-color: var(--accent-hi); color: var(--accent-hi); }
.srv-checked { font-family: var(--mono); font-size: .62rem; color: var(--muted2); margin-top: .8rem; }
/* ── AUDIT-LOG ─────────────────────────────────────── */
/* ── STATUS-DASHBOARD ──────────────────────────────── */
.dash-head {
- display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
- margin-bottom: 1.2rem;
+ display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
+ margin-bottom: 1.3rem;
}
.dash-avatar {
- width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
- border: 1px solid color-mix(in srgb, var(--neon) 35%, transparent);
+ width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
+ object-fit: contain;
+ border: 1px solid rgba(255, 154, 31, .35);
}
+/* Die Wolfsmarke ist kein Foto — sie steht ohne Rahmen und ohne Kreis */
+.dash-avatar.mark { border: 0; border-radius: 0; }
.dash-avatar.leer {
display: grid; place-items: center;
background: rgba(255, 255, 255, .05); color: var(--muted);
}
-.dash-ident { display: flex; flex-direction: column; gap: .35rem; }
-.dash-name { font-weight: 700; font-size: 1rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
+.dash-ident { display: flex; flex-direction: column; gap: .3rem; }
+.dash-name { font-weight: 700; font-size: 1.05rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.dash-tag { font-family: var(--mono); font-size: .62rem; color: var(--muted2); letter-spacing: .06em; }
.dash-pill {
display: inline-flex; align-items: center; gap: .4rem; width: fit-content;
font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
- padding: .16rem .5rem; border-radius: 999px;
- border: 1px solid rgba(59, 165, 93, .45); color: #3ba55d;
+ padding: .14rem .5rem;
+ border: 1px solid rgba(59, 165, 93, .45); color: var(--success);
}
.dash-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.dash-uptime {
margin-left: auto; font-family: var(--mono);
- font-size: .64rem; letter-spacing: .08em; color: var(--muted2);
+ font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2);
+}
+
+/* Zustands-Schild im Seitenkopf des Dashboards */
+.status-pill {
+ --bv: 6px;
+ display: inline-flex; align-items: center; gap: .45rem;
+ font-family: var(--mono); font-size: .62rem;
+ letter-spacing: .14em; text-transform: uppercase;
+ padding: .25rem .7rem;
+ border: 1px solid rgba(59, 165, 93, .45); color: var(--success);
+}
+.status-pill.aus { border-color: rgba(242, 63, 67, .45); color: var(--danger); }
+.status-pill::before {
+ content: ''; width: 6px; height: 6px; border-radius: 50%;
+ background: currentColor;
}
/* Der Balken sitzt zwischen Kopfzeile und Kennzahlen. min-width: 0, sonst
@@ -1925,49 +2010,70 @@ label.toggle {
margin: 0 0 1.2rem; font-size: .8rem; color: var(--muted);
}
-.dash-kpis { display: grid; gap: .7rem; grid-template-columns: repeat(4, 1fr); }
-.dash-kpi { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; min-width: 0; }
-.dash-v { font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
+/* Panels des Dashboards dürfen abgeschrägt sein — anders als die übrigen
+ Config-Bereiche steht hier nichts drin, das herausklappt. */
+.settings-section.dash-panel {
+ --bv: 16px;
+ padding: 1.5rem 1.7rem;
+ border-color: rgba(255, 255, 255, .09);
+}
+.settings-section.dash-panel:hover { border-color: rgba(255, 255, 255, .09); }
+.dash-cols { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.2rem; }
+.dash-cols > .settings-section { margin-bottom: 0; }
+@media (max-width: 900px) { .dash-cols { grid-template-columns: 1fr; } }
+
+.dash-kpis { display: grid; gap: .8rem; grid-template-columns: repeat(4, 1fr); }
+.dash-kpi {
+ --bv: 10px;
+ display: flex; flex-direction: column; gap: .15rem;
+ padding: 1rem 1.1rem; min-width: 0;
+ background: var(--bg); border: 1px solid var(--border);
+}
+.dash-kpi:hover { background: var(--bg); border-color: var(--border); transform: none; }
+.dash-v { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.dash-of { font-size: .85rem; color: var(--muted2); font-weight: 400; }
.dash-l {
- font-family: var(--mono); font-size: .58rem; letter-spacing: .12em;
- text-transform: uppercase; color: var(--muted);
+ font-family: var(--mono); font-size: .58rem; letter-spacing: .14em;
+ text-transform: uppercase; color: var(--muted); margin-top: .2rem;
}
/* Nebenzeile: min-height, damit Karten ohne Wert nicht kürzer werden */
.dash-t {
font-family: var(--mono); font-size: .6rem; letter-spacing: .04em;
- color: var(--muted2); margin-top: .35rem; min-height: 1em;
+ color: var(--muted2); margin-top: .4rem; min-height: 1em;
}
-.dash-t.gut { color: #3ba55d; }
-.dash-t.warn { color: var(--neon2); }
+.dash-t.gut { color: var(--success); }
+.dash-t.warn { color: var(--accent); }
.dash-spark {
- display: flex; align-items: flex-end; gap: 2px;
- height: 70px; margin-top: 1rem;
+ display: flex; align-items: flex-end; gap: 3px;
+ height: 88px; margin-top: 1rem;
}
.dash-bar {
- flex: 1; min-width: 2px; border-radius: 2px 2px 0 0;
- background: linear-gradient(180deg, var(--neon), color-mix(in srgb, var(--neon) 15%, transparent));
+ flex: 1; min-width: 2px;
+ background: linear-gradient(180deg, var(--accent-hi), rgba(240, 120, 0, .2));
}
-.dash-bar:hover { background: var(--neon2); }
+.dash-bar:hover { filter: brightness(1.2); }
-.dash-groups { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; }
+.dash-groups { display: flex; flex-direction: column; gap: .7rem; margin-top: 1rem; }
.dash-group {
- display: flex; align-items: center; gap: .8rem;
+ display: flex; align-items: center; gap: .7rem;
background: none; border: none; padding: .25rem 0; cursor: pointer;
font-size: .82rem; color: var(--muted); text-align: left;
}
.dash-group:hover { color: var(--text); }
-.dash-group-name { flex: 0 0 12rem; }
-.dash-group-bar {
- flex: 1; height: 5px; border-radius: 3px;
- background: rgba(255, 255, 255, .07); overflow: hidden;
+.dash-group-name {
+ flex: 0 0 9.5rem;
+ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
-.dash-group-bar i { display: block; height: 100%; background: var(--neon); }
-.dash-group-bar.warn i { background: var(--neon2); }
+.dash-group-bar {
+ flex: 1; height: 5px;
+ background: rgba(255, 255, 255, .08); overflow: hidden;
+}
+.dash-group-bar i { display: block; height: 100%; background: var(--grad); }
+.dash-group-bar.warn i { background: var(--danger); }
.dash-group-n {
- font-family: var(--mono); font-size: .64rem; color: var(--muted2);
- flex: 0 0 3rem; text-align: right;
+ font-family: var(--mono); font-size: .62rem; color: var(--muted2);
+ flex: 0 0 2.6rem; text-align: right;
}
@media (max-width: 820px) {
@@ -1979,12 +2085,12 @@ label.toggle {
/* ── ÖFFENTLICHE STATUSSEITE ───────────────────────── */
.st-banner {
display: flex; align-items: center; gap: .8rem;
- padding: 1rem 1.2rem; border-radius: 12px; margin-bottom: 2rem;
+ padding: 1rem 1.2rem; border-radius: 0; margin-bottom: 2rem;
font-family: var(--mono); font-size: .8rem; letter-spacing: .1em;
text-transform: uppercase; border: 1px solid;
}
.st-banner.gut { border-color: rgba(59, 165, 93, .4); background: rgba(59, 165, 93, .07); color: #3ba55d; }
-.st-banner.teil { border-color: color-mix(in srgb, var(--neon) 40%, transparent); background: color-mix(in srgb, var(--neon) 7%, transparent); color: var(--neon); }
+.st-banner.teil { border-color: color-mix(in srgb, var(--accent-hi) 40%, transparent); background: color-mix(in srgb, var(--accent-hi) 7%, transparent); color: var(--accent-hi); }
.st-banner.aus { border-color: rgba(242, 63, 67, .45); background: rgba(242, 63, 67, .08); color: #f23f43; }
.st-banner.wartet, .st-banner.leer { border-color: var(--border); color: var(--muted); }
@@ -2028,14 +2134,14 @@ label.toggle {
color: var(--text); text-decoration: none;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
-.wd-url:hover { color: var(--neon); }
+.wd-url:hover { color: var(--accent-hi); }
.wd-meta {
margin-left: auto; font-family: var(--mono);
font-size: .62rem; letter-spacing: .06em; color: var(--muted2); white-space: nowrap;
}
/* Schlüssel stehen als Code — sonst verwechselt man O und 0 */
-.pt-key { font-family: var(--mono); font-size: .74rem; color: var(--neon); }
+.pt-key { font-family: var(--mono); font-size: .74rem; color: var(--accent-hi); }
.pt-wartet { font-family: var(--mono); font-size: .66rem; color: var(--muted2); }
/* Wunsch-Verwaltung im Panel */
@@ -2057,7 +2163,7 @@ label.toggle {
font-size: 1.05rem; line-height: 1; cursor: pointer;
display: grid; place-items: center;
}
-.ep-knopf:hover { border-color: var(--neon); }
+.ep-knopf:hover { border-color: var(--accent-hi); }
.ep-leer { opacity: .35; }
.ep-eingabe { width: 5.5rem; }
.ep-weg {
@@ -2071,7 +2177,7 @@ label.toggle {
Tafel landet in der Nachbarspalte. */
.ep-tafel {
position: fixed; z-index: 1100;
- background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
+ background: var(--bg2); border: 1px solid var(--border); border-radius: 0;
box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
animation: riseIn .15s ease both;
}
@@ -2092,11 +2198,11 @@ label.toggle {
.ep-raster { display: grid; grid-template-columns: repeat(auto-fill, 2rem); gap: .15rem; }
.ep-zelle {
width: 2rem; height: 2rem; display: grid; place-items: center;
- background: none; border: 1px solid transparent; border-radius: 4px;
+ background: none; border: 1px solid transparent; border-radius: 0;
font-size: 1.05rem; line-height: 1; cursor: pointer;
}
-.ep-zelle:hover { background: var(--bg3); border-color: var(--neon); }
-.ep-zelle.aktiv { border-color: var(--neon); background: color-mix(in srgb, var(--neon) 12%, transparent); }
+.ep-zelle:hover { background: var(--bg3); border-color: var(--accent-hi); }
+.ep-zelle.aktiv { border-color: var(--accent-hi); background: color-mix(in srgb, var(--accent-hi) 12%, transparent); }
.ep-nix { color: var(--muted); font-size: .84rem; margin: .6rem 0; }
/* ── EINE IDEE FÜR SICH ────────────────────────────── */
@@ -2104,21 +2210,21 @@ label.toggle {
.wd-kopf { padding: 1.3rem 1.5rem; margin-bottom: 2rem; }
.wd-zeile { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.wd-schilder { display: flex; gap: .35rem; flex-wrap: wrap; }
-.wd-idee { margin: 0 0 .8rem; font-size: 1.05rem; font-weight: 300; line-height: 1.6; }
+.wd-idee { margin: 0 0 .8rem; font-size: 1.05rem; font-weight: 400; line-height: 1.6; }
.wd-meta {
display: flex; gap: 1rem; flex-wrap: wrap;
font-family: var(--mono); font-size: .64rem; color: var(--muted2);
}
.wd-antwort {
margin-top: 1.1rem; padding: .8rem 1rem;
- background: color-mix(in srgb, var(--neon) 6%, transparent);
- border-left: 2px solid var(--neon);
+ background: color-mix(in srgb, var(--accent-hi) 6%, transparent);
+ border-left: 2px solid var(--accent-hi);
font-size: .92rem; color: var(--text);
}
.wd-antwort-kopf {
display: block; margin-bottom: .3rem;
font-family: var(--mono); font-size: .58rem; letter-spacing: .12em;
- text-transform: uppercase; color: var(--neon);
+ text-transform: uppercase; color: var(--accent-hi);
}
/* Beiträge aus dem Thread — gespiegelt, nicht geschrieben */
@@ -2134,20 +2240,20 @@ label.toggle {
.wd-komm-name { font-weight: 600; font-size: .88rem; }
.wd-komm-zeit { font-family: var(--mono); font-size: .6rem; color: var(--muted2); }
.wd-komm-inhalt {
- margin: .25rem 0 0; font-weight: 300; line-height: 1.55;
+ margin: .25rem 0 0; font-weight: 400; line-height: 1.55;
white-space: pre-wrap; overflow-wrap: anywhere;
}
.wd-bilder { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.wd-bild {
- max-height: 180px; max-width: 100%; border-radius: 6px; cursor: zoom-in;
+ max-height: 180px; max-width: 100%; border-radius: 0; cursor: zoom-in;
border: 1px solid var(--border); object-fit: cover;
}
-.wd-bild:hover { border-color: var(--neon); }
+.wd-bild:hover { border-color: var(--accent-hi); }
.wd-mitreden { margin-top: 1.2rem; display: inline-flex; align-items: center; gap: .45rem; }
/* Die Idee in der Liste führt jetzt zur eigenen Seite */
a.wish-idea { color: inherit; text-decoration: none; }
-a.wish-idea:hover { color: var(--neon); }
+a.wish-idea:hover { color: var(--accent-hi); }
/* ── DIALOG ────────────────────────────────────────── */
.dlg-backdrop {
@@ -2163,7 +2269,7 @@ a.wish-idea:hover { color: var(--neon); }
max-height: min(85vh, 46rem);
display: flex; flex-direction: column;
background: var(--bg2); border: 1px solid var(--border);
- border-radius: 4px; min-width: 0;
+ border-radius: 0; min-width: 0;
animation: riseIn .2s ease both;
}
.dlg.weit { width: min(48rem, 100%); }
@@ -2174,7 +2280,7 @@ a.wish-idea:hover { color: var(--neon); }
.dlg-title {
margin: 0; flex: 1; min-width: 0;
font-family: var(--mono); font-size: .72rem;
- letter-spacing: .12em; text-transform: uppercase; color: var(--neon);
+ letter-spacing: .12em; text-transform: uppercase; color: var(--accent-hi);
}
.dlg-body { padding: 1.2rem; overflow-y: auto; min-height: 0; }
.dlg-body > .field:last-child { margin-bottom: 0; }
@@ -2191,7 +2297,7 @@ a.wish-idea:hover { color: var(--neon); }
background: var(--bg3); border: 1px solid var(--border); color: var(--text);
font: inherit; cursor: pointer;
}
-.dlg-pick button:hover:not(:disabled) { border-color: var(--neon); color: var(--neon); }
+.dlg-pick button:hover:not(:disabled) { border-color: var(--accent-hi); color: var(--accent-hi); }
.dlg-pick button:disabled { opacity: .45; cursor: not-allowed; }
.dlg-pick .pick-hint { margin-left: auto; font-family: var(--mono); font-size: .62rem; color: var(--muted2); }
@@ -2221,20 +2327,20 @@ a.wish-idea:hover { color: var(--neon); }
.up-track-wrap { margin-top: .9rem; min-width: 0; }
.up-track {
display: flex; gap: 1px; align-items: stretch;
- height: 30px; overflow-x: auto; overflow-y: hidden;
+ height: 32px; overflow-x: auto; overflow-y: hidden;
scrollbar-width: none;
}
.up-track::-webkit-scrollbar { display: none; }
.up-tick {
- flex: 1 0 3px; min-width: 3px; border-radius: 1px;
- background: var(--success, #3ba55d);
+ flex: 1 0 3px; min-width: 3px;
+ background: var(--success);
transition: transform .1s ease;
}
.up-tick:hover { transform: scaleY(1.15); }
-.up-tick.teil { background: var(--neon); }
-.up-tick.aus { background: #f23f43; }
+.up-tick.teil { background: var(--accent); }
+.up-tick.aus { background: var(--danger); }
/* Keine Messung ist kein „läuft" — deshalb sichtbar leer statt grün */
-.up-tick.leer { background: rgba(255, 255, 255, .07); }
+.up-tick.leer { background: rgba(255, 255, 255, .08); }
.up-track-foot {
display: flex; justify-content: space-between; align-items: baseline;
@@ -2262,8 +2368,8 @@ a.wish-idea:hover { color: var(--neon); }
}
.lang-btn:hover { color: var(--text); }
.lang-btn.on {
- background: color-mix(in srgb, var(--neon) 14%, transparent);
- color: var(--neon);
+ background: color-mix(in srgb, var(--accent-hi) 14%, transparent);
+ color: var(--accent-hi);
}
/* Im Schubladen-Menü steht er allein in einer Zeile */
@@ -2275,7 +2381,7 @@ a.wish-idea:hover { color: var(--neon); }
.tm-list {
display: flex; flex-direction: column;
border: 1px solid rgba(255, 255, 255, .07);
- border-radius: 12px; overflow: hidden;
+ border-radius: 0; overflow: hidden;
margin-bottom: 1.6rem;
}
.tm-row {
@@ -2289,10 +2395,10 @@ a.wish-idea:hover { color: var(--neon); }
.tm-row:hover { background: rgba(255, 255, 255, .02); }
/* Tönungen aus der Leitfarbe mischen — die ist auf der Bot-Seite orange,
im Hub gold, und beides soll stimmen. */
-.tm-row.owner { background: color-mix(in srgb, var(--neon) 5%, transparent); }
+.tm-row.owner { background: color-mix(in srgb, var(--accent-hi) 5%, transparent); }
.tm-row.aktiv {
- background: color-mix(in srgb, var(--neon) 9%, transparent);
- box-shadow: inset 3px 0 0 var(--neon);
+ background: color-mix(in srgb, var(--accent-hi) 9%, transparent);
+ box-shadow: inset 3px 0 0 var(--accent-hi);
}
.tm-row.leer {
justify-content: center; color: var(--muted2);
@@ -2323,12 +2429,12 @@ a.wish-idea:hover { color: var(--neon); }
color: var(--muted); white-space: nowrap;
}
.tm-chip.alle {
- border-color: color-mix(in srgb, var(--neon) 40%, transparent);
- color: var(--neon);
+ border-color: color-mix(in srgb, var(--accent-hi) 40%, transparent);
+ color: var(--accent-hi);
}
.tm-role {
font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
- color: var(--neon); text-transform: uppercase;
+ color: var(--accent-hi); text-transform: uppercase;
}
.tm-form-title {
@@ -2346,22 +2452,22 @@ a.wish-idea:hover { color: var(--neon); }
padding: .6rem .7rem;
background: rgba(0, 0, 0, .25);
border: 1px solid rgba(255, 255, 255, .09);
- border-radius: 10px; color: var(--muted);
+ border-radius: 0; color: var(--muted);
cursor: pointer; transition: all .15s ease;
}
.tm-scope:hover { border-color: rgba(255, 255, 255, .22); color: var(--text); }
.tm-scope.on {
- border-color: var(--neon);
- background: color-mix(in srgb, var(--neon) 8%, transparent);
+ border-color: var(--accent-hi);
+ background: color-mix(in srgb, var(--accent-hi) 8%, transparent);
color: var(--text);
}
.tm-scope-mark {
width: 18px; height: 18px; flex: 0 0 auto;
display: grid; place-items: center;
- border: 1px solid rgba(255, 255, 255, .2); border-radius: 5px;
- font-size: .7rem; color: #0a0a0a;
+ border: 1px solid rgba(255, 255, 255, .2); border-radius: 0;
+ font-size: .7rem; color: #131316;
}
-.tm-scope.on .tm-scope-mark { background: var(--neon); border-color: var(--neon); }
+.tm-scope.on .tm-scope-mark { background: var(--accent-hi); border-color: var(--accent-hi); }
.tm-scope-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.tm-scope-id {
font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
@@ -2373,7 +2479,7 @@ a.wish-idea:hover { color: var(--neon); }
.tm-audit-name { font-weight: 600; min-width: 7rem; }
.tm-audit-action {
font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
- color: var(--neon); white-space: nowrap; min-width: 9rem;
+ color: var(--accent-hi); white-space: nowrap; min-width: 9rem;
}
.tm-audit-detail {
flex: 1; min-width: 0; color: var(--muted);
@@ -2390,32 +2496,51 @@ a.wish-idea:hover { color: var(--neon); }
}
/* ── STARTSEITE ────────────────────────────────────── */
-.home-hero { min-height: 420px; }
-.home-accent { color: var(--neon2); }
-.home-cta { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.6rem; }
-.home-cta-alt { border: 1px solid var(--border); }
-.home-stats { margin-bottom: 1.5rem; }
+.home-accent { color: var(--accent); }
+.home-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
+/* Die Knöpfe im Hero sind größer als die in den Formularen */
+.home-cta .btn { font-size: .78rem; letter-spacing: .12em; padding: .8rem 1.6rem; }
+
.home-tiles {
display: grid; gap: 1rem;
- grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+ grid-template-columns: repeat(3, 1fr);
}
+/* Symbol und Titel in einer Zeile, Beschreibung darunter über die volle
+ Breite — als Raster, damit die Kacheln ohne zusätzliche Hülle auskommen. */
.home-tile {
- display: flex; flex-direction: column; gap: .3rem;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ align-items: center;
+ gap: .45rem .7rem;
padding: 1.3rem 1.4rem;
}
-.home-tile-icon { font-size: 1.6rem; line-height: 1; margin-bottom: .3rem; }
+.home-tile-icon {
+ --bv: 7px;
+ grid-column: 1; grid-row: 1;
+ display: inline-grid; place-items: center;
+ width: 36px; height: 36px;
+ background: rgba(255, 154, 31, .1);
+ border: 1px solid rgba(255, 154, 31, .3);
+ color: var(--accent-hi);
+ transition: none;
+}
.home-tile-title {
- font-family: var(--display); font-size: 1.4rem; letter-spacing: .05em;
- color: var(--text); transition: color .2s;
+ grid-column: 2; grid-row: 1;
+ font-weight: 600; font-size: 1.02rem; letter-spacing: 0;
+ color: var(--text);
+}
+.home-tile-desc {
+ grid-column: 1 / -1; grid-row: 2;
+ color: var(--muted); font-size: .88rem; line-height: 1.55;
}
-.home-tile:hover .home-tile-title { color: var(--neon); }
-.home-tile-desc { font-weight: 300; color: var(--muted); font-size: .95rem; line-height: 1.4; }
.home-devlog { display: block; }
.home-devlog-more {
- display: inline-block; margin-top: .8rem;
- font-family: var(--mono); font-size: .7rem; letter-spacing: .2em;
- text-transform: uppercase; color: var(--neon);
+ display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem;
+ font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
+ text-transform: uppercase; color: var(--accent-hi);
}
+@media (max-width: 900px) { .home-tiles { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 620px) { .home-tiles { grid-template-columns: 1fr; } }
/* Permalink-Icon an der Devlog-Karte */
.card-permalink {
@@ -2429,30 +2554,30 @@ a.wish-idea:hover { color: var(--neon); }
.legal-text .settings-title { margin-top: 2.2rem; }
.legal-text .settings-title:first-of-type { margin-top: 0; }
.legal-text p {
- color: var(--muted); font-weight: 300; line-height: 1.75;
+ color: var(--muted); font-weight: 400; line-height: 1.75;
margin-bottom: 1rem;
}
.legal-text strong { color: var(--text); font-weight: 600; }
-.legal-text a { color: var(--neon); border-bottom: 1px solid rgba(245, 197, 24, .3); }
-.legal-text a:hover { border-bottom-color: var(--neon); }
+.legal-text a { color: var(--accent-hi); border-bottom: 1px solid rgba(255, 154, 31, .3); }
+.legal-text a:hover { border-bottom-color: var(--accent-hi); }
.legal-text code {
font-family: var(--mono); font-size: .85em;
background: var(--bg3); border: 1px solid var(--border);
- border-radius: 4px; padding: .05rem .35rem; color: var(--text);
+ border-radius: 0; padding: .05rem .35rem; color: var(--text);
}
.legal-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.legal-list li {
position: relative; padding-left: 1.4rem; margin-bottom: .7rem;
- color: var(--muted); font-weight: 300; line-height: 1.7;
+ color: var(--muted); font-weight: 400; line-height: 1.7;
}
.legal-list li::before {
- content: '▸'; position: absolute; left: 0; color: var(--neon2);
+ content: '▸'; position: absolute; left: 0; color: var(--accent-lo);
}
/* Lösch-Bereich im Profil */
.danger-zone {
border: 1px solid rgba(242, 63, 67, .25);
- border-radius: 12px; padding: 1.2rem 1.4rem;
+ border-radius: 0; padding: 1.2rem 1.4rem;
background: rgba(242, 63, 67, .03);
}
.danger-zone .settings-title { color: #f23f43; }
@@ -2485,12 +2610,10 @@ button.with-icon, a.with-icon { justify-content: center; }
/* Setup-Sidebar: Icons in Markenfarbe, aktiver Tab hebt sich ab */
.settings-nav-icon { display: inline-flex; color: var(--muted); transition: color .2s; }
.settings-nav-item:hover .settings-nav-icon { color: var(--text); }
-.settings-nav-item.active .settings-nav-icon { color: var(--neon); }
+.settings-nav-item.active .settings-nav-icon { color: var(--accent-hi); }
-/* Kachel-Icons auf der Startseite */
-.home-tile-icon { color: var(--neon); display: inline-flex; }
-.home-tile:hover .home-tile-icon { color: var(--neon2); }
-.home-tile-emoji { font-size: 1.6rem; line-height: 1; }
+/* Dienst-Kacheln tragen ein Emoji statt eines Lucide-Symbols */
+.home-tile-emoji { font-size: 1.15rem; line-height: 1; }
.home-tile-ext { color: var(--muted2); }
/* Server-Status: Punkt statt Emoji */
@@ -2500,7 +2623,7 @@ button.with-icon, a.with-icon { justify-content: center; }
width: 8px; height: 8px; border-radius: 50%;
background: var(--muted2); display: inline-block; flex-shrink: 0;
}
-.srv-status.on .srv-dot { background: var(--success); box-shadow: 0 0 8px #00ff8866; }
+.srv-status.on .srv-dot { background: var(--success); box-shadow: 0 0 8px #3ba55d66; }
.srv-status.off .srv-dot { background: #f23f43; box-shadow: 0 0 8px #f23f4366; }
.srv-status { display: inline-flex; align-items: center; gap: .4rem; }
.srv-map, .srv-ping { display: inline-flex; align-items: center; gap: .3rem; }
@@ -2520,75 +2643,203 @@ button.with-icon, a.with-icon { justify-content: center; }
}
/* ── BOT-PRODUKTSEITE ──────────────────────────────── */
-/* Gleiche Marke, aber Orange als Leitfarbe — beim Domainwechsel sofort erkennbar */
-.site-bot {
- --neon: #ff4d00;
- --neon2: #f5c518;
- --border: rgba(255, 77, 0, 0.15);
-}
-.site-bot .page-bg-text { color: rgba(255, 77, 0, .045); }
-.site-bot .page-header-grid {
- background-image:
- linear-gradient(rgba(255, 77, 0, .12) 1px, transparent 1px),
- linear-gradient(90deg, rgba(255, 77, 0, .12) 1px, transparent 1px);
-}
-.site-bot .particle { background: #ff4d00; }
-.bot-hero { min-height: 460px; }
+/* Beide Auftritte teilen sich jetzt dieselbe Palette — die frühere
+ Farbumkehr für .site-bot entfällt. */
/* Funktionsliste der Produktseite */
-.feature-group { margin-bottom: 2.6rem; }
+.feature-group { margin-bottom: 2.8rem; }
.feature-grid {
- display: grid; gap: .8rem;
- grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
- margin-top: 1.1rem;
+ display: grid; gap: 1rem;
+ grid-template-columns: repeat(3, 1fr);
+ margin-top: 1.2rem;
}
.feature-card {
- display: flex; gap: .9rem; align-items: flex-start;
- padding: 1.1rem 1.2rem;
- transition: border-color .2s, transform .2s;
+ --bv: 12px;
+ display: flex; flex-direction: column; gap: .4rem;
+ padding: 1.2rem 1.3rem;
}
-.feature-card:hover { border-color: var(--neon); transform: translateY(-2px); }
+.feature-head { display: flex; align-items: center; gap: .65rem; }
.feature-icon {
- flex: none; display: inline-flex;
- color: var(--neon); margin-top: .15rem;
+ --bv: 6px;
+ flex: none; display: inline-grid; place-items: center;
+ width: 32px; height: 32px;
+ background: rgba(255, 154, 31, .1);
+ border: 1px solid rgba(255, 154, 31, .3);
+ color: var(--accent-hi);
}
.feature-name {
- display: block;
- font-family: var(--display); font-size: 1.1rem;
- letter-spacing: .04em; color: var(--text);
- margin-bottom: .3rem;
+ font-weight: 600; font-size: .98rem;
+ color: var(--text);
}
.feature-desc {
- color: var(--muted); font-weight: 300;
- font-size: .92rem; line-height: 1.5; margin: 0;
+ color: var(--muted);
+ font-size: .85rem; line-height: 1.55; margin: 0;
}
.feature-outro {
border-top: 1px solid var(--border);
padding-top: 1.8rem; margin-top: .5rem;
}
.feature-outro p {
- color: var(--muted); font-weight: 300;
+ color: var(--muted);
line-height: 1.7; max-width: 46rem; margin: 0 0 1.4rem;
}
+@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 620px) { .feature-grid { grid-template-columns: 1fr; } }
/* Befehlsliste */
-.cmd-list { display: flex; flex-direction: column; gap: .5rem; }
+.cmd-list { display: flex; flex-direction: column; gap: .55rem; }
.cmd-row {
+ --bv: 10px;
display: flex; gap: 1.2rem; align-items: baseline; flex-wrap: wrap;
- background: var(--bg2); border: 1px solid rgba(255, 255, 255, .06);
- border-radius: 10px; padding: .7rem 1rem;
+ background: var(--bg2); border: 1px solid var(--border);
+ padding: .75rem 1.1rem;
transition: border-color .2s, background .2s;
}
-.cmd-row:hover { border-color: var(--border); background: var(--bg3); }
+.cmd-row:hover { border-color: rgba(255, 154, 31, .5); background: var(--bg3); }
.cmd-name {
- font-family: var(--mono); font-size: .82rem; color: var(--neon);
- white-space: nowrap; flex: none; min-width: 15rem;
+ font-family: var(--mono); font-size: .82rem; color: var(--accent-hi);
+ white-space: nowrap; flex: none; min-width: 16rem;
}
-.cmd-desc { color: var(--muted); font-weight: 300; flex: 1; min-width: 15rem; }
+.cmd-desc { color: var(--muted); font-size: .92rem; flex: 1; min-width: 15rem; }
@media (max-width: 640px) {
.cmd-name { min-width: 0; }
}
+/* ── HERO (Landing + Hub-Start) ────────────────────── */
+.hero {
+ max-width: 1160px; width: 100%; margin: 0 auto;
+ padding: 5rem 2.5rem 4rem;
+ display: grid; gap: 3rem; align-items: center;
+}
+.hero-bot { grid-template-columns: 1.15fr .85fr; }
+.hero-hub { grid-template-columns: 1fr auto; padding: 4.5rem 2.5rem 3.5rem; }
+.hero-text { animation: riseIn .5s ease both; }
+.hero-title {
+ font-family: var(--display);
+ font-size: clamp(2.6rem, 6.5vw, 4.1rem);
+ font-weight: 700; line-height: 1.02; letter-spacing: -.01em;
+ text-transform: uppercase;
+ margin: 1.2rem 0 1rem;
+}
+.hero-sub {
+ font-size: 1.05rem; color: var(--muted);
+ max-width: 520px; line-height: 1.65;
+}
+
+/* Rechte Seite der Produktseite: Karte mit Logo, Zustand und Zahlen.
+ Der versetzte Rahmen liegt als eigenes Element dahinter — als Pseudo am
+ Panel würde ihn dessen Abschrägung wegschneiden. */
+.hero-card { position: relative; animation: riseIn .5s ease .1s both; }
+.hero-frame {
+ --bv: 24px;
+ position: absolute; inset: -1.2rem;
+ border: 1px solid rgba(255, 255, 255, .09);
+ pointer-events: none;
+}
+.hero-panel {
+ --bv: 18px;
+ position: relative;
+ background: var(--bg2);
+ border: 1px solid rgba(255, 255, 255, .1);
+ padding: 1.4rem;
+}
+.hero-lockup {
+ display: flex; justify-content: center;
+ padding: .4rem 0 1.1rem;
+ border-bottom: 1px solid rgba(255, 255, 255, .07);
+}
+.hero-lockup img {
+ width: 200px; height: auto; object-fit: contain;
+ filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .5));
+}
+.hero-state {
+ display: flex; align-items: center; gap: .7rem;
+ padding: 1rem 0 .9rem;
+ font-family: var(--mono); font-size: .66rem;
+ letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
+}
+.hero-dot {
+ width: 8px; height: 8px; border-radius: 50%; flex: none;
+ background: var(--success);
+ box-shadow: 0 0 10px rgba(59, 165, 93, .7);
+}
+.hero-dot.aus { background: var(--danger); box-shadow: 0 0 10px rgba(242, 63, 67, .7); }
+.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
+.hero-stat {
+ --bv: 8px;
+ background: rgba(255, 154, 31, .06);
+ border: 1px solid rgba(255, 154, 31, .22);
+ padding: .8rem .9rem;
+}
+.hero-stat-n {
+ display: block;
+ font-size: 1.7rem; font-weight: 700; line-height: 1.1;
+ background: var(--grad);
+ -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+.hero-stat-label {
+ display: block; margin-top: .25rem;
+ font-family: var(--mono); font-size: .6rem;
+ letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
+}
+
+/* Hub-Start: Zahlenreihe unter den Knöpfen, Logo daneben */
+.hero-figures { display: flex; gap: 2.2rem; flex-wrap: wrap; margin-top: 2.4rem; }
+.hero-figure-n {
+ display: block;
+ font-size: 1.9rem; font-weight: 700; line-height: 1.1;
+ background: var(--grad);
+ -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+/* Der Nenner darf den Verlauf nicht erben, sonst verschwindet er */
+.hero-figure-n .hero-figure-of {
+ font-size: 1.1rem; color: var(--muted2);
+ -webkit-text-fill-color: var(--muted2);
+}
+.hero-figure-label {
+ display: block; margin-top: .25rem;
+ font-family: var(--mono); font-size: .6rem;
+ letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
+}
+.hero-logo { animation: riseIn .5s ease .1s both; }
+.hero-logo img {
+ width: 300px; max-width: 100%; height: auto; object-fit: contain;
+ filter: drop-shadow(0 16px 44px rgba(0, 0, 0, .6)) drop-shadow(0 0 40px rgba(240, 120, 0, .15));
+}
+
+/* Zwei Panels unter den Kacheln: neutral und in der Leitfarbe */
+.info-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; }
+.info-panel {
+ --bv: 16px;
+ padding: 1.5rem 1.6rem;
+ background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
+ border: 1px solid rgba(255, 255, 255, .14);
+}
+.info-panel.warm {
+ background: linear-gradient(135deg, rgba(240, 120, 0, .16), rgba(240, 120, 0, .04));
+ border-color: rgba(255, 154, 31, .35);
+}
+.info-panel-tag {
+ font-family: var(--mono); font-size: .62rem;
+ letter-spacing: .2em; text-transform: uppercase; color: var(--text2);
+}
+.info-panel.warm .info-panel-tag { color: var(--accent-hi); }
+.info-panel-title {
+ font-family: var(--display);
+ font-size: 1.2rem; font-weight: 700; margin: .4rem 0;
+}
+.info-panel p { color: var(--muted); font-size: .88rem; line-height: 1.55; margin: 0; }
+
+@media (max-width: 900px) {
+ .hero-bot, .hero-hub { grid-template-columns: 1fr; }
+ .hero-hub .hero-logo { justify-self: center; }
+ .info-panels { grid-template-columns: 1fr; }
+}
+@media (max-width: 640px) {
+ .hero { padding: 3rem 1.25rem 2.5rem; gap: 2rem; }
+ .hero-frame { display: none; }
+}
+
/* ── MODUL-KARTEN ──────────────────────────────────── */
.mod-grid {
display: grid; gap: .9rem;
@@ -2605,8 +2856,8 @@ button.with-icon, a.with-icon { justify-content: center; }
padding: .35rem .8rem; cursor: pointer;
transition: color .15s, border-color .15s, background .15s;
}
-.mod-filter:hover:not(:disabled) { color: var(--text); border-color: var(--neon); }
-.mod-filter.active { color: #0a0a0a; background: var(--neon); border-color: var(--neon); }
+.mod-filter:hover:not(:disabled) { color: var(--text); border-color: var(--accent-hi); }
+.mod-filter.active { color: #131316; background: var(--accent-hi); border-color: var(--accent-hi); }
.mod-filter:disabled { opacity: .3; cursor: default; }
.mod-filter-n {
font-size: .58rem; opacity: .7;
@@ -2619,17 +2870,18 @@ button.with-icon, a.with-icon { justify-content: center; }
transition: opacity .2s, border-color .2s, transform .2s;
}
.mod-card.on { opacity: 1; }
-.mod-card:hover { border-color: var(--neon); transform: translateY(-2px); }
+.mod-card:hover { border-color: var(--accent-hi); transform: translateY(-2px); }
.mod-head { display: flex; align-items: flex-start; gap: .8rem; }
/* Symbol-Kachel wie auf der Funktionsseite — macht die Karten unterscheidbar */
.mod-icon {
+ --bv: 7px;
flex: none; display: inline-flex; align-items: center; justify-content: center;
- width: 2.4rem; height: 2.4rem; border-radius: 9px;
+ width: 2.4rem; height: 2.4rem;
background: var(--bg3); border: 1px solid var(--border);
color: var(--muted2);
transition: color .2s, border-color .2s;
}
-.mod-card.on .mod-icon { color: var(--neon); border-color: rgba(245, 197, 24, .3); }
+.mod-card.on .mod-icon { color: var(--accent-hi); border-color: rgba(255, 154, 31, .3); }
.mod-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.mod-name {
font-family: var(--display); font-size: 1.15rem;
@@ -2639,7 +2891,7 @@ button.with-icon, a.with-icon { justify-content: center; }
font-family: var(--mono); font-size: .55rem;
letter-spacing: .16em; text-transform: uppercase; color: var(--muted2);
}
-.mod-desc { color: var(--muted); font-weight: 300; font-size: .93rem; line-height: 1.45; flex: 1; }
+.mod-desc { color: var(--muted); font-weight: 400; font-size: .93rem; line-height: 1.45; flex: 1; }
.mod-foot {
display: flex; align-items: center; justify-content: space-between;
gap: .8rem; flex-wrap: wrap;
@@ -2649,7 +2901,7 @@ button.with-icon, a.with-icon { justify-content: center; }
font-family: var(--mono); font-size: .62rem;
letter-spacing: .1em; text-transform: uppercase;
}
-.mod-missing { color: var(--neon2); }
+.mod-missing { color: var(--accent-lo); }
.mod-ready { color: var(--success); }
.mod-off { color: var(--muted2); }
.mod-link {
@@ -2659,7 +2911,7 @@ button.with-icon, a.with-icon { justify-content: center; }
white-space: nowrap;
transition: color .15s;
}
-.mod-link:hover { color: var(--neon); }
+.mod-link:hover { color: var(--accent-hi); }
/* Schiebeschalter */
.mod-switch {
@@ -2668,14 +2920,14 @@ button.with-icon, a.with-icon { justify-content: center; }
position: relative; cursor: pointer; padding: 0;
transition: background .2s, border-color .2s;
}
-.mod-switch.on { background: var(--neon); border-color: var(--neon); }
+.mod-switch.on { background: var(--accent-hi); border-color: var(--accent-hi); }
.mod-knob {
position: absolute; top: 2px; left: 2px;
width: 18px; height: 18px; border-radius: 50%;
background: var(--muted2); transition: transform .2s, background .2s;
}
-.mod-switch.on .mod-knob { transform: translateX(18px); background: #0a0a0a; }
-.mod-switch:hover { border-color: var(--neon); }
+.mod-switch.on .mod-knob { transform: translateX(18px); background: #131316; }
+.mod-switch:hover { border-color: var(--accent-hi); }
/* ── TEXT-VORLAGEN ─────────────────────────────────── */
/* Vorlagen als Liste zum Aufklappen — 27 offene Felder auf einmal erschlagen.
@@ -2683,12 +2935,12 @@ button.with-icon, a.with-icon { justify-content: center; }
.tpl-list {
display: flex; flex-direction: column;
border: 1px solid rgba(255, 255, 255, .06);
- border-radius: 10px; overflow: hidden;
+ border-radius: 0; overflow: hidden;
}
.tpl-row { border-bottom: 1px solid rgba(255, 255, 255, .06); }
.tpl-row:last-child { border-bottom: 0; }
.tpl-row.open { background: rgba(255, 255, 255, .015); }
-.tpl-row.dirty { box-shadow: inset 2px 0 0 var(--neon); }
+.tpl-row.dirty { box-shadow: inset 2px 0 0 var(--accent-hi); }
.tpl-head {
display: flex; align-items: center; gap: .7rem;
@@ -2717,7 +2969,7 @@ button.with-icon, a.with-icon { justify-content: center; }
}
.tpl-row.open .tpl-peek { opacity: 0; }
.tpl-caret { color: var(--muted2); flex: none; transition: transform .2s; }
-.tpl-caret.up { transform: rotate(180deg); color: var(--neon); }
+.tpl-caret.up { transform: rotate(180deg); color: var(--accent-hi); }
.tpl-body {
display: flex; flex-direction: column; gap: .7rem;
@@ -2732,27 +2984,27 @@ button.with-icon, a.with-icon { justify-content: center; }
.tpl-badge {
font-family: var(--mono); font-size: .55rem;
letter-spacing: .12em; text-transform: uppercase;
- color: var(--neon); border: 1px solid var(--neon);
- border-radius: 4px; padding: .1rem .4rem;
+ color: var(--accent-hi); border: 1px solid var(--accent-hi);
+ border-radius: 0; padding: .1rem .4rem;
}
.tpl-badge.muted { color: var(--muted2); border-color: var(--border); }
.tpl-input {
width: 100%; max-width: 62rem; resize: vertical;
font-family: var(--mono); font-size: .84rem; line-height: 1.6;
- color: var(--text); background: #0d0d0d;
- border: 1px solid var(--border); border-radius: 5px;
+ color: var(--text); background: #131316;
+ border: 1px solid var(--border); border-radius: 0;
padding: .7rem .8rem;
}
-.tpl-input:focus { outline: none; border-color: var(--neon); }
+.tpl-input:focus { outline: none; border-color: var(--accent-hi); }
.tpl-vars { display: flex; flex-wrap: wrap; gap: .35rem; }
.tpl-var {
font-family: var(--mono); font-size: .6rem; letter-spacing: .05em;
color: var(--muted); background: var(--bg3);
- border: 1px solid var(--border); border-radius: 4px;
+ border: 1px solid var(--border); border-radius: 0;
padding: .18rem .45rem; cursor: pointer;
transition: color .15s, border-color .15s;
}
-.tpl-var:hover { color: var(--neon); border-color: var(--neon); }
+.tpl-var:hover { color: var(--accent-hi); border-color: var(--accent-hi); }
.tpl-actions { display: flex; gap: .5rem; align-items: center; }
.tpl-actions .btn { font-size: .6rem; padding: .4rem .9rem; }
@@ -2773,8 +3025,8 @@ button.with-icon, a.with-icon { justify-content: center; }
padding: .35rem .8rem; cursor: pointer;
transition: color .15s, border-color .15s, background .15s;
}
-.dl-filter:hover { color: var(--text); border-color: var(--neon); }
-.dl-filter.active { color: #0a0a0a; background: var(--neon); border-color: var(--neon); }
+.dl-filter:hover { color: var(--text); border-color: var(--accent-hi); }
+.dl-filter.active { color: #131316; background: var(--accent-hi); border-color: var(--accent-hi); }
.dl-filter-n {
font-size: .58rem; opacity: .7;
padding-left: .35rem; border-left: 1px solid currentColor;
@@ -2787,7 +3039,7 @@ button.with-icon, a.with-icon { justify-content: center; }
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: .6rem;
padding: 3.5rem 1.5rem;
- border: 1px dashed var(--border); border-radius: 14px;
+ border: 1px dashed var(--border); border-radius: 0;
background: rgba(255, 255, 255, .012);
}
.empty-icon {
@@ -2802,7 +3054,7 @@ button.with-icon, a.with-icon { justify-content: center; }
letter-spacing: .04em; color: var(--text); margin: 0;
}
.empty-text {
- color: var(--muted); font-weight: 300;
+ color: var(--muted); font-weight: 400;
line-height: 1.6; max-width: 34rem; margin: 0;
}
.empty-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: .8rem; }
@@ -2816,16 +3068,16 @@ button.with-icon, a.with-icon { justify-content: center; }
width: fit-content; max-width: 100%;
margin: -3.5rem auto 0;
padding: .7rem .9rem .7rem 1.3rem;
- background: rgba(18, 18, 18, .96);
- border: 1px solid var(--neon);
+ background: rgba(27, 27, 32, .96);
+ border: 1px solid var(--accent-hi);
border-radius: 99px;
- box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 20px rgba(245, 197, 24, .12);
+ box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 20px rgba(255, 154, 31, .12);
animation: riseIn .25s ease both;
}
.save-bar-text {
font-family: var(--mono); font-size: .68rem;
letter-spacing: .12em; text-transform: uppercase;
- color: var(--neon); white-space: nowrap;
+ color: var(--accent-hi); white-space: nowrap;
}
.save-bar .btn { padding: .45rem 1.1rem; font-size: .62rem; }
@media (max-width: 640px) {
@@ -2842,7 +3094,7 @@ button.with-icon, a.with-icon { justify-content: center; }
color: var(--muted); cursor: pointer;
transition: color .2s, border-color .2s, opacity .25s, transform .25s;
}
-.to-top:hover { color: var(--neon); border-color: var(--neon); }
+.to-top:hover { color: var(--accent-hi); border-color: var(--accent-hi); }
@media (max-width: 640px) {
.to-top { right: 1rem; bottom: 1rem; }
}
@@ -2851,7 +3103,7 @@ button.with-icon, a.with-icon { justify-content: center; }
.tune-list {
display: flex; flex-direction: column;
border: 1px solid rgba(255, 255, 255, .06);
- border-radius: 10px; overflow: hidden;
+ border-radius: 0; overflow: hidden;
}
.tune-row {
display: flex; align-items: center; gap: 1.5rem;
@@ -2860,23 +3112,23 @@ button.with-icon, a.with-icon { justify-content: center; }
border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.tune-row:last-child { border-bottom: 0; }
-.tune-row.dirty { box-shadow: inset 2px 0 0 var(--neon); }
+.tune-row.dirty { box-shadow: inset 2px 0 0 var(--accent-hi); }
.tune-label { display: flex; flex-direction: column; gap: .15rem; min-width: 14rem; flex: 1; }
.tune-name {
display: flex; align-items: center; gap: .5rem;
color: var(--text); font-size: .95rem;
}
-.tune-hint { color: var(--muted2); font-weight: 300; font-size: .82rem; line-height: 1.4; }
+.tune-hint { color: var(--muted2); font-weight: 400; font-size: .82rem; line-height: 1.4; }
.tune-input { display: flex; align-items: center; gap: .6rem; flex: none; }
.tune-input input, .tune-input select {
width: 6rem; text-align: right;
font-family: var(--mono); font-size: .85rem;
- color: var(--text); background: #0d0d0d;
- border: 1px solid var(--border); border-radius: 5px;
+ color: var(--text); background: #131316;
+ border: 1px solid var(--border); border-radius: 0;
padding: .4rem .55rem;
}
.tune-input select { text-align: left; }
-.tune-input input:focus, .tune-input select:focus { outline: none; border-color: var(--neon); }
+.tune-input input:focus, .tune-input select:focus { outline: none; border-color: var(--accent-hi); }
.tune-unit {
font-family: var(--mono); font-size: .64rem;
letter-spacing: .12em; text-transform: uppercase;
@@ -2893,8 +3145,8 @@ button.with-icon, a.with-icon { justify-content: center; }
}
/* Schloss am Servernamen + der Grund als Chip */
-.srv-schloss { color: var(--neon); margin-left: .45rem; vertical-align: -2px; }
-.srv-chip.zu { color: var(--neon); border-color: rgba(245, 197, 24, .35); }
+.srv-schloss { color: var(--accent-hi); margin-left: .45rem; vertical-align: -2px; }
+.srv-chip.zu { color: var(--accent-hi); border-color: rgba(255, 154, 31, .35); }
/* Wie der Server sich im Spiel nennt — leiser als der eigene Name */
.srv-spielname {
font-family: var(--mono); font-size: .68rem; color: var(--muted2);
@@ -2911,14 +3163,14 @@ button.with-icon, a.with-icon { justify-content: center; }
font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
text-transform: uppercase; color: var(--muted);
}
-.mod-count strong { color: var(--neon); font-size: 1rem; font-weight: 400; }
+.mod-count strong { color: var(--accent-hi); font-size: 1rem; font-weight: 400; }
.mod-sum { color: var(--muted2); }
.mod-search {
display: flex; align-items: center; gap: .5rem; flex: 1 1 240px; max-width: 340px;
border: 1px solid var(--border); background: var(--bg2); padding: .45rem .75rem;
color: var(--muted);
}
-.mod-search:focus-within { border-color: var(--neon); }
+.mod-search:focus-within { border-color: var(--accent-hi); }
.mod-search input {
flex: 1; min-width: 0; background: none; border: 0; outline: none;
color: var(--text); font-family: var(--body); font-size: 1rem;
@@ -2930,7 +3182,7 @@ button.with-icon, a.with-icon { justify-content: center; }
padding: .7rem .9rem; background: var(--bg2);
border-left: 2px solid transparent;
}
-.mod-row:hover { background: var(--bg3); border-left-color: var(--neon); }
+.mod-row:hover { background: var(--bg3); border-left-color: var(--accent-hi); }
.mod-info { min-width: 0; }
.mod-title { display: block; color: var(--text); font-size: 1.05rem; }
.mod-meta {
@@ -2951,7 +3203,7 @@ button.with-icon, a.with-icon { justify-content: center; }
text-transform: uppercase; color: var(--muted); white-space: nowrap;
transition: border-color .15s, color .15s;
}
-.mod-dl:hover { border-color: var(--neon); color: var(--neon); }
+.mod-dl:hover { border-color: var(--accent-hi); color: var(--accent-hi); }
.mod-hint { color: var(--muted2); font-size: .9rem; margin-top: 1.2rem; }
@media (max-width: 640px) {
@@ -2983,7 +3235,7 @@ button.with-icon, a.with-icon { justify-content: center; }
}
.radio-actions { display: flex; gap: .35rem; }
.radio-actions .btn { padding: .3rem .55rem; font-size: .6rem; }
-.radio-row:hover { background: var(--bg3); border-left-color: var(--neon); }
+.radio-row:hover { background: var(--bg3); border-left-color: var(--accent-hi); }
.radio-emoji { font-size: 1.2rem; line-height: 1; }
.radio-info { min-width: 0; }
.radio-name { display: block; color: var(--text); }
diff --git a/src/web/brand.js b/src/web/brand.js
index 3e4b35a..0be4aa2 100644
--- a/src/web/brand.js
+++ b/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);
});
diff --git a/src/web/server.js b/src/web/server.js
index 330c1f5..b1e9c5e 100644
--- a/src/web/server.js
+++ b/src/web/server.js
@@ -196,7 +196,8 @@ export async function startWebServer(client) {
` `,
` `,
` `,
- ` `,
+ // Beide Auftritte teilen sich seit dem Redesign eine Palette
+ ` `,
` `,
` `,
` `,