/****************************************************************************
 * Counter Listing - Trennlinien
 *
 * INFO: Trennlinien zwischen den Kennzahlen-Items. Passt sich der
 *       Spaltenaufteilung an:
 *         >= 64em  (large-3)  4 Spalten -> vertikale Linien
 *         40-64em  (medium-6) 2 Spalten -> vertikale + horizontale Linien
 *         < 40em   (small-12) gestapelt -> horizontale Linien
 *       Zusaetzlich eine Linie ueber der gesamten Liste (unter dem Titel).
 *
 ****************************************************************************/
.counter_listing {
    --counter-divider: rgba(45, 51, 40, 0.18);
    border-top: 1px solid var(--counter-divider);
}

.counter_listing .item {
    position: relative;
}

/* vertikale Linie an der linken Item-Kante */
.counter_listing .item::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-left: 1px solid var(--counter-divider);
}

/* horizontale Linie an der oberen Item-Kante */
.counter_listing .item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border-top: 1px solid var(--counter-divider);
}

/****************************************************************************
 * Mobil (< 40em): 1 Spalte -> nur horizontale Linien
 ****************************************************************************/
@media screen and (max-width: 39.9375em) {
    .counter_listing .item::before {
        display: none;
    }
    .counter_listing .item::after {
        left: 0.9375rem;
        right: 0.9375rem;
    }
    /* erste Zeile: Liste hat bereits border-top */
    .counter_listing .item:first-child::after {
        display: none;
    }
}

/****************************************************************************
 * Tablet (40em - 63.9375em): 2 Spalten
 ****************************************************************************/
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    /* vertikale Linie nur bei der rechten Spalte (2., 4. Item) */
    .counter_listing .item:nth-child(odd)::before {
        display: none;
    }
    /* horizontale Linie erst ab der 2. Zeile (3., 4. Item) */
    .counter_listing .item:nth-child(-n+2)::after {
        display: none;
    }
}

/****************************************************************************
 * Desktop (>= 64em): 4 Spalten -> nur vertikale Linien
 ****************************************************************************/
@media screen and (min-width: 64em) {
    .counter_listing .item::after {
        display: none;
    }
    /* linke Spalte jeder 4er-Reihe bekommt keine vertikale Linie */
    .counter_listing .item:nth-child(4n+1)::before {
        display: none;
    }
}