Color-Variants: Atoms and Components

gfi-ihk-2024/.storybook/preview.js

@@ -1,3 +1,4 @@
+import '../stories/_global/styles/themes.scss';
 import '../stories/_global/styles/main.scss';
 import '../stories/_global/styles/fonts.scss';
 import '../stories/_global/styles/icons.scss';
@@ -56,3 +57,11 @@ export const parameters = {
     ],
   },
 }
+
+export const decorators = [
+  (Story) => {
+    document.documentElement.setAttribute('data-theme', 'standard');
+    document.body.classList.add('variant-base');
+    return Story();
+  },
+];

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

@@ -70,7 +70,7 @@
     @extend .icon-ankerlink;
 
     &:before {
-      font-family: "Icons";
+      font-family: "Icons", sans-serif;
       position: absolute;
       font-size: 30px;
       line-height: 1;

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

@@ -21,7 +21,7 @@
   }
 
   .icon-box {
-    font-family: "Icons";
+    font-family: "Icons", sans-serif;
     font-weight: 400;
     text-transform: none;
     text-decoration: none !important;

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

@@ -124,7 +124,7 @@
         cursor: pointer;
 
         &:before {
-          font-family: "Icons";
+          font-family: "Icons", sans-serif;
         }
       }
     }

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

@@ -176,7 +176,7 @@ body {
   }
 
   a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll, a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection, a#CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll {
-    font-family: "Korb";
+    font-family: "Korb", sans-serif;
     display: inline-block;
     position: relative;
     color: $color-primary;
@@ -268,7 +268,7 @@ body {
       padding-top: 1px;
       padding-right: 1px;
       text-align: center;
-      font-family: "Icons";
+      font-family: "Icons", sans-serif;
       opacity: 0;
       background-color: $color-primary;
       background-color: var(--theme-color-primary, $color-primary);
@@ -325,7 +325,7 @@ body {
 
     &:after {
       @include icon-small-arrow-right-simple;
-      font-family: "Icons";
+      font-family: "Icons", sans-serif;
       position: absolute;
       right: 0;
       font-size: 20px;

gfi-ihk-2024/stories/_global/gfi-styles/_ihk-finder-form.scss

@@ -66,7 +66,7 @@ form.ihk-finder {
     border-radius: 0 4px 4px 0;
     overflow: hidden;
     @extend .icon-lokalisierung;
-    font-family: "Icons";
+    font-family: "Icons", sans-serif;
     font-size: 30px;
     cursor: pointer;
 

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

@@ -18,7 +18,7 @@
     position: relative;
     z-index: 1;
     max-width: 66.6667%;
-    background-color: var(--theme-color-white);
+    background-color: var(--swatches-neutrals-white);
 
     @media(max-width: 1199px) {
       max-width: 83.3333%;

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

@@ -276,7 +276,7 @@
         -webkit-print-color-adjust: exact;
         color-adjust: exact !important;
         align-items: center;
-        font-family: "Korb";
+        font-family: "Korb", sans-serif;
         line-height: 1;
         text-decoration: none;
         border: 0;

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

@@ -91,7 +91,7 @@
         }
 
         &:before {
-          font-family: "Icons";
+          font-family: "Icons", sans-serif;
           font-size: 30px;
           line-height: 1;
         }
@@ -132,7 +132,7 @@
       left: 13px;
       top: 50%;
       margin-top: -15px;
-      font-family: "Icons";
+      font-family: "Icons", sans-serif;
     }
   }
 

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

@@ -17,6 +17,13 @@
         }
       }
     }
