/* focustrend.de/werkstatt — Abschnitt „Referenzen“: dieselben Arbeiten wie auf focustrend.de/arbeiten/.
   Liste und Bilder kommen aus referenzen-liste.php (erzeugt von referenzen_holen.py). */
.referenzen{padding:30px 0 96px}
.ref-raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ref{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:24px;background:var(--flaeche);border:1px solid var(--rand);text-decoration:none;transition:transform .3s,border-color .3s,box-shadow .3s}
.ref:hover{transform:translateY(-6px);border-color:#6a6a82;box-shadow:0 26px 50px -30px #000}
.ref-bild{display:block;padding:30px 26px 10px;background:radial-gradient(110% 85% at 50% 0%,rgba(124,107,255,.2),transparent 72%)}
.ref-bild img{width:100%;height:auto;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ref:hover .ref-bild img{transform:scale(1.04)}
.ref-name{display:flex;align-items:center;gap:12px;padding:14px 24px 22px;font:700 1.08rem/1.25 var(--titel)}
.ref-name b{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.ref-name .sym{color:var(--leise);transition:transform .25s,color .25s}
.ref:hover .ref-name .sym{transform:translateX(4px);color:#fff}

@media (max-width:1020px){
  .ref-raster{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .referenzen{padding:20px 0 72px}
}
@media (max-width:560px){
  .ref-raster{gap:12px}
  .ref{border-radius:18px}
  .ref-bild{padding:16px 12px 6px}
  .ref-name{padding:8px 12px 14px;font-size:.9rem}
  .ref-name .sym{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ref,.ref-bild img,.ref-name .sym{transition:none}
  .ref:hover,.ref:hover .ref-bild img{transform:none}
}