@marioschmidt/design-system-tokens 1.0.23 → 1.0.25

package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.css

@@ -1,6 +1,6 @@
 /**
  * breakpoint-xs-320px.css
- * Generiert am: 2025-11-24T21:07:31.234Z
+ * Generiert am: 2025-11-25T08:26:26.826Z
  * Nicht manuell bearbeiten!
  */
 
@@ -9,12 +9,6 @@
      COMPONENT
      ============================================ */
 
-  /* Component - Accordion */
-  /**
-   * This variable exists specifically for changing the accordion font family across brands. It is subject to review. Bild: GothamXNarrow, SpoBi: Inter, Ads: LucindaGrande
-   */
-  --accordion-label-font-family: Lucida Grande;
-
   /* Component - Article */
   --aricle-mobile1-col-grid-image-margin-space: 0px;
   /**
@@ -76,207 +70,45 @@
   --article-infobox-inline-space: 16px;
   --article-infobox-stack-space: 16px;
 
-  /* Component - AudioPlayer */
-  /**
-   * This variable is used in the text style dedicated to audio player labels for elapsed time, reproduction speed and short functionality description text. 16 - 16 - 16 - 18
-   */
-  --audio-player-font-size: 16px;
-
-  /* Component - Avatar */
-  /**
-   * This variable is used on avatar names in article pages. Bild: 16 - 16 - 16 - 18; SpoBi&Ads: 13 - 13 - 13 - 15
-   */
-  --avatar-label-font-size: 13px;
-  /**
-   * This variable is used for setting the size of avatar images in article pages. It references the sizeConstMD variable from the "generic" semantic collection. Its value is 48 across devices.
-   */
-  --avatar-article-size: 48px;
-  /**
-   * 96 - 96 - 130 - 130 This variable is used for controlling the size of the avatar image on author pages.
-   */
-  --avatar-author-page-size: 96px;
-  /**
-   * This variable is used in avatar text styles. It receives values from the Brand Tokens Collection. Bild: GothamXNarrow; SpoBi: Inter; Ads: LucidaGrande
-   */
-  --avatar-font-family: Lucida Grande;
-  /**
-   * This variable is used for controlling the line height of avatar texts. Its values influence the stacking space between avatar texts. 21 - 21 - 21 - 23
-   */
-  --avatar-label-line-height: 21px;
-  /**
-   * This variable is used for setting the inline space between multiple avatars that are horizontally placed in a lane when an article has multiple authors. 16 - 16 - 24 - 24
-   */
-  --avatar-lane-gap-space: 16px;
-  /**
-   * This variable is used for setting the font of avatars on iOS and Android platforms. This is subject to review.
-   */
-  --app-avatar-font-family: Lucida Grande;
-
-  /* Component - Badge */
-  /**
-   * This space variable is used for creating the top and bottom space between a badge's text label and the surface that the text label is on top of.
-   */
-  --badges-inner-stack-space: 2px;
-  /**
-   * This space variable is used for creating the left and right space between a badge's text label and the badge background surface that the text label is on top of.
-   */
-  --badges-inner-inline-space: 4px;
-  /**
-   * 30 - 30 - 30 - 30 - This variable is used on the Advert rectangular badge that is found above an ad containers.
-   */
-  --ad-label-badge-height-size: 30px;
-
-  /* Component - Breadcrumb */
-  /**
-   * 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices.
-   */
-  --breadcrumb-font-size: 15px;
-  --breadcrumb-font-family: Lucida Grande;
-  --breadcrumb-arrow-left-inline-space1: 3px;
-  --breadcrumb-arrow-right-inline-space2: 5px;
-  --breadcrumb-inline-space: 12px;
-  /**
-   * 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices.
-   */
-  --breadcrumb-line-height: 15px;
-  --breadcrumb-font-weight: 700;
-  --breadcrumb-stack-space: 14px;
-
-  /* Component - BreakingNews */
-  --breaking-news-container-height-size: 56px;
-  --breaking-news-badge-upper-title-font-size: 13px;
-  --breaking-news-badge-lower-title-font-size: 23px;
-  --breaking-news-badge-upper-title-line-height: 13px;
-  --breaking-news-badge-lower-title-line-height: 21px;
-  --breaking-news-badge-titels-stack-space: 0px;
-  --breaking-news-scrolling-text-font-size: 21px;
-  --breaking-news-scrolling-text-line-height: 24px;
-  --breaking-news-badge-inline-space: 6px;
-
-  /* Component - Button */
-  --button-label-font-size: 15px;
-  --button-inline-space: 16px;
+  /* Component - _DSysDocs */
   /**
-   * Use this variable for controlling the font size of partner buttons. 16 - 16 - 16 - 18
+   * Variable used in spacing parameters of bild.design webpage mockups. move to bild.design group maybe
    */
-  --partner-link-button-label-font-size: 16px;
-  --partner-link-button-label-height-size: 48px;
-  --button-border-width-size: 2px;
+  --bild-design-frame-space: 12px;
   /**
-   * This fixed height variable ensures that the button maintains a consistent height, even when the icon is not active.
+   * This variable is used on documentation pages. This is an alternative variable to the main container max width variable. 0 - 0 - 68 - 68
    */
-  --button-content-min-height-size: 24px;
-  --partner-link-button-inline-space: 8px;
-  --button-label-line-height: 15px;
-  --button-content-gap-space: 6px;
-  --button-stack-space: 6px;
-  --button-border-radius: 8px;
-
-  /* Component - Cards */
-  --search-result-card-image-width-size: 216px;
-  --search-result-card-image-height-size-stacked: 189px;
-  --newsticker-image-card-width-size: 206px;
-
-  /* Component - Carousel */
+  --ds-main-container-space: 0px;
+  --dsys-docs-width-size: 320px;
   /**
-   * This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination.
+   * This variable is used as a max width size for content blocks. For mobile devices this var references the DSysDocsWidthSize var 320 - 750 - 962 - 1024
    */
-  --gallery-teaser-title-bottom-space: 28px;
+  --main-content-stage-size: 320px;
   /**
-   * This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination.
+   * This variable is used on documentation pages that have an artistic banner at the top of the page that is related to the foundation topic on the page. 80 - 80 -80 - 140
    */
-  --gallery-teaser-app-gap-space: 0px;
-  --app-epaper-carousel-item-focus-width: 182px;
-  --app-epaper-carousel-item-default-width: 144px;
-  --app-epaper-carouse-beilage-item-width: 110px;
-  --standard-teaser-gallery-teaser-width-web: 145px;
-  --standard-teaser-gallery-teaser-width-app: 280px;
-
-  /* Component - Chips */
+  --foundations-banner-height-size: 80px;
   /**
-   * This variable is used on the chips font size parameter of the chips text style. The font size changes only for the change between larger device widths and any device smaller than the largest. 16 - 16 -16 - 18
+   * This variable is used in documentation pages that have small caption or lables along with a UI component documented. 4 - 4 - 6 - 8
    */
-  --chips-font-size: 16px;
-  --chips-inline-space: 12px;
-  --chips-stack-space: 8px;
-
-  /* Component - Datepicker */
-  --datepicker-item-day-width-size: 44px;
-  --datepicker-item-height-size: 44px;
-  --datepicker-item-year-width-size: 77px;
-
-  /* Component - Drawers */
-  --mobile-menu-drawer-stack-space: 20px;
-  --mobile-menu-drawer-left-inline-space: 20px;
-  --mobile-menu-drawer-right-inline-space: 16px;
-  --mobile-menu-drawer-max-width-size: 400px;
-
-  /* Component - Dropdown */
-  --drop-down-border-radius: 4px;
-  --drop-down-item-stack-space: 8px;
-  --drop-down-item-inline-space: 12px;
-
-  /* Component - Footer */
+  --ds-caption-stack-space0-5x: 4px;
+  --ds-caption-stack-space1x: 8px;
   /**
-   * This variable is used on footer links that commonly show up at the bottom of pages. The font size parameter remains constant at 11 px across device sizes.
+   * This variable is used only for this design system's component tests.
    */
-  --footer-font-size: 11px;
-  --footer-line-height: 14px;
-  --footer-font-family: Gotham XNarrow;
-  --footer-font-size-user-offer-pages: 18px;
-  --footer-line-height-user-offer-pages: 26px;
-
-  /* Component - Icon */
-  --icon-size: 24px;
-  --icon-size-embedd-media: 40px;
-
-  /* Component - InfoElement */
-  --info-element-teaser-badge-height-size: 16px;
-  --info-element-teaser-image-height-size: 80px;
-  --info-element-teaser-image-width-size: 80px;
-  --info-element-teaser-badge-margin-space: 4px;
-
-  /* Component - Inputfield */
-  --input-field-stack-space: 6px;
-  --input-field-inline-space: 16px;
-  --input-field-mini-label-inline-space: 4px;
+  --1column-mobile: 320px;
   /**
-   * This variable controls texts inside of input fields such as dropdowns, date input and other text inputs that appear in forms for example. compact 15 - default 17 - spacious 19
+   * This variable is currently used on a thin gallery that appears on desktop websites with petbook and other "books" content. Its height changes to a large height on mobile sites. 558 - 558 - 558 - 186
    */
-  --input-field-font-size: 16px;
-  --input-field-imessage-inline-space: 16px;
-  --input-field-height-size: 36px;
-  --hey-input-container-inline-space: 8px;
-  --input-field-message-gap-space: 4px;
-  --input-field-font-family: Lucida Grande;
-
-  /* Component - Liveticker */
-  --live-tickerheadline-font-weight: 600;
+  --thin-banner-vertical-height-size: 558px;
   /**
-   * This variable is used for the font size of live ticker headlines. 22 - 22 - 32 - 32
+   * This variable is used only for texts and labels that form part of this design system's documentation.
    */
-  --live-ticker-headlines-font-size: 22px;
-  --time-stamp-font-family: Gotham XNarrow;
+  --specs-font-family: Gotham;
   /**
-   * This variable is used for the live ticker time stamp font size. 14 - 14 - 16 - 16
+   * This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180
    */
-  --live-ticker-time-stamp-font-size: 14px;
-  --live-ticker-time-headline-stack-space: 4px;
-  --live-ticker-slider-item-width-max-size: 257px;
-  --live-ticker-app-card-height-size: 96px;
-  --live-ticker-app-card-width-size: 250px;
-
-  /* Component - Mediaplayer */
-  --podcast-play-button-size: 48px;
-  --vid-player-bottom-bar-gap-space: 0px;
-  --audio-player-header-stack-space: 56px;
-  --video-time-badge-font-family: Lucida Grande;
-  --vid-player-control-button-size: 42px;
-  --vid-player-control-button-icon-size-hover: 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: 220px;
+  --doc-header-height-size: 144px;
 
   /* Component - Menu */
   --menu-item-space: 8px;
