@db-ux/core-foundations 5.7.0 → 6.0.0

package/build/styles/bundle.css

@@ -1,4 +1,4 @@
-/* Use this file if you want the default color and density in your project */
+/* Required styles to normalize default css */
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 /* Variants for adaptive components like input, select, notification, ... */
@@ -205,630 +205,13 @@ code {
  * `defaults/default-fonts.scss`, which styles bare `h1`-`h6`, and by the Heading
  * component styles in `@db-ux/core-components`. Those must not pull in the
  * emitted default-fonts CSS just to read the mapping. */
-:root,
-:host {
-  --db-sizing-3xs: var(--db-sizing-regular-3xs);
-  --db-sizing-2xs: var(--db-sizing-regular-2xs);
-  --db-sizing-xs: var(--db-sizing-regular-xs);
-  --db-sizing-sm: var(--db-sizing-regular-sm);
-  --db-sizing-md: var(--db-sizing-regular-md);
-  --db-sizing-lg: var(--db-sizing-regular-lg);
-  --db-sizing-xl: var(--db-sizing-regular-xl);
-  --db-sizing-2xl: var(--db-sizing-regular-2xl);
-  --db-sizing-3xl: var(--db-sizing-regular-3xl);
-  --db-spacing-fixed-3xs: var(--db-spacing-fixed-regular-3xs);
-  --db-spacing-fixed-2xs: var(--db-spacing-fixed-regular-2xs);
-  --db-spacing-fixed-xs: var(--db-spacing-fixed-regular-xs);
-  --db-spacing-fixed-sm: var(--db-spacing-fixed-regular-sm);
-  --db-spacing-fixed-md: var(--db-spacing-fixed-regular-md);
-  --db-spacing-fixed-lg: var(--db-spacing-fixed-regular-lg);
-  --db-spacing-fixed-xl: var(--db-spacing-fixed-regular-xl);
-  --db-spacing-fixed-2xl: var(--db-spacing-fixed-regular-2xl);
-  --db-spacing-fixed-3xl: var(--db-spacing-fixed-regular-3xl);
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (width <= 48em) {
-  :root,
-  :host {
-    --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-mobile-3xs);
-    --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-mobile-2xs);
-    --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-mobile-xs);
-    --db-spacing-responsive-sm: var(--db-spacing-responsive-regular-mobile-sm);
-    --db-spacing-responsive-md: var(--db-spacing-responsive-regular-mobile-md);
-    --db-spacing-responsive-lg: var(--db-spacing-responsive-regular-mobile-lg);
-    --db-spacing-responsive-xl: var(--db-spacing-responsive-regular-mobile-xl);
-    --db-spacing-responsive-2xl: var(--db-spacing-responsive-regular-mobile-2xl);
-    --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-mobile-3xl);
-  }
-}
-:root,
-:host {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (48em < width <= 64em) {
-  :root,
-  :host {
-    --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-tablet-3xs);
-    --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-tablet-2xs);
-    --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-tablet-xs);
-    --db-spacing-responsive-sm: var(--db-spacing-responsive-regular-tablet-sm);
-    --db-spacing-responsive-md: var(--db-spacing-responsive-regular-tablet-md);
-    --db-spacing-responsive-lg: var(--db-spacing-responsive-regular-tablet-lg);
-    --db-spacing-responsive-xl: var(--db-spacing-responsive-regular-tablet-xl);
-    --db-spacing-responsive-2xl: var(--db-spacing-responsive-regular-tablet-2xl);
-    --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-tablet-3xl);
-  }
-}
-:root,
-:host {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (64em < width) {
-  :root,
-  :host {
-    --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-desktop-3xs);
-    --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-desktop-2xs);
-    --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-desktop-xs);
-    --db-spacing-responsive-sm: var(--db-spacing-responsive-regular-desktop-sm);
-    --db-spacing-responsive-md: var(--db-spacing-responsive-regular-desktop-md);
-    --db-spacing-responsive-lg: var(--db-spacing-responsive-regular-desktop-lg);
-    --db-spacing-responsive-xl: var(--db-spacing-responsive-regular-desktop-xl);
-    --db-spacing-responsive-2xl: var(--db-spacing-responsive-regular-desktop-2xl);
-    --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-desktop-3xl);
-  }
-}
-:root,
-:host {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-
-:root,
-:host {
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (width <= 48em) {
-  :root,
-  :host {
-    --db-type-headline-3xs: var(--db-typography-regular-mobile-headline-3xs);
-    --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-headline-3xs);
-    --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-headline-3xs);
-    --db-type-headline-2xs: var(--db-typography-regular-mobile-headline-2xs);
-    --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-regular-mobile-headline-2xs);
-    --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-regular-mobile-headline-2xs);
-    --db-type-headline-xs: var(--db-typography-regular-mobile-headline-xs);
-    --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-regular-mobile-headline-xs);
-    --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-regular-mobile-headline-xs);
-    --db-type-headline-sm: var(--db-typography-regular-mobile-headline-sm);
-    --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-regular-mobile-headline-sm);
-    --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-regular-mobile-headline-sm);
-    --db-type-headline-md: var(--db-typography-regular-mobile-headline-md);
-    --db-base-headline-icon-weight-md: var(--db-base-icon-weight-regular-mobile-headline-md);
-    --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-regular-mobile-headline-md);
-    --db-type-headline-lg: var(--db-typography-regular-mobile-headline-lg);
-    --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-regular-mobile-headline-lg);
-    --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-regular-mobile-headline-lg);
-    --db-type-headline-xl: var(--db-typography-regular-mobile-headline-xl);
-    --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-regular-mobile-headline-xl);
-    --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-regular-mobile-headline-xl);
-    --db-type-headline-2xl: var(--db-typography-regular-mobile-headline-2xl);
-    --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-regular-mobile-headline-2xl);
-    --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-regular-mobile-headline-2xl);
-    --db-type-headline-3xl: var(--db-typography-regular-mobile-headline-3xl);
-    --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-regular-mobile-headline-3xl);
-    --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-headline-3xl);
-  }
-}
-:root,
-:host {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (48em < width <= 64em) {
-  :root,
-  :host {
-    --db-type-headline-3xs: var(--db-typography-regular-tablet-headline-3xs);
-    --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-headline-3xs);
-    --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-tablet-headline-3xs);
-    --db-type-headline-2xs: var(--db-typography-regular-tablet-headline-2xs);
-    --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-regular-tablet-headline-2xs);
-    --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-regular-tablet-headline-2xs);
-    --db-type-headline-xs: var(--db-typography-regular-tablet-headline-xs);
-    --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-regular-tablet-headline-xs);
-    --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-regular-tablet-headline-xs);
-    --db-type-headline-sm: var(--db-typography-regular-tablet-headline-sm);
-    --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-regular-tablet-headline-sm);
-    --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-regular-tablet-headline-sm);
-    --db-type-headline-md: var(--db-typography-regular-tablet-headline-md);
-    --db-base-headline-icon-weight-md: var(--db-base-icon-weight-regular-tablet-headline-md);
-    --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-regular-tablet-headline-md);
-    --db-type-headline-lg: var(--db-typography-regular-tablet-headline-lg);
-    --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-regular-tablet-headline-lg);
-    --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-regular-tablet-headline-lg);
-    --db-type-headline-xl: var(--db-typography-regular-tablet-headline-xl);
-    --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-regular-tablet-headline-xl);
-    --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-regular-tablet-headline-xl);
-    --db-type-headline-2xl: var(--db-typography-regular-tablet-headline-2xl);
-    --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-regular-tablet-headline-2xl);
-    --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-regular-tablet-headline-2xl);
-    --db-type-headline-3xl: var(--db-typography-regular-tablet-headline-3xl);
-    --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-regular-tablet-headline-3xl);
-    --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-tablet-headline-3xl);
-  }
-}
-:root,
-:host {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (64em < width) {
-  :root,
-  :host {
-    --db-type-headline-3xs: var(--db-typography-regular-desktop-headline-3xs);
-    --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-desktop-headline-3xs);
-    --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-desktop-headline-3xs);
-    --db-type-headline-2xs: var(--db-typography-regular-desktop-headline-2xs);
-    --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-regular-desktop-headline-2xs);
-    --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-regular-desktop-headline-2xs);
-    --db-type-headline-xs: var(--db-typography-regular-desktop-headline-xs);
-    --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-regular-desktop-headline-xs);
-    --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-regular-desktop-headline-xs);
-    --db-type-headline-sm: var(--db-typography-regular-desktop-headline-sm);
-    --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-regular-desktop-headline-sm);
-    --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-regular-desktop-headline-sm);
-    --db-type-headline-md: var(--db-typography-regular-desktop-headline-md);
-    --db-base-headline-icon-weight-md: var(--db-base-icon-weight-regular-desktop-headline-md);
-    --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-regular-desktop-headline-md);
-    --db-type-headline-lg: var(--db-typography-regular-desktop-headline-lg);
-    --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-regular-desktop-headline-lg);
-    --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-regular-desktop-headline-lg);
-    --db-type-headline-xl: var(--db-typography-regular-desktop-headline-xl);
-    --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-regular-desktop-headline-xl);
-    --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-regular-desktop-headline-xl);
-    --db-type-headline-2xl: var(--db-typography-regular-desktop-headline-2xl);
-    --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-regular-desktop-headline-2xl);
-    --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-regular-desktop-headline-2xl);
-    --db-type-headline-3xl: var(--db-typography-regular-desktop-headline-3xl);
-    --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-regular-desktop-headline-3xl);
-    --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-desktop-headline-3xl);
-  }
-}
-:root,
-:host {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-
-:root,
-:host {
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (width <= 48em) {
-  :root,
-  :host {
-    --db-type-body-3xs: var(--db-typography-regular-mobile-body-3xs);
-    --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-body-3xs);
-    --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-body-3xs);
-    --db-type-body-2xs: var(--db-typography-regular-mobile-body-2xs);
-    --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-regular-mobile-body-2xs);
-    --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-regular-mobile-body-2xs);
-    --db-type-body-xs: var(--db-typography-regular-mobile-body-xs);
-    --db-base-body-icon-weight-xs: var(--db-base-icon-weight-regular-mobile-body-xs);
-    --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-regular-mobile-body-xs);
-    --db-type-body-sm: var(--db-typography-regular-mobile-body-sm);
-    --db-base-body-icon-weight-sm: var(--db-base-icon-weight-regular-mobile-body-sm);
-    --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-regular-mobile-body-sm);
-    --db-type-body-md: var(--db-typography-regular-mobile-body-md);
-    --db-base-body-icon-weight-md: var(--db-base-icon-weight-regular-mobile-body-md);
-    --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-regular-mobile-body-md);
-    --db-type-body-lg: var(--db-typography-regular-mobile-body-lg);
-    --db-base-body-icon-weight-lg: var(--db-base-icon-weight-regular-mobile-body-lg);
-    --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-regular-mobile-body-lg);
-    --db-type-body-xl: var(--db-typography-regular-mobile-body-xl);
-    --db-base-body-icon-weight-xl: var(--db-base-icon-weight-regular-mobile-body-xl);
-    --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-regular-mobile-body-xl);
-    --db-type-body-2xl: var(--db-typography-regular-mobile-body-2xl);
-    --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-regular-mobile-body-2xl);
-    --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-regular-mobile-body-2xl);
-    --db-type-body-3xl: var(--db-typography-regular-mobile-body-3xl);
-    --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-regular-mobile-body-3xl);
-    --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-body-3xl);
-  }
-}
-:root,
-:host {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (48em < width <= 64em) {
-  :root,
-  :host {
-    --db-type-body-3xs: var(--db-typography-regular-tablet-body-3xs);
-    --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-body-3xs);
-    --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-tablet-body-3xs);
-    --db-type-body-2xs: var(--db-typography-regular-tablet-body-2xs);
-    --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-regular-tablet-body-2xs);
-    --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-regular-tablet-body-2xs);
-    --db-type-body-xs: var(--db-typography-regular-tablet-body-xs);
-    --db-base-body-icon-weight-xs: var(--db-base-icon-weight-regular-tablet-body-xs);
-    --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-regular-tablet-body-xs);
-    --db-type-body-sm: var(--db-typography-regular-tablet-body-sm);
-    --db-base-body-icon-weight-sm: var(--db-base-icon-weight-regular-tablet-body-sm);
-    --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-regular-tablet-body-sm);
-    --db-type-body-md: var(--db-typography-regular-tablet-body-md);
-    --db-base-body-icon-weight-md: var(--db-base-icon-weight-regular-tablet-body-md);
-    --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-regular-tablet-body-md);
-    --db-type-body-lg: var(--db-typography-regular-tablet-body-lg);
-    --db-base-body-icon-weight-lg: var(--db-base-icon-weight-regular-tablet-body-lg);
-    --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-regular-tablet-body-lg);
-    --db-type-body-xl: var(--db-typography-regular-tablet-body-xl);
-    --db-base-body-icon-weight-xl: var(--db-base-icon-weight-regular-tablet-body-xl);
-    --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-regular-tablet-body-xl);
-    --db-type-body-2xl: var(--db-typography-regular-tablet-body-2xl);
-    --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-regular-tablet-body-2xl);
-    --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-regular-tablet-body-2xl);
-    --db-type-body-3xl: var(--db-typography-regular-tablet-body-3xl);
-    --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-regular-tablet-body-3xl);
-    --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-tablet-body-3xl);
-  }
-}
-:root,
-:host {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (64em < width) {
-  :root,
-  :host {
-    --db-type-body-3xs: var(--db-typography-regular-desktop-body-3xs);
-    --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-desktop-body-3xs);
-    --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-desktop-body-3xs);
-    --db-type-body-2xs: var(--db-typography-regular-desktop-body-2xs);
-    --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-regular-desktop-body-2xs);
-    --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-regular-desktop-body-2xs);
-    --db-type-body-xs: var(--db-typography-regular-desktop-body-xs);
-    --db-base-body-icon-weight-xs: var(--db-base-icon-weight-regular-desktop-body-xs);
-    --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-regular-desktop-body-xs);
-    --db-type-body-sm: var(--db-typography-regular-desktop-body-sm);
-    --db-base-body-icon-weight-sm: var(--db-base-icon-weight-regular-desktop-body-sm);
-    --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-regular-desktop-body-sm);
-    --db-type-body-md: var(--db-typography-regular-desktop-body-md);
-    --db-base-body-icon-weight-md: var(--db-base-icon-weight-regular-desktop-body-md);
-    --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-regular-desktop-body-md);
-    --db-type-body-lg: var(--db-typography-regular-desktop-body-lg);
-    --db-base-body-icon-weight-lg: var(--db-base-icon-weight-regular-desktop-body-lg);
-    --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-regular-desktop-body-lg);
-    --db-type-body-xl: var(--db-typography-regular-desktop-body-xl);
-    --db-base-body-icon-weight-xl: var(--db-base-icon-weight-regular-desktop-body-xl);
-    --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-regular-desktop-body-xl);
-    --db-type-body-2xl: var(--db-typography-regular-desktop-body-2xl);
-    --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-regular-desktop-body-2xl);
-    --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-regular-desktop-body-2xl);
-    --db-type-body-3xl: var(--db-typography-regular-desktop-body-3xl);
-    --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-regular-desktop-body-3xl);
-    --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-desktop-body-3xl);
-  }
-}
-:root,
-:host {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-
-/* Use this file if you want the default elevation data attributes in your project */
-.db-interactive-elevation,
-[data-interactive=elevation] {
-  cursor: pointer;
-  box-shadow: var(--db-elevation-md);
-}
-@media (prefers-reduced-motion: no-preference) {
-  .db-interactive-elevation,
-  [data-interactive=elevation] {
-    transition: box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional);
-  }
-}
-.db-interactive-elevation,
-[data-interactive=elevation] {
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
-}
-.db-interactive-elevation:hover,
-[data-interactive=elevation]:hover {
-  cursor: var(--db-overwrite-cursor, pointer);
-  box-shadow: var(--db-elevation-lg);
-}
-.db-interactive-elevation:active,
-[data-interactive=elevation]:active {
-  cursor: var(--db-overwrite-cursor, pointer);
-  box-shadow: var(--db-elevation-sm);
-}
-
-/* Use this file if you want the default fonts for paragraph and headlines in your project */
-h1 {
-  /* stylelint-disable custom-property-pattern */
-  font: var(--db-type-headline-xl);
-  margin-block: var(--db-spacing-fixed-xl);
-}
-h1::before, h1::after {
-  --db-icon-font-size: var(
-  	--db-base-headline-icon-font-size-xl
-  );
-  --db-icon-font-weight: var(
-  	--db-base-headline-icon-weight-xl
-  );
-}
-h1 {
-  /* stylelint-enable custom-property-pattern */
-}
-
-h2 {
-  /* stylelint-disable custom-property-pattern */
-  font: var(--db-type-headline-lg);
-  margin-block: var(--db-spacing-fixed-lg);
-}
-h2::before, h2::after {
-  --db-icon-font-size: var(
-  	--db-base-headline-icon-font-size-lg
-  );
-  --db-icon-font-weight: var(
-  	--db-base-headline-icon-weight-lg
-  );
-}
-h2 {
-  /* stylelint-enable custom-property-pattern */
-}
-
-h3 {
-  /* stylelint-disable custom-property-pattern */
-  font: var(--db-type-headline-md);
-  margin-block: var(--db-spacing-fixed-md);
-}
-h3::before, h3::after {
-  --db-icon-font-size: var(
-  	--db-base-headline-icon-font-size-md
-  );
-  --db-icon-font-weight: var(
-  	--db-base-headline-icon-weight-md
-  );
-}
-h3 {
-  /* stylelint-enable custom-property-pattern */
-}
-
-h4 {
-  /* stylelint-disable custom-property-pattern */
-  font: var(--db-type-headline-sm);
-  margin-block: var(--db-spacing-fixed-sm);
-}
-h4::before, h4::after {
-  --db-icon-font-size: var(
-  	--db-base-headline-icon-font-size-sm
-  );
-  --db-icon-font-weight: var(
-  	--db-base-headline-icon-weight-sm
-  );
-}
-h4 {
-  /* stylelint-enable custom-property-pattern */
-}
-
-h5 {
-  /* stylelint-disable custom-property-pattern */
-  font: var(--db-type-headline-xs);
-  margin-block: var(--db-spacing-fixed-xs);
-}
-h5::before, h5::after {
-  --db-icon-font-size: var(
-  	--db-base-headline-icon-font-size-xs
-  );
-  --db-icon-font-weight: var(
-  	--db-base-headline-icon-weight-xs
-  );
-}
-h5 {
-  /* stylelint-enable custom-property-pattern */
-}
-
-h6 {
-  /* stylelint-disable custom-property-pattern */
-  font: var(--db-type-headline-2xs);
-  margin-block: var(--db-spacing-fixed-2xs);
-}
-h6::before, h6::after {
-  --db-icon-font-size: var(
-  	--db-base-headline-icon-font-size-2xs
-  );
-  --db-icon-font-weight: var(
-  	--db-base-headline-icon-weight-2xs
-  );
-}
-h6 {
-  /* stylelint-enable custom-property-pattern */
-}
-
-:is(h1, h2, h3, h4, h5, h6) {
-  font-family: var(--db-font-family-head);
-  font-weight: bolder;
-  text-wrap: balance;
-}
-:is(h1, h2, h3, h4, h5, h6)[data-variant=light] {
-  font-weight: 300;
-}
-:is(h1, h2, h3, h4, h5, h6)[data-variant=regular] {
-  font-weight: 400;
-}
-
-p {
-  margin-block: var(--db-spacing-fixed-md);
-}
-
-[data-font=digital] {
-  font-weight: 300;
-}
-
-[data-font=regular] {
-  font-weight: 400;
-}
-
-[data-font=medium] {
-  font-weight: 500;
-}
-
-[data-font=semibold] {
-  font-weight: 600;
-}
-
-[data-font=bold],
-strong {
-  font-weight: 700;
-}
-
-/* Use this file if you want to use the defaults for the <code> tag in your project */
-pre:not([class]):has(code) {
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-on-bg-inverted-default);
-  padding: var(--db-spacing-fixed-xs);
-}
-pre:not([class]):has(code),
-pre:not([class]):has(code) code,
-pre:not([class]):has(code) span {
-  font-family: monospace;
-}
-
-a:has(code:not([class]):only-child) {
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-on-bg-inverted-default);
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
-}
-a:has(code:not([class]):only-child):hover {
-  cursor: var(--db-overwrite-cursor, pointer);
-  color: var(--db-adaptive-on-bg-inverted-hovered);
-}
-a:has(code:not([class]):only-child):active {
-  cursor: var(--db-overwrite-cursor, pointer);
-  color: var(--db-adaptive-on-bg-inverted-pressed);
-}
-a:has(code:not([class]):only-child) > code {
-  color: inherit;
-}
-
-code:not([class]) {
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-on-bg-inverted-default);
-  padding-block: var(--db-spacing-fixed-3xs);
-  padding-inline: var(--db-spacing-fixed-2xs);
-}
-code:not([class]),
-code:not([class]) span {
-  font-family: monospace;
-}
-
-blockquote:not([class]) {
-  margin: 0;
-  padding: var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md);
-}
-
-[data-icon]::before,
-[data-icon-leading]::before, [data-icon-trailing]::after {
-  color: var(--db-icon-color, inherit);
-  display: inline-block;
-  /*** icon - placeholder ***/
-  font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
-  font-size: var(--db-icon-font-size, 1.5rem);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-style: normal;
-  font-variant: normal;
-  font-weight: var(--db-icon-font-weight, normal);
-  line-height: 1;
-  /* stylelint-disable-next-line declaration-property-value-no-unknown */
-  speak: none;
-  /* stylelint-disable-next-line declaration-property-value-no-unknown */
-  speak: never;
-  text-transform: none;
-  overflow: clip;
-  contain: layout;
-  vertical-align: var(--db-icon-vertical-align, middle);
-  /* stylelint-disable-next-line db-ux/use-sizing */
-  block-size: var(--db-icon-font-size, 1.5rem);
-  /* stylelint-disable-next-line db-ux/use-sizing */
-  inline-size: var(--db-icon-font-size, 1.5rem);
-  aspect-ratio: 1;
-  flex-shrink: 0;
-  text-underline-position: auto;
-  content: var(--db-icon, attr(data-icon));
-}
-@supports (content: ""/"") {
-  [data-icon]::before,
-  [data-icon-leading]::before, [data-icon-trailing]::after {
-    content: var(--db-icon, attr(data-icon))/"";
-  }
-}
-@media aural {
-  [data-icon]::before,
-  [data-icon-leading]::before, [data-icon-trailing]::after {
-    content: none;
-  }
-}
-@media speech {
-  [data-icon]::before,
-  [data-icon-leading]::before, [data-icon-trailing]::after {
-    content: none;
-  }
-}
-
-[data-icon]:is(span):not([hidden]),
-[data-icon-leading]:is(span):not([hidden]),
-[data-icon-trailing]:is(span):not([hidden]) {
-  display: inline-flex;
-}
-[data-icon]:is(span),
-[data-icon-leading]:is(span),
-[data-icon-trailing]:is(span) {
-  vertical-align: baseline;
-}
-
-[data-show-icon=false]::before,
-[data-show-icon-leading=false]::before,
-[data-icon=none]::before,
-[data-icon-leading=none]::before {
-  content: none;
-}
-
-[data-icon-trailing]::after {
-  content: var(--db-icon-trailing, attr(data-icon-trailing));
-}
-@supports (content: ""/"") {
-  [data-icon-trailing]::after {
-    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
-  }
-}
-
-[data-show-icon-trailing=false]::after,
-[data-icon-trailing=none]::after {
-  content: none;
-}
-
-.is-icon-text-replace[data-icon], .is-icon-text-replace[data-icon-leading] {
-  font-size: 0 !important;
-}
-.is-icon-text-replace[data-icon-trailing] {
-  font-size: 0 !important;
-}
-
-@font-face {
-  font-display: block;
-  font-family: icon-font-fallback;
-  font-style: normal;
-  font-weight: normal;
-  src: url("data:application/octet-stream;base64,d09GMgABAAAAAALAAAsAAAAAB8gAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACFegoUPAE2AiQDCAsGAAQgBYUOBysbJAfIrjBu4YkWdj4mP/wNUwgBWAAK8Tz92uu5bzeIKpJ4PLCOwgJxKmxlVZUBVhLY/+63n6ZlVd+q+JYluo4VQv5R4ejdz9BP+Dk5hUpNjXBxv1sBaSJaC0igiNLJzS9wsNc8ihPOOIQQDhtwgIHHieM+PDyHi1tAAf8GeS/KbE3LojUWRgWST5B5exuFB3wIN0wv8NNgfEfQbtFccWvn4BgaN8+xh5YyNRvi/Ny8Zgjq3KNWw3iraG57bRo5Szkujxf+6fPVUqBoqqg37N5Cwoc5rzWOpudsgi8raEKFWaAmr+ojL1XKpCXtqeMq0KoPFcy58/oPRRSB1Op2NAA8R2mm1BqaRf4/kNsJOYtiI8CcJThDcI7gPMEFgosElwguE1whuEpwjeA6wQ2CmwS3CG4T3CG4S3CP4D7BA4KHBI8IHhM8IXhK8Izg+HBAAXXa8BOMJ38cKc/DzT/WMg9r1ILw5bU7Q/1vhVyEX53987Xt7P5KlNBG505O4806S401qeGyRnO7dvHDYvT6rJmO/t24W/TH5iq0N6GglrRp0mGZZv12aDfj8uYOA95U6jYx6h1QdPtAZdSvoJb802Q40mw00W4vc06H8XxNBN/VwbPzC2RtRmJzqMyDpVTYIXeKU5XyVfA4VFZ8ZFt5lYiVxOwF80czYtaoU3C41eRlytqAMYW1EtxbMsdxP7bsyp4IDlaEwOvSvpXDv5xYVoYIG4cU44FFUuue6ytPKUluxTaPhnoGvQTbVt9TmTBF/jzzAuUeGSOMaUhLAgdtjWRVo0QCFMt3rSkC61n2CEVjfT1Ot7X21uR1ipQK7baUlFQyBwAAAAA=");
-}
-/* Required styles to normalize default css */
-/* Non-ASCII character tokens as CSS custom properties.
- * This file is plain CSS (not SCSS) so that Sass does not resolve the escape
- * sequences to literal characters, which would emit @charset "UTF-8".
- * See: https://github.com/db-ux-design-system/core-web/issues/7525
- * TODO: Maybe this could become an official token as well */
-:root {
-  --db-list-bullet: "\2022\a0";
+/* Non-ASCII character tokens as CSS custom properties.
+ * This file is plain CSS (not SCSS) so that Sass does not resolve the escape
+ * sequences to literal characters, which would emit @charset "UTF-8".
+ * See: https://github.com/db-ux-design-system/core-web/issues/7525
+ * TODO: Maybe this could become an official token as well */
+:root {
+  --db-list-bullet: "\2022\a0";
 }
 
 :root {
@@ -4247,405 +3630,1068 @@ blockquote:not([class]) {
   	var(--db-burgundy-1),
   	var(--db-burgundy-12)
   );
-  --db-burgundy-bg-inverted-contrast-max-hovered: light-dark(
-  	var(--db-burgundy-5),
-  	var(--db-burgundy-9)
+  --db-burgundy-bg-inverted-contrast-max-hovered: light-dark(
+  	var(--db-burgundy-5),
+  	var(--db-burgundy-9)
+  );
+  --db-burgundy-bg-inverted-contrast-max-pressed: light-dark(
+  	var(--db-burgundy-2),
+  	var(--db-burgundy-11)
+  );
+  --db-burgundy-bg-inverted-contrast-high-default: light-dark(
+  	var(--db-burgundy-6),
+  	var(--db-burgundy-9)
+  );
+  --db-burgundy-bg-inverted-contrast-high-hovered: light-dark(
+  	var(--db-burgundy-2),
+  	var(--db-burgundy-12)
+  );
+  --db-burgundy-bg-inverted-contrast-high-pressed: light-dark(
+  	var(--db-burgundy-5),
+  	var(--db-burgundy-10)
+  );
+  --db-burgundy-bg-inverted-contrast-low-default: light-dark(
+  	var(--db-burgundy-7),
+  	var(--db-burgundy-8)
+  );
+  --db-burgundy-bg-inverted-contrast-low-hovered: light-dark(
+  	var(--db-burgundy-3),
+  	var(--db-burgundy-12)
+  );
+  --db-burgundy-bg-inverted-contrast-low-pressed: light-dark(
+  	var(--db-burgundy-6),
+  	var(--db-burgundy-9)
+  );
+  --db-burgundy-bg-vibrant-default: light-dark(
+  	var(--db-burgundy-9),
+  	var(--db-burgundy-9)
+  );
+  --db-burgundy-bg-vibrant-hovered: light-dark(
+  	var(--db-burgundy-12),
+  	var(--db-burgundy-12)
+  );
+  --db-burgundy-bg-vibrant-pressed: light-dark(
+  	var(--db-burgundy-10),
+  	var(--db-burgundy-10)
+  );
+}
+
+/* Document
+ * ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+:where(html) {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+ * ========================================================================== */
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Edge, Firefox, and Safari.
+ */
+:where(h1) {
+  font-size: 2em;
+  margin-block-end: 0.67em;
+  margin-block-start: 0.67em;
+}
+
+/* Grouping content
+ * ========================================================================== */
+/**
+ * Remove the margin on nested lists in Chrome, Edge, and Safari.
+ */
+:where(dl, ol, ul) :where(dl, ol, ul) {
+  margin-block-end: 0;
+  margin-block-start: 0;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Correct the inheritance of border color in Firefox.
+ */
+:where(hr) {
+  box-sizing: content-box; /* 1 */
+  color: inherit; /* 2 */
+  height: 0; /* 1 */
+}
+
+/* Text-level semantics
+ * ========================================================================== */
+/**
+ * Add the correct text decoration in Safari.
+ */
+:where(abbr[title]) {
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+:where(b, strong) {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+:where(code, kbd, pre, samp) {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+:where(small) {
+  font-size: 80%;
+}
+
+/* Tabular data
+ * ========================================================================== */
+/**
+ * 1. Correct table border color in Chrome, Edge, and Safari.
+ * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
+ */
+:where(table) {
+  border-color: currentColor; /* 1 */
+  text-indent: 0; /* 2 */
+}
+
+/* Forms
+ * ========================================================================== */
+/**
+ * Remove the margin on controls in Safari.
+ */
+:where(button, input, select) {
+  margin: 0;
+}
+
+/**
+ * Remove the inheritance of text transform in Firefox.
+ */
+:where(button) {
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style buttons in iOS and Safari.
+ */
+:where(button, input:is([type=button i], [type=reset i], [type=submit i])) {
+  -webkit-appearance: button;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Edge, and Firefox.
+ */
+:where(progress) {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the inheritance of text transform in Firefox.
+ */
+:where(select) {
+  text-transform: none;
+}
+
+/**
+ * Remove the margin in Firefox and Safari.
+ */
+:where(textarea) {
+  margin: 0;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome, Edge, and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+:where(input[type=search i]) {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Safari.
+ */
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
+ */
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+/**
+ * Remove the inner padding in Chrome, Edge, and Safari on macOS.
+ */
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style upload buttons in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding of focus outlines in Firefox.
+ */
+:where(button, input:is([type=button i], [type=color i], [type=reset i], [type=submit i]))::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus outline styles unset by the previous rule in Firefox.
+ */
+:where(button, input:is([type=button i], [type=color i], [type=reset i], [type=submit i]))::-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Remove the additional :invalid styles in Firefox.
+ */
+:where(:-moz-ui-invalid) {
+  box-shadow: none;
+}
+
+/* Interactive
+ * ========================================================================== */
+/*
+ * Add the correct styles in Safari.
+ */
+:where(dialog) {
+  background-color: white;
+  border: solid;
+  color: black;
+  height: -moz-fit-content;
+  height: fit-content;
+  left: 0;
+  margin: auto;
+  padding: 1em;
+  position: absolute;
+  right: 0;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+:where(dialog:not([open])) {
+  display: none;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+:where(summary) {
+  display: list-item;
+}
+
+@property --db-screen-xs {
+  syntax: "*";
+  inherits: true;
+  initial-value: 20em;
+}
+@property --db-screen-sm {
+  syntax: "*";
+  inherits: true;
+  initial-value: 48em;
+}
+@property --db-screen-md {
+  syntax: "*";
+  inherits: true;
+  initial-value: 64em;
+}
+@property --db-screen-lg {
+  syntax: "*";
+  inherits: true;
+  initial-value: 90em;
+}
+@property --db-screen-xl {
+  syntax: "*";
+  inherits: true;
+  initial-value: 120em;
+}
+:root {
+  color-scheme: var(--db-color-scheme, light dark);
+}
+:root:has([name=color-scheme]:is([content~=light], [content~=dark])) {
+  color-scheme: var(--db-color-scheme);
+}
+
+[data-mode=light] {
+  color-scheme: light;
+}
+
+[data-mode=dark] {
+  color-scheme: dark;
+}
+
+[data-pride=true] {
+  --db-pride-red: var(--db-red-origin-default);
+  --db-pride-orange: var(--db-orange-origin-default);
+  --db-pride-yellow: var(--db-yellow-origin-default);
+  --db-pride-green: var(--db-light-green-origin-default);
+  --db-pride-blue: var(--db-blue-origin-default);
+  --db-pride-violet: var(--db-violet-origin-default);
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+/* Block-level text carries no `margin-block` by default. The opt-in is driven
+ * through the inheriting `--db-text-spacing` custom property rather than
+ * descendant selectors, so the nearest `data-text-spacing` ancestor - or the
+ * element itself - wins by proximity instead of by source order. That makes
+ * `true` win when it is the closer ancestor and `false` opt a subtree back out,
+ * and it covers the attribute sitting on the block-text element itself. The
+ * property only carries the half-line-height multiplier; `1lh` is resolved on
+ * the text element in `margin-block`, so the spacing stays derived from each
+ * element's own line height rather than the ancestor's. */
+[data-text-spacing=true] {
+  --db-text-spacing: 0.5;
+}
+
+[data-text-spacing=false] {
+  --db-text-spacing: 0;
+}
+
+:where(h1, h2, h3, h4, h5, h6, p) {
+  margin-block: calc(1lh * var(--db-text-spacing, 0));
+}
+
+:where(h1) {
+  /* stylelint-disable custom-property-pattern */
+  font: var(--db-type-headline-xl);
+}
+:where(h1)::before, :where(h1)::after {
+  --db-icon-font-size: var(
+  	--db-base-headline-icon-font-size-xl
+  );
+  --db-icon-font-weight: var(
+  	--db-base-headline-icon-weight-xl
   );
-  --db-burgundy-bg-inverted-contrast-max-pressed: light-dark(
-  	var(--db-burgundy-2),
-  	var(--db-burgundy-11)
+}
+:where(h1) {
+  /* stylelint-enable custom-property-pattern */
+}
+
+:where(h2) {
+  /* stylelint-disable custom-property-pattern */
+  font: var(--db-type-headline-lg);
+}
+:where(h2)::before, :where(h2)::after {
+  --db-icon-font-size: var(
+  	--db-base-headline-icon-font-size-lg
   );
-  --db-burgundy-bg-inverted-contrast-high-default: light-dark(
-  	var(--db-burgundy-6),
-  	var(--db-burgundy-9)
+  --db-icon-font-weight: var(
+  	--db-base-headline-icon-weight-lg
   );
-  --db-burgundy-bg-inverted-contrast-high-hovered: light-dark(
-  	var(--db-burgundy-2),
-  	var(--db-burgundy-12)
+}
+:where(h2) {
+  /* stylelint-enable custom-property-pattern */
+}
+
+:where(h3) {
+  /* stylelint-disable custom-property-pattern */
+  font: var(--db-type-headline-md);
+}
+:where(h3)::before, :where(h3)::after {
+  --db-icon-font-size: var(
+  	--db-base-headline-icon-font-size-md
   );
-  --db-burgundy-bg-inverted-contrast-high-pressed: light-dark(
-  	var(--db-burgundy-5),
-  	var(--db-burgundy-10)
+  --db-icon-font-weight: var(
+  	--db-base-headline-icon-weight-md
   );
-  --db-burgundy-bg-inverted-contrast-low-default: light-dark(
-  	var(--db-burgundy-7),
-  	var(--db-burgundy-8)
+}
+:where(h3) {
+  /* stylelint-enable custom-property-pattern */
+}
+
+:where(h4) {
+  /* stylelint-disable custom-property-pattern */
+  font: var(--db-type-headline-sm);
+}
+:where(h4)::before, :where(h4)::after {
+  --db-icon-font-size: var(
+  	--db-base-headline-icon-font-size-sm
   );
-  --db-burgundy-bg-inverted-contrast-low-hovered: light-dark(
-  	var(--db-burgundy-3),
-  	var(--db-burgundy-12)
+  --db-icon-font-weight: var(
+  	--db-base-headline-icon-weight-sm
   );
-  --db-burgundy-bg-inverted-contrast-low-pressed: light-dark(
-  	var(--db-burgundy-6),
-  	var(--db-burgundy-9)
+}
+:where(h4) {
+  /* stylelint-enable custom-property-pattern */
+}
+
+:where(h5) {
+  /* stylelint-disable custom-property-pattern */
+  font: var(--db-type-headline-xs);
+}
+:where(h5)::before, :where(h5)::after {
+  --db-icon-font-size: var(
+  	--db-base-headline-icon-font-size-xs
   );
-  --db-burgundy-bg-vibrant-default: light-dark(
-  	var(--db-burgundy-9),
-  	var(--db-burgundy-9)
+  --db-icon-font-weight: var(
+  	--db-base-headline-icon-weight-xs
   );
-  --db-burgundy-bg-vibrant-hovered: light-dark(
-  	var(--db-burgundy-12),
-  	var(--db-burgundy-12)
+}
+:where(h5) {
+  /* stylelint-enable custom-property-pattern */
+}
+
+:where(h6) {
+  /* stylelint-disable custom-property-pattern */
+  font: var(--db-type-headline-2xs);
+}
+:where(h6)::before, :where(h6)::after {
+  --db-icon-font-size: var(
+  	--db-base-headline-icon-font-size-2xs
   );
-  --db-burgundy-bg-vibrant-pressed: light-dark(
-  	var(--db-burgundy-10),
-  	var(--db-burgundy-10)
+  --db-icon-font-weight: var(
+  	--db-base-headline-icon-weight-2xs
   );
 }
+:where(h6) {
+  /* stylelint-enable custom-property-pattern */
+}
+
+body {
+  font-family: var(--db-font-family-sans);
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--db-font-family-head);
+  font-weight: bolder;
+  text-wrap: balance;
+}
+
+html {
+  -webkit-tap-highlight-color: var(--db-informational-bg-basic-transparent-semi-default);
+}
+
+*,
+::before,
+::after {
+  box-sizing: var(--db-box-sizing, border-box);
+}
+
+* {
+  /* Use this to get similar fonts in all browser */
+  -webkit-font-smoothing: antialiased;
+  font-synthesis: none;
+  text-rendering: optimizelegibility;
+}
 
-/* Document
- * ========================================================================== */
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-:where(html) {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-  text-size-adjust: 100%; /* 2 */
+body,
+button,
+input,
+textarea,
+summary,
+select,
+a {
+  color: inherit;
 }
 
-/* Sections
- * ========================================================================== */
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Edge, Firefox, and Safari.
- */
-:where(h1) {
-  font-size: 2em;
-  margin-block-end: 0.67em;
-  margin-block-start: 0.67em;
+img,
+embed,
+iframe,
+object,
+video {
+  block-size: auto;
+  max-inline-size: 100%;
 }
 
-/* Grouping content
- * ========================================================================== */
-/**
- * Remove the margin on nested lists in Chrome, Edge, and Safari.
- */
-:where(dl, ol, ul) :where(dl, ol, ul) {
-  margin-block-end: 0;
-  margin-block-start: 0;
+iframe {
+  border: 0;
 }
 
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Correct the inheritance of border color in Firefox.
- */
-:where(hr) {
-  box-sizing: content-box; /* 1 */
-  color: inherit; /* 2 */
-  height: 0; /* 1 */
+:where(ul) {
+  padding-inline-start: var(--db-spacing-fixed-md);
+  /* stylelint-disable-next-line declaration-property-value-no-unknown, no-irregular-whitespace */
+  list-style-type: var(--db-list-bullet);
+}
+:where(ul) li::marker {
+  color: var(--db-brand-origin-default);
 }
 
-/* Text-level semantics
- * ========================================================================== */
-/**
- * Add the correct text decoration in Safari.
- */
-:where(abbr[title]) {
-  text-decoration: underline;
-  text-decoration: underline dotted;
+nav ol,
+nav ul,
+[role=navigation] ol,
+[role=navigation] ul {
+  list-style-type: "";
+  margin: 0;
+  padding: 0;
 }
 
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-:where(b, strong) {
-  font-weight: bolder;
+fieldset {
+  border: 0;
 }
 
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-:where(code, kbd, pre, samp) {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
+details > *,
+details > ::before,
+details > ::after {
+  box-sizing: var(--db-box-sizing, border-box);
 }
 
-/**
- * Add the correct font size in all browsers.
- */
-:where(small) {
-  font-size: 80%;
+/* Use this file if you want the default color and density in your project */
+:root,
+:host {
+  --db-sizing-3xs: var(--db-sizing-regular-3xs);
+  --db-sizing-2xs: var(--db-sizing-regular-2xs);
+  --db-sizing-xs: var(--db-sizing-regular-xs);
+  --db-sizing-sm: var(--db-sizing-regular-sm);
+  --db-sizing-md: var(--db-sizing-regular-md);
+  --db-sizing-lg: var(--db-sizing-regular-lg);
+  --db-sizing-xl: var(--db-sizing-regular-xl);
+  --db-sizing-2xl: var(--db-sizing-regular-2xl);
+  --db-sizing-3xl: var(--db-sizing-regular-3xl);
+  --db-spacing-fixed-3xs: var(--db-spacing-fixed-regular-3xs);
+  --db-spacing-fixed-2xs: var(--db-spacing-fixed-regular-2xs);
+  --db-spacing-fixed-xs: var(--db-spacing-fixed-regular-xs);
+  --db-spacing-fixed-sm: var(--db-spacing-fixed-regular-sm);
+  --db-spacing-fixed-md: var(--db-spacing-fixed-regular-md);
+  --db-spacing-fixed-lg: var(--db-spacing-fixed-regular-lg);
+  --db-spacing-fixed-xl: var(--db-spacing-fixed-regular-xl);
+  --db-spacing-fixed-2xl: var(--db-spacing-fixed-regular-2xl);
+  --db-spacing-fixed-3xl: var(--db-spacing-fixed-regular-3xl);
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (width <= 48em) {
+  :root,
+  :host {
+    --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-mobile-3xs);
+    --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-mobile-2xs);
+    --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-mobile-xs);
+    --db-spacing-responsive-sm: var(--db-spacing-responsive-regular-mobile-sm);
+    --db-spacing-responsive-md: var(--db-spacing-responsive-regular-mobile-md);
+    --db-spacing-responsive-lg: var(--db-spacing-responsive-regular-mobile-lg);
+    --db-spacing-responsive-xl: var(--db-spacing-responsive-regular-mobile-xl);
+    --db-spacing-responsive-2xl: var(--db-spacing-responsive-regular-mobile-2xl);
+    --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-mobile-3xl);
+  }
+}
+:root,
+:host {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (48em < width <= 64em) {
+  :root,
+  :host {
+    --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-tablet-3xs);
+    --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-tablet-2xs);
+    --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-tablet-xs);
+    --db-spacing-responsive-sm: var(--db-spacing-responsive-regular-tablet-sm);
+    --db-spacing-responsive-md: var(--db-spacing-responsive-regular-tablet-md);
+    --db-spacing-responsive-lg: var(--db-spacing-responsive-regular-tablet-lg);
+    --db-spacing-responsive-xl: var(--db-spacing-responsive-regular-tablet-xl);
+    --db-spacing-responsive-2xl: var(--db-spacing-responsive-regular-tablet-2xl);
+    --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-tablet-3xl);
+  }
+}
+:root,
+:host {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (64em < width) {
+  :root,
+  :host {
+    --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-desktop-3xs);
+    --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-desktop-2xs);
+    --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-desktop-xs);
+    --db-spacing-responsive-sm: var(--db-spacing-responsive-regular-desktop-sm);
+    --db-spacing-responsive-md: var(--db-spacing-responsive-regular-desktop-md);
+    --db-spacing-responsive-lg: var(--db-spacing-responsive-regular-desktop-lg);
+    --db-spacing-responsive-xl: var(--db-spacing-responsive-regular-desktop-xl);
+    --db-spacing-responsive-2xl: var(--db-spacing-responsive-regular-desktop-2xl);
+    --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-desktop-3xl);
+  }
+}
+:root,
+:host {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 
-/* Tabular data
- * ========================================================================== */
-/**
- * 1. Correct table border color in Chrome, Edge, and Safari.
- * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
- */
-:where(table) {
-  border-color: currentColor; /* 1 */
-  text-indent: 0; /* 2 */
+:root,
+:host {
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (width <= 48em) {
+  :root,
+  :host {
+    --db-type-headline-3xs: var(--db-typography-regular-mobile-headline-3xs);
+    --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-headline-3xs);
+    --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-headline-3xs);
+    --db-type-headline-2xs: var(--db-typography-regular-mobile-headline-2xs);
+    --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-regular-mobile-headline-2xs);
+    --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-regular-mobile-headline-2xs);
+    --db-type-headline-xs: var(--db-typography-regular-mobile-headline-xs);
+    --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-regular-mobile-headline-xs);
+    --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-regular-mobile-headline-xs);
+    --db-type-headline-sm: var(--db-typography-regular-mobile-headline-sm);
+    --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-regular-mobile-headline-sm);
+    --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-regular-mobile-headline-sm);
+    --db-type-headline-md: var(--db-typography-regular-mobile-headline-md);
+    --db-base-headline-icon-weight-md: var(--db-base-icon-weight-regular-mobile-headline-md);
+    --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-regular-mobile-headline-md);
+    --db-type-headline-lg: var(--db-typography-regular-mobile-headline-lg);
+    --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-regular-mobile-headline-lg);
+    --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-regular-mobile-headline-lg);
+    --db-type-headline-xl: var(--db-typography-regular-mobile-headline-xl);
+    --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-regular-mobile-headline-xl);
+    --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-regular-mobile-headline-xl);
+    --db-type-headline-2xl: var(--db-typography-regular-mobile-headline-2xl);
+    --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-regular-mobile-headline-2xl);
+    --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-regular-mobile-headline-2xl);
+    --db-type-headline-3xl: var(--db-typography-regular-mobile-headline-3xl);
+    --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-regular-mobile-headline-3xl);
+    --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-headline-3xl);
+  }
+}
+:root,
+:host {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (48em < width <= 64em) {
+  :root,
+  :host {
+    --db-type-headline-3xs: var(--db-typography-regular-tablet-headline-3xs);
+    --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-headline-3xs);
+    --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-tablet-headline-3xs);
+    --db-type-headline-2xs: var(--db-typography-regular-tablet-headline-2xs);
+    --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-regular-tablet-headline-2xs);
+    --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-regular-tablet-headline-2xs);
+    --db-type-headline-xs: var(--db-typography-regular-tablet-headline-xs);
+    --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-regular-tablet-headline-xs);
+    --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-regular-tablet-headline-xs);
+    --db-type-headline-sm: var(--db-typography-regular-tablet-headline-sm);
+    --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-regular-tablet-headline-sm);
+    --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-regular-tablet-headline-sm);
+    --db-type-headline-md: var(--db-typography-regular-tablet-headline-md);
+    --db-base-headline-icon-weight-md: var(--db-base-icon-weight-regular-tablet-headline-md);
+    --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-regular-tablet-headline-md);
+    --db-type-headline-lg: var(--db-typography-regular-tablet-headline-lg);
+    --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-regular-tablet-headline-lg);
+    --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-regular-tablet-headline-lg);
+    --db-type-headline-xl: var(--db-typography-regular-tablet-headline-xl);
+    --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-regular-tablet-headline-xl);
+    --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-regular-tablet-headline-xl);
+    --db-type-headline-2xl: var(--db-typography-regular-tablet-headline-2xl);
+    --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-regular-tablet-headline-2xl);
+    --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-regular-tablet-headline-2xl);
+    --db-type-headline-3xl: var(--db-typography-regular-tablet-headline-3xl);
+    --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-regular-tablet-headline-3xl);
+    --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-tablet-headline-3xl);
+  }
 }
