@sbb-esta/lyne-elements-dev 5.0.0-next.3-dev.1779781429 → 5.0.0-next.3-dev.1779813787

package/lean-theme.css

@@ -1,11 +1,25 @@
 @charset "UTF-8";
-sub, sup {
-  font-size: 60%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@font-face {
+  font-family: SBB;
+  src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Roman.woff2") format("woff2");
+  font-display: fallback;
+  font-weight: 400;
+}
+@font-face {
+  font-family: SBB;
+  src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Bold.woff2") format("woff2");
+  font-display: swap;
+  font-weight: 700;
+}
+@font-face {
+  font-family: SBB;
+  src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Light.woff2") format("woff2");
+  font-display: swap;
+  font-weight: 300;
 }
-
 html {
   text-size-adjust: 100%;
   tab-size: 4;
@@ -102,225 +116,19 @@ summary {
   display: list-item;
 }
 
-/**
- * Do not edit directly, this file was auto-generated.
- */
-:host {
-  display: flex;
-  flex-flow: var(--sbb-selection-group-orientation) wrap;
-  gap: var(--sbb-selection-group-gap);
-  align-items: flex-start;
-  width: var(--sbb-selection-group-width);
-}
-
-:host([orientation=vertical]) {
-  --sbb-selection-group-orientation: column;
-  --sbb-selection-group-width: 100%;
-  --sbb-selection-group-elements-width: 100%;
-}
-
-:host(:is(:state(has-panel),[state--has-panel])) {
-  --sbb-selection-group-width: 100%;
-  --sbb-selection-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
-  --sbb-selection-group-elements-flex: auto;
-}
-
-@media (min-width: calc(0rem)) {
-  :host([orientation=vertical][horizontal-from=zero]) {
-    --sbb-selection-group-orientation: row;
-    --sbb-selection-group-elements-width: auto;
-  }
-  :host([orientation=vertical][horizontal-from=zero]:not(:is(:state(has-panel),[state--has-panel]))) {
-    --sbb-selection-group-width: auto;
-  }
-}
-@media (min-width: calc(37.5rem)) {
-  :host([orientation=vertical][horizontal-from=small]) {
-    --sbb-selection-group-orientation: row;
-    --sbb-selection-group-elements-width: auto;
-  }
-  :host([orientation=vertical][horizontal-from=small]:not(:is(:state(has-panel),[state--has-panel]))) {
-    --sbb-selection-group-width: auto;
-  }
-}
-@media (min-width: calc(64rem)) {
-  :host([orientation=vertical][horizontal-from=large]) {
-    --sbb-selection-group-orientation: row;
-    --sbb-selection-group-elements-width: auto;
-  }
-  :host([orientation=vertical][horizontal-from=large]:not(:is(:state(has-panel),[state--has-panel]))) {
-    --sbb-selection-group-width: auto;
-  }
-}
-@media (min-width: calc(90rem)) {
-  :host([orientation=vertical][horizontal-from=ultra]) {
-    --sbb-selection-group-orientation: row;
-    --sbb-selection-group-elements-width: auto;
-  }
-  :host([orientation=vertical][horizontal-from=ultra]:not(:is(:state(has-panel),[state--has-panel]))) {
-    --sbb-selection-group-width: auto;
-  }
-}
-slot[name=error]::slotted(*) {
-  flex-basis: 100%;
-}
-
-::slotted(:is(sbb-checkbox-panel, sbb-radio-button-panel)) {
-  flex: var(--sbb-selection-group-elements-flex);
-}
-
-::slotted(:is(sbb-checkbox, sbb-checkbox-panel, sbb-radio-button-panel)) {
-  width: var(--sbb-selection-group-elements-width);
-}
-
-:host {
-  --sbb-tab-label-animation-duration: var(
-    --sbb-disable-animation-duration,
-    var(--sbb-animation-duration-2x)
-  );
-  --sbb-tab-label-outline-border-radius-internal: calc(
-    var(--sbb-tab-label-outline-border-radius) - var(--sbb-focus-outline-offset)
-  );
-}
-
-:host(:is(:is(:state(size-s),[state--size-s]), [size=s])) {
-  --sbb-tab-label-height: var(--sbb-size-element-xs);
-  --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs);
-  --sbb-tab-label-font-size: var(--sbb-text-font-size-s);
-}
-
-:host(:is(:is(:state(size-l),[state--size-l]), [size=l])) {
-  --sbb-tab-label-height: var(--sbb-size-element-m);
-  --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);
-  --sbb-tab-label-font-size: var(--sbb-text-font-size-m);
-}
-
-:host(:is(:is(:state(size-xl),[state--size-xl]), [size=xl])) {
-  --sbb-tab-label-height: var(--sbb-size-element-m);
-  --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);
-  --sbb-tab-label-font-size: var(--sbb-text-font-size-xl);
-}
-
-:host(sbb-tab-label),
-:host(sbb-tab-nav-bar) ::slotted(a) {
-  pointer-events: var(--sbb-tab-label-pointer-events, unset);
-}
-@media (forced-colors: active) {
-  :host(sbb-tab-label),
-  :host(sbb-tab-nav-bar) ::slotted(a) {
-    --sbb-tab-label-color: ButtonText;
-    --sbb-tab-label-amount-color: ButtonText;
-  }
-}
-
-:host(sbb-tab-nav-bar) ::slotted(a),
-:host(sbb-tab-label) .sbb-tab-label {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: var(--sbb-tab-label-gap);
-  color: var(--sbb-tab-label-color);
-  margin: 0;
-  padding-inline: var(--sbb-tab-label-inline-padding);
-  min-height: var(--sbb-tab-label-height);
-  transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);
-  font-size: var(--sbb-tab-label-font-size);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  line-height: var(--sbb-typo-line-height-text);
-  font-weight: var(--sbb-tab-label-font-weight);
-  text-decoration: var(--sbb-tab-label-text-decoration);
-}
-:host(sbb-tab-nav-bar) ::slotted(a)::after,
-:host(sbb-tab-label) .sbb-tab-label::after {
-  position: absolute;
-  content: "";
-  inset-inline: 0;
-  inset-block-end: 0;
-  height: var(--sbb-tab-label-marker-thickness);
-  background-color: var(--sbb-tab-label-color);
-  scale: var(--sbb-tab-label-marker-scale, 0);
-  transition-duration: var(--sbb-tab-label-animation-duration);
-  transition-timing-function: var(--sbb-tab-label-animation-easing);
-  transition-property: scale, background-color;
-}
-
-:host(sbb-tab-nav-bar) .sbb-tab-nav-bar > [data-has-divider],
-:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])) {
-  position: relative;
-}
-:host(sbb-tab-nav-bar) .sbb-tab-nav-bar > [data-has-divider]::before,
-:host(sbb-tab-label:is(:state(has-divider),[state--has-divider]))::before {
-  content: "";
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-end: 0;
-  width: var(--sbb-tab-group-width);
-  height: var(--sbb-border-width-1x);
-  background-color: var(--sbb-tab-label-line-color);
-}
-
-:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),
-:host(sbb-tab-label[disabled]) {
-  --sbb-tab-label-cursor: unset;
-  --sbb-tab-label-pointer-events: none;
-  --sbb-tab-label-text-decoration: line-through;
-}
-@media (forced-colors: active) {
-  :host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),
-  :host(sbb-tab-label[disabled]) {
-    --sbb-tab-label-color: GrayText;
-    --sbb-tab-label-amount-color: GrayText;
-  }
-}
-
-:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),
-:host(sbb-tab-label[active]:not([disabled])) {
-  --sbb-tab-label-color: var(--sbb-color-3);
-  --sbb-tab-label-cursor: unset;
-  --sbb-tab-label-pointer-events: none;
-  --sbb-tab-label-marker-scale: 1;
-}
-@media (forced-colors: active) {
-  :host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),
-  :host(sbb-tab-label[active]:not([disabled])) {
-    --sbb-tab-label-color: ButtonText;
-    --sbb-tab-label-amount-color: ButtonText;
-  }
-}
-
-@media (any-hover: hover) {
-  :host(sbb-tab-nav-bar) ::slotted(a:hover:not(.sbb-disabled)),
-  :host(sbb-tab-label:hover:not([disabled])) {
-    --sbb-tab-label-marker-scale: 1;
-  }
-}
-
-:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),
-:host(sbb-tab-label:active) {
-  --sbb-tab-label-color: var(--sbb-color-3);
-}
-@media (forced-colors: active) {
-  :host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),
-  :host(sbb-tab-label:active) {
-    --sbb-tab-label-color: ButtonText;
-    --sbb-tab-label-amount-color: ButtonText;
-  }
-}
-
-:host(sbb-tab-nav-bar) ::slotted(a:focus-visible),
-:host(sbb-tab-label:focus-visible) .sbb-tab-label {
-  outline-offset: var(--sbb-focus-outline-offset);
-  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
-  border-radius: var(--sbb-tab-label-outline-border-radius-internal);
-}
-
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
-
 :root {
+  --sbb-overlay-default-z-index: 1000;
+  --sbb-cursor-default: default;
+  --sbb-cursor-pointer: pointer;
+  --sbb-border-radius-infinity: calc(infinity * 1px);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: normal;
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-size: var(--sbb-text-font-size);
+  color-scheme: light dark;
+  color: var(--sbb-font-color-default);
+  background-color: var(--sbb-background-color-1);
   --sbb-animation-duration-1x: 0.04s;
   --sbb-animation-duration-2x: 0.08s;
   --sbb-animation-duration-3x: 0.12s;
@@ -1279,6 +1087,8 @@ slot[name=error]::slotted(*) {
   --sbb-size-element-s: var(--sbb-size-element-s-zero);
   --sbb-size-element-m: var(--sbb-size-element-m-zero);
   --sbb-size-element-l: var(--sbb-size-element-l-zero);
+  --sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-alert-group-border-radius: var(--sbb-border-radius-4x);
   --sbb-alert-background-color: var(--sbb-background-color-1-inverted);
   --sbb-alert-border-radius: var(--sbb-border-radius-4x);
   --sbb-alert-color: var(--sbb-color-aluminium);
@@ -1291,8 +1101,6 @@ slot[name=error]::slotted(*) {
   --sbb-alert-font-size: var(--sbb-text-font-size-s);
   --sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
   --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs);
-  --sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);
-  --sbb-alert-group-border-radius: var(--sbb-border-radius-4x);
   --sbb-breadcrumb-color: var(--sbb-color-granite);
   --sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
   --sbb-breadcrumb-color-hover: var(--sbb-color-charcoal);
@@ -1384,6 +1192,16 @@ slot[name=error]::slotted(*) {
   --sbb-calendar-cell-disabled-color: var(--sbb-color-granite);
   --sbb-calendar-cell-disabled-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   --sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-calendar-cell-border: var(--sbb-calendar-cell-border-width) solid
+    var(--sbb-border-color-1-inverted);
+  --sbb-calendar-cell-color: var(--sbb-color-2);
+  --sbb-calendar-cell-cursor: var(--sbb-cursor-pointer);
+  --sbb-calendar-cell-justify-content: normal;
+  --sbb-calendar-cell-inset: 0.0625rem;
+  --sbb-calendar-cell-font-size: var(--sbb-text-font-size-s);
+  --sbb-calendar-cell-font-weight: unset;
+  --sbb-calendar-cell-year-month-width: 4.8125rem;
+  --sbb-calendar-cell-year-month-height: 2.75rem;
   --sbb-calendar-control-gap: var(--sbb-spacing-fixed-2x);
   --sbb-calendar-control-margin-block-end: var(--sbb-spacing-fixed-4x);
   --sbb-calendar-control-view-change-height: 2.75rem;
@@ -1393,21 +1211,10 @@ slot[name=error]::slotted(*) {
     var(--sbb-spacing-fixed-2x);
   --sbb-calendar-header-color: var(--sbb-color-granite);
   --sbb-calendar-header-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  --sbb-calendar-table-animation-duration: 0.1ms;
   --sbb-calendar-table-animation-shift: 0.00625rem;
   --sbb-calendar-table-column-spaces: 12;
   --sbb-calendar-tables-gap: var(--sbb-spacing-fixed-10x);
-  --sbb-calendar-table-animation-duration: 0.1ms;
-  --sbb-calendar-cell-border: var(--sbb-calendar-cell-border-width) solid
-    var(--sbb-border-color-1-inverted);
-  --sbb-calendar-cell-color: var(--sbb-color-2);
-  --sbb-calendar-cell-cursor: var(--sbb-cursor-pointer);
-  --sbb-calendar-cell-justify-content: normal;
-  --sbb-calendar-cell-inset: 0.0625rem;
-  --sbb-calendar-cell-font-size: var(--sbb-text-font-size-s);
-  --sbb-calendar-cell-font-weight: unset;
-  --sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);
-  --sbb-calendar-cell-year-month-width: 4.8125rem;
-  --sbb-calendar-cell-year-month-height: 2.75rem;
   --sbb-calendar-day-width: 2.75rem;
   --sbb-calendar-day-height: 3rem;
   --sbb-calendar-day-extra-display: block;
@@ -1434,12 +1241,18 @@ slot[name=error]::slotted(*) {
   --sbb-carousel-border-radius: var(--sbb-border-radius-4x);
   --sbb-carousel-box-shadow: var(--sbb-box-shadow-level-9-hard);
   --sbb-carousel-paginator-padding: var(--sbb-spacing-responsive-xs);
-  --sbb-chip-label-color: var(--sbb-color-granite);
-  --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
-  --sbb-chip-label-background-color: var(--sbb-background-color-3);
-  --sbb-chip-label-padding-block: 0em;
-  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
-  --sbb-chip-label-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-carousel-list-border-radius: var(--sbb-border-radius-4x);
+  --sbb-checkbox-label-icon-flex-direction: row;
+  --sbb-checkbox-label-icon-justify-content: space-between;
+  --sbb-checkbox-label-icon-flex-grow: 1;
+  --sbb-checkbox-label-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-checkbox-dimension-xs: 1.25rem;
+  --sbb-checkbox-dimension-s: var(--sbb-size-icon-ui-small);
+  --sbb-checkbox-dimension-m: var(--sbb-size-icon-ui-small);
+  --sbb-checkbox-dimension: var(--sbb-checkbox-dimension-xs);
+  --sbb-checkbox-font-size: var(--sbb-text-font-size-xs);
+  --sbb-checkbox-label-color: var(--sbb-color-color-3);
+  --sbb-checkbox-cursor: var(--sbb-cursor-pointer);
   --sbb-chip-background-color: var(--sbb-background-color-3);
   --sbb-chip-background-color-active: var(--sbb-background-color-1);
   --sbb-chip-background-color-hover: var(--sbb-background-color-1);
@@ -1469,38 +1282,15 @@ slot[name=error]::slotted(*) {
   --sbb-chip-group-margin-block: 0;
   --sbb-chip-group-margin-block-no-label-not-empty: var(--_sbb-chip-group-margin-block-without-label-s);
   --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-with-label-s);
-  --sbb-selection-panel-background-default: var(--sbb-background-color-1);
-  --sbb-selection-panel-background-milk: var(--sbb-background-color-3);
-  --sbb-selection-panel-border-radius: var(--sbb-border-radius-4x);
-  --sbb-selection-panel-border-color-default: var(--sbb-border-color-4-inverted);
-  --sbb-selection-panel-border-color-checked: var(--sbb-border-color-3);
-  --sbb-selection-panel-border-color-borderless: transparent;
-  --sbb-selection-panel-border-color: var(--sbb-selection-panel-border-color-default);
-  --sbb-selection-panel-border-width-default: var(--sbb-border-width-1x);
-  --sbb-selection-panel-border-width-checked: var(--sbb-border-width-2x);
-  --sbb-selection-panel-input-padding-block-xs: var(--sbb-spacing-responsive-xxs);
-  --sbb-selection-panel-input-padding-inline-xs: var(--sbb-spacing-responsive-xxxs);
-  --sbb-selection-panel-input-padding-block-s: var(--sbb-spacing-responsive-xxs);
-  --sbb-selection-panel-input-padding-inline-s: var(--sbb-spacing-responsive-xxxs);
-  --sbb-selection-panel-input-padding-block-m: var(--sbb-spacing-responsive-xs);
-  --sbb-selection-panel-input-padding-inline-m: var(--sbb-spacing-responsive-xxs);
-  --sbb-selection-panel-input-padding: var(--sbb-selection-panel-input-padding-block-xs) var(--sbb-selection-panel-input-padding-inline-xs);
-  --sbb-selection-panel-checkbox-dimension: var(--sbb-checkbox-dimension-xs);
-  --sbb-selection-panel-cursor: var(--sbb-cursor-pointer);
-  --sbb-selection-panel-suffix-color: var(--sbb-color-3);
-  --sbb-selection-panel-subtext-color: var(--sbb-color-granite);
-  --sbb-selection-panel-subtext-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  --sbb-checkbox-label-icon-flex-direction: row;
-  --sbb-checkbox-label-icon-justify-content: space-between;
-  --sbb-checkbox-label-icon-flex-grow: 1;
-  --sbb-checkbox-label-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-checkbox-dimension-xs: 1.25rem;
-  --sbb-checkbox-dimension-s: var(--sbb-size-icon-ui-small);
-  --sbb-checkbox-dimension-m: var(--sbb-size-icon-ui-small);
-  --sbb-checkbox-dimension: var(--sbb-checkbox-dimension-xs);
-  --sbb-checkbox-font-size: var(--sbb-text-font-size-xs);
-  --sbb-checkbox-label-color: var(--sbb-color-color-3);
-  --sbb-checkbox-cursor: var(--sbb-cursor-pointer);
+  --sbb-chip-label-color: var(--sbb-color-granite);
+  --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
+  --sbb-chip-label-background-color: var(--sbb-background-color-3);
+  --sbb-chip-label-padding-block: 0em;
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-clock-seconds-hand-color: var(--sbb-color-brand);
+  --sbb-clock-face-color: var(--sbb-color-1);
+  --sbb-clock-background-color: var(--sbb-background-color-1);
   --sbb-container-background-border-radius: 0;
   --sbb-container-color: inherit;
   --sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);
@@ -1508,9 +1298,6 @@ slot[name=error]::slotted(*) {
   --sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs);
   --sbb-sticky-bar-position: sticky;
   --sbb-sticky-bar-slide-vertically-animation-easing: ease-out;
-  --sbb-clock-seconds-hand-color: var(--sbb-color-brand);
-  --sbb-clock-face-color: var(--sbb-color-1);
-  --sbb-clock-background-color: var(--sbb-background-color-1);
   --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-5x);
   --sbb-dialog-color: var(--sbb-color-2);
   --sbb-dialog-background-color: var(--sbb-background-color-1);
@@ -1535,9 +1322,6 @@ slot[name=error]::slotted(*) {
   --sbb-divider-color: var(--sbb-background-color-4);
   --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
   --sbb-divider-border-width: var(--sbb-border-width-1x);
-  --sbb-error-color: var(--sbb-color-error);
-  --sbb-error-icon-size: 1.0625rem;
-  --sbb-error-font-size: var(--sbb-text-font-size-xs);
   --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
   --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
   --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
@@ -1586,6 +1370,9 @@ slot[name=error]::slotted(*) {
   --sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);
   --sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);
   --sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
+  --sbb-error-color: var(--sbb-color-error);
+  --sbb-error-icon-size: 1.0625rem;
+  --sbb-error-font-size: var(--sbb-text-font-size-xs);
   --sbb-form-field-background-color: var(--sbb-background-color-1);
   --sbb-form-field-border-color: var(--sbb-border-color-5);
   --sbb-form-field-border-style: solid;
@@ -1608,13 +1395,6 @@ slot[name=error]::slotted(*) {
   --_sbb-form-field-floating-label-transform: 0.34375rem;
   --_sbb-form-field-spacer-margin-block-end: -0.53125rem;
   --_sbb-form-field-input-margin-block-end: -0.125rem;
-  --sbb-header-background: var(--sbb-background-color-1);
-  --sbb-header-box-shadow: var(--sbb-box-shadow-level-9-soft);
-  --sbb-header-inset-inline-end: 0;
-  --sbb-header-position: fixed;
-  --sbb-header-height-s: 3.25rem;
-  --sbb-header-height-m: var(--sbb-spacing-fixed-14x);
-  --sbb-header-height: var(--sbb-header-height-s);
   --sbb-header-action-color: var(--sbb-color-1);
   --sbb-header-action-background-color: transparent;
   --sbb-header-action-min-height-s: var(--sbb-size-element-xs);
@@ -1630,6 +1410,13 @@ slot[name=error]::slotted(*) {
   --sbb-header-action-active-border-width: var(--sbb-border-width-2x);
   --sbb-header-action-active-border-color: var(--sbb-header-action-color);
   --sbb-header-first-item-icon-shift: 0.125rem;
+  --sbb-header-background: var(--sbb-background-color-1);
+  --sbb-header-box-shadow: var(--sbb-box-shadow-level-9-soft);
+  --sbb-header-inset-inline-end: 0;
+  --sbb-header-position: fixed;
+  --sbb-header-height-s: 3.25rem;
+  --sbb-header-height-m: var(--sbb-spacing-fixed-14x);
+  --sbb-header-height: var(--sbb-header-height-s);
   --sbb-header-environment-background-color: var(--sbb-color-granite);
   --sbb-header-environment-color: var(--sbb-color-1-negative);
   --sbb-header-environment-size: 2.375rem;
@@ -1667,15 +1454,6 @@ slot[name=error]::slotted(*) {
   --sbb-map-container-sidebar-width: 25rem;
   --sbb-map-container-sidebar-background-color: var(--sbb-background-color-1);
   --sbb-map-container-border-radius: var(--sbb-border-radius-4x);
-  --sbb-menu-animation-easing: ease;
-  --sbb-menu-max-width: 100%;
-  --sbb-menu-min-width: 100%;
-  --sbb-menu-container-height: 100dvh;
-  --sbb-menu-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));
-  --sbb-menu-min-height: 3.03125rem;
-  --sbb-menu-border-radius: var(--sbb-border-radius-4x);
-  --sbb-menu-color: var(--sbb-color-2-inverted);
-  --sbb-menu-background-color: var(--sbb-background-color-1-inverted);
   --sbb-menu-action-border-radius: var(--sbb-border-radius-infinity);
   --sbb-menu-action-outer-horizontal-padding: var(--sbb-spacing-fixed-3x);
   --sbb-menu-action-outer-vertical-padding: var(--sbb-spacing-fixed-1x);
@@ -1684,12 +1462,37 @@ slot[name=error]::slotted(*) {
   --sbb-menu-action-content-padding-inline: var(--sbb-spacing-fixed-2x);
   --sbb-menu-action-content-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-menu-action-forced-color-border-color: CanvasText;
-  --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
-  --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
+  --sbb-menu-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));
+  --sbb-menu-min-height: 3.03125rem;
+  --sbb-menu-border-radius: var(--sbb-border-radius-4x);
+  --sbb-menu-color: var(--sbb-color-2-inverted);
+  --sbb-menu-background-color: var(--sbb-background-color-1-inverted);
+  --sbb-menu-animation-easing: ease;
+  --sbb-menu-max-width: 100%;
+  --sbb-menu-min-width: 100%;
+  --sbb-menu-container-height: 100dvh;
+  --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
+  --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
   --sbb-message-image-border-radius: var(--sbb-border-radius-4x);
   --sbb-message-subtitle-color: var(--sbb-color-granite);
   --sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
   --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
+  --sbb-mini-calendar-day-animation-easing: var(--sbb-animation-easing);
+  --sbb-mini-calendar-day-dimensions: 0.375rem;
+  --sbb-mini-calendar-day-scale: 1.333;
+  --sbb-mini-calendar-month-offset: 0;
+  --sbb-mini-calendar-month-visibilty-year: hidden;
+  --sbb-mini-calendar-month-label-color: var(--sbb-color-granite);
+  --sbb-mini-calendar-month-label-color: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-silver)
+  );
+  --sbb-navigation-action-color: var(--sbb-color-4-negative);
+  --sbb-navigation-action-icon-display: none;
+  --sbb-navigation-action-font-size: var(--sbb-text-font-size-xl);
+  --sbb-navigation-action-letter-spacing: var(--sbb-typo-letter-spacing-heading);
+  --sbb-navigation-action-line-height: var(--sbb-typo-line-height-heading);
+  --sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);
   --sbb-navigation-grid-column: 1 / -1;
   --sbb-navigation-animation-easing: ease-in;
   --sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);