@@ -314,106 +146,77 @@
   --i-osapp-top-bar-left-inline-space: 12px;
   --i-osapp-top-bar-right-inline-space: 16px;
 
-  /* Component - Newsticker */
+  /* Component - Teaser */
+  --teaser-title-inline-left-space: 12px;
+  --teaser-title-stack-space: 4px;
+  --teaser-title-gap-space: 4px;
+  --teaser-kicker-bg-inline-space: 6px;
+  --teaser-kicker-bg-stack-space: 2px;
   /**
-   * similar to kicker3 values - 16 - 16 - 16 - 18
+   * This variable is used for creating space around the outside of a subscription badge or video icon badge.
    */
-  --news-ticker-time-font-size: 16px;
-  --news-ticker-time-font-weight: 700;
-  --news-ticker-time-font-family: Lucida Grande;
+  --teaser-badges-margin-space: 8px;
   /**
-   * Figma currently does not allow for percentages in Line Height variables. The values in this token are the result of multiplying the font size by the line height variable defined on the Bild home css -> newsTickerTime line height: 1.3. Line height for this component does not change across devices.
+   * This token is for controling the height of badges that are inside of teasers. 32 - 32 - 32 - 40
    */
-  --news-ticker-time-line-height: 20.799999237060547px;
-  --news-ticker-content-stack-space: 4px;
-  --news-ticker-kicker-inner-stack-space: 2px;
-  --news-ticker-titles-inline-space: 18px;
-  --news-ticker-badges-inline-space: 8px;
-  --news-ticker-time-kicker-stack-space: 4px;
-  --news-ticker-entries-stack-space: 22px;
-  --news-ticker-kicker-inner-inline-space: 4px;
-  --news-ticker-skeleton-bottom-space: 64px;
-  --news-ticker-red-dot-size: 12px;
-  --news-ticker-entries-left-inline-space: 22px;
-  --news-ticker-line-inline-space: 6px;
-  --news-ticker-app-card-height-size: 116px;
-  --news-ticker-app-card-width-size: 250px;
+  --teaser-badges-height-size-lg: 32px;
+  --teaser-title-bottom-stack-space: 12px;
+  --teaser-badges-height-size-sm: 24px;
+  --teaser-layout-grid-space: 12px;
 
-  /* Component - Pagination */
-  --gallery-pagination-item-height-size: 4px;
+  /* Component - Teaser - mQTeaser */
   /**
-   * 8 - 8 - 12 - 12 - this component level variable references the inlineSpaceConst semantic variables; SM for smaller devices, MD for larger devices
+   * XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40
    */
-  --gallery-pagination-container-web-inline-space: 8px;
+  --m-qteaser-headline-font-size: 16px;
+  --m-qteaser-headline-font-weight: 600;
+  --m-qteaser-headline-line-height: 18.399999618530273px;
+  --mq-teaser-title-inline-space: 8px;
+
+  /* Component - Teaser - aTeaser */
   /**
-   * 12 - 12 - 16 - 16 - this component level variable references the semantic
-   */
-  --gallery-pagination-container-stack-space: 12px;
-  --gallery-pagination-container-app-inline-space: 12px;
-  --scroll-bar-thickness-size: 8px;
-
-  /* Component - Paywall */
-  --paywall-container-gap-space: -48px;
-  --paywall-header-bottom-stack-space: 80px;
-  --paywall-card-max-width-size: 346px;
-  /**
-   * This variable is used on the paywall card price tag. 64 constant
+   * 16 - 16 - 22 - 24 This variable references the semantic variables kicker3fontsize and kicker2fontsize. At the 600px breakpoint smaller devices use the kicker3 variable
    */
-  --paywall-card-price-tag-font-size: 64px;
-  --paywall-card-price-tag-line-height: 64px;
-  --paywall-card-price-note-line-height: 40px;
+  --a-teaser-kicker-font-size: 14px;
   /**
-   * This variable is used on the paywall card text under the price tag. 40 - 40 - 40 - 40
+   * This variable references the semantic variables headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64
    */
-  --paywall-card-price-note-font-size: 40px;
-
-  /* Component - Quotes */
-  --quote-container-inline-space: 16px;
-  --quote-container-stack-space: 16px;
-  --quote-quotation-marks-font-size: 28px;
-  --quote-content-gap-space: 16px;
-
-  /* Component - RadioButtons */
-  --radio-selector-size: 20px;
-  --radio-selector-dot-active-size: 12px;
-
-  /* Component - Search */
-  --search-result-badge-height-size: 18px;
+  --a-teaser-headline-font-size: 24px;
+  --a-teaser-kicker-line-height: 14px;
+  --a-teaser-headline-line-height: 24px;
+  --a-teaser-title-inline-space: 8px;
 
-  /* Component - SectionTitle */
-  --section-title-inner-stack-bottom-space: 12px;
-  --section-title-height-size: 32px;
+  /* Component - Teaser - stdTeaser */
+  --std-teaser-image-title-gap-space: 4px;
   /**
-   * This variable is used on large title headings that are h2 elements in html and indicate a new section in the user interface. This space changes when a user hovers over the large title.
+   * This variable is used for creating space around the outside of a subscription badge or video icon badge.
    */
-  --section-title-arrow-inline-space: 5px;
+  --std-teaser-badges-margin-space: 4px;
   /**
-   * This variable is used for increasing the space between the text and the arrow at the end of the large title text. On mobile devices there is no hover state so this variables values are the same as the default state values.
+   * 2 | 2 | 2 | 2 - This variable is used on the standard teaser vertical spacing between the kicker and the headline. It references the semantic variable stackSpaceConst3XS
    */
-  --section-title-arrow-inline-space-active: 5px;
-
-  /* Component - Separators */
-  --separator-thickness-size: 2px;
+  --std-teaser-kicker-headline-stack-space: 2px;
 
-  /* Component - Skeletons */
-  --headlines-skeleton-image-placeholder-max-width: 282px;
-  --article-skeleton-image-inline-space: 12px;
-  --article-skeleton-text-inline-space: 0px;
-  --article-text-skeleton-height-size: 270px;
+  /* Component - Teaser - qTeaser */
+  /**
+   * This component level variable is used on the quad teaser headline. It references the semantic level variable headline1. 48 - 48 - 72 - 100
+   */
+  --quad-headline-font-size: 36px;
+  --quad-kicker-font-size: 16px;
+  --quad-headline-line-height: 37.79999923706055px;
+  --q-teaser-title-inline-space: 8px;
 
-  /* Component - Sliders */
-  --slider-progress-bar-idle-height-size: 4px;
-  --slider-progress-bar-hover-height-size: 8px;
-  --slider-progress-inactive-height-size: 2px;
-  --vid-player-progress-bar-height-size: 12px;
+  /* Component - Teaser - bildPlay */
+  --bild-play-teaser-width-size: 145px;
 
-  /* Component - SpecialNavi */
-  --special-navi-inline-space: 24px;
+  /* Component - Teaser - superA */
+  /**
+   * 16 - 16 - 16 - 16
+   */
+  --super-ateaser-title-inline-space: 16px;
 
-  /* Component - Spinners */
-  --video-spinner-size: 40px;
-  --video-spinner-stroke-size: 2px;
-  --video-spinner-size0-5x: 20px;
+  /* Component - Teaser - bTeaser */
+  --b-teaser-title-inline-space: 8px;
 
   /* Component - Table */
   --table-column-width-size1x: 80px;
@@ -425,108 +228,98 @@
   --table-column-width-size3x: 200px;
   --table-item-max-width-size: 224px;
 
-  /* Component - Tabs */
-  /**
-   * Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
-   */
-  --tab-label-font-size: 16px;
-  --ios-tabbar-height-size: 49px;
-  --android-tabbar-height-size: 56px;
+  /* Component - Separators */
+  --separator-thickness-size: 2px;
+
+  /* Component - Avatar */
   /**
-   * Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
+   * This variable is used on avatar names in article pages. Bild: 16 - 16 - 16 - 18; SpoBi&Ads: 13 - 13 - 13 - 15
    */
-  --tab-label-font-size-line: 12px;
+  --avatar-label-font-size: 13px;
   /**
-   * Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
+   * This variable is used for setting the size of avatar images in article pages. It references the sizeConstMD variable from the "generic" semantic collection. Its value is 48 across devices.
    */
-  --apps-tabs-label-font-size: 11px;
+  --avatar-article-size: 48px;
   /**
-   * Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
+   * 96 - 96 - 130 - 130 This variable is used for controlling the size of the avatar image on author pages.
    */
-  --apps-tabs-label-line-height: 14.399999618530273px;
-  --top-bar-tab-item-height-size: 44px;
-
-  /* Component - Teaser */
-  --teaser-title-inline-left-space: 12px;
-  --teaser-title-stack-space: 4px;
-  --teaser-title-gap-space: 4px;
-  --teaser-kicker-bg-inline-space: 6px;
-  --teaser-kicker-bg-stack-space: 2px;
+  --avatar-author-page-size: 96px;
   /**
-   * This variable is used for creating space around the outside of a subscription badge or video icon badge.
+   * This variable is used in avatar text styles. It receives values from the Brand Tokens Collection. Bild: GothamXNarrow; SpoBi: Inter; Ads: LucidaGrande
    */
-  --teaser-badges-margin-space: 8px;
+  --avatar-font-family: Lucida Grande;
   /**
-   * This token is for controling the height of badges that are inside of teasers. 32 - 32 - 32 - 40
+   * This variable is used for controlling the line height of avatar texts. Its values influence the stacking space between avatar texts. 21 - 21 - 21 - 23
    */
-  --teaser-badges-height-size-lg: 32px;
-  --teaser-title-bottom-stack-space: 12px;
-  --teaser-badges-height-size-sm: 24px;
-  --teaser-layout-grid-space: 12px;
-
-  /* Component - Teaser - aTeaser */
+  --avatar-label-line-height: 21px;
   /**
-   * 16 - 16 - 22 - 24 This variable references the semantic variables kicker3fontsize and kicker2fontsize. At the 600px breakpoint smaller devices use the kicker3 variable
+   * This variable is used for setting the inline space between multiple avatars that are horizontally placed in a lane when an article has multiple authors. 16 - 16 - 24 - 24
    */
