From 4184fe62d39b3508253a9d0a8f5d198a55a3bd08 Mon Sep 17 00:00:00 2001
From: FlorianEisenmenger <f.eisenmenger@spawntree.de>
Date: Wed, 11 Feb 2026 10:56:47 +0100
Subject: [PATCH] fixes

---
 .../stories/_global/gfi-styles/_richtext.scss | 366 +++++++++---------
 .../components/teaser/TeaserComponent.js      |   9 +-
 .../stories/components/teaser/teaser.scss     |  26 +-
 .../stories/sections/teasers/teasers.scss     |   5 +-
 4 files changed, 218 insertions(+), 188 deletions(-)

diff --git a/gfi-ihk-2024/stories/_global/gfi-styles/_richtext.scss b/gfi-ihk-2024/stories/_global/gfi-styles/_richtext.scss
index 1816f81..fa70d5e 100644
--- a/gfi-ihk-2024/stories/_global/gfi-styles/_richtext.scss
+++ b/gfi-ihk-2024/stories/_global/gfi-styles/_richtext.scss
@@ -2,201 +2,120 @@
 
 .richtext {
   :where(:not(.infobox)) {
-  ul, ol {
-    margin: 1em 0 1.5em;
-    padding: 0;
+    ul, ol {
+      margin: 1em 0 1.5em;
+      padding: 0;
 
-    li {
-      position: relative;
-      display: block;
-      padding-left: 32px;
-      margin-bottom: 0.4em;
+      li {
+        position: relative;
+        display: block;
+        padding-left: 32px;
+        margin-bottom: 0.4em;
 
-      @media(max-width: 767px) {
-        padding-left: 24px;
+        @media(max-width: 767px) {
+          padding-left: 24px;
+        }
       }
     }
-  }
 
-  ul.contact-buttons {
-    li {
-      padding-left: 0;
+    ul.contact-buttons {
+      li {
+        padding-left: 0;
 
-      &::after {
-        display: none;
+        &::after {
+          display: none;
+        }
       }
     }
-  }
-
-  ul li::after,
-  ol ul li::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    width: 8px;
-    height: 8px;
-    border-radius: 3px;
-    background-color: $color-secondary;
-    background-color: var(--theme-color-secondary, $color-secondary);
-    top: 12px;
-
-    @media(max-width: 767px) {
-      top: 10px;
-      width: 6px;
-      height: 6px;
-    }
-  }
-
-  .accordion > ul > li:after, ul.accordion li:after, ul.choices li:after, ul.slider-tabs li:after, ul.contact-buttons li:after, ul.social-icons li:after {
-    background: none;
-    border: none;
-  }
 
-  .accordion .accordion-content .richtext ul li:after {
-    border: 2px solid var(--theme-color-secondary);
-    background-color: var(--theme-color-secondary);
-  }
-
-  ul.slider-tabs li {
-    padding-left: 0;
-  }
-
-  ul:not(.anchors) > li:before, ol ul li:before {
-    display: none;
-  }
-  ol > li:after {
-    display: none;
-  }
-
-  ul ul:not(.rte--list, tab-buttons) {
-    margin: 0.4em 0;
-
-    li:after {
-      background-color: transparent;
-      border: 2px solid $color-secondary;
-      border: 2px solid var(--theme-color-secondary, $color-secondary);
-      box-sizing: border-box;
-    }
-  }
-
-  ol {
-    counter-reset: listcount;
-
-    li:before {
-      counter-increment: listcount;
-      content: counter(listcount) ".";
-      font-weight: 700;
+    ul li::after,
+    ol ul li::after {
+      content: "";
       position: absolute;
       left: 0;
-    }
-  }
+      width: 8px;
+      height: 8px;
+      border-radius: 3px;
+      background-color: $color-secondary;
+      background-color: var(--theme-color-secondary, $color-secondary);
+      top: 12px;
 
-  .text a, .rte--list a, .strong a {
-    transition: 0.2s ease;
-    display: inline;
-    padding: 0 5px 2px;
-    color: $color-link;
-    color: var(--theme-color-link, $color-link);
-    background-color: $color-secondary-light;
-    background-color: var(--theme-color-secondary-dimmed, $color-secondary-light);
-    //font-weight: 400;
-    margin: 0 -1px -2px;
-    opacity: 1;
-    -webkit-box-decoration-break: clone;
-    box-decoration-break: clone;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    word-break: break-word;
-    hyphens: auto;
-
-    &:hover {
-      color: $color-link-hover;
+      @media(max-width: 767px) {
+        top: 10px;
+        width: 6px;
+        height: 6px;
+      }
     }
 
-    &.external, &.extranet, &.intranet, &[data-linktypeicon="CMExternalLink"], &[data-linktypeicon="CMDownload"] {
-      position: relative;
-      padding-left: 7px;
+    .accordion > ul > li:after, ul.accordion li:after, ul.choices li:after, ul.slider-tabs li:after, ul.contact-buttons li:after, ul.social-icons li:after {
+      background: none;
+      border: none;
+    }
 
-      &:after {
-        @include icon-small-link-external;
-        font-family: "icons";
-        color: $color-link-hover;
-        font-size: 18px;
-        margin-left: 3px;
-        outline: 3px solid $color-secondary-light;
-        outline-offset: -2px;
-        text-decoration: underline;
-        text-transform: none;
-        font-weight: 400;
-        font-style: normal;
-      }
+    .accordion .accordion-content .richtext ul li:after {
+      border: 2px solid var(--theme-color-secondary);
+      background-color: var(--theme-color-secondary);
     }
 
-    &.intranet:after {
-      @include icon-small-schloss;
+    ul.slider-tabs li {
+      padding-left: 0;
     }
 
-    &.extranet:after {
-      @include icon-small-stern;
+    ul:not(.anchors) > li:before, ol ul li:before {
+      display: none;
+    }
+    ol > li:after {
+      display: none;
     }
 
-    &[data-linktypeicon="CMDownload"]:after {
-      @include icon-small-download;
-      text-decoration: none;
-      display: inline-block;
-      line-height: 0;
-      outline: none;
+    ul ul:not(.rte--list, tab-buttons) {
+      margin: 0.4em 0;
+
+      li:after {
+        background-color: transparent;
+        border: 2px solid $color-secondary;
+        border: 2px solid var(--theme-color-secondary, $color-secondary);
+        box-sizing: border-box;
+      }
     }
-  }
 
-  .text .image a, .rte--list .image a, .strong .image a {
-    background-color: var(--theme-color-secondary-dimmed);
-  }
+    ol {
+      counter-reset: listcount;
 
-  .text a.image-link{
-    background-color: #fff;
-    padding: 0;
-    margin: 0;
-    display: block;
-    &:after{
-      display: none;
+      li:before {
+        counter-increment: listcount;
+        content: counter(listcount) ".";
+        font-weight: 700;
+        position: absolute;
+        left: 0;
+      }
     }
-  }
 
-  .responsive-table {
-    tr > td > a {
-      color: $color-link;
+    .text a, .rte--list a, .strong a {
       transition: 0.2s ease;
       display: inline;
       padding: 0 5px 2px;
+      color: $color-link;
+      color: var(--theme-color-link, $color-link);
       background-color: $color-secondary-light;
+      background-color: var(--theme-color-secondary-dimmed, $color-secondary-light);
       //font-weight: 400;
       margin: 0 -1px -2px;
       opacity: 1;
       -webkit-box-decoration-break: clone;
       box-decoration-break: clone;
-    }
-
-    a {
-      &.external, &.extranet, &.intranet, &[data-linktypeicon="CMExternalLink"], &[data-linktypeicon="CMDownload"] {
-        transition: 0.2s ease;
-        display: inline;
-        color: $color-link;
-        color: var(--theme-color-link, $color-link);
-        background-color: $color-secondary-light;
-        background-color: var(--theme-color-secondary-dimmed, $color-secondary-light);
-        //font-weight: 400;
-        margin: 0 -1px -2px;
-        opacity: 1;
-        -webkit-box-decoration-break: clone;
-        box-decoration-break: clone;
+      overflow-wrap: break-word;
+      word-wrap: break-word;
+      word-break: break-word;
+      hyphens: auto;
 
-        &:hover {
-          color: $color-link-hover;
-        }
+      &:hover {
+        color: $color-link-hover;
+      }
 
+      &.external, &.extranet, &.intranet, &[data-linktypeicon="CMExternalLink"], &[data-linktypeicon="CMDownload"] {
         position: relative;
-        padding: 0 5px 2px 7px;
+        padding-left: 7px;
 
         &:after {
           @include icon-small-link-external;
@@ -230,51 +149,130 @@
       }
     }
 
-  }
+    .text .image a, .rte--list .image a, .strong .image a {
+      background-color: var(--theme-color-secondary-dimmed);
+    }
 
+    .text a.image-link{
+      background-color: #fff;
+      padding: 0;
+      margin: 0;
+      display: block;
+      &:after{
+        display: none;
+      }
+    }
 
-  ul.highcharts-menu {
-    padding: 10px 0 !important;
+    .responsive-table {
+      tr > td > a {
+        color: $color-link;
+        transition: 0.2s ease;
+        display: inline;
+        padding: 0 5px 2px;
+        background-color: $color-secondary-light;
+        //font-weight: 400;
+        margin: 0 -1px -2px;
+        opacity: 1;
+        -webkit-box-decoration-break: clone;
+        box-decoration-break: clone;
+      }
 
-    li {
-      padding: 5px 20px;
-      margin: 0;
+      a {
+        &.external, &.extranet, &.intranet, &[data-linktypeicon="CMExternalLink"], &[data-linktypeicon="CMDownload"] {
+          transition: 0.2s ease;
+          display: inline;
+          color: $color-link;
+          color: var(--theme-color-link, $color-link);
+          background-color: $color-secondary-light;
+          background-color: var(--theme-color-secondary-dimmed, $color-secondary-light);
+          //font-weight: 400;
+          margin: 0 -1px -2px;
+          opacity: 1;
+          -webkit-box-decoration-break: clone;
+          box-decoration-break: clone;
+
+          &:hover {
+            color: $color-link-hover;
+          }
+
+          position: relative;
+          padding: 0 5px 2px 7px;
+
+          &:after {
+            @include icon-small-link-external;
+            font-family: "icons";
+            color: $color-link-hover;
+            font-size: 18px;
+            margin-left: 3px;
+            outline: 3px solid $color-secondary-light;
+            outline-offset: -2px;
+            text-decoration: underline;
+            text-transform: none;
+            font-weight: 400;
+            font-style: normal;
+          }
+        }
 
-      &:after {
-        display: none;
+        &.intranet:after {
+          @include icon-small-schloss;
+        }
+
+        &.extranet:after {
+          @include icon-small-stern;
+        }
+
+        &[data-linktypeicon="CMDownload"]:after {
+          @include icon-small-download;
+          text-decoration: none;
+          display: inline-block;
+          line-height: 0;
+          outline: none;
+        }
       }
+
     }
 
-    hr {
-      margin: 5px 0 8px;
+    ul.highcharts-menu {
+      padding: 10px 0 !important;
+
+      li {
+        padding: 5px 20px;
+        margin: 0;
+
+        &:after {
+          display: none;
+        }
+      }
+
+      hr {
+        margin: 5px 0 8px;
+      }
     }
-  }
 
-  ul.tab-buttons {
-    margin: 0;
+    ul.tab-buttons {
+      margin: 0;
 
-    li {
-      display: inline-block;
-      margin-bottom: 12px;
-      padding-left: 0;
+      li {
+        display: inline-block;
+        margin-bottom: 12px;
+        padding-left: 0;
 
-      &:after {
-        content: "";
-        height: 0;
-        width: 0;
-        border: 0;
+        &:after {
+          content: "";
+          height: 0;
+          width: 0;
+          border: 0;
+        }
       }
     }
-  }
 
-  .detail-text {
-    overflow-x: hidden;
-  }
+    .detail-text {
+      overflow-x: hidden;
+    }
   }
 
 }
 
-
 blockquote {
   border-left: 6px solid $color-secondary;
   border-left: 6px solid var(--theme-color-secondary, $color-secondary);
diff --git a/gfi-ihk-2024/stories/components/teaser/TeaserComponent.js b/gfi-ihk-2024/stories/components/teaser/TeaserComponent.js
index 467e27d..433f456 100644
--- a/gfi-ihk-2024/stories/components/teaser/TeaserComponent.js
+++ b/gfi-ihk-2024/stories/components/teaser/TeaserComponent.js
@@ -99,7 +99,12 @@ export const createTeaser = ({
     teaser.appendChild(rt);
   }
   if (type === 'fullwidth') {
-    teaser.dataset.imageSize = imageSize;
+    const imageSizeMap = {
+      'large': 'l',
+      'medium': 'm',
+      'small': 's'
+    };
+    teaser.dataset.imageSize = imageSizeMap[imageSize] || imageSize;
   }
 
 // teaserLink nur OHNE linklistData
@@ -109,7 +114,7 @@ export const createTeaser = ({
     teaserLink.setAttribute('aria-label', 'Beschreibender Link-Text');
 
     if (linkType) {
-      teaserLink.classList.add(linkType);
+      teaser.classList.add(linkType);
     }
   }
 
diff --git a/gfi-ihk-2024/stories/components/teaser/teaser.scss b/gfi-ihk-2024/stories/components/teaser/teaser.scss
index 4eb998b..f108560 100644
--- a/gfi-ihk-2024/stories/components/teaser/teaser.scss
+++ b/gfi-ihk-2024/stories/components/teaser/teaser.scss
@@ -217,7 +217,7 @@
     margin: 0.5em 0;
   }
 
-  &:hover {
+  &:has(.teaser--link):hover {
     .image-box::after {
       height: var(--border-width-hover);
     }
@@ -302,6 +302,30 @@
   @include icon-video-small;
 }
 
+@media(min-width: 568px) {
+  .teaser[data-image-size="l"],
+  .teaser[data-image-size="m"],
+  .teaser[data-image-size="s"] {
+    .reading-time {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: auto;
+    }
+  }
+}
+
+.teaser[data-image-size="l"] .like-h4,
+.teaser[data-image-size="m"] .like-h4,
+.teaser[data-image-size="s"] .like-h4,
+.teaser[data-image-size="l"] .like-h4.title,
+.teaser[data-image-size="m"] .like-h4.title,
+.teaser[data-image-size="s"] .like-h4.title {
+  @include h2;
+  text-decoration-thickness: 0.07em;
+  margin-top: 0;
+}
+
 @media(min-width: 568px) {
   [date-type='fullwidth'], .teaser.fullwidth, .teasers[data-items="1"] {
     display: block;
diff --git a/gfi-ihk-2024/stories/sections/teasers/teasers.scss b/gfi-ihk-2024/stories/sections/teasers/teasers.scss
index abfeb8a..f810f2e 100644
--- a/gfi-ihk-2024/stories/sections/teasers/teasers.scss
+++ b/gfi-ihk-2024/stories/sections/teasers/teasers.scss
@@ -634,7 +634,10 @@
   }
 }
 
-.desktop a.teaser:hover, .mobile a.teaser:active {
+.desktop a.teaser:hover,
+.desktop .teaser:has(.teaser--link):hover,
+.mobile a.teaser:active,
+.mobile .teaser:has(.teaser--link):active {
   color: var(--theme-color-link-hover);
 
   .image-box:after {