@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: 7vw;
    font-family: QuicksandMedium, Arial, Helvetica, sans-serif;
}

main h1
{   font-family: QuicksandBold, Arial, Helvetica, sans-serif;
}

main h2
{   font-family: QuicksandBold, Arial, Helvetica, sans-serif;
    font-size: var(--h2);
    margin-bottom: 0.5vw;
}

main p
{  line-height: 140%;}

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

.flex-item
{   height:  18vw;
    width:   100%;
    padding: 2vw 100%;
    margin:  2vw 0vw;
    color:   var(--lightGray);

    box-shadow: 0.9vw 0.5vw 1.7vw 0.5vw var(--darkGray);
    transition: height 1.2s, box-shadow 1.2s;
}

.flex-item:first-child
{   box-shadow: var(--white);   }

.flex-item:hover
{   height:     17vw;
    box-shadow: 0.9vw 0.5vw 1.7vw 0.5vw var(--middleGray);   
}

.flex-item:first-child:hover
{   height:     17vw;
    box-shadow: 0.9vw 0.5vw 1.7vw 0.5vw var(--white);   
}

.flex-item h1
{   font-size:  var(--h1);
    transition: font-size 2s;
}

.flex-item:hover h1
{   font-size: var(--h0);  }

/*-------------------------ABOUT-ME-------------------------*/

#about-me
{   display:         flex;
    justify-content: flex-start;
    align-items:     center;
    width:           65%;
    height:          12em;
}

#information
{   color:            var(--black);
    background-color: var(--white);
    width:            40%;
    margin-left:      2vw;
}

#information p
{   margin: 1em 0em; 
    width:  22em;  
}

#information h2
{   color:      var(--lightGreen);
    transition: font-size 2s;
}

#about-me:hover #information h2
{
    font-size: var(--h2hover);
}

#about-me #portrait
{   width:         10vw;
    border-radius: 50%;
    transition:    width 2s, transform 2s;
    box-shadow:    0.04vw 0.05vw 0.6vw 0.2vw var(--middleGray);
}

#about-me:hover #portrait
{   width: 12vw;    }

/*----------------------------------------------Button----------------------------*/

button
{   width:         10vw;
    padding:       0.3vw;
    border-style:  none;
    border-radius: 0.3em;
    margin-top:    0em;

    background-color: var(--buttonBackgroungTransparent);
    font-family:      QuicksandSemiBold, Arial, Helvetica, sans-serif;
    color:            var(--lightGray);

    transition: width 1s, background-color 1s, color 0.5s;
}

button:hover
{   width:            11vw;
    background-color: var(--darkGray);
}

button:active
{   background-color: var(--lightGray);
    color:            var(--darkGray);
}

button::after
{   background-color: var(--buttonBackgroungTransparent);  }


/*-----------------------------------topics-Logo-----------------------*/


.topic-logo
{   display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;

    width:       25%;
    height:      2vw;
    line-height: 3.8vw;
    box-shadow:  #403E2F;

    transition: line-height;
}

.topic-logo h1
{   font-family: PoppinsBold, Arial, Helvetica, sans-serif;   }


.topic-layout
{   display:          flex;
    flex-direction:   column;
    align-items:      flex-start;
    justify-content:  center;
    margin-left:      5em;    
}

/*-----------information-about-projects-text---------*/
.flex-item p
{   margin: 1em 0em;
    width:  32em;
}

/*-----------------GENERAL-THIGHS-BY-PROJECTS------------*/


.project-layout
{   display:         flex;
    /*flex-direction: column;*/
    align-items:     center;
    justify-content: center;
    width:           100%;
    
    background-color:  var(--middleGreen);
}

.project-informations
{   display: flex;
    width: 65%;
}

.project-text
{   margin: 1em;
    width: 80%;
}

.project-text h2
{   margin-top: 1.5vw;    }

 .flex-item-toggle
{   display:          none;
    align-items:      center;
    justify-content:  center;
    color:            var(--black);
    background-color: var(--middleGray);

    margin-top:    -3em;
    margin-bottom: 3em;
    width:         100%;
    box-shadow: 0.9vw 0.5vw 1.7vw 0.5vw var(--darkGray);

    transition: display 0.4s ease;
}

.flex-item-toggle.active {
    display: flex;
} 




.project-information-content
{   display:         flex;
    flex-wrap:       wrap;
    flex-direction:  row;
    align-items:     flex-start;
    justify-content: flex-start;
    width:   100%;
    margin:  0em 5em;
    padding: 2em 0em;
}

.project-videos
{   border-radius: 0.6em;
    box-shadow:    0.3vw 0.3vw 1.2vw var(--darkGray);
    margin: 1em;
    width: 44vw;
    
}

.project-imgs img
{   clear:         both;
    margin:        2em 1em;
    width:         44vw;
    border-radius: 0.6em;
    box-shadow:    0.3vw 0.3vw 1.2vw var(--darkGray);
}

