diff --git a/data_visualization/css/theme.css b/data_visualization/css/theme.css
new file mode 100644
index 0000000..c22923c
--- /dev/null
+++ b/data_visualization/css/theme.css
@@ -0,0 +1,106 @@
+/* ======================================================================
+   THEME: DARK MODE
+   Description: Hintergrund- und Textdefinitionen für dunkles Erscheinungsbild
+   ====================================================================== */
+
+.theme-dark {
+  --background-color: #1e1e1e;
+  --surface-color: #2a2a2a;
+  --text-color: #e0e0e0;
+  --text-muted-color: #a0a0a0;
+  --accent-color: #4dabf7;
+  --success-color: #6dbf73;
+  --warning-color: #d7b23e;
+  --error-color: #e57373;
+  --chart-unpinned: #64b5f6;
+  --chart-half-pinned: #81c784;
+  --chart-pinned: #ffb74d;
+  --border-color: #3a3a3a;
+
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
+.theme-dark .card,
+.theme-dark .panel {
+  background-color: var(--surface-color);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 1rem;
+}
+
+.theme-dark a {
+  color: var(--accent-color);
+  text-decoration: none;
+}
+.theme-dark a:hover {
+  text-decoration: underline;
+}
+
+/* ======================================================================
+   THEME: LIGHT MODE
+   Description: Farbdefinitionen für helles Erscheinungsbild
+   ====================================================================== */
+
+.theme-light {
+  --background-color: #f5f5f5;
+  --surface-color: #ffffff;
+  --text-color: #212121;
+  --text-muted-color: #616161;
+  --accent-color: #1976d2;
+  --success-color: #388e3c;
+  --warning-color: #f9a825;
+  --error-color: #d32f2f;
+  --chart-unpinned: #2196f3;
+  --chart-half-pinned: #66bb6a;
+  --chart-pinned: #ffa726;
+  --border-color: #e0e0e0;
+
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
+.theme-light .card,
+.theme-light .panel {
+  background-color: var(--surface-color);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 1rem;
+}
+
+.theme-light a {
+  color: var(--accent-color);
+  text-decoration: none;
+}
+.theme-light a:hover {
+  text-decoration: underline;
+}
+
+/* ======================================================================
+   GLOBAL CHART COLOR USAGE
+   ====================================================================== */
+
+.chart-unpinned {
+  color: var(--chart-unpinned);
+}
+.chart-half-pinned {
+  color: var(--chart-half-pinned);
+}
+.chart-pinned {
+  color: var(--chart-pinned);
+}
+
+footer {
+  font-size: 0.85rem;
+  color: var(--text-muted-color);
+  text-align: center;
+  margin-top: 2rem;
+  padding: 1rem 0;
+  border-top: 1px solid var(--border-color);
+}
+
+footer::after {
+  content: "© 2026 Donau2Space.de";
+  display: block;
+  margin-top: 0.5rem;
+}
\ No newline at end of file