From 9c6e2b50348b0af4f29cf6d865725ffb62506a9c Mon Sep 17 00:00:00 2001
From: FlorianEisenmenger <f.eisenmenger@spawntree.de>
Date: Sun, 7 Jun 2026 22:21:32 +0200
Subject: [PATCH] sections

---
 gfi-ihk-2024/stories/atoms/button/button.scss |  2 +-
 .../sections/slider/SliderComponent.js        |  2 +-
 .../stories/sections/slider/slider.js         |  2 +-
 .../stories/sections/slider/slider.scss       | 16 +++++---
 .../sections/social/SocialComponent.js        |  2 +-
 .../stories/sections/social/social.scss       |  4 +-
 .../sections/survey/SurveyComponent.js        |  4 +-
 .../stories/sections/survey/survey.scss       | 14 +++----
 .../stories/sections/teasers/teasers.scss     | 25 +++++++------
 .../tile-grid-wood/TileGridWoodComponent.js   | 12 ++++--
 .../tile-grid-wood/tile-grid-wood.scss        | 37 +++++++++++++------
 .../sections/tile-grid/TileGridComponent.js   | 12 ++++--
 .../stories/sections/tile-grid/tile-grid.scss | 37 +++++++++++++------
 13 files changed, 105 insertions(+), 64 deletions(-)

diff --git a/gfi-ihk-2024/stories/atoms/button/button.scss b/gfi-ihk-2024/stories/atoms/button/button.scss
index 446a5fe..03ec2ff 100644
--- a/gfi-ihk-2024/stories/atoms/button/button.scss
+++ b/gfi-ihk-2024/stories/atoms/button/button.scss
@@ -76,7 +76,7 @@
 
 .btn.secondary-light {
   --button-bg-color: var(--swatches-secondary-300);
-  --button-text-color: var(--button-bg-color);
+  --button-text-color: var(--color-text);
   --button-hover-shadow-opacity: 0.45;
 }
 
