@font-face 
{ 
    font-family: "PoppinsBold"; 
    src: url("../fonts/Poppins-Bold.ttf"); 
}

@font-face 
{ 
    font-family: "PoppinsSemiBold"; 
    src: url("../fonts/Poppins-SemiBold.ttf"); 
}

/*
@font-face {
    font-family: "InterRegular";
    src: url("../fonts/Inter-Regular.ttf");
}

@font-face {
    font-family: "InterMedium";
    src: url("../fonts/Inter-Medium.ttf");
}

@font-face {
    font-family: "InterSemiBold";
    src: url("../fonts/Inter-SemiBold.ttf");
}

@font-face {
    font-family: "InterBold";
    src: url("../fonts/Inter-Bold.ttf");
}
*/
/*------------Quicksand-------------*/

@font-face {
    font-family: "QuicksandRegular";
    src: url("../fonts/Quicksand/static/Quicksand-Regular.ttf");
}

@font-face {
    font-family: "QuicksandMedium";
    src: url("../fonts/Quicksand/static/Quicksand-Medium.ttf");
}

@font-face {
    font-family: "QuicksandSemiBold";
    src: url("../fonts/Quicksand/static/Quicksand-SemiBold.ttf");
}

@font-face {
    font-family: "QuicksandBold";
    src: url("../fonts/Quicksand/static/Quicksand-Bold.ttf");
}

:root 
{   --white: #FFF;
    --lightGray: #f0f0f0;
    --middleGray: #e5e5e5;
    --darkGray: #999997;
    --darkGrayTransparent: #99999785;
    --buttonBackgroungTransparent: #99999798;
    --black: #000;
    /* --lightGreen: #B0A43C; */
    --lightGreen: #b4474d;
    --middleGreen: #807C5E;
    --darkGreen: #3D3A25;
    --navigationBackground: #fff;
    --runaway: #E34C41;
    --ambient: #A68B4E;
    --logo: #807C5E;

    --h0: 4.6vw;
    --h1: 4.04vw;
    --h2: 1.6vw;
    --h2hover: 1.4vw;
    --h3: 1.15vw;
    --h4: 1vw;
    --li: 1.15vw;
    --lihover: 1.3vw; 
    --p: 0.9vw;
    --phovergross: 1vw;
}

*
{
    margin: 0em ;
}

body
{   background-color: var(--white);
    /*margin: 2em auto;*/
}

/*---------------------general-styling--------------------------*/

a
{   text-decoration: none;
    font-size: var(--p);
    color: var(--darkGreen);
}

#current-page
{    color: var(--middleGray);  }

h1 { font-size: var(--h1); }

h2 { font-size: var(--h2); }

h3, button{ font-size: var(--h3);}

li {font-size: var(--li);}

p, td { font-size: var(--p); }


/*------------------------Menüleiste-------------------------*/
header 
{   font-family:  QuicksandSemiBold, Arial, Helvetica, sans-serif;
    color:           var(--black); 
    background-color:var(--navigationBackground);
    position: fixed; 
    width:    100%;
    height:   12vh;
    top:      0em;
    z-index:  1;
}

header ul
{   font-family:    QuicksandBold, Arial, Helvetica, sans-serif;  }


header #logo 
{   display:       inherit;
    width:         1.9vw;
    border-radius: 1.5vw;
    margin:        0.7vw;
    /*box-shadow:    0.04vw 0.05vw 0.2vw 0.05vw var(--middleGray);*/

    transition: width 0.3s, margin 0.3s ;
    transition-timing-function: ease-in-out;
}

header:hover #logo
{   width:  2.5vw;
    margin: 0.4vw;
}

#menu-container
{   display:     flex;
    align-items: center; 
    padding:     0vw 17vw;
}

#menu-items
{
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    width:           65vw;

}

.menu-item:first-child 
{
    display:     flex;
    align-items: center;
    justify-content: center;
    flex-wrap:   nowrap;
    width:       20vw; 
}


.menu-item
{   flex-wrap: wrap;   }

.menu-item ul 
{   display:         flex;
    justify-content: flex-end;
    align-items:     center;
    list-style:      none;
    flex-wrap:       wrap;
    width:           30vw;
}

.menu-item ul li 
{   padding-left: 2em;
    color:        var(--black);
    font-size:    var(--li);
    transition:   color 0.8s, font-size 0.8s;
}

.menu-item ul li:hover
{
    color:     var(--middleGray);
    font-size: var(--lihover);
}

.menu-item ul li:active, .menu-item a:active
{    color: var(--black);  }

#line
{   position: absolute;
    height:   0.7vw;
    bottom:   -0.7vw;
    left:     0em;
    width:    100%;
    color:            var(--darkGrayTransparent);
    background-color: var(--darkGrayTransparent);
}
/*-------------------------------------Mainpart----------------------------------*/

main
{   padding-top: 7em;
    font-family: QuicksandMedium, Arial, Helvetica, sans-serif;
    line-height: 160%;
}

main h2
{   color: var(--lightGreen);
    padding-bottom: 0.6em;
    font-family: QuicksandBold, Arial, Helvetica, sans-serif;
}

