.akustik-benefits {
    --primary: #ea5302;
    --secondary: #5f410f;
    --text: #646464;
    --border: rgba(95, 65, 15, .10);

    width: 100%;
    max-width: 1300px;
    margin: 0 auto;

    background: transparent;
    font-family: inherit;
}

.akustik-benefits *,
.akustik-benefits *::before,
.akustik-benefits *::after {
    box-sizing: border-box;
    font-family: inherit;
}


.akustik-benefits__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}


.akustik-benefits__card {
    position: relative;

    min-height: 310px;
    padding: 28px 30px 30px;

    overflow: hidden;

    background: #fff;

    border: 1px solid var(--border);
    border-radius: 22px;

    box-shadow:
        0 10px 30px rgba(67, 43, 14, .06);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.akustik-benefits__card::before {
    content: "";

    position: absolute;

    top: -70px;
    right: -60px;

    width: 210px;
    height: 210px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(234,83,2,.11),
            rgba(234,83,2,.04) 45%,
            transparent 72%
        );

    pointer-events: none;
}


/* Punktemuster */

.akustik-benefits__card::after {
    content: "";

    position: absolute;

    top: 27px;
    right: 20px;

    width: 95px;
    height: 80px;

    opacity: .11;

    background-image:
        radial-gradient(
            circle,
            var(--primary) 2px,
            transparent 2.5px
        );

    background-size: 14px 14px;

    pointer-events: none;
}


.akustik-benefits__image-wrap {
    position: relative;
    z-index: 2;

    width: 120px;
    height: 130px;

    margin-bottom: 24px;

    overflow: hidden;

    background: #f5f3f0;

    border: 3px solid #fff;
    border-radius: 16px;

    box-shadow:
        0 6px 18px rgba(67,43,14,.12);
}


/* kleiner CI-Akzent */

.akustik-benefits__image-wrap::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 4px;

    background: var(--primary);
}


.akustik-benefits__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .45s ease;
}


.akustik-benefits__title {
    position: relative;
    z-index: 2;

    margin: 0 0 14px !important;

    color: var(--secondary) !important;

    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.27 !important;
}


.akustik-benefits__line {
    position: relative;
    z-index: 2;

    width: 38px;
    height: 2px;

    margin-bottom: 17px;

    background: var(--primary);

    border-radius: 10px;

    transition: width .3s ease;
}


.akustik-benefits__text {
    position: relative;
    z-index: 2;

    margin: 0 !important;

    color: var(--text) !important;

    font-size: 16px !important;
    line-height: 1.65 !important;
}


.akustik-benefits__card:hover {
    transform: translateY(-5px);

    border-color: rgba(234,83,2,.22);

    box-shadow:
        0 18px 42px rgba(67,43,14,.11);
}

.akustik-benefits__card:hover
.akustik-benefits__image {
    transform: scale(1.08);
}

.akustik-benefits__card:hover
.akustik-benefits__line {
    width: 55px;
}


@media (max-width: 950px) {

    .akustik-benefits__grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 20px;
    }

}


@media (max-width: 620px) {

    .akustik-benefits__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .akustik-benefits__card {
        min-height: 0;
        padding: 23px 22px 26px;
        border-radius: 18px;
    }

    .akustik-benefits__image-wrap {
        width: 100px;
        height: 76px;
        margin-bottom: 20px;
    }

    .akustik-benefits__title {
        font-size: 22px !important;
    }

}


@media (hover: none) {

    .akustik-benefits__card:hover {
        transform: none;
    }

    .akustik-benefits__card:hover
    .akustik-benefits__image {
        transform: none;
    }

}


@media (prefers-reduced-motion: reduce) {

    .akustik-benefits__card,
    .akustik-benefits__image,
    .akustik-benefits__line {
        transition: none;
    }

}