/* FIBU-APP - CSS VARIABLES */ :root { /* PRIMARY COLORS */ --color-primary: #C73178; /* Verwaltungsebene (HR-Kontext). Wird von theme.js applyCI() NICHT ueberschrieben - der HR-Banner bleibt auch bei gesetzter Mandanten-CI im Keybuki-Pink. */ --color-verwaltung: #C73178; --color-primary-light: #d05a91; --color-primary-dark: #8e2456; --color-primary-subtle: #fdf2f8; /* helle Flaeche fuer ausgewaehlte Karten */ --color-primary-hover: #a82963; --color-secondary: #53275e; --color-secondary-light: #7b3d8a; --color-secondary-dark: #381641; /* Destruktive Aktionen (Loeschen, 2FA deaktivieren). Bewusst greller als --color-error: Fehler meldet, dies hier warnt vor einem Klick. */ --color-danger: #b3261e; --color-danger-hover: #b30019; /* BACKGROUND COLORS */ --color-background: #fffbfb; --color-card-bg: #ffffff; --color-sidebar-bg: #ffffff; --color-overlay: rgba(0, 0, 0, 0.5); /* TEXT COLORS */ --color-text-heading: #16181d; --color-text-primary: #404040; --color-text-secondary: #6c757d; --color-text-muted: #999999; --color-text-white: #ffffff; /* BORDERS */ --color-border-subtle: #eef0f3; /* Zeilentrenner innerhalb von Karten */ --color-border: #e2e5ea; /* Karten, Kacheln */ --color-border-strong: #d5d9df; /* Eingabefelder, Buttons */ /* SURFACES */ --color-surface-subtle: #f8f9fb; /* abgesenkte Flaechen, Info-Boxen */ /* --- Eingabefelder --- Eigene Tokens, damit die Feldflaeche im Dunkelmodus von der Kartenflaeche abgesetzt werden kann. Hell entsprechen sie den bisherigen Werten, dort aendert sich also nichts. */ --color-input-bg: #ffffff; --color-input-border: #e2e5ea; --color-input-placeholder: #999999; --color-input-disabled-bg: #f8f9fb; --color-input-disabled-text: #999999; /* Warme Variante: die Zeiterfassung nutzt durchgehend leicht rosastichige Flaechen, passend zu --color-background. Neutral waere dort ein sichtbarer Bruch. */ --color-surface-warm: #f2eae6; --color-neutral: #8e8a94; /* neutrale Flaeche: Avatare, Platzhalter, deaktivierte Zustaende */ --color-border-warm: #f0e6eb; /* STATUS COLORS */ --color-success: #28a745; --color-success-light: #d4edda; --color-warning: #f59e0b; --color-warning-light: #fff3cd; --color-error: #c62828; --color-error-light: #f8d7da; --color-info: #0073aa; --color-info-light: #e6f2fa; /* Anwesenheitszustaende. Eigene Toene, weil success/warning/error/info fuer sechs Zustaende nicht reichen: Urlaub und Anwesend waren beide gruen, Krank lief auf die Primaerfarbe (Rosa steht bei uns fuer Aktionen, nicht fuer Status). Rot bleibt echten Stoerungen vorbehalten - krank zu sein ist kein Fehler. Flaechen ueber color-mix statt eigener *-light Werte, damit sie in beiden Themen funktionieren. */ --color-vacation: #0d9488; /* Urlaub: geplante Abwesenheit */ --color-sick: #7c4dff; /* Krank: ungeplant, aber kein Fehler */ --color-holiday: #b8860b; /* Feiertag: ersetzt hartkodiertes #9c27b0, das sonst mit Krank kollidiert waere */ /* Dunkle Varianten: Text auf den *-light Flaechen. Werte aus dem Bestand uebernommen, damit sich optisch nichts aendert - die *-light Toene und diese Textfarben sind bereits als Paare im Code verwendet. */ --color-success-dark: #155724; --color-warning-dark: #856404; --color-error-dark: #721c24; --color-info-dark: #0c5460; /* SPACING (8px Grid) */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-xxl: 48px; /* TYPOGRAPHY */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.6; /* BORDER RADIUS */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* SHADOWS */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12); --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.16); /* LAYOUT */ --sidebar-width: 280px; --sidebar-collapsed: 80px; --header-height: 64px; --mobile-header-height: 56px; --max-content-width: 1400px; /* TRANSITIONS */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease; /* Z-INDEX */ --z-dropdown: 100; --z-sticky: 200; --z-modal-backdrop: 900; --z-modal: 1000; --z-toast: 1100; } /* ============================================================ DARK MODE Aktiv bei . Bewusst NICHT ueberschrieben: die *-light Flaechen und ihre *-dark Textfarben. Ein helles Badge auf dunkler Seite ist gewollt, und die Paare sind bereits aufeinander abgestimmt. ============================================================ */ [data-theme="dark"] { /* --- Flaechen --- Kein reines Schwarz: das wirkt hart, laesst Schatten verschwinden und erzeugt bei hellem Text Halo-Effekte. Leicht warm getoent, passend zum hellen Thema. */ --color-background: #17151a; --color-card-bg: #1e1c22; --color-sidebar-bg: #1e1c22; --color-surface-subtle: #26232b; --color-surface-warm: #2a252c; /* --- Eingabefelder --- Feld eine Stufe heller als die Karte, Rahmen eine Stufe heller als das Feld. Deaktivierte Felder fallen auf die Kartenflaeche zurueck und wirken dadurch abgesenkt. */ --color-input-bg: #26232b; --color-input-border: #38343d; --color-input-placeholder: #8a8494; --color-input-disabled-bg: #1e1c22; --color-input-disabled-text: #5c5866; --color-neutral: #5c5866; --color-overlay: rgba(0, 0, 0, 0.7); /* --- Text --- Kein reines Weiss: blendet auf dunklem Grund und macht Fliesstext anstrengend. */ --color-text-heading: #ffffff; --color-text-primary: #ffffff; --color-text-secondary: #ffffff; --color-text-muted: #ffffff; --color-text-white: #ffffff; /* --- Rahmen --- Heller als die Flaeche, nicht dunkler. Im Dunkelmodus trennt Helligkeit, nicht Schatten. */ --color-border-subtle: #2b2830; --color-border: #38343d; --color-border-strong: #4a454f; --color-border-warm: #3a333c; /* --- Primaerfarbe --- #c73178 hat auf dunklem Grund nur etwa 3:1 Kontrast - fuer Buttons mit weisser Schrift ausreichend, fuer Links und farbigen Text zu wenig. Deshalb aufgehellt. primary-dark bleibt der Originalton fuer Flaechen, auf denen weisse Schrift steht. */ /* Primaerfarbe bleibt: auf Buttons und aktiven Tabs mit weisser Schrift funktioniert sie auf dunklem Grund problemlos. Nur wenn ein Mandant eine sehr dunkle CI hinterlegt, hellt die Logik in portal-app.js bzw. ze-app.js sie zur Laufzeit auf. */ --color-primary: #c73178; --color-verwaltung: #c73178; --color-primary-light: #d05a91; --color-primary-hover: #a82963; --color-primary-dark: #8e2456; --color-primary-subtle: #2e1f28; /* --- Sekundaerfarbe --- */ --color-secondary: #a86bb8; --color-secondary-light: #c496d0; --color-secondary-dark: #53275e; /* --- Status --- Aufgehellt fuer Kontrast. Die *-light und *-dark Varianten bleiben unveraendert: helle Badges auf dunkler Seite. */ --color-success: #4ade80; --color-warning: #fbbf24; --color-error: #f87171; --color-info: #60a5fa; /* Anwesenheitszustaende, aufgehellt wie die uebrigen Statusfarben. */ --color-vacation: #2dd4bf; --color-sick: #a78bfa; --color-holiday: #fbbf24; /* --- Destruktiv --- */ --color-danger: #ef5350; --color-danger-hover: #f87171; /* --- Schatten --- Auf dunklem Grund kaum wirksam, deshalb kraeftiger. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6); --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.7); }