@sbb-esta/lyne-elements-dev 5.0.0-next.3-dev.1779265349 → 5.0.0-next.3-dev.1779279790

package/lean-theme.css

@@ -1798,6 +1798,7 @@ slot[name=error]::slotted(*) {
   --sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
   --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
   --sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);
+  --sbb-optgroup-divider-color: var(--sbb-divider-color);
   --sbb-overlay-background-color: var(--sbb-background-color-3);
   --sbb-overlay-display: none;
   --sbb-overlay-height: 100%;
@@ -1914,6 +1915,22 @@ slot[name=error]::slotted(*) {
   --sbb-stepper-border-width: var(--sbb-border-width-1x);
   --sbb-stepper-marker-width: var(--sbb-border-width-3x);
   --sbb-stepper-marker-color: var(--sbb-color-3);
+  --sbb-table-border-color: var(--sbb-color-cloud);
+  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-row-striped-color: var(--sbb-background-color-3);
+  --sbb-table-color: var(--sbb-color-1);
+  --sbb-table-caption-color: var(--sbb-color-granite);
+  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
+  --sbb-table-sticky-shadow-width: 3rem;
+  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
+  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
   --sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
   --sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
   --sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
@@ -2063,9 +2080,7 @@ slot[name=error]::slotted(*) {
   --sbb-timetable-occupancy-list-gap: var(--sbb-spacing-fixed-2x);
   --sbb-timetable-occupancy-item-gap: var(--sbb-spacing-fixed-1x);
   --sbb-time-input-max-width: 3.625rem;
-  --sbb-title-font-size: var(--sbb-heading-font-size-1);
   --sbb-title-color: var(--sbb-color-3);
-  --sbb-title-margin-block: var(--sbb-heading-margin-block-1);
   --sbb-toggle-check-font-size: var(--sbb-text-font-size-xs);
   --sbb-toggle-check-color: var(--sbb-color-2);
   --sbb-toggle-check-checked-color: var(--sbb-color-primary);
@@ -2371,12 +2386,46 @@ slot[name=error]::slotted(*) {
   font-display: swap;
   font-weight: 300;
 }
+[sbb-badge] {
+  --sbb-badge-position-offset: calc(var(--sbb-spacing-fixed-2x) * -1);
+  position: relative;
+}
+[sbb-badge]::after {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--sbb-spacing-fixed-1x);
+  border-radius: var(--sbb-border-radius-infinity);
+  background-color: var(--sbb-color-primary);
+  color: var(--sbb-color-1-negative);
+  min-width: var(--sbb-spacing-fixed-4x);
+  max-height: var(--sbb-spacing-fixed-4x);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-size: var(--sbb-text-font-size-xxs);
+  font-weight: bold;
+  outline: var(--sbb-border-width-1x) solid transparent;
+  content: attr(sbb-badge);
+  position: absolute;
+  inset-block-start: var(--sbb-badge-position-offset);
+}
+[sbb-badge]:where([sbb-badge-position=before])::after {
+  inset-inline-start: var(--sbb-badge-position-offset);
+}
+[sbb-badge]:where(:not([sbb-badge-position]), [sbb-badge-position=after])::after {
+  inset-inline-end: var(--sbb-badge-position-offset);
+}
+
 sbb-breadcrumb-group:not(:defined) {
   display: block;
   height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
   overflow: hidden;
 }
 
+sbb-card .sbb-action {
+  pointer-events: all;
+}
+
 sbb-container > [slot=image]:is(sbb-image, img),
 sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;
@@ -2404,6 +2453,10 @@ sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:sta
   padding-inline-end: 0;
 }
 
+sbb-flip-card .sbb-action {
+  pointer-events: all;
+}
+
 sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
 sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-aspect-ratio: auto;
@@ -2676,205 +2729,373 @@ sbb-tab-nav-bar .sbb-tab-amount {
   text-decoration: var(--sbb-tab-label-text-decoration);
 }
 
-sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  --sbb-image-object-fit: cover;
-  --sbb-image-aspect-ratio: 4 / 3;
-  transition-property: filter, scale;
-  will-change: filter, scale;
-  scale: var(--sbb-teaser-scale, 1);
+:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
+  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
+  --sbb-table-sticky-shadow-transition-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-6x)
+  );
+  border-spacing: 0;
+  caption-side: bottom;
+  color: var(--sbb-table-color);
+  table-layout: auto;
+  text-align: left;
 }
-
-sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  --sbb-image-aspect-ratio: 1 / 1;
-  border-radius: 0;
+:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) th {
+  font-size: var(--sbb-table-header-cell-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-weight: bold;
+  background-color: var(--sbb-table-background-color);
+  border-block-end: var(--sbb-table-border);
+  border-inline-end: var(--sbb-table-border);
+  padding-block: var(--sbb-table-header-padding-block);
+  padding-inline: var(--sbb-table-header-padding-inline);
 }
-@media (min-width: calc(37.5rem)) {
-  sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    --sbb-image-aspect-ratio: 16 / 9;
-  }
+:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) td {
+  font-size: var(--sbb-table-data-cell-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  background-color: var(--sbb-table-background-color);
+  border-block-end: var(--sbb-table-border);
+  border-inline-end: var(--sbb-table-border);
+  padding-block: var(--sbb-table-cell-padding-block);
+  padding-inline: var(--sbb-table-cell-padding-inline);
 }
-sbb-teaser-hero img:not(.sbb-figure-overlap-image) {
-  display: block;
-  align-self: stretch;
-  width: 100%;
+:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) :is(th, td).sbb-table-group-with-next {
+  border-inline-end: none;
 }
-
-:is(sbb-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-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) :is(th, td):first-child {
+  border-inline-start: var(--sbb-table-border);
 }
-:is(sbb-teaser-product, sbb-teaser-product-static) img:not(.sbb-figure-overlap-image) {
-  place-self: stretch;
+:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs):has(thead tr) thead tr:first-of-type > :is(th, td), :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs):not(:has(thead tr)) tbody tr:first-of-type > :is(th, td) {
+  border-block-start: var(--sbb-table-border);
+}
+:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) thead > tr:has(+ tr) > :is(th, td) {
+  border-block-end: none;
 }
 
-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);
+:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) caption,
+.sbb-table-caption {
+  --sbb-table-caption-color-fallback: var(--sbb-color-granite);
+  --sbb-table-caption-color-fallback: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-cement)
+  );
+  font-size: var(--sbb-text-font-size-xs);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
+  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
+  text-align: left;
 }
 
-.sbb-dark {
-  color-scheme: dark;
+.sbb-table-xs {
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-header-padding-block: 0;
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-1x);
+  --sbb-table-cell-padding-block: 0;
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
 }
 
-.sbb-light {
-  color-scheme: light;
+.sbb-table-s {
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
 }
 
-.sbb-light-dark {
-  color-scheme: light dark;
+.sbb-table-m {
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
+  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
+  --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
 }
 
-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);
+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);
 }
 