@@ -1707,16 +1510,10 @@ slot[name=error]::slotted(*) {
   --sbb-navigation-content-translate: 0;
   --sbb-navigation-width: 100%;
   --sbb-navigation-height: 100dvh;
-  --sbb-navigation-action-color: var(--sbb-color-4-negative);
-  --sbb-navigation-action-icon-display: none;
-  --sbb-navigation-action-font-size: var(--sbb-text-font-size-xl);
-  --sbb-navigation-action-letter-spacing: var(--sbb-typo-letter-spacing-heading);
-  --sbb-navigation-action-line-height: var(--sbb-typo-line-height-heading);
   --sbb-navigation-list-font-size: var(--sbb-text-font-size-xxs);
   --sbb-navigation-list-gap: var(--sbb-spacing-fixed-2x);
   --sbb-navigation-list-margin-block: var(--sbb-spacing-fixed-1x);
   --sbb-navigation-list-padding-block-end: var(--sbb-spacing-fixed-2x);
-  --sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);
   --sbb-navigation-marker-position-x: var(--sbb-spacing-fixed-1x);
   --sbb-navigation-marker-position-y: unset;
   --sbb-navigation-marker-width: 1.0625rem;
@@ -1738,16 +1535,6 @@ slot[name=error]::slotted(*) {
   --sbb-navigation-section-width: 100dvw;
   --sbb-navigation-section-height: 100dvh;
   --sbb-navigation-section-font-size: var(--sbb-heading-font-size-4);
-  --sbb-mini-calendar-day-animation-easing: var(--sbb-animation-easing);
-  --sbb-mini-calendar-day-dimensions: 0.375rem;
-  --sbb-mini-calendar-day-scale: 1.333;
-  --sbb-mini-calendar-month-offset: 0;
-  --sbb-mini-calendar-month-visibilty-year: hidden;
-  --sbb-mini-calendar-month-label-color: var(--sbb-color-granite);
-  --sbb-mini-calendar-month-label-color: light-dark(
-    var(--sbb-color-granite),
-    var(--sbb-color-silver)
-  );
   --sbb-notification-base-border-radius: var(--sbb-border-radius-4x);
   --sbb-notification-border-width: var(--sbb-border-width-1x);
   --sbb-notification-color: var(--sbb-color-2-negative-inverted);
@@ -1760,6 +1547,12 @@ slot[name=error]::slotted(*) {
   --sbb-notification-content-margin-block-start: var(--sbb-spacing-fixed-2x);
   --sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xxs);
   --sbb-notification-close-wrapper-gap: var(--sbb-spacing-responsive-xxs);
+  --sbb-optgroup-label-color: var(--sbb-color-metal);
+  --sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
+  --sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);
+  --sbb-optgroup-divider-color: var(--sbb-divider-color);
   --sbb-option-color: var(--sbb-color-3);
   --sbb-option-background-color: inherit;
   --sbb-option-background-color-hover: var(--sbb-color-milk);
