@marioschmidt/design-system-components 1.4.2 → 1.4.4

package/dist/www/css/bundles/bild.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.4.2
+ * BILD Design System Tokens v1.4.4
  * Generated by Style Dictionary v5.1.4
  *
  * Brand: Bild | Bundle: Full Bundle (Primitives + Theme + Tokens + Components)
@@ -738,102 +738,138 @@
 
 /* Effects - Light */
 /* ============================================
-   DROPSHADOWSOFT
+   CSS CUSTOM PROPERTIES
+   ============================================ */
+
+[data-color-brand="bild"][data-theme="light"],
+:host([data-color-brand="bild"][data-theme="light"]) {
+  /* dropshadowsoft */
+  --shadow-soft-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
+  --shadow-soft-md: 0px 2px 16px 0px rgba(0, 0, 0, 0.03), 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
+  --shadow-soft-lg: 0px 8px 24px 0px rgba(0, 0, 0, 0.03), 0px 8px 16px 0px rgba(0, 0, 0, 0.07);
+  --shadow-soft-xl: 0px 0px 64px 0px rgba(0, 0, 0, 0.05), 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
+  /* dropshadowhard */
+  --shadow-hard-sm: 0px 1px 2px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  --shadow-hard-md: 0px 4px 8px 0px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
+  --shadow-hard-lg: 0px 2px 3px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  --shadow-hard-xl: 0px 4px 4px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+}
+
+/* ============================================
+   DROPSHADOWSOFT (Classes)
    ============================================ */
 
 [data-color-brand="bild"][data-theme="light"] .shadow-soft-sm,
 :host([data-color-brand="bild"][data-theme="light"]) .shadow-soft-sm {
-  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow-soft-sm);
 }
 
 [data-color-brand="bild"][data-theme="light"] .shadow-soft-md,
 :host([data-color-brand="bild"][data-theme="light"]) .shadow-soft-md {
-  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.03), 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
+  box-shadow: var(--shadow-soft-md);
 }
 
 [data-color-brand="bild"][data-theme="light"] .shadow-soft-lg,
 :host([data-color-brand="bild"][data-theme="light"]) .shadow-soft-lg {
-  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.03), 0px 8px 16px 0px rgba(0, 0, 0, 0.07);
+  box-shadow: var(--shadow-soft-lg);
 }
 
 [data-color-brand="bild"][data-theme="light"] .shadow-soft-xl,
 :host([data-color-brand="bild"][data-theme="light"]) .shadow-soft-xl {
-  box-shadow: 0px 0px 64px 0px rgba(0, 0, 0, 0.05), 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-soft-xl);
 }
 
 
 /* ============================================
-   DROPSHADOWHARD
+   DROPSHADOWHARD (Classes)
    ============================================ */
 
 [data-color-brand="bild"][data-theme="light"] .shadow-hard-sm,
 :host([data-color-brand="bild"][data-theme="light"]) .shadow-hard-sm {
-  box-shadow: 0px 1px 2px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  box-shadow: var(--shadow-hard-sm);
 }
 
 [data-color-brand="bild"][data-theme="light"] .shadow-hard-md,
 :host([data-color-brand="bild"][data-theme="light"]) .shadow-hard-md {
-  box-shadow: 0px 4px 8px 0px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
+  box-shadow: var(--shadow-hard-md);
 }
 
 [data-color-brand="bild"][data-theme="light"] .shadow-hard-lg,
 :host([data-color-brand="bild"][data-theme="light"]) .shadow-hard-lg {
-  box-shadow: 0px 2px 3px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  box-shadow: var(--shadow-hard-lg);
 }
 
 [data-color-brand="bild"][data-theme="light"] .shadow-hard-xl,
 :host([data-color-brand="bild"][data-theme="light"]) .shadow-hard-xl {
-  box-shadow: 0px 4px 4px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  box-shadow: var(--shadow-hard-xl);
 }
 
 /* Effects - Dark */
 /* ============================================
-   DROPSHADOWSOFT
+   CSS CUSTOM PROPERTIES
+   ============================================ */
+
+[data-color-brand="bild"][data-theme="dark"],
+:host([data-color-brand="bild"][data-theme="dark"]) {
+  /* dropshadowsoft */
+  --shadow-soft-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
+  --shadow-soft-md: 0px 2px 16px 0px rgba(0, 0, 0, 0.03), 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
+  --shadow-soft-lg: 0px 8px 24px 0px rgba(0, 0, 0, 0.03), 0px 8px 16px 0px rgba(0, 0, 0, 0.07);
+  --shadow-soft-xl: 0px 0px 64px 0px rgba(0, 0, 0, 0.05), 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
+  /* dropshadowhard */
+  --shadow-hard-sm: 0px 1px 2px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  --shadow-hard-md: 0px 4px 8px 0px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
+  --shadow-hard-lg: 0px 2px 3px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  --shadow-hard-xl: 0px 4px 4px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+}
+
+/* ============================================
+   DROPSHADOWSOFT (Classes)
    ============================================ */
 
 [data-color-brand="bild"][data-theme="dark"] .shadow-soft-sm,
 :host([data-color-brand="bild"][data-theme="dark"]) .shadow-soft-sm {
-  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow-soft-sm);
 }
 
 [data-color-brand="bild"][data-theme="dark"] .shadow-soft-md,
 :host([data-color-brand="bild"][data-theme="dark"]) .shadow-soft-md {
-  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.03), 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
+  box-shadow: var(--shadow-soft-md);
 }
 
 [data-color-brand="bild"][data-theme="dark"] .shadow-soft-lg,
 :host([data-color-brand="bild"][data-theme="dark"]) .shadow-soft-lg {
-  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.03), 0px 8px 16px 0px rgba(0, 0, 0, 0.07);
+  box-shadow: var(--shadow-soft-lg);
 }
 
 [data-color-brand="bild"][data-theme="dark"] .shadow-soft-xl,
 :host([data-color-brand="bild"][data-theme="dark"]) .shadow-soft-xl {
-  box-shadow: 0px 0px 64px 0px rgba(0, 0, 0, 0.05), 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-soft-xl);
 }
 
 
 /* ============================================
-   DROPSHADOWHARD
+   DROPSHADOWHARD (Classes)
    ============================================ */
 
 [data-color-brand="bild"][data-theme="dark"] .shadow-hard-sm,
 :host([data-color-brand="bild"][data-theme="dark"]) .shadow-hard-sm {
-  box-shadow: 0px 1px 2px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  box-shadow: var(--shadow-hard-sm);
 }
 
 [data-color-brand="bild"][data-theme="dark"] .shadow-hard-md,
 :host([data-color-brand="bild"][data-theme="dark"]) .shadow-hard-md {
-  box-shadow: 0px 4px 8px 0px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
+  box-shadow: var(--shadow-hard-md);
 }
 
 [data-color-brand="bild"][data-theme="dark"] .shadow-hard-lg,
 :host([data-color-brand="bild"][data-theme="dark"]) .shadow-hard-lg {
-  box-shadow: 0px 2px 3px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  box-shadow: var(--shadow-hard-lg);
 }
 
 [data-color-brand="bild"][data-theme="dark"] .shadow-hard-xl,
 :host([data-color-brand="bild"][data-theme="dark"]) .shadow-hard-xl {
-  box-shadow: 0px 4px 4px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  box-shadow: var(--shadow-hard-xl);
 }
 
 
