/* Haupt-Container */
.services-container,
.systemsteuerung-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1rem !important;
}

/* Gruppentitel */
.service-group-name {
  text-align: center !important;
  font-size: 2.5rem !important;
  font-weight: bold !important;
  color: white !important;
  margin-bottom: 1.5rem !important;
  width: 100%;
  display: block;

  /* Schwarzer dünner Schatten als Umrandung */
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;

  /* NEU: Klickbarkeit verhindern */
  pointer-events: none !important;
  cursor: default !important;
}

/* Optional: Klapp-Pfeile ausblenden (falls vorhanden) */
.service-group-name::before {
  display: none !important;
}

/* Jede Kachel */
.service-card {
  width: 300px !important;   /* Breite hier anpassen */
  min-width: unset !important;
  max-width: unset !important;
  flex: none !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  color: white !important;
  height: 90px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0.75rem !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  position: relative !important;

  /* Animation für Hover-Effekt */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

/* Hover-Effekt */
.service-card:hover {
  transform: scale(1.03) !important;
  z-index: 10 !important;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1) !important;
}

/* Link der gesamten Kachel (wenn <a> direkt in .service-card) */
.service-card > a {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 20 !important;
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
}

/* Logo links */
.service-icon {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 10px !important;
  position: relative !important; /* damit über dem <a> */
  z-index: 30 !important;
}

/* Textbereich (zentriert über ganze Kachel) */
.service-title-text {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  pointer-events: auto !important;
  z-index: 30 !important; /* über dem Link */

  /* WICHTIG: Keine 'justify-between' im Link, sondern zentriert */
  justify-content: center !important;
}

/* Service-Name */
.service-name {
  font-size: 1.4rem !important;
  font-weight: bold !important;
  color: white !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  position: relative !important;
  z-index: 30 !important;
  text-align: center !important; /* Zentrierung */
}

/* Beschreibung: zentriert unter Name */
.service-description {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #dddddd !important;
  margin-top: 0.2rem !important;
  text-align: center !important;
  white-space: nowrap !important;
  position: relative !important;
  z-index: 30 !important;
}

/* Gruppentitel h2 (alternativ) */
h2.text-2xl {
  text-align: center !important;
  color: white !important;
  font-size: 2.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* Flexbox für Services-Liste */
.services-list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1rem !important;
}

/* Feste Kachelbreite */
.services-list .service {
  flex: 0 0 300px !important;
}

/* Zentrierter Link-Inhalt */
.service-title-text > a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}