@@ -1793,12 +1586,6 @@ slot[name=error]::slotted(*) {
   --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
   --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
   --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-optgroup-label-color: var(--sbb-color-metal);
-  --sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
-  --sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
-  --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
-  --sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);
-  --sbb-optgroup-divider-color: var(--sbb-divider-color);
   --sbb-overlay-background-color: var(--sbb-background-color-3);
   --sbb-overlay-display: none;
   --sbb-overlay-height: 100%;
@@ -1816,6 +1603,27 @@ slot[name=error]::slotted(*) {
   --sbb-compact-paginator-font-size: var(--sbb-text-font-size-m);
   --sbb-compact-paginator-gap: var(--sbb-spacing-fixed-5x);
   --sbb-compact-paginator-pages-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-selection-panel-background-default: var(--sbb-background-color-1);
+  --sbb-selection-panel-background-milk: var(--sbb-background-color-3);
+  --sbb-selection-panel-border-radius: var(--sbb-border-radius-4x);
+  --sbb-selection-panel-border-color-default: var(--sbb-border-color-4-inverted);
+  --sbb-selection-panel-border-color-checked: var(--sbb-border-color-3);
+  --sbb-selection-panel-border-color-borderless: transparent;
+  --sbb-selection-panel-border-color: var(--sbb-selection-panel-border-color-default);
+  --sbb-selection-panel-border-width-default: var(--sbb-border-width-1x);
+  --sbb-selection-panel-border-width-checked: var(--sbb-border-width-2x);
+  --sbb-selection-panel-input-padding-block-xs: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-panel-input-padding-inline-xs: var(--sbb-spacing-responsive-xxxs);
+  --sbb-selection-panel-input-padding-block-s: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-panel-input-padding-inline-s: var(--sbb-spacing-responsive-xxxs);
+  --sbb-selection-panel-input-padding-block-m: var(--sbb-spacing-responsive-xs);
+  --sbb-selection-panel-input-padding-inline-m: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-panel-input-padding: var(--sbb-selection-panel-input-padding-block-xs) var(--sbb-selection-panel-input-padding-inline-xs);
+  --sbb-selection-panel-checkbox-dimension: var(--sbb-checkbox-dimension-xs);
+  --sbb-selection-panel-cursor: var(--sbb-cursor-pointer);
+  --sbb-selection-panel-suffix-color: var(--sbb-color-3);
+  --sbb-selection-panel-subtext-color: var(--sbb-color-granite);
+  --sbb-selection-panel-subtext-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   --sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);
   --sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));
   --sbb-popover-border-radius: var(--sbb-border-radius-8x);