@@ -1039,7 +1075,7 @@
 
 @media (min-width: 390px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --canvas-min-width-size: 390px;
     --canvas-max-width-size: 599px;
     --canvas-height-size-web: 844px;
@@ -1057,7 +1093,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --grid-space-resp-lg: var(--space-4-x, 32px);
     --grid-space-resp-xl: var(--space-8-x, 64px);
     --layout-guide-grid-columns: 8;
@@ -1141,7 +1177,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --grid-space-resp-base: var(--space-2-x, 16px);
     --grid-space-resp-sm: var(--space-1-x, 8px);
     --page-inline-space: var(--space-2-x, 16px);
@@ -1738,6 +1774,22 @@
 
 /* === OTHER TOKENS === */
 
+[data-color-brand="bild"],
+:host([data-color-brand="bild"]) {
+  --alert-shadow-down: 0px 6px 10px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
+  --alert-shadow-up: 0px -2px 10px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
+}
+
+[data-color-brand="bild"] .alert-shadow-down,
+:host([data-color-brand="bild"]) .alert-shadow-down {
+  box-shadow: var(--alert-shadow-down);
+}
+
+[data-color-brand="bild"] .alert-shadow-up,
+:host([data-color-brand="bild"]) .alert-shadow-up {
+  box-shadow: var(--alert-shadow-up);
+}
+
 /* === TYPOGRAPHY TOKENS === */
 
 [data-content-brand="bild"] .article-kicker,
@@ -1806,7 +1858,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --aricle-mobile-1-col-grid-image-margin-space: var(--space-9-x, 72px);
     --article-image-landscape-inline-space: var(--space-1-p-5-x, 12px);
     --article-content-inline-space: var(--space-9-x, 72px);
@@ -1821,7 +1873,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --article-headings-stack-space: var(--space-2-x, 16px);
     --article-image-landscape-inline-space: var(--space-2-x, 16px);
     --article-content-inline-space: 162px;
@@ -1852,7 +1904,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --audio-player-font-size: 18px;
   }
 }