-
-/* Forms
- * ========================================================================== */
-/**
- * Remove the margin on controls in Safari.
- */
-:where(button, input, select) {
-  margin: 0;
+:root,
+:host {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
 }
-
-/**
- * Remove the inheritance of text transform in Firefox.
- */
-:where(button) {
-  text-transform: none;
+@media (64em < width) {
+  :root,
+  :host {
+    --db-type-headline-3xs: var(--db-typography-regular-desktop-headline-3xs);
+    --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-desktop-headline-3xs);
+    --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-desktop-headline-3xs);
+    --db-type-headline-2xs: var(--db-typography-regular-desktop-headline-2xs);
+    --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-regular-desktop-headline-2xs);
+    --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-regular-desktop-headline-2xs);
+    --db-type-headline-xs: var(--db-typography-regular-desktop-headline-xs);
+    --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-regular-desktop-headline-xs);
+    --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-regular-desktop-headline-xs);
+    --db-type-headline-sm: var(--db-typography-regular-desktop-headline-sm);
+    --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-regular-desktop-headline-sm);
+    --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-regular-desktop-headline-sm);
+    --db-type-headline-md: var(--db-typography-regular-desktop-headline-md);
+    --db-base-headline-icon-weight-md: var(--db-base-icon-weight-regular-desktop-headline-md);
+    --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-regular-desktop-headline-md);
+    --db-type-headline-lg: var(--db-typography-regular-desktop-headline-lg);
+    --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-regular-desktop-headline-lg);
+    --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-regular-desktop-headline-lg);
+    --db-type-headline-xl: var(--db-typography-regular-desktop-headline-xl);
+    --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-regular-desktop-headline-xl);
+    --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-regular-desktop-headline-xl);
+    --db-type-headline-2xl: var(--db-typography-regular-desktop-headline-2xl);
+    --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-regular-desktop-headline-2xl);
+    --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-regular-desktop-headline-2xl);
+    --db-type-headline-3xl: var(--db-typography-regular-desktop-headline-3xl);
+    --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-regular-desktop-headline-3xl);
+    --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-desktop-headline-3xl);
+  }
 }