@@ -1835,11 +1643,11 @@ slot[name=error]::slotted(*) {
   --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-xs);
   --sbb-radio-button-inner-circle-dimension: 0.625rem;
   --sbb-radio-button-font-size: var(--sbb-text-font-size-xs);
-  --sbb-selection-group-orientation: row;
-  --sbb-selection-group-elements-width: auto;
-  --sbb-selection-group-width: auto;
-  --sbb-selection-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);
-  --sbb-selection-group-elements-flex: none;
+  --sbb-select-placeholder-fallback-color: var(--sbb-color-metal);
+  --sbb-select-placeholder-fallback-color: light-dark(
+    var(--sbb-color-metal),
+    var(--sbb-color-smoke)
+  );
   --sbb-selection-action-panel-action-margin-inline-xs: var(--sbb-spacing-responsive-xxxs);
   --sbb-selection-action-panel-action-margin-inline-s: var(--sbb-spacing-responsive-xxxs);
   --sbb-selection-action-panel-action-margin-inline-m: var(--sbb-spacing-responsive-xxs);
@@ -1856,6 +1664,11 @@ slot[name=error]::slotted(*) {
     --sbb-selection-panel-input-padding-block-m
   );
   --sbb-selection-expansion-panel-content-padding-inline: var(--sbb-selection-panel-input-padding-inline-xs);
+  --sbb-selection-group-orientation: row;
+  --sbb-selection-group-elements-width: auto;
+  --sbb-selection-group-width: auto;
+  --sbb-selection-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);
+  --sbb-selection-group-elements-flex: none;
   --sbb-sidebar-background-color: var(--sbb-background-color-1);
   --sbb-sidebar-title-padding-block: var(--sbb-spacing-fixed-3x);
   --sbb-sidebar-padding: var(--sbb-spacing-responsive-xs);
