diff --git a/h origin main b/h origin main
new file mode 100644
index 0000000..af3575e
--- /dev/null
+++ b/h origin main	
@@ -0,0 +1,3 @@
+12a7e43 (HEAD -> main) fix(ui): Volume Slider sichtbar gemacht; System Theme entfernt; theme-spezifische Slider Styles
+7b8cb11 (origin/main, origin/HEAD) feat(frontend): Stitch-Layouts (Light/Dark/Rainbow) 1:1 übernommen; JSX migriert; Funktionen erhalten
+a860270 chore(frontend): index.html vorbereitet (Tailwind CDN + Google Fonts)
diff --git a/web/src/styles.css b/web/src/styles.css
index 3bf1161..64d21c6 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -197,6 +197,37 @@ header p { opacity: .8; }
 .control.volume { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
 .control.volume label { font-weight: 700; opacity: .9; }
 
+/* Volume Slider - Base Styles */
+.control.volume input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 8px;
+  border-radius: 5px;
+  outline: none;
+  cursor: pointer;
+}
+
+.control.volume input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+}
+
+.control.volume input[type="range"]::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+}
+
 /* Volume Slider - Dark Theme */
 [data-theme="dark"] .control.volume input[type="range"] { 
   accent-color: #0a84ff; 
@@ -205,6 +236,14 @@ header p { opacity: .8; }
   height: 8px;
 }
 
+[data-theme="dark"] .control.volume input[type="range"]::-webkit-slider-thumb {
+  background: #0a84ff;
+}
+
+[data-theme="dark"] .control.volume input[type="range"]::-moz-range-thumb {
+  background: #0a84ff;
+}
+
 /* Volume Slider - Light Theme */
 [data-theme="light"] .control.volume input[type="range"] { 
   accent-color: #007aff; 
@@ -213,6 +252,14 @@ header p { opacity: .8; }
   height: 8px;
 }
 
+[data-theme="light"] .control.volume input[type="range"]::-webkit-slider-thumb {
+  background: #007aff;
+}
+
+[data-theme="light"] .control.volume input[type="range"]::-moz-range-thumb {
+  background: #007aff;
+}
+
 /* Volume Slider - Rainbow Theme */
 [data-theme="rainbow"] .control.volume input[type="range"] { 
   accent-color: #23a6d5; 
@@ -222,6 +269,14 @@ header p { opacity: .8; }
   border: 1px solid #3a3a3c;
 }
 
+[data-theme="rainbow"] .control.volume input[type="range"]::-webkit-slider-thumb {
+  background: linear-gradient(45deg, #23a6d5, #e73c7e);
+}
+
+[data-theme="rainbow"] .control.volume input[type="range"]::-moz-range-thumb {
+  background: linear-gradient(45deg, #23a6d5, #e73c7e);
+}
+
 .error { background: rgba(255, 99, 99, .12); color: #ffd1d1; border: 1px solid rgba(255, 99, 99, .3); padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; }
 
 .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }