:root {
  --vh: 1vh;
  --vw: 1vw;
}

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

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


/*
@media (orientation: portrait) {
	
	html, body {
		font-family: 'Muli';
		display: flex !important;
		text-align: center;
		font-size: 29px !important;
	}
	
	body::after {
		font-family: 'Muli';
		font-weight: bold;
		content: 'Bitte Handy drehen!';
		font-size: 29px !important;
		margin: auto;
	}
	
	#mainWrapper {
		display: none !important;
	}
	
}
*/

/*
@media (pointer: coarse) {
  body {
    position: relative !important;
    overflow: hidden !important;
    height: calc(var(--vh) * 100);
  }
}
*/

.rotate-90 {
    transform: rotate(90deg);
}

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Muli';
}

body {
	width: 100%;
	/* height: 101vh; */
	position: fixed;
	overflow: hidden;
	
    overflow-y: scroll; /* garantiert Scroll */
	
	/* Mobile fix da Mobiles vh falsch darstellen */
	height: calc(var(--vh) * 100);
}



.alleWrapper{
	display: none;
}

#mainWrapper{
	width: 100%;
	/* height: 100vh; */
	display: none;
	
	/* Mobile fix da Mobiles vh falsch darstellen */
	height: calc(var(--vh) * 100);
	
	border: 2px solid blue;
}	


#uebungWrapper{
	display: none;
	width: 100%;
	height: 100vh;
	position: absolute;
	background: url(../images/uebungSeite/m_uebungen.png) no-repeat;
	background-position: center center;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-color: #7EB058;
	
	/* pointer-events:none;  wegen performance! */
}

/* Mobile fix, vh wird auf Handys falsch dargestellt! */
@media (pointer: coarse) {
  #uebungWrapper{
		height: calc(var(--vh) * 100);
		background-position: center bottom;
		background-size: auto calc(var(--vh) * 100);
  }
}



/* Geschafft Elemente ---------------------------------- */
#geschafftWrapper {
	position: relative;
	width: 100%;
	height: calc(var(--vh) * 100);
	background-color: #ABE268;
}

#geschafft_inner_wrapper {
	display: flex;
	width: auto;
	height: calc(var(--vh) * 100);
	flex-flow: row nowrap;
    justify-content: center;
}



#background_geschafft {
	position: relative;
	height: calc(var(--vh) * 100);
    width: auto;
}

#wow {
	position: absolute;
	width: auto; 
	height: 100%;
	opacity: 1;
	visibility: inherit;
}

#wow_text {
	position: absolute;
	width: auto; 
	height: 100%;
	visibility: hidden;
}
/* Geschafft Elemente ---------------------------------- */

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

@media (min-aspect-ratio: 23/10) {
    #bravo_inner_wrapper {
        border-left: 80px solid black;
        border-right: 80px solid black;
    }
}

@media (min-aspect-ratio: 25/10) {
    #bravo_inner_wrapper {
        border-left: 180px solid black;
        border-right: 180px solid black;
    }
}


#fehlgeschlagenWrapper {
	position: relative;
	width: 100%;
	height: calc(var(--vh) * 100);
	background-color: #949F4F;
}

#fehlgeschlagen_inner_wrapper {
	display: flex;
	width: auto;
	height: calc(var(--vh) * 100);
	flex-flow: row nowrap;
    justify-content: center;
}

#background {
	position: relative;
	/* height: 100vh; */
    width: auto;
	
	/* Mobile fix, vh wird falsch berechnet bei Handys! */
	height: calc(var(--vh) * 100);
}

#oops {
	position: absolute;
    
	width: auto; 
	height: 100%; 
}

#oops_text {
	position: absolute;
	width: auto; 
	height: 100%;
	visibility: hidden;
}

#eule {
	position: absolute;
    top: 50%; /* Setzt das Element 50% von oben des Containers */
    left: 50%; /* Setzt das Element 50% von links des Containers */
    transform: translate(-61%, -30%);
	width: auto; 
	height: 100%; 
}

#ast {
	position: absolute;
    top: 50%; /* Setzt das Element 50% von oben des Containers */
    left: 50%; /* Setzt das Element 50% von links des Containers */
    transform: translate(-50%, -50%); /* Verschiebt das Element zurück um seine eigene halbe Breite und Höhe */
	width: auto; 
	height: 100%; 
	
}

#brechender_ast {
	position: absolute;
    top: 50%; /* Setzt das Element 50% von oben des Containers */
    left: 50%; /* Setzt das Element 50% von links des Containers */
	transform: translate(-49%, 25%);
    width: auto;
    height: 41%;
	visibility: hidden;
}

#flatterndeEule {
	position: absolute;
    top: 50%; /* Setzt das Element 50% von oben des Containers */
    left: 50%; /* Setzt das Element 50% von links des Containers */
    transform: translate(-61%, -30%);
	width: auto; 
	height: 100%;
	visibility: hidden;
}


#debug_div {
    display: none;
}