:root {
  --text: 10, 37, 64; /* Brand Dark RGB */
  --highlight: 0, 86, 179; /* Brand Blue RGB */
}

.hero-pattern {
  background-color: #0a2540;
  /* Helleres, freundlicheres Bild (Beratungssituation oder helles Bad) wirkt einladender */
  background-image: linear-gradient(
      rgba(10, 37, 64, 0.8),
      rgba(10, 37, 64, 0.7)
    ),
    url("https://images.unsplash.com/photo-1621905251189-08b45d6a269e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80");
  background-size: cover;
  background-position: center;
}

/* Animation Classes */
.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, visibility;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: none;
}

/* Custom Hover Effects */
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}