@@ -1866,11 +1679,6 @@ slot[name=error]::slotted(*) {
   --sbb-signet-panel-color: var(--sbb-color-brand);
   --sbb-signet-icon-color: var(--sbb-color-white);
   --sbb-signet-aspect-ratio: 2 / 1;
-  --sbb-select-placeholder-fallback-color: var(--sbb-color-metal);
-  --sbb-select-placeholder-fallback-color: light-dark(
-    var(--sbb-color-metal),
-    var(--sbb-color-smoke)
-  );
   --sbb-slider-line-height: 0.25rem;
   --sbb-slider-knob-size: 1.75rem;
   --sbb-slider-knob-size-active: 1.9375rem;
@@ -1950,59 +1758,6 @@ slot[name=error]::slotted(*) {
   --sbb-tab-label-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-tab-label-line-color: var(--sbb-border-color-4-inverted);
   --sbb-tab-label-cursor: var(--sbb-cursor-pointer);
-  --sbb-train-blocked-passage-background-color: var(--sbb-color-error);
-  --sbb-train-blocked-passage-bar-color: var(--sbb-color-white);
-  --sbb-train-blocked-passage-icon-bar-width: 0.625rem;
-  --sbb-train-blocked-passage-icon-bar-height: 0.25rem;
-  --sbb-train-blocked-passage-icon-bar-border-radius: var(--sbb-border-radius-1x);
-  --sbb-train-formation-wagon-dimension-short: 2.25rem;
-  --sbb-train-formation-wagon-dimension-long: 5.25rem;
-  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-train-formation-sector-line-color: var(--sbb-color-cement);
-  --sbb-train-formation-sector-line-color: light-dark(
-    var(--sbb-color-cement),
-    var(--sbb-color-smoke)
-  );
-  --sbb-train-formation-sector-line-width: var(--sbb-border-width-1x);
-  --sbb-train-formation-blocked-passage-dimension: 1rem;
-  --sbb-train-formation-text-color: var(--sbb-color-3);
-  --sbb-train-formation-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-train-formation-sector-padding: var(--sbb-spacing-fixed-1x);
-  --sbb-train-formation-sector-margin: var(--sbb-spacing-fixed-2x);
-  --sbb-train-formation-padding: var(--sbb-spacing-fixed-1x);
-  --_sbb-train-formation-flex-direction: row;
-  --_sbb-train-formation-flex-direction-inverted: column;
-  --sbb-train-wagon-font-size: var(--sbb-text-font-size-xxs);
-  --sbb-train-wagon-shape-color: var(--sbb-color-3);
-  --sbb-train-wagon-vertical-gap: 0.125rem;
-  --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-3x);
-  --sbb-train-wagon-border-width: var(--sbb-border-width-1x);
-  --sbb-train-wagon-main-icon-height: 1.25rem;
-  --sbb-train-wagon-attribute-icon-gap: 0.125rem;
-  --sbb-train-wagon-attribute-icon-height: 0.875rem;
-  --sbb-train-wagon-attribute-icon-color: var(--sbb-color-1);
-  --sbb-train-wagon-attributes-max-width: 3.4375rem;
-  --sbb-train-wagon-attributes-mean-width: 1.75rem;
-  --sbb-train-wagon-occupancy-height: 0.75rem;
-  --sbb-train-wagon-background-color-hover: var(--sbb-background-color-3);
-  --sbb-train-wagon-background-color-active: var(--sbb-background-color-4);
-  --sbb-train-wagon-border-radius: var(--sbb-border-radius-6x);
-  --sbb-train-wagon-information-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-train-wagon-information-min-width: 1.875rem;
-  --sbb-train-wagon-class-dimension: 1.125rem;
-  --sbb-train-wagon-class-color: var(--sbb-color-anthracite);
-  --sbb-train-wagon-class-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-graphite));
-  --sbb-train-wagon-class-background-color: var(--sbb-background-color-3);
-  --sbb-train-wagon-class-border-width: var(--sbb-border-width-1x);
-  --sbb-train-wagon-class-border: var(--sbb-train-wagon-class-border-width) solid
-    var(--sbb-color-graphite);
-  --sbb-train-wagon-class-border: var(--sbb-train-wagon-class-border-width) solid
-    light-dark(var(--sbb-color-graphite), var(--sbb-color-anthracite));
-  --sbb-train-wagon-class-border-radius: var(--sbb-border-radius-2x);
-  --sbb-train-wagon-class-font-weight: bold;
-  --sbb-train-wagon-class-first-thickness: 0.25rem;
-  --sbb-train-wagon-class-first-color: var(--sbb-color-lemon);
-  --sbb-train-wagon-class-first-border-radius: var(--sbb-border-radius-1x);
   --sbb-tag-animation-easing: var(--sbb-animation-easing);
   --sbb-tag-background-color: var(--sbb-background-color-1);
   --sbb-tag-border-color: var(--sbb-border-color-4-inverted);
@@ -2063,6 +1818,7 @@ slot[name=error]::slotted(*) {
   --sbb-teaser-product-footer-font-size: var(--sbb-text-font-size-xxs);
   --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-s);
   --sbb-teaser-product-footer-padding-block-end: 0;
+  --sbb-time-input-max-width: 3.625rem;
   --sbb-timetable-form-background-color: var(--sbb-background-color-1);
   --sbb-timetable-form-border-radius: var(--sbb-border-radius-4x);
   --sbb-timetable-form-details-border-block-start: var(--sbb-border-width-1x) solid
