/**
 * Leistungen page — DT_Leistungen / MO_Leistungen
 */

.page-leistungen {
  /* Primary pad + logo + gap under nav (aligned with Über mich) */
  padding-top: calc(1.5rem + 3.5rem + 5.5rem);
  padding-bottom: 5rem;
  color: var(--color-cd);
  overflow-x: clip;
}

@media (min-width: 1024px) {
  .page-leistungen {
    padding-top: calc(1.5rem + 4.375rem + 7.625rem);
    padding-bottom: 6rem;
  }
}

.page-leistungen__heading {
  margin: 0;
  color: var(--color-cd);
}

.page-leistungen__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 0.5rem; /* 20px row / 8px col — MO */
  margin-top: 4rem; /* 64px heading → tags */
  margin-bottom: 5rem; /* 80px tags → detail */
}

@media (min-width: 1024px) {
  .page-leistungen__tags {
    gap: 1.25rem; /* 20px */
  }
}

.page-leistungen .btn--cd-outline.is-active,
.page-leistungen .btn--cd-outline[aria-selected="true"] {
  background: var(--color-cd);
  border-color: var(--color-cd);
  color: var(--color-white);
}

.page-leistungen__detail {
  margin-top: 0; /* spacing from tags margin-bottom */
  align-items: start;
  row-gap: 3rem;
}

@media (min-width: 1024px) {
  .page-leistungen__detail {
    row-gap: var(--grid-gutter);
  }
}

/* Mobile order: copy → image */
.page-leistungen__content {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem; /* 48px text → CTA */
  min-width: 0;
}

.page-leistungen__media {
  order: 2;
  position: relative;
  aspect-ratio: 715 / 656;
  border-radius: 1.875rem;
  overflow: clip;
  background: var(--color-gray-light);
}

@media (min-width: 1024px) {
  .page-leistungen__content,
  .page-leistungen__media {
    order: unset;
  }
}

.page-leistungen__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0;
  z-index: 0;
  will-change: opacity;
}

.page-leistungen__image.is-active {
  opacity: 1;
  z-index: 1;
}

.page-leistungen__text {
  margin: 0;
  color: var(--color-cd);
}

.page-leistungen__cta {
  margin: 0;
}