/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  animation: l14 4s infinite;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}
.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  border: 8px solid;
  border-radius: 50%;
  border-color: var(--vdz-colorVielfaltBgActive) var(--vdz-colorVielfaltBgActive)
                var(--vdz-colorDorfBgActive) var(--vdz-colorDorfBgActive);
  mix-blend-mode: darken;
  animation: l14 3s infinite linear;
}
.loader::after {
  border-color: var(--vdz-colorDorfBgActive) var(--vdz-colorDorfBgActive)
                var(--vdz-colorZukunftBgActive) var(--vdz-colorZukunftBgActive);
  animation-direction: reverse;
}
@keyframes l14{
  100%{transform: rotate(1turn)}
}