#specialprice {
  width:auto;
  max-width:85vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease;
  background: #f2f7ff;
  position: fixed;
  top:112px;
  right:5vw;
  padding: 20px;
  padding-top:10px;
  min-width:30vw;
  box-sizing:border-box;
  margin: 0;
  transform: rotate(-6deg);
  pointer-events: none;
  cursor: pointer;
  z-index:5;
}
/* sichtbar */
#specialprice.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#specialprice p, #specialprice h5, #specialprice h4, #specialprice a {
  margin-bottom:0;
  color:black;
  background:transparent;
}
#specialprice a {
  color:grey;
}
.ma {
    --_ma-color-a: #fff;
    --_ma-color-b: #111;
    --_ma-speed: 250ms;
    --_ma-animation-direction: 1;
    --_ma-animation-timing-function: linear;
    --_ma-border-width: 1px;
    --_ma-size-a: 4px;
    --_ma-size-b: 4px;
    --_ma-angle: 45deg;
    --_ma-size: calc(var(--_ma-size-a) + var(--_ma-size-b));
    --_ma-shift: calc(var(--_ma-size) / sin(var(--_ma-angle)));

    position: relative;
}

.ma:before,
.ma:after {
    content: '';
    position: absolute;
    inset: calc(var(--_ma-border-width) * -1);
    pointer-events: none;
    border-radius: inherit;

    background:
        repeating-linear-gradient(
            var(--_ma-angle),
            var(--_ma-color-a) 0 var(--_ma-size-a),
            var(--_ma-color-b) var(--_ma-size-a) var(--_ma-size)
        );
    background-size: var(--_ma-shift) 100%;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.ma:before {
    padding: 0 var(--_ma-border-width) var(--_ma-border-width) 0;
    animation: ma-animation-b var(--_ma-speed) var(--_ma-animation-timing-function) infinite;
}

.ma:after {
    padding: var(--_ma-border-width) 0 0 var(--_ma-border-width);
    animation: ma-animation-a var(--_ma-speed) var(--_ma-animation-timing-function) infinite;
}

.ma:hover:before,
.ma:hover:after {
    animation-play-state: paused;
}

@keyframes ma-animation-b {
    to {
        background-position: calc(var(--_ma-shift) * var(--_ma-animation-direction) * -1) 0;
    }
}

@keyframes ma-animation-a {
    to {
        background-position: calc(var(--_ma-shift) * var(--_ma-animation-direction)) 0;
    }
}
.ma-example {
    box-shadow: 0 1rem 3rem rgb(0 0 0 / .66);
}
.ma-example--10 {

    border-radius: 0;

    --_ma-color-a: #fff;
    --_ma-color-b: #111;
    --_ma-speed: 250ms;
    --_ma-animation-direction: 1;
    --_ma-animation-timing-function: linear;
    --_ma-border-width: 1px;
    --_ma-size-a: 4px;
    --_ma-size-b: 4px;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}