.services-section {
  padding: 100px 60px;
  background-color: #fcfcfc; /* Minimaler Kontrast zur weißen Vision-Sektion */
  text-align: center;
}

.services-header {
  margin-bottom: 60px;
}

.services-header h2 {
  font-family: 'Inter';
}

.services-grid {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.service-card {
  background: white;
  border: 1px solid #eee;
  padding: 40px;
  border-radius: 24px;
  max-width: 320px;
  transition: all 0.3s ease;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.service-card:hover {
  transform: translateY(-12px);
  border-color: #00ff88;
  box-shadow: 0 20px 40px rgba(0, 255, 136, 0.1);
}

.service-card h3 {
  font-family: 'Plus Jakarta Sans';
  font-size: 24px;
  margin-bottom: 15px;
  color: #0a0a0a;
}

.service-card p {
  font-family: 'Inter';
  color: #666;
  line-height: 1.6;
}

/* Dadurch sind sie by default entsättigter und beim Drüberhover färben sie sich wieder */

.service-icon {
  width: 70px;
  height: 70px;
  background: rgba(0, 255, 136, 0.08);
  border-radius: 50%;
  
  /* Zentriert das Icon (Emoji) im grünen Kreis */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Zentriert den gesamten Kreis horizontal in der Card */
  margin: 0 auto 25px auto; 
  
  font-size: 32px;
  filter: saturate(0.4) sepia(0.1) hue-rotate(100deg);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.service-card:hover .service-icon {
  /* Beim Hover kommt die volle Pracht zurück + ein kleiner Glow */
  filter: saturate(1) sepia(0) hue-rotate(0deg) brightness(1);
  transform: scale(1.2) rotate(5deg);
}