@charset "UTF-8";
sub, sup {
  font-size: 60%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

html {
  text-size-adjust: 100%;
  tab-size: 4;
}

body {
  margin: 0;
}

hr {
  height: 0;
  color: inherit;
}

abbr[title] {
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

table {
  text-indent: 0;
  border-color: inherit;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
select {
  text-transform: none;
}

button,
:is(button, input):where([type=button], [type=reset], [type=submit]) {
  appearance: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  appearance: none;
}

::-webkit-file-upload-button {
  appearance: auto;
  font: inherit;
}

summary {
  display: list-item;
}

/**
 * Do not edit directly, this file was auto-generated.
 */
:host {
  display: block;
}

:host([orientation=vertical]) {
  --sbb-checkbox-group-orientation: column;
  --sbb-checkbox-group-width: 100%;
  --sbb-checkbox-group-checkbox-width: 100%;
}

:host(:is(:state(has-panel), [state--has-panel])) {
  --sbb-checkbox-group-width: 100%;
  --sbb-checkbox-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
  --sbb-checkbox-group-checkbox-flex: auto;
}

@media (min-width: 0rem) {
  :host([orientation=vertical][horizontal-from=zero]) {
    --sbb-checkbox-group-orientation: row;
    --sbb-checkbox-group-checkbox-width: auto;
    --sbb-checkbox-group-checkbox-width: initial;
  }
  :host([orientation=vertical][horizontal-from=zero]:not(:is(:state(has-panel), [state--has-panel]))) {
    --sbb-checkbox-group-width: max-content;
  }
}
@media (min-width: 37.5rem) {
  :host([orientation=vertical][horizontal-from=small]) {
    --sbb-checkbox-group-orientation: row;
    --sbb-checkbox-group-checkbox-width: auto;
    --sbb-checkbox-group-checkbox-width: initial;
  }
  :host([orientation=vertical][horizontal-from=small]:not(:is(:state(has-panel), [state--has-panel]))) {
    --sbb-checkbox-group-width: max-content;
  }
}
@media (min-width: 64rem) {
  :host([orientation=vertical][horizontal-from=large]) {
    --sbb-checkbox-group-orientation: row;
    --sbb-checkbox-group-checkbox-width: auto;
    --sbb-checkbox-group-checkbox-width: initial;
  }
  :host([orientation=vertical][horizontal-from=large]:not(:is(:state(has-panel), [state--has-panel]))) {
    --sbb-checkbox-group-width: max-content;
  }
}
@media (min-width: 90rem) {
  :host([orientation=vertical][horizontal-from=ultra]) {
    --sbb-checkbox-group-orientation: row;
    --sbb-checkbox-group-checkbox-width: auto;
    --sbb-checkbox-group-checkbox-width: initial;
  }
  :host([orientation=vertical][horizontal-from=ultra]:not(:is(:state(has-panel), [state--has-panel]))) {
    --sbb-checkbox-group-width: max-content;
  }
}
.sbb-checkbox-group {
  display: flex;
  flex-direction: var(--sbb-checkbox-group-orientation);
  gap: var(--sbb-checkbox-group-gap);
  align-items: flex-start;
  width: var(--sbb-checkbox-group-width);
}

:host(:is(:state(slotted-error), [state--slotted-error])) .sbb-checkbox-group {
  margin-block-end: var(--sbb-spacing-fixed-1x);
}

::slotted(:is(sbb-checkbox, sbb-checkbox-panel)) {
  width: var(--sbb-checkbox-group-checkbox-width);
}

::slotted(sbb-checkbox-panel) {
  flex: var(--sbb-checkbox-group-checkbox-flex);
}

:host {
  display: block;
}

:host([orientation=vertical]) {
  --sbb-radio-button-group-orientation: column;
  --sbb-radio-button-group-width: 100%;
  --sbb-radio-button-group-radio-button-width: 100%;
}

:host(:is(:state(has-panel), [state--has-panel])) {
  --sbb-radio-button-group-width: 100%;
  --sbb-radio-button-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
  --sbb-radio-button-group-radio-button-flex: auto;
}

@media (min-width: 0rem) {
  :host([orientation=vertical][horizontal-from=zero]) {
    --sbb-radio-button-group-orientation: row;
    --sbb-radio-button-group-radio-button-width: auto;
    --sbb-radio-button-group-radio-button-width: initial;
  }
  :host([orientation=vertical][horizontal-from=zero]:not(:is(:state(has-panel), [state--has-panel]))) {
    --sbb-radio-button-group-width: max-content;
  }
}
@media (min-width: 37.5rem) {
  :host([orientation=vertical][horizontal-from=small]) {
    --sbb-radio-button-group-orientation: row;
    --sbb-radio-button-group-radio-button-width: auto;
    --sbb-radio-button-group-radio-button-width: initial;
  }
  :host([orientation=vertical][horizontal-from=small]:not(:is(:state(has-panel), [state--has-panel]))) {
    --sbb-radio-button-group-width: max-content;
  }
}
@media (min-width: 64rem) {
  :host([orientation=vertical][horizontal-from=large]) {
    --sbb-radio-button-group-orientation: row;
    --sbb-radio-button-group-radio-button-width: auto;
    --sbb-radio-button-group-radio-button-width: initial;
  }
  :host([orientation=vertical][horizontal-from=large]:not(:is(:state(has-panel), [state--has-panel]))) {
    --sbb-radio-button-group-width: max-content;
  }
}
@media (min-width: 90rem) {
  :host([orientation=vertical][horizontal-from=ultra]) {
    --sbb-radio-button-group-orientation: row;
    --sbb-radio-button-group-radio-button-width: auto;
    --sbb-radio-button-group-radio-button-width: initial;
  }
  :host([orientation=vertical][horizontal-from=ultra]:not(:is(:state(has-panel), [state--has-panel]))) {
    --sbb-radio-button-group-width: max-content;
  }
}
.sbb-radio-group {
  display: flex;
  flex-direction: var(--sbb-radio-button-group-orientation);
  gap: var(--sbb-radio-button-group-gap);
  align-items: flex-start;
  width: var(--sbb-radio-button-group-width);
}

:host(:is(:state(slotted-error), [state--slotted-error])) .sbb-radio-group {
  margin-block-end: var(--sbb-spacing-fixed-1x);
}

::slotted(sbb-radio-button-panel) {
  width: var(--sbb-radio-button-group-radio-button-width);
  flex: var(--sbb-radio-button-group-radio-button-flex);
}

: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);
  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-border-color-1: var(--sbb-color-midnight);
  --sbb-border-color-1: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
  --sbb-border-color-1-inverted: var(--sbb-color-white);
  --sbb-border-color-1-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
  --sbb-border-color-1-negative: var(--sbb-color-white);
  --sbb-border-color-1-negative-inverted: var(--sbb-color-midnight);
  --sbb-border-color-2: var(--sbb-color-charcoal);
  --sbb-border-color-2: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
  --sbb-border-color-2-inverted: var(--sbb-color-white);
  --sbb-border-color-2-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
  --sbb-border-color-2-negative: var(--sbb-color-white);
  --sbb-border-color-2-negative-inverted: var(--sbb-color-charcoal);
  --sbb-border-color-3: var(--sbb-color-charcoal);
  --sbb-border-color-3: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
  --sbb-border-color-3-inverted: var(--sbb-color-milk);
  --sbb-border-color-3-inverted: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
  --sbb-border-color-3-negative: var(--sbb-color-milk);
  --sbb-border-color-3-negative-inverted: var(--sbb-color-charcoal);
  --sbb-border-color-4: var(--sbb-color-iron);
  --sbb-border-color-4: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
  --sbb-border-color-4-inverted: var(--sbb-color-cloud);
  --sbb-border-color-4-inverted: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
  --sbb-border-color-4-negative: var(--sbb-color-cloud);
  --sbb-border-color-4-negative-inverted: var(--sbb-color-iron);
  --sbb-border-color-5: var(--sbb-color-smoke);
  --sbb-shadow-color-soft-1: color-mix(in srgb, var(--sbb-color-smoke) 5%, transparent);
  --sbb-shadow-color-soft-1: light-dark(
    color-mix(in srgb, var(--sbb-color-smoke) 5%, transparent),
    color-mix(in srgb, var(--sbb-color-black) 15%, transparent)
  );
  --sbb-shadow-color-soft-2: color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent);
  --sbb-shadow-color-soft-2: light-dark(
    color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent),
    color-mix(in srgb, var(--sbb-color-black) 20%, transparent)
  );
  --sbb-shadow-color-soft-1-negative: color-mix(in srgb, var(--sbb-color-black) 15%, transparent);
  --sbb-shadow-color-soft-2-negative: color-mix(in srgb, var(--sbb-color-black) 20%, transparent);
  --sbb-shadow-color-hard-1: color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent);
  --sbb-shadow-color-hard-1: light-dark(
    color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent),
    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)
  );
  --sbb-shadow-color-hard-2: color-mix(in srgb, var(--sbb-color-smoke) 20%, transparent);
  --sbb-shadow-color-hard-2: light-dark(
    color-mix(in srgb, var(--sbb-color-smoke) 20%, transparent),
    color-mix(in srgb, var(--sbb-color-black) 40%, transparent)
  );
  --sbb-shadow-color-hard-1-negative: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
  --sbb-shadow-color-hard-2-negative: color-mix(in srgb, var(--sbb-color-black) 40%, transparent);
  --sbb-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-card-background-color: var(--sbb-background-color-1);
  --sbb-card-border-color: transparent;
  --sbb-card-border-radius: var(--sbb-border-radius-4x);
  --sbb-card-animation-easing: var(--sbb-animation-easing);
  --sbb-card-border-style: solid;
  --sbb-card-padding-inline-default: var(--sbb-spacing-responsive-s);
  --sbb-card-padding-block-default: var(--sbb-spacing-responsive-xxxs);
  --sbb-card-with-badge-padding-block-default: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);
}