+    ul {
+      li {
+        &::marker {
+          color: var(--color-decoration);
+        }
+      }
+    }
 
     ul.contact-buttons {
       li {
@@ -119,7 +126,7 @@
 
         &:after {
           @include icon-small-link-external;
-          font-family: "icons";
+          font-family: "Icons", sans-serif;
           color: $color-link-hover;
           font-size: 18px;
           margin-left: 3px;
@@ -200,7 +207,7 @@
 
           &:after {
             @include icon-small-link-external;
-            font-family: "icons";
+            font-family: "Icons", sans-serif;
             color: $color-link-hover;
             font-size: 18px;
             margin-left: 3px;

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

@@ -300,7 +300,7 @@
           transition: 0.3s ease;
 
           &:before {
-            font-family: "Icons";
+            font-family: "Icons", sans-serif;
           }
         }
       }
@@ -468,7 +468,7 @@
         &:before {
           font-size: 30px;
           line-height: 1;
-          font-family: "Icons";
+          font-family: "Icons", sans-serif;
         }
 
         @media(max-width: 999px) {
@@ -498,7 +498,7 @@
       }
 
       &:before {
-        font-family: "Icons";
+        font-family: "Icons", sans-serif;
         position: absolute;
         font-size: 30px;
         line-height: 1;
@@ -606,7 +606,7 @@
         cursor: pointer;
 
         &:before {
-          font-family: "Icons";
+          font-family: "Icons", sans-serif;
           display: flex;
           position: absolute;
           font-size: 18px;
@@ -661,7 +661,7 @@
       }
 
       &:before {
-        font-family: "Icons";
+        font-family: "Icons", sans-serif;
         font-size: 20px;
         position: absolute;
         display: block;

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

@@ -1,5 +1,5 @@
 @mixin h1 {
-  font-family: var(--font-korb);
+  font-family: var(--font-korb), sans-serif;
   font-size: var(--font-size-h1);
   line-height: 1.1;
   font-weight: 400;
@@ -11,7 +11,7 @@
 }
 
 @mixin h2 {
-  font-family: var(--font-korb);
+  font-family: var(--font-korb), sans-serif;
   font-size: var(--font-size-h2);
   line-height: 1.2;
   font-weight: 400;
@@ -19,7 +19,7 @@
 }
 
 @mixin h3 {
-  font-family: var(--font-korb);
+  font-family: var(--font-korb), sans-serif;
   font-size: var(--font-size-h3);
   line-height: 1.2;
   font-weight: 400;
@@ -27,7 +27,7 @@
 }
 
 @mixin h4 {
-  font-family: var(--font-korb);
+  font-family: var(--font-korb), sans-serif;
   font-size: var(--font-size-h4);
   font-style: normal;
   font-weight: normal;
@@ -36,7 +36,7 @@
 }
 
 @mixin h5 {
-  font-family: var(--font-korb);
+  font-family: var(--font-korb), sans-serif;
   font-size: 22px;
   line-height: 1.2;
   font-weight: 400;
@@ -115,12 +115,12 @@
   transform: rotate(-90deg);
   transition: 0.3s ease;
 
-  color: white;
+  color: var(--swatches-neutrals-white);
   text-shadow: 0 0 3px rgba(black, 0.6), 0 0 8px rgba(black, 0.6);
   width: calc(66.6% + 7px);
   padding: 8px 18px;
 
-  //color: var(--theme-color-white);
+  //color: var(--swatches-neutrals-white);
   //text-shadow: -2px 2px 0 #000;
   //padding: 2px 6px 2px 4px;
   //background: #012d59;
@@ -140,18 +140,18 @@
   display: block;
   width: 100%;
   height: var(--input-height);
-  background-color: var(--theme-color-white);
-  border: 1px solid var(--theme-color-primary);
+  background-color: var(--swatches-neutrals-white);
+  border: 1px solid var(--color-text);
   border-radius: var(--border-radius-xs);
   padding: 10px 15px;
   font-family: 'Source Sans Pro', sans-serif;
   font-size: var(--font-size-copy);
   line-height: 1.4;
   transition: 0.3s ease;
-  color: var(--theme-color-primary);
+  color: var(--color-text);
 
   &:focus {
-    box-shadow: 0 0 0 2px var(--theme-color-secondary-intensed), 0 0 8px 2px var(--theme-color-secondary-intensed);
+    box-shadow: 0 0 0 2px var(--swatches-secondary-700), 0 0 8px 2px var(--swatches-secondary-700);
     outline: 0;
   }
 
@@ -166,21 +166,21 @@
 @mixin focus-visible($inset: false) {
   @if $inset {
     &.focus-visible:focus {
-      box-shadow: inset 0 0 0 2px var(--theme-color-secondary-intensed), inset 0 0 8px 2px var(--theme-color-secondary-intensed);
+      box-shadow: inset 0 0 0 2px var(--swatches-secondary-700), inset 0 0 8px 2px var(--swatches-secondary-700);
       outline: 0;
     }
     &:focus-visible, &.-moz-focusring {
-      box-shadow: inset 0 0 0 2px var(--theme-color-secondary-intensed), inset 0 0 8px 2px var(--theme-color-secondary-intensed);
+      box-shadow: inset 0 0 0 2px var(--swatches-secondary-700), inset 0 0 8px 2px var(--swatches-secondary-700);
       outline: 0;
     }
   }
   @else {
     &.focus-visible:focus {
-      box-shadow: 0 0 0 2px var(--theme-color-secondary-intensed), 0 0 8px 2px var(--theme-color-secondary-intensed);
+      box-shadow: 0 0 0 2px var(--swatches-secondary-700), 0 0 8px 2px var(--swatches-secondary-700);
       outline: 0;
     }
     &:focus-visible, &.-moz-focusring {
-      box-shadow: 0 0 0 2px var(--theme-color-secondary-intensed), 0 0 8px 2px var(--theme-color-secondary-intensed);
+      box-shadow: 0 0 0 2px var(--swatches-secondary-700), 0 0 8px 2px var(--swatches-secondary-700);
       outline: 0;
     }
   }
@@ -188,11 +188,11 @@
 
 @mixin focus-standalone($inset: false) {
   @if $inset {
-    box-shadow: inset 0 0 0 2px var(--theme-color-secondary-intensed), inset 0 0 8px 2px var(--theme-color-secondary-intensed);
+    box-shadow: inset 0 0 0 2px var(--swatches-secondary-700), inset 0 0 8px 2px var(--swatches-secondary-700);
     outline: 0;
   }
   @else {
-    box-shadow: 0 0 0 2px var(--theme-color-secondary-intensed), 0 0 8px 2px var(--theme-color-secondary-intensed);
+    box-shadow: 0 0 0 2px var(--swatches-secondary-700), 0 0 8px 2px var(--swatches-secondary-700);
     outline: 0;
   }
 }

gfi-ihk-2024/stories/_global/styles/_svg-vars.scss

@@ -0,0 +1,10 @@
+@function encode-color($color) {
+  @return '%23' + str-slice('#{$color}', 2);
+}
+
+$svg-color: #003366; // = --swatches-primary-500 im standard theme
+
+select,
+select.form-control {
+  background-image: url("data:image/svg+xml,%3Csvg width='43' height='30' viewBox='0 0 43 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5001 22L6.27283 10.75L22.7273 10.75L14.5001 22Z' fill='#{encode-color($svg-color)}'/%3E%3C/svg%3E");
+}

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

@@ -1,6 +1,6 @@
 :root {
-  --theme-color-white: #ffffff;
-  --theme-color-background: var(--theme-color-white);
+  --swatches-neutrals-white: #ffffff;
+  --theme-color-background: var(--swatches-neutrals-white);
 
   --theme-color-primary: #003366;
   --theme-color-primary-microsite: var(--theme-color-primary);
@@ -13,15 +13,15 @@
 
   --theme-color-secondary: #56BD66;
   --theme-color-secondary-microsite: var(--theme-color-secondary);
-  --theme-color-secondary-intensed: #247929;
+  --swatches-secondary-700: #247929;
   --theme-color-secondary-dimmed: #E4F1E4;
 
   --theme-color-gradient-01: var(--theme-color-primary);
   --theme-color-gradient-02: #4BA490;
   --theme-color-gradient-03: #AFCC7A;
 
-  --theme-color-link: var(--theme-color-primary);
-  --theme-color-link-hover: var(--theme-color-secondary-intensed);
+  --theme-color-link: var(--text-default-standard);
+  --theme-color-link-hover: var(--swatches-secondary-700);
 
   --theme-color-success: var(--theme-color-secondary);
   --theme-color-success-dimmed: var(--theme-color-secondary-dimmed);

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

@@ -331,3 +331,32 @@
 .pictogram-einkaufswagen-mit-aufwaertspfeil:before { content: '\e94a'; } /* '' */
 .pictogram-einkaufswagen-mit-euro-zeichen:before { content: '\e94b'; } /* '' */
 .pictogram-oelfass-mit-eurozeichen:before { content: '\e94c'; } /* '' */
+.pictogram-achterbahn:before { content: '\e94d'; } /* '' */
+.pictogram-dokument-mit-haeckchen:before { content: '\e94e'; } /* '' */
+.pictogram-haende-mit-staffelstab:before { content: '\e94f'; } /* '' */
+.pictogram-ihk-dresden:before { content: '\e950'; } /* '' */
+.pictogram-kreuzfahrtschiff:before { content: '\e951'; } /* '' */
+.pictogram-leuchtturm:before { content: '\e952'; } /* '' */
+.pictogram-moewe:before { content: '\e953'; } /* '' */
+.pictogram-windsack:before { content: '\e954'; } /* '' */
+.pictogram-ki-sparkles:before { content: '\e955'; } /* '' */
+.pictogram-kleiderbuegel:before { content: '\e956'; } /* '' */
+.pictogram-toilettensymbol:before { content: '\e957'; } /* '' */
+.pictogram-pferd:before { content: '\e958'; } /* '' */
+.pictogram-pferdekopf:before { content: '\e959'; } /* '' */
+.pictogram-a:before { content: '\e95a'; } /* '' */
+.pictogram-b:before { content: '\e95b'; } /* '' */
+.pictogram-c:before { content: '\e95c'; } /* '' */
+.pictogram-d:before { content: '\e95d'; } /* '' */
+.pictogram-e:before { content: '\e95e'; } /* '' */
+.pictogram-f:before { content: '\e95f'; } /* '' */
+.pictogram-g:before { content: '\e960'; } /* '' */
+.pictogram-h:before { content: '\e961'; } /* '' */
+.pictogram-i:before { content: '\e962'; } /* '' */
+.pictogram-j:before { content: '\e963'; } /* '' */
+.pictogram-k:before { content: '\e964'; } /* '' */
+.pictogram-l:before { content: '\e965'; } /* '' */
+.pictogram-lippe-zu-detmold:before { content: '\e966'; } /* '' */
+.pictogram-schaf:before { content: '\e967'; } /* '' */
+.pictogram-sonne:before { content: '\e968'; } /* '' */
+.pictogram-fisch:before { content: '\e969'; } /* '' */

gfi-ihk-2024/stories/_global/styles/theme-digitalblue.scss

@@ -0,0 +1,2 @@
+[data-theme="digitalblue"] {
+}

gfi-ihk-2024/stories/_global/styles/theme-standard.scss

@@ -0,0 +1,156 @@
+// IMPORTANT: Change primary color in _svg-vars.scss!
+
+[data-theme="standard"] {
+  // swatches / primary
+  --swatches-primary-600: #002346;
+  --swatches-primary-500: #003366;
+  --swatches-primary-500-rgb: 0, 51, 102;
+  --swatches-primary-500-o20: rgba(0,51,102,0.2); // #ccd6e0
+  --swatches-primary-400: #335C85;
+  --swatches-primary-300: #B0C4D6;
+  --swatches-primary-200: #CCD7E6;
+  --swatches-primary-100: #E3EBF5;
+  --swatches-primary-100-o30: rgba(227,235,245,0.3); // #f7f9fc
+  --swatches-primary-050: #F0F2F5;
+  // swatches / secondary
+  --swatches-secondary-700: #247929;
+  --swatches-secondary-500: #56BD66;
+  --swatches-secondary-500-o30: rgba(86,189,102,0.3); // #ccebd1
+  --swatches-secondary-300: #9AD7A3;
+  --swatches-secondary-200: #E4F1E4;
+  --swatches-secondary-100: #EBF2EB;
+  // swatches / neutrals
+  --swatches-neutrals-white: #FFF;
+  --swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent
+  // gradient
+  --gradient-a: #4BA490;
+  --gradient-b: var(--swatches-primary-500);
+  // buttons / secondary
+  --buttons-secondary-text: var(--swatches-primary-500);
+  --buttons-secondary-background: var(--swatches-secondary-500);
+  // buttons / tertiary
+  --buttons-tertiary-text: var(--swatches-primary-500);
+  --buttons-tertiary-background: var(--swatches-primary-200);
+  // text / default
+  --text-default-standard: var(--swatches-primary-500);
+  --text-default-on-accent: var(--swatches-primary-500);
+  --text-default-on-solid: var(--swatches-neutrals-white);
+  // text / accent
+  --text-accent-default: var(--swatches-secondary-700);
+  --text-accent-on-accent: var(--swatches-neutrals-white);
+  --text-accent-on-solid: var(--swatches-secondary-500);
+  // feedback
+  --feedback-error: #D54048;
+  --feedback-error-light: #F7D9DA;
+  --feedback-warning: #FDC600;
+  --feedback-warning-light: #FFF4CC;
+
+
+  --text-accent-default-1-500: #4BA490;
+  --text-accent-default-1-100: #DBEDE9;
+}
+
+[data-theme="standard"] .variant-base,
+[data-theme="standard"] .variant-base-hover:hover {
+  --color-background: var(--swatches-neutrals-white);
+  --color-text: var(--text-default-standard);
+  --color-text-accent: var(--text-accent-default);
+  --color-decoration: var(--swatches-secondary-500);
+  --color-border: var(--swatches-secondary-500);
+  --color-surface-inset: var(--swatches-primary-500-o20);
+  --color-button-primary-background: var(--swatches-primary-500);
+  --color-button-primary-text: var(--swatches-neutrals-white);
+  --color-button-secondary-background: var(--buttons-secondary-background);
+  --color-button-secondary-text: var(--buttons-secondary-text);
+  --color-button-tertiary-background: var(--buttons-tertiary-background);
+  --color-button-tertiary-text: var(--buttons-tertiary-text);
+  --color-button-ghost-background: var(--swatches-neutrals-white-o0);
+  --color-button-ghost-text: var(--color-text);
+
+  --color-text-microsite: var(--color-text);
+  --color-text-microsite-secondary: var(--color-decoration);
+}
+
+[data-theme="standard"] .variant-subtle-primary,
+[data-theme="standard"] .variant-subtle-primary-hover:hover {
+  --color-background: var(--swatches-primary-100);
+  --color-text: var(--text-default-standard);
+  --color-text-accent: var(--text-accent-default);
+  --color-decoration: var(--swatches-secondary-500);
+  --color-border: var(--swatches-secondary-500);
+  --color-surface-inset: var(--swatches-primary-500-o20);
+  --color-button-primary-background: var(--swatches-primary-500);
+  --color-button-primary-text: var(--swatches-neutrals-white);
+  --color-button-secondary-background: var(--buttons-secondary-background);
+  --color-button-secondary-text: var(--buttons-secondary-text);
+  --color-button-tertiary-background: var(--swatches-neutrals-white);
+  --color-button-tertiary-text: var(--buttons-tertiary-text);
+  --color-button-ghost-background: var(--swatches-neutrals-white-o0);
+  --color-button-ghost-text: var(--color-text);
+
+  --color-text-microsite: var(--color-text);
+  --color-text-microsite-secondary: var(--color-decoration);
+}
+
+[data-theme="standard"] .variant-subtle-secondary,
+[data-theme="standard"] .variant-subtle-secondary-hover:hover {
+  --color-background: var(--swatches-secondary-200);
+  --color-text: var(--text-default-standard);
+  --color-text-accent: var(--text-accent-default);
+  --color-decoration: var(--swatches-secondary-500);
+  --color-border: var(--swatches-secondary-500);
+  --color-surface-inset: var(--swatches-secondary-500-o30);
+  --color-button-primary-background: var(--swatches-primary-500);
+  --color-button-primary-text: var(--swatches-neutrals-white);
+  --color-button-secondary-background: var(--buttons-secondary-background);
+  --color-button-secondary-text: var(--buttons-secondary-text);
+  --color-button-tertiary-background: var(--swatches-neutrals-white);
+  --color-button-tertiary-text: var(--buttons-tertiary-text);
+  --color-button-ghost-background: var(--swatches-neutrals-white-o0);
+  --color-button-ghost-text: var(--color-text);
+
+  --color-text-microsite: var(--color-text);
+  --color-text-microsite-secondary: var(--color-decoration);
+}
+
+[data-theme="standard"] .variant-solid,
+[data-theme="standard"] .variant-solid-hover:hover {
+  --color-background: var(--swatches-primary-500);
+  --color-text: var(--swatches-neutrals-white);
+  --color-text-accent: var(--text-accent-on-solid);
+  --color-decoration: var(--color-text-accent);
+  --color-border: var(--swatches-secondary-500);
+  --color-surface-inset: var(--swatches-primary-100-o30);
+  --color-button-primary-background: var(--swatches-neutrals-white);
+  --color-button-primary-text: var(--swatches-primary-500);
+  --color-button-secondary-background: var(--buttons-secondary-background);
+  --color-button-secondary-text: var(--buttons-secondary-text);
+  --color-button-tertiary-background: var(--buttons-tertiary-background);
+  --color-button-tertiary-text: var(--buttons-tertiary-text);
+  --color-button-ghost-background: var(--swatches-neutrals-white-o0);
+  --color-button-ghost-text: var(--color-text);
+
+  --color-text-microsite: var(--color-text);
+  --color-text-microsite-secondary: var(--color-decoration);
+}
+
+[data-theme="standard"] .variant-accent,
+[data-theme="standard"] .variant-accent-hover:hover {
+  --color-background: var(--swatches-secondary-500);
+  --color-text: var(--text-default-on-accent);
+  --color-text-accent: var(--text-accent-on-accent);
+  --color-decoration: var(--color-text-accent);
+  --color-border: var(--swatches-secondary-500);
+  --color-surface-inset: var(--swatches-primary-500-o20);
+  --color-button-primary-background: var(--swatches-primary-500);
+  --color-button-primary-text: var(--swatches-neutrals-white);
+  --color-button-secondary-background: var(--swatches-neutrals-white);
+  --color-button-secondary-text: var(--text-accent-default);
+  --color-button-tertiary-background: var(--buttons-tertiary-background);
+  --color-button-tertiary-text: var(--buttons-tertiary-text);
+  --color-button-ghost-background: var(--swatches-neutrals-white-o0);
+  --color-button-ghost-text: var(--color-text);
+
+  --color-text-microsite: var(--color-text);
+  --color-text-microsite-secondary: var(--color-decoration);
+}

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

@@ -0,0 +1,2 @@
+@import '../../_global/styles/theme-standard';
+//@import '../../_global/styles/theme-digitalblue';

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

@@ -11,10 +11,7 @@ html {
   --font-source-sans: 'Source Sans Pro', sans-serif;
   --font-korb: 'Korb', sans-serif;
 
-  font-family: var(--font-source-sans);
   font-size: var(--font-size-copy);
-  line-height: 1.5;
-  color: var(--theme-color-primary);
 
   @media(max-width: 1339px) {
     --font-size-copy: 20px;
@@ -42,6 +39,9 @@ html {
 }
 
 body {
+  font-family: var(--font-source-sans);
+  line-height: 1.5;
+  color: var(--color-text);
   margin: 0;
 }
 
@@ -83,11 +83,11 @@ h1 + h2 {
 }
 
 a {
-  color: var(--theme-color-link);
+  color: var(--color-text);
   transition: 0.2s ease;
 
   &:hover {
-    color: var(--theme-color-link-hover);
+    color: var(--color-text-accent);
   }
 }
 
@@ -141,7 +141,7 @@ p, .text, ul.nobreaks {
   .main-col section:not(.infobanner) {
       p, .text {
         &:not(.mwf-upload-dropzone)  &:not(.kicker) {
-          color: var(--theme-color-primary-microsite);
+          color: var(--color-text-microsite);
         }
       }
   }

gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2025 by original authors @ fontello.com</metadata>
+<metadata>Copyright (C) 2026 by original authors @ fontello.com</metadata>
 <defs>
 <font id="pictograms" horiz-adv-x="1000" >
 <font-face font-family="pictograms" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
@@ -671,6 +671,64 @@
 <glyph glyph-name="einkaufswagen-mit-euro-zeichen" unicode="&#xe94b;" d="M586 454c10 0 18-8 18-18 0-10-8-18-18-18h-29c-21 0-40-10-53-26h32c10 0 18-8 18-17 0-10-8-18-18-18h-46c-1-3-1-5-1-7 0-2 0-4 1-7h46c10 0 18-8 18-17 0-10-8-18-18-18h-32c13-16 32-26 53-26h29c10 0 18-8 18-18 0-10-8-18-18-18h-29c-42 0-78 26-94 62h-20c-10 0-18 8-18 18 0 9 8 17 18 17h11c0 3 0 5 0 7 0 2 0 4 0 7h-11c-10 0-18 8-18 18 0 9 8 17 18 17h20c16 36 52 62 94 62h29z m-243-318c39 0 71-32 71-72 0-39-32-71-71-71-40 0-72 32-72 71 0 40 32 72 72 72z m0-36c-20 0-36-16-36-36 0-19 16-35 36-35 20 0 36 16 36 35 0 20-16 36-36 36z m343 36c39 0 71-32 71-72 0-39-32-71-71-71-40 0-72 32-72 71 0 40 32 72 72 72z m0-36c-20 0-36-16-36-36 0-19 16-35 36-35 19 0 35 16 35 35 0 20-16 36-35 36z m-493 568c8 0 15-5 17-13l32-109h558c6 0 11-2 14-6 4-5 5-10 3-16l-85-343c-2-8-9-13-18-13h-385c-8 0-15 5-18 13l-71 250c-3 9 3 19 12 22 10 3 20-3 22-12l68-237h358l77 307h-548c-8 0-15 5-18 13l-31 108h-66c-10 0-18 8-18 18 0 10 8 18 18 18h79z" horiz-adv-x="1000" />
 
 <glyph glyph-name="oelfass-mit-eurozeichen" unicode="&#xe94c;" d="M486 796c28 0 55-1 80-3 10-1 17-10 16-19-1-10-9-17-19-17-24 3-50 4-77 4-70 0-133-8-177-21-23-6-40-13-50-20-12-8-13-12-13-13 0-4 3-10 14-19 11-9 27-17 50-24 44-15 106-25 176-25 69 0 132 10 176 25 22 7 39 15 50 24 11 9 13 15 13 19 0 1 0 5-10 11-9 7-23 13-42 19-9 3-14 13-11 23 3 9 13 14 22 11 21-6 39-14 52-24 13-9 25-22 25-40v-657c0-20-11-38-26-52-15-14-36-26-61-35-49-19-116-31-188-31-73 0-139 12-189 31-24 9-45 21-60 35-15 14-26 32-26 52v657c0 19 14 33 28 43 15 10 36 18 60 25 49 13 115 21 187 21z m-240-746c0-7 4-16 15-26 11-10 27-19 49-28 44-17 106-28 176-28 69 0 131 11 175 28 22 9 39 18 50 28 10 10 14 19 14 26v146c-14-9-32-17-52-24-13-4-27-8-43-11-13-25-35-51-63-70-37-26-87-41-141-24-51 16-83 53-101 94l-2 4c-8 2-17 5-25 7-20 7-37 15-52 24v-146z m334 474c-5-21-14-40-20-59-12-32-35-60-51-78-10-11-28-14-41-3-10 8-22 20-29 32-4 7-11 20-17 35-30-46-63-124-74-165-7-27-7-68 7-105 14-36 40-67 81-80 42-13 80-2 111 19 31 22 53 53 61 77 8 24 10 69 9 117-1 47-5 94-10 120-7 35-14 66-27 90z m145-91c-14-11-31-20-51-27-8-4-17-7-26-9 3-25 5-54 5-82 1-41-1-83-7-113 5 1 11 3 16 4 22 8 39 16 50 25 11 8 13 15 13 19v183z m-479-183c0-4 3-11 14-19 11-9 27-17 50-25 0 0 1 0 2 0-6 32-5 64 2 90 5 21 17 52 30 83l5 11c-19 4-36 9-52 16-19 7-37 16-51 27v-183z m0 243c0-7 4-16 15-26 11-10 27-20 49-28 16-6 35-12 55-16 0-1 0-1-1-2 9 17 17 32 26 46l6 9 2 3c8 10 21 12 32 10 10-3 20-11 25-23 4-13 11-25 15-32 3-6 9-13 16-19 15 16 32 39 40 63 9 24 17 40 20 60 2 12 11 22 22 27 5 2 12 3 19 1 6-1 11-5 15-10l2-2c20-32 31-73 38-113 1-3 1-6 1-8 7 2 13 4 18 6 22 8 39 18 50 28 10 10 14 19 14 26v161c-14-10-32-18-52-24-49-17-115-26-187-26-73 0-139 9-188 26-20 6-37 14-52 24v-161z m150-243c0 2 1 4 1 7h-11c-10 0-18 8-18 18 0 9 8 17 18 17h20c16 36 52 62 94 62h29c9 0 17-8 17-18 0-10-8-18-17-18h-29c-21 0-41-10-53-26h32c9 0 17-8 17-17 0-10-8-18-17-18h-46c-1-3-1-5-1-7 0-2 0-4 1-7h46c9 0 17-8 17-17 0-10-8-18-17-18h-32c12-16 32-26 53-26h29c9 0 17-8 17-18 0-10-8-18-17-18h-29c-42 0-78 26-94 62h-20c-10 0-18 8-18 18 0 9 8 17 18 17h11c0 3-1 5-1 7z" horiz-adv-x="1000" />
+
+<glyph glyph-name="achterbahn" unicode="&#xe94d;" d="M894 615c-82 0-150-37-209-90-60-53-114-124-168-192-112-139-227-269-411-269-10 0-18-8-18-18v-130c0-9 8-17 18-17 6 0 10 2 14 6l100 105v-94c0-9 8-17 17-17 10 0 18 8 18 17v92l99-104c4-4 9-5 13-5 1 0 1 0 2 0 6 0 11 3 15 7l98 104v-94c0-9 8-17 18-17 10 0 18 8 18 17v94l100-105c3-4 8-6 13-6 6 0 10 2 14 6l100 105v-94c0-9 8-17 18-17 9 0 17 8 17 17v94l100-105c4-4 9-6 14-6 10 0 18 8 18 17v681c0 10-8 18-18 18z m-543-504v-151l-94 98c34 14 65 32 94 53z m-153-72l-74-78v68c26 1 51 4 74 10z m335 7l80 85v-170l-80 85z m116-85v166l79-83-79-83z m146 85l81 85v-170l-81 85z m-408-85v177l85-86-85-91z m274 205l84 88v-176l-84 88z m119-83v171l82-86-82-85z m-262 0v171l81-86-81-85z m-36 153v-143l-70 70c25 23 48 47 70 73z m131 160v-191l-83 88c5 6 10 12 14 18 24 29 47 58 69 85z m36-191v179l85-89-85-90z m142 90l85 89v-179l-85 90z m-46 232v-192l-96 101v2c20 22 39 42 59 60 12 11 24 20 37 29z m35-192v187l89-93-89-94z m96 244v-106l-80 85c25 11 52 19 80 21z m-183 217c15 10 35 6 45-9l53-79c10-14 6-34-8-44l-9-6c6-11 8-23 6-34-3-13-10-25-21-32-11-7-25-10-38-8-11 3-22 9-29 18l-9-6c6-10 8-22 6-34-2-13-10-24-21-31-11-8-24-10-37-8-12 2-22 9-30 18l-12-8c-14-10-31-10-44-4-5-6-10-11-15-17-3-2-5-5-7-7l15-13c13-11 15-31 4-45l-7-8c8-9 14-20 15-32 1-13-3-26-12-36-8-10-20-16-33-17-12-1-24 2-34 9l-7-8c9-8 14-19 15-31 2-13-3-26-11-36-9-11-21-17-34-18-12-1-24 2-33 9l-10-11c-26-32-78-16-82 26l-8 100 0 3c0 7 2 14 7 20l10 12c12 14 32 15 45 4l8-7 49 59-8 6c-13 12-15 32-4 45l11 14c12 13 32 15 46 4l31-26c2 2 5 5 7 8 6 6 11 12 17 18-3 8-4 17-3 26l19 98 1 4c2 7 7 13 13 17l13 9c15 10 34 6 44-9l6-8 63 42-6 9c-10 14-6 34 9 44l14 10z m-255-280l8-6c14-12 15-32 4-46l-54-63c-11-14-31-16-45-4l-8 6-7-8 9-98c1-10 13-13 19-6l148 176-68 57-6-8z m-14-209c2-1 5-2 7-1 4 0 7 2 10 5 2 2 3 6 3 10 0 2-1 4-3 6l-17-20z m70 84c3-1 5-2 7-2 4 1 8 2 10 5 2 3 3 7 3 10 0 3-1 5-2 7l-18-20z m137 170c2-1 4-2 7-3 3-1 7 0 10 2 3 2 5 5 6 9 0 2 0 5-1 7l-22-15z m71 198l6-9c10-15 6-35-9-44l-69-47c-14-10-34-6-44 9l-6 8-9-6-19-97c-1-9 9-16 17-11l191 129-50 73-8-5z m20-136c2-2 4-3 6-4 4 0 8 0 11 2 3 3 5 6 5 9 1 3 1 5 0 8l-22-15z" horiz-adv-x="1000" />
+
+<glyph glyph-name="dokument-mit-haeckchen" unicode="&#xe94e;" d="M757 136c7 7 19 7 26 0 7-7 7-18 0-25l-88-88c-7-7-19-7-26 0l-48 48c-7 7-7 18 0 25 7 7 18 7 25 0l36-35 75 75z m-112 153h-379v36h379v-36z m0 100h-379v36h379v-36z m-188 100h-191v36h191v-36z m270 314c34 0 61-27 61-61v-505h-2c54-32 91-91 91-158 0-100-82-182-183-182-60 0-113 29-146 74v-4h-364c-33 0-61 28-61 61v589c0 24 10 47 28 64l99 97c17 16 39 25 62 25h415z m-33-577c-81 0-147-66-147-147 0-81 66-146 147-146 81 0 147 65 147 146 0 81-66 147-147 147z m-359 414c0-25-21-46-47-46h-91c-10 0-18 8-18 18 0 10 8 18 18 18h91c6 0 11 4 11 10v126c-9-2-17-7-24-14l-100-96c-10-11-16-24-16-39v-589c0-14 11-25 25-25h344c-10 23-16 49-16 76 0 101 81 183 182 183 20 0 40-4 58-10v490c0 14-11 25-25 25h-392v-127z" horiz-adv-x="1000" />
+
+<glyph glyph-name="haende-mit-staffelstab" unicode="&#xe94f;" d="M930 639c7 6 19 6 25-1 7-7 7-18 0-25-23-23-53-54-80-83-28-29-54-57-71-74-5-4-11-6-16-4-73 14-104 14-131-10-15-15-32-29-41-43-4-6-5-10-5-12 0-1 0-3 6-7 6-4 14-4 26 4 11 9 22 23 28 33 3 4 7 7 11 8 5 1 10 0 14-2 7-5 16-7 25-8 10-1 18-1 22 0 10 2 19-5 21-15 1-9-5-18-15-20-7-1-19-2-31-1-3 0-7 1-10 2l144-145 30 30c18 18 31 41 37 65l6 27c3 9 12 15 22 13 9-2 15-12 13-22l-7-26c-7-31-23-60-46-82l-29-30 38-39c13-12 13-33 0-45l-60-61c-13-12-32-13-45-1l-40 37-9-9c-19-18-49-18-68 0-5 5-8 11-11 16-16-4-33 0-46 13-6 6-10 13-12 20-14-1-28 4-38 14-15 14-18 35-11 52-5 2-9 5-13 9-19 19-19 49 0 67l13 13-216 220c-13 12-13 33 0 45l61 61c12 12 33 12 45 0l161-161c2 2 4 4 6 6 39 36 87 33 153 20 16 17 39 41 63 66 27 30 57 61 81 85z m-542-100l214-217c18 15 47 14 64-3 6-6 10-12 12-19 14 2 29-3 40-14 11-10 15-23 14-37 8-2 16-6 22-12 13-13 17-31 12-47 6-2 11-5 16-10 13-13 17-33 11-49l40-37 56 56-215 214c-3-3-7-6-10-8-17-12-42-22-66-6-13 8-22 20-22 34-1 14 4 26 10 35 4 6 10 12 15 18l-158 158-55-56z m368-384c-4 4-11 5-16 1l-22-21c-4-5-3-12 1-16 5-5 13-5 18 0l19 19c5 5 5 12 0 17z m-27 57c-5 5-13 5-18 0l-48-48-1-1c-4-5-4-12 1-16 4-5 12-5 17 0l12 12c0 0 1 1 2 2l20 19c0 1 1 1 1 2l14 13c4 5 4 12 0 17z m-36 49c-5 5-13 5-17 0l-64-63c-5-4-5-12 0-17 5-4 13-4 17 0l64 63c5 5 5 12 0 17z m-52 33c-5 5-13 5-18 0l-34-35c-5-4-5-12 0-17 4-4 12-4 17 0l35 35c5 5 5 12 0 17z m-597 328c7 7 18 8 26 1l113-106 1 0c14-16 33-28 53-36 21-8 41-21 57-37l150-150c18-18 18-46 0-64-2-2-4-4-7-6l2-1c17-18 17-46 0-64-4-3-7-6-11-8 5-16 1-34-11-47-18-17-46-17-64 0l-1 2c-2-2-4-5-6-7-18-18-46-18-64 0l-76 76 0-39c0-26-21-47-47-47-26 0-47 21-47 47v142l-67 67c-7 7-7 19 0 26 7 6 18 6 25 0l78-78 0-157c0-6 5-12 11-12 7 0 12 6 12 12l0 58c0 24 28 36 45 21l2-1 89-90c4-3 10-3 13 0 4 4 4 10 0 13l-84 85c-7 7-7 18 0 25 7 7 18 7 25 0l32-32c0 0 0 0 1-1l85-84c3-4 9-4 13 0 3 3 3 9 0 13l-16 15c0 1-1 1-1 1l-85 85c-7 7-7 18 0 25 7 7 19 7 26 0l16-16c0 0 0 0 0 0l69-69c3-3 9-3 13 0 3 4 3 10 0 13l-33 33c0 0 0 0 0 0l-85 85c-7 7-7 18 0 25 7 7 18 7 25 0l33-32c0-1 0-1 0-1l52-52c4-3 9-3 13 0 4 4 4 10 0 13l-151 151c-12 13-27 22-44 29-25 9-48 24-66 44l-113 105c-7 6-7 18-1 25z" horiz-adv-x="1000" />
+
+<glyph glyph-name="ihk-dresden" unicode="&#xe950;" d="M491 207c15 5 33 6 50-3 12-6 24-15 35-29 17 12 39 25 62 27 17 2 34-1 50-12 10-7 19-17 27-30 14 12 33 22 52 24 16 1 32-3 47-15 11-9 20-23 28-41 12 0 26-3 38-10 10-6 18-15 22-27 5-12 5-26 2-42-2-10-11-16-21-14-10 1-16 11-14 20 2 12 1 19 0 24-2 4-4 6-8 9-7 4-19 5-29 4-8-2-17 3-20 12-6 21-14 32-21 38-6 5-13 7-20 6-17-2-36-15-49-29-4-5-11-7-17-6-6 1-11 6-13 11-7 20-16 31-24 37-8 5-16 7-26 6-20-3-43-17-57-32-4-3-10-5-15-5-5 1-10 4-13 9-12 20-23 29-32 33-7 4-14 4-21 1-7-3-15-8-22-17-7-8-13-17-18-26-2-5-6-8-12-10-5-1-10 0-15 4-22 16-37 20-46 20-9-1-17-5-23-14-7-9-12-23-15-37-3-15-4-30-4-40 0-10-8-19-18-19-9 0-18 8-18 18 0 13 1 31 5 48 4 17 10 36 21 51 11 15 27 27 50 29 16 0 34-5 53-17 4 6 8 12 13 17 9 11 22 21 36 27z m-187 456c4 3 10 4 15 2l229-63c10-2 15-12 13-22-3-9-13-15-22-12l-207 57v-37l216-51c9-2 15-12 13-21-2-10-12-16-21-14l-207 49v-364c0-5-2-10-6-13-3-3-8-5-13-5l-281 20c-10 0-17 9-17 19 1 10 10 17 19 16l262-18v336l-253-156c-9-5-20-2-25 6-5 9-3 20 6 25l271 166v32l-254-168c-8-6-19-4-25 5-5 8-3 19 5 24z m292-77c38 8 90 15 144 0 38-11 62-24 75-41 14-17 15-36 15-50l0-142c0 0 0 0 0 0l0-138c0 0 0 0 0 0v-7c0-10-8-18-18-18-10 0-18 8-18 18v8c0 2 0 2 0 2 0 0 0 1-2 2-7 5-23 10-59 16-48 7-95 4-132 0-9-1-18 6-19 15-1 10 6 19 15 20 38 4 89 8 141 0 24-4 43-8 56-13v25c0 5 0 7-1 8 0 2-1 3-3 6-7 5-22 12-58 20-46 9-93 5-129 0-10-2-19 5-20 15-2 9 5 18 15 20 37 5 88 10 141 0 24-5 42-10 55-17v19c0 9-1 14-6 19-6 7-21 16-57 25-44 11-92 6-128 0-9-2-19 4-20 14-2 10 5 19 14 21 37 6 91 12 142 0 24-6 42-12 55-20v5l0 5c0 10-2 16-7 23-6 8-21 18-57 28-45 14-90 9-126 2-9-2-19 4-21 13-2 10 4 19 14 22 38 8 90 13 143-2 23-7 41-14 54-23v9c0 13-1 20-7 28-6 8-21 18-57 28-45 14-91 8-127 0-9-2-19 4-21 14-2 10 4 19 14 21z m368-353c10 1 19-7 19-17 1-9-7-18-17-18l-100-7c-10 0-18 7-19 17s7 18 17 19z m-420 246c10 0 18-8 18-18v-209c0-10-8-18-18-18-10 0-18 8-18 18v209c0 10 8 18 18 18z m-292-47c6 2 12 1 16-2 5-3 8-9 8-14v-135c0-10-8-18-18-18h-225c-10 0-18 8-18 18 0 10 8 18 18 18h21v29l-15-5c-10-3-20 2-23 11-3 10 2 20 11 23z m-162-92v-41h24v49z m60 20v-61h26v70z m62 21v-82h28v92z m720 19c10 0 18-8 18-18v-99c0-9-8-17-18-17-10 0-18 8-18 17v99c0 10 8 18 18 18z m-475 79c4 0 8-2 8-7v-17l11 18c1 2 4 4 6 4 5 0 8-3 8-7 0-2-1-3-1-5l0 0-13-18c0 0 8-15 12-24 1-1 1-2 2-4 0 0 0-1 0-2 0-4-3-7-8-7-3 0-5 2-6 3-5 10-11 25-11 25v-19c0-4-4-7-8-7-4 0-7 3-7 7v53c0 5 3 7 7 7z m-85 14c4 0 7-3 7-8v-63c0-5-3-8-7-8-5 0-8 3-8 8v63c0 5 3 8 8 8z m27-3c4 0 7-3 7-8v-25l17-1v21c0 4 3 7 8 7 4 0 7-3 7-7v-56c0-4-3-7-7-7-5 0-8 3-8 7v21l-17 2v-23c0-4-3-7-7-7-5 0-8 3-8 7v61c0 5 3 8 8 8z m445-13c4 9 14 14 23 11l107-37c9-3 14-13 11-23-3-9-13-14-23-11l-107 37c-9 4-14 14-11 23z" horiz-adv-x="1000" />
+
+<glyph glyph-name="kreuzfahrtschiff" unicode="&#xe951;" d="M788 588c18 0 33-14 33-32v-48h3c14 0 26-9 30-22l1-2 14-51h14c14 0 26-9 30-22l1-2 29-108c0 0 0 0 0 0 10-8 15-21 12-34l-35-131c-4-14-17-24-31-24h-134c-9 0-17 8-17 18 0 10 8 18 17 18h131l33 124h-834l118-124h464c10 0 18-8 18-18 0-10-8-18-18-18h-465c-9 0-18 3-24 10l-125 131c-19 21-5 54 23 54h70l82 112 1 2c6 7 15 12 25 12h30c0 0 0 1 1 1l33 58 1 1c6 9 16 15 27 15h150c14 0 26-9 30-22l1-2 14-51h71c0 0 0 1 0 1l34 58 1 1c6 9 16 15 27 15h43c0 0 0 0 1 1 1 2 2 3 3 6 3 4 6 10 10 16 7 13 16 29 23 41 5 10 16 16 28 16h6z m-597-281h713l-8 31h-677c-2 0-4 0-6 1l-22-32z m48 67h648l-6 23h-626l-16-23z m86 59h179l-11 39h-145l-23-39z m328 0h179l-11 39h-145l-23-39z m109 81c-1-2-3-4-4-6h27v45h-1c-7-12-15-27-22-39z m-489-284c11 0 20-9 20-20 0-11-9-20-20-20-11 0-20 9-20 20 0 11 9 20 20 20z m103 0c11 0 20-9 20-20 0-11-9-20-20-20-12 0-21 9-21 20 0 11 9 20 21 20z m102 0c11 0 20-9 20-20 0-11-9-20-20-20-11 0-20 9-20 20 0 11 9 20 20 20z m103 0c11 0 20-9 20-20 0-11-9-20-20-20-11 0-20 9-20 20 0 11 9 20 20 20z m103 0c11 0 20-9 20-20 0-11-9-20-20-20-11 0-20 9-20 20 0 11 9 20 20 20z m103 0c11 0 20-9 20-20 0-11-9-20-20-20-11 0-20 9-20 20 0 11 9 20 20 20z" horiz-adv-x="1000" />
+
+<glyph glyph-name="leuchtturm" unicode="&#xe952;" d="M496 835c10 0 18-8 18-18v-18c36-8 63-40 63-79v-64c0-11-5-21-13-27l48-731c0-9-5-16-14-19-93-25-172-10-202 1-8 3-12 10-12 18l48 729c-10 6-17 16-17 29v64c0 39 27 71 63 79v18c0 10 8 18 18 18z m68-754c-57-10-104-7-132-1l-11-171c29-7 86-14 154 1l-11 171z m-10 152c-47-2-87-2-112 0l-7-117c21-5 68-10 126 0l-7 117z m-10 145c-38 3-70 2-92 1l-7-111c23-1 61-2 106 0l-7 110z m-10 155c-30 5-55 4-72 1l-8-119c23 1 53 1 88-1l-8 119z m-69 37c18 3 41 3 67 0l-4 54h-60l-3-54z m-14 89h91v26h-91v-26z m45 107c-25 0-45-21-45-46v0h91v0c0 25-21 46-46 46z m-123-99c9 5 20 2 25-6 5-9 2-20-7-25l-58-33c-9-5-20-2-24 6-5 9-2 20 6 24l58 34z m229-6c5 8 16 11 25 6l58-34c9-4 12-15 7-24-5-8-16-11-25-6l-58 33c-9 5-12 16-7 25z m-220 59c10 0 18-8 18-18 0-10-8-18-18-18h-67c-10 0-18 8-18 18 0 10 8 18 18 18h67z m303 0c10 0 18-8 18-18 0-10-8-18-18-18h-67c-10 0-18 8-18 18 0 10 8 18 18 18h67z m-376 74c4 8 15 11 24 6l58-34c9-5 12-16 7-24-5-9-16-12-24-7l-59 34c-8 5-11 16-6 25z m358 6c9 5 20 2 25-6 5-9 2-20-7-25l-58-34c-9-5-20-2-25 7-5 8-2 19 7 24l58 34z" horiz-adv-x="1000" />
+
+<glyph glyph-name="moewe" unicode="&#xe953;" d="M713 706c11 0 19-9 19-19 0-10-8-19-19-19-10 0-18 9-18 19 0 10 8 19 18 19z m-31 95c38 0 73-11 98-35 14-13 25-31 31-51h76c33 0 61-27 61-61v-14l0-2c-1-9-9-16-18-16h-117c-1-4-3-8-5-12-6-14-15-24-22-32-7-8-12-15-17-26-4-10-7-25-7-47 0-45 10-67 22-90 12-24 26-50 26-98 0-49-17-95-65-128-37-26-90-42-166-48v-139c18 0 41-3 62-10 30-10 59-31 70-70 1-6 0-11-3-16-4-4-9-7-14-7h-207c-10 0-18 8-18 18v222c-60 3-107 10-144 19-1-9-8-16-18-16h-126c-34 0-62 25-68 57h-43c-10 0-18 8-18 18 0 46 38 84 85 84h106c0 0 1 0 2 0 65 73 151 167 191 204 25 22 59 32 95 31 19 62 16 105 16 155 0 65 58 110 135 110z m-122-839c-18 5-39 6-55 4v-31h90c-6 13-18 22-35 27z m61-1c5-8 9-16 11-26h33c-9 11-21 18-36 23-2 1-5 2-8 3z m-78 178c-9 0-19-1-29-1-3 0-6 0-9 0v-136c11 1 25 1 38-1v138z m139 626c-65 0-99-36-99-74 0-47 3-94-16-160 10-3 20-6 30-10 56-25 102-78 102-161 0-39-7-70-20-94-13-24-32-40-53-50-40-19-90-17-122-17h-188c0-1 1-1 2-2 1 0 3-1 4-1 43-12 106-22 192-22 108 0 173 18 211 44 36 25 49 59 49 99 0 39-10 59-22 82-13 25-26 53-26 106 0 26 4 45 10 61 7 15 15 26 23 35 7 9 13 16 17 24 4 9 7 20 7 38 0 37-11 62-28 77-16 16-41 25-73 25z m-532-566c5-13 17-21 31-21h85c-16 7-28 14-36 21h-80z m-13 66c-21 0-38-13-45-31h94c0 1 1 2 2 3 7 8 16 18 25 28h-76z m475 206c-26-75-82-131-144-164-65-35-139-48-196-29-14-16-27-30-39-44h271c36 0 75-1 107 14 15 8 27 19 37 35 9 17 16 42 16 77 0 51-22 88-52 111z m-32 18c-45 19-94 13-120-11-33-30-101-103-161-170 43-8 99 2 152 30 57 31 108 83 129 151z m238 190c1-5 1-10 1-16 0-2 0-4 0-5h93c-2 12-12 21-25 21h-69z" horiz-adv-x="1000" />
+
+<glyph glyph-name="windsack" unicode="&#xe954;" d="M237 780c9 0 17-8 17-18v-808h99c10 0 18-8 18-18 0-10-8-18-18-18h-233c-10 0-18 8-18 18 0 10 8 18 18 18h99v808c0 10 8 18 18 18z m143-2c4 3 9 4 14 4l489-89c9-2 15-9 15-18v-115c0-8-6-16-15-17l-489-89c-6-1-12 1-16 4-16 16-40 38-60 58-11 10-20 19-28 25-3 4-6 6-8 8-3 3-4 3-3 3-8 6-10 17-4 25 5 8 16 10 25 4 1-1 4-3 6-5 2-2 5-5 9-8 7-7 17-16 27-26 10-9 20-19 31-29v209c-11-9-21-19-31-29-10-9-20-18-27-25-4-4-7-6-9-9-2-1-5-4-6-5-9-5-20-4-25 4-6 8-4 20 4 25-1 0 0 1 3 3 2 2 5 5 8 8 8 7 17 16 28 25 20 20 44 43 60 58l2 1z m28-285l96 17c-2 3-2 5-2 9v207l-94 17v-250z m129 26c0-1 0-2 0-3l91 17c0 1 0 2 0 4v161c0 2 0 3 0 5l-91 16v-200z m126 20l85 16c0 1 0 2 0 4v122l-85 15v-157z m120 22l79 14v85l-79 14v-113z" horiz-adv-x="1000" />
+
+<glyph glyph-name="ki-sparkles" unicode="&#xe955;" d="M562-7c0 143-117 260-260 260-10 0-18 8-18 18 0 10 8 18 18 18 143 0 260 116 260 259 0 10 8 18 17 18 10 0 18-8 18-18 0-143 117-259 260-259 10 0 18-8 18-18 0-10-8-18-18-18-143 0-260-117-260-260 0-10-8-18-18-18-9 0-17 8-17 18z m17 454c-29-82-94-146-176-176 82-30 147-95 176-177 30 82 95 147 177 177-82 30-147 94-177 176z m-315-18c0 67-54 121-121 121-10 0-18 8-18 18 0 10 7 17 16 18l2 0 6 0c64 4 115 56 115 121 0 10 8 18 18 18 10 0 18-8 18-18 0-67 54-121 121-121 10 0 18-8 18-18 0-10-8-18-18-18-65 0-118-50-121-114l0-7 0-1c-1-9-9-16-18-16-10 0-18 8-18 17z m18 206c-15-29-38-52-66-67 28-15 51-38 66-66 15 28 38 51 66 66-28 15-51 38-66 67z" horiz-adv-x="1000" />
+
+<glyph glyph-name="kleiderbuegel" unicode="&#xe956;" d="M576 544c0 39-31 70-69 70-38 0-70-31-70-70 0-8 2-16 4-24 4-9-1-19-11-22-9-4-19 1-22 11-4 11-6 23-6 35 0 58 46 106 105 106 58 0 105-48 105-106 0-39-21-74-53-92l0 0-1-1-96-47c0 0 0 0 0 0l-363-173c-34-16-22-67 14-67h767c35 0 48 49 16 67l-293 156c-9 4-12 15-7 24 4 9 15 12 24 7l293-156c64-34 40-133-33-133h-767c-75 0-97 103-30 135l364 172 95 47c20 12 34 35 34 61z" horiz-adv-x="1000" />
+
+<glyph glyph-name="toilettensymbol" unicode="&#xe957;" d="M330 254c10-1 17-10 16-20l-27-288c-2-24-22-42-46-42h-89c-24 0-44 18-46 42l-27 288c-1 10 6 19 16 20 10 0 18-7 19-17l27-288c1-6 6-10 11-10h89c5 0 10 4 10 10l28 288c1 10 9 17 19 17z m519-195c10-1 17-10 16-20l-10-94c-2-20-17-41-41-41h-71c-24 0-38 21-40 41l0 0-11 94c-1 10 6 19 16 20 10 1 19-6 20-16l10-94 0 0 0 0c1-4 2-7 3-8 1-1 2-1 2-2 0 0 0 0 0 0h71c0 0 1 0 1 0 0 1 1 1 1 2 2 1 3 4 3 8l0 0 0 0 11 94c1 10 10 17 19 16z m-345 743c10 0 18-8 18-18v-857c0-10-8-18-18-18-10 0-18 8-18 18v857c0 10 8 18 18 18z m370-456c10 2 20-3 22-13l63-245c1-5 0-11-4-15-3-4-8-7-14-7h-325c-5 0-10 3-14 7-3 4-4 10-3 15l63 245c2 10 12 15 21 13 10-3 16-12 13-22l-57-222h279l-57 222c-2 10 4 19 13 22z m-570 193c51 0 94-40 97-91l13-182c1-10-7-19-17-19-9-1-18 6-19 16l-13 182 0 0 0 0c-2 33-29 59-61 59-2 0-3-1-5-1l-43-25c-19-10-41-10-60 0l-44 25c-1 0-2 1-4 1-32 0-59-26-61-59l-8-182c-1-9-9-17-19-17-10 1-18 9-17 19l9 182c2 52 45 92 96 92 8 0 15-2 22-5l44-25c7-4 17-4 24 0l44 25c6 3 14 5 22 5z m550 0c52 0 94-40 97-91l13-182c1-10-6-19-16-19-10-1-19 6-19 16l-13 182 0 0 0 0c-2 33-29 59-62 59-1 0-3-1-4-1l-44-25c-18-10-41-10-59 0l-44 25c-1 0-3 1-4 1-33 0-60-26-61-59l-9-182c0-9-9-17-19-17-9 1-17 9-17 19l9 182c3 52 45 92 97 92 7 0 15-2 22-5l43-25c8-4 17-4 25 0l43 25c7 3 14 5 22 5z m-620 268c59-3 103-57 93-116l-8-50c-7-44-46-77-91-77l-4 0c-41 2-77 32-85 73l-1 4-8 50c-10 61 37 116 98 116l6 0z m-6-36c-39 0-69-35-63-74l8-50c5-27 28-47 55-47 28 0 51 20 56 47l8 50c6 39-24 74-64 74z m557 36c58-3 102-57 93-116l-9-50c-7-44-45-77-90-77l-4 0c-42 2-77 32-86 73l-1 4-8 50c-10 61 37 116 99 116l6 0z m-6-36c-40 0-70-35-64-74l9-50c4-27 27-47 55-47 27 0 51 20 55 47l8 50c7 39-23 74-63 74z" horiz-adv-x="1000" />
+
+<glyph glyph-name="pferd" unicode="&#xe958;" d="M741 75c9 2 19-4 21-14l7-31c5-21 1-43-9-62l-30-55c-5-9-16-12-24-7-9 4-12 15-7 24l30 55c6 11 8 25 5 37l-7 31c-2 10 4 19 14 22z m-429 521v22l-41-15c-15-5-31-3-44 5-25 17-28 53-7 74l72 71c10 10 24 15 38 13l24-3v30c0 7 4 14 11 17 8 2 16 0 20-6l47-56c4-5 9-9 15-15 35-32 45-81 46-128 0-41-7-85-15-119 24-15 44-25 63-31 21-7 42-9 67-6 29 4 61 0 88-16l39-24 10 7c-6 44 22 86 66 98 57 15 114-28 114-88v-190c0-7-4-14-10-16-7-3-14-2-19 2l-39 33-39-33c-5-4-13-5-19-2-6 2-10 9-10 16v150c0 10 8 18 18 18 9 0 17-8 17-18v-112l22 18c6 6 16 6 23 0l20-17v151c0 37-34 63-69 53-28-7-45-35-39-63l1-5c1-7-2-15-8-19l-21-14 22-108c0-2 0-4 0-6l-6-50 62-57c14-12 23-29 27-47l19-89c4-20 1-40-8-58l-39-78c-3-6-9-10-16-10h-57c-6 0-12 3-15 8-3 6-4 12-1 18l39 78c6 11 7 23 5 34l-10 51c-3 15-13 29-27 36l-114 63c-1 0-2 1-3 1l-56 44c-12 9-28 13-43 10l-15-3c-40-7-82-2-119 14-9 4-13 15-9 24 4 9 14 13 23 9 31-14 65-18 99-12l15 3c25 5 50-1 70-17l56-42 113-62c23-13 40-35 45-61l10-51c4-19 1-39-8-57l-26-52h17l34 68c6 10 7 23 5 35l-19 89c-2 10-8 20-16 28l-69 63c-4 4-6 10-6 15l7 57-22 112-40 24c-18 12-41 15-65 12-29-4-55-2-82 7-26 8-52 22-83 43-6 4-9 12-7 19 9 34 18 79 17 122-1 43-11 80-34 101-5 5-13 12-19 19l-15 18v0c0-5-2-10-6-13-4-4-9-5-14-5l-43 6c-3 0-7-1-9-3l-71-71c-6-6-5-15 1-19 4-2 8-3 11-2l66 24 2 1c1 0 1 0 2 0l48 7 5-36-33-4v-32c0-24-5-47-16-68l-26-50c-6-12-9-24-8-36l6-76c0-6-3-12-7-16-5-4-12-5-17-2l-78 27c-9 4-19 3-28-2-12-7-18-20-17-33l16-151h15l-13 145c0 7 3 13 8 17 6 3 13 4 19 0l116-66c11-7 26-4 33 7l40 54c5 8 17 10 25 4 8-6 9-17 4-25l-40-54c-18-25-52-33-79-17l-87 49 11-130c0-5-1-10-5-14-3-3-8-5-13-5h-50c-9 0-17 7-18 16l-17 166c-3 27 10 54 34 68 18 10 39 12 58 5l52-19-2 29c-54 20-99 19-127 2-26-17-44-51-34-111 2-10-5-19-14-20-10-2-19 5-21 14-11 69 7 120 50 147 38 23 90 24 145 7 1 12 5 25 11 36l26 51c8 15 12 33 12 51z m145 171c5 8 17 10 25 5 38-27 55-78 61-127 5-49-1-102-14-137-3-9-13-14-22-10-10 3-15 13-11 22 10 30 16 76 11 121-5 46-20 84-46 102-8 5-10 16-4 24z" horiz-adv-x="1000" />
+
+<glyph glyph-name="pferdekopf" unicode="&#xe959;" d="M442 357c5 8 16 11 25 6 8-5 11-16 5-25l-87-142c-20-32-55-52-93-52-61 0-110 49-110 110v297c-29 17-51 36-68 59-19 26-33 55-45 89-2 5-1 11 2 16 3 5 9 8 15 8h414c96-2 182-33 250-117 67-83 114-214 139-414 1-4-1-9-4-13-3-4-7-6-12-7-90-7-149-23-193-51-44-29-75-72-107-138-3-7-9-11-16-11h-171c-7 0-13 4-16 10-3 5-3 12 0 18l163 271-22 16c-8 6-10 17-4 25 6 8 17 10 25 4l36-25c7-6 9-16 5-24l-156-259h129c31 64 65 111 114 143 48 31 109 47 191 55-25 186-70 305-129 377-58 72-130 101-214 104l-8 0h-388c9-21 18-39 30-55 16-21 37-38 67-54 5-4 9-10 9-16v-308c0-41 33-74 74-74 25 0 49 13 63 35l87 142z m-121 62c-19 0-35 16-35 36 0 19 16 35 35 35 20 0 36-16 36-35 0-20-16-36-36-36z" horiz-adv-x="1000" />
+
+<glyph glyph-name="a" unicode="&#xe95a;" d="M804 588c-58 74-141 125-233 142-93 17-188 0-269-48-81-48-141-124-170-214-29-90-24-187 14-273 38-86 106-155 191-195 85-40 182-47 272-21 90 27 168 86 218 165 50 80 70 175 54 268-1 10 5 19 15 20 10 2 19-5 21-14 16-102-5-206-60-293-54-87-139-151-238-180-98-29-204-21-297 22-93 44-168 120-209 214-41 94-46 200-15 298 31 98 98 181 186 234 88 52 192 71 294 52 101-19 191-74 255-155 6-8 4-19-4-25-7-6-19-5-25 3z m-236-397l-24 84h-117l-23-85c-2-7-9-12-19-12-11 0-21 7-21 17 0 4 1 7 2 8l91 302c4 14 14 23 29 23 14 0 25-9 29-23l91-301c1-2 2-6 2-9 0-10-9-17-21-17-10 0-17 5-19 13z m-94 249l-37-130h98l-37 130-12 45-12-45z" horiz-adv-x="1000" />
+
+<glyph glyph-name="b" unicode="&#xe95b;" d="M804 588c-58 74-141 125-233 142-93 17-188 0-269-48-81-48-141-124-170-214-29-90-24-187 14-273 38-86 106-155 191-195 85-40 182-47 272-21 90 27 168 86 218 165 50 80 70 175 54 268-1 10 5 19 15 20 10 2 19-5 21-14 16-102-5-206-60-293-54-87-139-151-238-180-98-29-204-21-297 22-93 44-168 120-209 214-41 94-46 200-15 298 31 98 97 181 186 234 88 52 192 71 294 52 101-19 191-74 255-155 6-8 4-19-4-25-7-6-19-5-25 3z m-294-409h-74c-12 0-20 7-20 18v312c0 11 8 18 20 18h67c69 0 101-39 101-94 0-40-21-64-42-76 24-9 54-31 54-81 0-64-42-97-106-97z m66 97c0 39-25 61-66 61h-54v-123h54c41 0 66 23 66 62z m-12 157c0 32-21 58-61 58h-47v-118h47c38 0 61 24 61 60z" horiz-adv-x="1000" />
+
+<glyph glyph-name="c" unicode="&#xe95c;" d="M804 588c-58 74-141 125-233 142-93 17-188 0-269-48-81-48-141-124-170-214-29-90-24-187 14-273 38-86 106-155 191-195 85-40 182-47 272-21 90 27 168 86 218 165 50 80 70 175 54 268-1 10 5 19 15 20 10 2 19-5 21-14 16-102-5-206-60-293-54-87-139-151-238-180-98-29-204-21-297 22-93 44-168 120-209 214-41 94-46 200-15 298 31 98 97 181 186 234 88 52 192 71 294 52 101-19 191-74 255-155 6-8 4-19-4-25-7-6-19-5-25 3z m-316-412c-58 0-107 43-107 108v138c0 65 49 108 107 108 28 0 51-8 68-19 9-5 13-10 13-19 0-10-8-17-18-17-6 0-10 3-15 6-13 7-29 13-48 13-38 0-67-32-67-72v-138c0-40 29-73 67-73 19 0 36 8 48 14 5 3 9 5 15 5 10 0 18-7 18-17 0-9-4-13-12-18-18-11-41-19-69-19z" horiz-adv-x="1000" />
+
+<glyph glyph-name="d" unicode="&#xe95d;" d="M804 588c-58 74-141 125-233 142-93 17-188 0-269-48-81-48-141-124-170-214-29-90-24-187 14-273 38-86 106-155 191-195 85-40 182-47 272-21 90 27 168 86 218 165 50 80 70 175 54 268-1 10 5 19 15 20 10 2 19-5 21-14 16-102-5-206-60-293-54-87-139-151-238-180-98-29-204-21-297 22-93 44-168 120-209 214-41 94-46 200-15 298 31 98 97 181 186 234 88 52 192 71 294 52 101-19 191-74 255-155 6-8 4-19-4-25-7-6-19-5-25 3z m-197-163v-144c0-62-43-102-105-102h-82c-11 0-20 7-20 18v312c0 11 9 18 20 18h82c62 0 105-40 105-102z m-167 66v-277h62c35 0 65 26 65 67v144c0 41-30 66-65 66h-62z" horiz-adv-x="1000" />
+
+<glyph glyph-name="e" unicode="&#xe95e;" d="M804 588c-58 74-141 125-233 142-93 17-188 0-269-48-81-48-141-124-170-214-29-90-24-187 14-273 38-86 106-155 191-195 85-40 182-47 272-21 90 27 168 86 218 165 50 80 70 175 54 268-1 10 5 19 15 20 10 2 19-5 21-14 16-102-5-206-60-293-54-87-139-151-238-180-98-29-204-21-297 22-93 44-168 120-209 214-41 94-46 200-15 298 31 98 97 181 186 234 88 52 192 71 294 52 101-19 191-74 255-155 6-8 4-19-4-25-7-6-19-5-25 3z m-350-97v-119h103c9 0 17-7 17-18 0-10-8-18-17-18h-103v-122h119c10 0 18-6 18-17 0-12-8-18-18-18h-139c-12 0-20 7-20 18v312c0 10 8 18 20 18h139c10 0 18-7 18-18 0-11-8-18-18-18h-119z" horiz-adv-x="1000" />
+
+<glyph glyph-name="f" unicode="&#xe95f;" d="M804 588c-58 74-141 125-233 142-93 17-188 0-269-48-81-48-141-124-170-214-29-90-24-187 14-273 38-86 106-155 191-195 85-40 182-47 272-21 90 27 168 86 218 165 50 80 70 175 54 268-1 10 5 19 15 20 10 2 19-5 21-14 16-102-5-206-60-293-54-87-139-151-238-180-98-29-204-21-297 22-93 44-168 120-209 214-41 94-46 200-15 298 31 98 97 181 186 234 88 52 192 71 294 52 101-19 191-74 255-155 6-8 4-19-4-25-7-6-19-5-25 3z m-341-255v-137c0-11-8-18-20-18-12 0-20 7-20 18v313c0 11 9 18 20 18h141c10 0 17-7 17-18 0-11-7-18-17-18h-121v-122h104c10 0 17-7 17-18 0-11-7-18-17-18h-104z" horiz-adv-x="1000" />
+
+<glyph glyph-name="g" unicode="&#xe960;" d="M804 588c-58 74-141 125-233 142-93 17-188 0-269-48-81-48-141-124-170-214-29-90-24-187 14-273 38-86 106-155 191-195 85-40 182-47 272-21 90 27 168 86 218 165 50 80 70 175 54 268-1 10 5 19 15 20 10 2 19-5 21-14 16-102-5-206-60-293-54-87-139-151-238-180-98-29-204-21-297 22-93 44-168 120-209 214-41 94-46 200-15 298 31 98 97 181 186 234 88 52 192 71 294 52 101-19 191-74 255-155 6-8 4-19-4-25-7-6-19-5-25 3z m-200-234v-74c0-61-49-105-107-105-59 0-108 44-108 105v143c0 64 53 108 110 108 33 0 52-11 73-23 7-4 12-10 12-18 0-10-8-17-17-17-6 0-11 3-16 5-14 9-30 17-52 17-38 0-70-34-70-72v-143c0-38 29-70 68-70 38 0 67 31 67 70v57h-46c-10 0-17 6-17 17 0 12 7 18 17 18h67c11 0 19-10 19-18z" horiz-adv-x="1000" />
+
+<glyph glyph-name="h" unicode="&#xe961;" d="M804 588c-58 74-141 125-233 142-93 17-188 0-269-48-81-48-141-124-170-214-29-90-24-187 14-273 38-86 106-155 191-195 85-40 182-47 272-21 90 27 168 86 218 165 50 80 70 175 54 268-1 10 5 19 15 20 10 2 19-5 21-14 16-102-5-206-60-293-54-87-139-151-238-180-98-29-204-21-297 22-93 44-168 120-209 214-41 94-46 200-15 298 31 98 97 181 186 234 88 52 192 71 294 52 101-19 191-74 255-155 6-8 4-19-4-25-7-6-19-5-25 3z m-197-392c0-10-8-18-20-18-13 0-20 7-20 18v140h-134v-140c0-10-7-18-20-18-12 0-20 7-20 18v314c0 11 9 18 20 18 12 0 20-7 20-18v-138h134v138c0 11 8 18 20 18 11 0 20-7 20-18v-314z" horiz-adv-x="1000" />
+
+<glyph glyph-name="i" unicode="&#xe962;" d="M804 588c-58 74-141 125-233 142-93 17-188 0-269-48-81-48-141-124-170-214-29-90-24-187 14-273 38-86 106-155 191-195 85-40 182-47 272-21 90 27 168 86 218 165 50 80 70 175 54 268-1 10 5 19 15 20 10 2 19-5 21-14 16-102-5-206-60-293-54-87-139-151-238-180-98-29-204-21-297 22-93 44-168 120-209 214-41 94-46 200-15 298 31 98 97 181 186 234 88 52 192 71 294 52 101-19 191-74 255-155 6-8 4-19-4-25-7-6-19-5-25 3z m-304-410c-12 0-20 7-20 18v314c0 11 8 18 20 18 12 0 20-7 20-18v-314c0-11-8-18-20-18z" horiz-adv-x="1000" />
+
+<glyph glyph-name="j" unicode="&#xe963;" d="M804 588c-58 74-141 125-233 142-93 17-188 0-269-48-81-48-141-124-170-214-29-90-24-187 14-273 38-86 106-155 191-195 85-40 182-47 272-21 90 27 168 86 218 165 50 80 70 175 54 268-1 10 5 19 15 20 10 2 19-5 21-14 16-102-5-206-60-293-54-87-139-151-238-180-98-29-204-21-297 22-93 44-168 120-209 214-41 94-46 200-15 298 31 98 97 181 186 234 88 52 192 71 294 52 101-19 191-74 255-155 6-8 4-19-4-25-7-6-19-5-25 3z m-289-318v240c0 11 8 18 20 18 12 0 20-7 20-18v-240c0-55-40-95-95-95-11 0-24 2-36 7-8 4-14 11-14 19 0 10 8 18 18 18 12 0 18-9 32-9 32 0 55 24 55 60z" horiz-adv-x="1000" />
+
+<glyph glyph-name="k" unicode="&#xe964;" d="M804 588c-58 74-141 125-233 142-93 17-188 0-269-48-81-48-141-124-170-214-29-90-24-187 14-273 38-86 106-155 191-195 85-40 182-47 272-21 90 27 168 86 218 165 50 80 70 175 54 268-1 10 5 19 15 20 10 2 19-5 21-14 16-102-5-206-60-293-54-87-139-151-238-180-98-29-204-21-297 22-93 44-168 120-209 214-41 94-46 200-15 298 31 98 97 181 186 234 88 52 192 71 294 52 101-19 191-74 255-155 6-8 4-19-4-25-7-6-19-5-25 3z m-364-410c-12 0-20 7-20 18v314c0 11 8 18 20 18 12 0 20-7 20-18v-133c0-3 3-5 5-5 3 0 6 2 8 5l112 144c4 4 8 7 15 7 12 0 19-10 19-19 0-6-1-10-4-13l-114-141 116-145c2-2 5-7 5-12 0-11-8-20-20-20-8 0-14 5-17 9l-111 142c-3 3-6 5-9 5-2 0-5-2-5-5v-133c0-11-8-18-20-18z" horiz-adv-x="1000" />
+
+<glyph glyph-name="l" unicode="&#xe965;" d="M804 588c-58 74-141 125-233 142-93 17-188 0-269-48-81-48-141-124-170-214-29-90-24-187 14-273 38-86 106-155 191-195 85-40 182-47 272-21 90 27 168 86 218 165 50 80 70 175 54 268-1 10 5 19 15 20 10 2 19-5 21-14 16-102-5-206-60-293-54-87-139-151-238-180-98-29-204-21-297 22-93 44-168 120-209 214-41 94-46 200-15 298 31 98 97 181 186 234 88 52 192 71 294 52 101-19 191-74 255-155 6-8 4-19-4-25-7-6-19-5-25 3z m-224-409h-135c-12 0-20 7-20 18v313c0 11 8 18 20 18 12 0 20-7 20-18v-296h115c10 0 17-6 17-17 0-12-7-18-17-18z" horiz-adv-x="1000" />
+
+<glyph glyph-name="lippe-zu-detmold" unicode="&#xe966;" d="M30 303c19 0 40-7 57-19 12-10 23-22 30-37 28 8 52 8 72-2 19-10 32-27 41-45 53 3 87-31 89-65 1-10-7-18-17-19-9 0-18 7-18 17-1 12-18 38-62 31-8-2-16 3-19 10-9 20-18 33-30 39-12 5-29 7-60-6-5-2-10-1-15 1-4 2-8 7-9 12-3 14-12 26-24 35-11 8-25 13-35 13-10 0-18 8-18 18 0 9 8 17 18 17z m655 23v-172l120-12v188c-38-1-79-2-120-4z m155-173l113 78v76l-113 19v-173z m-306 168v-149c0-1 0-1 0-2l116-12v167c-41-2-80-3-116-4z m-119-5c-10 0-19-1-26-1v-130l109-11v145c-33-1-62-2-83-3z m-131-94v215c0 10 8 18 17 18 10 0 18-8 18-18v-215c0-9-8-17-18-17-9 0-17 8-17 17z m556 192c0-1 0-2 0-2 1-1 1-1 1-1l112-27v81c0 0-1 0-1 0l-112 102v-153z m-451 93v-111c40 2 76 4 109 5v126l-109-20z m261 49l-116-22v-131c40 1 77 3 116 5 0 1 0 2 0 4v144z m-366-68v61h-205v-226c0-10-8-18-17-18-10 0-18 8-18 18v172h-23c-9 0-17 8-17 18 0 10 8 18 17 18h23v36c0 10 8 18 18 18h237l524 97 3 0c5 0 10-2 14-5l143-153c4-3 5-7 5-12v-290c0-6-3-11-7-15l-144-100c-4-3-8-4-12-3l-477 50c-10 1-17 10-16 19 1 10 10 17 20 16l2 0v143c0 10 7 18 17 18l0 0c0 0 0 0 0 0 0 0 0 0 1 0 0 0 1 0 2 0 2 0 4 1 8 1 7 0 18 0 31 1 27 1 64 2 107 4 86 3 194 7 285 10 8 0 16 0 24-2l124-21v4l-120 30c-8 2-16 2-24 2-171-7-260-12-437-19-5 0-9 1-13 5-3 3-5 8-5 13v143c0 9 6 16 14 18l452 86c5 1 11-1 15-5l61-55-76 80-501-93v-64c0-10-8-18-18-18-9 0-17 8-17 18z m401-76c0-1 0-2 0-3 36 2 75 4 120 6v171l-120-23v-151z m-576 109c5 0 9-2 9-7v-57c0-4-4-7-9-7-5 0-9 3-9 7v57c0 5 4 7 9 7z m71 0c5 0 8-2 8-7v-57c0-4-3-7-8-7-5 0-9 3-9 7v22h-21v-22c0-4-4-7-9-7-5 0-8 3-8 7v57c0 5 3 7 8 7 5 0 9-2 9-7v-21h21v21c0 5 4 7 9 7z m68 0c5 0 9-3 9-7 0-1-1-3-2-4l0 0-21-24 21-24c1 0 1-1 2-2 0-1 0-2 0-3 0-4-4-7-9-7-3 0-6 2-7 4l-21 23v-20c0-4-4-7-9-7-5 0-8 3-8 7v57c0 5 3 7 8 7 5 0 9-2 9-7v-20l21 24c1 2 4 3 7 3z" horiz-adv-x="1000" />
+
+<glyph glyph-name="schaf" unicode="&#xe967;" d="M457 386c0-12-9-22-21-22-12 0-22 10-22 22 0 12 10 21 22 21 12 0 21-9 21-21z m143 0c0-12-10-22-21-22-12 0-22 10-22 22 0 12 10 21 22 21 11 0 21-9 21-21z m-165 296c46 46 119 45 164 0 63 16 127-22 146-84l5 0c39-7 70-38 79-77 2-9-4-19-14-21-10-2-19 4-21 14-6 25-25 44-51 48l-16 3c-7 2-13 7-14 15-10 50-62 82-111 66l-3-1c-7-2-15 0-20 6-31 38-88 39-121 3l-4-4c-5-6-13-7-20-5-39 16-83-5-94-45l-7-22c-2-7-8-12-15-13-36-5-62-38-58-74 11 4 22 9 34 13l20 6 2 1c6 1 12-2 16-6 25-27 63-38 98-28l13 3 1 0c4 1 9 0 12-2 33-18 72-19 106-4l13 5 2 1c6 2 12 0 16-4 16-13 40-13 56 0l38 31c5 3 11 5 16 3l33-9c52-15 99-44 135-84 15-17 7-45-16-50l-14-4c-7-1-13-3-20-3 4-8 7-16 11-23 16-35 9-77-19-102l1-9c9-61-29-119-88-134-11-55-65-92-121-80l-14 3c-47-38-114-39-161 0-57-10-113 22-133 76-52 15-87 65-82 120l3 22c-37 26-51 75-30 116l5 11c-11 1-23 3-34 6-22 6-29 35-12 51l10 8c21 19 44 35 69 49l-1 7c-9 54 25 104 77 117l3 12c17 56 75 88 130 72z m239-231c10-45 2-91-22-129l-3-5-10-86c-3-28-15-53-34-74l-2-1c-52-56-140-55-191 1-18 21-30 47-33 74l-8 86-5 7c-27 37-37 84-28 129 0 1 0 2 0 2-8 5-16 11-24 18l-9-3c-46-15-88-40-124-72l-1 0c38-7 77 0 110 20 8 5 19 2 24-6 5-9 2-20-6-25-23-14-49-23-76-26 0-1 0-3-1-5l-11-22c-14-28-3-62 25-76 6-3 10-10 9-17l-3-34c-4-38 22-74 59-82l4-1 2-1c6-1 10-6 12-11l1-5c14-43 58-67 101-56l2 1c5 0 11-1 14-5l2-1c36-33 91-32 126 1l2 1c4 3 9 4 14 3l22-4c40-8 77 20 80 61l0 1c1 8 7 14 15 15 47 7 79 50 72 97l-3 19c-1 7 2 14 7 17 21 14 28 41 17 64-6 12-12 24-17 36 0 1 0 2-1 2-28 3-55 13-79 29-8 5-10 16-5 25 6 8 17 10 25 4 32-21 72-28 109-19l6 1c-30 32-69 56-111 67l-25 7-28-22z m-234-9c-23-6-46-6-68 0-5-34 3-69 23-97l8-11c2-3 3-6 3-9l9-90c2-20 10-39 24-54 14-15 32-25 50-29v40c-12 3-24 7-35 15-8 5-10 16-5 24 6 9 17 11 25 5 20-13 46-13 66 0 8 6 19 4 25-5 5-8 3-19-5-24-11-8-23-12-35-15v-40c19 3 38 12 52 28l1 1c14 15 23 34 25 54l11 90 1 2c0 2 1 4 2 6l5 8c17 27 24 60 19 92-20-5-43-2-61 9l-3-1c-42-18-90-17-132 3l-5-2z" horiz-adv-x="1000" />
+
+<glyph glyph-name="sonne" unicode="&#xe968;" d="M482-7v86c0 9 8 17 18 17 10 0 18-8 18-17v-86c0-10-8-18-18-18-10 0-18 8-18 18z m-187 177c7 7 18 7 25 0 7-7 7-18 0-25l-60-60c-7-7-18-7-25 0-7 7-7 18 0 25l60 60z m385 0c7 7 19 7 26 0l59-60c7-7 7-18 0-25-7-7-18-7-25 0l-60 60c-7 7-7 18 0 25z m-12 180c0 45-18 87-49 119-32 31-74 49-119 49-44 0-87-18-119-49-31-32-49-74-49-119 0-44 18-87 49-119 32-31 75-49 119-49 45 0 87 18 119 49 31 32 49 75 49 119z m-439 18c9 0 17-8 17-18 0-10-8-18-17-18h-86c-10 0-18 8-18 18 0 10 8 18 18 18h86z m628 0c10 0 18-8 18-18 0-10-8-18-18-18h-86c-9 0-17 8-17 18 0 10 8 18 17 18h86z m-622 247c7 7 18 7 25 0l60-59c7-7 7-19 0-26-7-7-19-7-25 0l-60 60c-7 7-7 18 0 25z m505 0c7 7 18 7 25 0 7-7 7-18 0-25l-59-60c-7-7-19-7-26 0-7 7-7 19 0 26l60 59z m-258 6v86c0 10 8 18 18 18 10 0 18-8 18-18v-86c0-9-8-17-18-17-10 0-18 8-18 17z m222-271c0-54-22-106-60-144-38-38-90-60-144-60-54 0-106 22-144 60-38 38-60 90-60 144 0 54 22 106 60 144 38 38 90 60 144 60 54 0 106-22 144-60 38-38 60-90 60-144z" horiz-adv-x="1000" />
+
+<glyph glyph-name="fisch" unicode="&#xe969;" d="M347 587c20 2 46 2 73-1 89-9 141-46 163-70 48-7 93-26 131-50 54-33 97-79 121-119 4-8 2-18-5-24-5-3-11-8-17-13-1-1-2-1-3-2 6-5 14-11 19-15 4-2 7-7 8-11 1-5 0-10-3-14l0 0 0 0c0 0 0 0 0 0 0 0 0 0 0 0-1-1-1-1-1-2-1-1-2-2-4-5-3-4-7-9-13-17-12-14-28-32-48-52-40-38-97-81-161-90-7-1-14-2-21-3-1-1-1-1-2-2-31-23-70-54-122-66-25-7-53-11-76-12-12-1-24-1-33-1-9 1-19 2-26 6-9 4-14 11-17 20-2 7-1 14 0 20 1 5 3 11 4 15 2 4 3 7 3 8 0 1 1 2 1 2l19 58c-2 2-5 3-7 5-39 22-81 53-113 81-8 7-16 15-23 22-24-22-44-38-71-49-16-7-37-11-56-12-9 0-19 1-27 3-8 2-19 7-24 18-6 12-6 25-3 36 2 10 7 21 10 30 5 13 15 25 22 34 2 2 4 4 5 6-13 24-20 48-22 68-1 11 0 23 4 33 4 10 13 20 27 21l6 0c29 1 54-9 76-25 20-14 37-33 54-52 12 12 24 23 30 27 9 5 20 3 25-5 6-9 3-20-5-25-3-2-15-12-27-25-5-6-11-12-14-18-4-5-6-9-6-12 0 0 0-1 0-1 2-3 4-7 8-12 8-10 20-22 35-36 30-26 70-55 107-76 72-42 143-62 254-46 5 1 10 2 15 3-5 9-9 19-13 29-8 16-15 35-17 47-1 9 5 19 15 20 10 2 19-5 21-14 1-7 6-22 13-39 5-11 10-22 15-31 34 15 66 41 92 66 19 18 34 36 45 49 2 3 4 5 6 8-3 2-5 4-8 7-4 3-8 7-11 11-1 2-3 5-4 9-2 3-3 10 1 16l1 2c2 4 5 7 7 9 3 3 6 6 10 9 2 1 4 3 6 4-22 32-57 67-101 94-15 10-32 19-50 26-11-19-28-55-30-97-3-54-2-87 0-96 1-10-6-19-16-20-10-2-19 5-20 15-1 12-3 48 0 103 3 44 18 83 32 107-28 7-58 11-88 9-67-5-110-15-142-28-5-3-10-5-14-7-2-2-4-3-7-4-1 0-1 0-2 0-20-11-37-24-54-37-8-6-19-4-25 4-6 8-5 19 3 25 16 11 31 23 51 34l-27 81c-3 8-1 15 4 21 3 4 8 7 11 8 8 4 17 6 26 7z m5-509c-1-3-3-8-4-11-1-4-2-7-3-10 0-1 0-1 0-2 0 0 1 0 1 0 2 0 5-1 9-1 8-1 17 0 28 0 22 2 48 5 71 11 25 7 47 18 67 31-58 1-106 14-152 35l-17-53z m-287 330c-1-3-2-8-1-16 1-17 8-41 23-64 5-7 4-16-1-22l-1-1 0 0c0 0 0 0 0 0 0 0-1 0-1-1-1 0-2-1-3-2-2-3-5-6-8-10-7-8-14-17-17-24-4-11-7-18-9-25-1-5-1-8 0-11 1 0 1 0 2-1 4-1 10-1 17-1 15 1 31 4 43 9 22 9 39 22 62 44-2 3-4 5-5 8-3 6-5 14-4 22l1 4c2 7 5 14 9 20-17 21-34 39-52 52-18 13-36 19-55 19z m351 143c-25 2-48 2-64 0-3 0-6-1-8-1l21-64c1 1 2 1 3 2 36 15 83 26 152 31 1 0 1 0 1 0-24 13-58 27-105 32z m113-90c8 5 19 2 24-7 5-9 2-19-7-24-16-9-16-32 0-41 6-3 9-9 9-16 0-6-4-12-10-15-14-7-14-28-1-35l2-1c6-3 9-9 9-15 0-7-3-13-8-16l-5-3c-13-8-11-27 2-33 7-3 11-9 11-16 1-6-3-13-9-16l-3-2c-12-6-11-24 1-30 10-4 14-14 10-23-4-9-15-13-24-9-32 14-40 54-21 79-15 20-16 49 1 69-15 19-15 48 0 67-20 27-14 69 19 87z m-88-40c9 5 20 2 24-7 5-8 2-19-6-24-16-9-16-32 0-40 5-4 9-10 9-16 0-7-4-13-10-16-14-7-15-27-1-35l2-1c5-3 9-9 9-15 0-6-3-12-9-16l-4-3c-13-8-12-27 2-33 9-4 13-14 9-23-4-9-14-13-23-10-35 16-43 58-21 85-15 20-14 48 1 67-21 27-14 69 18 87z m-95-32c8 5 19 2 24-7 5-8 2-19-7-24-16-9-16-31 0-40 6-3 9-10 9-16 0-7-4-13-10-16-14-7-14-27 0-35l1-1c9-5 12-16 7-24-5-9-16-12-24-7l-2 1c-31 18-36 57-17 83-20 27-14 68 19 86z m338 34c-25 0-45-20-45-45 0-26 20-46 45-46 26 0 46 20 46 46 0 25-20 45-46 45z m0-35c6 0 10-5 10-10 0-6-4-10-10-10-5 0-10 4-10 10 0 5 5 10 10 10z m195 137c23 0 42-19 42-42 0-23-19-42-42-42-23 0-42 19-42 42 0 23 19 42 42 42z m0-36c-3 0-6-3-6-6 0-3 3-6 6-6 3 0 6 3 6 6 0 3-3 6-6 6z m-58 104c12 0 22-10 22-22 0-11-10-21-22-21-11 0-21 10-21 21 0 12 10 22 21 22z m106 75c31 0 57-26 57-58 0-31-26-57-57-57-32 0-58 26-58 57 0 32 26 58 58 58z m0-36c-12 0-22-10-22-22 0-12 10-22 22-22 12 0 22 10 22 22 0 12-10 22-22 22z" horiz-adv-x="1000" />
 </font>
 </defs>
 </svg>

gfi-ihk-2024/stories/atoms/badge/BadgeComponent.js

@@ -4,5 +4,5 @@ import {createElement} from "../../_global/scripts/helpers";
 export const createBadge = ({
   count = 8,
 }) => {
-  return createElement('span', ['badge'], count.toString());
+  return createElement('span', ['badge', 'variant-base'], count.toString());
 }

gfi-ihk-2024/stories/atoms/badge/badge.scss

@@ -9,7 +9,7 @@
   vertical-align: top;
   min-width: 1.5em;
   height: 1.5em;
-  background-color: var(--theme-color-primary-dimmed-03);
+  background-color: var(--color-button-tertiary-background);
   font-family: 'Korb', sans-serif;
   font-size: var(--font-size-copy);
   line-height: 1.2em;

gfi-ihk-2024/stories/atoms/blockquote/BlockquoteComponent.js

@@ -6,7 +6,7 @@ export const createBlockquote = ({
   author = 'Max Mustermann, Unternehmer',
   type = 'regular',
 }) => {
-  const blockquote = createElement('blockquote');
+  const blockquote = createElement('blockquote', ['variant-base']);
   blockquote.dataset.quoteType = type;
   if (typeof quote === 'string') {
     createElement('p', [], quote, blockquote);

gfi-ihk-2024/stories/atoms/blockquote/blockquote.scss

@@ -1,5 +1,5 @@
 blockquote {
-  border-left: 6px solid var(--theme-color-secondary);
+  border-left: 6px solid var(--color-decoration);
   margin: 2em 0;
   padding-left: 1.2em;
   font-style: italic;
@@ -32,8 +32,10 @@ blockquote {
       display: block;
       width: 30px;
       height: 30px;
-      background-image: url('../../assets/img/quote.svg');
-      background-size: 100%;
+      mask-image: url('../../assets/img/quote.svg');
+      mask-size: 100%;
+      mask-repeat: no-repeat;
+      background-color: var(--color-decoration);
       margin: 2px 0 2px -40px;
 
       @media(max-width: 767px) {
@@ -48,8 +50,10 @@ blockquote {
     display: block;
     width: 30px;
     height: 30px;
-    background-image: url('../../assets/img/quote.svg');
-    background-size: 100%;
+    mask-image: url('../../assets/img/quote.svg');
+    mask-size: 100%;
+    mask-repeat: no-repeat;
+    background-color: var(--color-decoration);
     margin: 2px 0 2px -40px;
     transform: rotate(180deg);
 

gfi-ihk-2024/stories/atoms/button/button.scss

@@ -2,8 +2,8 @@
 @import '../../_global/styles/vars';
 
 .btn {
-  --button-bg-color: var(--theme-color-primary);
-  --button-text-color: var(--theme-color-white);
+  --button-bg-color: var(--color-button-primary-background);
+  --button-text-color: var(--color-button-primary-text);
   --button-padding: 16px 24px;
   --button-min-size: 60px;
   --button-icon-padding: 58px;
@@ -51,32 +51,32 @@
 }
 
 .btn.secondary {
-  --button-bg-color: var(--theme-color-secondary);
-  --button-text-color: var(--theme-color-primary);
+  --button-bg-color: var(--color-button-secondary-background);
+  --button-text-color: var(--color-button-secondary-text);
   --button-hover-shadow-opacity: 0.4;
 }
 
 .btn.white {
-  --button-bg-color: var(--theme-color-white);
-  --button-text-color: var(--theme-color-primary);
+  --button-bg-color: var(--color-button-tertiary-background);
+  --button-text-color: var(--color-button-tertiary-text);
   --button-hover-shadow-opacity: 0.35;
 }
 
 .btn.primary-light {
-  --button-bg-color: var(--theme-color-primary-dimmed-03);
-  --button-text-color: var(--theme-color-primary);
+  --button-bg-color: var(--swatches-primary-200);
+  --button-text-color: var(--color-button-primary-background);
   --button-hover-shadow-opacity: 0.45;
 }
 
 .btn.primary-extra-light {
-  --button-bg-color: var(--theme-color-primary-dimmed-04);
-  --button-text-color: var(--theme-color-primary);
+  --button-bg-color: var(--color-button-tertiary-background);
+  --button-text-color: var(--color-button-tertiary-text);
   --button-hover-shadow-opacity: 0.5;
 }
 
 .btn.secondary-light {
-  --button-bg-color: #9AD7A3;
-  --button-text-color: var(--theme-color-primary);
+  --button-bg-color: var(--swatches-secondary-300);
+  --button-text-color: var(--button-bg-color);
   --button-hover-shadow-opacity: 0.45;
 }
 
@@ -94,7 +94,7 @@
   transition: 0.3s ease;
 }
 
-.btn:hover::after {
+.btn:hover::after, *:has(.teaser--link:hover) .btn::after {
   opacity: var(--button-hover-shadow-opacity);
   box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--button-bg-color);
 }

gfi-ihk-2024/stories/atoms/event-teaser/EventTeaserComponent.js

@@ -6,7 +6,7 @@ export const createEventTeaser = ({
   event = EventTeaserData,
   isExtended = false,
 }) => {
-  const a = createElement('div', ['event-teaser']);
+  const a = createElement('div', ['event-teaser', 'variant-base']);
   const dateBox = createElement('div', ['date-box'], null, a);
   const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a);
 

gfi-ihk-2024/stories/atoms/event-teaser/event-teaser.scss

@@ -2,7 +2,7 @@
 @import '../../_global/styles/vars';
 
 .event-teaser {
-  background-color: white;
+  background-color: var(--color-background);
   border-radius: 8px;
   overflow: hidden;
   display: flex;
@@ -12,10 +12,10 @@
   @include focus-visible;
 
   &:hover {
-    color: var(--theme-color-secondary-intensed);
+    color: var(--color-text-accent);
 
     .date-box {
-      background-color: var(--theme-color-secondary-intensed);
+      background-color: var(--color-text-accent);
     }
   }
 
@@ -23,8 +23,8 @@
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    background-color: var(--theme-color-primary);
-    color: var(--theme-color-white);
+    background-color: var(--color-button-primary-background);
+    color: var(--color-button-primary-text);
     margin-right: 18px;
     font-family: "Korb", sans-serif;
     min-height: 80px;
@@ -96,7 +96,7 @@
       line-height: 1.2em;
       margin-right: 15px;
       margin-bottom: 2px;
-      color: var(--theme-color-primary);
+      color: var(--color-text);
 
       &::before {
         position: relative;
@@ -106,7 +106,7 @@
         line-height: 20px;
         margin-right: 5px;
         vertical-align: top;
-        color: var(--theme-color-primary);
+        color: var(--color-text);
       }
 
       @media(max-width: 567px) {
@@ -138,19 +138,19 @@
       &.status {
         &::before {
           @include icon-xsmall-offen;
-          color: var(--theme-color-secondary-intensed);
+          color: var(--color-text-accent);
         }
 
         &.interested-parties, &.waiting-list {
           &::before {
             @include icon-xsmall-liste;
-            color: var(--theme-color-primary);
+            color: var(--color-text);
           }
         }
 
         &.reserved::before {
           @include icon-xsmall-geschlossen;
-          color: var(--theme-color-error);
+          color: var(--feedback-error);
         }
       }
     }

gfi-ihk-2024/stories/atoms/input-checkbox-radio/input-checkbox-radio.scss

@@ -13,8 +13,8 @@ input[type="checkbox"], input[type="radio"] {
   vertical-align: top;
   appearance: none;
   -webkit-appearance: none;
-  background-color: var(--theme-color-white);
-  border: 1px solid var(--theme-color-primary);
+  background-color: var(--swatches-neutrals-white);
+  border: 1px solid var(--swatches-primary-500);
   width: var(--input-size);
   height: var(--input-size);
   border-radius: var(--border-radius-xs);
@@ -27,12 +27,12 @@ input[type="checkbox"], input[type="radio"] {
 
   &:checked {
     background-image: url("../../assets/img/check.svg");
-    background-color: var(--theme-color-primary);
+    background-color: var(--swatches-primary-500);
   }
 
   &.half-checked {
     background-image: url("../../assets/img/half-check.svg");
-    background-color: var(--theme-color-secondary);
+    background-color: var(--swatches-secondary-500);
   }
 
   ~ label {

gfi-ihk-2024/stories/atoms/input-select/input-select.scss

@@ -1,12 +1,13 @@
 @import '../../_global/styles/mixins';
 @import '../../_global/styles/vars';
+@import '../../_global/styles/svg-vars';
 
 select, select.form-control {
   @include form-field;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  background-image: url('../../assets/img/dropdown-arrow.svg');
+  //background-image: url("data:image/svg+xml,%3Csvg width='43' height='30' viewBox='0 0 43 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5001 22L6.27283 10.75L22.7273 10.75L14.5001 22Z' fill='#{encode-color($swatch-primary-500)}'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right center;
   background-size: 36px;

gfi-ihk-2024/stories/atoms/input-text/input-text.scss

@@ -5,24 +5,28 @@ input[type="text"], input[type="email"], input[type="password"], input[type="num
   @include form-field;
 
   &::-webkit-input-placeholder {
-    color: var(--theme-color-secondary-intensed);
+    color: var(--swatches-secondary-700);
   }
+
   &:-ms-input-placeholder {
-    color: var(--theme-color-secondary-intensed);
+    color: var(--swatches-secondary-700);
   }
+
   &::placeholder {
-    color: var(--theme-color-secondary-intensed);
+    color: var(--swatches-secondary-700);
   }
 
   &:focus {
     &::-webkit-input-placeholder {
-      color: var(--theme-color-secondary-dimmed);
+      color: var(--swatches-secondary-200);
     }
+
     &:-ms-input-placeholder {
-      color: var(--theme-color-secondary-dimmed);
+      color: var(--swatches-secondary-200);
     }
+
     &::placeholder {
-      color: var(--theme-color-secondary-dimmed);
+      color: var(--swatches-secondary-200);
     }
   }
 }

gfi-ihk-2024/stories/atoms/interview-item/InterviewItemComponent.js

@@ -8,7 +8,7 @@ export const createInterviewItem =
         text = '',
     }) => {
 
-    const div = createElement('div', ['interview-item', partnerClass]);
+    const div = createElement('div', ['interview-item', 'variant-base', partnerClass]);
     if (headline) {
         const headlineDiv = createElement('div', ['headline'], headline, div);
     }

gfi-ihk-2024/stories/atoms/interview-item/interview-item.scss

@@ -4,17 +4,19 @@
 .interview-item {
   margin: 40px 50px 20px 0;
   padding: 20px;
-  border: 2px solid var(--theme-color-primary);
+  border: 2px solid var(--color-text);
   border-radius: 20px 20px 20px 0;
   font-weight: 400;
+
   .headline, strong {
     padding-bottom: 10px;
     font-weight: 600;
     display: inline-block;
   }
+
   &.partner {
     margin: 0 0 20px 50px;
-    border-color: var(--theme-color-secondary);
+    border-color: var(--color-decoration);
     border-radius: 20px 0 20px 20px;
   }
 }
@@ -22,6 +24,6 @@
 .interview-item-partner {
   @extend .interview-item;
   margin: 0 0 20px 50px;
-  border-color: var(--theme-color-secondary);
+  border-color: var(--color-decoration);
   border-radius: 20px 0 20px 20px;
 }

gfi-ihk-2024/stories/atoms/label/label.scss

@@ -5,7 +5,7 @@ label {
   margin: 0;
 
   a:hover {
-    color: var(--theme-color-link-hover);
+    color: var(--color-text-accent);
   }
 
   sup {
@@ -13,19 +13,3 @@ label {
     margin-left: 0.1em;
   }
 }
-
-//input[type='radio'], input[type='checkbox'] {
-//  ~ label {
-//    font-size: var(--font-size-copy);
-//    line-height: 1.4;
-//    display: inline-block;
-//    vertical-align: top;
-//    max-width: calc(100% - 40px);
-//    margin-top: calc(10px - 0.6em);
-//    margin-bottom: 1em;
-//
-//    @media(max-width: 999px) {
-//      margin-top: calc(10px - 0.65em);
-//    }
-//  }
-//}

gfi-ihk-2024/stories/atoms/labelFormCentric/labelFormCentric.scss

@@ -5,7 +5,7 @@ label {
   margin: 0;
 
   a:hover {
-    color: var(--theme-color-link-hover);
+    color: var(--color-text-accent);
   }
 
   span {

gfi-ihk-2024/stories/atoms/pagination/PaginationComponent.js

@@ -6,7 +6,7 @@ export const createPagination = ({
   length = 5,
   current = 1,
 }) => {
-  const pagination = createElement('div', ['pagination']);
+  const pagination = createElement('div', ['pagination', 'variant-base']);
   const ul = createElement('ul', [], null, pagination);
   for (let i = 0; i < length; i++) {
     const li = createElement('li', [], null, ul);

gfi-ihk-2024/stories/atoms/pagination/pagination.scss

@@ -23,8 +23,8 @@
     padding-right: 5px;
 
     &.current {
-      --button-bg-color: var(--theme-color-primary-dimmed-04);
-      --button-text-color: var(--theme-color-primary);
+      --button-bg-color: var(--color-button-tertiary-background);
+      --button-text-color: var(--color-button-tertiary-text);
 
       &::after {
         display: none;

gfi-ihk-2024/stories/atoms/progress-bar/ProgressBarComponent.js

@@ -4,7 +4,7 @@ import {createElement} from "../../_global/scripts/helpers";
 export const createProgressBar = ({
   progress = 50,
 }) => {
-  const div = createElement('div', ['progress']);
+  const div = createElement('div', ['progress', 'variant-base']);
   const span = createElement('span', ['bar'], null, div);
   span.style.width = progress.toString() + '%';
 

gfi-ihk-2024/stories/atoms/progress-bar/progress-bar.scss

@@ -2,8 +2,8 @@
 @import '../../_global/styles/vars';
 
 .progress {
-  --color-fg: var(--theme-color-primary);
-  --color-bg: var(--theme-color-primary-dimmed-02);
+  --color-fg: var(--color-text);
+  --color-bg: var(--color-surface-inset);
   --bg-opacity: 1;
 
   position: relative;

gfi-ihk-2024/stories/atoms/reading-time/ReadingTimeComponent.js

@@ -5,7 +5,7 @@ export const createReadingTime =
   ({
     minutes = 6,
   }) => {
-    const rt = createElement('span', ['reading-time']);
+    const rt = createElement('span', ['reading-time', 'variant-base']);
     createElement('span', ['value'], minutes.toString() + ' Min', rt);
     createElement('span', ['label'], 'Lesezeit', rt);
 

gfi-ihk-2024/stories/atoms/reading-time/rading-time.scss

@@ -2,14 +2,12 @@
 @import '../../_global/styles/vars';
 
 .reading-time {
-  --color: var(--theme-color-primary);
   display: block;
   font-size: 0;
   font-weight: 700;
   font-family: "Korb", sans-serif;
   text-transform: uppercase;
-  //margin: 8px;
-  color: var(--color);
+  color: var(--color-text);
   transition: color 0.3s ease;
   z-index: 2;
   width: 100%;
@@ -22,15 +20,15 @@
   }
 
   .value {
-    background-color: var(--color);
-    color: var(--theme-color-white);
+    background-color: var(--color-button-primary-background);
+    color: var(--color-button-primary-text);
     padding: 0 6px;
     transition: background-color 0.3s ease;
   }
 }
 
 a:hover .reading-time {
-  --color: var(--theme-color-link-hover);
+  color: var(--color-decoration);
 }
 
 .teaser .reading-time:last-child {

gfi-ihk-2024/stories/atoms/search-button/search-button.scss

@@ -12,16 +12,16 @@ button.search-submit {
   height: 80px;
   border-radius: 32px;
   border: 0;
-  background-color: var(--theme-color-secondary);
-  color: var(--theme-color-primary);
+  background-color: var(--color-button-secondary-background);
+  color: var(--color-button-secondary-text);
   padding: 0 2px 0 0;
   cursor: pointer;
   transition: 0.25s ease;
   @include focus-visible;
 
   &:hover {
-    background-color: var(--theme-color-secondary-intensed);
-    color: var(--theme-color-background);
+    background-color: var(--color-button-tertiary-background);
+    color: var(--color-button-tertiary-text);
   }
 
   &:before {
@@ -35,11 +35,12 @@ button.search-submit {
   }
 
   &.secondary {
-    background-color: var(--theme-color-primary);
-    color: var(--theme-color-white);
+    background-color: var(--color-button-primary-background);
+    color: var(--color-button-primary-text);
+
     &:hover {
-      background-color: var(--theme-color-primary-dimmed-04);
-      color: var(--theme-color-primary);
+      background-color: var(--color-button-tertiary-background);
+      color: var(--color-button-tertiary-text);
     }
   }
 
@@ -55,7 +56,6 @@ button.search-submit {
 }
 
 #searchcategoryaddition a {
-  //@extend .btn-small;
   margin-bottom: 8px;
   margin-right: 10px;
 }

gfi-ihk-2024/stories/atoms/search-input/SearchInputComponent.js

@@ -9,7 +9,7 @@ export const createSearchInput = ({
   autocomplete = false,
   id = 'search-term',
 }) => {
-  const input = createElement('input', typeahead ? ['search-field', 'typeahead'] : ['search-field']);
+  const input = createElement('input', typeahead ? ['search-field', 'typeahead', 'variant-base'] : ['search-field']);
   input.id = id;
   input.type = 'search';
   if (!autocomplete) {

gfi-ihk-2024/stories/atoms/search-input/search-input.scss

@@ -4,16 +4,16 @@
 input.search-field {
   position: relative;
   display: block;
-  border-radius:var(--border-radius-md) var(--border-radius-xl) var(--border-radius-xl) var(--border-radius-md);
+  border-radius: var(--border-radius-md) var(--border-radius-xl) var(--border-radius-xl) var(--border-radius-md);
   width: calc(100% - 1px);
   height: 80px;
-  background-color: white;
+  background-color: var(--swatches-neutrals-white);
   padding: 24px 90px 24px 24px;
   font-family: 'Source Sans Pro', sans-serif;
   font-size: 22px;
   line-height: 32px;
-  color: var(--theme-color-primary);
-  border: 2px solid var(--theme-color-secondary-intensed);
+  color: var(--color-text);
+  border: 2px solid var(--color-text-accent);
   transition: 0.25s ease;
   @include focus-visible;
 
@@ -27,27 +27,30 @@ input.search-field {
   }
 
   &:focus, &:active, &.focus-visible, &.focus-visible:focus {
-    box-shadow: 0 0 10px var(--theme-color-secondary-intensed), 0 0 4px var(--theme-color-secondary-intensed);
+    box-shadow: 0 0 10px var(--color-text-accent), 0 0 4px var(--color-text-accent);
   }
 
   &::-webkit-input-placeholder {
-    color: var(--theme-color-link-hover);
+    color: var(--color-text-accent);
   }
+
   &::-moz-placeholder {
-    color: var(--theme-color-link-hover);
+    color: var(--color-text-accent);
   }
+
   &:-ms-input-placeholder {
-    color: var(--theme-color-link-hover);
+    color: var(--color-text-accent);
   }
+
   &:-moz-placeholder {
-    color: var(--theme-color-link-hover);
+    color: var(--color-text-accent);
   }
 
   &:-webkit-autofill,
   &:-webkit-autofill:hover,
   &:-webkit-autofill:focus,
-  &:-webkit-autofill:active  {
-    -webkit-box-shadow: 0 0 0 50px white inset !important;
+  &:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 50px var(--swatches-neutrals-white) inset !important;
   }
 
   &::-webkit-search-decoration,

gfi-ihk-2024/stories/atoms/secondary-menu/SecondaryMenuComponent.js

@@ -21,7 +21,7 @@ export const createSecondaryMenu = ({
 }) => {
   const wrap = createElement('div', ['secondary-menu-wrapper']);
 
-  const secondary = createElement('div', ['secondary-menu'], null, wrap);
+  const secondary = createElement('div', ['secondary-menu', 'variant-subtle-primary'], null, wrap);
   const secondaryUl = createElement('ul', [], null, secondary);
   secondaryLinks.map((link) => {
     const li = createElement('li', [], null, secondaryUl);
@@ -29,7 +29,7 @@ export const createSecondaryMenu = ({
     a.href = '#';
   })
 
-  const meta = createElement('div', ['meta-menu'], null, wrap);
+  const meta = createElement('div', ['meta-menu', 'variant-base'], null, wrap);
   const metaUl = createElement('ul', [], null, meta);
 
   const contactLi = createElement('li', ['contact'], null, metaUl);

gfi-ihk-2024/stories/atoms/secondary-menu/secondary-menu.scss

@@ -4,7 +4,7 @@
 .secondary-menu {
   position: relative;
   z-index: 1;
-  background-color: var(--theme-color-primary-dimmed-04);
+  background-color: var(--color-background);
   text-align: left;
 
   ul {
@@ -131,12 +131,6 @@
     margin: 10px 0;
     padding: 5px 8px;
     text-decoration: none;
-    /*
-    text-decoration: underline;
-    text-decoration-color: transparent;
-    text-decoration-thickness: 2px;
-    text-underline-offset: 2px;
-    */
     transition: 0.3s ease;
     text-align: center;
     border: 0;
@@ -149,7 +143,7 @@
     }
 
     &:hover {
-      text-decoration-color: var(--theme-color-primary);
+      text-decoration-color: var(--color-text);
     }
   }
 }

gfi-ihk-2024/stories/atoms/social-icons/social-icons.scss

@@ -37,7 +37,7 @@
     display: block;
     width: var(--social-icon-size);
     height: var(--social-icon-size);
-    color: var(--theme-color-white);
+    color: var(--swatches-neutrals-white);
     text-decoration: none;
     text-align: center;
     font-size: 0;
@@ -53,7 +53,7 @@
       line-height: calc(var(--social-icon-size) + 2px);
       font-family: "Icons", sans-serif;
       margin: -1px;
-      background-color: var(--theme-color-white);
+      background-color: var(--swatches-neutrals-white);
     }
 
     &.facebook::before {

gfi-ihk-2024/stories/atoms/tabs/TabsComponent.js

@@ -20,7 +20,7 @@ export const createTabs = ({
     }
   ]
 }) => {
-  const tabs = createElement('div', ['tabs']);
+  const tabs = createElement('div', ['tabs', 'variant-base']);
   data.map((item, i) => {
     const button = createButton({
       size: size,

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

@@ -13,8 +13,8 @@
     }
 
     &.active, &:hover {
-      background-color: var(--theme-color-primary);
-      color: var(--theme-color-white);
+      background-color: var(--color-button-primary-background);
+      color: var(--color-button-primary-text);
     }
 
     strong {

gfi-ihk-2024/stories/components/a-z/AZComponent.js

@@ -8,7 +8,7 @@ export const createAZ =
   ({
     items = alphabet,
   }) => {
-    const section = createElement('section', ['a-z']);
+    const section = createElement('section', ['a-z', 'variant-base']);
     const list = createElement('ul', ['letters'], null, section);
     items.map((item) => {
       const hasUrl = item.url && item.url.length > 0;

gfi-ihk-2024/stories/components/a-z/a-z.scss

@@ -12,7 +12,7 @@ h1 + .a-z {
 .a-z .letters {
   position: sticky;
   top: var(--header-height);
-  background-color: var(--theme-color-white);
+  background-color: var(--color-background);
   display: flex;
   align-items: flex-end;
   flex-wrap: wrap;
@@ -20,7 +20,7 @@ h1 + .a-z {
   margin: 0 0 0 -2px;
   padding: 10px 0 0;
   z-index: 2;
-  box-shadow: 0 -2px 0 0 var(--theme-color-white);
+  box-shadow: 0 -2px 0 0 var(--color-background);
 
   @media(min-width: 1000px) {
     top: 101px;
@@ -47,7 +47,7 @@ h1 + .a-z {
       pointer-events: none;
 
       .letter {
-        color: var(--theme-color-primary-dimmed-02);
+        opacity: 0.3;
       }
     }
 
@@ -63,19 +63,21 @@ h1 + .a-z {
       width: 1000px;
       left: 100%;
       bottom: 0;
-      background-color: var(--theme-color-primary-dimmed-02);
+      background-color: var(--color-text);
+      opacity: 0.3;
     }
 
     &.active .letter {
-      color: var(--theme-color-white);
+      color: var(--swatches-neutrals-white);
 
       &:hover {
-        color: var(--theme-color-white);
+        color: var(--swatches-neutrals-white);
       }
 
       &:before {
         height: 100%;
-        background-color: var(--theme-color-primary);
+        background-color: var(--color-text);
+        opacity: 1;
       }
     }
   }
@@ -90,6 +92,7 @@ h1 + .a-z {
     text-align: center;
     transition: 0.3s ease;
     z-index: 1;
+    color: var(--color-text);
     background-color: transparent;
     margin: 0;
     padding: 0;
@@ -107,22 +110,31 @@ h1 + .a-z {
       left: 0;
       right: 0;
       height: 2px;
-      background-color: var(--theme-color-primary-dimmed-02);
+      background-color: var(--color-text);
       transition: 0.3s ease;
       z-index: -1;
+      opacity: 0.3;
     }
 
     &:hover {
-      color: var(--theme-color-primary);
+      color: var(--color-text);
 
       &:before {
-        background-color: var(--theme-color-primary);
+        background-color: var(--color-text);
+        opacity: 1;
       }
     }
+
+    &.letter:not(.disabled) span:before {
+      //opacity: 0.3;
+    }
   }
 
   span.letter {
-    color: var(--theme-color-primary-dimmed-01);
+    color: var(--color-text);
+    &:before {
+      opacity: 1;
+    }
   }
 }
 

gfi-ihk-2024/stories/components/accordion/AccordionComponent.js

@@ -11,7 +11,7 @@ export const createAccordion =
      type = 'regular',
      items = AccordionData,
    }) => {
-    const accordion = createElement('div', ['accordion'], null);
+    const accordion = createElement('div', ['accordion', 'variant-base'], null);
     accordion.dataset.type = type;
     if (title && title.length > 0) {
       createElement('h2', ['title'], title, accordion);
@@ -22,7 +22,7 @@ export const createAccordion =
     if (type === 'regular') {
       items.map((item) => {
         const li = createElement('li', [], null, ul);
-        const a = createElement('a', ['accordion-toggler'], item.title, li);
+        const a = createElement('a', ['accordion-toggler','variant-subtle-primary-hover'], item.title, li);
         const content = createElement('div', ['accordion-content'], item.content, li);
 
         // a.href = '#' + item.id;
@@ -41,8 +41,8 @@ export const createAccordion =
     if (type === 'event') {
       items.map((item, index) => {
         const li = createElement('li', [], null, ul);
-        const toggler = createElement('a', ['accordion-toggler'], null, li);
-        const content = createElement('div', ['accordion-content'], null, li);
+        const toggler = createElement('a', ['accordion-toggler','variant-subtle-primary-hover'], null, li);
+        const content = createElement('div', ['accordion-content','variant-subtle-primary'], null, li);
 
         toggler.href = '#js-event-' + index;
         content.id = 'js-event-' + index;

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

@@ -16,7 +16,7 @@
     position: relative;
     padding: 0;
     list-style: none;
-    border-bottom: 1px solid var(--theme-color-primary-dimmed-02);
+    border-bottom: 1px solid var(--color-surface-inset);
 
     .richtext & {
       padding: 0;
@@ -30,10 +30,11 @@
 
     > li {
       padding-left: var(--accordion-icon-width);
+      border-top: 1px solid var(--color-surface-inset);
     }
 
     > li.inAccordion {
-      border-top: 1px solid var(--theme-color-primary-dimmed-02);
+      border-top: 1px solid var(--color-surface-inset);
       margin-bottom: 0;
       padding-left: var(--accordion-icon-width);
       /*
@@ -44,14 +45,14 @@
         left: 0;
         bottom: 0;
         width: 0.4em;
-        background-color: var(--theme-color-secondary-dimmed);
+        background-color: var(--color-button-tertiary-background);
       }
       */
       /*
       &.open {
         .accordion-toggler {
-          background-color: var(--theme-color-secondary-dimmed);
-          color: var(--theme-color-secondary-intensed);
+          background-color: var(--color-button-tertiary-background);
+          color: var(--swatches-secondary-700);
         }
       }
 
@@ -65,7 +66,7 @@
     display: flex;
     align-items: center;
     margin: 0 0 0 calc(var(--accordion-icon-width) * -1);
-    background-color: var(--theme-color-white);
+    background-color: var(--color-background);
     text-decoration: none;
     position: relative;
     @include focus-visible;
@@ -94,10 +95,6 @@
       }
     }
 
-    &:hover {
-      background-color: var(--theme-color-secondary-dimmed);
-    }
-
     &.focus-visible:focus, &:focus-visible, &.-moz-focusring {
       z-index: 1;
     }
@@ -124,7 +121,7 @@
     background-color: inherit;
   }
   .accordion-content[id^=js-event] {
-    background-color: var(--theme-color-secondary-dimmed);
+    //background-color: var(--color-button-tertiary-background);
   }
   > ul {
     border-bottom: 0;
@@ -136,22 +133,22 @@
 
       &.open {
         .accordion-toggler {
-          color: var(--theme-color-primary);
+          color: var(--color-text);
         }
       }
 
       + li {
-        margin-top: 0.4em;
+      //  margin-top: 0.4em;
       }
     }
   }
 
   .accordion-toggler {
     position: relative;
-    box-shadow: 0 1px 0 0 var(--theme-color-primary-dimmed-02);
+    box-shadow: 0 1px 0 0 var(--color-surface-inset);
 
     &:hover {
-      color: var(--theme-color-primary);
+      color: var(--color-text);
     }
 
     &::before {
@@ -159,8 +156,8 @@
       left: 0;
       top: 0;
       bottom: 0;
-      background-color: var(--theme-color-primary);
-      color: var(--theme-color-white);
+      background-color: var(--color-button-primary-background);
+      color: var(--color-button-primary-text);
       margin: -1px 0;
       text-align: center;
       display: flex;
@@ -173,8 +170,9 @@
 
   .accordion-content {
     padding: 0;
-    border-top: 1px solid var(--theme-color-primary-dimmed-02);
-    border-bottom: 1px solid var(--theme-color-primary-dimmed-02);
+    border-top: 1px solid var(--color-surface-inset);
+    border-bottom: 1px solid var(--color-surface-inset);
+    background: var(--color-background);
   }
 
   .date-box {
@@ -205,7 +203,7 @@
     margin: 0 10px;
 
     + .event-details {
-      border-top: 1px solid var(--theme-color-primary-dimmed-02);
+      border-top: 1px solid var(--color-surface-inset);
     }
 
     .event-locationlink > a {
@@ -293,7 +291,7 @@
     }
 
     &.icon-freie-plaetze:before {
-      color: var(--theme-color-secondary-intensed);
+      color: var(--swatches-secondary-700);
     }
     &.icon-geschlossen:before {
       color: var(--theme-color-error);

gfi-ihk-2024/stories/components/anchor-links/AnchorLinksComponent.js

@@ -6,13 +6,13 @@ import IHKAnchorLinks from "./anchor-links";
 export const createAnchorLinks = ({
   titles = ['Beratungsförderung zur Digitalisierung', 'Eine weitere Headline zwischendurch'],
 }) => {
-  const div = createElement('div', ['anchor-links']);
+  const div = createElement('div', ['anchor-links', 'variant-base']);
   const ul = createElement('ul', ['anchors'], null, div);
   createElement('li', ['anchors-title'], 'Inhalte auf dieser Seite', ul);
 
   titles.map((title, index) => {
     const li = createElement('li', [], null, ul);
-    const a = createElement('a', [], title, li);
+    const a = createElement('a', ['variant-subtle-primary-hover'], title, li);
     a.href = '#titleInText' + index;
     a.dataset.index = index.toString();
   });

gfi-ihk-2024/stories/components/anchor-links/anchor-links.scss

@@ -22,7 +22,7 @@
       margin: -1px 0 0;
       height: 55px;
       overflow: hidden;
-      background-color: white;
+      background-color: var(--color-background);
       transition: 0.3s ease;
       box-shadow: 0 5px 20px -5px rgba(0, 0, 0, 0), 0 0 0 10000px rgba(0, 0, 0, 0);
 
@@ -59,11 +59,11 @@
     padding: 0;
     margin: 0;
     list-style: none;
-    border-bottom: 1px solid var(--theme-color-primary-dimmed-03);
+    border-bottom: 1px solid var(--color-surface-inset);
 
     li {
       position: relative;
-      border-top: 1px solid var(--theme-color-primary-dimmed-03);
+      border-top: 1px solid var(--color-surface-inset);
       line-height: 1.2;
 
       &:before {
@@ -75,7 +75,7 @@
         left: 3px;
         top: 50%;
         margin-top: -15px;
-        color: var(--theme-color-secondary-microsite);
+        color: var(--color-text-microsite-secondary);
         z-index: 1;
         pointer-events: none;
       }
@@ -87,7 +87,7 @@
       padding: 14px 15px 14px 42px;
       align-items: center;
       min-height: 55px;
-      background-color: transparent;
+      background-color: var(--color-background);
       margin: 0;
     }
 
@@ -103,14 +103,14 @@
       &:before {
         content: '';
         @include full-size;
-        background-color: var(--theme-color-primary-dimmed-04);
+        background-color: var(--swatches-primary-100);
         opacity: 0;
         transition: 0.3s ease;
         z-index: -1;
       }
 
       &:hover {
-        color: var(--theme-color-link-hover);
+        //color: var(--theme-color-link-hover);
 
         &:before {
           opacity: 0.3;
@@ -128,19 +128,6 @@
   }
 }
 
-
-/*
-.main-col .anchors li:not(.anchors-title),.action-col .anchors li:not(.anchors-title) {
-  padding: 0;
-  margin: 0;
-
-  &:after {
-    display: none;
-  }
-}
-*/
-
-
 h2.has-anchor {
   position: relative;
   font-size: var(--font-size-h2);

gfi-ihk-2024/stories/components/artwork/ArtworkComponent.js

@@ -7,7 +7,7 @@ export const createArtwork =
     image = 'Berlin',
   }) => {
     let imageId, imageWidth, imageHeight, imageSize;
-    const artworkWrapper = createElement('div', ['artwork-wrapper'], null);
+    const artworkWrapper = createElement('div', ['artwork-wrapper', 'variant-base'], null);
     artworkWrapper.dataset.type = type;
     if (type === 'artwork-both-sides' ){
       createElement('div', ['artwork-left'], '<span class="background"></span><span class="foreground"></span>', artworkWrapper);

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

@@ -60,7 +60,7 @@ section .artwork-wrapper {
     &:before {
       content: "";
       @include full-size;
-      background-color: var(--theme-color-primary);
+      background-color: var(--swatches-primary-500);
       margin: -16% 0;
       border-top-left-radius: 26% 50%;
       border-bottom-left-radius: 26% 50%;
@@ -82,7 +82,7 @@ section .artwork-wrapper {
     }
 
     &:before {
-      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(323deg, rgba(75, 164, 144, 0.00) -5.42%, var(--gradient-a) 85.26%), var(--swatches-primary-500);
     }
   }
 
@@ -101,11 +101,6 @@ section .artwork-wrapper {
       transform: rotate(0) !important;
     }
   }
-  /* @media(max-width: 1199px) {
-     width: 50vw;
-     margin: 1% -18%;
-     max-height: 90vw;
-   }*/
 
   @media(max-width: 767px) {
     margin: 3% -24%;
@@ -124,14 +119,13 @@ section .artwork-wrapper {
     top: 0;
     transform-origin: center center;
     height: 437px;
-    //transform: rotate(-3.762deg);
     transform: rotate(0);
     overflow: hidden;
 
     &:before {
       content: "";
       @include full-size;
-      background-color: var(--theme-color-primary);
+      background-color: var(--swatches-primary-500);
       margin: -16% 0;
       border-top-right-radius: 26% 50%;
       border-bottom-right-radius: 26% 50%;
@@ -154,29 +148,22 @@ section .artwork-wrapper {
     }
 
     &:before {
-      background: linear-gradient(-10deg, var(--theme-color-gradient-03) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-01) 90%);
+      background: linear-gradient(152deg, rgba(75, 164, 144, 0.00) -25.03%, var(--gradient-a) 96.63%), var(--swatches-primary-500);
     }
   }
 
 }
 
 [data-type="artwork-background-image"] {
-  color: white;
-  /*
-  &:before {
-    content: "";
-    position: relative;
-    display: block;
-    height: 20px;
-  }
-  */
+  color: var(--color-background);
   .image-box {
     @include full-size;
 
     &:after {
       content: "";
       @include full-size;
-      background: linear-gradient(120deg, rgba(var(--theme-color-primary-rgb), 1) 0%, rgba(var(--theme-color-primary-rgb), 0.2) 100%);
+      background: linear-gradient(120deg, rgba(var(--swatches-primary-500-rgb), 1) 0%, rgba(var(--swatches-primary-500-rgb), 0.2) 100%);
+//      background: linear-gradient(152deg, rgba(75, 164, 144, 0.00) -25.03%, var(--gradient-a) 96.63%), var(--swatches-primary-500);
     }
 
     img {
@@ -194,7 +181,7 @@ section .artwork-wrapper {
 
     .foreground, .background {
       &:before {
-        background: var(--theme-color-background);
+        background: var(--color-background);
         opacity: 0.7;
       }
     }
@@ -262,12 +249,3 @@ section .artwork-wrapper {
   }
 
 }
-/*
-[data-browser="ie"] section[data-type="artwork-image"] .image-box img {
-  width: auto;
-  max-width: none;
-  left: 50%;
-  height: 84%;
-  transform: rotate(3deg) translate(-50%, 0);
-}
-*/

gfi-ihk-2024/stories/components/card/CardComponent.js

@@ -9,7 +9,7 @@ export const createCard =
          headline = 'Jetzt Teil der IHK-Kampagne werden',
          link = 'http://www.ihk24.de',
     }) => {
-        const card = createElement('div', ['card'], null);
+        const card = createElement('div', ['card', 'variant-base'], null);
         const cardInner = createElement('a', ['card-inner'], null, card);
         cardInner.href = link;
 

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

@@ -5,7 +5,8 @@
   &-inner {
     display: block;
     max-width: 350px;
-    background: var(--theme-color-primary);
+    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;
     @media(max-width: 645px) {
       max-width: 230px;
@@ -22,6 +23,8 @@
     position: relative;
     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;
     }
@@ -45,24 +48,23 @@
     position: relative;
     height: 197px;
     padding: 0 25px;
-    color: var(--theme-color-white);
+    color: var(--color-button-primary-text);
     border-bottom-left-radius: 16px;
     border-bottom-right-radius: 16px;
-    background: var(--theme-color-gradient-01);
-    background: linear-gradient(162deg, var(--theme-color-gradient-01) 50%, var(--theme-color-gradient-02) 98%, var(--theme-color-gradient-03) 100%);
+    //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(--theme-color-gradient-01);
+      //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 {

gfi-ihk-2024/stories/components/common-content-article/CommonContentArticleComponent.js

@@ -14,7 +14,7 @@ export const createCommonContentArticle = ({
   headline = '5 Beispiele, wie sich Unternehmen für ihr Umfeld engagieren',
 }) => {
   const div = createElement('div');
-  const article = createElement('article', ['col', 'magazine-article'], null, div);
+  const article = createElement('article', ['col', 'magazine-article', 'variant-base'], null, div);
 
   if (addArticleComponents) {
     createElement('p', ['kicker'], kicker, article);

gfi-ihk-2024/stories/components/common-content-article/commonContent-article.scss

@@ -6,7 +6,7 @@
   z-index: 1;
   width: 880px;
   max-width: 66.6667%;
-  background-color: var(--theme-color-white);
+  background-color: var(--color-background);
   margin: 0 auto;
   padding-bottom: 0;
 
@@ -14,11 +14,11 @@
     max-width: 83.3333%;
   }
   @media(max-width: 999px) {
-    box-shadow: 0 0 0 10px white;
+    box-shadow: 0 0 0 10px var(--swatches-neutrals-white);
   }
   @media(max-width: 767px) {
     max-width: 100%;
-    box-shadow: 0 -4px 0 2px white;
+    box-shadow: 0 -4px 0 2px var(--swatches-neutrals-white);
   }
 
   .print-share {

gfi-ihk-2024/stories/components/common-content/CommonContentComponent.js

@@ -15,14 +15,14 @@ export const createCommonContent = ({
         target: '_self',
     }
 }) => {
-    const common = createElement('div', ['common-content']);
+    const common = createElement('div', ['common-content', 'variant-subtle-primary']);
 
     const p = createElement('p', [], text, common);
     const buttons = createElement('div', ['buttons'], null, common);
     buttons.appendChild(createButton({
         label: noCta.label,
         link: noCta.link,
-        color: 'primary-light',
+        color: 'white',
         size: 'small',
         icon: 'schliessen',
         iconPosition: 'icon-right'

gfi-ihk-2024/stories/components/common-content/commonContent.scss

@@ -4,7 +4,7 @@
 .common-content {
   margin-top: var(--section-margin);
   padding: calc(var(--container-padding) / 2) var(--container-padding);
-  background: var(--theme-color-primary-dimmed-04);
+  background: var(--color-background);
   background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23B0C4D6' stroke-width='4' stroke-dasharray='0%2c 7' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
   p {
 

gfi-ihk-2024/stories/components/contact/ContactComponent.js

@@ -11,7 +11,7 @@ export const createContact =
      contactCount = 2,
      addContainer = false,
    }) => {
-    const wrapper = createElement('div', ['contact-wrapper']);
+    const wrapper = createElement('div', ['contact-wrapper', 'variant-subtle-primary']);
     if (headline && headline.length > 0) {
       createElement('div', ['like-h2'], headline, wrapper);
     }

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

@@ -3,8 +3,8 @@
 
 .contact-wrapper {
   position: relative;
-  background-color: var(--theme-color-primary-dimmed-04);
-  border-bottom: var(--border-width) solid var(--theme-color-secondary);
+  background-color: var(--color-background);
+  border-bottom: var(--border-width) solid var(--color-decoration);
   padding: var(--content-box-padding);
   overflow: hidden;
   font-size: var(--font-size-small);
@@ -17,7 +17,7 @@
   h5, .like-h5, h6, .like-h6 {
     margin-top: -0.3em;
     font-size: var(--font-size-copy);
-    font-family: var(--font-korb);
+    font-family: var(--font-korb), sans-serif;
   }
 
   .contact-person {
@@ -97,8 +97,8 @@
     }
 
     li:not(.active) .btn:not(:hover) {
-      background-color: var(--theme-color-primary-dimmed-03);
-      color: var(--theme-color-primary);
+      background-color: var(--buttons-tertiary-background);
+      color: var(--buttons-tertiary-text);
     }
   }
 
@@ -162,7 +162,7 @@
   }
 
   &.ansprechpartner {
-    background-color: var(--theme-color-primary-dimmed-03);
+    background-color: var(--swatches-primary-200);
     padding: 20px;
     border-bottom: none;
   }

gfi-ihk-2024/stories/components/document-list/DocumentListComponent.js

@@ -5,7 +5,7 @@ import {DocumentListData} from "./DocumentListData";
 export const createDocumentList = ({
   docs = DocumentListData,
 }) => {
-  const section = createElement('section', ['document-list']);
+  const section = createElement('section', ['document-list', 'variant-base']);
   docs.map((doc) => {
     const a = createElement('div', ['document-list-item', doc.icon], null, section);
     // a.href = doc.link;

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

@@ -12,7 +12,7 @@
   display: block;
   text-decoration: none;
   font-size: var(--font-size-small);
-  border: 1px solid var(--theme-color-primary-dimmed-04);
+  border: 1px solid var(--color-surface-inset);
   padding: 15px;
   border-radius: 4px;
   @include focus-visible;
@@ -20,7 +20,7 @@
 
   &:hover {
     text-decoration: none;
-    color: var(--theme-color-secondary-intensed);
+    color: var(--color-text-accent);
   }
 
   + .document-list-item {
@@ -87,7 +87,7 @@
       font-family: "Korb", sans-serif;
       font-weight: 700;
       font-size: 32px;
-      color: var(--theme-color-white);
+      color: var(--color-button-primary-text);
       position: absolute;
       left: 0;
       right: 0;

gfi-ihk-2024/stories/components/election-form/ElectionFormComponent.js

@@ -14,7 +14,7 @@ export const createElectionForm =
      placeholderElectionArea = 'Wahlbezirk',
      placeholderElectionCompany = 'Suche nach Name oder Firma',
   }) => {
-    const electionForm = createElement('div', ['election-form'], null, null, inlineStyles);
+    const electionForm = createElement('div', ['election-form', 'variant-solid'], null, null, inlineStyles);
     createElement('h2', [], title, electionForm);
 
     const form = createElement('form', ['election-form--form'], null, electionForm);

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

@@ -2,13 +2,14 @@
 @import '../../_global/styles/vars';
 
 .election-form {
-  --theme-color-link: var(--theme-color-white);
-  --theme-color-link-hover: var(--theme-color-white);
+  --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(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(--theme-color-white);
+  color: var(--color-text);
   margin-top: 40px;
   margin-bottom: 20px;
   @media(max-width: 567px) {

gfi-ihk-2024/stories/components/election-result-list-badge/ElectionResultListBadgeComponent.js

@@ -9,7 +9,14 @@ export const createElectionResultListBadge =
      closable = false,
      colon = false,
   }) => {
-    const electionResultListBadge = createElement('div', ['election-result-list-badge', inverted ? 'inverted' : 'normal', closable ? 'closable' : 'regular']);
+
+    const electionResultListBadge = createElement('div', [
+        'election-result-list-badge',
+        ...(inverted
+            ? ['variant-solid', 'variant-subtle-primary-hover', 'inverted']
+            : ['variant-subtle-primary', 'normal']),
+        closable ? 'closable' : 'regular'
+    ]);
     const inner = createElement('div', ['badge-inner'], null, electionResultListBadge);
     const pPre = preLabel + (colon ? ': ' : '');
     const p = createElement('p', [], pPre, inner);

gfi-ihk-2024/stories/components/election-result-list-badge/election-result-list-badge.scss

@@ -4,7 +4,7 @@
 .election-result-list-badge {
   .badge-inner {
     padding: 6px 15px;
-    background: var(--theme-color-primary-dimmed-04);
+    background: var(--color-background);
     border-radius: 18px;
     margin-bottom: 8px;
   }
@@ -12,6 +12,7 @@
     font-family: "Korb", sans-serif;
     font-weight: bold;
     margin: 0;
+    color: var(--color-text);
     span {
       padding-left: 5px;
       font-weight: normal;
@@ -19,16 +20,13 @@
   }
   &.inverted {
     p {
-      color: var(--theme-color-white);
       transition: 0.25s ease;
     }
     .badge-inner {
-      background: var(--theme-color-primary);
       transition: 0.25s ease;
       &:hover {
-        background-color: var(--theme-color-primary-dimmed-04);
         p {
-          color: var(--theme-color-primary);
+          color: var(--color-text);
         }
       }
     }
@@ -45,7 +43,7 @@
         left: 15px;
         top: 50%;
         margin-top: -9px;
-        color: var(--theme-color-white);
+        color: var(--color-text);
         display: block;
         text-align: center;
         font-size: 18px;
@@ -53,7 +51,6 @@
         transition: 0.25s ease;
       }
       &:hover:before {
-        color: var(--theme-color-primary);
       }
     }
   }

gfi-ihk-2024/stories/components/election-result-list-item/ElectionResultListItemComponent.js

@@ -8,7 +8,7 @@ export const createElectionResultListItem =
      job = 'Grundstücksmakler, Immobilenemakler',
      city = 'Kreisfreie Musterstadt, Musterhausen',
   }) => {
-    const electionResultListItem = createElement('div', ['election-result-list-item']);
+    const electionResultListItem = createElement('div', ['election-result-list-item', 'variant-subtle-primary']);
     const topBox = createElement('a', ['top-box'], null, electionResultListItem);
     topBox.href = '#';
     const imageBox = createElement('div', ['image-box'], null, topBox);

gfi-ihk-2024/stories/components/election-result-list-item/election-result-list-item.scss

@@ -6,7 +6,7 @@
   flex-direction: column;
   justify-content: space-between;
   border-radius: 4px;
-  background: var(--theme-grey-light);
+  background: var(--color-background);
   text-decoration: none;
   width: 312px;
 
@@ -59,7 +59,7 @@
   .job-box,
   .city-box {
     margin-bottom: 5px;
-    background: var(--theme-color-primary-dimmed-04);
+    background: var(--color-surface-inset);
     border-radius: 4px;
     padding: 4px 0 2px 0;
     @media(max-width: 567px) {
@@ -84,7 +84,7 @@
         position: absolute;
         left: 4px;
         top: 50%;
-        font-family: "Icons";
+        font-family: "Icons", sans-serif;
         transform: translate(0, -50%);
       }
     }

gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLarge.stories.js

@@ -3,11 +3,6 @@ import {EventTeaserLargeData, EventTeaserLargeImageData} from "./EventTeaserLarg
 
 export default {
   title: 'Components/Event Teaser Large',
-  parameters: {
-    backgrounds: {
-      default: 'lightblue',
-    },
-  },
   args: {
     event: EventTeaserLargeData,
     widemode: false,

gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js

@@ -11,11 +11,11 @@ export const createEventTeaserLarge = ({
     target: '_self',
   },
 }) => {
-  const a = createElement('div', ['event-teaser-large']);
+  const a = createElement('div', ['event-teaser-large', 'variant-subtle-primary']);
   if (widemode) {
     a.classList.add('widemode');
   }
-  const blueBox = createElement('div', ['blue-box'], null, a);
+  const blueBox = createElement('div', ['blue-box', 'variant-solid'], null, a);
   const imgCon = createElement('div', ['img-con'], null, blueBox);
   const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a);
   createElement('div', ['icon-box', 'pictogram-' + event.icon.toLowerCase().split(' ').join('-')], null, blueBox);

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

@@ -2,7 +2,7 @@
 @import '../../_global/styles/vars';
 
 .event-teaser-large {
-  background-color: white;
+  background-color: var(--color-background);
   border-radius: 16px;
   overflow: hidden;
   display: flex;
@@ -17,7 +17,6 @@
     align-content: baseline;
     flex-flow: column;
     justify-content: flex-start;
-    background-color: var(--theme-grey-light);
     .blue-box {
       height:250px;
     }
@@ -28,10 +27,10 @@
   @include focus-visible;
 
   &:hover {
-    color: var(--theme-color-secondary-intensed);
+    color: var(--color-text-accent);
 
     .blue-box {
-      background-color: var(--theme-color-secondary-intensed);
+      background-color: var(--color-text-accent);
     }
   }
 
@@ -40,10 +39,8 @@
     display: flex;
     //flex-direction: column;
     justify-content: flex-end;
-    color: var(--theme-color-white);
-    margin-right: 18px;
+    color: var(--color-text);
     font-family: "Korb", sans-serif;
-    min-height: 80px;
     font-size: 14px;
     line-height: 1;
     padding: 70px 15px 15px 15px;
@@ -57,7 +54,8 @@
     min-height:250px;
     position: relative;
     &:not(.background-image){
-      background: linear-gradient(135deg, #036 45.14%, #368484 100%), #D9D9D9;
+      //background: linear-gradient(135deg, #036 45.14%, #368484 100%), #D9D9D9;
+      background: linear-gradient(132deg, var(--gradient-b) 26.51%, var(--gradient-a) 100%);
     }
     .img-con{
       position:absolute;
@@ -86,7 +84,7 @@
       font-family: 'Pictograms', sans-serif;
       font-size: 48px;
       line-height: 1;
-      color: var(--theme-color-white);
+      color: var(--color-text);
       position:absolute;
       top:15px;
       left:15px;
@@ -99,13 +97,13 @@
       position:relative;
     }
     .ev-cat{
-      color: var(--theme-color-primary);
+      color: var(--color-button-tertiary-text);
       font-size: 16px;
-      font-family: Source Sans Pro;
+      font-family: "Source Sans Pro", sans-serif;
       font-weight: 400;
       line-height: 16px;
       letter-spacing: 0.32px;
-      background-color:white;
+      background-color: var(--color-button-tertiary-background);
       border-radius:8px;
       display:inline-block;
       padding:5px 7px;
@@ -142,7 +140,7 @@
     //align-self: center;
     padding: 15px;
     //line-height: 1.2;
-    background-color: var(--theme-grey-light);
+    //background-color: var(--color-background);
     width:100%;
     display:flex;
     justify-content:space-between;
@@ -182,7 +180,7 @@
       line-height: 1.2em;
       margin-right: 15px;
       margin-bottom: 5px;
-      color: var(--theme-color-primary);
+      color: var(--color-text);
 
       &::before {
         position: relative;
@@ -192,7 +190,7 @@
         line-height: 20px;
         margin-right: 5px;
         vertical-align: top;
-        color: var(--theme-color-primary);
+        color: var(--color-text);
       }
 
       @media(max-width: 567px) {
@@ -224,13 +222,13 @@
       &.status {
         &::before {
           @include icon-xsmall-offen;
-          color: var(--theme-color-secondary-intensed);
+          color: var(--color-text-accent);
         }
 
         &.interested-parties, &.waiting-list {
           &::before {
             @include icon-xsmall-liste;
-            color: var(--theme-color-primary);
+            color: var(--color-text);
           }
         }
 

gfi-ihk-2024/stories/components/flockler/FlocklerComponent.js

@@ -6,7 +6,7 @@ export const createFlockler = ({
     backgroundColor = true,
     headline = 'Aktuelles aus Social Media',
 }) => {
-    const flockler = createElement('div', ['flockler']);
+    const flockler = createElement('div', ['flockler', 'variant-subtle-primary']);
     if (backgroundColor) {
         flockler.classList.add('colored')
     }

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

@@ -3,7 +3,7 @@
 
   &.colored {
     padding: var(--section-padding) 0;
-    background-color: var(--theme-color-primary-dimmed-04);
+    background-color: var(--color-background);
 
     h2 {
       margin-top: var(--section-headline-margin);

gfi-ihk-2024/stories/components/footer/FooterComponent.js

@@ -31,7 +31,7 @@ export const createFooter = ({
   legalNav = ['Impressum', 'Datenschutzerklärung', 'Pflichtinformationen nach der DSGVO'],
   picto = null
 }) => {
-  const footer = createElement('footer', ['page-footer']);
+  const footer = createElement('footer', ['page-footer', 'variant-subtle-primary']);
   if (picto !== null) {
     footer.classList.add('footer-picto');
     footer.style.backgroundImage = `url(${picto})`;

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

@@ -3,8 +3,8 @@
 
 .page-footer {
   padding: var(--section-padding) 0;
-  background-color: var(--theme-color-primary-dimmed-04);
-  border-bottom: var(--border-width) solid var(--theme-color-primary);
+  background-color: var(--color-background);
+  border-bottom: var(--border-width) solid var(--color-border);
   z-index: 10;
   &.footer-picto {
     padding-top: calc(var(--section-padding) + 300px);
@@ -107,7 +107,6 @@
 
   .row.barrier-free {
     text-align: right;
-    color: var(--theme-color-link);
 
     ul {
       list-style: none;
@@ -118,7 +117,7 @@
         content: '';
         position: relative;
         display: block;
-        border-bottom: 1px solid var(--theme-color-primary-dimmed-03);
+        border-bottom: 1px solid var(--color-surface-inset);
         margin: 1em 0.5em 0;
       }
     }
@@ -138,7 +137,7 @@
       }
 
       &:hover::before {
-        color: var(--theme-color-link-hover);
+        color: var(--color-text-accent);
       }
     }
 
@@ -231,7 +230,7 @@
           content: "";
           position: relative;
           display: block;
-          border-bottom: 1px solid var(--theme-color-primary-dimmed-03);
+          border-bottom: 1px solid var(--color-surface-inset);
           margin: 26px 8px 20px;
         }
       }

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

@@ -159,8 +159,8 @@
       button {
         margin-left: 10px;
         padding: 10px 24px;
-        background-color: var(--theme-color-primary);
-        color: var(--theme-color-white);
+        background-color: var(--color-button-primary-background);
+        color: var(--color-button-primary-text);
         border-radius: var(--border-radius-md);
         border: none;
         line-height: 1;
@@ -176,12 +176,12 @@
 
   .mwf-file__dropzone {
     order: 2;
-    background-color: var(--theme-color-white);
+    background-color: var(--color-background);
     border: 2px dashed #ccc;
     display: block;
     text-align: center;
     label {
-      color: var(--theme-color-primary);
+      color: var(--color-text);
       font-size: 110%;
       font-weight: 200;
       line-height: 1.5em;
@@ -195,10 +195,10 @@
         bottom: 1em;
         transform: translate(-50%, 0);
         content: "Datei auswählen";
-        background-color: var(--theme-color-primary);
-        color: var(--theme-color-white);
+        background-color: var(--color-button-primary-background);
+        color: var(--color-button-primary-text);
         border-radius: var(--border-radius-md);
-        box-shadow: 0 0 0 2px var(--theme-color-primary);
+        box-shadow: 0 0 0 2px var(--color-button-primary-background);
         cursor: pointer;
         display: inline-flex;
         font-family: 'Korb', sans-serif;
@@ -226,7 +226,7 @@
 .mwf-form__actions {
   display: flex;
   justify-content: space-between;
-  border-top: 1px solid var(--theme-color-primary-dimmed-03);
+  border-top: 1px solid var(--color-surface-inset);
   margin-bottom: 20px;
 }
 
@@ -238,11 +238,11 @@ ul.mwf-summary__list {
   li.mwf-summary__item {
     display: flex;
     padding: 15px;
-    border-top: 1px solid var(--theme-color-primary-dimmed-03, #ccd7e6);
-    border-bottom: 1px solid var(--theme-color-primary-dimmed-03, #ccd7e6);
+    border-top: 1px solid var(--color-surface-inset, #ccd7e6);
+    border-bottom: 1px solid var(--color-surface-inset, #ccd7e6);
 
     &:nth-child(even) {
-      background-color: var(--theme-color-primary-dimmed-04);
+      background-color: var(--swatches-primary-100);
     }
 
     span.mwf-summary-item__label {
@@ -262,7 +262,7 @@ ul.mwf-summary__list {
 }
 
 #ui-datepicker-div {
-  background-color: white;
+  background-color: var(--swatches-neutrals-white);
   border: var(--theme-color-link) 1px solid;
 
   .ui-datepicker-header {

gfi-ihk-2024/stories/components/gallery/GalleryComponent.js

@@ -11,7 +11,7 @@ export const createGallery =
     data = galleryData,
   }) => {
     const thumbWidth = galleryType === 'single-image' || galleryType === 'first-image' ? 880 : 300;
-    const section = createElement('section', ['gallery'], null, null);
+    const section = createElement('section', ['gallery','variant-subtle-primary'], null, null);
     section.dataset.type = galleryType;
     section.dataset.perPage = itemsPerPage.toString();
 

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

@@ -59,7 +59,7 @@
     a {
       position: relative;
       display: block;
-      background-color: var(--theme-color-primary-dimmed-04);
+      background-color: var(--color-background);
       @include focus-visible;
       transition: 0.2s ease;
 
@@ -215,13 +215,13 @@
         z-index: 1;
         font-size: var(--icon-size);
         line-height: 1;
-        color: var(--theme-color-white);
+        color: var(--swatches-neutrals-white);
         opacity: 0;
         transition: 0.3s ease;
       }
 
       &::before {
-        background-color: var(--theme-color-primary);
+        background-color: var(--color-text);
         opacity: 0;
         z-index: 1;
         transition: 0.3s ease;
@@ -272,7 +272,7 @@
   width: 100%;
   height: calc(var(--viewport-height, 1vh) * 100);
   background-color: rgba(#0F1C28, 0.95);
-  color: var(--theme-color-white);
+  color: var(--swatches-neutrals-white);
   z-index: 100;
   @include hide;
 
@@ -314,7 +314,7 @@
   }
 
   .text-box {
-    color: var(--theme-color-white);
+    color: var(--swatches-neutrals-white);
     font-size: 18px;
     display: flex;
     flex-direction: column;
@@ -347,7 +347,7 @@
       margin: -25px 15px;
       border: 0;
       background-color: transparent;
-      color: white;
+      color: var(--swatches-neutrals-white);
       cursor: pointer;
 
       &:before {
@@ -410,7 +410,7 @@
     font-size: 30px;
     line-height: 1;
     padding: 10px 0;
-    color: var(--theme-color-white);
+    color: var(--swatches-neutrals-white);
     background-color: transparent;
     margin: 15px;
     border: 0;

gfi-ihk-2024/stories/components/global-message/GlobalMessageComponent.js

@@ -8,7 +8,7 @@ export const createGlobalMessage =
     message = 'Leider kommt es durch <a href="#">technische Wartungsmaßnahmen</a> am 2. Mai in der Zeit von 17:30–23:00 zu einer eingeschränkten Verfügbarkeit unserer Internetseite',
     icon = 'icon-info',
   }) => {
-    const messageWrapper = createElement('section', ['global-message', type]);
+    const messageWrapper = createElement('section', ['global-message','variant-subtle-primary', type]);
     messageWrapper.setAttribute('aria-label', 'Wichtige Mitteilung');
     const inner = createElement('div', ['inner', icon], null, messageWrapper);
     createElement('p', [], message, inner);

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

@@ -6,8 +6,8 @@
   display: flex;
   align-items: flex-end;
   top: var(--header-height);
-  background-color: var(--theme-color-primary-dimmed-04);
-  box-shadow: 0 -1px 0 0 var(--theme-color-primary-dimmed-04);
+  background-color: var(--color-background);
+  box-shadow: 0 -1px 0 0 var(--color-background);
   font-size: var(--font-size-small);
   z-index: 99;
   transition: top 0.25s $easeOutQuad, max-height 0.4s $easeOutQuad;
@@ -20,24 +20,32 @@
     --font-size-small: 14px;
 
     &.light .close {
-      background-color: rgba(var(--theme-color-primary-rgb), 0.1);
+      //background-color: rgba(var(--swatches-primary-500-rgb), 0.1);
     }
   }
 
   &.bold {
-    --theme-color-link: var(--theme-color-white);
-    --theme-color-link-hover: var(--theme-color-secondary);
-    background-color: var(--theme-color-primary);
-    box-shadow: 0 -1px 0 0 var(--theme-color-primary);
-    color: var(--theme-color-background);
+    background-color: var(--color-button-primary-background);
+    box-shadow: 0 -1px 0 0 var(--color-button-primary-background);
+    color: var(--color-button-primary-text);
+    a {
+      color: var(--color-button-primary-text);
+      &:hover {
+        color: var(--color-decoration);
+      }
+    }
   }
 
   &.alarming {
-    --theme-color-link: var(--theme-color-white);
-    --theme-color-link-hover: var(--theme-color-white);
-    background-color: var(--theme-color-error);
-    box-shadow: 0 -1px 0 0 var(--theme-color-error);
+    background-color: var(--feedback-error);
+    box-shadow: 0 -1px 0 0 var(--feedback-error);
     color: var(--theme-color-background);
+    a {
+      color: var(--swatches-neutrals-white);
+      &:hover {
+        color: var(--swatches-neutrals-white);
+      }
+    }
   }
 
   &.open {

gfi-ihk-2024/stories/components/header-search/HeaderSearchComponent.js

@@ -23,7 +23,7 @@ export const createHeaderSearch = ({
   outer.appendChild(field);
   outer.appendChild(button);
 
-  const nav = createElement('div', ['form-nav'], null, form);
+  const nav = createElement('div', ['form-nav','variant-subtle-primary'], null, form);
   nav.appendChild(createSecondaryMenu({}));
 
   return form;

gfi-ihk-2024/stories/components/header/header.js

@@ -62,7 +62,7 @@ class IHKHeader {
 
   initSearch() {
     const t = this;
-    const formNav = $('<div class="form-nav" />').appendTo(t.header.find('.search form'));
+    const formNav = $('<div class="form-nav variant-subtle-primary" />').appendTo(t.header.find('.search form'));
 
     t.header.find('nav .secondary').clone().appendTo(formNav);
     t.header.find('nav .meta').clone().appendTo(formNav);

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

@@ -34,7 +34,7 @@
     content: "";
     @include full-size;
     box-shadow: 0 1px 0 rgba(#fff, 0);
-    background-color: var(--theme-color-background);
+    background-color: var(--color-background);
     transition: 0.25s $easeOutQuad;
   }
 
@@ -52,7 +52,7 @@
       }
 
       &:before {;
-        box-shadow: 0 1px 0 rgba(var(--theme-color-primary-rgb), 0.2);
+        box-shadow: 0 1px 0 var(--color-surface-inset);
       }
 
       nav {
@@ -69,7 +69,7 @@
     --logo-size: 44px;
 
     &:before {
-      box-shadow: 0 1px 0 rgba(var(--theme-color-primary-rgb), 0.2);
+      box-shadow: 0 1px 0 var(--color-surface-inset);
     }
   }
 
@@ -82,7 +82,7 @@
       top: 0;
       height: 44px;
       width: 100vw;
-      background-color: var(--theme-color-background);
+      background-color: var(--color-background);
       @include hide(0.3s);
     }
 
@@ -133,7 +133,7 @@
       left: 0;
       height: calc(100% - 20px);
       width: calc(100% - 16px);
-      background-color: white;
+      background-color: var(--swatches-neutrals-white);
       margin: 8px 12px 8px 8px;
     }
 
@@ -172,7 +172,7 @@
   .toggle-nav {
     position: relative;
     display: block;
-    border: 2px solid var(--theme-color-primary-dimmed-04);
+    border: 2px solid var(--color-surface-inset);
     background-color: transparent;
     padding: 18px 20px 18px 72px;
     margin: 0 30px 0 20px;
@@ -182,7 +182,7 @@
     line-height: 1.5;
     font-weight: 600;
     border-radius: 4px;
-    color: var(--theme-color-primary);
+    color: var(--color-text);
     @include focus-visible;
 
     @media(max-width: 767px) {
@@ -203,7 +203,7 @@
       width: 38px;
       height: 2px;
       border-radius: 2px;
-      background-color: var(--theme-color-primary);
+      background-color: var(--color-text);
       margin: 0 -19px;
       transform: translate3d(0, -1px, 0) rotate(0deg);
       transition: margin 0.2s ease 0.2s, transform 0.2s ease 0s, background-color 0.2s ease 0s, opacity 0.2s ease 0s;
@@ -247,7 +247,7 @@
     line-height: 1.5;
     font-weight: 600;
     text-decoration: none;
-    color: var(--theme-color-primary);
+    color: var(--color-text);
     cursor: pointer;
     border-radius: 4px;
     transition: 0.25s $easeOutQuad;
@@ -352,7 +352,7 @@
 
   .form-nav {
     width: 100%;
-    background-color: var(--theme-color-white);
+    background-color: var(--swatches-neutrals-white);
 
     .secondary {
       background-color: var(--theme-color-primary-dimmed-04);
@@ -371,7 +371,7 @@
     font-weight: 600;
     border: 0;
     border-radius: 4px;
-    color: var(--theme-color-white);
+    color: var(--swatches-neutrals-white);
     background-color: var(--theme-color-primary);
     @include focus-visible;
     @include hide;
@@ -400,7 +400,7 @@
       width: 38px;
       height: 2px;
       border-radius: 2px;
-      background-color: var(--theme-color-white);
+      background-color: var(--swatches-neutrals-white);
       margin: -1px -19px;
       transform: translate3d(0, 0, 0) rotate(45deg);
       transition: 0.3s ease;
@@ -422,7 +422,7 @@
     &:after {
       content: "";
       @include full-size;
-      background-color: var(--theme-color-white);
+      background-color: var(--swatches-neutrals-white);
     }
     .search form, .close-search {
       @include show;
@@ -433,13 +433,13 @@
     .toggle-nav {
       background-color: var(--theme-color-primary);
       border-color: var(--theme-color-primary);
-      color: var(--theme-color-white);
+      color: var(--swatches-neutrals-white);
       transition: 0.2s ease 0s;
 
       &:before, &:after, span:before {
         margin-top: 0;
         transition: margin 0.2s ease 0s, transform 0.2s ease 0.2s, background-color 0.2s ease 0s, opacity 0.2s ease 0.2s;
-        background-color: var(--theme-color-white);
+        background-color: var(--swatches-neutrals-white);
       }
     }
     .toggle-nav:before {
@@ -513,7 +513,7 @@
   right: 0;
   bottom: 105px;
   background-color: var(--theme-color-primary);
-  color: white;
+  color: var(--swatches-neutrals-white);
   width: 90px;
   height: 45px;
   display: flex;
@@ -529,7 +529,7 @@
   z-index: -1;
 
   &:hover, &:active, &:focus {
-    color: white;
+    color: var(--swatches-neutrals-white);
     text-decoration: none;
   }
 
@@ -574,7 +574,7 @@
   }
 
   .open-search:hover, .contact-nav a:hover {
-    color: var(--theme-color-secondary-intensed);
+    color: var(--swatches-secondary-700);
   }
 }
 /*

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

@@ -8,7 +8,7 @@ export const createHowToList =
      headline = 'Wie funktioniert’s?',
      text = 'Bestimmen Sie die wirtschaftliche Ausrichtung ihrer Region mit! Wählen Sie die nächste Vollversammlung ihrer IHK. Hier erfahren Sie ganz genau, wie sie mitmachen.',
   }) => {
-    const div = createElement('div', ['howto-list'], null);
+    const div = createElement('div', ['howto-list','variant-base'], null);
     const div2 = createElement('div', ['howto-list--left'], null, div);
     createElement('h2', [], headline, div2);
     createElement('p', [], text, div2);

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

@@ -73,7 +73,7 @@
       font-size: 70px;
       line-height: 1.4285;
       text-align: center;
-      color: var(--theme-color-primary) !important;
+      color: var(--color-text) !important;
       &:after {
         content: "";
         position: absolute;
@@ -85,7 +85,7 @@
         max-width: 100px;
         max-height: 100px;
         border-radius: 50%;
-        background: var(--theme-color-secondary);
+        background: var(--color-decoration);
       }
       @media(max-width: 399px) {
         position: static;

gfi-ihk-2024/stories/components/ihk-switch/IHKSwitchComponent.js

@@ -13,7 +13,7 @@ export const createIhkSwitch = ({
   zip = false,
   zipPlaceholder = 'z.B. 20146 Hamburg'
 }) => {
-  const wrap = createElement('div', ['ihk-switch']);
+  const wrap = createElement('div', ['ihk-switch','variant-solid']);
   const step1 = createElement('div', ['step'], null, wrap);
 
   if (!zip) {
@@ -49,7 +49,7 @@ export const createIhkSwitch = ({
 
     step1.dataset.step = 'zip';
     createElement('p', [], p1, step1);
-    const inputWrapper = createElement('div', ['input-wrapper'], null, step1);
+    const inputWrapper = createElement('div', ['input-wrapper','variant-base'], null, step1);
     inputWrapper.appendChild(createInputText({
       placeholder: zipPlaceholder,
       isRequired: true,
@@ -82,7 +82,7 @@ const buildButtons = () => {
   const no = createButton({
     elementType: 'button',
     label: 'Nein',
-    color: 'primary-extra-light',
+    color: 'secondary',
   })
 
   yes.classList.add('stay-here');

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

@@ -17,7 +17,7 @@
     height: 0;
     border-style: solid;
     border-width: 0 16px 16px 16px;
-    border-color: transparent transparent var(--theme-color-primary) transparent;
+    border-color: transparent transparent var(--color-background) transparent;
     bottom: 100%;
     left: 30px;
   }
@@ -53,8 +53,8 @@
 
   .step {
     position: absolute;
-    background-color: var(--theme-color-primary);
-    color: white;
+    background-color: var(--color-background);
+    color: var(--color-text);
     padding: 50px 30px 30px;
     outline: 1px solid rgba(white, 0.1);
     display: none;
@@ -101,10 +101,11 @@
   }
 
   a {
-    color: white;
+    color: var(--color-text);
+    cursor: pointer;
 
     &:hover {
-      color: var(--theme-color-secondary);
+      color: var(--color-text-accent);
     }
   }
 
@@ -118,6 +119,7 @@
 
   .input-wrapper {
     position: relative;
+    background-color: var(--color-background);
     .btn {
       position: absolute;
       right: 0;
@@ -125,7 +127,7 @@
       height: 100%;
       padding: 0;
       border-radius: 0;
-      background: #193f69;
+      background: var(--color-surface-inset);
       * {
         display: none;
       }
@@ -176,7 +178,7 @@
       width: 24px;
       height: 2px;
       transform: translate(-50%, -50%) rotate(45deg);
-      background-color: white;
+      background-color: var(--swatches-neutrals-white);
       transition: 0.2s ease;
 
       @media(max-width: 767px) {

gfi-ihk-2024/stories/components/image-text/ImageTextComponent.js

@@ -15,7 +15,11 @@ export const createImageText =
      linkname = 'Mehr erfahren',
      copyright = 'Copyright'
   }) => {
-    const div = createElement('div', ['image-text', colored, switched], null);
+    const variantMap = {
+        'colored': 'variant-subtle-primary',
+    };
+    const variant = variantMap[colored] ?? 'variant-base';
+    const div = createElement('div', ['image-text', colored, switched, variant], null);
     const div2 = createElement('div', ['image-text--image'], null, div);
     const div3 = createElement('div', ['image-text--text'], null, div);
     createImage(image, 1280, 1280, '', [], div2);

gfi-ihk-2024/stories/components/image-text/image-text.scss

@@ -33,7 +33,7 @@
   &.colored {
     &:before {
       content: '';
-      background: var(--theme-grey-light);
+      background: var(--color-background);
       position: absolute;
       left: 50%;
       top: 0;
@@ -77,7 +77,7 @@
       width: 100%;
       display: block;
       height: 8px;
-      background-color: var(--theme-color-secondary);
+      background-color: var(--color-border);
       transition: 0.3s ease;
       z-index: 1;
       border-bottom-right-radius: 4px;
@@ -131,7 +131,7 @@
         width: 8px;
         height: 8px;
         border-radius: 3px;
-        background-color: var(--theme-color-secondary);
+        background-color: var(--color-decoration);
         top: 9px;
 
         @media(max-width: 767px) {

gfi-ihk-2024/stories/components/infobox/InfoboxComponent.js

@@ -14,7 +14,11 @@ export const createInfobox =
          ul = 'List Styles werden über externe Klasse Richtext geladen',
          ol = 'Lorem ipsum dolor sit',
      }) => {
-        const infobox = createElement('div', ['infobox', type]);
+        const variantMap = {
+            'secondary': 'variant-subtle-primary',
+        };
+        const variant = variantMap[type] ?? 'variant-subtle-secondary';
+        const infobox = createElement('div', ['infobox', type, variant]);
         const content = createElement('div', ['infobox--content'], null, infobox);
 
         if (full === true) {

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

@@ -14,7 +14,7 @@
 article.col div.strong {
   position: relative;
   margin: calc(3% + 26px) 0;
-  background-color: var(--theme-color-secondary-dimmed);
+  background-color: var(--color-background);
   padding: var(--content-box-padding);
   border-radius: calc(4 * (var(--border-radius-xs)));
   overflow: hidden;
@@ -29,43 +29,29 @@ article.col div.strong {
     display: block;
     width: 100%;
     height: var(--border-width);
-    background: var(--theme-color-secondary);
+    background: var(--color-border);
     position: absolute;
     left: 0;
     bottom: 0;
   }
 
   &.success {
-    background-color: var(--theme-color-success-dimmed);
     &:after {
-      background: var(--theme-color-success);
     }
   }
 
   &.error {
-    background-color: var(--theme-color-error-dimmed);
+    background-color: var(--feedback-error-light);
+    color: var(--feedback-error);
     &:after {
-      background: var(--theme-color-error);
+      background: var(--feedback-error);
     }
   }
 
   &.warning {
-    background-color: var(--theme-color-warning-dimmed);
+    background-color: var(--feedback-warning-light);
     &:after {
-      background: var(--theme-color-warning);
-    }
-  }
-
-  &.secondary {
-    background-color: var(--theme-color-primary-dimmed-04);
-    &:after {
-      background: var(--theme-color-primary);
-    }
-    blockquote {
-      border-left-color: var(--theme-color-primary);
-    }
-    .icon-box {
-      color: var(--theme-color-primary);
+      background: var(--feedback-warning);
     }
   }
 
@@ -95,7 +81,7 @@ article.col div.strong {
     font-size: 76px;
     line-height: 76px;
     font-family: "Pictograms", sans-serif;
-    color: var(--theme-color-secondary);
+    color: var(--color-decoration);
     @media (max-width: 767px) {
       position: absolute;
       right: 15px;
@@ -117,7 +103,7 @@ article.col div.strong {
 
 .snippingTool {
   margin: calc(3% + 26px) 50px;
-  background-color: var(--theme-color-secondary-dimmed);
+  background-color: var(--color-background);
   padding: var(--content-box-padding);
   width: 652px;