npm - @marioschmidt/design-system-tokens - Versions diffs - 1.0.78 → 1.1.0 - Mend

@marioschmidt/design-system-tokens 1.0.78 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2482) hide show

package/dist/css/bundles/sportbild.css CHANGED Viewed

@@ -1,12 +1,12 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.78
+ * BILD Design System Tokens v1.1.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Sportbild | Bundle: Full Bundle (Primitives + Theme + Tokens + Components)
  *
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
  * Proprietary and confidential. All rights reserved.
  *
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -26,14 +26,21 @@
   /* BILD - red */
   --color-bild-red-50: #DD0000;
-  --color-bild-red-35: #AF0002;
-  --color-bild-red-53: #F52D2D;
+  --color-bild-red-40: #C10000;
+  --color-bild-red-60: #F75849;
+  --color-bild-red-10: #410000;
+  --color-bild-red-90: #FFDADA;
+  --color-bild-red-20: #680000;
+  --color-bild-red-30: #930000;
+  --color-bild-red-80: #FFB2B2;
+  --color-bild-red-95: #FFECEC;
+  --color-bild-red-70: #FF8989;
   /* BILD - purple */
   --color-bild-purple-20: #551937;
   /* BILD - alpha */
-  --alpha-red-50-a-80: rgba(221, 0, 0, 0.8);
+  --color-bild-red-50-a-80: rgba(221, 0, 0, 0.8);
   /* ============================================
@@ -41,55 +48,82 @@
      ============================================ */
   /* Shared - neutral */
-  --color-neutral-15: #232629;
+  --color-neutral-15: #222628;
   --color-neutral-100: #FFFFFF;
-  --color-neutral-85: #CED4DA;
-  --color-neutral-35: #4B525A;
+  --color-neutral-80: #C4C9CF;
+  --color-neutral-30: #40464D;
   --color-neutral-25: #343C41;
   --color-neutral-60: #8C9196;
-  --color-neutral-96: #F2F4F5;
-  --color-neutral-93: #E9ECEF;
-  --color-neutral-73: #AEB4B9;
-  --color-neutral-45: #666B70;
-  --color-neutral-10: #1C1C1C;
-  --color-neutral-20: #2C3138;
+  --color-neutral-95: #F2F4F5;
+  --color-neutral-90: #DDE1E2;
+  --color-neutral-70: #A6ABB0;
+  --color-neutral-40: #565A5F;
+  --color-neutral-10: #191B1C;
+  --color-neutral-20: #2C3133;
   --color-neutral-0: #000000;
+  --color-neutral-50: #6E787C;
   /* Shared - orange */
-  --color-orange-67: #FD8227;
+  --color-orange-70: #FD8227;
+  --color-orange-30: #763301;
+  --color-orange-40: #9E4401;
+  --color-orange-50: #C65502;
+  --color-orange-80: #FEB782;
+  --color-orange-90: #FEDBC1;
+  --color-orange-95: #FFEDDF;
+  --color-orange-60: #EF6702;
+  --color-orange-20: #522301;
+  --color-orange-10: #2F1400;
   /* Shared - green */
   --color-green-70: #00C373;
-  --color-green-63: #00AF67;
-  --color-green-93: #CEF4E4;
+  --color-green-90: #B9EFCD;
   --color-green-40: #006E3E;
-  --color-green-56: #18995C;
+  --color-green-60: #00AF67;
+  --color-green-10: #052013;
+  --color-green-30: #0D5232;
+  --color-green-20: #093822;
+  --color-green-50: #158751;
+  --color-green-95: #DEF7E6;
+  --color-green-80: #76DA9F;
   /* Shared - yellow */
   --color-yellow-80: #FFBF00;
+  --color-yellow-70: #D9A200;
+  --color-yellow-90: #FFE082;
+  --color-yellow-95: #FFF0C2;
+  --color-yellow-10: #241B00;
+  --color-yellow-20: #3D2E00;
+  --color-yellow-30: #594300;
+  --color-yellow-40: #785A00;
+  --color-yellow-50: #967100;
+  --color-yellow-60: #B88A00;
   /* Shared - alpha */
-  --alpha-neutral-85-a-50: rgba(206, 212, 218, 0.5);
-  --alpha-green-93-a-50: rgba(206, 244, 228, 0.5);
-  --color-green-56-a-50: rgba(0, 155, 90, 0.5);
-  --alpha-black-20: rgba(0, 0, 0, 0.2);
-  --alpha-black-10: rgba(0, 0, 0, 0.1);
-  --alpha-black-60: rgba(0, 0, 0, 0.6);
-  --alpha-black-30: rgba(0, 0, 0, 0.3);
-  --alpha-black-70: rgba(0, 0, 0, 0.7);
-  --alpha-white-10: rgba(255, 255, 255, 0.1);
-  --alpha-white-20: rgba(255, 255, 255, 0.2);
-  --alpha-white-30: rgba(255, 255, 255, 0.3);
-  --alpha-white-60: rgba(255, 255, 255, 0.6);
-  --alpha-white-70: rgba(255, 255, 255, 0.7);
-  --alpha-white-35: rgba(255, 255, 255, 0.35);
-  --alpha-black-80: rgba(0, 0, 0, 0.8);
-  --alpha-white-80: rgba(255, 255, 255, 0.8);
-  --alpha-black-35: rgba(0, 0, 0, 0.35);
-  --alpha-black-0: rgba(0, 0, 0, 0);
-  --alpha-black-50: rgba(0, 0, 0, 0.5);
-  --alpha-black-5: rgba(0, 0, 0, 0.05);
-  --alpha-white-0: rgba(255, 255, 255, 0);
+  --color-neutral-0-a-20: rgba(0, 0, 0, 0.2);
+  --color-neutral-0-a-10: rgba(0, 0, 0, 0.1);
+  --color-neutral-0-a-60: rgba(0, 0, 0, 0.6);
+  --color-neutral-0-a-30: rgba(0, 0, 0, 0.3);
+  --color-neutral-0-a-70: rgba(0, 0, 0, 0.7);
+  --color-neutral-100-a-10: rgba(255, 255, 255, 0.1);
+  --color-neutral-100-a-20: rgba(255, 255, 255, 0.2);
+  --color-neutral-100-a-30: rgba(255, 255, 255, 0.3);
+  --color-neutral-100-a-60: rgba(255, 255, 255, 0.6);
+  --color-neutral-100-a-70: rgba(255, 255, 255, 0.7);
+  --color-neutral-100-a-35: rgba(255, 255, 255, 0.35);
+  --color-neutral-0-a-80: rgba(0, 0, 0, 0.8);
+  --color-neutral-100-a-80: rgba(255, 255, 255, 0.8);
+  --color-neutral-0-a-35: rgba(0, 0, 0, 0.35);
+  --color-neutral-0-a-0: rgba(0, 0, 0, 0);
+  --color-neutral-0-a-50: rgba(0, 0, 0, 0.5);
+  --color-neutral-0-a-5: rgba(0, 0, 0, 0.05);
+  --color-neutral-100-a-0: rgba(255, 255, 255, 0);
+  --color-neutral-100-a-95: rgba(255, 255, 255, 0.95);
+  --color-neutral-15-a-0: rgba(34, 38, 40, 0);
+  --color-neutral-95-a-0: rgba(242, 244, 245, 0);
+  --color-neutral-20-a-0: rgba(44, 49, 51, 0);
+  --color-neutral-25-a-0: rgba(52, 60, 65, 0);
+  --color-neutral-90-a-0: rgba(221, 225, 226, 0);
   /* ============================================
@@ -112,19 +146,29 @@
      ============================================ */
   /* SportBILD - blue */
-  --color-spobi-blue-98: #F7F9FD;
-  --color-spobi-blue-81: #BDCADB;
-  --color-spobi-blue-29: #174482;
-  --color-spobi-blue-16: #0A2750;
-  --color-spobi-blue-10: #081828;
-  --color-spobi-blue-38: #315998;
+  --color-spobi-blue-95: #EFF1F5;
+  --color-spobi-blue-80: #C3C9DB;
+  --color-spobi-blue-30: #174482;
+  --color-spobi-blue-20: #0C2F61;
+  --color-spobi-blue-10: #091C2E;
+  --color-spobi-blue-40: #345EA0;
+  --color-spobi-blue-50: #4676C3;
+  --color-spobi-blue-70: #8FACDB;
+  --color-spobi-blue-60: #6A91CF;
+  --color-spobi-blue-90: #D6E1F2;
+  --color-spobi-blue-15: #0B2647;
+  --color-spobi-blue-25: #113B72;
   /* SportBILD - red */
   --color-spobi-red-50: #E52528;
   /* SportBILD - alpha */
-  --color-spobi-blue-16-a-0: rgba(10, 39, 80, 0);
-  --color-spobi-blue-16-a-70: rgba(10, 39, 80, 0.7);
+  --color-spobi-blue-15-a-0: rgba(11, 38, 71, 0);
+  --color-spobi-blue-15-a-70: rgba(11, 38, 71, 0.7);
+  --color-spobi-blue-95-a-0: rgba(239, 241, 245, 0);
+  --color-spobi-blue-20-a-0: rgba(12, 47, 97, 0);
+  --color-spobi-blue-90-a-0: rgba(214, 225, 242, 0);
+  --color-spobi-blue-25-a-0: rgba(17, 59, 114, 0);
   /* ============================================
@@ -218,6 +262,8 @@
   --st-font-weight-thin: 100;
   --st-font-weight-bold-italic: 700;
   --st-font-weight-black-italic: 900;
+  --st-font-weight-st-book-italic: 400;
+  --st-font-weight-light-italic-st: 300;
 }
@@ -278,6 +324,7 @@
   --size-100-x: 800px;
   --size-0-x: 0px;
   --size-0-p-125-x: 1px;
+  --size-5-p-5-x: 44px;
 }
@@ -331,99 +378,163 @@
      SEMANTIC
      ============================================ */