-::placeholder {
-  color: var(--sbb-color-5);
-  -webkit-text-fill-color: var(--sbb-color-5);
-  opacity: 1;
+.sbb-table--striped tbody tr:nth-child(odd) :is(th, td) {
+  background-color: var(--sbb-table-row-striped-color);
 }
 
-:is(sbb-autocomplete,
-sbb-autocomplete-grid,
-sbb-datepicker,
-sbb-dialog,
-sbb-menu,
-sbb-navigation,
-sbb-navigation-section,
-sbb-overlay,
-sbb-popover,
-sbb-select,
-sbb-skiplink-list,
-sbb-toast,
-sbb-tooltip):not(:defined) {
-  display: none;
+.sbb-table--unstriped tbody tr:nth-child(odd) :is(th, td) {
+  background-color: var(--sbb-table-background-color);
 }
 
-[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-table--theme-iron {
+  --sbb-table-cell-color: var(--sbb-color-4);
+}
+sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
+  --sbb-table-cell-color: var(--sbb-color-cloud);
+}
+.sbb-table--theme-iron tbody > tr > td {
+  color: var(--sbb-table-cell-color);
 }
 
-:is(sbb-card, sbb-flip-card) .sbb-action {
-  pointer-events: all;
+.sbb-table-header-subtitle {
+  font-weight: normal;
 }
 
-sbb-title + p {
-  margin-block-start: 0;
+.sbb-table-row--striped {
+  background-color: var(--sbb-table-row-striped-color);
 }
 
-img {
-  aspect-ratio: var(--sbb-image-aspect-ratio);
-  object-fit: var(--sbb-image-object-fit);
-  object-position: var(--sbb-image-object-position);
+.sbb-table-filter {
+  padding-block-start: 0 !important;
 }
 
-: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-table-caption {
+  --sbb-table-caption-color-fallback: var(--sbb-color-granite);
+  --sbb-table-caption-color-fallback: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-cement)
   );
-  --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);
-  }
+  font-size: var(--sbb-text-font-size-xs);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
+  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
+  text-align: left;
 }
-:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  will-change: filter;
-  filter: brightness(var(--sbb-teaser-image-brightness, 1));
-  transition: filter var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
+
+.sbb-table-sticky {
+  position: sticky !important;
 }
 
-.sbb-overlay-outlet {
-  position: fixed;
+: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;
-  pointer-events: none;
 }
 
-sub {
-  bottom: -0.36em;
+: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);
 }
 