-
-/**
- * Correct the inability to style buttons in iOS and Safari.
- */
-:where(button, input:is([type=button i], [type=reset i], [type=submit i])) {
-  -webkit-appearance: button;
+:root,
+:host {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 
-/**
- * Add the correct vertical alignment in Chrome, Edge, and Firefox.
- */
-:where(progress) {
-  vertical-align: baseline;
+:root,
+:host {
+  /* stylelint-disable-next-line media-query-no-invalid */
 }
-
-/**
- * Remove the inheritance of text transform in Firefox.
- */
-:where(select) {
-  text-transform: none;
+@media (width <= 48em) {
+  :root,
+  :host {
+    --db-type-body-3xs: var(--db-typography-regular-mobile-body-3xs);
+    --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-body-3xs);
+    --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-body-3xs);
+    --db-type-body-2xs: var(--db-typography-regular-mobile-body-2xs);
+    --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-regular-mobile-body-2xs);
+    --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-regular-mobile-body-2xs);
+    --db-type-body-xs: var(--db-typography-regular-mobile-body-xs);
+    --db-base-body-icon-weight-xs: var(--db-base-icon-weight-regular-mobile-body-xs);
+    --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-regular-mobile-body-xs);
+    --db-type-body-sm: var(--db-typography-regular-mobile-body-sm);
+    --db-base-body-icon-weight-sm: var(--db-base-icon-weight-regular-mobile-body-sm);
+    --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-regular-mobile-body-sm);
+    --db-type-body-md: var(--db-typography-regular-mobile-body-md);
+    --db-base-body-icon-weight-md: var(--db-base-icon-weight-regular-mobile-body-md);
+    --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-regular-mobile-body-md);
+    --db-type-body-lg: var(--db-typography-regular-mobile-body-lg);
+    --db-base-body-icon-weight-lg: var(--db-base-icon-weight-regular-mobile-body-lg);
+    --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-regular-mobile-body-lg);
+    --db-type-body-xl: var(--db-typography-regular-mobile-body-xl);
+    --db-base-body-icon-weight-xl: var(--db-base-icon-weight-regular-mobile-body-xl);
+    --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-regular-mobile-body-xl);
+    --db-type-body-2xl: var(--db-typography-regular-mobile-body-2xl);
+    --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-regular-mobile-body-2xl);
+    --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-regular-mobile-body-2xl);
+    --db-type-body-3xl: var(--db-typography-regular-mobile-body-3xl);
+    --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-regular-mobile-body-3xl);
+    --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-body-3xl);
+  }
 }
