npm - @sbb-esta/lyne-elements - Versions diffs - 5.0.0-next.2 → 5.0.0 - Mend

@sbb-esta/lyne-elements 5.0.0-next.2 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1476) hide show

package/{core.css → lean-theme.css} RENAMED Viewed

@@ -1,222 +1,134 @@
+@charset "UTF-8";
 /**
  * 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;
-  }
+@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;
 }
-@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;
-  }
+@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;
 }
-@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;
-  }
+@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;
 }
-slot[name=error]::slotted(*) {
-  flex-basis: 100%;
+html {
+  text-size-adjust: 100%;
+  tab-size: 4;
 }
-::slotted(:is(sbb-checkbox-panel, sbb-radio-button-panel)) {
-  flex: var(--sbb-selection-group-elements-flex);
+body {
+  margin: 0;
 }
-::slotted(:is(sbb-checkbox, sbb-checkbox-panel, sbb-radio-button-panel)) {
-  width: var(--sbb-selection-group-elements-width);
+hr {
+  height: 0;
+  color: inherit;
 }
-: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)
-  );
+abbr[title] {
+  text-decoration: underline dotted;
 }
-: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);
+b,
+strong {
+  font-weight: bolder;
 }
-: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);
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 1em;
 }
-: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);
+small {
+  font-size: 80%;
 }
-: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;
-  }
+table {
+  text-indent: 0;
+  border-color: inherit;
 }
-: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);
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
   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);
+button,
+select {
+  text-transform: none;
 }
-: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;
+button,
+:is(button, input):where([type=button], [type=reset], [type=submit]) {
+  appearance: auto;
 }
-@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;
-  }
+:-moz-ui-invalid {
+  box-shadow: none;
 }
-: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;
+legend {
+  padding: 0;
 }
-@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;
-  }
+progress {
+  vertical-align: baseline;
 }
-@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;
-  }
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
 }
-:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),
-:host(sbb-tab-label:active) {
-  --sbb-tab-label-color: var(--sbb-color-3);
+[type=search] {
+  appearance: textfield;
+  outline-offset: -2px;
 }
-@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;
-  }
+::-webkit-search-decoration {
+  appearance: none;
 }
-: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);
+::-webkit-file-upload-button {
+  appearance: auto;
+  font: inherit;
 }
-*,
-::before,
-::after {
-  box-sizing: border-box;
+summary {
+  display: list-item;
 }
 :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;
@@ -1136,18 +1048,18 @@ slot[name=error]::slotted(*) {
   );
   --sbb-focus-outline-width: var(--sbb-border-width-1x);
   /* Title */
-  --sbb-heading-font-size-1: var(--sbb-typo-scale-2-5x);
-  --sbb-heading-font-size-2: var(--sbb-typo-scale-2x);
-  --sbb-heading-font-size-3: var(--sbb-typo-scale-1-5x);
-  --sbb-heading-font-size-4: var(--sbb-typo-scale-1-25x);
-  --sbb-heading-font-size-5: var(--sbb-typo-scale-1-125x);
-  --sbb-heading-font-size-6: var(--sbb-typo-scale-0-875x);
-  --sbb-heading-margin-block-1: var(--sbb-spacing-responsive-l) var(--sbb-spacing-responsive-s);
-  --sbb-heading-margin-block-2: var(--sbb-spacing-responsive-m) var(--sbb-spacing-responsive-xxxs);
-  --sbb-heading-margin-block-3: var(--sbb-spacing-responsive-m) var(--sbb-spacing-responsive-xxxs);
-  --sbb-heading-margin-block-4: var(--sbb-spacing-responsive-m) var(--sbb-spacing-fixed-3x);
-  --sbb-heading-margin-block-5: var(--sbb-spacing-responsive-m) var(--sbb-spacing-fixed-2x);
-  --sbb-heading-margin-block-6: var(--sbb-spacing-responsive-m) var(--sbb-spacing-fixed-1x);
+  --sbb-heading-font-size-1: var(--sbb-typo-scale-2x);
+  --sbb-heading-font-size-2: var(--sbb-typo-scale-1-5x);
+  --sbb-heading-font-size-3: var(--sbb-typo-scale-1-25x);
+  --sbb-heading-font-size-4: var(--sbb-typo-scale-1-125x);
+  --sbb-heading-font-size-5: var(--sbb-typo-scale-0-875x);
+  --sbb-heading-font-size-6: var(--sbb-typo-scale-0-75x);
+  --sbb-heading-margin-block-1: var(--sbb-spacing-responsive-s) var(--sbb-spacing-fixed-3x);
+  --sbb-heading-margin-block-2: var(--sbb-spacing-responsive-s) var(--sbb-spacing-fixed-3x);
+  --sbb-heading-margin-block-3: var(--sbb-spacing-responsive-s) var(--sbb-spacing-responsive-xxxs);
+  --sbb-heading-margin-block-4: var(--sbb-spacing-responsive-s) var(--sbb-spacing-fixed-2x);
+  --sbb-heading-margin-block-5: var(--sbb-spacing-responsive-s) var(--sbb-spacing-fixed-1x);
+  --sbb-heading-margin-block-6: var(--sbb-spacing-responsive-s) 0;
   /* Text */
   --sbb-text-font-size-xl: var(--sbb-typo-scale-1-25x);
   --sbb-text-font-size-l: var(--sbb-typo-scale-1-125x);
@@ -1175,6 +1087,9 @@ 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-action-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
+  --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);
@@ -1185,10 +1100,8 @@ slot[name=error]::slotted(*) {
   --sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
   --sbb-alert-title-margin-block: 0;
   --sbb-alert-font-size: var(--sbb-text-font-size-s);
-  --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
-  --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);
-  --sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);
-  --sbb-alert-group-border-radius: var(--sbb-border-radius-4x);
+  --sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
+  --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs);
   --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);
@@ -1223,18 +1136,18 @@ slot[name=error]::slotted(*) {
     var(--sbb-color-granite),
     var(--sbb-color-aluminium)
   );
-  --sbb-button-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-button-gap: var(--sbb-spacing-fixed-1x);
   --sbb-button-loading-border-width: var(--sbb-border-width-3x);
   --sbb-button-loading-delay: 300ms;
   --sbb-button-min-height-size-l: var(--sbb-size-element-m);
   --sbb-button-min-height-size-m: var(--sbb-size-element-s);
   --sbb-button-min-height-size-s: var(--sbb-size-element-xs);
-  --sbb-button-min-height: var(--sbb-button-min-height-size-m);
+  --sbb-button-min-height: var(--sbb-button-min-height-size-s);
   --sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);
   --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-8x);
   --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-5x);
   --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-4x);
-  --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-m);
+  --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-s);
   --sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);
   --sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);
   --sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);
@@ -1258,65 +1171,55 @@ slot[name=error]::slotted(*) {
   --sbb-mini-button-group-border-width: var(--sbb-border-width-2x);
   --sbb-mini-button-group-border-radius: var(--sbb-border-radius-infinity);
   --sbb-mini-button-group-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-mini-button-group-min-height: var(--sbb-size-element-s);
-  --sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-3x);
   --sbb-mini-button-group-divider-height: var(--sbb-size-icon-ui-small);
   --sbb-mini-button-group-divider-padding: var(--sbb-spacing-fixed-1x);
