@media screen and (max-width: 1023px) {
        .card-title{
		font-size:22px
		}
	.handwerker-1{ 
		background-image: url("../images/aussenputz-fassadenputz-verputzer.jpg");
		background-repeat: no-repeat;
		background-size: 100% auto;
		}

	.handwerker-2{ 
		background-image: url("../images/fassadendaemmung-gebaeude.jpg");
		background-repeat: no-repeat;
		background-size: 100% auto;

	}

	.handwerker-3{ 
		background-image: url("../images/innenausbau-renovierung-wohnung.jpg");
		background-repeat: no-repeat;
		background-size: 100% auto;

	}
	.handwerker-4{ 
		background-image: url("../images/fassadenanstrich-vom-fachmann.jpg");
		background-repeat: no-repeat;
		background-size: 100% auto;

	}

	.handwerker-5{ 
		background-image: url("../images/sanierung-bad-fussboden-waende.jpg");
		background-repeat: no-repeat;
		background-size: 100% auto;

	}
	.handwerker-6{ 
		background-image: url("../images/reparatur-risse-fassaden-schaeden.jpg");
		background-repeat: no-repeat;
		background-size: 100% auto;

	}
}


@media screen and (min-width: 1024px) {

.handwerker-1{ 
	background-image: url("../images/aussenputz-fassadenputz-verputzer.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-color:#000000;
}

.handwerker-2{ 
	background-image: url("../images/fassadendaemmung-gebaeude.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-color:#000000;
}

.handwerker-3{ 
	background-image: url("../images/innenausbau-renovierung-wohnung.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-color:#000000;
}
.handwerker-4{ 
	background-image: url("../images/fassadenanstrich-vom-fachmann.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-color:#000000;
}

.handwerker-5{ 
	background-image: url("../images/sanierung-bad-fussboden-waende.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-color:#000000;
}
.handwerker-6{ 
	background-image: url("../images/reparatur-risse-fassaden-schaeden.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-color:#000000;
}
}

.button-card:hover {
  color: #ffffff;
  background-color: #baaf9d;
}

.button-card{
  margin-top: 0;
  padding: 0.75rem 1.5rem;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
  color: #454545;
  background-color: #fcda0c;
  border: none;
  border-radius: 0;
}



/* Card anordnung bis 768px einzelanzeige mittig */
@media screen and (max-width: 1023px) {

  .startcard{

  }

}
@media screen and (min-width: 1024px) {
  .startcard{
     max-width: 1140px;
     margin-right: auto;
  margin-left: auto;
  }
}


.card-title{
	padding-top:10px;
	text-transform: uppercase;
	font-weight: 600;
	font-family: 'Poppins';
	font-size:22px;
	color:#fcda0c;
}
.card-text{font-size:15px;}

@media screen and (max-width:366px){ 
	.card-body{
		margin:80% 0 0 0px;
		padding-top:20px;
		color:#fff;
		text-align:center;
		background:#000000;
		height:300px;
	}
	.card-body:hover{	
	}
	 .col-sm-4{
                  margin-left:20px;
		  margin-right:20px;
		  padding-right: 0;
		  padding-left: 0;
	}
	
}
@media screen and (min-width: 367px) and  (max-width:575px){ 
	.card-body{
		margin:80% 0 0 0px;
		color:#fff;
		text-align:center;
		background:#000000;
		height:280px;
	}
	.card-body:hover{	
	}
	 .col-sm-4{
                  margin-left:20px;
		  margin-right:20px;
		  margin-bottom:20px;
		  padding: 0;
		border:0;
	}
	
}
@media screen and (min-width: 576px) and (max-width: 766px) {
	.card-body{
		margin:60% 0 0 0px;
		padding-top:20px;
		color:#fff;
		text-align:center;
		background:#000000;
		height:410px;
	}

	.card-body:hover{	
	}
	.col-sm-4{
                  margin-left:0px;
		  margin-right:0px;
		  padding-right: 0;
		  padding-left: 0;border: 5px solid #ffffff;
	}
}

@media screen and (min-width:767px) and (max-width: 1023px) {
	.card-body{
		margin:80% 0 0 0px;
		padding-top:20px;
		color:#fff;
		text-align:center;
		background-color:#000000;
		height:400px;
	}
	.card-body:hover{
	}
	.col-sm-4{
                  margin-left:0px;
		  margin-right:0px;
		  padding-right: 0;
		  padding-left: 0;border: 5px solid #fbfbfb;
	}
	.handanni {
		  display: inline-block;
		  }
	.handanni:before {
		  content: "";
		  position: absolute;
		  z-index: -1;
		  top: 0;
		  left: 12px;
		  right: 12px;
		  bottom: 0;
		  background-color:rgba(0,0,0,0.9);	  
}
}



@media screen and (min-width:1024px){
	.card-body{
		margin:14px;
		padding-top:20px;
		height:330px;
		opacity: 0;
		transition: 0.7s;
		transform: translateY(20px);
		color:#ffffff;
		text-align:center;
	}

	.card-body:hover{
		opacity:1;
		transform: translateY(0px);
	}
	.col-sm-4{
		  border:5px solid #fbfbfb;
	}
	.handanni {
		  display: inline-block;
		  vertical-align: middle;
		  -webkit-transform: translateZ(0);
		  transform: translateZ(0);
		  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
		  -webkit-backface-visibility: hidden;
		  backface-visibility: hidden;
		  -moz-osx-font-smoothing: grayscale;
		  position: relative;
		  background:;
		  -webkit-transition-property: color;
		  transition-property: color;
		  -webkit-transition-duration: 0.3s;
		  transition-duration: 0.3s;
	}
	.handanni:before {
		  content: "";
		  position: absolute;
		  z-index: -1;
		 top: 12px;
		  left: 12px;
		  right: 12px;
		  bottom: 12px;
		  background-color:rgba(0,0,0,0.9);
		border:6px solid #fbfbfb;
		  -webkit-transform: scale(0);
		  transform: scale(0);
		  -webkit-transition-property: transform;
		  transition-property: transform;
		  -webkit-transition-duration: 0.3s;
		  transition-duration: 0.3s;
		  -webkit-transition-timing-function: ease-out;
		  transition-timing-function: ease-out;
	}
	.handanni:hover, .handanni:focus, .handanni:active {
	  color: white; 
	}
	.handanni:hover:before, .handanni:focus:before, .handanni:active:before {
	  -webkit-transform: scale(1);
	  transform: scale(1);
	}
}