.body{
  overflow-y: hidden;
  background-color: #000000;
}
.hero-container {
  display: grid;
	grid-template-columns: auto 99vw auto 17px;
	grid-template-rows:  100%;
	width: 100vw;
  height:56.25vw;
}
.heromain {
  grid-area: 1 / 2 / span 1 / span 1;
  width:calc ((100vh - 12.44vw) / 9 * 16);
  height:calc (100vh - 12.44vw);
}
.farbkasten {
  grid-area: 1 / 1 / span 1 / span 4;
  justify-self: center;
  width:100%;
  height:100%;
  background-color:#000000;
}

@media(min-width: 1400px) {
.hero-container {
  grid-template-columns: auto 1260px auto 17px;
  grid-template-rows: 708px;
  height:708px;
 }
.heromain {
  grid-area: 1 / 2 / span 1 / span 1;
  justify-self: center;
  width:1260px;
  height:708px;
  background-color:#000000;
}
}
  
@media(max-width: 900px) {
.hero-container {
  width:calc ((100vh - 173px) / 9 * 16);
  height:calc (100vh - 173px);
 }
.heromain {
  grid-area: 1 / 2 / span 1 / span 1;
  width:calc ((100vh - 17.8vw) / 9 * 16);
  height:calc (100vh - 17.8vw);
}
}
 @media(max-width: 550px) {
.hero-container {
  display: grid;
	grid-template-columns: auto 100vw auto;
	grid-template-rows:  auto;
	width: 100vw;
   }
.heromain {
  grid-area: 1 / 1 / span 1 / span 3;
  width:100vw;
}