diff --git a/gfi-ihk-2024/stories/sections/slider/SliderComponent.js b/gfi-ihk-2024/stories/sections/slider/SliderComponent.js
index a798bd2..5826bcb 100644
--- a/gfi-ihk-2024/stories/sections/slider/SliderComponent.js
+++ b/gfi-ihk-2024/stories/sections/slider/SliderComponent.js
@@ -11,7 +11,7 @@ export const createSlider =
   }) => {
     const section = createElement('section', ['rotation'], null);
     const container = createElement('div', ['container'], null, section);
-    const sliderComponent = createElement('div', ['slider'], null, container);
+    const sliderComponent = createElement('div', ['slider','variant-solid'], null, container);
 
     slides.map((slideData, index) => {
       const slide = createElement('div', ['slide'], null, sliderComponent);
diff --git a/gfi-ihk-2024/stories/sections/slider/slider.js b/gfi-ihk-2024/stories/sections/slider/slider.js
index e920c5a..6d5b1a6 100644
--- a/gfi-ihk-2024/stories/sections/slider/slider.js
+++ b/gfi-ihk-2024/stories/sections/slider/slider.js
@@ -106,7 +106,7 @@ class IHKSlider {
 
     this.prevButton = $('<button class="prev" aria-label="Zurück" />');
     this.nextButton = $('<button class="next" aria-label="Weiter" />');
-    const tabsWrapper = $('<ul class="slider-tabs" />');
+    const tabsWrapper = $('<ul class="slider-tabs variant-base" />');
     const countWrapper = $('<span class="count" />')
       .html('/<span class="total">' + this.slides.length + '</span></span>')
       .prepend(this.count);
diff --git a/gfi-ihk-2024/stories/sections/slider/slider.scss b/gfi-ihk-2024/stories/sections/slider/slider.scss
index 43932b7..a511c15 100644
--- a/gfi-ihk-2024/stories/sections/slider/slider.scss
+++ b/gfi-ihk-2024/stories/sections/slider/slider.scss
@@ -88,7 +88,7 @@
   position: relative;
   display: block;
   border-bottom: var(--border-width) solid var(--theme-color-secondary);
-  background-color: var(--theme-color-primary);
+  background-color: var(--color-background);
 
   @media(max-width: 567px) {
     margin: var(--section-margin) calc(var(--container-padding) * -1);
@@ -191,7 +191,7 @@
     flex: 1 1 33.33333%;
     max-width: 33.3333%;
     min-width: 400px;
-    color: var(--theme-color-background);
+    color: var(--color-text);
     z-index: 2;
     padding: 40px 20px 40px 80px;
     font-size: var(--font-size-small);
@@ -252,7 +252,7 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background-color: var(--theme-color-primary);
+      background-color: var(--color-background);
       z-index: -1;
 
       @media(min-width: 1000px) {
@@ -283,7 +283,7 @@
     line-height: 47px;
     margin: 0;
     text-align: right;
-    color: var(--swatches-neutrals-white);
+    color: var(--color-text);
     background: linear-gradient(90deg, var(--theme-color-gradient-01) 25%,var(--theme-color-gradient-02) 57%,var(--theme-color-gradient-03) 112%);
     @media(max-width: 999px) {
       min-height: auto;
@@ -328,6 +328,10 @@
         padding-top: 100px;
       }
     }
+    .btn {
+      background-color: var(--color-button-primary-background);
+      color: var(--color-button-primary-text);
+    }
   }
 
   .slider-tabs {
@@ -353,8 +357,8 @@
     }
 
     .active .btn {
-      --button-bg-color: var(--theme-color-background);
-      --button-text-color: var(--theme-color-primary);
+      --button-bg-color: var(--color-button-tertiary-background);
+      --button-text-color: var(--color-button-tertiary-text);
 
       &:hover::after {
         box-shadow: none;
diff --git a/gfi-ihk-2024/stories/sections/social/SocialComponent.js b/gfi-ihk-2024/stories/sections/social/SocialComponent.js
index 16267aa..eee4202 100644
--- a/gfi-ihk-2024/stories/sections/social/SocialComponent.js
+++ b/gfi-ihk-2024/stories/sections/social/SocialComponent.js
@@ -9,7 +9,7 @@ export const createSocialSection = ({
   visitUs = 'Besuchen Sie uns auf:',
 
 }) => {
-  const section = createElement('section', ['social'])
+  const section = createElement('section', ['social','variant-subtle-primary'])
   const container = createElement('div', ['container'], null, section);
   const wrapper = createElement('div', ['social-wrapper'], null, container);
 
diff --git a/gfi-ihk-2024/stories/sections/social/social.scss b/gfi-ihk-2024/stories/sections/social/social.scss
index 5e5357c..30482f2 100644
--- a/gfi-ihk-2024/stories/sections/social/social.scss
+++ b/gfi-ihk-2024/stories/sections/social/social.scss
@@ -18,10 +18,10 @@ section.social {
 
   .social-wrapper {
     position: relative;
-    background-color: var(--theme-color-primary-dimmed-04);
+    background-color: var(--color-background);
     padding: var(--content-box-padding);
     display: flex;
-    border-bottom: var(--border-width) solid var(--theme-color-secondary);
+    border-bottom: var(--border-width) solid var(--color-border);
 
     @media(max-width: 999px) {
       flex-direction: column;
diff --git a/gfi-ihk-2024/stories/sections/survey/SurveyComponent.js b/gfi-ihk-2024/stories/sections/survey/SurveyComponent.js
index da6bd48..06230f9 100644
--- a/gfi-ihk-2024/stories/sections/survey/SurveyComponent.js
+++ b/gfi-ihk-2024/stories/sections/survey/SurveyComponent.js
@@ -14,7 +14,7 @@ export const createSurvey = ({
 }) => {
   const section = createElement('section', ['participation']);
   const container = createElement('div', ['container'], null, section);
-  const survey = createElement('div', ['vot-teaser', 'survey'], null, container);
+  const survey = createElement('div', ['vot-teaser', 'survey','variant-subtle-secondary'], null, container);
 
   const textBox = createElement('div', ['text-box'], null, survey);
   createElement('p', ['kicker'], kicker, textBox);
@@ -42,7 +42,7 @@ export const createSurvey = ({
       const input = createElement('input', [], null, li);
       const label = createButton({
         elementType: 'label',
-        color: 'secondary-light',
+        color: 'white',
         label: option,
         size: 'medium',
       })
diff --git a/gfi-ihk-2024/stories/sections/survey/survey.scss b/gfi-ihk-2024/stories/sections/survey/survey.scss
index 6d0df74..347d65d 100644
--- a/gfi-ihk-2024/stories/sections/survey/survey.scss
+++ b/gfi-ihk-2024/stories/sections/survey/survey.scss
@@ -11,8 +11,8 @@
   position: relative;
   display: block;
   margin: var(--section-margin) 0;
-  background-color: var(--theme-color-secondary-dimmed);
-  border-bottom: var(--border-width) solid var(--theme-color-secondary);
+  background-color: var(--color-background);
+  border-bottom: var(--border-width) solid var(--color-border);
 
   legend {
     margin: 0 0 0.75rem 0;
@@ -67,7 +67,7 @@
 
   legend {
     @include h4;
-    color: var(--theme-color-primary);
+    color: var(--color-text);
     margin: 1em 0 0.5em;
     padding: 0;
     border-bottom: 0;
@@ -107,13 +107,13 @@
     @include focus-visible();
 
     &:checked + label {
-      background-color: var(--swatches-secondary-700);
-      color: var(--swatches-neutrals-white);
+      background-color: var(--color-text-accent);
+      color: var(--color-button-primary-text);
     }
 
     &:hover + label::after {
       opacity: var(--button-hover-shadow-opacity);
-      box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--button-bg-color);
+      box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--color-surface-inset);
     }
   }
 
@@ -200,7 +200,7 @@
       bottom: 0;
       transition: 0.8s $easeInOutCubic;
       min-width: 1px;
-      background-color: #9AD7A3;
+      background-color: var(--color-surface-inset);
     }
   }
 
diff --git a/gfi-ihk-2024/stories/sections/teasers/teasers.scss b/gfi-ihk-2024/stories/sections/teasers/teasers.scss
index c2a3d17..96afe83 100644
--- a/gfi-ihk-2024/stories/sections/teasers/teasers.scss
+++ b/gfi-ihk-2024/stories/sections/teasers/teasers.scss
@@ -20,7 +20,7 @@
     }
   }
 
-
+// Wird der noch genutzt?
   .magazine-indicator {
     //position: relative;
     display: inline-block;
@@ -140,6 +140,7 @@
     }
   }
 
+// Wird das noch genutzt?
   &[data-background="lightgrey"] {
     background-color: var(--theme-grey-light);
     padding: calc(2vw + 20px) 0;
@@ -290,7 +291,7 @@
     transition: 0.25s $easeOutQuad;
     margin: -7px -8px -5px;
     padding: 7px 8px 5px;
-    color: var(--theme-color-text);
+    color: var(--color-text);
     border-radius: 8px;
     width: auto;
     @include focus-visible;
@@ -306,7 +307,7 @@
 
   h3, .like-h3, h4, .like-h4 {
     margin: 16px 0 14px;
-    color: var(--theme-color-link);
+    color: var(--color-text);
     transition: 0.3s ease;
     font-weight: 400;
   }
@@ -335,7 +336,7 @@
 
   .text-box {
     margin-top: 0;
-    border-top: 8px solid var(--theme-color-secondary);
+    border-top: 8px solid var(--color-border);
   }
 
   .image-box + .text-box {
@@ -343,7 +344,7 @@
   }
 
   .social-box {
-    border: 4px solid var(--theme-color-primary-dimmed-03);
+    border: 4px solid var(--swatches-primary-100);
     margin-left: -2px;
     margin-right: -2px;
     padding: 10px;
@@ -391,7 +392,7 @@
       width: 100%;
       display: block;
       height: 8px;
-      background-color: var(--theme-color-secondary);
+      background-color: var(--color-text-accent);
       transition: 0.3s ease;
       z-index: 1;
       border-bottom-right-radius: 4px;
@@ -455,7 +456,7 @@
     display: block;
     font-weight: 700 !important;
     padding: 30px;
-    color: var(--theme-color-background) !important;
+    color: var(--color-text) !important;
     text-decoration-color: transparent !important;
     margin-bottom: 16px;
     text-align: center;
@@ -498,7 +499,7 @@
         position: absolute;
         bottom: 100%;
         z-index: 1;
-        background-color: var(--swatches-neutrals-white);
+        background-color: var(--color-background);
         margin-right: 40px;
         padding-top: 12px;
         padding-right: 24px;
@@ -526,6 +527,7 @@
     }
   }
 
+// Wird das noch genutzt?
   .teaser-gallery{
     .btn{
       position: absolute;
@@ -535,7 +537,7 @@
     }
     &:hover{
       .btn{
-        box-shadow: 0 0 0 5px rgba(var(--theme-color-primary-rgb), 0.3);
+        box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-text) 30%, transparent);
       }
     }
   }
@@ -551,14 +553,14 @@
 .desktop .teaser:has(.teaser--link):hover,
 .mobile a.teaser:active,
 .mobile .teaser:has(.teaser--link):active {
-  color: var(--theme-color-link-hover);
+  color: var(--color-text-accent);
 
   .image-box:after {
     height: 14px;
   }
 
   h3, .like-h3, h4, .like-h4 {
-    color: var(--theme-color-link-hover);
+    color: var(--color-text-accent);
   }
 }
 
@@ -566,6 +568,7 @@
   position: absolute;
   top: 0;
   left: 0;
+// Das war immer so - keine Auswirkungen?
   background-color: red;
   color: var(--swatches-neutrals-white);
   width: 30px;
diff --git a/gfi-ihk-2024/stories/sections/tile-grid-wood/TileGridWoodComponent.js b/gfi-ihk-2024/stories/sections/tile-grid-wood/TileGridWoodComponent.js
index cc8ed82..f374052 100644
--- a/gfi-ihk-2024/stories/sections/tile-grid-wood/TileGridWoodComponent.js
+++ b/gfi-ihk-2024/stories/sections/tile-grid-wood/TileGridWoodComponent.js
@@ -13,8 +13,10 @@ export const createTileGrid = ({
   createElement('h2', [], headline, container);
   const row = createElement('div', ['row'], null, container);
 
-  tiles.map((group) => {
-    const col = createElement('div', ['col'], null, row);
+  tiles.map((group, index) => {
+    // ungerade cols bekommen variant-accent und gerade cols bekommen variant-solid
+    const variant = index % 2 === 0 ? 'variant-accent' : 'variant-solid';
+    const col = createElement('div', ['col', variant], null, row);
     const head = createElement('div', ['tile-head'], null, col);
     const tileLink = createElement('a', ['tile-head-outer'], null, head);
     tileLink.href = group.titleUrl;
@@ -22,12 +24,14 @@ export const createTileGrid = ({
 
     group.tiles.map((item) => {
       const tile = createElement('div', ['tile'], null, col);
+      // ungerade cols bekommen variant-subtle-secondary und gerade cols bekommen variant-subtle-primary
+      const tileVariant = index % 2 === 0 ? 'variant-subtle-secondary' : 'variant-subtle-primary';
       let tileLink;
       if (item.url) {
-        tileLink = createElement('a', ['tile-outer'], null, tile);
+        tileLink = createElement('a', ['tile-outer', tileVariant], null, tile);
         tileLink.href = item.url;
       } else {
-        tileLink = createElement('span', ['tile-outer'], null, tile);
+        tileLink = createElement('span', ['tile-outer', tileVariant], null, tile);
       }
       if (item.icon) {
         const iconBox = createElement('div', ['icon'], null, tileLink);
diff --git a/gfi-ihk-2024/stories/sections/tile-grid-wood/tile-grid-wood.scss b/gfi-ihk-2024/stories/sections/tile-grid-wood/tile-grid-wood.scss
index 6bdae6c..a00fcb7 100644
--- a/gfi-ihk-2024/stories/sections/tile-grid-wood/tile-grid-wood.scss
+++ b/gfi-ihk-2024/stories/sections/tile-grid-wood/tile-grid-wood.scss
@@ -35,16 +35,29 @@
       margin-bottom: 100px;
     }
 
-    &:nth-child(odd) {
-      .tile .tile-outer {
-        background-color: var(--theme-color-secondary-dimmed);
-        color: var(--swatches-secondary-700);
-      }
+    .tile-head-outer {
+      background-color: var(--color-background);
+      color: var(--color-text);
+    }
 
-      .tile-head-outer {
-        background-color: var(--swatches-secondary-700);
+    .tile .tile-outer {
+      background-color: var(--color-background);
+      color: var(--color-text);
+      &.variant-subtle-secondary {
+        color: var(--color-text-accent);
       }
     }
+
+    //&:nth-child(odd) {
+    //.tile .tile-outer {
+    //  background-color: var(--theme-color-secondary-dimmed);
+    //  color: var(--swatches-secondary-700);
+    //}
+    //
+    //.tile-head-outer {
+    //  background-color: var(--swatches-secondary-700);
+    //}
+    //}
   }
 
   .tile-head {
@@ -53,7 +66,7 @@
     top: 100px;
     padding: 20px 0 10px;
     z-index: 1;
-    background-color: var(--swatches-neutrals-white);
+    //background-color: var(--swatches-neutrals-white);
 
     @media(max-width: 767px) {
       top: 75px;
@@ -69,13 +82,13 @@
   .tile-head-outer {
     position: relative;
     display: block;
-    color: var(--swatches-neutrals-white);
-    background-color: var(--theme-color-primary);
+    //color: var(--swatches-neutrals-white);
+    //background-color: var(--theme-color-primary);
     transition: 0.2s ease;
     border-top-right-radius: 30px;
     border-top-left-radius: 30px;
     padding: 5% 16% 5% 7%;
-    text-decoration-color: rgba(white, 0);
+    text-decoration: none;
     @include focus-visible;
   }
 
@@ -93,7 +106,7 @@
     .tile-outer {
       position: relative;
       display: block;
-      background-color: var(--theme-color-primary-dimmed-04);
+      //background-color: var(--theme-color-primary-dimmed-04);
       transition: 0.2s ease;
       @include focus-visible;
 
diff --git a/gfi-ihk-2024/stories/sections/tile-grid/TileGridComponent.js b/gfi-ihk-2024/stories/sections/tile-grid/TileGridComponent.js
index c65bd67..09e18af 100644
--- a/gfi-ihk-2024/stories/sections/tile-grid/TileGridComponent.js
+++ b/gfi-ihk-2024/stories/sections/tile-grid/TileGridComponent.js
@@ -13,8 +13,10 @@ export const createTileGrid = ({
   createElement('h2', [], headline, container);
   const row = createElement('div', ['row'], null, container);
 
-  tiles.map((group) => {
-    const col = createElement('div', ['col'], null, row);
+  tiles.map((group, index) => {
+    // ungerade cols bekommen variant-accent und gerade cols bekommen variant-solid
+    const variant = index % 2 === 0 ? 'variant-accent' : 'variant-solid';
+    const col = createElement('div', ['col', variant], null, row);
     const head = createElement('div', ['tile-head'], null, col);
     const tileLink = createElement('a', ['tile-head-outer'], null, head);
     tileLink.href = group.titleUrl;
@@ -22,12 +24,14 @@ export const createTileGrid = ({
 
     group.tiles.map((item) => {
       const tile = createElement('div', ['tile'], null, col);
+      // ungerade cols bekommen variant-subtle-secondary und gerade cols bekommen variant-subtle-primary
+      const tileVariant = index % 2 === 0 ? 'variant-subtle-secondary' : 'variant-subtle-primary';
       let tileLink;
       if (item.url) {
-        tileLink = createElement('a', ['tile-outer'], null, tile);
+        tileLink = createElement('a', ['tile-outer', tileVariant], null, tile);
         tileLink.href = item.url;
       } else {
-        tileLink = createElement('span', ['tile-outer'], null, tile);
+        tileLink = createElement('span', ['tile-outer', tileVariant], null, tile);
       }
       if (item.icon) {
         const iconBox = createElement('div', ['icon'], null, tileLink);
diff --git a/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss b/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss
index 6bdae6c..cd86246 100644
--- a/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss
+++ b/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss
@@ -35,16 +35,29 @@
       margin-bottom: 100px;
     }
 
-    &:nth-child(odd) {
-      .tile .tile-outer {
-        background-color: var(--theme-color-secondary-dimmed);
-        color: var(--swatches-secondary-700);
-      }
+    .tile-head-outer {
+      background-color: var(--color-background);
+      color: var(--color-text);
+    }
 
-      .tile-head-outer {
-        background-color: var(--swatches-secondary-700);
+    .tile .tile-outer {
+      background-color: var(--color-background);
+      color: var(--color-text);
+      &.variant-subtle-secondary {
+        color: var(--color-text-accent);
       }
     }
+
+    //&:nth-child(odd) {
+      //.tile .tile-outer {
+      //  background-color: var(--theme-color-secondary-dimmed);
+      //  color: var(--swatches-secondary-700);
+      //}
+      //
+      //.tile-head-outer {
+      //  background-color: var(--swatches-secondary-700);
+      //}
+    //}
   }
 
   .tile-head {
@@ -53,7 +66,7 @@
     top: 100px;
     padding: 20px 0 10px;
     z-index: 1;
-    background-color: var(--swatches-neutrals-white);
+    //background-color: var(--swatches-neutrals-white);
 
     @media(max-width: 767px) {
       top: 75px;
@@ -69,13 +82,13 @@
   .tile-head-outer {
     position: relative;
     display: block;
-    color: var(--swatches-neutrals-white);
-    background-color: var(--theme-color-primary);
+    //color: var(--swatches-neutrals-white);
+    //background-color: var(--theme-color-primary);
     transition: 0.2s ease;
     border-top-right-radius: 30px;
     border-top-left-radius: 30px;
     padding: 5% 16% 5% 7%;
-    text-decoration-color: rgba(white, 0);
+    text-decoration: none;
     @include focus-visible;
   }
 
@@ -93,7 +106,7 @@
     .tile-outer {
       position: relative;
       display: block;
-      background-color: var(--theme-color-primary-dimmed-04);
+      //background-color: var(--theme-color-primary-dimmed-04);
       transition: 0.2s ease;
       @include focus-visible;