/* |-------------------------------------------------------------------------- | DJDirk-Lager V4 | Markenfarben (aus Moodboard_DJ_Dirk_FINAL.pdf) + Dark-Mode-Grundlage |-------------------------------------------------------------------------- | Kontrastwerte gegen WCAG AA geprüft (4.5:1 Normaltext, 3:1 große | Schrift/UI-Elemente). --primary ist für große Flächen/Icons/Badges | gedacht (3:1 reicht), --primary-dark für Buttons mit hellem Text | darauf (erreicht 4.5:1) und --accent-text, wenn die Akzentfarbe | selbst als Fließtext-Farbe auf hellem Hintergrund dient. |-------------------------------------------------------------------------- */ :root{ /* Akzent (Terracotta aus dem Moodboard) */ --primary:#a47265; --primary-rgb:164,114,101; --primary-dark:#8b6055; --accent-text:#835b50; /* Sidebar (Charcoal / dunkles Braun aus dem Moodboard) */ --sidebar:#454543; --sidebar-light:#635a50; --sidebar-muted:#bab2a8; /* Tabellenkopf: Hintergrund ist in beiden Modi dunkel (wie die Sidebar), daher fester heller Text statt var(--surface), die sich sonst im Dark Mode mitverdunkelt und unlesbar würde. */ --table-header-text:#f2efeb; /* Flächen */ --background:#f2efeb; --surface:#FFFFFF; --surface-subtle:#f6f3ef; /* Text */ --text:#2E2E2E; --text-muted:#6c6158; --border:#e5ddd3; /* Status (bewusst nicht markenfarbig - müssen sofort als gut/warnung/schlecht erkennbar bleiben) */ --success:#2E8B57; --warning:#F0AD4E; --danger:#C0392B; --shadow-sm:0 2px 8px rgba(0,0,0,.05); --shadow-md:0 8px 24px rgba(0,0,0,.08); --shadow-lg:0 15px 40px rgba(0,0,0,.12); --radius:16px; --radius-sm:12px; --radius-md:16px; --transition:.2s ease; /* Aliase für forms.css/tables.css */ --primary-hover:var(--primary-dark); --dark:var(--sidebar); --secondary:var(--text-muted); --text-light:var(--text-muted); --font-body:'Noto Sans Display','Inter',sans-serif; --font-heading:'Playfair Display',serif; } /* |-------------------------------------------------------------------------- | Dark Mode |-------------------------------------------------------------------------- | Wird aktiv, sobald oder die Klasse "dark-mode" trägt | (siehe assets/js/darkmode.js). Gleiche Markenfarben, umgekehrte | Helligkeits-Hierarchie: --surface ist im Dark Mode heller als | --background (Karten heben sich vom Hintergrund ab), genau wie im | Light Mode --surface heller als --background ist. */ body.dark-mode{ --primary:#c0997f; --primary-rgb:192,153,127; --primary-dark:#a47265; --accent-text:#c0997f; --sidebar:#1f1f1e; --sidebar-light:#2f2d2b; --background:#2a2a29; --surface:#454543; --surface-subtle:#3a3835; --text:#f2efeb; --text-muted:#c8b5a4; --border:#54504a; --shadow-sm:0 2px 8px rgba(0,0,0,.25); --shadow-md:0 8px 24px rgba(0,0,0,.35); --shadow-lg:0 15px 40px rgba(0,0,0,.45); } body{ background:var(--background); color:var(--text); font-family:var(--font-body); transition:background-color .2s, color .2s; } h1, h2, h3, h4, h5, h6{ font-family:var(--font-heading); } /* Bootstraps eigene .text-muted-Klasse nutzt sonst eine feste Bootstrap-Grundfarbe, die sich nicht an Light/Dark Mode anpasst. */ .text-muted{ color:var(--text-muted) !important; } /* Bootstrap-Dropdowns (z. B. Benachrichtigungen im Header) */ .dropdown-menu{ background:var(--surface); color:var(--text); border-color:var(--border); box-shadow:var(--shadow-md); } .dropdown-header{ color:var(--text-muted); } .dropdown-item-text{ color:var(--text); white-space:normal; } /* Karten */ .card{ background:var(--surface); color:var(--text); border:none; border-radius:var(--radius); box-shadow:var(--shadow-md); transition:.25s; } .card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); } /* Buttons */ .btn{ border-radius:12px; transition:.2s; } .btn-success{ background:var(--primary-dark); border-color:var(--primary-dark); color:#fff; } .btn-success:hover{ background:var(--primary); border-color:var(--primary); color:#fff; } /* Tabellen */ .table{ border-radius:var(--radius); color:var(--text); } .table tbody tr{ transition:.15s; } body.dark-mode .table, body.dark-mode .table thead, body.dark-mode .table tbody{ color:var(--text); background:var(--surface); } .table tbody tr:hover{ background:var(--background); }