.home .site {
  background: #F7CD1A; /* before was: #F7CD1A gelb */
}

.hero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
  height: 220vh;
  position: relative;
	background: #F7CD1A; /* before was: #F7CD1A gelb */
}

.wordmark {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
}

/* CRITICAL: prevent stacking bug */
.wordmark span,
.logo {
  display: block;
}

/* LOGO */
.logo {
  width: 760px; /*was 600*/
  height: 760px;

  background-image: url('../media/hero/hero_bg_01.jpeg');
  background-size: cover;
  background-position: center;

  transform-origin: center;
  transition: transform 0.2s ease, width 0.2s ease;

  /* TEMP fallback so you SEE something */
  background-color: black;

  -webkit-mask-image: url('../media/hero/hero_logo_02.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url('../media/hero/hero_logo_02.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* TEXT */
.left, .right {
  font-size: 300px;
  opacity: 0;
  letter-spacing: 25px;
  color: black;
  white-space: nowrap;
	
	display: flex;
	align-items: center;
	line-height: 1;
  transform:translateY(-30px)
}

.right {
  position: relative;
  top: 2px;
}

/* MOBILE FIX */
@media (max-width: 768px) {
  .logo {
    width: 260px;
  }

  .right {
    top: 0px;
  }
	
  .left,
  .right {
    font-size: 70px;
    letter-spacing: 5px;
  }

  .hero {
    height: 180vh;
  }
}

/* temporary for testing the wordpress block intefierenz 12*/
/*
.homepage-content {

    display: block;

    width: 100%;

    clear: both;

    position: relative;

    z-index: 10;

}

.hero {

    display: block;

    width: 100vw;
}
*/