/* font-family: 'Poppins', sans-serif; */

@font-face {
    font-family: 'tomatoesregular';
    src: url('Font/tomatoes-webfont.woff2') format('woff2'),
         url('Font/tomatoes-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Jaceline';
    src: url('Font/Jaceline.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}





*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-weight: 200;
    
}
    


body{
    background-color: rgb(30, 30, 30);
    margin:0;
    padding:0;
}

#head{    
    background-color: rgb(0, 0, 0); 
    
}

/* #header{                                                       
    background-color: rgb(0, 0, 0); */
   /*  background-image: linear-gradient(rgba(0, 0, 0, 0.7),
        rgba(24, 20, 7, 0.7)),url(Bilder/Banner_Landschaft_01.jpg);    */      /*Hintergrund Bild Header mit verlauf*/
    /* background-position: center;
    background-size: cover;
    position: relative; */

/* } */

/*-----------------------------Navigation-----------------------*/
#header{ 
    
    display: flex;
    flex-direction: row;
    margin:0 auto;
    width: 80%;

    padding: 2% 0;
    justify-content: space-between;
    align-items: center;
}

#logo{    
    flex:25%;
    
    
}
#logo a img{       
    width: 190px;                           /* Größe Logo ändern */
    margin-right: 20px;
    padding: 10px;
}



#menu{    
    z-index: 200;
    display: flex;
    flex:70%;
}


#nav-links{    
    /* background-color: aqua; */     
    flex: 50%;
    text-align: center;                     /* Ausrichtung Navigation */
}

.menupoint{
    list-style: none;                       /* Punkte von Liste entfernen */
    display: inline-block;
    padding: 5px 20px;
        
}

#nav-links ul li a{    
    text-decoration: none;                  /* Unterstreichung entfernen */
    font-size: 1.3em;
}
.menupoint a{
    color: white;
}



#fbinsta {
    background-color: transparent;
    margin:auto;
    flex:20px;
    text-align: right;
    margin-left: 10px;
    padding: 10px;
    
}
#fbinsta ul li{    
    list-style: none;
    display: inline-block;
    position: relative; 
}
#fbinsta ul li a{
    color: white;
    text-decoration: none;
    padding:15px;    
}


#fbinsta ul li a:hover{
    color: hsl(51, 100%, 70%)
}





.menupoint::after{                /* Gelbe Linie wird gezeichnet */
    content: '';                            /* Kein Inhalt weil eine Linie */
    width: 0;                               /* Linie virtuell verschwinden lassen */
    height: 2px;
    background: hsl(51, 100%, 70%);
    display: block;                         /*Damit der Strich im Block auftaucht*/
    margin: auto;
    transition: 0.5s;                       /* Langsames Unterstreichen und aufkommen */
}

.menupoint:hover::after{
    width: 100%;
}

#header .fa.fa-bars, #header .fa.fa-times{          /*Icons für Responsives Design normal verbergen*/                                 
     display: none; 
     
}  





/*---------------Untermenue------------*/

nav ul ul {
    background-color: rgb(0, 0, 0);
    z-index: 20;
    position:absolute;
    margin-top:5px;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s ease-in-out, opacity 0.5s ease-in-out; 
}


#menulinks li:hover ul{
    display: flex;
    flex-direction: column;
    text-align: center;
        
    opacity: 1;
    visibility: visible;      
}

#submenu li{
    list-style:none;     
}

#submenu li a{
    display: block;
    font-weight: 300;
    padding:12px;    
}

#submenu li a:hover{       
    background-color: hsl(51, 100%, 70%);        
    color: black;      
    transition: ease-in-out .6s;
}





/* ----------Responsives Design Menü----------- */

