/* ===================================================================== AURA — Gestaltungsgrundlage Intelligence Commerce · Operation Systems Eine einzige Quelle für Farbe, Schrift, Abstand, Dichte, Erhebung und Bewegung. Jede Ansicht bedient sich hier — dadurch bleibt das System auch nach hundert weiteren Bildschirmen aus einem Guss. Aufbau in fünf Schichten: 1 Grundpaletten rohe Farbwerte, nie direkt verwenden 2 Rollen was die Farbe bedeutet (Fläche, Rand, Text) 3 Maßsystem Schrift, Abstand, Dichte, Rundung 4 Material Licht, Tiefe, Kante, Glas — woraus die Flächen sind 5 Bewegung Dauer und Verlauf ===================================================================== */ :root { /* =================================================================== 1 — GRUNDPALETTEN =================================================================== */ /* Lebenskraft-Grün: Leitfarbe für Handlung und Bestätigung */ --green-25: #f4f9f6; --green-50: #eef5f0; --green-100: #d6e8dd; --green-200: #aed2bd; --green-300: #7fb798; --green-400: #559a77; --green-500: #2f7d4f; --green-600: #276a43; --green-700: #1f5636; --green-800: #17402a; --green-900: #102c1d; --green-950: #0a1c12; /* Gold: Wert, Marge, Hervorhebung — nie für Handlung */ --gold-25: #fdfbf5; --gold-50: #faf6ec; --gold-100: #f2e9d0; --gold-200: #e5d3a3; --gold-300: #d4b96f; --gold-400: #c2a253; --gold-500: #b08a3e; --gold-600: #977332; --gold-700: #7a5c28; --gold-800: #5c451e; /* Neutrale Töne, minimal grünstichig — reines Grau wirkt neben Grün kalt */ --grey-0: #ffffff; --grey-25: #fcfdfc; --grey-50: #f6f8f7; --grey-75: #f1f4f2; --grey-100: #eaeeec; --grey-150: #e0e5e2; --grey-200: #d4dad7; --grey-300: #b9c1bd; --grey-400: #949e99; --grey-500: #717b76; --grey-600: #565f5a; --grey-700: #3f4744; --grey-800: #2a302d; --grey-900: #1a1f1d; --grey-950: #101412; --grey-1000:#080b0a; /* Signalfarben - drei, nicht sechs. 'info' ist weder Warnung noch gute Nachricht, sondern eine Angabe: Grau. 'warn' ist die ruhigere Stufe von Rot und keine eigene Farbe - wer drei Abstufungen zwischen Gelb und Rot auseinanderhalten soll, hält keine davon auseinander. Die Namen bleiben, damit im Programmcode weiter steht, was gemeint ist. */ --info-50: var(--grey-75); --info-100: var(--grey-100); --info-500: var(--grey-500); --info-600: var(--grey-600); --pos-50: #eaf4ee; --pos-100: #d2e9da; --pos-500: #2f7d4f; --pos-600: #276a43; --warn-50: #f9ecea; --warn-100: #f2d6d2; --warn-500: #a8433c; --warn-600: #8f3730; --neg-50: #f9ecea; --neg-100: #f2d6d2; --neg-500: #a8433c; --neg-600: #8f3730; /* Datenreihen: auch bei Farbfehlsichtigkeit unterscheidbar */ --series-1: #2f7d4f; --series-2: #b08a3e; --series-3: #3f7d8f; --series-4: #7fb798; --series-5: #8a6f9e; --series-6: #c2a253; --series-7: #5b8ea6; --series-8: #9e7a6f; /* =================================================================== 2 — ROLLEN (helle Darstellung) =================================================================== */ --bg: var(--grey-50); --bg-sunken: var(--grey-100); --bg-raised: var(--grey-0); --surface: var(--grey-0); --surface-alt: var(--grey-25); --surface-hover: var(--grey-50); --surface-active: var(--grey-75); --surface-sel: var(--green-50); --border: var(--grey-150); --border-soft: var(--grey-100); --border-strong: var(--grey-200); --border-focus: var(--green-500); --text: var(--grey-900); --text-strong: var(--grey-1000); --text-muted: var(--grey-500); --text-subtle: var(--grey-400); --text-invert: var(--grey-0); --text-link: var(--green-600); --accent: var(--green-500); --accent-hover: var(--green-600); --accent-active: var(--green-700); --accent-soft: var(--green-50); --accent-border: var(--green-200); --accent-text: var(--green-700); --gold: var(--grey-500); --gold-soft: var(--grey-75); --gold-border: var(--grey-200); --gold-text: var(--grey-700); /* =================================================================== Drei Farben, mehr nicht Grün heißt: läuft. Rot heißt: jemand muss hinsehen. Grau heißt: eine Angabe ohne Urteil. Sechs Farben nebeneinander sehen nach Sorgfalt aus und sind das Gegenteil - wo alles auffällt, fällt nichts mehr auf. Die Namen der Töne bleiben, damit im Programmcode weiter steht, was gemeint ist (warn, info, gold) und nicht, wie es aussieht. Nur ihr Aussehen läuft hier zusammen. Soll je ein Ton wieder eine eigene Farbe bekommen, ist das diese eine Zeile. green / pos / accent -> Grün red / neg -> Rot, deutlich (Sperre, Problem) amber / warn -> Rot, ruhig (braucht Aufmerksamkeit) blue / info -> Grau gold -> Grau neutral -> Grau Die Diagramme behalten ihre Reihenfarben: drei Grautöne in einem Ring sind keine Zurückhaltung, sondern unlesbar. =================================================================== */ --status-neutral-bg: var(--grey-100); --status-neutral-fg: var(--grey-600); --status-pos-bg: var(--pos-50); --status-pos-fg: var(--pos-600); --status-info-bg: var(--grey-100); --status-info-fg: var(--grey-600); --status-warn-bg: var(--neg-50); --status-warn-fg: var(--neg-500); --status-neg-bg: var(--neg-100); --status-neg-fg: var(--neg-600); --status-gold-bg: var(--grey-100); --status-gold-fg: var(--grey-600); /* Dieselben drei als Flächenfarbe - für Balken, Kacheln, Ränder. */ --signal-pos: var(--pos-500); --signal-warn: var(--neg-500); --signal-neg: var(--neg-600); --signal-quiet: var(--grey-400); /* Die Seitenleiste ist in beiden Erscheinungsbildern dunkel: sie ist der ruhende Pol, an dem sich das Auge orientiert, während der Arbeitsbereich hell oder dunkel sein darf. */ --sidebar-bg: #161c19; --sidebar-bg-deep: #0d1210; --sidebar-text: #b6c3bc; --sidebar-strong: #eef4f1; --sidebar-muted: #6f7d76; --sidebar-hover: rgba(255,255,255,.055); --sidebar-active: var(--green-500); --sidebar-sel-bg: rgba(85,163,119,.15); --sidebar-line: rgba(255,255,255,.06); --sidebar-edge: rgba(0,0,0,.5); --chart-grid: var(--grey-100); --chart-axis: var(--grey-400); /* =================================================================== 3 — MASSSYSTEM =================================================================== */ /* --- Schrift ------------------------------------------------------- Kein Webfont: jede externe Schrift ist ein Ladepunkt, der ausfallen kann, und die Inhaltssicherheitsrichtlinie dieser Anwendung lässt bewusst keine fremden Quellen zu. Stattdessen die beste verfügbare Systemschrift je Plattform — unter Windows die variable Segoe-Familie, die eigens für Bildschirmtext gezeichnet wurde. ------------------------------------------------------------------ */ --font-ui: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", system-ui, Arial, sans-serif; --font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", system-ui, Arial, sans-serif; --font-mono: "Cascadia Mono", "Cascadia Code", "JetBrains Mono", Consolas, "SF Mono", "Menlo", ui-monospace, monospace; /* Zweiter Name für dieselbe Schrift. Telefon-App und Partnerbereich haben --font-sans verlangt, das es nicht gab - der Browser fiel stillschweigend auf seine Serifenschrift zurück, und niemandem fiel es auf, weil kein Fehler erscheint. Mit dem zweiten Namen greift jeder Verweis, auch ein künftiger. */ --font-sans: var(--font-ui); /* Ziffern laufen in Tabellen gleich breit, Null mit Schrägstrich */ --num-features: "tnum" 1, "lnum" 1, "zero" 1; /* Kurzname aus der ersten Ausbaustufe — weiterhin gültig, damit bestehender Code nicht bricht. */ --font: var(--font-ui); --font-num: var(--font-ui); /* Schriftgrade. Stufung 1.125 im Text, 1.25 in den Überschriften */ --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 19px; --fs-2xl: 23px; --fs-3xl: 28px; --fs-4xl: 34px; --fs-5xl: 42px; /* Überschriften als Rollen statt roher Grade */ --h1-size: var(--fs-2xl); --h1-weight: 650; --h1-track: -.022em; --h1-lead: 1.2; --h2-size: var(--fs-xl); --h2-weight: 640; --h2-track: -.018em; --h2-lead: 1.25; --h3-size: var(--fs-lg); --h3-weight: 620; --h3-track: -.012em; --h3-lead: 1.3; --h4-size: var(--fs-md); --h4-weight: 620; --h4-track: -.006em; --h4-lead: 1.35; --h5-size: var(--fs-base); --h5-weight: 620; --h5-track: 0; --h5-lead: 1.4; --h6-size: var(--fs-xs); --h6-weight: 700; --h6-track: .085em; --h6-lead: 1.4; --lh-tight: 1.25; --lh-snug: 1.38; --lh-normal: 1.5; --lh-relax: 1.62; --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* --- Abstände: 4er-Raster ------------------------------------------ */ --s0: 0; --s1: 2px; --s2: 4px; --s3: 6px; --s4: 8px; --s5: 12px; --s6: 16px; --s7: 20px; --s8: 24px; --s9: 32px; --s10: 40px; --s11: 48px; --s12: 64px; /* --- Dichte --------------------------------------------------------- Kompakt für Maus und Tastatur, komfortabel für Finger. Die Schriftgröße bleibt nahezu gleich — nur Bauteile und Abstände schrumpfen. So bleibt die Lesbarkeit erhalten und es passt mehr auf den Schirm. ------------------------------------------------------------------ */ --row-h: 32px; --control-h: 28px; --control-px: 10px; --card-pad: 16px; --card-pad-y: 12px; --gap: 12px; --gap-lg: 16px; --table-px: 12px; --table-py: 7px; /* --- Rundungen ------------------------------------------------------ */ --r-xs: 3px; --r-sm: 5px; --r-md: 7px; --r-lg: 10px; --r-xl: 14px; --r-2xl: 20px; --r-full: 999px; --r-card: 12px; /* --- Maße des Gerüsts ----------------------------------------------- */ --sidebar-w: 252px; --sidebar-w-collapsed: 62px; --topbar-h: 58px; --view-max: 1680px; /* =================================================================== 4 — MATERIAL Woraus die Flächen bestehen. Ein Bildschirm hat kein Licht — also muss es gesetzt werden: eine Lichtquelle oben, eine Kante, die das Licht bricht, und ein Schatten, der die Farbe der Umgebung trägt. Fehlt das, sieht jede Fläche gleich weit vorne aus, und genau das lässt eine Oberfläche billig wirken. =================================================================== */ /* --- Kanten --------------------------------------------------------- Durchscheinend statt deckend: eine Linie aus Grau sitzt auf jedem Untergrund falsch, sobald die Fläche darunter nicht exakt weiß ist. ------------------------------------------------------------------ */ --hairline: rgba(19,33,25,.088); --hairline-soft: rgba(19,33,25,.05); --hairline-strong: rgba(19,33,25,.15); /* --- Licht ---------------------------------------------------------- Oberkante hell, Unterkante dunkel: die Fläche bekommt eine Dicke. ------------------------------------------------------------------ */ --sheen: inset 0 1px 0 rgba(255,255,255,.72); --sheen-soft: inset 0 1px 0 rgba(255,255,255,.45); --edge-dark: inset 0 -1px 0 rgba(19,33,25,.035); /* --- Flächenverläufe: kaum sichtbar, aber sofort spürbar ----------- */ --fill-surface: linear-gradient(180deg, #ffffff 0%, var(--grey-25) 100%); --fill-sunken: linear-gradient(180deg, var(--grey-75) 0%, var(--grey-100) 100%); --fill-accent: linear-gradient(180deg, var(--green-400) 0%, var(--green-600) 100%); --fill-gold: linear-gradient(180deg, var(--gold-400) 0%, var(--gold-600) 100%); --fill-neg: linear-gradient(180deg, #b64d45 0%, var(--neg-600) 100%); /* --- Umgebungslicht des Arbeitsbereichs ---------------------------- */ --ambient: radial-gradient(900px 420px at 8% -6%, rgba(47,125,79,.055), transparent 62%), radial-gradient(760px 380px at 96% 2%, rgba(176,138,62,.042), transparent 60%); /* --- Glas: Kopfzeile und schwebende Flächen ------------------------ */ --glass-bg: rgba(255,255,255,.78); --glass-blur: saturate(180%) blur(20px); /* --- Erhebung ------------------------------------------------------- Zwei Lagen je Stufe: ein enger Kontaktschatten, der das Bauteil auf die Fläche setzt, und ein weiter Streuschatten, der die Höhe zeigt. Beide grünstichig — ein neutralgrauer Schatten wirkt neben Grün schmutzig. ------------------------------------------------------------------ */ --sh-0: none; --sh-1: 0 1px 1px rgba(19,33,25,.04), 0 2px 4px -2px rgba(19,33,25,.05); --sh-2: 0 1px 2px rgba(19,33,25,.05), 0 4px 10px -3px rgba(19,33,25,.07); --sh-3: 0 2px 4px rgba(19,33,25,.05), 0 10px 24px -6px rgba(19,33,25,.1); --sh-4: 0 4px 8px rgba(19,33,25,.06), 0 22px 48px -10px rgba(19,33,25,.16); --sh-5: 0 8px 16px rgba(19,33,25,.08), 0 40px 90px -16px rgba(19,33,25,.24); --sh-inset: var(--sheen); /* Karte: Kontaktschatten plus Lichtkante, als ein Wert */ --sh-card: 0 1px 1px rgba(19,33,25,.035), 0 3px 8px -3px rgba(19,33,25,.05); --sh-card-hover: 0 2px 4px rgba(19,33,25,.045), 0 12px 28px -8px rgba(19,33,25,.11); /* Fokus: zwei Ringe — heller Abstandhalter, dann Akzent. So bleibt der Ring auch auf gefärbten Flächen lesbar. */ --ring: 0 0 0 2px var(--surface), 0 0 0 4px rgba(47,125,79,.55); --ring-neg: 0 0 0 2px var(--surface), 0 0 0 4px rgba(168,67,60,.5); --glow-accent: 0 0 0 1px rgba(47,125,79,.28), 0 4px 14px -2px rgba(47,125,79,.35); /* =================================================================== 5 — BEWEGUNG Kurz, ruhig, immer mit Zweck. Nichts bewegt sich zur Zierde. =================================================================== */ --e-out: cubic-bezier(.22, 1, .36, 1); /* Erscheinen */ --e-in-out: cubic-bezier(.4, 0, .2, 1); /* Zustandswechsel */ --e-spring: cubic-bezier(.34, 1.42, .64, 1); /* Bestätigung */ --e-sharp: cubic-bezier(.4, 0, .6, 1); /* Verschwinden */ --e-in: cubic-bezier(.55, 0, .9, .45); /* Hineinziehen, beschleunigend */ --t-instant: 80ms; --t-fast: 130ms; --t-base: 200ms; --t-slow: 320ms; --t-slower: 480ms; --stagger: 22ms; /* Versatz je Zeile beim Einblenden */ color-scheme: light; } /* ===================================================================== Dichte: komfortabel ===================================================================== */ :root[data-density="cozy"] { --row-h: 40px; --control-h: 34px; --control-px: 13px; --card-pad: 20px; --card-pad-y: 16px; --gap: 16px; --gap-lg: 20px; --table-px: 16px; --table-py: 11px; --fs-base: 14px; --fs-md: 15px; } /* ===================================================================== FARBWELTEN Sieben Einstellungen, zwei Grundarten. Was sich ändert, ist die Stimmung der Flächen - nicht die Bedeutung der Farben. Eine Regel gilt in allen: Grün heißt gut, Rot heißt schlecht, Bernstein heißt aufpassen. Diese drei bleiben überall gleich. Verschöbe man sie mit, wäre jede Farbwelt eine neue Sprache, die man erst wieder lernen müsste - und im Zweifel im falschen Moment falsch versteht. Beweglich ist dagegen die Akzentfarbe, also das, was Handlung und Auswahl markiert. In Morgenblau und Rosenholz wandert sie mit, weil ein grüner Knopf auf rosa Grund fremd wirkt - und weil Grün dann eindeutig für "gut" frei wird. ===================================================================== */ /* --------------------------------------------------------------------- Dunkel Nicht invertiert, sondern eigens abgestimmt: reines Umkehren macht Grün giftig und Gold schmutzig. --------------------------------------------------------------------- */ :root[data-theme="dark"], :root[data-theme="midnight"] { /* Der Arbeitsbereich liegt im Dunkeln bewusst höher als die Seitenleiste. Sonst verschwimmen beide zu einer Fläche, und die Gliederung, die im Hellen selbstverständlich ist, geht verloren. */ --bg: #121716; --bg-sunken: #0c100f; --bg-raised: #1b211f; --surface: #1a201e; --surface-alt: #1f2624; --surface-hover: #242b28; --surface-active: #2a322e; --surface-sel: rgba(85,163,119,.12); --border: #2a312e; --border-soft: #222825; --border-strong: #38403c; --border-focus: #55a377; --text: #e4eae7; --text-strong: #f4f8f6; --text-muted: #9aa5a0; --text-subtle: #6d7a74; --text-invert: #0d100f; --text-link: #6cb98c; --accent: #55a377; --accent-hover: #6cb98c; --accent-active: #7fc79c; --accent-soft: rgba(85,163,119,.13); --accent-border: rgba(85,163,119,.3); --accent-text: #8ecfa9; --gold: #9aa5a0; --gold-soft: rgba(255,255,255,.06); --gold-border: rgba(255,255,255,.16); --gold-text: #c3ccc7; /* Dieselbe Dreiteilung wie in der hellen Darstellung. */ --info-50: rgba(255,255,255,.06); --info-100: rgba(255,255,255,.1); --info-500: #8b968f; --info-600: #a8b4ae; --pos-500: #55a377; --pos-600: #6cb98c; --warn-50: rgba(208,117,109,.12); --warn-100: rgba(208,117,109,.2); --warn-500: #d0756d; --warn-600: #de8b83; --neg-50: rgba(208,117,109,.12); --neg-100: rgba(208,117,109,.2); --neg-500: #d0756d; --neg-600: #de8b83; /* Dieselbe Dreiteilung wie in der hellen Darstellung - siehe dort. */ --status-neutral-bg: rgba(255,255,255,.06); --status-neutral-fg: #a8b4ae; --status-pos-bg: rgba(85,163,119,.14); --status-pos-fg: #7fc79c; --status-info-bg: rgba(255,255,255,.06); --status-info-fg: #a8b4ae; --status-warn-bg: rgba(208,117,109,.12); --status-warn-fg: #d0756d; --status-neg-bg: rgba(208,117,109,.2); --status-neg-fg: #e29a93; --status-gold-bg: rgba(255,255,255,.06); --status-gold-fg: #a8b4ae; --signal-pos: var(--pos-500); --signal-warn: var(--neg-500); --signal-neg: var(--neg-600); --signal-quiet: var(--grey-400); --sidebar-bg: #0a0e0c; --sidebar-bg-deep: #060908; --sidebar-text: #a9b5af; --sidebar-strong: #e6eeea; --sidebar-muted: #66736c; --sidebar-hover: rgba(255,255,255,.048); --sidebar-active: #55a377; --sidebar-sel-bg: rgba(85,163,119,.13); --sidebar-line: rgba(255,255,255,.05); --sidebar-edge: rgba(0,0,0,.6); --chart-grid: #232926; --chart-axis: #5d6a64; --series-1: #55a377; --series-2: #cba85c; --series-3: #6ba6b8; --series-4: #8ecfa9; --series-5: #a48cb8; --series-6: #ddc189; --series-7: #7fa9bf; --series-8: #b7938a; /* --- Material im Dunkeln ------------------------------------------- Im Hellen kommt Tiefe vom Schatten, im Dunkeln vom Licht: Schatten auf Schwarz sieht man nicht, eine helle Oberkante dagegen schon. Deshalb tragen die Flächen hier ihre Erhebung als Kante, nicht als Wurf. ------------------------------------------------------------------ */ --hairline: rgba(255,255,255,.072); --hairline-soft: rgba(255,255,255,.042); --hairline-strong: rgba(255,255,255,.14); --sheen: inset 0 1px 0 rgba(255,255,255,.055); --sheen-soft: inset 0 1px 0 rgba(255,255,255,.032); --edge-dark: inset 0 -1px 0 rgba(0,0,0,.28); --fill-surface: linear-gradient(180deg, #1d2422 0%, #181e1c 100%); --fill-sunken: linear-gradient(180deg, #101514 0%, #0c100f 100%); --fill-accent: linear-gradient(180deg, #61b083 0%, #3f8b5e 100%); --fill-gold: linear-gradient(180deg, #d8b567 0%, #ab8940 100%); --fill-neg: linear-gradient(180deg, #d8837b 0%, #a85149 100%); --ambient: radial-gradient(1000px 460px at 6% -8%, rgba(85,163,119,.062), transparent 64%), radial-gradient(820px 400px at 98% 0%, rgba(203,168,92,.045), transparent 62%); --glass-bg: rgba(24,30,28,.76); --glass-blur: saturate(150%) blur(20px); --sh-1: 0 1px 2px rgba(0,0,0,.5); --sh-2: 0 2px 6px rgba(0,0,0,.55); --sh-3: 0 8px 22px rgba(0,0,0,.6); --sh-4: 0 18px 46px rgba(0,0,0,.68); --sh-5: 0 30px 80px rgba(0,0,0,.78); --sh-inset: var(--sheen); --sh-card: 0 1px 2px rgba(0,0,0,.45); --sh-card-hover: 0 2px 4px rgba(0,0,0,.5), 0 14px 32px -10px rgba(0,0,0,.7); --ring: 0 0 0 2px var(--surface), 0 0 0 4px rgba(85,163,119,.6); --ring-neg: 0 0 0 2px var(--surface), 0 0 0 4px rgba(208,117,109,.55); --glow-accent: 0 0 0 1px rgba(85,163,119,.35), 0 4px 16px -2px rgba(85,163,119,.3); color-scheme: dark; } /* --------------------------------------------------------------------- Salbei - gedämpftes Pastellgrün Dieselbe Leitfarbe wie im Hellen, nur ruhiger im Untergrund. Für lange Tage am Bildschirm, an denen reines Weiß zu laut wird. --------------------------------------------------------------------- */ :root[data-theme="sage"] { --bg: #eef3ee; --bg-sunken: #e3ebe4; --bg-raised: #f8fbf8; --surface: #f9fbf9; --surface-alt: #f2f6f2; --surface-hover: #eaf0ea; --surface-active: #e2eae3; --surface-sel: #ddeee2; --border: #d3ded5; --border-soft: #e2eae3; --border-strong: #bfceC2; --text: #1b2620; --text-strong: #0e1712; --text-muted: #55655b; --text-subtle: #809184; --accent: #3d7d55; --accent-hover: #336a47; --accent-active: #2a583b; --accent-soft: #dceee3; --accent-border: #aed2bd; --accent-text: #2a583b; --hairline: rgba(24,48,34,.1); --hairline-soft: rgba(24,48,34,.055); --hairline-strong: rgba(24,48,34,.17); --fill-surface: linear-gradient(180deg, #fbfdfb 0%, #f4f8f4 100%); --fill-sunken: linear-gradient(180deg, #e8efe9 0%, #e0e9e2 100%); --fill-accent: linear-gradient(180deg, #4e9066 0%, #336a47 100%); --ambient: radial-gradient(900px 420px at 8% -6%, rgba(61,125,85,.07), transparent 62%), radial-gradient(760px 380px at 96% 2%, rgba(168,146,95,.05), transparent 60%); --glass-bg: rgba(248,251,248,.8); --chart-grid: #dde7df; } /* --------------------------------------------------------------------- Leinen - warmes Beige mit Gold Angenehm bei viel Papierarbeit: der Bildschirm liegt farblich näher am Ausdruck, der Wechsel zwischen beiden strengt weniger an. --------------------------------------------------------------------- */ :root[data-theme="linen"] { --bg: #f6f2e9; --bg-sunken: #ece6d8; --bg-raised: #fdfbf6; --surface: #fdfbf6; --surface-alt: #f8f4ea; --surface-hover: #f2ece0; --surface-active: #ebe4d4; --surface-sel: #eaf1e6; --border: #e0d8c6; --border-soft: #ece6d8; --border-strong: #cdc2ab; --text: #27241c; --text-strong: #16140f; --text-muted: #645d4c; --text-subtle: #918875; --accent: #3f7d57; --accent-hover: #346a49; --accent-active: #2b573c; --accent-soft: #e6f0e8; --accent-border: #b8d5c3; --accent-text: #2b573c; --gold: #9c7b2e; --gold-soft: #f5ecd6; --gold-border: #e0cc9c; --gold-text: #7a5c28; --hairline: rgba(60,48,24,.1); --hairline-soft: rgba(60,48,24,.055); --hairline-strong: rgba(60,48,24,.18); --fill-surface: linear-gradient(180deg, #fefdfa 0%, #f8f4ea 100%); --fill-sunken: linear-gradient(180deg, #f0eade 0%, #e8e1d1 100%); --fill-gold: linear-gradient(180deg, #b8963f 0%, #8a6a26 100%); --ambient: radial-gradient(900px 420px at 8% -6%, rgba(176,138,62,.09), transparent 62%), radial-gradient(760px 380px at 96% 2%, rgba(63,125,87,.045), transparent 60%); --glass-bg: rgba(253,251,246,.82); --chart-grid: #e8e1d1; } /* --------------------------------------------------------------------- Morgenblau - kühles Pastellblau Hier wandert die Akzentfarbe auf Blau. Damit wird Grün eindeutig: es bedeutet nur noch "gut", nicht mehr zugleich "hier klicken". --------------------------------------------------------------------- */ :root[data-theme="morning"] { --bg: #eef2f7; --bg-sunken: #e2e9f1; --bg-raised: #f9fbfd; --surface: #f9fbfd; --surface-alt: #f2f6fa; --surface-hover: #e9f0f7; --surface-active: #dfe9f3; --surface-sel: #dbe8f5; --border: #d2dded; --border-soft: #e2e9f1; --border-strong: #bbcadd; --border-focus: #3d6f9e; --text: #1a2230; --text-strong: #0d1420; --text-muted: #526073; --text-subtle: #7d8a9c; --text-link: #2f5f8a; --accent: #3d6f9e; --accent-hover: #345f88; --accent-active: #2b4f71; --accent-soft: #dfeaf6; --accent-border: #a9c6e1; --accent-text: #2b4f71; --hairline: rgba(20,36,58,.1); --hairline-soft: rgba(20,36,58,.055); --hairline-strong: rgba(20,36,58,.17); --fill-surface: linear-gradient(180deg, #fbfdfe 0%, #f3f7fb 100%); --fill-sunken: linear-gradient(180deg, #e7eef6 0%, #dee7f1 100%); --fill-accent: linear-gradient(180deg, #4e83b4 0%, #345f88 100%); --ring: 0 0 0 2px var(--surface), 0 0 0 4px rgba(61,111,158,.55); --ambient: radial-gradient(900px 420px at 8% -6%, rgba(61,111,158,.075), transparent 62%), radial-gradient(760px 380px at 96% 2%, rgba(168,146,95,.045), transparent 60%); --glass-bg: rgba(249,251,253,.82); --chart-grid: #dde6f0; --series-1: #3d6f9e; --series-2: #b08a3e; --series-3: #2f7d4f; } /* --------------------------------------------------------------------- Rosenholz - weiches Altrosa Die wärmste der hellen Welten. Akzent in gedecktem Rosé, damit Rot als Warnfarbe eindeutig bleibt - ein kräftiges Rosa wäre zu nah daran. --------------------------------------------------------------------- */ :root[data-theme="rose"] { --bg: #f8f1f2; --bg-sunken: #efe3e5; --bg-raised: #fdf9fa; --surface: #fdf9fa; --surface-alt: #f9f3f4; --surface-hover: #f4ebed; --surface-active: #ede0e3; --surface-sel: #f2e4e8; --border: #e6d6d9; --border-soft: #efe3e5; --border-strong: #d4bfc4; --border-focus: #a55f74; --text: #2a2024; --text-strong: #1a1215; --text-muted: #6b5a60; --text-subtle: #9a858c; --text-link: #8e4f63; --accent: #a55f74; --accent-hover: #8e5063; --accent-active: #774253; --accent-soft: #f6e6ea; --accent-border: #e0bcc7; --accent-text: #774253; --hairline: rgba(60,28,38,.1); --hairline-soft: rgba(60,28,38,.055); --hairline-strong: rgba(60,28,38,.17); --fill-surface: linear-gradient(180deg, #fefbfb 0%, #f9f2f4 100%); --fill-sunken: linear-gradient(180deg, #f3e8ea 0%, #ece0e3 100%); --fill-accent: linear-gradient(180deg, #b87187 0%, #8e5063 100%); --ring: 0 0 0 2px var(--surface), 0 0 0 4px rgba(165,95,116,.5); --ambient: radial-gradient(900px 420px at 8% -6%, rgba(165,95,116,.075), transparent 62%), radial-gradient(760px 380px at 96% 2%, rgba(168,146,95,.05), transparent 60%); --glass-bg: rgba(253,249,250,.82); --chart-grid: #ecdee1; --series-1: #a55f74; --series-2: #b08a3e; --series-3: #2f7d4f; } /* --------------------------------------------------------------------- Mitternacht - sehr dunkles Blau Die kontrastärmste Einstellung. Für sehr dunkle Räume, in denen die normale dunkle Welt noch blendet. --------------------------------------------------------------------- */ :root[data-theme="midnight"] { --bg: #0f1420; --bg-sunken: #0a0e17; --bg-raised: #18203033; --surface: #161d2b; --surface-alt: #1b2333; --surface-hover: #202938; --surface-active: #26303f; --surface-sel: rgba(91,143,199,.14); --border: #26303f; --border-soft: #1e2734; --border-strong: #34405240; --border-focus: #5b8fc7; --text: #dde5f0; --text-strong: #f0f5fb; --text-muted: #94a1b5; --text-subtle: #6a7889; --text-link: #7fb0dd; --accent: #5b8fc7; --accent-hover: #74a3d6; --accent-active: #8ab5e0; --accent-soft: rgba(91,143,199,.15); --accent-border: rgba(91,143,199,.32); --accent-text: #9cc2e6; --gold: #c9a96a; --gold-soft: rgba(201,169,106,.13); --gold-border: rgba(201,169,106,.3); --gold-text: #dcc490; --hairline: rgba(255,255,255,.07); --hairline-soft: rgba(255,255,255,.04); --hairline-strong: rgba(255,255,255,.14); --fill-surface: linear-gradient(180deg, #19212f 0%, #141b27 100%); --fill-sunken: linear-gradient(180deg, #0e1421 0%, #0a0f19 100%); --fill-accent: linear-gradient(180deg, #6b9bd0 0%, #47749f 100%); --sidebar-bg: #0a0e18; --sidebar-bg-deep: #060910; --sidebar-strong: #e4ecf6; --sidebar-sel-bg: rgba(91,143,199,.16); --sidebar-active: #5b8fc7; --ring: 0 0 0 2px var(--surface), 0 0 0 4px rgba(91,143,199,.6); --ambient: radial-gradient(1000px 460px at 6% -8%, rgba(91,143,199,.07), transparent 64%), radial-gradient(820px 400px at 98% 0%, rgba(201,169,106,.04), transparent 62%); --glass-bg: rgba(22,29,43,.78); --chart-grid: #1e2734; --chart-axis: #5f6d80; --series-1: #5b8fc7; --series-2: #c9a96a; --series-3: #55a377; --series-4: #8ab5e0; } /* Die aktive Kante der Seitenleiste leuchtet in der Akzentfarbe der Welt. */ :root[data-theme="morning"] { --sidebar-active: #4e83b4; --sidebar-sel-bg: rgba(78,131,180,.16); } :root[data-theme="rose"] { --sidebar-active: #b87187; --sidebar-sel-bg: rgba(184,113,135,.16); } /* ===================================================================== Bewegung läuft immer - unabhängig von der Windows-Einstellung "Animationseffekte". Entscheidung des Inhabers vom 14.09.2026: die Effekte gehören zum Auftritt von AURA. (Remote-Desktop und manche Windows-Neustarts melden "weniger Bewegung", ohne dass es jemand so eingestellt hat - und dann war der Eintritt plötzlich weg.) ===================================================================== */