-  --a-teaser-kicker-font-size: 14px;
+  --avatar-lane-gap-space: 16px;
   /**
-   * This variable references the semantic variables headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64
+   * This variable is used for setting the font of avatars on iOS and Android platforms. This is subject to review.
    */
-  --a-teaser-headline-font-size: 24px;
-  --a-teaser-kicker-line-height: 14px;
-  --a-teaser-headline-line-height: 24px;
-  --a-teaser-title-inline-space: 8px;
-
-  /* Component - Teaser - bTeaser */
-  --b-teaser-title-inline-space: 8px;
-
-  /* Component - Teaser - bildPlay */
-  --bild-play-teaser-width-size: 145px;
+  --app-avatar-font-family: Lucida Grande;
 
-  /* Component - Teaser - mQTeaser */
+  /* Component - Button */
+  --button-label-font-size: 15px;
+  --button-inline-space: 16px;
   /**
-   * XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40
+   * Use this variable for controlling the font size of partner buttons. 16 - 16 - 16 - 18
    */
-  --m-qteaser-headline-font-size: 16px;
-  --m-qteaser-headline-font-weight: 600;
-  --m-qteaser-headline-line-height: 18.399999618530273px;
-  --mq-teaser-title-inline-space: 8px;
-
-  /* Component - Teaser - qTeaser */
+  --partner-link-button-label-font-size: 16px;
+  --partner-link-button-label-height-size: 48px;
+  --button-border-width-size: 2px;
   /**
-   * This component level variable is used on the quad teaser headline. It references the semantic level variable headline1. 48 - 48 - 72 - 100
+   * This fixed height variable ensures that the button maintains a consistent height, even when the icon is not active.
    */
-  --quad-headline-font-size: 36px;
-  --quad-kicker-font-size: 16px;
-  --quad-headline-line-height: 37.79999923706055px;
-  --q-teaser-title-inline-space: 8px;
+  --button-content-min-height-size: 24px;
+  --partner-link-button-inline-space: 8px;
+  --button-label-line-height: 15px;
+  --button-content-gap-space: 6px;
+  --button-stack-space: 6px;
+  --button-border-radius: 8px;
 
-  /* Component - Teaser - stdTeaser */
-  --std-teaser-image-title-gap-space: 4px;
-  /**
-   * This variable is used for creating space around the outside of a subscription badge or video icon badge.
-   */
-  --std-teaser-badges-margin-space: 4px;
+  /* Component - Newsticker */
   /**
-   * 2 | 2 | 2 | 2 - This variable is used on the standard teaser vertical spacing between the kicker and the headline. It references the semantic variable stackSpaceConst3XS
+   * similar to kicker3 values - 16 - 16 - 16 - 18
    */
-  --std-teaser-kicker-headline-stack-space: 2px;
-
-  /* Component - Teaser - superA */
+  --news-ticker-time-font-size: 16px;
+  --news-ticker-time-font-weight: 700;
+  --news-ticker-time-font-family: Lucida Grande;
   /**
-   * 16 - 16 - 16 - 16
+   * Figma currently does not allow for percentages in Line Height variables. The values in this token are the result of multiplying the font size by the line height variable defined on the Bild home css -> newsTickerTime line height: 1.3. Line height for this component does not change across devices.
    */
-  --super-ateaser-title-inline-space: 16px;
+  --news-ticker-time-line-height: 20.799999237060547px;
+  --news-ticker-content-stack-space: 4px;
+  --news-ticker-kicker-inner-stack-space: 2px;
+  --news-ticker-titles-inline-space: 18px;
+  --news-ticker-badges-inline-space: 8px;
+  --news-ticker-time-kicker-stack-space: 4px;
+  --news-ticker-entries-stack-space: 22px;
+  --news-ticker-kicker-inner-inline-space: 4px;
+  --news-ticker-skeleton-bottom-space: 64px;
+  --news-ticker-red-dot-size: 12px;
+  --news-ticker-entries-left-inline-space: 22px;
+  --news-ticker-line-inline-space: 6px;
+  --news-ticker-app-card-height-size: 116px;
+  --news-ticker-app-card-width-size: 250px;
 
-  /* Component - ToggleSwitch */
+  /* Component - Liveticker */
+  --live-tickerheadline-font-weight: 600;
   /**
-   * This variable is used on labels in list items with toggle switches found in app preferences. 14 - 14 - 16 - 18
+   * This variable is used for the font size of live ticker headlines. 22 - 22 - 32 - 32
    */
-  --app-toggle-item-label-font-size: 14px;
+  --live-ticker-headlines-font-size: 22px;
+  --time-stamp-font-family: Gotham XNarrow;
   /**
-   * This variable is used on labels in list items with toggle switches found in app preferences. 14.1 - 14.1 - 16.2 - 18.2
+   * This variable is used for the live ticker time stamp font size. 14 - 14 - 16 - 16
    */
-  --app-toggle-item-label-line-height: 14.100000381469727px;
+  --live-ticker-time-stamp-font-size: 14px;
+  --live-ticker-time-headline-stack-space: 4px;
+  --live-ticker-slider-item-width-max-size: 257px;
+  --live-ticker-app-card-height-size: 96px;
+  --live-ticker-app-card-width-size: 250px;
 
   /* Component - Video */
   /**
@@ -555,101 +348,325 @@
    */
   --video-ad-badge-font-size: 14px;
 
-  /* Component - _DSysDocs */
+  /* Component - Pagination */
+  --gallery-pagination-item-height-size: 4px;
   /**
-   * Variable used in spacing parameters of bild.design webpage mockups. move to bild.design group maybe
+   * 8 - 8 - 12 - 12 - this component level variable references the inlineSpaceConst semantic variables; SM for smaller devices, MD for larger devices
    */
-  --bild-design-frame-space: 12px;
+  --gallery-pagination-container-web-inline-space: 8px;
   /**
-   * This variable is used on documentation pages. This is an alternative variable to the main container max width variable. 0 - 0 - 68 - 68
+   * 12 - 12 - 16 - 16 - this component level variable references the semantic
    */
-  --ds-main-container-space: 0px;
-  --dsys-docs-width-size: 320px;
+  --gallery-pagination-container-stack-space: 12px;
+  --gallery-pagination-container-app-inline-space: 12px;
+  --scroll-bar-thickness-size: 8px;
+
+  /* Component - Dropdown */
+  --drop-down-border-radius: 4px;
+  --drop-down-item-stack-space: 8px;
+  --drop-down-item-inline-space: 12px;
+
+  /* Component - Inputfield */
+  --input-field-stack-space: 6px;
+  --input-field-inline-space: 16px;
+  --input-field-mini-label-inline-space: 4px;
   /**
-   * This variable is used as a max width size for content blocks. For mobile devices this var references the DSysDocsWidthSize var 320 - 750 - 962 - 1024
+   * This variable controls texts inside of input fields such as dropdowns, date input and other text inputs that appear in forms for example. compact 15 - default 17 - spacious 19
    */
-  --main-content-stage-size: 320px;
+  --input-field-font-size: 16px;
+  --input-field-imessage-inline-space: 16px;
+  --input-field-height-size: 36px;
+  --hey-input-container-inline-space: 8px;
+  --input-field-message-gap-space: 4px;
+  --input-field-font-family: Lucida Grande;
+
+  /* Component - Breadcrumb */
   /**
-   * This variable is used on documentation pages that have an artistic banner at the top of the page that is related to the foundation topic on the page. 80 - 80 -80 - 140
+   * 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices.
    */
-  --foundations-banner-height-size: 80px;
+  --breadcrumb-font-size: 15px;
+  --breadcrumb-font-family: Lucida Grande;
+  --breadcrumb-arrow-left-inline-space1: 3px;
+  --breadcrumb-arrow-right-inline-space2: 5px;
+  --breadcrumb-inline-space: 12px;
   /**
-   * This variable is used in documentation pages that have small caption or lables along with a UI component documented. 4 - 4 - 6 - 8
+   * 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices.
    */
-  --ds-caption-stack-space0-5x: 4px;
-  --ds-caption-stack-space1x: 8px;
+  --breadcrumb-line-height: 15px;
+  --breadcrumb-font-weight: 700;
+  --breadcrumb-stack-space: 14px;
+
+  /* Component - Icon */
+  --icon-size: 24px;
+  --icon-size-embedd-media: 40px;
+
+  /* Component - Badge */
   /**
-   * This variable is used only for this design system's component tests.
+   * This space variable is used for creating the top and bottom space between a badge's text label and the surface that the text label is on top of.
    */
-  --1column-mobile: 320px;
+  --badges-inner-stack-space: 2px;
   /**
-   * This variable is currently used on a thin gallery that appears on desktop websites with petbook and other "books" content. Its height changes to a large height on mobile sites. 558 - 558 - 558 - 186
+   * This space variable is used for creating the left and right space between a badge's text label and the badge background surface that the text label is on top of.
    */
-  --thin-banner-vertical-height-size: 558px;
+  --badges-inner-inline-space: 4px;
   /**
-   * This variable is used only for texts and labels that form part of this design system's documentation.
+   * 30 - 30 - 30 - 30 - This variable is used on the Advert rectangular badge that is found above an ad containers.
    */
-  --specs-font-family: Gotham;
+  --ad-label-badge-height-size: 30px;
+
+  /* Component - SectionTitle */
+  --section-title-inner-stack-bottom-space: 12px;
+  --section-title-height-size: 32px;
   /**
-   * This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180
+   * This variable is used on large title headings that are h2 elements in html and indicate a new section in the user interface. This space changes when a user hovers over the large title.
    */
-  --doc-header-height-size: 144px;
+  --section-title-arrow-inline-space: 5px;
+  /**
+   * This variable is used for increasing the space between the text and the arrow at the end of the large title text. On mobile devices there is no hover state so this variables values are the same as the default state values.
+   */
+  --section-title-arrow-inline-space-active: 5px;
 
+  /* Component - AudioPlayer */
+  /**
+   * This variable is used in the text style dedicated to audio player labels for elapsed time, reproduction speed and short functionality description text. 16 - 16 - 16 - 18
+   */
+  --audio-player-font-size: 16px;
 
-  /* ============================================
-     OTHER
-     ============================================ */
+  /* Component - SpecialNavi */
+  --special-navi-inline-space: 24px;
 