-
-/**
- * Remove the margin in Firefox and Safari.
- */
-:where(textarea) {
-  margin: 0;
+:root,
+:host {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
 }
-
-/**
- * 1. Correct the odd appearance in Chrome, Edge, and Safari.
- * 2. Correct the outline style in Safari.
- */
-:where(input[type=search i]) {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
+@media (48em < width <= 64em) {
+  :root,
+  :host {
+    --db-type-body-3xs: var(--db-typography-regular-tablet-body-3xs);
+    --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-body-3xs);
+    --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-tablet-body-3xs);
+    --db-type-body-2xs: var(--db-typography-regular-tablet-body-2xs);
+    --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-regular-tablet-body-2xs);
+    --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-regular-tablet-body-2xs);
+    --db-type-body-xs: var(--db-typography-regular-tablet-body-xs);
+    --db-base-body-icon-weight-xs: var(--db-base-icon-weight-regular-tablet-body-xs);
+    --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-regular-tablet-body-xs);
+    --db-type-body-sm: var(--db-typography-regular-tablet-body-sm);
+    --db-base-body-icon-weight-sm: var(--db-base-icon-weight-regular-tablet-body-sm);
+    --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-regular-tablet-body-sm);
+    --db-type-body-md: var(--db-typography-regular-tablet-body-md);
+    --db-base-body-icon-weight-md: var(--db-base-icon-weight-regular-tablet-body-md);
+    --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-regular-tablet-body-md);
+    --db-type-body-lg: var(--db-typography-regular-tablet-body-lg);
+    --db-base-body-icon-weight-lg: var(--db-base-icon-weight-regular-tablet-body-lg);
+    --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-regular-tablet-body-lg);
+    --db-type-body-xl: var(--db-typography-regular-tablet-body-xl);
+    --db-base-body-icon-weight-xl: var(--db-base-icon-weight-regular-tablet-body-xl);
+    --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-regular-tablet-body-xl);
+    --db-type-body-2xl: var(--db-typography-regular-tablet-body-2xl);
+    --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-regular-tablet-body-2xl);
+    --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-regular-tablet-body-2xl);
+    --db-type-body-3xl: var(--db-typography-regular-tablet-body-3xl);
+    --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-regular-tablet-body-3xl);
+    --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-tablet-body-3xl);
+  }
 }