@@ -2079,23 +1835,19 @@ slot[name=error]::slotted(*) {
   --sbb-timetable-occupancy-font-size: var(--sbb-text-font-size-s);
   --sbb-timetable-occupancy-list-gap: var(--sbb-spacing-fixed-2x);
   --sbb-timetable-occupancy-item-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-time-input-max-width: 3.625rem;
   --sbb-title-color: var(--sbb-color-3);
-  --sbb-toggle-check-font-size: var(--sbb-text-font-size-xs);
-  --sbb-toggle-check-color: var(--sbb-color-2);
-  --sbb-toggle-check-checked-color: var(--sbb-color-primary);
-  --sbb-toggle-check-background-color: var(--sbb-background-color-4);
-  --sbb-toggle-check-icon-color: var(--sbb-toggle-check-checked-color);
-  --sbb-toggle-check-circle-background-color: var(--sbb-background-color-1);
-  --sbb-toggle-check-circle-border-color: var(--sbb-border-color-5);
-  --sbb-toggle-check-circle-border-style: solid;
-  --sbb-toggle-check-circle-diameter: 1.75rem;
-  --sbb-toggle-check-height: var(--sbb-size-icon-ui-small);
-  --sbb-toggle-check-cursor: var(--sbb-cursor-pointer);
-  --sbb-toggle-check-gap: var(--sbb-spacing-fixed-3x);
-  --sbb-toggle-check-border-width: var(--sbb-border-width-1x);
-  --sbb-toggle-check-border-radius: var(--sbb-border-radius-4x);
-  --sbb-toggle-check-shadow: var(--sbb-box-shadow-level-5-hard);
+  --sbb-toast-max-width: 25rem;
+  --sbb-toast-animation-timing-function: ease;
+  --sbb-toast-text-color: var(--sbb-color-3-inverted);
+  --sbb-toast-background-color: var(--sbb-background-color-1-inverted);
+  --sbb-toast-margin: var(--sbb-spacing-responsive-s);
+  --sbb-toast-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-toast-padding-inline: var(--sbb-spacing-responsive-xs);
+  --sbb-toast-border-radius: var(--sbb-border-radius-4x);
+  --sbb-toast-container-position: fixed;
+  --sbb-toast-horizontal-position: initial;
+  --sbb-toast-vertical-position: initial;
+  --sbb-toast-gap: var(--sbb-spacing-fixed-2x);
   --sbb-toggle-height-s: var(--sbb-size-element-xxs);
   --sbb-toggle-height-m: var(--sbb-size-element-m);
   --sbb-toggle-height: var(--sbb-toggle-height-s);
@@ -2116,6 +1868,21 @@ slot[name=error]::slotted(*) {
   --sbb-toggle-option-gap: var(--sbb-spacing-fixed-1x);
   --sbb-toggle-option-font-size: var(--sbb-text-font-size-xs);
   --sbb-toggle-option-icon-min-size: var(--sbb-size-icon-ui-small);
+  --sbb-toggle-check-font-size: var(--sbb-text-font-size-xs);
+  --sbb-toggle-check-color: var(--sbb-color-2);
+  --sbb-toggle-check-checked-color: var(--sbb-color-primary);
+  --sbb-toggle-check-background-color: var(--sbb-background-color-4);
+  --sbb-toggle-check-icon-color: var(--sbb-toggle-check-checked-color);
+  --sbb-toggle-check-circle-background-color: var(--sbb-background-color-1);
+  --sbb-toggle-check-circle-border-color: var(--sbb-border-color-5);
+  --sbb-toggle-check-circle-border-style: solid;
+  --sbb-toggle-check-circle-diameter: 1.75rem;
+  --sbb-toggle-check-height: var(--sbb-size-icon-ui-small);
+  --sbb-toggle-check-cursor: var(--sbb-cursor-pointer);
+  --sbb-toggle-check-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-toggle-check-border-width: var(--sbb-border-width-1x);
+  --sbb-toggle-check-border-radius: var(--sbb-border-radius-4x);
+  --sbb-toggle-check-shadow: var(--sbb-box-shadow-level-5-hard);
   --sbb-tooltip-animation-easing: ease-out;
   --sbb-tooltip-animation-translate: 0 var(--sbb-spacing-fixed-2x);
   --sbb-tooltip-background-color: var(--sbb-background-color-1-inverted);
@@ -2130,18 +1897,59 @@ slot[name=error]::slotted(*) {
   --sbb-overlay-position-try-fallbacks:
     block-start span-inline-end, block-start span-inline-start, block-end,
     block-end span-inline-end, block-end span-inline-start;
-  --sbb-toast-max-width: 25rem;
-  --sbb-toast-animation-timing-function: ease;
-  --sbb-toast-text-color: var(--sbb-color-3-inverted);
-  --sbb-toast-background-color: var(--sbb-background-color-1-inverted);
-  --sbb-toast-margin: var(--sbb-spacing-responsive-s);
-  --sbb-toast-padding-block: var(--sbb-spacing-responsive-xxxs);
-  --sbb-toast-padding-inline: var(--sbb-spacing-responsive-xs);
-  --sbb-toast-border-radius: var(--sbb-border-radius-4x);
-  --sbb-toast-container-position: fixed;
-  --sbb-toast-horizontal-position: initial;
-  --sbb-toast-vertical-position: initial;
-  --sbb-toast-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-train-blocked-passage-background-color: var(--sbb-color-error);
+  --sbb-train-blocked-passage-bar-color: var(--sbb-color-white);
+  --sbb-train-blocked-passage-icon-bar-width: 0.625rem;
+  --sbb-train-blocked-passage-icon-bar-height: 0.25rem;
+  --sbb-train-blocked-passage-icon-bar-border-radius: var(--sbb-border-radius-1x);
+  --sbb-train-formation-wagon-dimension-short: 2.25rem;
+  --sbb-train-formation-wagon-dimension-long: 5.25rem;
+  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-train-formation-sector-line-color: var(--sbb-color-cement);
+  --sbb-train-formation-sector-line-color: light-dark(
+    var(--sbb-color-cement),
+    var(--sbb-color-smoke)
+  );
+  --sbb-train-formation-sector-line-width: var(--sbb-border-width-1x);
+  --sbb-train-formation-blocked-passage-dimension: 1rem;
+  --sbb-train-formation-text-color: var(--sbb-color-3);
+  --sbb-train-formation-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-train-formation-sector-padding: var(--sbb-spacing-fixed-1x);
+  --sbb-train-formation-sector-margin: var(--sbb-spacing-fixed-2x);
+  --sbb-train-formation-padding: var(--sbb-spacing-fixed-1x);
+  --_sbb-train-formation-flex-direction: row;
+  --_sbb-train-formation-flex-direction-inverted: column;
+  --sbb-train-wagon-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-train-wagon-shape-color: var(--sbb-color-3);
+  --sbb-train-wagon-vertical-gap: 0.125rem;
+  --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-3x);
+  --sbb-train-wagon-border-width: var(--sbb-border-width-1x);
+  --sbb-train-wagon-main-icon-height: 1.25rem;
+  --sbb-train-wagon-attribute-icon-gap: 0.125rem;
+  --sbb-train-wagon-attribute-icon-height: 0.875rem;
+  --sbb-train-wagon-attribute-icon-color: var(--sbb-color-1);
+  --sbb-train-wagon-attributes-max-width: 3.4375rem;
+  --sbb-train-wagon-attributes-mean-width: 1.75rem;
+  --sbb-train-wagon-occupancy-height: 0.75rem;
+  --sbb-train-wagon-background-color-hover: var(--sbb-background-color-3);
+  --sbb-train-wagon-background-color-active: var(--sbb-background-color-4);
+  --sbb-train-wagon-border-radius: var(--sbb-border-radius-6x);
+  --sbb-train-wagon-information-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-train-wagon-information-min-width: 1.875rem;
+  --sbb-train-wagon-class-dimension: 1.125rem;
+  --sbb-train-wagon-class-color: var(--sbb-color-anthracite);
+  --sbb-train-wagon-class-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-graphite));
+  --sbb-train-wagon-class-background-color: var(--sbb-background-color-3);
+  --sbb-train-wagon-class-border-width: var(--sbb-border-width-1x);
+  --sbb-train-wagon-class-border: var(--sbb-train-wagon-class-border-width) solid
+    var(--sbb-color-graphite);
+  --sbb-train-wagon-class-border: var(--sbb-train-wagon-class-border-width) solid
+    light-dark(var(--sbb-color-graphite), var(--sbb-color-anthracite));
+  --sbb-train-wagon-class-border-radius: var(--sbb-border-radius-2x);
+  --sbb-train-wagon-class-font-weight: bold;
+  --sbb-train-wagon-class-first-thickness: 0.25rem;
+  --sbb-train-wagon-class-first-color: var(--sbb-color-lemon);
+  --sbb-train-wagon-class-first-border-radius: var(--sbb-border-radius-1x);
   --sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-xs);
   --sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
   --sbb-visual-checkbox-selection-color-negative: var(--sbb-color-primary85);
@@ -2172,25 +1980,17 @@ slot[name=error]::slotted(*) {
     --sbb-card-border-width: var(--sbb-border-width-2x);
     --sbb-card-badge-border-display: block;
     --sbb-card-badge-inline-border-display: none;
+    --sbb-expansion-panel-header-text-color: ButtonText;
+    --sbb-form-field-border-color: ButtonBorder;
     --sbb-header-action-border-color: CanvasText;
     --sbb-header-action-color: LinkText;
     --sbb-header-action-active-border-width: 0;
-    --sbb-expansion-panel-header-text-color: ButtonText;
-    --sbb-form-field-border-color: ButtonBorder;
     --sbb-loading-indicator-circle-animated-width: 50%;
     --sbb-loading-indicator-circle-animated-height: 100%;
     --sbb-loading-indicator-circle-animated-border-radius: 0;
     --sbb-loading-indicator-circle-background: transparent;
     --sbb-logo-panel-color: ButtonText !important;
     --sbb-logo-signet-color: Canvas !important;
-    --sbb-visual-checkbox-selection-color: Canvas;
-    --sbb-visual-checkbox-selection-color-negative: Canvas;
-    --sbb-visual-checkbox-selection-color-disabled: Canvas;
-    --sbb-visual-checkbox-selection-color-disabled-negative: Canvas;
-    --sbb-visual-checkbox-border-color: ButtonBorder;
-    --sbb-visual-checkbox-border-color-disabled: GrayText;
-    --sbb-visual-checkbox-border-width: var(--sbb-border-width-2x);
-    --sbb-visual-checkbox-border-style-disabled: solid;
     --sbb-radio-button-background-color: Canvas;
     --sbb-radio-button-border-width: var(--sbb-border-width-2x);
     --sbb-radio-button-border-color: ButtonBorder;
@@ -2206,25 +2006,24 @@ slot[name=error]::slotted(*) {
     --sbb-tag-text-color: ButtonText;
     --sbb-tag-border-color: CanvasText;
     --sbb-tag-border-width: var(--sbb-border-width-2x);
-    --sbb-toggle-check-background-color: CanvasText;
-    --sbb-toggle-check-circle-background-color: Canvas;
     --sbb-toggle-selected-option-border-width: var(--sbb-border-width-2x);
     --sbb-toggle-selected-option-border-color: Highlight;
+    --sbb-toggle-check-background-color: CanvasText;
+    --sbb-toggle-check-circle-background-color: Canvas;
     --sbb-train-blocked-passage-background-color: CanvasText;
     --sbb-train-blocked-passage-bar-color: Canvas;
     --sbb-train-formation-sector-line-color: CanvasText;
     --sbb-train-wagon-shape-color: CanvasText;
+    --sbb-visual-checkbox-selection-color: Canvas;
+    --sbb-visual-checkbox-selection-color-negative: Canvas;
+    --sbb-visual-checkbox-selection-color-disabled: Canvas;
+    --sbb-visual-checkbox-selection-color-disabled-negative: Canvas;
+    --sbb-visual-checkbox-border-color: ButtonBorder;
+    --sbb-visual-checkbox-border-color-disabled: GrayText;
+    --sbb-visual-checkbox-border-width: var(--sbb-border-width-2x);
+    --sbb-visual-checkbox-border-style-disabled: solid;
   }
 }
