/* Gestaltungsmarken — die eine Datei mit Farben, Radien, Abständen. Übernommen aus docs/workscope-ui-konzept.html; wird später gegen den carelogic-Styleguide getauscht. */ :root { --brand: #0D6599; --brand-pressed: #0A507A; --brand-soft: #E4F0F8; --accent: #1599E4; --accent-soft: #E1F1FC; --bg: #F9F9F9; --surface: #FFFFFF; --fill: #F1F3F5; --fill-2: #EAEDF0; --stroke: #E4E7EB; --stroke-2: #D5DAE0; --ink: #1A2227; --ink-2: #5A646C; --ink-3: #97A1A9; --blue: #1599E4; --blue-soft: #E1F1FC; --amber: #E08A1E; --amber-soft: #FBEBD3; --red: #E1443F; --red-soft: #FBE4E3; --green: #12996B; --green-soft: #DEF3EA; --purple: #7C5CF0; --purple-soft: #EBE6FD; --r-card: 16px; --r-tile: 14px; --r-ctrl: 11px; --sh: 0 1px 2px rgba(20, 30, 40, .05), 0 6px 20px rgba(20, 30, 40, .06); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color-scheme: light dark; } /* Dunkles Farbschema — Werte aus dem UI-Konzept (.dk-Block). Drei Zustände, gesteuert über data-theme am -Element: (kein Attribut) → dem Betriebssystem folgen (Vorgabe) hell → ausdrücklich hell, auch bei dunklem System dunkel → ausdrücklich dunkel, auch bei hellem System */ @media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { --brand: #3BAAEA; --brand-pressed: #1E86C4; --brand-soft: #123246; --accent: #1599E4; --accent-soft: #0F2E42; --bg: #293133; --surface: #323B3E; --fill: #2F393B; --fill-2: #374143; --stroke: #3C4749; --stroke-2: #4A5658; --ink: #EBEEEF; --ink-2: #A7B0B3; --ink-3: #76807F; --blue: #3BAAEA; --blue-soft: #0F2E42; --amber: #F0A23E; --amber-soft: #3E3220; --red: #F0605B; --red-soft: #3E2726; --green: #2BB585; --green-soft: #173A31; --purple: #9B82F5; --purple-soft: #2C2942; --sh: 0 1px 2px rgba(0, 0, 0, .2), 0 6px 20px rgba(0, 0, 0, .28); } } /* Ausdrücklich gewählt — gilt unabhängig vom Betriebssystem. */ :root[data-theme="dunkel"] { --brand: #3BAAEA; --brand-pressed: #1E86C4; --brand-soft: #123246; --accent: #1599E4; --accent-soft: #0F2E42; --bg: #293133; --surface: #323B3E; --fill: #2F393B; --fill-2: #374143; --stroke: #3C4749; --stroke-2: #4A5658; --ink: #EBEEEF; --ink-2: #A7B0B3; --ink-3: #76807F; --blue: #3BAAEA; --blue-soft: #0F2E42; --amber: #F0A23E; --amber-soft: #3E3220; --red: #F0605B; --red-soft: #3E2726; --green: #2BB585; --green-soft: #173A31; --purple: #9B82F5; --purple-soft: #2C2942; --sh: 0 1px 2px rgba(0, 0, 0, .2), 0 6px 20px rgba(0, 0, 0, .28); color-scheme: dark; } :root[data-theme="hell"] { color-scheme: light; } /* Drucken bleibt hell, auch aus dem dunklen Schema heraus. */ @media print { :root { --bg: #fff; --surface: #fff; --fill: #F1F3F5; --fill-2: #EAEDF0; --stroke: #E4E7EB; --stroke-2: #D5DAE0; --ink: #1A2227; --ink-2: #5A646C; --ink-3: #97A1A9; --brand: #0D6599; } }