-  --breakpoint-name: xs;
+  /* Component - Chips */
+  /**
+   * This variable is used on the chips font size parameter of the chips text style. The font size changes only for the change between larger device widths and any device smaller than the largest. 16 - 16 -16 - 18
+   */
+  --chips-font-size: 16px;
+  --chips-inline-space: 12px;
+  --chips-stack-space: 8px;
+
+  /* Component - Search */
+  --search-result-badge-height-size: 18px;
+
+  /* Component - RadioButtons */
+  --radio-selector-size: 20px;
+  --radio-selector-dot-active-size: 12px;
+
+  /* Component - Skeletons */
+  --headlines-skeleton-image-placeholder-max-width: 282px;
+  --article-skeleton-image-inline-space: 12px;
+  --article-skeleton-text-inline-space: 0px;
+  --article-text-skeleton-height-size: 270px;
+
+  /* Component - Spinners */
+  --video-spinner-size: 40px;
+  --video-spinner-stroke-size: 2px;
+  --video-spinner-size0-5x: 20px;
+
+  /* Component - BreakingNews */
+  --breaking-news-container-height-size: 56px;
+  --breaking-news-badge-upper-title-font-size: 13px;
+  --breaking-news-badge-lower-title-font-size: 23px;
+  --breaking-news-badge-upper-title-line-height: 13px;
+  --breaking-news-badge-lower-title-line-height: 21px;
+  --breaking-news-badge-titels-stack-space: 0px;
+  --breaking-news-scrolling-text-font-size: 21px;
+  --breaking-news-scrolling-text-line-height: 24px;
+  --breaking-news-badge-inline-space: 6px;
+
+  /* Component - InfoElement */
+  --info-element-teaser-badge-height-size: 16px;
+  --info-element-teaser-image-height-size: 80px;
+  --info-element-teaser-image-width-size: 80px;
+  --info-element-teaser-badge-margin-space: 4px;
+
+  /* Component - Mediaplayer */
+  --podcast-play-button-size: 48px;
+  --vid-player-bottom-bar-gap-space: 0px;
+  --audio-player-header-stack-space: 56px;
+  --video-time-badge-font-family: Lucida Grande;
+  --vid-player-control-button-size: 42px;
+  --vid-player-control-button-icon-size-hover: 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: 220px;
+
+  /* Component - Tabs */
+  /**
+   * Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
+   */
+  --tab-label-font-size: 16px;
+  --ios-tabbar-height-size: 49px;
+  --android-tabbar-height-size: 56px;
+  /**
+   * Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
+   */
+  --tab-label-font-size-line: 12px;
+  /**
+   * Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
+   */
+  --apps-tabs-label-font-size: 11px;
+  /**
+   * Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
+   */
+  --apps-tabs-label-line-height: 14.399999618530273px;
+  --top-bar-tab-item-height-size: 44px;
+
+  /* Component - Drawers */
+  --mobile-menu-drawer-stack-space: 20px;
+  --mobile-menu-drawer-left-inline-space: 20px;
+  --mobile-menu-drawer-right-inline-space: 16px;
+  --mobile-menu-drawer-max-width-size: 400px;
+
+  /* Component - Quotes */
+  --quote-container-inline-space: 16px;
+  --quote-container-stack-space: 16px;
+  --quote-quotation-marks-font-size: 28px;
+  --quote-content-gap-space: 16px;
+
+  /* Component - Carousel */
+  /**
+   * This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination.
+   */
+  --gallery-teaser-title-bottom-space: 28px;
+  /**
+   * This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination.
+   */
+  --gallery-teaser-app-gap-space: 0px;
+  --app-epaper-carousel-item-focus-width: 182px;
+  --app-epaper-carousel-item-default-width: 144px;
+  --app-epaper-carouse-beilage-item-width: 110px;
+  --standard-teaser-gallery-teaser-width-web: 145px;
+  --standard-teaser-gallery-teaser-width-app: 280px;
+
+  /* Component - Sliders */
+  --slider-progress-bar-idle-height-size: 4px;
+  --slider-progress-bar-hover-height-size: 8px;
+  --slider-progress-inactive-height-size: 2px;
+  --vid-player-progress-bar-height-size: 12px;
+
+  /* Component - Footer */
+  /**
+   * This variable is used on footer links that commonly show up at the bottom of pages. The font size parameter remains constant at 11 px across device sizes.
+   */
+  --footer-font-size: 11px;
+  --footer-line-height: 14px;
+  --footer-font-family: Gotham XNarrow;
+  --footer-font-size-user-offer-pages: 18px;
+  --footer-line-height-user-offer-pages: 26px;
+
+  /* Component - Accordion */
+  /**
+   * This variable exists specifically for changing the accordion font family across brands. It is subject to review. Bild: GothamXNarrow, SpoBi: Inter, Ads: LucindaGrande
+   */
+  --accordion-label-font-family: Lucida Grande;
+
+  /* Component - Paywall */
+  --paywall-container-gap-space: -48px;
+  --paywall-header-bottom-stack-space: 80px;
+  --paywall-card-max-width-size: 346px;
+  /**
+   * This variable is used on the paywall card price tag. 64 constant
+   */
+  --paywall-card-price-tag-font-size: 64px;
+  --paywall-card-price-tag-line-height: 64px;
+  --paywall-card-price-note-line-height: 40px;
+  /**
+   * This variable is used on the paywall card text under the price tag. 40 - 40 - 40 - 40
+   */
+  --paywall-card-price-note-font-size: 40px;
+
+  /* Component - ToggleSwitch */
+  /**
+   * This variable is used on labels in list items with toggle switches found in app preferences. 14 - 14 - 16 - 18
+   */
+  --app-toggle-item-label-font-size: 14px;
+  /**
+   * This variable is used on labels in list items with toggle switches found in app preferences. 14.1 - 14.1 - 16.2 - 18.2
+   */
+  --app-toggle-item-label-line-height: 14.100000381469727px;
+
+  /* Component - Cards */
+  --search-result-card-image-width-size: 216px;
+  --search-result-card-image-height-size-stacked: 189px;
+  --newsticker-image-card-width-size: 206px;
+
+  /* Component - Datepicker */
+  --datepicker-item-day-width-size: 44px;
+  --datepicker-item-height-size: 44px;
+  --datepicker-item-year-width-size: 77px;
 
 
   /* ============================================
      SEMANTIC
      ============================================ */
 
-  /* Semantic - Border - BorderRadius */
+  /* Semantic - Layout - Grid - Responsive */
   /**
-   * 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges.
+   * 24-24-32-32 – use for side paddings and gutters in responsive layouts
    */
-  --border-radius-xs: 2px;
+  --grid-space-resp-lg: 24px;
   /**
-   * 8-8-8-8 – Standard radius for buttons, chips, input fields, and medium-sized interactive elements.
+   * 48-48-64-64 – use for side paddings and gutters in responsive layouts
    */
-  --border-radius-md: 8px;
+  --grid-space-resp-xl: 48px;
   /**
-   * 4-4-4-4 – use for corner rounding on compact components like checkboxes or small input controls.
+   * 12-12-12-16 – use for side paddings and gutters in responsive layouts
    */
-  --border-radius-sm: 4px;
+  --grid-space-resp-base: 12px;
   /**
-   * 24-24-24-24 – use for corner rounding on larger cards, overlays, dialogs, and other container components.
+   * 6-6-6-8 – use for side paddings and gutters in responsive layouts
    */
-  --border-radius-xl: 24px;
+  --grid-space-resp-sm: 6px;
   /**
-   * 16-16-16-16 – use for corner rounding on small cards, overlays, and modal surfaces.
+   * 0-0-0-16 – This token is used on the main homepages content container, ensuring full-width layout (no horizontal padding) on mobile and tablet breakpoints.
    */
-  --border-radius-lg: 16px;
+  --page-inline-space: 0px;
+
+  /* Semantic - Layout - Grid - Constant */
   /**
-   * 0-0-0-0 – no corner rounding. Used as default for flat layouts, content modules, images, and teaser elements.
+   * 16-16-16-16 – use for fixed side paddings and gutters
    */
-  --border-radius-none: 0px;
+  --grid-space-const-lg: 16px;
   /**
-   * creates fully rounded shapes, typically used for circular elements like avatars.
+   * 12-12-12-12 – use for fixed side paddings and gutters
+   */
+  --grid-space-const-sm: 12px;
+
+  /* Semantic - Layout - Grid - LayoutGuide */
+  /**
+   * Used to set the column count in Figma Layout guide Grids
+   */
+  --layout-guide-grid-colums: 4px;
+
+  /* Semantic - Layout - Section */
+  /**
+   * 36-36-48-48 – Use for vertical spacing between sections in a layout.
+   */
+  --section-space-base: 36px;
+  /**
+   * 72-72-96-96 – Use for vertical spacing between sections in a layout
+   */
+  --section-space-lg: 72px;
+  /**
+   * 16-16-32-32 – Use for spacing after paragraphs in text content
    */
-  --border-radius-full: 9999px;
-
-  /* Semantic - Border - BorderWidth */
+  --paragraph-end-space: 16px;
   /**
-   * 1-1-1-1 – use for subtle outlines and dividers
+   * 24-24-36-36 – Use for vertical spacing between subsections in a layout
    */
-  --border-width-thin: 1px;
+  --section-space-sm: 24px;
+
+  /* Semantic - Layout - Breakpoints */
   /**
-   * 2-2-2-2 – use for stronger outlines on form elements (inputs), buttons (outline variants), and interaction states (focus, hover, active)
+   * 320 - 390 - 600 - 1024 – Defines the minimum width of the main frame for different breakpoints.
+Apply this token to the main frame of page layouts to simulate realistic minimum widths across responsive viewports.
    */
-  --border-width-thick: 2px;
+  --breakpoint-min-width-size: 320px;
   /**
-   * 0.33 -0.33 -0.33 -0.33 – primarily used in mobile app interfaces. Optimized for high-density displays to create subtle dividers and outlines without visual overload.
+   * 389 - 599 - 1023 - 1024 – Defines the minimum width of the main frame for different breakpoints.
+Apply this token to the main frame of page layouts to simulate realistic maximum widths across responsive viewports.
    */
-  --border-width-hairline: 0.33000001311302185px;
+  --breakpoint-max-width-size: 389px;
 
   /* Semantic - Layout */
   /**
@@ -673,18 +690,6 @@ Apply this token to the main frame of page layouts to simulate realistic vertica
    */
   --canvas-height-size-app: 568px;
 