@@ -1930,7 +1982,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --avatar-author-page-size: var(--size-16-p-25, 130px);
     --avatar-lane-gap-space: var(--space-3-x, 24px);
   }
@@ -1938,7 +1990,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --avatar-label-font-size: 18px;
     --avatar-label-line-height: 23px;
   }
@@ -2022,7 +2074,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --breadcrumb-font-size: 12px;
     --breadcrumb-inline-space: 0px;
     --breadcrumb-line-height: 12px;
@@ -2114,7 +2166,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --breaking-news-badge-upper-title-font-size: 17px;
     --breaking-news-badge-lower-title-font-size: 30px;
     --breaking-news-badge-upper-title-line-height: 12px;
@@ -2125,7 +2177,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --breaking-news-badge-inline-space: var(--size-3-p-25-x, 26px);
   }
 }
@@ -2215,7 +2267,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --partner-link-button-label-font-size: 18px;
   }
 }
@@ -2291,7 +2343,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --search-result-card-image-width-size: 260px;
   }
 }
@@ -2311,7 +2363,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --gallery-teaser-title-bottom-space: var(--space-4-p-5-x, 36px);
     --gallery-teaser-app-gap-space: var(--gap-space-const-sm);
     --app-epaper-carousel-item-focus-width: 240px;
@@ -2323,7 +2375,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --standard-teaser-gallery-teaser-width-web: 300px;
     --standard-teaser-gallery-teaser-width-app: 464px;
   }
@@ -2365,7 +2417,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --chip-font-size: var(--size-2-p-25-x, 18px);
   }
 }
@@ -2563,7 +2615,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --info-element-teaser-image-height-size: 83px;
     --info-element-teaser-image-width-size: var(--size-18-p-5-x, 148px);
   }
@@ -2571,7 +2623,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --info-element-teaser-badge-height-size: var(--size-3-x, 24px);
     --info-element-teaser-image-height-size: 133px;
     --info-element-teaser-image-width-size: 236px;
@@ -2651,7 +2703,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --hey-input-container-inline-space: var(--inline-space-const-lg);
     --input-field-label-line-height: var(--density-input-field-label-font-size);
   }
@@ -2756,7 +2808,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --live-ticker-headlines-font-size: 32px;
     --live-ticker-time-stamp-font-size: 16px;
     --live-ticker-app-card-height-size: 128px;
@@ -2766,7 +2818,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --live-ticker-slider-item-width-max-size: 537px;
   }
 }
@@ -2861,7 +2913,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --vid-player-timecode-font-size: 16px;
     --vid-player-timecode-container-min-width-size: 58px;
   }
@@ -2869,7 +2921,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --vid-player-bottom-bar-gap-space: var(--gap-space-const-lg);
     --vid-player-timecode-font-size: 18px;
     --vid-player-progress-bar-container-height-size: 42px;
@@ -2974,7 +3026,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --app-topbar-title-font-size: 14px;
     --app-topbar-stage-title-height: 17px;
     --i-osapp-top-bar-height-size: 48px;
@@ -2985,7 +3037,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --menu-logo-default-size: var(--size-18-p-5-x, 148px);
     --menu-special-navi-item-height-size: 56px;
     --menu-utility-links-container-height-size: var(--size-12-p-5-x, 100px);
@@ -3008,6 +3060,22 @@
   --app-top-bar-icon-color: var(--icon-color-secondary);
 }
 
+[data-color-brand="bild"],
+:host([data-color-brand="bild"]) {
+  --menu-shadow: 0px 8px 10px -8px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  --hey-input-shadow: 0px 8px 10px -8px var(--color-neutral-0-a-0, rgba(0, 0, 0, 0));
+}
+
+[data-color-brand="bild"] .menu-shadow,
+:host([data-color-brand="bild"]) .menu-shadow {
+  box-shadow: var(--menu-shadow);
+}
+
+[data-color-brand="bild"] .hey-input-shadow,
+:host([data-color-brand="bild"]) .hey-input-shadow {
+  box-shadow: var(--hey-input-shadow);
+}
+
 /* === OTHER TOKENS === */
 
 [data-color-brand="bild"],
