Merge branch 'master' of ssh://gitea.spawntree.de:1122/spawntree/ihk24

gfi-ihk-2024/stories/components/election-form/election-form.scss

@@ -9,6 +9,7 @@
   padding: 30px 30px 0 30px;
   border-radius: var(--border-radius-xs);
   color: #fff;
+  margin-top: 40px;
   margin-bottom: 20px;
   @media(max-width: 567px) {
     padding-bottom: 14px;

gfi-ihk-2024/stories/components/howto-list/HowToListComponent.js

@@ -16,7 +16,7 @@ export const createHowToList =
     listItems.map((item) => {
       const li = createElement('li', [], null, ul);
       const a = createElement('a', [], null, li);
-      createImage(item.icon, 100, 100, '', [], a);
+      createElement('div', ['icon-box', item.icon], null, a);
       createElement('h3', [], item.headline, a);
       createElement('p', [], item.text, a);
       createElement('span', [], item.more, a);

gfi-ihk-2024/stories/components/howto-list/HowToListData.js

@@ -4,20 +4,20 @@ export const howToListData = [
     text: 'Ihr Unternehmen ist IHK-Mitglied? Dann bekommen Sie automatisch am  12.02.2024 die Wahlunterlagen zugesandt.',
     more: 'Mehr erfahren',
     link: '#',
-    icon: './dummy/howto-list-01.svg',
+    icon: 'pictogram-bueroklammer',
   },
   {
     headline: '2. Kandidat:innen',
     text: 'Informieren Sie sich über die Kandidat:innen und deren Programm um Ihre Entscheidung zu fällen.',
     more: 'Mehr erfahren',
     link: '#',
-    icon: './dummy/howto-list-02.svg',
+    icon: 'pictogram-fabrik',
   },
   {
     headline: '3. Stimmabgabe',
     text: 'Geben Sie Ihre Stimmen auf den Ihnen zugesandten Unterlagen ab und schicken sie diese mit dem Rückumschlag an uns.',
     more: 'Mehr erfahren',
     link: '#',
-    icon: './dummy/howto-list-03.svg',
+    icon: 'pictogram-diagramm-wachstum',
   },
 ]

gfi-ihk-2024/stories/components/howto-list/howto-list.scss

@@ -58,12 +58,29 @@
     span {
       text-decoration: underline;
     }
-    img {
+    img,
+    .icon-box {
       position: absolute;
       left: -132px;
       top: 2px;
       width: 100px;
-      height: auto;
+      height: 100px;
+      font-family: "Pictograms", sans-serif;
+      font-size: 70px;
+      line-height: 1.4285;
+      text-align: center;
+      color: var(--theme-color-primary) !important;
+      &:after {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background: var(--theme-color-secondary);
+      }
       @media(max-width: 399px) {
         position: static;
         left: auto;

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

@@ -9,6 +9,26 @@
   padding: var(--section-padding) 0;
   border-bottom: var(--border-width) solid var(--theme-color-secondary);
   margin: var(--section-margin) auto;
+  position: relative;
+
+  &:after {
+    content: "";
+    background: var(--theme-color-primary);
+    border-bottom: var(--border-width) solid var(--theme-color-secondary);
+    position: absolute;
+    left: 50%;
+    top: 0;
+    width: 100vw;
+    height: calc(100% + var(--border-width));
+    margin: 0 -50vw;
+    z-index: -1;
+  }
+  .has-sidebar & {
+    padding: var(--section-padding);
+    &:after {
+      display: none;
+    }
+  }
 
   h2 {
     margin-bottom: 0.4em;