@marioschmidt/design-system-tokens 1.0.23 → 1.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (246) hide show
  1. package/dist/android/brands/advertorial/sizeclass-compact/typography_styles.xml +430 -430
  2. package/dist/android/brands/advertorial/sizeclass-regular/typography_styles.xml +431 -431
  3. package/dist/android/brands/bild/sizeclass-compact/typography_styles.xml +436 -436
  4. package/dist/android/brands/bild/sizeclass-regular/typography_styles.xml +434 -434
  5. package/dist/android/brands/sportbild/sizeclass-compact/typography_styles.xml +442 -442
  6. package/dist/android/brands/sportbild/sizeclass-regular/typography_styles.xml +442 -442
  7. package/dist/css/brands/advertorial/density/density-compact.css +1 -1
  8. package/dist/css/brands/advertorial/density/density-default.css +1 -1
  9. package/dist/css/brands/advertorial/density/density-spacious.css +1 -1
  10. package/dist/css/brands/advertorial/overrides/brandtokenmapping.css +494 -494
  11. package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.css +773 -773
  12. package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.css +773 -773
  13. package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.css +773 -773
  14. package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.css +773 -773
  15. package/dist/css/brands/advertorial/semantic/effects/effects-dark.css +23 -23
  16. package/dist/css/brands/advertorial/semantic/effects/effects-light.css +23 -23
  17. package/dist/css/brands/advertorial/semantic/typography/typography-lg.css +626 -626
  18. package/dist/css/brands/advertorial/semantic/typography/typography-md.css +627 -627
  19. package/dist/css/brands/advertorial/semantic/typography/typography-sm.css +624 -624
  20. package/dist/css/brands/advertorial/semantic/typography/typography-xs.css +624 -624
  21. package/dist/css/brands/bild/density/density-compact.css +1 -1
  22. package/dist/css/brands/bild/density/density-default.css +1 -1
  23. package/dist/css/brands/bild/density/density-spacious.css +1 -1
  24. package/dist/css/brands/bild/overrides/brandcolormapping.css +140 -140
  25. package/dist/css/brands/bild/overrides/brandtokenmapping.css +494 -494
  26. package/dist/css/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.css +773 -773
  27. package/dist/css/brands/bild/semantic/breakpoints/breakpoint-md-600px.css +773 -773
  28. package/dist/css/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.css +773 -773
  29. package/dist/css/brands/bild/semantic/breakpoints/breakpoint-xs-320px.css +773 -773
  30. package/dist/css/brands/bild/semantic/color/colormode-dark.css +385 -385
  31. package/dist/css/brands/bild/semantic/color/colormode-light.css +385 -385
  32. package/dist/css/brands/bild/semantic/effects/effects-dark.css +23 -23
  33. package/dist/css/brands/bild/semantic/effects/effects-light.css +23 -23
  34. package/dist/css/brands/bild/semantic/typography/typography-lg.css +637 -637
  35. package/dist/css/brands/bild/semantic/typography/typography-md.css +632 -632
  36. package/dist/css/brands/bild/semantic/typography/typography-sm.css +632 -632
  37. package/dist/css/brands/bild/semantic/typography/typography-xs.css +633 -633
  38. package/dist/css/brands/sportbild/density/density-compact.css +1 -1
  39. package/dist/css/brands/sportbild/density/density-default.css +1 -1
  40. package/dist/css/brands/sportbild/density/density-spacious.css +1 -1
  41. package/dist/css/brands/sportbild/overrides/brandcolormapping.css +140 -140
  42. package/dist/css/brands/sportbild/overrides/brandtokenmapping.css +494 -494
  43. package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.css +773 -773
  44. package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.css +773 -773
  45. package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.css +773 -773
  46. package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.css +773 -773
  47. package/dist/css/brands/sportbild/semantic/color/colormode-dark.css +385 -385
  48. package/dist/css/brands/sportbild/semantic/color/colormode-light.css +385 -385
  49. package/dist/css/brands/sportbild/semantic/effects/effects-dark.css +23 -23
  50. package/dist/css/brands/sportbild/semantic/effects/effects-light.css +23 -23
  51. package/dist/css/brands/sportbild/semantic/typography/typography-lg.css +632 -632
  52. package/dist/css/brands/sportbild/semantic/typography/typography-md.css +631 -631
  53. package/dist/css/brands/sportbild/semantic/typography/typography-sm.css +631 -631
  54. package/dist/css/brands/sportbild/semantic/typography/typography-xs.css +631 -631
  55. package/dist/css/shared/colorprimitive.css +97 -97
  56. package/dist/css/shared/fontprimitive.css +22 -22
  57. package/dist/css/shared/sizeprimitive.css +1 -1
  58. package/dist/css/shared/spaceprimitive.css +1 -1
  59. package/dist/flutter/brands/advertorial/overrides/brandtokenmapping.dart +291 -291
  60. package/dist/flutter/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.dart +635 -635
  61. package/dist/flutter/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.dart +635 -635
  62. package/dist/flutter/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.dart +635 -635
  63. package/dist/flutter/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.dart +635 -635
  64. package/dist/flutter/brands/advertorial/semantic/effects/effects-dark.dart +186 -15
  65. package/dist/flutter/brands/advertorial/semantic/effects/effects-light.dart +186 -15
  66. package/dist/flutter/brands/advertorial/semantic/typography/typography-lg.dart +1060 -138
  67. package/dist/flutter/brands/advertorial/semantic/typography/typography-md.dart +1059 -137
  68. package/dist/flutter/brands/advertorial/semantic/typography/typography-sm.dart +1060 -138
  69. package/dist/flutter/brands/advertorial/semantic/typography/typography-xs.dart +1059 -137
  70. package/dist/flutter/brands/bild/overrides/brandcolormapping.dart +91 -91
  71. package/dist/flutter/brands/bild/overrides/brandtokenmapping.dart +291 -291
  72. package/dist/flutter/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.dart +635 -635
  73. package/dist/flutter/brands/bild/semantic/breakpoints/breakpoint-md-600px.dart +635 -635
  74. package/dist/flutter/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.dart +635 -635
  75. package/dist/flutter/brands/bild/semantic/breakpoints/breakpoint-xs-320px.dart +635 -635
  76. package/dist/flutter/brands/bild/semantic/color/colormode-dark.dart +389 -389
  77. package/dist/flutter/brands/bild/semantic/color/colormode-light.dart +389 -389
  78. package/dist/flutter/brands/bild/semantic/effects/effects-dark.dart +186 -15
  79. package/dist/flutter/brands/bild/semantic/effects/effects-light.dart +186 -15
  80. package/dist/flutter/brands/bild/semantic/typography/typography-lg.dart +1060 -138
  81. package/dist/flutter/brands/bild/semantic/typography/typography-md.dart +1059 -137
  82. package/dist/flutter/brands/bild/semantic/typography/typography-sm.dart +1060 -138
  83. package/dist/flutter/brands/bild/semantic/typography/typography-xs.dart +1059 -137
  84. package/dist/flutter/brands/sportbild/overrides/brandcolormapping.dart +91 -91
  85. package/dist/flutter/brands/sportbild/overrides/brandtokenmapping.dart +291 -291
  86. package/dist/flutter/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.dart +635 -635
  87. package/dist/flutter/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.dart +635 -635
  88. package/dist/flutter/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.dart +635 -635
  89. package/dist/flutter/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.dart +635 -635
  90. package/dist/flutter/brands/sportbild/semantic/color/colormode-dark.dart +389 -389
  91. package/dist/flutter/brands/sportbild/semantic/color/colormode-light.dart +389 -389
  92. package/dist/flutter/brands/sportbild/semantic/effects/effects-dark.dart +186 -15
  93. package/dist/flutter/brands/sportbild/semantic/effects/effects-light.dart +186 -15
  94. package/dist/flutter/brands/sportbild/semantic/typography/typography-lg.dart +1060 -138
  95. package/dist/flutter/brands/sportbild/semantic/typography/typography-md.dart +1059 -137
  96. package/dist/flutter/brands/sportbild/semantic/typography/typography-sm.dart +1060 -138
  97. package/dist/flutter/brands/sportbild/semantic/typography/typography-xs.dart +1059 -137
  98. package/dist/flutter/shared/colorprimitive.dart +82 -82
  99. package/dist/flutter/shared/fontprimitive.dart +21 -21
  100. package/dist/ios/brands/advertorial/overrides/Brandtokenmapping.swift +291 -291
  101. package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointLg1024pxRegular.swift +635 -635
  102. package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointMd600px.swift +635 -635
  103. package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointSm390pxCompact.swift +635 -635
  104. package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointXs320px.swift +635 -635
  105. package/dist/ios/brands/advertorial/semantic/effects/EffectsDark.swift +48 -16
  106. package/dist/ios/brands/advertorial/semantic/effects/EffectsLight.swift +48 -16
  107. package/dist/ios/brands/advertorial/sizeclass-compact/Typography.swift +200 -200
  108. package/dist/ios/brands/advertorial/sizeclass-regular/Typography.swift +200 -200
  109. package/dist/ios/brands/bild/overrides/Brandcolormapping.swift +91 -91
  110. package/dist/ios/brands/bild/overrides/Brandtokenmapping.swift +291 -291
  111. package/dist/ios/brands/bild/semantic/breakpoints/BreakpointLg1024pxRegular.swift +635 -635
  112. package/dist/ios/brands/bild/semantic/breakpoints/BreakpointMd600px.swift +635 -635
  113. package/dist/ios/brands/bild/semantic/breakpoints/BreakpointSm390pxCompact.swift +635 -635
  114. package/dist/ios/brands/bild/semantic/breakpoints/BreakpointXs320px.swift +635 -635
  115. package/dist/ios/brands/bild/semantic/color/ColormodeDark.swift +389 -389
  116. package/dist/ios/brands/bild/semantic/color/ColormodeLight.swift +389 -389
  117. package/dist/ios/brands/bild/semantic/effects/EffectsDark.swift +48 -16
  118. package/dist/ios/brands/bild/semantic/effects/EffectsLight.swift +48 -16
  119. package/dist/ios/brands/bild/sizeclass-compact/Typography.swift +200 -200
  120. package/dist/ios/brands/bild/sizeclass-regular/Typography.swift +200 -200
  121. package/dist/ios/brands/sportbild/overrides/Brandcolormapping.swift +91 -91
  122. package/dist/ios/brands/sportbild/overrides/Brandtokenmapping.swift +291 -291
  123. package/dist/ios/brands/sportbild/semantic/breakpoints/BreakpointLg1024pxRegular.swift +635 -635
  124. package/dist/ios/brands/sportbild/semantic/breakpoints/BreakpointMd600px.swift +635 -635
  125. package/dist/ios/brands/sportbild/semantic/breakpoints/BreakpointSm390pxCompact.swift +635 -635
  126. package/dist/ios/brands/sportbild/semantic/breakpoints/BreakpointXs320px.swift +635 -635
  127. package/dist/ios/brands/sportbild/semantic/color/ColormodeDark.swift +389 -389
  128. package/dist/ios/brands/sportbild/semantic/color/ColormodeLight.swift +389 -389
  129. package/dist/ios/brands/sportbild/semantic/effects/EffectsDark.swift +48 -16
  130. package/dist/ios/brands/sportbild/semantic/effects/EffectsLight.swift +48 -16
  131. package/dist/ios/brands/sportbild/sizeclass-compact/Typography.swift +200 -200
  132. package/dist/ios/brands/sportbild/sizeclass-regular/Typography.swift +200 -200
  133. package/dist/ios/shared/Colorprimitive.swift +82 -82
  134. package/dist/ios/shared/Fontprimitive.swift +21 -21
  135. package/dist/js/brands/advertorial/density/density-compact.js +1 -1
  136. package/dist/js/brands/advertorial/density/density-default.js +1 -1
  137. package/dist/js/brands/advertorial/density/density-spacious.js +1 -1
  138. package/dist/js/brands/advertorial/overrides/brandtokenmapping.js +292 -292
  139. package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.js +636 -636
  140. package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.js +636 -636
  141. package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.js +636 -636
  142. package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.js +636 -636
  143. package/dist/js/brands/advertorial/semantic/effects/effects-dark.js +181 -21
  144. package/dist/js/brands/advertorial/semantic/effects/effects-light.js +181 -21
  145. package/dist/js/brands/advertorial/semantic/typography/typography-lg.js +892 -254
  146. package/dist/js/brands/advertorial/semantic/typography/typography-md.js +892 -254
  147. package/dist/js/brands/advertorial/semantic/typography/typography-sm.js +892 -254
  148. package/dist/js/brands/advertorial/semantic/typography/typography-xs.js +892 -254
  149. package/dist/js/brands/bild/density/density-compact.js +1 -1
  150. package/dist/js/brands/bild/density/density-default.js +1 -1
  151. package/dist/js/brands/bild/density/density-spacious.js +1 -1
  152. package/dist/js/brands/bild/overrides/brandcolormapping.js +92 -92
  153. package/dist/js/brands/bild/overrides/brandtokenmapping.js +292 -292
  154. package/dist/js/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.js +636 -636
  155. package/dist/js/brands/bild/semantic/breakpoints/breakpoint-md-600px.js +636 -636
  156. package/dist/js/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.js +636 -636
  157. package/dist/js/brands/bild/semantic/breakpoints/breakpoint-xs-320px.js +636 -636
  158. package/dist/js/brands/bild/semantic/color/colormode-dark.js +390 -390
  159. package/dist/js/brands/bild/semantic/color/colormode-light.js +390 -390
  160. package/dist/js/brands/bild/semantic/effects/effects-dark.js +181 -21
  161. package/dist/js/brands/bild/semantic/effects/effects-light.js +181 -21
  162. package/dist/js/brands/bild/semantic/typography/typography-lg.js +892 -254
  163. package/dist/js/brands/bild/semantic/typography/typography-md.js +892 -254
  164. package/dist/js/brands/bild/semantic/typography/typography-sm.js +892 -254
  165. package/dist/js/brands/bild/semantic/typography/typography-xs.js +892 -254
  166. package/dist/js/brands/sportbild/density/density-compact.js +1 -1
  167. package/dist/js/brands/sportbild/density/density-default.js +1 -1
  168. package/dist/js/brands/sportbild/density/density-spacious.js +1 -1
  169. package/dist/js/brands/sportbild/overrides/brandcolormapping.js +92 -92
  170. package/dist/js/brands/sportbild/overrides/brandtokenmapping.js +292 -292
  171. package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.js +636 -636
  172. package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.js +636 -636
  173. package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.js +636 -636
  174. package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.js +636 -636
  175. package/dist/js/brands/sportbild/semantic/color/colormode-dark.js +390 -390
  176. package/dist/js/brands/sportbild/semantic/color/colormode-light.js +390 -390
  177. package/dist/js/brands/sportbild/semantic/effects/effects-dark.js +181 -21
  178. package/dist/js/brands/sportbild/semantic/effects/effects-light.js +181 -21
  179. package/dist/js/brands/sportbild/semantic/typography/typography-lg.js +892 -254
  180. package/dist/js/brands/sportbild/semantic/typography/typography-md.js +892 -254
  181. package/dist/js/brands/sportbild/semantic/typography/typography-sm.js +892 -254
  182. package/dist/js/brands/sportbild/semantic/typography/typography-xs.js +892 -254
  183. package/dist/js/shared/colorprimitive.js +83 -83
  184. package/dist/js/shared/fontprimitive.js +22 -22
  185. package/dist/js/shared/sizeprimitive.js +1 -1
  186. package/dist/js/shared/spaceprimitive.js +1 -1
  187. package/dist/manifest.json +1 -1
  188. package/dist/scss/brands/advertorial/density/density-compact.scss +1 -1
  189. package/dist/scss/brands/advertorial/density/density-default.scss +1 -1
  190. package/dist/scss/brands/advertorial/density/density-spacious.scss +1 -1
  191. package/dist/scss/brands/advertorial/overrides/brandtokenmapping.scss +292 -292
  192. package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.scss +636 -636
  193. package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.scss +636 -636
  194. package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.scss +636 -636
  195. package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.scss +636 -636
  196. package/dist/scss/brands/bild/density/density-compact.scss +1 -1
  197. package/dist/scss/brands/bild/density/density-default.scss +1 -1
  198. package/dist/scss/brands/bild/density/density-spacious.scss +1 -1
  199. package/dist/scss/brands/bild/overrides/brandcolormapping.scss +92 -92
  200. package/dist/scss/brands/bild/overrides/brandtokenmapping.scss +292 -292
  201. package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.scss +636 -636
  202. package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-md-600px.scss +636 -636
  203. package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.scss +636 -636
  204. package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-xs-320px.scss +636 -636
  205. package/dist/scss/brands/bild/semantic/color/colormode-dark.scss +390 -390
  206. package/dist/scss/brands/bild/semantic/color/colormode-light.scss +390 -390
  207. package/dist/scss/brands/sportbild/density/density-compact.scss +1 -1
  208. package/dist/scss/brands/sportbild/density/density-default.scss +1 -1
  209. package/dist/scss/brands/sportbild/density/density-spacious.scss +1 -1
  210. package/dist/scss/brands/sportbild/overrides/brandcolormapping.scss +92 -92
  211. package/dist/scss/brands/sportbild/overrides/brandtokenmapping.scss +292 -292
  212. package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.scss +636 -636
  213. package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.scss +636 -636
  214. package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.scss +636 -636
  215. package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.scss +636 -636
  216. package/dist/scss/brands/sportbild/semantic/color/colormode-dark.scss +390 -390
  217. package/dist/scss/brands/sportbild/semantic/color/colormode-light.scss +390 -390
  218. package/dist/scss/shared/colorprimitive.scss +83 -83
  219. package/dist/scss/shared/fontprimitive.scss +22 -22
  220. package/dist/scss/shared/sizeprimitive.scss +1 -1
  221. package/dist/scss/shared/spaceprimitive.scss +1 -1
  222. package/package.json +1 -1
  223. package/dist/android/res/values/brands/advertorial/semantic/effects/effects-dark.xml +0 -20
  224. package/dist/android/res/values/brands/advertorial/semantic/effects/effects-light.xml +0 -20
  225. package/dist/android/res/values/brands/bild/semantic/effects/effects-dark.xml +0 -20
  226. package/dist/android/res/values/brands/bild/semantic/effects/effects-light.xml +0 -20
  227. package/dist/android/res/values/brands/sportbild/semantic/effects/effects-dark.xml +0 -20
  228. package/dist/android/res/values/brands/sportbild/semantic/effects/effects-light.xml +0 -20
  229. package/dist/scss/brands/advertorial/semantic/effects/effects-dark.scss +0 -56
  230. package/dist/scss/brands/advertorial/semantic/effects/effects-light.scss +0 -56
  231. package/dist/scss/brands/advertorial/semantic/typography/typography-lg.scss +0 -459
  232. package/dist/scss/brands/advertorial/semantic/typography/typography-md.scss +0 -459
  233. package/dist/scss/brands/advertorial/semantic/typography/typography-sm.scss +0 -459
  234. package/dist/scss/brands/advertorial/semantic/typography/typography-xs.scss +0 -459
  235. package/dist/scss/brands/bild/semantic/effects/effects-dark.scss +0 -56
  236. package/dist/scss/brands/bild/semantic/effects/effects-light.scss +0 -56
  237. package/dist/scss/brands/bild/semantic/typography/typography-lg.scss +0 -459
  238. package/dist/scss/brands/bild/semantic/typography/typography-md.scss +0 -459
  239. package/dist/scss/brands/bild/semantic/typography/typography-sm.scss +0 -459
  240. package/dist/scss/brands/bild/semantic/typography/typography-xs.scss +0 -459
  241. package/dist/scss/brands/sportbild/semantic/effects/effects-dark.scss +0 -56
  242. package/dist/scss/brands/sportbild/semantic/effects/effects-light.scss +0 -56
  243. package/dist/scss/brands/sportbild/semantic/typography/typography-lg.scss +0 -459
  244. package/dist/scss/brands/sportbild/semantic/typography/typography-md.scss +0 -459
  245. package/dist/scss/brands/sportbild/semantic/typography/typography-sm.scss +0 -459
  246. package/dist/scss/brands/sportbild/semantic/typography/typography-xs.scss +0 -459