/*----------------------------------------------OneCampus----------------------------*/
#one-campus {
    background-image: url("../img/one-campus/one-campus-background.png");
    background-repeat: no-repeat;
    background-position: 50% 20%;
}

/*----------------------------------------Roadmap to Success -------------------------*/
#roadmap-success {
    background-image: url("../img/roadmap-background-transparent.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

/*----------------------------------------------Huhu----------------------------*/
#huhu-messenger
{   background-image:    url("../img/huhu/huhu-background2.png");
    background-repeat:   no-repeat;
    background-position: 40% 22%;
}

/*----------------------------------------------Runaway----------------------------*/
#runaway
{   background-image:    url("../img/runaway-background.png");
    background-repeat:   no-repeat;
    background-position: 50% 55%;
}

#runaway-video
{   width:  8.9vw;
    margin: 2em 5em 1em 1em;
}

.rewe-img img
{   width:  32vw;   }

/*-------------------------------------------Photosynthese----------------------------*/

#photosynthese
{   background-image:    url("../img/photosynthese-background.png");
    background-repeat:   no-repeat;
    background-position: 50% 50%;
}

#photosynthese-video
{   width: 25vw;
    margin: 2em 4vw 2em 1em;
}

#photosynthese-img img
{   width: 12vw;
    height: 19vw;
}

/*--------------------------------------------heads-up---------------------------*/

#heads-up
{   background-image: url("../img/headsUp-background.png");
    background-repeat: no-repeat;
    background-position: 50% 100%;
}

#heads-up-img-small img
{   width: 30vw;
    box-shadow: var(--white);
}


/*----------------------------------------Ambient-Feedback-------------------------*/

#ambient-experience
{   background-image: url("../img/ambient-feedback-background.png");
    background-repeat: no-repeat;
    background-position: 50% 80%;
}


/*--------------------------------------------------3d---------------------------------*/


#drei-d
{   background-image: url("../img/dreiD-background.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
}


/*-------------------------mathe---------------------------------*/

#mathe
{   background-image: url("../img/mathe-backgrounds.png");
    background-repeat: no-repeat;
    background-position: 50% 60%;
}


/*-------------------------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: 5em 0em;
    height: 3em;
}

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

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

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(--black); 
    background-color: var(--middleGray);  
}


/*------------------------------------IMPRESSUM-----------------*/

#impressum
{
    display: flex;
    flex-direction: column;
    width: 65%;
    height: 60vh;
    padding-top: 6em;
    font-family: QuicksandMedium, Arial, Helvetica, sans-serif;
    margin-bottom: 3vw;
}

#datenschutz
{
    display: flex;
    flex-direction: column;
    width: 65%;
    padding-top: 6em;
    font-family: QuicksandMedium, Arial, Helvetica, sans-serif;
    margin-bottom: 3vw;
}

#datenschutz p, #datenschutz li, #datenschutz ul, #datenschutz strong
{
    font-size: var(--p);
    margin-top: 1.2em;
}

#datenschutz h1, #datenschutz h2, #datenschutz h3
{
    margin-top: 1.2em;
}

#impressum p, #impressum li, #impressum ul, #impressum strong
{
    font-size: var(--p);
    margin-top: 0.7em;
}

#impressum h1
{
    font-size: var(--h2);
    margin-top: 1.2em;
}

#impressum h2
{
    font-size: var(--h3);
    margin-top: 0.8em;
}

#impressum h3
{
    font-size: var(--h4);
    margin-top: 0.8em;
}


/*-----------------RESPONSIVE----------------*/

/*-------- 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;  }

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

    /*---------------MAIN----------------*/

    main
    {   padding-top: 5vw;
    }

    #about-me
    {   margin-top: 3vw;  }

    #about-me #portrait
    {   width:  12vw;  }

    #about-me:hover #portrait
    {   width:  13vw;  }

    .flex-item
    {   height: 22vw;
        margin: 1.7vw 0vw;
    }

    .flex-item:hover
    {   height: 20.5vw;   }

    .flex-item-toggle
    {   margin-top:    -1.7vw;
        margin-bottom: 1.7vw;
    }
}

/*----------------- 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;
    }

    /*----------------MAINPART-------------------*/
    main
    {   padding-top: 14vh;     }

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

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

    #about-me.flex-item
    {   margin-bottom: -1vw; }

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

   
    
    /*-----------info-über-mich---------*/

    #about-me
    {
        height: 38vw;
        width: 80%;
    }

    #information
    {   width: 60%;  }
    #information p
    {   width: 100%;
        line-height: 3.6vw;  
    }

    #about-me #portrait
    {   width: 30vw;
        margin: 2vw;
    }
    #about-me:hover #portrait
    {  width: 31vw;  }


    /*-----------BUTTON---------------*/
    button
    {   width:    30vw;
        padding:  4vw;
        margin: 1.5em 0em;
        border-radius: 0.6em;
    }

    button:hover
    {   width:  30vw;
        background-color: var(--buttonBackgroungTransparent); 
    }

    /*------------projekte--------------*/

    .project-layout
    {
        flex-direction: column;
    }

    .topic-logo
    {   width: 100%;
        height: 10vw;
        margin: 3vw;
        line-height: 8vw;
    }

    .topic-layout
    {
        justify-content: center;
        align-items: flex-start;
        margin: 0% 15%;
    }

    .flex-item p
    {
        width: 100%;
        margin: 2vw 0vw;
    }

    .flex-item-toggle
    {
        margin-top:    -6vw;
        margin-bottom: 6vw;
    }

    /*-------project-informations-----------*/

    .project-informations
    {   width: 95%;    }

    .project-text
    {   width: 100%;    }

    .project-imgs img
    {   width: 75vw;    }

    .project-videos
    {   width: 75vw;    }

    /*extra img und videos*/
    #runaway-video
    {   width:  35vw;
    }
    .rewe-img img
    {   width:  75vw;   }


    #photosynthese-video
    {   width: 75vw;
    }
    #photosynthese-img img
    {   width: 37vw;
        height: 56.3vw;
    }


    #heads-up-img-small img
    {   width: 75vw;
        margin-left: 1em;
    }

    /*------------footer------------*/
    footer table
    {
        width: 100%;
    }
}