:root.sbb-lean {
  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
  --sbb-card-padding-block: var(--sbb-spacing-fixed-3x);
  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);
}

:root {
  --sbb-card-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-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-group-orientation: row;
  --sbb-checkbox-group-checkbox-width: auto;
  --sbb-checkbox-group-width: max-content;
  --sbb-checkbox-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);
  --sbb-checkbox-group-checkbox-flex: none;
  --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-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-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-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-radio-button-group-orientation: row;
  --sbb-radio-button-group-radio-button-width: auto;
  --sbb-radio-button-group-width: max-content;
  --sbb-radio-button-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);
  --sbb-radio-button-group-radio-button-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-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-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-card-border-color: CanvasText;
    --sbb-card-border-width: var(--sbb-border-width-2x);
    --sbb-card-badge-border-display: block;
    --sbb-card-badge-inline-border-display: none;
    --sbb-expansion-panel-header-text-color: ButtonText;
    --sbb-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;
  }
}
:root {
  --sbb-train-formation-wagon-width: 5rem;
  --sbb-train-formation-wagon-height: 2.5rem;
  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
  --sbb-header-height: var(--sbb-spacing-fixed-14x);
  --sbb-time-input-max-width: 3.625rem;
  --sbb-overlay-default-z-index: 1000;
  --sbb-cursor-default: default;
  --sbb-cursor-pointer: pointer;
  --sbb-border-radius-infinity: 100000em;
}

:root.sbb-lean {
  --sbb-title-font-size-level-1-lean: var(--sbb-heading-font-size-2);
  --sbb-title-font-size-level-2-lean: var(--sbb-heading-font-size-3);
  --sbb-title-font-size-level-3-lean: var(--sbb-heading-font-size-4);
  --sbb-title-font-size-level-4-lean: var(--sbb-heading-font-size-5);
  --sbb-title-font-size-level-5-lean: var(--sbb-heading-font-size-6);
  --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-75x);
  --sbb-heading-margin-block-1-lean: var(--sbb-spacing-responsive-s)
    var(--sbb-spacing-fixed-3x);
  --sbb-heading-margin-block-2-lean: var(--sbb-spacing-responsive-s)
    var(--sbb-spacing-fixed-3x);
  --sbb-heading-margin-block-3-lean: var(--sbb-spacing-responsive-s)
    var(--sbb-spacing-responsive-xxxs);
  --sbb-heading-margin-block-4-lean: var(--sbb-spacing-responsive-s)
    var(--sbb-spacing-fixed-2x);
  --sbb-heading-margin-block-5-lean: var(--sbb-spacing-responsive-s)
    var(--sbb-spacing-fixed-1x);
  --sbb-heading-margin-block-6-lean: var(--sbb-spacing-responsive-s) 0;
}

:root:has(sbb-header[size=s]) {
  --sbb-header-height: 3.25rem;
}

:root:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
  --sbb-focus-outline-style: none;
}

