/* ==========================================================================
   transformis® · Feature-Grid
   --------------------------------------------------------------------------
   Full-Width Raster mit runden Icon-Badges, Titeln und Text.
   Hintergrund #F5F5F5, 3-spaltiges Grid (Desktop).
   ========================================================================== */

/* ── Full-Width Ausbruch ── */
.tm-feature-grid {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  margin-top: 48px !important;
  margin-bottom: 0 !important;
  padding: 96px 0 !important;
  background: #F5F5F5 !important;
  box-sizing: border-box;
}

/* ── Inner Container ── */
.tm-feature-grid__inner {
  width: 1620px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--tm-content-padding, 24px);
}

/* ── Heading ── */
.tm-feature-grid__heading {
  font-family: var(--tm-font-heading, "Open Sans", sans-serif) !important;
  font-weight: var(--tm-fw-extrabold, 800) !important;
  font-size: clamp(28px, 3.5vw, 40px) !important;
  line-height: 1.3 !important;
  color: var(--tm-blue, #05132C) !important;
  margin: 0 0 64px !important;
  text-align: center;
}

/* ── Grid: 3 Spalten ── */
.tm-feature-grid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 40px;
}

/* ── Einzelnes Feature ── */
.tm-feature-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Icon ── */
.tm-feature-grid__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  flex-shrink: 0;
}

/* Inline-SVG: Farbe via currentColor/fill */
.tm-feature-grid__icon {
  width: 80px !important;
  height: 80px !important;
  display: block;
  margin: 0 !important;
  color: var(--tm-green, #A8AD00) !important;
  fill: var(--tm-green, #A8AD00) !important;
}

/* Fallback: <img>-Icons (Nicht-SVG) */
img.tm-feature-grid__icon {
  object-fit: contain;
}

/* ── Title (tm-head-m: ExtraBold 28px / 130%) ── */
.tm-feature-grid__title {
  font-family: var(--tm-font-heading, "Open Sans", sans-serif) !important;
  font-weight: var(--tm-fw-extrabold, 800) !important;
  font-size: 28px !important;
  line-height: 1.3 !important;
  color: var(--tm-blue, #05132C) !important;
  margin: 0 0 12px !important;
}

/* ── Text (tm-body-m: Regular 18px / 160%) ── */
.tm-feature-grid__text {
  font-family: var(--tm-font-body, "Open Sans", sans-serif) !important;
  font-weight: var(--tm-fw-regular, 400) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--tm-blue, #05132C) !important;
  margin: 0 !important;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

/* ── Tablet: 2 Spalten ── */
@media (max-width: 1100px) {
  .tm-feature-grid {
    padding: 72px 0 !important;
  }

  .tm-feature-grid__heading {
    margin-bottom: 48px !important;
  }

  .tm-feature-grid__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px;
  }
}

/* ── Mobil: 1 Spalte ── */
@media (max-width: 832px) {
  .tm-feature-grid {
    padding: 56px 0 !important;
  }

  .tm-feature-grid__heading {
    font-size: 26px !important;
    margin-bottom: 40px !important;
  }

  .tm-feature-grid__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .tm-feature-grid__badge {
    margin-bottom: 20px;
  }

  .tm-feature-grid__icon {
    width: 64px !important;
    height: 64px !important;
  }

  .tm-feature-grid__title {
    font-size: 24px !important;
  }

  .tm-feature-grid__text {
    font-size: 18px !important;
  }
}