styles: responsive gradient mixin and design token updates

Extract a container-query-based gradient mixin and apply it across card, teaser, document-list, election-form, and newsletter-teaser. Migrate deprecated theme-color-* CSS variables to the updated design tokens (feedback-error, text-accent-default, swatches-*, color-surface-inset).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

gfi-ihk-2024/stories/_global/styles/_mixins.scss

@@ -204,6 +204,14 @@
   hyphens:         auto;
 }
 
+@mixin gradient {
+  --gradient-angle: 170deg;
+  background: linear-gradient(var(--gradient-angle), var(--gradient-b) 25%, var(--gradient-a) 100%);
+  @container (min-width: 480px) { --gradient-angle: 150deg; }
+  @container (min-width: 768px) { --gradient-angle: 130deg; }
+  @container (min-width: 1100px) { --gradient-angle: 110deg; }
+}
+
 // ICONS
 @mixin icon-ankerlink { content: '\e800'; }
 @mixin icon-barrierefreiheit { content: '\e801'; }

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

@@ -294,7 +294,7 @@
       color: var(--swatches-secondary-700);
     }
     &.icon-geschlossen:before {
-      color: var(--theme-color-error);
+      color: var(--feedback-error);
     }
 
     h4, .like-h4 {

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

@@ -3,31 +3,45 @@
 
 .card {
   &-inner {
+    position: relative;
     display: block;
     max-width: 350px;
-    background: var(--color-button-primary-background);
-    background: linear-gradient(162deg, var(--theme-color-gradient-01) 50%, var(--theme-color-gradient-02) 98%, var(--theme-color-gradient-03) 100%);
     border-radius: 16px;
+    overflow: hidden;
+    container-type: inline-size;
     @media(max-width: 645px) {
       max-width: 230px;
     }
 
     &:hover {
       text-decoration: none;
+
+      .image-box {
+        img {
+          scale: 1.06;
+        }
+      }
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      margin-top: calc(40 / 70 * 100%);
+      @include gradient;
     }
   }
 
   .image-box {
     overflow: hidden;
-    height: 233px;
     position: relative;
+    aspect-ratio: 70 / 47;
     border-top-left-radius: 16px;
     border-top-right-radius: 16px;
-    clip-path: path("M 0 0 L 350 0 L 350 233 C 237.157 213.1 112.718 213.17 0 233 Z");
-    clip-path: path("M 0 0 L 350 0 L 350 215 C 237.157 195.1 112.718 195.17 0 215 Z");
-    @media(max-width: 645px) {
-      height: 153px;
-    }
+    clip-path: path("M 0 0 L 350 0 L 350 235 C 237.157 215.1 112.718 215.17 0 235 Z");
 
     img {
       width: 100%;
@@ -35,40 +49,24 @@
       object-fit: cover;
       border-top-left-radius: 16px;
       border-top-right-radius: 16px;
-      transition: all 0.3s ease-in-out;
+      transition: all 0.25s ease;
     }
 
     .copyright {
       @include copyright;
-      margin-bottom: 8px;
     }
   }
 
   .text-box {
     position: relative;
-    height: 197px;
-    padding: 0 25px;
+    min-height: 194px;
+    padding: 20px 25px;
     color: var(--color-button-primary-text);
     border-bottom-left-radius: 16px;
     border-bottom-right-radius: 16px;
-    //background: linear-gradient(132deg, var(--gradient-b) 26.51%, var(--gradient-a) 100%);
-    @media(max-width: 645px) {
-      height: 130px;
-    }
-
-    &:before {
-      //content: '';
-      //position: absolute;
-      //left: 0;
-      //top: -34px;
-      //width: 100%;
-      //height: 34px;
-      //clip-path: path('M 0 15.88 C 112.843 -4.02 237.282 -3.95 350 15.88 L 350 234 L 0 234 Z');
-      //background: var(--color-button-primary-background);
-    }
-
-    .kicker {
 
+    @media(max-width: 645px) {
+      min-height: 130px;
     }
 
     .like-h4 {
@@ -77,17 +75,6 @@
     }
   }
 
-  &:hover {
-    .card-inner {
-      .image-box {
-        img {
-          scale: 1.1;
-        }
-      }
-    }
-  }
-
-
   &.extern,
   &.download,
   &.intranet,

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

@@ -63,8 +63,11 @@
       padding-top: 66.66667%;
     }
 
-    &.chart:before {
-      background: linear-gradient(130deg, var(--theme-color-gradient-01) 46%, var(--theme-color-gradient-02) 123%, var(--theme-color-gradient-03) 255%);
+    &.chart {
+      container-type: inline-size;
+      &::before {
+        @include gradient;
+      }
     }
 
     img {

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

@@ -1,17 +1,19 @@
 @use '../../_global/styles/mixins' as *;
 @use '../../_global/styles/vars' as *;
 
+*:has(> .election-form) {
+  container-type: inline-size;
+}
+
 .election-form {
   --theme-color-link: var(--color-text);
   --theme-color-link-hover: var(--color-text);
-  font-size: var(--font-size-small);
-  //background: linear-gradient(140deg, var(--theme-color-gradient-01) 30%, var(--theme-color-gradient-02) 75%, var(--theme-color-gradient-03) 108%);
-  background: linear-gradient(132deg, var(--gradient-b) 26.51%, var(--gradient-a) 100%);
   padding: 30px 30px 0 30px;
   border-radius: var(--border-radius-xs);
   color: var(--color-text);
   margin-top: 40px;
   margin-bottom: 20px;
+  @include gradient;
   @media(max-width: 567px) {
     padding-bottom: 14px;
   }

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

@@ -234,7 +234,7 @@
 
         &.reserved::before {
           @include icon-xsmall-geschlossen;
-          color: var(--theme-color-error);
+          color: var(--feedback-error);
         }
       }
     }

gfi-ihk-2024/stories/components/form-element-form-centric/form-element-form-centric.scss

@@ -263,7 +263,7 @@ ul.mwf-summary__list {
 
 #ui-datepicker-div {
   background-color: var(--swatches-neutrals-white);
-  border: var(--theme-color-link) 1px solid;
+  border: var(--text-accent-default) 1px solid;
 
   .ui-datepicker-header {
     display: flex;

gfi-ihk-2024/stories/components/global-message/global-message.scss

@@ -39,7 +39,7 @@
   &.alarming {
     background-color: var(--feedback-error);
     box-shadow: 0 -1px 0 0 var(--feedback-error);
-    color: var(--theme-color-background);
+    color: var(--swatches-neutrals-white);
     a {
       color: var(--swatches-neutrals-white);
       &:hover {

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

@@ -1,11 +1,16 @@
+@use '../../_global/styles/mixins' as *;
+
+*:has(> .newsletter-teaser) {
+  container-type: inline-size;
+}
+
 .newsletter-teaser {
-  --theme-color-link: var(--color-text);
-  --theme-color-link-hover: var(--color-text);
+  --color-text-accent: var(--color-text) !important;
   font-size: var(--font-size-small);
-  background: linear-gradient(140deg, var(--theme-color-gradient-01) 30%, var(--theme-color-gradient-02) 75%, var(--theme-color-gradient-03) 108%);
   padding: var(--content-box-padding);
   border-radius: var(--border-radius-xs);
   color: var(--color-text);
+  @include gradient;
 
   @media(max-width: 767px) {
     padding: calc(var(--content-box-padding) * 2) var(--content-box-padding);

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

@@ -89,7 +89,7 @@
     list-style: none;
     padding: 32px 0 0;
     margin: 0 var(--content-box-padding);
-    border-top: 1px solid var(--theme-color-primary-dimmed-02);
+    border-top: 1px solid var(--color-surface-inset);
 
     @media(max-width: 767px) {
       padding-top: calc(var(--content-box-padding) * 1.5);
@@ -116,7 +116,7 @@
     }
 
     li.active .btn, .btn:hover {
-      background-color: var(--theme-color-primary);
+      background-color: var(--swatches-primary-500);
       color: var(--swatches-neutrals-white);
     }
   }

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

@@ -9,6 +9,7 @@
   height: 100%;
   text-decoration: none;
   font-size: var(--font-size-small);
+  container-type: inline-size;
 
   &::before {
     content: '';
@@ -77,7 +78,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      background: linear-gradient(130deg, var(--theme-color-gradient-01) 46%, var(--theme-color-gradient-02) 123%, var(--theme-color-gradient-03) 255%);
+      @include gradient;
     }
   }