@media (min-width: 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);
  }
}
@media (min-width: 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);
  }
  :root.sbb-lean {
    --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
  }
  :root {
    --sbb-header-height: var(--sbb-spacing-fixed-24x);
    --sbb-time-input-max-width: 4.0625rem;
  }
  :root:has(sbb-header[size=s]) {
    --sbb-header-height: var(--sbb-spacing-fixed-14x);
  }
}
@media (min-width: 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);
  }
}
@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-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-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-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
  --sbb-text-font-size: var(--sbb-text-font-size-m);
  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);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  outline: none;
  border: none;
  background-color: transparent;
  padding: 0;
  appearance: none;
  outline: none !important;
  overflow: var(--sbb-form-field-overflow);
  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;
  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) :where(textarea) {
  --sbb-scrollbar-thumb-width: 0.125rem;
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
  --sbb-scrollbar-width-firefox: thin;
  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
  --sbb-scrollbar-color: light-dark(
    color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
    color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
  );
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
  --sbb-scrollbar-color-hover: light-dark(
    color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
    color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
  );
  --sbb-scrollbar-track-color: transparent;
  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
}

: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);
}

: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-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-white) 30%, transparent);
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
  --sbb-scrollbar-track-color: transparent;
  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
}

:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar {
  width: var(--sbb-scrollbar-width);
  height: var(--sbb-scrollbar-width);
  background-color: var(--sbb-scrollbar-track-color, transparent);
}

:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-corner {
  background-color: var(--sbb-scrollbar-track-color, transparent);
}

:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-thumb {
  background-color: var(--sbb-scrollbar-color, currentcolor);
  border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;
  border-radius: var(--sbb-border-radius-4x);
  background-clip: padding-box;
}

:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-thumb:hover {
  background-color: var(--sbb-scrollbar-color-hover, currentcolor);
  border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
}

:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-button, :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-corner {
  display: none;
}

@supports not selector(::-webkit-scrollbar) {
  :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea) {
    scrollbar-width: var(--sbb-scrollbar-width-firefox);
    scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
  }
}
: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;
  }
}
: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;
}

sbb-breadcrumb-group:not(:defined) {
  display: block;
  height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
  overflow: hidden;
}

:is(sbb-card, sbb-flip-card) .sbb-action {
  pointer-events: all;
}

.sbb-header-info {
  --sbb-text-font-size: var(--sbb-text-font-size-xs);
  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);
  display: flex;
  padding-inline: var(--sbb-spacing-fixed-4x);
  gap: var(--sbb-spacing-fixed-1x);
  align-items: baseline;
  color: var(--sbb-color-1);
}

.sbb-header-info strong + * {
  font-size: var(--sbb-text-font-size-xxs);
  color: var(--sbb-color-granite);
  color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
}

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);
}

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-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%;
}

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);
}

: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);
}

: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-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: 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%;
}

sbb-train-formation:has(sbb-train[direction-label]) {
  --sbb-train-formation-reserve-spacing-display: block;
}

sbb-train-formation:has(sbb-train-wagon[sector]) {
  --sbb-train-formation-show-sectors-gap: 1;
}

sbb-train-formation:not(:has(sbb-train-wagon[label])) {
  --sbb-train-formation-wagon-label-display: none;
}

sbb-train-formation[view=side] sbb-train-wagon {
  --sbb-train-wagon-wagon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M12.5,0.5 h55 a12,12 0 0 1 12,12 v15 a12,12 0 0 1 -12,12 h-55 a12,12 0 0 1 -12,-12 v-15 a12,12 0 0 1 12,-12 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
  --sbb-train-wagon-wagon-closed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Crect x='0.5' y='0.5' width='79' height='39' rx='11.5' stroke='%23000000'/%3E%3Cpath d='M76 4L4 36' stroke='%23000000'/%3E%3Cpath d='M76 36L4 4' stroke='%23000000'/%3E%3C/svg%3E");
  --sbb-train-wagon-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H68C74.3513 0.5 79.5 5.64873 79.5 12V28C79.5 34.3513 74.3513 39.5 68 39.5H11.922C2.93614 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
  --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0639 39.5 68.078 39.5H11.922C2.93615 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
  --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M0.5 12C0.5 5.64873 5.64873 0.5 12 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0638 39.5 68.0779 39.5H12C5.64873 39.5 0.5 34.3513 0.5 28V12Z' stroke='%23000000'/%3E%3C/svg%3E");
}

sbb-train-formation[view=top] sbb-train-wagon {
  --sbb-train-wagon-wagon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h63 a8,8 0 0 1 8,8 v23 a8,8 0 0 1 -8,8 h-63 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
  --sbb-train-wagon-wagon-closed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Crect x='0.5' y='0.5' width='79' height='39' rx='7.5' stroke='%23000000'/%3E%3Cpath d='M77.5 2.5L2.5 37.5' stroke='%23000000'/%3E%3Cpath d='M77.5 37.5L2.5 2.5' stroke='%23000000'/%3E%3C/svg%3E");
  --sbb-train-wagon-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath transform='translate(80,40) rotate(180)' d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
  --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M20,0.5 h40 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-40 a19.5,19.5 0 0 1 -19.5,-19.5 v0 a19.5,19.5 0 0 1 19.5,-19.5 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
  --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
}

sbb-sidebar-container:has(> sbb-sidebar:is(:state(skip-animation), [state--skip-animation])) {
  --sbb-sidebar-container-animation-duration: 0s;
}

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-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: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-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-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
  position: absolute;
}

sbb-sidebar:has(sbb-sidebar-title) {
  --sbb-sidebar__padding-block-start: 0;
}

sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
  margin-block-start: var(--sbb-header-height);
}

.sbb-select-trigger {
  width: 100%;
  height: var(--sbb-size-element-xs);
}

sbb-form-field .sbb-select-trigger {
  top: 0;
}

sbb-toggle:has(:focus-visible) {
  outline-offset: var(--sbb-focus-outline-offset);
  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
}

:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
  --sbb-option-min-height: var(--sbb-size-element-xxs);
  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
  --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
}

:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
  --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
}

:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
  --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
}

sbb-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-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[negative] > sbb-dialog-content, sbb-dialog[negative]:is(:state(has-intermediate-element), [state--has-intermediate-element]) > * > sbb-dialog-content {
  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
}

sbb-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-notification:has(sbb-title) {
  --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);
  --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);
}

sbb-notification:has(sbb-title)[size=s] {
  --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-6);
  --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);
}

sbb-status:has(sbb-title) {
  --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
  --_sbb-status-text-color-override: var(--sbb-color-granite);
  --_sbb-status-text-color-override: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
  --_sbb-status-title-font-size: var(--sbb-heading-font-size-5);
  --_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);
}

