Menü verbessert: Button zur Qualitätsauswahl, Pfeilchen im DropDown

style.css

@@ -43,7 +43,7 @@ body{
 }
 
 .logos{
-  margin-top:50px;
+  margin-top:30px;
   margin-left: 12px;
   opacity:0.8;
 }
@@ -152,6 +152,21 @@ select{
   
 }
 
+.selectWrapper{
+  position:relative;
+  width:100%;
+}
+
+.selectArrow{
+  position:absolute;
+  right:14px;
+  top:48%;
+  transform:translateY(-50%);
+  pointer-events:none;
+  font-size:14px;
+  color:#000000;
+}
+
 #disable{
   appearance:none;
   -webkit-appearance:none;
@@ -175,7 +190,7 @@ select{
   cursor:pointer;
   transition:0.2s;
   margin-top: 8px;
-  margin-bottom: 6px;
+  margin-bottom: 12px;
 }
 
 select:hover{
@@ -210,7 +225,7 @@ footer{
   font-size: small;
 }
 
-#pointSliderValue, #pointSizeSliderValue{
+.sideBarText{
 font-size:80%;
 margin:0;
 }
@@ -309,4 +324,42 @@ input[type="range"]::-webkit-slider-thumb{
 position: absolute;
   left: 5px;
   padding:5px 15px;
+}
+
+#buttonRow{
+  display: flex;
+  width: 100%;
+  border: none;
+  border-radius: 14px;
+  overflow:hidden;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
+  margin-bottom: 12px;
+  }
+
+.qualityButtons{
+  flex: 1;
+  margin: 0;
+  appearance:none;
+  -webkit-appearance:none;
+  -moz-appearance:none;
+  border:none;
+  background:rgba(255,255,255,0.92);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
+  font-size:12px;
+  color:#0f172a;
+  padding:5px;
+  cursor:pointer;
+  transition:0.2s;
+}
+
+.qualityButtons.active{
+    background:
+    linear-gradient(
+      135deg,
+      rgba(18, 77, 216, 0.92) 10%,
+      rgba(13, 61, 175, 0.92) 60%,
+      rgba(6, 45, 135, 0.92) 100%
+    ),
+    rgba(6, 45, 135, 0.92);
+    color: #ffffff;
 }