/* --------------------------------------------------------------------------- Vectral 2.0 — Design-Tokens Marke aus Vectral-Pilot/src/frontend/src/index.css und dem Logo. Farbdisziplin: Navy trägt die Struktur, Violett ist das Aktionssignal, Teal steht für den Optimierungsvorschlag. Violett wird sparsam eingesetzt — aktive Navigation, Primäraktion, Kernaussage. Sonst nichts. --------------------------------------------------------------------------- */ /* Schrift lokal (T29 m, Datenschutz: keine Nachladung von Google Fonts). Variable Font Plus Jakarta Sans (OFL 1.1), Subsets latin/latin-ext/cyrillic-ext/vietnamese, Lizenz in frontend/assets/fonts/LICENSE-PlusJakartaSans.txt. */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../assets/fonts/PlusJakartaSans-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../assets/fonts/PlusJakartaSans-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../assets/fonts/PlusJakartaSans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../assets/fonts/PlusJakartaSans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* --- Marke ------------------------------------------------------------ */ --primary: #6030D8; /* Vectral-Violett — nur Aktionen */ --primary-hover: #4F21B0; --primary-soft: #F3F0FD; --primary-line: #D9CEF8; --primary-light: #8B69F5; /* Hellstes Violett der Bildmarke */ --navy: #16306B; /* Logo-Navy — Struktur, Überschriften */ --navy-2: #24488F; --navy-soft: #EEF2F9; --navy-line: #CBD8EC; --navy-fill: #16306B; /* Füllung aktiver Zustände (weiße Schrift) */ --link: #6030D8; /* Textlinks — im Dunkeln gehoben */ --topbar-bg: rgb(255 255 255 / .9); --ramp-ink-strong: #FFFFFF; /* Schrift auf der dunkelsten Rampenstufe */ /* --- Ruhefeld: große Flächen ------------------------------------------ */ /* Große Flächen vertragen die Markensättigung nicht. Ein linearer Ramp zwischen zwei satten Tönen wird immer laut. Deshalb: ein tiefes, entsättigtes Indigo als Feld, dazu ein diffuser Schein — Violett erscheint als Licht, nie als zweiter harter Farbstopp. */ --field-deep: #131C2E; /* Feldgrund, fast Anthrazit */ --field: #1B2740; --field-2: #253355; --field-bloom: #6B5CE0; /* weiches Indigo-Violett, S .59 statt .78 */ --field-counter: #3E5A9E; /* kühler Gegenschein unten links */ /* Trägt die Kernaussage. Genau einmal pro Bildschirm. */ /* Auftrag 09.09.2026: eine Stufe heller — Feld statt Feldgrund als Ausgang, Gegenschein am Ende, Lichtschein kräftiger; die Schrift bleibt weiß (Kontrast ≥ 7:1 auf #253355). */ --verlauf: radial-gradient(118% 150% at 86% -30%, rgb(107 92 224 / .58), transparent 62%), radial-gradient( 96% 132% at 4% 118%, rgb(62 90 158 / .55), transparent 60%), linear-gradient(162deg, var(--field) 0%, var(--field-2) 55%, #2E4478 100%); /* --- Flächen und Text ------------------------------------------------- */ --bg: #F6F7F9; --bg-top: #FBFBFD; /* oberer Rand des Seitenverlaufs (app.css) */ --surface: #FFFFFF; --surface-2: #F9FAFB; --border: #E4E7EC; --border-strong: #C9CFD9; --ink: #101828; --muted: #667085; --muted-2: #98A2B3; /* --- Sequenzielle Rampe: Bestandsdichte, Pickhäufung, Matrix ---------- */ /* Gleiche Helligkeitsstufen wie zuvor, Sättigung um rund ein Drittel zurückgenommen. Eine Heatmap füllt halbe Bildschirme — dort trägt die Helligkeit die Information, nicht die Buntheit. */ --ramp-1: #EFF1F6; --ramp-2: #D5DBE8; --ramp-3: #A2ADC6; --ramp-4: #64749A; --ramp-5: #33415F; /* --- Szenario-Vergleich ----------------------------------------------- */ --ist: #98A2B3; /* IST — neutral grau */ --ist-soft: #EDEFF3; --vorschlag: #14806F; /* S2 / S3 — Teal, die Verbesserung */ --vorschlag-2: #1A9A85; /* Endstop des Vorschlag-Balkens */ --vorschlag-soft: #E8F3F0; --vorschlag-line: #A5CFC7; /* --- Zustände --------------------------------------------------------- */ --ok: #12855F; --ok-soft: #E7F6EF; --ok-line: #A6E3C8; --warn: #B54708; --warn-soft: #FEF3D6; --warn-line: #F7D08A; --danger: #B42318; --danger-soft: #FEE9E7; --danger-line: #F9B6AF; --warn-fill: #B54708; /* Füllung mit weißer Schrift (Hotspot-Marke) */ --danger-fill: #B42318; /* Füllung mit weißer Schrift (Gefahr-Knopf) */ /* --- Rechenlauf-Konsole — die einzige dunkle Fläche ------------------- */ /* Dunkel, weil dort Maschinenausgabe steht und keine Analyse. */ --log-bg: #0B1220; --log-line: #1B2740; --log-text: #C4CBD8; --log-dim: #5A6785; /* Zeitstempel */ --log-ok: #34D399; /* Erfolg auf Dunkel — nicht --ok */ --log-phase: #93B4F5; /* Phasenmarke — Navy, auf Dunkel gehoben */ /* --- Form ------------------------------------------------------------- */ /* Weichere Kanten und tragende Schatten: Karten liegen als Papier auf */ /* dem Grund, statt nur von einer Haarlinie begrenzt zu werden. */ --radius: 14px; --radius-sm: 10px; --radius-lg: 18px; --radius-xl: 22px; --radius-pill: 999px; /* Schatten heben an, statt zu dramatisieren: kurzer Kontaktschatten plus ein weiter, sehr flacher Abwurf. Neutral getönt, nicht blau. */ --shadow-xs: 0 1px 2px 0 rgb(16 24 40 / .04); --shadow-card: 0 1px 2px 0 rgb(16 24 40 / .04), 0 8px 24px -16px rgb(16 24 40 / .16); --shadow-lift: 0 2px 4px -1px rgb(16 24 40 / .05), 0 14px 34px -18px rgb(16 24 40 / .22); --shadow-pop: 0 10px 24px -10px rgb(16 24 40 / .16), 0 2px 6px -2px rgb(16 24 40 / .07); --shadow-hero: 0 20px 48px -26px rgb(19 28 46 / .45); /* --- Bewegung --------------------------------------------------------- */ /* Die eingebauten CSS-Kurven sind zu schwach. Ein-/Austritt und Feedback laufen über ein kräftiges ease-out: Bewegung sofort, dann sanft ausklingend. ease-in-out nur für Dinge, die auf dem Bildschirm bleiben und sich bewegen. Nichts über 300 ms. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --dur-press: 140ms; /* Tastendruck */ --dur-hover: 160ms; /* Hover, Farbwechsel */ --dur-enter: 220ms; /* Panels, Karten, Protokollzeilen */ /* --- Raster ----------------------------------------------------------- */ --container: 1320px; --gutter: 28px; --topbar-h: 66px; /* --- Typografie ------------------------------------------------------- */ --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; } /* --------------------------------------------------------------------------- Dunkle Darstellung (Auftrag 09.09.2026, Register T29 i; Farbwerte nach den Moodboards „Farbdisziplin“ und „Ruhefeld“ vom 09.09.2026, O32). Die Ruhefeld- Familie, die im Hellen nur die Kopfzone trägt, wird im Dunkeln zur Fläche: Feldgrund als Seitengrund, Feld als Karte, Feld-2 als zweite Ebene, der kühle Gegenschein als Rand und Füllung aktiver Zustände. Marke bleibt: Violett ist das Aktionssignal, Teal die Verbesserung; Text- und Zustandsfarben sind eine Stufe heller, damit sie auf dem Feld lesbar bleiben (Kontrast ≥ 4,5:1 für Text). Navy wird im Dunkeln zur hellen Strukturfarbe, aktive Füllungen nutzen --navy-fill (kühler Gegenschein). Die Rechenlauf-Konsole bleibt in beiden Darstellungen die dunkelste Fläche. --------------------------------------------------------------------------- */ :root[data-theme="dunkel"] { color-scheme: dark; /* Marke auf Dunkel */ --primary-hover: #6B5CE0; /* Bloom — im Dunkeln hellt Hover auf */ --primary-soft: #231D47; --primary-line: #4B3F8F; --navy: #B9C8EA; /* Struktur, Überschriften — gehoben */ --navy-2: #8FA8D8; --navy-soft: #1F2C4A; --navy-line: #3E5A9E; --navy-fill: #3E5A9E; /* kühler Gegenschein als aktive Füllung */ --link: #A793FF; /* auf --surface 6,0:1 */ --topbar-bg: rgb(27 39 64 / .92); --ramp-ink-strong: #101828; /* Rampe endet hell — Schrift dunkel */ /* Flächen und Text — Ruhefeld-Familie */ --bg: #0E1524; /* eine Stufe unter dem Feldgrund */ --bg-top: #0E1524; --surface: #1B2740; /* --field: Karte */ --surface-2: #253355; /* --field-2: zweite Ebene */ --border: #2C3B5F; --border-strong: #3E5A9E; --ink: #EEF1F7; --muted: #A9B4C9; --muted-2: #8A97B3; /* Rampe: Helligkeit trägt — im Dunkeln steigt sie von der Fläche weg */ --ramp-1: #22304F; --ramp-2: #33415F; --ramp-3: #64749A; --ramp-4: #A2ADC6; --ramp-5: #D5DBE8; /* Szenario-Vergleich */ --ist: #98A2B3; --ist-soft: #253355; --vorschlag: #34B39A; /* Teal, gehoben */ --vorschlag-2: #4CC9B0; --vorschlag-soft: #15332F; --vorschlag-line: #22665A; /* Zustände, gehoben */ --ok: #3FBF86; --ok-soft: #12301F; --ok-line: #1E6A46; --warn: #E9A24E; --warn-soft: #3A2A10; --warn-line: #8A5A14; --danger: #F08078; --danger-soft: #3B1B18; --danger-line: #8A3128; --warn-fill: #C2661A; /* weiß darauf 4,6:1 */ --danger-fill: #D9453A; /* weiß darauf 4,7:1 */ /* Schatten auf Dunkel */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .35); --shadow-card: 0 1px 2px 0 rgb(0 0 0 / .35), 0 8px 24px -16px rgb(0 0 0 / .6); --shadow-lift: 0 2px 4px -1px rgb(0 0 0 / .4), 0 14px 34px -18px rgb(0 0 0 / .7); --shadow-pop: 0 10px 24px -10px rgb(0 0 0 / .6), 0 2px 6px -2px rgb(0 0 0 / .4); --shadow-hero: 0 20px 48px -26px rgb(0 0 0 / .8); } :root[data-theme="dunkel"] body { background: var(--bg); }