.cardSection {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  /* Zentriert die Karten horizontal */
  gap: 20px;
  /* Abstand zwischen den Karten */
  padding: 20px;
  /* Optional: Padding um die Karten herum */
   background-color: var(--color-background);
   margin: 12rem 8rem;
}

.cardSection p {
  font-family: ’DeineZweiteSchriftart’;
 
}

.card1,
.card2,
.card3,
.card4,
.card5 {
  display: block;
  flex-direction: column;
  width: min(18%, 28%);
  height: 300px;
  background-color: var(--color-background);
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1%;
}

.round-card {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 185px;
  height: 125px;
  background-color: brown;
  border-radius: 50%; /* Perfekter Kreis */
  color: white;
  font-size: 1.2rem;
  margin: 0 10px 2em 0;
  position: relative; /* Wichtig für die Positionierung der Pseudo-Elemente */
}

/* Manuelle Nummerierung für jedes Element */
/* .round-card:nth-of-type(1)::before { content: "1"; }
.round-card:nth-of-type(2)::before { content: "2"; }
.round-card:nth-of-type(3)::before { content: "3"; }
.round-card:nth-of-type(4)::before { content: "4"; }
.round-card:nth-of-type(5)::before { content: "5"; }
.round-card:nth-of-type(6)::before { content: "6"; } */

/* Gemeinsame Stile für die Pseudo-Elemente */
.round-card::before {
  position: absolute;
  color: white;
  font-size: 0.8rem; /* Kleinere Schriftgröße */
  left: 20%; /* Weiter links positioniert */
  top: 30%; /* Etwas nach unten verschoben */
  transform: translateX(-50%); /* Feinjustierung der horizontalen Position */
  z-index: 1; /* Stellt sicher, dass die Zahl über dem Kreis liegt */
}

.round-card::after {
  content: "";
  /* Weitere Styles */
}

.round-card img {
  width: 100%;
  border-radius: 545%;
  margin: 0 auto;
}

.card1 h5,
.card2 h5,
.card3 h5,
.card4 h5,
.card5 h5 {
  font-size: 0.9rem;
  margin-bottom: 10px;
  line-height: normal;
  color: var(--color-accent-dark);
}

.card1 p,
.card2 p,
.card3 p,
.card4 p,
.card5 p {
  font-size: clamp(0.6rem, 1.4rem, 0.8rem);
  text-align: center;
  /* Zentrierter Text */
  line-height: 1.2rem;
  color: var(--color-accent-terra);
  font-weight: 600;
}

.card1 p:first-of-type,
.card2 p:first-of-type,
.card3 p:first-of-type,
.card4 p:first-of-type,
.card5 p:first-of-type {
  padding-top: 22px;
}
@media (max-width: 991px) {
  .cardSection {
    gap: 16px;
    padding: 16px;
  }

  .card1,
  .card2,
  .card3,
  .card4,
  .card5 {
    flex: 1 1 calc(50% - 16px);
    max-width: none;
    min-height: 260px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .cardSection {
    padding: 12px;
    gap: 14px;
  }

  .card1,
  .card2,
  .card3,
  .card4,
  .card5 {
    flex: 1 1 100%;
    min-height: auto;
    padding: 20px 14px;
  }

  .round-card {
    width: 80px;
    height: 80px;
    margin-bottom: 18px;
  }

  .card1 h5,
  .card2 h5,
  .card3 h5,
  .card4 h5,
  .card5 h5 {
    font-size: 0.95rem;
  }

  .card1 p,
  .card2 p,
  .card3 p,
  .card4 p,
  .card5 p {
    font-size: 0.9rem;
    line-height: 1.4;
  }
}