@sbb-esta/lyne-elements 3.6.0 → 3.8.0

package/standard-theme.css

@@ -106,7 +106,7 @@ summary {
 
 /**
  * Do not edit directly
- * Generated on Tue, 05 Aug 2025 06:28:50 GMT
+ * Generated on Thu, 18 Sep 2025 10:59:58 GMT
  */
 *,
 ::before,
@@ -262,14 +262,24 @@ summary {
   --sbb-color-red-alpha-60: rgba(235, 0, 0, 0.6);
   --sbb-color-red-alpha-90: rgba(235, 0, 0, 0.9);
   --sbb-color-red-mode-dark: #ff3838;
+  --sbb-color-red85: #ff3838;
   --sbb-color-red125: #c60018;
   --sbb-color-red125-alpha-0: rgba(198, 0, 24, 0);
   --sbb-color-red125-alpha-20: rgba(198, 0, 24, 0.2);
-  --sbb-color-red125-alpha-60: rgba(198, 0, 0, 0.6);
+  --sbb-color-red125-alpha-60: rgba(198, 0, 24, 0.6);
   --sbb-color-red150: #a20013;
   --sbb-color-royal: #06348b;
+  --sbb-color-royal85: #4077df;
   --sbb-color-royal125: #032668;
   --sbb-color-royal150: #021c4e;
+  --sbb-color-royal-light: #06348b;
+  --sbb-color-royal-dark: #0053ef;
+  --sbb-color-royal85-light: #4077df;
+  --sbb-color-royal85-dark: #4077df;
+  --sbb-color-royal125-light: #032668;
+  --sbb-color-royal125-dark: #245ecb;
+  --sbb-color-royal150-light: #021c4e;
+  --sbb-color-royal150-dark: #000000;
   --sbb-color-white: #ffffff;
   --sbb-color-white-alpha-0: rgba(255, 255, 255, 0);
   --sbb-color-white-alpha-20: rgba(255, 255, 255, 0.2);
@@ -279,16 +289,38 @@ summary {
   --sbb-color-white-alpha-70: rgba(255, 255, 255, 0.7);
   --sbb-color-white-alpha-80: rgba(255, 255, 255, 0.8);
   --sbb-color-sky: #0074bf;
+  --sbb-color-sky-light: #0074bf;
+  --sbb-color-sky-dark: #128ede;
   --sbb-color-night: #143a85;
+  --sbb-color-night-light: #143a85;
+  --sbb-color-night-dark: #6587ca;
   --sbb-color-violet: #6f2282;
+  --sbb-color-violet-light: #6f2282;
+  --sbb-color-violet-dark: #b36cc5;
   --sbb-color-pink: #c7387a;
+  --sbb-color-pink-light: #c7387a;
+  --sbb-color-pink-dark: #e45295;
   --sbb-color-autumn: #cf3b00;
+  --sbb-color-autumn-light: #cf3b00;
+  --sbb-color-autumn-dark: #f05313;
   --sbb-color-orange: #f27e00;
+  --sbb-color-orange-light: #f27e00;
+  --sbb-color-orange-dark: #fb8e19;
   --sbb-color-peach: #fcbb00;
+  --sbb-color-peach-light: #fcbb00;
+  --sbb-color-peach-dark: #ffc727;
   --sbb-color-lemon: #ffde15;
+  --sbb-color-lemon-light: #ffde15;
+  --sbb-color-lemon-dark: #ffe547;
   --sbb-color-brown: #a05400;
+  --sbb-color-brown-light: #a05400;
+  --sbb-color-brown-dark: #000000;
   --sbb-color-green: #008233;
+  --sbb-color-green-light: #008233;
+  --sbb-color-green-dark: #109d47;
   --sbb-color-turquoise: #007e84;
+  --sbb-color-turquoise-light: #007e84;
+  --sbb-color-turquoise-dark: #00a59b;
   /**
    * Original Value: 3px
    */
@@ -361,6 +393,22 @@ summary {
    * Original Value: 1200px
    */
   --sbb-layout-base-page-max-width: 75rem;
+  --sbb-shadow-color-soft-1-light: rgba(141, 141, 141, 0.05);
+  --sbb-shadow-color-soft-1-dark: rgba(0, 0, 0, 0.15);
+  --sbb-shadow-color-soft-1-negative-light: rgba(0, 0, 0, 0.15);
+  --sbb-shadow-color-soft-1-negative-dark: rgba(0, 0, 0, 0.15);
+  --sbb-shadow-color-soft-2-light: rgba(141, 141, 141, 0.1);
+  --sbb-shadow-color-soft-2-dark: rgba(0, 0, 0, 0.2);
+  --sbb-shadow-color-soft-2-negative-light: rgba(0, 0, 0, 0.2);
+  --sbb-shadow-color-soft-2-negative-dark: rgba(0, 0, 0, 0.2);
+  --sbb-shadow-color-hard-1-light: rgba(141, 141, 141, 0.1);
+  --sbb-shadow-color-hard-1-dark: rgba(0, 0, 0, 0.3);
+  --sbb-shadow-color-hard-1-negative-light: rgba(0, 0, 0, 0.3);
+  --sbb-shadow-color-hard-1-negative-dark: rgba(0, 0, 0, 0.3);
+  --sbb-shadow-color-hard-2-light: rgba(141, 141, 141, 0.2);
+  --sbb-shadow-color-hard-2-dark: rgba(0, 0, 0, 0.4);
+  --sbb-shadow-color-hard-2-negative-light: rgba(0, 0, 0, 0.4);
+  --sbb-shadow-color-hard-2-negative-dark: rgba(0, 0, 0, 0.4);
   /**
    * Original Value: 0px
    */
@@ -1056,12 +1104,162 @@ summary {
    * dependant or simply referencing other variables.
    * Due to technical limitations these variables are only provided as CSS variables.
    */
-  /* Font Color */
-  --sbb-font-default-color: var(--sbb-color-charcoal);
+  /* Colors */
+  --sbb-color-sky: var(--sbb-color-sky-light);
+  --sbb-color-sky: light-dark(var(--sbb-color-sky-light), var(--sbb-color-sky-dark));
+  --sbb-color-night: var(--sbb-color-night-light);
+  --sbb-color-night: light-dark(var(--sbb-color-night-light), var(--sbb-color-night-dark));
+  --sbb-color-violet: var(--sbb-color-violet-light);
+  --sbb-color-violet: light-dark(var(--sbb-color-violet-light), var(--sbb-color-violet-dark));
+  --sbb-color-pink: var(--sbb-color-pink-light);
+  --sbb-color-pink: light-dark(var(--sbb-color-pink-light), var(--sbb-color-pink-dark));
+  --sbb-color-autumn: var(--sbb-color-autumn-light);
+  --sbb-color-autumn: light-dark(var(--sbb-color-autumn-light), var(--sbb-color-autumn-dark));
+  --sbb-color-orange: var(--sbb-color-orange-light);
+  --sbb-color-orange: light-dark(var(--sbb-color-orange-light), var(--sbb-color-orange-dark));
+  --sbb-color-peach: var(--sbb-color-peach-light);
+  --sbb-color-peach: light-dark(var(--sbb-color-peach-light), var(--sbb-color-peach-dark));
+  --sbb-color-lemon: var(--sbb-color-lemon-light);
+  --sbb-color-lemon: light-dark(var(--sbb-color-lemon-light), var(--sbb-color-lemon-dark));
+  --sbb-color-brown: var(--sbb-color-brown-light);
+  --sbb-color-brown: light-dark(var(--sbb-color-brown-light), var(--sbb-color-brown-dark));
+  --sbb-color-green: var(--sbb-color-green-light);
+  --sbb-color-green: light-dark(var(--sbb-color-green-light), var(--sbb-color-green-dark));
+  --sbb-color-turquoise: var(--sbb-color-turquoise-light);
+  --sbb-color-turquoise: light-dark(
+    var(--sbb-color-turquoise-light),
+    var(--sbb-color-turquoise-dark)
+  );
+  --sbb-color-royal: var(--sbb-color-royal-light);
+  --sbb-color-royal: light-dark(var(--sbb-color-royal-light), var(--sbb-color-royal-dark));
+  --sbb-color-royal85: var(--sbb-color-royal85-light);
+  --sbb-color-royal85: light-dark(var(--sbb-color-royal85-light), var(--sbb-color-royal85-dark));
+  --sbb-color-royal125: var(--sbb-color-royal125-light);
+  --sbb-color-royal125: light-dark(var(--sbb-color-royal125-light), var(--sbb-color-royal125-dark));
+  --sbb-color-royal150: var(--sbb-color-royal150-light);
+  --sbb-color-royal150: light-dark(var(--sbb-color-royal150-light), var(--sbb-color-royal150-dark));
+  --sbb-color-primary: var(--sbb-color-red);
+  --sbb-color-primary85: var(--sbb-color-red85);
+  /* @deprecated */
+  --sbb-color-primary-85: var(--sbb-color-primary85);
+  --sbb-color-primary125: var(--sbb-color-red125);
+  /* @deprecated */
+  --sbb-color-primary-125: var(--sbb-color-primary125);
+  --sbb-color-primary150: var(--sbb-color-red150);
+  /* @deprecated */
+  --sbb-color-primary-150: var(--sbb-color-primary150);
+  --sbb-color-error: var(--sbb-color-red125);
+  --sbb-color-error: light-dark(var(--sbb-color-red125), var(--sbb-color-red85));
+  --sbb-color-success: var(--sbb-color-green);
+  --sbb-color-warning: var(--sbb-color-peach);
+  --sbb-color-brand: var(--sbb-color-red);
+  --sbb-background-color-1: var(--sbb-color-white);
+  --sbb-background-color-1: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
+  --sbb-background-color-1-inverted: var(--sbb-color-midnight);
+  --sbb-background-color-1-inverted: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
+  --sbb-background-color-1-negative: var(--sbb-color-midnight);
+  --sbb-background-color-1-negative-inverted: var(--sbb-color-white);
+  --sbb-background-color-2: var(--sbb-color-white);
+  --sbb-background-color-2: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
+  --sbb-background-color-2-inverted: var(--sbb-color-charcoal);
+  --sbb-background-color-2-inverted: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
+  --sbb-background-color-2-negative: var(--sbb-color-charcoal);
+  --sbb-background-color-2-negative-inverted: var(--sbb-color-white);
+  --sbb-background-color-3: var(--sbb-color-milk);
+  --sbb-background-color-3: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
+  --sbb-background-color-3-inverted: var(--sbb-color-charcoal);
+  --sbb-background-color-3-inverted: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
+  --sbb-background-color-3-negative: var(--sbb-color-charcoal);
+  --sbb-background-color-3-negative-inverted: var(--sbb-color-milk);
+  --sbb-background-color-4: var(--sbb-color-cloud);
+  --sbb-background-color-4: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
+  --sbb-background-color-4-inverted: var(--sbb-color-iron);
+  --sbb-background-color-4-inverted: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
+  --sbb-background-color-4-negative: var(--sbb-color-iron);
+  --sbb-background-color-4-negative-inverted: var(--sbb-color-cloud);
+  --sbb-color-1: var(--sbb-color-midnight);
+  --sbb-color-1: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
+  --sbb-color-1-inverted: var(--sbb-color-white);
+  --sbb-color-1-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
+  --sbb-color-1-negative: var(--sbb-color-white);
+  --sbb-color-1-negative-inverted: var(--sbb-color-midnight);
+  --sbb-color-2: var(--sbb-color-charcoal);
+  --sbb-color-2: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
+  --sbb-color-2-inverted: var(--sbb-color-white);
+  --sbb-color-2-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
+  --sbb-color-2-negative: var(--sbb-color-white);
+  --sbb-color-2-negative-inverted: var(--sbb-color-charcoal);
+  --sbb-color-3: var(--sbb-color-charcoal);
+  --sbb-color-3: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
+  --sbb-color-3-inverted: var(--sbb-color-milk);
+  --sbb-color-3-inverted: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
+  --sbb-color-3-negative: var(--sbb-color-milk);
+  --sbb-color-3-negative-inverted: var(--sbb-color-charcoal);
+  --sbb-color-4: var(--sbb-color-iron);
+  --sbb-color-4: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
+  --sbb-color-4-inverted: var(--sbb-color-cloud);
+  --sbb-color-4-inverted: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
+  --sbb-color-4-negative: var(--sbb-color-cloud);
+  --sbb-color-4-negative-inverted: var(--sbb-color-iron);
+  --sbb-color-5: var(--sbb-color-smoke);
+  --sbb-border-color-1: var(--sbb-color-midnight);
+  --sbb-border-color-1: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
+  --sbb-border-color-1-inverted: var(--sbb-color-white);
+  --sbb-border-color-1-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
+  --sbb-border-color-1-negative: var(--sbb-color-white);
+  --sbb-border-color-1-negative-inverted: var(--sbb-color-midnight);
+  --sbb-border-color-2: var(--sbb-color-charcoal);
+  --sbb-border-color-2: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
+  --sbb-border-color-2-inverted: var(--sbb-color-white);
+  --sbb-border-color-2-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
+  --sbb-border-color-2-negative: var(--sbb-color-white);
+  --sbb-border-color-2-negative-inverted: var(--sbb-color-charcoal);
+  --sbb-border-color-3: var(--sbb-color-charcoal);
+  --sbb-border-color-3: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
+  --sbb-border-color-3-inverted: var(--sbb-color-milk);
+  --sbb-border-color-3-inverted: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
+  --sbb-border-color-3-negative: var(--sbb-color-milk);
+  --sbb-border-color-3-negative-inverted: var(--sbb-color-charcoal);
+  --sbb-border-color-4: var(--sbb-color-iron);
+  --sbb-border-color-4: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
+  --sbb-border-color-4-inverted: var(--sbb-color-cloud);
+  --sbb-border-color-4-inverted: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
+  --sbb-border-color-4-negative: var(--sbb-color-cloud);
+  --sbb-border-color-4-negative-inverted: var(--sbb-color-iron);
+  --sbb-border-color-5: var(--sbb-color-smoke);
+  --sbb-shadow-color-soft-1: color-mix(in srgb, var(--sbb-color-smoke) 5%, transparent);
+  --sbb-shadow-color-soft-1: light-dark(
+    color-mix(in srgb, var(--sbb-color-smoke) 5%, transparent),
+    color-mix(in srgb, var(--sbb-color-black) 15%, transparent)
+  );
+  --sbb-shadow-color-soft-2: color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent);
+  --sbb-shadow-color-soft-2: light-dark(
+    color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent),
+    color-mix(in srgb, var(--sbb-color-black) 20%, transparent)
+  );
+  --sbb-shadow-color-soft-1-negative: color-mix(in srgb, var(--sbb-color-black) 15%, transparent);
+  --sbb-shadow-color-soft-2-negative: color-mix(in srgb, var(--sbb-color-black) 20%, transparent);
+  --sbb-shadow-color-hard-1: color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent);
+  --sbb-shadow-color-hard-1: light-dark(
+    color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent),
+    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)
+  );
+  --sbb-shadow-color-hard-2: color-mix(in srgb, var(--sbb-color-smoke) 20%, transparent);
+  --sbb-shadow-color-hard-2: light-dark(
+    color-mix(in srgb, var(--sbb-color-smoke) 20%, transparent),
+    color-mix(in srgb, var(--sbb-color-black) 40%, transparent)
+  );
+  --sbb-shadow-color-hard-1-negative: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
+  --sbb-shadow-color-hard-2-negative: color-mix(in srgb, var(--sbb-color-black) 40%, transparent);
+  --sbb-font-default-color: var(--sbb-color-2);
   /* Focus outline */
   --sbb-focus-outline-color-default: var(--sbb-color-black);
   --sbb-focus-outline-color-dark: var(--sbb-color-white);
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
+  --sbb-focus-outline-color: light-dark(
+    var(--sbb-focus-outline-color-default),
+    var(--sbb-focus-outline-color-dark)
+  );
   --sbb-focus-outline-width: var(--sbb-border-width-1x);
   /* Title */
   --sbb-font-size-title-1: var(--sbb-typo-scale-2-5x);
