/* ==========================================================================
   transformis® · Blauer Fragen-Block
   --------------------------------------------------------------------------
   Vollbreiter (full-bleed) blauer Bereich mit gruenem Deko-Pfeil links,
   H2-Ueberschrift (weiss) und Fragen in Gruen (head-sm, font-weight 800).
   Selektoren mit .wp-block-transformis-blue-questions fuer Gutenberg-Spezifitaet.
   ========================================================================== */

.tm-blue-questions,
.wp-block-transformis-blue-questions {
  position: relative;
  /* Full-Bleed: aus dem 947px-Content-Container bis an die Viewport-Raender */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--tm-blue, #05132C) !important;
  padding: 80px 0 !important;
  overflow: hidden;
  box-sizing: border-box;
}

/* Abstand nach oben nur fuer grosse Endgeraete */
@media (min-width: 901px) {
  .tm-blue-questions,
  .wp-block-transformis-blue-questions {
    margin-top: 72px !important;
  }
}

/* ── Dekorativer Pfeil: ganz links oben, ragt in den Rand ── */
.tm-blue-questions__arrow {
  position: absolute;
  left: -40px;
  top: 8px;
  width: clamp(120px, 14vw, 200px);
  height: auto;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

/* ── Inhalts-Container: identisch zu .tm-leistung__content-inner ── */
.tm-blue-questions__inner {
  position: relative;
  z-index: 1;
  width: 947px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--tm-content-padding);
  box-sizing: border-box;
}

/* ── H2-Ueberschrift: weiss ── */
.tm-blue-questions .tm-blue-questions__heading,
.wp-block-transformis-blue-questions .tm-blue-questions__heading,
h2.tm-blue-questions__heading {
  margin: 0 !important;
  font-family: var(--tm-font-heading, "Open Sans", sans-serif) !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 3.5vw, 40px) !important;
  line-height: 1.3 !important;
  color: var(--tm-white-soft, #FAFCFC) !important;
  text-transform: none !important;
}

/* ── Fragen-Liste ── */
.tm-blue-questions__list {
  list-style: none !important;
  margin: 32px 0 0 !important;
  padding: 0 !important;
}

.tm-blue-questions__item,
.tm-blue-questions .tm-blue-questions__item,
li.tm-blue-questions__item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--tm-font-heading, "Open Sans", sans-serif) !important;
  font-weight: 800 !important;
  font-size: 20px !important;            /* head-sm */
  line-height: 1.3 !important;
  color: var(--tm-green, #ABFF00) !important;
}

.tm-blue-questions__item + .tm-blue-questions__item {
  margin-top: 32px !important;
}


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

@media (max-width: 900px) {
  .tm-blue-questions,
  .wp-block-transformis-blue-questions {
    padding: 56px 0 !important;
  }

  .tm-blue-questions__arrow {
    width: clamp(90px, 12vw, 140px);
    left: -28px;
  }
}

@media (max-width: 640px) {
  .tm-blue-questions,
  .wp-block-transformis-blue-questions {
    padding: 40px 0 !important;
  }

  .tm-blue-questions__inner {
    padding-left: var(--tm-content-padding);
  }

  /* Pfeil kleiner und oben statt mittig, damit er den Text nicht ueberlagert */
  .tm-blue-questions__arrow {
    width: 40px !important;
    left: -8px !important;
    top: 24px !important;
    transform: none !important;
  }

  .tm-blue-questions__item,
  li.tm-blue-questions__item {
    font-size: 18px !important;
  }
}