marketing hero 2026

gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js

@@ -118,8 +118,11 @@ export const createMarketingHeader =
       const contextBoxContent = slideData.context ? slideData.context : '';
       const contextBoxContentImg = slideData.contextImg ? slideData.contextImg : '';
 
+      // Image-Box wird IMMER erstellt
+      const imageBox = createElement('div', ['image-box'], null, outer);
+
+      // Bild wird nur gerendert, wenn imageSrc vorhanden
       if (slideData.imageSrc && slideData.imageSrc.length > 0) {
-        const imageBox = createElement('div', ['image-box'], null, outer);
         const picture = createElement('picture', [], null, imageBox);
         const src1 = createElement('source', [], null, picture);
         src1.setAttribute('media','(min-width: 1000px)');
@@ -131,23 +134,36 @@ export const createMarketingHeader =
         const copyright = createElement('span', ['copyright'], 'Copyright-Angabe', imageBox);
         copyright.setAttribute("aria-hidden", "true");
         createElement('span', ['sr-only'], 'Copyright-Angabe', imageBox);
-        if (contextBoxContentImg) {
-          const contentBoxImg = createElement('div', ['context-box', 'context-box--image'], null, imageBox);
-          createImage(contextBoxContentImg, 200, 50, '', [], contentBoxImg);
-        } else if (contextBoxContent) {
-          createElement('div', ['context-box'], contextBoxContent, imageBox);
-        }
+      } else {
+        const textInImageBox = createElement('div', ['text-in-image-box'], null, imageBox);
+        createElement('div', ['icon', 'pictogram-bueroklammer'], null, textInImageBox);
+        createElement('p', [], 'Wachstum durch Innovation lorem ipsum dolor sit amet', textInImageBox);
+      }
+
+      // Context-Box immer in image-box (egal ob Bild oder nicht)
+      if (contextBoxContentImg) {
+        const contentBoxImg = createElement('div', ['context-box', 'context-box--image'], null, imageBox);
+        createImage(contextBoxContentImg, 200, 50, '', [], contentBoxImg);
+      } else if (contextBoxContent) {
+        createElement('div', ['context-box'], contextBoxContent, imageBox);
       }
 
       const textBox = createElement('div', ['text-box'], null, outer);
 
+      // Klasse 'context' hinzufügen, wenn kein Bild vorhanden
+      if (!slideData.imageSrc || slideData.imageSrc.length <= 0) {
+        if (contextBoxContent || contextBoxContentImg) {
+          textBox.classList.add('context');
+        }
+      }
+
       if (slideData.kicker && slideData.kicker.length > 0) {
         createElement('span', ['kicker'], slideData.kicker, textBox);
       }
       if (slideData.headline && slideData.headline.length > 0) {
         createElement('div', ['like-h2'], slideData.headline, textBox);
       }
-      if (slideData.kicker && slideData.kicker.length > 0) {
+      if (slideData.copy && slideData.copy.length > 0) {
         createElement('p', [], slideData.copy, textBox);
       }
       if (slideData.cta && slideData.link) {
@@ -157,18 +173,6 @@ export const createMarketingHeader =
         });
         buttonP.appendChild(btn);
       }
-
-      if (!slideData.imageSrc || slideData.imageSrc.length <= 0) {
-        if (contextBoxContent) {
-          textBox.classList.add('context');
-          if (contextBoxContentImg) {
-            const contentBox = createElement('div', ['context-box', 'context-box--image'], null, textBox);
-            createImage(contextBoxContentImg, 200, 50, '', [], contentBox);
-          } else if (contextBoxContent) {
-            createElement('div', ['context-box'], contextBoxContent, textBox);
-          }
-        }
-      }
     });
 
     new IHKMHSlider($(sliderComponent));

gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js

