/* Pure CSS version (flattened from SCSS) */

.side-nav .nav-item__link--active,
.side-nav .breadcrumb a {
  color: var(--wadk-text-basic-base);
}

.breadcrumb {
  display: none;
}

/* Desktop view */
@media (min-width: 920px) {
  .side-nav {
    margin: 0;
    list-style-type: none;
  }

  .side-nav li {
    list-style: none;
  }

  .side-nav .nav-item__link {
    display: inline-block;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .side-nav .nav-item__link--active {
    background-color: var(--wadk-fill-basic-subtle);
    box-shadow:
      0.5rem 0 0 0 var(--wadk-fill-basic-subtle),
      -0.5rem 0 0 0 var(--wadk-fill-basic-subtle);
  }

  .side-nav .nav-item--active::before {
    content: '';
    position: relative;
    left: -1.5rem;
    height: 36px;
    border-right: 4px solid var(--wadk-text-basic-action-link);
  }
}

/* Mobile/tablet view */
@media (max-width: 919px) {
  .breadcrumb {
    display: block;
    margin-right: auto;

    &:hover {
      box-shadow: none;
    }
  }

  .breadcrumb a {
    text-decoration: none;
    color: var(--wadk-text-basic-base);
  }
  .side-nav-container {
    background-color: var(--wadk-fill-basic-subtle);
    font-size: 0.875em;
  }

  .side-nav {
    display: flex;
    flex-direction: row;
    justify-items: end;
    list-style-type: none;
    padding-left: 0;
    margin-block-start: 0;
    margin-block-end: 0;
  }

  .side-nav li {
    padding: 1rem 1rem 0.8rem;
    list-style: none;
  }

  .side-nav .nav-item:hover,
  .side-nav .nav-item--active {
    z-index: 1;
    box-shadow: 0 3px 0 var(--wadk-text-basic-action-link);
  }

  .side-nav .nav-item--active {
    color: var(--wadk-text-basic-base);
  }

  .side-nav .breadcrumb {
    margin-right: auto;
  }

  .side-nav .breadcrumb:hover {
    box-shadow: none;
  }
}
/* Corporate Bank Contacts page styles */

.main-content {
  position: relative;
}

.background-image {
  position: absolute;
  inset: 0;
  height: 23.25rem; /* 332px */
  background-image: url('/autobahn/img/fNM-CfP6PW-3200.avif');
  background-position: center 80%;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}

.contact-content {
  position: relative;
  z-index: 1;
  max-width: var(--page-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--wadk-sy-xl5);
}

.contact-island {
  display: block;
  width: fit-content;
  padding: var(--wadk-sy-xl4) var(--wadk-sx-xl4);
  flex-direction: column;
  align-items: flex-start;
  background: var(--wadk-brand-db-deep-blue);
  color: var(--wadk-text-contrast-base);
  opacity: 0.9;
  border-radius: var(--wadk-border-radius-sm);
}

.island-text {
  font-size: var(--wadk-font-size-xl);
  line-height: var(--wadk-line-height-xl);
  margin-top: var(--wadk-sy-xl3);
  max-width: 30rem;
}

/* Container styles */
.cb-contacts-container {
  display: flex;
  margin-top: var(--wadk-sy-xl5);
  padding: var(--wadk-sy-xl4) var(--wadk-sx-xl4);
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem; /* 20px */
  flex: 1 0 0;
  background: var(--wadk-fill-basic-blank);
}

.contact-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.instruction {
  margin: 0;
}

/* Make buttons the same size */
.cb-contacts-container .button-container {
  width: 17rem;
}
.cb-contacts-container .button-container .button {
  width: 100%;
  display: inline-flex;
  justify-content: center;
}

/* Search sizing */
#search {
  width: 100%;
}

.pagefind-ui__search-input {
  width: 30rem !important;
}

.pagefind-ui__search-input {
  height: 2rem;
}

.table-wrapper {
  max-width: 61rem;
  overflow-x: auto;
}

.table-bordered {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

.table-bordered tbody {
  font-size: var(--wadk-font-size-base);
  line-height: var(--wadk-line-height-base);
}

/* Two-column layout: side navigation left, content right */
.cb-layout {
  display: grid;
  grid-template-columns: 12rem auto;
  gap: var(--wadk-sx-xl2);
  align-items: start;
  background: var(--wadk-fill-basic-blank);
}

.cb-layout > aside {
  width: 100%;
  position: sticky;
  top: var(--wadk-sy-xl);
}

.region {
  padding-bottom: 5rem;
}

@media (min-height: 1200px) {
  .footer {
    position: fixed;
  }
}

@media (max-width: 1439px) {
  .contact-content {
    padding-top: var(--wadk-sy-xl4);
    margin: 0 var(--wadk-sy-xl6);
  }

  .cb-contacts-container.contact-content {
    margin-top: var(--wadk-sy-xl5);
  }
}

@media (max-width: 1199px) {
  .background-image {
    height: 32.25rem;
  }
  .contact-content {
    padding: 14.5rem 7rem var(--wadk-sy-xl5);
    margin-right: 0;
    margin-left: 0;
  }

  .island-text {
    max-width: 100%;
  }

  .cb-contacts-container.contact-content {
    margin-bottom: var(--wadk-sy-xl3);
  }

  .cb-contacts-container.contact-content {
    padding-top: 0;
  }

  .contact-island {
    margin: 0;
  }
}

@media (max-width: 919px) {
  .footer {
    position: static;
  }

  .background-image {
    position: static;
    height: 25rem;
  }

  .region .contact-island {
    display: none;
  }

  .region .cb-contacts-container {
    margin-top: 0;
    padding-top: 0;
  }

  .region .contact-content {
    padding: 0;
  }

  .table {
    padding: 0 var(--wadk-sx-xl3);
  }

  .contact-island {
    position: static;
    width: 100%;
    background-color: var(--wadk-fill-basic-blank);
    color: var(--wadk-text-basic-base);
    padding: 0;
    margin: 0;
  }

  .contact-content {
    padding: var(--wadk-sy-xl3) var(--wadk-sy-xl3) 0;
  }

  .cb-layout {
    display: flex;
    flex-direction: column;
    background: var(--wadk-fill-basic-blank);
  }
}

@media (max-width: 600px) {
  .contact-content {
    padding: var(--wadk-sy-xl3) var(--wadk-sx-xl3) 0;
  }

  .table {
    padding: 0 var(--wadk-sx-md);
  }

  .contact-box {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wadk-sy-lg);
  }

  .cb-contacts-container .button-container {
    width: 100%;
  }
}

@media (max-width: 359px) {
  .contact-content {
    padding: var(--wadk-sy-xl3) var(--wadk-sx-md) 0;
  }
}
:root {
  --page-padding: 3rem;
  --page-max-width: calc(1200px + 2 * var(--page-padding));
}

/* Global stylesheet */
* {
  box-sizing: border-box;
}

@view-transition {
  navigation: auto;
}

html,
body {
  margin: 0;
  font-family: var(--wadk-font-family);
  color: var(--wadk-text-basic-base);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
html {
  overflow-y: scroll;
}

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Fluid images via https://www.zachleat.com/web/fluid-images/ */
img {
  max-width: 100%;
}
img[width][height] {
  height: auto;
}

svg {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-backface-visibility: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  margin-block-start: 0;
  margin-block-end: 0;
}
h2,
h3 {
  font-weight: 500;
}

h1 {
  font-size: var(--wadk-font-size-xl3);
  line-height: var(--wadk-line-height-xl3);
}

h2 {
  font-size: var(--wadk-font-size-xl2);
  line-height: var(--wadk-line-height-xl2);
}

h3 {
  font-size: var(--wadk-font-size-xl);
  line-height: var(--wadk-line-height-xl);
}

h4 {
  font-size: var(--wadk-font-size-lg);
  line-height: var(--wadk-line-height-lg);
}

h5 {
  font-size: var(--wadk-font-size-md);
  line-height: var(--wadk-line-height-md);
}

h6 {
  font-size: var(--wadk-font-size-base);
  line-height: var(--wadk-line-height-base);
}

.separator {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: var(--wadk-border-width);
  background-color: var(--wadk-alt-contrast-base);
}

#skip-link {
  text-decoration: none;
  background: var(--background-color);
  color: var(--text-color);
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-gray-90);
  border-radius: 2px;
}

/* Prevent visually-hidden skip link fom pushing content around when focused */
#skip-link.visually-hidden:focus {
  position: absolute;
  top: 1rem;
  left: 1rem;
  /* Ensure it is positioned on top of everything else when it is shown */
  z-index: 999;
}
.button {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-overflow: ellipsis;
  font-family: var(--wadk-font-family);
  font-weight: 400;
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
  border-style: solid;
  border-width: var(--wadk-border-width);
  text-decoration: none;
}

.sm {
  gap: var(--wadk-sx-xs2);
  padding: var(--wadk-sy-xs) var(--wadk-sx-sm);
  font-size: var(--wadk-font-size-sm);
  line-height: var(--wadk-exp-component-line-height-sm);
  border-radius: 2px;
}

.md {
  gap: var(--wadk-sx-sm);
  padding: var(--wadk-sy-base) var(--wadk-sx-md);
  font-size: var(--wadk-font-size-md);
  line-height: var(--wadk-exp-component-line-height-md);
  border-radius: 2px;
}

.button-primary {
  color: var(--wadk-text-contrast-base);
  background-color: var(--wadk-fill-accent-base);
  border-color: var(--wadk-fill-accent-base);
}

.button-primary:hover,
.button-primary:focus {
  background-color: color-mix(
    in srgb,
    var(--wadk-fill-accent-base) 90%,
    transparent
  );
}

.button-primary:active {
  background-color: var(--wadk-fill-accent-base);
  border-color: var(--wadk-alt-contrast-strong);
}

.button-primary:focus-visible {
  outline: var(--wadk-text-contrast-base);
  box-shadow: 0 0 0 calc(2 * var(--wadk-border-width))
    var(--wadk-fill-accent-base);
}

.button-secondary {
  color: var(--wadk-text-contrast-base);
  background-color: transparent;
  border-color: var(--wadk-stroke-basic-base);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background-color: var(--wadk-alt-contrast-subtle);
  border-color: var(--wadk-stroke-basic-medium);
}

.button-secondary:active,
.button-secondary[aria-pressed='true'] {
  background-color: var(--wadk-alt-contrast-light);
  border-color: var(--wadk-stroke-basic-medium);
}

.button-toolbar {
  color: var(--wadk-text-contrast-base);
  background-color: transparent;
  border-color: transparent;
}

.button-toolbar:hover,
.button-toolbar:focus-visible {
  background-color: var(--wadk-alt-contrast-subtle);
}

.button-toolbar[aria-pressed='true'],
.button-toolbar[aria-busy='true'],
.button-toolbar:active {
  background-color: var(--wadk-alt-contrast-light);
}

.standard[aria-disabled='true'],
.button-toolbar[aria-disabled='true'] {
  opacity: 0.5;
}

/* Outline variant keeps transparent background */
.outline {
  background-color: transparent;
}

/* Link-styled variant (distinct from .button-primary fill) */
.button-link {
  color: var(--wadk-text-basic-action-link);
  border-color: var(--wadk-text-basic-action-link);
}

/* Increase specificity to override component-level anchor color rules */
.button.button-link {
  color: var(--wadk-text-basic-action-link);
  border-color: var(--wadk-text-basic-action-link);
}

.button.button-link:hover,
.button.button-link[aria-pressed='true'],
.button.button-link:focus-visible {
  background-color: var(--wadk-alt-accent-subtle);
  color: var(--wadk-text-basic-action-link);
}

.button.button-link:active {
  background-color: var(--wadk-alt-accent-light);
  color: var(--wadk-text-basic-action-link);
}

/* Prevent visited color overriding link-style button */
.button.button-link:visited {
  color: var(--wadk-text-basic-action-link);
  text-decoration: none;
}

/* Extra specificity targeting anchors to defeat attribute selectors like a[href]:hover */
a.button.button-link:hover,
a.button.button-link:active,
a.button.button-link:focus-visible,
a.button.button-link:visited {
  color: var(--wadk-text-basic-action-link);
}

/* Responsive utility: make a .button-secondary look like a .button-link at mid-range viewport */
@media (max-width: 919px) {
  .button-secondary.button-responsive-link {
    color: var(--wadk-text-basic-action-link);
    border-color: var(--wadk-text-basic-action-link);
  }

  .button-secondary.button-responsive-link:hover,
  .button-secondary.button-responsive-link[aria-pressed='true'],
  .button-secondary.button-responsive-link:focus-visible {
    background-color: var(--wadk-alt-accent-subtle);
  }

  .button-secondary.button-responsive-link:active {
    background-color: var(--wadk-alt-accent-light);
  }
}

/* IE11 fallbacks: no color-mix, no :focus-visible, no flex gap */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .button-primary:hover,
  .button-primary:focus {
    background-color: var(--wadk-fill-accent-base);
  }

  /* Provide focus ring when :focus-visible is unsupported */
  .button:focus {
    outline: var(--wadk-text-contrast-base);
    box-shadow: 0 0 0 calc(2 * var(--wadk-border-width))
      var(--wadk-fill-accent-base);
  }

  /* Simulate gap inside buttons containing icon + label */
  .sm,
  .md {
    gap: 0; /* IE11 ignores gap, set to 0 to be explicit */
  }
  .sm > * + * {
    margin-left: var(--wadk-sx-xs2);
  }
  .md > * + * {
    margin-left: var(--wadk-sx-sm);
  }
}
.link,
.link:visited {
  display: inline-flex;
  align-items: center;
  padding: var(--wadk-sy-xs) var(--wadk-sx-sm);
  font-family: var(--wadk-font-family);
  font-weight: 400;
  color: var(--wadk-text-basic-action-link);
  text-decoration: none;
  cursor: pointer;
  border: var(--wadk-border-width) solid transparent;
  border-radius: var(--wadk-border-radius-base);
  padding: 0;
  vertical-align: unset;
  font-size: var(--wadk-font-size-md);
  line-height: var(--wadk-line-height-md);
  transition:
    color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.link:not(.link-contrast),
.link:not(.link-inline) {
  vertical-align: middle;
}

.link:hover {
  text-decoration: underline;
}

.link:not([aria-disabled='true']):focus-visible {
  border-color: var(--wadk-text-basic-action-link);
}

.link:focus {
  outline: none;
}

.link svg,
.link svg.icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--wadk-sx-xs2, 0.5em);
}
.table-title {
  margin-bottom: var(--wadk-sy-xl4);
}

