@marioschmidt/design-system-components 1.0.79 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (197) hide show
  1. package/dist/bds/bds.css +1 -1
  2. package/dist/bds/bds.esm.js +1 -1
  3. package/dist/bds/{p-30a9c996.entry.js → p-67bc59c5.entry.js} +2 -2
  4. package/dist/bds/p-Wtf1fKUK.js +3 -0
  5. package/dist/bds/p-Wtf1fKUK.js.map +1 -0
  6. package/dist/cjs/bds.cjs.js +1 -1
  7. package/dist/cjs/ds-button_2.cjs.entry.js +1 -1
  8. package/dist/cjs/index-B0IsCEmC.js +1398 -0
  9. package/dist/cjs/index-B0IsCEmC.js.map +1 -0
  10. package/dist/cjs/loader.cjs.js +1 -1
  11. package/dist/components/index.js +1 -1
  12. package/dist/components/index.js.map +1 -1
  13. package/dist/esm/bds.js +2 -2
  14. package/dist/esm/ds-button_2.entry.js +1 -1
  15. package/dist/esm/index-Wtf1fKUK.js +1391 -0
  16. package/dist/esm/index-Wtf1fKUK.js.map +1 -0
  17. package/dist/esm/loader.js +2 -2
  18. package/dist/www/build/bds.css +1 -1
  19. package/dist/www/build/bds.esm.js +1 -1
  20. package/dist/www/build/p-444f99b6.css +1 -0
  21. package/dist/www/build/{p-30a9c996.entry.js → p-67bc59c5.entry.js} +2 -2
  22. package/dist/www/build/p-Wtf1fKUK.js +3 -0
  23. package/dist/www/build/p-Wtf1fKUK.js.map +1 -0
  24. package/dist/www/css/README.md +74 -1
  25. package/dist/www/css/advertorial/components/_dsysdocs.css +10 -3
  26. package/dist/www/css/advertorial/components/article.css +17 -51
  27. package/dist/www/css/advertorial/components/audioplayer.css +2 -2
  28. package/dist/www/css/advertorial/components/avatar.css +3 -37
  29. package/dist/www/css/advertorial/components/badge.css +3 -11
  30. package/dist/www/css/advertorial/components/breadcrumb.css +6 -24
  31. package/dist/www/css/advertorial/components/breakingnews.css +2 -18
  32. package/dist/www/css/advertorial/components/button.css +7 -11
  33. package/dist/www/css/advertorial/components/card.css +2 -2
  34. package/dist/www/css/advertorial/components/carousel.css +2 -2
  35. package/dist/www/css/advertorial/components/chip.css +2 -2
  36. package/dist/www/css/advertorial/components/datepicker.css +4 -4
  37. package/dist/www/css/advertorial/components/drawers.css +2 -2
  38. package/dist/www/css/advertorial/components/dropdown.css +2 -2
  39. package/dist/www/css/advertorial/components/footer.css +6 -30
  40. package/dist/www/css/advertorial/components/icon.css +2 -2
  41. package/dist/www/css/advertorial/components/iconbutton.css +53 -0
  42. package/dist/www/css/advertorial/components/infoelement.css +2 -2
  43. package/dist/www/css/advertorial/components/inputfield.css +13 -8
  44. package/dist/www/css/advertorial/components/liveticker.css +2 -10
  45. package/dist/www/css/advertorial/components/mediaplayer.css +4 -20
  46. package/dist/www/css/advertorial/components/menu.css +6 -33
  47. package/dist/www/css/advertorial/components/newsticker.css +2 -18
  48. package/dist/www/css/advertorial/components/pagination.css +3 -3
  49. package/dist/www/css/advertorial/components/paywall.css +3 -12
  50. package/dist/www/css/advertorial/components/quote.css +2 -2
  51. package/dist/www/css/advertorial/components/radiobutton.css +2 -2
  52. package/dist/www/css/advertorial/components/search.css +2 -2
  53. package/dist/www/css/advertorial/components/sectiontitle.css +2 -2
  54. package/dist/www/css/advertorial/components/separator.css +2 -2
  55. package/dist/www/css/advertorial/components/skeletons.css +2 -2
  56. package/dist/www/css/advertorial/components/slider.css +2 -2
  57. package/dist/www/css/advertorial/components/specialnavi.css +2 -2
  58. package/dist/www/css/advertorial/components/spinner.css +2 -2
  59. package/dist/www/css/advertorial/components/tab.css +2 -18
  60. package/dist/www/css/advertorial/components/table.css +2 -2
  61. package/dist/www/css/advertorial/components/teaser.css +2 -42
  62. package/dist/www/css/advertorial/components/toggleswitch.css +2 -2
  63. package/dist/www/css/advertorial/components/video.css +2 -2
  64. package/dist/www/css/advertorial/theme.css +2 -2
  65. package/dist/www/css/advertorial/tokens.css +197 -336
  66. package/dist/www/css/bild/components/_dsysdoc.css +2 -6
  67. package/dist/www/css/bild/components/_dsysdocs.css +10 -3
  68. package/dist/www/css/bild/components/alert.css +2 -8
  69. package/dist/www/css/bild/components/article.css +17 -51
  70. package/dist/www/css/bild/components/audioplayer.css +2 -2
  71. package/dist/www/css/bild/components/avatar.css +12 -51
  72. package/dist/www/css/bild/components/badge.css +3 -11
  73. package/dist/www/css/bild/components/breadcrumb.css +14 -50
  74. package/dist/www/css/bild/components/breakingnews.css +11 -27
  75. package/dist/www/css/bild/components/button.css +37 -58
  76. package/dist/www/css/bild/components/card.css +4 -4
  77. package/dist/www/css/bild/components/carousel.css +2 -2
  78. package/dist/www/css/bild/components/chip.css +16 -22
  79. package/dist/www/css/bild/components/datepicker.css +4 -4
  80. package/dist/www/css/bild/components/drawers.css +2 -2
  81. package/dist/www/css/bild/components/dropdown.css +6 -6
  82. package/dist/www/css/bild/components/empties.css +6 -6
  83. package/dist/www/css/bild/components/footer.css +6 -30
  84. package/dist/www/css/bild/components/gallery.css +2 -2
  85. package/dist/www/css/bild/components/icon.css +2 -2
  86. package/dist/www/css/bild/components/iconbutton.css +53 -0
  87. package/dist/www/css/bild/components/infoelement.css +2 -2
  88. package/dist/www/css/bild/components/inputfield.css +16 -33
  89. package/dist/www/css/bild/components/kicker.css +6 -6
  90. package/dist/www/css/bild/components/liveticker.css +2 -10
  91. package/dist/www/css/bild/components/mediaplayer.css +26 -40
  92. package/dist/www/css/bild/components/menu.css +18 -46
  93. package/dist/www/css/bild/components/menuitem.css +8 -29
  94. package/dist/www/css/bild/components/newsticker.css +4 -20
  95. package/dist/www/css/bild/components/pagination.css +9 -10
  96. package/dist/www/css/bild/components/partnerlinks.css +12 -20
  97. package/dist/www/css/bild/components/paywall.css +3 -12
  98. package/dist/www/css/bild/components/quote.css +2 -2
  99. package/dist/www/css/bild/components/radiobutton.css +2 -2
  100. package/dist/www/css/bild/components/search.css +2 -2
  101. package/dist/www/css/bild/components/sectiontitle.css +2 -2
  102. package/dist/www/css/bild/components/selection.css +6 -23
  103. package/dist/www/css/bild/components/separator.css +2 -2
  104. package/dist/www/css/bild/components/skeletons.css +2 -2
  105. package/dist/www/css/bild/components/slider.css +4 -4
  106. package/dist/www/css/bild/components/specialnavi.css +2 -2
  107. package/dist/www/css/bild/components/spinner.css +2 -2
  108. package/dist/www/css/bild/components/subheader.css +3 -3
  109. package/dist/www/css/bild/components/tab.css +2 -24
  110. package/dist/www/css/bild/components/table.css +2 -2
  111. package/dist/www/css/bild/components/teaser.css +6 -46
  112. package/dist/www/css/bild/components/toggleswitch.css +2 -2
  113. package/dist/www/css/bild/components/video.css +2 -2
  114. package/dist/www/css/bild/theme.css +319 -209
  115. package/dist/www/css/bild/tokens.css +197 -336
  116. package/dist/www/css/bundles/advertorial.css +380 -706
  117. package/dist/www/css/bundles/bild.css +839 -1291
  118. package/dist/www/css/bundles/sportbild.css +846 -1311
  119. package/dist/www/css/shared/colorprimitive.css +91 -47
  120. package/dist/www/css/shared/fontprimitive.css +4 -2
  121. package/dist/www/css/shared/primitives.css +94 -47
  122. package/dist/www/css/shared/sizeprimitive.css +3 -2
  123. package/dist/www/css/shared/spaceprimitive.css +2 -2
  124. package/dist/www/css/sportbild/components/_dsysdoc.css +2 -6
  125. package/dist/www/css/sportbild/components/_dsysdocs.css +10 -3
  126. package/dist/www/css/sportbild/components/alert.css +2 -8
  127. package/dist/www/css/sportbild/components/article.css +17 -52
  128. package/dist/www/css/sportbild/components/audioplayer.css +2 -2
  129. package/dist/www/css/sportbild/components/avatar.css +12 -51
  130. package/dist/www/css/sportbild/components/badge.css +3 -11
  131. package/dist/www/css/sportbild/components/breadcrumb.css +14 -50
  132. package/dist/www/css/sportbild/components/breakingnews.css +6 -22
  133. package/dist/www/css/sportbild/components/button.css +37 -58
  134. package/dist/www/css/sportbild/components/card.css +4 -4
  135. package/dist/www/css/sportbild/components/carousel.css +2 -2
  136. package/dist/www/css/sportbild/components/chip.css +16 -22
  137. package/dist/www/css/sportbild/components/datepicker.css +4 -4
  138. package/dist/www/css/sportbild/components/drawers.css +2 -2
  139. package/dist/www/css/sportbild/components/dropdown.css +6 -6
  140. package/dist/www/css/sportbild/components/empties.css +6 -6
  141. package/dist/www/css/sportbild/components/footer.css +6 -30
  142. package/dist/www/css/sportbild/components/gallery.css +2 -2
  143. package/dist/www/css/sportbild/components/icon.css +2 -2
  144. package/dist/www/css/sportbild/components/iconbutton.css +53 -0
  145. package/dist/www/css/sportbild/components/infoelement.css +2 -2
  146. package/dist/www/css/sportbild/components/inputfield.css +16 -33
  147. package/dist/www/css/sportbild/components/kicker.css +6 -6
  148. package/dist/www/css/sportbild/components/liveticker.css +2 -10
  149. package/dist/www/css/sportbild/components/mediaplayer.css +26 -40
  150. package/dist/www/css/sportbild/components/menu.css +23 -53
  151. package/dist/www/css/sportbild/components/menuitem.css +8 -29
  152. package/dist/www/css/sportbild/components/newsticker.css +4 -21
  153. package/dist/www/css/sportbild/components/pagination.css +9 -10
  154. package/dist/www/css/sportbild/components/partnerlinks.css +12 -20
  155. package/dist/www/css/sportbild/components/paywall.css +3 -12
  156. package/dist/www/css/sportbild/components/quote.css +2 -2
  157. package/dist/www/css/sportbild/components/radiobutton.css +2 -2
  158. package/dist/www/css/sportbild/components/search.css +2 -2
  159. package/dist/www/css/sportbild/components/sectiontitle.css +2 -2
  160. package/dist/www/css/sportbild/components/selection.css +6 -23
  161. package/dist/www/css/sportbild/components/separator.css +2 -2
  162. package/dist/www/css/sportbild/components/skeletons.css +2 -2
  163. package/dist/www/css/sportbild/components/slider.css +4 -4
  164. package/dist/www/css/sportbild/components/specialnavi.css +2 -2
  165. package/dist/www/css/sportbild/components/spinner.css +2 -2
  166. package/dist/www/css/sportbild/components/subheader.css +3 -3
  167. package/dist/www/css/sportbild/components/tab.css +3 -25
  168. package/dist/www/css/sportbild/components/table.css +2 -2
  169. package/dist/www/css/sportbild/components/teaser.css +6 -51
  170. package/dist/www/css/sportbild/components/toggleswitch.css +2 -2
  171. package/dist/www/css/sportbild/components/video.css +2 -2
  172. package/dist/www/css/sportbild/theme.css +319 -209
  173. package/dist/www/css/sportbild/tokens.css +203 -346
  174. package/dist/www/index.html +1 -1
  175. package/package.json +1 -1
  176. package/dist/bds/p-V1LdMos7.js +0 -3
  177. package/dist/bds/p-V1LdMos7.js.map +0 -1
  178. package/dist/cjs/index-CrklIrqc.js +0 -1398
  179. package/dist/cjs/index-CrklIrqc.js.map +0 -1
  180. package/dist/esm/index-V1LdMos7.js +0 -1391
  181. package/dist/esm/index-V1LdMos7.js.map +0 -1
  182. package/dist/www/build/p-44d36d19.css +0 -1
  183. package/dist/www/build/p-V1LdMos7.js +0 -3
  184. package/dist/www/build/p-V1LdMos7.js.map +0 -1
  185. package/dist/www/css/advertorial/components/accordion.css +0 -29
  186. package/dist/www/css/bild/components/accordion.css +0 -29
  187. package/dist/www/css/bild/components/foldout.css +0 -34
  188. package/dist/www/css/bild/components/hey.css +0 -45
  189. package/dist/www/css/bild/components/socialsharebutton.css +0 -43
  190. package/dist/www/css/bild/components/textlink.css +0 -36
  191. package/dist/www/css/sportbild/components/accordion.css +0 -29
  192. package/dist/www/css/sportbild/components/foldout.css +0 -34
  193. package/dist/www/css/sportbild/components/hey.css +0 -45
  194. package/dist/www/css/sportbild/components/socialsharebutton.css +0 -43
  195. package/dist/www/css/sportbild/components/textlink.css +0 -36
  196. /package/dist/bds/{p-30a9c996.entry.js.map → p-67bc59c5.entry.js.map} +0 -0
  197. /package/dist/www/build/{p-30a9c996.entry.js.map → p-67bc59c5.entry.js.map} +0 -0
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  *
4
- * BILD Design System Tokens v1.0.79
4
+ * BILD Design System Tokens v1.2.0
5
5
  * Generated by Style Dictionary v4.2.0
6
6
  *
7
7
  * Brand: Bild | Bundle: Full Bundle (Primitives + Theme + Tokens + Components)
8
8
  *
9
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
9
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
10
10
  * Proprietary and confidential. All rights reserved.
11
11
  *
12
12
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -26,14 +26,21 @@
26
26
 
27
27
  /* BILD - red */
28
28
  --color-bild-red-50: #DD0000;
29
- --color-bild-red-35: #AF0002;
30
- --color-bild-red-53: #F52D2D;
29
+ --color-bild-red-40: #C10000;
30
+ --color-bild-red-60: #F75849;
31
+ --color-bild-red-10: #410000;
32
+ --color-bild-red-90: #FFDADA;
33
+ --color-bild-red-20: #680000;
34
+ --color-bild-red-30: #930000;
35
+ --color-bild-red-80: #FFB2B2;
36
+ --color-bild-red-95: #FFECEC;
37
+ --color-bild-red-70: #FF8989;
31
38
 
32
39
  /* BILD - purple */
33
40
  --color-bild-purple-20: #551937;
34
41
 
35
42
  /* BILD - alpha */
36
- --alpha-red-50-a-80: rgba(221, 0, 0, 0.8);
43
+ --color-bild-red-50-a-80: rgba(221, 0, 0, 0.8);
37
44
 
38
45
 
39
46
  /* ============================================
@@ -41,55 +48,82 @@
41
48
  ============================================ */
42
49
 
43
50
  /* Shared - neutral */
44
- --color-neutral-15: #232629;
51
+ --color-neutral-15: #222628;
45
52
  --color-neutral-100: #FFFFFF;
46
- --color-neutral-85: #CED4DA;
47
- --color-neutral-35: #4B525A;
53
+ --color-neutral-80: #C4C9CF;
54
+ --color-neutral-30: #40464D;
48
55
  --color-neutral-25: #343C41;
49
56
  --color-neutral-60: #8C9196;
50
- --color-neutral-96: #F2F4F5;
51
- --color-neutral-93: #E9ECEF;
52
- --color-neutral-73: #AEB4B9;
53
- --color-neutral-45: #666B70;
54
- --color-neutral-10: #1C1C1C;
55
- --color-neutral-20: #2C3138;
57
+ --color-neutral-95: #F2F4F5;
58
+ --color-neutral-90: #DDE1E2;
59
+ --color-neutral-70: #A6ABB0;
60
+ --color-neutral-40: #565A5F;
61
+ --color-neutral-10: #191B1C;
62
+ --color-neutral-20: #2C3133;
56
63
  --color-neutral-0: #000000;
64
+ --color-neutral-50: #6E787C;
57
65
 
58
66
  /* Shared - orange */
59
- --color-orange-67: #FD8227;
67
+ --color-orange-70: #FD8227;
68
+ --color-orange-30: #763301;
69
+ --color-orange-40: #9E4401;
70
+ --color-orange-50: #C65502;
71
+ --color-orange-80: #FEB782;
72
+ --color-orange-90: #FEDBC1;
73
+ --color-orange-95: #FFEDDF;
74
+ --color-orange-60: #EF6702;
75
+ --color-orange-20: #522301;
76
+ --color-orange-10: #2F1400;
60
77
 
61
78
  /* Shared - green */
62
79
  --color-green-70: #00C373;
63
- --color-green-63: #00AF67;
64
- --color-green-93: #CEF4E4;
80
+ --color-green-90: #B9EFCD;
65
81
  --color-green-40: #006E3E;
66
- --color-green-56: #18995C;
82
+ --color-green-60: #00AF67;
83
+ --color-green-10: #052013;
84
+ --color-green-30: #0D5232;
85
+ --color-green-20: #093822;
86
+ --color-green-50: #158751;
87
+ --color-green-95: #DEF7E6;
88
+ --color-green-80: #76DA9F;
67
89
 
68
90
  /* Shared - yellow */
69
91
  --color-yellow-80: #FFBF00;
92
+ --color-yellow-70: #D9A200;
93
+ --color-yellow-90: #FFE082;
94
+ --color-yellow-95: #FFF0C2;
95
+ --color-yellow-10: #241B00;
96
+ --color-yellow-20: #3D2E00;
97
+ --color-yellow-30: #594300;
98
+ --color-yellow-40: #785A00;
99
+ --color-yellow-50: #967100;
100
+ --color-yellow-60: #B88A00;
70
101
 
71
102
  /* Shared - alpha */
72
- --alpha-neutral-85-a-50: rgba(206, 212, 218, 0.5);
73
- --alpha-green-93-a-50: rgba(206, 244, 228, 0.5);
74
- --color-green-56-a-50: rgba(0, 155, 90, 0.5);
75
- --alpha-black-20: rgba(0, 0, 0, 0.2);
76
- --alpha-black-10: rgba(0, 0, 0, 0.1);
77
- --alpha-black-60: rgba(0, 0, 0, 0.6);
78
- --alpha-black-30: rgba(0, 0, 0, 0.3);
79
- --alpha-black-70: rgba(0, 0, 0, 0.7);
80
- --alpha-white-10: rgba(255, 255, 255, 0.1);
81
- --alpha-white-20: rgba(255, 255, 255, 0.2);
82
- --alpha-white-30: rgba(255, 255, 255, 0.3);
83
- --alpha-white-60: rgba(255, 255, 255, 0.6);
84
- --alpha-white-70: rgba(255, 255, 255, 0.7);
85
- --alpha-white-35: rgba(255, 255, 255, 0.35);
86
- --alpha-black-80: rgba(0, 0, 0, 0.8);
87
- --alpha-white-80: rgba(255, 255, 255, 0.8);
88
- --alpha-black-35: rgba(0, 0, 0, 0.35);
89
- --alpha-black-0: rgba(0, 0, 0, 0);
90
- --alpha-black-50: rgba(0, 0, 0, 0.5);
91
- --alpha-black-5: rgba(0, 0, 0, 0.05);
92
- --alpha-white-0: rgba(255, 255, 255, 0);
103
+ --color-neutral-0-a-20: rgba(0, 0, 0, 0.2);
104
+ --color-neutral-0-a-10: rgba(0, 0, 0, 0.1);
105
+ --color-neutral-0-a-60: rgba(0, 0, 0, 0.6);
106
+ --color-neutral-0-a-30: rgba(0, 0, 0, 0.3);
107
+ --color-neutral-0-a-70: rgba(0, 0, 0, 0.7);
108
+ --color-neutral-100-a-10: rgba(255, 255, 255, 0.1);
109
+ --color-neutral-100-a-20: rgba(255, 255, 255, 0.2);
110
+ --color-neutral-100-a-30: rgba(255, 255, 255, 0.3);
111
+ --color-neutral-100-a-60: rgba(255, 255, 255, 0.6);
112
+ --color-neutral-100-a-70: rgba(255, 255, 255, 0.7);
113
+ --color-neutral-100-a-35: rgba(255, 255, 255, 0.35);
114
+ --color-neutral-0-a-80: rgba(0, 0, 0, 0.8);
115
+ --color-neutral-100-a-80: rgba(255, 255, 255, 0.8);
116
+ --color-neutral-0-a-35: rgba(0, 0, 0, 0.35);
117
+ --color-neutral-0-a-0: rgba(0, 0, 0, 0);
118
+ --color-neutral-0-a-50: rgba(0, 0, 0, 0.5);
119
+ --color-neutral-0-a-5: rgba(0, 0, 0, 0.05);
120
+ --color-neutral-100-a-0: rgba(255, 255, 255, 0);
121
+ --color-neutral-100-a-95: rgba(255, 255, 255, 0.95);
122
+ --color-neutral-15-a-0: rgba(34, 38, 40, 0);
123
+ --color-neutral-95-a-0: rgba(242, 244, 245, 0);
124
+ --color-neutral-20-a-0: rgba(44, 49, 51, 0);
125
+ --color-neutral-25-a-0: rgba(52, 60, 65, 0);
126
+ --color-neutral-90-a-0: rgba(221, 225, 226, 0);
93
127
 
94
128
 
95
129
  /* ============================================
@@ -112,19 +146,29 @@
112
146
  ============================================ */
113
147
 
114
148
  /* SportBILD - blue */
115
- --color-spobi-blue-98: #F7F9FD;
116
- --color-spobi-blue-81: #BDCADB;
117
- --color-spobi-blue-29: #174482;
118
- --color-spobi-blue-16: #0A2750;
119
- --color-spobi-blue-10: #081828;
120
- --color-spobi-blue-38: #315998;
149
+ --color-spobi-blue-95: #EFF1F5;
150
+ --color-spobi-blue-80: #C3C9DB;
151
+ --color-spobi-blue-30: #174482;
152
+ --color-spobi-blue-20: #0C2F61;
153
+ --color-spobi-blue-10: #091C2E;
154
+ --color-spobi-blue-40: #345EA0;
155
+ --color-spobi-blue-50: #4676C3;
156
+ --color-spobi-blue-70: #8FACDB;
157
+ --color-spobi-blue-60: #6A91CF;
158
+ --color-spobi-blue-90: #D6E1F2;
159
+ --color-spobi-blue-15: #0B2647;
160
+ --color-spobi-blue-25: #113B72;
121
161
 
122
162
  /* SportBILD - red */
123
163
  --color-spobi-red-50: #E52528;
124
164
 
125
165
  /* SportBILD - alpha */
