*{  font-family: Helvetica,sans-serif; 
    /* gilt fürs die ganze Seite */
}

body{max-width: 1700px;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 5%;
    margin-bottom: 5%;
    background: blue;
 
}

.kopf{
    float: left;
    width: 30%;
    height: 150px;
    margin: 10Px;
    background: red;
    height: 150px;
    display: inline-block;
    border: 3px inset aqua;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; 
}

/*index*/

.box1{
    border: 3px inset aqua;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; 
}

@media screen and (min-width: 200px) /* Breite beträgt mindestens px */{

    #logo{   
        width:100%;
        height: 150px;
        float: center;
        background: url(img/Logo%20IB4T_klein.jpg) no-repeat 5% 50% white;
    }
    
    #ib4t{
        width:100%;
        height: 55px;
        padding: 3%;
        float: center;
        color: aqua;
        font-size: 1.0em;
        font-weight: bold;
        text-align: center;
        background: blue;
        color:white;
    }
    
    #leerbox{
        width: 100%;
        line-height: 0px;
        color: aqua;
        text-align: right;
        border: none;
        background: red;
    }
    #bilder{
    border: none;
}

}

@media screen and (min-width: 900px) /* Breite beträgt mindestens px */{
    
    #ib4t{
        width:70%;
        height: 150px;
        padding: 4%;
        float: left;
        color: aqua;
        font-size: 1.5em;
        text-align: center;
        background: blue;
        color:white;
}

    #logo{   
        width:30%;
        height: 150px;
        float: left;
        padding: 10px;
        -webkit-transform: scale(1.0);
            -ms-transform: scale(1.0);
                transform: scale(1.0);
        background: url(img/Logo%20IB4T_klein.jpg) no-repeat 50% 50% white;
}
    #leerbox{
        width: 100%;
        line-height: 40px;
        border: 3px inset aqua;
        -webkit-box-sizing: border-box;
                box-sizing: border-box; 
        color: blue;
        background: blue;
    }

}

@media screen and (min-width: 400px) /* Breite beträgt mindestens px */{
    #bilder{
    width: auto;
    height: 150px;
    border: 3px inset aqua;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; 
    background: url(img/gal/Wasser.jpg) no-repeat scroll 1% 50%,
    url(img/gal/Behaelter.png) no-repeat 99% 50% white;
    }
}

@media screen and (min-width: 700px) /* Breite beträgt mindestens px */{
    #bilder{
    border: 3px inset aqua;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; 
    width: auto;
    height: 150px;
    background: url(img/gal/Wasser.jpg) no-repeat scroll 1% 50%,
    url(img/gal/Bauwerk.png) no-repeat 50% 50%,
    url(img/gal/Behaelter.png) no-repeat 99% 50% white;
    }
}

@media screen and (min-width: 900px) /* Breite beträgt mindestens px */{
    #bilder{
    width: auto;
    height: 150px;
    border: 3px inset aqua;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; 
    background: url(img/gal/Wasser.jpg) no-repeat scroll 1% 50%,
    url(img/gal/Bauwerk.png) no-repeat 33.3% 50%,
    url(img/gal/Rohr.png) no-repeat 66.6% 50%,
    url(img/gal/Behaelter.png) no-repeat 99% 50% white;
    }
}

@media screen and (min-width: 1100px) /* Breite beträgt mindestens px */{
    #bilder{
    width: auto;
    height: 150px;
    border: 3px inset aqua;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; 
    background: url(img/gal/Wasser.jpg) no-repeat scroll 1% 50%,
    url(img/gal/Rohr.png) no-repeat 25% 50%,
    url(img/gal/Bauwerk.png) no-repeat 50% 50%,
    url(img/gal/Pumpe.png) no-repeat 75% 50%,
    url(img/gal/Behaelter.png) no-repeat 99% 50% white;
    }
}

@media screen and (min-width:1400px)  /* Breite beträgt mindestens px */{
    #bilder{
    width: auto;
    height: 150px;
    border: 3px inset aqua;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; 
    background: url(img/gal/Wasser.jpg) no-repeat scroll 1% 50%,
    url(img/gal/Rohr.png) no-repeat 20% 50%,
    url(img/gal/Bauwerk.png) no-repeat 40% 50%,
    url(img/gal/Pumpe.png) no-repeat 60% 50%,
    url(img/gal/Pumpen.png) no-repeat 80% 50%,
    url(img/gal/Behaelter.png) no-repeat 99% 50% white;
    }
}


#Steuerung li {
    display: inline;
}

#Steuerung a {

    padding-left: 2%;
    padding-right:2%;
    margin: 0%;
    font-size: 0.9em;
    /*float: center;*/
    background-color: aqua;
    /*color:blue;   /*Textfarbe Navigation */
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    border: 1px inset aqua;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    line-height: 30px;
}

#Steuerung a:hover {
    background-color:blue;
    color: aqua;
}

.active {
    color: red;
  
}

@media screen and (min-width: 300px) /* Breite beträgt mindestens px */{    
#Text1{
    width: 100%;
    font-size: 0.8em;
    padding: 3%;
    text-align: center;
    float: center;
    color:white;
    background:blue;
    font-weight: bold;
    }
    