.table-bordered {
  &,
  td,
  th {
    border: 1px solid var(--wadk-stroke-basic-subtle);
    border-width: 1px 0;
  }

  td {
    border-style: dashed;
  }

  td[rowspan],
  td:not(:only-child) {
    border-top-style: solid;
  }
}

.table {
  border-spacing: 0.5em;
  font-size: 0.875em;
  border-collapse: collapse;

  th {
    padding: 1em;
    font-weight: normal;
    min-width: 20vw;

    &[scope='row'] {
      font-weight: bold;
    }

    h5 {
      font-size: larger;
    }
  }

  th.contact-header {
    font-size: 16px;
    font-weight: bold;
    color: var(--wadk-text-basic-accent);
  }

  td {
    padding: 1em;
    text-align: left;

    h1,
    h2,
    h3 {
      font-family: inherit;
      font-size: inherit;
      color: inherit;
    }
  }
}

.table-fixed {
  table-layout: fixed;

  td,
  th {
    width: 22%;

    &:last-child {
      width: 34%;
    }
  }
}

.contact-category-name {
  font-weight: bold;
}
.icon {
  --wl-icon-size: var(--wadk-icon-size-base);

  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  shape-rendering: geometricPrecision;
  font-size: var(--wl-icon-size);
  width: var(--wl-icon-size);
  fill: currentColor;
  height: var(--wl-icon-size);
  background-size: var(--wl-icon-size) var(--wl-icon-size);
  line-height: var(--wl-icon-size);
  min-width: var(--wl-icon-size);
  min-height: var(--wl-icon-size);
  path {
    fill: currentColor;
  }
}

.icon-xs {
  --wl-icon-size: var(--wadk-line-height-xs);
}

.icon-sm {
  --wl-icon-size: var(--wadk-icon-size-sm);
}

.icon-base {
  --wl-icon-size: var(--wadk-icon-size-base);
}

.icon-md {
  --wl-icon-size: var(--wadk-icon-size-md);
}

.icon-lg {
  --wl-icon-size: var(--wadk-icon-size-lg);
}

.icon-xl {
  --wl-icon-size: var(--wadk-icon-size-xl);
}

.icon-xl2 {
  --wl-icon-size: var(--wadk-icon-size-xl2);
}

.icon-xl3 {
  --wl-icon-size: var(--wadk-icon-size-xl3);
}

.icon-xl4 {
  --wl-icon-size: var(--wadk-icon-size-xl4);
}

.icon-xl5 {
  --wl-icon-size: var(--wadk-icon-size-xl5);
}
header.header {
  font-family: var(--wadk-font-family);
  color: var(--wadk-text-contrast-base);

  .header-content {
    max-width: var(--page-max-width);
    margin-left: auto;
    margin-right: auto;
  }

  .big-header-icon {
    width: 5rem;
  }

  .brand-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--wadk-sy-xs) 0;
  }

  .db-link {
    color: inherit;
    font-size: var(--wadk-font-size-sm);
    line-height: var(--wadk-line-height-sm);
    text-decoration: none;

    &:visited,
    &:hover,
    &:active {
      color: inherit;
      text-decoration: none;
    }
  }

  .db-union {
    width: 7.5rem;
  }

  .nav-header {
    background: var(--wadk-brand-db-deep-blue);
  }

  .small-header-icon {
    display: none;
  }

  .nav-container {
    position: relative;
    display: flex;
    padding: 1.5rem 0 var(--wadk-sy-xs) 0;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .nav__item {
    list-style: none;
    border-left: 3px solid transparent;
  }
  .nav__item .nav__link {
    color: inherit;
    font-size: var(--wadk-font-size-md);
    line-height: var(--wadk-line-height-md);
    text-decoration: none;
  }

  .nav__item--active {
    border-left: 3px solid var(--wadk-text-contrast-base);

    .nav__link {
      font-weight: bold;
    }
  }

  .nav__toggle,
  .nav__brand {
    display: none;
  }

  .top-header {
    display: block;
    background: var(--wadk-brand-db-dark-blue);
  }

  .top-header__right {
    display: flex;
    gap: var(--wadk-sx-xs);
  }

  .top-header__brand {
    display: flex;
    align-items: center;
    gap: var(--wadk-sx-xs);
  }

  /* removed duplicate .nav-container, merged above */

  .nav-links-list {
    margin-block-start: 0;
    margin-block-end: 0;
  }

  .nav-logo-block {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.75rem; /* 12px */
    flex: 0 0 auto; /* prevent shrinking */
  }

  .nav-login {
    padding: 0.375em 0.75em;
    border-radius: 0.125rem;
    background: var(--wadk-fill-accent-base);
    color: var(--wadk-text-contrast-base);
    border: 0;
  }

  .nav-main {
    display: flex;
    flex-direction: column;
    gap: var(--wadk-sy-md);
    width: 100%;
  }

  .nav-links-list {
    display: flex;
    flex-direction: row;
    transition: none;
    padding: 0;
  }

  .nav-links {
    color: var(--wadk-text-contrast-base);
    display: flex;
    flex-direction: row;
    gap: var(--wadk-sx-sm);
    width: 100%;
    font-size: var(--wadk-font-size-md);
  }

  .nav__item {
    transition: none;
    padding: var(--wadk-sy-base) var(--wadk-sx-md);
    border-left: none;
  }

  .nav__item--active {
    border-left: none;

    .nav__link {
      font-weight: bold;
    }
  }

  .nav-union {
    display: flex;
    justify-content: space-between;
    padding-left: var(--wadk-sx-md);
    align-items: flex-end;
    height: auto;
  }

  @media (max-width: 1439px) {
    /* .nav-container {
      padding: var(--wadk-sy-xl) var(--wadk-sx-lg,);
    } */

    .header-content {
      padding-left: var(--wadk-sx-xl6);
      padding-right: var(--wadk-sx-xl6);
    }
  }

  /* mobile view */
  @media (max-width: 919.999999px) {
    .nav-container {
      position: relative;
      flex-direction: row;
      padding: var(--wadk-sy-xl) var(--wadk-sx-lg);
      justify-content: flex-start;
      gap: 1em;
      align-items: center;
    }

    .nav-actions {
      position: static;
      margin-left: auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 1em;
      justify-content: space-evenly;
    }

    .nav__toggle,
    .nav__brand {
      display: flex;
    }
    .nav__brand {
      align-items: center;
      gap: 4px;
    }

    .top-header {
      display: none;
    }

    .small-header-icon {
      display: block;
    }

    .db-logo {
      display: none;
    }

    .db-union {
      display: none;
    }

    .nav-union {
      padding: 0;
    }

    .nav-main {
      gap: 0;
    }

    .nav-links-list {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: var(--wadk-sy-xl) var(--wadk-sx-lg);

      transform: scaleY(0);
      transition: all 300ms ease-out;
      transform-origin: top;

      position: absolute;
      inset: 0;
      top: 50px;
      z-index: 20;

      height: 300px;
      width: 100vw;
      max-height: 50vh;

      background-color: var(--wadk-brand-db-deep-blue);
      box-shadow: var(--wadk-raise-5-subtle);

      &.active {
        transform: scaleY(1);

        .nav__item {
          transition: all 300ms ease-out;
          font-size: 1.5em;
        }
      }
    }

    .nav__toggle {
      padding-left: 1em;
      background-color: transparent;
      color: var(--wadk-text-contrast-base);
      border: 0;
      z-index: 21;

      .menu-icon,
      .menu-icon--active {
        width: 24px;
        height: 24px;
      }
      .menu-icon--active {
        display: none;
      }
    }
    &:has(.nav-links-list.active) {
      .menu-icon {
        display: none;
      }
      .menu-icon--active {
        display: block;
      }
    }
  }
}

/* IE11 fallback: simulate flex gap in header actions */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .nav-actions > * + * {
    margin-left: 1em;
  }
}
footer.footer {
  background: var(--wadk-brand-db-deep-blue);
  color: var(--text-contrast-base, #fff);
  font-size: var(--wadk-font-size-md, 16px);
  line-height: var(--wadk-line-height-md, 24px);
  text-wrap: nowrap;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 100;

  .com-cn-visible {
    display: none;
  }

  .footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    padding: var(--wadk-sy-md) 0;
    gap: var(--wadk-sx-base);
  }

  .footer__brand {
    display: flex;
    align-items: center;
    gap: var(--wadk-sx-xs);
  }

  /* Position copyright left */
  .copyright-container {
    text-align: left;
    line-height: var(--wadk-line-height-md);
  }

  /* Center nav */
  .nav-footer ul {
    list-style-type: none;
    margin-block: 0;
    display: flex;
    padding-inline-start: 0;
    flex-wrap: wrap;
  }

  .autobahn-logo {
    width: 5rem;
  }

  .link-wrapper {
    list-style: none;
    padding: var(--wadk-sy-base, 12px) var(--wadk-sx-md, 20px);
  }

  .db-link {
    color: var(--wadk-text-contrast-base);
    font-size: var(--wadk-font-size-md);
    line-height: var(--wadk-line-height-md);
    text-decoration: none;

    &:visited,
    &:hover,
    &:active {
      text-decoration: none;
    }
  }

  .link-wrapper--active {
    font-weight: bold;
  }
}

@media (max-width: 1439px) {
  footer.footer {
    .copyright-container {
      padding-left: var(--wadk-sx-md);
    }

    .footer-content {
      padding: var(--wadk-sy-xl4) 5.75rem;
      justify-content: space-between;
    }

    .nav-footer {
      order: 2;
    }

    .footer__brand {
      padding-right: var(--wadk-sx-md);
    }
  }
}

@media (max-width: 919px) {
  footer.footer {
    .copyright-container {
      padding-left: var(--wadk-sx-md);
    }

    .footer-content {
      padding: var(--wadk-sy-xl3) var(--wadk-sx-md);
      flex-direction: column;
      align-items: flex-start;
    }

    .nav-footer ul {
      flex-direction: column;
      gap: var(--wadk-sy-sm);
    }

    .nav-footer {
      order: 0;
    }

    .footer__brand {
      padding-left: var(--wadk-sx-md);
    }
  }
}

@media (max-width: 360px) {
  footer.footer {
    text-wrap: wrap;

    .footer-content {
      padding: var(--wadk-sy-xl3) 0;
    }
  }
}
/* Generated file do not edit */