-  --sbb-calendar-cell-background-color: transparent;
+  --sbb-mini-button-group-min-height-s: var(--sbb-size-element-xs);
+  --sbb-mini-button-group-min-height-m: var(--sbb-size-element-s);
+  --sbb-mini-button-group-min-height-l: var(--sbb-size-element-m);
+  --sbb-mini-button-group-min-height-xl: var(--sbb-size-element-l);
+  --sbb-mini-button-group-min-height: var(--sbb-mini-button-group-min-height-s);
+  --sbb-mini-button-group-padding-inline-s: var(--sbb-spacing-fixed-2x);
+  --sbb-mini-button-group-padding-inline-m: var(--sbb-spacing-fixed-3x);
+  --sbb-mini-button-group-padding-inline-l: var(--sbb-spacing-fixed-3x);
+  --sbb-mini-button-group-padding-inline-xl: var(--sbb-spacing-fixed-4x);
+  --sbb-mini-button-group-padding-inline: var(--sbb-mini-button-group-padding-inline-s);
   --sbb-calendar-cell-background-color-hover: var(--sbb-background-color-3);
   --sbb-calendar-cell-background-color-active: var(--sbb-background-color-4);
   --sbb-calendar-cell-padding: 0.125rem;
   --sbb-calendar-cell-border-width: var(--sbb-border-width-2x);
+  --sbb-calendar-cell-border-color-selected: var(--sbb-border-color-2);
   --sbb-calendar-cell-disabled-height: 0.09375rem;
   --sbb-calendar-cell-disabled-width: 1.59375rem;
   --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-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;
+  --sbb-calendar-cell-color: var(--sbb-color-2);
+  --sbb-calendar-cell-cursor: var(--sbb-cursor-pointer);
+  --sbb-calendar-cell-font-size: var(--sbb-text-font-size-s);
+  --sbb-calendar-cell-margin: 0.0625rem;
+  --sbb-calendar-cell-size: 2.75rem;
+  --sbb-calendar-cell-year-month-width: 4.4375rem;
+  --sbb-calendar-cell-year-month-height: 2.375rem;
+  --sbb-calendar-control-gap: var(--sbb-spacing-fixed-1x);
   --sbb-calendar-control-view-change-color: var(--sbb-color-3);
-  --sbb-calendar-control-view-change-background: var(--sbb-background-color-1);
-  --sbb-calendar-control-view-change-padding-inline: var(--sbb-spacing-fixed-5x)
-    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-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-size: 2.625rem;
+  --sbb-calendar-day-width: var(--sbb-calendar-day-size);
+  --sbb-calendar-day-height: 2.875rem;
+  --sbb-calendar-day-justify-content: start;
+  --sbb-calendar-day-value-height: var(--sbb-spacing-fixed-6x);
   --sbb-calendar-day-extra-display: block;
-  --sbb-calendar-day-extra-height: var(--sbb-spacing-fixed-4x);
-  --sbb-calendar-day-crossed-out-top: 33%;
-  --sbb-calendar-day-crossed-out-translate: translate(-50%, -33%) rotate(-45deg);
+  --sbb-calendar-day-extra-height: 1.125rem;
   --sbb-card-background-color: var(--sbb-background-color-1);
   --sbb-card-border-color: transparent;
   --sbb-card-border-radius: var(--sbb-border-radius-4x);
   --sbb-card-animation-easing: var(--sbb-animation-easing);
   --sbb-card-border-style: solid;
-  --sbb-card-padding-inline-default: var(--sbb-spacing-responsive-s);
-  --sbb-card-padding-block-default: var(--sbb-spacing-responsive-xxxs);
-  --sbb-card-with-badge-padding-block-default: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);
-}
-:root.sbb-lean {
-  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
-  --sbb-card-padding-block: var(--sbb-spacing-fixed-3x);
-  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);
-}
-:root {
+  --sbb-card-padding-inline-default: var(--sbb-spacing-responsive-xxs);
+  --sbb-card-padding-block-default: var(--sbb-spacing-fixed-3x);
+  --sbb-card-with-badge-padding-block-default: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);
   --sbb-card-badge-gap: var(--sbb-spacing-fixed-2x);
   --sbb-card-badge-color: var(--sbb-color-2-inverted);
   --sbb-card-badge-background-color: var(--sbb-background-color-3-inverted);
@@ -1329,12 +1232,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);
@@ -1346,55 +1255,40 @@ slot[name=error]::slotted(*) {
   --sbb-chip-font-size: var(--sbb-text-font-size-xxs);
   --sbb-chip-height: 1.5rem;
   --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
-  --_sbb-chip-group-margin-block-start-default: 0.125rem;
-  --_sbb-chip-group-margin-block-start-default-large: 0.21875rem;
   --sbb-chip-group-gap: var(--sbb-spacing-fixed-1x);
   --sbb-chip-group-input-min-width: 9.375rem;
-  --sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0;
-  --sbb-chip-group-margin-block-no-label-not-empty: 0.1875rem 0.6875rem;
-  --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default) var(--_sbb-chip-group-margin-block-start-default-large);
-  --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-m) var(--sbb-selection-panel-input-padding-inline-m);
-  --sbb-selection-panel-checkbox-dimension: var(--sbb-checkbox-dimension-m);
-  --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-m);
-  --sbb-checkbox-font-size: var(--sbb-text-font-size-m);
-  --sbb-checkbox-label-color: var(--sbb-color-color-3);
-  --sbb-checkbox-cursor: var(--sbb-cursor-pointer);
+  --_sbb-chip-group-margin-block-start-default: 0.125rem;
+  --_sbb-chip-group-margin-block-start-default-large: 0.21875rem;
+  --_sbb-chip-group-margin-block-base-lm: var(--_sbb-chip-group-margin-block-start-default) 0;
+  --_sbb-chip-group-margin-block-with-label-s: 0.375rem 0.3125rem;
+  --_sbb-chip-group-margin-block-without-label-s: 0 0.4375rem;
+  --_sbb-chip-group-margin-block-without-label-m: 0.1875rem
+    0.6875rem;
+  --_sbb-chip-group-margin-block-without-label-l: var(--_sbb-chip-group-margin-block-start-default)
+    1rem;
+  --_sbb-chip-group-margin-block-with-label-l: var(--_sbb-chip-group-margin-block-start-default)
+    0.46875rem;
+  --_sbb-chip-group-margin-block-with-label-m: var(--_sbb-chip-group-margin-block-start-default)
+    var(--_sbb-chip-group-margin-block-start-default-large);
+  --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-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);
   --sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);
-  --sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);
+  --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);
@@ -1419,41 +1313,38 @@ 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);
   --sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
   --sbb-expansion-panel-title-gap-s: var(--sbb-spacing-fixed-2x);
   --sbb-expansion-panel-title-gap-l: var(--sbb-spacing-fixed-4x);
-  --sbb-expansion-panel-title-gap-default: var(--sbb-expansion-panel-title-gap-l);
+  --sbb-expansion-panel-title-gap-default: var(--sbb-expansion-panel-title-gap-s);
   --sbb-expansion-panel-content-padding-block-end: var(--sbb-spacing-responsive-s);
   --sbb-expansion-panel-content-padding-inline-s: var(--sbb-spacing-fixed-5x);
   --sbb-expansion-panel-content-padding-inline-l: var(--sbb-spacing-fixed-6x);
