@media screen and (min-width: 860px){
	nav#mobile {
		display: none;
	}
	article#mobile {
		display: none;
	}

	.tab_icon_mobile {
		display: none;
	}
}

@media screen and (max-width: 1500px){
	.tab_ue_text {
		padding: 5px 0px 5px 10%;
	}
	.details_datum{
		margin: 15px 5px 25px 10%;
	}
	.strich_kalender {
		margin: 0px 0px 0px 10%;
		width: 40%;
	}
	.leiter, .teilnehmer, .bekleidung, .bearbeitet {
		margin: 0px 5px 0px 10%;
		width: 40%;
	}
	.details_info {
		margin: 0px 0px 40px 10%;
		width: 80%;
	}
	.buttongesamt {
		margin: 0px 0px 40px 10%;
		width: 80%;
	}
	.info_teilnehmer {
		margin: 8px 0px 0px 10%;
		width: 80%;
	}
	.tab_zusage, .tab_vielleicht, .tab_absage, .tab_gesperrt{
		margin: 0px 0px 10px 10%;
		width: 80%;
	}
	#details_img{
		max-height: 150px;
		margin: 40px 5% 0 0 ;
	}
}

@media screen and (max-width: 1200px){
	nav#normal p,
	.nav_text {
		display: none;
	}
	nav#normal ul li a{
		min-width: 90px;
	}
	header#text{
		width: 100%;
	}
	header#text {
		display: none;
	}
	header#bild {
		width: 100%;
	}
	.tab_ue_text {
		padding: 5px;
	}
	.details_datum{
		margin: 15px 0px 15px 0px;
	}
	.strich_kalender {
		margin: 0px;
		width: 100%;
	}
	.tab_zusage,
	.tab_vielleicht,
	.tab_absage,
	.tab_gesperrt,
	.teilnehmer,
	.bekleidung,
	.buttongesamt,
	.leiter,
	.details_info {
		width: 100%;
		transition: 500ms all ;
		left: 0;
	}
	.leiter, .teilnehmer, .bekleidung, .bearbeitet {
		margin: 0px 0px 0px 0px;
		
		width: 99%;
	}
	.details_info {
		margin: 0px 0px 20px 0px;
		width: 95%;
	}
	.buttongesamt {
		margin: 0px 0px 20px 0px;
	}
	.info_teilnehmer {
		margin: 8px 0px 0px 0px;
		width: 80%;
	}
	.tab_zusage,
	.tab_vielleicht,
	.tab_absage,
	.tab_gesperrt{
		margin: 0px 0px 10px 0px;
	}
	#details_img{
		max-height: 60px;
		margin: 0px 10% 0 0 ;
		border-radius: 10px;
	}
}

@media screen and (max-width: 860px){

	
	header#text h1{
		padding: 15px 0px 10px 10px;
		font-style: normal;
		font-size: 20px;
	}
	
	nav#normal,
    article#normal,
	#back,
	.tab_ue_icon{
		display: none;
	}

	nav#mobile {
		margin: 0 0 0 0;
		padding: 0;
		display: inline-block;
		width: 100%;
	}
	
	article {
		width: 100%;
		padding: 0;
		height: 100%; 
	}

	#article_box,
	#article_box0,
	#article_box1,
	#article_box2,
	#article_box3 {
		width: 98%;
		margin: 0 0 20px 1%;
		box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
	}
	article h1{
		font-size: 20px;
	}
	aside {
		width: 100%;
		padding: 0;
	}
	#aside_container, #aside_container_clear {
		width: 98%;
		margin: 0 0 20px 1%;
		box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
	}
	#login {
		height: 255px; 
		padding: 10px ;
		width: 100%;
		background: #FFFFFF;
		position: sticky;
		box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
	}
	
	.sbn, .passwort{
		font-size: 16px;
		font-weight: normal;
	}
    
	.speichern {
		width: 100%;
	    padding: 12px 28px;
		font-size: 14px;
		margin: 0 5px 15px 0;
	}
	.modal-content,
	.modal-content2 {
	    margin: 0;
	    padding: 10px;
	    width: 100%;
	}
	.details_datum p{
		font-size: 16px;
	}

	.details_datum{
		margin: 15px 5px 10px 0px;
	}
	.leiter, .teilnehmer, .bekleidung, .bearbeitet {
		margin: 0px 0px 0px 0px;
	}
	.buttongesamt {
		margin: 0px 0px 20px 0px;
	}

	#details_img{
		margin: 0px 5% 0 0 ;
	}

	.tab_zuabsage_datum {
		display: none;
	}

	.modali {
	  padding-top: 150px; /* Location of the box */
	  
	}
	.modal-content {
		width: 95%;
	}
	.modal-footer {
		margin: 0px 0px 20px 0px;
	}

	

}