/* Leistung – Beschreibung (Paper: „Leistungsbeschreibung“, Maße nach Template „service-details“)
   Kontaktformular links (Baustein .dao-form-card), Beschreibung rechts (Baustein .dao-prose), Fotos und Ergebnis-Box */
.dao-leistung-details {
  display: flex;
  flex-direction: row; /* ACSS setzt Sektionen auf column */
  align-items: flex-start;
  justify-content: space-between;
  gap: 70px;
  margin: 0;
  padding: var(--dao-section-space) var(--dao-gutter) 0; /* Styleguide: 140/112/80 px oben; unten 0, weil die FAQ denselben Hintergrund hat */
  background-image: radial-gradient(ellipse 32% 42% at 18% 40% in oklab, var(--dao-glow-lila) 0%, var(--dao-seitengrund-0) 100%);
}

/* Beschreibung */
.dao-leistung-details__content {
  flex: 0 1 870px;
  min-width: 0;
}

.dao-leistung-details__images {
  display: flex;
  gap: 8px;
}

.dao-leistung-details__image {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 330px;
  border-radius: 6px;
  background: url("../assets/ueber-bildflaeche.svg") center / cover no-repeat;
}

/* echtes Foto: wie auf der Beratungsseite Blauverlauf von unten und das feine Logo-Muster, das nach oben ausläuft */
.dao-leistung-details__image--foto {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: none;
}

.dao-leistung-details__image--foto img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dao-leistung-details__image--foto::before,
.dao-leistung-details__image--foto::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.dao-leistung-details__image--foto::before {
  height: 75%;
  background: linear-gradient(in oklab 0deg,
    color-mix(in srgb, var(--dao-nachtblau) 62%, transparent) 0%,
    color-mix(in srgb, var(--dao-nachtblau) 22%, transparent) 55%,
    transparent 100%);
}

.dao-leistung-details__image--foto::after {
  height: 50%;
  background: url("../assets/beratung-hero-muster.svg") center bottom / cover no-repeat;
  opacity: 0.6;
}

.dao-leistung-details__image-label {
  font-family: var(--dao-font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dao-weiss);
}

.dao-leistung-details__image-text {
  font-family: var(--dao-font);
  font-size: 14px;
  line-height: 21px;
  color: var(--dao-weiss-70);
}

/* Typische Ausgangslagen: zwei Spalten, Plus in DAO-Blau, Trennlinie (Paper: „Typische Ausgangslagen“) */
.dao-leistung-details__situations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dao-leistung-details__situations li {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--dao-linie-stark);
  font-family: var(--dao-font);
  font-size: 16px;
  line-height: 24px;
  color: var(--dao-navy);
}

.dao-leistung-details__situations li::before {
  content: "+";
  flex: 0 0 14px;
  color: var(--dao-blau);
}

/* Stichwort am Absatzanfang (Kennzahlen und KI) */
.dao-leistung-details__content p strong {
  font-weight: 500;
  color: var(--dao-navy);
}

/* Formular-Karte: Radius wie Karten im Styleguide */
.dao-leistung-details .dao-form-card {
  border-radius: 8px;
}

/* FAQ direkt danach: gleicher Hintergrund, daher voller Section-Abstand oben */
.dao-leistung-details + .dao-faq {
  padding-top: var(--dao-section-space);
}

/* keine Trennlinie über den Fragen (Linie aus .dao-faq--split) */
.dao-leistung-details + .dao-faq::before {
  display: none;
}

/* Ergebnis-Box */
.dao-leistung-details__result {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border: 1px solid var(--dao-lila-rand);
  border-radius: 8px;
  background: linear-gradient(in oklab 180deg, var(--dao-lilaverlauf-start) 0%, var(--dao-lilaverlauf-ende) 75%);
}

/* Tablet: Beschreibung zuerst, Formular darunter über die volle Breite */
@media (max-width: 1199px) {
  .dao-leistung-details {
    flex-direction: column;
    align-items: stretch;
    gap: 60px;
  }

  .dao-leistung-details__content {
    flex: none;
  }

  .dao-leistung-details .dao-form-card {
    order: 2;
  }

  .dao-leistung-details__image {
    min-height: 280px;
  }
}

/* Mobil */
@media (max-width: 767px) {
  .dao-leistung-details {
    gap: 40px;
  }

  .dao-leistung-details__images {
    flex-direction: column;
  }

  .dao-leistung-details__situations {
    grid-template-columns: 1fr;
  }

  .dao-leistung-details__situations li {
    padding: 12px 0;
    font-size: 14px;
    line-height: 21px;
  }

  .dao-leistung-details__image {
    min-height: 200px;
  }

  .dao-leistung-details__result {
    padding: 20px;
  }
}