@@ -79,7 +79,7 @@ export const sliderData = [
   },
   {
     kicker: 'Lorem Ipsum dolor 2',
-    headline: 'Möglichkeiten der Integration',
+    headline: 'Weitere Möglichkeiten der Integration',
     copy: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
     imageSrc: null,
     cta: 'Mehr erfahren',
@@ -88,7 +88,7 @@ export const sliderData = [
   },
   {
     kicker: 'Lorem Ipsum dolor 2',
-    headline: 'Möglichkeiten der Integration',
+    headline: 'Integration auf drittem Weg',
     copy: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
     imageSrc: './dummy/placeholder-3-2.svg',
     cta: 'Mehr erfahren',

gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss

@@ -6,7 +6,7 @@ section.marketingheader {
 
   &.miniinfoteaser {
     .kicker {
-      color: var(--theme-color-secondary);
+      //color: var(--theme-color-secondary);
     }
 
     .mini-teaser {
@@ -16,13 +16,13 @@ section.marketingheader {
     }
 
     .text-only .kicker {
-      color: white;
+      //color: white;
     }
   }
 
   .rotation {
     .slider {
-      @media(min-width: 901px) {
+      @media(min-width: 1000px) {
         height: 100%;
         .slide-overflow {
           height: 100% !important;
@@ -42,11 +42,16 @@ section.marketingheader {
       .image-box {
         picture {
           width: 100%;
+          @media(max-width: 999px) {
+            position: static;
+            left: auto;
+            top: auto;
+          }
         }
       }
 
       .copyright {
-        @media(max-width: 900px) {
+        @media(max-width: 999px) {
           left: calc(100% - 30px);
         }
         @media(max-width: 767px) {
@@ -591,9 +596,9 @@ section.marketingheader {
       padding: 0;
       @media screen and (max-width: 999px) {
         .slide:not(.text-only) .text-box {
-          padding: 16px 0;
+          //padding: 16px 0;
         }
-        .slide .image-box img {
+        .slide .image-box :not(.context-box--image) img {
           position: static;
           height: 300px;
         }
@@ -604,7 +609,7 @@ section.marketingheader {
           margin-top: 15px;
         }
       }
-      @media screen and (max-width: 900px) {
+      @media screen and (max-width: 999px) {
         .slider .image-box {
           padding-left: var(--container-padding);
           padding-right: var(--container-padding);
@@ -622,7 +627,7 @@ section.marketingheader {
     .outer {
       border-radius: 4px;
 
-      .image-box img {
+      .image-box picture img {
         border-radius: 4px;
       }
     }
@@ -638,25 +643,27 @@ section.marketingheader {
           min-height: 427px;
           height: 100%;
         }
-      }
-
-      img {
-        object-position: right;
-        @media(min-width: 1000px) {
-          min-height: 427px;
-          height: 100%;
+        img {
+          object-position: right;
+          @media(min-width: 1000px) {
+            min-height: 427px;
+            height: 100%;
+          }
         }
       }
     }
 
     .mainstage {
-      @media screen and (max-width: 900px) {
-        padding: 0;
+      @media screen and (max-width: 999px) {
+        padding: 14px 0 0 0;
+      }
+      @media screen and (max-width: 767px) {
+        padding-top: 4px;
       }
 
       .row {
         margin: 16px 0;
-        @media screen and (min-width: 901px) {
+        @media screen and (min-width: 1000px) {
           margin: 30px -8px 0;
         }
 
@@ -664,7 +671,7 @@ section.marketingheader {
           flex: 1 1 100%;
           max-width: 100%;
 
-          @media screen and (min-width: 901px) {
+          @media screen and (min-width: 1000px) {
             padding: 0 8px;
             flex: 1 1 calc(100% - 322px);
             max-width: calc(100% - 322px);
@@ -678,7 +685,7 @@ section.marketingheader {
             justify-content: space-between;
             margin: 0;
             padding: 0 var(--container-padding);
-            @media screen and (min-width: 901px) {
+            @media screen and (min-width: 1000px) {
               flex: 1 1 322px;
               max-width: 322px;
               padding: 0 8px;
@@ -717,7 +724,10 @@ section.marketingheader {
     .mainstage.container {
       /*max-width: 1920px;*/
       width: 100%;
-      padding: 0;
+      padding: 30px 0 0 0;
+      @media (max-width: 767px) {
+        padding-top: 20px;
+      }
 
       > .row {
         margin: 0;
@@ -733,7 +743,9 @@ section.marketingheader {
         margin: 0 !important;
         position: relative;
         justify-content: center;
-        max-height: 566px;
+        @media (min-width: 1000px) {
+          max-height: 566px;
+        }
       }
 
       .copyright {
@@ -749,31 +761,126 @@ section.marketingheader {
       .slider {
         background-color: transparent;
 
-        .image-box img {
+        .image-box {
+          &:before {
+            display: none;
+          }
+          :not(.context-box--image) img {
+            @media (max-width: 999px) {
+              min-height: calc(18vw + 300px) !important;
+            }
+          }
+          .context-box {
+            right: 0;
+            @media (max-width: 999px) {
+              top: 72px;
+            }
+            @media (max-width: 767px) {
+              top: 64px;
+            }
+          }
+        }
+
+        .slide:not(.text-only) .image-box {
           @media (max-width: 999px) {
-            min-height: calc(18vw + 300px) !important;
+            margin: 0 30px;
+            width: auto;
+            height: auto;
+            &:after {
+              border-radius: 4px;
+            }
+            picture img {
+              border-radius: 4px;
+              min-height: auto !important;
+            }
+          }
+          @media (max-width: 767px) {
+            margin: 0 20px;
+          }
+        }
+
+        .controls {
+          right: 35px;
+        }
+
+        .slide.text-only {
+          .image-box {
+            &:after {
+              display: none;
+            }
+          }
+          @media (min-width: 1000px) {
+            .text-box {
+              display: flex;
+              height: auto;
+              min-height: auto;
+              top: 50%;
+              transform: translate(0,-50%);
+            }
+          }
+          @media (min-width: 1000px) {
+            .text-in-image-box {
+              p {
+                display: none;
+              }
+            }
+          }
+
+          @media (min-width: 1000px) {
+            .image-box:has(.icon) ~ .text-box {
+              padding-left: 176px;
+            }
+            .image-box {
+              .text-in-image-box {
+                width: auto;
+                left: 36px;
+                transform: translate(0, -50%);
+                margin-top: 36px;
+                @media (min-width: 1230px) {
+                  left: 50%;
+                  margin-left: -580px;
+                }
+                @media (min-width: 1340px) {
+                  margin-left: -695px;
+                }
+                @media (min-width: 1340px) {
+                  margin-left: -47.5vw;
+                }
+                @media (min-width: 1460px) {
+                  margin-left: -695px;
+                }
+              }
+              .icon {
+                width: 120px;
+                height: 120px;
+                &:before {
+                  font-size: 120px;
+                }
+              }
+            }
           }
         }
 
         .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%);
+          //background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
         }
 
         .slide-overflow {
           height: 100% !important;
         }
       }
-
-
     }
 
+
     .image-box {
       width: 100%;
       flex: 1 1 100%;
       max-width: 100%;
-      max-height: 566px;
       position: relative;
       padding-right: 0 !important;
+      @media (min-width: 1000px) {
+        max-height: 566px;
+      }
 
       &:after {
         position: absolute;
@@ -796,7 +903,7 @@ section.marketingheader {
         position: static;
       }
 
-      img {
+      :not(.context-box--image) img {
         object-fit: cover;
         z-index: -1;
         left: 0 !important;
@@ -813,15 +920,19 @@ section.marketingheader {
       padding: 0 var(--container-padding);
       max-width: 100%;
       margin: 0 auto;
-      position: absolute;
+      @media (min-width: 1000px) {
+        position: absolute;
 
-      * {
-        color: white;
+        * {
+          color: white;
+        }
       }
 
       .btn {
-        background-color: white !important;
-        color: var(--theme-color-primary) !important;
+        @media (min-width: 1000px) {
+          background-color: white !important;
+          color: var(--theme-color-primary) !important;
+        }
 
         &:hover:after {
           box-shadow: 0 0 0 var(--button-hover-shadow-size) white !important;
@@ -842,20 +953,20 @@ section.marketingheader {
     }
 
     .slide.text-only {
-      @media screen and (max-width: 900px) {
-        padding: 16px var(--container-padding) 0;
-      }
-
-      .text-box {
-        width: auto;
-        @media (max-width: 999px) {
-          min-height: calc(18vw + 300px) !important;
-        }
-        @media screen and (max-width: 900px) {
-          padding-left: 0;
-          padding-right: 0;
-        }
-      }
+      //@media screen and (max-width: 900px) {
+      //  padding: 16px var(--container-padding) 0;
+      //}
+      //
+      //.text-box {
+      //  width: auto;
+      //  @media (max-width: 999px) {
+      //    min-height: calc(18vw + 300px) !important;
+      //  }
+      //  @media screen and (max-width: 900px) {
+      //    padding-left: 0;
+      //    padding-right: 0;
+      //  }
+      //}
     }
 
     .controls {
@@ -866,7 +977,7 @@ section.marketingheader {
       position: relative;
 
       .slider-tabs {
-        right: 30px;
+        right: -10px;
       }
     }
   }
@@ -879,6 +990,7 @@ section.marketingheader {
     h3, .like-h2 {
       margin-top: 4px;
       margin-bottom: 8px;
+      line-height: 1.1;
     }
 
     .kicker {
@@ -943,25 +1055,36 @@ section.marketingheader {
     }
 
     .slide.text-only.current {
-      background: none;
-
-      .outer {
-        background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
-
-        .text-box {
-          justify-content: center;
-          max-width: 580px;
-        }
-      }
+      //background: none;
+      //
+      //.outer {
+      //  background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
+      //
+      //  .text-box {
+      //    justify-content: center;
+      //    max-width: 580px;
+      //  }
+      //}
     }
 
     .text-box {
       color: var(--theme-color-primary);
-      padding: 30px 36px 24px 36px;
+      padding: 30px 20px 24px 20px;
       display: flex;
       flex-flow: column;
       justify-content: center;
       min-width: 324px;
+      @media(min-width: 1000px) {
+        padding-left: 36px;
+        padding-right: 36px;
+      }
+      @media(max-width: 999px) {
+        padding: 16px 30px 24px 30px;
+      }
+      @media(max-width: 767px) {
+        padding-left: 20px;
+        padding-right: 20px;
+      }
 
       &:not(:first-child)::before {
         background-color: var(--theme-color-primary-dimmed-04);
@@ -978,8 +1101,53 @@ section.marketingheader {
     }
 
     .text-only {
+      .image-box {
+        background: linear-gradient(149deg, var(--theme-color-gradient-01) 46.62%, var(--theme-color-gradient-02) 84.79%, var(--theme-color-gradient-03) 112.16%);
+        @media (max-width: 999px) {
+          width: calc(100vw - (2 * var(--container-padding)));
+          height: calc((100vw - (2 * var(--container-padding))) * 2 / 3);
+          flex: auto;
+          margin: 0 auto;
+          border-radius: 4px;
+        }
+        .text-in-image-box {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          width: 80%;
+          transform: translate(-50%, -50%);
+          color: var(--theme-color-white);
+          text-align: center;
+          .icon {
+            width: 100px;
+            height: 100px;
+            overflow: hidden;
+            position: relative;
+            margin: 0 auto;
+            &:before {
+              display: block;
+              position: absolute;
+              left: 0;
+              top: 0;
+              font-family: "Pictograms",sans-serif;
+              color: var(--theme-color-white);
+              font-size: 90px;
+              line-height: 1;
+            }
+          }
+          p {
+            font-size: 36px;
+            line-height: 43.20px;
+            @media (max-width: 767px) {
+              font-size: 24px;
+              line-height: 28.80px;
+            }
+          }
+        }
+      }
       .text-box {
-        color: white;
+        display: block;
+        //color: white;
       }
     }
   }
@@ -1010,46 +1178,46 @@ section.marketingheader {
         .image-box {
           order: 0;
           height: auto;
-          max-height: none !important;
+          //max-height: none !important;
 
-          img {
-            aspect-ratio: 16 / 9;
+          :not(.context-box--image) img {
+            aspect-ratio: 3 / 2;
             height: auto !important;
             max-height: none !important;
             min-height: 177px !important;
+            position: static;
           }
 
           &:before {
             display: none;
           }
-
-          img {
-            position: static;
-          }
         }
       }
     }
-    @media screen and (max-width: 900px) {
+    @media screen and (max-width: 999px) {
       .slider {
         margin-bottom: 20px;
 
         .slide:not(.text-only) {
           .text-box {
-            padding: 16px var(--container-padding) 0;
+            //padding: 16px var(--container-padding) 0;
           }
         }
 
         .slide.text-only {
-          padding-left: var(--container-padding);
-          padding-right: var(--container-padding);
+          //padding-left: var(--container-padding);
+          //padding-right: var(--container-padding);
         }
 
         .controls {
           position: absolute;
-          right: 20px;
-          bottom: 27px;
+          right: 26px;
+          top: 10px;
           width: auto;
           padding: 0;
+          @media screen and (min-width: 768px) {
+            right: 36px;
+          }
         }
 
         .slider-tabs {
@@ -1068,7 +1236,7 @@ section.marketingheader {
     @media screen and (max-width: 767px) {
       .slider {
         .slide:not(.text-only) .text-box {
-          padding: 16px var(--container-padding);
+          //padding: 16px var(--container-padding);
         }
       }
     }
@@ -1079,8 +1247,19 @@ section.marketingheader {
       }
     }
 
-    .context-box {
-      display: none !important;
+    .image-box .context-box {
+      @media screen and (max-width: 999px) {
+        top: 74px;
+        &.context-box--image {
+          right: 30px;
+        }
+      }
+      @media screen and (max-width: 767px) {
+        top: 64px;
+        &.context-box--image {
+          right: 20px;
+        }
+      }
     }
   }
 }

gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js

@@ -3,26 +3,46 @@ import 'jquery.easing';
 import Slider from "../slider/slider";
 
 class IHKMHSlider {
-  constructor(section) {
-    this.section = section.addClass('initiated');
-    this.slider = new Slider(section);
-    this.slider.settings = {
-      loop: true,
-      autoplay: true,
-      infinite: true,
-      autoplaySpeed: 7000,
-      animationSpeed: 600,
-      startSlide: 1,
-    };
-  }
+    constructor(section) {
+        this.section = section.addClass('initiated');
+        this.slider = new Slider(section);
+        this.slider.settings = {
+            loop: true,
+            autoplay: true,
+            infinite: true,
+            autoplaySpeed: 700000,
+            animationSpeed: 600,
+            startSlide: 1,
+        };
+
+        this.section.on('slide-change', () => this.syncHeights());
+        requestAnimationFrame(() => this.syncHeights());
+
+        $(window).on('resize', () => this.syncHeights());
+    }
+
+    syncHeights() {
+        if (!this.section.closest('.hero-fullwidth').length) return;
+
+        this.section.find('.slide').each(function () {
+            const textBox = $(this).find('.text-box');
+            const textInImageBox = $(this).find('.text-in-image-box');
+
+            if ($(window).width() > 999) {
+                textInImageBox.height(textBox.innerHeight() - 36);
+            } else {
+                textInImageBox.css('height', '');
+            }
+        });
+    }
 }
 
 export default IHKMHSlider;
 
 $('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () {
-  $('.slider:not(.initiated)').each(function() {
-    new IHKMHSlider($(this));
-  });
+    $('.slider:not(.initiated)').each(function () {
+        new IHKMHSlider($(this));
+    });
 });
 
 

gfi-ihk-2024/stories/sections/slider/slider.js

@@ -59,7 +59,7 @@ class IHKSlider {
       const p = h3.next('p');
       const dotsString = '…'
 
-      if (!slide.find('.image-box').length) {
+      if (!slide.find('.image-box img').length) {
         slide.addClass('text-only');
       } else {
         if (h3.text().length > 48) {

gfi-ihk-2024/stories/sections/slider/slider.scss

@@ -277,9 +277,10 @@
     top: 40px;
     z-index: 100;
     min-width: 100px;
-    min-height: 47px;
-    padding: 8px 10px 10px 10px;
+    //min-height: 52px;
+    padding: 0 10px 0 10px;
     @include h4();
+    line-height: 47px;
     margin: 0;
     text-align: right;
     color: var(--theme-color-white);
@@ -288,10 +289,21 @@
       min-height: auto;
     }
     &--image {
-      padding: 4px 10px;
-      display: flex;
+      //padding: 4px 10px;
+      //display: flex;
+      padding: 0;
+      min-width: auto;
       img {
-        height: 39px;
+        //height: 39px;
+        object-fit: unset;
+        top: auto;
+        left: auto;
+        width: auto;
+        height: 47px;
+        position: relative;
+        display: block;
+        max-width: none;
+        min-width: auto;
       }
     }
   }