/*html {
    background-color: #E6F6FF;
}*/

html {
    min-height: 100%;
}


/*
* {
  line-height: 150%;
}
*/

body {
    min-height: 100vh;
    margin: 0px;
    font-family: 'Roboto', sans-serif;
    /*font-family: Times New Roman, Times, Arial;*/
    display: flex;
    flex-direction: column;
}

header {
    width: 100%;
    background-color: #0D92D5;
    margin: 0 auto;
}

.logo {
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    background-color: #0D92D5;
    top: 0;
    z-index: 1;
}

.logo-image {
    width: 160px;
    margin-top: 31px;
}


/*Anzeige des Mobilen Menu verhindern*/

.show-menu {
    display: none;
}


/*Anzeige des Mobilen Menu verhindern*/

#show-menu {
    display: none;
}

.inhalt {
    flex-grow: 2;
}

.inhalt a {
    color: black;
}


/*Formatierung für die Navigation ab 900px aufwärts*/

@media screen and (min-width: 900px) {
    nav {
        width: 930px;
        margin: 0 auto;
        text-align: center;
        /*background-color: #3C9DD0;*/
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

.banner ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

.banner li {
    padding: 0px;
    margin: 0px;
}

.dots {
    position: absolute;
    left: 0;
    right: 40px;
    bottom: 10px;
}

.dots li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    text-indent: -999em;
    border: 2px solid #fff;
    border-radius: 6px;
    cursor: pointer;
    opacity: .4;
    -webkit-transition: background .5s, opacity .5s;
    -moz-transition: background .5s, opacity .5s;
    transition: background .5s, opacity .5s;
}

.dots li.active {
    background: #fff;
    opacity: 1;
}

#teaservideo {
    width: 100% !important;
    display: none;
}

#teaserimage {
    width: 100%;
    height: auto;
}

.bild-container {
    margin: 20px;
    text-align: center;
}

.geschichte img {
    height: auto;
    width: auto;
    max-width: 300px;
    max-height: 200px;
}


/*Formatierung für die Navigation ab 900px abwärts*/

