components, sections and refactoring slider tabs

gfi-ihk-2024/stories/atoms/slider-tabs/SliderTabs.stories.js

@@ -0,0 +1,15 @@
+import {createSliderTabs} from "./SliderTabsComponent";
+
+export default {
+  title: 'Atoms/Slider-Tabs',
+  args: {
+    count: 3
+  },
+  argTypes: {}
+}
+const Template = ({...args}) => {
+  return createSliderTabs({...args});
+}
+
+export const SliderTabs = Template.bind({});
+SliderTabs.args = {};

gfi-ihk-2024/stories/atoms/slider-tabs/SliderTabsComponent.js

@@ -0,0 +1,16 @@
+import './slider-tabs.scss';
+import {createElement} from "../../_global/scripts/helpers";
+
+export const createSliderTabs = ({
+   count = 3
+}) => {
+  const myControls = createElement('div', ['controls'], null);
+  const ul = createElement('ul', ['slider-tabs'], null, myControls);
+  for (let i = 0; i < count; i++) {
+    const li = createElement('li', [], null, ul);
+    const btn = createElement('button', ['btn'], null, li);
+    createElement('span', [], String(i + 1), btn);
+    if (i === 0) btn.classList.add('active');
+  }
+  return myControls;
+}

gfi-ihk-2024/stories/atoms/slider-tabs/slider-tabs.scss

@@ -0,0 +1,120 @@
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
+
+.controls, .rotationslider {
+  .count {
+    display: none;
+  }
+
+  .slider-tabs, .tabs {
+    position: absolute;
+    bottom: 1.8rem;
+    left: 50%;
+    right: 0;
+    padding: 0;
+    list-style: none;
+    transform: translate(-50%, 0);
+    text-align: center;
+    font-size: 0;
+    line-height: 0;
+    margin: 0;
+
+    li {
+      display: inline-block;
+      vertical-align: top;
+
+      &.active button:before {
+        background-color: var(--color-text);
+        box-shadow: 0 0 0 2px var(--color-text);
+      }
+    }
+
+    .btn {
+      --button-min-size: 24px;
+      font-size: 0;
+      line-height: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &::before {
+        content: "";
+        position: relative;
+        display: block;
+        width: 10px;
+        height: 10px;
+        border: 2px solid var(--color-text);
+        border-radius: 5px;
+        transition: 0.2s ease;
+      }
+
+      &::after {
+        display: none;
+      }
+
+      &:hover {
+        background-color: transparent;
+
+        &::before {
+          background-color: var(--color-text);
+        }
+      }
+    }
+  }
+
+  button {
+    border: 0;
+    background-color: transparent;
+    padding: 0;
+    cursor: pointer;
+
+    &.prev, &.next {
+      position: absolute;
+      top: -89px;
+      width: 60px;
+      height: 60px;
+      text-align: center;
+      line-height: 60px;
+      right: 0;
+      color: var(--color-text);
+      border-radius: 24px;
+      background: var(--swatches-neutrals-white);
+      --button-hover-shadow-opacity: 0.4;
+      --button-hover-shadow-size: 6px;
+      @media(max-width: 768px) {
+        display: none;
+      }
+
+      &:before {
+        @include icon-small-arrow-right-simple;
+        font-family: "Icons", sans-serif;
+        font-size: 30px;
+        content: "\e825";
+      }
+
+      &:after {
+        content: "";
+        position: absolute;
+        display: block;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: var(--border-radius-lg);
+        box-shadow: 0 0 0 2px var(--color-surface-inset);
+        opacity: 0;
+        transition: 0.3s ease;
+      }
+
+      &:hover:after {
+        opacity: 0.4;
+        box-shadow: 0 0 0 6px var(--color-surface-inset);
+      }
+    }
+
+    &.prev {
+      right: 70px;
+      transform: rotate(180deg);
+    }
+  }
+}

gfi-ihk-2024/stories/components/teaser/teaser.scss

