/**
 * bootsass:image-in-middle-v2 — header → middle image → body.
 * Scoped under .ms-sdc--iimv2. Widths match the AI design: tint/cards bands 840,
 * the check-list (recog) band 880, at ≥1040. Flag/type styles come from normal.css.
 */
.ms-sdc--iimv2 .ms-sdc__media { margin: 30px 0 4px; }
.ms-sdc--iimv2 .ms-sdc__media img { width: 100%; height: 222px; object-fit: cover; }
.ms-sdc--iimv2 .ms-sdc__body { margin-top: 4px; }

/* Image caption = first h5 in the body: teal dot before it (AI figcaption). */
.ms-sdc--iimv2 .ms-sdc__body h5 {
  display: flex; gap: 7px; align-items: flex-start; margin: 11px 0 0; line-height: 1.45;
}
.ms-sdc--iimv2 .ms-sdc__body h5::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ms-petrol); margin-top: 6px;
}
.ms-sdc--iimv2.on-dark .ms-sdc__body h5 { color: rgba(255,255,255,0.55); }
.ms-sdc--iimv2.on-dark .ms-sdc__body h5::before { background: var(--ms-teal-light); }

/* Recognition question = an h3 in the body (e.g. "Erkennst du dich hier?"):
   italic display, no divider. Region selector out-specifies the base h3. */
.ms-sdc--iimv2 .ms-sdc__body h3 {
  font-family: var(--ms-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--ms-petrol-ink) !important;
  margin: 28px 0 20px !important;
}
.ms-sdc--iimv2.on-dark .ms-sdc__body h3 { color: #fff !important; }

@media (min-width: 720px) {
  .ms-sdc--iimv2 .ms-sdc__media { margin: 40px 0 6px; }
  .ms-sdc--iimv2 .ms-sdc__media img { height: 380px; }
  .ms-sdc--iimv2 .ms-sdc__body h5 { margin-top: 13px; }
  .ms-sdc--iimv2 .ms-sdc__body h3 { font-size: 26px !important; margin-bottom: 24px !important; }
}

@media (min-width: 1040px) {
  .ms-sdc--iimv2 .ms-sdc__inner { max-width: 840px; }
  .ms-sdc--iimv2.check-list .ms-sdc__inner { max-width: 880px; }
}