@media screen and (max-width: 900px) {
    nav {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        /*background-color: #3C9DD0;*/
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

nav li {
    display: inline;
    font-weight: bold;
    margin-left: 10px;
    margin-right: 10px;
}

nav a {
    text-decoration: none;
}

nav a li {
    color: #FFFFFF;
}

.referenzen-navbar-container,
.referenzen-navbar-container .referenzen-navbar {
    background-color: black;
}

.referenzen-navbar-container .referenzen-navbar {
    display: flex;
    flex-direction: row;
    padding: 0px;
    align-items: center;
}

.referenzen-navbar-container .referenzen-navbar .back-button {
    flex-grow: 2;
    margin-left: 33px;
    display: flex;
}

.referenzen-navbar-container .referenzen-navbar .back-button img {
    height: 15px;
    width: 15px;
    margin-right: 10px;
}

.referenzen-navbar-container .referenzen-navbar .back-button a {
    text-decoration: none;
    display: flex;
    align-items: center;
    width: auto;
    flex-grow: 0;
}

.referenzen-navbar-container .referenzen-navbar .referenz-titel {
    margin-right: 33px;
}

.referenzen-navbar-container .referenzen-navbar .back-button .back-button-icon {
    height: 20px;
    width: 20px;
}

.referenzen-navbar-container .referenzen-navbar,
.referenzen-navbar-container .referenzen-navbar a {
    color: white
}

.leistungen {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.leistung {
    display: flex;
    align-items: center;
}

.hide-content {
    display: none !Important;
}

div.sl-wrapper.simple-lightbox {
    z-index: 12;
}

div.sl-overlay {
    z-index: 11;
}


/*Anzeige der Referenzauswahl wenn 2 Bilder nebeneinander passen*/

@media screen and (min-width: 930px) {
    .banner {
        position: relative;
        width: 840px;
        height: 420px;
        overflow: auto;
        padding: 0px;
        margin: 0 auto;
    }
    .banner ul li {
        float: left;
        padding: 0px;
        margin: 0px;
        min-height: 200px;
        -webkit-background-size: 100% auto;
        -moz-background-size: 100% auto;
        -o-background-size: 100% auto;
        -ms-background-size: 100% auto;
        background-size: 100% auto;
        background-position-y: -75px;
        box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .1);
    }
    #video-container {
        display: grid
    }
    .teaser {
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .team {
        padding-top: 20px;
    }
    .swiper-container {
        width: 100%;
        height: 420px;
    }
    .swiper-slide {
        background-position: center;
        background-size: cover;
    }
    .swiper-slide img {
        width: 100%;
        height: 420px;
    }
    .inhalt {
        width: 900px;
        margin: 0 auto;
        background-color: #FFFFFF;
        text-align: left;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 50px;
        padding-top: 20px;
    }
    .inhalt section {
        width: 840px;
        margin: 0 auto;
    }
    .inhalt .referenzenunterteilung {
        width: 880px;
        text-align: center;
        padding-top: 20px;
    }
    .inhalt .team .mitarbeiter {
        border: 1px solid #0D92D5;
        display: flex;
        flex-direction: row;
        padding: 20px;
        margin-bottom: 20px;
    }
    .inhalt .team .mitarbeiter .person {
        flex-grow: 10;
    }
    .inhalt .team .mitarbeiter .person p {
        margin: 0;
    }
    .inhalt .team .mitarbeiter .person h3 {
        margin-top: 0px;
    }
    .inhalt .team .mitarbeiter img {
        height: auto;
        width: auto;
        max-width: 300px;
        max-height: 200px;
        margin-left: 20px;
    }
    .referenzenunterteilung div {
        display: inline-block;
        box-sizing: border-box;
        padding-right: 15px;
        padding-left: 15px;
    }
    .referenzenunterteilung img {
        width: 400px;
        height: 250px;
    }
    .inhalt .referenzen {
        width: 100%;
        text-align: center;
        padding-top: 20px;
    }
    .referenzen div {
        padding-bottom: 10px;
        display: inline-block;
        box-sizing: border-box;
    }
    .referenz-bild {
        width: 400px;
        height: 250px;
    }
    .leistung {
        width: 50%;
    }
    .leistung .zertifikat-bild {
        width: auto;
        height: 100px;
    }
    .leistung img {
        padding: 0px 30px;
        height: 60px;
        width: 60px;
    }
    .leistung-text {
        height: 100%;
        flex: 1;
    }
    .partner {
        margin: 20px 0px;
    }
    .partner .partner-bilder-div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 15px;
    }
    .partner .partner-bilder-div img {
        margin: 15px 15px 15px 0px;
        height: 75px;
        width: 200px;
    }
    .partner .partner-bilder-div img#ibbeckers-logo {
        height: 50px;
    }
    /*CSS für den Info-Button
Hier ansetzen!*/
    .einzelne-referenz {
        position: relative;
        padding-right: 15px;
        padding-left: 15px;
        padding-bottom: 30px;
    }
    .info-icon {
        height: 24px;
        width: 24px;
        position: absolute;
        right: 10px;
        bottom: 9px;
        /*dunklerer Ton vom Header
        background-color: #0D92D5;*/
        background-color: #3C9DD0;
        padding: 2px;
        border: 5px solid white;
    }
    /*Hier nochmal gucken wegen anzeigen lassen und nicht*/
    .zusatzinformationen p {
        display: none;
    }
    a.tooltip {
        outline: none;
    }
    a.tooltip:hover {
        text-decoration: none;
    }
}


/*Anzeige der Referenzauswahl wenn 2 Bilder net mehr nebeneinander passen*/