-
-/**
- * Correct the cursor style of increment and decrement buttons in Safari.
- */
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
+:root,
+:host {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
 }
-
-/**
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
- */
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
+@media (64em < width) {
+  :root,
+  :host {
+    --db-type-body-3xs: var(--db-typography-regular-desktop-body-3xs);
+    --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-desktop-body-3xs);
+    --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-desktop-body-3xs);
+    --db-type-body-2xs: var(--db-typography-regular-desktop-body-2xs);
+    --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-regular-desktop-body-2xs);
+    --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-regular-desktop-body-2xs);
+    --db-type-body-xs: var(--db-typography-regular-desktop-body-xs);
+    --db-base-body-icon-weight-xs: var(--db-base-icon-weight-regular-desktop-body-xs);
+    --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-regular-desktop-body-xs);
+    --db-type-body-sm: var(--db-typography-regular-desktop-body-sm);
+    --db-base-body-icon-weight-sm: var(--db-base-icon-weight-regular-desktop-body-sm);
+    --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-regular-desktop-body-sm);
+    --db-type-body-md: var(--db-typography-regular-desktop-body-md);
+    --db-base-body-icon-weight-md: var(--db-base-icon-weight-regular-desktop-body-md);
+    --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-regular-desktop-body-md);
+    --db-type-body-lg: var(--db-typography-regular-desktop-body-lg);
+    --db-base-body-icon-weight-lg: var(--db-base-icon-weight-regular-desktop-body-lg);
+    --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-regular-desktop-body-lg);
+    --db-type-body-xl: var(--db-typography-regular-desktop-body-xl);
+    --db-base-body-icon-weight-xl: var(--db-base-icon-weight-regular-desktop-body-xl);
+    --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-regular-desktop-body-xl);
+    --db-type-body-2xl: var(--db-typography-regular-desktop-body-2xl);
+    --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-regular-desktop-body-2xl);
+    --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-regular-desktop-body-2xl);
+    --db-type-body-3xl: var(--db-typography-regular-desktop-body-3xl);
+    --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-regular-desktop-body-3xl);
+    --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-desktop-body-3xl);
+  }
 }
