<style>
/* ---------------------------------------------------- */
/* DESKTOP/STANDARD: 4 Elemente nebeneinander           */
/* ---------------------------------------------------- */
.checkbox-flex-container {
    display: flex;
    /* Auf Desktop: Alle in einer Zeile erzwingen */
    flex-wrap: nowrap; 
    justify-content: space-between; /* Verteilt den verfügbaren Platz gleichmäßig */
}

.responsive-checkbox-item {
    /* Setzt die Breite für 4 Elemente (23% + Flexbox-Abstand) */
    width: 23%; 
    margin-right: 0 !important; /* Entfernt jeglichen inline-margin-right */
}

/* ---------------------------------------------------- */
/* MOBILE (< 768px): 2 Elemente nebeneinander           */
/* ---------------------------------------------------- */
@media (max-width: 767px) {
    .checkbox-flex-container {
        /* Auf Mobile: Umbruch auf 2 pro Zeile */
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .responsive-checkbox-item {
        /* Setzt die Breite auf 48% (Platz für zwei nebeneinander mit Abstand) */
        width: 48%; 
        margin-bottom: 15px; /* Abstand zwischen den Reihen */
    }

    /* Stellt sicher, dass das 2. und 4. Element (gerade Zahlen) rechts keinen Rand haben */
    .checkbox-flex-container .responsive-checkbox-item:nth-child(2n) {
        margin-right: 0 !important;
    }
    
    /* Stellt sicher, dass das 1. und 3. Element (ungerade Zahlen) rechts keinen Rand haben */
    .checkbox-flex-container .responsive-checkbox-item:nth-child(2n-1) {
        margin-right: 4% !important; /* Der Flexbox-Abstand wird durch 4% Margin simuliert */
    }
    
    /* Entfernt den Margin unten vom letzten Element, falls es alleine steht */
    .checkbox-flex-container .responsive-checkbox-item:last-child {
        margin-bottom: 0;
    }
}
</style>