/* Services-Seite */

/* Übersichtskarten als Links */
.service-card { display: flex; flex-direction: column; color: var(--text); }
.service-card:hover { color: var(--text); }
.service-card h3 { color: var(--dark); transition: color .2s; }
.service-card:hover h3 { color: var(--primary); }
.service-card p { flex: 1; }
.service-card__more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-weight: 600; font-size: .9rem; color: var(--primary);
}
.service-card__more svg { width: 16px; height: 16px; transition: transform .2s; }
.service-card:hover .service-card__more svg { transform: translateX(4px); }
.service-card:focus-visible { outline-offset: 4px; border-radius: var(--radius-lg); }

/* Übergang „Unsere Leistungen“ */
.leistungen-intro { padding-bottom: 0; }
.leistungen-intro .section-head { margin-bottom: 0; }
.leistungen-intro + .service-detail { padding-top: clamp(40px, 5vw, 64px); }

/* Detailabschnitte */
.service-detail { scroll-margin-top: var(--header-h); }
.service-detail h2 { margin-bottom: .5em; }
.service-detail p:last-child { margin-bottom: 0; }
.service-img { aspect-ratio: 3 / 2; height: auto; }

/* Abwechselnde Anordnung: Grafik links */
@media (min-width: 861px) {
  .split--reverse > :first-child { order: 2; }
}

/* Dekorative Icon-Fläche */
.service-visual {
  position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius-lg);
  display: grid; place-items: center; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  box-shadow: var(--shadow-lg);
}
.service-visual::before, .service-visual::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .14);
}
.service-visual::before { width: 70%; aspect-ratio: 1; right: -18%; top: -30%; }
.service-visual::after { width: 45%; aspect-ratio: 1; left: -12%; bottom: -22%; background: rgba(255, 255, 255, .06); }
.service-visual svg { position: relative; z-index: 1; width: clamp(80px, 26%, 140px); height: auto; opacity: .95; }
.service-visual__label {
  position: absolute; z-index: 1; right: 22px; bottom: 16px;
  font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; color: rgba(255, 255, 255, .85); line-height: 1;
}
.section--alt .service-visual { background: linear-gradient(135deg, var(--dark-2) 0%, var(--primary-dark) 100%); }

@media (max-width: 860px) {
  .service-visual { aspect-ratio: 16 / 9; }
}