colors

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

@@ -4,328 +4,7 @@
 
 //@import "../components/mixins";
 @import "../styles/mixins";
-.magazine-header {
-  position: sticky;
-  display: block;
-  height: 90px;
-  top: var(--header-height);
-  z-index: 99;
-  font-size: 0;
-  line-height: 0;
-  text-align: center;
-  pointer-events: none;
-  margin-bottom: 0;
 
-  @media(max-width: 767px) {
-    top: 80px;
-    height: 70px;
-  }
-  @media(max-width: 359px) {
-    top: 70px;
-  }
-
-  .gradient {
-    @include full-size;
-    background: linear-gradient(90deg, $color-gradient-01 10%, $color-gradient-02 55%, $color-gradient-03 90%);
-    background: linear-gradient(90deg, var(--theme-color-gradient-01, $color-gradient-01) 10%, var(--theme-color-gradient-02, $color-gradient-02) 55%, var(--theme-color-gradient-03, $color-gradient-03) 90%);
-    transform-origin: center top;
-  }
-
-  .title {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform-origin: center 7%;
-    transform: translate(-50%, -50%);
-    display: inline-block;
-    font-size: 60px;
-    color: white;
-    line-height: 1;
-    padding: 15px;
-    font-weight: 400;
-    text-decoration: none;
-    pointer-events: all;
-
-    @media(max-width: 999px) {
-      font-size: 48px;
-    }
-
-    @media(max-width: 567px) {
-      display: block;
-      width: 100%;
-      font-size: 32px;
-    }
-  }
-
-  &.narrow .title {
-    font-size: 36px;
-  }
-
-  &.narrow {
-    height: 50px;
-  }
-}
-
-.magazine-start, .magazine-article {
-  .page-header {
-    @media(min-width: 1200px) {
-      height: 100px;
-
-      .logo img {
-        height: 50px;
-      }
-    }
-
-    &:not(.nav-open):before {
-      box-shadow: none;
-    }
-  }
-
-  @media(min-width: 1200px) {
-    .page-wrapper {
-      border-top: 100px solid #fff;
-    }
-  }
-
-  a.teaser .kicker:first-child + .text-box h4, a.teaser .text-box:first-child h4,
-  a.teaser .kicker:first-child + .text-box h4, a.teaser .text-box:first-child .like-h4{
-    @include h4;
-    text-decoration-thickness: 0.07em;
-    margin-top: 0.4em;
-    margin-bottom: 0.4em;
-
-    @media(min-width: 1000px) {
-      @include h2;
-      text-decoration-thickness: 0.07em;
-      margin-top: 0;
-    }
-  }
-
-  .teasers h2 {
-    text-transform: uppercase;
-    margin-left: 0;
-    margin-right: 0;
-    @include h4;
-    margin-bottom: 1.2em;
-
-    &:before {
-      content: "";
-      position: relative;
-      display: block;
-      background: linear-gradient(90deg, $color-gradient-01 10%, $color-gradient-02 55%, $color-gradient-03 90%);
-      background: linear-gradient(90deg, var(--theme-color-gradient-01, $color-gradient-01) 10%, var(--theme-color-gradient-02, $color-gradient-02) 55%, var(--theme-color-gradient-03, $color-gradient-03) 90%);
-      height: 4px;
-      margin-bottom: 0.5em;
-    }
-  }
-}
-
-.magazine-start {
-  .page-content > .teasers:first-child {
-    @media(max-width: 767px) {
-      margin-top: 10px;
-    }
-    @media(min-width: 768px) and (max-height: 999px) {
-      margin-top: 30px;
-    }
-    @media(min-width: 768px) and (min-height: 1000px) {
-      margin-top: 50px;
-    }
-  }
-
-  .teasers[data-items="1"] {
-    .kicker:first-child {
-      margin-bottom: 0;
-    }
-
-    .text-box:first-child, .kicker:first-child ~ .text-box {
-      position: relative;
-      border-top: 0;
-      margin-top: 0;
-      padding-top: 0;
-      padding-bottom: 44px;
-
-      @media(max-width: 1199px) {
-        padding-right: 20%;
-      }
-      @media(max-width: 767px) {
-        padding-right: 0;
-      }
-
-      &:after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 8px;
-        transition: 0.3s ease;
-        z-index: 1;
-        border-bottom-right-radius: 4px;
-        border-bottom-left-radius: 4px;
-      }
-
-      ~ .reading-time {
-        margin-bottom: 0;
-      }
-    }
-
-    a:hover .text-box:after {
-      height: 14px !important;
-    }
-
-    @media(min-width: 1000px) {
-      .teaser {
-        display: block;
-
-        &:after {
-          content: "";
-          display: block;
-          clear: left;
-        }
-      }
-
-      .image-box {
-        width: calc(50% - 20px);
-        max-width: none;
-        float: left;
-        margin-right: 40px;
-
-        @media(max-width: 1199px) {
-          margin-right: 30px;
-          width: calc(50% - 15px);
-        }
-
-        ~ .text-box {
-          min-width: 0;
-          max-width: calc(50% - 20px);
-          float: left;
-
-          @media(max-width: 1199px) {
-            width: calc(50% - 15px);
-          }
-        }
-        ~ .kicker {
-          position: relative;
-          margin: 0;
-          display: inline-block;
-          left: auto;
-          max-width: calc(50% - 40px);
-        }
-      }
-
-      &[data-image-size="l"] {
-        .image-box {
-          width: calc(66.66667% - 12px);
-
-          @media(max-width: 1199px) {
-            width: calc(66.66667% - 10px);
-          }
-
-          &:before {
-            padding-top: 55%;
-          }
-
-          ~ .text-box, ~ .kicker {
-            max-width: calc(33.33333% - 28px);
-
-            @media(max-width: 1199px) {
-              width: calc(33.33333% - 20px);
-              padding-right: 0;
-            }
-          }
-        }
-      }
-
-      &[data-image-size="s"] {
-        .image-box {
-          width: calc(41.66667% - 23px);
-          min-width: 0;
-
-          @media(max-width: 1199px) {
-            width: calc(41.66667% - 18px);
-          }
-
-          &:before {
-            padding-top: 100%;
-          }
-
-          ~ .text-box, ~ .kicker {
-            max-width: calc(58.33333% - 17px);
-
-            @media(max-width: 1199px) {
-              width: calc(58.33333% - 12px);
-            }
-          }
-        }
-      }
-
-      h4, .like-h4 {
-        @include h2;
-        text-decoration-thickness: 0.07em;
-        margin-top: 0;
-      }
-    }
-  }
-
-  .teasers[data-items="2"], .teasers[data-items="3"], .teasers[data-items="4"] {
-    .teaser {
-      height: calc(100% + 12px);
-    }
-  }
-}
-
-.reading-time {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  font-size: 0;
-  font-weight: 700;
-  font-family: "Korb", sans-serif;
-  text-transform: uppercase;
-  margin: 8px;
-  color: $color-primary;
-  color: var(--theme-color-primary, $color-primary);
-  transition: color 0.3s ease;
-  z-index: 2;
-
-  span {
-    padding-left: 4px;
-    font-size: 14px;
-    line-height: 1.4;
-    display: inline-block;
-  }
-
-  .value {
-    background-color: $color-primary;
-    background-color: var(--theme-color-primary, $color-primary);
-    color: white;
-    padding: 0 6px;
-    transition: background-color 0.3s ease;
-  }
-}
-
-a:hover .reading-time {
-  color: $color-secondary-dark;
-  color: var(--theme-color-secondary-intensed, $color-secondary-dark);
-
-  .value {
-    background-color: $color-secondary-dark;
-    background-color: var(--theme-color-secondary-intensed, $color-secondary-dark);
-  }
-}
-
-.magazine-article, .magazine-start {
-  .teaser {
-    .text-box:not(:last-child) {
-      padding-bottom: 24px;
-    }
-  }
-
-  .page-details {
-    margin-bottom: 20px;
-  }
-}
 
 .magazine-article {
   .row {
@@ -339,7 +18,7 @@ a:hover .reading-time {
     position: relative;
     z-index: 1;
     max-width: 66.6667%;
-    background-color: #fff;
+    background-color: var(--theme-color-white);
 
     @media(max-width: 1199px) {
       max-width: 83.3333%;
@@ -369,7 +48,7 @@ a:hover .reading-time {
       padding: 0 0 0 20px;
     }
 
-    p:not(.author), div.text {
+    p:not(.author):not(.author-subline), div.text:not(.author):not(.author-subline) {
       line-height: 1.3;
 
       &:first-child:before {
@@ -388,7 +67,7 @@ a:hover .reading-time {
       }
     }
 
-    p:not(.author):last-child:after, div.text:last-child:after, .author:after, h4:after, .like-h4:after {
+    p:not(.author):not(.author-subline):last-child:after, div.text:not(.author):not(.author-subline):last-child:after, .author:after, h4:after, .like-h4:after {
       content: "";
       position: relative;
       display: block;

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

@@ -91,7 +91,7 @@
       }
     }
 
-    .text a, .rte--list a, .strong a {
+    .text a, .strong a {
       transition: 0.2s ease;
       display: inline;
       padding: 0 5px 2px;

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

@@ -1,9 +1,9 @@
 :root {
   --theme-color-white: #ffffff;
-  --theme-color-background: #ffffff;
+  --theme-color-background: var(--theme-color-white);
 
   --theme-color-primary: #003366;
-  --theme-color-primary-microsite: #003366;
+  --theme-color-primary-microsite: var(--theme-color-primary);
   --theme-color-primary-rgb: 0, 51, 102;
   --theme-color-primary-dimmed-01: #335C85;
   --theme-color-primary-dimmed-02: #B0C4D6;
@@ -12,7 +12,7 @@
 
 
   --theme-color-secondary: #56BD66;
-  --theme-color-secondary-microsite: #56BD66;
+  --theme-color-secondary-microsite: var(--theme-color-secondary);
   --theme-color-secondary-intensed: #247929;
   --theme-color-secondary-dimmed: #E4F1E4;
 
@@ -27,8 +27,8 @@
   --theme-color-success-dimmed: var(--theme-color-secondary-dimmed);
   --theme-color-warning: #FDC600;
   --theme-color-warning-dimmed: #FFF4CC;
-  --theme-color-error: #EA515A;
-  --theme-color-error-dimmed: #FBDCDE;
+  --theme-color-error: #D54048;
+  --theme-color-error-dimmed: #f7d9da;
   --theme-grey-light: #EFF3F6;
   --theme-24dp: 0px 0px 15px 0px rgba(0, 51, 102, 0.20), 0px 0px 46px 0px rgba(0, 51, 102, 0.12), 0px 0px 38px 0px rgba(0, 51, 102, 0.14);
 

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

@@ -137,7 +137,7 @@
       &.status {
         &::before {
           @include icon-xsmall-offen;
-          color: #2E8533;
+          color: var(--theme-color-secondary-intensed);
         }
 
         &.interested-parties, &.waiting-list {
@@ -149,7 +149,7 @@
 
         &.reserved::before {
           @include icon-xsmall-geschlossen;
-          color: #EA515A;
+          color: var(--theme-color-error);
         }
       }
     }

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

@@ -65,7 +65,7 @@
     display: flex;
     align-items: center;
     margin: 0 0 0 calc(var(--accordion-icon-width) * -1);
-    background-color: #fff;
+    background-color: var(--theme-color-white);
     text-decoration: none;
     position: relative;
     @include focus-visible;
@@ -293,10 +293,10 @@
     }
 
     &.icon-freie-plaetze:before {
-      color: #2E8533;
+      color: var(--theme-color-secondary-intensed);
     }
     &.icon-geschlossen:before {
-      color: #EA515A;
+      color: var(--theme-color-error);
     }
 
     h4, .like-h4 {

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: #fff;
+  background-color: var(--theme-color-white);
   margin: 0 auto;
   padding-bottom: 0;
 

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

@@ -2,13 +2,13 @@
 @import '../../_global/styles/vars';
 
 .election-form {
-  --theme-color-link: #fff;
-  --theme-color-link-hover: #fff;
+  --theme-color-link: var(--theme-color-white);
+  --theme-color-link-hover: var(--theme-color-white);
   font-size: var(--font-size-small);
   background: linear-gradient(140deg, var(--theme-color-gradient-01) 30%, var(--theme-color-gradient-02) 75%, var(--theme-color-gradient-03) 108%);
   padding: 30px 30px 0 30px;
   border-radius: var(--border-radius-xs);
-  color: #fff;
+  color: var(--theme-color-white);
   margin-top: 40px;
   margin-bottom: 20px;
   @media(max-width: 567px) {

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

@@ -98,7 +98,7 @@
       position:relative;
     }
     .ev-cat{
-      color: #003366;
+      color: var(--theme-color-primary);
       font-size: 16px;
       font-family: Source Sans Pro;
       font-weight: 400;
@@ -224,7 +224,7 @@
       &.status {
         &::before {
           @include icon-xsmall-offen;
-          color: #2E8533;
+          color: var(--theme-color-secondary-intensed);
         }
 
         &.interested-parties, &.waiting-list {
@@ -236,7 +236,7 @@
 
         &.reserved::before {
           @include icon-xsmall-geschlossen;
-          color: #EA515A;
+          color: var(--theme-color-error);
         }
       }
     }

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

@@ -176,7 +176,7 @@
 
   .mwf-file__dropzone {
     order: 2;
-    background-color: #fff;
+    background-color: var(--theme-color-white);
     border: 2px dashed #ccc;
     display: block;
     text-align: center;

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

@@ -215,7 +215,7 @@
         z-index: 1;
         font-size: var(--icon-size);
         line-height: 1;
-        color: #fff;
+        color: var(--theme-color-white);
         opacity: 0;
         transition: 0.3s ease;
       }
@@ -272,7 +272,7 @@
   width: 100%;
   height: calc(var(--viewport-height, 1vh) * 100);
   background-color: rgba(#0F1C28, 0.95);
-  color: #fff;
+  color: var(--theme-color-white);
   z-index: 100;
   @include hide;
 
@@ -314,7 +314,7 @@
   }
 
   .text-box {
-    color: #fff;
+    color: var(--theme-color-white);
     font-size: 18px;
     display: flex;
     flex-direction: column;
@@ -410,7 +410,7 @@
     font-size: 30px;
     line-height: 1;
     padding: 10px 0;
-    color: #fff;
+    color: var(--theme-color-white);
     background-color: transparent;
     margin: 15px;
     border: 0;

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

@@ -25,7 +25,7 @@
   }
 
   &.bold {
-    --theme-color-link: #fff;
+    --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);
@@ -33,10 +33,10 @@
   }
 
   &.alarming {
-    --theme-color-link: #fff;
-    --theme-color-link-hover: #fff;
-    background-color: #EA515A;
-    box-shadow: 0 -1px 0 0 #EA515A;
+    --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);
     color: var(--theme-color-background);
   }
 

gfi-ihk-2024/stories/components/magazine-article/magazine-article.scss

@@ -6,7 +6,7 @@
   z-index: 1;
   width: 880px;
   max-width: 66.6667%;
-  background-color: #fff;
+  background-color: var(--theme-color-white);
   margin: 0 auto;
   padding-bottom: 0;
 

gfi-ihk-2024/stories/components/magazine-cover/magazine-cover.scss

@@ -55,6 +55,7 @@
   img {
     display: block;
     max-width: 100%;
+    width: 100%;
     height: auto;
     aspect-ratio: 1110/440;
     object-fit: cover;

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

@@ -1,11 +1,11 @@
 .newsletter-teaser {
-  --theme-color-link: #fff;
-  --theme-color-link-hover: #fff;
+  --theme-color-link: var(--theme-color-white);
+  --theme-color-link-hover: var(--theme-color-white);
   font-size: var(--font-size-small);
   background: linear-gradient(140deg, var(--theme-color-gradient-01) 30%, var(--theme-color-gradient-02) 75%, var(--theme-color-gradient-03) 108%);
   padding: var(--content-box-padding);
   border-radius: var(--border-radius-xs);
-  color: #fff;
+  color: var(--theme-color-white);
 
   @media(max-width: 767px) {
     padding: calc(var(--content-box-padding) * 2) var(--content-box-padding);
@@ -66,7 +66,7 @@
   input[type="checkbox"] {
     margin-right: 0.6em;
     margin-left: 0;
-    border-color: #fff;
+    border-color: var(--theme-color-white);
 
     + label {
       font-size: var(--font-size-small);

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

@@ -198,7 +198,7 @@
         //@extend .icon-xsmall-offen;
 
         &:before {
-          color: #2E8533;
+          color: var(--theme-color-secondary-intensed);
         }
 
         &.interested-parties, &.waiting-list {
@@ -213,7 +213,7 @@
           //@extend .icon-xsmall-geschlossen;
 
           &:before {
-            color: #EA515A;
+            color: var(--theme-color-error);
           }
         }
       }

gfi-ihk-2024/stories/sections/tile-grid-wood/tile-grid-wood.scss

@@ -53,7 +53,7 @@
     top: 100px;
     padding: 20px 0 10px;
     z-index: 1;
-    background-color: #fff;
+    background-color: var(--theme-color-white);
 
     @media(max-width: 767px) {
       top: 75px;
@@ -106,7 +106,7 @@
         content: '';
         display: block;
         padding-top: 60%;
-        background-color: #fff;
+        background-color: var(--theme-color-white);
         opacity: 0;
         transition: 0.2s ease;
 

gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss

@@ -53,7 +53,7 @@
     top: 100px;
     padding: 20px 0 10px;
     z-index: 1;
-    background-color: #fff;
+    background-color: var(--theme-color-white);
 
     @media(max-width: 767px) {
       top: 75px;
@@ -106,7 +106,7 @@
         content: '';
         display: block;
         padding-top: 60%;
-        background-color: #fff;
+        background-color: var(--theme-color-white);
         opacity: 0;
         transition: 0.2s ease;