-  /* Semantic - Layout - Breakpoints */
-  /**
-   * 320 - 390 - 600 - 1024 – Defines the minimum width of the main frame for different breakpoints.
-Apply this token to the main frame of page layouts to simulate realistic minimum widths across responsive viewports.
-   */
-  --breakpoint-min-width-size: 320px;
-  /**
-   * 389 - 599 - 1023 - 1024 – Defines the minimum width of the main frame for different breakpoints.
-Apply this token to the main frame of page layouts to simulate realistic maximum widths across responsive viewports.
-   */
-  --breakpoint-max-width-size: 389px;
-
   /* Semantic - Layout - ContentWidth */
   /**
    * Use for content containers that should not fill the full page width on larger viewports. This is commonly used on article body text content and other elements in an article page.
@@ -695,255 +700,368 @@ Apply this token to the main frame of page layouts to simulate realistic maximum
    */
   --content-max-width-full: 1024px;
 
-  /* Semantic - Layout - Grid - Constant */
+  /* Semantic - Typography - FontSize - Title */
   /**
-   * 16-16-16-16 – use for fixed side paddings and gutters
+   * 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
    */
-  --grid-space-const-lg: 16px;
+  --title1-font-size: 22px;
   /**
-   * 12-12-12-12 – use for fixed side paddings and gutters
+   * 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
    */
-  --grid-space-const-sm: 12px;
+  --title2-font-size: 14px;
 
-  /* Semantic - Layout - Grid - LayoutGuide */
+  /* Semantic - Typography - FontSize - Display */
   /**
-   * Used to set the column count in Figma Layout guide Grids
+   * This variable is used on the font size parameter for the display1 text style. 40 - 40 - 72 - 120
    */
-  --layout-guide-grid-colums: 4px;
+  --display1-font-size: 39px;
+  /**
+   * This variable is used for the font size parameter of the Display2 text style. 36 - 36 - 42 - 64
+   */
+  --display2-font-size: 35px;
+  /**
+   * This variable is used on the display3 font size parameter of the display3 text style. 28 - 28 - 32 - 40
+   */
+  --display3-font-size: 27px;
 
-  /* Semantic - Layout - Grid - Responsive */
+  /* Semantic - Typography - FontSize - Headline */
   /**
-   * 24-24-32-32 – use for side paddings and gutters in responsive layouts
+   * This token is used for the headline1 text style's font size parameter. 48 - 48 - 72 - 100
    */
-  --grid-space-resp-lg: 24px;
+  --headline1-font-size: 36px;
   /**
-   * 48-48-64-64 – use for side paddings and gutters in responsive layouts
+   * This token is used on the headline2 text style's font size parameter. 40 - 40 - 48 - 64
    */
-  --grid-space-resp-xl: 48px;
+  --headline2-font-size: 30px;
   /**
-   * 12-12-12-16 – use for side paddings and gutters in responsive layouts
+   * This token is used on the headline3 text style's font size parameter. 28 - 28 - 36 - 40
    */
-  --grid-space-resp-base: 12px;
+  --headline3-font-size: 24px;
   /**
-   * 6-6-6-8 – use for side paddings and gutters in responsive layouts
+   * This token controls the headline4 text style's font size parameter: 22 - 22 - 26 - 32
    */
-  --grid-space-resp-sm: 6px;
+  --headline4-font-size: 16px;
+
+  /* Semantic - Typography - FontSize - Body */
   /**
-   * 0-0-0-16 – This token is used on the main homepages content container, ensuring full-width layout (no horizontal padding) on mobile and tablet breakpoints.
+   * This variable is used on the body text style's font size parameter. It remains constant at 21.
    */
-  --page-inline-space: 0px;
+  --body-font-size: 17px;
 
-  /* Semantic - Layout - Section */
+  /* Semantic - Typography - FontSize - Label */
   /**
-   * 36-36-48-48 – Use for vertical spacing between sections in a layout.
+   * This token is used in the label3 text style's font size parameter. Its value remains constant at 12 across device sizes.
    */
-  --section-space-base: 36px;
+  --label3-font-size: 12px;
   /**
-   * 72-72-96-96 – Use for vertical spacing between sections in a layout
+   * This variable controls the label2 text style's font size parameter. Its value remains constant at 15.
    */
-  --section-space-lg: 72px;
+  --label2-font-size: 15px;
   /**
-   * 16-16-32-32 – Use for spacing after paragraphs in text content
+   * This token is used in the label1 text style font size parameter. Its value remains constant at 17 across device sizes.
    */
-  --paragraph-end-space: 16px;
+  --label1-font-size: 17px;
   /**
-   * 24-24-36-36 – Use for vertical spacing between subsections in a layout
+   * 10 - 10 - 15 - 17 Use this label font size when you want your label's font size to change across device sizes.
    */
-  --section-space-sm: 24px;
-
-  /* Semantic - Size - Constant */
+  --label1-font-size-responsive: 10px;
   /**
-   * 16-16-16-16 – Use for setting fixed height and width of UI elements
+   * This token is used in the font size parameter of the label4 text style. The value remains constant at 8.
    */
-  --size-const3-xs: 16px;
+  --label4-font-size: 8px;
+
+  /* Semantic - Typography - FontSize - Callout */
   /**
-   * 24-24-24-24 – Use for setting fixed height and width of UI elements
+   * This token is used for the font size parameter of the callout text style. 18 - 18 - 22 - 22
    */
-  --size-const2-xs: 24px;
+  --callout1-font-size: 16px;
+
+  /* Semantic - Typography - FontSize - Footnote */
   /**
-   * 32-32-32-32 – Use for setting fixed height and width of UI elements
+   * This token is used on the footnote text style font size parameter. 16 - 16 - 16 - 18
    */
-  --size-const-xs: 32px;
+  --footnote1-font-size: 13px;
   /**
-   * 40-40-40-40 – Use for setting fixed height and width of UI elements
+   * This token is used in the font size parameter of the footnote2 text style. 12 - 12 - 12 - 16
    */
-  --size-const-sm: 40px;
+  --footnote2-font-size: 10px;
+
+  /* Semantic - Typography - FontSize - Kicker */
   /**
-   * 48-48-48-48 Use for setting fixed height and width of UI elements
+   * Values come from NMT Figma File 01_Foundation; in online CSS this is kicker0. 18 - 18 - 22 - 30 - This variable does not exist yet in online css. Online css is called kicker0 for smallest font size.
    */
-  --size-const-md: 48px;
+  --kicker1-font-size: 16px;
   /**
-   * 56-56-56-56 – Use for setting fixed height and width of UI elements
+   * Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. This DS uses 1 to 4 following html convention of h1, h2, h3, etc. 18 - 18 - 22 - 24
    */
-  --size-const-lg: 56px;
+  --kicker2-font-size: 16px;
   /**
-   * 64-64-64-64 – Use for setting fixed height and width of UI elements
+   * Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 16 - 16 - 18 - 20
    */
-  --size-const-xl: 64px;
+  --kicker3-font-size: 14px;
   /**
-   * 96-96-96-96 – Use for setting fixed height and width of UI elements
+   * Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 14 - 14 - 16 - 16
    */
-  --size-const3-xl: 96px;
+  --kicker4-font-size: 12px;
+
+  /* Semantic - Typography - FontSize - Subheadline */
   /**
-   * 148-148-148-148 – Use for setting fixed height and width of UI elements
+   * This token controls the subheadline1 font size parameter. 24 - 24 - 32 - 36
    */
-  --size-const4-xl: 148px;
+  --subheadline1-font-size: 18px;
+
+  /* Semantic - Typography - FontSize - Quote */
   /**
-   * 72-72-72-72 – Use for setting fixed height and width of UI elements
+   * 16 - 16 - 18 - 20 -- This variable is used for controlling the font size of the quote text style.
    */
-  --size-const2-xl: 72px;
+  --quote-font-size: 16px;
+
+  /* Semantic - Typography - FontFamily */
   /**
-   * 8-8-8-8 – Use for setting fixed height and width of UI elements
+   * This variable references the bodyFontFamily variable from the branding collection.
    */
-  --size-const4-xs: 8px;
+  --body-font-family: Lucida Grande;
+  --callout-font-family: Lucida Grande;
+  --headline-font-family: Lucida Grande;
+  --footnote-font-family: Lucida Grande;
+  --label-font-family: Lucida Grande;
+  --kicker-font-family: Lucida Grande;
+  --subheadline-font-family: Lucida Grande;
+  --title-font-family: Lucida Grande;
+  --quote-font-family: Lucida Grande;
+  --display-font-family: Lucida Grande;
 
-  /* Semantic - Size - Responsive */
+  /* Semantic - Typography - FontWeight - Callout */
+  --callout-font-weight: 800;
+
+  /* Semantic - Typography - FontWeight - Label */
+  --label-font-weight-bold: 700;
+  --label-font-weight-book: 400;
+
+  /* Semantic - Typography - FontWeight - Body */
+  --body-font-weight-book: 400;
+  --body-font-weight-bold: 700;
+
+  /* Semantic - Typography - FontWeight - Kicker */
+  --kicker-font-weight: 700;
+  --kicker-font-weight-st: 700;
+
+  /* Semantic - Typography - FontWeight - Subheadline */
+  --subheadline-font-weight: 700;
+
+  /* Semantic - Typography - FontWeight - Headline */
+  --headline1-font-weight: 700;
+  --headline2-font-weight: 700;
+  --headline3-font-weight: 700;
+  --headline4-font-weight: 600;
   /**
-   * 16-16-16-24 – Use for setting height and width of UI elements that scale across breakpoints
+   * This variable is a string type variable for controlling not only headline font weight but also the italic style for Sport Bild headlines.
    */
-  --size-resp3-xs: 16px;
+  --headline1-font-weight-st: 700;
+
+  /* Semantic - Typography - FontWeight - Title */
+  --title-font-weight: 800;
+
+  /* Semantic - Typography - FontWeight - Display */
+  --display-font-weight: 800;
+
+  /* Semantic - Typography - FontWeight - Quote */
+  --quote-font-weight: 800;
+
+  /* Semantic - Typography - FontWeight - Footnote */
+  --footnote-font-weight-book: 400;
+  --footnote-font-weight-bold: 700;
+
+  /* Semantic - Typography - LineHeight - Body */
   /**
-   * 24-24-32-32 – Use for setting height and width of UI elements that scale across breakpoints
+   * Figma's font line height currently does not allow for multipliers as is used on current website css var(--body-line-height)
    */