-:root {
-  --sbb-overlay-default-z-index: 1000;
-  --sbb-cursor-default: default;
-  --sbb-cursor-pointer: pointer;
-  --sbb-border-radius-infinity: calc(infinity * 1px);
-}
-:root:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
-  --sbb-focus-outline-style: none;
-}
 @media (min-width: calc(37.5rem)) {
   :root {
     /* Title */
@@ -2310,6 +2109,9 @@ slot[name=error]::slotted(*) {
     --_sbb-form-field-spacer-margin-block-end: -0.5rem;
     --sbb-header-height-s: var(--sbb-spacing-fixed-14x);
     --sbb-header-height-m: var(--sbb-spacing-fixed-24x);
+    --sbb-menu-max-width: 20rem;
+    --sbb-menu-min-width: 11.25rem;
+    --sbb-menu-transform-y: var(--sbb-spacing-fixed-2x);
     --sbb-navigation-grid-column: 1 / 5;
     --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);
     --sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;
@@ -2323,9 +2125,6 @@ slot[name=error]::slotted(*) {
     --sbb-navigation-section-translate: 0;
     --sbb-navigation-section-content-padding-inline-start: 0;
     --sbb-navigation-section-font-size: var(--sbb-heading-font-size-2);
-    --sbb-menu-max-width: 20rem;
-    --sbb-menu-min-width: 11.25rem;
-    --sbb-menu-transform-y: var(--sbb-spacing-fixed-2x);
     --sbb-panel-width: 20.0625rem;
     --sbb-panel-inner-height: 15.006875rem;
     --sbb-panel-triangle-height: 2.965625rem;
@@ -2368,24 +2167,50 @@ slot[name=error]::slotted(*) {
   }
 }
 
-@font-face {
-  font-family: SBB;
-  src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Roman.woff2") format("woff2");
-  font-display: fallback;
-  font-weight: 400;
+*,
+::before,
+::after {
+  box-sizing: border-box;
 }
-@font-face {
-  font-family: SBB;
-  src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Bold.woff2") format("woff2");
-  font-display: swap;
-  font-weight: 700;
+
+:root:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
+  --sbb-focus-outline-style: none;
 }
-@font-face {
-  font-family: SBB;
-  src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Light.woff2") format("woff2");
-  font-display: swap;
-  font-weight: 300;
+
+::placeholder {
+  color: var(--sbb-color-5);
+  -webkit-text-fill-color: var(--sbb-color-5);
+  opacity: 1;
+}
+
+:is(sbb-autocomplete,
+sbb-autocomplete-grid,
+sbb-datepicker,
+sbb-dialog,
+sbb-menu,
+sbb-navigation,
+sbb-navigation-section,
+sbb-overlay,
+sbb-popover,
+sbb-select,
+sbb-skiplink-list,
+sbb-toast,
+sbb-tooltip):not(:defined) {
+  display: none;
+}
+
+img {
+  aspect-ratio: var(--sbb-image-aspect-ratio);
+  object-fit: var(--sbb-image-object-fit);
+  object-position: var(--sbb-image-object-position);
+}
+
+.sbb-overlay-outlet {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
 }
+
 [sbb-badge] {
   --sbb-badge-position-offset: calc(var(--sbb-spacing-fixed-2x) * -1);
   position: relative;
@@ -2722,13 +2547,6 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
   --_sbb-sidebar-content-margin-inline-start: 0;
 }
 
-sbb-tab-nav-bar .sbb-tab-amount {
-  margin: 0;
-  color: var(--sbb-tab-label-amount-color);
-  font-weight: normal;
-  text-decoration: var(--sbb-tab-label-text-decoration);
-}
-
 :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
   --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
   --sbb-table-sticky-shadow-transition-duration: var(
@@ -2925,6 +2743,32 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
   text-align: right;
 }
 
+sbb-tab-nav-bar .sbb-tab-amount {
+  margin: 0;
+  color: var(--sbb-tab-label-amount-color);
+  font-weight: normal;
+  text-decoration: var(--sbb-tab-label-text-decoration);
+}
+
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
+  --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
+  --sbb-teaser-image-animation-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-4x)
+  );
+  --sbb-teaser-image-animation-easing: var(--sbb-animation-easing);
+}
+@media (any-hover: hover) {
+  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product):hover {
+    --sbb-teaser-image-brightness: var(--sbb-teaser-image-brightness-hover);
+  }
+}
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  will-change: filter, scale;
+  filter: brightness(var(--sbb-teaser-image-brightness, 1));
+  transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
+}
+
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;
   --sbb-image-aspect-ratio: 4 / 3;
@@ -3034,70 +2878,6 @@ sbb-toggle:has(:focus-visible) {
   outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
 }
 
-html {
-  font-family: var(--sbb-typo-font-family);
-  font-weight: normal;
-  line-height: var(--sbb-typo-line-height-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  font-size: var(--sbb-text-font-size);
-  color-scheme: light dark;
-  color: var(--sbb-font-color-default);
-  background-color: var(--sbb-background-color-1);
-}
-
-::placeholder {
-  color: var(--sbb-color-5);
-  -webkit-text-fill-color: var(--sbb-color-5);
-  opacity: 1;
-}
-
-:is(sbb-autocomplete,
-sbb-autocomplete-grid,
-sbb-datepicker,
-sbb-dialog,
-sbb-menu,
-sbb-navigation,
-sbb-navigation-section,
-sbb-overlay,
-sbb-popover,
-sbb-select,
-sbb-skiplink-list,
-sbb-toast,
-sbb-tooltip):not(:defined) {
-  display: none;
-}
-
-img {
-  aspect-ratio: var(--sbb-image-aspect-ratio);
-  object-fit: var(--sbb-image-object-fit);
-  object-position: var(--sbb-image-object-position);
-}
-
-:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
-  --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
-  --sbb-teaser-image-animation-duration: var(
-    --sbb-disable-animation-duration,
-    var(--sbb-animation-duration-4x)
-  );
-  --sbb-teaser-image-animation-easing: var(--sbb-animation-easing);
-}
-@media (any-hover: hover) {
-  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product):hover {
-    --sbb-teaser-image-brightness: var(--sbb-teaser-image-brightness-hover);
-  }
-}
-:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  will-change: filter, scale;
-  filter: brightness(var(--sbb-teaser-image-brightness, 1));
-  transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
-}
-
-.sbb-overlay-outlet {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-}
-
 .sbb-screen-reader-only {
   border: 0;
   clip-path: rect(0 0 0 0);
@@ -3126,6 +2906,7 @@ img {
 .sbb-disable-animation-locally {
   --sbb-disable-animation-duration: 0s;
 }
+
 .sbb-disable-animation-locally > * {
   --sbb-disable-animation-duration: initial;
 }
@@ -3153,11 +2934,13 @@ img {
   grid-auto-rows: auto;
   margin: 0;
 }
+
 .sbb-figure :is(img, sbb-image, .sbb-image):not(.sbb-figure-overlap-image) {
   grid-row: 1;
   grid-column: 1;
   width: 100%;
 }
+
 .sbb-figure :is(figcaption, .sbb-caption) {
   grid-row: 2;
   grid-column: 1;
@@ -3168,6 +2951,7 @@ img {
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size-xs);
 }
+
 .sbb-figure :is(.sbb-figure-overlap-start-start,
 .sbb-figure-overlap-start-end,
 .sbb-figure-overlap-end-start,
@@ -3182,18 +2966,22 @@ img {
   grid-row: 1;
   grid-column: 1;
 }
+
 .sbb-figure .sbb-figure-overlap-start-start {
   place-self: start start;
   justify-content: start;
 }
+
 .sbb-figure .sbb-figure-overlap-start-end {
   place-self: start end;
   justify-content: end;
 }
+
 .sbb-figure .sbb-figure-overlap-end-start {
   place-self: end start;
   justify-content: start;
 }
+
 .sbb-figure .sbb-figure-overlap-end-end {
   place-self: end end;
   justify-content: end;
@@ -3265,13 +3053,13 @@ img {
   margin-inline: auto;
   width: 100%;
 }
+
 @media (min-width: calc(90rem)) {
   .sbb-grid,
   .sbb-page-spacing {
     max-width: var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)));
   }
 }
-
 .sbb-grid-expanded,
 .sbb-page-spacing-expanded {
   padding-inline: var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs));