-  --sbb-expansion-panel-content-padding-inline-default: var(--sbb-expansion-panel-content-padding-inline-l);
+  --sbb-expansion-panel-content-padding-inline-default: var(--sbb-expansion-panel-content-padding-inline-s);
   --sbb-expansion-panel-header-cursor: var(--sbb-cursor-pointer);
   --sbb-expansion-panel-header-font-size: var(--sbb-text-font-size-l);
   --sbb-expansion-panel-header-text-color: var(--sbb-color-2);
   --sbb-expansion-panel-header-justify-content: space-between;
   --sbb-expansion-panel-header-gap-s: var(--sbb-spacing-fixed-2x);
   --sbb-expansion-panel-header-gap-l: var(--sbb-spacing-fixed-6x);
-  --sbb-expansion-panel-header-gap-default: var(--sbb-expansion-panel-header-gap-l);
+  --sbb-expansion-panel-header-gap-default: var(--sbb-expansion-panel-header-gap-s);
   --sbb-expansion-panel-header-padding-block-s: var(--sbb-spacing-fixed-3x);
   --sbb-expansion-panel-header-padding-block-l: var(--sbb-spacing-responsive-xs);
-  --sbb-expansion-panel-header-padding-block-default: var(--sbb-expansion-panel-header-padding-block-l);
+  --sbb-expansion-panel-header-padding-block-default: var(--sbb-expansion-panel-header-padding-block-s);
   --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
   --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
-  --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
+  --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-s);
   --sbb-file-selector-color: var(--sbb-color-2);
   --sbb-file-selector-subtitle-color: var(--sbb-color-granite);
   --sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   --sbb-file-selector-background-color: var(--sbb-background-color-1);
   --sbb-file-selector-border-color: var(--sbb-border-color-4-inverted);
   --sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);
-  --_sbb-file-selector-dropzone-icon-medium-display: block;
-  --_sbb-file-selector-dropzone-icon-small-display: none;
+  --_sbb-file-selector-dropzone-icon-medium-display: none;
+  --_sbb-file-selector-dropzone-icon-small-display: block;
   --sbb-flip-card-background-color: var(--sbb-background-color-4);
   --sbb-flip-card-border: var(--sbb-border-width-2x);
   --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
@@ -1470,6 +1361,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;
@@ -1484,22 +1378,22 @@ slot[name=error]::slotted(*) {
   --sbb-form-field-arrow-color: var(--sbb-color-3);
   --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
   --sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
-  --sbb-form-field-min-height: var(--sbb-size-element-m);
-  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);
-  --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);
-  --sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);
-  --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
-  --_sbb-form-field-floating-label-transform: 0.53125rem;
-  --_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
-  --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: var(--sbb-spacing-fixed-14x);
+  --sbb-form-field-min-height: var(--sbb-size-element-xs);
+  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-form-field-input-text-size: var(--sbb-text-font-size-s);
+  --sbb-form-field-label-text-size: var(--sbb-text-font-size-xxs);
+  --_sbb-form-field-label-to-input-overlapping: 0.625rem;
+  --_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-action-color: var(--sbb-color-1);
   --sbb-header-action-background-color: transparent;
-  --sbb-header-action-min-height: var(--sbb-size-element-s);
-  --sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x);
+  --sbb-header-action-min-height-s: var(--sbb-size-element-xs);
+  --sbb-header-action-min-height-m: var(--sbb-size-element-s);
+  --sbb-header-action-min-height: var(--sbb-header-action-min-height-s);
+  --sbb-header-action-padding-inline-s: var(--sbb-spacing-fixed-4x);
+  --sbb-header-action-padding-inline-m: var(--sbb-spacing-fixed-5x);
+  --sbb-header-action-padding-inline: var(--sbb-header-action-padding-inline-s);
   --sbb-header-action-transition-easing: var(--sbb-animation-easing);
   --sbb-header-action-border-color: transparent;
   --sbb-header-action-gap: var(--sbb-spacing-fixed-2x);
@@ -1507,6 +1401,17 @@ 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-padding-block-start: env(safe-area-inset-top, 0);
+  --sbb-header-vertical-spacing: calc(
+    var(--sbb-header-height) + var(--sbb-header-padding-block-start)
+  );
+  --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;
@@ -1523,7 +1428,7 @@ slot[name=error]::slotted(*) {
   --sbb-lead-container-image-border-radius: 0;
   --sbb-block-link-gap: var(--sbb-spacing-fixed-1x);
   --sbb-block-link-icon-size: var(--sbb-size-icon-ui-small);
-  --sbb-block-link-font-size: var(--sbb-text-font-size-s);
+  --sbb-block-link-font-size: var(--sbb-text-font-size-xs);
   --sbb-loading-indicator-color: var(--sbb-color-primary);
   --sbb-loading-indicator-window-element-rotation: 55.24deg;
   --sbb-loading-indicator-window-height: 1.125rem;
@@ -1544,15 +1449,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);
@@ -1561,12 +1457,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-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);
@@ -1584,16 +1505,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;
@@ -1615,28 +1530,24 @@ 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);
   --sbb-notification-icon-align-self: center;
   --sbb-notification-margin: 0;
   --sbb-notification-timing-function: ease-in;
-  --sbb-notification-font-size: var(--sbb-text-font-size-s);
-  --sbb-notification-padding-block: var(--sbb-spacing-responsive-xxs);
-  --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);
+  --sbb-notification-font-size: var(--sbb-text-font-size-xs);
+  --sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs);
   --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-xs);
+  --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);
@@ -1646,27 +1557,30 @@ slot[name=error]::slotted(*) {
   --sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
   --sbb-option-disabled-background-color: var(--sbb-background-color-3);
   --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
-  --sbb-option-min-height: var(--sbb-size-element-s);
+  --sbb-option-min-height: var(--sbb-size-element-xxs);
   --sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
   --sbb-option-justify-content: start;
   --sbb-option-cursor: var(--sbb-cursor-pointer);
   --sbb-option-border-radius: var(--sbb-border-radius-4x);
   --sbb-option-icon-color: var(--sbb-color-metal);
   --sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-option-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
   --sbb-option-focus-outline-color: transparent;
-  --sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);
+  --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
   --sbb-option-font-size: var(--sbb-text-font-size-s);
   --sbb-option-hint-color: var(--sbb-color-metal);
   --sbb-option-hint-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-option-hint-column-gap: var(--sbb-spacing-responsive-xxxs);
-  --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-2x);
+  --sbb-option-hint-padding-block-end: 0 var(--sbb-spacing-fixed-1x);
   --sbb-option-hint-padding-inline: var(--sbb-spacing-responsive-xxxs);
   --sbb-option-hint-font-size: var(--sbb-text-font-size-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-2x);
-  --sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);
+  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
+  --sbb-options-panel-animation-timing-function: ease;
+  --sbb-options-panel-background-color: var(--sbb-background-color-2);
+  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
+  --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-overlay-background-color: var(--sbb-background-color-3);
   --sbb-overlay-display: none;
   --sbb-overlay-height: 100%;