-  --size-resp2-xs: 24px;
+  --body-line-height: 29.75px;
+
+  /* Semantic - Typography - LineHeight - Kicker */
+  --kicker4-line-height: 13.199999809265137px;
+  --kicker3-line-height: 15.399999618530273px;
+  --kicker2-line-height: 17.600000381469727px;
+  --kicker1-line-height: 17.600000381469727px;
+
+  /* Semantic - Typography - LineHeight - Label */
+  --label3-line-height: 14.399999618530273px;
   /**
-   * 32-32-40-48 – Use for setting height and width of UI elements that scale across breakpoints
+   * This variable is used in the label1 text style's line height parameter. It references branding variables for brand specific line heights.
    */
-  --size-resp-xs: 32px;
+  --label1-line-height: 20.399999618530273px;
+  --label1-responsive-line-height: 10px;
+  --label2-line-height: 16px;
+  --label4-line-height: 10px;
+
+  /* Semantic - Typography - LineHeight - Display */
+  --display1-line-height: 40px;
+  --display2-line-height: 36px;
+  --display3-line-height: 28px;
+
+  /* Semantic - Typography - LineHeight - Title */
+  --title1-line-height: 26.399999618530273px;
   /**
-   * 40-40-48-56 – Use for setting height and width of UI elements that scale across breakpoints
+   * html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
    */
-  --size-resp-sm: 40px;
+  --title2-line-height: 16.799999237060547px;
+
+  /* Semantic - Typography - LineHeight - Quote */
   /**
-   * 48-48-64-72 – Use for setting height and width of UI elements that scale across breakpoints
+   * This variable is used in the quote text style line height parameter.
    */
-  --size-resp-md: 48px;
+  --quote-line-height: 20.799999237060547px;
+
+  /* Semantic - Typography - LineHeight - Footnote */
+  --footnote1-line-height: 16.899999618530273px;
+  --footnote2-line-height: 13px;
+
+  /* Semantic - Typography - LineHeight - Headline */
+  --headline1-line-height: 37.79999923706055px;
+  --headline2-line-height: 33px;
+  --headline3-line-height: 26.399999618530273px;
+  --headline4-line-height: 18.399999618530273px;
+
+  /* Semantic - Typography - LineHeight - Callout */
+  --callout-line-height: 20.799999237060547px;
+
+  /* Semantic - Typography - LineHeight - Subheadline */
+  --subheadline1-line-height: 23.399999618530273px;
+
+  /* Semantic - Typography - LetterSpacing */
   /**
-   * 56-56-72-92 – Use for setting height and width of UI elements that scale across breakpoints
+   * 0.5 | 0.5 | 0.5 | 0.5 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
    */
-  --size-resp-lg: 56px;
+  --letter-spacing-positive-sm: 0.5px;
   /**
-   * 64-64-80-96 – Use for setting height and width of UI elements that scale across breakpoints
+   * 2 | 2 | 2 | 3 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
    */
-  --size-resp-xl: 64px;
+  --letter-spacing-positive-lg: 2px;
   /**
-   * 72-72-92-100 – Use for setting height and width of UI elements that scale across breakpoints
+   * 1 | 1 | 1 | 1 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
    */
-  --size-resp2-xl: 72px;
+  --letter-spacing-positive-md: 1px;
   /**
-   * 96-96-120-148 – Use for setting height and width of UI elements that scale across breakpoints
+   * 0 | 0 | 0 | 0 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
    */
-  --size-resp3-xl: 96px;
+  --letter-spacing-none: 0px;
   /**
-   * 148-148-160-180 – Use for setting height and width of UI elements that scale across breakpoints
+   * -0.5 | -0.5 | -0.25 | -0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
    */
-  --size-resp4-xl: 148px;
+  --letter-spacing-negative-sm: -0.5px;
   /**
-   * 12-12-14-16 – Use for setting height and width of UI elements that scale across breakpoints
+   * -1 | -1 | -1 | -1 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
    */
-  --size-resp4-xs: 12px;
-
-  /* Semantic - Space - Gap - Constant */
+  --letter-spacing-negative-md: -1px;
   /**
-   * 2-2-2-2 – Use for fixed gaps between items inside of UI elements
+   * -2 | -2 | -2 | -3 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
    */
-  --gap-space-const2-xs: 2px;
+  --letter-spacing-negative-lg: -2px;
   /**
-   * 4-4-4-4 – Use for fixed gaps between items inside of UI elements
+   * -0.25 | -0.25 | -0.25 | -0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. This letter spacing was only found in large titles on iOS mobile app large title component.
    */
-  --gap-space-const-xs: 4px;
+  --letter-spacing-negative-xs: -0.25px;
   /**
-   * 8-8-8-8 – Use for fixed gaps between items inside of UI elements
+   * 0.25 | 0.25 | 0.25 | 0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
    */
-  --gap-space-const-sm: 8px;
+  --letter-spacing-positive-xs: 0.25px;
+
+  /* Semantic - Typography - LetterSpacing - display */
   /**
-   * 12-12-12-12 – Use for fixed gaps between items inside of UI elements
+   * -0.5 | -0.5 | -1 | -2 | This variable is used for the letter spacing parameter of the display1 text style. On smaller devices the value is smaller than on larger devices. On desktop devices the letter spacing is further reduced for making the text style more compact.
    */
-  --gap-space-const-md: 12px;
+  --display1-letter-spacing: -0.5px;
   /**
-   * 16-16-16-16 – Use for fixed gaps between items inside of UI elements
+   * -0.5 | -0.5 | -1 | -1 | This variable is used for the letter spacing parameter of the display2 text style. On smaller devices the value is smaller than on larger devices.
    */
-  --gap-space-const-lg: 16px;
+  --display2-letter-spacing: -0.5px;
   /**
-   * 24-24-24-24 – Use for fixed gaps between items inside of UI elements
+   * -0.5 | -0.5 | -1 | -1 | This variable is used for the letter spacing parameter of the display3 text style. On smaller devices the value is smaller than on larger devices.
    */
-  --gap-space-const-xl: 24px;
+  --display3-letter-spacing: -0.5px;
+
+  /* Semantic - Border - BorderRadius */
   /**
-   * 32-32-32-32 – Use for fixed gaps between items inside of UI elements
+   * 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges.
    */
-  --gap-space-const2-xl: 32px;
+  --border-radius-xs: 2px;
   /**
-   * 48-48-48-48 – Use for fixed gaps between items inside of UI elements
+   * 8-8-8-8 – Standard radius for buttons, chips, input fields, and medium-sized interactive elements.
    */
-  --gap-space-const3-xl: 48px;
-
-  /* Semantic - Space - Gap - Responsive */
+  --border-radius-md: 8px;
   /**
-   * 4-4-6-8 – Use for gaps between items inside of UI elements that scale across breakpoints
+   * 4-4-4-4 – use for corner rounding on compact components like checkboxes or small input controls.
    */
-  --gap-space-resp-xs: 4px;
+  --border-radius-sm: 4px;
   /**
-   * 16-16-24-32 – Use for gaps between items inside of UI elements that scale across breakpoints
+   * 24-24-24-24 – use for corner rounding on larger cards, overlays, dialogs, and other container components.
    */
-  --gap-space-resp-lg: 16px;
+  --border-radius-xl: 24px;
   /**
-   * 24-24-32-48 – Use for gaps between items inside of UI elements that scale across breakpoints
+   * 16-16-16-16 – use for corner rounding on small cards, overlays, and modal surfaces.
    */
-  --gap-space-resp-xl: 24px;
+  --border-radius-lg: 16px;
   /**
-   * 32-32-48-64 – Use for gaps between items inside of UI elements that scale across breakpoints
+   * 0-0-0-0 – no corner rounding. Used as default for flat layouts, content modules, images, and teaser elements.
    */
-  --gap-space-resp2-xl: 32px;
+  --border-radius-none: 0px;
   /**
-   * 12-12-16-24 – Use for gaps between items inside of UI elements that scale across breakpoints
+   * creates fully rounded shapes, typically used for circular elements like avatars.
    */
-  --gap-space-resp-md: 12px;
+  --border-radius-full: 9999px;
+
+  /* Semantic - Border - BorderWidth */
   /**
-   * 8-8-12-16 – Use for gaps between items inside of UI elements that scale across breakpoints
+   * 1-1-1-1 – use for subtle outlines and dividers
    */
-  --gap-space-resp-sm: 8px;
+  --border-width-thin: 1px;
   /**
-   * 2-2-4-6 – Use for gaps between items inside of UI elements that scale across breakpoints
+   * 2-2-2-2 – use for stronger outlines on form elements (inputs), buttons (outline variants), and interaction states (focus, hover, active)
    */
-  --gap-space-resp2-xs: 2px;
+  --border-width-thick: 2px;
   /**
-   * 48-48-72-96 – Use for gaps between items inside of UI elements that scale across breakpoints
+   * 0.33 -0.33 -0.33 -0.33 – primarily used in mobile app interfaces. Optimized for high-density displays to create subtle dividers and outlines without visual overload.
    */
-  --gap-space-resp3-xl: 48px;
+  --border-width-hairline: 0.33000001311302185px;
 
-  /* Semantic - Space - Inline - Constant */
+  /* Semantic - Visibility - Boolean */
   /**
-   * 8-8-8-8 – Use for fixed horizontal (left/right) padding of UI elements
+   * Use for showing elements on mobile viewport sizes only
    */
-  --inline-space-const-sm: 8px;
+  --visilble-mobile-only: true;
   /**
-   * 12-12-12-12 – Use for fixed horizontal (left/right) padding of UI elements
+   * Use for showing elements on desktop viewport sizes only
    */
-  --inline-space-const-md: 12px;
+  --visilble-desktop-only: false;
   /**
-   * 16-16-16-16 – Use for fixed horizontal (left/right) padding of UI elements
+   * Use for showing elements on viewport sizes above 600 px
    */
-  --inline-space-const-lg: 16px;
+  --visilble-above600px: false;
   /**
-   * 32-32-32-32 – Use for fixed horizontal (left/right) padding of UI elements
+   * Use for showing elements on viewport sizes below 600 px
    */
-  --inline-space-const2-xl: 32px;
+  --visilble-below600px: true;
   /**
-   * 24-24-24-24 – Use for fixed horizontal (left/right) padding of UI elements
+   * Use for hiding elements on mobile viewport sizes
    */
-  --inline-space-const-xl: 24px;
+  --hide-on-mobile: false;
   /**
-   * 6-6-6-6 – Use for fixed horizontal (left/right) padding of UI elements
+   * Use for showing elements on tablet viewport sizes only
    */
