@charset "utf-8";
	/*####################################################################
	###																   ###
	###						CSS-MAIN								   ###
	###																   ###
	####################################################################*/
	
	* {
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
	}
	body {
	  font: 18px Arial,sans-serif;
	  max-width: 1200px;
	  width: 100%;
	  margin: auto;
	  background: #1e1a27;
      color:rgb(170,139,242); 
	  }

input[name="maintag"]{display:none;}

.hdft {
	  opacity: 1;
	color:rgb(170,139,242);
	  background: #000;/*background: #FFC067*/
		z-index: 3;
	}
	a{
		text-decoration: none;
		
		}
input[type="text"],input[type="email"],input[type="tel"],textarea,select {
	background: #1e1a27;
	border: none;
	border-bottom: 1.5px solid rgb(153, 90, 55);
	color: rgb(170,139,242);
	padding: 5px 8px;
}
a[href="uebermich/Lebenslauf.pdf"]{
	color:rgb(153, 90, 55) ;
}
h2{color:rgb(153, 90, 55);}
    /*-###################################
	####                          ########
	####     mobil                ########
	####                          ########
	####################################*/

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

    
    header img{
        display: none;
    }
	header {
		width: 100%;
		height: 55px;
		top: 0;
		
		padding: 5px;
	}
	header h1 {
		text-align: center;
    		
	}
	fieldset{
		border:none;
		padding: 15px;
	}
	div[class="HL"] {
		display:none;
	}
    #BB {
        position: fixed;
        top: 0;
        left:0;
        padding-left: 6px;
        height: 55px;
        width: 35px;
        line-height: 55px;
        font-size: 35px;
                background: rgba(0,0,0,0.5);
    }
    nav {
		position: fixed;
        width: 100%;
	 	line-height: 30px;
        top:55px;
     	left:-100%;
     	padding-left: 5px;
        display: block;
     	color: rgb(170,139,242);
        
        transition: all 0.3s 0.3s;
		}
    #BB {
        cursor: pointer;
    }
	
    /*nav ul {
       transform: translate(-100%);
    }*/
    h1:hover ~ nav,
    nav:hover{
        left: 0;
    }
	.desktop {
        display:none;
    }	
    nav a{
        display: block;
        color: rgb(170,139,242);
        background: rgb(153, 90, 55);
        width: 100%;
        font-size: 30px;
        line-height: 40px;
		padding-left: 30px;
    }
	nav a:hover{
		background:rgb(170,139,242) ;
		color: rgb(153, 90, 55);
	}
    
    
    
    
	/*Bilder oa mobil*/
	img,
    video{
		width: 50%;
		float: right;
            padding: 10px;
            
	}
    h2{
        text-align: center;
        padding: 6px 0;
		color: rgb(153, 90, 55);
		background: rgba(255,255,255,0.05);
    }
    h3{
        padding-bottom: 5px
    }
	main,
    article,
    section{
		padding: 8px
	}
    .gal{
        float: none;
        width: 30%;
        padding: 3px
    }
	footer {
		position: fixed;
		bottom: 0;
		line-height: 20px;
		padding-left: 8px;
		width: 100%;
        text-align: center;
		font-size: 10px;
	}
}
	/*#################################################
	##                                               ##
	##  ####  ####  ### #  # #####  ###  ####   ###  ##
	##  #   # #    #    # #    #   #   # #   #  ###  ##
	##  #   # ####  ##  ##     #   #   # ####    #   ##
	##  #   # #       # # #    #   #   # #           ##
	##  ####  #### ###  #  #   #    ###  #       #   ##
	##                                               ##
	#################################################*/

@media screen and (min-width : 751px ){

	
	header {
		max-width: 1200px;
		height: 100px;
		top: 0;
		position: fixed;
		padding: 4px;
	}
    h1{
        display:none;
    }
    header h1 {
		width: 100%;
	}
	header img {
		position: absolute;
		padding: 10px;
		left:45%;
        height: 100px;
		transition: all 1s 0.3s;
	}
	header:hover h1 a{
		width: 0%;
		right:220px;
	}
    
	h2 {
	 position: fixed;
	 top: 0px;
	 padding: 20px;
	 text-shadow: -1px 0 1px rgba(255,255,255,0.7);
	 color: rgb(153, 90, 55);
	}
    h3{
        padding-bottom: 10px;
    }
	fieldset{
		border:1px solid;
		padding: 15px;
	}
    #BB{
        display:none;
    }
	div[class="HL"] {
	 pointer-events: none;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 40%, rgba(255,255,255,0.7) 50%,rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%);
	 position: fixed;
	 top: 0;
	 right:100%;
	 height:132px;
	 width: 50px;
	 transition: all 0.7s 1s ;
	 z-index: 50;
     padding: 0 10px;
	}
	header:hover ~ div[class="HL"] {
	 right: -10%;
	}
	nav {
	 max-width: 1200px;
	 line-height: 30px;
	
	 }
	nav:after {
	 content: "";
	 display: block;
	 clear: both;
	}
	
	header, footer, article, nav {
	 width: 1200px;
	 margin:	auto;
	}
		article {
		 max-width: 100%;
		}
	
		.main {
		 background: #FFDAA7;
		 position: fixed;
		 top: 100px;
		 z-index: 2;
		}
		  nav ul {
		   background: rgba(153, 90, 55,0.8);
		   list-style-type: none;
			
		   
		  }
	
		  nav ul:after {
		   content: "";
		   display: block;
		   clear: both;
		  }
    
			nav ul li {
			 top: 0;
			 float: left;
			 width: 180px;
				
			}
	
				nav ul li a  {
				 padding-left: 8px;
				 color: rgb(170,139,242);
				 display: block;
				 border:1px solid rgba(153, 90, 55,0.8);
				}
				nav ul li:hover a{
				 border: 1px #5905A1 solid;
				}
				
					nav ul li ul {
					 position: absolute;
					 top: 30px;
					 visibility: hidden;
					 opacity: 0;
					 transition: all 0.3s 0.2s;
					 width: 180px;
						
					}
					nav ul li:hover ul{
					 visibility: visible;
					 opacity: 1;	
					}
						nav ul li ul li a{
						 float: none;
						 
		
						}
						nav ul li ul:hover li {
						 border: none;
							
						}
						nav ul li:hover ul li a					
						{
						 transform: scale(1.);
						 color: rgba(153, 90, 55,1);
						 background: rgb(170,139,242);
						 box-shadow: none;
						 border: 1px #5905A1 solid;
							
						}
						nav ul li ul li a{
						 display:block;
						 width: 100%;
						 padding-left: 15px;
							
						}
						nav ul li ul li:hover a {
						 transform: scale(1.2);
						}
	
	
	label{display:block;}
    
	.mobile{display:none;}
	