@media(max-width: 650px){                   /*ab dieser pixelzahl wird das Menü aktiv*/
    
    #logo a img{       
        width: 160px;                           /* Größe Logo ändern */
        margin-right: 10px;
        padding: 10px;
    }

    #header .fa.fa-bars{                    /*für das Menü zum aufrufen*/
        display: block;
        padding: 20px;
        color: white;
        cursor: pointer;        
    }
    #header .fa.fa-bars:hover{
        color:hsl(51,100%,70%);
    }


    #menu{                                  /*Das neue Menü*/
        position: absolute;
        background-color: hsl(51, 100%, 70%);
        height: 400px;
        width: 180px;
        top: -400px;
        right: 0;                      /*Menü vorerst verschwinden lassen*/
        
        z-index: 200;
        transition: 0.8s;                   /*Menü langsam reinscrollen*/
    }
    #menu ul li{                       /*Responsives NaviMenü*/
        display: block;
    }

    #menu ul li a{     
            color: black;                     
    }


    #header .fa.fa-times{         
            display: block;
            color:black;
            margin: 10px;
            margin-top:20px;
            padding-left: 10px;
            font-size: 22px;
            cursor: pointer;            
    }

    #header .fa.fa-times:hover{
        color: hsl(230,100%,70%);
    }
        
        

    #nav-links{
        background-color: transparent;
        text-align: left;
    }
    #nav-links ul li a{
        font-weight: 300;
    }
    #nav-links ul li a:hover{
        color:hsl(230,100%,70%)
    }


    #fbinsta {
        position: absolute;                
        background-color: transparent;
        top:270px;
        left:-15px;
    }
    #fbinsta ul li{
        padding: 10px 0px;
    }
    #fbinsta ul li a:hover{
        color: hsl(230,100%,70%);        
    }


    nav ul ul {        
        position:absolute;  
        top:-400px;      
        opacity: 0;
        visibility: hidden;
        transition: visibility 0.5s ease-in-out, opacity 0.5s ease-in-out; 
    }

    #submenu li a{        
        padding:6px; 
        padding-right: 15px;  
        padding-left:15px; 
    }

    #menusubmenuport:hover .submenu{
        background-color: hsl(51, 100%, 70%);
        display: flex;
        flex-direction: column;
        text-align: right;
        position: absolute;
        right: 180px;
        top: 134px;               
    }
    
         
    


}




/*-------------------Gallerie start------------------------------------------------*/

/*----------Fotografieseite start--------------------*/

#gallerygrid{
    width: 100%;      
    display: flex;    
} 
.container{
    width: 100%;
    max-width:100rem;
    margin:auto;
    padding: 2rem;
}
.image-gallery{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap:1.5rem;
    grid-template-areas:    
                            'img-1 img-1 img-3 img-3'
                            'img-2 img-4 img-4 img-5'
                            'img-2 img-6 img-6 img-5'
                            'img-8 img-8 img-9 img-10'
                            'img-7 img-7 img-9 img-10'
                            ; 

}
.image-gallery a{
    width:100%;
    height:25rem;    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.image-gallery a i{
    color: rgba(0, 0, 0, 0.8); 
    font-size:2rem;
    position:relative;
    z-index: 100;
    padding: 1rem 3rem;
    border: 2px solid rgba(0, 0, 0, 0.8);
    border-radius: .4rem;
    opacity: 0;
    transition: opacity .7s;
}

.image-gallery a::before{
    content:'';
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: hsl(51, 100%, 75%,.5);
    opacity: 0;
    transition:opacity .7s;
}

.image-gallery a:hover i,
.image-gallery a:hover::before{
    opacity: 1;
}

.img-1{
    grid-area: img-1;
    background-image: url("Bilder/Harttung_Gallery_DigitalArt_01.jpg");
}
.img-2{
    grid-area: img-2;
    min-height: 51.5rem;
    background-image: url("Bilder/Harttung_Gallery_DigitalArt_02.jpg");
}
.img-3{
    grid-area: img-3;
    
    background-image: url("Bilder/Harttung_Gallery_DigitalArt_03.jpg");
}
.img-4{
    grid-area: img-4;    
    background-image: url("Bilder/Harttung_Gallery_DigitalArt_04.jpg");
}
.img-5{
    grid-area: img-5;
    min-height: 51.5rem;
    background-image: url("Bilder/Harttung_Gallery_DigitalArt_05.jpg");
}
.img-6{
    grid-area: img-6;    
    background-image: url("Bilder/Harttung_Gallery_DigitalArt_06.jpg");
}
.img-7{
    grid-area: img-7;
    background-image: url("Bilder/Harttung_Gallery_DigitalArt_07.jpg");
}
.img-8{
    grid-area: img-8;
    background-image: url("Bilder/Harttung_Gallery_DigitalArt_08.jpg");
}
.img-9{
    grid-area: img-9;
    min-height: 51.5rem;
    background-image: url("Bilder/Harttung_Gallery_DigitalArt_09.jpg");
}
.img-10{
    grid-area: img-10;
    min-height: 51.5rem;
    background-image: url("Bilder/Harttung_Gallery_DigitalArt_10.jpg");
}

@media(max-width: 1000px){
    .image-gallery{        
        grid-template-areas:    
                                'img-1 img-1 img-3 img-3'
                                'img-2 img-4 img-4 img-5'
                                'img-2 img-5 img-6 img-6'
                                'img-7 img-8 img-8 img-8'
                                'img-9 img-9 img-9 img-10'
                                ;       
    
    }
    .image-gallery a{
        height:20rem;
    }
    
    .img-2,
    .img-5,
    .img-9,
    .img-10{
        min-height:41.5rem;
    }
    
}

@media(max-width: 700px){
    .image-gallery{
        grid-template-areas:    
                            'img-1 img-1 img-1 img-1'                            
                            'img-3 img-3 img-3 img-3'
                            'img-2 img-2 img-2 img-2'
                            'img-4 img-4 img-4 img-4'
                            'img-5 img-5 img-5 img-5'
                            'img-6 img-6 img-6 img-6'
                            'img-7 img-7 img-7 img-7'
                            'img-8 img-8 img-8 img-8'
                            'img-9 img-9 img-9 img-9'
                            'img-10 img-10 img-10 img-10'
                            ; 
    }
    .image-gallery a,
    .img-2,
    .img-5,
    .img-9,
    .img-10{
        min-height: 25rem;
        height: 30rem;
    }
}

@media(max-width: 500px){
    .image-gallery{
        grid-template-areas:    
                            'img-1 img-1 img-1 img-1'                            
                            'img-3 img-3 img-3 img-3'
                            'img-2 img-2 img-2 img-2'
                            'img-4 img-4 img-4 img-4'
                            'img-5 img-5 img-5 img-5'
                            'img-6 img-6 img-6 img-6'
                            'img-7 img-7 img-7 img-7'
                            'img-8 img-8 img-8 img-8'
                            'img-9 img-9 img-9 img-9'
                            'img-10 img-10 img-10 img-10'
                            ; 
    }
    .image-gallery a{
        min-height: 13rem;
        height: 18rem;
    }
    .container{
        padding: 1.3rem;
    }
}





/*-------Kontakt Form start--------------------*/

#Kontakt{
    position: relative;
    display: block;
    margin: auto;
    text-align: center;
    /* background-color: hsl(0, 100%, 51%);  */
    padding: 25px;
    
}