@@ -1,365 +1,287 @@
1
1
  /**
2
2
  * brandtokenmapping.css
3
- * Generiert am: 2025-11-24T21:07:28.980Z
3
+ * Generiert am: 2025-11-25T08:26:24.359Z
4
4
  * Nicht manuell bearbeiten!
5
5
  */
6
6
 
7
7
  :root {
8
8
  /* ============================================
9
- COMPONENT
9
+ GLOBAL
10
10
  ============================================ */
11
11
 
12
- --button-label-font-weight-st: 600;
13
-
14
- /* Component - Accordion */
15
- --accordion-label-font-family: Gotham XNarrow;
16
-
17
- /* Component - Article - FontSize */
12
+ /* Global - Typography - FontSize - Display */
18
13
  /**
19
- * --article-figure-caption-font-size-sm
14
+ * Bild: 40 | SpoBi: 38 | Ads: 39 | This variable is used in the display1 text style font size parameter for small device sizes.
20
15
  */
21
- --article-image-caption-font-size-xs: 16px;
16
+ --display1-font-size-xs: 40px;
22
17
  /**
23
- * --article-figure-caption-font-size-md
18
+ * Bild: 40 | SpoBi: 38 | Ads: 39 | This variable is used in the display1 text style font size parameter for small device sizes.
24
19
  */
25
- --article-image-caption-font-size-md: 18px;
20
+ --display1-font-size-sm: 40px;
26
21
  /**
27
- * --article-figure-caption-font-size-lg
22
+ * Bild: 72 | SpoBi: 68 | Ads: 70 | This variable is used in the display1 text style font size parameter for medium device sizes.
28
23
  */
29
- --article-image-caption-font-size-lg: 18px;
24
+ --display1-font-size-md: 72px;
30
25
  /**
31
- * --article-figure-caption-font-size-sm
26
+ * Bild: 120 | SpoBi: 114 | Ads: 116 | This variable is used in the display1 text style font size parameter for large device sizes.
32
27
  */
33
- --article-image-caption-font-size-sm: 16px;
28
+ --display1-font-size-lg: 120px;
34
29
  /**
35
- * --article-figure-meta-font-size-sm
30
+ * Bild: 36 | SpoBi: 34 | Ads: 35 | This variable is used in the display2 text style font size parameter for small device sizes.
36
31
  */
37
- --article-image-source-font-size-xs: 16px;
32
+ --display2-font-size-xs: 36px;
38
33
  /**
39
- * --article-figure-meta-font-size-sm
34
+ * Bild: 36 | SpoBi: 34 | Ads: 35 | This variable is used in the display2 text style font size parameter for small device sizes.
40
35
  */
41
- --article-image-source-font-size-sm: 16px;
36
+ --display2-font-size-sm: 36px;
42
37
  /**
43
- * --article-figure-meta-font-size-sm
38
+ * Bild: 42 | SpoBi: 40 | Ads: 41 | This variable is used in the display2 text style font size parameter for medium device sizes.
44
39
  */
45
- --article-image-source-font-size-md: 16px;
40
+ --display2-font-size-md: 42px;
46
41
  /**
47
- * --article-figure-meta-font-size-lg
42
+ * Bild: 64 | SpoBi: 61 | Ads: 62 | This variable is used in the display2 text style font size parameter for large device sizes.
48
43
  */
49
- --article-image-source-font-size-lg: 18px;
50
-
51
- /* Component - Article - LineHeight */
44
+ --display2-font-size-lg: 64px;
52
45
  /**
53
- * --article-figure-caption-line-height-sm ; Bild: 19.5 // SpoBi: 16.9 // Ad: 19.5
46
+ * Bild: 28 | SpoBi: 27 | Ads: 27 | This variable is used in the display3 text style font size parameter for small device sizes.
54
47
  */
55
- --article-image-caption-line-height-xs: 19.5px;
48
+ --display3-font-size-sm: 28px;
56
49
  /**
57
- * --article-figure-caption-line-height-md ; Bild: 24.75 // SpoBi: 16.9 // Ad: 19.5
50
+ * Bild: 32 | SpoBi: 30 | Ads: 31 | This variable is used in the display3 text style font size parameter for medium device sizes.
58
51
  */
59
- --article-image-caption-line-height-md: 24.75px;
52
+ --display3-font-size-md: 32px;
60
53
  /**
61
- * --article-figure-caption-line-height-lg ; Bild: 24.75 // SpoBi: 19.5 // Ad: 24
54
+ * Bild: 40 | SpoBi: 38 | Ads: 39 | This variable is used in the display3 text style font size parameter for large device sizes.
62
55
  */
63
- --article-image-caption-line-height-lg: 24.75px;
56
+ --display3-font-size-lg: 40px;
64
57
  /**
65
- * --article-figure-caption-line-height-sm ; Bild: 19.5 // SpoBi: 16.9 // Ad: 19.5
58
+ * Bild: 28 | SpoBi: 27 | Ads: 27 | This variable is used in the display3 text style font size parameter for small device sizes.
66
59
  */
67
- --article-image-caption-line-height-sm: 19.5px;
60
+ --display3-font-size-xs: 28px;
61
+
62
+ /* Global - Typography - FontSize - Headline */
68
63
  /**
69
- * --article-figure-meta-line-height-sm ; Bild: 21 // SpoBi: 17 // Ad: 19
64
+ * Bild: 48 | SpoBi: 42 | Ads: 36 | This variable is used in the headline1 text style font size parameter for small device sizes.
70
65
  */
71
- --article-image-source-line-height-md: 21px;
66
+ --headline1-font-size-xs: 48px;
72
67
  /**
73
- * --article-figure-meta-line-height-lg ; Bild: 23 // SpoBi: 19 // Ad: 24
68
+ * Bild: 48 | SpoBi: 42 | Ads: 36 | This variable is used in the headline1 text style font size parameter for small device sizes.
74
69
  */
75
- --article-image-source-line-height-lg: 23px;
70
+ --headline1-font-size-sm: 48px;
76
71
  /**
77
- * --article-figure-meta-line-height-sm ; Bild: 21 // SpoBi: 17 // Ad: 19
72
+ * Bild: 72 | SpoBi: 60 | Ads: 54 | This variable is used in the headline1 text style font size parameter for medium device sizes.
78
73
  */
79
- --article-image-source-line-height-xs: 21px;
74
+ --headline1-font-size-md: 72px;
80
75
  /**
81
- * --article-figure-meta-line-height-sm ; Bild: 21 // SpoBi: 17 // Ad: 19
76
+ * Bild: 100 | SpoBi: 80 | Ads: 70 | This variable is used in the headline1 text style font size parameter for large device sizes.
82
77
  */
83
- --article-image-source-line-height-sm: 21px;
84
-
85
- /* Component - Avatar */
78
+ --headline1-font-size-lg: 100px;
86
79
  /**
87
- * current css 09-2025 --article-author-font // Bild: GothamXNarrow; SpoBi: Inter; Ads: LucidaGrande
80
+ * Bild: 40 | SpoBi: 42 | Ads: 30 | This variable is used in the headline2 text style font size parameter for small device sizes.
88
81
  */
89
- --avatar-font-family: Gotham XNarrow;
82
+ --headline2-font-size-xs: 40px;
90
83
  /**
91
- * 09-2025 css using footnote var for font sizes SM & LG // Bild: 16; SpoBi: 13; Ads: 13
84
+ * Bild: 40 | SpoBi: 42 | Ads: 30 | This variable is used in the headline2 text style font size parameter for small device sizes.
92
85
  */
93
- --avatar-font-size-sm: 16px;
86
+ --headline2-font-size-sm: 40px;
94
87
  /**
95
- * 09-2025 css using footnote var for font sizes SM & LG // Bild: 18; SpoBi: 15; Ads: 15
88
+ * Bild: 48 | SpoBi: 44 | Ads: 36 | This variable is used in the headline2 text style font size parameter for medium device sizes.
96
89
  */
97
- --avatar-font-size-lg: 18px;
98
-
99
- /* Component - Breadcrumb - FontFamily */
90
+ --headline2-font-size-md: 48px;
100
91
  /**
101
- * --breadcrumb-font
92
+ * Bild: 64 | SpoBi: 50 | Ads: 48 | This variable is used in the headline2 text style font size parameter for large device sizes.
102
93
  */
103
- --breadcrumb-font-family: Gotham XNarrow;
104
-
105
- /* Component - Breadcrumb - FontSize */
94
+ --headline2-font-size-lg: 64px;
106
95
  /**
107
- * --breadcrumb-font-size-sm
96
+ * Bild: 28 | SpoBi: 30 | Ads: 24 | This variable is used in the headline3 text style font size parameter for small device sizes.
108
97
  */
109
- --breadcrumb-font-size-xs: 15px;
98
+ --headline3-font-size-xs: 28px;
110
99
  /**
111
- * --breadcrumb-font-size-sm
100
+ * Bild: 28 | SpoBi: 30 | Ads: 24 | This variable is used in the headline3 text style font size parameter for small device sizes.
112
101
  */
113
- --breadcrumb-font-size-sm: 15px;
102
+ --headline3-font-size-sm: 28px;
114
103
  /**
115
- * --breadcrumb-font-size-sm
104
+ * Bild: 36 | SpoBi: 30 | Ads: 26 | This variable is used in the headline3 text style font size parameter for medium device sizes.
116
105
  */
117
- --breadcrumb-font-size-md: 15px;
106
+ --headline3-font-size-md: 36px;
118
107
  /**
119
- * --breadcrumb-font-size-lg
108
+ * Bild: 40 | SpoBi: 34 | Ads: 32 | This variable is used in the headline3 text style font size parameter for large device sizes.
120
109
  */
121
- --breadcrumb-font-size-lg: 12px;
122
-
123
- /* Component - Breadcrumb - FontWeight */
110
+ --headline3-font-size-lg: 40px;
124
111
  /**
125
- * --breadcrumb-font-size-sm
112
+ * Bild: 22 | SpoBi: 21 | Ads: 16 | This variable is used in the headline4 text style font size parameter for small device sizes.
126
113
  */
127
- --breadcrumb-font-weight: 700;
128
-
129
- /* Component - Breadcrumb - LineHeight */
114
+ --headline4-font-size-xs: 22px;
130
115
  /**
131
- * not defined as variable
116
+ * Bild: 22 | SpoBi: 21 | Ads: 16 | This variable is used in the headline4 text style font size parameter for small device sizes.
132
117
  */
133
- --breadcrumb-line-height-xs: 15px;
118
+ --headline4-font-size-sm: 22px;
134
119
  /**
135
- * not defined as variable
120
+ * Bild: 26 | SpoBi: 26 | Ads: 20 | This variable is used in the headline4 text style font size parameter for medium device sizes.
136
121
  */
137
- --breadcrumb-line-height-sm: 15px;
122
+ --headline4-font-size-md: 26px;
138
123
  /**
139
- * not defined as variable
124
+ * Bild: 32 | SpoBi: 26 | Ads: 22 | This variable is used in the headline4 text style font size parameter for large device sizes.
140
125
  */
141
- --breadcrumb-line-height-md: 15px;
126
+ --headline4-font-size-lg: 32px;
142
127
  /**
143
- * not defined as variable
128
+ * This variable is used for controlling the alignment of headlines across brands. current online css example var: --headline-text-align-lg
144
129
  */
145
- --breadcrumb-line-height-lg: 12px;
146
-
147
- /* Component - BreakingNews */
148
- --breaking-news-content-font-size: 21px;
149
-
150
- /* Component - Footer */
151
- --footer-link-font-family: Gotham XNarrow;
152
-
153
- /* Component - Inputfield */
154
- --input-field-label-font-family: Gotham XNarrow;
155
-
156
- /* Component - MediaPlayer */
157
- --video-time-badge-font-family: Gotham XNarrow;
130
+ --headline-text-align: center;
158
131
 
159
- /* Component - Menu */
132
+ /* Global - Typography - FontSize - Kicker */
160
133
  /**
161
- * --nav-btn-font-size
134
+ * Bild: 18 | SpoBi: 20 | Ads: 16 | This variable is used in the kicker1 text style font size parameter for small device sizes. Current online css: --kicker-0-font-size-sm
162
135
  */
163
- --menu-item-font-size: 15px;
136
+ --kicker1-font-size-xs: 18px;
164
137
  /**
165
- * --caption-1-font-size-md
138
+ * Bild: 18 | SpoBi: 20 | Ads: 16 | This variable is used in the kicker1 text style font size parameter for small device sizes. Current online css: --kicker-0-font-size-sm
166
139
  */
167
- --app-top-bar-title-font-size-md: 14px;
140
+ --kicker1-font-size-sm: 18px;
168
141
  /**
169
- * --caption-1-font-size-lg
142
+ * Bild: 22 | SpoBi: 26 | Ads: 18 | This variable is used in the kicker1 text style font size parameter for medium device sizes. Current online css: --kicker-0-font-size-md
170
143
  */
171
- --app-top-bar-title-font-size-lg: 14px;
144
+ --kicker1-font-size-md: 22px;
172
145
  /**
173
- * --caption-1-font-size-sm
146
+ * Bild: 30 | SpoBi: 32 | Ads: 25 | This variable is used in the kicker1 text style font size parameter for large device sizes. Current online css: --kicker-0-font-size-lg
174
147
  */
175
- --app-top-bar-title-font-size-xs: 12px;
148
+ --kicker1-font-size-lg: 30px;
176
149
  /**
177
- * --caption-1-font-size-sm
150
+ * Bild: 18 | SpoBi: 16 | Ads: 16 | This variable is used in the kicker2 text style font size parameter for small device sizes. Current online css: --kicker-1-font-size-sm
178
151
  */
179
- --app-top-bar-title-font-size-sm: 12px;
180
- --app-top-bar-title-line-height-md: 17px;
181
- --app-top-bar-title-line-height-lg: 17px;
182
- --app-top-bar-title-line-height-xs: 14px;
183
- --app-top-bar-title-line-height-sm: 14px;
184
- --menu-item-font-weight: 700;
185
-
186
- /* Component - Teaser */
152
+ --kicker2-font-size-xs: 18px;
187
153
  /**
188
- * --teaser-title-padding-lg
154
+ * Bild: 18 | SpoBi: 16 | Ads: 16 | This variable is used in the kicker2 text style font size parameter for small device sizes. Current online css: --kicker-1-font-size-sm
189
155
  */
190
- --teaser-title-inline-space-lg: 12px;
156
+ --kicker2-font-size-sm: 18px;
191
157
  /**
192
- * --teaser-title-padding-md
158
+ * Bild: 22 | SpoBi: 26 | Ads: 18 | This variable is used in the kicker2 text style font size parameter for medium device sizes. Current online css: --kicker-1-font-size-md
193
159
  */
194
- --teaser-title-inline-space-md: 12px;
160
+ --kicker2-font-size-md: 22px;
195
161
  /**
196
- * --teaser-title-padding-sm
162
+ * Bild: 24 | SpoBi: 26 | Ads: 21 | This variable is used in the kicker2 text style font size parameter for large device sizes. Current online css: --kicker-1-font-size-lg
197
163
  */
198
- --teaser-title-inline-space-sm: 8px;
164
+ --kicker2-font-size-lg: 24px;
199
165
  /**
200
- * --teaser-title-padding-xs
166
+ * Bild: 16 | SpoBi: 16 | Ads: 14 | This variable is used in the kicker3 text style font size parameter for small device sizes. Current online css: --kicker-2-font-size-sm
201
167
  */
202
- --teaser-title-inline-space-xs: 8px;
203
-
204
- /* Component - Teaser - 2xaTeaser */
205
- --2xa-teaser-title-inline-space: 8px;
206
-
207
- /* Component - Teaser - Quad */
208
- --q-teaser-title-inline-space-lg: 12px;
209
- --q-teaser-title-inline-space-md: 16px;
210
- --q-teaser-title-inline-space-sm: 8px;
211
- --q-teaser-title-inline-space-xs: 8px;
212
-
213
- /* Component - Teaser - aTeaser */
214
- --a-teaser-title-inline-space-lg: 12px;
215
- --a-teaser-title-inline-space-md: 12px;
216
- --a-teaser-title-inline-space-xs: 8px;
217
- --a-teaser-title-inline-space-sm: 8px;
218
-
219
- /* Component - Teaser - bTeaser */
220
- --b-teaser-title-inline-space: 8px;
221
-
222
- /* Component - Teaser - miniQ */
223
- --mini-qteaser-title-inline-space-md: 8px;
224
- --mini-qteaser-title-inline-space-lg: 8px;
225
- --mini-qteaser-title-inline-space-sm: 8px;
226
- --mini-qteaser-title-inline-space-xs: 8px;
227
-
228
- /* Component - Teaser - superA */
229
- --super-ateaser-title-inline-space: 16px;
230
-
231
-
232
- /* ============================================
233
- GLOBAL
234
- ============================================ */
235
-
236
- /* Global - Typography - FontFamily */
168
+ --kicker3-font-size-xs: 16px;
237
169
  /**
238
- * Bild: GothamXNarrow | SpoBi: AntennaExtraCond | Ads: LucidaGrande | This variable is used in the kickers text styles font family parameter.
170
+ * Bild: 16 | SpoBi: 16 | Ads: 14 | This variable is used in the kicker3 text style font size parameter for small device sizes. Current online css: --kicker-2-font-size-sm
239
171
  */
240
- --kicker-font-family: Gotham XNarrow;
172
+ --kicker3-font-size-sm: 16px;
241
173
  /**
242
- * Bild: Gotham | SpoBi: AntennaCond | Ads: LucidaGrande | This variable is used in the display text style font family parameter.
174
+ * Bild: 18 | SpoBi: 20 | Ads: 14 | This variable is used in the kicker3 text style font size parameter for medium device sizes. Current online css: --kicker-2-font-size-md
243
175
  */
244
- --display-font-family: Gotham;
176
+ --kicker3-font-size-md: 18px;
245
177
  /**
246
- * Bild: GothamCond | SpoBi: AntennaExtraCond | Ads: LucidaGrande | This variable is used in the headlines text style font family parameter.
178
+ * Bild: 20 | SpoBi: 22 | Ads: 16 | This variable is used in the kicker3 text style font size parameter for large device sizes. Current online css: --kicker-2-font-size-lg
247
179
  */
248
- --headline-font-family: Gotham Condensed;
180
+ --kicker3-font-size-lg: 20px;
249
181
  /**
250
- * Bild: GothamCond | SpoBi: AntennaCond | Ads: LucidaGrande | This variable is used in the subheadlines text style font family parameter.
182
+ * Bild: 14 | SpoBi: 14 | Ads: 12 | This variable is used in the kicker4 text style font size parameter for small device sizes. Current online css: --kicker-3-font-size-sm
251
183
  */
252
- --subheadline-font-family: Gotham Condensed;
184
+ --kicker4-font-size-xs: 14px;
253
185
  /**
254
- * Bild: GothamXNarrow | SpoBi: Inter | Ads: LucidaGrande | This variable is used in the body text style font family parameter.
186
+ * Bild: 14 | SpoBi: 14 | Ads: 12 | This variable is used in the kicker4 text style font size parameter for small device sizes. Current online css: --kicker-3-font-size-sm
255
187
  */
256
- --body-font-family: Gotham XNarrow;
188
+ --kicker4-font-size-sm: 14px;
257
189
  /**
258
- * Bild: GothamXNarrow | SpoBi: Inter | Ads: LucidaGrande | This variable is used in the footnotes text style font family parameter.
190
+ * Bild: 16 | SpoBi: 16 | Ads: 14 | This variable is used in the kicker4 text style font size parameter for medium device sizes. Current online css: --kicker-3-font-size-md
259
191
  */
260
- --footnote-font-family: Gotham XNarrow;
192
+ --kicker4-font-size-md: 16px;
261
193
  /**
262
- * Bild: GothamXNarrow | SpoBi: AntennaExtraCond | Ads: LucidaGrande | This variable is used in the labels text styles font family parameter.
194
+ * Bild: 16 | SpoBi: 18 | Ads: 14 | This variable is used in the kicker4 text style font size parameter for large device sizes. Current online css: --kicker-3-font-size-lg
263
195
  */
264
- --label-font-family: Gotham XNarrow;
265
- /**
266
- * Bild: Gotham | SpoBi: AntennaCond | Ads: LucidaGrande | This variable is used in the quotes text style font family parameter.
267
- */
268
- --quote-font-family: Gotham;
269
- /**
270
- * Bild: Gotham | SpoBi: AntennaCond | Ads: LucidaGrande | This variable is used in the titles text style font family parameter.
271
- */
272
- --title-font-family: Gotham;
273
- /**
274
- * Bild: Gotham | SpoBi: AntennaCond | Ads: LucidaGrande | This variable is used in the callouts text style font family parameter.
275
- */
276
- --callout-font-family: Gotham;
196
+ --kicker4-font-size-lg: 16px;
277
197
 
278
- /* Global - Typography - FontSize - Body */
198
+ /* Global - Typography - FontSize - Subheadline */
279
199
  /**
280
- * Bild: 21 | SpoBi: 17 | Ads: 17 | This variable is used in the body text style font size parameter for small device sizes. Current online css: --body-font-size
200
+ * Bild: 24 | SpoBi: 18 | Ads: 18 | This variable is used in the subheadline1 text style font size parameter for small device sizes.
281
201
  */
282
- --body-font-size-xs: 21px;
202
+ --subheadline1-font-size-xs: 24px;
283
203
  /**
284
- * Bild: 21 | SpoBi: 17 | Ads: 17 | This variable is used in the body text style font size parameter for small device sizes. Current online css: --body-font-size
204
+ * Bild: 24 | SpoBi: 18 | Ads: 18 | This variable is used in the subheadline1 text style font size parameter for small device sizes.
285
205
  */
286
- --body-font-size-sm: 21px;
206
+ --subheadline1-font-size-sm: 24px;
287
207
  /**
288
- * Bild: 21 | SpoBi: 17 | Ads: 17 | This variable is used in the body text style font size parameter for medium device sizes. Current online css: --body-font-size
208
+ * Bild: 32 | SpoBi: 22 | Ads: 18 | This variable is used in the subheadline1 text style font size parameter for medium device sizes.
289
209
  */
290
- --body-font-size-md: 21px;
210
+ --subheadline1-font-size-md: 32px;
291
211
  /**
292
- * Bild: 21 | SpoBi: 17 | Ads: 17 | This variable is used in the body text style font size parameter for large device sizes. Current online css: --body-font-size
212
+ * Bild: 36 | SpoBi: 26 | Ads: 28 | This variable is used in the subheadline1 text style font size parameter for large device sizes.
293
213
  */
294
- --body-font-size-lg: 21px;
214
+ --subheadline1-font-size-lg: 36px;
295
215
 
296
- /* Global - Typography - FontSize - Callout */
216
+ /* Global - Typography - FontSize - Title */
297
217
  /**
298
- * Bild: 18 | SpoBi: 18 | Ads: 16 | This variable is used in the callout1 text style font size parameter for small device sizes. Current online css:
218
+ * Bild 22 | SpoBi 24 | Ads 22 | current online css: --ressort-header-font-size-sm
299
219
  */
300
- --callout1-font-size-xs: 18px;
220
+ --title1-font-size-xs: 22px;
301
221
  /**
302
- * Bild: 18 | SpoBi: 18 | Ads: 16 | This variable is used in the callout1 text style font size parameter for small device sizes. Current online css:
222
+ * Bild 22 | SpoBi 24 | Ads 22 | current online css: --ressort-header-font-size-sm
303
223
  */
304
- --callout1-font-size-sm: 18px;
224
+ --title1-font-size-sm: 22px;
305
225
  /**
306
- * Bild: 22 | SpoBi: 24 | Ads: 22 | This variable is used in the callout1 text style font size parameter for medium device sizes. Current online css:
226
+ * Bild 22 | SpoBi 28 | Ads 22 | current online css: --ressort-header-font-size-md
307
227
  */
308
- --callout1-font-size-md: 22px;
228
+ --title1-font-size-md: 22px;
309
229
  /**
310
- * Bild: 22 | SpoBi: 24 | Ads: 22 | This variable is used in the callout1 text style font size parameter for large device sizes. Current online css:
230
+ * Bild 28 | SpoBi 30 | Ads 28 | current online css: --ressort-header-font-size-lg
311
231
  */
312
- --callout1-font-size-lg: 22px;
313
-
314
- /* Global - Typography - FontSize - Display */
232
+ --title1-font-size-lg: 28px;
315
233
  /**
316
- * Bild: 40 | SpoBi: 38 | Ads: 39 | This variable is used in the display1 text style font size parameter for small device sizes.
234
+ * Bild 16 | SpoBi 16 | Ads 14 | current online css var: --caption-1-font-size-sm
317
235
  */
318
- --display1-font-size-xs: 40px;
236
+ --title2-font-size-xs: 16px;
319
237
  /**
320
- * Bild: 40 | SpoBi: 38 | Ads: 39 | This variable is used in the display1 text style font size parameter for small device sizes.
238
+ * Bild 16 | SpoBi 16 | Ads 14 | current online css: --caption-1-font-size-sm
321
239
  */
322
- --display1-font-size-sm: 40px;
240
+ --title2-font-size-sm: 16px;
323
241
  /**
324
- * Bild: 72 | SpoBi: 68 | Ads: 70 | This variable is used in the display1 text style font size parameter for medium device sizes.
242
+ * Bild 18 | SpoBi 18 | Ads 16 | current online css: --caption-1-font-size-md
325
243
  */
326
- --display1-font-size-md: 72px;
244
+ --title2-font-size-md: 18px;
327
245
  /**
328
- * Bild: 120 | SpoBi: 114 | Ads: 116 | This variable is used in the display1 text style font size parameter for large device sizes.
246
+ * Bild 20 | SpoBi 20 | Ads 18 | current online css: --caption-1-font-size-lg
329
247
  */
330
- --display1-font-size-lg: 120px;
248
+ --title2-font-size-lg: 20px;
249
+
250
+ /* Global - Typography - FontSize - Callout */
331
251
  /**
332
- * Bild: 36 | SpoBi: 34 | Ads: 35 | This variable is used in the display2 text style font size parameter for small device sizes.
252
+ * Bild: 18 | SpoBi: 18 | Ads: 16 | This variable is used in the callout1 text style font size parameter for small device sizes. Current online css:
333
253
  */
334
- --display2-font-size-xs: 36px;
254
+ --callout1-font-size-xs: 18px;
335
255
  /**
336
- * Bild: 36 | SpoBi: 34 | Ads: 35 | This variable is used in the display2 text style font size parameter for small device sizes.
256
+ * Bild: 18 | SpoBi: 18 | Ads: 16 | This variable is used in the callout1 text style font size parameter for small device sizes. Current online css:
337
257
  */
338
- --display2-font-size-sm: 36px;
258
+ --callout1-font-size-sm: 18px;
339
259
  /**
340
- * Bild: 42 | SpoBi: 40 | Ads: 41 | This variable is used in the display2 text style font size parameter for medium device sizes.
260
+ * Bild: 22 | SpoBi: 24 | Ads: 22 | This variable is used in the callout1 text style font size parameter for medium device sizes. Current online css:
341
261
  */
342
- --display2-font-size-md: 42px;
262
+ --callout1-font-size-md: 22px;
343
263
  /**
344
- * Bild: 64 | SpoBi: 61 | Ads: 62 | This variable is used in the display2 text style font size parameter for large device sizes.
264
+ * Bild: 22 | SpoBi: 24 | Ads: 22 | This variable is used in the callout1 text style font size parameter for large device sizes. Current online css:
345
265
  */
346
- --display2-font-size-lg: 64px;
266
+ --callout1-font-size-lg: 22px;
267
+
268
+ /* Global - Typography - FontSize - Body */
347
269
  /**
348
- * Bild: 28 | SpoBi: 27 | Ads: 27 | This variable is used in the display3 text style font size parameter for small device sizes.
270
+ * Bild: 21 | SpoBi: 17 | Ads: 17 | This variable is used in the body text style font size parameter for small device sizes. Current online css: --body-font-size
349
271
  */
350
- --display3-font-size-sm: 28px;
272
+ --body-font-size-xs: 21px;
351
273
  /**
352
- * Bild: 32 | SpoBi: 30 | Ads: 31 | This variable is used in the display3 text style font size parameter for medium device sizes.
274
+ * Bild: 21 | SpoBi: 17 | Ads: 17 | This variable is used in the body text style font size parameter for small device sizes. Current online css: --body-font-size
353
275
  */
354
- --display3-font-size-md: 32px;
276
+ --body-font-size-sm: 21px;
355
277
  /**
356
- * Bild: 40 | SpoBi: 38 | Ads: 39 | This variable is used in the display3 text style font size parameter for large device sizes.
278
+ * Bild: 21 | SpoBi: 17 | Ads: 17 | This variable is used in the body text style font size parameter for medium device sizes. Current online css: --body-font-size
357
279
  */
358
- --display3-font-size-lg: 40px;
280
+ --body-font-size-md: 21px;
359
281
  /**
360
- * Bild: 28 | SpoBi: 27 | Ads: 27 | This variable is used in the display3 text style font size parameter for small device sizes.
282
+ * Bild: 21 | SpoBi: 17 | Ads: 17 | This variable is used in the body text style font size parameter for large device sizes. Current online css: --body-font-size
361
283
  */
362
- --display3-font-size-xs: 28px;
284
+ --body-font-size-lg: 21px;
363
285
 
364
286
  /* Global - Typography - FontSize - Footnote */
365
287
  /**
@@ -380,386 +302,464 @@
380
302
  --footnote2-font-size-md: 12px;
381
303
  --footnote2-font-size-lg: 16px;
382
304
 
383
- /* Global - Typography - FontSize - Headline */
384
- /**
385
- * Bild: 48 | SpoBi: 42 | Ads: 36 | This variable is used in the headline1 text style font size parameter for small device sizes.
386
- */
387
- --headline1-font-size-xs: 48px;
388
- /**
389
- * Bild: 48 | SpoBi: 42 | Ads: 36 | This variable is used in the headline1 text style font size parameter for small device sizes.
390
- */
391
- --headline1-font-size-sm: 48px;
392
- /**
393
- * Bild: 72 | SpoBi: 60 | Ads: 54 | This variable is used in the headline1 text style font size parameter for medium device sizes.
394
- */
395
- --headline1-font-size-md: 72px;
396
- /**
397
- * Bild: 100 | SpoBi: 80 | Ads: 70 | This variable is used in the headline1 text style font size parameter for large device sizes.
398
- */
399
- --headline1-font-size-lg: 100px;
305
+ /* Global - Typography - FontSize - Quote */
306
+ --quote-font-size-xs: 16px;
307
+ --quote-font-size-sm: 16px;
308
+ --quote-font-size-md: 18px;
309
+ --quote-font-size-lg: 20px;
310
+
311
+ /* Global - Typography - FontSize - Label */
312
+ --label1-font-size: 17px;
313
+ --label2-font-size: 15px;
314
+ --label3-font-size: 12px;
315
+ --label4-font-size: 8px;
316
+ --label1-resp-font-size-xs: 10px;
317
+ --label1-resp-font-size-sm: 10px;
318
+ --label1-resp-font-size-md: 15px;
319
+ --label1-resp-font-size-lg: 17px;
320
+
321
+ /* Global - Typography - LineHeight - Display */
322
+ --display1-line-height-xs: 40px;
323
+ --display1-line-height-sm: 40px;
324
+ --display1-line-height-md: 72px;
325
+ --display1-line-height-lg: 120px;
326
+ --display2-line-height-xs: 36px;
327
+ --display2-line-height-sm: 36px;
328
+ --display2-line-height-md: 42px;
329
+ --display2-line-height-lg: 64px;
330
+ --display3-line-height-lg: 40px;
331
+ --display3-line-height-md: 32px;
332
+ --display3-line-height-sm: 28px;
333
+ --display3-line-height-xs: 28px;
334
+
335
+ /* Global - Typography - LineHeight - Headline */
336
+ --headline1-line-height-xs: 48px;
337
+ --headline1-line-height-sm: 48px;
338
+ --headline1-line-height-md: 72px;
339
+ --headline1-line-height-lg: 100px;
340
+ --headline2-line-height-xs: 40px;
341
+ --headline2-line-height-sm: 40px;
342
+ --headline2-line-height-md: 48px;
343
+ --headline2-line-height-lg: 64px;
344
+ --headline3-line-height-xs: 28px;
345
+ --headline3-line-height-sm: 28px;
346
+ --headline3-line-height-md: 36px;
347
+ --headline3-line-height-lg: 40px;
348
+ --headline4-line-height-xs: 22px;
349
+ --headline4-line-height-sm: 22px;
350
+ --headline4-line-height-md: 22px;
351
+ --headline4-line-height-lg: 30px;
352
+
353
+ /* Global - Typography - LineHeight - Subheadline */
354
+ --subheadline1-line-height-xs: 24px;
355
+ --subheadline1-line-height-sm: 24px;
356
+ --subheadline1-line-height-md: 32px;
357
+ --subheadline1-line-height-lg: 36px;
358
+
359
+ /* Global - Typography - LineHeight - Kicker */
360
+ --kicker1-line-height-xs: 19.799999237060547px;
361
+ --kicker1-line-height-sm: 19.799999237060547px;
362
+ --kicker1-line-height-md: 22px;
363
+ --kicker1-line-height-lg: 30px;
364
+ --kicker2-line-height-xs: 19.799999237060547px;
365
+ --kicker2-line-height-sm: 19.799999237060547px;
366
+ --kicker2-line-height-md: 22px;
367
+ --kicker2-line-height-lg: 24px;
368
+ --kicker3-line-height-xs: 17.600000381469727px;
369
+ --kicker3-line-height-sm: 17.600000381469727px;
370
+ --kicker3-line-height-md: 18px;
371
+ --kicker3-line-height-lg: 20px;
372
+ --kicker4-line-height-xs: 15.399999618530273px;
373
+ --kicker4-line-height-sm: 15.399999618530273px;
374
+ --kicker4-line-height-md: 17.600000381469727px;
375
+ --kicker4-line-height-lg: 16px;
376
+
377
+ /* Global - Typography - LineHeight - Title */
378
+ --title1-line-height-xs: 22px;
379
+ --title1-line-height-sm: 22px;
380
+ --title1-line-height-md: 22px;
381
+ --title1-line-height-lg: 28px;
382
+ --title2-line-height-xs: 17.600000381469727px;
383
+ --title2-line-height-sm: 17.600000381469727px;
384
+ --title2-line-height-md: 19.799999237060547px;
385
+ --title2-line-height-lg: 22px;
386
+
387
+ /* Global - Typography - LineHeight - Callout */
388
+ --callout1-line-height-xs: 18px;
389
+ --callout1-line-height-sm: 18px;
390
+ --callout1-line-height-md: 22px;
391
+ --callout1-line-height-lg: 22px;
392
+
393
+ /* Global - Typography - LineHeight - Body */
394
+ --body-line-height-xs: 28px;
395
+ --body-line-height-sm: 28px;
396
+ --body-line-height-md: 28px;
397
+ --body-line-height-lg: 32px;
398
+
399
+ /* Global - Typography - LineHeight - Footnote */
400
+ --footnote1-line-height-xs: 21px;
401
+ --footnote1-line-height-sm: 21px;
402
+ --footnote1-line-height-md: 21px;
403
+ --footnote1-line-height-lg: 23px;
404
+ --footnote2-line-height-xs: 15.600000381469727px;
405
+ --footnote2-line-height-sm: 15.600000381469727px;
406
+ --footnote2-line-height-md: 15.800000190734863px;
407
+ --footnote2-line-height-lg: 21px;
408
+
409
+ /* Global - Typography - LineHeight - Label */
400
410
  /**
401
- * Bild: 40 | SpoBi: 42 | Ads: 30 | This variable is used in the headline2 text style font size parameter for small device sizes.
411
+ * Bild 17 | SpoBi 20.4 | Ads 20.4 | The label 1 text style uses this variable for its line height parameter.
402
412
  */
403
- --headline2-font-size-xs: 40px;
413
+ --label1-line-height: 17px;
404
414
  /**
405
- * Bild: 40 | SpoBi: 42 | Ads: 30 | This variable is used in the headline2 text style font size parameter for small device sizes.
415
+ * Bild 10 | SpoBi 12 | Ads 10 | The label1 responsive text style uses this variable for its line height parameter.
406
416
  */
407
- --headline2-font-size-sm: 40px;
417
+ --label1-resp-line-height-xs: 10px;
408
418
  /**
409
- * Bild: 48 | SpoBi: 44 | Ads: 36 | This variable is used in the headline2 text style font size parameter for medium device sizes.
419
+ * Bild 10 | SpoBi 12 | Ads 10 | The label1 responsive text style uses this variable for its line height parameter.
410
420
  */
411
- --headline2-font-size-md: 48px;
421
+ --label1-resp-line-height-sm: 10px;
412
422
  /**
413
- * Bild: 64 | SpoBi: 50 | Ads: 48 | This variable is used in the headline2 text style font size parameter for large device sizes.
423
+ * Bild 15 | SpoBi 18 | Ads 15 | The label1 responsive text style uses this variable for its line height parameter.
414
424
  */
415
- --headline2-font-size-lg: 64px;
425
+ --label1-resp-line-height-md: 15px;
416
426
  /**
417
- * Bild: 28 | SpoBi: 30 | Ads: 24 | This variable is used in the headline3 text style font size parameter for small device sizes.
427
+ * Bild 17 | SpoBi 20.4 | Ads 17 | The label1 responsive text style uses this variable for its line height parameter.
418
428
  */
419
- --headline3-font-size-xs: 28px;
429
+ --label1-resp-line-height-lg: 17px;
420
430
  /**
421
- * Bild: 28 | SpoBi: 30 | Ads: 24 | This variable is used in the headline3 text style font size parameter for small device sizes.
431
+ * Bild 16 | SpoBi 19.2 | Ads 16 | The label 2 text style uses this variable for its line height parameter.
422
432
  */
423
- --headline3-font-size-sm: 28px;
433
+ --label2-line-height: 16px;
424
434
  /**
425
- * Bild: 36 | SpoBi: 30 | Ads: 26 | This variable is used in the headline3 text style font size parameter for medium device sizes.
435
+ * Bild 14.4 | SpoBi 14.4 | Ads 14.4 | The label 3 text style uses this variable for its line height parameter.
426
436
  */
427
- --headline3-font-size-md: 36px;
437
+ --label3-line-height: 14.399999618530273px;
428
438
  /**
429
- * Bild: 40 | SpoBi: 34 | Ads: 32 | This variable is used in the headline3 text style font size parameter for large device sizes.
439
+ * Bild 10 | SpoBi 10 | Ads 10 | The label 4 text style uses this variable for its line height parameter.
430
440
  */
431
- --headline3-font-size-lg: 40px;
441
+ --label4-line-height: 10px;
442
+
443
+ /* Global - Typography - LineHeight - Quote */
444
+ --quote-line-height-xs: 16px;
445
+ --quote-line-height-sm: 16px;
446
+ --quote-line-height-md: 18px;
447
+ --quote-line-height-lg: 22px;
448
+
449
+ /* Global - Typography - FontWeight - Body */
450
+ --body-font-weight-book: 400;
451
+ --body-font-weight-bold: 700;
452
+
453
+ /* Global - Typography - FontWeight - Footnote */
454
+ --footnote-font-weight-book: 400;
455
+ --footnote-font-weight-bold: 700;
456
+
457
+ /* Global - Typography - FontWeight - Label */
458
+ --label-font-weight-book: 400;
459
+ --label-font-weight-bold: 700;
460
+
461
+ /* Global - Typography - FontWeight - Quote */
462
+ --quote-font-weight: 800;
463
+
464
+ /* Global - Typography - FontWeight - Display */
465
+ --display-font-weight: 800;
466
+
467
+ /* Global - Typography - FontWeight - Headline */
468
+ --headline1-font-weight-st: 700;
469
+ --headline1-font-weight: 700;
470
+ --headline2-font-weight: 700;
471
+ --headline3-font-weight: 700;
472
+ --headline4-font-weight: 600;
473
+ --headline2-font-weight-st: 700;
474
+ --headline3-font-weight-st: 700;
475
+ --headline4-font-weight-st: 600;
476
+
477
+ /* Global - Typography - FontWeight - Subheadline */
478
+ --subheadline-font-weight: 700;
479
+
480
+ /* Global - Typography - FontWeight - Kicker */
481
+ --kicker-font-weight: 700;
482
+ --kicker-font-weight-st: 700;
483
+
484
+ /* Global - Typography - FontWeight - Callout */
485
+ --callout-font-weight: 800;
486
+
487
+ /* Global - Typography - FontWeight - Title */
488
+ --title-font-weight: 800;
489
+
490
+ /* Global - Typography - FontFamily */
432
491
  /**
433
- * Bild: 22 | SpoBi: 21 | Ads: 16 | This variable is used in the headline4 text style font size parameter for small device sizes.
492
+ * Bild: GothamXNarrow | SpoBi: AntennaExtraCond | Ads: LucidaGrande | This variable is used in the kickers text styles font family parameter.
434
493
  */
435
- --headline4-font-size-xs: 22px;
494
+ --kicker-font-family: Gotham XNarrow;
436
495
  /**
437
- * Bild: 22 | SpoBi: 21 | Ads: 16 | This variable is used in the headline4 text style font size parameter for small device sizes.
496
+ * Bild: Gotham | SpoBi: AntennaCond | Ads: LucidaGrande | This variable is used in the display text style font family parameter.
438
497
  */
439
- --headline4-font-size-sm: 22px;
498
+ --display-font-family: Gotham;
440
499
  /**
441
- * Bild: 26 | SpoBi: 26 | Ads: 20 | This variable is used in the headline4 text style font size parameter for medium device sizes.
500
+ * Bild: GothamCond | SpoBi: AntennaExtraCond | Ads: LucidaGrande | This variable is used in the headlines text style font family parameter.
442
501
  */
443
- --headline4-font-size-md: 26px;
502
+ --headline-font-family: Gotham Condensed;
444
503
  /**
445
- * Bild: 32 | SpoBi: 26 | Ads: 22 | This variable is used in the headline4 text style font size parameter for large device sizes.
504
+ * Bild: GothamCond | SpoBi: AntennaCond | Ads: LucidaGrande | This variable is used in the subheadlines text style font family parameter.
446
505
  */
447
- --headline4-font-size-lg: 32px;
506
+ --subheadline-font-family: Gotham Condensed;
448
507
  /**
449
- * This variable is used for controlling the alignment of headlines across brands. current online css example var: --headline-text-align-lg
508
+ * Bild: GothamXNarrow | SpoBi: Inter | Ads: LucidaGrande | This variable is used in the body text style font family parameter.
450
509
  */
451
- --headline-text-align: center;
452
-
453
- /* Global - Typography - FontSize - Kicker */
510
+ --body-font-family: Gotham XNarrow;
454
511
  /**
455
- * Bild: 18 | SpoBi: 20 | Ads: 16 | This variable is used in the kicker1 text style font size parameter for small device sizes. Current online css: --kicker-0-font-size-sm
512
+ * Bild: GothamXNarrow | SpoBi: Inter | Ads: LucidaGrande | This variable is used in the footnotes text style font family parameter.
456
513
  */
457
- --kicker1-font-size-xs: 18px;
514
+ --footnote-font-family: Gotham XNarrow;
458
515
  /**
459
- * Bild: 18 | SpoBi: 20 | Ads: 16 | This variable is used in the kicker1 text style font size parameter for small device sizes. Current online css: --kicker-0-font-size-sm
516
+ * Bild: GothamXNarrow | SpoBi: AntennaExtraCond | Ads: LucidaGrande | This variable is used in the labels text styles font family parameter.
460
517
  */
461
- --kicker1-font-size-sm: 18px;
518
+ --label-font-family: Gotham XNarrow;
462
519
  /**
463
- * Bild: 22 | SpoBi: 26 | Ads: 18 | This variable is used in the kicker1 text style font size parameter for medium device sizes. Current online css: --kicker-0-font-size-md
520
+ * Bild: Gotham | SpoBi: AntennaCond | Ads: LucidaGrande | This variable is used in the quotes text style font family parameter.
464
521
  */
465
- --kicker1-font-size-md: 22px;
522
+ --quote-font-family: Gotham;
466
523
  /**
467
- * Bild: 30 | SpoBi: 32 | Ads: 25 | This variable is used in the kicker1 text style font size parameter for large device sizes. Current online css: --kicker-0-font-size-lg
524
+ * Bild: Gotham | SpoBi: AntennaCond | Ads: LucidaGrande | This variable is used in the titles text style font family parameter.
468
525
  */
469
- --kicker1-font-size-lg: 30px;
526
+ --title-font-family: Gotham;
470
527
  /**
471
- * Bild: 18 | SpoBi: 16 | Ads: 16 | This variable is used in the kicker2 text style font size parameter for small device sizes. Current online css: --kicker-1-font-size-sm
528
+ * Bild: Gotham | SpoBi: AntennaCond | Ads: LucidaGrande | This variable is used in the callouts text style font family parameter.
472
529
  */
473
- --kicker2-font-size-xs: 18px;
530
+ --callout-font-family: Gotham;
531
+
532
+ /* Global - Visibilty */
533
+ --hide-on-bild: false;
534
+ --hide-on-sport-bild: true;
535
+ --only-advertorial: false;
536
+ --hide-on-advertorial: true;
537
+ --only-bild: true;
538
+ --only-sport-bild: false;
539
+
540
+
541
+ /* ============================================
542
+ COMPONENT
543
+ ============================================ */
544
+
545
+ /* Component - Article - FontSize */
474
546
  /**
475
- * Bild: 18 | SpoBi: 16 | Ads: 16 | This variable is used in the kicker2 text style font size parameter for small device sizes. Current online css: --kicker-1-font-size-sm
547
+ * --article-figure-caption-font-size-sm
476
548
  */
477
- --kicker2-font-size-sm: 18px;
549
+ --article-image-caption-font-size-xs: 16px;
478
550
  /**
479
- * Bild: 22 | SpoBi: 26 | Ads: 18 | This variable is used in the kicker2 text style font size parameter for medium device sizes. Current online css: --kicker-1-font-size-md
551
+ * --article-figure-caption-font-size-md
480
552
  */
481
- --kicker2-font-size-md: 22px;
553
+ --article-image-caption-font-size-md: 18px;
482
554
  /**
483
- * Bild: 24 | SpoBi: 26 | Ads: 21 | This variable is used in the kicker2 text style font size parameter for large device sizes. Current online css: --kicker-1-font-size-lg
555
+ * --article-figure-caption-font-size-lg
484
556
  */
485
- --kicker2-font-size-lg: 24px;
557
+ --article-image-caption-font-size-lg: 18px;
486
558
  /**
487
- * Bild: 16 | SpoBi: 16 | Ads: 14 | This variable is used in the kicker3 text style font size parameter for small device sizes. Current online css: --kicker-2-font-size-sm
559
+ * --article-figure-caption-font-size-sm
488
560
  */
489
- --kicker3-font-size-xs: 16px;
561
+ --article-image-caption-font-size-sm: 16px;
490
562
  /**
491
- * Bild: 16 | SpoBi: 16 | Ads: 14 | This variable is used in the kicker3 text style font size parameter for small device sizes. Current online css: --kicker-2-font-size-sm
563
+ * --article-figure-meta-font-size-sm
492
564
  */
493
- --kicker3-font-size-sm: 16px;
565
+ --article-image-source-font-size-xs: 16px;
494
566
  /**
495
- * Bild: 18 | SpoBi: 20 | Ads: 14 | This variable is used in the kicker3 text style font size parameter for medium device sizes. Current online css: --kicker-2-font-size-md
567
+ * --article-figure-meta-font-size-sm
496
568
  */
497
- --kicker3-font-size-md: 18px;
569
+ --article-image-source-font-size-sm: 16px;
498
570
  /**
499
- * Bild: 20 | SpoBi: 22 | Ads: 16 | This variable is used in the kicker3 text style font size parameter for large device sizes. Current online css: --kicker-2-font-size-lg
571
+ * --article-figure-meta-font-size-sm
500
572
  */
501
- --kicker3-font-size-lg: 20px;
573
+ --article-image-source-font-size-md: 16px;
502
574
  /**
503
- * Bild: 14 | SpoBi: 14 | Ads: 12 | This variable is used in the kicker4 text style font size parameter for small device sizes. Current online css: --kicker-3-font-size-sm
575
+ * --article-figure-meta-font-size-lg
504
576
  */
505
- --kicker4-font-size-xs: 14px;
577
+ --article-image-source-font-size-lg: 18px;
578
+
579
+ /* Component - Article - LineHeight */
506
580
  /**
507
- * Bild: 14 | SpoBi: 14 | Ads: 12 | This variable is used in the kicker4 text style font size parameter for small device sizes. Current online css: --kicker-3-font-size-sm
581
+ * --article-figure-caption-line-height-sm ; Bild: 19.5 // SpoBi: 16.9 // Ad: 19.5
508
582
  */
509
- --kicker4-font-size-sm: 14px;
583
+ --article-image-caption-line-height-xs: 19.5px;
510
584
  /**
511
- * Bild: 16 | SpoBi: 16 | Ads: 14 | This variable is used in the kicker4 text style font size parameter for medium device sizes. Current online css: --kicker-3-font-size-md
585
+ * --article-figure-caption-line-height-md ; Bild: 24.75 // SpoBi: 16.9 // Ad: 19.5
512
586
  */
513
- --kicker4-font-size-md: 16px;
587
+ --article-image-caption-line-height-md: 24.75px;
514
588
  /**
515
- * Bild: 16 | SpoBi: 18 | Ads: 14 | This variable is used in the kicker4 text style font size parameter for large device sizes. Current online css: --kicker-3-font-size-lg
589
+ * --article-figure-caption-line-height-lg ; Bild: 24.75 // SpoBi: 19.5 // Ad: 24
516
590
  */
517
- --kicker4-font-size-lg: 16px;
518
-
519
- /* Global - Typography - FontSize - Label */
520
- --label1-font-size: 17px;
521
- --label2-font-size: 15px;
522
- --label3-font-size: 12px;
523
- --label4-font-size: 8px;
524
- --label1-resp-font-size-xs: 10px;
525
- --label1-resp-font-size-sm: 10px;
526
- --label1-resp-font-size-md: 15px;
527
- --label1-resp-font-size-lg: 17px;
528
-
529
- /* Global - Typography - FontSize - Quote */
530
- --quote-font-size-xs: 16px;
531
- --quote-font-size-sm: 16px;
532
- --quote-font-size-md: 18px;
533
- --quote-font-size-lg: 20px;
534
-
535
- /* Global - Typography - FontSize - Subheadline */
591
+ --article-image-caption-line-height-lg: 24.75px;
536
592
  /**
537
- * Bild: 24 | SpoBi: 18 | Ads: 18 | This variable is used in the subheadline1 text style font size parameter for small device sizes.
593
+ * --article-figure-caption-line-height-sm ; Bild: 19.5 // SpoBi: 16.9 // Ad: 19.5
538
594
  */
539
- --subheadline1-font-size-xs: 24px;
595
+ --article-image-caption-line-height-sm: 19.5px;
540
596
  /**
541
- * Bild: 24 | SpoBi: 18 | Ads: 18 | This variable is used in the subheadline1 text style font size parameter for small device sizes.
597
+ * --article-figure-meta-line-height-sm ; Bild: 21 // SpoBi: 17 // Ad: 19
542
598
  */
543
- --subheadline1-font-size-sm: 24px;
599
+ --article-image-source-line-height-md: 21px;
544
600
  /**
545
- * Bild: 32 | SpoBi: 22 | Ads: 18 | This variable is used in the subheadline1 text style font size parameter for medium device sizes.
601
+ * --article-figure-meta-line-height-lg ; Bild: 23 // SpoBi: 19 // Ad: 24
546
602
  */
547
- --subheadline1-font-size-md: 32px;
603
+ --article-image-source-line-height-lg: 23px;
548
604
  /**
549
- * Bild: 36 | SpoBi: 26 | Ads: 28 | This variable is used in the subheadline1 text style font size parameter for large device sizes.
605
+ * --article-figure-meta-line-height-sm ; Bild: 21 // SpoBi: 17 // Ad: 19
550
606
  */
551
- --subheadline1-font-size-lg: 36px;
607
+ --article-image-source-line-height-xs: 21px;
608
+ /**
609
+ * --article-figure-meta-line-height-sm ; Bild: 21 // SpoBi: 17 // Ad: 19
610
+ */
611
+ --article-image-source-line-height-sm: 21px;
552
612
 
553
- /* Global - Typography - FontSize - Title */
613
+ /* Component - Breadcrumb - FontSize */
554
614
  /**
555
- * Bild 22 | SpoBi 24 | Ads 22 | current online css: --ressort-header-font-size-sm
615
+ * --breadcrumb-font-size-sm
556
616
  */
557
- --title1-font-size-xs: 22px;
617
+ --breadcrumb-font-size-xs: 15px;
558
618
  /**
559
- * Bild 22 | SpoBi 24 | Ads 22 | current online css: --ressort-header-font-size-sm
619
+ * --breadcrumb-font-size-sm
560
620
  */
561
- --title1-font-size-sm: 22px;
621
+ --breadcrumb-font-size-sm: 15px;
562
622
  /**
563
- * Bild 22 | SpoBi 28 | Ads 22 | current online css: --ressort-header-font-size-md
623
+ * --breadcrumb-font-size-sm
564
624
  */
565
- --title1-font-size-md: 22px;
625
+ --breadcrumb-font-size-md: 15px;
566
626
  /**
567
- * Bild 28 | SpoBi 30 | Ads 28 | current online css: --ressort-header-font-size-lg
627
+ * --breadcrumb-font-size-lg
568
628
  */
569
- --title1-font-size-lg: 28px;
629
+ --breadcrumb-font-size-lg: 12px;
630
+
631
+ /* Component - Breadcrumb - LineHeight */
570
632
  /**
571
- * Bild 16 | SpoBi 16 | Ads 14 | current online css var: --caption-1-font-size-sm
633
+ * not defined as variable
572
634
  */
573
- --title2-font-size-xs: 16px;
635
+ --breadcrumb-line-height-xs: 15px;
574
636
  /**
575
- * Bild 16 | SpoBi 16 | Ads 14 | current online css: --caption-1-font-size-sm
637
+ * not defined as variable
576
638
  */
577
- --title2-font-size-sm: 16px;
639
+ --breadcrumb-line-height-sm: 15px;
578
640
  /**
579
- * Bild 18 | SpoBi 18 | Ads 16 | current online css: --caption-1-font-size-md
641
+ * not defined as variable
580
642
  */
581
- --title2-font-size-md: 18px;
643
+ --breadcrumb-line-height-md: 15px;
582
644
  /**
583
- * Bild 20 | SpoBi 20 | Ads 18 | current online css: --caption-1-font-size-lg
645
+ * not defined as variable
584
646
  */
585
- --title2-font-size-lg: 20px;
586
-
587
- /* Global - Typography - FontWeight - Body */
588
- --body-font-weight-book: 400;
589
- --body-font-weight-bold: 700;
590
-
591
- /* Global - Typography - FontWeight - Callout */
592
- --callout-font-weight: 800;
593
-
594
- /* Global - Typography - FontWeight - Display */
595
- --display-font-weight: 800;
596
-
597
- /* Global - Typography - FontWeight - Footnote */
598
- --footnote-font-weight-book: 400;
599
- --footnote-font-weight-bold: 700;
600
-
601
- /* Global - Typography - FontWeight - Headline */
602
- --headline1-font-weight-st: 700;
603
- --headline1-font-weight: 700;
604
- --headline2-font-weight: 700;
605
- --headline3-font-weight: 700;
606
- --headline4-font-weight: 600;
607
- --headline2-font-weight-st: 700;
608
- --headline3-font-weight-st: 700;
609
- --headline4-font-weight-st: 600;
610
-
611
- /* Global - Typography - FontWeight - Kicker */
612
- --kicker-font-weight: 700;
613
- --kicker-font-weight-st: 700;
614
-
615
- /* Global - Typography - FontWeight - Label */
616
- --label-font-weight-book: 400;
617
- --label-font-weight-bold: 700;
618
-
619
- /* Global - Typography - FontWeight - Quote */
620
- --quote-font-weight: 800;
621
-
622
- /* Global - Typography - FontWeight - Subheadline */
623
- --subheadline-font-weight: 700;
624
-
625
- /* Global - Typography - FontWeight - Title */
626
- --title-font-weight: 800;
627
-
628
- /* Global - Typography - LineHeight - Body */
629
- --body-line-height-xs: 28px;
630
- --body-line-height-sm: 28px;
631
- --body-line-height-md: 28px;
632
- --body-line-height-lg: 32px;
633
-
634
- /* Global - Typography - LineHeight - Callout */
635
- --callout1-line-height-xs: 18px;
636
- --callout1-line-height-sm: 18px;
637
- --callout1-line-height-md: 22px;
638
- --callout1-line-height-lg: 22px;
639
-
640
- /* Global - Typography - LineHeight - Display */
641
- --display1-line-height-xs: 40px;
642
- --display1-line-height-sm: 40px;
643
- --display1-line-height-md: 72px;
644
- --display1-line-height-lg: 120px;
645
- --display2-line-height-xs: 36px;
646
- --display2-line-height-sm: 36px;
647
- --display2-line-height-md: 42px;
648
- --display2-line-height-lg: 64px;
649
- --display3-line-height-lg: 40px;
650
- --display3-line-height-md: 32px;
651
- --display3-line-height-sm: 28px;
652
- --display3-line-height-xs: 28px;
653
-
654
- /* Global - Typography - LineHeight - Footnote */
655
- --footnote1-line-height-xs: 21px;
656
- --footnote1-line-height-sm: 21px;
657
- --footnote1-line-height-md: 21px;
658
- --footnote1-line-height-lg: 23px;
659
- --footnote2-line-height-xs: 15.600000381469727px;
660
- --footnote2-line-height-sm: 15.600000381469727px;
661
- --footnote2-line-height-md: 15.800000190734863px;
662
- --footnote2-line-height-lg: 21px;
647
+ --breadcrumb-line-height-lg: 12px;
663
648
 
664
- /* Global - Typography - LineHeight - Headline */
665
- --headline1-line-height-xs: 48px;
666
- --headline1-line-height-sm: 48px;
667
- --headline1-line-height-md: 72px;
668
- --headline1-line-height-lg: 100px;
669
- --headline2-line-height-xs: 40px;
670
- --headline2-line-height-sm: 40px;
671
- --headline2-line-height-md: 48px;
672
- --headline2-line-height-lg: 64px;
673
- --headline3-line-height-xs: 28px;
674
- --headline3-line-height-sm: 28px;
675
- --headline3-line-height-md: 36px;
676
- --headline3-line-height-lg: 40px;
677
- --headline4-line-height-xs: 22px;
678
- --headline4-line-height-sm: 22px;
679
- --headline4-line-height-md: 22px;
680
- --headline4-line-height-lg: 30px;
649
+ /* Component - Breadcrumb - FontFamily */
650
+ /**
651
+ * --breadcrumb-font
652
+ */
653
+ --breadcrumb-font-family: Gotham XNarrow;
681
654
 
682
- /* Global - Typography - LineHeight - Kicker */
683
- --kicker1-line-height-xs: 19.799999237060547px;
684
- --kicker1-line-height-sm: 19.799999237060547px;
685
- --kicker1-line-height-md: 22px;
686
- --kicker1-line-height-lg: 30px;
687
- --kicker2-line-height-xs: 19.799999237060547px;
688
- --kicker2-line-height-sm: 19.799999237060547px;
689
- --kicker2-line-height-md: 22px;
690
- --kicker2-line-height-lg: 24px;
691
- --kicker3-line-height-xs: 17.600000381469727px;
692
- --kicker3-line-height-sm: 17.600000381469727px;
693
- --kicker3-line-height-md: 18px;
694
- --kicker3-line-height-lg: 20px;
695
- --kicker4-line-height-xs: 15.399999618530273px;
696
- --kicker4-line-height-sm: 15.399999618530273px;
697
- --kicker4-line-height-md: 17.600000381469727px;
698
- --kicker4-line-height-lg: 16px;
655
+ /* Component - Breadcrumb - FontWeight */
656
+ /**
657
+ * --breadcrumb-font-size-sm
658
+ */
659
+ --breadcrumb-font-weight: 700;
699
660
 
700
- /* Global - Typography - LineHeight - Label */
661
+ /* Component - Menu */
701
662
  /**
702
- * Bild 17 | SpoBi 20.4 | Ads 20.4 | The label 1 text style uses this variable for its line height parameter.
663
+ * --nav-btn-font-size
703
664
  */
704
- --label1-line-height: 17px;
665
+ --menu-item-font-size: 15px;
705
666
  /**
706
- * Bild 10 | SpoBi 12 | Ads 10 | The label1 responsive text style uses this variable for its line height parameter.
667
+ * --caption-1-font-size-md
707
668
  */
708
- --label1-resp-line-height-xs: 10px;
669
+ --app-top-bar-title-font-size-md: 14px;
709
670
  /**
710
- * Bild 10 | SpoBi 12 | Ads 10 | The label1 responsive text style uses this variable for its line height parameter.
671
+ * --caption-1-font-size-lg
711
672
  */
712
- --label1-resp-line-height-sm: 10px;
673
+ --app-top-bar-title-font-size-lg: 14px;
713
674
  /**
714
- * Bild 15 | SpoBi 18 | Ads 15 | The label1 responsive text style uses this variable for its line height parameter.
675
+ * --caption-1-font-size-sm
715
676
  */
716
- --label1-resp-line-height-md: 15px;
677
+ --app-top-bar-title-font-size-xs: 12px;
717
678
  /**
718
- * Bild 17 | SpoBi 20.4 | Ads 17 | The label1 responsive text style uses this variable for its line height parameter.
679
+ * --caption-1-font-size-sm
719
680
  */
720
- --label1-resp-line-height-lg: 17px;
681
+ --app-top-bar-title-font-size-sm: 12px;
682
+ --app-top-bar-title-line-height-md: 17px;
683
+ --app-top-bar-title-line-height-lg: 17px;
684
+ --app-top-bar-title-line-height-xs: 14px;
685
+ --app-top-bar-title-line-height-sm: 14px;
686
+ --menu-item-font-weight: 700;
687
+
688
+ /* Component - Teaser */
721
689
  /**
722
- * Bild 16 | SpoBi 19.2 | Ads 16 | The label 2 text style uses this variable for its line height parameter.
690
+ * --teaser-title-padding-lg
723
691
  */
724
- --label2-line-height: 16px;
692
+ --teaser-title-inline-space-lg: 12px;
725
693
  /**
726
- * Bild 14.4 | SpoBi 14.4 | Ads 14.4 | The label 3 text style uses this variable for its line height parameter.
694
+ * --teaser-title-padding-md
727
695
  */
728
- --label3-line-height: 14.399999618530273px;
696
+ --teaser-title-inline-space-md: 12px;
729
697
  /**
730
- * Bild 10 | SpoBi 10 | Ads 10 | The label 4 text style uses this variable for its line height parameter.
698
+ * --teaser-title-padding-sm
731
699
  */
732
- --label4-line-height: 10px;
700
+ --teaser-title-inline-space-sm: 8px;
701
+ /**
702
+ * --teaser-title-padding-xs
703
+ */
704
+ --teaser-title-inline-space-xs: 8px;
733
705
 
734
- /* Global - Typography - LineHeight - Quote */
735
- --quote-line-height-xs: 16px;
736
- --quote-line-height-sm: 16px;
737
- --quote-line-height-md: 18px;
738
- --quote-line-height-lg: 22px;
706
+ /* Component - Teaser - Quad */
707
+ --q-teaser-title-inline-space-lg: 12px;
708
+ --q-teaser-title-inline-space-md: 16px;
709
+ --q-teaser-title-inline-space-sm: 8px;
710
+ --q-teaser-title-inline-space-xs: 8px;
739
711
 
740
- /* Global - Typography - LineHeight - Subheadline */
741
- --subheadline1-line-height-xs: 24px;
742
- --subheadline1-line-height-sm: 24px;
743
- --subheadline1-line-height-md: 32px;
744
- --subheadline1-line-height-lg: 36px;
712
+ /* Component - Teaser - aTeaser */
713
+ --a-teaser-title-inline-space-lg: 12px;
714
+ --a-teaser-title-inline-space-md: 12px;
715
+ --a-teaser-title-inline-space-xs: 8px;
716
+ --a-teaser-title-inline-space-sm: 8px;
745
717
 
746
- /* Global - Typography - LineHeight - Title */
747
- --title1-line-height-xs: 22px;
748
- --title1-line-height-sm: 22px;
749
- --title1-line-height-md: 22px;
750
- --title1-line-height-lg: 28px;
751
- --title2-line-height-xs: 17.600000381469727px;
752
- --title2-line-height-sm: 17.600000381469727px;
753
- --title2-line-height-md: 19.799999237060547px;
754
- --title2-line-height-lg: 22px;
718
+ /* Component - Teaser - bTeaser */
719
+ --b-teaser-title-inline-space: 8px;
755
720
 
756
- /* Global - Visibilty */
757
- --hide-on-bild: false;
758
- --hide-on-sport-bild: true;
759
- --only-advertorial: false;
760
- --hide-on-advertorial: true;
761
- --only-bild: true;
762
- --only-sport-bild: false;
721
+ /* Component - Teaser - 2xaTeaser */
722
+ --2xa-teaser-title-inline-space: 8px;
723
+
724
+ /* Component - Teaser - miniQ */
725
+ --mini-qteaser-title-inline-space-md: 8px;
726
+ --mini-qteaser-title-inline-space-lg: 8px;
727
+ --mini-qteaser-title-inline-space-sm: 8px;
728
+ --mini-qteaser-title-inline-space-xs: 8px;
729
+
730
+ /* Component - Teaser - superA */
731
+ --super-ateaser-title-inline-space: 16px;
732
+
733
+ /* Component - Avatar */
734
+ /**
735
+ * current css 09-2025 --article-author-font // Bild: GothamXNarrow; SpoBi: Inter; Ads: LucidaGrande
736
+ */
737
+ --avatar-font-family: Gotham XNarrow;
738
+ /**
739
+ * 09-2025 css using footnote var for font sizes SM & LG // Bild: 16; SpoBi: 13; Ads: 13
740
+ */
741
+ --avatar-font-size-sm: 16px;
742
+ /**
743
+ * 09-2025 css using footnote var for font sizes SM & LG // Bild: 18; SpoBi: 15; Ads: 15
744
+ */
745
+ --avatar-font-size-lg: 18px;
746
+
747
+ /* Component - BreakingNews */
748
+ --breaking-news-content-font-size: 21px;
749
+
750
+ /* Component - Accordion */
751
+ --accordion-label-font-family: Gotham XNarrow;
752
+
753
+ /* Component - Footer */
754
+ --footer-link-font-family: Gotham XNarrow;
755
+
756
+ /* Component - MediaPlayer */
757
+ --video-time-badge-font-family: Gotham XNarrow;
758
+
759
+ /* Component - Inputfield */
760
+ --input-field-label-font-family: Gotham XNarrow;
761
+
762
+ --button-label-font-weight-st: 600;
763
763
 
764
764
 
765
765
  /* ============================================