#hexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  list-style-type: none;
  max-width: 750px;
  }

.hex {
  position: relative;
  visibility:hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
  transition: all 0.5s;
  backface-visibility: hidden;
  will-change: transform;
  transition: all 0.5s;
}
.hex::after{
  content:'';
  display:block;
  padding-bottom: 86.602%;  /* =  100 / tan(60) * 1.5 */
}
.hexIn{
  position: absolute;
  width:96%;
  padding-bottom: 110.851%; /* =  width / sin(60) */
  margin: 2%;
  overflow: hidden;
  visibility: hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
  -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
      -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
          transform: rotate3d(0,0,1,-60deg) skewY(30deg);
    transition: all 0.5s;
}
.hexIn * {
  position: absolute;
  visibility: visible;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexLink {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
        -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
            transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}




/*** HEX CONTENT **********************************************************************/

.hex h1, .hex p {
  width: 100%;
  padding: 5%;
  box-sizing:border-box;
  opacity: 1;
}

.hex wabe_uebersicht {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
}

.wabe_uebersicht {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
transition: 2s;
}


.wabe_uebersicht:hover {
  transition: 2s;
 /* transform: rotateY(180deg);*/

}

.wabe_uebersicht:before, .wabe_uebersicht:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  opacity: 0;
  transition: opacity 0.5s;
}

.hex wabe {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
}



#demo1, #demo2, #wabe_uebersicht_headline {
  margin-top: 0;
  text-align: center;
  top:50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  z-index: 1;
}

#wabe_uebersicht_headline
{
  color: white;
}

.wabe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
transition: 2s;
}

.wabe > #demo2 {
  display: none;
}

.wabe:hover, .wabe:active {
  cursor: pointer;
  transition: 2s;
 /* transform: rotateY(180deg);*/

}

.wabe:hover > #demo1, .wabe:active > #demo1 {
  display: none;
  }

  .wabe:hover > #demo2, .wabe:active > #demo2 {
    display: block;
    }
  
  

.wabe:before, .wabe:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  opacity: 0;
  transition: opacity 0.5s;
}


/*** FARB DEFINITIONEN MOMENTE UEBERSICHT **********************************************************************/

div#momente div.grid ul#hexGrid li.hex:nth-child(1) > div:nth-child(1) > a:nth-child(1) > div:nth-child(1) {
  background-color: #64a877;
}


div#momente div.grid ul#hexGrid li.hex:nth-child(2) > div:nth-child(1) > a:nth-child(1) > div:nth-child(1) {
  background-color: #8999cd;
}

div#momente div.grid ul#hexGrid li.hex:nth-child(3) > div:nth-child(1) > a:nth-child(1) > div:nth-child(1) {
  background-color: #9f6595;
}

div#momente div.grid ul#hexGrid li.hex:nth-child(4) > div:nth-child(1) > a:nth-child(1) > div:nth-child(1) {
  background-color: #e35d51;
}








/*** FARB DEFINITIONEN WABE **********************************************************************/

#gruen .wabe {
  background-color:#86c394;
}

#gruen .wabe:hover {
  background-color:#e0edd4;
  transition: 2s;
}

#gruen #demo1 {
  color:#ffffff ;
}
#gruen #demo2 {
  color:#65a673 ;
}

#lila .wabe {
  background-color: #ddc1cf;
}

#lila .wabe:hover {
  background-color:#c395ae;
  transition: 2s;
}

#lila #demo1 {
  color:#9d6291 ;
}
#lila #demo2 {
  color:#ffffff ;
}


#orange .wabe {
  background-color: #f08e6c;
}

#orange .wabe:hover {
  background-color:#f8c5b4;
  transition: 2s;
}

#orange #demo1 {
  color:#ffffff ;
}
#orange #demo2 {
  color:#e15d4e ;
}

#momente .wabe {
  background-color: #f08e6c;
}

#momente .wabe:hover {
  background-color:#f8c5b4;
  transition: 2s;
}

#momente #demo1 {
  color:#ffffff ;
}
#momente #demo2 {
  color:#e15d4e ;
}



/*** MEDIA QUERIES *****************************************************************/


@media (min-width:601px) { /* <- 3-2  hexagons per row */
  #hexGrid{
    padding-bottom: 7.4%;
    font-size: 14px;
  }
  .hex {
    width: 33.333%; /* = 100 / 3 */
  }
  .hex:nth-child(5n+4){ /* first hexagon of even rows */
    margin-left:16.666%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 600px) { /* <- 2-1  hexagons per row */
  #hexGrid{
    padding-bottom: 11.2%;
    font-size: 12px;
  }
  .hex {
    width: 50%; /* = 100 / 3 */
  }
  .hex:nth-child(3n+3){ /* first hexagon of even rows */
    margin-left:25%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 400px) {
    #hexGrid {
        font-size: 8px;
    }
  

   
}