.Kontakt-box p{
    display: block;
    position: relative;
    margin: auto;
    color: white;
    
    padding-bottom: 30px;
   
}

/*---Kontakt Knopf gestaltung---*/

.contact-btn{                               
    display: inline-block;
    text-decoration: none;
    color: white;
    margin: 10px;
    border: 1px solid hsl(51, 100%, 70%);
    padding: 12px 34px;
    font-size: 20px;
    background: transparent;
    position: relative;
    cursor: pointer;                                /* Mauscursor ändern */
}

.contact-btn:hover{                             /* Kontakt knopf beim drüberfahren */
    color: black;
    background-color: hsl(51, 100%, 70%);
    transition: 0.3s;
}

/*-------Kontakt Form start--------------------*/



/*---------------------Gallerie ende----------------------*/


h2{
    font-family: 'tomatoesregular';
    line-height: 2em;
    color: rgb(255, 255, 255);
    font-size: 40px;
    font-weight: 600;
}

p{
    color: #777;
    font-weight: 300;
    padding: 10px;
}

#Pfeilnachoben{
    text-align: center;
    margin-top: 4%;
    margin-bottom: 10px;
}

/*---------------Fusszeile---------------*/

.footer{
    background-color: rgb(20, 20, 20);
    width: 100%;
    text-align: center;
    padding: 15px 0;

}



.icon .fa{
    color: white;
    margin: 0 10px;
    cursor: pointer;
    padding: 5px 0;
}
.icon a{
    text-decoration: none;
}



#Infos{
    margin: 10px;
    
}
#Infos a{
    color: rgb(255, 255, 255);
    font-size: 1.3em;
    text-align: center;
    padding: 5px;
}



#RechtlicheListe li{
    list-style: none;
    display: inline;
    margin: 20px;
    
}
#RechtlicheLinks ul li a{
    text-decoration: none;
    color:#777;
    list-style: none;
}

#RechtlicheLinks ul li a:hover{
    font-style: italic;
}