.casestudies{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center; /* 1–3 items automatisch zentriert */

  * {
  flex: 1 1 calc((100% - 3 * 1rem) / 4); /* Zielbreite = 1/4 */
  max-width: 400px;
  min-width: 200px; /* ab wann umgebrochen wird */
}
}

.casestudy{
    --border-radius: 3rem;

    transition: var(--wp--custom--main-trans);
    border-radius: var(--border-radius);
    border: var(--wp--custom--main-border);
    border-color: var(--wp--preset--color--text);
    overflow: hidden;

   figure {
        margin: 0 0 1rem;
        overflow: hidden;
        aspect-ratio: 16 /9;

        img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
            transition: var(--wp--custom--main-trans);
        }
    }
    .content{
        padding: 0 2rem 2rem;

        span{
            color: var(--wp--preset--color--ci-green);
            font-size: 1rem;
            font-weight: 600;
        }

        h3{
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--wp--preset--color--accent);
            margin: .25rem 0 0 0;
        }

        h4{
             font-size: 1.25rem;
             color: var(--wp--preset--color--text);
             margin: 0 0 1rem;
        }

        p{
            margin-bottom: 1rem;
            color: var(--wp--preset--color--text);
            font-size: 1rem;
        }

       

        .more{
            display: block;
            border-top: var(--wp--custom--main-border);
            border-color: currentColor;
            padding-top: .5rem;
            display: flex;
            align-items: center;
            font-size: 1rem;
            gap: 1rem;
            font-weight: 600;
            transition: var(--wp--custom--main-trans);

            svg{
                transition: var(--wp--custom--main-trans);
            }
        }
    }


     &:hover{
        border-color: var(--wp--preset--color--ci-yellow);
        box-shadow: var(--wp--custom--box-shadow);
        transform: translateY(-.25rem);

        img{
            transform: scale(1.05);
        }

        .more{
           svg{
            animation: bouncecase .8s ease-in-out infinite;
           }

           color: var(--wp--preset--color--accent);
        }
     }


}

@keyframes bouncecase{
    0%{
        margin-left: 0;
    }

    50%{
        margin-left: 1rem;
    }
}