/*
 * referenzen-karussell.css – Kundenlogo-Karussell mit Video-Lightbox,
 * Referenzen-Sektion und Stats-Leiste der drei Performance-Seiten
 * /leistungen/dach, /leistungen/handgemacht und /leistungen/webvideo.
 * (Vorher lag dieser Block identisch dreifach in den Seiten inline;
 * die runde .logo-item-Variante hier ist bewusst eine andere als
 * .client-logo-item in shared.css.)
 */
.container { max-width: 900px; }
.logo-carousel { overflow: hidden; position: relative; cursor: grab; -webkit-user-select: none; user-select: none; padding: 1rem 0 1.5rem; }
.logo-carousel:active { cursor: grabbing; }
.logo-track { display: flex; gap: 2.5rem; will-change: transform; }
.logo-item { flex-shrink: 0; width: 110px; height: 110px; background: white; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 6px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border: 2px solid #eee; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.logo-item:hover { border-color: var(--accent-gold); box-shadow: 0 6px 25px rgba(201,166,107,0.2); }
.logo-item img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.logo-item.has-video { cursor: pointer; position: relative; overflow: visible; -webkit-tap-highlight-color: transparent; outline: none; user-select: none; }
.logo-play-icon { position: absolute; bottom: -2px; right: -2px; width: 26px; height: 26px; background: var(--primary-navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.25); z-index: 2; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; }
.logo-item.has-video:hover .logo-play-icon { background: var(--accent-gold); transform: scale(1.15); }
.logo-play-icon::after { content: ''; width: 0; height: 0; border-left: 8px solid white; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }
.referenzen-section { background: white; border-radius: 16px; padding: 1rem 0; box-shadow: 0 10px 40px rgba(0,0,0,0.06); overflow: hidden; }
.stats-divider { width: 340px; max-width: 80%; height: 3px; background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-light)); border-radius: 2px; margin: 0 auto; }
.stats-bar { display: flex; justify-content: center; gap: 3rem; padding: 1rem 1.5rem 0.5rem; }
.stats-item { text-align: center; }
.stats-number { font-family: 'Barlow Condensed', sans-serif; font-size: 2.2rem; font-weight: 700; color: var(--accent-gold); line-height: 1.2; }
.stats-label { font-size: 0.85rem; font-weight: 500; color: var(--primary-navy); text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 768px) { .logo-item { width: 90px; height: 90px; padding: 3px; } .logo-track { gap: 1.5rem; } }
@media (max-width: 480px) { .logo-item { width: 75px; height: 75px; padding: 3px; } .logo-track { gap: 1.2rem; } .stats-bar { gap: 1.5rem; padding: 0.8rem 1rem 0.3rem; } .stats-number { font-size: 1.8rem; } .stats-label { font-size: 0.65rem; } .stats-divider { width: 200px; } }