.sbb-overlay-outlet {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.sbb-options-nowrap {
  --sbb-option-text-overflow: ellipsis;
  --sbb-option-overflow: hidden;
  --sbb-option-white-space: nowrap;
}

sbb-mini-calendar[orientation=horizontal] sbb-mini-calendar-month {
  --sbb-mini-calendar-grid-auto-flow: row;
  --sbb-mini-calendar-month-height: 3rem;
  --sbb-mini-calendar-month-grid-template-rows: none;
  --sbb-mini-calendar-month-grid-template-columns: repeat(7, 1fr);
}

sbb-mini-calendar[orientation=horizontal] sbb-mini-calendar-month sbb-mini-calendar-day:first-child {
  grid-column-start: var(--sbb-mini-calendar-month-offset);
}

sbb-mini-calendar[orientation=vertical] sbb-mini-calendar-month {
  --sbb-mini-calendar-grid-auto-flow: column;
  --sbb-mini-calendar-month-height: auto;
  --sbb-mini-calendar-month-grid-template-rows: repeat(7, 1fr);
  --sbb-mini-calendar-month-grid-template-columns: none;
}

sbb-mini-calendar[orientation=vertical] sbb-mini-calendar-month sbb-mini-calendar-day:first-child {
  grid-row-start: var(--sbb-mini-calendar-month-offset);
}

sub {
  bottom: -0.36em;
}

sup {
  top: -0.5em;
}

.sbb-text-xxs,
.sbb-text-xs,
.sbb-text-s,
.sbb-text-m,
.sbb-text-l,
.sbb-text-xl {
  font-family: var(--sbb-typo-font-family);
  font-weight: normal;
  line-height: var(--sbb-typo-line-height-text);
  letter-spacing: var(--sbb-typo-letter-spacing-text);
  font-size: var(--sbb-text-font-size);
}

.sbb-text-xxs {
  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
}

.sbb-text-xs {
  --sbb-text-font-size: var(--sbb-text-font-size-xs);
}

.sbb-text-s {
  --sbb-text-font-size: var(--sbb-text-font-size-s);
}

.sbb-text-m {
  --sbb-text-font-size: var(--sbb-text-font-size-m);
}

.sbb-text-l {
  --sbb-text-font-size: var(--sbb-text-font-size-l);
}

.sbb-text-xl {
  --sbb-text-font-size: var(--sbb-text-font-size-xl);
}

.sbb-text--bold {
  font-weight: bold;
}

.sbb-legend {
  --sbb-text-font-size: var(--sbb-text-font-size-xs);
  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);
  padding: 0;
  color: var(--sbb-color-granite);
  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
}

.sbb-screen-reader-only {
  border: 0;
  clip-path: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.sbb-focus-outline:focus-visible {
  outline-offset: var(--sbb-focus-outline-offset);
  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
}

.sbb-focus-outline-dark:focus-visible {
  outline-offset: var(--sbb-focus-outline-offset);
  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
}

[sbb-badge] {
  --sbb-badge-position-offset: calc(var(--sbb-spacing-fixed-2x) * -1);
  position: relative;
}

[sbb-badge]::after {
  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
  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);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--sbb-spacing-fixed-1x);
  border-radius: var(--sbb-border-radius-infinity);
  background-color: var(--sbb-color-primary);
  color: var(--sbb-color-1-negative);
  min-width: var(--sbb-spacing-fixed-4x);
  max-height: var(--sbb-spacing-fixed-4x);
  outline: var(--sbb-border-width-1x) solid transparent;
  content: attr(sbb-badge);
  position: absolute;
  inset-block-start: var(--sbb-badge-position-offset);
}

[sbb-badge]:where([sbb-badge-position=before])::after {
  inset-inline-start: var(--sbb-badge-position-offset);
}

[sbb-badge]:where(:not([sbb-badge-position]), [sbb-badge-position=after])::after {
  inset-inline-end: var(--sbb-badge-position-offset);
}

.sbb-disable-animation {
  --sbb-disable-animation-duration: 0s;
}

.sbb-disable-animation-locally {
  --sbb-disable-animation-duration: 0s;
}

.sbb-disable-animation-locally > * {
  --sbb-disable-animation-duration: initial;
}

.sbb-enable-animation {
  --sbb-disable-animation-duration: initial;
}

.sbb-figure {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  grid-auto-rows: auto;
  margin: 0;
}

.sbb-figure :is(img, sbb-image, .sbb-image):not(.sbb-figure-overlap-image) {
  grid-row: 1;
  grid-column: 1;
  width: 100%;
}

.sbb-figure :is(figcaption, .sbb-caption) {
  grid-row: 2;
  grid-column: 1;
  padding-block-start: var(--sbb-spacing-fixed-4x);
  color: var(--sbb-color-granite);
  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
  --sbb-text-font-size: var(--sbb-text-font-size-xs);
  font-family: var(--sbb-typo-font-family);
  font-weight: normal;
  line-height: var(--sbb-typo-line-height-text);
  letter-spacing: var(--sbb-typo-letter-spacing-text);
  font-size: var(--sbb-text-font-size);
}

.sbb-figure :is(.sbb-figure-overlap-start-start,
.sbb-figure-overlap-start-end,
.sbb-figure-overlap-end-start,
.sbb-figure-overlap-end-end) {
  color-scheme: only light;
  position: relative;
  order: 1;
  grid-row: 1;
  grid-column: 1;
  margin: var(--sbb-spacing-responsive-xxxs);
}

.sbb-figure .sbb-figure-overlap-start-start {
  place-self: start start;
}

.sbb-figure .sbb-figure-overlap-start-end {
  place-self: start end;
}

.sbb-figure .sbb-figure-overlap-end-start {
  place-self: end start;
}

.sbb-figure .sbb-figure-overlap-end-end {
  place-self: end end;
}

:is(sbb-image, img).sbb-image-free {
  --sbb-image-aspect-ratio: auto;
}

:is(sbb-image, img).sbb-image-1-1 {
  --sbb-image-aspect-ratio: 1 / 1;
}

:is(sbb-image, img).sbb-image-1-2 {
  --sbb-image-aspect-ratio: 1 / 2;
}

:is(sbb-image, img).sbb-image-2-1 {
  --sbb-image-aspect-ratio: 2 / 1;
}

:is(sbb-image, img).sbb-image-2-3 {
  --sbb-image-aspect-ratio: 2 / 3;
}

:is(sbb-image, img).sbb-image-3-2 {
  --sbb-image-aspect-ratio: 3 / 2;
}

:is(sbb-image, img).sbb-image-3-4 {
  --sbb-image-aspect-ratio: 3 / 4;
}

:is(sbb-image, img).sbb-image-4-3 {
  --sbb-image-aspect-ratio: 4 / 3;
}

:is(sbb-image, img).sbb-image-4-5 {
  --sbb-image-aspect-ratio: 4 / 5;
}

:is(sbb-image, img).sbb-image-5-4 {
  --sbb-image-aspect-ratio: 5 / 4;
}

