/* ==========================================================================
   transformis® · Ueberschrift + Text + Checkliste auf Grau (Gutenberg Block)
   --------------------------------------------------------------------------
   Figma-Vorlage "Aufzaehlung", auf die globalen Tokens gezogen:
     Hintergrund #F4F4F4       -> --tm-gray-light
     headline/sm (700/24px)    -> head-sm aus base.css (800/20px)
     body/m (16px)             -> body-m aus base.css (18px/1.6)
   Abstaende (32/16/32, Padding 32 32 64) 1:1 aus Figma.

   !important, weil Seiten-CSS (z. B. .tm-lp-content__inner h2/p/ul li und
   dessen gruene ::before-Pfeile) sonst Farbe, Groesse und Abstaende setzt.
   ========================================================================== */

.tm-check-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: var(--tm-gray-light, #F5F5F5) !important;
  padding: 32px 32px 64px !important;
  margin: 48px 0 !important;
}

/* ── Kopf: Ueberschrift + Einleitung ── */
.tm-check-list__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tm-check-list .tm-check-list__heading {
  font-family: var(--tm-font-heading, "Open Sans", sans-serif) !important;
  font-weight: var(--tm-fw-extrabold, 800) !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  color: var(--tm-black, #08080A) !important;
  margin: 0 !important;
}

.tm-check-list .tm-check-list__intro {
  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-black, #08080A) !important;
  margin: 0 !important;
}

/* ── Liste ── */
.tm-check-list .tm-check-list__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tm-check-list .tm-check-list__item {
  display: flex !important;
  align-items: flex-start;
  gap: 16px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Pfeil-Deko aus dem Seiten-CSS abschalten – das Haekchen ersetzt sie. */
.tm-check-list .tm-check-list__item::before {
  content: none !important;
  display: none !important;
}

/* ── Haekchen: gruenes Quadrat (4px Radius), schwarzer Haken ── */
.tm-check-list__icon {
  flex: none;
  display: block;
  width: 30px;
  height: 30px;
}

.tm-check-list__icon rect {
  fill: var(--tm-green, #ABFF00);
}

.tm-check-list__icon path {
  fill: none;
  stroke: var(--tm-black, #08080A);
  stroke-width: 2;
  stroke-linecap: square;
}

/* ── Stichpunkt-Text: body-m blau, Einstieg fett ── */
.tm-check-list .tm-check-list__label {
  flex: 1 1 auto;
  min-width: 0;
  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;
}

.tm-check-list .tm-check-list__label strong,
.tm-check-list .tm-check-list__label b {
  font-weight: var(--tm-fw-bold, 700) !important;
}

.tm-check-list .tm-check-list__intro a,
.tm-check-list .tm-check-list__label a {
  color: var(--tm-blue, #05132C) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}


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

@media (max-width: 600px) {
  .tm-check-list {
    gap: 24px;
    padding: 32px 24px 48px !important;
  }

  .tm-check-list .tm-check-list__list {
    gap: 24px;
  }

  .tm-check-list .tm-check-list__intro,
  .tm-check-list .tm-check-list__label {
    font-size: 16px !important;
  }

  .tm-check-list .tm-check-list__item {
    gap: 12px;
  }
}