/*---------------MAX 768 TABLETS------------*/
/*
@media (max-width:768px) {
   
    :root 
    {   --h0: 5.2vw;
        --h1: 4.7vw;
        --h2: 2.2vw;
        --h2hover: 2.0vw;
        --h3: 2.0vw;
        --h4: 1.7vw;
        --li: 1.7vw;
        --lihover: 1.85vw; 
        --p: 1.6vw;
    }

    header
    {
        height: 17vh;
    }

    main
    {   padding-top: 5vw; 
        background-color: lightblue;
    }

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

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

    #about-me.flex-item
    {   margin-top: 5vw; }

    #about-me #portrait
    {   width: 18vw;   }
    
    .project-layout
    {   flex-direction: column;  }

    .flex-item
    {   height: 42vw;
        margin: 1.4vw 0vw;
    }

    .flex-item:hover
    {   height: 41vw;   }

    .topic-logo
    {
        font-size: var(--h2);
        margin: 2vw 0vw;
        line-height: 4.5vw;
    }
    .topic-layout
    {   margin: 1vw 0vw;  }

    .flex-item-toggle
    {   margin-top:    -1.4vw;
        margin-bottom: 1.2vw;
    }

    button
    {   width:    15vw;
        margin-top: 1vw;
        padding:  0.4vw;
    }

    button:hover
    {   width:  14vw; }

    .project-informations
    {   width: 90%;
    }


    .project-text
    {   width: 90%;    }

    .project-imgs img
    {   width: 62vw;    }

    .project-videos
    {   width: 62vw;    }

    /*extra img und videos//
    #runaway-video
    {   width:  20vw;
    }
    .rewe-img img
    {   width:  62vw;   }


    #photosynthese-video
    {   width: 62vw;
    }
    #photosynthese-img img
    {   width: 27vw;
        height: 36.3vw;
    }


    #heads-up-img-small img
    {   width: 62vw;
        margin-left: 1em;
    }
}
*/
/*---------------MAX 576 Smartphones------------*/
/*
@media (max-width:576px) {
   
    :root 
    {   --h0: 5.2vw;
        --h1: 4.7vw;
        --h2: 2.2vw;
        --h2hover: 2.0vw;
        --h3: 2.0vw;
        --h4: 1.7vw;
        --li: 1.7vw;
        --lihover: 1.85vw; 
        --p: 2.0vw;
    }

    header
    {
        height: 1vh;
    }

    main
    {   padding-top: 5vw; 
        background-color: black;
    }

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

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

    #about-me.flex-item
    {   margin-top: 5vw; }

    #about-me #portrait
    {   width: 18vw;   }
    
    .project-layout
    {   flex-direction: column;  }

    .flex-item
    {   height: 42vw;
        margin: 1.4vw 0vw;
    }

    .flex-item:hover
    {   height: 41vw;   }

    .topic-logo
    {
        font-size: var(--h2);
        margin: 2vw 0vw;
        line-height: 4.5vw;
    }
    .topic-layout
    {   margin: 1vw 0vw;  }

    .flex-item-toggle
    {   margin-top:    -1.4vw;
        margin-bottom: 1.2vw;
    }

    button
    {   width:    15vw;
        margin-top: 1vw;
        padding:  0.4vw;
    }

    button:hover
    {   width:  14vw; }

    .project-informations
    {   width: 90%;
    }


    .project-text
    {   width: 90%;    }

    .project-imgs img
    {   width: 62vw;    }

    .project-videos
    {   width: 62vw;    }

    /*extra img und videos//
    #runaway-video
    {   width:  20vw;
    }
    .rewe-img img
    {   width:  62vw;   }


    #photosynthese-video
    {   width: 62vw;
    }
    #photosynthese-img img
    {   width: 27vw;
        height: 36.3vw;
    }


    #heads-up-img-small img
    {   width: 62vw;
        margin-left: 1em;
    }
}