@@ -2,7 +2,7 @@
 @use '../../_global/styles/vars' as *;
 
 .teaser {
-  --hero-background: var(--swatches-neutrals-white);
+  //--hero-background: var(--swatches-neutrals-white);
   position: relative;
   display: flex;
   flex-direction: column;
@@ -239,6 +239,7 @@
       bottom: 100%;
       z-index: 1;
       background-color: var(--swatches-neutrals-white);
+      //background-color: var(--hero-background);
       margin-right: 40px;
       padding-top: 0.4em;
       padding-right: 0.8em;
@@ -407,7 +408,7 @@
 }
 
 [data-background='lightblue'] .teaser {
-  --hero-background: var(--theme-color-primary-dimmed-04);
+  //--hero-background: var(--swatches-primary-100);
 
   .image-box {
     background-color: rgba(#fff, 0.4);

gfi-ihk-2024/stories/components/testimonial/testimonial.scss

@@ -55,7 +55,7 @@
       width: 100%;
       display: block;
       height: 8px;
-      background-color: var(--theme-color-secondary);
+      background-color: var(--color-decoration);
       transition: 0.3s ease;
       z-index: 1;
       border-bottom-right-radius: 4px;
@@ -85,8 +85,9 @@
         font-family: "Korb", sans-serif;
         position: relative;
         &:before {
-          background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0xNyA4LjljLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yQzkgMTYgOC4zIDE4LjQgOC4zIDIxLjNjLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjNDLjcgMzAuNyAwIDI3LjYgMCAyMy41YzAtNC42IDEuMS04LjcgMy40LTEyLjJzNS44LTYuNCAxMC40LTguN0wxNyA4Ljl6bTIzIDBjLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yLTEuNCAxLjktMi4xIDQuMy0yLjEgNy4yLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjMtMS41LTIuMy0yLjItNS40LTIuMi05LjUgMC00LjYgMS4xLTguNyAzLjQtMTIuMlMzMi40IDUgMzcgMi43bDMgNi4yeiIgc3R5bGU9ImZpbGw6IzU2YmQ2NiIvPjwvc3ZnPg==);
-          background-size: 100%;
+          mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0xNyA4LjljLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yQzkgMTYgOC4zIDE4LjQgOC4zIDIxLjNjLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjNDLjcgMzAuNyAwIDI3LjYgMCAyMy41YzAtNC42IDEuMS04LjcgMy40LTEyLjJzNS44LTYuNCAxMC40LTguN0wxNyA4Ljl6bTIzIDBjLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yLTEuNCAxLjktMi4xIDQuMy0yLjEgNy4yLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjMtMS41LTIuMy0yLjItNS40LTIuMi05LjUgMC00LjYgMS4xLTguNyAzLjQtMTIuMlMzMi40IDUgMzcgMi43bDMgNi4yeiIgc3R5bGU9ImZpbGw6IzU2YmQ2NiIvPjwvc3ZnPg==);
+          mask-size: 100%;
+          background-color: var(--color-decoration);
           content: "";
           display: block;
           height: 30px;
@@ -122,8 +123,9 @@
           left: 0;
           position: absolute;
           top: -36px;
-          background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0xNyA4LjljLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yQzkgMTYgOC4zIDE4LjQgOC4zIDIxLjNjLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjNDLjcgMzAuNyAwIDI3LjYgMCAyMy41YzAtNC42IDEuMS04LjcgMy40LTEyLjJzNS44LTYuNCAxMC40LTguN0wxNyA4Ljl6bTIzIDBjLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yLTEuNCAxLjktMi4xIDQuMy0yLjEgNy4yLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjMtMS41LTIuMy0yLjItNS40LTIuMi05LjUgMC00LjYgMS4xLTguNyAzLjQtMTIuMlMzMi40IDUgMzcgMi43bDMgNi4yeiIgc3R5bGU9ImZpbGw6IzU2YmQ2NiIvPjwvc3ZnPg==);
-          background-size: 100%;
+          mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0xNyA4LjljLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yQzkgMTYgOC4zIDE4LjQgOC4zIDIxLjNjLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjNDLjcgMzAuNyAwIDI3LjYgMCAyMy41YzAtNC42IDEuMS04LjcgMy40LTEyLjJzNS44LTYuNCAxMC40LTguN0wxNyA4Ljl6bTIzIDBjLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yLTEuNCAxLjktMi4xIDQuMy0yLjEgNy4yLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjMtMS41LTIuMy0yLjItNS40LTIuMi05LjUgMC00LjYgMS4xLTguNyAzLjQtMTIuMlMzMi40IDUgMzcgMi43bDMgNi4yeiIgc3R5bGU9ImZpbGw6IzU2YmQ2NiIvPjwvc3ZnPg==);
+          mask-size: 100%;
+          background-color: var(--color-decoration);
           content: "";
           display: block;
           height: 30px;