@media screen and (max-width: 929px) {
    .inhalt {
        width: 100%;
        background-color: #FFFFFF;
        text-align: left;
        padding-bottom: 50px;
        padding-top: 20px;
    }
    .inhalt section {
        width: 100%;
    }
    .teaser {
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
    }
    .banner {
        position: relative;
        width: 100%;
        overflow: auto;
        padding: 0px;
        margin: 0 auto;
    }
    .banner ul li {
        float: left;
        padding: 0px;
        margin: 0px;
        -webkit-background-size: 100% auto;
        -moz-background-size: 100% auto;
        -o-background-size: 100% auto;
        -ms-background-size: 100% auto;
        background-size: 100% auto;
        background-position-y: -75px;
        box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .1);
    }
    #video-container {
        flex-grow: 2;
        align-items: center;
        justify-content: center;
        display: flex;
    }
    .bild-container {
        margin: 20px 0px;
    }
    .clearfix {
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
    }
    .leistung {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 10px 0px;
    }
    .leistung-text {
        flex-grow: 2;
    }
    .leistung .zertifikat-bild {
        width: auto;
        height: 100px;
    }
    .leistung img {
        padding: 0px 15px;
        height: 60px;
        width: 60px;
    }
    .inhalt section.team {
        padding: 0px 20px;
        width: auto;
    }
    .inhalt .team .mitarbeiter {
        border: 1px solid #0D92D5;
        padding: 20px;
        margin-bottom: 20px;
        width: auto;
    }
    .inhalt .team .mitarbeiter .person {
        margin-bottom: 20px;
    }
    .inhalt .team .mitarbeiter .person p {
        margin: 0;
    }
    .inhalt .team .mitarbeiter .person h3 {
        margin-top: 0px;
    }
    .inhalt .team .mitarbeiter img {
        height: auto;
        width: auto;
        max-width: 100%;
    }
    .referenzenunterteilung {
        padding-top: 20px;
        width: 100%;
        text-align: center;
    }
    .referenzenunterteilung div {
        display: block;
        margin-left: 0px;
        margin-right: 0px;
    }
    .referenzenunterteilung img {
        width: 90%;
    }
    .referenzen-navbar-container .referenzen-navbar .back-button {
        margin-left: 46px;
    }
    .referenzen-navbar-container .referenzen-navbar .referenz-titel {
        margin-right: 46px;
    }
    .referenzen {
        padding-top: 20px;
        width: 100%;
        text-align: center;
    }
    .referenzen div {
        display: block;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 30px;
    }
    .partner-bilder-div {}
    .partner .partner-bilder-div img {
        width: 200px;
        height: 75px;
        margin: 20px 20px;
    }
    .referenz-bild {
        width: 90%;
    }
    .einzelne-referenz .hide-content {
        padding: 0;
    }
    /*CSS für den Info-Button
Hier ansetzen!*/
    .einzelne-referenz {
        position: relative;
    }
    .info-icon {
        height: 24px;
        width: 24px;
        position: absolute;
        right: 4.4%;
        bottom: -1px;
        background-color: #3C9DD0;
        padding: 2px;
        border: 5px solid white;
    }
    /*Hier nochmal gucken wegen anzeigen lassen und nicht*/
    .zusatzinformationen p {
        display: none;
    }
    a.tooltip {
        outline: none;
    }
    a.tooltip:hover {
        text-decoration: none;
    }
    .teaser div img {
        width: 100%;
        max-height: 420px;
        /*hier muss noch was gemacht werden!!!!*/
    }
    .teaser {
        text-align: center;
    }
    .referenzen .desktop-row {
        padding-bottom: 0;
    }
    footer p {
        max-width: 95%;
    }
}

.teaser figcaption {
    background-color: silver;
    background-color: hsla(0, 0%, 100%, 0.5);
    position: relative;
    top: -35px;
    line-height: 2em;
    text-align: center;
}

.referenzenunterteilung figcaption {
    background-color: silver;
    background-color: hsla(0, 0%, 100%, 0.5);
    position: relative;
    top: -35px;
    line-height: 2em;
    text-align: center;
}

.imprint-map {
    margin-top: 40px;
}

footer {
    background-color: #222222;
    width: 100%;
    text-align: center;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
}

footer a {
    color: white;
}