@@ -1674,29 +1588,42 @@ slot[name=error]::slotted(*) {
   --sbb-overlay-animation-easing: ease;
   --sbb-overlay-pointer-events: none;
   --sbb-overlay-container-display: none;
-  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
-  --sbb-options-panel-animation-timing-function: ease;
-  --sbb-options-panel-background-color: var(--sbb-background-color-2);
-  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
-  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
-  --sbb-paginator-height: var(--sbb-size-element-m);
-  --sbb-paginator-page-color: var(--sbb-color-metal);
-  --sbb-paginator-page-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-paginator-color: var(--sbb-color-metal);
+  --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-paginator-height: var(--sbb-size-element-xs);
   --sbb-paginator-page-border-width: 0;
   --sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
   --sbb-paginator-animation-easing: var(--sbb-animation-easing);
   --sbb-paginator-font-size: var(--sbb-text-font-size-s);
-  --sbb-compact-paginator-height: var(--sbb-size-element-m);
-  --sbb-compact-paginator-color: var(--sbb-color-metal);
-  --sbb-compact-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --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-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);
-  --sbb-popover-padding: var(--sbb-spacing-fixed-4x);
-  --sbb-popover-background: var(--sbb-background-color-2);
+  --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);
+  --sbb-popover-padding: var(--sbb-spacing-fixed-4x);
+  --sbb-popover-background: var(--sbb-background-color-2);
   --sbb-popover-animation-easing: ease-out;
   --sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
   --sbb-radio-button-label-color: var(--sbb-color-3);
@@ -1708,18 +1635,18 @@ slot[name=error]::slotted(*) {
   --sbb-radio-button-dimension-xs: 1.25rem;
   --sbb-radio-button-dimension-s: var(--sbb-size-icon-ui-small);
   --sbb-radio-button-dimension-m: var(--sbb-size-icon-ui-small);
-  --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-m);
+  --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-m);
-  --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-radio-button-font-size: var(--sbb-text-font-size-xs);
+  --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);
-  --sbb-selection-action-panel-action-margin-inline: var(--sbb-selection-action-panel-action-margin-inline-m);
+  --sbb-selection-action-panel-action-margin-inline: var(--sbb-selection-action-panel-action-margin-inline-xs);
   --sbb-selection-action-panel-background: var(--sbb-selection-panel-background-default);
   --sbb-selection-action-panel-border-color: var(--sbb-selection-panel-border-color-default);
   --sbb-selection-action-panel-border-width: var(--sbb-selection-panel-border-width-default);
@@ -1731,7 +1658,12 @@ slot[name=error]::slotted(*) {
   --sbb-selection-expansion-panel-content-padding-block-end: var(
     --sbb-selection-panel-input-padding-block-m
   );
-  --sbb-selection-expansion-panel-content-padding-inline: var(--sbb-selection-panel-input-padding-inline-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);
@@ -1742,11 +1674,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;
@@ -1774,37 +1701,51 @@ slot[name=error]::slotted(*) {
   --sbb-status-title-color: var(--sbb-color-granite);
   --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   --sbb-step-label-color: var(--sbb-color-4);
-  --sbb-step-label-font-size: var(--sbb-text-font-size-l);
-  --sbb-step-label-prefix-size: var(--sbb-size-element-xxs);
   --sbb-step-label-prefix-border-style: solid;
   --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
   --sbb-step-label-prefix-background-color: var(--sbb-background-color-1);
-  --sbb-step-label-gap: var(--sbb-spacing-fixed-4x);
-  --sbb-step-label-inset-block-start-size-m: calc(
-    var(--sbb-text-font-size-l) * (var(--sbb-typo-line-height-text) / 2) +
-      (var(--sbb-border-width-1x) / 2)
-  );
-  --sbb-step-label-inset-block-start-size-s: calc(
-    var(--sbb-text-font-size-m) * (var(--sbb-typo-line-height-text) / 2) +
-      (var(--sbb-border-width-1x) / 2)
-  );
-  --sbb-step-label-inset-block-start: var(--sbb-step-label-inset-block-start-size-m);
+  --sbb-step-label-number-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-step-label-font-size-s: var(--sbb-text-font-size-m);
+  --sbb-step-label-font-size-m: var(--sbb-text-font-size-l);
+  --sbb-step-label-font-size: var(--sbb-step-label-font-size-s);
+  --sbb-step-label-gap-s: var(--sbb-spacing-fixed-3x);
+  --sbb-step-label-gap-m: var(--sbb-spacing-fixed-4x);
+  --sbb-step-label-gap: var(--sbb-step-label-gap-s);
+  --sbb-step-label-prefix-size-s: var(--sbb-size-element-xxxs);
+  --sbb-step-label-prefix-size-m: var(--sbb-size-element-xxs);
+  --sbb-step-label-prefix-size: var(--sbb-step-label-prefix-size-s);
   --sbb-stepper-orientation: row;
   --sbb-stepper-border-width: var(--sbb-border-width-1x);
   --sbb-stepper-marker-width: var(--sbb-border-width-3x);
   --sbb-stepper-marker-color: var(--sbb-color-3);
+  --sbb-table-border-color: var(--sbb-color-cloud);
+  --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);
+  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
   --sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
   --sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
   --sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
-  --sbb-tab-group-content-gap-default: var(--sbb-tab-group-content-gap-size-l);
-  --sbb-tab-label-height: var(--sbb-size-element-m);
-  --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-tab-group-content-gap-default: var(--sbb-tab-group-content-gap-size-s);
+  --sbb-tab-label-height: var(--sbb-size-element-xs);
+  --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs);
   --sbb-tab-label-color: var(--sbb-color-granite);
   --sbb-tab-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));
   --sbb-tab-label-marker-thickness: var(--sbb-border-width-3x);
   --sbb-tab-label-text-decoration: none;
   --sbb-tab-label-animation-easing: var(--sbb-animation-easing);
-  --sbb-tab-label-font-size: var(--sbb-text-font-size-m);
+  --sbb-tab-label-font-size: var(--sbb-text-font-size-s);
   --sbb-tab-label-font-weight: bold;
   --sbb-tab-label-gap: var(--sbb-spacing-fixed-2x);
   --sbb-tab-label-outline-border-radius: var(--sbb-border-radius-2x);
@@ -1812,59 +1753,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);
@@ -1875,7 +1763,12 @@ slot[name=error]::slotted(*) {
   --sbb-tag-text-color: var(--sbb-color-2);
   --sbb-tag-amount-color: var(--sbb-color-metal);
   --sbb-tag-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
-  --sbb-tag-height: var(--sbb-size-element-xs);
+  --sbb-tag-height-s: var(--sbb-size-element-xxxs);
+  --sbb-tag-height-m: var(--sbb-size-element-xs);
+  --sbb-tag-height: var(--sbb-tag-height-s);
+  --sbb-tag-padding-inline-s: var(--sbb-spacing-fixed-3x);
+  --sbb-tag-padding-inline-m: var(--sbb-spacing-fixed-5x);
+  --sbb-tag-padding-inline: var(--sbb-tag-padding-inline-s);
   --sbb-teaser-scale-hover: 1.02;
   --sbb-teaser-description-color: var(--sbb-color-granite);
   --sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
@@ -1920,6 +1813,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
@@ -1936,27 +1830,25 @@ 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-font-size: var(--sbb-heading-font-size-1);
   --sbb-title-color: var(--sbb-color-3);
-  --sbb-title-margin-block: var(--sbb-heading-margin-block-1);
-  --sbb-toggle-check-font-size: var(--sbb-text-font-size-s);
-  --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-toggle-padding-inline: var(--sbb-spacing-responsive-xs);
-  --sbb-toggle-height: var(--sbb-size-element-m);
+  --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);
+  --sbb-toggle-padding-inline-s: var(--sbb-spacing-responsive-xxxs);
+  --sbb-toggle-padding-inline-m: var(--sbb-spacing-responsive-xs);
+  --sbb-toggle-padding-inline: var(--sbb-toggle-padding-inline-s);
   --sbb-toggle-background-color: var(--sbb-background-color-4);
   --sbb-toggle-background-inset: 0.125rem;
   --sbb-toggle-border-radius: var(--sbb-border-radius-infinity);