@@ -3068,14 +3136,14 @@
 
 @media (min-width: 390px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --news-ticker-time-font-family: var(--label-font-family);
   }
 }
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --news-ticker-titles-inline-space: var(--space-3-x, 24px);
     --news-ticker-badges-inline-space: var(--space-1-p-5-x, 12px);
     --news-ticker-time-kicker-stack-space: var(--space-0-p-75-x, 6px);
@@ -3089,7 +3157,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --news-ticker-time-font-size: 18px;
     --news-ticker-time-line-height: 23.4px;
     --news-ticker-titles-inline-space: 30px;
@@ -3148,7 +3216,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --gallery-pagination-container-web-inline-space: var(--inline-space-const-md);
     --gallery-pagination-container-stack-space: var(--stack-space-const-lg);
   }
@@ -3232,7 +3300,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --quote-quotation-marks-font-size: var(--size-4-x, 32px);
     --quote-content-gap-space: var(--gap-space-const-3-xl);
   }
@@ -3240,7 +3308,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --quote-container-inline-space: var(--space-3-p-5-x, 28px);
     --quote-quotation-marks-font-size: var(--size-4-p-5-x, 36px);
   }
@@ -3273,7 +3341,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --section-title-height-size: var(--size-5-x, 40px);
     --section-title-arrow-inline-space-active: 8px;
   }
@@ -3305,7 +3373,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --headlines-skeleton-image-placeholder-max-width: var(--size-20-x, 160px);
     --article-skeleton-image-inline-space: var(--space-6-x, 48px);
     --article-skeleton-text-inline-space: var(--space-6-x, 48px);
@@ -3363,7 +3431,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --special-navi-inline-space: var(--space-4-x, 32px);
   }
 }
@@ -3379,7 +3447,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --video-spinner-size: var(--size-10-x, 80px);
     --video-spinner-stroke-size: 4px;
     --video-spinner-size-0-5-x: 40px;
@@ -3458,14 +3526,14 @@
 
 @media (min-width: 390px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --apps-tabs-label-font-size: 12px;
   }
 }
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --android-tabbar-height-size: 74px;
     --tab-label-font-size-line: 16px;
     --apps-tabs-label-font-size: 16px;
@@ -3489,7 +3557,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --table-column-width-size-1-x: var(--size-12-x, 96px);
     --table-column-width-size-2-x: var(--size-22-p-5-x, 180px);
     --table-column-width-size-0-p-5-x: var(--size-6-x, 48px);
@@ -3502,7 +3570,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --table-column-width-size-1-x: var(--size-17-p-5-x, 140px);
     --table-column-width-size-2-x: var(--size-27-p-5-x, 220px);
     --table-column-width-size-0-p-5-x: var(--size-9-x, 72px);
@@ -3614,7 +3682,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --teaser-title-inline-left-space: var(--space-0-x, 0px);
     --teaser-title-bottom-stack-space: var(--space-2-x, 16px);
     --m-qteaser-headline-font-size: var(--headline-3-font-size);
@@ -3635,7 +3703,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --teaser-title-stack-space: var(--space-0-p-75-x, 6px);
     --teaser-badges-height-size-lg: var(--size-const-sm);
     --q-teaser-title-inline-space: var(--space-1-p-5-x, 12px);
@@ -3650,6 +3718,16 @@
   --teaser-hover-opacity: var(--layer-opacity-80);
 }
 
+[data-color-brand="bild"],
+:host([data-color-brand="bild"]) {
+  --teaser-headlines-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.6);
+}
+
+[data-color-brand="bild"] .teaser-headlines-shadow,
+:host([data-color-brand="bild"]) .teaser-headlines-shadow {
+  box-shadow: var(--teaser-headlines-shadow);
+}
+
 /* === TYPOGRAPHY TOKENS === */
 
 [data-content-brand="bild"] .app-toogle-item-label,
@@ -3671,7 +3749,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --app-toggle-item-label-font-size: 16px;
     --app-toggle-item-label-line-height: 16.2px;
   }
@@ -3679,7 +3757,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --app-toggle-item-label-font-size: 18px;
     --app-toggle-item-label-line-height: 18.2px;
   }
@@ -3703,7 +3781,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --video-time-badge-font-size: 18px;
     --video-time-badge-size: var(--size-4-x, 32px);
     --video-red-play-icon-width-size: var(--size-1-p-5-x, 12px);
@@ -3718,7 +3796,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --video-time-badge-size: var(--size-5-x, 40px);
     --video-red-play-icon-width-size: var(--size-1-p-75-x, 14px);
     --video-red-play-icon-height-size: var(--size-2-p-25-x, 18px);