/* v2.1 – robuste Leistungsdarstellung für unterschiedliche Monitore, Zoomstufen und Browser
   Ziel: keine dunklen Rendering-Balken, keine Textüberlagerungen und deutlich lesbarere Nummern. */

/* Komplexe Blur-/Filtereffekte können auf einzelnen Grafikkarten dunkle Flächen erzeugen. */
.service-page,
.service-page.is-active,
.service-page.is-preparing,
.service-page.is-leaving,
.service-page.is-leaving.to-left,
.service-page.is-leaving.to-right {
  filter: none !important;
}

.service-page {
  transform: translate3d(var(--page-x), 0, 0) !important;
  transition:
    opacity .46s ease,
    transform .6s cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear .62s !important;
}

.service-page.is-active {
  transform: translate3d(0, 0, 0) !important;
}

/* Die Cards verwenden bewusst eine einfache, gleichmäßige Fläche statt GPU-intensiver Overlays. */
.service-page .service-card {
  display: flex !important;
  flex-direction: column !important;
  isolation: isolate;
  overflow: hidden !important;
  min-height: clamp(24rem, 28vw, 27rem) !important;
  padding: clamp(1.5rem, 2vw, 2rem) !important;
  border: 1px solid rgba(224, 174, 105, .42) !important;
  background: linear-gradient(180deg, #142b43 0%, #10243a 54%, #0d2034 100%) !important;
  box-shadow:
    0 1.35rem 3.6rem rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}

/* Alte Glanz- und Textur-Layer vollständig abschalten: sie waren die wahrscheinlichste Ursache
   für den schwarzen Balken auf einzelnen Systemen. */
.service-page .service-card::before {
  content: none !important;
  display: none !important;
}

/* Schlichte, browserstabile Trennlinie unter dem Iconbereich. */
.service-page .service-card::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  left: clamp(1.5rem, 2vw, 2rem) !important;
  right: clamp(1.5rem, 2vw, 2rem) !important;
  top: 5.85rem !important;
  height: 1px !important;
  opacity: 1 !important;
  transform: none !important;
  background: linear-gradient(90deg, rgba(224, 174, 105, .78), rgba(224, 174, 105, .14), transparent) !important;
  pointer-events: none !important;
}

.service-page .service-card > * {
  position: relative;
  z-index: 1;
}

.service-page.is-active .service-card {
  animation: serviceCardEnterSafe .58s cubic-bezier(.16, 1, .3, 1) both !important;
  animation-delay: calc(var(--card-order) * 70ms + 40ms) !important;
}

@keyframes serviceCardEnterSafe {
  from { opacity: 0; transform: translateY(1.15rem) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.service-page .service-card:hover {
  transform: translateY(-.32rem) !important;
  border-color: rgba(240, 196, 127, .72) !important;
  box-shadow:
    0 1.8rem 4.4rem rgba(0, 0, 0, .34),
    0 0 0 1px rgba(240, 196, 127, .055) inset !important;
}

.service-page .service-card .icon-chip {
  flex: 0 0 auto;
  width: 3rem !important;
  height: 3rem !important;
  margin: 0 0 3.55rem !important;
  border-color: rgba(240, 196, 127, .72) !important;
  background: rgba(240, 196, 127, .06) !important;
  color: #efbd79 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Nummern nicht mehr fast schwarz, sondern klar lesbar und trotzdem dekorativ. */
.service-page .service-card__number {
  z-index: 2 !important;
  top: 1rem !important;
  right: 1.35rem !important;
  color: rgba(229, 180, 111, .48) !important;
  font-size: clamp(3.25rem, 4.5vw, 4.75rem) !important;
  line-height: 1 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .03) !important;
}

.service-page .service-card h3 {
  min-height: 0 !important;
  margin: 0 0 1rem !important;
  color: #fff8ed !important;
  font-size: clamp(1.65rem, 2vw, 2.2rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.028em !important;
  text-wrap: balance;
}

.service-page .service-card p {
  flex: 1 1 auto;
  margin: 0 !important;
  color: rgba(238, 243, 248, .82) !important;
  font-size: clamp(.9rem, .9vw, 1rem) !important;
  line-height: 1.68 !important;
  overflow-wrap: anywhere;
}

/* Der Detail-Link ist nicht mehr absolut positioniert. Dadurch kann er bei Zoom und langen
   Übersetzungen niemals über den Text rutschen oder einen dunklen Streifen erzeugen. */
.service-page .service-card button {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  flex: 0 0 auto;
  width: 100% !important;
  min-height: 2.9rem;
  margin-top: 1.45rem !important;
  padding: 1rem 0 .15rem !important;
  border-top: 1px solid rgba(224, 174, 105, .24) !important;
  color: #efbd79 !important;
  opacity: 1 !important;
  transform: none !important;
}

.service-page .service-card button:hover,
.service-page .service-card button:focus-visible {
  color: #fff7e9 !important;
}

/* Vierergruppe kompakt, aber weiterhin gut lesbar. */
@media (min-width: 1121px) {
  .service-page[data-count="4"] .service-card {
    min-height: 24rem !important;
    padding-inline: clamp(1.25rem, 1.55vw, 1.7rem) !important;
  }
  .service-page[data-count="4"] .service-card::after {
    left: clamp(1.25rem, 1.55vw, 1.7rem) !important;
    right: clamp(1.25rem, 1.55vw, 1.7rem) !important;
  }
  .service-page[data-count="4"] .service-card h3 {
    font-size: clamp(1.4rem, 1.5vw, 1.75rem) !important;
  }
  .service-page[data-count="4"] .service-card p {
    font-size: .88rem !important;
  }
}

/* Früher auf zwei Spalten wechseln, damit Browserzoom und kleinere Büro-Monitore nicht quetschen. */
@media (max-width: 1280px) {
  .service-page,
  .service-page[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .service-page .service-card,
  .service-page[data-count="4"] .service-card {
    min-height: 22rem !important;
  }
}

@media (max-width: 700px) {
  .service-page,
  .service-page[data-count="4"] {
    grid-template-columns: 1fr !important;
  }
  .service-page .service-card,
  .service-page[data-count="4"] .service-card {
    min-height: 19.5rem !important;
    padding: 1.25rem !important;
  }
  .service-page .service-card::after,
  .service-page[data-count="4"] .service-card::after {
    left: 1.25rem !important;
    right: 1.25rem !important;
    top: 5.25rem !important;
  }
  .service-page .service-card .icon-chip {
    width: 2.65rem !important;
    height: 2.65rem !important;
    margin-bottom: 3.2rem !important;
  }
  .service-page .service-card__number {
    right: 1.1rem !important;
    color: rgba(229, 180, 111, .55) !important;
    font-size: 3.2rem !important;
  }
  .service-page .service-card h3 {
    font-size: clamp(1.55rem, 7vw, 1.95rem) !important;
  }
}

@media (prefers-contrast: more) {
  .service-page .service-card {
    border-color: rgba(240, 196, 127, .72) !important;
    background: #102740 !important;
  }
  .service-page .service-card__number { color: rgba(240, 196, 127, .72) !important; }
  .service-page .service-card p { color: #eef3f7 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .service-page,
  .service-page .service-card {
    animation: none !important;
    transition: none !important;
  }
}