:root {
  --desktop-width: 100%;
  --mobile-width: 100%;
  --controller-width: 28px;
  --control-width: 2px;
}

.vn-slider {
  width: 100%;
  width: var(--desktop-width, 100%);
  max-width: 620px;
  display: block;
  margin: 0 auto;
}

/* Fallback, if slider isn't initiated correctly by script (blocked script, missing link, wrong selector, ...) */
.vn-slider img {
  width: 100%;
  height: auto;
}

.jx-slider,
.jx-slider *,
.jx-slider *:after,
.jx-slider *:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.jx-slider {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: none;
  touch-action: none;
}

.jx-handle {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 15;
}

.vertical .jx-handle {
  height: 40px;
  width: 100%;
  cursor: row-resize;
  margin-top: -20px;
  margin-left: 0;
}

.jx-control {
  position: absolute;
  height: 100%;
  width: var(--control-width);
  background-color: #fff;
}

.vertical .jx-control {
  height: 3px;
  width: 100%;
  background-color: #fff;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.jx-controller {
  height: var(--controller-width);
  width: var(--controller-width);
  background-color: #435feb;
  border-radius: 50%;
  position: relative;
}

/* .vertical .jx-controller {
  height: 9px;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
  top: -3px;
  position: relative;
} */

.jx-controller::before {
  content: '';
  position: absolute;
  top: 6px;
  left: -12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 8px 0;
  border-color: transparent #fff transparent transparent;
  -webkit-transition: -webkit-transform 0.1s ease-in-out 0.1s;
  transition: -webkit-transform 0.1s ease-in-out 0.1s;
  -o-transition: transform 0.1s ease-in-out 0.1s;
  transition: transform 0.1s ease-in-out 0.1s;
  transition: transform 0.1s ease-in-out 0.1s, -webkit-transform 0.1s ease-in-out 0.1s;
}

.jx-controller::after {
  content: '';
  position: absolute;
  top: 6px;
  right: -12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent #fff;
  -webkit-transition: -webkit-transform 0.1s ease-in-out 0.1s;
  transition: -webkit-transform 0.1s ease-in-out 0.1s;
  -o-transition: transform 0.1s ease-in-out 0.1s;
  transition: transform 0.1s ease-in-out 0.1s;
  transition: transform 0.1s ease-in-out 0.1s, -webkit-transform 0.1s ease-in-out 0.1s;
}

.jx-image {
  width: 100%;
  height: auto;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -ms-touch-action: none;

  touch-action: none;
}

.vertical .jx-image {
  width: 100%;
  left: 0;
  top: auto;
}

.jx-image.jx-left {
  width: 100%;
  height: auto;
}

.jx-image.jx-right {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  -webkit-clip-path: inset(0% 0% 0% 0%);
  clip-path: inset(0% 0% 0% 0%);
}

.veritcal .jx-image.jx-left {
  top: 0;
  background-position: top;
}

.veritcal .jx-image.jx-left img {
  top: 0;
}

.vertical .jx-image.jx-right {
  bottom: 0;
  background-position: bottom;
  -webkit-clip-path: inset(0% 0% 0% 0%);
  clip-path: inset(0% 0% 0% 0%);
}

.veritcal div.jx-image.jx-right img {
  bottom: 0;
}

.transition {
  -webkit-transition: -webkit-transform 0.16s ease, -webkit-clip-path 0.16s ease;
  transition: -webkit-transform 0.16s ease, -webkit-clip-path 0.16s ease;
  -o-transition: transform 0.16s ease, clip-path 0.16s ease;
  transition: transform 0.16s ease, clip-path 0.16s ease;
  transition: transform 0.16s ease, clip-path 0.16s ease, -webkit-transform 0.16s ease, -webkit-clip-path 0.16s ease;
}

.jx-handlewrapper {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* transform: translateX(-50%); */
  margin-left: calc(var(--controller-width) / -2);
  cursor: col-resize;
}

.jx-handlewrapper:hover .jx-controller::before,
.jx-handlewrapper:active .jx-controller::before {
  -webkit-transform: translateX(-4px);
  -ms-transform: translateX(-4px);
  transform: translateX(-4px);
}

.jx-handlewrapper:hover .jx-controller::after,
.jx-handlewrapper:active .jx-controller::after {
  -webkit-transform: translateX(4px);
  -ms-transform: translateX(4px);
  transform: translateX(4px);
}

@media only screen and (max-width: 480px) {
  :root {
    --controller-width: 24px;
    --control-width: 1px;
  }

  .vn-slider {
    width: 100%;
    width: var(--mobile-width, 100%);
  }

  .jx-controller::before {
    top: 6px;
    left: -10px;
    border-width: 6px 6px 6px 0;
  }

  .jx-controller::after {
    top: 6px;
    right: -10px;
    border-width: 6px 0 6px 6px;
  }
}

.c-metadata-app {
  font-family: Mote, sans-serif;
  color: #767070;
  font-size: 14px;
  line-height: 18px;
}

.vn-slider>.jx-slider::before {
  content: "";
  position: absolute;
  width: 12%;
  aspect-ratio: 3 / 1;
  background: url("https://story.wiwo.de/Wirtschaft-von-oben/Assets/liveo.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  left: 8px;
  bottom: 12px;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 10;
}

.vn-slider.white-label>.jx-slider::before {
  display: none;
}