126
- --color-spobi-blue-16-a-0: rgba(10, 39, 80, 0);
127
- --color-spobi-blue-16-a-70: rgba(10, 39, 80, 0.7);
166
+ --color-spobi-blue-15-a-0: rgba(11, 38, 71, 0);
167
+ --color-spobi-blue-15-a-70: rgba(11, 38, 71, 0.7);
168
+ --color-spobi-blue-95-a-0: rgba(239, 241, 245, 0);
169
+ --color-spobi-blue-20-a-0: rgba(12, 47, 97, 0);
170
+ --color-spobi-blue-90-a-0: rgba(214, 225, 242, 0);
171
+ --color-spobi-blue-25-a-0: rgba(17, 59, 114, 0);
128
172
 
129
173
 
130
174
  /* ============================================
@@ -218,6 +262,8 @@
218
262
  --st-font-weight-thin: 100;
219
263
  --st-font-weight-bold-italic: 700;
220
264
  --st-font-weight-black-italic: 900;
265
+ --st-font-weight-st-book-italic: 400;
266
+ --st-font-weight-light-italic-st: 300;
221
267
 
222
268
  }
223
269
 
@@ -278,6 +324,7 @@
278
324
  --size-100-x: 800px;
279
325
  --size-0-x: 0px;
280
326
  --size-0-p-125-x: 1px;
327
+ --size-5-p-5-x: 44px;
281
328
 
282
329
  }
283
330
 
@@ -331,99 +378,162 @@
331
378
  SEMANTIC
332
379
  ============================================ */
333
380
 
