/* ========================================================= COLOR SCHEMES Universal Web Template Verwendung: Verfügbare Themes: - default - industry - construction - consulting - technology - health - nature - luxury Rollen: - primary: Markenfarbe, Logo, aktive Navigation, wichtige Überschriften - accent: Komplementärfarbe, Buttons, Hervorhebungen, Interaktionen - surface: Header, Footer und ruhige Flächen - surface-alt: stärkere abgesetzte Flächen ========================================================= */ :root, [data-theme="default"] { --color-bg: #ffffff; --color-surface: #e8f0f4; --color-surface-alt: #d5e2e9; --color-text: #1f2933; --color-text-muted: #667085; --color-text-light: #ffffff; --color-primary: #245b78; --color-primary-hover: #1b465d; --color-on-primary: #ffffff; --color-secondary: #6b7c86; --color-secondary-hover: #55636b; --color-on-secondary: #ffffff; --color-accent: #d97828; --color-accent-hover: #b95f16; --color-on-accent: #ffffff; --color-border: #b8c8d1; --color-overlay: rgba(0, 0, 0, 0.45); --color-success: #2e7d32; --color-warning: #d97706; --color-error: #b42318; } [data-theme="industry"] { --color-bg: #f8fafb; --color-surface: #dce5ea; --color-surface-alt: #c4d1d8; --color-text: #20272c; --color-text-muted: #5d6870; --color-text-light: #ffffff; --color-primary: #294c60; --color-primary-hover: #1d3948; --color-on-primary: #ffffff; --color-secondary: #596a73; --color-secondary-hover: #435159; --color-on-secondary: #ffffff; --color-accent: #d97706; --color-accent-hover: #b45309; --color-on-accent: #ffffff; --color-border: #aebcc4; --color-overlay: rgba(20, 28, 32, 0.55); --color-success: #3f7d44; --color-warning: #d97706; --color-error: #b42318; } [data-theme="construction"] { --color-bg: #fcfbf8; --color-surface: #ebe5dc; --color-surface-alt: #d9cdbd; --color-text: #292724; --color-text-muted: #6b665f; --color-text-light: #ffffff; --color-primary: #3c4b57; --color-primary-hover: #29343d; --color-on-primary: #ffffff; --color-secondary: #786f64; --color-secondary-hover: #5e574f; --color-on-secondary: #ffffff; --color-accent: #d45f24; --color-accent-hover: #ad4616; --color-on-accent: #ffffff; --color-border: #c7b9a8; --color-overlay: rgba(35, 31, 27, 0.52); --color-success: #477a4a; --color-warning: #d18a16; --color-error: #a9382e; } [data-theme="consulting"] { --color-bg: #fbfcfd; --color-surface: #e4edf3; --color-surface-alt: #cbdce7; --color-text: #17212b; --color-text-muted: #60707d; --color-text-light: #ffffff; --color-primary: #123b56; --color-primary-hover: #0c2b40; --color-on-primary: #ffffff; --color-secondary: #536a79; --color-secondary-hover: #3e515f; --color-on-secondary: #ffffff; --color-accent: #c6922e; --color-accent-hover: #a87922; --color-on-accent: #1f1a10; --color-border: #b7c9d4; --color-overlay: rgba(10, 28, 40, 0.55); --color-success: #3e7750; --color-warning: #c6922e; --color-error: #a53b32; } [data-theme="technology"] { --color-bg: #f8fcfd; --color-surface: #dceff5; --color-surface-alt: #bde0ea; --color-text: #14252d; --color-text-muted: #56707b; --color-text-light: #ffffff; --color-primary: #087c9d; --color-primary-hover: #05617b; --color-on-primary: #ffffff; --color-secondary: #4a7282; --color-secondary-hover: #345765; --color-on-secondary: #ffffff; --color-accent: #e66b2c; --color-accent-hover: #c45018; --color-on-accent: #ffffff; --color-border: #a9ced9; --color-overlay: rgba(7, 42, 54, 0.5); --color-success: #278060; --color-warning: #d58a20; --color-error: #b13b35; } [data-theme="health"] { --color-bg: #fbfefd; --color-surface: #dff1ed; --color-surface-alt: #c3e3dc; --color-text: #1d2d2d; --color-text-muted: #5b706e; --color-text-light: #ffffff; --color-primary: #287c78; --color-primary-hover: #1e605d; --color-on-primary: #ffffff; --color-secondary: #5d8784; --color-secondary-hover: #456a68; --color-on-secondary: #ffffff; --color-accent: #d86b52; --color-accent-hover: #b9503a; --color-on-accent: #ffffff; --color-border: #acd1cb; --color-overlay: rgba(20, 55, 54, 0.45); --color-success: #3b7d55; --color-warning: #d39a32; --color-error: #b14c45; } [data-theme="nature"] { --color-bg: #fbfcf6; --color-surface: #e6ead9; --color-surface-alt: #ced7b9; --color-text: #283025; --color-text-muted: #636d5e; --color-text-light: #ffffff; --color-primary: #4d7048; --color-primary-hover: #395637; --color-on-primary: #ffffff; --color-secondary: #7a8063; --color-secondary-hover: #5f644d; --color-on-secondary: #ffffff; --color-accent: #c5893d; --color-accent-hover: #a56d2e; --color-on-accent: #ffffff; --color-border: #bac4a5; --color-overlay: rgba(30, 45, 28, 0.48); --color-success: #4d7048; --color-warning: #c5893d; --color-error: #a84838; } [data-theme="luxury"] { --color-bg: #faf8f3; --color-surface: #e6e0d4; --color-surface-alt: #cec2ae; --color-text: #252421; --color-text-muted: #6d685f; --color-text-light: #ffffff; --color-primary: #292824; --color-primary-hover: #181714; --color-on-primary: #ffffff; --color-secondary: #6f6a60; --color-secondary-hover: #57534b; --color-on-secondary: #ffffff; --color-accent: #b58a45; --color-accent-hover: #967036; --color-on-accent: #ffffff; --color-border: #bfb4a0; --color-overlay: rgba(15, 14, 12, 0.58); --color-success: #587158; --color-warning: #b58a45; --color-error: #93483f; } [data-theme="stalflow"] { --color-bg: #0b121a; --color-surface: #17232f; --color-surface-alt: #223241; --color-text: #f3f6f9; --color-text-muted: #bdc7d1; --color-text-light: #ffffff; --color-primary: #8fc1ff; --color-primary-hover: #b9d8ff; --color-on-primary: #08111a; --color-secondary: #a4b1bd; --color-secondary-hover: #c3ccd4; --color-on-secondary: #08111a; --color-accent: #ffb45f; --color-accent-hover: #ffca8c; --color-on-accent: #241303; --color-border: rgba(255, 255, 255, 0.2); --color-overlay: rgba(0, 0, 0, 0.74); --color-success: #7ed99b; --color-warning: #ffc36e; --color-error: #ff8f87; }