/* ── Grid image-cycle ── */
.kfg__pcard-img{ position:relative; }
.ff-imgcycle-dots{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;align-items:center;pointer-events:none;
  opacity:0;transition:opacity .25s;z-index:2;
}
.kfg__pcard:hover .ff-imgcycle-dots{ opacity:1; }
.ff-imgcycle-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(0,0,0,.18);border:1.5px solid rgba(255,255,255,.85);
  transition:background .2s,transform .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.ff-imgcycle-dot.is-active{
  background:var(--text,#1D1D1F);border-color:#fff;transform:scale(1.25);
}
.ff-imgcycle-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.9);border:1.5px solid rgba(0,0,0,.07);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.1);
  opacity:0;transition:opacity .2s,background .15s;
  pointer-events:auto;z-index:2;
}
.ff-imgcycle-arrow.prev{ left:8px; }
.ff-imgcycle-arrow.next{ right:8px; }
.kfg__pcard:hover .ff-imgcycle-arrow{ opacity:1; }
.ff-imgcycle-arrow:hover{ background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.15); }
@media(hover:none){
  .ff-imgcycle-dots{ opacity:0.8; }
  .ff-imgcycle-arrow{ opacity:0.75; }
  /* Sichtbar bleiben die Pfeile 26 Pixel klein — das passt zum Bild. Der
     Finger trifft aber erst ab etwa 44 Pixeln zuverlaessig. Deshalb wird die
     Trefferflaeche unsichtbar nach aussen erweitert, statt den Knopf selbst
     aufzublasen. */
  .ff-imgcycle-arrow::after{
    content:'';position:absolute;inset:-9px;border-radius:50%;
  }
}