@kickstartds/ds-agency-premium 1.6.71--canary.2194.ac2155d.0 → 1.6.71--canary.2197.30c5a95.0

package/dist/components/presets.json

@@ -2904,7 +2904,7 @@
     "id": "layout-footer--footer",
     "group": "Layout/Footer",
     "name": "Footer",
-    "code": "<Footer\n  byline=\"© 2024 systemics Inc. All rights reserved.\"\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    inverted: false,\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      label: 'Active Item',\n      url: '#'\n    },\n    {\n      label: 'Navigation Item',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Dropdown',\n      url: '#'\n    },\n    {\n      label: 'One more Item',\n      url: '#'\n    },\n    {\n      label: 'Last Item',\n      url: '#'\n    }\n  ]}\n/>",
+    "code": "<Footer\n  byline=\"© 2024 systemics Inc. All rights reserved.\"\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    inverted: false,\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      label: 'Fahrzeugsuche',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Nissan',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Kia',\n          url: '#'\n        },\n        {\n          label: 'Maserati',\n          url: '#'\n        },\n        {\n          label: 'Corvette',\n          url: '#'\n        }\n      ],\n      label: 'Marken',\n      url: '#'\n    },\n    {\n      label: 'Standorte',\n      url: '#'\n    },\n    {\n      label: 'Bonusprogramm',\n      url: '#'\n    },\n    {\n      label: 'News',\n      url: '#'\n    },\n    {\n      label: 'Jobs',\n      url: '#'\n    },\n    {\n      label: 'Kontakt',\n      url: '#'\n    }\n  ]}\n/>",
     "args": {
       "logo": {
         "src": "/logo.svg",
@@ -2920,43 +2920,51 @@
       "navItems": [
         {
           "url": "#",
-          "label": "Active Item",
+          "label": "Fahrzeugsuche",
           "active": true
         },
         {
           "url": "#",
-          "label": "Navigation Item"
-        },
-        {
-          "url": "#",
-          "label": "Dropdown",
+          "label": "Marken",
           "items": [
             {
               "url": "#",
-              "label": "Level 2 Item"
+              "label": "Nissan"
             },
             {
               "url": "#",
-              "label": "Active Item",
+              "label": "Kia",
               "active": true
             },
             {
               "url": "#",
-              "label": "An Item with a longer Label"
+              "label": "Maserati"
             },
             {
               "url": "#",
-              "label": "And One last one"
+              "label": "Corvette"
             }
           ]
         },
         {
           "url": "#",
-          "label": "One more Item"
+          "label": "Standorte"
+        },
+        {
+          "url": "#",
+          "label": "Bonusprogramm"
+        },
+        {
+          "url": "#",
+          "label": "News"
+        },
+        {
+          "url": "#",
+          "label": "Jobs"
         },
         {
           "url": "#",
-          "label": "Last Item"
+          "label": "Kontakt"
         }
       ]
     },
@@ -3137,7 +3145,7 @@
     "id": "layout-header--header",
     "group": "Layout/Header",
     "name": "Header",
-    "code": "<Header\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      label: 'Active Item',\n      url: '#'\n    },\n    {\n      label: 'Navigation Item',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Dropdown',\n      url: '#'\n    },\n    {\n      label: 'One more Item',\n      url: '#'\n    },\n    {\n      label: 'Last Item',\n      url: '#'\n    }\n  ]}\n/>",
+    "code": "<Header\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      label: 'Fahrzeugsuche',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Nissan',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Kia',\n          url: '#'\n        },\n        {\n          label: 'Maserati',\n          url: '#'\n        },\n        {\n          label: 'Corvette',\n          url: '#'\n        }\n      ],\n      label: 'Marken',\n      url: '#'\n    },\n    {\n      label: 'Standorte',\n      url: '#'\n    },\n    {\n      label: 'Bonusprogramm',\n      url: '#'\n    },\n    {\n      label: 'News',\n      url: '#'\n    },\n    {\n      label: 'Jobs',\n      url: '#'\n    },\n    {\n      label: 'Kontakt',\n      url: '#'\n    }\n  ]}\n/>",
     "args": {
       "logo": {
         "src": "/logo.svg",
@@ -3154,43 +3162,51 @@
       "navItems": [
         {
           "url": "#",
-          "label": "Active Item",
+          "label": "Fahrzeugsuche",
           "active": true
         },
         {
           "url": "#",
-          "label": "Navigation Item"
-        },
-        {
-          "url": "#",
-          "label": "Dropdown",
+          "label": "Marken",
           "items": [
             {
               "url": "#",
-              "label": "Level 2 Item"
+              "label": "Nissan"
             },
             {
               "url": "#",
-              "label": "Active Item",
+              "label": "Kia",
               "active": true
             },
             {
               "url": "#",
-              "label": "An Item with a longer Label"
+              "label": "Maserati"
             },
             {
               "url": "#",
-              "label": "And One last one"
+              "label": "Corvette"
             }
           ]
         },
         {
           "url": "#",
-          "label": "One more Item"
+          "label": "Standorte"
+        },
+        {
+          "url": "#",
+          "label": "Bonusprogramm"
+        },
+        {
+          "url": "#",
+          "label": "News"
+        },
+        {
+          "url": "#",
+          "label": "Jobs"
         },
         {
           "url": "#",
-          "label": "Last Item"
+          "label": "Kontakt"
         }
       ]
     },

package/dist/components/section/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-2a23ef89.js";
+import { SectionProps } from "../../SectionProps-4e3c6fe0.js";
 declare const SectionContextDefault: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const SectionContext: import("react").Context<import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Section: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/section/index.js

@@ -42,7 +42,9 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
         spotlight,
         content?.mode === "slider",
     ]);
