/* =============================================================
   bo-mechanism — Brand Offer Mechanism Section
   Alle Klassen mit bo-mechanism- praefixiert
   ============================================================= */

.bo-mechanism-wrapper {
  background-color: var(--bm-bg, #ffffff);
  padding: var(--bm-pad-top, 32px) 16px var(--bm-pad-bottom, 32px);
  box-sizing: border-box;
  width: 100%;
  display: block;
}

.bo-mechanism-wrapper *,
.bo-mechanism-wrapper *::before,
.bo-mechanism-wrapper *::after {
  box-sizing: border-box;
}

.bo-mechanism-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ===== Subline / Headline ===== */
.bo-mechanism-subline {
  margin: 0;
  color: var(--bm-subline-color, #888888);
  font-size: var(--bm-subline-size, 13px);
  line-height: 1.45;
}
.bo-mechanism-subline p { margin: 0; }
.bo-mechanism-subline p + p { margin-top: 6px; }

.bo-mechanism-headline {
  margin: 0;
  color: var(--bm-headline-color, #1a1a1a);
  font-size: var(--bm-headline-size, 18px);
  line-height: 1.3;
  font-weight: 600;
}
.bo-mechanism-headline p { margin: 0; }
.bo-mechanism-headline p + p { margin-top: 6px; }

/* ===== Banner ===== */
.bo-mechanism-banner {
  width: 100%;
  height: var(--bm-banner-height, 140px);
  background-color: var(--bm-banner-bg, #f5f1e8);
  border: 1px dashed var(--bm-banner-border, #d4cfc0);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 4px 0 8px;
}

/* Wenn ein Bild gesetzt ist: Banner nimmt Original-Bildhöhe */
.bo-mechanism-banner-with-image {
  border-style: solid;
  height: auto;
  background-color: transparent;
  border: none;
}

.bo-mechanism-banner-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.bo-mechanism-banner-text {
  color: #999999;
  font-size: 13px;
  text-align: center;
  padding: 16px 24px;
  line-height: 1.4;
}
.bo-mechanism-banner-text p { margin: 0; }

/* ===== Steps ===== */
.bo-mechanism-steps {
  display: flex;
  flex-direction: column;
}

.bo-mechanism-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 18px 0;
  align-items: start;
}

.bo-mechanism-step + .bo-mechanism-step {
  border-top: 1px solid #ececec;
}

/* ===== Grid-Anordnung ===== */
.bo-mechanism-steps-grid {
  display: grid;
  grid-template-columns: repeat(var(--bm-cols-desktop, 3), minmax(0, 1fr));
  gap: 16px;
}

.bo-mechanism-steps-grid .bo-mechanism-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 20px 18px;
  border: 1px solid #ececec;
  border-radius: 10px;
}

.bo-mechanism-steps-grid .bo-mechanism-step + .bo-mechanism-step {
  border-top: 1px solid #ececec;
}

.bo-mechanism-steps-grid .bo-mechanism-step-content {
  width: 100%;
}

.bo-mechanism-step-number {
  width: var(--bm-num-size, 28px);
  height: var(--bm-num-size, 28px);
  border-radius: 50%;
  background-color: var(--bm-num-bg, #f3ede1);
  color: var(--bm-num-color, #a07f3e);
  font-size: var(--bm-num-font-size, 12px);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.bo-mechanism-step-image-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bo-mechanism-step-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.bo-mechanism-step-content {
  min-width: 0;
}

.bo-mechanism-step-headline {
  margin: 0;
  color: var(--bm-step-headline-color, #1a1a1a);
  font-size: var(--bm-step-headline-size, 15px);
  font-weight: 600;
  line-height: 1.35;
}
.bo-mechanism-step-headline p { margin: 0; }

.bo-mechanism-step-subline {
  margin: 4px 0 0 0;
  color: var(--bm-step-subline-color, #444444);
  font-size: var(--bm-step-subline-size, 14px);
  line-height: 1.45;
}
.bo-mechanism-step-subline p { margin: 0; }
.bo-mechanism-step-subline p + p { margin-top: 4px; }

.bo-mechanism-step-text {
  margin: 6px 0 0 0;
  color: var(--bm-step-text-color, #888888);
  font-size: var(--bm-step-text-size, 12px);
  line-height: 1.45;
  font-style: italic;
}
.bo-mechanism-step-text p { margin: 0; }

/* ===== Mobile ===== */
@media screen and (max-width: 749px) {
  .bo-mechanism-wrapper {
    padding-left: 12px;
    padding-right: 12px;
  }

  .bo-mechanism-step {
    gap: 12px;
    padding: 14px 0;
  }

  .bo-mechanism-steps-grid {
    grid-template-columns: repeat(var(--bm-cols-mobile, 1), minmax(0, 1fr));
    gap: 12px;
  }

  .bo-mechanism-steps-grid .bo-mechanism-step {
    padding: 16px 14px;
  }

  .bo-mechanism-banner:not(.bo-mechanism-banner-with-image) {
    height: calc(var(--bm-banner-height, 140px) * 0.75);
  }
}

@media screen and (max-width: 419px) {
  .bo-mechanism-step {
    gap: 10px;
    padding: 12px 0;
  }
}