From 106ac2fe2c5b587fcf5c8caf9009cdb4d4633c64 Mon Sep 17 00:00:00 2001
From: Lukas Zimmer <l.zimmer@spawntree.de>
Date: Mon, 11 Mar 2024 11:21:44 +0100
Subject: [PATCH] Verbesserungen MH mobil

---
 .../marketingheader/marketingheader.scss      | 63 ++++++++++++++-----
 1 file changed, 47 insertions(+), 16 deletions(-)

diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss
index 7c86191..0d5bb20 100644
--- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss
+++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss
@@ -42,11 +42,11 @@ section.marketingheader{
         }
       }
       .close-search{
-        display:none;
-        position: absolute;
-        right:30px;
-        top:33px;
-        left:auto;
+          display:none;
+          position: absolute;
+          right:30px;
+          top:33px;
+          left:auto;
           cursor: pointer;
           transition: 0.3s ease;
           border: 2px solid var(--theme-color-primary-dimmed-04);
@@ -105,6 +105,7 @@ section.marketingheader{
       transition: 0.25s ease;
       @media(max-width: 767px) {
         font-size: 18px;
+        margin-top: 8px auto !important;
       }
     }
     + section, + #toclist > section:first-child {
@@ -525,7 +526,6 @@ section.marketingheader{
   
   }
   &.hero-fullwidth{
-    max-height:566px;
     .mainstage.container{
       max-width: 1920px;
       width:100%;
@@ -543,14 +543,28 @@ section.marketingheader{
         margin:0 !important;
         position: relative;
         justify-content: center;
-        max-height:566px;
+        @media screen and (min-width:901px) {
+          max-height:566px;
+        }
       }
       .slider{
         background-color: transparent;
+        
+        .image-box img {
+          @media screen and (max-width:900px) {
+            height: 300px;
+          }
+          @media screen and (max-width:767px) {
+            height: 300px;
+          }
+          
+        }
         .slide.text-only.current {
           background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
         }
       }
+      
+    
     }
     .image-box{
       width:100%;
@@ -587,15 +601,26 @@ section.marketingheader{
       }
     }
     .text-box{
-      position: absolute;
       height: 100%;
       color:white;
       width: var(--container-width);
       padding: 0 var(--container-padding);
       max-width: 100%;
       margin: 0 auto;
+      @media screen and (min-width:901px) {
+        position: absolute;
+        *{
+          color:white;
+        }
+        .btn{
+          background-color: white !important;
+          color:var(--theme-color-primary) !important;
+          &:hover:after{
+            box-shadow: 0 0 0 var(--button-hover-shadow-size) white !important;
+          }
+        }
+      }
       *{
-        color:white;
         max-width:580px;
       }
       &:after{
@@ -604,13 +629,6 @@ section.marketingheader{
       &:before{
         display:none;
       }
-      .btn{
-        background-color: white !important;
-        color:var(--theme-color-primary) !important;
-        &:hover:after{
-          box-shadow: 0 0 0 var(--button-hover-shadow-size) white !important;
-        }
-      }
     }
     .controls{
       width: var(--container-width);
@@ -618,6 +636,10 @@ section.marketingheader{
       max-width: 100%;
       margin: 0 auto;
       position: relative;
+      @media screen and (max-width:900px){
+        position: absolute !important;
+        top: 0;
+      }
     }
   }
   .rotation{
@@ -629,6 +651,15 @@ section.marketingheader{
           top:0;
           height: auto;
           bottom: auto;
+          @media screen and (max-width:767px){
+            .btn{
+              --button-icon-padding: 30px;
+              --button-icon-offset: 5px;
+              --button-padding: 5px 10px;
+              --button-min-size: 30px;
+              margin: 2.5px;
+            }
+          }
         }
         .text-box{
           padding: var(--container-padding);