@@ -1971,6 +1863,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);
@@ -1985,19 +1892,60 @@ 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-visual-checkbox-dimension: var(--sbb-checkbox-dimension-m);
+  --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);
   --sbb-visual-checkbox-selection-color-disabled: var(--sbb-color-2);
@@ -2023,29 +1971,23 @@ slot[name=error]::slotted(*) {
     --sbb-alert-forced-color-border-radius: var(--sbb-alert-border-radius);
     --sbb-breadcrumb-color: ButtonText;
     --sbb-breadcrumb-color-active: Highlight;
+    --sbb-calendar-cell-background-color-hover: transparent;
+    --sbb-calendar-cell-background-color-active: transparent;
     --sbb-card-border-color: CanvasText;
     --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;
@@ -2061,29 +2003,28 @@ 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 */
-    --sbb-heading-font-size-1: var(--sbb-typo-scale-3x);
+    --sbb-heading-font-size-1: var(--sbb-typo-scale-2x);
     /* Spacing */
     --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-small);
     --sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-small);
@@ -2099,18 +2040,18 @@ slot[name=error]::slotted(*) {
     --sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
     --sbb-footer-clock-width: 7rem;
     --sbb-notification-icon-align-self: flex-start;
-    --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);
+    --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);
   }
 }
 @media (min-width: calc(64rem)) {
   :root {
     /* Title */
-    --sbb-heading-font-size-1: var(--sbb-typo-scale-3-5x);
-    --sbb-heading-font-size-2: var(--sbb-typo-scale-2-5x);
-    --sbb-heading-font-size-3: var(--sbb-typo-scale-2x);
-    --sbb-heading-font-size-4: var(--sbb-typo-scale-1-5x);
-    --sbb-heading-font-size-5: var(--sbb-typo-scale-1-25x);
-    --sbb-heading-font-size-6: var(--sbb-typo-scale-default);
+    --sbb-heading-font-size-1: var(--sbb-typo-scale-2-5x);
+    --sbb-heading-font-size-2: var(--sbb-typo-scale-2x);
+    --sbb-heading-font-size-3: var(--sbb-typo-scale-1-5x);
+    --sbb-heading-font-size-4: var(--sbb-typo-scale-1-25x);
+    --sbb-heading-font-size-5: var(--sbb-typo-scale-default);
+    --sbb-heading-font-size-6: var(--sbb-typo-scale-0-875x);
     /* Text */
     --sbb-text-font-size-xl: var(--sbb-typo-scale-1-5x);
     --sbb-text-font-size-l: var(--sbb-typo-scale-1-25x);
@@ -2142,14 +2083,32 @@ slot[name=error]::slotted(*) {
     --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-10x);
     --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-8x);
     --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-5x);
-    --sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0;
-    --sbb-chip-group-margin-block-no-label-not-empty: 0.1875rem 0.875rem;
-    --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large);
+    --_sbb-chip-group-margin-block-base-lm: var(--_sbb-chip-group-margin-block-start-default-large) 0;
+    --_sbb-chip-group-margin-block-with-label-s: 0.3125rem 0.1875rem;
+    --_sbb-chip-group-margin-block-without-label-s: 0 0.3125rem;
+    --_sbb-chip-group-margin-block-without-label-m: 0.1875rem
+      0.875rem;
+    --_sbb-chip-group-margin-block-without-label-l: var(
+        --_sbb-chip-group-margin-block-start-default-large
+      )
+      1.25rem;
+    --_sbb-chip-group-margin-block-with-label-l: var(
+        --_sbb-chip-group-margin-block-start-default-large
+      )
+      0.46875rem;
+    --_sbb-chip-group-margin-block-with-label-m: var(
+        --_sbb-chip-group-margin-block-start-default-large
+      )
+      var(--_sbb-chip-group-margin-block-start-default-large);
     --sbb-flip-card-min-height: 20rem;
-    --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
-    --_sbb-form-field-floating-label-transform: 0.65625rem;
-    --_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
-    --sbb-header-height: var(--sbb-spacing-fixed-24x);
+    --_sbb-form-field-label-to-input-overlapping: 0.6875rem;
+    --_sbb-form-field-floating-label-transform: 0.3125rem;
+    --_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;
@@ -2163,9 +2122,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;
@@ -2182,7 +2138,7 @@ slot[name=error]::slotted(*) {
 @media (min-width: calc(90rem)) {
   :root {
     /* Title */
-    --sbb-heading-font-size-1: var(--sbb-typo-scale-4x);
+    --sbb-heading-font-size-1: var(--sbb-typo-scale-2-5x);
     /* Spacing */
     --sbb-spacing-responsive-m: var(--sbb-spacing-responsive-m-ultra);
     --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-ultra);
@@ -2208,30 +2164,90 @@ 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;
-}
-@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;
+*,
+::before,
+::after {
+  box-sizing: border-box;
 }
-@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;
+:root:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
+  --sbb-focus-outline-style: none;
+}
+::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;
+}
+[sbb-badge]::after {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--sbb-spacing-fixed-1x);
+  border-radius: var(--sbb-border-radius-infinity);
+  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);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-size: var(--sbb-text-font-size-xxs);
+  font-weight: bold;
+  outline: var(--sbb-border-width-1x) solid transparent;
+  content: attr(sbb-badge);
+  position: absolute;
+  inset-block-start: var(--sbb-badge-position-offset);
+}
+[sbb-badge]:where([sbb-badge-position=before])::after {
+  inset-inline-start: var(--sbb-badge-position-offset);
 }
+[sbb-badge]:where(:not([sbb-badge-position]), [sbb-badge-position=after])::after {
+  inset-inline-end: var(--sbb-badge-position-offset);
+}
 sbb-breadcrumb-group:not(:defined) {
   display: block;
   height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
   overflow: hidden;
 }
+sbb-card .sbb-action {
+  pointer-events: all;
+}
 sbb-container > [slot=image]:is(sbb-image, img),
 sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;
@@ -2259,6 +2275,10 @@ sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:sta
   padding-inline-end: 0;
 }
+sbb-flip-card .sbb-action {
+  pointer-events: all;
+}
 sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
 sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-aspect-ratio: auto;
@@ -2318,12 +2338,12 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
 :is(sbb-form-field, sbb-timetable-form-field) :where(select, sbb-select) {
   padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
 }
-:is(sbb-form-field, sbb-timetable-form-field)[size=s] :where(input, sbb-date-input, sbb-time-input) {
+:is(sbb-form-field, sbb-timetable-form-field):not([size=m], [size=l]) :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-text) - 1.25));
 }
