From 7fff1e9a845115f793b41981d739f67a6139a9b8 Mon Sep 17 00:00:00 2001
From: Mika <kontakt@donau2space.de>
Date: Tue, 24 Mar 2026 11:10:12 +0000
Subject: [PATCH] Add data_visualization/css/theme.css

---
 data_visualization/css/theme.css | 106 +++++++++++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 data_visualization/css/theme.css

diff --git a/data_visualization/css/theme.css b/data_visualization/css/theme.css
new file mode 100644
index 0000000..093b83b
--- /dev/null
+++ b/data_visualization/css/theme.css
@@ -0,0 +1,106 @@
+/* =============================================================
+   THEME STYLES - data_visualization
+   -------------------------------------------------------------
+   Enthält Farbdefinitionen und Unterstützung für Light/Dark-Mode
+   sowie Akzentfarben für Diagramme und markierte Datenpunkte.
+   ============================================================= */
+
+:root {
+  --color-light-background: #f8f9fa;
+  --color-light-surface: #ffffff;
+  --color-light-text: #212529;
+
+  --color-dark-background: #1e1e1e;
+  --color-dark-surface: #252526;
+  --color-dark-text: #e0e0e0;
+
+  --color-accent-primary: #007acc;
+  --color-accent-secondary: #ff9800;
+  --color-highlight: #4caf50;
+
+  --transition-theme: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* =============================================================
+   Color Modes
+   ============================================================= */
+
+[data-theme='light'] {
+  background-color: var(--color-light-background);
+  color: var(--color-light-text);
+  transition: var(--transition-theme);
+}
+
+[data-theme='light'] main,
+[data-theme='light'] section,
+[data-theme='light'] .card {
+  background-color: var(--color-light-surface);
+  color: var(--color-light-text);
+}
+
+[data-theme='dark'] {
+  background-color: var(--color-dark-background);
+  color: var(--color-dark-text);
+  transition: var(--transition-theme);
+}
+
+[data-theme='dark'] main,
+[data-theme='dark'] section,
+[data-theme='dark'] .card {
+  background-color: var(--color-dark-surface);
+  color: var(--color-dark-text);
+}
+
+/* =============================================================
+   Accent Colors
+   ============================================================= */
+
+.highlight {
+  color: var(--color-highlight);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.accent {
+  color: var(--color-accent-primary);
+  transition: color 0.2s ease;
+}
+
+.accent:hover,
+.accent:focus {
+  color: var(--color-accent-secondary);
+}
+
+/* =============================================================
+   Responsive Adjustments (optional for better UI readability)
+   ============================================================= */
+
+@media (min-width: 640px) {
+  body {
+    font-size: 1rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    font-size: 1.1rem;
+  }
+}
+
+/* =============================================================
+   Footer Branding (Konformitäts-Hinweis)
+   ============================================================= */
+
+footer {
+  font-size: 0.85rem;
+  color: var(--color-accent-secondary);
+  text-align: center;
+  margin-top: 2rem;
+}
+
+footer::after {
+  content: "© 2026 Donau2Space.de";
+  display: block;
+  margin-top: 0.5rem;
+  color: var(--color-dark-text);
+}