.top-bar-container {
        position: relative;
        width: 100%;
    }

    .top-bar {
        display: flex;
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 10px;
        scroll-behavior: smooth;
    }

    .top-bar-item {
        flex: 0 0 auto; /* Verhindert das automatische Einrücken */
        width: 90px;
        text-align: center;
    }

    .icon-img {
        width: 60px;
        height: 60px;
        object-fit: contain;
    }

    .text-label {
        display: block;
        max-width: 80px;
        text-align: center;
        font-size: 14px;
        white-space: normal;
    }

    /* Pfeile für den Slider (nur mobil) */
    .scroll-arrow {
        display: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 40px;
        color: rgba(20, 20, 20, 0.4);
        cursor: pointer;
        padding: 10px;
        z-index: 10;
    }

    .left-arrow { left: 10px; }
    .right-arrow { right: 10px; }

    /* Desktop: Bis zu 8 Icons in einer Zeile */
    @media (min-width: 768px) {
        .top-bar {
            flex-wrap: wrap;
            justify-content: center;
            overflow-x: hidden;
        }

        .top-bar-item {
            flex: 1 1 calc(12.5% - 10px); /* Max. 8 Icons in einer Zeile */
        }
    }

    /* Mobile: Slider aktivieren */
    @media (max-width: 768px) {
        .top-bar {
            white-space: nowrap;
        }

        .scroll-arrow {
            display: block;
        }
    }