-:is(sbb-form-field, sbb-timetable-form-field)[size=s] > :not(sbb-chip-group):has(input, sbb-date-input, sbb-time-input, select, sbb-select) {
+:is(sbb-form-field, sbb-timetable-form-field):not([size=m], [size=l]) > :not(sbb-chip-group):has(input, sbb-date-input, sbb-time-input, select, sbb-select) {
   margin-block-end: -0.125rem;
 }
 :is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
@@ -2341,6 +2361,7 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
     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;
 }
 :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar {
   width: var(--sbb-scrollbar-width);
@@ -2435,23 +2456,11 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
 }
 :root:has(sbb-header[size=m]) {
-  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+  --sbb-header-height: var(--sbb-header-height-m);
 }
-:root:has(sbb-header[size=s]) {
-  --sbb-header-height: 3.25rem;
-}
-@media (min-width: calc(64rem)) {
-  :root:has(sbb-header[size=m]) {
-    --sbb-header-height: var(--sbb-spacing-fixed-24x);
-  }
-  :root:has(sbb-header[size=s]) {
-    --sbb-header-height: var(--sbb-spacing-fixed-14x);
-  }
-}
 sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
-  margin-block-start: var(--sbb-header-height);
+  margin-block-start: var(--sbb-header-vertical-spacing);
 }
 .sbb-header-info {
@@ -2491,18 +2500,6 @@ sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   border-radius: var(--sbb-message-image-border-radius);
 }
-:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
-  --sbb-option-min-height: var(--sbb-size-element-xxs);
-  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
-  --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
-}
-:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
-  --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
-}
-:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
-  --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
-}
 .sbb-options-nowrap {
   --sbb-option-text-overflow: ellipsis;
   --sbb-option-overflow: hidden;
@@ -2548,6 +2545,202 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
   --_sbb-sidebar-content-margin-inline-start: 0;
 }
