.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  /* Alignment of the cards within the row (most visible when there are fewer
     cards than columns). --cards-align is set per block from the ACF "Cards
     alignment" setting; defaults to left. */
  justify-content: var(--cards-align, flex-start);
}
.cards > * {
  /* Fixed card width = (row - gaps) / columns, so cards never stretch.
     --cards-per-row is set per block from the ACF "Cards per row" setting.
     grow 0 = no stretching; shrink 1 = absorb sub-pixel rounding so exactly
     N fit per row. */
  flex: 0 1
    calc(
      (100% - (var(--cards-per-row, 3) - 1) * 16px) / var(--cards-per-row, 3)
    );
  min-width: 0;
  padding: 29px;
  border-radius: 10px;
  /* border: 1px solid rgba(0, 0, 0, 0); */
  background: #f4f4f3;
}

/* Reduce columns on smaller screens so cards never get too narrow. */
@media (max-width: 991px) {
  .cards > * {
    /* 2 per row */
    flex-basis: calc((100% - 16px) / 2);
  }
}
@media (max-width: 560px) {
  .cards > * {
    /* 1 per row */
    flex-basis: 100%;
  }
}
.card__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.card-upper {
  margin-bottom: 100px;
}
.card-bottom {
  width: 100%;
}
.card-bottom svg {
  width: 36px;
  height: 36px;
}
/* Card links: red, no underline — everywhere and across every variant
   (clasic / accent / border-colored). Client comment #115 "link at the end in
   red", #33 "ohne farbige Linie unten --> gilt generell", Rico "Link unten rot
   … eigentlich überall". Scoped to `.card__item` so the shared `.card__link`
   class on table-block footer links (.oda-tbl-block__link) is untouched. The
   !important beats the per-card inline `style="color:…"` on accent/border
   templates so links are uniformly red, never the old card/border color. */
.card__item .card__link {
  color: #c00 !important;
  text-decoration: none !important;
}
.card__link {
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.08px;
  font-size: 16px;
}

/* Bullet lists inside cards — red dash marker on the left, same as the rest
   of the site (.oda-sec__body li, .oda-pmap__list li …). */
.card__item .paragraph__16 ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.card__item .paragraph__16 li {
  position: relative;
  padding: 12px 0 12px 20px;
  font-size: 16px;
  line-height: 24px;
  color: #2f3624;
  border-bottom: 1px solid #e6e4e0;
}
.card__item .paragraph__16 li:last-child {
  border-bottom: 0;
}
.card__item .paragraph__16 li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  top: 12px;
  color: #c00;
  font-weight: 600;
}
.card__item .paragraph__16 p {
  margin: 0;
}

/* Home (mobile): the "Bereiche / Unsere vier zentralen Aufgabenfelder" heading
   above the area cards is omitted on small screens (Figma 650:712, mobile Home). */
@media (max-width: 782px) {
  body.home .reusable-cards .section__heading { display: none; }

  /* Reduce the oversized gap between the card text and the bottom "Mehr
     entdecken" link on mobile. The desktop min-gap is 100px (keeps links
     bottom-aligned across a tall row); on a single-column phone that leaves a
     huge empty band. Figma mobile spec (1348:1277 card 1348:1460): 26px card
     padding + 20px gap between the text block and the link (Margin pt-[20px]).
     Client comment #181 "reduced spacing for mobile cards" / #144. */
  .cards > * {
    padding: 26px;
  }
  .card-upper {
    margin-bottom: 20px;
  }
}