-  --inline-space-const-xs: 6px;
+  --visilble-tablet-only: false;
   /**
-   * 2-2-2-2 – Use for fixed horizontal (left/right) padding of UI elements
+   * Use for hiding elements on desktop viewport sizes only
    */
-  --inline-space-const3-xs: 2px;
+  --hide-on-desktop: true;
+
+  /* Semantic - Visibility - VariantSwitch */
+  --change-on-lg: xs/sm/md;
   /**
-   * 4-4-4-4 – Use for fixed horizontal (left/right) padding of UI elements
+   * This variable is used for controlling size changes across device sizes on some components such as the vertical newsticker cards and the search results cards. Both have cards that change layouts at different breakpoints.
    */
-  --inline-space-const2-xs: 4px;
+  --change-on-md: xs/sm;
+  --bp-specific-web: xs/sm;
+  --bp-specific-app: compact;
 
   /* Semantic - Space - Inline - Responsive */
   /**
@@ -967,39 +1085,39 @@ Apply this token to the main frame of page layouts to simulate realistic maximum
    */
   --inline-space-resp-xl: 24px;
 
-  /* Semantic - Space - Stack - Constant */
+  /* Semantic - Space - Inline - Constant */
   /**
-   * 8-8-8-8 – Use for fixed vertical (top/bottom) padding of UI elements
+   * 8-8-8-8 – Use for fixed horizontal (left/right) padding of UI elements
    */
-  --stack-space-const-sm: 8px;
+  --inline-space-const-sm: 8px;
   /**
-   * 12-12-12-12 – Use for fixed vertical (top/bottom) padding of UI elements
+   * 12-12-12-12 – Use for fixed horizontal (left/right) padding of UI elements
    */
-  --stack-space-const-md: 12px;
+  --inline-space-const-md: 12px;
   /**
-   * 16-16-16-16 – Use for fixed vertical (top/bottom) padding of UI elements
+   * 16-16-16-16 – Use for fixed horizontal (left/right) padding of UI elements
    */
-  --stack-space-const-lg: 16px;
+  --inline-space-const-lg: 16px;
   /**
-   * 32-32-32-32 – Use for fixed vertical (top/bottom) padding of UI elements
+   * 32-32-32-32 – Use for fixed horizontal (left/right) padding of UI elements
    */
-  --stack-space-const2-xl: 32px;
+  --inline-space-const2-xl: 32px;
   /**
-   * 24-24-24-24 – Use for fixed vertical (top/bottom) padding of UI elements
+   * 24-24-24-24 – Use for fixed horizontal (left/right) padding of UI elements
    */
-  --stack-space-const-xl: 24px;
+  --inline-space-const-xl: 24px;
   /**
-   * 6-6-6-6 – Use for fixed vertical (top/bottom) padding of UI elements
+   * 6-6-6-6 – Use for fixed horizontal (left/right) padding of UI elements
    */
-  --stack-space-const-xs: 6px;
+  --inline-space-const-xs: 6px;
   /**
-   * 2-2-2-2 – Use for fixed vertical (top/bottom) padding of UI elements
+   * 2-2-2-2 – Use for fixed horizontal (left/right) padding of UI elements
    */
-  --stack-space-const3-xs: 2px;
+  --inline-space-const3-xs: 2px;
   /**
-   * 4-4-4-4 – Use for fixed vertical (top/bottom) padding of UI elements
+   * 4-4-4-4 – Use for fixed horizontal (left/right) padding of UI elements
    */
-  --stack-space-const2-xs: 4px;
+  --inline-space-const2-xs: 4px;
 
   /* Semantic - Space - Stack - Responsive */
   /**
@@ -1023,323 +1141,205 @@ Apply this token to the main frame of page layouts to simulate realistic maximum
    */
   --stack-space-resp-xl: 24px;
 
-  /* Semantic - Typography - FontFamily */
-  /**
-   * This variable references the bodyFontFamily variable from the branding collection.
-   */
-  --body-font-family: Lucida Grande;
-  --callout-font-family: Lucida Grande;
-  --headline-font-family: Lucida Grande;
-  --footnote-font-family: Lucida Grande;
-  --label-font-family: Lucida Grande;
-  --kicker-font-family: Lucida Grande;
-  --subheadline-font-family: Lucida Grande;
-  --title-font-family: Lucida Grande;
-  --quote-font-family: Lucida Grande;
-  --display-font-family: Lucida Grande;
-
-  /* Semantic - Typography - FontSize - Body */
-  /**
-   * This variable is used on the body text style's font size parameter. It remains constant at 21.
-   */
-  --body-font-size: 17px;
-
-  /* Semantic - Typography - FontSize - Callout */
-  /**
-   * This token is used for the font size parameter of the callout text style. 18 - 18 - 22 - 22
-   */
-  --callout1-font-size: 16px;
-
-  /* Semantic - Typography - FontSize - Display */
-  /**
-   * This variable is used on the font size parameter for the display1 text style. 40 - 40 - 72 - 120
-   */
-  --display1-font-size: 39px;
+  /* Semantic - Space - Stack - Constant */
   /**
-   * This variable is used for the font size parameter of the Display2 text style. 36 - 36 - 42 - 64
+   * 8-8-8-8 – Use for fixed vertical (top/bottom) padding of UI elements
    */
-  --display2-font-size: 35px;
+  --stack-space-const-sm: 8px;
   /**
-   * This variable is used on the display3 font size parameter of the display3 text style. 28 - 28 - 32 - 40
+   * 12-12-12-12 – Use for fixed vertical (top/bottom) padding of UI elements
    */
-  --display3-font-size: 27px;
-
-  /* Semantic - Typography - FontSize - Footnote */
+  --stack-space-const-md: 12px;
   /**
-   * This token is used on the footnote text style font size parameter. 16 - 16 - 16 - 18
+   * 16-16-16-16 – Use for fixed vertical (top/bottom) padding of UI elements
    */
-  --footnote1-font-size: 13px;
+  --stack-space-const-lg: 16px;
   /**
-   * This token is used in the font size parameter of the footnote2 text style. 12 - 12 - 12 - 16
+   * 32-32-32-32 – Use for fixed vertical (top/bottom) padding of UI elements
    */
-  --footnote2-font-size: 10px;
-
-  /* Semantic - Typography - FontSize - Headline */
+  --stack-space-const2-xl: 32px;
   /**
-   * This token is used for the headline1 text style's font size parameter. 48 - 48 - 72 - 100
+   * 24-24-24-24 – Use for fixed vertical (top/bottom) padding of UI elements
    */
-  --headline1-font-size: 36px;
+  --stack-space-const-xl: 24px;
   /**
-   * This token is used on the headline2 text style's font size parameter. 40 - 40 - 48 - 64
+   * 6-6-6-6 – Use for fixed vertical (top/bottom) padding of UI elements
    */
-  --headline2-font-size: 30px;
+  --stack-space-const-xs: 6px;
   /**
-   * This token is used on the headline3 text style's font size parameter. 28 - 28 - 36 - 40
+   * 2-2-2-2 – Use for fixed vertical (top/bottom) padding of UI elements
    */
-  --headline3-font-size: 24px;
+  --stack-space-const3-xs: 2px;
   /**
-   * This token controls the headline4 text style's font size parameter: 22 - 22 - 26 - 32
+   * 4-4-4-4 – Use for fixed vertical (top/bottom) padding of UI elements
    */
-  --headline4-font-size: 16px;
+  --stack-space-const2-xs: 4px;
 
-  /* Semantic - Typography - FontSize - Kicker */
-  /**
-   * Values come from NMT Figma File 01_Foundation; in online CSS this is kicker0. 18 - 18 - 22 - 30 - This variable does not exist yet in online css. Online css is called kicker0 for smallest font size.
-   */
-  --kicker1-font-size: 16px;
+  /* Semantic - Space - Gap - Responsive */
   /**
-   * Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. This DS uses 1 to 4 following html convention of h1, h2, h3, etc. 18 - 18 - 22 - 24
+   * 4-4-6-8 – Use for gaps between items inside of UI elements that scale across breakpoints
    */
-  --kicker2-font-size: 16px;
+  --gap-space-resp-xs: 4px;
   /**
-   * Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 16 - 16 - 18 - 20
+   * 16-16-24-32 – Use for gaps between items inside of UI elements that scale across breakpoints
    */
-  --kicker3-font-size: 14px;
+  --gap-space-resp-lg: 16px;
   /**
-   * Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 14 - 14 - 16 - 16
+   * 24-24-32-48 – Use for gaps between items inside of UI elements that scale across breakpoints
    */
-  --kicker4-font-size: 12px;
-
-  /* Semantic - Typography - FontSize - Label */
+  --gap-space-resp-xl: 24px;
   /**
-   * This token is used in the label3 text style's font size parameter. Its value remains constant at 12 across device sizes.
+   * 32-32-48-64 – Use for gaps between items inside of UI elements that scale across breakpoints
    */
-  --label3-font-size: 12px;
+  --gap-space-resp2-xl: 32px;
   /**
-   * This variable controls the label2 text style's font size parameter. Its value remains constant at 15.
+   * 12-12-16-24 – Use for gaps between items inside of UI elements that scale across breakpoints
    */
-  --label2-font-size: 15px;
+  --gap-space-resp-md: 12px;
   /**
-   * This token is used in the label1 text style font size parameter. Its value remains constant at 17 across device sizes.
+   * 8-8-12-16 – Use for gaps between items inside of UI elements that scale across breakpoints
    */
-  --label1-font-size: 17px;
+  --gap-space-resp-sm: 8px;
   /**
-   * 10 - 10 - 15 - 17 Use this label font size when you want your label's font size to change across device sizes.
+   * 2-2-4-6 – Use for gaps between items inside of UI elements that scale across breakpoints
    */
-  --label1-font-size-responsive: 10px;
+  --gap-space-resp2-xs: 2px;
   /**
-   * This token is used in the font size parameter of the label4 text style. The value remains constant at 8.
+   * 48-48-72-96 – Use for gaps between items inside of UI elements that scale across breakpoints
    */
-  --label4-font-size: 8px;
+  --gap-space-resp3-xl: 48px;
 
-  /* Semantic - Typography - FontSize - Quote */
+  /* Semantic - Space - Gap - Constant */
   /**
-   * 16 - 16 - 18 - 20 -- This variable is used for controlling the font size of the quote text style.
+   * 2-2-2-2 – Use for fixed gaps between items inside of UI elements
    */