:is(sbb-image, img).sbb-image-9-16 {
  --sbb-image-aspect-ratio: 9 / 16;
}

:is(sbb-image, img).sbb-image-16-9 {
  --sbb-image-aspect-ratio: 16 / 9;
}

:is(img, sbb-image).sbb-image-border-radius-default {
  border-radius: var(--sbb-border-radius-4x);
}

:is(img, sbb-image).sbb-image-border-radius-none {
  border-radius: 0;
}

:is(img, sbb-image).sbb-image-border-radius-round {
  border-radius: var(--sbb-border-radius-infinity);
}

.sbb-grid,
.sbb-page-spacing {
  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));
  margin-inline: auto;
  width: 100%;
}

@media (min-width: 90rem) {
  .sbb-grid,
  .sbb-page-spacing {
    max-width: var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)));
  }
}
.sbb-grid-expanded,
.sbb-page-spacing-expanded {
  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs));
}

.sbb-grid,
.sbb-grid-expanded {
  display: grid;
  gap: var(--sbb-grid-base-gutter-responsive);
  grid-template-columns: repeat(var(--sbb-grid-base-columns), 1fr);
}

.sbb-grid-only {
  display: grid;
  gap: var(--sbb-grid-base-gutter-responsive);
  grid-template-columns: repeat(var(--sbb-grid-base-columns), 1fr);
}

.sbb-list:where(ol, ul) {
  --sbb-list-vertical-gap: 0.75em;
  --sbb-list-padding-inline-start: 1.5em;
}

.sbb-list:where(ol, ul),
.sbb-list:where(ol, ul) :is(ol, ul) {
  margin: 0;
  padding: 0;
  padding-inline-start: var(--sbb-list-padding-inline-start);
}

.sbb-list:where(ol, ul) > li + li,
.sbb-list:where(ol, ul) :is(ol, ul) > li + li {
  margin-block-start: var(--sbb-list-vertical-gap);
}

.sbb-list:where(ol, ul) > li p,
.sbb-list:where(ol, ul) :is(ol, ul) > li p {
  margin-block: 0;
}

.sbb-list:where(ol, ul) > li > * + p,
.sbb-list:where(ol, ul) :is(ol, ul) > li > * + p {
  margin-block-start: var(--sbb-spacing-responsive-xxxs);
}

.sbb-list:where(ol, ul) :is(ul, ol), .sbb-step-list .sbb-list:where(ol, ul) {
  margin-block-start: var(--sbb-list-vertical-gap);
}

.sbb-list:where(ul),
.sbb-list:where(ul) ul {
  list-style-type: none;
}

.sbb-list:where(ul) > li,
.sbb-list:where(ul) ul > li {
  position: relative;
}

.sbb-list:where(ul) > li::before,
.sbb-list:where(ul) ul > li::before {
  content: "•";
  position: absolute;
  display: flex;
  height: 1em;
  width: 1em;
  align-items: center;
  justify-content: center;
  inset-block-start: calc(0.5 * (var(--sbb-typo-line-height-text) * 1em - 1em));
  inset-inline-start: calc(-1 * (0.5 * var(--sbb-list-padding-inline-start) + 0.5em));
  transform: scale(1.3);
}

.sbb-list:where(dl) {
  --sbb-text-font-size: var(--sbb-text-font-size-s);
  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);
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto minmax(20%, 1fr);
  gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-fixed-2x);
}

.sbb-list:where(dl) :is(dt, dd) {
  margin: 0;
  padding: 0;
}

.sbb-step-list {
  --sbb-step-list-dimensions: 2.125rem;
  --sbb-step-list-padding-inline: var(--sbb-spacing-responsive-xxs);
  --sbb-step-list-to-text-gap: var(--sbb-spacing-responsive-xxxs);
  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
  --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
  --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
  --sbb-step-list-color: var(--sbb-color-2);
  --sbb-step-list-text-to-marker-block-offset: calc(
    0.5 *
      (
        var(--sbb-step-list-dimensions) - var(--sbb-typo-line-height-text) *
          var(--sbb-text-font-size)
      )
  );
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: steps;
  color: var(--sbb-step-list-color);
}

.sbb-step-list:where(.sbb-text-s) {
  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
}

.sbb-step-list:where(.sbb-text-m, .sbb-text-l, .sbb-text-xl) {
  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-5x);
}

@media (min-width: 64rem) {
  .sbb-step-list:where(.sbb-text-xl) {
    --sbb-step-list-dimensions: 2.5625rem;
  }
}
.sbb-step-list > li {
  position: relative;
  counter-increment: steps;
  background-color: var(--sbb-background-color-3);
  padding-block: calc(var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset)) var(--sbb-step-list-padding-block);
  padding-inline: calc(var(--sbb-step-list-padding-inline) + var(--sbb-step-list-dimensions) + var(--sbb-step-list-to-text-gap)) var(--sbb-step-list-padding-inline);
  min-height: calc(var(--sbb-step-list-dimensions) + 2 * var(--sbb-step-list-padding-block));
}

.sbb-step-list > li::before {
  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
  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);
  font-weight: bold;
  content: counter(steps);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--sbb-step-list-dimensions);
  width: var(--sbb-step-list-dimensions);
  margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset));
  inset-inline-start: var(--sbb-step-list-padding-inline);
  color: var(--sbb-step-list-color);
  border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
  border: var(--sbb-border-width-1x) solid light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));
  border-radius: 50%;
}

.sbb-step-list > li + li {
  margin-block-start: var(--sbb-step-list-vertical-gap);
}

.sbb-step-list > li p {
  margin-block: 0;
}

.sbb-step-list > li > * + p {
  margin-block-start: var(--sbb-spacing-responsive-xxxs);
}

.sbb-step-list > li:first-of-type {
  border-start-start-radius: var(--sbb-step-list-border-radius);
  border-start-end-radius: var(--sbb-step-list-border-radius);
}

.sbb-step-list > li:last-of-type {
  border-end-start-radius: var(--sbb-step-list-border-radius);
  border-end-end-radius: var(--sbb-step-list-border-radius);
}

.sbb-icon-list {
  --sbb-icon-list-marker-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3 12a9 9 0 0 1 9-9 9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.104 13.305 5-6.5-.792-.61-4.69 6.096-2.102-1.681-.624.78 2.5 2 .398.319z" clip-rule="evenodd"></path></svg>');
  --sbb-icon-list-marker-icon-color: currentcolor;
  --sbb-icon-list-vertical-gap: var(--sbb-spacing-fixed-2x);
  --sbb-icon-list-dimensions: var(--sbb-size-icon-ui-small);
  --sbb-icon-list-to-text-gap: var(--sbb-spacing-fixed-2x);
  --sbb-icon-list-text-to-marker-block-offset: calc(
    0.5 *
      (
        var(--sbb-icon-list-dimensions) - var(--sbb-typo-line-height-text) *
          var(--sbb-text-font-size)
      )
  );
  list-style: none;
  margin: 0;
  padding: 0;
}