-
-/**
- * Remove the inner padding in Chrome, Edge, and Safari on macOS.
- */
-::-webkit-search-decoration {
-  -webkit-appearance: none;
+:root,
+:host {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 
-/**
- * 1. Correct the inability to style upload buttons in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
+/* Use this file if you want the default elevation data attributes in your project */
+.db-interactive-elevation,
+[data-interactive=elevation] {
+  cursor: pointer;
+  box-shadow: var(--db-elevation-md);
 }
-
-/**
- * Remove the inner border and padding of focus outlines in Firefox.
- */
-:where(button, input:is([type=button i], [type=color i], [type=reset i], [type=submit i]))::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
+@media (prefers-reduced-motion: no-preference) {
+  .db-interactive-elevation,
+  [data-interactive=elevation] {
+    transition: box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional);
+  }
 }
-
-/**
- * Restore the focus outline styles unset by the previous rule in Firefox.
- */
-:where(button, input:is([type=button i], [type=color i], [type=reset i], [type=submit i]))::-moz-focusring {
-  outline: 1px dotted ButtonText;
+.db-interactive-elevation,
+[data-interactive=elevation] {
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-interactive-elevation:hover,
+[data-interactive=elevation]:hover {
+  cursor: var(--db-overwrite-cursor, pointer);
+  box-shadow: var(--db-elevation-lg);
+}
+.db-interactive-elevation:active,
+[data-interactive=elevation]:active {
+  cursor: var(--db-overwrite-cursor, pointer);
+  box-shadow: var(--db-elevation-sm);
 }
 
-/**
- * Remove the additional :invalid styles in Firefox.
- */
-:where(:-moz-ui-invalid) {
-  box-shadow: none;
+/* Use this file if you want the default fonts for paragraph and headlines in your project */
+:is(h1, h2, h3, h4, h5, h6)[data-variant=light] {
+  font-weight: 300;
+}
+:is(h1, h2, h3, h4, h5, h6)[data-variant=regular] {
+  font-weight: 400;
 }
 
-/* Interactive
- * ========================================================================== */
-/*
- * Add the correct styles in Safari.
- */
-:where(dialog) {
-  background-color: white;
-  border: solid;
-  color: black;
-  height: -moz-fit-content;
-  height: fit-content;
-  left: 0;
-  margin: auto;
-  padding: 1em;
-  position: absolute;
-  right: 0;
-  width: -moz-fit-content;
-  width: fit-content;
+[data-font=digital] {
+  font-weight: 300;
 }
 
-:where(dialog:not([open])) {
-  display: none;
+[data-font=regular] {
+  font-weight: 400;
 }
 
-/*
- * Add the correct display in all browsers.
- */
-:where(summary) {
-  display: list-item;
+[data-font=medium] {
+  font-weight: 500;
 }
 
-@property --db-screen-xs {
-  syntax: "*";
-  inherits: true;
-  initial-value: 20em;
+[data-font=semibold] {
+  font-weight: 600;
 }
-@property --db-screen-sm {
-  syntax: "*";
-  inherits: true;
-  initial-value: 48em;
+
+[data-font=bold],
+strong {
+  font-weight: 700;
 }
-@property --db-screen-md {
-  syntax: "*";
-  inherits: true;
-  initial-value: 64em;
+
+/* Use this file if you want to use the defaults for the <code> tag in your project */
+pre:not([class]):has(code) {
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+  padding: var(--db-spacing-fixed-xs);
 }
-@property --db-screen-lg {
-  syntax: "*";
-  inherits: true;
-  initial-value: 90em;
+pre:not([class]):has(code),
+pre:not([class]):has(code) code,
+pre:not([class]):has(code) span {
+  font-family: monospace;
 }
-@property --db-screen-xl {
-  syntax: "*";
-  inherits: true;
-  initial-value: 120em;
+
+a:has(code:not([class]):only-child) {
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-:root {
-  color-scheme: var(--db-color-scheme, light dark);
+a:has(code:not([class]):only-child):hover {
+  cursor: var(--db-overwrite-cursor, pointer);
+  color: var(--db-adaptive-on-bg-inverted-hovered);
 }
-:root:has([name=color-scheme]:is([content~=light], [content~=dark])) {
-  color-scheme: var(--db-color-scheme);
+a:has(code:not([class]):only-child):active {
+  cursor: var(--db-overwrite-cursor, pointer);
+  color: var(--db-adaptive-on-bg-inverted-pressed);
 }
-
-[data-mode=light] {
-  color-scheme: light;
+a:has(code:not([class]):only-child) > code {
+  color: inherit;
 }
 
-[data-mode=dark] {
-  color-scheme: dark;
+code:not([class]) {
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+  padding-block: var(--db-spacing-fixed-3xs);
+  padding-inline: var(--db-spacing-fixed-2xs);
 }
-
-[data-pride=true] {
-  --db-pride-red: var(--db-red-origin-default);
-  --db-pride-orange: var(--db-orange-origin-default);
-  --db-pride-yellow: var(--db-yellow-origin-default);
-  --db-pride-green: var(--db-light-green-origin-default);
-  --db-pride-blue: var(--db-blue-origin-default);
-  --db-pride-violet: var(--db-violet-origin-default);
+code:not([class]),
+code:not([class]) span {
+  font-family: monospace;
 }
 
-html,
-body {
+blockquote:not([class]) {
   margin: 0;
-  padding: 0;
+  padding: var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md);
 }
 
-body {
-  font-family: var(--db-font-family-sans);
+[data-icon]::before,
+[data-icon-leading]::before, [data-icon-trailing]::after {
+  color: var(--db-icon-color, inherit);
+  display: inline-block;
+  /*** icon - placeholder ***/
+  font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
+  font-size: var(--db-icon-font-size, 1.5rem);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: var(--db-icon-font-weight, normal);
+  line-height: 1;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  speak: none;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  speak: never;
+  text-transform: none;
+  overflow: clip;
+  contain: layout;
+  vertical-align: var(--db-icon-vertical-align, middle);
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  block-size: var(--db-icon-font-size, 1.5rem);
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
+  text-underline-position: auto;
+  content: var(--db-icon, attr(data-icon));
+}
+@supports (content: ""/"") {
+  [data-icon]::before,
+  [data-icon-leading]::before, [data-icon-trailing]::after {
+    content: var(--db-icon, attr(data-icon))/"";
+  }
+}
+@media aural {
+  [data-icon]::before,
+  [data-icon-leading]::before, [data-icon-trailing]::after {
+    content: none;
+  }
+}
+@media speech {
+  [data-icon]::before,
+  [data-icon-leading]::before, [data-icon-trailing]::after {
+    content: none;
+  }
 }
 
-html {
-  -webkit-tap-highlight-color: var(--db-informational-bg-basic-transparent-semi-default);
+[data-icon]:is(span):not([hidden]),
+[data-icon-leading]:is(span):not([hidden]),
+[data-icon-trailing]:is(span):not([hidden]) {
+  display: inline-flex;
+}
+[data-icon]:is(span),
+[data-icon-leading]:is(span),
+[data-icon-trailing]:is(span) {
+  vertical-align: baseline;
 }
 
-*,
-::before,
-::after {
-  box-sizing: var(--db-box-sizing, border-box);
+[data-icon-variant=default]::before,
+[data-icon-variant-before=default]::before {
+  --db-icon-font-family: var(
+  	--db-icon-default-font-family,
+  	"db-ux-default",
+  	"icon-font-fallback"
+  );
 }
 
-* {
-  /* Use this to get similar fonts in all browser */
-  -webkit-font-smoothing: antialiased;
-  font-synthesis: none;
-  text-rendering: optimizelegibility;
+[data-icon-variant-after=default]::after {
+  --db-icon-font-family: var(
+  	--db-icon-default-font-family,
+  	"db-ux-default",
+  	"icon-font-fallback"
+  );
 }
 
-body,
-button,
-input,
-textarea,
-summary,
-select,
-a {
-  color: inherit;
+[data-icon-variant=filled]::before,
+[data-icon-variant-before=filled]::before {
+  --db-icon-font-family: var(
+  	--db-icon-filled-font-family,
+  	"db-ux-filled",
+  	"icon-font-fallback"
+  );
 }
 
-img,
-embed,
-iframe,
-object,
-video {
-  block-size: auto;
-  max-inline-size: 100%;
+[data-icon-variant-after=filled]::after {
+  --db-icon-font-family: var(
+  	--db-icon-filled-font-family,
+  	"db-ux-filled",
+  	"icon-font-fallback"
+  );
 }
 
-iframe {
-  border: 0;
+[data-show-icon=false]::before,
+[data-show-icon-leading=false]::before,
+[data-icon=none]::before,
+[data-icon-leading=none]::before {
+  content: none;
 }
 
-:where(ul) {
-  padding-inline-start: var(--db-spacing-fixed-md);
-  /* stylelint-disable-next-line declaration-property-value-no-unknown, no-irregular-whitespace */
-  list-style-type: var(--db-list-bullet);
+[data-icon-trailing]::after {
+  content: var(--db-icon-trailing, attr(data-icon-trailing));
 }
-:where(ul) li::marker {
-  color: var(--db-brand-origin-default);
+@supports (content: ""/"") {
+  [data-icon-trailing]::after {
+    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
+  }
 }
 
-nav ol,
-nav ul,
-[role=navigation] ol,
-[role=navigation] ul {
-  list-style-type: "";
-  margin: 0;
-  padding: 0;
+[data-show-icon-trailing=false]::after,
+[data-icon-trailing=none]::after {
+  content: none;
 }
 
-fieldset {
-  border: 0;
+.is-icon-text-replace[data-icon], .is-icon-text-replace[data-icon-leading] {
+  font-size: 0 !important;
 }
-
-details > *,
-details > ::before,
-details > ::after {
-  box-sizing: var(--db-box-sizing, border-box);
+.is-icon-text-replace[data-icon-trailing] {
+  font-size: 0 !important;
 }
 
+@font-face {
+  font-display: block;
+  font-family: icon-font-fallback;
+  font-style: normal;
+  font-weight: normal;
+  src: url("data:application/octet-stream;base64,d09GMgABAAAAAALAAAsAAAAAB8gAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACFegoUPAE2AiQDCAsGAAQgBYUOBysbJAfIrjBu4YkWdj4mP/wNUwgBWAAK8Tz92uu5bzeIKpJ4PLCOwgJxKmxlVZUBVhLY/+63n6ZlVd+q+JYluo4VQv5R4ejdz9BP+Dk5hUpNjXBxv1sBaSJaC0igiNLJzS9wsNc8ihPOOIQQDhtwgIHHieM+PDyHi1tAAf8GeS/KbE3LojUWRgWST5B5exuFB3wIN0wv8NNgfEfQbtFccWvn4BgaN8+xh5YyNRvi/Ny8Zgjq3KNWw3iraG57bRo5Szkujxf+6fPVUqBoqqg37N5Cwoc5rzWOpudsgi8raEKFWaAmr+ojL1XKpCXtqeMq0KoPFcy58/oPRRSB1Op2NAA8R2mm1BqaRf4/kNsJOYtiI8CcJThDcI7gPMEFgosElwguE1whuEpwjeA6wQ2CmwS3CG4T3CG4S3CP4D7BA4KHBI8IHhM8IXhK8Izg+HBAAXXa8BOMJ38cKc/DzT/WMg9r1ILw5bU7Q/1vhVyEX53987Xt7P5KlNBG505O4806S401qeGyRnO7dvHDYvT6rJmO/t24W/TH5iq0N6GglrRp0mGZZv12aDfj8uYOA95U6jYx6h1QdPtAZdSvoJb802Q40mw00W4vc06H8XxNBN/VwbPzC2RtRmJzqMyDpVTYIXeKU5XyVfA4VFZ8ZFt5lYiVxOwF80czYtaoU3C41eRlytqAMYW1EtxbMsdxP7bsyp4IDlaEwOvSvpXDv5xYVoYIG4cU44FFUuue6ytPKUluxTaPhnoGvQTbVt9TmTBF/jzzAuUeGSOMaUhLAgdtjWRVo0QCFMt3rSkC61n2CEVjfT1Ot7X21uR1ipQK7baUlFQyBwAAAAA=");
+}
 /* 224px */
 @property --db-container-3xs {
   syntax: "*";