buttons für farbdarstellung hinzugefügt

style.css

@@ -43,7 +43,7 @@ body{
 }
 
 .logos{
-  margin-top:30px;
+  margin-top:25px;
   margin-left: 12px;
   opacity:0.8;
 }
@@ -94,7 +94,7 @@ body{
 
 #sidebar {
   position: absolute;
-  top: 50%;
+  top: 48%;
   transform:translateY(-50%);
   left: 20px;
   width: 200px;
@@ -107,7 +107,7 @@ body{
   z-index: 20;
   display: flex;          
   flex-direction: column;
-  gap:10px;
+  gap:8px;
 }
 
 #main {
@@ -139,11 +139,11 @@ select{
   -webkit-appearance:none;
   -moz-appearance:none;
   width:100%;
-  padding:14px 16px;
+  padding:10px 16px;
   border:none;
   border-radius:14px;
   background:rgba(255,255,255,0.92);
-  font-size:15px;
+  font-size:14px;
   font-weight:500;
   color:#0f172a;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
@@ -172,7 +172,7 @@ select{
   -webkit-appearance:none;
   -moz-appearance:none;
   width:100%;
-  padding:14px 16px;
+  padding:10px 16px;
   border:none;
   border-radius:14px;
    background:
@@ -183,14 +183,14 @@ select{
       rgba(6, 45, 135, 0.92) 100%
     ),
     rgba(6, 45, 135, 0.92);
-  font-size:15px;
+  font-size:14px;
   font-weight:500;
   color:#ffffff;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
   cursor:pointer;
   transition:0.2s;
   margin-top: 8px;
-  margin-bottom: 12px;
+  margin-bottom: 10px;
 }
 
 select:hover{
@@ -326,17 +326,17 @@ position: absolute;
   padding:5px 15px;
 }
 
-#buttonRow{
+.buttonRow{
   display: flex;
   width: 100%;
   border: none;
-  border-radius: 14px;
+  border-radius: 10px;
   overflow:hidden;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
-  margin-bottom: 12px;
+  margin-bottom: 10px;
   }
 
-.qualityButtons{
+.qualityButtons, .colorButtons{
   flex: 1;
   margin: 0;
   appearance:none;
@@ -352,7 +352,7 @@ position: absolute;
   transition:0.2s;
 }
 
-.qualityButtons.active{
+.qualityButtons.active, .colorButtons.active{
     background:
     linear-gradient(
       135deg,