+: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(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-6x)
+  );
+  border-spacing: 0;
+  caption-side: bottom;
+  color: var(--sbb-table-color);
+  table-layout: auto;
+  text-align: left;
+}
+:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) th {
+  font-size: var(--sbb-table-header-cell-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-weight: bold;
+  background-color: var(--sbb-table-background-color);
+  border-block-end: var(--sbb-table-border);
+  border-inline-end: var(--sbb-table-border);
+  padding-block: var(--sbb-table-header-padding-block);
+  padding-inline: var(--sbb-table-header-padding-inline);
+}
+:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) td {
+  font-size: var(--sbb-table-data-cell-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  background-color: var(--sbb-table-background-color);
+  border-block-end: var(--sbb-table-border);
+  border-inline-end: var(--sbb-table-border);
+  padding-block: var(--sbb-table-cell-padding-block);
+  padding-inline: var(--sbb-table-cell-padding-inline);
+}
+:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) :is(th, td).sbb-table-group-with-next {
+  border-inline-end: none;
+}
+:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) :is(th, td):first-child {
+  border-inline-start: var(--sbb-table-border);
+}
+:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs):has(thead tr) thead tr:first-of-type > :is(th, td), :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs):not(:has(thead tr)) tbody tr:first-of-type > :is(th, td) {
+  border-block-start: var(--sbb-table-border);
+}
+:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) thead > tr:has(+ tr) > :is(th, td) {
+  border-block-end: none;
+}
+:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) caption,
+.sbb-table-caption {
+  --sbb-table-caption-color-fallback: var(--sbb-color-granite);
+  --sbb-table-caption-color-fallback: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-cement)
+  );
+  font-size: var(--sbb-text-font-size-xs);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  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;
+}
+.sbb-table-xs {
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-header-padding-block: 0;
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-1x);
+  --sbb-table-cell-padding-block: 0;
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
+}
+.sbb-table-s {
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
+}
+.sbb-table-m {
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
+  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
+  --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
+}
+sbb-table-wrapper[negative] .sbb-table,
+.sbb-table--negative {
+  --sbb-table-border-color: var(--sbb-color-anthracite);
+  --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);
+}
+.sbb-table--striped tbody tr:nth-child(odd) :is(th, td) {
+  background-color: var(--sbb-table-row-striped-color);
+}
+.sbb-table--unstriped tbody tr:nth-child(odd) :is(th, td) {
+  background-color: var(--sbb-table-background-color);
+}
+.sbb-table--theme-iron {
+  --sbb-table-cell-color: var(--sbb-color-4);
+}
+sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
+  --sbb-table-cell-color: var(--sbb-color-cloud);
+}
+.sbb-table--theme-iron tbody > tr > td {
+  color: var(--sbb-table-cell-color);
+}
+.sbb-table-header-subtitle {
+  font-weight: normal;
+}
+.sbb-table-row--striped {
+  background-color: var(--sbb-table-row-striped-color);
+}
+.sbb-table-filter {
+  padding-block-start: 0 !important;
+}
+.sbb-table-caption {
+  --sbb-table-caption-color-fallback: var(--sbb-color-granite);
+  --sbb-table-caption-color-fallback: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-cement)
+  );
+  font-size: var(--sbb-text-font-size-xs);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  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;
+}
+.sbb-table-sticky {
+  position: sticky !important;
+}
+:is(.sbb-table-sticky-border-elem-left, .sbb-table-sticky-border-elem-right)::after {
+  content: "";
+  transition-timing-function: var(--sbb-table-sticky-shadow-transition-easing);
+  transition-duration: var(--sbb-table-sticky-shadow-transition-duration);
+  transition-property: visibility, opacity;
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  width: var(--sbb-table-sticky-shadow-width);
+  inset: 0;
+}
+:is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-left {
+  border-inline-end: var(--sbb-table-border);
+}
+:is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-left::after {
+  visibility: visible;
+  opacity: 1;
+  background-image: linear-gradient(-270deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
+  inset-inline-start: unset;
+  inset-inline-end: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+}
+:is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-right {
+  border-inline-start: var(--sbb-table-border);
+}
+:is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-right::after {
+  visibility: visible;
+  opacity: 1;
+  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
+  inset-inline-start: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+  inset-inline-end: unset;
+}
+.sbb-table-align-start {
+  text-align: start;
+}
+.sbb-table-align-center {
+  text-align: center;
+}
+.sbb-table-align-end {
+  text-align: end;
+}
+.sbb-table-align-justify {
+  text-align: justify;
+}
+.sbb-table-align-left {
+  text-align: left;
+}
+.sbb-table-align-right {
+  text-align: right;
+}
 sbb-tab-nav-bar .sbb-tab-amount {
   margin: 0;
   color: var(--sbb-tab-label-amount-color);
@@ -2555,11 +2748,28 @@ sbb-tab-nav-bar .sbb-tab-amount {
   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;
-  transition-property: filter, scale;
-  will-change: filter, scale;
   scale: var(--sbb-teaser-scale, 1);
 }
@@ -2587,11 +2797,122 @@ sbb-teaser-hero img:not(.sbb-figure-overlap-image) {
   place-self: stretch;
 }
+.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 :is(.sbb-timetable-form-block, .sbb-timetable-form-mobile-block) {
+  --sbb-form-field-focus-underline-z-index: 1;
+  width: 100%;
+  position: relative;
+}
+sbb-timetable-form :is(.sbb-timetable-form-block, .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 :is(.sbb-timetable-form-block, .sbb-timetable-form-mobile-block) sbb-datepicker-toggle {
+  margin-inline-end: var(--sbb-spacing-fixed-6x);
+}
+@media (min-width: calc(37.5rem)) {
+  sbb-timetable-form .sbb-timetable-form-mobile-block {
+    width: unset;
+  }
+  sbb-timetable-form .sbb-timetable-form-mobile-block::after {
+    display: none;
+  }
+  sbb-timetable-form .sbb-timetable-form-mobile-block sbb-datepicker-toggle {
+    margin-inline-end: unset;
+  }
+}
+@media (max-width: calc(37.4375rem)) {
+  sbb-timetable-form .sbb-timetable-form-mobile-hidden {
+    display: none;
+  }
+}
+sbb-title + p {
+  margin-block-start: 0;
+}
 sbb-toggle:has(:focus-visible) {
   outline-offset: var(--sbb-focus-outline-offset);
   outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
 }
+.sbb-screen-reader-only {
+  border: 0;
+  clip-path: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+:is(.sbb-focus-outline, .sbb-focus-outline-dark):focus-visible {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
+}
+.sbb-focus-outline-dark:focus-visible {
+  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
+}
+.sbb-disable-animation {
+  --sbb-disable-animation-duration: 0s;
+}
+.sbb-disable-animation-locally {
+  --sbb-disable-animation-duration: 0s;
+}
+.sbb-disable-animation-locally > * {
+  --sbb-disable-animation-duration: initial;
+}
+.sbb-enable-animation {
+  --sbb-disable-animation-duration: initial;
+}
 .sbb-dark {
   color-scheme: dark;
 }
@@ -2604,93 +2925,585 @@ sbb-toggle:has(:focus-visible) {
   color-scheme: light dark;
 }
-html {
-  font-family: var(--sbb-typo-font-family);
-  font-weight: normal;
+.sbb-figure {
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: 100%;
+  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;
+  padding-block-start: var(--sbb-spacing-fixed-4x);
+  color: var(--sbb-color-granite);
+  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
   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);
+  font-size: var(--sbb-text-font-size-xs);
 }
-::placeholder {
-  color: var(--sbb-color-5);
-  -webkit-text-fill-color: var(--sbb-color-5);
-  opacity: 1;
+.sbb-figure :is(.sbb-figure-overlap-start-start,
+.sbb-figure-overlap-start-end,
+.sbb-figure-overlap-end-start,
+.sbb-figure-overlap-end-end) {
+  display: flex;
+  gap: var(--sbb-spacing-fixed-1x);
+  flex-wrap: wrap;
+  margin: var(--sbb-spacing-responsive-xxxs);
+  color-scheme: only light;
+  position: relative;
+  order: 1;
+  grid-row: 1;
+  grid-column: 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;
+.sbb-figure .sbb-figure-overlap-start-start {
+  place-self: start start;
+  justify-content: start;
 }
-[popover]:where(sbb-autocomplete,
-sbb-autocomplete-grid,
-sbb-datepicker,
-sbb-dialog,
-sbb-menu,
-sbb-navigation,
-sbb-overlay,
-sbb-popover,
-sbb-toast) {
+.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;
+}
+:is(sbb-image, img).sbb-image-free {
+  --sbb-image-aspect-ratio: auto;
+}
+:is(sbb-image, img).sbb-image-1-1 {
+  --sbb-image-aspect-ratio: 1 / 1;
+}
+:is(sbb-image, img).sbb-image-1-2 {
+  --sbb-image-aspect-ratio: 1 / 2;
+}
+:is(sbb-image, img).sbb-image-2-1 {
+  --sbb-image-aspect-ratio: 2 / 1;
+}
+:is(sbb-image, img).sbb-image-2-3 {
+  --sbb-image-aspect-ratio: 2 / 3;
+}
+:is(sbb-image, img).sbb-image-3-2 {
+  --sbb-image-aspect-ratio: 3 / 2;
+}
+:is(sbb-image, img).sbb-image-3-4 {
+  --sbb-image-aspect-ratio: 3 / 4;
+}
+:is(sbb-image, img).sbb-image-4-3 {
+  --sbb-image-aspect-ratio: 4 / 3;
+}
+:is(sbb-image, img).sbb-image-4-5 {
+  --sbb-image-aspect-ratio: 4 / 5;
+}
+:is(sbb-image, img).sbb-image-5-4 {
+  --sbb-image-aspect-ratio: 5 / 4;
+}
+:is(sbb-image, img).sbb-image-9-16 {
+  --sbb-image-aspect-ratio: 9 / 16;
+}
+:is(sbb-image, img).sbb-image-16-9 {
+  --sbb-image-aspect-ratio: 16 / 9;
+}
+:is(img, sbb-image).sbb-image-border-radius-default {
+  border-radius: var(--sbb-border-radius-4x);
+}
+:is(img, sbb-image).sbb-image-border-radius-none {
+  border-radius: 0;
+}
+:is(img, sbb-image).sbb-image-border-radius-round {
+  border-radius: var(--sbb-border-radius-infinity);
+}
+.sbb-grid,
+.sbb-page-spacing {
+  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));
+  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));
+}
+.sbb-grid,
+.sbb-grid-expanded {
+  display: grid;
+  gap: var(--sbb-grid-base-gutter-responsive);
+  grid-template-columns: repeat(var(--sbb-grid-base-columns), 1fr);
+}
+.sbb-grid-only {
+  display: grid;
+  gap: var(--sbb-grid-base-gutter-responsive);
+  grid-template-columns: repeat(var(--sbb-grid-base-columns), 1fr);
+}
+.sbb-orientation-vertical,
+.sbb-orientation-horizontal-from-small,
+.sbb-orientation-horizontal-from-large,
+.sbb-orientation-horizontal-from-ultra {
+  display: flex;
+  flex-direction: column;
+}
+@media (min-width: calc(37.5rem)) {
+  .sbb-orientation-horizontal-from-small {
+    flex-direction: row;
+  }
+}
+@media (min-width: calc(64rem)) {
+  .sbb-orientation-horizontal-from-large {
+    flex-direction: row;
+  }
+}
+@media (min-width: calc(90rem)) {
+  .sbb-orientation-horizontal-from-ultra {
+    flex-direction: row;
+  }
+}
+.sbb-list:where(ol, ul) {
+  --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;
-  border: none;
-  width: auto;
-  height: auto;
-  background-color: transparent;
-  color: inherit;
-  pointer-events: none;
+  padding-inline-start: var(--sbb-list-padding-inline-start);
 }
-:is(sbb-card, sbb-flip-card) .sbb-action {
-  pointer-events: all;
+.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-title + p {
-  margin-block-start: 0;
+.sbb-list:where(ol, ul) > li p,
+.sbb-list:where(ol, ul) :is(ol, ul) > li p {
+  margin-block: 0;
 }
-img {
-  aspect-ratio: var(--sbb-image-aspect-ratio);
-  object-fit: var(--sbb-image-object-fit);
-  object-position: var(--sbb-image-object-position);
+.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);
 }
-: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-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: "•";
+  position: absolute;
+  display: flex;
+  height: 1em;
+  width: 1em;
+  align-items: center;
+  justify-content: center;
+  inset-block-start: calc(0.5 * (var(--sbb-typo-line-height-text) * 1em - 1em));
+  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);
+  font-size: var(--sbb-text-font-size-s);
+  margin: 0;
+  padding: 0;
+  display: grid;
+  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;
+}
+.sbb-step-list {
+  --sbb-step-list-dimensions: 2.125rem;
+  --sbb-step-list-padding-inline: var(--sbb-spacing-responsive-xxs);
+  --sbb-step-list-to-text-gap: var(--sbb-spacing-responsive-xxxs);
+  --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 *
+      (
+        var(--sbb-step-list-dimensions) - var(--sbb-typo-line-height-text) *
+          var(--sbb-text-font-size)
+      )
   );
-  --sbb-teaser-image-animation-easing: var(--sbb-animation-easing);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  counter-reset: steps;
+  color: var(--sbb-step-list-color);
 }