.flex-container
{   display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    overflow-x: hidden;
    width: 100%;
}

.flex-item
{   /*height: 15%;*/
    width: 100%;
    padding: 5% 20%;
    margin: 0em 20em;
    color: var(--black);
}

/*-----------------------------------1.Part--------------------------------------*/





#first-section
{   display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 50%;
}

#first-section div
{
    margin-left: 4em;
}

#first-section #portrait
{   width:         15vw;
    border-radius: 50%;
    box-shadow:    0.05vw 0.1vw 0.9vw 0.4vw var(--middleGray);

    transition: width 2s;
}

#first-section:hover #portrait
{
    width: 17vw;
}

#first-section h2, #second-section h2
{   font-size: var(--h2);
    transition: font-size 2s;
}

#first-section:hover h2
{    font-size: var(--h2hover); }


#second-section:hover h2
{    font-size: var(--h2hover); }

#second-section
{   display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--lightGray);
    box-shadow:    0.05vw 0.02vw 1vw 0.01vw var(--middleGray);
    margin-bottom: 0px;
}

#second-section div
{
    width: 50%;
}




/*-----------------------------Footer---------------------------------------*/

footer
{   
    display:         flex;
    flex-direction: column;
    align-items:     center;
    justify-content: center;
    font-family: QuicksandSemiBold, Arial, Helvetica, sans-serif;
    line-height: normal;
    background-color:var(--navigationBackground);
    margin: 0em 0em;
}

footer table
{   margin:        3vh;
    width:         40vw;
    height:        4vw;
    border-radius: 1em;
}

footer td
{   color:          var(--black);
    text-align:     center;
    vertical-align: middle;
}

footer tr:first-of-type td
{   font-size: var(--h3);  }

#line-footer
{   height: 0.7vw;
    width: 100%;
    color: var(--darkGrayTransparent);
    background-color: var(--darkGrayTransparent);
}

footer img
{
    width: 4vw;
    margin-bottom: 0.2em;
}

footer tr td#impressum-link
{   color: var(--black);
    border-radius: 5em;
    transition: background-color 1s;
}

footer tr td#impressum-link:hover
{   color: var(--lightGreen); 
    background-color: var(--lightGray);  
}

/*----------------RESPONSE-------------------------------*/

/*-------- MAX 1400PX DESKTOPS (kleine pcs)-----------*/
@media (max-width:1400px) {
   
    :root 
    {   --h0: 4.9vw;
        --h1: 4.5vw;
        --h2: 2.4vw;
        --h2hover: 2.6vw;
        --h3: 1.5vw;
        --li: 1.5vw;
        --lihover: 1.8vw; 
        --p: 1.2vw;
    }

    /*--------HEADER--------*/

    header #logo 
    {   width:  5.5vw;
        height: 5.5vw;
        margin: 1.3vw;
    }

    header:hover #logo
    {   width:  6vw;
        height: 6vw;
        margin: 1vw;
    }

    #menu-items
    {   width: 70vw;  }

    /*#name, #navigation
    {   width:60%;  }*/

    .menu-item ul 
    {  width: 40vw;  }

    /*---------MAIN------------*/
    main
    {   padding-top: 13vh;    }

   
}

/*----------------- MAX 992PX DESKTOPS (smartphones)-----------*/

@media (max-width:992px) {
   
    :root 
    {   --h0: 7.0vw;
        --h1: 5.5vw;
        --h2: 2.0vw;
        --h2hover: 2.8vw;
        --h3: 2.8vw;
        --h4: 2.5vw;
        --li: 1.5vw;
        --lihover: 1.8vw; 
        --p: 1.5vw;
    }

    /*-----------------MENÜLEISTE--------------*/
    header
    {
        height: 13vh;
    }

    header #logo 
    {   width: 8.0vw;
        height: 8.0vw;
        margin: 3.9vw;
    }

    header:hover #logo
    {   width: 9.0vw;
        height: 9.0vw;
        margin: 3.9vw;
    }


    #menu-container
    {   padding: 0vw 11vw;  }

    #menu-items
    {   width: 80vw;}

    .menu-item:first-child 
    {   width: 22vw;}

    .menu-item:last-child ul li 
    {   height: 3vh;}


    #line
    {   height: 2.0vw;
        bottom: -2.0vw;
    }

   

    .menu-item ul 
    {
        flex-direction: column;
        align-items: flex-end;
        text-align: end;
    }

    .menu-item ul li 
    {   margin: 0.15em;   }


    /*----------------MAINPART-------------------*/

    main
    {   padding-top: 13vh;    }


    .flex-item
    {   height: 85vw; /*noch ändern----------------*/
        margin: 6vw 0vw;
    }
    .flex-item:hover
    {   height: 85vw;   }

   #first-section
   {
        height: 20vw;
   }

    
    /*--------------SECOND-SECTION---------------*/
    #second-section div
    {   width:       80%;
        line-height: 3.8vw;  
    }
    
    /*------------footer------------*/
    footer table
    {
        width: 90%;
    } 
}