/* ====---- references-001 ----==== */

/* Grundstruktur */
.lms-references-carousel{
position:relative;
width:100%;
overflow:hidden;
padding:15px 0;
}

.lms-stage{
display:flex;
transition: transform 0.8s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.lms-item{
min-width:50%;
box-sizing:border-box;
padding:0 15px;
}

/* Karten-Design */
.lms-references-item{
position:relative;
background:#fff;
height:200px;
padding:50px;
margin: 50px 20px 20px 50px;
display:flex;
flex-direction:column;
justify-content:center;
text-align:center;
box-shadow:0 4px 15px rgba(0,0,0,0.05);
}

.lms-references-item img{
position:absolute;
top:-50px;
left:-50px;
width:100px;
height:100px;
border-radius:50%;
/*background:#ccc;*/
object-fit:cover;
z-index:2;
}

.lms-client-quote{
font-style:italic;
margin:0 0 15px 0;
}

.lms-references-item-sign{
font-size:15px;
margin:0;
/*color:#444;*/
}

/* Dots Styling */
.lms-dots{
text-align:center;
margin-top:30px;
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
}

.lms-dot{
position:relative;
display:block;
width:20px;
height:4px;
background:#bbb;
border-radius:2px;
border:none;
cursor:pointer;
padding:0;
min-width:20px;
min-height:4px;
transition: background 0.3s, transform 0.3s, width 0.3s;
}

.lms-dot::before{
content: '';
position:absolute;
top:50%;
left:50%;
width:48px;
height:48px;
transform:translate(-50%, -50%);
background:transparent;
}

.lms-dot.active{
background:#000;
width:20px;
}

/* Responsiv */
@media (max-width:1200px){
.lms-item{min-width:100%}
}

@media (max-width:600px){
.lms-references-carousel{padding:50px 0}
.lms-references-item{height:250px;padding:10px;margin: 10px 0px 20px 10px}
.lms-references-item img{top:-50px;left:-25px;width:75px;height:75px}
.lms-dots{gap:6px}
}

@media (max-width: 480px){
.lms-dot{width:12px;gap:4px}
}