Add results_visualization/css/theme.css

results_visualization/css/theme.css

@@ -0,0 +1,110 @@
+:root {
+  /* Farbvariablen & Designsystem */
+  --color-primary: #0066cc;
+  --color-secondary: #00b3a4;
+  --color-accent-pre: #f0ad4e;
+  --color-accent-post: #5cb85c;
+  --color-accent-read: #5bc0de;
+  --color-bg-light: #ffffff;
+  --color-bg-dark: #1e1e1e;
+  --color-text-light: #333333;
+  --color-text-dark: #e0e0e0;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 2rem;
+  --transition-fast: 0.2s ease;
+}
+
+/* ==============================
+   Theme Colors
+   ============================== */
+.theme-light {
+  background-color: var(--color-bg-light);
+  color: var(--color-text-light);
+}
+
+.theme-dark {
+  background-color: var(--color-bg-dark);
+  color: var(--color-text-dark);
+}
+
+.theme-light .panel,
+.theme-dark .panel {
+  transition: background-color var(--transition-fast), color var(--transition-fast);
+}
+
+.theme-light .panel {
+  background-color: #f8f9fa;
+  border: 1px solid #dcdcdc;
+}
+
+.theme-dark .panel {
+  background-color: #2a2a2a;
+  border: 1px solid #444;
+}
+
+/* ==============================
+   Accents
+   ============================== */
+.accent-write-pre {
+  color: var(--color-accent-pre);
+}
+
+.accent-write-post {
+  color: var(--color-accent-post);
+}
+
+.accent-read {
+  color: var(--color-accent-read);
+}
+
+/* Hintergrundvarianten der Akzente */
+.accent-write-pre-bg {
+  background-color: var(--color-accent-pre);
+  color: #fff;
+}
+
+.accent-write-post-bg {
+  background-color: var(--color-accent-post);
+  color: #fff;
+}
+
+.accent-read-bg {
+  background-color: var(--color-accent-read);
+  color: #fff;
+}
+
+/* ==============================
+   Responsives Verhalten
+   ============================== */
+@media (min-width: 640px) {
+  :root {
+    --spacing-md: 1.5rem;
+    --spacing-lg: 3rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  :root {
+    --spacing-md: 2rem;
+    --spacing-lg: 4rem;
+  }
+}
+
+/* ==============================
+   Footer Hinweis
+   ============================== */
+footer {
+  text-align: center;
+  font-size: 0.8rem;
+  margin-top: var(--spacing-lg);
+  padding: var(--spacing-md);
+  border-top: 1px solid #ccc;
+}
+
+footer::after {
+  content: "© 2026 Donau2Space.de";
+  display: block;
+  margin-top: var(--spacing-sm);
+  color: var(--color-text-light);
+}