@@ -1308,6 +1506,18 @@ summary {
   font-display: swap;
   font-weight: 300;
 }
+.sbb-dark {
+  color-scheme: dark;
+}
+
+.sbb-light {
+  color-scheme: light;
+}
+
+.sbb-light-dark {
+  color-scheme: light dark;
+}
+
 html {
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
@@ -1315,15 +1525,16 @@ html {
   letter-spacing: var(--sbb-typo-letter-spacing-body-text);
   font-size: var(--sbb-text-font-size);
   color: var(--sbb-font-default-color);
+  background-color: var(--sbb-background-color-1);
 }
 
 ::placeholder {
-  color: var(--sbb-color-metal);
-  -webkit-text-fill-color: var(--sbb-color-metal);
+  color: var(--sbb-color-5);
+  -webkit-text-fill-color: var(--sbb-color-5);
   opacity: 1;
 }
 
-sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
+:is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
   --sbb-text-font-size: var(--sbb-font-size-text-m);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
@@ -1350,137 +1561,147 @@ sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-input, sbb-t
   font-family: var(--sbb-typo-font-family) !important;
   line-height: var(--sbb-typo-line-height-body-text) !important;
 }
-sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)::placeholder {
-  color: var(--sbb-color-metal);
-  -webkit-text-fill-color: var(--sbb-color-metal);
+:is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)::placeholder {
+  color: var(--sbb-color-5);
+  -webkit-text-fill-color: var(--sbb-color-5);
   opacity: 1;
 }