.sbb-icon-list > li {
  position: relative;
  padding-inline: calc(var(--sbb-icon-list-dimensions) + var(--sbb-icon-list-to-text-gap)) 0;
  min-height: var(--sbb-icon-list-dimensions);
}

.sbb-icon-list > li + li {
  margin-block-start: var(--sbb-icon-list-vertical-gap);
}

.sbb-icon-list > li p {
  margin-block: 0;
}

.sbb-icon-list > li > * + p {
  margin-block-start: var(--sbb-spacing-responsive-xxxs);
}

.sbb-icon-list > li::before {
  content: "";
  position: absolute;
  width: var(--sbb-icon-list-dimensions);
  height: var(--sbb-icon-list-dimensions);
  margin-block-start: calc(-1 * var(--sbb-icon-list-text-to-marker-block-offset));
  inset-inline-start: 0;
  background-color: var(--sbb-icon-list-marker-icon-color);
  mask-image: var(--sbb-icon-list-marker-icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
}

@media (forced-colors: active) {
  .sbb-icon-list > li::before {
    background-color: CanvasText;
  }
}
.sbb-scrollbar,
.sbb-scrollbar-negative,
.sbb-scrollbar-thick,
.sbb-scrollbar-thick-negative,
.sbb-scrollbar-track-visible,
.sbb-scrollbar-negative-track-visible,
.sbb-scrollbar-thick-track-visible,
.sbb-scrollbar-thick-negative-track-visible {
  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
}

.sbb-scrollbar::-webkit-scrollbar,
.sbb-scrollbar-negative::-webkit-scrollbar,
.sbb-scrollbar-thick::-webkit-scrollbar,
.sbb-scrollbar-thick-negative::-webkit-scrollbar,
.sbb-scrollbar-track-visible::-webkit-scrollbar,
.sbb-scrollbar-negative-track-visible::-webkit-scrollbar,
.sbb-scrollbar-thick-track-visible::-webkit-scrollbar,
.sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar {
  width: var(--sbb-scrollbar-width);
  height: var(--sbb-scrollbar-width);
  background-color: var(--sbb-scrollbar-track-color, transparent);
}

.sbb-scrollbar::-webkit-scrollbar-corner,
.sbb-scrollbar-negative::-webkit-scrollbar-corner,
.sbb-scrollbar-thick::-webkit-scrollbar-corner,
.sbb-scrollbar-thick-negative::-webkit-scrollbar-corner,
.sbb-scrollbar-track-visible::-webkit-scrollbar-corner,
.sbb-scrollbar-negative-track-visible::-webkit-scrollbar-corner,
.sbb-scrollbar-thick-track-visible::-webkit-scrollbar-corner,
.sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-corner {
  background-color: var(--sbb-scrollbar-track-color, transparent);
}

.sbb-scrollbar::-webkit-scrollbar-thumb,
.sbb-scrollbar-negative::-webkit-scrollbar-thumb,
.sbb-scrollbar-thick::-webkit-scrollbar-thumb,
.sbb-scrollbar-thick-negative::-webkit-scrollbar-thumb,
.sbb-scrollbar-track-visible::-webkit-scrollbar-thumb,
.sbb-scrollbar-negative-track-visible::-webkit-scrollbar-thumb,
.sbb-scrollbar-thick-track-visible::-webkit-scrollbar-thumb,
.sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-thumb {
  background-color: var(--sbb-scrollbar-color, currentcolor);
  border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;
  border-radius: var(--sbb-border-radius-4x);
  background-clip: padding-box;
}

.sbb-scrollbar::-webkit-scrollbar-thumb:hover,
.sbb-scrollbar-negative::-webkit-scrollbar-thumb:hover,
.sbb-scrollbar-thick::-webkit-scrollbar-thumb:hover,
.sbb-scrollbar-thick-negative::-webkit-scrollbar-thumb:hover,
.sbb-scrollbar-track-visible::-webkit-scrollbar-thumb:hover,
.sbb-scrollbar-negative-track-visible::-webkit-scrollbar-thumb:hover,
.sbb-scrollbar-thick-track-visible::-webkit-scrollbar-thumb:hover,
.sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-thumb:hover {
  background-color: var(--sbb-scrollbar-color-hover, currentcolor);
  border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
}

.sbb-scrollbar::-webkit-scrollbar-button, .sbb-scrollbar::-webkit-scrollbar-corner,
.sbb-scrollbar-negative::-webkit-scrollbar-button,
.sbb-scrollbar-negative::-webkit-scrollbar-corner,
.sbb-scrollbar-thick::-webkit-scrollbar-button,
.sbb-scrollbar-thick::-webkit-scrollbar-corner,
.sbb-scrollbar-thick-negative::-webkit-scrollbar-button,
.sbb-scrollbar-thick-negative::-webkit-scrollbar-corner,
.sbb-scrollbar-track-visible::-webkit-scrollbar-button,
.sbb-scrollbar-track-visible::-webkit-scrollbar-corner,
.sbb-scrollbar-negative-track-visible::-webkit-scrollbar-button,
.sbb-scrollbar-negative-track-visible::-webkit-scrollbar-corner,
.sbb-scrollbar-thick-track-visible::-webkit-scrollbar-button,
.sbb-scrollbar-thick-track-visible::-webkit-scrollbar-corner,
.sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-button,
.sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-corner {
  display: none;
}

@supports not selector(::-webkit-scrollbar) {
  .sbb-scrollbar,
  .sbb-scrollbar-negative,
  .sbb-scrollbar-thick,
  .sbb-scrollbar-thick-negative,
  .sbb-scrollbar-track-visible,
  .sbb-scrollbar-negative-track-visible,
  .sbb-scrollbar-thick-track-visible,
  .sbb-scrollbar-thick-negative-track-visible {
    scrollbar-width: var(--sbb-scrollbar-width-firefox);
    scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
  }
}
.sbb-scrollbar {
  --sbb-scrollbar-thumb-width: 0.125rem;
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
  --sbb-scrollbar-width-firefox: thin;
  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
  --sbb-scrollbar-color: light-dark(
    color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
    color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
  );
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
  --sbb-scrollbar-color-hover: light-dark(
    color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
    color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
  );
  --sbb-scrollbar-track-color: transparent;
}

.sbb-scrollbar-negative {
  --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-white) 30%, transparent);
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
  --sbb-scrollbar-track-color: transparent;
}

