Create style.css

style.css

@@ -0,0 +1,93 @@
+/* Hintergrund allgemein */
+body {
+  background: linear-gradient(135deg, #f9fafb, #eef2f7);
+  font-family: "Inter", "Segoe UI", sans-serif;
+  color: #222;
+  margin: 0;
+  padding: 0;
+}
+
+/* Seitenleiste */
+.sidebar {
+  background: #ffffffcc;
+  backdrop-filter: blur(10px);
+  padding: 20px;
+  border-right: 1px solid #ddd;
+}
+
+/* Chatfenster */
+.gr-chatbot {
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
+  padding: 20px;
+}
+
+/* Chatblasen */
+.gr-chatbot-message {
+  max-width: 80%;
+  padding: 10px 15px;
+  border-radius: 18px;
+  margin: 8px 0;
+  font-size: 15px;
+  line-height: 1.4;
+}
+
+/* User-Nachrichten */
+.gr-chatbot-message.user {
+  background: #2563eb;
+  color: white;
+  margin-left: auto;
+  border-bottom-right-radius: 4px;
+}
+
+/* Bot-Nachrichten */
+.gr-chatbot-message.bot {
+  background: #f3f4f6;
+  color: #111;
+  margin-right: auto;
+  border-bottom-left-radius: 4px;
+}
+
+/* Eingabefeld */
+input, textarea {
+  border-radius: 12px !important;
+  border: 1px solid #ddd !important;
+  padding: 10px 14px !important;
+  font-size: 15px !important;
+  outline: none;
+}
+
+/* Buttons */
+button {
+  border-radius: 12px !important;
+  padding: 8px 16px !important;
+  font-size: 15px !important;
+  background: #2563eb !important;
+  color: white !important;
+  border: none !important;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+button:hover {
+  background: #1e4ed8 !important;
+}
+
+/* Dark Mode (optional: falls Nutzer systemweit Dark Mode aktiv hat) */
+@media (prefers-color-scheme: dark) {
+  body {
+    background: linear-gradient(135deg, #0f172a, #1e293b);
+    color: #eee;
+  }
+  .gr-chatbot {
+    background: #1e293b;
+  }
+  .gr-chatbot-message.user {
+    background: #3b82f6;
+  }
+  .gr-chatbot-message.bot {
+    background: #334155;
+    color: #e5e7eb;
+  }
+}