.referenzen-background {
	width:100%; 
	float:left;
	position:relative;
	background-size:cover;
	background-repeat:no-repeat; 
	background-position:center center;
	display:block;
	cursor: pointer; 
	overflow:hidden;
	border:1px solid black;
}	
	
.referenzen-scroll:hover {
 background-color: rgba(0,0,0,0.5);
}
	
.referenzen-inhaltsterne {
	font-size:0.6em;
	color:#fff; 
	position:relative; 
	font-weight:100;
	line-height: 14px;
	letter-spacing: 2px;
}

.referenzen-inhalt { 
	position:absolute; 
	bottom:1.5em; 
	left:3em; 
	right:3em; 
}

.referenzen-inhalt-partner{
	font-size:0.7em;
	color:#fff;
	position:relative;
	text-transform: none;
	font-weight: 200; 
	text-align:right;
	padding-top:2rem;
	background:red;
}

.referenzen-long-img { 
	position:absolute;
	width:100%;
	height:auto;
	top:0;
	left:0;
	opacity: 0;
	z-index: 3;
	padding:0 !important;
	margin:0 !important;
}

.referenzen-image {
	width:99.5% !important;
	height:auto !important;
	display:inline-block !important;
}

.referenzen-scroll {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5em 3em;
  box-sizing: border-box;
}

.referenzen-inhalt-title {
  font-size: 1.8em;
  color: #fff;
  font-weight: 300;
  margin: 0 0 4px 0;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
  font-family: "Poppins";
}

.referenzen-inhalt-ort {
  font-size: 1em;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  margin: 0;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
}

/* mehr erfahren */
.hover-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 0.5rem 1rem;
  background-color: #00fac9;
  color: #000;
  text-decoration: none;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10;
}

/* sichtbar bei Hover oder Fokus */
.referenzen-scroll:hover .hover-btn,
.xxxhover-btn:focus {
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid #c9c9c9;
  outline-offset: 2px;
}

@media (min-width:767px) {
.touch-img.hidden-lg{
 display:none;
 }
}

@media only screen and (max-width: 1024px) {		
.referenzen-inhalt-title {
	font-size:1.1em;	
  }
}

@media (max-width:440px) {
.referenzen-background img{
	width:100%;	
	height:350px;
 }
.referenzen-inhalt { 	
	bottom:6.5rem; 	 
	left:1em; 
	right:1em; 
}
.referenzen-inhalt-title {
	font-size:1.4em;
	color:#fff; 
	position:relative;
	font-weight: 300;
	margin-bottom: 4px;
}	
.referenzen-inhalt-partner{
	font-size:0.9em;
	color:#fff;
	text-align:left;
	padding-top:1rem;
}
.referenzen-long-img .referenzen-image{
	width:100%;
	height:auto;	
}
.touch-img{
	position:absolute;
	width:10%;
	top:110px;
	right:2%;	
}
.touch-img img{
 width:30px;
 height:40px; 
 border:none;
 }
}

@media (min-width:320px) and (max-width:439px) {
.img-touch{
 width:40px;
 height:60px; 
 border:none;
}
}

/* --- TOUCH FIX für Chrome auf Tablets --- */
body.is-touch .hover-btn {
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.3s ease;
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #00fac9;
  color: #000;
  border: 1px solid #fff;
  font-size: 0.8em;
}

/* Sichtbar, wenn via JS-Touch aktiviert */
body.is-touch .hover-btn.show-touch {
  opacity: 1 !important;
  z-index: 50 !important;
}

/* Desktop Hover bleibt */
body:not(.is-touch) .referenzen-scroll:hover .hover-btn {
  opacity: 1;
  pointer-events: auto;
}