* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.hilfsdienste-marquee {
    margin: 0 auto; 
	max-width: 1340px;
	padding: 2%;
	text-align: left;
}
.dothalter {
	width: 100%; 
	max-width: 14px; 
	float:left; 
	text-align: left; 
	margin: 4px 10px 4px 0;
}
.hilfsdienste {
	transition: 0.4s;
	color: #000000;
	text-align: left;
	text-decoration: none;
	font: 500 16px / 1.8em;
    font-family: 'Montserrat', sans-serif;
	line-height: 22px;
}
a:hover.hilfsdienste {
    color: #181818;
	text-decoration: none;
	border-bottom: 1px solid #181818;
}

@media screen and (max-width: 320px) {
.hilfsdienste-marquee {display: block;}
}
@media screen and (min-width: 321px) {
.hilfsdienste-marquee {display: none;}
}
.headline-dienste {
	width: 98%;
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}
h1.headline a {
  font-size: 1em;
  font-weight: 300;
  color: #001664;
  letter-spacing: -.02em;
  transition: .5s;
  line-height: 1.2;
  text-decoration: none;
}
h1.headline a:hover {
  border-bottom: 1.2px solid #001664;
}
@media screen and (max-width: 600px) {
  h1.headline {
    font-size: 1.1em;
  }
}
@media screen and (min-width: 601px) {
  h1.headline {
    font-size: 2em;
  }
}
.slider {
  padding-block: 12px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
}
@media screen and (max-width: 320px) {
  .slider {
    display: none;
  }
.dothalter {
	width: 100%; 
	max-width: 14px; 
	float:left; 
	text-align: left; 
	margin: 4px 10px 4px 0;
}
}
.list {
  display: flex;
  width: calc(
    var(--width) * var(--imageQuantity) * 2
  ); /* Double the width for seamless looping */
  gap: calc(var(--width) / 12);
  animation: autoScroll 60s linear infinite;
}
.list:hover {
  animation-play-state: paused !important;
}
.item {
  width: var(--width);
  height: var(--height);
  flex-shrink: 0;
  margin-bottom: 0.3%;
}
.item img {
  width: 100%;
  height: 100%;
  transition: filter 0.5s ease-in-out;
  box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);
}
@keyframes autoScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--width) * var(--imageQuantity)));
  }
}
.slider[reverse="true"] .list {
  animation: reverseScroll 60s linear infinite;
}
@keyframes reverseScroll {
  0% {
    transform: translateX(calc(-1 * var(--width) * var(--imageQuantity)));
  }
  100% {
    transform: translateX(0);
  }
}
.slider:hover .item img {
  filter: grayscale(1);
}
.slider .item:hover img {
  filter: grayscale(0);
}