.indie-flower-regular {
  font-family: "Indie Flower", cursive;
  font-weight: 400;
  font-style: normal;
}

.hero-image{
  position: relative;
  width: 100%;
  height: 100%;              /* 👈 HÖHE FESTLEGEN */
  overflow: hidden;
  background:#fff;
}

/* Bild */
.hero-image picture{
  width: 100%;
  height: 100%;
  display: block;
}

.hero-image img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  will-change: transform, opacity;

  /* neutrale Defaults */
  --from-scale: 1;
  --to-scale: 1;
  --pan-x: 0%;
  --pan-y: 0%;
  --move-ms: 12000ms;

  transform: translate(0,0) scale(var(--from-scale));
  transition: none;
  opacity: 0; /* erst zeigen, wenn Startzustand gesetzt ist */
}

/* Bild erst sichtbar, wenn vorbereitet */
.hero-image.is-ready img{
  opacity: 1;
}

/* Animation startet erst per JS */
.hero-image.is-animating img{
  transform: translate(var(--pan-x), var(--pan-y)) scale(var(--to-scale));
  transition: transform var(--move-ms) ease;
}

.wrapLoop{
	width: 100%;
	height: 70vh;
	overflow: hidden;
	position: relative;
	max-height: 70vh;
}
	
.claimArea {
	max-width: 1200px;
	width: 100%;
	display: flex;
	padding-top: 15px;
	padding-bottom: 15px;
	margin: 0 auto;
	justify-content: space-around;
}

.claimContent {
	width: auto;
	font-size: 100%; 
}

.mainImgText {
	position: absolute;
	top: 16vh;
	width: 100%;
	font-size: 250%;
	text-shadow: 1px 2px 4px rgba(0,0,0,0.6);
	
}
@media (max-width: 768px) { 
	.mainImgText {
		font-size: 300%;
	}
	#claimsHead {
		/*display: none;*/
			border-bottom: 0px solid #dedede;
			border-top: 0px solid #dedede;
		/*height: 5vh;*/
	}
	.claimArea {
		/*display: none;*/
		margin-top: 50px;
		flex-wrap: wrap;
	}
	.claimContent {
     
    font-size: 80%;
    padding: 5px;
}
}