/**
 * 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; }
}

/* ---------- rd-diagram — "Es liegt nicht an dir …" (Stress-Selbsttest ROT, body.lp-red;
   export .wide/.sg + .mech). Header (field_main_title) = centred <h2> (<em> teal) + lead <p>.
   Image = the export's stress-chain SVG rasterised (field_image desktop, field_image_mobile =
   the mobile SVG + its three tags) inside the export's white card (max 980, radius 24).
   Body = centred text column (max 780) + <blockquote><p> teal note. Type from normal.css
   (.lp-red). ---------- */
.ms-sdc--iimv2.rd-diagram .ms-sdc__inner{ max-width:1044px; }
.ms-sdc--iimv2.rd-diagram .ms-sdc__header{ text-align:center; max-width:800px; margin:0 auto; }
.lp-red .ms-sdc--iimv2.rd-diagram .ms-sdc__header > h2 + p{
  font-size:20px; line-height:1.65; max-width:780px; margin:18px auto 0;
}
.ms-sdc--iimv2.rd-diagram .ms-sdc__media{
  max-width:980px; margin:44px auto 0; background:#fff; border-radius:24px;
  padding:clamp(22px,4vw,44px) clamp(16px,3vw,40px); box-shadow:0 10px 34px rgba(0,60,62,.08);
}
.ms-sdc--iimv2.rd-diagram .ms-sdc__media img{ display:block; width:100%; height:auto !important; object-fit:fill; }
.ms-sdc--iimv2.rd-diagram .ms-sdc__body{ max-width:780px; margin:40px auto 0; text-align:center; }
.lp-red .ms-sdc--iimv2.rd-diagram .ms-sdc__body > p + p{ margin-top:16px; }
.lp-red .ms-sdc--iimv2.rd-diagram .ms-sdc__body > blockquote{ margin:30px 0 0; padding:0; border:0; background:none; }
.lp-red .ms-sdc--iimv2.rd-diagram .ms-sdc__body > blockquote p{
  font-family:'Recoleta'; font-weight:600; font-size:26px; line-height:1.3; color:#007375; margin:0;
}
@media (max-width:900px){
  .ms-sdc--iimv2.rd-diagram .ms-sdc__media{ margin-left:-14px; margin-right:-14px; } /* export .wide gutter 14 */
  .lp-red .ms-sdc--iimv2.rd-diagram .ms-sdc__body > blockquote p{ font-size:22px; }
}
@media (max-width:640px){
  .lp-red .ms-sdc--iimv2.rd-diagram .ms-sdc__header > h2 + p{ font-size:18px; }
  .ms-sdc--iimv2.rd-diagram .ms-sdc__media{ margin-left:-6px; margin-right:-6px; }   /* page gutter 20 vs .wide 14 */
}
/* mobile raster (field_image_mobile, ≤768) = the export's .sg2-m, capped at its 420px */
@media (max-width:768px){ .ms-sdc--iimv2.rd-diagram .ms-sdc__media img{ max-width:420px; margin:0 auto; } }

/* ---------- rd-diagram on the GELB page (body.lp-yellow) — the `.lp-red` rules mirrored;
   intro 18px (user decision); mechanism text left-aligned ≤640 (export .mech), 28px ≤760. ---------- */
.lp-yellow .ms-sdc--iimv2.rd-diagram .ms-sdc__header > h2 + p{
  font-size:18px; line-height:1.65; max-width:780px; margin:18px auto 0;
}
.lp-yellow .ms-sdc--iimv2.rd-diagram .ms-sdc__body > p + p{ margin-top:16px; }
.lp-yellow .ms-sdc--iimv2.rd-diagram .ms-sdc__body > blockquote{ margin:30px 0 0; padding:0; border:0; background:none; }
.lp-yellow .ms-sdc--iimv2.rd-diagram .ms-sdc__body > blockquote p{
  font-family:'Recoleta'; font-weight:600; font-size:26px; line-height:1.3; color:#007375; margin:0;
}
@media (max-width:900px){ .lp-yellow .ms-sdc--iimv2.rd-diagram .ms-sdc__body > blockquote p{ font-size:22px; } }
@media (max-width:760px){ .lp-yellow .ms-sdc--iimv2.rd-diagram .ms-sdc__body{ margin-top:28px; } }
@media (max-width:640px){ .lp-yellow .ms-sdc--iimv2.rd-diagram .ms-sdc__body > p{ text-align:left; } }