@marioschmidt/design-system-tokens 1.0.23 → 1.0.24

package/dist/css/brands/bild/semantic/typography/typography-md.css

@@ -1,181 +1,111 @@
 /**
  * Typography Classes - Bild / md
- * Generiert am: 2025-11-24T21:07:31.762Z
+ * Generiert am: 2025-11-24T21:40:52.936Z
  * Nicht manuell bearbeiten!
  */
 
 /* ============================================
-   .DSDOCSSTYLES
+   DISPLAY
    ============================================ */
 
-.pageheaderdescription {
-  font-family: Gotham XNarrow;
-  font-weight: 700;
-  letter-spacing: 0px;
-}
-
-/* This text style is only used on the design system's documentation for code syntax snippets. */
-.codesnippets {
-  font-family: Source Code Pro;
-  font-size: 12px;
-  line-height: 15.800000190734863px;
-  letter-spacing: 0px;
-}
-
-/* This text style is only used for mockup pages of the design system website. */
-.bilddesignsidemenu {
-  font-family: Gotham XNarrow;
-  font-weight: 400;
-}
-
-/* This text style is only used for mockup pages of the design system website. */
-.bilddesignsidemenuactive {
-  font-family: Gotham XNarrow;
-  font-weight: 400;
-  text-decoration: underline;
+/* Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 40 - 40 - 72 - 120 */
+.display1 {
+  font-family: Gotham;
+  font-weight: 800;
+  font-size: 72px;
+  line-height: 72px;
+  letter-spacing: -1px;
 }
 
-/* This text style is only used for mockup pages of the design system website. */
-.bilddesignsidemenuhover {
-  font-family: Gotham XNarrow;
-  font-weight: 600;
+/* Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 36 - 36 - 42 - 64 */
+.display2 {
+  font-family: Gotham;
+  font-weight: 800;
+  font-size: 42px;
+  line-height: 42px;
+  letter-spacing: -1px;
 }
 
-/* This text style is only used for mockups the vertical video component teaser headlines. */
-.verticalvideosmockheadlines {
-  font-family: Gotham Condensed;
-  font-weight: 600;
+/* Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 28 - 28 - 32 - 40 */
+.display3 {
+  font-family: Gotham;
+  font-weight: 800;
   font-size: 32px;
   line-height: 32px;
-  text-decoration: underline;
-}
-
-/* This text style is used on documentation pages that contain some token information. */
-.tokenspecl {
-  font-family: Source Code Pro;
+  letter-spacing: -1px;
 }
 
 
 /* ============================================
-   .SPECS
+   HEADLINE
    ============================================ */
 
-/* This text style is only used for audit pages of the design system. */
-.specsxs {
-  font-family: Gotham;
-  font-weight: 400;
-}
-
-/* This text style is only used for audit pages of the design system. */
-.specss {
-  font-family: Gotham;
-}
-
-/* This text style is only used for audit pages of the design system. */
-.specsms {
-  font-family: Gotham;
-}
-
-/* This text style is only used for audit pages of the design system. */
-.specsm {
-  font-family: Gotham;
-}
-
-/* This text style is only used for audit pages of the design system. */
-.specsml {
-  font-family: Gotham;
-  font-weight: 400;
-  font-size: 64px;
-  line-height: 80px;
-  text-decoration: underline;
+/* Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. Font size: 48 - 48 - 72 - 100 */
+.headline1 {
+  font-family: Gotham Condensed;
+  font-size: 72px;
+  line-height: 72px;
+  letter-spacing: 0px;
+  font-style: 700;
 }
 
-/* This text style is only used for audit pages of the design system. */
-.specsl {
-  font-family: Gotham;
-  font-weight: 400;
-  text-decoration: underline;
+/* Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. This text style's token for the font size parameter changes across device sizes as follows: 40 - 40 - 48 - 64 */
+.headline2 {
+  font-family: Gotham Condensed;
+  font-size: 48px;
+  line-height: 48px;
+  letter-spacing: 0px;
+  font-style: 700;
 }
 
-/* This text style is only used for audit pages of the design system. */
-.specsxl {
-  font-family: Gotham;
-  font-weight: 600;
-  text-decoration: underline;
+/* Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. This text style's font size parameter is controlled by the headline3FontSize token: 28 - 28 - 36 - 40 */
+.headline3 {
+  font-family: Gotham Condensed;
+  font-size: 36px;
+  line-height: 36px;
+  letter-spacing: 0px;
+  font-style: 700;
 }
 
-/* This text style is only used for audit pages of the design system. */
-.specsxxl {
-  font-family: Gotham;
-  font-weight: 600;
-  text-decoration: underline;
+/* Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. Font size: 22 - 22 - 26 - 32 */
+.headline4 {
+  font-family: Gotham Condensed;
+  font-size: 26px;
+  line-height: 26px;
+  letter-spacing: 0px;
+  font-style: 600;
 }
 
 
 /* ============================================
-   ACCORDION
+   SUBHEADLINE
    ============================================ */
 
-/* This text style is for use on accordion labels */
-.accordionlabel {
-  font-family: Gotham XNarrow;
+/* This Subheadlines text style is used in articles. They are placed under the headline at the top of an article. Subheadlines can appear in some teasers also. Font size: 24 - 24 - 32 - 36 */
+.subheadline1 {
+  font-family: Gotham Condensed;
   font-weight: 700;
-  font-size: 17px;
+  font-size: 32px;
+  line-height: 32px;
   letter-spacing: 0px;
 }
 
 
 /* ============================================
-   ARTICLE
+   KICKER
    ============================================ */
 
-/* This text style contains the variables necessary for setting how the font parameters for the article kicker behaves across breakpoints. For font size, this component level token currently references the semantic level token kicker1FontSize. */
-.articlekicker {
+/* Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 18 - 18 - 22 - 30 --//*//-- currently css uses kicker0 for the naming of this text style and sequence of font size changes */
+.kicker1 {
   font-family: Gotham XNarrow;
   font-size: 22px;
   line-height: 22px;
-  font-style: 700;
-}
-
-/* This text style is used on image captions that show up in article pages only. */
-.articleimagecaption {
-  font-family: Gotham XNarrow;
-  font-weight: 700;
-  font-size: 18px;
-  line-height: 24.75px;
   letter-spacing: 0px;
-}
-
-/* This component level text style is reserved for article page headline texts that show up at the top of article pages. This text style references the generic text styles headline1 and headline2 font size variables. 40 - 40 - 72 - 100 */
-.articleheadline {
-  font-family: Gotham Condensed;
-  font-size: 72px;
-  line-height: 72px;
   font-style: 700;
 }
 
-/* This text style is used on short pieces of text that give information about where an image originated. It can also be used on short texts that give information about where a video originated. */
-.articlemetasource {
-  font-family: Gotham XNarrow;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 21px;
-}
-
-/* Use this text style for time and day text string that commonly shows up along with the article authors avatars. Font size: 12 - 12 - 14 - 16 */
-.articletimestamp {
-  font-family: Gotham;
-  font-weight: 800;
-  font-size: 14px;
-}
-
-
-/* ============================================
-   ATEASER
-   ============================================ */
-
-/* 16 - 16 - 22 - 24 | This text style currently uses two different semantic styles within it, the kicker3 for XS & S, and kicker2 for MD & LG */
-.ateaserkicker {
+/* Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 18 - 18 - 22 - 24 --//*//-- currently css uses kicker1 for the naming of this text style and sequence of font size changes */
+.kicker2 {
   font-family: Gotham XNarrow;
   font-size: 22px;
   line-height: 22px;
@@ -183,101 +113,82 @@
   font-style: 700;
 }
 
-/* This text style references the semantic text styles headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64 */
-.ateaserheadline {
-  font-family: Gotham Condensed;
-  font-size: 48px;
-  line-height: 48px;
-  letter-spacing: 0px;
+/* Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 16 - 16 - 18 - 20 --//*//-- currently css uses kicker2 for the naming of this text style and sequence of font size changes */
+.kicker3 {
+  font-family: Gotham XNarrow;
+  font-size: 18px;
+  line-height: 18px;
   font-style: 700;
 }
 
-
-/* ============================================
-   AUDIOPLAYER
-   ============================================ */
-
-/* This text style is used on audio player labels for elapsed time, reproduction speed and short functionality description text. Font size: 16 - 16 - 16 - 18 */
-.audioplayerlabel {
+/* Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 14 - 14 - 16 - 16 --//*//-- currently css uses kicker3 for the naming of this text style and sequence of font size changes */
+.kicker4 {
   font-family: Gotham XNarrow;
-  font-weight: 700;
   font-size: 16px;
-  line-height: 16px;
+  line-height: 17.600000381469727px;
+  letter-spacing: 0px;
+  font-style: 700;
 }
 
 
 /* ============================================
-   AVATAR
+   TITLE
    ============================================ */
 
-/* This text style is used for avatar on iOS & Android apps. 12 - 12 - 14 - 16 */
-.appavatar {
+/* Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. Font size: 22 - 22 - 22 - 28 */
+.title1 {
   font-family: Gotham;
   font-weight: 800;
-  font-size: 14px;
+  font-size: 22px;
+  line-height: 22px;
   letter-spacing: 0px;
-  text-transform: upper;
 }
 
-/* This text style is used on article page avatar name labels in their default state. Font size: 16 - 16 - 16 - 18
-
-09-2025, on large devices this component uses the css var --footnote-font-size-lg at 1024px bp changes to --footnote-font-size-sm */
-.avatardefault {
-  font-family: Gotham XNarrow;
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 21px;
+/* Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. Font size: 22 - 22 - 22 - 28 */
+.title1uppercase {
+  font-family: Gotham;
+  font-weight: 800;
+  font-size: 22px;
+  line-height: 22px;
   letter-spacing: 0px;
+  text-transform: upper;
 }
 
-/* This text style is used on avatars that appear in article pages. Font size: 16 - 16 - 16 - 18 */
-.avatarhover {
-  font-family: Gotham XNarrow;
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 21px;
-  letter-spacing: 0px;
-  text-decoration: underline;
-}
+/* Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. 
 
-/* This text style is used on avatars that show up on article pages. Some avatars have the individual's first and last name on a single line. The second line of the avatar label is then used for secondary information such as the location of the individual in the world. 16 - 16 - 16 - 18 */
-.avatarsecondaryinfo {
-  font-family: Gotham XNarrow;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 21px;
+In the previous system, this style was named Caption. For greater clarity and consistency, it has been renamed to title2. Font size: 16 - 16 - 18 - 20 */
+.title2 {
+  font-family: Gotham;
+  font-weight: 800;
+  font-size: 18px;
+  line-height: 19.799999237060547px;
   letter-spacing: 0px;
 }
 
-/* This text style is used for the active state of the second line of avatar labels. This label text is used for secondary information such as the location of the individual in the world. 16 - 16 - 16 - 18 */
-.avatarsecondaryinfohover {
-  font-family: Gotham XNarrow;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 21px;
+/* Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. 
+
+In the previous system, this style was named Caption. For greater clarity and consistency, it has been renamed to title2. Font size: 16 - 16 - 18 - 20 */
+.title2uppercase {
+  font-family: Gotham;
+  font-weight: 800;
+  font-size: 18px;
+  line-height: 19.799999237060547px;
   letter-spacing: 0px;
-  text-decoration: underline;
+  text-transform: upper;
 }
 
 
 /* ============================================
-   BADGES
+   CALLOUT
    ============================================ */
 
-/* 14 - 14 - 16 - 16 -- This text style is specific to the video horizontal player's ad badge that shows up next to the yellow progress bar that plays during horizontal video advertisements. */
-.videoadbadge {
-  font-family: Gotham XNarrow;
-  font-weight: 400;
-  font-size: 16px;
-  text-transform: upper;
-}
-
-/* This text style is used on horizontal video badges that contain either the video's total duration or a live status identifier. Font size: 16 - 16 - 18 - 18 */
-.videotimebadge {
-  font-family: Gotham XNarrow;
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 23.799999237060547px;
+/* Callouts highlight key information, quotes, or important notes inside content. They stand apart from body text to draw attention. There is overlap between this text style and the title text styles. Font size: 18 - 18 - 22 - 22 */
+.callout {
+  font-family: Gotham;
+  font-weight: 800;
+  font-size: 22px;
+  line-height: 22px;
+  letter-spacing: 0px;
 }
 
 
@@ -321,448 +232,535 @@
 
 
 /* ============================================
-   BREADCRUMB
+   TEXTLINK
    ============================================ */
 
-/* This text style is used for the last items in a breadcrumbs chain. It is commonly used in article pages and is a h1 in html. This text style's font size parameter is controlled by the breadcrumbFontSize variable. 15 - 15 - 15 - 12. Breadcrumb labels are smaller on largest devices. */
-.breadcrumb {
+/* Use this text style for styling elements that are clickable text links inside body texts. This style is often found in article texts. Font size remains constant at 21 across device sizes. */
+.textlink {
   font-family: Gotham XNarrow;
-  font-weight: 700;
-  font-size: 15px;
-  line-height: 15px;
+  font-weight: 400;
+  font-size: 21px;
+  line-height: 28px;
   letter-spacing: 0px;
+  text-decoration: underline;
 }
 
-/* This text style is used for breadcrumb links that are commonly used in article pages. This text style's font size parameter is controlled by the breadcrumbFontSize variable. 15 - 15 - 15 - 12. Breadcrumb labels are smaller on largest devices. */
-.breadcrumblink {
+/* Use this text style for styling elements that are clickable text links inside body texts that are using the italic style. This style is often found in article texts that need to show contrast for publications titles, specific words or names. Font size remains constant at 21 across device sizes. */
+.textlinkitalic {
+  font-family: Gotham XNarrow;
+  font-size: 21px;
+  line-height: 28px;
+  letter-spacing: 0px;
+  text-decoration: underline;
+}
+
+/* Use this text style for styling elements that are clickable text links inside emphasized body texts that are using the bold or html strong style. This style is often found in article texts that need to show contrast for specific words or names. Font size remains constant at 21 across device sizes. */
+.textlinkbold {
   font-family: Gotham XNarrow;
   font-weight: 700;
-  font-size: 15px;
-  line-height: 15px;
+  font-size: 21px;
+  line-height: 28px;
   letter-spacing: 0px;
   text-decoration: underline;
 }
 
-/* This text style is used for the hover state of breadcrumbs that are commonly used in article pages. This text style's font size parameter is controlled by the breadcrumbFontSize variable. 15 - 15 - 15 - 12. Breadcrumb labels are smaller on largest devices. */
-.breadcrumblinkhover {
+/* Use this style for body text links or other text links that are in active state. Font size remains constant at 21 across device sizes. */
+.textlinkhover {
+  font-family: Gotham XNarrow;
+  font-weight: 400;
+  font-size: 21px;
+  line-height: 28px;
+  letter-spacing: 0px;
+  text-decoration: underline;
+}
+
+/* Use this style for body text links or other text links that are in active state. Font size remains constant at 21 across device sizes. */
+.textlinkboldhover {
   font-family: Gotham XNarrow;
   font-weight: 700;
-  font-size: 15px;
-  line-height: 15px;
+  font-size: 21px;
+  line-height: 28px;
   letter-spacing: 0px;
   text-decoration: underline;
 }
 
 
 /* ============================================
-   BREAKINGNEWS
+   FOOTNOTE
    ============================================ */
 
-/* Use this text style on breaking news headlines that horizontally scroll in the breaking news animated strip. Font size constant 21. */
-.breakingnewstext {
+/* Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This specific style is commonly used on small two lines of text that are seen on standard teasers. The font size of this text style is similar to the label text style. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 16 - 16 - 16 - 18 */
+.footnote1 {
+  font-family: Gotham XNarrow;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 21px;
+  letter-spacing: 0px;
+}
+
+/* Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. 16 - 16 - 16 - 18 */
+.footnote1bold {
   font-family: Gotham XNarrow;
   font-weight: 700;
-  font-size: 21px;
-  line-height: 24px;
+  font-size: 16px;
+  line-height: 21px;
   letter-spacing: 0px;
-  text-transform: upper;
 }
 
-/* Use this text style on the upper title of the breaking news headline strip. Font size constant 13. */
-.breakingnewsuppertitle {
-  font-family: Gotham;
-  font-weight: 800;
-  font-size: 17px;
-  line-height: 12px;
+/* Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 12 - 12 - 12 - 16 */
+.footnote2 {
+  font-family: Gotham XNarrow;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15.800000190734863px;
   letter-spacing: 0px;
 }
 
-/* Use this font style on the breaking news badge's lower title. Font size constant 23. */
-.breakingnewslowertitle {
-  font-family: Gotham;
-  font-weight: 800;
-  font-size: 30px;
-  line-height: 21px;
+/* Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 12 - 12 - 12 - 16 */
+.footnote2bold {
+  font-family: Gotham XNarrow;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 15.800000190734863px;
   letter-spacing: 0px;
 }
 
 
 /* ============================================
-   BUTTON
+   LABEL
    ============================================ */
 
-/* This text style is used on button labels. Its font size variable is currently in the Density collection. Font size changes across devices: 15 - 17 - 19 Current online CSS .btn--narrow & .btn */
-.buttonlabel {
+/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
+.label1 {
+  font-family: Gotham XNarrow;
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 17px;
+  letter-spacing: 0.25px;
+}
+
+/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
+.label1bold {
+  font-family: Gotham XNarrow;
+  font-weight: 700;
+  font-size: 17px;
+  line-height: 17px;
+  letter-spacing: 0.25px;
+}
+
+/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size changes across device sizes: 10 - 10 - 15 - 17 */
+.label1boldresp {
+  font-family: Gotham XNarrow;
+  font-weight: 700;
+  font-size: 15px;
+  line-height: 15px;
+  letter-spacing: 0.25px;
+}
+
+/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
+.label1uppercasebold {
+  font-family: Gotham XNarrow;
+  font-weight: 700;
+  font-size: 17px;
+  line-height: 17px;
+  letter-spacing: 0.5px;
+  text-transform: upper;
+}
+
+/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
+.label2 {
+  font-family: Gotham XNarrow;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 16px;
+  letter-spacing: 0.25px;
+}
+
+/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
+.label2uppercase {
+  font-family: Gotham XNarrow;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 16px;
+  letter-spacing: 0.25px;
+  text-transform: upper;
+}
+
+/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
+.label2bold {
+  font-family: Gotham XNarrow;
+  font-weight: 700;
+  font-size: 15px;
+  line-height: 16px;
+  letter-spacing: 0.25px;
+}
+
+/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This style used on special navi component simiiar to link lane menu items. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. The font size value remains constant at 15 across device sizes. */
+.label2uppercasebold {
+  font-family: Gotham XNarrow;
+  font-weight: 700;
+  font-size: 15px;
+  line-height: 16px;
+  letter-spacing: 0.25px;
+  text-transform: upper;
+}
+
+/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
+.label3 {
+  font-family: Gotham XNarrow;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14.399999618530273px;
+  letter-spacing: 0.25px;
+}
+
+/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. Current online CSS .nav_btn--type-list & .nav_btn__text // --nav-btn */
+.label3uppercase {
+  font-family: Gotham XNarrow;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14.399999618530273px;
+  letter-spacing: 0.5px;
+  text-transform: upper;
+}
+
+/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
+.label3bold {
+  font-family: Gotham XNarrow;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 14.399999618530273px;
+  letter-spacing: 0.25px;
+}
+
+/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
+.label3uppercasebold {
   font-family: Gotham XNarrow;
-  font-size: 15px;
-  line-height: 15px;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 14.399999618530273px;
   letter-spacing: 0.5px;
-  font-style: 600;
   text-transform: upper;
 }
 
-/* This text style is used on buttons that are commonly used inside of a container for advertizers and partners. This text is used in buttons that open links to external content.  Font size: 16 - 16 - 16 - 18 */
-.partnerlinkbuttonlabel {
+/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 8. */
+.label4 {
   font-family: Gotham XNarrow;
   font-weight: 400;
-  font-size: 16px;
-  line-height: 16px;
+  font-size: 8px;
+  line-height: 10px;
+  letter-spacing: 0px;
 }
 
 
 /* ============================================
-   CALLOUT
+   QUOTE
    ============================================ */
 
-/* Callouts highlight key information, quotes, or important notes inside content. They stand apart from body text to draw attention. There is overlap between this text style and the title text styles. Font size: 18 - 18 - 22 - 22 */
-.callout {
+/* Use this text style for sections of text that are inside a fieldset with a quotation given by a person in an interview or a section of text from a larger body of text that need to be emphasized. */
+.quote {
   font-family: Gotham;
   font-weight: 800;
-  font-size: 22px;
-  line-height: 22px;
+  font-size: 18px;
+  line-height: 18px;
   letter-spacing: 0px;
 }
 
 
 /* ============================================
-   CHIPS
+   ACCORDION
    ============================================ */
 
-/* This text style is used on the chips component. They are commonly used for filtering parameters. font size: 16 - 16 - 16 - 18 */
-.chipslabel {
+/* This text style is for use on accordion labels */
+.accordionlabel {
   font-family: Gotham XNarrow;
   font-weight: 700;
-  font-size: 16px;
+  font-size: 17px;
+  letter-spacing: 0px;
 }
 
 
 /* ============================================
-   DISPLAY
+   ARTICLE
    ============================================ */
 
-/* Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 40 - 40 - 72 - 120 */
-.display1 {
-  font-family: Gotham;
-  font-weight: 800;
+/* This text style contains the variables necessary for setting how the font parameters for the article kicker behaves across breakpoints. For font size, this component level token currently references the semantic level token kicker1FontSize. */
+.articlekicker {
+  font-family: Gotham XNarrow;
+  font-size: 22px;
+  line-height: 22px;
+  font-style: 700;
+}
+
+/* This text style is used on image captions that show up in article pages only. */
+.articleimagecaption {
+  font-family: Gotham XNarrow;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 24.75px;
+  letter-spacing: 0px;
+}
+
+/* This component level text style is reserved for article page headline texts that show up at the top of article pages. This text style references the generic text styles headline1 and headline2 font size variables. 40 - 40 - 72 - 100 */
+.articleheadline {
+  font-family: Gotham Condensed;
   font-size: 72px;
   line-height: 72px;
-  letter-spacing: -1px;
+  font-style: 700;
 }
 
-/* Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 36 - 36 - 42 - 64 */
-.display2 {
-  font-family: Gotham;
-  font-weight: 800;
-  font-size: 42px;
-  line-height: 42px;
-  letter-spacing: -1px;
+/* This text style is used on short pieces of text that give information about where an image originated. It can also be used on short texts that give information about where a video originated. */
+.articlemetasource {
+  font-family: Gotham XNarrow;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 21px;
 }
 
-/* Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 28 - 28 - 32 - 40 */
-.display3 {
+/* Use this text style for time and day text string that commonly shows up along with the article authors avatars. Font size: 12 - 12 - 14 - 16 */
+.articletimestamp {
   font-family: Gotham;
   font-weight: 800;
-  font-size: 32px;
-  line-height: 32px;
-  letter-spacing: -1px;
+  font-size: 14px;
 }
 
 
 /* ============================================
-   FOOTER
+   AUDIOPLAYER
    ============================================ */
 
-/* This text style is used for link texts contained inside cards that commonly show up at the bottom of pages in footers. This link text style's font size parameter uses the label2 font size variable. */
-.footercardlink {
-  font-family: Gotham XNarrow;
-  font-weight: 400;
-  font-size: 15px;
-  text-decoration: underline;
-}
-
-/* This text style is found on footers that separate links with a vertical bar. Font size remains constant at 20 px across devices. */
-.footerlinkseparator {
-  font-family: Gotham XNarrow;
-  font-weight: 400;
-}
-
-/* This text style is used in footer links that show up at the bottom of content pages. Font size constant at 11px. */
-.footerlinks {
+/* This text style is used on audio player labels for elapsed time, reproduction speed and short functionality description text. Font size: 16 - 16 - 16 - 18 */
+.audioplayerlabel {
   font-family: Gotham XNarrow;
   font-weight: 700;
-  font-size: 11px;
-  line-height: 14px;
-  letter-spacing: 0px;
-}
-
-/* User data and offer pages use this text style on footer links. Font size remains constant at 18px. */
-.footerlinkuser&offerpages {
-  font-family: Gotham XNarrow;
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 26px;
+  font-size: 16px;
+  line-height: 16px;
 }
 
 
 /* ============================================
-   FOOTNOTE
+   AVATAR
    ============================================ */
 
-/* Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This specific style is commonly used on small two lines of text that are seen on standard teasers. The font size of this text style is similar to the label text style. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 16 - 16 - 16 - 18 */
-.footnote1 {
+/* This text style is used for avatar on iOS & Android apps. 12 - 12 - 14 - 16 */
+.appavatar {
+  font-family: Gotham;
+  font-weight: 800;
+  font-size: 14px;
+  letter-spacing: 0px;
+  text-transform: upper;
+}
+
+/* This text style is used on article page avatar name labels in their default state. Font size: 16 - 16 - 16 - 18
+
+09-2025, on large devices this component uses the css var --footnote-font-size-lg at 1024px bp changes to --footnote-font-size-sm */
+.avatardefault {
   font-family: Gotham XNarrow;
-  font-weight: 400;
+  font-weight: 700;
   font-size: 16px;
   line-height: 21px;
   letter-spacing: 0px;
 }
 
-/* Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. 16 - 16 - 16 - 18 */
-.footnote1bold {
+/* This text style is used on avatars that appear in article pages. Font size: 16 - 16 - 16 - 18 */
+.avatarhover {
   font-family: Gotham XNarrow;
   font-weight: 700;
   font-size: 16px;
   line-height: 21px;
   letter-spacing: 0px;
+  text-decoration: underline;
 }
 
-/* Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 12 - 12 - 12 - 16 */
-.footnote2 {
+/* This text style is used on avatars that show up on article pages. Some avatars have the individual's first and last name on a single line. The second line of the avatar label is then used for secondary information such as the location of the individual in the world. 16 - 16 - 16 - 18 */
+.avatarsecondaryinfo {
   font-family: Gotham XNarrow;
   font-weight: 400;
-  font-size: 12px;
-  line-height: 15.800000190734863px;
+  font-size: 16px;
+  line-height: 21px;
   letter-spacing: 0px;
 }
 
-/* Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 12 - 12 - 12 - 16 */
-.footnote2bold {
+/* This text style is used for the active state of the second line of avatar labels. This label text is used for secondary information such as the location of the individual in the world. 16 - 16 - 16 - 18 */
+.avatarsecondaryinfohover {
   font-family: Gotham XNarrow;
-  font-weight: 700;
-  font-size: 12px;
-  line-height: 15.800000190734863px;
-  letter-spacing: 0px;
-}
-
-
-/* ============================================
-   HEADLINE
-   ============================================ */
-
-/* Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. Font size: 48 - 48 - 72 - 100 */
-.headline1 {
-  font-family: Gotham Condensed;
-  font-size: 72px;
-  line-height: 72px;
-  letter-spacing: 0px;
-  font-style: 700;
-}
-
-/* Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. This text style's token for the font size parameter changes across device sizes as follows: 40 - 40 - 48 - 64 */
-.headline2 {
-  font-family: Gotham Condensed;
-  font-size: 48px;
-  line-height: 48px;
-  letter-spacing: 0px;
-  font-style: 700;
-}
-
-/* Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. This text style's font size parameter is controlled by the headline3FontSize token: 28 - 28 - 36 - 40 */
-.headline3 {
-  font-family: Gotham Condensed;
-  font-size: 36px;
-  line-height: 36px;
-  letter-spacing: 0px;
-  font-style: 700;
-}
-
-/* Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. Font size: 22 - 22 - 26 - 32 */
-.headline4 {
-  font-family: Gotham Condensed;
-  font-size: 26px;
-  line-height: 26px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 21px;
   letter-spacing: 0px;
-  font-style: 600;
+  text-decoration: underline;
 }
 
 
 /* ============================================
-   INPUTFIELD
+   BADGES
    ============================================ */
 
-/* This text style is used in dropdowns and other text input fields such as date inputs, search input fields and other inputs for text found in forms for example. Font size references a variable from the density collection. 15 - 17 - 19 */
-.textinputfieldlabel {
+/* 14 - 14 - 16 - 16 -- This text style is specific to the video horizontal player's ad badge that shows up next to the yellow progress bar that plays during horizontal video advertisements. */
+.videoadbadge {
   font-family: Gotham XNarrow;
   font-weight: 400;
   font-size: 16px;
-  line-height: 16px;
-}
-
-
-/* ============================================
-   KICKER
-   ============================================ */
-
-/* Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 18 - 18 - 22 - 30 --//*//-- currently css uses kicker0 for the naming of this text style and sequence of font size changes */
-.kicker1 {
-  font-family: Gotham XNarrow;
-  font-size: 22px;
-  line-height: 22px;
-  letter-spacing: 0px;
-  font-style: 700;
-}
-
-/* Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 18 - 18 - 22 - 24 --//*//-- currently css uses kicker1 for the naming of this text style and sequence of font size changes */
-.kicker2 {
-  font-family: Gotham XNarrow;
-  font-size: 22px;
-  line-height: 22px;
-  letter-spacing: 0px;
-  font-style: 700;
+  text-transform: upper;
 }
 
-/* Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 16 - 16 - 18 - 20 --//*//-- currently css uses kicker2 for the naming of this text style and sequence of font size changes */
-.kicker3 {
+/* This text style is used on horizontal video badges that contain either the video's total duration or a live status identifier. Font size: 16 - 16 - 18 - 18 */
+.videotimebadge {
   font-family: Gotham XNarrow;
+  font-weight: 400;
   font-size: 18px;
-  line-height: 18px;
-  font-style: 700;
-}
-
-/* Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 14 - 14 - 16 - 16 --//*//-- currently css uses kicker3 for the naming of this text style and sequence of font size changes */
-.kicker4 {
-  font-family: Gotham XNarrow;
-  font-size: 16px;
-  line-height: 17.600000381469727px;
-  letter-spacing: 0px;
-  font-style: 700;
+  line-height: 23.799999237060547px;
 }
 
 
 /* ============================================
-   LABEL
+   BREADCRUMB
    ============================================ */
 
-/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
-.label1 {
+/* This text style is used for the last items in a breadcrumbs chain. It is commonly used in article pages and is a h1 in html. This text style's font size parameter is controlled by the breadcrumbFontSize variable. 15 - 15 - 15 - 12. Breadcrumb labels are smaller on largest devices. */
+.breadcrumb {
   font-family: Gotham XNarrow;
-  font-weight: 400;
-  font-size: 17px;
-  line-height: 17px;
-  letter-spacing: 0.25px;
+  font-weight: 700;
+  font-size: 15px;
+  line-height: 15px;
+  letter-spacing: 0px;
 }
 
-/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
-.label1bold {
+/* This text style is used for breadcrumb links that are commonly used in article pages. This text style's font size parameter is controlled by the breadcrumbFontSize variable. 15 - 15 - 15 - 12. Breadcrumb labels are smaller on largest devices. */
+.breadcrumblink {
   font-family: Gotham XNarrow;
   font-weight: 700;
-  font-size: 17px;
-  line-height: 17px;
-  letter-spacing: 0.25px;
+  font-size: 15px;
+  line-height: 15px;
+  letter-spacing: 0px;
+  text-decoration: underline;
 }
 
-/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size changes across device sizes: 10 - 10 - 15 - 17 */
-.label1boldresp {
+/* This text style is used for the hover state of breadcrumbs that are commonly used in article pages. This text style's font size parameter is controlled by the breadcrumbFontSize variable. 15 - 15 - 15 - 12. Breadcrumb labels are smaller on largest devices. */
+.breadcrumblinkhover {
   font-family: Gotham XNarrow;
   font-weight: 700;
   font-size: 15px;
   line-height: 15px;
-  letter-spacing: 0.25px;
+  letter-spacing: 0px;
+  text-decoration: underline;
 }
 
-/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
-.label1uppercasebold {
+
+/* ============================================
+   BREAKINGNEWS
+   ============================================ */
+
+/* Use this text style on breaking news headlines that horizontally scroll in the breaking news animated strip. Font size constant 21. */
+.breakingnewstext {
   font-family: Gotham XNarrow;
   font-weight: 700;
-  font-size: 17px;
-  line-height: 17px;
-  letter-spacing: 0.5px;
+  font-size: 21px;
+  line-height: 24px;
+  letter-spacing: 0px;
   text-transform: upper;
 }
 
-/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
-.label2 {
-  font-family: Gotham XNarrow;
-  font-weight: 400;
-  font-size: 15px;
-  line-height: 16px;
-  letter-spacing: 0.25px;
+/* Use this text style on the upper title of the breaking news headline strip. Font size constant 13. */
+.breakingnewsuppertitle {
+  font-family: Gotham;
+  font-weight: 800;
+  font-size: 17px;
+  line-height: 12px;
+  letter-spacing: 0px;
 }
 
-/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
-.label2uppercase {
+/* Use this font style on the breaking news badge's lower title. Font size constant 23. */
+.breakingnewslowertitle {
+  font-family: Gotham;
+  font-weight: 800;
+  font-size: 30px;
+  line-height: 21px;
+  letter-spacing: 0px;
+}
+
+
+/* ============================================
+   BUTTON
+   ============================================ */
+
+/* This text style is used on button labels. Its font size variable is currently in the Density collection. Font size changes across devices: 15 - 17 - 19 Current online CSS .btn--narrow & .btn */
+.buttonlabel {
   font-family: Gotham XNarrow;
-  font-weight: 400;
   font-size: 15px;
-  line-height: 16px;
-  letter-spacing: 0.25px;
+  line-height: 15px;
+  letter-spacing: 0.5px;
+  font-style: 600;
   text-transform: upper;
 }
 
-/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
-.label2bold {
+/* This text style is used on buttons that are commonly used inside of a container for advertizers and partners. This text is used in buttons that open links to external content.  Font size: 16 - 16 - 16 - 18 */
+.partnerlinkbuttonlabel {
   font-family: Gotham XNarrow;
-  font-weight: 700;
-  font-size: 15px;
+  font-weight: 400;
+  font-size: 16px;
   line-height: 16px;
-  letter-spacing: 0.25px;
 }
 
-/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This style used on special navi component simiiar to link lane menu items. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. The font size value remains constant at 15 across device sizes. */
-.label2uppercasebold {
+
+/* ============================================
+   CHIPS
+   ============================================ */
+
+/* This text style is used on the chips component. They are commonly used for filtering parameters. font size: 16 - 16 - 16 - 18 */
+.chipslabel {
   font-family: Gotham XNarrow;
   font-weight: 700;
-  font-size: 15px;
-  line-height: 16px;
-  letter-spacing: 0.25px;
-  text-transform: upper;
+  font-size: 16px;
 }
 
-/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
-.label3 {
+
+/* ============================================
+   FOOTER
+   ============================================ */
+
+/* This text style is used for link texts contained inside cards that commonly show up at the bottom of pages in footers. This link text style's font size parameter uses the label2 font size variable. */
+.footercardlink {
   font-family: Gotham XNarrow;
   font-weight: 400;
-  font-size: 12px;
-  line-height: 14.399999618530273px;
-  letter-spacing: 0.25px;
+  font-size: 15px;
+  text-decoration: underline;
 }
 
-/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. Current online CSS .nav_btn--type-list & .nav_btn__text // --nav-btn */
-.label3uppercase {
+/* This text style is found on footers that separate links with a vertical bar. Font size remains constant at 20 px across devices. */
+.footerlinkseparator {
   font-family: Gotham XNarrow;
   font-weight: 400;
-  font-size: 12px;
-  line-height: 14.399999618530273px;
-  letter-spacing: 0.5px;
-  text-transform: upper;
 }
 
-/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
-.label3bold {
+/* This text style is used in footer links that show up at the bottom of content pages. Font size constant at 11px. */
+.footerlinks {
   font-family: Gotham XNarrow;
   font-weight: 700;
-  font-size: 12px;
-  line-height: 14.399999618530273px;
-  letter-spacing: 0.25px;
+  font-size: 11px;
+  line-height: 14px;
+  letter-spacing: 0px;
 }
 
-/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
-.label3uppercasebold {
+/* User data and offer pages use this text style on footer links. Font size remains constant at 18px. */
+.footerlinkuser&offerpages {
   font-family: Gotham XNarrow;
-  font-weight: 700;
-  font-size: 12px;
-  line-height: 14.399999618530273px;
-  letter-spacing: 0.5px;
-  text-transform: upper;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 26px;
 }
 
-/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 8. */
-.label4 {
+
+/* ============================================
+   INPUTFIELD
+   ============================================ */
+
+/* This text style is used in dropdowns and other text input fields such as date inputs, search input fields and other inputs for text found in forms for example. Font size references a variable from the density collection. 15 - 17 - 19 */
+.textinputfieldlabel {
   font-family: Gotham XNarrow;
   font-weight: 400;
-  font-size: 8px;
-  line-height: 10px;
-  letter-spacing: 0px;
+  font-size: 16px;
+  line-height: 16px;
 }
 
 
@@ -861,30 +859,6 @@
 }
 
 
-/* ============================================
-   MQTEASER
-   ============================================ */
-
-/* This component level text style references size variables for the semantic level. Specifically kicker4. 14 - 14 - 16 - 16 */
-.mqteaserkicker {
-  font-family: Gotham XNarrow;
-  font-size: 16px;
-  line-height: 17.600000381469727px;
-  letter-spacing: 0px;
-  font-style: 700;
-}
-
-/* This component level text style references the semantic level text sizes of headline3 and headline4.
-XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40 */
-.mqteaserheadline {
-  font-family: Gotham Condensed;
-  font-size: 36px;
-  line-height: 36px;
-  letter-spacing: 0px;
-  font-style: 700;
-}
-
-
 /* ============================================
    NEWSTICKER
    ============================================ */
@@ -921,77 +895,141 @@ XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 //
    PAGINATION
    ============================================ */
 
-/* This component level text style stores the variables for the pagination component's active state (label1 with red accent color underline). Its size remains constant at 17px across device sizes. */
-.numberedpaginationactive {
+/* This component level text style stores the variables for the pagination component's active state (label1 with red accent color underline). Its size remains constant at 17px across device sizes. */
+.numberedpaginationactive {
+  font-family: Gotham XNarrow;
+  font-weight: 700;
+  font-size: 17px;
+  line-height: 17px;
+  letter-spacing: 0.25px;
+  text-decoration: underline;
+}
+
+
+/* ============================================
+   PAYWALL
+   ============================================ */
+
+/* This text style is used for the paywall price tag text. */
+.paywallcardpricetag {
+  font-family: Gotham;
+  font-weight: 800;
+  font-size: 64px;
+  line-height: 64px;
+  letter-spacing: -1px;
+}
+
+/* This text style is used on the paywall card under the price value. */
+.paywallcardnote {
+  font-family: Gotham;
+  font-weight: 800;
+  font-size: 40px;
+  line-height: 40px;
+  letter-spacing: -1px;
+}
+
+
+/* ============================================
+   SPECIALNAVI
+   ============================================ */
+
+/* Used on menu link lane items and on mobile side menu drawer. */
+.specianaviitemlabel {
+  font-family: Gotham XNarrow;
+  font-size: 15px;
+  line-height: 15px;
+  letter-spacing: 0px;
+  font-style: 700;
+}
+
+
+/* ============================================
+   TABS
+   ============================================ */
+
+/* This text style stores variables for the tab component. Tabs are similar to submenus and special navigation elements but tabs do not link to other URLs. */
+.tablabel {
+  font-family: Gotham XNarrow;
+  font-weight: 700;
+  font-size: 16px;
+  text-transform: upper;
+}
+
+/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. */
+.appbottombarlabeldefault {
+  font-family: Gotham XNarrow;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 23.399999618530273px;
+  letter-spacing: 0px;
+}
+
+/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. */
+.appbottombarlabelactive {
   font-family: Gotham XNarrow;
   font-weight: 700;
-  font-size: 17px;
-  line-height: 17px;
-  letter-spacing: 0.25px;
-  text-decoration: underline;
+  font-size: 16px;
+  line-height: 23.399999618530273px;
+  letter-spacing: 0px;
 }
 
 
 /* ============================================
-   PAYWALL
+   ATEASER
    ============================================ */
 
-/* This text style is used for the paywall price tag text. */
-.paywallcardpricetag {
-  font-family: Gotham;
-  font-weight: 800;
-  font-size: 64px;
-  line-height: 64px;
-  letter-spacing: -1px;
+/* 16 - 16 - 22 - 24 | This text style currently uses two different semantic styles within it, the kicker3 for XS & S, and kicker2 for MD & LG */
+.ateaserkicker {
+  font-family: Gotham XNarrow;
+  font-size: 22px;
+  line-height: 22px;
+  letter-spacing: 0px;
+  font-style: 700;
 }
 
-/* This text style is used on the paywall card under the price value. */
-.paywallcardnote {
-  font-family: Gotham;
-  font-weight: 800;
-  font-size: 40px;
-  line-height: 40px;
-  letter-spacing: -1px;
+/* This text style references the semantic text styles headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64 */
+.ateaserheadline {
+  font-family: Gotham Condensed;
+  font-size: 48px;
+  line-height: 48px;
+  letter-spacing: 0px;
+  font-style: 700;
 }
 
 
 /* ============================================
-   QTEASER
+   MQTEASER
    ============================================ */
 
-/* This component level text style is used on the quad teaser headline. Its font size parameter references the semantic level variable headline1. 48 - 48 - 72 - 100 */
-.qteaserheadline {
-  font-family: Gotham Condensed;
-  font-size: 72px;
-  line-height: 72px;
+/* This component level text style references size variables for the semantic level. Specifically kicker4. 14 - 14 - 16 - 16 */
+.mqteaserkicker {
+  font-family: Gotham XNarrow;
+  font-size: 16px;
+  line-height: 17.600000381469727px;
   letter-spacing: 0px;
   font-style: 700;
 }
 
-
-/* ============================================
-   QUOTE
-   ============================================ */
-
-/* Use this text style for sections of text that are inside a fieldset with a quotation given by a person in an interview or a section of text from a larger body of text that need to be emphasized. */
-.quote {
-  font-family: Gotham;
-  font-weight: 800;
-  font-size: 18px;
-  line-height: 18px;
+/* This component level text style references the semantic level text sizes of headline3 and headline4.
+XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40 */
+.mqteaserheadline {
+  font-family: Gotham Condensed;
+  font-size: 36px;
+  line-height: 36px;
   letter-spacing: 0px;
+  font-style: 700;
 }
 
 
 /* ============================================
-   SPECIALNAVI
+   QTEASER
    ============================================ */
 
-/* Used on menu link lane items and on mobile side menu drawer. */
-.specianaviitemlabel {
-  font-family: Gotham XNarrow;
-  font-size: 15px;
-  line-height: 15px;
+/* This component level text style is used on the quad teaser headline. Its font size parameter references the semantic level variable headline1. 48 - 48 - 72 - 100 */
+.qteaserheadline {
+  font-family: Gotham Condensed;
+  font-size: 72px;
+  line-height: 72px;
   letter-spacing: 0px;
   font-style: 700;
 }
@@ -1012,162 +1050,124 @@ XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 //
 
 
 /* ============================================
-   SUBHEADLINE
+   TOGGLESWITCHES
    ============================================ */
 
-/* This Subheadlines text style is used in articles. They are placed under the headline at the top of an article. Subheadlines can appear in some teasers also. Font size: 24 - 24 - 32 - 36 */
-.subheadline1 {
-  font-family: Gotham Condensed;
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 32px;
+/* This text style is used on labels in list items with toggle switches found in app preferences. 14 - 14 - 16 - 18 */
+.apptoogleitemlabel {
+  font-family: Gotham;
+  font-weight: 800;
+  font-size: 16px;
+  line-height: 16.200000762939453px;
   letter-spacing: 0px;
+  text-transform: upper;
 }
 
 
 /* ============================================
-   TABS
+   .DSDOCSSTYLES
    ============================================ */
 
-/* This text style stores variables for the tab component. Tabs are similar to submenus and special navigation elements but tabs do not link to other URLs. */
-.tablabel {
+.pageheaderdescription {
   font-family: Gotham XNarrow;
   font-weight: 700;
-  font-size: 16px;
-  text-transform: upper;
-}
-
-/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. */
-.appbottombarlabeldefault {
-  font-family: Gotham XNarrow;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 23.399999618530273px;
   letter-spacing: 0px;
 }
 
-/* Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. */
-.appbottombarlabelactive {
-  font-family: Gotham XNarrow;
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 23.399999618530273px;
+/* This text style is only used on the design system's documentation for code syntax snippets. */
+.codesnippets {
+  font-family: Source Code Pro;
+  font-size: 12px;
+  line-height: 15.800000190734863px;
   letter-spacing: 0px;
 }
 
-
-/* ============================================
-   TEXTLINK
-   ============================================ */
-
-/* Use this text style for styling elements that are clickable text links inside body texts. This style is often found in article texts. Font size remains constant at 21 across device sizes. */
-.textlink {
+/* This text style is only used for mockup pages of the design system website. */
+.bilddesignsidemenu {
   font-family: Gotham XNarrow;
   font-weight: 400;
-  font-size: 21px;
-  line-height: 28px;
-  letter-spacing: 0px;
-  text-decoration: underline;
 }
 
-/* Use this text style for styling elements that are clickable text links inside body texts that are using the italic style. This style is often found in article texts that need to show contrast for publications titles, specific words or names. Font size remains constant at 21 across device sizes. */
-.textlinkitalic {
+/* This text style is only used for mockup pages of the design system website. */
+.bilddesignsidemenuactive {
   font-family: Gotham XNarrow;
-  font-size: 21px;
-  line-height: 28px;
-  letter-spacing: 0px;
+  font-weight: 400;
   text-decoration: underline;
 }
 
-/* Use this text style for styling elements that are clickable text links inside emphasized body texts that are using the bold or html strong style. This style is often found in article texts that need to show contrast for specific words or names. Font size remains constant at 21 across device sizes. */
-.textlinkbold {
+/* This text style is only used for mockup pages of the design system website. */
+.bilddesignsidemenuhover {
   font-family: Gotham XNarrow;
-  font-weight: 700;
-  font-size: 21px;
-  line-height: 28px;
-  letter-spacing: 0px;
-  text-decoration: underline;
+  font-weight: 600;
 }
 
-/* Use this style for body text links or other text links that are in active state. Font size remains constant at 21 across device sizes. */
-.textlinkhover {
-  font-family: Gotham XNarrow;
-  font-weight: 400;
-  font-size: 21px;
-  line-height: 28px;
-  letter-spacing: 0px;
+/* This text style is only used for mockups the vertical video component teaser headlines. */
+.verticalvideosmockheadlines {
+  font-family: Gotham Condensed;
+  font-weight: 600;
+  font-size: 32px;
+  line-height: 32px;
   text-decoration: underline;
 }
 
-/* Use this style for body text links or other text links that are in active state. Font size remains constant at 21 across device sizes. */
-.textlinkboldhover {
-  font-family: Gotham XNarrow;
-  font-weight: 700;
-  font-size: 21px;
-  line-height: 28px;
-  letter-spacing: 0px;
-  text-decoration: underline;
+/* This text style is used on documentation pages that contain some token information. */
+.tokenspecl {
+  font-family: Source Code Pro;
 }
 
 
 /* ============================================
-   TITLE
+   .SPECS
    ============================================ */
 
-/* Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. Font size: 22 - 22 - 22 - 28 */
-.title1 {
+/* This text style is only used for audit pages of the design system. */
+.specsxs {
   font-family: Gotham;
-  font-weight: 800;
-  font-size: 22px;
-  line-height: 22px;
-  letter-spacing: 0px;
+  font-weight: 400;
 }
 
-/* Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. Font size: 22 - 22 - 22 - 28 */
-.title1uppercase {
+/* This text style is only used for audit pages of the design system. */
+.specss {
   font-family: Gotham;
-  font-weight: 800;
-  font-size: 22px;
-  line-height: 22px;
-  letter-spacing: 0px;
-  text-transform: upper;
 }
 
-/* Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. 
-
-In the previous system, this style was named Caption. For greater clarity and consistency, it has been renamed to title2. Font size: 16 - 16 - 18 - 20 */
-.title2 {
+/* This text style is only used for audit pages of the design system. */
+.specsms {
   font-family: Gotham;
-  font-weight: 800;
-  font-size: 18px;
-  line-height: 19.799999237060547px;
-  letter-spacing: 0px;
 }
 
-/* Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. 
+/* This text style is only used for audit pages of the design system. */
+.specsm {
+  font-family: Gotham;
+}
 
-In the previous system, this style was named Caption. For greater clarity and consistency, it has been renamed to title2. Font size: 16 - 16 - 18 - 20 */
-.title2uppercase {
+/* This text style is only used for audit pages of the design system. */
+.specsml {
   font-family: Gotham;
-  font-weight: 800;
-  font-size: 18px;
-  line-height: 19.799999237060547px;
-  letter-spacing: 0px;
-  text-transform: upper;
+  font-weight: 400;
+  font-size: 64px;
+  line-height: 80px;
+  text-decoration: underline;
 }
 
+/* This text style is only used for audit pages of the design system. */
+.specsl {
+  font-family: Gotham;
+  font-weight: 400;
+  text-decoration: underline;
+}
 
-/* ============================================
-   TOGGLESWITCHES
-   ============================================ */
+/* This text style is only used for audit pages of the design system. */
+.specsxl {
+  font-family: Gotham;
+  font-weight: 600;
+  text-decoration: underline;
+}
 
-/* This text style is used on labels in list items with toggle switches found in app preferences. 14 - 14 - 16 - 18 */
-.apptoogleitemlabel {
+/* This text style is only used for audit pages of the design system. */
+.specsxxl {
   font-family: Gotham;
-  font-weight: 800;
-  font-size: 16px;
-  line-height: 16.200000762939453px;
-  letter-spacing: 0px;
-  text-transform: upper;
+  font-weight: 600;
+  text-decoration: underline;
 }