@@ -3294,35 +3082,43 @@ img {
   --sbb-list-vertical-gap: 0.75em;
   --sbb-list-padding-inline-start: 1.5em;
 }
+
 .sbb-list:where(ol, ul),
 .sbb-list:where(ol, ul) :is(ol, ul) {
   margin: 0;
   padding: 0;
   padding-inline-start: var(--sbb-list-padding-inline-start);
 }
+
 .sbb-list:where(ol, ul) > li + li,
 .sbb-list:where(ol, ul) :is(ol, ul) > li + li {
   margin-block-start: var(--sbb-list-vertical-gap);
 }
+
 .sbb-list:where(ol, ul) > li p,
 .sbb-list:where(ol, ul) :is(ol, ul) > li p {
   margin-block: 0;
 }
+
 .sbb-list:where(ol, ul) > li > * + p,
 .sbb-list:where(ol, ul) :is(ol, ul) > li > * + p {
   margin-block-start: var(--sbb-spacing-responsive-xxxs);
 }
+
 .sbb-list:where(ol, ul) :is(ul, ol), .sbb-step-list .sbb-list:where(ol, ul) {
   margin-block-start: var(--sbb-list-vertical-gap);
 }
+
 .sbb-list:where(ul),
 .sbb-list:where(ul) ul {
   list-style-type: none;
 }
+
 .sbb-list:where(ul) > li,
 .sbb-list:where(ul) ul > li {
   position: relative;
 }
+
 .sbb-list:where(ul) > li::before,
 .sbb-list:where(ul) ul > li::before {
   content: "•";
@@ -3336,6 +3132,7 @@ img {
   inset-inline-start: calc(-1 * (0.5 * var(--sbb-list-padding-inline-start) + 0.5em));
   transform: scale(1.3);
 }
+
 .sbb-list:where(dl) {
   line-height: var(--sbb-typo-line-height-text);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
@@ -3346,6 +3143,7 @@ img {
   grid-template-columns: auto minmax(20%, 1fr);
   gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-fixed-2x);
 }
+
 .sbb-list:where(dl) :is(dt, dd) {
   margin: 0;
   padding: 0;
@@ -3372,12 +3170,15 @@ img {
   counter-reset: steps;
   color: var(--sbb-step-list-color);
 }
+
 .sbb-step-list:where(.sbb-text-s) {
   --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
 }
+
 .sbb-step-list:where(.sbb-text-m, .sbb-text-l, .sbb-text-xl) {
   --sbb-step-list-padding-block: var(--sbb-spacing-fixed-5x);
 }
+
 @media (min-width: calc(64rem)) {
   .sbb-step-list:where(.sbb-text-xl) {
     --sbb-step-list-dimensions: 2.5625rem;
@@ -3391,6 +3192,7 @@ img {
   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));
 }
+
 .sbb-step-list > li::before {
   content: counter(steps);
   position: absolute;
@@ -3410,19 +3212,24 @@ img {
   font-size: var(--sbb-text-font-size-xxs);
   font-weight: bold;
 }
+
 .sbb-step-list > li + li {
   margin-block-start: var(--sbb-step-list-vertical-gap);
 }
+
 .sbb-step-list > li p {
   margin-block: 0;
 }
+
 .sbb-step-list > li > * + p {
   margin-block-start: var(--sbb-spacing-responsive-xxxs);
 }
+
 .sbb-step-list > li:first-of-type {
   border-start-start-radius: var(--sbb-step-list-border-radius);
   border-start-end-radius: var(--sbb-step-list-border-radius);
 }
+
 .sbb-step-list > li:last-of-type {
   border-end-start-radius: var(--sbb-step-list-border-radius);
   border-end-end-radius: var(--sbb-step-list-border-radius);
@@ -3445,20 +3252,25 @@ img {
   margin: 0;
   padding: 0;
 }
+
 .sbb-icon-list > li {
   position: relative;
   padding-inline: calc(var(--sbb-icon-list-dimensions) + var(--sbb-icon-list-to-text-gap)) 0;
   min-height: var(--sbb-icon-list-dimensions);
 }
+
 .sbb-icon-list > li + li {
   margin-block-start: var(--sbb-icon-list-vertical-gap);
 }
+
 .sbb-icon-list > li p {
   margin-block: 0;
 }
+
 .sbb-icon-list > li > * + p {
   margin-block-start: var(--sbb-spacing-responsive-xxxs);
 }
+
 .sbb-icon-list > li::before {
   content: "";
   position: absolute;
@@ -3472,12 +3284,12 @@ img {
   mask-position: center;
   mask-size: 100%;
 }
+
 @media (forced-colors: active) {
   .sbb-icon-list > li::before {
     background-color: CanvasText;
   }
 }
-
 :is(.sbb-scrollbar,
 .sbb-scrollbar-negative,
 .sbb-scrollbar-thick,
@@ -3501,6 +3313,7 @@ img {
     color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
   );
 }
+
 :is(.sbb-scrollbar,
 .sbb-scrollbar-negative,
 .sbb-scrollbar-thick,
@@ -3513,6 +3326,7 @@ img {
   height: var(--sbb-scrollbar-width);
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
+
 :is(.sbb-scrollbar,
 .sbb-scrollbar-negative,
 .sbb-scrollbar-thick,
@@ -3523,6 +3337,7 @@ img {
 .sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-corner {
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
+
 :is(.sbb-scrollbar,
 .sbb-scrollbar-negative,
 .sbb-scrollbar-thick,
@@ -3536,6 +3351,7 @@ img {
   border-radius: var(--sbb-border-radius-4x);
   background-clip: padding-box;
 }
+
 :is(.sbb-scrollbar,
 .sbb-scrollbar-negative,
 .sbb-scrollbar-thick,
@@ -3547,6 +3363,7 @@ img {
   background-color: var(--sbb-scrollbar-color-hover, currentcolor);
   border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
 }
+
 :is(.sbb-scrollbar,
 .sbb-scrollbar-negative,
 .sbb-scrollbar-thick,
@@ -3564,6 +3381,7 @@ img {
 .sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-corner {
   display: none;
 }
+
 @supports not selector(::-webkit-scrollbar) {
   :is(.sbb-scrollbar,
   .sbb-scrollbar-negative,
@@ -3577,7 +3395,6 @@ img {
     scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
   }
 }
-
 :is(.sbb-scrollbar-negative,
 .sbb-scrollbar-thick-negative,
 .sbb-scrollbar-negative-track-visible,
@@ -3603,6 +3420,14 @@ img {
   --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
 }
 
+sub,
+sup {
+  font-size: 60%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
 sub {
   bottom: -0.36em;
 }