/* ==========================================================================
   KI CREW – Produktseiten (Detailseite und Übersicht)

   Ergänzt base.css und definiert nur eigene .kc-produkt-*-Klassen. Geteilte
   Komponenten (.kc-hero, .kc-card, .kc-facts, .kc-checklist, .kc-iconbox,
   .kc-media …) kommen vollständig aus base.css und werden hier nur dort
   feinjustiert, wo die Produktseite von der Grundform abweicht. Die Kopfsektion
   ist vollständig .kc-hero aus base.css, das Raster der Übersicht liefert
   pages.css.

   Aufbau: Inhalt & Nutzen · Feature-Blöcke · Zielgruppen-Karte · Produktkarte ·
   Hinweisblock.
   ========================================================================== */

/* ------------------------------------------------- Inhalt und Nutzen-Liste */

.kc-produkt-content__grid {
  display: grid;
  gap: var(--kc-space-5);
}

.kc-produkt-content__main,
.kc-produkt-content__aside {
  min-width: 0;
}

.kc-produkt-content__title {
  margin: 0 0 var(--kc-space-2);
}

.kc-produkt-content__intro {
  display: grid;
  gap: var(--kc-space-2);
  margin-top: var(--kc-space-3);
}

.kc-produkt-content__text {
  max-width: 68ch;
}

.kc-produkt-content__prose {
  margin-top: var(--kc-space-3);
  max-width: 68ch;
}

/* Nutzen-Checkliste in der flachen Karte (Card-Grau). */
.kc-produkt-benefits {
  padding: var(--kc-space-4);
}

.kc-produkt-benefits__title {
  margin-bottom: var(--kc-space-3);
}

@media (min-width: 1024px) {
  .kc-produkt-content__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--kc-space-6);
  }

  /* Fehlt eine der beiden Hälften, bleibt der Text auf Lesebreite. */
  .kc-produkt-content__grid--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 900px;
  }

  .kc-produkt-benefits {
    padding: var(--kc-space-5);
  }
}

/* ------------------------------------------------------------ Feature-Blöcke */

.kc-produkt-features__title {
  margin-bottom: var(--kc-space-2);
}

.kc-produkt-features__grid {
  margin-top: var(--kc-space-2);
}

.kc-produkt-features__grid--cards {
  gap: var(--kc-space-3);
}

.kc-produkt-features__grid--colset {
  gap: var(--kc-space-4);
}

.kc-produkt-feature {
  min-width: 0;
}

/* Spaltensatz: dünne Trennlinie über dem Block, keine Karte, kein Schatten. */
.kc-produkt-feature--plain {
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-2);
  padding-top: var(--kc-space-3);
  border-top: 1px solid var(--kc-line);
}

.kc-produkt-feature__text {
  margin: 0;
}

/* -------------------------------------------------------- Zielgruppen-Karte */

.kc-produkt-audience__card {
  padding: var(--kc-space-4);
}

.kc-produkt-audience__head {
  display: flex;
  align-items: center;
  gap: var(--kc-space-3);
}

.kc-produkt-audience__icon {
  flex: none;
}

.kc-produkt-audience__text {
  margin-top: var(--kc-space-3);
  max-width: 68ch;
}

.kc-produkt-audience__list {
  margin-top: var(--kc-space-4);
}

.kc-produkt-audience__action {
  margin-top: var(--kc-space-4);
}

@media (min-width: 760px) {
  .kc-produkt-audience__card {
    padding: var(--kc-space-5);
  }
}

/* ------------------------------------------------------------- Produktkarte */

/* Raster und Leermeldung der Übersicht kommen aus pages.css (.kc-page-offers). */

.kc-produkt-card__media {
  position: relative;
}

/* Die Bildfläche sitzt bündig an der Kartenkante; den Radius gibt .kc-card. */
.kc-produkt-card__media .kc-media,
.kc-produkt-card__media .kc-placeholder {
  border-radius: 0;
}

/* Icon-Marke des Produkts, halb über der Bildkante. */
.kc-produkt-card__icon {
  position: absolute;
  bottom: calc(-1 * var(--kc-space-3));
  left: var(--kc-space-4);
}

/* Nur wenn das Icon über der Bildkante hängt, braucht der Text darunter Luft. */
.kc-produkt-card__media:has(.kc-produkt-card__icon) + .kc-produkt-card__body {
  padding-top: var(--kc-space-5);
}

/* Dreiwort-Claim: Kopfschrift, schwarz – Flieder bleibt Kicker und Buttons. */
.kc-produkt-card__claim {
  font-family: var(--kc-font-head);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--kc-black);
}

.kc-produkt-card__teaser {
  margin: 0;
}

/* -------------------------------------------------------------- Hinweisblock */

.kc-produkt-hinweis__inner {
  display: grid;
  gap: var(--kc-space-4);
}

.kc-produkt-hinweis__text {
  min-width: 0;
}

.kc-produkt-hinweis__title {
  margin-bottom: var(--kc-space-2);
}

.kc-produkt-hinweis__paragraph {
  max-width: 72ch;
}

.kc-produkt-hinweis__paragraph + .kc-produkt-hinweis__paragraph {
  margin-top: var(--kc-space-2);
}

@media (min-width: 980px) {
  .kc-produkt-hinweis__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--kc-space-6);
  }

  .kc-produkt-hinweis__action {
    justify-self: end;
  }
}