#Text2{             /*Impressum, Index, Qualifikation*/
    font-size: 0.8em; /* Datenschutz, Referenzen, Wir*/
    padding: 3%;
    float: center;
    color:darkblue;
    background: white;
    margin-bottom: 5%;
}
#Text3{
    width: 100%;
    font-size: 0.8em;
    padding: 3%;
    text-align: center;
    float: center;
    color:white;
    background:blue;
    font-weight: bold;
    }
    
#Text4{             /*Impressum, Index, Qualifikation*/
    font-size: 0.8em; /* Datenschutz, Referenzen, Wir*/
    padding: 3%;
    float: center;
    color:darkblue;
    background: white;
    margin-bottom: 5%;
}
    .Text10{
    margin-left: 1px;    
    list-style-position:outside;
    text-align: left;
    color: blue;
}
}

@media screen and (min-width: 900px) /* Breite beträgt mindestens px */{
#Text1{
    width: 30%;
    height: 700px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 3%;
    float: left;
    text-align: center;
    color:white;
    background: blue;
}
#Text2{
    width: 70%;
    height: 700px;
    font-size: 0.8em;
    padding: 3%;
    float: left;
    color:darkblue;
    background: white;
    margin-bottom: 10%;
}
    
#Text3{ /* nur für Referenzen*/
    width: 30%;
    height: 1300px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 3%;
    float: left;
    text-align: center;
    color:white;
    background: blue;
}
    
#Text4{ /* nur für Referenzen*/
    width: 70%;
    height: 1300px;
    font-size: 0.8em;
    padding: 3%;
    float: left;
    color:darkblue;
    background: white;
    margin-bottom: 10%;
}
        .Text10{
    margin-left: 1px;    
    list-style-position:outside;
    text-align: left;
    color: blue;
}
}
   
#Text5{
    width: 100%;
    font-size: 0.8em;
    font-weight: bold;
    padding: 3%;
    text-align: center;
    color:#ffffff; /*weiß*/
    background: blue;
}

.Text6{
    font-weight: bold;
    margin-left: 1px;    
    padding-left: 1px;
    list-style-position:outside;
    text-align: left;
}
.Text7{
    margin-left: 1px;  
    font-weight: bold;
    list-style-position:outside;
    text-align: left;
}

.Text8{
    color: white;
}

.Text9{
    padding: 1%;
    font-weight: bold;
    font-size: 1.0em;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; 
} 

.Text11{
    margin-left: 10px;    
    text-align: left;
    color: blue;
}

.Text12{
    margin-left: 1px;  
    margin-bottom: 50px; /* Bild Qualifikationen im Rahmen*/
    list-style-position:outside;
    font-weight: bold;
    text-align: left;
}

.galerietextbox{
    width: 100%;
    line-height: 30px;
    color: darkblue;
    font-weight: bold;
    background: white;
    text-align: center;
    border: 3px inset aqua;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.galeriebox{
    margin: 0.5%;
    padding: 0.5%;
    text-align: center;
    border: 1px inset black;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; 
    background: white;
}
    
.galeriecontainer {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: white;
    border: 3px inset aqua;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; 
 
}

.zertifikatcontainer {
    float: left;
    background: red;
}

.bild {   background-color: aqua;
    width: 170px;
    height: 130px;
    object-fit: cover;
    opacity: 1.0;
   
}

@media screen and (min-width: 200px) /* Breite beträgt mindestens px */{    
    .bild1{ /* bild im Text */
    margin: 10px;
    display: inline;
    float: right;
}
    .bild3{ /* bild im Text */
    margin-right: 10px;
    display: inline;
    float: left;
    object-fit: cover;
}
}

@media screen and (max-width: 550px) /* Breite beträgt mindestens px */{    
    .bild1{ /* Bild im Text */
    width: 0px;
    height: 0px;
}
    .bild3{ /* Bild im Text */
    /*dth: 0px;
    height: 0px;*/
    margin-right: 10px;
    display: inline;
    float: left;
    object-fit: cover;
}
}
.bildtext{
    color: darkblue;
    font-size: 0.8em;
    background-color: aqua;
}
@media screen and (min-width: 1200px) /* Breite beträgt mindestens px */{    
.bild:hover{ 
    background: aqua;
    width: 170px;
    height: 130px;
    object-fit: cover;
    margin: 0%;
    padding: 0%;
   /* -o-object-fit: cover;
       object-fit: cover;*/
    -o-object-position: center center;
       object-position: center center;
    opacity: 1.0;
    transform: scale(1.8);/*nicht für Handy/Tablett*/
    border: 3px black;
 !!!*/
}
}
 
.bild2{
    width: 35%;
    height: 35%;
    display: inline;
    float: right;
    margin: 2%;
    border: 1px inset black;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; 
}


.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.zertifikat{
    margin:15px;
}
.zertifikat a{
    text-decoration: none;
    color: aqua;
}
.zertifikat1 a::before {
    content: "";
    display: inline-block;
    margin-right: 5px;
    width: 32px;
    height: 32px;
    background-image: url(img/pdf.png);
    background-size: 100% auto;
    background-position: center;
}
.zertifikat2 a::before {
    content: "";
    display: inline-block;
    margin-right: 5px;
    width: 32px;
    height: 32px;
    background-image: url(img/Dokument.jpg);
    background-size: 100% auto;
    background-position: center;
}

footer{}