-    return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style && style !== "default" && `dsa-section-style--${style}`, transition &&
+    return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style &&
+            style !== "default" &&
+            `dsa-section--style dsa-section--style-${style}`, transition &&
             transition !== "none" &&
             `dsa-section--transition-${transition}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor === "default"
             ? "default"

package/dist/components/section/section.css

@@ -26,14 +26,20 @@
   --dsa-section--background-color_default: var(--ks-background-color-default);
   --dsa-section--background-color_accent: var(--ks-background-color-accent);
   --dsa-section--background-color_bold: var(--ks-background-color-bold);
-  --dsa-section--transition_to-default: linear-gradient(180deg, transparent, var(--ks-background-color-default));
-  --dsa-section--transition_to-accent: linear-gradient(180deg, transparent, var(--ks-background-color-accent));
-  --dsa-section--transition_to-bold: linear-gradient(180deg, transparent, var(--ks-background-color-bold));
-  --dsa-section--transition_to-inverted: linear-gradient(
-    180deg,
-    transparent,
-    var(--ks-background-color-default-inverted)
+  --dsa-section_shine-left--background-image: radial-gradient(
+    80% 150% at 20% 50%,
+    var(--ks-color-fg-inverted),
+    var(--ks-color-bg-inverted-alpha-8)
   );
+  --dsa-section_shine-right--background-image: radial-gradient(
+    80% 150% at 80% 50%,
+    var(--ks-color-fg-inverted),
+    var(--ks-color-bg-inverted-alpha-8)
+  );
+  --dsa-section--transition_to-default: linear-gradient(transparent, var(--ks-background-color-default));
+  --dsa-section--transition_to-accent: linear-gradient(transparent, var(--ks-background-color-accent));
+  --dsa-section--transition_to-bold: linear-gradient(transparent, var(--ks-background-color-bold));
+  --dsa-section--transition_to-inverted: linear-gradient(transparent, var(--ks-background-color-default-inverted));
   --dsa-section__slider-arrow--color: var(--ks-text-color-interface-interactive);
   --dsa-section__slider-arrow--size: 2rem;
   --dsa-section__slider-arrow--padding: 0.5em;
@@ -45,6 +51,18 @@
   --dsa-section__spotlight--blur: 0%;
   --dsa-section__spotlight--color: var(--ks-color-primary-alpha-5);
 }
+.dsa-section[ks-inverted=true] {
+  --dsa-section_shine-left--background-image: radial-gradient(
+    70% 150% at 20% 50%,
+    var(--ks-color-fg-inverted-alpha-8-base),
+    var(--ks-color-bg)
+  );
+  --dsa-section_shine-right--background-image: radial-gradient(
+    70% 150% at 80% 50%,
+    var(--ks-color-fg-inverted-alpha-87-base),
+    var(--ks-color-bg)
+  );
+}
 
 .l-section.dsa-section [ks-inverted],
 .l-section.dsa-section {
@@ -78,11 +96,14 @@
 }
 
 .l-section.dsa-section {
+  --dsa-section--background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
   background-image: var(--dsa-section--background-image);
-  background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
+  background-color: var(--dsa-section--background-color, var(--ks-color-bg));
   position: relative;
 }
 .l-section.dsa-section .l-section__container {
+  position: relative;
+  z-index: 2;
   font: var(--ks-font-copy-m);
 }
 .l-section.dsa-section.l-section--gutter-large {
@@ -95,10 +116,10 @@
   --l-section--gutter: var(--dsa-section--gutter_none);
 }
 .l-section.dsa-section.l-section--accent {
-  background-color: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
+  --dsa-section--background-color: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
 }
 .l-section.dsa-section.l-section--bold {
-  background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
+  --dsa-section--background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
 }
 .l-section.dsa-section.dsa-section--transition-to-accent {
   background-image: var(--dsa-section--transition_to-accent, linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%));
@@ -121,22 +142,49 @@
 .l-section.dsa-section--header-spacing.l-section--space-before-small {
   padding-top: calc(var(--dsa-header--height) + var(--dsa-section--space-small));
 }
-.l-section.dsa-section-style--framed {
+.l-section.dsa-section--style::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+.l-section.dsa-section--style--framed {
   --frame-background-color: var(--ks-background-color-accent);
 }
-.l-section.dsa-section-style--framed .l-section__container--content .l-section__content {
+.l-section.dsa-section--style--framed .l-section__container--content .l-section__content {
   padding: var(--dsa-section--space_default);
   background-color: var(--frame-background-color, var(--ks-background-color-default));
   border-radius: var(--ks-border-radius-surface);
 }
-.l-section.dsa-section-style--framed.l-section--accent, .l-section.dsa-section-style--framed.l-section--bold {
+.l-section.dsa-section--style--framed.l-section--accent, .l-section.dsa-section--style--framed.l-section--bold {
   --frame-background-color: var(--ks-background-color-default);
 }
-.l-section.dsa-section-style--deko {
-  background-image: var(--dsa-section_deko--background-image, radial-gradient(180deg, transparent 0%, var(--ks-background-color-default) 100%));
+.l-section.dsa-section--style-shine-left::before {
+  background-image: var(--dsa-section_shine-left--background-image, radial-gradient(70% 150% at 20% 50%, var(--ks-color-fg-inverted), var(--ks-color-bg-inverted-alpha-7)));
+}
+.l-section.dsa-section--style-shine-right::before {
+  background-image: var(--dsa-section_shine-right--background-image, radial-gradient(70% 150% at 80% 50%, var(--ks-color-fg-inverted-alpha-8-base), var(--ks-color-bg)));
+}
+.l-section.dsa-section--style-carbon::before {
+  background: radial-gradient(var(--ks-color-fg-inverted-alpha-7) 15%, transparent 16%) 0 0, radial-gradient(var(--ks-color-fg-inverted-alpha-7) 15%, transparent 16%) 8px 8px, radial-gradient(var(--ks-color-fg-alpha-9) 15%, transparent 20%) 0 1px, radial-gradient(var(--ks-color-fg-alpha-9) 15%, transparent 20%) 8px 9px;
+  background-size: 16px 16px;
+  z-index: 1;
+}
+.l-section.dsa-section--style-carbon::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  background: linear-gradient(180deg, var(--ks-color-fg-alpha-9) 0%, transparent 5px), linear-gradient(180deg, var(--ks-color-fg-alpha-9) 0%, transparent 30px), linear-gradient(180deg, transparent calc(100% - 30px), var(--ks-color-fg-alpha-9) 100%), linear-gradient(180deg, transparent calc(100% - 5px), var(--ks-color-fg-alpha-9) 100%), radial-gradient(100% 100% at 50% 50%, var(--ks-color-bg), var(--ks-color-bg-to-fg-1));
 }
-.l-section.dsa-section-style--inset {
-  background-image: linear-gradient(180deg, var(--ks-color-fg-alpha-9) 0%, transparent 5px), linear-gradient(180deg, var(--ks-color-fg-alpha-9) 0%, transparent 30px), linear-gradient(180deg, transparent calc(100% - 30px), var(--ks-color-fg-alpha-9) 100%), linear-gradient(180deg, transparent calc(100% - 5px), var(--ks-color-fg-alpha-9) 100%), radial-gradient(100% 100% at 50% 50%, var(--ks-color-bg), var(--ks-color-bg-to-fg-1));
+.l-section.dsa-section--style-stripe::before {
+  background-image: linear-gradient(45deg, transparent 5%, var(--ks-color-bg-inverted-alpha-8) 5%, var(--ks-color-bg-inverted-alpha-8) 18%, transparent 18%), linear-gradient(180deg, transparent calc(100% - 30px), var(--ks-color-fg-alpha-9) 100%), linear-gradient(180deg, transparent calc(100% - 5px), var(--ks-color-fg-alpha-9) 100%);
 }
 .l-section.dsa-section--spotlight {
   position: relative;

package/dist/components/section/section.schema.dereffed.json

@@ -25,7 +25,10 @@
       "enum": [
         "default",
         "framed",
-        "inset"
+        "shine-left",
+        "shine-right",
+        "carbon",
+        "stripe"
       ],
       "default": "default"
     },

package/dist/components/section/section.schema.json

@@ -16,7 +16,14 @@
       "type": "string",
       "title": "Style",
       "description": "Style of background",
-      "enum": ["default", "framed", "inset"],
+      "enum": [
+        "default",
+        "framed",
+        "shine-left",
+        "shine-right",
+        "carbon",
+        "stripe"
+      ],
       "default": "default"
     },
     "backgroundColor": {

package/dist/components/settings/settings.schema.dereffed.json

@@ -132,43 +132,51 @@
           "examples": [
             [
               {
-                "label": "Active Item",
+                "label": "Fahrzeugsuche",
                 "url": "#",
                 "active": true
               },
               {
-                "label": "Navigation Item",
-                "url": "#"
-              },
-              {
-                "label": "Dropdown",
+                "label": "Marken",
                 "url": "#",
                 "items": [
                   {
-                    "label": "Level 2 Item",
+                    "label": "Nissan",
                     "url": "#"
                   },
                   {
-                    "label": "Active Item",
+                    "label": "Kia",
                     "active": true,
                     "url": "#"
                   },
                   {
-                    "label": "An Item with a longer Label",
+                    "label": "Maserati",
                     "url": "#"
                   },
                   {
-                    "label": "And One last one",
+                    "label": "Corvette",
                     "url": "#"
                   }
                 ]
               },
               {
-                "label": "One more Item",
+                "label": "Standorte",
+                "url": "#"
+              },
+              {
+                "label": "Bonusprogramm",
+                "url": "#"
+              },
+              {
+                "label": "News",
+                "url": "#"
+              },
+              {
+                "label": "Jobs",
                 "url": "#"
               },
               {
-                "label": "Last Item",
+                "label": "Kontakt",
                 "url": "#"
               }
             ]
@@ -286,43 +294,51 @@
           "examples": [
             [
               {
-                "label": "Active Item",
+                "label": "Fahrzeugsuche",
                 "url": "#",
                 "active": true
               },
               {
-                "label": "Navigation Item",
-                "url": "#"
-              },
-              {
-                "label": "Dropdown",
+                "label": "Marken",
                 "url": "#",
                 "items": [
                   {
-                    "label": "Level 2 Item",
+                    "label": "Nissan",
                     "url": "#"
                   },
                   {
-                    "label": "Active Item",
+                    "label": "Kia",
                     "active": true,
                     "url": "#"
                   },
                   {
-                    "label": "An Item with a longer Label",
+                    "label": "Maserati",
                     "url": "#"
                   },
                   {
-                    "label": "And One last one",
+                    "label": "Corvette",
                     "url": "#"
                   }
                 ]
               },
               {
-                "label": "One more Item",
+                "label": "Standorte",
+                "url": "#"
+              },
+              {
+                "label": "Bonusprogramm",
+                "url": "#"
+              },
+              {
+                "label": "News",
+                "url": "#"
+              },
+              {
+                "label": "Jobs",
                 "url": "#"
               },
               {
-                "label": "Last Item",
+                "label": "Kontakt",
                 "url": "#"
               }
             ]

package/dist/components/slider/slider.css

@@ -2,8 +2,8 @@
   --dsa-slider__arrow--background-color: var(--ks-color-fg-alpha-4);
   --dsa-slider__arrow--background-color_hover: var(--ks-color-fg-alpha-3);
   --dsa-slider__arrow--background-color_active: var(--ks-color-fg-alpha-3);
-  --dsa-slider__bullet--border-color: var(--ks-border-color-interface-interactive);
-  --dsa-slider__bullet--border-color_hover: var(--ks-border-color-interface-interactive);
+  --dsa-slider__bullet--border-color: var(--ks-border-color-default);
+  --dsa-slider__bullet--border-color_hover: var(--ks-border-color-default);
   --dsa-slider__bullet--border-color_active: var(--ks-color-primary);
   --dsa-slider__bullet--size: 1rem;
   --dsa-slider__bullet--background-color: transparent;

package/dist/components/split-even/split-even.css

@@ -9,7 +9,7 @@
   --dsa-split-even__content--gutter_small: var(--ks-spacing-stack-s);
   --dsa-split-even__content--gutter_default: var(--ks-spacing-stack-m);
   --dsa-split-even__content--gutter_large: var(--ks-spacing-stack-xl);
-  --dsa-split-even__content--flex-basis_narrow: var(--dsa-tile--width_medium);
+  --dsa-split-even__content--flex-basis_narrow: var(--dsa-tile--width_small);
   --dsa-split-even__content--flex-basis_medium: var(--dsa-tile--width_large);
   --dsa-split-even__content--flex-basis_wide: var(--dsa-tile--width_largest);
 }

package/dist/components/stats/stats.css

@@ -1,15 +1,15 @@
 .dsa-stats {
   --dsa-stats--gap-vertical: var(--ks-spacing-stack-l);
   --dsa-stats--gap-horizontal: var(--ks-spacing-inline-m);
-  --dsa-stats__item--gap: var(--ks-spacing-stack-xs);
-  --dsa-stats__icon--color: var(--ks-text-color-primary);
+  --dsa-stats__item--gap: var(--ks-spacing-stack-s);
+  --dsa-stats__icon--color: var(--ks-text-color-display);
   --dsa-stats__icon--size: 5em;
-  --dsa-stats__number--font: var(--ks-font-display-xl);
+  --dsa-stats__number--font: var(--ks-font-display-xxl);
   --dsa-stats__number--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-stats__number--background: var(--dsa-typo--highlight);
   --dsa-stats__topic__font: var(--ks-font-interface-xl);
   --dsa-stats__topic--color: var(--ks-text-color-display);
-  --dsa-stats__copy--font: var(--ks-font-copy-s);
+  --dsa-stats__copy--font: var(--ks-font-copy-m);
   --dsa-stats__copy--color: var(--ks-text-color-default);
 }
 

package/dist/components/teaser-card/index.js

@@ -22,7 +22,7 @@ const TeaserCardContextDefault = forwardRef(({ headline, text, button, url, imag
                 renderTopic: () => jsx(Fragment, { children: compiler(headline) }), link: {
                     hidden: button?.hidden,
                     label: button.label,
-                    variant: "secondary",
+                    variant: "primary",
                     url: url,
                     icon: button?.chevron ? "chevron-right" : undefined,
                 }, image: image, ref: ref })] }) })));

package/dist/components/teaser-card/teaser-card.css

@@ -9,31 +9,33 @@
   --dsa-teaser-card--border-color: var(--ks-border-color-card-interactive);
   --dsa-teaser-card--border-color_hover: var(--ks-border-color-card-interactive-hover);
   --dsa-teaser-card--border-radius: var(--ks-border-radius-card);
-  --dsa-teaser-card--shadow: none;
-  --dsa-teaser-card--shadow_hover: none;
-  --dsa-teaser-card__image--transform_hover: scale(1.05);
+  --dsa-teaser-card--shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 2px 4px rgba(0, 0, 0, 0.02),
+    0px 4px 9px rgba(0, 0, 0, 0.03), 0px 6px 15px rgba(0, 0, 0, 0.04), 0px 10px 24px rgba(0, 0, 0, 0.05);
+  --dsa-teaser-card--shadow_hover: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 2px 4px rgba(0, 0, 0, 0.02),
+    0px 4px 9px rgba(0, 0, 0, 0.03), 0px 6px 15px rgba(0, 0, 0, 0.04), 0px 10px 24px rgba(0, 0, 0, 0.05);
+  --dsa-teaser-card__image--transform_hover: scale(1.1);
   --dsa-teaser-card__image--transition: transform var(--ks-transition-fade);
   --dsa-teaser-card__body--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-m);
   --dsa-teaser-card__topic--color: var(--dsa-topic--color);
-  --dsa-teaser-card__label--font: var(--ks-font-interface-s);
+  --dsa-teaser-card__label--font: var(--ks-font-interface-xs);
   --dsa-teaser-card__label--font-weight: var(--ks-font-weight-semi-bold);
-  --dsa-teaser-card__label--color: var(--ks-text-color-primary);
-  --dsa-teaser-card__label--background-color: var(--ks-background-color-bold);
+  --dsa-teaser-card__label--color: var(--dsa-text-color-on-primary);
+  --dsa-teaser-card__label--background-color: var(--ks-background-color-primary);
   --dsa-teaser-card__label--padding: 0.5em 1em;
   --dsa-teaser-card__label--border-radius: var(--ks-border-radius-pill);
-  --dsa-teaser-card__label--border: 1px solid var(--ks-border-color-interface);
+  --dsa-teaser-card__label--border: 0;
   --dsa-teaser-card__button--font: var(--ks-font-interface-m);
-  --dsa-teaser-card--padding: var(--ks-spacing-inset-stretch-m);
+  --dsa-teaser-card--padding: var(--ks-spacing-inset-m);
   --dsa-teaser-card__topic--font: var(--ks-font-display-m);
   --dsa-teaser-card__topic--font-weight: var(--dsa-topic--font-weight);
   --dsa-teaser-card__copy--font: var(--ks-font-copy-s);
   --dsa-teaser-card__copy--color: var(--ks-text-color-default);
-  --dsa-teaser-card__copy--margin-top: 0.75em;
+  --dsa-teaser-card__copy--margin-top: 0.85em;
   --dsa-teaser-card__button--font: var(--ks-font-interface-s);
 }
 @container teaser-card (min-width: 400px) {
   .dsa-teaser-card {
-    --dsa-teaser-card--padding: var(--ks-spacing-inset-stretch-l);
+    --dsa-teaser-card--padding: var(--ks-spacing-inset-l);
     --dsa-teaser-card__topic--font: var(--ks-font-display-l);
     --dsa-teaser-card__copy--font: var(--ks-font-copy-m);
     --dsa-teaser-card__button--font: var(--ks-font-interface-m);
@@ -41,16 +43,14 @@
 }
 @media (min-width: 48em) {
   .dsa-teaser-card {
-    --dsa-teaser-card__topic--font: var(--ks-font-display-s);
-    --dsa-teaser-card__copy--font: var(--ks-font-copy-xs);
+    --dsa-teaser-card__topic--font: var(--ks-font-display-m);
+    --dsa-teaser-card__copy--font: var(--ks-font-copy-s);
     --dsa-teaser-card--padding: var(--ks-spacing-inset-m);
     --dsa-teaser-card__button--font: var(--ks-font-interface-s);
   }
-  @container teaser-card (min-width: 300px) {
+  @container teaser-card (min-width: 400px) {
     .dsa-teaser-card {
-      --dsa-teaser-card__topic--font: var(--ks-font-display-m);
       --dsa-teaser-card__copy--font: var(--ks-font-copy-m);
-      --dsa-teaser-card--padding: var(--ks-spacing-inset-stretch-l);
       --dsa-teaser-card__button--font: var(--ks-font-interface-m);
     }
   }
@@ -126,13 +126,12 @@
 .dsa-teaser-card .dsa-teaser-card__label {
   position: absolute;
   z-index: 1;
-  top: 0;
-  right: 0;
+  top: var(--ks-spacing-inset-xs);
+  right: var(--ks-spacing-inset-xs);
   border-radius: var(--dsa-teaser-card__label--border-radius);
   border: var(--dsa-teaser-card__label--border, 0);
   pointer-events: initial;
   padding: var(--dsa-teaser-card__label--padding);
-  transform: translate(0.5em, -50%);
   font: var(--dsa-teaser-card__label--font);
   text-align: center;
   font-weight: var(--dsa-teaser-card__label--font-weight);