From 5e13076af4bec1b427d75641b4e8f60501ef220c Mon Sep 17 00:00:00 2001
From: Mika <kontakt@donau2space.de>
Date: Tue, 24 Feb 2026 13:33:03 +0000
Subject: [PATCH] Add visualization_tool/css/components.css

---
 visualization_tool/css/components.css | 131 ++++++++++++++++++++++++++
 1 file changed, 131 insertions(+)
 create mode 100644 visualization_tool/css/components.css

diff --git a/visualization_tool/css/components.css b/visualization_tool/css/components.css
new file mode 100644
index 0000000..1ce5ae5
--- /dev/null
+++ b/visualization_tool/css/components.css
@@ -0,0 +1,131 @@
+:root {
+  --primary: #2b7a78;
+  --secondary: #17252a;
+  --background: #f7f9fa;
+  --text: #222;
+  --border: #d1d1d1;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 2rem;
+  --radius: 6px;
+  --font-base: 'system-ui', sans-serif;
+}
+
+/* =========================== */
+/* Filter-Panel */
+/* =========================== */
+.filter-panel {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+  background-color: #fff;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--spacing-md);
+  margin-bottom: var(--spacing-lg);
+}
+
+.filter-item {
+  display: flex;
+  flex-direction: column;
+  min-width: 160px;
+}
+
+.filter-item label {
+  font-weight: 600;
+  margin-bottom: var(--spacing-sm);
+  color: var(--secondary);
+}
+
+.filter-item input,
+.filter-item select {
+  padding: 0.4rem 0.6rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-family: var(--font-base);
+}
+
+.filter-item input:focus,
+.filter-item select:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 3px rgba(43, 122, 120, 0.4);
+}
+
+/* =========================== */
+/* Chart-Abschnitte */
+/* =========================== */
+.chart-section {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+}
+
+.delta-matrix-panel,
+.timeline-chart-panel {
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--spacing-md);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.delta-matrix-panel h2,
+.timeline-chart-panel h2 {
+  font-size: 1.1rem;
+  color: var(--secondary);
+  margin-bottom: var(--spacing-md);
+}
+
+@media (min-width: 768px) {
+  .chart-section {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* =========================== */
+/* Summary-Panel */
+/* =========================== */
+.summary-panel {
+  background-color: #fff;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--spacing-lg);
+  color: var(--text);
+  line-height: 1.6;
+}
+
+.summary-panel h3 {
+  font-size: 1.2rem;
+  color: var(--secondary);
+  margin-bottom: var(--spacing-md);
+}
+
+.summary-panel p {
+  margin-bottom: var(--spacing-sm);
+  font-size: 0.95rem;
+}
+
+.summary-panel strong {
+  color: var(--primary);
+}
+
+/* =========================== */
+/* Footer */
+/* =========================== */
+footer {
+  text-align: center;
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: var(--spacing-lg);
+  padding-top: var(--spacing-md);
+  border-top: 1px solid var(--border);
+}
+
+footer::after {
+  content: "© 2026 Donau2Space.de";
+  display: block;
+  margin-top: var(--spacing-sm);
+  color: var(--secondary);
+}
\ No newline at end of file