-  /* Semantic - Text */
-  --text-color-accent-constant: var(--color-spobi-blue-29, #174482);
-  --text-color-primary: var(--color-neutral-15, #232629);
-  --text-color-muted: var(--color-neutral-45, #666B70);
-  --text-color-primary-inverse: var(--color-neutral-93, #E9ECEF);
-  --text-color-primary-constant: var(--color-neutral-15, #232629);
-  --text-color-success-constant: var(--color-green-40, #006E3E);
-  --text-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
-  --text-color-secondary: var(--color-neutral-60, #8C9196);
-  --text-color-attention-high: var(--color-bild-red-50, #DD0000);
-  --text-color-accent: var(--color-spobi-blue-29, #174482);
-  --text-color-attention-medium: var(--color-orange-67, #FD8227);
-  --text-color-on-dark-surface: var(--color-neutral-100, #FFFFFF);
-  /* Semantic - Surface */
-  --surface-color-primary: var(--color-neutral-100, #FFFFFF);
-  --surface-color-secondary: var(--color-spobi-blue-98, #F7F9FD);
-  --surface-color-primary-inverse: var(--color-spobi-blue-10, #081828);
-  --surface-color-primary-constant-light: var(--color-neutral-100, #FFFFFF);
-  --surface-color-primary-constant-dark: var(--color-spobi-blue-10, #081828);
-  --surface-color-quartenary: var(--color-neutral-85, #CED4DA);
-  --surface-color-success: var(--color-green-93, #CEF4E4);
-  --surface-color-tertiary: var(--color-spobi-blue-81, #BDCADB);
-  --surface-color-tertiary-gradient-stop: rgba(233, 236, 239, 0);
-  --surface-color-tertiary-inverse: var(--color-spobi-blue-29, #174482);
-  --surface-color-primary-gradient-stop: rgba(255, 255, 255, 0);
-  --surface-color-secondary-gradient-stop: rgba(242, 244, 245, 0);
-  --surface-color-quartenary-inverse: var(--color-neutral-35, #4B525A);
-  /* Semantic - Heading */
-  --kicker-text-color-on-surface: var(--color-neutral-60, #8C9196);
-  --headline-color-primary: var(--color-spobi-blue-16, #0A2750);
-  --headline-color-white-const: var(--color-neutral-100, #FFFFFF);
-  --kicker-text-color-on-red: var(--color-neutral-100, #FFFFFF);
-  --kicker-text-color-on-dark-bg: var(--alpha-white-80, rgba(255, 255, 255, 0.8));
-  --kicker-text-color-on-bright-bg: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
-  /* Semantic - State */
-  --color-secondary-active: var(--color-neutral-15, #232629);
-  --color-primary-active: var(--color-spobi-blue-29, #174482);
-  --color-secondary-disabled: var(--color-neutral-93, #E9ECEF);
-  --color-primary-disabled: var(--color-neutral-96, #F2F4F5);
-  --color-secondary-active-inverse: var(--color-neutral-96, #F2F4F5);
-  --color-tertiary-active: var(--color-green-70, #00C373);
-  --color-tertiary-disabled: var(--color-neutral-60, #8C9196);
-  /* Semantic - Border */
-  --border-color-medium-contrast: var(--color-neutral-85, #CED4DA);
-  --border-color-low-contrast: var(--color-neutral-93, #E9ECEF);
-  --border-color-high-contrast: var(--color-neutral-15, #232629);
-  --border-color-low-contrast-constant: var(--color-neutral-93, #E9ECEF);
-  --border-color-success: var(--color-green-70, #00C373);
-  --border-color-warning: var(--color-bild-red-50, #DD0000);
-  --border-color-primary-disabled: var(--color-neutral-96, #F2F4F5);
-  --border-color-secondary-disabled: var(--color-neutral-93, #E9ECEF);
-  /* Semantic - Core */
-  --core-color-primary: var(--color-spobi-blue-16, #0A2750);
-  --core-color-secondary: var(--color-neutral-100, #FFFFFF);
-  --core-color-tertiary: var(--color-spobi-blue-10, #081828);
-  --core-color-secondary-constant: var(--color-neutral-100, #FFFFFF);
-  --core-color-tertiary-constant: var(--color-spobi-blue-10, #081828);
-  /* Semantic - Icon */
-  --icon-color-primary: var(--color-neutral-35, #4B525A);
-  --icon-color-inverse: var(--color-neutral-85, #CED4DA);
-  --icon-color-secondary-constant: var(--color-neutral-60, #8C9196);
-  --icon-color-constant-on-dark: var(--color-neutral-96, #F2F4F5);
-  --icon-color-primary-constant: var(--color-neutral-35, #4B525A);
-  --icon-color-success: var(--color-green-70, #00C373);
-  /* Semantic - Label */
-  --label-color-primary: var(--color-neutral-15, #232629);
-  --label-color-secondary: var(--color-neutral-35, #4B525A);
-  --label-color-disabled: var(--color-neutral-85, #CED4DA);
-  --label-color-primary-constant: var(--color-neutral-15, #232629);
-  --label-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
-  --label-color-tertiary: var(--color-neutral-60, #8C9196);
-  --label-color-primary-inverse: var(--color-neutral-93, #E9ECEF);
-  /* Semantic - Attention */
-  --attention-color-high: var(--color-bild-red-50, #DD0000);
-  --accent-color-primary: var(--color-spobi-blue-29, #174482);
-  --attention-color-medium: var(--color-orange-67, #FD8227);
-  --attention-color-low: var(--color-yellow-80, #FFBF00);
-  --accent-color-primary-constant: var(--color-spobi-blue-29, #174482);
-  --attention-color-success-primary: var(--color-green-70, #00C373);
-  --attention-color-extra-low: var(--color-neutral-100, #FFFFFF);
-  --attention-color-success-secondary: var(--color-green-40, #006E3E);
-  /* Semantic - Overlay */
-  --overlay-scrim-black: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
-  --overlay-scrim-white: var(--alpha-white-70, rgba(255, 255, 255, 0.7));
+  /* Semantic - Text - Brand */
+  --text-color-brand: var(--color-spobi-blue-30, #174482);
+  --text-color-brand-light-only: var(--color-spobi-blue-30, #174482);
+  /* Semantic - Text - Standard */
+  --text-color-primary: var(--color-neutral-15, #222628);
+  --text-color-secondary: var(--color-neutral-40, #565A5F);
+  --text-color-tertiary: var(--color-neutral-50, #6E787C);
+  /* Semantic - Text - Heading */
+  --kicker-text-color: var(--color-spobi-blue-60, #6A91CF);
+  --headline-text-color: var(--color-spobi-blue-20, #0C2F61);
+  /* Semantic - Text - OnSolid */
+  --text-color-on-image: var(--color-neutral-100, #FFFFFF);
+  --text-color-secondary-on-dark: var(--color-neutral-90, #DDE1E2);
+  --text-color-primary-on-light: var(--color-neutral-15, #222628);
+  --kicker-text-color-on-dark: var(--color-neutral-100-a-80, rgba(255, 255, 255, 0.8));
+  --kicker-text-color-on-light: var(--color-neutral-0-a-70, rgba(0, 0, 0, 0.7));
+  --text-color-primary-on-dark: var(--color-neutral-100, #FFFFFF);
+  /* Semantic - Text - Interactive */
+  --text-color-idle: var(--color-spobi-blue-40, #345EA0);
+  --text-color-disabled: var(--color-spobi-blue-70, #8FACDB);
+  --text-color-hover: var(--color-spobi-blue-15, #0B2647);
+  --text-color-active: var(--color-spobi-blue-15, #0B2647);
+  /* Semantic - Text - Inverse */
+  --text-color-primary-inverse: var(--color-spobi-blue-90, #D6E1F2);
+  --text-color-secondary-inverse: var(--color-spobi-blue-70, #8FACDB);
+  --text-color-inverse-high-contrast: var(--color-neutral-100, #FFFFFF);
+  /* Semantic - Text - Feedback */
+  --text-color-success: var(--color-green-40, #006E3E);
+  --text-color-error: var(--color-bild-red-40, #C10000);
+  --text-color-warning: var(--color-orange-40, #9E4401);
+  /* Semantic - Background - Standard */
+  --bg-color-primary: var(--color-neutral-100, #FFFFFF);
+  --bg-color-disabled: var(--color-spobi-blue-95, #EFF1F5);
+  --bg-color-secondary: var(--color-spobi-blue-95, #EFF1F5);
+  --bg-color-primary-const-dark: var(--color-spobi-blue-15, #0B2647);
+  --bg-color-quaternary: var(--color-spobi-blue-80, #C3C9DB);
+  --bg-color-tertiary: var(--color-spobi-blue-90, #D6E1F2);
+  --bg-color-primary-const-light: var(--color-neutral-100, #FFFFFF);
+  --bg-color-quintenary: var(--color-spobi-blue-60, #6A91CF);
+  /* Semantic - Background - Brand */
+  --bg-color-brand-light-only: var(--color-spobi-blue-30, #174482);
+  --bg-color-brand-solid: var(--color-spobi-blue-30, #174482);
+  --bg-color-brand-solid-hover: var(--color-spobi-blue-20, #0C2F61);
+  --bg-color-brand-solid-active: var(--color-spobi-blue-10, #091C2E);
+  --bg-color-brand-tint: var(--color-spobi-blue-90, #D6E1F2);
+  --bg-color-brand-tint-hover: var(--color-spobi-blue-80, #C3C9DB);
+  /* Semantic - Background - Inverse */
+  --bg-color-primary-inverse: var(--color-spobi-blue-15, #0B2647);
+  --bg-color-tertiary-inverse: var(--color-spobi-blue-25, #113B72);
+  --bg-color-quaternary-inverse: var(--color-spobi-blue-30, #174482);
+  --bg-color-secondary-inverse: var(--color-spobi-blue-20, #0C2F61);
+  --bg-color-quintenary-inverse: var(--color-spobi-blue-60, #6A91CF);
+  /* Semantic - Background - Success */
+  --bg-color-success-tint: var(--color-green-95, #DEF7E6);
+  --bg-color-success-solid: var(--color-green-50, #158751);
+  --bg-color-success-solid-hover: var(--color-green-40, #006E3E);
+  --bg-color-success-tint-hover: var(--color-green-90, #B9EFCD);
+  --bg-color-success-solid-active: var(--color-green-30, #0D5232);
+  /* Semantic - Background - GradientStops */
+  --bg-color-tertiary-gradient-stop: var(--color-spobi-blue-90-a-0, rgba(214, 225, 242, 0));
+  --bg-color-primary-gradient-stop: var(--color-neutral-100-a-0, rgba(255, 255, 255, 0));
+  --bg-color-secondary-gradient-stop: var(--color-spobi-blue-95-a-0, rgba(239, 241, 245, 0));
+  /* Semantic - Background - Overlay */
+  --overlay-scrim-black-const: var(--color-neutral-0-a-70, rgba(0, 0, 0, 0.7));
+  --overlay-scrim-white-const: var(--color-neutral-100-a-70, rgba(255, 255, 255, 0.7));
+  /* Semantic - Background - Error */
+  --bg-color-error-tint: var(--color-bild-red-95, #FFECEC);
+  --bg-color-error-tint-hover: var(--color-bild-red-90, #FFDADA);
+  --bg-color-error-solid: var(--color-bild-red-40, #C10000);
+  --bg-color-error-solid-hover: var(--color-bild-red-30, #930000);
+  /* Semantic - Background - Warning */
+  --bg-color-warning-tint: var(--color-orange-95, #FFEDDF);
+  --bg-color-warning-tint-hover: var(--color-orange-90, #FEDBC1);
+  --bg-color-warning-solid: var(--color-orange-70, #FD8227);
+  --bg-color-warning-solid-hover: var(--color-orange-60, #EF6702);
+  /* Semantic - Border - Standard */
+  --border-color-default: var(--color-spobi-blue-80, #C3C9DB);
+  --border-color-subtle: var(--color-spobi-blue-90, #D6E1F2);
+  --border-color-extra-strong: var(--color-spobi-blue-15, #0B2647);
+  --border-color-strong: var(--color-spobi-blue-50, #4676C3);
+  /* Semantic - Border - OnSolid */
+  --border-color-subtle-on-dark: var(--color-spobi-blue-25, #113B72);
+  --border-color-default-on-dark: var(--color-spobi-blue-40, #345EA0);
+  --border-color-subtle-on-light: var(--color-spobi-blue-90, #D6E1F2);
+  --border-color-default-on-light: var(--color-spobi-blue-80, #C3C9DB);
+  /* Semantic - Border - Feedback */
+  --border-color-success: var(--color-green-40, #006E3E);
+  --border-color-error: var(--color-bild-red-50, #DD0000);
+  --border-color-warning: var(--color-orange-50, #C65502);
+  --border-color-info: var(--color-neutral-60, #8C9196);
+  /* Semantic - Border - Interactive */
+  --border-color-disabled: var(--color-spobi-blue-90, #D6E1F2);
+  --border-color-focus: var(--color-spobi-blue-30, #174482);
+  --border-color-active: var(--color-spobi-blue-30, #174482);
+  --border-color-idle: var(--color-spobi-blue-60, #6A91CF);
+  /* Semantic - Border - Inverse */
+  --border-color-default-inverse: var(--color-spobi-blue-40, #345EA0);
+  --border-color-subtle-inverse: var(--color-spobi-blue-25, #113B72);
+  /* Semantic - Border - Brand */
+  --border-color-brand: var(--color-spobi-blue-30, #174482);
+  --border-color-brand-light-only: var(--color-spobi-blue-30, #174482);
+  --border-color-brand-const: var(--color-spobi-blue-30, #174482);
+  /* Semantic - Border - Utilities */
+  --border-color-no-contrast: var(--color-neutral-100, #FFFFFF);
+  /* Semantic - Icon - Interactive */
+  --icon-color-idle: var(--color-spobi-blue-40, #345EA0);
+  --icon-color-disabled: var(--color-spobi-blue-70, #8FACDB);
+  --icon-color-hover: var(--color-spobi-blue-15, #0B2647);
+  --icon-color-active: var(--color-spobi-blue-15, #0B2647);
+  /* Semantic - Icon - OnSolid */
+  --icon-color-secondary-on-light: var(--color-neutral-40, #565A5F);
+  --icon-color-primary-on-dark: var(--color-neutral-100, #FFFFFF);
+  --icon-color-secondary-on-dark: var(--color-neutral-90, #DDE1E2);
+  --icon-color-primary-on-light: var(--color-neutral-15, #222628);
+  --icon-color-const-on-image: var(--color-neutral-100, #FFFFFF);
+  /* Semantic - Icon - Feedback */
+  --icon-color-success: var(--color-green-40, #006E3E);
+  --icon-color-error: var(--color-bild-red-40, #C10000);
+  --icon-color-warning: var(--color-orange-40, #9E4401);
+  /* Semantic - Icon - Brand */
+  --icon-color-brand: var(--color-spobi-blue-30, #174482);
+  --icon-color-brand-light-only: var(--color-spobi-blue-30, #174482);
+  /* Semantic - Icon - Standard */
+  --icon-color-primary: var(--color-neutral-15, #222628);
+  --icon-color-secondary: var(--color-neutral-40, #565A5F);
+  --icon-color-tertiary: var(--color-neutral-50, #6E787C);
+  /* Semantic - Icon - Inverse */
+  --icon-color-primary-inverse: var(--color-spobi-blue-90, #D6E1F2);
+  --icon-color-secondary-inverse: var(--color-spobi-blue-70, #8FACDB);
+  --icon-color-inverse-high-contrast: var(--color-neutral-100, #FFFFFF);
   /* Semantic - LayerOpacity */
   --layer-opacity-05: var(--opacity-05, 0.05);
@@ -449,99 +560,163 @@
      SEMANTIC
      ============================================ */
-  /* Semantic - Text */
-  --text-color-accent-constant: var(--color-spobi-blue-29, #174482);
-  --text-color-primary: var(--color-neutral-93, #E9ECEF);
-  --text-color-muted: var(--color-neutral-85, #CED4DA);
-  --text-color-primary-inverse: var(--color-neutral-15, #232629);
-  --text-color-primary-constant: var(--color-neutral-15, #232629);
-  --text-color-success-constant: var(--color-green-40, #006E3E);
-  --text-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
-  --text-color-secondary: var(--color-neutral-60, #8C9196);
-  --text-color-attention-high: var(--color-bild-red-50, #DD0000);
-  --text-color-accent: var(--color-spobi-blue-98, #F7F9FD);
-  --text-color-attention-medium: var(--color-orange-67, #FD8227);
-  --text-color-on-dark-surface: var(--color-neutral-100, #FFFFFF);
-  /* Semantic - Surface */
-  --surface-color-primary: var(--color-spobi-blue-10, #081828);
-  --surface-color-secondary: var(--color-spobi-blue-16, #0A2750);
-  --surface-color-primary-inverse: var(--color-neutral-100, #FFFFFF);
-  --surface-color-primary-constant-light: var(--color-neutral-100, #FFFFFF);
-  --surface-color-primary-constant-dark: var(--color-spobi-blue-10, #081828);
-  --surface-color-quartenary: var(--color-neutral-35, #4B525A);
-  --surface-color-success: var(--color-green-93, #CEF4E4);
-  --surface-color-tertiary: var(--color-spobi-blue-29, #174482);
-  --surface-color-tertiary-gradient-stop: rgba(52, 60, 65, 0);
-  --surface-color-tertiary-inverse: var(--color-spobi-blue-81, #BDCADB);
-  --surface-color-primary-gradient-stop: rgba(35, 38, 41, 0);
-  --surface-color-secondary-gradient-stop: rgba(44, 49, 56, 0);
-  --surface-color-quartenary-inverse: var(--color-neutral-85, #CED4DA);
-  /* Semantic - Heading */
-  --kicker-text-color-on-surface: var(--color-neutral-60, #8C9196);
-  --headline-color-primary: var(--color-neutral-100, #FFFFFF);
-  --headline-color-white-const: var(--color-neutral-100, #FFFFFF);
-  --kicker-text-color-on-red: var(--color-neutral-100, #FFFFFF);
-  --kicker-text-color-on-dark-bg: var(--alpha-white-80, rgba(255, 255, 255, 0.8));
-  --kicker-text-color-on-bright-bg: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
-  /* Semantic - State */
-  --color-secondary-active: var(--color-neutral-96, #F2F4F5);
-  --color-primary-active: var(--color-spobi-blue-29, #174482);
-  --color-secondary-disabled: var(--color-neutral-35, #4B525A);
-  --color-primary-disabled: var(--color-neutral-25, #343C41);
-  --color-secondary-active-inverse: var(--color-neutral-15, #232629);
-  --color-tertiary-active: var(--color-green-70, #00C373);
-  --color-tertiary-disabled: var(--color-neutral-45, #666B70);
-  /* Semantic - Border */
-  --border-color-medium-contrast: var(--color-neutral-45, #666B70);
-  --border-color-low-contrast: var(--color-neutral-35, #4B525A);
-  --border-color-high-contrast: var(--color-neutral-100, #FFFFFF);
-  --border-color-low-contrast-constant: var(--color-neutral-93, #E9ECEF);
+  /* Semantic - Text - Brand */
+  --text-color-brand: var(--color-spobi-blue-60, #6A91CF);
+  --text-color-brand-light-only: var(--color-neutral-100, #FFFFFF);
+  /* Semantic - Text - Standard */
+  --text-color-primary: var(--color-spobi-blue-90, #D6E1F2);
+  --text-color-secondary: var(--color-spobi-blue-70, #8FACDB);
+  --text-color-tertiary: var(--color-spobi-blue-60, #6A91CF);
+  /* Semantic - Text - Heading */
+  --kicker-text-color: var(--color-spobi-blue-60, #6A91CF);
+  --headline-text-color: var(--color-neutral-100, #FFFFFF);
+  /* Semantic - Text - OnSolid */
+  --text-color-on-image: var(--color-neutral-100, #FFFFFF);
+  --text-color-secondary-on-dark: var(--color-neutral-90, #DDE1E2);
+  --text-color-primary-on-light: var(--color-neutral-15, #222628);
+  --kicker-text-color-on-dark: var(--color-neutral-100-a-80, rgba(255, 255, 255, 0.8));
+  --kicker-text-color-on-light: var(--color-neutral-0-a-70, rgba(0, 0, 0, 0.7));
+  --text-color-primary-on-dark: var(--color-neutral-100, #FFFFFF);
+  /* Semantic - Text - Interactive */
+  --text-color-idle: var(--color-spobi-blue-70, #8FACDB);
+  --text-color-disabled: var(--color-spobi-blue-40, #345EA0);
+  --text-color-hover: var(--color-spobi-blue-95, #EFF1F5);
+  --text-color-active: var(--color-spobi-blue-95, #EFF1F5);
+  /* Semantic - Text - Inverse */
+  --text-color-primary-inverse: var(--color-neutral-15, #222628);
+  --text-color-secondary-inverse: var(--color-neutral-40, #565A5F);
+  --text-color-inverse-high-contrast: var(--color-neutral-15, #222628);
+  /* Semantic - Text - Feedback */
+  --text-color-success: var(--color-green-70, #00C373);
+  --text-color-error: var(--color-bild-red-70, #FF8989);
+  --text-color-warning: var(--color-orange-70, #FD8227);
+  /* Semantic - Background - Standard */
+  --bg-color-primary: var(--color-spobi-blue-15, #0B2647);
+  --bg-color-disabled: var(--color-spobi-blue-20, #0C2F61);
+  --bg-color-secondary: var(--color-spobi-blue-20, #0C2F61);
+  --bg-color-primary-const-dark: var(--color-spobi-blue-15, #0B2647);
+  --bg-color-quaternary: var(--color-spobi-blue-30, #174482);
+  --bg-color-tertiary: var(--color-spobi-blue-25, #113B72);
+  --bg-color-primary-const-light: var(--color-neutral-100, #FFFFFF);
+  --bg-color-quintenary: var(--color-spobi-blue-60, #6A91CF);
+  /* Semantic - Background - Brand */
+  --bg-color-brand-light-only: var(--color-neutral-100, #FFFFFF);
+  --bg-color-brand-solid: var(--color-spobi-blue-30, #174482);
+  --bg-color-brand-solid-hover: var(--color-spobi-blue-20, #0C2F61);
+  --bg-color-brand-solid-active: var(--color-spobi-blue-10, #091C2E);
+  --bg-color-brand-tint: var(--color-spobi-blue-20, #0C2F61);
+  --bg-color-brand-tint-hover: var(--color-spobi-blue-30, #174482);
+  /* Semantic - Background - Inverse */
+  --bg-color-primary-inverse: var(--color-neutral-100, #FFFFFF);
+  --bg-color-tertiary-inverse: var(--color-spobi-blue-90, #D6E1F2);
+  --bg-color-quaternary-inverse: var(--color-spobi-blue-80, #C3C9DB);
+  --bg-color-secondary-inverse: var(--color-spobi-blue-95, #EFF1F5);
+  --bg-color-quintenary-inverse: var(--color-spobi-blue-60, #6A91CF);
+  /* Semantic - Background - Success */
+  --bg-color-success-tint: var(--color-green-10, #052013);
+  --bg-color-success-solid: var(--color-green-50, #158751);
+  --bg-color-success-solid-hover: var(--color-green-40, #006E3E);
+  --bg-color-success-tint-hover: var(--color-green-20, #093822);
+  --bg-color-success-solid-active: var(--color-green-30, #0D5232);
+  /* Semantic - Background - GradientStops */
+  --bg-color-tertiary-gradient-stop: var(--color-spobi-blue-25-a-0, rgba(17, 59, 114, 0));
+  --bg-color-primary-gradient-stop: var(--color-spobi-blue-15-a-0, rgba(11, 38, 71, 0));
+  --bg-color-secondary-gradient-stop: var(--color-spobi-blue-20-a-0, rgba(12, 47, 97, 0));
+  /* Semantic - Background - Overlay */
+  --overlay-scrim-black-const: var(--color-neutral-0-a-70, rgba(0, 0, 0, 0.7));
+  --overlay-scrim-white-const: var(--color-neutral-100-a-70, rgba(255, 255, 255, 0.7));
+  /* Semantic - Background - Error */
+  --bg-color-error-tint: var(--color-bild-red-10, #410000);
+  --bg-color-error-tint-hover: var(--color-bild-red-20, #680000);
+  --bg-color-error-solid: var(--color-bild-red-40, #C10000);
+  --bg-color-error-solid-hover: var(--color-bild-red-30, #930000);
+  /* Semantic - Background - Warning */
+  --bg-color-warning-tint: var(--color-orange-10, #2F1400);
+  --bg-color-warning-tint-hover: var(--color-orange-20, #522301);
+  --bg-color-warning-solid: var(--color-orange-70, #FD8227);
+  --bg-color-warning-solid-hover: var(--color-orange-60, #EF6702);
+  /* Semantic - Border - Standard */
+  --border-color-default: var(--color-spobi-blue-40, #345EA0);
+  --border-color-subtle: var(--color-spobi-blue-25, #113B72);
+  --border-color-extra-strong: var(--color-neutral-100, #FFFFFF);
+  --border-color-strong: var(--color-spobi-blue-50, #4676C3);
+  /* Semantic - Border - OnSolid */
+  --border-color-subtle-on-dark: var(--color-spobi-blue-25, #113B72);
+  --border-color-default-on-dark: var(--color-spobi-blue-40, #345EA0);
+  --border-color-subtle-on-light: var(--color-spobi-blue-90, #D6E1F2);
+  --border-color-default-on-light: var(--color-spobi-blue-80, #C3C9DB);
+  /* Semantic - Border - Feedback */
   --border-color-success: var(--color-green-70, #00C373);
-  --border-color-warning: var(--color-bild-red-50, #DD0000);
-  --border-color-primary-disabled: var(--color-neutral-25, #343C41);
-  --border-color-secondary-disabled: var(--color-neutral-35, #4B525A);
-  /* Semantic - Core */
-  --core-color-primary: var(--color-spobi-blue-16, #0A2750);
-  --core-color-secondary: var(--color-spobi-blue-10, #081828);
-  --core-color-tertiary: var(--color-neutral-100, #FFFFFF);
-  --core-color-secondary-constant: var(--color-neutral-100, #FFFFFF);
-  --core-color-tertiary-constant: var(--color-spobi-blue-10, #081828);
-  /* Semantic - Icon */
-  --icon-color-primary: var(--color-neutral-60, #8C9196);
-  --icon-color-inverse: var(--color-neutral-35, #4B525A);
-  --icon-color-secondary-constant: var(--color-neutral-60, #8C9196);
-  --icon-color-constant-on-dark: var(--color-neutral-96, #F2F4F5);
-  --icon-color-primary-constant: var(--color-neutral-35, #4B525A);
+  --border-color-error: var(--color-bild-red-70, #FF8989);
+  --border-color-warning: var(--color-orange-70, #FD8227);
+  --border-color-info: var(--color-neutral-40, #565A5F);
+  /* Semantic - Border - Interactive */
+  --border-color-disabled: var(--color-spobi-blue-25, #113B72);
+  --border-color-focus: var(--color-spobi-blue-70, #8FACDB);
+  --border-color-active: var(--color-spobi-blue-60, #6A91CF);
+  --border-color-idle: var(--color-spobi-blue-50, #4676C3);
+  /* Semantic - Border - Inverse */
+  --border-color-default-inverse: var(--color-spobi-blue-80, #C3C9DB);
+  --border-color-subtle-inverse: var(--color-spobi-blue-90, #D6E1F2);
+  /* Semantic - Border - Brand */
+  --border-color-brand: var(--color-spobi-blue-60, #6A91CF);
+  --border-color-brand-light-only: var(--color-neutral-100, #FFFFFF);
+  --border-color-brand-const: var(--color-spobi-blue-30, #174482);
+  /* Semantic - Border - Utilities */
+  --border-color-no-contrast: var(--color-spobi-blue-15, #0B2647);
+  /* Semantic - Icon - Interactive */
+  --icon-color-idle: var(--color-spobi-blue-70, #8FACDB);
+  --icon-color-disabled: var(--color-spobi-blue-40, #345EA0);
+  --icon-color-hover: var(--color-spobi-blue-95, #EFF1F5);
+  --icon-color-active: var(--color-spobi-blue-95, #EFF1F5);
+  /* Semantic - Icon - OnSolid */
+  --icon-color-secondary-on-light: var(--color-neutral-40, #565A5F);
+  --icon-color-primary-on-dark: var(--color-neutral-100, #FFFFFF);
+  --icon-color-secondary-on-dark: var(--color-neutral-90, #DDE1E2);
+  --icon-color-primary-on-light: var(--color-neutral-15, #222628);
+  --icon-color-const-on-image: var(--color-neutral-100, #FFFFFF);
+  /* Semantic - Icon - Feedback */
   --icon-color-success: var(--color-green-70, #00C373);
+  --icon-color-error: var(--color-bild-red-70, #FF8989);
+  --icon-color-warning: var(--color-orange-70, #FD8227);
-  /* Semantic - Label */
-  --label-color-primary: var(--color-neutral-93, #E9ECEF);
-  --label-color-secondary: var(--color-neutral-85, #CED4DA);
-  --label-color-disabled: var(--color-neutral-35, #4B525A);
-  --label-color-primary-constant: var(--color-neutral-15, #232629);
-  --label-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
-  --label-color-tertiary: var(--color-neutral-60, #8C9196);
-  --label-color-primary-inverse: var(--color-neutral-15, #232629);
-  /* Semantic - Attention */
-  --attention-color-high: var(--color-bild-red-50, #DD0000);
-  --accent-color-primary: var(--color-spobi-blue-98, #F7F9FD);
-  --attention-color-medium: var(--color-orange-67, #FD8227);
-  --attention-color-low: var(--color-yellow-80, #FFBF00);
-  --accent-color-primary-constant: var(--color-spobi-blue-29, #174482);
-  --attention-color-success-primary: var(--color-green-70, #00C373);
-  --attention-color-extra-low: var(--color-neutral-25, #343C41);
-  --attention-color-success-secondary: var(--color-green-40, #006E3E);
-  /* Semantic - Overlay */
-  --overlay-scrim-black: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
-  --overlay-scrim-white: var(--alpha-white-70, rgba(255, 255, 255, 0.7));
+  /* Semantic - Icon - Brand */
+  --icon-color-brand: var(--color-spobi-blue-60, #6A91CF);
+  --icon-color-brand-light-only: var(--color-neutral-100, #FFFFFF);
+  /* Semantic - Icon - Standard */
+  --icon-color-primary: var(--color-spobi-blue-90, #D6E1F2);
+  --icon-color-secondary: var(--color-spobi-blue-70, #8FACDB);
+  --icon-color-tertiary: var(--color-spobi-blue-60, #6A91CF);
+  /* Semantic - Icon - Inverse */
+  --icon-color-primary-inverse: var(--color-neutral-15, #222628);
+  --icon-color-secondary-inverse: var(--color-neutral-40, #565A5F);
+  --icon-color-inverse-high-contrast: var(--color-neutral-15, #222628);
   /* Semantic - LayerOpacity */
   --layer-opacity-05: var(--opacity-05, 0.05);
@@ -566,25 +741,21 @@
    DROPSHADOWSOFT
    ============================================ */
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
 [data-color-brand="sportbild"][data-theme="light"] .shadow-soft-sm,
 :host([data-color-brand="sportbild"][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);
 }
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
 [data-color-brand="sportbild"][data-theme="light"] .shadow-soft-md,
 :host([data-color-brand="sportbild"][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);
 }
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
 [data-color-brand="sportbild"][data-theme="light"] .shadow-soft-lg,
 :host([data-color-brand="sportbild"][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);
 }
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
 [data-color-brand="sportbild"][data-theme="light"] .shadow-soft-xl,
 :host([data-color-brand="sportbild"][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);
@@ -595,28 +766,24 @@
    DROPSHADOWHARD
    ============================================ */
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-color-brand="sportbild"][data-theme="light"] .shadow-hard-sm,
 :host([data-color-brand="sportbild"][data-theme="light"]) .shadow-hard-sm {
-  box-shadow: 0px 1px 2px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
+  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));
 }
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-color-brand="sportbild"][data-theme="light"] .shadow-hard-md,
 :host([data-color-brand="sportbild"][data-theme="light"]) .shadow-hard-md {
-  box-shadow: 0px 4px 8px 0px var(--alpha-black-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
+  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);
 }
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-color-brand="sportbild"][data-theme="light"] .shadow-hard-lg,
 :host([data-color-brand="sportbild"][data-theme="light"]) .shadow-hard-lg {
-  box-shadow: 0px 2px 3px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
+  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));
 }
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-color-brand="sportbild"][data-theme="light"] .shadow-hard-xl,
 :host([data-color-brand="sportbild"][data-theme="light"]) .shadow-hard-xl {
-  box-shadow: 0px 4px 4px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
+  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));
 }
 /* Effects - Dark */
@@ -624,25 +791,21 @@
    DROPSHADOWSOFT
    ============================================ */
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
 [data-color-brand="sportbild"][data-theme="dark"] .shadow-soft-sm,
 :host([data-color-brand="sportbild"][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);
 }
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
 [data-color-brand="sportbild"][data-theme="dark"] .shadow-soft-md,
 :host([data-color-brand="sportbild"][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);
 }
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
 [data-color-brand="sportbild"][data-theme="dark"] .shadow-soft-lg,
 :host([data-color-brand="sportbild"][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);
 }
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
 [data-color-brand="sportbild"][data-theme="dark"] .shadow-soft-xl,
 :host([data-color-brand="sportbild"][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);
@@ -653,28 +816,24 @@
    DROPSHADOWHARD
    ============================================ */
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-color-brand="sportbild"][data-theme="dark"] .shadow-hard-sm,
 :host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-hard-sm {
-  box-shadow: 0px 1px 2px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
+  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));
 }
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-color-brand="sportbild"][data-theme="dark"] .shadow-hard-md,
 :host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-hard-md {
-  box-shadow: 0px 4px 8px 0px var(--alpha-black-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
+  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);
 }
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-color-brand="sportbild"][data-theme="dark"] .shadow-hard-lg,
 :host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-hard-lg {
-  box-shadow: 0px 2px 3px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
+  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));
 }
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-color-brand="sportbild"][data-theme="dark"] .shadow-hard-xl,
 :host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-hard-xl {
-  box-shadow: 0px 4px 4px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
+  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));
 }
@@ -720,7 +879,6 @@
   --label-3-font-size: 12px;
   --label-2-font-size: 15px;
   --label-1-font-size: 17px;
-  --label-1-font-size-responsive: 10px;
   --callout-1-font-size: 18px;
   --footnote-1-font-size: 13px;
   --footnote-2-font-size: 10px;
@@ -739,22 +897,28 @@
   --subheadline-font-family: var(--font-family-antenna-cond, AntennaCond);
   --title-font-family: var(--font-family-antenna-cond, AntennaCond);
   --quote-font-family: var(--font-family-antenna-cond, AntennaCond);
-  --display-font-family: var(--font-family-antenna-cond, AntennaCond);
+  --display-font-family: var(--font-family-antenna-extra-cond, AntennaExtraCond);
   --callout-font-weight: var(--font-weight-black, 800);
   --label-font-weight-bold: var(--font-weight-bold, 700);
   --label-font-weight-book: var(--font-weight-book, 400);
+  --label-font-weight-bold-st: var(--st-font-weight-bold-italic, BoldItalic);
+  --label-font-weight-book-st: var(--st-font-weight-light-italic-st, LightItalic);
   --body-font-weight-book: var(--font-weight-book, 400);
   --body-font-weight-bold: var(--font-weight-bold, 700);
   --kicker-font-weight: var(--font-weight-bold, 700);
-  --kicker-font-weight-st: var(--st-font-weight-black-italic, Black Italic);
+  --kicker-font-weight-st: var(--st-font-weight-bold-italic, BoldItalic);
   --subheadline-font-weight: var(--font-weight-bold, 700);
   --headline-1-font-weight: var(--font-weight-bold, 700);
   --headline-2-font-weight: var(--font-weight-bold, 700);
   --headline-3-font-weight: var(--font-weight-bold, 700);
   --headline-4-font-weight: var(--font-weight-bold, 700);
-  --headline-1-font-weight-st: var(--st-font-weight-bold-italic, Bold Italic);
+  --headline-1-font-weight-st: var(--st-font-weight-bold-italic, BoldItalic);
+  --headline-2-font-weight-st: var(--st-font-weight-bold-italic, BoldItalic);
+  --headline-3-font-weight-st: var(--st-font-weight-bold-italic, BoldItalic);
+  --headline-4-font-weight-st: var(--st-font-weight-bold-italic, BoldItalic);
   --title-font-weight: var(--font-weight-black, 800);
-  --display-font-weight: var(--font-weight-black, 800);
+  --display-font-weight: var(--font-weight-bold, 700);
+  --display-font-weight-st: var(--st-font-weight-bold-italic, BoldItalic);
   --quote-font-weight: var(--font-weight-black, 800);
   --footnote-font-weight-book: var(--font-weight-book, 400);
   --footnote-font-weight-bold: var(--font-weight-bold, 700);
@@ -765,7 +929,6 @@
   --kicker-1-line-height: 22px;
   --label-3-line-height: 14.4px;
   --label-1-line-height: 20.4px;
-  --label-1-responsive-line-height: 12px;
   --label-2-line-height: 19.2px;
   --display-1-line-height: 40px;
   --display-2-line-height: 36px;
@@ -781,18 +944,18 @@
   --headline-4-line-height: 23.1px;
   --callout-line-height: 23.4px;
   --subheadline-1-line-height: 23.4px;
-  --letter-spacing-positive-sm: var(--letter-space-0-p-5, 0.5px);
-  --letter-spacing-positive-lg: var(--letter-space-2, 2px);
-  --letter-spacing-positive-md: var(--letter-space-1, 1px);
-  --letter-spacing-none: var(--letter-space-0, 0px);
-  --letter-spacing-negative-sm: var(--letter-space-neg-0-p-5, -0.5px);
-  --letter-spacing-negative-md: var(--letter-space-neg-1, -1px);
-  --letter-spacing-negative-lg: var(--letter-space-neg-2, -2px);
-  --letter-spacing-negative-xs: var(--letter-space-neg-0-p-25, -0.25px);
-  --letter-spacing-positive-xs: var(--letter-space-0-p-25, 0.25px);
-  --display-1-letter-spacing: var(--letter-space-neg-0-p-5, -0.5px);
-  --display-2-letter-spacing: var(--letter-space-neg-0-p-5, -0.5px);
-  --display-3-letter-spacing: var(--letter-space-neg-0-p-5, -0.5px);
+  --letter-space-positive-sm: var(--letter-space-0-p-5, 0.5px);
+  --letter-space-positive-lg: var(--letter-space-2, 2px);
+  --letter-space-positive-md: var(--letter-space-1, 1px);
+  --letter-space-none: var(--letter-space-0, 0px);
+  --letter-space-negative-sm: var(--letter-space-neg-0-p-5, -0.5px);
+  --letter-space-negative-md: var(--letter-space-neg-1, -1px);
+  --letter-space-negative-lg: var(--letter-space-neg-2, -2px);
+  --letter-space-negative-xs: var(--letter-space-neg-0-p-25, -0.25px);
+  --letter-space-positive-xs: var(--letter-space-0-p-25, 0.25px);
+  --display-1-letter-space: var(--letter-space-neg-0-p-5, -0.5px);
+  --display-2-letter-space: var(--letter-space-neg-0-p-5, -0.5px);
+  --display-3-letter-space: var(--letter-space-neg-0-p-5, -0.5px);
   --border-radius-xs: var(--size-0-p-25-x, 2px);
   --border-radius-md: var(--size-1-x, 8px);
   --border-radius-sm: var(--size-0-p-5-x, 4px);
@@ -820,19 +983,19 @@
   --inline-space-const-xs: var(--space-0-p-75-x, 6px);
   --inline-space-const-3-xs: var(--space-0-p-25-x, 2px);
   --inline-space-const-2-xs: var(--space-0-p-5-x, 4px);
-  --stack-space-resp-md: var(--space-1-p-5-x, 12px);
-  --stack-space-resp-lg: var(--space-2-x, 16px);
-  --stack-space-resp-2-xl: var(--space-4-x, 32px);
-  --stack-space-resp-sm: var(--space-1-x, 8px);
-  --stack-space-resp-xl: var(--space-3-x, 24px);
-  --stack-space-const-sm: var(--space-1-x, 8px);
-  --stack-space-const-md: var(--space-1-p-5-x, 12px);
-  --stack-space-const-lg: var(--space-2-x, 16px);
-  --stack-space-const-2-xl: var(--space-4-x, 32px);
-  --stack-space-const-xl: var(--space-3-x, 24px);
-  --stack-space-const-xs: var(--space-0-p-75-x, 6px);
-  --stack-space-const-3-xs: var(--space-0-p-25-x, 2px);
-  --stack-space-const-2-xs: var(--space-0-p-5-x, 4px);
+  --stack-space-resp-md: var(--density-xs-stack-space-resp-md);
+  --stack-space-resp-lg: var(--density-xs-stack-space-resp-lg);
+  --stack-space-resp-2-xl: var(--density-xs-stack-space-resp-2-xl);
+  --stack-space-resp-sm: var(--density-xs-stack-space-resp-sm);
+  --stack-space-resp-xl: var(--density-xs-stack-space-resp-xl);
+  --stack-space-const-sm: var(--density-stack-space-const-sm);
+  --stack-space-const-md: var(--density-stack-space-const-md);
+  --stack-space-const-lg: var(--density-stack-space-const-lg);
+  --stack-space-const-2-xl: var(--density-stack-space-const-2-xl);
+  --stack-space-const-xl: var(--density-stack-space-const-xl);
+  --stack-space-const-xs: var(--density-stack-space-const-xs);
+  --stack-space-const-3-xs: var(--density-stack-space-const-3-xs);
+  --stack-space-const-2-xs: var(--density-stack-space-const-2-xs);
   --gap-space-resp-xs: var(--space-0-p-5-x, 4px);
   --gap-space-resp-lg: var(--space-2-x, 16px);
   --gap-space-resp-xl: var(--space-3-x, 24px);
@@ -884,6 +1047,11 @@
     --canvas-width-size-app: 390px;
     --canvas-height-size-app: 844px;
     --title-2-line-height: 20.8px;
+    --stack-space-resp-md: var(--density-sm-stack-space-resp-md);
+    --stack-space-resp-lg: var(--density-sm-stack-space-resp-lg);
+    --stack-space-resp-2-xl: var(--density-sm-stack-space-resp-2-xl);
+    --stack-space-resp-sm: var(--density-sm-stack-space-resp-sm);
+    --stack-space-resp-xl: var(--density-sm-stack-space-resp-xl);
     --breakpoint-name: sm;
   }
 }
@@ -912,7 +1080,6 @@
     --headline-1-font-size: 60px;
     --headline-2-font-size: 44px;
     --headline-4-font-size: 26px;
-    --label-1-font-size-responsive: 15px;
     --callout-1-font-size: 24px;
     --kicker-1-font-size: 26px;
     --kicker-2-font-size: 26px;
@@ -925,7 +1092,6 @@
     --kicker-3-line-height: 22px;
     --kicker-2-line-height: 28.6px;
     --kicker-1-line-height: 28.6px;
-    --label-1-responsive-line-height: 18px;
     --display-1-line-height: 72px;
     --display-2-line-height: 42px;
     --display-3-line-height: 32px;
@@ -938,10 +1104,10 @@
     --headline-4-line-height: 28.6px;
     --callout-line-height: 31.2px;
     --subheadline-1-line-height: 28.6px;
-    --letter-spacing-negative-sm: var(--letter-space-neg-0-p-25, -0.25px);
-    --display-1-letter-spacing: var(--letter-space-neg-1, -1px);
-    --display-2-letter-spacing: var(--letter-space-neg-1, -1px);
-    --display-3-letter-spacing: var(--letter-space-neg-1, -1px);
+    --letter-space-negative-sm: var(--letter-space-neg-0-p-25, -0.25px);
+    --display-1-letter-space: var(--letter-space-neg-1, -1px);
+    --display-2-letter-space: var(--letter-space-neg-1, -1px);
+    --display-3-letter-space: var(--letter-space-neg-1, -1px);
     --change-on-md: md/lg;
     --bp-specific-web: md;
     --bp-specific-app: regular;
@@ -950,11 +1116,10 @@
     --inline-space-resp-lg: var(--space-3-x, 24px);
     --inline-space-resp-2-xl: var(--space-6-x, 48px);
     --inline-space-resp-xl: var(--space-4-x, 32px);
-    --stack-space-resp-md: var(--space-2-x, 16px);
-    --stack-space-resp-lg: var(--space-3-x, 24px);
-    --stack-space-resp-2-xl: var(--space-6-x, 48px);
-    --stack-space-resp-sm: var(--space-1-p-5-x, 12px);
-    --stack-space-resp-xl: var(--space-4-x, 32px);
+    --stack-space-resp-md: var(--density-md-stack-space-resp-md);
+    --stack-space-resp-lg: var(--density-md-stack-space-resp-lg);
+    --stack-space-resp-sm: var(--density-md-stack-space-resp-sm);
+    --stack-space-resp-xl: var(--density-md-stack-space-resp-xl);
     --gap-space-resp-xs: var(--space-0-p-75-x, 6px);
     --gap-space-resp-lg: var(--space-3-x, 24px);
     --gap-space-resp-xl: var(--space-4-x, 32px);
@@ -998,7 +1163,6 @@
     --headline-1-font-size: 80px;
     --headline-2-font-size: 50px;
     --headline-3-font-size: 34px;
-    --label-1-font-size-responsive: 17px;
     --footnote-1-font-size: 15px;
     --footnote-2-font-size: 13px;
     --kicker-1-font-size: 32px;
@@ -1010,7 +1174,6 @@
     --kicker-4-line-height: 19.8px;
     --kicker-3-line-height: 24.2px;
     --kicker-1-line-height: 35.2px;
-    --label-1-responsive-line-height: 20.4px;
     --display-1-line-height: 120px;
     --display-2-line-height: 64px;
     --display-3-line-height: 40px;
@@ -1024,9 +1187,9 @@
     --headline-3-line-height: 39.1px;
     --headline-4-line-height: 29.9px;
     --subheadline-1-line-height: 33.8px;
-    --letter-spacing-positive-lg: var(--letter-space-3, 3px);
-    --letter-spacing-negative-lg: var(--letter-space-neg-3, -3px);
-    --display-1-letter-spacing: var(--letter-space-neg-2, -2px);
+    --letter-space-positive-lg: var(--letter-space-3, 3px);
+    --letter-space-negative-lg: var(--letter-space-neg-3, -3px);
+    --display-1-letter-space: var(--letter-space-neg-2, -2px);
     --change-on-lg: lg;
     --bp-specific-web: lg;
     --inline-space-resp-sm: var(--space-2-x, 16px);
@@ -1034,11 +1197,11 @@
     --inline-space-resp-lg: var(--space-4-x, 32px);
     --inline-space-resp-2-xl: var(--space-8-x, 64px);
     --inline-space-resp-xl: var(--space-5-x, 40px);
-    --stack-space-resp-md: var(--space-3-x, 24px);
-    --stack-space-resp-lg: var(--space-4-x, 32px);
-    --stack-space-resp-2-xl: var(--space-8-x, 64px);
-    --stack-space-resp-sm: var(--space-2-x, 16px);
-    --stack-space-resp-xl: var(--space-5-x, 40px);
+    --stack-space-resp-md: var(--density-lg-stack-space-resp-md);
+    --stack-space-resp-lg: var(--density-lg-stack-space-resp-lg);
+    --stack-space-resp-2-xl: var(--density-lg-stack-space-resp-2-xl);
+    --stack-space-resp-sm: var(--density-lg-stack-space-resp-sm);
+    --stack-space-resp-xl: var(--density-lg-stack-space-resp-xl);
     --gap-space-resp-xs: var(--space-1-x, 8px);
     --gap-space-resp-lg: var(--space-4-x, 32px);
     --gap-space-resp-xl: var(--space-6-x, 48px);
@@ -1066,28 +1229,11 @@
 [data-content-brand="sportbild"] .display-1,
 :host([data-content-brand="sportbild"]) .display-1 {
   font-family: var(--display-font-family);
-  font-weight: var(--display-font-weight);
+  font-weight: 900;
   font-size: var(--display-1-font-size);
   line-height: var(--display-1-line-height);
-  letter-spacing: var(--display-1-letter-spacing);
-}
-[data-content-brand="sportbild"] .display-2,
-:host([data-content-brand="sportbild"]) .display-2 {
-  font-family: var(--display-font-family);
-  font-weight: var(--display-font-weight);
-  font-size: var(--display-2-font-size);
-  line-height: var(--display-2-line-height);
-  letter-spacing: var(--display-2-letter-spacing);
-}
-[data-content-brand="sportbild"] .display-3,
-:host([data-content-brand="sportbild"]) .display-3 {
-  font-family: var(--display-font-family);
-  font-weight: var(--display-font-weight);
-  font-size: var(--display-3-font-size);
-  line-height: var(--display-3-line-height);
-  letter-spacing: var(--display-3-letter-spacing);
+  letter-spacing: var(--display-1-letter-space);
+  font-style: italic;
 }
 [data-content-brand="sportbild"] .headline-1,
@@ -1099,33 +1245,6 @@
   font-style: italic;
 }
-[data-content-brand="sportbild"] .headline-2,
-:host([data-content-brand="sportbild"]) .headline-2 {
-  font-family: var(--headline-font-family);
-  font-weight: 900;
-  font-size: var(--headline-2-font-size);
-  line-height: var(--headline-2-line-height);
-  font-style: italic;
-}
-[data-content-brand="sportbild"] .headline-3,
-:host([data-content-brand="sportbild"]) .headline-3 {
-  font-family: var(--headline-font-family);
-  font-weight: 900;
-  font-size: var(--headline-3-font-size);
-  line-height: var(--headline-3-line-height);
-  font-style: italic;
-}
-[data-content-brand="sportbild"] .headline-4,
-:host([data-content-brand="sportbild"]) .headline-4 {
-  font-family: var(--headline-font-family);
-  font-weight: 700;
-  font-size: var(--headline-4-font-size);
-  line-height: var(--headline-4-font-size);
-  font-style: italic;
-}
 [data-content-brand="sportbild"] .subheadline-1,
 :host([data-content-brand="sportbild"]) .subheadline-1 {
   font-family: var(--subheadline-font-family);
@@ -1143,33 +1262,6 @@
   font-style: italic;
 }
-[data-content-brand="sportbild"] .kicker-2,
-:host([data-content-brand="sportbild"]) .kicker-2 {
-  font-family: var(--kicker-font-family);
-  font-weight: 700;
-  font-size: var(--kicker-2-font-size);
-  line-height: var(--kicker-2-line-height);
-  font-style: italic;
-}
-[data-content-brand="sportbild"] .kicker-3,
-:host([data-content-brand="sportbild"]) .kicker-3 {
-  font-family: var(--kicker-font-family);
-  font-weight: 700;
-  font-size: var(--kicker-3-font-size);
-  line-height: var(--kicker-3-line-height);
-  font-style: italic;
-}
-[data-content-brand="sportbild"] .kicker-4,
-:host([data-content-brand="sportbild"]) .kicker-4 {
-  font-family: var(--kicker-font-family);
-  font-weight: 700;
-  font-size: var(--kicker-4-font-size);
-  line-height: var(--kicker-4-line-height);
-  font-style: italic;
-}
 [data-content-brand="sportbild"] .title-1,
 :host([data-content-brand="sportbild"]) .title-1 {
   font-family: var(--title-font-family);
@@ -1178,32 +1270,6 @@
   line-height: var(--title-1-line-height);
 }
-[data-content-brand="sportbild"] .title-1-uppercase,
-:host([data-content-brand="sportbild"]) .title-1-uppercase {
-  font-family: var(--title-font-family);
-  font-weight: var(--title-font-weight);
-  font-size: var(--title-1-font-size);
-  line-height: var(--title-1-line-height);
-  text-transform: uppercase;
-}
-[data-content-brand="sportbild"] .title-2,
-:host([data-content-brand="sportbild"]) .title-2 {
-  font-family: var(--title-font-family);
-  font-weight: var(--title-font-weight);
-  font-size: var(--title-2-font-size);
-  line-height: var(--title-2-line-height);
-}
-[data-content-brand="sportbild"] .title-2-uppercase,
-:host([data-content-brand="sportbild"]) .title-2-uppercase {
-  font-family: var(--title-font-family);
-  font-weight: var(--title-font-weight);
-  font-size: var(--title-2-font-size);
-  line-height: var(--title-2-line-height);
-  text-transform: uppercase;
-}
 [data-content-brand="sportbild"] .callout,
 :host([data-content-brand="sportbild"]) .callout {
   font-family: var(--callout-font-family);
@@ -1220,32 +1286,6 @@
   line-height: var(--body-line-height);
 }
-[data-content-brand="sportbild"] .body-italic,
-:host([data-content-brand="sportbild"]) .body-italic {
-  font-family: var(--body-font-family);
-  font-weight: 400;
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
-  font-style: italic;
-}
-[data-content-brand="sportbild"] .body-bold,
-:host([data-content-brand="sportbild"]) .body-bold {
-  font-family: var(--body-font-family);
-  font-weight: var(--body-font-weight-bold);
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
-}
-[data-content-brand="sportbild"] .body-bold-italic,
-:host([data-content-brand="sportbild"]) .body-bold-italic {
-  font-family: var(--body-font-family);
-  font-weight: 700;
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
-  font-style: italic;
-}
 [data-content-brand="sportbild"] .text-link,
 :host([data-content-brand="sportbild"]) .text-link {
   font-family: var(--body-font-family);
@@ -1255,43 +1295,6 @@
   text-decoration: underline;
 }
-[data-content-brand="sportbild"] .text-link-italic,
-:host([data-content-brand="sportbild"]) .text-link-italic {
-  font-family: var(--body-font-family);
-  font-weight: 400;
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
-  font-style: italic;
-  text-decoration: underline;
-}
-[data-content-brand="sportbild"] .text-link-bold,
-:host([data-content-brand="sportbild"]) .text-link-bold {
-  font-family: var(--body-font-family);
-  font-weight: var(--body-font-weight-bold);
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
-  text-decoration: underline;
-}
-[data-content-brand="sportbild"] .text-link-hover,
-:host([data-content-brand="sportbild"]) .text-link-hover {
-  font-family: var(--body-font-family);
-  font-weight: var(--body-font-weight-book);
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
-  text-decoration: underline;
-}
-[data-content-brand="sportbild"] .text-link-bold-hover,
-:host([data-content-brand="sportbild"]) .text-link-bold-hover {
-  font-family: var(--body-font-family);
-  font-weight: var(--body-font-weight-bold);
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
-  text-decoration: underline;
-}
 [data-content-brand="sportbild"] .footnote-1,
 :host([data-content-brand="sportbild"]) .footnote-1 {
   font-family: var(--footnote-font-family);
@@ -1300,149 +1303,162 @@
   line-height: var(--footnote-1-line-height);
 }
-[data-content-brand="sportbild"] .footnote-1-bold,
-:host([data-content-brand="sportbild"]) .footnote-1-bold {
-  font-family: var(--footnote-font-family);
-  font-weight: var(--font-weight-bold, 700);
-  font-size: var(--footnote-1-font-size);
-  line-height: var(--footnote-1-line-height);
-}
-[data-content-brand="sportbild"] .footnote-2,
-:host([data-content-brand="sportbild"]) .footnote-2 {
-  font-family: var(--footnote-font-family);
-  font-weight: var(--font-weight-book, 400);
-  font-size: var(--footnote-2-font-size);
-  line-height: var(--footnote-2-line-height);
-}
-[data-content-brand="sportbild"] .footnote-2-bold,
-:host([data-content-brand="sportbild"]) .footnote-2-bold {
-  font-family: var(--footnote-font-family);
-  font-weight: var(--font-weight-bold, 700);
-  font-size: var(--footnote-2-font-size);
-  line-height: var(--footnote-2-line-height);
-}
 [data-content-brand="sportbild"] .label-1,
 :host([data-content-brand="sportbild"]) .label-1 {
   font-family: var(--label-font-family);
-  font-weight: var(--label-font-weight-book);
+  font-weight: 400;
   font-size: var(--label-1-font-size);
   line-height: var(--label-1-line-height);
   letter-spacing: var(--letter-space-0-p-25, 0.25px);
+  font-style: italic;
 }
-[data-content-brand="sportbild"] .label-1-bold,
-:host([data-content-brand="sportbild"]) .label-1-bold {
-  font-family: var(--label-font-family);
-  font-weight: var(--label-font-weight-bold);
-  font-size: var(--label-1-font-size);
-  line-height: var(--label-1-line-height);
-  letter-spacing: var(--letter-space-0-p-25, 0.25px);
+[data-content-brand="sportbild"] .quote,
+:host([data-content-brand="sportbild"]) .quote {
+  font-family: var(--quote-font-family);
+  font-weight: var(--quote-font-weight);
+  font-size: var(--quote-font-size);
+  line-height: var(--quote-line-height);
 }
-[data-content-brand="sportbild"] .label-1-bold-resp,
-:host([data-content-brand="sportbild"]) .label-1-bold-resp {
-  font-family: var(--label-font-family);
-  font-weight: var(--font-weight-bold, 700);
-  font-size: var(--label-1-font-size-responsive);
-  line-height: var(--label-1-responsive-line-height);
-  letter-spacing: var(--letter-space-0-p-25, 0.25px);
-}
+/* === SEMANTIC DENSITY TOKENS === */
-[data-content-brand="sportbild"] .label-1-uppercase-bold,
-:host([data-content-brand="sportbild"]) .label-1-uppercase-bold {
-  font-family: var(--label-font-family);
-  font-weight: var(--label-font-weight-bold);
-  font-size: var(--label-1-font-size);
-  line-height: var(--label-1-line-height);
-  letter-spacing: var(--letter-spacing-positive-sm);
-  text-transform: uppercase;
-}
+[data-content-brand="sportbild"][data-density="default"],
+:host([data-content-brand="sportbild"][data-density="default"]) {
+  /* ============================================
+     GLOBAL
+     ============================================ */
-[data-content-brand="sportbild"] .label-2,
-:host([data-content-brand="sportbild"]) .label-2 {
-  font-family: var(--label-font-family);
-  font-weight: var(--label-font-weight-book);
-  font-size: var(--label-2-font-size);
-  line-height: var(--label-2-line-height);
-  letter-spacing: var(--letter-spacing-positive-xs);
-}
+  /* Global - StackSpace - Constant */
+  --density-stack-space-const-3-xs: var(--space-0-p-25-x, 2px);
+  --density-stack-space-const-2-xs: var(--space-0-p-5-x, 4px);
+  --density-stack-space-const-xs: var(--space-0-p-75-x, 6px);
+  --density-stack-space-const-sm: var(--space-1-x, 8px);
+  --density-stack-space-const-md: var(--space-1-p-5-x, 12px);
+  --density-stack-space-const-lg: var(--space-2-x, 16px);
+  --density-stack-space-const-xl: var(--space-3-x, 24px);
+  --density-stack-space-const-2-xl: var(--space-4-x, 32px);
+  /* Global - StackSpace - Responsive - Xs */
+  --density-xs-stack-space-resp-sm: var(--space-1-x, 8px);
+  --density-xs-stack-space-resp-md: var(--space-1-p-5-x, 12px);
+  --density-xs-stack-space-resp-lg: var(--space-2-x, 16px);
+  --density-xs-stack-space-resp-xl: var(--space-3-x, 24px);
+  --density-xs-stack-space-resp-2-xl: var(--space-4-x, 32px);
+  /* Global - StackSpace - Responsive - Sm */
+  --density-sm-stack-space-resp-sm: var(--space-1-x, 8px);
+  --density-sm-stack-space-resp-md: var(--space-1-p-5-x, 12px);
+  --density-sm-stack-space-resp-lg: var(--space-2-x, 16px);
+  --density-sm-stack-space-resp-xl: var(--space-3-x, 24px);
+  --density-sm-stack-space-resp-2-xl: var(--space-4-x, 32px);
+  /* Global - StackSpace - Responsive - Md */
+  --density-md-stack-space-resp-sm: 12px;
+  --density-md-stack-space-resp-md: 16px;
+  --density-md-stack-space-resp-lg: 24px;
+  --density-md-stack-space-resp-xl: 32px;
+  --density-md-stack-space-resp-2-xl: 48px;
+  /* Global - StackSpace - Responsive - Lg */
+  --density-lg-stack-space-resp-sm: 16px;
+  --density-lg-stack-space-resp-md: 24px;
+  --density-lg-stack-space-resp-lg: 32px;
+  --density-lg-stack-space-resp-xl: 40px;
+  --density-lg-stack-space-resp-2-xl: 64px;
-[data-content-brand="sportbild"] .label-2-uppercase,
-:host([data-content-brand="sportbild"]) .label-2-uppercase {
-  font-family: var(--label-font-family);
-  font-weight: var(--label-font-weight-book);
-  font-size: var(--label-2-font-size);
-  line-height: var(--label-2-line-height);
-  letter-spacing: var(--letter-spacing-positive-xs);
-  text-transform: uppercase;
 }
-[data-content-brand="sportbild"] .label-2-bold,
-:host([data-content-brand="sportbild"]) .label-2-bold {
-  font-family: var(--label-font-family);
-  font-weight: var(--label-font-weight-bold);
-  font-size: var(--label-2-font-size);
-  line-height: var(--label-2-line-height);
-  letter-spacing: var(--letter-spacing-positive-xs);
-}
+[data-content-brand="sportbild"][data-density="dense"],
+:host([data-content-brand="sportbild"][data-density="dense"]) {
+  /* ============================================
+     GLOBAL
+     ============================================ */
-[data-content-brand="sportbild"] .label-2-uppercase-bold,
-:host([data-content-brand="sportbild"]) .label-2-uppercase-bold {
-  font-family: var(--label-font-family);
-  font-weight: var(--label-font-weight-bold);
-  font-size: var(--label-2-font-size);
-  line-height: var(--label-2-line-height);
-  letter-spacing: var(--letter-spacing-positive-xs);
-  text-transform: uppercase;
-}
+  /* Global - StackSpace - Constant */
+  --density-stack-space-const-3-xs: var(--space-0-p-25-x, 2px);
+  --density-stack-space-const-2-xs: var(--space-0-p-25-x, 2px);
+  --density-stack-space-const-xs: var(--space-0-p-25-x, 2px);
+  --density-stack-space-const-sm: var(--space-0-p-75-x, 6px);
+  --density-stack-space-const-md: var(--space-1-x, 8px);
+  --density-stack-space-const-lg: var(--space-1-p-5-x, 12px);
+  --density-stack-space-const-xl: var(--space-2-x, 16px);
+  --density-stack-space-const-2-xl: var(--space-3-x, 24px);
+  /* Global - StackSpace - Responsive - Xs */
+  --density-xs-stack-space-resp-sm: var(--space-0-p-75-x, 6px);
+  --density-xs-stack-space-resp-md: var(--space-1-x, 8px);
+  --density-xs-stack-space-resp-lg: var(--space-1-p-5-x, 12px);
+  --density-xs-stack-space-resp-xl: var(--space-2-x, 16px);
+  --density-xs-stack-space-resp-2-xl: var(--space-3-x, 24px);
+  /* Global - StackSpace - Responsive - Sm */
+  --density-sm-stack-space-resp-sm: var(--space-0-p-75-x, 6px);
+  --density-sm-stack-space-resp-md: var(--space-1-x, 8px);
+  --density-sm-stack-space-resp-lg: var(--space-1-p-5-x, 12px);
+  --density-sm-stack-space-resp-xl: var(--space-2-x, 16px);
+  --density-sm-stack-space-resp-2-xl: var(--space-3-x, 24px);
+  /* Global - StackSpace - Responsive - Md */
+  --density-md-stack-space-resp-sm: 8px;
+  --density-md-stack-space-resp-md: 12px;
+  --density-md-stack-space-resp-lg: 16px;
+  --density-md-stack-space-resp-xl: 24px;
+  --density-md-stack-space-resp-2-xl: 36px;
+  /* Global - StackSpace - Responsive - Lg */
+  --density-lg-stack-space-resp-sm: 12px;
+  --density-lg-stack-space-resp-md: 16px;
+  --density-lg-stack-space-resp-lg: 24px;
+  --density-lg-stack-space-resp-xl: 28px;
+  --density-lg-stack-space-resp-2-xl: 48px;
-[data-content-brand="sportbild"] .label-3,
-:host([data-content-brand="sportbild"]) .label-3 {
-  font-family: var(--label-font-family);
-  font-weight: var(--font-weight-book, 400);
-  font-size: var(--label-3-font-size);
-  line-height: var(--label-3-line-height);
-  letter-spacing: var(--letter-spacing-positive-xs);
 }
-[data-content-brand="sportbild"] .label-3-uppercase,
-:host([data-content-brand="sportbild"]) .label-3-uppercase {
-  font-family: var(--label-font-family);
-  font-weight: var(--label-font-weight-book);
-  font-size: var(--label-3-font-size);
-  line-height: var(--label-3-line-height);
-  letter-spacing: var(--letter-spacing-positive-sm);
-  text-transform: uppercase;
-}
+[data-content-brand="sportbild"][data-density="spacious"],
+:host([data-content-brand="sportbild"][data-density="spacious"]) {
+  /* ============================================
+     GLOBAL
+     ============================================ */
-[data-content-brand="sportbild"] .label-3-bold,
-:host([data-content-brand="sportbild"]) .label-3-bold {
-  font-family: var(--label-font-family);
-  font-weight: var(--font-weight-bold, 700);
-  font-size: var(--label-3-font-size);
-  line-height: var(--label-3-line-height);
-  letter-spacing: var(--letter-spacing-positive-xs);
-}
+  /* Global - StackSpace - Constant */
+  --density-stack-space-const-3-xs: var(--space-0-p-25-x, 2px);
+  --density-stack-space-const-2-xs: var(--space-0-p-5-x, 4px);
+  --density-stack-space-const-xs: var(--space-1-x, 8px);
+  --density-stack-space-const-sm: var(--space-1-p-25-x, 10px);
+  --density-stack-space-const-md: var(--space-1-p-75-x, 14px);
+  --density-stack-space-const-lg: var(--space-2-p-5-x, 20px);
+  --density-stack-space-const-xl: var(--space-3-p-5-x, 28px);
+  --density-stack-space-const-2-xl: var(--space-5-x, 40px);
-[data-content-brand="sportbild"] .label-3-uppercase-bold,
-:host([data-content-brand="sportbild"]) .label-3-uppercase-bold {
-  font-family: var(--label-font-family);
-  font-weight: var(--label-font-weight-bold);
-  font-size: var(--label-3-font-size);
-  line-height: var(--label-3-line-height);
-  letter-spacing: var(--letter-spacing-positive-sm);
-  text-transform: uppercase;
-}
+  /* Global - StackSpace - Responsive - Xs */
+  --density-xs-stack-space-resp-sm: var(--space-1-p-25-x, 10px);
+  --density-xs-stack-space-resp-md: var(--space-1-p-75-x, 14px);
+  --density-xs-stack-space-resp-lg: var(--space-2-p-5-x, 20px);
+  --density-xs-stack-space-resp-xl: var(--space-3-p-5-x, 28px);
+  --density-xs-stack-space-resp-2-xl: var(--space-5-x, 40px);
+  /* Global - StackSpace - Responsive - Sm */
+  --density-sm-stack-space-resp-sm: var(--space-1-p-25-x, 10px);
+  --density-sm-stack-space-resp-md: var(--space-1-p-75-x, 14px);
+  --density-sm-stack-space-resp-lg: var(--space-2-p-5-x, 20px);
+  --density-sm-stack-space-resp-xl: var(--space-3-p-5-x, 28px);
+  --density-sm-stack-space-resp-2-xl: var(--space-5-x, 40px);
+  /* Global - StackSpace - Responsive - Md */
+  --density-md-stack-space-resp-sm: 14px;
+  --density-md-stack-space-resp-md: 20px;
+  --density-md-stack-space-resp-lg: 28px;
+  --density-md-stack-space-resp-xl: 40px;
+  --density-md-stack-space-resp-2-xl: 60px;
+  /* Global - StackSpace - Responsive - Lg */
+  --density-lg-stack-space-resp-sm: 20px;
+  --density-lg-stack-space-resp-md: 28px;
+  --density-lg-stack-space-resp-lg: 40px;
+  --density-lg-stack-space-resp-xl: 48px;
+  --density-lg-stack-space-resp-2-xl: 80px;
-[data-content-brand="sportbild"] .quote,
-:host([data-content-brand="sportbild"]) .quote {
-  font-family: var(--quote-font-family);
-  font-weight: var(--quote-font-weight);
-  font-size: var(--quote-font-size);
-  line-height: var(--quote-line-height);
 }
@@ -1455,26 +1471,14 @@
 [data-content-brand="sportbild"] .accordion-label,
 :host([data-content-brand="sportbild"]) .accordion-label {
-  font-family: var(--font-family-inter, Inter);
+  font-family: var(--label-font-family);
   font-weight: var(--label-font-weight-bold);
   font-size: var(--label-1-font-size);
-}
-/* === BREAKPOINT TOKENS === */
-[data-content-brand="sportbild"],
-:host([data-content-brand="sportbild"]) {
-  --accordion-label-font-family: var(--font-family-inter, Inter);
+  line-height: var(--label-1-line-height);
 }
 /* === OTHER TOKENS === */
-[data-color-brand="sportbild"],
-:host([data-color-brand="sportbild"]) {
-  --alert-surface-color: var(--attention-color-extra-low);
-  --alert-surface-color-constant: var(--surface-color-primary-constant-light);
-}
 /* === TYPOGRAPHY TOKENS === */
 [data-content-brand="sportbild"] .article-kicker,
@@ -1486,92 +1490,57 @@
   font-style: italic;
 }
-[data-content-brand="sportbild"] .article-image-caption,
-:host([data-content-brand="sportbild"]) .article-image-caption {
-  font-family: var(--body-font-family);
-  font-weight: var(--font-weight-bold, 700);
-  font-size: var(--article-image-caption-font-size);
-  line-height: var(--article-image-caption-line-height);
-}
-[data-content-brand="sportbild"] .article-headline,
-:host([data-content-brand="sportbild"]) .article-headline {
-  font-family: var(--headline-font-family);
-  font-weight: 900;
-  font-size: var(--headline-2-font-size);
-  line-height: var(--headline-2-font-size);
-  font-style: italic;
-}
-[data-content-brand="sportbild"] .article-meta-source,
-:host([data-content-brand="sportbild"]) .article-meta-source {
-  font-family: var(--footnote-font-family);
-  font-weight: var(--footnote-font-weight-book);
-  font-size: 13px;
-  line-height: 17px;
-}
-[data-content-brand="sportbild"] .article-time-stamp,
-:host([data-content-brand="sportbild"]) .article-time-stamp {
-  font-family: var(--font-family-antenna-cond, AntennaCond);
-  font-weight: var(--font-weight-black, 800);
-  font-size: 12px;
-}
 /* === BREAKPOINT TOKENS === */
 [data-content-brand="sportbild"],
 :host([data-content-brand="sportbild"]) {
   --aricle-mobile-1-col-grid-image-margin-space: var(--space-0-x, 0px);
   --article-top-margin-space: var(--stack-space-resp-sm);
-  --article-kicker-font-size: var(--kicker-1-font-size);
-  --article-headline-font-size: var(--headline-2-font-size);
-  --article-gallery-ateaser-width: 145px;
-  --article-image-caption-font-size: 13px;
-  --article-image-source-font-size: 13px;
-  --article-image-caption-line-height: 16.9px;
-  --article-image-source-line-height: 17px;
   --article-content-stack-space: var(--stack-space-resp-lg);
   --article-headings-stack-space: var(--space-1-p-5-x, 12px);
   --article-image-landscape-inline-space: var(--space-0-x, 0px);
-  --article-meta-font-family: var(--font-family-antenna-cond, AntennaCond);
-  --article-meta-font-size: 12px;
   --article-content-inline-space: var(--space-2-x, 16px);
   --article-headings-inline-space: var(--space-2-x, 16px);
   --article-image-portait-inline-space: var(--space-0-x, 0px);
   --article-image-container-stack-space: var(--stack-space-resp-sm);
   --article-infobox-inline-space: var(--inline-space-resp-lg);
   --article-infobox-stack-space: var(--stack-space-resp-lg);
+  --article-kicker-font-size: var(--kicker-1-font-size);
+  --article-headline-font-size: var(--headline-2-font-size);
+  --article-image-caption-font-size: 13px;
+  --article-image-source-font-size: 13px;
+  --article-meta-font-size: 12px;
+  --article-image-caption-line-height: 16.9px;
+  --article-image-source-line-height: 17px;
+  --article-meta-font-family: var(--font-family-antenna-cond, AntennaCond);
 }
 @media (min-width: 600px) {
   [data-content-brand="sportbild"],
 :host([data-content-brand="sportbild"]) {
     --aricle-mobile-1-col-grid-image-margin-space: var(--space-9-x, 72px);
-    --article-headline-font-size: var(--headline-1-font-size);
-    --article-gallery-ateaser-width: 260px;
     --article-image-landscape-inline-space: var(--space-1-p-5-x, 12px);
-    --article-meta-font-size: 14px;
     --article-content-inline-space: var(--space-9-x, 72px);
     --article-headings-inline-space: var(--space-9-x, 72px);
     --article-image-portait-inline-space: var(--space-9-x, 72px);
+    --article-headline-font-size: var(--headline-1-font-size);
+    --article-meta-font-size: 14px;
   }
 }
 @media (min-width: 1024px) {
   [data-content-brand="sportbild"],
 :host([data-content-brand="sportbild"]) {
-    --article-gallery-ateaser-width: 300px;
-    --article-image-caption-font-size: 15px;
-    --article-image-source-font-size: 15px;
-    --article-image-caption-line-height: 19.5px;
-    --article-image-source-line-height: 19px;
     --article-headings-stack-space: var(--space-2-x, 16px);
     --article-image-landscape-inline-space: var(--space-2-x, 16px);
-    --article-meta-font-size: 16px;
     --article-content-inline-space: 162px;
     --article-headings-inline-space: var(--space-2-x, 16px);
     --article-image-portait-inline-space: 162px;
+    --article-image-caption-font-size: 15px;
+    --article-image-source-font-size: 15px;
+    --article-meta-font-size: 16px;
+    --article-image-caption-line-height: 19.5px;
+    --article-image-source-line-height: 19px;
   }
 }
@@ -1603,26 +1572,14 @@
 [data-color-brand="sportbild"][data-theme="light"],
 :host([data-color-brand="sportbild"][data-theme="light"]) {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --avatar-label-color: var(--color-neutral-45, #666B70);
-  --avatar-label-color-hover: var(--color-spobi-blue-29, #174482);
+  --avatar-label-color-hover: var(--text-color-hover);
 }
 /* === COLOR TOKENS (DARK MODE) === */
 [data-color-brand="sportbild"][data-theme="dark"],
 :host([data-color-brand="sportbild"][data-theme="dark"]) {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --avatar-label-color: var(--color-neutral-93, #E9ECEF);
-  --avatar-label-color-hover: var(--color-spobi-blue-29, #174482);
+  --avatar-label-color-hover: var(--icon-color-hover);
 }
 /* === TYPOGRAPHY TOKENS === */
@@ -1635,40 +1592,6 @@
   text-transform: uppercase;
 }
-[data-content-brand="sportbild"] .avatar-default,
-:host([data-content-brand="sportbild"]) .avatar-default {
-  font-family: var(--font-family-inter, Inter);
-  font-weight: var(--font-weight-bold, 700);
-  font-size: 13px;
-  line-height: 21px;
-}
-[data-content-brand="sportbild"] .avatar-hover,
-:host([data-content-brand="sportbild"]) .avatar-hover {
-  font-family: var(--font-family-inter, Inter);
-  font-weight: var(--label-font-weight-bold);
-  font-size: 13px;
-  line-height: 21px;
-  text-decoration: underline;
-}
-[data-content-brand="sportbild"] .avatar-secondary-info,
-:host([data-content-brand="sportbild"]) .avatar-secondary-info {
-  font-family: var(--font-family-inter, Inter);
-  font-weight: var(--label-font-weight-book);
-  font-size: 13px;
-  line-height: 21px;
-}
-[data-content-brand="sportbild"] .avatar-secondary-info-hover,
-:host([data-content-brand="sportbild"]) .avatar-secondary-info-hover {
-  font-family: var(--font-family-inter, Inter);
-  font-weight: var(--label-font-weight-book);
-  font-size: 13px;
-  line-height: 21px;
-  text-decoration: underline;
-}
 /* === BREAKPOINT TOKENS === */
 [data-content-brand="sportbild"],
@@ -1676,7 +1599,7 @@
   --avatar-label-font-size: 13px;
   --avatar-article-size: var(--size-const-md);
   --avatar-author-page-size: var(--size-12-x, 96px);
-  --avatar-font-family: var(--font-family-inter, Inter);
+  --avatar-font-family: var(--body-font-family);
   --avatar-label-line-height: 21px;
   --avatar-lane-gap-space: var(--space-2-x, 16px);
   --app-avatar-font-family: var(--title-font-family);
@@ -1698,6 +1621,13 @@
   }
 }
+/* === OTHER TOKENS === */
+[data-color-brand="sportbild"],
+:host([data-color-brand="sportbild"]) {
+  --avatar-label-color: var(--text-color-primary);
+}
 /* === TYPOGRAPHY TOKENS === */
 [data-content-brand="sportbild"] .video-ad-badge,
@@ -1708,14 +1638,6 @@
   text-transform: uppercase;
 }
-[data-content-brand="sportbild"] .video-time-badge,
-:host([data-content-brand="sportbild"]) .video-time-badge {
-  font-family: var(--font-family-inter, Inter);
-  font-weight: var(--label-font-weight-book);
-  font-size: 16px;
-  line-height: 21px;
-}
 /* === BREAKPOINT TOKENS === */
 [data-content-brand="sportbild"],
@@ -1725,71 +1647,27 @@
   --ad-label-badge-height-size: 30px;
 }
-/* === COLOR TOKENS (LIGHT MODE) === */
-[data-color-brand="sportbild"][data-theme="light"],
-:host([data-color-brand="sportbild"][data-theme="light"]) {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --breadcrumb-text-color-idle: var(--color-neutral-35, #4B525A);
-  --breadcrumb-text-color-hover: var(--color-neutral-15, #232629);
-}
-/* === COLOR TOKENS (DARK MODE) === */
-[data-color-brand="sportbild"][data-theme="dark"],
-:host([data-color-brand="sportbild"][data-theme="dark"]) {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --breadcrumb-text-color-idle: var(--color-neutral-96, #F2F4F5);
-  --breadcrumb-text-color-hover: var(--color-neutral-100, #FFFFFF);
-}
 /* === TYPOGRAPHY TOKENS === */
 [data-content-brand="sportbild"] .breadcrumb,
 :host([data-content-brand="sportbild"]) .breadcrumb {
-  font-family: var(--font-family-inter, Inter);
-  font-weight: var(--font-weight-bold, 700);
+  font-family: var(--body-font-family);
+  font-weight: var(--body-font-weight-bold);
   font-size: var(--breadcrumb-font-size);
   line-height: var(--breadcrumb-line-height);
 }
-[data-content-brand="sportbild"] .breadcrumb-link,
-:host([data-content-brand="sportbild"]) .breadcrumb-link {
-  font-family: var(--font-family-inter, Inter);
-  font-weight: var(--font-weight-book, 400);
-  font-size: 14px;
-  line-height: 14px;
-  text-decoration: underline;
-}
-[data-content-brand="sportbild"] .breadcrumb-link-hover,
-:host([data-content-brand="sportbild"]) .breadcrumb-link-hover {
-  font-family: var(--font-family-inter, Inter);
-  font-weight: var(--body-font-weight-bold);
-  font-size: 14px;
-  line-height: 14px;
-  text-decoration: underline;
-}
 /* === BREAKPOINT TOKENS === */
 [data-content-brand="sportbild"],
 :host([data-content-brand="sportbild"]) {
   --breadcrumb-font-size: 14px;
-  --breadcrumb-font-family: var(--font-family-inter, Inter);
+  --breadcrumb-font-family: var(--body-font-family);
   --breadcrumb-arrow-left-inline-space-1: 3px;
   --breadcrumb-arrow-right-inline-space-2: 5px;
   --breadcrumb-inline-space: var(--grid-space-resp-base);
   --breadcrumb-line-height: 14px;
-  --breadcrumb-font-weight: var(--font-weight-book, 400);
+  --breadcrumb-font-weight: var(--body-font-weight-bold);
   --breadcrumb-stack-space: 14px;
 }
@@ -1803,6 +1681,14 @@
   }
 }
+/* === OTHER TOKENS === */
+[data-color-brand="sportbild"],
+:host([data-color-brand="sportbild"]) {
+  --breadcrumb-text-color-idle: var(--text-color-idle);
+  --breadcrumb-text-color-hover: var(--text-color-hover);
+}
 /* === COLOR TOKENS (LIGHT MODE) === */
 [data-color-brand="sportbild"][data-theme="light"],
@@ -1811,9 +1697,9 @@
      OTHER
      ============================================ */
-  --breaking-news-title-surface-color: var(--color-spobi-blue-16, #0A2750);
+  --breaking-news-title-surface-color: var(--color-spobi-blue-20, #0C2F61);
   --breaking-news-surface-color: var(--color-yellow-80, #FFBF00);
-  --breaking-news-text-content-color: var(--color-neutral-15, #232629);
+  --breaking-news-text-content-color: var(--color-neutral-15, #222628);
   --breaking-news-top-title-text-color: var(--color-yellow-80, #FFBF00);
   --breaking-news-bottom-title-text-color: var(--color-neutral-100, #FFFFFF);
@@ -1827,9 +1713,9 @@
      OTHER
      ============================================ */
-  --breaking-news-title-surface-color: var(--color-spobi-blue-16, #0A2750);
+  --breaking-news-title-surface-color: var(--color-spobi-blue-20, #0C2F61);
   --breaking-news-surface-color: var(--color-yellow-80, #FFBF00);
-  --breaking-news-text-content-color: var(--color-neutral-15, #232629);
+  --breaking-news-text-content-color: var(--color-neutral-15, #222628);
   --breaking-news-top-title-text-color: var(--color-yellow-80, #FFBF00);
   --breaking-news-bottom-title-text-color: var(--color-neutral-100, #FFFFFF);
@@ -1846,22 +1732,6 @@
   text-transform: uppercase;
 }
-[data-content-brand="sportbild"] .breaking-news-upper-title,
-:host([data-content-brand="sportbild"]) .breaking-news-upper-title {
-  font-family: var(--title-font-family);
-  font-weight: var(--title-font-weight);
-  font-size: 13px;
-  line-height: 13px;
-}
-[data-content-brand="sportbild"] .breaking-news-lower-title,
-:host([data-content-brand="sportbild"]) .breaking-news-lower-title {
-  font-family: var(--title-font-family);
-  font-weight: var(--title-font-weight);
-  font-size: 23px;
-  line-height: 21px;
-}
 /* === BREAKPOINT TOKENS === */
 [data-content-brand="sportbild"],
@@ -1895,52 +1765,6 @@
   }
 }
-/* === COLOR TOKENS (LIGHT MODE) === */
-[data-color-brand="sportbild"][data-theme="light"],
-:host([data-color-brand="sportbild"][data-theme="light"]) {
-  --button-primary-brand-bg-color-idle: var(--color-spobi-blue-29, #174482);
-  --button-primary-brand-bg-color-hover: var(--color-spobi-blue-16, #0A2750);
-  --button-primary-label-color: var(--color-neutral-100, #FFFFFF);
-  --button-primary-success-color-idle: var(--color-green-56, #18995C);
-  --button-primary-success-color-hover: var(--color-green-40, #006E3E);
-  --button-primary-neutral-bg-color-idle: var(--color-neutral-15, #232629);
-  --button-primary-neutral-bg-color-hover: var(--color-neutral-35, #4B525A);
-  --button-tertiary-label-color: var(--color-neutral-35, #4B525A);
-  --button-tertiary-border-color-idle: var(--color-neutral-85, #CED4DA);
-  --button-tertiary-border-color-hover: var(--color-neutral-35, #4B525A);
-  --button-tertiary-success-bg-color-hover: var(--color-green-93, #CEF4E4);
-  --button-tertiary-success-border-color: var(--color-green-56, #18995C);
-  --button-secondary-bg-color-hover: var(--color-neutral-85, #CED4DA);
-  --button-secondary-label-color: var(--color-neutral-35, #4B525A);
-  --button-secondary-bg-color-idle: var(--color-neutral-93, #E9ECEF);
-  --button-live-ticker-load-new-label-color: var(--color-neutral-60, #8C9196);
-  --button-ghost-bg-color-hover: var(--color-neutral-85, #CED4DA);
-}
-/* === COLOR TOKENS (DARK MODE) === */
-[data-color-brand="sportbild"][data-theme="dark"],
-:host([data-color-brand="sportbild"][data-theme="dark"]) {
-  --button-primary-brand-bg-color-idle: var(--color-spobi-blue-38, #315998);
-  --button-primary-brand-bg-color-hover: var(--color-spobi-blue-29, #174482);
-  --button-primary-label-color: var(--color-neutral-100, #FFFFFF);
-  --button-primary-success-color-idle: var(--color-green-56, #18995C);
-  --button-primary-success-color-hover: var(--color-green-40, #006E3E);
-  --button-primary-neutral-bg-color-idle: var(--color-neutral-100, #FFFFFF);
-  --button-primary-neutral-bg-color-hover: var(--color-spobi-blue-81, #BDCADB);
-  --button-tertiary-label-color: var(--color-neutral-96, #F2F4F5);
-  --button-tertiary-border-color-idle: var(--color-neutral-35, #4B525A);
-  --button-tertiary-border-color-hover: var(--color-neutral-100, #FFFFFF);
-  --button-tertiary-success-bg-color-hover: var(--color-green-56-a-50, rgba(0, 155, 90, 0.5));
-  --button-tertiary-success-border-color: var(--color-green-56, #18995C);
-  --button-secondary-bg-color-hover: var(--alpha-neutral-85-a-50, rgba(206, 212, 218, 0.5));
-  --button-secondary-label-color: var(--color-neutral-93, #E9ECEF);
-  --button-secondary-bg-color-idle: var(--color-neutral-35, #4B525A);
-  --button-live-ticker-load-new-label-color: var(--color-neutral-96, #F2F4F5);
-  --button-ghost-bg-color-hover: var(--alpha-neutral-85-a-50, rgba(206, 212, 218, 0.5));
-}
 /* === DENSITY TOKENS === */
 [data-content-brand="sportbild"][data-density="default"],
@@ -1953,6 +1777,7 @@
   --density-button-stack-space: var(--space-1-x, 8px);
   --density-button-label-font-size: 17px;
   --density-button-inline-space: var(--space-2-p-5-x, 20px);
+  --density-button-height-size: var(--size-5-x, 40px);
 }
@@ -1966,6 +1791,7 @@
   --density-button-stack-space: var(--space-0-p-75-x, 6px);
   --density-button-label-font-size: 15px;
   --density-button-inline-space: var(--space-2-x, 16px);
+  --density-button-height-size: var(--size-4-p-5-x, 36px);
 }
@@ -1979,6 +1805,7 @@
   --density-button-stack-space: var(--space-1-p-5-x, 12px);
   --density-button-label-font-size: 19px;
   --density-button-inline-space: var(--space-3-x, 24px);
+  --density-button-height-size: var(--size-6-x, 48px);
 }
@@ -1990,19 +1817,11 @@
   font-weight: 700;
   font-size: var(--button-label-font-size);
   line-height: var(--button-label-line-height);
-  letter-spacing: var(--letter-spacing-positive-sm);
+  letter-spacing: var(--letter-space-positive-sm);
   font-style: italic;
   text-transform: uppercase;
 }
-[data-content-brand="sportbild"] .partner-link-button-label,
-:host([data-content-brand="sportbild"]) .partner-link-button-label {
-  font-family: var(--label-font-family);
-  font-weight: var(--label-font-weight-book);
-  font-size: var(--partner-link-button-label-font-size);
-  line-height: 16px;
-}
 /* === BREAKPOINT TOKENS === */
 [data-content-brand="sportbild"],
@@ -2019,6 +1838,7 @@
   --button-stack-space: var(--density-button-stack-space);
   --button-border-radius: var(--border-radius-md);
   --button-label-font-family: var(--label-font-family);
+  --button-height-size: var(--density-button-height-size);
 }
 @media (min-width: 1024px) {
@@ -2032,7 +1852,36 @@
 [data-color-brand="sportbild"],
 :host([data-color-brand="sportbild"]) {
-  --button-live-ticker-load-new-surface-color: var(--surface-color-primary);
+  --button-primary-brand-bg-color-idle: var(--bg-color-brand-solid);
+  --button-primary-brand-bg-color-hover: var(--bg-color-brand-solid-hover);
+  --button-primary-brand-label-color: var(--text-color-primary-on-dark);
+  --button-primary-brand-bg-color-active: var(--bg-color-brand-solid-active);
+  --button-tertiary-neutral-label-color: var(--text-color-active);
+  --button-tertiary-neutral-border-color-idle: var(--border-color-idle);
+  --button-tertiary-neutral-border-color-hover: var(--border-color-focus);
+  --button-tertiary-neutral-bg-color-hover: var(--bg-color-secondary);
+  --button-tertiary-neutral-bg-color-active: var(--bg-color-tertiary);
+  --button-secondary-bg-color-hover: var(--bg-color-quaternary);
+  --button-secondary-label-color: var(--text-color-active);
+  --button-secondary-bg-color-idle: var(--bg-color-tertiary);
+  --button-secondary-bg-color-active: var(--bg-color-quaternary);
+  --button-primary-success-bg-color-idle: var(--bg-color-success-solid);
+  --button-primary-success-bg-color-hover: var(--bg-color-success-solid-hover);
+  --button-primary-success-bg-color-active: var(--bg-color-success-solid-active);
+  --button-primary-success-label-color: var(--text-color-primary-on-dark);
+  --button-tertiary-success-bg-color-hover: var(--bg-color-success-tint-hover);
+  --button-tertiary-success-border-color: var(--border-color-success);
+  --button-tertiary-success-label-color: var(--text-color-success);
+  --button-primary-neutral-bg-color-idle: var(--bg-color-primary-inverse);
+  --button-primary-neutral-bg-color-hover: var(--bg-color-tertiary-inverse);
+  --button-primary-neutral-label-color: var(--text-color-inverse-high-contrast);
+  --button-primary-neutral-bg-color-active: var(--bg-color-quaternary-inverse);
+  --button-ghost-bg-color-hover: var(--bg-color-tertiary);
+  --button-ghost-label-color: var(--text-color-active);
+  --button-ghost-bg-color-active: var(--bg-color-quaternary);
+  --button-disabled-label-color: var(--text-color-disabled);
+  --button-disabled-bg-color: var(--bg-color-disabled);
+  --button-disabled-border-color: var(--border-color-disabled);
 }
 /* === COLOR TOKENS (LIGHT MODE) === */
@@ -2043,7 +1892,7 @@
      OTHER
      ============================================ */
-  --card-surface-bg-color: var(--surface-color-primary);
+  --card-surface-bg-color: var(--bg-color-primary);
 }
@@ -2055,7 +1904,7 @@
      OTHER
      ============================================ */
-  --card-surface-bg-color: var(--surface-color-secondary);
+  --card-surface-bg-color: var(--bg-color-secondary);
 }
@@ -2112,32 +1961,16 @@
 [data-color-brand="sportbild"][data-theme="light"],
 :host([data-color-brand="sportbild"][data-theme="light"]) {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --chip-bg-color-hover: var(--color-bild-red-35, #AF0002);
-  --chip-label-color-hover: var(--core-color-secondary-constant);
-  --chip-bg-color-active: var(--color-spobi-blue-29, #174482);
-  --chip-bg-color-idle: var(--color-neutral-93, #E9ECEF);
-  --chip-label-color-idle: var(--color-neutral-15, #232629);
+  --chip-bg-color-hover: var(--bg-color-brand-solid-hover);
+  --chip-label-color-hover: var(--text-color-primary-on-dark);
 }
 /* === COLOR TOKENS (DARK MODE) === */
 [data-color-brand="sportbild"][data-theme="dark"],
 :host([data-color-brand="sportbild"][data-theme="dark"]) {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --chip-bg-color-hover: var(--color-neutral-85, #CED4DA);
-  --chip-label-color-hover: var(--core-color-tertiary-constant);
-  --chip-bg-color-active: var(--color-spobi-blue-38, #315998);
-  --chip-bg-color-idle: var(--color-neutral-35, #4B525A);
-  --chip-label-color-idle: var(--color-neutral-100, #FFFFFF);
+  --chip-bg-color-hover: var(--bg-color-tertiary-inverse);
+  --chip-label-color-hover: var(--text-color-primary-on-light);
 }
 /* === TYPOGRAPHY TOKENS === */
@@ -2165,12 +1998,22 @@
   }
 }
+/* === OTHER TOKENS === */
+[data-color-brand="sportbild"],
+:host([data-color-brand="sportbild"]) {
+  --chip-bg-color-active: var(--bg-color-brand-light-only);
+  --chip-bg-color-idle: var(--bg-color-tertiary);
+  --chip-label-color-idle: var(--text-color-idle);
+  --chip-label-color-active: var(--text-color-inverse-high-contrast);
+}
 /* === BREAKPOINT TOKENS === */
 [data-content-brand="sportbild"],
 :host([data-content-brand="sportbild"]) {
-  --datepicker-item-day-width-size: 44px;
-  --datepicker-item-height-size: 44px;
+  --datepicker-item-day-width-size: var(--size-5-p-5-x, 44px);
+  --datepicker-item-height-size: var(--size-5-p-5-x, 44px);
   --datepicker-item-year-width-size: 77px;
 }
@@ -2192,8 +2035,8 @@
      OTHER
      ============================================ */
-  --dropdown-bg-color-hover: var(--surface-color-secondary);
-  --dropdown-bg-color-idle: var(--surface-color-primary);
+  --dropdown-bg-color-hover: var(--bg-color-secondary);
+  --dropdown-bg-color-idle: var(--bg-color-primary);
 }
@@ -2205,8 +2048,8 @@
      OTHER
      ============================================ */
-  --dropdown-bg-color-hover: var(--surface-color-quartenary);
-  --dropdown-bg-color-idle: var(--surface-color-tertiary);
+  --dropdown-bg-color-hover: var(--bg-color-quaternary);
+  --dropdown-bg-color-idle: var(--bg-color-tertiary);
 }
@@ -2227,8 +2070,8 @@
      OTHER
      ============================================ */
-  --empties-bg-color: var(--surface-color-secondary);
-  --empties-logo-color: var(--color-neutral-85, #CED4DA);
+  --empties-bg-color: var(--bg-color-secondary);
+  --empties-logo-color: var(--bg-color-quaternary);
 }
@@ -2240,73 +2083,28 @@
      OTHER
      ============================================ */
-  --empties-bg-color: var(--surface-color-tertiary);
-  --empties-logo-color: var(--color-neutral-20, #2C3138);
+  --empties-bg-color: var(--bg-color-tertiary);
+  --empties-logo-color: var(--bg-color-secondary);
 }
-/* === COLOR TOKENS (LIGHT MODE) === */
-[data-color-brand="sportbild"][data-theme="light"],
-:host([data-color-brand="sportbild"][data-theme="light"]) {
-  --foldout-label-color-active: var(--color-primary-active);
-}
-/* === COLOR TOKENS (DARK MODE) === */
-[data-color-brand="sportbild"][data-theme="dark"],
-:host([data-color-brand="sportbild"][data-theme="dark"]) {
-  --foldout-label-color-active: var(--color-secondary-active);
-}
-/* === OTHER TOKENS === */
-[data-color-brand="sportbild"],
-:host([data-color-brand="sportbild"]) {
-  --foldout-label-color-idle: var(--label-color-secondary);
-}
 /* === TYPOGRAPHY TOKENS === */
-[data-content-brand="sportbild"] .footer-card-link,
-:host([data-content-brand="sportbild"]) .footer-card-link {
-  font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
-  font-weight: var(--font-weight-book, 400);
-  font-size: var(--label-2-font-size);
-  text-decoration: underline;
-}
-[data-content-brand="sportbild"] .footer-link-separator,
-:host([data-content-brand="sportbild"]) .footer-link-separator {
-  font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
-  font-weight: var(--font-weight-book, 400);
-}
-[data-content-brand="sportbild"] .footer-links,
-:host([data-content-brand="sportbild"]) .footer-links {
-  font-family: var(--font-family-inter, Inter);
+[data-content-brand="sportbild"] .footer-link,
+:host([data-content-brand="sportbild"]) .footer-link {
+  font-family: var(--body-font-family);
   font-weight: var(--label-font-weight-bold);
   font-size: 11px;
   line-height: 14px;
 }
-[data-content-brand="sportbild"] .footer-link-user-offer-pages,
-:host([data-content-brand="sportbild"]) .footer-link-user-offer-pages {
-  font-family: var(--font-family-inter, Inter);
-  font-weight: var(--font-weight-book, 400);
-  font-size: 18px;
-  line-height: 26px;
-}
 /* === BREAKPOINT TOKENS === */
 [data-content-brand="sportbild"],
 :host([data-content-brand="sportbild"]) {
   --footer-font-size: 11px;
   --footer-line-height: 14px;
-  --footer-font-family: var(--font-family-inter, Inter);
-  --footer-font-size-user-offer-pages: 18px;
-  --footer-line-height-user-offer-pages: 26px;
+  --footer-font-family: var(--body-font-family);
 }
 /* === COLOR TOKENS (LIGHT MODE) === */
@@ -2333,35 +2131,43 @@
 }
-/* === COLOR TOKENS (LIGHT MODE) === */
+/* === BREAKPOINT TOKENS === */
-[data-color-brand="sportbild"][data-theme="light"],
-:host([data-color-brand="sportbild"][data-theme="light"]) {
+[data-content-brand="sportbild"],
+:host([data-content-brand="sportbild"]) {
+  --icon-size: var(--size-const-2-xs);
+  --icon-size-embedd-media: 40px;
+}
+/* === DENSITY TOKENS === */
+[data-content-brand="sportbild"][data-density="default"],
+:host([data-content-brand="sportbild"][data-density="default"]) {
   /* ============================================
      OTHER
      ============================================ */
-  --hey-fav-input-field-surface-color: var(--color-neutral-93, #E9ECEF);
-  --hey-text-color: var(--color-neutral-35, #4B525A);
-  --hey-icon-util-color: var(--color-neutral-35, #4B525A);
-  --hey-separator-color: var(--color-neutral-85, #CED4DA);
-  --hey-drawer-surface-color: var(--surface-color-secondary);
+  --density-icon-button-size: var(--size-6-x, 48px);
 }
-/* === COLOR TOKENS (DARK MODE) === */
+[data-content-brand="sportbild"][data-density="dense"],
+:host([data-content-brand="sportbild"][data-density="dense"]) {
+  /* ============================================
+     OTHER
+     ============================================ */
-[data-color-brand="sportbild"][data-theme="dark"],
-:host([data-color-brand="sportbild"][data-theme="dark"]) {
+  --density-icon-button-size: var(--size-5-x, 40px);
+}
+[data-content-brand="sportbild"][data-density="spacious"],
+:host([data-content-brand="sportbild"][data-density="spacious"]) {
   /* ============================================
      OTHER
      ============================================ */
-  --hey-fav-input-field-surface-color: var(--color-neutral-35, #4B525A);
-  --hey-text-color: var(--color-neutral-93, #E9ECEF);
-  --hey-icon-util-color: var(--color-neutral-100, #FFFFFF);
-  --hey-separator-color: var(--color-neutral-45, #666B70);
-  --hey-drawer-surface-color: var(--surface-color-tertiary);
+  --density-icon-button-size: var(--size-7-x, 56px);
 }
@@ -2369,8 +2175,8 @@
 [data-content-brand="sportbild"],
 :host([data-content-brand="sportbild"]) {
-  --icon-size: var(--size-const-2-xs);
-  --icon-size-embedd-media: 40px;
+  --icon-button-size: var(--density-icon-button-size);
+  --icon-button-border-radius: var(--border-radius-md);
 }
 /* === BREAKPOINT TOKENS === */
@@ -2401,30 +2207,6 @@
   }
 }
-/* === COLOR TOKENS (LIGHT MODE) === */
-[data-color-brand="sportbild"][data-theme="light"],
-:host([data-color-brand="sportbild"][data-theme="light"]) {
-  --input-field-border-color-idle: var(--color-neutral-85, #CED4DA);
-  --input-field-border-color-active: var(--color-neutral-35, #4B525A);
-  --input-field-border-color-dark: var(--color-neutral-60, #8C9196);
-  --input-field-bg-color-dark-low-contrast: var(--color-neutral-25, #343C41);
-  --input-field-bg-color-dark-medium-contrast: var(--color-neutral-35, #4B525A);
-  --input-field-bg-color-dark-high-contrast: var(--color-neutral-93, #E9ECEF);
-}
-/* === COLOR TOKENS (DARK MODE) === */
-[data-color-brand="sportbild"][data-theme="dark"],
-:host([data-color-brand="sportbild"][data-theme="dark"]) {
-  --input-field-border-color-idle: var(--color-neutral-60, #8C9196);
-  --input-field-border-color-active: var(--color-neutral-93, #E9ECEF);
-  --input-field-border-color-dark: var(--color-neutral-85, #CED4DA);
-  --input-field-bg-color-dark-low-contrast: var(--color-neutral-25, #343C41);
-  --input-field-bg-color-dark-medium-contrast: var(--color-neutral-35, #4B525A);
-  --input-field-bg-color-dark-high-contrast: var(--color-neutral-93, #E9ECEF);
-}
 /* === DENSITY TOKENS === */
 [data-content-brand="sportbild"][data-density="default"],
@@ -2437,6 +2219,7 @@
   --density-input-field-stack-space: var(--space-1-x, 8px);
   --density-input-field-height-size: var(--size-5-x, 40px);
   --density-input-field-label-font-size: 17px;
+  --density-input-field-label-line-height: 17px;
 }
@@ -2450,6 +2233,7 @@
   --density-input-field-stack-space: var(--space-0-p-75-x, 6px);
   --density-input-field-height-size: var(--size-4-p-5-x, 36px);
   --density-input-field-label-font-size: 16px;
+  --density-input-field-label-line-height: 16px;
 }
@@ -2463,14 +2247,15 @@
   --density-input-field-stack-space: var(--space-1-p-5-x, 12px);
   --density-input-field-height-size: var(--size-6-x, 48px);
   --density-input-field-label-font-size: 19px;
+  --density-input-field-label-line-height: 19px;
 }
 /* === TYPOGRAPHY TOKENS === */
-[data-content-brand="sportbild"] .text-input-field-label,
-:host([data-content-brand="sportbild"]) .text-input-field-label {
-  font-family: var(--font-family-inter, Inter);
+[data-content-brand="sportbild"] .input-field-label,
+:host([data-content-brand="sportbild"]) .input-field-label {
+  font-family: var(--body-font-family);
   font-weight: var(--label-font-weight-book);
   font-size: 16px;
   line-height: 16px;
@@ -2482,19 +2267,21 @@
 :host([data-content-brand="sportbild"]) {
   --input-field-stack-space: var(--density-input-field-stack-space);
   --input-field-inline-space: var(--density-input-field-inline-space);
-  --input-field-mini-label-inline-space: var(--space-0-p-5-x, 4px);
-  --input-field-font-size: var(--density-input-field-label-font-size);
+  --input-field-mini-label-inline-space: var(--inline-space-const-2-xs);
+  --input-field-label-font-size: var(--density-input-field-label-font-size);
   --input-field-imessage-inline-space: var(--inline-space-const-lg);
   --input-field-height-size: var(--density-input-field-height-size);
   --hey-input-container-inline-space: var(--inline-space-const-sm);
   --input-field-message-gap-space: var(--gap-space-const-xs);
-  --input-field-font-family: var(--font-family-inter, Inter);
+  --input-field-label-font-family: var(--body-font-family);
+  --input-field-label-line-height: var(--density-input-field-label-line-height);
 }
 @media (min-width: 1024px) {
   [data-content-brand="sportbild"],
 :host([data-content-brand="sportbild"]) {
     --hey-input-container-inline-space: var(--inline-space-const-lg);
+    --input-field-label-line-height: var(--density-input-field-label-font-size);
   }
 }
@@ -2502,7 +2289,9 @@
 [data-color-brand="sportbild"],
 :host([data-color-brand="sportbild"]) {
-  --input-field-border-color-dark-active: var(--border-color-high-contrast);
+  --input-field-border-color-idle: var(--border-color-idle);
+  --input-field-border-color-active: var(--border-color-focus);
+  --input-field-border-color-disabled: var(--border-color-disabled);
 }
 /* === COLOR TOKENS (LIGHT MODE) === */
@@ -2513,7 +2302,7 @@
      STANDARD
      ============================================ */
-  --kicker-bg-color-on-surface: var(--color-spobi-blue-29, #174482);
+  --kicker-bg-color-on-surface: var(--bg-color-brand-solid);
   /* ============================================
@@ -2528,7 +2317,7 @@
   --kicker-kaufberater-bg-color: var(--color-partner-kaufberater, #55476E);
   --kicker-cobi-bg-color: var(--color-cobi-red-50, #DC231C);
   --kicker-aubi-bg-color: var(--color-aubi-red-50, #F00000);
-  --kicker-spobi-bg-color: var(--color-spobi-blue-29, #174482);
+  --kicker-spobi-bg-color: var(--color-spobi-blue-30, #174482);
   --kicker-bz-bg-color: var(--color-bz-red-50, #E3001B);
 }
@@ -2541,7 +2330,7 @@
      STANDARD
      ============================================ */
-  --kicker-bg-color-on-surface: var(--color-neutral-60, #8C9196);
+  --kicker-bg-color-on-surface: var(--bg-color-quaternary-inverse);
   /* ============================================
@@ -2556,7 +2345,7 @@
   --kicker-kaufberater-bg-color: var(--color-partner-kaufberater, #55476E);
   --kicker-cobi-bg-color: var(--color-cobi-red-50, #DC231C);
   --kicker-aubi-bg-color: var(--color-aubi-red-50, #F00000);
-  --kicker-spobi-bg-color: var(--color-spobi-blue-29, #174482);
+  --kicker-spobi-bg-color: var(--color-spobi-blue-30, #174482);
   --kicker-bz-bg-color: var(--color-bz-red-50, #E3001B);
 }
@@ -2571,14 +2360,6 @@
   line-height: 22px;
 }
-[data-content-brand="sportbild"] .live-ticker-time-stamp,
-:host([data-content-brand="sportbild"]) .live-ticker-time-stamp {
-  font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
-  font-weight: var(--label-font-weight-bold);
-  font-size: var(--live-ticker-time-stamp-font-size);
-  line-height: 14px;
-}
 /* === BREAKPOINT TOKENS === */
 [data-content-brand="sportbild"],
@@ -2618,16 +2399,17 @@
      OTHER
      ============================================ */
-  --vid-player-controls-autoplay-button-bg-color: var(--alpha-black-20, rgba(0, 0, 0, 0.2));
-  --vid-player-control-buttons-bg-hover-color: var(--alpha-red-50-a-80, rgba(221, 0, 0, 0.8));
-  --vid-player-control-buttons-bg-color-hover: var(--alpha-black-20, rgba(0, 0, 0, 0.2));
-  --vid-player-overlay-scrim-color: var(--alpha-black-50, rgba(0, 0, 0, 0.5));
-  --audio-player-play-button-bg-color: var(--alpha-white-30, rgba(255, 255, 255, 0.3));
-  --vid-player-tooltip-bg-color: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
-  --vid-player-control-buttons-bg-color-pressed: var(--alpha-black-5, rgba(0, 0, 0, 0.05));
-  --vid-player-progress-bar-preload-bg-color: var(--alpha-white-30, rgba(255, 255, 255, 0.3));
-  --vid-player-unmute-button-bg-color: var(--alpha-black-20, rgba(0, 0, 0, 0.2));
-  --vid-player-unmute-button-bg-color-hover: var(--alpha-black-35, rgba(0, 0, 0, 0.35));
+  --vid-player-controls-autoplay-button-bg-color: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
+  --vid-player-control-buttons-bg-hover-color: var(--color-bild-red-50-a-80, rgba(221, 0, 0, 0.8));
+  --vid-player-control-buttons-bg-color-hover: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
+  --vid-player-overlay-scrim-color: var(--color-neutral-0-a-50, rgba(0, 0, 0, 0.5));
+  --audio-player-play-button-bg-color: var(--color-neutral-100-a-30, rgba(255, 255, 255, 0.3));
+  --vid-player-tooltip-bg-color: var(--color-neutral-0-a-70, rgba(0, 0, 0, 0.7));
+  --vid-player-control-buttons-bg-color-pressed: var(--color-neutral-0-a-5, rgba(0, 0, 0, 0.05));
+  --vid-player-progress-bar-preload-bg-color: var(--color-neutral-100-a-30, rgba(255, 255, 255, 0.3));
+  --vid-player-unmute-button-bg-color: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
+  --vid-player-unmute-button-bg-color-hover: var(--color-neutral-0-a-35, rgba(0, 0, 0, 0.35));
+  --vid-player-progress-bar-ad-bg-color: var(--color-yellow-80, #FFBF00);
 }
@@ -2639,16 +2421,17 @@
      OTHER
      ============================================ */
-  --vid-player-controls-autoplay-button-bg-color: var(--alpha-black-20, rgba(0, 0, 0, 0.2));
-  --vid-player-control-buttons-bg-hover-color: var(--alpha-red-50-a-80, rgba(221, 0, 0, 0.8));
-  --vid-player-control-buttons-bg-color-hover: var(--alpha-black-20, rgba(0, 0, 0, 0.2));
-  --vid-player-overlay-scrim-color: var(--alpha-black-50, rgba(0, 0, 0, 0.5));
-  --audio-player-play-button-bg-color: var(--alpha-white-30, rgba(255, 255, 255, 0.3));
-  --vid-player-tooltip-bg-color: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
-  --vid-player-control-buttons-bg-color-pressed: var(--alpha-black-5, rgba(0, 0, 0, 0.05));
-  --vid-player-progress-bar-preload-bg-color: var(--alpha-white-30, rgba(255, 255, 255, 0.3));
-  --vid-player-unmute-button-bg-color: var(--alpha-black-20, rgba(0, 0, 0, 0.2));
-  --vid-player-unmute-button-bg-color-hover: var(--alpha-black-35, rgba(0, 0, 0, 0.35));
+  --vid-player-controls-autoplay-button-bg-color: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
+  --vid-player-control-buttons-bg-hover-color: var(--color-bild-red-50-a-80, rgba(221, 0, 0, 0.8));
+  --vid-player-control-buttons-bg-color-hover: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
+  --vid-player-overlay-scrim-color: var(--color-neutral-0-a-50, rgba(0, 0, 0, 0.5));
+  --audio-player-play-button-bg-color: var(--color-neutral-100-a-30, rgba(255, 255, 255, 0.3));
+  --vid-player-tooltip-bg-color: var(--color-neutral-0-a-70, rgba(0, 0, 0, 0.7));
+  --vid-player-control-buttons-bg-color-pressed: var(--color-neutral-0-a-5, rgba(0, 0, 0, 0.05));
+  --vid-player-progress-bar-preload-bg-color: var(--color-neutral-100-a-30, rgba(255, 255, 255, 0.3));
+  --vid-player-unmute-button-bg-color: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
+  --vid-player-unmute-button-bg-color-hover: var(--color-neutral-0-a-35, rgba(0, 0, 0, 0.35));
+  --vid-player-progress-bar-ad-bg-color: var(--color-yellow-80, #FFBF00);
 }
@@ -2662,22 +2445,6 @@
   line-height: 16px;
 }
-[data-content-brand="sportbild"] .video-ad-time,
-:host([data-content-brand="sportbild"]) .video-ad-time {
-  font-family: var(--font-family-gotham, Gotham);
-  font-weight: var(--title-font-weight);
-  font-size: 14px;
-  text-transform: uppercase;
-}
-[data-content-brand="sportbild"] .video-player-time,
-:host([data-content-brand="sportbild"]) .video-player-time {
-  font-family: var(--title-font-family);
-  font-weight: var(--title-font-weight);
-  font-size: 14px;
-  text-transform: uppercase;
-}
 /* === BREAKPOINT TOKENS === */
 [data-content-brand="sportbild"],
@@ -2685,13 +2452,13 @@
   --podcast-play-button-size: var(--size-6-x, 48px);
   --vid-player-bottom-bar-gap-space: 0px;
   --audio-player-header-stack-space: var(--size-7-x, 56px);
-  --video-time-badge-font-family: var(--font-family-inter, Inter);
+  --video-time-badge-font-family: var(--body-font-family);
   --vid-player-control-button-size: var(--size-5-p-25-x, 42px);
   --vid-player-control-button-icon-size-hover: var(--size-3-p-5-x, 28px);
   --vid-player-timecode-font-size: 14px;
   --vid-player-timecode-container-min-width-size: 45px;
   --vid-player-progress-bar-container-height-size: 24px;
-  --vid-player-unmute-button-width-size: 220;
+  --vid-player-unmute-button-width-size: 220px;
 }
 @media (min-width: 600px) {
@@ -2715,29 +2482,27 @@
 [data-color-brand="sportbild"][data-theme="light"],
 :host([data-color-brand="sportbild"][data-theme="light"]) {
-  --menu-scrolled-surface-gradient-color: rgba(255, 255, 255, 0.95);
-  --menu-link-lane-surface-color: var(--color-spobi-blue-16, #0A2750);
-  --menu-link-lane-label-color: var(--color-neutral-85, #CED4DA);
-  --menu-link-lane-label-color-active: var(--color-neutral-100, #FFFFFF);
-  --app-top-bar-surface-color: var(--color-spobi-blue-16, #0A2750);
-  --app-top-bar-icon-color: var(--color-neutral-60, #8C9196);
-  --app-top-bar-text-color-primary: var(--color-neutral-93, #E9ECEF);
-  --app-tob-bar-tab-nav-bottom-border: var(--color-spobi-blue-29, #174482);
-  --app-tob-bar-tab-nav-bottom-border-active: var(--color-neutral-85, #CED4DA);
+  --menu-scrolled-surface-gradient-color: var(--color-neutral-100-a-95, rgba(255, 255, 255, 0.95));
+  --menu-link-lane-surface-color: var(--color-spobi-blue-20, #0C2F61);
+  --menu-link-lane-label-color: var(--color-neutral-80, #C4C9CF);
+  --menu-link-lane-label-color-hover: var(--color-neutral-100, #FFFFFF);
+  --app-top-bar-surface-color: var(--color-spobi-blue-20, #0C2F61);
+  --app-top-bar-text-color-primary: var(--color-spobi-blue-90, #D6E1F2);
+  --app-tob-bar-tab-nav-bottom-border: var(--color-spobi-blue-30, #174482);
+  --app-tob-bar-tab-nav-bottom-border-active: var(--color-neutral-80, #C4C9CF);
 }
 /* === COLOR TOKENS (DARK MODE) === */
 [data-color-brand="sportbild"][data-theme="dark"],
 :host([data-color-brand="sportbild"][data-theme="dark"]) {
-  --menu-scrolled-surface-gradient-color: rgba(35, 38, 41, 0.95);
-  --menu-link-lane-surface-color: var(--color-spobi-blue-16, #0A2750);
-  --menu-link-lane-label-color: var(--color-neutral-73, #AEB4B9);
-  --menu-link-lane-label-color-active: var(--color-spobi-blue-98, #F7F9FD);
-  --app-top-bar-surface-color: var(--color-spobi-blue-16, #0A2750);
-  --app-top-bar-icon-color: var(--color-neutral-60, #8C9196);
-  --app-top-bar-text-color-primary: var(--color-neutral-93, #E9ECEF);
-  --app-tob-bar-tab-nav-bottom-border: var(--color-spobi-blue-29, #174482);
+  --menu-scrolled-surface-gradient-color: rgba(34, 38, 40, 0.95);
+  --menu-link-lane-surface-color: var(--color-spobi-blue-20, #0C2F61);
+  --menu-link-lane-label-color: var(--color-neutral-70, #A6ABB0);
+  --menu-link-lane-label-color-hover: var(--color-spobi-blue-95, #EFF1F5);
+  --app-top-bar-surface-color: var(--color-spobi-blue-20, #0C2F61);
+  --app-top-bar-text-color-primary: var(--color-spobi-blue-90, #D6E1F2);
+  --app-tob-bar-tab-nav-bottom-border: var(--color-spobi-blue-30, #174482);
   --app-tob-bar-tab-nav-bottom-border-active: var(--color-neutral-100, #FFFFFF);
 }
@@ -2751,35 +2516,6 @@
   line-height: 14px;
 }
-[data-content-brand="sportbild"] .app-topbar-tabs-title,
-:host([data-content-brand="sportbild"]) .app-topbar-tabs-title {
-  font-family: var(--title-font-family);
-  font-weight: var(--title-font-weight);
-  font-size: 12px;
-  line-height: 14px;
-  text-transform: uppercase;
-}
-[data-content-brand="sportbild"] .menu-item-label,
-:host([data-content-brand="sportbild"]) .menu-item-label {
-  font-family: var(--label-font-family);
-  font-weight: 700;
-  font-size: var(--size-2-p-25-x, 18px);
-  line-height: var(--size-2-p-25-x, 18px);
-  font-style: italic;
-  text-transform: uppercase;
-}
-[data-content-brand="sportbild"] .menu-item-util-label,
-:host([data-content-brand="sportbild"]) .menu-item-util-label {
-  font-family: var(--label-font-family);
-  font-weight: 700;
-  font-size: var(--size-1-p-5-x, 12px);
-  line-height: var(--size-1-p-5-x, 12px);
-  font-style: italic;
-  text-transform: uppercase;
-}
 /* === BREAKPOINT TOKENS === */
 [data-content-brand="sportbild"],
@@ -2802,8 +2538,8 @@
   --menu-right-inline-space: var(--space-0-x, 0px);
   --menu-bottom-stack-space: var(--stack-space-const-sm);
   --menu-utility-links-divider-height-size: var(--size-const-sm);
-  --menu-shadow-visibility: var(--alpha-black-10, rgba(0, 0, 0, 0.1));
-  --hey-input-shadow-visibility: var(--alpha-black-0, rgba(0, 0, 0, 0));
+  --menu-shadow-visibility: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  --hey-input-shadow-visibility: var(--color-neutral-0-a-0, rgba(0, 0, 0, 0));
   --app-topbar-title-font-size: 12px;
   --app-topbar-stage-title-height: 14px;
   --i-osapp-top-bar-height-size: 44px;
@@ -2834,8 +2570,8 @@
     --menu-right-inline-space: var(--inline-space-const-lg);
     --menu-bottom-stack-space: var(--space-0-x, 0px);
     --menu-utility-links-divider-height-size: var(--size-const-md);
-    --menu-shadow-visibility: var(--alpha-black-0, rgba(0, 0, 0, 0));
-    --hey-input-shadow-visibility: var(--alpha-black-10, rgba(0, 0, 0, 0.1));
+    --menu-shadow-visibility: var(--color-neutral-0-a-0, rgba(0, 0, 0, 0));
+    --hey-input-shadow-visibility: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
   }
 }
@@ -2843,37 +2579,17 @@
 [data-color-brand="sportbild"],
 :host([data-color-brand="sportbild"]) {
-  --menu-surface-color: var(--surface-color-primary);
-}
-/* === COLOR TOKENS (LIGHT MODE) === */
-[data-color-brand="sportbild"][data-theme="light"],
-:host([data-color-brand="sportbild"][data-theme="light"]) {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --menu-item-border-color-active: var(--color-spobi-blue-16, #0A2750);
-  --menu-item-label-color-primary: var(--label-color-secondary);
-  --menu-item-label-color-primary-active: var(--label-color-primary);
-  --menu-item-label-color-secondary: var(--color-neutral-100, #FFFFFF);
+  --menu-surface-color: var(--bg-color-primary);
+  --app-top-bar-icon-color: var(--icon-color-secondary);
 }
-/* === COLOR TOKENS (DARK MODE) === */
-[data-color-brand="sportbild"][data-theme="dark"],
-:host([data-color-brand="sportbild"][data-theme="dark"]) {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --menu-item-border-color-active: var(--color-spobi-blue-98, #F7F9FD);
-  --menu-item-label-color-primary: var(--label-color-tertiary);
-  --menu-item-label-color-primary-active: var(--color-neutral-96, #F2F4F5);
-  --menu-item-label-color-secondary: var(--color-neutral-100, #FFFFFF);
+/* === OTHER TOKENS === */
+[data-color-brand="sportbild"],
+:host([data-color-brand="sportbild"]) {
+  --menu-item-border-color-active: var(--border-color-brand-light-only);
+  --menu-item-label-color-primary: var(--text-color-idle);
+  --menu-item-label-color-primary-active: var(--text-color-active);
 }
 /* === TYPOGRAPHY TOKENS === */
@@ -2886,23 +2602,6 @@
   line-height: 20.8px;
 }
-[data-content-brand="sportbild"] .news-ticker-kicker,
-:host([data-content-brand="sportbild"]) .news-ticker-kicker {
-  font-family: var(--kicker-font-family);
-  font-weight: var(--kicker-font-weight);
-  font-size: var(--kicker-3-font-size);
-  line-height: var(--kicker-3-line-height);
-}
-[data-content-brand="sportbild"] .news-ticker-headline,
-:host([data-content-brand="sportbild"]) .news-ticker-headline {
-  font-family: var(--headline-font-family);
-  font-weight: 900;
-  font-size: var(--headline-3-font-size);
-  line-height: var(--headline-3-line-height);
-  font-style: italic;
-}
 /* === BREAKPOINT TOKENS === */
 [data-content-brand="sportbild"],
@@ -2963,26 +2662,24 @@
 [data-color-brand="sportbild"],
 :host([data-color-brand="sportbild"]) {
-  --news-ticker-timestamp-color: var(--label-color-tertiary);
-  --news-ticker-badge-icons-color: var(--label-color-tertiary);
+  --news-ticker-timestamp-color: var(--text-color-secondary);
+  --news-ticker-badge-icons-color: var(--icon-color-secondary);
 }
 /* === COLOR TOKENS (LIGHT MODE) === */
 [data-color-brand="sportbild"][data-theme="light"],
 :host([data-color-brand="sportbild"][data-theme="light"]) {
-  --pagination-element-color-default: var(--color-neutral-85, #CED4DA);
-  --scroll-bar-track-bg-color: var(--alpha-black-10, rgba(0, 0, 0, 0.1));
-  --scroll-bar-thumb-bg-color: var(--color-neutral-60, #8C9196);
+  --pagination-element-color-default: var(--bg-color-quaternary);
+  --scroll-bar-track-bg-color: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
 }
 /* === COLOR TOKENS (DARK MODE) === */
 [data-color-brand="sportbild"][data-theme="dark"],
 :host([data-color-brand="sportbild"][data-theme="dark"]) {
-  --pagination-element-color-default: var(--color-neutral-60, #8C9196);
-  --scroll-bar-track-bg-color: var(--alpha-white-10, rgba(255, 255, 255, 0.1));
-  --scroll-bar-thumb-bg-color: var(--color-neutral-60, #8C9196);
+  --pagination-element-color-default: var(--bg-color-quaternary-inverse);
+  --scroll-bar-track-bg-color: var(--color-neutral-100-a-10, rgba(255, 255, 255, 0.1));
 }
 /* === TYPOGRAPHY TOKENS === */
@@ -3005,7 +2702,7 @@
   --gallery-pagination-container-web-inline-space: var(--inline-space-const-sm);
   --gallery-pagination-container-stack-space: var(--stack-space-const-md);
   --gallery-pagination-container-app-inline-space: var(--inline-space-const-md);
-  --scroll-bar-thickness-size: var(--size-1-x, 8px);
+  --scroll-bar-thickness-size: var(--size-const-4-xs);
 }
 @media (min-width: 600px) {
@@ -3020,40 +2717,33 @@
 [data-color-brand="sportbild"],
 :host([data-color-brand="sportbild"]) {
-  --pagination-element-color-active: var(--accent-color-primary);
+  --pagination-element-color-active: var(--bg-color-brand-light-only);
   --gallery-pagination-element-active-opacity: var(--layer-opacity-100);
+  --scroll-bar-thumb-bg-color: var(--bg-color-quintenary);
 }
 /* === COLOR TOKENS (LIGHT MODE) === */
 [data-color-brand="sportbild"][data-theme="light"],
 :host([data-color-brand="sportbild"][data-theme="light"]) {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --partner-links-border-color-idle: var(--color-neutral-85, #CED4DA);
-  --partner-links-border-color-active: var(--color-neutral-15, #232629);
-  --partner-links-bg-color-idle: var(--color-neutral-100, #FFFFFF);
-  --partner-links-bg-color-active: var(--color-neutral-93, #E9ECEF);
-  --partner-links-container-border-color: var(--color-neutral-85, #CED4DA);
+  --partner-links-bg-color-idle: var(--bg-color-primary);
+  --partner-links-bg-color-active: var(--bg-color-tertiary);
 }
 /* === COLOR TOKENS (DARK MODE) === */
 [data-color-brand="sportbild"][data-theme="dark"],
 :host([data-color-brand="sportbild"][data-theme="dark"]) {
-  /* ============================================
-     OTHER
-     ============================================ */
+  --partner-links-bg-color-idle: var(--bg-color-tertiary);
+  --partner-links-bg-color-active: var(--bg-color-quintenary);
+}
-  --partner-links-border-color-idle: var(--color-neutral-85, #CED4DA);
-  --partner-links-border-color-active: var(--color-neutral-93, #E9ECEF);
-  --partner-links-bg-color-idle: var(--color-neutral-25, #343C41);
-  --partner-links-bg-color-active: var(--color-neutral-60, #8C9196);
-  --partner-links-container-border-color: var(--color-neutral-35, #4B525A);
+/* === OTHER TOKENS === */
+[data-color-brand="sportbild"],
+:host([data-color-brand="sportbild"]) {
+  --partner-links-border-color-idle: var(--border-color-default);
+  --partner-links-border-color-active: var(--border-color-extra-strong);
 }
 /* === TYPOGRAPHY TOKENS === */
@@ -3064,16 +2754,7 @@
   font-weight: var(--title-font-weight);
   font-size: var(--size-8-x, 64px);
   line-height: var(--size-8-x, 64px);
-  letter-spacing: var(--display-2-letter-spacing);
-}
-[data-content-brand="sportbild"] .paywall-card-note,
-:host([data-content-brand="sportbild"]) .paywall-card-note {
-  font-family: var(--title-font-family);
-  font-weight: var(--title-font-weight);
-  font-size: var(--size-5-x, 40px);
-  line-height: var(--size-5-x, 40px);
-  letter-spacing: var(--display-3-letter-spacing);
+  letter-spacing: var(--display-2-letter-space);
 }
 /* === BREAKPOINT TOKENS === */
@@ -3148,28 +2829,11 @@
   }
 }
-/* === COLOR TOKENS (LIGHT MODE) === */
-[data-color-brand="sportbild"][data-theme="light"],
-:host([data-color-brand="sportbild"][data-theme="light"]) {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --selection-border-color: var(--color-neutral-35, #4B525A);
-}
-/* === COLOR TOKENS (DARK MODE) === */
-[data-color-brand="sportbild"][data-theme="dark"],
-:host([data-color-brand="sportbild"][data-theme="dark"]) {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --selection-border-color: var(--color-neutral-60, #8C9196);
+/* === OTHER TOKENS === */
+[data-color-brand="sportbild"],
+:host([data-color-brand="sportbild"]) {
+  --selection-border-color: var(--border-color-strong);
 }
 /* === BREAKPOINT TOKENS === */
@@ -3203,14 +2867,14 @@
 [data-color-brand="sportbild"][data-theme="light"],
 :host([data-color-brand="sportbild"][data-theme="light"]) {
-  --slider-track-bg-color: var(--alpha-white-35, rgba(255, 255, 255, 0.35));
+  --slider-track-bg-color: var(--color-neutral-100-a-35, rgba(255, 255, 255, 0.35));
 }
 /* === COLOR TOKENS (DARK MODE) === */
 [data-color-brand="sportbild"][data-theme="dark"],
 :host([data-color-brand="sportbild"][data-theme="dark"]) {
-  --slider-track-bg-color: var(--alpha-white-35, rgba(255, 255, 255, 0.35));
+  --slider-track-bg-color: var(--color-neutral-100-a-35, rgba(255, 255, 255, 0.35));
 }
 /* === BREAKPOINT TOKENS === */
@@ -3230,36 +2894,6 @@
   --slider-button-opacity: var(--layer-opacity-90);
 }
-/* === COLOR TOKENS (LIGHT MODE) === */
-[data-color-brand="sportbild"][data-theme="light"],
-:host([data-color-brand="sportbild"][data-theme="light"]) {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --social-share-button-label-color-default: var(--color-neutral-100, #FFFFFF);
-  --social-share-button-label-color-active: var(--color-neutral-100, #FFFFFF);
-  --social-share-button-bg-color-active: var(--color-neutral-25, #343C41);
-  --social-share-button-bg-color-default: var(--color-neutral-35, #4B525A);
-}
-/* === COLOR TOKENS (DARK MODE) === */
-[data-color-brand="sportbild"][data-theme="dark"],
-:host([data-color-brand="sportbild"][data-theme="dark"]) {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --social-share-button-label-color-default: var(--color-neutral-100, #FFFFFF);
-  --social-share-button-label-color-active: var(--color-neutral-100, #FFFFFF);
-  --social-share-button-bg-color-active: var(--color-neutral-25, #343C41);
-  --social-share-button-bg-color-default: var(--color-neutral-35, #4B525A);
-}
 /* === TYPOGRAPHY TOKENS === */
 [data-content-brand="sportbild"] .special-navi-item-label,
@@ -3307,7 +2941,7 @@
 [data-color-brand="sportbild"],
 :host([data-color-brand="sportbild"]) {
-  --subheaders-color: var(--text-color-primary);
+  --subheaders-text-color: var(--text-color-primary);
 }
 /* === COLOR TOKENS (LIGHT MODE) === */
@@ -3318,9 +2952,6 @@
      OTHER
      ============================================ */
-  --tab-bg-color-hover: var(--color-neutral-93, #E9ECEF);
-  --tab-label-color-active: var(--color-neutral-25, #343C41);
-  --tab-label-color-default: var(--color-neutral-35, #4B525A);
   --app-bottom-tab-bar-bg-color: var(--color-neutral-100, #FFFFFF);
 }
@@ -3333,10 +2964,7 @@
      OTHER
      ============================================ */
-  --tab-bg-color-hover: var(--color-neutral-25, #343C41);
-  --tab-label-color-active: var(--color-neutral-96, #F2F4F5);
-  --tab-label-color-default: var(--color-neutral-100, #FFFFFF);
-  --app-bottom-tab-bar-bg-color: var(--color-spobi-blue-16, #0A2750);
+  --app-bottom-tab-bar-bg-color: var(--color-spobi-blue-20, #0C2F61);
 }
@@ -3350,22 +2978,6 @@
   text-transform: uppercase;
 }
-[data-content-brand="sportbild"] .app-bottom-bar-label-default,
-:host([data-content-brand="sportbild"]) .app-bottom-bar-label-default {
-  font-family: var(--body-font-family);
-  font-weight: var(--font-weight-book, 400);
-  font-size: 11px;
-  line-height: 14.4px;
-}
-[data-content-brand="sportbild"] .app-bottom-bar-label-active,
-:host([data-content-brand="sportbild"]) .app-bottom-bar-label-active {
-  font-family: var(--body-font-family);
-  font-weight: var(--font-weight-bold, 700);
-  font-size: 11px;
-  line-height: 14.4px;
-}
 /* === BREAKPOINT TOKENS === */
 [data-content-brand="sportbild"],
@@ -3438,16 +3050,16 @@
 [data-color-brand="sportbild"][data-theme="light"],
 :host([data-color-brand="sportbild"][data-theme="light"]) {
-  --teaser-title-background-gradient-start: var(--color-spobi-blue-16-a-70, rgba(10, 39, 80, 0.7));
-  --teaser-title-background-gradient-stop: var(--color-spobi-blue-16-a-0, rgba(10, 39, 80, 0));
+  --teaser-title-bg-gradient-start: var(--color-spobi-blue-15-a-70, rgba(11, 38, 71, 0.7));
+  --teaser-title-bg-gradient-stop: var(--color-spobi-blue-15-a-0, rgba(11, 38, 71, 0));
 }
 /* === COLOR TOKENS (DARK MODE) === */
 [data-color-brand="sportbild"][data-theme="dark"],
 :host([data-color-brand="sportbild"][data-theme="dark"]) {
-  --teaser-title-background-gradient-start: var(--color-spobi-blue-16-a-70, rgba(10, 39, 80, 0.7));
-  --teaser-title-background-gradient-stop: var(--color-spobi-blue-16-a-0, rgba(10, 39, 80, 0));
+  --teaser-title-bg-gradient-start: var(--color-spobi-blue-15-a-70, rgba(11, 38, 71, 0.7));
+  --teaser-title-bg-gradient-stop: var(--color-spobi-blue-15-a-0, rgba(11, 38, 71, 0));
 }
 /* === TYPOGRAPHY TOKENS === */
@@ -3461,51 +3073,6 @@
   font-style: italic;
 }
-[data-content-brand="sportbild"] .a-teaser-a-teaser-headline,
-:host([data-content-brand="sportbild"]) .a-teaser-a-teaser-headline {
-  font-family: var(--headline-font-family);
-  font-weight: 900;
-  font-size: var(--headline-3-font-size);
-  line-height: var(--headline-3-font-size);
-  font-style: italic;
-}
-[data-content-brand="sportbild"] .m-qteaser-m-qteaser-kicker,
-:host([data-content-brand="sportbild"]) .m-qteaser-m-qteaser-kicker {
-  font-family: var(--kicker-font-family);
-  font-weight: 700;
-  font-size: var(--kicker-4-font-size);
-  line-height: var(--kicker-4-line-height);
-  font-style: italic;
-}
-[data-content-brand="sportbild"] .m-qteaser-m-qteaser-headline,
-:host([data-content-brand="sportbild"]) .m-qteaser-m-qteaser-headline {
-  font-family: var(--headline-font-family);
-  font-weight: 900;
-  font-size: var(--headline-4-font-size);
-  line-height: var(--headline-4-line-height);
-  font-style: italic;
-}
-[data-content-brand="sportbild"] .q-teaser-q-teaser-headline,
-:host([data-content-brand="sportbild"]) .q-teaser-q-teaser-headline {
-  font-family: var(--headline-font-family);
-  font-weight: 900;
-  font-size: var(--headline-1-font-size);
-  line-height: var(--headline-1-line-height);
-  font-style: italic;
-}
-[data-content-brand="sportbild"] .std-teaser-std-teaser-headline,
-:host([data-content-brand="sportbild"]) .std-teaser-std-teaser-headline {
-  font-family: var(--headline-font-family);
-  font-weight: 700;
-  font-size: var(--headline-4-font-size);
-  line-height: var(--headline-4-line-height);
-  font-style: italic;
-}
 /* === BREAKPOINT TOKENS === */
 [data-content-brand="sportbild"],
@@ -3578,29 +3145,6 @@
   --teaser-hover-opacity: var(--layer-opacity-80);
 }
-/* === COLOR TOKENS (LIGHT MODE) === */
-[data-color-brand="sportbild"][data-theme="light"],
-:host([data-color-brand="sportbild"][data-theme="light"]) {
-  --text-link-color-secondary: var(--text-color-secondary);
-  --text-link-color-primary: var(--text-color-primary);
-}
-/* === COLOR TOKENS (DARK MODE) === */
-[data-color-brand="sportbild"][data-theme="dark"],
-:host([data-color-brand="sportbild"][data-theme="dark"]) {
-  --text-link-color-secondary: var(--color-neutral-85, #CED4DA);
-  --text-link-color-primary: var(--color-neutral-60, #8C9196);
-}
-/* === OTHER TOKENS === */
-[data-color-brand="sportbild"],
-:host([data-color-brand="sportbild"]) {
-  --text-link-color-secondary-active: var(--text-color-primary);
-}
 /* === TYPOGRAPHY TOKENS === */
 [data-content-brand="sportbild"] .app-toogle-item-label,
@@ -3684,8 +3228,6 @@
      OTHER
      ============================================ */
-  --dsys-docs-label-text-surface-color-primary-primitive-name: BILD100;
-  --dsys-docs-label-text-color-mode: (Light Mode);
   --ds-doc-spacing-item-bg-color: rgba(221, 0, 0, 0.1);
   --ds-doc-spacing-item-border-color: rgba(221, 0, 0, 0.5);
@@ -3699,8 +3241,6 @@
      OTHER
      ============================================ */
-  --dsys-docs-label-text-surface-color-primary-primitive-name: BILD010;
-  --dsys-docs-label-text-color-mode: (Dark Mode);
   --ds-doc-spacing-item-bg-color: rgba(255, 255, 255, 0.2);
   --ds-doc-spacing-item-border-color: rgba(255, 255, 255, 0.8);
@@ -3715,8 +3255,10 @@
   --dsys-docs-width-size: 320px;
   --main-content-stage-size: 320px;
   --foundations-banner-height-size: var(--size-10-x, 80px);
+  --doc-label-resp-font-size: 10px;
   --ds-caption-stack-space-0-p-5-x: var(--space-0-p-5-x, 4px);
   --ds-caption-stack-space-1-x: var(--space-1-x, 8px);
+  --label-1-responsive-line-height: UNRESOLVED_VariableID:18038:10773;
   --1-column-mobile: 320px;
   --thin-banner-vertical-height-size: 558px;
   --specs-font-family: var(--font-family-gotham, Gotham);
@@ -3728,6 +3270,7 @@
 :host([data-content-brand="sportbild"]) {
     --dsys-docs-width-size: 750px;
     --main-content-stage-size: 750px;
+    --label-1-responsive-line-height: UNRESOLVED_VariableID:18038:10774;
   }
 }
@@ -3738,8 +3281,10 @@
     --ds-main-container-space: var(--space-8-p-5-x, 68px);
     --dsys-docs-width-size: 962px;
     --main-content-stage-size: 962px;
+    --doc-label-resp-font-size: 15px;
     --ds-caption-stack-space-0-p-5-x: var(--space-0-p-75-x, 6px);
     --ds-caption-stack-space-1-x: var(--space-1-p-5-x, 12px);
+    --label-1-responsive-line-height: UNRESOLVED_VariableID:18038:10775;
     --1-column-mobile: 930px;
     --doc-header-height-size: 160px;
   }
@@ -3749,10 +3294,12 @@
   [data-content-brand="sportbild"],
 :host([data-content-brand="sportbild"]) {
     --dsys-docs-width-size: 1440px;
-    --main-content-stage-size: var(--size-128-x, 1024px);
+    --main-content-stage-size: 1024px;
     --foundations-banner-height-size: var(--size-17-p-5-x, 140px);
+    --doc-label-resp-font-size: 17px;
     --ds-caption-stack-space-0-p-5-x: var(--space-1-x, 8px);
     --ds-caption-stack-space-1-x: var(--space-2-x, 16px);
+    --label-1-responsive-line-height: UNRESOLVED_VariableID:18038:10776;
     --1-column-mobile: 656px;
     --thin-banner-vertical-height-size: 186px;
     --doc-header-height-size: 180px;