-  --quote-font-size: 16px;
-
-  /* Semantic - Typography - FontSize - Subheadline */
+  --gap-space-const2-xs: 2px;
   /**
-   * This token controls the subheadline1 font size parameter. 24 - 24 - 32 - 36
+   * 4-4-4-4 – Use for fixed gaps between items inside of UI elements
    */
-  --subheadline1-font-size: 18px;
-
-  /* Semantic - Typography - FontSize - Title */
+  --gap-space-const-xs: 4px;
   /**
-   * 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
+   * 8-8-8-8 – Use for fixed gaps between items inside of UI elements
    */
-  --title1-font-size: 22px;
+  --gap-space-const-sm: 8px;
   /**
-   * 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
+   * 12-12-12-12 – Use for fixed gaps between items inside of UI elements
    */
-  --title2-font-size: 14px;
-
-  /* Semantic - Typography - FontWeight - Body */
-  --body-font-weight-book: 400;
-  --body-font-weight-bold: 700;
-
-  /* Semantic - Typography - FontWeight - Callout */
-  --callout-font-weight: 800;
-
-  /* Semantic - Typography - FontWeight - Display */
-  --display-font-weight: 800;
-
-  /* Semantic - Typography - FontWeight - Footnote */
-  --footnote-font-weight-book: 400;
-  --footnote-font-weight-bold: 700;
-
-  /* Semantic - Typography - FontWeight - Headline */
-  --headline1-font-weight: 700;
-  --headline2-font-weight: 700;
-  --headline3-font-weight: 700;
-  --headline4-font-weight: 600;
+  --gap-space-const-md: 12px;
   /**
-   * This variable is a string type variable for controlling not only headline font weight but also the italic style for Sport Bild headlines.
+   * 16-16-16-16 – Use for fixed gaps between items inside of UI elements
    */
-  --headline1-font-weight-st: 700;
-
-  /* Semantic - Typography - FontWeight - Kicker */
-  --kicker-font-weight: 700;
-  --kicker-font-weight-st: 700;
-
-  /* Semantic - Typography - FontWeight - Label */
-  --label-font-weight-bold: 700;
-  --label-font-weight-book: 400;
-
-  /* Semantic - Typography - FontWeight - Quote */
-  --quote-font-weight: 800;
-
-  /* Semantic - Typography - FontWeight - Subheadline */
-  --subheadline-font-weight: 700;
-
-  /* Semantic - Typography - FontWeight - Title */
-  --title-font-weight: 800;
-
-  /* Semantic - Typography - LetterSpacing */
+  --gap-space-const-lg: 16px;
   /**
-   * 0.5 | 0.5 | 0.5 | 0.5 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
+   * 24-24-24-24 – Use for fixed gaps between items inside of UI elements
    */
-  --letter-spacing-positive-sm: 0.5px;
+  --gap-space-const-xl: 24px;
   /**
-   * 2 | 2 | 2 | 3 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
+   * 32-32-32-32 – Use for fixed gaps between items inside of UI elements
    */
-  --letter-spacing-positive-lg: 2px;
+  --gap-space-const2-xl: 32px;
   /**
-   * 1 | 1 | 1 | 1 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
+   * 48-48-48-48 – Use for fixed gaps between items inside of UI elements
    */
-  --letter-spacing-positive-md: 1px;
+  --gap-space-const3-xl: 48px;
+
+  /* Semantic - Size - Constant */
   /**
-   * 0 | 0 | 0 | 0 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
+   * 16-16-16-16 – Use for setting fixed height and width of UI elements
    */
-  --letter-spacing-none: 0px;
+  --size-const3-xs: 16px;
   /**
-   * -0.5 | -0.5 | -0.25 | -0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
+   * 24-24-24-24 – Use for setting fixed height and width of UI elements
    */
-  --letter-spacing-negative-sm: -0.5px;
+  --size-const2-xs: 24px;
   /**
-   * -1 | -1 | -1 | -1 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
+   * 32-32-32-32 – Use for setting fixed height and width of UI elements
    */
-  --letter-spacing-negative-md: -1px;
+  --size-const-xs: 32px;
   /**
-   * -2 | -2 | -2 | -3 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
+   * 40-40-40-40 – Use for setting fixed height and width of UI elements
    */
-  --letter-spacing-negative-lg: -2px;
+  --size-const-sm: 40px;
   /**
-   * -0.25 | -0.25 | -0.25 | -0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. This letter spacing was only found in large titles on iOS mobile app large title component.
+   * 48-48-48-48 Use for setting fixed height and width of UI elements
    */
-  --letter-spacing-negative-xs: -0.25px;
+  --size-const-md: 48px;
   /**
-   * 0.25 | 0.25 | 0.25 | 0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
+   * 56-56-56-56 – Use for setting fixed height and width of UI elements
    */
-  --letter-spacing-positive-xs: 0.25px;
-
-  /* Semantic - Typography - LetterSpacing - display */
+  --size-const-lg: 56px;
   /**
-   * -0.5 | -0.5 | -1 | -2 | This variable is used for the letter spacing parameter of the display1 text style. On smaller devices the value is smaller than on larger devices. On desktop devices the letter spacing is further reduced for making the text style more compact.
+   * 64-64-64-64 – Use for setting fixed height and width of UI elements
    */
-  --display1-letter-spacing: -0.5px;
+  --size-const-xl: 64px;
   /**
-   * -0.5 | -0.5 | -1 | -1 | This variable is used for the letter spacing parameter of the display2 text style. On smaller devices the value is smaller than on larger devices.
+   * 96-96-96-96 – Use for setting fixed height and width of UI elements
    */
-  --display2-letter-spacing: -0.5px;
+  --size-const3-xl: 96px;
   /**
-   * -0.5 | -0.5 | -1 | -1 | This variable is used for the letter spacing parameter of the display3 text style. On smaller devices the value is smaller than on larger devices.
+   * 148-148-148-148 – Use for setting fixed height and width of UI elements
    */
-  --display3-letter-spacing: -0.5px;
-
-  /* Semantic - Typography - LineHeight - Body */
+  --size-const4-xl: 148px;
   /**
-   * Figma's font line height currently does not allow for multipliers as is used on current website css var(--body-line-height)
+   * 72-72-72-72 – Use for setting fixed height and width of UI elements
    */
-  --body-line-height: 29.75px;
-
-  /* Semantic - Typography - LineHeight - Callout */
-  --callout-line-height: 20.799999237060547px;
-
-  /* Semantic - Typography - LineHeight - Display */
-  --display1-line-height: 40px;
-  --display2-line-height: 36px;
-  --display3-line-height: 28px;
-
-  /* Semantic - Typography - LineHeight - Footnote */
-  --footnote1-line-height: 16.899999618530273px;
-  --footnote2-line-height: 13px;
-
-  /* Semantic - Typography - LineHeight - Headline */
-  --headline1-line-height: 37.79999923706055px;
-  --headline2-line-height: 33px;
-  --headline3-line-height: 26.399999618530273px;
-  --headline4-line-height: 18.399999618530273px;
-
-  /* Semantic - Typography - LineHeight - Kicker */
-  --kicker4-line-height: 13.199999809265137px;
-  --kicker3-line-height: 15.399999618530273px;
-  --kicker2-line-height: 17.600000381469727px;
-  --kicker1-line-height: 17.600000381469727px;
-
-  /* Semantic - Typography - LineHeight - Label */
-  --label3-line-height: 14.399999618530273px;
+  --size-const2-xl: 72px;
   /**
-   * This variable is used in the label1 text style's line height parameter. It references branding variables for brand specific line heights.
+   * 8-8-8-8 – Use for setting fixed height and width of UI elements
    */
-  --label1-line-height: 20.399999618530273px;
-  --label1-responsive-line-height: 10px;
-  --label2-line-height: 16px;
-  --label4-line-height: 10px;
+  --size-const4-xs: 8px;
 
-  /* Semantic - Typography - LineHeight - Quote */
+  /* Semantic - Size - Responsive */
   /**
-   * This variable is used in the quote text style line height parameter.
+   * 16-16-16-24 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --quote-line-height: 20.799999237060547px;
-
-  /* Semantic - Typography - LineHeight - Subheadline */
-  --subheadline1-line-height: 23.399999618530273px;
-
-  /* Semantic - Typography - LineHeight - Title */
-  --title1-line-height: 26.399999618530273px;
+  --size-resp3-xs: 16px;
   /**
-   * html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
+   * 24-24-32-32 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --title2-line-height: 16.799999237060547px;
-
-  /* Semantic - Visibility - Boolean */
+  --size-resp2-xs: 24px;
   /**
-   * Use for showing elements on mobile viewport sizes only
+   * 32-32-40-48 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --visilble-mobile-only: true;
+  --size-resp-xs: 32px;
   /**
-   * Use for showing elements on desktop viewport sizes only
+   * 40-40-48-56 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --visilble-desktop-only: false;
+  --size-resp-sm: 40px;
   /**
-   * Use for showing elements on viewport sizes above 600 px
+   * 48-48-64-72 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --visilble-above600px: false;
+  --size-resp-md: 48px;
   /**
-   * Use for showing elements on viewport sizes below 600 px
+   * 56-56-72-92 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --visilble-below600px: true;
+  --size-resp-lg: 56px;
   /**
-   * Use for hiding elements on mobile viewport sizes
+   * 64-64-80-96 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --hide-on-mobile: false;
+  --size-resp-xl: 64px;
   /**
-   * Use for showing elements on tablet viewport sizes only
+   * 72-72-92-100 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --visilble-tablet-only: false;
+  --size-resp2-xl: 72px;
   /**
-   * Use for hiding elements on desktop viewport sizes only
+   * 96-96-120-148 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --hide-on-desktop: true;
-
-  /* Semantic - Visibility - VariantSwitch */
-  --change-on-lg: xs/sm/md;
+  --size-resp3-xl: 96px;
   /**
-   * This variable is used for controlling size changes across device sizes on some components such as the vertical newsticker cards and the search results cards. Both have cards that change layouts at different breakpoints.
+   * 148-148-160-180 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --change-on-md: xs/sm;
-  --bp-specific-web: xs/sm;
-  --bp-specific-app: compact;
+  --size-resp4-xl: 148px;
+  /**
+   * 12-12-14-16 – Use for setting height and width of UI elements that scale across breakpoints
+   */
+  --size-resp4-xs: 12px;
+
+
+  /* ============================================
+     OTHER
+     ============================================ */
+
+  --breakpoint-name: xs;
 
 }