.sbb-scrollbar-thick {
  --sbb-scrollbar-thumb-width: 0.5rem;
  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
  --sbb-scrollbar-width-firefox: auto;
  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
  --sbb-scrollbar-color: light-dark(
    color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
    color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
  );
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
  --sbb-scrollbar-color-hover: light-dark(
    color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
    color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
  );
  --sbb-scrollbar-track-color: transparent;
}

.sbb-scrollbar-thick-negative {
  --sbb-scrollbar-thumb-width: 0.5rem;
  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
  --sbb-scrollbar-width-firefox: auto;
  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
  --sbb-scrollbar-track-color: transparent;
}

.sbb-scrollbar-track-visible {
  --sbb-scrollbar-thumb-width: 0.125rem;
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
  --sbb-scrollbar-width-firefox: thin;
  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
  --sbb-scrollbar-color: light-dark(
    color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
    color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
  );
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
  --sbb-scrollbar-color-hover: light-dark(
    color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
    color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
  );
  --sbb-scrollbar-track-color: var(--sbb-background-color-4);
}

.sbb-scrollbar-negative-track-visible {
  --sbb-scrollbar-thumb-width: 0.125rem;
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
  --sbb-scrollbar-width-firefox: thin;
  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
  --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
}

.sbb-scrollbar-thick-track-visible {
  --sbb-scrollbar-thumb-width: 0.5rem;
  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
  --sbb-scrollbar-width-firefox: auto;
  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
  --sbb-scrollbar-color: light-dark(
    color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
    color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
  );
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
  --sbb-scrollbar-color-hover: light-dark(
    color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
    color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
  );
  --sbb-scrollbar-track-color: var(--sbb-background-color-4);
}

.sbb-scrollbar-thick-negative-track-visible {
  --sbb-scrollbar-thumb-width: 0.5rem;
  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
  --sbb-scrollbar-width-firefox: auto;
  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
  --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
}

.sbb-table,
.sbb-table-m,
.sbb-table-s,
.sbb-table-xs {
  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
  --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
}

.sbb-table tbody tr:nth-child(odd) :is(th, td),
.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
  background-color: var(--sbb-table-row-striped-color);
}

.sbb-table,
.sbb-table-m,
.sbb-table-s,
.sbb-table-xs {
  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
  --sbb-table-border-color: var(--sbb-color-cloud);
  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
  --sbb-table-background-color: var(--sbb-background-color-1);
  --sbb-table-row-striped-color: var(--sbb-background-color-3);
  --sbb-table-color: var(--sbb-color-1);
  --sbb-table-caption-color: var(--sbb-color-granite);
  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
  --sbb-table-sticky-shadow-width: 3rem;
  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
  --sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
  border-spacing: 0;
  caption-side: bottom;
  color: var(--sbb-table-color);
  table-layout: auto;
}

.sbb-table thead > tr:last-of-type > th,
.sbb-table-m thead > tr:last-of-type > th,
.sbb-table-s thead > tr:last-of-type > th,
.sbb-table-xs thead > tr:last-of-type > th {
  border-bottom: var(--sbb-table-border);
}

.sbb-table thead > tr:first-of-type > th,
.sbb-table-m thead > tr:first-of-type > th,
.sbb-table-s thead > tr:first-of-type > th,
.sbb-table-xs thead > tr:first-of-type > th {
  border-block-start: var(--sbb-table-border);
}

.sbb-table thead > tr > th,
.sbb-table-m thead > tr > th,
.sbb-table-s thead > tr > th,
.sbb-table-xs thead > tr > th {
  --sbb-text-font-size: var(--sbb-text-font-size-xs);
  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);
  font-weight: bold;
  background-color: var(--sbb-table-background-color);
  border-inline-end: var(--sbb-table-border);
  padding-block: var(--sbb-table-header-padding-block);
  padding-inline: var(--sbb-table-header-padding-inline);
  text-align: left;
}

.sbb-table thead > tr > th:first-of-type,
.sbb-table-m thead > tr > th:first-of-type,
.sbb-table-s thead > tr > th:first-of-type,
.sbb-table-xs thead > tr > th:first-of-type {
  border-inline-start: var(--sbb-table-border);
}

.sbb-table tbody > tr > td,
.sbb-table-m tbody > tr > td,
.sbb-table-s tbody > tr > td,
.sbb-table-xs tbody > tr > td {
  --sbb-text-font-size: var(--sbb-text-font-size-s);
  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);
  background-color: var(--sbb-table-background-color);
  border-block-end: var(--sbb-table-border);
  border-inline-end: var(--sbb-table-border);
  padding-block: var(--sbb-table-cell-padding-block);
  padding-inline: var(--sbb-table-cell-padding-inline);
}

.sbb-table tbody > tr > td:first-of-type,
.sbb-table-m tbody > tr > td:first-of-type,
.sbb-table-s tbody > tr > td:first-of-type,
.sbb-table-xs tbody > tr > td:first-of-type {
  border-inline-start: var(--sbb-table-border);
}

.sbb-table caption,
.sbb-table-m caption,
.sbb-table-s caption,
.sbb-table-xs caption {
  --sbb-text-font-size: var(--sbb-text-font-size-xs);
  font-family: var(--sbb-typo-font-family);
  font-weight: normal;
  line-height: var(--sbb-typo-line-height-text);
  letter-spacing: var(--sbb-typo-letter-spacing-text);
  font-size: var(--sbb-text-font-size);
  --sbb-table-caption-color-fallback: var(--sbb-color-granite);
  --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
  text-align: left;
}

.sbb-table-m {
  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
  --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
}

.sbb-table-s {
  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
}

.sbb-table-s tbody > tr > td {
  --sbb-text-font-size: var(--sbb-text-font-size-xs);
  font-family: var(--sbb-typo-font-family);
  font-weight: normal;
  line-height: var(--sbb-typo-line-height-text);
  letter-spacing: var(--sbb-typo-letter-spacing-text);
  font-size: var(--sbb-text-font-size);
}

.sbb-table-xs {
  --sbb-table-header-padding-block: 0;
  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-1x);
  --sbb-table-cell-padding-block: 0;
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
}

.sbb-table-xs tbody > tr > td {
  --sbb-text-font-size: var(--sbb-text-font-size-xs);
  font-family: var(--sbb-typo-font-family);
  font-weight: normal;
  line-height: var(--sbb-typo-line-height-text);
  letter-spacing: var(--sbb-typo-letter-spacing-text);
  font-size: var(--sbb-text-font-size);
}

sbb-table-wrapper[negative] .sbb-table,
.sbb-table--negative {
  --sbb-table-border-color: var(--sbb-color-anthracite);
  --sbb-table-background-color: var(--sbb-background-color-1-negative);
  --sbb-table-color: var(--sbb-color-1-negative);
  --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
  --sbb-table-caption-color: var(--sbb-color-cement);
}

