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

@sbb-esta/lyne-elements 5.0.0-next.3 → 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 (1354) hide show

package/core.css DELETED Viewed

@@ -1,2713 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-:host {
-  display: flex;
-  flex-flow: var(--sbb-selection-group-orientation) wrap;
-  gap: var(--sbb-selection-group-gap);
-  align-items: flex-start;
-  width: var(--sbb-selection-group-width);
-}
-:host([orientation=vertical]) {
-  --sbb-selection-group-orientation: column;
-  --sbb-selection-group-width: 100%;
-  --sbb-selection-group-elements-width: 100%;
-}
-:host(:is(:state(has-panel),[state--has-panel])) {
-  --sbb-selection-group-width: 100%;
-  --sbb-selection-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
-  --sbb-selection-group-elements-flex: auto;
-}
-@media (min-width: calc(0rem)) {
-  :host([orientation=vertical][horizontal-from=zero]) {
-    --sbb-selection-group-orientation: row;
-    --sbb-selection-group-elements-width: auto;
-  }
-  :host([orientation=vertical][horizontal-from=zero]:not(:is(:state(has-panel),[state--has-panel]))) {
-    --sbb-selection-group-width: auto;
-  }
-}
-@media (min-width: calc(37.5rem)) {
-  :host([orientation=vertical][horizontal-from=small]) {
-    --sbb-selection-group-orientation: row;
-    --sbb-selection-group-elements-width: auto;
-  }
-  :host([orientation=vertical][horizontal-from=small]:not(:is(:state(has-panel),[state--has-panel]))) {
-    --sbb-selection-group-width: auto;
-  }
-}
-@media (min-width: calc(64rem)) {
-  :host([orientation=vertical][horizontal-from=large]) {
-    --sbb-selection-group-orientation: row;
-    --sbb-selection-group-elements-width: auto;
-  }
-  :host([orientation=vertical][horizontal-from=large]:not(:is(:state(has-panel),[state--has-panel]))) {
-    --sbb-selection-group-width: auto;
-  }
-}
-@media (min-width: calc(90rem)) {
-  :host([orientation=vertical][horizontal-from=ultra]) {
-    --sbb-selection-group-orientation: row;
-    --sbb-selection-group-elements-width: auto;
-  }
-  :host([orientation=vertical][horizontal-from=ultra]:not(:is(:state(has-panel),[state--has-panel]))) {
-    --sbb-selection-group-width: auto;
-  }
-}
-slot[name=error]::slotted(*) {
-  flex-basis: 100%;
-}
-::slotted(:is(sbb-checkbox-panel, sbb-radio-button-panel)) {
-  flex: var(--sbb-selection-group-elements-flex);
-}
-::slotted(:is(sbb-checkbox, sbb-checkbox-panel, sbb-radio-button-panel)) {
-  width: var(--sbb-selection-group-elements-width);
-}
-:host {
-  --sbb-tab-label-animation-duration: var(
-    --sbb-disable-animation-duration,
-    var(--sbb-animation-duration-2x)
-  );
-  --sbb-tab-label-outline-border-radius-internal: calc(
-    var(--sbb-tab-label-outline-border-radius) - var(--sbb-focus-outline-offset)
-  );
-}
-:host(:is(:is(:state(size-s),[state--size-s]), [size=s])) {
-  --sbb-tab-label-height: var(--sbb-size-element-xs);
-  --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs);
-  --sbb-tab-label-font-size: var(--sbb-text-font-size-s);
-}
-:host(:is(:is(:state(size-l),[state--size-l]), [size=l])) {
-  --sbb-tab-label-height: var(--sbb-size-element-m);
-  --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);
-  --sbb-tab-label-font-size: var(--sbb-text-font-size-m);
-}
-:host(:is(:is(:state(size-xl),[state--size-xl]), [size=xl])) {
-  --sbb-tab-label-height: var(--sbb-size-element-m);
-  --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);
-  --sbb-tab-label-font-size: var(--sbb-text-font-size-xl);
-}
-:host(sbb-tab-label),
-:host(sbb-tab-nav-bar) ::slotted(a) {
-  pointer-events: var(--sbb-tab-label-pointer-events, unset);
-}
-@media (forced-colors: active) {
-  :host(sbb-tab-label),
-  :host(sbb-tab-nav-bar) ::slotted(a) {
-    --sbb-tab-label-color: ButtonText;
-    --sbb-tab-label-amount-color: ButtonText;
-  }
-}
-:host(sbb-tab-nav-bar) ::slotted(a),
-:host(sbb-tab-label) .sbb-tab-label {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: var(--sbb-tab-label-gap);
-  color: var(--sbb-tab-label-color);
-  margin: 0;
-  padding-inline: var(--sbb-tab-label-inline-padding);
-  min-height: var(--sbb-tab-label-height);
-  transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);
-  font-size: var(--sbb-tab-label-font-size);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  line-height: var(--sbb-typo-line-height-text);
-  font-weight: var(--sbb-tab-label-font-weight);
-  text-decoration: var(--sbb-tab-label-text-decoration);
-}
-:host(sbb-tab-nav-bar) ::slotted(a)::after,
-:host(sbb-tab-label) .sbb-tab-label::after {
-  position: absolute;
-  content: "";
-  inset-inline: 0;
-  inset-block-end: 0;
-  height: var(--sbb-tab-label-marker-thickness);
-  background-color: var(--sbb-tab-label-color);
-  scale: var(--sbb-tab-label-marker-scale, 0);
-  transition-duration: var(--sbb-tab-label-animation-duration);
-  transition-timing-function: var(--sbb-tab-label-animation-easing);
-  transition-property: scale, background-color;
-}
-:host(sbb-tab-nav-bar) .sbb-tab-nav-bar > [data-has-divider],
-:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])) {
-  position: relative;
-}
-:host(sbb-tab-nav-bar) .sbb-tab-nav-bar > [data-has-divider]::before,
-:host(sbb-tab-label:is(:state(has-divider),[state--has-divider]))::before {
-  content: "";
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-end: 0;
-  width: var(--sbb-tab-group-width);
-  height: var(--sbb-border-width-1x);
-  background-color: var(--sbb-tab-label-line-color);
-}
-:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),
-:host(sbb-tab-label[disabled]) {
-  --sbb-tab-label-cursor: unset;
-  --sbb-tab-label-pointer-events: none;
-  --sbb-tab-label-text-decoration: line-through;
-}
-@media (forced-colors: active) {
-  :host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),
-  :host(sbb-tab-label[disabled]) {
-    --sbb-tab-label-color: GrayText;
-    --sbb-tab-label-amount-color: GrayText;
-  }
-}
-:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),
-:host(sbb-tab-label[active]:not([disabled])) {
-  --sbb-tab-label-color: var(--sbb-color-3);
-  --sbb-tab-label-cursor: unset;
-  --sbb-tab-label-pointer-events: none;
-  --sbb-tab-label-marker-scale: 1;
-}
-@media (forced-colors: active) {
-  :host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),
-  :host(sbb-tab-label[active]:not([disabled])) {
-    --sbb-tab-label-color: ButtonText;
-    --sbb-tab-label-amount-color: ButtonText;
-  }
-}
-@media (any-hover: hover) {
-  :host(sbb-tab-nav-bar) ::slotted(a:hover:not(.sbb-disabled)),
-  :host(sbb-tab-label:hover:not([disabled])) {
-    --sbb-tab-label-marker-scale: 1;
-  }
-}
-:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),
-:host(sbb-tab-label:active) {
-  --sbb-tab-label-color: var(--sbb-color-3);
-}
-@media (forced-colors: active) {
-  :host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),
-  :host(sbb-tab-label:active) {
-    --sbb-tab-label-color: ButtonText;
-    --sbb-tab-label-amount-color: ButtonText;
-  }
-}
-:host(sbb-tab-nav-bar) ::slotted(a:focus-visible),
-:host(sbb-tab-label:focus-visible) .sbb-tab-label {
-  outline-offset: var(--sbb-focus-outline-offset);
-  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
-  border-radius: var(--sbb-tab-label-outline-border-radius-internal);
-}
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
-:root {
-  --sbb-animation-duration-1x: 0.04s;
-  --sbb-animation-duration-2x: 0.08s;
-  --sbb-animation-duration-3x: 0.12s;
-  --sbb-animation-duration-4x: 0.16s;
-  --sbb-animation-duration-5x: 0.20s;
-  --sbb-animation-duration-6x: 0.24s;
-  --sbb-animation-duration-12x: 0.48s;
-  --sbb-animation-easing: cubic-bezier(.47, .1, 1, .63);
-  /**
-   * Original Value: 1px
-   */
-  --sbb-border-width-1x: 0.0625rem;
-  /**
-   * Original Value: 2px
-   */
-  --sbb-border-width-2x: 0.125rem;
-  /**
-   * Original Value: 3px
-   */
-  --sbb-border-width-3x: 0.1875rem;
-  /**
-   * Original Value: 4px
-   */
-  --sbb-border-width-4x: 0.25rem;
-  /**
-   * Original Value: 2px
-   */
-  --sbb-border-radius-1x: 0.125rem;
-  /**
-   * Original Value: 4px
-   */
-  --sbb-border-radius-2x: 0.25rem;
-  /**
-   * Original Value: 8px
-   */
-  --sbb-border-radius-4x: 0.5rem;
-  /**
-   * Original Value: 12px
-   */
-  --sbb-border-radius-6x: 0.75rem;
-  /**
-   * Original Value: 16px
-   */
-  --sbb-border-radius-8x: 1rem;
-  /**
-   * Original Value: 32px
-   */
-  --sbb-border-radius-16x: 2rem;
-  /**
-   * Original Value: 0px
-   */
-  --sbb-breakpoint-zero-min: 0rem;
-  /**
-   * Original Value: 599px
-   */
-  --sbb-breakpoint-zero-max: 37.4375rem;
-  /**
-   * Original Value: 600px
-   */
-  --sbb-breakpoint-small-min: 37.5rem;
-  /**
-   * Original Value: 1023px
-   */
-  --sbb-breakpoint-small-max: 63.9375rem;
-  /**
-   * Original Value: 1024px
-   */
-  --sbb-breakpoint-large-min: 64rem;
-  /**
-   * Original Value: 1439px
-   */
-  --sbb-breakpoint-large-max: 89.9375rem;
-  /**
-   * Original Value: 1440px
-   */
-  --sbb-breakpoint-ultra-min: 90rem;
-  /**
-   * Original Value: 2579px
-   */
-  --sbb-breakpoint-ultra-max: 161.1875rem;
-  --sbb-color-black: #000000;
-  --sbb-color-midnight: #151515;
-  --sbb-color-blue: #2d327d;
-  --sbb-color-charcoal: #212121;
-  --sbb-color-iron: #444444;
-  --sbb-color-anthracite: #5a5a5a;
-  --sbb-color-granite: #686868;
-  --sbb-color-metal: #767676;
-  --sbb-color-smoke: #8d8d8d;
-  --sbb-color-storm: #a8a8a8;
-  --sbb-color-graphite: #b7b7b7;
-  --sbb-color-cement: #bdbdbd;
-  --sbb-color-platinum: #cdcdcd;
-  --sbb-color-aluminium: #d2d2d2;
-  --sbb-color-silver: #dcdcdc;
-  --sbb-color-cloud: #e5e5e5;
-  --sbb-color-milk: #f6f6f6;
-  --sbb-color-red: #eb0000;
-  --sbb-color-red85: #ff3838;
-  --sbb-color-red125: #c60018;
-  --sbb-color-red150: #a20013;
-  --sbb-color-royal-light: #06348b;
-  --sbb-color-royal-dark: #0053ef;
-  --sbb-color-royal85-light: #4077df;
-  --sbb-color-royal85-dark: #4077df;
-  --sbb-color-royal125-light: #032668;
-  --sbb-color-royal125-dark: #245ecb;
-  --sbb-color-royal150-light: #021c4e;
-  --sbb-color-royal150-dark: #3c65b3;
-  --sbb-color-white: #ffffff;
-  --sbb-color-sky-light: #0074bf;
-  --sbb-color-sky-dark: #128ede;
-  --sbb-color-night-light: #143a85;
-  --sbb-color-night-dark: #6587ca;
-  --sbb-color-violet-light: #6f2282;
-  --sbb-color-violet-dark: #b36cc5;
-  --sbb-color-pink-light: #c7387a;
-  --sbb-color-pink-dark: #e45295;
-  --sbb-color-autumn-light: #cf3b00;
-  --sbb-color-autumn-dark: #f05313;
-  --sbb-color-orange-light: #f27e00;
-  --sbb-color-orange-dark: #fb8e19;
-  --sbb-color-peach-light: #fcbb00;
-  --sbb-color-peach-dark: #ffc727;
-  --sbb-color-lemon-light: #ffde15;
-  --sbb-color-lemon-dark: #ffe547;
-  --sbb-color-brown-light: #a05400;
-  --sbb-color-brown-dark: #cf6f04;
-  --sbb-color-green-light: #008233;
-  --sbb-color-green-dark: #109d47;
-  --sbb-color-turquoise-light: #007e84;
-  --sbb-color-turquoise-dark: #00a59b;
-  /**
-   * Original Value: 3px
-   */
-  --sbb-focus-outline-offset: 0.1875rem;
-  --sbb-hover-image-brightness: 1.075;
-  --sbb-layout-base-grid-columns-zero: 4;
-  --sbb-layout-base-grid-columns-small: 8;
-  --sbb-layout-base-grid-columns-large: 12;
-  --sbb-layout-base-grid-columns-ultra: 16;
-  /**
-   * Original Value: 16px
-   */
-  --sbb-layout-base-grid-gutter-responsive-zero: 1rem;
-  /**
-   * Original Value: 24px
-   */
-  --sbb-layout-base-grid-gutter-responsive-small: 1.5rem;
-  /**
-   * Original Value: 32px
-   */
-  --sbb-layout-base-grid-gutter-responsive-large: 2rem;
-  /**
-   * Original Value: 32px
-   */
-  --sbb-layout-base-grid-gutter-responsive-ultra: 2rem;
-  /**
-   * Original Value: 20px
-   */
-  --sbb-layout-base-offset-responsive-zero: 1.25rem;
-  /**
-   * Original Value: 48px
-   */
-  --sbb-layout-base-offset-responsive-small: 3rem;
-  /**
-   * Original Value: 64px
-   */
-  --sbb-layout-base-offset-responsive-large: 4rem;
-  /**
-   * Original Value: 120px
-   */
-  --sbb-layout-base-offset-responsive-ultra: 7.5rem;
-  /**
-   * Original Value: 1200px
-   */
-  --sbb-layout-base-page-max-width: 75rem;
-  /**
-   * Original Value: 0px
-   */
-  --sbb-shadow-elevation-level-3-shadow-1-offset-x: 0rem;
-  /**
-   * Original Value: 2px
-   */
-  --sbb-shadow-elevation-level-3-shadow-1-offset-y: 0.125rem;
-  /**
-   * Original Value: 16px
-   */
-  --sbb-shadow-elevation-level-3-shadow-1-blur: 1rem;
-  /**
-   * Original Value: 0px
-   */
-  --sbb-shadow-elevation-level-3-shadow-1-spread: 0rem;
-  /**
-   * Original Value: 0px
-   */
-  --sbb-shadow-elevation-level-3-shadow-2-offset-x: 0rem;
-  /**
-   * Original Value: 1px
-   */
-  --sbb-shadow-elevation-level-3-shadow-2-offset-y: 0.0625rem;
-  /**
-   * Original Value: 4px
-   */
-  --sbb-shadow-elevation-level-3-shadow-2-blur: 0.25rem;
-  /**
-   * Original Value: 0px
-   */
-  --sbb-shadow-elevation-level-3-shadow-2-spread: 0rem;
-  /**
-   * Original Value: 0px
-   */
-  --sbb-shadow-elevation-level-5-shadow-1-offset-x: 0rem;
-  /**
-   * Original Value: 4px
-   */
-  --sbb-shadow-elevation-level-5-shadow-1-offset-y: 0.25rem;
-  /**
-   * Original Value: 32px
-   */
-  --sbb-shadow-elevation-level-5-shadow-1-blur: 2rem;
-  /**
-   * Original Value: 0px
-   */
-  --sbb-shadow-elevation-level-5-shadow-1-spread: 0rem;
-  /**
-   * Original Value: 0px
-   */
-  --sbb-shadow-elevation-level-5-shadow-2-offset-x: 0rem;
-  /**
-   * Original Value: 1px
-   */
-  --sbb-shadow-elevation-level-5-shadow-2-offset-y: 0.0625rem;
-  /**
-   * Original Value: 8px
-   */
-  --sbb-shadow-elevation-level-5-shadow-2-blur: 0.5rem;
-  /**
-   * Original Value: 0px
-   */
-  --sbb-shadow-elevation-level-5-shadow-2-spread: 0rem;
-  /**
-   * Original Value: 0px
-   */
-  --sbb-shadow-elevation-level-9-shadow-1-offset-x: 0rem;
-  /**
-   * Original Value: 16px
-   */
-  --sbb-shadow-elevation-level-9-shadow-1-offset-y: 1rem;
-  /**
-   * Original Value: 128px
-   */
-  --sbb-shadow-elevation-level-9-shadow-1-blur: 8rem;
-  /**
-   * Original Value: 0px
-   */
-  --sbb-shadow-elevation-level-9-shadow-1-spread: 0rem;
-  /**
-   * Original Value: 0px
-   */
-  --sbb-shadow-elevation-level-9-shadow-2-offset-x: 0rem;
-  /**
-   * Original Value: 4px
-   */
-  --sbb-shadow-elevation-level-9-shadow-2-offset-y: 0.25rem;
-  /**
-   * Original Value: 32px
-   */
-  --sbb-shadow-elevation-level-9-shadow-2-blur: 2rem;
-  /**
-   * Original Value: 0px
-   */
-  --sbb-shadow-elevation-level-9-shadow-2-spread: 0rem;
-  /**
-   * Original Value: 0px
-   */
-  --sbb-shadow-elevation-level-11-shadow-1-offset-x: 0rem;
-  /**
-   * Original Value: 24px
-   */
-  --sbb-shadow-elevation-level-11-shadow-1-offset-y: 1.5rem;
-  /**
-   * Original Value: 192px
-   */
-  --sbb-shadow-elevation-level-11-shadow-1-blur: 12rem;
-  /**
-   * Original Value: 0px
-   */
-  --sbb-shadow-elevation-level-11-shadow-1-spread: 0rem;
-  /**
-   * Original Value: 0px
-   */
-  --sbb-shadow-elevation-level-11-shadow-2-offset-x: 0rem;
-  /**
-   * Original Value: 4px
-   */
-  --sbb-shadow-elevation-level-11-shadow-2-offset-y: 0.25rem;
-  /**
-   * Original Value: 64px
-   */
-  --sbb-shadow-elevation-level-11-shadow-2-blur: 4rem;
-  /**
-   * Original Value: 0px
-   */
-  --sbb-shadow-elevation-level-11-shadow-2-spread: 0rem;
-  /**
-   * Original Value: 28px
-   */
-  --sbb-size-element-xxxs-zero: 1.75rem;
-  /**
-   * Original Value: 28px
-   */
-  --sbb-size-element-xxxs-small: 1.75rem;
-  /**
-   * Original Value: 32px
-   */
-  --sbb-size-element-xxxs-large: 2rem;
-  /**
-   * Original Value: 32px
-   */
-  --sbb-size-element-xxxs-ultra: 2rem;
-  /**
-   * Original Value: 32px
-   */
-  --sbb-size-element-xxs-zero: 2rem;
-  /**
-   * Original Value: 32px
-   */
-  --sbb-size-element-xxs-small: 2rem;
-  /**
-   * Original Value: 36px
-   */
-  --sbb-size-element-xxs-large: 2.25rem;
-  /**
-   * Original Value: 36px
-   */
-  --sbb-size-element-xxs-ultra: 2.25rem;
-  /**
-   * Original Value: 36px
-   */
-  --sbb-size-element-xs-zero: 2.25rem;
-  /**
-   * Original Value: 36px
-   */
-  --sbb-size-element-xs-small: 2.25rem;
-  /**
-   * Original Value: 40px
-   */
-  --sbb-size-element-xs-large: 2.5rem;
-  /**
-   * Original Value: 40px
-   */
-  --sbb-size-element-xs-ultra: 2.5rem;
-  /**
-   * Original Value: 44px
-   */
-  --sbb-size-element-s-zero: 2.75rem;
-  /**
-   * Original Value: 44px
-   */
-  --sbb-size-element-s-small: 2.75rem;
-  /**
-   * Original Value: 48px
-   */
-  --sbb-size-element-s-large: 3rem;
-  /**
-   * Original Value: 48px
-   */
-  --sbb-size-element-s-ultra: 3rem;
-  /**
-   * Original Value: 48px
-   */
-  --sbb-size-element-m-zero: 3rem;
-  /**
-   * Original Value: 48px
-   */
-  --sbb-size-element-m-small: 3rem;
-  /**
-   * Original Value: 56px
-   */
-  --sbb-size-element-m-large: 3.5rem;
-  /**
-   * Original Value: 56px
-   */
-  --sbb-size-element-m-ultra: 3.5rem;
-  /**
-   * Original Value: 56px
-   */
-  --sbb-size-element-l-zero: 3.5rem;
-  /**
-   * Original Value: 56px
-   */
-  --sbb-size-element-l-small: 3.5rem;
-  /**
-   * Original Value: 64px
-   */
-  --sbb-size-element-l-large: 4rem;
-  /**
-   * Original Value: 64px
-   */
-  --sbb-size-element-l-ultra: 4rem;
-  /**
-   * Original Value: 16px
-   */
-  --sbb-size-icon-ui-extra-small: 1rem;
-  /**
-   * Original Value: 24px
-   */
-  --sbb-size-icon-ui-small: 1.5rem;
-  /**
-   * Original Value: 36px
-   */
-  --sbb-size-icon-ui-medium: 2.25rem;
-  /**
-   * Original Value: 48px
-   */
-  --sbb-size-icon-ui-large: 3rem;
-  /**
-   * Original Value: 4px
-   */
-  --sbb-spacing-fixed-1x: 0.25rem;
-  /**
-   * Original Value: 8px
-   */
-  --sbb-spacing-fixed-2x: 0.5rem;
-  /**
-   * Original Value: 12px
-   */
-  --sbb-spacing-fixed-3x: 0.75rem;
-  /**
-   * Original Value: 16px
-   */
-  --sbb-spacing-fixed-4x: 1rem;
-  /**
-   * Original Value: 20px
-   */
-  --sbb-spacing-fixed-5x: 1.25rem;
-  /**
-   * Original Value: 24px
-   */
-  --sbb-spacing-fixed-6x: 1.5rem;
-  /**
-   * Original Value: 28px
-   */
-  --sbb-spacing-fixed-7x: 1.75rem;
-  /**
-   * Original Value: 32px
-   */
-  --sbb-spacing-fixed-8x: 2rem;
-  /**
-   * Original Value: 36px
-   */
-  --sbb-spacing-fixed-9x: 2.25rem;
-  /**
-   * Original Value: 40px
-   */
-  --sbb-spacing-fixed-10x: 2.5rem;
-  /**
-   * Original Value: 48px
-   */
-  --sbb-spacing-fixed-12x: 3rem;
-  /**
-   * Original Value: 56px
-   */
-  --sbb-spacing-fixed-14x: 3.5rem;
-  /**
-   * Original Value: 64px
-   */
-  --sbb-spacing-fixed-16x: 4rem;
-  /**
-   * Original Value: 72px
-   */
-  --sbb-spacing-fixed-18x: 4.5rem;
-  /**
-   * Original Value: 76px
-   */
-  --sbb-spacing-fixed-19x: 4.75rem;
-  /**
-   * Original Value: 80px
-   */
-  --sbb-spacing-fixed-20x: 5rem;
-  /**
-   * Original Value: 96px
-   */
-  --sbb-spacing-fixed-24x: 6rem;
-  /**
-   * Original Value: 120px
-   */
-  --sbb-spacing-fixed-30x: 7.5rem;
-  /**
-   * Original Value: 12px
-   */
-  --sbb-spacing-responsive-xxxs-zero: 0.75rem;
-  /**
-   * Original Value: 12px
-   */
-  --sbb-spacing-responsive-xxxs-small: 0.75rem;
-  /**
-   * Original Value: 16px
-   */
-  --sbb-spacing-responsive-xxxs-large: 1rem;
-  /**
-   * Original Value: 16px
-   */
-  --sbb-spacing-responsive-xxxs-ultra: 1rem;
-  /**
-   * Original Value: 16px
-   */
-  --sbb-spacing-responsive-xxs-zero: 1rem;
-  /**
-   * Original Value: 16px
-   */
-  --sbb-spacing-responsive-xxs-small: 1rem;
-  /**
-   * Original Value: 24px
-   */
-  --sbb-spacing-responsive-xxs-large: 1.5rem;
-  /**
-   * Original Value: 24px
-   */
-  --sbb-spacing-responsive-xxs-ultra: 1.5rem;
-  /**
-   * Original Value: 20px
-   */
-  --sbb-spacing-responsive-xs-zero: 1.25rem;
-  /**
-   * Original Value: 20px
-   */
-  --sbb-spacing-responsive-xs-small: 1.25rem;
-  /**
-   * Original Value: 24px
-   */
-  --sbb-spacing-responsive-xs-large: 1.5rem;
-  /**
-   * Original Value: 24px
-   */
-  --sbb-spacing-responsive-xs-ultra: 1.5rem;
-  /**
-   * Original Value: 24px
-   */
-  --sbb-spacing-responsive-s-zero: 1.5rem;
-  /**
-   * Original Value: 24px
-   */
-  --sbb-spacing-responsive-s-small: 1.5rem;
-  /**
-   * Original Value: 32px
-   */
-  --sbb-spacing-responsive-s-large: 2rem;
-  /**
-   * Original Value: 32px
-   */
-  --sbb-spacing-responsive-s-ultra: 2rem;
-  /**
-   * Original Value: 32px
-   */
-  --sbb-spacing-responsive-m-zero: 2rem;
-  /**
-   * Original Value: 32px
-   */
-  --sbb-spacing-responsive-m-small: 2rem;
-  /**
-   * Original Value: 40px
-   */
-  --sbb-spacing-responsive-m-large: 2.5rem;
-  /**
-   * Original Value: 48px
-   */
-  --sbb-spacing-responsive-m-ultra: 3rem;
-  /**
-   * Original Value: 32px
-   */
-  --sbb-spacing-responsive-l-zero: 2rem;
-  /**
-   * Original Value: 40px
-   */
-  --sbb-spacing-responsive-l-small: 2.5rem;
-  /**
-   * Original Value: 56px
-   */
-  --sbb-spacing-responsive-l-large: 3.5rem;
-  /**
-   * Original Value: 64px
-   */
-  --sbb-spacing-responsive-l-ultra: 4rem;
-  /**
-   * Original Value: 32px
-   */
-  --sbb-spacing-responsive-xl-zero: 2rem;
-  /**
-   * Original Value: 48px
-   */
-  --sbb-spacing-responsive-xl-small: 3rem;
-  /**
-   * Original Value: 80px
-   */
-  --sbb-spacing-responsive-xl-large: 5rem;
-  /**
-   * Original Value: 96px
-   */
-  --sbb-spacing-responsive-xl-ultra: 6rem;
-  /**
-   * Original Value: 48px
-   */
-  --sbb-spacing-responsive-xxl-zero: 3rem;
-  /**
-   * Original Value: 72px
-   */
-  --sbb-spacing-responsive-xxl-small: 4.5rem;
-  /**
-   * Original Value: 96px
-   */
-  --sbb-spacing-responsive-xxl-large: 6rem;
-  /**
-   * Original Value: 120px
-   */
-  --sbb-spacing-responsive-xxl-ultra: 7.5rem;
-  --sbb-typo-font-family: "SBB", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  --sbb-typo-letter-spacing-heading: 0em;
-  --sbb-typo-letter-spacing-text: 0.03em;
-  --sbb-typo-line-height-heading: 1.4;
-  --sbb-typo-line-height-text: 1.75;
-  /**
-   * Original Value: 12px
-   */
-  --sbb-typo-scale-0-75x: 0.75rem;
-  /**
-   * Original Value: 13px
-   */
-  --sbb-typo-scale-0-8125x: 0.8125rem;
-  /**
-   * Original Value: 14px
-   */
-  --sbb-typo-scale-0-875x: 0.875rem;
-  /**
-   * Original Value: 16px
-   */
-  --sbb-typo-scale-default: 1rem;
-  /**
-   * Original Value: 18px
-   */
-  --sbb-typo-scale-1-125x: 1.125rem;
-  /**
-   * Original Value: 20px
-   */
-  --sbb-typo-scale-1-25x: 1.25rem;
-  /**
-   * Original Value: 24px
-   */
-  --sbb-typo-scale-1-5x: 1.5rem;
-  /**
-   * Original Value: 32px
-   */
-  --sbb-typo-scale-2x: 2rem;
-  /**
-   * Original Value: 40px
-   */
-  --sbb-typo-scale-2-5x: 2.5rem;
-  /**
-   * Original Value: 48px
-   */
-  --sbb-typo-scale-3x: 3rem;
-  /**
-   * Original Value: 56px
-   */
-  --sbb-typo-scale-3-5x: 3.5rem;
-  /**
-   * Original Value: 64px
-   */
-  --sbb-typo-scale-4x: 4rem;
-  /**
-  * We provide an extended collection of CSS variables which are mainly breakpoint
-  * dependant or simply referencing other variables.
-  * Due to technical limitations these variables are only provided as CSS variables.
-  */
-  /* Colors */
-  --sbb-color-sky: var(--sbb-color-sky-light);
-  --sbb-color-sky: light-dark(var(--sbb-color-sky-light), var(--sbb-color-sky-dark));
-  --sbb-color-night: var(--sbb-color-night-light);
-  --sbb-color-night: light-dark(var(--sbb-color-night-light), var(--sbb-color-night-dark));
-  --sbb-color-violet: var(--sbb-color-violet-light);
-  --sbb-color-violet: light-dark(var(--sbb-color-violet-light), var(--sbb-color-violet-dark));
-  --sbb-color-pink: var(--sbb-color-pink-light);
-  --sbb-color-pink: light-dark(var(--sbb-color-pink-light), var(--sbb-color-pink-dark));
-  --sbb-color-autumn: var(--sbb-color-autumn-light);
-  --sbb-color-autumn: light-dark(var(--sbb-color-autumn-light), var(--sbb-color-autumn-dark));
-  --sbb-color-orange: var(--sbb-color-orange-light);
-  --sbb-color-orange: light-dark(var(--sbb-color-orange-light), var(--sbb-color-orange-dark));
-  --sbb-color-peach: var(--sbb-color-peach-light);
-  --sbb-color-peach: light-dark(var(--sbb-color-peach-light), var(--sbb-color-peach-dark));
-  --sbb-color-lemon: var(--sbb-color-lemon-light);
-  --sbb-color-lemon: light-dark(var(--sbb-color-lemon-light), var(--sbb-color-lemon-dark));
-  --sbb-color-brown: var(--sbb-color-brown-light);
-  --sbb-color-brown: light-dark(var(--sbb-color-brown-light), var(--sbb-color-brown-dark));
-  --sbb-color-green: var(--sbb-color-green-light);
-  --sbb-color-green: light-dark(var(--sbb-color-green-light), var(--sbb-color-green-dark));
-  --sbb-color-turquoise: var(--sbb-color-turquoise-light);
-  --sbb-color-turquoise: light-dark(
-    var(--sbb-color-turquoise-light),
-    var(--sbb-color-turquoise-dark)
-  );
-  --sbb-color-royal: var(--sbb-color-royal-light);
-  --sbb-color-royal: light-dark(var(--sbb-color-royal-light), var(--sbb-color-royal-dark));
-  --sbb-color-royal85: var(--sbb-color-royal85-light);
-  --sbb-color-royal85: light-dark(var(--sbb-color-royal85-light), var(--sbb-color-royal85-dark));
-  --sbb-color-royal125: var(--sbb-color-royal125-light);
-  --sbb-color-royal125: light-dark(var(--sbb-color-royal125-light), var(--sbb-color-royal125-dark));
-  --sbb-color-royal150: var(--sbb-color-royal150-light);
-  --sbb-color-royal150: light-dark(var(--sbb-color-royal150-light), var(--sbb-color-royal150-dark));
-  --sbb-color-primary: var(--sbb-color-red);
-  --sbb-color-primary85: var(--sbb-color-red85);
-  --sbb-color-primary125: var(--sbb-color-red125);
-  --sbb-color-primary150: var(--sbb-color-red150);
-  --sbb-color-error: var(--sbb-color-red125);
-  --sbb-color-error: light-dark(var(--sbb-color-red125), var(--sbb-color-red85));
-  --sbb-color-success: var(--sbb-color-green);
-  --sbb-color-warning: var(--sbb-color-peach);
-  --sbb-color-brand: var(--sbb-color-red);
-  --sbb-background-color-1: var(--sbb-color-white);
-  --sbb-background-color-1: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
-  --sbb-background-color-1-inverted: var(--sbb-color-midnight);
-  --sbb-background-color-1-inverted: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
-  --sbb-background-color-1-negative: var(--sbb-color-midnight);
-  --sbb-background-color-1-negative-inverted: var(--sbb-color-white);
-  --sbb-background-color-2: var(--sbb-color-white);
-  --sbb-background-color-2: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
-  --sbb-background-color-2-inverted: var(--sbb-color-charcoal);
-  --sbb-background-color-2-inverted: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
-  --sbb-background-color-2-negative: var(--sbb-color-charcoal);
-  --sbb-background-color-2-negative-inverted: var(--sbb-color-white);
-  --sbb-background-color-3: var(--sbb-color-milk);
-  --sbb-background-color-3: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
-  --sbb-background-color-3-inverted: var(--sbb-color-charcoal);
-  --sbb-background-color-3-inverted: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
-  --sbb-background-color-3-negative: var(--sbb-color-charcoal);
-  --sbb-background-color-3-negative-inverted: var(--sbb-color-milk);
-  --sbb-background-color-4: var(--sbb-color-cloud);
-  --sbb-background-color-4: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
-  --sbb-background-color-4-inverted: var(--sbb-color-iron);
-  --sbb-background-color-4-inverted: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
-  --sbb-background-color-4-negative: var(--sbb-color-iron);
-  --sbb-background-color-4-negative-inverted: var(--sbb-color-cloud);
-  --sbb-color-1: var(--sbb-color-midnight);
-  --sbb-color-1: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
-  --sbb-color-1-inverted: var(--sbb-color-white);
-  --sbb-color-1-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
-  --sbb-color-1-negative: var(--sbb-color-white);
-  --sbb-color-1-negative-inverted: var(--sbb-color-midnight);
-  --sbb-color-2: var(--sbb-color-charcoal);
-  --sbb-color-2: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
-  --sbb-color-2-inverted: var(--sbb-color-white);
-  --sbb-color-2-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
-  --sbb-color-2-negative: var(--sbb-color-white);
-  --sbb-color-2-negative-inverted: var(--sbb-color-charcoal);
-  --sbb-color-3: var(--sbb-color-charcoal);
-  --sbb-color-3: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
-  --sbb-color-3-inverted: var(--sbb-color-milk);
-  --sbb-color-3-inverted: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
-  --sbb-color-3-negative: var(--sbb-color-milk);
-  --sbb-color-3-negative-inverted: var(--sbb-color-charcoal);
-  --sbb-color-4: var(--sbb-color-iron);
-  --sbb-color-4: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
-  --sbb-color-4-inverted: var(--sbb-color-cloud);
-  --sbb-color-4-inverted: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
-  --sbb-color-4-negative: var(--sbb-color-cloud);
-  --sbb-color-4-negative-inverted: var(--sbb-color-iron);
-  --sbb-color-5: var(--sbb-color-smoke);
-  --sbb-color-6: var(--sbb-color-anthracite);
-  --sbb-color-6: light-dark(var(--sbb-color-anthracite), var(--sbb-color-platinum));
-  --sbb-color-6-inverted: var(--sbb-color-platinum);
-  --sbb-color-6-inverted: light-dark(var(--sbb-color-platinum), var(--sbb-color-anthracite));
-  --sbb-color-6-negative: var(--sbb-color-platinum);
-  --sbb-color-6-negative-inverted: var(--sbb-color-anthracite);
-  --sbb-border-color-1: var(--sbb-color-midnight);
-  --sbb-border-color-1: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
-  --sbb-border-color-1-inverted: var(--sbb-color-white);
-  --sbb-border-color-1-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
-  --sbb-border-color-1-negative: var(--sbb-color-white);
-  --sbb-border-color-1-negative-inverted: var(--sbb-color-midnight);
-  --sbb-border-color-2: var(--sbb-color-charcoal);
-  --sbb-border-color-2: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
-  --sbb-border-color-2-inverted: var(--sbb-color-white);
-  --sbb-border-color-2-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
-  --sbb-border-color-2-negative: var(--sbb-color-white);
-  --sbb-border-color-2-negative-inverted: var(--sbb-color-charcoal);
-  --sbb-border-color-3: var(--sbb-color-charcoal);
-  --sbb-border-color-3: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
-  --sbb-border-color-3-inverted: var(--sbb-color-milk);
-  --sbb-border-color-3-inverted: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
-  --sbb-border-color-3-negative: var(--sbb-color-milk);
-  --sbb-border-color-3-negative-inverted: var(--sbb-color-charcoal);
-  --sbb-border-color-4: var(--sbb-color-iron);
-  --sbb-border-color-4: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
-  --sbb-border-color-4-inverted: var(--sbb-color-cloud);
-  --sbb-border-color-4-inverted: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
-  --sbb-border-color-4-negative: var(--sbb-color-cloud);
-  --sbb-border-color-4-negative-inverted: var(--sbb-color-iron);
-  --sbb-border-color-5: var(--sbb-color-smoke);
-  --sbb-border-color-6: var(--sbb-color-anthracite);
-  --sbb-border-color-6: light-dark(var(--sbb-color-anthracite), var(--sbb-color-platinum));
-  --sbb-border-color-6-inverted: var(--sbb-color-platinum);
-  --sbb-border-color-6-inverted: light-dark(var(--sbb-color-platinum), var(--sbb-color-anthracite));
-  --sbb-border-color-6-negative: var(--sbb-color-platinum);
-  --sbb-border-color-6-negative-inverted: var(--sbb-color-anthracite);
-  --sbb-shadow-color-soft-1: color-mix(in srgb, var(--sbb-color-smoke) 5%, transparent);
-  --sbb-shadow-color-soft-1: light-dark(
-    color-mix(in srgb, var(--sbb-color-smoke) 5%, transparent),
-    color-mix(in srgb, var(--sbb-color-black) 15%, transparent)
-  );
-  --sbb-shadow-color-soft-2: color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent);
-  --sbb-shadow-color-soft-2: light-dark(
-    color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent),
-    color-mix(in srgb, var(--sbb-color-black) 20%, transparent)
-  );
-  --sbb-shadow-color-soft-1-negative: color-mix(in srgb, var(--sbb-color-black) 15%, transparent);
-  --sbb-shadow-color-soft-2-negative: color-mix(in srgb, var(--sbb-color-black) 20%, transparent);
-  --sbb-shadow-color-hard-1: color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent);
-  --sbb-shadow-color-hard-1: light-dark(
-    color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent),
-    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)
-  );
-  --sbb-shadow-color-hard-2: color-mix(in srgb, var(--sbb-color-smoke) 20%, transparent);
-  --sbb-shadow-color-hard-2: light-dark(
-    color-mix(in srgb, var(--sbb-color-smoke) 20%, transparent),
-    color-mix(in srgb, var(--sbb-color-black) 40%, transparent)
-  );
-  --sbb-shadow-color-hard-1-negative: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
-  --sbb-shadow-color-hard-2-negative: color-mix(in srgb, var(--sbb-color-black) 40%, transparent);
-  --sbb-shadow-level-3-shadow-1: var(--sbb-shadow-elevation-level-3-shadow-1-offset-x)
-    var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)
-    var(--sbb-shadow-elevation-level-3-shadow-1-blur)
-    var(--sbb-shadow-elevation-level-3-shadow-1-spread);
-  --sbb-shadow-level-3-shadow-2: var(--sbb-shadow-elevation-level-3-shadow-2-offset-x)
-    var(--sbb-shadow-elevation-level-3-shadow-2-offset-y)
-    var(--sbb-shadow-elevation-level-3-shadow-2-blur)
-    var(--sbb-shadow-elevation-level-3-shadow-2-spread);
-  --sbb-box-shadow-level-3-soft:
-    var(--sbb-shadow-level-3-shadow-2) var(--sbb-shadow-color-soft-2),
-    var(--sbb-shadow-level-3-shadow-1) var(--sbb-shadow-color-soft-1);
-  --sbb-box-shadow-level-3-soft-negative:
-    var(--sbb-shadow-level-3-shadow-2) var(--sbb-shadow-color-soft-2-negative),
-    var(--sbb-shadow-level-3-shadow-1) var(--sbb-shadow-color-soft-1-negative);
-  --sbb-box-shadow-level-3-hard:
-    var(--sbb-shadow-level-3-shadow-2) var(--sbb-shadow-color-hard-2),
-    var(--sbb-shadow-level-3-shadow-1) var(--sbb-shadow-color-hard-1);
-  --sbb-box-shadow-level-3-hard-negative:
-    var(--sbb-shadow-level-3-shadow-2) var(--sbb-shadow-color-hard-2-negative),
-    var(--sbb-shadow-level-3-shadow-1) var(--sbb-shadow-color-hard-1-negative);
-  --sbb-shadow-level-5-shadow-1: var(--sbb-shadow-elevation-level-5-shadow-1-offset-x)
-    var(--sbb-shadow-elevation-level-5-shadow-1-offset-y)
-    var(--sbb-shadow-elevation-level-5-shadow-1-blur)
-    var(--sbb-shadow-elevation-level-5-shadow-1-spread);
-  --sbb-shadow-level-5-shadow-2: var(--sbb-shadow-elevation-level-5-shadow-2-offset-x)
-    var(--sbb-shadow-elevation-level-5-shadow-2-offset-y)
-    var(--sbb-shadow-elevation-level-5-shadow-2-blur)
-    var(--sbb-shadow-elevation-level-5-shadow-2-spread);
-  --sbb-box-shadow-level-5-soft:
-    var(--sbb-shadow-level-5-shadow-2) var(--sbb-shadow-color-soft-2),
-    var(--sbb-shadow-level-5-shadow-1) var(--sbb-shadow-color-soft-1);
-  --sbb-box-shadow-level-5-soft-negative:
-    var(--sbb-shadow-level-5-shadow-2) var(--sbb-shadow-color-soft-2-negative),
-    var(--sbb-shadow-level-5-shadow-1) var(--sbb-shadow-color-soft-1-negative);
-  --sbb-box-shadow-level-5-hard:
-    var(--sbb-shadow-level-5-shadow-2) var(--sbb-shadow-color-hard-2),
-    var(--sbb-shadow-level-5-shadow-1) var(--sbb-shadow-color-hard-1);
-  --sbb-box-shadow-level-5-hard-negative:
-    var(--sbb-shadow-level-5-shadow-2) var(--sbb-shadow-color-hard-2-negative),
-    var(--sbb-shadow-level-5-shadow-1) var(--sbb-shadow-color-hard-1-negative);
-  --sbb-shadow-level-9-shadow-1: var(--sbb-shadow-elevation-level-9-shadow-1-offset-x)
-    var(--sbb-shadow-elevation-level-9-shadow-1-offset-y)
-    var(--sbb-shadow-elevation-level-9-shadow-1-blur)
-    var(--sbb-shadow-elevation-level-9-shadow-1-spread);
-  --sbb-shadow-level-9-shadow-2: var(--sbb-shadow-elevation-level-9-shadow-2-offset-x)
-    var(--sbb-shadow-elevation-level-9-shadow-2-offset-y)
-    var(--sbb-shadow-elevation-level-9-shadow-2-blur)
-    var(--sbb-shadow-elevation-level-9-shadow-2-spread);
-  --sbb-box-shadow-level-9-soft:
-    var(--sbb-shadow-level-9-shadow-2) var(--sbb-shadow-color-soft-2),
-    var(--sbb-shadow-level-9-shadow-1) var(--sbb-shadow-color-soft-1);
-  --sbb-box-shadow-level-9-soft-negative:
-    var(--sbb-shadow-level-9-shadow-2) var(--sbb-shadow-color-soft-2-negative),
-    var(--sbb-shadow-level-9-shadow-1) var(--sbb-shadow-color-soft-1-negative);
-  --sbb-box-shadow-level-9-hard:
-    var(--sbb-shadow-level-9-shadow-2) var(--sbb-shadow-color-hard-2),
-    var(--sbb-shadow-level-9-shadow-1) var(--sbb-shadow-color-hard-1);
-  --sbb-box-shadow-level-9-hard-negative:
-    var(--sbb-shadow-level-9-shadow-2) var(--sbb-shadow-color-hard-2-negative),
-    var(--sbb-shadow-level-9-shadow-1) var(--sbb-shadow-color-hard-1-negative);
-  --sbb-shadow-level-11-shadow-1: var(--sbb-shadow-elevation-level-11-shadow-1-offset-x)
-    var(--sbb-shadow-elevation-level-11-shadow-1-offset-y)
-    var(--sbb-shadow-elevation-level-11-shadow-1-blur)
-    var(--sbb-shadow-elevation-level-11-shadow-1-spread);
-  --sbb-shadow-level-11-shadow-2: var(--sbb-shadow-elevation-level-11-shadow-2-offset-x)
-    var(--sbb-shadow-elevation-level-11-shadow-2-offset-y)
-    var(--sbb-shadow-elevation-level-11-shadow-2-blur)
-    var(--sbb-shadow-elevation-level-11-shadow-2-spread);
-  --sbb-box-shadow-level-11-soft:
-    var(--sbb-shadow-level-11-shadow-2) var(--sbb-shadow-color-soft-2),
-    var(--sbb-shadow-level-11-shadow-1) var(--sbb-shadow-color-soft-1);
-  --sbb-box-shadow-level-11-soft-negative:
-    var(--sbb-shadow-level-11-shadow-2) var(--sbb-shadow-color-soft-2-negative),
-    var(--sbb-shadow-level-11-shadow-1) var(--sbb-shadow-color-soft-1-negative);
-  --sbb-box-shadow-level-11-hard:
-    var(--sbb-shadow-level-11-shadow-2) var(--sbb-shadow-color-hard-2),
-    var(--sbb-shadow-level-11-shadow-1) var(--sbb-shadow-color-hard-1);
-  --sbb-box-shadow-level-11-hard-negative:
-    var(--sbb-shadow-level-11-shadow-2) var(--sbb-shadow-color-hard-2-negative),
-    var(--sbb-shadow-level-11-shadow-1) var(--sbb-shadow-color-hard-1-negative);
-  --sbb-font-color-default: var(--sbb-color-2);
-  /* Focus outline */
-  --sbb-focus-outline-color-default: var(--sbb-color-black);
-  --sbb-focus-outline-color-dark: var(--sbb-color-white);
-  --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
-  --sbb-focus-outline-color: light-dark(
-    var(--sbb-focus-outline-color-default),
-    var(--sbb-focus-outline-color-dark)
-  );
-  --sbb-focus-outline-width: var(--sbb-border-width-1x);
-  /* Title */
-  --sbb-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);
-  /* Text */
-  --sbb-text-font-size-xl: var(--sbb-typo-scale-1-25x);
-  --sbb-text-font-size-l: var(--sbb-typo-scale-1-125x);
-  --sbb-text-font-size-m: var(--sbb-typo-scale-default);
-  --sbb-text-font-size-s: var(--sbb-typo-scale-0-875x);
-  --sbb-text-font-size-xs: var(--sbb-typo-scale-0-75x);
-  --sbb-text-font-size-xxs: var(--sbb-typo-scale-0-75x);
-  /* Spacing */
-  --sbb-spacing-responsive-xxxs: var(--sbb-spacing-responsive-xxxs-zero);
-  --sbb-spacing-responsive-xxs: var(--sbb-spacing-responsive-xxs-zero);
-  --sbb-spacing-responsive-xs: var(--sbb-spacing-responsive-xs-zero);
-  --sbb-spacing-responsive-s: var(--sbb-spacing-responsive-s-zero);
-  --sbb-spacing-responsive-m: var(--sbb-spacing-responsive-m-zero);
-  --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-zero);
-  --sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-zero);
-  --sbb-spacing-responsive-xxl: var(--sbb-spacing-responsive-xxl-zero);
-  /* Layout */
-  --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-zero);
-  --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-zero);
-  --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-zero);
-  /* Size */
-  --sbb-size-element-xxxs: var(--sbb-size-element-xxxs-zero);
-  --sbb-size-element-xxs: var(--sbb-size-element-xxs-zero);
-  --sbb-size-element-xs: var(--sbb-size-element-xs-zero);
-  --sbb-size-element-s: var(--sbb-size-element-s-zero);
-  --sbb-size-element-m: var(--sbb-size-element-m-zero);
-  --sbb-size-element-l: var(--sbb-size-element-l-zero);
-  --sbb-alert-background-color: var(--sbb-background-color-1-inverted);
-  --sbb-alert-border-radius: var(--sbb-border-radius-4x);
-  --sbb-alert-color: var(--sbb-color-aluminium);
-  --sbb-alert-color: light-dark(var(--sbb-color-aluminium), var(--sbb-color-anthracite));
-  --sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);
-  --sbb-alert-timing-function: ease-in;
-  --sbb-alert-icon-size: 1.25rem;
-  --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-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);
-  --sbb-breadcrumb-color-hover: light-dark(var(--sbb-color-charcoal), var(--sbb-color-smoke));
-  --sbb-breadcrumb-color-active: var(--sbb-color-anthracite);
-  --sbb-breadcrumb-color-active: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
-  --sbb-breadcrumb-font-size: var(--sbb-text-font-size-xs);
-  --sbb-breadcrumb-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-breadcrumb-group-wrap: nowrap;
-  --sbb-breadcrumb-group-visibility: hidden;
-  --sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-granite);
-  --sbb-breadcrumb-group-ellipsis-color: light-dark(
-    var(--sbb-color-granite),
-    var(--sbb-color-cloud)
-  );
-  --sbb-breadcrumb-group-ellipsis-background-color: transparent;
-  --sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);
-  --sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver);
-  --sbb-breadcrumb-group-ellipsis-border-color: light-dark(
-    var(--sbb-color-silver),
-    var(--sbb-color-anthracite)
-  );
-  --sbb-button-box-shadow: transparent 0 0;
-  --sbb-button-border-radius: var(--sbb-border-radius-infinity);
-  --sbb-button-border-width: var(--sbb-border-width-2x);
-  --sbb-button-border-disabled-style: dashed;
-  --sbb-button-border-disabled-width: var(--sbb-border-width-1x);
-  --sbb-button-color-disabled-background: var(--sbb-background-color-3);
-  --sbb-button-color-disabled-border: var(--sbb-border-color-5);
-  --sbb-button-color-disabled-text: var(--sbb-color-granite);
-  --sbb-button-color-disabled-text: light-dark(
-    var(--sbb-color-granite),
-    var(--sbb-color-aluminium)
-  );
-  --sbb-button-gap: var(--sbb-spacing-fixed-2x);
-  --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-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-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);
-  --sbb-button-shadow-2-blur: var(--sbb-shadow-elevation-level-3-shadow-2-blur);
-  --sbb-button-transition-easing-function: var(--sbb-animation-easing);
-  --sbb-mini-button-color-text: var(--sbb-color-3);
-  --sbb-mini-button-color-default-background: transparent;
-  --sbb-mini-button-color-hover-background: var(--sbb-background-color-3);
-  --sbb-mini-button-color-active-background: var(--sbb-background-color-4);
-  --sbb-mini-button-color-disabled-background: var(--sbb-background-color-3);
-  --sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);
-  --sbb-mini-button-color-disabled-text: var(--sbb-color-granite);
-  --sbb-mini-button-color-disabled-text: light-dark(
-    var(--sbb-color-granite),
-    var(--sbb-color-smoke)
-  );
-  --sbb-mini-button-border-radius: var(--sbb-border-radius-infinity);
-  --sbb-mini-button-transition-easing-function: var(--sbb-animation-easing);
-  --sbb-mini-button-group-background: var(--sbb-background-color-1);
-  --sbb-mini-button-group-border-color: var(--sbb-border-color-4-inverted);
-  --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-divider-height: var(--sbb-size-icon-ui-small);
-  --sbb-mini-button-group-divider-padding: var(--sbb-spacing-fixed-1x);
-  --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-m);
-  --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-m);
-  --sbb-calendar-cell-background-color: transparent;
-  --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-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-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-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-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);
-  --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);
-  --sbb-card-badge-border-color: transparent;
-  --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x);
-  --sbb-card-badge-border-width: var(--sbb-border-width-1x);
-  --sbb-card-badge-border-radius: var(--sbb-border-radius-4x);
-  --sbb-card-badge-skew: skew(16deg, 0deg);
-  --sbb-carousel-background-color: var(--sbb-background-color-1);
-  --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-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);
-  --sbb-chip-border-color: var(--sbb-border-color-4-inverted);
-  --sbb-chip-border-radius: var(--sbb-border-radius-2x);
-  --sbb-chip-color: var(--sbb-color-granite);
-  --sbb-chip-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
-  --sbb-chip-color-hover: var(--sbb-color-2);
-  --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-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-chip-group-input-min-width: 9.375rem;
-  --_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: var(--_sbb-chip-group-margin-block-base-lm);
-  --sbb-chip-group-margin-block-no-label-not-empty: var(--_sbb-chip-group-margin-block-without-label-m);
-  --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-with-label-m);
-  --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-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-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);
-  --sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
-  --sbb-dialog-color-negative: var(--sbb-color-2-negative);
-  --sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
-  --sbb-dialog-width: auto;
-  --sbb-dialog-max-width: 100%;
-  --sbb-dialog-height: auto;
-  --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
-  --sbb-dialog-inset-block: 0 auto;
-  --sbb-dialog-inset-inline: 0 auto;
-  --sbb-dialog-border-radius: var(--sbb-border-radius-8x);
-  --sbb-dialog-animation-easing: ease;
-  --sbb-dialog-pointer-events: none;
-  --sbb-dialog-backdrop-visibility: hidden;
-  --sbb-dialog-backdrop-pointer-events: none;
-  --sbb-dialog-backdrop-color: transparent;
-  --sbb-dialog-actions-border-color: var(--sbb-background-color-4);
-  --sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
-  --sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
-  --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-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-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-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-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-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-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);
-  --sbb-flip-card-button-dimensions: var(--sbb-button-min-height-size-s);
-  --sbb-flip-card-padding: var(--sbb-spacing-responsive-s);
-  --sbb-flip-card-padding-block-end: var(--sbb-spacing-responsive-xs);
-  --sbb-flip-card-min-height: 17.5rem;
-  --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
-  --sbb-footer-background-color: var(--sbb-background-color-3);
-  --sbb-footer-clock-width: 4.75rem;
-  --sbb-footer-color: var(--sbb-color-granite);
-  --sbb-footer-color: light-dark(var(--sbb-color-granite), var(--sbb-color-white));
-  --sbb-footer-font-size: var(--sbb-text-font-size-s);
-  --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-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;
-  --sbb-form-field-border-radius: var(--sbb-border-radius-4x);
-  --sbb-form-field-border-width: var(--sbb-border-width-1x);
-  --sbb-form-field-color: var(--sbb-color-3);
-  --sbb-form-field-label-color: var(--sbb-color-metal);
-  --sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
-  --sbb-form-field-prefix-color: var(--sbb-color-metal);
-  --sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
-  --sbb-form-field-text-color: var(--sbb-color-3);
-  --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-form-field-input-margin-block-end: 0;
-  --sbb-header-background: var(--sbb-background-color-1);
-  --sbb-header-box-shadow: var(--sbb-box-shadow-level-9-soft);
-  --sbb-header-inset-inline-end: 0;
-  --sbb-header-position: fixed;
-  --sbb-header-height-s: 3.25rem;
-  --sbb-header-height-m: var(--sbb-spacing-fixed-14x);
-  --sbb-header-height: var(--sbb-header-height-m);
-  --sbb-header-action-color: var(--sbb-color-1);
-  --sbb-header-action-background-color: transparent;
-  --sbb-header-action-min-height-s: var(--sbb-size-element-xs);
-  --sbb-header-action-min-height-m: var(--sbb-size-element-s);
-  --sbb-header-action-min-height: var(--sbb-header-action-min-height-m);
-  --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-m);
-  --sbb-header-action-transition-easing: var(--sbb-animation-easing);
-  --sbb-header-action-border-color: transparent;
-  --sbb-header-action-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-header-action-icon-dimension: var(--sbb-size-icon-ui-small);
-  --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-environment-background-color: var(--sbb-color-granite);
-  --sbb-header-environment-color: var(--sbb-color-1-negative);
-  --sbb-header-environment-size: 2.375rem;
-  --sbb-header-environment-rotate: 45deg;
-  --sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
-  --sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
-  --sbb-lead-container-background-color: var(--sbb-background-color-1);
-  --sbb-lead-container-image-ratio: 2 / 1;
-  --sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);
-  --sbb-lead-container-content-padding-block: var(--sbb-spacing-responsive-l);
-  --sbb-lead-container-padding-block: 0 var(--sbb-spacing-responsive-l);
-  --sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
-  --sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
-  --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-loading-indicator-color: var(--sbb-color-primary);
-  --sbb-loading-indicator-window-element-rotation: 55.24deg;
-  --sbb-loading-indicator-window-height: 1.125rem;
-  --sbb-loading-indicator-window-element-width: 3.4375rem;
-  --sbb-loading-indicator-circle-color: var(--sbb-color-primary);
-  --sbb-loading-indicator-circle-padding: 0.125rem;
-  --sbb-loading-indicator-circle-background-color: var(--sbb-color-white);
-  --sbb-loading-indicator-circle-animated-width: 0.1875em;
-  --sbb-loading-indicator-circle-animated-height: 0.1875em;
-  --sbb-loading-indicator-circle-animated-border-radius: 50%;
-  --sbb-logo-panel-color: var(--sbb-color-brand);
-  --sbb-logo-signet-color: var(--sbb-color-white);
-  --sbb-logo-word-mark-color: var(--sbb-color-black);
-  --sbb-logo-word-mark-color: light-dark(var(--sbb-color-black), var(--sbb-color-white));
-  --sbb-logo-aspect-ratio: 454 / 48;
-  --sbb-map-container-map-height-zero: 18.4375rem;
-  --sbb-map-container-map-height-small: 20rem;
-  --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);
-  --sbb-menu-action-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-menu-action-color: var(--sbb-color-2-inverted);
-  --sbb-menu-action-content-padding-inline: var(--sbb-spacing-fixed-2x);
-  --sbb-menu-action-content-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-menu-action-forced-color-border-color: CanvasText;
-  --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
-  --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
-  --sbb-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-navigation-grid-column: 1 / -1;
-  --sbb-navigation-animation-easing: ease-in;
-  --sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);
-  --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);
-  --sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);
-  --sbb-navigation-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 70%, transparent);
-  --sbb-navigation-backdrop-animation-name: backdrop-open;
-  --sbb-navigation-background-color: var(--sbb-background-color-1-negative);
-  --sbb-navigation-color: var(--sbb-color-1-negative);
-  --sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);
-  --sbb-navigation-expanded-width: 100%;
-  --sbb-navigation-inset: 0 auto auto 0;
-  --sbb-navigation-translate: -100% 0;
-  --sbb-navigation-content-gap: var(--sbb-spacing-responsive-xxl);
-  --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;
-  --sbb-navigation-marker-border: var(--sbb-border-width-1x);
-  --sbb-navigation-marker-padding-inline-start: var(--sbb-spacing-fixed-6x);
-  --sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-heading);
-  --sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);
-  --sbb-navigation-marker-font-size: var(--sbb-text-font-size-xl);
-  --sbb-navigation-marker-letter-spacing: var(--sbb-typo-letter-spacing-heading);
-  --sbb-navigation-marker-line-height: var(--sbb-typo-line-height-heading);
-  --sbb-navigation-section-column: 1 / -1;
-  --sbb-navigation-section-position: fixed;
-  --sbb-navigation-section-pointer-events: none;
-  --sbb-navigation-section-animation-easing: ease-out;
-  --sbb-navigation-section-padding-inline: var(--sbb-layout-base-offset-responsive);
-  --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-l);
-  --sbb-navigation-section-translate: 100%;
-  --sbb-navigation-section-content-padding-inline-start: var(--sbb-spacing-fixed-12x);
-  --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-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-close-wrapper-gap: var(--sbb-spacing-responsive-xxs);
-  --sbb-option-color: var(--sbb-color-3);
-  --sbb-option-background-color: inherit;
-  --sbb-option-background-color-hover: var(--sbb-color-milk);
-  --sbb-option-background-color-hover: light-dark(var(--sbb-color-milk), var(--sbb-color-midnight));
-  --sbb-option-background-color-active: var(--sbb-background-color-4);
-  --sbb-option-disabled-border-color: var(--sbb-color-graphite);
-  --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-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: inherit;
-  --sbb-option-focus-outline-color: transparent;
-  --sbb-option-focus-outline-inset: 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-inline: var(--sbb-spacing-responsive-xxxs);
-  --sbb-option-hint-font-size: var(--sbb-text-font-size-xxs);
-  --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-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-overlay-background-color: var(--sbb-background-color-3);
-  --sbb-overlay-display: none;
-  --sbb-overlay-height: 100%;
-  --sbb-overlay-inset: 0 auto auto 0;
-  --sbb-overlay-animation-easing: ease;
-  --sbb-overlay-pointer-events: none;
-  --sbb-overlay-container-display: none;
-  --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-m);
-  --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-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-popover-animation-easing: ease-out;
-  --sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-radio-button-label-color: var(--sbb-color-3);
-  --sbb-radio-button-background-color: var(--sbb-background-color-1);
-  --sbb-radio-button-border-width: var(--sbb-border-width-1x);
-  --sbb-radio-button-border-style: solid;
-  --sbb-radio-button-border-color: var(--sbb-border-color-5);
-  --sbb-radio-button-cursor: var(--sbb-cursor-pointer);
-  --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-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-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-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);
-  --sbb-selection-expansion-panel-background: var(--sbb-selection-panel-background-default);
-  --sbb-selection-expansion-panel-border-color: var(--sbb-selection-panel-border-color-default);
-  --sbb-selection-expansion-panel-border-width: var(--sbb-selection-panel-border-width-default);
-  --sbb-selection-expansion-panel-content-visibility: visible;
-  --sbb-selection-expansion-panel-content-padding-block-start: var(--sbb-spacing-responsive-xxs);
-  --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-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);
-  --sbb-sidebar-border-radius: var(--sbb-border-radius-8x);
-  --sbb-sidebar-margin: var(--sbb-spacing-fixed-3x);
-  --sbb-sidebar-title-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-signet-background-color: var(--sbb-color-brand);
-  --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;
-  --sbb-slider-knob-border-size: 0.1875rem;
-  --sbb-slider-knob-border-style: solid;
-  --sbb-slider-knob-color: var(--sbb-background-color-1);
-  --sbb-slider-knob-border-color: var(--sbb-color-primary);
-  --sbb-slider-icon-color: var(--sbb-color-1);
-  --sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);
-  --sbb-slider-selected-line-disabled-color: light-dark(
-    var(--sbb-color-smoke),
-    var(--sbb-color-cement)
-  );
-  --sbb-slider-line-color: var(--sbb-border-color-5);
-  --sbb-slider-selected-line-color: var(--sbb-color-primary);
-  --sbb-slider-line-disabled-color: var(--sbb-color-graphite);
-  --sbb-slider-line-disabled-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite));
-  --sbb-slider-width: 25rem;
-  --sbb-slider-min-width: 9.375rem;
-  --sbb-slider-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-slider-padding-block: 0.125rem;
-  --sbb-status-color: var(--sbb-color-4);
-  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-status-font-size: var(--sbb-text-font-size-s);
-  --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-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-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-m);
-  --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-m);
-  --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-m);
-  --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-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-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-weight: bold;
-  --sbb-tab-label-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-tab-label-outline-border-radius: var(--sbb-border-radius-2x);
-  --sbb-tab-label-amount-color: var(--sbb-color-metal);
-  --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);
-  --sbb-tag-border-style: solid;
-  --sbb-tag-border-width: var(--sbb-border-width-1x);
-  --sbb-tag-border-radius: var(--sbb-border-radius-infinity);
-  --sbb-tag-gap: var(--sbb-spacing-fixed-2x);
-  --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-s: var(--sbb-size-element-xxxs);
-  --sbb-tag-height-m: var(--sbb-size-element-xs);
-  --sbb-tag-height: var(--sbb-tag-height-m);
-  --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-m);
-  --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));
-  --sbb-teaser-flex-direction: row;
-  --sbb-teaser-align-items: center;
-  --sbb-teaser-font-size: var(--sbb-text-font-size-s);
-  --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
-  --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
-  --sbb-teaser-image-width: 18.75rem;
-  --sbb-teaser-hero-link-font-weight: 400;
-  --sbb-panel-width: 13.9375rem;
-  --sbb-panel-inner-height: 10.4375rem;
-  --sbb-panel-triangle-height: 2.0625rem;
-  --sbb-panel-line-height: var(--sbb-typo-line-height-heading);
-  --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
-  --sbb-panel-font-weight: 300;
-  --sbb-panel-color: var(--sbb-color-1-negative);
-  --sbb-panel-background-color: color-mix(in srgb, var(--sbb-color-primary) 90%, transparent);
-  --sbb-panel-background-color-hover: var(--sbb-color-primary);
-  --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
-  --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
-  --sbb-panel-animation-easing: var(--sbb-animation-easing);
-  --sbb-teaser-product-background-color: var(--sbb-color-cloud);
-  --sbb-teaser-product-background-color: light-dark(
-    var(--sbb-color-cloud),
-    var(--sbb-color-midnight)
-  );
-  --sbb-teaser-product-background-gradient-direction: to right;
-  --sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);
-  --sbb-teaser-product-min-height: 37.5rem;
-  --sbb-teaser-product-background-gradient-start: 25%;
-  --sbb-teaser-product-background-gradient-end: 75%;
-  --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-s);
-  --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-s);
-  --sbb-teaser-product-container-spacing: var(--sbb-spacing-responsive-l);
-  --sbb-teaser-product-content-color: var(--sbb-color-4);
-  --sbb-teaser-product-footer-color: var(--sbb-color-anthracite);
-  --sbb-teaser-product-footer-color: light-dark(
-    var(--sbb-color-anthracite),
-    var(--sbb-color-cloud)
-  );
-  --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-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
-    var(--sbb-border-color-4-inverted);
-  --sbb-timetable-form-details-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-timetable-form-details-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-timetable-form-details-padding-inline: var(--sbb-spacing-responsive-xxs);
-  --sbb-timetable-form-details-horizontal-divider-height: 1.5rem;
-  --sbb-timetable-form-field-route-icon-color: var(--sbb-color-2);
-  --sbb-timetable-form-field-route-icon-background-color: var(--sbb-background-color-1);
-  --sbb-timetable-form-field-route-via-icon-width: var(--sbb-size-icon-ui-small);
-  --sbb-timetable-form-field-route-via-after-dimension: 0.4375rem;
-  --sbb-timetable-occupancy-color: var(--sbb-color-2);
-  --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-height-s: var(--sbb-size-element-xxs);
-  --sbb-toggle-height-m: var(--sbb-size-element-m);
-  --sbb-toggle-height: var(--sbb-toggle-height-m);
-  --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-m);
-  --sbb-toggle-background-color: var(--sbb-background-color-4);
-  --sbb-toggle-background-inset: 0.125rem;
-  --sbb-toggle-border-radius: var(--sbb-border-radius-infinity);
-  --sbb-toggle-font-size: var(--sbb-text-font-size-m);
-  --sbb-toggle-grid-template-columns: auto auto;
-  --sbb-toggle-selected-option-border-width: var(--sbb-border-width-1x);
-  --sbb-toggle-selected-option-border-style: solid;
-  --sbb-toggle-selected-option-border-color: var(--sbb-border-color-5);
-  --sbb-toggle-selected-option-background-color: var(--sbb-background-color-1);
-  --sbb-toggle-option-color: var(--sbb-color-anthracite);
-  --sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
-  --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-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);
-  --sbb-tooltip-color: var(--sbb-color-2-inverted);
-  --sbb-tooltip-border-color: var(--sbb-background-color-1-inverted);
-  --sbb-tooltip-border-radius: var(--sbb-border-radius-8x);
-  --sbb-tooltip-font-size: var(--sbb-text-font-size-xs);
-  --sbb-tooltip-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-tooltip-min-width: var(--sbb-spacing-fixed-8x);
-  --sbb-tooltip-padding: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
-  --sbb-overlay-position-area: block-start;
-  --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-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);
-  --sbb-visual-checkbox-selection-color-disabled-negative: var(--sbb-color-2-negative);
-  --sbb-visual-checkbox-background-color: var(--sbb-background-color-1);
-  --sbb-visual-checkbox-background-color-negative: var(--sbb-background-color-1-negative);
-  --sbb-visual-checkbox-background-color-disabled: var(--sbb-background-color-3);
-  --sbb-visual-checkbox-background-color-negative-disabled: var(--sbb-background-color-3-negative);
-  --sbb-visual-checkbox-border-color: var(--sbb-border-color-5);
-  --sbb-visual-checkbox-border-color-disabled: var(--sbb-border-color-5);
-  --sbb-visual-checkbox-border-style: solid;
-  --sbb-visual-checkbox-border-style-disabled: dashed;
-  --sbb-visual-checkbox-border-width: var(--sbb-border-width-1x);
-  --sbb-visual-checkbox-cursor: var(--sbb-cursor-pointer);
-}
-@media (forced-colors: active) {
-  :root {
-    /* Focus outline */
-    --sbb-focus-outline-color-default: Highlight;
-    --sbb-focus-outline-color-dark: Highlight;
-    --sbb-focus-outline-width: var(--sbb-border-width-2x);
-    --sbb-alert-outline: var(--sbb-border-width-1x) solid CanvasText;
-    --sbb-alert-forced-color-border-radius: var(--sbb-alert-border-radius);
-    --sbb-breadcrumb-color: ButtonText;
-    --sbb-breadcrumb-color-active: Highlight;
-    --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-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;
-    --sbb-signet-background-color: ButtonText !important;
-    --sbb-signet-panel-color: ButtonText !important;
-    --sbb-signet-icon-color: Canvas !important;
-    --sbb-slider-selected-line-color: Highlight;
-    --sbb-slider-line-color: CanvasText;
-    --sbb-step-label-color: ButtonText;
-    --sbb-step-label-prefix-border-color: ButtonText;
-    --sbb-tag-amount-color: ButtonText;
-    --sbb-tag-background-color: Canvas !important;
-    --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-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;
-  }
-}
-: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);
-    /* Spacing */
-    --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-small);
-    --sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-small);
-    --sbb-spacing-responsive-xxl: var(--sbb-spacing-responsive-xxl-small);
-    /* Layout */
-    --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-small);
-    --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
-    --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
-    --sbb-alert-close-button-divider-display: block;
-    --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
-    --sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
-    --sbb-dialog-max-width: 90vw;
-    --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);
-  }
-}
-@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);
-    /* Text */
-    --sbb-text-font-size-xl: var(--sbb-typo-scale-1-5x);
-    --sbb-text-font-size-l: var(--sbb-typo-scale-1-25x);
-    --sbb-text-font-size-m: var(--sbb-typo-scale-1-125x);
-    --sbb-text-font-size-s: var(--sbb-typo-scale-default);
-    --sbb-text-font-size-xs: var(--sbb-typo-scale-0-875x);
-    /* Spacing */
-    --sbb-spacing-responsive-xxxs: var(--sbb-spacing-responsive-xxxs-large);
-    --sbb-spacing-responsive-xxs: var(--sbb-spacing-responsive-xxs-large);
-    --sbb-spacing-responsive-xs: var(--sbb-spacing-responsive-xs-large);
-    --sbb-spacing-responsive-s: var(--sbb-spacing-responsive-s-large);
-    --sbb-spacing-responsive-m: var(--sbb-spacing-responsive-m-large);
-    --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-large);
-    --sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-large);
-    --sbb-spacing-responsive-xxl: var(--sbb-spacing-responsive-xxl-large);
-    /* Layout */
-    --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-large);
-    --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-large);
-    --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-large);
-    /* Size */
-    --sbb-size-element-xxxs: var(--sbb-size-element-xxxs-large);
-    --sbb-size-element-xxs: var(--sbb-size-element-xxs-large);
-    --sbb-size-element-xs: var(--sbb-size-element-xs-large);
-    --sbb-size-element-s: var(--sbb-size-element-s-large);
-    --sbb-size-element-m: var(--sbb-size-element-m-large);
-    --sbb-size-element-l: var(--sbb-size-element-l-large);
-    --sbb-alert-icon-size: 1.75rem;
-    --sbb-alert-icon-size-l: 2.125rem;
-    --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-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-s: var(--sbb-spacing-fixed-14x);
-    --sbb-header-height-m: var(--sbb-spacing-fixed-24x);
-    --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;
-    --sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);
-    --sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);
-    --sbb-navigation-section-column: 5 / 13;
-    --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xl);
-    --sbb-navigation-section-padding-inline: var(--sbb-spacing-fixed-8x)
-      var(--sbb-layout-base-offset-responsive);
-    --sbb-navigation-section-position: relative;
-    --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;
-    --sbb-panel-font-size: var(--sbb-typo-scale-2x);
-    --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l) 0;
-    --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-xl);
-    --sbb-teaser-product-content-align-content: center;
-    --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-xs);
-    --sbb-teaser-product-footer-padding-block-end: var(--sbb-spacing-responsive-xs);
-    --sbb-teaser-product-footer-min-height: var(--sbb-teaser-product-container-spacing);
-    --sbb-time-input-max-width: 4.0625rem;
-  }
-}
-@media (min-width: calc(90rem)) {
-  :root {
-    /* Title */
-    --sbb-heading-font-size-1: var(--sbb-typo-scale-4x);
-    /* Spacing */
-    --sbb-spacing-responsive-m: var(--sbb-spacing-responsive-m-ultra);
-    --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-ultra);
-    --sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-ultra);
-    --sbb-spacing-responsive-xxl: var(--sbb-spacing-responsive-xxl-ultra);
-    /* Layout */
-    --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-ultra);
-    --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-ultra);
-    --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-ultra);
-    --sbb-lead-container-image-ratio: 21 / 9;
-    --sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius);
-    --sbb-map-container-sidebar-width: 30rem;
-    --sbb-navigation-grid-column: 1 / 6;
-    --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl);
-    --sbb-navigation-section-column: 6 / 17;
-    --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xxl)
-      var(--sbb-spacing-responsive-l);
-    --sbb-panel-width: 26.75rem;
-    --sbb-panel-inner-height: 20.02375rem;
-    --sbb-panel-triangle-height: 3.956875rem;
-    --sbb-panel-font-size: var(--sbb-typo-scale-2-5x);
-    --sbb-panel-line-height: 1.2;
-  }
-}
-@font-face {
-  font-family: SBB;
-  src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Roman.woff2") format("woff2");
-  font-display: fallback;
-  font-weight: 400;
-}
-@font-face {
-  font-family: SBB;
-  src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Bold.woff2") format("woff2");
-  font-display: swap;
-  font-weight: 700;
-}
-@font-face {
-  font-family: SBB;
-  src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Light.woff2") format("woff2");
-  font-display: swap;
-  font-weight: 300;
-}
-sbb-breadcrumb-group:not(:defined) {
-  display: block;
-  height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
-  overflow: hidden;
-}
-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;
-  border-radius: var(--sbb-container-background-border-radius);
-  height: 100%;
-  position: absolute;
-}
-sbb-dialog:not(:has(> sbb-dialog-title)) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):not(:has(> * > sbb-dialog-title)) > * > sbb-dialog-close-button {
-  position: absolute;
-  z-index: 1;
-}
-sbb-dialog:has(> sbb-dialog-title[visual-level="3"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="3"]) > * > sbb-dialog-close-button {
-  --_sbb-dialog-title-size: var(--sbb-heading-font-size-3);
-}
-sbb-dialog:has(> sbb-dialog-title[visual-level="5"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="5"]) > * > sbb-dialog-close-button {
-  --_sbb-dialog-title-size: var(--sbb-heading-font-size-5);
-}
-sbb-dialog:has(> sbb-dialog-title) > sbb-dialog-content, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title) > * > sbb-dialog-content {
-  padding-block-start: var(--sbb-spacing-fixed-1x);
-}
-sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-close-button) > * > sbb-dialog-title {
-  padding-inline-end: 0;
-}
-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;
-  --sbb-image-object-fit: cover;
-  border-radius: 0;
-  display: block;
-  height: 100%;
-}
-:is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  outline: none;
-  border: none;
-  background-color: transparent;
-  padding: 0;
-  appearance: none;
-  display: flex;
-  outline: none !important;
-  overflow: var(--sbb-form-field-overflow, hidden);
-  width: 100%;
-  box-sizing: border-box;
-  color: var(--sbb-form-field-text-color);
-  -webkit-text-fill-color: var(--sbb-form-field-text-color);
-  opacity: 1;
-  background-color: transparent;
-  font-size: var(--sbb-form-field-input-text-size) !important;
-  letter-spacing: var(--sbb-typo-letter-spacing-text) !important;
-  font-family: var(--sbb-typo-font-family) !important;
-  line-height: var(--sbb-typo-line-height-text) !important;
-}
-:is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)::placeholder {
-  color: var(--sbb-color-5);
-  -webkit-text-fill-color: var(--sbb-color-5);
-  opacity: 1;
-}
-:is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(input, select, textarea, sbb-select)::placeholder, :is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(sbb-date-input, sbb-time-input)::after {
-  color: transparent !important;
-  -webkit-text-fill-color: transparent !important;
-}
-@media (forced-colors: active) {
-  :is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(input, select, textarea, sbb-select)::placeholder, :is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(sbb-date-input, sbb-time-input)::after {
-    color: Canvas !important;
-    -webkit-text-fill-color: Canvas !important;
-  }
-}
-:is(sbb-form-field, sbb-timetable-form-field):not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
-  color: var(--sbb-color-granite);
-  color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  -webkit-text-fill-color: var(--sbb-color-granite);
-  -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-}
-:is(sbb-form-field, sbb-timetable-form-field) :where(select) {
-  vertical-align: middle;
-}
-: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) {
-  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) {
-  margin-block-end: -0.125rem;
-}
-:is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
-  --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)
-  );
-}
-:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar {
-  width: var(--sbb-scrollbar-width);
-  height: var(--sbb-scrollbar-width);
-  background-color: var(--sbb-scrollbar-track-color, transparent);
-}
-:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-corner {
-  background-color: var(--sbb-scrollbar-track-color, transparent);
-}
-:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-thumb {
-  background-color: var(--sbb-scrollbar-color, currentcolor);
-  border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;
-  border-radius: var(--sbb-border-radius-4x);
-  background-clip: padding-box;
-}
-:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-thumb:hover {
-  background-color: var(--sbb-scrollbar-color-hover, currentcolor);
-  border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
-}
-:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-button, :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-corner {
-  display: none;
-}
-@supports not selector(::-webkit-scrollbar) {
-  :is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
-    scrollbar-width: var(--sbb-scrollbar-width-firefox);
-    scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
-  }
-}
-:is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
-  position: relative;
-  resize: none;
-  white-space: break-spaces;
-  overflow-y: auto;
-  min-height: calc(var(--sbb-typo-line-height-text) * 1em);
-  height: 100%;
-}
-:is(sbb-form-field, sbb-timetable-form-field)[size=l] :where(textarea) {
-  padding-block-end: 0.34375rem;
-}
-:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea) {
-  --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-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
-:is(:state(interacted),[state--interacted]):invalid,
-.ng-touched.ng-invalid,
-.sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)) {
-  --sbb-form-field-border-color: var(--sbb-color-error);
-  --sbb-form-field-text-color: var(--sbb-color-error);
-}
-:is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
-:is(:state(interacted),[state--interacted]):invalid,
-.ng-touched.ng-invalid,
-.sbb-invalid))[negative], :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid))[negative] {
-  --sbb-form-field-border-color: var(--sbb-color-red85);
-  --sbb-form-field-text-color: var(--sbb-color-red85);
-}
-@media (forced-colors: active) {
-  :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
-  :is(:state(interacted),[state--interacted]):invalid,
-  .ng-touched.ng-invalid,
-  .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)) {
-    --sbb-form-field-border-color: LinkText !important;
-    --sbb-form-field-text-color: LinkText !important;
-  }
-}
-:root.sbb-form-field-required-highlight :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
-:is(:state(disabled),[state--disabled])):has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required]), :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
-:is(:state(disabled),[state--disabled])).sbb-form-field-required-highlight {
-  --sbb-form-field-background-color: color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1));
-  --sbb-form-field-background-color: light-dark(
-    color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1)),
-    color-mix(in srgb, var(--sbb-color-peach) 10%, var(--sbb-background-color-1))
-  );
-}
-:root.sbb-form-field-required-highlight :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
-:is(:state(disabled),[state--disabled])):has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required])[negative], :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
-:is(:state(disabled),[state--disabled])).sbb-form-field-required-highlight[negative] {
-  --sbb-form-field-background-color: color-mix(
-    in srgb,
-    var(--sbb-color-peach) 10%,
-    var(--sbb-background-color-1-negative)
-  );
-}
-@media (forced-colors: active) {
-  :root.sbb-form-field-required-highlight :is(sbb-form-field, sbb-timetable-form-field):not(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled])):has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required]) label::after, :is(sbb-form-field, sbb-timetable-form-field):not(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled])).sbb-form-field-required-highlight label::after {
-    content: " *";
-    color: Highlight;
-  }
-}
-:root:has(sbb-header[size=s]) {
-  --sbb-header-height: var(--sbb-header-height-s);
-}
-sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
-  margin-block-start: var(--sbb-header-height);
-}
-.sbb-header-info {
-  display: flex;
-  padding-inline: var(--sbb-spacing-fixed-4x);
-  gap: var(--sbb-spacing-fixed-1x);
-  align-items: baseline;
-  color: var(--sbb-color-1);
-  font-size: var(--sbb-text-font-size-xs);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-}
-.sbb-header-info strong + * {
-  font-size: var(--sbb-text-font-size-xxs);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  color: var(--sbb-color-granite);
-  color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-}
-sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
-  --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
-}
-sbb-icon-sidebar-content + sbb-icon-sidebar {
-  border-start-end-radius: 0;
-  border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
-}
-sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
-sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
-  --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
-  --sbb-image-object-fit: cover;
-  border-radius: var(--sbb-lead-container-image-border-radius);
-}
-sbb-message > [slot=image]:is(sbb-image, img),
-sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  border-radius: var(--sbb-message-image-border-radius);
-}
-.sbb-options-nowrap {
-  --sbb-option-text-overflow: ellipsis;
-  --sbb-option-overflow: hidden;
-  --sbb-option-white-space: nowrap;
-}
-.sbb-select-trigger {
-  width: 100%;
-  height: var(--sbb-size-element-xs);
-}
-sbb-form-field .sbb-select-trigger {
-  top: 0;
-}
-sbb-sidebar:has(sbb-sidebar-title) {
-  --_sbb-sidebar-padding-block-start: 0;
-}
-sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
-  position: absolute;
-}
-sbb-sidebar-container:has(> sbb-sidebar:is(:state(skip-animation),[state--skip-animation])) {
-  --sbb-sidebar-container-animation-duration: 0s;
-}
-sbb-sidebar-container:has(> sbb-sidebar:is([mode=over], :is(:state(mode-over-forced),[state--mode-over-forced])):is(:is(:state(state-opening),[state--state-opening]),
-:is(:state(state-opened),[state--state-opened]))) {
-  --sbb-sidebar-container__backdrop-visibility: visible;
-  --sbb-sidebar-container-backdrop-opacity: 0.4;
-}
-sbb-sidebar-container:is(:has(> sbb-sidebar[position=end]:is(:is(:state(state-closing),[state--state-closing]),
-:is(:state(state-closed),[state--state-closed]),
-[mode=over],
-:is(:state(mode-over-forced),[state--mode-over-forced]))),
-:not(:has(> sbb-sidebar[position=end]))) > sbb-sidebar-content {
-  --_sbb-sidebar-content-margin-inline-end: 0;
-}
-sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(state-closing),[state--state-closing]),
-:is(:state(state-closed),[state--state-closed]),
-[mode=over],
-:is(:state(mode-over-forced),[state--mode-over-forced]))),
-:not(:has(> sbb-sidebar:not([position=end])))) > sbb-sidebar-content {
-  --_sbb-sidebar-content-margin-inline-start: 0;
-}
-sbb-tab-nav-bar .sbb-tab-amount {
-  margin: 0;
-  color: var(--sbb-tab-label-amount-color);
-  font-weight: normal;
-  text-decoration: var(--sbb-tab-label-text-decoration);
-}
-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);
-}
-sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  --sbb-image-aspect-ratio: 1 / 1;
-  border-radius: 0;
-}
-@media (min-width: calc(37.5rem)) {
-  sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    --sbb-image-aspect-ratio: 16 / 9;
-  }
-}
-sbb-teaser-hero img:not(.sbb-figure-overlap-image) {
-  display: block;
-  align-self: stretch;
-  width: 100%;
-}
-:is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  border-radius: 0;
-  --sbb-image-object-fit: cover;
-  --sbb-image-aspect-ratio: 16 / 9;
-}
-:is(sbb-teaser-product, sbb-teaser-product-static) img:not(.sbb-figure-overlap-image) {
-  place-self: stretch;
-}
-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-dark {
-  color-scheme: dark;
-}
-.sbb-light {
-  color-scheme: light;
-}
-.sbb-light-dark {
-  color-scheme: light dark;
-}
-html {
-  font-family: var(--sbb-typo-font-family);
-  font-weight: normal;
-  line-height: var(--sbb-typo-line-height-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  font-size: var(--sbb-text-font-size);
-  color-scheme: light dark;
-  color: var(--sbb-font-color-default);
-  background-color: var(--sbb-background-color-1);
-}
-::placeholder {
-  color: var(--sbb-color-5);
-  -webkit-text-fill-color: var(--sbb-color-5);
-  opacity: 1;
-}
-:is(sbb-autocomplete,
-sbb-autocomplete-grid,
-sbb-datepicker,
-sbb-dialog,
-sbb-menu,
-sbb-navigation,
-sbb-navigation-section,
-sbb-overlay,
-sbb-popover,
-sbb-select,
-sbb-skiplink-list,
-sbb-toast,
-sbb-tooltip):not(:defined) {
-  display: none;
-}
-[popover]:where(sbb-autocomplete,
-sbb-autocomplete-grid,
-sbb-datepicker,
-sbb-dialog,
-sbb-menu,
-sbb-navigation,
-sbb-overlay,
-sbb-popover,
-sbb-toast) {
-  margin: 0;
-  padding: 0;
-  border: none;
-  width: auto;
-  height: auto;
-  background-color: transparent;
-  color: inherit;
-  pointer-events: none;
-}
-:is(sbb-card, sbb-flip-card) .sbb-action {
-  pointer-events: all;
-}
-sbb-title + p {
-  margin-block-start: 0;
-}
-img {
-  aspect-ratio: var(--sbb-image-aspect-ratio);
-  object-fit: var(--sbb-image-object-fit);
-  object-position: var(--sbb-image-object-position);
-}
-:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
-  --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
-  --sbb-teaser-image-animation-duration: var(
-    --sbb-disable-animation-duration,
-    var(--sbb-animation-duration-4x)
-  );
-  --sbb-teaser-image-animation-easing: var(--sbb-animation-easing);
-}
-@media (any-hover: hover) {
-  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product):hover {
-    --sbb-teaser-image-brightness: var(--sbb-teaser-image-brightness-hover);
-  }
-}
-:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  will-change: filter;
-  filter: brightness(var(--sbb-teaser-image-brightness, 1));
-  transition: filter var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
-}
-.sbb-overlay-outlet {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-}