-@media (any-hover: hover) {
-  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product):hover {
-    --sbb-teaser-image-brightness: var(--sbb-teaser-image-brightness-hover);
+.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;
   }
 }
-:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  will-change: filter;
-  filter: brightness(var(--sbb-teaser-image-brightness, 1));
-  transition: filter var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
+.sbb-step-list > li {
+  position: relative;
+  counter-increment: steps;
+  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));
 }
-.sbb-overlay-outlet {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
+.sbb-step-list > li::before {
+  content: counter(steps);
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--sbb-step-list-dimensions);
+  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-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%;
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  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);
+}
+.sbb-icon-list {
+  --sbb-icon-list-marker-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3 12a9 9 0 0 1 9-9 9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.104 13.305 5-6.5-.792-.61-4.69 6.096-2.102-1.681-.624.78 2.5 2 .398.319z" clip-rule="evenodd"></path></svg>');
+  --sbb-icon-list-marker-icon-color: currentcolor;
+  --sbb-icon-list-vertical-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-icon-list-dimensions: var(--sbb-size-icon-ui-small);
+  --sbb-icon-list-to-text-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-icon-list-text-to-marker-block-offset: calc(
+    0.5 *
+      (
+        var(--sbb-icon-list-dimensions) - var(--sbb-typo-line-height-text) *
+          var(--sbb-text-font-size)
+      )
+  );
+  list-style: none;
+  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;
+  width: var(--sbb-icon-list-dimensions);
+  height: var(--sbb-icon-list-dimensions);
+  margin-block-start: calc(-1 * var(--sbb-icon-list-text-to-marker-block-offset));
+  inset-inline-start: 0;
+  background-color: var(--sbb-icon-list-marker-icon-color);
+  mask-image: var(--sbb-icon-list-marker-icon);
+  mask-repeat: no-repeat;
+  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,
+.sbb-scrollbar-thick-negative,
+.sbb-scrollbar-track-visible,
+.sbb-scrollbar-negative-track-visible,
+.sbb-scrollbar-thick-track-visible,
+.sbb-scrollbar-thick-negative-track-visible) {
+  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
+  --sbb-scrollbar-thumb-width: 0.125rem;
+  --sbb-scrollbar-thumb-width-hover: 0.25rem;
+  --sbb-scrollbar-width-firefox: thin;
+  --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;
+}
+:is(.sbb-scrollbar,
+.sbb-scrollbar-negative,
+.sbb-scrollbar-thick,
+.sbb-scrollbar-thick-negative,
+.sbb-scrollbar-track-visible,
+.sbb-scrollbar-negative-track-visible,
+.sbb-scrollbar-thick-track-visible,
+.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar {
+  width: var(--sbb-scrollbar-width);
+  height: var(--sbb-scrollbar-width);
+  background-color: var(--sbb-scrollbar-track-color, transparent);
+}
+:is(.sbb-scrollbar,
+.sbb-scrollbar-negative,
+.sbb-scrollbar-thick,
+.sbb-scrollbar-thick-negative,
+.sbb-scrollbar-track-visible,
+.sbb-scrollbar-negative-track-visible,
+.sbb-scrollbar-thick-track-visible,
+.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,
+.sbb-scrollbar-thick-negative,
+.sbb-scrollbar-track-visible,
+.sbb-scrollbar-negative-track-visible,
+.sbb-scrollbar-thick-track-visible,
+.sbb-scrollbar-thick-negative-track-visible)::-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;
+}
+:is(.sbb-scrollbar,
+.sbb-scrollbar-negative,
+.sbb-scrollbar-thick,
+.sbb-scrollbar-thick-negative,
+.sbb-scrollbar-track-visible,
+.sbb-scrollbar-negative-track-visible,
+.sbb-scrollbar-thick-track-visible,
+.sbb-scrollbar-thick-negative-track-visible)::-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)));
+}
+:is(.sbb-scrollbar,
+.sbb-scrollbar-negative,
+.sbb-scrollbar-thick,
+.sbb-scrollbar-thick-negative,
+.sbb-scrollbar-track-visible,
+.sbb-scrollbar-negative-track-visible,
+.sbb-scrollbar-thick-track-visible,
+.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-button, :is(.sbb-scrollbar,
+.sbb-scrollbar-negative,
+.sbb-scrollbar-thick,
+.sbb-scrollbar-thick-negative,
+.sbb-scrollbar-track-visible,
+.sbb-scrollbar-negative-track-visible,
+.sbb-scrollbar-thick-track-visible,
+.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-corner {
+  display: none;
+}
+@supports not selector(::-webkit-scrollbar) {
+  :is(.sbb-scrollbar,
+  .sbb-scrollbar-negative,
+  .sbb-scrollbar-thick,
+  .sbb-scrollbar-thick-negative,
+  .sbb-scrollbar-track-visible,
+  .sbb-scrollbar-negative-track-visible,
+  .sbb-scrollbar-thick-track-visible,
+  .sbb-scrollbar-thick-negative-track-visible) {
+    scrollbar-width: var(--sbb-scrollbar-width-firefox);
+    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,
+.sbb-scrollbar-thick-negative-track-visible) {
+  --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);
+}
+:is(.sbb-scrollbar-thick-negative,
+.sbb-scrollbar-thick,
+.sbb-scrollbar-thick-track-visible,
+.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;
+}
+:is(.sbb-scrollbar-track-visible, .sbb-scrollbar-thick-track-visible) {
+  --sbb-scrollbar-track-color: var(--sbb-background-color-4);
+}
+:is(.sbb-scrollbar-negative-track-visible, .sbb-scrollbar-thick-negative-track-visible) {
+  --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;
+}
+sup {
+  top: -0.5em;
+}
+.sbb-text-xxs,
+.sbb-text-xs,
+.sbb-text-s,
+.sbb-text-m,
+.sbb-text-l,
+.sbb-text-xl {
+  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);
+}
+.sbb-text-xxs {
+  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
+}
+.sbb-text-xs {
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
+}
+.sbb-text-s {
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
+}
+.sbb-text-m {
+  --sbb-text-font-size: var(--sbb-text-font-size-m);
+}
+.sbb-text-l {
+  --sbb-text-font-size: var(--sbb-text-font-size-l);
+}
+.sbb-text-xl {
+  --sbb-text-font-size: var(--sbb-text-font-size-xl);
+}
+.sbb-text--bold {
+  font-weight: bold;
+}
+.sbb-legend {
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-size: var(--sbb-text-font-size-xs);
+  padding: 0;
+  color: var(--sbb-color-granite);
+  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
 }