.shopware-categories {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.shopware-categories__wrapper {
    --gap: 1rem;
    --count: 4;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
}

.shopware-categories__category {
    width: calc((100% / var(--count)) - var(--gap));
}

@media (max-width: 991px) {
    .shopware-categories__wrapper {
        --count: 3;
    }
}

@media (max-width: 767px) {
    .shopware-categories__wrapper {
        --count: 2;
    }
}

@media (max-width: 480px) {
    .shopware-categories__wrapper {
        --count: 1;
    }
}

.shopware-categories__category a {
    padding: 1rem 2rem;
    display: block;
    width: 100%;
    height: 100%;
}

.shopware-categories__category a,
.shopware-categories__category a:hover,
.shopware-categories__category a:focus {
    text-decoration: none;
}

.shopware-categories__category a span {
    color: var(--white);
}

/* base category styling: --category-color is set per category in the template (var(--<category id>)),
   categories without a defined color fall back to lightgrey, as in the shop */
[class^="category-"] {
    background-color: var(--category-color, lightgrey);
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* hover state */
[class^="category-"]:hover {
    background-color: #fff;
    border-color: var(--category-color, lightgrey);
}

[class^="category-"]:hover span {
    color: var(--category-color, lightgrey);
}

/* Injektion & Infusion */
.category-ce22f53d5d28422c85c9b6665d6f1eee {
    --category-color: var(--ce22f53d5d28422c85c9b6665d6f1eee);
    background-color: var(--category-color, lightgrey);
}

/* Verbandstoffe */
.category-eabee33d8c184e8bb2e937028793d18f {
    --category-color: var(--eabee33d8c184e8bb2e937028793d18f);
    background-color: var(--category-color, lightgrey);
}

/* Starre Verbände & Gehhilfen */
.category-1c87c3e6f3094a2786c1205b77942e61 {
    --category-color: var(--1c87c3e6f3094a2786c1205b77942e61);
    background-color: var(--category-color, lightgrey);
}

/* Orthopädie & Sportmedizin */
.category-9d431ddd824b4aed8de984aabc6b7d80 {
    --category-color: var(--9d431ddd824b4aed8de984aabc6b7d80);
    background-color: var(--category-color, lightgrey);
}

/* Instrumente & Nahtmaterial */
.category-ee2d136324e3456a967907f595533839 {
    --category-color: var(--ee2d136324e3456a967907f595533839);
    background-color: var(--category-color, lightgrey);
}

/* Hygiene & Sterilisation */
.category-9fbf889c18e54007b8d9380d87a83f95 {
    --category-color: var(--9fbf889c18e54007b8d9380d87a83f95);
    background-color: var(--category-color, lightgrey);
}

/* Labor */
.category-b64d28c8af2743a781c1f4fd63bb4f03 {
    --category-color: var(--b64d28c8af2743a781c1f4fd63bb4f03);
    background-color: var(--category-color, lightgrey);
}

/* Diagnostik */
.category-00d62c57828a426882facdab7849fae7 {
    --category-color: var(--00d62c57828a426882facdab7849fae7);
    background-color: var(--category-color, lightgrey);
}

/* Naturheilkunde & Therapie */
.category-5da57a17f23e4daa82f3f904b79b668f {
    --category-color: var(--5da57a17f23e4daa82f3f904b79b668f);
    background-color: var(--category-color, lightgrey);
}

/* Pflege & Hilfsmittel */
.category-efafa0845ce64f38993a44427d5d2cd3 {
    --category-color: var(--efafa0845ce64f38993a44427d5d2cd3);
    background-color: var(--category-color, lightgrey);
}

/* Einrichtung & Mobiliar */
.category-266ed6c8f3624733a31843ffba4f33f6 {
    --category-color: var(--266ed6c8f3624733a31843ffba4f33f6);
    background-color: var(--category-color, lightgrey);
}

/* Notfall & Erste Hilfe */
.category-46da4a42c81a483ea6152212767fdd92 {
    --category-color: var(--46da4a42c81a483ea6152212767fdd92);
    background-color: var(--category-color, lightgrey);
}

/* Aktionen */
.category-4df999ffbf0948cb9ce91a518fe61615 {
    --category-color: var(--4df999ffbf0948cb9ce91a518fe61615);
    background-color: var(--category-color, lightgrey);
}

/* Abverkauf */
.category-65bb5e4807114a57875cf00e34cb87b3 {
    --category-color: var(--65bb5e4807114a57875cf00e34cb87b3);
    background-color: var(--category-color, lightgrey);
}