/* ================================================================= HELO QM – Design-Tokens (an das HELO-Kundenportal angeglichen) Blau #003148 · Hintergrund #EFF7F8 · Grau #5B6C7A Akzente sparsam: Mint #C2F2EF · Tiffany #98CEC7 · Rot #B10050 · Beere #910050 Überschriften Teko, Fließtext PT Sans (lokal, siehe fonts.css) Standard ist das helle Layout. Das dunkle Layout greift nur, wenn gesetzt ist (Umschalter in der Kopfzeile, Wahl in localStorage "helo-qm-theme"). Alle Text-/Flächenpaare erfüllen WCAG 2.1 AA (Text ≥ 4,5:1, Bedienelemente ≥ 3:1). ================================================================= */ :root { color-scheme: light; /* Marke */ --blue: #003148; --blue-2: #0a4358; --mint: #c2f2ef; --tiffany: #98cec7; --red: #b10050; --berry: #910050; /* Flächen und Text */ --bg: #eff7f8; --surface: #ffffff; --surface-2: #f5fafb; /* Kartenköpfe, Tabellenköpfe */ --surface-sunk: #e7f1f3; /* Zeilen-Hover, eingelassene Flächen */ --ink: #12232c; --ink-2: #2c3e48; --muted: #5b6c7a; /* 5,4:1 auf Weiß, 5,0:1 auf --bg */ --heading: var(--blue); --link: #0a5a7a; --link-hover: var(--blue); --line: #dbe7ea; /* Trennlinien (dekorativ) */ --line-strong: #6f858f; /* Grenzen von Bedienelementen, ≥ 3:1 */ --focus: #0a5a7a; /* Kopfzeile */ --topbar-bg: #003148; --topbar-ink: #cfe4e6; --topbar-hover: #0a4358; --topbar-line: rgba(255, 255, 255, .28); --topbar-control-line: rgba(255, 255, 255, .55); /* 3,4:1 auf --topbar-bg */ /* Aktionen */ --primary: #003148; --primary-hover: #0a4358; --on-primary: #ffffff; --approve: #1d6b43; --approve-hover: #155535; --on-approve: #ffffff; --danger: #b10050; --danger-hover: #910050; --on-danger: #ffffff; /* Status (Text / Fläche / Rand) */ --st-draft-fg: #7f4500; --st-draft-bg: #fdf1dc; --st-draft-line: #efcd8f; --st-qm-fg: #0b5563; --st-qm-bg: #dff4f2; --st-qm-line: #98cec7; --st-gf-fg: #003148; --st-gf-bg: #e3ecf6; --st-gf-line: #b6cadf; --st-ok-fg: #1d6b43; --st-ok-bg: #e1f3e8; --st-ok-line: #a9d8bb; --st-bad-fg: #a3004a; --st-bad-bg: #fbe4ee; --st-bad-line: #f0b9d3; --st-neutral-fg: #3f4d57; --st-neutral-bg: #eef2f4; --st-neutral-line: #cfdbe0; /* Hinweisboxen */ --notice-bg: #e3f8f6; --notice-line: #98cec7; --notice-ink: #003148; /* Form */ --radius: 10px; --radius-sm: 7px; --shadow-lift: 0 6px 18px rgba(0, 49, 72, .09); --shadow-pop: 0 14px 34px rgba(0, 49, 72, .16); --font-head: 'Teko', 'Arial Narrow', Arial, sans-serif; --font-body: 'PT Sans', Arial, Helvetica, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --ease-out: cubic-bezier(.2, .8, .2, 1); /* Alte Variablennamen (noch in Skripten referenziert) */ --helo-primary: var(--primary); --helo-secondary: var(--tiffany); --helo-success: var(--approve); --helo-warning: var(--st-draft-fg); --helo-danger: var(--danger); --text-muted: var(--muted); --border-color: var(--line); --background-secondary: var(--surface-2); } html[data-theme="dark"] { color-scheme: dark; --bg: #071b25; --surface: #0d2633; --surface-2: #112f3e; --surface-sunk: #163847; --ink: #e3eef1; --ink-2: #c9d9df; --muted: #9fb5bf; /* 7,3:1 auf --surface */ --heading: #c2f2ef; --link: #98cec7; --link-hover: #c2f2ef; --line: #21414f; --line-strong: #5f8394; /* 3,9:1 auf --surface */ --focus: #98cec7; --topbar-bg: #031520; --topbar-ink: #c9dde1; --topbar-hover: #0d2633; --topbar-line: rgba(194, 242, 239, .28); --topbar-control-line: rgba(194, 242, 239, .5); --primary: #98cec7; --primary-hover: #c2f2ef; --on-primary: #003148; --approve: #8fe0b0; --approve-hover: #b4ecca; --on-approve: #062a17; --danger: #ff9cc6; --danger-hover: #ffc0dc; --on-danger: #3d0020; --st-draft-fg: #f6c97a; --st-draft-bg: rgba(240, 170, 60, .14); --st-draft-line: rgba(246, 201, 122, .45); --st-qm-fg: #a6ece4; --st-qm-bg: rgba(152, 206, 199, .14); --st-qm-line: rgba(166, 236, 228, .45); --st-gf-fg: #bcd6f2; --st-gf-bg: rgba(120, 170, 230, .15); --st-gf-line: rgba(188, 214, 242, .45); --st-ok-fg: #8fe0b0; --st-ok-bg: rgba(76, 190, 120, .14); --st-ok-line: rgba(143, 224, 176, .45); --st-bad-fg: #ff9cc6; --st-bad-bg: rgba(220, 60, 130, .16); --st-bad-line: rgba(255, 156, 198, .45); --st-neutral-fg: #c9d9df; --st-neutral-bg: rgba(255, 255, 255, .07); --st-neutral-line: rgba(201, 217, 223, .35); --notice-bg: rgba(152, 206, 199, .12); --notice-line: rgba(152, 206, 199, .45); --notice-ink: #d7f3f0; --shadow-lift: 0 6px 18px rgba(0, 0, 0, .35); --shadow-pop: 0 14px 34px rgba(0, 0, 0, .5); } /* ----------------------------------------------------------------- Bootstrap 5.3 an die Tokens binden (beide Modi) ----------------------------------------------------------------- */ :root, html[data-theme] { --bs-body-font-family: var(--font-body); --bs-body-font-size: .9375rem; --bs-body-line-height: 1.55; --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-emphasis-color: var(--ink); --bs-heading-color: var(--heading); --bs-secondary-color: var(--muted); --bs-tertiary-color: var(--muted); --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--surface-2); --bs-border-color: var(--line); --bs-border-color-translucent: var(--line); --bs-border-radius: var(--radius-sm); --bs-border-radius-lg: var(--radius); --bs-link-color: var(--link); --bs-link-hover-color: var(--link-hover); --bs-link-color-rgb: 10, 90, 122; --bs-link-hover-color-rgb: 0, 49, 72; --bs-focus-ring-color: color-mix(in srgb, var(--focus) 35%, transparent); --bs-code-color: var(--st-bad-fg); --bs-highlight-bg: var(--mint); /* Utility-Farben (.text-*, .bg-*) – Textstärke, AA-tauglich */ --bs-primary-rgb: 0, 49, 72; --bs-success-rgb: 29, 107, 67; --bs-warning-rgb: 127, 69, 0; --bs-danger-rgb: 163, 0, 74; --bs-info-rgb: 11, 85, 99; --bs-secondary-rgb: 91, 108, 122; --bs-dark-rgb: 18, 35, 44; --bs-light-rgb: 245, 250, 251; } html[data-theme="dark"] { --bs-link-color-rgb: 152, 206, 199; --bs-link-hover-color-rgb: 194, 242, 239; --bs-primary-rgb: 152, 206, 199; --bs-success-rgb: 143, 224, 176; --bs-warning-rgb: 246, 201, 122; --bs-danger-rgb: 255, 156, 198; --bs-info-rgb: 166, 236, 228; --bs-secondary-rgb: 159, 181, 191; --bs-dark-rgb: 227, 238, 241; --bs-light-rgb: 17, 47, 62; }