Der Style der Ergebnisse muss überarbeitet werden

resources/assets/less/metager/result-page.less

@@ -186,7 +186,7 @@ a {
 }
 
 .description-container {
-    margin: 0!important;
+    margin: 0 !important;
 }
 
 .options-list>li {
@@ -211,7 +211,6 @@ a {
     display: none;
 }
 
-
 /* Hier der Style für die Bilder */
 
 #fit-width .masonry {
@@ -234,7 +233,6 @@ a {
     flex-wrap: wrap;
 }
 
-
 /* Placeholder für ladende Tabs */
 
 .loader {
@@ -284,7 +282,7 @@ a {
 }
 
 .lightslider {
-    overflow: visible!important;
+    overflow: visible !important;
 }
 
 #products {
@@ -317,7 +315,6 @@ a {
     }
 }
 
-
 /* New result style */
 
 .content-wrapper {
@@ -325,6 +322,8 @@ a {
     flex-direction: column;
 }
 
+@results-width-min: 500px;
+@quicktip-width-min: 400px;
 #resultpage-container {
     width: @result-width + @quicktip-width;
     align-self: left;
@@ -332,19 +331,6 @@ a {
     justify-content: left;
     margin-left: @results-margin-left;
     background-color: #FAFAFA;
-    @media (max-width: (2 * @results-margin-left + @result-width + @quicktip-width - 1px)) {
-        width: @result-width;
-        #additions-container {
-            display: none;
-            float: right;
-        }
-    }
-    @media (max-width: (2 * @results-margin-left + @result-width - 1px)) {
-        width: 100%;
-        justify-content: center;
-        margin: 0px;
-        padding: 0px @resultpage-leftbox-min-dist-left-right; // Verhindert, dass Text bei kleinen Bildschirmen an den Rand ragt
-    }
     #results-container {
         max-width: @result-width;
         width: 100%;
@@ -359,6 +345,36 @@ a {
             display: none;
         }
     }
+    @media (max-width: (4 * @padding-small-default + @result-width + @quicktip-width - 1px)) {
+        width: 100%;
+        margin-left: 0px;
+        padding-left: @padding-small-default;
+        padding-right: @padding-small-default;
+        justify-content: center;
+        #results-container {
+            min-width: @results-width-min;
+        }
+        #additions-container {
+            width: 100%;
+            max-width: 500px;
+            min-width: @quicktip-width-min;
+            padding-left: 2 * @padding-small-default;
+        }
+    }
+    @media (max-width: (@results-width-min + @quicktip-width-min - 1px)) {
+        #results-container {
+            width: 100%;
+            max-width: auto;
+            min-width: auto;
+        }
+        #additions-container {
+            display: none;
+        }
+        width: 100%;
+        justify-content: center;
+        margin: 0px;
+        padding: 0px @resultpage-leftbox-min-dist-left-right; // Verhindert, dass Text bei kleinen Bildschirmen an den Rand ragt
+    }
 }
 
 #spendenaufruf {

resources/assets/less/metager/searchbar.less

@@ -131,8 +131,8 @@
 }
 
 @resultpage-leftbox-max-width: @result-width;
-@resultpage-leftbox-min-dist-left-right: 8px;
-@resultpage-leftbox-min-dist-top-bottom: 8px;
+@resultpage-leftbox-min-dist-left-right: @padding-small-default;
+@resultpage-leftbox-min-dist-top-bottom: @padding-small-default;
 @resultpage-leftbox-big-screen-margin-left: 50px;
 header {
     display: -webkit-box;
@@ -147,7 +147,7 @@ header {
     width: @resultpage-leftbox-max-width + @resultpage-leftbox-big-screen-margin-left + 10;
     padding-left: @resultpage-leftbox-big-screen-margin-left;
     background-color: inherit;
-    @media (max-width: 799px) {
+    /*@media (max-width: 799px) {
         width: 100%;
         max-width: 799px;
         margin: 0px;
@@ -156,7 +156,7 @@ header {
         -webkit-box-align: center;
         -ms-flex-align: center;
         align-items: center;
-    }
+    }*/
     #research-bar {
         width: 100%;
         max-width: @resultpage-leftbox-max-width;
@@ -180,6 +180,19 @@ header {
             margin: 0px @resultpage-leftbox-min-dist-left-right;
         }
     }
+    @media (max-width: (4 * @padding-small-default + @result-width + @quicktip-width - 1px)) {
+        padding-left: @padding-small-default;
+    }
+    @media (max-width: (@results-width-min + @quicktip-width-min - 1px)) {
+        width: 100%;
+        max-width: 700px;
+        margin: 0px;
+        padding: @padding-small-default;
+        #research-bar {
+            max-width: none;
+            margin: 0px;
+        }
+    }
 }
 
 header:nth-child(1) {
@@ -198,7 +211,24 @@ header:nth-child(1) {
     margin-left: @resultpage-leftbox-big-screen-margin-left;
     padding-top: 8px;
     width: @resultpage-leftbox-max-width;
-    @media (max-width: 799px) {
+    @media (max-width: (4 * @padding-small-default + @result-width + @quicktip-width - 1px)) {
+        margin-left: @padding-small-default;
+    }
+    @media (max-width: (@results-width-min + @quicktip-width-min - 1px)) {
+        width: 100%;
+        max-width: none;
+        margin: 0px;
+        padding: @padding-small-default;
+        .scrollbox {
+            max-width: none;
+            margin: 0px;
+            #foki-box {
+                max-width: none;
+                margin: 0px;
+            }
+        }
+    }
+    /*@media (max-width: 799px) {
         width: 100%;
         margin: 0px;
         display: -webkit-box;
@@ -208,7 +238,7 @@ header:nth-child(1) {
         -ms-flex-pack: center;
         justify-content: center;
         padding: @resultpage-leftbox-min-dist-top-bottom @resultpage-leftbox-min-dist-left-right 0px @resultpage-leftbox-min-dist-left-right;
-    }
+    }*/
     #foki-box {
         display: -webkit-box;
         display: -ms-flexbox;

resources/assets/less/metager/variables.less

@@ -25,7 +25,8 @@ Arial,
 sans-serif;
 // General textual link color.
 @link-color: @metager-orange;
-
+//
+@padding-small-default: 8px;
 /* Unsorted */
 
 @quicktip-background-color: @color-white;