.dfs-ap-liste {
    background-color: var(--awb-color3, #000);
}

.dfs-ap-liste-grid-wrapper {
    padding: 96px 32px;
}

.dfs-ap-liste-grid {
    display: grid;
    grid-template-columns: repeat(var(--dfs-ap-cols, 3), minmax(0, 380px));
    justify-content: center;
    column-gap: 24px;
    row-gap: 0;
    max-width: 1280px;
    /* Gleicht den Reihenabstand (margin-bottom der CTA) nach der letzten Reihe aus. */
    margin: 0 auto -96px;
}

/* Jede Karte belegt 5 Zeilen des Eltern-Grids (Bild, Name, Kurzbio, Kontakt, CTA),
   damit Kurzbio, Kontakt und Button in einer Reihe immer auf einer Linie liegen. */
.dfs-ap-liste-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    row-gap: 0;
}

.dfs-ap-liste .dfs-ap-liste-cta {
    margin-bottom: 96px;
}

@media (max-width: 800px) {
    .dfs-ap-liste-grid {
        grid-template-columns: 1fr;
    }
}

/* Kundenwunsch: bei 2 Spalten Außendienst immer links, Innendienst immer rechts,
   jeweils von oben gestapelt. "dense" lässt die rechte Spalte oben beginnen,
   statt erst neben dem letzten Außendienstler. */
@media (min-width: 801px) {
    .dfs-ap-liste-grid--cols-2 {
        grid-auto-flow: row dense;
    }

    .dfs-ap-liste-grid--cols-2 .dfs-ap-liste-card--ad {
        grid-column: 1;
    }

    .dfs-ap-liste-grid--cols-2 .dfs-ap-liste-card--id {
        grid-column: 2;
    }
}

.dfs-ap-liste-image {
    aspect-ratio: 380 / 436;
    overflow: hidden;
}

.dfs-ap-liste-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* .dfs-ap-liste-Präfix nötig, damit Avadas ".post-content p" (Margin 0 0 20px) nicht greift. */
.dfs-ap-liste .dfs-ap-liste-name {
    color: var(--awb-color1, #fff);
    font-family: "Barlow Semibold", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 21px;
    margin: 32px 0 0;
}

.dfs-ap-liste .dfs-ap-liste-kurzbio {
    color: var(--awb-color4, #e9ff1a);
    font-family: "Barlow Regular", sans-serif;
    font-size: 20px;
    line-height: 21px;
    margin: 0;
}

.dfs-ap-liste .dfs-ap-liste-kontakt {
    color: var(--awb-color1, #fff);
    font-family: "Barlow Regular", sans-serif;
    font-size: 16px;
    line-height: 21px;
    margin: 21px 0 40px;
}

.dfs-ap-liste-kontakt a {
    color: inherit;
    text-decoration: none;
}

.dfs-ap-liste-kontakt a:hover {
    text-decoration: underline;
}