/* Container for the demo - Mobile First */
/* Container - Mobile First (Smartphone: 2 Spalten = 3x2 Layout) */
.icon-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Erzwingt exakt 2 gleich breite Spalten */
    gap: 2rem; /* Angenehmer Abstand für schmale Handy-Displays */
    justify-items: center; /* Zentriert jedes Icon perfekt in seiner Box */
    background-color: #212020;
    padding: 2rem 1rem;
    font-family: 'Inter', sans-serif;
}

/* Tablet (ab 768px Breite: 3 Spalten = 2x3 Layout) */
@media (min-width: 768px) {
    .icon-container {
        grid-template-columns: repeat(3, 1fr); /* Erzwingt exakt 3 gleich breite Spalten */
        gap: 4rem; /* Etwas mehr Luft zum Atmen auf dem Tablet */
    }
}

/* Desktop (ab 1024px Breite: 6 Spalten = Alle 6 nebeneinander) */
@media (min-width: 1024px) {
    .icon-container {
        grid-template-columns: repeat(6, 1fr); /* Erzwingt exakt 6 Spalten */
        gap: 2rem; /* Etwas reduzierter Abstand, damit alle 6 gut auf den Bildschirm passen */
    }
}

        /* Individual Item Wrapper (Anchor Tag) */
        .icon-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            text-decoration: none;
            position: relative;
        }

        /* The Circle Wrapper */
        .icon-circle-wrapper {
            position: relative;
            width: 5rem; /* 80px */
            height: 5rem;
            margin-bottom: 1rem;
            transition: transform 0.3s ease;
        }

        /* Hover Effect: Move Up */
        .icon-item:hover .icon-circle-wrapper {
            transform: translateY(-0.5rem);
        }

        /* The Gradient Border (Outer Ring) */
        .icon-border-gradient {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: linear-gradient(to top right, #009bdd, #d2247c);
            padding: 2px; /* Border Thickness */
        }

        /* The Inner Circle (Dark Background) */
        .icon-inner {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #212020; /* Match section bg */
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
        }

        /* Hover Effect: Inner Background Lightens */
        .icon-item:hover .icon-inner {
            background-color: rgba(255, 255, 255, 0.1);
        }

        /* The Icon Itself */
        .icon-svg {
            color: #9ca3af; /* Gray-400 */
            transition: color 0.3s ease;
            width: 24px;
            height: 24px;
        }

        /* Hover Effect: Icon turns White */
        .icon-item:hover .icon-svg {
            color: #ffffff;
        }

        /* The Glow Effect (Behind) */
        .icon-glow {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: linear-gradient(to top right, #009bdd, #d2247c);
            opacity: 0;
            filter: blur(12px);
            transition: opacity 0.3s ease;
            z-index: -1;
        }

        /* Hover Effect: Glow appears */
        .icon-item:hover .icon-glow {
            opacity: 0.5;
        }

        /* The Label Text */
        .icon-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: #6b7280; /* Gray-500 */
            transition: all 0.3s ease;
            margin-top: 0.5rem;
        }

        /* Hover Effect: Text Gradient */
        .icon-item:hover .icon-label {
            color: transparent;
            background-image: linear-gradient(to right, #009bdd, #d2247c);
            -webkit-background-clip: text;
            background-clip: text;
        }

.jp-relatedposts { display:none!important;}