
.toggleBox-outer{
    background-color: rgb(250,250,250);

}


.toggleBox{position: relative; display: grid;}


/* Ausblenden des input-Feldes */
.toggleBox input {
    position: absolute;
    left: -99999px;
}
 
/* Label-Jahr */
.toggleBox label {
    display: block;
    padding: 1em 0em 1em 2em;
    text-align: left;
    cursor: pointer;
    background: rgb(43,46,51);
    border-bottom: solid 1px rgba(250,250,250,0.1);
}

.toggleBox label:hover {
    background: rgba(43,46,51,0.95);
}


/* Der Aufklappmechanismus */
.toggleBox input:not(:checked) ~ div {
    opacity: 0;
    height:0px;
}


.toggleBox input:checked ~ div {
    opacity: 1;
    padding: 0em; /* Höhe Refernzkontainer */
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
    background-color: rgba(250,250,250,1);

}
 
/* Steuerung der Sichtbarkeit der labels */
.toggleBox input:not(:checked) ~ .close, 
.toggleBox input:checked ~ .open {
    display: none;
}

  

/* -----------------------------------------------------------------Thumb-Boxen */

.thumbBox-outer{
    display: block;
    width:auto;
    height: auto;
}

.thumbBox-center{
    display: inline-block;
    width:100%;
    text-align: left;
}

 .thumbBox-inner{ 
    display: inline-block;
    width: auto;
    margin:1em; 
 }


 .thumbBox{ 
    display: inline-block;
    float: left;
    padding: 0.5%;
    margin: 0.5em;
    background-color: rgba(43,46,51,0);  text-align: left;

 }


.thumb{
    width:100px;
    height: 100px;
    padding: 3vw;
    border:solid 5px rgba(250,250,250,1);

    background-repeat: no-repeat;
    background-position: center;

border:solid 5px rgba(43,46,51,0);

    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}


.thumb:hover{
    border:solid 5px rgba(43,46,51,1);

    -webkit-transition:border 0.3s ease;
    -moz-transition:border 0.3s ease;
    -o-transition:border 0.3s ease;
    transition:border 0.3s ease;
}
/* -----------------------------------------------------------------Bauprojekte-Font */




/* -----------------------------------------------------------------Mobil & Tablet */
@media only screen and (min-width: 0em) and (max-width: 40em){

.toggleBox label { text-align: center; padding: 1em 0em 1em 0;}

.thumbBox{float:none;}

.thumbBox-center{text-align: center;}

.thumb{
    width:180px;
    height:180px;}


}













