/* ===== Service Navigation (Prev / Next) ===== */
.service-nav-section {
  border-top: 1px solid var(--color-border-dark-light);
  padding: 0; /* override global section { padding: ... } from layout.css */
}

.service-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xl) 0;
  gap: var(--spacing-lg);
}

.service-nav--only-next {
  justify-content: flex-end;
}

.service-nav-prev,
.service-nav-next {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-text-light-muted);
  text-decoration: none;
  transition: color var(--transition-base, 0.25s ease-in-out);
  max-width: 48%; /* prevents items from touching when gap collapses */
}

.service-nav-prev:hover,
.service-nav-next:hover {
  color: var(--color-text-light);
}

.service-nav-next {
  flex-direction: row-reverse;
  text-align: right;
}

.service-nav-text {
  display: flex;
  flex-direction: column;
}

.service-nav-next .service-nav-text {
  align-items: flex-end;
}

.service-nav-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-light-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.service-nav-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.service-nav-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

@media (max-width: 640px) {
  .service-nav {
    padding: var(--spacing-lg) 0;
  }

  .service-nav-title {
    font-size: var(--font-size-base);
  }

  /* Pfeil rechts beim "Nächste"-Link */
  .service-nav-next {
    flex-direction: row;
    text-align: right;
  }

  .service-nav-next .service-nav-text {
    align-items: flex-end;
  }
}