-sbb-form-field[floating-label] :where(input, select, textarea, sbb-select)::placeholder, sbb-form-field[floating-label] :where(sbb-date-input, sbb-time-input)::after {
+:is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(input, select, textarea, sbb-select)::placeholder, :is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(sbb-date-input, sbb-time-input)::after {
   color: transparent !important;
   -webkit-text-fill-color: transparent !important;
 }
 @media (forced-colors: active) {
-  sbb-form-field[floating-label] :where(input, select, textarea, sbb-select)::placeholder, sbb-form-field[floating-label] :where(sbb-date-input, sbb-time-input)::after {
+  :is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(input, select, textarea, sbb-select)::placeholder, :is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(sbb-date-input, sbb-time-input)::after {
     color: Canvas !important;
     -webkit-text-fill-color: Canvas !important;
   }
 }
-sbb-form-field:not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
+:is(sbb-form-field, sbb-timetable-form-field):not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
   color: var(--sbb-color-granite);
+  color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   -webkit-text-fill-color: var(--sbb-color-granite);
+  -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
 }
-sbb-form-field :where(select) {
+:is(sbb-form-field, sbb-timetable-form-field) :where(select) {
   vertical-align: middle;
 }
-sbb-form-field :where(select, sbb-select) {
+:is(sbb-form-field, sbb-timetable-form-field) :where(select, sbb-select) {
   padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
 }
-sbb-form-field[size=s] :where(input, sbb-date-input, sbb-time-input) {
+:is(sbb-form-field, sbb-timetable-form-field)[size=s] :where(input, sbb-date-input, sbb-time-input) {
   height: calc(var(--sbb-form-field-input-text-size) * 1.25);
   line-height: 1 !important;
   margin-block: calc(0.5 * var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-body-text) - 1.25));
 }
-sbb-form-field :where(textarea) {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
   --sbb-scrollbar-thumb-width: 0.125rem;
   --sbb-scrollbar-thumb-width-hover: 0.25rem;
   --sbb-scrollbar-width-firefox: thin;
-  --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
-  --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
+  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
+  --sbb-scrollbar-color: light-dark(
+    color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
+    color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
+  );
+  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
+  --sbb-scrollbar-color-hover: light-dark(
+    color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
+    color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
+  );
   --sbb-scrollbar-track-color: transparent;
   --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
 }
-sbb-form-field :where(textarea)::-webkit-scrollbar {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar {
   width: var(--sbb-scrollbar-width);
   height: var(--sbb-scrollbar-width);
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-sbb-form-field :where(textarea)::-webkit-scrollbar-corner {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-corner {
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-sbb-form-field :where(textarea)::-webkit-scrollbar-thumb {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-thumb {
   background-color: var(--sbb-scrollbar-color, currentcolor);
   border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;
   border-radius: var(--sbb-border-radius-4x);
   background-clip: padding-box;
 }
-sbb-form-field :where(textarea)::-webkit-scrollbar-thumb:hover {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-thumb:hover {
   background-color: var(--sbb-scrollbar-color-hover, currentcolor);
   border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
 }
-sbb-form-field :where(textarea)::-webkit-scrollbar-button, sbb-form-field :where(textarea)::-webkit-scrollbar-corner {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-button, :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-corner {
   display: none;
 }
 @supports not selector(::-webkit-scrollbar) {
-  sbb-form-field :where(textarea) {
+  :is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
     scrollbar-width: var(--sbb-scrollbar-width-firefox);
     scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
   }
 }
-sbb-form-field :where(textarea) {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
   position: relative;
   resize: none;
   white-space: break-spaces;
   overflow-y: auto;
   min-height: calc(var(--sbb-typo-line-height-body-text) * 1em);
 }
-sbb-form-field[size=l] :where(textarea) {
+:is(sbb-form-field, sbb-timetable-form-field)[size=l] :where(textarea) {
   padding-block-end: 0.34375rem;
 }
-sbb-form-field[negative] :where(textarea) {
+:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea) {
   --sbb-scrollbar-thumb-width: 0.125rem;
   --sbb-scrollbar-thumb-width-hover: 0.25rem;
   --sbb-scrollbar-width-firefox: thin;
-  --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
-  --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
+  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
+  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
   --sbb-scrollbar-track-color: transparent;
   --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
 }
-sbb-form-field[negative] :where(textarea)::-webkit-scrollbar {
+:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar {
   width: var(--sbb-scrollbar-width);
   height: var(--sbb-scrollbar-width);
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-corner {
+:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-corner {
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-thumb {
+:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-thumb {
   background-color: var(--sbb-scrollbar-color, currentcolor);
   border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;
   border-radius: var(--sbb-border-radius-4x);
   background-clip: padding-box;
 }
-sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-thumb:hover {
+:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-thumb:hover {
   background-color: var(--sbb-scrollbar-color-hover, currentcolor);
   border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
 }
-sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-button, sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-corner {
+:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-button, :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-corner {
   display: none;
 }
 @supports not selector(::-webkit-scrollbar) {
-  sbb-form-field[negative] :where(textarea) {
+  :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea) {
     scrollbar-width: var(--sbb-scrollbar-width-firefox);
     scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
   }
 }
-sbb-form-field:has(:is(:is(input, textarea, select):user-invalid,
+:is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
 :is(:state(interacted),[state--interacted]):invalid,
 .ng-touched.ng-invalid,
-.sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) sbb-form-field:has(:is(:invalid, .ng-invalid)) {
-  --sbb-form-field-border-color: var(--sbb-color-red125);
-  --sbb-form-field-text-color: var(--sbb-color-red125);
+.sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)) {
+  --sbb-form-field-border-color: var(--sbb-color-error);
+  --sbb-form-field-text-color: var(--sbb-color-error);
 }
-sbb-form-field:has(:is(:is(input, textarea, select):user-invalid,
+:is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
 :is(:state(interacted),[state--interacted]):invalid,
 .ng-touched.ng-invalid,
-.sbb-invalid))[negative], :is(.ng-submitted, .sbb-show-errors) sbb-form-field:has(:is(:invalid, .ng-invalid))[negative] {
-  --sbb-form-field-border-color: var(--sbb-color-red-mode-dark);
-  --sbb-form-field-text-color: var(--sbb-color-red-mode-dark);
+.sbb-invalid))[negative], :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid))[negative] {
+  --sbb-form-field-border-color: var(--sbb-color-red85);
+  --sbb-form-field-text-color: var(--sbb-color-red85);
 }
 @media (forced-colors: active) {
-  sbb-form-field:has(:is(:is(input, textarea, select):user-invalid,
+  :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
   :is(:state(interacted),[state--interacted]):invalid,
   .ng-touched.ng-invalid,
-  .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) sbb-form-field:has(:is(:invalid, .ng-invalid)) {
+  .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)) {
     --sbb-form-field-border-color: LinkText !important;
     --sbb-form-field-text-color: LinkText !important;
   }
@@ -1497,7 +1718,8 @@ sbb-overlay,
 sbb-popover,
 sbb-select,
 sbb-skiplink-list,
-sbb-toast):not(:defined) {
+sbb-toast,
+sbb-tooltip):not(:defined) {
   display: none;
 }
 
@@ -1509,7 +1731,8 @@ sbb-menu,
 sbb-navigation,
 sbb-overlay,
 sbb-popover,
-sbb-toast) {
+sbb-toast,
+sbb-tooltip) {
   margin: 0;
   padding: 0;
   border: none;
@@ -1541,10 +1764,12 @@ sbb-breadcrumb-group:not(:defined) {
   padding-inline: var(--sbb-spacing-fixed-4x);
   gap: var(--sbb-spacing-fixed-1x);
   align-items: baseline;
+  color: var(--sbb-color-1);
 }
 .sbb-header-info strong + * {
   font-size: var(--sbb-font-size-text-xxs);
   color: var(--sbb-color-granite);
+  color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
 }
 
 sbb-title + p {
@@ -1738,14 +1963,14 @@ sbb-toggle:has(:focus-visible) {
 }
 
 sbb-dialog[negative] sbb-dialog-actions {
-  --sbb-dialog-actions-border-color: var(--sbb-color-iron);
+  --sbb-dialog-actions-border-color: var(--sbb-background-color-4-negative);
 }
 sbb-dialog:is(:state(overflows),[state--overflows]) sbb-dialog-actions {
   --sbb-dialog-actions-border-color: transparent;
-  box-shadow: var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-2-color), var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-1-color);
+  box-shadow: var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-color-soft-2), var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-color-soft-1);
 }
 sbb-dialog[negative]:is(:state(overflows),[state--overflows]) sbb-dialog-actions {
-  box-shadow: var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-negative-2-color), var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-negative-1-color);
+  box-shadow: var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-color-soft-2-negative), var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-color-soft-1-negative);
 }
 
 sbb-dialog:has(> sbb-dialog-title) > sbb-dialog-content {
@@ -1779,10 +2004,17 @@ sbb-notification:has(sbb-title)[size=s] {
 sbb-status:has(sbb-title) {
   --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
   --_sbb-status-text-color-override: var(--sbb-color-granite);
+  --_sbb-status-text-color-override: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   --_sbb-status-title-font-size: var(--sbb-font-size-title-5);
   --_sbb-status-title-line-height: var(--sbb-typo-line-height-titles);
 }
 
+.sbb-overlay-outlet {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+}
+
 sub {
   bottom: -0.36em;
 }
@@ -1841,11 +2073,12 @@ sup {
   font-size: var(--sbb-text-font-size);
   padding: 0;
   color: var(--sbb-color-granite);
+  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
 }
 
 .sbb-screen-reader-only {
   border: 0;
-  clip: rect(0 0 0 0);
+  clip-path: rect(0 0 0 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -1883,8 +2116,8 @@ sup {
   justify-content: center;
   padding-inline: var(--sbb-spacing-fixed-1x);
   border-radius: var(--sbb-border-radius-infinity);
-  background-color: var(--sbb-color-red);
-  color: var(--sbb-color-white);
+  background-color: var(--sbb-color-primary);
+  color: var(--sbb-color-1-negative);
   min-width: var(--sbb-spacing-fixed-4x);
   max-height: var(--sbb-spacing-fixed-4x);
   content: attr(sbb-badge);
@@ -1929,6 +2162,8 @@ sup {
   grid-row: 2;
   grid-column: 1;
   padding-block-start: var(--sbb-spacing-fixed-4x);
+  color: var(--sbb-color-granite);
+  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
   --sbb-text-font-size: var(--sbb-font-size-text-xs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
@@ -1940,6 +2175,7 @@ sup {
 .sbb-figure-overlap-start-end,
 .sbb-figure-overlap-end-start,
 .sbb-figure-overlap-end-end) {
+  color-scheme: only light;
   position: relative;
   order: 1;
   grid-row: 1;
@@ -2115,6 +2351,7 @@ sup {
   --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
   --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
   --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
+  --sbb-step-list-color: var(--sbb-color-2);
   --sbb-step-list-text-to-marker-block-offset: calc(
     0.5 *
       (
@@ -2126,7 +2363,7 @@ sup {
   margin: 0;
   padding: 0;
   counter-reset: steps;
-  color: var(--sbb-color-iron);
+  color: var(--sbb-step-list-color);
 }
 .sbb-step-list:where(.sbb-text-s) {
   --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
@@ -2142,7 +2379,7 @@ sup {
 .sbb-step-list > li {
   position: relative;
   counter-increment: steps;
-  background-color: var(--sbb-color-milk);
+  background-color: var(--sbb-background-color-3);
   padding-block: calc(var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset)) var(--sbb-step-list-padding-block);
   padding-inline: calc(var(--sbb-step-list-padding-inline) + var(--sbb-step-list-dimensions) + var(--sbb-step-list-to-text-gap)) var(--sbb-step-list-padding-inline);
   min-height: calc(var(--sbb-step-list-dimensions) + 2 * var(--sbb-step-list-padding-block));
@@ -2164,8 +2401,9 @@ sup {
   width: var(--sbb-step-list-dimensions);
   margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset));
   inset-inline-start: var(--sbb-step-list-padding-inline);
-  color: var(--sbb-color-charcoal);
+  color: var(--sbb-step-list-color);
   border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
+  border: var(--sbb-border-width-1x) solid light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));
   border-radius: 50%;
 }
 .sbb-step-list > li + li {
@@ -2322,8 +2560,16 @@ sup {
   --sbb-scrollbar-thumb-width: 0.125rem;
   --sbb-scrollbar-thumb-width-hover: 0.25rem;
   --sbb-scrollbar-width-firefox: thin;
-  --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
-  --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
+  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
+  --sbb-scrollbar-color: light-dark(
+    color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
+    color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
+  );
+  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
+  --sbb-scrollbar-color-hover: light-dark(
+    color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
+    color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
+  );
   --sbb-scrollbar-track-color: transparent;
 }
 
@@ -2331,8 +2577,8 @@ sup {
   --sbb-scrollbar-thumb-width: 0.125rem;
   --sbb-scrollbar-thumb-width-hover: 0.25rem;
   --sbb-scrollbar-width-firefox: thin;
-  --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
-  --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
+  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
+  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
   --sbb-scrollbar-track-color: transparent;
 }
 
@@ -2340,8 +2586,16 @@ sup {
   --sbb-scrollbar-thumb-width: 0.5rem;
   --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
   --sbb-scrollbar-width-firefox: auto;
-  --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
-  --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
+  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
+  --sbb-scrollbar-color: light-dark(
+    color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
+    color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
+  );
+  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
+  --sbb-scrollbar-color-hover: light-dark(
+    color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
+    color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
+  );
   --sbb-scrollbar-track-color: transparent;
 }
 
@@ -2349,8 +2603,8 @@ sup {
   --sbb-scrollbar-thumb-width: 0.5rem;
   --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
   --sbb-scrollbar-width-firefox: auto;
-  --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
-  --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
+  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
+  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
   --sbb-scrollbar-track-color: transparent;
 }
 
@@ -2358,36 +2612,52 @@ sup {
   --sbb-scrollbar-thumb-width: 0.125rem;
   --sbb-scrollbar-thumb-width-hover: 0.25rem;
   --sbb-scrollbar-width-firefox: thin;
-  --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
-  --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
-  --sbb-scrollbar-track-color: var(--sbb-color-cloud);
+  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
+  --sbb-scrollbar-color: light-dark(
+    color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
+    color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
+  );
+  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
+  --sbb-scrollbar-color-hover: light-dark(
+    color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
+    color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
+  );
+  --sbb-scrollbar-track-color: var(--sbb-background-color-4);
 }
 
 .sbb-scrollbar-negative-track-visible {
   --sbb-scrollbar-thumb-width: 0.125rem;
   --sbb-scrollbar-thumb-width-hover: 0.25rem;
   --sbb-scrollbar-width-firefox: thin;
-  --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
-  --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
-  --sbb-scrollbar-track-color: var(--sbb-color-iron);
+  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
+  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
+  --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
 }
 
 .sbb-scrollbar-thick-track-visible {
   --sbb-scrollbar-thumb-width: 0.5rem;
   --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
   --sbb-scrollbar-width-firefox: auto;
-  --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
-  --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
-  --sbb-scrollbar-track-color: var(--sbb-color-cloud);
+  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
+  --sbb-scrollbar-color: light-dark(
+    color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
+    color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
+  );
+  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
+  --sbb-scrollbar-color-hover: light-dark(
+    color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
+    color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
+  );
+  --sbb-scrollbar-track-color: var(--sbb-background-color-4);
 }
 
 .sbb-scrollbar-thick-negative-track-visible {
   --sbb-scrollbar-thumb-width: 0.5rem;
   --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
   --sbb-scrollbar-width-firefox: auto;
-  --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
-  --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
-  --sbb-scrollbar-track-color: var(--sbb-color-iron);
+  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
+  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
+  --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
 }
 
 .sbb-table,
@@ -2411,10 +2681,12 @@ sup {
 .sbb-table-xs {
   --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
   --sbb-table-border-color: var(--sbb-color-cloud);
-  --sbb-table-background-color: var(--sbb-color-white);
-  --sbb-table-row-striped-color: var(--sbb-color-milk);
-  --sbb-table-color: inherit;
+  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-row-striped-color: var(--sbb-background-color-3);
+  --sbb-table-color: var(--sbb-color-1);
   --sbb-table-caption-color: var(--sbb-color-granite);
+  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
   --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
   --sbb-table-sticky-shadow-width: 3rem;
   --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
@@ -2491,7 +2763,9 @@ sup {
   line-height: var(--sbb-typo-line-height-body-text);
   letter-spacing: var(--sbb-typo-letter-spacing-body-text);
   font-size: var(--sbb-text-font-size);
-  color: var(--sbb-table-caption-color, var(--sbb-color-granite));
+  --sbb-table-caption-color-fallback: var(--sbb-color-granite);
+  --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
   margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
   text-align: left;
 }
@@ -2536,9 +2810,9 @@ sup {
 sbb-table-wrapper[negative] .sbb-table,
 .sbb-table--negative {
   --sbb-table-border-color: var(--sbb-color-anthracite);
-  --sbb-table-background-color: var(--sbb-color-midnight);
-  --sbb-table-color: var(--sbb-color-white);
-  --sbb-table-row-striped-color: var(--sbb-color-charcoal);
+  --sbb-table-background-color: var(--sbb-background-color-1-negative);
+  --sbb-table-color: var(--sbb-color-1-negative);
+  --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
   --sbb-table-caption-color: var(--sbb-color-cement);
 }
 
@@ -2551,7 +2825,7 @@ sbb-table-wrapper[negative] .sbb-table,
 }
 
 .sbb-table--theme-iron {
-  --sbb-table-cell-color: var(--sbb-color-iron);
+  --sbb-table-cell-color: var(--sbb-color-4);
 }
 .sbb-table--theme-iron tbody > tr > td {
   color: var(--sbb-table-cell-color);
@@ -2604,7 +2878,9 @@ sbb-table-wrapper[negative] .sbb-table,
   line-height: var(--sbb-typo-line-height-body-text);
   letter-spacing: var(--sbb-typo-letter-spacing-body-text);
   font-size: var(--sbb-text-font-size);
-  color: var(--sbb-table-caption-color, var(--sbb-color-granite));
+  --sbb-table-caption-color-fallback: var(--sbb-color-granite);
+  --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
   margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
   text-align: left;
 }
@@ -2664,4 +2940,78 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) tbody > tr > td {
   line-height: var(--sbb-typo-line-height-body-text);
   letter-spacing: var(--sbb-typo-letter-spacing-body-text);
   font-size: var(--sbb-text-font-size);
+}
+
+.sbb-timetable-form {
+  --sbb-timetable-form-content-max-width: 46.25rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  column-gap: var(--sbb-spacing-fixed-3x);
+  border-radius: var(--sbb-border-radius-4x);
+  padding-block: var(--sbb-spacing-fixed-10x) var(--sbb-spacing-responsive-l);
+  padding-inline: var(--sbb-spacing-fixed-5x);
+  background: linear-gradient(to bottom, var(--sbb-color-primary) 0 11.125rem, var(--sbb-background-color-3) 11.125rem 100%);
+}
+@media (max-width: calc(63.9375rem)) {
+  .sbb-timetable-form:has(sbb-signet) {
+    padding-block-start: var(--sbb-spacing-fixed-4x);
+  }
+}
+.sbb-timetable-form sbb-signet {
+  width: var(--sbb-spacing-fixed-16x);
+  align-self: end;
+  margin-block-end: var(--sbb-spacing-fixed-2x);
+  margin-inline: 0;
+}
+@media (min-width: calc(64rem)) {
+  .sbb-timetable-form sbb-signet {
+    position: absolute;
+    inset-block-start: var(--sbb-spacing-fixed-6x);
+    inset-inline-end: var(--sbb-spacing-fixed-6x);
+  }
+}
+.sbb-timetable-form > * {
+  margin-inline: auto;
+  max-width: var(--sbb-timetable-form-content-max-width);
+  width: 100%;
+}
+
+sbb-timetable-form sbb-date-input {
+  min-width: 8.3125rem;
+}
+sbb-timetable-form .sbb-timetable-form-block {
+  --sbb-form-field-focus-underline-z-index: 1;
+  width: 100%;
+  position: relative;
+}
+sbb-timetable-form .sbb-timetable-form-block::after {
+  content: "";
+  position: absolute;
+  border-block-end: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);
+  inset-inline: var(--sbb-form-field-padding-inline);
+  inset-block-end: 0;
+}
+sbb-timetable-form .sbb-timetable-form-block sbb-datepicker-toggle {
+  margin-inline-end: var(--sbb-spacing-fixed-6x);
+}
+@media (max-width: calc(37.4375rem)) {
+  sbb-timetable-form .sbb-timetable-form-mobile-block {
+    --sbb-form-field-focus-underline-z-index: 1;
+    width: 100%;
+    position: relative;
+  }
+  sbb-timetable-form .sbb-timetable-form-mobile-block::after {
+    content: "";
+    position: absolute;
+    border-block-end: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);
+    inset-inline: var(--sbb-form-field-padding-inline);
+    inset-block-end: 0;
+  }
+  sbb-timetable-form .sbb-timetable-form-mobile-block sbb-datepicker-toggle {
+    margin-inline-end: var(--sbb-spacing-fixed-6x);
+  }
+  sbb-timetable-form .sbb-timetable-form-mobile-hidden {
+    display: none;
+  }
 }