gfi-ihk-2024/stories/components/topic-teaser/topic-teaser.scss

@@ -6,7 +6,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  background-color: var(--swatches-neutrals-white);
+  background-color: var(--color-background);
   overflow: hidden;
   width: 100%;
   //max-width: 420px;
@@ -31,7 +31,7 @@
     font-family: 'Pictograms', sans-serif;
     font-size: 72px;
     line-height: 1;
-    color: var(--theme-color-secondary);
+    color: var(--color-decoration);
     margin-top: 6px;
 
     @media(max-width: 567px) {
@@ -58,7 +58,7 @@ a.topic-teaser, .topics:not([data-type="list"]) a.tile {
     left: 0;
     right: 0;
     height: var(--border-width);
-    background-color: var(--theme-color-secondary);
+    background-color: var(--color-decoration);
     transition: 0.2s ease;
   }
 
@@ -90,8 +90,8 @@ div.topic-teaser, .topics[data-type="list"] .tile {
   padding: 0 var(--topic-tile-padding) 0.5em;
 
   .icon-box {
-    background-color: var(--theme-color-primary);
-    color: var(--theme-color-background);
+    background-color: var(--color-text);
+    color: var(--color-background);
     margin: 0 calc(var(--topic-tile-padding) * -1);
     padding: 10px 0;
     font-size: 60px;

gfi-ihk-2024/stories/components/video/video.scss

@@ -68,7 +68,7 @@
 
   &:hover {
     .btn {
-      box-shadow: 0 0 0 5px rgba(var(--theme-color-primary-rgb), 0.3);
+      box-shadow: 0 0 0 5px rgba(var(--swatches-primary-500-rgb), 0.3);
     }
   }
 }

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

@@ -12,7 +12,7 @@ export const createCardSlider =
          headline = 'Auch interessant',
          fullWidth = false,
      }) => {
-        const cardSlider = createElement('section', ['card-slider'], null);
+        const cardSlider = createElement('section', ['card-slider','variant-subtle-primary'], null);
         if (fullWidth) {
             cardSlider.classList.add('fullwidth');
         }

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

@@ -1,5 +1,6 @@
 @use '../../_global/styles/mixins' as *;
 @use '../../_global/styles/vars' as *;
+@use '../../atoms/slider-tabs/slider-tabs';
 
 .card-slider {
   margin: var(--section-margin) 0 var(--section-margin) 0;
@@ -9,7 +10,7 @@
   }
 
   &-inner {
-    background: var(--theme-color-primary-dimmed-04);
+    background: var(--color-background);
     padding: 33px 30px 0 30px;
     @media(max-width: 645px) {
       padding-left: 20px;
@@ -82,122 +83,6 @@
     }
   }
 
-  .controls {
-    .count {
-      display: none;
-    }
-
-    .slider-tabs, .tabs {
-      position: absolute;
-      bottom: 1.8rem;
-      left: 50%;
-      right: 0;
-      padding: 0;
-      list-style: none;
-      transform: translate(-50%, 0);
-      text-align: center;
-      font-size: 0;
-      line-height: 0;
-      margin: 0;
-      li {
-        display: inline-block;
-        vertical-align: top;
-
-        &.active button:before {
-          background-color: var(--theme-color-primary);
-          box-shadow: 0 0 0 2px var(--theme-color-primary);
-        }
-      }
-
-      .btn {
-        --button-min-size: 24px;
-        font-size: 0;
-        line-height: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        &::before {
-          content: "";
-          position: relative;
-          display: block;
-          width: 10px;
-          height: 10px;
-          border: 2px solid var(--theme-color-primary);
-          border-radius: 5px;
-          transition: 0.2s ease;
-        }
-
-        &::after {
-          display: none;
-        }
-
-        &:hover {
-          background-color: transparent;
-
-          &::before {
-            background-color: var(--theme-color-primary);
-          }
-        }
-      }
-    }
-
-    button {
-      border: 0;
-      background-color: transparent;
-      padding: 0;
-      cursor: pointer;
-
-      &.prev, &.next {
-        position: absolute;
-        top: -89px;
-        width: 60px;
-        height: 60px;
-        text-align: center;
-        line-height: 60px;
-        right: 0;
-        color: var(--theme-color-primary);
-        border-radius: 24px;
-        background: var(--swatches-neutrals-white);
-        --button-hover-shadow-opacity: 0.4;
-        --button-hover-shadow-size: 6px;
-        @media(max-width: 768px) {
-          display: none;
-        }
-
-        &:before {
-          @include icon-small-arrow-right-simple;
-          font-family: "Icons", sans-serif;
-          font-size: 30px;
-          content: "\e825";
-        }
-
-        &:after {
-          content: "";
-          position: absolute;
-          display: block;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          border-radius: var(--border-radius-lg);
-          box-shadow: 0 0 0 2px var(--theme-color-primary-dimmed-02);
-          opacity: 0;
-          transition: 0.3s ease;
-        }
-
-        &:hover:after {
-          opacity: 0.4;
-          box-shadow: 0 0 0 6px var(--theme-color-primary-dimmed-02);
-        }
-      }
-
-      &.prev {
-        right: 70px;
-        transform: rotate(180deg);
-      }
-    }
-  }
   &.fullwidth {
     .card-slider-inner {
       padding-left: var(--container-padding);

gfi-ihk-2024/stories/sections/election-detail/ElectionDetailComponent.js

@@ -30,17 +30,17 @@ export const createElectionDetail =
     showSocialMedia = true,
     showElectionArea = true,
   }) => {
-    const electionDetail = createElement('div', ['election-detail']);
+    const electionDetail = createElement('div', ['election-detail','variant-subtle-primary']);
     const text = createElement('div', ['election-detail--text'], null, electionDetail);
     if (showVideo) {
-        const video = createElement('div', ['election-detail--video'], null, electionDetail);
+        const video = createElement('div', ['election-detail--video','variant-solid'], null, electionDetail);
         const videocontainer = createElement('div', ['video-container'], null, video);
         videocontainer.appendChild(createVideo({
             caption: '',
             copyright: '',
         }));
     }
-    const info = createElement('div', ['election-detail--info'], null, electionDetail);
+    const info = createElement('div', ['election-detail--info','variant-accent'], null, electionDetail);
     const back = createElement('div', ['election-detail--back'], null, electionDetail);
     const more = createElement('div', ['election-detail--more', 'contact-wrapper'], null, electionDetail);
 

gfi-ihk-2024/stories/sections/election-detail/election-detail.scss

@@ -1,5 +1,6 @@
 @use '../../_global/styles/mixins' as *;
 @use '../../_global/styles/vars' as *;
+@use '../../components/contact/contact' as *;
 
 .election-detail {
   margin: 0 0 80px 0;
@@ -7,7 +8,7 @@
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    background: var(--theme-color-primary-dimmed-04);
+    background: var(--color-background);
     padding: 0 0 30px 0;
     @media (max-width: 1100px) {
       display: block;
@@ -71,11 +72,11 @@
       .social-icons {
         a {
           &:before {
-            color: var(--theme-color-primary);
+            color: var(--color-text);
           }
 
           &:hover:before {
-            color: var(--theme-color-secondary);
+            color: var(--color-decoration);
           }
         }
       }
@@ -84,7 +85,7 @@
 
   &--video {
     padding: 30px 0;
-    background: var(--theme-color-primary-dimmed-02);
+    background: var(--color-background);
     @media (max-width: 1100px) {
       background: none;
     }
@@ -105,8 +106,8 @@
   &--info {
     display: flex;
     justify-content: space-between;
-    background: var(--theme-color-primary);
-    color: var(--swatches-neutrals-white);
+    background: var(--color-background);
+    color: var(--color-text);
     @media (max-width: 1023px) {
       display: block;
       background: none;
@@ -119,7 +120,7 @@
       flex-direction: column;
       justify-content: space-between;
       @media (max-width: 1023px) {
-        background: var(--theme-color-primary);
+        background: var(--color-background);
         margin: 0 0 5px 0;
       }
     }
@@ -145,9 +146,9 @@
     }
     .info-box--text {
       cursor: pointer;
-      color: var(--swatches-neutrals-white);
+      //color: var(--swatches-neutrals-white);
       &:hover {
-        color: var(--theme-color-secondary);
+        //color: var(--theme-color-secondary);
       }
       font-size: 36px;
       line-height: 44px;
@@ -161,7 +162,7 @@
   }
 
   &--back {
-    background: var(--theme-color-primary-dimmed-04);
+    background: var(--color-background);
     display: flex;
     justify-content: center;
     padding: 30px 15px;
@@ -171,5 +172,9 @@
   &--more {
     margin: 60px 0 0 0 !important;
     max-width: none !important;
+    h3, .like-h3 {
+      margin-left: 0;
+      margin-right: 0;
+    }
   }
 }

gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss

@@ -1,23 +1,26 @@
 @use '../../_global/styles/mixins' as *;
 @use '../../_global/styles/vars' as *;
 @use '../../components/event-teaser-large/event-teaser-large.scss' as *;
+@use '../../atoms/slider-tabs/slider-tabs';
 
-.right-open-container{
+.right-open-container {
   @media (min-width: 400px) {
     width: calc((var(--container-width) / 2) + 50vw - 8px);
-    margin-left:auto;
-    margin-right:0;
-    padding-right:0;
+    margin-left: auto;
+    margin-right: 0;
+    padding-right: 0;
   }
 }
 
 .eventteaserlargeslider {
   opacity: 0;
   transition: opacity 0.4s linear;
+
   &.initiated {
     opacity: 1;
   }
-  .slider-tabs{
+
+  .slider-tabs {
     @media(min-width: 1471px) {
       width: calc(var(--container-width) - 2 * var(--container-padding));
       left: 0 !important;
@@ -51,15 +54,16 @@
     align-items: flex-start;
     width: 80000px;
     contain: layout;
-    margin:0 calc(var(--col-padding) * -1);
+    margin: 0 calc(var(--col-padding) * -1);
     @media(max-width: 999px) {
       width: 34500px;
       //margin:0;
     }
     @media(max-width: 399px) {
       width: 10000%;
-      margin:0;
+      margin: 0;
     }
+
     &.no-transition {
       -webkit-user-select: none;
       -moz-user-select: none;
@@ -85,16 +89,16 @@
 
   .slide {
     position: relative;
-    width:1%;
-    max-width:1%;
-    min-width:1%;
-    min-height:400px;
-    padding:var(--col-padding);
+    width: 1%;
+    max-width: 1%;
+    min-width: 1%;
+    min-height: 400px;
+    padding: var(--col-padding);
     @media(min-width: 1000px) {
       //padding:var(--col-padding);
     }
     @media(min-width: 400px) {
-      padding:var(--col-padding);
+      padding: var(--col-padding);
     }
   }
 
@@ -113,81 +117,24 @@
 }
 
 
-.rotationslider{
-  margin-bottom:calc(var(--section-margin) + 2rem) !important;
+.rotationslider {
+  margin-bottom: calc(var(--section-margin) + 2rem) !important;
   overflow: hidden;
   padding-top: var(--section-margin);
-  margin-top:0;
-  h1{
+  margin-top: 0;
+
+  h1 {
     max-width: 50%;
     display: inline-block;
   }
-  .eventteaserlargeslider  {
-    margin-bottom:2rem;
+
+  .eventteaserlargeslider {
+    margin-bottom: 2rem;
     position: relative;
     display: block;
 
-    button {
-      border: 0;
-      background-color: transparent;
-      padding: 0;
-      cursor: pointer;
-
-    }
     .slider-tabs, .tabs {
-      position: absolute;
       bottom: -2rem;
-      left: 50%;
-      right: 0;
-      padding: 0;
-      list-style: none;
-      transform: translate(-50%, 0);
-      text-align: center;
-      font-size: 0;
-      line-height: 0;
-      margin: 0;
-      li {
-        display: inline-block;
-        vertical-align: top;
-
-        &.active button:before {
-          background-color: var(--theme-color-primary);
-          //box-shadow: 0 0 0 2px var(--theme-color-primary);
-        }
-      }
-
-      .btn {
-        --button-min-size: 24px;
-        font-size: 0;
-        line-height: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        &::before {
-          content: "";
-          position: relative;
-          display: block;
-          width: 15px;
-          height: 15px;
-          //border: 2px solid var(--theme-color-primary);
-          background-color: var(--theme-color-primary-dimmed-04);
-          border-radius: 15px;
-          transition: 0.2s ease;
-        }
-
-        &::after {
-          display: none;
-        }
-
-        &:hover {
-          background-color: transparent;
-
-          &::before {
-            background-color: var(--theme-color-primary);
-          }
-        }
-      }
     }
 
     .prev, .next {
@@ -199,45 +146,48 @@
       line-height: 60px;
       left: calc(var(--container-width) - 2 * var(--container-padding) - 60px);
       color: var(--theme-color-primary);
-      right:auto;
+      right: auto;
       border-radius: 24px;
       background: var(--theme-color-primary-dimmed-04);
       --button-hover-shadow-opacity: 0.4;
-      --button-hover-shadow-size: 6px ;
+      --button-hover-shadow-size: 6px;
       @media(max-width: 1470px) {
-        left:auto;
+        left: auto;
         right: var(--container-padding);
       }
       @media(max-width: 1339px) {
         top: -90px;
       }
       @media(max-width: 399px) {
-        right:0px;
+        right: 0px;
         top: -80px;
       }
       @media(max-width: 767px) {
 
       }
+
       &:before {
         @include icon-small-arrow-right-simple;
         font-family: "Icons", sans-serif;
         font-size: 30px;
         content: "\e825";
       }
-      &:after{
+
+      &:after {
         content: "";
-          position: absolute;
-          display: block;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          border-radius: var(--border-radius-lg);
-          box-shadow: 0 0 0 2px var(--color-surface-inset);
-          opacity: 0;
-          transition: 0.3s ease;
+        position: absolute;
+        display: block;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: var(--border-radius-lg);
+        box-shadow: 0 0 0 2px var(--color-surface-inset);
+        opacity: 0;
+        transition: 0.3s ease;
       }
-      &:hover:after{
+
+      &:hover:after {
         opacity: 0.4;
         box-shadow: 0 0 0 6px var(--color-surface-inset);
       }
@@ -248,16 +198,18 @@
       left: calc(var(--container-width) - 2 * var(--container-padding) - 140px);
       transform: rotate(180deg);
       @media(max-width: 1470px) {
-        left:auto;
-        right:calc(var(--container-padding) + 70px);
+        left: auto;
+        right: calc(var(--container-padding) + 70px);
       }
       @media(max-width: 399px) {
-        right:70px;
+        right: 70px;
       }
     }
-    .count{
-      display:none;
+
+    .count {
+      display: none;
     }
+
     h2, .like-h2 {
       margin-top: 0.3em;
       margin-bottom: 0.4em;

gfi-ihk-2024/stories/sections/quick-facts/quick-facts.scss

@@ -1,5 +1,6 @@
 @use '../../_global/styles/mixins' as *;
 @use '../../_global/styles/vars' as *;
+@use '../../atoms/slider-tabs/slider-tabs';
 
 .quick-facts {
   position: relative;
@@ -120,63 +121,12 @@
   }
 
   .slider-tabs, .tabs {
-    position: absolute;
     bottom: 0;
-    left: 50%;
-    right: 0;
-    padding: 0;
-    list-style: none;
-    transform: translate(-50%, 0);
-    text-align: center;
-    font-size: 0;
-    line-height: 0;
     margin: 20px 0;
 
     @media(max-width: 567px) {
       margin-bottom: 12px;
     }
-
-    li {
-      display: inline-block;
-      vertical-align: top;
-
-      &.active button:before {
-        background-color: var(--theme-color-primary);
-        box-shadow: 0 0 0 2px var(--theme-color-primary);
-      }
-    }
-
-    .btn {
-      --button-min-size: 24px;
-      font-size: 0;
-      line-height: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &::before {
-        content: "";
-        position: relative;
-        display: block;
-        width: 10px;
-        height: 10px;
-        border: 2px solid var(--theme-color-primary);
-        border-radius: 5px;
-        transition: 0.2s ease;
-      }
-
-      &::after {
-        display: none;
-      }
-
-      &:hover {
-        background-color: transparent;
-
-        &::before {
-          background-color: var(--theme-color-primary);
-        }
-      }
-    }
   }
 
   .prev, .next {

gfi-ihk-2024/stories/sections/timeline/Timeline.stories.js

@@ -1,7 +1,7 @@
 import {createTimeline} from "./TimelineComponent";
 
 export default {
-  title: 'Components/Timeline',
+  title: 'Sections/Timeline',
   parameters: {
     layout: 'fullscreen',
   },