.ContentImgCompare .image-compare {position: relative;width: 100%; overflow: hidden;}
.ContentImgCompare .image-compare img {width: 100%;height: auto;}
.ContentImgCompare .image-2 {
  --exposure: 50%; display: block;
  clip-path: polygon(
	calc(var(--exposure) + 2px) 0, 
	100% 0, 
	100% 100%, 
	calc(var(--exposure) + 2px) 100%
  );
}

.ContentImgCompare .image-2-wrapper {display: block; position: absolute;top: 0;width: 100%;filter: drop-shadow(-5px 0 0 var(--HUSSgelb));}

.ContentImgCompare .image-compare-label {
  align-items: stretch;display: flex;
  position: absolute;left: 0; bottom: 5em; right: 0; top: unset}

.ContentImgCompare .image-compare-input {
  --thumb-size: clamp(1em, 7vmin, 3em);

  /* Go half a "thumb" off the edge to the left and right" */
  margin: 0 calc(var(--thumb-size) / -2);
  /* Make the input a full "thumb" wider than 100% so it extends past the edges */
  width: calc(100% + var(--thumb-size));
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
}

/* Firefox */
.ContentImgCompare .image-compare-input::-moz-range-thumb {
  background-color: var(--HUSSgelb);
  /* An inline SVG of two arrows facing opposite directions */
  background-image: url('data:image/svg+xml;utf8,<svg viewbox="0 0 60 60"  width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M20 20 L10 30 L20 40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M40 20 L50 30 L40 40"/></svg>');
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 3%;
  border: 2px var(--HUSSgelb) solid;
  color: var(--HUSSgelb);
  width: var(--thumb-size);
  height: calc(var(--thumb-size)*2);}

.ContentImgCompare .image-compare-input:focus::-moz-range-thumb {
  box-shadow: 0px 0px 0px 2px rgba(255,204,0, 1);
}

/* Chrome, Safari and Edge, */
.ContentImgCompare .image-compare-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: var(--HUSSgelb);
  /* An inline SVG of two arrows facing opposite directions */
  background-image: url('data:image/svg+xml;utf8,<svg viewbox="0 0 60 60"  width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M20 20 L10 30 L20 40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M40 20 L50 30 L40 40"/></svg>');
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 3%;
  border: 2px var(--HUSSgelb) solid;
  color: var(--HUSSgelb);
  width: calc(var(--thumb-size));
  height: calc(var(--thumb-size)*2);}

.ContentImgCompare .image-compare-input:focus::-webkit-slider-thumb {box-shadow: 0px 0px 0px var(--thumb-border-size) rgba(255,204,0, 1);}
.ContentImgCompare .visually-hidden {border: 0; clip: rect(0 0 0 0); height: 1px;  margin: -1px; overflow: hidden; padding: 0; position: absolute;width: 1px;}


/*ab 600px höhe und kleiner*/
@media (max-height:600px) and (min-width:900px){
 .ContentImgCompare.maxwidthcontent{ width:80%; }
}