/* Bootstrap-Theme-Overrides + kleine Ergänzungen, angelehnt an https://dev.banss-austria.com/ (Farben, Schriften, Logo). */ :root { --color-navbar-bg: #0b1f30; /* dunkles Navy – Navbar-Hintergrund (immer, unabhängig vom Theme) */ --color-heading: #0b1f30; /* Überschriften-Farbe – passt sich per Dark Mode an */ --color-accent: #a52424; /* Rot – Buttons/Links */ --color-accent-dark: #8a1c1c; /* Rot hover */ --color-accent-light: #6ab6e6; /* Hellblau – Akzente */ /* Bootstrap-Variablen überschreiben, damit Buttons/Links etc. in BANSS-Farben erscheinen (siehe https://getbootstrap.com/docs/5.3/customize/css-variables/) */ --bs-primary: var(--color-accent); --bs-primary-rgb: 165, 36, 36; --bs-link-color: var(--color-accent); --bs-link-color-rgb: 165, 36, 36; --bs-link-hover-color: var(--color-accent-dark); --bs-link-hover-color-rgb: 138, 28, 28; --bs-body-font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; --bs-body-bg: #f9fafb; --bs-body-color: #12232f; } /* Dark Mode – wird über data-bs-theme="dark" auf aktiviert (siehe assets/js/theme.js). Bootstrap-Komponenten (Card, Form, Alert, ...) passen sich darüber bereits automatisch an; hier nur die eigenen Marken-Variablen für den dunklen Modus nachziehen. */ [data-bs-theme="dark"] { --color-heading: #e7edf2; --bs-body-bg: #0f1a24; --bs-body-color: #e7edf2; } body { font-family: var(--bs-body-font-family); } h1, h2, h3, h4, .navbar-brand { font-family: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 600; letter-spacing: 0.02em; } .text-brand-navy { color: var(--color-heading) !important; } .bg-brand-navy { background-color: var(--color-navbar-bg) !important; } /* Bootstrap kompiliert Komponentenfarben (Buttons, Fokus-Ringe, ...) als feste Hex-Werte statt var(--bs-primary) zu referenzieren. Diese Stellen müssen deshalb gezielt überschrieben werden. */ .btn-primary { --bs-btn-bg: var(--color-accent); --bs-btn-border-color: var(--color-accent); --bs-btn-hover-bg: var(--color-accent-dark); --bs-btn-hover-border-color: var(--color-accent-dark); --bs-btn-active-bg: var(--color-accent-dark); --bs-btn-active-border-color: var(--color-accent-dark); --bs-btn-disabled-bg: var(--color-accent); --bs-btn-disabled-border-color: var(--color-accent); --bs-btn-focus-shadow-rgb: 165, 36, 36; } .form-control:focus { border-color: var(--color-accent-light); box-shadow: 0 0 0 0.25rem rgba(106, 182, 230, 0.25); } /* ---------- Design-Switcher (Light/Dark) ---------- */ .theme-toggle { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: none; } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle-fixed { position: fixed; top: 1rem; right: 1rem; z-index: 1050; } /* ---------- Login / Install ---------- */ .auth-wrapper { min-height: 100vh; } .auth-card { width: 100%; max-width: 400px; } .auth-logo { max-width: 220px; height: auto; } /* ---------- Dashboard ---------- */ .app-card { color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .app-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 31, 48, 0.15); border-color: var(--color-accent-light) !important; } .app-card .icon { font-size: 2rem; }