/* Alle Streifen – Position & Größe werden per JS gesetzt */
#hfa-top, #hfa-bottom, #hfa-left, #hfa-right {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* Horizontale Streifen */
#hfa-top, #hfa-bottom { height: 50px; }
#hfa-top    { top: 0; }
#hfa-bottom { bottom: 0; }

/* Vertikale Streifen */
#hfa-left, #hfa-right { width: 50px; top: 0; }
#hfa-left  { left: 0; }
#hfa-right { right: 0; }

/* Jede Ameise */
.hfa-ant {
    position: absolute;
    width: 40px;
    height: 22px;
}

/* Bewegungs-Keyframes */
@keyframes hfa-right {
    from { left: -60px; }
    to   { left: calc(100% + 60px); }
}
@keyframes hfa-left {
    from { left: calc(100% + 60px); }
    to   { left: -60px; }
}
@keyframes hfa-down {
    from { top: -60px; }
    to   { top: calc(100% + 60px); }
}
@keyframes hfa-up {
    from { top: calc(100% + 60px); }
    to   { top: -60px; }
}

/* Leichtes Auf-und-Ab-Wippen */
@keyframes hfa-wiggle {
    from { transform: translateY(0px); }
    to   { transform: translateY(-1.5px); }
}
.hfa-ant svg {
    display: block;
    animation: hfa-wiggle 0.3s ease-in-out infinite alternate;
}

/* Auf mobilen Geräten ausblenden */
@media (max-width: 768px) {
    #hfa-top, #hfa-bottom, #hfa-left, #hfa-right {
        display: none;
    }
}