-sup {
-  top: -0.5em;
+:is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-right {
+  border-inline-start: var(--sbb-table-border);
+}
+:is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-right::after {
+  visibility: visible;
+  opacity: 1;
+  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
+  inset-inline-start: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+  inset-inline-end: unset;
 }
 
-.sbb-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-table-align-start {
+  text-align: start;
 }
 
-.sbb-text-xxs {
-  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
+.sbb-table-align-center {
+  text-align: center;
 }
 
-.sbb-text-xs {
-  --sbb-text-font-size: var(--sbb-text-font-size-xs);
+.sbb-table-align-end {
+  text-align: end;
 }
 
-.sbb-text-s {
-  --sbb-text-font-size: var(--sbb-text-font-size-s);
+.sbb-table-align-justify {
+  text-align: justify;
 }
 
-.sbb-text-m {
-  --sbb-text-font-size: var(--sbb-text-font-size-m);
+.sbb-table-align-left {
+  text-align: left;
 }
 
-.sbb-text-l {
-  --sbb-text-font-size: var(--sbb-text-font-size-l);
+.sbb-table-align-right {
+  text-align: right;
 }
 
-.sbb-text-xl {
-  --sbb-text-font-size: var(--sbb-text-font-size-xl);
+sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  --sbb-image-object-fit: cover;
+  --sbb-image-aspect-ratio: 4 / 3;
+  scale: var(--sbb-teaser-scale, 1);
 }
 
-.sbb-text--bold {
-  font-weight: bold;
+sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  --sbb-image-aspect-ratio: 1 / 1;
+  border-radius: 0;
+}
+@media (min-width: calc(37.5rem)) {
+  sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+    --sbb-image-aspect-ratio: 16 / 9;
+  }
+}
+sbb-teaser-hero img:not(.sbb-figure-overlap-image) {
+  display: block;
+  align-self: stretch;
+  width: 100%;
 }
 
-.sbb-legend {
-  --sbb-text-font-size: var(--sbb-text-font-size-xs);
+: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-timetable-form {
+  --sbb-timetable-form-content-max-width: 46.25rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  column-gap: var(--sbb-spacing-fixed-3x);
+  border-radius: var(--sbb-border-radius-4x);
+  padding-block: var(--sbb-spacing-fixed-10x) var(--sbb-spacing-responsive-l);
+  padding-inline: var(--sbb-spacing-fixed-5x);
+  background: linear-gradient(to bottom, var(--sbb-color-primary) 0 11.125rem, var(--sbb-background-color-3) 11.125rem 100%);
+}
+@media (max-width: calc(63.9375rem)) {
+  .sbb-timetable-form:has(sbb-signet) {
+    padding-block-start: var(--sbb-spacing-fixed-4x);
+  }
+}
+.sbb-timetable-form sbb-signet {
+  width: var(--sbb-spacing-fixed-16x);
+  align-self: end;
+  margin-block-end: var(--sbb-spacing-fixed-2x);
+  margin-inline: 0;
+}
+@media (min-width: calc(64rem)) {
+  .sbb-timetable-form sbb-signet {
+    position: absolute;
+    inset-block-start: var(--sbb-spacing-fixed-6x);
+    inset-inline-end: var(--sbb-spacing-fixed-6x);
+  }
+}
+.sbb-timetable-form > * {
+  margin-inline: auto;
+  max-width: var(--sbb-timetable-form-content-max-width);
+  width: 100%;
+}
+
+sbb-timetable-form sbb-date-input {
+  min-width: 8.3125rem;
+}
+sbb-timetable-form :is(.sbb-timetable-form-block, .sbb-timetable-form-mobile-block) {
+  --sbb-form-field-focus-underline-z-index: 1;
+  width: 100%;
+  position: relative;
+}
+sbb-timetable-form :is(.sbb-timetable-form-block, .sbb-timetable-form-mobile-block)::after {
+  content: "";
+  position: absolute;
+  border-block-end: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);
+  inset-inline: var(--sbb-form-field-padding-inline);
+  inset-block-end: 0;
+}
+sbb-timetable-form :is(.sbb-timetable-form-block, .sbb-timetable-form-mobile-block) sbb-datepicker-toggle {
+  margin-inline-end: var(--sbb-spacing-fixed-6x);
+}
+@media (min-width: calc(37.5rem)) {
+  sbb-timetable-form .sbb-timetable-form-mobile-block {
+    width: unset;
+  }
+  sbb-timetable-form .sbb-timetable-form-mobile-block::after {
+    display: none;
+  }
+  sbb-timetable-form .sbb-timetable-form-mobile-block sbb-datepicker-toggle {
+    margin-inline-end: unset;
+  }
+}
+@media (max-width: calc(37.4375rem)) {
+  sbb-timetable-form .sbb-timetable-form-mobile-hidden {
+    display: none;
+  }
+}
+
+sbb-title + p {
+  margin-block-start: 0;
+}
+
+sbb-toggle:has(:focus-visible) {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
+}
+
+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);
-  padding: 0;
-  color: var(--sbb-color-granite);
-  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  color-scheme: light dark;
+  color: var(--sbb-font-color-default);
+  background-color: var(--sbb-background-color-1);
+}
+
+::placeholder {
+  color: var(--sbb-color-5);
+  -webkit-text-fill-color: var(--sbb-color-5);
+  opacity: 1;
+}
+
+:is(sbb-autocomplete,
+sbb-autocomplete-grid,
+sbb-datepicker,
+sbb-dialog,
+sbb-menu,
+sbb-navigation,
+sbb-navigation-section,
+sbb-overlay,
+sbb-popover,
+sbb-select,
+sbb-skiplink-list,
+sbb-toast,
+sbb-tooltip):not(:defined) {
+  display: none;
+}
+
+img {
+  aspect-ratio: var(--sbb-image-aspect-ratio);
+  object-fit: var(--sbb-image-object-fit);
+  object-position: var(--sbb-image-object-position);
+}
+
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
+  --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
+  --sbb-teaser-image-animation-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-4x)
+  );
+  --sbb-teaser-image-animation-easing: var(--sbb-animation-easing);
+}
+@media (any-hover: hover) {
+  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product):hover {
+    --sbb-teaser-image-brightness: var(--sbb-teaser-image-brightness-hover);
+  }
+}
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  will-change: filter, scale;
+  filter: brightness(var(--sbb-teaser-image-brightness, 1));
+  transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
+}
+
+.sbb-overlay-outlet {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
 }
 
 .sbb-screen-reader-only {
@@ -2898,39 +3119,6 @@ sup {
   --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;
 }
@@ -2946,10 +3134,22 @@ sup {
   --sbb-disable-animation-duration: initial;
 }
 
-.sbb-figure {
-  display: grid;
-  grid-template-rows: auto;
-  grid-template-columns: 100%;
+.sbb-dark {
+  color-scheme: dark;
+}
+
+.sbb-light {
+  color-scheme: light;
+}
+
+.sbb-light-dark {
+  color-scheme: light dark;
+}
+
+.sbb-figure {
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: 100%;
   grid-auto-rows: auto;
   margin: 0;
 }
@@ -2964,12 +3164,9 @@ sup {
   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);
+  font-size: var(--sbb-text-font-size-xs);
 }
 .sbb-figure :is(.sbb-figure-overlap-start-start,
 .sbb-figure-overlap-start-end,
@@ -3140,12 +3337,9 @@ sup {
   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);
+  font-size: var(--sbb-text-font-size-s);
   margin: 0;
   padding: 0;
   display: grid;
@@ -3198,13 +3392,6 @@ sup {
   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;
@@ -3218,6 +3405,10 @@ sup {
   border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
   border: var(--sbb-border-width-1x) solid light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));
   border-radius: 50%;
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-size: var(--sbb-text-font-size-xxs);
+  font-weight: bold;
 }
 .sbb-step-list > li + li {
   margin-block-start: var(--sbb-step-list-vertical-gap);
@@ -3412,338 +3603,60 @@ sup {
   --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
 }
 
-:root {
-  --sbb-table-border-color: var(--sbb-color-cloud);
-  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
-  --sbb-table-background-color: var(--sbb-background-color-1);
-  --sbb-table-row-striped-color: var(--sbb-background-color-3);
-  --sbb-table-color: var(--sbb-color-1);
-  --sbb-table-caption-color: var(--sbb-color-granite);
-  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
-  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
-  --sbb-table-sticky-shadow-width: 3rem;
-  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
-  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
-  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
-  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
-  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
-}
-
-.sbb-table,
-.sbb-table-m,
-.sbb-table-s,
-.sbb-table-xs {
-  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
-  --sbb-table-sticky-shadow-transition-duration: var(
-    --sbb-disable-animation-duration,
-    var(--sbb-animation-duration-6x)
-  );
-  border-spacing: 0;
-  caption-side: bottom;
-  color: var(--sbb-table-color);
-  table-layout: auto;
-  text-align: left;
-}
-.sbb-table th,
-.sbb-table-m th,
-.sbb-table-s th,
-.sbb-table-xs th {
-  font-size: var(--sbb-table-header-cell-font-size);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  font-weight: bold;
-  background-color: var(--sbb-table-background-color);
-  border-block-end: var(--sbb-table-border);
-  border-inline-end: var(--sbb-table-border);
-  padding-block: var(--sbb-table-header-padding-block);
-  padding-inline: var(--sbb-table-header-padding-inline);
-}
-.sbb-table td,
-.sbb-table-m td,
-.sbb-table-s td,
-.sbb-table-xs td {
-  font-size: var(--sbb-table-data-cell-font-size);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  background-color: var(--sbb-table-background-color);
-  border-block-end: var(--sbb-table-border);
-  border-inline-end: var(--sbb-table-border);
-  padding-block: var(--sbb-table-cell-padding-block);
-  padding-inline: var(--sbb-table-cell-padding-inline);
-}
-.sbb-table :is(th, td).sbb-table-group-with-next,
-.sbb-table-m :is(th, td).sbb-table-group-with-next,
-.sbb-table-s :is(th, td).sbb-table-group-with-next,
-.sbb-table-xs :is(th, td).sbb-table-group-with-next {
-  border-inline-end: none;
-}
-.sbb-table :is(th, td):first-child,
-.sbb-table-m :is(th, td):first-child,
-.sbb-table-s :is(th, td):first-child,
-.sbb-table-xs :is(th, td):first-child {
-  border-inline-start: var(--sbb-table-border);
-}
-.sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
-.sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
-.sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
-.sbb-table-s:has(thead tr) thead tr:first-of-type > :is(th, td),
-.sbb-table-s:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
-.sbb-table-xs:has(thead tr) thead tr:first-of-type > :is(th, td),
-.sbb-table-xs:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td) {
-  border-block-start: var(--sbb-table-border);
-}
-.sbb-table thead > tr:has(+ tr) > :is(th, td),
-.sbb-table-m thead > tr:has(+ tr) > :is(th, td),
-.sbb-table-s thead > tr:has(+ tr) > :is(th, td),
-.sbb-table-xs thead > tr:has(+ tr) > :is(th, td) {
-  border-block-end: none;
-}
-.sbb-table caption,
-.sbb-table-m caption,
-.sbb-table-s caption,
-.sbb-table-xs caption {
-  --sbb-table-caption-color-fallback: var(--sbb-color-granite);
-  --sbb-table-caption-color-fallback: light-dark(
-    var(--sbb-color-granite),
-    var(--sbb-color-cement)
-  );
-  font-size: var(--sbb-text-font-size-xs);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
-  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
-  text-align: left;
-}
-
-.sbb-table-xs {
-  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
-  --sbb-table-header-padding-block: 0;
-  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-1x);
-  --sbb-table-cell-padding-block: 0;
-  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
+sub {
+  bottom: -0.36em;
 }
 
-.sbb-table-s {
-  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
-  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
-  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
+sup {
+  top: -0.5em;
 }
 
-.sbb-table-m {
-  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
-  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
-  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
-  --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
-  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
+.sbb-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-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-text-xxs {
+  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
 }
 
-.sbb-table--striped tbody tr:nth-child(odd) :is(th, td) {
-  background-color: var(--sbb-table-row-striped-color);
+.sbb-text-xs {
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
 }
 
-.sbb-table--unstriped tbody tr:nth-child(odd) :is(th, td) {
-  background-color: var(--sbb-table-background-color);
+.sbb-text-s {
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
 }
 
-.sbb-table--theme-iron {
-  --sbb-table-cell-color: var(--sbb-color-4);
-}
-sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
-  --sbb-table-cell-color: var(--sbb-color-cloud);
-}
-.sbb-table--theme-iron tbody > tr > td {
-  color: var(--sbb-table-cell-color);
+.sbb-text-m {
+  --sbb-text-font-size: var(--sbb-text-font-size-m);
 }
 
-.sbb-table-header-subtitle {
-  font-weight: normal;
+.sbb-text-l {
+  --sbb-text-font-size: var(--sbb-text-font-size-l);
 }
 
-.sbb-table-header-row:last-of-type > th {
-  border-block-end: var(--sbb-table-border);
+.sbb-text-xl {
+  --sbb-text-font-size: var(--sbb-text-font-size-xl);
 }
 
-.sbb-table-header-cell {
-  font-size: var(--sbb-table-header-cell-font-size);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
+.sbb-text--bold {
   font-weight: bold;
-  background-color: var(--sbb-table-background-color);
-  border-block-end: var(--sbb-table-border);
-  border-inline-end: var(--sbb-table-border);
-  padding-block: var(--sbb-table-header-padding-block);
-  padding-inline: var(--sbb-table-header-padding-inline);
-}
-
-.sbb-table-row--striped {
-  background-color: var(--sbb-table-row-striped-color);
 }
 
-.sbb-table-data-cell {
-  font-size: var(--sbb-table-data-cell-font-size);
+.sbb-legend {
+  line-height: var(--sbb-typo-line-height-text);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
-  background-color: var(--sbb-table-background-color);
-  border-block-end: var(--sbb-table-border);
-  border-inline-end: var(--sbb-table-border);
-  padding-block: var(--sbb-table-cell-padding-block);
-  padding-inline: var(--sbb-table-cell-padding-inline);
-}
-
-.sbb-table-caption {
-  --sbb-table-caption-color-fallback: var(--sbb-color-granite);
-  --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
   font-size: var(--sbb-text-font-size-xs);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
-  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
-  text-align: left;
-}
-
-.sbb-table-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;
-}
-
-.sbb-table-align-start {
-  text-align: start;
-}
-
-.sbb-table-align-center {
-  text-align: center;
-}
-
-.sbb-table-align-end {
-  text-align: end;
-}
-
-.sbb-table-align-justify {
-  text-align: justify;
-}
-
-.sbb-table-align-left {
-  text-align: left;
-}
-
-.sbb-table-align-right {
-  text-align: right;
-}
-
-.sbb-timetable-form {
-  --sbb-timetable-form-content-max-width: 46.25rem;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  column-gap: var(--sbb-spacing-fixed-3x);
-  border-radius: var(--sbb-border-radius-4x);
-  padding-block: var(--sbb-spacing-fixed-10x) var(--sbb-spacing-responsive-l);
-  padding-inline: var(--sbb-spacing-fixed-5x);
-  background: linear-gradient(to bottom, var(--sbb-color-primary) 0 11.125rem, var(--sbb-background-color-3) 11.125rem 100%);
-}
-@media (max-width: calc(63.9375rem)) {
-  .sbb-timetable-form:has(sbb-signet) {
-    padding-block-start: var(--sbb-spacing-fixed-4x);
-  }
-}
-.sbb-timetable-form sbb-signet {
-  width: var(--sbb-spacing-fixed-16x);
-  align-self: end;
-  margin-block-end: var(--sbb-spacing-fixed-2x);
-  margin-inline: 0;
-}
-@media (min-width: calc(64rem)) {
-  .sbb-timetable-form sbb-signet {
-    position: absolute;
-    inset-block-start: var(--sbb-spacing-fixed-6x);
-    inset-inline-end: var(--sbb-spacing-fixed-6x);
-  }
-}
-.sbb-timetable-form > * {
-  margin-inline: auto;
-  max-width: var(--sbb-timetable-form-content-max-width);
-  width: 100%;
-}
-
-sbb-timetable-form sbb-date-input {
-  min-width: 8.3125rem;
-}
-sbb-timetable-form .sbb-timetable-form-block {
-  --sbb-form-field-focus-underline-z-index: 1;
-  width: 100%;
-  position: relative;
-}
-sbb-timetable-form .sbb-timetable-form-block::after {
-  content: "";
-  position: absolute;
-  border-block-end: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);
-  inset-inline: var(--sbb-form-field-padding-inline);
-  inset-block-end: 0;
-}
-sbb-timetable-form .sbb-timetable-form-block sbb-datepicker-toggle {
-  margin-inline-end: var(--sbb-spacing-fixed-6x);
-}
-@media (max-width: calc(37.4375rem)) {
-  sbb-timetable-form .sbb-timetable-form-mobile-block {
-    --sbb-form-field-focus-underline-z-index: 1;
-    width: 100%;
-    position: relative;
-  }
-  sbb-timetable-form .sbb-timetable-form-mobile-block::after {
-    content: "";
-    position: absolute;
-    border-block-end: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);
-    inset-inline: var(--sbb-form-field-padding-inline);
-    inset-block-end: 0;
-  }
-  sbb-timetable-form .sbb-timetable-form-mobile-block sbb-datepicker-toggle {
-    margin-inline-end: var(--sbb-spacing-fixed-6x);
-  }
-  sbb-timetable-form .sbb-timetable-form-mobile-hidden {
-    display: none;
-  }
+  padding: 0;
+  color: var(--sbb-color-granite);
+  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
 }