/* marke.css — Die Werte der Marke Agents4Hire. EINE Datei, eine Quelle. Kurzbeschreibung (für Laien): Hier stehen die Farben, die Schrift, die Rundungen und Schatten der Marke — einmal, an genau einer Stelle. Alles, was gestaltet wird (Workspace, Website, Folien, Videos, Flyer, PDFs), holt sich die Werte von hier. Ändert sich hier eine Farbe, ändert sie sich überall, wo sauber angeschlossen ist. Zum Anschauen und Ablegen: Ordner `marke/` im Projekt (dort liegt diese Datei als Verknüpfung). Regeln in Worten: marke/REGELN.md. Für Videos, Folien, PDFs und Bilder gibt es dieselben Werte als marke/marke.json — erzeugt aus dieser Datei (`node tools/marke-pruefen.js --json`), nie von Hand pflegen. Einbinden: kommt automatisch mit brand.css. Seiten ohne brand.css: Namen: alles beginnt mit --marke-, damit nichts mit den Alt-Namen der Seiten (--accent, --bg, --text …) kollidiert. Alt-Seiten werden schrittweise umgestellt (`--accent: var(--marke-akzent)`), neue Seiten benutzen die --marke-Namen direkt (Vorlagen in marke/vorlagen/). Hell ist der Auslieferungszustand (Ralph, 19.09.2026). Dunkel nur, wenn der Nutzer es wählt: (setzt theme-bridge.js). */ @import url('/assets/fonts/inter.css'); :root { /* ── Markenfarben (fest, unabhängig vom Theme) ─────────────────────────── */ /* Markenfarbe: Lila. Am 09.10.2026 war „Grafit + Logo" gewählt, am 10.10.2026 zurückgestellt (Ralph: „nicht Farbe, sondern Buttons allgemein") — Grafit bleibt als Wert stehen, ist aber nicht der Akzent. */ --marke-grafit: #14141d; --marke-lila: #6c63ff; /* die Markenfarbe der Oberfläche */ --marke-lila-tief: #5b54e8; /* Lila auf hellem Grund: weiße Schrift 5,4:1 */ --marke-tuerkis: #4ecdc4; /* Zweitfarbe */ --marke-tuerkis-tief: #2eb4ac; /* Zweitfarbe auf hellem Grund */ /* Die Farben des Logos (gemessen an den Logo-Dateien, 09.10.2026). Das Logo selbst wird nie nachgezeichnet — nur für Elemente, die zum Logo passen müssen (Titelfolie, Abspann, Kopf eines Dokuments). */ --marke-logo-petrol: #006c5e; /* oben, Logo auf hellem Grund */ --marke-logo-mitte: #0372a0; --marke-logo-blau: #5d79e2; /* unten, in beiden Logo-Fassungen */ --marke-logo-tuerkis: #19e7da; /* oben, Logo auf dunklem Grund */ /* Navigation (BRANDING.md §2c, Ralph 01.10.2026) */ --marke-nav-blau: #0f5bab; --marke-nav-kachel: #e3edf8; --marke-customized: #0f766e; /* Petrol für „Customized“ */ --marke-customized-kachel: #dcf2ee; /* Verläufe: nur Schmuck (Überschrift, Titelfolie, Werbung) — nie in Knöpfen von Werkzeugen (BRANDING.md §6). */ --marke-verlauf: linear-gradient(135deg, #4ecdc4 0%, #6c63ff 100%); --marke-verlauf-logo: linear-gradient(180deg, #006c5e 0%, #0372a0 50%, #5d79e2 100%); /* Aufnahme: „läuft" ist überall dasselbe Rot (Punkt, Pegel, REC, Stopp) – das Rot des Widgets (Ralph 09.10.2026). Neon-Gelb nur für die Prozess-Aufnahme (Countdown, Ring an der Klickstelle) – sichtbar auf jedem Untergrund. */ --marke-aufnahme: #e53e3e; --marke-ladekreis: #5b54e8; /* lila Ring (Ralph 09.10.2026, bewusst lila) */ --marke-neon: #eaff00; /* Auswahl im Rechtsklick-Menü der Reiter (BRANDING.md §5) */ --marke-reiter-lila: #6c63ff; --marke-reiter-tuerkis: #4ecdc4; --marke-reiter-gruen: #3ecf8e; --marke-reiter-gelb: #f0a500; --marke-reiter-rot: #e5484d; --marke-reiter-rose: #e879a0; --marke-reiter-violett: #8b5cf6; --marke-reiter-grau: #64748b; /* ── Kopffarben der fünf Menükarten (Ralph 07.11.2026: einheitlich auf allen Servern; Cockpit behält seine Farbe). Gleichstand mit dem AIOS prüft tools/bento-kartenfarben.js. Im Dunkelmodus gelten dieselben Werte. ── */ /* gedämpfte Reihe A (Ralph 08.11.2026), Weiß darauf überall mind. 6:1 */ --marke-karte-persoenlich: #336a71; /* „Mein Bereich“ */ --marke-karte-cockpit: #825440; /* Kupfer (Ralph 08.11.2026), Weiß darauf ~5,1:1 */ --marke-karte-arbeit: #39577f; /* Arbeit (im AIOS „Workspace“) */ --marke-karte-workflows: #3b684f; --marke-karte-werkzeuge: #5f5a7c; /* Schiefer mit einem Hauch Violett (Ralph 08.11.2026), Weiß darauf 5,1:1 */ /* ── Schrift (BRANDING.md §19a) — Inter, lokal, keine zweite Schrift ──── */ --marke-schrift: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --marke-schrift-code: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* ── Formen (BRANDING.md §13) ─────────────────────────────────────────── */ --marke-r-s: 6px; /* Kleinteile innerhalb eines Elements */ --marke-r-m: 9px; /* Knöpfe, Felder */ --marke-r-l: 12px; /* Karten, Panels, Modals */ --marke-r-pill: 999px; /* Pillen, Filter-Chips */ --marke-sp-1: 4px; --marke-sp-2: 8px; --marke-sp-3: 12px; --marke-sp-4: 16px; --marke-sp-5: 24px; --marke-schatten: 0 12px 30px rgba(15, 23, 42, .18); /* Hover-Karte, Modal */ --marke-schatten-leise: 0 1px 3px rgba(15, 23, 42, .08); --marke-abdunklung: transparent; /* Dialog: Hintergrund bleibt sichtbar (Ralph 09.10.2026) */ --marke-seitenleiste: 220px; /* Breite, Workspace und AIOS gleich */ /* ── Theme HELL (Standard) ─────────────────────────────────────────────── */ --marke-grund: #f5f5fa; /* Seitenhintergrund */ --marke-flaeche: #ffffff; /* Arbeitsfläche, Karten */ --marke-flaeche-2: #f0f0f7; /* abgesetzte Fläche (Probe, Kopf) */ --marke-feld: rgba(15, 15, 30, .04); /* Füllung von Such- und Eingabefeldern */ --marke-text: #14141d; --marke-text-2: rgba(20, 20, 29, .66); /* Sublines */ --marke-text-3: rgba(20, 20, 29, .45); /* Etiketten, Platzhalter */ --marke-linie: rgba(15, 15, 30, .10); --marke-linie-stark: rgba(15, 15, 30, .18); --marke-akzent: #5b54e8; /* Knöpfe, aktiver Reiter, Fokus — Lila (Grafit zurückgestellt 10.10.2026) */ --marke-akzent-zart: rgba(108, 99, 255, .08); --marke-zweit: #2eb4ac; --marke-ok: #059669; --marke-warn: #d97706; --marke-gefahr: #dc2626; --marke-auf-akzent: #ffffff; /* Schrift auf Akzent-Fläche */ } /* ── Anschluss: ───────────────────────────────────────── Die Bausteine in brand.css lesen noch die alten Namen der Seiten (--text, --accent, --surface …). Eine Seite mit class="marke" am bekommt sie hier aus der Marke – hell wie dunkel, ohne eigene Farbliste. So entstehen neue Seiten (marke/vorlagen/), und so wird eine alte umgestellt: Klasse setzen, eigene :root-Farbliste löschen. Ohne die Klasse ändert sich nichts. */ :root.marke { --bg: var(--marke-grund); --surface: var(--marke-flaeche); --surface-solid: var(--marke-flaeche); --panel: var(--marke-flaeche); --surface-sunken: var(--marke-flaeche-2); --input-bg: var(--marke-feld); --text: var(--marke-text); --text2: var(--marke-text-2); --text-muted: var(--marke-text-2); --muted: var(--marke-text-2); --text3: var(--marke-text-3); --text-faint: var(--marke-text-3); --border: var(--marke-linie); --border-subtle: var(--marke-linie); --line: var(--marke-linie); --border-strong: var(--marke-linie-stark); --accent: var(--marke-akzent); --brand: var(--marke-akzent); --accent-weak: var(--marke-akzent-zart); --accent2: var(--marke-zweit); --ok: var(--marke-ok); --warn: var(--marke-warn); --danger: var(--marke-gefahr); --err: var(--marke-gefahr); --red: var(--marke-gefahr); --badge-bg: var(--marke-akzent-zart); --badge-text: var(--marke-akzent); color-scheme: light; } :root.marke[data-theme="dark"] { color-scheme: dark; } /* ── Theme DUNKEL (nur auf Nutzerwunsch) ─────────────────────────────────── */ :root[data-theme="dark"] { --marke-grund: #07060c; --marke-flaeche: #13131f; --marke-flaeche-2: #1c1c28; --marke-feld: rgba(255, 255, 255, .04); --marke-text: #eeeef5; --marke-text-2: rgba(238, 238, 245, .62); --marke-text-3: rgba(238, 238, 245, .42); --marke-linie: rgba(255, 255, 255, .10); --marke-linie-stark: rgba(255, 255, 255, .18); --marke-akzent: #6c63ff; --marke-akzent-zart: rgba(108, 99, 255, .12); --marke-zweit: #4ecdc4; --marke-ok: #3ecf8e; --marke-warn: #f0a500; --marke-gefahr: #ef6b6b; --marke-aufnahme: #ef6b6b; }