/* Testimonials Section */
.testimonials {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}

.testimonial-item {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
  width: 48%;
  margin-bottom: 20px;
  border-radius: 8px;
}

.testimonial-item img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin-right: 15px;
  float: left;
}

.testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
}

.testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 5px 0;
}

.testimonial-item p {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-style: italic;
  margin-top: 10px;
}

/* Hintergrundfarbe und Textfarbe für den Footer */
#footer {
  background-color: #82d28c; /* Grüner Hintergrund */
  color: white; /* Weißer Text im Footer */
  padding: 30px 0; /* Etwas Abstand oben und unten */
}

/* Footer-Inhalt zentrieren, aber die Spalten gleichmäßig verteilen */
#footer .footer-top {
  justify-content: space-between; /* Spalten gleichmäßig verteilen */
  align-items: flex-start; /* Oben ausrichten */
  flex-wrap: wrap; /* Felder umbrechen, wenn der Bildschirm zu schmal wird */
  gap: 30px; /* Abstand zwischen den Feldern */
  text-align: left; /* Text innerhalb der Felder bleibt linksbündig */
}

/* Flex-Einstellungen für die einzelnen Spalten */
#footer .footer-about,
#footer .footer-links,
#footer .footer-follow {
  flex: 1 1 30%; /* Jede Spalte nimmt mindestens 30% der Breite ein */
  min-width: 220px; /* Mindestbreite für eine bessere Darstellung */
  text-align: left; /* Text innerhalb der Spalten bleibt linksbündig */
}

/* Entfernen der Aufzählungszeichen und der Standard-Padding für die Listen */
#footer ul {
  list-style-type: none; /* Entfernt Aufzählungszeichen */
  padding-left: 0; /* Entfernt extra Einzug */
  margin: 0; /* Entfernt den Standardabstand */
}

#footer ul li {
  padding-left: 0; /* Entfernt den zusätzlichen Abstand */
}

/* Links im Footer auf Weiß setzen */
#footer a {
  color: white !important; /* Links im Footer auf Weiß setzen */
  text-decoration: none; /* Entfernt Unterstreichungen */
}

/* Hover-Effekt für Links */
#footer a:hover {
  color: #FFD700; /* Links werden goldfarben beim Hover */
}

/* Vergrößern des Textes "Sei Dortmund. Für Alle. Für Dich." */
.sitename {
  font-size: 2rem; /* Schriftgröße erhöhen */
  font-weight: bold; /* Fett machen */
  color: #FFD700; /* Goldene Farbe */
}

.footerrs {
padding-top: 60px;
}

.footerpad{
margin-left:100px;
}

/* Sicherstellen, dass die Karten in einer 3er-Reihe auf mittleren und großen Bildschirmen bleiben */
.row.g-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Der Abstand zwischen den Spalten */
}

/* Hier wird die Spaltenbreite auf 33.333% gesetzt und der Abstand wird abgezogen */
.col-md-4 {
  flex: 0 0 calc(33.333% - 20px); /* Berechnet die Breite der Spalte abzüglich des Abstands */
}

/* Setze eine feste Höhe für die Karten */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

/* Setzt eine feste Höhe für die Bilder und stellt sicher, dass sie gleichmäßig bleiben */
.card-img-top {
  object-fit: cover;
}




/* Mobile Anpassungen */
@media (max-width: 768px) {
  .testimonials {
    flex-direction: column;
  }

  .testimonial-item {
    width: 100%;
  }
}