@font-face {
  font-family: DeutscheBank;
  src: url(/autobahn/fonts/DeutscheBankUI-Regular.woff2) format('woff2'),
    url(/autobahn/fonts/DeutscheBankUI-Regular.woff) format('woff'),
    url(/autobahn/fonts/DeutscheBankUI-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: DeutscheBank;
  src: url(/autobahn/fonts/DeutscheBankUI-Medium.woff2) format('woff2'),
    url(/autobahn/fonts/DeutscheBankUI-Medium.woff) format('woff'),
    url(/autobahn/fonts/DeutscheBankUI-Medium.ttf) format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: DeutscheBank;
  src: url(/autobahn/fonts/DeutscheBank-RegularItalic.woff2) format('woff2'),
    url(/autobahn/fonts/DeutscheBank-RegularItalic.woff) format('woff'),
    url(/autobahn/fonts/DeutscheBank-RegularItalic.ttf) format('truetype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: DeutscheBank;
  src: url(/autobahn/fonts/DeutscheBank-MediumItalic.woff2) format('woff2'),
    url(/autobahn/fonts/DeutscheBank-MediumItalic.woff) format('woff'),
    url(/autobahn/fonts/DeutscheBank-MediumItalic.ttf) format('truetype');
  font-weight: bold;
  font-style: italic;
}

:root {
  /* media queries can't use css vars, but these are here as reference values anyway */
  --wadk-bp-tiny: 0px;
  --wadk-bp-x-small: 360px;
  --wadk-bp-small: 600px;
  --wadk-bp-medium: 920px;
  --wadk-bp-large: 1200px;
  --wadk-bp-x-large: 1440px;
  --wadk-bp-max: 1920px;

  --wadk-duration-xxs: 130ms;
  --wadk-duration-xs: 160ms;
  --wadk-duration-sm: 190ms;
  --wadk-duration-base: 220ms;
  --wadk-duration-md: 250ms;
  --wadk-duration-lg: 300ms;
  --wadk-duration-xl: 350ms;
  --wadk-duration-xxl: 400ms;

  --wadk-animation-fast-out-slow-in: cubic-bezier(0, 0, 0.2, 1);
  --wadk-ease-out: cubic-bezier(0, 0, 0.4, 1);
  --wadk-ease-in: cubic-bezier(0.5, 0, 1, 1);
  --wadk-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);

  /* to sync sizes of components between figma and real life */
  --wadk-exp-component-line-height-xl7: calc(var(--wadk-line-height-xl7) - 2 * var(--wadk-border-width));
  --wadk-exp-component-line-height-xl6: calc(var(--wadk-line-height-xl6) - 2 * var(--wadk-border-width));
  --wadk-exp-component-line-height-xl5: calc(var(--wadk-line-height-xl5) - 2 * var(--wadk-border-width));
  --wadk-exp-component-line-height-xl4: calc(var(--wadk-line-height-xl4) - 2 * var(--wadk-border-width));
  --wadk-exp-component-line-height-xl3: calc(var(--wadk-line-height-xl3) - 2 * var(--wadk-border-width));
  --wadk-exp-component-line-height-xl2: calc(var(--wadk-line-height-xl2) - 2 * var(--wadk-border-width));
  --wadk-exp-component-line-height-xl: calc(var(--wadk-line-height-xl) - 2 * var(--wadk-border-width));
  --wadk-exp-component-line-height-lg: calc(var(--wadk-line-height-lg) - 2 * var(--wadk-border-width));
  --wadk-exp-component-line-height-sm: calc(var(--wadk-line-height-sm) - 2 * var(--wadk-border-width));
  --wadk-exp-component-line-height-md: calc(var(--wadk-line-height-md) - 2 * var(--wadk-border-width));
  --wadk-exp-component-line-height-xs: calc(var(--wadk-line-height-xs) - 2 * var(--wadk-border-width));
  --wadk-exp-component-line-height-base: calc(var(--wadk-line-height-base) - 2 * var(--wadk-border-width));
  --wadk-exp-component-line-height-xs2: calc(var(--wadk-line-height-xs2) - 2 * var(--wadk-border-width));

  --wadk-border-width: 1px;
  --wadk-border-radius-round: 999px;
  --wadk-monospace-font-family: 'Source Code Pro', 'Consolas', monospace;
}

:root, [data-theme] {
  /* theme-independent common values */
  /* derived values: day */
  --wadk-theme: Light;
  --wadk-raise-1-strong: 0px 1px 0px var(--wadk-generic-shade-strong);
  --wadk-raise-1-medium: 0px 1px 0px var(--wadk-generic-shade-medium);
  --wadk-raise-1-base: 0px 1px 0px var(--wadk-generic-shade-base);
  --wadk-raise-1-light: 0px 1px 0px var(--wadk-generic-shade-light);
  --wadk-raise-1-subtle: 0px 1px 0px var(--wadk-generic-shade-subtle);
  --wadk-raise-2-strong: 0px 1px 3px var(--wadk-generic-shade-strong), 0px 1px 2px -1px var(--wadk-generic-shade-strong);
  --wadk-raise-2-medium: 0px 1px 3px var(--wadk-generic-shade-medium), 0px 1px 2px -1px var(--wadk-generic-shade-medium);
  --wadk-raise-2-base: 0px 1px 3px var(--wadk-generic-shade-base), 0px 1px 2px -1px var(--wadk-generic-shade-base);
  --wadk-raise-2-light: 0px 1px 3px var(--wadk-generic-shade-light), 0px 1px 2px -1px var(--wadk-generic-shade-light);
  --wadk-raise-2-subtle: 0px 1px 3px var(--wadk-generic-shade-subtle), 0px 1px 2px -1px var(--wadk-generic-shade-subtle);
  --wadk-raise-3-strong: 0px 4px 6px -1px var(--wadk-generic-shade-strong), 0px 2px 4px -2px var(--wadk-generic-shade-strong);
  --wadk-raise-3-medium: 0px 4px 6px -1px var(--wadk-generic-shade-strong), 0px 2px 4px -2px var(--wadk-generic-shade-medium);
  --wadk-raise-3-base: 0px 4px 6px -1px var(--wadk-generic-shade-medium), 0px 2px 4px -2px var(--wadk-generic-shade-base);
  --wadk-raise-3-light: 0px 4px 6px -1px var(--wadk-generic-shade-base), 0px 2px 4px -2px var(--wadk-generic-shade-light);
  --wadk-raise-3-subtle: 0px 4px 6px -1px var(--wadk-generic-shade-light), 0px 2px 4px -2px var(--wadk-generic-shade-subtle);
  --wadk-raise-4-strong: 0px 10px 15px -3px var(--wadk-generic-shade-strong), 0px 4px 6px -4px var(--wadk-generic-shade-strong);
  --wadk-raise-4-medium: 0px 10px 15px -3px var(--wadk-generic-shade-strong), 0px 4px 6px -4px var(--wadk-generic-shade-medium);
  --wadk-raise-4-base: 0px 10px 15px -3px var(--wadk-generic-shade-medium), 0px 4px 6px -4px var(--wadk-generic-shade-base);
  --wadk-raise-4-light: 0px 10px 15px -3px var(--wadk-generic-shade-base), 0px 4px 6px -4px var(--wadk-generic-shade-light);
  --wadk-raise-4-subtle: 0px 10px 15px -3px var(--wadk-generic-shade-light), 0px 4px 6px -4px var(--wadk-generic-shade-subtle);
  --wadk-raise-5-strong: 0px 20px 25px -5px var(--wadk-generic-shade-strong), 0px 8px 10px -6px var(--wadk-generic-shade-strong);
  --wadk-raise-5-medium: 0px 20px 25px -5px var(--wadk-generic-shade-strong), 0px 8px 10px -6px var(--wadk-generic-shade-medium);
  --wadk-raise-5-base: 0px 20px 25px -5px var(--wadk-generic-shade-medium), 0px 8px 10px -6px var(--wadk-generic-shade-base);
  --wadk-raise-5-light: 0px 20px 25px -5px var(--wadk-generic-shade-base), 0px 8px 10px -6px var(--wadk-generic-shade-light);
  --wadk-raise-5-subtle: 0px 20px 25px -5px var(--wadk-generic-shade-light), 0px 8px 10px -6px var(--wadk-generic-shade-subtle);
  --wadk-side-shadow-3-bottom: 0px -4px 12px -4px var(--wadk-generic-shade-light), 0px -2px 4px -2px var(--wadk-generic-shade-subtle);
  --wadk-side-shadow-3-left: 4px 0px 12px -4px var(--wadk-generic-shade-light), 2px 0px 4px -2px var(--wadk-generic-shade-subtle);
  --wadk-side-shadow-3-right: -4px 0px 12px -4px var(--wadk-generic-shade-light), -2px 0px 4px -2px var(--wadk-generic-shade-subtle);
  --wadk-side-shadow-3-top: 0px 4px 12px -4px var(--wadk-generic-shade-light), 0px 2px 4px -2px var(--wadk-generic-shade-subtle);
  --wadk-side-shadow-4-bottom: 0px -8px 24px -8px var(--wadk-generic-shade-light), 0px -4px 8px -4px var(--wadk-generic-shade-subtle);
  --wadk-side-shadow-4-left: 8px 0px 24px -8px var(--wadk-generic-shade-light), 4px 0px 8px -4px var(--wadk-generic-shade-subtle);
  --wadk-side-shadow-4-right: -8px 0px 24px -8px var(--wadk-generic-shade-light), -4px 0px 8px -4px var(--wadk-generic-shade-subtle);
  --wadk-side-shadow-4-top: 0px 8px 24px -8px var(--wadk-generic-shade-light), 0px 4px 8px -4px var(--wadk-generic-shade-subtle);
  --wadk-side-shadow-5-bottom: 0px -16px 48px -16px var(--wadk-generic-shade-light), 0px -8px 16px -8px var(--wadk-generic-shade-subtle);
  --wadk-side-shadow-5-left: 16px 0px 48px -16px var(--wadk-generic-shade-light), 8px 0px 16px -8px var(--wadk-generic-shade-subtle);
  --wadk-side-shadow-5-right: -16px 0px 48px -16px var(--wadk-generic-shade-light), -8px 0px 16px -8px var(--wadk-generic-shade-subtle);
  --wadk-side-shadow-5-top: 0px 16px 48px -16px var(--wadk-generic-shade-light), 0px 8px 16px -8px var(--wadk-generic-shade-subtle);
}
[data-theme-variant='compact'], [data-theme-variant='default'], [data-theme-variant='db-compact'] {
  /* derived values: compact */
  --wadk-border-radius-none: 0px;
  --wadk-border-radius-xs: 2px;
  --wadk-border-radius-sm: 3px;
  --wadk-border-radius-base: 4px;
  --wadk-border-radius-md: 6px;
  --wadk-border-radius-lg: 8px;
  --wadk-border-radius-xl: 12px;
  --wadk-border-radius-xl2: 18px;
  --wadk-border-radius-round: 999px;
  --wadk-font-size-xs2: 0.5625rem;
  --wadk-font-size-xs: 0.625rem;
  --wadk-font-size-sm: 0.6875rem;
  --wadk-font-size-base: 0.75rem;
  --wadk-font-size-md: 0.875rem;
  --wadk-font-size-lg: 1rem;
  --wadk-font-size-xl: 1.25rem;
  --wadk-font-size-xl2: 1.625rem;
  --wadk-font-size-xl3: 2rem;
  --wadk-font-size-xl4: 2.375rem;
  --wadk-font-size-xl5: 3rem;
  --wadk-font-size-xl6: 4rem;
  --wadk-font-size-xl7: 5rem;
  --wadk-font-size-xl8: 6rem;
  --wadk-font-size-xl9: 8rem;
  --wadk-icon-size-primary: var(--wadk-line-height-base);
  --wadk-icon-size-sm: var(--wadk-line-height-sm);
  --wadk-icon-size-base: var(--wadk-line-height-base);
  --wadk-icon-size-base: var(--wadk-line-height-base);
  --wadk-icon-size-md: var(--wadk-line-height-lg);
  --wadk-icon-size-lg: var(--wadk-line-height-xl2);
  --wadk-icon-size-secondary: var(--wadk-line-height-base);
  --wadk-icon-size-xl: var(--wadk-line-height-xl4);
  --wadk-icon-size-xl2: var(--wadk-line-height-xl5);
  --wadk-icon-size-xl3: var(--wadk-line-height-xl6);
  --wadk-icon-size-xl4: var(--wadk-line-height-xl8);
  --wadk-icon-size-xl5: var(--wadk-line-height-xl9);
  --wadk-line-height-xs2: 0.75rem;
  --wadk-line-height-xs: 0.75rem;
  --wadk-line-height-sm: 0.875rem;
  --wadk-line-height-base: 1rem;
  --wadk-line-height-md: 1.25rem;
  --wadk-line-height-lg: 1.5rem;
  --wadk-line-height-xl: 1.75rem;
  --wadk-line-height-xl2: 2rem;
  --wadk-line-height-xl3: 2.25rem;
  --wadk-line-height-xl4: 2.5rem;
  --wadk-line-height-xl5: 3.5rem;
  --wadk-line-height-xl6: 4.5rem;
  --wadk-line-height-xl7: 5.5rem;
  --wadk-line-height-xl8: 6.5rem;
  --wadk-line-height-xl9: 9.5rem;
  --wadk-mode-name: Compact Original;
  --wadk-paragraph-spacing-label: 0.5rem;
  --wadk-paragraph-spacing-paragraph: 0.75rem;
  --wadk-sx-xs4: 0.0625rem;
  --wadk-sx-xs3: 0.125rem;
  --wadk-sx-xs2: 0.25rem;
  --wadk-sx-xs: 0.375rem;
  --wadk-sx-sm: 0.5rem;
  --wadk-sx-base: 0.75rem;
  --wadk-sx-md: 1rem;
  --wadk-sx-lg: 1.25rem;
  --wadk-sx-xl: 1.5rem;
  --wadk-sx-xl2: 1.75rem;
  --wadk-sx-xl3: 2rem;
  --wadk-sx-xl4: 2.5rem;
  --wadk-sx-xl5: 3rem;
  --wadk-sx-xl6: 3.75rem;
  --wadk-sx-xl7: 4.5rem;
  --wadk-sy-xs4: 0.0625rem;
  --wadk-sy-xs3: 0.125rem;
  --wadk-sy-xs2: 0.1875rem;
  --wadk-sy-xs: 0.25rem;
  --wadk-sy-sm: 0.375rem;
  --wadk-sy-base: 0.5rem;
  --wadk-sy-md: 0.75rem;
  --wadk-sy-lg: 1rem;
  --wadk-sy-xl: 1.25rem;
  --wadk-sy-xl2: 1.5rem;
  --wadk-sy-xl3: 1.75rem;
  --wadk-sy-xl4: 2.25rem;
  --wadk-sy-xl5: 2.75rem;
  --wadk-sy-xl6: 3.25rem;
  --wadk-sy-xl7: 4rem;
}
[data-theme-variant='spacious'], [data-theme-variant='db-spacious'] {
  /* derived values: spacious */
  --wadk-border-radius-none: 0px;
  --wadk-border-radius-xs: 3px;
  --wadk-border-radius-sm: 4px;
  --wadk-border-radius-base: 5px;
  --wadk-border-radius-md: 7px;
  --wadk-border-radius-lg: 9px;
  --wadk-border-radius-xl: 13px;
  --wadk-border-radius-xl2: 20px;
  --wadk-border-radius-round: 999px;
  --wadk-font-size-xs2: 0.625rem;
  --wadk-font-size-xs: 0.6875rem;
  --wadk-font-size-sm: 0.75rem;
  --wadk-font-size-base: 0.875rem;
  --wadk-font-size-md: 1rem;
  --wadk-font-size-lg: 1.125rem;
  --wadk-font-size-xl: 1.5rem;
  --wadk-font-size-xl2: 1.875rem;
  --wadk-font-size-xl3: 2.25rem;
  --wadk-font-size-xl4: 2.5rem;
  --wadk-font-size-xl5: 3.5rem;
  --wadk-font-size-xl6: 4.5rem;
  --wadk-font-size-xl7: 5.5rem;
  --wadk-font-size-xl8: 6.5rem;
  --wadk-font-size-xl9: 8.5rem;
  --wadk-icon-size-primary: var(--wadk-line-height-base);
  --wadk-icon-size-sm: var(--wadk-line-height-sm);
  --wadk-icon-size-base: var(--wadk-line-height-base);
  --wadk-icon-size-base: var(--wadk-line-height-base);
  --wadk-icon-size-md: var(--wadk-line-height-lg);
  --wadk-icon-size-lg: var(--wadk-line-height-xl2);
  --wadk-icon-size-secondary: var(--wadk-line-height-base);
  --wadk-icon-size-xl: var(--wadk-line-height-xl4);
  --wadk-icon-size-xl2: var(--wadk-line-height-xl5);
  --wadk-icon-size-xl3: var(--wadk-line-height-xl6);
  --wadk-icon-size-xl4: var(--wadk-line-height-xl8);
  --wadk-icon-size-xl5: var(--wadk-line-height-xl9);
  --wadk-line-height-xs2: 0.75rem;
  --wadk-line-height-xs: 0.875rem;
  --wadk-line-height-sm: 1rem;
  --wadk-line-height-base: 1.25rem;
  --wadk-line-height-md: 1.5rem;
  --wadk-line-height-lg: 1.75rem;
  --wadk-line-height-xl: 2rem;
  --wadk-line-height-xl2: 2.25rem;
  --wadk-line-height-xl3: 2.25rem;
  --wadk-line-height-xl4: 2.5rem;
  --wadk-line-height-xl5: 3.5rem;
  --wadk-line-height-xl6: 4.5rem;
  --wadk-line-height-xl7: 5.5rem;
  --wadk-line-height-xl8: 7.5rem;
  --wadk-line-height-xl9: 10.5rem;
  --wadk-mode-name: Spacious;
  --wadk-paragraph-spacing-label: 0.75rem;
  --wadk-paragraph-spacing-paragraph: 1rem;
  --wadk-sx-xs4: 0.125rem;
  --wadk-sx-xs3: 0.25rem;
  --wadk-sx-xs2: 0.375rem;
  --wadk-sx-xs: 0.5rem;
  --wadk-sx-sm: 0.75rem;
  --wadk-sx-base: 1rem;
  --wadk-sx-md: 1.25rem;
  --wadk-sx-lg: 1.5rem;
  --wadk-sx-xl: 1.75rem;
  --wadk-sx-xl2: 2rem;
  --wadk-sx-xl3: 2.5rem;
  --wadk-sx-xl4: 3rem;
  --wadk-sx-xl5: 3.75rem;
  --wadk-sx-xl6: 4.5rem;
  --wadk-sx-xl7: 5.25rem;
  --wadk-sy-xs4: 0.125rem;
  --wadk-sy-xs3: 0.1875rem;
  --wadk-sy-xs2: 0.25rem;
  --wadk-sy-xs: 0.375rem;
  --wadk-sy-sm: 0.5rem;
  --wadk-sy-base: 0.75rem;
  --wadk-sy-md: 1rem;
  --wadk-sy-lg: 1.25rem;
  --wadk-sy-xl: 1.5rem;
  --wadk-sy-xl2: 1.75rem;
  --wadk-sy-xl3: 2.25rem;
  --wadk-sy-xl4: 2.75rem;
  --wadk-sy-xl5: 3.25rem;
  --wadk-sy-xl6: 4rem;
  --wadk-sy-xl7: 5rem;
}
[data-theme-variant='touch'], [data-theme-variant='db-touch'] {
  /* derived values: touch */
  --wadk-border-radius-none: 0px;
  --wadk-border-radius-xs: 4px;
  --wadk-border-radius-sm: 5px;
  --wadk-border-radius-base: 6px;
  --wadk-border-radius-md: 10px;
  --wadk-border-radius-lg: 14px;
  --wadk-border-radius-xl: 20px;
  --wadk-border-radius-xl2: 24px;
  --wadk-border-radius-round: 999px;
  --wadk-font-size-xs2: 0.6875rem;
  --wadk-font-size-xs: 0.75rem;
  --wadk-font-size-sm: 0.875rem;
  --wadk-font-size-base: 1rem;
  --wadk-font-size-md: 1.125rem;
  --wadk-font-size-lg: 1.25rem;
  --wadk-font-size-xl: 1.5rem;
  --wadk-font-size-xl2: 1.75rem;
  --wadk-font-size-xl3: 2rem;
  --wadk-font-size-xl4: 2.25rem;
  --wadk-font-size-xl5: 3rem;
  --wadk-font-size-xl6: 4rem;
  --wadk-font-size-xl7: 5rem;
  --wadk-font-size-xl8: 6rem;
  --wadk-font-size-xl9: 8rem;
  --wadk-icon-size-primary: var(--wadk-line-height-base);
  --wadk-icon-size-sm: var(--wadk-line-height-sm);
  --wadk-icon-size-base: var(--wadk-line-height-base);
  --wadk-icon-size-base: var(--wadk-line-height-base);
  --wadk-icon-size-md: var(--wadk-line-height-lg);
  --wadk-icon-size-lg: var(--wadk-line-height-xl2);
  --wadk-icon-size-secondary: var(--wadk-line-height-base);
  --wadk-icon-size-xl: var(--wadk-line-height-xl4);
  --wadk-icon-size-xl2: var(--wadk-line-height-xl5);
  --wadk-icon-size-xl3: var(--wadk-line-height-xl6);
  --wadk-icon-size-xl4: var(--wadk-line-height-xl8);
  --wadk-icon-size-xl5: var(--wadk-line-height-xl9);
  --wadk-line-height-xs2: 0.75rem;
  --wadk-line-height-xs: 1rem;
  --wadk-line-height-sm: 1.25rem;
  --wadk-line-height-base: 1.5rem;
  --wadk-line-height-md: 1.75rem;
  --wadk-line-height-lg: 2rem;
  --wadk-line-height-xl: 2.25rem;
  --wadk-line-height-xl2: 2.5rem;
  --wadk-line-height-xl3: 2.75rem;
  --wadk-line-height-xl4: 3rem;
  --wadk-line-height-xl5: 3.5rem;
  --wadk-line-height-xl6: 4.5rem;
  --wadk-line-height-xl7: 5.5rem;
  --wadk-line-height-xl8: 6.5rem;
  --wadk-line-height-xl9: 9.5rem;
  --wadk-mode-name: Touch;
  --wadk-paragraph-spacing-label: 1rem;
  --wadk-paragraph-spacing-paragraph: 1.5rem;
  --wadk-sx-xs4: 0.25rem;
  --wadk-sx-xs3: 0.375rem;
  --wadk-sx-xs2: 0.5rem;
  --wadk-sx-xs: 0.75rem;
  --wadk-sx-sm: 1rem;
  --wadk-sx-base: 1.25rem;
  --wadk-sx-md: 1.5rem;
  --wadk-sx-lg: 1.75rem;
  --wadk-sx-xl: 2rem;
  --wadk-sx-xl2: 2.5rem;
  --wadk-sx-xl3: 3rem;
  --wadk-sx-xl4: 3.75rem;
  --wadk-sx-xl5: 4.5rem;
  --wadk-sx-xl6: 5.25rem;
  --wadk-sx-xl7: 6.25rem;
  --wadk-sy-xs4: 0.125rem;
  --wadk-sy-xs3: 0.25rem;
  --wadk-sy-xs2: 0.375rem;
  --wadk-sy-xs: 0.5rem;
  --wadk-sy-sm: 0.75rem;
  --wadk-sy-base: 1rem;
  --wadk-sy-md: 1.25rem;
  --wadk-sy-lg: 1.5rem;
  --wadk-sy-xl: 1.75rem;
  --wadk-sy-xl2: 2.25rem;
  --wadk-sy-xl3: 2.75rem;
  --wadk-sy-xl4: 3.25rem;
  --wadk-sy-xl5: 4rem;
  --wadk-sy-xl6: 5rem;
  --wadk-sy-xl7: 6rem;
}
[data-theme-variant='db-compact'] {
  /* derived values: square */
  --wadk-border-radius-none: 0px;
  --wadk-border-radius-xs: 1px;
  --wadk-border-radius-sm: 2px;
  --wadk-border-radius-base: 2px;
  --wadk-border-radius-md: 3px;
  --wadk-border-radius-lg: 4px;
  --wadk-border-radius-xl: 4px;
  --wadk-border-radius-xl2: 4px;
  --wadk-border-radius-round: 999px;
}
[data-theme-variant='db-spacious'] {
  /* derived values: square */
  --wadk-border-radius-none: 0px;
  --wadk-border-radius-xs: 1px;
  --wadk-border-radius-sm: 2px;
  --wadk-border-radius-base: 2px;
  --wadk-border-radius-md: 3px;
  --wadk-border-radius-lg: 4px;
  --wadk-border-radius-xl: 4px;
  --wadk-border-radius-xl2: 4px;
  --wadk-border-radius-round: 999px;
}
[data-theme-variant='db-touch'] {
  /* derived values: square */
  --wadk-border-radius-none: 0px;
  --wadk-border-radius-xs: 1px;
  --wadk-border-radius-sm: 2px;
  --wadk-border-radius-base: 2px;
  --wadk-border-radius-md: 3px;
  --wadk-border-radius-lg: 4px;
  --wadk-border-radius-xl: 4px;
  --wadk-border-radius-xl2: 4px;
  --wadk-border-radius-round: 999px;
}

[data-theme='day'] {
  /* common theme values */
  /* common for Arial font family */
  --wadk-font-family: 'Arial', 'Deutsche Bank Text', 'Helvetica Neue', sans-serif;

  /* derived theme values */
  --wadk-alt-accent-strong: rgba(0, 128, 255, 0.4);
  --wadk-alt-accent-medium: rgba(0, 128, 255, 0.32);
  --wadk-alt-accent-base: rgba(0, 128, 255, 0.24);
  --wadk-alt-accent-light: rgba(0, 128, 255, 0.16);
  --wadk-alt-accent-subtle: rgba(0, 128, 255, 0.08);
  --wadk-alt-basic-strong: rgba(197, 215, 230, 0.28);
  --wadk-alt-basic-medium: rgba(197, 215, 230, 0.24);
  --wadk-alt-basic-base: rgba(197, 215, 230, 0.2);
  --wadk-alt-basic-light: rgba(197, 215, 230, 0.12);
  --wadk-alt-basic-subtle: rgba(197, 215, 230, 0.06);
  --wadk-alt-contrast-strong: rgba(10, 50, 92, 0.32);
  --wadk-alt-contrast-medium: rgba(5, 50, 97, 0.24);
  --wadk-alt-contrast-base: rgba(0, 50, 102, 0.12);
  --wadk-alt-contrast-light: rgba(0, 50, 102, 0.08);
  --wadk-alt-contrast-subtle: rgba(0, 50, 102, 0.04);
  --wadk-brand-db-dark-blue: #16184e;
  --wadk-brand-db-deep-blue: #1e2a78;
  --wadk-brand-primary-3: #0098db;
  --wadk-brand-primary-2: #0c2340;
  --wadk-brand-primary-1: #0018a8;
  --wadk-data-blue-100: #1156e1;
  --wadk-data-blue-200: #0c42c1;
  --wadk-data-blue-300: #0831a2;
  --wadk-data-blue-400: #052282;
  --wadk-data-blue-500: #03176c;
  --wadk-data-brown-100: #c2360a;
  --wadk-data-brown-200: #a62207;
  --wadk-data-brown-300: #8b1105;
  --wadk-data-brown-400: #700503;
  --wadk-data-brown-500: #5d0106;
  --wadk-data-deep-purple-100: #9a039c;
  --wadk-data-deep-purple-200: #790286;
  --wadk-data-deep-purple-300: #5b0170;
  --wadk-data-deep-purple-400: #42005a;
  --wadk-data-deep-purple-500: #30004a;
  --wadk-data-grey-100: #8099a1;
  --wadk-data-grey-200: #5d7c8a;
  --wadk-data-grey-300: #406073;
  --wadk-data-grey-400: #28455d;
  --wadk-data-grey-500: #18314d;
  --wadk-data-light-blue-100: #3798f7;
  --wadk-data-light-blue-200: #2876d4;
  --wadk-data-light-blue-300: #1b58b1;
  --wadk-data-light-blue-400: #113e8f;
  --wadk-data-light-blue-500: #0a2b76;
  --wadk-data-light-green-100: #50a838;
  --wadk-data-light-green-200: #379028;
  --wadk-data-light-green-300: #22781c;
  --wadk-data-light-green-400: #116112;
  --wadk-data-light-green-500: #0a5010;
  --wadk-data-orange-100: #f66a0b;
  --wadk-data-orange-200: #d34e08;
  --wadk-data-orange-300: #b13605;
  --wadk-data-orange-400: #8e2303;
  --wadk-data-orange-500: #761502;
  --wadk-data-pink-100: #ff288d;
  --wadk-data-pink-200: #db1d89;
  --wadk-data-pink-300: #b71481;
  --wadk-data-pink-400: #930c74;
  --wadk-data-pink-500: #7a076b;
  --wadk-data-purple-100: #bf3fff;
  --wadk-data-purple-200: #962edb;
  --wadk-data-purple-300: #711fb7;
  --wadk-data-purple-400: #501493;
  --wadk-data-purple-500: #390c7a;
  --wadk-data-status-blue-grey-100: #526d7a;
  --wadk-data-status-blue-grey-200: #3b5768;
  --wadk-data-status-blue-grey-300: #294257;
  --wadk-data-status-blue-grey-400: #1a2f46;
  --wadk-data-status-blue-grey-500: #0f213a;
  --wadk-data-status-green-100: #00aa1c;
  --wadk-data-status-green-200: #009225;
  --wadk-data-status-green-300: #007a2b;
  --wadk-data-status-green-400: #00622c;
  --wadk-data-status-green-500: #00512c;
  --wadk-data-status-red-100: #f42d2d;
  --wadk-data-status-red-200: #d12030;
  --wadk-data-status-red-300: #af1631;
  --wadk-data-status-red-400: #8d0e2f;
  --wadk-data-status-red-500: #75082e;
  --wadk-data-status-yellow-100: #d97e1c;
  --wadk-data-status-yellow-200: #ba6214;
  --wadk-data-status-yellow-300: #9c4a0e;
  --wadk-data-status-yellow-400: #7d3408;
  --wadk-data-status-yellow-500: #682505;
  --wadk-data-teal-100: #06a3b6;
  --wadk-data-teal-200: #047f9c;
  --wadk-data-teal-300: #036083;
  --wadk-data-teal-400: #014569;
  --wadk-data-teal-500: #013257;
  --wadk-fill-accent-strong: #001eb2;
  --wadk-fill-accent-medium: #0544c2;
  --wadk-fill-accent-base: #0550d1;
  --wadk-fill-accent-light: #cce6ff;
  --wadk-fill-accent-subtle: #e7f4fe;
  --wadk-fill-basic-strong: #ffffff;
  --wadk-fill-basic-medium: #dce2e5;
  --wadk-fill-basic-base: #e6ecef;
  --wadk-fill-basic-light: #eff3f5;
  --wadk-fill-basic-subtle: #f8fafb;
  --wadk-fill-basic-blank: #ffffff;
  --wadk-fill-contrast-strong: #566781;
  --wadk-fill-contrast-medium: #131d2a;
  --wadk-fill-contrast-base: #192434;
  --wadk-fill-contrast-light: #1e2b3e;
  --wadk-fill-contrast-subtle: #233248;
  --wadk-generic-black: #0d131c;
  --wadk-generic-inverse: #0d131c;
  --wadk-generic-transparent: rgba(255, 255, 255, 0);
  --wadk-generic-white: #ffffff;
  --wadk-generic-blank: #ffffff;
  --wadk-generic-shade-strong: rgba(2, 26, 51, 0.3);
  --wadk-generic-shade-medium: rgba(2, 26, 51, 0.2);
  --wadk-generic-shade-base: rgba(2, 26, 51, 0.15);
  --wadk-generic-shade-light: rgba(2, 26, 51, 0.1);
  --wadk-generic-shade-subtle: rgba(2, 26, 51, 0.05);
  --wadk-generic-tint-strong: #ffffff;
  --wadk-generic-tint-medium: rgba(255, 255, 255, 0.6);
  --wadk-generic-tint-base: rgba(255, 255, 255, 0.45);
  --wadk-generic-tint-light: rgba(255, 255, 255, 0.2);
  --wadk-generic-tint-subtle: rgba(255, 255, 255, 0.15);
  --wadk-line-basic-strong: #a9b3bc;
  --wadk-line-basic-medium: #c4ccd4;
  --wadk-line-basic-base: #cfd6de;
  --wadk-line-basic-light: #dbe1e6;
  --wadk-line-basic-subtle: #e1e5ea;
  --wadk-line-contrast-strong: #5d6e89;
  --wadk-line-contrast-medium: #566781;
  --wadk-line-contrast-base: #485870;
  --wadk-line-contrast-light: #3b495e;
  --wadk-line-contrast-subtle: #354255;
  --wadk-status-error-strong: #c20000;
  --wadk-status-error-medium: #d22d2d;
  --wadk-status-error-base: #d22d2d;
  --wadk-status-error-light: #fdcece;
  --wadk-status-error-subtle: #ffe5e6;
  --wadk-status-info-strong: #096a9b;
  --wadk-status-info-medium: #0a7cb5;
  --wadk-status-info-base: #0a7cb5;
  --wadk-status-info-light: #cfedfc;
  --wadk-status-info-subtle: #e7f6fd;
  --wadk-status-success-strong: #087537;
  --wadk-status-success-medium: #0f8542;
  --wadk-status-success-base: #0f8542;
  --wadk-status-success-light: #d4f7d4;
  --wadk-status-success-subtle: #ecf9ec;
  --wadk-status-warning-strong: #a14800;
  --wadk-status-warning-medium: #b26025;
  --wadk-status-warning-base: #b26025;
  --wadk-status-warning-light: #ffe9c7;
  --wadk-status-warning-subtle: #fcf7e8;
  --wadk-stroke-accent-strong: #001a99;
  --wadk-stroke-accent-medium: #043ba9;
  --wadk-stroke-accent-base: #0445b3;
  --wadk-stroke-accent-light: #a3d0ff;
  --wadk-stroke-accent-subtle: #bfe2fc;
  --wadk-stroke-basic-strong: #73808c;
  --wadk-stroke-basic-medium: #8a96a3;
  --wadk-stroke-basic-base: #b4bfcb;
  --wadk-stroke-basic-light: #c8d0d8;
  --wadk-stroke-basic-subtle: #d3dae1;
  --wadk-stroke-contrast-strong: #5d6e89;
  --wadk-stroke-contrast-medium: #566781;
  --wadk-stroke-contrast-base: #485870;
  --wadk-stroke-contrast-light: #3b495e;
  --wadk-stroke-contrast-subtle: #354255;
  --wadk-text-basic-accent: #003bb2;
  --wadk-text-basic-action-link: #0b62da;
  --wadk-text-basic-negative: #d50404;
  --wadk-text-basic-positive: #087537;
  --wadk-text-basic-warning: #b24400;
  --wadk-text-basic-base: #0d131c;
  --wadk-text-basic-light: rgba(13, 19, 28, 0.66);
  --wadk-text-basic-subtle: rgba(13, 19, 28, 0.33);
  --wadk-text-contrast-accent: #9bbcfd;
  --wadk-text-contrast-action-link: #66bfff;
  --wadk-text-contrast-negative: #ff9999;
  --wadk-text-contrast-positive: #72da7d;
  --wadk-text-contrast-warning: #ffbb33;
  --wadk-text-contrast-base: #ffffff;
  --wadk-text-contrast-light: rgba(255, 255, 255, 0.75);
  --wadk-text-contrast-subtle: rgba(255, 255, 255, 0.4);
}

[data-theme='night'] {
  /* common theme values */
  /* common for Arial font family */
  --wadk-font-family: 'Arial', 'Deutsche Bank Text', 'Helvetica Neue', sans-serif;

  /* derived theme values */
  --wadk-alt-accent-strong: rgba(55, 139, 255, 0.48);
  --wadk-alt-accent-medium: rgba(55, 139, 255, 0.4);
  --wadk-alt-accent-base: rgba(55, 139, 255, 0.32);
  --wadk-alt-accent-light: rgba(55, 139, 255, 0.24);
  --wadk-alt-accent-subtle: rgba(55, 139, 255, 0.2);
  --wadk-alt-basic-strong: rgba(197, 215, 230, 0.28);
  --wadk-alt-basic-medium: rgba(197, 215, 230, 0.24);
  --wadk-alt-basic-base: rgba(197, 215, 230, 0.2);
  --wadk-alt-basic-light: rgba(197, 215, 230, 0.12);
  --wadk-alt-basic-subtle: rgba(197, 215, 230, 0.06);
  --wadk-alt-contrast-strong: rgba(197, 215, 230, 0.28);
  --wadk-alt-contrast-medium: rgba(197, 215, 230, 0.24);
  --wadk-alt-contrast-base: rgba(197, 215, 230, 0.2);
  --wadk-alt-contrast-light: rgba(197, 215, 230, 0.12);
  --wadk-alt-contrast-subtle: rgba(197, 215, 230, 0.06);
  --wadk-brand-db-dark-blue: #16184e;
  --wadk-brand-db-deep-blue: #1e2a78;
  --wadk-brand-primary-3: #0fb6ff;
  --wadk-brand-primary-2: #0c2340;
  --wadk-brand-primary-1: #0018a8;
  --wadk-data-blue-100: #4c6bf6;
  --wadk-data-blue-200: #7892f9;
  --wadk-data-blue-300: #93aafc;
  --wadk-data-blue-400: #b7c8fe;
  --wadk-data-blue-500: #dbe4fe;
  --wadk-data-brown-100: #d14d05;
  --wadk-data-brown-200: #e3823c;
  --wadk-data-brown-300: #f1a763;
  --wadk-data-brown-400: #facd98;
  --wadk-data-brown-500: #fce9cb;
  --wadk-data-deep-purple-100: #ae45e1;
  --wadk-data-deep-purple-200: #cc71ec;
  --wadk-data-deep-purple-300: #e18ff6;
  --wadk-data-deep-purple-400: #f2b6fc;
  --wadk-data-deep-purple-500: #fbdafd;
  --wadk-data-grey-100: #8099a1;
  --wadk-data-grey-200: #a8c1c6;
  --wadk-data-grey-300: #c6e0e2;
  --wadk-data-grey-400: #e1f5f5;
  --wadk-data-grey-500: #f0faf9;
  --wadk-data-light-blue-100: #56abff;
  --wadk-data-light-blue-200: #80c6ff;
  --wadk-data-light-blue-300: #99d6ff;
  --wadk-data-light-blue-400: #bbe7ff;
  --wadk-data-light-blue-500: #ddf4ff;
  --wadk-data-light-green-100: #39cf10;
  --wadk-data-light-green-200: #72e245;
  --wadk-data-light-green-300: #9bf06b;
  --wadk-data-light-green-400: #c5fa9d;
  --wadk-data-light-green-500: #e5fccd;
  --wadk-data-orange-100: #ff6b07;
  --wadk-data-orange-200: #ff9a45;
  --wadk-data-orange-300: #ffb76a;
  --wadk-data-orange-400: #ffd59b;
  --wadk-data-orange-500: #ffedcd;
  --wadk-data-pink-100: #ff288d;
  --wadk-data-pink-200: #ff5d99;
  --wadk-data-pink-300: #ff7ea0;
  --wadk-data-pink-400: #ffa9b7;
  --wadk-data-pink-500: #ffd3d7;
  --wadk-data-purple-100: #c77dec;
  --wadk-data-purple-200: #dc9df3;
  --wadk-data-purple-300: #eab2f9;
  --wadk-data-purple-400: #f6cdfd;
  --wadk-data-purple-500: #fce6fe;
  --wadk-data-status-blue-grey-100: #607d90;
  --wadk-data-status-blue-grey-200: #8dacbc;
  --wadk-data-status-blue-grey-300: #b1d1dd;
  --wadk-data-status-blue-grey-400: #d3ecf3;
  --wadk-data-status-blue-grey-500: #e8f6f9;
  --wadk-data-status-green-100: #099928;
  --wadk-data-status-green-200: #39c149;
  --wadk-data-status-green-300: #61e064;
  --wadk-data-status-green-400: #9ff498;
  --wadk-data-status-green-500: #d2f9ca;
  --wadk-data-status-red-100: #e92424;
  --wadk-data-status-red-200: #f16558;
  --wadk-data-status-red-300: #f8907a;
  --wadk-data-status-red-400: #fcbda7;
  --wadk-data-status-red-500: #fde1d2;
  --wadk-data-status-yellow-100: #f7ab06;
  --wadk-data-status-yellow-200: #fac643;
  --wadk-data-status-yellow-300: #fcd768;
  --wadk-data-status-yellow-400: #fee89a;
  --wadk-data-status-yellow-500: #fef5cc;
  --wadk-data-teal-100: #4cacb7;
  --wadk-data-teal-200: #76d1d3;
  --wadk-data-teal-300: #97e9e4;
  --wadk-data-teal-400: #bdf7ef;
  --wadk-data-teal-500: #defbf4;
  --wadk-fill-accent-strong: #196fe5;
  --wadk-fill-accent-medium: #1868d8;
  --wadk-fill-accent-base: #155dc1;
  --wadk-fill-accent-light: #18488b;
  --wadk-fill-accent-subtle: #1a3963;
  --wadk-fill-basic-strong: #566781;
  --wadk-fill-basic-medium: #0a0e15;
  --wadk-fill-basic-base: #0f151f;
  --wadk-fill-basic-light: #131d2a;
  --wadk-fill-basic-subtle: #192434;
  --wadk-fill-basic-blank: #1e2b3e;
  --wadk-fill-contrast-strong: #566781;
  --wadk-fill-contrast-medium: #131d2a;
  --wadk-fill-contrast-base: #192434;
  --wadk-fill-contrast-light: #1e2b3e;
  --wadk-fill-contrast-subtle: #233248;
  --wadk-generic-black: #000000;
  --wadk-generic-inverse: #ffffff;
  --wadk-generic-transparent: rgba(255, 255, 255, 0);
  --wadk-generic-white: #ffffff;
  --wadk-generic-blank: #213045;
  --wadk-generic-shade-strong: rgba(0, 0, 0, 0.8);
  --wadk-generic-shade-medium: rgba(0, 0, 0, 0.6);
  --wadk-generic-shade-base: rgba(0, 0, 0, 0.3);
  --wadk-generic-shade-light: rgba(0, 0, 0, 0.2);
  --wadk-generic-shade-subtle: rgba(0, 0, 0, 0.1);
  --wadk-generic-tint-strong: rgba(197, 215, 230, 0.24);
  --wadk-generic-tint-medium: rgba(197, 215, 230, 0.12);
  --wadk-generic-tint-base: rgba(197, 215, 230, 0.07);
  --wadk-generic-tint-light: rgba(197, 215, 230, 0.05);
  --wadk-generic-tint-subtle: rgba(197, 215, 230, 0.03);
  --wadk-line-basic-strong: #566781;
  --wadk-line-basic-medium: #4f5f78;
  --wadk-line-basic-base: #415068;
  --wadk-line-basic-light: #3d4c61;
  --wadk-line-basic-subtle: #374457;
  --wadk-line-contrast-strong: #5d6e89;
  --wadk-line-contrast-medium: #566781;
  --wadk-line-contrast-base: #485870;
  --wadk-line-contrast-light: #3b495e;
  --wadk-line-contrast-subtle: #354255;
  --wadk-status-error-strong: #ff8585;
  --wadk-status-error-medium: #bf2828;
  --wadk-status-error-base: #af292b;
  --wadk-status-error-light: #702c36;
  --wadk-status-error-subtle: #5f252e;
  --wadk-status-info-strong: #5abff2;
  --wadk-status-info-medium: #0a7cb5;
  --wadk-status-info-base: #0a7cb5;
  --wadk-status-info-light: #135278;
  --wadk-status-info-subtle: #0f4261;
  --wadk-status-success-strong: #72da7d;
  --wadk-status-success-medium: #0e793d;
  --wadk-status-success-base: #10723e;
  --wadk-status-success-light: #175541;
  --wadk-status-success-subtle: #0e4332;
  --wadk-status-warning-strong: #fca91c;
  --wadk-status-warning-medium: #b26025;
  --wadk-status-warning-base: #a35b28;
  --wadk-status-warning-light: #694835;
  --wadk-status-warning-subtle: #583c2c;
  --wadk-stroke-accent-strong: #478ceb;
  --wadk-stroke-accent-medium: #3a83e9;
  --wadk-stroke-accent-base: #2374e7;
  --wadk-stroke-accent-light: #205fb7;
  --wadk-stroke-accent-subtle: #25518d;
  --wadk-stroke-basic-strong: #647690;
  --wadk-stroke-basic-medium: #647690;
  --wadk-stroke-basic-base: #485870;
  --wadk-stroke-basic-light: #415068;
  --wadk-stroke-basic-subtle: #3b495e;
  --wadk-stroke-contrast-strong: #647690;
  --wadk-stroke-contrast-medium: #647690;
  --wadk-stroke-contrast-base: #485870;
  --wadk-stroke-contrast-light: #415068;
  --wadk-stroke-contrast-subtle: #3b495e;
  --wadk-text-basic-accent: #9bbcfd;
  --wadk-text-basic-action-link: #66bfff;
  --wadk-text-basic-negative: #ff9999;
  --wadk-text-basic-positive: #72da7d;
  --wadk-text-basic-warning: #ffbb33;
  --wadk-text-basic-base: #ffffff;
  --wadk-text-basic-light: rgba(255, 255, 255, 0.75);
  --wadk-text-basic-subtle: rgba(255, 255, 255, 0.4);
  --wadk-text-contrast-accent: #9bbcfd;
  --wadk-text-contrast-action-link: #66bfff;
  --wadk-text-contrast-negative: #ff9999;
  --wadk-text-contrast-positive: #72da7d;
  --wadk-text-contrast-warning: #ffbb33;
  --wadk-text-contrast-base: #ffffff;
  --wadk-text-contrast-light: rgba(255, 255, 255, 0.75);
  --wadk-text-contrast-subtle: rgba(255, 255, 255, 0.4);
}

[data-theme='db-dark'] {
  /* common theme values */
  /* common for DB font family */
  --wadk-font-family: 'DeutscheBank', 'Arial', 'Helvetica Neue', sans-serif;

  /* derived theme values */
  --wadk-alt-accent-strong: rgba(43, 107, 217, 0.48);
  --wadk-alt-accent-medium: rgba(43, 107, 217, 0.4);
  --wadk-alt-accent-base: rgba(43, 107, 217, 0.32);
  --wadk-alt-accent-light: rgba(43, 107, 217, 0.24);
  --wadk-alt-accent-subtle: rgba(43, 107, 217, 0.2);
  --wadk-alt-basic-strong: rgba(255, 255, 255, 0.26);
  --wadk-alt-basic-medium: rgba(255, 255, 255, 0.2);
  --wadk-alt-basic-base: rgba(255, 255, 255, 0.16);
  --wadk-alt-basic-light: rgba(255, 255, 255, 0.1);
  --wadk-alt-basic-subtle: rgba(255, 255, 255, 0.06);
  --wadk-alt-contrast-strong: rgba(255, 255, 255, 0.26);
  --wadk-alt-contrast-medium: rgba(255, 255, 255, 0.2);
  --wadk-alt-contrast-base: rgba(255, 255, 255, 0.16);
  --wadk-alt-contrast-light: rgba(255, 255, 255, 0.1);
  --wadk-alt-contrast-subtle: rgba(255, 255, 255, 0.06);
  --wadk-brand-db-dark-blue: #16184e;
  --wadk-brand-db-deep-blue: #1e2a78;
  --wadk-brand-primary-3: #0fb6ff;
  --wadk-brand-primary-2: #0f131f;
  --wadk-brand-primary-1: #0f131f;
  --wadk-data-blue-100: #4c6bf6;
  --wadk-data-blue-200: #7892f9;
  --wadk-data-blue-300: #93aafc;
  --wadk-data-blue-400: #b7c8fe;
  --wadk-data-blue-500: #dbe4fe;
  --wadk-data-brown-100: #d14d05;
  --wadk-data-brown-200: #e3823c;
  --wadk-data-brown-300: #f1a763;
  --wadk-data-brown-400: #facd98;
  --wadk-data-brown-500: #fce9cb;
  --wadk-data-deep-purple-100: #ae45e1;
  --wadk-data-deep-purple-200: #cc71ec;
  --wadk-data-deep-purple-300: #e18ff6;
  --wadk-data-deep-purple-400: #f2b6fc;
  --wadk-data-deep-purple-500: #fbdafd;
  --wadk-data-grey-100: #8099a1;
  --wadk-data-grey-200: #a8c1c6;
  --wadk-data-grey-300: #c6e0e2;
  --wadk-data-grey-400: #e1f5f5;
  --wadk-data-grey-500: #f0faf9;
  --wadk-data-light-blue-100: #56abff;
  --wadk-data-light-blue-200: #80c6ff;
  --wadk-data-light-blue-300: #99d6ff;
  --wadk-data-light-blue-400: #bbe7ff;
  --wadk-data-light-blue-500: #ddf4ff;
  --wadk-data-light-green-100: #39cf10;
  --wadk-data-light-green-200: #72e245;
  --wadk-data-light-green-300: #9bf06b;
  --wadk-data-light-green-400: #c5fa9d;
  --wadk-data-light-green-500: #e5fccd;
  --wadk-data-orange-100: #ff6b07;
  --wadk-data-orange-200: #ff9a45;
  --wadk-data-orange-300: #ffb76a;
  --wadk-data-orange-400: #ffd59b;
  --wadk-data-orange-500: #ffedcd;
  --wadk-data-pink-100: #ff288d;
  --wadk-data-pink-200: #ff5d99;
  --wadk-data-pink-300: #ff7ea0;
  --wadk-data-pink-400: #ffa9b7;
  --wadk-data-pink-500: #ffd3d7;
  --wadk-data-purple-100: #c77dec;
  --wadk-data-purple-200: #dc9df3;
  --wadk-data-purple-300: #eab2f9;
  --wadk-data-purple-400: #f6cdfd;
  --wadk-data-purple-500: #fce6fe;
  --wadk-data-status-blue-grey-100: #607d90;
  --wadk-data-status-blue-grey-200: #8dacbc;
  --wadk-data-status-blue-grey-300: #b1d1dd;
  --wadk-data-status-blue-grey-400: #d3ecf3;
  --wadk-data-status-blue-grey-500: #e8f6f9;
  --wadk-data-status-green-100: #099928;
  --wadk-data-status-green-200: #39c149;
  --wadk-data-status-green-300: #61e064;
  --wadk-data-status-green-400: #9ff498;
  --wadk-data-status-green-500: #d2f9ca;
  --wadk-data-status-red-100: #e92424;
  --wadk-data-status-red-200: #f16558;
  --wadk-data-status-red-300: #f8907a;
  --wadk-data-status-red-400: #fcbda7;
  --wadk-data-status-red-500: #fde1d2;
  --wadk-data-status-yellow-100: #f7ab06;
  --wadk-data-status-yellow-200: #fac643;
  --wadk-data-status-yellow-300: #fcd768;
  --wadk-data-status-yellow-400: #fee89a;
  --wadk-data-status-yellow-500: #fef5cc;
  --wadk-data-teal-100: #4cacb7;
  --wadk-data-teal-200: #76d1d3;
  --wadk-data-teal-300: #97e9e4;
  --wadk-data-teal-400: #bdf7ef;
  --wadk-data-teal-500: #defbf4;
  --wadk-fill-accent-strong: #5087e0;
  --wadk-fill-accent-medium: #2b6bd9;
  --wadk-fill-accent-base: #0550d1;
  --wadk-fill-accent-light: #0d43b3;
  --wadk-fill-accent-subtle: #163796;
  --wadk-fill-basic-strong: #5f6475;
  --wadk-fill-basic-medium: #0c0f18;
  --wadk-fill-basic-base: #0f131f;
  --wadk-fill-basic-light: #141824;
  --wadk-fill-basic-subtle: #191d29;
  --wadk-fill-basic-blank: #1e2330;
  --wadk-fill-contrast-strong: #0f131f;
  --wadk-fill-contrast-medium: #191d29;
  --wadk-fill-contrast-base: #1e2330;
  --wadk-fill-contrast-light: #222939;
  --wadk-fill-contrast-subtle: #333848;
  --wadk-generic-black: #000000;
  --wadk-generic-inverse: #ffffff;
  --wadk-generic-transparent: rgba(255, 255, 255, 0);
  --wadk-generic-white: #ffffff;
  --wadk-generic-blank: #1e2330;
  --wadk-generic-shade-strong: rgba(0, 0, 0, 0.8);
  --wadk-generic-shade-medium: rgba(0, 0, 0, 0.6);
  --wadk-generic-shade-base: rgba(0, 0, 0, 0.4);
  --wadk-generic-shade-light: rgba(0, 0, 0, 0.3);
  --wadk-generic-shade-subtle: rgba(0, 0, 0, 0.2);
  --wadk-generic-tint-strong: rgba(255, 255, 255, 0.24);
  --wadk-generic-tint-medium: rgba(255, 255, 255, 0.12);
  --wadk-generic-tint-base: rgba(255, 255, 255, 0.08);
  --wadk-generic-tint-light: rgba(255, 255, 255, 0.05);
  --wadk-generic-tint-subtle: rgba(255, 255, 255, 0.03);
  --wadk-line-basic-strong: #5f6475;
  --wadk-line-basic-medium: #505462;
  --wadk-line-basic-base: #464b59;
  --wadk-line-basic-light: #3d4151;
  --wadk-line-basic-subtle: #333848;
  --wadk-line-contrast-strong: #5f6475;
  --wadk-line-contrast-medium: #505462;
  --wadk-line-contrast-base: #464b59;
  --wadk-line-contrast-light: #3d4151;
  --wadk-line-contrast-subtle: #333848;
  --wadk-status-error-strong: #ff8585;
  --wadk-status-error-medium: #bf2828;
  --wadk-status-error-base: #af292b;
  --wadk-status-error-light: #702c36;
  --wadk-status-error-subtle: #5f252e;
  --wadk-status-info-strong: #c3dbe6;
  --wadk-status-info-medium: #297ea5;
  --wadk-status-info-base: #246a8c;
  --wadk-status-info-light: #1f5773;
  --wadk-status-info-subtle: #1a435a;
  --wadk-status-success-strong: #72da7d;
  --wadk-status-success-medium: #0e793d;
  --wadk-status-success-base: #10723e;
  --wadk-status-success-light: #175541;
  --wadk-status-success-subtle: #0e4332;
  --wadk-status-warning-strong: #fca91c;
  --wadk-status-warning-medium: #b26025;
  --wadk-status-warning-base: #a35b28;
  --wadk-status-warning-light: #694835;
  --wadk-status-warning-subtle: #583c2c;
  --wadk-stroke-accent-strong: #76a2e8;
  --wadk-stroke-accent-medium: #5087e0;
  --wadk-stroke-accent-base: #2b6bd9;
  --wadk-stroke-accent-light: #0550d1;
  --wadk-stroke-accent-subtle: #0d43b3;
  --wadk-stroke-basic-strong: #676c7e;
  --wadk-stroke-basic-medium: #585c6b;
  --wadk-stroke-basic-base: #505462;
  --wadk-stroke-basic-light: #464b59;
  --wadk-stroke-basic-subtle: #3d4151;
  --wadk-stroke-contrast-strong: #676c7e;
  --wadk-stroke-contrast-medium: #585c6b;
  --wadk-stroke-contrast-base: #505462;
  --wadk-stroke-contrast-light: #464b59;
  --wadk-stroke-contrast-subtle: #3d4151;
  --wadk-text-basic-accent: #bfd5f7;
  --wadk-text-basic-action-link: #76a2e8;
  --wadk-text-basic-negative: #ff9999;
  --wadk-text-basic-positive: #72da7d;
  --wadk-text-basic-warning: #ffbb33;
  --wadk-text-basic-base: #ffffff;
  --wadk-text-basic-light: rgba(255, 255, 255, 0.72);
  --wadk-text-basic-subtle: rgba(255, 255, 255, 0.48);
  --wadk-text-contrast-accent: #a8c4f0;
  --wadk-text-contrast-action-link: #76a2e8;
  --wadk-text-contrast-negative: #ff9999;
  --wadk-text-contrast-positive: #72da7d;
  --wadk-text-contrast-warning: #ffbb33;
  --wadk-text-contrast-base: #ffffff;
  --wadk-text-contrast-light: rgba(255, 255, 255, 0.72);
  --wadk-text-contrast-subtle: rgba(255, 255, 255, 0.48);
}

[data-theme='db-light'] {
  /* common theme values */
  /* common for DB font family */
  --wadk-font-family: 'DeutscheBank', 'Arial', 'Helvetica Neue', sans-serif;

  /* derived theme values */
  --wadk-alt-accent-strong: rgba(43, 107, 217, 0.4);
  --wadk-alt-accent-medium: rgba(43, 107, 217, 0.32);
  --wadk-alt-accent-base: rgba(43, 107, 217, 0.2);
  --wadk-alt-accent-light: rgba(43, 107, 217, 0.12);
  --wadk-alt-accent-subtle: rgba(43, 107, 217, 0.06);
  --wadk-alt-basic-strong: rgba(255, 255, 255, 0.28);
  --wadk-alt-basic-medium: rgba(255, 255, 255, 0.24);
  --wadk-alt-basic-base: rgba(255, 255, 255, 0.2);
  --wadk-alt-basic-light: rgba(255, 255, 255, 0.12);
  --wadk-alt-basic-subtle: rgba(255, 255, 255, 0.06);
  --wadk-alt-contrast-strong: rgba(0, 0, 0, 0.32);
  --wadk-alt-contrast-medium: rgba(0, 0, 0, 0.2);
  --wadk-alt-contrast-base: rgba(0, 0, 0, 0.1);
  --wadk-alt-contrast-light: rgba(0, 0, 0, 0.06);
  --wadk-alt-contrast-subtle: rgba(0, 0, 0, 0.03);
  --wadk-brand-db-dark-blue: #16184e;
  --wadk-brand-db-deep-blue: #1e2a78;
  --wadk-brand-primary-3: #0098db;
  --wadk-brand-primary-2: #1e2a78;
  --wadk-brand-primary-1: #1e2a78;
  --wadk-data-blue-100: #1156e1;
  --wadk-data-blue-200: #0c42c1;
  --wadk-data-blue-300: #0831a2;
  --wadk-data-blue-400: #052282;
  --wadk-data-blue-500: #03176c;
  --wadk-data-brown-100: #c2360a;
  --wadk-data-brown-200: #a62207;
  --wadk-data-brown-300: #8b1105;
  --wadk-data-brown-400: #700503;
  --wadk-data-brown-500: #5d0106;
  --wadk-data-deep-purple-100: #9a039c;
  --wadk-data-deep-purple-200: #790286;
  --wadk-data-deep-purple-300: #5b0170;
  --wadk-data-deep-purple-400: #42005a;
  --wadk-data-deep-purple-500: #30004a;
  --wadk-data-grey-100: #8099a1;
  --wadk-data-grey-200: #5d7c8a;
  --wadk-data-grey-300: #406073;
  --wadk-data-grey-400: #28455d;
  --wadk-data-grey-500: #18314d;
  --wadk-data-light-blue-100: #3798f7;
  --wadk-data-light-blue-200: #2876d4;
  --wadk-data-light-blue-300: #1b58b1;
  --wadk-data-light-blue-400: #113e8f;
  --wadk-data-light-blue-500: #0a2b76;
  --wadk-data-light-green-100: #50a838;
  --wadk-data-light-green-200: #379028;
  --wadk-data-light-green-300: #22781c;
  --wadk-data-light-green-400: #116112;
  --wadk-data-light-green-500: #0a5010;
  --wadk-data-orange-100: #f66a0b;
  --wadk-data-orange-200: #d34e08;
  --wadk-data-orange-300: #b13605;
  --wadk-data-orange-400: #8e2303;
  --wadk-data-orange-500: #761502;
  --wadk-data-pink-100: #ff288d;
  --wadk-data-pink-200: #db1d89;
  --wadk-data-pink-300: #b71481;
  --wadk-data-pink-400: #930c74;
  --wadk-data-pink-500: #7a076b;
  --wadk-data-purple-100: #bf3fff;
  --wadk-data-purple-200: #962edb;
  --wadk-data-purple-300: #711fb7;
  --wadk-data-purple-400: #501493;
  --wadk-data-purple-500: #390c7a;
  --wadk-data-status-blue-grey-100: #526d7a;
  --wadk-data-status-blue-grey-200: #3b5768;
  --wadk-data-status-blue-grey-300: #294257;
  --wadk-data-status-blue-grey-400: #1a2f46;
  --wadk-data-status-blue-grey-500: #0f213a;
  --wadk-data-status-green-100: #00aa1c;
  --wadk-data-status-green-200: #009225;
  --wadk-data-status-green-300: #007a2b;
  --wadk-data-status-green-400: #00622c;
  --wadk-data-status-green-500: #00512c;
  --wadk-data-status-red-100: #f42d2d;
  --wadk-data-status-red-200: #d12030;
  --wadk-data-status-red-300: #af1631;
  --wadk-data-status-red-400: #8d0e2f;
  --wadk-data-status-red-500: #75082e;
  --wadk-data-status-yellow-100: #d97e1c;
  --wadk-data-status-yellow-200: #ba6214;
  --wadk-data-status-yellow-300: #9c4a0e;
  --wadk-data-status-yellow-400: #7d3408;
  --wadk-data-status-yellow-500: #682505;
  --wadk-data-teal-100: #06a3b6;
  --wadk-data-teal-200: #047f9c;
  --wadk-data-teal-300: #036083;
  --wadk-data-teal-400: #014569;
  --wadk-data-teal-500: #013257;
  --wadk-fill-accent-strong: #163796;
  --wadk-fill-accent-medium: #0d43b3;
  --wadk-fill-accent-base: #0550d1;
  --wadk-fill-accent-light: #bfd5f7;
  --wadk-fill-accent-subtle: #e7f4fe;
  --wadk-fill-basic-strong: #ffffff;
  --wadk-fill-basic-medium: #e1e1e1;
  --wadk-fill-basic-base: #ebebeb;
  --wadk-fill-basic-light: #f5f5f5;
  --wadk-fill-basic-subtle: #f9f9f9;
  --wadk-fill-basic-blank: #ffffff;
  --wadk-fill-contrast-strong: #6c6c6c;
  --wadk-fill-contrast-medium: #1e1e1e;
  --wadk-fill-contrast-base: #262626;
  --wadk-fill-contrast-light: #2e2e2e;
  --wadk-fill-contrast-subtle: #363636;
  --wadk-generic-black: #1a1a1a;
  --wadk-generic-inverse: #16184e;
  --wadk-generic-transparent: rgba(255, 255, 255, 0);
  --wadk-generic-white: #ffffff;
  --wadk-generic-blank: #ffffff;
  --wadk-generic-shade-strong: rgba(27, 27, 27, 0.3);
  --wadk-generic-shade-medium: rgba(27, 27, 27, 0.2);
  --wadk-generic-shade-base: rgba(27, 27, 27, 0.15);
  --wadk-generic-shade-light: rgba(27, 27, 27, 0.1);
  --wadk-generic-shade-subtle: rgba(27, 27, 27, 0.05);
  --wadk-generic-tint-strong: #ffffff;
  --wadk-generic-tint-medium: rgba(255, 255, 255, 0.6);
  --wadk-generic-tint-base: rgba(255, 255, 255, 0.45);
  --wadk-generic-tint-light: rgba(255, 255, 255, 0.2);
  --wadk-generic-tint-subtle: rgba(255, 255, 255, 0.15);
  --wadk-line-basic-strong: #b3b3b3;
  --wadk-line-basic-medium: #cccccc;
  --wadk-line-basic-base: #d7d7d7;
  --wadk-line-basic-light: #e1e1e1;
  --wadk-line-basic-subtle: #ebebeb;
  --wadk-line-contrast-strong: #5d6489;
  --wadk-line-contrast-medium: #565d81;
  --wadk-line-contrast-base: #484f70;
  --wadk-line-contrast-light: #3b415e;
  --wadk-line-contrast-subtle: #353a55;
  --wadk-status-error-strong: #d50404;
  --wadk-status-error-medium: #d22d2d;
  --wadk-status-error-base: #d22d2d;
  --wadk-status-error-light: #fdcece;
  --wadk-status-error-subtle: #ffe5e6;
  --wadk-status-info-strong: #096a9b;
  --wadk-status-info-medium: #0a7cb5;
  --wadk-status-info-base: #0a7cb5;
  --wadk-status-info-light: #cfedfc;
  --wadk-status-info-subtle: #e7f6fd;
  --wadk-status-success-strong: #087537;
  --wadk-status-success-medium: #0f8542;
  --wadk-status-success-base: #0f8542;
  --wadk-status-success-light: #d4f7d4;
  --wadk-status-success-subtle: #ecf9ec;
  --wadk-status-warning-strong: #a04812;
  --wadk-status-warning-medium: #b26025;
  --wadk-status-warning-base: #b26025;
  --wadk-status-warning-light: #ffe9c7;
  --wadk-status-warning-subtle: #fcf7e8;
  --wadk-stroke-accent-strong: #001a99;
  --wadk-stroke-accent-medium: #043ba9;
  --wadk-stroke-accent-base: #0445b3;
  --wadk-stroke-accent-light: #a3c8ff;
  --wadk-stroke-accent-subtle: #bfd7fc;
  --wadk-stroke-basic-strong: #808080;
  --wadk-stroke-basic-medium: #999999;
  --wadk-stroke-basic-base: #b3b3b3;
  --wadk-stroke-basic-light: #cccccc;
  --wadk-stroke-basic-subtle: #dadada;
  --wadk-stroke-contrast-strong: #5d6489;
  --wadk-stroke-contrast-medium: #565d81;
  --wadk-stroke-contrast-base: #484f70;
  --wadk-stroke-contrast-light: #3b415e;
  --wadk-stroke-contrast-subtle: #353a55;
  --wadk-text-basic-accent: #1e2a78;
  --wadk-text-basic-action-link: #0550d1;
  --wadk-text-basic-negative: #d50404;
  --wadk-text-basic-positive: #087537;
  --wadk-text-basic-warning: #b24400;
  --wadk-text-basic-base: #16184e;
  --wadk-text-basic-light: rgba(22, 24, 78, 0.75);
  --wadk-text-basic-subtle: rgba(22, 24, 78, 0.45);
  --wadk-text-contrast-accent: #a8c4f0;
  --wadk-text-contrast-action-link: #a8c4f0;
  --wadk-text-contrast-negative: #ff9999;
  --wadk-text-contrast-positive: #72da7d;
  --wadk-text-contrast-warning: #ffbb33;
  --wadk-text-contrast-base: #ffffff;
  --wadk-text-contrast-light: rgba(255, 255, 255, 0.72);
  --wadk-text-contrast-subtle: rgba(255, 255, 255, 0.48);
}

[data-theme='dark'] {
  /* common theme values */
  /* common for DB font family */
  --wadk-font-family: 'DeutscheBank', 'Arial', 'Helvetica Neue', sans-serif;

  /* derived theme values */
  --wadk-alt-accent-strong: rgba(55, 139, 255, 0.48);
  --wadk-alt-accent-medium: rgba(55, 139, 255, 0.4);
  --wadk-alt-accent-base: rgba(55, 139, 255, 0.32);
  --wadk-alt-accent-light: rgba(55, 139, 255, 0.24);
  --wadk-alt-accent-subtle: rgba(55, 139, 255, 0.2);
  --wadk-alt-basic-strong: rgba(197, 215, 230, 0.28);
  --wadk-alt-basic-medium: rgba(197, 215, 230, 0.24);
  --wadk-alt-basic-base: rgba(197, 215, 230, 0.2);
  --wadk-alt-basic-light: rgba(197, 215, 230, 0.12);
  --wadk-alt-basic-subtle: rgba(197, 215, 230, 0.06);
  --wadk-alt-contrast-strong: rgba(197, 215, 230, 0.28);
  --wadk-alt-contrast-medium: rgba(197, 215, 230, 0.24);
  --wadk-alt-contrast-base: rgba(197, 215, 230, 0.2);
  --wadk-alt-contrast-light: rgba(197, 215, 230, 0.12);
  --wadk-alt-contrast-subtle: rgba(197, 215, 230, 0.06);
  --wadk-brand-db-dark-blue: #16184e;
  --wadk-brand-db-deep-blue: #1e2a78;
  --wadk-brand-primary-3: #0fb6ff;
  --wadk-brand-primary-2: #0c2340;
  --wadk-brand-primary-1: #0018a8;
  --wadk-data-blue-100: #4c6bf6;
  --wadk-data-blue-200: #7892f9;
  --wadk-data-blue-300: #93aafc;
  --wadk-data-blue-400: #b7c8fe;
  --wadk-data-blue-500: #dbe4fe;
  --wadk-data-brown-100: #d14d05;
  --wadk-data-brown-200: #e3823c;
  --wadk-data-brown-300: #f1a763;
  --wadk-data-brown-400: #facd98;
  --wadk-data-brown-500: #fce9cb;
  --wadk-data-deep-purple-100: #ae45e1;
  --wadk-data-deep-purple-200: #cc71ec;
  --wadk-data-deep-purple-300: #e18ff6;
  --wadk-data-deep-purple-400: #f2b6fc;
  --wadk-data-deep-purple-500: #fbdafd;
  --wadk-data-grey-100: #8099a1;
  --wadk-data-grey-200: #a8c1c6;
  --wadk-data-grey-300: #c6e0e2;
  --wadk-data-grey-400: #e1f5f5;
  --wadk-data-grey-500: #f0faf9;
  --wadk-data-light-blue-100: #56abff;
  --wadk-data-light-blue-200: #80c6ff;
  --wadk-data-light-blue-300: #99d6ff;
  --wadk-data-light-blue-400: #bbe7ff;
  --wadk-data-light-blue-500: #ddf4ff;
  --wadk-data-light-green-100: #39cf10;
  --wadk-data-light-green-200: #72e245;
  --wadk-data-light-green-300: #9bf06b;
  --wadk-data-light-green-400: #c5fa9d;
  --wadk-data-light-green-500: #e5fccd;
  --wadk-data-orange-100: #ff6b07;
  --wadk-data-orange-200: #ff9a45;
  --wadk-data-orange-300: #ffb76a;
  --wadk-data-orange-400: #ffd59b;
  --wadk-data-orange-500: #ffedcd;
  --wadk-data-pink-100: #ff288d;
  --wadk-data-pink-200: #ff5d99;
  --wadk-data-pink-300: #ff7ea0;
  --wadk-data-pink-400: #ffa9b7;
  --wadk-data-pink-500: #ffd3d7;
  --wadk-data-purple-100: #c77dec;
  --wadk-data-purple-200: #dc9df3;
  --wadk-data-purple-300: #eab2f9;
  --wadk-data-purple-400: #f6cdfd;
  --wadk-data-purple-500: #fce6fe;
  --wadk-data-status-blue-grey-100: #607d90;
  --wadk-data-status-blue-grey-200: #8dacbc;
  --wadk-data-status-blue-grey-300: #b1d1dd;
  --wadk-data-status-blue-grey-400: #d3ecf3;
  --wadk-data-status-blue-grey-500: #e8f6f9;
  --wadk-data-status-green-100: #099928;
  --wadk-data-status-green-200: #39c149;
  --wadk-data-status-green-300: #61e064;
  --wadk-data-status-green-400: #9ff498;
  --wadk-data-status-green-500: #d2f9ca;
  --wadk-data-status-red-100: #e92424;
  --wadk-data-status-red-200: #f16558;
  --wadk-data-status-red-300: #f8907a;
  --wadk-data-status-red-400: #fcbda7;
  --wadk-data-status-red-500: #fde1d2;
  --wadk-data-status-yellow-100: #f7ab06;
  --wadk-data-status-yellow-200: #fac643;
  --wadk-data-status-yellow-300: #fcd768;
  --wadk-data-status-yellow-400: #fee89a;
  --wadk-data-status-yellow-500: #fef5cc;
  --wadk-data-teal-100: #4cacb7;
  --wadk-data-teal-200: #76d1d3;
  --wadk-data-teal-300: #97e9e4;
  --wadk-data-teal-400: #bdf7ef;
  --wadk-data-teal-500: #defbf4;
  --wadk-fill-accent-strong: #196fe5;
  --wadk-fill-accent-medium: #1868d8;
  --wadk-fill-accent-base: #155dc1;
  --wadk-fill-accent-light: #18488b;
  --wadk-fill-accent-subtle: #1a3963;
  --wadk-fill-basic-strong: #566781;
  --wadk-fill-basic-medium: #0a0e15;
  --wadk-fill-basic-base: #0f151f;
  --wadk-fill-basic-light: #131d2a;
  --wadk-fill-basic-subtle: #192434;
  --wadk-fill-basic-blank: #1e2b3e;
  --wadk-fill-contrast-strong: #566781;
  --wadk-fill-contrast-medium: #131d2a;
  --wadk-fill-contrast-base: #192434;
  --wadk-fill-contrast-light: #1e2b3e;
  --wadk-fill-contrast-subtle: #233248;
  --wadk-generic-black: #000000;
  --wadk-generic-inverse: #ffffff;
  --wadk-generic-transparent: rgba(255, 255, 255, 0);
  --wadk-generic-white: #ffffff;
  --wadk-generic-blank: #213045;
  --wadk-generic-shade-strong: rgba(0, 0, 0, 0.8);
  --wadk-generic-shade-medium: rgba(0, 0, 0, 0.6);
  --wadk-generic-shade-base: rgba(0, 0, 0, 0.3);
  --wadk-generic-shade-light: rgba(0, 0, 0, 0.2);
  --wadk-generic-shade-subtle: rgba(0, 0, 0, 0.1);
  --wadk-generic-tint-strong: rgba(197, 215, 230, 0.24);
  --wadk-generic-tint-medium: rgba(197, 215, 230, 0.12);
  --wadk-generic-tint-base: rgba(197, 215, 230, 0.07);
  --wadk-generic-tint-light: rgba(197, 215, 230, 0.05);
  --wadk-generic-tint-subtle: rgba(197, 215, 230, 0.03);
  --wadk-line-basic-strong: #566781;
  --wadk-line-basic-medium: #4f5f78;
  --wadk-line-basic-base: #415068;
  --wadk-line-basic-light: #3d4c61;
  --wadk-line-basic-subtle: #374457;
  --wadk-line-contrast-strong: #5d6e89;
  --wadk-line-contrast-medium: #566781;
  --wadk-line-contrast-base: #485870;
  --wadk-line-contrast-light: #3b495e;
  --wadk-line-contrast-subtle: #354255;
  --wadk-status-error-strong: #ff8585;
  --wadk-status-error-medium: #bf2828;
  --wadk-status-error-base: #af292b;
  --wadk-status-error-light: #702c36;
  --wadk-status-error-subtle: #5f252e;
  --wadk-status-info-strong: #5abff2;
  --wadk-status-info-medium: #0a7cb5;
  --wadk-status-info-base: #0a7cb5;
  --wadk-status-info-light: #135278;
  --wadk-status-info-subtle: #0f4261;
  --wadk-status-success-strong: #72da7d;
  --wadk-status-success-medium: #0e793d;
  --wadk-status-success-base: #10723e;
  --wadk-status-success-light: #175541;
  --wadk-status-success-subtle: #0e4332;
  --wadk-status-warning-strong: #fca91c;
  --wadk-status-warning-medium: #b26025;
  --wadk-status-warning-base: #a35b28;
  --wadk-status-warning-light: #694835;
  --wadk-status-warning-subtle: #583c2c;
  --wadk-stroke-accent-strong: #478ceb;
  --wadk-stroke-accent-medium: #3a83e9;
  --wadk-stroke-accent-base: #2374e7;
  --wadk-stroke-accent-light: #205fb7;
  --wadk-stroke-accent-subtle: #25518d;
  --wadk-stroke-basic-strong: #647690;
  --wadk-stroke-basic-medium: #647690;
  --wadk-stroke-basic-base: #485870;
  --wadk-stroke-basic-light: #415068;
  --wadk-stroke-basic-subtle: #3b495e;
  --wadk-stroke-contrast-strong: #647690;
  --wadk-stroke-contrast-medium: #647690;
  --wadk-stroke-contrast-base: #485870;
  --wadk-stroke-contrast-light: #415068;
  --wadk-stroke-contrast-subtle: #3b495e;
  --wadk-text-basic-accent: #9bbcfd;
  --wadk-text-basic-action-link: #66bfff;
  --wadk-text-basic-negative: #ff9999;
  --wadk-text-basic-positive: #72da7d;
  --wadk-text-basic-warning: #ffbb33;
  --wadk-text-basic-base: #ffffff;
  --wadk-text-basic-light: rgba(255, 255, 255, 0.75);
  --wadk-text-basic-subtle: rgba(255, 255, 255, 0.4);
  --wadk-text-contrast-accent: #9bbcfd;
  --wadk-text-contrast-action-link: #66bfff;
  --wadk-text-contrast-negative: #ff9999;
  --wadk-text-contrast-positive: #72da7d;
  --wadk-text-contrast-warning: #ffbb33;
  --wadk-text-contrast-base: #ffffff;
  --wadk-text-contrast-light: rgba(255, 255, 255, 0.75);
  --wadk-text-contrast-subtle: rgba(255, 255, 255, 0.4);
}

[data-theme='light'] {
  /* common theme values */
  /* common for DB font family */
  --wadk-font-family: 'DeutscheBank', 'Arial', 'Helvetica Neue', sans-serif;

  /* derived theme values */
  --wadk-alt-accent-strong: rgba(0, 128, 255, 0.4);
  --wadk-alt-accent-medium: rgba(0, 128, 255, 0.32);
  --wadk-alt-accent-base: rgba(0, 128, 255, 0.24);
  --wadk-alt-accent-light: rgba(0, 128, 255, 0.16);
  --wadk-alt-accent-subtle: rgba(0, 128, 255, 0.08);
  --wadk-alt-basic-strong: rgba(197, 215, 230, 0.28);
  --wadk-alt-basic-medium: rgba(197, 215, 230, 0.24);
  --wadk-alt-basic-base: rgba(197, 215, 230, 0.2);
  --wadk-alt-basic-light: rgba(197, 215, 230, 0.12);
  --wadk-alt-basic-subtle: rgba(197, 215, 230, 0.06);
  --wadk-alt-contrast-strong: rgba(10, 50, 92, 0.32);
  --wadk-alt-contrast-medium: rgba(5, 50, 97, 0.24);
  --wadk-alt-contrast-base: rgba(0, 50, 102, 0.12);
  --wadk-alt-contrast-light: rgba(0, 50, 102, 0.08);
  --wadk-alt-contrast-subtle: rgba(0, 50, 102, 0.04);
  --wadk-brand-db-dark-blue: #16184e;
  --wadk-brand-db-deep-blue: #1e2a78;
  --wadk-brand-primary-3: #0098db;
  --wadk-brand-primary-2: #0c2340;
  --wadk-brand-primary-1: #0018a8;
  --wadk-data-blue-100: #1156e1;
  --wadk-data-blue-200: #0c42c1;
  --wadk-data-blue-300: #0831a2;
  --wadk-data-blue-400: #052282;
  --wadk-data-blue-500: #03176c;
  --wadk-data-brown-100: #c2360a;
  --wadk-data-brown-200: #a62207;
  --wadk-data-brown-300: #8b1105;
  --wadk-data-brown-400: #700503;
  --wadk-data-brown-500: #5d0106;
  --wadk-data-deep-purple-100: #9a039c;
  --wadk-data-deep-purple-200: #790286;
  --wadk-data-deep-purple-300: #5b0170;
  --wadk-data-deep-purple-400: #42005a;
  --wadk-data-deep-purple-500: #30004a;
  --wadk-data-grey-100: #8099a1;
  --wadk-data-grey-200: #5d7c8a;
  --wadk-data-grey-300: #406073;
  --wadk-data-grey-400: #28455d;
  --wadk-data-grey-500: #18314d;
  --wadk-data-light-blue-100: #3798f7;
  --wadk-data-light-blue-200: #2876d4;
  --wadk-data-light-blue-300: #1b58b1;
  --wadk-data-light-blue-400: #113e8f;
  --wadk-data-light-blue-500: #0a2b76;
  --wadk-data-light-green-100: #50a838;
  --wadk-data-light-green-200: #379028;
  --wadk-data-light-green-300: #22781c;
  --wadk-data-light-green-400: #116112;
  --wadk-data-light-green-500: #0a5010;
  --wadk-data-orange-100: #f66a0b;
  --wadk-data-orange-200: #d34e08;
  --wadk-data-orange-300: #b13605;
  --wadk-data-orange-400: #8e2303;
  --wadk-data-orange-500: #761502;
  --wadk-data-pink-100: #ff288d;
  --wadk-data-pink-200: #db1d89;
  --wadk-data-pink-300: #b71481;
  --wadk-data-pink-400: #930c74;
  --wadk-data-pink-500: #7a076b;
  --wadk-data-purple-100: #bf3fff;
  --wadk-data-purple-200: #962edb;
  --wadk-data-purple-300: #711fb7;
  --wadk-data-purple-400: #501493;
  --wadk-data-purple-500: #390c7a;
  --wadk-data-status-blue-grey-100: #526d7a;
  --wadk-data-status-blue-grey-200: #3b5768;
  --wadk-data-status-blue-grey-300: #294257;
  --wadk-data-status-blue-grey-400: #1a2f46;
  --wadk-data-status-blue-grey-500: #0f213a;
  --wadk-data-status-green-100: #00aa1c;
  --wadk-data-status-green-200: #009225;
  --wadk-data-status-green-300: #007a2b;
  --wadk-data-status-green-400: #00622c;
  --wadk-data-status-green-500: #00512c;
  --wadk-data-status-red-100: #f42d2d;
  --wadk-data-status-red-200: #d12030;
  --wadk-data-status-red-300: #af1631;
  --wadk-data-status-red-400: #8d0e2f;
  --wadk-data-status-red-500: #75082e;
  --wadk-data-status-yellow-100: #d97e1c;
  --wadk-data-status-yellow-200: #ba6214;
  --wadk-data-status-yellow-300: #9c4a0e;
  --wadk-data-status-yellow-400: #7d3408;
  --wadk-data-status-yellow-500: #682505;
  --wadk-data-teal-100: #06a3b6;
  --wadk-data-teal-200: #047f9c;
  --wadk-data-teal-300: #036083;
  --wadk-data-teal-400: #014569;
  --wadk-data-teal-500: #013257;
  --wadk-fill-accent-strong: #001eb2;
  --wadk-fill-accent-medium: #0544c2;
  --wadk-fill-accent-base: #0550d1;
  --wadk-fill-accent-light: #cce6ff;
  --wadk-fill-accent-subtle: #e7f4fe;
  --wadk-fill-basic-strong: #ffffff;
  --wadk-fill-basic-medium: #dce2e5;
  --wadk-fill-basic-base: #e6ecef;
  --wadk-fill-basic-light: #eff3f5;
  --wadk-fill-basic-subtle: #f8fafb;
  --wadk-fill-basic-blank: #ffffff;
  --wadk-fill-contrast-strong: #566781;
  --wadk-fill-contrast-medium: #131d2a;
  --wadk-fill-contrast-base: #192434;
  --wadk-fill-contrast-light: #1e2b3e;
  --wadk-fill-contrast-subtle: #233248;
  --wadk-generic-black: #0d131c;
  --wadk-generic-inverse: #0d131c;
  --wadk-generic-transparent: rgba(255, 255, 255, 0);
  --wadk-generic-white: #ffffff;
  --wadk-generic-blank: #ffffff;
  --wadk-generic-shade-strong: rgba(2, 26, 51, 0.3);
  --wadk-generic-shade-medium: rgba(2, 26, 51, 0.2);
  --wadk-generic-shade-base: rgba(2, 26, 51, 0.15);
  --wadk-generic-shade-light: rgba(2, 26, 51, 0.1);
  --wadk-generic-shade-subtle: rgba(2, 26, 51, 0.05);
  --wadk-generic-tint-strong: #ffffff;
  --wadk-generic-tint-medium: rgba(255, 255, 255, 0.6);
  --wadk-generic-tint-base: rgba(255, 255, 255, 0.45);
  --wadk-generic-tint-light: rgba(255, 255, 255, 0.2);
  --wadk-generic-tint-subtle: rgba(255, 255, 255, 0.15);
  --wadk-line-basic-strong: #a9b3bc;
  --wadk-line-basic-medium: #c4ccd4;
  --wadk-line-basic-base: #cfd6de;
  --wadk-line-basic-light: #dbe1e6;
  --wadk-line-basic-subtle: #e1e5ea;
  --wadk-line-contrast-strong: #5d6e89;
  --wadk-line-contrast-medium: #566781;
  --wadk-line-contrast-base: #485870;
  --wadk-line-contrast-light: #3b495e;
  --wadk-line-contrast-subtle: #354255;
  --wadk-status-error-strong: #c20000;
  --wadk-status-error-medium: #d22d2d;
  --wadk-status-error-base: #d22d2d;
  --wadk-status-error-light: #fdcece;
  --wadk-status-error-subtle: #ffe5e6;
  --wadk-status-info-strong: #096a9b;
  --wadk-status-info-medium: #0a7cb5;
  --wadk-status-info-base: #0a7cb5;
  --wadk-status-info-light: #cfedfc;
  --wadk-status-info-subtle: #e7f6fd;
  --wadk-status-success-strong: #087537;
  --wadk-status-success-medium: #0f8542;
  --wadk-status-success-base: #0f8542;
  --wadk-status-success-light: #d4f7d4;
  --wadk-status-success-subtle: #ecf9ec;
  --wadk-status-warning-strong: #a14800;
  --wadk-status-warning-medium: #b26025;
  --wadk-status-warning-base: #b26025;
  --wadk-status-warning-light: #ffe9c7;
  --wadk-status-warning-subtle: #fcf7e8;
  --wadk-stroke-accent-strong: #001a99;
  --wadk-stroke-accent-medium: #043ba9;
  --wadk-stroke-accent-base: #0445b3;
  --wadk-stroke-accent-light: #a3d0ff;
  --wadk-stroke-accent-subtle: #bfe2fc;
  --wadk-stroke-basic-strong: #73808c;
  --wadk-stroke-basic-medium: #8a96a3;
  --wadk-stroke-basic-base: #b4bfcb;
  --wadk-stroke-basic-light: #c8d0d8;
  --wadk-stroke-basic-subtle: #d3dae1;
  --wadk-stroke-contrast-strong: #5d6e89;
  --wadk-stroke-contrast-medium: #566781;
  --wadk-stroke-contrast-base: #485870;
  --wadk-stroke-contrast-light: #3b495e;
  --wadk-stroke-contrast-subtle: #354255;
  --wadk-text-basic-accent: #003bb2;
  --wadk-text-basic-action-link: #0b62da;
  --wadk-text-basic-negative: #d50404;
  --wadk-text-basic-positive: #087537;
  --wadk-text-basic-warning: #b24400;
  --wadk-text-basic-base: #0d131c;
  --wadk-text-basic-light: rgba(13, 19, 28, 0.66);
  --wadk-text-basic-subtle: rgba(13, 19, 28, 0.33);
  --wadk-text-contrast-accent: #9bbcfd;
  --wadk-text-contrast-action-link: #66bfff;
  --wadk-text-contrast-negative: #ff9999;
  --wadk-text-contrast-positive: #72da7d;
  --wadk-text-contrast-warning: #ffbb33;
  --wadk-text-contrast-base: #ffffff;
  --wadk-text-contrast-light: rgba(255, 255, 255, 0.75);
  --wadk-text-contrast-subtle: rgba(255, 255, 255, 0.4);
}
/* styling also user by region selector */
.switch {
  position: relative;
}

.switch__button {
  text-decoration: none;
  border-radius: var(--wadk-border-radius-base);
}
.is-open .switch__button {
  background-color: var(--wadk-alt-basic-subtle);
}

.switch__list[hidden] {
  display: none !important;
}

.switch__list {
  position: absolute;
  z-index: 20;
  left: 0;
  top: calc(100% + 0.25rem);

  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 4rem;

  color: var(--wadk-text-contrast-base);
  background: var(--wadk-brand-db-dark-blue);
  box-shadow: var(--wadk-raise-5-subtle);
}

.switch__list li a {
  display: flex;
  padding: var(--wadk-sy-sm) var(--wadk-sx-sm);
  justify-content: flex-start;
  align-items: center;
  gap: var(--wadk-sx-sm);

  color: inherit;
  text-decoration: none;
  font-size: var(--wadk-font-size-sm);
}
.switch__list li[aria-selected='true'] {
  font-weight: bold;
}

.switch__list li[aria-selected='true'] a,
.switch__list li a:hover,
.switch__list li a:focus {
  background: color-mix(in srgb, var(--wadk-fill-accent-base) 15%, transparent);
}

/* Also show via class if present */
.switch.is-open .switch__list {
  display: block;
}