.referenz_th {
background-color: #9f9f9f;
color: #FFFFFF;
}

.referenz_tr:nth-child(1n+2) {
background-color: #e3e3e3;
color: #000;
}

.referenz_tr:nth-child(2n+3) {
background-color: #FFFFFF;
color: #000;
}

.referenz_tr:hover {
background-color: #868686;
color: #FFFFFF;
}

@media only screen and (max-width: 870px){
        
.referenz_table, .referenz_thead, .referenz_tbody, 
    .referenz_th, .referenz_td, 
    .referenz_tr {
    display: block;
}
		
.referenz_th{
    display: none;
}

.referenz_thead .referenz_tr {
    position: absolute;
	top: -9999px;
	left: -9999px;
}

.referenz_tr { 
    border-right: 1px solid #e3e3e3; 
    border-left: 1px solid #e3e3e3; 
}

.referenz_td {
    border: none;
    position: relative;
    padding-left: 160px;
}

.referenz_td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 140px;
    padding-right: 10px;
    white-space: nowrap;
}

.referenz_td:nth-of-type(1):before { content: "Objekt"; }
.referenz_td:nth-of-type(2):before { content: "Dachform"; }
.referenz_td:nth-of-type(3):before { content: "PLZ Ort, Straße"; }
.referenz_td:nth-of-type(4):before { content: "Ziegelfarbe"; }
}

@media screen and (max-width: 500px) {

.referenz_td:before { display:  none; }
.referenz_td {padding-left: 10px;}
}