/********************************* footer ******************************************************/
footer {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: -600px;
    background-color: #212121; /*ddd*/
    height: 600px;
    width: 100%;
    z-index: 605;
}



footer p { font-weight: 100;  }

.footerHeadline { width: 80%; margin: 0 auto; }
.footerHeadline h2 { text-align: center; margin-top: 0.5em; font-size: 200%; color: #2e86ab; font-weight: 200; }
.footerHeadline h3 { text-align: center; margin-top: 0.5em; font-size: 125%; color: #2e86ab; font-weight: 200; }
    

.footerContainer {
    position: relative;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 2.5em;
    padding-top: 2.5em;
    border-top: 1px groove #808080;
}

.fBox { position: relative; width: 22%; height: auto; }
.fBox h3 { color: #2e86ab; line-height: 100%; font-size: 100%; margin-bottom: 2.0em; margin-top: 1em; }
/*.fBox p { color: #aaa; font-size: 80%; line-height: 175%; font-weight: 300; } */
.fBox p { color: #aaa; line-height: 175%; font-weight: 300; } 
.fBox a { text-decoration: none; color: #2e86ab; }

.fooImpress nav ul { padding-inline-start: 0em; }
.fooImpress nav ul li { list-style: none; }
.fooImpress nav ul li:hover { cursor: pointer; }
.fooImpress nav ul li:hover a { color: #2e86ab; }
.fooImpress nav ul li div { display: none; }
.fooImpress nav ul li a {
        color: #aaa; 
        line-height: 150%;
        text-decoration: none;
        font-size: 80%;
        -moz-transition: all 1.5s ease;
        -webkit-transition: all 1.5s ease;
        -o-transition: all 1.5s ease;
        transition: all 1.5s ease;
}
.fBox:nth-child(2) img { width: 1.0em; height: 1.2em; margin-right: 0.5em; }
.fBox:first-child { width: 25%; }
.fBox:nth-child(2) { width: 22%; }
.fBox:nth-child(3) { width: 16%; }
.fBox:nth-child(4) { width: 16%; }
.listMediaItem { 
    width: 2.5em; 
    height: 2.5em; 
    -moz-transition: all 1s ease; 
    -webkit-transition: all 1s ease, -webkit-transform 2s;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.listMedia { flex-direction: column; }
.listMediaItem:nth-child(2) { margin-top: 1em; }
.listMediaItem:nth-child(3) { margin-top: 1em; }

.listMediaItem:nth-child(1):hover { background-image: url("../../images/logo/xing-logo_on.svg"); }
.listMediaItem:nth-child(2):hover { background-image: url("../../images/logo/linkedin_on.svg"); }
.listMediaItem:nth-child(3):hover { background-image: url("../../images/logo/facebook_on.svg"); }
    
.listMedia { display: flex; align-items: flex-start; }
.listMediaItem { background-repeat: no-repeat; background-size: 100% 100%; background-position-y: center; background-position-x: center; }

.listMediaItem:nth-child(1) { background-image: url("../../images/logo/xing-logo_off.svg"); }
.listMediaItem:nth-child(2) { background-image: url("../../images/logo/linkedin_off.svg"); }
.listMediaItem:nth-child(3) { background-image: url("../../images/logo/facebook_off.svg"); }


@media only screen and (min-width: 360px) and (orientation : portrait ) 
{
    footer { margin-top: -250vh; height: 250vh; }
    .footerContainer { display: flex; flex-direction: column; border-top: #aaa solid 1px; }
    .footerHeadline { font-size: 170%; padding-top: 2em; padding-bottom: 2em; }
    .fBox:nth-child(1) { width: 100%; margin-bottom: 4em; border-bottom: 1px solid #aaa; padding-bottom: 4em; }
    .fBox:nth-child(2) { width: 100%; margin-bottom: 4em; border-bottom: 1px solid #aaa; padding-bottom: 4em; }
    .fBox:nth-child(3) { width: 100%; margin-bottom: 4em; border-bottom: 1px solid #aaa; padding-bottom: 4em; }
    .fBox:nth-child(4) { width: 100%; }
    .fBox h3 { line-height: 100%; font-size: 180%; margin-bottom: 1.0em; margin-top: 1em; width: 100%; text-align: center; }
    .fBox p { text-align: center; }
    .fBox p a { font-size: 110%; }
    .fooImpress nav ul { padding-inline-start: 0em; display: flex; flex-direction: row;  width: 100%; justify-content: space-between; flex-wrap: wrap;  }
    .fooImpress nav ul li { min-width: 45%; margin-top: 2.5em; }
    .fooImpress nav ul li:first-child { margin-left: 0em; }
    .fooImpress nav ul li a { font-size: 160%; }
    .listMedia { flex-direction: row; width: 60%; justify-content: space-between; margin: 0 auto; margin-top: 5em; }
    .listMediaItem:nth-child(2) { margin-top: 0em; }
    .listMediaItem:nth-child(3) { margin-top: 0em; }
}

@media only screen and (min-width: 414px) and (orientation : portrait ) 
{
    footer { margin-top: -210vh; height: 210vh; }
}


/* anpassungen fuer tablets */
@media only screen and (min-width: 768px) and (orientation : portrait ) 
{
    footer { margin-top: -180vh; height: 180vh; }
    .footerContainer { display: flex; flex-direction: column; border-top: #aaa solid 1px; }
    .footerHeadline { font-size: 170%; padding-top: 2em; padding-bottom: 2em; }
    .fBox:nth-child(1) { width: 100%; margin-bottom: 4em; border-bottom: 1px solid #aaa; padding-bottom: 4em; }
    .fBox:nth-child(2) { width: 100%; margin-bottom: 4em; border-bottom: 1px solid #aaa; padding-bottom: 4em; }
    .fBox:nth-child(3) { width: 100%; margin-bottom: 4em; border-bottom: 1px solid #aaa; padding-bottom: 4em; }
    .fBox:nth-child(4) { width: 100%; }
    .fBox h3 { line-height: 100%; font-size: 180%; margin-bottom: 1.0em; margin-top: 1em; width: 100%; text-align: center; }
    .fBox p { text-align: center; }
    .fBox p a { font-size: 110%; }
    .fooImpress nav ul { padding-inline-start: 0em; display: flex; flex-direction: row;  width: 100%; justify-content: space-between; }
    .fooImpress nav ul li { min-width: 10%; margin-top: 0em; }
    .fooImpress nav ul li:first-child { margin-left: 0em; }
    .fooImpress nav ul li a { font-size: 160%; }
    .listMedia { flex-direction: row; width: 60%; justify-content: space-between; margin: 0 auto; margin-top: 5em; }
    .listMediaItem:nth-child(2) { margin-top: 0em; }
    .listMediaItem:nth-child(3) { margin-top: 0em; }
}


@media only screen and (min-width: 768px) and (orientation : landscape ) 
{
    footer { margin-top: -80vh; height: 80vh; }
    .footerHeadline h2 { font-size: 250%; }
    .footerHeadline h3 { font-size: 150%; }
    .fBox h3 { font-size: 125%; font-weight: 300; }
    .fBox p { font-size: 100%; }
    .fooImpress nav ul li { margin-top: 1em; }
    .fooImpress nav ul li:first-child { margin-top: 0em; }
    .fooImpress nav ul li a { font-size: 105%; }
}

@media only screen and (min-width: 1600px) and (orientation : landscape ) 
{
    footer { margin-top: -60vh; height: 60vh; }
    .footerHeadline { padding-top: 1.5em; padding-bottom: 1.5em; }
    .footerHeadline h2 { font-size: 200%; }
    .footerHeadline h3 { font-size: 125%; }
    .fBox h3 { font-size: 100%; font-weight: 300; }
    .fBox p { font-size: 80%; }
    .fooImpress nav ul li { margin-top: 0.5em; }
    .fooImpress nav ul li a { font-size: 80%; }
    .fooImpress nav ul li:first-child { margin-top: 0em; }
}