334
- /* Semantic - Text */
335
- --text-color-accent-constant: var(--color-bild-red-50, #DD0000);
336
- --text-color-primary: var(--color-neutral-15, #232629);
337
- --text-color-muted: var(--color-neutral-45, #666B70);
338
- --text-color-primary-inverse: var(--color-neutral-93, #E9ECEF);
339
- --text-color-primary-constant: var(--color-neutral-15, #232629);
340
- --text-color-success-constant: var(--color-green-40, #006E3E);
341
- --text-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
342
- --text-color-secondary: var(--color-neutral-60, #8C9196);
343
- --text-color-attention-high: var(--color-bild-red-50, #DD0000);
344
- --text-color-accent: var(--color-bild-red-50, #DD0000);
345
- --text-color-attention-medium: var(--color-orange-67, #FD8227);
346
- --text-color-on-dark-surface: var(--color-neutral-100, #FFFFFF);
347
-
348
- /* Semantic - Surface */
349
- --surface-color-primary: var(--color-neutral-100, #FFFFFF);
350
- --surface-color-secondary: var(--color-neutral-96, #F2F4F5);
351
- --surface-color-primary-inverse: var(--color-neutral-15, #232629);
352
- --surface-color-primary-constant-light: var(--color-neutral-100, #FFFFFF);
353
- --surface-color-primary-constant-dark: var(--color-neutral-15, #232629);
354
- --surface-color-quartenary: var(--color-neutral-85, #CED4DA);
355
- --surface-color-success: var(--color-green-93, #CEF4E4);
356
- --surface-color-tertiary: var(--color-neutral-93, #E9ECEF);
357
- --surface-color-tertiary-gradient-stop: rgba(233, 236, 239, 0);
358
- --surface-color-tertiary-inverse: var(--color-neutral-25, #343C41);
359
- --surface-color-primary-gradient-stop: rgba(255, 255, 255, 0);
360
- --surface-color-secondary-gradient-stop: rgba(242, 244, 245, 0);
361
- --surface-color-quartenary-inverse: var(--color-neutral-35, #4B525A);
362
-
363
- /* Semantic - Heading */
364
- --kicker-text-color-on-surface: var(--color-bild-red-50, #DD0000);
365
- --headline-color-primary: var(--color-neutral-15, #232629);
366
- --headline-color-white-const: var(--color-neutral-100, #FFFFFF);
367
- --kicker-text-color-on-red: var(--color-neutral-100, #FFFFFF);
368
- --kicker-text-color-on-dark-bg: var(--alpha-white-80, rgba(255, 255, 255, 0.8));
369
- --kicker-text-color-on-bright-bg: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
370
-
371
- /* Semantic - State */
372
- --color-secondary-active: var(--color-neutral-15, #232629);
373
- --color-primary-active: var(--color-bild-red-50, #DD0000);
374
- --color-secondary-disabled: var(--color-neutral-93, #E9ECEF);
375
- --color-primary-disabled: var(--color-neutral-96, #F2F4F5);
376
- --color-secondary-active-inverse: var(--color-neutral-96, #F2F4F5);
377
- --color-tertiary-active: var(--color-green-70, #00C373);
378
- --color-tertiary-disabled: var(--color-neutral-60, #8C9196);
379
-
380
- /* Semantic - Border */
381
- --border-color-medium-contrast: var(--color-neutral-85, #CED4DA);
382
- --border-color-low-contrast: var(--color-neutral-93, #E9ECEF);
383
- --border-color-high-contrast: var(--color-neutral-15, #232629);
384
- --border-color-low-contrast-constant: var(--color-neutral-93, #E9ECEF);
385
- --border-color-success: var(--color-green-70, #00C373);
386
- --border-color-warning: var(--color-bild-red-50, #DD0000);
387
- --border-color-primary-disabled: var(--color-neutral-96, #F2F4F5);
388
- --border-color-secondary-disabled: var(--color-neutral-93, #E9ECEF);
389
-
390
- /* Semantic - Core */
391
- --core-color-primary: var(--color-bild-red-50, #DD0000);
392
- --core-color-secondary: var(--color-neutral-100, #FFFFFF);
393
- --core-color-tertiary: var(--color-neutral-15, #232629);
394
- --core-color-secondary-constant: var(--color-neutral-100, #FFFFFF);
395
- --core-color-tertiary-constant: var(--color-neutral-15, #232629);
396
-
397
- /* Semantic - Icon */
398
- --icon-color-primary: var(--color-neutral-35, #4B525A);
399
- --icon-color-inverse: var(--color-neutral-85, #CED4DA);
400
- --icon-color-secondary-constant: var(--color-neutral-60, #8C9196);
401
- --icon-color-constant-on-dark: var(--color-neutral-96, #F2F4F5);
402
- --icon-color-primary-constant: var(--color-neutral-35, #4B525A);
403
- --icon-color-success: var(--color-green-70, #00C373);
404
-
405
- /* Semantic - Label */
406
- --label-color-primary: var(--color-neutral-15, #232629);
407
- --label-color-secondary: var(--color-neutral-35, #4B525A);
408
- --label-color-disabled: var(--color-neutral-85, #CED4DA);
409
- --label-color-primary-constant: var(--color-neutral-15, #232629);
410
- --label-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
411
- --label-color-tertiary: var(--color-neutral-60, #8C9196);
412
- --label-color-primary-inverse: var(--color-neutral-93, #E9ECEF);
413
-
414
- /* Semantic - Attention */
415
- --attention-color-high: var(--color-bild-red-50, #DD0000);
416
- --accent-color-primary: var(--color-bild-red-50, #DD0000);
417
- --attention-color-medium: var(--color-orange-67, #FD8227);
418
- --attention-color-low: var(--color-yellow-80, #FFBF00);
419
- --accent-color-primary-constant: var(--color-bild-red-50, #DD0000);
420
- --attention-color-success-primary: var(--color-green-70, #00C373);
421
- --attention-color-extra-low: var(--color-neutral-100, #FFFFFF);
422
- --attention-color-success-secondary: var(--color-green-40, #006E3E);
423
-
424
- /* Semantic - Overlay */
425
- --overlay-scrim-black: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
426
- --overlay-scrim-white: var(--alpha-white-70, rgba(255, 255, 255, 0.7));
381
+ /* Semantic - Text - Brand */
382
+ --text-color-brand: var(--color-bild-red-50, #DD0000);
383
+ --text-color-brand-light-only: var(--color-bild-red-50, #DD0000);
384
+
385
+ /* Semantic - Text - Standard */
386
+ --text-color-primary: var(--color-neutral-15, #222628);
387
+ --text-color-secondary: var(--color-neutral-40, #565A5F);
388
+ --text-color-tertiary: var(--color-neutral-50, #6E787C);
389
+
390
+ /* Semantic - Text - Heading */
391
+ --kicker-text-color: var(--color-bild-red-50, #DD0000);
392
+ --headline-text-color: var(--color-neutral-15, #222628);
393
+
394
+ /* Semantic - Text - OnSolid */
395
+ --text-color-on-image: var(--color-neutral-100, #FFFFFF);
396
+ --text-color-secondary-on-dark: var(--color-neutral-90, #DDE1E2);
397
+ --text-color-primary-on-light: var(--color-neutral-15, #222628);
398
+ --kicker-text-color-on-dark: var(--color-neutral-100-a-80, rgba(255, 255, 255, 0.8));
399
+ --kicker-text-color-on-light: var(--color-neutral-0-a-70, rgba(0, 0, 0, 0.7));
400
+ --text-color-primary-on-dark: var(--color-neutral-100, #FFFFFF);
401
+
402
+ /* Semantic - Text - Interactive */
403
+ --text-color-idle: var(--color-neutral-40, #565A5F);
404
+ --text-color-disabled: var(--color-neutral-70, #A6ABB0);
405
+ --text-color-hover: var(--color-neutral-15, #222628);
406
+ --text-color-active: var(--color-neutral-15, #222628);
407
+
408
+ /* Semantic - Text - Inverse */
409
+ --text-color-primary-inverse: var(--color-neutral-90, #DDE1E2);
410
+ --text-color-secondary-inverse: var(--color-neutral-70, #A6ABB0);
411
+ --text-color-inverse-high-contrast: var(--color-neutral-100, #FFFFFF);
412
+
413
+ /* Semantic - Text - Feedback */
414
+ --text-color-success: var(--color-green-40, #006E3E);
415
+ --text-color-error: var(--color-bild-red-40, #C10000);
416
+ --text-color-warning: var(--color-orange-40, #9E4401);
417
+
418
+ /* Semantic - Background - Standard */
419
+ --bg-color-primary: var(--color-neutral-100, #FFFFFF);
420
+ --bg-color-disabled: var(--color-neutral-95, #F2F4F5);
421
+ --bg-color-secondary: var(--color-neutral-95, #F2F4F5);
422
+ --bg-color-primary-const-dark: var(--color-neutral-15, #222628);
423
+ --bg-color-quaternary: var(--color-neutral-80, #C4C9CF);
424
+ --bg-color-tertiary: var(--color-neutral-90, #DDE1E2);
425
+ --bg-color-primary-const-light: var(--color-neutral-100, #FFFFFF);
426
+ --bg-color-quintenary: var(--color-neutral-60, #8C9196);
427
+
428
+ /* Semantic - Background - Brand */
429
+ --bg-color-brand-light-only: var(--color-bild-red-50, #DD0000);
430
+ --bg-color-brand-solid: var(--color-bild-red-50, #DD0000);
431
+ --bg-color-brand-solid-hover: var(--color-bild-red-40, #C10000);
432
+ --bg-color-brand-solid-active: var(--color-bild-red-30, #930000);
433
+ --bg-color-brand-tint: var(--color-bild-red-90, #FFDADA);
434
+ --bg-color-brand-tint-hover: var(--color-bild-red-80, #FFB2B2);
435
+
436
+ /* Semantic - Background - Inverse */
437
+ --bg-color-primary-inverse: var(--color-neutral-15, #222628);
438
+ --bg-color-tertiary-inverse: var(--color-neutral-25, #343C41);
439
+ --bg-color-quaternary-inverse: var(--color-neutral-30, #40464D);
440
+ --bg-color-secondary-inverse: var(--color-neutral-20, #2C3133);
441
+ --bg-color-quintenary-inverse: var(--color-neutral-60, #8C9196);
442
+
443
+ /* Semantic - Background - Success */
444
+ --bg-color-success-tint: var(--color-green-95, #DEF7E6);
445
+ --bg-color-success-solid: var(--color-green-50, #158751);
446
+ --bg-color-success-solid-hover: var(--color-green-40, #006E3E);
447
+ --bg-color-success-tint-hover: var(--color-green-90, #B9EFCD);
448
+ --bg-color-success-solid-active: var(--color-green-30, #0D5232);
449
+
450
+ /* Semantic - Background - GradientStops */
451
+ --bg-color-tertiary-gradient-stop: var(--color-neutral-90-a-0, rgba(221, 225, 226, 0));
452
+ --bg-color-primary-gradient-stop: var(--color-neutral-100-a-0, rgba(255, 255, 255, 0));
453
+ --bg-color-secondary-gradient-stop: var(--color-neutral-95-a-0, rgba(242, 244, 245, 0));
454
+
455
+ /* Semantic - Background - Overlay */
456
+ --overlay-scrim-black-const: var(--color-neutral-0-a-70, rgba(0, 0, 0, 0.7));
457
+ --overlay-scrim-white-const: var(--color-neutral-100-a-70, rgba(255, 255, 255, 0.7));
458
+
459
+ /* Semantic - Background - Error */
460
+ --bg-color-error-tint: var(--color-bild-red-95, #FFECEC);
461
+ --bg-color-error-tint-hover: var(--color-bild-red-90, #FFDADA);
462
+ --bg-color-error-solid: var(--color-bild-red-40, #C10000);
463
+ --bg-color-error-solid-hover: var(--color-bild-red-30, #930000);
464
+
465
+ /* Semantic - Background - Warning */
466
+ --bg-color-warning-tint: var(--color-orange-95, #FFEDDF);
467
+ --bg-color-warning-tint-hover: var(--color-orange-90, #FEDBC1);
468
+ --bg-color-warning-solid: var(--color-orange-70, #FD8227);
469
+ --bg-color-warning-solid-hover: var(--color-orange-60, #EF6702);
470
+
471
+ /* Semantic - Border - Standard */
472
+ --border-color-default: var(--color-neutral-80, #C4C9CF);
473
+ --border-color-subtle: var(--color-neutral-90, #DDE1E2);
474
+ --border-color-extra-strong: var(--color-neutral-15, #222628);
475
+ --border-color-strong: var(--color-neutral-50, #6E787C);
476
+
477
+ /* Semantic - Border - OnSolid */
478
+ --border-color-subtle-on-dark: var(--color-neutral-25, #343C41);
479
+ --border-color-default-on-dark: var(--color-neutral-40, #565A5F);
480
+ --border-color-subtle-on-light: var(--color-neutral-90, #DDE1E2);
481
+ --border-color-default-on-light: var(--color-neutral-80, #C4C9CF);
482
+
483
+ /* Semantic - Border - Feedback */
484
+ --border-color-success: var(--color-green-40, #006E3E);
485
+ --border-color-error: var(--color-bild-red-50, #DD0000);
486
+ --border-color-warning: var(--color-orange-50, #C65502);
487
+
488
+ /* Semantic - Border - Interactive */
489
+ --border-color-disabled: var(--color-neutral-90, #DDE1E2);
490
+ --border-color-selected: var(--color-neutral-30, #40464D);
491
+ --border-color-active: var(--color-bild-red-50, #DD0000);
492
+ --border-color-idle: var(--color-neutral-60, #8C9196);
493
+
494
+ /* Semantic - Border - Inverse */
495
+ --border-color-default-inverse: var(--color-neutral-40, #565A5F);
496
+ --border-color-subtle-inverse: var(--color-neutral-25, #343C41);
497
+
498
+ /* Semantic - Border - Brand */
499
+ --border-color-brand: var(--color-bild-red-50, #DD0000);
500
+ --border-color-brand-light-only: var(--color-bild-red-50, #DD0000);
501
+ --border-color-brand-const: var(--color-bild-red-50, #DD0000);
502
+
503
+ /* Semantic - Border - Utilities */
504
+ --border-color-no-contrast: var(--color-neutral-100, #FFFFFF);
505
+
506
+ /* Semantic - Icon - Interactive */
507
+ --icon-color-idle: var(--color-neutral-40, #565A5F);
508
+ --icon-color-disabled: var(--color-neutral-70, #A6ABB0);
509
+ --icon-color-hover: var(--color-neutral-15, #222628);
510
+ --icon-color-active: var(--color-neutral-15, #222628);
511
+
512
+ /* Semantic - Icon - OnSolid */
513
+ --icon-color-secondary-on-light: var(--color-neutral-40, #565A5F);
514
+ --icon-color-primary-on-dark: var(--color-neutral-100, #FFFFFF);
515
+ --icon-color-secondary-on-dark: var(--color-neutral-90, #DDE1E2);
516
+ --icon-color-primary-on-light: var(--color-neutral-15, #222628);
517
+ --icon-color-const-on-image: var(--color-neutral-100, #FFFFFF);
518
+
519
+ /* Semantic - Icon - Feedback */
520
+ --icon-color-success: var(--color-green-40, #006E3E);
521
+ --icon-color-error: var(--color-bild-red-40, #C10000);
522
+ --icon-color-warning: var(--color-orange-40, #9E4401);
523
+
524
+ /* Semantic - Icon - Brand */
525
+ --icon-color-brand: var(--color-bild-red-50, #DD0000);
526
+ --icon-color-brand-light-only: var(--color-bild-red-50, #DD0000);
527
+
528
+ /* Semantic - Icon - Standard */
529
+ --icon-color-primary: var(--color-neutral-15, #222628);
530
+ --icon-color-secondary: var(--color-neutral-40, #565A5F);
531
+ --icon-color-tertiary: var(--color-neutral-50, #6E787C);
532
+
533
+ /* Semantic - Icon - Inverse */
534
+ --icon-color-primary-inverse: var(--color-neutral-90, #DDE1E2);
535
+ --icon-color-secondary-inverse: var(--color-neutral-70, #A6ABB0);
536
+ --icon-color-inverse-high-contrast: var(--color-neutral-100, #FFFFFF);
427
537
 
428
538
  /* Semantic - LayerOpacity */
429
539
  --layer-opacity-05: var(--opacity-05, 0.05);
@@ -449,99 +559,162 @@
449
559
  SEMANTIC
450
560
  ============================================ */
451
561
 
452
- /* Semantic - Text */
453
- --text-color-accent-constant: var(--color-bild-red-50, #DD0000);
454
- --text-color-primary: var(--color-neutral-93, #E9ECEF);
455
- --text-color-muted: var(--color-neutral-85, #CED4DA);
456
- --text-color-primary-inverse: var(--color-neutral-15, #232629);
457
- --text-color-primary-constant: var(--color-neutral-15, #232629);
458
- --text-color-success-constant: var(--color-green-40, #006E3E);
459
- --text-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
460
- --text-color-secondary: var(--color-neutral-60, #8C9196);
461
- --text-color-attention-high: var(--color-bild-red-50, #DD0000);
462
- --text-color-accent: var(--color-neutral-100, #FFFFFF);
463
- --text-color-attention-medium: var(--color-orange-67, #FD8227);
464
- --text-color-on-dark-surface: var(--color-neutral-100, #FFFFFF);
465
-
466
- /* Semantic - Surface */
467
- --surface-color-primary: var(--color-neutral-15, #232629);
468
- --surface-color-secondary: var(--color-neutral-20, #2C3138);
469
- --surface-color-primary-inverse: var(--color-neutral-100, #FFFFFF);
470
- --surface-color-primary-constant-light: var(--color-neutral-100, #FFFFFF);
471
- --surface-color-primary-constant-dark: var(--color-neutral-15, #232629);
472
- --surface-color-quartenary: var(--color-neutral-35, #4B525A);
473
- --surface-color-success: var(--color-green-93, #CEF4E4);
474
- --surface-color-tertiary: var(--color-neutral-25, #343C41);
475
- --surface-color-tertiary-gradient-stop: rgba(52, 60, 65, 0);
476
- --surface-color-tertiary-inverse: var(--color-neutral-93, #E9ECEF);
477
- --surface-color-primary-gradient-stop: rgba(35, 38, 41, 0);
478
- --surface-color-secondary-gradient-stop: rgba(44, 49, 56, 0);
479
- --surface-color-quartenary-inverse: var(--color-neutral-85, #CED4DA);
480
-
481
- /* Semantic - Heading */
482
- --kicker-text-color-on-surface: var(--color-neutral-60, #8C9196);
483
- --headline-color-primary: var(--color-neutral-100, #FFFFFF);
484
- --headline-color-white-const: var(--color-neutral-100, #FFFFFF);
485
- --kicker-text-color-on-red: var(--color-neutral-100, #FFFFFF);
486
- --kicker-text-color-on-dark-bg: var(--alpha-white-80, rgba(255, 255, 255, 0.8));
487
- --kicker-text-color-on-bright-bg: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
488
-
489
- /* Semantic - State */
490
- --color-secondary-active: var(--color-neutral-96, #F2F4F5);
491
- --color-primary-active: var(--color-bild-red-50, #DD0000);
492
- --color-secondary-disabled: var(--color-neutral-35, #4B525A);
493
- --color-primary-disabled: var(--color-neutral-25, #343C41);
494
- --color-secondary-active-inverse: var(--color-neutral-15, #232629);
495
- --color-tertiary-active: var(--color-green-70, #00C373);
496
- --color-tertiary-disabled: var(--color-neutral-45, #666B70);
497
-
498
- /* Semantic - Border */
499
- --border-color-medium-contrast: var(--color-neutral-45, #666B70);
500
- --border-color-low-contrast: var(--color-neutral-35, #4B525A);
501
- --border-color-high-contrast: var(--color-neutral-100, #FFFFFF);
502
- --border-color-low-contrast-constant: var(--color-neutral-93, #E9ECEF);
562
+ /* Semantic - Text - Brand */
563
+ --text-color-brand: var(--color-bild-red-60, #F75849);
564
+ --text-color-brand-light-only: var(--color-neutral-100, #FFFFFF);
565
+
566
+ /* Semantic - Text - Standard */
567
+ --text-color-primary: var(--color-neutral-90, #DDE1E2);
568
+ --text-color-secondary: var(--color-neutral-70, #A6ABB0);
569
+ --text-color-tertiary: var(--color-neutral-60, #8C9196);
570
+
571
+ /* Semantic - Text - Heading */
572
+ --kicker-text-color: var(--color-neutral-60, #8C9196);
573
+ --headline-text-color: var(--color-neutral-100, #FFFFFF);
574
+
575
+ /* Semantic - Text - OnSolid */
576
+ --text-color-on-image: var(--color-neutral-100, #FFFFFF);
577
+ --text-color-secondary-on-dark: var(--color-neutral-90, #DDE1E2);
578
+ --text-color-primary-on-light: var(--color-neutral-15, #222628);
579
+ --kicker-text-color-on-dark: var(--color-neutral-100-a-80, rgba(255, 255, 255, 0.8));
580
+ --kicker-text-color-on-light: var(--color-neutral-0-a-70, rgba(0, 0, 0, 0.7));
581
+ --text-color-primary-on-dark: var(--color-neutral-100, #FFFFFF);
582
+
583
+ /* Semantic - Text - Interactive */
584
+ --text-color-idle: var(--color-neutral-70, #A6ABB0);
585
+ --text-color-disabled: var(--color-neutral-40, #565A5F);
586
+ --text-color-hover: var(--color-neutral-95, #F2F4F5);
587
+ --text-color-active: var(--color-neutral-95, #F2F4F5);
588
+
589
+ /* Semantic - Text - Inverse */
590
+ --text-color-primary-inverse: var(--color-neutral-15, #222628);
591
+ --text-color-secondary-inverse: var(--color-neutral-40, #565A5F);
592
+ --text-color-inverse-high-contrast: var(--color-neutral-15, #222628);
593
+
594
+ /* Semantic - Text - Feedback */
595
+ --text-color-success: var(--color-green-70, #00C373);
596
+ --text-color-error: var(--color-bild-red-70, #FF8989);
597
+ --text-color-warning: var(--color-orange-70, #FD8227);
598
+
599
+ /* Semantic - Background - Standard */
600
+ --bg-color-primary: var(--color-neutral-15, #222628);
601
+ --bg-color-disabled: var(--color-neutral-20, #2C3133);
602
+ --bg-color-secondary: var(--color-neutral-20, #2C3133);
603
+ --bg-color-primary-const-dark: var(--color-neutral-15, #222628);
604
+ --bg-color-quaternary: var(--color-neutral-30, #40464D);
605
+ --bg-color-tertiary: var(--color-neutral-25, #343C41);
606
+ --bg-color-primary-const-light: var(--color-neutral-100, #FFFFFF);
607
+ --bg-color-quintenary: var(--color-neutral-60, #8C9196);
608
+
609
+ /* Semantic - Background - Brand */
610
+ --bg-color-brand-light-only: var(--color-neutral-100, #FFFFFF);
611
+ --bg-color-brand-solid: var(--color-bild-red-50, #DD0000);
612
+ --bg-color-brand-solid-hover: var(--color-bild-red-40, #C10000);
613
+ --bg-color-brand-solid-active: var(--color-bild-red-30, #930000);
614
+ --bg-color-brand-tint: var(--color-bild-red-20, #680000);
615
+ --bg-color-brand-tint-hover: var(--color-bild-red-30, #930000);
616
+
617
+ /* Semantic - Background - Inverse */
618
+ --bg-color-primary-inverse: var(--color-neutral-100, #FFFFFF);
619
+ --bg-color-tertiary-inverse: var(--color-neutral-90, #DDE1E2);
620
+ --bg-color-quaternary-inverse: var(--color-neutral-80, #C4C9CF);
621
+ --bg-color-secondary-inverse: var(--color-neutral-95, #F2F4F5);
622
+ --bg-color-quintenary-inverse: var(--color-neutral-60, #8C9196);
623
+
624
+ /* Semantic - Background - Success */
625
+ --bg-color-success-tint: var(--color-green-10, #052013);
626
+ --bg-color-success-solid: var(--color-green-50, #158751);
627
+ --bg-color-success-solid-hover: var(--color-green-40, #006E3E);
628
+ --bg-color-success-tint-hover: var(--color-green-20, #093822);
629
+ --bg-color-success-solid-active: var(--color-green-30, #0D5232);
630
+
631
+ /* Semantic - Background - GradientStops */
632
+ --bg-color-tertiary-gradient-stop: var(--color-neutral-25-a-0, rgba(52, 60, 65, 0));
633
+ --bg-color-primary-gradient-stop: var(--color-neutral-15-a-0, rgba(34, 38, 40, 0));
634
+ --bg-color-secondary-gradient-stop: var(--color-neutral-20-a-0, rgba(44, 49, 51, 0));
635
+
636
+ /* Semantic - Background - Overlay */
637
+ --overlay-scrim-black-const: var(--color-neutral-0-a-70, rgba(0, 0, 0, 0.7));
638
+ --overlay-scrim-white-const: var(--color-neutral-100-a-70, rgba(255, 255, 255, 0.7));
639
+
640
+ /* Semantic - Background - Error */
641
+ --bg-color-error-tint: var(--color-bild-red-10, #410000);
642
+ --bg-color-error-tint-hover: var(--color-bild-red-20, #680000);
643
+ --bg-color-error-solid: var(--color-bild-red-40, #C10000);
644
+ --bg-color-error-solid-hover: var(--color-bild-red-30, #930000);
645
+
646
+ /* Semantic - Background - Warning */
647
+ --bg-color-warning-tint: var(--color-orange-10, #2F1400);
648
+ --bg-color-warning-tint-hover: var(--color-orange-20, #522301);
649
+ --bg-color-warning-solid: var(--color-orange-70, #FD8227);
650
+ --bg-color-warning-solid-hover: var(--color-orange-60, #EF6702);
651
+
652
+ /* Semantic - Border - Standard */
653
+ --border-color-default: var(--color-neutral-40, #565A5F);
654
+ --border-color-subtle: var(--color-neutral-25, #343C41);
655
+ --border-color-extra-strong: var(--color-neutral-100, #FFFFFF);
656
+ --border-color-strong: var(--color-neutral-50, #6E787C);
657
+
658
+ /* Semantic - Border - OnSolid */
659
+ --border-color-subtle-on-dark: var(--color-neutral-25, #343C41);
660
+ --border-color-default-on-dark: var(--color-neutral-40, #565A5F);
661
+ --border-color-subtle-on-light: var(--color-neutral-90, #DDE1E2);
662
+ --border-color-default-on-light: var(--color-neutral-80, #C4C9CF);
663
+
664
+ /* Semantic - Border - Feedback */
503
665
  --border-color-success: var(--color-green-70, #00C373);
504
- --border-color-warning: var(--color-bild-red-50, #DD0000);
505
- --border-color-primary-disabled: var(--color-neutral-25, #343C41);
506
- --border-color-secondary-disabled: var(--color-neutral-35, #4B525A);
507
-
508
- /* Semantic - Core */
509
- --core-color-primary: var(--color-bild-red-50, #DD0000);
510
- --core-color-secondary: var(--color-neutral-15, #232629);
511
- --core-color-tertiary: var(--color-neutral-100, #FFFFFF);
512
- --core-color-secondary-constant: var(--color-neutral-100, #FFFFFF);
513
- --core-color-tertiary-constant: var(--color-neutral-15, #232629);
514
-
515
- /* Semantic - Icon */
516
- --icon-color-primary: var(--color-neutral-60, #8C9196);
517
- --icon-color-inverse: var(--color-neutral-35, #4B525A);
518
- --icon-color-secondary-constant: var(--color-neutral-60, #8C9196);
519
- --icon-color-constant-on-dark: var(--color-neutral-96, #F2F4F5);
520
- --icon-color-primary-constant: var(--color-neutral-35, #4B525A);
666
+ --border-color-error: var(--color-bild-red-70, #FF8989);
667
+ --border-color-warning: var(--color-orange-70, #FD8227);
668
+
669
+ /* Semantic - Border - Interactive */
670
+ --border-color-disabled: var(--color-neutral-25, #343C41);
671
+ --border-color-selected: var(--color-neutral-80, #C4C9CF);
672
+ --border-color-active: var(--color-bild-red-60, #F75849);
673
+ --border-color-idle: var(--color-neutral-50, #6E787C);
674
+
675
+ /* Semantic - Border - Inverse */
676
+ --border-color-default-inverse: var(--color-neutral-80, #C4C9CF);
677
+ --border-color-subtle-inverse: var(--color-neutral-90, #DDE1E2);
678
+
679
+ /* Semantic - Border - Brand */
680
+ --border-color-brand: var(--color-bild-red-60, #F75849);
681
+ --border-color-brand-light-only: var(--color-neutral-100, #FFFFFF);
682
+ --border-color-brand-const: var(--color-bild-red-50, #DD0000);
683
+
684
+ /* Semantic - Border - Utilities */
685
+ --border-color-no-contrast: var(--color-neutral-15, #222628);
686
+
687
+ /* Semantic - Icon - Interactive */
688
+ --icon-color-idle: var(--color-neutral-70, #A6ABB0);
689
+ --icon-color-disabled: var(--color-neutral-40, #565A5F);
690
+ --icon-color-hover: var(--color-neutral-95, #F2F4F5);
691
+ --icon-color-active: var(--color-neutral-95, #F2F4F5);
692
+
693
+ /* Semantic - Icon - OnSolid */
694
+ --icon-color-secondary-on-light: var(--color-neutral-40, #565A5F);
695
+ --icon-color-primary-on-dark: var(--color-neutral-100, #FFFFFF);
696
+ --icon-color-secondary-on-dark: var(--color-neutral-90, #DDE1E2);
697
+ --icon-color-primary-on-light: var(--color-neutral-15, #222628);
698
+ --icon-color-const-on-image: var(--color-neutral-100, #FFFFFF);
699
+
700
+ /* Semantic - Icon - Feedback */
521
701
  --icon-color-success: var(--color-green-70, #00C373);
702
+ --icon-color-error: var(--color-bild-red-70, #FF8989);
703
+ --icon-color-warning: var(--color-orange-70, #FD8227);
522
704
 
523
- /* Semantic - Label */
524
- --label-color-primary: var(--color-neutral-93, #E9ECEF);
525
- --label-color-secondary: var(--color-neutral-85, #CED4DA);
526
- --label-color-disabled: var(--color-neutral-35, #4B525A);
527
- --label-color-primary-constant: var(--color-neutral-15, #232629);
528
- --label-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
529
- --label-color-tertiary: var(--color-neutral-60, #8C9196);
530
- --label-color-primary-inverse: var(--color-neutral-15, #232629);
531
-
532
- /* Semantic - Attention */
533
- --attention-color-high: var(--color-bild-red-50, #DD0000);
534
- --accent-color-primary: var(--color-neutral-100, #FFFFFF);
535
- --attention-color-medium: var(--color-orange-67, #FD8227);
536
- --attention-color-low: var(--color-yellow-80, #FFBF00);
537
- --accent-color-primary-constant: var(--color-bild-red-50, #DD0000);
538
- --attention-color-success-primary: var(--color-green-70, #00C373);
539
- --attention-color-extra-low: var(--color-neutral-25, #343C41);
540
- --attention-color-success-secondary: var(--color-green-40, #006E3E);
541
-
542
- /* Semantic - Overlay */
543
- --overlay-scrim-black: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
544
- --overlay-scrim-white: var(--alpha-white-70, rgba(255, 255, 255, 0.7));
705
+ /* Semantic - Icon - Brand */
706
+ --icon-color-brand: var(--color-bild-red-60, #F75849);
707
+ --icon-color-brand-light-only: var(--color-neutral-100, #FFFFFF);
708
+
709
+ /* Semantic - Icon - Standard */
710
+ --icon-color-primary: var(--color-neutral-90, #DDE1E2);
711
+ --icon-color-secondary: var(--color-neutral-70, #A6ABB0);
712
+ --icon-color-tertiary: var(--color-neutral-60, #8C9196);
713
+
714
+ /* Semantic - Icon - Inverse */
715
+ --icon-color-primary-inverse: var(--color-neutral-15, #222628);
716
+ --icon-color-secondary-inverse: var(--color-neutral-40, #565A5F);
717
+ --icon-color-inverse-high-contrast: var(--color-neutral-15, #222628);
545
718
 
546
719
  /* Semantic - LayerOpacity */
547
720
  --layer-opacity-05: var(--opacity-05, 0.05);
@@ -566,25 +739,21 @@
566
739
  DROPSHADOWSOFT
567
740
  ============================================ */
568
741
 
569
- /* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
570
742
  [data-color-brand="bild"][data-theme="light"] .shadow-soft-sm,
571
743
  :host([data-color-brand="bild"][data-theme="light"]) .shadow-soft-sm {
572
744
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
573
745
  }
574
746
 
575
- /* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
576
747
  [data-color-brand="bild"][data-theme="light"] .shadow-soft-md,
577
748
  :host([data-color-brand="bild"][data-theme="light"]) .shadow-soft-md {
578
749
  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.03), 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
579
750
  }
580
751
 
581
- /* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
582
752
  [data-color-brand="bild"][data-theme="light"] .shadow-soft-lg,
583
753
  :host([data-color-brand="bild"][data-theme="light"]) .shadow-soft-lg {
584
754
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.03), 0px 8px 16px 0px rgba(0, 0, 0, 0.07);
585
755
  }
586
756
 
587
- /* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
588
757
  [data-color-brand="bild"][data-theme="light"] .shadow-soft-xl,
589
758
  :host([data-color-brand="bild"][data-theme="light"]) .shadow-soft-xl {
590
759
  box-shadow: 0px 0px 64px 0px rgba(0, 0, 0, 0.05), 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
@@ -595,28 +764,24 @@
595
764
  DROPSHADOWHARD
596
765
  ============================================ */
597
766
 
598
- /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
599
767
  [data-color-brand="bild"][data-theme="light"] .shadow-hard-sm,
600
768
  :host([data-color-brand="bild"][data-theme="light"]) .shadow-hard-sm {
601
- box-shadow: 0px 1px 2px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
769
+ box-shadow: 0px 1px 2px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
602
770
  }
603
771
 
604
- /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
605
772
  [data-color-brand="bild"][data-theme="light"] .shadow-hard-md,
606
773
  :host([data-color-brand="bild"][data-theme="light"]) .shadow-hard-md {
607
- box-shadow: 0px 4px 8px 0px var(--alpha-black-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
774
+ box-shadow: 0px 4px 8px 0px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
608
775
  }
609
776
 
610
- /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
611
777
  [data-color-brand="bild"][data-theme="light"] .shadow-hard-lg,
612
778
  :host([data-color-brand="bild"][data-theme="light"]) .shadow-hard-lg {
613
- box-shadow: 0px 2px 3px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
779
+ box-shadow: 0px 2px 3px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
614
780
  }
615
781
 
616
- /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
617
782
  [data-color-brand="bild"][data-theme="light"] .shadow-hard-xl,
618
783
  :host([data-color-brand="bild"][data-theme="light"]) .shadow-hard-xl {
619
- box-shadow: 0px 4px 4px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
784
+ box-shadow: 0px 4px 4px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
620
785
  }
621
786
 
622
787
  /* Effects - Dark */
@@ -624,25 +789,21 @@
624
789
  DROPSHADOWSOFT
625
790
  ============================================ */
626
791
 
627
- /* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
628
792
  [data-color-brand="bild"][data-theme="dark"] .shadow-soft-sm,
629
793
  :host([data-color-brand="bild"][data-theme="dark"]) .shadow-soft-sm {
630
794
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
631
795
  }
632
796
 
633
- /* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
634
797
  [data-color-brand="bild"][data-theme="dark"] .shadow-soft-md,
635
798
  :host([data-color-brand="bild"][data-theme="dark"]) .shadow-soft-md {
636
799
  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.03), 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
637
800
  }
638
801
 
639
- /* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
640
802
  [data-color-brand="bild"][data-theme="dark"] .shadow-soft-lg,
641
803
  :host([data-color-brand="bild"][data-theme="dark"]) .shadow-soft-lg {
642
804
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.03), 0px 8px 16px 0px rgba(0, 0, 0, 0.07);
643
805
  }
644
806
 
645
- /* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
646
807
  [data-color-brand="bild"][data-theme="dark"] .shadow-soft-xl,
647
808
  :host([data-color-brand="bild"][data-theme="dark"]) .shadow-soft-xl {
648
809
  box-shadow: 0px 0px 64px 0px rgba(0, 0, 0, 0.05), 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
@@ -653,28 +814,24 @@
653
814
  DROPSHADOWHARD
654
815
  ============================================ */
655
816
 
656
- /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
657
817
  [data-color-brand="bild"][data-theme="dark"] .shadow-hard-sm,
658
818
  :host([data-color-brand="bild"][data-theme="dark"]) .shadow-hard-sm {
659
- box-shadow: 0px 1px 2px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
819
+ box-shadow: 0px 1px 2px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
660
820
  }
661
821
 
662
- /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
663
822
  [data-color-brand="bild"][data-theme="dark"] .shadow-hard-md,
664
823
  :host([data-color-brand="bild"][data-theme="dark"]) .shadow-hard-md {
665
- box-shadow: 0px 4px 8px 0px var(--alpha-black-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
824
+ box-shadow: 0px 4px 8px 0px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
666
825
  }
667
826
 
668
- /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
669
827
  [data-color-brand="bild"][data-theme="dark"] .shadow-hard-lg,
670
828
  :host([data-color-brand="bild"][data-theme="dark"]) .shadow-hard-lg {
671
- box-shadow: 0px 2px 3px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
829
+ box-shadow: 0px 2px 3px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
672
830
  }
673
831
 
674
- /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
675
832
  [data-color-brand="bild"][data-theme="dark"] .shadow-hard-xl,
676
833
  :host([data-color-brand="bild"][data-theme="dark"]) .shadow-hard-xl {
677
- box-shadow: 0px 4px 4px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
834
+ box-shadow: 0px 4px 4px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
678
835
  }
679
836
 
680
837
 
@@ -720,7 +877,6 @@
720
877
  --label-3-font-size: 12px;
721
878
  --label-2-font-size: 15px;
722
879
  --label-1-font-size: 17px;
723
- --label-1-font-size-responsive: 10px;
724
880
  --callout-1-font-size: 18px;
725
881
  --footnote-1-font-size: 16px;
726
882
  --footnote-2-font-size: 12px;
@@ -743,6 +899,8 @@
743
899
  --callout-font-weight: var(--font-weight-black, 800);
744
900
  --label-font-weight-bold: var(--font-weight-bold, 700);
745
901
  --label-font-weight-book: var(--font-weight-book, 400);
902
+ --label-font-weight-bold-st: var(--st-font-weight-bold, 700);
903
+ --label-font-weight-book-st: var(--st-font-weight-st-book, 400);
746
904
  --body-font-weight-book: var(--font-weight-book, 400);
747
905
  --body-font-weight-bold: var(--font-weight-bold, 700);
748
906
  --kicker-font-weight: var(--font-weight-bold, 700);
@@ -753,8 +911,12 @@
753
911
  --headline-3-font-weight: var(--font-weight-bold, 700);
754
912
  --headline-4-font-weight: var(--font-weight-semi-bold, 600);
755
913
  --headline-1-font-weight-st: var(--st-font-weight-bold, 700);
914
+ --headline-2-font-weight-st: var(--st-font-weight-bold, 700);
915
+ --headline-3-font-weight-st: var(--st-font-weight-bold, 700);
916
+ --headline-4-font-weight-st: var(--st-font-weight-semi-bold, 600);
756
917
  --title-font-weight: var(--font-weight-black, 800);
757
918
  --display-font-weight: var(--font-weight-black, 800);
919
+ --display-font-weight-st: var(--st-font-weight-black, 800);
758
920
  --quote-font-weight: var(--font-weight-black, 800);
759
921
  --footnote-font-weight-book: var(--font-weight-book, 400);
760
922
  --footnote-font-weight-bold: var(--font-weight-bold, 700);
@@ -765,7 +927,6 @@
765
927
  --kicker-1-line-height: 19.8px;
766
928
  --label-3-line-height: 14.4px;
767
929
  --label-1-line-height: 17px;
768
- --label-1-responsive-line-height: 10px;
769
930
  --label-2-line-height: 16px;
770
931
  --display-1-line-height: 40px;
771
932
  --display-2-line-height: 36px;
@@ -781,18 +942,18 @@
781
942
  --headline-4-line-height: 22px;
782
943
  --callout-line-height: 18px;
783
944
  --subheadline-1-line-height: 24px;
784
- --letter-spacing-positive-sm: var(--letter-space-0-p-5, 0.5px);
785
- --letter-spacing-positive-lg: var(--letter-space-2, 2px);
786
- --letter-spacing-positive-md: var(--letter-space-1, 1px);
787
- --letter-spacing-none: var(--letter-space-0, 0px);
788
- --letter-spacing-negative-sm: var(--letter-space-neg-0-p-5, -0.5px);
789
- --letter-spacing-negative-md: var(--letter-space-neg-1, -1px);
790
- --letter-spacing-negative-lg: var(--letter-space-neg-2, -2px);
791
- --letter-spacing-negative-xs: var(--letter-space-neg-0-p-25, -0.25px);
792
- --letter-spacing-positive-xs: var(--letter-space-0-p-25, 0.25px);
793
- --display-1-letter-spacing: var(--letter-space-neg-0-p-5, -0.5px);
794
- --display-2-letter-spacing: var(--letter-space-neg-0-p-5, -0.5px);
795
- --display-3-letter-spacing: var(--letter-space-neg-0-p-5, -0.5px);
945
+ --letter-space-positive-sm: var(--letter-space-0-p-5, 0.5px);
946
+ --letter-space-positive-lg: var(--letter-space-2, 2px);
947
+ --letter-space-positive-md: var(--letter-space-1, 1px);
948
+ --letter-space-none: var(--letter-space-0, 0px);
949
+ --letter-space-negative-sm: var(--letter-space-neg-0-p-5, -0.5px);
950
+ --letter-space-negative-md: var(--letter-space-neg-1, -1px);
951
+ --letter-space-negative-lg: var(--letter-space-neg-2, -2px);
952
+ --letter-space-negative-xs: var(--letter-space-neg-0-p-25, -0.25px);
953
+ --letter-space-positive-xs: var(--letter-space-0-p-25, 0.25px);
954
+ --display-1-letter-space: var(--letter-space-neg-0-p-5, -0.5px);
955
+ --display-2-letter-space: var(--letter-space-neg-0-p-5, -0.5px);
956
+ --display-3-letter-space: var(--letter-space-neg-0-p-5, -0.5px);
796
957
  --border-radius-xs: var(--size-0-p-25-x, 2px);
797
958
  --border-radius-md: var(--size-1-x, 8px);
798
959
  --border-radius-sm: var(--size-0-p-5-x, 4px);
@@ -820,19 +981,19 @@
820
981
  --inline-space-const-xs: var(--space-0-p-75-x, 6px);
821
982
  --inline-space-const-3-xs: var(--space-0-p-25-x, 2px);
822
983
  --inline-space-const-2-xs: var(--space-0-p-5-x, 4px);
823
- --stack-space-resp-md: var(--space-1-p-5-x, 12px);
824
- --stack-space-resp-lg: var(--space-2-x, 16px);
825
- --stack-space-resp-2-xl: var(--space-4-x, 32px);
826
- --stack-space-resp-sm: var(--space-1-x, 8px);
827
- --stack-space-resp-xl: var(--space-3-x, 24px);
828
- --stack-space-const-sm: var(--space-1-x, 8px);
829
- --stack-space-const-md: var(--space-1-p-5-x, 12px);
830
- --stack-space-const-lg: var(--space-2-x, 16px);
831
- --stack-space-const-2-xl: var(--space-4-x, 32px);
832
- --stack-space-const-xl: var(--space-3-x, 24px);
833
- --stack-space-const-xs: var(--space-0-p-75-x, 6px);
834
- --stack-space-const-3-xs: var(--space-0-p-25-x, 2px);
835
- --stack-space-const-2-xs: var(--space-0-p-5-x, 4px);
984
+ --stack-space-resp-md: var(--density-xs-stack-space-resp-md);
985
+ --stack-space-resp-lg: var(--density-xs-stack-space-resp-lg);
986
+ --stack-space-resp-2-xl: var(--density-xs-stack-space-resp-2-xl);
987
+ --stack-space-resp-sm: var(--density-xs-stack-space-resp-sm);
988
+ --stack-space-resp-xl: var(--density-xs-stack-space-resp-xl);
989
+ --stack-space-const-sm: var(--density-stack-space-const-sm);
990
+ --stack-space-const-md: var(--density-stack-space-const-md);
991
+ --stack-space-const-lg: var(--density-stack-space-const-lg);
992
+ --stack-space-const-2-xl: var(--density-stack-space-const-2-xl);
993
+ --stack-space-const-xl: var(--density-stack-space-const-xl);
994
+ --stack-space-const-xs: var(--density-stack-space-const-xs);
995
+ --stack-space-const-3-xs: var(--density-stack-space-const-3-xs);
996
+ --stack-space-const-2-xs: var(--density-stack-space-const-2-xs);
836
997
  --gap-space-resp-xs: var(--space-0-p-5-x, 4px);
837
998
  --gap-space-resp-lg: var(--space-2-x, 16px);
838
999
  --gap-space-resp-xl: var(--space-3-x, 24px);
@@ -883,6 +1044,11 @@
883
1044
  --canvas-width-size-web: 390px;
884
1045
  --canvas-width-size-app: 390px;
885
1046
  --canvas-height-size-app: 844px;
1047
+ --stack-space-resp-md: var(--density-sm-stack-space-resp-md);
1048
+ --stack-space-resp-lg: var(--density-sm-stack-space-resp-lg);
1049
+ --stack-space-resp-2-xl: var(--density-sm-stack-space-resp-2-xl);
1050
+ --stack-space-resp-sm: var(--density-sm-stack-space-resp-sm);
1051
+ --stack-space-resp-xl: var(--density-sm-stack-space-resp-xl);
886
1052
  --breakpoint-name: sm;
887
1053
  }
888
1054
  }
@@ -911,7 +1077,6 @@
911
1077
  --headline-2-font-size: 48px;
912
1078
  --headline-3-font-size: 36px;
913
1079
  --headline-4-font-size: 26px;
914
- --label-1-font-size-responsive: 15px;
915
1080
  --callout-1-font-size: 22px;
916
1081
  --kicker-1-font-size: 22px;
917
1082
  --kicker-2-font-size: 22px;
@@ -923,7 +1088,6 @@
923
1088
  --kicker-3-line-height: 18px;
924
1089
  --kicker-2-line-height: 22px;
925
1090
  --kicker-1-line-height: 22px;
926
- --label-1-responsive-line-height: 15px;
927
1091
  --display-1-line-height: 72px;
928
1092
  --display-2-line-height: 42px;
929
1093
  --display-3-line-height: 32px;
@@ -935,10 +1099,10 @@
935
1099
  --headline-3-line-height: 36px;
936
1100
  --callout-line-height: 22px;
937
1101
  --subheadline-1-line-height: 32px;
938
- --letter-spacing-negative-sm: var(--letter-space-neg-0-p-25, -0.25px);
939
- --display-1-letter-spacing: var(--letter-space-neg-1, -1px);
940
- --display-2-letter-spacing: var(--letter-space-neg-1, -1px);
941
- --display-3-letter-spacing: var(--letter-space-neg-1, -1px);
1102
+ --letter-space-negative-sm: var(--letter-space-neg-0-p-25, -0.25px);
1103
+ --display-1-letter-space: var(--letter-space-neg-1, -1px);
1104
+ --display-2-letter-space: var(--letter-space-neg-1, -1px);
1105
+ --display-3-letter-space: var(--letter-space-neg-1, -1px);
942
1106
  --change-on-md: md/lg;
943
1107
  --bp-specific-web: md;
944
1108
  --bp-specific-app: regular;
@@ -947,11 +1111,10 @@
947
1111
  --inline-space-resp-lg: var(--space-3-x, 24px);
948
1112
  --inline-space-resp-2-xl: var(--space-6-x, 48px);
949
1113
  --inline-space-resp-xl: var(--space-4-x, 32px);
950
- --stack-space-resp-md: var(--space-2-x, 16px);
951
- --stack-space-resp-lg: var(--space-3-x, 24px);
952
- --stack-space-resp-2-xl: var(--space-6-x, 48px);
953
- --stack-space-resp-sm: var(--space-1-p-5-x, 12px);
954
- --stack-space-resp-xl: var(--space-4-x, 32px);
1114
+ --stack-space-resp-md: var(--density-md-stack-space-resp-md);
1115
+ --stack-space-resp-lg: var(--density-md-stack-space-resp-lg);
1116
+ --stack-space-resp-sm: var(--density-md-stack-space-resp-sm);
1117
+ --stack-space-resp-xl: var(--density-md-stack-space-resp-xl);
955
1118
  --gap-space-resp-xs: var(--space-0-p-75-x, 6px);
956
1119
  --gap-space-resp-lg: var(--space-3-x, 24px);
957
1120
  --gap-space-resp-xl: var(--space-4-x, 32px);
@@ -996,7 +1159,6 @@
996
1159
  --headline-2-font-size: 64px;
997
1160
  --headline-3-font-size: 40px;
998
1161
  --headline-4-font-size: 32px;
999
- --label-1-font-size-responsive: 17px;
1000
1162
  --footnote-1-font-size: 18px;
1001
1163
  --footnote-2-font-size: 16px;
1002
1164
  --kicker-1-font-size: 30px;
@@ -1009,7 +1171,6 @@
1009
1171
  --kicker-3-line-height: 20px;
1010
1172
  --kicker-2-line-height: 24px;
1011
1173
  --kicker-1-line-height: 30px;
1012
- --label-1-responsive-line-height: 17px;
1013
1174
  --display-1-line-height: 120px;
1014
1175
  --display-2-line-height: 64px;
1015
1176
  --display-3-line-height: 40px;
@@ -1023,9 +1184,9 @@
1023
1184
  --headline-3-line-height: 40px;
1024
1185
  --headline-4-line-height: 30px;
1025
1186
  --subheadline-1-line-height: 36px;
1026
- --letter-spacing-positive-lg: var(--letter-space-3, 3px);
1027
- --letter-spacing-negative-lg: var(--letter-space-neg-3, -3px);
1028
- --display-1-letter-spacing: var(--letter-space-neg-2, -2px);
1187
+ --letter-space-positive-lg: var(--letter-space-3, 3px);
1188
+ --letter-space-negative-lg: var(--letter-space-neg-3, -3px);
1189
+ --display-1-letter-space: var(--letter-space-neg-2, -2px);
1029
1190
  --change-on-lg: lg;
1030
1191
  --bp-specific-web: lg;
1031
1192
  --inline-space-resp-sm: var(--space-2-x, 16px);
@@ -1033,11 +1194,11 @@
1033
1194
  --inline-space-resp-lg: var(--space-4-x, 32px);
1034
1195
  --inline-space-resp-2-xl: var(--space-8-x, 64px);
1035
1196
  --inline-space-resp-xl: var(--space-5-x, 40px);
1036
- --stack-space-resp-md: var(--space-3-x, 24px);
1037
- --stack-space-resp-lg: var(--space-4-x, 32px);
1038
- --stack-space-resp-2-xl: var(--space-8-x, 64px);
1039
- --stack-space-resp-sm: var(--space-2-x, 16px);
1040
- --stack-space-resp-xl: var(--space-5-x, 40px);
1197
+ --stack-space-resp-md: var(--density-lg-stack-space-resp-md);
1198
+ --stack-space-resp-lg: var(--density-lg-stack-space-resp-lg);
1199
+ --stack-space-resp-2-xl: var(--density-lg-stack-space-resp-2-xl);
1200
+ --stack-space-resp-sm: var(--density-lg-stack-space-resp-sm);
1201
+ --stack-space-resp-xl: var(--density-lg-stack-space-resp-xl);
1041
1202
  --gap-space-resp-xs: var(--space-1-x, 8px);
1042
1203
  --gap-space-resp-lg: var(--space-4-x, 32px);
1043
1204
  --gap-space-resp-xl: var(--space-6-x, 48px);
@@ -1065,28 +1226,10 @@
1065
1226
  [data-content-brand="bild"] .display-1,
1066
1227
  :host([data-content-brand="bild"]) .display-1 {
1067
1228
  font-family: var(--display-font-family);
1068
- font-weight: var(--display-font-weight);
1229
+ font-weight: 900;
1069
1230
  font-size: var(--display-1-font-size);
1070
1231
  line-height: var(--display-1-line-height);
1071
- letter-spacing: var(--display-1-letter-spacing);
1072
- }
1073
-
1074
- [data-content-brand="bild"] .display-2,
1075
- :host([data-content-brand="bild"]) .display-2 {
1076
- font-family: var(--display-font-family);
1077
- font-weight: var(--display-font-weight);
1078
- font-size: var(--display-2-font-size);
1079
- line-height: var(--display-2-line-height);
1080
- letter-spacing: var(--display-2-letter-spacing);
1081
- }
1082
-
1083
- [data-content-brand="bild"] .display-3,
1084
- :host([data-content-brand="bild"]) .display-3 {
1085
- font-family: var(--display-font-family);
1086
- font-weight: var(--display-font-weight);
1087
- font-size: var(--display-3-font-size);
1088
- line-height: var(--display-3-line-height);
1089
- letter-spacing: var(--display-3-letter-spacing);
1232
+ letter-spacing: var(--display-1-letter-space);
1090
1233
  }
1091
1234
 
1092
1235
  [data-content-brand="bild"] .headline-1,
@@ -1097,30 +1240,6 @@
1097
1240
  line-height: var(--headline-1-line-height);
1098
1241
  }
1099
1242
 
1100
- [data-content-brand="bild"] .headline-2,
1101
- :host([data-content-brand="bild"]) .headline-2 {
1102
- font-family: var(--headline-font-family);
1103
- font-weight: 900;
1104
- font-size: var(--headline-2-font-size);
1105
- line-height: var(--headline-2-line-height);
1106
- }
1107
-
1108
- [data-content-brand="bild"] .headline-3,
1109
- :host([data-content-brand="bild"]) .headline-3 {
1110
- font-family: var(--headline-font-family);
1111
- font-weight: 900;
1112
- font-size: var(--headline-3-font-size);
1113
- line-height: var(--headline-3-line-height);
1114
- }
1115
-
1116
- [data-content-brand="bild"] .headline-4,
1117
- :host([data-content-brand="bild"]) .headline-4 {
1118
- font-family: var(--headline-font-family);
1119
- font-weight: 700;
1120
- font-size: var(--headline-4-font-size);
1121
- line-height: var(--headline-4-font-size);
1122
- }
1123
-
1124
1243
  [data-content-brand="bild"] .subheadline-1,
1125
1244
  :host([data-content-brand="bild"]) .subheadline-1 {
1126
1245
  font-family: var(--subheadline-font-family);
@@ -1137,30 +1256,6 @@
1137
1256
  line-height: var(--kicker-1-line-height);
1138
1257
  }
1139
1258
 
1140
- [data-content-brand="bild"] .kicker-2,
1141
- :host([data-content-brand="bild"]) .kicker-2 {
1142
- font-family: var(--kicker-font-family);
1143
- font-weight: 700;
1144
- font-size: var(--kicker-2-font-size);
1145
- line-height: var(--kicker-2-line-height);
1146
- }
1147
-
1148
- [data-content-brand="bild"] .kicker-3,
1149
- :host([data-content-brand="bild"]) .kicker-3 {
1150
- font-family: var(--kicker-font-family);
1151
- font-weight: 700;
1152
- font-size: var(--kicker-3-font-size);
1153
- line-height: var(--kicker-3-line-height);
1154
- }
1155
-
1156
- [data-content-brand="bild"] .kicker-4,
1157
- :host([data-content-brand="bild"]) .kicker-4 {
1158
- font-family: var(--kicker-font-family);
1159
- font-weight: 700;
1160
- font-size: var(--kicker-4-font-size);
1161
- line-height: var(--kicker-4-line-height);
1162
- }
1163
-
1164
1259
  [data-content-brand="bild"] .title-1,
1165
1260
  :host([data-content-brand="bild"]) .title-1 {
1166
1261
  font-family: var(--title-font-family);
@@ -1169,32 +1264,6 @@
1169
1264
  line-height: var(--title-1-line-height);
1170
1265
  }
1171
1266
 
1172
- [data-content-brand="bild"] .title-1-uppercase,
1173
- :host([data-content-brand="bild"]) .title-1-uppercase {
1174
- font-family: var(--title-font-family);
1175
- font-weight: var(--title-font-weight);
1176
- font-size: var(--title-1-font-size);
1177
- line-height: var(--title-1-line-height);
1178
- text-transform: uppercase;
1179
- }
1180
-
1181
- [data-content-brand="bild"] .title-2,
1182
- :host([data-content-brand="bild"]) .title-2 {
1183
- font-family: var(--title-font-family);
1184
- font-weight: var(--title-font-weight);
1185
- font-size: var(--title-2-font-size);
1186
- line-height: var(--title-2-line-height);
1187
- }
1188
-
1189
- [data-content-brand="bild"] .title-2-uppercase,
1190
- :host([data-content-brand="bild"]) .title-2-uppercase {
1191
- font-family: var(--title-font-family);
1192
- font-weight: var(--title-font-weight);
1193
- font-size: var(--title-2-font-size);
1194
- line-height: var(--title-2-line-height);
1195
- text-transform: uppercase;
1196
- }
1197
-
1198
1267
  [data-content-brand="bild"] .callout,
1199
1268
  :host([data-content-brand="bild"]) .callout {
1200
1269
  font-family: var(--callout-font-family);
@@ -1211,32 +1280,6 @@
1211
1280
  line-height: var(--body-line-height);
1212
1281
  }
1213
1282
 
1214
- [data-content-brand="bild"] .body-italic,
1215
- :host([data-content-brand="bild"]) .body-italic {
1216
- font-family: var(--body-font-family);
1217
- font-weight: 400;
1218
- font-size: var(--body-font-size);
1219
- line-height: var(--body-line-height);
1220
- font-style: italic;
1221
- }
1222
-
1223
- [data-content-brand="bild"] .body-bold,
1224
- :host([data-content-brand="bild"]) .body-bold {
1225
- font-family: var(--body-font-family);
1226
- font-weight: var(--body-font-weight-bold);
1227
- font-size: var(--body-font-size);
1228
- line-height: var(--body-line-height);
1229
- }
1230
-
1231
- [data-content-brand="bild"] .body-bold-italic,
1232
- :host([data-content-brand="bild"]) .body-bold-italic {
1233
- font-family: var(--body-font-family);
1234
- font-weight: 700;
1235
- font-size: var(--body-font-size);
1236
- line-height: var(--body-line-height);
1237
- font-style: italic;
1238
- }
1239
-
1240
1283
  [data-content-brand="bild"] .text-link,
1241
1284
  :host([data-content-brand="bild"]) .text-link {
1242
1285
  font-family: var(--body-font-family);
@@ -1246,43 +1289,6 @@
1246
1289
  text-decoration: underline;
1247
1290
  }
1248
1291
 
1249
- [data-content-brand="bild"] .text-link-italic,
1250
- :host([data-content-brand="bild"]) .text-link-italic {
1251
- font-family: var(--body-font-family);
1252
- font-weight: 400;
1253
- font-size: var(--body-font-size);
1254
- line-height: var(--body-line-height);
1255
- font-style: italic;
1256
- text-decoration: underline;
1257
- }
1258
-
1259
- [data-content-brand="bild"] .text-link-bold,
1260
- :host([data-content-brand="bild"]) .text-link-bold {
1261
- font-family: var(--body-font-family);
1262
- font-weight: var(--body-font-weight-bold);
1263
- font-size: var(--body-font-size);
1264
- line-height: var(--body-line-height);
1265
- text-decoration: underline;
1266
- }
1267
-
1268
- [data-content-brand="bild"] .text-link-hover,
1269
- :host([data-content-brand="bild"]) .text-link-hover {
1270
- font-family: var(--body-font-family);
1271
- font-weight: var(--body-font-weight-book);
1272
- font-size: var(--body-font-size);
1273
- line-height: var(--body-line-height);
1274
- text-decoration: underline;
1275
- }
1276
-
1277
- [data-content-brand="bild"] .text-link-bold-hover,
1278
- :host([data-content-brand="bild"]) .text-link-bold-hover {
1279
- font-family: var(--body-font-family);
1280
- font-weight: var(--body-font-weight-bold);
1281
- font-size: var(--body-font-size);
1282
- line-height: var(--body-line-height);
1283
- text-decoration: underline;
1284
- }
1285
-
1286
1292
  [data-content-brand="bild"] .footnote-1,
1287
1293
  :host([data-content-brand="bild"]) .footnote-1 {
1288
1294
  font-family: var(--footnote-font-family);
@@ -1291,149 +1297,161 @@
1291
1297
  line-height: var(--footnote-1-line-height);
1292
1298
  }
1293
1299
 
1294
- [data-content-brand="bild"] .footnote-1-bold,
1295
- :host([data-content-brand="bild"]) .footnote-1-bold {
1296
- font-family: var(--footnote-font-family);
1297
- font-weight: var(--font-weight-bold, 700);
1298
- font-size: var(--footnote-1-font-size);
1299
- line-height: var(--footnote-1-line-height);
1300
- }
1301
-
1302
- [data-content-brand="bild"] .footnote-2,
1303
- :host([data-content-brand="bild"]) .footnote-2 {
1304
- font-family: var(--footnote-font-family);
1305
- font-weight: var(--font-weight-book, 400);
1306
- font-size: var(--footnote-2-font-size);
1307
- line-height: var(--footnote-2-line-height);
1308
- }
1309
-
1310
- [data-content-brand="bild"] .footnote-2-bold,
1311
- :host([data-content-brand="bild"]) .footnote-2-bold {
1312
- font-family: var(--footnote-font-family);
1313
- font-weight: var(--font-weight-bold, 700);
1314
- font-size: var(--footnote-2-font-size);
1315
- line-height: var(--footnote-2-line-height);
1316
- }
1317
-
1318
1300
  [data-content-brand="bild"] .label-1,
1319
1301
  :host([data-content-brand="bild"]) .label-1 {
1320
1302
  font-family: var(--label-font-family);
1321
- font-weight: var(--label-font-weight-book);
1303
+ font-weight: 400;
1322
1304
  font-size: var(--label-1-font-size);
1323
1305
  line-height: var(--label-1-line-height);
1324
1306
  letter-spacing: var(--letter-space-0-p-25, 0.25px);
1325
1307
  }
1326
1308
 
1327
- [data-content-brand="bild"] .label-1-bold,
1328
- :host([data-content-brand="bild"]) .label-1-bold {
1329
- font-family: var(--label-font-family);
1330
- font-weight: var(--label-font-weight-bold);
1331
- font-size: var(--label-1-font-size);
1332
- line-height: var(--label-1-line-height);
1333
- letter-spacing: var(--letter-space-0-p-25, 0.25px);
1309
+ [data-content-brand="bild"] .quote,
1310
+ :host([data-content-brand="bild"]) .quote {
1311
+ font-family: var(--quote-font-family);
1312
+ font-weight: var(--quote-font-weight);
1313
+ font-size: var(--quote-font-size);
1314
+ line-height: var(--quote-line-height);
1334
1315
  }
1335
1316
 
1336
- [data-content-brand="bild"] .label-1-bold-resp,
1337
- :host([data-content-brand="bild"]) .label-1-bold-resp {
1338
- font-family: var(--label-font-family);
1339
- font-weight: var(--font-weight-bold, 700);
1340
- font-size: var(--label-1-font-size-responsive);
1341
- line-height: var(--label-1-responsive-line-height);
1342
- letter-spacing: var(--letter-space-0-p-25, 0.25px);
1343
- }
1317
+ /* === SEMANTIC DENSITY TOKENS === */
1344
1318
 
1345
- [data-content-brand="bild"] .label-1-uppercase-bold,
1346
- :host([data-content-brand="bild"]) .label-1-uppercase-bold {
1347
- font-family: var(--label-font-family);
1348
- font-weight: var(--label-font-weight-bold);
1349
- font-size: var(--label-1-font-size);
1350
- line-height: var(--label-1-line-height);
1351
- letter-spacing: var(--letter-spacing-positive-sm);
1352
- text-transform: uppercase;
1353
- }
1319
+ [data-content-brand="bild"][data-density="default"],
1320
+ :host([data-content-brand="bild"][data-density="default"]) {
1321
+ /* ============================================
1322
+ GLOBAL
1323
+ ============================================ */
1354
1324
 
1355
- [data-content-brand="bild"] .label-2,
1356
- :host([data-content-brand="bild"]) .label-2 {
1357
- font-family: var(--label-font-family);
1358
- font-weight: var(--label-font-weight-book);
1359
- font-size: var(--label-2-font-size);
1360
- line-height: var(--label-2-line-height);
1361
- letter-spacing: var(--letter-spacing-positive-xs);
1362
- }
1325
+ /* Global - StackSpace - Constant */
1326
+ --density-stack-space-const-3-xs: var(--space-0-p-25-x, 2px);
1327
+ --density-stack-space-const-2-xs: var(--space-0-p-5-x, 4px);
1328
+ --density-stack-space-const-xs: var(--space-0-p-75-x, 6px);
1329
+ --density-stack-space-const-sm: var(--space-1-x, 8px);
1330
+ --density-stack-space-const-md: var(--space-1-p-5-x, 12px);
1331
+ --density-stack-space-const-lg: var(--space-2-x, 16px);
1332
+ --density-stack-space-const-xl: var(--space-3-x, 24px);
1333
+ --density-stack-space-const-2-xl: var(--space-4-x, 32px);
1334
+
1335
+ /* Global - StackSpace - Responsive - Xs */
1336
+ --density-xs-stack-space-resp-sm: var(--space-1-x, 8px);
1337
+ --density-xs-stack-space-resp-md: var(--space-1-p-5-x, 12px);
1338
+ --density-xs-stack-space-resp-lg: var(--space-2-x, 16px);
1339
+ --density-xs-stack-space-resp-xl: var(--space-3-x, 24px);
1340
+ --density-xs-stack-space-resp-2-xl: var(--space-4-x, 32px);
1341
+
1342
+ /* Global - StackSpace - Responsive - Sm */
1343
+ --density-sm-stack-space-resp-sm: var(--space-1-x, 8px);
1344
+ --density-sm-stack-space-resp-md: var(--space-1-p-5-x, 12px);
1345
+ --density-sm-stack-space-resp-lg: var(--space-2-x, 16px);
1346
+ --density-sm-stack-space-resp-xl: var(--space-3-x, 24px);
1347
+ --density-sm-stack-space-resp-2-xl: var(--space-4-x, 32px);
1348
+
1349
+ /* Global - StackSpace - Responsive - Md */
1350
+ --density-md-stack-space-resp-sm: var(--space-1-p-5-x, 12px);
1351
+ --density-md-stack-space-resp-md: var(--space-2-x, 16px);
1352
+ --density-md-stack-space-resp-lg: var(--space-3-x, 24px);
1353
+ --density-md-stack-space-resp-xl: var(--space-4-x, 32px);
1354
+ --density-md-stack-space-resp-2-xl: var(--space-6-x, 48px);
1355
+
1356
+ /* Global - StackSpace - Responsive - Lg */
1357
+ --density-lg-stack-space-resp-sm: var(--space-2-x, 16px);
1358
+ --density-lg-stack-space-resp-md: var(--space-3-x, 24px);
1359
+ --density-lg-stack-space-resp-lg: var(--space-4-x, 32px);
1360
+ --density-lg-stack-space-resp-xl: var(--space-5-x, 40px);
1361
+ --density-lg-stack-space-resp-2-xl: var(--space-8-x, 64px);
1363
1362
 
1364
- [data-content-brand="bild"] .label-2-uppercase,
1365
- :host([data-content-brand="bild"]) .label-2-uppercase {
1366
- font-family: var(--label-font-family);
1367
- font-weight: var(--label-font-weight-book);
1368
- font-size: var(--label-2-font-size);
1369
- line-height: var(--label-2-line-height);
1370
- letter-spacing: var(--letter-spacing-positive-xs);
1371
- text-transform: uppercase;
1372
1363
  }
1373
1364
 
1374
- [data-content-brand="bild"] .label-2-bold,
1375
- :host([data-content-brand="bild"]) .label-2-bold {
1376
- font-family: var(--label-font-family);
1377
- font-weight: var(--label-font-weight-bold);
1378
- font-size: var(--label-2-font-size);
1379
- line-height: var(--label-2-line-height);
1380
- letter-spacing: var(--letter-spacing-positive-xs);
1381
- }
1365
+ [data-content-brand="bild"][data-density="dense"],
1366
+ :host([data-content-brand="bild"][data-density="dense"]) {
1367
+ /* ============================================
1368
+ GLOBAL
1369
+ ============================================ */
1382
1370
 
1383
- [data-content-brand="bild"] .label-2-uppercase-bold,
1384
- :host([data-content-brand="bild"]) .label-2-uppercase-bold {
1385
- font-family: var(--label-font-family);
1386
- font-weight: var(--label-font-weight-bold);
1387
- font-size: var(--label-2-font-size);
1388
- line-height: var(--label-2-line-height);
1389
- letter-spacing: var(--letter-spacing-positive-xs);
1390
- text-transform: uppercase;
1391
- }
1371
+ /* Global - StackSpace - Constant */
1372
+ --density-stack-space-const-3-xs: var(--space-0-p-25-x, 2px);
1373
+ --density-stack-space-const-2-xs: var(--space-0-p-25-x, 2px);
1374
+ --density-stack-space-const-xs: var(--space-0-p-25-x, 2px);
1375
+ --density-stack-space-const-sm: var(--space-0-p-75-x, 6px);
1376
+ --density-stack-space-const-md: var(--space-1-x, 8px);
1377
+ --density-stack-space-const-lg: var(--space-1-p-5-x, 12px);
1378
+ --density-stack-space-const-xl: var(--space-2-x, 16px);
1379
+ --density-stack-space-const-2-xl: var(--space-3-x, 24px);
1380
+
1381
+ /* Global - StackSpace - Responsive - Xs */
1382
+ --density-xs-stack-space-resp-sm: var(--space-0-p-75-x, 6px);
1383
+ --density-xs-stack-space-resp-md: var(--space-1-x, 8px);
1384
+ --density-xs-stack-space-resp-lg: var(--space-1-p-5-x, 12px);
1385
+ --density-xs-stack-space-resp-xl: var(--space-2-x, 16px);
1386
+ --density-xs-stack-space-resp-2-xl: var(--space-3-x, 24px);
1387
+
1388
+ /* Global - StackSpace - Responsive - Sm */
1389
+ --density-sm-stack-space-resp-sm: var(--space-0-p-75-x, 6px);
1390
+ --density-sm-stack-space-resp-md: var(--space-1-x, 8px);
1391
+ --density-sm-stack-space-resp-lg: var(--space-1-p-5-x, 12px);
1392
+ --density-sm-stack-space-resp-xl: var(--space-2-x, 16px);
1393
+ --density-sm-stack-space-resp-2-xl: var(--space-3-x, 24px);
1394
+
1395
+ /* Global - StackSpace - Responsive - Md */
1396
+ --density-md-stack-space-resp-sm: var(--space-1-x, 8px);
1397
+ --density-md-stack-space-resp-md: var(--space-1-p-5-x, 12px);
1398
+ --density-md-stack-space-resp-lg: var(--space-2-x, 16px);
1399
+ --density-md-stack-space-resp-xl: var(--space-3-x, 24px);
1400
+ --density-md-stack-space-resp-2-xl: var(--space-4-p-5-x, 36px);
1401
+
1402
+ /* Global - StackSpace - Responsive - Lg */
1403
+ --density-lg-stack-space-resp-sm: var(--space-1-p-5-x, 12px);
1404
+ --density-lg-stack-space-resp-md: var(--space-2-x, 16px);
1405
+ --density-lg-stack-space-resp-lg: var(--space-3-x, 24px);
1406
+ --density-lg-stack-space-resp-xl: var(--space-3-p-5-x, 28px);
1407
+ --density-lg-stack-space-resp-2-xl: var(--space-6-x, 48px);
1392
1408
 
1393
- [data-content-brand="bild"] .label-3,
1394
- :host([data-content-brand="bild"]) .label-3 {
1395
- font-family: var(--label-font-family);
1396
- font-weight: var(--font-weight-book, 400);
1397
- font-size: var(--label-3-font-size);
1398
- line-height: var(--label-3-line-height);
1399
- letter-spacing: var(--letter-spacing-positive-xs);
1400
1409
  }
1401
1410
 
1402
- [data-content-brand="bild"] .label-3-uppercase,
1403
- :host([data-content-brand="bild"]) .label-3-uppercase {
1404
- font-family: var(--label-font-family);
1405
- font-weight: var(--label-font-weight-book);
1406
- font-size: var(--label-3-font-size);
1407
- line-height: var(--label-3-line-height);
1408
- letter-spacing: var(--letter-spacing-positive-sm);
1409
- text-transform: uppercase;
1410
- }
1411
+ [data-content-brand="bild"][data-density="spacious"],
1412
+ :host([data-content-brand="bild"][data-density="spacious"]) {
1413
+ /* ============================================
1414
+ GLOBAL
1415
+ ============================================ */
1411
1416
 
1412
- [data-content-brand="bild"] .label-3-bold,
1413
- :host([data-content-brand="bild"]) .label-3-bold {
1414
- font-family: var(--label-font-family);
1415
- font-weight: var(--font-weight-bold, 700);
1416
- font-size: var(--label-3-font-size);
1417
- line-height: var(--label-3-line-height);
1418
- letter-spacing: var(--letter-spacing-positive-xs);
1419
- }
1417
+ /* Global - StackSpace - Constant */
1418
+ --density-stack-space-const-3-xs: var(--space-0-p-25-x, 2px);
1419
+ --density-stack-space-const-2-xs: var(--space-0-p-5-x, 4px);
1420
+ --density-stack-space-const-xs: var(--space-1-x, 8px);
1421
+ --density-stack-space-const-sm: var(--space-1-p-25-x, 10px);
1422
+ --density-stack-space-const-md: var(--space-1-p-75-x, 14px);
1423
+ --density-stack-space-const-lg: var(--space-2-p-5-x, 20px);
1424
+ --density-stack-space-const-xl: var(--space-3-p-5-x, 28px);
1425
+ --density-stack-space-const-2-xl: var(--space-5-x, 40px);
1420
1426
 
1421
- [data-content-brand="bild"] .label-3-uppercase-bold,
1422
- :host([data-content-brand="bild"]) .label-3-uppercase-bold {
1423
- font-family: var(--label-font-family);
1424
- font-weight: var(--label-font-weight-bold);
1425
- font-size: var(--label-3-font-size);
1426
- line-height: var(--label-3-line-height);
1427
- letter-spacing: var(--letter-spacing-positive-sm);
1428
- text-transform: uppercase;
1429
- }
1427
+ /* Global - StackSpace - Responsive - Xs */
1428
+ --density-xs-stack-space-resp-sm: var(--space-1-p-25-x, 10px);
1429
+ --density-xs-stack-space-resp-md: var(--space-1-p-75-x, 14px);
1430
+ --density-xs-stack-space-resp-lg: var(--space-2-p-5-x, 20px);
1431
+ --density-xs-stack-space-resp-xl: var(--space-3-p-5-x, 28px);
1432
+ --density-xs-stack-space-resp-2-xl: var(--space-5-x, 40px);
1433
+
1434
+ /* Global - StackSpace - Responsive - Sm */
1435
+ --density-sm-stack-space-resp-sm: var(--space-1-p-25-x, 10px);
1436
+ --density-sm-stack-space-resp-md: var(--space-1-p-75-x, 14px);
1437
+ --density-sm-stack-space-resp-lg: var(--space-2-p-5-x, 20px);
1438
+ --density-sm-stack-space-resp-xl: var(--space-3-p-5-x, 28px);
1439
+ --density-sm-stack-space-resp-2-xl: var(--space-5-x, 40px);
1440
+
1441
+ /* Global - StackSpace - Responsive - Md */
1442
+ --density-md-stack-space-resp-sm: var(--space-1-p-75-x, 14px);
1443
+ --density-md-stack-space-resp-md: var(--space-2-p-5-x, 20px);
1444
+ --density-md-stack-space-resp-lg: var(--space-3-p-5-x, 28px);
1445
+ --density-md-stack-space-resp-xl: var(--space-5-x, 40px);
1446
+ --density-md-stack-space-resp-2-xl: var(--space-7-p-5-x, 60px);
1447
+
1448
+ /* Global - StackSpace - Responsive - Lg */
1449
+ --density-lg-stack-space-resp-sm: var(--space-2-p-5-x, 20px);
1450
+ --density-lg-stack-space-resp-md: var(--space-3-p-5-x, 28px);
1451
+ --density-lg-stack-space-resp-lg: var(--space-5-x, 40px);
1452
+ --density-lg-stack-space-resp-xl: var(--space-6-x, 48px);
1453
+ --density-lg-stack-space-resp-2-xl: var(--space-10-x, 80px);
1430
1454
 
1431
- [data-content-brand="bild"] .quote,
1432
- :host([data-content-brand="bild"]) .quote {
1433
- font-family: var(--quote-font-family);
1434
- font-weight: var(--quote-font-weight);
1435
- font-size: var(--quote-font-size);
1436
- line-height: var(--quote-line-height);
1437
1455
  }
1438
1456
 
1439
1457
 
@@ -1442,30 +1460,8 @@
1442
1460
  COMPONENTS
1443
1461
  ============================================================ */
1444
1462
 
1445
- /* === TYPOGRAPHY TOKENS === */
1446
-
1447
- [data-content-brand="bild"] .accordion-label,
1448
- :host([data-content-brand="bild"]) .accordion-label {
1449
- font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
1450
- font-weight: var(--label-font-weight-bold);
1451
- font-size: var(--label-1-font-size);
1452
- }
1453
-
1454
- /* === BREAKPOINT TOKENS === */
1455
-
1456
- [data-content-brand="bild"],
1457
- :host([data-content-brand="bild"]) {
1458
- --accordion-label-font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
1459
- }
1460
-
1461
1463
  /* === OTHER TOKENS === */
1462
1464
 
1463
- [data-color-brand="bild"],
1464
- :host([data-color-brand="bild"]) {
1465
- --alert-surface-color: var(--attention-color-extra-low);
1466
- --alert-surface-color-constant: var(--surface-color-primary-constant-light);
1467
- }
1468
-
1469
1465
  /* === TYPOGRAPHY TOKENS === */
1470
1466
 
1471
1467
  [data-content-brand="bild"] .article-kicker,
@@ -1476,91 +1472,57 @@
1476
1472
  line-height: var(--kicker-1-line-height);
1477
1473
  }
1478
1474
 
1479
- [data-content-brand="bild"] .article-image-caption,
1480
- :host([data-content-brand="bild"]) .article-image-caption {
1481
- font-family: var(--body-font-family);
1482
- font-weight: var(--font-weight-bold, 700);
1483
- font-size: var(--article-image-caption-font-size);
1484
- line-height: var(--article-image-caption-line-height);
1485
- }
1486
-
1487
- [data-content-brand="bild"] .article-headline,
1488
- :host([data-content-brand="bild"]) .article-headline {
1489
- font-family: var(--headline-font-family);
1490
- font-weight: 900;
1491
- font-size: var(--headline-2-font-size);
1492
- line-height: var(--headline-2-font-size);
1493
- }
1494
-
1495
- [data-content-brand="bild"] .article-meta-source,
1496
- :host([data-content-brand="bild"]) .article-meta-source {
1497
- font-family: var(--footnote-font-family);
1498
- font-weight: var(--footnote-font-weight-book);
1499
- font-size: 16px;
1500
- line-height: 21px;
1501
- }
1502
-
1503
- [data-content-brand="bild"] .article-time-stamp,
1504
- :host([data-content-brand="bild"]) .article-time-stamp {
1505
- font-family: var(--font-family-gotham, Gotham);
1506
- font-weight: var(--font-weight-black, 800);
1507
- font-size: 12px;
1508
- }
1509
-
1510
1475
  /* === BREAKPOINT TOKENS === */
1511
1476
 
1512
1477
  [data-content-brand="bild"],
1513
1478
  :host([data-content-brand="bild"]) {
1514
1479
  --aricle-mobile-1-col-grid-image-margin-space: var(--space-0-x, 0px);
1515
1480
  --article-top-margin-space: var(--stack-space-resp-sm);
1516
- --article-kicker-font-size: var(--kicker-1-font-size);
1517
- --article-headline-font-size: var(--headline-2-font-size);
1518
- --article-gallery-ateaser-width: 145px;
1519
- --article-image-caption-font-size: 16px;
1520
- --article-image-source-font-size: 16px;
1521
- --article-image-caption-line-height: 19.5px;
1522
- --article-image-source-line-height: 21px;
1523
1481
  --article-content-stack-space: var(--stack-space-resp-lg);
1524
1482
  --article-headings-stack-space: var(--space-1-p-5-x, 12px);
1525
1483
  --article-image-landscape-inline-space: var(--space-0-x, 0px);
1526
- --article-meta-font-family: var(--font-family-gotham, Gotham);
1527
- --article-meta-font-size: 12px;
1528
1484
  --article-content-inline-space: var(--space-2-x, 16px);
1529
1485
  --article-headings-inline-space: var(--space-2-x, 16px);
1530
1486
  --article-image-portait-inline-space: var(--space-0-x, 0px);
1531
1487
  --article-image-container-stack-space: var(--stack-space-resp-sm);
1532
1488
  --article-infobox-inline-space: var(--inline-space-resp-lg);
1533
1489
  --article-infobox-stack-space: var(--stack-space-resp-lg);
1490
+ --article-kicker-font-size: var(--kicker-1-font-size);
1491
+ --article-headline-font-size: var(--headline-2-font-size);
1492
+ --article-image-caption-font-size: 16px;
1493
+ --article-image-source-font-size: 16px;
1494
+ --article-meta-font-size: 12px;
1495
+ --article-image-caption-line-height: 19.5px;
1496
+ --article-image-source-line-height: 21px;
1497
+ --article-meta-font-family: var(--font-family-gotham, Gotham);
1534
1498
  }
1535
1499
 
1536
1500
  @media (min-width: 600px) {
1537
1501
  [data-content-brand="bild"],
1538
1502
  :host([data-content-brand="bild"]) {
1539
1503
  --aricle-mobile-1-col-grid-image-margin-space: var(--space-9-x, 72px);
1540
- --article-headline-font-size: var(--headline-1-font-size);
1541
- --article-gallery-ateaser-width: 260px;
1542
- --article-image-caption-font-size: 18px;
1543
- --article-image-caption-line-height: 24.75px;
1544
1504
  --article-image-landscape-inline-space: var(--space-1-p-5-x, 12px);
1545
- --article-meta-font-size: 14px;
1546
1505
  --article-content-inline-space: var(--space-9-x, 72px);
1547
1506
  --article-headings-inline-space: var(--space-9-x, 72px);
1548
1507
  --article-image-portait-inline-space: var(--space-9-x, 72px);
1508
+ --article-headline-font-size: var(--headline-1-font-size);
1509
+ --article-image-caption-font-size: 18px;
1510
+ --article-meta-font-size: 14px;
1511
+ --article-image-caption-line-height: 24.75px;
1549
1512
  }
1550
1513
  }
1551
1514
 
1552
1515
  @media (min-width: 1024px) {
1553
1516
  [data-content-brand="bild"],
1554
1517
  :host([data-content-brand="bild"]) {
1555
- --article-gallery-ateaser-width: 300px;
1556
- --article-image-source-font-size: 18px;
1557
- --article-image-source-line-height: 23px;
1558
1518
  --article-headings-stack-space: var(--space-2-x, 16px);
1559
1519
  --article-image-landscape-inline-space: var(--space-2-x, 16px);
1560
- --article-meta-font-size: 16px;
1561
1520
  --article-content-inline-space: 162px;
1562
1521
  --article-headings-inline-space: var(--space-2-x, 16px);
1563
1522
  --article-image-portait-inline-space: 162px;
1523
+ --article-image-source-font-size: 18px;
1524
+ --article-meta-font-size: 16px;
1525
+ --article-image-source-line-height: 23px;
1564
1526
  }
1565
1527
  }
1566
1528
 
@@ -1592,26 +1554,14 @@
1592
1554
 
1593
1555
  [data-color-brand="bild"][data-theme="light"],
1594
1556
  :host([data-color-brand="bild"][data-theme="light"]) {
1595
- /* ============================================
1596
- OTHER
1597
- ============================================ */
1598
-
1599
- --avatar-label-color: var(--color-neutral-15, #232629);
1600
- --avatar-label-color-hover: var(--color-bild-red-50, #DD0000);
1601
-
1557
+ --avatar-label-color-hover: var(--text-color-hover);
1602
1558
  }
1603
1559
 
1604
1560
  /* === COLOR TOKENS (DARK MODE) === */
1605
1561
 
1606
1562
  [data-color-brand="bild"][data-theme="dark"],
1607
1563
  :host([data-color-brand="bild"][data-theme="dark"]) {
1608
- /* ============================================
1609
- OTHER
1610
- ============================================ */
1611
-
1612
- --avatar-label-color: var(--color-neutral-100, #FFFFFF);
1613
- --avatar-label-color-hover: var(--color-bild-red-50, #DD0000);
1614
-
1564
+ --avatar-label-color-hover: var(--icon-color-hover);
1615
1565
  }
1616
1566
 
1617
1567
  /* === TYPOGRAPHY TOKENS === */
@@ -1624,40 +1574,6 @@
1624
1574
  text-transform: uppercase;
1625
1575
  }
1626
1576
 
1627
- [data-content-brand="bild"] .avatar-default,
1628
- :host([data-content-brand="bild"]) .avatar-default {
1629
- font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
1630
- font-weight: var(--font-weight-bold, 700);
1631
- font-size: 16px;
1632
- line-height: 21px;
1633
- }
1634
-
1635
- [data-content-brand="bild"] .avatar-hover,
1636
- :host([data-content-brand="bild"]) .avatar-hover {
1637
- font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
1638
- font-weight: var(--label-font-weight-bold);
1639
- font-size: 16px;
1640
- line-height: 21px;
1641
- text-decoration: underline;
1642
- }
1643
-
1644
- [data-content-brand="bild"] .avatar-secondary-info,
1645
- :host([data-content-brand="bild"]) .avatar-secondary-info {
1646
- font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
1647
- font-weight: var(--label-font-weight-book);
1648
- font-size: 16px;
1649
- line-height: 21px;
1650
- }
1651
-
1652
- [data-content-brand="bild"] .avatar-secondary-info-hover,
1653
- :host([data-content-brand="bild"]) .avatar-secondary-info-hover {
1654
- font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
1655
- font-weight: var(--label-font-weight-book);
1656
- font-size: 16px;
1657
- line-height: 21px;
1658
- text-decoration: underline;
1659
- }
1660
-
1661
1577
  /* === BREAKPOINT TOKENS === */
1662
1578
 
1663
1579
  [data-content-brand="bild"],
@@ -1665,7 +1581,7 @@
1665
1581
  --avatar-label-font-size: 16px;
1666
1582
  --avatar-article-size: var(--size-const-md);
1667
1583
  --avatar-author-page-size: var(--size-12-x, 96px);
1668
- --avatar-font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
1584
+ --avatar-font-family: var(--body-font-family);
1669
1585
  --avatar-label-line-height: 21px;
1670
1586
  --avatar-lane-gap-space: var(--space-2-x, 16px);
1671
1587
  --app-avatar-font-family: var(--title-font-family);
@@ -1687,24 +1603,23 @@
1687
1603
  }
1688
1604
  }
1689
1605
 
1606
+ /* === OTHER TOKENS === */
1607
+
1608
+ [data-color-brand="bild"],
1609
+ :host([data-color-brand="bild"]) {
1610
+ --avatar-label-color: var(--text-color-primary);
1611
+ }
1612
+
1690
1613
  /* === TYPOGRAPHY TOKENS === */
1691
1614
 
1692
1615
  [data-content-brand="bild"] .video-ad-badge,
1693
1616
  :host([data-content-brand="bild"]) .video-ad-badge {
1694
- font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
1617
+ font-family: var(--body-font-family);
1695
1618
  font-weight: var(--font-weight-book, 400);
1696
1619
  font-size: 14px;
1697
1620
  text-transform: uppercase;
1698
1621
  }
1699
1622
 
1700
- [data-content-brand="bild"] .video-time-badge,
1701
- :host([data-content-brand="bild"]) .video-time-badge {
1702
- font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
1703
- font-weight: var(--label-font-weight-book);
1704
- font-size: 16px;
1705
- line-height: 21px;
1706
- }
1707
-
1708
1623
  /* === BREAKPOINT TOKENS === */
1709
1624
 
1710
1625
  [data-content-brand="bild"],
@@ -1714,71 +1629,27 @@
1714
1629
  --ad-label-badge-height-size: 30px;
1715
1630
  }
1716
1631
 
1717
- /* === COLOR TOKENS (LIGHT MODE) === */
1718
-
1719
- [data-color-brand="bild"][data-theme="light"],
1720
- :host([data-color-brand="bild"][data-theme="light"]) {
1721
- /* ============================================
1722
- OTHER
1723
- ============================================ */
1724
-
1725
- --breadcrumb-text-color-idle: var(--color-neutral-35, #4B525A);
1726
- --breadcrumb-text-color-hover: var(--color-neutral-15, #232629);
1727
-
1728
- }
1729
-
1730
- /* === COLOR TOKENS (DARK MODE) === */
1731
-
1732
- [data-color-brand="bild"][data-theme="dark"],
1733
- :host([data-color-brand="bild"][data-theme="dark"]) {
1734
- /* ============================================
1735
- OTHER
1736
- ============================================ */
1737
-
1738
- --breadcrumb-text-color-idle: var(--color-neutral-96, #F2F4F5);
1739
- --breadcrumb-text-color-hover: var(--color-neutral-100, #FFFFFF);
1740
-
1741
- }
1742
-
1743
1632
  /* === TYPOGRAPHY TOKENS === */
1744
1633
 
1745
1634
  [data-content-brand="bild"] .breadcrumb,
1746
1635
  :host([data-content-brand="bild"]) .breadcrumb {
1747
- font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
1748
- font-weight: var(--font-weight-bold, 700);
1636
+ font-family: var(--body-font-family);
1637
+ font-weight: var(--body-font-weight-bold);
1749
1638
  font-size: var(--breadcrumb-font-size);
1750
1639
  line-height: var(--breadcrumb-line-height);
1751
1640
  }
1752
1641
 
1753
- [data-content-brand="bild"] .breadcrumb-link,
1754
- :host([data-content-brand="bild"]) .breadcrumb-link {
1755
- font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
1756
- font-weight: var(--font-weight-bold, 700);
1757
- font-size: 15px;
1758
- line-height: 15px;
1759
- text-decoration: underline;
1760
- }
1761
-
1762
- [data-content-brand="bild"] .breadcrumb-link-hover,
1763
- :host([data-content-brand="bild"]) .breadcrumb-link-hover {
1764
- font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
1765
- font-weight: var(--body-font-weight-bold);
1766
- font-size: 15px;
1767
- line-height: 15px;
1768
- text-decoration: underline;
1769
- }
1770
-
1771
1642
  /* === BREAKPOINT TOKENS === */
1772
1643
 
1773
1644
  [data-content-brand="bild"],
1774
1645
  :host([data-content-brand="bild"]) {
1775
1646
  --breadcrumb-font-size: 15px;
1776
- --breadcrumb-font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
1647
+ --breadcrumb-font-family: var(--body-font-family);
1777
1648
  --breadcrumb-arrow-left-inline-space-1: 3px;
1778
1649
  --breadcrumb-arrow-right-inline-space-2: 5px;
1779
1650
  --breadcrumb-inline-space: var(--grid-space-resp-base);
1780
1651
  --breadcrumb-line-height: 15px;
1781
- --breadcrumb-font-weight: var(--font-weight-bold, 700);
1652
+ --breadcrumb-font-weight: var(--body-font-weight-bold);
1782
1653
  --breadcrumb-stack-space: 14px;
1783
1654
  }
1784
1655
 
@@ -1792,6 +1663,14 @@
1792
1663
  }
1793
1664
  }
1794
1665
 
1666
+ /* === OTHER TOKENS === */
1667
+
1668
+ [data-color-brand="bild"],
1669
+ :host([data-color-brand="bild"]) {
1670
+ --breadcrumb-text-color-idle: var(--text-color-idle);
1671
+ --breadcrumb-text-color-hover: var(--text-color-hover);
1672
+ }
1673
+
1795
1674
  /* === COLOR TOKENS (LIGHT MODE) === */
1796
1675
 
1797
1676
  [data-color-brand="bild"][data-theme="light"],
@@ -1800,11 +1679,11 @@
1800
1679
  OTHER
1801
1680
  ============================================ */
1802
1681
 
1803
- --breaking-news-title-surface-color: var(--color-orange-67, #FD8227);
1804
- --breaking-news-surface-color: var(--color-neutral-15, #232629);
1682
+ --breaking-news-title-surface-color: var(--color-orange-70, #FD8227);
1683
+ --breaking-news-surface-color: var(--color-neutral-15, #222628);
1805
1684
  --breaking-news-text-content-color: var(--color-neutral-100, #FFFFFF);
1806
- --breaking-news-top-title-text-color: var(--color-neutral-10, #1C1C1C);
1807
- --breaking-news-bottom-title-text-color: var(--color-neutral-10, #1C1C1C);
1685
+ --breaking-news-top-title-text-color: var(--color-neutral-10, #191B1C);
1686
+ --breaking-news-bottom-title-text-color: var(--color-neutral-10, #191B1C);
1808
1687
 
1809
1688
  }
1810
1689
 
@@ -1816,11 +1695,11 @@
1816
1695
  OTHER
1817
1696
  ============================================ */
1818
1697
 
1819
- --breaking-news-title-surface-color: var(--color-orange-67, #FD8227);
1820
- --breaking-news-surface-color: var(--color-neutral-93, #E9ECEF);
1821
- --breaking-news-text-content-color: var(--color-neutral-15, #232629);
1822
- --breaking-news-top-title-text-color: var(--color-neutral-10, #1C1C1C);
1823
- --breaking-news-bottom-title-text-color: var(--color-neutral-10, #1C1C1C);
1698
+ --breaking-news-title-surface-color: var(--color-orange-70, #FD8227);
1699
+ --breaking-news-surface-color: var(--color-neutral-90, #DDE1E2);
1700
+ --breaking-news-text-content-color: var(--color-neutral-15, #222628);
1701
+ --breaking-news-top-title-text-color: var(--color-neutral-10, #191B1C);
1702
+ --breaking-news-bottom-title-text-color: var(--color-neutral-10, #191B1C);
1824
1703
 
1825
1704
  }
1826
1705
 
@@ -1835,22 +1714,6 @@
1835
1714
  text-transform: uppercase;
1836
1715
  }
1837
1716
 
1838
- [data-content-brand="bild"] .breaking-news-upper-title,
1839
- :host([data-content-brand="bild"]) .breaking-news-upper-title {
1840
- font-family: var(--title-font-family);
1841
- font-weight: var(--title-font-weight);
1842
- font-size: 13px;
1843
- line-height: 13px;
1844
- }
1845
-
1846
- [data-content-brand="bild"] .breaking-news-lower-title,
1847
- :host([data-content-brand="bild"]) .breaking-news-lower-title {
1848
- font-family: var(--title-font-family);
1849
- font-weight: var(--title-font-weight);
1850
- font-size: 23px;
1851
- line-height: 21px;
1852
- }
1853
-
1854
1717
  /* === BREAKPOINT TOKENS === */
1855
1718
 
1856
1719
  [data-content-brand="bild"],
@@ -1884,52 +1747,6 @@
1884
1747
  }
1885
1748
  }
1886
1749
 
1887
- /* === COLOR TOKENS (LIGHT MODE) === */
1888
-
1889
- [data-color-brand="bild"][data-theme="light"],
1890
- :host([data-color-brand="bild"][data-theme="light"]) {
1891
- --button-primary-brand-bg-color-idle: var(--color-bild-red-50, #DD0000);
1892
- --button-primary-brand-bg-color-hover: var(--color-bild-red-35, #AF0002);
1893
- --button-primary-label-color: var(--color-neutral-100, #FFFFFF);
1894
- --button-primary-success-color-idle: var(--color-green-56, #18995C);
1895
- --button-primary-success-color-hover: var(--color-green-40, #006E3E);
1896
- --button-primary-neutral-bg-color-idle: var(--color-neutral-15, #232629);
1897
- --button-primary-neutral-bg-color-hover: var(--color-neutral-35, #4B525A);
1898
- --button-tertiary-label-color: var(--color-neutral-35, #4B525A);
1899
- --button-tertiary-border-color-idle: var(--color-neutral-85, #CED4DA);
1900
- --button-tertiary-border-color-hover: var(--color-neutral-35, #4B525A);
1901
- --button-tertiary-success-bg-color-hover: var(--color-green-93, #CEF4E4);
1902
- --button-tertiary-success-border-color: var(--color-green-56, #18995C);
1903
- --button-secondary-bg-color-hover: var(--color-neutral-85, #CED4DA);
1904
- --button-secondary-label-color: var(--color-neutral-35, #4B525A);
1905
- --button-secondary-bg-color-idle: var(--color-neutral-93, #E9ECEF);
1906
- --button-live-ticker-load-new-label-color: var(--color-neutral-60, #8C9196);
1907
- --button-ghost-bg-color-hover: var(--color-neutral-85, #CED4DA);
1908
- }
1909
-
1910
- /* === COLOR TOKENS (DARK MODE) === */
1911
-
1912
- [data-color-brand="bild"][data-theme="dark"],
1913
- :host([data-color-brand="bild"][data-theme="dark"]) {
1914
- --button-primary-brand-bg-color-idle: var(--color-bild-red-50, #DD0000);
1915
- --button-primary-brand-bg-color-hover: var(--color-bild-red-35, #AF0002);
1916
- --button-primary-label-color: var(--color-neutral-100, #FFFFFF);
1917
- --button-primary-success-color-idle: var(--color-green-56, #18995C);
1918
- --button-primary-success-color-hover: var(--color-green-40, #006E3E);
1919
- --button-primary-neutral-bg-color-idle: var(--color-neutral-100, #FFFFFF);
1920
- --button-primary-neutral-bg-color-hover: var(--color-neutral-93, #E9ECEF);
1921
- --button-tertiary-label-color: var(--color-neutral-96, #F2F4F5);
1922
- --button-tertiary-border-color-idle: var(--color-neutral-35, #4B525A);
1923
- --button-tertiary-border-color-hover: var(--color-neutral-100, #FFFFFF);
1924
- --button-tertiary-success-bg-color-hover: var(--color-green-56-a-50, rgba(0, 155, 90, 0.5));
1925
- --button-tertiary-success-border-color: var(--color-green-56, #18995C);
1926
- --button-secondary-bg-color-hover: var(--alpha-neutral-85-a-50, rgba(206, 212, 218, 0.5));
1927
- --button-secondary-label-color: var(--color-neutral-93, #E9ECEF);
1928
- --button-secondary-bg-color-idle: var(--color-neutral-35, #4B525A);
1929
- --button-live-ticker-load-new-label-color: var(--color-neutral-96, #F2F4F5);
1930
- --button-ghost-bg-color-hover: var(--alpha-neutral-85-a-50, rgba(206, 212, 218, 0.5));
1931
- }
1932
-
1933
1750
  /* === DENSITY TOKENS === */
1934
1751
 
1935
1752
  [data-content-brand="bild"][data-density="default"],
@@ -1942,6 +1759,7 @@
1942
1759
  --density-button-stack-space: var(--space-1-x, 8px);
1943
1760
  --density-button-label-font-size: 17px;
1944
1761
  --density-button-inline-space: var(--space-2-p-5-x, 20px);
1762
+ --density-button-height-size: var(--size-5-x, 40px);
1945
1763
 
1946
1764
  }
1947
1765
 
@@ -1955,6 +1773,7 @@
1955
1773
  --density-button-stack-space: var(--space-0-p-75-x, 6px);
1956
1774
  --density-button-label-font-size: 15px;
1957
1775
  --density-button-inline-space: var(--space-2-x, 16px);
1776
+ --density-button-height-size: var(--size-4-p-5-x, 36px);
1958
1777
 
1959
1778
  }
1960
1779
 
@@ -1968,6 +1787,7 @@
1968
1787
  --density-button-stack-space: var(--space-1-p-5-x, 12px);
1969
1788
  --density-button-label-font-size: 19px;
1970
1789
  --density-button-inline-space: var(--space-3-x, 24px);
1790
+ --density-button-height-size: var(--size-6-x, 48px);
1971
1791
 
1972
1792
  }
1973
1793
 
@@ -1979,18 +1799,10 @@
1979
1799
  font-weight: 700;
1980
1800
  font-size: var(--button-label-font-size);
1981
1801
  line-height: var(--button-label-line-height);
1982
- letter-spacing: var(--letter-spacing-positive-sm);
1802
+ letter-spacing: var(--letter-space-positive-sm);
1983
1803
  text-transform: uppercase;
1984
1804
  }
1985
1805
 
1986
- [data-content-brand="bild"] .partner-link-button-label,
1987
- :host([data-content-brand="bild"]) .partner-link-button-label {
1988
- font-family: var(--label-font-family);
1989
- font-weight: var(--label-font-weight-book);
1990
- font-size: var(--partner-link-button-label-font-size);
1991
- line-height: 16px;
1992
- }
1993
-
1994
1806
  /* === BREAKPOINT TOKENS === */
1995
1807
 
1996
1808
  [data-content-brand="bild"],
@@ -2007,6 +1819,7 @@
2007
1819
  --button-stack-space: var(--density-button-stack-space);
2008
1820
  --button-border-radius: var(--border-radius-md);
2009
1821
  --button-label-font-family: var(--label-font-family);
1822
+ --button-height-size: var(--density-button-height-size);
2010
1823
  }
2011
1824
 
2012
1825
  @media (min-width: 1024px) {
@@ -2020,7 +1833,36 @@
2020
1833
 
2021
1834
  [data-color-brand="bild"],
2022
1835
  :host([data-color-brand="bild"]) {
2023
- --button-live-ticker-load-new-surface-color: var(--surface-color-primary);
1836
+ --button-primary-brand-bg-color-idle: var(--bg-color-brand-solid);
1837
+ --button-primary-brand-bg-color-hover: var(--bg-color-brand-solid-hover);
1838
+ --button-primary-brand-label-color: var(--text-color-primary-on-dark);
1839
+ --button-primary-brand-bg-color-active: var(--bg-color-brand-solid-active);
1840
+ --button-tertiary-neutral-label-color: var(--text-color-active);
1841
+ --button-tertiary-neutral-border-color-idle: var(--border-color-idle);
1842
+ --button-tertiary-neutral-border-color-hover: var(--border-color-selected);
1843
+ --button-tertiary-neutral-bg-color-hover: var(--bg-color-secondary);
1844
+ --button-tertiary-neutral-bg-color-active: var(--bg-color-tertiary);
1845
+ --button-secondary-bg-color-hover: var(--bg-color-quaternary);
1846
+ --button-secondary-label-color: var(--text-color-active);
1847
+ --button-secondary-bg-color-idle: var(--bg-color-tertiary);
1848
+ --button-secondary-bg-color-active: var(--bg-color-quaternary);
1849
+ --button-primary-success-bg-color-idle: var(--bg-color-success-solid);
1850
+ --button-primary-success-bg-color-hover: var(--bg-color-success-solid-hover);
1851
+ --button-primary-success-bg-color-active: var(--bg-color-success-solid-active);
1852
+ --button-primary-success-label-color: var(--text-color-primary-on-dark);
1853
+ --button-tertiary-success-bg-color-hover: var(--bg-color-success-tint-hover);
1854
+ --button-tertiary-success-border-color: var(--border-color-success);
1855
+ --button-tertiary-success-label-color: var(--text-color-success);
1856
+ --button-primary-neutral-bg-color-idle: var(--bg-color-primary-inverse);
1857
+ --button-primary-neutral-bg-color-hover: var(--bg-color-tertiary-inverse);
1858
+ --button-primary-neutral-label-color: var(--text-color-inverse-high-contrast);
1859
+ --button-primary-neutral-bg-color-active: var(--bg-color-quaternary-inverse);
1860
+ --button-ghost-bg-color-hover: var(--bg-color-tertiary);
1861
+ --button-ghost-label-color: var(--text-color-active);
1862
+ --button-ghost-bg-color-active: var(--bg-color-quaternary);
1863
+ --button-disabled-label-color: var(--text-color-disabled);
1864
+ --button-disabled-bg-color: var(--bg-color-disabled);
1865
+ --button-disabled-border-color: var(--border-color-disabled);
2024
1866
  }
2025
1867
 
2026
1868
  /* === COLOR TOKENS (LIGHT MODE) === */
@@ -2031,7 +1873,7 @@
2031
1873
  OTHER
2032
1874
  ============================================ */
2033
1875
 
2034
- --card-surface-bg-color: var(--surface-color-primary);
1876
+ --card-surface-bg-color: var(--bg-color-primary);
2035
1877
 
2036
1878
  }
2037
1879
 
@@ -2043,7 +1885,7 @@
2043
1885
  OTHER
2044
1886
  ============================================ */
2045
1887
 
2046
- --card-surface-bg-color: var(--surface-color-secondary);
1888
+ --card-surface-bg-color: var(--bg-color-secondary);
2047
1889
 
2048
1890
  }
2049
1891
 
@@ -2100,32 +1942,16 @@
2100
1942
 
2101
1943
  [data-color-brand="bild"][data-theme="light"],
2102
1944
  :host([data-color-brand="bild"][data-theme="light"]) {
2103
- /* ============================================
2104
- OTHER
2105
- ============================================ */
2106
-
2107
- --chip-bg-color-hover: var(--color-bild-red-35, #AF0002);
2108
- --chip-label-color-hover: var(--core-color-secondary-constant);
2109
- --chip-bg-color-active: var(--color-bild-red-50, #DD0000);
2110
- --chip-bg-color-idle: var(--color-neutral-93, #E9ECEF);
2111
- --chip-label-color-idle: var(--color-neutral-15, #232629);
2112
-
1945
+ --chip-bg-color-hover: var(--bg-color-brand-solid-hover);
1946
+ --chip-label-color-hover: var(--text-color-primary-on-dark);
2113
1947
  }
2114
1948
 
2115
1949
  /* === COLOR TOKENS (DARK MODE) === */
2116
1950
 
2117
1951
  [data-color-brand="bild"][data-theme="dark"],
2118
1952
  :host([data-color-brand="bild"][data-theme="dark"]) {
2119
- /* ============================================
2120
- OTHER
2121
- ============================================ */
2122
-
2123
- --chip-bg-color-hover: var(--color-neutral-85, #CED4DA);
2124
- --chip-label-color-hover: var(--core-color-tertiary-constant);
2125
- --chip-bg-color-active: var(--color-neutral-100, #FFFFFF);
2126
- --chip-bg-color-idle: var(--color-neutral-35, #4B525A);
2127
- --chip-label-color-idle: var(--color-neutral-100, #FFFFFF);
2128
-
1953
+ --chip-bg-color-hover: var(--bg-color-tertiary-inverse);
1954
+ --chip-label-color-hover: var(--text-color-primary-on-light);
2129
1955
  }
2130
1956
 
2131
1957
  /* === TYPOGRAPHY TOKENS === */
@@ -2153,12 +1979,22 @@
2153
1979
  }
2154
1980
  }
2155
1981
 
1982
+ /* === OTHER TOKENS === */
1983
+
1984
+ [data-color-brand="bild"],
1985
+ :host([data-color-brand="bild"]) {
1986
+ --chip-bg-color-active: var(--bg-color-brand-light-only);
1987
+ --chip-bg-color-idle: var(--bg-color-tertiary);
1988
+ --chip-label-color-idle: var(--text-color-idle);
1989
+ --chip-label-color-active: var(--text-color-inverse-high-contrast);
1990
+ }
1991
+
2156
1992
  /* === BREAKPOINT TOKENS === */
2157
1993
 
2158
1994
  [data-content-brand="bild"],
2159
1995
  :host([data-content-brand="bild"]) {
2160
- --datepicker-item-day-width-size: 44px;
2161
- --datepicker-item-height-size: 44px;
1996
+ --datepicker-item-day-width-size: var(--size-5-p-5-x, 44px);
1997
+ --datepicker-item-height-size: var(--size-5-p-5-x, 44px);
2162
1998
  --datepicker-item-year-width-size: 77px;
2163
1999
  }
2164
2000
 
@@ -2180,8 +2016,8 @@
2180
2016
  OTHER
2181
2017
  ============================================ */
2182
2018
 
2183
- --dropdown-bg-color-hover: var(--surface-color-secondary);
2184
- --dropdown-bg-color-idle: var(--surface-color-primary);
2019
+ --dropdown-bg-color-hover: var(--bg-color-secondary);
2020
+ --dropdown-bg-color-idle: var(--bg-color-primary);
2185
2021
 
2186
2022
  }
2187
2023
 
@@ -2193,8 +2029,8 @@
2193
2029
  OTHER
2194
2030
  ============================================ */
2195
2031
 
2196
- --dropdown-bg-color-hover: var(--surface-color-quartenary);
2197
- --dropdown-bg-color-idle: var(--surface-color-tertiary);
2032
+ --dropdown-bg-color-hover: var(--bg-color-quaternary);
2033
+ --dropdown-bg-color-idle: var(--bg-color-tertiary);
2198
2034
 
2199
2035
  }
2200
2036
 
@@ -2215,8 +2051,8 @@
2215
2051
  OTHER
2216
2052
  ============================================ */
2217
2053
 
2218
- --empties-bg-color: var(--surface-color-secondary);
2219
- --empties-logo-color: var(--color-neutral-85, #CED4DA);
2054
+ --empties-bg-color: var(--bg-color-secondary);
2055
+ --empties-logo-color: var(--bg-color-quaternary);
2220
2056
 
2221
2057
  }
2222
2058
 
@@ -2228,73 +2064,28 @@
2228
2064
  OTHER
2229
2065
  ============================================ */
2230
2066
 
2231
- --empties-bg-color: var(--surface-color-tertiary);
2232
- --empties-logo-color: var(--color-neutral-20, #2C3138);
2233
-
2234
- }
2235
-
2236
- /* === COLOR TOKENS (LIGHT MODE) === */
2237
-
2238
- [data-color-brand="bild"][data-theme="light"],
2239
- :host([data-color-brand="bild"][data-theme="light"]) {
2240
- --foldout-label-color-active: var(--color-primary-active);
2241
- }
2242
-
2243
- /* === COLOR TOKENS (DARK MODE) === */
2244
-
2245
- [data-color-brand="bild"][data-theme="dark"],
2246
- :host([data-color-brand="bild"][data-theme="dark"]) {
2247
- --foldout-label-color-active: var(--color-secondary-active);
2248
- }
2249
-
2250
- /* === OTHER TOKENS === */
2067
+ --empties-bg-color: var(--bg-color-tertiary);
2068
+ --empties-logo-color: var(--bg-color-secondary);
2251
2069
 
2252
- [data-color-brand="bild"],
2253
- :host([data-color-brand="bild"]) {
2254
- --foldout-label-color-idle: var(--label-color-secondary);
2255
2070
  }
2256
2071
 
2257
2072
  /* === TYPOGRAPHY TOKENS === */
2258
2073
 
2259
- [data-content-brand="bild"] .footer-card-link,
2260
- :host([data-content-brand="bild"]) .footer-card-link {
2261
- font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
2262
- font-weight: var(--font-weight-book, 400);
2263
- font-size: var(--label-2-font-size);
2264
- text-decoration: underline;
2265
- }
2266
-
2267
- [data-content-brand="bild"] .footer-link-separator,
2268
- :host([data-content-brand="bild"]) .footer-link-separator {
2269
- font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
2270
- font-weight: var(--font-weight-book, 400);
2271
- }
2272
-
2273
- [data-content-brand="bild"] .footer-links,
2274
- :host([data-content-brand="bild"]) .footer-links {
2275
- font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
2074
+ [data-content-brand="bild"] .footer-link,
2075
+ :host([data-content-brand="bild"]) .footer-link {
2076
+ font-family: var(--body-font-family);
2276
2077
  font-weight: var(--label-font-weight-bold);
2277
2078
  font-size: 11px;
2278
2079
  line-height: 14px;
2279
2080
  }
2280
2081
 
2281
- [data-content-brand="bild"] .footer-link-user-offer-pages,
2282
- :host([data-content-brand="bild"]) .footer-link-user-offer-pages {
2283
- font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
2284
- font-weight: var(--font-weight-book, 400);
2285
- font-size: 18px;
2286
- line-height: 26px;
2287
- }
2288
-
2289
2082
  /* === BREAKPOINT TOKENS === */
2290
2083
 
2291
2084
  [data-content-brand="bild"],
2292
2085
  :host([data-content-brand="bild"]) {
2293
2086
  --footer-font-size: 11px;
2294
2087
  --footer-line-height: 14px;
2295
- --footer-font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
2296
- --footer-font-size-user-offer-pages: 18px;
2297
- --footer-line-height-user-offer-pages: 26px;
2088
+ --footer-font-family: var(--body-font-family);
2298
2089
  }
2299
2090
 
2300
2091
  /* === COLOR TOKENS (LIGHT MODE) === */
@@ -2321,35 +2112,43 @@
2321
2112
 
2322
2113
  }
2323
2114
 
2324
- /* === COLOR TOKENS (LIGHT MODE) === */
2115
+ /* === BREAKPOINT TOKENS === */
2325
2116
 
2326
- [data-color-brand="bild"][data-theme="light"],
2327
- :host([data-color-brand="bild"][data-theme="light"]) {
2117
+ [data-content-brand="bild"],
2118
+ :host([data-content-brand="bild"]) {
2119
+ --icon-size: var(--size-const-2-xs);
2120
+ --icon-size-embedd-media: 40px;
2121
+ }
2122
+
2123
+ /* === DENSITY TOKENS === */
2124
+
2125
+ [data-content-brand="bild"][data-density="default"],
2126
+ :host([data-content-brand="bild"][data-density="default"]) {
2328
2127
  /* ============================================
2329
2128
  OTHER
2330
2129
  ============================================ */
2331
2130
 
2332
- --hey-fav-input-field-surface-color: var(--color-neutral-93, #E9ECEF);
2333
- --hey-text-color: var(--color-neutral-35, #4B525A);
2334
- --hey-icon-util-color: var(--color-neutral-35, #4B525A);
2335
- --hey-separator-color: var(--color-neutral-85, #CED4DA);
2336
- --hey-drawer-surface-color: var(--surface-color-secondary);
2131
+ --density-icon-button-size: var(--size-6-x, 48px);
2337
2132
 
2338
2133
  }
2339
2134
 
2340
- /* === COLOR TOKENS (DARK MODE) === */
2135
+ [data-content-brand="bild"][data-density="dense"],
2136
+ :host([data-content-brand="bild"][data-density="dense"]) {
2137
+ /* ============================================
2138
+ OTHER
2139
+ ============================================ */
2341
2140
 
2342
- [data-color-brand="bild"][data-theme="dark"],
2343
- :host([data-color-brand="bild"][data-theme="dark"]) {
2141
+ --density-icon-button-size: var(--size-5-x, 40px);
2142
+
2143
+ }
2144
+
2145
+ [data-content-brand="bild"][data-density="spacious"],
2146
+ :host([data-content-brand="bild"][data-density="spacious"]) {
2344
2147
  /* ============================================
2345
2148
  OTHER
2346
2149
  ============================================ */
2347
2150
 
2348
- --hey-fav-input-field-surface-color: var(--color-neutral-35, #4B525A);
2349
- --hey-text-color: var(--color-neutral-93, #E9ECEF);
2350
- --hey-icon-util-color: var(--color-neutral-100, #FFFFFF);
2351
- --hey-separator-color: var(--color-neutral-45, #666B70);
2352
- --hey-drawer-surface-color: var(--surface-color-tertiary);
2151
+ --density-icon-button-size: var(--size-7-x, 56px);
2353
2152
 
2354
2153
  }
2355
2154
 
@@ -2357,8 +2156,8 @@
2357
2156
 
2358
2157
  [data-content-brand="bild"],
2359
2158
  :host([data-content-brand="bild"]) {
2360
- --icon-size: var(--size-const-2-xs);
2361
- --icon-size-embedd-media: 40px;
2159
+ --icon-button-size: var(--density-icon-button-size);
2160
+ --icon-button-border-radius: var(--border-radius-md);
2362
2161
  }
2363
2162
 
2364
2163
  /* === BREAKPOINT TOKENS === */
@@ -2389,30 +2188,6 @@
2389
2188
  }
2390
2189
  }
2391
2190
 
2392
- /* === COLOR TOKENS (LIGHT MODE) === */
2393
-
2394
- [data-color-brand="bild"][data-theme="light"],
2395
- :host([data-color-brand="bild"][data-theme="light"]) {
2396
- --input-field-border-color-idle: var(--color-neutral-85, #CED4DA);
2397
- --input-field-border-color-active: var(--color-neutral-35, #4B525A);
2398
- --input-field-border-color-dark: var(--color-neutral-60, #8C9196);
2399
- --input-field-bg-color-dark-low-contrast: var(--color-neutral-25, #343C41);
2400
- --input-field-bg-color-dark-medium-contrast: var(--color-neutral-35, #4B525A);
2401
- --input-field-bg-color-dark-high-contrast: var(--color-neutral-93, #E9ECEF);
2402
- }
2403
-
2404
- /* === COLOR TOKENS (DARK MODE) === */
2405
-
2406
- [data-color-brand="bild"][data-theme="dark"],
2407
- :host([data-color-brand="bild"][data-theme="dark"]) {
2408
- --input-field-border-color-idle: var(--color-neutral-60, #8C9196);
2409
- --input-field-border-color-active: var(--color-neutral-93, #E9ECEF);
2410
- --input-field-border-color-dark: var(--color-neutral-85, #CED4DA);
2411
- --input-field-bg-color-dark-low-contrast: var(--color-neutral-25, #343C41);
2412
- --input-field-bg-color-dark-medium-contrast: var(--color-neutral-35, #4B525A);
2413
- --input-field-bg-color-dark-high-contrast: var(--color-neutral-93, #E9ECEF);
2414
- }
2415
-
2416
2191
  /* === DENSITY TOKENS === */
2417
2192
 
2418
2193
  [data-content-brand="bild"][data-density="default"],
@@ -2425,6 +2200,7 @@
2425
2200
  --density-input-field-stack-space: var(--space-1-x, 8px);
2426
2201
  --density-input-field-height-size: var(--size-5-x, 40px);
2427
2202
  --density-input-field-label-font-size: 17px;
2203
+ --density-input-field-label-line-height: 17px;
2428
2204
 
2429
2205
  }
2430
2206
 
@@ -2438,6 +2214,7 @@
2438
2214
  --density-input-field-stack-space: var(--space-0-p-75-x, 6px);
2439
2215
  --density-input-field-height-size: var(--size-4-p-5-x, 36px);
2440
2216
  --density-input-field-label-font-size: 16px;
2217
+ --density-input-field-label-line-height: 16px;
2441
2218
 
2442
2219
  }
2443
2220
 
@@ -2451,14 +2228,15 @@
2451
2228
  --density-input-field-stack-space: var(--space-1-p-5-x, 12px);
2452
2229
  --density-input-field-height-size: var(--size-6-x, 48px);
2453
2230
  --density-input-field-label-font-size: 19px;
2231
+ --density-input-field-label-line-height: 19px;
2454
2232
 
2455
2233
  }
2456
2234
 
2457
2235
  /* === TYPOGRAPHY TOKENS === */
2458
2236
 
2459
- [data-content-brand="bild"] .text-input-field-label,
2460
- :host([data-content-brand="bild"]) .text-input-field-label {
2461
- font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
2237
+ [data-content-brand="bild"] .input-field-label,
2238
+ :host([data-content-brand="bild"]) .input-field-label {
2239
+ font-family: var(--body-font-family);
2462
2240
  font-weight: var(--label-font-weight-book);
2463
2241
  font-size: 16px;
2464
2242
  line-height: 16px;
@@ -2470,19 +2248,21 @@
2470
2248
  :host([data-content-brand="bild"]) {
2471
2249
  --input-field-stack-space: var(--density-input-field-stack-space);
2472
2250
  --input-field-inline-space: var(--density-input-field-inline-space);
2473
- --input-field-mini-label-inline-space: var(--space-0-p-5-x, 4px);
2474
- --input-field-font-size: var(--density-input-field-label-font-size);
2251
+ --input-field-mini-label-inline-space: var(--inline-space-const-2-xs);
2252
+ --input-field-label-font-size: var(--density-input-field-label-font-size);
2475
2253
  --input-field-imessage-inline-space: var(--inline-space-const-lg);
2476
2254
  --input-field-height-size: var(--density-input-field-height-size);
2477
2255
  --hey-input-container-inline-space: var(--inline-space-const-sm);
2478
2256
  --input-field-message-gap-space: var(--gap-space-const-xs);
2479
- --input-field-font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
2257
+ --input-field-label-font-family: var(--body-font-family);
2258
+ --input-field-label-line-height: var(--density-input-field-label-line-height);
2480
2259
  }
2481
2260
 
2482
2261
  @media (min-width: 1024px) {
2483
2262
  [data-content-brand="bild"],
2484
2263
  :host([data-content-brand="bild"]) {
2485
2264
  --hey-input-container-inline-space: var(--inline-space-const-lg);
2265
+ --input-field-label-line-height: var(--density-input-field-label-font-size);
2486
2266
  }
2487
2267
  }
2488
2268
 
@@ -2490,7 +2270,9 @@
2490
2270
 
2491
2271
  [data-color-brand="bild"],
2492
2272
  :host([data-color-brand="bild"]) {
2493
- --input-field-border-color-dark-active: var(--border-color-high-contrast);
2273
+ --input-field-border-color-idle: var(--border-color-idle);
2274
+ --input-field-border-color-active: var(--border-color-selected);
2275
+ --input-field-border-color-disabled: var(--border-color-disabled);
2494
2276
  }
2495
2277
 
2496
2278
  /* === COLOR TOKENS (LIGHT MODE) === */
@@ -2501,7 +2283,7 @@
2501
2283
  STANDARD
2502
2284
  ============================================ */
2503
2285
 
2504
- --kicker-bg-color-on-surface: var(--color-bild-red-50, #DD0000);
2286
+ --kicker-bg-color-on-surface: var(--bg-color-brand-solid);
2505
2287
 
2506
2288
 
2507
2289
  /* ============================================
@@ -2516,7 +2298,7 @@
2516
2298
  --kicker-kaufberater-bg-color: var(--color-partner-kaufberater, #55476E);
2517
2299
  --kicker-cobi-bg-color: var(--color-cobi-red-50, #DC231C);
2518
2300
  --kicker-aubi-bg-color: var(--color-aubi-red-50, #F00000);
2519
- --kicker-spobi-bg-color: var(--color-spobi-blue-29, #174482);
2301
+ --kicker-spobi-bg-color: var(--color-spobi-blue-30, #174482);
2520
2302
  --kicker-bz-bg-color: var(--color-bz-red-50, #E3001B);
2521
2303
 
2522
2304
  }
@@ -2529,7 +2311,7 @@
2529
2311
  STANDARD
2530
2312
  ============================================ */
2531
2313
 
2532
- --kicker-bg-color-on-surface: var(--color-neutral-60, #8C9196);
2314
+ --kicker-bg-color-on-surface: var(--bg-color-quaternary-inverse);
2533
2315
 
2534
2316
 
2535
2317
  /* ============================================
@@ -2544,7 +2326,7 @@
2544
2326
  --kicker-kaufberater-bg-color: var(--color-partner-kaufberater, #55476E);
2545
2327
  --kicker-cobi-bg-color: var(--color-cobi-red-50, #DC231C);
2546
2328
  --kicker-aubi-bg-color: var(--color-aubi-red-50, #F00000);
2547
- --kicker-spobi-bg-color: var(--color-spobi-blue-29, #174482);
2329
+ --kicker-spobi-bg-color: var(--color-spobi-blue-30, #174482);
2548
2330
  --kicker-bz-bg-color: var(--color-bz-red-50, #E3001B);
2549
2331
 
2550
2332
  }
@@ -2559,14 +2341,6 @@
2559
2341
  line-height: 22px;
2560
2342
  }
2561
2343
 
2562
- [data-content-brand="bild"] .live-ticker-time-stamp,
2563
- :host([data-content-brand="bild"]) .live-ticker-time-stamp {
2564
- font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
2565
- font-weight: var(--label-font-weight-bold);
2566
- font-size: var(--live-ticker-time-stamp-font-size);
2567
- line-height: 14px;
2568
- }
2569
-
2570
2344
  /* === BREAKPOINT TOKENS === */
2571
2345
 
2572
2346
  [data-content-brand="bild"],
@@ -2606,16 +2380,17 @@
2606
2380
  OTHER
2607
2381
  ============================================ */
2608
2382
 
2609
- --vid-player-controls-autoplay-button-bg-color: var(--alpha-black-20, rgba(0, 0, 0, 0.2));
2610
- --vid-player-control-buttons-bg-hover-color: var(--alpha-red-50-a-80, rgba(221, 0, 0, 0.8));
2611
- --vid-player-control-buttons-bg-color-hover: var(--alpha-black-20, rgba(0, 0, 0, 0.2));
2612
- --vid-player-overlay-scrim-color: var(--alpha-black-50, rgba(0, 0, 0, 0.5));
2613
- --audio-player-play-button-bg-color: var(--alpha-white-30, rgba(255, 255, 255, 0.3));
2614
- --vid-player-tooltip-bg-color: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
2615
- --vid-player-control-buttons-bg-color-pressed: var(--alpha-black-5, rgba(0, 0, 0, 0.05));
2616
- --vid-player-progress-bar-preload-bg-color: var(--alpha-white-30, rgba(255, 255, 255, 0.3));
2617
- --vid-player-unmute-button-bg-color: var(--alpha-black-20, rgba(0, 0, 0, 0.2));
2618
- --vid-player-unmute-button-bg-color-hover: var(--alpha-black-35, rgba(0, 0, 0, 0.35));
2383
+ --vid-player-controls-autoplay-button-bg-color: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
2384
+ --vid-player-control-buttons-bg-hover-color: var(--color-bild-red-50-a-80, rgba(221, 0, 0, 0.8));
2385
+ --vid-player-control-buttons-bg-color-hover: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
2386
+ --vid-player-overlay-scrim-color: var(--color-neutral-0-a-50, rgba(0, 0, 0, 0.5));
2387
+ --audio-player-play-button-bg-color: var(--color-neutral-100-a-30, rgba(255, 255, 255, 0.3));
2388
+ --vid-player-tooltip-bg-color: var(--color-neutral-0-a-70, rgba(0, 0, 0, 0.7));
2389
+ --vid-player-control-buttons-bg-color-pressed: var(--color-neutral-0-a-5, rgba(0, 0, 0, 0.05));
2390
+ --vid-player-progress-bar-preload-bg-color: var(--color-neutral-100-a-30, rgba(255, 255, 255, 0.3));
2391
+ --vid-player-unmute-button-bg-color: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
2392
+ --vid-player-unmute-button-bg-color-hover: var(--color-neutral-0-a-35, rgba(0, 0, 0, 0.35));
2393
+ --vid-player-progress-bar-ad-bg-color: var(--color-yellow-80, #FFBF00);
2619
2394
 
2620
2395
  }
2621
2396
 
@@ -2627,16 +2402,17 @@
2627
2402
  OTHER
2628
2403
  ============================================ */
2629
2404
 
2630
- --vid-player-controls-autoplay-button-bg-color: var(--alpha-black-20, rgba(0, 0, 0, 0.2));
2631
- --vid-player-control-buttons-bg-hover-color: var(--alpha-red-50-a-80, rgba(221, 0, 0, 0.8));
2632
- --vid-player-control-buttons-bg-color-hover: var(--alpha-black-20, rgba(0, 0, 0, 0.2));
2633
- --vid-player-overlay-scrim-color: var(--alpha-black-50, rgba(0, 0, 0, 0.5));
2634
- --audio-player-play-button-bg-color: var(--alpha-white-30, rgba(255, 255, 255, 0.3));
2635
- --vid-player-tooltip-bg-color: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
2636
- --vid-player-control-buttons-bg-color-pressed: var(--alpha-black-5, rgba(0, 0, 0, 0.05));
2637
- --vid-player-progress-bar-preload-bg-color: var(--alpha-white-30, rgba(255, 255, 255, 0.3));
2638
- --vid-player-unmute-button-bg-color: var(--alpha-black-20, rgba(0, 0, 0, 0.2));
2639
- --vid-player-unmute-button-bg-color-hover: var(--alpha-black-35, rgba(0, 0, 0, 0.35));
2405
+ --vid-player-controls-autoplay-button-bg-color: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
2406
+ --vid-player-control-buttons-bg-hover-color: var(--color-bild-red-50-a-80, rgba(221, 0, 0, 0.8));
2407
+ --vid-player-control-buttons-bg-color-hover: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
2408
+ --vid-player-overlay-scrim-color: var(--color-neutral-0-a-50, rgba(0, 0, 0, 0.5));
2409
+ --audio-player-play-button-bg-color: var(--color-neutral-100-a-30, rgba(255, 255, 255, 0.3));
2410
+ --vid-player-tooltip-bg-color: var(--color-neutral-0-a-70, rgba(0, 0, 0, 0.7));
2411
+ --vid-player-control-buttons-bg-color-pressed: var(--color-neutral-0-a-5, rgba(0, 0, 0, 0.05));
2412
+ --vid-player-progress-bar-preload-bg-color: var(--color-neutral-100-a-30, rgba(255, 255, 255, 0.3));
2413
+ --vid-player-unmute-button-bg-color: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
2414
+ --vid-player-unmute-button-bg-color-hover: var(--color-neutral-0-a-35, rgba(0, 0, 0, 0.35));
2415
+ --vid-player-progress-bar-ad-bg-color: var(--color-yellow-80, #FFBF00);
2640
2416
 
2641
2417
  }
2642
2418
 
@@ -2650,22 +2426,6 @@
2650
2426
  line-height: 16px;
2651
2427
  }
2652
2428
 
2653
- [data-content-brand="bild"] .video-ad-time,
2654
- :host([data-content-brand="bild"]) .video-ad-time {
2655
- font-family: var(--font-family-gotham, Gotham);
2656
- font-weight: var(--title-font-weight);
2657
- font-size: 14px;
2658
- text-transform: uppercase;
2659
- }
2660
-
2661
- [data-content-brand="bild"] .video-player-time,
2662
- :host([data-content-brand="bild"]) .video-player-time {
2663
- font-family: var(--title-font-family);
2664
- font-weight: var(--title-font-weight);
2665
- font-size: 14px;
2666
- text-transform: uppercase;
2667
- }
2668
-
2669
2429
  /* === BREAKPOINT TOKENS === */
2670
2430
 
2671
2431
  [data-content-brand="bild"],
@@ -2673,13 +2433,13 @@
2673
2433
  --podcast-play-button-size: var(--size-6-x, 48px);
2674
2434
  --vid-player-bottom-bar-gap-space: 0px;
2675
2435
  --audio-player-header-stack-space: var(--size-7-x, 56px);
2676
- --video-time-badge-font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
2436
+ --video-time-badge-font-family: var(--body-font-family);
2677
2437
  --vid-player-control-button-size: var(--size-5-p-25-x, 42px);
2678
2438
  --vid-player-control-button-icon-size-hover: var(--size-3-p-5-x, 28px);
2679
2439
  --vid-player-timecode-font-size: 14px;
2680
2440
  --vid-player-timecode-container-min-width-size: 45px;
2681
2441
  --vid-player-progress-bar-container-height-size: 24px;
2682
- --vid-player-unmute-button-width-size: 220;
2442
+ --vid-player-unmute-button-width-size: 220px;
2683
2443
  }
2684
2444
 
2685
2445
  @media (min-width: 600px) {
@@ -2703,14 +2463,13 @@
2703
2463
 
2704
2464
  [data-color-brand="bild"][data-theme="light"],
2705
2465
  :host([data-color-brand="bild"][data-theme="light"]) {
2706
- --menu-scrolled-surface-gradient-color: rgba(255, 255, 255, 0.95);
2466
+ --menu-scrolled-surface-gradient-color: var(--color-neutral-100-a-95, rgba(255, 255, 255, 0.95));
2707
2467
  --menu-link-lane-surface-color: var(--color-neutral-100, #FFFFFF);
2708
- --menu-link-lane-label-color: var(--color-neutral-35, #4B525A);
2709
- --menu-link-lane-label-color-active: var(--color-neutral-15, #232629);
2468
+ --menu-link-lane-label-color: var(--color-neutral-40, #565A5F);
2469
+ --menu-link-lane-label-color-hover: var(--color-neutral-15, #222628);
2710
2470
  --app-top-bar-surface-color: var(--color-neutral-100, #FFFFFF);
2711
- --app-top-bar-icon-color: var(--color-neutral-35, #4B525A);
2712
- --app-top-bar-text-color-primary: var(--color-neutral-15, #232629);
2713
- --app-tob-bar-tab-nav-bottom-border: var(--color-neutral-93, #E9ECEF);
2471
+ --app-top-bar-text-color-primary: var(--color-neutral-15, #222628);
2472
+ --app-tob-bar-tab-nav-bottom-border: var(--color-neutral-90, #DDE1E2);
2714
2473
  --app-tob-bar-tab-nav-bottom-border-active: var(--color-bild-red-50, #DD0000);
2715
2474
  }
2716
2475
 
@@ -2718,14 +2477,13 @@
2718
2477
 
2719
2478
  [data-color-brand="bild"][data-theme="dark"],
2720
2479
  :host([data-color-brand="bild"][data-theme="dark"]) {
2721
- --menu-scrolled-surface-gradient-color: rgba(35, 38, 41, 0.95);
2722
- --menu-link-lane-surface-color: var(--color-neutral-15, #232629);
2480
+ --menu-scrolled-surface-gradient-color: rgba(34, 38, 40, 0.95);
2481
+ --menu-link-lane-surface-color: var(--color-neutral-15, #222628);
2723
2482
  --menu-link-lane-label-color: var(--color-neutral-60, #8C9196);
2724
- --menu-link-lane-label-color-active: var(--color-neutral-100, #FFFFFF);
2483
+ --menu-link-lane-label-color-hover: var(--color-neutral-100, #FFFFFF);
2725
2484
  --app-top-bar-surface-color: var(--color-neutral-25, #343C41);
2726
- --app-top-bar-icon-color: var(--color-neutral-60, #8C9196);
2727
- --app-top-bar-text-color-primary: var(--color-neutral-93, #E9ECEF);
2728
- --app-tob-bar-tab-nav-bottom-border: var(--color-neutral-35, #4B525A);
2485
+ --app-top-bar-text-color-primary: var(--color-neutral-90, #DDE1E2);
2486
+ --app-tob-bar-tab-nav-bottom-border: var(--color-neutral-30, #40464D);
2729
2487
  --app-tob-bar-tab-nav-bottom-border-active: var(--color-neutral-100, #FFFFFF);
2730
2488
  }
2731
2489
 
@@ -2739,33 +2497,6 @@
2739
2497
  line-height: 14px;
2740
2498
  }
2741
2499
 
2742
- [data-content-brand="bild"] .app-topbar-tabs-title,
2743
- :host([data-content-brand="bild"]) .app-topbar-tabs-title {
2744
- font-family: var(--title-font-family);
2745
- font-weight: var(--title-font-weight);
2746
- font-size: 12px;
2747
- line-height: 14px;
2748
- text-transform: uppercase;
2749
- }
2750
-
2751
- [data-content-brand="bild"] .menu-item-label,
2752
- :host([data-content-brand="bild"]) .menu-item-label {
2753
- font-family: var(--label-font-family);
2754
- font-weight: 700;
2755
- font-size: 15px;
2756
- line-height: 15px;
2757
- text-transform: uppercase;
2758
- }
2759
-
2760
- [data-content-brand="bild"] .menu-item-util-label,
2761
- :host([data-content-brand="bild"]) .menu-item-util-label {
2762
- font-family: var(--label-font-family);
2763
- font-weight: 700;
2764
- font-size: var(--size-1-p-5-x, 12px);
2765
- line-height: var(--size-1-p-5-x, 12px);
2766
- text-transform: uppercase;
2767
- }
2768
-
2769
2500
  /* === BREAKPOINT TOKENS === */
2770
2501
 
2771
2502
  [data-content-brand="bild"],
@@ -2788,8 +2519,8 @@
2788
2519
  --menu-right-inline-space: var(--space-0-x, 0px);
2789
2520
  --menu-bottom-stack-space: var(--stack-space-const-sm);
2790
2521
  --menu-utility-links-divider-height-size: var(--size-const-sm);
2791
- --menu-shadow-visibility: var(--alpha-black-10, rgba(0, 0, 0, 0.1));
2792
- --hey-input-shadow-visibility: var(--alpha-black-0, rgba(0, 0, 0, 0));
2522
+ --menu-shadow-visibility: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
2523
+ --hey-input-shadow-visibility: var(--color-neutral-0-a-0, rgba(0, 0, 0, 0));
2793
2524
  --app-topbar-title-font-size: 12px;
2794
2525
  --app-topbar-stage-title-height: 14px;
2795
2526
  --i-osapp-top-bar-height-size: 44px;
@@ -2820,8 +2551,8 @@
2820
2551
  --menu-right-inline-space: var(--inline-space-const-lg);
2821
2552
  --menu-bottom-stack-space: var(--space-0-x, 0px);
2822
2553
  --menu-utility-links-divider-height-size: var(--size-const-md);
2823
- --menu-shadow-visibility: var(--alpha-black-0, rgba(0, 0, 0, 0));
2824
- --hey-input-shadow-visibility: var(--alpha-black-10, rgba(0, 0, 0, 0.1));
2554
+ --menu-shadow-visibility: var(--color-neutral-0-a-0, rgba(0, 0, 0, 0));
2555
+ --hey-input-shadow-visibility: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
2825
2556
  }
2826
2557
  }
2827
2558
 
@@ -2829,37 +2560,17 @@
2829
2560
 
2830
2561
  [data-color-brand="bild"],
2831
2562
  :host([data-color-brand="bild"]) {
2832
- --menu-surface-color: var(--surface-color-primary);
2833
- }
2834
-
2835
- /* === COLOR TOKENS (LIGHT MODE) === */
2836
-
2837
- [data-color-brand="bild"][data-theme="light"],
2838
- :host([data-color-brand="bild"][data-theme="light"]) {
2839
- /* ============================================
2840
- OTHER
2841
- ============================================ */
2842
-
2843
- --menu-item-border-color-active: var(--color-bild-red-50, #DD0000);
2844
- --menu-item-label-color-primary: var(--label-color-secondary);
2845
- --menu-item-label-color-primary-active: var(--label-color-primary);
2846
- --menu-item-label-color-secondary: var(--color-neutral-100, #FFFFFF);
2847
-
2563
+ --menu-surface-color: var(--bg-color-primary);
2564
+ --app-top-bar-icon-color: var(--icon-color-secondary);
2848
2565
  }
2849
2566
 
2850
- /* === COLOR TOKENS (DARK MODE) === */
2851
-
2852
- [data-color-brand="bild"][data-theme="dark"],
2853
- :host([data-color-brand="bild"][data-theme="dark"]) {
2854
- /* ============================================
2855
- OTHER
2856
- ============================================ */
2857
-
2858
- --menu-item-border-color-active: var(--color-neutral-100, #FFFFFF);
2859
- --menu-item-label-color-primary: var(--label-color-tertiary);
2860
- --menu-item-label-color-primary-active: var(--color-neutral-96, #F2F4F5);
2861
- --menu-item-label-color-secondary: var(--color-neutral-100, #FFFFFF);
2567
+ /* === OTHER TOKENS === */
2862
2568
 
2569
+ [data-color-brand="bild"],
2570
+ :host([data-color-brand="bild"]) {
2571
+ --menu-item-border-color-active: var(--border-color-brand-light-only);
2572
+ --menu-item-label-color-primary: var(--text-color-idle);
2573
+ --menu-item-label-color-primary-active: var(--text-color-active);
2863
2574
  }
2864
2575
 
2865
2576
  /* === TYPOGRAPHY TOKENS === */
@@ -2872,22 +2583,6 @@
2872
2583
  line-height: 20.8px;
2873
2584
  }
2874
2585
 
2875
- [data-content-brand="bild"] .news-ticker-kicker,
2876
- :host([data-content-brand="bild"]) .news-ticker-kicker {
2877
- font-family: var(--kicker-font-family);
2878
- font-weight: var(--kicker-font-weight);
2879
- font-size: var(--kicker-3-font-size);
2880
- line-height: var(--kicker-3-line-height);
2881
- }
2882
-
2883
- [data-content-brand="bild"] .news-ticker-headline,
2884
- :host([data-content-brand="bild"]) .news-ticker-headline {
2885
- font-family: var(--headline-font-family);
2886
- font-weight: 900;
2887
- font-size: var(--headline-3-font-size);
2888
- line-height: var(--headline-3-line-height);
2889
- }
2890
-
2891
2586
  /* === BREAKPOINT TOKENS === */
2892
2587
 
2893
2588
  [data-content-brand="bild"],
@@ -2948,26 +2643,24 @@
2948
2643
 
2949
2644
  [data-color-brand="bild"],
2950
2645
  :host([data-color-brand="bild"]) {
2951
- --news-ticker-timestamp-color: var(--label-color-tertiary);
2952
- --news-ticker-badge-icons-color: var(--label-color-tertiary);
2646
+ --news-ticker-timestamp-color: var(--text-color-secondary);
2647
+ --news-ticker-badge-icons-color: var(--icon-color-secondary);
2953
2648
  }
2954
2649
 
2955
2650
  /* === COLOR TOKENS (LIGHT MODE) === */
2956
2651
 
2957
2652
  [data-color-brand="bild"][data-theme="light"],
2958
2653
  :host([data-color-brand="bild"][data-theme="light"]) {
2959
- --pagination-element-color-default: var(--color-neutral-85, #CED4DA);
2960
- --scroll-bar-track-bg-color: var(--alpha-black-10, rgba(0, 0, 0, 0.1));
2961
- --scroll-bar-thumb-bg-color: var(--color-neutral-60, #8C9196);
2654
+ --pagination-element-color-default: var(--bg-color-quaternary);
2655
+ --scroll-bar-track-bg-color: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
2962
2656
  }
2963
2657
 
2964
2658
  /* === COLOR TOKENS (DARK MODE) === */
2965
2659
 
2966
2660
  [data-color-brand="bild"][data-theme="dark"],
2967
2661
  :host([data-color-brand="bild"][data-theme="dark"]) {
2968
- --pagination-element-color-default: var(--color-neutral-60, #8C9196);
2969
- --scroll-bar-track-bg-color: var(--alpha-white-10, rgba(255, 255, 255, 0.1));
2970
- --scroll-bar-thumb-bg-color: var(--color-neutral-60, #8C9196);
2662
+ --pagination-element-color-default: var(--bg-color-quaternary-inverse);
2663
+ --scroll-bar-track-bg-color: var(--color-neutral-100-a-10, rgba(255, 255, 255, 0.1));
2971
2664
  }
2972
2665
 
2973
2666
  /* === TYPOGRAPHY TOKENS === */
@@ -2990,7 +2683,7 @@
2990
2683
  --gallery-pagination-container-web-inline-space: var(--inline-space-const-sm);
2991
2684
  --gallery-pagination-container-stack-space: var(--stack-space-const-md);
2992
2685
  --gallery-pagination-container-app-inline-space: var(--inline-space-const-md);
2993
- --scroll-bar-thickness-size: var(--size-1-x, 8px);
2686
+ --scroll-bar-thickness-size: var(--size-const-4-xs);
2994
2687
  }
2995
2688
 
2996
2689
  @media (min-width: 600px) {
@@ -3005,40 +2698,33 @@
3005
2698
 
3006
2699
  [data-color-brand="bild"],
3007
2700
  :host([data-color-brand="bild"]) {
3008
- --pagination-element-color-active: var(--accent-color-primary);
2701
+ --pagination-element-color-active: var(--bg-color-brand-light-only);
3009
2702
  --gallery-pagination-element-active-opacity: var(--layer-opacity-100);
2703
+ --scroll-bar-thumb-bg-color: var(--bg-color-quintenary);
3010
2704
  }
3011
2705
 
3012
2706
  /* === COLOR TOKENS (LIGHT MODE) === */
3013
2707
 
3014
2708
  [data-color-brand="bild"][data-theme="light"],
3015
2709
  :host([data-color-brand="bild"][data-theme="light"]) {
3016
- /* ============================================
3017
- OTHER
3018
- ============================================ */
3019
-
3020
- --partner-links-border-color-idle: var(--color-neutral-85, #CED4DA);
3021
- --partner-links-border-color-active: var(--color-neutral-15, #232629);
3022
- --partner-links-bg-color-idle: var(--color-neutral-100, #FFFFFF);
3023
- --partner-links-bg-color-active: var(--color-neutral-93, #E9ECEF);
3024
- --partner-links-container-border-color: var(--color-neutral-85, #CED4DA);
3025
-
2710
+ --partner-links-bg-color-idle: var(--bg-color-primary);
2711
+ --partner-links-bg-color-active: var(--bg-color-tertiary);
3026
2712
  }
3027
2713
 
3028
2714
  /* === COLOR TOKENS (DARK MODE) === */
3029
2715
 
3030
2716
  [data-color-brand="bild"][data-theme="dark"],
3031
2717
  :host([data-color-brand="bild"][data-theme="dark"]) {
3032
- /* ============================================
3033
- OTHER
3034
- ============================================ */
2718
+ --partner-links-bg-color-idle: var(--bg-color-tertiary);
2719
+ --partner-links-bg-color-active: var(--bg-color-quintenary);
2720
+ }
3035
2721
 
3036
- --partner-links-border-color-idle: var(--color-neutral-85, #CED4DA);
3037
- --partner-links-border-color-active: var(--color-neutral-93, #E9ECEF);
3038
- --partner-links-bg-color-idle: var(--color-neutral-25, #343C41);
3039
- --partner-links-bg-color-active: var(--color-neutral-60, #8C9196);
3040
- --partner-links-container-border-color: var(--color-neutral-35, #4B525A);
2722
+ /* === OTHER TOKENS === */
3041
2723
 
2724
+ [data-color-brand="bild"],
2725
+ :host([data-color-brand="bild"]) {
2726
+ --partner-links-border-color-idle: var(--border-color-default);
2727
+ --partner-links-border-color-active: var(--border-color-extra-strong);
3042
2728
  }
3043
2729
 
3044
2730
  /* === TYPOGRAPHY TOKENS === */
@@ -3049,16 +2735,7 @@
3049
2735
  font-weight: var(--title-font-weight);
3050
2736
  font-size: var(--size-8-x, 64px);
3051
2737
  line-height: var(--size-8-x, 64px);
3052
- letter-spacing: var(--display-2-letter-spacing);
3053
- }
3054
-
3055
- [data-content-brand="bild"] .paywall-card-note,
3056
- :host([data-content-brand="bild"]) .paywall-card-note {
3057
- font-family: var(--title-font-family);
3058
- font-weight: var(--title-font-weight);
3059
- font-size: var(--size-5-x, 40px);
3060
- line-height: var(--size-5-x, 40px);
3061
- letter-spacing: var(--display-3-letter-spacing);
2738
+ letter-spacing: var(--display-2-letter-space);
3062
2739
  }
3063
2740
 
3064
2741
  /* === BREAKPOINT TOKENS === */
@@ -3133,28 +2810,11 @@
3133
2810
  }
3134
2811
  }
3135
2812
 
3136
- /* === COLOR TOKENS (LIGHT MODE) === */
3137
-
3138
- [data-color-brand="bild"][data-theme="light"],
3139
- :host([data-color-brand="bild"][data-theme="light"]) {
3140
- /* ============================================
3141
- OTHER
3142
- ============================================ */
3143
-
3144
- --selection-border-color: var(--color-neutral-35, #4B525A);
3145
-
3146
- }
3147
-
3148
- /* === COLOR TOKENS (DARK MODE) === */
3149
-
3150
- [data-color-brand="bild"][data-theme="dark"],
3151
- :host([data-color-brand="bild"][data-theme="dark"]) {
3152
- /* ============================================
3153
- OTHER
3154
- ============================================ */
3155
-
3156
- --selection-border-color: var(--color-neutral-60, #8C9196);
2813
+ /* === OTHER TOKENS === */
3157
2814
 
2815
+ [data-color-brand="bild"],
2816
+ :host([data-color-brand="bild"]) {
2817
+ --selection-border-color: var(--border-color-strong);
3158
2818
  }
3159
2819
 
3160
2820
  /* === BREAKPOINT TOKENS === */
@@ -3188,14 +2848,14 @@
3188
2848
 
3189
2849
  [data-color-brand="bild"][data-theme="light"],
3190
2850
  :host([data-color-brand="bild"][data-theme="light"]) {
3191
- --slider-track-bg-color: var(--alpha-white-35, rgba(255, 255, 255, 0.35));
2851
+ --slider-track-bg-color: var(--color-neutral-100-a-35, rgba(255, 255, 255, 0.35));
3192
2852
  }
3193
2853
 
3194
2854
  /* === COLOR TOKENS (DARK MODE) === */
3195
2855
 
3196
2856
  [data-color-brand="bild"][data-theme="dark"],
3197
2857
  :host([data-color-brand="bild"][data-theme="dark"]) {
3198
- --slider-track-bg-color: var(--alpha-white-35, rgba(255, 255, 255, 0.35));
2858
+ --slider-track-bg-color: var(--color-neutral-100-a-35, rgba(255, 255, 255, 0.35));
3199
2859
  }
3200
2860
 
3201
2861
  /* === BREAKPOINT TOKENS === */
@@ -3215,36 +2875,6 @@
3215
2875
  --slider-button-opacity: var(--layer-opacity-90);
3216
2876
  }
3217
2877
 
3218
- /* === COLOR TOKENS (LIGHT MODE) === */
3219
-
3220
- [data-color-brand="bild"][data-theme="light"],
3221
- :host([data-color-brand="bild"][data-theme="light"]) {
3222
- /* ============================================
3223
- OTHER
3224
- ============================================ */
3225
-
3226
- --social-share-button-label-color-default: var(--color-neutral-100, #FFFFFF);
3227
- --social-share-button-label-color-active: var(--color-neutral-100, #FFFFFF);
3228
- --social-share-button-bg-color-active: var(--color-neutral-25, #343C41);
3229
- --social-share-button-bg-color-default: var(--color-neutral-35, #4B525A);
3230
-
3231
- }
3232
-
3233
- /* === COLOR TOKENS (DARK MODE) === */
3234
-
3235
- [data-color-brand="bild"][data-theme="dark"],
3236
- :host([data-color-brand="bild"][data-theme="dark"]) {
3237
- /* ============================================
3238
- OTHER
3239
- ============================================ */
3240
-
3241
- --social-share-button-label-color-default: var(--color-neutral-100, #FFFFFF);
3242
- --social-share-button-label-color-active: var(--color-neutral-100, #FFFFFF);
3243
- --social-share-button-bg-color-active: var(--color-neutral-25, #343C41);
3244
- --social-share-button-bg-color-default: var(--color-neutral-35, #4B525A);
3245
-
3246
- }
3247
-
3248
2878
  /* === TYPOGRAPHY TOKENS === */
3249
2879
 
3250
2880
  [data-content-brand="bild"] .special-navi-item-label,
@@ -3291,7 +2921,7 @@
3291
2921
 
3292
2922
  [data-color-brand="bild"],
3293
2923
  :host([data-color-brand="bild"]) {
3294
- --subheaders-color: var(--text-color-primary);
2924
+ --subheaders-text-color: var(--text-color-primary);
3295
2925
  }
3296
2926
 
3297
2927
  /* === COLOR TOKENS (LIGHT MODE) === */
@@ -3302,9 +2932,6 @@
3302
2932
  OTHER
3303
2933
  ============================================ */
3304
2934
 
3305
- --tab-bg-color-hover: var(--color-neutral-93, #E9ECEF);
3306
- --tab-label-color-active: var(--color-neutral-25, #343C41);
3307
- --tab-label-color-default: var(--color-neutral-35, #4B525A);
3308
2935
  --app-bottom-tab-bar-bg-color: var(--color-neutral-100, #FFFFFF);
3309
2936
 
3310
2937
  }
@@ -3317,9 +2944,6 @@
3317
2944
  OTHER
3318
2945
  ============================================ */
3319
2946
 
3320
- --tab-bg-color-hover: var(--color-neutral-25, #343C41);
3321
- --tab-label-color-active: var(--color-neutral-96, #F2F4F5);
3322
- --tab-label-color-default: var(--color-neutral-100, #FFFFFF);
3323
2947
  --app-bottom-tab-bar-bg-color: var(--color-neutral-25, #343C41);
3324
2948
 
3325
2949
  }
@@ -3334,22 +2958,6 @@
3334
2958
  text-transform: uppercase;
3335
2959
  }
3336
2960
 
3337
- [data-content-brand="bild"] .app-bottom-bar-label-default,
3338
- :host([data-content-brand="bild"]) .app-bottom-bar-label-default {
3339
- font-family: var(--body-font-family);
3340
- font-weight: var(--font-weight-book, 400);
3341
- font-size: 11px;
3342
- line-height: 14.4px;
3343
- }
3344
-
3345
- [data-content-brand="bild"] .app-bottom-bar-label-active,
3346
- :host([data-content-brand="bild"]) .app-bottom-bar-label-active {
3347
- font-family: var(--body-font-family);
3348
- font-weight: var(--font-weight-bold, 700);
3349
- font-size: 11px;
3350
- line-height: 14.4px;
3351
- }
3352
-
3353
2961
  /* === BREAKPOINT TOKENS === */
3354
2962
 
3355
2963
  [data-content-brand="bild"],
@@ -3422,16 +3030,16 @@
3422
3030
 
3423
3031
  [data-color-brand="bild"][data-theme="light"],
3424
3032
  :host([data-color-brand="bild"][data-theme="light"]) {
3425
- --teaser-title-background-gradient-start: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
3426
- --teaser-title-background-gradient-stop: var(--alpha-black-0, rgba(0, 0, 0, 0));
3033
+ --teaser-title-bg-gradient-start: var(--color-neutral-0-a-70, rgba(0, 0, 0, 0.7));
3034
+ --teaser-title-bg-gradient-stop: var(--color-neutral-0-a-0, rgba(0, 0, 0, 0));
3427
3035
  }
3428
3036
 
3429
3037
  /* === COLOR TOKENS (DARK MODE) === */
3430
3038
 
3431
3039
  [data-color-brand="bild"][data-theme="dark"],
3432
3040
  :host([data-color-brand="bild"][data-theme="dark"]) {
3433
- --teaser-title-background-gradient-start: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
3434
- --teaser-title-background-gradient-stop: var(--alpha-black-0, rgba(0, 0, 0, 0));
3041
+ --teaser-title-bg-gradient-start: var(--color-neutral-0-a-70, rgba(0, 0, 0, 0.7));
3042
+ --teaser-title-bg-gradient-stop: var(--color-neutral-0-a-0, rgba(0, 0, 0, 0));
3435
3043
  }
3436
3044
 
3437
3045
  /* === TYPOGRAPHY TOKENS === */
@@ -3444,46 +3052,6 @@
3444
3052
  line-height: var(--kicker-3-font-size);
3445
3053
  }
3446
3054
 
3447
- [data-content-brand="bild"] .a-teaser-a-teaser-headline,
3448
- :host([data-content-brand="bild"]) .a-teaser-a-teaser-headline {
3449
- font-family: var(--headline-font-family);
3450
- font-weight: 900;
3451
- font-size: var(--headline-3-font-size);
3452
- line-height: var(--headline-3-font-size);
3453
- }
3454
-
3455
- [data-content-brand="bild"] .m-qteaser-m-qteaser-kicker,
3456
- :host([data-content-brand="bild"]) .m-qteaser-m-qteaser-kicker {
3457
- font-family: var(--kicker-font-family);
3458
- font-weight: 700;
3459
- font-size: var(--kicker-4-font-size);
3460
- line-height: var(--kicker-4-line-height);
3461
- }
3462
-
3463
- [data-content-brand="bild"] .m-qteaser-m-qteaser-headline,
3464
- :host([data-content-brand="bild"]) .m-qteaser-m-qteaser-headline {
3465
- font-family: var(--headline-font-family);
3466
- font-weight: 900;
3467
- font-size: var(--headline-4-font-size);
3468
- line-height: var(--headline-4-line-height);
3469
- }
3470
-
3471
- [data-content-brand="bild"] .q-teaser-q-teaser-headline,
3472
- :host([data-content-brand="bild"]) .q-teaser-q-teaser-headline {
3473
- font-family: var(--headline-font-family);
3474
- font-weight: 900;
3475
- font-size: var(--headline-1-font-size);
3476
- line-height: var(--headline-1-line-height);
3477
- }
3478
-
3479
- [data-content-brand="bild"] .std-teaser-std-teaser-headline,
3480
- :host([data-content-brand="bild"]) .std-teaser-std-teaser-headline {
3481
- font-family: var(--headline-font-family);
3482
- font-weight: 700;
3483
- font-size: var(--headline-4-font-size);
3484
- line-height: var(--headline-4-line-height);
3485
- }
3486
-
3487
3055
  /* === BREAKPOINT TOKENS === */
3488
3056
 
3489
3057
  [data-content-brand="bild"],
@@ -3557,29 +3125,6 @@
3557
3125
  --teaser-hover-opacity: var(--layer-opacity-80);
3558
3126
  }
3559
3127
 
3560
- /* === COLOR TOKENS (LIGHT MODE) === */
3561
-
3562
- [data-color-brand="bild"][data-theme="light"],
3563
- :host([data-color-brand="bild"][data-theme="light"]) {
3564
- --text-link-color-secondary: var(--text-color-secondary);
3565
- --text-link-color-primary: var(--text-color-primary);
3566
- }
3567
-
3568
- /* === COLOR TOKENS (DARK MODE) === */
3569
-
3570
- [data-color-brand="bild"][data-theme="dark"],
3571
- :host([data-color-brand="bild"][data-theme="dark"]) {
3572
- --text-link-color-secondary: var(--color-neutral-85, #CED4DA);
3573
- --text-link-color-primary: var(--color-neutral-60, #8C9196);
3574
- }
3575
-
3576
- /* === OTHER TOKENS === */
3577
-
3578
- [data-color-brand="bild"],
3579
- :host([data-color-brand="bild"]) {
3580
- --text-link-color-secondary-active: var(--text-color-primary);
3581
- }
3582
-
3583
3128
  /* === TYPOGRAPHY TOKENS === */
3584
3129
 
3585
3130
  [data-content-brand="bild"] .app-toogle-item-label,
@@ -3663,8 +3208,6 @@
3663
3208
  OTHER
3664
3209
  ============================================ */
3665
3210
 
3666
- --dsys-docs-label-text-surface-color-primary-primitive-name: BILD100;
3667
- --dsys-docs-label-text-color-mode: (Light Mode);
3668
3211
  --ds-doc-spacing-item-bg-color: rgba(221, 0, 0, 0.1);
3669
3212
  --ds-doc-spacing-item-border-color: rgba(221, 0, 0, 0.5);
3670
3213
 
@@ -3678,8 +3221,6 @@
3678
3221
  OTHER
3679
3222
  ============================================ */
3680
3223
 
3681
- --dsys-docs-label-text-surface-color-primary-primitive-name: BILD010;
3682
- --dsys-docs-label-text-color-mode: (Dark Mode);
3683
3224
  --ds-doc-spacing-item-bg-color: rgba(255, 255, 255, 0.2);
3684
3225
  --ds-doc-spacing-item-border-color: rgba(255, 255, 255, 0.8);
3685
3226
 
@@ -3694,8 +3235,10 @@
3694
3235
  --dsys-docs-width-size: 320px;
3695
3236
  --main-content-stage-size: 320px;
3696
3237
  --foundations-banner-height-size: var(--size-10-x, 80px);
3238
+ --doc-label-resp-font-size: 10px;
3697
3239
  --ds-caption-stack-space-0-p-5-x: var(--space-0-p-5-x, 4px);
3698
3240
  --ds-caption-stack-space-1-x: var(--space-1-x, 8px);
3241
+ --label-1-responsive-line-height: UNRESOLVED_VariableID:18038:10773;
3699
3242
  --1-column-mobile: 320px;
3700
3243
  --thin-banner-vertical-height-size: 558px;
3701
3244
  --specs-font-family: var(--font-family-gotham, Gotham);
@@ -3707,6 +3250,7 @@
3707
3250
  :host([data-content-brand="bild"]) {
3708
3251
  --dsys-docs-width-size: 750px;
3709
3252
  --main-content-stage-size: 750px;
3253
+ --label-1-responsive-line-height: UNRESOLVED_VariableID:18038:10774;
3710
3254
  }
3711
3255
  }
3712
3256
 
@@ -3717,8 +3261,10 @@
3717
3261
  --ds-main-container-space: var(--space-8-p-5-x, 68px);
3718
3262
  --dsys-docs-width-size: 962px;
3719
3263
  --main-content-stage-size: 962px;
3264
+ --doc-label-resp-font-size: 15px;
3720
3265
  --ds-caption-stack-space-0-p-5-x: var(--space-0-p-75-x, 6px);
3721
3266
  --ds-caption-stack-space-1-x: var(--space-1-p-5-x, 12px);
3267
+ --label-1-responsive-line-height: UNRESOLVED_VariableID:18038:10775;
3722
3268
  --1-column-mobile: 930px;
3723
3269
  --doc-header-height-size: 160px;
3724
3270
  }
@@ -3728,10 +3274,12 @@
3728
3274
  [data-content-brand="bild"],
3729
3275
  :host([data-content-brand="bild"]) {
3730
3276
  --dsys-docs-width-size: 1440px;
3731
- --main-content-stage-size: var(--size-128-x, 1024px);
3277
+ --main-content-stage-size: 1024px;
3732
3278
  --foundations-banner-height-size: var(--size-17-p-5-x, 140px);
3279
+ --doc-label-resp-font-size: 17px;
3733
3280
  --ds-caption-stack-space-0-p-5-x: var(--space-1-x, 8px);
3734
3281
  --ds-caption-stack-space-1-x: var(--space-2-x, 16px);
3282
+ --label-1-responsive-line-height: UNRESOLVED_VariableID:18038:10776;
3735
3283
  --1-column-mobile: 656px;
3736
3284
  --thin-banner-vertical-height-size: 186px;
3737
3285
  --doc-header-height-size: 180px;