
.mini_wrapper {
	display: none; /* Der stört eigentlich, haben mittlerweile 3 Pfeile!? */
	position: absolute;
	top: 7vh;
	left: 8%;
	width: 7%;
	height:  7%;
}

.mini{
	width: 100%;
}

.anlaut_link_wrapper{
	position: absolute;
	top: 7vh;
	right: 8%;
	width: 7%;
	height:  7%;
}

.anlaut_link{
	width: 80%;
}

.anlaute_wrapper {
	position: relative;
	width: 80vh;
	height: 12vh;
	margin: 9vh auto 3vh auto;
}

.anlaute {
	width: 16%;
	height: 100%;
	margin: 2vh 2% 0vh 2%;
	float: left;
    background-position: center;
	background-size: contain;
    box-sizing: border-box;
}

.dotted
{
	background-image: url(../images/uebungSeite/dot.png);
	background-repeat: repeat-x;
	height: 2vh;
	background-size: contain;
	margin: 0 5%;
}

.aufgabe{
	position: absolute;
	/* top: 43vh; */
    left: calc((100% - 105vh)/2);
	width: 105vh;
	/* height: 60vh; */
	margin: auto;
	
	/* Mobile fix */
	top: calc(var(--vh) * 43);
    height: calc(var(--vh) * 60);
}

#auswahl_fenster{
	position: absolute;
    /* top: 25vh; */
    left: 0%;
    width: 100%;
    /* height: 22vh; */
    margin: 0 auto;
	
	/* Mobile fix */
	top: calc(var(--vh) * 25);
    height: calc(var(--vh) * 22);
}



#auswahl_wrapper_0{
    position: absolute;
    top: 0vh;
    left: 5%;
	width: 21%;
	height: 100%;
    background-color: #FFF;
	border-radius: 4vh;
	border: 0.6vh solid #000;
	box-sizing: border-box;
	display: table;
	z-index: 100;
	overflow: hidden;
}

#auswahl_wrapper_1{
     position: absolute;
    top: 0vh;
    left: 28%;
	width: 21%;
	height: 100%;
    background-color: #FFF;
	border-radius: 4vh;
	border: 0.6vh solid #000;
	box-sizing: border-box;
	display: table;
	z-index: 100;
	overflow: hidden;
}

#auswahl_wrapper_2{
     position: absolute;
    top: 0vh;
    left: 51%;
	width: 21%;
	height: 100%;
    background-color: #FFF;
	border-radius: 4vh;
	border: 0.6vh solid #000;
	box-sizing: border-box;
	display: table;
	z-index: 100;
	overflow: hidden;
}

#auswahl_wrapper_3{
    position: absolute;
    top: 0vh;
    left: 74%;
	width: 21%;
	height: 100%;
    background-color: #FFF;
	border-radius: 4vh;
	border: 0.6vh solid #000;
	box-sizing: border-box;
	display: table;
	z-index: 100;
	overflow: hidden;
}

#auswahl_wrapper_0,
#auswahl_wrapper_1,
#auswahl_wrapper_2,
#auswahl_wrapper_3 {
    position: absolute;
    top: 0;

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

.span_auswahl {
    display: block;
    font-size: 8vh;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.auswahl_img {
	height: 90%;
	width: 90%;
	margin: 4% auto;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	border-radius: 15px;
	top: 50%;
  transform: translateY(-50%);
}

#begriff_fenster{
	    /* position: relative; */
    top: 0vh;
    left: 21.58%;
    width: 89%;
    height: 28%;
    margin: 0 auto;
    box-sizing: border-box;
    z-index: 0;
    border-radius: 4vh;
}
	

#begriff_bild_wrapper {
    top: 0%;
    left: 0%;
	width: 46%;
	height: 100%;
    border: 0.6vh solid #000;
	border-radius: 4vh;
    background-color: #FFF;
    box-sizing: border-box;
}

#begriff_bild{
    margin: 5% auto;
	width: 90%;
	height: 90%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
    /*display: table;*/
    box-sizing: border-box;
}

#begriff {
    width: 100%;
    height: 100%;
    display: table;
    border: 0.6vh solid #000;
    border-radius: 4vh;
    background-color: #FFF;
    box-sizing: border-box;
}

#begriff_2 {
    /* Bei Mathewald ist #begriff_2 genau gleich wie #begriff */
	width: 100%;
    height: 100%;
    display: table;
    border: 0.6vh solid #000;
    border-radius: 4vh;
    background-color: #FFF;
    box-sizing: border-box;
}


#begriff p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}

#begriff_2 p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}
	
.hovered {
  	background: #fcff26 !important;
}

#debugPfeil {
	display: block; 
	position: absolute;
	top: 15px;
	right: 24px;
	width: 40px;
}

.explode{
	position: relative;
	transition: 0.3s .1s;
	top:0;left:0;
}
	
.explode_img {
	display: none;   
	position: absolute;
	width: 7vh;
	height: 7vh;
	opacity: 1.0;
}

.falsch {
  background: rgba(233, 25, 25, 0.8);
}

.span_auswahl.falsch {
  background: rgba(233, 25, 25, 0.8);
}