.sbb-table--striped tbody tr:nth-child(odd) :is(th, td) {
  background-color: var(--sbb-table-row-striped-color);
}

.sbb-table--unstriped tbody tr:nth-child(odd) :is(th, td) {
  background-color: var(--sbb-table-background-color);
}

.sbb-table--theme-iron {
  --sbb-table-cell-color: var(--sbb-color-4);
}

.sbb-table--theme-iron tbody > tr > td {
  color: var(--sbb-table-cell-color);
}

.sbb-table--theme-iron.sbb-table--negative {
  --sbb-table-cell-color: var(--sbb-color-cloud);
}

.sbb-table-header-row:last-of-type > th {
  border-bottom: var(--sbb-table-border);
}

.sbb-table-header-cell {
  --sbb-text-font-size: var(--sbb-text-font-size-xs);
  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);
  font-weight: bold;
  background-color: var(--sbb-table-background-color);
  border-inline-end: var(--sbb-table-border);
  padding-block: var(--sbb-table-header-padding-block);
  padding-inline: var(--sbb-table-header-padding-inline);
  text-align: left;
}

.sbb-table-row--striped {
  background-color: var(--sbb-table-row-striped-color);
}

.sbb-table-data-cell {
  --sbb-text-font-size: var(--sbb-text-font-size-s);
  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);
  background-color: var(--sbb-table-background-color);
  border-block-end: var(--sbb-table-border);
  border-inline-end: var(--sbb-table-border);
  padding-block: var(--sbb-table-cell-padding-block);
  padding-inline: var(--sbb-table-cell-padding-inline);
}

.sbb-table-caption {
  --sbb-text-font-size: var(--sbb-text-font-size-xs);
  font-family: var(--sbb-typo-font-family);
  font-weight: normal;
  line-height: var(--sbb-typo-line-height-text);
  letter-spacing: var(--sbb-typo-letter-spacing-text);
  font-size: var(--sbb-text-font-size);
  --sbb-table-caption-color-fallback: var(--sbb-color-granite);
  --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
  text-align: left;
}

.sbb-table-filter {
  padding-block-start: 0 !important;
}

.sbb-table-sticky {
  position: sticky !important;
}

:is(.sbb-table-sticky-border-elem-left, .sbb-table-sticky-border-elem-right)::after {
  content: "";
  transition-timing-function: var(--sbb-table-sticky-shadow-transition-easing);
  transition-duration: var(--sbb-table-sticky-shadow-transition-duration);
  transition-property: visibility, opacity;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  width: var(--sbb-table-sticky-shadow-width);
  inset: 0;
}

:is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-left {
  border-inline-end: var(--sbb-table-border);
}

:is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-left::after {
  visibility: visible;
  opacity: 1;
  background-image: linear-gradient(-270deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
  inset-inline-start: unset;
  inset-inline-end: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
}

:is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-right {
  border-inline-start: var(--sbb-table-border);
}

:is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-right::after {
  visibility: visible;
  opacity: 1;
  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
  inset-inline-start: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
  inset-inline-end: unset;
}

html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
}

html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) tbody > tr > td {
  --sbb-text-font-size: var(--sbb-text-font-size-xs);
  font-family: var(--sbb-typo-font-family);
  font-weight: normal;
  line-height: var(--sbb-typo-line-height-text);
  letter-spacing: var(--sbb-typo-letter-spacing-text);
  font-size: var(--sbb-text-font-size);
}

.sbb-timetable-form {
  --sbb-timetable-form-content-max-width: 46.25rem;
  position: relative;
  display: flex;
  flex-direction: column;
  column-gap: var(--sbb-spacing-fixed-3x);
  border-radius: var(--sbb-border-radius-4x);
  padding-block: var(--sbb-spacing-fixed-10x) var(--sbb-spacing-responsive-l);
  padding-inline: var(--sbb-spacing-fixed-5x);
  background: linear-gradient(to bottom, var(--sbb-color-primary) 0 11.125rem, var(--sbb-background-color-3) 11.125rem 100%);
}

@media (max-width: 63.9375rem) {
  .sbb-timetable-form:has(sbb-signet) {
    padding-block-start: var(--sbb-spacing-fixed-4x);
  }
}
.sbb-timetable-form sbb-signet {
  width: var(--sbb-spacing-fixed-16x);
  align-self: end;
  margin-block-end: var(--sbb-spacing-fixed-2x);
  margin-inline: 0;
}

@media (min-width: 64rem) {
  .sbb-timetable-form sbb-signet {
    position: absolute;
    inset-block-start: var(--sbb-spacing-fixed-6x);
    inset-inline-end: var(--sbb-spacing-fixed-6x);
  }
}
.sbb-timetable-form > * {
  margin-inline: auto;
  max-width: var(--sbb-timetable-form-content-max-width);
  width: 100%;
}

sbb-timetable-form sbb-date-input {
  min-width: 8.3125rem;
}

sbb-timetable-form .sbb-timetable-form-block {
  --sbb-form-field-focus-underline-z-index: 1;
  width: 100%;
  position: relative;
}

sbb-timetable-form .sbb-timetable-form-block::after {
  content: "";
  position: absolute;
  border-block-end: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);
  inset-inline: var(--sbb-form-field-padding-inline);
  inset-block-end: 0;
}

sbb-timetable-form .sbb-timetable-form-block sbb-datepicker-toggle {
  margin-inline-end: var(--sbb-spacing-fixed-6x);
}

@media (max-width: 37.4375rem) {
  sbb-timetable-form .sbb-timetable-form-mobile-block {
    --sbb-form-field-focus-underline-z-index: 1;
    width: 100%;
    position: relative;
  }
  sbb-timetable-form .sbb-timetable-form-mobile-block::after {
    content: "";
    position: absolute;
    border-block-end: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);
    inset-inline: var(--sbb-form-field-padding-inline);
    inset-block-end: 0;
  }
  sbb-timetable-form .sbb-timetable-form-mobile-block sbb-datepicker-toggle {
    margin-inline-end: var(--sbb-spacing-fixed-6x);
  }
  sbb-timetable-form .sbb-timetable-form-mobile-hidden {
    display: none;
  }
}
iframe {
  border: none;
  border-radius: 16px;
  margin-block: 0 16px;
  margin-inline: 0;
}

.demo-wrapper {
  padding: 48px;
  display: flex;
  flex-flow: column nowrap;
  place-content: center flex-start;
  align-items: center;
  gap: 36px;
}
.demo-wrapper sbb-logo {
  block-size: 44px;
}