#rotateOverlay{
  position: fixed;           /* nicht absolute */
  top: 0; right: 0; bottom: 0; left: 0;

  display: none;
  align-items: center;       /* vertikal */
  justify-content: center;   /* horizontal */

  font-family: 'Muli';
  font-size: 8vw;
  font-weight: bold;
  text-align: center;

  background: #fff9c4;
  z-index: 999998;
}


@media (orientation: portrait){
  #rotateOverlay{ display: flex; }

  /* App ausblenden wie du es willst */
  
  .content{
    display: none !important;
  }

  /* verhindert, dass dein altes html,body{display:flex} das Overlay "kaputt centert" */
  html, body{
    display: block !important;
    height: 100% !important;
  }
}



* {
	
}

@font-face { 
	font-family: 'Muli';
	src: url("css/fonts/Muli/Muli-Regular.ttf"); 
}

@font-face { 
	font-family: 'Muli';
	font-weight: bold;
	src: url("css/fonts/Muli/Muli-Bold.ttf"); 
}


body {
	height: 100vh;
	margin: 0;
}

.content {
	background-color: #7EB058;
	height: 100vh;
	
  	background-repeat: no-repeat;
	background-size: auto 100vh;
	background-image: url(images/Startseite/m_hauptmenu.png);
	background-position: center center;
	font-family: Muli;
	
	font-size: 25px;
    font-weight: bold;
}




@media (min-aspect-ratio: 20/10) {
   .content {
        border-left: 60px solid black;
        border-right: 60px solid black;
    }
}

@media (min-aspect-ratio: 23/10) {
    .content {
        border-left: 157px solid black;
        border-right: 157px solid black;
    }
}

ul {
	margin: 0;
	padding: 0;
}

ul > li {
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
    width: 160px;
    height: 80px;
   
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
	transform: translate(-50%, -50%);
	list-style-type: none;
	background-color: #CEEC62;
	
	margin: 0;
	padding: 0;
	cursor: pointer;
}

ul > li > a {
	color: black;
	text-decoration: none;
}

.back_arrow {
    position: absolute;
    width: 60px;
    height: 40px;
    right: 30px;
    bottom: 25px;
	
	z-index: 999999;
}

.back_arrow > a > img#pfeil2 {
    transform: rotate(180deg);
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}
img {
    height: auto;
    width: 62%;
    display: block;
}