#persD article section,
#start article section,
#am article section,
#Ausb article section,
#laufb article section,
#know article section,
#Portfolio article section,
#c4d article section,
#webD article section,
#Galerie article section,
#Kontakt article section,
#kofo article section,
#KoDa article section{
	
	opacity: 0;
	transition: all 2s;
	}
#pers1:checked ~ #persD article section,
#start1:checked ~ #start article section,
#ausb1:checked ~ #Ausb article section,
#lauf1:checked ~ #laufb article section,
#know1:checked ~ #know article section,
#c4d1:checked ~ #c4d article section,
#web1:checked ~ #webD article section,
#gal1:checked ~ #Galerie article section,
#kofo1:checked ~ #kofo article section,
#koda1:checked ~ #KoDa article section{
	
	opacity: 1;
	
	}

#persD aside .asiv,
#start aside .asiv,
#am aside .asiv,
#Ausb aside .asiv,
#laufb aside .asiv,
#know aside .asiv,
#Portfolio aside .asiv,
#c4d aside .asiv,
#webD aside .asiv,
#Galerie aside .asiv,
#Kontakt aside .asiv,
#kofo aside .asiv,
#KoDa aside .asiv{
	
	opacity: 0;
	transform: scale(0)translateX(500px);
	transition: all 1s ;
	
	}
#pers1:checked ~ #persD aside .asiv,
#start1:checked ~ #start aside .asiv,
#ausb1:checked ~ #Ausb aside .asiv,
#lauf1:checked ~ #laufb aside .asiv,
#know1:checked ~ #know aside .asiv,
#c4d1:checked ~ #c4d aside .asiv,
#web1:checked ~ #webD aside .asiv,
#gal1:checked ~ #Galerie aside .asiv,
#kofo1:checked ~ #kofo aside .asiv,
#koda1:checked ~ #KoDa aside .asiv{
	
	opacity: 1;
	transform: scale(1)translateX(0);
	transition: all 1s;
    border: #1e1a27 2px solid ;
    box-shadow: -1px 1px 1px rgba(255,255,255,0.3);
	}
#persD,
#start,
#am,
#Ausb,
#laufb,
#know,
#Portfolio,
#c4d,
#webD,
#Galerie,
#Kontakt,
#kofo,
#KoDa{
	opacity: 0;
	
	font-size:18;
	
	}
#pers1:checked ~ #persD,
#start1:checked ~ #start,
#ausb1:checked ~ #Ausb,
#lauf1:checked ~ #laufb,
#know1:checked ~ #know,
#c4d1:checked ~ #c4d,
#web1:checked ~ #webD,
#gal1:checked ~ #Galerie,
#kofo1:checked ~ #kofo,
#koda1:checked ~ #KoDa{
	opacity: 1;
	font-size:18px;
	}	
	#kofo article section form,
    #Galerie article section{
	
		display: none;
	}
	#kofo1:checked ~ #kofo article section form,
    #gal1:checked ~ #Galerie article section{
		display:block;
	}
	
	main{
		position: relative;
		top: 135px;
				
	}
	main h2{
		z-index: 10;
	}
	main article{
		position: absolute;
		left: 0;
		top: 15px;
        width: 65%;
		margin-bottom: 30px;
		}
    main article section{
		padding: 0 8px;
		margin-bottom: 30px;
		}
	main aside{
		position: absolute;
		right: 0;
        top: 15px;
		margin-bottom: 32px;
		width:25%;
	}
	main aside img{
		width: 100%;
		display: block;
		padding: 5px;
		transition: all 1s;
		}
    .gal{}
	
	footer {
		position: fixed;
		bottom: 0;
		line-height: 25px;
		padding-left: 8px;
		}
    
    
}