/* ── Design-System (Themes über CSS-Variablen) ──────────── :root = Theme "hell" (auch Fallback vor JS-Load / Login). Akzent, Schriftart und -größe werden von app.js inline auf gesetzt und überschreiben jedes Theme. */ :root { --vbh-accent: #0d6efd; --vbh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --vbh-bg: #f5f6f8; --vbh-surface: #ffffff; --vbh-text: #212529; --vbh-muted: #6c757d; --vbh-border: #dee2e6; --vbh-input-bg: #ffffff; --vbh-navbar-bg: #212529; --vbh-navbar-text: #ffffff; --vbh-radius: .5rem; --vbh-shadow: 0 1px 2px rgba(0,0,0,.06); } body.theme-dark { --vbh-bg: #181a1f; --vbh-surface: #242830; --vbh-text: #e9ecef; --vbh-muted: #9aa4b0; --vbh-border: #3a3f4b; --vbh-input-bg: #2d323c; --vbh-navbar-bg: #0f1115; --vbh-navbar-text: #e9ecef; --vbh-radius: .5rem; --vbh-shadow: 0 2px 6px rgba(0,0,0,.45); } body.theme-ocean { --vbh-bg: #eef3fb; --vbh-surface: #ffffff; --vbh-text: #1b2b3a; --vbh-muted: #5a6b7b; --vbh-border: #d3e0ef; --vbh-input-bg: #ffffff; --vbh-navbar-bg: #12395f; --vbh-navbar-text: #eaf2fb; --vbh-radius: .9rem; --vbh-shadow: 0 6px 18px rgba(30,80,140,.12); } body.theme-business { --vbh-bg: #f8f9fa; --vbh-surface: #ffffff; --vbh-text: #1f2933; --vbh-muted: #66727e; --vbh-border: #ccd2d9; --vbh-input-bg: #ffffff; --vbh-navbar-bg: #2b3038; --vbh-navbar-text: #f1f3f5; --vbh-radius: .2rem; --vbh-shadow: none; } body.theme-warm { --vbh-bg: #faf5ef; --vbh-surface: #fffdfa; --vbh-text: #4a3f35; --vbh-muted: #8a7b6c; --vbh-border: #ecdfd0; --vbh-input-bg: #fffdfa; --vbh-navbar-bg: #7a4f3a; --vbh-navbar-text: #fbf3ec; --vbh-radius: 1rem; --vbh-shadow: 0 4px 14px rgba(120,80,50,.12); } body.theme-mint { --vbh-bg: #eef6f0; --vbh-surface: #ffffff; --vbh-text: #14342a; --vbh-muted: #5c7368; --vbh-border: #d3e6da; --vbh-input-bg: #ffffff; --vbh-navbar-bg: #1b6b4f; --vbh-navbar-text: #eafaf1; --vbh-radius: .75rem; --vbh-shadow: 0 6px 18px rgba(20,90,60,.12); } /* ── Variablen auf Elemente anwenden ─────────────────────── */ body { background-color: var(--vbh-bg); color: var(--vbh-text); font-family: var(--vbh-font); } #mainNav.navbar { background-color: var(--vbh-navbar-bg) !important; } #mainNav .navbar-brand, #mainNav .nav-link, #mainNav .navbar-text, #mainNav .navbar-toggler-icon { color: var(--vbh-navbar-text); } #mainNav .navbar-toggler { border-color: rgba(255,255,255,.3); } .card { background-color: var(--vbh-surface); color: var(--vbh-text); border-radius: var(--vbh-radius); box-shadow: var(--vbh-shadow); border-color: var(--vbh-border); } /* Tabellen (im Markup mit .bg-white) */ .bg-white { background-color: var(--vbh-surface) !important; color: var(--vbh-text); } .table { --bs-table-bg: transparent; color: var(--vbh-text); border-color: var(--vbh-border); } .table > :not(caption) > * > * { background-color: var(--vbh-surface); color: var(--vbh-text); border-color: var(--vbh-border); } .text-muted { color: var(--vbh-muted) !important; } /* Formularfelder (wichtig für Dark) */ .form-control, .form-select { background-color: var(--vbh-input-bg); color: var(--vbh-text); border-color: var(--vbh-border); } .form-control:focus, .form-select:focus { background-color: var(--vbh-input-bg); color: var(--vbh-text); border-color: var(--vbh-accent); box-shadow: 0 0 0 .2rem rgba(0,0,0,.05); } .form-control::placeholder { color: var(--vbh-muted); } /* Akzentfarbe auf Buttons & Links */ .btn-primary { background-color: var(--vbh-accent); border-color: var(--vbh-accent); } .btn-primary:hover, .btn-primary:focus { background-color: var(--vbh-accent); border-color: var(--vbh-accent); filter: brightness(.92); } .btn-outline-primary { color: var(--vbh-accent); border-color: var(--vbh-accent); } .btn-outline-primary:hover { background-color: var(--vbh-accent); border-color: var(--vbh-accent); color: #fff; } a { color: var(--vbh-accent); } .card-kpi .value { font-size: 1.75rem; font-weight: 600; } .text-einnahme { color: #198754; } .text-ausgabe { color: #dc3545; } .table-sm td, .table-sm th { vertical-align: middle; } .navbar-nav .nav-link.active { font-weight: 600; text-decoration: underline; } /* ── Theme-Vorschaukacheln (Einstellungen) ───────────────── */ .vbh-theme-kachel { cursor: pointer; border: 2px solid var(--vbh-border); border-radius: .5rem; overflow: hidden; transition: border-color .15s, box-shadow .15s; } .vbh-theme-kachel:hover { border-color: var(--vbh-muted); } .vbh-theme-kachel.selected { border-color: var(--vbh-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vbh-accent) 25%, transparent); } .vbh-preview { overflow: hidden; } /* ── Mobil (Smartphone) ───────────────────────────────── */ @media (max-width: 767.98px) { /* Breite Tabellen horizontal scrollbar statt Layout-Sprengung */ #app table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } /* Toolbar-Zeilen (Titel + Button, Filter) umbrechen lassen */ #app .d-flex.justify-content-between { flex-wrap: wrap; gap: .5rem; } /* Formular-Karten nicht durch feste max-width einengen */ #app .card { max-width: none !important; } /* Etwas kompaktere Überschriften auf kleinen Displays */ #app h3 { font-size: 1.4rem; } } /* Sortierbare Tabellenüberschriften (Buchungen): als klickbar erkennbar */ th[data-sort] { cursor: pointer; user-select: none; transition: background-color .12s ease; } th[data-sort]:hover { background-color: rgba(128, 128, 128, .18); text-decoration: underline; }